/* 设计稿 · 止 —— 稿一为底，落全部裁定。白夜无际，苦昼神秘。 */

:root {
  --ease: cubic-bezier(.2, .8, .2, 1);   /* 水·余波 */
  --t-fast: .18s; --t-mid: .4s; --t-slow: .9s;
  --side-w: 232px; --tq-w: 340px;
  --r: 6px; --row-gap: 4px; --head-r: 14px;
  --water-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='480' viewBox='0 0 640 480' fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='.8' stroke-linecap='round'><circle cx='120' cy='100' r='10' pathLength='100' stroke-dasharray='88 12' stroke-dashoffset='0'/><circle cx='120' cy='100' r='26' pathLength='100' stroke-dasharray='40 10 30 20' stroke-dashoffset='15'/><circle cx='120' cy='100' r='44' pathLength='100' stroke-dasharray='55 25 10 10' stroke-dashoffset='40'/><circle cx='120' cy='100' r='62' pathLength='100' stroke-dasharray='30 70' stroke-dashoffset='70'/><circle cx='430' cy='310' r='12' pathLength='100' stroke-dasharray='90 10' stroke-dashoffset='0'/><circle cx='430' cy='310' r='28' pathLength='100' stroke-dasharray='45 15 25 15' stroke-dashoffset='30'/><circle cx='430' cy='310' r='46' pathLength='100' stroke-dasharray='35 30 15 20' stroke-dashoffset='60'/><circle cx='540' cy='90' r='8' pathLength='100' stroke-dasharray='85 15' stroke-dashoffset='0'/><circle cx='540' cy='90' r='20' pathLength='100' stroke-dasharray='50 50' stroke-dashoffset='20'/><circle cx='80' cy='390' r='14' pathLength='100' stroke-dasharray='70 30' stroke-dashoffset='50'/><circle cx='80' cy='390' r='30' pathLength='100' stroke-dasharray='40 25 15 20' stroke-dashoffset='10'/><circle cx='300' cy='215' r='6' pathLength='100' stroke-dasharray='80 20' stroke-dashoffset='0'/><circle cx='300' cy='215' r='16' pathLength='100' stroke-dasharray='55 45' stroke-dashoffset='35'/><circle cx='600' cy='440' r='10' pathLength='100' stroke-dasharray='75 25' stroke-dashoffset='5'/><circle cx='600' cy='440' r='24' pathLength='100' stroke-dasharray='30 20 25 25' stroke-dashoffset='45'/></svg>");
  --water-strong: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='480' viewBox='0 0 640 480' fill='none' stroke='%23000' stroke-opacity='.16' stroke-width='.8' stroke-linecap='round'><circle cx='120' cy='100' r='10' pathLength='100' stroke-dasharray='88 12' stroke-dashoffset='0'/><circle cx='120' cy='100' r='26' pathLength='100' stroke-dasharray='40 10 30 20' stroke-dashoffset='15'/><circle cx='120' cy='100' r='44' pathLength='100' stroke-dasharray='55 25 10 10' stroke-dashoffset='40'/><circle cx='120' cy='100' r='62' pathLength='100' stroke-dasharray='30 70' stroke-dashoffset='70'/><circle cx='430' cy='310' r='12' pathLength='100' stroke-dasharray='90 10' stroke-dashoffset='0'/><circle cx='430' cy='310' r='28' pathLength='100' stroke-dasharray='45 15 25 15' stroke-dashoffset='30'/><circle cx='430' cy='310' r='46' pathLength='100' stroke-dasharray='35 30 15 20' stroke-dashoffset='60'/><circle cx='540' cy='90' r='8' pathLength='100' stroke-dasharray='85 15' stroke-dashoffset='0'/><circle cx='540' cy='90' r='20' pathLength='100' stroke-dasharray='50 50' stroke-dashoffset='20'/><circle cx='80' cy='390' r='14' pathLength='100' stroke-dasharray='70 30' stroke-dashoffset='50'/><circle cx='80' cy='390' r='30' pathLength='100' stroke-dasharray='40 25 15 20' stroke-dashoffset='10'/><circle cx='300' cy='215' r='6' pathLength='100' stroke-dasharray='80 20' stroke-dashoffset='0'/><circle cx='300' cy='215' r='16' pathLength='100' stroke-dasharray='55 45' stroke-dashoffset='35'/><circle cx='600' cy='440' r='10' pathLength='100' stroke-dasharray='75 25' stroke-dashoffset='5'/><circle cx='600' cy='440' r='24' pathLength='100' stroke-dasharray='30 20 25 25' stroke-dashoffset='45'/></svg>");
}

