/* ===================================================================
   zenontechno — loan-recovery voice assistant
   Ported from the Claude Design handoff (voice-app.jsx / Voice Assistant.html)
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ===== Theme tokens ===== */
:root {
  --accent: #2E9E8C;
  --accent-soft: #5BC4B4;
  --accent-deep: #2B3A6B;

  --bg: #F7F9FC;
  --bg-grad-1: #E4F1EE;
  --bg-grad-2: #E8ECF6;
  --bg-grad-3: #EAF3F0;

  --surface: #FFFFFF;
  --surface-2: #F4F7FB;
  --surface-3: #EDF2F9;
  --border: #E5EAF2;
  --border-strong: #D7DEEA;

  --ink: #0B1220;
  --ink-2: #46506A;
  --ink-3: #8590A6;

  --pill-bg: linear-gradient(135deg, #2B3A6B, #3AAE9D);
  --pill-ink: #FFFFFF;

  --bubble-ai: #FFFFFF;
  --bubble-ai-ink: #1A2233;
  --bubble-user: #2B3A6B;
  --bubble-user-ink: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(16,28,54,.06), 0 4px 14px rgba(16,28,54,.05);
  --shadow-md: 0 10px 30px rgba(16,28,54,.10), 0 2px 8px rgba(16,28,54,.06);
  --shadow-lg: 0 30px 80px rgba(16,28,54,.16);

  --mint: #1F8A5B;
  --good-bg: #E7F6EE;

  --ring-stroke: rgba(58,174,157,.38);
  --orb-glow: rgba(58,174,157,.55);
  --core-shadow: rgba(43,58,107,.45);
}
[data-theme="dark"] {
  --accent: #4FC3B0;
  --accent-soft: #7FD8CC;
  --accent-deep: #2B3A6B;

  --bg: #05070E;
  --bg-grad-1: #103029;
  --bg-grad-2: #13203D;
  --bg-grad-3: #0E2A26;

  --surface: rgba(20, 26, 38, 0.72);
  --surface-2: rgba(31, 39, 56, 0.66);
  --surface-3: rgba(40, 50, 70, 0.6);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);

  --ink: #F2F6FF;
  --ink-2: #AEBBD4;
  --ink-3: #6B7896;

  --pill-bg: linear-gradient(135deg, #3AAE9D, #2B3A6B);
  --pill-ink: #FFFFFF;

  --bubble-ai: rgba(30, 38, 54, 0.85);
  --bubble-ai-ink: #E7ECF5;
  --bubble-user: linear-gradient(135deg, #4FC3B0, #2B3A6B);
  --bubble-user-ink: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.45);
  --shadow-md: 0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-lg: 0 40px 100px rgba(0,0,0,.7);

  --mint: #4FE3A6;
  --good-bg: rgba(20, 60, 46, 0.5);

  --ring-stroke: rgba(79,195,176,.38);
  --orb-glow: rgba(79,195,176,.7);
  --core-shadow: rgba(79,195,176,.45);
}

/* ===== Stage / shell ===== */
.va-stage{
  position:relative; height:100%; width:100%; overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% -10%, var(--bg-grad-1) 0%, transparent 55%),
    radial-gradient(110% 80% at 100% 0%, var(--bg-grad-2) 0%, transparent 50%),
    radial-gradient(120% 100% at 85% 115%, var(--bg-grad-3) 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:color .35s ease;
}
.va-shell{
  position:relative; z-index:2;
  width:min(1180px, 100%); height:min(760px, 100%);
  display:grid; grid-template-columns: 1.18fr .92fr; gap:18px;
  padding:18px;
}
@media (max-width: 880px){
  .va-stage{ height:100dvh; padding-bottom:0; }
  .va-shell{ display:block; width:100%; height:100%; padding:0; gap:0; }
}

/* ===== Card chrome ===== */
.va-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
  transition:border-color .4s ease;
}
@media (max-width: 880px){
  .va-card{ border-radius:0; border:none; box-shadow:none; min-height:0; }

  /* voice screen = full bleed */
  .va-card.voice{
    position:absolute; inset:0; display:flex;
    background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .va-card.voice .va-head{ padding-top:calc(env(safe-area-inset-top) + 16px); }
  .va-controls{ padding-bottom:calc(env(safe-area-inset-bottom) + 22px); }

  /* transcript / insights / summary = pull-up bottom sheet */
  .va-sheet-backdrop{
    display:block; position:fixed; inset:0; z-index:30;
    background:rgba(6,10,20,.46);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .va-sheet-backdrop.show{ opacity:1; pointer-events:auto; }

  .va-card.transcript{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:31;
    height:88%; max-height:88%;
    border-radius:26px 26px 0 0;
    border:1px solid var(--border); border-bottom:none;
    box-shadow:0 -24px 70px rgba(0,0,0,.32);
    transform:translateY(101%); transition:transform .36s cubic-bezier(.32,.82,.3,1);
    padding-bottom:calc(env(safe-area-inset-bottom) + 6px);
  }
  .va-card.transcript.open{ transform:translateY(0); }
  .va-grab{ display:flex; }
  .va-mob-only{ display:inline-flex; }
}

/* ===== Header ===== */
.va-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; }
.va-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.va-logo-img{ height:22px; width:auto; display:block; flex:none; }
/* zenontechno logo is a full-colour PNG — show it as-is in both themes (no invert). */
.va-brand-divider{ width:1px; height:22px; background:var(--border-strong); }
.va-brand-txt{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.va-brand-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; letter-spacing:-.01em; }
.va-brand-sub{ font-size:11px; color:var(--ink-3); font-weight:500; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.va-status{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--border);
  padding:7px 12px; border-radius:999px; white-space:nowrap;
}
.va-head-right{ display:flex; align-items:center; gap:9px; flex:none; }
.va-themebtn{
  width:34px; height:34px; border-radius:50%; flex:none; cursor:pointer;
  display:grid; place-items:center; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--border);
  transition:transform .18s ease, color .18s ease, border-color .18s ease;
}
.va-themebtn:hover{ color:var(--ink); border-color:var(--border-strong); transform:translateY(-1px); }
.va-themebtn svg{ width:17px; height:17px; }
.va-dot{ width:8px;height:8px;border-radius:50%; background:var(--ink-3); flex:none; }
.va-dot.live{ background:#19c37d; box-shadow:0 0 0 0 rgba(25,195,125,.5); animation:pulseDot 1.8s infinite; }
@keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(25,195,125,.45)} 70%{box-shadow:0 0 0 8px rgba(25,195,125,0)} 100%{box-shadow:0 0 0 0 rgba(25,195,125,0)} }

