/* The same Luwi silhouette, face, palette and proportions as the app icon. */
.liveMascot{--gaze-x:0px;--gaze-y:0px;position:relative;display:inline-block;flex:none;vertical-align:middle;padding:0;margin:0;border:0;border-radius:32%;background:none;color:inherit;line-height:0;isolation:isolate;min-height:0;min-width:0;animation:none!important;translate:none!important;transform:none!important;box-shadow:none;overflow:visible;filter:drop-shadow(0 8px 12px #a4224d18);-webkit-appearance:none;appearance:none}
.liveMascot.mascot{width:132px;height:132px}.liveMascot.resultMascot{width:76px;height:76px}.liveMascot.panelMascot{width:45px;height:45px}
.brand .liveMascot{width:44px;height:44px}.checkoutMascot .liveMascot{width:31px;height:31px}.emptyHistory .liveMascot{width:92px;height:92px;margin-bottom:10px}
.mascotArt{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.mascotBody{transform-origin:64px 105px;animation:mascotBreathe 5.4s ease-in-out infinite;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mascotMini .mascotBody{animation-duration:7s}.mascotMini .mascotEar{animation:none}.mascotMini .mascotGround{opacity:0}
.mascotGaze{transform:translate(var(--gaze-x),var(--gaze-y));transition:transform 240ms cubic-bezier(.16,1,.3,1)}
.mascotEye{transform-box:fill-box;transform-origin:center;animation:mascotBlink 6.2s ease-in-out infinite;animation-delay:var(--blink-offset,0s)}
.mascotAntenna{transform-origin:64px 19px;transition:transform .4s ease}
.mascotEarLeft{transform-origin:22px 64px}.mascotEarRight{transform-origin:105px 64px}
.mascotEar{transition:transform .4s ease}.mascotClosedEyes,.mascotHappyMouth,.mascotQuietMouth{opacity:0;transition:opacity 160ms ease}.mascotEyes,.mascotSmile{transition:opacity 160ms ease}.mascotCheeks{transition:opacity .25s ease}
.mascotGround{transform-origin:64px 122px;animation:mascotShadow 5.4s ease-in-out infinite}
.mascotTouchable{cursor:pointer;touch-action:manipulation}.mascotTouchable:focus-visible{outline:2px solid var(--rasp);outline-offset:7px}.mascotTouchable:active .mascotBody{transform:translateY(2px) scale(.97)}
.liveMascot[data-mood=hello] .mascotBody{animation:mascotHello 1.25s cubic-bezier(.22,.85,.3,1) both}
.liveMascot[data-mood=hello] .mascotEarRight{animation:mascotWave 1.15s ease-in-out both}
.liveMascot[data-mood=hello] .mascotEyeRight{animation:mascotWink 1.3s ease-in-out both}
.liveMascot[data-mood=hello] .mascotAntenna{animation:mascotAntenna 1.3s ease-in-out both}
.liveMascot[data-mood=hello] .mascotSmile,.liveMascot[data-mood=happy] .mascotSmile,.liveMascot[data-mood=speaking] .mascotSmile{opacity:0}
.liveMascot[data-mood=hello] .mascotHappyMouth,.liveMascot[data-mood=happy] .mascotHappyMouth,.liveMascot[data-mood=speaking] .mascotHappyMouth{opacity:1}
.liveMascot[data-mood=happy] .mascotBody{animation:mascotNod 900ms ease-in-out both}
.liveMascot[data-mood=happy] .mascotEarLeft{transform:rotate(14deg)}.liveMascot[data-mood=happy] .mascotEarRight{transform:rotate(-14deg)}
.liveMascot[data-mood=shy] .mascotEyes{opacity:0}.liveMascot[data-mood=shy] .mascotClosedEyes{opacity:1}.liveMascot[data-mood=shy] .mascotGaze{transform:translateY(2px)}
.liveMascot[data-mood=shy] .mascotBody{animation:mascotShy 500ms ease-out both}.liveMascot[data-mood=shy] .mascotCheeks{fill:#ff90b7}
.liveMascot[data-mood=focus] .mascotBody{animation:mascotAttentive 500ms ease-out both}.liveMascot[data-mood=focus] .mascotAntenna{transform:rotate(8deg)}
.liveMascot[data-mood=thinking] .mascotBody{animation:mascotThinking 3.4s ease-in-out infinite}
.liveMascot[data-mood=thinking] .mascotGaze{transform:translate(2px,-2px)}.liveMascot[data-mood=thinking] .mascotSmile,.liveMascot[data-mood=concerned] .mascotSmile{opacity:0}
.liveMascot[data-mood=thinking] .mascotQuietMouth,.liveMascot[data-mood=concerned] .mascotQuietMouth{opacity:1}
.liveMascot[data-mood=thinking] .mascotAntenna{animation:mascotThinkingAntenna 2.6s ease-in-out infinite}
.liveMascot[data-mood=concerned] .mascotBody{animation:mascotConcern 650ms ease-out both}
.liveMascot[data-mood=listening] .mascotEarRight{transform:rotate(-16deg)}.liveMascot[data-mood=listening] .mascotBody{animation:mascotListening 4s ease-in-out infinite}
.liveMascot[data-mood=speaking] .mascotHappyMouth{transform-box:fill-box;transform-origin:center;animation:mascotTalk .72s ease-in-out infinite}
.liveMascot[data-mood=speaking] .mascotAntenna{animation:mascotThinkingAntenna 1.4s ease-in-out infinite}
.welcomeMini .mascotStage .liveMascot{width:84px;height:84px}.welcomeMini:hover .mascotBody{animation-duration:5.4s}.mascotHello{animation:none!important;transition:background .2s ease,border-color .2s ease;box-shadow:0 4px 16px #9c31590b}
.mascotStage:has([data-mood=hello]) .mascotHello{background:#fff7dc;border-color:#f2dca5}
@keyframes mascotBreathe{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-3px) rotate(.6deg)}}
@keyframes mascotShadow{50%{transform:scaleX(.87);opacity:.055}}
@keyframes mascotBlink{0%,39%,43%,71%,75%,100%{transform:scaleY(1)}41%,73%{transform:scaleY(.08)}}
@keyframes mascotHello{0%{transform:translateY(0)}23%{transform:translateY(-6px) rotate(-5deg)}50%{transform:translateY(-3px) rotate(4deg)}76%{transform:translateY(-2px) rotate(-2deg)}100%{transform:none}}
@keyframes mascotWave{0%,100%{transform:none}20%,58%{transform:rotate(-30deg) translateY(-2px)}40%,78%{transform:rotate(-5deg)}}
@keyframes mascotWink{0%,25%,72%,100%{transform:scaleY(1)}35%,62%{transform:scaleY(.1)}}
@keyframes mascotAntenna{0%,100%{transform:rotate(0)}28%{transform:rotate(-14deg)}58%{transform:rotate(11deg)}80%{transform:rotate(-5deg)}}
@keyframes mascotNod{0%,100%{transform:none}30%{transform:translateY(3px) rotate(-3deg)}60%{transform:translateY(-3px) rotate(2deg)}}
@keyframes mascotShy{to{transform:translateY(2px) rotate(-4deg)}}
@keyframes mascotAttentive{to{transform:translateY(-2px) rotate(3deg)}}
@keyframes mascotThinking{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-1deg) translateY(-2px)}}
@keyframes mascotThinkingAntenna{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@keyframes mascotConcern{0%{transform:none}45%{transform:rotate(4deg)}100%{transform:rotate(-3deg)}}
@keyframes mascotListening{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1deg) translateY(-2px)}}
@keyframes mascotTalk{0%,100%{transform:scaleY(.7)}25%{transform:scaleY(1)}65%{transform:scaleY(.4)}}
@media(max-width:520px){.liveMascot.mascot{width:116px;height:116px}.liveMascot.resultMascot{width:60px;height:60px}.liveMascot.panelMascot{width:39px;height:39px}}
@media(max-width:359px){.welcomeMini .mascotStage .liveMascot{width:65px;height:65px}}
@media(prefers-reduced-motion:reduce){.liveMascot *{animation:none!important;transition:none!important}.mascotGaze{transform:none!important}}
.appBackground .liveMascot *,.motion-offscreen .liveMascot *{animation-play-state:paused!important}

/* V30: the original character becomes the voice companion. Audio amplitude,
   not a looping mouth animation, controls speech. No extra floating bubbles. */
.mascotSpeechMouth{opacity:0;pointer-events:none}
.sessionCompanion{position:relative;width:clamp(208px,35vw,286px);aspect-ratio:1;margin:12px auto 4px;display:grid;place-items:center;isolation:isolate}
.sessionCompanion .liveMascot.sessionAvatar{width:88%;height:88%;filter:drop-shadow(0 16px 22px #bc2d5b24);z-index:1}
.companionGround{position:absolute;bottom:4%;width:62%;height:8%;border-radius:50%;background:radial-gradient(ellipse,#d9487221,transparent 72%);transform:scaleX(calc(1 - var(--ai-level,0)*.12));transition:transform 120ms ease}
.sessionAvatar .mascotGround{opacity:0!important}
.sessionAvatar .mascotBody{animation:companionRest 5.6s ease-in-out infinite}
.sessionAvatar .mascotSpeechMouth{transform-origin:64px 81px;transform:scale(var(--mouth-width,1),var(--mouth-open,.08));transition:transform 90ms cubic-bezier(.2,.7,.3,1),opacity 85ms linear}
.sessionAvatar[data-mood=speaking] .mascotHappyMouth{opacity:0;animation:none}
.sessionAvatar[data-mood=speaking] .mascotSpeechMouth{opacity:var(--mouth-visible,0)}
.sessionAvatar[data-mood=speaking] .mascotSmile{opacity:calc(1 - var(--mouth-visible,0))}
.sessionAvatar[data-mood=speaking] .mascotBody{animation:none;transform:translateY(calc(var(--ai-level,0)*-1.5px)) rotate(calc(var(--ai-level,0)*1.2deg));transition:transform 140ms ease-out}
.sessionAvatar[data-mood=speaking] .mascotAntenna{animation:none;transform:rotate(calc(var(--ai-level,0)*9deg));transition:transform 160ms ease}
.sessionShell .mascotMini[data-mood=speaking] .mascotHappyMouth{opacity:0;animation:none}
.sessionShell .mascotMini[data-mood=speaking] .mascotSpeechMouth{opacity:var(--mouth-visible,0);transform-origin:64px 81px;transform:scale(var(--mouth-width,1),var(--mouth-open,.08))}
.sessionShell .mascotMini[data-mood=speaking] .mascotSmile{opacity:calc(1 - var(--mouth-visible,0))}
.sessionAvatar[data-mood=listening] .mascotBody{animation:companionListen 4.5s ease-in-out infinite}
.sessionAvatar[data-mood=listening] .mascotEarRight{transform:rotate(-18deg)}
.sessionAvatar[data-mood=thinking] .mascotBody{animation:companionThink 3.2s ease-in-out infinite}
.sessionAvatar[data-mood=thinking] .mascotGaze{transform:translate(2px,-2px)}
.sessionAvatar[data-mood=thinking] .mascotAntenna{animation:mascotThinkingAntenna 2.2s ease-in-out infinite}
.sessionAvatar[data-mood=hello] .mascotBody{animation:mascotHello 1.1s ease both}
.sessionAvatar[data-expression=warm] .mascotCheeks{fill:#ffa6c2}
.sessionAvatar[data-expression=angry] .mascotCheeks{fill:#fb7b99;opacity:.8}
.sessionAvatar[data-expression=angry] .mascotEarLeft{transform:rotate(-12deg)}
.sessionAvatar[data-expression=angry] .mascotEarRight{transform:rotate(12deg)}
.sessionAvatar:is([data-expression=stern],[data-expression=angry],[data-expression=disappointed]):not([data-mood=hello]):not([data-mood=thinking]) .mascotSmile{d:path('M56 83q8-3 16 0')}
.companionListening{position:absolute;bottom:0;display:flex;gap:5px;height:15px;align-items:center;opacity:0;transition:opacity .2s ease}
[data-orb-phase=listening] .companionListening{opacity:1}
.companionListening i{width:3px;height:4px;border-radius:4px;background:#c43160;transform-origin:center;transform:scaleY(calc(1 + var(--user-level,0)*2));transition:transform 80ms ease}
.companionListening i:nth-child(2n){transform:scaleY(calc(1 + var(--user-level,0)*3.5))}.companionListening i:nth-child(3){transform:scaleY(calc(1 + var(--user-level,0)*4.5))}
.sessionShell .orbIdentity{margin-top:10px;gap:9px}.sessionShell .orbIdentity b{font-size:23px}
.sessionShell .voiceStatus{margin-top:12px;min-height:54px}.sessionShell .voiceHint{min-height:20px}
@keyframes companionRest{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-3px) rotate(.7deg)}}
@keyframes companionListen{0%,100%{transform:rotate(-3deg)}50%{transform:translateY(-2px) rotate(-1deg)}}
@keyframes companionThink{0%,100%{transform:rotate(3deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@media(max-height:700px){.sessionCompanion{width:190px;margin-top:5px}.sessionShell .voiceStatus{margin-top:8px}.sessionShell .sessionClock{margin-bottom:0}}
@media(max-width:360px){.sessionCompanion{width:190px}.sessionShell .orbIdentity b{font-size:21px}}
@media(prefers-reduced-motion:reduce){.sessionAvatar .mascotBody,.sessionAvatar .mascotAntenna,.companionListening i{animation:none!important;transform:none!important}.sessionAvatar .mascotSpeechMouth{transition:none}.companionGround{transform:none}}

/* V31 revision. Small accessories on the original round Luwi silhouette. */
.sessionCompanion{width:clamp(208px,35vw,286px);aspect-ratio:1;margin:12px auto 4px}
.sessionCompanion .sessionAvatar.liveMascot{width:88%;height:88%}
.sessionAvatar .mascotGesture{transform-origin:64px 96px;animation:companionEase 8s ease-in-out infinite}
.sessionAvatar[data-mood=listening] .mascotGesture{animation:companionNod 6.8s ease-in-out infinite}
.sessionAvatar[data-mood=thinking] .mascotGesture{animation:companionPonder 6s ease-in-out infinite}
.sessionAvatar[data-mood=speaking] .mascotGesture{animation:companionConversation 7.2s ease-in-out infinite}
.sessionAvatar .mascotSpeechMouth{transform-origin:64px 81px;transform:scale(var(--mouth-width,1),var(--mouth-open,.08));transition:transform 90ms cubic-bezier(.2,.7,.3,1),opacity 85ms linear}
.sessionAvatar .mouthTeeth,.sessionShell .mouthTeeth{display:none!important;opacity:0!important}
.sessionAvatar .mouthTongue{opacity:var(--mouth-tongue,.8)}
.sessionAvatar[data-mood=speaking] .mascotGaze{transform:translateY(calc(var(--ai-level,0)*.6px));transition:transform 120ms ease}
.sessionAvatar[data-mood=speaking] .mascotCheeks{transform-origin:64px 80px;transform:translateY(calc(var(--ai-level,0)*-1px));transition:transform 120ms ease}
.sessionAvatar[data-mood=speaking][data-expression=warm] .mascotEarLeft{transform:rotate(calc(var(--ai-level,0)*14deg))}
.sessionAvatar[data-mood=speaking][data-expression=warm] .mascotEarRight{transform:rotate(calc(var(--ai-level,0)*-10deg))}
.sessionAvatar[data-expression=warm] .mascotSmile{stroke-width:3.5}
.sessionAvatar[data-expression=curious] .mascotEyeRight{transform:scaleY(.93)}
.sessionAvatar[data-mood=hello] .mascotGesture{animation:none}
@keyframes companionEase{0%,100%{transform:rotate(0)}42%{transform:rotate(1.4deg)}74%{transform:rotate(-1deg)}}
@keyframes companionNod{0%,28%,56%,100%{transform:rotate(-1deg)}35%{transform:translateY(1.7px) rotate(1deg)}43%{transform:translateY(-.8px) rotate(-1deg)}77%{transform:rotate(2deg)}}
@keyframes companionPonder{0%,100%{transform:rotate(0)}40%{transform:rotate(2deg)}70%{transform:rotate(-1deg)}}
@keyframes companionConversation{0%,100%{transform:rotate(-1deg)}22%{transform:translateY(-1px) rotate(1.8deg)}48%{transform:rotate(.6deg)}72%{transform:translateY(1px) rotate(-1.5deg)}}
@media(max-height:700px){.sessionCompanion{width:190px;margin-top:4px}.sessionShell .orbIdentity{margin-top:6px}}
@media(max-width:360px){.sessionCompanion{width:190px}}
@media(prefers-reduced-motion:reduce){.sessionAvatar .mascotGesture,.sessionAvatar .mascotCheeks{animation:none!important;transform:none!important}}

/* V31 R12: compact activity-feed expressions. These only affect the mascot
   inside the login activity notice and reuse the same local Luwi artwork. */
.publicActivityMascot .liveMascot[data-activity-expression="normal"] .mascotBody{animation:activityMascotCalm 2.8s ease-in-out infinite}
.publicActivityMascot .liveMascot[data-activity-expression="happy"] .mascotBody{animation:activityMascotHappy 1.35s ease-in-out both}
.publicActivityMascot .liveMascot[data-activity-expression="happy"] .mascotSmile{opacity:0}
.publicActivityMascot .liveMascot[data-activity-expression="happy"] .mascotHappyMouth{opacity:1}
.publicActivityMascot .liveMascot[data-activity-expression="focus"] .mascotBody{animation:activityMascotFocus 2.4s ease-in-out infinite}
.publicActivityMascot .liveMascot[data-activity-expression="focus"] .mascotAntenna{transform:rotate(9deg)}
.publicActivityMascot .liveMascot[data-activity-expression="serious"] .mascotBody{animation:activityMascotSerious 2.6s ease-in-out infinite}
.publicActivityMascot .liveMascot[data-activity-expression="serious"] .mascotSmile,.publicActivityMascot .liveMascot[data-activity-expression="serious"] .mascotHappyMouth{opacity:0}
.publicActivityMascot .liveMascot[data-activity-expression="serious"] .mascotQuietMouth{opacity:1}
.publicActivityMascot .liveMascot[data-activity-expression="serious"] .mascotGaze{transform:translate(1px,-1px)}
.publicActivityMascot .liveMascot[data-activity-expression="celebrate"] .mascotBody{animation:activityMascotCelebrate .9s cubic-bezier(.2,.9,.25,1) both}
.publicActivityMascot .liveMascot[data-activity-expression="celebrate"] .mascotSmile{opacity:0}
.publicActivityMascot .liveMascot[data-activity-expression="celebrate"] .mascotHappyMouth{opacity:1}
.publicActivityMascot .liveMascot[data-activity-expression="celebrate"] .mascotEarLeft{transform:rotate(18deg)}
.publicActivityMascot .liveMascot[data-activity-expression="celebrate"] .mascotEarRight{transform:rotate(-18deg)}
@keyframes activityMascotCalm{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-1.5px) rotate(1deg)}}
@keyframes activityMascotHappy{0%{transform:scale(.96) translateY(2px)}45%{transform:scale(1.04) translateY(-3px) rotate(-3deg)}75%{transform:scale(1.01) translateY(-1px) rotate(2deg)}100%{transform:none}}
@keyframes activityMascotFocus{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-2px) rotate(2deg)}}
@keyframes activityMascotSerious{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-1px) rotate(-1deg)}}
@keyframes activityMascotCelebrate{0%{transform:scale(.9) translateY(4px)}38%{transform:scale(1.08) translateY(-5px) rotate(-5deg)}68%{transform:scale(1.03) translateY(-2px) rotate(4deg)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.publicActivityMascot .liveMascot .mascotBody{animation:none!important}}

/* R27: SVG fallback keeps the same emotion when WebGL is unavailable. */
.liveMascot[data-expression="happy"] .mascotSmile{opacity:0}
.liveMascot[data-expression="happy"] .mascotHappyMouth{opacity:1}
.liveMascot[data-expression="happy"] .mascotEyes{transform:translateY(3px) scaleY(.70);transform-origin:64px 66px}
.liveMascot[data-expression="sad"] .mascotSmile,.liveMascot[data-expression="disappointed"] .mascotSmile{transform:translateY(166px) scaleY(-1)}
.liveMascot[data-expression="sad"] .mascotEyeLeft{transform:rotate(14deg);transform-origin:50px 66px}
.liveMascot[data-expression="sad"] .mascotEyeRight{transform:rotate(-14deg);transform-origin:78px 66px}
.liveMascot[data-expression="sad"] .mascotBody{transform:translateY(2px) rotate(-3deg);transform-origin:64px 64px}
.liveMascot[data-expression="surprised"] .mascotEyes{transform:scale(1.08,1.18);transform-origin:64px 66px}
.liveMascot[data-expression="relieved"] .mascotEyes{transform:translateY(3px) scaleY(.78);transform-origin:64px 66px}
.liveMascot[data-expression="happy"][data-mood="speaking"] .mascotHappyMouth{opacity:calc(1 - var(--mouth-visible,0))}

.liveMascot[data-expression="sad"]:not([data-mood="speaking"]) .mascotSmile{opacity:1}
.liveMascot[data-expression="sad"]:not([data-mood="speaking"]) .mascotQuietMouth{opacity:0}