/* ═══════════════════════════════════════════════════════════════════
   Avatar Companion v1 — Floating JackyCat / JackyBot CSS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────────────── */

#jb-avatar {
  position: fixed;
  bottom: calc(var(--tabbar-h, 64px) + 80px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 64px;
  height: 64px;
  z-index: 350; /* below chat overlay (400) and tabbar (200) overlay */
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  transition: transform 0.2s ease, opacity 0.3s ease;
  will-change: transform;
}

#jb-avatar svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Size variants ───────────────────────────────────────────────── */
#jb-avatar[data-size="small"]  { width: 48px; height: 48px; }
#jb-avatar[data-size="medium"] { width: 64px; height: 64px; }
#jb-avatar[data-size="large"]  { width: 80px; height: 80px; }

/* ── Hide when chat overlay is open ──────────────────────────────── */
#jb-avatar.chat-is-open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}

/* ── State: idle — gentle breathing ──────────────────────────────── */
#jb-avatar[data-state="idle"] {
  animation: avatar-breathe 3s ease-in-out infinite;
}

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

/* ── State: thinking — gentle wobble ─────────────────────────────── */
#jb-avatar[data-state="thinking"] {
  animation: avatar-think 0.8s ease-in-out infinite;
}

@keyframes avatar-think {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}

/* ── State: talking — subtle bounce ──────────────────────────────── */
#jb-avatar[data-state="talking"] {
  animation: avatar-talk 0.4s ease-in-out infinite;
}

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

/* ── State: sleeping — slow drift ────────────────────────────────── */
#jb-avatar[data-state="sleeping"] {
  animation: avatar-sleep 4s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes avatar-sleep {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(2px) rotate(-5deg); }
}

/* Zzz float animation for cat */
#jb-avatar[data-state="sleeping"] .cat-zzz,
#jb-avatar[data-state="sleeping"] .bot-zzz {
  animation: zzz-float 2s ease-in-out infinite;
}

@keyframes zzz-float {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* ── State: celebrating — bounce + glow ──────────────────────────── */
#jb-avatar[data-state="celebrating"] {
  animation: avatar-celebrate 0.5s ease-in-out 3;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4))
          drop-shadow(0 0 12px rgba(251,191,36,0.5));
}

@keyframes avatar-celebrate {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-8px) scale(1.1); }
  60%      { transform: translateY(-4px) scale(1.05); }
}

/* Star twinkle */
#jb-avatar[data-state="celebrating"] .cat-stars,
#jb-avatar[data-state="celebrating"] .bot-stars {
  animation: stars-twinkle 0.6s ease-in-out infinite alternate;
}

@keyframes stars-twinkle {
  0%   { opacity: 0.5; transform: scale(0.8); }
  100% { opacity: 1;   transform: scale(1.1); }
}

/* ── State: error — shake ────────────────────────────────────────── */
#jb-avatar[data-state="error"] {
  animation: avatar-error 0.3s ease-in-out 2;
}

@keyframes avatar-error {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* Sweat drop drip */
#jb-avatar[data-state="error"] .cat-sweat,
#jb-avatar[data-state="error"] .bot-sweat {
  animation: sweat-drip 1s ease-in infinite;
}

@keyframes sweat-drip {
  0%   { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(6px); opacity: 0; }
}

/* ── Thinking dots pulse ─────────────────────────────────────────── */
#jb-avatar[data-state="thinking"] .cat-think circle:nth-child(1),
#jb-avatar[data-state="thinking"] .bot-think circle:nth-child(1) {
  animation: dot-pulse 1s ease-in-out 0s infinite;
}
#jb-avatar[data-state="thinking"] .cat-think circle:nth-child(2),
#jb-avatar[data-state="thinking"] .bot-think circle:nth-child(2) {
  animation: dot-pulse 1s ease-in-out 0.2s infinite;
}
#jb-avatar[data-state="thinking"] .cat-think circle:nth-child(3),
#jb-avatar[data-state="thinking"] .bot-think circle:nth-child(3) {
  animation: dot-pulse 1s ease-in-out 0.4s infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* ── Tail wag (talking state) ────────────────────────────────────── */
#jb-avatar[data-state="talking"] .cat-tail {
  animation: tail-wag 0.6s ease-in-out infinite;
  transform-origin: 16px 46px;
}

@keyframes tail-wag {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(15deg); }
}

/* ── Antenna blink rate changes ──────────────────────────────────── */
#jb-avatar[data-state="thinking"] .cat-antenna {
  animation: antenna-fast 0.4s ease-in-out infinite;
}

@keyframes antenna-fast {
  0%, 100% { opacity: 1; fill: #0a84ff; }
  50%      { opacity: 0.2; fill: #8fac8f; }
}

/* ── Blink animation (idle) ──────────────────────────────────────── */
#jb-avatar[data-state="idle"] .cat-eye-l,
#jb-avatar[data-state="idle"] .cat-eye-r {
  animation: eye-blink 4s ease-in-out infinite;
}

@keyframes eye-blink {
  0%, 90%, 100% { ry: 4; }
  95%           { ry: 0.5; }
}

/* ── Hover: perk up ──────────────────────────────────────────────── */
#jb-avatar:hover {
  filter: drop-shadow(0 2px 12px rgba(99,102,241,0.5));
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #jb-avatar,
  #jb-avatar[data-state="idle"],
  #jb-avatar[data-state="thinking"],
  #jb-avatar[data-state="talking"],
  #jb-avatar[data-state="sleeping"],
  #jb-avatar[data-state="celebrating"],
  #jb-avatar[data-state="error"] {
    animation: none !important;
  }

  #jb-avatar .cat-zzz, #jb-avatar .bot-zzz,
  #jb-avatar .cat-stars, #jb-avatar .bot-stars,
  #jb-avatar .cat-sweat, #jb-avatar .bot-sweat,
  #jb-avatar .cat-think, #jb-avatar .bot-think,
  #jb-avatar .cat-tail, #jb-avatar .cat-eye-l,
  #jb-avatar .cat-eye-r, #jb-avatar .cat-antenna {
    animation: none !important;
  }

  /* Just simple opacity transitions */
  #jb-avatar {
    transition: opacity 0.3s ease;
  }
}