/* ============================================================
   CLEO · Fusion Line — premium after-hours voice-agent UI
   Built by Kin Partners. Dark warm base, teal accent,
   Orbitron wordmark, Poppins body, rounded glass, aurora depth.
   ============================================================ */

:root {
  --bg-0:#0b0a0a; --bg-1:#100e0d; --bg-2:#14110f;
  --teal:#6AD2C7; --teal-soft:#8fe0d7; --teal-deep:#2f6f69;
  --warm:#e6b896; --warm-soft:#f0cfb6;
  /* per-client brand accent — overridden inline on .client-shell from the client's accent_color.
     Defaults to teal so every accent-driven surface (orb glow, hero border, status dot) still works. */
  --accent:#6AD2C7;

  --text:#eef3f1; --text-dim:#aab6b3; --text-faint:#6f7d7a; --text-ghost:#4d5957;

  --glass:rgba(255,255,255,.034);
  --glass-2:rgba(255,255,255,.05);
  --glass-3:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.07);
  --line-teal:rgba(133,224,213,.16);

  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:11px; --pill:999px;
  --sh-soft:0 26px 70px -34px rgba(0,0,0,.85);
  --sh-lift:0 34px 90px -36px rgba(0,0,0,.9);
  --ease:cubic-bezier(.22,.61,.36,1);
  --teal-grad:linear-gradient(180deg,var(--teal-soft),var(--teal));
}

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg-0); color:var(--text);
  font-family:"Poppins",system-ui,sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { background:rgba(106,210,199,.25); color:#fff; }
button { font-family:inherit; }

/* ---------- aurora / mesh background ---------- */
.aurora { position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% 50%, #121311 0%, var(--bg-1) 55%, var(--bg-0) 100%); }
.aurora .blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
  mix-blend-mode:screen; will-change:transform; }
.aurora .b1 { width:780px; height:780px; left:-10%; top:-22%;
  background:radial-gradient(circle, rgba(106,210,199,.34), transparent 66%);
  animation:drift1 26s var(--ease) infinite; }
.aurora .b2 { width:680px; height:680px; right:-12%; top:6%;
  background:radial-gradient(circle, rgba(47,111,105,.5), transparent 66%);
  animation:drift2 32s var(--ease) infinite; }
.aurora .b3 { width:620px; height:620px; left:24%; bottom:-26%;
  background:radial-gradient(circle, rgba(230,184,150,.16), transparent 66%);
  animation:drift3 38s var(--ease) infinite; }
.aurora .b4 { width:520px; height:520px; right:18%; bottom:-18%;
  background:radial-gradient(circle, rgba(106,210,199,.2), transparent 66%);
  animation:drift1 30s var(--ease) infinite reverse; }
@keyframes drift1 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(60px,40px) scale(1.12);} }
@keyframes drift2 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-50px,50px) scale(1.08);} }
@keyframes drift3 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,-40px) scale(1.14);} }
.aurora .grain { position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .6px);
  background-size:3px 3px; opacity:.015; }
.aurora .vignette { position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 30%, transparent 55%, rgba(0,0,0,.55) 100%); }

@media (prefers-reduced-motion: reduce) {
  .aurora .blob { animation:none !important; }
}

/* ---------- shell ---------- */
.shell { position:relative; z-index:1; max-width:1360px; margin:0 auto; padding:28px 40px 110px; }

/* ---------- top bar ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:4px 2px 28px; }
.brand { display:flex; align-items:center; gap:18px; }
.brand img { height:54px; width:auto; display:block; mix-blend-mode:screen; }
.brand-home { cursor:pointer; transition:opacity .2s var(--ease), transform .2s var(--ease); }
.brand-home:hover { opacity:.82; transform:translateY(-1px); }
.brand .sep { width:1px; height:30px; background:var(--line); }
.brand .kicker { font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--text-faint); font-weight:500; line-height:1.5; }
.brand .kicker b { color:var(--teal); font-weight:600; }
.brand .kicker .by { display:block; color:var(--text-ghost); letter-spacing:.24em; font-size:8.5px; margin-top:2px; }
/* Kin Partners lockup (Claude Design, 17 Jul 2026), identical in the admin + client headers.
   CLEO . AI RECEPTION is the primary line; the "powered by kin partners" credit sits clearly
   smaller beneath it (per Mesh). Space Mono for the mono line, Bricolage for the wordmark, Kin
   v2 olive on the voiceprint mark. */
