/* ==========================================================================
   Hermes 宠物动画层 v2（2026-10-02）
   素材：hermes-idle / hermes-typing / hermes-walk .webp（320x320，12fps 循环）
   说明：狗本身已经在动画里动了（眨眼、耳朵、走路、咖啡热气），
        所以这里只做**轻微**的容器动效，避免"动+动"打架。
   ========================================================================== */

/* ---------- 悬浮球：轻微浮动（别盖过狗自身的动画）---------- */
.pet-ball {
  animation: petFloat 4.5s ease-in-out infinite;
  will-change: transform;
  overflow: visible;              /* 耳朵/光晕不被裁掉 */
}
@keyframes petFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-5px) scale(1.02); }
}

/* 动画帧铺满圆形球体（320x320 方图正好） */
.pet-ball img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* 金色呼吸光晕 */
.pet-ball::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,167,86,.34) 0%, transparent 70%);
  opacity: 0;
  animation: petGlow 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes petGlow {
  0%, 100% { opacity: 0; transform: scale(.94); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* 悬停：停下浮动，轻轻一提 */
.pet-ball:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.06);
}

/* ---------- 被点击：开心一跳 ---------- */
.pet-ball.happy { animation: petHappy .62s ease-out; }
@keyframes petHappy {
  0%   { transform: scale(1) translateY(0); }
  35%  { transform: scale(1.16) translateY(-14px) rotate(-7deg); }
  70%  { transform: scale(.97) translateY(0) rotate(4deg); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}

/* ---------- 待确认：红色提醒抖动 ---------- */
.pet-ball.need-confirm {
  border-color: var(--red);
  animation: petAlert .9s ease-in-out infinite;
}
@keyframes petAlert {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-5px) rotate(-8deg) scale(1.04); }
  65%      { transform: translateY(-2px) rotate(8deg) scale(1.02); }
}

/* ---------- 面板头像（小圆）---------- */
.pet-avatar { animation: petAvatarFloat 4s ease-in-out infinite; }
@keyframes petAvatarFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ---------- 聊天里的「正在输入」三点 ---------- */
.pet-typing {
  align-self: flex-start;
  background: var(--bg2);
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 12px 12px 12px 3px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.pet-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mut);
  display: block;
  animation: petDot 1.3s ease-in-out infinite;
}
.pet-typing i:nth-child(2) { animation-delay: .18s; }
.pet-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes petDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

/* ---------- 走路彩蛋：屏幕底部散步 ---------- */
.pet-walker {
  position: fixed;
  bottom: 8px;
  width: 84px;
  height: 84px;
  z-index: 89;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  animation: petWalkBob .5s ease-in-out infinite;
}
@keyframes petWalkBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* 移动端 */
@media (max-width: 520px) {
  .pet-walker { width: 66px; height: 66px; }
}

/* ---------- 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pet-ball, .pet-avatar, .pet-ball::after, .pet-typing i,
  .pet-ball.need-confirm, .pet-ball.happy, .pet-walker {
    animation: none !important;
  }
}