/* ==========================================================================
   Bé Mơ — con mèo của quán, đặt tên theo Coldbrew Mơ.
   Mèo tam thể khoang trắng (tuxedo) lông xám than, nằm ngủ ở góc trái dưới.
   Thỉnh thoảng dậy đi dạo một vòng, thấy chuột lại gần thì đuổi một lúc cho
   vui rồi chán, về góc ngủ tiếp. Bấm vào lúc nào cũng được vuốt.

   Tầng z-index của trang (để khỏi phải dò lại):
     .menu-tabs 90  →  BÉ MƠ 95  →  header 100  →  fab 120
     →  scrim 150  →  drawer 160  →  modal 200/210  →  toast 300
   ========================================================================== */

.qafe-cat {
  /* --------------------------------------------------------------------
     MÀU: mèo xám than, KHÔNG dùng nâu của thương hiệu nữa — nâu #78350f
     chìm nghỉm vào nền trang. Xám than lạnh tách hẳn khỏi tông nâu ấm.

     Khó ở chỗ: dải "Đặt trước" nền nâu đậm (#78350f → #5f2a0c) có độ sáng
     gần bằng xám than, nên nếu chỉ đổi màu thân thì đi qua đó vẫn mất hút.
     Hai thứ kéo mèo nổi lên trên CẢ HAI nền:
       1. mảng kem ở ngực/mõm/chân — sáng, nổi trên mọi nền;
       2. filter hai lớp ở .cat-svg: bóng ấm (ăn trên nền kem) + quầng kem
          rất mảnh (ăn trên nền nâu đậm).
     -------------------------------------------------------------------- */
  --cat-body: #3d3845;                    /* xám than hơi ngả tím, lạnh */
  --cat-body-dark: #2f2b36;               /* mảng tối: tai ngoài, vệt lưng */
  --cat-cream: var(--color-bg, #faf3e4);  /* khoang trắng — giữ dây với thương hiệu */
  --cat-ear: #c98a6b;                     /* tai trong + mũi: hồng nâu cho ấm */
  --cat-dark: #1c1720;                    /* con ngươi */
  --cat-heart: var(--color-accent, #c2410c);
  --cat-size: 64px;

  /* Biên độ vẫy đuôi — mỗi trạng thái một kiểu, JS không phải đụng tới. */
  --tail-amp: 4deg;
  --tail-dur: 2.6s;
  --leg-dur: 320ms;                       /* JS chỉnh theo vận tốc thật */

  position: fixed;
  left: 0; top: 0;
  width: var(--cat-size); height: var(--cat-size);
  z-index: 95;
  /* Cả lớp KHÔNG ăn chuột; chỉ mình con mèo mới bấm được (xem .cat-svg). */
  pointer-events: none;
  /* Vị trí do JS đặt bằng translate3d — chỉ đụng transform, không đụng layout. */
  transform: translate3d(18px, calc(100vh - 86px), 0);
}

/* Mở ngăn kéo giỏ hàng / hộp thoại nhóm thì mèo đi chỗ khác chơi. */
.qafe-cat.is-away { opacity: 0; visibility: hidden; transition: opacity 180ms ease; }

.cat-stage { position: absolute; inset: 0; }

/* Nghiêng người theo đà chạy — JS ghi transform vào đây mỗi khung hình. */
.cat-lean { position: absolute; inset: 0; }

/* Lật ngang theo hướng chạy. Có transition nên mèo XOAY người chứ không
   giật một phát sang bên kia. */
.cat-flip {
  position: absolute; inset: 0;
  transform: scaleX(1);
  transition: transform 150ms ease;
}
.qafe-cat[data-dir="left"] .cat-flip { transform: scaleX(-1); }

.cat-bob { position: absolute; inset: 0; }

.cat-svg {
  width: 100%; height: 100%; display: block; overflow: visible;
  /* MẶC ĐỊNH KHÔNG ĂN CHUỘT.
     Trước đây để auto suốt, mà mèo thì bám theo con trỏ — nên nó hay ngồi
     đúng chỗ khách sắp bấm và nuốt mất cú bấm vào nút. Giờ chỉ lúc mèo nằm
     yên ở góc nhà (class is-pettable do cat.js gắn) mới vuốt được; còn đang
     đi đứng chạy nhảy thì cú bấm xuyên thẳng qua mèo xuống trang. */
  pointer-events: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  /* lớp 1: bóng ấm dưới chân — tách mèo khỏi nền kem
     lớp 2: quầng kem mảnh — tách mèo khỏi dải nâu đậm.
     Lớp 2 phải gánh phần nặng: xám than và nâu đậm #5f2a0c gần như CÙNG độ
     sáng (tỉ lệ tương phản ~1.0), đổi màu thân kiểu gì cũng không thoát —
     nên viền kem mới là thứ vẽ hình con mèo ra trên nền đó. */
  filter: drop-shadow(0 3px 3px rgba(40, 22, 8, 0.28))
          drop-shadow(0 0 2px rgba(250, 243, 228, 0.62));
}

/* Ô bắt chuột trong suốt cũng phải tắt theo — thẻ con mà tự khai
   pointer-events thì nó đè lên giá trị thừa kế của .cat-svg. */
.cat-hit { pointer-events: none; }

/* Chỉ khi mèo đang nằm/ngồi yên ở góc nhà mới bấm vuốt được. */
.qafe-cat.is-pettable .cat-svg { pointer-events: auto; cursor: pointer; }
.qafe-cat.is-pettable .cat-hit { pointer-events: all; }

/* ---------------- đổi dáng: mờ chồng 200ms, không nháy phát đổi ---------------- */
.qafe-cat .pose {
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.qafe-cat[data-state="sleeping"] .pose-sleep,
.qafe-cat[data-state="peeking"]  .pose-sleep,
.qafe-cat[data-state="waking"]   .pose-sit,
.qafe-cat[data-state="sitting"]  .pose-sit,
.qafe-cat[data-state="sniffing"] .pose-sit,
.qafe-cat[data-state="grooming"] .pose-sit,
.qafe-cat[data-state="chasing"]  .pose-run,
.qafe-cat[data-state="strolling"] .pose-run,
.qafe-cat[data-state="returning"] .pose-run { opacity: 1; }

/* Biên độ đuôi theo trạng thái: nằm im thì khẽ, chạy thì quăng mạnh. */
.qafe-cat[data-state="sitting"],
.qafe-cat[data-state="sniffing"]  { --tail-amp: 5deg;  --tail-dur: 2.8s; }
.qafe-cat[data-state="grooming"]  { --tail-amp: 3.5deg; --tail-dur: 3.2s; }
.qafe-cat[data-state="waking"]    { --tail-amp: 6deg;  --tail-dur: 2.2s; }
.qafe-cat[data-state="strolling"] { --tail-amp: 8deg;  --tail-dur: 1.5s; }
.qafe-cat[data-state="returning"] { --tail-amp: 9deg;  --tail-dur: 1.1s; }
.qafe-cat[data-state="chasing"]   { --tail-amp: 12deg; --tail-dur: 0.68s; }

/* Đuôi phe phẩy liên tục ở MỌI trạng thái thức. */
.cat-tail { transform-box: fill-box; }
.cat-tail-sit { transform-origin: 8% 90%; }
.cat-tail-run { transform-origin: 95% 70%; }
.qafe-cat:not([data-state="sleeping"]):not([data-state="peeking"]) .cat-tail {
  animation: cat-tail-sway var(--tail-dur) ease-in-out infinite;
}
@keyframes cat-tail-sway {
  0%, 100% { transform: rotate(calc(var(--tail-amp) * -1)); }
  50%      { transform: rotate(var(--tail-amp)); }
}

/* ---------------- ngủ: thở, thỉnh thoảng vẩy đuôi, giật tai ---------------- */
.cat-breathe { transform-box: fill-box; transform-origin: 50% 90%; }
.qafe-cat[data-state="sleeping"] .cat-breathe,
.qafe-cat[data-state="peeking"] .cat-breathe {
  animation: cat-breathe 3.4s ease-in-out infinite;
}
@keyframes cat-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.035, 1.055); }
}

.cat-tail-sleep { transform-box: fill-box; transform-origin: 90% 20%; }
.qafe-cat[data-state="sleeping"] .cat-tail-sleep,
.qafe-cat[data-state="peeking"] .cat-tail-sleep {
  animation: cat-tail-flick 7s ease-in-out infinite;
}
@keyframes cat-tail-flick {
  0%, 72%, 100% { transform: rotate(0deg); }
  78%           { transform: rotate(-9deg); }
  84%           { transform: rotate(6deg); }
  90%           { transform: rotate(-4deg); }
}

.cat-ear-twitch { transform-box: fill-box; transform-origin: 50% 100%; }
.qafe-cat[data-state="sleeping"] .cat-ear-twitch {
  animation: cat-ear-twitch 5.5s ease-in-out infinite;
}
@keyframes cat-ear-twitch {
  0%, 88%, 100% { transform: rotate(0deg); }
  91%           { transform: rotate(-13deg); }
  94%           { transform: rotate(9deg); }
}

/* ---------------- "nghỉ chơi": chuột lại gần thì chỉ he hé mắt ----------------
   Trong 90 giây hạ nhiệt, mèo không thèm dậy. Nó chỉ giật tai một cái và
   hé một mắt nhìn, xong nhắm lại ngủ tiếp — đúng kiểu mèo lười. */
