.avatar {
  display: inline-block;
  line-height: 0;
}

.avatar.avatar--xs {
  width: 1.25rem;
  height: 1.25rem;
}

.avatar.avatar--sm {
  width: 2rem;
  height: 2rem;
}

.avatar.avatar--md {
  width: 3rem;
  height: 3rem;
}

.avatar.avatar--lg {
  width: 6rem;
  height: 6rem;
}

.avatar__face {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.avatar__halo {
  fill: none;
  stroke: var(--ai-assistant-brand, #2563eb);
  stroke-width: 1.5;
  opacity: 0;
}

.avatar__bot {
  transform-box: view-box;
  transform-origin: 32px 61px;
}

.avatar__head {
  fill: var(--ai-assistant-avatar-shell, #f8fafc);
  stroke: var(--ai-assistant-avatar-outline, #cbd5e1);
  stroke-width: 1.2;
}

.avatar__screen {
  fill: var(--ai-assistant-avatar-screen, #1e293b);
  transition: opacity 0.3s ease;
}

.avatar__ear,
.avatar__body {
  fill: var(--ai-assistant-brand, #2563eb);
}

.avatar__bulb {
  fill: var(--ai-assistant-avatar-spark, var(--ai-assistant-brand, #2563eb));
}

.avatar__neck,
.avatar__leg {
  fill: var(--ai-assistant-avatar-outline, #cbd5e1);
}

.avatar__stem,
.avatar__limb {
  fill: none;
  stroke-linecap: round;
}

.avatar__stem {
  stroke: var(--ai-assistant-avatar-outline, #cbd5e1);
  stroke-width: 1.6;
}

.avatar__limb {
  stroke: var(--ai-assistant-brand, #2563eb);
  stroke-width: 3.6;
}

.avatar__hand {
  fill: var(--ai-assistant-avatar-shell, #f8fafc);
  stroke: var(--ai-assistant-avatar-outline, #cbd5e1);
  stroke-width: 1;
}

.avatar__core {
  fill: var(--ai-assistant-avatar-eye, #7dd3fc);
  animation: avatar-glow 2.4s infinite ease-in-out;
}

.avatar__eye {
  fill: var(--ai-assistant-avatar-eye, #7dd3fc);
  transform-box: fill-box;
  transform-origin: center;
  animation: avatar-blink 4.5s infinite;
}

.avatar__shine {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  animation: avatar-blink 4.5s infinite;
}

.avatar__lid,
.avatar__mouth {
  fill: none;
  stroke: var(--ai-assistant-avatar-eye, #7dd3fc);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.avatar__cheek {
  fill: var(--ai-assistant-avatar-cheek, #fb7185);
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.avatar__cheek--glow {
  opacity: 0.85;
}

.avatar__eyes {
  transition: transform 0.15s ease-out;
}

.avatar__antenna {
  transform-box: view-box;
  transform-origin: 32px 11px;
  transition: transform 0.4s ease;
}

.avatar__bulb {
  animation: avatar-glow 2.4s infinite ease-in-out;
}

.avatar__arm {
  transform-box: view-box;
  transition: transform 0.35s ease;
}

.avatar__arm--left {
  transform-origin: 22px 45px;
}

.avatar__arm--right {
  transform-origin: 42px 45px;
}

.avatar__arm--left.avatar__arm--up {
  transform: rotate(115deg);
}

.avatar__arm--right.avatar__arm--up {
  transform: rotate(-115deg);
}

.avatar__dots circle {
  fill: var(--ai-assistant-brand, #2563eb);
  animation: avatar-dot 1.2s infinite ease-in-out;
}

.avatar__dots circle:nth-child(2) {
  animation-delay: 0.2s;
}

.avatar__dots circle:nth-child(3) {
  animation-delay: 0.4s;
}

.avatar.avatar--celebrating .avatar__mouth {
  fill: var(--ai-assistant-avatar-eye, #7dd3fc);
}

.avatar.avatar--listening .avatar__halo {
  animation: avatar-pulse 1.6s infinite ease-out;
}

.avatar.avatar--thinking .avatar__bulb {
  animation-duration: 0.6s;
}

.avatar.avatar--thinking .avatar__eyes {
  transform: translate(0.8px, -0.8px);
}

.avatar.avatar--happy .avatar__bot {
  animation: avatar-bounce 0.6s ease-in-out 2;
}

.avatar.avatar--celebrating .avatar__bot {
  animation: avatar-bounce 0.5s ease-in-out 3;
}

.avatar.avatar--greeting .avatar__arm--right.avatar__arm--up {
  animation: avatar-wave 0.5s ease-in-out 4 0.35s;
}

.avatar.avatar--sad .avatar__antenna {
  transform: rotate(-35deg);
}

.avatar.avatar--sad .avatar__screen {
  opacity: 0.8;
}

.avatar.avatar--sad .avatar__bot {
  filter: saturate(0.55);
}

.avatar.avatar--sleepy .avatar__bot {
  animation: avatar-breathe 3.2s infinite ease-in-out;
}

.avatar.avatar--sleepy .avatar__bulb,
.avatar.avatar--sleepy .avatar__core {
  animation: none;
  opacity: 0.35;
}

@keyframes avatar-blink {
  0%,
  94%,
  100% {
    transform: scaleY(1);
  }
  97% {
    transform: scaleY(0.1);
  }
}

@keyframes avatar-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes avatar-pulse {
  from {
    opacity: 0.6;
    transform: scale(0.9);
  }
  to {
    opacity: 0;
    transform: scale(1.15);
  }
}

@keyframes avatar-bounce {
  50% {
    transform: translateY(-8%);
  }
}

@keyframes avatar-wave {
  0%,
  100% {
    transform: rotate(-115deg);
  }
  50% {
    transform: rotate(-90deg);
  }
}

@keyframes avatar-breathe {
  50% {
    transform: scale(0.97);
  }
}

@keyframes avatar-dot {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar__bot,
  .avatar__arm,
  .avatar__eye,
  .avatar__shine,
  .avatar__bulb,
  .avatar__core,
  .avatar__halo,
  .avatar__dots circle {
    animation: none !important;
  }
}