/* 阅读结构：尺寸取设计稿；诊断／目录依 UI 案§六；形色字体统一取 theme.css。 */
/* 水纹静止：漂移在长卷滚动容器上逐帧重绘、静置耗一整核（E-08 A-06，48-B 去之，稿同改）。 */
.reader { max-width: none; width: 100%; margin: 0; padding: 0 64px 40px; background-image: var(--water-img); background-attachment: local; background-size: 640px 480px; background-position: 40px 30px; }
.reader-inner { width: min(var(--col-read), 100%); max-width: none; margin: 0 auto; position: relative; }
.reader-bar { z-index: 4; }
.reader-right { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.reader-right .annot-mode { font: 11px var(--font-mono); color: var(--qing); white-space: nowrap; }
.reader-top { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; padding: 12px 56px 10px 0; margin: 0; border: 0; }
/* 题头底色自状态行底缘起、向下 24px 渐透（伸入消息区 14px 顶距），状态行不落渐透带（E-08 B-10，稿同式）。 */
.reader-top::before { content: ''; position: absolute; inset: 0 0 -14px; z-index: -1; background: linear-gradient(var(--paper) calc(100% - 24px), transparent); pointer-events: none; }
.reader-title, .reader-title-input { font: 500 21px/1.35 var(--font-display); letter-spacing: 1px; padding: 0; margin: 0; overflow-wrap: anywhere; }
.reader-title-input { display: block; width: 100%; min-width: 0; border: 0; border-radius: var(--r); resize: none; overflow: hidden; background: var(--panel); color: var(--ink); outline: var(--stroke) solid var(--qing); outline-offset: 3px; }
.reader-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 0; margin: 0; font: 11.5px/1.5 var(--font-mono); }
.reader-meta button { padding: 0; color: var(--ink-3); }
.reader-model { min-width: 0; overflow-wrap: anywhere; }
.reader-actions { display: flex; flex-wrap: wrap; gap: 2px; padding: 0; margin: 4px 0 0; border: 0; }
.reader-actions button { display: inline-flex; align-items: center; gap: 5px; height: 26px; border: 0; border-radius: 6px; padding: 0 9px; font-size: 12.5px; color: var(--ink-2); background: transparent; }
.reader-actions button svg { font-size: 15px; }
.reader-actions button:hover { background: var(--hover); color: var(--ink); }
.reader-actions button[aria-pressed="true"] { color: var(--qing); background: var(--qing-wash); }
.reader-actions #migrateBtn { margin-left: 5px; color: var(--ink-3); }
.reader-messages { padding-top: 14px; }
.reader .msg { margin: 0 0 18px; }
.reader .msg-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; margin: 0 0 4px; width: 100%; text-align: left; }
.reader .user .msg-head { justify-content: flex-end; }
.reader .msg-who { font: 14.5px/1.6 var(--font-display); font-weight: normal; letter-spacing: 1px; color: var(--ink-2); }
.reader .user .msg-who { color: var(--qing); }
.reader .msg-time { font: 11px var(--font-mono); }
.reader .msg-text { position: relative; padding: 13px 40px 13px 14px; margin: 0; border-radius: 6px; font: 13.5px/1.7 var(--font-body); }
.reader .user .msg-text { background: var(--user-bg); border: 1px solid var(--user-line); box-shadow: none; }
.reader .assistant .msg-text { background: var(--mist); border: 0; box-shadow: none; }
.block-content { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.reader .md-code, .reader .md-tbl { font-family: var(--font-mono); }
.tengchao { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: none; color: var(--ink-3); opacity: 0; font-size: 16px; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.full-block:hover > .tengchao, .tengchao:focus-visible { opacity: .75; }
.full-block > .tengchao:hover { opacity: 1; color: var(--qing); }
.reader .reader-fold { padding: 0; margin: 0; overflow: visible; white-space: normal; font-size: 12px; color: var(--ink-3); border: 0; background: transparent; }
.fold-toggle { display: block; width: 100%; text-align: left; padding: 2px 4px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
.fold-toggle:hover { color: var(--ink-2); }
.tcaret { display: inline-block; font-size: 12px; transition: transform var(--t-mid) var(--ease); }
.open > .fold-toggle .tcaret { transform: rotate(90deg); }
.open > .fold-toggle .fold-preview { display: none; }
.fold-preview { font-family: var(--font-display); opacity: .85; }
.tools .fold-preview { font-family: var(--font-mono); font-size: 11.5px; }
.fold-body { display: none; position: relative; margin: 0 0 6px; padding: 9px 36px 9px 12px; border-radius: 6px; font: 12.5px/1.65 var(--font-body); color: var(--ink-2); background: var(--annot); }
.open > .fold-body { display: block; }
.reader-fold.think .fold-body .block-content { font-family: var(--font-display); }
.tb-row { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 6px; padding: 2px 0; white-space: normal; }
.tb-k { font: 11px var(--font-mono); color: var(--ink-3); padding-top: 2px; }
.tb-row pre { font: 11.5px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.reader.no-think .reader-fold.think, .reader.no-tools .reader-fold.tools { display: none; }
.compact, .reader-trace, .chain-issue, .annot-issue { margin: 6px 0 10px; color: var(--ink-3); font: 11.5px/1.7 var(--font-mono); overflow-wrap: anywhere; }
.compact summary, .chain-issue summary { cursor: pointer; list-style: none; }
.compact summary::-webkit-details-marker, .chain-issue summary::-webkit-details-marker { display: none; }
.compact summary::before { content: '▸'; display: inline-block; margin-right: 5px; font-size: 11px; transition: transform var(--t-mid) var(--ease); }
.compact[open] summary::before { transform: rotate(90deg); }
.compact > div { padding: 9px 12px; color: var(--ink-2); background: var(--annot); white-space: pre-wrap; }
.chain-issue .when-open, .chain-issue[open] .when-closed { display: none; }
.chain-issue[open] .when-open { display: inline; }
.chain-records pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 11.5px/1.65 var(--font-mono); color: var(--ink-2); }
.evidence-record { border-left: 1px solid var(--line); padding-left: 12px; margin-top: 8px; }
.evidence-tool { position: relative; background: var(--annot); padding: 9px 36px 9px 12px; }
.reader-note { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 32px 8px 12px; margin: -6px 0 18px; border-radius: var(--r); background: var(--annot); font-size: 12.5px; color: var(--ink-2); }
.note-quote { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font: 11.5px var(--font-mono); text-align: left; }
.note-quote:hover { color: var(--ink-2); }
.note-quote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-quote svg { font-size: 14px; }
.note-body { display: flex; align-items: baseline; gap: 5px; padding-left: 20px; cursor: text; line-height: 1.6; }
.note-body .wv { width: 22px; height: 6px; flex: none; align-self: center; opacity: .8; background: var(--wave-ink) repeat-x center / 60px 6px; }
.note-who { font: 13.5px var(--font-display); letter-spacing: 1px; color: var(--qing); flex: none; }
.note-who.ai { color: var(--ink-2); }
.note-text { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.note-delete { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; color: var(--blood); opacity: 0; }
.reader-note:hover .note-delete, .note-delete:focus-visible { opacity: .85; }
.discard-tail { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 20px; color: var(--ink-3); font-size: 12px; letter-spacing: 1px; }
.dc-line { width: 36px; border-top: var(--stroke) dashed var(--line-2); }
.discard-tail button { color: var(--ink-3); padding: 0; letter-spacing: 0; }
.discard-tail button:hover { color: var(--ink); }
.reader .discard-zone { border-left: var(--stroke) dashed var(--line-2); margin: -8px 0 20px; padding: 0 0 0 12px; opacity: .55; }
.outline-anchor { position: fixed; right: 18px; bottom: 16px; height: 44px; width: 44px; margin: 6px 0 0 auto; z-index: 4; }
.gangmu { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: var(--stroke) solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink-2); font-size: 20px; box-shadow: var(--shadow); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.gangmu:hover { color: var(--ink); transform: translateY(-1px); }
.outline-panel { position: absolute; bottom: 54px; right: 0; width: min(320px, var(--outline-width, 680px)); max-height: var(--outline-height, 60vh); display: flex; flex-direction: column; border: var(--stroke) solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.outline-title { padding: 10px 14px 6px; font: 500 14px var(--font-display); letter-spacing: 2px; color: var(--ink-2); }
.outline-items { overflow: auto; min-height: 0; padding: 0 6px 8px; }
.outline-item { position: relative; display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; column-gap: 8px; width: 100%; padding: 5px 8px; border-radius: 4px; text-align: left; }
/* 简称沿正文首行呈现；水线放在条目内距中，不另增行距。 */
.outline-item > .role-prefix { margin-top: 0; height: auto; border: 0; border-radius: 0; background: transparent; font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--qing) 80%, var(--ink)); }
.outline-item + .outline-item::before { content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: var(--stroke); background: var(--line); opacity: .6; pointer-events: none; }
.outline-item.note { grid-template-columns: 14px 16px minmax(0,1fr); padding-left: 18px; }
.outline-note-icon { color: var(--ink-3); font-size: 12px; align-self: center; }
.outline-item:hover, .outline-item:focus-visible { background: var(--qing-wash); }
.outline-preview { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.outline-empty { color: var(--ink-3); padding: 6px 8px 10px; font: 12.5px var(--font-display); letter-spacing: 1px; }
.reader-flash { animation: reader-flash 1s var(--ease); }
@keyframes reader-flash { from { background-color: var(--focus-flash); } }
::highlight(reader-noted), ::highlight(reader-pending) { background: var(--noted); }
#main.annotating .reader ::selection { background: var(--noted); }
.selection-actions, .annot-box { position: fixed; z-index: 15; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.selection-actions { display: flex; align-items: center; padding: 3px 5px; border-radius: 99px; }
.selection-actions button { display: inline-flex; padding: 5px 7px; font-size: 16px; color: var(--ink-2); }
/* 禁态光标取 16px 小号禁止符（系统 not-allowed 于浮键上过大，48-B 复看）；灰线白晕，两主题皆可见。 */
.selection-actions button:disabled { opacity: .4; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke-linecap='round'%3E%3Cg stroke='%23fff' stroke-width='3.4' opacity='.9'%3E%3Ccircle cx='8' cy='8' r='5.6'/%3E%3Cpath d='M4.1 11.9l7.8-7.8'/%3E%3C/g%3E%3Cg stroke='%23555' stroke-width='1.5'%3E%3Ccircle cx='8' cy='8' r='5.6'/%3E%3Cpath d='M4.1 11.9l7.8-7.8'/%3E%3C/g%3E%3C/svg%3E") 8 8, not-allowed; }
.annot-box { width: min(440px, calc(100vw - 16px)); padding: 8px 10px 10px; border-radius: 6px; }
.ab-quote { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; color: var(--ink-3); font: 11.5px var(--font-mono); }
.ab-quote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annot-box textarea, .annot-edit { width: 100%; min-height: 52px; resize: vertical; font: 13px/1.6 var(--font-body); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; outline: none; }
.annot-box textarea:focus, .annot-edit:focus { border-color: var(--qing); }
#toast button { color: var(--qing); font-weight: 500; pointer-events: auto; }
@media (max-width: 810px) { .reader { padding: 0 40px 40px 36px; } .reader-right .annot-mode { white-space: normal; max-width: 130px; font-size: 10px; } }

/* 丁②：状态行、反向分支与传拓路径（文字页形，UI 案§六）；滚动由契约锚点接管，关闭浏览器自动锚定。 */
.reader .read-status { font: 11.5px/1.6 var(--font-mono); color: var(--ink-2); min-height: 1.6em; margin-top: 2px; padding: 0; background: none; border: 0; box-shadow: none; }
.read-status button { color: var(--qing); padding: 0; }
.reader-family button { color: var(--ink-2); padding: 0; }
.read-status button:hover, .reader-family button:hover, .fork-family summary:hover { color: var(--ink); }
.reader-family { font: 11px/1.7 var(--font-mono); color: var(--ink-3); }
.fork-family summary { cursor: pointer; list-style: none; }
.fork-family summary::-webkit-details-marker { display: none; }
.fork-family { font-size: 12px; margin: 0 0 20px; }
.fork-family > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; margin-top: 2px; border-radius: 4px; font: 12.5px var(--font-body); text-align: left; }
.fork-family > button:hover { background: var(--hover); }
.fork-family svg { color: var(--ink-3); }
.fork-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fork-id { margin-left: auto; font: 11px var(--font-mono); color: var(--ink-3); }
#toast .export-path { display: block; overflow-wrap: anywhere; text-align: left; }
#main:has(.reader) { overflow-anchor: none; }
/* 收栏起始列宽即取终态，滑动间暂宽于主区者裁于右缘、不出横向滚动条（clip 不另立滚动容器，题头粘性不变）。 */
.reader { overflow-x: clip; }

/* 阅读水纹沿稿原 SVG。 */

/* 44-D②：卷末观澜只落形；成果接口按柳生本单裁定仍后置。 */
.guanlan { margin-top: 6px; }
.gl-toggle { font: 15px var(--font-display); letter-spacing: 2px; color: var(--lan); padding: 4px 2px; display: inline-flex; gap: 6px; align-items: center; }
.gl-body { position: relative; margin-top: 6px; padding: 14px 18px 12px; border: 0; border-radius: 8px; background: var(--lan-wash); background-image: var(--water-lan); background-size: 640px 480px; overflow: hidden; box-shadow: none; }
.gl-sec { margin-bottom: 12px; }
.gl-sec:last-child { margin-bottom: 0; }
.gl-h { font: 13.5px var(--font-display); letter-spacing: 2px; color: var(--lan); margin-bottom: 4px; }
.gl-item { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.65; padding: 3px 0; }
.gl-orig { color: var(--ink-2); }
.gl-line { width: 22px; height: 6px; flex: none; align-self: center; background: var(--wave-lan) repeat-x center / 60px 6px; opacity: .8; }
.gl-who { font: 13.5px var(--font-display); letter-spacing: 1px; flex: none; }
.gl-who.hand { color: var(--qing); }
.gl-who.ai { color: var(--ink-2); }
.gl-empty { font: 13px var(--font-display); letter-spacing: 2px; color: var(--lan); opacity: .8; }
/* 诊断就地回看、阶段总结淡墨留痕。 */
.chain-issue { font: 11px/1.6 var(--font-mono); margin: 0; padding: 2px 4px; }
.chain-records { margin: 4px 0 6px; padding: 6px 10px; border-radius: 4px; background: var(--annot); }
.evidence-record { border: 0; padding: 3px 0; margin: 0; }
.evidence-head { font-size: 10.5px; }
.chain-records pre { font-size: 11px; padding: 2px 8px; margin-top: 2px; background: var(--code); border-radius: 3px; }
.compact { margin: 2px 0 12px; font: 12px/1.6 var(--font-body); }
.compact summary { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; }
.compact > div { margin-top: 2px; border-radius: var(--r); font: 12.5px/1.65 var(--font-body); }
.msg-head[aria-expanded="false"]::before { content: "收起"; font: 400 11px/1.5 var(--font-body); color: var(--qing); opacity: .85; border: 1px solid var(--qing); padding: 0 4px; border-radius: 3px; white-space: nowrap; }

#layout.tq-open .outline-anchor { right: calc(var(--tq-w) + 28px); }
@media (max-width: 810px) { #layout.tq-open .outline-anchor { right: 18px; } }
/* 48-B：卷尾级诊断墨二阶，以别于随消息的节点级（E-08 C-07 候批）。 */
.tail-issues .chain-issue, .tail-issues .annot-issue { color: var(--ink-2); }

/* 纲目用户消息多留一行，助手与批注仍为两行。 */
.outline-item.message:has(> [data-role="user"]) .outline-preview { -webkit-line-clamp: 3; }
/* 原生媒体沿正文列宽，原图与缩略图身份分别保留。 */
.reader-media { margin: 10px 0; max-width: 100%; }
.reader-media img { display: block; max-width: 100%; max-height: 560px; object-fit: contain; }
.reader-media figcaption, .media-reference, .resource-title { color: var(--ink-3); font: 11px/1.65 var(--font-mono); overflow-wrap: anywhere; }
.media-reference { display: block; }
.reader-resource { position: relative; margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }