/* ============================================
   AVATAR COMPONENT — Unified Size System
   Replaces fragmented avatar CSS across:
   - progress.css (.lb-avatar, .podium-avatar)
   - dashboard.css (.story-avatar)
   - chat-panel.css (.contact-avatar, .message-avatar)
   ============================================ */

/* Size Tokens */
:root {
    --avatar-xs: 24px;
    --avatar-sm: 32px;
    --avatar-md: 40px;
    --avatar-lg: 56px;
    --avatar-xl: 80px;
}

/* Base Avatar */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 1;
    width: var(--avatar-md);
    height: var(--avatar-md);
    background: var(--color-glass-bg);
    border: 2px solid var(--color-glass-border);
    transition: transform 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
}

.avatar img,
.avatar svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Initials Fallback */
.avatar--initials {
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.85em;
    text-transform: uppercase;
    user-select: none;
}


/* ============================================
   SIZE MODIFIERS
   ============================================ */

.avatar--xs {
    width: var(--avatar-xs);
    height: var(--avatar-xs);
    border-width: 1px;
    font-size: 0.6rem;
}

.avatar--sm {
    width: var(--avatar-sm);
    height: var(--avatar-sm);
    border-width: 2px;
    font-size: 0.7rem;
}

.avatar--md {
    width: var(--avatar-md);
    height: var(--avatar-md);
    border-width: 2px;
}

.avatar--lg {
    width: var(--avatar-lg);
    height: var(--avatar-lg);
    border-width: 3px;
    font-size: 1.2rem;
}

.avatar--xl {
    width: var(--avatar-xl);
    height: var(--avatar-xl);
    border-width: 3px;
    font-size: 1.6rem;
}


/* ============================================
   BORDER / GLOW VARIANTS
   ============================================ */

.avatar--primary {
    border-color: var(--color-primary);
}

.avatar--gold {
    border-color: #D4A94C;
    box-shadow: 0 0 20px rgba(212, 169, 76, 0.3);
}

.avatar--silver {
    border-color: #A8B0B8;
    box-shadow: 0 0 16px rgba(168, 176, 184, 0.2);
}

.avatar--bronze {
    border-color: #B8956A;
    box-shadow: 0 0 16px rgba(184, 149, 106, 0.2);
}

.avatar--instructor {
    border-color: var(--color-accent-gold);
}

.avatar--no-border {
    border: none;
}


/* ============================================
   STATUS DOT (composable)
   ============================================ */

.avatar-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.avatar-wrapper .status-dot {
    position: absolute;
    bottom: 2px;
    inset-inline-end: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-bg);
    z-index: 2;
}


/* ============================================
   AVATAR STACK (overlapping)
   ============================================ */

.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-stack .avatar {
    margin-inline-start: -8px;
    box-shadow: 0 0 0 2px var(--color-surface, var(--color-bg));
}

.avatar-stack .avatar:first-child {
    margin-inline-start: 0;
}


/* ============================================
   LIGHT MODE
   ============================================ */

[data-theme="light"] .avatar {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .avatar--primary {
    border-color: var(--color-primary);
}

[data-theme="light"] .avatar--gold {
    border-color: #D4A94C;
    box-shadow: 0 0 12px rgba(212, 169, 76, 0.15);
}

[data-theme="light"] .avatar--silver {
    border-color: #A8B0B8;
    box-shadow: 0 0 10px rgba(168, 176, 184, 0.12);
}

[data-theme="light"] .avatar--bronze {
    border-color: #B8956A;
    box-shadow: 0 0 10px rgba(184, 149, 106, 0.12);
}

[data-theme="light"] .avatar--instructor {
    border-color: var(--color-accent-gold);
}

[data-theme="light"] .avatar-wrapper .status-dot {
    border-color: #fff;
}