/* ═══════════════════════════════════════════════════════════════════════════
   XecSuite — "Luminary Council" theme
   Premium, calm, executive-grade. Deep violet/plum. No gold.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Source tokens — override these (e.g. from an admin panel) to retheme ──
     RGB-channel vars let us build translucent surfaces/lines/glows from one hue. */
  --void: #0D0818;
  --royal: #140D24;
  --plum: #2A1B47;
  --violet: #BDA7FF;
  --halo: #EFE9FF;
  --ivory: #FBF7EB;
  --lavender: #B1A6C8;

  --violet-rgb: 189, 167, 255;   /* must match --violet */
  --void-rgb: 13, 8, 24;         /* must match --void */
  --royal-rgb: 20, 13, 36;       /* must match --royal */
  --plum-rgb: 42, 27, 71;        /* must match --plum */
  --white-rgb: 255, 255, 255;
  --shadow-rgb: 8, 5, 18;

  /* Accent gradient (buttons, bars, highlights) */
  --accent-1: #6c4fb5;
  --accent-1-rgb: 108, 79, 181;
  --accent-2: #8d6fe0;
  --accent-2-rgb: 141, 111, 224;
  --accent-grad: linear-gradient(120deg, var(--accent-1), var(--accent-2));

  /* Status hues + their RGB channels (for translucent fills) */
  --good: #7ee0b8;
  --good-rgb: 126, 224, 184;
  --warn: #e8c07a;
  --warn-rgb: 232, 192, 122;
  --bad: #f08fa6;
  --bad-rgb: 240, 143, 166;
  --info: var(--violet);

  /* Chart palette (single-hue ramp; used by bars/donuts) */
  --chart-1: var(--violet);
  --chart-2: #9b7bff;
  --chart-3: #7c6bdd;
  --chart-4: #6f5bb8;
  --chart-5: #5b4a96;
  --chart-6: #4a3c7a;

  /* ── Derived surfaces & lines (built from the tokens above) ── */
  --surface: rgba(var(--white-rgb), 0.025);
  --surface-2: rgba(var(--violet-rgb), 0.05);
  --surface-3: rgba(var(--violet-rgb), 0.09);
  --line: rgba(var(--violet-rgb), 0.14);
  --line-soft: rgba(var(--violet-rgb), 0.08);
  --line-strong: rgba(var(--violet-rgb), 0.28);

  /* Text */
  --text: var(--ivory);
  --muted: var(--lavender);
  --quiet: #7c7295;

  --radius: 16px;
  --radius-sm: 10px;

  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv01', 'ss03';
  background: var(--void);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--void); }
body {
  min-width: 320px;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(var(--violet-rgb), 0.10), transparent 60%),
    radial-gradient(700px 500px at 100% 0%, rgba(var(--plum-rgb), 0.55), transparent 55%),
    var(--void);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Accessibility ─────────────────────────────────────────────────────────── */
/* Visible keyboard focus for all interactive elements */
:where(a, button, input, select, textarea, [tabindex], [role="switch"], [role="button"]):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Skip-to-content link (visible on focus) */
.skipLink { position: fixed; left: 12px; top: -64px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--accent-grad); color: var(--halo); font-size: 13px; font-weight: 600; transition: top 0.15s ease; }
.skipLink:focus { top: 12px; }
/* Screen-reader-only utility */
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Respect users who prefer reduced motion */
@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;
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--violet-rgb), 0.16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--violet-rgb), 0.28); background-clip: padding-box; }

/* ── Brand / Logo ─────────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); font-weight: 600; letter-spacing: -0.2px; }
.brandMark {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; object-fit: cover;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 20px rgba(var(--violet-rgb), 0.22);
  border: 1px solid rgba(var(--violet-rgb), 0.35);
}
.brandMark.brandMarkText { display: grid; place-items: center; background: var(--accent-grad); color: var(--halo); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }

/* ── Light mode fix-ups (text that sits on the accent gradient stays light) ── */
:root[data-theme='dark'] { color-scheme: dark; }
:root[data-theme='light'] { color-scheme: light; color: var(--text); }
:root[data-theme='light'] .btn.primary,
:root[data-theme='light'] .councilBtn,
:root[data-theme='light'] .brandMark.brandMarkText,
:root[data-theme='light'] .obMsg.user,
:root[data-theme='light'] .libToggle.on { color: #F6F2FF; }
:root[data-theme='light'] .avatar,
:root[data-theme='light'] .chatMsg.user .cmAvatar { color: #1B1430; }
:root[data-theme='light'] .codeBlock,
:root[data-theme='light'] .schemaCard { background: rgba(var(--white-rgb), 0.05); }
.brandName { font-size: 16px; line-height: 1.1; }
.sidebarScrim { display: none; }
.brandName small { display: block; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--quiet); font-weight: 600; }
.brand.tenantBrand { gap: 12px; }
.brand.tenantBrand .brandMark {
  width: 42px; height: 42px; border-radius: 12px; object-fit: contain; padding: 3px;
  background: color-mix(in srgb, var(--void) 68%, white 32%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 34px rgba(var(--shadow-rgb), 0.32), 0 0 0 1px rgba(var(--violet-rgb), 0.28);
}
.brand.tenantBrand .brandMarkText { padding: 0; background: var(--accent-grad); }
.brand.tenantBrand .brandName { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.brand.tenantBrand .brandName small { margin-top: 3px; color: var(--violet); letter-spacing: 0.16em; }
.brand.tenantLoginBrand { flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: 4px 0 8px; }
.brand.tenantLoginBrand .brandMark { width: 74px; height: 74px; border-radius: 18px; padding: 6px; }
.brand.tenantLoginBrand .brandName { font-size: 23px; }
.brand.tenantLoginBrand .brandName small { margin-top: 7px; color: var(--muted); }

/* ── App shell ────────────────────────────────────────────────────────────── */
.appShell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.sidebar {
  background: linear-gradient(180deg, rgba(var(--royal-rgb), 0.92), rgba(var(--void-rgb), 0.96));
  border-right: 1px solid var(--line-soft);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { padding: 6px 8px; }
.navScroll { flex: 1; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; padding-right: 2px; }
.navGroup { display: flex; flex-direction: column; gap: 2px; }
.navGroupTitle { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); font-weight: 650; padding: 6px 10px; }
.navItem {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13.5px; text-align: left; width: 100%; transition: background 0.15s, color 0.15s;
}
.navItem svg { opacity: 0.8; flex-shrink: 0; }
.navItem:hover { background: var(--surface-2); color: var(--text); }
.navItem.active { background: linear-gradient(100deg, rgba(var(--violet-rgb), 0.18), rgba(var(--violet-rgb), 0.06)); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.navItem.active svg { opacity: 1; color: var(--violet); }
.navItem span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navItem em { font-style: normal; font-size: 11px; font-family: 'JetBrains Mono', monospace; background: rgba(var(--violet-rgb), 0.16); color: var(--halo); border-radius: 6px; padding: 1px 6px; }

.workspaceCard {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px;
  background: var(--surface); display: flex; flex-direction: column; gap: 2px;
}
.workspaceCard .wsLabel { font-size: 11px; color: var(--quiet); }
.workspaceCard strong { font-size: 13.5px; }
.workspaceCard button { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; color: var(--muted); font-size: 12.5px; }
.workspaceCard button:hover { background: var(--surface-2); color: var(--text); }

/* Sidebar footer — identity + logout / login */
.sidebarFoot { display: flex; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line-soft); margin-top: 2px; }
.sidebarUser { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); text-align: left; }
.sidebarUser:hover { background: var(--surface-2); border-color: var(--line); }
.sidebarUser .avatar { width: 34px; height: 34px; flex-shrink: 0; }
.sidebarUser .suMeta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sidebarUser .suMeta strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebarUser .suMeta span { font-size: 11.5px; color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Login page */
.loginPage { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(700px 500px at 50% -10%, rgba(var(--violet-rgb), 0.12), transparent 60%); }
.loginCard { width: min(420px, 100%); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: linear-gradient(180deg, rgba(var(--plum-rgb), 0.96), rgba(var(--void-rgb), 0.98)); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 16px; }
.loginIntro h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; }
.loginIntro p { font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 12px; color: var(--muted); }
.inputFrame { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--quiet); }
.inputFrame:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.1); }
.inputFrame input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-size: 14px; }
.inputFrame input::placeholder { color: var(--quiet); }
.iconTap { display: grid; place-items: center; color: var(--quiet); padding: 4px; }
.iconTap:hover { color: var(--text); }
.formError { font-size: 13px; color: var(--bad); margin: -4px 0 0; }
.formNote { font-size: 13px; color: var(--muted); line-height: 1.5; margin: -2px 0 0; }
.loginSubmit { justify-content: center; min-height: 46px; }
.loginAltAction { align-self: center; background: none; border: none; padding: 2px 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.loginAltAction:hover { color: var(--ink); text-decoration: underline; }

.loginDemo { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.loginDemoLabel { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--quiet); font-weight: 650; }
.loginDemoRow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--surface); font-size: 12px; color: var(--muted); }
.loginDemoRow:hover { background: var(--surface-2); border-color: var(--line); }
.loginDemoRow .mono { font-size: 11.5px; }
.loginDemoRow .loginDemoPass { margin-left: auto; color: var(--quiet); }
.lrTag { font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em; color: var(--violet); background: rgba(var(--violet-rgb), 0.14); border-radius: 5px; padding: 1px 7px; }

/* ── Main stage ───────────────────────────────────────────────────────────── */
.mainStage { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; padding: 12px 28px;
  background: rgba(var(--void-rgb), 0.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.mobileMenu { display: none; }
.searchBox {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 13px;
  background: var(--surface); color: var(--quiet); font-size: 13px;
}
.searchBox span { flex: 1; }
.searchBox input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text); font-size: 13px; }
.searchBox input::placeholder { color: var(--quiet); }
.searchBox kbd { font-family: 'JetBrains Mono', monospace; font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--muted); }

.searchWrap { position: relative; z-index: 60; flex: 1; max-width: 520px; min-width: 0; }
.searchWrap .searchBox { max-width: none; width: 100%; }
.searchToggle { display: none; }
.searchResults { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(180deg, rgba(var(--plum-rgb), 0.98), rgba(var(--void-rgb), 0.99)); box-shadow: 0 30px 80px rgba(var(--shadow-rgb), 0.5); }
.searchResult { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 11px; border-radius: 8px; color: var(--text); font-size: 13px; }
.searchResult:hover { background: var(--surface-2); }
.searchResult.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--violet); }
.searchEnterHint { font-size: 10px; color: var(--quiet); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.searchResult svg { color: var(--violet); flex-shrink: 0; }
.searchResult span { flex: 1; }
.searchResult em { font-style: normal; font-size: 11px; color: var(--quiet); }
.searchEmpty { padding: 12px; color: var(--quiet); font-size: 12.5px; }
.searchSectionLabel { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); font-weight: 650; padding: 8px 11px 6px; }
.searchChips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
.searchChips .pill { cursor: pointer; }
.searchChips .pill:hover { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.topbarActions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mockBadge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 650; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--amber, #f5a623) 45%, var(--line)); background: color-mix(in srgb, var(--amber, #f5a623) 14%, var(--surface)); color: var(--amber, #f5a623); }
@media (max-width: 720px) { .mockBadge { display: none; } }

.councilBtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--radius-sm);
  background: var(--accent-grad); color: var(--halo); font-weight: 600; font-size: 13px;
  box-shadow: 0 10px 30px rgba(var(--accent-2-rgb), 0.34); border: 1px solid rgba(var(--violet-rgb), 0.5);
}
.councilBtn:hover { filter: brightness(1.08); }
.councilBtn.listening { animation: voicePulse 1.4s ease-in-out infinite; }

/* ── Demo mode (internal tenant only) ── */
.demoToggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(var(--violet-rgb), 0.45); background: rgba(var(--violet-rgb), 0.08);
  color: var(--violet); font-weight: 600; font-size: 12.5px; letter-spacing: 0.02em; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.demoToggle:hover { background: rgba(var(--violet-rgb), 0.16); }
.demoToggle.on {
  background: var(--violet); color: #14101f; border-color: var(--violet);
  box-shadow: 0 6px 22px rgba(var(--violet-rgb), 0.4);
}
.demoRibbon {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(90deg, rgba(var(--violet-rgb), 0.92), rgba(var(--accent-2-rgb), 0.92));
  color: #14101f; position: sticky; top: 0; z-index: 60;
}
/* Staff impersonation banner — prominent, always present while impersonating. */
.impersonationBanner {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  background: rgba(var(--warn-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--warn-rgb), 0.5);
  color: var(--warn);
  position: sticky; top: 0; z-index: 61;
}
.impersonationBanner strong { color: var(--ivory); }
.impersonationBanner span { flex: 1; }
.impersonationBanner svg { flex: none; color: var(--warn); }
/* Host ↔ membership mismatch notice — calm, dismissible, never blocking. */
.hostNotice {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 12.5px;
  background: rgba(var(--violet-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--violet-rgb), 0.25);
  color: var(--lavender);
}
.hostNotice strong { color: var(--ivory); }
.hostNotice span { flex: 1; }
.hostNotice svg { flex: none; color: var(--violet); }
/* Sample-data marker on demo-only nav/search entries — same gradient family as the ribbon. */
.demoDot {
  width: 6px; height: 6px; border-radius: 999px; flex: none;
  background: linear-gradient(90deg, rgba(var(--violet-rgb), 0.92), rgba(var(--accent-2-rgb), 0.92));
  box-shadow: 0 0 6px rgba(var(--violet-rgb), 0.55);
}
.navItem .demoDot { flex: none; margin-left: auto; }
.searchResult .demoDot { margin-right: 2px; }

/* ── Voice command aura (Siri-style listening animation) ── */
.voiceAura { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.voiceAura::before {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--violet-rgb), 0.28), inset 0 0 90px 8px rgba(var(--violet-rgb), 0.16);
  animation: voicePulse 2.8s ease-in-out infinite;
}
.voiceAura::after {
  content: ''; position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(420px 300px at 0% 100%, rgba(var(--good-rgb), 0.10), transparent 72%),
    radial-gradient(420px 300px at 100% 0%, rgba(var(--bad-rgb), 0.08), transparent 72%),
    radial-gradient(500px 320px at 100% 100%, rgba(var(--accent-2-rgb), 0.12), transparent 72%),
    radial-gradient(500px 320px at 0% 0%, rgba(var(--violet-rgb), 0.12), transparent 72%);
  animation: voicePulse 3.6s ease-in-out infinite;
}
@keyframes voiceHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes voicePulse { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.42; } }

