/* Session content only. The existing FreeStory shell and layout stay unchanged. */
.chat-messages .message-body {
  color: #fff;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 600;
/*  letter-spacing: .02em;*/
}
.chat-messages .message-body > :first-child { margin-top: 0; }
.chat-messages .message-body > :last-child { margin-bottom: 0; }
.chat-messages .message-body p { margin: 0 0 12px; white-space: pre-wrap; }
.chat-messages .message-body p + p { margin-top: 0; }
.chat-messages .message-body em { color: #8f8f8f; font-style: italic; font-weight: 500; }
.chat-messages .message-body strong { color: #fff; font-weight: 600; }
.chat-messages .message-body h1,
.chat-messages .message-body h2,
.chat-messages .message-body h3,
.chat-messages .message-body h4,
.chat-messages .message-body h5,
.chat-messages .message-body h6 { margin: 24px 0 12px; color: #fff; font-size: 16px; line-height: 1.7; font-weight: 600; }
.chat-messages .message-body blockquote { margin: 12px 0; padding: 0 0 0 18px; border-left: 3px solid rgb(255 255 255 / 38%); }
.chat-messages .message-body blockquote > :last-child { margin-bottom: 0; }
.chat-messages .message-body ul,
.chat-messages .message-body ol { margin: 16px 0; padding-left: 26px; }
.chat-messages .message-body li { padding-left: 3px; white-space: pre-wrap; }
.chat-messages .message-body li + li { margin-top: 6px; }
.chat-messages .message-body li > p { margin-bottom: 8px; }
.chat-messages .message-body li > ul,
.chat-messages .message-body li > ol { margin-block: 8px; }
.chat-messages .message-body input[type="checkbox"] { margin-right: 8px; accent-color: #fff; }
.chat-messages .message-body a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 45%); text-underline-offset: 4px; }
.chat-messages .message-body a:hover { text-decoration-color: #fff; }
.chat-messages .message-body hr { margin: 24px 0; border: 0; border-top: 1px solid rgb(255 255 255 / 12%); }
.chat-messages .message-body img { display: block; width: 100%; max-width: 100%; height: auto; margin: 16px 0; border-radius: 10px; }
.chat-messages .message-body :not(pre) > code { padding: 2px 6px; border-radius: 5px; background: rgb(255 255 255 / 7%); font-size: 16px; font-weight: 600; }
.message-code-block { min-width: 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 12px; background: #2d2c30; }
.message-code-header { padding: 8px 18px; border-bottom: 1px solid rgb(255 255 255 / 7%); background: rgb(255 255 255 / 10%); color: #fff; font-size: 14px; line-height: 1.5; font-weight: 600; }
.chat-messages .message-code-block pre { margin: 0; padding: 10px 18px; overflow-x: auto; color: #fff; font-size: 14px; line-height: 1.6; font-weight: 500; white-space: pre; tab-size: 2; }
.chat-messages .message-code-block code { color: inherit; font: inherit; }
.chat-messages .message-info-block pre { font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.message-info-block .info-value { color: #ff9e29; font-weight: 600; }
.message-table-scroll { max-width: 100%; margin: 20px 0; overflow-x: auto; scrollbar-width: thin; }
.chat-messages .message-body table { width: 100%; border-collapse: collapse; color: #fff; font-size: 16px; line-height: 1.7; font-weight: 600; text-align: left; }
.chat-messages .message-body th,
.chat-messages .message-body td { min-width: 100px; padding: 10px 14px; border: 1px solid rgb(255 255 255 / 12%); font-weight: 600; }
.chat-messages .message-body th { background: rgb(255 255 255 / 4%); }

/* Message tools and suggested replies. Existing reading colors and spacing are preserved. */
.message-actions { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.message-response-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.message-response-status .message-retry { display: inline-flex; flex: 0 0 auto; width: auto; gap: 6px; padding: 0 10px; background: rgb(255 255 255 / 7%); font: 500 12px/1.5 var(--font-ui); }
.message-response-status .message-retry:hover:not(:disabled) { background: rgb(255 255 255 / 12%); }
.message-response-status .message-retry:disabled { color: var(--text-muted); opacity: .5; }
.message-icon-button { display: inline-grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.message-icon-button > img { display: block; width: 18px; height: 18px; opacity: .6; }
.message-icon-button:hover { background: rgb(255 255 255 / 7%); }
.message-icon-button:hover > img, .message-icon-button[aria-expanded="true"] > img { opacity: 1; }
.message-icon-button:focus-visible { outline: 2px solid rgb(255 255 255 / 65%); outline-offset: 2px; }
.message-icon-button:disabled { cursor: default; background: transparent; }
.message-icon-button:disabled > img { opacity: .22; }
.message-more-wrap { position: relative; }
.message-action-menu { position: absolute; z-index: 4; left: 0; bottom: calc(100% + 6px); display: grid; width: 200px; padding: 6px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 12px; background: #242127; box-shadow: 0 12px 32px rgb(0 0 0 / 35%); }
.message-action-menu[data-placement="below"] { top: calc(100% + 6px); bottom: auto; }
.message-action-menu > button { padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: #fff; font: 500 13px/1.5 var(--font-ui); text-align: left; cursor: pointer; }
.message-action-menu > button:hover, .message-action-menu > button:focus-visible { background: rgb(255 255 255 / 7%); }
.message-action-menu > button[data-action="delete"], .message-action-menu > button[data-action="confirm-delete"] { color: #f0b1b1; }
.chat-messages .message-user { width: 100%; max-width: 100%; margin-left: 0; padding: 0; border-radius: 0; background: transparent; }
.chat-messages .message-user > .message-body { width: fit-content; max-width: 86%; margin-left: auto; padding: 13px 18px; border-radius: 18px 18px 4px 18px; background: rgb(255 255 255 / 7%); }
.chat-messages .message-user > .message-actions { justify-content: flex-end; }
.message-user .message-action-menu { right: 0; left: auto; }
.reply-suggestions { display: grid; gap: 10px; margin-top: 14px; }
.reply-suggestions-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.reply-suggestions-feedback button { padding: 5px 10px; border: 0; border-radius: 7px; background: rgb(255 255 255 / 8%); color: var(--text); font: inherit; }
.reply-suggestion { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 12px 14px 16px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 12px; background: rgb(255 255 255 / 2%); }
.reply-suggestion .suggestion-copy { flex: 1; min-width: 0; }
.reply-suggestion .suggestion-copy > :last-child { margin-bottom: 0; }
.suggestion-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.message-code-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.message-code-header .code-copy { flex-basis: 28px; width: 28px; height: 28px; }
.message-code-header .code-copy > img { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .reply-suggestion { gap: 8px; padding: 12px; }
  .suggestion-actions { flex-direction: column; }
}
.chat-messages .message-body .code-copy > img { width: 16px; height: 16px; margin: 0; border-radius: 0; }
.suggestion-actions .message-icon-button > img[src$="/send.svg"] { filter: invert(1); }

/* Story preparation stays subdued until the first narrative text arrives. */
.story-waiting { display: grid; width: fit-content; min-height: 28px; padding: 4px 0; font-size: 14px; font-weight: 400; line-height: 1.8; }
.story-waiting > span { grid-area: 1 / 1; opacity: 0; color: #8c8990; background: linear-gradient(105deg, #85818b 35%, #dedbe1 48%, #85818b 61%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: story-wait-phrase 12s linear infinite, story-wait-shine 2.4s linear infinite; }
.story-waiting > span:nth-child(2) { animation-delay: 3s, 0s; }
.story-waiting > span:nth-child(3) { animation-delay: 6s, 0s; }
.story-waiting > span:nth-child(4) { animation-delay: 9s, 0s; }
@keyframes story-wait-phrase { 0%, 2% { opacity: 0; } 4%, 21% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes story-wait-shine { from { background-position: 160% 0; } to { background-position: -100% 0; } }
.chat-model-change { display: flex; align-items: center; gap: 14px; margin: 10px 0; color: #97939b; font-size: 11px; line-height: 1.6; font-weight: 400; }
.chat-model-change::before, .chat-model-change::after { content: ''; height: 1px; flex: 1; background: rgb(210 205 216 / 13%); }
.chat-model-change > span { max-width: 65%; overflow-wrap: anywhere; text-align: center; }
.chat-icon-button[hidden], .chat-more-item[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .story-waiting > span { animation: none; background: none; -webkit-text-fill-color: currentColor; }
  .story-waiting > span:first-child { opacity: 1; }
}