*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#120f0d;color:#f4ede4;font:16px -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
#bg{position:fixed;inset:0;overflow:hidden;z-index:0}
#bg img{width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(.38) saturate(1.2);transform:scale(1.3)}
.screen{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 28px);text-align:center}
.screen[hidden]{display:none}
h1{margin:6px 0 0;font-size:30px;font-weight:650;letter-spacing:-.01em}
.msg{margin:0;font-size:15px;opacity:.8;max-width:300px;min-height:20px}
.sub{margin:0;font-size:15px;opacity:.65}
.ava{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.ava.big{width:170px;height:170px}
.ring{position:relative;border-radius:50%;padding:6px;background:conic-gradient(from 0deg,#c99a5b,#f3d3a3,#c99a5b);}
.ring.sleepy{animation:breathe 2.6s ease-in-out infinite}
.ring .ava{display:block;border:4px solid #120f0d}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.06);opacity:1}}
#login{display:flex;gap:8px;margin-top:10px}
#pass{width:190px;padding:13px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:inherit;font:16px system-ui;outline:0}
#login button{padding:12px 20px;border-radius:999px;border:0;background:#c99a5b;color:#1b140c;font:600 16px system-ui}
.round{width:76px;height:76px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;cursor:pointer;transition:transform .12s,background .2s}
.round:active{transform:scale(.92)}
.round svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.round.go{background:#2fbf5b;margin-top:34px;box-shadow:0 10px 30px rgba(47,191,91,.35)}
.round.go svg{fill:#fff;stroke:none}
.round.stop{background:#e5483d}.round.stop svg{fill:#fff;stroke:none;transform:rotate(0deg)}
.round.dim{background:rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.round.dim.on{background:#f4ede4;color:#120f0d}
.chip{margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:inherit;font:500 14px system-ui}
.chip i{width:8px;height:8px;border-radius:50%;background:#59a8ff}
.chip.off i{background:#777}.chip.off{opacity:.7}
#call{justify-content:space-between}
.ctop{width:100%;display:flex;justify-content:space-between;font-size:15px;opacity:.75}
.orb{position:relative;width:230px;height:230px;display:grid;place-items:center;margin-top:4vh;transition:transform .25s}
.orb i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(243,211,163,.35);opacity:0}
.orb .ava{position:relative;z-index:1}
#call[data-s=speaking] .orb i{animation:pulse 1.8s ease-out infinite}
#call[data-s=speaking] .orb i:nth-child(2){animation-delay:.6s}
#call[data-s=speaking] .orb i:nth-child(3){animation-delay:1.2s}
#call[data-s=listening] .orb i:nth-child(1){opacity:.6;inset:-6px;border-color:rgba(89,168,255,.55);animation:breathe 2.4s ease-in-out infinite}
#call[data-s=thinking] .orb i:nth-child(1){opacity:1;inset:-8px;border-color:transparent;border-top-color:#f3d3a3;animation:spin 1s linear infinite}
#call[data-s=connecting] .orb,#call[data-s=muted] .orb{opacity:.6}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
#cState{font-size:22px;font-weight:600;margin-top:10px}
#cLine{min-height:66px;max-width:330px;font-size:16px;line-height:1.4;opacity:.75;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.cbtns{display:flex;gap:56px;align-items:center;margin-bottom:6px}
#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 120px);transform:translateX(-50%);z-index:5;background:rgba(0,0,0,.75);padding:10px 16px;border-radius:12px;font-size:14px;max-width:86vw}