.voicePill {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 81;
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 30px;
  background: rgba(var(--void-rgb), 0.85); backdrop-filter: blur(14px); border: 1px solid var(--line-strong);
  color: var(--text); font-size: 13.5px; box-shadow: 0 18px 50px rgba(var(--shadow-rgb), 0.5);
}
.voicePill:hover { border-color: var(--violet); }
.voiceStop { color: var(--quiet); font-size: 12px; }
.voiceBars { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.voiceBars i { width: 3px; height: 100%; border-radius: 3px; background: var(--violet); transform-origin: center; animation: voiceBar 1s ease-in-out infinite; }
.voiceBars i:nth-child(2) { animation-delay: 0.15s; }
.voiceBars i:nth-child(3) { animation-delay: 0.3s; }
.voiceBars i:nth-child(4) { animation-delay: 0.45s; }
.voiceBars i:nth-child(5) { animation-delay: 0.6s; }
.chiefVoiceOverlay { position: fixed; right: 24px; bottom: 24px; z-index: 82; width: min(420px, calc(100vw - 48px)); max-height: 42vh; overflow: auto; border: 1px solid rgba(var(--violet-rgb), 0.32); border-radius: 20px; padding: 14px; background: linear-gradient(160deg, rgba(var(--plum-rgb), 0.92), rgba(var(--void-rgb), 0.92)); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42); backdrop-filter: blur(18px); animation: previewPulse 420ms ease; }
.chiefDeepDiveModal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 81; width: min(780px, calc(100vw - 48px)); max-height: min(72vh, 720px); overflow: auto; pointer-events: none; }
.chiefModalChrome { border: 1px solid rgba(var(--violet-rgb), 0.36); border-radius: 28px; padding: 24px; background: linear-gradient(150deg, rgba(var(--plum-rgb), 0.96), rgba(var(--void-rgb), 0.94)); box-shadow: 0 38px 110px rgba(0, 0, 0, 0.56); backdrop-filter: blur(18px); animation: previewPulse 480ms ease; }
.chiefModalChrome h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.02; letter-spacing: -1.2px; margin: 8px 0 10px; }
.chiefModalChrome > p { color: var(--muted); font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
.chiefModalChrome .pill { margin-top: 14px; }
.chiefHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.chiefHead h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.3px; margin-top: 5px; }
.chiefTranscript, .chiefActionCard { border: 1px solid var(--line-soft); border-radius: 18px; padding: 14px; background: rgba(var(--surface-rgb), 0.68); margin-top: 12px; }
.chiefTranscript span { color: var(--violet); font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 700; }
.chiefTranscript p { font-size: 22px; line-height: 1.2; letter-spacing: -0.4px; margin-top: 8px; }
.chiefActionCard h4 { font-size: 17px; margin: 6px 0; }
.chiefActionCard > p { color: var(--muted); font-size: 13px; line-height: 1.45; margin-bottom: 10px; }
.chiefActionCard.permission_blocked { border-color: rgba(var(--bad-rgb), 0.45); }
@keyframes voiceBar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

.iconButton { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.iconButton:hover { background: var(--surface-2); color: var(--text); }
.avatar { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: 650; color: var(--void); background: linear-gradient(135deg, var(--halo), var(--violet)); }

/* Top-bar dropdowns (notifications) */
.userMenuWrap { position: relative; }
.menuScrim { position: fixed; inset: 0; z-index: 40; }
.bellDot { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: var(--void); font-size: 10px; font-weight: 700; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; }
.notifMenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: min(340px, 86vw); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(var(--plum-rgb), 0.99), rgba(var(--void-rgb), 0.99)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; }
.notifHead { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); }
.notifHead strong { font-size: 14px; }
.notifList { max-height: 60vh; overflow-y: auto; }
.notifItem { display: flex; gap: 10px; width: 100%; text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.notifItem:last-child { border-bottom: none; }
.notifItem:hover { background: var(--surface-2); }
.notifBody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notifBody > strong { font-size: 13px; font-weight: 550; }
.notifBody > span { font-size: 12px; color: var(--muted); }
.notifBody .notifWhen { font-size: 11px; color: var(--quiet); margin-top: 2px; }

.pageBody { padding: 26px 28px 56px; display: flex; flex-direction: column; gap: 22px; max-width: 1480px; width: 100%; }

/* ── Page header ──────────────────────────────────────────────────────────── */
.pageHeader { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pageHeader .eyebrow { color: var(--violet); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 650; margin-bottom: 9px; }
.pageHeader h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.8px; font-weight: 600; line-height: 1.05; }
.pageHeader p.sub { color: var(--muted); font-size: 14px; margin-top: 8px; max-width: 640px; }
.pageHeaderActions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 550; border: 1px solid var(--line); background: var(--surface); color: var(--text); transition: background 0.15s, filter 0.15s; }
.btn:hover { background: var(--surface-2); }
.btn.primary { border: 1px solid rgba(var(--violet-rgb), 0.5); background: var(--accent-grad); color: var(--halo); box-shadow: 0 10px 26px rgba(var(--accent-2-rgb), 0.3); }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent-grad); }
.btn.ghost { background: transparent; }
.btn.tiny { padding: 6px 11px; font-size: 12px; }
.btn.good { color: var(--good); border-color: rgba(var(--good-rgb), 0.35); }
.btn:disabled { opacity: 0.5; cursor: default; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; background: var(--surface); gap: 3px; }
.segmented button { padding: 6px 13px; border-radius: 7px; font-size: 12.5px; color: var(--muted); }
.segmented button.selected { background: var(--surface-3); color: var(--text); }

/* ── Panels & layout helpers ──────────────────────────────────────────────── */
.panel {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  background: linear-gradient(180deg, rgba(var(--plum-rgb), 0.28), rgba(var(--royal-rgb), 0.42));
  box-shadow: 0 18px 50px rgba(var(--shadow-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.panelHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panelHeader h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }
.panelKicker { color: var(--violet); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 650; display: block; margin-bottom: 5px; }
.panelHeader .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split-2-1 { grid-template-columns: 1.7fr 1fr; align-items: start; }
.split-1-2 { grid-template-columns: 1fr 1.7fr; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ── Metric card ──────────────────────────────────────────────────────────── */
.metricCard { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 9px; position: relative; overflow: hidden; }
.metricCard::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120px 80px at 90% -10%, rgba(var(--violet-rgb), 0.12), transparent 70%); pointer-events: none; }
.metricCard .mLabel { color: var(--muted); font-size: 12.5px; }
.metricCard .mValue { font-size: 26px; font-weight: 600; letter-spacing: -0.8px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.metricCard .mRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.metricCard .mSub { color: var(--quiet); font-size: 12px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 20px; }
.metricBtn { display: block; width: 100%; text-align: left; padding: 0; border: none; background: none; cursor: pointer; }
.metricBtn:hover .metricCard { border-color: var(--line-strong); }
.delta.up { color: var(--good); background: rgba(var(--good-rgb), 0.12); }
.delta.down { color: var(--bad); background: rgba(var(--bad-rgb), 0.12); }

/* ── Source chip ──────────────────────────────────────────────────────────── */
.sourceChip { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; background: var(--surface); }
.sourceChip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 8px var(--violet); }
.chipRow { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* ── Agent badge ──────────────────────────────────────────────────────────── */
.agentBadge { display: inline-flex; align-items: center; gap: 8px; }
.agentAvatar { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 650; font-family: 'JetBrains Mono', monospace; color: var(--halo); border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.22), rgba(var(--accent-1-rgb), 0.3)); flex-shrink: 0; }
.agentBadge .aMeta { display: flex; flex-direction: column; line-height: 1.25; }
.agentBadge .aName { font-size: 12.5px; font-weight: 600; }
.agentBadge .aRole { font-size: 11px; color: var(--quiet); }
.privacyTag { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 1px 6px; border-radius: 5px; letter-spacing: 0.04em; }
.privacyTag.frontier { color: var(--violet); background: rgba(var(--violet-rgb), 0.14); }
.privacyTag.private { color: var(--good); background: rgba(var(--good-rgb), 0.12); }

/* ── Insight card ─────────────────────────────────────────────────────────── */
.insightCard { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.07), rgba(var(--plum-rgb), 0.22)); display: flex; flex-direction: column; gap: 12px; }
.insightCard .iTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.insightCard .iText { font-size: 14px; line-height: 1.55; color: var(--halo); }
.insightCard .iFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ── Status badge ─────────────────────────────────────────────────────────── */
.statusBadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; border: 1px solid transparent; white-space: nowrap; }
.statusBadge .sDot { width: 6px; height: 6px; border-radius: 50%; }
.statusBadge.good { color: var(--good); background: rgba(var(--good-rgb), 0.1); border-color: rgba(var(--good-rgb), 0.25); }
.statusBadge.good .sDot { background: var(--good); }
.statusBadge.warn { color: var(--warn); background: rgba(var(--warn-rgb), 0.1); border-color: rgba(var(--warn-rgb), 0.25); }
.statusBadge.warn .sDot { background: var(--warn); }
.statusBadge.bad { color: var(--bad); background: rgba(var(--bad-rgb), 0.1); border-color: rgba(var(--bad-rgb), 0.25); }
.statusBadge.bad .sDot { background: var(--bad); }
.statusBadge.info { color: var(--violet); background: rgba(var(--violet-rgb), 0.1); border-color: rgba(var(--violet-rgb), 0.25); }
.statusBadge.info .sDot { background: var(--violet); }
.statusBadge.neutral { color: var(--muted); background: var(--surface); border-color: var(--line); }
.statusBadge.neutral .sDot { background: var(--quiet); }

.conf { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--quiet); }

/* ── Data table ───────────────────────────────────────────────────────────── */
.tableWrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); }
table.dataTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.dataTable th { text-align: left; font-weight: 600; color: var(--quiet); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dataTable td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text); white-space: nowrap; }
.dataTable tr:last-child td { border-bottom: none; }
.dataTable tbody tr:hover { background: var(--surface-2); }
.dataTable td.num, .dataTable th.num { text-align: right; font-family: 'JetBrains Mono', monospace; }

/* ── List rows ────────────────────────────────────────────────────────────── */
.rowList { display: flex; flex-direction: column; gap: 8px; }
.listRow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.listRow:hover { border-color: var(--line); background: var(--surface-2); }
.listRow .lMain { flex: 1; min-width: 0; }
.listRow .lMain strong { font-size: 13.5px; display: block; }
.listRow .lMain span { font-size: 12px; color: var(--muted); }
.listRow .lEnd { display: flex; align-items: center; gap: 10px; }

.bulletDot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bulletDot.risk { background: var(--bad); box-shadow: 0 0 8px rgba(var(--bad-rgb), 0.6); }
.bulletDot.opportunity { background: var(--good); box-shadow: 0 0 8px rgba(var(--good-rgb), 0.6); }

/* ── Daily briefing Chief of Staff layout ─────────────────────────────────── */
.briefingHero { position: relative; overflow: hidden; background: radial-gradient(circle at 8% 0%, rgba(var(--violet-rgb), 0.2), transparent 34%), linear-gradient(135deg, rgba(var(--plum-rgb), 0.42), rgba(var(--royal-rgb), 0.64)); }
.briefingHero::after { content: ''; position: absolute; inset: auto -8% -34% auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-1-rgb), 0.14), transparent 68%); pointer-events: none; }
.briefingHeroGrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 16px; align-items: stretch; position: relative; z-index: 1; }
.briefingNarrative { display: flex; flex-direction: column; gap: 12px; }
.briefingTopThree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.briefingKpiGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.briefingKpi { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; background: rgba(var(--void-rgb), 0.34); display: flex; flex-direction: column; gap: 4px; min-height: 104px; }
.briefingKpi .kpiIcon { font-size: 20px; }
.briefingKpi > span:not(.kpiIcon) { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.briefingKpi strong { font-size: 25px; letter-spacing: -0.7px; }
.briefingKpi small { color: var(--quiet); font-size: 11.5px; }
.briefingKpi.critical, .briefingCard.critical, .meetingBrief.critical, .dayPlanSlot.critical { border-color: rgba(var(--bad-rgb), 0.44); box-shadow: inset 0 0 0 1px rgba(var(--bad-rgb), 0.06); }
.briefingKpi.high, .briefingCard.high, .meetingBrief.high, .dayPlanSlot.high { border-color: rgba(var(--warn-rgb), 0.4); }
.briefingKpi.opportunity, .briefingCard.opportunity, .dayPlanSlot.opportunity { border-color: rgba(var(--good-rgb), 0.38); }
.briefingCardStack { display: flex; flex-direction: column; gap: 10px; }
.briefingCardStack.compact { gap: 8px; }
.briefingCard { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 14px 14px 18px; background: rgba(var(--void-rgb), 0.32); display: flex; flex-direction: column; gap: 9px; }
.briefingCard h3 { font-size: 14.5px; font-weight: 650; letter-spacing: -0.2px; margin-top: 4px; }
.briefingCard p { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.briefingCard > strong { font-size: 13.5px; }
.urgencyRail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--violet); }
.urgencyRail.critical { background: linear-gradient(180deg, var(--bad), rgba(var(--bad-rgb), 0.35)); box-shadow: 0 0 16px rgba(var(--bad-rgb), 0.45); }
.urgencyRail.high { background: linear-gradient(180deg, var(--warn), rgba(var(--warn-rgb), 0.34)); box-shadow: 0 0 14px rgba(var(--warn-rgb), 0.35); }
.urgencyRail.medium { background: linear-gradient(180deg, var(--violet), rgba(var(--violet-rgb), 0.32)); }
.urgencyRail.low { background: var(--quiet); }
.urgencyRail.opportunity { background: linear-gradient(180deg, var(--good), rgba(var(--good-rgb), 0.35)); }
.priorityBadge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: var(--halo); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(var(--violet-rgb), 0.12); }
.briefingCardTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.briefingMeta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--quiet); font-size: 11.5px; }
.briefingActions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.attentionRadar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.radarQuadrant { min-height: 112px; border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: rgba(var(--void-rgb), 0.28); display: flex; flex-direction: column; justify-content: space-between; }
.radarQuadrant strong { font-size: 12.5px; }
.radarQuadrant span { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.radarQuadrant.critical { background: linear-gradient(135deg, rgba(var(--bad-rgb), 0.16), rgba(var(--void-rgb), 0.25)); }
.radarQuadrant.strategic { background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.16), rgba(var(--void-rgb), 0.25)); }
.radarQuadrant.delegate { background: linear-gradient(135deg, rgba(var(--accent-1-rgb), 0.13), rgba(var(--void-rgb), 0.25)); }
.radarQuadrant.monitor { background: linear-gradient(135deg, rgba(var(--good-rgb), 0.11), rgba(var(--void-rgb), 0.25)); }
.meetingTimeline { display: flex; flex-direction: column; gap: 12px; position: relative; }
.meetingBrief { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 14px 18px; background: rgba(var(--void-rgb), 0.3); overflow: hidden; }
.meetingTime { border-right: 1px solid var(--line-soft); padding-right: 14px; display: flex; flex-direction: column; gap: 5px; color: var(--muted); }
.meetingTime strong { color: var(--halo); font-size: 15px; }
.meetingBody { display: flex; flex-direction: column; gap: 10px; }
.meetingBody p { color: var(--muted); line-height: 1.52; font-size: 13px; }
.meetingReadiness { position: relative; height: 28px; border: 1px solid var(--line-soft); border-radius: 999px; overflow: hidden; background: rgba(var(--void-rgb), 0.35); display: flex; align-items: center; padding: 0 10px; }
.meetingReadiness > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(var(--violet-rgb), 0.22), rgba(var(--good-rgb), 0.22)); }
.meetingReadiness strong { position: relative; z-index: 1; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--halo); }
.meetingColumns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meetingColumns > div { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 5px; }
.meetingColumns strong { font-size: 12px; }
.meetingColumns span, .meetingColumns li { color: var(--muted); font-size: 12px; line-height: 1.45; }
.meetingColumns ul { margin: 0; padding-left: 16px; }
.dayPlan { display: flex; flex-direction: column; gap: 8px; }
.dayPlanSlot { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; background: rgba(var(--void-rgb), 0.28); }
.planTime { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--violet); }
.dayPlanSlot strong { display: block; font-size: 13px; margin-bottom: 2px; }
.dayPlanSlot span:last-child { color: var(--muted); font-size: 12px; line-height: 1.4; }

