/* 10-13 第三轮：统一详情层（卡片点开后的页面）。只用 tokens.css 的令牌 */
/* 结构（desk.js 的 pageHtml 与 pages.js 的 dlHead／dlSplit／dlOne／dlFoot）：
   #page（遮罩，盖住桌面、留出顶栏）> .page-scroll > .dl-scrim（点了关闭）＋ .dl-sheet（层本身）
   .dl-sheet > .dl-h（头部摘要）＋ .dl-body（.dl-split 左右分栏，两栏各自滚动；.dl-one 单栏居中）＋ .dl-f（底部固定操作区）。
   详情层自己的令牌默认取弹层、遮罩一族，皮肤可以在 skin.css 里单独覆盖。 */
:root {
  --detail-scrim: var(--scrim);            /* 层外一圈，背后桌面淡出一点 */
  --detail-scrim-filter: none;             /* 遮罩上不加模糊，层自己的模糊才能透到桌面（玻璃类皮肤） */
  --detail-bg: var(--sheet-bg);
  --detail-filter: blur(30px) saturate(1.1);
  --detail-shadow: var(--sheet-shadow);
  --detail-radius: var(--sheet-radius);
  --detail-max: 1280px;
  --detail-pane: var(--pocket);            /* 右栏（原件、明细）与选中项的底 */
  --detail-foot-bg: color-mix(in srgb, var(--detail-bg) 72%, var(--pocket));
  --detail-line: var(--line);
  --detail-narrow: 880px;                  /* 列表型单栏最宽 */
  --detail-title-size: 22px;
  --detail-pad: 20px 24px 28px;
}

/* ---------- 外框 ---------- */
#page.page { background: var(--detail-scrim); -webkit-backdrop-filter: var(--detail-scrim-filter); backdrop-filter: var(--detail-scrim-filter); will-change: auto; }
#page > .page-scroll { overflow: clip; }
.dl-scrim { position: absolute; inset: 0; }
.page-in.dl-sheet {
  position: absolute; top: 14px; bottom: 18px; left: 0; right: 0; width: min(var(--detail-max), calc(100% - 48px)); max-width: none; margin: 0 auto; padding: 0;
  display: flex; flex-direction: column; overflow: clip; min-height: 0;
  background: var(--detail-bg); -webkit-backdrop-filter: var(--detail-filter); backdrop-filter: var(--detail-filter);
  border-radius: var(--detail-radius); box-shadow: var(--detail-shadow);
}

/* ---------- 头部摘要：返回、图标＋标题、与卡片同色的状态点和同一句状态、会议号等、切换列表、关闭 ---------- */
.dl-h { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 14px 14px 12px 12px; border-bottom: 1px solid var(--detail-line); min-width: 0; }
.dl-back, .dl-x { flex: none; margin-top: 2px; }
.dl-h-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.dl-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dl-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-ctl); background: var(--detail-pane); color: var(--card-icon-color); box-shadow: var(--shadow-inset); }
.dl-title h2 { margin: 0; min-width: 0; font-family: var(--font-display); font-size: var(--detail-title-size); font-weight: var(--fw-heading); line-height: 1.25; letter-spacing: .005em; overflow-wrap: anywhere; }
.dl-h .dl-st, .dl-h .dl-meta, .dl-h .dl-pick, .dl-h .dl-pick-seg { margin-left: 42px; }
.dl-st { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--ink-2); }
.dl-st-t { min-width: 0; }
.dl-st b { font-weight: 650; color: var(--st-ink, var(--ink)); }
.dl-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--st-dot, var(--quiet-dot)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-dot, var(--quiet-dot)) 20%, transparent); }
.dl-h[data-state="wait"] { --st-dot: var(--wait-dot); --st-ink: var(--wait-ink); }
.dl-h[data-state="late"] { --st-dot: var(--late-dot); --st-ink: var(--late-ink); }
.dl-h[data-state="today"] { --st-dot: var(--today-dot); --st-ink: var(--today-ink); }
.dl-h[data-state="done"] { --st-dot: var(--done-dot); --st-ink: var(--done-ink); }
.dl-h[data-state="quiet"] { --st-dot: var(--quiet-dot); --st-ink: var(--ink); }
.dl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); color: var(--ink-3); min-width: 0; }
.dl-h-r { flex: none; display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.dl-pick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; min-width: 0; }
.dl-pick::-webkit-scrollbar { display: none; }
.dl-pick-seg { align-self: flex-start; }
.dl-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); font-size: var(--fs-label); white-space: nowrap; transition: background var(--dur-fast); }
.dl-chip:hover { background: var(--accent-soft); }
.dl-chip .n { color: var(--ink-3); }
.dl-chip.on { background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 600; }
.dl-chip.on .n { color: inherit; opacity: .72; }
.dl-chip[disabled] { cursor: default; }

