/* ═══ Eyes v2 Production — tokens + components ═══ */
:root{
  --bg:#000;--fg:#fff;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --dur:300ms;--fast:80ms;
  --ew:clamp(90px,14vw,200px);--eh:clamp(115px,18vw,250px);--gap:clamp(16px,3vw,45px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100vw;height:100vh;overflow:hidden;background:var(--bg);user-select:none;font-family:-apple-system,sans-serif;color:var(--fg)}

/* ═ lottie fullscreen background ═ */
#lottie-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;overflow:hidden}
#lottie-bg.on{opacity:1}
#lottie-bg lottie-player{width:100vw;height:100vh;object-fit:cover}

/* ═ stage split ═ */
#stage{position:fixed;inset:0;display:flex;align-items:center}
#mochi-area{flex:1;display:flex;align-items:center;justify-content:center;height:100%;position:relative;transition:flex .5s var(--ease)}
#think-area{flex:0;height:100%;display:flex;align-items:center;overflow:hidden;opacity:0;transition:flex .5s var(--ease),opacity var(--dur) ease,padding .5s ease;padding:0}

/* ═ thought cloud (floating above mochi) ═ */
#cloud{position:fixed;top:8%;left:50%;transform:translateX(-50%);z-index:12;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);display:flex;flex-direction:column;align-items:center}
#cloud.on{opacity:1}

/* Small dots leading to bubble (manga style) */
#cloud-dots{display:flex;gap:6px;margin-bottom:6px}
#cloud-dots::before,#cloud-dots::after{content:'';border-radius:50%;background:rgba(255,255,255,.2)}
#cloud-dots::before{width:5px;height:5px;animation:cloudFloat 2s ease-in-out infinite}
#cloud-dots::after{width:9px;height:9px;animation:cloudFloat 2s ease-in-out .3s infinite}

/* Main cloud bubble */
#cloud-bubble{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:24px;min-width:70px;min-height:44px;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:6px;animation:cloudFloat 3s ease-in-out infinite;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(255,255,255,.04)}

/* Icons inside cloud */
#cloud-icons{display:flex;gap:5px;font-size:20px;align-items:center}
#cloud-icons .ci{opacity:0;transform:scale(0);animation:iconPop .3s var(--spring) forwards}
#cloud-icons .ci.done{opacity:.3;transform:scale(.8)}
#cloud-icons .ci.active{opacity:1;transform:scale(1);animation:iconPop .3s var(--spring) forwards,iconPulse 1s ease-in-out .3s infinite}

/* Cloud status text below icons */
#cloud-text{font-size:10px;color:rgba(255,255,255,.35);text-align:center;margin-top:4px;max-width:140px;line-height:1.3;opacity:0;transition:opacity .3s ease}
#cloud.on #cloud-text{opacity:1}

@keyframes cloudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes iconPop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes iconPulse{0%,100%{opacity:.8}50%{opacity:1}}

/* ═ self-healing shock effect ═ */
@keyframes shock{0%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}100%{transform:translateX(0)}}
#face.shock{animation:shock .3s ease-in-out}