@media (max-width: 1100px) {
  .briefingHeroGrid { grid-template-columns: 1fr; }
  .briefingTopThree { grid-template-columns: 1fr; }
  .meetingBrief { grid-template-columns: 1fr; }
  .meetingTime { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 0 0 10px; }
}
@media (max-width: 760px) {
  .briefingKpiGrid, .attentionRadar, .meetingColumns { grid-template-columns: 1fr; }
  .dayPlanSlot { grid-template-columns: 1fr; }
}

/* ── Recommendation card ──────────────────────────────────────────────────── */
.recCard { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: linear-gradient(180deg, rgba(var(--plum-rgb), 0.3), rgba(var(--royal-rgb), 0.4)); display: flex; flex-direction: column; gap: 14px; }
.recCard.approved { border-color: rgba(var(--good-rgb), 0.4); box-shadow: 0 0 0 1px rgba(var(--good-rgb), 0.15); }
.recCard.saved { opacity: 0.78; }
.recCard h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }
.recGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.recGrid .cell { background: rgba(var(--void-rgb), 0.5); padding: 11px 13px; }
.recGrid .cell .k { font-size: 11px; color: var(--quiet); margin-bottom: 4px; }
.recGrid .cell .v { font-size: 14px; font-weight: 600; }
.recGrid .cell .v.save { color: var(--good); }
.recActions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ── Module card ──────────────────────────────────────────────────────────── */
.moduleCard { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.moduleCard .mcTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.moduleCard h3 { font-size: 15px; font-weight: 600; }
.moduleCard p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.moduleCard .mcFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.moduleIcon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--violet); border: 1px solid var(--line); background: var(--surface-2); }

/* ── Connector card ───────────────────────────────────────────────────────── */
.connCard { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.connTop { display: flex; align-items: center; gap: 11px; }
.connLogo { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--halo); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.18), rgba(var(--plum-rgb), 0.4)); flex-shrink: 0; }
.connCard .cName { font-size: 14px; font-weight: 600; }
.connCard .cCat { font-size: 11.5px; color: var(--quiet); }
.connMeta { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.connFoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }

/* ── Approval card ────────────────────────────────────────────────────────── */
.approvalCard { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 13px; }
.approvalCard.resolved { opacity: 0.7; }
.approvalCard .acTop { display: flex; align-items: flex-start; gap: 12px; }
.approvalCard .acAmount { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; color: var(--halo); }
.approvalCard h3 { font-size: 14.5px; font-weight: 600; }
.approvalCard p { font-size: 12.5px; color: var(--muted); }

/* ── Charts (CSS/SVG) ─────────────────────────────────────────────────────── */
.barTrack { display: flex; flex-direction: column; gap: 11px; }
.barRow { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 12px; }
.barRow .bLabel { font-size: 12.5px; color: var(--muted); }
.barRow .bMeter { height: 9px; border-radius: 20px; background: rgba(var(--violet-rgb), 0.08); overflow: hidden; }
.barRow .bMeter span { display: block; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--accent-1), var(--violet)); }
.barRow .bVal { font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: right; color: var(--text); }

.donutWrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.donutLegend { display: flex; flex-direction: column; gap: 8px; }
.donutLegend .lg { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.donutLegend .sw { width: 11px; height: 11px; border-radius: 3px; }

.spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.spark span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--violet), rgba(var(--accent-1-rgb), 0.4)); min-height: 6px; }
.lineChart { display: flex; flex-direction: column; gap: 8px; }
.lineChart svg { display: block; }
.lineChartAxis { display: flex; justify-content: space-between; font-size: 11px; color: var(--quiet); }
.lineChartPeak { font-size: 11px; color: var(--quiet); align-self: flex-end; }

.loadBar { width: 90px; height: 7px; border-radius: 20px; background: rgba(var(--violet-rgb), 0.1); overflow: hidden; }
.loadBar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-1), var(--violet)); }

/* ── Chat room (Open WebUI / Slack inspired) ──────────────────────────────── */
.chatLayout { display: grid; grid-template-columns: 220px 1fr 300px; gap: 0; height: calc(100vh - 64px); border-top: 1px solid var(--line-soft); }
.chatChannels { border-right: 1px solid var(--line-soft); padding: 16px 12px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; background: rgba(var(--void-rgb), 0.4); }
.chatChannels .ccTitle { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); font-weight: 650; padding: 6px 10px; }
.channelItem { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--muted); font-size: 13px; }
.channelItem:hover { background: var(--surface-2); color: var(--text); }
.channelItem.active { background: var(--surface-3); color: var(--text); }
.channelItem .hash { color: var(--quiet); }
.channelItem em { font-style: normal; margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; background: rgba(var(--violet-rgb), 0.18); border-radius: 5px; padding: 0 6px; color: var(--halo); }

.chatMain { display: flex; flex-direction: column; min-width: 0; }
.chatTopbar { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chatTopbar h2 { font-size: 16px; font-weight: 600; }
.chatTopbar .ctTopic { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* Custom select pill. The native <select> spans the WHOLE pill so a click
   anywhere — including on the chevron — opens it; the icons sit on top with
   pointer-events:none so clicks fall through to the select beneath. */
.modelSelect { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; color: var(--muted); background: var(--surface); }
.modelSelect .modelSelectIcon { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.modelSelect .modelSelectIcon.left { left: 11px; }
.modelSelect .modelSelectIcon.right { right: 9px; }
.modelSelect .privacyTag { margin-left: 2px; }

.chatThread { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.chatMsg { display: flex; gap: 12px; }
.chatMsg .cmAvatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 650; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.chatMsg.user .cmAvatar { background: linear-gradient(135deg, var(--halo), var(--violet)); color: var(--void); }
.chatMsg.agent .cmAvatar { background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.22), rgba(var(--accent-1-rgb), 0.35)); color: var(--halo); border: 1px solid var(--line-strong); }
.chatMsg .cmBody { flex: 1; min-width: 0; }
.chatMsg .cmHead { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.chatMsg .cmName { font-size: 13px; font-weight: 600; }
.chatMsg .cmTime { font-size: 11px; color: var(--quiet); font-family: 'JetBrains Mono', monospace; }
.chatMsg .cmText { font-size: 13.5px; line-height: 1.55; color: var(--halo); }
/* Rendered-markdown agent replies: tight, readable spacing for paragraphs,
   lists, headings, emphasis, code and tables coming back from the gateway. */
.cmMarkdown > :first-child { margin-top: 0; }
.cmMarkdown > :last-child { margin-bottom: 0; }
.cmMarkdown p { margin: 0 0 8px; }
.cmMarkdown ul, .cmMarkdown ol { margin: 0 0 8px; padding-left: 20px; }
.cmMarkdown li { margin: 2px 0; }
.cmMarkdown li > p { margin: 0; }
.cmMarkdown h1, .cmMarkdown h2, .cmMarkdown h3, .cmMarkdown h4 { margin: 12px 0 6px; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.cmMarkdown strong { font-weight: 650; color: var(--text); }
.cmMarkdown a { color: var(--violet); }
.cmMarkdown code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: rgba(var(--void-rgb), 0.5); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 5px; }
.cmMarkdown pre { margin: 0 0 8px; padding: 10px 12px; background: rgba(var(--void-rgb), 0.55); border: 1px solid var(--line-soft); border-radius: 8px; overflow-x: auto; }
.cmMarkdown pre code { background: none; border: none; padding: 0; }
.cmMarkdown blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted); }
.cmMarkdown table { border-collapse: collapse; margin: 0 0 8px; font-size: 12.5px; }
.cmMarkdown th, .cmMarkdown td { border: 1px solid var(--line-soft); padding: 5px 9px; text-align: left; }

.answerCard { margin-top: 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.06), rgba(var(--plum-rgb), 0.25)); }
.answerCard .acHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.answerCard .acTitle { font-size: 13px; font-weight: 600; }
.answerCard ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.answerCard li { font-size: 13px; color: var(--text); line-height: 1.45; }

.chatComposer { padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.composerBox { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--surface); }
.composerBox input { flex: 1; border: none; outline: none; background: transparent; font-size: 13.5px; }
.composerBox input::placeholder { color: var(--quiet); }

.contextSidebar { border-left: 1px solid var(--line-soft); padding: 18px 16px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; background: rgba(var(--void-rgb), 0.4); }
.ctxBlock h4 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); font-weight: 650; margin-bottom: 10px; }
.ctxParticipants { display: flex; flex-direction: column; gap: 9px; }
.pinnedItem { border: 1px solid var(--line-soft); border-radius: 9px; padding: 10px 11px; background: var(--surface); margin-bottom: 8px; }
.pinnedItem strong { font-size: 12.5px; display: block; }
.pinnedItem span { font-size: 11px; color: var(--quiet); }
.actionItem { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.actionItem:last-child { border-bottom: none; }
.actionItem .aiCheck { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line-strong); flex-shrink: 0; margin-top: 2px; }
.actionItem .aiText { font-size: 12.5px; }
.actionItem .aiMeta { font-size: 11px; color: var(--quiet); }

/* ── Ask Council drawer ───────────────────────────────────────────────────── */
.drawerOverlay { position: fixed; inset: 0; background: rgba(var(--shadow-rgb), 0.6); backdrop-filter: blur(3px); z-index: 60; display: flex; justify-content: flex-end; }
.drawer { width: min(440px, 100%); height: 100%; background: linear-gradient(180deg, rgba(var(--royal-rgb), 0.98), rgba(var(--void-rgb), 0.99)); border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5); }
.drawerHead { padding: 18px 20px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; }
.drawerHead h3 { font-size: 16px; font-weight: 600; }
.drawerBody { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
/* Action bar for the task drawer (the Ask-Council drawer has no footer). */
.drawerFoot { flex-shrink: 0; padding: 14px 20px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: rgba(var(--void-rgb), 0.4); }

/* ── Delegated-task board: filter bar + clickable rows ── */
.taskFilterBar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 0 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 12px; }
.taskFilterBar .filterGroup { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--quiet); }
.dateField { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
.dateField input[type="date"] { background: transparent; border: none; color: var(--text); font: inherit; font-size: 12.5px; color-scheme: dark; outline: none; }
.taskRow { width: 100%; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.taskRow:hover { border-color: var(--line); background: var(--surface-2); }
.taskUnread { display: inline-flex; align-items: center; gap: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; background: rgba(var(--violet-rgb), 0.18); color: var(--halo); border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.taskReplying { font-style: italic; color: var(--quiet); }

/* ── Cockpit: onboarding nudge (calm, dismissible) ── */
.onboardNudge { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 12.5px; background: rgba(var(--violet-rgb), 0.1); border: 1px solid rgba(var(--violet-rgb), 0.25); border-radius: var(--radius-sm); color: var(--lavender); }
.onboardNudge > svg { flex: none; color: var(--violet); }
.onboardNudge > span { flex: 1; }

/* ── Cockpit: agent team quick-chat strip ── */
.agentTeamRow { display: flex; flex-wrap: wrap; gap: 10px; }
.agentTeamCard { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 220px; min-width: 200px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); font: inherit; color: inherit; cursor: pointer; text-align: left; }
.agentTeamCard:hover { border-color: var(--line); background: var(--surface-2); }
.agentTeamCard .atChat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--violet); white-space: nowrap; }

/* ── Briefing renderer ── */
.briefingSection { display: flex; flex-direction: column; gap: 14px; }
.secLabel { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; }
.linkChip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--violet); }
.linkChip:hover { border-color: rgba(var(--violet-rgb), 0.5); background: var(--surface-2); }
.verifyItem { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text); padding: 4px 0; }
.verifyItem .vBox { color: var(--quiet); flex-shrink: 0; margin-top: 1px; }

/* ── Task comment thread ── */
.cmThread { display: flex; flex-direction: column; gap: 12px; }
.cmMsg { max-width: 88%; border: 1px solid var(--line-soft); border-radius: 14px; padding: 9px 12px; background: var(--surface); }
.cmMsg .cmAuthor { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12.5px; }
.cmMsg .cmWhen { display: block; font-size: 11px; color: var(--quiet); margin-top: 4px; }
.cmMsg.human { align-self: flex-end; background: rgba(var(--violet-rgb), 0.12); border-color: rgba(var(--violet-rgb), 0.28); border-bottom-right-radius: 4px; }
.cmMsg.agent { align-self: flex-start; border-bottom-left-radius: 4px; }
.cmTyping { display: inline-flex; gap: 4px; align-items: center; color: var(--quiet); font-size: 12.5px; font-style: italic; }
.cmTyping .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--quiet); animation: councilTypingDot 1.1s ease-in-out infinite; }
.cmTyping .dot:nth-child(2) { animation-delay: 0.15s; }
.cmTyping .dot:nth-child(3) { animation-delay: 0.3s; }
@media (max-width: 760px) { .taskFilterBar { gap: 8px; } .cmMsg { max-width: 95%; } }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modalOverlay { position: fixed; inset: 0; background: rgba(var(--shadow-rgb), 0.66); backdrop-filter: blur(4px); z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal { width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(var(--plum-rgb), 0.98), rgba(var(--void-rgb), 0.99)); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); overflow: hidden; }
.modalHead { flex-shrink: 0; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; }
.modalHead h3 { font-size: 16px; font-weight: 600; }
.modalBody { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modalFoot { flex-shrink: 0; padding: 16px 20px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 10px; }

.fieldLabel { font-size: 12px; color: var(--muted); margin-bottom: 7px; display: block; }
.textInput, .textArea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 11px 13px; font-size: 13.5px; outline: none; }
.textInput:focus, .textArea:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.1); }
.textArea { min-height: 84px; resize: vertical; }

