/* VoZara — core components: voice orb + trust layer (Oct 2026).
   Imported by styles.css. Class names are the contract; JSX components in this folder render them. */

/* Voice orb — Zara's presence. data-state: idle | listen | think | speak | handoff */
.vz-orb{--c0:#0F766E;--c1:#14B8A6;--c2:#22D3EE;--glow:rgba(20,184,166,.35);position:relative;display:inline-block;flex-shrink:0;width:64px;height:64px;border-radius:50%;isolation:isolate;animation:vzBreathe 4s var(--ease-in-out-cubic) infinite}
.vz-orb::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 28%),radial-gradient(circle at 65% 75%,var(--c2) 0,transparent 60%),radial-gradient(circle at 30% 70%,var(--c1) 0,transparent 65%),var(--c0)}
.vz-orb::after{content:"";position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);z-index:-1}
.vz-orb[data-state="listen"]{--c0:#0E7490;--c1:#06B6D4;--c2:#67E8F9;--glow:rgba(6,182,212,.55);animation:vzListen 1.1s var(--ease-in-out-cubic) infinite}
.vz-orb[data-state="think"]{--c0:#3B4A8C;--c1:#6D7FD6;--c2:#22D3EE;--glow:rgba(109,127,214,.45);animation-duration:2.2s}
.vz-orb[data-state="think"]::before{animation:vzDrift 3s linear infinite}
.vz-orb[data-state="speak"]{--c0:#0D9488;--c1:#2DD4BF;--c2:#A5F3FC;--glow:rgba(45,212,191,.6);animation:vzSpeak .9s var(--ease-in-out-cubic) infinite}
.vz-orb[data-state="handoff"]{--c0:#92400E;--c1:#F59E0B;--c2:#FDE68A;--glow:rgba(245,158,11,.45);animation-duration:3s}
@keyframes vzBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes vzListen{0%,100%{transform:scale(1)}30%{transform:scale(1.09)}60%{transform:scale(.98)}}
@keyframes vzSpeak{0%,100%{transform:scale(1)}25%{transform:scale(1.06)}50%{transform:scale(1.01)}75%{transform:scale(1.08)}}
@keyframes vzDrift{to{transform:rotate(360deg)}}

/* Status dot — matches orb state */
.vz-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--ink-300);box-shadow:0 0 0 3px rgba(176,177,184,.2)}
.vz-status-dot[data-state="idle"]{background:var(--state-idle);box-shadow:0 0 0 3px rgba(20,184,166,.18)}
.vz-status-dot[data-state="listen"]{background:var(--state-listen);box-shadow:0 0 0 3px rgba(6,182,212,.2)}
.vz-status-dot[data-state="think"]{background:var(--state-think);box-shadow:0 0 0 3px rgba(109,127,214,.2)}
.vz-status-dot[data-state="speak"]{background:var(--state-speak);box-shadow:0 0 0 3px rgba(45,212,191,.22)}
.vz-status-dot[data-state="handoff"]{background:var(--state-handoff);box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.vz-status-dot[data-state="connecting"]{background:transparent;border:1.5px solid var(--ink-300);box-shadow:none;width:7px;height:7px}

/* Source chip — where an answer came from */
.vz-sources{display:flex;flex-wrap:wrap;gap:6px}
.vz-source-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:12.5px;font-weight:500;line-height:1;padding:6px 10px 6px 8px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-strong);color:var(--fg-muted);white-space:nowrap;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out-quint),color var(--dur-fast)}
a.vz-source-chip:hover{border-color:var(--accent-teal);color:var(--fg)}
.vz-source-chip .material-symbols-rounded{font-size:15px;color:var(--accent-teal)}
.vz-dark .vz-source-chip .material-symbols-rounded,[data-theme="dark"] .vz-source-chip .material-symbols-rounded{color:#5EEAD4}

/* Grounded line */
.vz-grounded{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-family:var(--font-sans);font-size:12.5px;color:var(--fg-subtle)}
.vz-grounded>span{white-space:nowrap}
.vz-grounded i{font-style:normal;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;color:var(--teal-700);font-weight:600}
.vz-dark .vz-grounded i,[data-theme="dark"] .vz-grounded i{color:#5EEAD4}
.vz-grounded i::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-500);box-shadow:0 0 0 3px rgba(13,148,136,.15)}

/* Handoff card — honest escalation */
.vz-handoff{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:20px;background:var(--amber-50);border:1px solid rgba(245,158,11,.25);font-family:var(--font-sans);text-align:left}
.vz-handoff-icon{font-size:22px!important;color:#B45309}
.vz-handoff-title{display:block;font-weight:600;font-size:15px;color:var(--ink-950);margin-bottom:2px}
.vz-handoff-body{margin:0;font-size:14px;line-height:1.45;color:var(--ink-600)}
.vz-handoff-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* Small pill buttons used inside trust components */
.vz-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-sans);font-weight:600;font-size:14px;padding:9px 16px;border-radius:var(--r-full);border:0;cursor:pointer;transition:all var(--dur-fast) var(--ease-out-quint)}
.vz-btn-dark{background:var(--ink-950);color:#fff}.vz-btn-dark:hover{background:var(--ink-700)}
.vz-btn-ghost{background:#fff;color:var(--ink-950);border:1px solid var(--border-strong)}.vz-btn-ghost:hover{border-color:var(--ink-300)}

/* Transcript row */
.vz-transcript{display:flex;flex-direction:column;gap:12px}
.vz-transcript-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;font-family:var(--font-sans);font-size:14.5px;line-height:1.5;color:var(--fg)}
.vz-transcript-time{font-family:var(--font-mono);font-size:12px;color:var(--fg-subtle);padding-top:2px;font-variant-numeric:tabular-nums}
.vz-transcript-who{display:block;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-subtle)}
.vz-transcript-row[data-agent="true"] .vz-transcript-who{color:var(--teal-700)}
.vz-transcript-live::after{content:"";display:inline-block;width:2px;height:15px;background:var(--teal-500);margin-left:2px;vertical-align:-2px;animation:vzCaret 1s steps(2) infinite}
@keyframes vzCaret{50%{opacity:0}}

/* Trust badge */
.vz-trust-badges{display:flex;flex-wrap:wrap;gap:10px}
.vz-trust-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:18px;background:var(--bg-trust);border:1px solid var(--sand-300);font-family:var(--font-sans);text-align:left}
.vz-trust-badge-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:#fff;flex-shrink:0}
.vz-trust-badge-icon .material-symbols-rounded{font-size:20px;color:var(--teal-700)}
.vz-trust-badge b{display:block;font-size:14px;font-weight:600;color:var(--ink-950);line-height:1.25}
.vz-trust-badge small{display:block;font-size:12.5px;color:var(--ink-500);line-height:1.3}

.vz-tabular{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.vz-orb,.vz-orb::before,.vz-transcript-live::after{animation:none!important}}