*{box-sizing:border-box}
@font-face{font-family:Nunito;src:url('/misha/assets/fonts/nunito-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{color-scheme:light;--bg:#f6f8f4;--text:#102d21;--button:#174e35;--white:#fff;--focus:#b05a00}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.app{width:min(100%,640px);height:100svh;height:100dvh;min-height:280px;margin:auto;padding:clamp(16px,4vw,32px);padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));display:grid;grid-template-rows:minmax(100px,1fr) auto;gap:16px}
.status{display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(26px,6vw,36px);line-height:1.3;font-weight:650;overflow-wrap:anywhere}
.controls{display:grid;gap:16px}
button{width:100%;min-height:100px;padding:20px 16px;border:3px solid var(--button);border-radius:20px;background:var(--button);color:var(--white);font:700 clamp(25px,6vw,34px)/1.2 Nunito,ui-rounded,system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
button:disabled{background:var(--bg);color:var(--text);cursor:default}
button:focus-visible{outline:4px solid var(--focus);outline-offset:4px}
button[aria-pressed="true"]{background:transparent;color:var(--button);border-color:var(--button)}
.play-slot{min-height:90px}
#listen{min-height:90px;background:var(--bg);color:var(--text);font-size:clamp(24px,5.5vw,30px)}
[hidden]{display:none!important}
@media(max-height:520px){.app{gap:8px;padding:12px;grid-template-rows:minmax(70px,1fr) auto}.status{font-size:24px}.controls{gap:8px}button{min-height:76px;padding:12px;font-size:26px}.play-slot,#listen{min-height:64px}}

.status-panel{min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#status-image{display:block;object-fit:contain;width:100%;height:100%;max-width:340px;max-height:340px;transform-origin:center;transition:transform 70ms linear}
#status-image{animation:none!important;transform:none!important;transition:none}
#status-image[data-state="answer"]{max-width:100%;max-height:100%;border-radius:12px}
#robot-face{position:absolute;width:100%;height:100%;max-width:340px;max-height:340px;pointer-events:none;--mouth-open:.15}
.robot-eyes{transform-origin:630px 512px;filter:drop-shadow(0 0 6px #aaf0b544);animation:eyes-blink 12.4s ease-in-out infinite}
.robot-mouth{filter:drop-shadow(0 0 10px #aaf0b566)}
.mouth-open{display:none;transform-origin:640px 625px;transform:scaleY(var(--mouth-open));transition:transform 65ms linear}
#robot-face[data-state="speaking"] .mouth-open,#robot-face[data-state="speaking-thinking"] .mouth-open{display:block}
#robot-face[data-state="speaking"] .mouth-closed,#robot-face[data-state="speaking-thinking"] .mouth-closed{display:none}
@keyframes eyes-blink{0%,25%,27.5%,62%,64.5%,95%,97.5%,100%{transform:scaleY(1)}26.25%,63.25%,96.25%{transform:scaleY(.035)}}
@media(prefers-reduced-motion:reduce){.robot-eyes{animation:none!important}.mouth-open{transition:none;transform:scaleY(.15)}}
.status:not(.status-error){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.status.status-error{font-size:clamp(24px,6vw,32px)}

.robot-pupil{transition:transform 450ms ease-in-out}
#robot-face[data-state="thinking"] .robot-pupil,#robot-face[data-state="speaking-thinking"] .robot-pupil{transform:translate(12px,-12px);animation:pupil-think 6.8s ease-in-out infinite}
@keyframes pupil-think{0%,14%,100%{transform:translate(12px,-12px)}38%,53%{transform:translate(-12px,-12px)}76%,85%{transform:translate(8px,-12px)}}
@media(prefers-reduced-motion:reduce){.robot-pupil{transition:none;animation:none!important}}