/* ============================================================
   MEND — Mochi the concierge cat
   Body motion is driven procedurally by js/cat.js (squash/stretch/
   rotate/bounce), so there are deliberately NO keyframe animations
   on .cat-sprite — they would fight the JS transform.
   ============================================================ */

#cat {
  --cat-x: 0vw;
  position: fixed; right: 26px; bottom: 18px; z-index: 78;
  transform: translateX(calc(var(--cat-x) * -1));
  transition: transform 1.5s cubic-bezier(.45,.05,.3,1);
  display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
  pointer-events: none;
}
#cat > * { pointer-events: auto; }

body.in-cine #cat { opacity: 0; visibility: hidden; pointer-events: none; }
body.calm-mode #cat { display: none; }
/* the cat replaces the plain orb; calm mode brings the orb back */
body:not(.calm-mode) #ray-orb { display: none; }

/* ---------- stage ---------- */
.cat-stage {
  width: 112px; height: 118px; display: block; position: relative;
  transition: filter .3s var(--ease);
}
.cat-stage:hover { filter: brightness(1.04); }

.cat-sprite {
  display: block; width: 100%; height: 100%;
  transform-origin: 50% 100%;           /* feet planted for squash/stretch */
  will-change: transform;
  filter: drop-shadow(0 10px 14px rgba(28,26,21,.22));
}
.cat-photo { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.cat-svg { width: 100%; height: 100%; overflow: visible; }

/* ground shadow — JS scales/fades it with hop height */
.cat-shadow-el {
  position: absolute; left: 50%; bottom: -2px; width: 68px; height: 11px;
  transform: translateX(-50%); margin-left: -34px;
  background: radial-gradient(ellipse at center, rgba(28,26,21,.32), transparent 72%);
  transform-origin: 50% 50%; pointer-events: none;
}
#cat.cat--flip .cat-sprite { scale: -1 1; }

/* while the chat panel is open the cat stands beside it, and its bubble
   opens to the left so the two never overlap */
#cat.cat--beside-chat { z-index: 87; }
#cat.cat--beside-chat .cat-bubble { border-radius: 16px 16px 16px 4px; }
/* nowhere to stand beside a full-width chat panel */
#cat.cat--hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s; }

/* ---------- drawn stand-in colours ---------- */
.cat-body, .cat-head, .cat-ear { fill: #7d8794; }
.cat-tail { stroke: #7d8794; }
.cat-chest, .cat-paw { fill: #eae4d6; }
.cat-eyes ellipse { fill: #fbf7ec; }
.cat-pupil ellipse { fill: #2a2721; }
.cat-nose { fill: #d99aa6; }
.cat-mouth { stroke: #4a463d; }
.cat-whisk { stroke: rgba(255,255,255,.75); }

/* blink + tail are fine as keyframes — they don't touch .cat-sprite */
.cat-eyes, .cat-pupil { animation: catBlink 5.4s infinite; transform-origin: 50% 44px; }
@keyframes catBlink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
#cat[data-pose="nap"] .cat-eyes,
#cat[data-pose="nap"] .cat-pupil { animation: none; transform: scaleY(.08); }
.cat-tail { animation: catTail 4.2s ease-in-out infinite; transform-origin: 88px 106px; }
@keyframes catTail { 0%,100% { transform: rotate(0deg); } 40% { transform: rotate(-13deg); } 70% { transform: rotate(6deg); } }
#cat[data-pose="play"] .cat-tail,
#cat[data-pose="walk"] .cat-tail { animation-duration: 1.1s; }
#cat[data-pose="nap"] .cat-tail { animation: none; transform: rotate(-24deg); }

/* sleeping z's */
#cat[data-pose="nap"] .cat-stage::after {
  content: 'z z z'; position: absolute; top: 2px; right: -2px;
  font-size: .62rem; letter-spacing: .18em; color: var(--ink-faint);
  animation: catZ 3s ease-in-out infinite;
}
@keyframes catZ { 0%,100% { opacity: .2; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  #cat { transition: none; }
  .cat-eyes, .cat-pupil, .cat-tail { animation: none !important; }
  #cat .cat-stage::after { animation: none; }
}

/* ---------- speech bubble ---------- */
.cat-bubble {
  max-width: 270px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px 16px 4px 16px; padding: .85rem 1rem;
  box-shadow: 0 26px 50px -26px rgba(28,26,21,.45);
  font-size: .87rem; line-height: 1.45; color: var(--ink);
  opacity: 0; transform: translateY(10px) scale(.95); transform-origin: bottom right;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none !important;
}
.cat-bubble.show { opacity: 1; transform: none; pointer-events: auto !important; }
.cat-bubble__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.cat-bubble__actions:empty { display: none; }
.cat-bubble__actions button {
  font-size: .74rem; font-weight: 600; padding: .38rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--paper); transition: all .2s;
}
.cat-bubble__actions button:hover { border-color: var(--brass); color: var(--ink); }
.cat-bubble__actions button:first-child { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cat-bubble__actions button:first-child:hover { background: #000; }

/* ---------- calm-mode escape hatch ---------- */
.cat-off {
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); background: rgb(250 247 240 / .82); border: 1px solid var(--line);
  border-radius: 999px; padding: .25rem .6rem; opacity: 0; transition: opacity .3s;
  backdrop-filter: blur(4px);
}
#cat:hover .cat-off { opacity: 1; }

@media (max-width: 620px) {
  #cat { right: 14px; bottom: 12px; }
  .cat-stage { width: 86px; height: 92px; }
  .cat-shadow-el { width: 54px; margin-left: -27px; }
  .cat-bubble { max-width: 212px; font-size: .82rem; }
}