/* ==========================================
   Avatar Component & CSS Variables
========================================== */

:root {
    --avatar-hero: 160px;
    --avatar-profile: 120px;
    --avatar-directory: 100%;
    --avatar-feed: 48px;
    --avatar-comment: 36px;
    --avatar-following: 44px;
    --avatar-notification: 40px;
    --avatar-navbar: 40px;
    --avatar-bottom-nav: 32px;
    --avatar-bot: 100%;
}

.avatar {
    position: relative;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: #f3f3f3;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Strict Container Frame Control: Image never controls container size */
.avatar img,
.avatar-badge img,
.bot-card-avatar-frame img,
.discovery-card-image-wrap img,
.header-avatar img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center top !important;
    flex-shrink: 0 !important;
}

/* ==========================================
   Discovery Card Avatar Frame
========================================== */
.avatar-directory {
    width: var(--avatar-directory);
    height: 220px;
    border-radius: 22px;
}

/* ==========================================
   Public Profile Avatar Frame
========================================== */
.avatar-profile {
    width: var(--avatar-profile);
    height: var(--avatar-profile);
    border-radius: 28px;
}

/* ==========================================
   Hero Avatar Frame
========================================== */
.avatar-hero {
    width: var(--avatar-hero);
    height: var(--avatar-hero);
    border-radius: 34px;
}

/* ==========================================
   Feed & Social Avatars
========================================== */
.avatar-feed {
    width: var(--avatar-feed);
    height: var(--avatar-feed);
    border-radius: 50%;
}

.avatar-comment {
    width: var(--avatar-comment);
    height: var(--avatar-comment);
    border-radius: 50%;
}

.avatar-following {
    width: var(--avatar-following);
    height: var(--avatar-following);
    border-radius: 50%;
}

.avatar-notification {
    width: var(--avatar-notification);
    height: var(--avatar-notification);
    border-radius: 50%;
}

.avatar-navbar {
    width: var(--avatar-navbar);
    height: var(--avatar-navbar);
    border-radius: 50%;
}

.avatar-bottom-nav {
    width: var(--avatar-bottom-nav);
    height: var(--avatar-bottom-nav);
    border-radius: 50%;
}