*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:#0a0a0a;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}.container{background:#0a0a0a;width:100%;height:100%;position:relative;overflow:hidden}.local-video-fill{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.transcript-overlay{z-index:15;pointer-events:none;box-sizing:border-box;justify-content:center;padding:0 16px;animation:.4s ease-out transcript-fade-in;display:flex;position:absolute;bottom:140px;left:0;right:0}@keyframes transcript-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.transcript-overlay .transcript-content{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0a0a0ad9;border:1px solid #ffffff0f;border-radius:20px;width:100%;max-width:90%;max-height:200px;padding:14px 20px;overflow-y:auto;box-shadow:0 4px 24px #0006}.transcript-overlay .transcript-line{margin:4px 0;font-size:14px;line-height:1.5;animation:.3s ease-out line-fade-in}@keyframes line-fade-in{0%{opacity:0}to{opacity:1}}.transcript-overlay .transcript-line.user{color:#fff9;text-align:right;padding-right:12px}.transcript-overlay .transcript-line.assistant{color:#ffffffe6;text-align:left;padding-left:12px}.transcript-overlay .transcript-role{opacity:.5;margin-right:4px;font-size:12px;font-weight:600}.transcript-overlay .transcript-line.assistant .transcript-role{color:#22c55e;opacity:.7}.transcript-overlay .transcript-text{margin-left:2px}.transcript-overlay .transcript-content::-webkit-scrollbar{width:4px}.transcript-overlay .transcript-content::-webkit-scrollbar-track{background:0 0}.transcript-overlay .transcript-content::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.status-indicator{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:10;white-space:nowrap;text-overflow:ellipsis;background:#0a0a0ae6;border:1px solid #ffffff1a;border-radius:40px;align-items:center;gap:16px;max-width:90%;padding:16px 32px;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 0 30px #00000080}.status-text{color:#fff;letter-spacing:.01em;font-size:20px;font-weight:600}.listening-indicator{border-color:#22c55e4d;animation:2s ease-in-out infinite listen-pulse;box-shadow:0 0 30px #22c55e33}.listening-icon-wrap{position:relative}.listening-icon{background:#22c55e;border-radius:50%;width:24px;height:24px;box-shadow:0 0 12px #22c55e99}.pulse-ring{pointer-events:none;border:2px solid #22c55e4d;border-radius:50%;width:40px;height:40px;animation:1.5s ease-out infinite pulse-ring;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes listen-pulse{0%,to{box-shadow:0 0 30px #22c55e33}50%{box-shadow:0 0 40px #22c55e59}}@keyframes pulse-ring{0%{opacity:1;transform:translate(-50%,-50%)scale(.8)}to{opacity:0;transform:translate(-50%,-50%)scale(2.5)}}.thinking-wrap{flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:flex;position:relative}.thinking-ring{width:48px;height:48px;animation:2.5s linear infinite ring-rotate;position:absolute}.thinking-ring-bg{fill:none;stroke:#22c55e26;stroke-width:2px}.thinking-ring-progress{fill:none;stroke:#22c55e;stroke-width:2.5px;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:90px;transform-origin:50%;animation:1.8s ease-in-out infinite ring-progress;transform:rotate(-90deg)}@keyframes ring-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ring-progress{0%{stroke-dashoffset:90px}50%{stroke-dashoffset:20px}to{stroke-dashoffset:90px}}.thinking-dots{z-index:1;align-items:center;gap:8px;display:flex;position:relative}.thinking-dot{background:#22c55e;border-radius:50%;width:10px;height:10px;animation:1.4s ease-in-out infinite think-bounce}.thinking-dot:nth-child(2){animation-delay:.15s}.thinking-dot:nth-child(3){animation-delay:.3s}@keyframes think-bounce{0%,60%,to{opacity:.5;transform:translateY(0)scale(1)}30%{opacity:1;transform:translateY(-10px)scale(1.1)}}.text-input-area{align-items:center;gap:8px;width:100%;max-width:400px;transition:opacity .3s,max-height .3s;display:flex;overflow:hidden}.text-input-area.hidden{opacity:0;pointer-events:none;max-height:0!important;margin:0!important;padding:0!important}.text-input{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#141414cc;border:1px solid #ffffff1a;border-radius:24px;outline:none;flex:1;min-width:0;padding:10px 16px;font-size:14px}.text-input::placeholder{color:#fff6}.text-input:focus{border-color:#22c55e80}.ctrl-btn.send{color:#22c55e;background:#22c55e33;flex-shrink:0}.controls{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#141414bf;border:1px solid #ffffff14;border-radius:50px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:12px 20px;display:flex;position:absolute;bottom:32px;left:50%;transform:translate(-50%)}.ctrl-btn{cursor:pointer;color:#fff;background:#ffffff1a;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:flex}.ctrl-btn:hover{background:#fff3;transform:scale(1.05)}.ctrl-btn:active{transform:scale(.95)}.ctrl-btn svg{width:22px;height:22px}.ctrl-btn.off{color:#ef4444;background:#ef444433}.ctrl-btn.end{color:#fff;background:#ef4444}.ctrl-btn.end:hover{background:#dc2626}.ctrl-btn.call{color:#fff;background:#22c55e}.ctrl-btn.call:hover{background:#16a34a}.status-dot{border-radius:50%;width:10px;height:10px;transition:all .3s;position:absolute;top:20px;left:20px}.status-dot.connected{background:#22c55e;animation:2s infinite pulse;box-shadow:0 0 12px #22c55e99}.status-dot.disconnected{background:#6b7280}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.connect-overlay{background:#0a0a0a;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}.ready-state{color:#ffffffb3;flex-direction:column;align-items:center;gap:16px;display:flex}.ready-icon{color:#22c55e;background:#22c55e26;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;display:flex}.ready-icon svg{width:36px;height:36px}.ready-state h2{color:#ffffffe6;font-size:22px;font-weight:600}.ready-state p{color:#ffffff80;font-size:14px}.spinner{border:3px solid #ffffff14;border-top-color:#22c55e;border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}.connecting-text{color:#ffffff80;font-size:14px}@keyframes spin{to{transform:rotate(360deg)}}.glow-dot{pointer-events:none;z-index:10;background:#22c55e;border-radius:50%;width:16px;height:16px;animation:1.5s ease-in-out infinite glow-pulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 12px #22c55ecc,0 0 30px #22c55e66,0 0 60px #22c55e33}.glow-dot:before{content:"";border:2px solid #22c55e26;border-radius:50%;animation:1.5s ease-in-out infinite ring-expand;position:absolute;inset:-20px}@keyframes glow-pulse{0%,to{opacity:.9;transform:translate(-50%,-50%)scale(1);box-shadow:0 0 12px #22c55ecc,0 0 30px #22c55e66,0 0 60px #22c55e33}50%{opacity:1;transform:translate(-50%,-50%)scale(1.4);box-shadow:0 0 20px #22c55e,0 0 50px #22c55e99,0 0 80px #22c55e4d}}@keyframes ring-expand{0%,to{opacity:.5;transform:scale(1)}50%{opacity:0;transform:scale(1.3)}}.phase-indicator[data-phase=listening],.phase-indicator[data-phase=connected]{border-color:#22c55e4d;animation:2s ease-in-out infinite listen-pulse;box-shadow:0 0 30px #22c55e33}.phase-indicator[data-phase=connected] .listening-icon{background:#22c55e;box-shadow:0 0 12px #22c55e99}.phase-indicator[data-phase=connected] .pulse-ring{border-color:#22c55e4d}.phase-indicator[data-phase=transcribing]{border-color:#3b82f64d;box-shadow:0 0 30px #3b82f633}.phase-indicator[data-phase=thinking]{border-color:#22c55e4d;box-shadow:0 0 30px #22c55e33}.phase-indicator[data-phase=synthesizing]{border-color:#a855f74d;box-shadow:0 0 30px #a855f733}.phase-indicator[data-phase=transcribing] .thinking-ring-bg{stroke:#3b82f626}.phase-indicator[data-phase=transcribing] .thinking-ring-progress{stroke:#3b82f6;box-shadow:0 0 12px #3b82f680}.phase-indicator[data-phase=transcribing] .thinking-dot{background:#3b82f6;box-shadow:0 0 8px #3b82f666}.phase-indicator[data-phase=transcribing] .pulse-ring{border-color:#3b82f64d}.phase-indicator[data-phase=transcribing] .listening-icon{background:#3b82f6;box-shadow:0 0 12px #3b82f699}.phase-indicator[data-phase=transcribing] .listening-icon-wrap{display:inline-block}.phase-indicator[data-phase=synthesizing] .thinking-ring-bg{stroke:#a855f726}.phase-indicator[data-phase=synthesizing] .thinking-ring-progress{stroke:#a855f7;box-shadow:0 0 12px #a855f780}.phase-indicator[data-phase=synthesizing] .thinking-dot{background:#a855f7;box-shadow:0 0 8px #a855f766}.phase-indicator[data-phase=transcribing] .thinking-dot{animation:1s ease-in-out infinite think-bounce-fast}.phase-indicator[data-phase=transcribing] .thinking-dot:nth-child(2){animation-delay:.1s}.phase-indicator[data-phase=transcribing] .thinking-dot:nth-child(3){animation-delay:.2s}@keyframes think-bounce-fast{0%,60%,to{opacity:.5;transform:translate(0)scale(1)}30%{opacity:1;transform:translate(6px)scale(1.1)}}@media (orientation:portrait) and (height<=600px){.status-indicator{gap:10px;padding:12px 20px}.status-text{font-size:16px}.thinking-wrap{width:40px;height:40px}.thinking-ring{width:36px;height:36px}.transcript-overlay{bottom:110px}.controls{padding:10px 16px;bottom:20px}.ctrl-btn{width:42px;height:42px}.ctrl-btn svg{width:18px;height:18px}}@media (orientation:landscape) and (height<=500px){.status-indicator{gap:12px;padding:10px 24px}.status-text{font-size:18px}.thinking-wrap{width:44px;height:44px}.thinking-ring{width:40px;height:40px}.transcript-overlay{top:20px;bottom:80px}.text-input-area{width:300px}.controls{gap:8px;padding:8px 16px;bottom:16px}.ctrl-btn{width:40px;height:40px}.ctrl-btn svg{width:18px;height:18px}.ready-icon{width:56px;height:56px}.ready-icon svg{width:28px;height:28px}.ready-state h2{font-size:18px}.ready-state p{font-size:12px}}@media (width<=360px){.status-indicator{gap:8px;padding:8px 14px}.status-text{font-size:14px}.thinking-wrap{width:32px;height:32px}.thinking-ring{width:28px;height:28px}.thinking-dot{width:7px;height:7px}.pulse-ring{width:30px;height:30px}.listening-icon{width:18px;height:18px}.controls{padding:8px 12px;bottom:12px}.ctrl-btn{width:38px;height:38px}.ctrl-btn svg{width:16px;height:16px}}@media (width>=1024px){.status-indicator{gap:20px;padding:20px 40px}.status-text{font-size:22px}.transcript-overlay{bottom:160px}.controls{padding:14px 28px;bottom:40px}}