:root{
  --bg:#F4F7F6; --surface:#FFFFFF; --surface-2:#F9FBFA; --surface-3:#EFF3F2;
  --ink:#131C1A; --ink-2:#55635F; --ink-3:#8A9793;
  --line:#E1E7E4; --line-2:#EDF1EF;
  --accent:#14706B; --accent-2:#0E5854; --accent-ink:#FFFFFF; --accent-wash:#E3F0EE; --accent-line:#BEDCD8;
  --amber:#8A5A10; --amber-wash:#FBF2E1; --amber-line:#E9D9B7;
  --alert:#8F2E27; --alert-wash:#FAEBE9; --alert-line:#EBCDCA;
  --grow:#296030; --grow-wash:#E9F3E9; --grow-line:#CCE2CD;
  --rail:#0F2E2C; --rail-ink:#CFE0DE; --rail-ink-2:#7BA39F;
  --shadow:0 1px 2px rgba(16,32,30,.05), 0 6px 18px -8px rgba(16,32,30,.12);
  --shadow-lg:0 2px 6px rgba(16,32,30,.07), 0 18px 44px -18px rgba(16,32,30,.24);
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  --r:11px; --r-sm:7px;
  /* One Light, so highlighted code reads as code without fighting the page. */
  --code-bg:#FAFAFA; --code-bar:#F1F3F2; --code-ink:#383A42; --code-lbl:#8A9793;
  --syn-com:#9AA3A0; --syn-key:#A626A4; --syn-str:#3F8F45; --syn-num:#986801;
  --syn-fun:#3B6FE0; --syn-typ:#B07800; --syn-var:#D0453B; --syn-meta:#4C7A99;
  --code-inline:#B3261E;
}
[data-theme="dark"]{
  --bg:#0D1413; --surface:#151E1D; --surface-2:#1A2423; --surface-3:#212C2B;
  --ink:#E7EEEC; --ink-2:#9BABA7; --ink-3:#6C7C78;
  --line:#26312F; --line-2:#1E2827;
  --accent:#4FBFB2; --accent-2:#6BD2C6; --accent-ink:#06201E; --accent-wash:#153431; --accent-line:#265450;
  --amber:#DCA34E; --amber-wash:#2E2415; --amber-line:#4C3B1E;
  --alert:#E08078; --alert-wash:#2E1917; --alert-line:#4D2A26;
  --grow:#72C078; --grow-wash:#18291A; --grow-line:#2B4A2E;
  --rail:#0A1615; --rail-ink:#C3D6D3; --rail-ink-2:#6E918D;
  --shadow:0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 18px 44px -18px rgba(0,0,0,.6);
  /* One Dark. */
  --code-bg:#111918; --code-bar:#16211F; --code-ink:#C7D3D0; --code-lbl:#7C8C89;
  --syn-com:#7C8C89; --syn-key:#C678DD; --syn-str:#98C379; --syn-num:#D19A66;
  --syn-fun:#61AFEF; --syn-typ:#E5C07B; --syn-var:#E06C75; --syn-meta:#56B6C2;
  --code-inline:#E4938C;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background .2s,color .2s}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:var(--accent)}
::selection{background:var(--accent-wash)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* shell */
/* One row, capped at the viewport. Without an explicit row size the row is
   auto-sized by its content, so a long conversation grows past 100vh and the
   composer is clipped by the overflow:hidden instead of the stream scrolling. */
.app{display:grid;grid-template-columns:216px 1fr;grid-template-rows:auto minmax(0,1fr);
  height:100vh;overflow:hidden}
.rail{grid-column:1;grid-row:2;
  background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;padding:16px 0 14px}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.mark{width:24px;height:24px;border-radius:7px;background:var(--accent);display:grid;
  place-items:center;color:var(--accent-ink);font-weight:700;font-size:12px}
/* The logo brings its own ground colour, so the accent square behind it goes. */
img.mark{background:none;object-fit:contain;flex:none}
.brand b{color:var(--ink);font-size:14px;font-weight:600;letter-spacing:-.01em}
.rail nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.rail nav button{text-align:left;padding:7px 11px;border-radius:8px;color:var(--rail-ink);
  display:flex;justify-content:space-between;align-items:center;font-size:13.5px;
  transition:background .13s,color .13s}
.rail nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.rail nav button[aria-current="true"]{background:var(--accent);color:var(--accent-ink);font-weight:500}
.rail nav button[aria-current="true"] .pill{background:rgba(0,0,0,.18);color:inherit}
.pill{font-family:var(--mono);font-size:10.5px;background:rgba(255,255,255,.09);
  color:var(--rail-ink-2);border-radius:20px;padding:1px 7px}
.avatar{width:27px;height:27px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}

/* ── the bar above the content: alerts on the left, the account on the right ─ */
.main{grid-column:2;grid-row:2;
  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.main > .view{flex:1;min-height:0}

/* Spans both columns, so the bar reads as one strip across the whole page
   rather than starting at the edge of the navigation. */
.topbar{grid-column:1 / -1;grid-row:1;
  display:flex;align-items:center;gap:10px;padding:0 16px 0 18px;
  height:46px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar form{margin:0}

/* The account sits hard against the right edge; the bell keeps the left. */
.tbright{margin-left:auto;display:flex;align-items:center;gap:10px}
.tbicon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  border:0;background:none;cursor:pointer;padding:0;
  color:var(--ink-2);transition:background .13s,color .13s}
.tbicon:hover{background:var(--surface-3);color:var(--ink)}

/* The way into the navigation once the rail is off-canvas. Desktop has the
   rail in front of it already, so it only exists on narrow screens. */
.menubtn{display:none;place-items:center;width:32px;height:32px;border:0;padding:0;
  background:none;cursor:pointer;border-radius:8px;color:var(--ink-2);
  transition:background .13s,color .13s}
.menubtn:hover{background:var(--surface-3);color:var(--ink)}

/*
 * Covers the page while the drawer is open, and closes it when tapped. Named
 * apart from `.scrim`, which the search dialog already owns at z-index 60 —
 * sharing it put that layer on top of this drawer and swallowed every tap.
 */
.navscrim{position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.45);border:0;
  opacity:0;transition:opacity .18s ease}
.navscrim.on{opacity:1}

/* The conversation-list button only exists where the list is off-canvas. */
.listbtn{display:none;align-items:center;gap:6px}

/* The sheet's own header, needed only where the toggle is covered. */
.ctxhead{display:none;align-items:center;justify-content:space-between;
  margin:-4px 0 12px}
.ctxhead h2{margin:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.ctxclose{width:30px;height:30px;display:grid;place-items:center;border:0;padding:0;
  background:none;cursor:pointer;border-radius:8px;color:var(--ink-2);
  transition:background .13s,color .13s}
.ctxclose:hover{background:var(--surface-3);color:var(--ink)}

/*
 * One motion for everything that appears. Short and downward-settling, so
 * content reads as arriving rather than jumping; disabled with everything else
 * under prefers-reduced-motion.
 */
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.flash,.callout,.repcard,.pop,.navgroup[open] .navsub,.repshare[open] .repshareinner,
.trace[open] ol,.scopenote{animation:reveal .18s ease}

/* Notifications, reduced to the icon. The count is the only thing worth words. */
.bell{position:relative;display:grid;place-items:center;width:32px;height:32px;
  border-radius:8px;color:var(--ink-2);text-decoration:none;
  transition:background .13s,color .13s}
.bell:hover{background:var(--surface-3);color:var(--ink)}
.bell[aria-current="page"]{background:var(--accent-wash);color:var(--accent)}
/* Clear of the glyph, not over it: the count sits at the corner of the button
   and pokes outside it, which is why the bar cannot clip its overflow. */
.bell .unread{position:absolute;top:-3px;right:-4px;min-width:13px;height:13px;padding:0 3px;
  border-radius:20px;background:var(--accent);color:var(--accent-ink);
  font-family:var(--mono);font-size:9px;font-weight:600;line-height:13px;text-align:center;
  border:2px solid var(--surface);box-sizing:content-box;pointer-events:none}

.tbbtn{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:8px;
  color:var(--ink-2);font-size:12.5px;white-space:nowrap;
  transition:background .13s,color .13s}
.tbbtn:hover{background:var(--surface-3);color:var(--ink)}
#theme #themeicon{display:grid;place-items:center}

/* Anchored under the bar's right edge rather than to the bell itself: the bar
   is a fixed strip, so the corner it hangs from never moves. */
.pop{position:fixed;top:52px;right:14px;z-index:55;width:min(370px,calc(100vw - 28px));
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);overflow:hidden;
  display:flex;flex-direction:column;max-height:min(460px,calc(100vh - 70px));
  animation:popin .12s ease-out}
.pop[hidden]{display:none}
@keyframes popin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.pop > header{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13px}
.poplink{font-size:12px;color:var(--accent);padding:2px 6px;border-radius:6px}
.poplink:hover{background:var(--accent-wash)}
.poplink[disabled]{opacity:.5;cursor:default}
.popbody{overflow-y:auto;min-height:0}
.popbody .att{border-bottom:1px solid var(--line-2)}
.popbody .att:last-child{border-bottom:0}
.popbody .empty{padding:22px 16px;font-size:12.5px}
.pop > footer{padding:9px 14px;border-top:1px solid var(--line-2);background:var(--surface-2);
  font-size:12.5px;text-align:center}
.pop > footer a{color:var(--accent);text-decoration:none}
.pop > footer a:hover{text-decoration:underline}

.tbme{display:flex;align-items:center;gap:9px;padding-left:4px;min-width:0}
.tbwho{min-width:0;line-height:1.25}
.tbwho b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}
.tbwho small{display:block;font-size:10.5px;color:var(--ink-3)}



.view{display:none;overflow:hidden;min-width:0;min-height:0}
.view[data-active]{display:grid}
.page{overflow-y:auto;min-height:0;padding:28px 32px 64px;grid-template-columns:minmax(0,1fr)}
.wrap{max-width:1080px;min-width:0}

/* generic */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.card > h3{margin:0;padding:13px 17px;font-size:13px;font-weight:600;
  border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center}
.card > h3 .more{font-size:12px;font-weight:400;color:var(--accent);text-decoration:underline}
.card .inner{padding:15px 17px}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  padding:6px 13px;font-size:13px;transition:background .13s,border-color .13s}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-2)}
.btn.small{padding:3px 10px;font-size:12px}
.badge{display:inline-block;font-size:11px;padding:1.5px 8px;border-radius:20px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.badge.open{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent)}
.badge.inprogress,.badge.onhold{background:var(--amber-wash);border-color:var(--amber-line);color:var(--amber)}
.badge.closed,.badge.ok{background:var(--grow-wash);border-color:var(--grow-line);color:var(--grow)}
.badge.rejected,.badge.sev1,.badge.sev2,.badge.prod,.badge.bad{
  background:var(--alert-wash);border-color:var(--alert-line);color:var(--alert)}
.mono{font-family:var(--mono);font-size:12px}
.note{color:var(--ink-2);font-size:12.5px;margin-top:10px}
h1{margin:0;font-size:22px;font-weight:600;letter-spacing:-.015em}
.sub{color:var(--ink-2);font-size:13px;margin-top:3px}
header.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  margin-bottom:20px;flex-wrap:wrap}

/* home */
/* The greeting and the choice beneath it, matching the chat start screen so a
   conversation begins the same way from either. */
.hero{margin:6px auto 30px;max-width:620px}
.hero h1{font-size:22px;margin-bottom:4px;text-align:center}
.hero .sub{color:var(--ink-2);font-size:13px;margin:0 0 20px;text-align:center}
.crow .spacer{flex:1}
select{font:inherit;font-size:12.5px;border:1px solid var(--line);background:var(--surface-2);
  border-radius:var(--r-sm);padding:4px 8px;color:var(--ink)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;box-shadow:var(--shadow)}
.stat .lbl{font-size:12.5px;color:var(--ink-2)}
.stat .val{font-size:27px;font-weight:600;letter-spacing:-.02em;margin:5px 0 3px;line-height:1.1}
.stat .fine{font-size:12px;color:var(--ink-3)}
.stat .fine b{color:var(--alert);font-weight:500}
.bar{height:4px;border-radius:3px;background:var(--surface-3);margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}

.cols{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start}
.att{display:flex;gap:11px;padding:11px 17px;border-bottom:1px solid var(--line-2);
  align-items:flex-start;cursor:pointer;transition:background .13s;width:100%;text-align:left}
.att:hover{background:var(--surface-2)}
.att:last-child{border-bottom:0}
.att .dot{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none;background:var(--ink-3)}
.att .dot.red{background:var(--alert)} .att .dot.amber{background:var(--amber)}
.att .dot.teal{background:var(--accent)}
.att b{font-weight:500;font-size:13.5px;display:block}
.att small{color:var(--ink-2);font-size:12.5px}
.att .when{margin-left:auto;color:var(--ink-3);font-size:11.5px;white-space:nowrap;padding-top:1px}
.status{display:flex;justify-content:space-between;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--line-2);font-size:13px}
.status:last-child{border-bottom:0}
.recent{display:block;width:100%;text-align:left;padding:11px 17px;
  border-bottom:1px solid var(--line-2);transition:background .13s}
.recent:hover{background:var(--surface-2)}
.recent:last-child{border-bottom:0}
.recent b{display:block;font-weight:500;font-size:13.5px;margin-bottom:1px}
.recent small{color:var(--ink-2);font-size:12px}

/* chat */
#chat{grid-template-columns:262px 1fr 270px}

/* The conversation list reads as a sidebar, not a table: a New row on top,
   then Pinned and everything else. Rows are flat and rounded with no rules
   between them, so the only line in the column is the one that ends it. */
.threads{border-right:1px solid var(--line);background:var(--surface);overflow-y:auto;
  min-height:0;padding:0 8px 16px}
.threadstop{position:sticky;top:0;z-index:1;background:var(--surface);padding:12px 0 2px}
.newchat{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;
  color:var(--ink);font-size:13.5px;font-weight:500;transition:background .13s}
.newchat:hover{background:var(--surface-3)}
.newchat .plus{width:21px;height:21px;flex:none;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:14px;line-height:1;color:var(--ink-2);
  transition:border-color .13s,color .13s}
.newchat:hover .plus{border-color:var(--accent-line);color:var(--accent)}
.threadhead{margin:16px 0 3px;padding:0 9px;font-size:12px;font-weight:500;color:var(--ink-3)}
.threadempty{margin:0;padding:10px 9px;font-size:12.5px;color:var(--ink-3)}

/* One line per conversation. The date it carried is in the row's tooltip —
   at this width a title is all that fits without truncating both. */
.thread{display:flex;align-items:center;gap:9px;min-width:0;
  padding:6px 9px;border-radius:9px;transition:background .13s}
