/* Chat Desk v3 (docs/design-v3): Fast Toner blue on cool paper, one thin CMYK strip. A left sidebar (groups, red
   waiting badge) and one page per question; on a phone the sidebar is a top bar with a menu button. Status colours
   mean state only; magnitude uses the one blue ramp. Every count is a link; JavaScript only adds drawer, tips,
   menu and theme. */
:root {
  --paper: #f4f6f7; --sheet: #ffffff; --ink: #14171a; --ink2: #4a5259; --muted: #656d74; --rule: #e2e6e9; --wash: #eef1f3;
  --cyan: #0069d3; --cyanink: #0050a8;
  --us: #c7322f; --onus: #ffffff; --later: #c9601e; --cust: #8a6a12; --custfill: #e9b949; --ok: #1e8f4e; --none: #c9cfd4; --unhappy: #c4006b;
  --bot: #9aa2a9; --code: #f7f9fa; --bubble: #e7f0fc;
  --c: #00a0e3; --m: #e5007e; --y: #ffe100; --k: #14171a;
  --h0: #eef1f3; --h1: #dbe8fb; --h2: #b4cff6; --h3: #7fabee; --h4: #3f82e0; --h5: #0069d3; --h6: #0b4a9c; --onh: #14171a; --onhs: #ffffff;
  --good-bg: rgba(30, 143, 78, 0.14); --bad-bg: rgba(199, 50, 47, 0.12);
  --shadow: 0 12px 40px rgba(20, 23, 26, 0.16);
  --display: "Bai Jamjuree", "IBM Plex Sans Thai", system-ui, sans-serif;
  --body: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0e1113; --sheet: #161a1d; --ink: #e9edef; --ink2: #b4bcc2; --muted: #8f979e; --rule: #262c30; --wash: #1d2226;
    --cyan: #4d9bf0; --cyanink: #8dbdf5;
    --us: #e66262; --onus: #14171a; --later: #f0965f; --cust: #e9b949; --custfill: #c99a2e; --ok: #3cb371; --none: #4b5359; --unhappy: #f05aa8;
    --bot: #6b747a; --code: #111417; --bubble: #13243d; --k: #e9edef;
    --h0: #1d2226; --h1: #10233f; --h2: #173661; --h3: #1f4f8c; --h4: #2c6bbd; --h5: #4d9bf0; --h6: #a9cbf7; --onh: #e9edef; --onhs: #0e1113;
    --good-bg: rgba(60, 179, 113, 0.18); --bad-bg: rgba(230, 98, 98, 0.18);
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1113; --sheet: #161a1d; --ink: #e9edef; --ink2: #b4bcc2; --muted: #8f979e; --rule: #262c30; --wash: #1d2226;
  --cyan: #4d9bf0; --cyanink: #8dbdf5;
  --us: #e66262; --onus: #14171a; --later: #f0965f; --cust: #e9b949; --custfill: #c99a2e; --ok: #3cb371; --none: #4b5359; --unhappy: #f05aa8;
  --bot: #6b747a; --code: #111417; --bubble: #13243d; --k: #e9edef;
  --h0: #1d2226; --h1: #10233f; --h2: #173661; --h3: #1f4f8c; --h4: #2c6bbd; --h5: #4d9bf0; --h6: #a9cbf7; --onh: #e9edef; --onhs: #0e1113;
  --good-bg: rgba(60, 179, 113, 0.18); --bad-bg: rgba(230, 98, 98, 0.18);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ---- base ---- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--body); overflow-x: hidden; }