/* ═ idle animations (cute character life) ═ */
@keyframes idleLook{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(4px,-2px,0)}50%{transform:translate3d(-3px,1px,0)}75%{transform:translate3d(2px,2px,0)}}
@keyframes idleBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#face.idle-look .eye{animation:idleLook 4s ease-in-out infinite}
#face.idle-bounce{animation:idleBounce 2s ease-in-out infinite}
#face.tilt{transform:rotate(-5deg);transition:transform .5s var(--spring)}
#face.tilt #eye-l{transform:translateY(-3px)}
#face.tilt #eye-r{transform:translateY(2px)}
@keyframes fadeIn{to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ═ face container ═ */
#face{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--gap)}

/* ═ eyes — TikTok-style layered glow (cyan + magenta chromatic split) ═ */
.eye{position:relative;width:var(--ew);height:var(--eh);background:var(--fg);border-radius:42% 42% 38% 38%;will-change:transform;transition:height .25s var(--spring),width .25s var(--spring),border-radius .2s var(--ease),opacity .15s ease;overflow:visible}
/* Cyan layer (offset left) — visible! */
.eye::before{content:'';position:absolute;inset:-6px;background:rgb(0,245,255);border-radius:inherit;transform:translate(-4px,2px);opacity:.35;filter:blur(3px);pointer-events:none;animation:glowCyan 3s ease-in-out infinite alternate}
/* Magenta layer (offset right) */
.eye::after{content:'';position:absolute;inset:-6px;background:rgb(255,0,100);border-radius:inherit;transform:translate(4px,-2px);opacity:.3;filter:blur(3px);pointer-events:none;animation:glowMag 3s ease-in-out infinite alternate-reverse}
@keyframes glowCyan{0%{transform:translate(-4px,2px);opacity:.3}50%{transform:translate(-2px,3px);opacity:.45}100%{transform:translate(-5px,1px);opacity:.25}}
@keyframes glowMag{0%{transform:translate(4px,-2px);opacity:.25}50%{transform:translate(2px,-3px);opacity:.4}100%{transform:translate(5px,-1px);opacity:.2}}
.eye.blink{height:clamp(4px,.7vw,9px)!important;border-radius:50%;transition:height var(--fast) ease-in}
.eye.squint{height:calc(var(--eh)*.32);border-radius:50% 50% 42% 42%}
.eye.heart{background:0;width:calc(var(--ew)*.82);height:calc(var(--ew)*.82)}
.eye.heart::before{inset:0;background:var(--fg);transform:none;filter:none;display:block;width:100%;height:100%;clip-path:polygon(50% 100%,0 35%,0 15%,15% 0,35% 0,50% 18%,65% 0,85% 0,100% 15%,100% 35%);animation:hb .8s ease-in-out infinite alternate;z-index:1}
.eye.heart::after{display:none}
@keyframes hb{0%{transform:scale(.94)}to{transform:scale(1.07)}}
.eye.wide{width:calc(var(--ew)*1.18);height:calc(var(--eh)*1.18);border-radius:50%}
#eye-l.angry{border-radius:14% 50% 42% 42%}#eye-r.angry{border-radius:50% 14% 42% 42%}
.eye.sad::before{inset:auto;top:-12%;left:10%;right:10%;height:7px;background:var(--fg);border-radius:50%;transform:rotate(-8deg);filter:none;z-index:1}
#eye-r.sad::before{transform:rotate(8deg)}
.eye.half{height:calc(var(--eh)*.26);border-radius:50% 50% 38% 38%}
.eye.shut{height:3px;border-radius:50%;transition:height .5s var(--ease)}.eye.shut::after{display:none}

/* ═ mouth ═ */
#mouth{position:absolute;bottom:clamp(14%,18%,22%);left:50%;transform:translateX(-50%);width:clamp(22px,3vw,38px);height:clamp(10px,1.4vw,18px);overflow:visible;z-index:2}
#mouth-in{width:100%;height:200%;border:3px solid var(--fg);border-color:transparent transparent var(--fg) transparent;border-radius:0 0 50% 50%;transition:all var(--dur) ease}
#mouth.smile #mouth-in{height:260%;border-width:4px}
#mouth.talk #mouth-in{height:100%;border-radius:50%;background:var(--fg);animation:tk .22s ease-in-out infinite alternate}
#mouth.open #mouth-in{width:130%;height:170%;border-radius:50%;background:rgba(255,255,255,.12);border:3px solid var(--fg)}
#mouth.sad #mouth-in{transform:rotate(180deg) translateY(80%)}
#mouth.flat #mouth-in{width:60%;height:0;border-bottom:3px solid var(--fg);border-radius:0;border-top:0;border-left:0;border-right:0}
@keyframes tk{0%{transform:scaleY(.3)}to{transform:scaleY(1.4)}}

/* ═ tears ═ */
.tear{position:absolute;width:clamp(14px,2vw,26px);height:0;opacity:0;background:linear-gradient(180deg,rgba(100,180,255,.45),rgba(100,180,255,.08));border-radius:0 0 50% 50%;top:54%;z-index:3;transition:height .5s var(--ease),opacity var(--dur) ease}
.tear{left:calc(50% - var(--ew) - var(--gap)*.15)}
.tear.tear--r{left:auto;right:calc(50% - var(--ew) - var(--gap)*.15)}
.tear.on{height:clamp(40px,6vw,80px);opacity:1;animation:drip 3s ease-in-out infinite}
@keyframes drip{0%,100%{height:clamp(40px,6vw,80px)}50%{height:clamp(65px,9vw,110px)}}

/* ═ cheeks ═ */
.cheek{position:absolute;bottom:20%;width:clamp(18px,3vw,32px);height:clamp(7px,1vw,12px);opacity:0;pointer-events:none;transition:opacity var(--dur) ease}
.cheek{left:calc(50% - var(--ew) - var(--gap)*.5)}.cheek.cheek--r{left:auto;right:calc(50% - var(--ew) - var(--gap)*.5)}
.cheek::before,.cheek::after{content:'';position:absolute;width:2px;height:100%;background:rgba(255,180,200,.3);border-radius:2px;transform:rotate(-25deg)}
.cheek::before{left:20%}.cheek::after{left:55%}
#face.blush .cheek{opacity:1}

/* ═ ears ═ */
.ear{position:absolute;width:clamp(30px,4.5vw,55px);height:clamp(40px,6vw,72px);background:var(--fg);border-radius:50% 50% 44% 44%;top:-4%;opacity:0;transform:scaleY(0) translateY(16px);transform-origin:bottom center;transition:transform .5s var(--spring),opacity var(--dur) ease;z-index:0}
.ear::after{content:'';position:absolute;width:50%;height:50%;top:18%;left:50%;transform:translateX(-50%);background:rgba(255,180,200,.2);border-radius:50% 50% 44% 44%}
.ear{left:calc(50% - var(--ew) - var(--gap) - clamp(8px,1.2vw,16px));transform:scaleY(0) translateY(16px) rotate(-15deg)}
.ear.ear--r{left:auto;right:calc(50% - var(--ew) - var(--gap) - clamp(8px,1.2vw,16px));transform:scaleY(0) translateY(16px) rotate(15deg)}
#face.ears .ear{opacity:1;transform:scaleY(1) translateY(0) rotate(-15deg);animation:wigL 2.5s ease-in-out infinite}
#face.ears .ear.ear--r{transform:scaleY(1) translateY(0) rotate(15deg);animation:wigR 2.5s ease-in-out infinite}
@keyframes wigL{0%,100%{transform:scaleY(1) rotate(-15deg)}40%{transform:scaleY(1.04) translateY(-2px) rotate(-19deg)}70%{transform:scaleY(.97) rotate(-12deg)}}
@keyframes wigR{0%,100%{transform:scaleY(1) rotate(15deg)}40%{transform:scaleY(.97) rotate(12deg)}70%{transform:scaleY(1.04) translateY(-2px) rotate(19deg)}}
#face.ears.hearing .ear{box-shadow:0 0 16px rgba(255,180,200,.15)}
#face.ears.hearing .ear::after{background:rgba(255,180,200,.35);animation:eg .8s ease-in-out infinite alternate}
@keyframes eg{0%{opacity:.3}to{opacity:.7}}

/* ═ manpu ═ */
#manpu{position:absolute;top:12%;right:6%;width:clamp(20px,3.5vw,38px);height:clamp(20px,3.5vw,38px);z-index:10;opacity:0;transform:scale(0);transition:opacity var(--dur) ease,transform var(--dur) var(--spring);pointer-events:none}
#manpu.on{opacity:1;transform:scale(1)}
/* bulb */
#manpu.bulb::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:65%;height:60%;background:rgba(255,240,150,.55);border-radius:50% 50% 35% 35%;box-shadow:0 0 18px rgba(255,240,150,.35);animation:glow 1.5s ease-in-out infinite alternate}
@keyframes glow{0%{opacity:.45}to{opacity:1}}
/* sparkle */
#manpu.sparkle::before,#manpu.sparkle::after{content:'';position:absolute;background:rgba(255,255,255,.75)}
#manpu.sparkle::before{top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:100%}
#manpu.sparkle::after{top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:2px}
#manpu.sparkle{animation:spin 2.5s linear infinite}
@keyframes spin{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(22deg)}to{transform:scale(1) rotate(45deg)}}
/* question */
#manpu.quest{font:700 clamp(18px,3vw,32px)/1 Georgia,serif;color:rgba(150,200,255,.6)}
#manpu.quest::before{content:'?';display:block;animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-5px) rotate(5deg)}}
/* heart */
#manpu.luv::before{content:'';position:absolute;inset:0;background:rgba(255,180,200,.6);clip-path:polygon(50% 100%,0 35%,0 15%,15% 0,35% 0,50% 20%,65% 0,85% 0,100% 15%,100% 35%);animation:hf 1.5s ease-in-out infinite}
@keyframes hf{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.08)}}
/* exclaim */
#manpu.bang{font:900 clamp(22px,3.8vw,40px)/1 Georgia,serif;color:rgba(255,255,255,.75)}
#manpu.bang::before{content:'!';display:block;animation:pop .5s var(--spring) forwards}
@keyframes pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25);opacity:1}to{transform:scale(1)}}
/* vein (anger) */
#manpu.vein::before,#manpu.vein::after{content:'';position:absolute;top:50%;left:50%;background:rgba(255,130,130,.6);border-radius:2px}
#manpu.vein::before{width:100%;height:2px;transform:translate(-50%,-50%) rotate(45deg)}
#manpu.vein::after{width:100%;height:2px;transform:translate(-50%,-50%) rotate(-45deg)}
#manpu.vein{animation:vp .5s ease-in-out infinite alternate}
@keyframes vp{0%{transform:scale(1)}to{transform:scale(1.18)}}
/* sweat */
#manpu.sweat::before{content:'';position:absolute;inset:0;background:rgba(150,200,255,.4);border-radius:50% 50% 50% 50%/30% 30% 60% 60%;animation:sd 2s ease-in-out infinite}
@keyframes sd{0%{transform:translateY(0);opacity:.6}70%{transform:translateY(10px);opacity:.4}to{transform:translateY(0);opacity:.6}}
/* zzz */
#manpu.zzz{font:700 italic clamp(14px,2.2vw,24px)/1 sans-serif;color:rgba(200,200,220,.35)}
#manpu.zzz::before{content:'Zzz';display:block;animation:zf 3s ease-in-out infinite}
@keyframes zf{0%{transform:translateY(0);opacity:.25}50%{transform:translateY(-10px);opacity:.55}to{transform:translateY(0);opacity:.25}}
/* music */
#manpu.note{font:400 clamp(14px,2.2vw,24px)/1 serif;color:rgba(200,180,255,.45)}
#manpu.note::before{content:'♪';display:block;animation:mb 1s ease-in-out infinite}
@keyframes mb{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-6px) rotate(10deg)}}
/* gear */
#manpu.gear{border:2px solid rgba(200,200,200,.25);border-radius:50%;border-top-color:rgba(200,200,200,.6);animation:gs 1s linear infinite}
@keyframes gs{to{transform:rotate(360deg)}}