/* ===== Mobile bottom-sheet elements (hidden on desktop) ===== */
.va-sheet-backdrop{ display:none; }
.va-mob-only{ display:none; }
.va-grab{ display:none; align-items:center; justify-content:center; padding:10px 0 4px; cursor:pointer; border:none; background:none; }
.va-grab span{ width:42px; height:5px; border-radius:99px; background:var(--border-strong); }
.va-trigger{
  align-items:center; gap:7px; flex:none; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--border);
  padding:7px 11px; border-radius:999px; white-space:nowrap;
}
.va-trigger svg{ width:15px; height:15px; color:var(--accent); }
.va-trigger b{ color:var(--accent); margin-left:1px; }
html:not([data-theme="dark"]) .va-trigger svg{ color:#9A4FC0; }

/* ===== Orb area ===== */
.va-orbwrap{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,3.2vh,30px); padding:6px 22px 8px; }
.va-rings{ position:relative; width:clamp(184px,30vh,288px); height:clamp(184px,30vh,288px); display:grid; place-items:center; flex:none; }
.va-rings::before{ content:""; position:absolute; width:70%; height:70%; border-radius:50%;
  background:radial-gradient(circle, var(--orb-glow) 0%, transparent 70%);
  filter:blur(34px); opacity:.55; }
[data-theme="dark"] .va-rings::before{ opacity:.8; }
@media (max-width:880px){ .va-rings{ width:clamp(190px,30vh,248px); height:clamp(190px,30vh,248px); } }