a { color: var(--cyanink); text-decoration: none; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
h1, h2 { text-wrap: balance; }
h2 { margin: 0; font-size: 20px; line-height: 1.3; }
.mono { font-family: var(--mono); }
.disp { font-family: var(--display); }
.empty { color: var(--muted); padding: 14px 0; margin: 0; font-size: 14px; }
.empty.pad { padding: 20px; }
.cap { margin: 0; font-size: 13px; color: var(--muted); }
.count { color: var(--muted); font-size: 13px; font-weight: 500; }
.us { color: var(--us); } .later { color: var(--later); } .unhappy { color: var(--unhappy); }
.kick { font-size: 11.5px; letter-spacing: 0.14em; color: var(--muted); }
.chan { font-size: 12px; color: var(--muted); }
.cmyk { display: grid; grid-template-columns: repeat(4, 1fr); height: 4px; }
.cmyk i:nth-child(1) { background: var(--c); } .cmyk i:nth-child(2) { background: var(--m); }
.cmyk i:nth-child(3) { background: var(--y); } .cmyk i:nth-child(4) { background: var(--k); }
.plate { background: #ffffff; border-radius: 8px; padding: 6px 8px; line-height: 0; display: inline-block; }
.plate img { display: block; width: 150px; height: auto; }
.tag-line { font-size: 11px; letter-spacing: 0.16em; color: var(--muted); padding-left: 8px; }
.tag { display: inline-block; font-size: 12px; line-height: 1.6; padding: 0 7px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.pill { display: inline-block; font-size: 12px; line-height: 1.6; padding: 0 7px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.pill.urgent { background: var(--us); color: var(--onus); }
.pill.urgent.done { background: none; color: var(--us); box-shadow: inset 0 0 0 1px var(--us); }
.pill.neg { box-shadow: inset 0 0 0 1px var(--unhappy); color: var(--unhappy); }
.ostate { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); white-space: nowrap; }
.ostate i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pill-state { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--wash); white-space: nowrap; }
.pill-state i { width: 8px; height: 8px; border-radius: 50%; }
.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend i.wide { width: 14px; }
.scroll { overflow-x: auto; }

/* ---- shell: sidebar + content ---- */
.shell { display: flex; min-height: 100vh; }
.side { flex: 0 0 248px; width: 248px; background: var(--sheet); border-right: 1px solid var(--rule); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-top { padding: 18px 20px 10px; }
.side .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--ink); }
.side .compact, .side .menu, .side .waitbtn { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding-bottom: 16px; }
.grp { font-size: 12px; font-weight: 600; color: var(--muted); padding: 16px 22px 4px; letter-spacing: 0.04em; }
.item { display: flex; align-items: center; gap: 10px; padding: 0 14px; margin: 0 8px; min-height: 40px; border-radius: 8px; color: var(--ink2); font-size: 14.5px; }
.item svg { flex: none; }
a.item:hover { background: var(--wash); color: var(--ink); }
a.item.on { background: var(--wash); color: var(--ink); font-weight: 600; }
.item.folder.on { color: var(--ink); font-weight: 600; }
.sub { margin: 0 8px 4px 31px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; }
.sub a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 10px 0 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink2); font-size: 14px; border-radius: 0 8px 8px 0; }
.sub a:hover { background: var(--wash); color: var(--ink); }
.sub a.on { border-left-color: var(--ink); background: var(--wash); color: var(--ink); font-weight: 600; }
.badge { background: var(--us); color: var(--onus); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 600; line-height: 1.7; }
.side-foot { margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.foot-actions form { margin: 0; }
.theme, .logout { border: 1px solid var(--rule); background: var(--sheet); color: var(--ink2); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; min-height: 36px; }
.waitbtn { align-items: center; gap: 6px; background: var(--us); color: var(--onus); border-radius: 999px; padding: 0 14px; height: 44px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.waitbtn:hover { color: var(--onus); }
.waitbtn i { width: 7px; height: 7px; border-radius: 50%; background: var(--onus); }
.waitbtn.calm { background: var(--wash); color: var(--ink2); }
.waitbtn.calm i { background: var(--ok); }
.content { flex: 1 1 auto; min-width: 0; }
.in { max-width: 1240px; margin: 0 auto; padding: 28px 20px 56px; display: flex; flex-direction: column; gap: 22px; }

/* ---- page head ---- */
.pagehead { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.ph-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 420px; }
.crumb { font-size: 12.5px; color: var(--muted); }
.pagehead h1 { margin: 0; font-size: 34px; line-height: 1.2; }
.question { margin: 0; color: var(--ink2); }
.ph-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ctl-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--wash); border-radius: 8px; padding: 3px; gap: 2px; }
.seg a { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--ink2); padding: 6px 12px; border-radius: 6px; min-height: 36px; white-space: nowrap; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--rule); }
.step { display: inline-grid; place-items: center; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); width: 36px; height: 36px; border-radius: 8px; font-size: 13px; }
.step.off { color: var(--rule); }
.when { font-family: var(--display); min-width: 8.5em; text-align: center; font-weight: 600; white-space: nowrap; }
.prog { margin: 0; font-size: 12.5px; color: var(--later); }