/* ═ new eye classes ═ */
.eye.tiny{width:calc(var(--ew)*.55);height:calc(var(--eh)*.55);border-radius:50%}
.eye.sparkle-eye{animation:sparkleEye 1.2s ease-in-out infinite}
@keyframes sparkleEye{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.3);transform:scale(1.06)}}
.eye.dizzy{border-radius:50%;animation:dizzyEye 1s linear infinite}
@keyframes dizzyEye{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.92)}100%{transform:rotate(360deg) scale(1)}}
.eye.cross{background:0;width:calc(var(--ew)*.7);height:calc(var(--ew)*.7)}
.eye.cross::before{inset:0;background:var(--fg);transform:none;filter:none;clip-path:polygon(15% 0%,50% 35%,85% 0%,100% 15%,65% 50%,100% 85%,85% 100%,50% 65%,15% 100%,0% 85%,35% 50%,0% 15%);animation:none;z-index:1}
.eye.cross::after{display:none}
.eye.star{background:0;width:calc(var(--ew)*.85);height:calc(var(--ew)*.85)}
.eye.star::before{inset:0;background:var(--fg);transform:none;filter:none;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:starPulse 1.5s ease-in-out infinite;z-index:1}
.eye.star::after{display:none}
@keyframes starPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(15deg)}}
#eye-l.uneven-small{width:calc(var(--ew)*.7);height:calc(var(--eh)*.7)}
#eye-r.uneven-big{width:calc(var(--ew)*1.1);height:calc(var(--eh)*1.1)}

/* ═ new mouth classes ═ */
#mouth.pout #mouth-in{width:50%;height:140%;border-radius:50%;background:var(--fg);border:none}
#mouth.wavy #mouth-in{border-radius:0;border:none;border-bottom:3px solid var(--fg);animation:wavyMouth .6s ease-in-out infinite}
@keyframes wavyMouth{0%,100%{transform:skewX(0)}25%{transform:skewX(8deg)}75%{transform:skewX(-8deg)}}
#mouth.smirk #mouth-in{width:80%;height:180%;border-color:transparent transparent var(--fg) transparent;border-radius:0 0 50% 10%;transform:translateX(15%)}
#mouth.tiny-smile #mouth-in{width:40%;height:120%;border-width:2px;border-color:transparent transparent var(--fg) transparent;border-radius:0 0 50% 50%}
#mouth.o-mouth #mouth-in{width:45%;height:100%;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid var(--fg)}
#mouth.wide-smile #mouth-in{width:160%;height:300%;border-width:4px;border-color:transparent transparent var(--fg) transparent;border-radius:0 0 50% 50%}

/* ═ face modifiers ═ */
#face.shake{animation:faceShake .4s ease-in-out}
@keyframes faceShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
#face.nod{animation:faceNod .6s ease-in-out}
@keyframes faceNod{0%,100%{transform:translateY(0)}30%{transform:translateY(6px)}60%{transform:translateY(-2px)}}
#face.wobble{animation:faceWobble .8s ease-in-out infinite}
@keyframes faceWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
#face.float{animation:faceFloat 2s ease-in-out infinite}
@keyframes faceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#face.shrink{transform:scale(.85);transition:transform .5s var(--spring)}
#face.grow{transform:scale(1.1);transition:transform .5s var(--spring)}