.kin-lockup { display:flex; flex-direction:column; gap:5px; line-height:1; flex-shrink:0; }
.kin-cleoline { font-family:"Space Mono",monospace; font-weight:700; font-size:14px; letter-spacing:.2em; white-space:nowrap; line-height:1; }
.kin-cleo { color:#6e9e96; }
.kin-dot { color:#3e4e49; }
.kin-air { color:var(--teal, #7ee8d6); }
.kin-powered { display:flex; align-items:center; gap:6px; }
.kin-pby { font-family:"Space Mono",monospace; font-size:7px; letter-spacing:.2em; text-transform:uppercase; color:#67756f; white-space:nowrap; }
.kin-mark { width:15px; height:8px; display:block; color:#9bb068; flex-shrink:0; }
.kin-word { font-family:"Bricolage Grotesque","Poppins",sans-serif; font-weight:800; font-size:10.5px; letter-spacing:-.02em; white-space:nowrap; line-height:1; }
.kin-w1 { color:#eee8db; }
.kin-w2 { color:#8e9280; }
/* Phone widths: the lockup was the one row that would not yield (29 Jul 2026). The brand row
   cannot wrap, .kin-lockup refuses to shrink and .kin-cleoline cannot break, so on a client
   header (Fusion Line mark + the client's co-brand logo + the Kin lockup) 457px of header was
   forced into a 390px screen and the WHOLE page scrolled sideways. Found by measuring the real
   logged-in production dashboard; a local fixture with no client logo is narrower and hid it.
   Here the row is allowed to wrap onto a second line and the marks come down a little. Nothing
   above 600px changes, so desktop, the admin console and the job-card PDF are untouched. */
@media (max-width:600px) {
  .brand { flex-wrap:wrap; gap:10px; row-gap:8px; max-width:100%; }
  .brand img { height:34px; }
  .brand .sep { display:none; }
  .kin-lockup { flex-shrink:1; min-width:0; }
  .kin-cleoline { font-size:12px; letter-spacing:.13em; }
}

.nav { display:flex; align-items:center; gap:4px; padding:5px; background:var(--glass);
  border:1px solid var(--line); border-radius:var(--pill); backdrop-filter:blur(16px); }
.nav button { display:inline-flex; align-items:center; gap:8px; border:0; background:transparent;
  color:var(--text-dim); font-size:12.5px; font-weight:500; letter-spacing:.01em;
  padding:9px 17px; border-radius:var(--pill); cursor:pointer; white-space:nowrap;
  transition:color .25s var(--ease), background .25s var(--ease); }
.nav button svg { width:15px; height:15px; opacity:.85; }
.nav button:hover { color:var(--text); background:rgba(255,255,255,.04); }
.nav button.on { color:#08110f; background:var(--teal-grad); box-shadow:0 8px 22px -8px rgba(106,210,199,.5); }
.nav button.on svg { opacity:1; }
.topright { display:flex; align-items:center; gap:12px; }
.topbar .logout { display:inline-flex; align-items:center; gap:8px; text-decoration:none; cursor:pointer;
  color:var(--text-dim); font-size:13px; font-weight:500; padding:9px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--glass);
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.topbar .logout:hover { color:var(--teal); border-color:rgba(106,210,199,.4); background:rgba(106,210,199,.07); }
.topbar .logout svg { width:15px; height:15px; }
/* admin "view as a client" — a slim bar shown ONLY when an admin is previewing a client (never to a
   real client), with a one-click way back. The client name/avatar in the admin lists opens this. */
.viewbar { position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:9px 22px; background:rgba(106,210,199,.1); border-bottom:1px solid rgba(106,210,199,.28);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-size:12px; letter-spacing:.03em; color:var(--teal-soft); }
.viewbar .vb-eye { color:var(--teal); margin-right:5px; font-size:9px; vertical-align:middle; }
.viewbar b { color:var(--text); font-weight:600; }
.viewbar .vb-back { color:var(--teal); text-decoration:none; font-weight:600; padding:5px 13px; border-radius:999px;
  border:1px solid rgba(106,210,199,.4); background:rgba(106,210,199,.08); transition:background .2s var(--ease); }
.viewbar .vb-back:hover { background:rgba(106,210,199,.18); }
.viewbar .vb-actions { display:flex; align-items:center; gap:8px; }
.viewbar .vb-kind { font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--teal-soft); margin:0 5px; }
.viewbar .vb-context { display:block; margin-top:3px; color:var(--muted); font-size:10.5px; }
.viewbar .vb-ro { font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--warm-soft); border:1px solid rgba(230,184,150,.35); border-radius:5px; padding:1px 6px; margin:0 4px; }
/* Preview controls are real disabled buttons with no mutation handlers. This CSS only makes
   the server-enforced state obvious. */
.is-preview button:disabled {
  opacity:.5; filter:saturate(.7); cursor:not-allowed; }
.biz-open { cursor:pointer; border-radius:8px; padding:2px 6px; margin:-2px -6px; transition:background .15s var(--ease); }
.biz-open:hover { background:rgba(106,210,199,.06); }
.biz-open .nm { transition:color .15s var(--ease); }
.biz-open:hover .nm { color:var(--teal-soft); }
.biz-open .nm::after { content:" ↗"; color:var(--teal); font-size:11px; opacity:0; transition:opacity .15s var(--ease); }
.biz-open:hover .nm::after { opacity:.85; }

/* ---------- panels ---------- */
.panel { position:relative; background:var(--glass); border:1px solid var(--line-teal);
  border-radius:var(--r-xl); backdrop-filter:blur(20px); box-shadow:var(--sh-soft); overflow:hidden; }
.panel::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(155deg, rgba(143,224,213,.3), transparent 36%, transparent 74%, rgba(230,184,150,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }

.board { display:grid; grid-template-columns:1.42fr 1fr; gap:22px; align-items:start; }
.board > * { min-width:0; }

/* ---------- hero ---------- */
.hero { padding:30px 38px; display:flex; gap:30px; align-items:center; }
.orb-stage { position:relative; flex:0 0 230px; height:230px; display:grid; place-items:center;
  filter:drop-shadow(0 16px 50px rgba(106,210,199,.28)); }
.orb-stage canvas { display:block; }
.orb-stage.speaking { filter:drop-shadow(0 16px 70px rgba(106,210,199,.5)); }
.hero-body { flex:1; min-width:0; }
.cleo-word { font-family:"Orbitron",sans-serif; font-weight:800; font-size:54px; letter-spacing:.16em;
  line-height:1; margin:0 0 6px; background:linear-gradient(180deg,#fff 8%, var(--teal-soft) 135%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.cleo-sub { font-size:14px; color:var(--text-dim); font-weight:300; margin:0 0 20px; }
.cleo-sub b { color:var(--text); font-weight:500; }

.statusrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.statuschip { display:inline-flex; align-items:center; gap:11px; padding:9px 18px 9px 14px;
  border-radius:var(--pill); background:rgba(106,210,199,.1); border:1px solid rgba(106,210,199,.3); }
.statuschip .d { position:relative; width:9px; height:9px; border-radius:50%; background:var(--teal);
  animation:ping 2.4s var(--ease) infinite; }
@keyframes ping { 0%{ box-shadow:0 0 0 0 rgba(106,210,199,.5);} 70%{ box-shadow:0 0 0 12px rgba(106,210,199,0);} 100%{ box-shadow:0 0 0 0 rgba(106,210,199,0);} }
.statuschip .lbl { font-size:11.5px; letter-spacing:.32em; font-weight:600; color:var(--teal-soft); }
.statuschip.speaking { background:rgba(240,207,182,.1); border-color:rgba(240,207,182,.34); }
.statuschip.speaking .d { background:var(--warm); animation-name:pingW; }
@keyframes pingW { 0%{ box-shadow:0 0 0 0 rgba(240,207,182,.5);} 70%{ box-shadow:0 0 0 12px rgba(240,207,182,0);} 100%{ box-shadow:0 0 0 0 rgba(240,207,182,0);} }
.statuschip.speaking .lbl { color:var(--warm-soft); }
.statuschip small { color:var(--text-faint); letter-spacing:.08em; font-size:11px; font-weight:400; }
/* minimalist borderless live status (replaces the bordered chip on the hero — Mesh, 20 Jun) */
.livestatus { display:inline-flex; align-items:center; gap:10px; }
.livestatus .d { position:relative; width:9px; height:9px; border-radius:50%; background:var(--teal);
  animation:ping 2.4s var(--ease) infinite; }
.livestatus .lbl { font-size:13px; color:var(--text-dim); font-weight:400; letter-spacing:.02em; }
.livestatus.speaking .d { background:var(--warm); animation-name:pingW; }
.livestatus.speaking .lbl { color:var(--warm-soft); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:13px; font-weight:500;
  border-radius:var(--pill); padding:11px 20px; cursor:pointer; border:1px solid transparent;
  transition:all .25s var(--ease); letter-spacing:.01em; white-space:nowrap; }
.btn svg { width:15px; height:15px; }
.btn-primary { color:#08110f; background:var(--teal-grad); box-shadow:0 12px 30px -12px rgba(106,210,199,.6); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 16px 34px -12px rgba(106,210,199,.75); }
.btn-ghost { color:var(--text-dim); background:var(--glass-2); border-color:var(--line); }
.btn-ghost:hover { color:var(--text); border-color:var(--line-teal); }
.btn-sm { padding:7px 14px; font-size:12px; gap:7px; }
.btn-sm svg { width:13px; height:13px; }

/* ---------- panel header ---------- */
.phead { display:flex; align-items:center; justify-content:space-between; padding:22px 26px 0; flex-wrap:wrap; row-gap:8px; }
.ptitle { display:flex; align-items:center; gap:12px; }
.ptitle .ic { width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:rgba(106,210,199,.1); border:1px solid rgba(106,210,199,.22); color:var(--teal-soft); }
.ptitle .ic svg { width:16px; height:16px; }
.ptitle h2 { margin:0; font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:var(--text); }
.pill-count { font-size:11px; color:var(--text-dim); background:var(--glass-2); border:1px solid var(--line);
  padding:3px 11px; border-radius:var(--pill); font-weight:400; }
.pmeta { font-size:11.5px; color:var(--text-faint); font-weight:300; letter-spacing:.02em; }

.pfoot { padding:14px 26px 20px; font-size:11.5px; color:var(--text-faint); font-weight:300;
  display:flex; align-items:center; justify-content:space-between; }
.pfoot a, .linklike { color:var(--teal-soft); text-decoration:none; cursor:pointer; font-weight:500; }
.pfoot a:hover, .linklike:hover { color:var(--teal); }

/* ---------- overview stat tiles ---------- */
.overview { display:flex; flex-direction:column; height:100%; }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:18px 26px 8px; flex:1; }
.tile { position:relative; background:var(--glass-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 16px 14px; display:flex; flex-direction:column; gap:10px; overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease); }
.tile:hover { border-color:rgba(106,210,199,.34); transform:translateY(-2px); }
.tile .tio { display:flex; align-items:center; justify-content:space-between; }
.tile .tic { width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(106,210,199,.1); color:var(--teal-soft); }
.tile .tic svg { width:15px; height:15px; }
.tile.warm .tic { background:rgba(240,207,182,.12); color:var(--warm-soft); }
.tile .delta { font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--teal-soft);
  background:rgba(106,210,199,.1); padding:2px 8px; border-radius:var(--pill); }
.tile .delta.flat { color:var(--text-faint); background:var(--glass-2); }
.tile .num { font-family:"Orbitron",sans-serif; font-weight:600; font-size:38px; line-height:.9; color:var(--text); }
.tile .num.accent { color:var(--teal-soft); }
.tile .lbl { font-size:11.5px; color:var(--text-dim); font-weight:300; }
.tile .spark { position:absolute; right:0; bottom:0; left:0; height:34px; opacity:.7; }

.overview .ofoot { padding:8px 26px 20px; display:flex; align-items:center; gap:9px;
  font-size:11.5px; color:var(--text-faint); font-weight:300; }
.overview .ofoot .gd { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 9px var(--teal); }

/* ---------- clients table ---------- */
.tbl { width:100%; border-collapse:collapse; margin-top:14px; }
.tbl thead th { text-align:left; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-faint); font-weight:600; padding:0 18px 12px; border-bottom:1px solid var(--line); }
.tbl tbody td { padding:14px 14px; font-size:13px; color:var(--text-dim); font-weight:300;
  border-bottom:1px solid rgba(255,255,255,.045); vertical-align:middle; }
/* VA email truncates with an ellipsis (full address in the title tooltip) so the flexible text
   column yields its width to the action buttons — the actions must never be clipped off-panel. */
.tbl td.va-email { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl tbody tr { position:relative; cursor:pointer; transition:background .2s var(--ease); }
.tbl tbody tr:hover { background:rgba(106,210,199,.045); }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl tbody tr.sel { background:rgba(106,210,199,.07); }
.tbl tbody tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--teal); }

.biz { display:flex; align-items:center; gap:13px; }
.biz .av { width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  font-size:12px; font-weight:600; color:var(--teal-soft); font-family:"Orbitron",sans-serif;
  background:linear-gradient(160deg, rgba(106,210,199,.16), rgba(230,184,150,.06));
  border:1px solid rgba(106,210,199,.2); flex:0 0 auto; }
/* ClientAvatar (admin lists only): logo clients show their contained website logo on a light plate;
   no-logo clients keep the initials badge. Fixed size so every row's name lines up. */
.biz .av-logo, .demo-opt .av-logo {
  width:54px; height:34px; padding:3px; background:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.biz .av-logo img, .demo-opt .av-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.biz .av-initials, .demo-opt .av-initials { width:54px; height:34px; }
.biz .nm { color:var(--text); font-weight:500; font-size:13.5px; }
.biz .nm small { display:block; color:var(--text-faint); font-weight:300; font-size:11px; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.mono { font-variant-numeric:tabular-nums; letter-spacing:.01em; }

.typebadge { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:500;
  letter-spacing:.03em; padding:5px 11px; border-radius:var(--pill); border:1px solid var(--line);
  white-space:nowrap; flex:0 0 auto; }
.typebadge .td { width:6px; height:6px; border-radius:2px; }
.typebadge.trades { color:var(--teal-soft); background:rgba(106,210,199,.08); border-color:rgba(106,210,199,.22); }
.typebadge.trades .td { background:var(--teal); }
.typebadge.broker { color:var(--warm-soft); background:rgba(230,184,150,.08); border-color:rgba(230,184,150,.24); }
.typebadge.broker .td { background:var(--warm); }
.typebadge.reception, .typebadge.generic { color:#bdb6e8; background:rgba(150,140,220,.08); border-color:rgba(150,140,220,.24); }
.typebadge.reception .td, .typebadge.generic .td { background:#9c8fdc; }
.typebadge.waste { color:#a9d8a1; background:rgba(133,199,124,.08); border-color:rgba(133,199,124,.24); }
.typebadge.waste .td { background:#7fbf76; }
.typebadge.electrician { color:#9cc6f0; background:rgba(120,170,230,.08); border-color:rgba(120,170,230,.24); }
.typebadge.electrician .td { background:#6aa6e6; }

/* coverage quick-toggle (a compact .seg in the client rows) + demo-line switcher bar */
/* coverage toggle — compact switch (replaces the wide two-button seg so row actions never clip) */
.covtoggle { display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; cursor:pointer; padding:0; }
.covtoggle-track { position:relative; width:26px; height:15px; border-radius:999px; background:var(--glass-3);
  border:1px solid var(--line); transition:background .2s, border-color .2s; flex:0 0 auto; }
.covtoggle.on .covtoggle-track { background:rgba(106,210,199,.32); border-color:transparent; }
.covtoggle-knob { position:absolute; top:1.5px; left:1.5px; width:10px; height:10px; border-radius:50%;
  background:var(--text-dim); transition:left .2s, background .2s; }
.covtoggle.on .covtoggle-knob { left:12px; background:var(--teal); }
.covtoggle-lbl { font-size:10.5px; font-weight:500; color:var(--text-dim); white-space:nowrap; min-width:0; text-align:left; }
.covtoggle.on .covtoggle-lbl { color:var(--teal-soft); }
.covtoggle.busy { opacity:.55; pointer-events:none; }
.demoline { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--glass); border:1px solid var(--line-teal); border-radius:var(--r-md);
  padding:10px 18px; margin-bottom:16px; }
.demoline-lbl { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); font-weight:400; }
.demoline-lbl b { color:var(--teal-soft); font-weight:600; }
.demoline-sel { -webkit-appearance:none; appearance:none;
  background-color:rgba(106,210,199,.08); border:1px solid rgba(106,210,199,.28); color:var(--teal-soft);
  border-radius:var(--pill); padding:5px 30px 5px 14px; font-size:12px; font-weight:500;
  font-family:inherit; cursor:pointer; line-height:1.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236AD2C7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.demoline-sel:hover { border-color:var(--teal); color:var(--teal); }
.demoline-sel option { background:#0b1412; color:var(--text); }
.demoline-msg { font-size:12px; color:var(--teal-soft); font-weight:500; }
.demoline-now { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--teal-soft); font-weight:500; }
.demoline-now b { color:var(--teal); font-weight:600; }
.demoline-avatar { display:inline-flex; align-items:center; flex:0 0 auto; }
.demoline-avatar .av { width:34px; height:26px; border-radius:7px; display:grid; place-items:center;
  color:var(--teal-soft); background:linear-gradient(160deg, rgba(106,210,199,.16), rgba(230,184,150,.06));
  border:1px solid rgba(106,210,199,.2); overflow:hidden; }
.demoline-avatar .av-logo { padding:2px; background:#fff; display:flex; align-items:center; justify-content:center; }
.demoline-avatar .av-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.demoline-avatar .av-initials { font:600 9px "Orbitron",sans-serif; }
.demoline-now-dot { width:8px; height:8px; border-radius:50%; background:var(--teal); flex:0 0 auto;
  animation:ping 2.4s ease-out infinite; }
.demoline-now.none { color:var(--text-faint); }
.demoline-now.none .demoline-now-dot { background:var(--text-faint); animation:none; }

.status { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:500; letter-spacing:.03em; }
.status .sd { width:7px; height:7px; border-radius:50%; }
.status.active { color:var(--teal-soft); }
.status.active .sd { background:var(--teal); box-shadow:0 0 7px var(--teal); }
.status.paused { color:var(--warm-soft); }
.status.paused .sd { background:var(--warm); }

/* ---------- recent calls list ---------- */
.calls { padding:14px 18px 6px; display:flex; flex-direction:column; gap:10px; }
.callcard { background:var(--glass-2); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .25s var(--ease), background .25s var(--ease); }
.callcard:hover { border-color:rgba(106,210,199,.26); }
.callcard.open { border-color:rgba(106,210,199,.34); background:rgba(106,210,199,.04); }
.callcard .ct { display:flex; align-items:flex-start; gap:13px; padding:14px 16px; cursor:pointer; }
.callcard .time { flex:0 0 auto; text-align:center; padding-top:2px; }
.callcard .time .hm { font-size:13px; color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; line-height:1; }
.callcard .time .ap { font-size:9px; color:var(--text-faint); letter-spacing:.12em; }
.callcard .time .dt { font-size:9.5px; color:var(--text-faint); font-weight:400; margin-top:3px; white-space:nowrap; }
.callcard .time .cdur { font-size:9.5px; color:var(--teal-soft); font-weight:500; font-variant-numeric:tabular-nums; margin-top:4px; white-space:nowrap; }
.callcard .cmid { flex:1; min-width:0; }
.callcard .cbiz { display:flex; align-items:center; gap:8px; }
.callcard .cbiz b { color:var(--text); font-weight:500; font-size:13px; }
.callcard .cbiz .caller { color:var(--text-dim); font-weight:300; font-size:12px; }
.callcard .summary { color:var(--text-dim); font-weight:300; font-size:12px; line-height:1.5; margin-top:5px;
  display:flex; align-items:flex-start; gap:7px; }
.callcard .summary .ai { flex:0 0 auto; font-size:9px; letter-spacing:.12em; font-weight:600; color:var(--teal-soft);
  background:rgba(106,210,199,.1); padding:2px 6px; border-radius:5px; margin-top:1px; }
.callcard .cright { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto; }

.tag { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:500; letter-spacing:.04em;
  padding:5px 10px; border-radius:var(--pill); border:1px solid var(--line); color:var(--text-dim); white-space:nowrap; }
.tag .tg { width:6px; height:6px; border-radius:50%; background:currentColor; }
.tag.captured { color:var(--teal-soft); background:rgba(106,210,199,.09); border-color:rgba(106,210,199,.24); }
.tag.recorded { color:#bdb6e8; background:rgba(150,140,220,.08); border-color:rgba(150,140,220,.22); }
.tag.emergency { color:#f0a59a; background:rgba(232,120,100,.1); border-color:rgba(232,120,100,.3); }
/* A call we placed ourselves while proving a client's setup. It stays VISIBLE in the client's own
   history (their incumbent call log shows test rows too) and is excluded only from production
   totals, so a badge is the whole mechanism. */
.tag.test { color:#e6c07a; background:rgba(230,192,122,.1); border-color:rgba(230,192,122,.3); }
.callcard .chev { color:var(--text-faint); transition:transform .25s var(--ease); }
.callcard.open .chev { transform:rotate(180deg); color:var(--teal-soft); }

.transcript { max-height:0; opacity:0; overflow:hidden; transition:max-height .35s var(--ease), opacity .3s var(--ease); }
.callcard.open .transcript { max-height:1200px; opacity:1; }
.tbody { padding:2px 16px 16px; border-top:1px solid rgba(255,255,255,.05); margin:0 0 0; }
.trhead { display:flex; align-items:center; justify-content:space-between; padding:12px 0 10px; }
.trhead span { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.copybtn { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:var(--text-dim);
  background:var(--glass-2); border:1px solid var(--line); padding:5px 11px; border-radius:var(--pill); cursor:pointer;
  transition:all .2s var(--ease); }
.copybtn:hover { color:var(--teal-soft); border-color:rgba(106,210,199,.3); }
.copybtn.done { color:var(--teal-soft); border-color:rgba(106,210,199,.4); }
.turn { display:flex; gap:10px; padding:7px 0; font-size:12.5px; line-height:1.55; }
.turn .spk { flex:0 0 52px; font-size:10.5px; font-weight:600; letter-spacing:.04em; padding-top:2px; }
.turn.cleo .spk { color:var(--teal-soft); }
.turn.caller .spk { color:var(--warm-soft); }
.turn .txt { color:var(--text-dim); font-weight:300; flex:1; }

/* ---------- standalone screens ---------- */
.screen-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.screen-head h1 { font-family:"Orbitron",sans-serif; font-weight:700; font-size:26px; letter-spacing:.06em; margin:0 0 6px; color:var(--text); }
.screen-head p { margin:0; font-size:13px; color:var(--text-dim); font-weight:300; }
.toolbar { display:flex; align-items:center; gap:10px; }
.search { display:flex; align-items:center; gap:9px; background:var(--glass); border:1px solid var(--line);
  border-radius:var(--pill); padding:9px 16px; min-width:240px; }
.search svg { width:15px; height:15px; color:var(--text-faint); flex:0 0 auto; }
.search input { background:transparent; border:0; outline:0; color:var(--text); font-size:13px; font-family:inherit; width:100%; }
.search input::placeholder { color:var(--text-faint); }
.seg { display:flex; gap:3px; padding:4px; background:var(--glass); border:1px solid var(--line); border-radius:var(--pill); }
.seg button { border:0; background:transparent; color:var(--text-dim); font-size:12px; font-weight:500; padding:7px 14px;
  border-radius:var(--pill); cursor:pointer; transition:all .2s var(--ease); }
.seg button:hover { color:var(--text); }
.seg button.on { color:#08110f; background:var(--teal-grad); }
.seg.sm button { padding:6px 13px; font-size:11.5px; }

/* ---------- orb style + color controls ---------- */
.orbctl { margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.orbctl-row { display:flex; align-items:center; gap:14px; }
.orbctl-lbl { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-faint); font-weight:600; width:42px; flex:0 0 auto; }
.swatches { display:flex; gap:9px; }
.swatch { width:26px; height:26px; border-radius:50%; padding:0; cursor:pointer; border:1px solid var(--line);
  background:var(--glass-2); display:grid; place-items:center; transition:all .2s var(--ease); }
.swatch span { width:14px; height:14px; border-radius:50%; background:var(--sw); box-shadow:0 0 8px -1px var(--sw); transition:transform .2s var(--ease); }
.swatch:hover { border-color:var(--line-teal); }
.swatch:hover span { transform:scale(1.12); }
.swatch.on { border-color:var(--sw); box-shadow:0 0 0 3px color-mix(in srgb, var(--sw) 22%, transparent); }

/* ---------- add-client form ---------- */
.formwrap { display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; }
.form { padding:28px 30px; }
.fsec { margin-bottom:26px; }
.fsec:last-child { margin-bottom:0; }
.fsec .legend { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-soft); font-weight:600; margin-bottom:16px; }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
/* Top-align inputs to a reserved 2-line label box: a longer hint under one input can no longer
   push it out of line with the input beside it (the 20 Jul job-cards misalignment), and a label
   that wraps to a second line still leaves its input level with a single-line label's input. */
.fgrid .field > label { min-height:2.55em; }
.fgrid .field > input { margin-top:0; }
.field { display:flex; flex-direction:column; gap:8px; }
.logo-upload { display:flex; align-items:center; gap:10px; margin-top:auto; }
.logo-pick { cursor:pointer; }
/* onboarding: pull-from-website + brand-accent picker */
.site-pull { display:flex; align-items:stretch; gap:10px; margin-top:auto; }
.site-pull input { flex:1; min-width:0; }
.site-pull .btn { flex:0 0 auto; white-space:nowrap; }
.pull-msg { margin-top:8px; font-size:11.5px; color:var(--teal-soft); font-weight:400; line-height:1.4; }
.accent-pick { display:flex; align-items:center; gap:10px; margin-top:auto; }
.accent-swatch { -webkit-appearance:none; appearance:none; width:42px; height:42px; flex:0 0 auto; padding:0;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-1); cursor:pointer; }
.accent-swatch::-webkit-color-swatch-wrapper { padding:4px; }
.accent-swatch::-webkit-color-swatch { border:0; border-radius:9px; }
.accent-hex { flex:1; min-width:0; font-variant-numeric:tabular-nums; }
.field.full { grid-column:1 / -1; }
.field label { font-size:12px; color:var(--text-dim); font-weight:400; letter-spacing:.01em; }
.field label span { color:var(--text-faint); font-weight:300; }
.field input, .field textarea, .field select { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 14px; color:var(--text); font-size:13px; font-family:inherit; outline:0; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input::placeholder, .field textarea::placeholder { color:var(--text-ghost); }
.field input:focus, .field textarea:focus, .field select:focus { border-color:rgba(106,210,199,.45); box-shadow:0 0 0 3px rgba(106,210,199,.12); }
.field textarea { resize:vertical; min-height:82px; line-height:1.5; }
.chips { display:flex; gap:9px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:var(--pill);
  background:var(--glass-2); border:1px solid var(--line); color:var(--text-dim); font-size:12.5px; font-weight:500;
  cursor:pointer; transition:all .2s var(--ease); }
.chip .cd { width:7px; height:7px; border-radius:2px; background:var(--text-faint); }
.chip:hover { border-color:var(--line-teal); color:var(--text); }
.chip.on { color:#08110f; background:var(--teal-grad); border-color:transparent; }
.chip.on .cd { background:#08110f; }
.formfoot { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:22px 30px;
  border-top:1px solid var(--line); }

/* preview card on add-client */
.previewcard { padding:26px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.previewcard .mini-orb { filter:drop-shadow(0 10px 30px rgba(106,210,199,.35)); }
.previewcard h3 { margin:0; font-family:"Orbitron",sans-serif; font-weight:600; font-size:18px; letter-spacing:.06em; color:var(--text); }
.previewcard .pv-sub { font-size:12.5px; color:var(--text-dim); font-weight:300; line-height:1.5; }
.pvrow { width:100%; display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line); font-size:12.5px; }
.pvrow:first-of-type { border-top:0; }
.pvrow .k { color:var(--text-faint); font-weight:300; }
.pvrow .v { color:var(--text); font-weight:500; }

/* ---------- presence widget ---------- */
.widget { position:fixed; left:26px; bottom:24px; z-index:40; display:flex; align-items:center; gap:13px;
  padding:10px 20px 10px 11px; border-radius:var(--pill); background:rgba(16,14,13,.74);
  border:1px solid var(--line-teal); backdrop-filter:blur(20px);
  box-shadow:var(--sh-lift), 0 0 40px -18px rgba(106,210,199,.5); }
.widget .worb { width:38px; height:38px; flex:0 0 auto; filter:drop-shadow(0 0 12px rgba(106,210,199,.5)); }
.widget .wm { line-height:1.3; }
.widget .wn { font-family:"Orbitron",sans-serif; font-weight:600; font-size:13px; letter-spacing:.12em; color:var(--text); }
.widget .ws { display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.26em; color:var(--teal-soft); font-weight:500; }
.widget .ws.speaking { color:var(--warm-soft); }
.widget .ws .wd { width:6px; height:6px; border-radius:50%; background:var(--teal); animation:ping 2.4s var(--ease) infinite; }
.widget .ws.speaking .wd { background:var(--warm); }

/* admin presence — minimalist floating orb (Kai-style): no pill/border, bigger orb, live value */
.cleo-presence { position:fixed; left:24px; bottom:20px; z-index:40; display:flex; align-items:center; gap:6px;
  user-select:none; -webkit-user-select:none; pointer-events:none; }
.cleo-presence .cp-orb { width:60px; height:60px; flex:0 0 auto; margin:-9px;
  filter:drop-shadow(0 0 14px rgba(106,210,199,.45)); }
.cleo-presence .cp-meta { line-height:1.18; padding-left:2px; }
.cleo-presence .cp-name { font-family:"Orbitron",sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.13em; color:var(--text-dim); }
.cleo-presence .cp-val { font-size:11px; color:var(--text-faint); margin-top:1px; }
.cleo-presence .cp-val b { color:var(--teal-soft); font-weight:600; }

/* ---------- view transition (transform-only: never hides content if frozen) ---------- */
.view { animation:fadeUp .5s var(--ease); }
@keyframes fadeUp { from{ transform:translateY(12px); } to{ transform:none; } }
.gap { height:22px; }

.empty { padding:40px 26px; text-align:center; color:var(--text-faint); font-weight:300; font-size:13px; }

@media (prefers-reduced-motion: reduce) {
  .statuschip .d, .demoline-now-dot, .widget .ws .wd { animation:none !important; }
  .view { animation:none !important; }
}

/* responsive */
@media (max-width:1240px) {
  .board { grid-template-columns:1fr; }
}
@media (max-width:1080px) {
  .formwrap { grid-template-columns:1fr; }
  .hero { flex-direction:column; text-align:center; }
}
@media (max-width:720px) {
  .shell { padding:22px 16px 110px; }
  .nav .lh { display:none; }
  .fgrid { grid-template-columns:1fr; }
}

/* ---------- wiring utilities (refresh / filter / row actions / transcript) ---------- */
.phead-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; row-gap:8px; justify-content:flex-end; }
.btn.spin svg { animation:spin360 .8s linear infinite; }
@keyframes spin360 { to { transform:rotate(360deg); } }

/* end-call state — red, matches the btn system */
.btn-live { color:#f0a59a; background:rgba(232,120,100,.12); border-color:rgba(232,120,100,.34); }
.btn-live:hover { background:rgba(232,120,100,.2); }
.btn:disabled { opacity:.6; cursor:default; }

/* row actions = ONE sleek line that ALWAYS fits inside the panel (Mesh: you must be able to SEE it
   to click it). The two toggles sit together in one pill, then Demo/Login/Edit. Compact + nowrap;
   the table's flexible text columns (VA email) truncate so the actions are never clipped off-panel. */
.row-actions { display:flex; align-items:center; gap:4px; justify-content:flex-end; flex-wrap:nowrap; white-space:nowrap; }
.row-actions .btn { padding:6px 8px; font-size:10.5px; flex:0 0 auto; }
.row-actions .btn svg { width:13px; height:13px; }
/* the paired-toggle control — Coverage + Transfer seated next to each other in one glass pill */
.row-toggles { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; flex:0 0 auto;
  border-radius:var(--pill); background:var(--glass); border:1px solid var(--line); }
.row-toggles .rt-div { width:1px; height:14px; background:var(--line); flex:0 0 auto; }

.demo-client-list .tbl { table-layout:fixed; }
.demo-client-list .tbl tbody td { padding-left:10px; padding-right:10px; }
.demo-client-list .tbl td:first-child { width:27%; }
.demo-client-list .tbl td:nth-child(2) { width:27%; white-space:nowrap; }
.demo-client-list .tbl td:last-child { width:46%; white-space:nowrap; }
.demo-client-list .biz .nm { max-width:145px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.demo-client-list .typebadge { gap:5px; font-size:10px; letter-spacing:.01em; padding:5px 8px; }

.filter-chip { display:inline-flex; align-items:center; gap:7px; margin-left:8px; padding:4px 11px;
  border-radius:var(--pill); background:rgba(106,210,199,.12); border:1px solid rgba(106,210,199,.3);
  color:var(--teal-soft); font-size:11px; font-weight:500; }
.filter-x { cursor:pointer; opacity:.7; font-size:10px; }
.filter-x:hover { opacity:1; }

.turnscroll { max-height:300px; overflow-y:auto; padding-right:6px; }
.turnscroll::-webkit-scrollbar { width:7px; }
.turnscroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:7px; }
.tmeta { font-size:11px; color:var(--text-faint); font-weight:300; padding-top:8px; }

/* on-demand call recording player (fetched fresh, never stored on us). WS5 (18 Jul 2026):
   Cleo-brand compact player (teal button + slim seek bar), mirrors the FL-website cleo-player.js
   at card scale. The old native <audio controls> grey box (.callrec-audio) is retired. */
.callrec { margin:2px 0 14px; padding:12px 14px; background:rgba(106,210,199,.05);
  border:1px solid rgba(106,210,199,.16); border-radius:10px; }
.callrec-lbl { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--teal-soft); margin-bottom:9px; }
.callrec-row { display:flex; align-items:center; gap:13px; }
.callrec-play { flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:0; padding:0;
  background:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(106,210,199,.28); transition:transform .16s var(--ease); }
.callrec-play:hover { transform:scale(1.06); }
/* glyphs use the Cleo brand navy (#0A1D37, from cleo-player.js) for contrast on the teal button */
.callrec-tri { width:0; height:0; border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #0A1D37; margin-left:3px; }
.callrec-pause { display:flex; gap:4px; }
.callrec-pause span { display:block; width:3.5px; height:13px; border-radius:1px; background:#0A1D37; }
.callrec-spin { width:15px; height:15px; border-radius:50%; border:2px solid rgba(10,29,55,.25);
  border-top-color:#0A1D37; animation:callrecspin .7s linear infinite; }
@keyframes callrecspin { to { transform:rotate(360deg); } }
.callrec-wave { flex:1 1 auto; min-width:0; }
.callrec-bar { position:relative; height:6px; border-radius:999px; background:var(--glass-2);
  border:1px solid var(--line); cursor:pointer; overflow:hidden; }
.callrec-bar-fill { height:100%; background:var(--accent); border-radius:999px; }
.callrec-time { display:flex; justify-content:space-between; margin-top:7px; font-size:11px;
  font-weight:500; color:var(--text-dim); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.callrec-err { font-size:12px; color:var(--text-dim); font-weight:400; padding:2px 0; }
.workflow-recs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  margin:2px 0 14px; }
.workflow-recs-title { grid-column:1 / -1; font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim); }
.workflow-recs .callrec { margin:0; min-width:0; }
@media (max-width:720px) { .workflow-recs { grid-template-columns:1fr; } }

/* keep empty filter results from collapsing the panel */
.empty { min-height:130px; display:flex; align-items:center; justify-content:center; }

/* hero: stop the row reflowing when state flips (listening <-> speaking / talk <-> end) */
.hero .statusrow .btn { min-width:150px; }
.statuschip { min-width:206px; }

/* clients table: empty-filter state matches a single data row's height (uniform panel).
   Override the base .empty padding (40px) which otherwise makes the empty panel taller. */
.tbl .empty { min-height:36px; padding:0 26px; }

/* ============================================================
   Modals — job card, confirm dialog, demo picker
   ============================================================ */
@keyframes modalFade { from { opacity:0; } to { opacity:1; } }
@keyframes modalPop  { from { opacity:0; transform:translateY(12px) scale(.97); }
                       to   { opacity:1; transform:none; } }

.modal-backdrop { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:28px; background:rgba(6,8,10,.62); backdrop-filter:blur(7px);
  animation:modalFade .2s var(--ease); }
.modal { background:linear-gradient(180deg, rgba(22,28,27,.96), rgba(15,19,18,.96));
  border:1px solid var(--line-teal); border-radius:var(--r-lg); box-shadow:var(--sh-lift);
  animation:modalPop .26s var(--ease); max-width:100%; max-height:100%; overflow:hidden;
  display:flex; flex-direction:column; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; border-bottom:1px solid var(--line); }
.modal-title { display:flex; align-items:center; gap:9px; font-size:12.5px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; color:var(--text); }
.modal-title svg { color:var(--teal-soft); }
.modal-actions { display:flex; align-items:center; gap:9px; }
.modal-x { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--glass-2); color:var(--text-dim); font-size:13px;
  transition:all .2s var(--ease); }
.modal-x:hover { color:var(--text); border-color:var(--line-teal); background:var(--glass-3); }

/* job-card modal — the rendered card document in an iframe */
.card-modal { width:660px; }
.card-frame { flex:1; min-height:0; background:#04080C; }
.card-frame iframe { display:block; width:100%; height:74vh; border:0; }

/* confirm dialog */
.confirm-modal { width:400px; padding:26px 24px 22px; align-items:center; text-align:center; }
.confirm-icon { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:14px;
  background:rgba(232,120,100,.12); border:1px solid rgba(232,120,100,.3); color:#f0a59a; }
.confirm-msg { font-size:13.5px; line-height:1.55; color:var(--text-dim); font-weight:300; margin-bottom:20px; }
.confirm-actions { display:flex; gap:10px; justify-content:center; }
.btn-danger { color:#f0a59a; background:rgba(232,120,100,.14); border-color:rgba(232,120,100,.36); }
.btn-danger:hover { color:#ffd0c7; background:rgba(232,120,100,.24); border-color:rgba(232,120,100,.5); }

/* transfer directory editor (in-dashboard modal) */
.dir-link { display:inline-block; margin-top:9px; padding:0; background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:500; color:var(--teal); }
.dir-link:hover { color:var(--teal-soft); }
.dir-modal { width:min(780px,95vw); }
.dir-saved { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600;
  letter-spacing:.04em; color:var(--teal-soft); }
.dir-body { padding:18px 22px 22px; overflow-y:auto; flex:1; min-height:0; }
.dir-intro { font-size:12px; line-height:1.6; color:var(--text-faint); margin:0 0 14px; }
.dir-intro b { color:var(--text-dim); font-weight:600; }
/* Client self-serve: where this client's job-card emails go (backed by va_email). */
.dir-jobcard { background:var(--glass-2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin:0 0 16px; }
.dir-jc-label { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--teal-soft); margin-bottom:7px; }
.dir-jc-row { display:flex; gap:8px; align-items:center; }
.dir-jc-input { flex:1 1 auto; min-width:0; background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:8px; color:var(--text); font-size:13px; padding:8px 10px; }
.dir-jc-input:focus { outline:none; border-color:var(--teal-soft); }
.dir-jc-save { flex:0 0 auto; background:var(--teal-soft); color:#06201d; border:0; border-radius:8px; font-size:12px; font-weight:700; padding:8px 16px; cursor:pointer; }
.dir-jc-save:disabled { opacity:.55; cursor:default; }
/* Reserve a consistent 2-line height so a row's two hints occupy equal space, keeping the
   bottom-aligned inputs (.fgrid .field > input margin-top:auto) level even when one hint is
   shorter than the other. Keep every 2-col-row hint to <=2 lines at the rendered width. */
.dir-jc-hint { font-size:11px; color:var(--text-faint); margin-top:6px; min-height:30px; line-height:1.35; }
.dir-warn { font-size:12px; line-height:1.5; color:#f0cfb6; background:rgba(230,184,150,.1);
  border:1px solid rgba(230,184,150,.26); border-radius:var(--r-sm); padding:10px 13px; margin-bottom:14px; }
.dir-err { font-size:12px; color:#f0a59a; background:rgba(232,120,100,.12);
  border:1px solid rgba(232,120,100,.3); border-radius:var(--r-sm); padding:9px 13px; margin-bottom:12px; }
.dir-loading, .dir-empty { font-size:12.5px; color:var(--text-faint); text-align:center; padding:26px 0; }
.dir-table { display:flex; flex-direction:column; }
.dir-row { display:grid; grid-template-columns:1.7fr 1.05fr 1.15fr .72fr auto; align-items:center;
  gap:10px; padding:9px 4px; border-top:1px solid var(--line); }
/* An fr track's automatic minimum is min-content, so a long value in ANY cell can push its
   neighbour's track to zero and the overflowing text then paints on top of the next column.
   That is how the live 20 row CES directory printed names over roles. Pin every cell to
   min-width:0 and let long words break, so a cell can shrink instead of spilling sideways.
   Track widths are untouched, so the incumbent directory modal renders exactly as before. */
.dir-row > * { min-width:0; overflow-wrap:anywhere; }
.dir-headrow { border-top:0; padding-bottom:4px; }
.dir-headrow span { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.dir-name { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.dir-name b { font-size:13px; color:var(--text); font-weight:600; }
.dir-name small { font-size:10.5px; color:var(--text-faint); }
.dir-phone { font-size:12px; color:var(--text-dim); }
/* Inline-editable directory fields (tap a name/role/number to edit; saves on blur). */
.dir-phone-cell { display:flex; flex-direction:column; min-width:0; }
.dir-edit { width:100%; min-width:0; background:transparent; color:var(--text); border:1px solid transparent;
  border-radius:7px; font-family:inherit; padding:3px 6px; transition:border-color .15s, background .15s; }
.dir-edit:hover:not(:disabled) { border-color:var(--line); }
.dir-edit:focus { outline:none; border-color:var(--line-teal); background:var(--bg-1); }
.dir-edit::placeholder { color:var(--text-ghost); }
.dir-edit:disabled { opacity:.6; }
.dir-edit-name { font-size:13px; font-weight:600; }
.dir-edit-role { font-size:10.5px; color:var(--text-faint); margin-top:1px; }
.dir-route { display:block; max-width:100%; margin:2px 6px 0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:9.5px; color:var(--teal-soft); opacity:.78; cursor:help; }
.dir-confirmed { display:block; margin:1px 6px 0; font-size:8.5px; color:var(--text-ghost);
  letter-spacing:.03em; }
.dir-edit-phone { font-size:12px; color:var(--text-dim); }
.dir-nofone { display:block; font-size:9.5px; color:#e0a05a; margin-top:2px; padding-left:6px; line-height:1.3; }
.dir-nofone-add { margin:10px 0 0; padding-left:0; font-size:11px; }
.dir-badnum { display:block; font-size:9.5px; color:#e0705a; margin-top:2px; padding-left:6px; line-height:1.3; }
/* This weekend's on-call plumber, badged so it is unmistakable which roster person is on. */
.dir-oncall-badge { display:inline-block; align-self:flex-start; margin-top:3px; font-size:9px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  background:rgba(106,210,199,.12); border:1px solid rgba(106,210,199,.32);
  border-radius:var(--pill); padding:2px 8px; white-space:nowrap; }
.dir-row-oncall { background:rgba(106,210,199,.05); border-radius:9px; }
/* Cleo Settings weekend on-call toggle (ask-for-the-number), same glass card as the panel. */
.wk-toggle { display:flex; gap:11px; align-items:flex-start; margin-top:14px; padding:12px 13px;
  background:var(--glass-2); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; }
.wk-toggle input { margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.wk-toggle-txt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.wk-toggle-txt b { font-size:13px; color:var(--text); font-weight:600; }
.wk-toggle-txt small { font-size:11.5px; color:var(--text-dim); line-height:1.45; }
.dir-sel { width:100%; -webkit-appearance:none; appearance:none; background:var(--bg-1); color:var(--text);
  border:1px solid var(--line); border-radius:9px; font-size:11.5px; font-weight:500; padding:6px 9px; cursor:pointer; }
.dir-sel:focus { outline:none; border-color:var(--line-teal); }
.dir-ah { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-dim); cursor:pointer; }
.dir-ah input { width:15px; height:15px; accent-color:var(--teal); flex-shrink:0; cursor:pointer; }
.dir-rm { background:none; border:0; cursor:pointer; font-family:inherit; font-size:11.5px; color:#e0857a; padding:4px 6px; }
.dir-rm:hover { color:#f0a59a; }
.dir-rm:disabled { opacity:.5; cursor:default; }
.dir-row-buttons { display:flex; align-items:flex-end; flex-direction:column; gap:2px; }
.provider-badge { display:inline-flex; margin-left:7px; padding:2px 6px; border-radius:6px;
  border:1px solid var(--line); color:var(--text-faint); font-size:8.5px; font-weight:600;
  letter-spacing:.05em; vertical-align:middle; white-space:nowrap; }
.dir-set-oncall { background:none; border:0; cursor:pointer; font-family:inherit; font-size:10.5px;
  color:var(--teal-soft); padding:4px 6px; white-space:nowrap; }
.dir-set-oncall:hover { color:var(--text); }
.dir-set-oncall:disabled { opacity:.45; cursor:default; }
.rehearsal-dial { display:flex; flex-direction:column; align-items:center; gap:4px; margin:16px 0;
  padding:16px; border:1px solid var(--line-teal); border-radius:var(--r-md);
  background:rgba(106,210,199,.08); text-align:center; }
.rehearsal-dial span { color:var(--text-dim); font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; }
.rehearsal-dial strong { color:var(--teal-soft); font-size:25px; letter-spacing:.06em; }
.rehearsal-dial small { color:var(--text-faint); font-size:12px; }
.dir-add { margin-top:18px; padding-top:18px; border-top:1px solid var(--line-teal); }
.dir-add-title { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); font-weight:600; margin-bottom:12px; }
.dir-add-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dir-add-grid > * { min-width:0; }
.dir-add-grid input, .dir-add-grid select, .dir-add-grid textarea { background:var(--bg-1); color:var(--text); border:1px solid var(--line);
  border-radius:var(--r-md); font-size:12.5px; padding:9px 11px; font-family:inherit; }
.dir-add-grid input::placeholder, .dir-add-grid textarea::placeholder { color:var(--text-ghost); }
.dir-add-grid input:focus, .dir-add-grid select:focus, .dir-add-grid textarea:focus { outline:none; border-color:var(--line-teal); }
.dir-add-grid select { -webkit-appearance:none; appearance:none; cursor:pointer; }
.dir-add-grid textarea { min-height:82px; resize:vertical; grid-column:1 / -1; }
.dir-add-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:13px; }
@media (max-width:560px) {
  .dir-modal .dir-add-grid { grid-template-columns:1fr; }
  .dir-add-foot { align-items:flex-start; flex-direction:column; }
}

/* demo picker */
.demo-picker { width:440px; padding-bottom:14px; }
.demo-sub { margin:14px 18px 4px; font-size:12px; color:var(--text-faint); font-weight:300; }
.demo-list { display:flex; flex-direction:column; gap:8px; padding:10px 14px 4px; max-height:60vh; overflow-y:auto; }
.demo-opt { display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--glass-2);
  color:var(--text-dim); transition:all .2s var(--ease); }
.demo-opt:hover { border-color:var(--line-teal); background:rgba(106,210,199,.06); color:var(--text); }
.demo-opt .av { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;
  font-size:12px; font-weight:600; color:var(--teal-soft); font-family:"Orbitron",sans-serif;
  background:linear-gradient(160deg, rgba(106,210,199,.16), rgba(230,184,150,.06)); border:1px solid rgba(106,210,199,.2); }
.demo-opt-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.demo-opt-main .nm { color:var(--text); font-weight:500; font-size:13.5px; }
.demo-opt > svg { color:var(--teal-soft); flex:0 0 auto; }

/* recent-call row: View job card + per-call delete ✕ in the .cright stack */
.callcard .cright-top { display:flex; align-items:center; gap:8px; }
.callcard .calldel { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--text-faint); font-size:11px; line-height:1;
  opacity:0; transition:all .2s var(--ease); }
.callcard:hover .calldel { opacity:.65; }
.callcard .calldel:hover { opacity:1; color:#f0a59a; border-color:rgba(232,120,100,.34); background:rgba(232,120,100,.1); }
.callcard .viewcard { display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  font-size:11px; font-weight:500; letter-spacing:.01em; padding:5px 11px; border-radius:var(--pill);
  border:1px solid rgba(106,210,199,.24); background:rgba(106,210,199,.08); color:var(--teal-soft);
  transition:all .2s var(--ease); }
.callcard .viewcard:hover { border-color:rgba(106,210,199,.45); background:rgba(106,210,199,.16); color:var(--teal); }

/* client lead card — View / PDF / Email quick actions (self-serve, no modal needed) */
.lead-quick { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.lead-quick .leadq { display:inline-flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap;
  font-size:10.5px; font-weight:500; letter-spacing:.01em; padding:5px 9px; border-radius:var(--pill);
  border:1px solid var(--line); background:var(--glass-2); color:var(--text-dim); text-decoration:none;
  font-family:inherit; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.lead-quick .leadq:hover { color:var(--teal-soft); border-color:rgba(106,210,199,.34); background:rgba(106,210,199,.08); }
.lead-quick .leadq-view { color:var(--teal-soft); border-color:rgba(106,210,199,.26); background:rgba(106,210,199,.09); }
.lead-quick .leadq-view:hover { border-color:rgba(106,210,199,.45); background:rgba(106,210,199,.16); color:var(--teal); }
.lead-quick .leadq:disabled { opacity:.6; cursor:default; }
.lead-quick .leadq svg { flex:0 0 auto; }

/* ============================================================
   CLIENT VIEW (Stage 2) — the scoped $/value command centre
   ============================================================ */

/* brand: show the client's business name readably (not the tiny uppercase admin kicker) */
.brand .kicker.client-kicker { font-size:15px; letter-spacing:.01em; text-transform:none;
  color:var(--text); font-weight:600; line-height:1.25; }
.brand .kicker.client-kicker .by { text-transform:uppercase; letter-spacing:.24em; font-size:8.5px;
  color:var(--text-ghost); font-weight:500; margin-top:3px; }

/* single-column stack */
.client-view { display:flex; flex-direction:column; gap:22px; }

/* value hero — the stat row IS the hero (replaces the orb) */
.valuehero .valuelead { padding:14px 26px 2px; font-size:21px; line-height:1.4; font-weight:300;
  color:var(--text-dim); letter-spacing:.005em; }
.valuehero .valuelead b { color:var(--text); font-weight:600; }
.tiles.vstat { grid-template-columns:repeat(4,1fr); padding:18px 26px 6px; }
.vtile { padding:18px 16px 16px; min-width:0; }
.vtile .num { font-size:clamp(20px,2.3vw,32px); line-height:1; word-break:break-word; }
.vtile .vtile-sub { font-size:10.5px; color:var(--text-faint); font-weight:300; margin-top:-2px; }
.vtile.cta { cursor:pointer; align-items:flex-start; text-align:left; border-style:dashed;
  border-color:rgba(106,210,199,.3); background:rgba(106,210,199,.05); }
.vtile.cta:hover { border-color:rgba(106,210,199,.5); }
.vtile.cta .cta-num { font-family:"Orbitron",sans-serif; color:var(--teal-soft); font-weight:600; }
/* value-hero footer — was clipping "Cleo is on duty…" (no padding rule existed) */
.valuehero .ofoot { padding:8px 26px 22px; display:flex; align-items:center; gap:9px;
  font-size:11.5px; color:var(--text-faint); font-weight:300; }
.valuehero .ofoot .gd { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 9px var(--teal); flex:0 0 auto; }

/* controls panel — now leads with the live Cleo orb */
.ctrlpanel .ctrlbar { display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:8px 26px 22px; flex-wrap:wrap; }
.client-orb-wrap { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; }
.client-orb { display:block; filter:drop-shadow(0 14px 42px rgba(106,210,199,.45)); }
.client-orb-wrap.speaking .client-orb { filter:drop-shadow(0 14px 52px rgba(240,207,182,.5)); }
.client-orb-cap { display:inline-flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; color:var(--teal-soft); }
.client-orb-cap .d { width:6px; height:6px; border-radius:50%; background:var(--teal); animation:ping 2.4s var(--ease) infinite; }
.client-orb-cap.speaking { color:var(--warm-soft); }
.client-orb-cap.speaking .d { background:var(--warm); }
.ctrl-item { display:flex; flex-direction:column; gap:7px; min-width:0; }
.ctrl-lbl { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.ctrl-hint { font-size:11px; color:var(--text-faint); font-weight:300; }
.ctrl-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* done workflow on the lead cards */
.donebtn { display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:5px 11px; border-radius:var(--pill);
  border:1px solid var(--line); background:var(--glass-2); color:var(--text-dim); transition:all .2s var(--ease); }
.donebtn:hover { color:var(--teal-soft); border-color:rgba(106,210,199,.32); }
.donebtn.on { color:#08110f; background:var(--teal-grad); border-color:transparent; }
.donebtn.on svg { stroke-width:2.4; }
/* a handled lead reads unmistakably done: dimmed + a teal "done" stripe down the left edge */
.callcard.handled { opacity:.66; }
.callcard.handled:hover { opacity:.9; }
.callcard.handled .ct { position:relative; }
.callcard.handled .ct::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:0 3px 3px 0; background:var(--teal); opacity:.7; }

/* lead search bar (client leads + admin calls) — CRM-style filter */
.leadsearch { padding:12px 18px 2px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.leadsearch .search { flex:1 1 220px; min-width:180px; }
.search.sm { width:100%; min-width:0; padding:8px 14px; }
.search.sm input { font-size:12.5px; }
.search-x { flex:0 0 auto; background:transparent; border:0; color:var(--text-faint); cursor:pointer;
  font-size:11px; line-height:1; padding:2px 2px; }
.search-x:hover { color:var(--teal-soft); }

/* settings modal */
.settings-modal { width:540px; max-height:88vh; }
.settings-body { padding:6px 20px 8px; overflow-y:auto; scrollbar-gutter:stable; }
/* both inputs bottom-align even when one label wraps to 2 lines and the other doesn't:
   grid stretches the cells to equal height, margin-top:auto drops each input to the floor */
.set-grid { align-items:stretch; }
.set-grid .field input { width:100%; margin-top:auto; }
.set-sec { padding:16px 0; border-bottom:1px solid var(--line); }
.set-sec:last-child { border-bottom:0; }
.set-legend { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-soft); font-weight:600; margin-bottom:6px; }
.set-legend span { color:var(--text-faint); letter-spacing:.04em; }
.set-hint { font-size:11.5px; color:var(--text-faint); font-weight:300; margin-bottom:12px; line-height:1.5; }
.qrow { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.qrow input { flex:1; min-width:0; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-md);
  padding:10px 13px; color:var(--text); font-size:13px; font-family:inherit; outline:0; transition:border-color .2s var(--ease); }
.qrow input:focus { border-color:rgba(106,210,199,.45); }
.qdel { flex:0 0 auto; width:30px; height:30px; border-radius:8px; cursor:pointer; border:1px solid var(--line);
  background:var(--glass-2); color:var(--text-faint); font-size:12px; transition:all .2s var(--ease); }
.qdel:hover { color:#f0a59a; border-color:rgba(232,120,100,.34); background:rgba(232,120,100,.1); }
.addq { margin-top:4px; }
.set-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.changelog { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.changelog li { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:12px; color:var(--text-dim); font-weight:300; }
.changelog li small { color:var(--text-ghost); font-size:10.5px; flex:0 0 auto; }
.settings-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 20px; border-top:1px solid var(--line); }
.settings-foot-right { display:flex; align-items:center; gap:12px; }
.set-status { font-size:12px; color:var(--teal-soft); font-weight:500; }

/* report-issue modal */
.report-modal { width:460px; }
.report-body { padding:16px 20px 18px; }
.report-sub { margin:0 0 12px; font-size:12.5px; color:var(--text-dim); font-weight:300; line-height:1.5; }
.report-body textarea { width:100%; min-height:120px; resize:vertical; background:var(--bg-1);
  border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; color:var(--text);
  font-size:13px; font-family:inherit; line-height:1.5; outline:0; transition:border-color .2s var(--ease); }
.report-body textarea:focus { border-color:rgba(106,210,199,.45); }
.report-foot { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:14px; }

/* admin Logins tool modal */
.login-modal { width:480px; }
.login-body { padding:18px 20px 20px; }
.login-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.login-row .k { color:var(--text-faint); font-weight:300; }
.login-row .v { color:var(--text); font-weight:500; }
.login-note { font-size:12px; color:var(--text-faint); font-weight:300; line-height:1.55; margin:14px 0 16px; }
.login-status { margin-top:12px; font-size:12.5px; color:var(--text-dim); }
.login-result { margin-top:16px; }
.login-ok { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--teal-soft); font-weight:500; margin-bottom:12px; }
.login-ok b { color:var(--teal); }
.login-linkrow { display:flex; align-items:center; gap:8px; }
.login-linkrow input { flex:1; min-width:0; background:var(--bg-1); border:1px solid var(--line);
  border-radius:var(--r-md); padding:10px 12px; color:var(--text-dim); font-size:11.5px; outline:0; }
.login-linkrow input:focus { border-color:rgba(106,210,199,.45); color:var(--text); }

/* co-branded header — Fusion Line × the client's own logo (used in header + form preview) */
.cobrand-x { color:var(--text-ghost); font-size:16px; font-weight:300; margin:0 -2px; }
/* co-brand logo: every client logo renders as a clean WHITE silhouette — the approved "fused" lockup
   (Fusion Line x the client in one unified ink). Works for ANY logo because the bake trims solid
   backgrounds to transparent; the client's COLOUR identity is carried by the --accent, not the logo. */
/* the client's REAL logo (true colours + their own lettering), trimmed of its background so it blends
   with no box; only the SIZE is normalised (height) so every client reads uniform on the dashboard. */
.cobrand-logo { width:auto; display:block; object-fit:contain; }
/* a genuinely dark/black wordmark would vanish on the dark UI -> sit it on a subtle light plate so it reads */
.cobrand-logo.on-plate { background:#f4f4f5; border-radius:7px; padding:4px 7px; }
/* header: sized up to ~42px so the client reads as an equal partner to the 54px FL wordmark
   (the extra .brand specificity also stops the FL `.brand img` 54px/screen-blend rule winning) */
.brand .cobrand-logo { height:42px; max-width:160px; }
/* initials-badge fallback — shown when no logo source loads, so the co-brand is NEVER a broken box */
.cobrand-initials { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  height:42px; min-width:42px; padding:0 10px; border-radius:9px; font-family:"Orbitron",sans-serif;
  font-weight:600; font-size:15px; letter-spacing:.04em; color:var(--teal-soft);
  background:linear-gradient(160deg, rgba(106,210,199,.16), rgba(230,184,150,.06)); border:1px solid rgba(106,210,199,.22); }
.pv-cobrand .cobrand-initials { height:26px; min-width:26px; padding:0 7px; font-size:11px; border-radius:6px; }
/* co-brand preview on the admin add/edit form */
.pv-cobrand { display:flex; align-items:center; gap:9px; width:100%; padding:10px 12px;
  border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--line); }
.pv-cobrand img { height:22px; width:auto; max-width:84px; object-fit:contain; border-radius:4px; }
.pv-cobrand .cobrand-logo { height:26px; max-width:96px; }
.pv-cobrand .cobrand-x { font-size:12px; }
.pv-cobrand b { font-size:12.5px; color:var(--text); font-weight:500; margin-left:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* corner widget as a tappable "Cleo on duty / hear Cleo" control (client view) */
.widget-btn { cursor:pointer; font-family:inherit; text-align:left;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.widget-btn .wm { text-align:left; }
.widget-btn:hover { transform:translateY(-2px); box-shadow:var(--sh-lift), 0 0 52px -16px rgba(106,210,199,.7); }
.widget-btn.live { border-color:rgba(232,120,100,.42); }
.widget-btn.live .ws { color:var(--warm-soft); }

@media (max-width:980px) {
  .tiles.vstat { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .tiles.vstat { grid-template-columns:1fr; }
  .set-grid { grid-template-columns:1fr; }
}

/* ============================================================
   CLIENT VIEW v2 — Command Hero (Claude Design "on-duty" hero) + bento + self-serve rail.
   The client dashboard IS the product: one accent-themed hero band, then a wide leads list
   beside a self-serve action rail. Per-client colour comes from --accent (set on .client-shell).
   ============================================================ */

/* --- Command Hero (Claude Design "Cleo Hero"): the fused, orb-led product centrepiece, themed in the
   client's vivid OKLab --accent. Schibsted Grotesk display + IBM Plex Mono labels. --- */
.client-hero { position:relative; padding:0; border:1px solid rgba(255,255,255,.07); border-radius:24px;
  overflow:hidden; background:#0b0a0a; box-shadow:0 50px 130px -45px rgba(0,0,0,.85);
  font-family:"Schibsted Grotesk", system-ui, sans-serif; color:rgba(245,244,242,.92); }
.client-hero::before { display:none; }   /* the base .panel gradient border — we own this one */
.ch-wash { position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 22% 42%, var(--accent-glow, rgba(106,210,199,.16)), transparent 60%),
    radial-gradient(900px 600px at 92% 8%, rgba(255,255,255,.035), transparent 55%),
    radial-gradient(120% 120% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%); }
.ch-inner { position:relative; z-index:1; padding:40px 48px; }
.ch-grid { display:grid; grid-template-columns:0.92fr 1.08fr; align-items:center; gap:48px; padding:8px 0 36px; }
.ch-orbwrap { position:relative; display:flex; align-items:center; justify-content:center; min-height:360px; }
.ch-orb-halo { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--accent-glow, rgba(106,210,199,.2)), transparent 68%); filter:blur(8px); }
.hero-orb-canvas { position:relative; cursor:pointer; }
.ch-copy { max-width:560px; }
.ch-kicker { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.ch-kline { width:24px; height:1px; background:var(--accent-line, rgba(106,210,199,.4)); }
.ch-ktx { font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,244,242,.5); }
.ch-pill { display:inline-flex; align-items:center; gap:8px; margin-left:2px; padding:6px 12px 6px 10px;
  border:1px solid var(--accent-line, rgba(106,210,199,.3)); border-radius:999px; background:var(--accent-soft, rgba(106,210,199,.1));
  font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent, #6AD2C7); white-space:nowrap; }
.ch-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--accent, #6AD2C7); animation:cleoPulse 2.4s ease-in-out infinite; }
@keyframes cleoPulse { 0%,100%{ opacity:.45; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.1); } }
.ch-h1 { margin:0; font-weight:500; font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.02em; color:rgba(245,244,242,.96); }
.ch-sub { margin:20px 0 0; max-width:480px; font-size:17px; line-height:1.6; color:rgba(245,244,242,.58); }
.ch-ctarow { margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ch-cta2 { appearance:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:999px; background:var(--accent, #6AD2C7); color:#0b0a0a;
  font-family:"Schibsted Grotesk", sans-serif; font-weight:600; font-size:16px; letter-spacing:.01em;
  box-shadow:0 8px 30px var(--accent-glow, rgba(106,210,199,.35)); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.ch-cta2:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 12px 38px var(--accent-line, rgba(106,210,199,.45)); }
.ch-cta2:active { transform:translateY(0); }
.ch-cta2:disabled { opacity:.65; cursor:default; transform:none; filter:none; }
.ch-micro { font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.06em; color:rgba(245,244,242,.42); }
.ch-stats { display:grid; gap:1px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07); border-radius:18px; overflow:hidden; }
.ch-stat2 { background:#0b0a0a; padding:24px 24px 22px; text-align:left; border:0; font-family:inherit; }
.ch-stat2-cta { cursor:pointer; }
.ch-stat2-cta:hover .ch-stat2-lbl { color:rgba(245,244,242,.7); }
.ch-stat2-num { font-weight:600; font-size:clamp(28px,2.8vw,38px); line-height:1; letter-spacing:-.02em; color:rgba(245,244,242,.92); }
.ch-stat2-lbl { margin-top:12px; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(245,244,242,.46); }

/* --- bento: a wide leads list beside the self-serve action rail --- */
.client-bento { display:grid; grid-template-columns:1.62fr 1fr; gap:22px; align-items:start; }
.client-bento > * { min-width:0; }
.client-rail .rail-body { padding:14px 18px 20px; display:flex; flex-direction:column; gap:12px; }
.rail-cov { padding:13px 15px; border-radius:var(--r-md); background:var(--glass-2); border:1px solid var(--line); }
.rail-cov-top { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text-dim); font-weight:500; }
.rail-cov-top svg { color:var(--teal-soft); flex:0 0 auto; }
.rail-cov-top .covtoggle { margin-left:auto; }
.rail-hint { font-size:11px; color:var(--text-faint); font-weight:300; margin-top:9px; line-height:1.5; }
.rail-action { display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
  padding:13px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--glass-2);
  color:var(--text-dim); transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); font-family:inherit; }
.rail-action:hover { border-color:var(--line-teal); background:rgba(106,210,199,.06); color:var(--text); transform:translateY(-1px); }
.rail-action .ra-ic { width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center;
  background:rgba(106,210,199,.1); border:1px solid rgba(106,210,199,.22); color:var(--teal-soft); }
.rail-action .ra-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rail-action .ra-main b { font-size:13px; color:var(--text); font-weight:500; }
.rail-action .ra-main small { font-size:11px; color:var(--text-faint); font-weight:300; }
.rail-action > svg:last-child { color:var(--text-faint); flex:0 0 auto; }

@media (max-width:1080px) {
  .client-bento { grid-template-columns:1fr; }
}
@media (max-width:980px) {
  .ch-grid { grid-template-columns:1fr; gap:24px; text-align:center; }
  .ch-orbwrap { min-height:260px; order:-1; }
  .ch-copy { max-width:none; margin:0 auto; }
  .ch-kicker, .ch-ctarow { justify-content:center; }
  .ch-sub { margin-left:auto; margin-right:auto; }
}
@media (max-width:780px) {
  .ch-inner { padding:30px 22px; }
  .ch-stats { grid-template-columns:repeat(2,1fr) !important; }
}
/* B2 (18 Jul 2026): the sub-440px phone pass for the CLIENT view (Leo works from his phone). The
   hero, stats, bento and modals already reflow at 780-1080px; this closes the small-phone gap so
   nothing overflows or clips at 390px, and every tap target stays comfortable. Desktop is untouched. */
@media (max-width:440px) {
  .shell { padding:18px 12px 104px; }
  /* Top bar: shrink the brand block so the official Cleo x Kin lockup still fits, keeping the full
     "CLEO . AI RECEPTION / powered by kin partners" lockup intact, just smaller. Wrap as a safety. */
  .topbar { gap:12px; flex-wrap:wrap; padding:2px 0 20px; }
  .brand { gap:10px; }
  .brand img { height:34px; }
  .brand .sep { display:none; }
  .kin-cleoline { font-size:11px; letter-spacing:.12em; }
  .kin-word { font-size:9px; }
  .kin-pby { font-size:6.5px; }
  .kin-mark { width:12px; }
  .ch-inner { padding:24px 15px; }
  .ch-grid { padding:4px 0 24px; }
  .ch-orbwrap { min-height:200px; }
  .ch-stats { grid-template-columns:1fr !important; }
  .ch-stat2 { padding:18px 18px 16px; }
  .ch-h1 { font-size:clamp(27px,8vw,34px); }
  .ch-sub { font-size:15px; margin-top:16px; }
  .ch-cta2 { width:100%; justify-content:center; padding:14px 22px; }
  .ch-ctarow { gap:12px; }
  .modal-backdrop { padding:10px; }
  .modal-x { width:40px; height:40px; }          /* >= 40px tap target on the close control */
  .callcard .ct { gap:10px; padding:13px 13px; flex-wrap:wrap; }
  .callcard .cbiz { flex-wrap:wrap; row-gap:3px; }
  .callcard .cright { flex:1 0 100%; min-width:0; display:flex; flex-direction:row;
    flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; padding-left:0; }
  .callcard .cright-top { width:100%; min-width:0; justify-content:flex-end; flex-wrap:wrap; }
  .callcard .lead-quick { flex:1 1 100%; min-width:0; justify-content:flex-end; }
  .set-grid { grid-template-columns:1fr; }
  /* Panel header stacks so the controls (Leads/Callers, time filters, Excel export, refresh) get
     the full width and left-align, instead of the Excel button being pushed off the right edge
     into the panel's overflow:hidden clip (Mesh: you must be able to see it to click it). */
  .phead { flex-direction:column; align-items:stretch; gap:10px; }
  .phead-right { justify-content:flex-start; }
  .phead-right .seg.sm { flex-wrap:wrap; }
  /* Staging is a dense admin tool. On a phone, each clone becomes a card so every action stays
     visible and tappable instead of disappearing beyond the panel edge. */
  .staging-panel .tbl,
  .staging-panel .tbl tbody,
  .staging-panel .tbl tr,
  .staging-panel .tbl td { display:block; width:100%; }
  .staging-panel .tbl thead { display:none; }
  .staging-panel .tbl tr { padding:13px 14px; border-top:1px solid var(--line); }
  .staging-panel .tbl td { padding:5px 0; border:0; }
  .staging-panel .staging-actions {
    justify-content:flex-start;
    flex-wrap:wrap;
    white-space:normal;
    gap:7px;
  }
  .staging-panel .staging-actions select { max-width:100%; }
  .client-list-panel .tbl,
  .client-list-panel .tbl tbody,
  .client-list-panel .tbl tr,
  .client-list-panel .tbl td { display:block; width:100%; }
  .client-list-panel .tbl thead { display:none; }
  .client-list-panel .tbl tr { padding:13px 14px; border-top:1px solid var(--line); }
  .client-list-panel .tbl td { padding:5px 0; border:0; }
  .demo-client-list .tbl td:first-child,
  .demo-client-list .tbl td:nth-child(2),
  .demo-client-list .tbl td:last-child { width:100%; }
  .client-list-panel .row-actions {
    justify-content:flex-start;
    flex-wrap:wrap;
    white-space:normal;
    gap:7px;
  }
}

/* ── Callers view (the caller-memory surface) + returning-caller strip + first-login state ── */
.callerrow { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--glass-2); border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 16px; margin-bottom:8px; cursor:pointer; color:var(--text); font:inherit; }
.callerrow:hover { border-color:rgba(106,210,199,.26); }
.callerrow .cr-ava { flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(106,210,199,.10); color:var(--accent); }
.callerrow .cr-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.callerrow .cr-main b { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.callerrow .cr-main small { font-size:11.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.callerrow .cr-right { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.callerrow .cr-count { font-size:11px; font-weight:600; color:var(--accent);
  background:rgba(106,210,199,.10); border:1px solid rgba(106,210,199,.22);
  border-radius:12px; padding:2px 9px; white-space:nowrap; }
.callerrow .cr-right small { font-size:10.5px; color:var(--text-faint); white-space:nowrap; }

.repeatstrip { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--accent);
  background:rgba(106,210,199,.07); border:1px solid rgba(106,210,199,.16);
  border-radius:6px; padding:3px 8px; margin:3px 0 4px; width:fit-content; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.firstlogin { font-size:13px; line-height:1.65; color:var(--text-dim); padding:6px 2px 14px; max-width:640px; }

.client-tabs {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  width:fit-content;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(10,14,16,.72);
  overflow-x:auto;
}
.client-tabs button,
.workspace-switch button {
  border:0;
  border-radius:999px;
  color:var(--text-faint);
  background-color:transparent;
  padding:10px 18px;
  white-space:nowrap;
  cursor:pointer;
  font:600 12px/1 "Schibsted Grotesk",sans-serif;
}
.client-tabs button:hover,
.workspace-switch button:hover { color:var(--text); }
.client-tabs button.on,
.workspace-switch button.on {
  color:#07100e;
  background-color:var(--accent);
  box-shadow:0 7px 22px var(--accent-glow);
}
.workspace-switch {
  display:flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  max-width:100%;
  padding:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--glass-2);
}
.manage-workspace {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
}
.manage-workspace.reception { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.recent-activity .pfoot { padding:14px 18px 18px; }
.front-desk-cases { min-width:0; }
.case-toolbar {
  display:grid;
  grid-template-columns:minmax(220px,1fr) repeat(3,minmax(145px,auto));
  gap:9px;
  align-items:center;
  padding:14px 16px 4px;
}
.case-toolbar select,
.case-controls select {
  -webkit-appearance:none;
  appearance:none;
  min-width:0;
  background-color:rgba(20,28,40,.95);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236AD2C7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  color:#E6EDF3;
  font:600 12px/1.2 "Schibsted Grotesk",sans-serif;
  padding:8px 30px 8px 10px;
  cursor:pointer;
}
.case-toolbar select:focus,
.case-controls select:focus { outline:none; border-color:var(--accent); }
.mailbox-state {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text-faint);
  font-size:10.5px;
  letter-spacing:.04em;
}
.mailbox-state .td { width:6px; height:6px; border-radius:50%; background:#d7a96d; }
.mailbox-state.ready .td { background:var(--accent); box-shadow:0 0 9px var(--accent); }
.front-case-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:16px;
}
.front-case {
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.front-case.is-done { opacity:.68; }
.front-case-top,
.front-case-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.front-case b,
.front-case strong,
.front-case p {
  display:block;
  overflow-wrap:anywhere;
}
.front-case b { margin-top:12px; color:var(--text); }
.front-case > small { display:block; margin-top:3px; color:var(--text-faint); font-size:11px; }
.front-case strong { margin-top:5px; font-size:13px; color:var(--text-soft); }
.front-case p {
  margin:9px 0;
  font-size:12px;
  line-height:1.5;
  color:var(--text-faint);
}
.front-case-meta {
  justify-content:flex-start;
  flex-wrap:wrap;
  margin-top:12px;
  font-size:11px;
  color:var(--text-faint);
}
.front-case-meta span { padding:4px 8px; border:1px solid var(--line); border-radius:999px; }
.case-controls {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.case-controls label { display:flex; flex-direction:column; gap:5px; min-width:0; }
.case-controls label > span {
  color:var(--text-faint);
  font-size:9px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.case-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.case-error { color:#ff9c8f; font-size:12px; padding:10px 16px 0; }
.case-pages {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:9px;
  padding:2px 16px 16px;
  color:var(--text-faint);
  font-size:11px;
}
.case-priority {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-faint);
}
.case-priority.urgent { color:#ff9c8f; }
.case-team-body { padding:16px 18px 20px; }
.case-team-body > p { margin:0 0 14px; color:var(--text-faint); font-size:12px; line-height:1.55; }
.case-owner-list { display:flex; flex-direction:column; gap:8px; }
.case-owner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--glass-2);
}
.case-owner span { display:flex; align-items:center; gap:8px; color:var(--text); font-size:12px; }
.case-owner button {
  border:0;
  background-color:transparent;
  color:var(--text-faint);
  cursor:pointer;
  font:inherit;
  font-size:11px;
}
.case-owner button:hover { color:#ff9c8f; }
.case-owner-add { display:flex; gap:8px; margin-top:14px; }
.case-owner-add input {
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg-1);
  color:var(--text);
  padding:9px 11px;
  font:inherit;
  font-size:12px;
}
.empty.compact { padding:16px 0; }
@media (max-width:1000px) {
  .manage-workspace.reception { grid-template-columns:1fr; }
  .case-toolbar { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .case-toolbar .search { grid-column:1/-1; }
}
@media (max-width:900px) {
  .front-case-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .client-tabs { width:100%; }
  .client-tabs button { flex:1 0 auto; padding:10px 14px; }
  .workspace-switch { width:100%; }
  .workspace-switch button { flex:1; }
  .case-toolbar { grid-template-columns:1fr; }
  .case-toolbar .search { grid-column:auto; }
  .case-controls { grid-template-columns:1fr; }
  .case-owner-add { flex-direction:column; }
  .case-pages { justify-content:center; }
}