/* Thỏ Bông: independent body rig, face expressions and short play actions. */
.stage { height:460px; background:radial-gradient(ellipse at 50% 54%,#fffce9 0,transparent 53%),linear-gradient(#def3ef,#f2fae5 76%,#d7ecc7 76%); }
#stage .bunny-wrap { width:min(79%,340px); bottom:5px; padding:0; border:0; outline-offset:0; border-radius:45%; background:none; line-height:0; cursor:pointer; animation:none; -webkit-tap-highlight-color:transparent; }
#stage .bunny-wrap:focus-visible { outline:3px dashed #d4a168; outline-offset:1px; }
#stage .bunny { filter:drop-shadow(0 7px 7px #739e6d1a); overflow:visible; }
.rabbit-rig { transform-origin:210px 440px; animation:rabbit-breathe 3.8s ease-in-out infinite; }
.rabbit-head-pivot { transform:translate(var(--look-x,0px),var(--look-y,0px)) rotate(var(--look-angle,0deg)); transform-origin:210px 283px; transition:transform .45s ease-out; }
.rabbit-head { transform-origin:210px 283px; animation:rabbit-nod 7s ease-in-out infinite; }
.rabbit-ear { transform-origin:160px 154px; animation:rabbit-ear-left 7s ease-in-out infinite; }
.rabbit-ear.ear-r { transform-origin:252px 154px; animation:rabbit-ear-right 8s ease-in-out infinite; }
.rabbit-tail { transform-origin:305px 375px; animation:rabbit-tail 3s ease-in-out infinite; }
.rabbit-arm { transition:transform .45s cubic-bezier(.2,.8,.3,1.2); }
.arm-left { transform-origin:140px 302px; }
.arm-right { transform-origin:275px 302px; }
.rabbit-foot { transform-origin:149px 424px; }
.foot-right { transform-origin:267px 424px; }
.bunny-shadow { transform-origin:209px 453px; }
.rabbit-eyes { transform-origin:210px 205px; animation:rabbit-blink 6.2s infinite; }
.eye-normal { transform:translate(calc(var(--look-x,0px) * .55),calc(var(--look-y,0px) * .35)); }
.eye-smile,.eye-wink,.eye-hearts,.mouth-laugh,.mouth-wow,.mouth-sad,.mouth-speech,.tear,.mark-think,.mark-wow,.mark-love,.mark-music { display:none; }
.brow-l { transform-origin:159px 173px; transition:transform .3s; }
.brow-r { transform-origin:259px 173px; transition:transform .3s; }
.cheek { transition:opacity .35s; }
.mouth-speech { transform-origin:210px 247px; transform:scaleY(var(--mouth-open,.5)); }
.scene-sun { position:absolute; top:61px; right:28px; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#ffe5a2; box-shadow:0 0 0 9px #fff0bd65,0 0 0 18px #fff1bc35; color:#d9a763; font:800 25px Nunito,sans-serif; transform:rotate(9deg); }
.scene-sun:before,.scene-sun:after { content:''; position:absolute; top:18px; width:3px; height:4px; border-radius:50%; background:#cd9e64; }
.scene-sun:before { left:17px; }.scene-sun:after { right:17px; }
.scene-cloud { position:absolute; width:62px; height:16px; border-radius:40px; background:#ffffffa6; animation:cloud-drift 12s ease-in-out infinite alternate; }
.scene-cloud:before,.scene-cloud:after { content:''; position:absolute; border-radius:50%; background:inherit; }
.scene-cloud:before { width:28px; height:28px; left:9px; bottom:1px; }.scene-cloud:after { width:21px; height:21px; right:7px; bottom:0; }
.cloud-left { top:106px; left:29px; }.cloud-right { top:161px; right:19px; transform:scale(.7); animation-delay:-5s; }
#stage .speech { top:13px; max-width:77%; font-size:13px; padding:10px 16px; }
.touch-hint { position:absolute; bottom:11px; left:50%; transform:translateX(-50%); width:max-content; color:#7d9d70; font:700 10px Nunito,sans-serif; pointer-events:none; letter-spacing:.03em; }
.touch-hint span { color:#d59196; }.ground { bottom:16px; font-size:25px; pointer-events:none; }
.bunny-emotions { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; padding:0 17px 17px; }
.bunny-emotions button { flex:1 1 75px; max-width:115px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 6px; border:1px solid #eee1cd; border-radius:15px; background:#fff9ed; color:#8c7864; font-size:21px; line-height:1.1; transition:transform .2s,background .2s,box-shadow .2s; }
.bunny-emotions button span { font:700 10px/1.3 'Be Vietnam Pro',sans-serif; white-space:nowrap; }
.bunny-emotions button:hover { transform:translateY(-3px); background:#fff0dc; box-shadow:0 5px 10px #aa856213; }
.bunny-emotions button[aria-pressed="true"] { background:#ffe7db; border-color:#e9ae9c; color:#a86e62; }
.bunny-emotions button:focus-visible { outline:3px solid #a2c9a1; outline-offset:2px; }
.workspace .chat-card .messages { max-height:420px; }
.bunny-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bunny-particle { position:absolute; top:48%; left:50%; color:#e6a36e; font-size:22px; animation:bunny-burst 1.5s ease-out both; animation-delay:var(--delay,0s); }

/* Expressions remain separate from the listening / speaking state. */
.stage[data-expression="happy"] .eye-normal,.stage[data-expression="love"] .eye-normal,.stage[data-expression="wink"] .eye-normal { display:none; }
.stage[data-expression="happy"] .eye-smile,.stage[data-expression="happy"] .mouth-laugh { display:inline; }
.stage[data-expression="happy"] .mouth-smile { display:none; }
.stage[data-expression="happy"] .cheek,.stage[data-expression="love"] .cheek { opacity:1; }
.stage[data-expression="surprised"] .eye-normal { transform:scale(1.08); transform-origin:210px 205px; }
.stage[data-expression="surprised"] .brow-l,.stage[data-expression="surprised"] .brow-r { transform:translateY(-9px); }
.stage[data-expression="surprised"] .mouth-smile { display:none; }
.stage[data-expression="surprised"] .mouth-wow,.stage[data-expression="surprised"] .mark-wow { display:inline; }
.stage[data-expression="surprised"] .rabbit-head { animation:rabbit-wow 1.1s ease-in-out; }
.stage[data-expression="thinking"] .brow-l { transform:translateY(-6px) rotate(-13deg); }
.stage[data-expression="thinking"] .brow-r { transform:rotate(16deg); }
.stage[data-expression="thinking"] .mark-think { display:inline; animation:thought-pop 2.2s ease-in-out infinite; }
.stage[data-expression="thinking"] .rabbit-head { animation:rabbit-think 3s ease-in-out infinite; }
.stage[data-expression="thinking"] .arm-right { transform:rotate(170deg); }
.stage[data-expression="listening"] .rabbit-head { animation:rabbit-listen 3s ease-in-out infinite; }
.stage[data-expression="listening"] .ear-r { animation:rabbit-listen-ear 2.8s ease-in-out infinite; }
.stage[data-expression="listening"] .arm-right { transform:rotate(-105deg); }
.stage[data-expression="sad"] .brow-l { transform:rotate(-26deg) translateY(-3px); }
.stage[data-expression="sad"] .brow-r { transform:rotate(26deg) translateY(-3px); }
.stage[data-expression="sad"] .eye-normal { transform:translateY(4px) scaleY(.9); transform-origin:210px 205px; }
.stage[data-expression="sad"] .mouth-smile { display:none; }
.stage[data-expression="sad"] .mouth-sad,.stage[data-expression="sad"] .tear { display:inline; }
.stage[data-expression="sad"] .rabbit-head { animation:none; transform:translateY(3px) rotate(-5deg); }
.stage[data-expression="sad"] .ear-l { animation:none; transform:rotate(-11deg); }
.stage[data-expression="sad"] .ear-r { animation:none; transform:rotate(12deg); }
.stage[data-expression="love"] .eye-hearts,.stage[data-expression="love"] .mark-love { display:inline; }
.stage[data-expression="love"] .mark-love { animation:love-float 1.7s ease-in-out infinite; }
.stage[data-expression="love"] .arm-left { transform:rotate(-95deg); }
.stage[data-expression="love"] .arm-right { transform:rotate(95deg); }
.stage[data-expression="love"] .rabbit-head { animation:rabbit-cuddle 2s ease-in-out infinite; }
.stage[data-expression="wink"] .eye-wink { display:inline; }
.stage[data-expression="wink"] .rabbit-head { animation:none; transform:rotate(6deg); }
.stage[data-expression="curious"] .brow-l { transform:translateY(-8px); }
.stage[data-expression="curious"] .rabbit-head { animation:rabbit-curious 3s ease-in-out infinite; }
.stage[data-expression="curious"] .ear-l { animation:none; transform:rotate(-7deg); }

/* Speech mouth follows the sound level; eyes keep the current feeling. */
.stage[data-mood="speaking"] .rabbit-mouths > * { display:none; }
.stage[data-mood="speaking"] .rabbit-mouths .mouth-speech { display:inline; }
.stage[data-mood="speaking"] .rabbit-head { animation:rabbit-speak-nod 1.8s ease-in-out infinite; }
.stage[data-mood="speaking"] .arm-left { animation:rabbit-talk-hand 2.4s ease-in-out infinite; }
.stage[data-mood="listening"] .mood-dot { background:#e7b979; box-shadow:0 0 0 4px #f8ebd4; }
.stage[data-action="waving"] .arm-left { animation:rabbit-wave .5s ease-in-out 5; }
.stage[data-action="waving"] .rabbit-head { animation:rabbit-cuddle 1s ease-in-out 3; }
.stage[data-action="hopping"] .rabbit-rig { animation:rabbit-hop .65s ease-in-out 3; }
.stage[data-action="hopping"] .bunny-shadow { animation:rabbit-hop-shadow .65s ease-in-out 3; }
.stage[data-action="dancing"] .rabbit-rig { animation:rabbit-dance .7s ease-in-out infinite; }
.stage[data-action="dancing"] .arm-left { animation:rabbit-dance-left .7s ease-in-out infinite; }
.stage[data-action="dancing"] .arm-right { animation:rabbit-dance-right .7s ease-in-out infinite; }
.stage[data-action="dancing"] .foot-left { animation:rabbit-step .7s ease-in-out infinite; }
.stage[data-action="dancing"] .foot-right { animation:rabbit-step .7s .35s ease-in-out infinite; }
.stage[data-action="dancing"] .mark-music { display:inline; animation:love-float 1.2s infinite; }

@keyframes rabbit-breathe { 50% { transform:translateY(-3px) scale(1.005,1.012); } }
@keyframes rabbit-nod { 0%,60%,100% { transform:rotate(0); } 72% { transform:rotate(-2deg); } 86% { transform:rotate(2deg); } }
@keyframes rabbit-blink { 0%,32%,35%,72%,75%,100% { transform:scaleY(1); } 33%,74% { transform:scaleY(.08); } }
@keyframes rabbit-ear-left { 0%,67%,84%,100% { transform:rotate(0); } 72% { transform:rotate(-8deg); } 78% { transform:rotate(3deg); } }
@keyframes rabbit-ear-right { 0%,37%,57%,100% { transform:rotate(0); } 43% { transform:rotate(9deg); } 50% { transform:rotate(-5deg); } }
@keyframes rabbit-tail { 50% { transform:rotate(8deg) scale(1.05); } }
@keyframes rabbit-think { 50% { transform:rotate(-8deg) translateY(1px); } }
@keyframes rabbit-listen { 50% { transform:rotate(7deg); } }
@keyframes rabbit-listen-ear { 50% { transform:rotate(18deg); } }
@keyframes rabbit-curious { 50% { transform:rotate(-8deg) translateY(-3px); } }
@keyframes rabbit-cuddle { 50% { transform:rotate(5deg) translateY(2px); } }
@keyframes rabbit-wow { 45% { transform:translateY(-9px) rotate(-3deg); } }
@keyframes rabbit-speak-nod { 35% { transform:rotate(-2deg) translateY(-2px); } 75% { transform:rotate(2deg); } }
@keyframes rabbit-talk-hand { 45% { transform:rotate(-19deg); } 70% { transform:rotate(-9deg); } }
@keyframes rabbit-wave { 0%,100% { transform:rotate(105deg); } 50% { transform:rotate(139deg); } }
@keyframes rabbit-hop { 0%,100% { transform:translateY(0) scale(1.03,.97); } 50% { transform:translateY(-28px) scale(.98,1.03); } }
@keyframes rabbit-hop-shadow { 50% { transform:scale(.7); opacity:.1; } }
@keyframes rabbit-dance { 0%,100% { transform:rotate(-5deg) translateY(-4px); } 50% { transform:rotate(5deg) translateY(-4px); } }
@keyframes rabbit-dance-left { 0%,100% { transform:rotate(60deg); } 50% { transform:rotate(20deg); } }
@keyframes rabbit-dance-right { 0%,100% { transform:rotate(-20deg); } 50% { transform:rotate(-60deg); } }
@keyframes rabbit-step { 50% { transform:translateY(-10px) rotate(-8deg); } }
@keyframes thought-pop { 50% { transform:translateY(-7px); opacity:.55; } }
@keyframes love-float { 50% { transform:translateY(-8px) scale(1.04); } }
@keyframes cloud-drift { to { margin-left:13px; margin-right:13px; } }
@keyframes bunny-burst { 0% { opacity:0; transform:translate(-50%,0) scale(.4) rotate(0); } 15% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)),var(--dy)) scale(1.2) rotate(var(--spin)); } }
@media(max-width:960px) { .stage { height:390px; } #stage .bunny-wrap { width:min(72%,300px); } }
@media(max-width:560px) { .stage { height:365px; } #stage .bunny-wrap { width:min(81%,278px); } .bunny-emotions { gap:5px; padding:0 10px 13px; } .bunny-emotions button { flex-basis:48px; padding:9px 3px; } .bunny-emotions button span { font-size:8px; } .scene-sun { right:18px; width:38px; height:38px; } .scene-sun:before { left:12px; } .scene-sun:after { right:12px; } }
@media(prefers-reduced-motion:reduce) { .rabbit-rig,.rabbit-head,.rabbit-ear,.rabbit-eyes,.rabbit-tail,.rabbit-arm,.rabbit-foot,.emotion-marks > *, .scene-cloud { animation:none!important; } .bunny-particles { display:none; } .rabbit-head-pivot { transition:none; } }