/* Default profile avatar styling with cosmic theme */
.avatar {
    --avatar-size: 36px;
    --avatar-border: 2px;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    border: var(--avatar-border) solid var(--avatar-border-color, #bd93f9);
    background: var(--avatar-bg, linear-gradient(135deg, #6b5ecd, #8257e5));
    box-shadow: 0 0 10px rgba(189, 147, 249, 0.5);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.avatar::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="15" r="0.8" fill="white" opacity="0.4"/><circle cx="30" cy="30" r="0.5" fill="white" opacity="0.3"/><circle cx="70" cy="40" r="0.6" fill="white" opacity="0.5"/></svg>');
    opacity: 0.3;
}

.avatar:hover {
    transform: scale(1.1);
    --avatar-border-color: #ff79c6;
    box-shadow: 0 0 15px rgba(255, 121, 198, 0.6);
}

.avatar-large {
    --avatar-size: 150px;
    --avatar-border: 3px;
    font-size: 60px;
}

.avatar-medium {
    --avatar-size: 80px;
    --avatar-border: 3px;
    font-size: 32px;
}

/* Avatar colors based on first letter */
.avatar[data-initial="A"], .avatar[data-initial="J"], .avatar[data-initial="S"] {
    --avatar-bg: linear-gradient(135deg, #ff5f6d, #ffc371);
}

.avatar[data-initial="B"], .avatar[data-initial="K"], .avatar[data-initial="T"] {
    --avatar-bg: linear-gradient(135deg, #36d1dc, #5b86e5);
}

.avatar[data-initial="C"], .avatar[data-initial="L"], .avatar[data-initial="U"] {
    --avatar-bg: linear-gradient(135deg, #c471ed, #f7797d);
}

.avatar[data-initial="D"], .avatar[data-initial="M"], .avatar[data-initial="V"] {
    --avatar-bg: linear-gradient(135deg, #84fab0, #8fd3f4);
}

.avatar[data-initial="E"], .avatar[data-initial="N"], .avatar[data-initial="W"] {
    --avatar-bg: linear-gradient(135deg, #a18cd1, #fbc2eb);
}

.avatar[data-initial="F"], .avatar[data-initial="O"], .avatar[data-initial="X"] {
    --avatar-bg: linear-gradient(135deg, #f093fb, #f5576c);
}

.avatar[data-initial="G"], .avatar[data-initial="P"], .avatar[data-initial="Y"] {
    --avatar-bg: linear-gradient(135deg, #5ee7df, #b490ca);
}

.avatar[data-initial="H"], .avatar[data-initial="Q"], .avatar[data-initial="Z"] {
    --avatar-bg: linear-gradient(135deg, #d4fc79, #96e6a1);
}

.avatar[data-initial="I"], .avatar[data-initial="R"] {
    --avatar-bg: linear-gradient(135deg, #13f1fc, #0470dc);
}