/* Animation dùng chung cho mọi nhân vật SVG (cửa sổ nhân vật + bảng điều khiển). */
.sb-avatar {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sb-root {
  transform-origin: 60px 146px;
  animation: sb-breathe 3.4s ease-in-out infinite;
}

.sb-eyes {
  transform-origin: 60px 56px;
  animation: sb-blink 5.2s infinite;
}

.sb-tilt {
  transform-origin: 60px 88px;
}

@keyframes sb-breathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-1.6px) scale(1.012, 0.99); }
}

@keyframes sb-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95.5% { transform: scaleY(0.08); }
}

/* Đang nói: miệng mấp máy, đầu nghiêng nhẹ */
.talking .sb-mouth {
  transform-origin: 60px 70px;
  animation: sb-talk 0.26s ease-in-out infinite alternate;
}
.talking .sb-tilt {
  animation: sb-nod 1.1s ease-in-out infinite;
}

@keyframes sb-talk {
  from { transform: scaleY(1); }
  to { transform: scaleY(1.7) translateY(-0.6px); }
}

@keyframes sb-nod {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-3deg); }
  70% { transform: rotate(2.5deg); }
}

/* Đang bị kéo: lắc lư nhẹ như được nhấc lên */
.dragging .sb-root {
  animation: sb-dangle 0.7s ease-in-out infinite;
}

@keyframes sb-dangle {
  0%, 100% { transform: translateY(-4px) rotate(-4deg); }
  50% { transform: translateY(-4px) rotate(4deg); }
}

.dragging .sb-shadow {
  opacity: 0.45;
  transform: scale(0.8);
  transform-origin: 60px 146px;
}