.cat-peek-eye { opacity: 0; }
.qafe-cat[data-state="peeking"] .cat-ear-twitch {
  animation: cat-ear-peek 1.4s ease-in-out;
}
@keyframes cat-ear-peek {
  0%, 100% { transform: rotate(0deg); }
  12%      { transform: rotate(-16deg); }
  26%      { transform: rotate(10deg); }
  40%      { transform: rotate(-5deg); }
}
.qafe-cat[data-state="peeking"] .cat-peek-eye {
  animation: cat-peek-eye 1.4s ease-in-out;
}
@keyframes cat-peek-eye {
  0%, 100% { opacity: 0; }
  20%, 72% { opacity: 1; }
}
.qafe-cat[data-state="peeking"] .cat-shut-eye {
  animation: cat-shut-eye 1.4s ease-in-out;
}
@keyframes cat-shut-eye {
  0%, 100% { opacity: 1; }
  20%, 72% { opacity: 0; }
}

/* "z z" bay lên — chữ thật, không phải emoji. */
.cat-zzz {
  position: absolute; right: -2px; top: -6px;
  pointer-events: none;
  font-family: var(--font-display, sans-serif);
  font-weight: 700; color: var(--cat-body); opacity: 0;
  transition: opacity 240ms ease;
}
.qafe-cat[data-state="sleeping"] .cat-zzz { opacity: 1; }
.cat-zzz span {
  position: absolute; left: 0; top: 0; opacity: 0;
  animation: cat-zzz 3.6s ease-out infinite;
}
.cat-zzz span:nth-child(1) { font-size: 11px; animation-delay: 0s; }
.cat-zzz span:nth-child(2) { font-size: 14px; animation-delay: 1.3s; }
@keyframes cat-zzz {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.7) rotate(-8deg); }
  18%  { opacity: 0.85; }
  70%  { opacity: 0.35; }
  100% { opacity: 0; transform: translate(16px, -26px) scale(1.15) rotate(10deg); }
}

