/* ════════════════════════════════════════════════════════════════════════
   CallDirect — Premium SaaS design system
   Phase 1: pure restyle. Every selector below matches what portal.js emits;
   no class names changed → zero functional/JS risk. Light + dark tokens.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root{
  /* DARK (default — JS boots with data-theme="dark") */
  --bg:#0B1220; --panel:#111827; --panel2:#0D1526; --line:#1F2937; --line2:#2A3850;
  --txt:#F8FAFC; --mut:#94A3B8; --mut2:#64748B;
  --acc:#6366F1; --acc2:#818CF8; --grad:linear-gradient(135deg,#6366F1,#818CF8);
  --ok:#34D399; --warn:#FBBF24; --bad:#F87171; --info:#38BDF8;

  --radius:16px; --radius-sm:12px; --radius-lg:20px;
  --shadow:0 1px 2px rgba(0,0,0,.30),0 12px 32px -8px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.25),0 4px 12px -4px rgba(0,0,0,.35);
  --ring:0 0 0 3px rgba(99,102,241,.35);
  --ease:cubic-bezier(.4,0,.2,1);

  /* themeable surfaces */
  --side:linear-gradient(180deg,#0E1626,#0A111E); --hover:#172033; --rowhover:#141d30;
  --chip:#1A2336; --chip2:#26314A; --bubble:#172033; --topbar:rgba(11,18,32,.72);
}
:root[data-theme="light"]{
  /* LIGHT */
  --bg:#F8FAFC; --panel:#FFFFFF; --panel2:#F1F5F9; --line:#E2E8F0; --line2:#CBD5E1;
  --txt:#0F172A; --mut:#64748B; --mut2:#94A3B8;
  --acc:#4F46E5; --acc2:#6366F1; --grad:linear-gradient(135deg,#4F46E5,#6366F1);
  --ok:#22C55E; --warn:#F59E0B; --bad:#EF4444; --info:#0EA5E9;

  --shadow:0 1px 2px rgba(15,23,42,.04),0 12px 28px -8px rgba(15,23,42,.14);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 4px 12px -4px rgba(15,23,42,.10);
  --ring:0 0 0 3px rgba(79,70,229,.18);

  --side:linear-gradient(180deg,#FFFFFF,#F4F7FC); --hover:#EEF2FB; --rowhover:#F6F9FF;
  --chip:#EEF2F8; --chip2:#E2E8F0; --bubble:#EFF3FB; --topbar:rgba(255,255,255,.78);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,Segoe UI,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;transition:grid-template-columns .2s var(--ease)}
#app.nav-collapsed{grid-template-columns:64px 1fr}
a{color:var(--acc);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--acc2)}
b{font-weight:600}
small{color:var(--mut)}
::selection{background:rgba(99,102,241,.28)}

/* Refined scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:20px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--mut2);background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
/* The sidebar itself no longer scrolls — the NAV does (see #nav). Scrolling the whole column pushed the
   footer off the bottom of the viewport once the nav grew past ~8 items, so the build stamp and the engine
   status were only visible if you happened to scroll the sidebar. They are status, not content: they belong
   pinned where they can be read at a glance. */
.sidebar{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}
.brandmark{display:flex;gap:11px;align-items:center;padding:18px 14px 12px;position:relative}
.brandmark .logo{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:12px;background:var(--grad);color:#fff;font-size:18px;box-shadow:0 6px 16px -4px rgba(99,102,241,.55)}
.logo .lmark{width:60%;height:60%;display:block}   /* CallDirect voice-wave mark; scales with the badge (sidebar 36px / auth 50px) */
.brandmark .bm-text{min-width:0;overflow:hidden}
.brandmark b{display:block;font-size:15px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.brandmark small{font-size:11px;color:var(--mut);white-space:nowrap}
/* collapse toggle (chevron in the sidebar header) + top burger */
.nav-toggle{margin-left:auto;flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);color:var(--mut);border-radius:8px;cursor:pointer;font-size:15px;line-height:1;transition:background .15s,color .15s,transform .2s}
.nav-toggle:hover{color:var(--txt);background:var(--hover)}
#app.nav-collapsed .nav-toggle{transform:rotate(180deg)}
.nav-burger{display:none;width:30px;height:30px;place-items:center;border:1px solid var(--line);background:var(--panel);color:var(--mut);border-radius:9px;cursor:pointer;font-size:15px;margin-right:10px}
.nav-burger:hover{color:var(--txt)}
/* brand selector — now under the logo in the sidebar */
.side-brand{padding:4px 14px 10px;position:relative}
.side-brand .brand-select{width:100%}
.brand-badge{display:none;width:36px;height:36px;margin:0 auto;place-items:center;border-radius:11px;background:var(--chip2);color:var(--txt);font-weight:800;font-size:15px;cursor:pointer;border:1px solid var(--line2)}
.brand-badge:hover{border-color:var(--acc)}
/* min-height:0 is the load-bearing bit. A flex item defaults to min-height:auto, which refuses to shrink
   below its content — so a long nav grew the column past 100vh and shoved the footer out of sight instead
   of scrolling itself. With it, the nav takes the leftover space and scrolls internally. */
#nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 12px}
.nav-group{margin:18px 10px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--mut2);font-weight:700}
.nav-item{display:flex;gap:11px;align-items:center;padding:9px 12px;border-radius:11px;color:var(--mut);cursor:pointer;font-weight:500;margin:2px 0;position:relative;transition:background .15s var(--ease),color .15s var(--ease)}
.nav-item:hover{background:var(--hover);color:var(--txt)}
.nav-item.active{background:linear-gradient(90deg,rgba(99,102,241,.20),rgba(129,140,248,.06));color:var(--txt);font-weight:600}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--grad)}
.nav-item.active .ni-ic{filter:none;opacity:1}
.ni-ic{width:20px;text-align:center;opacity:.85;font-size:15px}
.nav-item .pill{margin-left:auto;font-size:10px;background:var(--grad);color:#fff;border-radius:20px;padding:1px 8px;font-weight:700}
/* flex-wrap so the version block drops onto its OWN row. Without it this is a nowrap row with
   overflow:hidden, so the two-line version sat beside "engine connected" and was clipped mid-word —
   the line was there, just unreadable. */
/* flex:0 0 auto so it never shrinks: it carries its own overflow:hidden, so being squeezed by a tall nav
   used to clip the version row away rather than push the column taller. */
.side-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden}
.dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--mut)}
.dot.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.dot.bad{background:var(--bad);box-shadow:0 0 0 3px rgba(248,113,113,.18)}

