/* ===== Slimi: nhân vật, tâm trạng, cảnh "phân tâm", cảnh đi ngủ ===== */
.slimi { position: relative; width: 76px; height: 70px; flex-shrink: 0; }
.slimi.slimi-lg { width: 96px; height: 88px; }
.slimi .slimi-svg { width: 100%; height: 100%; overflow: visible; display: block; }

.slimi .body { transform-box: fill-box; transform-origin: 50% 92%; animation: slimi-bob 3.2s ease-in-out infinite; }
.slimi .m, .slimi .eyes-closed, .slimi .tear, .slimi .sweat, .slimi .heart { display: none; }

/* biểu cảm theo tâm trạng (do server tính từ số liệu thật) */
.slimi[data-mood="ok"] .m-ok,
.slimi[data-mood="happy"] .m-happy,
.slimi[data-mood="sad"] .m-sad { display: block; }
.slimi[data-mood="sad"] .tear { display: block; animation: slimi-tear 3.4s ease-in infinite; }
.slimi[data-mood="sad"] .body { animation-duration: 5.4s; }
.slimi[data-mood="happy"] .body { animation-duration: 1.8s; }

/* biểu cảm theo hành động (ghi đè tâm trạng) */
.slimi[data-anim="yawn"] .m, .slimi[data-anim="lazy"] .m, .slimi[data-anim="pout"] .m, .slimi[data-anim="hug"] .m { display: none; }
.slimi[data-anim="yawn"] .m-o { display: block; }
.slimi[data-anim="lazy"] .m-ok { display: block; }
.slimi[data-anim="pout"] .m-pout { display: block; }
.slimi[data-anim="pout"] .sweat { display: block; animation: slimi-tear 1.6s ease-in infinite; }
.slimi[data-anim="hug"] .m-happy { display: block; }
.slimi[data-anim="hug"] .heart { display: block; animation: slimi-float 1.8s ease-out infinite; }
.slimi[data-anim="yawn"] .body { animation: slimi-yawn 2.4s ease-in-out forwards; }
.slimi[data-anim="lazy"] .body { animation: slimi-lazy 2.4s ease-in-out forwards; }
.slimi[data-anim="pout"] .body { animation: slimi-pout 0.5s ease-in-out infinite; }
.slimi[data-anim="hug"] .body { animation: slimi-hug 1.2s ease-in-out infinite; }

/* đi ngủ */
.slimi[data-sleep="1"] .eyes, .slimi[data-sleep="1"] .tear, .slimi[data-sleep="1"] .sweat { display: none; }
.slimi[data-sleep="1"] .eyes-closed { display: block; }
.slimi[data-sleep="1"] .m { display: none; }
.slimi[data-sleep="1"] .m-ok { display: block; }
.slimi[data-sleep="1"] .body { animation: slimi-sleep 4.2s ease-in-out infinite; }
.slimi .zzz { display: none; position: absolute; right: -6px; top: -8px; font-size: 18px; animation: slimi-zzz 2.6s ease-in infinite; pointer-events: none; }
.slimi[data-sleep="1"] .zzz { display: block; }

/* các cảnh "phân tâm" khi né chủ đề: emoji bay quanh Slimi */
.slimi .prop { position: absolute; display: none; font-size: 20px; line-height: 1; pointer-events: none; }
.slimi[data-scene] .prop { display: block; }
.slimi[data-scene="music"] .prop-a { top: -12px; left: 50%; margin-left: -12px; font-size: 24px; animation: slimi-sway 1.2s ease-in-out infinite; }
.slimi[data-scene="music"] .prop-b { top: 6px; right: -10px; animation: slimi-float 1.6s ease-out infinite; }
.slimi[data-scene="cook"] .prop-a { bottom: -2px; right: -16px; font-size: 24px; animation: slimi-sway 0.8s ease-in-out infinite; }
.slimi[data-scene="cook"] .prop-b { bottom: 18px; right: -10px; animation: slimi-float 1.4s ease-out infinite; }
.slimi[data-scene="butterfly"] .prop-a { top: 0; left: 0; animation: slimi-orbit 2.6s linear infinite; }
.slimi[data-scene="butterfly"] .prop-b { display: none; }
.slimi[data-scene="bubbles"] .prop-a { bottom: 10px; left: 4px; animation: slimi-float 2s ease-out infinite; }
.slimi[data-scene="bubbles"] .prop-b { bottom: 10px; right: 6px; animation: slimi-float 2.4s 0.6s ease-out infinite; }
.slimi[data-scene="stars"] .prop-a { top: -10px; left: 6px; animation: slimi-twinkle 1s ease-in-out infinite; }
.slimi[data-scene="stars"] .prop-b { top: -6px; right: 0; animation: slimi-twinkle 1.3s 0.4s ease-in-out infinite; }
.slimi[data-scene="plant"] .prop-a { bottom: -2px; right: -14px; font-size: 24px; }
.slimi[data-scene="plant"] .prop-b { top: 8px; right: -8px; animation: slimi-fall 1.2s ease-in infinite; }
.slimi[data-scene] .body { animation: slimi-sway 1.6s ease-in-out infinite; }
.slimi[data-scene="butterfly"] .face { animation: slimi-look 2.6s linear infinite; }

@keyframes slimi-bob { 0%,100% { transform: translateY(0) scale(1,1); } 50% { transform: translateY(-3px) scale(1.03,0.97); } }
@keyframes slimi-yawn { 0% { transform: scale(1,1); } 35% { transform: scale(0.92,1.14); } 65% { transform: scale(1.1,0.86); } 100% { transform: scale(1.06,0.8) translateY(4px); } }
@keyframes slimi-lazy { 0% { transform: scale(1,1); } 40% { transform: scale(1.12,0.78) translateY(4px); } 100% { transform: scale(1.18,0.7) translateY(8px); } }
@keyframes slimi-pout { 0%,100% { transform: translateX(-3px) rotate(-2deg); } 50% { transform: translateX(3px) rotate(2deg); } }
@keyframes slimi-hug { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.12,0.88); } }
@keyframes slimi-sleep { 0%,100% { transform: scale(1.1,0.8) translateY(6px); } 50% { transform: scale(1.14,0.84) translateY(4px); } }
@keyframes slimi-zzz { 0% { opacity: 0; transform: translate(0,6px) scale(0.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px,-18px) scale(1.2); } }
@keyframes slimi-tear { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes slimi-float { 0% { opacity: 0; transform: translateY(8px) scale(0.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1.1); } }
@keyframes slimi-sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes slimi-orbit { 0% { transform: translate(0,0); } 25% { transform: translate(56px,-10px); } 50% { transform: translate(80px,30px); } 75% { transform: translate(20px,40px); } 100% { transform: translate(0,0); } }
@keyframes slimi-look { 0%,100% { transform: translateX(0); } 25% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
@keyframes slimi-twinkle { 0%,100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes slimi-fall { 0% { opacity: 0; transform: translateY(-6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  .slimi .body, .slimi .face, .slimi .prop, .slimi .zzz, .slimi .tear, .slimi .sweat, .slimi .heart { animation: none !important; }
}

/* khung chat */
.chat-bubble-user { background: #26221b; border: 1px solid #4a4437; }
.chat-bubble-slimi { background: #12332e; border: 1px solid #1f6f63; }