@import url("./item-cards.css");
/* Stable hooks used by story-renderer.js and creator themes. */
.story-rendered-message { position: relative; isolation: isolate; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.story-rendered-message .story-content { line-height: 1.85; }
.story-rendered-message.hy-creator-ai-bubble { position: relative; padding: 2px; }
.story-rendered-message.hy-creator-ai-bubble::before { content: ""; position: absolute; inset: -1px; border-left: 2px solid color-mix(in srgb, var(--reader-accent, #d9a441) 70%, transparent); border-radius: 8px; pointer-events: none; }
.story-rendered-message.hy-creator-user-bubble { background: color-mix(in srgb, var(--reader-action, #d9a441) 10%, transparent); }
.story-rendered-message .story-emphasis { color: var(--reader-accent, #d9a441); font-weight: 700; }
.story-rendered-message .hy-creator-dialogue, .story-rendered-message .dialogue-quote { color: var(--reader-dialogue, var(--reader-text, #d8dee8)); }
.story-rendered-message .story-narration { margin: 8px 0; white-space: normal; }
.story-rendered-message .story-heading { margin: 12px 0 6px; color: var(--reader-accent, #d9a441); font-size: 1.05em; }
.story-rendered-message .story-dialogue, .story-rendered-message .dialogue-quote { display: inline-block; margin: 2px 0; padding: 2px 8px; border-left: 2px solid var(--reader-accent, #d9a441); color: var(--reader-dialogue, var(--reader-text, #d8dee8)); background: color-mix(in srgb, var(--reader-accent, #d9a441) 8%, transparent); }
.story-rendered-message .story-list { margin: 9px 0; padding-left: 1.35em; }
.story-rendered-message .story-list li { padding: 2px 0; }
.story-rendered-message blockquote { margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--reader-accent, #d9a441); color: var(--reader-quote, #9caac4); background: color-mix(in srgb, var(--reader-surface, #172033) 82%, transparent); }
.story-rendered-message .story-table-wrap { width: 100%; overflow-x: auto; margin: 12px 0; }
.story-rendered-message .story-table { width: 100%; min-width: 360px; border-collapse: collapse; font-size: .9em; }
.story-rendered-message .story-table th, .story-rendered-message .story-table td { padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--reader-text, #d8dee8) 18%, transparent); text-align: left; vertical-align: top; }
.story-rendered-message .story-table th { color: var(--reader-accent, #d9a441); background: color-mix(in srgb, var(--reader-surface, #172033) 80%, transparent); }
.story-rendered-message .story-code-block { overflow: auto; margin: 11px 0; padding: 10px 12px; border-radius: 7px; background: rgba(0,0,0,.22); font: .88em/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.story-rendered-message .story-inline-image { display: block; width: auto; max-width: 100%; max-height: 460px; margin: 10px 0; border-radius: 7px; object-fit: contain; }
.story-rendered-message .story-structure-card { margin: 12px 0; border: 1px solid color-mix(in srgb, var(--reader-accent, #d9a441) 38%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--reader-surface, #172033) 88%, transparent); }
.story-rendered-message .story-structure-card > summary { padding: 9px 11px; color: var(--reader-accent, #d9a441); cursor: pointer; }
.story-rendered-message .story-structure-card > div { padding: 9px 11px; border-top: 1px solid color-mix(in srgb, var(--reader-text, #d8dee8) 12%, transparent); white-space: pre-wrap; }
.story-rendered-message .story-opening { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.story-rendered-message .story-opening .hy-creator-opening-form { width: 100%; max-width: 100%; display: grid; gap: 10px; }
.story-rendered-message .story-opening input, .story-rendered-message .story-opening textarea, .story-rendered-message .story-opening select, .story-rendered-message .story-opening button { max-width: 100%; min-width: 0; }
.story-rendered-message .story-opening :where(main,form,details,section,article) { min-width: 0; max-width: 100%; box-sizing: border-box; }
.story-rendered-message .story-opening select { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) {
  /* A desktop input's 200px flex-basis becomes its height in a column. */
  .story-rendered-message .story-opening .hy-creator-form-field > .hy-creator-form-control { flex: 0 1 auto !important; }
  .story-rendered-message .story-opening .hy-creator-form-submit { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .story-rendered-message .story-opening .hy-creator-form-section > [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
.story-rendered-message .story-theme-global-runtime { min-width: 0; max-width: 100%; }
.story-rendered-message .story-platform-control, .story-rendered-message .msg-actions, .story-rendered-message .tag-bar { max-width: 100%; }

/* Author HTML wrapper: reset platform typography so author styles work */
.story-rendered-message .story-html { text-align: left; text-indent: 0; letter-spacing: normal; line-height: inherit; }
.story-rendered-message .story-html em { font-style: italic; color: inherit; }
.story-rendered-message .story-html img { max-width: 100%; height: auto; }
.story-rendered-message .story-html a { color: var(--reader-accent, #d9a441); text-decoration: underline; }

/* iframe wrapper and frame styles */
.story-html-frame-wrap { position: relative; width: 100%; margin: 0; }
.story-html-frame { display: block; width: 100%; border: 0; background: transparent; }

@media (max-width: 600px) {
  .story-rendered-message .story-table { min-width: 300px; font-size: .82em; }
  .story-rendered-message .story-inline-image { max-height: 300px; }
}

/* 流式气泡：隔离打字机追加引发的内部重排，长文生成期间不再拖累整页布局 */
.story-content.story-streaming { contain: layout style; }

/* ==========================================================================
   2026-09-28 阅读排版 v2（对标并超越旧站 .msg-assistant .msg-content 小说排版）
   - 每行一段、旁白首行缩进 2em、两端对齐、舒适行宽（约 40–46 个汉字）
   - 对白独立成段：琥珀色对白卡（旧站 .dialogue-quote 同语义），不再挤在叙述行尾
   - 行内引用/拟声词不画框；场景分隔、章节标题、字段表单独排版
   选择器特异性刻意低于作者主题（.reader-page .reader-scroll .story-rendered-message …），
   作者美化始终优先；平台只提供无主题时的默认阅读体验。
   ========================================================================== */
.reader-scroll{--story-measure:820px;--story-ink:var(--reader-text,#dfe3ea);--story-dialogue-ink:var(--reader-dialogue-ink,#f2b35e);--story-accent:var(--reader-accent,var(--accent,#f3c66a))}
.reader-scroll .message-block{max-width:var(--story-measure);margin-left:auto;margin-right:auto}
.reader-scroll .message-block .message-head{max-width:var(--story-measure)}

/* AI 正文：柔和纸页卡片，去掉历史遗留的金色左竖线 */
.reader-scroll .story-rendered-message.story-ai-bubble{padding:26px clamp(20px,3.2vw,40px) 24px;border:1px solid color-mix(in srgb,var(--story-ink) 9%,transparent);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--reader-surface,#172033) 92%,transparent),color-mix(in srgb,var(--reader-surface,#172033) 72%,transparent));box-shadow:0 1px 0 color-mix(in srgb,var(--story-ink) 5%,transparent) inset,0 18px 40px -30px rgba(0,0,0,.55)}
.reader-scroll .story-rendered-message.hy-creator-ai-bubble::before{content:none}
.reader-scroll .story-ai-bubble .story-content{font-size:17px;line-height:1.95;letter-spacing:.025em;color:var(--story-ink);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Inter,system-ui,sans-serif;text-align:justify;text-justify:inter-character;line-break:strict;word-break:normal;overflow-wrap:break-word;hanging-punctuation:allow-end}
.reader-scroll .story-ai-bubble .story-content :is(table,.item-card,.story-fields,.story-structure-card,pre){text-align:left}

/* 旁白段：首行缩进、段距 */
.reader-scroll .story-content .story-narration{margin:0 0 .78em;line-height:inherit;white-space:normal;text-indent:2em;text-wrap:pretty}
.reader-scroll .story-user-bubble .story-content .story-narration{text-indent:0}
.reader-scroll .story-content > :last-child{margin-bottom:0}

/* 对白段：独立成段、顶格，琥珀色对白卡 */
.reader-scroll .story-content .story-dialogue-line{line-height:inherit;display:flex;align-items:baseline;gap:.35em;margin:.5em 0 .85em;text-indent:0;white-space:normal}
.reader-scroll .story-dialogue-line .story-dialogue{display:block;flex:1 1 auto;min-width:0;margin:0;padding:.42em .95em .42em .9em;border:1px solid color-mix(in srgb,var(--story-dialogue-ink) 24%,transparent);border-left:3px solid color-mix(in srgb,var(--story-dialogue-ink) 62%,transparent);border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--story-dialogue-ink) 15%,transparent),color-mix(in srgb,var(--story-dialogue-ink) 5%,transparent));color:var(--story-dialogue-ink);text-align:left;quotes:none}
.reader-scroll .story-dialogue-line .story-speaker{flex:none;color:color-mix(in srgb,var(--story-ink) 78%,transparent);font-weight:700;letter-spacing:.02em}
.reader-scroll .story-dialogue-line .story-speaker .story-narration{display:inline}
.reader-scroll .story-dialogue em,.reader-scroll .story-dialogue strong{color:inherit}
/* 列表/表格/引用里的对白保持行内，只着色不画框 */
.reader-scroll .story-content :is(li,td,th,blockquote,h3,h4) .story-dialogue{display:inline;padding:0;border:0;background:none;color:var(--story-dialogue-ink)}

/* 行内引用 / 拟声词：不画框（旧站 inline-quote / sfx-quote） */
.reader-scroll .story-content .inline-quote{color:color-mix(in srgb,var(--story-dialogue-ink) 72%,var(--story-ink))}
.reader-scroll .story-content .sfx-quote{color:#f3b35d;font-weight:600}
.reader-scroll .story-content em{font-style:normal;color:color-mix(in srgb,var(--story-ink) 64%,transparent)}
.reader-scroll .story-content .story-emphasis{color:var(--story-accent);font-weight:700}

/* Stream 思考流标签：柔和的内心独白样式 */
.reader-scroll .story-content .story-stream{display:block;margin:1em 0;padding:12px 16px;border-left:3px solid color-mix(in srgb,var(--story-ink) 18%,transparent);border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--story-ink) 3%,transparent);color:color-mix(in srgb,var(--story-ink) 75%,transparent);font-size:.95em;font-style:italic;line-height:1.75;text-indent:0}

/* 章节标题 / 场景分隔 / 字段表 */
.reader-scroll .story-content .story-section-heading{display:flex;align-items:center;gap:12px;margin:1.3em 0 .8em;text-indent:0;color:var(--story-accent);font-size:.95em;font-weight:800;letter-spacing:.08em}
.reader-scroll .story-content .story-section-heading::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--story-accent) 45%,transparent),transparent)}
.reader-scroll .story-content .story-heading{margin:1.2em 0 .6em;text-indent:0;font-size:1.08em;letter-spacing:.04em}
.reader-scroll .story-content .story-scene-break{display:flex;justify-content:center;margin:1.5em 0}
.reader-scroll .story-content .story-scene-break span{display:block;width:64px;height:10px;background:radial-gradient(circle,color-mix(in srgb,var(--story-accent) 70%,transparent) 2.2px,transparent 2.6px) 0 50%/21px 10px repeat-x;opacity:.8}
.reader-scroll .story-content .story-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 18px;margin:.4em 0 1em;padding:12px 16px;border:1px solid color-mix(in srgb,var(--story-ink) 10%,transparent);border-radius:12px;background:color-mix(in srgb,var(--story-ink) 4%,transparent);font-size:.9em;line-height:1.7;text-indent:0}
.reader-scroll .story-content .story-field{display:flex;gap:10px;min-width:0}
.reader-scroll .story-content .story-field dt{flex:none;color:color-mix(in srgb,var(--story-ink) 55%,transparent)}
.reader-scroll .story-content .story-field dd{margin:0;min-width:0;color:var(--story-ink);font-weight:600;overflow-wrap:anywhere}
.reader-scroll .story-content :is(blockquote,.story-list,.story-table-wrap,pre){text-indent:0}
.reader-scroll .story-content blockquote{border-radius:0 10px 10px 0}

/* 玩家行动：紧凑的"你的行动"条，与正文卡区分 */
.reader-scroll .story-rendered-message.story-user-bubble{padding:12px 18px;border:1px solid color-mix(in srgb,var(--reader-action,var(--accent,#f3c66a)) 22%,transparent);border-left:3px solid color-mix(in srgb,var(--reader-action,var(--accent,#f3c66a)) 70%,transparent);border-radius:12px;background:color-mix(in srgb,var(--reader-action,var(--accent,#f3c66a)) 8%,var(--reader-surface,#172033))}
.reader-scroll .story-user-bubble .story-content{font-size:15px;line-height:1.8;color:color-mix(in srgb,var(--story-ink) 88%,transparent)}
.reader-scroll .story-user-bubble .story-dialogue-line{margin:.25em 0}
.reader-scroll .story-user-bubble .story-dialogue-line .story-dialogue{padding:.2em .7em}

/* 流式打字机：原始文本节点保留换行，正式排版接管后恢复段落规则 */
.reader-scroll .story-content.story-streaming{white-space:pre-wrap}
.reader-scroll .story-content.story-streaming > p{white-space:normal}

/* 浅色模式：暖纸色与棕色对白；只在无主题时应用 */
html[data-theme=light] .reader-scroll:not(.theme-active,.reader-content-only){--story-dialogue-ink:var(--reader-dialogue-ink,#9a5a1c)}
html[data-theme=light] .reader-scroll:not(.theme-active,.reader-content-only) .story-rendered-message.story-ai-bubble{background:linear-gradient(180deg,#fffdf9,#fbf7f0);border-color:rgba(90,64,38,.12);box-shadow:0 14px 34px -28px rgba(73,51,31,.35)}
html[data-theme=light] .reader-scroll:not(.theme-active,.reader-content-only) .story-dialogue-line .story-dialogue{background:linear-gradient(90deg,rgba(214,150,80,.16),rgba(214,150,80,.05));border-color:rgba(180,114,63,.26);border-left-color:rgba(180,114,63,.62)}
html[data-theme=light] .reader-scroll:not(.theme-active,.reader-content-only) .story-content .sfx-quote{color:#b0651b}

@media (max-width:780px){
  .reader-scroll .story-rendered-message.story-ai-bubble{padding:18px 16px 16px;border-radius:14px}
  .reader-scroll .story-ai-bubble .story-content{font-size:16px;line-height:1.9;letter-spacing:.02em}
  .reader-scroll .story-content .story-dialogue-line{margin:.4em 0 .75em}
  .reader-scroll .story-dialogue-line .story-dialogue{padding:.36em .75em}
  .reader-scroll .story-content .story-fields{grid-template-columns:1fr;padding:10px 12px}
}

/* 作者主题桥接（旧站 buildCreatorThemeCompatibilityCss 同语义）：作者未单独美化台词时，
   对白卡取作者主题的引用色/强调色；声明在消息根上，才能解析作者定义在气泡上的变量。 */
.reader-scroll:is(.theme-active,.reader-content-only) .story-rendered-message{--story-dialogue-ink:var(--SmartThemeQuoteColor,var(--creator-accent,var(--reader-dialogue-ink,#f2b35e)))}
.reader-scroll:is(.theme-active,.reader-content-only) .story-rendered-message{--story-ink:var(--creator-text,var(--reader-text,#dfe3ea))}
/* User text inherits the author's user-bubble ink. Legacy narration hooks
   apply to AI prose; the new renderer also wraps player text in paragraphs. */
.reader-scroll.theme-active .story-user-bubble .story-content{color:inherit}
.reader-scroll.theme-active .story-user-bubble .story-content .story-narration{color:inherit}
html[data-theme=light] .reader-scroll:is(.theme-active,.reader-content-only) .story-rendered-message{--story-dialogue-ink:var(--SmartThemeQuoteColor,var(--creator-accent,var(--reader-dialogue-ink,#9a5a1c)))}

/* 剧情走向：从 11px 小胶囊升级为可读的"下一步"卡片（桌面双列、手机单列） */
.reader-scroll .msg-inline-suggestions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin:14px 0 4px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--story-ink) 14%,transparent)}
.reader-scroll .msg-suggestion{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--story-accent) 26%,transparent);border-radius:12px;background:color-mix(in srgb,var(--story-accent) 6%,transparent);color:color-mix(in srgb,var(--story-ink) 90%,var(--story-accent));font-size:13px;line-height:1.6;text-align:left;transition:border-color .15s,background .15s,transform .15s}
.reader-scroll .msg-suggestion::before{content:"›";flex:none;color:var(--story-accent);font-weight:800;font-size:15px;line-height:1.45}
.reader-scroll .msg-suggestion:hover{border-color:color-mix(in srgb,var(--story-accent) 60%,transparent);background:color-mix(in srgb,var(--story-accent) 12%,transparent);transform:translateY(-1px)}
.reader-scroll .msg-suggestion:focus-visible{outline:2px solid var(--story-accent);outline-offset:2px}
.reader-scroll .msg-suggestion-loading{grid-column:1/-1;font-size:12px}
html[data-theme=light] .reader-scroll{--story-accent:var(--reader-accent,#a86a12)}
html[data-theme=light] .reader-scroll .msg-suggestion{color:#4a3b2c;border-color:rgba(168,106,18,.28);background:rgba(214,150,80,.07)}
/* 对白卡降噪：底色更轻，竖线/描边/底色全部跟随文字色（currentColor），
   作者主题只改台词颜色时，整张对白卡也随之统一 */
.reader-scroll .story-dialogue-line .story-dialogue{border-color:color-mix(in srgb,currentColor 18%,transparent);border-left-color:color-mix(in srgb,currentColor 68%,transparent);background:linear-gradient(90deg,color-mix(in srgb,currentColor 11%,transparent),color-mix(in srgb,currentColor 2%,transparent) 85%)}
html[data-theme=light] .reader-scroll .story-dialogue-line .story-dialogue{border-color:color-mix(in srgb,currentColor 22%,transparent);border-left-color:color-mix(in srgb,currentColor 60%,transparent);background:linear-gradient(90deg,color-mix(in srgb,currentColor 12%,transparent),color-mix(in srgb,currentColor 3%,transparent) 85%)}
@media (max-width:780px){.reader-scroll .msg-inline-suggestions{grid-template-columns:1fr}}
/* 消息头：角色名 + 本地化时间，弱化但可读 */
.reader-scroll .message-head{align-items:baseline;padding:0 4px 8px;font-size:12px;opacity:1;color:color-mix(in srgb,var(--story-ink) 50%,transparent)}
.reader-scroll .message-head small{font-size:12px;font-weight:700;letter-spacing:.06em}
.reader-scroll .message-head time{font-size:11px;font-variant-numeric:tabular-nums;opacity:.8}

/* 2026-09-29 空会话开场引导样式（本地遗留块补回：reader-controller emptySessionHtml 已在用） */
.reader-scroll .reader-empty-session{display:grid;justify-items:center;gap:10px;max-width:520px;margin:12vh auto 0;padding:32px 28px;border:1px dashed color-mix(in srgb,var(--story-accent) 35%,transparent);border-radius:18px;text-align:center;color:color-mix(in srgb,var(--story-ink) 70%,transparent)}
.reader-scroll .reader-empty-session h3{margin:0;color:var(--story-ink);font-size:18px}
.reader-scroll .reader-empty-session p{margin:0;font-size:13.5px;line-height:1.8}
.reader-scroll .reader-empty-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--story-accent) 14%,transparent);color:var(--story-accent);font-size:24px}

/* 构思/生成状态：状态行按次要文本排版，省略号做成呼吸动画 */
.reader-scroll .story-ai-bubble .story-content.reader-thinking-content{font-size:15px;line-height:1.7;letter-spacing:.02em;color:color-mix(in srgb,var(--story-ink) 78%,transparent);text-align:left}
html[data-theme=light] .reader-scroll .story-ai-bubble .story-content.reader-thinking-content{color:color-mix(in srgb,var(--story-ink) 92%,transparent)}
.reader-thinking-hint .ta-dots{display:inline-flex;gap:2px;margin-left:3px}
.reader-thinking-hint .ta-dots span{opacity:.25;animation:reader-thinking-dot 1.2s infinite ease-in-out}
.reader-thinking-hint .ta-dots span:nth-child(2){animation-delay:.18s}
.reader-thinking-hint .ta-dots span:nth-child(3){animation-delay:.36s}
@keyframes reader-thinking-dot{0%,60%,100%{opacity:.25}30%{opacity:1}}