@charset "UTF-8";
/**
 * @prop --ai-avatar-primary-color: Dominant color of the avatar — the body of the orb and the bulk of most gradients. Highest visual impact.
 * @prop --ai-avatar-accent-color: Secondary color used throughout the outline ring, internal reflections, and as the endpoints of the hover ring.
 * @prop --ai-avatar-orb-edge-color: Deep tint applied at the orb's outer edge, used to suggest depth where the body falls off.
 * @prop --ai-avatar-orb-inner-highlight-color: Color of the bright spot inside the orb. This spot rotates around the orb's interior during `thinking` mode.
 * @prop --ai-avatar-hover-ring-accent-color: Bright stop within the hover ring's gradient — the warm highlight that appears in the middle of the ring on hover.
 * @prop --ai-avatar-hover-glow-color: Color of the soft halo that fades in around the avatar on hover.
 * @prop --ai-avatar-stars-eyes-mouth-color: Color of the avatar's facial features (the two star-shaped eyes and the mouth). For the `minimal` variant, these default to `--contrast-100` when the color is defined (in Lime's apps, which are using Lime Elements). For the `outlined` variant they default to `currentColor`. Otherwise they fall back to white.
 */
:host(limel-ai-avatar) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  aspect-ratio: 1;
  max-width: 20rem;
  max-height: 20rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 5rem;
}

* {
  box-sizing: border-box;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

svg.variant-minimal {
  --limel-ai-avatar-stars-eyes-mouth-color: rgb(var(--contrast-100));
}

svg.variant-outlined {
  --limel-ai-avatar-stars-eyes-mouth-color: currentColor;
}

svg.variant-detailed .dark-ball,
svg.variant-detailed .light-ball {
  opacity: 0.8;
}

.variant-detailed .variant-minimal-body,
.variant-detailed .variant-solid-body {
  display: none;
}

.variant-minimal .ring-group {
  display: none;
}
.variant-minimal .variant-detailed-body,
.variant-minimal .variant-solid-body {
  display: none;
}

.variant-solid .ring-group,
.variant-outlined .ring-group {
  display: none;
}
.variant-solid .variant-detailed-body,
.variant-solid .variant-minimal-body,
.variant-outlined .variant-detailed-body,
.variant-outlined .variant-minimal-body {
  display: none;
}
.variant-solid .outer-ring,
.variant-outlined .outer-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 31;
}
.variant-solid .typing-ellipsis .circle,
.variant-outlined .typing-ellipsis .circle {
  fill: currentColor;
  --limel-ai-avatar-typing-dot-flash-color: currentColor;
}

.variant-solid .dark-ball {
  fill: currentColor;
}

.variant-outlined .dark-ball {
  fill: none;
  stroke: currentColor;
  stroke-width: 15;
}

.variant-minimal .glow-minimal {
  opacity: 0;
  transform: scale(0.9);
}
.variant-minimal .light-ball {
  opacity: 0;
}

.eye {
  transform-origin: 298px 360px;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, rotate;
}

.mouth {
  transform-origin: 379px 457px;
  opacity: 0;
  transform: scale(0.2);
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease;
  will-change: transform, opacity;
}

.eye-left {
  transform: translate(48px, 34px) scale(1.48);
}

.eye-right {
  transform: translate(152px, -74px) scale(0.66);
}

.glow-minimal,
.light-ball {
  transition: transform 1s ease, opacity 300ms ease;
  will-change: transform, opacity;
  transform-origin: 370px 370px;
  transform-box: view-box;
}

.outer-ring,
.ring,
.glow,
.glow-minimal {
  transform-origin: 370px 370px;
  transform-box: view-box;
}

.outer-ring {
  transform: scale(0.9);
  opacity: 0;
  transition: opacity 600ms ease, transform 700ms cubic-bezier(0.55, 0.3, 0.22, 1.54);
}

.ring,
.glow {
  scale: 0.95;
  opacity: 0;
  transition: opacity 600ms ease;
}

