/* P1 Outbound — shared "sleek-minimal enterprise" POLISH layer (Path B visual pass). Loaded LAST on every
   surface (admin, agent, Mini App). Intentionally NON-STRUCTURAL: typography, focus, scrollbars, motion,
   selection — so it can't break any layout. The colour PALETTE is refined per-surface in each surface's own
   :root / body.dark token block (which respects that surface's light/dark structure). Theme-agnostic: every
   value here works on both dark and light. Tweak here = all three surfaces update at once. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

html { -webkit-text-size-adjust: 100%; }

/* ============================================================================
   SHARED DESIGN TOKEN CONTRACT — single source of truth. enterprise.css loads
   LAST on every surface (admin/agent/enroll+picker/miniapp), so these become
   the canonical accent/status/neutral/radius/elevation/spacing/type/motion
   values. Every consumer references them as var(--x, <literal-fallback>) so
   deleting this block restores prior behaviour (fully reversible). */
:root{
  /* ACCENT — one hue. Kills the #0a9fe0 vs #19a6ea drift. */
  --blue:#19a6ea; --blue-d:#0b86c4; --blue-l:#11303f; --grad:linear-gradient(135deg,var(--blue),var(--blue-d));
  /* STATUS — one value each, used by every surface (agent aliases --green:var(--ok)). */
  --green:#22c55e; --amber:#eab308; --red:#ef4444; --purple:#8b5cf6; --grey:#64748b;
  /* NEUTRAL SURFACE SCALE (dark) */
  --bg:#0a0d12; --bg2:#0d1117; --panel:#11151c; --panel2:#161b23; --bar:#0c0f15;
  /* INK + MUTED (--muted2 nudged to clear AA 4.5:1 for small labels on --panel) */
  --ink:#e9eef3; --muted:#99a5b1; --muted2:#7d8893;
  /* HAIRLINES — two weights */
  --line:#212832; --line2:#2b333d;
  /* RADIUS SCALE — controls=md, cards/panels/modals=lg, hero/cockpit=xl, pills=pill */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px; --radius:var(--r-lg);
  /* ELEVATION LADDER — soft layered shadow + 1px top-light, ONE depth language */
  --elev1:0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.30), 0 6px 16px -6px rgba(0,0,0,.40);
  --elev2:0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.32), 0 14px 34px -10px rgba(0,0,0,.50);
  --elev3:0 1px 0 rgba(255,255,255,.06), 0 18px 46px -12px rgba(0,0,0,.58);
  --elev4:0 1px 0 rgba(255,255,255,.07), 0 28px 70px -18px rgba(0,0,0,.66);
  --shadow:var(--elev2);                 /* legacy alias now consistent */
  --ring:0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb,var(--blue) 60%,transparent);
  /* SPACING — 4px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  /* TYPE — families + size/weight/lh scale */
  --font-display:'Sora','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono','SF Mono',Consolas,monospace;
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:28px;
  --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800; --lh-tight:1.2; --lh-body:1.55;
  /* MOTION — one easing + durations + an interactive recipe */
  --ease:cubic-bezier(.2,.8,.2,1); --dur-fast:.12s; --dur:.16s; --dur-slow:.24s;
  --t-interactive:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur-fast) var(--ease),opacity var(--dur) var(--ease);
  /* CONTROLS — brand accent on native checkbox/radio/range in one line */
  accent-color:var(--blue);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

/* Display font + tighter tracking on headings = the premium, Linear/Vercel feel. */
h1, h2, h3, h4 {
  font-family: 'Sora', 'IBM Plex Sans', system-ui, sans-serif;
  letter-spacing: -0.015em;
}

/* Snappy, consistent interaction feedback across every control (one motion recipe). */
a, button, select, input, textarea, .btn, .tab, .chip, .seg, .pill, .card, .panel, .btn4 {
  transition: var(--t-interactive, background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease, opacity 0.15s ease);
}
button:active, .btn:active, .tab:active, .chip:active { transform: translateY(0.5px); }

/* SOLE owner of the keyboard focus ring — one consistent ring on every surface
   (the admin.html duplicate is deleted). No border-radius override so each element
   keeps its own shape; box-shadow ring isn't clipped by overflow:hidden ancestors. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring, 0 0 0 2px var(--bg, #0a0d12), 0 0 0 4px color-mix(in srgb, var(--blue, #19a6ea) 60%, transparent));
}

/* Refined, unobtrusive scrollbars — a neutral mid-grey that reads on both dark and light. */
* { scrollbar-width: thin; scrollbar-color: rgba(135, 145, 158, 0.45) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(135, 145, 158, 0.40);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(135, 145, 158, 0.62); background-clip: content-box; }

