/* Global Profile Image Styles - Make profile images rounded rectangles WITHOUT forcing sizes */

/* Universal rounded rectangle styling - ONLY border-radius and object-fit */
.profile-image,
.profile-avatar,
.user-avatar,
.avatar,
.avatar-image,
.rounded-circle,
.bc-profile-image,
img[alt*="Profile"],
img[alt*="profile"],
img[alt*="Avatar"],
img[alt*="avatar"],
img.profile-image,
img.profile-avatar,
img.user-avatar,
img.bc-profile-image {
    border-radius: 12px !important;
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
    display: block !important;
}

/* News Feed specific profile images - keep existing sizes */
.news-feed-post .profile-image,
.news-feed-post img[alt*="profile" i],
.post-header img[alt*="profile" i],
.comment-avatar img,
.user-info img[alt*="profile" i],
.author-avatar img {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Account Settings profile images - keep existing sizes */
.profile-image-container img,
.profile-image-upload img,
.settings-profile-image {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Sidebar profile images - keep existing sizes */
.unified-sidebar .profile-avatar,
.sidebar-profile img,
.profile-avatar.large {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Business Connect profile images - OVERRIDE: Large half-card size for networking cards */
.business-connect-page .profile-image,
.profile-card .profile-image,
.connection-card img,
.bc-profile-image,
.bc-profile-image-wrapper img,
#bcCurrentProfileImage,
.cards-container .profile-avatar,
.cards-container .profile-image,
#cardsContainer .profile-avatar,
#cardsContainer .profile-image,
.profile-card .profile-avatar {
    border-radius: 12px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    position: relative !important;
    border: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Business Connect back card images - OVERRIDE: Keep small thumbnail size */
.profile-card-back img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

/* Additional messaging and call modal overrides */
.conversation-avatar img,
.thread-contact-avatar img,
.contact-avatar img,
.profile-image {
    border-radius: 12px !important;
}

/* Business Connect placeholder avatars - Large half-card size */
.business-connect-page .avatar-placeholder,
.profile-card .avatar-placeholder,
.cards-container .avatar-placeholder,
#cardsContainer .avatar-placeholder {
    border-radius: 12px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    position: relative !important;
    border: none !important;
    min-height: 100% !important;
}

/* Business Connect cover images - keep rectangular */
#bcCurrentCoverImage,
.bc-cover-image {
    border-radius: 12px !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 140px !important;
}

/* Admin panel user avatars - keep existing sizes */
.admin-panel .user-avatar,
.users-table img[alt*="avatar" i],
.provider-avatar {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Message/Chat avatars - keep existing sizes */
.message-avatar img,
.chat-avatar,
.conversation-avatar {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Profile page main avatar - keep existing sizes */
.profile-page .profile-avatar,
.profile-header .avatar,
.user-profile-main img {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Placeholder avatars with initials */
.avatar-placeholder,
.avatar-initials,
.profile-placeholder {
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e0e0e0 !important;
    color: #666666 !important;
    font-weight: 600 !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .news-feed-post .profile-image,
    .post-header img {
        width: 35px !important;
        height: 35px !important;
    }
    
    .profile-image-container img:not(.main-profile-image):not(.business-connect-page .profile-image):not(.profile-card .profile-image):not(.profile-card-front .profile-image-container img),
    .settings-profile-image {
        width: 100px !important;
        height: 100px !important;
    }
    
    .profile-page .profile-avatar {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .news-feed-post .profile-image,
    .post-header img {
        width: 30px !important;
        height: 30px !important;
    }
    
    .profile-image-container img:not(.main-profile-image):not(.business-connect-page .profile-image):not(.profile-card .profile-image):not(.profile-card-front .profile-image-container img),
    .settings-profile-image {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Fix any stretched or distorted images */
img[src*="profile"],
img[src*="avatar"] {
    object-fit: cover !important;
    aspect-ratio: 1 !important;
}

/* Extra specific fix for Business Connect settings modal profile image */
#bcCurrentProfileImage,
.bc-profile-image-wrapper .bc-profile-image {
    min-width: 120px !important;
    max-width: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Ensure hover effects maintain rounded rectangle shape */
.profile-image:hover,
.profile-avatar:hover,
.user-avatar:hover {
    border-radius: 12px !important;
    transform: scale(1.05);
    transition: transform 0.2s ease;
}