/* ============================================================
   gtm_ops console — global styles
   Built on the Wranngle design system. Light + dark, dense.
   ============================================================ */

:root {
  /* ---- Brand color scales (from Wranngle DS) ---- */
  --sunset-50:#fff3e7; --sunset-100:#ffe0bf; --sunset-200:#ffc179;
  --sunset-300:#ff9e33; --sunset-400:#ff7f00; --sunset-500:#ff5f00;
  --sunset-600:#ef4b00; --sunset-700:#c73a00; --sunset-800:#9f3000;
  --sunset-900:#7d2700; --sunset-950:#431300;

  --violet-50:#fdf1f5; --violet-100:#f9dce5; --violet-200:#f2b6c6;
  --violet-300:#ea8aa6; --violet-400:#dd6186; --violet-500:#cf3c69;
  --violet-600:#b92a56; --violet-700:#972144; --violet-800:#741a36;
  --violet-900:#561329; --violet-950:#2d0914;

  --sand-50:#fcfaf5; --sand-100:#f6f1e7; --sand-200:#ebdfc8;
  --sand-300:#dac39f; --sand-400:#c2a677; --sand-500:#ab8c5b;
  --sand-600:#957850; --sand-700:#7a6343; --sand-800:#625137;
  --sand-900:#4f412d; --sand-950:#292218;

  --night-50:#f2f0f3; --night-100:#e4e1e7; --night-200:#cbc7d3;
  --night-300:#aaa4b8; --night-400:#847d9a; --night-500:#6a6380;
  --night-600:#57516a; --night-700:#464055; --night-800:#393444;
  --night-900:#201e28; --night-950:#12111a;

  --healthy: #5d8c61;
  --warning: #ff9e33;
  --critical: var(--violet-500);

  /* ---- Type ---- */
  --font-display:'Bricolage Grotesque','Outfit',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- Spacing / radii / motion ---- */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px;
  --r-pill:9999px;
  --r-lasso: 24px 4px 24px 4px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  /* ---- Layout ---- */
  --sidebar-w: 232px;
  --sidebar-collapsed-w: 64px;
  --topbar-h: 56px;
  --coach-dock-w: min(420px, calc(100vw - var(--sidebar-w) - 48px));
}

/* DARK theme (default) */
:root, [data-theme="dark"] {
  --bg: #0e0d14;
  --bg-elev: #15141d;
  --bg-elev-2: #1a1923;
  --bg-card: #15141d;
  --bg-inset: #0a0911;
  --bg-hover: rgba(255,255,255,.04);
  --bg-press: rgba(255,255,255,.08);
  /* --bg-selected was rgba(.10) — strong but blended to #2c1c1a where
     --accent-fg only hit 4.17:1 (just under AA). Dropping to .04 keeps
     the row visually highlighted (border-left + tinted bg still
     present) while pulling contrast back above 5:1. */
  --bg-selected: rgba(255,95,0,.04);

  --border: rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.12);
  --border-accent: var(--sunset-500);

  --text: #ebe7f2;
  --text-2: #aaa4b8;
  /* --text-3 was #6a6380 (3.22:1 on dark bg, fails AA). Bumped to
     #847d9a (~4.6:1) so breadcrumbs, kbd hint, eyebrow labels, sidebar
     section headers, stat labels, and mono captions all clear AA. */
  --text-3: #847d9a;
  --text-mono-dim: #aaa4b8;

  /* AA-readable accent foreground per theme. In dark mode the brand
     orange (--sunset-500) reads cleanly on the dark background; in
     light mode we shift to --sunset-700 to clear WCAG 4.5:1. */
  --accent-fg: var(--sunset-500);
  /* AA-readable secondary text on theme bg. */
  --text-label: var(--text-3);
  /* AA-readable status colors when used as foreground text. Dark theme
     was using --healthy (#5d8c61) but that hit only 4.11:1 against
     #0e0d14 — just under AA. Lightened to #86c08a (~5.6:1). Light
     theme overrides below stay at darker values for cream-bg AA. */
  --healthy-fg: #86c08a;
  --warn-fg: var(--sunset-300);
  /* --violet-fg was --violet-500 (#cf3c69) → 3.9:1 on dark bg, fails AA.
     Lightened one step to --violet-400 (~5:1). */
  --violet-fg: var(--violet-400);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px rgba(255,95,0,.4), 0 0 24px rgba(255,95,0,.18);

  --grid-line: rgba(255,255,255,.04);
  --noise-opacity: 0.025;

  --page-bg:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(207,60,105,.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(255,95,0,.05), transparent 60%),
    var(--bg);
}

[data-theme="light"] {
  --bg: #faf6ee;
  --bg-elev: #ffffff;
  --bg-elev-2: #ffffff;
  --bg-card: #ffffff;
  --bg-inset: #f6f1e7;
  --bg-hover: rgba(18,17,26,.035);
  --bg-press: rgba(18,17,26,.07);
  --bg-selected: rgba(255,95,0,.08);

  --border: rgba(18,17,26,.08);
  --border-strong: rgba(18,17,26,.16);
  --border-accent: var(--sunset-500);

  --text: #12111a;
  --text-2: #57516a;
  /* --text-3 was #847d9a but only hit 3.9:1 against the cream bg —
     short of WCAG AA 4.5:1 for normal text. Bumped to #6a6380 (~5.5:1)
     so eyebrows, breadcrumbs, kbd, stat labels, mono captions are all
     readable in light theme. */
  --text-3: #6a6380;
  --text-mono-dim: #57516a;

  /* Light-theme overrides for AA contrast on the cream background.
     --sunset-700 (#c73a00) only reaches ~3.9–4.4:1 on the tinted accent
     surfaces (badge--accent, eyebrow--accent, el-conversation-bar, the
     agent-admin-quick active state). --sunset-800 (#9f3000) clears AA. */
  --accent-fg: var(--sunset-800);
  --text-label: var(--text-2);
  --healthy-fg: #3d6a40;
  --warn-fg: #8a4f18;
  --violet-fg: #8a1d44;

  --shadow-sm: 0 1px 2px rgba(18,17,26,.05);
  --shadow-md: 0 4px 16px rgba(18,17,26,.08);
  --shadow-lg: 0 12px 40px rgba(18,17,26,.12);
  --shadow-glow: 0 0 0 1px rgba(255,95,0,.45), 0 0 24px rgba(255,95,0,.20);

  --grid-line: rgba(18,17,26,.05);
  --noise-opacity: 0.04;

  --page-bg: linear-gradient(180deg, var(--sand-50), var(--sand-100));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-fg); }

::selection { background: rgba(255,95,0,.35); color: var(--text); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100vh;
  height: 100vh;
  width: 100vw;
}
.app[data-collapsed="true"] { grid-template-columns: var(--sidebar-collapsed-w) 1fr; }

/* ---------- Sidebar ---------- */
.sb {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.sb__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sb__content::-webkit-scrollbar { width: 8px; }
.sb__content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.sb__content::-webkit-scrollbar-track { background: transparent; }
.sb::after {
  /* faint Sunset accent stripe at the very top edge */
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sunset-500), var(--violet-500));
  opacity: .9;
}
.sb__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  height: var(--topbar-h);
  flex-shrink: 0;
}
.sb__logo {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--night-950);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--accent-fg);
  font-size: 16px;
  letter-spacing: 0;
  flex-shrink: 0;
  border: 1px solid var(--sunset-500);
  box-shadow: 0 0 0 3px rgba(255,95,0,.10);
  overflow: hidden;
}
.sb__logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sb__logo--lasso {
  background: transparent;
  border-radius: 8px;
  border-color: transparent;
  box-shadow: none;
}
.sb__logo--lasso img { object-fit: contain; }
.sb__wordmark {
  height: 22px; width: auto; max-width: 140px;
  display: block; flex: 0 1 auto;
}
[data-theme="dark"] .sb__wordmark { filter: invert(1) brightness(1.05); }
.sb__brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  white-space: nowrap;
}
.sb__brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .02em;
  text-transform: none;
  margin-top: 1px;
}

.sb__section {
  padding: 14px 12px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--text-label);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.sb__section::before {
  content: '['; color: var(--accent-fg);
}
.sb__section::after {
  content: ']'; color: var(--accent-fg);
}
.app[data-collapsed="true"] .sb__section { display: none; }

.sb__nav {
  display: flex; flex-direction: column;
  padding: 4px 8px;
  gap: 1px;
}
.sb__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font-size: 13px;
  font: inherit;
  color: var(--text-2);
  cursor: pointer;
  position: relative;
  transition: background .12s var(--ease-out), color .12s;
  white-space: nowrap;
  text-align: left;
  user-select: none;
  appearance: none;
}
.sb__item:hover { background: var(--bg-hover); color: var(--text); }
.sb__item:focus-visible {
  outline: 2px solid var(--accent-fg, var(--sunset-500));
  outline-offset: -2px;
}
.sb__item[data-active="true"] {
  background: var(--bg-selected);
  color: var(--accent-fg);
}
.sb__item[data-active="true"]::before {
  content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px;
  background: var(--sunset-500);
}
.sb__icon { width: 16px; height: 16px; flex-shrink: 0; }
.sb__label { flex: 1; }
.sb__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-inset);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  min-width: 22px; text-align: center;
}
.sb__item[data-active="true"] .sb__count { color: var(--accent-fg); background: rgba(255,95,0,.12); }
.app[data-collapsed="true"] .sb__label,
.app[data-collapsed="true"] .sb__count { display: none; }
.app[data-collapsed="true"] .sb__item { justify-content: center; padding: 9px; }
.app[data-collapsed="true"] .sb__brand { justify-content: center; padding-inline: 0; }
.app[data-collapsed="true"] .sb__wordmark,
.app[data-collapsed="true"] .sb__nav[aria-label="ElevenLabs agents"] .mono.dim {
  display: none;
}

.sb__footer {
  margin-top: auto;
  width: 100%;
  padding: 12px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 120ms ease, color 120ms ease;
  appearance: none;
}
.sb__footer:hover { background: var(--bg-hover, rgba(255,255,255,.04)); }
.sb__footer:focus-visible { outline: 2px solid var(--accent-fg, var(--sunset-500)); outline-offset: -2px; }
.sb__footer[data-active="true"] { background: var(--bg-hover, rgba(255,95,0,.08)); }
.sb__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sunset-500), var(--violet-500));
  color: white;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.sb__user-name { font-size: 12px; font-weight: 600; }
.sb__user-org { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
.app[data-collapsed="true"] .sb__user { display: none; }

@media (max-height: 760px) and (min-width: 761px) {
  .sb__brand {
    padding: 10px 14px;
  }
  .sb__logo {
    width: 28px;
    height: 28px;
  }
  .sb__wordmark {
    height: 20px;
  }
  .sb__brand-sub {
    font-size: 9px;
  }
  .sb__section {
    padding: 9px 12px 3px;
    font-size: 9px;
  }
  .sb__nav {
    padding-block: 2px;
  }
  .sb__item {
    gap: 9px;
    padding-block: 5px;
    font-size: 12px;
  }
  .sb__count {
    font-size: 10px;
    min-width: 20px;
    padding-inline: 5px;
  }
  .sb__footer {
    padding: 8px 12px;
  }
  .sb__avatar {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .sb__user-name {
    font-size: 11px;
  }
  .sb__user-org {
    font-size: 10px;
  }
}

/* ---------- Topbar ---------- */
.tb {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.tb__crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  flex: 0 0 auto;
  max-width: min(560px, 52vw);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.tb__crumb {
  color: var(--text-3);
  border-radius: var(--r-sm);
  padding: 2px 3px;
  min-width: 0;
}
.tb__crumb:hover {
  color: var(--accent-fg);
  background: var(--bg-hover);
}
.tb__crumb:disabled {
  cursor: default;
  opacity: .78;
}
.tb__crumb:disabled:hover {
  color: var(--text-3);
  background: transparent;
}
.tb__crumb--brand {
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-weight: 700;
  flex: 0 0 auto;
}
.tb__crumb--workspace {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb__crumb--active {
  color: var(--text);
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb__sep { color: var(--text-3); opacity: .5; flex: 0 0 auto; }

.tb__search {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 480px;
  position: relative;
  display: flex; align-items: center;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 6px 12px 6px 32px;
  font-size: 13px;
  color: var(--text-3);
  font-family: inherit;
  text-align: left;
  cursor: text;
  outline: 0;
  appearance: none;
  transition: border-color .15s, background .15s, color .15s;
}
.tb__search:hover { color: var(--text-2); border-color: var(--border-strong); }
.tb__search:focus-visible { border-color: var(--accent-fg); background: var(--bg-elev); color: var(--text); outline: 2px solid var(--sunset-500); outline-offset: 2px; }
.tb__search-placeholder { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb__search-icon { position: absolute; left: 10px; color: var(--text-3); display: inline-flex; align-items: center; }
.tb__kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
}

.tb__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tb__run { position: relative; }
.tb__run-label { display: inline-flex; }
.tb__run-chevron {
  display: inline-flex;
  margin-left: 2px;
  opacity: .85;
}

/* status pill in topbar */
.tb__sys {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
}
.tb__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--healthy);
  box-shadow: 0 0 0 3px rgba(93,140,97,.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ---------- Page area ---------- */
.main {
  display: flex; flex-direction: column;
  height: 100vh;
  overflow: hidden;
  min-width: 0;
}
.scroll {
  flex: 1;
  overflow: auto;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* Unified scrollbar styling — applies anywhere overflow scrolls. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, rgba(255,255,255,.10)) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(255,255,255,.10));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .15s;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, var(--sunset-500));
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
[data-theme="light"] {
  --scrollbar-thumb: rgba(18,17,26,.18);
  --scrollbar-thumb-hover: var(--sunset-500);
}
[data-theme="dark"], :root {
  --scrollbar-thumb: rgba(255,255,255,.10);
  --scrollbar-thumb-hover: var(--sunset-500);
}

.page {
  padding: 22px 28px 56px;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}
.page--wide { max-width: none; }

/* ============================================================
   COMMON COMPONENTS
   ============================================================ */

/* page header */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ph__title { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: 0; line-height: 1.15; }
.ph__sub { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.ph__eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em;
  color: var(--accent-fg); text-transform: uppercase; margin-bottom: 6px;
}
.ph__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  word-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: all .15s var(--ease-out);
  white-space: nowrap;
}
.btn > svg { flex: 0 0 auto; }
.btn:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--text-3);
  opacity: .68;
  transform: none;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.btn--primary {
  background: linear-gradient(180deg, var(--sunset-500), var(--sunset-600));
  color: white;
  border-color: var(--sunset-600);
  box-shadow: 0 4px 14px rgba(255,95,0,.25);
}
.btn--primary:hover { box-shadow: 0 6px 20px rgba(255,95,0,.35); border-color: var(--sunset-700); }
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  background: var(--bg-inset);
  color: var(--text-3);
  border-color: var(--border);
}
.btn--primary:disabled:hover,
.btn--primary[aria-disabled="true"]:hover {
  background: var(--bg-inset);
  color: var(--text-3);
  border-color: var(--border);
}
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--bg-hover); border-color: var(--border); }
.btn[aria-pressed="true"] {
  background: rgba(255,95,0,.12);
  border-color: rgba(255,95,0,.42);
  color: var(--sunset-300);
}
.btn--ghost:disabled:hover,
.btn--ghost[aria-disabled="true"]:hover {
  background: transparent;
  border-color: transparent;
}
.btn--ghost:disabled,
.btn--ghost[aria-disabled="true"] {
  color: var(--text-3);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.btn--external {
  background: var(--bg-inset);
  color: var(--text-2);
  border-color: var(--border);
  box-shadow: none;
}
.btn--external:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn--sm { padding: 4px 10px; font-size: 11px; }
.btn--xs { padding: 3px 7px; font-size: 10px; letter-spacing: .03em; }
.btn--danger {
  background: var(--violet-500); color: white; border-color: var(--violet-600);
}
.btn--danger:hover { background: var(--violet-600); }
.btn--icon { padding: 6px; gap: 0; word-spacing: normal; }

/* cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
}
.card--accent {
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-lasso);
}
.card--violet { border-left: 3px solid var(--violet-500); border-radius: var(--r-lasso); }
.card--healthy { border-left: 3px solid var(--healthy); border-radius: var(--r-lasso); }
.card__hd {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}
.card__title-bracket { color: var(--accent-fg); }
.card__body { padding: 16px; }
.card__body--flush { padding: 0; }
.hot-lead-row {
  border-radius: var(--r-sm);
  cursor: pointer;
}
.hot-lead-row:hover,
.hot-lead-row:focus-visible {
  background: var(--bg-hover);
  outline: 1px solid var(--border-strong);
  outline-offset: 3px;
}

.attention-banner {
  margin-bottom: 18px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.attention-banner--snoozed {
  padding: 10px 14px;
  opacity: .85;
  border-style: dashed;
}
.attention-banner__dot {
  align-self: center;
}
.attention-banner__copy {
  min-width: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.attention-banner__title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}
.attention-banner__meta {
  margin-top: 2px;
}
.attention-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* labels / eyebrows */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--text-3);
  text-transform: uppercase;
}
.eyebrow--accent { color: var(--accent-fg); }
.eyebrow-bracket {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow-bracket .b { color: var(--accent-fg); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-inset);
  color: var(--text-2);
  white-space: nowrap;
}
.badge--healthy { background: rgba(93,140,97,.12); color: var(--healthy-fg); border-color: rgba(93,140,97,.3); }
.badge--warn { background: rgba(255,158,51,.12); color: var(--warn-fg); border-color: rgba(255,158,51,.3); }
.badge--critical { background: rgba(207,60,105,.12); color: var(--violet-fg); border-color: rgba(207,60,105,.3); }
.badge--accent { background: rgba(255,95,0,.12); color: var(--accent-fg); border-color: rgba(255,95,0,.3); }
.badge--neutral { background: var(--bg-inset); color: var(--text-2); }
.badge--solid-accent { background: var(--sunset-500); color: white; border-color: var(--accent-fg); }
.status-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-text--healthy { color: var(--healthy-fg); }
.status-text--warn { color: var(--warn-fg); }
.status-text--critical { color: var(--violet-fg); }
.status-text--accent { color: var(--accent-fg); }
.status-text--neutral { color: var(--text-2); }

