:root{font-family:Nunito,Trebuchet MS,system-ui,sans-serif;color:#513943;background:#fff8ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% -10%,#ffd8c4 0,#fff8ee 45%)}button,input{font:inherit}button{touch-action:none}.app{min-height:100vh;max-width:780px;margin:auto;padding:max(20px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto 1fr auto auto;gap:16px}.topbar{display:flex;justify-content:space-between;align-items:center}.eyebrow{margin:0 0 3px;color:#b64e67;font-size:.72rem;font-weight:900;letter-spacing:.14em}h1{margin:0;color:#5f3c48;font-size:clamp(2rem,6vw,3rem);line-height:1}.status{border-radius:999px;background:#fff;padding:9px 14px;box-shadow:0 4px 18px #b4634b1f;font-size:.82rem;font-weight:800}.friend{display:grid;align-content:center;justify-items:center;min-height:280px}.avatar{position:relative;width:min(52vw,260px);aspect-ratio:1;filter:drop-shadow(0 18px 22px #a7513d25);transition:transform .35s ease}.avatar[data-mood=listening]{transform:rotate(-2deg) scale(1.04)}.avatar[data-mood=thinking]{animation:float 1.8s ease-in-out infinite}.avatar[data-mood=speaking] .smile{animation:talk .32s ease-in-out infinite alternate}.avatar[data-mood=happy]{transform:scale(1.04)}.ear{position:absolute;z-index:0;top:6%;width:38%;height:45%;background:#ee8059;border:7px solid #5f3c48}.ear:after{content:"";position:absolute;top:22%;right:24%;bottom:22%;left:24%;background:#f6a6b7;clip-path:polygon(50% 0,100% 100%,0 100%)}.ear-left{left:11%;clip-path:polygon(50% 0,100% 100%,0 78%);transform:rotate(-9deg)}.ear-right{right:11%;clip-path:polygon(50% 0,100% 78%,0 100%);transform:rotate(9deg)}.face{position:absolute;z-index:2;top:20%;right:5%;bottom:1%;left:5%;border:7px solid #5f3c48;border-radius:48% 48% 46% 46%;background:#ffd2b8}.hair{position:absolute;z-index:3;width:72%;height:34%;left:14%;top:17%;border-radius:55% 55% 40% 40%;background:#d86468;clip-path:polygon(0 0,100% 0,94% 76%,77% 58%,61% 90%,47% 55%,30% 88%,13% 60%)}.eye{position:absolute;z-index:4;top:49%;width:12%;height:16%;border-radius:50%;background:#5f3c48;box-shadow:inset 4px 5px #fff}.eye-left{left:30%}.eye-right{right:30%}.nose{position:absolute;z-index:4;left:46%;top:65%;width:8%;height:6%;background:#c75573;clip-path:polygon(0 0,100% 0,50% 100%)}.smile{position:absolute;z-index:4;left:38%;top:70%;width:24%;height:13%;border-bottom:6px solid #5f3c48;border-radius:0 0 50% 50%;transform-origin:top}.whisker{position:absolute;z-index:5;width:24%;height:3px;background:#5f3c48;top:69%;border-radius:3px}.whisker-a{left:-2%;transform:rotate(8deg)}.whisker-b{left:0;top:75%;transform:rotate(-5deg)}.whisker-c{right:-2%;transform:rotate(-8deg)}.whisker-d{right:0;top:75%;transform:rotate(5deg)}.avatar-note{margin:10px 0 0;color:#9b6c72;font-size:.78rem}.conversation{min-height:94px;display:grid;place-items:center;padding:18px 22px;background:#fff;border:2px solid #f8d9c8;border-radius:24px 24px 24px 8px;box-shadow:0 10px 32px #9b56421a}.conversation p{margin:0;text-align:center;font-size:clamp(1.1rem,3.5vw,1.4rem);line-height:1.45;font-weight:750}.controls{text-align:center}.mic{width:100%;min-height:70px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:22px;color:#fff;background:linear-gradient(135deg,#ed765a,#df5f80);box-shadow:0 10px #b94f61,0 16px 28px #bd4f5e45;font-size:1.05rem;font-weight:900;cursor:pointer}.mic:active,.mic.recording{transform:translateY(6px);box-shadow:0 4px #a83f53,0 8px 18px #bd4f5e45;background:#c84e68}.mic:disabled{opacity:.72}.mic-icon{width:19px;height:29px;border:3px solid #fff;border-radius:12px;position:relative}.mic-icon:after{content:"";position:absolute;width:27px;height:18px;left:-7px;top:12px;border:3px solid white;border-top:0;border-radius:0 0 14px 14px}.hint{margin:13px 0 0;color:#9b6c72;font-size:.8rem;font-weight:700}.pairing{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:#563d47cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.pairing[hidden]{display:none}.pairing-card{width:min(100%,390px);padding:28px;border-radius:28px;background:#fff8ee;box-shadow:0 30px 80px #2b151d55}.pairing h2{margin:5px 0 22px}.pairing label{display:block;margin-bottom:7px;font-weight:800}.pairing input{width:100%;padding:13px;border:2px solid #e6b9aa;border-radius:12px;background:#fff;font-size:1.2rem}.pairing button{width:100%;margin-top:14px;padding:13px;border:0;border-radius:12px;color:#fff;background:#d95e73;font-weight:900}.error{min-height:1.3em;color:#a5273e;font-size:.86rem}@keyframes float{50%{transform:translateY(-8px) rotate(1deg)}}@keyframes talk{to{transform:scaleY(1.5)}}@media(max-height:720px){.friend{min-height:200px}.avatar{width:min(38vh,210px)}.avatar-note{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}