/* Nhảy lên một cái (khi được nhấp / có tin nhắn mới) */
.hop .sb-root {
  animation: sb-hop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes sb-hop {
  0% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-10px) scale(0.96, 1.05); }
  60% { transform: translateY(0) scale(1.06, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* =====================================================================
 * Đi bộ + quay người (ActorView.setMotion). `walking` = đang bước; `facing-left/right` = hướng
 * nhìn. Bản 2D vẽ chính diện nên "quay người" bằng cách xoay nghiêng hình theo trục dọc (3D CSS).
 * Đặt TRƯỚC phần động tác để động tác (vd. ôm) được ưu tiên khi trùng.
 * ===================================================================== */
.sb-art {
  transform-origin: 50% 92%;
  transition: transform 0.3s ease;
}
.facing-right .sb-art:not(.sb-3d) {
  transform: perspective(420px) rotateY(34deg) rotate(2deg);
}
.facing-left .sb-art:not(.sb-3d) {
  transform: perspective(420px) rotateY(-34deg) rotate(-2deg);
}

.walking .sb-root { animation: sb-walk-bob 0.52s ease-in-out infinite; }
.walking .sb-leg-l { animation: sb-walk-leg 0.52s ease-in-out infinite; }
.walking .sb-leg-r { animation: sb-walk-leg 0.52s ease-in-out -0.26s infinite; }
.walking .sb-arm-l { animation: sb-walk-arm 0.52s ease-in-out -0.26s infinite; }
.walking .sb-arm-r { animation: sb-walk-arm 0.52s ease-in-out infinite; }
@keyframes sb-walk-bob {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(-2.5px); }
}
@keyframes sb-walk-leg {
  0%, 100% { transform: rotate(-17deg); }
  50% { transform: rotate(17deg); }
}
@keyframes sb-walk-arm {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}

/* =====================================================================
 * Tư thế giữ lâu (ActorView.setPose) — dùng ở bàn làm việc Pomodoro. Bàn đặt đè lên nửa dưới
 * nhân vật nên chỉ cần hạ người xuống một chút là thành "ngồi".
 * ===================================================================== */
.pose-typing .sb-root,
.pose-sit .sb-root,
.pose-slump .sb-root {
  animation: none;
  transform: translateY(3px);
}
.pose-typing .sb-arm-l { animation: sb-type-l 0.34s ease-in-out infinite alternate; }
.pose-typing .sb-arm-r { animation: sb-type-r 0.34s ease-in-out -0.17s infinite alternate; }
.pose-typing .sb-tilt { transform: translateY(1.5px); }
@keyframes sb-type-l {
  from { transform: rotate(-64deg); }
  to { transform: rotate(-52deg); }
}
@keyframes sb-type-r {
  from { transform: rotate(64deg); }
  to { transform: rotate(52deg); }
}
.pose-sit .sb-arm-l { transform: rotate(-50deg); }
.pose-sit .sb-arm-r { transform: rotate(50deg); }
.pose-slump .sb-root { transform: translateY(10px); }
.pose-slump .sb-tilt { transform: translateY(13px) rotate(9deg); }
.pose-slump .sb-arm-l { transform: rotate(-80deg); }
.pose-slump .sb-arm-r { transform: rotate(80deg); }
.pose-slump .sb-face-base { display: none; }
.pose-slump .sb-x-sleepy { display: inline; }

/* =====================================================================
 * Động tác (emote). ActorView (actor-view.js) gắn class `emote-<id>` + `expr-<nét mặt>`
 * lên khối nhân vật trong đúng thời lượng của động tác (EMOTES trong protocol.js).
 * Trong SVG: xoay dương = theo chiều kim đồng hồ → tay trái giơ lên = xoay dương,
 * tay phải giơ lên = xoay âm.
 * ===================================================================== */

/* ---------- Nét mặt ---------- */
.sb-x,
.sb-xo {
  display: none;
}
.expr-happy .sb-face-base,
.expr-laugh .sb-face-base,
.expr-cry .sb-face-base,
.expr-angry .sb-face-base,
.expr-surprised .sb-face-base,
.expr-shy .sb-face-base,
.expr-sleepy .sb-face-base,
.expr-love .sb-face-base,
.expr-wink .sb-face-base,
.expr-kiss .sb-face-base,
.expr-pout .sb-face-base,
.expr-sorry .sb-face-base,
.expr-think .sb-face-base,
.expr-yawn .sb-face-base {
  display: none;
}
.expr-happy .sb-x-happy,
.expr-laugh .sb-x-laugh,
.expr-cry .sb-x-cry,
.expr-angry .sb-x-angry,
.expr-surprised .sb-x-surprised,
.expr-shy .sb-x-shy,
.expr-sleepy .sb-x-sleepy,
.expr-love .sb-x-love,
.expr-wink .sb-x-wink,
.expr-kiss .sb-x-kiss,
.expr-pout .sb-x-pout,
.expr-sorry .sb-x-sorry,
.expr-think .sb-x-think,
.expr-yawn .sb-x-yawn,
.expr-cry .sb-xo-tears,
.expr-shy .sb-xo-blush,
.expr-love .sb-xo-blush,
.expr-wink .sb-xo-blush,
.expr-kiss .sb-xo-blush,
.expr-pout .sb-xo-blush {
  display: inline;
}

/* ---------- Chào: vẫy tay phải ---------- */
.emote-wave .sb-arm-r { animation: sb-e-wave 2.2s ease-in-out; }
.emote-wave .sb-tilt { animation: sb-e-tilt-l 2.2s ease-in-out; }
@keyframes sb-e-wave {
  0%, 100% { transform: rotate(0deg); }
  14% { transform: rotate(-140deg); }
  24% { transform: rotate(-112deg); }
  34% { transform: rotate(-145deg); }
  44% { transform: rotate(-112deg); }
  54% { transform: rotate(-145deg); }
  64% { transform: rotate(-112deg); }
  76% { transform: rotate(-138deg); }
}
@keyframes sb-e-tilt-l {
  0%, 100% { transform: rotate(0deg); }
  20%, 80% { transform: rotate(-6deg); }
}

/* ---------- Nhảy lên: 2 cú nhảy có nhún ---------- */
.emote-jump .sb-root { animation: sb-e-jump 1.7s ease-in-out; }
.emote-jump .sb-arm-l { animation: sb-e-jump-arm-l 1.7s ease-in-out; }
.emote-jump .sb-arm-r { animation: sb-e-jump-arm-r 1.7s ease-in-out; }
@keyframes sb-e-jump {
  0%, 50%, 100% { transform: translateY(0) scale(1, 1); }
  9%, 59% { transform: translateY(0) scale(1.1, 0.88); }
  24%, 74% { transform: translateY(-28px) scale(0.94, 1.07); }
  40%, 90% { transform: translateY(0) scale(1.08, 0.92); }
}
@keyframes sb-e-jump-arm-l {
  0%, 9%, 50%, 59%, 100% { transform: rotate(0deg); }
  24%, 74% { transform: rotate(115deg); }
}
@keyframes sb-e-jump-arm-r {
  0%, 9%, 50%, 59%, 100% { transform: rotate(0deg); }
  24%, 74% { transform: rotate(-115deg); }
}

/* ---------- Nhảy múa: lắc hông, xoay người, tay luân phiên ---------- */
.emote-dance .sb-root { animation: sb-e-dance 3.8s ease-in-out; }
.emote-dance .sb-arm-l { animation: sb-e-dance-arm-l 3.8s ease-in-out; }
.emote-dance .sb-arm-r { animation: sb-e-dance-arm-r 3.8s ease-in-out; }
.emote-dance .sb-leg-l { animation: sb-e-dance-leg 3.8s ease-in-out; }
.emote-dance .sb-leg-r { animation: sb-e-dance-leg 3.8s ease-in-out reverse; }
@keyframes sb-e-dance {
  0%, 100% { transform: none; }
  8%, 24%, 72%, 88% { transform: translateX(-5px) rotate(-8deg); }
  16%, 32%, 80%, 96% { transform: translateX(5px) rotate(8deg); }
  42% { transform: translateY(-10px) scaleX(0.2); }
  50% { transform: translateY(-12px) scaleX(-1); }
  58% { transform: translateY(-10px) scaleX(0.2); }
  64% { transform: none; }
}
@keyframes sb-e-dance-arm-l {
  0%, 100% { transform: rotate(0deg); }
  8%, 24%, 72%, 88% { transform: rotate(130deg); }
  16%, 32%, 80%, 96% { transform: rotate(25deg); }
  42%, 58% { transform: rotate(150deg); }
}
@keyframes sb-e-dance-arm-r {
  0%, 100% { transform: rotate(0deg); }
  8%, 24%, 72%, 88% { transform: rotate(-25deg); }
  16%, 32%, 80%, 96% { transform: rotate(-130deg); }
  42%, 58% { transform: rotate(-150deg); }
}
@keyframes sb-e-dance-leg {
  0%, 100% { transform: rotate(0deg); }
  8%, 24%, 72%, 88% { transform: rotate(10deg); }
  16%, 32%, 80%, 96% { transform: rotate(-6deg); }
}

/* ---------- Vui: nhún nhảy, giơ tay ---------- */
.emote-happy .sb-root { animation: sb-e-bounce 2.4s ease-in-out; }
.emote-happy .sb-arm-l { animation: sb-e-happy-arm-l 2.4s ease-in-out; }
.emote-happy .sb-arm-r { animation: sb-e-happy-arm-r 2.4s ease-in-out; }
@keyframes sb-e-bounce {
  0%, 25%, 50%, 75%, 100% { transform: translateY(0) scale(1.03, 0.97); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: translateY(-8px) scale(0.98, 1.02); }
}
@keyframes sb-e-happy-arm-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 45%, 75% { transform: rotate(70deg); }
  30%, 60%, 88% { transform: rotate(45deg); }
}
@keyframes sb-e-happy-arm-r {
  0%, 100% { transform: rotate(0deg); }
  15%, 45%, 75% { transform: rotate(-70deg); }
  30%, 60%, 88% { transform: rotate(-45deg); }
}

