/* ============================================
   GLOBAL AVATAR STYLES - Consistent Design
   ============================================ */

/* Base avatar container styles */
.profile-avatar,
.feed-avatar,
.user-avatar,
.blocked-user-avatar,
.notification-avatar,
.current-avatar,
.header-user-avatar,
.user-result-avatar,
.sender-avatar,
.friend-avatar {
    position: relative;
    border-radius: 50% !important;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #64748b, #475569) !important;
    text-decoration: none !important;
}

/* Avatar images */
.profile-avatar img,
.feed-avatar img,
.user-avatar img,
.blocked-user-avatar img,
.notification-avatar img,
.current-avatar img,
.header-user-avatar img,
.user-result-avatar img,
.sender-avatar img,
.friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Avatar initials - Consistent styling for all sizes */
.profile-avatar-initial,
.feed-avatar-initial,
.user-avatar-initial,
.blocked-user-avatar-initial,
.notification-avatar-initial,
.current-avatar > span,
.header-user-avatar-initial,
.user-result-initial,
.sender-avatar > span,
.friend-avatar > span {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #64748b, #475569) !important;
    border-radius: 50% !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* Size-specific font sizes */
/* Large avatars (80px+) */
.profile-avatar-initial,
.profile-avatar > span {
    font-size: 42px !important;
}

/* Medium avatars (40-60px) */
.feed-avatar-initial,
.feed-avatar > span,
.blocked-user-avatar-initial,
.blocked-user-avatar > span,
.user-result-initial,
.user-result-avatar > span,
.friend-avatar > span {
    font-size: 20px !important;
}

/* Small avatars (32-40px) */
.user-avatar-initial,
.user-avatar > span,
.notification-avatar-initial,
.notification-avatar > span,
.sender-avatar > span {
    font-size: 16px !important;
}

/* Extra small avatars (28px or less) */
.header-user-avatar-initial,
.header-user-avatar > span {
    font-size: 14px !important;
}

/* Settings page avatar */
.current-avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #64748b, #475569) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.current-avatar > span {
    color: white !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #64748b, #475569) !important;
    border-radius: 50% !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .profile-avatar-initial,
    .profile-avatar > span {
        font-size: 36px !important;
    }
    
    .feed-avatar-initial,
    .feed-avatar > span,
    .friend-avatar > span {
        font-size: 18px !important;
    }
    
    .user-avatar-initial,
    .user-avatar > span {
        font-size: 14px !important;
    }
}

@media (max-width: 600px) {
    .profile-avatar-initial,
    .profile-avatar > span {
        font-size: 28px !important;
    }
    
    .feed-avatar-initial,
    .feed-avatar > span,
    .friend-avatar > span {
        font-size: 16px !important;
    }
    
    .user-avatar-initial,
    .user-avatar > span,
    .notification-avatar-initial,
    .notification-avatar > span {
        font-size: 13px !important;
    }
}

/* Stacked avatars (for grouped notifications) */
.notification-avatar-stacked {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #64748b, #475569) !important;
    overflow: hidden !important;
    position: absolute !important;
    top: 2px !important;
    border: 2px solid white !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.notification-avatar-stacked img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Excludem .notification-gift-avatar – iconul de cadou (emoji) are stiluri în header-inline.css */
.notification-avatar-stacked .notification-avatar-initial:not(.notification-gift-avatar),
.notification-avatar-stacked > span:not(.notification-gift-avatar) {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: white !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #64748b, #475569) !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Avatar with custom profile colors */
.profile-avatar-initial.color-cyan {
    background: linear-gradient(135deg, #0891b2, #22d3ee);
}

.profile-avatar-initial.color-blue {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
}

.profile-avatar-initial.color-green {
    background: linear-gradient(135deg, #059669, #10b981);
}

.profile-avatar-initial.color-purple {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.profile-avatar-initial.color-pink {
    background: linear-gradient(135deg, #db2777, #ec4899);
}

.profile-avatar-initial.color-red {
    background: linear-gradient(135deg, #dc2626, #ef4444);
}

.profile-avatar-initial.color-orange {
    background: linear-gradient(135deg, #ea580c, #f97316);
}

.profile-avatar-initial.color-teal {
    background: linear-gradient(135deg, #0d9488, #14b8a6);
}

.profile-avatar-initial.color-violet {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.profile-avatar-initial.color-rose {
    background: linear-gradient(135deg, #e11d48, #fb7185);
}

.profile-avatar-initial.color-gold {
    background: linear-gradient(135deg, #d97706, #fbbf24);
    box-shadow: 0 0 10px rgba(251,191,36,0.5);
}

.profile-avatar-initial.color-rainbow {
    background: linear-gradient(135deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6, #ec4899);
    animation: rainbow-spin 3s linear infinite;
}

@keyframes rainbow-spin {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}