/* ============================================================
   Aurora Avatar System
   Complete avatar styles with fallback generation
   ============================================================ */

/* === Base Avatar === */
.aurora-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--aurora-gradient);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    user-select: none;
}

/* Sizes */
.aurora-avatar-xs { width: 24px; height: 24px; font-size: 10px; border-radius: 6px; }
.aurora-avatar-sm { width: 32px; height: 32px; font-size: 12px; border-radius: 8px; }
.aurora-avatar-md { width: 40px; height: 40px; font-size: 14px; border-radius: 10px; }
.aurora-avatar-lg { width: 56px; height: 56px; font-size: 18px; border-radius: 12px; }
.aurora-avatar-xl { width: 72px; height: 72px; font-size: 22px; border-radius: 14px; }
.aurora-avatar-2xl { width: 96px; height: 96px; font-size: 28px; border-radius: 16px; }

/* Shape variants */
.aurora-avatar-circle { border-radius: 50% !important; }
.aurora-avatar-rounded { border-radius: var(--aurora-radius) !important; }
.aurora-avatar-square { border-radius: 4px !important; }

/* Image inside avatar */
.aurora-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Status indicator */
.aurora-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    border: 2px solid var(--aurora-card);
    z-index: 1;
}
.aurora-avatar-status.online { background: #22c55e; }
.aurora-avatar-status.offline { background: #94a3b8; }
.aurora-avatar-status.busy { background: #ef4444; }

/* Avatar ring (highlight) */
.aurora-avatar-ring {
    box-shadow: 0 0 0 3px var(--aurora-card), 0 0 0 5px var(--aurora-primary);
}

/* Avatar group (stacked) */
.aurora-avatar-group {
    display: flex;
    align-items: center;
}
.aurora-avatar-group .aurora-avatar {
    margin-left: -8px;
    border: 2px solid var(--aurora-card);
    transition: transform 0.15s;
}
.aurora-avatar-group .aurora-avatar:first-child { margin-left: 0; }
.aurora-avatar-group .aurora-avatar:hover {
    transform: translateY(-2px);
    z-index: 1;
}
.aurora-avatar-group .aurora-avatar-more {
    background: var(--aurora-bg-alt);
    color: var(--aurora-text-muted);
    font-size: 11px;
    font-weight: 600;
}

/* === Color Palette for Generated Avatars === */
.aurora-avatar-color-0 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.aurora-avatar-color-1 { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.aurora-avatar-color-2 { background: linear-gradient(135deg, #14b8a6, #059669); }
.aurora-avatar-color-3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.aurora-avatar-color-4 { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.aurora-avatar-color-5 { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.aurora-avatar-color-6 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.aurora-avatar-color-7 { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.aurora-avatar-color-8 { background: linear-gradient(135deg, #84cc16, #65a30d); }
.aurora-avatar-color-9 { background: linear-gradient(135deg, #f97316, #ea580c); }

/* === Avatar in Comment === */
.aurora-comment .aurora-avatar,
.aurora-comment-child .aurora-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 14px;
}
.aurora-comment-list .aurora-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 11px;
}

/* === Avatar in Blogger Widget === */
.aurora-widget-blogger .aurora-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 24px;
    margin-bottom: 12px;
}

/* === Avatar in Navigation === */
.aurora-nav-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* === Dark Mode Adjustments === */
[data-theme="dark"] .aurora-avatar-group .aurora-avatar {
    border-color: var(--aurora-card);
}
[data-theme="dark"] .aurora-avatar-status {
    border-color: var(--aurora-card);
}

/* === Neon Style Glow === */
[data-style="neon"] .aurora-avatar-ring {
    box-shadow: 0 0 0 2px var(--aurora-card), 0 0 10px var(--aurora-primary);
}