*{box-sizing:border-box;margin:0}:root{color-scheme:dark;--bg: #101418;--surface: #1a2129;--text: #e8edf2;--muted: #8a97a5;--accent: #4da3ff;--recording: #ff5252}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}#app{display:flex;flex-direction:column;height:100dvh;max-width:640px;margin:0 auto;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom)}header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}header h1{font-size:18px;font-weight:600}.header-controls{display:flex;align-items:center;gap:10px}#settings-toggle{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer}.mode-toggle{display:flex;background:var(--surface);border-radius:20px;padding:3px}.mode-toggle button{background:none;border:none;color:var(--muted);font-size:15px;padding:5px 14px;border-radius:17px;cursor:pointer;transition:background .25s,color .25s,transform .15s;line-height:1}.mode-toggle button:hover{color:var(--text)}.mode-toggle button.active{background:var(--accent);color:#04121f;transform:scale(1.04)}#transcript{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:8px 0}.bubble{max-width:85%;padding:10px 14px;border-radius:14px;line-height:1.45;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--accent);color:#04121f}.bubble.assistant{align-self:flex-start;background:var(--surface)}.bubble .tools{display:block;margin-top:6px;font-size:12px;color:var(--muted)}.bubble .play-btn{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:4px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:none;color:var(--muted);font-size:12px;font-family:inherit;cursor:pointer;transition:color .2s,border-color .2s}.bubble .play-btn:hover{color:var(--accent);border-color:var(--accent)}.bubble .play-btn:disabled{opacity:.6;cursor:wait}footer{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 22px}#status{min-height:1.3em;font-size:13px;color:var(--muted);text-align:center}#status.error{color:var(--recording)}#voice-controls{display:flex;justify-content:center}#mic{width:84px;height:84px;border-radius:50%;border:none;font-size:34px;background:var(--surface);color:var(--text);cursor:pointer;transition:background .2s,transform .2s}#mic.recording{background:var(--recording);transform:scale(1.08);animation:pulse 1.2s infinite}#mic:disabled{opacity:.5;cursor:wait}@keyframes pulse{50%{box-shadow:0 0 0 14px #ff525240}}#text-controls{width:100%}.chat-input{display:flex;align-items:flex-end;gap:4px;background:var(--surface);border-radius:24px;padding:6px}#chat-text{flex:1;border:none;background:none;color:var(--text);font-family:inherit;font-size:15px;line-height:1.4;resize:none;max-height:120px;padding:8px 6px;outline:none}#chat-text::placeholder{color:var(--muted)}#chat-mic,#chat-send{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s,color .2s,transform .15s}#chat-mic{background:none;color:var(--muted);font-size:18px}#chat-mic:hover{color:var(--text)}#chat-mic.recording{color:var(--recording);animation:pulse-inline 1.2s infinite}#chat-mic:disabled{opacity:.5;cursor:wait}@keyframes pulse-inline{50%{text-shadow:0 0 10px rgba(255,82,82,.6)}}#chat-send{background:var(--accent);color:#04121f}#chat-send:hover{transform:scale(1.08)}#chat-send:disabled{opacity:.5;cursor:wait}body.voice-mode #text-controls,body.text-mode #voice-controls{display:none}dialog#settings{width:min(480px,calc(100vw - 32px));border:none;border-radius:14px;background:var(--surface);color:var(--text);padding:20px}dialog#settings::backdrop{background:#0009}#settings-form{display:flex;flex-direction:column;gap:12px}#settings-form h2{font-size:16px}#settings-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}#settings-form input,#settings-form textarea{padding:8px 10px;border-radius:8px;border:1px solid #2c3743;background:var(--bg);color:var(--text);font-size:14px;font-family:inherit}#settings-form .actions{display:flex;justify-content:space-between;gap:8px;margin-top:6px}#settings-form .actions button{padding:9px 16px;border-radius:8px;border:none;cursor:pointer;font-size:14px}#settings-form button[type=submit]{background:var(--accent);color:#04121f;font-weight:600}#settings-form #clear-history{background:transparent;color:var(--muted);border:1px solid #2c3743}