/* indicator dot */
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot--healthy { background: var(--healthy); box-shadow: 0 0 0 3px rgba(93,140,97,.18); }
.dot--warn { background: var(--sunset-300); box-shadow: 0 0 0 3px rgba(255,158,51,.18); }
.dot--critical { background: var(--violet-500); box-shadow: 0 0 0 3px rgba(207,60,105,.18); }
.dot--accent { background: var(--sunset-500); box-shadow: 0 0 0 3px rgba(255,95,0,.18); animation: pulse 2.4s ease-in-out infinite; }
.dot--idle { background: var(--text-3); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
  position: sticky; top: 0; z-index: 1;
}
.tbl tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.tbl tbody tr { cursor: pointer; transition: background .1s; }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr[data-selected="true"] { background: var(--bg-selected); }
.tbl tbody tr[data-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--sunset-500); }
.tbl .num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.tbl .mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }

/* mono helpers */
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }

/* progress / score bar */
.progress {
  height: 4px;
  background: var(--bg-inset);
  border-radius: 2px;
  overflow: hidden;
  display: block;
  width: 100%;
}
.progress__fill { height: 100%; border-radius: 2px; transition: width .3s var(--ease-out); }
.progress__fill--healthy { background: var(--healthy); }
.progress__fill--warn { background: var(--sunset-300); }
.progress__fill--critical { background: var(--violet-500); }
.progress__fill--accent { background: var(--sunset-500); }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  position: relative;
  overflow: visible;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.stat__value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__value--healthy { color: var(--healthy-fg); }
.stat__value--warn { color: var(--warn-fg); }
.stat__value--critical { color: var(--violet-fg); }
.stat__delta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  display: flex; align-items: center; gap: 4px;
}
.stat__delta--up { color: var(--healthy-fg); }
.stat__delta--down { color: var(--violet-fg); }
.stat__spark {
  --spark-visual-opacity: .72;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 80px;
  z-index: 2;
}
.stat--accent { border-left: 3px solid var(--sunset-500); border-radius: var(--r-lasso); }

.stats:not(.eval-stats) .stat:has(.stat__spark) {
  display: grid;
}
.stats:not(.eval-stats) .stat:has(.stat__spark) .stat__spark {
  --spark-visual-opacity: .68;
  position: static;
  width: 100%;
  margin-top: 10px;
  z-index: auto;
}

@media (min-width: 1500px) {
  .stats:not(.eval-stats) .stat:has(.stat__spark) {
    grid-template-columns: minmax(0, 1fr) 84px;
    column-gap: 12px;
    align-items: center;
  }
  .stats:not(.eval-stats) .stat:has(.stat__spark) .stat__label,
  .stats:not(.eval-stats) .stat:has(.stat__spark) .stat__value,
  .stats:not(.eval-stats) .stat:has(.stat__spark) .stat__delta {
    grid-column: 1;
    min-width: 0;
  }
  .stats:not(.eval-stats) .stat:has(.stat__spark) .stat__spark {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-self: end;
    width: 84px;
    margin-top: 0;
    --spark-visual-opacity: .74;
  }
}