/* ---------- Cười lớn: rung người, ôm bụng ---------- */
.emote-laugh .sb-root { animation: sb-e-laugh 2.6s linear; }
.emote-laugh .sb-tilt { animation: sb-e-tilt-back 2.6s ease-in-out; }
.emote-laugh .sb-arm-l { animation: sb-e-hold-l 2.6s ease-in-out; }
.emote-laugh .sb-arm-r { animation: sb-e-hold-r 2.6s ease-in-out; }
@keyframes sb-e-laugh {
  0%, 100% { transform: none; }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85% { transform: translateY(-2px) rotate(-3deg); }
  10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { transform: translateY(0) rotate(3deg); }
}
@keyframes sb-e-tilt-back {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: translateY(-2px) rotate(-7deg); }
}
@keyframes sb-e-hold-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(-42deg); }
}
@keyframes sb-e-hold-r {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(42deg); }
}

/* ---------- Khóc: cúi đầu, hai tay che mặt, vai run ---------- */
.emote-cry .sb-root { animation: sb-e-sob 3.2s linear; }
.emote-cry .sb-tilt { animation: sb-e-head-down 3.2s ease-in-out; }
.emote-cry .sb-arm-l { animation: sb-e-cover-l 3.2s ease-in-out; }
.emote-cry .sb-arm-r { animation: sb-e-cover-r 3.2s ease-in-out; }
@keyframes sb-e-sob {
  0%, 100% { transform: none; }
  10%, 20%, 30%, 40%, 50%, 60%, 70%, 80% { transform: translateY(1.5px); }
  15%, 25%, 35%, 45%, 55%, 65%, 75%, 85% { transform: translateY(-1px); }
}
@keyframes sb-e-head-down {
  0%, 100% { transform: none; }
  15%, 85% { transform: translateY(3px) rotate(3deg); }
}
@keyframes sb-e-cover-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(168deg); }
}
@keyframes sb-e-cover-r {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(-168deg); }
}

