*{box-sizing:border-box}body{font-family:Sarabun,system-ui,sans-serif;margin:0;background:#0f0f12;color:#e4e4e7}.container,body{min-height:100vh}.container{max-width:42rem;margin:0 auto;padding:2rem 1rem;display:flex;flex-direction:column}h1{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.subtitle{color:#a1a1aa;font-size:.875rem;margin-bottom:2rem}.chat{flex:1 1;overflow-y:auto}.chat,.message{margin-bottom:1rem}.message{padding:.75rem 1rem;border-radius:12px;line-height:1.5}.message.user{background:#27272a;margin-left:0;margin-right:2rem}.message.assistant{background:#18181b;border:1px solid #27272a;margin-left:2rem;margin-right:0}.message .role{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#71717a;margin-bottom:.25rem}.form{display:flex;gap:.5rem;padding:.5rem 0}.input{flex:1 1;padding:.75rem 1rem;font-size:1rem;font-family:inherit;color:#e4e4e7;background:#27272a;border:1px solid #3f3f46;border-radius:10px;outline:none}.input:focus{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.2)}.input::placeholder{color:#71717a}.btn{padding:.75rem 1.25rem;font-size:1rem;font-weight:500;font-family:inherit;color:#fff;background:#6366f1;border:none;border-radius:10px;cursor:pointer}.btn:hover{background:#4f46e5}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-voice{background:#22c55e}.btn-voice:hover{background:#16a34a}.btn-recording{background:#dc2626;animation:pulse 1s ease-in-out infinite}.btn-play{background:#0d9488;margin-top:.5rem}.btn-play:hover{background:#0f766e}.play-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.play-modal{background:#18181b;border:1px solid #3f3f46;border-radius:16px;padding:1.5rem 2rem;text-align:center;max-width:20rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}.play-modal-title{font-size:1.125rem;font-weight:600;margin:0 0 .5rem;color:#e4e4e7}.play-modal-desc{font-size:.875rem;color:#a1a1aa;margin:0 0 1.25rem}.btn-play-modal{width:100%;padding:1rem 1.5rem;font-size:1.1rem}@keyframes pulse{50%{opacity:.85}}.status{font-size:.8rem;color:#71717a;margin-top:.5rem;min-height:1.25rem}.barge-hint{font-size:.75rem;color:#52525b;margin-top:.25rem}.mic-hint{margin-top:.5rem;color:#71717a}.mic-hint code{background:#27272a;padding:.15rem .4rem;border-radius:4px;font-size:.85em}