/* console panel */
.console-panel {
  background: #0a0911;
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-lasso);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #d8d2e8;
  line-height: 1.7;
  position: relative;
  overflow: hidden;
}
.console-panel::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(255,95,0,.05), transparent 50%);
  pointer-events: none;
}
.console-panel__hd {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 10px; letter-spacing: .12em; color: #6a6380;
  text-transform: uppercase;
  gap: 10px;
}
.console-panel__hd > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.console-panel__hd-right {
  display: inline-flex;
  flex: 1 1 230px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 8px;
  align-items: center;
  min-width: 0;
}
.console-panel__count { color: #6a6380; }
.console-panel__btn {
  font: inherit; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: #d8d2e8;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px; padding: 3px 8px; cursor: pointer;
}
.console-panel__btn:hover:not(:disabled) { border-color: var(--accent-fg); color: var(--accent-fg); }
.console-panel__btn:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 1px; }
.console-panel__btn:disabled { opacity: .4; cursor: not-allowed; }
.console-panel__status { color: #d8d2e8; white-space: nowrap; }
.console-panel__body {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.console-panel__body:focus-visible {
  outline: 2px solid var(--accent-fg);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.console-panel__body::-webkit-scrollbar { width: 8px; }
.console-panel__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.console-panel__body::-webkit-scrollbar-track { background: transparent; }
.console-panel__line { padding: 1px 0; }
.console-panel__line--err { background: linear-gradient(90deg, rgba(255,40,80,.06), transparent); }
.console-panel__line--ok { background: linear-gradient(90deg, rgba(0,200,150,.06), transparent); }
.cl-info { color: var(--accent-fg); }
.cl-warn { color: var(--sunset-300); }
.cl-err { color: var(--violet-fg); }
.cl-ok { color: var(--healthy-fg); }
.cl-prompt { color: #847d9a; }
.cl-meta { color: #57516a; }
.cl-cursor::after {
  content: '_'; color: var(--accent-fg);
  animation: blink 1.1s steps(2,end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* segmented control */
.seg {
  display: inline-flex;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 1px;
}
.seg__btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .12s;
}
.seg__btn:hover { color: var(--text); }
.seg__btn[data-active="true"] {
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* split layout */
.split { display: grid; gap: 18px; }
.split--2 { grid-template-columns: 2fr 1fr; }
.split--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) {
  .split--2 { grid-template-columns: 1fr; }
}

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
.cp-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 9, 17, .55);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 120px;
}
.cp {
  width: 620px; max-width: calc(100vw - 32px);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cp__input {
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 15px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
}
.cp__list { max-height: 380px; overflow: auto; padding: 6px; }
.cp__group {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--text-3);
  text-transform: uppercase;
  padding: 8px 10px 4px;
}
.cp__row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.cp__row[data-active="true"] { background: var(--bg-selected); color: var(--accent-fg); }
.cp__row-icon { width: 16px; color: var(--text-3); }
.cp__row[data-active="true"] .cp__row-icon { color: var(--accent-fg); }
.cp__row-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.cp__footer {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  display: flex; gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.cp__footer kbd {
  font-family: var(--font-mono);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
}

/* ============================================================
   PIPELINE / KANBAN
   ============================================================ */
.pipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.pipe__col {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 240px;
  transition: border-color 120ms ease, background 120ms ease;
}
.pipe__col[data-drag-over="true"] {
  border-color: var(--accent-fg, var(--sunset-500));
  background: rgba(255,95,0,.05);
}
.pipe__card[draggable="true"]:active { cursor: grabbing; }
.pipe__col-hd {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.pipe__col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  display: flex; align-items: center; gap: 8px;
}
.pipe__col-cnt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.pipe__col-body {
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
}
.pipe__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  cursor: pointer;
  transition: all .15s var(--ease-out);
}
.pipe__card:hover {
  border-color: var(--accent-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
/* Operator-submitted lead: dashed border + subtle accent strip on the
   left edge so the draft (pending enrichment) card is visually distinct
   from seeded companies the kanban already had. */
.pipe__card--draft {
  border-style: dashed;
  border-left: 3px solid var(--accent-fg);
  background: linear-gradient(90deg, rgba(255,95,0,.04), var(--bg-card) 60%);
}
.pipe__card-co {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
  display: flex; justify-content: space-between; gap: 6px;
}
.pipe__card-pain {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pipe__card-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}

/* transcript / call view */
.call-trace-receipt {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(255,95,0,.08), transparent 58%),
    var(--bg-inset);
}
.call-trace-receipt__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.call-trace-receipt__copy strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}
.call-trace-receipt__copy .mono {
  color: var(--text-3);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.call-trace-receipt__facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.call-trace-receipt__facts span {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.call-trace-review {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.call-trace-review__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.call-trace-review__head strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 15px;
  overflow-wrap: anywhere;
}
.call-trace-review__head p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.call-trace-review__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.call-trace-review__facts span {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: 11px;
}
.call-trace-review__facts strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.1;
}
.call-trace-review__json {
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.45;
}
.call-trace-review__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.trans {
  display: flex; flex-direction: column; gap: 6px;
}
.trans__line {
  display: grid;
  grid-template-columns: 56px 90px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.55;
  align-items: start;
}
.trans__line:last-child { border-bottom: 0; }
.trans__line:hover { background: var(--bg-hover); }
.trans__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  padding-top: 1px;
}
.trans__who {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 2px;
}
.trans__who--agent { color: var(--accent-fg); }
.trans__who--caller { color: var(--text); }
.trans__who--tool { color: var(--violet-500); }
.trans__txt { color: var(--text); }
.trans__line[data-flag="true"] { background: rgba(207,60,105,.06); }
.trans__line[data-flag="true"] .trans__txt { border-left: 2px solid var(--violet-500); padding-left: 10px; margin-left: -10px; }
.trans__line[data-has-note="true"] { box-shadow: inset 3px 0 0 var(--accent-fg, var(--sunset-500)); }
.trans__line[data-has-note="true"]:not([data-flag="true"]) { background: rgba(255,95,0,.04); }
.trans__line[data-playing="true"] {
  background: rgba(255,95,0,.12);
  box-shadow: inset 3px 0 0 var(--accent-fg, var(--sunset-500));
  outline: 1px solid rgba(255,95,0,.35);
}
.trans__note-marker { font-size: 12px; opacity: .85; }
.trans__composer {
  margin: 6px 0 10px 56px;
  padding: 8px 10px;
  border: 1px solid var(--accent-fg, var(--sunset-500));
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.trans__composer textarea { width: 100%; }
.trans__saved-note {
  display: flex; gap: 6px; align-items: flex-start;
  margin: 4px 0 10px 56px;
  padding: 6px 10px;
  border-left: 2px solid var(--accent-fg, var(--sunset-500));
  background: rgba(255,95,0,.04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 12px;
  color: var(--text-2);
}

/* score axis row */
.axis {
  display: grid;
  grid-template-columns: 1fr auto 60px 16px;
  gap: 12px; align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
.axis:last-child { border-bottom: 0; }
.axis__name { font-family: var(--font-mono); font-size: 11px; }
.axis__detail { color: var(--text-2); font-size: 11px; }
.axis__weight { color: var(--text-3); font-family: var(--font-mono); font-size: 10px; text-align: right; }

/* timeline / steps */
.timeline {
  display: flex; flex-direction: column;
  position: relative;
}
.tl-step {
  display: flex; gap: 12px;
  padding: 6px 0;
  position: relative;
}
.tl-step::before {
  content: ''; position: absolute;
  left: 11px; top: 26px; bottom: -10px; width: 1px;
  background: var(--border);
}
.tl-step:last-child::before { display: none; }
.tl-step__bullet {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.tl-step--done .tl-step__bullet { background: var(--healthy); border-color: var(--healthy); color: white; }
.tl-step--active .tl-step__bullet { background: var(--sunset-500); border-color: var(--accent-fg); color: white; box-shadow: 0 0 0 4px rgba(255,95,0,.18); animation: pulse 2.4s infinite; }
.tl-step--err .tl-step__bullet { background: var(--violet-500); border-color: var(--violet-500); color: white; }
.tl-step__body { flex: 1; padding-top: 1px; }
.tl-step__title { font-size: 13px; font-weight: 600; }
.tl-step__sub { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }

/* spark / chart */
.spark-wrap {
  display: block;
  width: 100%;
  position: relative;
  cursor: help;
  border-radius: var(--r-sm);
}
.spark-wrap:focus-visible {
  outline: 2px solid var(--sunset-500);
  outline-offset: 2px;
}
.spark-wrap--empty {
  min-height: 28px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
}
.spark-empty {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spark-wrap[data-popout]::after {
  content: none;
  display: none;
}
.spark {
  height: 40px;
  width: 100%;
  display: block;
  opacity: var(--spark-visual-opacity, 1);
  transition: opacity .12s var(--ease-out);
}
.spark-wrap:hover .spark,
.spark-wrap:focus-visible .spark,
.spark-wrap:focus-within .spark {
  opacity: 1;
}
.spark-point {
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--spark-color, var(--sunset-500));
  border: 1px solid var(--bg-card);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
  transform: translate(-50%, -50%);
  opacity: .32;
  transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
}
.spark-wrap:hover .spark-point,
.spark-wrap:focus-visible .spark-point {
  opacity: .78;
}
.spark-point:hover,
.spark-point[data-active="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
  z-index: 4;
}
.spark-scrubber {
  position: absolute;
  top: 2px;
  bottom: 2px;
  z-index: 3;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--spark-color, var(--sunset-500)), transparent);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  opacity: .86;
  transform: translateX(-50%);
  pointer-events: none;
}

.inspectable {
  position: relative;
  cursor: inherit;
}
.inspectable[data-popout]::after {
  content: none;
  display: none;
}
.inspectable[role="button"],
button.inspectable {
  cursor: pointer;
}
.spark-tooltip {
  position: absolute;
  z-index: 125;
  min-width: 126px;
  max-width: min(260px, calc(100vw - 32px));
  padding: 7px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  transform: translate(-50%, calc(-100% - 10px));
  pointer-events: none;
}
.spark-tooltip[data-edge="start"] {
  transform: translate(0, calc(-100% - 10px));
}
.spark-tooltip[data-edge="end"] {
  transform: translate(-100%, calc(-100% - 10px));
}

.workflow-popout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
  position: relative;
}
.workflow-popout--single {
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

/* ============================================================
   GENERATE PAGE
   ============================================================ */
.page--generate {
  max-width: none;
}
.page--generate .ph {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  column-gap: 16px;
  margin-bottom: 12px;
}
.page--generate .ph > div {
  min-width: 0;
}
.page--generate .ph__actions {
  justify-content: flex-end;
  margin-left: auto;
  padding-top: 4px;
}
.generate-run-status {
  margin-bottom: 14px;
}
.generate-run-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(136px, 1fr));
  gap: 8px;
  width: 100%;
}
.generate-run-fact {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
}
.generate-run-fact[data-state="ready"] {
  border-left-color: var(--healthy-fg);
}
.generate-run-fact[data-state="preview"] {
  border-left-color: var(--accent-fg);
}
.generate-run-fact[data-state="missing"],
.generate-run-fact[data-state="blocked"] {
  border-left-color: var(--violet-fg);
}
.generate-run-fact span,
.generate-run-fact small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generate-run-fact span {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.generate-run-fact strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.generate-run-fact small {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.25;
}
.generate-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.generate-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
}
.generate-step[data-state="ready"],
.generate-step[data-state="running"],
.generate-step[data-state="complete"] {
  border-color: var(--border-strong);
  background: linear-gradient(135deg, rgba(255,95,0,.09), rgba(255,255,255,.02));
}
.generate-step__number {
  display: block;
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}
.generate-step strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.15;
  margin-bottom: 2px;
}
.generate-step p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.generate-step:not(:has(.generate-step__action)) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.generate-step__action {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
}
.generate-grid {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(280px, .82fr) minmax(400px, 1.1fr);
  gap: 16px;
  align-items: start;
}
.generate-runtime-map {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.generate-runtime-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
}
.generate-runtime-stage[data-state="ready"] {
  border-left-color: var(--accent-fg);
}
.generate-runtime-stage[data-state="running"] {
  border-left-color: var(--sunset-300);
  background: linear-gradient(135deg, rgba(255,158,51,.10), rgba(255,255,255,.02));
}
.generate-runtime-stage[data-state="complete"] {
  border-left-color: var(--healthy-fg);
}
.generate-runtime-stage[data-state="locked"] {
  opacity: .76;
}
.generate-runtime-stage__index {
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}
.generate-runtime-stage strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}
.generate-runtime-stage p {
  margin: 2px 0 0;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.25;
}
.generate-runtime-stage .badge {
  justify-self: end;
}
.generate-brief {
  width: 100%;
  /* Trim ~24px at 720h so the lower draft controls (Generate review draft)
     stay above the laptop fold. The textarea still resizes vertically if
     the operator wants more room, but the default sits comfortably above
     the actions row. */
  min-height: clamp(200px, 30vh, 320px);
  height: clamp(200px, 30vh, 320px);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  resize: vertical;
}
.generate-brief[aria-invalid="true"] {
  border-color: var(--violet-fg);
  box-shadow: 0 0 0 2px rgba(207, 60, 105, .20);
}
.generate-brief-error {
  margin-top: 8px;
  color: var(--violet-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}
.generate-brief-note {
  margin-top: 8px;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
}
.generate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.artifact-review {
  display: grid;
  gap: 14px;
}
.artifact-review__state,
.artifact-review__packet,
.artifact-review__quality > div,
.artifact-review__links {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.generate-review-card {
  position: sticky;
  top: 96px;
}
.generate-review-card .card__hd {
  align-items: center;
  flex-wrap: nowrap;
}
.generate-review-card .card__title {
  flex: 0 0 auto;
  white-space: nowrap;
}
.generate-review-card .card__hd .generate-review-cta {
  flex: 0 0 auto;
  padding-inline: 10px;
  letter-spacing: .02em;
}
.generate-review-cta-wrap {
  display: grid;
  justify-items: end;
  gap: 4px;
  margin-left: auto;
  max-width: min(220px, 100%);
}
.generate-review-cta-help {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.25;
  text-align: right;
  overflow-wrap: anywhere;
}
.generate-review-card .artifact-review {
  gap: 10px;
}
.artifact-review__state {
  align-items: flex-start;
  line-height: 1.45;
}
.generate-review-card .artifact-review__state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.generate-review-card .artifact-review__state > span:not(.badge) {
  min-width: 0;
}
.artifact-review__jump {
  margin-left: auto;
  white-space: nowrap;
}
.artifact-review__packet {
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,95,0,.10), rgba(207,60,105,.07));
}
.artifact-review__packet strong {
  display: block;
  margin: 3px 0 4px;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.25;
}
.artifact-review__packet p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.artifact-review__path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.artifact-review__path > div,
.artifact-drawer__pathway > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.artifact-review__path > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
}
.artifact-review__path > div[data-state="ready"],
.artifact-review__path > div[data-state="active"],
.artifact-drawer__pathway > div[data-state="ready"],
.artifact-drawer__pathway > div[data-state="active"] {
  border-color: rgba(255,95,0,.45);
  background: linear-gradient(135deg, rgba(255,95,0,.10), rgba(255,255,255,.02));
}
.artifact-review__path > div[data-state="blocked"],
.artifact-drawer__pathway > div[data-state="blocked"] {
  border-color: rgba(207,60,105,.32);
}
.artifact-review__path-index {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: rgba(255,95,0,.14);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}
.artifact-review__path strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}
.artifact-review__path p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.4;
}
.generate-review-card .artifact-review__path > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(84px, auto);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}
.generate-review-card .artifact-review__path > div:not(:has(.artifact-review__path-action)) {
  grid-template-columns: auto minmax(0, 1fr);
}
.artifact-review__path-copy {
  min-width: 0;
}
.generate-review-card .artifact-review__path > div[data-state="locked"] {
  pointer-events: none;
}
.generate-review-card .artifact-review__path {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}
.generate-review-card .artifact-review__path-action {
  width: auto;
  margin-top: 0;
  justify-content: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-spacing: 1px;
  line-height: 1.2;
  letter-spacing: .02em;
}
.generate-review-card .artifact-review__path p {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
}
.generate-review-card .artifact-review__path-index {
  width: 18px;
  height: 18px;
  font-size: 9px;
}
.artifact-review__quality {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.artifact-review__quality > div {
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  font-size: 13px;
}
.generate-review-card .artifact-review__quality > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  align-content: start;
  min-height: 62px;
}
.generate-review-card .artifact-review__quality .badge {
  justify-self: start;
}
.artifact-review__links .btn {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  justify-content: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-spacing: 1px;
  line-height: 1.2;
  letter-spacing: .02em;
}
.artifact-review__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.generate-artifact-panel {
  margin-top: 18px;
}
.artifact-drawer {
  display: grid;
  gap: 12px;
}
.artifact-drawer__meta,
.artifact-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.artifact-drawer__meta span {
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.artifact-drawer__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 10px;
  flex: 1 1 100%;
  width: 100%;
}
.artifact-drawer__facts > div,
.artifact-drawer__source {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
}
.artifact-drawer__source {
  display: grid;
  gap: 3px;
}
.artifact-drawer__source strong {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.artifact-drawer__source small {
  min-width: 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.artifact-drawer__pathway {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 100%;
  width: 100%;
}
.artifact-drawer__pathway > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: flex-start;
}
.artifact-drawer__path-copy {
  min-width: 0;
}
.artifact-drawer__path-copy strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}
.artifact-drawer__path-copy p {
  margin: 3px 0 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.artifact-drawer__pathway .badge {
  justify-self: end;
}
.artifact-drawer__facts code,
.artifact-drawer__source code {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.artifact-drawer__review {
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-inset);
}
.artifact-drawer__review iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  background: #fff;
}
.artifact-drawer__review pre {
  margin: 0;
  min-height: 260px;
  padding: 14px;
  overflow: auto;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.55;
}
.artifact-drawer__path {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.artifact-drawer__review:focus-visible {
  outline: 2px solid var(--sunset-500);
  outline-offset: 3px;
}
.artifact-drawer__local-note {
  color: var(--text-3);
  flex: 1 1 100%;
  font-size: 11px;
  line-height: 1.45;
}
@media (min-width: 1180px) {
  .generate-artifact-panel .artifact-drawer {
    grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr);
    align-items: start;
  }
  .generate-artifact-panel .artifact-drawer__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }
  .generate-artifact-panel .artifact-drawer__meta > .artifact-drawer__facts,
  .generate-artifact-panel .artifact-drawer__meta > .artifact-drawer__source,
  .generate-artifact-panel .artifact-drawer__meta > .artifact-drawer__pathway {
    grid-column: 1 / -1;
  }
  .generate-artifact-panel .artifact-drawer__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .generate-artifact-panel .artifact-drawer__pathway {
    grid-template-columns: minmax(0, 1fr);
  }
  .generate-artifact-panel .artifact-drawer__actions {
    grid-column: 1 / -1;
  }
  .generate-artifact-panel .artifact-drawer__review {
    min-height: min(62vh, 560px);
  }
  .generate-artifact-panel .artifact-drawer__review iframe {
    height: min(62vh, 560px);
  }
}
.lead-artifact-review {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-md);
  background: var(--bg-card);
}
.lead-artifact-review:focus {
  outline: 2px solid rgba(255,95,0,.62);
  outline-offset: 3px;
}
.lead-artifact-review__head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}
.lead-artifact-review__head strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 14px;
}
.lead-artifact-review__head p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.lead-artifact-list {
  display: grid;
  gap: 8px;
}
.lead-artifact-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lead-artifact-row[data-active="true"] {
  border-color: var(--accent-fg);
  background: var(--bg-selected);
}
.lead-artifact-row span:first-child {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
}
.lead-artifact-row code {
  min-width: 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lead-artifact-preview {
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  overflow: hidden;
}
.lead-artifact-preview pre {
  margin: 0;
  max-height: 260px;
  padding: 12px;
  overflow: auto;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.55;
}
.lead-artifact-empty {
  display: grid;
  gap: 5px;
  padding: 16px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.lead-artifact-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lead-artifact-actions .btn {
  flex: 1 1 150px;
  justify-content: center;
}
@media (max-width: 1260px) {
  .generate-run-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }
  .generate-sequence,
  .generate-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .generate-review-card {
    position: static;
  }
  .generate-review-card .card__hd {
    flex-wrap: wrap;
  }
  .generate-review-cta-wrap {
    justify-items: start;
    margin-left: 0;
    max-width: 100%;
  }
  .generate-review-cta-help {
    text-align: left;
  }
  .artifact-review__quality {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .artifact-review__path,
  .artifact-drawer__pathway {
    grid-template-columns: minmax(0, 1fr);
  }
  .proposal-review__artifacts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1261px) and (max-height: 760px) {
  .page--generate .ph {
    margin-bottom: 12px;
  }
  .generate-run-strip {
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    gap: 6px;
    margin-top: 6px;
  }
  .generate-run-fact {
    padding: 5px 7px;
  }
  .generate-run-fact strong {
    font-size: 12px;
  }
  .generate-run-fact small {
    font-size: 9px;
  }
  .page--generate .ph__sub {
    margin-top: 2px;
  }
  .generate-sequence {
    gap: 8px;
    margin-bottom: 12px;
  }
  .generate-step {
    gap: 8px;
    padding: 9px 12px;
  }
  .generate-step__action {
    padding-inline: 7px;
  }
  .generate-step p {
    line-height: 1.25;
  }
  .generate-runtime-map {
    gap: 5px;
    margin-bottom: 10px;
  }
  .generate-runtime-stage {
    padding: 5px 7px;
  }
  .generate-runtime-stage p {
    display: none;
  }
  .generate-grid {
    gap: 12px;
  }
  .generate-review-card {
    top: 76px;
  }
  .generate-review-card .card__hd {
    padding: 8px 14px;
  }
  .generate-review-cta-help {
    display: none;
  }
  .generate-review-card .card__body {
    padding: 6px 10px 7px;
  }
  .generate-review-card .artifact-review {
    gap: 5px;
  }
  .artifact-review__state {
    font-size: 12px;
    line-height: 1.3;
  }
  .generate-review-card .artifact-review__path {
    gap: 6px;
  }
  .generate-review-card .artifact-review__path > div {
    grid-template-columns: auto minmax(0, 1fr) minmax(74px, auto);
    align-items: start;
    gap: 6px;
    padding: 4px 6px;
  }
  .generate-review-card .artifact-review__path strong {
    font-size: 11px;
  }
  .generate-review-card .artifact-review__path p {
    font-size: 10px;
    line-height: 1.15;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .generate-review-card .artifact-review__path-action {
    margin-top: 0;
    padding: 3px 6px;
    font-size: 9px;
  }
  .artifact-review__links .btn {
    min-height: 40px;
    padding-block: 5px;
  }
  .artifact-review__packet {
    padding: 10px;
  }
  .artifact-review__quality {
    gap: 8px;
  }
  .generate-review-card .artifact-review__quality > div {
    min-height: 50px;
    padding: 7px 9px;
    font-size: 12px;
  }
}
@media (min-width: 1261px) and (max-height: 660px) {
  .page--generate .ph {
    margin-bottom: 8px;
  }
  .generate-sequence {
    gap: 6px;
    margin-bottom: 10px;
  }
  .generate-step {
    padding: 7px 10px;
  }
  .generate-review-card .card__body {
    padding: 5px 9px 6px;
  }
  .generate-review-card .artifact-review__path {
    gap: 4px;
  }
}
@media (max-width: 760px) {
  .page--generate .ph > div {
    min-width: 0;
  }
  .page--generate .ph {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--generate .ph__actions {
    justify-content: flex-start;
    margin-left: 0;
    padding-top: 0;
  }
  .generate-run-strip {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
    gap: 6px;
    margin-top: 6px;
  }
  .generate-run-fact {
    min-height: 60px;
    padding: 6px 8px;
  }
  .generate-run-fact span,
  .generate-run-fact strong,
  .generate-run-fact small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .generate-run-fact strong {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.15;
    word-spacing: .16em;
  }
  .generate-run-fact small {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.2;
  }
  .generate-sequence {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
  }
  .generate-step,
  .generate-step:not(:has(.generate-step__action)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-content: start;
    padding: 8px;
  }
  .generate-step__number {
    font-size: 10px;
  }
  .generate-step strong {
    font-size: 12px;
    line-height: 1.15;
  }
  .generate-step p {
    display: none;
  }
  .generate-step__action {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 0;
    max-width: 100%;
    padding: 4px 6px;
    font-size: 9px;
    white-space: normal;
  }
  .generate-step > .badge {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: 100%;
    padding: 3px 6px;
    font-size: 8px;
    white-space: normal;
  }
  .generate-brief-card {
    order: 1;
  }
  .generate-trace-card {
    order: 2;
  }
  .generate-runtime-stage {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .generate-runtime-stage .badge {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
  .generate-review-card {
    order: 3;
  }
  .artifact-review__quality {
    grid-template-columns: minmax(0, 1fr);
  }
  .artifact-review__path,
  .artifact-drawer__pathway {
    grid-template-columns: minmax(0, 1fr);
  }
  .artifact-review__links {
    grid-template-columns: minmax(0, 1fr);
  }
  .artifact-review__jump {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
  .generate-review-card .artifact-review__state {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
  }
  .artifact-drawer__facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .artifact-drawer__actions .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .generate-sequence {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .generate-step,
  .generate-step:not(:has(.generate-step__action)) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 54px;
    padding: 8px 10px;
  }
  .generate-step__copy {
    min-width: 0;
  }
  .generate-step p {
    display: block;
    font-size: 10px;
    line-height: 1.25;
  }
  .generate-step__action {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    max-width: 78px;
    text-align: center;
  }
  .generate-step > .badge {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  .generate-step:not(:has(.generate-step__action)) > .badge {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
  }
}
.workflow-popout__pane {
  padding: 13px 14px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.workflow-popout__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.workflow-popout__title {
  margin: 3px 0 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}
.workflow-popout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.workflow-tile {
  display: grid;
  gap: 4px;
  min-height: 66px;
  padding: 10px 11px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text);
}
.workflow-tile:hover,
.workflow-tile[aria-pressed="true"] {
  border-color: var(--accent-fg);
  background: var(--bg-selected);
}
.workflow-tile span:first-child {
  font-weight: 700;
  font-size: 13px;
}
.workflow-tile span:last-child {
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
}
.proposal-preview {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-inset);
}
.proposal-preview__bar {
  padding: 7px 10px;
  background: rgba(255,95,0,.08);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--accent-fg);
}
.proposal-preview__body {
  display: grid;
  gap: 4px;
  padding: 12px;
  font-size: 13px;
}
.proposal-preview__body span {
  color: var(--text-2);
  font-size: 12px;
}
.proposal-row-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, max-content);
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px dashed var(--border);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.proposal-row-card[data-active="true"] {
  border-left-color: var(--sunset-500);
  padding-left: 10px;
}
.proposal-row-card__main,
.proposal-detail-summary__copy {
  min-width: 0;
}
.proposal-row-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  min-width: 0;
  margin-bottom: 4px;
}
.proposal-row-card__id {
  color: var(--accent-fg);
  font-size: 11px;
  font-weight: 600;
}
.proposal-row-card__company {
  margin-bottom: 2px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.proposal-row-card__sub {
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.proposal-row-card__amount {
  min-width: 0;
  text-align: right;
}
.proposal-row-card__value {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}
.page--proposals .proposals-review-handoff {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr);
}
.page--proposals .proposals-review-handoff .proposal-detail-stack {
  order: 1;
}
.page--proposals .proposals-review-handoff .proposals-list-card {
  order: 2;
}
@media (max-width: 1100px) {
  .page--proposals .proposals-review-handoff {
    grid-template-columns: minmax(0, 1fr);
  }
}
.proposal-detail-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
  margin-bottom: 14px;
}
.proposal-detail-summary__company {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.proposal-detail-summary__meta {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.proposal-detail-summary__amount {
  flex: 0 0 auto;
  min-width: 0;
  text-align: right;
}
.proposal-detail-summary__value {
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.05;
}
.proposal-detail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
  gap: 8px;
  margin-top: 14px;
}
.proposal-detail-actions .btn {
  justify-content: center;
  min-width: 0;
  text-align: center;
  white-space: normal;
}
.proposal-detail-actions [data-testid="proposal-address-blockers"] {
  grid-column: 1 / -1;
}
.proposal-send-held-button {
  border-color: rgba(207, 60, 105, .45);
  color: var(--violet-fg);
}
.proposal-send-gate-note {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.4;
}
.proposal-review {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.proposal-review__artifacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.proposal-review__artifact {
  min-width: 0;
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.proposal-review__artifact:hover,
.proposal-review__artifact:focus-visible,
.proposal-review__artifact[data-active="true"] {
  border-color: var(--accent-fg);
  background: var(--bg-selected);
}
.proposal-review__artifact[data-preview-state="unavailable"] {
  border-style: dashed;
}
.proposal-review__artifact:focus-visible {
  outline: 2px solid var(--accent-fg);
  outline-offset: 2px;
}
.proposal-review__artifact > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.proposal-review__artifact strong {
  font-size: 12px;
}
.proposal-review__artifact code {
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.proposal-review__artifact-action {
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.proposal-review__artifact[data-preview-state="unavailable"] .proposal-review__artifact-action {
  color: var(--text-3);
}
.proposal-review__artifact-note {
  display: block;
  color: var(--text-3);
  font-size: 11px;
  line-height: 1.35;
}
.proposal-review__empty {
  min-height: 260px;
  align-content: center;
}
.proposal-review__empty strong {
  color: var(--text);
  font-size: 14px;
}
.proposal-review__empty code {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.proposal-review__preview iframe {
  height: 300px;
}
.proposal-send-hold {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.proposal-send-hold__summary {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(207, 60, 105, .35);
  border-left: 3px solid var(--violet-500);
  border-radius: var(--r-md);
  background: rgba(207, 60, 105, .08);
}
.proposal-send-hold__summary strong {
  color: var(--text);
  font-size: 14px;
}
.proposal-send-hold__summary p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.proposal-send-hold__blockers {
  display: grid;
  gap: 6px;
}
.proposal-send-hold__blockers > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
}
.proposal-send-hold__blockers span {
  color: var(--violet-fg);
  font-size: 10px;
  font-weight: 700;
  min-width: 28px;
  white-space: nowrap;
}
.proposal-send-hold__blockers strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* settings */
.settings-grid { display: grid; grid-template-columns: 200px 1fr; gap: 28px; }
.settings-nav { display: flex; flex-direction: column; gap: 1px; }
.settings-nav__item {
  padding: 7px 10px; border-radius: var(--r-md);
  font-size: 13px; cursor: pointer; color: var(--text-2);
}
.settings-nav__item:hover { background: var(--bg-hover); color: var(--text); }
.settings-nav__item[data-active="true"] { background: var(--bg-selected); color: var(--accent-fg); }
@media (max-width: 1120px) {
  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .settings-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .settings-nav__item {
    min-width: 0;
    text-align: left;
  }
}
@media (max-width: 520px) {
  .settings-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.field__hint { font-size: 12px; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-size: 13px;
  outline: 0;
  transition: border-color .15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent-fg); background: var(--bg-elev); }

/* toggle switch */
.switch {
  width: 32px; height: 18px;
  border-radius: 9px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.switch::after {
  content: ''; position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-2);
  left: 2px; top: 2px;
  transition: all .2s;
}
.switch[data-on="true"] { background: var(--sunset-500); border-color: var(--accent-fg); }
.switch[data-on="true"]::after { background: white; left: 16px; }

/* utility */
.hstack { display: flex; align-items: center; gap: 8px; }
.vstack { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }

/* a11y focus */
button:focus-visible, .btn:focus-visible, .pipe__card:focus-visible {
  outline: 2px solid var(--sunset-500);
  outline-offset: 2px;
}
input:focus-visible, .input:focus-visible { outline: 0; border-color: var(--accent-fg); box-shadow: 0 0 0 3px rgba(255,95,0,.18); }

/* ============================================================
   POPOVERS / NOTIFICATIONS / TOASTS
   ============================================================ */
.tb__bell { position: relative; }
.tb__bell-dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet-500);
  box-shadow: 0 0 0 2px var(--bg);
}
.popover {
  position: fixed;
  z-index: 220;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: pop-in .12s var(--ease-out);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.pop__hd {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.pop__list { max-height: 360px; overflow: auto; padding: 4px; }
.pop__row {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%;
  padding: 9px 10px; border-radius: var(--r-md);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background .12s;
}
.pop__row:hover { background: var(--bg-hover); }
.pop__row + .pop__row { border-top: 1px dashed var(--border); }
.pop__ft {
  border-top: 1px solid var(--border);
  padding: 6px 10px;
  display: flex; gap: 6px; justify-content: space-between;
}

/* Toast host (bottom-right) */
.toast-host {
  position: fixed; bottom: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  min-width: 280px; max-width: 360px;
  animation: toast-in .2s var(--ease-out);
}
.toast--critical { border-left-color: var(--violet-500); }
.toast--warn { border-left-color: var(--sunset-300); }
.toast__msg { font-size: 13px; font-weight: 600; }
.toast__sub { font-size: 11px; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   CALLS PAGE — robust full-height grid that doesn't depend on
   viewport-relative magic numbers. Each column owns its scroll;
   the page scroller (.scroll) flexes to host height.
   ============================================================ */
.calls-page {
  display: flex; flex-direction: column;
  min-height: 0;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.calls-grid {
  flex: 1;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  gap: 18px;
}
@media (max-width: 1360px) {
  /* The app shell consumes sidebar width before this grid gets space.
     At 1280px laptop viewports a three-column calls layout leaves the
     transcript text column around 100px wide, which makes real speech
     unreadable. Promote the scorecard below the transcript sooner. */
  .calls-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .calls-grid__side { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .calls-grid { grid-template-columns: minmax(0, 1fr); }
}
.calls-grid__list,
.calls-grid__transcript,
.calls-grid__side {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.calls-grid__side { gap: 14px; overflow: auto; padding-right: 2px; }
/* Card body inside the transcript card must be allowed to shrink so the
   inner scroll container actually scrolls. */
.calls-grid__transcript .card__body { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.calls-grid__list .card__body { min-height: 0; flex: 1; overflow: auto; padding-right: 6px; }
.calls-grid__transcript .card__hd {
  align-items: flex-start;
  flex-wrap: wrap;
}
.calls-grid__transcript .card__title {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
  max-width: 100%;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: normal;
}
.calls-grid__transcript .card__hd > :not(.card__title) {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.calls-grid__trans-scroll {
  flex: 1; min-height: 0; overflow: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
}
@media (max-width: 760px) {
  .calls-grid__transcript .card__hd > :not(.card__title) {
    justify-content: flex-start;
  }
}

/* ============================================================
   AGENTS PAGE
   ============================================================ */
.agents-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.agents-picker-card {
  position: sticky;
  top: 18px;
  z-index: 3;
}
.agent-new-setup {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(360px, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-lasso);
  background:
    linear-gradient(135deg, rgba(255,95,0,.12), rgba(207,60,105,.06) 52%, transparent),
    var(--bg-card);
}
.agent-new-setup__copy h2 {
  margin: 3px 0 6px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.12;
  font-weight: 800;
}
.agent-new-setup__copy p,
.agent-new-setup__step p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.agent-new-setup__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.agent-new-setup__step {
  min-height: 88px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.agent-new-setup__step > span {
  display: block;
  color: var(--accent-fg);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 4px;
}
.agent-new-setup__step strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}
.agent-new-setup__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 980px) {
  .agents-grid { grid-template-columns: minmax(0, 1fr); }
  .agents-picker-card {
    position: static;
  }
  .agent-new-setup {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-new-setup__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  .agent-new-setup__steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
.agent-playground-card .card__body {
  display: grid;
  grid-template-columns: minmax(250px, .36fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.agent-playground-card .el-agent-panel {
  margin-bottom: 0;
}
.agent-admin-card .card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
}
.agent-admin-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, .42fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(255,95,0,.10), transparent 48%),
    var(--bg-inset);
  min-width: 0;
  max-width: 100%;
}
.agent-admin-hero__copy,
.agent-admin-caps,
.agent-admin-tabs,
.agent-admin-panel,
.agent-admin-grid,
.agent-admin-grid > *,
.agent-admin-block {
  min-width: 0;
  max-width: 100%;
}
.agent-admin-hero__copy h2 {
  margin: 3px 0 6px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  font-weight: 850;
}
.agent-admin-hero__copy p {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}
.agent-admin-caps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.agent-admin-caps .badge {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.agent-admin-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.agent-admin-tab {
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
}
.agent-admin-tab:hover,
.agent-admin-tab[data-active="true"] {
  color: var(--text);
  background: var(--bg-elev);
}
.agent-admin-panel {
  min-height: 150px;
}
.agent-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}
.agent-admin-actions .btn {
  min-width: 0;
}
.agent-context-panel {
  display: grid;
  gap: 12px;
}
.agent-eval-handoff {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(207,60,105,.28);
  border-left: 3px solid var(--violet-500);
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(207,60,105,.12), rgba(255,95,0,.07) 58%, transparent),
    var(--bg-inset);
}
.agent-eval-handoff strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.agent-eval-handoff p {
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.agent-eval-handoff__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.agent-eval-handoff__meta span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 11px;
}
.agent-eval-handoff__meta code {
  color: var(--accent-fg);
  overflow-wrap: anywhere;
}
.agent-eval-handoff__actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}
.agent-eval-handoff__actions .btn {
  justify-content: center;
  white-space: nowrap;
}
.agent-eval-handoff--banner {
  margin-bottom: 18px;
}
.agent-context-sync {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(260px, 1.1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,95,0,.28);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(255,95,0,.10), transparent 55%),
    var(--bg-inset);
}
.agent-context-sync strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}
.agent-context-sync p {
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.agent-context-sync__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.agent-context-sync__facts span {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 11px;
}
.agent-context-sync__facts code {
  color: var(--accent-fg);
  overflow-wrap: anywhere;
}
.agent-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.agent-admin-block {
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.agent-admin-json {
  max-height: 240px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.55;
}
.agent-admin-json:focus-visible {
  outline: 2px solid var(--accent-fg, var(--sunset-500));
  outline-offset: 2px;
}
.agent-admin-quick {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(255,95,0,.06);
}
.agent-admin-quick__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.agent-admin-quick__head .btn {
  justify-content: center;
  width: 100%;
  white-space: normal;
}
.agent-admin-focus-status {
  margin-bottom: 12px;
  padding: 7px 8px;
  border: 1px solid rgba(255,95,0,.28);
  border-radius: var(--r-sm);
  background: rgba(255,95,0,.07);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
}
.agent-admin-card:focus-within {
  outline: 2px solid rgba(255,95,0,.62);
  outline-offset: 4px;
}
.agent-admin-quick strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: break-word;
}
.agent-admin-quick__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.agent-admin-quick__button {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.agent-admin-quick__button:hover,
.agent-admin-quick__button[data-active="true"] {
  color: var(--accent-fg);
  border-color: rgba(255,95,0,.35);
  background: rgba(255,95,0,.10);
}
@media (max-width: 900px) {
  .agent-admin-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-context-sync {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-eval-handoff {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-eval-handoff__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agent-eval-handoff .btn {
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .agent-playground-card .card__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-context-sync__facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   EVALS PAGE
   ============================================================ */
.page--evals {
  max-width: none;
}
@media (min-width: 761px) {
  .page--evals {
    padding-right: 92px;
  }
}
.eval-command-center {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(380px, 420px);
  gap: 8px 16px;
  align-items: start;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, rgba(255,95,0,.09), transparent 48%),
    var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.eval-command-center__copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.eval-command-center__route {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  margin-bottom: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}
.eval-command-center__route h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}
.eval-command-center__scope-summary {
  display: none;
}
.eval-command-center__route-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  min-width: 0;
  width: 100%;
}
.eval-command-center__route-stats span {
  min-width: 0;
  color: var(--accent-fg);
}
.eval-command-center__route-stat {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  padding: 1px 6px;
  border: 1px solid rgba(255,95,0,.24);
  border-radius: var(--r-pill);
  background: rgba(255,95,0,.08);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eval-command-center h2 {
  margin: 2px 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
  overflow-wrap: break-word;
}
.eval-command-center p {
  max-width: 760px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.38;
}
.eval-command-center__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.eval-command-center__meta .mono {
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: 11px;
}
.eval-command-center__scenario-id {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.eval-command-center__axis-brief {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  max-width: 760px;
  padding: 8px;
  border: 1px solid var(--border);
  border-left: 2px solid rgba(255,95,0,.55);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
}
.eval-command-center__axis-brief-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.eval-command-center__axis-brief-head span {
  color: var(--sunset-500);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eval-command-center__axis-brief-head strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.eval-command-center__axis-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.eval-command-center__axis-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
}
.eval-command-center__axis-row[data-status="fail"] {
  border-color: rgba(207,60,105,.5);
  background: rgba(207,60,105,.08);
}
.eval-command-center__axis-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.eval-command-center__axis-copy strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.eval-command-center__axis-copy span {
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.eval-command-center__voice {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.eval-command-center__voice-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.eval-command-center__bar-stack {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) minmax(112px, max-content);
  gap: 7px;
  align-items: stretch;
  min-width: 0;
}
.eval-command-center__voice .el-bars {
  height: 42px;
}
.eval-command-center__latency {
  min-width: 112px;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
}
.eval-command-center__voice-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}
.eval-command-center__voice-fact,
.eval-command-center__evidence {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
}
.eval-command-center__voice-fact span,
.eval-command-center__evidence > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eval-command-center__voice-fact span,
.eval-command-center__evidence > span,
.eval-command-center__latency span {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eval-command-center__voice-fact strong,
.eval-command-center__latency strong {
  display: block;
  min-width: 0;
  margin-top: 2px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}
.eval-command-center__voice-fact strong {
  line-height: 1.25;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.eval-command-center__latency strong {
  line-height: 1.25;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.eval-command-center__evidence {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px 8px;
  align-items: start;
  padding: 8px;
  border-left: 2px solid rgba(255,95,0,.42);
}
.eval-command-center__evidence-title {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.32;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.eval-command-center__evidence-title-scope {
  display: block;
  min-width: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.eval-command-center__evidence-title strong {
  display: block;
  min-width: 0;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  overflow-wrap: anywhere;
}
.eval-command-center__evidence-kind {
  display: block;
  min-width: 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
  white-space: normal;
}
.eval-command-center__evidence code {
  display: block;
  grid-column: 1;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--text);
  font-size: 9px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}
.eval-command-center__evidence-actions {
  grid-column: 1;
  grid-row: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 1px;
  align-self: start;
}
.eval-command-center__evidence-actions .btn {
  flex: 0 0 auto;
  justify-content: center;
  min-height: 24px;
  white-space: nowrap;
}
.eval-command-center__ops {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.eval-command-center__filters,
.eval-command-center__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.eval-command-center__actions {
  justify-content: flex-end;
}
@media (min-width: 901px) {
  html[data-coach-open] .page--evals .eval-command-center {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-coach-open] .page--evals .eval-command-center__voice {
    max-width: 560px;
  }
}
.eval-stats {
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}
.eval-stats .stat {
  min-height: 78px;
  padding: 10px 12px;
}
.eval-stats .stat__value {
  font-size: 24px;
}
.eval-stats .stat:has(.stat__spark) {
  display: grid;
  align-content: start;
  min-height: 98px;
}
.eval-stats .stat:has(.stat__spark) .stat__value {
  padding-right: 0;
}
.eval-stats .stat__spark {
  position: static;
  width: 100%;
  max-width: 88px;
  margin-top: 6px;
  --spark-visual-opacity: .58;
}
@media (min-width: 1240px) {
  .page--evals .eval-stats {
    padding-right: 210px;
  }
}
@media (min-width: 761px) and (max-width: 1239px) {
  .page--evals .eval-stats {
    padding-right: 150px;
  }
}
@media (max-width: 1120px) {
  .eval-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.eval-run-plan-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.eval-run-plan-summary strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  margin: 2px 0 4px;
}
.eval-run-plan-summary [data-testid="eval-harness-manifest-status"] {
  font-size: 10px;
}
.eval-run-plan-summary .btn {
  flex: 0 0 auto;
}
@media (min-width: 901px) and (max-height: 760px) {
  .page--evals .eval-run-plan-summary {
    min-height: 0;
    margin-bottom: 6px;
    padding: 6px 10px;
  }
  .page--evals .eval-run-plan-summary > div {
    position: relative;
  }
  .page--evals .eval-run-plan-summary .eyebrow {
    display: inline;
    margin-right: 8px;
    line-height: 1;
  }
  .page--evals .eval-run-plan-summary strong {
    display: inline;
    margin: 0;
    line-height: 1.1;
  }
  .page--evals .eval-run-plan-summary [data-testid="eval-harness-manifest-status"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
.eval-suite-builder {
  margin-bottom: 18px;
}
.eval-suite-builder__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.eval-suite-builder__scenario {
  grid-column: 1 / -1;
}
.eval-suite-builder__scenario textarea {
  min-height: 96px;
  resize: vertical;
}
.eval-suite-builder__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.eval-suite-builder__error {
  margin-top: 8px;
  color: var(--violet-fg);
  font-family: var(--font-mono);
  font-size: 11px;
}
.eval-run-plan {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 14px;
  margin-top: 14px;
}
.eval-run-plan__detail {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.eval-run-plan__detail h4 {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.15;
}
.eval-run-plan__target {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 95, 0, .28);
  border-radius: var(--r-md);
  background: rgba(255, 95, 0, .08);
}
.eval-run-plan__target strong {
  font-size: 13px;
}
.eval-run-plan__target .mono {
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.45;
}
.eval-run-plan__detail code,
.eval-run-plan__artifacts code {
  display: block;
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.eval-run-plan__meta,
.eval-run-plan__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.eval-run-plan__artifacts {
  display: grid;
  gap: 8px;
}
.eval-run-plan__artifacts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 12px;
}
.eval-run-plan__artifacts > div > div {
  min-width: 0;
}
.eval-run-plan__artifacts .btn {
  white-space: nowrap;
}
.workflow-tile[data-active="true"] {
  border-color: var(--accent-fg);
  background: var(--bg-selected);
}
.evals-grid {
  display: grid;
  grid-template-columns: minmax(430px, .95fr) minmax(620px, 1.45fr);
  gap: 26px;
  align-items: start;
}
@media (min-width: 761px) {
  .page--evals .evals-grid {
    max-height: 1040px;
    overflow: auto;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
  }
}
.eval-agent-column {
  grid-column: 1 / -1;
}
.eval-artifact-panel {
  margin-bottom: 24px;
}
.eval-artifact-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-right: clamp(120px, 11vw, 220px);
}
.eval-artifact-review {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  min-width: 0;
}
.eval-artifact-panel .eval-artifact-review > *,
.eval-artifact-panel .artifact-drawer__facts {
  min-width: 0;
  max-width: 100%;
}
.eval-artifact-panel .artifact-drawer__facts {
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.eval-artifact-panel .artifact-drawer__fact--path {
  grid-column: 1 / -1;
}
.eval-artifact-panel .artifact-drawer__fact--path code {
  display: block;
}
.eval-artifact-review__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(255, 95, 0, .28);
  border-radius: var(--r-md);
  background: rgba(255, 95, 0, .07);
}
.eval-artifact-review__summary strong {
  min-width: 0;
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.eval-artifact-review__summary p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.eval-artifact-review__axes {
  display: grid;
  gap: 8px;
}
.eval-artifact-review__axis {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.eval-artifact-review__axis[data-status="fail"] {
  border-color: rgba(207, 60, 105, .38);
  background: rgba(207, 60, 105, .07);
}
.eval-artifact-review__axis strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.eval-artifact-review__axis p {
  margin: 3px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.4;
}
.eval-artifact-json {
  margin-top: 14px;
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.55;
}
.eval-suite-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: start;
}
.eval-kpi {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.eval-kpi--healthy { color: var(--healthy-fg); }
.eval-kpi--critical { color: var(--violet-fg); }
.eval-suite-context-note {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-fg);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.eval-suite-context-note strong,
.eval-suite-context-note p {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.eval-suite-context-note strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 13px;
}
.eval-suite-context-note p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
}
.eval-suite-row {
  border-bottom: 1px dashed var(--border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 12px;
  align-items: center;
  border-left: 2px solid transparent;
  padding: 12px 4px;
}
.eval-suite-row[data-active="true"] {
  border-left-color: var(--sunset-500);
}
.eval-suite-row[data-draft="true"] {
  background: linear-gradient(90deg, rgba(255,95,0,.08), transparent 62%);
}
.eval-suite-row__select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(78px, .28fr) minmax(56px, auto);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.eval-suite-row__select > div:first-child,
.eval-suite-row__select > div:first-child > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.eval-suite-row__select:hover {
  color: var(--text);
}
.eval-runs-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.eval-runs-card__actions .btn {
  flex: 0 0 auto;
}
.eval-suite-draft-focus {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.eval-suite-draft-focus p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}
.eval-run-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}
.eval-run-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out), transform .15s var(--ease-out);
}
.eval-run-row__select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 64px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.eval-run-row__latency {
  justify-self: end;
  min-width: 56px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}
.eval-run-row__latency[data-tone="healthy"] { color: var(--healthy-fg); border-color: rgba(93,140,97,.35); }
.eval-run-row__latency[data-tone="warn"] { color: var(--warn-fg); border-color: rgba(255,158,51,.35); }
.eval-run-row__latency[data-tone="critical"] { color: var(--violet-fg); border-color: rgba(207,60,105,.35); }
.eval-run-row__latency[data-tone="neutral"] { color: var(--text-3); }
.eval-run-row:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.eval-run-row[data-active="true"] {
  background: var(--bg-selected);
  border-color: var(--accent-fg);
}
.eval-run-row[data-verdict="pass"] { border-left-color: var(--healthy); }
.eval-run-row[data-verdict="fail"] { border-left-color: var(--violet-500); }
.eval-run-row__title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eval-score-pill {
  justify-self: end;
  min-width: 56px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.eval-score-pill[data-tone="healthy"] { color: var(--healthy-fg); border-color: rgba(93,140,97,.35); }
.eval-score-pill[data-tone="warn"] { color: var(--warn-fg); border-color: rgba(255,158,51,.35); }
.eval-score-pill[data-tone="critical"] { color: var(--violet-fg); border-color: rgba(207,60,105,.35); }
.eval-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr);
  gap: 16px;
  align-items: stretch;
}
.eval-meta-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
.eval-meta-strip > .mono {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 11px;
  color: var(--text-2);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 3px 8px;
}
.eval-meta-strip__label {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.eval-axis-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eval-axis-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--healthy);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.eval-axis-row[data-pass="false"] {
  border-left-color: var(--violet-500);
  background: rgba(207,60,105,.06);
}
.el-agent-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}
.el-agent-panel__head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.el-orb {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.75), transparent 18%),
    linear-gradient(145deg, var(--orb-a, var(--orb-c1, var(--sunset-500))), var(--orb-b, var(--orb-c2, var(--violet-500))));
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 28px rgba(0,0,0,.24);
  flex: 0 0 auto;
  overflow: hidden;
}
.el-orb > span:not(.el-orb__ring):not(.el-orb__core),
.el-orb__core {
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
}
.el-orb__ring {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
}
.el-orb--talking .el-orb__ring,
.el-orb--alert .el-orb__ring {
  animation: pulse 1.8s ease-in-out infinite;
}
.el-waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 58px;
  padding: 8px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.el-waveform span {
  flex: 1;
  min-width: 5px;
  max-width: 16px;
  border-radius: 99px;
  background: var(--healthy);
  opacity: .86;
}
.el-waveform span[data-pass="false"] { background: var(--violet-500); }
.el-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 58px;
  padding: 8px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.el-bars span {
  flex: 1;
  min-width: 3px;
  max-width: 16px;
  border-radius: 99px;
  background: var(--sunset-500);
  opacity: .86;
  transform-origin: center bottom;
}
.el-bars--healthy span { background: var(--healthy); }
.el-bars--critical span { background: var(--violet-500); }
.el-bars.is-active span {
  animation: elBarPulse 900ms ease-in-out infinite alternate;
}
@keyframes elBarPulse {
  from { transform: scaleY(.72); opacity: .72; }
  to { transform: scaleY(1.05); opacity: 1; }
}
.el-conversation-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--text-2);
}
.eval-convai-frame {
  height: 360px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-inset);
}
.agent-playground-frame {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.agent-playground-frame .el-agent-panel__head {
  grid-template-columns: 54px minmax(0, 1fr);
}
.agent-playground-frame .el-agent-panel__head .el-bars {
  grid-column: 1 / -1;
  height: 46px;
}
.agent-playground-convai {
  height: clamp(340px, 40vh, 420px);
  min-height: 340px;
  gap: 10px;
  padding: 10px;
}
.agent-playground-convai .convai-host {
  flex: 1;
  min-height: 0;
  height: auto;
}
.agent-playground-convai .convai-mount {
  min-height: 100%;
}
.agent-session-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgba(255,95,0,.10), rgba(207,60,105,.05)),
    var(--bg-card);
}
.agent-session-strip strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.15;
}
.agent-session-strip__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.agent-session-strip__grid span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.35;
}
.agent-session-strip__grid code {
  color: var(--accent-fg);
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .agent-session-strip__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.el-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
  padding: 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.el-transcript__toolbar {
  display: grid;
  grid-template-columns: auto minmax(120px, .35fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.el-transcript__replay-status {
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
.el-transcript__toolbar .el-bars {
  height: 42px;
  padding: 6px 8px;
}
.el-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
.el-voice-btn:hover {
  border-color: var(--accent-fg);
}
.el-voice-btn.is-active {
  color: var(--accent-fg);
  background: rgba(255,95,0,.08);
}
.el-conversation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
}
.el-conversation__empty {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  min-height: 126px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}
.el-conversation__empty-title {
  font-weight: 700;
  font-size: 13px;
}
.el-conversation__empty-sub {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 12px;
}
.el-message {
  padding: 9px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.el-message__bubble {
  min-width: 0;
}
.el-message__meta,
.el-message span {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.el-response,
.el-message p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  word-break: break-word;
}
.el-message--assistant {
  border-left: 3px solid var(--sunset-500);
}
.el-message--system {
  border-left: 3px solid var(--violet-500);
}
.el-message--user {
  border-left: 3px solid var(--healthy);
}
.el-message--tool {
  border-left: 3px solid var(--violet-500);
  background: rgba(207,60,105,.06);
}
.convai-widget-host--demo {
  display: grid !important;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 180px;
}
.convai-demo-card {
  width: min(360px, calc(100% - 24px));
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text-2);
}
.convai-demo-card strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 14px;
}
.convai-demo-card p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
.empty {
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}
@media (max-width: 1320px) {
  .evals-grid {
    grid-template-columns: minmax(380px, .9fr) minmax(0, 1fr);
  }
  .eval-agent-column { grid-column: 1 / -1; }
}
@media (min-width: 901px) and (max-width: 1120px) {
  .page--evals .eval-command-center,
  .page--evals .evals-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--evals .eval-command-center__copy,
  .page--evals .eval-command-center__voice,
  .page--evals .eval-command-center__ops {
    grid-column: 1;
    grid-row: auto;
  }
  .page--evals .eval-command-center__voice {
    max-width: none;
  }
}
@media (max-width: 1500px) {
  .eval-detail-grid,
  .el-transcript__toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1300px) {
  .page--evals .eval-command-center {
    margin-bottom: 6px;
    padding: 7px 10px;
  }
  .page--evals .eval-command-center__route {
    margin-bottom: 5px;
  }
  .page--evals .eval-command-center__voice {
    gap: 4px;
    padding: 6px;
  }
  .page--evals .eval-command-center__voice .el-orb {
    width: 46px !important;
    height: 46px !important;
  }
  .page--evals .eval-command-center__voice .el-bars {
    height: 34px;
  }
  .page--evals .eval-command-center__evidence {
    gap: 6px;
    padding: 6px;
  }
  .page--evals .eval-command-center__evidence code {
    padding: 4px 6px;
  }
  .page--evals .eval-run-plan-summary {
    margin-bottom: 8px;
    padding: 9px 12px;
  }
}
@media (max-width: 900px) {
  .eval-command-center,
  .eval-run-plan,
  .evals-grid,
  .eval-detail-grid,
  .eval-suite-detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .eval-command-center__copy,
  .eval-command-center__voice,
  .eval-command-center__ops {
    grid-column: auto;
    grid-row: auto;
  }
  .eval-run-plan-summary {
    align-items: stretch;
    flex-direction: column;
    margin-right: 0;
  }
  .eval-suite-builder__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .eval-run-plan-summary .btn {
    justify-content: center;
  }
  .eval-artifact-panel__head {
    padding-right: 0;
  }
  .eval-command-center h2 { font-size: 22px; }
  .eval-command-center__voice-head { grid-template-columns: auto minmax(0, 1fr); }
  .eval-command-center__ops {
    align-items: center;
    flex-direction: row;
  }
  .eval-command-center__actions {
    flex: 1 1 100%;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
  }
  .eval-command-center__actions .btn {
    flex: 0 0 auto;
  }
  .eval-run-row {
    display: block;
    min-height: 0;
    padding-right: 52px;
  }
  .eval-suite-row__select {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .eval-run-row__select {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
  }
  .eval-run-row > .btn--icon {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .eval-run-row__select > div:first-child {
    grid-column: 1 / -1;
  }
  .eval-run-row__title {
    line-height: 1.35;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  .eval-run-row__select .badge,
  .eval-run-row__latency,
  .eval-run-row .eval-score-pill {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  .page--evals .eval-command-center {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px 10px;
    padding: 7px 9px;
    max-height: 420px;
    overflow: auto;
  }
  .page--evals .eval-command-center__copy {
    grid-column: 1;
    grid-row: auto;
  }
  .page--evals .eval-command-center__voice {
    grid-column: 1;
    grid-row: auto;
    gap: 3px;
    padding: 5px;
  }
  .page--evals .eval-command-center__ops {
    grid-column: 1 / -1;
    grid-row: auto;
    gap: 6px 10px;
    padding-top: 4px;
  }
  .page--evals .eval-command-center__actions {
    flex: 0 1 auto;
  }
  .page--evals .eval-command-center h2 {
    margin-bottom: 3px;
    font-size: 19px;
  }
  .page--evals .eval-command-center p {
    margin: 0;
    font-size: 11px;
    line-height: 1.25;
  }
  .page--evals .eval-command-center__meta {
    gap: 4px;
    margin-top: 4px;
  }
  .page--evals .eval-command-center__meta .mono {
    padding: 3px 6px;
    font-size: 10px;
  }
  .page--evals .eval-command-center__axis-brief {
    display: none;
    margin-top: 7px;
    padding: 6px;
  }
  .page--evals .eval-command-center__axis-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--evals .eval-command-center__axis-row {
    padding: 5px;
  }
  .page--evals .eval-command-center__voice-head {
    gap: 5px;
  }
  .page--evals .eval-command-center__bar-stack {
    grid-template-columns: minmax(72px, 1fr) minmax(68px, max-content);
    gap: 4px;
  }
  .page--evals .eval-command-center__voice .el-bars {
    height: 30px;
  }
  .page--evals .eval-command-center__latency {
    min-width: 68px;
    padding: 4px 5px;
  }
  .page--evals .eval-command-center__voice-meta {
    gap: 2px;
  }
  .page--evals .eval-command-center__voice-fact,
  .page--evals .eval-command-center__evidence {
    padding: 2px 5px;
  }
  .page--evals .eval-command-center__evidence {
    grid-template-columns: minmax(0, 1fr);
  }
  .page--evals .eval-command-center__evidence-actions {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    justify-content: flex-end;
    gap: 4px;
  }
  .page--evals .eval-suite-builder .workflow-popout__pane {
    padding: 12px 14px;
  }
  .page--evals .eval-suite-builder__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-top: 12px;
  }
  .page--evals .eval-suite-builder .field {
    margin-bottom: 4px;
  }
  .page--evals .eval-suite-builder__scenario {
    grid-column: 1 / -1;
  }
  .page--evals .eval-suite-builder__scenario textarea {
    min-height: 74px;
  }
  .page--evals .eval-suite-builder__actions {
    margin-top: 8px;
  }
}
@media (min-width: 901px) and (max-height: 760px) {
  .page--evals .eval-command-center__axis-brief {
    max-height: 96px;
    overflow: auto;
  }
  .page--evals .eval-command-center {
    margin-bottom: 4px;
  }
}
@media (max-width: 640px) {
  .eval-runs-card .card__hd {
    align-items: stretch;
    flex-direction: column;
  }
  .eval-runs-card .card__title,
  .eval-runs-card__actions {
    width: 100%;
  }
  .eval-runs-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
  }
  .eval-runs-card__actions .badge {
    width: 100%;
    justify-content: center;
  }
  .eval-runs-card__actions .btn {
    justify-content: center;
    min-width: 0;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .eval-command-center {
    gap: 10px;
    padding: 12px 13px;
    align-items: start;
  }
  .page--evals .eval-command-center {
    gap: 5px;
    padding: 7px 9px;
  }
  .page--evals .eval-command-center__route {
    margin-bottom: 5px;
  }
  .eval-command-center h2 {
    margin-bottom: 4px;
    font-size: 21px;
  }
  .page--evals .eval-command-center h2 {
    font-size: 19px;
    line-height: 1.06;
  }
  .eval-command-center p {
    line-height: 1.35;
  }
  .eval-command-center__meta {
    gap: 6px;
    margin-top: 7px;
  }
  .eval-command-center__voice {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px;
  }
  .page--evals .eval-command-center__voice {
    gap: 3px;
    padding: 5px;
  }
  .page--evals .eval-command-center__voice .el-orb {
    width: 40px !important;
    height: 40px !important;
  }
  .eval-command-center__voice .el-bars {
    height: 38px;
  }
  .page--evals .eval-command-center__voice .el-bars {
    height: 30px;
  }
  .eval-command-center__voice-meta {
    gap: 5px;
  }
  .page--evals .eval-command-center__voice-meta {
    gap: 2px;
  }
  .eval-command-center__voice-meta > div {
    padding: 5px 6px;
  }
  .page--evals .eval-command-center__voice-meta > div {
    padding: 3px 5px;
  }
  .eval-command-center__ops {
    gap: 8px 12px;
  }
  .page--evals .eval-command-center__ops {
    padding-top: 4px;
  }
}
@media (max-width: 640px) {
  .eval-command-center {
    gap: 8px;
    padding: 10px 12px;
  }
  .eval-command-center__route {
    gap: 4px 5px;
  }
  .eval-command-center__route-stats {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    flex-basis: 100%;
    gap: 4px 5px;
  }
  .eval-command-center__route-stat {
    padding: 1px 5px;
    font-size: 10px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .eval-command-center h2 {
    font-size: 21px;
    line-height: 1.12;
  }
  .eval-command-center p {
    line-height: 1.34;
  }
  .eval-command-center__meta {
    gap: 6px;
    margin-top: 8px;
  }
  .eval-command-center__axis-brief {
    display: none;
  }
  .eval-command-center__bar-stack {
    grid-template-columns: minmax(0, 1fr) minmax(74px, max-content);
  }
  .eval-command-center__latency {
    min-width: 0;
  }
  .eval-command-center__voice-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .eval-command-center__voice .el-orb {
    width: 44px !important;
    height: 44px !important;
  }
  .eval-command-center__voice .el-bars {
    height: 32px;
  }
  .eval-command-center__voice-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .eval-command-center__evidence {
    grid-template-columns: minmax(0, 1fr);
    grid-column: 1 / -1;
  }
  .eval-command-center__evidence-actions {
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
  }
  .eval-command-center__evidence-actions .btn {
    justify-content: center;
    min-width: 0;
    min-height: 34px;
    padding-inline: 6px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }
  .eval-command-center__ops,
  .eval-command-center__actions {
    align-items: stretch;
  }
  .eval-command-center__ops {
    flex-direction: column;
    gap: 8px;
  }
  .eval-command-center__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .eval-command-center__actions .eval-command-center__desktop-action {
    display: none;
  }
  .eval-command-center__actions .btn {
    justify-content: center;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* ============================================================
   ConvAI mount + Coach launcher
   ============================================================ */
.convai-mount {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.convai-mount > elevenlabs-convai,
.convai-mount > elevenlabs-convai.convai-widget-host {
  flex: 1; min-height: 0;
  width: 100%; height: 100%;
  display: block;
  position: relative !important;
  inset: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  z-index: auto !important;
  transform: none !important;
}
.coach-launcher {
  position: fixed; bottom: 18px; right: 18px; left: auto;
  z-index: 180;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform .15s var(--ease-out), border-color .15s;
}
.coach-launcher:hover { transform: translateY(-1px); border-color: var(--accent-fg); }
.coach-launcher:focus-visible { outline: 2px solid var(--sunset-500); outline-offset: 2px; }
/* Dense workbench routes keep the global coach affordance visible without
   covering local admin controls or artifact review actions. Evals and Agents
   already have native ElevenLabs wrappers, so the global launcher stays as a
   compact orb instead of a second full pill. */
.app[data-route="agents"] ~ .coach-launcher {
  left: auto;
  right: 18px;
  top: calc(var(--topbar-h) + 4px);
  bottom: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.app[data-route="agents"] ~ .coach-launcher .coach-launcher__label {
  display: none;
}
.app[data-route="generate"] ~ .coach-launcher {
  left: auto;
  right: 18px;
  top: calc(var(--topbar-h) + 58px);
  bottom: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.app[data-route="generate"] ~ .coach-launcher .coach-launcher__label {
  display: none;
}
.app[data-route="generate"]:has(#generate-artifact-drawer) ~ .coach-launcher {
  display: none;
}
.app[data-collapsed="true"][data-route="generate"] ~ .coach-launcher {
  left: 10px;
}
@media (min-width: 761px) {
  .app[data-route="proposals"] ~ .coach-launcher {
    left: auto;
    right: 18px;
    top: calc(var(--topbar-h) + 4px);
    bottom: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .app[data-route="proposals"] ~ .coach-launcher .coach-launcher__label {
    display: none;
  }
}
.app[data-route="evals"] ~ .coach-launcher,
.app[data-route="settings"] ~ .coach-launcher {
  left: auto;
  right: 18px;
  top: calc(var(--topbar-h) + 4px);
  bottom: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.app[data-route="evals"] ~ .coach-launcher .coach-launcher__label,
.app[data-route="settings"] ~ .coach-launcher .coach-launcher__label {
  display: none;
}
.app[data-route="evals"]:has(.page--evals[data-run-detail-open="true"]) ~ .coach-launcher {
  top: auto;
  bottom: 18px;
}
/* Bottom-right floating dock. Hosts the ElevenLabs ConvAI widget directly
   — no custom header chrome — and intentionally does NOT shift the page
   (the widget is small enough to live in the corner without overlapping
   page actions on common desktop viewports). */
.coach-dock {
  position: fixed;
  right: 18px;
  bottom: 78px;
  left: auto;
  top: auto;
  width: 380px;
  height: 560px;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 110px);
  z-index: 190;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.coach-dock__close {
  position: absolute;
  top: 8px;
  right: 8px;
  /* Above the convai config-error overlay (z-index 2) so the close button
     stays clickable when the embed widget can't load. */
  z-index: 3;
  width: 28px;
  height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.18));
}
.coach-dock__close:hover { border-color: var(--accent-fg); color: var(--accent-fg); }
.coach-dock__close:focus-visible { outline: 2px solid var(--sunset-500); outline-offset: 2px; }
@media (max-width: 600px) {
  .coach-dock {
    right: 8px; left: 8px; bottom: 72px;
    width: auto;
    max-height: calc(100vh - 96px);
  }
}

/* ============================================================
   Sidebar agent orb (replaces the bot icon)
   ============================================================ */
.sb__agent-orb { box-shadow: 0 0 6px rgba(249,115,22,.45); }
/* Sidebar agent orbs use the real ElevenLabs UI Orb component. Drop the
   outer drop-shadow (already inside .el-orb's own subtle ring), keep the
   accent glow that the operator visually associates with "live agent". */
.sb__nav .el-orb { box-shadow: 0 0 6px rgba(249,115,22,.45), 0 0 0 1px rgba(255,255,255,.08); }
.sb__nav .el-orb__ring { inset: 8%; }

/* ============================================================
   Settings: integrations, account consent, offerings parity
   ============================================================ */
.integration-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.integration-row:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.integration-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
  gap: 14px;
  margin-top: 14px;
}
.settings-list {
  margin: 8px 0 0 18px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.55;
}
.settings-code {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.offerings-grid {
  display: grid;
  gap: 8px;
}
.offering-row {
  display: grid;
  grid-template-columns: minmax(140px, .45fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.offering-row p {
  margin: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .offering-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
  .offering-row p {
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
  }
}
.account-settings-grid {
  display: grid;
  grid-template-columns: minmax(240px, .65fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.account-consent-status {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.account-consent-status[data-dirty="true"] {
  border-color: rgba(255,95,0,.45);
  background: linear-gradient(90deg, rgba(255,95,0,.08), var(--bg-inset) 68%);
}
.account-consent-status strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}
.account-consent-status > .mono {
  justify-self: end;
  font-size: 11px;
  white-space: nowrap;
}
@media (max-width: 780px) {
  .account-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .account-consent-stack {
    width: calc(100% + 8px);
    margin-inline: -4px;
  }
  .account-consent-status {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .account-consent-status > .mono {
    justify-self: start;
    white-space: normal;
  }
}

/* Generic form primitives — used by SecuritySettings, future settings forms.
   Keep token-driven so dark/light modes inherit correctly. */
.security-form { width: 100%; max-width: 560px; }
.form-row { display: grid; gap: 6px; }
.form-row__label { font-size: 12px; color: var(--text-2); font-weight: 600; }
.form-row--inline { grid-auto-flow: column; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.form-row--inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sunset-500); }
.form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.form-input:focus-visible {
  outline: 2px solid var(--accent-fg, var(--sunset-500));
  outline-offset: 1px;
  border-color: var(--accent-fg, var(--sunset-500));
}
.form-input--mono { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
textarea.form-input { resize: vertical; min-height: 92px; }

/* Billing tier comparison grid (BillingSettings change-plan picker). */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 880px) {
  .tier-grid { grid-template-columns: 1fr; }
}
.tier-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  background: var(--bg-inset);
  display: flex; flex-direction: column;
}
.tier-card--active {
  border-color: var(--accent-fg);
  box-shadow: 0 0 0 1px var(--accent-fg) inset;
}
.tier-card .btn { margin-top: auto; }

.eval-health-row {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: 6px;
  align-items: stretch;
  margin: 6px 0 4px;
}

/* Eval latency strip — surfaces the harness latency budget + slowest run
   beside the tool-latency rollup when there is room, reflecting
   voice_ai_agent_evals' run summary without pushing the workbench
   below the first laptop viewport. */
.eval-latency-strip {
  min-width: 0;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  font-size: 11px; color: var(--text-2);
}
.eval-latency-strip .eyebrow { white-space: nowrap; }
.eval-latency-strip > .mono.dim {
  flex: 1 1 180px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eval-latency-strip strong { color: var(--text); font-weight: 700; }
.eval-latency-strip__p95 {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-card);
  font-size: 11px;
  white-space: nowrap;
}
.eval-latency-strip__p95[data-tone="healthy"] { color: var(--healthy-fg); border-color: rgba(93,140,97,.35); }
.eval-latency-strip__p95[data-tone="warn"] { color: var(--warn-fg); border-color: rgba(255,158,51,.35); }
.eval-latency-strip__p95[data-tone="critical"] { color: var(--violet-fg); border-color: rgba(207,60,105,.35); }

/* Per-tool latency rollup — compact horizontal chip strip beneath the
   stats grid. Vertical contribution is bounded so the .evals-grid
   below it lands above the 720px laptop fold (see components.spec.ts:3171).
   Tone classes (cl-err / cl-warn / cl-ok) come from the global token system. */
.eval-tool-latency-rollup {
  min-width: 0;
  margin: 0;
  padding: 4px 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
  font-size: 11px;
  overflow: visible;
}
.eval-tool-latency-rollup__caption,
.eval-tool-latency-rollup__budget {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eval-tool-latency-rollup__caption {
  max-width: 170px;
}
.eval-tool-latency-rollup__budget {
  max-width: 155px;
}
.eval-tool-latency-rollup__chip {
  flex: 1 1 132px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: min-content;
  gap: 1px 7px;
  align-content: center;
  min-width: 0;
  max-width: min(100%, 188px);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .eval-health-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .page--evals .eval-health-row {
    grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
    gap: 6px;
    margin-top: 4px;
  }
  .page--evals .eval-latency-strip {
    align-content: center;
    gap: 4px 7px;
    padding: 4px 7px;
    font-size: 10px;
  }
  .page--evals .eval-latency-strip > .mono.dim {
    display: none;
  }
  .page--evals .eval-latency-strip__p95,
  .page--evals .eval-latency-strip > .mono:not(.dim) {
    font-size: 10px;
  }
  .page--evals .eval-tool-latency-rollup {
    align-content: center;
    gap: 4px;
    padding: 4px 6px;
  }
  .page--evals .eval-tool-latency-rollup__caption {
    max-width: 120px;
  }
  .page--evals .eval-tool-latency-rollup__budget {
    max-width: 112px;
  }
  .page--evals .eval-tool-latency-rollup__chip {
    flex: 1 1 84px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 124px;
    min-height: 30px;
    padding: 2px 5px;
  }
  .page--evals .eval-tool-latency-rollup__chip .dim {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .page--evals .eval-tool-latency-rollup__chip-name,
  .page--evals .eval-tool-latency-rollup__chip > span:not(.dim) {
    font-size: 10px;
    line-height: 1.2;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .page--evals .eval-stats .stat {
    min-height: 70px;
    padding: 8px 10px;
  }
  .page--evals .eval-stats .stat:has(.stat__spark) {
    min-height: 82px;
  }
  .page--evals .eval-stats .stat__value {
    font-size: 22px;
  }
  .page--evals .eval-stats .stat__spark {
    max-width: 76px;
    margin-top: 3px;
  }
  .page--evals .eval-stats .spark-wrap {
    min-height: 20px;
  }
}
.eval-tool-latency-rollup__chip-name {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* Runs panel error state — actionable, not silent. */
.eval-runs-error {
  background: linear-gradient(90deg, rgba(207,60,105,.08), transparent 60%);
  border: 1px solid rgba(207,60,105,.32);
  border-radius: var(--r-md);
  color: var(--text);
}
.eval-agent-readiness {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
}
.eval-agent-readiness[data-tone="healthy"] {
  border-color: rgba(93,140,97,.36);
  background: linear-gradient(135deg, rgba(93,140,97,.12), rgba(255,255,255,.02));
}
.eval-agent-readiness[data-tone="critical"] {
  border-color: rgba(207,60,105,.36);
  background: linear-gradient(135deg, rgba(207,60,105,.12), rgba(255,95,0,.05));
}
.eval-agent-readiness strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.eval-agent-readiness p {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 560px) {
  .eval-agent-readiness {
    grid-template-columns: minmax(0, 1fr);
  }
  .eval-agent-readiness .badge {
    justify-self: start;
  }
}

.account-consent-stack {
  display: grid;
  gap: 10px;
}
.consent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  cursor: pointer;
}
.consent-row:hover {
  border-color: var(--accent-fg);
}
.consent-row input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--sunset-500);
}
.consent-row span {
  display: grid;
  gap: 3px;
}
.consent-row strong {
  font-size: 13px;
}
.consent-row em {
  color: var(--text-2);
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
}

/* ============================================================
   Focus rings — universal a11y baseline. Many interactive divs
   in this app are role="button" tabindex; give them a visible ring.
   ============================================================ */
[role="button"]:focus-visible,
button:focus-visible,
a:focus-visible,
.cp__row:focus-visible,
.sb__item:focus-visible,
.el-conversation:focus-visible {
  outline: 2px solid var(--sunset-500);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 1120px) {
  .tb {
    gap: 8px;
    padding: 0 12px;
  }
  .tb__crumbs {
    flex: 1 1 auto;
  }
  .tb__crumb--workspace {
    max-width: 124px;
  }
  .tb__crumb--workspace-suffix { display: inline; }
  .tb__search {
    flex: 0 0 92px;
    max-width: 92px;
    padding: 6px 10px 6px 30px;
    justify-content: flex-start;
  }
  .tb__search-placeholder,
  .tb__kbd {
    display: none;
  }
  .tb__search-icon {
    position: absolute;
    left: 10px;
  }
  .tb__search::after {
    content: 'Search';
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tb__run {
    min-width: 112px;
    padding-inline: 12px;
    justify-content: center;
  }
}

@media (max-width: 960px) {
  .tb__search {
    flex: 0 0 38px;
    max-width: 38px;
    padding: 6px;
    justify-content: center;
  }
  .tb__search-icon {
    position: static;
  }
  .tb__search::after {
    content: none;
  }
  .tb__run {
    width: 38px;
    min-width: 38px;
    padding-inline: 0;
  }
  .tb__run-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .tb__run-chevron { display: none; }
}

@media (min-width: 761px) and (max-width: 960px) {
  .tb__run {
    width: auto;
    min-width: 104px;
    padding-inline: 10px;
    gap: 6px;
  }
  .tb__run-label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }
}

/* ============================================================
   MOBILE — viewport-respecting layout below 760px.
   Sidebar collapses to its compact rail, .split--2 drops to a
   single column, stats grid relaxes its minmax, page padding
   tightens, the topbar search/breadcrumbs adjust.
   ============================================================ */
@media (max-width: 760px) {
  /* Force the sidebar into compact rail mode on phones, regardless of the
     user's saved tweak — they can still toggle to nothing via the menu
     button, but the default is "no horizontal scroll on first paint." */
  .app, .app[data-collapsed="false"] {
    grid-template-columns: var(--sidebar-collapsed-w) 1fr;
  }
  .app .sb__section,
  .app .sb__label,
  .app .sb__count,
  .app .sb__user,
  .app .sb__wordmark,
  .app .sb__nav[aria-label="ElevenLabs agents"] .mono.dim,
  .app .sb__brand-text,
  .app .sb__brand-sub { display: none; }
  .app .sb__brand { justify-content: center; padding-inline: 0; }
  .app .sb__item { justify-content: center; padding: 9px; }

  /* Page chrome */
  .page { padding: 18px 14px 48px; }
  .ph__title { font-size: 22px; }
  .ph__actions { gap: 6px; flex-wrap: wrap; }
  .ph__actions .btn { font-size: 11px; padding: 6px 10px; }

  .attention-banner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
    padding: 14px;
    align-items: flex-start;
  }
  .attention-banner__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }
  .attention-banner__actions .btn {
    width: 100%;
    justify-content: center;
    min-width: 0;
    padding-inline: 8px;
  }
  .attention-banner--snoozed .attention-banner__actions {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Topbar squishing — keep a compact shell identity and avoid action bleed. */
  .tb { padding: 0 12px; gap: 8px; }
  .tb__crumbs {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "brand sep workspace"
      "active active active";
    align-content: center;
    flex: 1 1 auto;
    gap: 0 4px;
    max-width: min(214px, calc(100vw - 162px));
    white-space: normal;
  }
  .tb__crumb {
    padding-inline: 1px;
  }
  .tb__crumb--brand {
    grid-area: brand;
    line-height: 1.1;
  }
  .tb__crumbs .tb__sep:first-of-type {
    grid-area: sep;
    line-height: 1.1;
  }
  .tb__crumb--workspace {
    grid-area: workspace;
    flex: 0 1 auto;
    max-width: 124px;
    line-height: 1.1;
  }
  .tb__crumb--workspace-suffix { display: inline; }
  .tb__crumbs .tb__sep:nth-of-type(2) {
    display: none;
  }
  .tb__crumb--active {
    grid-area: active;
    display: block;
    max-width: 100%;
    color: var(--text-2);
    font-size: 10px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (max-width: 360px) {
    .tb {
      gap: 6px;
      padding-inline: 10px;
    }
    .tb__crumbs {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "brand workspace"
        "active active";
      max-width: calc(100vw - var(--sidebar-collapsed-w) - 98px);
      font-size: 10px;
    }
    .tb__crumb--brand {
      font-size: 10px;
    }
    .tb__crumbs .tb__sep:first-of-type {
      display: none;
    }
    .tb__crumb--workspace {
      max-width: none;
      white-space: nowrap;
    }
    .tb__crumb--active {
      font-size: 9.5px;
    }
    .tb__actions .btn--icon {
      width: 32px;
      height: 32px;
    }
  }
  .tb__search { display: none; }
  .tb__actions { gap: 4px; flex: 0 0 auto; }
  .tb__actions .btn--icon[aria-label="Notifications"],
  .tb__actions .btn--icon[aria-label="Toggle color theme"] {
    display: none;
  }
  .tb__actions .btn--icon { width: 30px; height: 30px; }
  .popover {
    left: calc(var(--sidebar-collapsed-w) + 12px) !important;
    right: 12px;
    width: auto !important;
    max-height: calc(100dvh - var(--topbar-h) - 24px);
    border-color: var(--border-strong);
  }
  .pop__list {
    max-height: calc(100dvh - var(--topbar-h) - 82px);
  }
  .pop__row {
    min-height: 56px;
    align-items: center;
  }

  /* Stats: let cards stack into ~140px columns instead of 180px;
     prevents 5-card row from going off-screen. */
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .stat { padding: 12px; }
  .stat__value { font-size: 24px; }

  .agent-flight-row {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    align-items: start !important;
  }
  .agent-flight-row > div:nth-child(1) {
    width: 34px !important;
    height: 34px !important;
  }
  .agent-flight-row > div:nth-child(2) {
    min-width: 0;
  }
  .agent-flight-row__task-count,
  .agent-flight-row__success {
    grid-row: 2;
    justify-self: start;
    min-width: 0 !important;
    text-align: left !important;
  }
  .agent-flight-row__task-count {
    grid-column: 1;
  }
  .agent-flight-row__success {
    grid-column: 2;
    display: flex;
    gap: 6px;
    align-items: baseline;
  }
  .agent-queue-actions {
    flex-wrap: wrap;
  }
  .agent-queue-actions .btn {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .agent-queue-actions [data-testid="mission-new-agent"] {
    flex-basis: 100% !important;
  }
  .hot-lead-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 10px !important;
    align-items: start !important;
  }
  .hot-lead-row > div:first-child {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .hot-lead-row > .badge {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .hot-lead-row > .btn--icon {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .hot-lead-row__score {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100% !important;
  }

  /* Generic two-up splits collapse to one column */
  .split--2 { grid-template-columns: minmax(0, 1fr) !important; }
  .page > .split--2,
  .generate-grid,
  .page--proposals > .split--2,
  .page--evals .evals-grid,
  .agents-grid,
  .settings-grid {
    max-height: min(1120px, calc(100dvh - var(--topbar-h) - 96px));
    overflow: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
  }
  .page--evals .evals-grid,
  .agents-grid,
  .settings-grid {
    max-height: min(1180px, calc(100dvh - var(--topbar-h) - 72px));
  }
  .page--evals .eval-command-center {
    max-height: min(520px, calc(100dvh - var(--topbar-h) - 164px));
    overflow: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
  }
  .page--evals .evals-grid {
    max-height: min(420px, calc(100dvh - var(--topbar-h) - 260px));
  }
  .page--evals .eval-stats,
  .page--evals .eval-health-row {
    max-height: 220px;
    overflow: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
  }
  .page--proposals .proposal-detail-stack {
    order: 1;
  }
  .page--proposals .proposals-list-card {
    order: 2;
  }

  .proposal-row-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .proposal-row-card__amount {
    justify-self: start;
    display: flex;
    gap: 6px;
    align-items: baseline;
    text-align: left;
  }
  .proposal-row-card__value {
    font-size: 16px;
  }
  .proposal-detail-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .proposal-detail-summary__amount {
    justify-self: start;
    display: flex;
    gap: 8px;
    align-items: baseline;
    text-align: left;
  }
  .proposal-detail-summary__value {
    font-size: 26px;
  }
  .proposal-detail-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .proposal-detail-actions .btn {
    width: 100%;
  }

  /* Pipeline kanban — prevent 5-column horizontal blowout; use horizontal
     scroll inside the .pipe container with a column min-width. */
  .pipe { overflow-x: auto; }
  .pipe__col { min-width: 240px; }

  /* Lead detail and intake panel become bottom sheets so they don't
     overlap the whole viewport. */
  .lead-detail-panel,
  [aria-label="Intake agent panel"] {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    top: auto !important;
    height: 70vh !important;
    bottom: 0 !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  }

  /* Coach launcher shrinks into the sidebar rail on phones so it does not
     cover the current card's actions or review text. */
  .coach-launcher {
    left: 14px;
    right: auto;
    top: auto;
    bottom: 72px;
    width: 36px;
    height: 36px;
    justify-content: center;
    padding: 8px;
  }
  .coach-launcher__label { display: none; }
  .app[data-route="generate"] ~ .coach-launcher,
  .app[data-route="evals"] ~ .coach-launcher,
  .app[data-route="agents"] ~ .coach-launcher,
  .app[data-route="settings"] ~ .coach-launcher {
    left: 14px;
    right: auto;
    top: auto;
    bottom: 72px;
  }

  .eval-tool-latency-rollup {
    align-items: stretch;
  }
  .eval-tool-latency-rollup__caption,
  .eval-tool-latency-rollup__budget,
  .eval-tool-latency-rollup__chip {
    flex: 1 1 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .agent-admin-card .card__body {
    gap: 12px;
  }
  .agent-admin-hero {
    gap: 12px;
    padding: 12px;
  }
  .agent-admin-hero__copy h2 {
    font-size: 22px;
  }
  .agent-admin-actions {
    justify-content: stretch;
  }
  .agent-admin-actions .btn {
    flex: 1 1 min(100%, 148px);
    justify-content: center;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  /* Even tighter — stats stack to single column */
  .stats { grid-template-columns: 1fr; }
  .eval-command-center h2 { font-size: 22px; }
}

/* ============================================================
   prefers-reduced-motion — WCAG 2.3.3.
   Disable infinite-loop animations (pulse on live dots, blink
   on the console cursor) and shorten/disable transitions for
   users who have set reduced-motion in their OS.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Re-enable a single pulse so the live-status dot still has visual hierarchy
     on first render; the iteration-count: 1 above stops the loop. */
}

/* "Demo data" pill in topbar — shown when /api/history returned an
   empty array and we kept the synthetic fallback fixtures so the UI
   stays useful. */
.tb__demo-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-fg);
  background: rgba(255,95,0,.10);
  border: 1px solid rgba(255,95,0,.28);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ConvAI fallback — when the unpkg embed script is blocked or fails to
   register the custom element within 5s, render a helpful message and
   keep the recovery action inside the console agent admin. */
.convai-mount--loading,
.convai-mount--unreachable,
.convai-mount--config-error {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.convai-fallback {
  max-width: 420px;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.convai-fallback__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0;
}
.convai-fallback__body code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-inset);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--accent-fg);
}
.convai-mount--unreachable,
.convai-mount--config-error {
  background: var(--bg-inset);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}
/* convai-host wraps the imperative convai-mount so a sibling overlay
   (configError) can sit over it without React rendering children into
   the mount itself, which the imperative create-effect would wipe via
   containerRef.current.innerHTML=''. */
.convai-host {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.convai-host > .convai-mount {
  width: 100%;
  height: 100%;
}
.convai-fallback--overlay {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 13, 20, 0.86);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  z-index: 2;
  overflow: auto;
}
.agent-playground-convai .convai-fallback--overlay {
  padding: 18px;
}
[data-theme="light"] .convai-fallback--overlay {
  background: rgba(245, 240, 232, 0.92);
}

/* ============================================================
   PRINT — operators print call transcripts and proposal reviews
   for meeting handoffs. Default browser rendering of the dark
   single-page-app (dark bg, fixed sidebar/topbar, scroll-clipped
   transcript) makes printed output useless. This block restores
   document flow, hides chrome, and forces a high-contrast b/w
   palette so the printed page is actually readable on paper.
   ============================================================ */
@media print {
  /* Page setup — comfortable letter-paper margin. */
  @page { margin: 0.5in; }

  /* High-contrast b/w palette regardless of theme. */
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg: #fff;
    --bg-elev: #fff;
    --bg-elev-2: #fff;
    --bg-card: #fff;
    --bg-inset: #fff;
    --bg-hover: transparent;
    --bg-press: transparent;
    --bg-selected: transparent;
    --text: #000;
    --text-2: #222;
    --text-3: #444;
    --border: #999;
    --border-strong: #666;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;
    --grid-line: transparent;
    --page-bg: #fff;
    --accent-fg: #000;
    --healthy-fg: #000;
    --warn-fg: #000;
    --violet-fg: #000;
  }
  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Hide app chrome — sidebar, topbar, floating launcher, dock, popovers,
     command palette overlay, toasts, tweaks panel. The page's main content
     is what should print. */
  .sb, .tb, .coach-launcher, .coach-dock, .popover, .cp-overlay, .cp,
  .toast-host, .twk-panel, .tb__demo-pill,
  [aria-label="Intake agent panel"], elevenlabs-convai {
    display: none !important;
  }

  /* Restore document flow — the SPA layout uses fixed-height grids and
     overflow:auto scroll regions; both clip content in print. */
  .app, .main, .scroll, .page, .calls-page, .calls-grid {
    display: block !important;
    height: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: none !important;
  }
  .calls-grid__list, .calls-grid__transcript, .calls-grid__side,
  .calls-grid__trans-scroll, .vstack, .split, .split--2, .pipe,
  .stats, .agents-grid, .settings-grid {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    grid-template-columns: none !important;
  }

  /* Card surfaces print as plain bordered blocks. */
  .card {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 12px;
  }

  /* Avoid orphan headings at the bottom of a page. */
  h1, h2, h3, h4, .ph__title, .card__title {
    page-break-after: avoid;
  }

  /* Disable animations and transitions; print rendering shouldn't
     waste a render frame on motion. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Show link URLs after anchor text — useful when the page is read
     on paper away from a clickable surface. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: #555;
  }
}

/* ---------- Booking-to-revenue Funnel ---------- */
.page--funnel {
  display: grid;
  gap: 18px;
  max-width: 1180px;
}
.funnel-inspection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: stretch;
}
.funnel-chart {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}
.funnel-chart--empty { padding: 18px 22px; }
.funnel-chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}
.funnel-chart__copy { min-width: 0; }
.funnel-chart__sub {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.funnel-chart__rows {
  display: grid;
  gap: 10px;
}
.funnel-row {
  display: grid;
  grid-template-columns: minmax(128px, 160px) minmax(80px, 1fr) minmax(48px, auto) minmax(56px, auto);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.funnel-row:hover,
.funnel-row:focus-visible {
  border-color: var(--border);
  background: var(--bg-inset);
}
.funnel-row[data-active="true"] {
  border-color: rgba(255, 95, 0, .55);
  background:
    linear-gradient(90deg, rgba(255,95,0,.12), transparent 48%),
    var(--bg-inset);
}
.funnel-row__label {
  min-width: 0;
}
.funnel-row__label-main {
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.funnel-row__label-sub {
  margin-top: 2px;
  font-size: 10px;
  overflow-wrap: anywhere;
}
.funnel-row__bar {
  position: relative;
  height: 18px;
  overflow: hidden;
  border-radius: var(--r-sm, 4px);
  background: var(--bg-inset, rgba(255,255,255,0.04));
}
.funnel-row__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sunset-500), var(--sunset-300));
  transition: width 220ms var(--ease-out);
}
.funnel-row__count,
.funnel-row__drop {
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}
.funnel-row__count {
  font-size: 14px;
  font-weight: 700;
}
.funnel-row__drop {
  font-size: 12px;
  font-weight: 600;
}
.funnel-error { padding: 12px 16px; }
.funnel-stage-review {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border-left: 3px solid var(--sunset-500);
}
.funnel-stage-review__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.funnel-stage-review__head h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
}
.funnel-stage-review__head p,
.funnel-stage-review__next {
  margin: 4px 0 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.45;
}
.funnel-stage-review__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.funnel-stage-review__facts div {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-inset);
}
.funnel-stage-review__facts span {
  display: block;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.funnel-stage-review__facts strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.funnel-stage-review__loss {
  padding: 10px 12px;
  border: 1px solid rgba(207,60,105,.42);
  border-radius: var(--r-md);
  background: rgba(207,60,105,.12);
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}
.funnel-stage-review__next {
  margin: 0;
}
.funnel-stage-review .btn {
  justify-self: start;
}

@media (max-width: 640px) {
  .page--funnel {
    max-width: none;
  }
  .funnel-inspection {
    grid-template-columns: minmax(0, 1fr);
  }
  .funnel-chart {
    overflow: hidden;
    padding: 14px;
  }
  .funnel-chart__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .funnel-chart__head .badge {
    max-width: 100%;
    white-space: normal;
  }
  .funnel-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }
  .funnel-row:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .funnel-row[data-active="true"] {
    padding-inline: 8px;
    border: 1px solid rgba(255, 95, 0, .45);
    border-radius: var(--r-md);
  }
  .funnel-row:last-child { padding-bottom: 0; }
  .funnel-row__label {
    grid-row: 1 / span 2;
  }
  .funnel-row__bar {
    grid-column: 1 / -1;
    height: 10px;
  }
  .funnel-row__count {
    grid-column: 2;
    grid-row: 1;
  }
  .funnel-row__drop {
    grid-column: 2;
    grid-row: 2;
  }
  .funnel-stage-review__facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .funnel-stage-review .btn {
    justify-self: stretch;
  }
}

/* ---------- Live Call Simulator ---------- */
.page--simulator { max-width: 920px; }
.sim { display: grid; gap: 18px; }
.sim__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--sunset-500);
  border-radius: var(--r-lg);
  background: var(--bg-card);
}
.sim__title { font-weight: 700; font-size: 15px; }
.sim__meta { color: var(--text-2); font-size: 13px; flex: 1 1 280px; min-width: 0; }
.sim__start { flex: 0 0 auto; }
.sim__transcript { display: grid; gap: 10px; }
.sim__bubble {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
}
.sim__bubble[data-role="agent"] { border-left: 3px solid var(--sunset-500); }
.sim__bubble[data-role="caller"] { border-left: 3px solid var(--violet-500); }
.sim__bubble-role { font-size: 11px; text-transform: uppercase; color: var(--text-3); letter-spacing: .08em; }
.sim__bubble-text { font-size: 14px; line-height: 1.5; }
.sim__bubble-tool { font-size: 12px; color: var(--accent-fg); font-family: var(--font-mono); }
.sim__bubble-ts { font-size: 11px; color: var(--text-3); }
.sim__pipeline { display: grid; gap: 6px; }
.sim__stage {
  display: grid;
  grid-template-columns: 30px minmax(110px, .7fr) minmax(0, 1fr) 70px;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
  font-size: 13px;
}
.sim__stage-num { font-family: var(--font-mono); color: var(--text-3); }
.sim__stage-name { font-weight: 700; }
.sim__stage-summary { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.sim__stage-ms { text-align: right; color: var(--text-3); font-family: var(--font-mono); }
.sim__done {
  padding: 12px 14px;
  border: 1px solid var(--sunset-500);
  border-radius: var(--r-md);
  background: rgba(255, 95, 0, .12);
  color: var(--sunset-100);
  font-family: var(--font-mono);
}
.sim--loading,
.sim--error {
  color: var(--text-3);
  padding: 24px;
  text-align: center;
}
.sim--error { color: var(--violet-fg); }

/* ---------- Failure-mode Auto-Replay panel ---------- */
.page--replay { max-width: 1180px; }
.replay { display: grid; gap: 18px; }
.replay__head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--border);
  border-left: 3px solid var(--violet-500);
  border-radius: var(--r-lg); background: var(--bg-card);
}
.replay__title { font-weight: 600; font-size: 15px; }
.replay__meta { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.replay__meta code { font-family: var(--font-mono); color: var(--violet-300); }
.replay__start { margin-left: auto; }
.replay__transcript { display: grid; gap: 10px; }
.replay__bubble {
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: grid; gap: 4px;
}
.replay__bubble[data-role="agent"] { border-left: 3px solid var(--sunset-500); }
.replay__bubble[data-role="caller"] { border-left: 3px solid var(--violet-500); }
.replay__bubble-role { font-size: 11px; text-transform: uppercase; color: var(--text-3); letter-spacing: 0.08em; }
.replay__bubble-text { font-size: 14px; line-height: 1.5; }
.replay__bubble-tool { font-size: 12px; color: var(--sunset-300); font-family: var(--font-mono); }
.replay__bubble-ts { font-size: 11px; color: var(--text-3); }
.replay__columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.replay__col {
  display: grid; gap: 6px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg-card);
}
.replay__col-head {
  display: flex; align-items: baseline; gap: 10px; padding: 0 4px 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.replay__col-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 95, 0, 0.18); color: var(--sunset-200);
}
.replay__col-label--cf {
  background: rgba(207, 60, 105, 0.18); color: var(--violet-200);
  border: 1px dashed var(--violet-500);
}
.replay__col-sub { font-size: 12px; color: var(--text-3); }
.replay__stage {
  display: grid; grid-template-columns: 28px 130px 1fr 70px; gap: 10px; align-items: center;
  padding: 6px 10px; border-radius: 8px;
  background: var(--bg-inset); font-size: 13px;
}
/* ---------- Follow-up email draft review ---------- */
.page--email-composer { max-width: 1180px; }
.emailc { display: grid; gap: 18px; }
.emailc--error { color: var(--danger, #ff5f5f); padding: 24px; }
.emailc--loading { color: var(--muted, #8a8a99); padding: 24px; text-align: center; }
.emailc__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--border, #2a2a35);
  border-radius: 12px; background: var(--surface-1, #15161c);
}
.emailc__title { font-weight: 600; font-size: 15px; min-width: 190px; }
.emailc__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 8px;
  align-items: stretch;
  color: var(--muted, #8a8a99);
  font-size: 13px;
  flex: 1 1 430px;
  min-width: 0;
}
.emailc__meta-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border, #2a2a35);
  border-radius: 8px;
  background: var(--bg-inset, #0d0e13);
}
.emailc__meta-item span {
  color: var(--muted, #8a8a99);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.emailc__meta-item strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-1, #e8e8f0);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emailc__compose { margin-left: auto; }
.emailc__grid {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
@media (max-width: 1040px) { .emailc__grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .emailc__title { min-width: 0; }
  .emailc__meta { grid-template-columns: 1fr; flex-basis: 100%; }
  .emailc__compose { width: 100%; margin-left: 0; }
}
.emailc__source, .emailc__preview {
  padding: 14px 16px; border: 1px solid var(--border, #2a2a35);
  border-radius: 12px; background: var(--surface-1, #15161c);
  display: grid; gap: 10px;
}
.emailc__section-title { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #8a8a99); }
.emailc__section-subtitle { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8a8a99); }
.emailc__facts { display: grid; gap: 4px; margin: 0; }
.emailc__row {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: baseline;
  padding: 2px 0; font-size: 13px;
}
.emailc__row dt { color: var(--muted, #8a8a99); font-weight: 500; }
.emailc__row dd { margin: 0; color: var(--text-1, #e8e8f0); word-break: break-word; }
.emailc__transcript { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.emailc__line {
  display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: 6px;
  background: var(--bg-inset, #0d0e13); font-size: 12px;
}
.emailc__line[data-role="agent"] { border-left: 3px solid var(--sunset-500, #ff5f00); }
.emailc__line[data-role="caller"] { border-left: 3px solid var(--violet-500, #cf3c69); }
.emailc__line-role { color: var(--muted, #8a8a99); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }
.emailc__line-text { color: var(--text-2, #c5c5d1); line-height: 1.5; }
.emailc__empty { color: var(--muted, #8a8a99); padding: 16px; font-size: 13px; text-align: center; }
.emailc__email {
  display: grid; gap: 10px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-inset, #0d0e13); border: 1px solid var(--border, #2a2a35);
}
.emailc__email-head { display: grid; gap: 4px; }
.emailc__email-field {
  display: grid; grid-template-columns: 90px 1fr; gap: 10px;
  font-size: 12px; align-items: baseline;
}
.emailc__email-label { color: var(--muted, #8a8a99); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.emailc__email-value { color: var(--text-1, #e8e8f0); word-break: break-word; }
.emailc__email-subject { font-weight: 600; }
.emailc__email-body {
  margin: 0; font-family: var(--font-display, system-ui), sans-serif;
  font-size: 13px; line-height: 1.55; color: var(--text-1, #e8e8f0);
  white-space: pre-wrap; word-break: break-word;
  padding: 10px 12px; border-top: 1px dashed var(--border, #2a2a35);
}
.emailc__review {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border, #2a2a35);
  border-left: 3px solid var(--sunset-500, #ff5f00);
  border-radius: 8px;
  background: rgba(255, 95, 0, 0.08);
}
.emailc__review[data-state="approved"] {
  border-left-color: var(--healthy, #5D8C61);
  background: rgba(93, 140, 97, 0.1);
}
.emailc__review[data-state="queued"] {
  border-left-color: var(--healthy, #5D8C61);
  background: rgba(93, 140, 97, 0.14);
}
.emailc__review-label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted, #8a8a99);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.emailc__review-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--border-strong, #3a3a46);
  border-radius: 999px;
  color: var(--text-1, #e8e8f0);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.emailc__draft-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.emailc__receipt {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(93, 140, 97, 0.45);
  border-radius: 8px;
  background: rgba(93, 140, 97, 0.12);
  color: var(--text-1, #e8e8f0);
  font-size: 12px;
}
.emailc__receipt span {
  color: var(--text-2, #c5c5d1);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}
.emailc__email-foot {
  display: flex; justify-content: space-between; gap: 10px;
  color: var(--muted, #8a8a99); font-size: 11px; font-family: var(--mono, monospace);
  padding-top: 4px; border-top: 1px dashed var(--border, #2a2a35);
  flex-wrap: wrap;
}
/* ---------- Vertical preset switcher ---------- */
.page--verticals { max-width: 920px; }
.vert { display: grid; gap: 16px; }
.vert--error { color: var(--danger, #ff5f5f); padding: 24px; }
.vert__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--border, #2a2a35);
  border-radius: 12px; background: var(--surface-1, #15161c);
}
.vert__title { font-weight: 600; font-size: 15px; flex: 1; }
.vert__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.vert__tab {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border, #2a2a35);
  background: var(--surface-1, #15161c);
  color: var(--text-2, #c5c5d1); font-size: 13px; font-weight: 500;
}
.vert__tab:hover { border-color: var(--sunset-500, #ff5f00); }
.vert__tab--active {
  background: var(--sunset-500, #ff5f00); border-color: var(--sunset-500, #ff5f00);
  color: #fff;
}
.vert__facts {
  display: grid; gap: 6px; margin: 0;
  padding: 12px 16px; border: 1px solid var(--border, #2a2a35);
  border-radius: 12px; background: var(--surface-1, #15161c);
}
.vert__row {
  display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: baseline;
  padding: 4px 0; font-size: 13px;
}
.vert__row dt { color: var(--muted, #8a8a99); font-weight: 500; }
.vert__row dd { margin: 0; color: var(--text-1, #e8e8f0); word-break: break-word; }
.vert__prompt {
  padding: 12px 16px; border: 1px solid var(--border, #2a2a35);
  border-radius: 12px; background: var(--surface-1, #15161c);
  display: grid; gap: 8px;
}
.vert__prompt-label { color: var(--muted, #8a8a99); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.vert__prompt-body {
  margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-2, #c5c5d1);
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg-inset, #0d0e13); padding: 10px 12px; border-radius: 8px;
  max-height: 320px; overflow: auto;
}
.replay__stage[data-status="failed"] {
  background: rgba(207, 60, 105, 0.12);
  border-left: 3px solid var(--violet-500);
}
.replay__stage--cf[data-status="ok"][data-divergent="true"] {
  background: rgba(93, 140, 97, 0.12);
  border-left: 3px solid var(--healthy);
}
.replay__stage-num { font-family: var(--font-mono); color: var(--muted, #8a8a99); }
.replay__stage-name { font-weight: 600; }
.replay__stage-summary { color: var(--muted, #8a8a99); }
.replay__stage-ms { text-align: right; color: var(--muted, #8a8a99); font-family: var(--font-mono); }
.replay__summary {
  display: grid; gap: 6px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255, 95, 0, 0.08);
  border: 1px solid var(--sunset-500);
  font-family: var(--font-mono); font-size: 13px;
}
.replay__summary-actual { color: var(--violet-200); }
.replay__summary-cf { color: var(--sunset-100); }
.replay__summary-savings { color: var(--healthy); font-weight: 600; }
.replay--loading, .replay--error { color: var(--muted, #8a8a99); padding: 24px; text-align: center; }
.replay--error { color: var(--critical); }
@media (max-width: 900px) {
  .replay__columns { grid-template-columns: 1fr; }
}