/**
 * Shared avatar image styling.
 *
 * Loaded on every surface that renders avatars (standalone chat page, admin
 * panel, Amby Teams). Deliberately narrow: it styles ONLY the `<img>` that
 * `paintAvatar()` injects into an existing avatar circle, plus the modifier
 * class that marks the circle as image-backed.
 *
 * Scoping note (CLAUDE.md rule 2): these selectors are keyed on the
 * feature-specific `.avatar-image` / `.avatar--has-image` classes, which exist
 * nowhere else in the codebase and are only ever created by
 * `frontend/js/shared/avatar-utils.js`. The size, shape and position always come
 * from the HOST circle (`.teams-avatar`, `.user-avatar`,
 * `.session-participant-avatar`, …) — this file never sets a width or a
 * border-radius on a container, so it cannot fight an existing panel's rules.
 */

/* The image fills whatever circle it was painted into and keeps faces centred
   regardless of the host element's aspect ratio. The backend already delivers a
   square centre-crop, so `object-fit` here is belt-and-braces for hosts that are
   not perfectly square. */
.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;   /* circle or rounded-rect, whatever the host uses */
}

/* Self-sized variant, for hosts that are NOT themselves the avatar circle (the
   chat-page and admin headers, where `.user-avatar` is a wide flex row). The
   pixel size is set inline by `createAvatarImage({ sizePx })` so it matches
   whatever icon it replaces; only shape and flex behaviour come from here. */
.avatar-image--inline {
    width: auto;
    height: auto;
    border-radius: 50%;
    flex: 0 0 auto;
}

/* An image-backed circle drops the initials' background tint and padding so the
   photo is not framed by a coloured ring. */
.avatar--has-image {
    background: transparent !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Keep any decorative overlay (presence dot, tooltip) above the photo. */
.avatar--has-image::after,
.avatar--has-image::before {
    z-index: 2;
}

/* ── Split tile: a group conversation with no image of its own ───────────────
   Two participants' faces sharing one circle, the familiar chat-app treatment.
   Built by `paintConversationAvatar` / `conversationAvatarHtml` in
   avatar-utils.js — the same two functions the chat header and the Recent
   Sessions list both render through, which is what keeps them identical.

   Scoping: `.avatar-split` is created only by those functions, like the classes
   above. The circle's SIZE still comes entirely from the host, so this drops
   into any existing avatar slot without knowing how big it is. */
.avatar-split {
    display: flex;
    overflow: hidden;
    /* Padding would inset the halves and leave a ring of host background
       around them instead of a clean split. */
    padding: 0 !important;
    /* The host's BACKGROUND AND COLOUR ARE DELIBERATELY KEPT. Every circle
       this drops into already carries a tint and a contrasting text colour
       chosen for its surface (`.session-avatar` is white on blue, the Teams
       header is accent-on-accent-subtle), and both themes are already handled
       there. Blanking it and giving the halves their own grey put white
       letters on light grey in the sidebar — unreadable, and it needed a
       second set of dark-mode rules to fix something that was never broken. */
    /* Halves are laid out edge to edge; any host gap would split the circle. */
    gap: 0;
    /* Kept for hosts that do NOT centre their content; the halves also set
       `align-self`, which is what actually wins against the ones that do. */
    align-items: stretch;
}

/* Each half is a complete mini avatar: it holds either an <img> or that
   person's initial, so one missing photo costs half the tile rather than all
   of it. `min-width: 0` lets the two share the width evenly regardless of the
   initial's glyph width. */
.avatar-split__half {
    flex: 1 1 50%;
    min-width: 0;
    /* ⚠️ BOTH of these are load-bearing, and `align-items: stretch` on the
       parent is NOT enough. Every host circle in this codebase centres its
       content (`.teams-avatar` and `.session-avatar` both set
       `align-items: center`) at a HIGHER specificity than `.avatar-split`, so
       the parent's stretch loses and each half collapses to its line height —
       measured at 10.8px inside a 38px circle, which renders as a thin grey
       band across the middle instead of two faces.

       `align-self` is set on the CHILD, where no host rule competes, so it
       wins wherever this tile is dropped. `height: 100%` covers the same
       ground for any host that is not a flex container at all. */
    align-self: stretch;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Inherited so the initial is legible at any host size — a hardcoded
       px value would be wrong in the 24px list and the 48px header alike. */
    font-size: 0.72em;
    line-height: 1;
    font-weight: 600;
    /* Transparent so the HOST's tint shows through — see above. An image half
       gets `.avatar--has-image`, which covers it anyway. */
    background: transparent;
    color: inherit;
}

/* A hairline between the faces, so two photos still read as two people. Uses
   `currentColor` at low alpha rather than a fixed white: the tile inherits the
   host's text colour, so the seam is visible on a light circle and a dark one
   without a second theme rule. */
.avatar-split__half + .avatar-split__half {
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.45);
}
body.dark-theme .avatar-split__half + .avatar-split__half {
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.35);
}

/* The half is not the circle, so `border-radius: inherit` on the image would
   round its inner corners and leave notches in the middle of the tile. */
.avatar-split__half .avatar-image {
    border-radius: 0;
}