/* ── Customizable dashboard (CEO Snapshot) ────────────────────────────────── */
/* Masonry-style packing: fine row units + JS-measured row spans (see dashboard.tsx). */
.widgetGrid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; row-gap: 0; grid-auto-rows: 8px; grid-auto-flow: row dense; align-items: start; }
/* Plain (non-customizable) 12-col grid — natural row heights, reuses .widget.wN spans. */
.plainGrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
.widget { position: relative; }
.widgetSoonBadge { position: absolute; top: 7px; right: 7px; z-index: 3; pointer-events: none; padding: 1px 6px; border-radius: 20px; font-size: 8.5px; line-height: 1.5; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; opacity: 0.8; border: 1px solid color-mix(in srgb, var(--amber, #f5a623) 35%, var(--line)); background: color-mix(in srgb, var(--amber, #f5a623) 12%, var(--surface)); color: var(--amber, #f5a623); }
.widget.editing .widgetSoonBadge { display: none; }
.widget.w4 { grid-column: span 4; }
.widget.w6 { grid-column: span 6; }
.widget.w8 { grid-column: span 8; }
.widget.w12 { grid-column: span 12; }
.widget .removeBtn { position: absolute; top: 12px; right: 12px; z-index: 2; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(var(--void-rgb), 0.7); color: var(--muted); opacity: 0; transition: opacity 0.15s; }
.widget:hover .removeBtn { opacity: 1; }
.widget .removeBtn:hover { color: var(--bad); border-color: rgba(var(--bad-rgb), 0.4); }
.editHint { font-size: 12px; color: var(--violet); display: inline-flex; align-items: center; gap: 6px; }
/* Edit mode — per-widget toolbar, drag, ghost placeholders */
.widget.editing { outline: 1px dashed var(--line); outline-offset: 5px; border-radius: var(--radius); cursor: grab; }
.widget.editing:active { cursor: grabbing; }
.widget.dropTarget { outline: 1px dashed var(--line-strong); outline-offset: 5px; box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.12); }
.widgetEditBar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 9px; background: rgba(var(--violet-rgb), 0.05); }
.widgetEditBar .dragHandle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widgetEditBar .widgetToggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--violet); flex-shrink: 0; }
.widgetEditBar .widgetToggle:hover { color: var(--halo); }
.widgetGhost { display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.015); color: var(--muted); }
.widgetGhost strong { display: block; font-size: 14px; color: var(--text); }
.widgetGhost span { font-size: 12.5px; color: var(--quiet); }
.widget.isHidden { opacity: 0.85; }

/* Widget library — wide modal + card grid with toggle switches */
.modal.modalWide { width: min(920px, 100%); }
.libraryGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.libraryCard { position: relative; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 15px 14px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 5px; transition: border-color 0.15s, opacity 0.15s; }
.libraryCard.on { border-color: var(--line); background: var(--surface-2); }
.libraryCard:not(.on) { opacity: 0.62; }
.libGroup { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); font-weight: 650; }
.libTitle { font-size: 13.5px; font-weight: 600; padding-right: 44px; }
.libDesc { font-size: 12px; color: var(--muted); line-height: 1.45; }
.libToggle { position: absolute; top: 12px; right: 12px; width: 38px; height: 22px; border-radius: 20px; background: rgba(var(--violet-rgb), 0.12); border: 1px solid var(--line); transition: background 0.15s; flex-shrink: 0; }
.libToggle .libKnob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--quiet); transition: transform 0.16s, background 0.16s; }
.libToggle.on { background: var(--accent-grad); border-color: rgba(var(--violet-rgb), 0.5); }
.libToggle.on .libKnob { transform: translateX(16px); background: var(--halo); }

.addWidgetMenu { display: flex; flex-direction: column; gap: 8px; }
.addWidgetRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); }
.addWidgetRow:hover { background: var(--surface-2); border-color: var(--line); }
.addWidgetRow .awInfo strong { font-size: 13px; display: block; }
.addWidgetRow .awInfo span { font-size: 11.5px; color: var(--quiet); }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-soft); }
.kvList { display: flex; flex-direction: column; gap: 10px; }
.kvRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.kvRow:last-child { border-bottom: none; }
.kvRow .kvK { color: var(--muted); }
.kvRow .kvV { font-weight: 600; }
.divider { height: 1px; background: var(--line-soft); border: none; margin: 0; }
.schemaCard { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 13px; background: rgba(var(--void-rgb), 0.5); font-family: 'JetBrains Mono', monospace; }
.schemaCard .scTable { font-size: 13px; color: var(--violet); font-weight: 600; margin-bottom: 8px; }
.schemaCard .scField { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 3px 0; }
/* Module spec + pricing (CreateTabModal) */
.modSection { display: flex; flex-direction: column; gap: 8px; }
.modLabel { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--violet); }
.modText { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.modText.modMuted, .modMuted { color: var(--muted); }
.modMeta { font-size: 12px; color: var(--quiet); }
.modGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modGrid .metricCard .mValue { font-size: 22px; }
.modGrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modSub { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
.modSub.modGood { color: var(--good); }
.modSub.modWarn { color: #e0b87e; }
.modBullets { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.modBullets li { font-size: 13px; line-height: 1.45; color: var(--text); }
.modBullets.modMuted li { color: var(--muted); }
.econStrip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12px; color: var(--muted); }
.econStrip .econTag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--violet); }
.codeBlock { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.6; background: rgba(var(--void-rgb), 0.6); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 14px; white-space: pre; overflow-x: auto; color: var(--halo); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.emptyHint { color: var(--quiet); font-size: 12.5px; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .split-2-1, .split-1-2 { grid-template-columns: 1fr; }
  .chatLayout { grid-template-columns: 180px 1fr; }
  .contextSidebar { display: none; }
  .widget.w4, .widget.w6, .widget.w8 { grid-column: span 6; }
  .libraryGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .appShell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform 0.22s ease; width: 264px; }
  .sidebar.open { transform: translateX(0); box-shadow: 30px 0 80px rgba(0, 0, 0, 0.5); }
  .mobileMenu { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--muted); }
  .sidebarScrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(var(--shadow-rgb), 0.6); backdrop-filter: blur(2px); }
  .onboardShell { grid-template-columns: 1fr; }
  .onboardLeft { border-right: none; border-bottom: 1px solid var(--line-soft); max-height: none; }
  .onboardRight { max-height: none; }
  .councilBtn span { display: none; }

  /* Collapse the search to a toggle button; reveal the field as a fixed drop-down bar */
  .searchWrap { flex: 0 0 auto; max-width: none; }
  .searchToggle { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
  .searchWrap .searchBox { display: none; }
  .searchWrap.mobileOpen .searchBox { display: flex; position: fixed; left: 12px; right: 12px; top: 66px; width: auto; max-width: none; z-index: 60; background: linear-gradient(180deg, rgba(var(--plum-rgb), 0.98), rgba(var(--void-rgb), 0.99)); backdrop-filter: blur(14px); border-color: var(--line-strong); box-shadow: 0 18px 50px rgba(var(--shadow-rgb), 0.5); }
  .searchWrap.mobileOpen .searchBox kbd { display: none; }
  .searchWrap.mobileOpen .searchResults { position: fixed; left: 12px; right: 12px; top: 118px; }
}
@media (max-width: 680px) {
  .cols-4, .cols-3, .cols-2, .recGrid { grid-template-columns: 1fr; }
  .widgetGrid { grid-template-columns: 1fr; }
  .widget.w4, .widget.w6, .widget.w8, .widget.w12 { grid-column: span 1; }
  .pageBody { padding: 18px 16px 48px; }
  .topbar { padding: 12px 16px; }
  .chatLayout { grid-template-columns: 1fr; }
  .chatChannels { display: none; }
  .libraryGrid { grid-template-columns: 1fr; }
}

/* ── Onboarding ───────────────────────────────────────────────────────────── */
.onboardShell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 65fr) minmax(360px, 35fr); }
.onboardLeft { padding: 32px 40px; display: flex; flex-direction: column; gap: 22px; border-right: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(var(--royal-rgb), 0.6), rgba(var(--void-rgb), 0.85)); overflow-y: auto; max-height: 100vh; }
.onboardRight { padding: 32px 36px; overflow-y: auto; max-height: 100vh; background: radial-gradient(600px 400px at 80% 0%, rgba(var(--violet-rgb), 0.08), transparent 60%); }
.modeChoice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modeBtn { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--surface); }
.modeBtn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.modeBtn.active { border-color: var(--line-strong); background: linear-gradient(135deg, rgba(var(--violet-rgb), 0.14), rgba(var(--plum-rgb), 0.3)); box-shadow: 0 0 0 1px var(--line); }
.modeBtn .mbIcon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--violet); border: 1px solid var(--line); background: var(--surface-2); }
.modeBtn strong { font-size: 14.5px; }
.modeBtn span { font-size: 12px; color: var(--muted); }

.progressRail { display: flex; flex-direction: column; gap: 4px; }
.progressStep { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; font-size: 13px; color: var(--muted); }
.progressStep .psDot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
.progressStep.done { color: var(--text); }
.progressStep.done .psDot { background: rgba(var(--good-rgb), 0.16); border-color: rgba(var(--good-rgb), 0.4); color: var(--good); }
.progressStep.current { color: var(--text); background: var(--surface-2); }
.progressStep.current .psDot { border-color: var(--line-strong); color: var(--violet); }

