/*
 * Shared avatar component — used by both the admin and account portals.
 *
 * Two visual forms behind one shape:
 *   - Photo:    <img class="mm-avatar">           (object-fit cover, circular)
 *   - Initials: <span class="mm-avatar mm-avatar-initials ...">JD</span>
 *
 * Both are sized from the single custom property --mm-avatar-size (default
 * 1.75rem), which callers may override inline (MmAvatar.render's `size`
 * option) so one rule covers the 28px thread avatar, the ~32px header chip,
 * and the large profile-page control.
 *
 * Tint variants (MmAvatar.render's `tint` option):
 *   - .mm-avatar-initials--brand : the consistent brand tint for the personal
 *     ("me") avatar in the header and on the profile pages.
 *   - any .mm-status-* class     : role tint for the support thread — ring and
 *     initials drawn in the role colour via currentColor, transparent fill.
 *     (This replaces the old per-portal .support-sender-avatar rule.)
 *
 * Depends on the portal base stylesheets for the --mm-* custom properties
 * (both admin.css and account.css define the same dark-theme set).
 */

/* Shared shape/sizing for both the photo and the initials circle. */
.mm-avatar {
    --mm-avatar-size: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--mm-avatar-size);
    height: var(--mm-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    line-height: 1;
    vertical-align: middle;
}

/* Photo form: fill the circle without distortion. */
img.mm-avatar {
    object-fit: cover;
    background-color: var(--mm-bg-secondary);
}

/* Initials circle: the font scales with the avatar size so the same rule
   reads correctly from a 28px thread avatar up to a large profile control. */
.mm-avatar-initials {
    font-size: calc(var(--mm-avatar-size) * 0.42);
    font-weight: var(--mm-weight-bold);
    border: 1px solid currentColor;
    text-transform: uppercase;
}

/* Brand tint — the personal ("me") avatar. Explicit border/text colours (not
   currentColor) so the ring reads accent while the initials stay high-contrast
   against the faint accent fill. */
.mm-avatar-initials--brand {
    border-color: var(--mm-accent);
    background-color: rgba(0, 164, 228, 0.15);
    color: var(--mm-text-primary);
}

/* Pair an avatar with a name in a table/list cell (users lists, roster). The
   name block sits to the right of the avatar and may itself stack (a name over
   an email); min-width:0 lets that block ellipsize instead of overflowing. */
.mm-avatar-name {
    display: inline-flex;
    align-items: center;
    gap: var(--mm-space-sm);
    min-width: 0;
}

/* Layout for the profile-page upload/remove control: the current avatar next
   to its actions. Shared so both portals lay the control out identically. */
.mm-avatar-field {
    display: flex;
    align-items: center;
    gap: var(--mm-space-md);
    flex-wrap: wrap;
}

.mm-avatar-field-actions {
    display: flex;
    flex-direction: column;
    gap: var(--mm-space-sm);
    min-width: 0;
}

.mm-avatar-field-buttons {
    display: flex;
    gap: var(--mm-space-sm);
    flex-wrap: wrap;
}

/* The visually-hidden native file input is triggered by its labelled button. */
.mm-avatar-field-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}