/* ---------- 主体：左右分栏各自滚动；列表型单栏居中 ---------- */
.dl-body { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.dl-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.dl-split.list { grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); }
.dl-col { min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: var(--detail-pad); display: flex; flex-direction: column; gap: 24px; }
.dl-split > .dl-r { background: var(--detail-pane); border-left: 1px solid var(--detail-line); }
.dl-split.list > .dl-l { padding: 12px 10px 24px; gap: 14px; }
.dl-one > .dl-col { padding-top: 18px; }
.dl-narrow { width: 100%; max-width: var(--detail-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.dl-one.legacy .dl-narrow, .dl-one.wide .dl-narrow { max-width: var(--page-max); }

/* 分节：一节一个小标题，不再卡中套卡；旧页面里的 .panel 在层里一律拍平成分节 */
.dl-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dl-sec-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-sec-h h3, .dl-sheet .panel-h h3 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: .02em; color: var(--ink-2); }
.dl-sec .n, .dl-sec-h .n { font-weight: 400; color: var(--ink-3); }
.dl-sec.dl-late > .dl-sec-h h3 { color: var(--late-ink); }
.dl-sheet .panel { background: transparent; box-shadow: none; border-radius: 0; }
.dl-sheet .panel-h { padding: 0; }
.dl-sheet .panel-b { padding: 8px 0 0; }
.dl-sheet .stack { gap: 24px; }
.dl-sheet .panel.recall-card { padding: 14px 16px; border-radius: var(--radius-card); background: var(--detail-pane); box-shadow: var(--shadow-inset); }
.dl-sheet .doc { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.dl-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-card); background: var(--detail-pane); box-shadow: var(--shadow-inset); color: var(--ink-2); font-size: var(--fs-label); line-height: 1.6; }
.dl-note > .i { flex: none; margin-top: 2px; color: var(--ink-3); }
.dl-note b { color: var(--ink); }
.dl-note p { margin: 4px 0 0; }
.dl-note.sm { padding: 10px 12px; font-size: var(--fs-small); background: transparent; }
.dl-ol, .dl-ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body); line-height: 1.6; }
.dl-people { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dl-person { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); }

/* 列表＋选中项详情的左栏 */
.dl-list, .dl-group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-group-h { display: flex; align-items: center; gap: 6px; padding: 4px 10px 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); }
.dl-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-ctl); text-align: left; min-width: 0; transition: background var(--dur-fast); }
.dl-item > .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dl-item .t { font-size: var(--fs-label); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-item .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-item > svg.i { color: var(--ink-3); }
.dl-item .badge { flex: none; }
.dl-item:hover { background: var(--accent-soft); }
.dl-item.on { background: var(--detail-pane); box-shadow: var(--shadow-inset); }
.dl-item.on .t { font-weight: 650; }
.dl-doc-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.dl-doc-h > .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-doc-h h3 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-strong); overflow-wrap: anywhere; }
.dl-doc > .dl-doc-h { margin-bottom: 12px; flex-direction: column; align-items: flex-start; gap: 2px; }
.dl-lead { font-size: var(--fs-body); line-height: 1.7; color: var(--ink); }
.dl-sheet .doc p.s.peeking { background: var(--accent-soft); }
.dl-sheet .srcpop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dl-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-ctl); box-shadow: var(--shadow-inset); text-align: left; min-width: 0; }
.dl-link > .grow { display: flex; flex-direction: column; gap: 1px; }
.dl-link:hover { background: var(--accent-soft); }