.onboardChat { display: flex; flex-direction: column; gap: 14px; }
.obMsg { max-width: 86%; padding: 12px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.obMsg.council { align-self: flex-start; background: var(--surface-3); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.obMsg.user { align-self: flex-end; background: var(--accent-grad); color: var(--halo); border-bottom-right-radius: 4px; }
.obMsg .obFrom { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 5px; }
.onboardStepPanel h2 { font-size: 21px; letter-spacing: -0.4px; margin: 8px 0 6px; }
.voiceDemoBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line-soft); background: rgba(189, 167, 255, 0.07); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; color: var(--muted); margin: 14px 0; }
.voiceDemoBar span { flex: 1; min-width: 240px; }
.voiceWelcomeScreen, .voiceControlStage { border: 1px solid rgba(var(--violet-rgb), 0.34); border-radius: 22px; padding: 12px; margin: 8px 0; background: radial-gradient(520px 260px at 20% 0%, rgba(var(--violet-rgb), 0.18), transparent 65%), rgba(var(--surface-rgb), 0.74); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03); }
.voiceMode .voiceControlStage { margin: 0; padding: 10px; }
.voiceWelcomeScreen h3 { font-size: 22px; letter-spacing: -0.5px; margin: 10px 0 8px; }
.voiceOrb { width: 74px; height: 74px; border-radius: 999px; display: grid; place-items: center; color: var(--void); background: linear-gradient(135deg, var(--halo), var(--violet)); box-shadow: 0 0 44px rgba(var(--violet-rgb), 0.42); margin-bottom: 14px; animation: voicePulse 1.8s ease-in-out infinite; }
.voiceStageTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.voiceStageTop strong { display: block; margin-top: 5px; font-size: 14px; color: var(--text); }
.voiceStatePills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.voiceHeroTranscript { min-height: 88px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line-soft); border-radius: 18px; padding: 14px; margin-top: 10px; background: rgba(var(--void-rgb), 0.48); animation: previewPulse 420ms ease; }
.voiceHeroTranscript span { color: var(--violet); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 700; }
.voiceHeroTranscript p { font-size: clamp(20px, 2.8vw, 32px); line-height: 1.08; letter-spacing: -1px; margin-top: 6px; }
.voiceCapturedAnswer { display: flex; gap: 10px; align-items: center; border: 1px solid rgba(var(--good-rgb), 0.28); border-radius: 14px; padding: 8px 10px; background: rgba(var(--good-rgb), 0.08); color: var(--muted); font-size: 12px; margin-top: 8px; }
.voiceCapturedAnswer strong { color: var(--good); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; }
.voiceActiveCanvas { min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 10px; }
.voiceDataGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.voiceDataGrid div { border: 1px solid var(--line-soft); border-radius: 16px; padding: 12px; background: rgba(var(--void-rgb), 0.32); }
.voiceDataGrid span { display: block; color: var(--quiet); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; }
.voiceDataGrid strong { font-size: 13px; line-height: 1.25; }
.chipGrid.compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.voiceAgents { margin-top: 0 !important; gap: 8px !important; }
.voiceAgents .focusChoice { min-height: auto; padding: 12px; }
.voiceConnectors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.voiceConnectors .connectorPick { padding: 10px; }
.voiceConnectors .connectorPick p { font-size: 11.5px; line-height: 1.25; }
.compactLaunch { margin-top: 0; padding: 14px; }
.voiceStepSummary, .researchDeepDive { border: 1px solid var(--line-soft); border-radius: 16px; padding: 14px; margin-top: 12px; background: var(--surface); }
.voiceStepSummary p { margin: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.researchDeepDive { display: flex; gap: 12px; align-items: center; }
.researchDeepDive p { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.loadingRing { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(var(--violet-rgb), 0.22); border-top-color: var(--violet); animation: spin 850ms linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.transcriptBox { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface); padding: 12px; margin-bottom: 12px; animation: previewPulse 520ms ease; }
.transcriptBox p { margin-top: 7px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.liveProgressCard { border: 1px solid rgba(189, 167, 255, 0.26); border-radius: var(--radius); background: linear-gradient(135deg, rgba(189, 167, 255, 0.12), rgba(20, 13, 36, 0.74)); padding: 14px; margin-bottom: 16px; animation: previewPulse 620ms ease; }
.progressTrack { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; margin: 12px 0; border: 1px solid var(--line-soft); }
.progressTrack span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--good)); box-shadow: 0 0 18px rgba(189, 167, 255, 0.45); transition: width 420ms ease; }
.livePreviewStack > .panel { animation: previewRise 420ms ease both; }
.livePreviewStack > .panel:nth-child(2) { animation-delay: 35ms; }
.livePreviewStack > .panel:nth-child(3) { animation-delay: 70ms; }
.livePreviewStack > .panel:nth-child(4) { animation-delay: 105ms; }
.livePreviewStack > .panel:nth-child(5) { animation-delay: 140ms; }
@keyframes previewRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes previewPulse { from { box-shadow: 0 0 0 0 rgba(189, 167, 255, 0.2); } to { box-shadow: 0 0 0 8px rgba(189, 167, 255, 0); } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 12px; color: var(--muted); }
.inputFrame { min-height: 42px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 0 12px; }
.inputFrame input, .inputFrame select { width: 100%; border: none; outline: none; background: transparent; color: var(--text); font-size: 13.5px; }
.researchCard { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(42, 27, 71, 0.55), rgba(18, 12, 32, 0.72)); padding: 16px; }
.researchCard p { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.confirmRow { display: flex; gap: 10px; flex-wrap: wrap; }
.toolGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.toolCard, .agentSetupCard { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.toolCard.yes { border-color: rgba(126, 224, 184, 0.38); background: rgba(126, 224, 184, 0.055); }
.toolCard.no { border-color: rgba(240, 143, 166, 0.32); opacity: 0.74; }
.toolHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toolCard p, .agentSetupCard p { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.toolActions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.toolActions button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--muted); }
.toolActions button.on { border-color: var(--line-strong); color: var(--text); background: var(--surface-2); }
.toolActions button.on.yes { color: var(--good); background: rgba(126, 224, 184, 0.1); }
.toolActions button.on.no { color: var(--risk); background: rgba(240, 143, 166, 0.1); }
.connectorType { font-size: 10.5px; color: var(--quiet); text-transform: uppercase; letter-spacing: 0.08em; }
.agentSetupCard.enabled { border-color: rgba(189, 167, 255, 0.32); }
.selectedPill { border-color: var(--line-strong) !important; background: var(--surface-3) !important; color: var(--text) !important; }
@media (max-width: 760px) { .toolGrid { grid-template-columns: 1fr; } .modeChoice { grid-template-columns: 1fr; } }
/* ── Simplified onboarding wizard ─────────────────────────────────────────── */
.onboardingFocusShell { min-height: 100vh; overflow-y: auto; padding: 18px 22px; background: radial-gradient(760px 420px at 50% 0%, rgba(var(--violet-rgb), 0.16), transparent 68%), linear-gradient(180deg, rgba(var(--royal-rgb), 0.82), rgba(var(--void-rgb), 0.96)); display: flex; flex-direction: column; gap: 14px; }
.onboardingFocusShell.voiceMode { padding: 12px 18px; gap: 10px; height: 100vh; min-height: 0; overflow: hidden; }
.onboardingFocusTop { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 18px; max-width: 1180px; width: 100%; margin: 0 auto; flex-shrink: 0; }
.onboardingProgress { height: 7px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(var(--void-rgb), 0.34); overflow: hidden; }
.onboardingProgress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--halo)); transition: width 240ms ease; }
.onboardingFocusCard { width: min(980px, 100%); margin: auto; border: 1px solid rgba(var(--violet-rgb), 0.24); border-radius: 32px; padding: clamp(20px, 3vw, 34px); background: linear-gradient(160deg, rgba(var(--plum-rgb), 0.94), rgba(var(--void-rgb), 0.92)); box-shadow: 0 38px 120px rgba(0,0,0,0.42); }
.voiceMode .onboardingFocusCard { width: min(1040px, 100%); max-height: calc(100vh - 74px); overflow: hidden; padding: 18px 22px; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; }
.focusKicker { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 750; margin-bottom: 8px; }
.onboardingFocusCard h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 0.98; letter-spacing: -1.6px; max-width: 820px; }
.voiceMode .onboardingFocusCard h1 { font-size: clamp(24px, 3vw, 36px); }
.onboardingFocusCard > p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.4; max-width: 720px; }
.voiceMode .onboardingFocusCard > p { margin-top: 4px; font-size: 13px; line-height: 1.3; }
.choiceGrid { display: grid; gap: 14px; margin-top: 28px; }
.choiceGrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choiceGrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.focusChoice { text-align: left; min-height: 142px; padding: 18px; border: 1px solid var(--line-soft); border-radius: 22px; background: rgba(var(--surface-rgb), 0.64); display: flex; flex-direction: column; gap: 9px; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; }
.focusChoice.compact { min-height: 118px; }
.focusChoice:hover { transform: translateY(-2px); border-color: rgba(var(--violet-rgb), 0.5); }
.focusChoice.selected, .selectChip.selected, .segmented button.active, .connectorPick.selected { border-color: rgba(var(--violet-rgb), 0.78); background: rgba(var(--violet-rgb), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--violet-rgb), 0.16); }
.focusChoice strong { font-size: 16px; }
.focusChoice span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.chipGrid { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.selectChip { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; }
.segmented { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--line-soft); border-radius: 18px; background: rgba(var(--void-rgb), 0.26); margin-top: 10px; }
.segmented button { flex: 1; min-width: 160px; padding: 11px 12px; border-radius: 13px; color: var(--muted); }
.connectorPickGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-height: 420px; overflow: auto; padding-right: 4px; }
.connectorPick { border: 1px solid var(--line-soft); border-radius: 18px; padding: 14px; background: rgba(var(--surface-rgb), 0.58); }
.connectorPick.custom { border-color: rgba(var(--warn-rgb), 0.62); }
.connectorPick div:first-child { display: flex; flex-direction: column; gap: 3px; }
.connectorPick div:first-child span, .connectorPick p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.connectorPick p { margin: 10px 0 12px; }
.textArea.short { min-height: 92px; }
.microNote { border: 1px solid var(--line-soft); border-radius: 16px; padding: 12px 14px; color: var(--muted); font-size: 13px; line-height: 1.45; background: rgba(var(--surface-rgb), 0.52); }
.launchPanel { margin-top: 28px; border: 1px solid rgba(var(--violet-rgb), 0.3); border-radius: 24px; padding: 22px; background: radial-gradient(500px 260px at 0% 0%, rgba(var(--violet-rgb), 0.16), transparent 62%), var(--surface); }
.launchPanel h2 { margin: 10px 0 8px; font-size: 24px; }
.launchPanel > p { color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.onboardingFocusFooter { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 12px; flex-shrink: 0; }
.voiceMode .onboardingFocusFooter { margin-top: 0; padding-top: 8px; }
.miniSummary { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.voiceMode .miniSummary .pill:nth-child(n+3) { display: none; }
.agentTrainingHero { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trainingCard { border: 1px solid var(--line-soft); border-radius: 18px; padding: 14px; background: var(--surface); }
.trainingCard strong { display: block; margin: 8px 0; text-transform: capitalize; }
.trainingCard p { color: var(--muted); font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
@media (max-width: 900px) {
  .onboardingFocusTop { grid-template-columns: 1fr; }
  .choiceGrid.two, .choiceGrid.three, .connectorPickGrid, .agentTrainingHero { grid-template-columns: 1fr; }
  .onboardingFocusFooter { align-items: stretch; flex-direction: column; }
}
/* XecSuite global voice command center */
.voiceQuickActions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.voiceFloatingControls { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: min(390px, calc(100vw - 32px)); border: 1px solid rgba(var(--violet-rgb), 0.35); border-radius: 22px; padding: 14px; background: linear-gradient(135deg, rgba(var(--surface-rgb), 0.96), rgba(var(--void-rgb), 0.96)); box-shadow: 0 20px 70px rgba(0,0,0,0.42), 0 0 38px rgba(var(--violet-rgb), 0.18); backdrop-filter: blur(18px); }
.voiceFloatingControls.listening { border-color: rgba(85, 214, 170, 0.62); }
.voiceFloatingControls.speaking { border-color: rgba(var(--violet-rgb), 0.72); }
.voiceFloatingControls.error { border-color: rgba(255, 105, 105, 0.72); }
.voiceFloatTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.voiceFloatingControls p { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 0 0 10px; }
.voiceTranscriptMini { display: grid; gap: 6px; margin-top: 10px; max-height: 118px; overflow: auto; }
.voiceTranscriptMini span { border: 1px solid var(--line-soft); border-radius: 10px; padding: 6px 8px; color: var(--muted); font-size: 12px; background: rgba(var(--void-rgb), 0.35); }

/* ── Department agent dock (floating per-page chat with the dept lead) ──────
   Sits bottom-right at z-index 58 — above page content, below the app's modal
   / drawer overlays (z 60) and the live-voice dock (z 80). The component hides
   itself entirely while a voice call is live, so the two never collide. */
.deptDockFab { position: fixed; right: 24px; bottom: 24px; z-index: 58; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 999px; border: 1px solid rgba(var(--violet-rgb), 0.32); background: linear-gradient(160deg, rgba(var(--plum-rgb), 0.96), rgba(var(--void-rgb), 0.96)); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4); color: var(--text); cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease; backdrop-filter: blur(14px); }
.deptDockFab:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5); }
.deptDockFabAvatar, .deptDockAvatar { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--void); background: var(--accent-grad); flex-shrink: 0; }
.deptDockFabText { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.deptDockFabText strong { font-size: 13px; font-weight: 600; }
.deptDockFabText span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.deptDockFab > svg { color: var(--violet); margin-left: 2px; flex-shrink: 0; }

.deptDockPanel { position: fixed; right: 24px; bottom: 24px; z-index: 58; width: min(420px, calc(100vw - 48px)); height: min(560px, calc(100vh - 130px)); display: flex; flex-direction: column; border: 1px solid rgba(var(--violet-rgb), 0.32); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(var(--plum-rgb), 0.97), rgba(var(--void-rgb), 0.98)); box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px); animation: previewPulse 360ms ease; }
.deptDockHead { display: flex; align-items: center; gap: 10px; padding: 13px 12px 13px 14px; border-bottom: 1px solid var(--line-soft); }
.deptDockHeadMeta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.deptDockHeadMeta strong { font-size: 14px; font-weight: 600; }
.deptDockHeadMeta span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deptDockThread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.deptDockEmpty { color: var(--muted); font-size: 13px; line-height: 1.5; margin: auto 0; }
.deptDockComposer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); align-items: center; }
.deptDockComposer input { flex: 1; min-width: 0; background: rgba(var(--void-rgb), 0.55); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; font-size: 13px; padding: 9px 11px; }
.deptDockComposer input:focus { outline: none; border-color: rgba(var(--violet-rgb), 0.6); }
.deptDockNotice { padding: 0 12px 12px; color: var(--muted); font-size: 12px; }

/* The brief panel is ALWAYS a dark spotlight (hardcoded dark gradient below), so
   force light text vars for its whole subtree — otherwise in light mode var(--text)
   / var(--muted) resolve dark and the modal renders dark-on-dark (unreadable). */
