/* ============================================================
   avatar.css — AI-Do v4.0 animated avatar component styles
   ============================================================ */

/* Base container */
.avatar-component {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.avatar-component .avatar-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  overflow: visible;
}

/* ── Size variants ── */

.avatar-component--sidebar {
  width: 64px;
  height: 64px;
}

.avatar-component--welcome {
  width: 180px;
  height: 180px;
}

.avatar-component--header {
  width: 40px;
  height: 40px;
}

/* ── Hover interaction ── */

.avatar-component:hover {
  transform: scale(1.05);
}

.avatar-component--header:hover {
  transform: scale(1.1);
}

/* ── Drop shadow adjustments per size ── */

.avatar-component--welcome .avatar-svg {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

.avatar-component--header .avatar-svg {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* ── Smooth eyebrow transitions (set inline, but reinforce here) ── */

.avatar-component .eyebrow {
  transition: transform 0.3s ease;
}

/* ── Head group transition for breathing ── */

.avatar-component .head-group {
  transition: transform 0.1s linear;
}
