/* ==============================
   ZÁKLADNÝ ŠTÝL AVATARA
   ============================== */
.ai-avatar {
  /* dynamická veľkosť — riadená cez PHP (data-size) alebo JS */
  --ai-avatar-size: 100px;

  position: relative;
  width: var(--ai-avatar-size);
  height: var(--ai-avatar-size);
  display: none; /* defaultne skryté (napr. pri kontaktnom formulári) */
}

/* zobrazí sa, keď JS pridá triedu .is-visible */
.ai-avatar.is-visible {
  display: block;
}

/* ==============================
   VNÚTORNÉ PRVKY
   ============================== */

/* hlavný obrázok (tvár avatara) */
.ai-avatar__img {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 50%; /* voliteľné – ak má byť kruhový */
}

/* loader ring */
.ai-avatar__ring {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0; /* neviditeľné, kým avatar „nemyslí“ */
  transition: opacity 0.25s ease;
  animation: ai-spin 1.6s linear infinite;
  will-change: transform, opacity;
}

/* zapnutie počas myslenia */
.ai-avatar.thinking .ai-avatar__ring {
  opacity: 1;
}

/* ==============================
   VARIANTY PODĽA VEĽKOSTI
   ============================== */

/* menší avatar – dlhšia rotácia, nech nepôsobí rýchlo */
.ai-avatar[style*="--ai-avatar-size: 40px"] .ai-avatar__ring {
  animation-duration: 2.2s;
}

/* ešte menšie – ešte pomalšie */
.ai-avatar[style*="--ai-avatar-size: 30px"] .ai-avatar__ring {
  animation-duration: 2.6s;
}

/* ==============================
   ANIMÁCIE
   ============================== */
@keyframes ai-spin {
  to {
    transform: rotate(360deg);
  }
}

/* preferencia používateľa – vypnutá animácia */
@media (prefers-reduced-motion: reduce) {
  .ai-avatar__ring {
    animation: none;
  }
}

/* ==============================
   DOPLNKOVÉ STAVY (ak ich budeš chcieť neskôr)
   ============================== */
.ai-avatar.is-success .ai-avatar__ring {
  opacity: 0;
}

.ai-avatar.is-error .ai-avatar__ring {
  opacity: 0;
  filter: hue-rotate(-45deg);
}