/* 待办、差异等行 */
.dl-due.bad { color: var(--late-ink); font-weight: 600; }
.dl-hist span { color: var(--ink-3); }
.dl-todo-x { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.dl-todo-x .dupe-q { flex-basis: 100%; }
.dl-sec.dl-done .li .t { color: var(--ink-3); }
.dl-diff { align-items: center; }
.dl-diff > .badge { flex: none; min-width: 46px; justify-content: center; }
.dl-diff .diff-todo { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.dl-sheet .rv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl-sheet .rv-stats .stat { background: var(--detail-pane); box-shadow: var(--shadow-inset); }
.dl-sheet .rv-done { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rv-busy { align-self: center; margin-top: 24px; }

/* ---------- 底部固定操作区：当前状态的 1 个主操作（可加 1 个次操作），或生成后的结果摘要 ---------- */
.dl-f { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 22px; border-top: 1px solid var(--detail-line); background: var(--detail-foot-bg); min-width: 0; }
.dl-f-msg { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); color: var(--ink-2); }
.dl-f-acts { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-f:has(.capture) > .sp { display: none; }
.dl-f-acts:has(> .capture) { flex: 1; max-width: var(--detail-narrow); margin: 0 auto; }
.dl-f-acts > .capture { flex: 1; min-width: 0; }
.dl-f-res { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-weight: 500; }
.dl-f-res > .i { flex: none; color: var(--done-dot); }
.dl-f-res.wait > .i { color: var(--wait-dot); }
.dl-sec > .btn, .dl-sec > .row > .btn:only-child { align-self: flex-start; }

/* ---------- 会议：决议、我的待办、别人的待办（折叠）、逐字稿 ---------- */
.dl-sheet .wm-decs { gap: 6px; }
.dl-sheet .wm-dec { background: var(--detail-pane); box-shadow: var(--shadow-inset); padding: 10px 12px; }
.dl-sheet .wm-dec.static { cursor: default; }
.dl-sheet .wm-dec.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.wm-mine { align-items: center; }
.wm-mine-st { flex: none; display: flex; align-items: center; gap: 6px; }
.wm-ts-btn { padding: 0 4px; border-radius: var(--radius-xs); color: var(--ink-3); font-size: var(--fs-meta); text-decoration: underline dotted; text-underline-offset: 3px; }
.wm-ts-btn:hover { color: var(--ink); background: var(--accent-soft); }
.dl-fold { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 0; text-align: left; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--ink-2); }
.dl-fold > svg { color: var(--ink-3); transition: transform var(--dur-fast) var(--ease); }
.dl-fold[aria-expanded="true"] > svg { transform: rotate(90deg); }
.dl-fold .n { font-weight: 400; color: var(--ink-3); }
.wm-doc { align-items: center; padding: 0; }
.dl-r:has(> .wm-trc) { padding-top: 0; }
.wm-trc { display: flex; flex-direction: column; min-width: 0; }
.wm-tr-h { position: sticky; top: 0; z-index: 1; margin: 0 -24px; padding: 16px 24px 10px; display: flex; flex-direction: column; gap: 10px; background: var(--detail-pane); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--detail-line); }
.dl-sheet .wm-tr { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; }
.dl-sheet .wm-seg.wm-line { position: relative; flex-direction: row; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 16px; border-radius: var(--radius-sm); background: transparent; box-shadow: none; }
.wm-line::before { content: ""; position: absolute; left: 2px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--spk); }
.wm-line[data-spk="0"] { --spk: color-mix(in srgb, var(--ink) 50%, transparent); }
.wm-line[data-spk="1"] { --spk: color-mix(in srgb, var(--ink) 32%, transparent); }
.wm-line[data-spk="2"] { --spk: color-mix(in srgb, var(--ink) 20%, transparent); }
.wm-line[data-spk="3"] { --spk: color-mix(in srgb, var(--ink) 12%, transparent); }
.wm-line.me { --spk: var(--accent); }
.wm-av { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--detail-bg); box-shadow: var(--shadow-inset); color: var(--ink-2); font-size: var(--fs-meta); font-weight: 600; }
.wm-line.me .wm-av { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.dl-sheet .wm-line .wm-seg-h { gap: 8px; font-size: var(--fs-small); }
.dl-sheet .wm-line .wm-seg-t { margin-top: 2px; font-size: var(--fs-body); line-height: 1.65; color: var(--ink); }
.dl-sheet .wm-seg.wm-line.hl { background: var(--detail-bg); box-shadow: inset 0 0 0 1.5px var(--accent-line); }

/* ---------- 手机：层铺满（顶栏与底部页签之间），单栏，底部操作区不挡内容 ---------- */
/* ---------- 10-14：文件详情里的「原文」（pages.js 的 fileReadHtml）：问答的出处点回来，翻到那一页、高亮那一段 ---------- */
.fr-paras { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-p { display: flex; gap: 10px; margin: 0; padding: 7px 10px; border-radius: var(--radius-sm); font-size: var(--fs-ui); line-height: 1.7; color: var(--ink); }
.fr-k { flex: none; min-width: 44px; padding-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.fr-x { min-width: 0; overflow-wrap: anywhere; }
.fr-p.hl { background: var(--mark); box-shadow: inset 0 0 0 1.5px var(--accent-line); }   /* 原件高亮用 --mark，和逐字稿、截图里的高亮同一种 */
.fr-p.hl .fr-k { font-weight: var(--fw-strong); color: var(--accent); }
/* 出处点进来时只闪一圈外框，底色一直是高亮色（通用的 focus-flash 会把底色闪成透明） */
.fr-p.hl.focus-flash { animation: fr-flash 2.2s var(--ease); }
@keyframes fr-flash { 0%, 30% { box-shadow: inset 0 0 0 1.5px var(--accent-line), 0 0 0 3px var(--accent-line); } }
.fr-k0 { padding: 0 10px 4px; font-size: var(--fs-xs); color: var(--ink-3); }
.fr-nav { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); color: var(--ink-2); }
.fr-nav .btn.icon { width: 26px; }
.fr-busy { align-items: center; }
/* 扫描件：左边这一页的原图（真图片就是那张图；扫描 PDF 用纸样示意，段落是几道灰线，出处那段描出来），右边识别出的段落 */
.fr-scan { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 16px; align-items: start; }
.fr-page { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fr-page img, .fr-sheet { width: 100%; aspect-ratio: 1 / 1.36; border-radius: var(--radius-xs); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
.fr-page img { object-fit: cover; background: var(--surface-2); }
.fr-sheet { display: flex; flex-direction: column; gap: 12px; padding: 16% 12% 10%; background: var(--surface-raised); transform: rotate(-.6deg); }
.fr-blk { display: flex; flex-direction: column; gap: 5px; margin: -4px; padding: 4px; border-radius: var(--radius-xs); }
.fr-blk i { display: block; height: 4px; border-radius: var(--radius-pill); background: var(--line-strong); }
.fr-blk i:last-child:not(:only-child) { width: 62%; }
.fr-blk.on { background: var(--mark); box-shadow: 0 0 0 1.5px var(--accent-line); }
.fr-blk.on i { background: var(--accent-line); }
.fr-page figcaption { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }

@media (max-width: 760px) {
  .fr-scan { grid-template-columns: minmax(0, 1fr); }
  .fr-page { justify-self: center; width: min(200px, 64%); }
  .page-in.dl-sheet { top: 0; bottom: 0; width: 100%; border-radius: 0; box-shadow: none; }
  .dl-h { flex-wrap: wrap; gap: 4px 6px; padding: 8px 6px 10px; }
  .dl-title { gap: 8px; }
  .dl-ico { width: 28px; height: 28px; }
  .dl-title h2 { font-size: var(--fs-h2-sm); }
  .dl-h .dl-st, .dl-h .dl-meta, .dl-h .dl-pick, .dl-h .dl-pick-seg { margin-left: 0; }
  .dl-st { font-size: var(--fs-label); }
  .dl-h-r { order: 5; flex-basis: 100%; margin: 2px 0 0 46px; }
  .dl-body { display: block; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .dl-col { overflow: visible; padding: 14px 14px 22px; gap: 20px; }
  .dl-split > .dl-r { border-left: 0; border-top: 1px solid var(--detail-line); }
  /* 列表＋详情：手机上列表变成横着滑的一排，选中项详情接在下面 */
  .dl-split.list > .dl-l { flex-direction: row; overflow-x: auto; gap: 8px; padding: 10px 12px; scrollbar-width: none; }
  .dl-split.list .dl-list, .dl-split.list .dl-group { flex-direction: row; gap: 8px; flex: none; }
  .dl-split.list .dl-group-h { display: none; }
  .dl-split.list .dl-item { flex: none; width: 220px; box-shadow: var(--shadow-inset); }
  .dl-r:has(> .wm-trc) { padding-top: 0; }
  .wm-tr-h { position: static; margin: 0 -14px; padding: 12px 14px 8px; }
  .dl-f { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .dl-f-msg { flex-basis: 100%; font-size: var(--fs-small); }
  .dl-f > .sp { display: none; }
  .dl-f-acts { flex: 1; }
  .dl-f-acts > .btn { flex: 1 1 auto; }
  .dl-sheet .rv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .dl-chip, .dl-item, .dl-fold > svg, .dl-sheet .wm-seg { transition: none; }
}