.voiceFocusModal { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center; padding: 22px; background: rgba(4, 2, 10, 0.78); backdrop-filter: blur(8px); --text: #f4f1fb; --muted: #c4bce0; }
.voiceFocusChrome { pointer-events: auto; width: min(760px, calc(100vw - 36px)); max-height: min(760px, calc(100vh - 90px)); overflow: auto; border: 1px solid rgba(var(--violet-rgb), 0.48); border-radius: 28px; padding: 24px; background: linear-gradient(180deg, rgb(28, 18, 48), rgb(8, 5, 17)); color: var(--text); box-shadow: 0 34px 120px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,255,255,0.04) inset; }
.voiceFocusHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.voiceFocusHead h2 { font-size: clamp(26px, 4vw, 44px); letter-spacing: -1.3px; margin-top: 4px; }
.voiceFocusSummary { font-size: 17px; color: var(--text); line-height: 1.55; margin: 10px 0 16px; }
.agentInsight { display: grid; gap: 6px; border: 1px solid rgba(var(--violet-rgb), 0.28); border-radius: 18px; padding: 12px 14px; margin: 10px 0 14px; background: rgba(var(--violet-rgb), 0.10); }
.agentInsight span { display: inline-flex; align-items: center; gap: 7px; color: var(--halo); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.agentInsight strong { color: var(--text); font-size: 14px; line-height: 1.4; }
.agentInsight.good { border-color: rgba(var(--good-rgb), 0.34); }
.agentInsight.watch { border-color: rgba(var(--warn-rgb), 0.34); }
.agentInsight.risk { border-color: rgba(var(--bad-rgb), 0.38); }
.voiceChartGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.voiceChartCard { border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; padding: 14px; background: rgba(var(--void-rgb), 0.34); }
.voiceChartHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.voiceChartHead strong { color: var(--text); font-size: 14px; }
.voiceChartHead span { color: var(--muted); font-size: 12px; line-height: 1.35; text-align: right; max-width: 58%; }
.voiceChartCard img { width: 100%; border-radius: 14px; border: 1px solid var(--line-soft); }
.voiceDataTable { border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; padding: 8px; background: rgba(var(--void-rgb), 0.22); }
.compactInsightList { margin: 10px 0; }
.voiceInsightGrid .insightStat { border-color: rgba(255,255,255,0.11); background: rgba(255,255,255,0.055); }
.voiceInsightGrid .insightStat.good { border-color: rgba(var(--good-rgb), 0.32); }
.voiceInsightGrid .insightStat.watch { border-color: rgba(var(--warn-rgb), 0.34); }
.voiceInsightGrid .insightStat.risk { border-color: rgba(var(--bad-rgb), 0.38); }
.voiceInsightDetails { margin: 12px 0; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 10px 12px; background: rgba(var(--void-rgb), 0.28); }
.voiceInsightDetails summary { cursor: pointer; color: var(--halo); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
.voiceInsightDetails .rowList { margin-top: 10px; }
.voiceSourceRegistry { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 14px 0; }
.voiceSourceCard { border: 1px solid var(--line-soft); border-radius: 16px; padding: 12px; background: rgba(var(--void-rgb), 0.35); display: grid; gap: 6px; }
.voiceSourceCard strong { font-size: 13.5px; }
.voiceSourceCard span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.voiceApprovalDock { position: fixed; right: 22px; bottom: 202px; z-index: 75; width: min(390px, calc(100vw - 32px)); border: 1px solid rgba(255, 200, 120, 0.35); border-radius: 20px; padding: 12px; background: rgba(var(--surface-rgb), 0.96); box-shadow: 0 16px 60px rgba(0,0,0,0.35); backdrop-filter: blur(16px); }
.voiceApprovalDock .panelKicker { display: flex; align-items: center; gap: 6px; }
.voiceApproval { margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 16px; padding: 10px; background: rgba(var(--void-rgb), 0.32); display: grid; gap: 7px; }
.voiceApproval strong { font-size: 13px; }
.voiceApproval span { color: var(--muted); font-size: 12px; line-height: 1.4; }

/* Advisory council full-run demo */
.councilRunPanel {
  margin: 18px 0 8px;
  padding: 18px;
  border: 1px solid rgba(189,167,255,0.22);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(31,20,55,0.94), rgba(10,6,20,0.96));
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}
.councilRunHero, .councilConclusionBar, .councilModalHeader, .councilModalFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.councilRunHero h3 { margin: 4px 0 6px; font-size: 22px; }
.councilRunHero p, .ctxNote { color: var(--muted); line-height: 1.5; margin: 0; }
.councilWorkflowStrip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.councilWorkflowStrip span {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 8px 10px;
  color: var(--quiet);
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  text-align: center;
}
.councilWorkflowStrip span.active {
  color: var(--halo);
  border-color: rgba(189,167,255,0.45);
  background: rgba(139,92,246,0.18);
}
.councilEvidenceGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.councilEvidenceCard {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.055);
}
.councilEvidenceCard span, .councilAgentCard span, .councilAgentCard em, .councilConclusionBar span { display: block; color: var(--quiet); font-size: 12px; }
.councilEvidenceCard strong { display: block; margin: 4px 0; font-size: 16px; }
.councilEvidenceCard em { color: var(--muted); font-size: 11px; font-style: normal; }
.councilRoster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.councilAgentCard {
  min-height: 126px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 12px;
  background: rgba(10,6,20,0.55);
}
.councilAgentCard strong { display: block; margin-bottom: 3px; }
.councilAgentCard p { margin: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.councilAgentCard.strategy, .councilAgentCard.finance { border-color: rgba(189,167,255,0.34); }
.councilAgentCard.risk { border-color: rgba(255,109,109,0.35); }
.councilAgentCard.growth { border-color: rgba(80,220,170,0.32); }
.councilTranscript {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}
.councilEmptyState {
  border: 1px dashed rgba(189,167,255,0.30);
  border-radius: 18px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}
.councilTurn {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.045);
  animation: councilTurnIn .28s ease-out;
}
.councilTurn.live { border-color: rgba(189,167,255,0.48); box-shadow: 0 0 0 1px rgba(189,167,255,0.12), 0 18px 50px rgba(83,54,150,0.20); }
.councilTurnHead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.councilTurnHead em { display: block; color: var(--quiet); font-size: 12px; font-style: normal; margin-top: 2px; }
.councilTurn p { color: var(--text); line-height: 1.55; margin: 0 0 10px; }
.councilConclusionBar {
  margin-top: 14px;
  border: 1px solid rgba(80,220,170,0.30);
  border-radius: 18px;
  padding: 12px;
  background: rgba(44,189,137,0.10);
}
.councilModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4,2,10,0.80);
  backdrop-filter: blur(10px);
}
.councilRecommendationModal {
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border: 1px solid rgba(189,167,255,0.28);
  border-radius: 26px;
  padding: 22px;
  background: linear-gradient(160deg, #201638, #080511 78%);
  box-shadow: 0 34px 120px rgba(0,0,0,0.55);
}
.councilModalHeader { align-items: flex-start; margin-bottom: 16px; }
.councilModalHeader h2 { margin: 4px 0 8px; }
.councilModalHeader p { color: var(--muted); margin: 0; line-height: 1.5; }
.councilMemoGrid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.councilMemoSections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.councilMemoSections div {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.045);
}
.councilMemoSections h4 { margin: 0 0 8px; }
.councilMemoSections li { margin-bottom: 7px; color: var(--muted); line-height: 1.45; }
.councilModalFooter { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.10); }
@keyframes councilTurnIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 960px) {
  .councilEvidenceGrid, .councilRoster, .councilMemoSections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .councilWorkflowStrip { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .councilRunHero, .councilConclusionBar, .councilModalFooter { align-items: stretch; flex-direction: column; }
  .councilEvidenceGrid, .councilRoster, .councilMemoGrid, .councilMemoSections { grid-template-columns: 1fr; }
}

/* Advisory council standalone round-runtime refinements */
.councilStandalonePage { display: grid; gap: 18px; }
.councilStageLayout {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.4fr);
  gap: 14px;
  margin: 16px 0;
  align-items: start;
}
.councilRoundRail { display: grid; gap: 10px; }
.councilRoundCard {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 13px;
  background: rgba(255,255,255,0.045);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.councilRoundCard.active { border-color: rgba(189,167,255,0.52); background: rgba(139,92,246,0.15); transform: translateX(2px); }
.councilRoundCard.complete { border-color: rgba(80,220,170,0.24); }
.councilRoundCard span { display: block; color: var(--halo); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.councilRoundCard strong { display: block; margin-bottom: 8px; }
.councilRoundGoal, .councilRoundPrompt { color: var(--muted); line-height: 1.45; font-size: 12px; margin: 8px 0 0; }
.councilRoundGoal b, .councilRoundPrompt b { color: var(--text); }
.councilLiveColumn {
  border: 1px solid rgba(189,167,255,0.18);
  border-radius: 22px;
  padding: 12px;
  background: rgba(4,2,10,0.28);
}
.councilLiveHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 12px;
}
.councilLiveHeader strong { display: block; margin-top: 2px; }
.councilLiveFeed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 360px;
  max-height: 640px;
  overflow: auto;
  padding-right: 4px;
}
.councilFeedEvent {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.045);
  animation: councilTurnIn .34s ease-out;
}
.councilFeedEvent.round {
  border-color: rgba(189,167,255,0.30);
  background: linear-gradient(145deg, rgba(139,92,246,0.18), rgba(255,255,255,0.04));
}
.councilFeedEvent.live { border-color: rgba(189,167,255,0.55); box-shadow: 0 0 0 1px rgba(189,167,255,0.12), 0 18px 50px rgba(83,54,150,0.20); }
.councilFeedEvent p { margin: 0 0 10px; line-height: 1.55; color: var(--text); }
.councilFeedEvent p:last-child { margin-bottom: 0; }
@media (max-width: 1120px) { .councilStageLayout { grid-template-columns: 1fr; } }


/* Advisory council compact decision-room polish */
.councilRunPanel { padding: 14px; }
.councilRecommendationHero {
  position: sticky;
  top: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(80,220,170,0.32);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(44,189,137,0.20), rgba(31,20,55,0.96));
  box-shadow: 0 20px 70px rgba(0,0,0,0.30);
}
.councilRecommendationHero h2 { margin: 4px 0 6px; font-size: clamp(19px, 2.2vw, 28px); line-height: 1.12; }
.councilRecommendationHero p { margin: 0; color: var(--muted); line-height: 1.4; }
.councilHeroActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.councilDataRibbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.councilDataPoint {
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
}
.councilDataPoint span, .councilDataPoint em { display: block; color: var(--quiet); font-size: 11px; font-style: normal; }
.councilDataPoint strong { display: block; margin: 3px 0; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.councilStageLayout.compact { grid-template-columns: minmax(190px, 0.42fr) minmax(460px, 1.58fr); margin-top: 12px; }
.councilCompactRail {
  position: sticky;
  top: 132px;
  display: grid;
  gap: 8px;
}
.councilRoundDot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
}
.councilRoundDot span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(189,167,255,0.13);
  color: var(--halo);
  font-size: 12px;
  font-weight: 700;
}
.councilRoundDot strong { font-size: 12px; line-height: 1.25; }
.councilRoundDot.active { border-color: rgba(189,167,255,0.50); background: rgba(139,92,246,0.14); }
.councilRoundDot.complete { border-color: rgba(80,220,170,0.25); }
.councilMiniRoster { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.councilAgentTone {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text);
  background: rgba(255,255,255,0.05);
}
.councilAgentTone.strategy, .councilDebateCard.strategy { --agent-rgb: 189,167,255; }
.councilAgentTone.architecture, .councilDebateCard.architecture { --agent-rgb: 94,180,255; }
.councilAgentTone.risk, .councilDebateCard.risk { --agent-rgb: 255,109,109; }
.councilAgentTone.finance, .councilDebateCard.finance { --agent-rgb: 80,220,170; }
.councilAgentTone.growth, .councilDebateCard.growth { --agent-rgb: 255,183,77; }
.councilAgentTone.product, .councilDebateCard.product { --agent-rgb: 255,132,214; }
.councilAgentTone.delivery, .councilDebateCard.delivery { --agent-rgb: 126,211,255; }
.councilAgentTone.tech, .councilDebateCard.tech { --agent-rgb: 94,234,212; }
.councilAgentTone.cadence, .councilDebateCard.cadence { --agent-rgb: 180,220,120; }
.councilAgentTone { border-color: rgba(var(--agent-rgb, 189,167,255), 0.30); background: rgba(var(--agent-rgb, 189,167,255), 0.10); }
.councilLiveFeed { max-height: 68vh; min-height: 500px; }
.councilDebateCard {
  border-left: 4px solid rgba(var(--agent-rgb, 189,167,255), 0.72);
  background: linear-gradient(135deg, rgba(var(--agent-rgb, 189,167,255), 0.13), rgba(255,255,255,0.035));
}
.councilDebateCard.round { border-left-color: rgba(189,167,255,0.55); }
.councilRoundBrief { display: flex; align-items: center; gap: 10px; }
.councilRoundBrief em { display: block; margin-top: 2px; color: var(--muted); font-style: normal; font-size: 12px; }
.councilLookupPulse {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px 42px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--halo);
  background: rgba(var(--agent-rgb, 189,167,255), 0.13);
  font-size: 11px;
}
.councilLookupPulse .dot { animation: councilLookupPing 1.2s ease-in-out infinite; }
.councilConclusionBar.compact { margin-top: 10px; }
@keyframes councilLookupPing { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.18); } }
@media (max-width: 1120px) {
  .councilStageLayout.compact { grid-template-columns: 1fr; }
  .councilCompactRail { position: static; }
}
@media (max-width: 760px) {
  .councilRecommendationHero { position: static; align-items: stretch; flex-direction: column; }
  .councilHeroActions { justify-content: stretch; }
  .councilDataRibbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .councilDataRibbon { grid-template-columns: 1fr; } }


/* Approval decision packet prototype */
.approvalPacketPage { display: grid; gap: 18px; }
.approvalPacketHero {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 18px; border: 1px solid rgba(80,220,170,0.32); border-radius: 24px;
  background: linear-gradient(135deg, rgba(44,189,137,0.16), rgba(31,20,55,0.94));
  box-shadow: 0 20px 70px rgba(0,0,0,0.25);
}
.approvalPacketHero h2 { margin: 5px 0 8px; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.12; }
.approvalPacketHero p { color: var(--muted); margin: 0; line-height: 1.45; }
.approvalDecisionNote { margin-top: 10px !important; color: var(--halo) !important; }
.approvalHeroActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.approvalOutcomeGrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.approvalOutcomeGrid button {
  border: 1px solid rgba(255,255,255,0.11); border-radius: 14px; padding: 10px;
  background: rgba(255,255,255,0.055); color: var(--text); cursor: pointer; font-weight: 650;
}
.approvalOutcomeGrid button:hover { border-color: rgba(189,167,255,0.45); background: rgba(139,92,246,0.14); }
.approvalPacketLayout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr); gap: 16px; align-items: start; }
.approvalMainStack, .approvalMemoryRail { display: grid; gap: 14px; }
.approvalMemoryRail { position: sticky; top: 12px; }
.approvalEvidenceGrid, .approvalDocsGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.approvalEvidenceCard, .approvalDocumentCard, .approvalRunCard {
  border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 12px; background: rgba(255,255,255,0.045);
}
.approvalEvidenceCard span, .approvalEvidenceCard em, .approvalDocumentCard span, .approvalDocumentCard em, .approvalRunCard span {
  display: block; color: var(--quiet); font-size: 12px; font-style: normal;
}
.approvalEvidenceCard strong, .approvalDocumentCard strong, .approvalRunCard strong { display: block; margin: 4px 0; }
.approvalRunCard p { color: var(--muted); margin: 6px 0 0; font-size: 12px; line-height: 1.4; }
@media (max-width: 1180px) { .approvalOutcomeGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .approvalPacketLayout { grid-template-columns: 1fr; } .approvalMemoryRail { position: static; } }
@media (max-width: 720px) { .approvalPacketHero { flex-direction: column; align-items: stretch; } .approvalOutcomeGrid, .approvalEvidenceGrid, .approvalDocsGrid { grid-template-columns: 1fr; } }


/* Advisory Council live decision-sway state */
.councilDecisionSway { margin-top: 14px; max-width: 680px; }
.councilSwayLabels { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--quiet); font-size: 11px; }
.councilSwayLabels strong { color: var(--halo); font-size: 12px; }
.councilSwayMeter {
  position: relative;
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,109,109,0.28), rgba(255,183,77,0.22) 45%, rgba(80,220,170,0.34));
}
.councilSwayNeedle {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.86);
  border-radius: 999px;
  background: rgba(189,167,255,0.92);
  box-shadow: 0 0 24px rgba(189,167,255,0.55);
  transform: translate(-50%, -50%);
  transition: left .42s ease;
}
.councilAgentTone.support, .councilDebateCard.support { --agent-rgb: 147,197,253; }
.councilAgentTone.external, .councilDebateCard.external { --agent-rgb: 255,204,128; }
.councilAgentTone.externalAdvisor { border-style: dashed; }

/* Deep dive revenue visualization */
.miniRevenueBars, .voiceBarViz { display: grid; gap: 10px; }
.miniRevenueBar, .voiceBarRow { position: relative; display: grid; grid-template-columns: 64px 72px 1fr; align-items: center; gap: 10px; min-height: 30px; color: var(--muted); }
.miniRevenueBar strong, .voiceBarRow strong { color: var(--text); font-size: 13px; }
.miniRevenueBar em, .voiceBarRow em { display: block; height: 9px; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--halo)); box-shadow: 0 0 18px rgba(189, 167, 255, 0.28); }
.rankBadge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 999px; background: rgba(189, 167, 255, 0.14); color: var(--halo); font-weight: 700; font-size: 12px; border: 1px solid var(--line); }
.voiceMetricGrid { margin: 8px 0 12px; }
.voiceMetricGrid .cell span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.voiceBriefRows { display: grid; gap: 8px; margin-top: 12px; }

