:root{--bg:#0e1116;--bg-raised:#161b22;--bg-inset:#0a0d11;--border:#262d37;--text:#e6e9ee;--text-dim:#8b95a3;--accent:#2dd4bf;--accent-dim:#14524b;--danger:#f87171;--danger-bg:#3a1417;--user-bubble:#1f2937;--radius:14px;--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.45}#root{height:100%}.app{flex-direction:column;max-width:680px;height:100dvh;margin:0 auto;display:flex}.app-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.app-header h1{letter-spacing:.02em;margin:0;font-size:1.15rem;font-weight:700}.header-accent{color:var(--accent)}.header-controls{align-items:center;gap:12px;display:flex}.handsfree-toggle{color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:.85rem;display:flex}.handsfree-toggle input{accent-color:var(--accent);width:16px;height:16px}.handsfree-toggle input:checked+span{color:var(--accent)}.btn-subtle{background:var(--bg-raised);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:6px 12px;font-size:.85rem}.btn-subtle:hover{border-color:var(--accent-dim)}.settings-panel{border-bottom:1px solid var(--border);background:var(--bg-raised);flex-direction:column;flex-shrink:0;gap:14px;padding:14px 16px;display:flex}.settings-row{flex-direction:column;gap:6px;display:flex}.settings-row label{color:var(--text-dim);justify-content:space-between;font-size:.8rem;display:flex}.settings-value{color:var(--accent);font-variant-numeric:tabular-nums}.settings-row input[type=url],.settings-row input[type=text],.settings-row input[type=password]{background:var(--bg-inset);border:1px solid var(--border);color:var(--text);border-radius:8px;width:100%;padding:9px 12px;font-size:.95rem}.settings-row input:focus{border-color:var(--accent);outline:none}.settings-inline{align-items:center;gap:8px;display:flex}.settings-inline input{flex:1}.settings-row input[type=range]{accent-color:var(--accent);width:100%}.settings-help{color:var(--text-dim);margin:0;font-size:.75rem}.settings-row-toggle{flex-direction:row;justify-content:space-between;align-items:center}.settings-row-toggle input{accent-color:var(--accent);width:18px;height:18px}.settings-close{align-self:flex-end}.error-banner{background:var(--danger-bg);border:1px solid var(--danger);border-radius:var(--radius);color:#fecaca;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;margin:10px 16px 0;padding:10px 14px;font-size:.9rem;display:flex}.error-banner button{color:#fecaca;cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:1.2rem;line-height:1}.conversation{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:16px;padding:16px;display:flex;overflow-y:auto}.conversation-empty{text-align:center;color:var(--text-dim);max-width:260px;margin:auto;font-size:.95rem}.turn{flex-direction:column;gap:8px;display:flex}.bubble{border-radius:var(--radius);white-space:pre-wrap;word-break:break-word;max-width:85%;padding:10px 14px}.bubble-user{background:var(--user-bubble);border-bottom-right-radius:4px;align-self:flex-end}.bubble-assistant{background:var(--bg-raised);border:1px solid var(--border);border-bottom-left-radius:4px;align-self:flex-start}.timing-badge{font-variant-numeric:tabular-nums;color:var(--accent);vertical-align:middle;white-space:nowrap;background:#2dd4bf1a;border-radius:999px;margin-left:10px;padding:1px 7px;font-size:.7rem;display:inline-block}.bubble-pending .dots{gap:5px;display:inline-flex}.bubble-pending .dots i{background:var(--text-dim);border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite pulse}.bubble-pending .dots i:nth-child(2){animation-delay:.2s}.bubble-pending .dots i:nth-child(3){animation-delay:.4s}@keyframes pulse{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}.app-footer{border-top:1px solid var(--border);padding:10px 16px calc(12px + var(--safe-bottom));flex-direction:column;flex-shrink:0;gap:12px;display:flex}.status-strip{align-items:center;gap:10px;font-size:.8rem;display:flex}.status-pill{background:var(--bg-raised);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;align-items:center;gap:7px;padding:4px 11px;display:inline-flex}.status-dot{background:var(--text-dim);border-radius:50%;width:8px;height:8px}.status-listening .status-dot{background:var(--accent);animation:2s ease-in-out infinite breathe}.status-recording{color:var(--danger);border-color:#f8717166}.status-recording .status-dot{background:var(--danger);animation:1s ease-in-out infinite breathe}.status-thinking .status-dot,.status-speaking .status-dot{background:var(--accent)}.status-thinking .status-dot{animation:.8s ease-in-out infinite breathe}@keyframes breathe{0%,to{opacity:1}50%{opacity:.35}}.status-health{align-items:center;margin-left:auto;display:inline-flex}.health-dot{border-radius:50%;width:9px;height:9px}.health-ok{background:#34d399;box-shadow:0 0 6px #34d39999}.health-down{background:var(--danger)}.health-unknown{background:var(--text-dim)}.composer{gap:8px;display:flex}.composer input{background:var(--bg-inset);border:1px solid var(--border);color:var(--text);border-radius:10px;flex:1;padding:10px 14px;font-size:1rem}.composer input:focus{border-color:var(--accent);outline:none}.composer button{background:var(--accent);color:#04201c;cursor:pointer;border:none;border-radius:10px;padding:0 18px;font-size:.95rem;font-weight:600}.composer button:disabled{opacity:.35;cursor:default}.mic-area{flex-direction:column;align-items:center;gap:8px;display:flex}.mic-button{border:2px solid var(--accent-dim);background:var(--bg-raised);width:84px;height:84px;color:var(--accent);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;transition:transform .1s,border-color .15s,background .15s;display:flex}.mic-button:active:not(:disabled){transform:scale(.96)}.mic-button.is-recording{border-color:var(--danger);color:var(--danger);background:#f871711f;animation:1.4s ease-out infinite ring}@keyframes ring{0%{box-shadow:0 0 #f8717159}to{box-shadow:0 0 0 18px #f8717100}}.mic-button:disabled{opacity:.4;cursor:default}.mic-hint{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.78rem}.handsfree-indicator{text-align:center;color:var(--accent);padding:12px 0;font-size:.85rem}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}@media (width>=700px){.app{border-left:1px solid var(--border);border-right:1px solid var(--border)}}.demo-chip{border:1px solid var(--accent-dim);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);vertical-align:middle;border-radius:999px;margin-left:10px;padding:3px 9px;font-size:.66rem;font-weight:600}.demo-banner{background:var(--bg-raised);border-bottom:1px solid var(--border);color:var(--text-dim);flex-shrink:0;padding:10px 16px;font-size:.85rem;line-height:1.45}.demo-banner strong{color:var(--text)}.demo-banner a{color:var(--accent);white-space:nowrap;text-decoration:none}.demo-banner a:hover{text-decoration:underline}.demo-mic-hint{text-align:center;color:var(--text-dim);padding:10px 16px 12px;font-size:.8rem}.demo-mic-hint em{color:var(--text);font-style:normal;font-weight:600}