/* ── Collapsed (icon-only) sidebar ─────────────────────────────────────────── */
/* Collapsed: stack the logo + the toggle arrow so EVERY role (incl. Brand Owner, who has no brand-badge) can expand. */
#app.nav-collapsed .brandmark{flex-direction:column;justify-content:center;gap:9px;padding:16px 8px 12px}
#app.nav-collapsed .nav-toggle{margin-left:0}
#app.nav-collapsed .brandmark .bm-text,
#app.nav-collapsed .nav-group,
#app.nav-collapsed .nav-item > *:not(.ni-ic),
#app.nav-collapsed .side-brand .brand-select,
#app.nav-collapsed .side-foot > :not(.dot){display:none}
#app.nav-collapsed .side-brand{padding:2px 8px 8px}
#app.nav-collapsed .brand-badge{display:grid}
#app.nav-collapsed #nav{padding:8px 8px}
#app.nav-collapsed .nav-item{justify-content:center;padding:10px 0;margin:3px 0}
#app.nav-collapsed .ni-ic{font-size:18px;opacity:.9}
#app.nav-collapsed .nav-item.active::before{left:-8px}
#app.nav-collapsed .side-foot{justify-content:center;padding:14px 0}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:0 22px;height:64px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--topbar);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);z-index:5}
.crumbs{display:flex;align-items:center;flex:0 0 auto}
.crumbs #moduleTitle{font-size:18px;font-weight:800;letter-spacing:-.2px;white-space:nowrap}
/* header slot — holds the agent + voice pickers on the training page */
.header-slot{flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:0;overflow-x:auto}
.header-slot:empty{display:none}
.top-right{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.brand-select{background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:11px;padding:9px 13px;font-weight:600;font-size:13px;outline:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.brand-select:hover{border-color:var(--line2)}
.brand-select:focus{border-color:var(--acc);box-shadow:var(--ring)}
.iconbtn{background:var(--panel);border:1px solid var(--line);color:var(--txt);width:40px;height:40px;border-radius:12px;cursor:pointer;position:relative;font-size:16px;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s,color .15s,transform .1s}
.iconbtn:hover{border-color:var(--acc);background:var(--hover)}
.iconbtn:active{transform:scale(.95)}
.iconbtn svg{display:block}
.iconbtn.signout{color:var(--mut)}
.iconbtn.signout:hover{border-color:#e5484d;color:#e5484d;background:rgba(229,72,77,.08)}
/* Wallet balance chip — always in the top bar (BrandOwner+). Red when the balance is low. */
.wallet-chip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;background:var(--panel);border:1px solid var(--line);color:var(--txt);border-radius:12px;cursor:pointer;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.wallet-chip:hover{border-color:var(--acc);background:var(--hover)}
.wallet-chip .wc-ic{font-size:15px;line-height:1}
.wallet-chip.low{color:#e5484d;border-color:#e5484d;background:rgba(229,72,77,.08)}
@media (max-width:640px){.wallet-chip .wc-ic{display:none}}
/* Theme toggle — segmented sun/moon control */
.theme-switch{display:inline-flex;align-items:center;flex:0 0 72px;width:72px;height:36px;padding:3px;border:1px solid var(--line);border-radius:20px;background:var(--panel2);cursor:pointer;gap:0;transition:border-color .15s}
.theme-switch:hover{border-color:var(--acc)}
.theme-switch .ts-ic{flex:1;height:100%;display:grid;place-items:center;font-size:14px;line-height:1;border-radius:50%;color:var(--mut);opacity:.45;transition:opacity .2s,background .2s}
.theme-switch.is-light .ts-sun{background:var(--grad);color:#fff;opacity:1;box-shadow:0 2px 8px rgba(79,70,229,.45)}
.theme-switch:not(.is-light) .ts-moon{background:var(--grad);color:#fff;opacity:1;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.theme-switch .ts-knob{display:none}
.badge{position:absolute;top:-5px;right:-5px;background:var(--bad);color:#fff;border-radius:20px;font-size:10px;padding:1px 5px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.me{display:flex;gap:10px;align-items:center}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff;font-size:12px;box-shadow:0 4px 12px -3px rgba(99,102,241,.5)}
.me-meta b{font-size:13px;display:block}
.me-meta small{font-size:11px}

/* ── View ───────────────────────────────────────────────────────────────── */
.view{padding:24px 30px;max-width:1680px;margin:0 auto;width:100%;animation:viewfade .28s var(--ease)}
@keyframes viewfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.loading{color:var(--mut);padding:48px;text-align:center}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.page-head h2{margin:0 0 4px;font-size:26px;font-weight:800;letter-spacing:-.4px}
.page-head p{margin:0;color:var(--mut);max-width:680px}

/* ── Cards / grid ───────────────────────────────────────────────────────── */
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1050px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.card h3{margin:0 0 14px;font-size:15px;font-weight:700;letter-spacing:-.1px}
.tpl-card{transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.tpl-card:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:var(--shadow)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat .k{font-size:12px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.stat .v{font-size:34px;font-weight:800;margin-top:8px;letter-spacing:-1px;line-height:1.1}
.stat .ic{position:absolute;right:16px;top:16px;font-size:22px;opacity:.45}
.stat.accent{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(129,140,248,.05));border-color:rgba(99,102,241,.30)}
.stat.accent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}

/* ── Tables ─────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--mut);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.5px;background:var(--panel2)}
td{padding:13px 14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--rowhover)}
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}

/* ── Buttons / inputs ───────────────────────────────────────────────────── */
.btn{background:var(--panel);border:1px solid var(--line2);color:var(--txt);padding:10px 16px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;transition:border-color .15s,background .15s,transform .1s,box-shadow .15s}
.btn:hover{border-color:var(--acc);background:var(--hover)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn.primary{background:var(--grad);border:none;color:#fff;box-shadow:0 6px 16px -5px rgba(99,102,241,.6)}
.btn.primary:hover{filter:brightness(1.06);box-shadow:0 8px 22px -6px rgba(99,102,241,.7)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--hover)}
.btn.sm{padding:6px 12px;font-size:12px;min-height:34px;border-radius:9px}
.btn.danger{border-color:rgba(248,113,113,.45);color:var(--bad);background:rgba(248,113,113,.06)}
.btn.danger:hover{background:rgba(248,113,113,.12);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.input,select.input,textarea.input{width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);border-radius:var(--radius-sm);padding:12px 14px;min-height:46px;font:inherit;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.input:hover{border-color:var(--mut2)}
.input:focus{border-color:var(--acc);box-shadow:var(--ring);background:var(--panel)}
textarea.input{resize:vertical;min-height:80px;line-height:1.55}
select.input{cursor:pointer}
/* Compact inline dropdowns used in dense tables (AI Models voice/tone pickers). */
.input.sm,select.input.sm{min-height:38px;padding:8px 10px;font-size:13px;width:auto;min-width:150px}
label.fld{display:block;margin-bottom:14px}
label.fld>span{display:block;color:var(--mut);font-size:12px;margin-bottom:6px;font-weight:600}
/* Password field with show/hide eye toggle */
.pw-wrap{position:relative;display:block}
.pw-wrap .input{padding-right:44px}
.pw-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--mut);cursor:pointer;transition:color .15s,background .15s}
.pw-eye:hover{color:var(--txt);background:var(--hover)}
.pw-eye svg{display:block}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.checks{display:flex;flex-wrap:wrap;gap:9px}
.check{display:flex;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:9px 13px;cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.check:hover{border-color:var(--mut2)}
.check input{accent-color:var(--acc);width:16px;height:16px}
.check.on{border-color:var(--acc);background:rgba(99,102,241,.12)}

/* ── Tags / pills ───────────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:var(--chip);color:var(--mut);letter-spacing:.2px}
.tag.ok{background:rgba(34,197,94,.15);color:var(--ok)} .tag.warn{background:rgba(245,158,11,.15);color:var(--warn)}
.tag.bad{background:rgba(239,68,68,.15);color:var(--bad)} .tag.info{background:rgba(14,165,233,.15);color:var(--info)}
.tag.draft{background:var(--chip2);color:var(--mut)} .tag.review{background:rgba(245,158,11,.15);color:var(--warn)}
.tag.approved{background:rgba(14,165,233,.15);color:var(--info)} .tag.published{background:rgba(34,197,94,.15);color:var(--ok)} .tag.rejected{background:rgba(239,68,68,.15);color:var(--bad)}

/* ── Diff / compare ─────────────────────────────────────────────────────── */
/* Version Control — plain-language snapshot + before/after compare (no raw JSON on screen) */
.vc-cat{margin:18px 0 8px;font-size:13.5px;font-weight:700;color:var(--txt)}
.vc-cat:first-child{margin-top:2px}
/* Plain-language "what changed" summary panel at the top of the compare view */
.vc-summary{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.30);border-radius:12px;padding:12px 16px;margin:10px 0 14px}
.vc-summary.ok{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.30)}
.vc-summary ul{margin:8px 0 0;padding-left:20px}
.vc-summary li{margin:4px 0;line-height:1.55}
/* Little ? hint next to a field label — hover to see the plain-language meaning */
.vc-hint{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--chip);color:var(--mut);font-size:10px;font-weight:700;cursor:help;user-select:none;vertical-align:middle;margin-left:4px}
.vc-hint:hover{background:var(--acc);color:#fff}
.vc-list .vc-row{display:grid;grid-template-columns:220px 1fr;gap:14px;padding:9px 12px;border-bottom:1px solid var(--line)}
.vc-cmp .vc-row{display:grid;grid-template-columns:190px 1fr 24px 1fr;gap:12px;align-items:start;padding:9px 12px;border-bottom:1px solid var(--line)}
.vc-cmp .vc-row.head{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut2);border-bottom:2px solid var(--line2)}
.vc-row.ch{background:rgba(245,158,11,.10);border-radius:8px}
.vc-k{color:var(--mut);font-weight:600}
.vc-v,.vc-before,.vc-after{word-break:break-word;white-space:pre-wrap;min-width:0}
.vc-row.ch .vc-before{color:var(--bad)}
.vc-row.ch .vc-after{color:var(--ok);font-weight:600}
.vc-arrow{color:var(--mut2);text-align:center}
/* The compare / snapshot modal is wider than a normal dialog so before → after fits comfortably. */
.overlay:has(.vc-cmp) .modal,.overlay:has(.vc-list) .modal{width:min(900px,96vw)}
.diff-row.changed{background:rgba(245,158,11,.08)}
.diff-row.changed.new{background:rgba(34,197,94,.09)}

/* ── Drawer / modal / toast ─────────────────────────────────────────────── */
.drawer{position:fixed;top:0;right:0;width:392px;height:100vh;background:var(--panel);border-left:1px solid var(--line);box-shadow:-12px 0 40px -12px rgba(0,0,0,.4);z-index:30;display:flex;flex-direction:column;animation:slidein .25s var(--ease)}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.drawer[hidden],.drawer-reopen[hidden]{display:none}
.drawer-head{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--line)}
.drawer-head b{flex:1;font-size:15px}
.drawer-list{overflow-y:auto;padding:10px}
.drawer-reopen{position:fixed;top:50%;right:0;transform:translateY(-50%);width:28px;height:64px;display:grid;place-items:center;background:var(--panel);color:var(--txt);border:1px solid var(--line2);border-right:none;border-radius:12px 0 0 12px;box-shadow:var(--shadow);cursor:pointer;font-size:20px;line-height:1;z-index:29;transition:color .15s,border-color .15s}
.drawer-reopen:hover{border-color:var(--acc);color:var(--acc)}
.notif{padding:13px;border-radius:12px;border:1px solid var(--line);margin:7px 4px;background:var(--panel2);transition:border-color .15s}
.notif.unread{border-color:var(--acc);background:rgba(99,102,241,.08)}
.notif b{font-size:13px} .notif small{display:block;color:var(--mut);margin-top:3px}
#modalHost .overlay{position:fixed;inset:0;background:rgba(2,6,18,.6);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:40;animation:fadein .2s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);width:min(560px,92vw);max-height:88vh;overflow:auto;box-shadow:0 24px 70px -16px rgba(0,0,0,.55);animation:modalpop .24s var(--ease)}
@keyframes modalpop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:17px;font-weight:700}
.modal-body{padding:22px}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line2);color:var(--txt);padding:13px 20px;border-radius:13px;box-shadow:var(--shadow);z-index:60;font-weight:600;animation:toastup .3s var(--ease)}
@keyframes toastup{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}

/* ── Auth gate (login / sign-up / reset) ────────────────────────────────── */
.auth-gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -14%,rgba(99,102,241,.20),transparent),var(--bg)}
.auth-gate[hidden]{display:none}
.auth-card{width:100%;max-width:392px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 30px 80px -20px rgba(0,0,0,.5);padding:34px 30px;animation:modalpop .35s var(--ease)}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:18px}
.auth-brand .logo{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:var(--grad);color:#fff;font-size:24px;box-shadow:0 10px 26px -6px rgba(99,102,241,.6);margin-bottom:10px}
.auth-brand b{font-size:18px;font-weight:800} .auth-brand small{font-size:11px;color:var(--mut)}
.auth-card h3{margin:8px 0 18px;font-size:19px;text-align:center;font-weight:800}
.auth-sub{color:var(--mut);font-size:12.5px;text-align:center;margin:-10px 0 16px}
.auth-submit{width:100%;justify-content:center;margin-top:10px}
.auth-links{display:flex;justify-content:space-between;margin-top:16px;font-size:13px}
.auth-msg{padding:10px 13px;border-radius:11px;font-size:13px;margin-bottom:13px}
.auth-msg.err{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.28)}
.auth-msg.ok{background:rgba(34,197,94,.12);color:#34d399;border:1px solid rgba(34,197,94,.28)}
.auth-msg.warn{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
.auth-busy{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 0;color:var(--mut)}
.auth-note{text-align:center;color:var(--mut)} .auth-note h3{margin-top:0} .auth-note code{background:var(--chip);padding:1px 6px;border-radius:6px;color:var(--txt);font-size:12px}
.spin{width:28px;height:28px;border:3px solid var(--line2);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.notice{background:var(--chip);border:1px solid var(--line2);border-radius:12px;padding:11px 14px;margin-bottom:14px;color:var(--mut);font-size:13px}
.notice.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3);color:var(--warn)}
.grid.cols-5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
#signOutBtn{font-size:14px}
.auth-or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--mut2);font-size:12px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--panel2);border:1px solid var(--line2);color:var(--txt);font-weight:600;padding:11px;border-radius:12px;cursor:pointer;min-height:46px;transition:border-color .15s,background .15s}
.auth-google:hover{border-color:var(--acc);background:var(--hover)}
.auth-google svg{flex:0 0 auto}
.link{background:none;border:none;color:var(--acc);cursor:pointer;font-weight:600;font-size:13px}
.link:hover{color:var(--acc2)}
.muted{color:var(--mut)}
.empty{padding:48px;text-align:center;color:var(--mut)}
.bar{height:8px;border-radius:8px;background:var(--panel2);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--grad);border-radius:8px;transition:width .4s var(--ease)}
.kvlist{display:grid;gap:8px}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)} .kv b{font-weight:600}
.timeline{position:relative;padding-left:18px} .timeline .ev{position:relative;padding:0 0 16px 16px;border-left:2px solid var(--line2)}
.timeline .ev::before{content:"";position:absolute;left:-6px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px var(--panel)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chat{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;max-height:380px;overflow:auto}
.msg{margin:8px 0;display:flex;gap:8px} .msg .who{font-size:11px;color:var(--mut);width:64px;flex-shrink:0;padding-top:3px} .msg .bub{background:var(--bubble);border-radius:12px;padding:9px 13px;flex:1}
.msg.ai .bub{background:rgba(99,102,241,.12)}

/* ── Voice Training (live hands-free call + owner mode) ─────────────────── */
.voice-train{display:grid;gap:16px}
.vt-call{display:flex;flex-direction:column;gap:14px}
.vt-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mode-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:7px 15px;border-radius:20px;border:1px solid var(--line2)}
.mode-badge.order{background:rgba(14,165,233,.14);color:var(--info);border-color:rgba(14,165,233,.4)}
.mode-badge.owner{background:rgba(124,92,255,.16);color:#b6a4ff;border-color:rgba(124,92,255,.5)}
.vt-status-row{display:flex;align-items:center;gap:10px;font-size:13px}
.mic-dot{width:10px;height:10px;border-radius:50%;background:var(--mut2);display:inline-block;flex-shrink:0}
.mic-dot.live{background:var(--ok);box-shadow:0 0 0 4px rgba(34,197,94,.16)}
.mic-dot.on{background:var(--bad);box-shadow:0 0 0 4px rgba(239,68,68,.18);animation:pulse 1s ease-in-out infinite}
.mic-dot.pulse{background:var(--warn);animation:pulse 1.2s ease-in-out infinite}
.mic-dot.speak{background:var(--acc);box-shadow:0 0 0 4px rgba(99,102,241,.18);animation:pulse .8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.7}}
.vt-code-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 15px;border-radius:13px;background:rgba(124,92,255,.08);border:1px solid rgba(124,92,255,.35)}
.ownerchip{margin-left:6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:8px;background:rgba(124,92,255,.2);color:#b6a4ff}
.vt-msg.owner .bub{background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.28)}
.vt-msg.ai.owner .bub{background:rgba(124,92,255,.16)}
.vt-msg.partial .bub{opacity:.6;font-style:italic;border:1px dashed var(--line2)}
.vt-tx-list{display:flex;flex-direction:column;gap:8px}
.vt-tx{background:var(--panel2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.vt-tx>summary{padding:11px 14px;cursor:pointer;display:flex;gap:10px;align-items:center;list-style:none}
.vt-tx>summary::-webkit-details-marker{display:none}
.vt-tx>summary::before{content:"▸";color:var(--mut);font-size:11px;transition:transform .15s}
.vt-tx[open]>summary::before{transform:rotate(90deg)}
.vt-tx-body{padding:6px 14px 14px 28px;display:flex;flex-direction:column;gap:5px;border-top:1px dashed var(--line)}
.vt-log{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;min-height:240px;max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.vt-msg{display:flex;gap:10px;align-items:flex-start}
.vt-msg .who{font-size:11px;color:var(--mut);width:88px;flex-shrink:0;padding-top:6px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.vt-msg .bub{background:var(--bubble);border-radius:12px;padding:10px 14px;flex:1;line-height:1.45;font-size:13.5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.vt-msg.ai .bub{background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.25)}
.vt-msg.corr .bub{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3)}
.vt-msg .bub .btn.sm{margin-left:auto}
.vt-sys{text-align:center;font-size:12px;color:var(--ok);padding:7px;border-radius:9px;background:rgba(34,197,94,.08);border:1px dashed rgba(34,197,94,.3)}
.vt-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.vt-mic{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;background:var(--grad);border:none;color:#fff;padding:15px 26px;border-radius:36px;cursor:pointer;font-weight:700;font-size:14px;box-shadow:0 6px 20px -4px rgba(99,102,241,.5);user-select:none;-webkit-user-select:none;transition:transform .08s,box-shadow .15s}
.vt-mic:active,.vt-mic.rec{transform:scale(.97);box-shadow:0 0 0 6px rgba(239,68,68,.18),0 4px 16px rgba(239,68,68,.35);background:linear-gradient(135deg,#ff6b6b,#ff8e53)}
.vt-mic-ic{font-size:18px}
.vt-actions{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.vt-actions .btn{min-width:110px}
.vt-actions .vt-stop{background:rgba(245,158,11,.12);border-color:var(--warn);color:var(--warn)}
.vt-actions .vt-stop:disabled{color:var(--mut2);border-color:var(--line2);background:var(--panel2)}
.btn.playing{background:rgba(99,102,241,.2);border-color:var(--acc);color:var(--acc)}
.vt-saved-list{display:flex;flex-direction:column;gap:10px}
.vt-saved-row{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:13px 15px}
.vt-saved-head{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.vt-saved-meta{flex:1;min-width:280px;display:flex;flex-direction:column;gap:4px}
.vt-line{font-size:13px}
.vt-line .who{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-right:6px}
.vt-line .who.bad{color:var(--bad)} .vt-line .who.ok{color:var(--ok)}
/* ✎ per-line "fix this reply" — quiet until the line is hovered so the transcript stays readable */
.vt-line .fixline{font-size:11px;padding:1px 7px;margin-left:6px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--mut);cursor:pointer;opacity:0;transition:opacity .12s}
.vt-line:hover .fixline{opacity:1}
.vt-line .fixline:hover{color:var(--acc);border-color:var(--acc)}

/* ── "✓ the agent learned this" confirmation card (USED TO → NOW) + 📖 timeline rows ── */
.learn-card{margin-top:8px;border:1px solid rgba(22,163,74,.35);border-radius:10px;padding:9px 12px;background:rgba(22,163,74,.06);font-size:12.5px}
.learn-card.noop{border-color:rgba(128,128,128,.3);background:rgba(128,128,128,.07)}
.learn-head{font-weight:700;color:#16a34a;margin-bottom:4px;font-size:12.5px}
.learn-before{color:#b45309;opacity:.9;white-space:pre-wrap;text-decoration:line-through;text-decoration-color:rgba(180,131,9,.55)}
.learn-after{color:#16a34a;font-weight:600;white-space:pre-wrap}

/* ── 🗣️ Talk-to-agent panel: Draft/Live × Text/Voice toggles + the target banner ── */
.talk-seg{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.talk-opt{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;transition:background .12s,border-color .12s}
.talk-opt.on{background:#6366f1;color:#fff;border-color:#6366f1}
.talk-opt.on.live{background:#16a34a;border-color:#16a34a}
.talk-opt.blocked{opacity:.45}
.talk-note{font-size:11.5px;border-radius:8px;padding:6px 10px;line-height:1.45}
.talk-note.draft{background:rgba(180,131,9,.08);border:1px solid rgba(180,131,9,.28);color:#b45309}
.talk-note.live{background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.4);color:#16a34a;font-weight:600}
.vt-saved-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}

/* ── Menu Validation (categories → items → variants + modifiers + dips) ─── */
.menu-cats{display:flex;flex-direction:column;gap:12px}
.menu-cat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.menu-cat>summary{padding:14px 18px;cursor:pointer;font-size:14px;list-style:none;display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,rgba(99,102,241,.08),transparent);border-bottom:1px solid transparent;transition:border-color .15s}
.menu-cat>summary::-webkit-details-marker{display:none}
.menu-cat>summary::before{content:"▸";color:var(--mut);font-size:11px;transition:transform .15s}
.menu-cat[open]>summary::before{transform:rotate(90deg)}
.menu-cat[open]>summary{border-bottom-color:var(--line)}
.menu-cat .muted{font-weight:500;font-size:12px}
.menu-items{display:flex;flex-direction:column}
.menu-item{border-bottom:1px solid var(--line)}
.menu-item:last-child{border-bottom:none}
.menu-item>summary{padding:12px 18px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none}
.menu-item>summary::-webkit-details-marker{display:none}
.menu-item>summary::before{content:"▸";color:var(--mut);font-size:10px;margin-right:6px;transition:transform .15s}
.menu-item[open]>summary::before{transform:rotate(90deg)}
.menu-item[data-leaf="1"]>summary{cursor:default}
.menu-item[data-leaf="1"]>summary::before{visibility:hidden}
.menu-item:hover>summary{background:var(--rowhover)}
.mi-main{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.mi-main b{font-size:13.5px}
.mi-main small{font-weight:400;font-size:12px}
.mi-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mi-price{font-size:14px;color:var(--txt);font-weight:600}
.veg-dot,.nonveg-dot{width:13px;height:13px;border:1.5px solid var(--ok);display:inline-grid;place-items:center;flex-shrink:0;border-radius:3px}
.veg-dot::after{content:"";width:6px;height:6px;background:var(--ok);border-radius:50%}
.nonveg-dot{border-color:var(--bad)}
.nonveg-dot::after{content:"";width:6px;height:6px;background:var(--bad)}
.chip-sm{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:8px;background:var(--chip);color:var(--mut);text-transform:capitalize}
/* Call History source badge — phone / browser / training + a distinct owner-training chip */
.src-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--chip);color:var(--mut);white-space:nowrap}
.src-badge.phone{background:rgba(34,197,94,.15);color:var(--ok)}
.src-badge.browser{background:rgba(14,165,233,.15);color:var(--info)}
.src-badge.api{background:var(--chip2);color:var(--mut)}
.src-badge.owner{background:rgba(124,92,255,.2);color:#b6a4ff}
.mi-body{padding:8px 18px 16px 40px;background:var(--panel2);border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:14px}
.mi-block h5{margin:6px 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);font-weight:700}
.mi-vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.mi-var{display:flex;justify-content:space-between;padding:7px 12px;border-radius:9px;background:var(--chip);font-size:12.5px}
.mi-grp{padding:8px 0;border-top:1px dashed var(--line)}
.mi-grp:first-child{border-top:none}
.mi-grp-head{display:flex;gap:8px;align-items:center;margin-bottom:6px;font-size:12.5px}
.mi-grp-opts{display:flex;gap:6px;flex-wrap:wrap}

/* ── Training layout: workspace (left) + live menu (right) ──────────────── */
.train-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.train-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.train-main.voice-train{display:flex}
.menu-side{align-self:start;position:sticky;top:90px;max-height:calc(100vh - 112px);overflow:auto;min-width:0}
.menu-side h3{font-size:13px}
.menu-panel .menu-cats{gap:8px}
.menu-panel .menu-cat>summary{padding:11px 13px;font-size:13px}
.menu-panel .menu-item>summary{padding:10px 13px}
.menu-mini-stats{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--mut);margin-bottom:10px}
.menu-mini-stats b{color:var(--txt);font-weight:700}
@media(max-width:1100px){.train-layout{grid-template-columns:1fr}.menu-side{position:static;max-height:none;order:-1}}

/* ── Call-flow segment editor (Persona · Rules · Say · Voice) ───────────── */
.cf-card{display:flex;flex-direction:column}
.cf-seg{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--panel2);overflow:hidden}
.cf-seg>summary{padding:12px 15px;cursor:pointer;display:flex;align-items:center;gap:9px;list-style:none}
.cf-seg>summary::-webkit-details-marker{display:none}
.cf-seg>summary::before{content:"▸";color:var(--mut);font-size:11px;transition:transform .15s}
.cf-seg[open]>summary::before{transform:rotate(90deg)}
.cf-seg[open]>summary{border-bottom:1px solid var(--line)}
.cf-seg>summary b{font-size:13.5px}
.cf-ic{width:18px;text-align:center}
.cf-seg-body{padding:13px 15px}
.cf-seg-body label.fld{margin-bottom:10px}
.cf-seg-body label.fld:last-child{margin-bottom:0}
.cf-applied>summary{cursor:pointer;font-size:13px;padding:6px 0;list-style:none}
.cf-applied>summary::-webkit-details-marker{display:none}
.cf-applied>summary::before{content:"▸";color:var(--mut);font-size:11px;margin-right:6px;transition:transform .15s;display:inline-block}
.cf-applied[open]>summary::before{transform:rotate(90deg)}
.cf-preview{padding-top:10px}
.cf-preview-label{font-size:12px;color:var(--mut);margin:4px 0 6px;font-weight:600}
.cf-amend{white-space:pre-wrap;word-break:break-word;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:11px 13px;font-size:12px;line-height:1.5;max-height:300px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--txt);margin:0}

/* ── Responsive: sidebar slides off-canvas on narrow screens ────────────── */
@media(max-width:880px){
  #app,#app.nav-collapsed{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:264px;z-index:45;transform:translateX(-100%);transition:transform .25s var(--ease)}
  .sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.4)}
  .view{padding:20px 16px}
  .topbar{padding:0 16px}
  .nav-burger{display:grid}
  .nav-toggle{display:none}
  /* the mobile drawer is full-width — never render the collapsed icon-only look even if it was toggled on desktop */
  #app.nav-collapsed .brandmark{justify-content:flex-start;padding:18px 14px 12px}
  #app.nav-collapsed .brandmark .bm-text,#app.nav-collapsed .nav-group,#app.nav-collapsed .nav-item>*,
  #app.nav-collapsed .side-brand .brand-select,#app.nav-collapsed .side-foot>*{display:revert}
  #app.nav-collapsed .side-brand{padding:4px 14px 10px}
  #app.nav-collapsed .brand-badge{display:none}
  #app.nav-collapsed #nav{padding:8px 12px}
  #app.nav-collapsed .nav-item{justify-content:flex-start;padding:9px 12px}
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 2 — per-page polish. Pages are scoped via [data-module="<key>"] on
   #view (set by render() in portal.js). Still pure CSS — no markup/logic
   change; every selector below uses class hooks portal.js already emits.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Semantic status tags ─────────────────────────────────────────────────
   tag(s) renders class = s.toLowerCase(), so a status word becomes a class.
   These states were previously uncoloured (neutral grey) — map each to a
   meaning so Call History outcomes, account status, index status, etc. read
   their state at a glance across every table and badge. */
.tag.active,.tag.completed,.tag.indexed,.tag.enabled,.tag.live{background:rgba(34,197,94,.15);color:var(--ok)}
.tag.pending,.tag.abandoned,.tag.processing,.tag.indexing{background:rgba(245,158,11,.15);color:var(--warn)}
.tag.error,.tag.failed{background:rgba(239,68,68,.15);color:var(--bad)}
.tag.open,.tag.in,.tag.queued{background:rgba(14,165,233,.15);color:var(--info)}
.tag.disabled{background:var(--chip2);color:var(--mut2)}

/* ── Numeric alignment: KPI + key/value figures line up cleanly ── */
.stat .v,.kv b,.menu-mini-stats b,.table-wrap td{font-variant-numeric:tabular-nums}
.stat .bar{margin-top:12px}

/* ── Empty states read as intentional zero-states, not stray text ── */
.empty{border:1px dashed var(--line2);border-radius:var(--radius);background:var(--panel2)}
.card .empty{background:transparent}

/* ── Action tables: keep the per-row button cluster tidy & wrap-safe ── */
.table-wrap td.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ── Dashboard: accent the lead KPI + turn Quick actions into a launchpad ── */
[data-module="dashboard"] .stat.accent .v{color:var(--acc2)}
[data-module="dashboard"] .grid.cols-2 .card .grid .btn{width:100%;justify-content:flex-start;min-height:46px;font-size:14px}

/* ── Agent Templates: equal-height gallery cards, actions pinned to the foot ── */
[data-module="templates"] .grid.cols-3{align-items:stretch}
[data-module="templates"] .tpl-card{display:flex;flex-direction:column}
[data-module="templates"] .tpl-card > .row:last-child{margin-top:auto;padding-top:8px}

/* ── Test Playground: roomier conversation surface ── */
[data-module="playground"] .chat{min-height:320px}

/* ── Call History: emphasise the live-poll pill ── */
[data-module="calls"] .page-head .tag{font-weight:700}

/* ── Responsive: collapse every fixed grid fully on small screens ── */
@media(max-width:720px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4,.grid.cols-5{grid-template-columns:1fr}
  .diff,.train-layout{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 3 — remaining pages: data tables, list feeds & long forms.
   Still pure CSS, scoped via [data-module="<key>"]. No markup/logic change.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sticky table headers on the long data-list pages ─────────────────────
   The .table-wrap becomes its own scroll container (max-height + overflow),
   so the column header stays pinned while a long history scrolls. th already
   carries an opaque background, so rows slide cleanly underneath it. Short
   tables stay un-scrolled (max-height is only a cap). */
[data-module="calls"] .table-wrap,
[data-module="audit"] .table-wrap,
[data-module="versions"] .table-wrap,
[data-module="knowledge"] .table-wrap,
[data-module="training"] .table-wrap,
[data-module="outlets"] .table-wrap,
[data-module="sms"] .table-wrap,
[data-module="models"] .table-wrap,
[data-module="users"] .table-wrap{max-height:calc(100vh - 240px);overflow:auto}
[data-module="calls"] .table-wrap thead th,
[data-module="audit"] .table-wrap thead th,
[data-module="versions"] .table-wrap thead th,
[data-module="knowledge"] .table-wrap thead th,
[data-module="training"] .table-wrap thead th,
[data-module="outlets"] .table-wrap thead th,
[data-module="sms"] .table-wrap thead th,
[data-module="models"] .table-wrap thead th,
[data-module="users"] .table-wrap thead th{position:sticky;top:0;z-index:1}

/* ── Notifications: tidy single-column feed with a hover affordance ── */
[data-module="notifications"] .grid{gap:10px}
[data-module="notifications"] .notif{transition:border-color .15s var(--ease),transform .12s var(--ease)}
[data-module="notifications"] .notif:hover{border-color:var(--line2);transform:translateX(2px)}

/* ── Form-heavy pages (Brand Configuration · AI Agent): comfortable reading,
      roomier multi-line instruction fields ── */
[data-module="agent"] .fld textarea.input{min-height:88px}
[data-module="agent"] .card h3,[data-module="brand"] .card h3{letter-spacing:-.1px}

/* ── AI Models / Outlets / Knowledge: anchor the primary name cell ── */
[data-module="models"] .table-wrap td:first-child,
[data-module="outlets"] .table-wrap td:first-child,
[data-module="knowledge"] .table-wrap td:first-child{color:var(--txt)}

/* ── Version Control compare modal: lead the eye to what changed ── */
.overlay .modal .vc-row:not(.ch) .vc-before{color:var(--mut2)}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 4 — visual glow-up. Makes the premium redesign unmistakable in BOTH
   themes (the dark base palette was near-identical to the old portal, so the
   refresh read as "subtle" — this adds depth, colour and life). Pure CSS.
   ════════════════════════════════════════════════════════════════════════ */

/* Page depth: a soft brand-tinted wash behind the content area */
.main{background:radial-gradient(1000px 420px at 100% -8%,rgba(99,102,241,.07),transparent)}

/* ── Sidebar: icons live in soft rounded tiles; active item glows ── */
.nav-item .ni-ic{width:30px;height:30px;display:inline-grid;place-items:center;border-radius:9px;background:var(--chip);font-size:14px;flex:0 0 auto;opacity:1;transition:background .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease)}
.nav-item:hover .ni-ic{background:var(--chip2);transform:translateY(-1px)}
.nav-item.active{box-shadow:0 6px 18px -8px rgba(99,102,241,.55)}
.nav-item.active .ni-ic{background:var(--grad);color:#fff;box-shadow:0 4px 12px -3px rgba(99,102,241,.6)}
.brandmark .logo{transition:transform .2s var(--ease)}
.sidebar:hover .brandmark .logo{transform:rotate(-6deg) scale(1.05)}

/* ── Cards lift on hover for a tactile, alive feel ── */
.card{transition:border-color .18s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.card:hover{box-shadow:var(--shadow)}

/* ── Dashboard KPI strip: each metric its own colour + a badge icon ──────────
   Turns a row of grey tiles into a vivid, scannable dashboard header. */
[data-module="dashboard"] .grid.cols-4 .stat{padding-left:22px;overflow:hidden}
[data-module="dashboard"] .grid.cols-4 .stat .ic{top:18px;right:18px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-size:20px;opacity:1;background:var(--chip)}
[data-module="dashboard"] .grid.cols-4 .stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(1){background:linear-gradient(135deg,rgba(99,102,241,.12),var(--panel))}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(2){background:linear-gradient(135deg,rgba(34,197,94,.12),var(--panel))}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(3){background:linear-gradient(135deg,rgba(245,158,11,.12),var(--panel))}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(4){background:linear-gradient(135deg,rgba(14,165,233,.12),var(--panel))}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(1)::after{background:linear-gradient(180deg,#6366F1,#818CF8)}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(2)::after{background:#22C55E}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(3)::after{background:#F59E0B}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(4)::after{background:#0EA5E9}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(1) .ic{background:rgba(99,102,241,.18);color:#818CF8}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(2) .ic{background:rgba(34,197,94,.18);color:#22C55E}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(3) .ic{background:rgba(245,158,11,.18);color:#F59E0B}
[data-module="dashboard"] .grid.cols-4 .stat:nth-child(4) .ic{background:rgba(14,165,233,.18);color:#0EA5E9}
[data-module="dashboard"] .grid.cols-4 .stat .v{font-size:36px}

/* ── Primary buttons get a livelier hover lift everywhere ── */
.btn.primary{transition:filter .15s,box-shadow .2s var(--ease),transform .12s var(--ease)}
.btn.primary:hover{transform:translateY(-1px)}

/* ── Section headings: a small gradient tick anchors each card title ──
   (kept off form-field labels and modal heads to avoid noise) ── */
.view .card > h3:first-child{position:relative;padding-left:12px}
.view .card > h3:first-child::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:3px;background:var(--grad)}

/* ════════════════════════════════════════════════════════════════════════
   CONVERSATION SEGMENTS — collapsible smart editor (Voice Training)
   Icon-rail (72px) ⇄ expanded (240px) on hover/click + a large editor panel.
   ════════════════════════════════════════════════════════════════════════ */
.cs-wrap{padding:0;overflow:hidden}
.cs-wrap > h3:first-child::before{display:none}   /* the panel has its own header bar */
.cs-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cs-status{font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;background:var(--chip);color:var(--mut);white-space:nowrap}
.cs-status.saving{background:rgba(245,158,11,.15);color:var(--warn)}
.cs-status.saved{background:rgba(34,197,94,.15);color:var(--ok)}
.cs-status.failed{background:rgba(239,68,68,.15);color:var(--bad)}
.cs-body{display:flex;align-items:stretch;min-height:440px;position:relative}

/* Rail */
.cs-rail{flex:0 0 72px;width:72px;display:flex;flex-direction:column;gap:4px;padding:12px 10px;border-right:1px solid var(--line);background:var(--panel2);overflow:hidden;transition:width .22s var(--ease),flex-basis .22s var(--ease)}
.cs-rail:hover,.cs-rail.open{flex-basis:240px;width:240px}
.cs-rail-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:11px;background:transparent;color:var(--mut);cursor:pointer;font:inherit;font-weight:600;font-size:13.5px;text-align:left;white-space:nowrap;overflow:hidden;transition:background .15s var(--ease),color .15s var(--ease)}
.cs-rail-item:hover{background:var(--hover);color:var(--txt)}
.cs-rail-item.active{background:linear-gradient(90deg,rgba(99,102,241,.20),rgba(129,140,248,.06));color:var(--txt)}
.cs-rail-item.active .cs-ic{background:var(--grad);color:#fff;box-shadow:0 4px 12px -3px rgba(99,102,241,.6)}
.cs-ic{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--chip);font-size:18px;transition:background .15s var(--ease)}
.cs-rail-label{opacity:0;transition:opacity .18s var(--ease)}
.cs-rail:hover .cs-rail-label,.cs-rail.open .cs-rail-label{opacity:1}

/* Editor */
.cs-editor{flex:1 1 auto;min-width:0;padding:20px 22px;display:flex;flex-direction:column;gap:14px;overflow:auto}
.cs-empty{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--mut);padding:40px}
.cs-empty-ic{font-size:38px;opacity:.5;margin-bottom:4px}
.cs-empty b{color:var(--txt);font-size:16px}
.cs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cs-head h4{margin:0 0 2px;font-size:17px;font-weight:700}
.cs-field{display:block}
.cs-field>span{display:block;color:var(--mut);font-size:12px;margin-bottom:6px;font-weight:600}
.cs-ta{width:100%;resize:vertical;line-height:1.6}
.cs-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--mut)}

/* Conversation big editor: line-number gutter + monospace area + find/undo/redo */
.cs-find{display:flex;gap:8px;align-items:center}
.cs-find .input{flex:1}
.cs-code{display:flex;border:1px solid var(--line2);border-radius:var(--radius-sm);overflow:hidden;background:var(--panel2);min-height:320px}
.cs-gutter{margin:0;padding:14px 8px 14px 12px;text-align:right;color:var(--mut2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;white-space:pre;overflow:hidden;user-select:none;background:var(--panel);border-right:1px solid var(--line);min-width:42px}
.cs-codearea{flex:1;min-width:0;border:0;outline:none;resize:vertical;background:transparent;color:var(--txt);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.5;padding:14px;min-height:320px;white-space:pre;overflow:auto}
.cs-docs{overflow:auto;max-height:60vh}

/* Responsive: tablet → expanded rail overlays the editor; mobile → horizontal icon strip on top */
@media(max-width:1024px){
  .cs-rail.open,.cs-rail:hover{position:absolute;left:0;top:0;bottom:0;z-index:6;box-shadow:8px 0 24px -10px rgba(0,0,0,.4)}
}
@media(max-width:640px){
  .cs-body{flex-direction:column;min-height:0}
  .cs-rail,.cs-rail:hover,.cs-rail.open{flex-basis:auto;width:100%;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);position:static;box-shadow:none}
  .cs-rail-label{display:none}
  .cs-rail-item{width:auto}
}

/* ════════════════════════════════════════════════════════════════════════
   AI COPILOT WORKSPACE — Chat Training (ChatGPT/Claude-style)
   3-zone: copilot chat (center) + Conversation Segments (right) + pairs drawer (bottom).
   ════════════════════════════════════════════════════════════════════════ */
.cp-wrap{display:flex;flex-direction:column;gap:18px}   /* Copilot chat on top (full width), Conversation Segments full-width BELOW — matches Voice Training */
.cp-main{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);min-height:460px;max-height:calc(100vh - 260px);overflow:hidden}
.cp-chat{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:16px}

/* Empty state */
.cp-empty{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 16px}
.cp-empty-ic{font-size:42px;margin-bottom:6px}
.cp-examples{list-style:none;margin:14px 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;text-align:left;color:var(--mut);font-size:13px;max-width:520px}
.cp-examples li{position:relative;padding-left:16px}
.cp-examples li::before{content:"•";position:absolute;left:2px;color:var(--acc)}
.cp-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.cp-chip{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);padding:8px 14px;border-radius:20px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;transition:border-color .15s,background .15s,transform .1s}
.cp-chip:hover{border-color:var(--acc);background:var(--hover);transform:translateY(-1px)}

/* Messages */
.cp-msg{display:flex;max-width:100%}
.cp-msg.user{justify-content:flex-end}
.cp-msg.ai{justify-content:flex-start}
.cp-msg .cp-bubble{max-width:88%;border-radius:16px;padding:12px 16px;font-size:14px;line-height:1.55}
.cp-msg.user .cp-bubble{background:var(--grad);color:#fff;border-bottom-right-radius:6px;max-width:min(560px,86%)}
/* AI bubble: content-sized up to a readable column — NOT full width (full-width grey bands looked odd on the wide layout). */
.cp-msg.ai .cp-bubble{background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:6px;max-width:min(760px,86%)}
.cp-typing{color:var(--mut);font-style:italic}
.cp-md > :first-child{margin-top:0}
.cp-md > :last-child{margin-bottom:0}
.cp-md p{margin:8px 0}
.cp-md h3{font-size:15px;margin:12px 0 6px} .cp-md h4{font-size:14px;margin:10px 0 5px}
.cp-md ul,.cp-md ol{margin:8px 0;padding-left:22px} .cp-md li{margin:3px 0}
.cp-md code{background:var(--chip);padding:1px 6px;border-radius:6px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.cp-md .cp-code{display:block;background:var(--chip);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;white-space:pre-wrap;margin:8px 0}
.cp-md a{color:var(--acc)}
.cp-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}

/* Prompt bar (stays visible at the foot of the workspace) */
.cp-bar{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--panel)}
.cp-input{flex:1;min-width:0;resize:none;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);color:var(--txt);font:inherit;font-size:14px;line-height:1.5;padding:11px 14px;max-height:160px;outline:none;transition:border-color .15s,box-shadow .15s}
.cp-input:focus{border-color:var(--acc);box-shadow:var(--ring);background:var(--panel)}
.cp-icon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;border:1px solid var(--line2);background:var(--panel);color:var(--mut);font-size:16px;cursor:pointer}
.cp-icon:disabled{opacity:.5;cursor:not-allowed}
.cp-send{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:none;background:var(--grad);color:#fff;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px -5px rgba(99,102,241,.6);transition:filter .15s,transform .1s}
.cp-send:hover{filter:brightness(1.08)} .cp-send:active{transform:scale(.94)}

/* Training-pairs drawer (collapsed bar → slide-up body) */
.cp-drawer{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.cp-drawer-bar{width:100%;display:flex;align-items:center;gap:10px;padding:14px 18px;border:0;background:transparent;color:var(--txt);font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-align:left}
.cp-drawer-bar:hover{background:var(--hover)}
.cp-drawer-caret{display:inline-block;color:var(--mut);transition:transform .2s var(--ease)}
.cp-drawer.open .cp-drawer-caret{transform:rotate(90deg)}
.cp-drawer-count{margin-left:auto;font-size:11px;font-weight:700;background:var(--chip);color:var(--mut);border-radius:20px;padding:2px 9px}
.cp-drawer-body{max-height:0;overflow:hidden;transition:max-height .25s var(--ease)}
.cp-drawer.open .cp-drawer-body{max-height:70vh;overflow:auto;padding:0 18px 18px}

/* Responsive: tablet → segments stack below; mobile → tighter */
@media(max-width:1024px){ .cp-wrap{grid-template-columns:1fr} .cp-main{max-height:none;min-height:480px} }
@media(max-width:640px){ .cp-chat{padding:16px} .cp-examples{grid-template-columns:1fr} .cp-msg .cp-bubble{max-width:100%} }

/* Agent Training: the live test-call panel slides in from the right beside the chat */
.vt-slide-in{animation:vtSlideIn .28s ease}
@keyframes vtSlideIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}

/* Agent Training: fixed-height workspace — the PAGE never scrolls; the chat (and strip) scroll internally so the
   composer is always visible at the bottom. 72px topbar + view padding ≈ 132px of chrome. */
.training-fixed{display:flex;flex-direction:column;height:calc(100vh - 132px);min-height:480px}
.training-fixed>*{flex:0 0 auto}
.training-fixed .cp-wrap{flex:1 1 auto;min-height:0}
.training-fixed .cp-main{max-height:none;min-height:0;height:auto}
.training-fixed #vtSide{min-height:0}
.training-fixed #brainStrip .card{max-height:30vh;overflow-y:auto}
@media(max-width:1024px){ .training-fixed{height:auto;min-height:0} .training-fixed .cp-main{max-height:calc(100vh - 220px);min-height:420px} }

/* Agent Training scroll lock — chat-app layout with NO magic numbers: chain height/overflow from the viewport
   down so ONLY the chat pane scrolls and the composer is always visible. Toggled on <body> by render(). */
body.training-lock{overflow:hidden;height:100vh}
body.training-lock #app{height:100vh;min-height:0;overflow:hidden}
body.training-lock .main{height:100vh;min-height:0;overflow:hidden}
body.training-lock .view{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;animation:none}
body.training-lock .training-fixed{flex:1 1 auto;min-height:0;height:auto}

/* CRUX of the pinned composer: the chat/panel row must be a SINGLE flex line (nowrap). With flex-wrap:wrap a
   line's height follows its tallest item's CONTENT, so .cp-main blew past its parent and the chat never scrolled.
   nowrap → items stretch to the row's bounded height → #cpChat scrolls, composer stays put. */
.training-fixed .cp-wrap{flex-wrap:nowrap}
@media(max-width:1024px){
  /* small screens: give up the app-style lock — normal page flow, panel wraps below the chat */
  body.training-lock{overflow:auto;height:auto}
  body.training-lock #app{height:auto;min-height:100vh;overflow:visible}
  body.training-lock .main{height:auto;overflow:visible}
  body.training-lock .view{overflow:visible;display:block}
  .training-fixed .cp-wrap{flex-wrap:wrap}
}

/* Sidebar build stamp. Deliberately quiet — it is reference information, not something to read on every
   glance, and it must not compete with the nav. white-space:pre-line keeps the two services on their own
   lines from a single \n in the text. Hidden entirely when the sidebar is collapsed to icons. */
.side-ver{
  /* flex:1 0 100% claims a full row of its own — the parent's row-gap supplies the spacing, so the
     old margin-top would double it. pre-line keeps the portal/engine lines stacked; the parent's
     nowrap must NOT win here or both lines collapse into one and clip again. */
  flex:1 0 100%; margin-top:0; font-size:10px; line-height:1.35; opacity:.55;
  white-space:pre-line; font-variant-numeric:tabular-nums; letter-spacing:.2px;
}
.nav-collapsed .side-ver{ display:none; }