:root{--bg: #f6f4ef;--text: #1f1d1a;--muted: #6b665e;--bot: #ffffff;--paul: #dcebe3;--accent: #2f6f57;--warn: #9a3b1c;--record: #d93025;--record-glow: rgb(217 48 37 / .45);--vowel: #1d5fc4;--border: #ddd7cc;font-family:system-ui,Noto Sans Thai,sans-serif;color:var(--text);background:var(--bg)}@media(prefers-color-scheme:dark){:root{--bg: #171614;--text: #ece8e1;--muted: #a29c92;--bot: #24221f;--paul: #1f3a2f;--accent: #7fc2a3;--warn: #f0a07f;--record: #e5534b;--record-glow: rgb(229 83 75 / .45);--vowel: #8ab8ff;--border: #3a3732}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg)}button{font:inherit}.app{display:flex;flex-direction:column;height:100%;max-width:640px;margin:0 auto}header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border)}header h1{font-size:1.1rem;margin:0}header .header-actions{display:flex;gap:8px}header button{white-space:nowrap}.font-loopless .unit-thai,.font-loopless .units,.font-loopless .card-thai{font-family:Kanit,sans-serif}.font-handwriting .unit-thai,.font-handwriting .units,.font-handwriting .card-thai{font-family:Mali,cursive}header .mock{font-weight:400;color:var(--muted);font-size:.85rem}button{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 12px;color:var(--text);cursor:pointer}button svg{flex-shrink:0}.message-actions button,.card-actions button{display:inline-flex;align-items:center;gap:5px}button:disabled{opacity:.5;cursor:default}.conversation{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.message{display:flex;flex-direction:column;max-width:88%}.message.bot{align-self:flex-start}.message.paul{align-self:flex-end;align-items:flex-end}.bubble{padding:10px 14px;border-radius:14px;background:var(--bot);border:1px solid var(--border);font-size:1.5rem;line-height:1.6;user-select:none;-webkit-user-select:none}.message.paul .bubble{background:var(--paul)}.bubble.typing{color:var(--muted)}.units{display:flex;flex-wrap:wrap}.units.spaced{gap:4px 14px}.unit{display:inline-flex;flex-direction:column;align-items:center;-webkit-touch-callout:none}.unit.new .unit-thai{text-decoration:underline dotted var(--muted);text-underline-offset:6px}.phrase-words{display:inline-flex;gap:7px}.unit-roman{font-size:.8rem;color:var(--muted);line-height:1.2}.english{font-size:.95rem;color:var(--muted);margin-top:6px}.correction{font-size:.9rem;color:var(--warn);margin-top:4px}.note{font-size:.9rem;color:var(--muted);margin-top:4px}.message-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.message-actions button{font-size:.85rem;padding:4px 10px}.error{color:var(--warn);font-size:.9rem}.composer{display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}.composer input{flex:1;min-width:0;font:inherit;font-size:1rem;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bot);color:var(--text)}.composer{align-items:center}.composer .round{width:44px;height:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.composer .round.send{background:var(--accent);border-color:var(--accent);color:var(--bg)}.composer .round.recording{background:var(--record);border-color:var(--record);color:#fff;animation:recording 1.4s ease-out infinite}@keyframes recording{0%{box-shadow:0 0 0 0 var(--record-glow)}to{box-shadow:0 0 0 12px transparent}}@media(prefers-reduced-motion:reduce){.composer .round.recording{animation:none}}.composer .on{background:var(--accent);color:var(--bg);border-color:var(--accent)}.passphrase{display:flex;flex-direction:column;gap:10px;padding:48px 16px;max-width:360px;margin:0 auto;width:100%;box-sizing:border-box}.passphrase input{font:inherit;font-size:1rem;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bot);color:var(--text)}.card-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:flex-end;justify-content:center}.card{position:relative;width:100%;max-width:640px;background:var(--bot);border-radius:16px 16px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.card-close{position:absolute;top:8px;right:8px;border:none;font-size:1.4rem}.card-thai{font-size:2.2rem;display:flex;flex-wrap:wrap;gap:6px;cursor:pointer}.card-roman{font-size:1.2rem;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.syllable{border:1px dashed var(--border);padding:2px 8px;font-size:inherit}.vowel{color:var(--vowel)}.card-vowel{font-size:1rem;margin-bottom:4px}.card-vowel .vowel{font-size:2rem;margin-left:8px}.card-vowel-row{margin-top:4px;color:var(--muted)}.syllable.selected{border-style:solid;border-color:var(--accent)}.unchecked{font-size:.75rem;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:1px 6px}.card-reason{font-size:.95rem;color:var(--muted)}.card-meaning{font-size:1.2rem}.card-actions{display:flex;gap:8px;flex-wrap:wrap}