/* ============================================================================
   Voice avatars — one unique, app-wide identity per Chirp 3 HD voice.

   A character IS a voice, so the avatar is keyed on the voice's base name
   ("Fenrir") rather than on a per-book character id. That way the same voice
   wears the same face in the studio's cast, in a sentence's narrator button,
   and in /voices.

   Each voice supplies three colours (light glow / mid body / deep base) and the
   base class blends them into a smooth, lit sphere. Adding a voice to
   CHIRP3_HD_VOICES means adding one line here.
   ========================================================================= */

.wz-avatar {
    /* Fallback palette — also what an unknown/voiceless narrator gets. */
    --wz-av-1: #d8dcff;
    --wz-av-2: #8b93c9;
    --wz-av-3: #2f3560;

    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: var(--wz-av-size, 30px);
    height: var(--wz-av-size, 30px);
    border-radius: 999px;
    overflow: hidden;
    /* Three light sources over a diagonal body: the highlights read as glow
       rather than as flat colour stops. */
    background:
        radial-gradient(circle at 26% 20%, var(--wz-av-1) 0%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(circle at 82% 34%, var(--wz-av-2) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(circle at 52% 108%, var(--wz-av-3) 0%, rgba(255, 255, 255, 0) 74%),
        linear-gradient(148deg, var(--wz-av-2) 0%, var(--wz-av-3) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .32),
        0 1px 4px -1px rgba(24, 24, 27, .35);
}

/* Gloss on top, shade at the bottom — the bit that makes it a sphere. */
.wz-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(115% 78% at 30% 10%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(85% 65% at 68% 116%, rgba(24, 24, 27, .22) 0%, rgba(24, 24, 27, 0) 62%);
    pointer-events: none;
}

/* ---- Per-voice palettes (alphabetical, matching CHIRP3_HD_VOICES) ---- */
.wz-avatar--achernar      { --wz-av-1: #ffe1f0; --wz-av-2: #ff86c0; --wz-av-3: #8e2f7e; }
.wz-avatar--achird        { --wz-av-1: #ffe6b8; --wz-av-2: #ffab4d; --wz-av-3: #c2410c; }
.wz-avatar--algenib       { --wz-av-1: #cfd9e6; --wz-av-2: #7c8ba1; --wz-av-3: #2b3a4d; }
.wz-avatar--algieba       { --wz-av-1: #a7f3d0; --wz-av-2: #34d399; --wz-av-3: #065f46; }
.wz-avatar--alnilam       { --wz-av-1: #c7d2fe; --wz-av-2: #6366f1; --wz-av-3: #312e81; }
.wz-avatar--aoede         { --wz-av-1: #d9f6ff; --wz-av-2: #5fd0f0; --wz-av-3: #0e7490; }
.wz-avatar--autonoe       { --wz-av-1: #fff4b8; --wz-av-2: #fbcb32; --wz-av-3: #b45309; }
.wz-avatar--callirrhoe    { --wz-av-1: #d5f7e3; --wz-av-2: #5fd39a; --wz-av-3: #15803d; }
.wz-avatar--charon        { --wz-av-1: #bfdbfe; --wz-av-2: #3b82f6; --wz-av-3: #1e3a8a; }
.wz-avatar--despina       { --wz-av-1: #ead9ff; --wz-av-2: #a78bfa; --wz-av-3: #5b21b6; }
.wz-avatar--enceladus     { --wz-av-1: #dbe4ff; --wz-av-2: #93a5f0; --wz-av-3: #3f4c9b; }
.wz-avatar--erinome       { --wz-av-1: #ccfbf1; --wz-av-2: #2dd4bf; --wz-av-3: #0f766e; }
.wz-avatar--fenrir        { --wz-av-1: #ffd7a8; --wz-av-2: #fb7a3c; --wz-av-3: #9a1e1e; }
.wz-avatar--gacrux        { --wz-av-1: #f7cfe0; --wz-av-2: #c2557f; --wz-av-3: #6b1839; }
.wz-avatar--iapetus       { --wz-av-1: #d8f0ff; --wz-av-2: #7cc4f5; --wz-av-3: #1e5f9e; }
.wz-avatar--kore          { --wz-av-1: #ffd4f2; --wz-av-2: #ec4899; --wz-av-3: #831843; }
.wz-avatar--laomedeia     { --wz-av-1: #ffdcd0; --wz-av-2: #fb7185; --wz-av-3: #9f1239; }
.wz-avatar--leda          { --wz-av-1: #ffe3f4; --wz-av-2: #f78fd8; --wz-av-3: #a21caf; }
.wz-avatar--orus          { --wz-av-1: #c8ecc0; --wz-av-2: #4d9e56; --wz-av-3: #14532d; }
.wz-avatar--puck          { --wz-av-1: #e9f9a8; --wz-av-2: #a3d939; --wz-av-3: #4d7c0f; }
.wz-avatar--pulcherrima   { --wz-av-1: #ffd6fb; --wz-av-2: #e152d6; --wz-av-3: #6b21a8; }
.wz-avatar--rasalgethi    { --wz-av-1: #c3d9ff; --wz-av-2: #4f6ef7; --wz-av-3: #1e2a78; }
.wz-avatar--sadachbia     { --wz-av-1: #c9fbf0; --wz-av-2: #22c3c3; --wz-av-3: #0b6b7a; }
.wz-avatar--sadaltager    { --wz-av-1: #ddd0ff; --wz-av-2: #8b5cf6; --wz-av-3: #4c1d95; }
.wz-avatar--schedar       { --wz-av-1: #f6e2bd; --wz-av-2: #c99a4e; --wz-av-3: #6b4416; }
.wz-avatar--sulafat       { --wz-av-1: #ffe4cc; --wz-av-2: #ff9e6b; --wz-av-3: #b03a2e; }
.wz-avatar--umbriel       { --wz-av-1: #dcecc9; --wz-av-2: #8fae74; --wz-av-3: #3f5b34; }
.wz-avatar--vindemiatrix  { --wz-av-1: #f6e2fb; --wz-av-2: #cba0e8; --wz-av-3: #7a3d9b; }
.wz-avatar--zephyr        { --wz-av-1: #defff0; --wz-av-2: #4be1a7; --wz-av-3: #0d7a6a; }
.wz-avatar--zubenelgenubi { --wz-av-1: #f3d5c0; --wz-av-2: #c9663f; --wz-av-3: #5c2317; }