:root {
  --bg: #f7f6f2; --panel: #ffffff; --fg: #1f1d1a; --muted: #6d6860; --line: #e3dfd6; --soft: #f0ede6;
  --accent: #2f5d8a; --accent-soft: #e6eef6; --warn: #9a5b13; --warn-soft: #f8eedf; --ok: #2e6b3f; --ok-soft: #e4f1e7;
  --bad: #9b2c2c; --bad-soft: #f7e3e3; --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* appearance (#4199): the dark set applies when the user chose dark (data-theme on <html>) or, with no choice, when the system is dark */
:root[data-theme="dark"] { --bg: #171614; --panel: #201f1c; --fg: #ebe8e2; --muted: #a09a90; --line: #35322d; --soft: #2a2825;
  --accent: #8db6dc; --accent-soft: #24313d; --warn: #e2b071; --warn-soft: #3a2f20; --ok: #8fcf9f; --ok-soft: #213328;
  --bad: #ef9a9a; --bad-soft: #3d2424; color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #171614; --panel: #201f1c; --fg: #ebe8e2; --muted: #a09a90; --line: #35322d; --soft: #2a2825;
    --accent: #8db6dc; --accent-soft: #24313d; --warn: #e2b071; --warn-soft: #3a2f20; --ok: #8fcf9f; --ok-soft: #213328;
    --bad: #ef9a9a; --bad-soft: #3d2424; }
}
/* native controls follow the theme; set on the controls only, so an agent's HTML page in its frame keeps a clear background */
:root { accent-color: var(--accent); }
input, select, textarea { color-scheme: light dark; }
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { color-scheme: light; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color-scheme: dark; }
/* thin overlay-style scrollbars (#2368): hidden at rest, shown while scrolling or hovering the scrollbar/table */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.is-scrolling::-webkit-scrollbar-thumb,
.btable-scroll:hover::-webkit-scrollbar-thumb,
.body table:hover::-webkit-scrollbar-thumb,
.bconc.sec-md table:hover::-webkit-scrollbar-thumb,
pre:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 38%, transparent); }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 62%, transparent); }
*::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--muted) 78%, transparent); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .is-scrolling, .btable-scroll:hover, .body table:hover, .bconc.sec-md table:hover, pre:hover { scrollbar-color: color-mix(in srgb, var(--muted) 42%, transparent) transparent; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--mono); font-size: 13px; }
pre { background: var(--soft); padding: 10px 12px; border-radius: 6px; overflow-x: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 14px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.primary { color: #10151b; } }
:root[data-theme="dark"] button.primary { color: #10151b; }
button:hover:not(:disabled) { border-color: var(--accent); }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
button.danger:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
input[type=file] { font-size: 13.5px; color: var(--muted); }
input[type=file]::file-selector-button { font: inherit; color: var(--fg); background: var(--soft); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 12px; margin-right: 10px; cursor: pointer; }
select.inline { width: auto; max-width: 100%; }
input[type=text], input[type=password], input[type=search], input:not([type]), textarea, select {
  width: 100%; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 7px 10px; }
textarea { min-height: 84px; resize: vertical; }

.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 650; color: var(--fg); letter-spacing: .2px; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.top nav a { color: var(--muted); padding: 3px 7px; border-radius: 6px; }
.top nav a.on { color: var(--fg); background: var(--soft); }
.top nav a:hover { text-decoration: none; color: var(--fg); }
.top nav.components { flex: 0 1 auto; border-left: 1px solid var(--line); padding-left: 10px; }
.top nav.components a.down { color: var(--bad); text-decoration: line-through; }
.entry { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
/* the middle of the top bar: the Claude subscription's quota (PAGE-21); the tabs and the right side share the rest */
.top > nav:first-of-type, .top > .right { flex: 1 1 0; }
.top > .right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.top .usage { flex: none; font-size: 13px; white-space: nowrap; color: var(--fg); }
.top .usage .muted { color: var(--muted); }
.top .usage .sep { color: var(--line); }
.top .usage .warn, .top .usage .chip-usage.warn { color: var(--warn); }
.top .usage .bad, .top .usage .chip-usage.bad { color: var(--bad); }
.top .usage .chip-usage { display: none; }
/* where the line does not fit, a chip with the smaller of the two, opening the whole of it */
@media (max-width: 1000px) {
  .top .usage .full { display: none; }
  .top .usage .chip-usage { display: inline-block; font-size: 13px; padding: 6px 9px; border-radius: 999px; background: var(--soft);
    border: 0; color: var(--fg); white-space: nowrap; min-height: 0; }
  .top .usage.open .full { display: block; position: fixed; top: 50px; right: 8px; max-width: calc(100vw - 16px); z-index: 30;
    white-space: nowrap; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
    line-height: 1.8; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
  .top .usage.open .full > span:not(.sep), .top .usage.open .full > b { display: block; }
  .top .usage.open .full .sep { display: none; }
}

main { max-width: 980px; margin: 0 auto; padding: 20px 16px 80px; }
h1 { font-size: 21px; margin: 4px 0 6px; line-height: 1.35; }
h2 { font-size: 15px; margin: 26px 0 8px; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.item { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--fg); }
.item:first-child { border-top: 0; }
.item:hover { background: var(--soft); text-decoration: none; }
.item .title { flex: 1; min-width: 0; }
.item .meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.item.unread .title { font-weight: 600; }
.item.withdrawn .title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.allclear { display: grid; gap: 2px; padding: 16px 18px; margin-top: 6px; }
details::details-content { content-visibility: visible !important; }
details:not([open])::details-content, details:not([open]) > :not(summary) { display: none !important; content-visibility: visible !important; }
details:not([open]) { user-select: none; }
details:not([open]) > summary { margin-bottom: 0 !important; }
details.fold { margin-top: 26px; }
details.fold > summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 15px; margin-bottom: 8px; list-style-position: inside; }
details.fold > summary .small { font-weight: 400; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--fg); }
.chip:hover { text-decoration: none; border-color: var(--accent); }
.chip.down { color: var(--bad); }
h2 a { color: inherit; }
h2 a:hover { color: var(--accent); text-decoration: none; }
.empty { padding: 12px 14px; color: var(--muted); font-size: 14px; }
.badge { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 0 7px; border-radius: 999px;
  background: var(--soft); color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.badge.question { background: var(--accent-soft); color: var(--accent); }
.badge.approval, .badge.confirmation { background: var(--warn-soft); color: var(--warn); }
.badge.task { background: var(--ok-soft); color: var(--ok); }
.badge.notice { background: var(--accent-soft); color: var(--accent); }
.badge.rec { background: var(--ok-soft); color: var(--ok); }
.badge.late { background: var(--bad-soft); color: var(--bad); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.no { background: var(--bad-soft); color: var(--bad); }
a.button { display: inline-block; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 5px 14px; color: var(--fg); }
a.button:hover { text-decoration: none; border-color: var(--accent); }
.pagehead { margin-top: 4px; }
.pagehead h1 { margin: 0; }
.banner { padding: 10px 14px; border-radius: var(--radius); margin: 10px 0; }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner.ok { background: var(--ok-soft); color: var(--ok); }

.msg-head .meta { font-size: 13px; color: var(--muted); }
.body { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 20px;
  margin-top: 14px; overflow-x: auto; }
.body img { max-width: 100%; }
.body h1, .body h2, .body h3, .body h4 { color: var(--fg); margin: 18px 0 8px; }
.body h1 { font-size: 20px; } .body h2 { font-size: 17.5px; } .body h3 { font-size: 16px; } .body h4 { font-size: 15px; }
.body table { border-collapse: collapse; margin: 10px 0; display: block; max-width: 100%; overflow-x: auto; }
.body th { white-space: nowrap; }            /* a narrow screen scrolls the table instead of stacking the header characters */
.body th, .body td { border: 1px solid var(--line); padding: 4px 9px; }
/* folded parts, e.g. a job's full configuration in a 作业审核 (DEC-11, decision 333) */
.body details { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; margin: 6px 0; }
.body details > summary { cursor: pointer; padding: 2px 0; }
.body details[open] > summary { margin-bottom: 4px; }
.body details pre { margin: 4px 0 6px; max-height: 60vh; }
iframe.htmlmsg { width: 100%; border: 0; display: block; min-height: 120px; background: transparent; }

.atts { display: grid; gap: 14px; margin-top: 14px; }
.att { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.att-head { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.att-head .name { color: var(--fg); font-weight: 550; overflow-wrap: anywhere; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.gallery figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.gallery img { width: 100%; height: auto; cursor: zoom-in; border-radius: 4px; background: #fff; }
.gallery .thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: #fff; border-radius: 4px; overflow: hidden; }
.gallery .thumb img, .gallery .thumb canvas { width: 100%; height: 100%; object-fit: contain; border-radius: 0; display: block; }
.gallery .thumb .tag { position: absolute; left: 6px; bottom: 6px; font-size: 11.5px; padding: 0 7px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff; }
.gallery.compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gallery figcaption { font-size: 12.5px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.pdf canvas { display: block; width: 100%; height: auto; margin: 0 auto 10px; background: #fff;
  box-shadow: 0 0 0 1px var(--line); }
.pdf button.more { display: block; margin: 4px auto 6px; }
.tbl { overflow-x: auto; }
.tbl table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.tbl th { position: sticky; top: 0; background: var(--soft); cursor: pointer; text-align: left; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 3px 8px; white-space: nowrap; }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.picked td { background: var(--accent-soft); }
.d2h-wrapper .d2h-code-line, .d2h-wrapper .d2h-code-side-line { cursor: pointer; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: flex; align-items: center;
  justify-content: center; z-index: 50; cursor: zoom-out; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 100%; background: #fff; cursor: zoom-in; }
.lightbox.full { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.lightbox.full img { max-width: none; max-height: none; cursor: zoom-out; }
.lightbox .lb-close { position: fixed; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.55); color: #fff; font-size: 24px; line-height: 40px; padding: 0; cursor: pointer; }
/* 审阅 (DEC-10): figures in the text, one at 65% width, two side by side across; on a phone each takes the width */
.badge.review { background: var(--accent-soft); color: var(--accent); }
.badge.inquiry, .badge.answer { background: var(--accent-soft); color: var(--accent); }
.review-body .rfigs { display: grid; gap: 14px; margin: 14px 0; }
.review-body .rfigs.one { width: 65%; margin-left: auto; margin-right: auto; }
.review-body .rfigs.two { grid-template-columns: 1fr 1fr; }
.rfig { margin: 0; min-width: 0; }
.rfig-media img, .rfig-media canvas { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; }
.rfig figcaption { font-size: 13.5px; margin-top: 5px; }
.rfig-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-top: 2px; }
.rfig-tools select { font-size: 13px; padding: 2px 6px; }
.rfig-note { margin-top: 6px; width: 100%; box-sizing: border-box; }
.rcompare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* comparing versions, a figure takes the whole width of the card */
.rfigs .rfig.comparing { grid-column: 1 / -1; }
.review-body .rfigs.one:has(.comparing) { width: 100%; }
@media (max-width: 760px) {
  .review-body .rfigs.one { width: 100%; }
  .review-body .rfigs.two, .rcompare { grid-template-columns: 1fr; }
}

.qs { margin-top: 18px; }
.q { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px; }
.q .qtext { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-weight: 600; margin-bottom: 8px; }
.q .qnum { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; font-size: 12px;
  background: var(--soft); color: var(--muted); margin-right: 8px; vertical-align: 1px; }
.q .qtext .badge { font-weight: 400; }
.q > input, .q > textarea { margin-top: 2px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; margin: 2px 0; }
.opt:hover { background: var(--soft); }
.opt:has(input:checked) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.opt input { margin-top: 5px; flex: none; }
.opt .olabel { flex: 1; min-width: 0; }
.opt .okey { display: inline-block; min-width: 1.4em; color: var(--muted); }
.opt .badge.rec { margin-left: 6px; }
.opt .desc { font-size: 13px; color: var(--muted); }
.q .qdetail { font-size: 14px; margin: 4px 0 10px; }
.q .qdetail > :first-child { margin-top: 0; }
.q .qdetail > :last-child { margin-bottom: 0; }
.opt .othertext { margin-top: 6px; }
.opt.current { box-shadow: inset 3px 0 0 var(--accent); }
.current-line { font-size: 13px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.qslot { margin: 14px 0; }                  /* a question the text places (DEC-8) */
.qslot > .q { margin-bottom: 0; }
.qslot > .qdone { margin: 0; }
.msgcard .decided.empty { display: none; }
.card.reply { margin-top: 14px; }
.history .note { white-space: pre-wrap; }
.annots { margin: 8px 0; font-size: 13px; }
.annot { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; background: var(--soft); border-radius: 6px; margin-bottom: 4px; }
.annot .where { color: var(--muted); white-space: nowrap; }
.history .h { border-top: 1px solid var(--line); padding: 8px 0; font-size: 13.5px; }
.history .h:first-child { border-top: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.login { max-width: 380px; margin: 12vh auto 0; }
.login h1 { margin-bottom: 14px; }
.login form { display: grid; gap: 10px; }
.msgline { min-height: 22px; font-size: 13.5px; color: var(--bad); }
.msgline.ok { color: var(--ok); }
.form { display: grid; gap: 12px; }
.form label { font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.form label.opt { display: flex; font-size: 15px; color: var(--fg); }

.agents { display: grid; gap: 10px; }
.agent { display: block; color: var(--fg); }
.agent:hover { text-decoration: none; border-color: var(--accent); }
.cmds { margin-top: 8px; display: grid; gap: 4px; }
.cmd { display: flex; gap: 10px; align-items: baseline; background: var(--soft); border-radius: 6px; padding: 3px 8px; }
.cmd code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.cmd .small { white-space: nowrap; }
.badge.state-busy { background: var(--ok-soft); color: var(--ok); }
.badge.state-offline { background: var(--bad-soft); color: var(--bad); }
.badge.state-ended, .badge.state-unreported { background: var(--soft); color: var(--muted); }
details.ended { margin-top: 22px; }
details.ended summary { cursor: pointer; color: var(--muted); margin-bottom: 8px; }
.filters select, .filters input { width: auto; flex: 1 1 140px; }
.outputs canvas.pdfthumb { background: #fff; }
.outputs figcaption a { color: var(--fg); font-weight: 550; }
.result .snippet { font-weight: 400; margin-top: 2px; }
mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

@media (max-width: 640px) {
  .top { position: sticky; top: 0; z-index: 35; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; padding: 2px 8px; min-height: 38px; }
  .top::-webkit-scrollbar { display: none; }
  .top .brand { display: none; }
  .top nav, .top nav.components { flex: none; flex-wrap: nowrap; gap: 0; }
  .top nav.components { padding-left: 4px; margin-left: 4px; }
  .top nav a { padding: 6px 9px; font-size: 13.5px; white-space: nowrap; }
  .top .entry { flex: none; margin-left: auto; }
  .top > nav:first-of-type, .top > .right { flex: none; gap: 2px; }
  .top > .right { margin-left: auto; }
  main { padding: 14px 12px 70px; }
  .body { padding: 4px 12px; }
  .item { flex-wrap: wrap; gap: 4px 10px; }
  .item .title { flex: 1 1 12em; }
  .gallery { grid-template-columns: 1fr; }
  .gallery.outputs { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery.outputs figure { padding: 6px; }
  .gallery.outputs figcaption { font-size: 12px; }
  .q { padding: 10px 12px; }
  .opt { padding: 7px 6px; }
}
/* live channel (CHAN-3, PAGE-11) */
.badge.live { background: var(--ok-soft); color: var(--ok); }
.badge.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  margin-right: 5px; vertical-align: 1px; }
.steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; margin: 8px 0 2px; }
.steps .step { padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.steps .step.on { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.steps .arrow { color: var(--line); }
.steps .muted { margin-left: 4px; }
.history .steps { margin-top: 4px; }

/* conversations (PAGE-12 to PAGE-15): the list of agents beside one live conversation */
main.app-main { max-width: none; padding: 0; }
.app { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); height: var(--app-h, calc(100dvh - var(--top-h, 52px))); }
.app.list-only { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; height: auto; min-height: var(--app-h, calc(100dvh - var(--top-h, 52px))); }
.side-slot { border-right: 1px solid var(--line); background: var(--panel); overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.app.list-only .side-slot { border: 0; background: transparent; overflow: visible; }
.side { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px 12px; }
.side-foot { flex: none; padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--panel); position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.side h4 { margin: 12px 8px 4px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .3px; }
.side h4:first-child { margin-top: 2px; }
.side .pad { padding: 4px 8px; }
.side details.ended { margin-top: 10px; }
.side details.ended summary { margin: 0 8px 4px; font-size: 12px; font-weight: 600; }
.who { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 6px 8px;
  border-radius: 7px; color: var(--fg); }
.who:hover { background: var(--soft); text-decoration: none; }
.who.on { background: var(--accent-soft); }
.who .n { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .s { grid-column: 2 / 4; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .cnt { font-size: 11px; min-width: 18px; text-align: center; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--panel); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dot.work { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.idle { background: var(--ok); opacity: .55; }
.dot.wait { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.needs { display: grid; gap: 2px; }
.need { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; padding: 6px 8px;
  border-radius: 7px; color: var(--fg); background: var(--warn-soft); }
.need:hover { text-decoration: none; filter: brightness(.98); }
/* a report or an output only wants a look, no answer: quieter than what waits for one (PAGE-12) */
.need.fyi { background: var(--soft); }
.need .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.need .s { grid-column: 2; font-size: 12px; color: var(--muted); }
.need .s.late { color: var(--bad); }
.need.has-x { position: relative; padding-right: 26px; }
.need .need-x { position: absolute; top: 4px; right: 3px; display: none; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: 4px; cursor: pointer; }
.need:hover .need-x, .need .need-x:focus-visible, .need .need-x.err { display: block; }
.need .need-x:hover { background: var(--soft); color: var(--fg); }
.need .need-x.err { color: var(--bad); }
@media (hover: none) { .need .need-x { display: block; } }
.job-stall-bar .stall-x { font-size: 16px; line-height: 1; padding: 0 4px; color: var(--muted); }
/* web notifications (NOTE-6): the one-time offer above 需要你, and the browsers in the settings */
.notify-ask { margin: 2px 4px 10px; padding: 9px 11px; border: 1px solid var(--accent-soft); background: var(--accent-soft); border-radius: 8px; display: grid; gap: 6px; }
.notify-ask .row { display: flex; gap: 10px; align-items: center; }
.notify-ask .msgline { min-height: 0; }
.notify-ask .ok { color: var(--ok); }
.pushdevs { display: grid; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.pushdev { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
.pushdev > .muted { grid-column: 1; }
.pushdev > button { grid-column: 2; grid-row: 1 / span 2; }
.newagent { flex: 1 1 auto; min-width: 0; display: block; margin: 0; padding: 6px 8px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 7px; color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, transparent); font-weight: 550; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newagent:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chead-wrap { border-bottom: 1px solid var(--line); background: var(--panel); padding: 8px 16px; }
/* two rows (PAGE-25): name and state with the buttons pinned to the right, which never wrap; below them the facts and
   the live chips, which wrap among themselves */
.chead2 { display: flex; flex-direction: column; gap: 5px; }
.chead2 .hrow { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.chead2 .hbtns { display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
.chead2 .hchips, .chead-info .hchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chead2 .cname { font-size: 16px; flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chead2 .hrow > .badge, .chead2 .hrow > .lchip { flex: none; }
.chead2 .spacer { flex: 1 1 0; min-width: 0; }
.chead2 .facts, .chead-info .facts { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.chead2 .back { display: none; font-size: 22px; line-height: 1; padding: 0 6px 2px 0; color: var(--muted); }
.chead2 .brk { display: none; }
.chead2 .brk2 { display: none; }
.chead2 .lchip, .chead-info .lchip { font-size: 12px; background: var(--soft); border-radius: 5px; padding: 1px 7px; color: var(--muted); white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chead2 .lchip.mono, .chead-info .lchip.mono { font-family: var(--mono); }
.chead2 button.small { padding: 3px 10px; font-size: 13px; }
.chead2 button.small.on { background: var(--accent-soft, var(--line)); }
.chead-info { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; }
.chead-info .planbar, .chead-info .runs { margin-top: 0; }
.chead-info .bdoing-line { padding: 2px 4px; }
.ctl-panel { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 6px; }
.ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ctl-row select.inline { max-width: 100%; }
.warn-text { color: var(--warn); }
.chead-wrap .banner { margin: 6px 0 0; padding: 5px 10px; }
.runs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.run { font: 12px var(--mono); background: var(--soft); border-radius: 5px; padding: 1px 7px; color: var(--muted); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroller { flex: 1; overflow-y: auto; min-height: 0; }
.tl { max-width: 860px; margin: 0 auto; padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.earlier { align-self: center; }
button.linklike { border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; }
button.linklike:hover { text-decoration: underline; }
.daysep { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.daysep span { background: var(--soft); border-radius: 999px; padding: 1px 10px; }
.eventline { text-align: center; font-size: 12px; color: var(--muted); }
/* PAGE-14: Hallmark's notices and the messages between sessions, one line each */
.term-line { font-size: 13px; color: var(--muted); border-left: 3px solid var(--line); padding: 1px 0 1px 8px; margin: 2px 0; }
.term-line summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; min-width: 0; list-style: none; }
.term-line summary::-webkit-details-marker { display: none; }
.term-line .tag { flex: none; max-width: 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-line .tl-first { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-line .tl-at, .term-line .tl-state { flex: none; white-space: nowrap; }   /* a long first line shrinks, never these (#7762) */
.term-line[open] .tl-first { visibility: hidden; }  /* the whole text is right below */
.term-line[open] .tag { max-width: none; }
.term-line .tl-full { margin: 4px 0 4px 2px; color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.term-line.peer.in { border-left-color: var(--accent); }
.term-line.peer.out { border-left-color: var(--ok, var(--accent)); }
.term-line.notice.forge { border-left-color: var(--warn, var(--line)); }
.line { display: flex; flex-direction: column; max-width: 100%; }
.line.me { align-items: flex-end; }
.line.ag { align-items: flex-start; }
.line .meta { font-size: 11.5px; color: var(--muted); margin: 2px 4px 0; }
.line .mini { font-size: 11.5px; color: var(--muted); margin: 0 4px; }
.line .mini.ok { color: var(--ok); }
.line.gone .bubble { opacity: .55; text-decoration: line-through; text-decoration-color: var(--muted); }
.bubble { max-width: min(640px, 86%); padding: 8px 12px; border-radius: 12px; overflow-wrap: anywhere; }
.bubble > :first-child { margin-top: 0; }
.bubble > :last-child { margin-bottom: 0; }
.bubble p { margin: 4px 0; }
.bubble pre { white-space: pre-wrap; }
.bubble.me { background: var(--accent-soft); border-bottom-right-radius: 4px; }
.bubble.ag { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble .btitle { font-weight: 600; margin-bottom: 2px; }
a.bubble.reply { color: var(--fg); display: block; font-size: 14px; }
a.bubble.reply:hover { text-decoration: none; filter: brightness(.98); }
.bubble.reply .rt { color: var(--muted); font-size: 12.5px; }
.term { border-left: 3px solid var(--line); padding: 2px 0 2px 12px; font-size: 14px; }
.term.user { border-left-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.term .who-line { font-size: 12px; color: var(--muted); }
.term .tag { font: 11px var(--mono); background: var(--soft); border-radius: 4px; padding: 0 5px; }
.term .plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.term p { margin: 4px 0; }
.term pre { white-space: pre-wrap; }
.fold-box { position: relative; }
.fold-box.folded > :first-child { max-height: 300px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.msgcard .fold-box.folded > :first-child { max-height: 520px; }
details.tools { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
details.tools summary { cursor: pointer; }
details.tools .tool { overflow-wrap: anywhere; padding-left: 12px; }
details.tools .tool code { font-size: 12px; }
.line.cardline { align-items: stretch; }
.msgcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; overflow-wrap: anywhere; }
/* table cells keep their words; a wide table scrolls inside the body instead (phones) */
.msgcard .body th, .msgcard .body td { overflow-wrap: normal; }
.msgcard.waiting { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--warn); }
.msgcard.gone { opacity: .6; }
.msgcard .chead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.msgcard .ctitle { font-weight: 600; color: var(--fg); }
.msgcard .qs { margin-top: 8px; }
.msgcard .q { padding: 8px 12px; margin-bottom: 8px; }
.msgcard .reply.compact { margin-top: 4px; }
.reply.notice .actions { margin-top: 6px; }
.banner.notice-state { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.banner.notice-state .linklike { flex: none; }
.reply.notice textarea { margin-top: 8px; width: 100%; }
textarea.compact { min-height: 40px; }
.msgcard img { max-width: 100%; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.thumbs img { height: 120px; max-width: 100%; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--line); cursor: zoom-in; }
.files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.files .chip { font-size: 13px; padding: 2px 10px; }
.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.working { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.working .dots { display: inline-flex; gap: 3px; }
.working .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); animation: blink 1.2s infinite ease-in-out; }
.working .dots i:nth-child(2) { animation-delay: .2s; }
.working .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer { border-top: 1px solid var(--line); background: var(--panel); padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
.composer.drop { box-shadow: inset 0 0 0 2px var(--accent); }
.composer .crow { display: flex; gap: 8px; align-items: flex-end; max-width: 860px; margin: 0 auto; }
.composer textarea { min-height: 40px; max-height: 200px; resize: none; line-height: 1.45; padding: 8px 10px; }
.composer button.icon { width: 38px; height: 38px; padding: 0; font-size: 20px; line-height: 1; flex: none; color: var(--muted); }
.composer button.primary { height: 38px; flex: none; }
.composer .hint, .composer .msgline, .composer .pending-files { max-width: 860px; margin: 0 auto; }
.composer .msgline { min-height: 0; }
.pending-files { display: flex; gap: 6px; flex-wrap: wrap; }
.pending-files:not(:empty) { margin-bottom: 6px; }
.pending-files .chip { font-size: 12.5px; padding: 1px 9px; }
.form .half { flex: 1 1 160px; }

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app:not(.list-only) > .side-slot { display: none; }
  .chead2 { flex-direction: row; row-gap: 4px; flex-wrap: wrap; align-items: center; column-gap: 6px; }
  .chead2 .hrow, .chead2 .hchips { display: contents; }
  .chead2 .back { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; margin-left: -8px;
    padding: 0 2px 2px; font-size: 26px; border-radius: 6px; }
  .chead2 .back:hover, .chead2 .back:active { text-decoration: none; background: var(--soft); }
  .chead2 .cname { flex: 1 1 0; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chead2 .spacer { display: none; }
  .chead2 .brk { display: block; flex-basis: 100%; height: 0; order: 1; }
  .chead2 .hbtns { order: 2; flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 5px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
  .chead2 .hbtns::-webkit-scrollbar { display: none; }
  .chead2 .hbtns > * { flex: none; }
  .chead2 .hbtns button.small { min-height: 30px; padding: 3px 9px; font-size: 12.5px; }
  .chead2 .hbtns > a.small { padding: 4px 6px; font-size: 12.5px; }
  .chead2 .brk2 { display: none; }
  .chead2 .facts { order: 4; flex: 0 1 auto; max-width: 100%; margin-top: 2px; }
  .chead2 .lchip { display: none; }
  .chead-wrap { padding: 4px 10px 5px; }
  .runs { flex-wrap: nowrap; overflow: hidden; }
  .tl { padding: 8px 10px 12px; gap: 8px; }
  .bubble { max-width: 92%; }
  .composer { padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); }
  .composer .crow { gap: 5px; }
  .composer .asktoggle { padding: 0 9px; font-size: 12.5px; height: 36px; }
  .composer button.icon { width: 36px; height: 36px; }
  .composer button.primary { height: 36px; padding: 0 11px; font-size: 13.5px; }
  .app.list-only .side { padding: 6px 4px 20px; }
}
.tl .body { border: 0; padding: 0; margin: 0; background: none; border-radius: 0; }
.tl .body > :first-child { margin-top: 0; }
.tl .body > :last-child { margin-bottom: 0; }
.term .body { margin-top: 2px; }
.term details.tools + .body, .term details.tools + .plain { margin-top: 2px; }
.msgcard .decided { margin-top: 6px; padding: 6px 10px; background: var(--ok-soft); border-radius: 6px; display: grid; gap: 2px; }
.msgcard .decided + .linklike { margin-top: 4px; }
/* the start page (PAGE-15) */
.form.launch { gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .hint { min-height: 0; color: var(--muted); }
.form .hint.bad { color: var(--bad); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg label { display: inline-flex; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { padding: 4px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); font-size: 13.5px; }
.seg label:hover span { border-color: var(--accent); }
.seg input:checked + span { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.dirchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dirchips .chip { font: 12.5px var(--mono); padding: 2px 10px; cursor: pointer; }
.dirchips .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.field .flabel { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.perms .opt { margin: 0; }
.perms code { font-size: 11.5px; }
.form details.more summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.form details.more[open] { display: grid; gap: 8px; }
.form label.check { display: flex; gap: 8px; align-items: center; color: var(--fg); font-size: 14px; margin-top: 8px; }
.form label.check input { width: auto; }
.cmdline { background: var(--soft); border-radius: 6px; padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.cmdline code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
button.small { padding: 3px 10px; font-size: 13px; }
.grid3 { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px 14px; align-items: start; }
.launch-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.launch-head h1 { margin: 0; font-size: 20px; }
.launch-head .back-link { margin-right: 2px; }
.form.launch { padding: 14px 16px; gap: 10px; }
.perm-hint { margin-top: 4px; font-size: 12px; }
.launch-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.launch-actions .spacer { flex: 1; }
details.resume-box { margin-top: 12px; padding: 10px 14px; }
details.resume-box > summary { cursor: pointer; font-weight: 550; font-size: 14px; }
details.resume-box[open] > summary { margin-bottom: 10px; }
@media (max-width: 760px) { .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.msgcard.perm .body pre { max-height: 60vh; overflow: auto; margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }   /* a command over its lines (#581) */
.msgcard.perm .actions { margin-top: 8px; align-items: center; }
.perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 10px; }
.perms .permnote { grid-column: 1 / -1; margin-top: 4px; }
.composer .hint[hidden] { display: none; }

/* hand-off (PAGE-17) and the embed (PAGE-18) */
.refchip { display: inline-block; margin: 0 0 4px; font-size: 12px; }
.bubble .refchip { margin-right: 6px; }
a.cite { text-decoration: underline dotted; cursor: pointer; }
.targets { display: grid; gap: 4px; }
.targets .badge { margin-left: 6px; }
.badge.dim { opacity: .7; }
.newonly { display: grid; gap: 10px; }
.newonly[hidden] { display: none; }
body.embed #top { display: none !important; }
body.embed .side-slot, .side-slot.none { display: none; }
body.embed .app { grid-template-columns: minmax(0, 1fr); }
body.embed main.embed-pick { padding: 8px 12px; }
body.embed main.embed-pick h2 { margin-top: 4px; }
.reply.notice .msgline:empty { min-height: 0; }
.reply.notice.wide { margin-top: 16px; }
.banner.newer { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 50; margin: 0; display: flex; gap: 12px; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* phones and tablets: no zoom when a field gets the focus (iOS zooms into text under 16px), no double-tap zoom
   (pinching still zooms), and targets a finger can hit */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse), (hover: none), (max-width: 760px) {
  input:not([type=radio]):not([type=checkbox]):not([type=file]), textarea, select { font-size: 16px !important; }
}
@media (pointer: coarse) {
  html { touch-action: manipulation; }
  button, a.button { min-height: 40px; }
  button.small, .chead2 button.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
  button.linklike { min-height: 36px; padding: 6px 4px; font-size: 14px; }
  .composer button.icon { width: 42px; height: 42px; }
  .composer button.primary { height: 42px; }
  details > summary { padding: 7px 0; }
  .chip, .dirchips .chip, .files .chip { padding: 7px 12px; }
  .seg span { padding: 8px 12px; font-size: 14px; }
  .opt { padding: 10px 8px; }
  .opt input[type=radio], .opt input[type=checkbox] { width: 20px; height: 20px; margin-top: 3px; }
  .item { padding: 12px 14px; }
  .item .title > a, .row.small > a { display: inline-block; padding: 7px 0; }
  .who, .need { padding-top: 9px; padding-bottom: 9px; }
}

/* 「消息」 (PAGE-19): the agent's messages that ask the user for something, in a column right of the conversation */
.app.with-asks { grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) var(--asks-w, 480px); }
.asks { position: relative; border-left: 1px solid var(--line); background: var(--panel); min-height: 0; display: flex; }
.asks[hidden] { display: none; }
.asks-in { flex: 1; min-width: 0; overflow-y: auto; padding: 10px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
/* the line between the conversation and the column: drag to change the width, double-click for half and half */
.asks-grip { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 2; touch-action: none; }
.asks-grip:hover, .app.dragging .asks-grip { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.app.dragging { user-select: none; cursor: col-resize; }
.asks-head { display: flex; align-items: baseline; gap: 8px; }
.asks-filter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.asks-filter .chip { padding: 2px 10px; font-size: 13px; cursor: pointer; font-family: inherit; }
.asks-filter .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.asks-filter .wd { display: inline-flex; gap: 4px; align-items: center; margin-left: 4px; }
.asks-list { display: grid; gap: 14px; }
/* one block per matter (decision 573): bordered, apart from the next; open, its exchange sits inside it */
.ask { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.ask:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ask.open { border-color: var(--accent); box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 14%, transparent); }
.ask-row { display: grid; gap: 6px; width: 100%; box-sizing: border-box; text-align: left; background: transparent; border: 0;
  padding: 10px 12px; color: var(--fg); cursor: pointer; }
.ask.open .ask-row { background: var(--soft); border-bottom: 1px solid var(--line); }
.ask-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ask-top .no { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ask-top .spacer { flex: 1 1 0; }
.ask-top .s { font-size: 12px; color: var(--muted); }
.ask-title { font-weight: 600; overflow-wrap: anywhere; }
.asks-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0 -2px; font-size: 12.5px; color: var(--muted); }
.asks-divider::before, .asks-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.ask-prev { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.55; }
.ask-prev .ex { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ask-prev .qs { margin: 0; }
.ask-prev .qs > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-prev .figs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ask-prev .figs img { height: 72px; max-width: 128px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 5px; cursor: zoom-in; }
.ask-prev .figs .more { font-size: 12.5px; color: var(--muted); }
.ask.open .ask-prev { display: none; }
.ask.pending { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--warn); }
.ask.gone { opacity: .6; }
.ask-card { padding: 0 12px; }
.ask.open .ask-card { padding: 10px 12px 12px; }
.ask-card .line.cardline { margin: 4px 0 12px; }
.ask-card .ask-detail > .line.cardline:first-child .msgcard > .chead { display: none; }      /* the row above is its title */
.asks-btn .cnt { font-size: 11px; min-width: 16px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: var(--panel); display: inline-block; text-align: center; }
.asks-btn.on { background: var(--accent-soft); border-color: var(--accent); }
.asks-btn .cnt[hidden] { display: none; }
/* 「事项」 (DEC-14): standing, a 提问 and its 答复 */
.asks-new { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--bg); }
.asks-new[hidden] { display: none; }
.askfields { display: grid; gap: 6px; position: relative; }
/* 输入框 @ (DEC-15): the list over the box, the tag of what was picked */
.composer { position: relative; }
.mention-pop { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 4px); max-width: 560px; margin: 0 auto;
  max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12); padding: 4px 0; z-index: 30; }
.mention-pop.down { bottom: auto; top: 100%; left: 0; right: 0; margin-top: 4px; }
.mention-pop[hidden], .mention-tag[hidden] { display: none; }
.mention-head { font-size: 11.5px; color: var(--muted); padding: 6px 12px 2px; letter-spacing: .04em; }
.mention-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 12px; cursor: pointer; }
.mention-row.on, .mention-row:hover { background: var(--accent-soft); }
.mention-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-sub { flex: none; font-size: 12px; color: var(--muted); }
.mention-none { padding: 8px 12px; color: var(--muted); font-size: 13px; }
.mention-tag { display: flex; gap: 8px; align-items: center; font-size: 13px; max-width: 860px; margin: 0 auto 6px; }
.mention-tag .mention-what { font-size: 11.5px; color: var(--muted); }
.mention-tag .mention-label { padding: 1px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); max-width: 60ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mention-tag button { font-size: 15px; line-height: 1; padding: 0 4px; color: var(--muted); }
.askfields .mention-tag { margin: 0; }
.atblock { font-size: 12px; color: var(--accent); margin-right: 6px; }
.atblock[role=button] { cursor: pointer; }
.atblock[role=button]:hover { text-decoration: underline; }
.askfields textarea { width: 100%; }
.askfiles { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.askfiles button.icon { color: var(--muted); }
.ask-prev .ans { border-left: 3px solid var(--accent); padding-left: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ask.theirs { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.ask-detail { display: grid; gap: 6px; border-left: 2px solid var(--line); padding-left: 10px; margin-left: 2px; }
.ask-detail .bubble.ag > .itag { display: none; }
.ask-detail .body { border: 0; padding: 0; margin: 0; background: none; border-radius: 0; }       /* as in the timeline */
.ask-detail .body > :first-child { margin-top: 0; }
.ask-detail .body > :last-child { margin-bottom: 0; }
.ask-compose { display: grid; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ask-compose .actions { align-items: center; }
.ask-detail .ev { font-size: 12.5px; color: var(--muted); text-align: center; }
.ask-detail .ev.pending { color: var(--warn); display: flex; gap: 10px; justify-content: center; align-items: baseline; }
.itemtag { font: inherit; font-size: 12px; line-height: 1.5; padding: 0 8px; border-radius: 999px; background: var(--soft); color: var(--muted);
  border: 1px solid var(--line); cursor: pointer; }
.itemtag:hover { border-color: var(--accent); color: var(--accent); }
.itemtag.static { cursor: default; }
.itemtag.static:hover { border-color: var(--line); color: var(--muted); }
.bubble.ag > .itag { margin-bottom: 3px; }
.bubble.inquiry .itag, .bubble.me > .itag { font-size: 12px; color: var(--muted); margin-bottom: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bubble.inquiry .itag .atblock, .bubble.me > .itag .atblock { margin-right: 0; }
.msgcard.answer { border-left: 3px solid var(--accent); }
.composer .asktoggle { height: 38px; flex: none; cursor: pointer; font-family: inherit; padding: 0 12px; }
.composer .asktoggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* 「作业」 (PAGE-20) */
.jcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 5px; background: var(--bg); }
.jcard.stalled { border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 5%, var(--bg)); }
.job-stall-slot { position: relative; height: 0; flex: none; z-index: 6; }
.job-stall-bar { position: absolute; left: 0; right: 0; top: 0; border-bottom: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--bg)); box-shadow: 0 2px 6px rgba(0,0,0,.12); padding: 6px 12px; display: grid; gap: 4px; max-height: 30vh; overflow: auto; }
.job-stall-bar[hidden] { display: none; }
.job-stall-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--fg); }
.jobs-btn.warn-stall { border-color: var(--warn); color: var(--warn); }
.agent.card.pinned { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--bg)); }
.who.pinned { border-left: 2.5px solid var(--accent); }
.jcard .ask-top a.t { font-weight: 550; overflow-wrap: anywhere; }
.jres { line-height: 1.4; overflow-wrap: anywhere; }
.jdesc { position: relative; line-height: 1.5; padding: 5px 24px 5px 8px; background: var(--soft); border-left: 2.5px solid var(--accent); border-radius: 4px; color: var(--fg); overflow-wrap: anywhere; }
.jdesc-edit { position: absolute; top: 3px; right: 5px; font-size: 12px; opacity: 0.45; text-decoration: none !important; }
.jdesc:hover .jdesc-edit { opacity: 1; }
.jdesc-wrap { display: grid; gap: 4px; }
.jdesc-ta { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.45; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 4px; background: var(--bg); color: var(--fg); resize: vertical; }
.jdesc-actions { display: flex; gap: 6px; justify-content: flex-end; }
.jpurpose { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--line); }
.jbar i { display: block; min-width: 3px; }
/* one colour per phase (decision 976): the bar's segments and the dots before the counts */
.j-waiting { --jc: color-mix(in srgb, var(--muted) 30%, transparent); } .j-queued { --jc: color-mix(in srgb, var(--muted) 60%, transparent); }
.j-preparing { --jc: var(--warn); } .j-in_queue { --jc: color-mix(in srgb, var(--accent) 45%, transparent); } .j-running { --jc: var(--accent); }
.j-closing { --jc: color-mix(in srgb, var(--ok) 50%, transparent); } .j-done { --jc: var(--ok); } .j-failed { --jc: var(--bad); }
.j-cancelled { --jc: color-mix(in srgb, var(--muted) 15%, transparent); }
.jbar i { background: var(--jc); }
.jn { margin-right: 10px; white-space: nowrap; display: inline-block; }
.jn::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; background: var(--jc); }
.jlanes, .jfails { display: grid; gap: 2px; }
.jdet > summary { cursor: pointer; color: var(--accent); width: max-content; }
.jdet-body { display: grid; gap: 8px; margin-top: 6px; }
.jdet-head { display: flex; gap: 10px; align-items: baseline; }
.jsec { display: grid; gap: 3px; border-top: 1px solid var(--line); padding-top: 6px; }
.jsec-t { font-weight: 550; }
.jsend { display: grid; gap: 2px; padding: 4px 0 4px 8px; border-left: 2px solid var(--line); }
.jsend code, .jup code, .jlane code { margin: 0 4px; }
.jfiles { display: grid; gap: 1px; }
.jfile code, .jkv code, .jscript code { overflow-wrap: anywhere; word-break: break-all; }
.jstep { display: grid; grid-template-columns: 9em auto 1fr; gap: 8px; }
.jprog > :not(summary) { margin-left: 1.3em; }
.jprog > .jstep { grid-template-columns: 8em 4.5em 1fr; }
.jstay { display: grid; gap: 1px; margin-top: 4px; }
.jdet .linklike { width: max-content; font-size: inherit; }
.jfold > summary { cursor: pointer; color: var(--accent); padding: 2px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jfold > summary::before { content: "▸"; font-size: 11px; transition: transform .12s ease; }
.jfold[open] > summary::before { transform: rotate(90deg); }
.jcode-lang { font-size: 10px; padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 14%, var(--soft)); color: var(--accent); font-weight: 600; letter-spacing: .03em; }
.jcode-pre { position: relative; margin: 4px 0; padding: 8px 10px; max-height: 360px; overflow: auto; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; line-height: 1.5; white-space: pre; tab-size: 2; }
.jcode-pre > .code-copy, .jcode-pre > .jcode-tools { position: sticky; top: 0; float: right; z-index: 2; display: inline-flex; gap: 4px; }
.jcode-pre .code-copy { position: static; }
.j-ai-btn { font-size: 11px !important; padding: 0 5px !important; border-radius: 4px; background: color-mix(in srgb, var(--accent) 10%, var(--soft)); color: var(--accent); opacity: 0.78; margin-left: 4px; text-decoration: none !important; white-space: nowrap; }
.j-ai-btn:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, var(--soft)); }
.j-diag-btn { color: var(--bad) !important; font-weight: 550; }
.j-sel-pop { position: fixed; z-index: 120; display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.j-sel-btn { font-size: 12px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line); background: var(--soft); color: var(--fg); cursor: pointer; white-space: nowrap; }
.j-sel-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 550; }
.j-sel-btn:hover { filter: brightness(0.95); }
.hl-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.hl-ln { display: inline-block; min-width: 2.6em; padding-right: 0.9em; margin-right: 0.6em; text-align: right; color: var(--muted); opacity: 0.55; user-select: none; -webkit-user-select: none; border-right: 1px solid var(--line); }
.hl-ln::before { content: attr(data-ln); }
.hl-kw { color: #b4237a; font-weight: 550; }
.hl-str { color: #116329; }
.hl-cmt { color: #6e7781; font-style: italic; }
.hl-num { color: #0550ae; }
.hl-key { color: #0550ae; font-weight: 500; }
.hl-fn { color: #6639ba; }
.hl-dec { color: #953800; }
.hl-bi { color: #0969da; }
.hl-op { color: #57606a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl-kw { color: #ff7b72; }
  :root:not([data-theme="light"]) .hl-str { color: #a5d6ff; }
  :root:not([data-theme="light"]) .hl-cmt { color: #8b949e; }
  :root:not([data-theme="light"]) .hl-num { color: #79c0ff; }
  :root:not([data-theme="light"]) .hl-key { color: #7ee787; }
  :root:not([data-theme="light"]) .hl-fn { color: #d2a8ff; }
  :root:not([data-theme="light"]) .hl-dec { color: #ffa657; }
  :root:not([data-theme="light"]) .hl-bi { color: #79c0ff; }
  :root:not([data-theme="light"]) .hl-op { color: #8b949e; }
}
:root[data-theme="dark"] .hl-kw { color: #ff7b72; }
:root[data-theme="dark"] .hl-str { color: #a5d6ff; }
:root[data-theme="dark"] .hl-cmt { color: #8b949e; }
:root[data-theme="dark"] .hl-num { color: #79c0ff; }
:root[data-theme="dark"] .hl-key { color: #7ee787; }
:root[data-theme="dark"] .hl-fn { color: #d2a8ff; }
:root[data-theme="dark"] .hl-dec { color: #ffa657; }
:root[data-theme="dark"] .hl-bi { color: #79c0ff; }
:root[data-theme="dark"] .hl-op { color: #8b949e; }
.jerr-item { display: grid; gap: 2px; padding: 3px 0 3px 8px; border-left: 2px solid var(--bad); }
.jerr-pre { margin: 2px 0 0; padding: 5px 8px; max-height: 140px; overflow: auto; background: var(--soft); border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); border-radius: 4px; font-size: 11.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
/* 「子代理」 (PAGE-25) */
.scard .ask-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scard .stag { font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--soft); color: var(--muted); }
.scard-title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.scard-title .t { font-weight: 550; }
.jlane code, .jfail code { margin: 0 4px; }
.jfail { color: var(--bad); }
.asks-tabs .asks-back-conv { display: none; }
@media (max-width: 900px) { .drawer-widths { display: none !important; } }
@media (max-width: 760px) {
  .app.with-asks { grid-template-columns: minmax(0, 1fr); }
  .asks { position: fixed; top: var(--top-h, 0px); left: 0; right: 0; bottom: 0; z-index: 30; border-left: 0; }
  .asks-in { padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); }
  .asks-grip { display: none; }
  .asks-head { position: sticky; top: -8px; background: var(--panel); padding: 6px 0; z-index: 3; border-bottom: 1px solid var(--line); }
  .asks-tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; flex: 1 1 auto; }
  .asks-tabs::-webkit-scrollbar { display: none; }
  .asks-tabs .asks-back-conv { display: inline-flex; color: var(--accent); font-weight: 600; border-right: 1px solid var(--line); border-radius: 5px 0 0 5px; padding-right: 10px; margin-right: 2px; }
  .fig-one > *, .fig-one > .ana-fig { max-width: 100%; }
  .fig-strip > * { flex: 0 0 88%; }
  .sec-body { margin-left: 6px; padding-left: 8px; }
  .secchat-head { padding: 4px 10px; }
  .secchat-in { padding: 8px 10px 14px; }
  .secchat-write { padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); }
}

/* 计划 (DEC-12): stages with their states; the plan pinned at the top of the conversation */
.plan { margin-top: 10px; }
.stages-head { margin: 4px 0 2px; }
ol.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ol.stages .stage { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: var(--panel); }
ol.stages .srow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
ol.stages .stitle { font-weight: 600; }
ol.stages .sdetail { font-size: 13.5px; margin-top: 2px; }
.sdetail { font-size: 13.5px; }
.sdetail > .body { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.sdetail > .body > :first-child { margin-top: 2px; }
.sdetail > .body > :last-child { margin-bottom: 2px; }
.sdetail p, .sdetail ol, .sdetail ul { margin: 4px 0; }
.sdetail ol, .sdetail ul { padding-left: 1.6em; }
.sdetail li + li { margin-top: 2px; }
ol.stages .snote { margin-top: 2px; color: var(--muted); }
ol.stages textarea { margin-top: 6px; }
ol.stages .stage:not(.open) > .sbody { display: none; }
.plan:not(.changing) ol.stages .stage-say, .plan:not(.changing) ol.stages .micwrap { display: none; }
ol.stages .srow.fold { cursor: pointer; }
ol.stages .stage.open > .srow .sec-caret { transform: rotate(90deg); }
.sstate { display: inline-block; min-width: 4.2em; text-align: center; font-size: 12px; padding: 1px 7px; border-radius: 10px; background: var(--soft); color: var(--muted); white-space: nowrap; }   /* one width for 待做/进行中/完成, so the stage titles line up (#1604) */
.sstate.doing { background: var(--accent-soft); color: var(--accent); }
.sstate.done { background: var(--ok-soft); color: var(--ok); }
.sstate.skipped { background: var(--warn-soft); color: var(--warn); }
.sstate.waiting { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }   /* DEC-12: outlined, not filled like 进行中 */
ol.psteps { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
/* a step is a grid of state, number and text: what hangs under it (points, wait, notes) starts at the text */
ol.psteps .pstep { display: grid; grid-template-columns: 52px 1.6em minmax(0, 1fr); column-gap: 6px; align-items: baseline; }
ol.psteps .pstep-h { display: contents; }
ol.psteps .pstep > :not(.pstep-h) { grid-column: 3; margin: 2px 0 0; }
ol.psteps .pstep-n { text-align: right; }
ol.psteps .pstep-t > .badge { margin-left: 6px; }
ol.psteps .sstate { min-width: 0; width: 52px; box-sizing: border-box; padding: 1px 0; font-size: 11.5px; }
ol.psteps .pstep.st-done .pstep-t { color: var(--muted); }
ol.psteps .pstep.st-skipped .pstep-t { color: var(--muted); text-decoration: line-through; }
ol.psteps .pstep { position: relative; }
ol.psteps .pstep.added::before, ol.psteps .pstep.changed::before { content: ""; position: absolute; left: -8px; top: 1px; bottom: 1px; width: 2px; border-radius: 1px; }
ol.psteps .pstep.added::before { background: var(--accent); }
ol.psteps .pstep.changed::before { background: var(--warn); }
.pstep-gone { margin-top: 4px; }
.pstep-gone s { color: var(--muted); }
.swait { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 2px; }
.swait .late { color: var(--warn); }
.stage.st-done .stitle, .stage.st-skipped .stitle { color: var(--muted); }
.plan .removed { margin-top: 6px; }
.planbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 12px; border-top: 1px solid var(--line);
  background: var(--soft); font-size: 14px; }
.planbar .pb-toggle { text-align: left; color: var(--fg); min-width: 0; }
.planbar ol.stages.mini { flex-basis: 100%; gap: 3px; margin: 2px 0 4px; }
.planbar ol.stages.mini .stage { border: 0; padding: 2px 0; background: transparent; }
.planbar ol.stages.mini .badge { margin-left: 6px; }
/* 建议 (DEC-13) */
.suggest-note { width: 100%; margin: 6px 0; }

/* voice input (PAGE-23): a microphone inside the field's corner; red and pulsing while it listens */
.micwrap { position: relative; min-width: 0; }
.composer .crow .micwrap { flex: 1; }
.micwrap.has-mic > textarea, .micwrap.has-mic > input { padding-right: 42px; }
.micwrap > .mic { position: absolute; right: 5px; bottom: 5px; width: 30px; height: 30px; padding: 0; display: grid;
  place-items: center; border-radius: 50%; color: var(--muted); background: transparent; border-color: transparent; }
.micwrap > input + .mic { bottom: auto; top: 50%; transform: translateY(-50%); }
.micwrap > .mic:hover:not(:disabled) { color: var(--accent); border-color: transparent; background: var(--accent-soft); }
.micwrap > .mic.rec { color: #fff; background: var(--bad); border-color: var(--bad); animation: micpulse 1.3s ease-in-out infinite; }
.micwrap > .mic.wait { opacity: .6; }
.mic-state { position: absolute; right: 42px; bottom: 9px; font-size: 12px; color: var(--bad); pointer-events: none; }
.mic-state:empty { display: none; }
.mic-err { font-size: 12.5px; color: var(--bad); margin-top: 3px; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(155, 44, 44, .45); } 50% { box-shadow: 0 0 0 7px rgba(155, 44, 44, 0); } }
@media (prefers-reduced-motion: reduce) { .micwrap > .mic.rec { animation: none; } }
@media (max-width: 760px) { .micwrap > .mic { width: 36px; height: 36px; right: 3px; bottom: 3px; } .micwrap.has-mic > textarea, .micwrap.has-mic > input { padding-right: 46px; } }
.q > .micwrap { margin-top: 2px; }

/* 2026-10-15 UI & interaction optimizations (PAGE-11, PAGE-12, PAGE-19, MAT-2, MAT-4) */
[id^="m-"], .q[id^="q-"] { scroll-margin-top: 14px; }
pre { position: relative; }
.code-copy { position: absolute; top: 6px; right: 6px; padding: 2px 8px; font-size: 11.5px; line-height: 1.4;
  border-radius: 5px; background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  opacity: 0; transition: opacity .15s; z-index: 1; min-height: 0; }
pre:hover .code-copy, .code-copy:focus-visible, .code-copy.copied { opacity: 1; }
.code-copy.copied { color: var(--ok); border-color: var(--ok); }
@media (pointer: coarse) { .code-copy { opacity: .88; min-height: 28px; padding: 3px 8px; } }

.body table th:first-child, .body table td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.tbl table th:first-child { left: 0; z-index: 2; }
.tbl table td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; }
.tbl tr.picked td:first-child { background: var(--accent-soft); }

.badge.draft-pill { background: var(--warn-soft); color: var(--warn); border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent); }
.q-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: 8px;
  background: var(--soft); border-radius: 6px; font-size: 12.5px; }
.q-summary .q-stat { color: var(--muted); margin-right: 2px; font-weight: 550; }
.q-pill { padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.4; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); cursor: pointer; min-height: 0; }
.q-pill.done { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.q-pill:hover { border-color: var(--accent); color: var(--fg); }
.annot-editor { display: grid; gap: 6px; padding: 8px 10px; background: var(--soft); border: 1px solid var(--accent);
  border-radius: 6px; margin-bottom: 6px; }
.annot-editor .where { font-size: 12.5px; color: var(--muted); font-weight: 550; }

.need { border-left: 3px solid var(--warn); transition: background .15s, box-shadow .15s; }
.need.need-ack { background: var(--accent-soft); border-left-color: var(--accent); }
.need.fyi { background: var(--soft); border-left-color: var(--line); }
.need.on { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* the left column folded away (#5701): a narrow rail stays on the left with Alice's dot at its foot; in a workspace or member tab there is no rail */
.app.side-collapsed:not(.list-only) { grid-template-columns: 42px minmax(0, 1fr); }
.app.with-asks.side-collapsed:not(.list-only) { grid-template-columns: 42px minmax(0, 1fr) var(--asks-w, 480px); }
.app.side-collapsed > .side-slot > :not(.side-rail-asst) { display: none; }
.side-rail-asst { display: none; margin-top: auto; padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); justify-content: center; align-items: center; }
.app.side-collapsed > .side-slot > .side-rail-asst:not([hidden]) { display: flex; }
#wshost .app.side-collapsed:not(.list-only):not(.sections-first), .team-host .app.side-collapsed:not(.list-only):not(.sections-first) { grid-template-columns: minmax(0, 1fr); }
#wshost .app.with-asks.side-collapsed:not(.list-only):not(.sections-first), .team-host .app.with-asks.side-collapsed:not(.list-only):not(.sections-first) { grid-template-columns: minmax(0, 1fr) var(--asks-w, 480px); }
#wshost .app.sections-first.side-collapsed, .team-host .app.sections-first.side-collapsed { grid-template-columns: 0 minmax(0, 1fr) var(--section-right-w, 40%); }
#wshost .app.side-collapsed > .side-slot, .team-host .app.side-collapsed > .side-slot { display: none; }
.side-toggle { padding: 2px 7px !important; font-size: 13px; color: var(--muted); border-color: transparent; background: transparent; min-height: 0; }
.side-toggle:hover { background: var(--soft); border-color: var(--line); color: var(--fg); }
@media (max-width: 760px) { .side-toggle { display: none !important; } }
.chead2 .back { position: relative; }
.chead2 .back .back-cnt { font-size: 11px; line-height: 1.4; min-width: 16px; padding: 0 5px; border-radius: 999px;
  background: var(--warn); color: var(--panel); margin-left: 2px; font-weight: 600; }

.tl .msgcard > .chead { position: sticky; top: -1px; z-index: 2; background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 4px 0 6px; margin: -4px 0 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.pane { position: relative; }
.jump-bottom { position: absolute; right: 22px; bottom: 72px; z-index: 6; border-radius: 999px; padding: 5px 14px;
  font-size: 13px; background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .14); display: inline-flex; align-items: center; gap: 6px; min-height: 0; }
.jump-bottom.has-new { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jump-bottom.has-new { color: #10151b; } }
:root[data-theme="dark"] .jump-bottom.has-new { color: #10151b; }

.asks-tabs { display: inline-flex; gap: 2px; background: var(--soft); padding: 2px; border-radius: 7px; }
.asks-tabs button { border: 0; background: transparent; padding: 2px 9px; font-size: 13px; border-radius: 5px;
  color: var(--muted); min-height: 0; display: inline-flex; align-items: center; gap: 4px; }
.asks-tabs button { white-space: nowrap; }
.asks-head { flex-wrap: wrap; row-gap: 2px; }
.asks-head .spacer { flex: 1 1 0; }
.asks-tabs button.on { background: var(--panel); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.asks-tabs .cnt { font-size: 11px; min-width: 15px; padding: 0 4px; border-radius: 999px; background: var(--warn);
  color: var(--panel); display: inline-block; text-align: center; }

.lightbox { flex-direction: column; gap: 10px; padding: 16px 16px 76px; }
.lightbox.full { padding-bottom: 84px; }
.lightbox .lb-stage { display: flex; gap: 10px; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; min-height: 0; flex: 1; }
.lightbox.full .lb-stage { max-width: none; max-height: none; }
.lightbox .lb-stage.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; height: 100%; align-items: center; }
.lightbox .lb-stage.compare .lb-pane { display: flex; flex-direction: column; align-items: center; max-height: 100%; min-height: 0; gap: 4px; }
.lightbox .lb-stage.compare .lb-pane-label { color: #fff; font-size: 12.5px; background: rgba(0, 0, 0, .6); padding: 1px 9px; border-radius: 999px; }
.lightbox .lb-stage.compare img { max-width: 100%; max-height: calc(100dvh - 130px); object-fit: contain; }
.lightbox .lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 24px; line-height: 42px; padding: 0; cursor: pointer; z-index: 52; }
.lightbox .lb-nav:hover { background: rgba(0, 0, 0, .78); }
.lightbox .lb-nav.prev { left: 12px; }
.lightbox .lb-nav.next { right: 12px; }
.lightbox .lb-bar { position: fixed; left: 12px; right: 12px; bottom: 10px; max-width: 920px; margin: 0 auto;
  background: rgba(24, 23, 20, .88); color: #f5f3ee; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px;
  padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; cursor: default; z-index: 52;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13px; }
.lightbox .lb-bar .lb-cap { flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox .lb-bar button { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .24);
  padding: 3px 10px; font-size: 12.5px; min-height: 0; }
.lightbox .lb-bar button.on { background: var(--accent); border-color: var(--accent); }
.lightbox .lb-bar input { flex: 1 1 200px; max-width: 340px; background: rgba(0, 0, 0, .45); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); padding: 4px 9px; font-size: 13px; border-radius: 6px; }
@media (max-width: 760px) {
  .lightbox .lb-stage.compare { grid-template-columns: 1fr; overflow-y: auto; }
  .lightbox .lb-nav { top: auto; bottom: 68px; transform: none; }
}


/* 「分析」栏 (PAGE-26) */
.ana-sec { font-weight: 600; margin: 14px 0 4px; }
.ana-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ana-more { margin-top: 4px; }
/* documents, rounds and other facts folded at the foot of the analysis column (#1590) */
.ana-foot { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.ana-study { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 3px 0; }
.ana-studyrow { border-bottom: 1px solid var(--line); }
.ana-study.clickable { cursor: pointer; }
.ana-study .caret { width: 1em; color: var(--muted); flex: none; }
.ana-study-detail { margin: 2px 0 8px 14px; padding-left: 10px; border-left: 2px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.ana-study-detail[hidden] { display: none; }
.ana-concl { font-size: 13.5px; overflow-wrap: anywhere; min-width: 0; overflow-x: auto; }
.ana-studyrow { min-width: 0; }
.ana-sfig { margin: 0; display: grid; gap: 2px; }
.ana-sfig img { max-width: 100%; max-height: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: zoom-in; justify-self: start; }
.ana-doc, .ana-hist { border-bottom: 1px solid var(--line); padding: 3px 0; min-width: 0; }
.ana-doc > summary, .ana-hist > summary { cursor: pointer; overflow-wrap: anywhere; }
.ana-hnote { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.ana-hist-detail { margin: 4px 0 8px 14px; padding-left: 10px; border-left: 2px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.ana-hres { overflow-wrap: anywhere; }
.rcard-uses { display: grid; gap: 2px; margin-top: 4px; overflow-wrap: anywhere; }
.rnd-carry { display: grid; gap: 3px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.ana-sub { font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }
.rnd-card { display: grid; gap: 6px; border-left: 3px solid var(--accent); margin: 8px 0; }
.rnd-card .banner { margin: 2px 0; }
.rnd-blockers { margin: 4px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
.rnd-text { overflow-wrap: anywhere; white-space: pre-wrap; border-left: 2px solid var(--line); padding-left: 8px; margin: 3px 0; }
.rnd-comment { display: grid; gap: 4px; }
.rcard { cursor: default; margin-bottom: 6px; }
.rcard .ask-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; }
.rcard-head { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.rcard-sum { min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
/* a thumbnail in a link (a PDF's first page, a PNG that opens its PDF) keeps its size beside the summary */
.rcard-head > .rpdf-link { flex: none; }
.rcard-title { overflow-wrap: anywhere; flex-basis: 100%; }
.rcard-title-line, .para-title { margin-bottom: 2px; overflow-wrap: anywhere; line-height: 1.4; }
.para-meta { margin-bottom: 2px; }
.ana-thumb { width: 72px; height: 54px; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: zoom-in; flex: none; }
.ana-fig { max-width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #fff; display: block; margin: 6px 0; cursor: zoom-in; }
/* a PDF's first page, drawn into a picture when it comes near the screen (#1612); a box holds its place until then */
img.rpdf { display: block; max-width: 100%; height: auto; background: #fff; cursor: zoom-in; }
img.rpdf:not([src]) { width: 100%; aspect-ratio: 4 / 3; background: var(--soft); }
img.rpdf.ana-thumb { height: 54px; width: auto; }
img.rpdf.ana-thumb:not([src]) { width: 72px; aspect-ratio: auto; }
img.rpdf.rpdf-bad { aspect-ratio: auto; height: auto; padding: 8px; font-size: 12px; color: var(--muted); }
.rcard .rcard-detail { display: none; gap: 6px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.rcard.open .rcard-detail { display: grid; }
.rcard-cap { overflow-wrap: anywhere; }
.rcard-comment { display: grid; gap: 4px; }

/* 结果块 (PAGE-28) */
.bcard { cursor: default; margin-bottom: 8px; min-width: 0; max-width: 100%; overflow: hidden; }
.bcard .ask-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; }
.bcard .bconc { overflow-wrap: anywhere; white-space: pre-wrap; font-size: 13.8px; line-height: 1.55; }
/* Section words drawn as Markdown, wherever they show (PAGE-31, decision 898) */
.bconc.sec-md { white-space: normal; overflow-wrap: anywhere; font-size: 13.8px; line-height: 1.55;
  background: none; border: 0; border-radius: 0; padding: 0; }      /* reads like the plain text beside it, not a message box (.body) */
.bconc.sec-md p { margin: 4px 0; }
.bconc.sec-md > :first-child { margin-top: 0; }
.bconc.sec-md > :last-child { margin-bottom: 0; }
.bconc.sec-md ul, .bconc.sec-md ol { margin: 4px 0; padding-left: 20px; }
.bconc.sec-md li { margin: 2px 0; }
.bconc.sec-md h1, .bconc.sec-md h2, .bconc.sec-md h3, .bconc.sec-md h4 { font-size: 14px; margin: 8px 0 4px; }
.bconc.sec-md blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid var(--line); color: var(--muted); }
.bconc.sec-md table { border-collapse: collapse; margin: 6px 0; font-size: 13px; display: block; max-width: 100%; overflow-x: auto; }
.bconc.sec-md th, .bconc.sec-md td { border: 1px solid var(--line); padding: 3px 8px; text-align: left; white-space: normal; overflow-wrap: break-word; min-width: 6em; }
.bconc.sec-md table th:first-child, .bconc.sec-md table td:first-child { position: static; background: none; }
.bconc.sec-md th .katex, .bconc.sec-md td .katex { white-space: nowrap; }
.bconc.sec-md .katex-display { margin: 6px 0; overflow-x: auto; overflow-y: hidden; }
.md-inline code { font-family: var(--mono); font-size: .92em; background: var(--soft); padding: 0 3px; border-radius: 4px; }
.md-inline .katex { font-size: 1.05em; }
.md-inline .katex-display { display: inline; margin: 0; }
.md-inline .katex-display > .katex { display: inline; }
.bthumbs { display: flex; gap: 6px; flex: none; }
.bcard.open > .rcard-head > .bthumbs { display: none; }
.bdetail { display: none; gap: 10px; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.bcard.open .bdetail { display: grid; }
.bpart { border-top: 1px solid var(--line); padding-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.bpart > .ana-top { display: flex; align-items: center; gap: 5px 8px; flex-wrap: wrap; min-width: 0; }
.bpart .ana-fig { max-width: 100%; }
/* the figures of one result (#1636): one at most half the column; several side by side, sliding left and right */
.fig-one, .fig-wrap { min-width: 0; max-width: 100%; display: grid; gap: 2px; margin: 4px 0; }
.fig-one > * { display: block; max-width: 50%; min-width: 0; }
.fig-strip { display: flex; align-items: flex-start; gap: 8px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 6px; }
.fig-strip > * { display: block; flex: 0 0 calc(50% - 4px); min-width: 0; scroll-snap-align: start; }
.fig-one .ana-fig, .fig-strip .ana-fig { width: 100%; margin: 0; }
.fig-one > .ana-fig { max-width: 50%; }            /* a bare image, not inside a PDF link: beats .bpart .ana-fig */
.btable { min-width: 0; max-width: 100%; }
.btable-scroll { overflow: auto; max-width: 100%; max-height: 340px; border: 1px solid var(--line); border-radius: 6px;
  overscroll-behavior: contain; background: var(--panel); scrollbar-width: thin; }
.btable-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
.btable-scroll::-webkit-scrollbar-track { background: var(--soft); border-radius: 4px; }
.btable-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 4px; }
.btable-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.btable table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: auto; min-width: 100%; }   /* all nowrap: as wide as its content; long cells wrap to fit (#6534) */
.btable th, .btable td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 3px 8px; text-align: left; white-space: nowrap; }
.btable tr > :last-child { border-right: 0; }
.btable tbody > tr:last-child > * { border-bottom: 0; }
.btable th { background: var(--soft); }
.btable thead th { position: sticky; top: 0; z-index: 2; background: var(--soft); font-weight: 600; }
.btable tbody tr:hover td { background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel)); }
/* a value in JSON drawn as tables (PAGE-28, #1569) */
.vview, .vgroup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; max-width: 100%; }
.vtab { min-width: 0; max-width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.vt-title { font-weight: 600; margin: 2px 0; overflow-wrap: anywhere; }
.vt-note, .vt-list { white-space: pre-wrap; overflow-wrap: anywhere; }
.btable .vtable th.k { font-weight: 500; position: sticky; left: 0; z-index: 1; background: var(--soft); }
.btable .vtable thead th.k { z-index: 3; font-weight: 600; }
.btable .vtable td.num { font-variant-numeric: tabular-nums; text-align: right; }
.btable .vtable.kv td.num { text-align: left; }
.btable .long { white-space: normal; }
.btable .cellwrap { white-space: normal; overflow-wrap: anywhere; min-width: 12em; max-width: 32em; }
.vt-json summary { cursor: pointer; }
.vt-json pre { margin: 2px 0; max-height: 320px; overflow: auto; white-space: pre; }
.bask { margin: 8px 0; }
.bask textarea { width: 100%; font: inherit; font-size: 13.5px; }
.bask-form[hidden] { display: none; }

/* Section 的段和往来 (DEC-15) */
.bnow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; padding: 6px 8px; background: var(--soft); border-radius: 6px; min-width: 0; }
.bnow-h { flex-basis: 100%; font-weight: 600; font-size: 13px; }   /* its own line, so the chips below start level (#1604) */
.bnow-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; font: inherit; font-size: 13px; padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--fg); cursor: pointer; }
.bnow-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22em; min-width: 0; }
/* the Section tree (PAGE-28): one line per Section, opened one level at a time */
.sec { min-width: 0; max-width: 100%; }
.sec-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin-bottom: 6px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; }
.sec-row:hover { border-color: var(--accent); }
.sec-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sec-caret { flex: none; width: 1em; color: var(--muted); transition: transform .15s; line-height: 1.4; }
.sec.open > .sec-row .sec-caret { transform: rotate(90deg); }
.sec-main { flex: 1; min-width: 0; }
.sec-title { font-size: 15px; overflow-wrap: anywhere; line-height: 1.38; }
.sec.sub .sec-title { font-size: 14px; }
.sec-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; margin-top: 1px; }
.sec-path { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.sec-purpose { margin-top: 2px; overflow-wrap: anywhere; }
.sec-side { flex: none; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 40%; text-align: right; }
.sec-body { display: none; margin: 0 0 10px 12px; padding-left: 10px; border-left: 2px solid var(--line); min-width: 0; max-width: 100%; }
.sec.open > .sec-body { display: block; }
.sec-note { margin: 2px 0 8px; }
.sec-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
/* Sections apart (#1580): a top-level Section a block of its own with a bar on its left; opened, it and the levels
   below it one group on a tinted ground */
.sec:not(.sub) { margin-bottom: 12px; }
.sec:not(.sub) > .sec-row { border-left: 4px solid var(--accent); margin-bottom: 0; }
.sec.open:not(.sub) { border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); padding: 6px; }
.sec.open:not(.sub) > .sec-row { margin-bottom: 8px; }
.sec.open:not(.sub) > .sec-body { margin-bottom: 2px; }
.sec.sub > .sec-row { border-left: 3px solid var(--line); }
.sec.sub.open > .sec-row { border-left-color: var(--muted); }
/* 「在做」 above the tree (#1580) */
.sec-now { margin: 4px 0 10px; padding: 6px 8px 0; border: 1px dashed var(--accent); border-radius: var(--radius); }
.sec-now-h { font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.sec-now .sec { margin-bottom: 6px; }
.sec-now .sec.open { background: transparent; border: 0; padding: 0; }
.bcard .bless, .bcard.open .bmore { display: none; }
.bcard.open .bless { display: inline; }
.bcard .bmore, .bcard .bless { margin-left: auto; }
/* a long 「意见针对」 choice must not widen the column */
.bcard .rcard-comment { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.bcard .rcard-comment select { max-width: 100%; }
.bdoing { color: var(--ok); font-size: 12.5px; }
.bpurpose { overflow-wrap: anywhere; }
/* 讨论 on a Section's title line (decision 831); the English name copies `@名字` (decision 833) */
.sec-side-top { max-width: 100%; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 6px; }
.sec-talk { font-size: 12.5px; padding: 2px 10px; white-space: nowrap; }
/* a Section's plan (decisions 847, 848) on its title line and in its talk */
.sec-plan { font-size: 12px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--muted); white-space: nowrap; cursor: pointer; line-height: 1.4; }
span.sec-plan { cursor: default; }
.sec-plan:hover { border-color: var(--accent); color: var(--fg); }
.sec-plan.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sec-plan.you { border-color: var(--accent); color: var(--accent); }
.sec-plan.ok { color: var(--ok); border-color: currentColor; }
.secchat-purpose { margin-top: 4px; padding: 5px 10px; border-left: 2px solid var(--accent); background: var(--panel); border-radius: 0 6px 6px 0; line-height: 1.45; }
.secchat-plan { margin-top: 4px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.secchat-plan-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.secchat-plan-t { font-weight: 600; min-width: 0; }
.secchat-stages { margin: 3px 0 0; padding-left: 20px; display: grid; gap: 1px; max-height: 8.5em; overflow-y: auto; }
.secchat-st { display: inline-block; min-width: 2.6em; margin-right: 6px; color: var(--muted); }
.secchat-st.doing { color: var(--accent); font-weight: 600; }
.secchat-st.ok { color: var(--ok); }
.secchat-paras { margin-top: 4px; max-height: 220px; overflow-y: auto; display: grid; gap: 6px; padding: 4px 0; }
.sec-talk.you { border-color: var(--accent); color: var(--accent); }
.sec-talk.on { background: var(--accent-soft); border-color: var(--accent); }
.sec-path { cursor: copy; position: relative; }
.sec-path:hover { color: var(--accent); }
.res-ref { padding: 1px 6px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); }
.res-ref:hover { border-color: var(--accent); }
.sec-path.copied::after { content: attr(data-tip); position: absolute; left: calc(100% + 6px); top: -1px; white-space: nowrap; pointer-events: none; z-index: 10;
  font-family: system-ui, -apple-system, sans-serif; font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: #fff; }
/* 「对话」 and one Section's talk side by side (#1739, decision 832) */
.ctabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--panel); min-width: 0; flex: none; }
.ctabs[hidden] { display: none; }
.ctab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px; font-size: 13px; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; min-width: 0; max-width: 70%; user-select: none; }
.ctab:hover { color: var(--fg); }
.ctab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.ctab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ctab-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ctab-n { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.ctab-x { border: 0; background: transparent; color: var(--muted); padding: 0 2px; font-size: 15px; line-height: 1; cursor: pointer; }
.ctab-x:hover { color: var(--fg); }
.secchat { display: none; }
.pane.sec-on > .secchat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pane.sec-on > .scroller, .pane.sec-on > .composer, .pane.sec-on > .jump-bottom { display: none; }
.secchat-box { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.secchat-head { padding: 5px 16px; border-bottom: 1px solid var(--line); flex: none; background: color-mix(in srgb, var(--panel) 50%, var(--bg)); }
.secchat-hin { max-width: 860px; margin: 0 auto; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.secchat-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.secchat-title { font-size: 13.5px; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secchat-submeta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secchat-links { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 100%; }
.secchat-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secchat-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.secchat-in { max-width: 860px; margin: 0 auto; padding: 10px 18px 16px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.secchat-write { border-top: 1px solid var(--line); background: var(--panel); padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); flex: none; }
.secchat-w { max-width: 860px; margin: 0 auto; display: grid; gap: 3px; grid-template-columns: minmax(0, 1fr); }
.secchat-w .actions { margin: 0; }
.secchat-w .msgline:empty, .pending-files:empty, .secchat-target:empty, .secchat-foot:empty { display: none; }
.secchat-target { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.askfields-inline { gap: 4px; }
.askfields-inline .crow { display: flex; gap: 8px; align-items: flex-end; }
.askfields-inline .crow .micwrap { flex: 1; min-width: 0; }
.askfields-inline .crow textarea { min-height: 36px; max-height: 160px; resize: none; line-height: 1.4; padding: 7px 10px; }
.askfields-inline .crow button.icon { width: 36px; height: 36px; padding: 0; font-size: 19px; line-height: 1; flex: none; color: var(--muted); }
.askfields-inline .crow button.primary { height: 36px; flex: none; }
.secchat-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.secchat-foot:not(:has(*:not(:empty))) { display: none; }
.badge.block { background: var(--accent-soft); color: var(--accent); }
.bdoing-line { padding: 2px 14px 4px; overflow-wrap: anywhere; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bnow-chip { background: transparent; } }
:root[data-theme="dark"] .bnow-chip { background: transparent; }
/* searchable single-line multi-select dropdown for collaborator permissions (#1715, #1727) */
.combo-wrap { position: relative; min-width: 0; }
.combo-box { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 38px; padding: 4px 30px 4px 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); cursor: text; position: relative; }
.combo-box:focus-within, .combo-wrap.open .combo-box { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.combo-tags { display: contents; }
.combo-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12.5px; line-height: 1.35;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; max-width: 100%; }
.combo-tag-x { border: 0; background: transparent; color: inherit; padding: 0 2px; font-size: 13px; line-height: 1; cursor: pointer; opacity: .75; }
.combo-tag-x:hover { opacity: 1; }
.combo-box input.combo-input { flex: 1 1 140px; min-width: 100px; width: auto !important; border: 0 !important; background: transparent !important;
  padding: 2px 4px !important; font-size: 13.5px; box-shadow: none !important; outline: none !important; }
.combo-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px;
  border: 0; background: transparent; padding: 4px; cursor: pointer; line-height: 1; }
.combo-menu { margin-top: 4px; max-height: 220px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,.12);
  padding: 5px; display: grid; gap: 2px; overscroll-behavior: contain; }
.combo-menu[hidden] { display: none !important; }
.combo-opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 5px; font-size: 13.5px;
  background: var(--panel); cursor: pointer; user-select: none; min-width: 0; }
.combo-opt:hover, .combo-opt.active { background: var(--soft); }
.combo-opt.picked { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.combo-opt-check { width: 16px; flex: 0 0 16px; text-align: center; font-size: 13px; color: var(--accent); }
.combo-opt-main { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-opt-sub { flex: 1 1 auto; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: right; }
.combo-empty { padding: 8px 10px; color: var(--muted); font-size: 12.5px; background: var(--panel); }
/* contain absolute descendants (.katex-mathml, .seg input) inside scroll containers so they never overflow .pane (#1746) */
.katex, .seg label, .scroller, .tl, .asks-in, .secchat-list, .side-scroll { position: relative; }
.app:not(.list-only) { grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.pane { overflow: hidden; }
/* per-agent notepad cards in right drawer (#1767, #1894, decisions 842, 843) */
.note-compose { display: grid; gap: 6px; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); cursor: text; transition: border-color .15s, background-color .15s; }
.note-compose:focus-within { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); background: var(--panel); }
.note-compose-foot { padding-top: 4px; border-top: 1px dashed color-mix(in srgb, var(--line) 75%, transparent); }
.note-inline-ta, .note-inline-ta:focus, .note-inline-ta:focus-visible {
  width: 100%; border: 0 !important; outline: none !important; box-shadow: none !important;
  background: transparent !important; padding: 0 !important; margin: 0; border-radius: 0;
  font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--fg);
  min-height: 22px; resize: none; overflow: hidden; display: block;
}
.note-compose .micwrap.has-mic > .note-inline-ta, .note-card .micwrap.has-mic > .note-inline-ta { padding-right: 32px !important; }
.note-compose .micwrap > .mic, .note-card .micwrap > .mic { right: -2px; bottom: -3px; width: 26px; height: 26px; }
.note-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; background: var(--bg); display: grid; gap: 6px; min-width: 0; transition: border-color .15s, background-color .15s; }
.note-card.editing { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); background: var(--panel); }
.note-card.pinned { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: inset 3px 0 0 var(--accent); }
.note-card.done { opacity: .68; }
.note-card.done .note-body { text-decoration: line-through; text-decoration-color: var(--muted); }
.note-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.note-head input[type=checkbox] { width: 15px; height: 15px; margin: 0; cursor: pointer; }
.note-head .spacer { flex: 1 1 0; }
.note-acts { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; opacity: .75; transition: opacity .15s; }
.note-card:hover .note-acts, .note-card.editing .note-acts { opacity: 1; }
.note-body { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; min-width: 0; cursor: text; }
.note-body > :first-child { margin-top: 0; }
.note-body > :last-child { margin-bottom: 0; }
.asks-btn .cnt.notes-cnt { background: var(--accent); }

/* 1. Timeline items are windowed in JS (LAST_TURNS); avoid content-visibility: auto DisplayLock crashes (#2387, #2531) */

/* 2. Resizable left sidebar and right drawer presets (#1800, decision 851) */
@media (min-width: 901px) {
  .app:not(.list-only) { grid-template-columns: var(--side-w, 275px) minmax(0, 1fr); }
  .app.with-asks:not(.list-only) { grid-template-columns: var(--side-w, 275px) minmax(0, 1fr) var(--asks-w, 480px); }
  /* the left column folded away (#5701): the narrow rail stays on the left, except in a workspace or member tab */
  .app.side-collapsed:not(.list-only):not(.sections-first) { grid-template-columns: 42px minmax(0, 1fr); }
  .app.with-asks.side-collapsed:not(.list-only):not(.sections-first) { grid-template-columns: 42px minmax(0, 1fr) var(--asks-w, 480px); }
}
.side-slot { position: relative; }
.side-grip { position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 4; touch-action: none; }
.side-grip:hover, .app.dragging-side .side-grip { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.app.dragging-side { user-select: none; cursor: col-resize; }
@media (max-width: 900px) { .side-grip { display: none; } }
.drawer-widths { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.drawer-widths button { padding: 1px 7px; font-size: 11.5px; border-radius: 5px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); cursor: pointer; }
.drawer-widths button:hover { border-color: var(--accent); color: var(--accent); }

/* 3. ⌘K Global Quick Switcher (#1800, decision 851) */
.cmdk-trigger { padding: 3px 9px; font-size: 12.5px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted); cursor: pointer; white-space: nowrap; }
.cmdk-trigger:hover { border-color: var(--accent); color: var(--accent); }
.cmdk-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .38); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 14px 20px; }
.cmdk-backdrop[hidden] { display: none !important; }
.cmdk-modal { width: 100%; max-width: 580px; background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 12px 38px rgba(0, 0, 0, .28); overflow: hidden; display: flex; flex-direction: column; max-height: 74vh; }
.cmdk-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cmdk-input { flex: 1; border: 0 !important; background: transparent !important; font-size: 15px !important; padding: 2px 0 !important; outline: none !important; box-shadow: none !important; }
.cmdk-list { overflow-y: auto; padding: 6px; display: grid; gap: 2px; overscroll-behavior: contain; }
.cmdk-group { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 6px 10px 2px; }
.cmdk-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; min-width: 0; font-size: 13.5px; }
.cmdk-item:hover, .cmdk-item.active { background: var(--accent-soft); color: var(--accent); }
.cmdk-item .cmdk-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cmdk-item .cmdk-sub { flex: 0 1 45%; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

/* 4. In-conversation keyword & card filter bar (#1800, decision 851) */
.conv-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 13px; }
.conv-filter-bar[hidden] { display: none !important; }
.conv-filter-input { flex: 1 1 180px; max-width: 340px; padding: 4px 9px !important; font-size: 13px !important; border-radius: 6px; }

/* 5. Collaborator badges, audit log, and read-only share links (#1800, decision 852) */
.collab-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; margin-right: 6px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--warn-soft); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); vertical-align: baseline; }
.collab-forward-btn { margin-left: 6px; font-size: 12px; color: var(--accent); cursor: pointer; }
.collab-audit-box { margin-top: 6px; padding: 6px 10px; background: var(--soft); border-radius: 6px; font-size: 12.5px; display: grid; gap: 4px; }
.collab-audit-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.collab-audit-row .act-snippet { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.share-inline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.share-pub-banner { margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
/* Slides (PAGE-29): the decks as Section-like rows; a page at 16:9 with its type scaled to its width */
.sl-deck.given > .sec-row { border-left-color: var(--line); }
.sl-deck > .sec-body { margin-left: 0; padding-left: 0; border-left: 0; }
.sl-pwrap { margin: 0 0 16px; min-width: 0; }
.sl-pwrap.flash .sl-page { outline: 2px solid var(--accent); outline-offset: 2px; }
.sl-page { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); overflow: hidden; }
.sl-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 3.2cqw 4cqw 3cqw; font-size: 2.3cqw; line-height: 1.35; overflow: hidden; }
.sl-in .body { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; overflow: visible; font-size: inherit; line-height: inherit; }
.sl-in .body p { margin: 0; }
.sl-in .body p + p { margin-top: .5em; }
.sl-title { flex: none; font-size: 3.6cqw; font-weight: 650; margin-bottom: 1.8cqw; padding-bottom: 1cqw; border-bottom: .25cqw solid var(--accent); }
.sl-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.4cqw; }
.sl-body.sl-columns { display: grid; gap: 2.4cqw; align-items: start; }
.sl-body.sl-center { justify-content: center; align-items: center; text-align: center; }
.sl-col { min-width: 0; display: flex; flex-direction: column; gap: 1.4cqw; }
.sl-items ul, .sl-items ol { margin: 0; padding-left: 1.3em; }
.sl-items li { margin: .35em 0; }
.sl-items li > ul, .sl-items li > ol { margin-top: .2em; font-size: .9em; }
.sl-formula { text-align: center; overflow-x: auto; overflow-y: hidden; }
.sl-formula .katex-display { margin: .3em 0; }
.sl-table table { border-collapse: collapse; margin: 0 auto; font-size: .9em; }
.sl-table th, .sl-table td { border: 1px solid var(--line); padding: .25em .7em; text-align: center; }
.sl-table th { background: var(--soft); }
.sl-figs { display: grid; gap: 1.2cqw; align-items: start; }
.sl-fig { margin: 0; min-width: 0; text-align: center; }
.sl-fig img { display: block; width: 100%; height: auto; max-height: 34cqw; object-fit: contain; cursor: zoom-in; background: #fff; border-radius: 2px; }
.sl-fig.stale img { outline: 2px dashed var(--warn); }
.sl-fig figcaption { font-size: max(10.5px, .8em); color: var(--muted); margin-top: .3em; }
.sl-figmiss { padding: 2cqw 1cqw; border: 1px dashed var(--line); border-radius: 4px; color: var(--muted); font-size: .8em; }
.sl-n { position: absolute; right: 2cqw; bottom: 1.2cqw; font-size: max(9px, 1.6cqw); color: var(--muted); }
.sl-page.over::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5cqw; background: linear-gradient(transparent, var(--warn-soft)); pointer-events: none; }
.sl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; min-width: 0; }
.sl-name { cursor: copy; position: relative; color: var(--muted); font-size: 12px; }
.sl-name:hover { color: var(--accent); }
.sl-name.copied::after { content: attr(data-tip); position: absolute; left: calc(100% + 6px); top: -1px; white-space: nowrap; pointer-events: none;
  font-family: system-ui, -apple-system, sans-serif; font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: #fff; }
.sl-deck-row .sec-path.copied::after { left: auto; right: 0; top: calc(100% + 2px); }
.sl-meta .sl-name.copied::after { left: 0; top: auto; bottom: calc(100% + 3px); }   /* above: the Sections follow it */
.sl-sec { font-size: 12px; }
.sl-over-note { display: none; color: var(--warn); }
.sl-pwrap:has(.sl-page.over) .sl-over-note { display: inline; }
.sl-prob { margin-top: 3px; }
.sec-uses { margin-top: 2px; }
.sec-uses .linklike { font-size: inherit; }

/* 引用回复 (PAGE-30): the quotes over a box, the small cards over a sent line, the right-click menu */
.qbar { display: grid; gap: 4px; margin: 0 0 6px; }
.qbar-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px 5px 10px; border-left: 3px solid var(--accent);
  background: var(--soft); border-radius: 0 var(--radius) var(--radius) 0; }
.qbar-main { flex: 1; min-width: 0; }
.qbar-who, .qcard-who { font-size: 12px; color: var(--muted); }
.qbar-text, .qcard-text { font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; }
.qbar-text { -webkit-line-clamp: 2; }
.qcard-text { -webkit-line-clamp: 3; color: color-mix(in srgb, var(--fg) 78%, var(--muted)); }
.qbar-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 1px 5px; border-radius: 4px; }
.qbar-x:hover { color: var(--fg); background: var(--line); }
.qcard { margin: 2px 0 8px; padding: 5px 10px; border-left: 3px solid var(--accent); background: var(--panel);
  border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; }
.qcard + .qcard { margin-top: -2px; }
.qcard:hover { background: color-mix(in srgb, var(--panel) 80%, var(--accent-soft)); }
.qcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.qcard.missing { outline: 1px dashed var(--warn); outline-offset: 1px; }
.qmenu { position: fixed; z-index: 1000; min-width: 128px; padding: 4px; display: grid; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
.qmenu-item { text-align: left; border: 0; background: none; padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 13px;
  color: var(--fg); cursor: pointer; }
.qmenu-item:hover:not([disabled]), .qmenu-item:focus-visible { background: var(--accent-soft); outline: none; }
.qmenu-item[disabled] { color: var(--muted); cursor: default; }
/* a quoted member of a Section (PAGE-31): its name and version, and 「现在 vN」 when it has a newer one */
.qcard.qres .qcard-who code { font-family: var(--mono); font-size: 11.5px; margin-left: 2px; }
.qcard.qres .qcard-who .badge { margin-left: 6px; font-size: 11px; }
.bpart.flash { border-radius: var(--radius); }
.paragraph { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.paragraph.unplaced, .unplaced-warn { border: 1px solid var(--warn); border-left-width: 3px; background: var(--warn-soft); border-radius: var(--radius); padding: 8px 10px; }
.unplaced-warn { margin-top: 6px; font-size: 13px; }
.ulead { font-size: 12px; color: var(--muted); margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* PAGE-34: Section main area and a permanent conversation column. */
.app.sections-first:not(.list-only) { grid-template-columns: var(--side-w, 275px) minmax(0, 1fr) var(--section-right-w, 40%); grid-template-rows: auto minmax(0, 1fr); }
.app.sections-first.side-collapsed { grid-template-columns: 42px minmax(0, 1fr) var(--section-right-w, 40%); }
.sections-first > .side-slot { grid-row: 1 / 3; }
.sections-first > .head-slot { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
.sections-first > .head-slot [data-pane="analysis"] { display: none; }
.section-stage, .section-right { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.section-stage { grid-column: 2; grid-row: 2; }
.section-right { grid-column: 3; grid-row: 2; border-left: 1px solid var(--line); }
.sections-first .section-stage > .asks, .sections-first .section-right > .asks { position: relative; width: auto; min-width: 0; height: auto; flex: 1; overflow: hidden; border: 0; }
.sections-first .section-stage > .asks > .asks-grip, .sections-first .section-right > .asks > .asks-grip,
.sections-first .asks-tabs, .sections-first .drawer-widths { display: none; }
.sections-first .section-stage .asks-head > button { display: none; }
.sections-first .section-right > .pane { flex: 1; }
.sections-first .section-right > .pane[hidden] { display: none; }
.sections-first .section-right > .ctabs { padding: 0 5px; overflow-x: auto; }
.sections-first .section-right > .ctabs .ctab { flex: none; }
.section-stage > .ctabs.only-plans > .ctab:not(.ctab-plans):not(.ctab-qa):not(.ctab-pending):not(.ctab-byuser) { display: none; }
.sections-first > .head-slot [data-pane="plans"], .sections-first > .head-slot [data-pane="pending"] { display: none; }
/* #7131: a card takes the column's width as in 「对话」; the list's one track would otherwise grow to the card's widest
   line (code, a table, a diff) and the whole column scroll sideways, where now that block wraps or scrolls in its card */
.pending-pane .asks-list { grid-template-columns: minmax(0, 1fr); }
.pend-item { margin: 0 0 10px; min-width: 0; }
.pend-see { margin: 2px 0 0 4px; }
.pend-item.on > .msgcard { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Section contents on the left of 「分析」 (PAGE-34): only in the Section-first layout; elsewhere the boxes dissolve */
.ana-wrap, .ana-main { display: contents; }
.ana-toc { display: none; }
.sections-first .section-stage .asks-in.ana-in { overflow: hidden; padding: 0; gap: 0; }
.sections-first .section-stage .ana-wrap { display: flex; flex: 1; min-height: 0; min-width: 0; }
.sections-first .section-stage .ana-main { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; overflow-y: auto; padding: 10px 14px 16px; }
.sections-first .section-stage .ana-toc { display: flex; flex-direction: column; flex: none; width: 220px; overflow: hidden; border-right: 1px solid var(--line); background: var(--panel); }
.sections-first .section-stage .ana-wrap.toc-off > .ana-toc { display: none; }
.toc-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 6px 16px; }
.toc-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.toc-tools button { padding: 0 6px; font-size: 12px; line-height: 20px; border-radius: 4px; color: var(--muted); }
.toc-tools button.on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.toc-caret { flex: none; width: 14px; text-align: center; font-size: 11px; color: var(--muted); cursor: pointer; user-select: none; }
.toc-caret:hover { color: var(--fg); }
.toc-row { display: flex; align-items: center; gap: 4px; cursor: pointer; width: 100%; min-width: 0; margin: 0; padding: 3px 8px; border: 0; border-left: 3px solid transparent; border-radius: 4px; background: transparent; text-align: left; font-size: 13px; line-height: 1.45; color: var(--fg); }
.toc-row:hover { background: var(--soft); }
.toc-row.on { background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; }
.toc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.toc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-para { color: var(--muted); font-size: 12.5px; }
.toc-row.on-p { background: var(--accent-soft); color: var(--fg); border-left-color: var(--accent); }
.toc-row.on-p:not(.on) { font-weight: 600; }
.toc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.toc-dot.none { background: transparent; }
.toc-dot.busy { background: var(--ok); }
.toc-dot.ask { background: var(--warn); }
.toc-dot.quiet { background: var(--muted); }
.toc-group { padding: 8px 8px 2px; font-size: 12px; color: var(--muted); }
.toc-btn { margin: 3px 0 3px auto; padding: 0 10px; font-size: 13px; line-height: 22px; color: var(--muted); border-color: transparent; background: transparent; flex: none; }
.toc-btn:hover { color: var(--fg); }
.toc-btn.on { color: var(--accent); background: var(--accent-soft); }
@media (min-width: 761px) and (max-width: 1100px) {
  .app.sections-first:not(.list-only) { grid-template-columns: 0 minmax(0, 1fr) var(--section-right-w, 40%); }
  .sections-first > .side-slot { display: none; }
}
/* 「压缩」 (PAGE-35) */
.cmp-fold > summary { cursor: pointer; color: var(--accent); }
.cmp-text { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; overflow-wrap: anywhere; }
.eventline .cmp-see { margin-left: 8px; }
/* 「计划」 (PAGE-36): the analysis plan's card, its stages one block each, the Sections a stage counts */
.pl-card { margin: 6px 0 12px; }
.pl-body > summary { cursor: pointer; color: var(--muted); margin: 4px 0; }
.pl-stage { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 8px; min-width: 0; }
.pl-stage.now { border-color: var(--accent); border-left: 4px solid var(--accent); }
.pl-stage-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; cursor: pointer; }
.pl-stage-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-stage.open > .pl-stage-h .sec-caret { transform: rotate(90deg); }
.pl-stage-n { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pl-stage-t { overflow-wrap: anywhere; }
.pl-stage.st-done .pl-stage-t, .pl-stage.st-skipped .pl-stage-t { color: var(--muted); }
.pl-stage-b { display: none; padding: 0 10px 10px 28px; min-width: 0; }
.pl-stage.open > .pl-stage-b { display: block; }
.pl-sec { margin: 6px 0 0 calc(var(--d, 0) * 16px); padding: 6px 8px; border-left: 3px solid var(--line); background: var(--soft); border-radius: 0 var(--radius) var(--radius) 0; min-width: 0; }
.pl-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.pl-sec-t { text-align: left; overflow-wrap: anywhere; font-size: 14px; }
.pl-short { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 3px; padding-left: 10px; }
.pl-short-t { overflow-wrap: anywhere; }
.pl-idle { margin-top: 8px; overflow-wrap: anywhere; }
.pl-out { margin-top: 12px; }
.pl-say { margin-top: 8px; }
.pl-plan:not(.changing) .pl-say, .pl-plan:not(.changing) .pl-say-box { display: none; }
.pl-say-send { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pl-acts { display: inline-flex; gap: 12px; align-items: baseline; white-space: nowrap; }
.pl-where { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.pl-card > .chead { margin-bottom: 4px; }
.pl-card > .chead .team-plan-owner { display: inline; }
.pl-ask { margin-top: 6px; }
.pl-thread { margin: 2px 0 8px; }
.pl-thread[hidden] { display: none; }
.chead button.on { color: var(--fg); font-weight: 600; }
.pl-thread-b { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line); }
/* a session's own plans (decisions 1103 to 1105): each open plan with its stages; those done or withdrawn folded, one line each */
/* one plan = one bordered block: header (state, title, number, versions, who, 提问 · 引用 · 往来), then its stages (#4352) */
.pl-plan { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 10px 12px 4px; min-width: 0; }
.pl-plan > .pl-card { border: 0; background: transparent; padding: 0; margin: 0 0 8px; border-radius: 0; }
.pl-plan > .pl-card.waiting { box-shadow: none; }
.pl-plan:has(> .pl-card.waiting) { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); box-shadow: inset 3px 0 0 var(--warn); }
.pl-plan .pl-stage { background: var(--bg); }
.pl-plan.flash { outline: 2px solid var(--accent); outline-offset: 1px; transition: outline-color .4s; }
/* the analysis plan folded on top of 「计划」 */
.pl-afold { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 14px; min-width: 0; }
.pl-afold-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 10px; cursor: pointer; }
.pl-afold-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-afold.open > .pl-afold-h .sec-caret { transform: rotate(90deg); }
.pl-afold-b { display: none; padding: 0 10px 8px; min-width: 0; }
.pl-afold.open > .pl-afold-b { display: block; }
.pl-afold-b > .pl-plan { border: 0; padding: 0; margin-bottom: 6px; background: transparent; box-shadow: none; }
.pl-closed > summary { cursor: pointer; }
.pl-done { border-bottom: 1px solid var(--line); min-width: 0; }
.pl-done-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 6px 4px; cursor: pointer; }
.pl-done-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-done.open > .pl-done-h .sec-caret { transform: rotate(90deg); }
.pl-done-t { overflow-wrap: anywhere; min-width: 0; }
.pl-done > .pl-plan { margin: 4px 0 10px 18px; }
.bissue { color: var(--warn); overflow-wrap: anywhere; }
.sec-ap { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); white-space: nowrap; line-height: 1.4; }
.sec-ap.now { background: var(--accent-soft); color: var(--accent); }
.sec-ap.out { background: var(--warn-soft); color: var(--warn); }
.sec-next { display: block; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* stays in its own column, never over the title; the whole line is in its title */

/* 预授权 (DEC-18) and lane changes (DEC-19) on the plan and sheet cards */
.pa { margin: 8px 0 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.pa-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pa-head .badge { flex: none; }
.pa-head .linklike { margin-left: auto; }
.pa-list { width: 100%; border-collapse: collapse; margin-top: 6px; }
.pa-list td { padding: 2px 8px 2px 0; vertical-align: top; }
.pa-list td:first-child, .pa-list td:nth-child(n+3) { white-space: nowrap; }
.pa-rel { margin-top: 6px; }
.pa-rel ul { margin: 4px 0 0; padding-left: 18px; }
.pa-jobs { margin: 2px 0; }
.pa-jobs > div { overflow-wrap: anywhere; }
.pa-ended, .pa-plan_only { opacity: .85; }
.pa-tick { display: block; margin: 0 0 6px; }
.pa-tick input { vertical-align: -2px; }
@media (max-width: 640px) { .pa-list td:first-child { white-space: normal; word-break: break-all; }
  .pa-list td:nth-child(n+3) { white-space: normal; } }

/* a phone's conversation has the whole screen: no sticky top bar, a ☰ menu in the conversation head instead (#3597) */
.navwrap { display: none; }
.navpop[hidden] { display: none; }
@media (max-width: 760px) {
  body.chat-full .top { display: none; }
  .top { position: static; }
  .top > nav:first-of-type { flex: 0 0 auto; }
  .top > .right { flex: 0 0 auto; gap: 10px; }
  .navwrap { display: inline-block; flex: none; }
  .navbtn { min-width: 34px; height: 34px; padding: 0; border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--muted); border-radius: 6px; }
  .navpop { position: fixed; top: 48px; left: 8px; z-index: 40; min-width: 180px; background: var(--panel); border: 1px solid var(--line);
    border-radius: 10px; padding: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); display: flex; flex-direction: column; }
  .navpop a { padding: 9px 12px; border-radius: 6px; color: var(--fg); }
  .navpop a:active { background: var(--soft); }
  .navpop a.down { color: var(--bad); text-decoration: line-through; }
  .navpop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
}

/* TEAM-43 to TEAM-45: one line per member, small tags for the filters, the members on the conversation's top row. */
.team-chips { display:inline-flex; align-items:center; gap:4px; flex-wrap:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; }
.team-chips.compact .tm-st { display:none; }
.tm-chip { flex:none; display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--fg); white-space:nowrap; }
.tm-chip:hover { background:var(--soft); text-decoration:none; }
.tm-chip .dot { width:6px; height:6px; box-shadow:none; }
.team-tags { display:flex; flex-wrap:wrap; gap:4px; }
.team-tags .tag { padding:1px 9px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:12px; }
.team-tags .tag.on { background:var(--accent-soft); color:var(--fg); border-color:var(--accent); }
.team-tags-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:2px 0 8px; min-width:0; }
.tm-pick { min-width:0; max-width:100%; flex:1 1 110px; font-size:12px; padding:1px 4px; }
.tm-plan { flex:0 0 84px; width:84px; font-size:12px; padding:1px 6px; white-space:nowrap; }
.tm-top { display:flex; align-items:center; gap:8px; padding:4px 0 8px; }
.tm-top .spacer, .tm-line .spacer { flex:1; }
.team-card { border-bottom:1px solid var(--line); padding:7px 4px; position:relative; }
.tm-line { display:flex; align-items:center; gap:8px; cursor:pointer; }
.tm-line .dot { flex:none; }
.tm-sub { padding-left:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-more { padding:0 8px; line-height:1.2; }
.tm-menu { position:absolute; right:4px; top:30px; z-index:5; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:6px 10px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.tm-more-info { padding:4px 0 2px 16px; }
.team-card.gone { opacity:.65; }
.team-event { padding:5px 4px; border-bottom:1px solid var(--line); }
.team-card.waiting, .tm-chip.waiting, .team-event.waiting { background:#ffe7a0; color:#352800; }

.team-members { margin-left:20px; }

/* PAGE-37 workspaces: tabs under the top bar, no list on the left, a view per conversation kept hidden */
.wsbar { display: flex; align-items: flex-end; gap: 2px; padding: 4px 10px 0; border-bottom: 1px solid var(--line); background: var(--panel); overflow-x: auto; scrollbar-width: none; }
.wsbar[hidden], #wshost[hidden] { display: none; }
.wstab { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 10px; height: 30px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; white-space: nowrap; color: var(--muted); cursor: pointer; }
.wstab a { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; max-width: 200px; }
.wstab .wsn { overflow: hidden; text-overflow: ellipsis; }
.wstab.wsmain { padding-right: 10px; text-decoration: none; align-items: center; }
.wstab:hover { background: var(--soft); color: var(--fg); }
.wstab.on { background: var(--bg); border-color: var(--line); color: var(--fg); font-weight: 600; margin-bottom: -1px; height: 31px; }
.wstab.drag { opacity: .5; }
.wsc { font-size: 11px; line-height: 1.4; min-width: 16px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: var(--panel); text-align: center; font-weight: 600; }
.wsx { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.wsx:hover { background: var(--line); color: var(--fg); }
body.ws-mode .side-toggle, body.ws-mode .chead2 .back { display: none !important; }
.app[hidden] { display: none; }
@media (max-width: 760px) { #wsbar, #wshost, #ws-btn, .ws-put, .who .row-ws { display: none !important; } }
.who { position: relative; }
.who .row-ws { position: absolute; right: 6px; top: 6px; display: none; border: 0; background: var(--panel); color: var(--muted); border-radius: 6px; padding: 0 5px; font-size: 13px; cursor: pointer; }
.who:hover .row-ws { display: block; }
.who:hover:has(.row-ws) .cnt { margin-right: 24px; }
.who .row-ws:hover { color: var(--fg); background: var(--soft); }

/* the team column in a narrow column (the right column of a Section conversation): everything wraps inside the width */
.team-panel .asks-in { overflow-x:hidden; }
.team-panel .asks-list { grid-template-columns:minmax(0, 1fr); }
.team-panel .tm-top { min-width:0; flex-wrap:wrap; }
.team-panel .team-event { overflow-wrap:anywhere; min-width:0; }
.team-panel .tm-sub { white-space:normal; overflow-wrap:anywhere; }

/* TEAM-44 member tabs: a row under the conversation's top row; a member's page hangs over the leader's below it */
.team-tabs { display:flex; flex-direction:column; gap:2px; min-width:0; }
.tt-line { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; padding:0 12px; border-bottom:1px solid var(--line); }
.tt { flex:none; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; }
.tt:hover { color:var(--fg); text-decoration:none; background:var(--soft); }
.tt.on { color:var(--fg); border-bottom-color:var(--accent); font-weight:550; }
.tt.waiting { background:#ffe7a0; color:#352800; }
.tt .dot { width:7px; height:7px; box-shadow:none; }
.tt-head { display:flex; align-items:center; gap:6px; padding:3px 12px; color:var(--muted); flex-wrap:wrap; }
.tt-head .spacer { flex:1; }
.app.has-tv { position:relative; }
.team-host { position:absolute; left:0; right:0; bottom:0; top:0; z-index:4; display:flex; min-height:0; background:var(--bg, var(--panel)); }
.team-host[hidden] { display:none; }
.team-host > .app { height:100%; flex:1; min-width:0; }
.team-host .chead2 .back, .team-host .chead2 .side-toggle, .team-host .chead2 .navwrap, .team-host .chead2 .team-chips:not(.mem-head), .team-host .chead2 .ws-put, .team-host .chead2 .cname, .team-host .chead2 .lchip.lm { display:none; }

/* TEAM-44: the tab head lives on the member's own top row, one line, shortened with an ellipsis */
.mem-head .mh-info { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-menu { position:absolute; right:0; top:100%; z-index:20; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:4px; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.mh-menu[hidden] { display:none; }
.mh-menu button { text-align:left; padding:4px 10px; }
.mem-head { display:contents; }
.mem-head .mh-info { flex:1 1 auto; }
.mem-head .tm-more { order:99; flex:none; }
.team-host .chead2 .hrow { position:relative; }
.mh-menu { order:99; }
.team-card.waiting .tm-more, .team-event.waiting button { background:transparent; color:inherit; border-color:currentColor; }
.removed-items { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.removed-items ul { margin: 2px 0 6px; padding-left: 20px; }
.meta .sent-to { color: var(--accent); }

/* 审阅标签 (TEAM-44): the Assay affair page in a frame over the conversation, below the tabs */
.tt-x { margin-left:4px; padding:0 4px; border-radius:4px; line-height:1.2; }
.tt-x:hover { background:var(--line); color:var(--fg); }
.team-host > .rv-view { height:100%; flex:1; min-width:0; }
.rv-view[hidden] { display:none; }
.rv-frame { display:block; width:100%; height:100%; border:0; background:var(--bg, var(--panel)); }

/* 文件标签 (AIM-7 的例外): the editor over the conversation, below the tabs */
.team-host > .ed-view { height:100%; flex:1; min-width:0; }
.ed-view { display:flex; flex-direction:column; min-height:0; }
.ed-view[hidden] { display:none; }
.ed-bar { display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.ed-bar .spacer { flex:1; }
.ed-file { overflow-wrap:anywhere; }
.ed-status { color:var(--muted); }
.ed-status.on { color:var(--accent); }
.ed-note { width:220px; max-width:30vw; }
.ed-banner { padding:5px 12px; background:var(--soft); border-bottom:1px solid var(--line); }
.ed-main { display:flex; flex:1; min-height:0; }
.ed-cm { flex:1; min-width:0; min-height:0; }
.ed-cm .CodeMirror { height:100%; background:var(--bg, var(--panel)); color:var(--fg); font-size:13.5px; line-height:1.5; }
.ed-cm .CodeMirror-gutters { background:var(--soft); border-right:1px solid var(--line); }
.ed-cm .CodeMirror-linenumber { color:var(--muted); }
.ed-cm .CodeMirror-cursor { border-left-color:var(--fg); }
.ed-cm .CodeMirror-selected { background:rgba(120,150,200,.28); }
.ed-cm .CodeMirror-focused .CodeMirror-selected { background:rgba(120,150,200,.4); }
.ed-cm .cm-comment { color:var(--muted); }
.ed-cm .cm-tag, .ed-cm .cm-keyword { color:var(--accent); }
.ed-cm .cm-bracket { color:var(--muted); }
.ed-cm .cm-builtin, .ed-cm .cm-atom, .ed-cm .cm-number { color:#b06a00; }
.ed-cm .CodeMirror-matchingbracket { color:inherit; background:rgba(120,150,200,.35); }
.CodeMirror-dialog { background:var(--panel, var(--bg)); color:var(--fg); }
.ed-side { width:42%; min-width:260px; max-width:640px; border-left:1px solid var(--line); overflow:auto; padding:8px 12px; }
.ed-side[hidden] { display:none; }
.ed-hist { padding:5px 8px; border-radius:6px; cursor:pointer; }
.ed-hist:hover, .ed-hist.on { background:var(--soft); }
.ed-diff { margin-top:8px; overflow-x:auto; }
/* sealed Sections (#4777) */
.badge.sealed { background: var(--soft); color: var(--muted); }
.ana-sealed > summary { color: var(--muted); }
.ana-sealed .sec-note { padding: 2px 4px 6px; }
.secchat-sealed { padding: 10px 14px; border-top: 1px solid var(--line); }
.secchat-sealed[hidden], .secchat-write[hidden] { display: none; }
.rnd-sealed { padding: 2px 0; }

/* \cite in a Section's words, and its 参考文献 (#4928, PAGE-39) */
.cite-mark { white-space: nowrap; }
.cite-mark a.cite { text-decoration: none; color: var(--accent, inherit); }
.cite-mark a.cite:hover { text-decoration: underline; }
.cite-unk { color: var(--muted, #888); cursor: help; }
.cite-tag { margin-left: 6px; font-size: .9em; }
.cite-refs { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; min-width: 0; overflow-wrap: anywhere; }
.cite-ref { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 2px 4px; border-radius: 4px; }
.cite-ref .cite-links { grid-column: 2; display: flex; gap: 10px; flex-wrap: wrap; }
.cite-ref .cite-n { font-variant-numeric: tabular-nums; color: var(--muted, #888); }
.cite-flash, .ref-flash { animation: cite-flash 1.8s ease-out; }
@keyframes cite-flash { 0%, 40% { background: color-mix(in srgb, var(--accent, #fc0) 35%, transparent); } 100% { background: transparent; } }

/* \ref in a Section's words: 「图 3」「表 2」「式 (4)」, and the numbers on figures, pictures, hand-written tables and formulas (#5086, PAGE-40) */
a.ref { text-decoration: none; color: var(--accent); }
a.ref:hover { text-decoration: underline; }
.ref-unk { color: var(--warn); cursor: help; }
.ref-mark { white-space: nowrap; }
.fig-no { font-weight: 600; margin-right: 6px; white-space: nowrap; color: var(--muted); }
.panel { position: relative; min-width: 0; }
.panel .panel-letter { position: absolute; top: 2px; left: 4px; z-index: 1; padding: 0 5px; border-radius: 4px; font-size: .85em; font-weight: 600;
  background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg); pointer-events: none; }
.panel > .ana-fig, .panel > * { max-width: 100%; }
.tab-caption { margin: 4px 0 8px; font-size: .92em; color: var(--muted); }
.eq-target { display: block; border-radius: 4px; }
.sec-row.ref-flash { border-radius: 6px; }

/* the voice assistant (PAGE-41, #5701): in the left column's foot on desktop (a dot on the narrow rail when collapsed), in the composer's left on narrow screens; its panel opens from the bottom left and never covers the composer or the jump-to-bottom button */
.asst { position: fixed; left: 10px; bottom: calc(52px + env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.asst > * { pointer-events: auto; }
.asst > .asst-dock { display: none; }
body:not(.chat-full):not(:has(.side-foot)) .asst { bottom: calc(14px + env(safe-area-inset-bottom)); }
body:not(.chat-full):not(:has(.side-foot)) .asst > .asst-dock:not([hidden]) { display: flex; }
.asst-dock { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.asst-dock[hidden], .side-rail-asst[hidden], .asst-comp-btn[hidden] { display: none !important; }
.asst-fab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; border-radius: 15px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 13px; cursor: pointer; white-space: nowrap; }
.asst-fab.asst-dot-only, .composer button.icon.asst-comp-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; justify-content: center; flex: none; }
.composer button.icon.asst-comp-btn { width: 36px; height: 36px; border-radius: 6px; display: none; }
/* where the left column is not shown (phones, tablets, 761–1100 px Section layout, workspaces, embed): the dot in the composer's left shows instead */
@media (max-width: 760px) { .composer button.icon.asst-comp-btn:not([hidden]) { display: inline-flex; } }
@media (min-width: 761px) and (max-width: 1100px) { .sections-first .composer button.icon.asst-comp-btn:not([hidden]) { display: inline-flex; } }
body.ws-mode .composer button.icon.asst-comp-btn:not([hidden]), body.embed .composer button.icon.asst-comp-btn:not([hidden]) { display: inline-flex; }
.asst-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
:is(.asst, .asst-dock, .side-rail-asst, .asst-comp-btn)[data-state="listening"] .asst-dot { background: var(--ok); }
:is(.asst, .asst-dock, .side-rail-asst, .asst-comp-btn)[data-state="live"] .asst-dot { background: #c0392b; animation: asst-pulse 1.2s ease-in-out infinite; }
:is(.asst, .asst-dock, .side-rail-asst, .asst-comp-btn):is([data-state="connecting"], [data-state="loading"]) .asst-dot { background: var(--warn); animation: asst-pulse 1.2s ease-in-out infinite; }
:is(.asst, .asst-dock, .side-rail-asst, .asst-comp-btn):is([data-state="paused"], [data-state="error"]) .asst-dot { background: var(--warn); }
:is(.asst, .asst-dock, .side-rail-asst).ping .asst-fab, .asst-comp-btn.ping { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@keyframes asst-pulse { 50% { opacity: .35; } }
.asst-mode { height: 26px; padding: 0 8px; border-radius: 13px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; }
.asst-mode.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.asst-panel { width: min(340px, calc(100vw - 20px)); max-height: min(60vh, 460px); display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.asst-panel[hidden] { display: none; }
.asst-head { display: flex; align-items: baseline; gap: 8px; }
.asst-head .asst-state { flex: 1; }
.asst-x { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; cursor: pointer; }
.asst-log { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.asst-line { padding: 5px 8px; border-radius: 8px; background: var(--soft); max-width: 92%; overflow-wrap: anywhere; }
.asst-line.me { align-self: flex-end; background: var(--accent-soft); }
.asst-line.sys { align-self: center; background: none; color: var(--muted); font-size: 12px; text-align: center; }
.asst-action { padding: 8px; margin: 0; border-color: var(--warn); background: var(--warn-soft); }
.asst-restate { margin: 3px 0 6px; font-size: 14px; overflow-wrap: anywhere; }
.asst-act-btns { display: flex; align-items: center; gap: 8px; }
.asst-form { display: flex; gap: 6px; }
.asst-input { flex: 1; min-width: 0; }
.asst-foot { display: flex; gap: 6px; flex-wrap: wrap; }

/* the completion summary on a plan's card (plan #5367) */
.completion { margin-top: .6rem; border-top: 1px solid var(--line, rgba(128,128,128,.25)); padding-top: .5rem; }
.completion .comp-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.completion .comp-body.clamped { max-height: 7.5em; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.completion .comp-changes { margin-top: .5rem; display: grid; gap: .25rem; }
.completion .comp-pending { margin: 0; }
.sec-rel { text-align: left; }

/* #5443: what is in front the moment a conversation is clicked, before its view is built: it lies over the building view
   and goes when the first paint is done */
#cvhost { position: relative; }
.app.cv-ph { position: absolute; inset: 0; z-index: 30; background: var(--bg); }
.sec-lazy { min-height: 36px; }

/* #5530: 「需要你」 is a block of its own at the top of the left column, a third of the height at most, sliding inside itself; the
   agent list under it slides on its own */
.side-needs { flex: 0 1 auto; max-height: 33.333%; min-height: 0; overflow-y: auto; padding: 8px 8px 6px; border-bottom: 1px solid var(--line); }
.side-needs[hidden] { display: none; }
.side-needs h4:first-child { margin-top: 2px; }
.side-needs .notify-ask { margin-bottom: 6px; }
/* PAGE-19: explicit Q/A alongside analysis and plans. */
.qa-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px; border-bottom: 1px solid var(--line); }
.qa-card { margin: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.qa-meta { margin: 8px 0; }
.qa-answer { padding-left: 12px; border-left: 2px solid var(--line); }
.qa-pending { margin: 10px 0; }
.qa-follow { margin-top: 10px; }
.recipient-hint { padding: 4px 0; overflow-wrap: anywhere; }
.sections-first .qa-launch { display: none; }
/* Executors on approved plan versions (plan #5508). */
.execution-badge { display:inline-block; max-width:100%; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:4px; padding:1px 5px; margin-inline:5px; font-weight:normal; }
.comp-execution { margin-top:10px; overflow-wrap:anywhere; }
.tm-step-list { margin:4px 0; overflow-wrap:anywhere; }

/* Guild's observed 24-hour harness table (#5525). */
.harness-table { padding:8px 0; border-bottom:1px solid var(--line); }
.harness-scroll { max-width:100%; overflow-x:auto; margin-top:6px; }
.harness-table table { width:100%; border-collapse:collapse; }
.harness-table th, .harness-table td { padding:5px 7px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); white-space:nowrap; }
.harness-table .harness-notes { white-space:normal; min-width:110px; }
.prompts-view { padding:6px 0; display:flex; flex-direction:column; gap:10px; }
.prompts-view .pv-form, .prompts-view .pv-preview, .prompts-view .pv-sends { border-top:1px solid var(--line); padding-top:8px; display:flex; flex-direction:column; gap:6px; }
.prompts-view .pv-field { display:flex; flex-direction:column; gap:2px; }
.prompts-view .pv-field input, .prompts-view .pv-field select, .prompts-view .pv-field textarea { width:100%; box-sizing:border-box; }
.prompts-view .pv-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:6px; }
.prompts-view .pv-text { white-space:pre-wrap; word-break:break-word; max-height:320px; overflow:auto; margin:4px 0; font-size:12px; }
.prompts-view .pv-diff { background:#ffe7a0; color:#352800; }
.prompts-view .pv-block { padding:2px 0; }
.prompts-view table { width:100%; border-collapse:collapse; }
.prompts-view th, .prompts-view td { padding:4px 6px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); white-space:nowrap; }
.prompts-view .harness-scroll td, .prompts-view .harness-scroll th { white-space:normal; word-break:break-word; }
.prompts-view .pv-skills { display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.qa-head { display:block; width:100%; text-align:left; background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; }
.qa-head .qa-meta { margin:0 0 4px; }
.qa-clip { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; }
.qa-status { margin-top:4px; color:var(--muted, inherit); }
.qa-card.open .qa-head { margin-bottom:8px; }
.dr-view .ed-preview { flex:1; min-width:0; overflow:auto; padding:10px 14px; }
.dr-view .ed-preview[hidden], .dr-view .ed-cm[hidden] { display:none; }
.dr-view .dr-dict { display:none; }
.dr-view .dr-mic { display:inline-flex; align-items:center; gap:4px; }
.dr-view .ed-bar { flex-wrap:wrap; row-gap:4px; }
.dr-view .ed-status { white-space:normal; overflow-wrap:anywhere; }
.dr-view .ed-note { min-width:0; flex:1 1 140px; max-width:100%; }
.dr-view .CodeMirror { font-family:inherit; }
.need .badge.draft { background:#e7dcff; color:#2a1b52; }
.tt-dr { max-width:260px; }
.tt-dr .tt-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tt-dr .tt-x { flex:none; }
/* 旧版: a Section as an analysis tag had it (PAGE-28, decision 1473) */
.sec-old-btn { margin-left: 8px; padding: 0 7px; font-size: 12px; font-weight: 400; vertical-align: 1px; }
.sec-old-list { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 4px 0 2px; padding: 4px 8px;
  border: 1px solid var(--line, #ddd); border-radius: 6px; background: var(--bg, #fff); font-weight: 400; font-size: 13px; }
.sec-old-list button { text-align: left; }
.sec-old { margin: 4px 0 8px 18px; padding: 8px 10px; border: 1px dashed var(--line, #ccc); border-radius: 8px; background: var(--bg-soft, rgba(127,127,127,.06)); }
.sec-old-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sec-old-h .spacer { flex: 1; }
.sec-old-bar { display: flex; gap: 6px; margin: 6px 0; }
.sec-old-bar button.on { background: var(--accent, #2b6cb0); color: #fff; border-color: transparent; }
.sec-old-view { max-width: 100%; overflow-x: auto; }
/* the narrow column wraps instead of scrolling (agy r2_05, r3_05): diff2html's lines are inline-block and its line
   numbers absolute for sideways scrolling, so here the line takes the cell, only the words keep their spaces, and the
   numbers are an ordinary column */
.sec-old-view .d2h-code-line, .seen-diff .d2h-code-line { display: block; width: 100%; box-sizing: border-box; padding: 0 .5em; white-space: normal; }
.sec-old-view .d2h-code-line-ctn, .seen-diff .d2h-code-line-ctn { display: inline; white-space: pre-wrap; overflow-wrap: anywhere; }
.sec-old-view .d2h-code-linenumber, .seen-diff .d2h-code-linenumber { position: static; }
.sec-old .sec-path { cursor: auto; }
.sec-old .sec-path:hover { color: var(--muted); }
.sec-old .res-ref:hover { border-color: var(--line); }
.sec-old-view .d2h-file-header { display: none; }
/* #6891: the left column is the page's one, its box moved into the side slot of the view in front; 「需要你」 fills a third of it
   whether or not it has rows, the agent list the rest */
.side-box { display: contents; }
.app:not(.list-only) .side-needs { flex: 0 0 33.333%; max-height: none; }
.side-needs .need-none { padding: 4px 2px; }
/* #6903: the screen of a kept view that could not be read again says from when it is */
.stale-note { padding: 4px 12px; background: var(--warn-bg, rgba(200,150,0,.12)); color: var(--muted, #777); border-bottom: 1px solid var(--line); }
/* #6971: what changed since the version the user dealt with */
.seen-diff { margin: 4px 0 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; max-width: 100%; overflow-x: auto; }
.seen-diff .d2h-file-header { display: none; }

.pv-when label { margin-right: 6px; white-space: nowrap; }
.pv-when-line { color: var(--accent); }
.pv-group h3 { margin: 14px 0 6px; font-size: 14px; }
.pv-search { min-width: 160px; flex: 1 1 160px; max-width: 280px; }
.pv-sent { color: var(--muted); }
.bu-item { border-bottom: 1px solid var(--line); }
.bu-line { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; cursor: pointer; }
.bu-line:hover, .bu-item.on > .bu-line { background: var(--soft); }
.bu-first { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-at { flex: none; }
.bu-st { flex: none; }
.bu-none { color: var(--muted); }
.bu-body { padding: 4px 10px 12px; }
.bu-words { margin-bottom: 8px; padding: 6px 8px; border-left: 3px solid var(--line); }

/* the mail card (PAGE-43): an approval form with a mail, drawn as a letter */
.mail-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 10px 14px; margin: 8px 0; }
.mail-state { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.mail-head { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.mail-row { display: flex; gap: 10px; padding: 1px 0; align-items: baseline; }
.mail-row.changed { background: var(--warn-soft); border-radius: 4px; }
.mail-k { flex: none; width: 5em; color: var(--muted); font-size: 13px; }
.mail-v { min-width: 0; overflow-wrap: anywhere; }
.mail-body { font-family: var(--mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--soft); border-radius: 6px; padding: 8px 12px; }
.mail-line.add { background: var(--ok-soft); color: var(--ok); }
.mail-line.del { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; }
.mail-atts { margin: 8px 0 0; padding-left: 1.2em; font-size: 13px; }
.mail-note { margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 4px; }
.mail-small { margin-top: 8px; }
.mail-card.compact .mail-body { max-height: 22em; overflow: auto; }
.mail-re { margin: 0 0 8px; padding: 4px 10px; border-left: 3px solid var(--line); color: var(--muted); font-size: 13px; }
.mail-addr.add { background: var(--ok-soft); color: var(--ok); }
.mail-addr.del { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; }
.mail-links ul { margin: 2px 0 0; padding-left: 1.2em; font-size: 13px; }
.mail-link.add { background: var(--ok-soft); }
.mail-link.del { background: var(--bad-soft); text-decoration: line-through; }
/* each plan is a short card, folded; the head of an opened one folds it again (PAGE-36, #7771) */
.pl-plan.folded { padding: 6px 12px; }
.pl-fold-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; cursor: pointer; min-width: 0; }
.pl-fold-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-fold-t { min-width: 0; overflow-wrap: anywhere; }
.pl-fold-p { color: var(--muted); }
.pl-plan.folded .sec-caret { transform: none; }
.pl-plan.folded .pl-ask-slot, .pl-plan.folded .pl-thread { flex-basis: 100%; }
.pl-card > .chead.foldable { cursor: pointer; }
.badge.doing { background: var(--accent); color: var(--bg); font-weight: 600; }
.pl-fold-now { padding: 0 12px 6px 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.jdesc-head { font-size: 1rem; font-weight: 600; }
.jdesc-list { font-size: .9em; }
.jdesc-list ul, .jdesc-list ol { margin: .2em 0; padding-left: 1.3em; }
.jdesc-list p { margin: .2em 0; }
.jdesc-more > summary { cursor: pointer; font-size: .9em; }

/* 手机布局 (PAGE-9, plan #8755): head = one line (☰, dot, name ▾, ⋯), the buttons row is the tab bar, the bottom bar, the switch sheet;
   nothing of it on a wide screen */
.mx-scroll { display: contents; }
.mx-only, .mx-dot, .mx-car, .mx-dots, .mx-tab-conv, .mx-tab-more, .mx-bottom, .mx-sheet-bg, .mx-layer, .mx-nfold, .mx-recents { display: none; }
@media (max-width: 760px) {
  .chead2.mx .back, .chead2.mx .hrow > .badge, .chead2.mx .hrow > .lchip, .chead2.mx .spacer { display: none; }
  .chead2.mx .mx-dot { display: inline-block; flex: none; }
  .chead2.mx .cname { flex: 0 1 auto; max-width: 60vw; font-size: 16px; font-weight: 600; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
  .chead2.mx .mx-car { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--muted); flex: 1 1 auto; }
  .chead2.mx .mx-dots { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 22px; color: var(--fg); }
  .chead2.mx .navbtn { min-width: 44px; height: 44px; }
  .chead2.mx .hbtns { order: 2; flex: 1 1 100%; gap: 0; border-top: 1px solid var(--line); margin: 0 -10px; padding: 0 4px; }
  .chead2.mx .mx-scroll > :not([data-pane="asks"]):not([data-pane="pending"]):not([data-pane="plans"]):not([data-pane="jobs"]):not([data-pane="analysis"]):not([data-pane="conv"]) { display: none; }
  .chead2.mx .mx-scroll > .mx-tab-conv, .chead2.mx .hbtns > .mx-tab-more { display: inline-flex; }
  .chead2.mx .hbtns button.small { min-height: 44px; padding: 0 14px; font-size: 14.5px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--fg); align-items: center; }
  .chead2.mx .hbtns button.small.on, body:not(.mx-open) .chead2.mx .hbtns .mx-tab-conv { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; background: transparent; }
  body.mx-open .chead2.mx .hbtns .mx-tab-conv { color: var(--fg); border-bottom-color: transparent; font-weight: 400; }
  .chead2.mx .hbtns .mx-tab-conv { order: 0; } .chead2.mx .hbtns [data-pane="pending"] { order: 1; } .chead2.mx .hbtns [data-pane="analysis"] { order: 2; }
  .chead2.mx .hbtns [data-pane="asks"] { order: 3; } .chead2.mx .hbtns [data-pane="plans"] { order: 4; } .chead2.mx .hbtns [data-pane="jobs"] { order: 5; } .chead2.mx .hbtns .mx-tab-more { order: 9; }
  .chead2.mx .hbtns .cnt { margin-left: 5px; }
  .head-slot > .chead-wrap { padding-bottom: 0; }
  /* a column starts under the head (its tabs are the head's) and stops above the bottom bar */
  .asks { top: var(--mx-h, var(--top-h, 0px)); }
  .asks-tabs { display: none; }
  body.mx-bar:not(.mx-kb) .asks { bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.mx-bar:not(.mx-kb) .app:not(.list-only) { height: calc(var(--app-h, 100dvh) - 56px - env(safe-area-inset-bottom)); }
  body.mx-bar:not(.mx-kb) .app.list-only { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.mx-bar:not(.mx-kb) .composer { padding-bottom: 5px; }
  /* touch: 44px, and nothing wider than the screen in a column (「分析」 too) */
  .asks button.small, .asks .linklike, .need, .mx-row, .mx-chip { min-height: 44px; }
  .asks-in, .asks-in * { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .asks-in [class*="head"], .asks-in [class*="row"], .asks-in [class*="top"], .asks-in .sec-now-h { flex-wrap: wrap; }
  .asks-in button { max-width: 100%; white-space: normal; }
  .msgcard .reply, .asks .msgcard .reply.compact, .mx-layer .msgcard .reply { position: sticky; bottom: 0; z-index: 2; background: var(--panel); box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, .25); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  /* the bottom bar */
  .mx-bottom { position: fixed; left: 0; right: 0; bottom: 0; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); z-index: 60; background: var(--panel); border-top: 1px solid var(--line); display: none; }
  body.mx-bar .mx-bottom { display: flex; }
  html.mx-kb .mx-bottom { display: none; }
  .mx-bottom button { flex: 1 1 0; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
  .mx-bottom button[hidden] { display: none; }
  .mx-bottom .ic { font-size: 18px; line-height: 1; color: var(--fg); }
  .mx-bottom .lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mx-bottom .cur.on .ic, .mx-bottom .cur.on { color: var(--accent); }
  .mx-n { font-style: normal; font-size: 11px; line-height: 16px; min-width: 16px; text-align: center; padding: 0 5px; border-radius: 999px; background: var(--warn); color: var(--bg); position: absolute; top: 4px; left: calc(50% + 6px); }
  .mx-n[hidden] { display: none; }
  /* the sheets and the layer */
  .mx-sheet-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 80; display: flex; align-items: flex-end; }
  .mx-sheet { width: 100%; background: var(--panel); border-radius: 14px 14px 0 0; max-height: 70vh; display: flex; flex-direction: column; padding: 6px 12px calc(10px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .mx-sheet.sw { height: 70vh; }
  .mx-grab { width: 40px; height: 4px; border-radius: 3px; background: var(--line); margin: 4px auto 10px; flex: none; }
  .mx-q { width: 100%; height: 44px; font-size: 16px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--fg); box-sizing: border-box; flex: none; }
  .mx-sw-body { flex: 1 1 auto; overflow-y: auto; margin-top: 6px; }
  .mx-g { font-size: 12px; color: var(--muted); margin: 10px 4px 2px; }
  .mx-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
  .mx-row.on { background: var(--accent-soft); }
  .mx-row .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mx-cnt { background: var(--warn); color: var(--bg); border-radius: 999px; font-size: 12px; padding: 0 7px; line-height: 18px; }
  .mx-mi { display: block; width: 100%; min-height: 50px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; font-size: 16px; padding: 0 8px; color: var(--fg); }
  .mx-layer { position: fixed; inset: 0; background: var(--bg); z-index: 70; display: flex; flex-direction: column; }
  .mx-lhead { display: flex; align-items: center; height: 48px; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 16px; flex: none; }
  .mx-lhead .spacer { flex: 1; }
  .mx-done { min-height: 44px; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; padding: 0 10px; }
  .mx-nbody { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px calc(16px + env(safe-area-inset-bottom)); }
  .mx-nrow { margin-bottom: 8px; }
  .mx-nc:empty { display: none; }
  /* the list page: 「最近」 on top, 「需要你」 folded to a line */
  .list-only .mx-recents { display: block; padding: 4px 0 0; }
  .mx-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 8px; }
  .mx-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--fg); text-decoration: none; font-size: 14px; max-width: 70vw; white-space: nowrap; }
  .list-only .side-needs > h4.mx-nfold { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--warn-soft); color: var(--warn); cursor: pointer; }
  .list-only .side-needs > h4.mx-nfold::after { content: "▸"; }
  .list-only .side-needs.mx-open > h4.mx-nfold::after { content: "▾"; }
  .list-only .side-needs:not(.mx-open) > :not(h4) { display: none; }
  /* #8832: the head is always one line; the tab bar's 「更多」 stays at the right end; no member row or QA bar; 44px; no ⌘K */
  .chead2.mx .hrow > *:not(.navwrap):not(.mx-dot):not(.cname):not(.mx-car):not(.mx-dots):not(.hbtns):not(.brk) { display: none; }
  .chead2.mx .cname { display: block; flex: 1 1 0; min-width: 0; max-width: none; line-height: 44px; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chead2.mx .mx-car { flex: none; }
  .chead2.mx .mx-dots { margin-left: auto; }
  .chead2.mx .mx-scroll > .mx-only { display: inline-flex; }
  .chead2.mx .hbtns { overflow: hidden; }
  .chead2.mx .mx-scroll { display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent); }
  .chead2.mx .mx-scroll::-webkit-scrollbar { display: none; }
  .chead2.mx .mx-scroll > * { flex: none; }
  .chead2.mx .hbtns .mx-tab-more { flex: none; border-left: 1px solid var(--line); }
  .team-tabs, .qa-launch, #cmdk-btn { display: none !important; }
  .secchat-line { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .secchat-line::-webkit-scrollbar { display: none; }
  .secchat-line > * { flex: none; }
  .secchat-line > .secchat-title { flex: 0 1 auto; max-width: 55vw; }
  .secchat-path { display: none; }
  .secchat-w .crow, .askfields-inline .crow { align-items: flex-end; }
  .askfields-inline .crow .asktoggle { flex: none; height: 36px; padding: 0 9px; font-size: 12.5px; }
  details.tools > summary, .msgcard .actions > button, .card .actions > button, .asks .actions > button { min-height: 44px; }
  details.tools > summary { display: flex; align-items: center; }
  .mx-bottom .cur .lb { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; font-size: 10.5px; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
  .mx-bottom .ls .mx-n { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
  .asks .pend-item, .asks [id^="m-"], .mx-layer [id^="m-"] { scroll-margin-top: 64px; }
  /* #8838: 44px */
  .composer button.icon, .composer .asktoggle, .composer button.primary, .askfields-inline .crow button, .askfields-inline .crow .asktoggle { min-height: 44px; height: 44px; min-width: 44px; }
  .asks-filter .chip, .top nav a, .team-members > summary, .newagent, .top .right button, .top .right a { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
  .atblock { position: relative; }
  .atblock::after { content: ""; position: absolute; inset: -14px -6px; }
}

/* ---- 「需要你」 review page (PAGE-44): queue | card | context ---- */
.top nav a .navcnt { margin-left: 5px; padding: 0 6px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 11px; line-height: 16px; display: inline-block; }
.top nav a .navcnt[hidden] { display: none; }
.rv-all { margin-left: 8px; font-size: 12px; font-weight: 400; }
.rv { display: grid; grid-template-columns: 320px minmax(0, 1fr) clamp(320px, 26vw, 380px); height: var(--app-h, calc(100dvh - var(--top-h, 52px))); overflow: hidden; }
.rv.ctx-hide { grid-template-columns: 320px minmax(0, 1fr); }
.rv-q { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; padding: 10px 8px 8px; gap: 8px; }
.rv-qhead { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rv-chip { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 999px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.rv-chip i { font-style: normal; color: var(--muted); margin-left: 4px; }
.rv-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rv-sels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.rv-agent, .rv-sort { font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--fg); min-width: 0; }
.rv-list { overflow-y: auto; min-height: 0; flex: 1; align-content: start; }
.rv-list .need { border-left: 3px solid transparent; }
.rv-list .need.on { border-left-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.rv-grp { padding: 8px 6px 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rv-grp i { font-style: normal; font-weight: 400; margin-left: 5px; }
.rv-empty { padding: 20px 8px; text-align: center; }
.rv-done { border-top: 1px solid var(--line); padding-top: 6px; max-height: 28%; overflow-y: auto; font-size: 13px; }
.rv-done summary { cursor: pointer; color: var(--muted); }
.rv-drow { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; padding: 4px 4px; color: var(--fg); border-radius: 6px; }
.rv-drow:hover { text-decoration: none; background: var(--soft); }
.rv-drow.on { background: var(--accent-soft); }
.rv-drow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-drow .s { grid-column: 2; font-size: 12px; color: var(--muted); }
.rv-main { overflow-y: auto; min-width: 0; min-height: 0; padding: 14px 24px 60px; }
.rv-main > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.rv-new { display: block; width: 100%; margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--warn); background: var(--warn-soft); color: var(--warn); border-radius: 8px; font-size: 14px; cursor: pointer; text-align: left; }
.rv-new[hidden] { display: none; }
.rv-ctxbar { display: none; width: 100%; align-items: center; gap: 10px; margin-bottom: 10px; padding: 7px 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; font-size: 13px; cursor: pointer; text-align: left; color: var(--fg); }
.rv-cb-t { font-weight: 600; flex: none; }
.rv-cb-s { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rv-cb-c { color: var(--accent); flex: none; }
.rv-ctxdrop { display: none; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; }
.rv-ctx { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; min-height: 0; padding: 12px 14px 40px; font-size: 13px; }
.rv.ctx-hide .rv-ctx { display: none; }
.rv-chead { display: flex; align-items: center; margin-bottom: 6px; }
.rv-fold, .rv-unfold { border: 0; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.rv-unfold { display: none; margin-bottom: 6px; }
.rv.ctx-hide .rv-unfold { display: block; max-width: none; margin-left: auto; margin-right: 0; width: max-content; }
.rv-sec { margin: 10px 0 14px; }
.rv-sec h5 { margin: 0 0 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.rv-q1 { margin: 0 0 6px; padding: 6px 10px; border-left: 3px solid var(--line); background: var(--soft); border-radius: 0 6px 6px 0; white-space: pre-wrap; word-break: break-word; }
.rv-bl { margin-bottom: 6px; display: grid; gap: 1px; }
.rv-bl .badge { justify-self: start; }
.rv-pre { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.rv-pt { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-pb { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.rv-ag { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.rv-ag .muted { grid-column: 1 / -1; }
.rv-open { margin-top: 12px; }
.rv-clear { margin: 80px auto; text-align: center; padding: 20px; }
@media (max-width: 1279px) {
  .rv, .rv.ctx-hide { grid-template-columns: 300px minmax(0, 1fr); }
  .rv-ctx, .rv-unfold, .rv.ctx-hide .rv-unfold { display: none; }
  .rv-ctxbar { display: flex; }
  .rv-ctxdrop:not([hidden]) { display: block; }
}

/* the machines' memory in the top bar (PAGE-21, plan #9261): a segment after the quota, a panel of the sessions that hold most */
.top .usage .mem-seg { font: inherit; background: none; border: 0; padding: 0; min-height: 0; color: var(--fg); cursor: pointer; }
.top .usage .mem-seg:hover { text-decoration: underline; }
.top .usage .mem-seg.warn, .top .usage .chip-mem.warn { color: var(--warn); }
.top .usage .mem-seg.bad, .top .usage .chip-mem.bad { color: var(--bad); }
.top .usage .chip-mem { display: none; }
.top .usage .mempanel { position: fixed; top: 50px; right: 12px; z-index: 31; width: min(440px, calc(100vw - 16px)); white-space: normal;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.mempanel .mem-h { margin-bottom: 6px; }
.mempanel .mem-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 104px auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 13px; }
.mempanel .mem-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mempanel .mem-row b { text-align: right; font-weight: 600; }
.mempanel .mem-btns { display: inline-flex; gap: 4px; }
.mempanel .mem-btns .small { padding: 2px 8px; min-height: 0; }
.mempanel .mem-sub { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.mempanel .mem-row.other { color: var(--muted); }
@media (max-width: 1500px) {
  .top .usage .full .sep:has(+ .mem-seg), .top .usage:not(.open) .full .mem-seg { display: none; }
  .top .usage .chip-mem { display: inline-block; font-size: 13px; padding: 6px 9px; margin-left: 6px; border-radius: 999px; background: var(--soft);
    border: 0; white-space: nowrap; min-height: 0; color: var(--fg); }
  .top .usage .chip-mem.warn { color: var(--warn); }
  .top .usage .chip-mem.bad { color: var(--bad); }
}
@media (max-width: 760px) {
  .top .usage .chip-mem.ok { display: none; }
}

/* 「选择流程」 (PAGE-46, plan #9202) */
.sf-pane .sf-in { display: flex; flex-direction: column; min-height: 0; padding: 0; gap: 0; overflow: hidden; }
.sf-tabs { display: flex; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; }
.sf-tab { display: inline-flex; align-items: center; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; padding: 0; font-size: 13px; white-space: nowrap; }
.sf-tab > button, button.sf-tab { border: 0; background: transparent; padding: 5px 12px; font: inherit; color: var(--muted); cursor: pointer; }
.sf-tab.on { background: var(--panel); border-color: var(--line); margin-bottom: -1px; }
.sf-tab.on > button, button.sf-tab.on { color: var(--fg); font-weight: 600; }
.sf-tab .sf-x { padding: 2px 7px 2px 0 !important; color: var(--muted); }
.sf-tab .sf-x:hover { color: var(--bad); }
.sf-changed-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: middle; }
.sf-head { flex: none; padding: 8px 14px 6px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.sf-title-row, .sf-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-h1 { font-size: 15px; }
.grow { flex: 1; }
.sf-seg3 { display: inline-flex; align-items: center; gap: 4px; }
.sf-s3 { padding: 2px 9px; font-size: 12px; border-radius: 5px; }
.sf-s3.on { background: var(--accent); color: #fff; border-color: var(--accent); }
:root[data-theme="dark"] .sf-s3.on { color: #10151b; }
.sf-samples { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
.sf-chk { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12.5px; cursor: pointer; }
.sf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sf-dot.data { background: #111; } :root[data-theme="dark"] .sf-dot.data { background: #f2f2f2; }
.sf-dot.sig { background: #2f6fb3; } .sf-dot.inc { background: #c98a1d; } .sf-dot.excl { background: #7a5ca8; }
.sf-flowbox { flex: 1; min-height: 0; display: flex; overflow: hidden; container-type: inline-size; }
.sf-flow { flex: 1; min-width: 0; overflow: auto; padding: 10px 14px 40px; display: flex; flex-direction: column; gap: 8px; }
.sf-box { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); display: grid; grid-template-columns: minmax(250px, 1fr) minmax(330px, 1.1fr); gap: 4px 14px; padding: 8px 12px; }
.sf-box.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sf-box.steep { border-color: var(--bad); background: color-mix(in srgb, var(--bad-soft) 55%, var(--panel)); }
.sf-box.steep.open { box-shadow: 0 0 0 1px var(--bad); }
.sf-bl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-bh { display: flex; align-items: center; gap: 7px; cursor: pointer; flex-wrap: wrap; }
.sf-idx { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); align-items: center; justify-content: center; font-size: 11px; flex: none; }
.sf-title { font-size: 14px; }
.sf-kind { font-size: 11px; padding: 0 6px; border-radius: 9px; background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.sf-kind.pick { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.sf-kind.fit { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.sf-rule { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sf-steep-tag { font-size: 11px; font-weight: 700; color: #fff; background: var(--bad); border-radius: 9px; padding: 0 8px; }
.sf-caret { color: var(--muted); }
.sf-cond { font-size: 13px; line-height: 1.5; }
.sf-removed { font-size: 12px; color: var(--muted); display: flex; gap: 5px; line-height: 1.4; }
.sf-arrow { color: var(--bad); flex: none; font-weight: 700; }
.sf-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sf-t th { font-weight: 500; font-size: 11px; color: var(--muted); text-align: left; padding: 0 6px 2px; }
.sf-t th.r, .sf-t td.r { text-align: right; }
.sf-t td { padding: 2px 6px; border-top: 1px solid var(--line); }
.sf-sl { white-space: nowrap; display: flex; align-items: center; gap: 5px; border-top: 1px solid var(--line); }
.sf-exp { border: 0; background: none; padding: 0 1px; color: var(--muted); font-size: 11px; }
.sf-per td { border-top: 1px dotted var(--line); color: var(--muted); font-size: 12px; }
.sf-pl { padding-left: 26px !important; }
.sf-kept { font-weight: 600; } .sf-kept.low { color: var(--bad); }
.sf-cum { color: var(--muted); }
.sf-unit { color: var(--muted); }
.sf-draft { color: var(--warn); font-size: 9px; margin-left: 1px; cursor: help; }
.sf-na { color: var(--muted); }
.sf-missing, td.sf-miss { color: var(--warn); }
td.sf-miss { background: repeating-linear-gradient(135deg, var(--warn-soft) 0 6px, transparent 6px 12px); font-size: 12px; cursor: help; }
.sf-why { color: var(--muted); font-size: 11px; }
.sf-fold-line { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); border-radius: 0; background: transparent; padding: 3px 12px; font-size: 12px; color: var(--muted); }
.sf-fold-line:hover { background: var(--soft); }
.sf-seg { border-left: 4px solid var(--accent); padding: 6px 10px; background: var(--accent-soft); border-radius: 0 6px 6px 0; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sf-seg.offline { border-left-color: #6a8f4e; background: color-mix(in srgb, #6a8f4e 14%, var(--panel)); }
.sf-seg-h { display: flex; align-items: center; gap: 10px; }
.sf-seebtn, .sf-open { font-size: 12px; padding: 2px 10px; border-radius: 5px; }
.sf-seg-files { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-seg-f { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; padding: 3px 8px; }
.sf-seg-f code, .sf-cm8 { font-size: 11px; color: var(--muted); }
.sf-seg-note { color: var(--muted); }
.sf-gap { font-size: 12.5px; display: flex; align-items: center; gap: 8px; color: var(--warn); font-weight: 600; }
.sf-gap-sw { width: 38px; height: 14px; border-radius: 3px; border: 1px solid var(--warn); background: repeating-linear-gradient(135deg, var(--warn-soft) 0 6px, transparent 6px 12px); flex: none; }
.sf-boundary { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.sf-bd-l { font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--fg); background: var(--soft); border: 1px solid var(--line); padding: 1px 10px; border-radius: 9px; }
.sf-bd-line { flex: 1; border-top: 3px double var(--muted); }
.sf-box.k-final { border-color: var(--ok); }
.sf-final-big { display: flex; align-items: baseline; gap: 4px; }
.sf-final-n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-purity { font-size: 14px; font-weight: 600; color: var(--ok); }
.sf-final-comp { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.sf-comp { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.sf-comp-r { display: grid; grid-template-columns: 170px 1fr 120px; gap: 6px; align-items: center; font-size: 12px; }
.sf-comp-k { overflow-wrap: anywhere; line-height: 1.3; }
.sf-comp-bar { height: 7px; background: var(--soft); border-radius: 3px; display: block; } .sf-comp-bar > i { display: block; height: 100%; background: var(--muted); border-radius: 3px; }
.sf-comp-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.sf-link { font-size: 12.5px; }
.sf-inline { grid-column: 1 / -1; border-top: 1px solid var(--accent); margin-top: 4px; padding-top: 8px; }
.sf-detail { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.sf-dh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 22px; }
.sf-line { line-height: 1.55; }
.sf-lack { color: var(--warn); }
.sf-vars { margin: 2px 0 0 18px; padding: 0; }
.sf-prov { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sf-prov td { padding: 1px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.sf-prov td.r { text-align: right; white-space: nowrap; }
.sf-draft-chip { font-size: 10.5px; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 0 6px; }
.sf-progblock { display: flex; flex-direction: column; gap: 8px; }
.sf-pb { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sf-pb-h { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--soft); flex-wrap: wrap; }
.sf-changed, .sf-changed-chip { font-size: 11.5px; color: var(--warn); background: var(--warn-soft); border: 1px solid transparent; border-radius: 9px; padding: 0 8px; }
.sf-code { font-family: var(--mono); font-size: 12px; line-height: 1.5; overflow-x: auto; background: var(--panel); }
.sf-ln { display: flex; gap: 10px; padding: 0 8px; white-space: pre; align-items: baseline; position: relative; }
.sf-lno { width: 40px; text-align: right; color: var(--muted); flex: none; user-select: none; }
.sf-lt { flex: 1; }
.sf-ln.in-span { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.sf-ln.hl { background: color-mix(in srgb, var(--warn-soft) 95%, transparent); box-shadow: inset 3px 0 0 var(--warn); }
.sf-ln.hl-hardcoded { background: color-mix(in srgb, var(--bad-soft) 90%, transparent); box-shadow: inset 3px 0 0 var(--bad); }
.sf-ln.hl-param { background: color-mix(in srgb, var(--ok-soft) 90%, transparent); box-shadow: inset 3px 0 0 var(--ok); }
.sf-tag { font-family: var(--font); font-size: 11px; border-radius: 8px; padding: 0 7px; white-space: nowrap; background: var(--soft); }
.sf-tag.hard { background: var(--bad); color: #fff; } .sf-tag.param { background: var(--ok); color: #fff; } .sf-tag.cut { background: var(--warn); color: #fff; }
:root[data-theme="dark"] .sf-tag { color: #10151b !important; }
.sf-edge { font-family: var(--font); font-size: 10.5px; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 0 5px; }
.sf-fold { display: block; width: 100%; text-align: center; border: 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); border-radius: 0; background: var(--soft); color: var(--muted); font-size: 11.5px; padding: 1px; }
.sf-outside { font-family: var(--font); font-size: 11px; color: var(--muted); padding: 2px 8px; background: var(--soft); }
.sf-links { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 10px; }
.sf-progs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sf-prog { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sf-path { font-size: 11px; color: var(--muted); }
.sf-cm { flex: 1; min-height: 0; } .sf-cm .CodeMirror { height: 100%; font-size: 12.5px; background: var(--panel); color: var(--fg); }
.sf-cm .CodeMirror-gutters { background: var(--soft); border-right: 1px solid var(--line); }
.sf-cm .sf-cm-span { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.sf-cm .sf-cm-hl { background: color-mix(in srgb, var(--warn-soft) 100%, transparent); box-shadow: inset 3px 0 0 var(--warn); }
.sf-cm .sf-cm-goto { background: color-mix(in srgb, #f4d35e 55%, transparent) !important; }
.sf-diff { max-height: 320px; overflow: auto; border-top: 1px solid var(--line); padding: 4px; font-size: 12px; }
.sf-err { color: var(--bad); padding: 8px; }
@container (max-width: 760px) { .sf-flow.v .sf-box { grid-template-columns: 1fr; } }
.sf-flow.v > * { flex: none; }
.sf-pane { display: flex; flex-direction: column; }
.sf-pane > .sf-in { flex: 1; height: 100%; min-height: 0; }
@container (max-width: 1000px) { .sf-why { display: none; } }
.sf-note { display: flex; gap: 6px; padding: 1px 8px 0 58px; font-family: var(--font); line-height: 1.4; }
.sf-box { position: relative; }
.sf-flow.v { gap: 16px; }
.sf-flow.v > .sf-box:not(.k-final)::after { content: "↓"; position: absolute; left: 18px; bottom: -17px; color: var(--muted); font-size: 14px; line-height: 1; }
.sf-seebtn, .sf-open, .sf-changed { white-space: nowrap; }
.sf-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.sf-items > li { font-size: 13px; line-height: 1.5; }
.sf-items > li > b { display: inline-block; min-width: 3.4em; margin-right: 6px; font-weight: 600; color: var(--muted); font-size: 12px; }
.sf-li > li.rm { color: var(--fg); } .sf-li > li.rm > b { color: var(--bad); }
.sf-sub { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.sf-prov-l > li > b { margin-right: 6px; color: var(--fg); min-width: 0; }
.sf-role { font-size: 11px; border-radius: 8px; padding: 0 6px; background: var(--soft); }
.sf-role.hardcoded { background: var(--bad-soft); color: var(--bad); } .sf-role.param { background: var(--ok-soft); color: var(--ok); } .sf-role.cut { background: var(--warn-soft); color: var(--warn); }
.sf-codeln { text-align: left; }
.sf-undeclared { padding: 28px 14px; color: var(--muted); font-size: 14px; }
.sf-problem { padding: 4px 10px; background: var(--warn-soft); border-radius: 6px; font-size: 12.5px; }
.sf-prob-b { color: var(--warn); font-weight: 600; }
.sf-prob-l { margin: 4px 0 2px 16px; }
@media (max-width: 760px) { .sf-box { grid-template-columns: 1fr; } .sf-comp-r { grid-template-columns: 110px 1fr 90px; } .sf-final-comp { grid-template-columns: 1fr; } }
.sf-phead { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sf-phead .sf-legend { margin-left: auto; }
.sf-comp-r { grid-template-columns: 120px minmax(30px, 1fr) auto; }
.sf-figs { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; } .sf-figs img, .sf-figs canvas { max-width: 100%; }
.sf-rulenum { font-family: var(--mono); font-size: 12px; }
.sf-ruletext { margin: 2px 0 0 1.2em; color: var(--text); }
.sf-rulewrap { position: relative; display: inline-block; }
button.sf-rule { font-family: var(--mono); font-size: 11px; color: var(--muted); background: none; border: 1px solid var(--border, #ccc); border-radius: 8px; padding: 0 6px; cursor: pointer; }
button.sf-rule[aria-expanded=true], button.sf-rule:hover { color: var(--text); border-color: var(--muted); }
.sf-rulepop { position: absolute; z-index: 20; left: 0; top: 100%; margin-top: 4px; width: 440px; max-width: calc(100vw - 48px); padding: 8px 10px; background: var(--bg, #fff); color: var(--text); border: 1px solid var(--border, #ccc); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 13px; font-weight: normal; text-align: left; cursor: auto; }
.sf-rulepop .body { font-size: 13px; margin-top: 4px; border: 0; padding: 0; background: none; box-shadow: none; }
.sf-rulepop .body p { margin: 0 0 4px; } .sf-rulepop .body ul { margin: 2px 0; padding-left: 1.2em; }
/* 「定义」 (PAGE-47) */
.def-pane { display: flex; flex-direction: column; }
.def-pane > .def-in { flex: 1; height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
.def-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.def-path { font-size: 12.5px; }
.def-cols { flex: 1; min-height: 0; display: flex; }
.def-tocbox { flex: none; width: 240px; display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.def-tocbox .def-toc { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.def-scroll { flex: 1; min-width: 0; overflow: auto; padding: 8px 24px 80px; }
.def-scroll .def-h { scroll-margin-top: 6px; margin: 1.1em 0 .4em; }
.def-scroll h1.def-h { font-size: 1.5em; } .def-scroll h2.def-h { font-size: 1.25em; border-bottom: 1px solid var(--line); padding-bottom: 3px; } .def-scroll h3.def-h { font-size: 1.08em; }
.def-scroll .def-b { margin: 0 0 .5em; padding: 2px 6px; border-radius: 4px; }
.def-scroll .def-b.def-rule { border-left: 3px solid var(--line); padding-left: 10px; }
.def-scroll .def-b.def-rule > p:first-child { margin-top: 0; }
.def-scroll .def-b .def-lead { font-family: var(--mono); font-size: .92em; }
.def-scroll .flash { animation: def-flash 1.8s ease-out; }
@keyframes def-flash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }
a.def-rule { font-family: var(--mono); font-size: .92em; text-decoration: none; border-bottom: 1px dotted var(--accent); }
.sf-indef { display: block; margin-top: 6px; }
@media (max-width: 760px) { .def-tocbox { display: none; } .def-scroll { padding: 8px 12px 80px; } }
.def-pane.toc-off .def-tocbox { display: none; }
/* 「步骤」 (PAGE-48) and 「出处」 (PAGE-26) */
.st-cols { flex: 1; min-height: 0; }
.st-cols .def-tocbox { width: 120px; }
.st-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.st-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.st-filter { flex: 1; max-width: 360px; }
.st-rows { padding-top: 4px; }
.st-g { margin: .9em 0 .3em; font-size: 1.05em; }
.st-row { border-bottom: 1px solid var(--line); }
.st-line { display: flex; align-items: baseline; gap: 8px; padding: 5px 4px; cursor: pointer; min-width: 0; }
.st-line:hover { background: var(--soft); }
.st-name { flex: none; width: 10em; overflow: hidden; text-overflow: ellipsis; }
.st-d { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.st-detail { padding: 4px 8px 12px 26px; display: flex; flex-direction: column; gap: 4px; }
.st-sub { margin-top: 6px; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.st-files { list-style: none; padding: 0; margin: 0; }
.st-res, .st-job, .st-file { margin-right: 10px; }
.st-row .badge.st-stale { background: var(--warn-soft, #fdecc8); }
.rcard-prov { margin-top: 4px; }
.rcard-prov-b { display: flex; flex-direction: column; gap: 3px; padding: 4px 0 2px 10px; border-left: 2px solid var(--line); margin-top: 3px; }
@media (max-width: 760px) { .st-cols .def-tocbox { display: none; } .st-name { min-width: 6em; } }

/* 「统计」 (PAGE-49): linear axes, inline SVG; the colours follow the theme */
.sx { position: relative; --sx-c0: #2f5d8a; --sx-c1: #b5651d; --sx-c2: #2e6b3f; --sx-c3: #8a3f7a; --sx-c4: #a08a1f; --sx-c5: #1f8a8a; --sx-c6: #a83a3a; --sx-c7: #5f6fb0; --sx-c8: #8d8780; }
:root[data-theme="dark"] .sx { --sx-c0: #8db6dc; --sx-c1: #e2a46b; --sx-c2: #8fcf9f; --sx-c3: #d49bc6; --sx-c4: #d8c66a; --sx-c5: #7fd0d0; --sx-c6: #e08585; --sx-c7: #a5b1e6; --sx-c8: #a09a90; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sx { --sx-c0: #8db6dc; --sx-c1: #e2a46b; --sx-c2: #8fcf9f; --sx-c3: #d49bc6; --sx-c4: #d8c66a; --sx-c5: #7fd0d0; --sx-c6: #e08585; --sx-c7: #a5b1e6; --sx-c8: #a09a90; } }
.sx-seg { display: flex; gap: 6px; margin: 4px 0 10px; }
.sx-day.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sx-now { margin-bottom: 8px; }
.sx-part { margin: 1.2em 0 .2em; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.sx-sec { margin: 10px 0 16px; }
.sx-sec h2 { font-size: 1.02em; margin: 0 0 2px; }
.sx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sx-four { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
@media (max-width: 560px) { .sx-four { grid-template-columns: 1fr; } }
.sx-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sx-wrap { overflow-x: auto; }
.sx-rhythm { min-width: 640px; max-width: 1200px; }
.sx-t { fill: var(--muted); font-size: 10px; }
.sx-hrs { fill: var(--fg); }
.sx-grid { stroke: var(--line); stroke-width: 1; }
.sx-bar { fill: var(--accent); }
.sx-bar:hover { opacity: .75; }
.sx-ln { stroke: var(--accent); stroke-width: 1.5; }
.sx-pt { fill: var(--fg); }
.sx-dot { fill: var(--fg); }
.sx-tick { stroke: var(--muted); stroke-width: .7; opacity: .7; }
.sx-act { fill: var(--accent-soft); }
.sx-sleep { fill: var(--line); }
.sx-cap { font-size: 12px; color: var(--muted); margin-top: 6px; }
.sx-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; }
.sx-sw { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; }
.sx-c0 { fill: var(--sx-c0); background: var(--sx-c0); } .sx-c1 { fill: var(--sx-c1); background: var(--sx-c1); } .sx-c2 { fill: var(--sx-c2); background: var(--sx-c2); }
.sx-c3 { fill: var(--sx-c3); background: var(--sx-c3); } .sx-c4 { fill: var(--sx-c4); background: var(--sx-c4); } .sx-c5 { fill: var(--sx-c5); background: var(--sx-c5); }
.sx-c6 { fill: var(--sx-c6); background: var(--sx-c6); } .sx-c7 { fill: var(--sx-c7); background: var(--sx-c7); } .sx-c8 { fill: var(--sx-c8); background: var(--sx-c8); }
.sx-tip { position: absolute; z-index: 5; max-width: 260px; padding: 4px 8px; font-size: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.15); pointer-events: none; }
@media (max-width: 760px) { .sx-two { grid-template-columns: 1fr; } }

/* 细节入口 (PAGE-26, plan #9411): 样本, 决定, 读全文, 文档的 PDF */
.ana-sample.unclear { background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 4px; padding-left: 6px; }
.ana-unclear-note { color: var(--warn); margin: 2px 0 6px; }
.ana-prov { white-space: pre-wrap; overflow-wrap: anywhere; }
.ana-kv { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 8px; padding: 2px 0; }
.ana-kv code { overflow-wrap: anywhere; }
.ana-sample > summary { overflow-wrap: anywhere; }
.ana-dec { display: block; padding: 5px 8px; border-radius: 6px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.ana-dec:hover { background: var(--soft); }
.ana-dec-at { margin-left: 8px; }
.ana-decs { max-height: 60vh; overflow: auto; }
.ana-fullrow { margin: 6px 0; }
.ana-full { margin-top: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow-wrap: break-word; min-width: 0; }
/* a table in a record's full text fits the card: every column visible, long text and formulas wrap in their cells.
   Why the first column was wide: .body th is nowrap, .body table is display:block (sized by its widest line) and the first
   column is sticky; all three are undone here. Only a table with many columns (class wide, set in studyFullBody) scrolls sideways. */
.ana-full table { display: table; width: 100%; table-layout: auto; max-width: 100%; }
.ana-full th, .ana-full td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; position: static; background: none; min-width: 7.5em; padding: 3px 6px; font-size: 12.5px; }
.ana-full th { text-align: left; background: var(--soft); }
.ana-full table.wide { display: block; width: auto; overflow-x: auto; }
.ana-full table.wide th, .ana-full table.wide td { min-width: 9em; max-width: 24em; overflow-wrap: break-word; }
.ana-full td .katex, .ana-full th .katex { white-space: normal; }
.ana-full .katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.ana-full img { max-width: 100%; }
.ana-pdf { margin-left: 4px; padding: 0 8px; }
.pdfdlg { position: fixed; inset: 3vh 3vw; z-index: 2000; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.pdfdlg-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pdfdlg-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
.pdfdlg-body canvas { display: block; width: 100%; max-width: 1100px; margin: 0 auto 10px; background: #fff; }