/* Copied verbatim from PR 625 head 14e9e2347,
 * frontend/src/features/workspace/shell/agent-avatar/agentAvatar.css. Re-copy, don't edit. */
/*
 * <AgentAvatar> motion. SVG transforms here are in viewBox units (the avatar is a 100×100 box).
 * Every animated group is an INNER group, so its CSS transform never overrides the positioning
 * `transform` attribute on its parent.
 */
.aa {
  display: block;
  flex: none;
  overflow: visible;
}
.aa-bob {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.aa--idle .aa-bob {
  animation: aa-bob 3.6s ease-in-out infinite;
}
.aa--working .aa-bob {
  animation: aa-bob 0.8s ease-in-out infinite;
}
.aa--thinking .aa-bob {
  animation: aa-sway 2.6s ease-in-out infinite;
}
.aa--done .aa-bob {
  animation: aa-hop 0.9s ease-out 2;
}
.aa-eyes {
  transform-box: fill-box;
  transform-origin: center;
}
.aa--idle .aa-eyes,
.aa--thinking .aa-eyes,
.aa--waiting .aa-eyes {
  animation: aa-blink 5.5s infinite;
  animation-delay: var(--aa-blink-delay, 0s);
}
.aa-orbit {
  animation: aa-spin 1.8s linear infinite;
}
.aa-wheel {
  animation: aa-roll 2.2s ease-in-out infinite alternate;
}
.aa-wheel-spokes {
  transform-box: fill-box;
  transform-origin: center;
  animation: aa-spin 0.7s linear infinite;
}
.aa-bubble {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: aa-pop 1.3s ease-in-out infinite;
}
.aa-burst {
  transform-box: fill-box;
  transform-origin: center;
  animation: aa-burst 1.2s ease-out 1 both;
}
.aa-ring--waiting {
  animation: aa-pulse 1.4s ease-in-out infinite;
}

@keyframes aa-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes aa-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
@keyframes aa-hop {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  30% {
    transform: translateY(-6px) scale(0.96, 1.04);
  }
  60% {
    transform: translateY(0) scale(1.04, 0.96);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes aa-blink {
  0%,
  94%,
  100% {
    transform: scaleY(1);
  }
  97% {
    transform: scaleY(0.12);
  }
}
@keyframes aa-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes aa-roll {
  from {
    transform: translateX(-7px);
  }
  to {
    transform: translateX(5px);
  }
}
@keyframes aa-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-3px) scale(1.06);
  }
}
@keyframes aa-burst {
  0% {
    transform: scale(0) rotate(-40deg);
    opacity: 0;
  }
  45% {
    transform: scale(1.3) rotate(8deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes aa-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.aa--still *,
.aa--still {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .aa,
  .aa * {
    animation: none !important;
  }
}