/**
 * Avatar — Shared styles for user avatars (image or initials fallback).
 *
 * Two render modes are produced by framework/ui/AvatarRenderer.js:
 *   <img class="kc-avatar">                                  — uploaded avatar
 *   <span class="kc-avatar kc-avatar-fallback kc-avatar-color-N"> — initials
 *
 * The container that places the avatar (message row, forum post, settings card)
 * is responsible for sizing via width/height (or width/height attrs on <img>).
 */

.kc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--kc-radius-full);
    flex-shrink: 0;
    object-fit: cover;
    overflow: hidden;
    color: #fff;
    font-family: var(--kc-font-title);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

img.kc-avatar {
    display: block;
    background: none;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.kc-avatar-fallback {
    user-select: none;
}

/* Hash-derived color classes for initials fallback. */
.kc-avatar-color-0 { background: linear-gradient(135deg, #00c78b, #059669); }
.kc-avatar-color-1 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.kc-avatar-color-2 { background: linear-gradient(135deg, #f59e0b, #b45309); }
.kc-avatar-color-3 { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.kc-avatar-color-4 { background: linear-gradient(135deg, #a855f7, #7e22ce); }
.kc-avatar-color-5 { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.kc-avatar-color-6 { background: linear-gradient(135deg, #ec4899, #be185d); }
.kc-avatar-color-7 { background: linear-gradient(135deg, #f97316, #c2410c); }