/**
 * moodFox.css — Lux 心情桌寵
 * 浮在畫面最上層、可以自由拖曳的桌寵樣式。跟著 variables.css 的主題色票走
 * （只有內建的備用狐狸 SVG 用得到色票；使用者自己的圖檔素材不受主題影響）。
 */

.lux-pet {
  position: fixed;
  width: 110px;
  height: 110px;
  /* 蓋過一般頁面內容，但不用蓋過天際的誇張值——128px 的熱區疊到 send-btn／
     新增按鈕上時，之前的天文數字 z-index 讓桌寵永遠贏，按鈕完全點不到。
     合理的尺寸 + 合理 z-index，兩者一起把「擋住真正的操作按鈕」的機率降到最低。 */
  z-index: 2000;
  cursor: grab;
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28));
  transition: filter .15s ease;
}
@media (max-width: 480px) {
  .lux-pet { width: 84px; height: 84px; }
}
.lux-pet.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .38));
  animation: none !important;
}

.lux-pet-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.lux-pet-fallback {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 待機時的輕微浮動——就算是靜態圖也有點生氣，不會像貼紙一樣死板 */
.lux-pet:not(.dragging) {
  animation: lux-pet-float 3.6s ease-in-out infinite;
}
@keyframes lux-pet-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .lux-pet, .lux-pet * { animation: none !important; }
}

/* ── 以下只影響內建的備用狐狸 SVG（使用者還沒放自己的圖檔時顯示） ── */
.mf-ear-l, .mf-ear-r { transform-box: fill-box; transform-origin: bottom center; }
/* 尾巴的旋轉支點落在貼著身體的根部（尾巴 path 的左下角附近），不是尖端——
   不然擺動起來會變成尖端不動、根部亂甩，方向整個反了 */
.mf-tail { transform-box: fill-box; transform-origin: 18% 82%; }
.mf-body { transform-box: fill-box; transform-origin: center; }
.mf-eye-l, .mf-eye-r { transform-box: fill-box; transform-origin: center; }
.mf-head { transform-box: fill-box; transform-origin: 50% 65%; }

.lux-pet[data-state="happy"] .mf-head { animation: mf-bounce .55s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.lux-pet[data-state="happy"] .mf-tail { animation: mf-tail-wag .35s ease-in-out infinite; }
@keyframes mf-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8%); } }
@keyframes mf-tail-wag { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }

.lux-pet[data-state="longing"] .mf-head { animation: mf-sway 3.6s ease-in-out infinite; }
.lux-pet[data-state="longing"] .mf-ear-l { transform: rotate(-12deg); }
.lux-pet[data-state="longing"] .mf-ear-r { transform: rotate(12deg); }
.lux-pet[data-state="longing"] .mf-tail { animation: mf-tail-droop 5s ease-in-out infinite; }
@keyframes mf-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes mf-tail-droop { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(18deg); } }

.lux-pet[data-state="alert"] .mf-ear-l { transform: rotate(-2deg) scaleY(1.12); }
.lux-pet[data-state="alert"] .mf-ear-r { transform: rotate(2deg) scaleY(1.12); }
.lux-pet[data-state="alert"] .mf-head { animation: mf-alert-check 2.6s ease-in-out infinite; }
@keyframes mf-alert-check { 0%, 20%, 100% { transform: rotate(0deg); } 10% { transform: rotate(-6deg); } }

.lux-pet[data-state="curious"] .mf-head { animation: mf-tilt 1.6s ease-in-out infinite; }
.lux-pet[data-state="curious"] .mf-ear-l { transform: rotate(-6deg); }
.lux-pet[data-state="curious"] .mf-ear-r { transform: rotate(10deg); }
.lux-pet[data-state="curious"] .mf-tail { animation: mf-tail-wag-slow .5s ease-in-out infinite; }
@keyframes mf-tilt { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes mf-tail-wag-slow { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(12deg); } }

.lux-pet[data-state="tired"] .mf-body { animation: mf-heavy-breathe 4.5s ease-in-out infinite; }
.lux-pet[data-state="tired"] .mf-eye-l, .lux-pet[data-state="tired"] .mf-eye-r { transform: scaleY(.25); }
.lux-pet[data-state="tired"] .mf-ear-l { transform: rotate(-16deg); }
.lux-pet[data-state="tired"] .mf-ear-r { transform: rotate(16deg); }
.lux-pet[data-state="tired"] .mf-tail { transform: translateY(2%) rotate(20deg); }
@keyframes mf-heavy-breathe { 0%, 100% { transform: translateY(3%) scaleY(1); } 50% { transform: translateY(3%) scaleY(1.05); } }

.lux-pet[data-state="idle"] .mf-body { animation: mf-breathe 3.2s ease-in-out infinite; }
.lux-pet[data-state="idle"] .mf-tail { animation: mf-tail-sway 4s ease-in-out infinite; }
@keyframes mf-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.035); } }
@keyframes mf-tail-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }