/* =============================================================================
   ESTILO WHATSAPP WEB — MÍDIA (29/09/2026)
   -----------------------------------------------------------------------------
   Pedido do dono: player de vídeo, visualização de imagem e anexo de arquivo/imagem "extremamente
   precisos do WhatsApp" — antes o visualizador era um quadro com título em caixa alta e controles
   nativos, o pré-envio era uma caixinha com Cancelar/Enviar e o documento chegava como link solto.

   Quatro partes: (1) a mídia DENTRO da bolha (foto, vídeo, documento, "ainda não baixou");
   (2) o visualizador de tela cheia (`#wa-mv`, visualizadorDeMidia.js); (3) o player de vídeo
   (`.wa-vp`, dos dois lugares); (4) a tela de pré-envio (`#preview-modal`, no painel da conversa).

   Carregado logo ANTES do `estilo-whatsapp.css`, que continua sendo o último link (test/estiloWhatsapp.test.js). Usa os
   tokens `--wa-*` dele; os de mídia dos dois temas ficam aqui. `!important` só nas regras que disputam com o
   `design-system.css`. As regras antigas de mídia (visualizador em quadro, `.message-media-preview`, botão verde de baixar,
   hora em pílula) saíram do b2, do b3 e do design-system no mesmo commit.
   ========================================================================== */

:root,
:root.dark-theme {
    --wa-viewer-fundo: #0b0d0e;
    --wa-viewer-texto: #f7f8fa;
    --wa-viewer-texto-2: #8d9599;
    --wa-viewer-icone: #aebac1;
    --wa-viewer-hover: rgba(255, 255, 255, 0.1);
    --wa-viewer-seta: rgba(255, 255, 255, 0.1);
    --wa-viewer-seta-hover: rgba(255, 255, 255, 0.18);
    --wa-viewer-mini: #202323;
    --wa-doc-fundo: rgba(0, 0, 0, 0.2);
    --wa-doc-meta: rgba(233, 237, 239, 0.62);
    --wa-erro: #f15c6d;
    --wa-pv-fundo: #101212;
    --wa-pv-mini-borda: rgba(255, 255, 255, 0.16);
    --wa-pv-sombra: 0 2px 12px rgba(0, 0, 0, 0.5);
}

:root.light-theme {
    --wa-viewer-fundo: #ffffff;
    --wa-viewer-texto: #0a1014;
    --wa-viewer-texto-2: #5b6368;
    --wa-viewer-icone: #54656f;
    --wa-viewer-hover: rgba(11, 20, 26, 0.07);
    --wa-viewer-seta: rgba(11, 20, 26, 0.07);
    --wa-viewer-seta-hover: rgba(11, 20, 26, 0.13);
    --wa-viewer-mini: #e9edef;
    --wa-doc-fundo: rgba(11, 20, 26, 0.06);
    --wa-doc-meta: rgba(17, 27, 33, 0.62);
    --wa-erro: #ea0038;
    --wa-pv-fundo: #f0f2f5;
    --wa-pv-mini-borda: rgba(11, 20, 26, 0.16);
    --wa-pv-sombra: 0 2px 10px rgba(11, 20, 26, 0.18);
}

/* ── 1. MÍDIA DENTRO DA BOLHA ───────────────────────────────────────────── */

/* Foto, vídeo e documento: a bolha abraça a mídia (3 px de moldura) e a legenda quebra NA LARGURA DELA — o `width:0;
   min-width:100%` tira a legenda do cálculo da largura da bolha (sem isso um texto comprido alargava a bolha e a foto
   ficava com meia bolha vazia ao lado). Sem `overflow:hidden`: ele cortaria o rabinho, que é desenhado fora da caixa. */
