*,:before,:after{box-sizing:border-box}html,body,#root{margin:0;padding:0}#root{width:100%;min-height:100dvh}.call-screen,.screen{--accent:#22d3ee;--primary:#0891b2;--danger:#ef4444;--danger-fg:#fff7f7;--bg:radial-gradient(circle at 50% 0%, #22d3ee29, transparent 55%), linear-gradient(180deg, #020617 0%, #071129 55%, #062a30 100%);--fg:#f1f5f9;--muted:#94a3b8;--surface:#ffffff12;--surface-strong:#ffffff24;--border:#ffffff24;--on-accent:#042a30;box-sizing:border-box;min-height:100dvh;padding:max(28px, env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg);color:var(--fg);text-align:center;flex-direction:column;align-items:center;font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;overflow-x:hidden}.screen{justify-content:center;gap:20px}@media (prefers-color-scheme:light){.call-screen,.screen{--bg:radial-gradient(circle at 50% 0%, #0891b214, transparent 55%), linear-gradient(180deg, #f8fafc 0%, #f0fdfa 60%, #ecfeff 100%);--fg:#0f172a;--muted:#475569;--surface:#0f172a0a;--surface-strong:#0f172a14;--border:#0f172a1f}}.call-screen button:focus-visible,.screen button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.in-call{flex-direction:column;flex:1;align-items:center;width:100%;max-width:380px;margin:0 auto;display:flex}.call-meta{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:18px;width:100%;display:flex}.brand-avatar{background:var(--surface);border:1px solid var(--border);width:96px;height:96px;box-shadow:0 0 0 3px var(--surface), 0 0 28px 2px #22d3ee59;box-shadow:0 0 0 3px var(--surface), 0 0 28px 2px color-mix(in srgb, var(--accent) 45%, transparent);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden}.brand-avatar.avatar-lg{width:112px;height:112px}.in-call[data-agent-state=speaking] .brand-avatar{box-shadow:0 0 0 3px var(--surface), 0 0 40px 6px color-mix(in srgb, var(--accent) 65%, transparent)}.brand-avatar img{object-fit:cover;width:100%;height:100%;display:block}.brand-avatar-fallback{color:var(--accent);font-size:36px;font-weight:600;line-height:1}.brand-avatar-fallback.hidden{display:none}.company-name{letter-spacing:-.2px;color:var(--fg);font-size:20px;font-weight:600}.waveform{justify-content:center;align-items:center;gap:10px;width:100%;max-width:280px;height:64px;display:flex}.waveform .lk-audio-bar{background:var(--accent);opacity:.32;border-radius:999px;width:8px;min-height:10px;transition:height .12s ease-out,opacity .2s}.waveform .lk-audio-bar.lk-highlighted,.waveform .lk-audio-bar[data-lk-highlighted=true]{opacity:1}.call-timer{font-variant-numeric:tabular-nums;color:var(--muted);font-size:15px}.ended .call-timer{color:var(--fg);font-size:28px;font-weight:600}.call-controls{justify-content:center;align-items:center;gap:28px;margin-top:16px;padding-bottom:4px;display:flex}.call-controls button{cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;min-width:44px;height:60px;min-height:44px;transition:background-color .2s,color .2s,border-color .2s,opacity .2s;display:inline-flex}.call-controls button:active{opacity:.82}.call-controls svg{width:24px;height:24px}.btn-mute{background:var(--surface);border:1.5px solid var(--border);color:var(--fg)}.btn-mute[aria-pressed=true]{background:var(--fg);border-color:var(--fg);color:#020617}@media (prefers-color-scheme:light){.btn-mute[aria-pressed=true]{color:#f8fafc}}.btn-hangup{background:var(--danger);color:var(--danger-fg)}.btn-hangup:hover{background:#dc2626}.btn-close,.btn-retry{border:1px solid var(--border);background:var(--surface);min-width:160px;min-height:48px;color:var(--fg);cursor:pointer;border-radius:999px;padding:12px 28px;font-size:16px;font-weight:500;transition:background-color .2s,opacity .2s}.btn-close:active,.btn-retry:active{opacity:.85}.status-title{color:var(--fg);font-size:20px;font-weight:600}.error-detail{max-width:320px;color:var(--muted);word-break:break-word;white-space:pre-wrap;font-size:14px}.not-in-line p{color:var(--fg);max-width:300px;font-size:16px}.init p{color:var(--muted);font-size:15px}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite call-spin}@keyframes call-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.call-controls button,.btn-close,.btn-retry,.waveform .lk-audio-bar,.brand-avatar{transition:none}.spinner{animation-duration:2.4s}}@media (width>=480px){.in-call{max-width:400px}}