/* ---------- Yêu: đung đưa, hai tay ôm ngực ---------- */
.emote-love .sb-root { animation: sb-e-sway 3s ease-in-out; }
.emote-love .sb-arm-l { animation: sb-e-hug-l 3s ease-in-out; }
.emote-love .sb-arm-r { animation: sb-e-hug-r 3s ease-in-out; }
@keyframes sb-e-sway {
  0%, 100% { transform: none; }
  25%, 75% { transform: translateY(-3px) rotate(-5deg); }
  50% { transform: translateY(-3px) rotate(5deg); }
}
@keyframes sb-e-hug-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(-58deg); }
}
@keyframes sb-e-hug-r {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(58deg); }
}

/* ---------- Giận: dậm chân, run người ---------- */
.emote-angry .sb-root { animation: sb-e-shake 2.6s linear; }
.emote-angry .sb-leg-r { animation: sb-e-stomp 2.6s ease-in-out; }
.emote-angry .sb-arm-l { animation: sb-e-stiff-l 2.6s ease-in-out; }
.emote-angry .sb-arm-r { animation: sb-e-stiff-r 2.6s ease-in-out; }
@keyframes sb-e-shake {
  0%, 100% { transform: none; }
  4%, 12%, 20%, 28%, 36%, 44%, 52%, 60%, 68%, 76%, 84%, 92% { transform: translateX(-1.5px); }
  8%, 16%, 24%, 32%, 40%, 48%, 56%, 64%, 72%, 80%, 88%, 96% { transform: translateX(1.5px); }
}
@keyframes sb-e-stomp {
  0%, 30%, 60%, 90%, 100% { transform: translateY(0); }
  15%, 45%, 75% { transform: translateY(-6px) rotate(-8deg); }
}
@keyframes sb-e-stiff-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(-14deg); }
}
@keyframes sb-e-stiff-r {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(14deg); }
}

/* ---------- Ngạc nhiên: giật mình bật lên, giơ hai tay ---------- */
.emote-surprised .sb-root { animation: sb-e-startle 1.9s ease-out; }
.emote-surprised .sb-arm-l { animation: sb-e-hands-up-l 1.9s ease-out; }
.emote-surprised .sb-arm-r { animation: sb-e-hands-up-r 1.9s ease-out; }
@keyframes sb-e-startle {
  0%, 30%, 100% { transform: none; }
  12% { transform: translateY(-12px) scale(0.95, 1.06); }
  22% { transform: translateY(0) scale(1.06, 0.95); }
}
@keyframes sb-e-hands-up-l {
  0%, 100% { transform: rotate(0deg); }
  12%, 65% { transform: rotate(120deg); }
}
@keyframes sb-e-hands-up-r {
  0%, 100% { transform: rotate(0deg); }
  12%, 65% { transform: rotate(-120deg); }
}

/* ---------- Ngại ngùng: nghiêng đầu, xoắn tay ---------- */
.emote-shy .sb-root { animation: sb-e-fidget 2.8s ease-in-out; }
.emote-shy .sb-tilt { animation: sb-e-tilt-r 2.8s ease-in-out; }
.emote-shy .sb-arm-l { animation: sb-e-shy-arm-l 2.8s ease-in-out; }
.emote-shy .sb-arm-r { animation: sb-e-shy-arm-r 2.8s ease-in-out; }
@keyframes sb-e-fidget {
  0%, 100% { transform: none; }
  25%, 75% { transform: translateX(-2px) rotate(-2deg); }
  50% { transform: translateX(2px) rotate(2deg); }
}
@keyframes sb-e-tilt-r {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(9deg); }
}
@keyframes sb-e-shy-arm-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 50%, 85% { transform: rotate(-44deg); }
  32%, 68% { transform: rotate(-34deg); }
}
@keyframes sb-e-shy-arm-r {
  0%, 100% { transform: rotate(0deg); }
  15%, 50%, 85% { transform: rotate(44deg); }
  32%, 68% { transform: rotate(34deg); }
}

