/* src/components/basic/XWUIAvatar/XWUIAvatar.css */
/**
 * XWUIAvatar Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/avatar/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* visible (NOT hidden) so corner overlays - the status dot and the `tag` pill - are
       not clipped at the circle's edge. The image/fallback self-clip to the avatar shape
       via `border-radius: inherit`, so the rounded mask is preserved without clipping. */
    overflow: visible;
    background: var(--bg-secondary, #f8f9fa);
}

.xwui-avatar-circle {
    border-radius: 50%;
}

.xwui-avatar-square {
    border-radius: var(--xwui-avatar-radius, var(--radius-avatar, var(--radius-sm, 6px)));
}

/* An explicit `radius` (config) wins over the shape, at two-class specificity
   so the served XWUIDisplayAvatar.css shape rules cannot undo it. */
.xwui-avatar.xwui-avatar-radius {
    border-radius: var(--xwui-avatar-radius);
}

.xwui-avatar-bordered {
    border: var(--border-avatar-width, var(--border-width-thick, 2px)) var(--border-avatar-style, solid) var(--bg-primary);
    box-shadow: 0 0 0 1px var(--border-avatar-color, var(--border-color, #dee2e6));
}

/* Size variants */
.xwui-avatar-xs {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs, 0.625rem);
}

.xwui-avatar-small {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-avatar-medium {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-avatar-large {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-base, 1rem);
}

.xwui-avatar-xl {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-xl, 1.25rem);
}

/* Numeric size: the box is --xwui-avatar-size (written inline by the view),
   so it has no preset class for the served XWUIDisplayAvatar.css to resize.
   Text and the status dot scale with it unless their tokens are set. */
.xwui-avatar.xwui-avatar-custom {
    width: var(--xwui-avatar-size, 40px);
    height: var(--xwui-avatar-size, 40px);
    font-size: var(--xwui-avatar-font-size, calc(var(--xwui-avatar-size, 40px) * 0.375));
    overflow: visible;
}

/* Image */
.xwui-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit; /* self-clip to the avatar shape (the wrapper no longer clips) */
}

/* Fallback */
.xwui-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--xwui-avatar-fg, var(--text-inverse));
    /* The per-person tone (--xwui-avatar-hue / -weight, set inline by the view)
       tints the theme's own --text-primary instead of being painted raw.
       --text-inverse is the ink each theme pairs with --text-primary, so the
       mix keeps AA in light AND dark themes; painted raw, some hue failed in
       every one of the 76 (2.15:1 for amber on white). Mixed in sRGB so getComputedStyle reports
       color(srgb ...), which contrast checkers can parse. The weights and the
       every-theme proof live in XWUIAvatar.view.ts / .contrast.test.ts. */
    --_avatar-fill: color-mix(in srgb, var(--xwui-avatar-hue, var(--text-secondary)) var(--xwui-avatar-hue-weight, 35%), var(--text-primary));
    background-color: var(--_avatar-fill);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    border-radius: inherit; /* self-clip to the avatar shape (the wrapper no longer clips) */
}

/* The initials' ink is read from the PAINTED fill (black or white, whichever
   contrasts more: viz-tokens.css --xwui-ink-on-k, never under 4.58:1), not from
   the theme's --text-inverse. A host hue (`hue`) is any colour, a pastel
   included, and the theme pair only proves AA for the weights the library
   chose for its own palette. `fg` (--xwui-avatar-fg) still wins. Browsers
   without relative colours keep the theme pair above. */
@supports (color: color(from red srgb r g b)) {
    .xwui-avatar-fallback {
        color: var(--xwui-avatar-fg, color(from var(--_avatar-fill) srgb var(--xwui-ink-on-k) var(--xwui-ink-on-k) var(--xwui-ink-on-k)));
    }
}

/* Gradient and conic fills (config.fill). The hue is inline on the ROOT in
   these modes, so a hue-based token a page declares on the avatar root (its
   className) resolves against the right hue; the formulas below sit in var()
   fallbacks and are evaluated on the fallback span, which inherits it.

   Contrast: the ink is chosen from the hue (black or white, see
   --xwui-ink-on-k), and the gradient only ever tints the hue toward the colour
   the ink is NOT, so every stop keeps the hue's own contrast or better (a light
   hue with black ink lightens, a dark hue with white ink darkens). The hue is
   also the final background layer: the solid colour under the gradient, and the
   colour a contrast checker reads (a gradient has no computed background-color
   of its own). */
.xwui-avatar-fill-gradient .xwui-avatar-fallback,
.xwui-avatar-fill-conic .xwui-avatar-fallback {
    --_avatar-hue: var(--xwui-avatar-hue, var(--text-secondary));
    color: var(--xwui-avatar-fg, var(--text-inverse));
    font-family: var(--xwui-avatar-font, inherit);
    font-weight: var(--xwui-avatar-font-weight, var(--font-weight-semibold, 600));
    box-shadow: var(--xwui-avatar-shadow, none);
}