.thread:hover{background:var(--surface-2)}
.thread[aria-current="true"]{background:var(--surface-3)}
.thread .dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--ink-3);opacity:.5}
.thread[aria-current="true"] .dot{background:var(--accent);opacity:1}
.thread b{min-width:0;font-weight:400;font-size:13.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread:hover b{color:var(--ink)}
.thread[aria-current="true"] b{color:var(--ink);font-weight:500}

/* min-height:0 is what lets a flex child shrink below its content and scroll;
   the default of auto is what breaks it. */
.convo{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.pin{display:flex;gap:14px;align-items:center;padding:9px 22px;background:var(--surface);
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.pin code{font-family:var(--mono);color:var(--ink);background:var(--surface-3);
  border-radius:5px;padding:1px 6px;font-size:11.5px}
.pin .refresh{color:var(--accent);text-decoration:underline}
.stream{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 22px 10px}
.turn{max-width:770px;margin:0 0 22px}
.turn.user{margin-left:auto;max-width:540px}
.turn.user .body{background:var(--accent);color:var(--accent-ink);
  border-radius:14px 14px 4px 14px;padding:11px 15px}
.turn .who{font-size:11.5px;color:var(--ink-3);margin-bottom:5px}
.turn.user .who{text-align:right}
.turn .body p{margin:0 0 10px} .turn .body p:last-child{margin-bottom:0}
.turn .body code{font-family:var(--mono);font-size:12px;background:var(--surface-3);
  border-radius:4px;padding:1px 5px}
/* On the accent bubble the inline tint would be unreadable; the bubble's own
   colour is the contrast there. */
.turn.user .body code{background:rgba(255,255,255,.18);color:inherit;border-color:transparent}

.trace{border:1px solid var(--line);border-radius:10px;background:var(--surface);
  margin-bottom:14px;overflow:hidden}
.trace summary{padding:9px 14px;cursor:pointer;font-size:12.5px;color:var(--ink-2);
  display:flex;gap:8px;align-items:center;list-style:none}
.trace summary::-webkit-details-marker{display:none}
.trace summary::before{content:"\203A";display:inline-block;transition:transform .15s;
  font-size:16px;line-height:1;color:var(--ink-3)}
.trace[open] summary::before{transform:rotate(90deg)}
.trace ol{margin:0;padding:3px 14px 12px 34px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink-2)}
.trace li{padding:3.5px 0}
.trace li code{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.trace li.reject,.trace li.reject code{color:var(--alert)}
.callout{border-left:3px solid var(--alert);background:var(--alert-wash);padding:11px 14px;
  border-radius:0 9px 9px 0;margin:0 0 14px;font-size:13px}
.callout b{display:block;margin-bottom:3px}
.callout code{font-family:var(--mono);font-size:12px}

.draft{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow)}
.draft > header{padding:13px 17px;border-bottom:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.draft > header h3{margin:0;font-size:15px;font-weight:600}
/* Which queue, then how bad — read in that order, so they sit in that order. */
.tracks{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.dupe{background:var(--amber-wash);border-bottom:1px solid var(--amber-line);
  padding:11px 17px;font-size:12.5px}
.dupe .acts{margin-top:8px;display:flex;gap:8px}
.section{padding:14px 17px;border-bottom:1px solid var(--line-2)}
.section h5{margin:0 0 6px;font-size:12px;color:var(--ink-2);font-weight:600}
.section p{margin:0 0 8px} .section p:last-child{margin-bottom:0}
.section ul{margin:0;padding-left:17px} .section li{margin-bottom:3px}
.section code{font-family:var(--mono);font-size:12px;background:var(--surface-3);
  border-radius:4px;padding:1px 5px}
.fileref{font-family:var(--mono);font-size:11.5px;color:var(--accent);
  background:var(--accent-wash);border-radius:4px;padding:1px 6px;white-space:nowrap}
.verified{background:var(--grow-wash);border-bottom:1px solid var(--grow-line);
  padding:12px 17px;font-size:12.5px}
.verified b{color:var(--grow)}
.verified pre{margin:8px 0 0;font-family:var(--mono);font-size:11px;background:var(--surface);
  border:1px solid var(--grow-line);border-radius:var(--r-sm);padding:9px 11px;
  overflow-x:auto;color:var(--ink-2)}
pre.diff{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.65;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 0;overflow-x:auto}
pre.diff span{display:block;padding:0 13px}
pre.diff .add{background:var(--grow-wash);color:var(--grow)}
pre.diff .del{background:var(--alert-wash);color:var(--alert)}
pre.diff .hdr{color:var(--ink-3)}
.draft footer{padding:12px 17px;display:flex;gap:9px;align-items:center;background:var(--surface-2)}
.draft footer .spacer{flex:1}

.typing{display:flex;gap:4px;padding:6px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.composer{position:relative;flex:none;border-top:1px solid var(--line);
  background:var(--surface);padding:12px 22px 15px}

/* Only worth showing once there is something below the fold. Anchored to the
   composer rather than the stream, so it clears the box however tall it has
   grown. */
.tobottom{position:absolute;left:50%;top:-46px;transform:translateX(-50%);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);
  color:var(--ink-2);box-shadow:var(--shadow-lg);
  transition:opacity .15s ease,transform .15s ease,color .13s,border-color .13s}
.tobottom:hover{color:var(--ink);border-color:var(--accent-line)}
.tobottom[hidden]{display:none}
.tobottom.out{opacity:0;transform:translateX(-50%) translateY(5px);pointer-events:none}
.cbox{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  padding:10px 13px;transition:border-color .15s,background .15s}
.cbox:focus-within{border-color:var(--accent);background:var(--surface)}
.cbox textarea{width:100%;border:0;background:none;resize:none;font:inherit;font-size:14px;
  color:var(--ink);outline:none;min-height:24px;max-height:150px;line-height:1.5;display:block}
.cbox textarea::placeholder{color:var(--ink-3)}
.crow{display:flex;gap:9px;align-items:center;margin-top:9px;font-size:12px;
  color:var(--ink-2);flex-wrap:wrap}
.hint{font-size:11.5px;color:var(--ink-3)}

.context{border-left:1px solid var(--line);background:var(--surface);overflow-y:auto;min-height:0;padding:17px}
.context h3{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.context section{margin-bottom:22px}
.mounted{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:8px}
.mounted b{font-family:var(--mono);font-size:12px;display:block}
.mounted small{color:var(--ink-2);font-size:11.5px;line-height:1.45;display:block;margin-top:3px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line-2);font-size:13px}
.kv:last-child{border-bottom:0}
.kv span:first-child{color:var(--ink-2);font-size:12.5px}
.kv code{font-family:var(--mono);font-size:11.5px}

/* tables */
.filters{display:flex;gap:7px;margin-bottom:15px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:20px;
  padding:4px 13px;font-size:12.5px;color:var(--ink-2);transition:all .13s}
.chip:hover{border-color:var(--accent-line)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
th{text-align:left;font-size:11.5px;font-weight:600;color:var(--ink-2);padding:10px 14px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:top;font-size:13px}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .13s}
tbody tr:hover{background:var(--surface-2);cursor:pointer}
td .num{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
td b{font-weight:500}
td .sublabel{display:block;color:var(--ink-2);font-size:12px;margin-top:2px}

.detail{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.detail .card{margin-bottom:18px}
.hist{position:relative;padding-left:20px;margin-bottom:14px}
.hist:last-child{margin-bottom:0}
.hist::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-2);box-shadow:0 0 0 1px var(--line)}
.hist time{font-size:11.5px;color:var(--ink-3);display:block}
.linkfield input{width:100%;font:inherit;font-size:12.5px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:6px 10px;font-family:var(--mono);
  background:var(--surface-2);color:var(--ink)}
.backbtn{color:var(--accent);text-decoration:underline;font-size:13px;padding:0}

/* login */
#login{place-items:center;grid-template-columns:1fr;background:var(--rail)}
.loginbox{background:var(--surface);border-radius:16px;padding:38px 40px;
  width:min(392px,100%);
  text-align:center;box-shadow:var(--shadow-lg)}
.loginbox .mark{width:34px;height:34px;border-radius:10px;margin:0 auto 14px;font-size:15px}
.loginbox h1{font-size:19px;margin-bottom:6px}
.loginbox p{margin:0 0 22px;color:var(--ink-2);font-size:13px}
.gbtn{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:9px;
  padding:11px;display:flex;gap:9px;justify-content:center;align-items:center;font-size:14px;
  transition:background .13s}
.gbtn:hover{background:var(--surface-2)}
.denied{background:var(--alert-wash);border:1px solid var(--alert-line);border-radius:9px;
  padding:12px 14px;font-size:12.5px;text-align:left;margin-top:18px;color:var(--alert)}



@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── app additions beyond the mockup ─────────────────────────────────────── */

/* The mockup switched views with JS; the app navigates, so every rendered
   view is the active one. */
.view{display:grid}
.rail nav a{text-align:left;padding:7px 11px;border-radius:8px;color:var(--rail-ink);
  display:flex;align-items:center;gap:9px;font-size:13.5px;
  text-decoration:none;transition:background .13s,color .13s}
.rail nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.rail nav a[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:500}
.rail nav a[aria-current="page"] .pill{background:rgba(0,0,0,.18);color:inherit}
/* The count keeps the right edge now that the glyph holds the left. */
.rail nav .pill{margin-left:auto}

/* Quieter than the label it sits beside, until the row is the one you are on. */
.rail .ico{flex:none;color:var(--rail-ink-2);transition:color .13s}
.rail nav a:hover .ico,.navgroup summary:hover .ico{color:#fff}
.rail nav a[aria-current="page"] .ico{color:inherit}

/* ── Settings, and the pages grouped under it ────────────────────────────── */
.navgroup summary{display:flex;align-items:center;gap:9px;
  padding:7px 11px;border-radius:8px;color:var(--rail-ink);font-size:13.5px;
  cursor:pointer;list-style:none;transition:background .13s,color .13s}
.navgroup summary::-webkit-details-marker{display:none}
.navgroup summary:hover{background:rgba(255,255,255,.07);color:#fff}
.navgroup summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.navgroup .chev{display:grid;place-items:center;margin-left:auto;color:var(--rail-ink-2);
  transition:transform .15s ease}
.navgroup[open] .chev{transform:rotate(90deg)}

/* Indented under the group, and a shade quieter than the top level. */
.navsub{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px 11px;
  padding-left:9px;border-left:1px solid rgba(255,255,255,.1)}
.navsub a{font-size:13px;gap:8px}
.navsub .ico{width:14px;height:14px}
.rail form{margin:0}

a.btn{text-decoration:none;display:inline-block}
a.thread,a.recent,a.att,a.chip,a.newchat{text-decoration:none;color:inherit}
tr.rowlink{cursor:pointer}
.empty{padding:28px 18px;text-align:center;color:var(--ink-2);font-size:13px}
.flash{border-radius:var(--r-sm);padding:9px 13px;font-size:13px;margin-bottom:16px}
.flash.err{background:var(--alert-wash);border:1px solid var(--alert-line);color:var(--alert)}
.flash.ok{background:var(--grow-wash);border:1px solid var(--grow-line);color:var(--grow)}

.field{display:block;margin-bottom:13px}
.field span{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:4px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:13.5px;
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-sm);
  padding:7px 10px;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.inline-form .field{margin-bottom:0}

.turn .body p:first-child{margin-top:0}
.turn .body p:last-child{margin-bottom:0}
.turn .body pre{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.5}
.turn .body code{font-family:var(--mono);font-size:12.5px;background:var(--surface-3);
  border-radius:4px;padding:1px 5px}
.turn .body pre code{background:none;padding:0}
.cursor{display:inline-block;width:7px;height:14px;background:var(--accent);
  vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.trace ol li.denied{color:var(--alert)}
.trace ol li.running{color:var(--ink-3)}


/* ── loading earlier messages ────────────────────────────────────────────── */
.earlier{display:flex;justify-content:center;padding:6px 0 14px}
.earlier button{border:1px solid var(--line);background:var(--surface);border-radius:20px;
  padding:5px 15px;font-size:12.5px;color:var(--ink-2)}
.earlier button:hover{background:var(--surface-3);color:var(--ink)}
.earlier[hidden]{display:none}
.earlier .spin{color:var(--ink-3);font-size:12.5px;padding:5px 0}

/* A swap in progress: dim rather than blank, so the layout never jumps. */
#convoRegion.swapping{opacity:.55;transition:opacity .12s ease}
#convoRegion{transition:opacity .12s ease}

/* ── markdown in a conversation turn ─────────────────────────────────────── */
.body.md > :first-child{margin-top:0}
.body.md > :last-child{margin-bottom:0}
.body.md p{margin:0 0 10px}
.body.md h1,.body.md h2,.body.md h3,.body.md h4{
  margin:16px 0 8px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.body.md h1{font-size:16px}
.body.md ul,.body.md ol{margin:0 0 10px;padding-left:20px}
.body.md li{margin:3px 0}
.body.md li > p{margin:0}
.body.md code{font-family:var(--mono);font-size:12.5px;color:var(--code-inline);
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:4px;padding:0 4px}

/* A fenced block is a card: the language on a bar of its own, the code under
   it, and the whole thing scrolling sideways rather than widening the turn. */
.md-block{margin:0 0 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--code-bg);overflow:hidden}
.md-blockbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 8px 6px 13px;background:var(--code-bar);border-bottom:1px solid var(--line-2)}
.md-lang{font-family:var(--mono);font-size:11px;color:var(--code-lbl)}
.md-copy{font-size:11px;color:var(--code-lbl);border-radius:6px;padding:3px 8px;
  opacity:0;transition:opacity .13s,background .13s,color .13s}
.md-block:hover .md-copy,.md-copy:focus-visible{opacity:1}
.md-copy:hover{background:var(--surface-3);color:var(--ink)}
.md-copy.done{opacity:1;color:var(--grow)}
.body.md pre.md-code{margin:0;padding:12px 13px;overflow-x:auto;background:none;border:0;
  font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--code-ink)}
.body.md pre.md-code code{background:none;border:0;padding:0;font-size:inherit;
  color:inherit;white-space:pre}

/* highlight.js class names, mapped onto the palette above. */
.hljs-comment,.hljs-quote{color:var(--syn-com);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-formula{color:var(--syn-key)}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:var(--syn-str)}
.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-link{color:var(--syn-num)}
.hljs-title,.hljs-title.function_,.hljs-section,.hljs-name,.hljs-selector-id,
.hljs-selector-class{color:var(--syn-fun)}
.hljs-title.class_,.hljs-type,.hljs-built_in,.hljs-class .hljs-title,.hljs-params{color:var(--syn-typ)}
.hljs-variable,.hljs-template-variable,.hljs-attr,.hljs-property,.hljs-tag,
.hljs-deletion,.hljs-selector-attr{color:var(--syn-var)}
.hljs-meta,.hljs-subst{color:var(--syn-meta)}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:600}
.body.md blockquote{margin:0 0 10px;padding:2px 0 2px 12px;
  border-left:3px solid var(--line);color:var(--ink-2)}
.body.md hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.body.md a{color:var(--accent)}
.body.md strong{font-weight:600;color:var(--ink)}

/* Wide tables scroll inside their own box rather than widening the turn. */
.md-tablewrap{overflow-x:auto;margin:0 0 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface)}
table.md-table{border-collapse:collapse;width:100%;font-size:12.5px;margin:0}
table.md-table th,table.md-table td{
  padding:6px 11px;text-align:left;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.md-table thead th{background:var(--surface-2);font-weight:600;font-size:11.5px;
  color:var(--ink-2);position:sticky;top:0}
table.md-table tbody tr:last-child td{border-bottom:0}
table.md-table tbody tr:hover{background:var(--surface-2)}

/* ── live progress while a turn is running ───────────────────────────────── */
.activity{display:flex;align-items:center;gap:9px;margin:2px 0 10px;
  font-size:12.5px;color:var(--ink-2)}
.activity[hidden]{display:none}

/* The run indicator. A ring is read as "busy" instantly and at any size, which
   the dots alone were not — they sit inside individual steps, where the line
   they belong to gives them their meaning. */
.ring{width:13px;height:13px;flex:none;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);
  animation:ring .72s linear infinite}
.ring.sm{width:11px;height:11px;margin-right:6px;display:inline-block;
  vertical-align:-1px;border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes ring{to{transform:rotate(1turn)}}

.btn.primary:disabled{opacity:1;cursor:progress}

/* Three dots travelling in sequence. Reads as "still going" at a glance, and
   without rotation there is nothing to jitter against the text baseline. */
.working{display:inline-flex;align-items:center;gap:3px;flex:none;height:12px}
.working i{width:5px;height:5px;border-radius:50%;background:var(--accent);
  display:block;animation:working 1.05s ease-in-out infinite}
.working i:nth-child(2){animation-delay:.15s}
.working i:nth-child(3){animation-delay:.3s}
@keyframes working{
  0%,70%,100%{opacity:.22;transform:translateY(0) scale(.85)}
  35%{opacity:1;transform:translateY(-2px) scale(1)}
}

.trace li{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.trace li .tl{color:var(--ink)}
.trace li .td{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  overflow-wrap:anywhere}
.trace li .tms{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.trace li.running .tl{color:var(--ink-2)}
.trace li.reject .tl,.trace li.reject .td,.trace li.denied .tl{color:var(--alert)}
.trace li .working{align-self:center}

@media (prefers-reduced-motion:reduce){
  .working i{animation:none;opacity:.55}
  .ring{animation-duration:2.4s}
}

/* ── attachments ─────────────────────────────────────────────────────────── */
.attachments{display:flex;flex-wrap:wrap;gap:6px}
.attachments:not(:empty){margin-bottom:8px}
.chip-file{display:inline-flex;align-items:center;gap:6px;max-width:260px;
  border:1px solid var(--line);background:var(--surface);border-radius:20px;
  padding:3px 5px 3px 9px;font-size:12px}
.chip-file .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-file .x{border:0;background:none;color:var(--ink-3);font-size:15px;
  line-height:1;padding:0 4px;cursor:pointer}
.chip-file .x:hover{color:var(--alert)}
.chip-file.uploading{opacity:.55}
.chip-file.failed{border-color:var(--alert-line);background:var(--alert-wash);color:var(--alert)}

.fk{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  background:var(--surface-3);border-radius:4px;padding:2px 4px;color:var(--ink-2);flex:none}

.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
a.file{display:inline-flex;align-items:center;gap:6px;max-width:280px;
  border:1px solid var(--line);background:var(--surface);border-radius:8px;
  padding:4px 10px 4px 6px;font-size:12px;color:var(--ink);text-decoration:none}
a.file:hover{background:var(--surface-3)}
a.file .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The whole composer is the drop target; a small outline is enough to say so. */
.cbox.dropping{border-color:var(--accent);background:var(--accent-wash)}
.cbox.dropping::after{content:"Drop to attach";position:absolute;inset:auto 12px 8px auto;
  font-size:11.5px;color:var(--accent)}
.cbox{position:relative}
.upload-error{color:var(--alert);font-size:12px;margin-top:6px}

/* The model's reason for a step, shown under it rather than in the answer. */
.trace li .tn{flex-basis:100%;font-size:11.5px;color:var(--ink-3);
  padding-left:1px;margin-top:1px;line-height:1.45}
.activity{min-height:18px}
.activity span[data-activity-text]{overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* A tool the model asked for but was never offered: shown, but not as alarm. */
.trace li.na,.trace li.na .tl,.trace li.na .td{color:var(--ink-3)}

/* ── thread list rows ────────────────────────────────────────────────────── */
.threadrow{position:relative;display:flex;align-items:stretch;margin-bottom:1px}
.threadrow .thread{flex:1;min-width:0}
/* The controls sit over the end of the title, so they carry the row's own
   background rather than letting long titles run underneath them. */
.threadacts{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:none;gap:1px;align-items:center;padding:2px;border-radius:8px;
  background:var(--surface-2);box-shadow:-9px 0 9px -4px var(--surface-2)}
.threadrow:hover .threadacts,.threadrow:focus-within .threadacts{display:flex}
.threadacts form{margin:0}
/* The open conversation sits on a darker row, so its fade has to match. */
.thread[aria-current="true"] + .threadacts{background:var(--surface-3);
  box-shadow:-9px 0 9px -4px var(--surface-3)}
.iconbtn{border:0;background:none;color:var(--ink-3);font-size:13px;line-height:1;
  padding:3px 4px;border-radius:5px;cursor:pointer}
.iconbtn:hover{background:var(--surface-3);color:var(--ink)}
.iconbtn.pin{display:grid;place-items:center;width:21px;height:21px;padding:0}
/* Pinned: the icon says what clicking will undo. */
.iconbtn.pin.on{color:var(--accent)}
.iconbtn.pin.on svg{transform:rotate(45deg)}
.threadgroup[hidden]{display:none}
.iconbtn.danger:hover{color:var(--alert)}
/* A button that is only an icon still has to line up with the buttons beside it. */
.iconbtn-link{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px}
.iconbtn-link.copied{border-color:var(--grow);color:var(--grow)}

/* ── context panel, hidden until asked for ───────────────────────────────── */
/* The panel slides out of the right-hand track. Grid columns interpolate, so
   the conversation reflows with it rather than jumping once it lands. */
#chat{grid-template-columns:262px 1fr 0px;transition:grid-template-columns .22s ease}
#chat.with-context{grid-template-columns:262px 1fr 270px}
.context{overflow-x:hidden;opacity:0;transform:translateX(10px);
  transition:opacity .18s ease,transform .22s ease}
#chat.with-context .context{opacity:1;transform:none}
/* Taken out of the layout only once it has finished leaving. */
.context[hidden]{display:none}

#contextToggle[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}

/* The ticket page hosts a conversation, but it is a panel, not the whole view. */
.stream.ticketchat{max-height:460px;overflow-y:auto;padding:0 0 8px;background:none}
.stream.ticketchat:empty{display:none}
.stream.ticketchat .turn{padding:10px 0}
/* The bubble is the accent one from the chat page, unchanged. Tinting only its
   background here left the accent ink behind it — near-black on near-black. */
#chat .cbox{margin-top:10px}

/* The nudge changes text in place; a short cross-fade stops it snapping. */
.activity span[data-activity-text]{transition:opacity .12s ease}
.activity.swapping span[data-activity-text]{opacity:.35}

/* ── the start screen: chosen in the middle, threads still on the left ───── */
.convo.start{overflow-y:auto}
.startpane{flex:1;display:flex;padding:32px 26px;min-height:0}
.startinner{width:100%;max-width:620px;margin:auto}
.startinner h1{font-size:20px;margin:0 0 5px}
.startinner .sub{color:var(--ink-2);font-size:13px;margin:0 0 20px;max-width:52ch}

/* The greeting and its line beneath are centred. Everything under them — the
   choices, the form, the selects — stays left, where it reads. */
.startinner.mid h1,.startinner.mid .sub{text-align:center;margin-left:auto;margin-right:auto}
.startinner .flash{margin-bottom:16px}

.kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kindcard{display:block;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:15px 16px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);transition:border-color .12s ease,background .12s ease}
.kindcard:hover:not(:disabled){border-color:var(--accent);background:var(--surface-2)}
.kindcard:disabled{opacity:.5;cursor:not-allowed}
.kindcard h3{margin:0 0 7px;font-size:14px}
.kindcard p{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.kindcard .note{font-size:11.5px;color:var(--ink-3)}

.startrow{display:flex;align-items:flex-end;gap:12px;margin-top:18px}
.startrow .field{margin-bottom:0}
.idform .field{margin-bottom:13px}

.candnote{margin:20px 0 8px}
.cands{display:flex;flex-direction:column;gap:6px}
.cand{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.cand:hover{border-color:var(--accent);background:var(--surface-2)}
.cand b{display:block;font-size:13px}
/* The store is what someone recognises, so it reads before the address. */
.candstores{display:block;font-size:12px;color:var(--accent);margin:1px 0 1px}
.candstores.none{color:var(--ink-3)}
.cand small{color:var(--ink-2);font-size:11.5px}



/* The customer a conversation is gated to. */
.custbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;row-gap:5px;
  padding:7px 22px;border-bottom:1px solid var(--line);background:var(--accent-wash);
  font-size:12.5px;color:var(--ink)}
.custbar .who{font-weight:600}
.custbar .meta{color:var(--ink-2)}

/* ── search palette ──────────────────────────────────────────────────────── */
/* Anchored near the top rather than centred: the list grows downwards, so a
   centred panel would shift the input every time the results changed. */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(10,20,19,.46);
  backdrop-filter:blur(2px);display:flex;justify-content:center;
  padding:11vh 20px 20px;animation:scrimin .12s ease-out}
.scrim[hidden]{display:none}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
body.noscroll{overflow:hidden}

.palette{width:100%;max-width:620px;max-height:70vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;animation:palettein .13s ease-out}
@keyframes palettein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.palette-top{display:flex;align-items:center;gap:11px;padding:13px 14px;
  border-bottom:1px solid var(--line-2);color:var(--ink-3);flex:none}
.palette-top input{flex:1;min-width:0;border:0;background:none;color:var(--ink);
  font:inherit;font-size:15px;padding:0;outline:none}
.palette-top input::placeholder{color:var(--ink-3)}
.palette-x{display:grid;place-items:center;width:26px;height:26px;flex:none;
  border-radius:7px;color:var(--ink-3);transition:background .13s,color .13s}
.palette-x:hover{background:var(--surface-3);color:var(--ink)}

.palette-list{list-style:none;margin:0;padding:6px;overflow-y:auto;min-height:0}
.presult{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  cursor:pointer;min-width:0}
.presult.on{background:var(--surface-3)}
.pricon{width:14px;flex:none;text-align:center;font-size:12px;color:var(--amber)}
.prbody{flex:1;min-width:0}
.prbody b{display:block;font-weight:400;font-size:14px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.presult.on .prbody b{font-weight:500}
.prbody small{display:block;font-size:12px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prwhen{flex:none;font-size:12.5px;color:var(--ink-3);padding-left:10px}
.palette-note{margin:0;padding:18px 17px 22px;color:var(--ink-3);font-size:13px;text-align:center}

/* The shortcut hint on the sidebar's search row. */
.newchat .kbd{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  background:var(--surface-3);border-radius:5px;padding:1px 5px}
button.newchat{width:100%;text-align:left}

/* ── a report produced during a conversation ─────────────────────────────── */
.repcard{display:flex;align-items:center;gap:12px;margin:12px 0 4px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  text-decoration:none;color:inherit;transition:border-color .13s,background .13s}
.repcard:hover{border-color:var(--accent);background:var(--surface-2)}
.repicon{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  background:var(--accent-wash);color:var(--accent)}
.repbody{min-width:0;flex:1}
.repbody b{display:block;font-size:13.5px}
.repbody small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px}
.repgo{color:var(--ink-3);font-size:15px}
.repcard:hover .repgo{color:var(--accent)}

/* ── the reports list ────────────────────────────────────────────────────── */
.repline{display:flex;align-items:flex-start;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line-2)}
.repline:first-child{padding-top:2px}
.repmain{flex:1;min-width:0}
.repmain a{text-decoration:none;color:inherit}
.repmain a:hover b{color:var(--accent)}
.repmain b{font-size:13.5px}
.repmain small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px}
.repmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:5px;
  font-size:11.5px;color:var(--ink-3)}
.replink{color:var(--accent);text-decoration:none}
.replink:hover{text-decoration:underline}
.repmuted{color:var(--ink-3);font-style:italic}
.repby{color:var(--ink-2)}
.repacts{display:flex;gap:6px;flex:none}

.repshare{margin:0 0 4px}
.repshare summary{cursor:pointer;list-style:none;font-size:11.5px;color:var(--ink-3);
  padding:5px 0}
.repshare summary::-webkit-details-marker{display:none}
.repshare summary:hover{color:var(--ink-2)}
.repshareinner{padding:10px 12px 12px;margin-bottom:8px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface-2)}
.repwho{list-style:none;margin:10px 0 0;padding:0}
.repwho li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 0;font-size:12.5px;border-bottom:1px solid var(--line-2)}
.repwho li:last-child{border-bottom:0}
.repwho small{color:var(--ink-3);font-size:11px}
.reppub{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);align-items:center}

/* ── feature requests: the backlog for this application ──────────────────── */
.scopenote{border:1px solid var(--accent-line);background:var(--accent-wash);
  border-radius:10px;padding:12px 15px;margin-bottom:18px;font-size:12.5px;
  line-height:1.6;color:var(--ink-2)}
.scopenote b{color:var(--ink)}
.scopenote a{color:var(--accent)}
.scopenote .trigger{margin-top:6px;font-style:italic;color:var(--ink-2)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:5px 12px;border:1px solid var(--line);border-radius:20px;font-size:12.5px;
  color:var(--ink-2);text-decoration:none}
.tab:hover{border-color:var(--accent-line);color:var(--ink)}
.tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tab .pill{background:rgba(0,0,0,.15)}

/* ── taking an answer somewhere else ─────────────────────────────────────── */
.copybtn,.csvbtn{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);border-radius:6px;
  padding:3px 8px;font:inherit;font-size:11.5px;color:var(--ink-2);
  transition:border-color .13s,color .13s,background .13s}
