/*
|--------------------------------------------------------------------------
| APOM Talk – Runde Profil- und Gruppenbilder
|--------------------------------------------------------------------------
| Diese Datei wird nach chat.css, desktop.css und mobile.css geladen.
| Dadurch überschreibt sie ältere oder gerätespezifische Avatar-Regeln.
*/

/* Alle bekannten Avatar-Container konsequent quadratisch und rund halten. */
.avatar,
.avatar-large,
.member-avatar,
.private-user-search-avatar,
#active-conversation-avatar,
#group-info-avatar,
.conversation-item .avatar,
.group-member-row .avatar,
.member-search-result .avatar,
.private-user-search-result .avatar {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    background-clip: padding-box !important;
}

/* Bilder füllen den Kreis vollständig aus, ohne verzerrt zu werden. */
.avatar img,
.avatar-large img,
.member-avatar img,
.private-user-search-avatar img,
#active-conversation-avatar img,
#group-info-avatar img,
.conversation-item .avatar img,
.group-member-row .avatar img,
.member-search-result .avatar img,
.private-user-search-result .avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 50% !important;
}

/* Initialen-Fallback ebenfalls rund und vollständig ausfüllend. */
.avatar-initials,
.avatar .avatar-initials,
.avatar-large .avatar-initials,
#active-conversation-avatar .avatar-initials,
#group-info-avatar .avatar-initials {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    border-radius: 50% !important;
}

/* Mobile: verhindert, dass responsive Regeln die Bilder oval machen. */
@media (max-width: 720px), (pointer: coarse) {
    .chat-app .avatar,
    .chat-app .avatar-large,
    .chat-app .member-avatar,
    .chat-app .private-user-search-avatar,
    .chat-app #active-conversation-avatar,
    .chat-app #group-info-avatar,
    .chat-app .conversation-item .avatar {
        border-radius: 50% !important;
        aspect-ratio: 1 / 1 !important;
    }

    .chat-app .avatar img,
    .chat-app .avatar-large img,
    .chat-app .member-avatar img,
    .chat-app .private-user-search-avatar img,
    .chat-app #active-conversation-avatar img,
    .chat-app #group-info-avatar img,
    .chat-app .conversation-item .avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 50% !important;
    }
}