/* 灰色缅因 — 动态层 */

.cat-hit {
  position: relative;
  width: 168px;
  height: 168px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: grab;
  -webkit-app-region: no-drag;
  app-region: no-drag;
  filter: drop-shadow(0 14px 18px rgba(20, 24, 28, 0.28));
}

.cat-hit:active,
.cat-hit.is-dragging {
  cursor: grabbing;
}

.cat-hit:focus-visible {
  outline: 2px solid rgba(154, 160, 168, 0.8);
  outline-offset: 4px;
  border-radius: 50%;
}

.cat-shadow {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 78px;
  height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(20, 24, 28, 0.28), transparent 70%);
  pointer-events: none;
}

.maine {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.part-body,
.part-head,
.part-tail {
  transform-box: fill-box;
  transform-origin: center;
}

.part-tail {
  transform-origin: 120px 128px;
}

.ear {
  transform-box: fill-box;
  transform-origin: bottom center;
}

.eye .lid {
  transform-box: fill-box;
  transform-origin: top center;
}

/* idle */
.mood-idle .part-body {
  animation: breathe 3.2s ease-in-out infinite;
}

.mood-idle .part-head {
  animation: head-bob 3.2s ease-in-out infinite;
}

.mood-idle .part-tail {
  animation: tail-sway 2.6s ease-in-out infinite;
}

.mood-idle .ear-l {
  animation: ear-twitch 5.5s ease-in-out infinite;
}

.mood-idle .ear-r {
  animation: ear-twitch 5.5s ease-in-out infinite 0.4s;
}

.mood-idle .eyes {
  animation: blink 5.2s step-end infinite;
}

.mood-idle .whiskers {
  animation: whisk 3.4s ease-in-out infinite;
}

.mood-idle .cat-shadow {
  animation: shadow-pulse 3.2s ease-in-out infinite;
}

/* open chat — slight attention */
.mood-open .part-head {
  animation: look-up 0.45s ease-out forwards;
}

.mood-open .part-tail {
  animation: tail-sway 1.8s ease-in-out infinite;
}

.mood-open .mouth {
  d: path("M88 125c4 5 12 5 16 0");
}

/* thinking */
.mood-thinking .part-head {
  animation: think-tilt 0.8s ease-in-out infinite alternate;
}

.mood-thinking .part-tail {
  animation: tail-fast 0.7s ease-in-out infinite;
}

.mood-thinking .think-kit {
  animation: think-fade 0.25s ease-out forwards;
}

.mood-thinking .think-paw {
  animation: paw-tap 0.7s ease-in-out infinite;
}

.mood-thinking .d1 {
  animation: dot 0.9s ease-in-out infinite;
}

.mood-thinking .d2 {
  animation: dot 0.9s ease-in-out infinite 0.15s;
}

.mood-thinking .d3 {
  animation: dot 0.9s ease-in-out infinite 0.3s;
}

.mood-thinking .pupil {
  animation: pupil-shift 0.8s ease-in-out infinite alternate;
}

@keyframes breathe {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  50% {
    transform: translateY(-2px) scale(1.02, 0.985);
  }
}

@keyframes head-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes tail-sway {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(14deg);
  }
}

@keyframes tail-fast {
  0%,
  100% {
    transform: rotate(-16deg);
  }
  50% {
    transform: rotate(18deg);
  }
}

@keyframes ear-twitch {
  0%,
  88%,
  100% {
    transform: rotate(0);
  }
  90% {
    transform: rotate(-8deg);
  }
  93% {
    transform: rotate(5deg);
  }
}

@keyframes blink {
  0%,
  42%,
  46%,
  100% {
    opacity: 1;
  }
}

.mood-idle .eye .lid {
  animation: lid 5.2s linear infinite;
}

@keyframes lid {
  0%,
  42%,
  46%,
  100% {
    opacity: 0;
    transform: scaleY(0.15);
  }
  44% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes whisk {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1px);
  }
}

@keyframes shadow-pulse {
  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) scaleX(0.88);
    opacity: 0.55;
  }
}

@keyframes look-up {
  to {
    transform: translateY(-4px) rotate(-2deg);
  }
}

@keyframes think-tilt {
  from {
    transform: rotate(-6deg) translateY(-2px);
  }
  to {
    transform: rotate(4deg) translateY(-4px);
  }
}

@keyframes think-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes paw-tap {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  50% {
    transform: translate(-2px, -4px) rotate(-8deg);
  }
}

@keyframes dot {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes pupil-shift {
  from {
    transform: translateX(-1px);
  }
  to {
    transform: translateX(1.5px);
  }
}