/* ═ new manpu icons ═ */
#manpu.flame::before{content:'';position:absolute;inset:0;background:rgba(255,120,50,.6);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:flameFlicker .3s ease-in-out infinite alternate}
@keyframes flameFlicker{0%{transform:scaleY(1) scaleX(1);opacity:.5}100%{transform:scaleY(1.15) scaleX(.9);opacity:.8}}
#manpu.snow::before{content:'';position:absolute;inset:0;background:rgba(180,220,255,.5);border-radius:50%;animation:snowDrift 2s ease-in-out infinite}
@keyframes snowDrift{0%,100%{transform:translateY(0) rotate(0);opacity:.4}50%{transform:translateY(8px) rotate(180deg);opacity:.7}}
#manpu.star-burst{font:400 clamp(18px,3vw,32px)/1 serif;color:rgba(255,230,100,.6)}
#manpu.star-burst::before{content:'★';display:block;animation:starBurst .8s var(--spring) infinite alternate}
@keyframes starBurst{0%{transform:scale(.8) rotate(0);opacity:.5}100%{transform:scale(1.2) rotate(20deg);opacity:1}}
#manpu.confetti{font:400 clamp(16px,2.5vw,28px)/1 sans-serif;color:rgba(255,200,100,.5)}
#manpu.confetti::before{content:'✦';display:block;animation:confettiBurst 1s var(--spring) forwards}
@keyframes confettiBurst{0%{transform:scale(0) rotate(-30deg);opacity:0}60%{transform:scale(1.3) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:.8}}

/* ═ bubble ═ */
#bubble{position:fixed;bottom:5%;left:50%;transform:translateX(-50%) scale(0);background:rgba(18,18,18,.92);border:1px solid rgba(255,255,255,.08);padding:11px 22px;border-radius:18px;font-size:clamp(12px,1.4vw,15px);max-width:72vw;text-align:center;transition:transform var(--dur) var(--spring);z-index:10}
#bubble.on{transform:translateX(-50%) scale(1)}

/* ═ mic ═ */
#mic-ind{position:fixed;top:3%;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:5px;color:rgba(255,255,255,.2);font-size:10px}
#mic-ind.on{display:flex}
#mic-ind i{width:6px;height:6px;background:#d44;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}

/* ═ controls ═ */
#ctrl{position:fixed;bottom:calc(1% + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;gap:6px;opacity:.15;transition:opacity var(--dur) ease;z-index:20}
body:hover #ctrl,#ctrl:active,#ctrl.touched{opacity:1}
@media(hover:none){#ctrl{opacity:.5}}
#bubble{bottom:calc(5% + env(safe-area-inset-bottom,0px))}
#ctrl button{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);padding:6px 12px;border-radius:12px;font-size:11px;cursor:pointer;transition:all .15s ease}
#ctrl button:hover{background:rgba(255,255,255,.08);color:var(--fg)}
#ctrl button.on{background:rgba(100,255,160,.08);border-color:rgba(100,255,160,.25);color:rgba(180,255,200,.8)}

/* ═ cam PiP (picture-in-picture preview) ═ */
#cam-pip{
  position:fixed;bottom:50px;left:16px;
  width:120px;height:90px;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  opacity:0;transform:scale(.8);
  transition:opacity .3s ease,transform .3s var(--spring);
  z-index:15;pointer-events:none;
  background:#111;
}
#cam-pip.on{opacity:1;transform:scale(1);pointer-events:auto}
#cam-pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}