.xwui-avatar-fill-gradient .xwui-avatar-fallback {
    background: var(--xwui-avatar-gradient, linear-gradient(
        var(--xwui-avatar-gradient-angle, 135deg),
        color-mix(in oklab, var(--_avatar-hue), #fff var(--xwui-avatar-gradient-light, 35%)),
        color-mix(in oklab, var(--_avatar-hue), #000 var(--xwui-avatar-gradient-dark, 20%)))), var(--_avatar-hue);
}

.xwui-avatar-fill-conic .xwui-avatar-fallback {
    background: var(--xwui-avatar-conic, conic-gradient(
        from var(--xwui-avatar-conic-from, 200deg),
        var(--_avatar-hue),
        color-mix(in oklab, var(--_avatar-hue) 65%, var(--xwui-avatar-conic-via, var(--accent-primary, #2f7bff))),
        var(--_avatar-hue))), var(--_avatar-hue);
}

@supports (color: color(from red srgb r g b)) {
    .xwui-avatar-fill-gradient .xwui-avatar-fallback,
    .xwui-avatar-fill-conic .xwui-avatar-fallback {
        --_avatar-opp: color(from var(--_avatar-hue) srgb calc(1 - var(--xwui-ink-on-k)) calc(1 - var(--xwui-ink-on-k)) calc(1 - var(--xwui-ink-on-k)));
        color: var(--xwui-avatar-fg, color(from var(--_avatar-hue) srgb var(--xwui-ink-on-k) var(--xwui-ink-on-k) var(--xwui-ink-on-k)));
    }
    /* One stop tinted toward the ink's opposite (--xwui-avatar-gradient-light is
       its share) and one stop that is the hue itself. --xwui-avatar-gradient-dark
       belongs to the base rule above: darkening a stop under a dark ink is the
       one move that would break the contrast this block guarantees. */
    .xwui-avatar-fill-gradient .xwui-avatar-fallback {
        background: var(--xwui-avatar-gradient, linear-gradient(
            var(--xwui-avatar-gradient-angle, 135deg),
            color-mix(in oklab, var(--_avatar-hue), var(--_avatar-opp) var(--xwui-avatar-gradient-light, 30%)),
            var(--_avatar-hue))), var(--_avatar-hue);
    }
}

/* Media slot (data.mediaSlot): a page-filled host. No painted background
   behind the page's media (a transparent 3D mascot would show it). */
.xwui-avatar.xwui-avatar-slotted {
    background: transparent;
    overflow: visible;
}

.xwui-avatar-media-slot {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

/* Status indicator. Placed with logical insets so it mirrors under dir="rtl"
   (it used to sit on the physical right in both directions). */
.xwui-avatar-status {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    border-radius: 50%;
    border: var(--xwui-avatar-status-ring-width, var(--border-width-thick, 2px)) solid var(--xwui-avatar-status-ring, var(--bg-primary));
}

/* Both shape rules pin all four insets at two-class specificity: the served
   bundle also carries XWUIDisplayAvatar.css, whose one-class physical
   `.xwui-avatar-status { right: 0 }` loads later and would otherwise survive
   beside a logical inline-end and pull the dot back to the right in RTL. */
.xwui-avatar-square .xwui-avatar-status {
    inset-block-start: auto;
    inset-inline-start: auto;
    inset-block-end: 0;
    inset-inline-end: 0;
}

/* On a circular avatar the bottom/inline-end CORNER sits outside the disc, so the
   dot is centred ON the ring at the 4:30 position (7:30 in RTL). A fixed-size box
   with auto margins centres between its insets: (50% + 120.72%) / 2 = 85.36%,
   i.e. 50% + 50%/sqrt(2). No translate: a transform is physical and would undo
   the mirroring. */
.xwui-avatar-circle .xwui-avatar-status {
    inset-block-start: 50%;
    inset-block-end: -20.72%;
    inset-inline-start: 50%;
    inset-inline-end: -20.72%;
    margin: auto;
}

.xwui-avatar-xs .xwui-avatar-status,
.xwui-avatar-small .xwui-avatar-status {
    width: var(--xwui-avatar-status-size, 8px);
    height: var(--xwui-avatar-status-size, 8px);
}

.xwui-avatar-medium .xwui-avatar-status,
.xwui-avatar-large .xwui-avatar-status {
    width: var(--xwui-avatar-status-size, 10px);
    height: var(--xwui-avatar-status-size, 10px);
}

.xwui-avatar-xl .xwui-avatar-status {
    width: var(--xwui-avatar-status-size, 12px);
    height: var(--xwui-avatar-status-size, 12px);
}

.xwui-avatar-custom .xwui-avatar-status {
    width: var(--xwui-avatar-status-size, calc(var(--xwui-avatar-size, 40px) * 0.25));
    height: var(--xwui-avatar-status-size, calc(var(--xwui-avatar-size, 40px) * 0.25));
}

/* statusPlacement:'corner': the dot sits in the bottom inline-end corner of
   the BOX (not on the ring), inset by tokens. Three classes so it beats both
   shape rules above and the served XWUIDisplayAvatar.css. Logical insets, no
   transform, so it mirrors under dir="rtl". */
.xwui-avatar .xwui-avatar-status.xwui-avatar-status-corner {
    inset-block-start: auto;
    inset-inline-start: auto;
    inset-block-end: var(--xwui-avatar-status-inset-y, 0px);
    inset-inline-end: var(--xwui-avatar-status-inset-x, 0px);
    margin: 0;
    border: var(--xwui-avatar-status-ring-width, var(--border-width-thick, 2px)) solid var(--xwui-avatar-status-ring, var(--bg-primary));
}

.xwui-avatar-status-online {
    background: var(--accent-success);
}

.xwui-avatar-status-offline {
    background: var(--text-tertiary);
}

.xwui-avatar-status-away {
    background: var(--accent-warning);
}

.xwui-avatar-status-busy {
    background: var(--accent-error);
}

/* Top-center 'tag' pill (e.g. 'NEW') - overlaid above the avatar edge. Visible because the
   wrapper no longer clips (overflow:visible); reuses theme tokens for a bordered-ring look. */
.xwui-avatar-tag {
    position: absolute;
    inset-block-start: -7px;
    /* Centring, not placement: left 50% with translateX(-50%) lands on the
       middle in either direction. A logical inline-start inset with the same
       translate would be off-centre under dir="rtl". */
    left: 50%;
    transform: translateX(-50%);
    padding: var(--xwui-avatar-tag-pad, 1px 7px);
    border-radius: var(--xwui-avatar-tag-radius, 999px);
    background: var(--xwui-avatar-tag-bg, var(--accent-primary, var(--role-primary-bg, #6366f1)));
    color: var(--xwui-avatar-tag-fg, var(--text-inverse, #fff));
    font-family: var(--xwui-avatar-tag-font, inherit);
    font-size: var(--xwui-avatar-tag-font-size, 9px);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.5;
    letter-spacing: var(--xwui-avatar-tag-tracking, .06em);
    text-transform: uppercase;
    white-space: nowrap;
    border: var(--xwui-avatar-tag-border, var(--border-width-thick, 2px) solid var(--bg-primary, #fff));
    box-shadow: var(--xwui-avatar-tag-shadow, 0 1px 3px rgba(0, 0, 0, .25));
    z-index: 2;
}

/* tagPlacement:'bottom-end': a small corner tag (an "AI" mark on an agent
   tile) hanging off the bottom inline-end corner. Logical insets and no
   translate, so it mirrors under dir="rtl". The same tokens as the pill, with
   corner-tag defaults. */
.xwui-avatar .xwui-avatar-tag.xwui-avatar-tag-bottom-end {
    inset-block-start: auto;
    left: auto;
    transform: none;
    inset-block-end: var(--xwui-avatar-tag-offset, -4px);
    inset-inline-end: var(--xwui-avatar-tag-offset, -4px);
    padding: var(--xwui-avatar-tag-pad, 1px 3px);
    border-radius: var(--xwui-avatar-tag-radius, 5px);
    background: var(--xwui-avatar-tag-bg, var(--bg-primary, #fff));
    color: var(--xwui-avatar-tag-fg, var(--accent-primary, #6366f1));
    font-size: var(--xwui-avatar-tag-font-size, 8px);
    line-height: 1.25;
    letter-spacing: var(--xwui-avatar-tag-tracking, 0);
    border: var(--xwui-avatar-tag-border, 1px solid currentColor);
    box-shadow: var(--xwui-avatar-tag-shadow, none);
}

/* Avatar group */
.xwui-avatar-group {
    display: flex;
    flex-direction: row-reverse;
}

/* Overlap on the inline-start side so the stack mirrors under dir="rtl".
   --xwui-avatar-group-overlap is the (negative) overlap; the ring separating
   stacked avatars has its own width and colour tokens. */
.xwui-avatar-group .xwui-avatar {
    margin-inline-start: var(--xwui-avatar-group-overlap, -8px);
    border: var(--xwui-avatar-group-ring-width, var(--border-width-thick, 2px)) solid var(--xwui-avatar-group-ring, var(--bg-primary));
}

.xwui-avatar-group .xwui-avatar:last-child {
    margin-inline-start: 0;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */