/*
 * O ANEXO DENTRO DO BALÃO — foto, áudio, vídeo e documento (D22, spec §4.6).
 *
 * Arquivo à parte de `whatsapp.css` de propósito: a caixa de entrada e a doca são frentes
 * diferentes mexendo no mesmo módulo, e duas mãos no mesmo arquivo é conflito garantido. Aqui só
 * mora o que a mídia precisa.
 *
 * COR SÓ POR TOKEN (--keys-*), com contraste nos DOIS temas (linter de tema): não há uma única cor
 * literal neste arquivo, e as três regras abaixo são de TAMANHO, que é o problema de verdade.
 *
 * O problema de verdade: a foto que chega tem 4000 px de largura e o vídeo é vertical de celular.
 * Sem teto, um anexo estica o balão, o balão estica o cartão e a página inteira passa a rolar de
 * lado — que é justamente o que a regra de layout do app proíbe (ver o cabeçalho de `whatsapp.css`).
 * O teto de ALTURA é o que impede o outro extremo: uma foto vertical de 3 m de altura empurraria o
 * resto da conversa para fora da tela, e quem abriu a conversa quer ler a conversa.
 */

.keys-wa-midia {
    display: block;
    max-width: 100%;
    /* 15rem ≈ 240 px: cabe na largura do balão (80% da coluna) sem virar miniatura ilegível, e o
       clique abre o tamanho real numa aba nova — a foto de uma rachadura precisa ser ampliável. */
    max-height: 15rem;
    width: auto;
    height: auto;
    border-radius: var(--keys-raio-sm);
    border: 1px solid var(--keys-borda);
    /* `contain` e não `cover`: recortar a foto do cliente para caber esconderia justamente a beirada
       onde costuma estar o que ele quis mostrar. */
    object-fit: contain;
    background: var(--keys-superficie-2);
}

/*
 * O tocador nativo. Largura mínima porque o controle do Chrome encolhe até o botão de play cobrir a
 * barra inteira, e aí não dá para arrastar até o ponto em que o cliente diz o preço — que é o que
 * se faz com um recado de voz de dois minutos.
 */
.keys-wa-audio {
    display: block;
    width: 100%;
    min-width: 13rem;
    max-width: 18rem;
}

/* Gravando: o botão do microfone precisa dizer que ESTÁ gravando sem depender só da cor (P9 — o
   rótulo acessível também muda, no `whatsapp-anexo.js`). A pulsação é o sinal redundante. */
.keys-wa-gravando {
    animation: keys-wa-pulso 1.2s ease-in-out infinite;
}

@keyframes keys-wa-pulso {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Quem pede menos animação não leva nenhuma — o botão continua legível pelo rótulo. */
@media (prefers-reduced-motion: reduce) {
    .keys-wa-gravando {
        animation: none;
    }
}