/* ═══════════════════════════════════════════════
   Ákotí Avatar — Pure CSS

   Image:    <div class="akoti-avatar"><img src="photo.jpg" alt=""></div>
   Initials: <div class="akoti-avatar" data-initials="AO"></div>
   Icon:     <div class="akoti-avatar">👤</div>

   Sizes:  .xs (20px), .sm (28px), default (36px), .lg (48px), .xl (64px)
   Group:  <div class="akoti-avatar-group">...avatars...</div>
   Status: <div class="akoti-avatar online">...</div>
   ═══════════════════════════════════════════════ */

.akoti-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px 4px 12px 4px;
  background: #1a2f5e;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.akoti-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Initials from data attribute */
.akoti-avatar[data-initials]::after {
  content: attr(data-initials);
}

/* Sizes */
.akoti-avatar.xs { width: 20px; height: 20px; font-size: 9px; border-radius: 6px 2px 6px 2px; }
.akoti-avatar.sm { width: 28px; height: 28px; font-size: 11px; border-radius: 8px 3px 8px 3px; }
.akoti-avatar.lg { width: 48px; height: 48px; font-size: 18px; border-radius: 16px 6px 16px 6px; }
.akoti-avatar.xl { width: 64px; height: 64px; font-size: 24px; border-radius: 20px 8px 20px 8px; }

/* Color variants */
.akoti-avatar.blue    { background: #1a2f5e; }
.akoti-avatar.pink    { background: #e8b4b8; color: #1e1e24; }
.akoti-avatar.bronze  { background: #CD7F32; }
.akoti-avatar.baby    { background: #a8c8e8; color: #0f1b3d; }
.akoti-avatar.green   { background: #2e7d32; }
.akoti-avatar.amber   { background: #e65100; }

/* Status indicator */
.akoti-avatar.online::before,
.akoti-avatar.offline::before,
.akoti-avatar.busy::before {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid white;
  z-index: 1;
}
.akoti-avatar.online::before  { background: #4caf50; }
.akoti-avatar.offline::before { background: #8a8a96; }
.akoti-avatar.busy::before    { background: #f44336; }

/* Avatar Group (stacked) */
.akoti-avatar-group {
  display: flex;
  align-items: center;
}

.akoti-avatar-group .akoti-avatar {
  margin-left: -10px;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.akoti-avatar-group .akoti-avatar:first-child { margin-left: 0; }

/* Overflow count */
.akoti-avatar-group .akoti-avatar-more {
  background: #f0f2f5;
  color: #5f6368;
  font-size: 11px;
  font-weight: 600;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .akoti-avatar { box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); }
  :root:not([data-theme="light"]) .akoti-avatar.online::before,
  :root:not([data-theme="light"]) .akoti-avatar.offline::before,
  :root:not([data-theme="light"]) .akoti-avatar.busy::before { border-color: #1e1e24; }
  :root:not([data-theme="light"]) .akoti-avatar-group .akoti-avatar { border-color: #1e1e24; }
  :root:not([data-theme="light"]) .akoti-avatar-group .akoti-avatar-more { background: #2a2a32; color: #9a9aa6; }
}