/* ---------- Buồn ngủ: gật gù ---------- */
.emote-sleepy .sb-root { animation: sb-e-slump 3.6s ease-in-out; }
.emote-sleepy .sb-tilt { animation: sb-e-nod-off 3.6s ease-in-out; }
@keyframes sb-e-slump {
  0%, 100% { transform: none; }
  30%, 70% { transform: translateY(2px) scale(1.02, 0.97); }
}
@keyframes sb-e-nod-off {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: translateY(2px) rotate(12deg); }
  35% { transform: translateY(0) rotate(4deg); }
  55% { transform: translateY(3px) rotate(14deg); }
  65% { transform: translateY(0) rotate(5deg); }
  85% { transform: translateY(3px) rotate(13deg); }
}

/* ---------- Vỗ tay ---------- */
.emote-clap .sb-root { animation: sb-e-bounce 2.4s ease-in-out; }
.emote-clap .sb-arm-l { animation: sb-e-clap-l 2.4s linear; }
.emote-clap .sb-arm-r { animation: sb-e-clap-r 2.4s linear; }
@keyframes sb-e-clap-l {
  0%, 100% { transform: rotate(0deg); }
  8%, 20%, 32%, 44%, 56%, 68%, 80%, 92% { transform: rotate(-78deg); }
  14%, 26%, 38%, 50%, 62%, 74%, 86% { transform: rotate(-48deg); }
}
@keyframes sb-e-clap-r {
  0%, 100% { transform: rotate(0deg); }
  8%, 20%, 32%, 44%, 56%, 68%, 80%, 92% { transform: rotate(78deg); }
  14%, 26%, 38%, 50%, 62%, 74%, 86% { transform: rotate(48deg); }
}

/* ---------- Ôm: quay về phía người kia, nghiêng người, hai tay vòng sang ---------- */
.emote-hug .sb-root { animation: sb-e-hug 3.4s ease-in-out; }
.emote-hug.facing-right .sb-art:not(.sb-3d) { transform: perspective(420px) rotateY(34deg) rotate(6deg); }
.emote-hug.facing-left .sb-art:not(.sb-3d) { transform: perspective(420px) rotateY(-34deg) rotate(-6deg); }
.emote-hug.facing-right .sb-arm-l { animation: sb-e-hug-far 3.4s ease-in-out; }
.emote-hug.facing-right .sb-arm-r { animation: sb-e-hug-near 3.4s ease-in-out; }
.emote-hug.facing-left .sb-arm-r { animation: sb-e-hug-far-l 3.4s ease-in-out; }
.emote-hug.facing-left .sb-arm-l { animation: sb-e-hug-near-l 3.4s ease-in-out; }
@keyframes sb-e-hug {
  0%, 100% { transform: none; }
  15%, 85% { transform: translateY(-1px); }
  35%, 65% { transform: translateY(-2px) scale(1.015, 0.99); }
}
/* Người kia ở bên phải: tay trái vắt ngang người sang phải, tay phải giơ ôm vai. */
@keyframes sb-e-hug-far {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(-104deg); }
  50% { transform: rotate(-98deg); }
}
@keyframes sb-e-hug-near {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(-78deg); }
  50% { transform: rotate(-70deg); }
}
@keyframes sb-e-hug-far-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(104deg); }
  50% { transform: rotate(98deg); }
}
@keyframes sb-e-hug-near-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(78deg); }
  50% { transform: rotate(70deg); }
}

/* ---------- Trêu: chạy tới, chọc chọc vào má người kia ---------- */
.emote-poke .sb-root { animation: sb-e-poke 2.2s ease-in-out; }
.emote-poke.facing-right .sb-arm-r { animation: sb-e-poke-r 2.2s ease-in-out; }
.emote-poke.facing-left .sb-arm-l { animation: sb-e-poke-l 2.2s ease-in-out; }
.emote-poke.facing-right .sb-art:not(.sb-3d) { transform: perspective(420px) rotateY(34deg) rotate(4deg); }
.emote-poke.facing-left .sb-art:not(.sb-3d) { transform: perspective(420px) rotateY(-34deg) rotate(-4deg); }
@keyframes sb-e-poke {
  0%, 100% { transform: none; }
  20%, 80% { transform: translateY(-1px); }
}
@keyframes sb-e-poke-r {
  0%, 100% { transform: rotate(0deg); }
  12%, 32%, 52%, 72% { transform: rotate(-74deg); }
  22%, 42%, 62% { transform: rotate(-58deg); }
  86% { transform: rotate(-20deg); }
}
@keyframes sb-e-poke-l {
  0%, 100% { transform: rotate(0deg); }
  12%, 32%, 52%, 72% { transform: rotate(74deg); }
  22%, 42%, 62% { transform: rotate(58deg); }
  86% { transform: rotate(20deg); }
}

