:root{--bg:#0b1020;--surface:#161d33c7;--surface-solid:#161d33;--field:#0f1528;--border:#ffffff1f;--text:#f4f6fb;--text-dim:#a9b1c7;--green:#22c55e;--green-dark:#16a34a;--red:#ef4444;--red-dark:#dc2626;--gold:#f5c451;--blue:#93c5fd;--ok:#86efac;--err:#fca5a5;--controls-h:100px;--pip-top:76px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}[hidden]{display:none!important}svg[viewBox="0 0 24 24"]{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}#app{position:fixed;inset:0}.screen{display:none;position:absolute;inset:0}#app[data-phase=idle] .start-screen,#app[data-phase=ended] .ended-screen{display:flex}#app[data-phase=ringing] .call-screen,#app[data-phase=connected] .call-screen{display:block}.start-screen,.ended-screen{background:radial-gradient(ellipse at 50% -10%, #23366b 0%, #0b102000 60%), radial-gradient(ellipse at 50% 120%, #3a1420 0%, #0b102000 55%), var(--bg);flex-direction:column;justify-content:center;align-items:center;padding:24px 16px;overflow:hidden}.snow{pointer-events:none;position:absolute;inset:0;overflow:hidden}.snow i{top:-12px;left:var(--x);width:var(--s);height:var(--s);opacity:var(--o);animation:fall var(--d) linear var(--delay) infinite;background:#fff;border-radius:50%;position:absolute}@keyframes fall{to{transform:translate(var(--drift), 105vh)}}.start-header{justify-content:space-between;align-items:center;padding:14px 16px;display:flex;position:absolute;top:0;left:0;right:0}.brand{color:var(--text-dim);align-items:center;gap:10px;font-weight:600;display:flex}.brand-icon{width:22px;height:22px;color:var(--blue)}.header-actions{align-items:center;gap:10px;display:flex}.pill-btn{border:1px solid var(--border);background:#ffffff0f;border-radius:999px;align-items:center;gap:8px;height:44px;padding:0 16px;font-size:14px;font-weight:600;display:inline-flex}.pill-btn:hover{background:#ffffff24}.pill-btn svg{width:18px;height:18px}.icon-btn{border:1px solid var(--border);background:#ffffff0f;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.icon-btn:hover{background:#ffffff24}.icon-btn svg{width:20px;height:20px}.contact-card{text-align:center;background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:28px;flex-direction:column;align-items:center;gap:6px;width:min(420px,100%);padding:36px 24px 30px;display:flex;position:relative;box-shadow:0 30px 80px #00000073}.portrait-wrap{width:148px;height:148px;margin-bottom:14px;position:relative}.portrait{border-radius:50%;width:100%;height:100%;overflow:hidden;box-shadow:0 0 0 4px #ffffff14,0 12px 40px #00000080}.portrait svg{width:100%;height:100%;display:block}.online-dot{background:var(--green);border:4px solid var(--surface-solid);border-radius:50%;width:24px;height:24px;position:absolute;bottom:10px;right:10px}.contact-card h1{letter-spacing:-.01em;margin:0;font-size:28px;font-weight:700}.contact-sub{color:var(--text-dim);margin:0}.presence{color:var(--ok);align-items:center;gap:7px;margin:6px 0 24px;font-size:14px;display:flex}.presence .dot{background:currentColor;border-radius:50%;width:8px;height:8px;animation:2s ease-out infinite presence}@keyframes presence{0%{box-shadow:0 0 #86efacb3}to{box-shadow:0 0 0 8px #86efac00}}.call-btn{background:var(--green);color:#fff;border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:16px 34px;font-size:18px;font-weight:600;transition:transform .15s,background .15s;display:inline-flex;box-shadow:0 10px 30px #22c55e59}.call-btn:hover{background:var(--green-dark);transform:translateY(-1px)}.call-btn svg{width:22px;height:22px}.notice{max-width:320px;color:var(--text-dim);margin:16px 0 0;font-size:13px;line-height:1.5}.notice.warn{color:#fbbf24}.link{color:var(--gold);background:0 0;border:0;padding:0;text-decoration:underline}.start-footer{left:16px;right:16px;bottom:max(16px, env(safe-area-inset-bottom));text-align:center;color:var(--text-dim);font-size:13px;position:absolute}.ended-screen .portrait{filter:grayscale(.35)brightness(.9)}.ended-info{color:var(--text-dim);font-variant-numeric:tabular-nums;margin:2px 0 22px}.ended-actions{flex-direction:column;align-items:stretch;gap:10px;width:min(260px,100%);display:flex}.call-screen{background:#000;overflow:hidden}.remote{opacity:0;filter:blur(18px)brightness(.5);transition:opacity .5s,filter 1.4s,transform 1.4s;position:absolute;inset:0;transform:scale(1.06)}#app[data-phase=connected] .remote{opacity:1;filter:none;transform:none}#app[data-activity=speaking] .remote{cursor:pointer}.remote>svg{width:100%;height:100%;display:block}.grain{pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:.8s steps(4,end) infinite grain;position:absolute;inset:-50%}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}.vignette{pointer-events:none;background:radial-gradient(#0000 55%,#00000080 100%);position:absolute;inset:0}.self-view{--pip-w:clamp(104px, 20vw, 240px);--pip-h:calc(var(--pip-w) * .75);z-index:3;background:#1b2238;border-radius:0;width:100%;height:100%;transition:top .7s cubic-bezier(.2,.8,.2,1),right .7s cubic-bezier(.2,.8,.2,1),width .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1),border-radius .7s;position:absolute;top:0;right:0;overflow:hidden}@media (orientation:portrait){.self-view{--pip-w:clamp(92px, 27vw, 170px);--pip-h:calc(var(--pip-w) * 4 / 3)}}#app[data-phase=connected] .self-view{top:var(--pip-top);width:var(--pip-w);height:var(--pip-h);border-radius:16px;right:16px;box-shadow:0 10px 30px #00000080,0 0 0 1.5px #ffffff2e}.self-view:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 3px var(--green);opacity:var(--level,0);pointer-events:none;transition:opacity .12s;position:absolute;inset:0}.self-view video{object-fit:cover;width:100%;height:100%;transition:filter .7s;display:block;transform:scaleX(-1)}#app[data-phase=ringing] .self-view video{filter:blur(8px)brightness(.5)}.self-placeholder{background:linear-gradient(160deg,#273259,#12182c);place-items:center;display:none;position:absolute;inset:0}.self-placeholder span{aspect-ratio:1;background:#3b4a7a;border-radius:50%;place-items:center;width:40%;max-width:120px;font-size:clamp(14px,3vw,32px);font-weight:700;display:grid}#app[data-phase=ringing] .self-placeholder span{display:none}.self-view[data-camera=off] .self-placeholder{display:grid}.self-view[data-camera=off] video{visibility:hidden}.ringing-overlay{z-index:4;padding-bottom:var(--controls-h);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:none;position:absolute;inset:0}#app[data-phase=ringing] .ringing-overlay{display:flex}.ring-portrait{width:150px;height:150px;margin-bottom:22px;position:relative}.ring-portrait .portrait{z-index:1;position:relative}.pulse{border:2px solid #ffffff8c;border-radius:50%;animation:2.2s ease-out infinite ring-pulse;position:absolute;inset:0}.pulse.p2{animation-delay:1.1s}@keyframes ring-pulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.9)}}.ringing-overlay h2{text-shadow:0 2px 12px #00000080;margin:0;font-size:30px;font-weight:600}.ring-status{color:#ffffffd1;margin:0;font-size:17px}.dots:after{content:"";text-align:left;width:1.2em;animation:1.4s step-end infinite dots;display:inline-block}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.call-top{z-index:5;padding:max(14px, env(safe-area-inset-top)) 18px 44px;pointer-events:none;background:linear-gradient(#0000008c,#0000);justify-content:space-between;align-items:flex-start;display:none;position:absolute;top:0;left:0;right:0}#app[data-phase=connected] .call-top{display:flex}.caller strong{text-shadow:0 1px 6px #00000080;font-size:18px;display:block}.call-meta{color:#ffffffd9;font-variant-numeric:tabular-nums;align-items:center;gap:6px;font-size:13px;display:flex}.rec-dot{background:var(--red);border-radius:50%;width:8px;height:8px;animation:1.6s ease-in-out infinite blink}@keyframes blink{50%{opacity:.25}}.quality{color:#fff;align-items:center;gap:8px;display:flex}.hd{border:1.5px solid #ffffffd9;border-radius:4px;padding:1px 5px;font-size:11px;font-weight:700}.signal{fill:currentColor;width:20px;height:16px}.bottom-stack{z-index:5;padding:70px 16px calc(var(--controls-h) + 6px);pointer-events:none;background:linear-gradient(#0000,#0009);flex-direction:column;align-items:center;gap:12px;display:none;position:absolute;bottom:0;left:0;right:0}#app[data-phase=connected] .bottom-stack{display:flex}.status-pill{border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;cursor:default;color:var(--text);background:#0f1423a8;border-radius:999px;align-items:center;gap:9px;padding:8px 15px;font-size:14px;display:inline-flex}#app[data-activity=speaking] .status-pill{color:var(--gold);cursor:pointer}#app[data-activity=listening] .status-pill{color:var(--ok)}#app[data-activity=muted] .status-pill{color:var(--err)}.pill-hint{opacity:.8;margin-left:-4px}.pill-hint:empty{display:none}@media (width<=560px){.pill-hint{display:none}}.status-icon{align-items:center;gap:3px;height:14px;display:inline-flex}.status-icon i{transform-origin:50%;background:currentColor;border-radius:2px;width:3px;height:100%}#app[data-activity=speaking] .status-icon i,#app[data-activity=listening] .status-icon i{animation:.9s ease-in-out infinite bars}.status-icon i:nth-child(2){animation-delay:-.3s!important}.status-icon i:nth-child(3){animation-delay:-.6s!important}@keyframes bars{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}#app[data-activity=listening] .status-icon i{animation-duration:1.6s}#app[data-activity=thinking] .status-icon i,#app[data-activity=connecting] .status-icon i{border-radius:50%;width:6px;height:6px;animation:1.1s ease-in-out infinite bounce}@keyframes bounce{0%,to{opacity:.5;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}#app[data-activity=muted] .status-icon i{transform:scaleY(.3)}.captions{flex-direction:column;gap:6px;width:min(760px,100%);display:flex}#app[data-captions=off] .captions{display:none}.cap{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#00000094;border-radius:14px;margin:0;padding:10px 14px;font-size:clamp(16px,2.2vw,20px);line-height:1.4;display:none}.cap.visible{animation:.3s cap-in;display:block}@keyframes cap-in{0%{opacity:0;transform:translateY(6px)}}.cap-name{letter-spacing:.07em;text-transform:uppercase;color:var(--gold);margin-bottom:2px;font-size:11px;font-weight:700;display:block}.cap-user .cap-name{color:var(--blue)}.cap-user.interim .cap-text{color:#ffffffbf;font-style:italic}.controls{z-index:6;left:50%;bottom:max(16px, env(safe-area-inset-bottom));border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f142399;border-radius:999px;gap:12px;padding:10px 14px;display:flex;position:absolute;transform:translate(-50%)}.ctl{background:#ffffff26;border:0;border-radius:50%;place-items:center;width:56px;height:56px;transition:background .15s,transform .1s;display:grid}.ctl:hover{background:#ffffff42}.ctl:active{transform:scale(.94)}.ctl svg{width:24px;height:24px}.ctl .icon-off{display:none}.ctl[data-off=true]{color:#1f2937;background:#fff}.ctl[data-off=true] .icon-on{display:none}.ctl[data-off=true] .icon-off{display:block}.ctl.hangup{background:var(--red);border-radius:28px;width:72px}.ctl.hangup:hover{background:var(--red-dark)}#app[data-phase=ringing] .connected-only{display:none}@media (width<=440px){:root{--controls-h:90px}.controls{gap:8px;padding:8px 10px}.ctl{width:50px;height:50px}.ctl.hangup{width:62px}}.snowflake{animation:snowfall var(--dur) linear var(--delay) infinite}@keyframes snowfall{to{transform:translate(var(--drift), 270px)}}.twinkle{animation:twinkle 2.4s ease-in-out var(--delay) infinite}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.3}}.flame{transform-box:fill-box;transform-origin:50% 100%;animation:.9s ease-in-out infinite alternate flame}.flame.f2{animation-duration:1.2s;animation-delay:-.4s}.flame.f3{animation-duration:.7s;animation-delay:-.2s}@keyframes flame{0%{transform:scale(1)skew(0)}50%{transform:scale(.94,1.1)skew(3deg)}to{transform:scale(1.05,.9)skew(-3deg)}}.fireglow{animation:3.2s ease-in-out infinite glow}@keyframes glow{0%,to{opacity:.9}30%{opacity:.7}60%{opacity:1}80%{opacity:.78}}.star{transform-box:fill-box;transform-origin:50%;animation:3s ease-in-out infinite star}@keyframes star{50%{transform:scale(1.1)}}.toasts{z-index:100;pointer-events:none;flex-direction:column;gap:8px;width:min(520px,100% - 32px);display:flex;position:fixed;top:16px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--border);pointer-events:auto;background:#161d33f5;border-radius:12px;align-items:flex-start;gap:10px;padding:12px 14px;font-size:14px;line-height:1.45;animation:.25s toast-in;display:flex;box-shadow:0 10px 30px #0006}.toast:before{content:"";background:var(--blue);border-radius:50%;flex:none;width:8px;height:8px;margin-top:6px}.toast.error{border-color:#ef444480}.toast.error:before{background:var(--red)}.toast.leaving{opacity:0;transition:opacity .3s,transform .3s;transform:translateY(-6px)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}dialog#settings{border:1px solid var(--border);background:var(--surface-solid);width:min(640px,100% - 24px);max-height:calc(100% - 24px);color:var(--text);border-radius:20px;padding:0;box-shadow:0 30px 80px #0009}dialog#settings::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#05081099}dialog#settings form{flex-direction:column;max-height:calc(100dvh - 26px);display:flex}dialog#settings header{padding:20px 24px 6px}dialog#settings header h2{margin:0;font-size:20px}dialog#settings header p{color:var(--text-dim);margin:4px 0 0;font-size:13px}dialog#settings header .dialog-notice{color:var(--text);background:#f5c4511a;border:1px solid #f5c45173;border-radius:10px;margin-top:12px;padding:10px 12px;font-size:14px;line-height:1.45}.settings-body{padding:4px 24px 20px;overflow:auto}.settings-body:focus{outline:none}.hint{color:var(--text-dim);margin:-4px 0 0;font-size:13px;line-height:1.5}label.check{color:var(--text);cursor:pointer;flex-direction:row;align-items:center;gap:10px;font-size:14px}label.check input{width:18px;height:18px;accent-color:var(--green);margin:0}#shareLink{color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}fieldset{border:0;flex-direction:column;gap:12px;margin:18px 0 0;padding:0;display:flex}legend{color:var(--gold);margin-bottom:10px;padding:0;font-size:14px;font-weight:700}label{color:var(--text-dim);flex-direction:column;gap:6px;font-size:13px;display:flex}label small{opacity:.8;font-size:12px}input,select,textarea{border:1px solid var(--border);background:var(--field);width:100%;color:var(--text);font:inherit;border-radius:10px;padding:10px 12px;font-size:15px}input:focus,select:focus,textarea:focus{outline-offset:1px;border-color:#0000;outline:2px solid #60a5fa}textarea{resize:vertical;line-height:1.45}.grid2{grid-template-columns:2fr 1fr;gap:12px;display:grid}.grid3{grid-template-columns:1.4fr 1fr .8fr;gap:12px;display:grid}.grid3.tts-grid{grid-template-columns:1.2fr 1.2fr .6fr}@media (width<=540px){.grid2,.grid3,.grid3.tts-grid{grid-template-columns:1fr}}.input-row{gap:8px;display:flex}.input-row input{flex:1;min-width:0}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.small-btn{border:1px solid var(--border);white-space:nowrap;background:#ffffff0f;border-radius:10px;padding:8px 14px;font-size:14px}.small-btn:hover{background:#ffffff21}.test-status{color:var(--text-dim);flex:200px;font-size:13px;line-height:1.4}.test-status[data-kind=ok]{color:var(--ok)}.test-status[data-kind=error]{color:var(--err)}dialog#settings footer{border-top:1px solid var(--border);justify-content:flex-end;gap:10px;padding:14px 24px 18px;display:flex}.primary-btn,.secondary-btn{border-radius:12px;padding:11px 20px;font-weight:600}.primary-btn{background:var(--green);color:#fff;border:0}.primary-btn:hover{background:var(--green-dark)}.secondary-btn{border:1px solid var(--border);background:0 0}.secondary-btn:hover{background:#ffffff14}@media (prefers-reduced-motion:reduce){.snow i,.snowflake,.twinkle,.flame,.fireglow,.star,.grain,.pulse{animation:none}}.hint code{font-size:12px}
