.bug {
  position: fixed;
  top: 0; left: 0;
  width: var(--bug-size);
  height: var(--bug-size);
  pointer-events: none;
  z-index: 40;
  filter: drop-shadow(0 8px 12px rgba(20,20,20,0.4));
  will-change: transform;
  transform: translate3d(0, 0, 0);
  color: var(--color-orange);
}

/* Claude Code SVG는 currentColor 또는 fill #D97757 사용 — 둘 다 작동 */
.bug svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* === 상태별 애니메이션 === */

@keyframes bug-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.05) rotate(-2deg); }
}
.bug.idle svg { animation: bug-breathe 2.5s ease-in-out infinite; }

@keyframes bug-wobble {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.bug.walk svg { animation: bug-wobble 0.3s ease-in-out infinite; }

@keyframes bug-sit-down {
  from { transform: scale(1.1) translateY(-4px); }
  to   { transform: scale(0.95) translateY(2px); }
}
.bug.sit svg {
  animation: bug-sit-down 0.3s ease-out forwards;
}

@keyframes bug-wink-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.2) rotate(8deg); filter: brightness(1.2); }
  60%  { transform: scale(1) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.bug.wink svg {
  animation: bug-wink-pulse 0.6s ease-out;
}

/* 말풍선 */
.bubble {
  position: fixed;
  background: var(--color-cream);
  color: var(--color-dark);
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 45;
  opacity: 0;
  transition: opacity var(--dur-fast);
  box-shadow: var(--shadow-warm);
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.bubble.show { opacity: 1; }
.bubble::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-cream);
  border-bottom: 0;
}