/* =================================================================
   WHATSAPP — os números da empresa
   =================================================================

   Duas regras, as mesmas do chat.css:

   1. TUDO tem o prefixo `wa-`. Este arquivo é carregado em toda página,
      e uma regra em `table` ou `.item` pintaria a intranet inteira.
   2. NENHUMA COR FIXA. Só as variáveis do tema, que trocam junto com a
      BU ativa. Ver PADRAO_VISUAL.md seção 4. As três exceções estão
      declaradas abaixo, com o motivo.

   O QUE ESTE ARQUIVO **NÃO** FAZ: reinventar componente. O cabeçalho é o
   `painel-header-row` do sistema, os botões são `.btn`, o modal é o
   `.modal-overlay`/`.modal` do style.css e a tabela copia a medida da do
   Inventário. A primeira versão desta tela inventou cartões próprios e
   ficou visivelmente fora do padrão do portal.
   ================================================================= */

.page-whatsapp {
    /* Verde de "conectado" e vermelho de "com problema" NÃO seguem a BU: são
       semáforo, não decoração. Numa BU de paleta vermelha, um "com problema"
       na cor do tema desapareceria dentro do próprio visual. */
    --wa-ok: #1e8e3e;
    --wa-erro: #c0392b;
}

.wa-acoes-topo {
    display: flex;
    gap: 8px;
}

/* -----------------------------------------------------------------
   A CAIXA DE ENTRADA: lista à esquerda, conversa à direita
   -----------------------------------------------------------------

   Altura fixa em vez de crescer com o conteúdo: numa conversa de mil
   mensagens, a página inteira rolaria e a caixa de escrever ficaria
   longe do fim do fio. Com altura fixa, quem rola é o fio — e a caixa
   de escrever fica sempre onde a mão espera. */

.wa-caixa {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: 1fr;
    height: calc(100vh - 250px);
    min-height: 460px;
    max-height: 820px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    overflow: hidden;
}

/* `min-height: 0` NÃO É DETALHE — é o que faz esta tela funcionar.
   
   Um item de grid ou de flex nasce com `min-height: auto`, que quer dizer "não
   encolha abaixo do meu conteúdo". Com isso, `overflow-y: auto` nunca entra em
   ação: em vez de rolar por dentro, a caixa CRESCE. Foi exatamente o que
   aconteceu aqui — o fio da conversa esticou página abaixo, a mensagem nova
   chegava fora da área visível e a caixa de escrever era empurrada para fora da
   tela. Parecia "não atualiza e não dá para responder"; era só isto. */

.wa-coluna {
    border-right: 1px solid var(--card-border);
    overflow-y: auto;
    min-height: 0;
    background: var(--column-bg, #f7f8fa);
}

.wa-painel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.wa-nenhuma {
    margin: auto;
    padding: 24px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ─── a lista de conversas ─────────────────────────────────────── */

.wa-conversa-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--card-border);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
}

