.agent-appearance-picker{margin:0 0 14px;padding:10px 12px 12px;border:1px solid rgba(139,202,255,.2);border-radius:12px;background:rgba(6,16,34,.35)}
.life-robot:not(.agent-robot) .life-robot__panel{max-height:min(72dvh,650px);overflow-y:auto}
.agent-appearance-picker legend{padding:0 4px;color:inherit;font-size:12px;font-weight:700}
.agent-appearance-picker__choices{display:flex;gap:8px;flex-wrap:wrap}
.agent-appearance-picker button{min-height:36px;padding:7px 12px;border:1px solid rgba(139,202,255,.3);border-radius:10px;background:rgba(255,255,255,.04);color:inherit;font:inherit;font-size:12px;cursor:pointer}
.agent-appearance-picker button:hover{background:rgba(139,202,255,.12)}
.agent-appearance-picker button[aria-pressed="true"]{border-color:rgba(139,202,255,.75);background:rgba(95,154,225,.26);box-shadow:inset 0 0 0 1px rgba(139,202,255,.15)}
.agent-appearance-picker button:focus-visible{outline:2px solid #8acbff;outline-offset:2px}
.life-robot.has-agent-appearance .life-guide-robot > :not(.agent-appearance__svg){display:none}
.life-robot .agent-appearance__svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 8px rgba(0,0,0,.48))}
.life-robot.has-agent-appearance .agent-appearance__svg{transform:scale(1.08);transform-origin:center bottom}
.agent-appearance__svg .body-core{transform-box:fill-box;transform-origin:50% 85%}
.agent-appearance__svg[data-state="idle"] .body-core{animation:agentAppearanceIdle 3.8s ease-in-out infinite}
.agent-appearance__svg[data-state="listening"] .body-core{animation:agentAppearanceListen 1.05s ease-in-out infinite}
.agent-appearance__svg[data-state="thinking"] .body-core{animation:agentAppearanceThink 2s ease-in-out infinite}
.agent-appearance__svg[data-state="speaking"] .body-core{animation:agentAppearanceSpeak .38s ease-in-out infinite alternate}
.agent-appearance__svg .earL,.agent-appearance__svg .earR{transform-box:fill-box;transform-origin:50% 100%}
.agent-appearance__svg[data-state="listening"] .earL{animation:agentAppearanceEarLeft .5s ease-in-out infinite alternate}
.agent-appearance__svg[data-state="listening"] .earR{animation:agentAppearanceEarRight .5s ease-in-out infinite alternate}
.agent-appearance__svg .tail{transform-box:fill-box;transform-origin:16% 84%;animation:agentAppearanceTail 2.9s ease-in-out infinite}
.life-robot.open .agent-appearance__svg .tail,.life-robot.is-greeting .agent-appearance__svg .tail,.life-robot.is-celebrating .agent-appearance__svg .tail{animation:agentAppearanceWaveTail .36s ease-in-out 3 alternate}
body.heart-radio-playing .agent-robot .agent-appearance__svg .tail,.agent-robot.is-dancing .agent-appearance__svg .tail{animation-duration:.46s}
.agent-appearance__svg .eye-glow,.agent-appearance__svg .mouth,.agent-appearance__svg .chest-gem{transform-box:fill-box;transform-origin:center}
.agent-appearance__svg[data-state="listening"] .eye-glow{animation:agentAppearanceEyes .8s ease-in-out infinite}
.agent-appearance__svg[data-state="speaking"] .eye-glow{animation:agentAppearanceEyes .34s ease-in-out infinite}
.agent-appearance__svg[data-state="speaking"] .mouth{animation:agentAppearanceMouth .32s ease-in-out infinite alternate}
.agent-appearance__svg[data-state="thinking"] .chest-gem{animation:agentAppearanceGem 1.05s ease-in-out infinite}
.life-robot[data-agent-appearance="cat"] .life-guide-robot{animation:none!important;transform:none!important}
.life-robot[data-agent-appearance="cat"] .life-robot__button{animation:none!important;transform:none!important}
.life-robot[data-agent-appearance="cat"] .agent-appearance__svg .body-core{transform-origin:50% 100%;animation:agentCatBreathe 4.8s ease-in-out infinite}
.agent-appearance__svg .cat-eyes{transform-box:fill-box;transform-origin:center;animation:agentCatBlink 6.8s ease-in-out infinite}
@keyframes agentCatBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.008)}}
@keyframes agentCatBlink{0%,42%,46%,92%,96%,100%{transform:scaleY(1)}44%,94%{transform:scaleY(.04)}}
@keyframes agentAppearanceIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes agentAppearanceListen{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes agentAppearanceThink{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-.7deg)}}
@keyframes agentAppearanceSpeak{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes agentAppearanceEarLeft{to{transform:rotate(-7deg)}}
@keyframes agentAppearanceEarRight{to{transform:rotate(7deg)}}
@keyframes agentAppearanceTail{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(8deg)}}
@keyframes agentAppearanceWaveTail{from{transform:rotate(-12deg)}to{transform:rotate(20deg)}}
@keyframes agentAppearanceEyes{0%,100%{filter:brightness(1)}50%{filter:brightness(1.38)}}
@keyframes agentAppearanceMouth{to{transform:scaleY(1.35)}}
@keyframes agentAppearanceGem{0%,100%{filter:brightness(1)}50%{filter:brightness(1.7)}}
@media(prefers-reduced-motion:reduce){.life-robot .agent-appearance__svg *{animation:none!important}}
@media(max-width:650px){.life-robot:not(.agent-robot) .life-robot__panel{max-height:min(70dvh,520px)}}