/* =====================================================================
 * Khối nhân vật (actor-view.js): hình vẽ 2D/3D + lớp hiệu ứng bay lên
 * ===================================================================== */
.sb-actor {
  position: relative;
  width: 100%;
  height: 100%;
}
.sb-art {
  position: absolute;
  inset: 0;
}
/* Canvas 3D rộng hơn khung nhân vật để vẫy tay / nhảy không bị cắt. Không bắt chuột. */
.sb-art.sb-3d canvas {
  position: absolute;
  left: -40%;
  top: -30%;
  width: 180% !important;
  height: 136% !important;
  pointer-events: none;
}
.sb-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.sb-fx-p {
  position: absolute;
  font: 700 1em/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI", sans-serif;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.sb-fx-p.float { animation: sb-fx-float var(--dur, 1.6s) ease-out forwards; }
.sb-fx-p.fall { animation: sb-fx-fall var(--dur, 1.1s) ease-in forwards; }
.sb-fx-p.pop { animation: sb-fx-pop var(--dur, 0.9s) cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
.sb-fx-p.word {
  font: 800 0.75em/1 "Segoe UI", system-ui, sans-serif;
  color: #ff7a00;
  -webkit-text-stroke: 0.6px #ffffff;
}
@keyframes sb-fx-float {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  18% { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.3), -10px) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -60px)) scale(1.1) rotate(var(--rot, 0deg)); }
}
@keyframes sb-fx-fall {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 40px)) scale(1); }
}
@keyframes sb-fx-pop {
  0% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 1; transform: scale(1.25); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9) translateY(-6px); }
}

/* =====================================================================
 * 10 động tác thêm theo khảo sát. Tay: trái xoay dương = giơ ra ngoài / lên, phải xoay âm = giơ ra ngoài / lên.
 * ===================================================================== */

/* ---------- Bắn tim: tay phải bật lên cạnh má, "tách" một cái ---------- */
.emote-fingerheart .sb-arm-r { animation: sb-e-fheart 2.4s ease-in-out; }
.emote-fingerheart .sb-tilt { animation: sb-e-tilt-l 2.4s ease-in-out; }
.emote-fingerheart .sb-root { animation: sb-e-snap 2.4s ease-out; }
@keyframes sb-e-fheart {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-174deg); }
  18% { transform: rotate(-148deg); }
  24%, 82% { transform: rotate(-160deg); }
  52% { transform: rotate(-166deg); }
}
@keyframes sb-e-snap {
  0%, 100% { transform: none; }
  16% { transform: translateY(1px) scale(1.05, 0.95); }
  24% { transform: translateY(-3px) scale(0.98, 1.03); }
  34% { transform: none; }
}

/* ---------- Tim to: hai tay vòng lên đầu thành trái tim, đung đưa ---------- */
.emote-bigheart .sb-arm-l { animation: sb-e-bigheart-l 3s ease-in-out; }
.emote-bigheart .sb-arm-r { animation: sb-e-bigheart-r 3s ease-in-out; }
.emote-bigheart .sb-root { animation: sb-e-sway 3s ease-in-out; }
/* Tay chibi ngắn + tóc dài hai bên má: giơ gần đầu là khuất → mở ra ngoài ~110–125° cho thấy rõ hai bàn tay. */
@keyframes sb-e-bigheart-l {
  0%, 100% { transform: rotate(0deg); }
  18%, 82% { transform: rotate(112deg); }
  50% { transform: rotate(120deg); }
}
@keyframes sb-e-bigheart-r {
  0%, 100% { transform: rotate(0deg); }
  18%, 82% { transform: rotate(-112deg); }
  50% { transform: rotate(-120deg); }
}