/* ---------- 白夜 · 无际 ---------- */
[data-theme="day"] {
  color-scheme: light;
  --paper: #eef2f4; --panel: #f9fbfc; --top: #eef2f4;
  --ink: #1e2a30; --ink-2: #5b6b72; --ink-3: #93a2a8;
  --line: #d6dee2; --line-2: #c3cdd2; --hover: rgba(30, 42, 48, .05);
  --xline: rgba(30, 42, 48, .26);
  --qing: #4a7d88; --qing-wash: rgba(74, 125, 136, .10);
  --mist: rgba(74, 125, 136, .075); --code: rgba(30, 42, 48, .05); --noted: rgba(74, 125, 136, .16);
  --user-bg: rgba(255, 255, 255, .62); --user-line: rgba(30, 42, 48, .09);
  --side: #e9eef0; --side-ink: #1e2a30; --side-line: #d6dee2; --side-hover: rgba(30,42,48,.05); --side-active: rgba(74,125,136,.13); --plat: rgba(30,42,48,.06);
  --row: #f9fbfc; --row-line: #e1e8eb; --row-hover: #ffffff;
  --closed: #4a7d88; --open: #b8925a;
  --zhu: #a8453b; --blood: #9b2d26; --blood-wash: rgba(155, 45, 38, .08);
  --lan: #567ea2; --lan-wash: rgba(86, 126, 162, .05); --lan-line: rgba(86, 126, 162, .16);
  --annot: rgba(30, 42, 48, .05); --tag: rgba(30, 42, 48, .06);
  --shadow: 0 1px 3px rgba(20, 30, 32, .06), 0 6px 20px rgba(20, 30, 32, .06);
}
/* ---------- 苦昼 · 神秘 ---------- */
[data-theme="night"] {
  color-scheme: dark;
  --water-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='480' viewBox='0 0 640 480' fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='.8' stroke-linecap='round'><circle cx='120' cy='100' r='10' pathLength='100' stroke-dasharray='88 12' stroke-dashoffset='0'/><circle cx='120' cy='100' r='26' pathLength='100' stroke-dasharray='40 10 30 20' stroke-dashoffset='15'/><circle cx='120' cy='100' r='44' pathLength='100' stroke-dasharray='55 25 10 10' stroke-dashoffset='40'/><circle cx='120' cy='100' r='62' pathLength='100' stroke-dasharray='30 70' stroke-dashoffset='70'/><circle cx='430' cy='310' r='12' pathLength='100' stroke-dasharray='90 10' stroke-dashoffset='0'/><circle cx='430' cy='310' r='28' pathLength='100' stroke-dasharray='45 15 25 15' stroke-dashoffset='30'/><circle cx='430' cy='310' r='46' pathLength='100' stroke-dasharray='35 30 15 20' stroke-dashoffset='60'/><circle cx='540' cy='90' r='8' pathLength='100' stroke-dasharray='85 15' stroke-dashoffset='0'/><circle cx='540' cy='90' r='20' pathLength='100' stroke-dasharray='50 50' stroke-dashoffset='20'/><circle cx='80' cy='390' r='14' pathLength='100' stroke-dasharray='70 30' stroke-dashoffset='50'/><circle cx='80' cy='390' r='30' pathLength='100' stroke-dasharray='40 25 15 20' stroke-dashoffset='10'/><circle cx='300' cy='215' r='6' pathLength='100' stroke-dasharray='80 20' stroke-dashoffset='0'/><circle cx='300' cy='215' r='16' pathLength='100' stroke-dasharray='55 45' stroke-dashoffset='35'/><circle cx='600' cy='440' r='10' pathLength='100' stroke-dasharray='75 25' stroke-dashoffset='5'/><circle cx='600' cy='440' r='24' pathLength='100' stroke-dasharray='30 20 25 25' stroke-dashoffset='45'/></svg>");
  --water-strong: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='480' viewBox='0 0 640 480' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='.8' stroke-linecap='round'><circle cx='120' cy='100' r='10' pathLength='100' stroke-dasharray='88 12' stroke-dashoffset='0'/><circle cx='120' cy='100' r='26' pathLength='100' stroke-dasharray='40 10 30 20' stroke-dashoffset='15'/><circle cx='120' cy='100' r='44' pathLength='100' stroke-dasharray='55 25 10 10' stroke-dashoffset='40'/><circle cx='120' cy='100' r='62' pathLength='100' stroke-dasharray='30 70' stroke-dashoffset='70'/><circle cx='430' cy='310' r='12' pathLength='100' stroke-dasharray='90 10' stroke-dashoffset='0'/><circle cx='430' cy='310' r='28' pathLength='100' stroke-dasharray='45 15 25 15' stroke-dashoffset='30'/><circle cx='430' cy='310' r='46' pathLength='100' stroke-dasharray='35 30 15 20' stroke-dashoffset='60'/><circle cx='540' cy='90' r='8' pathLength='100' stroke-dasharray='85 15' stroke-dashoffset='0'/><circle cx='540' cy='90' r='20' pathLength='100' stroke-dasharray='50 50' stroke-dashoffset='20'/><circle cx='80' cy='390' r='14' pathLength='100' stroke-dasharray='70 30' stroke-dashoffset='50'/><circle cx='80' cy='390' r='30' pathLength='100' stroke-dasharray='40 25 15 20' stroke-dashoffset='10'/><circle cx='300' cy='215' r='6' pathLength='100' stroke-dasharray='80 20' stroke-dashoffset='0'/><circle cx='300' cy='215' r='16' pathLength='100' stroke-dasharray='55 45' stroke-dashoffset='35'/><circle cx='600' cy='440' r='10' pathLength='100' stroke-dasharray='75 25' stroke-dashoffset='5'/><circle cx='600' cy='440' r='24' pathLength='100' stroke-dasharray='30 20 25 25' stroke-dashoffset='45'/></svg>");
  --paper: #1a1918; --panel: #222020; --top: #1a1918;
  --ink: #c4bab0; --ink-2: #8a8177; --ink-3: #5c564f;
  --line: #2e2b29; --line-2: #3a3633; --hover: rgba(196, 186, 176, .06);
  --xline: rgba(216, 208, 196, .3);
  --qing: #7c9f9b; --qing-wash: rgba(124, 159, 155, .12);
  --mist: rgba(124, 159, 155, .07); --code: rgba(0, 0, 0, .28); --noted: rgba(124, 159, 155, .2);
  --user-bg: rgba(40, 37, 36, .62); --user-line: rgba(196, 186, 176, .08);
  --side: #161514; --side-ink: #b3a99e; --side-line: #292624; --side-hover: rgba(196,186,176,.05); --side-active: rgba(124,159,155,.13); --plat: rgba(196,186,176,.06);
  --row: #222020; --row-line: #2b2826; --row-hover: #282524;
  --closed: #7c9f9b; --open: #ad8d5c;
  --zhu: #b8604f; --blood: #bd5a53; --blood-wash: rgba(189, 90, 83, .12);
  --lan: #7b97b3; --lan-wash: rgba(123, 151, 179, .055); --lan-line: rgba(123, 151, 179, .18);
  --annot: rgba(196, 186, 176, .05); --tag: rgba(196, 186, 176, .07);
  --shadow: 0 1px 3px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.32);
}
[data-theme="night"] #app { background: radial-gradient(ellipse 70% 45% at 85% -8%, rgba(214, 204, 190, .045), transparent), var(--paper); }
/* ---------- 滚动条：无槽，只留淡淡一条，靠在栏线 ---------- */
[data-theme="day"] { --scroll: rgba(30, 42, 48, .16); }
[data-theme="night"] { --scroll: rgba(196, 186, 176, .14); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
.fake-term { font-family: var(--f-mono); }

/* ---------- 顶栏：无际，不落线 ---------- */
.topbar { border-bottom: 0; }
.brand .ico-flow { width: 26px; height: 26px; }
.brand:hover .ico-flow path { animation: none; }
.brand .ico-flow { transition: color var(--t-slow) var(--ease); }
.brand.lit .ico-flow { color: var(--qing); transition-duration: var(--t-fast); }
.brand:active .ico-flow path { stroke: currentColor; animation: none; }
.ruliu { font: inherit; padding: 0; width: 32px; letter-spacing: 0; }
.ruliu svg { font-size: 24px; }
.search-input { width: 220px; height: 30px; margin-right: 2px; padding: 0 10px; border: 0; border-bottom: var(--stroke) solid var(--line-2); background: transparent; color: var(--ink); font: 13px var(--f-body); outline: 0; transition: border-color var(--t-fast) var(--ease); }
.search-input:focus { border-bottom-color: var(--qing); }
.search-input[hidden] { display: none; }
.kelou { cursor: default; }

/* ---------- 三栏 ---------- */
.layout { position: relative; grid-template-columns: var(--side-w) 10px minmax(0, 1fr) 0 0; transition: grid-template-columns var(--t-slow) var(--ease); }
.layout.tq-open { grid-template-columns: var(--side-w) 10px minmax(0, 1fr) 10px var(--tq-w); }
.layout.side-collapsed { grid-template-columns: 0 10px minmax(0, 1fr) 0 0; }
.layout.side-collapsed.tq-open { grid-template-columns: 0 10px minmax(0, 1fr) 10px var(--tq-w); }
.layout.dragging { transition: none; }
.divider { background: transparent; cursor: col-resize; }
.divider::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin: 0 0 0 -.5px; border-radius: 0; height: auto; background: var(--xline); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
@media (min-resolution: 1.25dppx) { .divider::after { width: .67px; } }
.divider:hover::after, .dragging .divider::after { opacity: 1; }
.divider.right { visibility: hidden; }
.tq-open .divider.right { visibility: visible; }
.divider::before { content: ""; position: absolute; top: 50%; width: 4px; height: 28px; margin-top: -14px; border-radius: 2px; background: var(--ink-3); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.divider.left::before { left: 3px; }
.side-collapsed .divider.left::before { opacity: .55; }
.side-collapsed .divider.left:hover::before { opacity: 1; }
.sidebar { border-right: 0; }

/* 侧栏窄列：无印者一枚淡墨叉，有印者一枚锁 */
.platform { padding: 0 6px 0 4px; gap: 0; }
.platform .caret { width: 22px; height: 30px; opacity: .7; }
.platform .caret:hover { opacity: 1; }
.plat-open { flex: 1; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 2px; border-radius: var(--r); text-align: left; color: inherit; font-weight: 600; }
.plat-open:hover { background: var(--side-hover); }
.proj-list[hidden] { display: none; }
.narrow-list { display: flex; flex-direction: column; padding: 2px 0 6px 18px; }
.nrow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 3px 4px 3px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; color: inherit; opacity: .9; transition: background var(--t-fast) var(--ease); }
.nrow:hover { background: var(--side-hover); opacity: 1; }
.nrow.current { background: var(--side-active); opacity: 1; }
.ntitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xdel, .lock { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 13px; transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.xdel { color: var(--ink-3); opacity: .6; }
.xdel:hover { color: var(--blood); opacity: 1; }
.lock { color: var(--zhu); opacity: .8; }
.lock:hover { opacity: 1; }
.rb { width: 22px; height: 22px; font-size: 14px; margin-left: 2px; }

/* ---------- 主区三视图 ---------- */
.main { min-width: 0; min-height: 0; position: relative; display: grid; grid-template-columns: 1fr; }
.main > section { grid-area: 1 / 1; min-height: 0; overflow: hidden; display: none; flex-direction: column; position: relative; }
.main.listing .list, .main.reading .reader, .main.jianyue .jypage { display: flex; }
.main > section > .scroll { flex: 1; min-height: 0; overflow: auto; }

/* 头部一行：三处同高 48，推敲键右缘距栏边 12，开关同位 */
.list { padding: 0; }
.list-head { flex: none; height: 48px; padding: 0 var(--head-r) 0 18px; align-items: center; position: static; background: transparent; }
.list .scroll { padding: 0 14px 24px; }
.list-head .icon-btn { margin-left: 0; }
.head-tools { margin-left: auto; margin-right: 0; display: flex; gap: 2px; align-self: center; }
.head-tools .icon-btn, .reader-bar .icon-btn, .tq-head .icon-btn { width: 32px; height: 32px; font-size: 19px; }
.tq-btn { width: 48px !important; }
/* 展开后由右栏按钮接替，主区按钮隐藏但保留占位。 */
.tq-open .main .tq-btn { visibility: hidden; }
.tq-icon { display: inline-flex; align-items: flex-end; }
.tq-icon .pg { display: inline-flex; margin-right: -3px; margin-bottom: 0; font-size: .92em; color: var(--ink-2); }
.tq-icon .pg svg, .tq-icon > svg { width: 1em; height: 1em; }
.tq-btn:hover .pg { color: var(--ink); }

/* 阅读：居中，题文共轴；返回漏出于左，推敲贴主区右缘 */
.reader { padding: 0; }
.reader .scroll { padding: 0 64px 40px; background-image: var(--water-img); background-attachment: local; background-size: 640px 480px; background-position: 40px 30px; animation: water 90s linear infinite alternate; }
@keyframes water { to { background-position: 64px 46px; } }
.reader-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 48px; margin: 0; padding: 0 var(--head-r) 0 16px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.reader-bar > * { pointer-events: auto; }
.reader-bar .back { width: 28px; height: 32px; font-size: 17px; margin: 0; }
.reader-inner { --col: 680px; width: min(var(--col), 100%); margin: 0 auto; position: relative; }
.reader-top { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 12px 0 10px; border-bottom: 0; background: transparent; position: sticky; top: 0; z-index: 1; }
.reader-top::before { content: ""; position: absolute; inset: 0 0 auto; height: 100%; z-index: -1; background: linear-gradient(var(--paper) 72%, transparent); }
.reader-title, .reader-meta, .reader-actions { grid-column: 1; margin: 0; }
.msgs { padding: 14px 0 0; max-width: none; }
.msg-text { position: relative; padding: 13px 40px 13px 14px; }
.msg.user .msg-text { background: var(--user-bg); border: var(--stroke) solid var(--user-line); box-shadow: none; }
.msg.assistant .msg-text { background: var(--mist); border-color: transparent; }
.reader-top .copy { opacity: .7; }

/* 誊抄：只附于完整信息块右上，无框，随块色 */
.msg:hover .tengchao { opacity: 0; }
.tengchao { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; margin: 0; color: var(--ink-3); background: none; border: 0; opacity: 0; font-size: 16px; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.msg-text:hover > .tengchao, .fold-body:hover > .tengchao { opacity: .75; }
.tengchao:hover { opacity: 1 !important; color: var(--qing); }
.tengchao.mini { width: 22px; height: 22px; font-size: 14px; top: 4px; right: 4px; }

/* 折叠块：凝思、器用。折叠为一行，展开成完整块 */
.think, .tools { padding: 0; white-space: normal; overflow: visible; cursor: default; font-size: 12px; color: var(--ink-3); }
.fold-toggle { display: block; width: 100%; text-align: left; padding: 2px 4px 4px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-toggle:hover { color: var(--ink-2); }
.tcaret { display: inline-block; font-size: 11px; 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(--f-display); opacity: .85; }
.tools .fold-preview { font-family: var(--f-mono); font-size: 11.5px; }
.fold-body { display: none; position: relative; margin: 0 0 8px; padding: 9px 36px 9px 12px; border-radius: var(--r); font-size: 12.5px; line-height: 1.65; color: var(--ink-2); background: var(--annot); }
.open > .fold-body { display: block; }
.fold-body p { margin: 0; font-family: var(--f-display); }
.tb-row { display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 2px 0; }
.tb-k { font: 11px var(--f-mono); color: var(--ink-3); padding-top: 2px; }
.tb-row code { font: 11.5px var(--f-mono); }
.main.no-think .think, .main.no-tools .tools { display: none; }

.discard.peek .dc-open { color: var(--ink); }
.gangmu { position: sticky; bottom: 18px; right: auto; display: flex; margin: 6px 0 0 auto; width: 44px; height: 44px; font-size: 20px; }

/* 观澜 */
.gl-body { animation-duration: var(--t-slow); border-color: transparent; background: var(--lan-wash); box-shadow: none !important; }
.water { opacity: 1; color: inherit; }
.water::before, .water::after { background-image: var(--water-strong); background-size: 640px 480px; }
.water::after { display: none; }

/* ---------- 检阅页 ---------- */
.jypage { padding: 0; }
.page-head { flex: none; height: 48px; padding: 0 var(--head-r) 0 18px; display: flex; align-items: center; }
.page-head .view-title { margin: 0; }
.page-head .tq-btn { margin-left: auto; margin-right: 0; }
.jypage .scroll { padding: 0 14px 40px; }
.jy-inner { --col: 640px; width: min(var(--col), 100%); margin: 0 auto; padding-top: 8px; }
.jy-sec { margin-top: 26px; }
.jy-h { font: 500 15px/1.4 var(--f-display); letter-spacing: 2px; color: var(--ink-2); margin-bottom: 8px; }
.jy-status { font: 12.5px/1.6 var(--f-mono); color: var(--ink-2); margin-bottom: 10px; }
.jy-note { font-size: 12px; color: var(--ink-3); margin: 10px 0 0; }
.jy-row { display: grid; grid-template-columns: 80px auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; }
.jy-label { font-family: var(--f-display); letter-spacing: 1px; font-size: 14px; }
.jy-hint { font-size: 11.5px; color: var(--ink-3); }
.seg { display: inline-flex; border: var(--stroke) solid var(--line); border-radius: var(--r); overflow: hidden; }
.seg button { padding: 3px 12px; font-size: 12.5px; color: var(--ink-2); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.seg button + button { border-left: var(--stroke) solid var(--line); }
.seg button.on { background: var(--qing-wash); color: var(--qing); }
.btn { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: var(--r); border: var(--stroke) solid var(--line); color: var(--ink); background: var(--panel); }
.btn.primary { border-color: var(--qing); color: var(--qing); }
.btn.primary:hover { background: var(--qing-wash); }

/* ---------- 推敲右栏：内层定宽，弹出时内容不重排 ---------- */
.tuiqiao { grid-column: 5; min-width: 0; position: relative; overflow: hidden; background: var(--side); color: var(--side-ink); }
.tq-inner { position: absolute; top: 0; right: 0; bottom: 0; width: var(--tq-w); display: flex; flex-direction: column; }
.tq-head { height: 48px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 var(--head-r) 0 10px; }
.tq-tab { font-family: var(--f-display); font-size: 15px; letter-spacing: 2px; color: var(--ink-3); padding: 0 6px; height: 48px; border-bottom: 2px solid transparent; transition: color var(--t-fast) var(--ease); }
.tq-tab.on { color: var(--side-ink); border-bottom-color: var(--qing); }
.tq-sub { font: 11px var(--f-mono); color: var(--ink-3); margin-left: 2px; }
.tq-close { margin-left: auto; }
.tq-stream { flex: 1; min-height: 0; overflow: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.tq-stream[hidden] { display: none; }
.draft { padding: 8px 10px; border-radius: var(--r); background: var(--user-bg); border: var(--stroke) solid var(--user-line); font-size: 12.5px; line-height: 1.55; cursor: pointer; transition: border-color var(--t-fast) var(--ease); }
.draft:hover { border-color: var(--line-2); }
.draft.picked { border-color: var(--qing); }
.draft-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font: 10.5px var(--f-mono); color: var(--ink-3); }
.draft-src { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-sub { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx { margin-left: auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 13px; }
.dx:hover { color: var(--blood); }
.dx[hidden], .tq-editing[hidden], .dc-fuzhi[hidden] { display: none; }
.tq-input { flex: 0 0 50%; display: flex; flex-direction: column; padding: 8px 10px 8px; border-top: var(--stroke) solid var(--side-line); }
.tq-editing { font: 11px var(--f-mono); color: var(--qing); margin-bottom: 4px; }
.tq-input textarea { flex: 1; width: 100%; resize: none; font: 13px/1.6 var(--f-body); color: var(--ink); background: var(--panel); border: var(--stroke) solid var(--line); border-radius: var(--r); padding: 7px 9px; outline: 0; transition: border-color var(--t-fast) var(--ease); }
.tq-input textarea:focus { border-color: var(--qing); }
.tq-hint { display: flex; justify-content: space-between; margin-top: 4px; font: 10.5px var(--f-mono); color: var(--ink-3); }
.scrim { display: none; }

/* ---------- 窄幅：并着终端 ---------- */
@container app (max-width: 700px) {
  .layout, .layout.tq-open, .layout.side-collapsed, .layout.side-collapsed.tq-open { grid-template-columns: minmax(0, 1fr) 0 0 0 0; }
  .sidebar, .divider { display: none; }
  .main { grid-column: 1; }
  .tuiqiao { grid-column: 1 / -1; position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 92%); --tq-w: 100%; z-index: 5; transform: translateX(100%); box-shadow: var(--shadow); transition: transform var(--t-slow) var(--ease); }
  .tq-open .tuiqiao { transform: none; }
  .scrim { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, .18); opacity: 0; pointer-events: none; transition: opacity var(--t-mid) var(--ease); }
  .tq-open .scrim { display: block; opacity: 1; pointer-events: auto; }
  .reader .scroll { padding: 0 40px 40px 36px; }
  .reader-bar { padding-left: 8px; }
}

/* ---------- 主题 A：钤印入口、划线批注、批注模式 ---------- */
/* 行末：朱砂锁常显示钤印态；淡墨锁（钤印入口）与叉只在悬停该行时现 */
.tail { display: inline-flex; align-items: center; gap: 2px; }
.tail .xdel, .tail .lock-in { opacity: 0; }
.row:hover .tail .xdel, .nrow:hover .tail .xdel, .hover-all .tail .xdel { opacity: .6; }
.row:hover .tail .lock-in, .nrow:hover .tail .lock-in, .hover-all .tail .lock-in { opacity: .55; }
.tail .xdel:hover { opacity: 1; }
.lock.lock-in { color: var(--ink-3); }
.lock-in:hover { opacity: 1 !important; color: var(--ink); }
/* 所指片段：薄染常显；回所指瞬亮 1s 淡褪 */
mark.noted { background: var(--noted); color: inherit; padding: 0 1px; border-radius: 2px; transition: background 1s var(--ease); }
mark.noted.flash { background: color-mix(in srgb, var(--zhu) 26%, transparent); transition: none; }
.sel-fake { background: Highlight; color: HighlightText; }
/* 批注模式：阅读头微字标示，选区转青瓷薄染 */
body.annot-mode .reader ::selection { background: var(--noted); }
.rb-right { display: inline-flex; align-items: center; gap: 10px; }
.annot-mode-tag { font: 11px var(--f-mono); color: var(--qing); letter-spacing: .3px; }
.annot-mode-tag[hidden] { display: none; }
/* 选区浮键：瓷底胶囊，两键「批注｜复制」；浮者有影 */
.sel-pop { position: absolute; z-index: 3; height: 30px; margin-top: -8px; transform: translate(-50%, -100%); padding: 0 3px; border-radius: 15px; display: inline-flex; align-items: center; gap: 1px; background: var(--panel); border: var(--stroke) solid var(--line); box-shadow: var(--shadow); }
.sel-pop[hidden] { display: none; }
.sp-btn { width: 26px; height: 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); font-size: 15px; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.sp-btn:hover { color: var(--qing); background: var(--hover); }
/* 批注框：浮层贴选区下，只引文行与输入框，无键无说明；Enter 写入，点框外即消失 */
.annot-box { position: absolute; z-index: 3; width: min(440px, 100%); margin-top: 8px; transform: translateX(-50%); padding: 8px 10px 10px; border-radius: var(--r); background: var(--panel); border: var(--stroke) solid var(--line); box-shadow: var(--shadow); }
.annot-box[hidden] { display: none; }
.ab-quote { display: flex; align-items: center; gap: 6px; font: 11.5px var(--f-mono); color: var(--ink-3); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-quote svg { flex: none; }
.annot-box textarea, .annot-edit { display: block; width: 100%; min-height: 52px; resize: none; font: 13px/1.6 var(--f-body); color: var(--ink); background: var(--panel); border: var(--stroke) solid var(--line); border-radius: var(--r); padding: 6px 9px; outline: 0; transition: border-color var(--t-fast) var(--ease); }
.annot-box textarea:focus, .annot-edit:focus { border-color: var(--qing); }
/* 批注块：引文行点回所指；正文点击即编辑；悬停右上现血红叉 */
.annot { position: relative; flex-direction: column; align-items: stretch; gap: 4px; }
.annot-quote { display: flex; align-items: center; gap: 6px; padding-right: 24px; font: 11.5px var(--f-mono); color: var(--ink-3); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.annot-quote:hover { color: var(--ink-2); }
.annot-quote svg { flex: none; }
.annot-body { padding-left: 22px; cursor: text; }
.annot-who.ai { color: var(--ink-2); }
.annot.editing .annot-body { display: none; }
.annot-edit { margin: 2px 0 0 22px; width: calc(100% - 22px); }
.annot-x { 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); font-size: 13px; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.annot:hover .annot-x, .hover-all .annot-x { opacity: .85; }
.annot-x:hover { opacity: 1; }
/* toast：浮于主区底部中央，3s 淡逝；「撤销」为青瓷文字 */
.toast { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 8; padding: 6px 14px; border-radius: 16px; background: var(--panel); border: var(--stroke) solid var(--line); box-shadow: var(--shadow); font-size: 12.5px; color: var(--ink); animation: rise var(--t-mid) var(--ease); }
.toast[hidden] { display: none; }
.toast-undo { font-weight: 500; color: var(--qing); cursor: pointer; }