*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0c0c14;--surface: #161625;--surface-2: #1e1e32;--border: #2a2a45;--text: #e8e8f0;--text-dim: #9090a8;--accent: #6366f1;--accent-light: #818cf8;--green: #22c55e;--red: #ef4444;--amber: #f59e0b;--radius: 12px;--radius-sm: 8px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:640px;margin:0 auto}header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}header .title{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}header button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;color:var(--text-dim);cursor:pointer;border-radius:var(--radius-sm);transition:color .15s,background .15s}header button:hover{color:var(--text);background:var(--surface)}#transcript{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}#transcript:empty:after{content:"Press the button below to start a conversation.";color:var(--text-dim);text-align:center;margin:auto;font-size:.9rem;line-height:1.6;padding:0 32px}.entry{padding:12px 16px;border-radius:var(--radius);background:var(--surface);animation:slideIn .2s ease;max-width:90%}.entry.user{align-self:flex-end;border-right:3px solid var(--green);text-align:right}.entry.assistant{align-self:flex-start;border-left:3px solid var(--accent)}.entry .role{display:block;font-size:.7rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.entry .text{font-size:.925rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}.entry.notification{align-self:center;background:var(--surface-2);color:var(--text-dim);font-size:.825rem;text-align:center;max-width:100%;border-left:3px solid var(--amber)}footer{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);flex-shrink:0}#status{font-size:.8rem;font-weight:500;color:var(--text-dim);transition:color .2s}#status.connected{color:var(--green)}#status.speaking{color:var(--accent-light)}#status.connecting{color:var(--amber)}#status.error{color:var(--red)}#call-btn{width:72px;height:72px;border-radius:50%;border:none;background:var(--green);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .1s,box-shadow .2s;box-shadow:0 4px 24px #22c55e40}#call-btn:hover:not(:disabled){transform:scale(1.06);box-shadow:0 6px 28px #22c55e59}#call-btn:active:not(:disabled){transform:scale(.94)}#call-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}#call-btn.active{background:var(--red);box-shadow:0 4px 24px #ef444440}#call-btn.active:hover:not(:disabled){box-shadow:0 6px 28px #ef444459}#call-btn.connecting{background:var(--amber);box-shadow:0 4px 24px #f59e0b40;animation:pulse 1.5s ease-in-out infinite;pointer-events:none}@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:0;max-width:min(480px,92vw);width:480px;max-height:90vh;max-height:90dvh;overflow:hidden}dialog::backdrop{background:#000000b3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dialog-content{padding:32px 28px}.dialog-content h2{font-size:1.2rem;margin-bottom:8px}.dialog-content p{color:var(--text-dim);font-size:.9rem;margin-bottom:24px;line-height:1.5}.dialog-content form{display:flex;flex-direction:column}.dialog-content input[type=password],.dialog-content input[type=text]{width:100%;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:1rem;font-family:inherit;outline:none;transition:border-color .15s}.dialog-content input:focus{border-color:var(--accent)}.error-msg{color:var(--red);font-size:.825rem;min-height:1.5em;margin:8px 0}.dialog-content button[type=submit]{padding:12px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.95rem;font-family:inherit;cursor:pointer;transition:background .15s}.dialog-content button[type=submit]:hover{background:var(--accent-light)}.dialog-content button[type=submit]:disabled{opacity:.6;cursor:not-allowed}#settings-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}#settings-panel[hidden]{display:none!important}#app.settings-open #transcript,#app.settings-open footer{display:none}#settings-panel form{flex:1;display:flex;flex-direction:column;overflow:hidden}.settings-body{flex:1;overflow-y:auto;padding:20px 16px}.settings-body section{margin-bottom:24px}.settings-body section:last-child{margin-bottom:0}.settings-body h3{font-size:.75rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}.field{margin-bottom:14px}.field:last-child{margin-bottom:0}.field>label{display:block;font-size:.825rem;color:var(--text-dim);margin-bottom:6px}.field>label .hint{opacity:.7;font-weight:400}.field select,.field input[type=number],.field textarea{width:100%;padding:9px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.875rem;font-family:inherit;outline:none;transition:border-color .15s}.field select:focus,.field input[type=number]:focus,.field textarea:focus{border-color:var(--accent)}.field textarea{resize:vertical;min-height:72px}.field select{cursor:pointer}.range-row{display:flex;align-items:center;gap:12px}.range-row input[type=range]{flex:1;accent-color:var(--accent)}.range-value{min-width:36px;text-align:right;font-size:.825rem;font-variant-numeric:tabular-nums;color:var(--text-dim)}.check-field{display:flex;align-items:center;gap:10px;margin-bottom:12px}.check-field:last-child{margin-bottom:0}.check-field input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}.check-field label{font-size:.875rem;cursor:pointer}.settings-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);flex-shrink:0}.settings-footer button{padding:10px 24px;border:none;border-radius:var(--radius-sm);font-size:.875rem;font-family:inherit;font-weight:500;cursor:pointer;transition:background .15s,color .15s}.settings-footer button[type=submit]{background:var(--accent);color:#fff}.settings-footer button[type=submit]:hover{background:var(--accent-light)}.settings-footer .settings-cancel{background:var(--surface-2);color:var(--text-dim)}.settings-footer .settings-cancel:hover{background:var(--border);color:var(--text)}#transcript::-webkit-scrollbar,.settings-body::-webkit-scrollbar{width:6px}#transcript::-webkit-scrollbar-track,.settings-body::-webkit-scrollbar-track{background:transparent}#transcript::-webkit-scrollbar-thumb,.settings-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}@media(max-width:480px){#call-btn{width:66px;height:66px}}