/* =====================================================================================================================
   ÁUDIO ESTILO WHATSAPP COM TRANSCRIÇÃO (3.5.0 · 06/10), pele Clinello. Prefixo próprio: au-
   Só tokens de marca.css e os do balão em ficha.css (--fx-in, --fx-out, --fx-out-tx). Tudo herda currentColor do
   balão: tinta no claro, tinta clara no escuro. Coral nenhum (o botão de tocar é tinta).
   Estrutura: [tocar/pausar] [onda + tempo] [foto de quem mandou | velocidade]  e, embaixo, a transcrição.
   ===================================================================================================================== */
.au{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:44px auto;column-gap:8px;align-items:center;width:320px;max-width:100%;color:inherit;margin:2px 0 4px}
.au-play{grid-row:1;grid-column:1}.au-onda{grid-row:1;grid-column:2}.au-quem{grid-row:1;grid-column:3}
.au-tempo{grid-row:2;grid-column:2;line-height:16px}
.wa-bubble:has(> .au){width:344px;max-width:100%;box-sizing:border-box}
#s-conversas .wa-bubble:has(> .au){max-width:min(344px,82%)}
.au .wa-audio{display:none}

/* tocar / pausar: só o desenho cheio, como no WhatsApp; alvo de toque 44 */
.au-play{all:unset;box-sizing:border-box;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:inherit;position:relative}
.au-play:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
.au-play:focus-visible{outline:2px solid currentColor!important;outline-offset:1px}
.au-play .ic{width:24px;height:24px;grid-area:1/1}
.au-play .au-ic-tocar{margin-left:2px}
/* desenho cheio (peso fill do Phosphor), na cor da tinta: o .viva de marca.css pintaria de coral */
.au-play .ic .r{display:none}.au-play .ic .f{display:inline}
.au-play .au-ic-pausar,.au[data-estado="tocando"] .au-play .au-ic-tocar,.au[data-estado="carregando"] .au-play .ic{display:none}
.au[data-estado="tocando"] .au-play .au-ic-pausar{display:block}
.au-gira{display:none;grid-area:1/1;width:24px;height:24px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color:currentColor;box-sizing:border-box;animation:auGira .8s linear infinite}
.au[data-estado="carregando"] .au-gira{display:block}
@keyframes auGira{to{transform:rotate(360deg)}}

/* a onda: duas camadas iguais; a de cima (já ouvido) é recortada pelo progresso --p (0 a 1) */
.au-onda{position:relative;height:30px;cursor:pointer;touch-action:none;outline:none;border-radius:6px}
.au-onda:focus-visible{outline:2px solid currentColor!important;outline-offset:2px}
.au-barras{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:2px;pointer-events:none}
.au-barras i{flex:1 1 0;max-width:3px;min-width:2px;border-radius:2px;background:color-mix(in srgb,currentColor 22%,transparent);height:calc(var(--h) * 100%)}
.au-barras.au-tocado{clip-path:inset(0 calc(100% - var(--p,0) * 100%) 0 0)}
.au-barras.au-tocado i{background:currentColor}
.au-bola{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:currentColor;pointer-events:none}
.au-tempo{font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;color:color-mix(in srgb,currentColor 60%,transparent)}

/* quem mandou: a foto da paciente, o monograma da clínica ou o avatar da assistente; tocando, vira a velocidade */
.au-quem{position:relative;width:44px;height:44px;display:grid;place-items:center}
.au-quem .conv-av,.au-av-assist,.au-av-clinica{width:40px!important;height:40px!important;border-radius:50%!important;font-size:14px!important;font-weight:600;display:grid;place-items:center;overflow:hidden;position:relative;flex:none}
.au-quem .conv-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.au-av-clinica{background:var(--cartao);color:var(--tx-2);box-shadow:inset 0 0 0 1px var(--linha);letter-spacing:.01em}
.au-vel{all:unset;box-sizing:border-box;display:none;min-width:40px;height:26px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;text-align:center;line-height:26px;cursor:pointer;background:color-mix(in srgb,currentColor 11%,transparent);color:inherit;position:relative}
.au-vel::before{content:'';position:absolute;inset:-9px -2px}
.au-vel:focus-visible{outline:2px solid currentColor!important;outline-offset:2px}
.au.au-ativo .au-vel{display:block}
.au.au-ativo .au-quem > :not(.au-vel){display:none}

/* erro: onda apagada + frase humana + tentar de novo */
.au[data-estado="erro"] .au-onda,.au[data-estado="erro"] .au-play{opacity:.38}
.au-erro{display:none;grid-column:1 / -1;grid-row:3;font-size:13px;color:color-mix(in srgb,currentColor 72%,transparent);font-weight:500;margin-top:2px}
.au[data-estado="erro"] .au-erro{display:block}
.au-erro button{all:unset;cursor:pointer;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px;margin-left:4px;padding:6px 0}

/* transcrição: o que ela falou, para ler sem dar play */
.au-tx{margin:8px 0 2px;padding-top:8px;border-top:1px solid color-mix(in srgb,currentColor 10%,transparent)}
.au-tx-h{display:block;font-size:11.5px;font-weight:500;color:color-mix(in srgb,currentColor 55%,transparent);margin-bottom:2px}
.au-tx-p{margin:0;font-size:14px;line-height:1.5;color:inherit;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.au-tx.aberta .au-tx-p{-webkit-line-clamp:unset;display:block}
.au-tx.ouvindo .au-tx-p{color:color-mix(in srgb,currentColor 55%,transparent)}
.au-mais{all:unset;cursor:pointer;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:6px 0 0;display:inline-block}
.au-mais:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}
.au-tx.aberta .au-mais{display:none}
.au-tx-solta{margin:0 0 2px;padding-top:0;border-top:0}

/* sem transcrição: a hora sobe para a linha da duração, embaixo da foto, como no WhatsApp */
.au + .wa-time{margin-top:-20px!important}
.au[data-estado="erro"] + .wa-time{margin-top:0!important}

@media (max-width:820px){
  .au{width:100%}
  #s-conversas .wa-bubble:has(> .au){width:300px;max-width:86%}
}
@media (prefers-reduced-motion:reduce){.au-gira{animation-duration:2.4s}}