.wa-conversa-item:hover { background: var(--card-bg, #fff); }

.wa-conversa-aberta {
    background: var(--card-bg, #fff);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Grupo que ninguém mandou guardar aparece apagado: ele está na lista para ser
   escolhido, não para ser lido — nada do que foi dito lá foi gravado. */
.wa-conversa-parada { opacity: 0.6; }

.wa-avatar {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* O avatar de grupo destoa do de pessoa sem precisar de legenda. A foto de
   perfil de verdade entra numa fase seguinte, e substitui as iniciais. */
.wa-avatar-grupo { background: var(--text-secondary); }

.wa-conversa-meio {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.wa-conversa-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.wa-conversa-nome {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-conversa-hora {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-secondary);
}

.wa-conversa-previa {
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-conversa-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

/* O "digitando…" ocupa o lugar do telefone, como no WhatsApp. Em itálico e na
   cor da BU para o olho perceber a troca sem precisar ler. */
.wa-digitando {
    color: var(--accent);
    font-style: italic;
}

/* O badge de não lidas é o único vermelho que NÃO acompanha a BU, pelo mesmo
   motivo do chat: ele quer dizer "alguém falou com você e você não viu". Numa
   BU de paleta vermelha ele sumiria dentro do visual; numa verde, um aviso
   verde não é aviso. */
.wa-badge {
    flex-shrink: 0;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* ─── a conversa aberta ────────────────────────────────────────── */

.wa-conversa-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border);
    flex-shrink: 0;
}

.wa-conversa-dados {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wa-fio {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg);
}

.wa-bolha {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-self: flex-start;
    min-width: 90px;
    max-width: min(560px, 75%);
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    font-size: 14px;
    color: var(--text-primary);
}

/* A minha bolha usa a cor da BU; a do outro usa o fundo de card. É o par mínimo
   para distinguir os dois lados sem legenda — mesma escolha do chat interno. */
.wa-bolha-minha {
    align-self: flex-end;
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.wa-bolha-autor {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.85;
}

/* pre-wrap: a quebra de linha da mensagem sai daqui, e não de alguém montar
   HTML com o texto que foi digitado. Ver a regra no topo do whatsapp.js. */
.wa-bolha-texto { white-space: pre-wrap; word-break: break-word; }

.wa-bolha-citado {
    padding-left: 8px;
    border-left: 2px solid currentColor;
    font-size: 12.5px;
    opacity: 0.8;
    white-space: pre-wrap;
}

/* ─── anexos dentro da bolha ───────────────────────────────────── */

/* A foto tem teto de altura: uma imagem de celular em pé tem 4000px e, sem
   teto, uma única foto empurraria a conversa inteira para fora da tela. */
.wa-anexo-foto {
    display: block;
    margin: 2px 0;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}

.wa-anexo-foto img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    width: auto;
    height: auto;
    object-fit: cover;
    background: var(--column-bg, #f0f0f0);
}

/* A FIGURINHA NÃO É UMA FOTO PEQUENA — é um emoji grande.
   Desenhada com a régua da foto (320px de altura) ela tomava a conversa
   inteira. 140px é a mesma escala que o WhatsApp usa: some do caminho, e ainda
   dá para ver. O fundo transparente fica transparente: figurinha quase sempre
   é recortada, e um quadrado cinza atrás dela estraga justamente o recorte. */
.wa-anexo-figurinha img {
    max-width: 140px;
    max-height: 140px;
    object-fit: contain;
    background: none;
}

/* O FILTRO DE PESSOAS POR BU (25/09/2026).
   Marcar as BUs do número reduz a lista de quem pode lê-lo. Quem está marcado e
   fora da BU escolhida NÃO some — some seria tirar o acesso de alguém sem
   ninguém ver —, fica com este selo, para a decisão ser tomada olhando. */
.wa-fora-marca {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--column-bg, #f0f0f0);
    color: var(--text-secondary);
    font-size: 10.5px;
    white-space: nowrap;
}

.wa-fora-da-bu {
    margin-top: 6px;
}

/* Um botão que se lê como link: a ação é secundária e não pode competir com
   "Salvar". */
.wa-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-dark, var(--accent));
    font-size: inherit;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.wa-anexo-erro {
    display: block;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
}

.wa-anexo-audio {
    width: 260px;
    max-width: 100%;
    height: 38px;
    margin: 2px 0;
}

.wa-anexo-bloco {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

/* O "baixar" fica discreto embaixo do anexo: quem quer ver clica na foto, quem
   quer o arquivo clica aqui. Faltava em foto e em áudio. */
.wa-anexo-baixar {
    font-size: 11px;
    opacity: 0.75;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: inherit;
    cursor: pointer;
}

.wa-anexo-baixar:hover { opacity: 1; }

.wa-anexo-arquivo {
    display: inline-block;
    padding: 6px 0;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: inherit;
}

.wa-bolha-arquivo {
    font-size: 13px;
    opacity: 0.9;
}

.wa-bolha-hora {
    align-self: flex-end;
    font-size: 10.5px;
    opacity: 0.7;
}

/* ─── o visualizador de foto ───────────────────────────────────── */

/* Fundo escuro fixo, e é cor escrita na mão de propósito: um visualizador de
   foto que acompanhasse a cor da BU competiria com a própria foto. Aqui o
   conteúdo é a imagem, e o resto tem de sumir. */
.wa-foto-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(12, 14, 20, 0.92);
}

.wa-foto-overlay.active { display: flex; }

.wa-foto-cheia {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.wa-foto-fechar {
    position: absolute;
    top: 16px;
    right: 22px;
    padding: 0 8px;
    border: none;
    background: none;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
}

.wa-foto-fechar:hover { opacity: 1; }

.wa-foto-baixar {
    position: absolute;
    bottom: 20px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.wa-foto-baixar:hover { background: rgba(255, 255, 255, 0.26); }

/* A foto na bolha virou botão: precisa parecer imagem, não controle. */
.wa-anexo-foto {
    border: none;
    padding: 0;
    background: none;
    cursor: zoom-in;
}

/* ─── o menu da mensagem ───────────────────────────────────────── */

/* Responder, reagir e editar saíram de dentro da bolha: agora abrem no menu do
   botão direito, como no WhatsApp. Botões pendurados em cada bolha poluíam a
   conversa e ninguém os procurava ali. */
.wa-bolha { position: relative; }

/* A seta de "tem menu aqui" aparece só ao passar o mouse, e sem ocupar lugar:
   é só uma pista de que o botão direito faz alguma coisa. */
.wa-bolha-com-menu::after {
    content: "⌄";
    position: absolute;
    top: 0;
    right: 6px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}

.wa-bolha-com-menu:hover::after { opacity: 0.55; }

.wa-bolha-rodape {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

/* Os tiquinhos. O azul de "lida" é escrito na mão e não segue a BU de
   propósito: é o azul que todo mundo já aprendeu a ler no WhatsApp, e trocá-lo
   pela cor do tema faria a informação parar de ser reconhecida de relance. */
.wa-tique {
    font-size: 11px;
    line-height: 1;
    opacity: 0.75;
    letter-spacing: -1px;
}

.wa-tique-lida {
    color: #53bdeb;
    opacity: 1;
}

.wa-escrever-area {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
}

/* Arrastando um arquivo por cima: a área inteira acende, para a pessoa saber
   que pode soltar ali. Sem sinal nenhum, arrastar vira tentativa e erro. */
.wa-soltando {
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* A prévia do que vai ser enviado. O teto de altura existe porque um print de
   tela cheia tem mais de mil pixels e empurraria os botões do modal para fora. */
.wa-previa-envio {
    display: block;
    max-width: 100%;
    max-height: 340px;
    margin: 0 auto 4px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

/* A barra de "respondendo a" fica ENTRE o fio e a caixa de escrever, com a
   listra na cor da BU — o mesmo desenho da citação dentro da bolha, para a
   pessoa reconhecer que é a mesma coisa. */
.wa-respondendo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 84px 10px 16px;
    border-top: 1px solid var(--card-border);
    /* Fundo na cor da BU, bem claro. A primeira versão usava o mesmo cinza do
       resto e a barra passava despercebida — quem clicava em "responder" não
       via diferença nenhuma na tela e achava que não tinha funcionado. */
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

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

.wa-respondendo-dados {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    padding-left: 10px;
    border-left: 3px solid var(--accent);
}

.wa-respondendo-autor {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
}

.wa-respondendo-texto {
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A miniatura vai à DIREITA do texto, como no WhatsApp: o olho lê o autor e o
   trecho primeiro, e a imagem confirma qual é. */
.wa-respondendo-mini {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--card-border);
}

.wa-respondendo-cancelar {
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.wa-respondendo-cancelar:hover { color: var(--text-primary); }

/* ─── a caixa de escrever ──────────────────────────────────────── */

/* O padding da direita é maior por um motivo concreto: o botão flutuante do
   chat interno mora no canto inferior direito da janela e cobria o "Enviar". */
.wa-escrever {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 84px 12px 16px;
    border-top: 1px solid var(--card-border);
}

/* Quando a barra de resposta está aberta, ela já traz a linha de cima — duas
   linhas coladas viram um traço grosso. */
.wa-respondendo:not([hidden]) + .wa-escrever { border-top: none; }

/* O clipe é o botão de anexo; o <input type=file> de verdade fica escondido
   atrás dele. O input do navegador não se deixa estilizar, e um "Escolher
   arquivo" cinza no meio de uma conversa destoa de tudo. */
.wa-anexo-botao {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    background: var(--bg);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.wa-anexo-botao:hover { border-color: var(--accent); }

.wa-anexo-input { display: none; }

/* O aviso de "enviando" fica no fim do fio, onde a bolha vai nascer. */
.wa-enviando {
    align-self: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--column-bg, #f0f0f0);
    font-size: 12.5px;
    color: var(--text-secondary);
}

.wa-escrever-campo {
    flex: 1;
    min-height: 38px;
    max-height: 120px;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    resize: vertical;
}

.wa-escrever-campo:focus {
    outline: none;
    border-color: var(--accent);
}

.wa-grupo-parado {
    padding: 16px;
    border-top: 1px solid var(--card-border);
    flex-shrink: 0;
}

.wa-grupo-parado .btn { margin-top: 10px; }

/* ─── administração dos números ────────────────────────────────── */

.wa-voltar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.wa-escolha-numero {
    height: 34px;
    min-width: 180px;
}

/* -----------------------------------------------------------------
   A tabela (mesma medida da do Inventário)
   ----------------------------------------------------------------- */

.page-whatsapp .wa-tabela-wrap {
    overflow-x: auto;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 6px;
}

.page-whatsapp .wa-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.page-whatsapp .wa-tabela th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom: 1px solid var(--card-border);
    background: var(--column-bg, #f7f8fa);
}

.page-whatsapp .wa-tabela td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
}

.page-whatsapp .wa-tabela tbody tr:last-child td {
    border-bottom: none;
}

.page-whatsapp .wa-linha:hover {
    background: var(--column-bg, #f7f8fa);
}

.page-whatsapp .wa-col-nome {
    font-weight: 600;
    color: var(--text-primary);
}

/* Fonte de largura fixa no telefone: número alinha com número, e fica claro
   que aquilo é dado do sistema, não texto que alguém escreveu. */
.page-whatsapp .wa-col-fone {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: nowrap;
}

.page-whatsapp .wa-col-acoes {
    text-align: right;
    white-space: nowrap;
}

.wa-linha-acoes {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------
   Situação e "quem lê"
   ----------------------------------------------------------------- */

.wa-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.wa-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
}

.wa-status-ok { color: var(--wa-ok); border-color: color-mix(in srgb, var(--wa-ok) 40%, transparent); }
.wa-status-ok::before { background: var(--wa-ok); }

.wa-status-erro { color: var(--wa-erro); border-color: color-mix(in srgb, var(--wa-erro) 40%, transparent); }
.wa-status-erro::before { background: var(--wa-erro); }

/* "Todo mundo com permissão" é um AVISO, não um dado: é o estado em que um
   número pessoal fica legível para quem não deveria. Por isso destoa — a lista
   precisa mostrar isso sem ninguém abrir cada número para descobrir. */
.wa-quem { color: var(--text-secondary); }

.wa-quem-aberto {
    color: var(--wa-erro);
    font-weight: 600;
}

/* -----------------------------------------------------------------
   Dentro do modal
   ----------------------------------------------------------------- */

.wa-modal-titulo {
    margin: 0;
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 400;
    color: var(--text-primary);
}

.wa-modal-recado {
    font-size: 12px;
    color: var(--text-secondary);
}

.wa-ajuda {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.wa-ajuda strong { color: var(--text-primary); }

/* -----------------------------------------------------------------
   Grade de escolha (BUs e pessoas)
   -----------------------------------------------------------------

   COLUNAS de largura igual, e não caixinhas soltas quebrando linha.
   A primeira versão soltava tudo em `flex-wrap`: com doze BUs e dezesseis
   pessoas virou uma parede irregular, em que o olho não achava nome
   nenhum. Em grade, os nomes alinham e a lista volta a ser lista. */

.wa-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px;
    margin-top: 10px;
    max-height: 240px;
    overflow-y: auto;
}

.wa-grade-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.wa-grade-item:hover { background: var(--column-bg, #f7f8fa); }

.wa-grade-item[hidden] { display: none; }

/* O nome corta com reticências em vez de empurrar a coluna: um nome longo não
   pode desalinhar a grade inteira. */
.wa-grade-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-busca { margin-top: 10px; }

/* A lista de nomes fica recuada sob a opção "só estas pessoas", para deixar
   claro que ela pertence àquela escolha e não à seção inteira. */
.wa-sublista {
    margin: 4px 0 0 30px;
    padding-left: 14px;
    border-left: 2px solid var(--card-border);
}

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

/* As duas opções de remoção. Cada uma é um bloco com título e explicação: a
   diferença entre elas é o destino de conversa de outras pessoas, e isso não
   cabe num rótulo de uma linha. */
.wa-opcao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
    padding: 11px 14px;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    cursor: pointer;
}

.wa-opcao:hover { border-color: var(--accent); }

/* A opção marcada fica evidente: com duas escolhas de mesmo peso visual,
   descobrir qual está valendo exige procurar o pontinho preenchido. */
.wa-opcao:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Cada seção do modal separada por uma linha: sem isso, "BUs" e "quem lê"
   corriam juntas e pareciam uma pergunta só.
   
   O seletor é preso ao NOSSO modal (#wa-modal-overlay) de propósito. Este
   arquivo é carregado em toda página: um `.modal-section + .modal-section`
   solto acrescentaria essa linha em todos os modais da intranet — Chamados,
   Inventário, Tarefas — sem ninguém pedir. É a regra 1 do topo deste arquivo,
   e ela quase escapou aqui. */
#wa-modal-overlay .modal-section + .modal-section {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
}
.wa-opcao input { margin-top: 3px; }

.wa-opcao-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 14px;
    color: var(--text-primary);
}

.wa-opcao-ajuda {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Fundo branco fixo, e é a única cor escrita na mão desta seção: QR code é
   preto sobre branco por definição do formato. Num tema escuro, deixar o fundo
   seguir a BU faria o celular não conseguir ler o código. */
.wa-qr-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    margin: 16px auto 0;
    padding: 16px;
    max-width: 320px;
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: 6px;
}

.wa-qr-img {
    width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------------------------------------------
   Estados vazios e avisos
   ----------------------------------------------------------------- */

.wa-vazio,
.wa-aviso {
    margin: 0;
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    border-radius: 6px;
}

/* O estado vazio pode trazer o caminho de saída junto: sem nenhum número, o
   botão de adicionar é a única coisa que a pessoa tem a fazer nesta tela. */
.wa-vazio > p {
    margin: 0 0 12px;
}

/* -----------------------------------------------------------------
   Ícone do menu lateral
   ----------------------------------------------------------------- */

.ni-whatsapp {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.5 8.5 0 0 1-12.6 7.4L3.5 20.5l1.6-4.3a8.5 8.5 0 1 1 15.4-4.6z'/%3E%3Cpath d='M8.8 9.2c.2-.6.5-.6.8-.6h.6c.2 0 .5 0 .7.5l.7 1.6c.1.3 0 .5-.1.7l-.4.4c-.1.2-.2.3 0 .6a6 6 0 0 0 2.6 2.2c.3.1.5.1.6 0l.5-.6c.2-.2.4-.2.6-.1l1.6.8c.3.1.4.3.4.5a1.9 1.9 0 0 1-1.3 1.6c-.5.2-1.2.2-3.4-.8a8.3 8.3 0 0 1-3.6-3.6c-.9-1.9-.7-2.7-.5-3.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.5 8.5 0 0 1-12.6 7.4L3.5 20.5l1.6-4.3a8.5 8.5 0 1 1 15.4-4.6z'/%3E%3Cpath d='M8.8 9.2c.2-.6.5-.6.8-.6h.6c.2 0 .5 0 .7.5l.7 1.6c.1.3 0 .5-.1.7l-.4.4c-.1.2-.2.3 0 .6a6 6 0 0 0 2.6 2.2c.3.1.5.1.6 0l.5-.6c.2-.2.4-.2.6-.1l1.6.8c.3.1.4.3.4.5a1.9 1.9 0 0 1-1.3 1.6c-.5.2-1.2.2-3.4-.8a8.3 8.3 0 0 1-3.6-3.6c-.9-1.9-.7-2.7-.5-3.2z'/%3E%3C/svg%3E");
}

/* Nova conversa — o botão fica no topo da coluna, parado ali enquanto a lista
   rola por baixo, como o lápis do WhatsApp. Sem isso ele sumiria da vista assim
   que a lista crescesse, que é justamente quando alguém precisa dele. */
.wa-nova-conversa {
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    width: calc(100% - 1.5rem);
    margin: 0.75rem;
    text-align: center;
}

/* Foto de perfil — fica POR CIMA das iniciais, dentro do mesmo círculo. As
   iniciais continuam embaixo de propósito: muita gente não tem foto, quem
   esconde a foto na privacidade não devolve nada, e a imagem pode falhar. Assim
   nunca aparece quadrado quebrado, só o círculo de sempre. */
.wa-avatar-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* ─── reações e mensagens apagadas ────────────────────────────── */

/* Os emojis ficam PARA FORA da bolha, embaixo, como no WhatsApp: dentro dela
   empurrariam o texto e mudariam a altura de cada mensagem toda vez que alguém
   reagisse. */
.wa-reacoes {
    position: absolute;
    bottom: -10px;
    left: 8px;
    display: flex;
    gap: 2px;
    padding: 1px 5px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

.wa-bolha-minha .wa-reacoes { left: auto; right: 8px; }

.wa-reacao-minha { filter: saturate(1.4); }

/* A bolha precisa de espaço embaixo para a faixa não encostar na próxima. */
.wa-bolha { position: relative; }
.wa-bolha:has(.wa-reacoes) { margin-bottom: 14px; }

.wa-bolha-apagada .wa-bolha-texto {
    font-style: italic;
    opacity: 0.65;
}

/* O menu fica no <body> e é posicionado onde o clique caiu: a conversa rola
   dentro de uma caixa com recorte, e um menu preso à bolha seria cortado
   justamente nas mensagens do alto e do pé. */
.wa-menu {
    position: fixed;
    z-index: 60;
    min-width: 168px;
    padding: 6px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg, #fff);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}

.wa-menu-itens {
    display: flex;
    flex-direction: column;
}

.wa-menu-item {
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    padding: 7px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
}

.wa-menu-item:hover { background: var(--column-bg, #f2f3f5); }

/* A régua de emoji fica em cima dos itens, como no WhatsApp. */
.wa-emojis {
    display: flex;
    gap: 2px;
    padding: 2px 2px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--card-border);
}

.wa-emoji {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 50%;
    transition: transform 0.1s;
}

.wa-emoji:hover { transform: scale(1.25); }
.wa-emoji-escolhido { background: var(--accent-soft, rgba(0, 0, 0, 0.08)); }

/* "editada" fica discreto, ao lado da hora, como no WhatsApp: é um aviso de que
   o texto mudou, não uma informação para ler antes do texto. */
.wa-bolha-editada {
    font-size: 11px;
    font-style: italic;
    opacity: 0.6;
    margin-right: 4px;
}

.wa-edicao {
    width: 100%;
    resize: vertical;
    font-family: inherit;
}