/* Flat, articulated rabbit. Only the current reply animates. */
#mascot-home{height:56px;flex-shrink:0;display:grid;place-items:center;margin-bottom:0}
#mascot-home .mascot-button{width:56px;height:56px}
.mascot-button{display:block;position:relative;width:174px;height:174px;padding:0;background:transparent;border-radius:20px;color:var(--accent);flex-shrink:0;touch-action:manipulation}
.mascot-button:focus-visible{outline-offset:3px}
.mascot-drawing{width:100%;height:100%;display:block;overflow:visible;user-select:none}
.bunny-rig{transform-origin:117px 222px}
.bunny-ear-left{transform-origin:79px 132px;animation:bunny-ear-left 8s ease-in-out infinite}
.bunny-ear-right{transform-origin:146px 134px;animation:bunny-ear-right 8s ease-in-out infinite}
.bunny-eyes{transform-origin:119px 173px;animation:bunny-blink 4.6s linear infinite}
.bunny-pupils{transform:translate(calc(var(--look-x,var(--rest-x,0px)) * var(--face-gaze,1)),calc(var(--look-y,var(--rest-y,0px)) * var(--face-gaze,1)));transition:transform .18s ease-out}
.mascot-button[data-state=listening]{--rest-x:0px;--rest-y:2.5px}
.mascot-button[data-state=working]{--rest-x:-2px;--rest-y:2.5px}
.mascot-button[data-state=attention]{--rest-x:-2px;--rest-y:1px}
.mascot-button[data-state=done] .bunny-eyes{display:none}
.mascot-button[data-state=done] .bunny-eyes-happy{display:block}
.bunny-wave-arm{transform-origin:190px 192px;animation:bunny-wave 1.6s ease-in-out both}
.bunny-write-arm,.bunny-mouth-worry,.bunny-paper-check,.bunny-eyes-happy,.bunny-mouth-happy{display:none}
.mascot-button[data-state=done] .bunny-mouth-smile{display:none}
.mascot-button[data-state=done] .bunny-mouth-happy{display:block}
.mascot-button[data-state=listening] .bunny-ear-left{animation:bunny-listen-left .4s ease-out both}
.mascot-button[data-state=listening] .bunny-ear-right{animation:bunny-listen-right .4s ease-out both}
.mascot-button[data-state=working] .bunny-wave-arm{display:none}
.mascot-button[data-state=working] .bunny-write-arm{display:block;transform-origin:190px 198px;animation:bunny-write 1s ease-in-out infinite}
.mascot-button[data-state=working] .bunny-ear-right{animation:bunny-listen-right .4s ease-out both}
.mascot-button[data-state=done] .bunny-rig{animation:bunny-happy .65s ease-out both}
.mascot-button[data-state=done] .bunny-paper-check{display:block}
.mascot-button[data-state=done] .bunny-paper-edit,.mascot-button[data-state=done] .bunny-paper-line{display:none}
.mascot-button[data-state=attention] .bunny-mouth-smile{display:none}
.mascot-button[data-state=attention] .bunny-mouth-worry{display:block}
.mascot-button[data-state=attention] .bunny-ear-left{animation:none;transform:rotate(-8deg)}
.mascot-button[data-state=attention] .bunny-wave-arm{animation:none;transform:rotate(22deg)}
.mascot-motion-mark{position:absolute;right:3px;bottom:10px;width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid var(--line);opacity:0;transition:opacity .15s;display:grid;place-items:center}
.mascot-motion-mark:before{content:'';width:5px;height:6px;border-left:1.5px solid currentColor;border-right:1.5px solid currentColor}
.mascot-button:hover .mascot-motion-mark,.mascot-button:focus-visible .mascot-motion-mark,.mascot-button[data-paused=true] .mascot-motion-mark{opacity:1}
.mascot-button[data-paused=true] .mascot-motion-mark:before{width:0;height:0;border:3px solid transparent;border-left:5px solid currentColor;border-right:0;margin-left:1px}
.mascot-button[data-paused=true] *{animation:none!important;transition:none!important}
.mascot-button[data-suspended=true] *{animation-play-state:paused!important}
.mascot-slot{position:absolute;left:0;top:-5px;width:44px;height:44px;display:grid;place-items:center}
.mascot-slot .mascot-button{width:44px;height:44px;border-radius:10px;overflow:hidden}
.mascot-slot .mascot-drawing,.mascot-still .mascot-drawing{overflow:hidden}
.mascot-slot .mascot-button :is(.bunny-legs,.bunny-tail,.bunny-paper-arm,.bunny-wave-arm,.bunny-write-arm),.mascot-still :is(.bunny-legs,.bunny-tail,.bunny-paper-arm,.bunny-wave-arm,.bunny-write-arm){display:none}
.mascot-slot .mascot-motion-mark{width:12px;height:12px;right:0;bottom:0}
.mascot-still{display:block;position:relative;overflow:hidden;width:44px;height:44px}
.mascot-still *{animation:none!important;transition:none!important}
.message.assistant{padding-left:54px;min-height:40px;display:flex;align-items:center}
.message.assistant:before{content:none}
.state-box:has(.mascot-slot){position:relative;padding-left:62px;min-height:72px}
.state-box>.mascot-slot{left:8px;top:13px}
.state-box:has(.mascot-slot) .spinner{display:none}
@keyframes bunny-ear-left{0%,36%,48%,100%{transform:rotate(0)}40%{transform:rotate(-8deg)}44%{transform:rotate(3deg)}}
@keyframes bunny-ear-right{0%,38%,51%,100%{transform:rotate(0)}43%{transform:rotate(7deg)}47%{transform:rotate(-3deg)}}
@keyframes bunny-blink{0%,15%,21%,62%,68%,74%,100%{transform:scaleY(1)}18%,65%,71%{transform:scaleY(.04)}}
@keyframes bunny-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(9deg)}40%,80%{transform:rotate(-7deg)}}
@keyframes bunny-listen-left{to{transform:rotate(-9deg)}}
@keyframes bunny-listen-right{to{transform:rotate(9deg)}}
@keyframes bunny-write{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(2px,-1px)}}
@keyframes bunny-happy{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-3px) rotate(-2deg)}70%{transform:translateY(1px) rotate(1deg)}}
@media(max-width:520px){#mascot-home{height:48px}#mascot-home .mascot-button{width:48px;height:48px}.message.assistant{padding-left:49px;min-height:40px}.mascot-slot{top:-3px}.state-box>.mascot-slot{left:5px;top:12px}.state-box:has(.mascot-slot){padding-left:58px}}
@media(max-height:650px){#mascot-home{height:44px}#mascot-home .mascot-button{height:44px;width:44px}}
@media(prefers-reduced-motion:reduce){.mascot-button *{animation:none!important;transition:none!important}.mascot-motion-mark{display:none}}