/* ═ brain graph canvas ═ */
#graph-cv{
  width:100%;height:100%;
  border-radius:16px;
  display:none;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.04);
}
#stage.graph #graph-cv{display:block}
#stage.graph #think-area{flex:.5;opacity:1;padding:12px 12px 12px 0}
#stage.graph #mochi-area{flex:.5}

/* ═ activity log ═ */
#activity-log{position:fixed;left:12px;top:50%;transform:translateY(-50%);width:clamp(140px,28vw,200px);max-height:50vh;overflow-y:auto;z-index:11;pointer-events:none;display:flex;flex-direction:column;gap:3px;opacity:0;transition:opacity .4s ease}
#activity-log.on{opacity:1;pointer-events:auto}
.act{display:flex;align-items:flex-start;gap:5px;font-size:10px;line-height:1.3;color:rgba(255,255,255,.35);opacity:0;transform:translateX(-8px);animation:fadeIn .3s var(--ease) forwards;padding:3px 0}
.act .act-ico{flex-shrink:0;font-size:12px}
.act .act-txt{word-break:break-word}
.act.tool{color:rgba(120,180,255,.45)}
.act.result{color:rgba(130,255,190,.35)}
.act.reply{color:rgba(255,255,255,.5)}
.act.user{color:rgba(255,200,100,.4)}
@media(max-width:600px){
  #activity-log{left:6px;width:clamp(110px,35vw,160px);max-height:35vh;top:auto;bottom:60px;transform:none}
  .act{font-size:9px}
}

/* ═ loader ═ */
#loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:100;color:rgba(255,255,255,.3);font-size:clamp(14px,2vw,18px);animation:breathe 2s ease-in-out infinite;cursor:pointer}
@keyframes breathe{0%,100%{opacity:.3}50%{opacity:.75}}

/* ═ video (hidden) ═ */
#cam{position:fixed;opacity:0;pointer-events:none;top:-9999px;width:1px;height:1px}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE (portrait phones)
   ═══════════════════════════════════════════ */
@media(max-width:600px){
  /* Smaller eyes on mobile */
  :root{--ew:clamp(60px,18vw,100px);--eh:clamp(75px,23vw,130px);--gap:clamp(10px,3vw,20px)}

  /* Cloud — smaller on mobile */
  #cloud{top:5%}
  #cloud-bubble{min-width:48px;min-height:32px;padding:6px 10px}
  #cloud-icons{font-size:14px}

  /* Stack vertically: mochi top, think/graph bottom */
  #stage{flex-direction:column}
  #mochi-area{flex:1;min-height:40vh}
  #think-area{height:auto;flex:0;width:100%}

  #stage.graph #mochi-area{flex:.4}
  #stage.graph #think-area{flex:.6;opacity:1;padding:8px 8px 8px}

  /* Graph canvas — square-ish */
  #graph-cv{border-radius:12px}

  /* Controls — scroll horizontally, always visible on mobile */
  #ctrl{gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:95vw;padding:4px 8px;opacity:.6}
  #ctrl button{padding:6px 10px;font-size:10px;flex-shrink:0;min-width:36px}

  /* Bubble — wider on mobile */
  #bubble{max-width:88vw;font-size:13px;padding:10px 16px;border-radius:14px}

  /* PiP — smaller + move above controls */
  #cam-pip{width:80px;height:60px;bottom:calc(48px + env(safe-area-inset-bottom,0px));left:8px;border-radius:8px}

  /* Manpu — bigger on mobile (easier to see) */
  #manpu{width:clamp(24px,7vw,36px);height:clamp(24px,7vw,36px);top:8%;right:4%}

  /* Mouth — adjust for smaller face */
  #mouth{bottom:clamp(10%,15%,20%);width:clamp(16px,5vw,28px);height:clamp(8px,2vw,14px)}

  /* Mic indicator — below safe area */
  #mic-ind{top:calc(3% + env(safe-area-inset-top,0px))}

  /* Loader — larger tap target */
  #loader{font-size:clamp(16px,4vw,22px)}
}

/* Landscape mobile — keep side by side but tighter */
@media(max-height:500px) and (orientation:landscape){
  :root{--ew:clamp(50px,10vh,80px);--eh:clamp(60px,13vh,100px);--gap:clamp(8px,2vh,16px)}
  #ctrl button{padding:4px 8px;font-size:9px}
  #bubble{font-size:11px;padding:8px 14px}
  #cam-pip{width:70px;height:52px;bottom:40px}
}