/* ---- cards ---- */
.card { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; }
.card.pad { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.card.dashed { border-style: dashed; }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.head > a { font-size: 14px; }
.tiles, .kpis, .digest, .facts4, .hero { display: grid; gap: 1px; background: var(--rule); overflow: hidden; }
.kpis > *, .digest > *, .facts4 > *, .hero > * { background: var(--sheet); }

/* overview */
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 14px; color: var(--ink); border-top: 3px solid transparent; }
.kpi:hover { color: var(--ink); background: color-mix(in srgb, var(--wash) 50%, var(--sheet)); }
.kpi.us { border-top-color: var(--us); }
.kpi .k { font-size: 13.5px; color: var(--ink2); }
.kpi .row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpi .v { font-size: 40px; line-height: 1.05; }
.kpi .v small { font-size: 20px; }
.kpi.us .v { color: var(--us); } .kpi.unhappy .v { color: var(--unhappy); }
.delta.good { background: var(--good-bg); color: var(--ok); }
.delta.bad { background: var(--bad-bg); color: var(--us); }
.delta.flat { background: var(--wash); color: var(--muted); }
.kpi .note { font-size: 12.5px; color: var(--muted); min-height: 2.6em; }
.spark { display: block; width: 100%; height: 34px; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 20px; align-items: start; }
.clock { border-left: 3px solid var(--us); padding-left: 10px; display: flex; flex-direction: column; min-width: 0; }
.clock b { color: var(--us); font-size: 15px; white-space: nowrap; }
.clock small { color: var(--muted); font-size: 11.5px; }
.now-row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); color: var(--ink); }
.now-row:hover, .wrow:hover { color: var(--ink); background: var(--wash); }
.now-main, .wmain, .cbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sum { font-size: 14.5px; overflow-wrap: anywhere; }
.meta { display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); }
.rrow { display: grid; grid-template-columns: 11em minmax(0, 1fr) 3em 3em; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--rule); }
.rrow.full { grid-template-columns: minmax(7em, 10.5em) minmax(0, 1fr) 2.6em 3em 3.4em; gap: 10px; padding: 11px 0; }
.rrow.colhead { border-top: 0; padding: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.rrow .name { color: var(--ink); font-size: 14.5px; }
.rrow .name:hover { color: var(--cyanink); }
.rrow .n, .rrow .share, .rrow .wait { text-align: right; }
.rrow .share { font-size: 12.5px; color: var(--muted); }
.rrow .wait { font-size: 12.5px; color: var(--us); }
.sbar { display: flex; gap: 2px; height: 12px; }
.rrow.full .sbar { height: 14px; }
.sbar a { display: block; height: 100%; border-radius: 2px; min-width: 3px; }
.sbar a:hover { filter: brightness(0.9); }
.digest { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.digest a { padding: 16px 20px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.digest a:hover { color: var(--ink); background: color-mix(in srgb, var(--wash) 50%, var(--sheet)); }
.digest .k, .facts4 .k { font-size: 13px; color: var(--ink2); }
.digest b { font-size: 22px; }
.digest .note { font-size: 12.5px; color: var(--muted); }

/* waiting */
.hero { grid-template-columns: minmax(300px, 1.6fr) repeat(4, minmax(140px, 1fr)); }
.hero-n { padding: 20px 24px; border-left: 4px solid var(--us); display: flex; align-items: baseline; gap: 14px; color: var(--ink); }
.hero-n:hover { color: var(--ink); }
.hero-n > b { font-size: 72px; line-height: 1; color: var(--us); }
.hero-n span { display: flex; flex-direction: column; }
.hero-n span b { font-size: 18px; }
.hero-n small { color: var(--muted); white-space: nowrap; }
.fact { padding: 20px; display: flex; flex-direction: column; color: var(--ink); }
.fact span { font-size: 13px; color: var(--ink2); }
.fact b { font-size: 22px; white-space: nowrap; }
a.fact:hover { color: var(--ink); background: var(--wash); }
.list .head { padding-bottom: 2px; }
.wrow { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 12em; gap: 18px; padding: 14px 0; border-top: 1px solid var(--rule); color: var(--ink); }
.wrow .clock b { font-size: 16px; }
.wmain { gap: 5px; }
.wmain .sum { font-size: 15px; }
.next { font-size: 14px; }
.next b { color: var(--ink); }
.next span { color: var(--ink2); }
.wside { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.wside b { color: var(--ink2); }
.olds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.old { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--wash); border-radius: 8px; color: var(--ink); }
.old:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.old b { font-size: 13px; color: var(--later); }
.old span { font-size: 13.5px; color: var(--ink2); overflow-wrap: anywhere; }
.more-olds summary { cursor: pointer; color: var(--cyanink); font-size: 14px; padding: 8px 0; }

/* reasons */
.reasons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 20px; align-items: start; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); min-height: 32px; }
.check .box { width: 16px; height: 16px; border: 1px solid var(--muted); border-radius: 4px; display: inline-grid; place-items: center; font-size: 11px; color: var(--ink); }
.mx { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 14px; }
.mx th { font-weight: 500; color: var(--ink2); font-size: 12.5px; text-align: right; padding: 4px 8px; white-space: nowrap; }
.mx thead th:first-child { text-align: left; }
.mx tbody th { text-align: left; font-size: 14px; color: var(--ink); font-weight: 400; padding: 0 8px 0 0; }
.mx td { padding: 0; text-align: right; }
.mx td a, .mx .zero { display: block; padding: 7px 10px; border-radius: 4px; }
.mx td a:hover { outline: 2px solid var(--ink); }
.mx .zero { color: var(--muted); }
.mx .tot { padding: 0 8px; font-weight: 600; }
.ramp-key { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.ramp { display: inline-flex; gap: 2px; }
.ramp i { width: 22px; height: 10px; }
.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); column-gap: 32px; }
.prow { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) 6em 2.4em 3.4em; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); color: var(--ink); }
.prow:hover { color: var(--ink); background: var(--wash); }
.prow .rank { font-size: 12.5px; color: var(--muted); }
.prow .pname { font-size: 14px; overflow-wrap: anywhere; }
.prow .track { height: 10px; background: var(--wash); border-radius: 2px; }
.prow .track i { display: block; height: 10px; background: var(--cyan); border-radius: 2px; }
.prow b { text-align: right; }
.pdelta { text-align: right; font-size: 12.5px; }
.pdelta.up { color: var(--ok); } .pdelta.down { color: var(--us); } .pdelta.flat { color: var(--muted); }