.bubble.com-midia-visual,
.bubble.com-documento {
    padding: 3px !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.bubble.com-midia-visual .message-media,
.bubble.com-documento .message-media {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

.bubble.com-midia-visual > .message-content,
.bubble.com-documento > .message-content {
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    padding: 5px 6px 3px 6px;
}

.bubble.com-midia-visual .autor-nome,
.bubble.com-documento .autor-nome {
    margin: 0 6px;
    max-width: calc(100% - 12px);
}

.bubble.com-midia-visual .msg-citacao,
.bubble.com-documento .msg-citacao {
    margin: 0 0 3px;
}

.wa-midia {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}

.wa-midia-btn {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff;
    cursor: pointer;
    border-radius: inherit;
    overflow: hidden;
    line-height: 0;
}

/* Proporção da própria foto (nada de recorte), no máximo 330 px de largura e de altura — o quadro do WhatsApp. */
.wa-midia-btn img,
.wa-midia-btn video {
    display: block;
    width: auto;
    height: auto;
    min-width: 120px;
    max-width: min(330px, 62vw);
    max-height: 330px;
    border-radius: inherit;
    box-shadow: none;
    transition: none;
}

.wa-midia-btn video {
    background: #0b141a;
    pointer-events: none;
}

/* Tamanho já conhecido (largura e proporção guardadas): a caixa nasce do tamanho final e a foto só preenche — o chat não pula quando
   a imagem carrega nem quando a conversa é redesenhada. */
.wa-midia-btn.tem-dim {
    width: min(var(--wa-w), 62vw);
    max-width: 100%;
    aspect-ratio: var(--wa-r);
    background: rgba(134, 150, 160, 0.22) !important;
}

.wa-midia-btn.tem-dim img,
.wa-midia-btn.tem-dim video {
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.wa-midia-pendente .wa-pendente-btn.tem-dim {
    width: min(var(--wa-w), 62vw);
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--wa-r);
}

.wa-midia-btn:focus-visible {
    outline: 2px solid var(--wa-verde-botao);
    outline-offset: 1px;
}

/* Figurinha: sem moldura, do tamanho dela. */
.wa-midia.is-sticker {
    overflow: visible;
    background: transparent;
}

.wa-midia-btn.is-sticker img {
    min-width: 0;
    max-width: 176px;
    max-height: 176px;
}

/* Foto/vídeo sem legenda: a hora vai POR CIMA da mídia, em branco sobre um degradê escuro que nasce embaixo. */
.bubble.so-midia .wa-midia-btn::after,
.wa-midia-video .wa-midia-btn::after,
.wa-midia-pendente.is-video .wa-midia-btn::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 46px;
    background: linear-gradient(to top, rgba(11, 20, 26, 0.55), rgba(11, 20, 26, 0));
    pointer-events: none;
}

.bubble.so-midia .msg-meta-sobre-midia {
    position: absolute;
    right: 9px;
    bottom: 6px;
    z-index: 2;
}

.bubble.so-midia .msg-meta-sobre-midia .msg-meta,
:root.light-theme .bubble.so-midia .msg-meta-sobre-midia .msg-meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* O cartão interativo (anúncio com foto) tem a miniatura própria de 88×120. */
.interactive-thumb .wa-midia-btn {
    width: 88px;
}

.interactive-thumb .wa-midia-btn img {
    width: 88px;
    min-width: 0;
    max-width: 88px;
    height: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 12px;
}

/* Vídeo: botão de play no meio, câmera + duração no canto. */
.wa-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(11, 20, 26, 0.55);
    pointer-events: none;
    transition: background 0.15s ease;
}

.wa-play svg {
    display: block;
    margin-left: 1px;   /* ~0,5 px de ajuste óptico: o triângulo já nasce com o centro de massa no meio (medido por pixel) */
}

.wa-midia-btn:hover .wa-play {
    background: rgba(11, 20, 26, 0.72);
}