/* ---------- Hôn gió: tay chạm môi rồi tung ra ---------- */
.emote-kiss .sb-arm-r { animation: sb-e-kiss 2.4s ease-in-out; }
.emote-kiss .sb-root { animation: sb-e-kiss-lean 2.4s ease-in-out; }
@keyframes sb-e-kiss {
  0%, 100% { transform: rotate(0deg); }
  16%, 30% { transform: rotate(-168deg); }
  42% { transform: rotate(-104deg); }
  50%, 80% { transform: rotate(-90deg); }
}
@keyframes sb-e-kiss-lean {
  0%, 100% { transform: none; }
  18%, 30% { transform: translateY(1px) rotate(-2deg); }
  45%, 80% { transform: translateX(2px) rotate(4deg); }
}

/* ---------- Dỗi: quay ngoắt đi, khoanh tay, dậm chân ---------- */
.emote-pout .sb-art:not(.sb-3d) { animation: sb-e-turn-away 3s ease-in-out; }
.emote-pout .sb-arm-l { animation: sb-e-hug-l 3s ease-in-out; }
.emote-pout .sb-arm-r { animation: sb-e-hug-r 3s ease-in-out; }
.emote-pout .sb-leg-r { animation: sb-e-stomp 3s ease-in-out; }
.emote-pout .sb-tilt { animation: sb-e-pout-head 3s ease-in-out; }
@keyframes sb-e-turn-away {
  0%, 100% { transform: none; }
  15%, 85% { transform: perspective(420px) rotateY(-32deg) rotate(-3deg); }
}
@keyframes sb-e-pout-head {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: translateY(-1px) rotate(-8deg); }
}

/* ---------- Xin lỗi: cúi đầu, chắp tay ---------- */
.emote-sorry .sb-root { animation: sb-e-bow 2.8s ease-in-out; }
.emote-sorry .sb-tilt { animation: sb-e-bow-head 2.8s ease-in-out; }
.emote-sorry .sb-arm-l { animation: sb-e-pray-l 2.8s ease-in-out; }
.emote-sorry .sb-arm-r { animation: sb-e-pray-r 2.8s ease-in-out; }
@keyframes sb-e-bow {
  0%, 100% { transform: none; }
  20%, 40% { transform: translateY(4px) scale(1.02, 0.96); }
  55%, 85% { transform: translateY(2px); }
}
@keyframes sb-e-bow-head {
  0%, 100% { transform: none; }
  20%, 40% { transform: translateY(7px) scale(0.98); }
  55%, 85% { transform: translateY(2px) rotate(6deg); }
}
@keyframes sb-e-pray-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(-38deg); }
}
@keyframes sb-e-pray-r {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(38deg); }
}

/* ---------- Oke: gật gật + giơ ngón cái ---------- */
.emote-ok .sb-tilt { animation: sb-e-nod 2s ease-in-out; }
.emote-ok .sb-arm-r { animation: sb-e-thumb 2s cubic-bezier(0.3, 1.5, 0.5, 1); }
.emote-ok .sb-root { animation: sb-e-snap 2s ease-out; }
@keyframes sb-e-nod {
  0%, 50%, 100% { transform: none; }
  12%, 36% { transform: translateY(3px); }
  24% { transform: translateY(-1px); }
}
@keyframes sb-e-thumb {
  0%, 100% { transform: rotate(0deg); }
  14%, 85% { transform: rotate(-106deg); }
  20% { transform: rotate(-120deg); }
}

/* ---------- Suy nghĩ: tay chống cằm, nghiêng đầu, rồi "à!" ---------- */
.emote-think .sb-arm-r { animation: sb-e-chin 3.2s ease-in-out; }
.emote-think .sb-arm-l { animation: sb-e-think-l 3.2s ease-in-out; }
.emote-think .sb-tilt { animation: sb-e-think-head 3.2s ease-in-out; }
.emote-think .sb-root { animation: sb-e-think-sway 3.2s ease-in-out; }
@keyframes sb-e-chin {
  0%, 100% { transform: rotate(0deg); }
  15%, 72% { transform: rotate(-150deg); }
  44% { transform: rotate(-144deg); }
  80%, 90% { transform: rotate(-176deg); }
}
@keyframes sb-e-think-l {
  0%, 100% { transform: rotate(0deg); }
  15%, 85% { transform: rotate(-40deg); }
}
@keyframes sb-e-think-head {
  0%, 100% { transform: rotate(0deg); }
  15%, 70% { transform: rotate(8deg); }
  80%, 90% { transform: translateY(-2px) rotate(-3deg); }
}
@keyframes sb-e-think-sway {
  0%, 100% { transform: none; }
  30%, 60% { transform: translateX(-1.5px); }
  45% { transform: translateX(1.5px); }
  80% { transform: translateY(-5px); }
  88% { transform: none; }
}