/* times */
.facts4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.facts4 > div { padding: 18px 22px; display: flex; flex-direction: column; }
.facts4 b { font-size: 23px; line-height: 1.35; }
.facts4 small { color: var(--muted); font-size: 13px; }
.heat { display: grid; gap: 3px; }
.heat .hl { font-size: 11px; text-align: center; color: var(--muted); border-bottom: 2px solid transparent; padding-bottom: 2px; white-space: nowrap; overflow: hidden; }
.heat .hl.open { color: var(--ink); border-bottom-color: var(--ink); }
.heat .rl { font-size: 13px; color: var(--ink2); align-self: center; white-space: nowrap; }
.heat > a, .heat > span:not(.hl):not(.rl) { display: grid; place-items: center; height: 40px; border-radius: 4px; font: 500 12px var(--mono); }
.heat > a:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.heat.tall { display: none; }
.heat-key { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.open-key { display: inline-flex; align-items: center; gap: 6px; }
.open-key i { width: 22px; height: 2px; background: var(--ink); }

/* chat list + detail, trace list + run */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .none { font-size: 13px; color: var(--ink2); }
.filters .check { margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13.5px; min-height: 34px; }
.chip b { font-weight: 400; color: var(--muted); font-size: 16px; width: 22px; text-align: center; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.qf { border: 1px solid var(--rule); background: var(--sheet); color: var(--ink2); border-radius: 8px; padding: 6px 12px; font-size: 13.5px; display: inline-flex; gap: 8px; align-items: center; min-height: 36px; }
.qf:hover { color: var(--ink); }
.qf.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.qf i { width: 10px; height: 10px; border-radius: 2px; }
.master { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.list-card, .runs { flex: 1 1 380px; min-width: 0; overflow: hidden; }
.list-cap { padding: 10px 14px; font-size: 12px; color: var(--muted); }
.list-foot:not(:empty) { padding: 12px 14px; border-top: 1px solid var(--rule); }
.crow { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-top: 1px solid var(--rule); color: var(--ink); }
.crow:hover { color: var(--ink); background: var(--wash); }
.crow.sel, .run.sel { background: var(--wash); box-shadow: inset 3px 0 0 var(--ink); }
.crow .when { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; }
.crow .when b { color: var(--ink); font-size: 12.5px; }
.detail { flex: 1 1 420px; min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.dhead { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dhead > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dbox { background: var(--wash); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.dbox .cap { font-size: 12.5px; }
.msgs { display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.msg.staff, .msg.bot { align-items: flex-end; }
.msg small { font-size: 11px; color: var(--muted); }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 10px; font-size: 14px; background: var(--sheet); border: 1px solid var(--rule); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.staff .bubble { background: var(--bubble); }
.msg.bot .bubble { background: var(--wash); color: var(--ink2); font-size: 13px; }

.runs { flex: 1 1 260px; }
.runs-head { padding: 12px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.runs-head b { font-size: 16px; }
.runs-head span { font-size: 12px; color: var(--muted); }
.run { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--rule); padding: 12px 16px; color: var(--ink); }
.run:hover { color: var(--ink); background: var(--wash); }
.rtop { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.rname { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; font-weight: 600; min-width: 0; }
.rname i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rtitle { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; }
.rmeta { font-size: 11.5px; color: var(--muted); }
.runpanel { flex: 3 1 600px; min-width: 0; overflow: hidden; }
.rp-head { padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 8px; }
.rp-title { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.rp-stats { display: flex; gap: 4px 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink2); }
.rp-stats b { color: var(--ink); font-weight: 500; }
.rp-stats b.us { color: var(--us); } .rp-stats b.later { color: var(--later); }
.tr { display: grid; grid-template-columns: minmax(0, 1.3fr) 5.4em minmax(140px, 1fr) 5.8em; gap: 12px; align-items: center; min-height: 38px; border-top: 1px solid var(--rule); padding: 0 14px; color: var(--ink); }
a.tr:hover { color: var(--ink); background: var(--wash); }
.tr.sel { background: var(--wash); box-shadow: inset 3px 0 0 var(--ink); }
.tr.axis { min-height: 30px; background: var(--wash); font-size: 11px; color: var(--muted); }
.tr.axis .ticks { display: flex; justify-content: space-between; gap: 4px; white-space: nowrap; }
.tname { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr.d1 .tname { padding-left: 18px; }
.tr.d2 .tname { padding-left: 36px; }
.caret { color: var(--muted); width: 10px; font-size: 11px; flex: none; }
.tname .label { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tname .label.strong { font-weight: 600; }
.tat { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.tbar { position: relative; height: 14px; background: linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat; }
.tbar i { position: absolute; top: 1px; height: 12px; border-radius: 3px; }
.tdur { font-size: 12px; text-align: right; color: var(--ink2); white-space: nowrap; }
.tdur.us { color: var(--us); } .tdur.later { color: var(--later); }
.ktag { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--mono); color: var(--ink2); border: 1px solid var(--rule); border-radius: 4px; padding: 0 6px; line-height: 1.7; white-space: nowrap; flex: none; }
.ktag i { width: 8px; height: 8px; border-radius: 2px; }
.steppanel { border-top: 1px solid var(--rule); padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.sp-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp-head b { font-size: 15px; overflow-wrap: anywhere; }
.sp-head .mono { font-size: 12px; color: var(--muted); margin-left: auto; }
.io { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.io > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pre { margin: 0; background: var(--code); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); min-height: 4em; max-height: 440px; overflow-y: auto; }
.trace-legend { gap: 6px 16px; }

/* ---- answer guide ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn { border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); border-radius: 8px; padding: 0 14px; min-height: 38px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
a.btn:hover, .btn:hover { color: var(--ink); border-color: var(--ink2); }
.btn.primary, a.btn.primary { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.guide-counts { display: flex; gap: 18px; font-size: 12.5px; color: var(--ink2); }
.guide-counts b { color: var(--ink); font-size: 18px; font-weight: 500; }
.guide-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule); background: var(--sheet); border-radius: 8px; padding: 0 4px 0 12px; min-height: 44px; flex: 1 1 280px; color: var(--muted); }
.search:focus-within { border-color: var(--cyan); }
.search input[type="search"] { border: 0; outline: 0; background: none; font: inherit; color: var(--ink); flex: 1; min-width: 0; min-height: 40px; }
.search .btn { min-height: 34px; }
.guide { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.topics { flex: 1 1 200px; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.topic { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font-size: 14px; color: var(--ink2); border-radius: 8px; }
.topic:hover { background: var(--wash); color: var(--ink); }
.topic.on { background: var(--wash); color: var(--ink); font-weight: 600; }
.topic .mono { font-size: 12px; color: var(--muted); font-weight: 400; }
.guide-main { flex: 4 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.qa-list { overflow: hidden; }
.qa-head, .qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.qa-head { font-size: 11.5px; color: var(--muted); background: var(--wash); }
.qa-head span { padding: 8px 16px; }
.qa { border-top: 1px solid var(--rule); color: var(--ink); }
.qa:hover { color: var(--ink); background: var(--wash); }
.qa.sel { background: var(--wash); box-shadow: inset 3px 0 0 var(--cyan); }
.qa > span { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qa-q b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.qa-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); }
.qa-a { border-left: 1px solid var(--rule); }
.clamp { font-size: 14.5px; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.qa-stat { font-size: 12px; color: var(--muted); }
.apill { display: inline-flex; align-items: center; font-size: 12px; border-radius: 999px; padding: 0 9px; line-height: 1.8; white-space: nowrap; background: var(--wash); color: var(--ink2); }
.apill.staff { background: var(--bubble); color: var(--cyanink); }
.apill.wide { white-space: normal; }
.apill.done { background: var(--sheet); color: var(--ok); box-shadow: inset 0 0 0 1px var(--rule); }
.apill.later { background: var(--sheet); color: var(--later); box-shadow: inset 0 0 0 1px var(--rule); }
.answer { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.answer-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.answer-tags, .answer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.answer .io { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.answer .io > div { gap: 8px; }
.answer .pre { font: 14.5px/1.65 var(--body); min-height: 0; max-height: none; }
.answer .pre.ask { font-weight: 600; }
.answer .pre.say { background: var(--bubble); }
.io-sub { font-size: 13px; color: var(--ink2); }
.variants { display: flex; flex-wrap: wrap; gap: 6px; }
.checks { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink2); }
.examples { border-top: 1px solid var(--rule); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ex-head { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.ex-head b { font-size: 14px; }
.ex-head .cap { font-size: 12px; }
.example { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; background: var(--wash); border-radius: 8px; color: var(--ink); font-size: 13.5px; }
.example:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.example .when { font-size: 12px; color: var(--muted); }
.example .text { min-width: 0; color: var(--ink2); overflow-wrap: anywhere; }
.saved { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--good-bg); color: var(--ink); font-size: 14px; }
.edit-form { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.edit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.edit-form small { font-weight: 400; color: var(--muted); }
.edit-form textarea { font: 14.5px/1.6 var(--body); color: var(--ink); background: var(--code); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; resize: vertical; width: 100%; }
.edit-form textarea:focus { outline: 2px solid var(--cyan); outline-offset: 0; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.form-errors { margin: 0; padding: 10px 12px 10px 30px; border-radius: 8px; background: var(--bad-bg); color: var(--ink); font-size: 14px; }

/* ---- drawer, chat page, tooltip ---- */
.scrim { position: fixed; inset: 0; background: rgba(10, 12, 14, 0.35); z-index: 20; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--sheet); z-index: 21; box-shadow: var(--shadow); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer header { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--rule); }
.drawer header h3 { font: 600 16px/1.35 var(--display); margin: 0; flex: 1; text-wrap: balance; }
.drawer .x { display: inline-grid; place-items: center; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); width: 32px; height: 32px; border-radius: 7px; font-size: 17px; flex: none; }
.drawer .body { overflow-y: auto; padding: 14px 18px 24px; display: grid; gap: 16px; align-content: start; }
.drawer .cap { color: var(--muted); font-size: 12.5px; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.next-box { border-left: 3px solid var(--us); padding: 8px 12px; background: var(--wash); border-radius: 0 6px 6px 0; font-size: 14px; }
.next-box b { display: block; font-size: 12.5px; color: var(--ink2); font-weight: 500; }
.wait { color: var(--us); }
.lines { display: grid; gap: 6px; }
.line { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; font-size: 13.5px; }
.line .t { font: 500 12px var(--mono); color: var(--muted); padding-top: 2px; }
.line .who { font-size: 12px; color: var(--ink2); font-weight: 600; }
.line.cust .bubble { background: var(--wash); }
.line .bubble { max-width: none; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; }
.copy { border: 1px solid var(--rule); background: var(--sheet); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; }
.idtext { font: 500 12px var(--mono); color: var(--ink2); user-select: all; word-break: break-all; }
.top { background: var(--sheet); border-bottom: 1px solid var(--rule); }
.top .bar-in { max-width: 1240px; margin: 0 auto; padding: 12px 20px; }
.top .brand { display: inline-flex; align-items: center; gap: 10px; }
.chat-page { max-width: 680px; margin: 0 auto; padding: 24px 16px; }
.drawer.static { position: static; width: auto; box-shadow: none; border: 1px solid var(--rule); border-radius: 12px; }
#tip { position: fixed; pointer-events: none; background: var(--ink); color: var(--paper); border-radius: 6px; padding: 6px 9px; font-size: 12.5px; max-width: 260px; display: none; z-index: 30; line-height: 1.4; white-space: pre-line; }

/* ---- login ---- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background-image: radial-gradient(var(--rule) 1px, transparent 1px); background-size: 16px 16px; }
.ticket { width: min(100%, 380px); background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.ticket .cmyk { height: 6px; }
.ticket-in { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 24px; }
.ticket .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ticket .plate img { width: 170px; }
.ticket .kicker { font-size: 11.5px; letter-spacing: 0.14em; color: var(--muted); padding-top: 8px; }
.ticket h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.ticket label { font-size: 13.5px; color: var(--ink2); }
.ticket input[type="password"] { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 0 12px; height: 46px; }
.ticket button { border: 0; border-radius: 8px; height: 46px; background: var(--ink); color: var(--sheet); font-weight: 600; }
.ticket .error { margin: 0; color: var(--us); font-size: 13.5px; }
.ticket .hint { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }

/* ---- narrower screens ---- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-n { grid-column: 1 / -1; }
  .detail { position: static; max-height: none; }
}
@media (max-width: 900px) {
  .topics { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; flex-basis: 100%; }
  .topic { white-space: nowrap; flex: none; }
  .shell { display: block; }
  .side { position: sticky; top: 0; z-index: 10; width: auto; height: auto; max-height: 100vh; border-right: 0; border-bottom: 1px solid var(--rule); }
  .side-top { display: flex; align-items: center; gap: 6px; padding: 8px 16px 8px 8px; }
  .side .brand { flex-direction: row; align-items: center; padding-left: 8px; }
  .side .brand > .plate, .side .brand > .tag-line { display: none; }
  .side .compact { display: flex; align-items: center; gap: 8px; }
  .compact .plate { padding: 3px; border-radius: 6px; }
  .compact .plate img { width: 26px; }
  .compact b { font-family: var(--display); font-size: 17px; }
  .side .menu:not([hidden]) { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); }
  .side .menu:not([hidden]) + .brand { padding-left: 0; }
  .side .waitbtn { display: inline-flex; margin-left: auto; }
  .js .side:not(.open) .side-nav, .js .side:not(.open) .side-foot { display: none; }
  .side-nav { border-top: 1px solid var(--rule); padding-bottom: 8px; }
  .side-foot { margin-top: 0; flex-direction: row; justify-content: space-between; align-items: center; }
  .in { padding: 16px 16px 40px; gap: 16px; }
  .pagehead h1 { font-size: 26px; }
  .ph-title { flex-basis: 100%; }
  .ph-controls, .ctl-row { align-items: flex-start; justify-content: flex-start; }
  .card.pad { padding: 16px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px 14px 10px; }
  .kpi .v { font-size: 32px; }
  .digest { grid-template-columns: 1fr; }
  .facts4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts4 > div { padding: 14px; }
  .facts4 b { font-size: 21px; }
  .heat.wide { display: none; }
  .heat.tall { display: grid; }
  .heat.tall > a, .heat.tall > span:not(.hl):not(.rl) { height: 26px; font-size: 11px; }
  .heat.tall .rl { font-size: 11px; }
  .mx tbody th { white-space: normal; min-width: 7em; }
}
@media (max-width: 640px) {
  .seg a { padding: 6px 9px; }
  .ctl-row { flex-wrap: nowrap; gap: 6px; }
  .step { width: 32px; height: 32px; }
  .when { min-width: 0; font-size: 14px; }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-n { padding: 16px; }
  .hero-n > b { font-size: 56px; }
  .fact { padding: 12px 14px; }
  .fact b { font-size: 18px; }
  .now-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .wrow { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; }
  .wside { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; text-align: left; }
  .rrow, .rrow.full { grid-template-columns: minmax(0, 1fr) 2.6em 3em; gap: 4px 10px; }
  .rrow.full { grid-template-columns: minmax(0, 1fr) 2.6em 3em 3.4em; }
  .rrow .name { grid-column: 1 / -1; }
  .rrow.colhead { display: none; }
  .prow { grid-template-columns: 1.4em minmax(0, 1fr) 2.4em 3em; }
  .prow .track { display: none; }
  .filters .check { margin-left: 0; }
  .tr { grid-template-columns: minmax(0, 1fr) 64px 4.6em; gap: 8px; padding: 0 10px; }
  .tr .tat { display: none; }
  .tr.d1 .tname { padding-left: 8px; }
  .tr.d2 .tname { padding-left: 16px; }
  .tr .caret { display: none; }
  .tr.axis .ticks span:nth-child(2) { display: none; }
  .rp-head, .steppanel { padding-left: 14px; padding-right: 14px; }
  .detail { padding: 16px; }
  .qa, .qa-head { grid-template-columns: minmax(0, 1fr); }
  .qa-head span + span { display: none; }
  .qa-a { border-left: 0; padding-top: 0 !important; }
  .answer { padding: 16px; }
  .example { grid-template-columns: minmax(0, 1fr) auto; }
  .example .when { grid-column: 1 / -1; }
  .guide-counts { gap: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .drawer:not(.static) { animation: slide 0.18s ease-out; }
  @keyframes slide { from { transform: translateX(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
}
@media print {
  .side { display: none; }
  .theme, .logout, .waitbtn { display: none; }
}