.wa-video-info {
    position: absolute;
    left: 8px;
    bottom: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 15px;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.wa-video-info svg {
    display: block;
    width: 16px;
    height: 16px;
}

.wa-gif-selo {
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(11, 20, 26, 0.6);
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* Ainda não baixou: prévia borrada (quando o WhatsApp mandou uma) com o botão redondo de baixar no meio. */
.wa-midia-pendente .wa-pendente-btn {
    width: 240px;
    max-width: min(240px, 62vw);
    height: 180px;
    display: grid;
    place-items: center;
    background: rgba(134, 150, 160, 0.28) !important;
}

.wa-midia-pendente.is-sticker .wa-pendente-btn {
    width: 140px;
    height: 140px;
}

.wa-midia-pendente .wa-pendente-btn:disabled {
    cursor: progress;
}

.wa-pendente-btn .wa-pendente-previa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: blur(8px);
    transform: scale(1.12);
}

.wa-pendente-disco {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(11, 20, 26, 0.6);
    color: #fff;
}

.wa-giro {
    animation: wa-giro 0.9s linear infinite;
}

@keyframes wa-giro {
    to { transform: rotate(360deg); }
}

/* Documento: o cartão do WhatsApp (ícone da extensão, nome, "PDF • 238 kB" e o botão redondo de baixar). */
.wa-doc-wrap {
    display: block;
}

.wa-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 330px;
    max-width: 100%;
    min-width: min(240px, 100%);
    margin: 0;
    padding: 10px 12px 10px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--wa-doc-fundo) !important;
    color: inherit !important;
    text-decoration: none !important;
    text-align: left;
    font: inherit;
    line-height: 19px;
    cursor: pointer;
}

.wa-doc:hover {
    filter: brightness(1.07);
}

.wa-doc:focus-visible {
    outline: 2px solid var(--wa-verde-botao);
    outline-offset: 1px;
}

.wa-doc-icone {
    flex: 0 0 34px;
    height: 44px;
    line-height: 0;
}

.wa-doc-svg {
    display: block;
}

