/* Design tokens are lifted verbatim from the wireframes (scratch/design/*.dc.html),
   which are themselves lifted from docs/implementation-gaps.html. Same faces,
   same 3px radii, same 1px rules — the console is the wireframe built, not a
   reinterpretation of it. */
:root {
  --paper:#F5F7F7; --surface:#FFFFFF; --surface-2:#EDF1F1; --rule:#D3DBDB; --rule-soft:#E3E9E9;
  --ink:#12171C; --body:#2C3639; --mute:#5E6E71; --faint:#849699;
  --accent:#0E6C68; --accent-ink:#0A4F4C; --accent-wash:#DDEBEA;
  --ok:#2E7D4F; --risk:#A8760A; --over:#AF3A2C;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"IBM Plex Serif",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme: light;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--serif); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
#app { height:100%; }
button { font:inherit; color:inherit; cursor:pointer; }
/* Every anchor in this console is a control -- a nav item, a button, a row
   link -- never a link inside prose, so none of them wants an underline. */
a { text-decoration:none; color:inherit; }
button:disabled { cursor:default; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); }
.k { font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.v { font-family:var(--mono); font-size:11.5px; color:var(--ink); }
.mono { font-family:var(--mono); }
.muted { color:var(--mute); }

/* ---------- controls ---------- */
.btn {
  font-family:var(--display); font-size:12.5px; font-weight:600; padding:7px 13px;
  border:1px solid var(--rule); border-radius:3px; background:var(--surface); color:var(--ink);
  display:inline-flex; align-items:center; gap:7px; line-height:1.2;
}
.btn:hover:not(:disabled) { border-color:var(--mute); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover:not(:disabled) { background:var(--accent-ink); border-color:var(--accent-ink); }
.btn.danger { color:var(--over); }
.btn:disabled { opacity:.45; }
.btn.icon { padding:7px 9px; }
.btn.sm { font-size:11.5px; padding:5px 10px; }

.pill {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; padding:2px 7px;
  border:1px solid var(--rule); border-radius:2px; color:var(--mute); background:var(--surface);
  display:inline-block; white-space:nowrap;
}
.pill.accent { border-color:var(--accent-wash); background:var(--accent-wash); color:var(--accent-ink); }
.pill.warn { border-color:var(--risk); color:var(--risk); background:#FCF6E8; }
.pill.live { border-color:var(--over); color:var(--over); }

.chip {
  font-family:var(--display); font-size:12px; font-weight:500; padding:5px 11px;
  border:1px solid var(--rule); border-radius:12px; background:var(--surface); color:var(--mute);
}
.chip.on { background:var(--accent-wash); border-color:var(--accent-wash); color:var(--accent-ink); font-weight:600; }

.field {
  display:flex; align-items:center; gap:8px; padding:7px 11px; background:var(--surface);
  border:1px solid var(--rule); border-radius:3px;
}
.field input, .field textarea {
  flex:1; border:0; background:transparent; font:inherit; color:var(--ink); outline:none; min-width:0;
}
.field input::placeholder, .field textarea::placeholder { color:var(--faint); }
.field:focus-within { border-color:var(--accent); }

/* The toggle IS the enable control — it was a read-only dot in the first
   wireframe pass, which made "Enabled" read as a fact rather than a setting. */
.switch {
  width:32px; height:18px; border-radius:9px; position:relative; flex:none;
  border:0; padding:0; background:var(--rule); transition:background .13s ease;
}
.switch .knob {
  position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.22); transition:left .13s ease;
}
.switch[aria-checked="true"] { background:var(--accent); }
.switch[aria-checked="true"] .knob { left:16px; }
.switch:disabled { opacity:.5; }

.radio {
  width:17px; height:17px; border-radius:50%; border:2px solid var(--rule); background:transparent;
  padding:0; display:flex; align-items:center; justify-content:center; flex:none;
}
.radio[aria-checked="true"] { border-color:var(--accent); }
.radio[aria-checked="true"]::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* ---------- shell ---------- */
.shell { display:flex; height:100%; }
.nav {
  width:232px; flex:none; background:var(--surface-2); border-right:1px solid var(--rule);
  display:flex; flex-direction:column;
}
.nav-head { padding:18px 16px 14px; border-bottom:1px solid var(--rule); }
.nav-ws-name { font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.2; }
.nav-ws-ns { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:2px; word-break:break-all; }
.nav-items { display:flex; flex-direction:column; gap:2px; padding:14px 10px; }
.navitem {
  display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:3px;
  font-family:var(--display); font-size:13.5px; font-weight:500; color:var(--mute);
  border:0; background:transparent; text-align:left; width:100%;
}
.navitem:hover { background:rgba(255,255,255,.6); }
.navitem.on { background:var(--accent-wash); color:var(--accent-ink); font-weight:600; }
/* Talking is a state of the Agents page, not a sibling nav item — the agent
   being talked to nests under it, the way an open document sits in its folder. */
.navitem-sub {
  display:flex; align-items:center; gap:9px; margin:2px 0 2px 22px; padding:6px 11px;
  border-left:2px solid var(--accent); background:var(--surface); border-radius:0 3px 3px 0;
  font-family:var(--display); font-size:12.5px; font-weight:600; color:var(--ink);
  border-top:0; border-right:0; border-bottom:0; width:calc(100% - 22px); text-align:left;
}
.nav-foot { margin-top:auto; padding:14px 16px; border-top:1px solid var(--rule); }
.meter { height:3px; background:var(--rule); border-radius:2px; margin-top:7px; overflow:hidden; }
.meter > div { height:100%; background:var(--accent); }

/* min-height:0 overrides the flex default of min-height:auto, which for a
   block-level child means "never shrink below your content's natural
   height." Without it, a long transcript or a long table does not scroll
   inside its own overflow:auto box -- it grows the whole column past the
   viewport instead, and the page's own scrollbar carries the header, the
   nav and the rail off-screen with it. Found on a long voice call: no way
   back to Hang Up or the left nav without scrolling the WHOLE page. The
   same flaw is latent everywhere in this flex chain, so it is fixed at
   every link, not just the one that got long enough to show it. */
.main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.page-head { padding:26px 32px 18px; border-bottom:1px solid var(--rule); background:var(--paper); }
.page-head > div { flex-wrap:wrap; }
.page-head h1 {
  font-family:var(--display); font-weight:700; font-size:27px; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 7px;
}
.page-head p { margin:0; color:var(--mute); font-size:14.5px; max-width:62ch; }
.page-body { padding:20px 32px 32px; flex:1; overflow:auto; }

.toolbar {
  padding:14px 32px; border-bottom:1px solid var(--rule-soft); background:var(--paper);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* ---------- table ---------- */
/* The row grid is mostly fixed columns, so below ~900px of main area the
   1fr agent column collapses and the ref wraps one character per line.
   Wide content scrolls in its own container rather than deforming. */
/* Scrolling lives on .page-body, not here: `overflow-x:auto` computes
   `overflow-y:auto` too, which would clip the open row menu. */
.table { border:1px solid var(--rule); border-radius:3px; background:var(--surface); position:relative; }
.cols {
  display:grid; grid-template-columns:46px minmax(180px,1fr) 150px 108px 84px 150px 28px;
  gap:14px; align-items:center; min-width:860px;
}
.thead { padding:10px 20px; background:var(--surface-2); border-bottom:1px solid var(--rule); }
.thead .eyebrow { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trow { padding:16px 20px; border-bottom:1px solid var(--rule-soft); background:var(--surface); position:relative; }
.trow:last-child { border-bottom:0; }
.trow:hover { background:#FBFDFD; }
.trow.is-entry { box-shadow:inset 2px 0 0 var(--accent); }
.trow.is-disabled .agent-name { color:var(--mute); }
.agent-name { font-family:var(--display); font-weight:600; font-size:15px; color:var(--ink); }
.agent-ref { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:3px; word-break:break-all; }
.ver { font-family:var(--mono); font-size:12.5px; color:var(--ink); }
.ver-sub { font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:2px; }

.menu {
  position:absolute; right:14px; top:52px; width:214px; background:var(--surface); z-index:20;
  border:1px solid var(--rule); border-radius:3px; box-shadow:0 6px 20px rgba(18,23,28,.13); padding:5px 0;
}
.menuitem {
  padding:7px 13px; font-family:var(--display); font-size:12.5px; color:var(--body);
  border:0; background:transparent; width:100%; text-align:left; display:flex;
  align-items:center; justify-content:space-between; gap:10px;
}
.menuitem:hover { background:var(--surface-2); }
.menuitem.danger { color:var(--over); }
.menusep { height:1px; background:var(--rule-soft); margin:5px 0; }

.note {
  display:flex; align-items:flex-start; gap:11px; margin-top:18px; padding:13px 16px;
  border:1px solid var(--rule-soft); border-radius:3px; background:var(--surface-2);
  font-size:13.5px; color:var(--mute); line-height:1.55;
}
.note strong { color:var(--body); font-weight:400; font-family:var(--display); font-size:13px; }

.empty { padding:52px 24px; text-align:center; color:var(--mute); }
.empty h2 { font-family:var(--display); font-size:17px; color:var(--ink); margin:0 0 8px; }
.empty p { margin:0 auto 18px; max-width:46ch; font-size:14px; }

/* ---------- cards (catalogue) ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(316px, 1fr)); gap:16px; align-items:start; }
.card {
  border:1px solid var(--rule); border-radius:3px; background:var(--surface); padding:17px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.card h3 { font-family:var(--display); font-size:15.5px; font-weight:600; color:var(--ink); margin:0; }
.card p { margin:0; font-size:13.5px; line-height:1.55; color:var(--mute); }
.card-foot { margin-top:auto; padding-top:4px; display:flex; align-items:center; gap:8px; }

/* ---------- talk ---------- */
.talk { flex:1; display:flex; min-width:0; min-height:0; }
.talk-main { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--paper); }
.talk-head {
  padding:16px 26px; border-bottom:1px solid var(--rule); background:var(--surface);
  display:flex; align-items:center; gap:14px;
}
.talk-title { font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); }
.transcript { flex:1; padding:24px 26px 10px; display:flex; flex-direction:column; gap:22px; overflow-y:auto; }
.turn { display:flex; gap:13px; }
.turn.user { justify-content:flex-end; }
.avatar {
  width:28px; height:28px; border-radius:3px; background:var(--accent); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:12px;
}
.msg { font-size:15px; line-height:1.62; white-space:pre-wrap; }
.from-agent { max-width:58ch; color:var(--body); }
.from-user  { max-width:48ch; background:var(--accent-wash); color:var(--accent-ink); padding:12px 15px; border-radius:3px; }
.divider { display:flex; align-items:center; gap:12px; }
.divider::before, .divider::after { content:""; height:1px; background:var(--rule-soft); flex:1; }
.caret { display:inline-block; width:8px; height:17px; background:var(--accent); vertical-align:-3px; margin-left:2px; }
.caret.blink { animation:blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility:hidden; } }
@media (prefers-reduced-motion: reduce) { .caret.blink { animation:none; } }

.composer { padding:14px 26px 18px; border-top:1px solid var(--rule); background:var(--surface); }
.composer .field { background:var(--paper); padding:12px 14px; align-items:flex-end; }
.composer textarea { resize:none; font-size:14.5px; line-height:1.5; max-height:132px; }

/* ---------- session rail ---------- */
.rail {
  width:344px; flex:none; border-left:1px solid var(--rule); background:var(--surface-2);
  display:flex; flex-direction:column; overflow:hidden; min-height:0;
}
.rail.collapsed { width:52px; }
.rail.collapsed .rail-body, .rail.collapsed .rail-foot, .rail.collapsed .rail-titles { display:none; }
.rail-head { padding:15px 18px; border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:10px; }
.rail.collapsed .rail-head { padding:15px 0; justify-content:center; }
.rail-title { font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--ink); }
.rail-body { padding:16px 18px; display:flex; flex-direction:column; gap:15px; overflow-y:auto; min-height:0; }
.step { display:grid; grid-template-columns:20px minmax(0,1fr); gap:11px; }
.stepno {
  width:20px; height:20px; border-radius:2px; background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.stepno.done { background:var(--mute); }
.steptitle { font-family:var(--display); font-size:12.5px; font-weight:600; color:var(--ink); }
.factbox { border:1px solid var(--rule-soft); border-radius:3px; background:var(--surface); padding:9px 11px; }
.fact { display:flex; justify-content:space-between; gap:10px; }
.fact + .fact { margin-top:4px; }
.fact .v { text-align:right; word-break:break-all; }
.seqrow { display:flex; gap:10px; padding:3px 0; }
.seqrow .seqno { font-family:var(--mono); font-size:11.5px; color:var(--faint); width:22px; flex:none; }
.seqrow .seqrole { width:46px; flex:none; }
.seqrow .seqtext { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seqrow.pending .seqno, .seqrow.pending .seqrole, .seqrow.pending .seqtext { color:var(--accent-ink); }
.rail-foot { margin-top:auto; border-top:1px solid var(--rule); padding:14px 18px; background:var(--surface); }

/* ---------- connect ---------- */
.connect { height:100%; display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.connect-card { width:100%; max-width:468px; }
.connect-card h1 { font-family:var(--display); font-size:26px; letter-spacing:-.02em; color:var(--ink); margin:0 0 9px; }
.connect-card p { margin:0 0 22px; color:var(--mute); font-size:14.5px; line-height:1.6; }
.connect-card label { display:block; margin-bottom:7px; }
.connect-card textarea { font-family:var(--mono); font-size:12px; min-height:96px; resize:vertical; }

/* ---------- feedback ---------- */
.toasts { position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:9px; z-index:60; }
.toast {
  background:var(--ink); color:#fff; padding:11px 15px; border-radius:3px; max-width:400px;
  font-family:var(--display); font-size:13px; box-shadow:0 6px 20px rgba(18,23,28,.22);
}
.toast.err { background:var(--over); }
.inline-error {
  border:1px solid var(--over); border-left-width:3px; border-radius:3px; background:#FCF0EE;
  padding:11px 14px; color:var(--over); font-size:13.5px; line-height:1.5; margin-bottom:16px;
}
.spinner {
  width:14px; height:14px; border:2px solid var(--rule); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite; flex:none;
}
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration:2.4s; } }
.loading { display:flex; align-items:center; gap:10px; padding:34px 4px; color:var(--mute); font-size:13.5px; }

/* ---------- usage ---------- */
/* Big-number tiles because on this page the figures ARE the content —
   everywhere else in the console they would flatten the hierarchy. */
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(184px, 1fr)); gap:16px; }
.tile { border:1px solid var(--rule); border-radius:3px; background:var(--surface); padding:15px 17px; }
.tile-n {
  font-family:var(--mono); font-size:25px; font-weight:500; color:var(--ink);
  margin-top:7px; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.panel {
  border:1px solid var(--rule); border-radius:3px; background:var(--surface);
  padding:16px 18px; margin-top:20px;
}
.split { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:20px; }
.split .panel { margin-top:20px; }

.chart { margin:0; }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart figcaption { margin-top:9px; }

.ucols {
  display:grid; grid-template-columns:minmax(180px,1fr) 92px 76px 104px 168px;
  gap:14px; align-items:center; min-width:720px;
}
.ucols .num { text-align:right; font-variant-numeric:tabular-nums; }
.share { height:5px; background:var(--rule-soft); border-radius:3px; overflow:hidden; }
.share > div { height:100%; background:var(--accent); }

.polrow {
  display:flex; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--rule-soft);
}
.polrow:last-of-type { border-bottom:0; }