::selection { background: rgba(25, 166, 234, 0.24); }

/* ============================================================================
   SHARED COMPONENT LAYER (Path B premium redesign). Additive + theme-agnostic
   (works on dark + agent's light), uses each surface's existing tokens, on NEW
   class names so it can't clash with a surface's own rules. */

/* Inline-SVG icons: <svg class="ic"><use href="#i-name"/></svg>. currentColor so
   an icon takes its parent's text colour; crisp optical sizing. */
.ic { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: -0.125em;
      fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ic--fill { fill: currentColor; stroke: none; }
.ic-lg { width: 1.25em; height: 1.25em; }
.ic-xl { width: 2em; height: 2em; }

/* Status pills / badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
         font: 600 11.5px/1 var(--font-body, system-ui); letter-spacing: .02em; text-transform: uppercase;
         border: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--panel) 70%, transparent); white-space: nowrap; }
.badge .ic { width: 12px; height: 12px; }
.badge.ok     { color: var(--green, #22c55e); border-color: color-mix(in srgb, var(--green, #22c55e) 38%, transparent); background: color-mix(in srgb, var(--green, #22c55e) 12%, transparent); }
.badge.warn   { color: var(--amber, #eab308); border-color: color-mix(in srgb, var(--amber, #eab308) 38%, transparent); background: color-mix(in srgb, var(--amber, #eab308) 12%, transparent); }
.badge.danger { color: var(--red, #ef4444);   border-color: color-mix(in srgb, var(--red, #ef4444) 38%, transparent);   background: color-mix(in srgb, var(--red, #ef4444) 12%, transparent); }
.badge.info   { color: var(--blue, #19a6ea);  border-color: color-mix(in srgb, var(--blue, #19a6ea) 38%, transparent);  background: color-mix(in srgb, var(--blue, #19a6ea) 12%, transparent); }
.badge.muted  { color: var(--muted2, var(--muted)); }
/* Legacy admin/rooms badge aliases, now token-based so those surfaces can drop
   their local .badge redefinitions and inherit this one canonical pill. */
.badge.run  { color: var(--green, #22c55e); border-color: color-mix(in srgb, var(--green, #22c55e) 38%, transparent); background: color-mix(in srgb, var(--green, #22c55e) 12%, transparent); }
.badge.pause{ color: var(--amber, #eab308); border-color: color-mix(in srgb, var(--amber, #eab308) 38%, transparent); background: color-mix(in srgb, var(--amber, #eab308) 12%, transparent); }
.badge.bad  { color: var(--red, #ef4444);   border-color: color-mix(in srgb, var(--red, #ef4444) 38%, transparent);   background: color-mix(in srgb, var(--red, #ef4444) 12%, transparent); }
.badge.ok2  { color: var(--blue, #19a6ea);  border-color: color-mix(in srgb, var(--blue, #19a6ea) 38%, transparent);  background: color-mix(in srgb, var(--blue, #19a6ea) 12%, transparent); }
/* Content-bearing badges (room/agent/campaign names, proper nouns) opt out of the
   status-pill UPPERCASE so server-supplied casing is preserved & long strings read. */
.badge--text  { text-transform: none; letter-spacing: 0; }

/* trunk-ready / down style pill with a leading dot or icon */
.statpill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px;
            font: 600 12px/1 var(--font-body, system-ui); border: 1px solid var(--line); color: var(--muted); background: var(--panel); }
.statpill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted2, var(--muted)); }
.statpill.ok   { color: var(--green, #22c55e); } .statpill.ok .dot   { background: var(--green, #22c55e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green, #22c55e) 22%, transparent); }
.statpill.down { color: var(--red, #ef4444); }   .statpill.down .dot { background: var(--red, #ef4444); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red, #ef4444) 22%, transparent); }

/* Responsive card grid (rooms, etc.) */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.room-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 12px);
             padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--elev1, 0 1px 2px rgba(0,0,0,.18)); }
.room-card:hover { border-color: color-mix(in srgb, var(--blue, #19a6ea) 45%, var(--line)); }
.room-card .rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.room-card .rc-title { font: 700 15px/1.2 var(--font-display, system-ui); display: flex; align-items: center; gap: 9px; }
.room-card .rc-id { color: var(--muted2, var(--muted)); font-weight: 600; font-size: 12px; }
.room-card .rc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 12.5px; }
.room-card .rc-actions { display: flex; gap: 8px; margin-top: 2px; }

/* Token alignment (CSS-only): repoint surface card/panel literals to the ONE
   elevation + radius language; normalise the rgba list dividers to a hairline. */
.card, .room-card, .rc-panel, .rc-tile { box-shadow: var(--elev1); border-radius: var(--r-lg, 14px); }
.swrow, .numrow, .aline { border-bottom-color: var(--line, #212832); }

/* Segmented radio group (SIP mode / inherit) */
.seg-radio { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2, var(--panel)); }
.seg-radio label { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 7px; cursor: pointer;
                   font: 600 13px/1 var(--font-body, system-ui); color: var(--muted); user-select: none; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio label:has(input:checked) { background: var(--panel); color: var(--ink); box-shadow: var(--elev1, 0 1px 2px rgba(0,0,0,.2)); }
.seg-radio label:has(input:focus-visible) { outline: 2px solid var(--blue, #19a6ea); outline-offset: 2px; }

/* Permissions / access-tier panel */
.tier-card { display: flex; flex-direction: column; gap: 2px; }
.tier-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.tier-row + .tier-row { margin-top: 8px; }
.tier-row .ic { color: var(--blue, #19a6ea); margin-top: 1px; }
.tier-row .tr-name { font: 700 13.5px/1.2 var(--font-display, system-ui); color: var(--ink); }
.tier-row .tr-desc { color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* Square icon-only action button */
.icon-btn-sm { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
               border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; padding: 0; }
.icon-btn-sm:hover { color: var(--ink); border-color: color-mix(in srgb, var(--blue, #19a6ea) 45%, var(--line)); }
.icon-btn-sm.danger:hover { color: var(--red, #ef4444); border-color: color-mix(in srgb, var(--red, #ef4444) 50%, var(--line)); }

/* Premium button primitive — ONE family with token radius/elevation/motion.
   New markup uses .btn4 (+ --primary/--ghost/--soft/--danger); existing buttons
   migrate incrementally, no markup churn required to ship the primitive. */
.btn4 { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
        font: var(--fw-bold, 700) var(--fs-sm, 13px)/1 var(--font-body, system-ui); border-radius: var(--r-md, 10px);
        padding: 0 14px; min-height: 38px; border: 1px solid var(--line); background: var(--panel2, var(--panel));
        color: var(--ink); box-shadow: var(--elev1, 0 1px 2px rgba(0,0,0,.18)); transition: var(--t-interactive); }
.btn4 .ic { width: 1.05em; height: 1.05em; }
@media (hover: hover){ .btn4:hover { transform: translateY(-1px); box-shadow: var(--elev2, 0 8px 24px rgba(0,0,0,.3));
        border-color: color-mix(in srgb, var(--blue, #19a6ea) 45%, var(--line)); } }
.btn4:active { transform: translateY(0) scale(.985); }
.btn4:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.btn4--primary { border-color: transparent; color: #fff; background: var(--grad, linear-gradient(135deg, #19a6ea, #0b86c4));
        box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--blue, #19a6ea) 60%, transparent); }
.btn4--primary:hover { filter: brightness(1.06); }
.btn4--ghost { background: transparent; }
.btn4--soft { background: color-mix(in srgb, var(--blue, #19a6ea) 12%, transparent);
        border-color: color-mix(in srgb, var(--blue, #19a6ea) 28%, var(--line)); color: var(--blue, #19a6ea); }
.btn4--danger { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--red, #ef4444), #b62b2b); }

/* Input / select control primitive + a sprite-chevron caret applied to existing
   selects so the OS arrow disappears. accent-color is set in the :root tokens. */
.field { width: 100%; background: var(--bg2, var(--panel)); border: 1px solid var(--line); color: var(--ink);
         font: var(--fw-semibold, 600) var(--fs-sm, 13px)/1.3 var(--font-body, system-ui); border-radius: var(--r-md, 10px);
         padding: 11px 13px; outline: none;
         transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease), background-color .15s var(--ease, ease); }
.field::placeholder { color: var(--muted2, var(--muted)); }
.field:hover { border-color: color-mix(in srgb, var(--blue, #19a6ea) 28%, var(--line)); }
.field:focus, .field:focus-visible { border-color: var(--blue, #19a6ea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue, #19a6ea) 22%, transparent); }
select.field, select.csel, select.ccinput { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2399a5b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 11px center; }

/* Framed QR container (onboarding) */
.qr-frame { display: inline-block; background: #fff; padding: 12px; border-radius: 12px; line-height: 0; box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.3)); }
.qr-frame img, .qr-frame svg, .qr-frame canvas { display: block; width: 180px; height: 180px; }

/* ---- first-login guided tour (tour.js) ---- */
/* Dedicated click-swallowing dim for the whole tour lifetime (shown on every step,
   incl. centered ones that have no spotlight). tour.js can render a single
   <div class="tour-backdrop"> in start()/_teardown() to block underlying controls;
   the spotlight ring below sits above it. */
.tour-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(0,0,0,0.62);
  pointer-events: auto; animation: tourIn 0.18s ease; }
.tour-spot { position: relative; z-index: 100001; border-radius: 8px;
  box-shadow: 0 0 0 3px var(--blue, #19a6ea), 0 0 0 9999px rgba(0,0,0,0.62); transition: box-shadow 0.2s ease; }
.tour-card { position: fixed; z-index: 100002; width: min(340px, calc(100vw - 24px));
  background: var(--panel, #12161d); color: var(--ink, #e9eef3); border: 1px solid var(--line, #222932);
  border-radius: 14px; box-shadow: var(--shadow, 0 12px 32px rgba(0,0,0,0.4)); padding: 16px 16px 12px;
  font-family: var(--font-body, system-ui); animation: tourIn 0.18s ease; }
.tour-card.tour-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
@keyframes tourIn { from { opacity: 0; } to { opacity: 1; } }
.tour-step { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue, #19a6ea); margin-bottom: 6px; }
.tour-h { font: 700 16px/1.25 var(--font-display, system-ui); margin-bottom: 6px; }
.tour-b { font-size: 13.5px; line-height: 1.55; color: var(--muted, #9aa6b2); margin-bottom: 14px; }
.tour-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line2, #2b333d); }
.tour-dot.on { background: var(--blue, #19a6ea); }
.tour-nav { display: flex; gap: 8px; }
.tour-skip, .tour-back, .tour-next { border-radius: 8px; padding: 7px 13px; font: 600 13px/1 var(--font-body, system-ui); cursor: pointer; border: 1px solid var(--line, #222932); }
.tour-skip { background: transparent; color: var(--muted, #9aa6b2); }
.tour-back { background: transparent; color: var(--ink, #e9eef3); }
.tour-next { background: var(--blue, #19a6ea); color: #fff; border-color: transparent; }
.tour-next:hover { filter: brightness(1.06); }
.tour-fab { position: fixed; bottom: 18px; right: 18px; z-index: 99990; display: inline-flex; align-items: center;
  gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--panel, #12161d); color: var(--ink, #e9eef3);
  border: 1px solid var(--line2, #2b333d); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,0.35));
  font: 600 12.5px/1 var(--font-body, system-ui); cursor: pointer; opacity: 0.85; }
.tour-fab:hover { opacity: 1; border-color: var(--blue, #19a6ea); }
/* Mini App only: lift the replay FAB clear of the fixed bottom tab bar (~50px +
   safe-area), so it stops covering the right-most tab and stealing its taps. */
#tabbar ~ .tour-fab { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================================
   SHARED RESPONSIVE LAYER  (additive only — never removes a desktop baseline)
   ----------------------------------------------------------------------------
   Two breakpoints applied to the GENERIC shared components (admin + agent +
   Mini App benefit at once). The .room-* / cockpit rules are owned by another
   surface and are intentionally NOT touched here.
     • tablet : 601–960px  — relax fixed minimums so two-up grids still fit
     • phone  : ≤600px     — collapse to single column, wrap chips/badges,
                             enforce ≥44px touch targets, stop horizontal overflow
   ============================================================================ */

/* --- Touch ergonomics: any coarse pointer (phones/tablets) gets ≥44px targets.
   Scoped to interactive controls so it can't inflate inline text or icons. */
@media (pointer: coarse) {
  button, .btn, select,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .icon-btn-sm, .seg-radio label, .tour-skip, .tour-back, .tour-next {
    min-height: 44px;
  }
  .icon-btn-sm { min-width: 44px; }
}

/* --- PHONE: ≤600px ------------------------------------------------------ */
@media (max-width: 600px) {
  /* Long words / tokens never force a horizontal scrollbar. */
  h1, h2, h3, h4 { overflow-wrap: anywhere; word-break: break-word; }

  /* Pills + badges wrap rather than overflow; keep them readable. */
  .badge { white-space: normal; }
  .statpill { white-space: normal; }

  /* Segmented radio: let the group wrap and the options flex-fill the row. */
  .seg-radio { display: flex; flex-wrap: wrap; width: 100%; }
  .seg-radio label { flex: 1 1 auto; justify-content: center; padding: 9px 11px; }

  /* Permission / access tiers: comfortable padding, allow icon+text to stack
     gracefully if the description is long. */
  .tier-row { padding: 11px; gap: 10px; }

  /* QR frame scales down on tiny screens but never collapses. */
  .qr-frame img, .qr-frame svg, .qr-frame canvas { width: min(180px, 56vw); height: min(180px, 56vw); }

  /* Guided-tour card already uses min(); make its footer wrap on the narrowest
     phones so the nav buttons never clip. */
  .tour-f { flex-wrap: wrap; row-gap: 8px; }

  /* The Mini App's bottom-nav buttons (.tabbar button) and KPI tiles (.kpi) are
     overflow:hidden, which clips an offset/box-shadow focus ring. Use an INSET
     ring on those so the keyboard focus indicator stays visible inside them. */
  .tabbar button:focus-visible, .kpi:focus-visible, .kpi a:focus-visible, .kpi button:focus-visible {
    outline: 2px solid var(--blue, #19a6ea); outline-offset: -2px; box-shadow: none;
  }
}

/* ============================================================================
   LIVE COMMAND CENTER — a shared "alive" design language for the admin Live
   view and the agent live-activity list. The JS layers `live-card s-<stage>` +
   the inner .live-* elements onto the existing .ocard / .recent rows (keeping
   the duration hooks), so each call is stage-coloured with a pulsing live dot,
   a stage chip, a breathing glow when connected, and a fade/slide on arrival.
   Critical colour (accent bar, dot, chip) uses var(--st) directly so it shows
   even where color-mix() isn't supported; tints/glows degrade gracefully.
   Motion is fully disabled under prefers-reduced-motion. */
:root{
  --st-grey:#8a93a6; --st-amber:#f5a623; --st-blue:#4aa8ff; --st-violet:#a472ff;
  --st-green:#1bb55c; --st-cyan:#17c4d6; --st-orange:#ff8c42; --st-red:#e23b3b;
}
.live-card{ --st:var(--st-grey); position:relative; overflow:hidden;
  border-color:color-mix(in srgb, var(--st) 30%, var(--line));
  background-image:linear-gradient(100deg, color-mix(in srgb, var(--st) 9%, transparent), transparent 62%);
  animation:liveEnter .34s cubic-bezier(.2,.8,.2,1) both; }
.live-card .live-accent{ position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--st);
  box-shadow:0 0 10px var(--st); }
.live-card .rc-who, .live-card .oc-who, .live-card .lc-who{ display:flex; align-items:center; gap:8px; min-width:0; }
/* stage -> accent colour */
.s-dialing,.s-ringing{ --st:var(--st-amber); }
.s-ivr,.s-waiting{ --st:var(--st-blue); }
.s-connecting,.s-pressed1{ --st:var(--st-violet); }
.s-connected{ --st:var(--st-green); }
.s-on_hold{ --st:var(--st-cyan); }
.s-reconnecting{ --st:var(--st-orange); }
.s-voicemail,.s-no_answer,.s-no_response,.s-ended{ --st:var(--st-grey); }
/* a connected call breathes — "this conversation is live + healthy" */
.s-connected.live-card{ animation:liveEnter .34s both, liveGlow 2.6s ease-in-out .34s infinite; }
/* the live dot — a pulsing ring in the stage colour */
.live-dot{ width:9px; height:9px; border-radius:50%; background:var(--st); flex:0 0 auto;
  box-shadow:0 0 0 0 var(--st); animation:livePulse 1.7s ease-out infinite; }
/* stage chip */
.live-chip{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; padding:2px 9px;
  border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.02em; color:var(--st);
  background:color-mix(in srgb, var(--st) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--st) 38%, transparent); }
/* WebRTC link quality as little signal bars (q-g good / q-a fair / q-r poor) */
.live-net{ display:inline-flex; align-items:flex-end; gap:2px; height:13px; vertical-align:middle; }
.live-net i{ width:3px; border-radius:1px; background:var(--muted); opacity:.3; }
.live-net i:nth-child(1){ height:5px; } .live-net i:nth-child(2){ height:9px; } .live-net i:nth-child(3){ height:13px; }
.live-net.q-g i{ background:var(--st-green); opacity:1; }
.live-net.q-a i:nth-child(-n+2){ background:var(--st-amber); opacity:1; }
.live-net.q-r i:nth-child(1){ background:var(--st-red); opacity:1; }
/* KPI tile pulses when its value changes (dopamine on every connect) */
.kpi.pop{ animation:kpiPop .55s ease-out; }
@keyframes livePulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--st) 60%, transparent); }
  70%{ box-shadow:0 0 0 8px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@keyframes liveGlow{ 0%,100%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--st-green) 36%, transparent),
    0 0 14px -6px color-mix(in srgb, var(--st-green) 45%, transparent); }
  50%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--st-green) 60%, transparent),
    0 0 22px -2px color-mix(in srgb, var(--st-green) 72%, transparent); } }
@keyframes liveEnter{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
@keyframes kpiPop{ 0%{ transform:scale(1); } 32%{ transform:scale(1.05); } 100%{ transform:scale(1); } }

/* ---- callback badge: a glowing violet pill that marks a call as a callback (live views + cards) ---- */
.cb-badge{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-left:6px;
  padding:1px 8px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap;
  color:#fff; background:linear-gradient(135deg,#a472ff,#7d4bff);
  box-shadow:0 0 0 1px rgba(164,114,255,.4), 0 0 12px -3px rgba(164,114,255,.8); animation:cbGlow 2s ease-in-out infinite; }
.cb-badge .ic{ width:11px; height:11px; }
.live-card.is-cb .live-accent{ background:#a472ff; box-shadow:0 0 10px #a472ff; }
@keyframes cbGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(164,114,255,.32), 0 0 8px -3px rgba(164,114,255,.6); }
  50%{ box-shadow:0 0 0 1px rgba(164,114,255,.7), 0 0 16px -2px rgba(164,114,255,.95); } }

/* ---- the callback BUTTON in the recent/missed lists (.mini.cbk): a juicy green pill ---- */
.cbk{ background:linear-gradient(135deg,#1bb55c,#149048) !important; color:#fff !important; border:0 !important;
  font-weight:800 !important; box-shadow:0 2px 10px -3px rgba(27,181,92,.7);
  transition:transform .08s ease, box-shadow .15s ease, filter .15s ease; }
.cbk:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 5px 16px -3px rgba(27,181,92,.85); }
.cbk:active{ transform:translateY(0); }

/* ---- missed-call toast: 15s, slides in top-right, soft chime, one-tap Callback ---- */
#agentToastHost{ position:fixed; top:14px; right:14px; z-index:100050; display:flex; flex-direction:column;
  gap:10px; max-width:min(360px,92vw); pointer-events:none; }
.atoast{ pointer-events:auto; display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:14px;
  color:var(--ink); background:linear-gradient(135deg, color-mix(in srgb,var(--panel) 92%,#000), var(--panel2));
  border:1px solid color-mix(in srgb,#e67e22 45%,var(--line));
  box-shadow:0 14px 40px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(230,126,34,.22), 0 0 22px -8px rgba(230,126,34,.7);
  animation:toastIn .34s cubic-bezier(.2,.9,.2,1) both; }
.atoast.out{ animation:toastOut .3s ease forwards; }
.atoast .at-ico{ font-size:22px; line-height:1; flex:0 0 auto; animation:toastWobble 1.1s ease-in-out infinite; }
.atoast .at-body{ flex:1 1 auto; min-width:0; }
.atoast .at-t{ font-weight:800; font-size:13.5px; line-height:1.25; }
.atoast .at-s{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.atoast .at-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:#fff; border:0;
  background:linear-gradient(135deg,#1bb55c,#149048); border-radius:10px; padding:8px 12px; font-weight:800; font-size:12.5px;
  box-shadow:0 3px 12px -3px rgba(27,181,92,.7); }
.atoast .at-btn:hover{ filter:brightness(1.08); }
.atoast .at-btn .ic{ width:13px; height:13px; }
.atoast .at-x{ flex:0 0 auto; background:transparent; border:0; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:0 2px; }
.atoast .at-x:hover{ color:var(--ink); }
@keyframes toastIn{ from{ opacity:0; transform:translateX(40px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(40px) scale(.96); } }
@keyframes toastWobble{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-11deg); } 75%{ transform:rotate(11deg); } }

/* ---- hero live-count pill (admin Live + agent live-activity headers): a pulsing green "N live" ---- */
.livecount-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.03em; color:#fff; vertical-align:middle;
  background:linear-gradient(135deg,#1bb55c,#149048); box-shadow:0 0 14px -3px rgba(27,181,92,.8); }
.livecount-pill .lcp-dot{ width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.9); animation:lcpPulse 1.4s ease-out infinite; }
@keyframes lcpPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.85); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

/* ---- recent (handled = green) + missed (amber) row accents ---- */
.recent.acc-g{ box-shadow:inset 3px 0 0 var(--st-green); }
.recent.acc-a{ box-shadow:inset 3px 0 0 #e67e22; }

/* ---- admin press-1 / call-log outcome badges glow by result ---- */
.aud-row .badge.ok2{ box-shadow:0 0 12px -4px rgba(74,168,255,.85); }
.aud-row .badge.bad{ box-shadow:0 0 12px -4px rgba(226,59,59,.85); }

/* ---- sexier "calling back…" banner: violet, glowing, breathing (overrides the green inline default) ---- */
.cbbanner{ background:linear-gradient(135deg,#a472ff,#7d4bff); border:0; color:#fff;
  box-shadow:0 8px 26px -8px rgba(124,75,255,.8), 0 0 0 1px rgba(164,114,255,.4);
  animation:cbBannerPulse 1.8s ease-in-out infinite; }
.cbbanner .ic{ width:15px; height:15px; vertical-align:middle; }
@keyframes cbBannerPulse{ 0%,100%{ transform:scale(1); box-shadow:0 8px 22px -10px rgba(124,75,255,.7), 0 0 0 1px rgba(164,114,255,.35); }
  50%{ transform:scale(1.015); box-shadow:0 10px 34px -6px rgba(124,75,255,.95), 0 0 0 1px rgba(164,114,255,.7); } }

/* ---- confetti burst on a fresh connect ---- */
#confettiHost{ position:fixed; inset:0; pointer-events:none; z-index:10000; overflow:hidden; }
.confetti-bit{ position:absolute; top:-14px; width:9px; height:14px; border-radius:2px; opacity:.95;
  animation:confettiFall linear forwards; }
@keyframes confettiFall{ 0%{ transform:translate(0,0) rotate(0); opacity:1; }
  100%{ transform:translate(var(--dx),103vh) rotate(var(--rot)); opacity:.35; } }

/* ---- animated funnel bars: vibrant gradient + a sweeping shimmer ---- */
.fbar{ position:relative; overflow:hidden; background:linear-gradient(90deg,#1bb55c,#17c4d6); }
.fbar::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.4) 50%,transparent 75%);
  transform:translateX(-100%); animation:barShimmer 2.6s ease-in-out infinite; }
@keyframes barShimmer{ 0%{ transform:translateX(-100%); } 60%,100%{ transform:translateX(100%); } }

/* ---- leaderboard #1: gold tint + shimmer sweep ---- */
.lb-row.lb-top{ position:relative; overflow:hidden; border-radius:8px;
  background:linear-gradient(90deg,rgba(255,200,60,.14),transparent 70%); }
.lb-row.lb-top::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,215,90,.3) 50%,transparent 65%);
  transform:translateX(-100%); animation:barShimmer 3.2s ease-in-out infinite; }
.lb-row.lb-top .lb-rank{ color:#ffce4d; text-shadow:0 0 10px rgba(255,206,77,.7); }

@media (prefers-reduced-motion: reduce){
  .live-card, .s-connected.live-card, .live-dot, .kpi.pop, .cb-badge, .atoast, .atoast .at-ico,
  .livecount-pill .lcp-dot, .cbbanner, .fbar::after, .lb-row.lb-top::after,
  /* entrance keyframes that were still playing (tour / captcha / mic-hint cards) */
  .tour-card, .cap-box, .mic-hint .mh-card{ animation:none !important; }
  #confettiHost{ display:none; }
}
/* Global reduced-motion catch-all — evens out hovers/transitions across every
   surface; the targeted guards above still fully kill the looping animations. */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* admin agents grid: a PAUSED (unavailable) agent reads amber, distinct from green on-call / muted waiting */
.a-s.paused{ color:#f5a623; }

/* (loading screen removed — overlay + loader.js deleted) — cxFloat kept below for the root picker logo. */
@keyframes cxFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ---- root picker (the domain landing) — choose Admin or Agent ---- */
.cxp{ min-height:100vh; min-height:100dvh; margin:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:26px; padding:40px 18px; overflow-x:hidden; overflow-y:auto; position:relative; color:#e6f3ff;
  font-family:var(--font-display,'Sora',system-ui,sans-serif);
  background:
    radial-gradient(760px 560px at 24% 26%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(800px 600px at 80% 78%, rgba(168,85,247,.18), transparent 62%),
    radial-gradient(1500px 1050px at 50% 46%, #0a1326 0%, #070a18 56%, #04050d 100%); }
.cxp-logo{ height:84px; width:auto; animation:cxFloat 4.6s ease-in-out infinite;
  filter:drop-shadow(0 0 24px rgba(34,211,238,.55)) drop-shadow(0 12px 28px rgba(168,85,247,.45)); }
.cxp-h{ font-weight:800; font-size:clamp(20px,4vw,30px); letter-spacing:.02em; margin:6px 0 0; }
.cxp-h b{ background:linear-gradient(120deg,#22d3ee,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cxp-sub{ color:#9fb6d6; font-size:13.5px; margin:-10px 0 4px; }
.cxp-cards{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; max-width:760px; }
.cxp-card{ position:relative; width:300px; max-width:84vw; padding:28px 24px; border-radius:20px; text-decoration:none; color:#eaf4ff;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(140,200,255,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; display:block; }
.cxp-card.admin{ --c:#22d3ee; } .cxp-card.agent{ --c:#a855f7; }
.cxp-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow:0 28px 70px -22px rgba(0,0,0,.75), 0 0 34px -8px var(--c); }
.cxp-ic{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px; font-size:26px;
  color:var(--c); background:color-mix(in srgb, var(--c) 18%, transparent); box-shadow:0 0 22px -6px var(--c); }
.cxp-card h3{ margin:0 0 6px; font-size:19px; font-weight:800; }
.cxp-card p{ margin:0; font-size:13px; color:#a8bdd9; line-height:1.45; }
.cxp-go{ margin-top:16px; font-weight:800; font-size:13px; color:var(--c); display:inline-flex; align-items:center; gap:6px; }
@media (prefers-reduced-motion: reduce){
  .cxp-logo{ animation:none; } .cxp-card:hover{ transform:none; }
}
/* Short / landscape phones: shrink the picker's vertical footprint so the logo
   and both cards' CTAs stay visible (content scrolls via overflow-y:auto above). */
@media (max-height:640px){
  .cxp{ gap:14px; padding:20px 16px; justify-content:flex-start; }
  .cxp-logo{ height:56px; }
}

/* ---- live mic-permission pointer (agent console): a bobbing arrow at the browser prompt ---- */
.mic-hint{ position:fixed; top:14px; left:18px; z-index:90000; max-width:300px; pointer-events:none; }
.mic-hint .mh-arrow{ width:0; height:0; margin-left:26px; border-left:9px solid transparent; border-right:9px solid transparent;
  border-bottom:12px solid var(--blue,#19a6ea); animation:mhBob 1s ease-in-out infinite; }
.mic-hint.denied .mh-arrow{ border-bottom-color:#e23b3b; }
.mic-hint .mh-card{ pointer-events:auto; margin-top:-1px; display:flex; flex-direction:column; gap:4px; color:#e6f3ff;
  background:linear-gradient(135deg,#0f1b33,#0a1326); border:1px solid color-mix(in srgb,var(--blue,#19a6ea) 50%, var(--line));
  border-radius:12px; padding:12px 14px; font-size:13px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.7), 0 0 22px -8px rgba(25,166,234,.7); animation:mhIn .35s ease both; }
.mic-hint.denied .mh-card{ border-color:rgba(226,59,59,.5); box-shadow:0 16px 40px -12px rgba(0,0,0,.7), 0 0 22px -8px rgba(226,59,59,.7); }
.mic-hint .mh-card b{ font-weight:800; }
.mic-hint .mh-card span{ color:#a8bdd9; font-size:12px; line-height:1.4; }
.mic-hint .mh-btn{ margin-top:6px; align-self:flex-start; cursor:pointer; color:#fff; border:0; border-radius:8px;
  padding:6px 12px; font-weight:800; font-size:12px; background:linear-gradient(135deg,#19a6ea,#22c55e); }
@keyframes mhBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes mhIn{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce){ .mic-hint .mh-arrow{ animation:none !important; } }

/* ---- visible login captcha widget (anti-bot proof-of-work) ---- */
.cap-box{ display:flex; align-items:center; gap:10px; margin:12px 0; padding:11px 13px; border-radius:12px;
  background:color-mix(in srgb, var(--blue, #19a6ea) 9%, var(--panel)); border:1px solid color-mix(in srgb, var(--blue, #19a6ea) 32%, var(--line));
  color:var(--ink, #dfeaff); font-size:13px; animation:capIn .3s ease both; }
.cap-box .cap-ic{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(25,166,234,.2); color:#19a6ea; font-weight:800; font-size:14px; }
.cap-box.solving .cap-ic{ background:transparent; border:2px solid rgba(25,166,234,.25); border-top-color:#19a6ea;
  border-radius:50%; animation:capSpin .8s linear infinite; }
.cap-box .cap-t{ flex:1 1 auto; font-weight:600; }
.cap-box .cap-bar{ flex:0 0 56px; height:4px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.cap-box .cap-bar i{ display:block; height:100%; background:linear-gradient(90deg,#19a6ea,#22c55e); transition:width .2s ease; }
.cap-box.done{ background:linear-gradient(135deg, rgba(34,197,94,.14), rgba(34,197,94,.05)); border-color:rgba(34,197,94,.45); }
.cap-box.done .cap-ic{ background:rgba(34,197,94,.22); color:#22c55e; }
@keyframes capIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
@keyframes capSpin{ to{transform:rotate(360deg)} }
@media (prefers-reduced-motion: reduce){ .cap-box.solving .cap-ic{ animation:none !important; } }