/* ── Advisory Council — live situation room ─────────────────────────────── */
.councilLaunch { display: flex; flex-direction: column; gap: 12px; }
.councilLaunchInput { width: 100%; resize: vertical; background: rgba(0,0,0,0.18); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--text); font: inherit; }
.councilLaunchControls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.councilLaunchHints { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.councilDissent { margin-top: 10px; border: 1px solid rgba(255,109,109,0.25); background: rgba(255,109,109,0.06); border-radius: 12px; padding: 10px 12px; }
.councilDissentHead { display: flex; align-items: center; gap: 7px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: rgb(240,143,166); margin-bottom: 6px; }
.councilDissentRow { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.councilDissentRow:first-of-type { border-top: none; }
.councilDissentRow strong { font-size: 12.5px; }
.councilDissentRow span { font-size: 12px; color: var(--muted); }
.modelSelect select { background: transparent; border: none; outline: none; color: var(--text); font: inherit; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; border-radius: 9px; padding: 7px 28px 7px 30px; }
.modelSelect select:disabled { cursor: default; }

/* Advisor seats (the situation-room row) */
.councilSeats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.councilSeat { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(150deg, rgba(var(--agent-rgb, 189,167,255), 0.06), rgba(255,255,255,0.015)); transition: border-color .25s, box-shadow .25s, transform .25s; }
.councilSeat.reading { border-color: rgba(var(--agent-rgb, 189,167,255), 0.35); }
.councilSeat.thinking { border-color: rgba(var(--agent-rgb, 189,167,255), 0.6); box-shadow: 0 0 26px rgba(var(--agent-rgb, 189,167,255), 0.22); transform: translateY(-1px); }
.councilSeat.done { border-color: rgba(126,224,184,0.4); }
.councilSeat.finance { --agent-rgb: 80,220,170; }
.councilSeat.growth { --agent-rgb: 255,183,77; }
.councilSeat.delivery { --agent-rgb: 126,211,255; }
.councilSeat.strategy { --agent-rgb: 189,167,255; }
.councilSeat.support { --agent-rgb: 147,197,253; }
.councilSeatAvatar { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font: 650 13px 'JetBrains Mono', monospace; color: var(--void); background: linear-gradient(135deg, var(--halo), rgba(var(--agent-rgb, 189,167,255), 0.95)); flex-shrink: 0; }
.councilSeatMeta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.councilSeatMeta strong { font-size: 13px; }
.councilSeatMeta em { font-style: normal; color: var(--quiet); font-size: 11px; }
.councilSeatStance { color: var(--lavender); font-size: 10.5px; }
.councilSeatStatus { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--quiet); white-space: nowrap; }
.councilSeatStatus .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--quiet); }
.councilSeat.reading .councilSeatStatus .dot { background: var(--warn); animation: voicePulse 1.2s ease-in-out infinite; }
.councilSeat.thinking .councilSeatStatus .dot { background: var(--violet); animation: voicePulse 1s ease-in-out infinite; }
.councilSeat.done .councilSeatStatus .dot { background: var(--good); }

/* Room layout: transcript + side rail */
.councilRoomGrid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.councilRoomMain { min-width: 0; }
.councilRoomRail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
@media (max-width: 980px) { .councilRoomGrid { grid-template-columns: 1fr; } .councilRoomRail { position: static; } }

.councilStatusLine { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--halo); margin-bottom: 12px; }
.councilStatusPulse { width: 9px; height: 9px; border-radius: 999px; background: var(--violet); box-shadow: 0 0 12px var(--violet); animation: voicePulse 1.4s ease-in-out infinite; flex-shrink: 0; }
.councilStatusLine.complete .councilStatusPulse { background: var(--good); box-shadow: 0 0 12px var(--good); animation: none; }
.councilStatusLine.error .councilStatusPulse { background: var(--bad); box-shadow: none; animation: none; }

.councilLiveFeed { overflow-y: auto; }
.councilTurnReveal { animation: councilReveal .4s ease; }
@keyframes councilReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.councilLeanChip { margin-left: auto; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--quiet); white-space: nowrap; max-width: 250px; overflow: hidden; text-overflow: ellipsis; }
.councilLeanChip.approve { color: var(--good); border-color: rgba(126,224,184,0.4); }
.councilLeanChip.defer { color: var(--bad); border-color: rgba(240,143,166,0.4); }
.councilLeanChip.conditional { color: var(--warn); border-color: rgba(232,192,122,0.4); }

.councilThinkingCard { opacity: 0.92; }
.councilTyping { display: inline-flex; gap: 5px; padding: 4px 0; }
.councilTyping span { width: 7px; height: 7px; border-radius: 999px; background: var(--violet); opacity: 0.4; animation: councilTypingDot 1.1s ease-in-out infinite; }
.councilTyping span:nth-child(2) { animation-delay: .18s; }
.councilTyping span:nth-child(3) { animation-delay: .36s; }
@keyframes councilTypingDot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Data-source rail */
.councilDataRail, .councilUsageTally { border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: var(--surface); }
.councilRailHead { display: flex; align-items: center; gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--quiet); margin-bottom: 10px; }
.councilDataChip { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 11px; border: 1px solid var(--line-soft); margin-bottom: 8px; background: rgba(255,255,255,0.015); }
.councilDataChip:last-child { margin-bottom: 0; }
.councilDataChip.memory { border-color: rgba(189,167,255,0.3); }
.councilDataChip strong { display: block; font-size: 12px; }
.councilDataChip span { display: block; color: var(--quiet); font-size: 10.5px; line-height: 1.35; }
.councilChipDot { width: 8px; height: 8px; border-radius: 999px; background: var(--quiet); margin-top: 4px; flex-shrink: 0; }
.councilDataChip.reading .councilChipDot { background: var(--good); animation: voicePulse 1.2s ease-in-out infinite; }
.councilRailEmpty { color: var(--quiet); font-size: 11.5px; line-height: 1.4; margin: 0; }
.councilUsageTally { font-size: 10.5px; color: var(--quiet); line-height: 1.4; }
.councilDecisionSway.locked .councilSwayNeedle { border-color: var(--good); box-shadow: 0 0 24px rgba(126,224,184,0.6); }

/* Qualifying questions */
.councilQuestions { border: 1px solid rgba(189,167,255,0.3); border-radius: 16px; padding: 14px; background: rgba(189,167,255,0.05); margin: 8px 0; }
.councilQuestionsHead { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; }
.councilQuestionsHead strong { display: block; font-size: 13px; }
.councilQuestionsHead span { display: block; color: var(--quiet); font-size: 11.5px; }
.councilQuestionRow { display: block; margin-bottom: 10px; }
.councilQuestionRow > span { display: block; font-size: 12.5px; margin-bottom: 5px; color: var(--ivory); }
.councilQuestionRow textarea { width: 100%; resize: vertical; background: rgba(0,0,0,0.18); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); font: inherit; font-size: 12.5px; }
.councilQuestionsActions { display: flex; gap: 8px; align-items: center; }

.councilSynthesis { margin-top: 10px; }
.councilSynthesisHead { display: flex; align-items: center; gap: 7px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--halo); margin-bottom: 8px; }
.councilResetBtn { margin-top: 12px; }

/* History */
.councilHistory { display: flex; flex-direction: column; gap: 8px; }
.councilHistoryHead { display: flex; justify-content: space-between; align-items: center; color: var(--quiet); font-size: 12px; }
.councilHistoryRow { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.councilHistoryRow.open { border-color: rgba(189,167,255,0.4); }
.councilHistoryMain { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: transparent; border: none; color: inherit; cursor: pointer; text-align: left; }
.councilHistoryChevron { color: var(--quiet); transition: transform .2s; flex-shrink: 0; }
.councilHistoryRow.open .councilHistoryChevron { transform: rotate(180deg); }
.councilHistoryTitle { flex: 1; min-width: 0; }
.councilHistoryTitle strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.councilHistoryTitle span { display: block; color: var(--quiet); font-size: 11px; }
.councilHistoryActions { display: flex; gap: 4px; padding: 0 12px 10px; }
.iconBtn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--quiet); cursor: pointer; }
.iconBtn:hover { color: var(--halo); border-color: var(--line-strong); }
.iconBtn.active { color: var(--violet); border-color: var(--line-strong); }
.councilHistoryBody { padding: 0 12px 12px; border-top: 1px solid var(--line-soft); }
.councilHistoryTurn { margin-top: 10px; font-size: 12.5px; }
.councilHistoryTurn em { color: var(--quiet); font-style: normal; }
.councilHistoryTurn p { margin: 3px 0 0; color: var(--muted); line-height: 1.45; }
.councilHistorySynthesis { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.councilHistorySynthesis strong { font-size: 12.5px; }
.councilHistorySynthesis p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.councilHistorySynthesis .aiMeta { color: var(--quiet); font-size: 11px; }

/* ── Advisory Council — broadcast studio ─────────────────────────────────── */
.councilBroadcast { display: flex; flex-direction: column; gap: 14px; }

/* Header: marquee topic + panelist strip + sources ticker, framed like a set */
.broadcastHeader {
  border: 1px solid rgba(var(--violet-rgb),0.20);
  border-radius: 22px;
  padding: 14px 16px 12px;
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(var(--violet-rgb),0.12), transparent 60%),
    linear-gradient(180deg, rgba(var(--plum-rgb),0.55), rgba(var(--void-rgb),0.66));
  box-shadow: inset 0 1px 0 rgba(var(--white-rgb),0.05), 0 18px 50px rgba(var(--shadow-rgb),0.35);
}
.broadcastMarquee { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.broadcastLamp { width: 9px; height: 9px; border-radius: 999px; background: var(--bad); box-shadow: 0 0 12px var(--bad); flex-shrink: 0; animation: voicePulse 1.4s ease-in-out infinite; }
.broadcastLamp.complete { background: var(--good); box-shadow: 0 0 12px var(--good); animation: none; }
.broadcastLamp.error { background: var(--bad); animation: none; }
.broadcastTopic { font-size: 14px; font-weight: 600; color: var(--ivory); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Panelist strip — the advisors as a lit TV panel */
.panelStrip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.panelist {
  position: relative; width: 116px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 10px 6px 8px; border: 1px solid transparent; border-radius: 16px;
  transition: background .25s, border-color .25s;
}
.panelist.onair { background: linear-gradient(180deg, rgba(var(--violet-rgb),0.14), rgba(var(--violet-rgb),0.02)); border-color: rgba(var(--violet-rgb),0.32); }
.panelist.onair.opp { background: linear-gradient(180deg, rgba(var(--bad-rgb),0.16), rgba(var(--bad-rgb),0.02)); border-color: rgba(var(--bad-rgb),0.40); }
.panelistFrame { position: relative; display: grid; place-items: center; }
.panelistRing { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--violet); box-shadow: 0 0 22px rgba(var(--violet-rgb),0.55); pointer-events: none; }
.panelist.opp .panelistRing { border-color: var(--bad); box-shadow: 0 0 22px rgba(var(--bad-rgb),0.55); }
.panelistBadge { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 8px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.panelistName { font-size: 12px; color: var(--ivory); margin-top: 8px; white-space: nowrap; max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
.panelistRole { font-size: 9.5px; font-style: normal; color: var(--quiet); line-height: 1.2; max-width: 112px; }
.panelistStance { font-size: 9px; color: var(--lavender); }
.panelistStance.opp { color: var(--bad); }
.panelistStatus { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 8.5px; color: var(--quiet); }
.panelistStatus .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--quiet); }
.panelistStatus.reading .dot { background: var(--warn); animation: voicePulse 1.2s ease-in-out infinite; }
.panelistStatus.thinking .dot, .panelistStatus.speaking .dot { background: var(--violet); animation: voicePulse 1s ease-in-out infinite; }
.panelistStatus.done .dot { background: var(--good); }

/* Sources ticker — every live connector + company memory, "on set" */
.sourcesTicker { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.sourcesTickerHead { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--quiet); white-space: nowrap; flex-shrink: 0; }
.sourcesTickerRow { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sourceTag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(255,255,255,0.02); font-size: 10.5px; color: var(--muted); }
.sourceTag.memory { border-color: rgba(189,167,255,0.30); color: var(--lavender); }
.sourceTag.muted { color: var(--quiet); border-style: dashed; }
.sourceTag .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--quiet); }
.sourceTag.live .dot { background: var(--good); animation: voicePulse 1.2s ease-in-out infinite; }

/* Status line under the header */
.broadcastStatus { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--halo); }
.broadcastStatus.complete .councilStatusPulse { background: var(--good); box-shadow: 0 0 12px var(--good); animation: none; }
.broadcastStatus.error .councilStatusPulse { background: var(--bad); box-shadow: none; animation: none; }

/* The transcript stage — internal scroll so the panel + verdict stay framed */
.broadcastStage { display: flex; flex-direction: column; gap: 12px; min-height: 320px; max-height: 56vh; overflow-y: auto; padding: 4px 6px 4px 2px; }
.broadcastTurn { will-change: transform, opacity; }
.onAirTag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--violet); letter-spacing: .06em; text-transform: uppercase; }

.advisorAvatar { position: relative; display: grid; place-items: center; border-radius: 50%; overflow: hidden; border: 2px solid var(--line-strong); background: linear-gradient(150deg, rgba(var(--agent-rgb, 189,167,255), 0.35), rgba(13,8,24,0.92)); box-shadow: 0 6px 22px rgba(0,0,0,0.45); transition: box-shadow .25s, border-color .25s, transform .25s; }
.advisorAvatar img { width: 100%; height: 100%; object-fit: cover; }
.advisorCrest { color: var(--halo); display: grid; place-items: center; }
.advisorAvatar.tone-finance { --agent-rgb: 80,220,170; }
.advisorAvatar.tone-growth { --agent-rgb: 255,183,77; }
.advisorAvatar.tone-delivery { --agent-rgb: 126,211,255; }
.advisorAvatar.tone-tech { --agent-rgb: 94,234,212; }
.advisorAvatar.tone-strategy { --agent-rgb: 189,167,255; }
.advisorAvatar.tone-support { --agent-rgb: 147,197,253; }
.advisorAvatar.tone-risk { --agent-rgb: 240,143,166; }
.advisorAvatar.opposition { border-color: rgba(240,143,166,0.85); box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 0 3px rgba(240,143,166,0.18); }
/* On-air avatar emphasis (panelists replace the old chamber seats) */
.panelist.thinking .advisorAvatar, .panelist.speaking .advisorAvatar, .panelist.onair .advisorAvatar { border-color: var(--violet); box-shadow: 0 0 26px rgba(var(--violet-rgb),0.5); }
.panelist.opp.onair .advisorAvatar { border-color: var(--bad); box-shadow: 0 0 26px rgba(var(--bad-rgb),0.55); }
.panelist.done .advisorAvatar { border-color: rgba(var(--good-rgb),0.55); }