.copybtn:hover,.csvbtn:hover{border-color:var(--accent-line);color:var(--accent);
  background:var(--accent-wash)}
.copybtn.done,.csvbtn.done{border-color:var(--accent);color:var(--accent)}

/* The control sits with the table it belongs to, not floating above the turn. */
.tablebar{display:flex;justify-content:flex-end;margin:0 0 5px}
@media (prefers-reduced-motion:reduce){.copybtn,.csvbtn{transition:none}}

/* ── narrow screens ──────────────────────────────────────────────────────── */
/*
 * Last in the file on purpose. These override layout set above them, and at
 * equal specificity the later rule wins — a new grid rule appended at the
 * bottom silently beat this block once already, leaving the conversation in a
 * 262px column on a phone. Keep them here, widest first.
 */
@media (max-width:1180px){ .stats{grid-template-columns:repeat(2,1fr)} .cols{grid-template-columns:1fr} }
@media (max-width:1000px){
  .app{grid-template-columns:1fr} .main{grid-column:1}
  .detail{grid-template-columns:1fr}
  .menubtn{display:grid}

  /*
   * The rail slides in over the page rather than taking a column from it.
   * `#chat.with-context` carries an id and a class, so it outranks a bare
   * `#chat` at any position in the file — the open panel has to be beaten on
   * its own terms or opening Details would restore the desktop grid here.
   */
  #chat,#chat.with-context{grid-template-columns:1fr;min-height:0;transition:none}
  .listbtn{display:inline-flex}
  .ctxhead{display:flex}

  /*
   * The conversation list is a second drawer, opened from the pin bar. It stays
   * in the document rather than display:none so the slide has something to
   * move; off-canvas it is out of the way and out of the tab order.
   */
  .threads{display:flex;flex-direction:column;position:fixed;top:46px;bottom:0;left:0;z-index:40;
    width:min(320px,86vw);transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.3);visibility:hidden}
  body.listopen .threads{transform:none;visibility:visible}

  /* Details is a sheet rising from the bottom; hidden state keeps display:none. */
  .context{display:block;position:fixed;top:46px;left:0;right:0;bottom:0;z-index:29;
    overflow-y:auto;border-left:0;border-top:1px solid var(--line);
    transform:translateY(100%);opacity:0;
    transition:transform .22s ease,opacity .18s ease}

  .rail{position:fixed;top:46px;bottom:0;left:0;width:262px;z-index:40;
    transform:translateX(-100%);transition:transform .2s ease;overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.3);visibility:hidden}
  body.navopen .rail{transform:none;visibility:visible}

  /*
   * The conversation list is not squeezed in beside the drawer — at 380px wide
   * that leaves neither usable. It stays on the start screen, which is one tap
   * away through Chat, and where nothing competes with it for the width.
   */
  .chat-start{grid-template-columns:1fr}
  .chat-start .listbtn{margin-bottom:14px;align-self:flex-start}
  /* The greeting and the choice are the point of this screen; the list is
     context. Give the choice room to breathe below it. */
  .chat-start .startpane{padding:22px 16px}

  /* Page furniture sized for a hand rather than a desk. */
  .page{padding:18px 14px 56px}
  .hd{flex-wrap:wrap;gap:10px}
  .hd h1{font-size:19px}
  .inline-form{flex-wrap:wrap}
  .inline-form .field{flex:1 1 100%}

  /*
   * Tables carry more columns than a phone has room for, and most of them sit
   * bare in the page with no wrapper to scroll. Making the table itself a
   * scrolling block needs no markup change and beats squeezing columns until
   * none of them is readable.
   */
  .page table{display:block;overflow-x:auto;max-width:100%}
  .page table th,.page table td{white-space:nowrap}

  /* A conversation title must not run off the side of the list. */
  .thread b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .threadstop{padding:10px 0 2px}
  .newchat{width:100%}

  #chat.with-context .context{transform:none;opacity:1}

  /* Chat surfaces, sized for a hand. */
  .pin{flex-wrap:wrap;row-gap:6px;padding:8px 12px}
  .custbar{padding:7px 12px}
  .stream{padding:14px 12px 8px}
  .turn{max-width:none}
  .turn.user{max-width:88%}
  .composer{padding:10px 12px 12px}
  .crow .hint{display:none}

  /* The topbar: the brand text is the first thing to give way. */
  .topbar{padding:0 10px 0 6px;gap:6px}
  .repline{flex-wrap:wrap}
  .repacts{width:100%;justify-content:flex-end}
}
/*
 * Form rows are laid out with inline `grid-template-columns`, which no rule can
 * override — so this reaches them by attribute. Scoped to `.page` so the shell
 * itself is untouched, and only where two fields side by side stop fitting.
 */
@media (max-width:1000px){
  .page [style*="grid-template-columns"]{grid-template-columns:1fr!important}
}

@media (max-width:900px){ .kinds{grid-template-columns:1fr} }
@media (max-width:760px){ .tbwho,.tbtext{display:none} }
@media (max-width:600px){ .stats{grid-template-columns:1fr} }
@media (max-width:480px){ .brand b{display:none} }