svg:hover .outer-ring {
  opacity: 0.9;
  transform: scale(1);
}
svg:hover .ring,
svg:hover .glow {
  opacity: 0.5;
}

.mode-active .eye-left,
.mode-thinking .eye-left,
.mode-typing .eye-left,
.mode-waiting .eye-left {
  transform: translate(0) scale(0.96);
}
.mode-active .eye-right,
.mode-thinking .eye-right,
.mode-typing .eye-right,
.mode-waiting .eye-right {
  transform: translate(156px, -20px) scale(0.8);
}
.mode-active .mouth,
.mode-thinking .mouth,
.mode-typing .mouth,
.mode-waiting .mouth {
  opacity: 1;
  transform: scale(1);
}
.mode-active.variant-minimal .light-ball,
.mode-thinking.variant-minimal .light-ball,
.mode-typing.variant-minimal .light-ball,
.mode-waiting.variant-minimal .light-ball {
  opacity: 0.16;
}

.mode-active .eye,
.mode-thinking .eye,
.mode-waiting .eye {
  animation: ai-avatar-blink 4.5s ease-in-out infinite;
}

.mode-thinking .eye-left {
  animation: ai-avatar-blink 4.5s ease-in-out infinite, ai-avatar-look-around-left-eye 9s ease-in-out infinite;
}
.mode-thinking .eye-right {
  animation: ai-avatar-blink 4.5s ease-in-out infinite, ai-avatar-look-around-right-eye 9s ease-in-out infinite;
}
.mode-thinking .mouth {
  animation: ai-avatar-mouth-look-around 9s ease-in-out infinite;
}
.mode-thinking .light-ball {
  animation: ai-avatar-light-ball-swirl 3s linear infinite;
}
.mode-thinking .glow-minimal {
  opacity: 0.3;
  animation: ai-avatar-breathing 5s ease-in-out infinite;
}

.mode-waiting .glow,
.mode-waiting .glow-minimal {
  animation: ai-avatar-breathing 5s ease-in-out infinite;
}
.mode-waiting .glow-minimal {
  opacity: 0.3;
}
.mode-waiting .outer-ring {
  animation: ai-avatar-mode-active-ring 2s ease-out infinite;
}
.mode-waiting.variant-minimal .outer-ring, .mode-waiting.variant-solid .outer-ring, .mode-waiting.variant-outlined .outer-ring {
  scale: 1.1;
}

.mode-active .glow-minimal {
  opacity: 0.3;
  transform: scale(1);
}

.mode-typing .eye-left {
  animation: ai-avatar-typing-left-eye 2.5s ease-in-out infinite;
}
.mode-typing .eye-right {
  animation: ai-avatar-typing-right-eye 2.5s ease-in-out infinite;
}
.mode-typing .mouth {
  animation: ai-avatar-typing-mouth 2.5s ease-in-out infinite;
}
.mode-typing .typing-ellipsis {
  opacity: 1;
  transform: scale(1);
}
.mode-typing .typing-ellipsis .circle {
  animation: ai-avatar-typing-dot 1.2s infinite;
}
.mode-typing .typing-ellipsis .circle:nth-of-type(2) {
  animation-delay: 0.2s;
}
.mode-typing .typing-ellipsis .circle:nth-of-type(3) {
  animation-delay: 0.4s;
}
.mode-typing.variant-minimal .light-ball {
  animation: ai-avatar-breathing 5s ease-in-out infinite;
}

.mode-working .eye-left {
  animation: ai-avatar-working-left-star 12s steps(50, end) infinite;
}
.mode-working .eye-right {
  animation: ai-avatar-working-right-star 4s steps(30, end) infinite reverse;
}
.mode-working .light-ball {
  animation: ai-avatar-light-ball-swirl 6s linear infinite;
}
.mode-working .outer-ring {
  opacity: 0.8;
  animation: ai-avatar-breathing 5s ease-in-out infinite;
}
.mode-working.variant-minimal .outer-ring, .mode-working.variant-solid .outer-ring, .mode-working.variant-outlined .outer-ring {
  scale: 1.1;
}
.mode-working.variant-minimal .light-ball {
  opacity: 0.16;
}

.typing-ellipsis {
  opacity: 0;
  transform-origin: 370px 620px;
  transform-box: view-box;
  scale: 2.2;
  transition: opacity 300ms ease, transform 300ms ease;
}
.typing-ellipsis .circle {
  fill: var(--ai-avatar-primary-color, rgb(var(--lime-brand-color-ocean-teal, 111, 205, 182)));
}

@keyframes ai-avatar-typing-dot {
  0% {
    transform: translateY(0);
  }
  6.25% {
    transform: translateY(-3px);
  }
  12.5% {
    transform: translateY(0);
    fill: var(--limel-ai-avatar-typing-dot-flash-color, var(--ai-avatar-accent-color, rgb(var(--lime-brand-color-aqua, 166, 239, 255))));
  }
  18.75% {
    transform: translateY(3px);
  }
  25% {
    transform: translateY(0);
  }
}
@keyframes ai-avatar-blink {
  0%, 93%, 99%, 100% {
    rotate: x 0deg;
  }
  96% {
    rotate: x 85deg;
  }
}
@keyframes ai-avatar-light-ball-swirl {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes ai-avatar-look-around-left-eye {
  0%, 15%, 95%, 100% {
    transform: translate(0) scale(0.96);
  }
  25%, 40% {
    transform: translate(65px, -40px) scale(1.004) rotate(-13deg);
  }
  55%, 70% {
    transform: translate(-67px, -91px) scale(0.72) rotate(29deg);
  }
}
@keyframes ai-avatar-look-around-right-eye {
  0%, 15%, 95%, 100% {
    transform: translate(156px, -20px) scale(0.8);
  }
  25%, 40% {
    transform: translate(203px, -92px) scale(0.76) rotate(-24deg);
  }
  55%, 70% {
    transform: translate(80px, -45px) scale(1) rotate(12deg);
  }
}
@keyframes ai-avatar-mouth-look-around {
  0%, 15%, 95%, 100% {
    transform: scale(1);
  }
  25%, 40% {
    transform: translate(75px, -40px) scale(1.004) rotate(-9deg);
  }
  55%, 70% {
    transform: translate(-99px, -45px) scale(1) rotate(9deg);
  }
}
@keyframes ai-avatar-typing-left-eye {
  0%, 100% {
    transform: translate(0, 80px) scale(0.94);
  }
  25% {
    transform: translate(12px, 80px) scale(0.94) rotate(-4deg);
  }
  75% {
    transform: translate(-12px, 80px) scale(0.94) rotate(4deg);
  }
}
@keyframes ai-avatar-typing-right-eye {
  0%, 100% {
    transform: translate(156px, 60px) scale(0.78);
  }
  25% {
    transform: translate(168px, 60px) scale(0.78) rotate(-5deg);
  }
  75% {
    transform: translate(144px, 60px) scale(0.78) rotate(5deg);
  }
}
@keyframes ai-avatar-typing-mouth {
  0%, 100% {
    transform: translate(0, 70px) scale(1);
  }
  25% {
    transform: translate(6px, 70px) scale(1);
  }
  75% {
    transform: translate(-6px, 70px) scale(1);
  }
}
@keyframes ai-avatar-working-left-star {
  0% {
    transform: translate(48px, 34px) scale(1.48) rotate(0deg);
  }
  100% {
    transform: translate(48px, 34px) scale(1.48) rotate(360deg);
  }
}
@keyframes ai-avatar-working-right-star {
  0% {
    transform: translate(152px, -74px) scale(0.66) rotate(0deg);
  }
  100% {
    transform: translate(152px, -74px) scale(0.66) rotate(360deg);
  }
}
@keyframes ai-avatar-mode-active-ring {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  30% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes ai-avatar-breathing {
  0%, 60%, 100% {
    transform: scale(0.9);
  }
  25% {
    transform: scale(1);
  }
}