/* ---------- Tạo dáng: chữ V cạnh mặt, nghiêng hông ---------- */
.emote-pose .sb-arm-r { animation: sb-e-vsign 2.4s cubic-bezier(0.3, 1.4, 0.5, 1); }
.emote-pose .sb-arm-l { animation: sb-e-hip 2.4s ease-in-out; }
.emote-pose .sb-root { animation: sb-e-pose 2.4s ease-in-out; }
.emote-pose .sb-tilt { animation: sb-e-tilt-l 2.4s ease-in-out; }
@keyframes sb-e-vsign {
  0%, 100% { transform: rotate(0deg); }
  14%, 85% { transform: rotate(-158deg); }
}
@keyframes sb-e-hip {
  0%, 100% { transform: rotate(0deg); }
  14%, 85% { transform: rotate(-32deg); }
}
@keyframes sb-e-pose {
  0%, 100% { transform: none; }
  14%, 85% { transform: translateX(-2px) rotate(-4deg); }
}

/* ---------- Chúc mừng: nhảy 3 lần, hai tay chữ V ---------- */
.emote-cheer .sb-root { animation: sb-e-cheer 2.8s ease-in-out; }
.emote-cheer .sb-arm-l { animation: sb-e-v-l 2.8s ease-in-out; }
.emote-cheer .sb-arm-r { animation: sb-e-v-r 2.8s ease-in-out; }
@keyframes sb-e-cheer {
  0%, 100% { transform: none; }
  8%, 41%, 74% { transform: translateY(0) scale(1.08, 0.92); }
  22%, 55%, 88% { transform: translateY(-22px) scale(0.95, 1.06); }
  35%, 68% { transform: translateY(0) scale(1.04, 0.96); }
}
@keyframes sb-e-v-l {
  0%, 100% { transform: rotate(0deg); }
  10%, 90% { transform: rotate(108deg); }
  22%, 55%, 88% { transform: rotate(124deg); }
}
@keyframes sb-e-v-r {
  0%, 100% { transform: rotate(0deg); }
  10%, 90% { transform: rotate(-108deg); }
  22%, 55%, 88% { transform: rotate(-124deg); }
}

/* ---------- Vươn vai: giơ thẳng hai tay, người dài ra, ngáp ---------- */
.emote-stretch .sb-root { animation: sb-e-stretch 3s ease-in-out; }
.emote-stretch .sb-arm-l { animation: sb-e-stretch-l 3s ease-in-out; }
.emote-stretch .sb-arm-r { animation: sb-e-stretch-r 3s ease-in-out; }
.emote-stretch .sb-tilt { animation: sb-e-stretch-head 3s ease-in-out; }
@keyframes sb-e-stretch {
  0%, 100% { transform: none; }
  30%, 62% { transform: translateY(-3px) scale(0.97, 1.06); }
  45% { transform: translateY(-4px) scale(0.96, 1.08); }
  76% { transform: translateY(1px) scale(1.03, 0.97); }
}
@keyframes sb-e-stretch-l {
  0%, 100% { transform: rotate(0deg); }
  28%, 62% { transform: rotate(116deg); }
  45% { transform: rotate(126deg); }
}
@keyframes sb-e-stretch-r {
  0%, 100% { transform: rotate(0deg); }
  28%, 62% { transform: rotate(-116deg); }
  45% { transform: rotate(-126deg); }
}
@keyframes sb-e-stretch-head {
  0%, 100% { transform: rotate(0deg); }
  30%, 62% { transform: translateY(-2px) rotate(-5deg); }
  45% { transform: translateY(-2px) rotate(5deg); }
}

/* Chớp đèn máy ảnh (Tạo dáng) */
.sb-fx-p.flash {
  left: -30% !important;
  top: -20% !important;
  width: 160%;
  height: 140%;
  margin: 0 !important;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0) 70%);
  animation: sb-fx-flash 0.5s ease-out forwards;
}
@keyframes sb-fx-flash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-root,
  .sb-eyes,
  .talking .sb-mouth,
  .talking .sb-tilt,
  .dragging .sb-root,
  .hop .sb-root,
  [class*="emote-"] .sb-root,
  [class*="emote-"] .sb-tilt,
  [class*="emote-"] .sb-arm,
  [class*="emote-"] .sb-leg,
  .walking .sb-root,
  .walking .sb-arm,
  .walking .sb-leg {
    animation: none !important;
  }
  .sb-fx {
    display: none;
  }
}