/* ===== Avatar ===== */
/* Shared building blocks for user avatars on the main site (navbar user-menu
   dropdown + the /tai-khoan/ account page). Not used by the standalone chat
   app, which sizes its own avatar <img> via inline styles - see
   static/js/utils/avatar-render.js for why. */

/* Photo rendered by static/js/utils/avatar-render.js's renderAvatar() into
   any avatar container - the container itself (e.g. .navbar-user-avatar,
   .rn-account-header__avatar) still owns size/background/border/overflow. */
.rn-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reusable "change avatar" pencil badge overlaid on an avatar circle.
   Wired up generically by static/js/utils/avatar-upload.js via the
   [data-avatar-edit-btn] hook (any button with that attribute anywhere on
   the page gets bound). Used by: the navbar user-menu dropdown avatar and
   the /tai-khoan/ account page avatar.

   Rules are written as .rn-avatar-edit-wrap .rn-avatar-edit-btn (2 classes)
   rather than .rn-avatar-edit-btn alone so this always outranks a page's own
   generic "button" reset (e.g. navbar.css's ".navbar-user-menu button" once
   clobbered this badge's width/background/border via a 1-class+1-type
   selector beating a bare 1-class one). */

.rn-avatar-edit-wrap {
    position: relative;
    display: inline-flex;
}

.rn-avatar-edit-wrap .rn-avatar-edit-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    color: var(--gray-600);
    border: 1.5px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
}

.rn-avatar-edit-wrap .rn-avatar-edit-btn:hover {
    color: var(--primary-blue);
}