/* ── Council lineup — the standing roster, faces up top ──────────────────── */
.councilLineup { display: grid; gap: 14px; }
.lineupRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lineupCard {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 16px 12px 14px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(var(--violet-rgb),0.05), rgba(0,0,0,0.10));
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lineupCard:hover { border-color: rgba(var(--violet-rgb),0.32); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.lineupCard.opp { background: linear-gradient(180deg, rgba(var(--bad-rgb),0.06), rgba(0,0,0,0.10)); }
.lineupCard.opp:hover { border-color: rgba(var(--bad-rgb),0.4); }
.lineupName { font-size: 14px; color: var(--ivory); margin-top: 4px; }
.lineupRole { font-size: 11px; font-style: normal; color: var(--halo); line-height: 1.25; }
.lineupStance { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--lavender); border: 1px solid rgba(var(--violet-rgb),0.3); border-radius: 999px; padding: 2px 8px; }
.lineupStance.opp { color: var(--bad); border-color: rgba(var(--bad-rgb),0.4); }
.lineupPersonality { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 2px 0 0; }
.lineupOpposition { display: grid; gap: 10px; padding-top: 8px; border-top: 1px dashed var(--line-soft); }
.lineupOppHead { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--bad); }
/* Only two adversaries — keep them compact and centered instead of stretched. */
.lineupOpposition .lineupRow { grid-template-columns: repeat(auto-fit, minmax(150px, 230px)); justify-content: center; }
.lineupCard.skeleton { pointer-events: none; }
.lineupAvatarSkeleton { width: 72px; height: 72px; border-radius: 50%; }
.lineupAvatarSkeleton, .lineupLineSkeleton, .suggestedTopicCard.skeleton {
  background: linear-gradient(90deg, rgba(var(--white-rgb),0.04), rgba(var(--white-rgb),0.10), rgba(var(--white-rgb),0.04));
  background-size: 200% 100%; animation: lineupShimmer 1.3s ease-in-out infinite;
}
.lineupLineSkeleton { height: 10px; width: 60%; border-radius: 6px; }
.lineupLineSkeleton.wide { width: 82%; }
@keyframes lineupShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Suggested topics — the Chair's picks to convene on ──────────────────── */
.suggestedTopics { display: grid; gap: 12px; }
.suggestedTopicsHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.suggestedTopicsTitle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ivory); font-weight: 650; }
.suggestedTopicsMeta { display: inline-flex; align-items: center; gap: 10px; }
.suggestedTopicsSource { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--quiet); }
.suggestedTopicsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.suggestedTopicCard {
  display: flex; align-items: flex-start; gap: 11px; text-align: left;
  padding: 14px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, rgba(var(--agent-rgb, 189,167,255),0.07), rgba(0,0,0,0.12));
  color: var(--text); font: inherit; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.suggestedTopicCard:hover { border-color: rgba(var(--agent-rgb, 189,167,255),0.45); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.28); }
.suggestedTopicCard.tone-finance { --agent-rgb: 80,220,170; }
.suggestedTopicCard.tone-growth { --agent-rgb: 255,183,77; }
.suggestedTopicCard.tone-delivery { --agent-rgb: 126,211,255; }
.suggestedTopicCard.tone-strategy { --agent-rgb: 189,167,255; }
.suggestedTopicCard.tone-support { --agent-rgb: 147,197,253; }
.suggestedTopicIcon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; color: rgb(var(--agent-rgb, 189,167,255)); background: rgba(var(--agent-rgb, 189,167,255),0.14); border: 1px solid rgba(var(--agent-rgb, 189,167,255),0.28); }
.suggestedTopicBody { display: grid; gap: 4px; min-width: 0; flex: 1; }
.suggestedTopicBody strong { font-size: 13px; color: var(--ivory); line-height: 1.3; }
.suggestedTopicWhy { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.suggestedTopicGo { color: var(--quiet); flex-shrink: 0; align-self: center; transition: transform .2s, color .2s; }
.suggestedTopicCard:hover .suggestedTopicGo { color: rgb(var(--agent-rgb, 189,167,255)); transform: translateX(3px); }
.suggestedTopicCard.skeleton { min-height: 76px; pointer-events: none; }
.spin { animation: lineupSpin 0.9s linear infinite; }
@keyframes lineupSpin { to { transform: rotate(360deg); } }

/* Verdict bar — the anchored bottom third (gauge + lean-trajectory ribbon) */
.verdictBar {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(135deg, rgba(var(--plum-rgb),0.5), rgba(var(--void-rgb),0.62));
  transition: border-color .3s, box-shadow .3s;
}
.verdictBar.dir-approve { border-color: rgba(var(--good-rgb),0.32); }
.verdictBar.dir-defer { border-color: rgba(var(--bad-rgb),0.32); }
.verdictBar.locked { border-color: rgba(var(--good-rgb),0.5); box-shadow: 0 0 0 1px rgba(var(--good-rgb),0.14), 0 18px 50px rgba(var(--shadow-rgb),0.25); }
.verdictKicker { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--quiet); }
.verdictLivePulse { width: 7px; height: 7px; border-radius: 999px; background: var(--violet); box-shadow: 0 0 10px var(--violet); animation: voicePulse 1.4s ease-in-out infinite; }
.verdictScoreRow { display: flex; align-items: center; gap: 14px; margin: 6px 0 12px; }
.verdictScore { font-size: 46px; font-weight: 750; line-height: 1; color: var(--ivory); font-variant-numeric: tabular-nums; }
.verdictScore i { font-size: 18px; font-style: normal; color: var(--quiet); margin-left: 2px; }
.verdictReadout { min-width: 0; }
.verdictDir { display: block; font-size: 15px; }
.verdictDir.approve { color: var(--good); }
.verdictDir.defer { color: var(--bad); }
.verdictDir.conditional { color: var(--warn); }
.verdictReadout span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.verdictTrack { position: relative; height: 10px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--bad-rgb),0.55), rgba(var(--warn-rgb),0.5) 50%, rgba(var(--good-rgb),0.6)); }
.verdictNeedle { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(var(--white-rgb),0.9); background: var(--violet); box-shadow: 0 0 16px rgba(var(--violet-rgb),0.6); transform: translate(-50%, -50%); }
.verdictBar.locked .verdictNeedle { background: var(--good); box-shadow: 0 0 18px rgba(var(--good-rgb),0.7); }
.verdictTrackLabels { display: flex; justify-content: space-between; margin-top: 9px; }
.verdictTrackLabels em { font-size: 9px; font-style: normal; color: var(--quiet); text-transform: uppercase; letter-spacing: .06em; }

.verdictTraj { display: flex; flex-direction: column; gap: 6px; }
.verdictTrajLabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
.verdictTrajSvg { width: 100%; height: 46px; }
.verdictTraj.empty { display: grid; place-items: center; min-height: 56px; border: 1px dashed var(--line-soft); border-radius: 12px; }
.verdictTraj.empty span { font-size: 10.5px; color: var(--quiet); }

.broadcastFooter { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.broadcastFooter .councilUsageTally { border: none; padding: 0; background: none; }

@media (max-width: 760px) {
  .panelist { width: 96px; }
  .verdictBar { grid-template-columns: 1fr; gap: 14px; }
  .broadcastStage { max-height: none; }
}

/* ── Tabs (in-page segmented control, e.g. Sales Overview | CRM) ── */
.tabBar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabBtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; margin-bottom: -1px; }
.tabBtn:hover { color: var(--text); }
.tabBtn.active { color: var(--text); border-bottom-color: var(--violet); }
/* ── Locked module teaser ── */
.lockedModule { text-align: center; padding: 28px 20px; }
.lockedModule .lockIcon { color: var(--violet); margin-bottom: 10px; }
.lockedModule h3 { margin: 0 0 6px; font-size: 16px; }
.lockedModule .lockValue { list-style: none; padding: 0; margin: 14px auto; max-width: 460px; text-align: left; display: grid; gap: 6px; }
.lockedModule .lockValue li { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 13px; }

/* ── CRM module (generic-first; dark-theme tokens only) ─────────────────── */
/* Small uppercase section label used across the CRM views (was unstyled). */
.kicker { color: var(--violet); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; font-weight: 650; display: inline-block; }

/* KPI / metric strip */
.crmKpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.crmKpi { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface); }
.crmKpi .kicker { margin-bottom: 6px; }
.crmKpi .kpiVal { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.15; }
.crmKpi .kpiSub { color: var(--muted); font-size: 11.5px; margin-top: 3px; display: block; }
.crmKpi.good .kpiVal { color: var(--good); }
.crmKpi.bad .kpiVal { color: var(--bad); }
.crmKpi.accent .kpiVal { color: var(--violet); }

/* Kanban board */
.crmBoard { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.crmCol { min-width: 224px; flex: 1 0 224px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, background .15s; }
.crmCol.drop { border-color: rgba(var(--violet-rgb), 0.55); background: var(--surface-2); }
.crmColHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crmColHead .ttl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; min-width: 0; }
.crmColHead .ttl strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmColHead .accent { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.crmColMeta { color: var(--muted); font-size: 10.5px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.crmCards { display: flex; flex-direction: column; gap: 8px; min-height: 36px; }
.crmCard { background: linear-gradient(180deg, rgba(var(--white-rgb),0.045), rgba(var(--white-rgb),0.015)); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 11px; cursor: grab; transition: transform .12s, border-color .12s, box-shadow .12s; }
.crmCard:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(var(--shadow-rgb), 0.4); }
.crmCard:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.crmCard:active { cursor: grabbing; }
.crmCard .nm { font-size: 13px; font-weight: 600; display: block; }
.crmCard .meta { color: var(--muted); font-size: 11.5px; margin-top: 3px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crmCard .val { font-family: 'JetBrains Mono', monospace; color: var(--good); }
.crmProb { height: 4px; border-radius: 999px; background: var(--surface-3); margin-top: 9px; overflow: hidden; }
.crmProb > span { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; }

/* Avatars + owner chip */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-grad); color: var(--halo); font-size: 10px; font-weight: 700; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.avatar.sm { width: 20px; height: 20px; font-size: 9px; }
.avatar.unassigned { background: var(--surface-3); color: var(--quiet); box-shadow: none; }
.ownerChip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.ownerChip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Horizontal value bars (leaderboard / by-stage funnel) */
.crmBars { display: grid; gap: 9px; }
.crmBarRow { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; align-items: center; font-size: 12.5px; }
.crmBarRow .lbl { display: flex; align-items: center; gap: 7px; min-width: 0; }
.crmBarRow .lbl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmBarTrack { height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.crmBarTrack > span { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; }
.crmBarVal { font-family: 'JetBrains Mono', monospace; color: var(--muted); font-size: 11.5px; white-space: nowrap; }

/* Inline select that matches the dark theme (owner/assignee/type pickers) */
.crmSelect { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: 12.5px; padding: 7px 9px; }
.crmSelect:hover { border-color: var(--line-strong); }

@media (max-width: 680px) {
  .crmBarRow { grid-template-columns: 110px 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
  .crmCard, .crmCol { transition: none; }
  .crmCard:hover { transform: none; }
}

/* Record-drawer edit forms: dark-theme inputs (bare inputs only inherit color). */
.crmFieldGrid input:not([type="checkbox"]), .crmFieldGrid textarea, .crmFieldGrid select {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: 13px; padding: 7px 9px;
}
.crmFieldGrid input:focus, .crmFieldGrid textarea:focus, .crmFieldGrid select:focus {
  outline: none; border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(var(--violet-rgb), 0.1);
}
.crmFieldGrid input::placeholder, .crmFieldGrid textarea::placeholder { color: var(--quiet); }
.crmFieldGrid input[type="date"] { color-scheme: dark; }
.crmFieldGrid textarea { resize: vertical; min-height: 56px; }
/* Light-theme token values for the design-system export.
 *
 * In the live app these are applied imperatively in JS (src/branding.tsx:55-72
 * `lightTokens`, swapped onto :root when the user toggles light mode and the
 * BrandingProvider sets data-theme="light"). The shipped styles.css only carries
 * the DARK :root defaults, so without this block a design built in Claude Design
 * could not render light mode. This block is appended to the cssEntry (the
 * .design-sync/.cache/styles.combined.css build input) so light mode works via
 * pure CSS: set data-theme="light" on any container (or :root) and these token
 * values cascade.
 *
 * Values mirror src/branding.tsx:55-72 EXACTLY — keep in sync on a re-sync.
 * Derived tokens follow automatically: --text=var(--ivory), --muted=var(--lavender),
 * --surface=rgba(var(--white-rgb),..), --line*=rgba(var(--violet-rgb),..),
 * --info=var(--violet), --chart-1=var(--violet), --accent-grad=var(--accent-1/2).
 */
:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;

  --void: #EEEAF7;            --void-rgb: 238, 234, 247;
  --royal: #E4DEF2;           --royal-rgb: 228, 222, 242;
  --plum: #D9D0EC;            --plum-rgb: 217, 208, 236;
  --ivory: #1B1430;           /* primary text -> dark ink */
  --halo: #2A1F45;            /* emphasis text -> dark */
  --lavender: #4f4568;        /* muted text */
  --quiet: #6c6286;
  --white-rgb: 40, 26, 80;    /* translucent surfaces become subtle dark tints */
  --shadow-rgb: 150, 135, 190;

  --violet: #5E3FA8;          --violet-rgb: 94, 63, 168;
  --good: #1f9d6b;            --good-rgb: 31, 157, 107;
  --warn: #b1781e;            --warn-rgb: 177, 120, 30;
  --bad: #cf3a60;             --bad-rgb: 207, 58, 96;

  --chart-2: #7c5fe0;
  --chart-3: #6a4fc4;
  --chart-4: #5840a6;
  --chart-5: #463186;
  --chart-6: #352465;

  /* Derived tokens re-declared (formulas copied verbatim from src/styles.css
   * :root) so light mode resolves correctly when data-theme is set on a CONTAINER,
   * not just :root. These reference base tokens via var(); since `--text:
   * var(--ivory)` is substituted at its DECLARING element, it must be re-declared
   * here to pick up this block's light --ivory etc. (Otherwise children inherit the
   * :root-computed dark value.) NOTE: --accent-1/--accent-2 are intentionally NOT
   * re-tuned — that mirrors the app's default-brand light-accent gap (only a live
   * tenant brand re-tunes the accent on light surfaces). Keep in sync with
   * src/styles.css. */
  --text: var(--ivory);
  --muted: var(--lavender);
  --info: var(--violet);
  --chart-1: var(--violet);
  --surface: rgba(var(--white-rgb), 0.025);
  --surface-2: rgba(var(--violet-rgb), 0.05);
  --surface-3: rgba(var(--violet-rgb), 0.09);
  --line: rgba(var(--violet-rgb), 0.14);
  --line-soft: rgba(var(--violet-rgb), 0.08);
  --line-strong: rgba(var(--violet-rgb), 0.28);
}