/* ===== CYBER HACKED — NEXUS, the room coach ===== */
.layout>.side{max-height:calc(100vh - 100px); overflow-y:auto; scrollbar-width:none}
.layout>.side::-webkit-scrollbar{display:none}
.layout>.side .side-box:has(.side-note){display:none}

.coach{--amber-dim:rgba(255,194,60,.13); position:relative; --mood:var(--blue); display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 12px 13px; border-radius:var(--r); overflow:hidden; background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--mood) 26%,transparent),transparent 62%),linear-gradient(180deg,var(--panel),#101828); border:1px solid color-mix(in srgb,var(--mood) 55%,var(--line)); transition:border-color .25s}
.coach-fx{position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden}
.coach-fx span{position:absolute; left:50%; top:56%; font-size:1.15rem; animation:coachBurst var(--t,.95s) cubic-bezier(.15,.7,.3,1) forwards}
.coach-fx i{position:absolute; left:50%; top:56%; width:8px; height:8px; border-radius:2px; background:var(--k); animation:coachBurst var(--t,.95s) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes coachBurst{from{transform:translate(-50%,-50%) scale(.3) rotate(0); opacity:1}80%{opacity:1}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.1) rotate(var(--r)); opacity:0}}

.coach-bubble{position:relative; z-index:2; width:100%; min-height:66px; padding:9px 12px; border-radius:12px; background:var(--panel3); color:#fff; font-size:.88rem; line-height:1.6; text-align:center; display:flex; flex-direction:column; justify-content:center; animation:coachPop .24s cubic-bezier(.3,1.6,.6,1)}
.coach-bubble::after{content:''; position:absolute; bottom:-7px; left:50%; translate:-50% 0; border:7px solid transparent; border-bottom:0; border-top-color:var(--panel3)}
.coach-bubble b{color:var(--amber)}
.coach-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.coach-hint{display:block; margin-top:5px; padding:7px 9px; border-radius:7px; background:var(--amber-dim); color:#ffe6a8; text-align:right}
.coach-acts{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:7px}
.coach-acts button{padding:5px 11px; border-radius:7px; font-family:var(--ar); font-size:.82rem; font-weight:700; color:#fff; background:var(--panel2); border:1px solid var(--line-strong); transition:transform .12s, background .12s}
.coach-acts button:hover{transform:translateY(-2px) scale(1.04)}
.coach-acts .yes{background:var(--red-btn); border-color:var(--red-btn); animation:coachNudge 1s ease-in-out infinite}
.coach-acts .yes:hover{background:var(--red-hover)}
@keyframes coachNudge{50%{transform:scale(1.07)}}
@keyframes coachPop{from{transform:scale(.82) translateY(10px); opacity:0}}

.coach-stage{position:relative; width:100%; height:216px; cursor:pointer; border-radius:12px; outline-offset:2px; -webkit-tap-highlight-color:transparent}
.coach-name{font-family:var(--mono); font-variant-ligatures:none; font-size:.7rem; letter-spacing:1px; color:var(--text-faint); direction:ltr}
.coach-name b{color:var(--mood); font-size:.8rem; letter-spacing:2px}

/* mood meter and score */
.coach-meter{width:100%; margin-top:6px; padding-top:8px; border-top:1px dashed var(--line-strong)}
.cm-top{display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--text-dim)}
.cm-face{font-size:1.05rem; line-height:1; display:inline-block}
.cm-face.pop{animation:coachPop .3s}
.cm-bar{height:9px; margin-top:4px; border-radius:9px; background:var(--bg2); overflow:hidden; border:1px solid var(--line)}
.cm-bar i{display:block; height:100%; width:60%; border-radius:9px; background:var(--k,var(--blue)); transition:width .4s cubic-bezier(.3,1.5,.6,1), background .3s}
.cm-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:7px}
.cm-stats div{padding:4px 2px; border-radius:7px; text-align:center; background:var(--panel2); font-size:.72rem; color:var(--text-dim); line-height:1.3}
.cm-stats b{display:block; font-family:var(--mono); font-variant-ligatures:none; color:#fff; font-size:.95rem}
.cm-stats .hot b{color:var(--amber)}

/* ----- the character ----- */
.nexus{display:block; width:100%; height:100%; overflow:visible}
.n-rig{transform-origin:100px 200px; animation:nBob 3s ease-in-out infinite}
.n-shadow{fill:#000; opacity:.34; transform-origin:100px 205px; animation:nShadow 3s ease-in-out infinite}
.n-tail{transform-origin:70px 180px; animation:nTail 1.5s ease-in-out infinite}
.n-arm-r{transform-origin:134px 140px; transition:transform .25s}
.n-arm-l{transform-origin:66px 140px; transition:transform .25s}
.n-ear-l{transform-origin:62px 40px} .n-ear-r{transform-origin:138px 40px}
.n-led{fill:var(--mood); filter:drop-shadow(0 0 5px var(--mood)); animation:nPulse 1.6s infinite}
.n-visor{transition:fill .2s}
.nexus .f{opacity:0; transition:opacity .12s}
.f-eyes{transform-origin:100px 70px; animation:nBlink 4.4s infinite}
.n-pupils{transition:transform .09s linear}
.n-iris{fill:#10233f}
.n-brows{stroke:#ff5a48; stroke-width:6; stroke-linecap:round}
.f-glasses{transform:translateY(-70px); transition:transform .4s cubic-bezier(.3,1.5,.6,1), opacity .15s}
.f-steam path{stroke:#ffe0db; stroke-width:5; stroke-linecap:round; fill:none}
.f-zzz text,.f-stars text,.f-fire text{font-family:var(--head); font-weight:700}
@keyframes nBob{50%{transform:translateY(-5px)}}
@keyframes nShadow{50%{transform:scaleX(.88); opacity:.25}}
@keyframes nTail{50%{transform:rotate(12deg)}}
@keyframes nBlink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.06)}}
@keyframes nPulse{50%{opacity:.4}}

/* idle face */
.coach:is([data-mood=idle],[data-mood=wave],[data-mood=look]) :is(.f-eyes,.f-smile){opacity:1}

/* greeting */
.coach[data-mood=wave] .n-arm-r{animation:nWave .32s ease-in-out infinite alternate}
.coach[data-mood=wave] .n-ear-r{animation:nEar .4s ease-in-out 3}
@keyframes nWave{from{transform:rotate(-92deg)}to{transform:rotate(-128deg)}}
@keyframes nEar{50%{transform:rotate(14deg)}}

/* looking around while idle */
.coach[data-mood=look] .n-rig{animation:nPeek 2s ease-in-out}
@keyframes nPeek{25%{transform:rotate(-6deg)}70%{transform:rotate(6deg)}}

/* happy */
.coach:is([data-mood=happy],[data-mood=party]){--mood:var(--green)}
.coach:is([data-mood=happy],[data-mood=party]) :is(.f-eyes-happy,.f-laugh,.f-cheek){opacity:1}
.coach:is([data-mood=happy],[data-mood=party]) .n-tail{animation-duration:.28s}
.coach:is([data-mood=happy],[data-mood=party]) .n-arm-r{animation:nCheerR .26s ease-in-out infinite alternate}
.coach:is([data-mood=happy],[data-mood=party]) .n-arm-l{animation:nCheerL .26s ease-in-out infinite alternate}
.coach[data-mood=happy][data-v="1"] .n-rig{animation:nJump .5s cubic-bezier(.3,1.5,.6,1) 3}
.coach:is([data-mood=party],[data-mood=happy][data-v="2"]) .n-rig{transform-origin:100px 115px}
.coach[data-mood=happy][data-v="2"] .n-rig{animation:nFlip 1s cubic-bezier(.4,0,.3,1)}
.coach[data-mood=happy][data-v="3"] .n-rig{animation:nDance .42s ease-in-out 4}
.coach[data-mood=party] .n-rig{animation:nFlip .9s cubic-bezier(.4,0,.3,1) 3}
@keyframes nCheerR{from{transform:rotate(-100deg)}to{transform:rotate(-135deg)}}
@keyframes nCheerL{from{transform:rotate(100deg)}to{transform:rotate(135deg)}}
@keyframes nJump{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(0) scale(1.12,.86)}50%{transform:translateY(-30px) scale(.94,1.08)}85%{transform:translateY(0) scale(1.1,.9)}}
@keyframes nFlip{0%{transform:scale(1) rotate(0)}15%{transform:scale(1.08,.9)}50%{transform:scale(.86) rotate(180deg)}100%{transform:scale(1) rotate(360deg)}}
@keyframes nDance{0%,100%{transform:rotate(0)}25%{transform:rotate(-11deg) translateX(-7px)}75%{transform:rotate(11deg) translateX(7px)}}

/* shy, when poked */
.coach[data-mood=shy] :is(.f-eyes-happy,.f-smile,.f-cheek){opacity:1}
.coach[data-mood=shy] .n-rig{animation:nWiggle .24s ease-in-out 3}
@keyframes nWiggle{25%{transform:rotate(-6deg) scale(1.05,.95)}75%{transform:rotate(6deg) scale(.96,1.05)}}

/* angry */
.coach[data-mood=angry]{--mood:var(--red); animation:coachShake .34s linear 2}
.coach[data-mood=angry] :is(.f-eyes,.f-lids,.n-brows-g,.f-grit,.f-steam){opacity:1}
.coach[data-mood=angry] .n-visor{fill:#44100f}
.coach[data-mood=angry] .n-iris{fill:#d11a12}
.coach[data-mood=angry] .f-eyes{animation:none}
.coach[data-mood=angry] .n-rig{animation:nFume .17s linear infinite}
.coach[data-mood=angry] .n-arm-r{transform:rotate(-26deg)}
.coach[data-mood=angry] .n-arm-l{transform:rotate(26deg)}
.coach[data-mood=angry] .n-ear-l{transform:rotate(-24deg)}
.coach[data-mood=angry] .n-ear-r{transform:rotate(24deg)}
.coach[data-mood=angry] .f-steam path{animation:nSteam .55s ease-out infinite}
.coach[data-mood=angry] .f-steam path:nth-child(even){animation-delay:.22s}
@keyframes nFume{25%{transform:translateX(-3px) scale(1.04)}75%{transform:translateX(3px) scale(1.04)}}
@keyframes nSteam{from{transform:translateY(8px); opacity:0}35%{opacity:1}to{transform:translateY(-14px); opacity:0}}
@keyframes coachShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.coach[data-mood=angry][data-rage] .n-rig{animation:nRage .12s linear infinite}
.coach[data-mood=angry][data-rage] .coach-stage{animation:coachFlash .5s linear 3}
@keyframes nRage{25%{transform:translateX(-5px) scale(1.1) rotate(-2deg)}75%{transform:translateX(5px) scale(1.1) rotate(2deg)}}
@keyframes coachFlash{50%{background:rgba(255,68,51,.26)}}

/* holding up the hint sign */
.coach[data-mood=alert]{--mood:var(--amber); animation:coachRing 1.1s ease-out infinite}
.coach[data-mood=alert] :is(.f-eyes,.f-o,.f-sign){opacity:1}
.coach[data-mood=alert] .f-eyes{animation:none; transform:scale(1.14)}
.coach[data-mood=alert] .n-rig{animation:nHop .62s ease-in-out infinite}
.coach[data-mood=alert] .n-arm-r{transform:rotate(-105deg)}
.coach[data-mood=alert] .n-arm-l{animation:nWaveL .3s ease-in-out infinite alternate}
.coach[data-mood=alert] .f-sign{transform-origin:153px 110px; animation:nSign .62s ease-in-out infinite}
@keyframes coachRing{0%{box-shadow:0 0 0 0 rgba(255,194,60,.55)}100%{box-shadow:0 0 0 14px rgba(255,194,60,0)}}
@keyframes nHop{50%{transform:translateY(-12px)}}
@keyframes nWaveL{from{transform:rotate(95deg)}to{transform:rotate(130deg)}}
@keyframes nSign{50%{transform:rotate(7deg)}}

/* reading out the hint */
.coach[data-mood=hint]{--mood:var(--amber)}
.coach[data-mood=hint] :is(.f-eyes,.f-o){opacity:1}
.coach[data-mood=hint] .f-eyes{animation:none}
.coach[data-mood=hint] .n-arm-r{transform:rotate(-105deg)}
.coach[data-mood=hint] .f-bulb{opacity:1; animation:nPulse .9s infinite}

/* surprised */
.coach[data-mood=shock] :is(.f-eyes,.f-o){opacity:1}
.coach[data-mood=shock] .f-eyes{animation:none; transform:scale(1.2)}
.coach[data-mood=shock] .n-rig{animation:nJump .4s}

/* asleep */
.coach[data-mood=sleep]{--mood:var(--purple)}
.coach[data-mood=sleep] :is(.f-eyes-sleep,.f-snore,.f-zzz){opacity:1}
.coach[data-mood=sleep] .n-rig{animation:nBreath 3.2s ease-in-out infinite}
.coach[data-mood=sleep] .n-tail{animation:none}
.coach[data-mood=sleep] .f-zzz text{animation:nZ 2.4s ease-out infinite}
.coach[data-mood=sleep] .f-zzz text:nth-child(2){animation-delay:.8s}
.coach[data-mood=sleep] .f-zzz text:nth-child(3){animation-delay:1.6s}
@keyframes nBreath{50%{transform:scale(1.03,.97)}}
@keyframes nZ{from{transform:translate(0,12px); opacity:0}30%{opacity:1}to{transform:translate(12px,-14px); opacity:0}}

/* dizzy */
.coach[data-mood=dizzy] :is(.f-eyes-x,.f-wavy,.f-stars){opacity:1}
.coach[data-mood=dizzy] .n-rig{animation:nDizzy .8s ease-in-out infinite}
.coach[data-mood=dizzy] .f-stars{transform-origin:100px 24px; animation:nOrbit 1s linear infinite}
@keyframes nDizzy{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes nOrbit{to{transform:rotate(360deg)}}

/* streak rewards */
.coach[data-cool]:not([data-mood=sleep],[data-mood=dizzy]) .f-glasses{opacity:1; transform:translateY(0)}
.coach[data-fire] .f-fire{opacity:1}
.coach[data-fire] .f-fire text{transform-box:fill-box; transform-origin:center bottom; animation:nFlame .3s ease-in-out infinite alternate}
.coach[data-fire] .f-fire text:nth-child(2){animation-delay:.14s}
@keyframes nFlame{from{transform:scale(.88)}to{transform:scale(1.14)}}

/* ----- VEX: the Cyber Hacked ghost ----- */
.coach.vex:is([data-mood=idle],[data-mood=wave],[data-mood=look],[data-mood=shy],[data-mood=shock],[data-mood=dizzy],[data-mood=torch]){--mood:var(--red)}
.coach.vex .vx-sil{filter:drop-shadow(0 5px 9px rgba(0,0,0,.4))}
.coach.vex .vx-glow{filter:drop-shadow(0 0 3.500px rgba(255,255,255,.75))}
.coach.vex .vx-logo{mix-blend-mode:screen; transform-origin:100px 150px}
.coach.vex .vx-aura{transform-origin:100px 112px; animation:vAura 4.2s ease-in-out infinite}
.coach.vex .n-rig{transform-origin:100px 216px}
.coach.vex .n-pupils,.coach.vex .v-look{transition:transform .18s ease-out}
.coach.vex .v-upper{transform-origin:100px 116px; animation:vFloat 4.2s ease-in-out infinite; transition:opacity .4s}
.coach.vex .v-lean{transform-origin:100px 112px}
.coach.vex .v-head{transform-origin:100px 108px; transition:transform .45s ease-out}
.coach.vex .v-tip{transform-origin:100px 14px; transition:transform .4s ease-out}
.coach.vex .n-shadow{fill:#000; animation:vShadow 4.2s ease-in-out infinite}
.coach.vex .f-eyes{transform-origin:100px 69px; animation:vBlink 5.6s infinite}
.coach.vex .f-steam path{stroke:#c6cbe0}
.coach.vex .f-glasses{transform:translateY(-90px)}
@keyframes vFloat{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(-9px) rotate(.8deg)}}
@keyframes vShadow{50%{transform:scaleX(.8); opacity:.16}}
@keyframes vAura{50%{transform:scale(1.07); opacity:.65}}
@keyframes vBlink{0%,44%,47%,90%,92.500%,95%,100%{transform:scaleY(1)}45.500%,91.200%,93.800%{transform:scaleY(.07)}}

/* hands stay inside the cloak until he needs one */
.coach.vex :is(.v-arm-l,.v-arm-r){opacity:0; transition:transform .45s ease-out,opacity .25s}
.coach.vex .v-arm-l{transform-origin:72px 128px; transform:scale(.15)}
.coach.vex .v-arm-r{transform-origin:128px 128px; transform:scale(.15)}
.coach.vex .vx-torch{opacity:0}
.coach.vex .vx-lens{filter:drop-shadow(0 0 6px #ffe9a8)}

.coach.vex:where([data-mood=idle],[data-mood=wave],[data-mood=look],[data-mood=torch],[data-mood=shy],[data-mood=hint]) .n-rig{animation:none}

/* greeting: a slow sway */
.coach.vex[data-mood=wave] .v-head{animation:vTilt 1.100s ease-in-out infinite alternate}
@keyframes vTilt{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* ghost tricks */
.coach.vex[data-mood=idle][data-g=vanish] .v-upper{animation:vVanish 2.600s ease-in-out}
@keyframes vVanish{0%,100%{opacity:1; transform:none}45%,60%{opacity:.05; transform:translateY(-16px) scale(1.04)}}
.coach.vex[data-mood=idle][data-g=peek] .v-upper{animation:vPeek 2.400s ease-in-out}
@keyframes vPeek{0%,100%{transform:none; opacity:1}40%,60%{transform:translateY(40px) scaleY(.78); opacity:.6}}
.coach.vex[data-mood=idle][data-g=drift] .n-rig{animation:vDrift 3s ease-in-out}
@keyframes vDrift{30%{transform:translateX(-14px) rotate(-3deg)}70%{transform:translateX(14px) rotate(3deg)}}
.coach.vex[data-mood=idle][data-g=scan] .v-head,.coach.vex[data-mood=look] .v-head{animation:vScan 2.200s ease-in-out}
@keyframes vScan{25%{transform:rotate(-10deg) translateX(-4px)}70%{transform:rotate(10deg) translateX(4px)}}

/* happy: floats up and circles instead of hopping */
.coach.vex:is([data-mood=happy],[data-mood=party]) :is(.f-eyes,.f-cheek,.f-laugh){opacity:1}
.coach.vex:is([data-mood=happy],[data-mood=party]) .n-rig{transform-origin:100px 116px; animation:vJoy 1.400s ease-in-out infinite}
.coach.vex:is([data-mood=happy],[data-mood=party]) .vx-aura{animation-duration:1.400s}
@keyframes vJoy{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-9px,-12px) rotate(-5deg)}50%{transform:translate(0,-20px) rotate(0)}75%{transform:translate(9px,-12px) rotate(5deg)}}

/* shy after a poke: turns half see-through */
.coach.vex[data-mood=shy] :is(.f-eyes,.f-cheek){opacity:1}
.coach.vex[data-mood=shy] .v-upper{opacity:.5}
.coach.vex[data-mood=shy] .n-rig{animation:vShy .7s ease-in-out}
@keyframes vShy{30%{transform:translateX(-10px)}70%{transform:translateX(8px)}}

/* angry: swells, and the void behind the eyes turns red */
.coach.vex[data-mood=angry] .vx-eye{fill:#ff3526}
.coach.vex[data-mood=angry] .vx-glow{filter:drop-shadow(0 0 5px #ff2a1f)}
.coach.vex[data-mood=angry] .n-visor{fill:#1c0404}
.coach.vex[data-mood=angry] .n-rig{transform-origin:100px 116px; animation:vPuff .9s ease-in-out infinite}
.coach.vex[data-mood=angry] .vx-aura{transform:scale(1.2); animation:none}
.coach.vex[data-mood=angry][data-rage] .n-rig{animation:nRage .14s linear infinite}
@keyframes vPuff{50%{transform:scale(1.07)}}

/* a hand comes out for the sign */
.coach.vex[data-mood=alert] .v-arm-r{opacity:1; transform:rotate(-120deg)}
.coach.vex[data-mood=alert] .f-sign{transform-origin:154px 176px; animation:nSign .9s ease-in-out infinite}
.coach.vex[data-mood=alert] .n-rig{animation:none}

/* and for pointing at the hint */
.coach.vex[data-mood=hint] .v-arm-r{opacity:1; transform:rotate(-62deg)}
.coach.vex[data-mood=hint] .v-head{transform:rotate(-6deg)}

/* surprised: rises and thins for a moment */
.coach.vex[data-mood=shock] .n-rig{animation:vShock .7s ease-out}
@keyframes vShock{30%{transform:translateY(-22px) scale(1.05); opacity:.7}}

/* asleep: sinks a little, tip droops */
.coach.vex[data-mood=sleep] .v-upper{animation:vSleep 4.2s ease-in-out infinite; opacity:.72}
.coach.vex[data-mood=sleep] .v-tip{transform:rotate(30deg)}
.coach.vex[data-mood=sleep] .v-head{transform:rotate(6deg) translateY(3px)}
@keyframes vSleep{0%,100%{transform:translateY(8px)}50%{transform:translateY(5px)}}

/* drifting and sitting on the home page logo */
.coach.vex.home{will-change:transform}
.coach.vex.home .coach-stage{transition:rotate .5s ease-out}
.coach.vex[data-fly] .coach-bubble{visibility:hidden}
.coach.vex:is([data-fly],[data-perch]) .n-shadow{opacity:0; animation:none}
.coach.vex[data-perch] .v-upper{animation:vPerch 4.2s ease-in-out infinite}
@keyframes vPerch{50%{transform:translateY(-3px)}}
.coach.vex.vx-low{flex-direction:column-reverse}
.coach.vex.vx-low .coach-bubble::after{bottom:auto; top:-7px; border-top:0; border-bottom:7px solid var(--panel3)}
.vx-wisp{position:fixed; z-index:470; border-radius:50%; pointer-events:none; filter:blur(7px); background:radial-gradient(circle,rgba(205,210,230,.55),rgba(150,70,70,.25) 55%,rgba(150,70,70,0) 75%); animation:vWisp 1.500s ease-out forwards}
@keyframes vWisp{to{transform:translateY(-26px) scale(1.7); opacity:0}}

/* flashlight: the hand comes out and follows the beam, aimed from coach.js through --aim */
.coach.vex[data-mood=torch] .f-eyes{opacity:1}
.coach.vex[data-torch] .n-rig{animation:none !important}
.coach.vex[data-torch] .v-upper{animation:vPerch 4.2s ease-in-out infinite; opacity:1}
.coach.vex[data-torch=l] .v-arm-l,.coach.vex[data-torch=r] .v-arm-r{opacity:1 !important; transform:rotate(var(--aim,0deg)) !important; transition:opacity .25s}
.coach.vex[data-torch=l] .vx-torch-l,.coach.vex[data-torch=r] .vx-torch-r{opacity:1}
.coach.vex[data-torch] .n-pupils,.coach.vex[data-torch] .v-look{transition:none}
.vx-dark{position:fixed; inset:0; width:100%; height:100%; z-index:9400; pointer-events:none; opacity:0; transition:opacity .45s}
.vx-dark.on{opacity:1}

/* short laptop screens */
@media(max-height:820px){ .coach-stage{height:170px} }
@media(max-height:720px){ .coach-stage{height:130px} .cm-stats{display:none} }

/* phones and narrow windows: the sidebar is gone, so NEXUS floats */
.coach.floating{position:fixed; z-index:480; left:8px; bottom:70px; width:min(280px,calc(100vw - 16px)); padding:0; background:none; border:0; align-items:flex-end; overflow:visible; pointer-events:none; animation:none}
.coach.floating :is(.coach-bubble,.coach-stage){pointer-events:auto}
.coach.floating .coach-stage{width:92px; height:96px; filter:drop-shadow(0 6px 9px rgba(0,0,0,.55))}
.coach.floating :is(.coach-name,.coach-meter){display:none}
.coach.floating .coach-bubble{min-height:0; cursor:pointer; box-shadow:0 12px 26px rgba(0,0,0,.5)}
.coach.floating .coach-bubble::after{left:46px}
.coach.floating .coach-bubble.quiet{display:none}
.coach.floating .coach-hint::after{content:' · اضغط للإخفاء'; opacity:.65; font-size:.78em}
@media(min-width:761px){ .coach.floating{bottom:14px} }

/* home page: bigger, chattier, and it can be told to hush */
.coach.floating .coach-fx{overflow:visible}
.coach.home{left:16px; bottom:16px; width:min(316px,calc(100vw - 32px))}
.coach.home .coach-stage{width:164px; height:172px}
.coach.home .coach-bubble{min-height:0; padding:11px 14px; font-size:.93rem; cursor:default; border:1px solid color-mix(in srgb,var(--mood) 50%,var(--line-strong))}
.coach.home .coach-bubble::after{left:82px}
.coach-x{position:absolute; top:4px; left:5px; width:24px; height:24px; border-radius:50%; font-size:.72rem; color:var(--text-dim); background:rgba(255,255,255,.07); z-index:1}
.coach-x:hover{color:#fff; background:rgba(255,255,255,.17)}
.coach-q{display:block; font-weight:700; margin-bottom:2px}
.coach-acts .opt-a{flex:1 1 100%; font-weight:500}
.coach-acts .good{background:var(--green-dim); border-color:var(--green)}
.coach-go{display:inline-block; margin-top:8px; padding:7px 14px; border-radius:8px; background:var(--red-btn); color:#fff; font-weight:700; font-size:.88rem; text-decoration:none; animation:coachNudge 1s ease-in-out infinite}
.coach-go:hover{background:var(--red-hover)}
@media(max-width:1180px){ .coach.home .coach-stage{width:112px; height:118px} .coach.home .coach-bubble::after{left:56px} }
@media(max-width:760px){ .coach.home{left:8px; bottom:70px; width:min(296px,calc(100vw - 16px))} .coach.home .coach-stage{width:90px; height:94px} .coach.home .coach-bubble::after{left:45px} }

@media (prefers-reduced-motion: reduce){
  .coach,.coach *{animation:none !important}
}

/* home only: VEX raises his hand to announce the live Discord courses */
.coach.vex[data-mood=announce] :is(.f-eyes,.f-cheek,.f-laugh){opacity:1}
.coach.vex[data-mood=announce] .n-rig{animation:none}
.coach.vex[data-mood=announce] .v-arm-r{opacity:1; transform:rotate(-150deg); animation:vRaise .55s ease-in-out .45s infinite alternate}
.coach.vex[data-mood=announce] .v-head{transform:rotate(4deg)}
@keyframes vRaise{from{transform:rotate(-150deg)}to{transform:rotate(-132deg)}}
.coach-dc{display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:7px 14px; border-radius:8px; background:#5865f2; color:#fff; font-weight:700; font-size:.88rem; text-decoration:none}
.coach-dc:hover{background:#4752c4}
.coach-dc svg{width:18px; height:18px; fill:currentColor}
.coach-ann b{color:#ffb4a8}
.coach-links{display:flex; gap:6px; justify-content:center; flex-wrap:wrap}
.coach-links .coach-dc{margin-top:8px}
.coach-dc.coach-wa{background:#1fa855}
.coach-dc.coach-wa:hover{background:#178a45}
/* NEXUS (the fox skin) raises his paw for the same announcement */
.coach:not(.vex)[data-mood=announce] :is(.f-eyes,.f-smile){opacity:1}
.coach:not(.vex)[data-mood=announce] .n-arm-r{animation:nWave .5s ease-in-out infinite alternate}