/* Quiet motion and materials for the two companion figures. */
.life-robot.has-agent-appearance .agent-appearance__svg{transform:scale(1.12);filter:drop-shadow(0 5px 5px #0008)}
.life-robot[data-agent-appearance="robot"] .life-guide-robot{animation:none!important;transform:none!important}
.agent-appearance__svg--robot .body-core{transform-origin:50% 100%;animation:agentRobotBreathe 5s ease-in-out infinite}
.agent-appearance__svg--robot[data-state="thinking"] .chest-gem{animation:agentRobotSignal 1.6s ease-in-out infinite}
.agent-appearance__svg--robot[data-state="speaking"] .mouth{animation:agentRobotSpeech .65s ease-in-out infinite alternate}
.agent-appearance__svg--cat .eye-glow:not(.cat-eyes){animation:none!important}
.agent-appearance__svg--cat .tail{transform-origin:15% 80%;animation-duration:5.5s}
@keyframes agentRobotBreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.004)}}
@keyframes agentRobotSignal{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes agentRobotSpeech{from{transform:scaleX(.7)}to{transform:scaleX(1.05)}}
@media(prefers-reduced-motion:reduce){.life-robot .agent-appearance__svg *{animation:none!important}}

.life-robot[data-agent-appearance="cat"] .agent-appearance__svg .cat-eyes{animation:agentCatBlink 6.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.life-robot .agent-appearance__svg .cat-eyes{animation:none!important}}


/* Transparent HTML sprites also render correctly in Android WebView. */
#lifeRobot[data-agent-appearance="cat"] :is(.life-robot__button,.life-guide-robot,.agent-appearance__svg--cat){background:transparent!important;box-shadow:none!important;border-color:transparent!important}
#lifeRobot[data-agent-appearance="cat"] .agent-cat-sprite{width:100%;height:100%;background-color:transparent!important;background-image:url('/assets/images/agent-cat-sa-sprites.webp');background-size:400% 200%;background-repeat:no-repeat;background-position:0 100%;animation:agentCatIdleFrames 30s steps(1,end) infinite}
#lifeRobot[data-agent-appearance="cat"]:not(.is-cat-walking){animation:none;transform:translateX(var(--cat-drag-x,0px))}
#lifeRobot[data-agent-appearance="cat"].is-cat-walking:not(.open):not(.is-cat-dragging):not(.is-cat-resting):not(.is-cat-dancing){--cat-travel:min(420px,calc(100vw - 130px));animation:agentCatRoam 12s linear 1}
#lifeRobot[data-agent-appearance="cat"].is-cat-walking:not(.is-cat-dancing) .agent-cat-sprite{background-position-y:0;animation:agentCatWalkFrames .72s steps(1,end) infinite}
#lifeRobot[data-agent-appearance="cat"].is-cat-walking:not(.is-cat-dancing) .agent-appearance__svg--cat{animation:agentCatFacing 12s steps(1,end) 1}
.life-robot[data-agent-appearance="cat"]:not(.open) .life-robot__button{touch-action:none;cursor:grab}.life-robot.is-cat-dragging .life-robot__button{cursor:grabbing}
#lifeRobot:is(.is-cat-dragging,.is-cat-resting){animation:none!important;transform:translateX(var(--cat-drag-x,0px))}
#lifeRobot[data-agent-appearance="cat"].open{animation:none!important;transform:none!important}
#lifeRobot.is-cat-petted .agent-cat-sprite{animation:none;background-position:33.333333% 100%}
.agent-cat-murmur{position:absolute;top:3%;left:35%;padding:4px 9px;border:1px solid #aaa4;border-radius:12px;background:#1118;color:#fff;font:12px sans-serif;opacity:0;animation:agentCatMurmur 30s steps(1,end) infinite;pointer-events:none}
#lifeRobot:is(.open,.is-cat-walking,.is-cat-dancing) .agent-cat-murmur{display:none}
#lifeRobot[data-agent-appearance="cat"].is-cat-dancing .agent-appearance__svg--cat{animation:agentCatDance .7s ease-in-out infinite!important;scale:1 1}
#lifeRobot[data-agent-appearance="cat"].is-cat-dancing .agent-cat-sprite{background-position:0 100%;animation:agentCatDanceFrames 1.4s steps(1,end) infinite!important}
@keyframes agentCatIdleFrames{0%,20%,21%,65%,68%,100%{background-position:0 100%}20.4%{background-position:33.333333% 100%}66%{background-position:100% 100%}}
@keyframes agentCatMurmur{0%,64%,68%,100%{opacity:0}65%,67%{opacity:1}}
@keyframes agentCatDance{0%,100%{transform:scale(1.12) translateY(0) rotate(-4deg)}50%{transform:scale(1.12) translateY(-7px) rotate(4deg)}}
@keyframes agentCatDanceFrames{0%,100%{background-position:0 100%}50%{background-position:66.666667% 100%}}
@keyframes agentCatWalkFrames{0%,100%{background-position-x:0}25%{background-position-x:33.333333%}50%{background-position-x:66.666667%}75%{background-position-x:100%}}
@keyframes agentCatRoam{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(calc(-1 * var(--cat-travel)))}}
@keyframes agentCatFacing{0%,100%{scale:1 1}55%{scale:-1 1}}
@media(prefers-reduced-motion:reduce){#lifeRobot[data-agent-appearance="cat"],#lifeRobot[data-agent-appearance="cat"] :is(.agent-cat-sprite,.agent-appearance__svg--cat,.agent-cat-murmur){animation:none!important}#lifeRobot .agent-cat-sprite{background-position:0 100%!important}}

/* Обрезаем пустой край кадра: хвост соседнего спрайта не бликует слева. */
#lifeRobot[data-agent-appearance="cat"] .agent-cat-sprite{clip-path:inset(0 0 0 6%)}