/* ---------------- tỉnh dậy: ngáp một cái rồi mới vươn vai ---------------- */
.qafe-cat[data-state="waking"] .cat-bob {
  animation: cat-wake 950ms ease-out;
}
@keyframes cat-wake {
  0%   { transform: scale(1, 0.86) translateY(5px); }     /* còn cuộn tròn */
  22%  { transform: scale(1.05, 0.93) translateY(2px); }  /* ngáp */
  40%  { transform: scale(1.01, 1.00) translateY(0); }
  62%  { transform: scale(1.15, 1.11) translateY(-4px); } /* vươn vai */
  82%  { transform: scale(0.97, 1.01) translateY(1px); }
  100% { transform: scale(1, 1) translateY(0); }
}
.cat-yawn { opacity: 0; transform-box: fill-box; transform-origin: 50% 0%; }
.qafe-cat[data-state="waking"] .cat-yawn { animation: cat-yawn 950ms ease-out; }
@keyframes cat-yawn {
  0%, 44%, 100% { opacity: 0; transform: scaleY(0.2); }
  14%           { opacity: 1; transform: scaleY(1); }
  30%           { opacity: 1; transform: scaleY(0.75); }
}
/* ngáp thì nhắm tịt mắt */
.qafe-cat[data-state="waking"] .cat-eyes-open { animation: cat-wake-eyes 950ms ease-out; }
@keyframes cat-wake-eyes {
  0%, 38% { opacity: 0; }
  50%     { opacity: 1; }
  100%    { opacity: 1; }
}
.qafe-cat[data-state="waking"] .cat-eyes-happy { animation: cat-wake-eyes-happy 950ms ease-out; }
@keyframes cat-wake-eyes-happy {
  0%, 34% { opacity: 1; }
  46%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ---------------- ngồi/nằm xuống: nhún một cái cho mềm ---------------- */
.qafe-cat.is-settling .cat-bob { animation: cat-settle 420ms ease-out; }
@keyframes cat-settle {
  0%   { transform: scale(1.07, 0.9) translateY(3px); }
  40%  { transform: scale(0.96, 1.06) translateY(-2px); }
  72%  { transform: scale(1.02, 0.99) translateY(0); }
  100% { transform: scale(1, 1) translateY(0); }
}

/* ---------------- chạy: thân nhún, chân đạp theo vận tốc thật ---------------- */
.qafe-cat[data-state="chasing"] .cat-bob,
.qafe-cat[data-state="strolling"] .cat-bob,
.qafe-cat[data-state="returning"] .cat-bob {
  animation: cat-run-bob var(--leg-dur) linear infinite;
}
@keyframes cat-run-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.6px); }
}

.cat-leg { transform-box: fill-box; transform-origin: 50% 0%; }
.qafe-cat[data-state="chasing"] .cat-leg-a,
.qafe-cat[data-state="strolling"] .cat-leg-a,
.qafe-cat[data-state="returning"] .cat-leg-a { animation: cat-leg-a var(--leg-dur) linear infinite; }
.qafe-cat[data-state="chasing"] .cat-leg-b,
.qafe-cat[data-state="strolling"] .cat-leg-b,
.qafe-cat[data-state="returning"] .cat-leg-b { animation: cat-leg-b var(--leg-dur) linear infinite; }
@keyframes cat-leg-a {
  0%, 100% { transform: rotate(24deg); }
  50%      { transform: rotate(-24deg); }
}
@keyframes cat-leg-b {
  0%, 100% { transform: rotate(-24deg); }
  50%      { transform: rotate(24deg); }
}

/* ---------------- ngồi: chớp mắt ---------------- */
.cat-eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.qafe-cat[data-state="sitting"] .cat-eyes,
.qafe-cat[data-state="sniffing"] .cat-eyes,
.qafe-cat[data-state="grooming"] .cat-eyes {
  animation: cat-blink 5.2s ease-in-out infinite;
}
@keyframes cat-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}

/* ---------------- liếm chân sau khi bắt kịp ---------------- */
.cat-groom { opacity: 0; transition: opacity 180ms ease; }
.qafe-cat[data-state="grooming"] .cat-groom { opacity: 1; }
.qafe-cat[data-state="grooming"] .cat-groom-paw {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: cat-groom-paw 1.5s ease-in-out infinite;
}
@keyframes cat-groom-paw {
  0%, 100% { transform: translateY(2px) rotate(-4deg); }
  50%      { transform: translateY(-2px) rotate(5deg); }
}
.qafe-cat[data-state="grooming"] .cat-tongue {
  transform-box: fill-box; transform-origin: 50% 0%;
  animation: cat-tongue 1.5s ease-in-out infinite;
}
@keyframes cat-tongue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.6; }
  50%      { transform: scaleY(1); opacity: 1; }
}
.qafe-cat[data-state="grooming"] .cat-eyes-open { opacity: 0; }
.qafe-cat[data-state="grooming"] .cat-eyes-happy { opacity: 1; }