.va-ring{
  position:absolute; border-radius:50%;
  border:1.5px solid var(--ring-stroke);
  will-change:transform,opacity;
}
.va-core{
  position:relative; width:clamp(84px,11vh,104px);height:clamp(84px,11vh,104px);border-radius:50%;
  background:
    radial-gradient(60% 60% at 35% 30%, var(--accent-soft) 0%, var(--accent) 45%, var(--accent-deep) 100%);
  box-shadow:0 18px 50px var(--core-shadow),
             inset 0 2px 10px rgba(255,255,255,.35);
  display:grid; place-items:center;
  will-change:transform;
}
.va-core::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
  mix-blend-mode:screen; opacity:.7; animation:spin 7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.va-core-icon{ display:grid; place-items:center; position:relative; z-index:2; color:#fff; }
.va-core-icon svg{ width:40px;height:40px; color:#fff; }

/* equalizer */
.va-eq{ display:flex; align-items:center; gap:4px; height:26px; position:relative; z-index:2; }
.va-eq i{ width:4px; border-radius:3px; background:#fff; height:6px; }

/* caption */
.va-caption{ text-align:center; max-width:440px; min-height:56px; }
.va-state-label{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:9px; }
.va-caption p{ margin:0; font-size:clamp(15px,2.3vh,18.5px); line-height:1.45; font-weight:500; color:var(--ink); letter-spacing:-.01em; }
.va-caption .muted{ color:var(--ink-3); font-weight:500; }

/* ===== Controls ===== */
.va-controls{ padding:14px 22px 22px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.ctrl-grp{ display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; }
.va-cluster{ display:flex; align-items:center; gap:14px; }
.va-cbtn{
  width:58px;height:58px;border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--ink); cursor:pointer;
  display:grid;place-items:center; transition:transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.va-cbtn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.va-cbtn svg{ width:23px;height:23px; }
.va-cbtn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.va-cbtn.muted-on{ background:transparent; border-color:var(--border-strong); color:var(--ink-3); }
.va-cbtn.end{ background:#E8483C; border-color:#E8483C; color:#fff; width:64px;height:64px; box-shadow:0 12px 26px rgba(232,72,60,.35); }
.va-cbtn.end:hover{ background:#d63b30; }

.va-pill{
  border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:15px;
  color:var(--pill-ink); background:var(--pill-bg);
  padding:16px 30px; border-radius:999px; display:inline-flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;
}
.va-pill:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.va-pill svg{ width:18px;height:18px; }
.va-pill.ghost{ background:var(--surface-2); color:var(--ink); border:1px solid var(--border-strong); box-shadow:none; }

.va-hint{ font-size:12px; color:var(--ink-3); font-weight:500; text-align:center; }

/* gender / voice selector (idle screen) */
.va-genderseg{ display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border); padding:5px; border-radius:999px; }
.va-seg{ border:none; background:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--ink-3); padding:9px 16px; border-radius:999px; transition:.15s; white-space:nowrap; }
.va-seg.active{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.va-seg:hover:not(.active){ color:var(--ink); }
html:not([data-theme="dark"]) .va-seg.active{ background:linear-gradient(122deg, #2B3A6B 0%, #2F8F80 55%, #3AAE9D 100%); }

/* EDU mode toggle */
.va-edutoggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--border-strong); padding:9px 16px; border-radius:999px; transition:.15s; }
.va-edutoggle svg{ width:16px; height:16px; }
.va-edutoggle:hover{ color:var(--ink); border-color:var(--accent); }
.va-edutoggle.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.va-edutoggle.active svg{ color:#fff; }
html:not([data-theme="dark"]) .va-edutoggle.active{ background:linear-gradient(122deg,#2B3A6B,#2F8F80 55%,#3AAE9D); border-color:transparent; }

/* type bar */
.va-typebar{ display:flex; align-items:center; gap:8px; width:min(420px,100%);
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:999px; padding:5px 5px 5px 16px; }
.va-typebar input{ flex:1; min-width:0; border:none; background:none; outline:none; color:var(--ink);
  font-family:inherit; font-size:14px; }
.va-typebar input::placeholder{ color:var(--ink-3); }
.va-sendbtn{ flex:none; width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:#fff; display:grid; place-items:center; }
.va-sendbtn svg{ width:18px; height:18px; }

/* ===== Right card: tabs ===== */
.va-tabs{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px 12px; border-bottom:1px solid var(--border); }
.va-tabbtns{ display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border); padding:4px; border-radius:999px; }
.va-tab{ border:none; background:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink-3); padding:7px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; transition:.15s; }
.va-tab svg{ width:15px; height:15px; }
.va-tab.on{ background:var(--accent); color:#fff; }
.va-tab:hover:not(.on){ color:var(--ink); }
.va-tab-badge{ background:var(--mint); color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px;
  border-radius:999px; display:inline-grid; place-items:center; padding:0 4px; }
.va-tab.on .va-tab-badge{ background:rgba(255,255,255,.3); }
.va-tr-meta{ font-size:11.5px; color:var(--ink-3); font-weight:600; }

.va-tab-pane{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* ===== Transcript ===== */
.va-tr-head{ padding:16px 22px 12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.va-tr-title{ font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.va-tr-title svg{ width:16px;height:16px; color:var(--accent); }

.va-tr-body{ flex:1; overflow-y:auto; padding:18px 20px 22px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; }
.va-tr-body::-webkit-scrollbar{ width:8px; }
.va-tr-body::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; }

.va-msg{ display:flex; flex-direction:column; gap:5px; max-width:86%; animation:rise .34s cubic-bezier(.2,.7,.3,1); }
@keyframes rise{ from{ opacity:.2; transform:translateY(9px);} to{opacity:1;transform:none;} }
.va-msg.ai{ align-self:flex-start; align-items:flex-start; }
.va-msg.user{ align-self:flex-end; align-items:flex-end; }
.va-msg.system{ align-self:center; align-items:center; max-width:100%; }
.va-who{ font-size:11px; font-weight:700; color:var(--ink-3); padding:0 6px; letter-spacing:.02em; }
.va-bubble{ padding:11px 15px; border-radius:16px; font-size:14.5px; line-height:1.5; font-weight:500; }
.va-msg.ai .va-bubble{ background:var(--bubble-ai); color:var(--bubble-ai-ink); border:1px solid var(--border); border-bottom-left-radius:5px; box-shadow:var(--shadow-sm); }
.va-msg.user .va-bubble{ background:var(--bubble-user); color:var(--bubble-user-ink); border-bottom-right-radius:5px; }
.va-msg.system .va-bubble{ background:transparent; color:var(--ink-3); font-size:12px; font-style:italic; font-weight:500; padding:4px 10px; }

.va-typing{ display:inline-flex; gap:4px; align-items:center; padding:2px 1px; }
.va-typing i{ width:7px;height:7px;border-radius:50%; background:var(--ink-3); animation:bob 1.1s infinite; }
.va-typing i:nth-child(2){ animation-delay:.15s; } .va-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bob{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-5px); opacity:1 } }

.va-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--ink-3); gap:10px; padding:30px; margin:auto; }
.va-empty svg{ width:34px;height:34px; opacity:.5; }
.va-empty p{ margin:0; font-size:13.5px; max-width:240px; line-height:1.5; }

/* ===== Insights panels ===== */
.va-insights{ flex:1; overflow-y:auto; padding:16px 18px 20px; display:flex; flex-direction:column; gap:12px; }
.va-insights::-webkit-scrollbar{ width:8px; }
.va-insights::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; }
.va-panel{ background:var(--surface-2); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.va-panel-head{ display:flex; align-items:center; gap:9px; padding:12px 15px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); border-bottom:1px solid var(--border); }
.va-panel-head svg{ width:16px; height:16px; color:var(--accent); flex:none; }
.va-panel-head.good{ color:var(--mint); }
.va-panel-head.good svg{ color:var(--mint); }
.va-panel-body{ padding:14px 15px; font-size:13.5px; color:var(--ink); }
.va-ph{ color:var(--ink-3); font-size:13px; font-style:italic; }

.kb-results{ display:flex; flex-direction:column; gap:9px; }
.kb-query{ font-size:12px; color:var(--ink-3); }
.kb-chunk{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.5; color:var(--ink-2); }

.info-grid{ display:grid; grid-template-columns:auto 1fr; gap:8px 14px; align-items:baseline; }
.info-label{ font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.info-value{ font-size:13.5px; color:var(--ink); font-weight:600; word-break:break-word; }
.info-value.highlight{ color:var(--accent); }
.info-value.success{ color:var(--mint); }

/* ===== Summary ===== */
.va-summary{ flex:1; overflow-y:auto; padding:16px 20px 22px; display:flex; flex-direction:column; gap:12px; }
.va-summary::-webkit-scrollbar{ width:8px; }
.va-summary::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; }
.va-outcome-badge{ align-self:flex-start; font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px;
  background:var(--good-bg); color:var(--mint); }
.va-outcome-badge.neutral{ background:var(--surface-2); color:var(--ink-2); }
.va-sum-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.va-stat{ background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:13px 14px; }
.va-stat .k{ font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.va-stat .v{ font-size:19px; font-weight:700; color:var(--ink); margin-top:4px; letter-spacing:-.01em; }
.va-stat .v.sm{ font-size:15px; }
.va-stat .v.good{ color:var(--mint); }
.va-actions{ background:var(--good-bg); border-radius:16px; padding:14px 16px; }
.va-actions .t{ font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:8px; display:flex; gap:7px; align-items:center; }
.va-actions .t svg{ width:15px; height:15px; flex:none; }
.va-actions ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.va-actions li{ font-size:13px; color:var(--ink); font-weight:500; }
.va-sum-section-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2);
  display:flex; align-items:center; gap:7px; margin-top:4px; }
.va-sum-section-title svg{ width:15px; height:15px; color:var(--accent); }
.va-sum-transcript{ display:flex; flex-direction:column; gap:12px; margin-top:2px; }

/* ===== Light-mode brand (logo gradient) overrides ===== */
html:not([data-theme="dark"]) .va-core{
  background:radial-gradient(125% 125% at 28% 18%, #5BC4B4 0%, #3AAE9D 42%, #2B3A6B 100%);
  box-shadow:0 18px 48px rgba(43,58,107,.34), 0 10px 26px rgba(58,174,157,.22), inset 0 2px 10px rgba(255,255,255,.45);
}
html:not([data-theme="dark"]) .va-rings::before{
  background:radial-gradient(circle, rgba(58,174,157,.5) 0%, rgba(43,58,107,.3) 45%, transparent 72%);
}
html:not([data-theme="dark"]) .va-ring{
  border-color:rgba(58,174,157,.42);
}
html:not([data-theme="dark"]) .va-pill:not(.ghost){
  background:linear-gradient(122deg, #2B3A6B 0%, #2F8F80 55%, #3AAE9D 100%);
  color:#fff;
}
html:not([data-theme="dark"]) .va-state-label{
  background:linear-gradient(120deg, #2B3A6B 0%, #2F8F80 50%, #3AAE9D 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html:not([data-theme="dark"]) .va-msg.user .va-bubble{
  background:linear-gradient(122deg, #2B3A6B 0%, #3AAE9D 100%);
}
html:not([data-theme="dark"]) .va-tab.on,
html:not([data-theme="dark"]) .va-sendbtn{
  background:linear-gradient(122deg, #2B3A6B 0%, #2F8F80 55%, #3AAE9D 100%);
}
html:not([data-theme="dark"]) .va-tr-title svg,
html:not([data-theme="dark"]) .va-panel-head:not(.good) svg,
html:not([data-theme="dark"]) .va-sum-section-title svg,
html:not([data-theme="dark"]) .va-empty svg{ color:#2E9E8C; }

/* ===== Small phones ===== */
@media (max-width: 520px){
  .va-head{ padding:13px 15px; gap:8px; }
  .va-brand{ gap:9px; }
  .va-brand-sub{ display:none; }
  .va-status{ font-size:11px; padding:6px 10px; gap:6px; }
  .va-head-right{ gap:7px; }
  .va-orbwrap{ padding:4px 14px 4px; gap:clamp(10px,2.2vh,20px); }
  .va-caption{ min-height:48px; }
  .va-controls{ padding:12px 16px 18px; gap:12px; }
  .va-cluster{ gap:12px; }
  .va-cbtn{ width:52px; height:52px; }
  .va-cbtn.end{ width:58px; height:58px; }
  .va-pill{ padding:14px 26px; font-size:14px; }
  .va-tabs{ padding:12px 14px 10px; }
  .va-tr-body{ padding:14px 14px 18px; gap:12px; }
  .va-insights{ padding:14px 14px 18px; }
  .va-summary{ padding:14px 16px 18px; }
  .va-msg{ max-width:90%; }
  .va-typebar{ width:100%; }
}