.companion-mascot {
  display: inline-block;
  width: var(--mascot-size, 120px);
  height: var(--mascot-size, 120px);
  animation: companion-float 3s ease-in-out infinite;
}

.companion-mascot[data-state="pulse"] {
  animation: companion-pulse 2.4s ease-in-out infinite;
}

.companion-mascot[data-state="paused"] {
  filter: grayscale(1);
  opacity: 0.45;
  animation: none;
}

.companion-mascot[data-state="thinking"] {
  animation: none;
}

.companion-mascot svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes companion-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes companion-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}