/* ---------------- được vuốt: mắt cong lên, người ngoe nguẩy ---------------- */
.cat-eyes-happy { opacity: 0; }
.qafe-cat.is-happy .cat-eyes-open { opacity: 0; }
.qafe-cat.is-happy .cat-eyes-happy { opacity: 1; }
.qafe-cat.is-happy .cat-stage { animation: cat-wiggle 620ms ease-in-out; }
@keyframes cat-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-7deg) scale(1.07); }
  45%      { transform: rotate(6deg) scale(1.05); }
  70%      { transform: rotate(-4deg) scale(1.02); }
}

/* ---------------- tim bay lên khi được vuốt ---------------- */
.cat-hearts { position: absolute; inset: 0; pointer-events: none; }
.cat-heart {
  position: absolute; left: 50%; top: 14px;
  width: 13px; height: 13px; margin-left: -6.5px;
  color: var(--cat-heart);
  opacity: 0;
  animation: cat-heart-float 1100ms ease-out forwards;
}
.cat-heart svg { width: 100%; height: 100%; display: block; fill: currentColor; }
@keyframes cat-heart-float {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15%  { opacity: 0.95; transform: translate(var(--dx, 0px), -6px) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -46px) scale(0.75); }
}

/* ---------------- lời chào (một lần mỗi phiên) ---------------- */
.cat-say {
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  margin: 0; padding: 6px 12px;
  translate: -50% 0;
  white-space: nowrap;
  font-family: var(--font-body, sans-serif);
  font-size: 0.82rem; font-weight: 600; line-height: 1.2;
  color: var(--color-on-primary, #fffdf7);
  background: var(--cat-body);
  border-radius: 999px;
  box-shadow: var(--shadow-lift, 0 18px 44px -16px rgba(75, 46, 20, 0.35));
  pointer-events: none;
  opacity: 0;
  animation: cat-say 2600ms ease forwards;
}
.cat-say::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  translate: -50% 0;
  border: 5px solid transparent; border-top-color: var(--cat-body);
}
@keyframes cat-say {
  0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  82%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(0.96); }
}

/* ==========================================================================
   Giảm chuyển động: mèo ngồi yên một chỗ, không chạy, không thở, không z z.
   Vẫn vuốt được — chỉ là tim hiện ra rồi mờ đi, không bay.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .qafe-cat .cat-breathe,
  .qafe-cat .cat-tail,
  .qafe-cat .cat-tail-sleep,
  .qafe-cat .cat-ear-twitch,
  .qafe-cat .cat-peek-eye,
  .qafe-cat .cat-shut-eye,
  .qafe-cat .cat-yawn,
  .qafe-cat .cat-eyes,
  .qafe-cat .cat-eyes-open,
  .qafe-cat .cat-eyes-happy,
  .qafe-cat .cat-leg,
  .qafe-cat .cat-bob,
  .qafe-cat .cat-stage,
  .qafe-cat .cat-lean,
  .qafe-cat .cat-flip,
  .qafe-cat .cat-zzz span,
  .qafe-cat .cat-groom-paw,
  .qafe-cat .cat-tongue {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .qafe-cat .pose { transition: none !important; }
  .qafe-cat .cat-zzz { display: none; }
  .cat-heart { animation: cat-heart-still 1400ms ease forwards; }
  @keyframes cat-heart-still {
    0%   { opacity: 0; }
    20%  { opacity: 0.95; }
    75%  { opacity: 0.95; }
    100% { opacity: 0; }
  }
  .cat-say { animation: cat-say-still 2600ms ease forwards; }
  @keyframes cat-say-still {
    0%, 100% { opacity: 0; }
    10%, 85% { opacity: 1; }
  }
}