.wa-doc-texto {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wa-doc-nome {
    font-size: 14.2px;
    line-height: 19px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.wa-doc-meta {
    font-size: 13px;
    line-height: 18px;
    color: var(--wa-doc-meta);
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-doc-tamanho:not(:empty)::before {
    content: ' • ';
}

.wa-doc-baixar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.6px solid var(--wa-doc-meta);
    color: var(--wa-doc-meta);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.wa-doc-baixar svg {
    display: block;
    width: 20px;
    height: 20px;
}

.wa-doc:hover .wa-doc-baixar,
.wa-doc:focus-visible .wa-doc-baixar,
.wa-doc.is-pendente .wa-doc-baixar {
    opacity: 1;
}

@media (hover: none) {
    .wa-doc-baixar { opacity: 1; }
}

/* Saindo daqui (25/10/2026): a foto já está na bolha, um pouco escurecida, com o anel do WhatsApp no meio — girando enquanto não
   se sabe quanto subiu, enchendo do topo quando o arquivo vai em pedaços (`--wa-envio-parte`, de 0 a 1). Não saiu: "Tentar de
   novo" no mesmo lugar. O anel não pega clique: tocar na foto abre o visualizador, como no WhatsApp. */
.wa-midia.is-envio-subindo .wa-midia-btn img,
.wa-midia.is-envio-subindo .wa-midia-btn video,
.wa-midia.is-envio-falhou .wa-midia-btn img,
.wa-midia.is-envio-falhou .wa-midia-btn video {
    filter: brightness(0.74);
}

.wa-midia.is-envio-subindo .wa-play,
.wa-midia.is-envio-falhou .wa-play {
    display: none;
}

.wa-envio {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border-radius: 50%;
    background: rgba(11, 20, 26, 0.55);
    color: #fff;
    line-height: 0;
    pointer-events: none;
}

.wa-envio-anel {
    display: block;
    width: 100%;
    height: 100%;
    animation: wa-giro 1.3s linear infinite;
}

.wa-envio-trilho,
.wa-envio-arco {
    fill: none;
    stroke-width: 3;
}

.wa-envio-trilho {
    stroke: currentColor;
    stroke-opacity: 0.24;
}

.wa-envio-arco {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: 34 125.66;
}

.wa-envio.tem-progresso .wa-envio-anel {
    animation: none;
    transform: rotate(-90deg);
}

.wa-envio.tem-progresso .wa-envio-arco {
    stroke-dasharray: 125.66;
    stroke-dashoffset: calc(125.66px * (1 - var(--wa-envio-parte, 0)));
    transition: stroke-dashoffset 0.25s linear;
}

.wa-envio-tentar {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 14px 0 10px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(11, 20, 26, 0.62) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.wa-envio-tentar:hover {
    background: rgba(11, 20, 26, 0.78) !important;
}

.wa-envio-tentar:focus-visible {
    outline: 2px solid var(--wa-verde-botao);
    outline-offset: 2px;
}

.wa-envio-tentar svg {
    display: block;
    flex: 0 0 20px;
}

/* Figurinha é pequena: só o ícone, num círculo. */
.wa-midia.is-sticker .wa-envio-tentar {
    width: 40px;
    height: 40px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
}

.wa-midia.is-sticker .wa-envio-tentar span {
    display: none;
}

/* Documento saindo daqui: o anel no lugar da seta de baixar; não saiu, a seta para cima, na cor de erro. */
.wa-doc.is-envio-subindo,
.wa-doc.is-envio-falhou {
    cursor: default;
}

.wa-doc.is-envio-subindo:hover,
.wa-doc.is-envio-falhou:hover {
    filter: none;
}

.wa-doc-baixar.is-enviando {
    border: 0;
    opacity: 1;
}

.wa-doc-baixar.is-enviando .wa-envio {
    position: static;
    width: 34px;
    height: 34px;
    margin: 0;
    background: transparent;
    color: inherit;
}

.wa-doc-baixar.is-enviando .wa-envio-anel {
    width: 34px;
    height: 34px;
}

.wa-doc-tentar {
    margin: 0;
    padding: 0 !important;
    border-color: var(--wa-erro) !important;
    background: transparent !important;
    color: var(--wa-erro) !important;
    opacity: 1 !important;
    cursor: pointer;
}

.wa-doc-tentar span {
    display: none;
}

/* ── 2. VISUALIZADOR (tela cheia) ───────────────────────────────────────── */

.wa-mv {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: grid;
    grid-template-rows: 60px minmax(0, 1fr) auto auto;
    /* iPhone: o topo fica abaixo do relógio e da bateria, e as miniaturas acima da barrinha de início. Embaixo da barra
       do sistema o toque não chega: o X ficava ali e a foto não fechava (relato do Lucas, 26/10/2026). */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-sizing: border-box;
    background: var(--wa-viewer-fundo);
    color: var(--wa-viewer-texto);
    opacity: 0;
    /* A curva do visualizador do WhatsApp Web ("media-viewer", 300 ms): rápida no começo, quase toda feita aos
       130 ms em que o fechar some com a camada. */
    transition: opacity 0.3s cubic-bezier(0.1, 1.03, 0.28, 0.99);
    outline: none;
}

.wa-mv[hidden] {
    display: none !important;
}

.wa-mv.is-aberto {
    opacity: 1;
}

.wa-mv.is-saindo {
    opacity: 0;
}

.wa-mv-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px 0 20px;
    min-width: 0;
}

.wa-mv-quem {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.wa-mv-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #6a7c86;
    display: grid;
    place-items: center;
}

.wa-mv-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-mv-avatar-vazio {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.9);
}

.wa-mv-avatar-vazio svg {
    width: 27px;
    height: 27px;
}

.wa-mv-identidade {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wa-mv-nome {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    color: var(--wa-viewer-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-mv-data {
    font-size: 13px;
    line-height: 18px;
    color: var(--wa-viewer-texto-2);
    white-space: nowrap;
}

.wa-mv.sem-data .wa-mv-data {
    display: none;
}

.wa-mv-acoes {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.wa-mv-icone {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--wa-viewer-icone);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.12s ease;
}

.wa-mv-icone:hover,
.wa-mv-icone:focus-visible {
    background: var(--wa-viewer-hover);
    outline: none;
}

.wa-mv-icone[hidden],
.wa-mv-seta[hidden] {
    display: none;
}

.wa-mv-palco {
    position: relative;
    min-height: 0;
    /* o dedo é do visualizador (deslizar de lado, puxar para baixo, toque duplo): sem isto o navegador toma o gesto
       para rolar a página e o script só recebe o pointercancel */
    touch-action: none;
}

.wa-mv-midia {
    position: absolute;
    inset: 8px 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wa-mv.sem-galeria .wa-mv-midia {
    inset: 8px 24px;
}

.wa-mv-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    animation: wa-mv-entra 0.16s ease-out;
    transition: transform 0.18s ease;
}

.wa-mv-midia.is-zoom .wa-mv-img {
    cursor: grab;
    transition: none;
}

.wa-mv-midia.is-zoom .wa-mv-img:active {
    cursor: grabbing;
}

@keyframes wa-mv-entra {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.wa-mv-midia.is-carregando::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 3px solid var(--wa-viewer-hover);
    border-top-color: var(--wa-viewer-icone);
    animation: wa-giro 0.8s linear infinite;
}

.wa-mv-erro {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
    color: var(--wa-viewer-texto-2);
}

.wa-mv-erro a {
    color: var(--wa-viewer-icone);
    text-decoration: underline;
}

.wa-mv-midia.deu-erro .wa-mv-erro {
    display: flex;
}

.wa-mv-midia.deu-erro > .wa-mv-img,
.wa-mv-midia.deu-erro > .wa-vp {
    display: none;
}

.wa-mv-seta {
    position: absolute;
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--wa-viewer-seta);
    color: var(--wa-viewer-icone);
    cursor: pointer;
    z-index: 3;
    transition: background 0.12s ease;
}

.wa-mv-seta.esq { left: 16px; }
.wa-mv-seta.dir { right: 16px; }

.wa-mv-seta:hover,
.wa-mv-seta:focus-visible {
    background: var(--wa-viewer-seta-hover);
    outline: none;
}

.wa-mv-legenda {
    max-height: 96px;
    overflow-y: auto;
    padding: 8px 24px 4px;
    text-align: center;
    font-size: 14.2px;
    line-height: 20px;
    color: var(--wa-viewer-texto);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wa-mv-legenda[hidden] {
    display: none;
}

.wa-mv-tiras {
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: 6px;
    padding: 10px 16px 14px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.wa-mv-tiras[hidden] {
    display: none;
}

.wa-mv-mini {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 5px;
    overflow: hidden;
    background: var(--wa-viewer-mini);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.12s ease;
}

.wa-mv-mini:hover,
.wa-mv-mini:focus-visible {
    opacity: 0.9;
    outline: none;
}

.wa-mv-mini.is-atual {
    opacity: 1;
    border-color: var(--wa-verde);
}

.wa-mv-mini img,
.wa-mv-mini video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.wa-mv-mini-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.wa-mv-mini-play svg {
    width: 20px;
    height: 20px;
}

/* ── 3. PLAYER DE VÍDEO (visualizador e pré-envio) ──────────────────────── */

.wa-vp {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    animation: wa-mv-entra 0.16s ease-out;
}

.wa-mv-midia.is-video {
    background: transparent;
}

:root.light-theme .wa-mv-midia.is-video {
    background: #000;
}

.wa-vp-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.wa-vp:fullscreen {
    width: 100vw;
    height: 100vh;
    background: #000;
}

.wa-vp-grande {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 68px;
    margin: -34px 0 0 -34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: none;
    place-items: center;
    background: rgba(11, 20, 26, 0.6);
    color: #fff;
    cursor: pointer;
}

.wa-vp-grande svg {
    width: 34px;
    height: 34px;
    margin-left: 1px;
}

.wa-vp.is-pausado .wa-vp-grande {
    display: grid;
}

.wa-vp-controles {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 30px 14px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    transition: opacity 0.2s ease;
}

.wa-vp.is-oculto .wa-vp-controles {
    opacity: 0;
    pointer-events: none;
}

.wa-vp.is-oculto {
    cursor: none;
}

.wa-vp-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.12s ease;
}

.wa-vp-btn:hover,
.wa-vp-btn:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    outline: none;
}

.wa-vp-btn span {
    display: grid;
    place-items: center;
}

.wa-vp-play .i-pause,
.wa-vp:not(.is-pausado) .wa-vp-play .i-play {
    display: none;
}

.wa-vp:not(.is-pausado) .wa-vp-play .i-pause {
    display: grid;
}

.wa-vp-mudo .i-mudo,
.wa-vp.is-mudo .wa-vp-mudo .i-som {
    display: none;
}

.wa-vp.is-mudo .wa-vp-mudo .i-mudo {
    display: grid;
}

.wa-vp-tempo {
    flex: 0 0 auto;
    min-width: 36px;
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.wa-vp-barra {
    position: relative;
    flex: 1 1 auto;
    min-width: 40px;
    height: 24px;
}

.wa-vp-fundo {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.wa-vp-carregado,
.wa-vp-cheio {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 2px;
}

.wa-vp-carregado {
    background: rgba(255, 255, 255, 0.42);
}

.wa-vp-cheio {
    background: #fff;
}

.wa-vp-cheio::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.wa-vp-barra:hover .wa-vp-cheio::after {
    opacity: 1;
}

.wa-vp-seek {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.wa-vp-volume {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.wa-vp-vol {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 4px;
    margin: 0;
    border-radius: 2px;
    opacity: 0;
    cursor: pointer;
    background: linear-gradient(to right, #fff var(--vp-vol, 100%), rgba(255, 255, 255, 0.3) var(--vp-vol, 100%));
    transition: width 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
}

.wa-vp-volume:hover .wa-vp-vol,
.wa-vp-vol:focus-visible {
    width: 76px;
    margin: 0 8px 0 2px;
    opacity: 1;
}

.wa-vp-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ── 4. PRÉ-ENVIO (a tela que abre ao escolher arquivos) ────────────────── */

#preview-modal.wa-pv {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1200 !important;
    display: none;
    flex-direction: column;
    background: var(--wa-pv-fundo) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--wa-viewer-texto);
}

.wa-pv-topo {
    flex: 0 0 60px;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.wa-pv-fechar {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent !important;
    color: var(--wa-viewer-icone) !important;
    cursor: pointer;
}

.wa-pv-fechar:hover,
.wa-pv-fechar:focus-visible {
    background: var(--wa-viewer-hover) !important;
    outline: none;
}

.wa-pv-titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.wa-pv-palco {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px 12px;
}

.wa-pv-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: var(--wa-pv-sombra);
}

.wa-pv-video-caixa {
    width: 100%;
    height: 100%;
    display: none;
}

.wa-pv-video-caixa .wa-vp {
    background: transparent;
    animation: none;
}

.wa-pv-video-caixa .wa-vp-video {
    border-radius: 3px;
}

:root.light-theme .wa-pv-video-caixa .wa-vp {
    background: #000;
    border-radius: 3px;
}

.wa-pv-audio {
    width: min(420px, 100%);
    height: 44px;
    outline: none;
}

.wa-pv-doc {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: min(460px, 100%);
    text-align: center;
}

.wa-pv-doc-icone svg {
    width: 82px;
    height: 106px;
    display: block;
}

.wa-pv-doc-nome {
    margin-top: 14px;
    font-size: 17px;
    line-height: 23px;
    color: var(--wa-viewer-texto);
    overflow-wrap: anywhere;
}

.wa-pv-doc-meta {
    font-size: 14px;
    line-height: 19px;
    color: var(--wa-viewer-texto-2);
}

.wa-pv-doc-aviso {
    margin-top: 10px;
    font-size: 14px;
    color: var(--wa-viewer-texto-2);
}

.wa-pv-rodape {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 6px 96px 20px;
}

.wa-pv-campo {
    width: min(640px, 100%);
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 26px;
    background: var(--wa-compositor);
    box-shadow: var(--wa-sombra-compositor);
}

.wa-pv-campo input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--wa-texto) !important;
    font-size: 15px;
    outline: none !important;
    box-shadow: none !important;
}

.wa-pv-campo input::placeholder {
    color: var(--wa-texto-2);
}

.wa-pv-tiras {
    display: flex;
    align-items: center;
    justify-content: safe center;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
}

#preview-thumbnails.wa-pv-tiras {
    background: transparent;
    border: 0;
    margin: 0;
}

.wa-pv-tiras .preview-thumb-item {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: var(--wa-viewer-mini);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.12s ease;
}

.wa-pv-tiras .preview-thumb-item:hover {
    opacity: 1;
}

.wa-pv-tiras .preview-thumb-item.is-active {
    opacity: 1;
    border-color: var(--wa-verde);
}

.wa-pv-tiras .preview-thumb-item img,
.wa-pv-tiras .preview-thumb-item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-pv-tiras .preview-thumb-item .thumb-doc-icone {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.wa-pv-tiras .preview-thumb-item .thumb-doc-icone svg {
    width: 22px;
    height: 29px;
}

.wa-pv-tiras .preview-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: none;
    place-items: center;
    background: rgba(11, 20, 26, 0.72);
    color: #fff;
    font-size: 10px;
    cursor: pointer;
}

.wa-pv-tiras .preview-thumb-remove svg {
    width: 10px;
    height: 10px;
}

.wa-pv-tiras .preview-thumb-item:hover .preview-thumb-remove {
    display: grid;
}

.wa-pv-tiras .preview-add-more-btn {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1.5px solid var(--wa-pv-mini-borda);
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--wa-viewer-icone);
    cursor: pointer;
}

.wa-pv-tiras .preview-add-more-btn:hover {
    background: var(--wa-viewer-hover);
}

.wa-pv-tiras .preview-add-more-btn svg {
    width: 24px;
    height: 24px;
}

/* Enviar: o círculo verde do WhatsApp no canto. O texto que o JS escreve no botão ("Enviar", "Enviando 1 de 3…") fica invisível;
   o ícone é desenhado aqui, o giro aparece enquanto envia e o `data-total` vira o selinho com a quantidade.
   O ícone e o giro são pseudo-elementos ABSOLUTOS e centrados por `inset:0; margin:auto`: com `display:grid` o texto que o JS põe no
   botão virava uma 2ª linha da grade e empurrava o ícone 8,5 px para cima (medido por pixel) — torto. Assim nenhum filho mexe nele. */
.wa-pv-enviar {
    position: absolute;
    right: 28px;
    bottom: 22px;
    width: 60px;
    height: 60px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    display: block;
    background: var(--wa-verde-botao) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: filter 0.12s ease;
}

.wa-pv-enviar:hover {
    filter: brightness(1.06);
    transform: none !important;
}

.wa-pv-enviar::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 28px;   /* PAR: num botão de 60 (ou 56) px o ícone cai em número inteiro de pixels; com 27 sobrava meio pixel e ele ficava borrado/descentrado */
    height: 28px;
    background: var(--wa-verde-botao-icone);   /* caminho do avião com a caixa envolvente centrada no viewBox (x 0,65→23,35; y 2,27→21,73) */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M.65 21.73 23.35 12 .65 2.27l.01 7.91 13.62 1.82-13.62 1.82z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M.65 21.73 23.35 12 .65 2.27l.01 7.91 13.62 1.82-13.62 1.82z'/></svg>") center / contain no-repeat;
}

.wa-pv-enviar:disabled {
    cursor: progress;
    filter: none;
}

.wa-pv-enviar:disabled::before {
    width: 28px;
    height: 28px;
    background: none;
    -webkit-mask: none;
    mask: none;
    border-radius: 50%;
    /* trilho na cor do ícone (escuro no escuro, branco no claro) — antes era sempre escuro, e no tema claro o arco branco corria num trilho escuro */
    border: 3px solid color-mix(in srgb, var(--wa-verde-botao-icone) 28%, transparent);
    border-top-color: var(--wa-verde-botao-icone);
    animation: wa-giro 0.8s linear infinite;
}

.wa-pv-enviar[data-total]:not([data-total="1"]):not([data-total=""])::after {
    content: attr(data-total);
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--wa-pv-fundo);
    color: var(--wa-texto);
    border: 2px solid var(--wa-verde-botao);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ── CELULAR ────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
    .wa-mv {
        grid-template-rows: 56px minmax(0, 1fr) auto auto;
    }

    .wa-mv-topo {
        padding: 0 4px 0 14px;
    }

    .wa-mv-quem {
        gap: 10px;
    }

    .wa-mv-icone[data-mv-acao="ver"],
    .wa-mv-icone[data-mv-acao="zoom"] {
        display: none;
    }

    .wa-mv-midia,
    .wa-mv.sem-galeria .wa-mv-midia {
        inset: 0;
    }

    .wa-mv-seta {
        display: none;
    }

    .wa-mv-mini {
        width: 46px;
        height: 46px;
    }

    .wa-mv-tiras {
        padding: 8px 10px 12px;
    }

    .wa-vp-volume,
    .wa-vp-tela {
        display: none;
    }

    .wa-vp-controles {
        gap: 4px;
        padding: 26px 8px 8px;
    }

    .wa-pv-palco {
        padding: 0 12px 8px;
    }

    .wa-pv-rodape {
        padding: 4px 12px 84px;
        gap: 10px;
    }

    .wa-pv-campo {
        width: 100%;
    }

    .wa-pv-enviar {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-mv,
    .wa-mv-img,
    .wa-vp {
        animation: none;
        transition: none;
    }
}

/* REEL / PUBLICAÇÃO DO INSTAGRAM NA BOLHA (21/10/2026) — js/painel/cartaoDeReel.js.
   Cartão com play; o iframe do player oficial só nasce no toque. Fundos em rgba para valer nos 2 temas. */
.reel-cartao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(300px, 70vw);
    padding: 4px 0 2px;
}
.reel-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, inherit);
}
.reel-topo i {
    font-size: 18px;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.reel-palco {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 14;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(249, 206, 52, 0.22), rgba(238, 42, 123, 0.28) 55%, rgba(98, 40, 215, 0.34));
    border: 1px solid rgba(127, 127, 127, 0.28);
}
.reel-palco-aberto {
    aspect-ratio: auto;
    height: 520px;
    background: rgba(0, 0, 0, 0.25);
}
.reel-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}
.reel-play-botao {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 20px;
    padding-left: 3px;
    transition: transform 0.18s ease, background 0.18s ease;
}
.reel-play:hover .reel-play-botao,
.reel-play:focus-visible .reel-play-botao {
    transform: scale(1.08);
    background: rgba(0, 0, 0, 0.72);
}
.reel-play:focus-visible {
    outline: 2px solid #ee2a7b;
    outline-offset: -4px;
}
.reel-play-texto {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, inherit);
}
.reel-player {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.reel-abrir {
    align-self: flex-start;
    font-size: 12.5px;
    color: inherit;
    opacity: 0.8;
    text-decoration: underline;
}
.reel-abrir:hover {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .reel-play-botao { transition: none; }
}