/*
 * =================================================================================================
 * A CAIXA DE ENTRADA DE WHATSAPP (D22) — a mesa de atendimento, o fio e a doca
 * =================================================================================================
 *
 * Ordem do dono, 19/08/2026, palavras dele: *"Capricha no layout desse WhatsApp. Ele tem que
 * parecer com o WhatsApp normal — fundo, a posição dos botões, o tamanho do texto da caixa de
 * texto. Olha a caixa de texto espremida. (…) tem que simular mesmo o WhatsApp, tem que fazer
 * igual (…) Na tela inteira a gente pode fazer de uma forma que tenha mais espaço, igual ao
 * Octadesk (…) de um lado você põe o cadastro do cliente, do outro lado a lista dos que estão
 * esperando."*
 *
 * ## O que se copia, e o que NÃO se copia
 *
 * Copia-se **proporção, hierarquia, espaçamento e comportamento** — o papel de parede texturado, o
 * balão claro à esquerda e o verde à direita com o rabinho no primeiro de cada bloco, a hora e os
 * tiques DENTRO do balão, a pílula de data no meio do fio, a barra de composição em pílula que
 * cresce até N linhas. **Não se copia arte da Meta**: nenhum SVG, ícone, fonte ou imagem deles
 * entra aqui. Os ícones são os do Bootstrap que o projeto já carrega, e a cor vem toda de token
 * `--keys-wa-*` (definidos no `tokens.css`, com o contraste medido nos dois temas ao lado de cada
 * linha). Onde a paleta do Keys difere da da Meta, quem manda é a do Keys.
 *
 * Três números vieram medidos do produto real e estão escritos aqui porque sustentam o desenho:
 *
 *   · **raio do balão 7,5px** — é o valor que o próprio WhatsApp Web usa para reconstituir os
 *     quatro cantos quando o rabinho é removido;
 *   · **o papel de parede é uma CAMADA sobre uma cor sólida**, com opacidade própria, ladrilhada
 *     no tamanho nativo — não é uma imagem esticada no fundo do painel. Aqui a camada é feita de
 *     gradientes (CSP `default-src 'self'`: nada de CDN, e um data-URI com cor dentro não saberia
 *     trocar de tema);
 *   · **as colunas laterais são px FIXOS e só o miolo flexiona** — é o que Octadesk (lista 440px
 *     no clássico, ficha 320px) e os inboxes do mesmo gênero fazem, e é o oposto do que uma grade
 *     de porcentagens faria: a ficha do cliente não pode encolher junto com a janela, porque os
 *     campos dela têm largura mínima de leitura.
 *
 * ## Regra de layout do app: NADA AQUI ROLA DE LADO
 *
 * O fio rola na VERTICAL, dentro da própria caixa, e o texto quebra — uma URL de 300 caracteres
 * colada pelo cliente não pode empurrar a página inteira (`LarguraCelularTest`). Toda caixa que
 * rola declara `overflow-x: hidden` E `position: relative`: sem bloco contêiner, um
 * `.visually-hidden` lá dentro (que é `absolute`) fica pendurado fora dela e estica o documento.
 */

/* ==========================================================================================
   0. GEOMETRIA — os números do desenho, num lugar só
   ========================================================================================== */

:root {
    /* Só o VALOR DE FÁBRICA da doca. Quem manda é a preferência do usuário, que o `layout_app.php`
       emite num `<style>` no 1º paint (migration 2440) e o `whatsapp-doca.js` atualiza no arrasto. */
    --keys-wa-doca-larg: 380px;

    /* O raio do balão. 7,5px é o número do produto real — e ele NÃO é `--keys-raio-sm` (10px) de
       propósito: o balão de conversa é a peça mais repetida da tela e 2,5px a mais já a fazem
       parecer um cartão do sistema em vez de uma mensagem. */
    --keys-wa-raio-balao: 7.5px;
    --keys-wa-rabo: 8px;              /* a largura do rabinho do primeiro balão de cada bloco */

    /* As duas colunas fixas da mesa (§ mesa). Só o miolo flexiona. */
    --keys-wa-fila-larg: 320px;
    --keys-wa-ficha-larg: 320px;

    /* O teto da mesa. O WhatsApp Web também capa a largura do app: passado certo ponto, a linha de
       conversa fica larga demais para o olho voltar ao começo dela. */
    --keys-wa-mesa-max: 1600px;
}

/* ==========================================================================================
   1. O FIO — o papel de parede e os balões
   ========================================================================================== */

/*
 * O PAPEL DE PAREDE, EM DUAS CAMADAS (é assim que o original faz).
 *
 * Camada 1: a cor sólida (`background-color`). Camada 2: o desenho, ladrilhado, em tinta de véu
 * (`--keys-wa-tela-risco`, ~5% de alfa). Separá-las é o que faz o tema escuro trocar as duas de
 * uma vez sem redesenhar nada — e é o motivo de o desenho ser GRADIENTE e não imagem: um data-URI
 * carrega a cor dentro, então precisaria de duas cópias, uma por tema, e as duas divergiriam na
 * primeira correção.
 *
 * O ladrilho tem 148px e mistura pontos de tamanhos diferentes com dois anéis — a irregularidade é
 * o que o faz ler como "papel", e não como papel milimetrado. `background-attachment` fica no
 * padrão (`scroll`): dentro de uma caixa que rola, isso prende o desenho à caixa, e são as
 * mensagens que passam por cima dele. É o comportamento do original.
 */
.keys-wa-fio {
    flex: 1 1 auto;
    min-height: 0;
    /* Coluna de flex + um espaçador com `margin-top: auto` (o `.keys-wa-empurra`, primeiro filho):
       é o idioma de conversa. Uma conversa de duas mensagens fica COLADA NO COMPOSITOR, como no
       aplicativo, em vez de flutuar no alto de um painel vazio; e, quando o conteúdo passa da
       altura, o `auto` vira zero sozinho e a rolagem funciona normal. `justify-content: flex-end`
       faria o mesmo desenho e quebraria a rolagem para cima em navegador que ainda tenha o defeito
       antigo — o espaçador não tem esse risco. */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    /* Bloco contêiner da caixa que rola — sem ele, o `.visually-hidden` de um selo de entrega fica
       pendurado fora e estica o documento (`LarguraCelularTest`, REGRA 3-C). */
    position: relative;
    overscroll-behavior: contain;
    padding: 0.75rem 0.85rem 0.5rem;
    background-color: var(--keys-wa-tela);
    background-image:
        radial-gradient(circle at 14% 20%, var(--keys-wa-tela-risco) 0 2.6px, transparent 2.7px),
        radial-gradient(circle at 62% 12%, var(--keys-wa-tela-risco) 0 1.7px, transparent 1.8px),
        radial-gradient(circle at 38% 58%, var(--keys-wa-tela-risco) 0 2.1px, transparent 2.2px),
        radial-gradient(circle at 86% 70%, var(--keys-wa-tela-risco) 0 2.5px, transparent 2.6px),
        radial-gradient(circle at 8% 82%, var(--keys-wa-tela-risco) 0 1.6px, transparent 1.7px),
        radial-gradient(circle at 54% 92%, var(--keys-wa-tela-risco) 0 1.4px, transparent 1.5px),
        radial-gradient(circle at 78% 36%, transparent 0 5.2px, var(--keys-wa-tela-risco) 5.3px 6.2px, transparent 6.3px),
        radial-gradient(circle at 24% 76%, transparent 0 3.8px, var(--keys-wa-tela-risco) 3.9px 4.8px, transparent 4.9px);
    background-size: 148px 148px;
}

/* O espaçador que empurra a conversa para o fim do fio — ver o comentário do `.keys-wa-fio`. */
.keys-wa-empurra { margin-top: auto; }

/* A LINHA de uma mensagem. Quem decide o lado é a direção, e o `justify-content` da linha. */
.keys-wa-linha-msg {
    display: flex;
    flex: none;                      /* filho de flex column: não estica nem encolhe de altura */
    margin-bottom: 2px;              /* dentro de um bloco os balões quase se encostam */
}
.keys-wa-linha-msg-nossa { justify-content: flex-end; }

/* O PRIMEIRO balão de cada bloco (mudou quem fala, ou passou muito tempo) ganha ar em cima e o
   rabinho. Os seguintes ficam colados — é o agrupamento que o original faz, e é o que transforma
   três mensagens seguidas do cliente numa fala só, em vez de três cartões. */
.keys-wa-bloco { margin-top: 0.6rem; }

.keys-wa-balao {
    position: relative;              /* bloco contêiner do rabinho, que é `absolute` */
    max-width: 65%;
    min-width: 5.5rem;               /* senão "ok" vira um balão mais estreito que a própria hora */
    padding: 0.4rem 0.5rem 0.35rem;
    border-radius: var(--keys-wa-raio-balao);
    box-shadow: var(--keys-wa-balao-sombra);
    font-size: 0.9rem;
    line-height: 1.35;
}

.keys-wa-balao-deles {
    background: var(--keys-wa-chegou);
    color: var(--keys-tinta);
}

.keys-wa-balao-nosso {
    background: var(--keys-wa-saiu);
    color: var(--keys-tinta);
}

/*
 * O RABINHO — o canto que aponta para quem falou.
 *
 * No produto original ele é um SVG irmão do balão; aqui é um `::before` triangular, porque o
 * resultado visual é o mesmo e um elemento a menos por mensagem importa numa lista de duzentas.
 * O canto de cima do lado correspondente vai a zero (é o que o próprio WhatsApp desfaz quando
 * alguém desliga os rabinhos), e o triângulo continua a superfície do balão para fora dele.
 *
 * ⚠️ `absolute` DENTRO de uma caixa que rola: o bloco contêiner é o próprio balão
 * (`position: relative` acima), então ele é recortado junto e não estica documento nenhum. O
 * `padding` horizontal do fio (0,85rem) é maior que o rabinho (8px), então ele também nunca
 * encosta na borda da caixa.
 */
.keys-wa-bloco .keys-wa-balao::before {
    content: '';
    position: absolute;
    top: 0;
    width: var(--keys-wa-rabo);
    height: var(--keys-wa-rabo);
}

.keys-wa-bloco .keys-wa-balao-deles {
    border-top-left-radius: 0;
}
.keys-wa-bloco .keys-wa-balao-deles::before {
    left: calc(-1 * var(--keys-wa-rabo));
    background: var(--keys-wa-chegou);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.keys-wa-bloco .keys-wa-balao-nosso {
    border-top-right-radius: 0;
}
.keys-wa-bloco .keys-wa-balao-nosso::before {
    right: calc(-1 * var(--keys-wa-rabo));
    background: var(--keys-wa-saiu);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/*
 * O texto do cliente é TEXTO DE TERCEIRO: pode vir com uma URL de 300 caracteres sem espaço, e sem
 * a quebra forçada ela esticaria o balão, a coluna e a página. `pre-wrap` preserva as quebras de
 * linha que a pessoa digitou — em conversa, parágrafo é conteúdo.
 */
.keys-wa-texto {
    /* `flow-root` CONTÉM o float da hora sem clipar nada — é o que faz "ok" caber numa linha só
       (com a hora ao lado) e um parágrafo de dez linhas empurrar a hora para a última. Sem ele o
       float escaparia do bloco e o aviso de falha, logo abaixo, se enrolaria em volta dele. */
    display: flow-root;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/*
 * A HORA E OS TIQUES, DENTRO DO BALÃO E À DIREITA — como no original.
 *
 * `float: right` com um irmão vazio é o truque que o próprio WhatsApp usa: numa mensagem curta a
 * hora senta na MESMA linha do texto; numa longa, ela desce sozinha para o canto. Uma linha
 * separada em `flex` (o que estava aqui antes) gastava uma altura inteira em toda mensagem de
 * duas palavras — e são elas a maioria de uma conversa.
 */
.keys-wa-meta {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    /* `margin-left` é a folga entre a última palavra e a hora; o `margin-top` alinha a base da hora
       com a base da linha de texto (a fonte da hora é menor). */
    margin: 0.3rem 0 0 0.5rem;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--keys-wa-meta);
    white-space: nowrap;
}
/* Quem escreveu (caixa compartilhada: um número por casa). Só o primeiro nome — o inteiro no
   `title`, a um ponteiro de distância. */
.keys-wa-meta-autor {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}
/* Os dois tiques azuis de "lida" — o único ponto da conversa em que a cor diz um estado, e por
   isso ela vem sempre com rótulo escrito ao lado (`.visually-hidden`), nunca sozinha (P9). */
.keys-wa-lida { color: var(--keys-wa-lida); }

/* A PÍLULA DA DATA no meio do fio ("Hoje", "Ontem", "14/08"). Centralizada, e é ela que agrupa a
   conversa por dia — sem ela, uma resposta de três dias atrás lê-se como a de agora. */
.keys-wa-dia {
    display: flex;
    flex: none;
    justify-content: center;
    margin: 0.75rem 0 0.5rem;
}
.keys-wa-dia > span {
    padding: 0.25rem 0.75rem;
    border-radius: var(--keys-wa-raio-balao);
    background: var(--keys-wa-pilula);
    color: var(--keys-wa-meta);
    box-shadow: var(--keys-wa-balao-sombra);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* O fio VAZIO: a frase fica no meio do papel de parede, dentro de uma pílula, e não solta sobre o
   padrão (onde ficaria ilegível). */
.keys-wa-fio-vazio {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}
.keys-wa-fio-vazio > span {
    padding: 0.4rem 0.9rem;
    border-radius: var(--keys-wa-raio-balao);
    background: var(--keys-wa-pilula);
    color: var(--keys-wa-meta);
    box-shadow: var(--keys-wa-balao-sombra);
    font-size: 0.82rem;
    text-align: center;
}

/* ==========================================================================================
   2. O COMPOSITOR — a queixa nº 1 do dono, e o número que a explica
   ==========================================================================================

   Palavras dele: *"Olha a caixa de texto espremida. O texto que está dentro da caixa de texto,
   espremido também, não está legal não."*

   MEDIDO antes de mexer, na doca da conta de demonstração: o campo de texto tinha **125px de
   largura a 380px de painel** e **28px a 280px** — vinte e oito pixels, menos que três letras.
   A causa não era o campo: era a fila de acompanhantes. O formulário era
   `clipe · microfone · campo · [ícone + a palavra "Enviar"]` numa linha só, e os três vizinhos
   comiam ~200px dos ~325 disponíveis.

   O conserto tem três partes, e nenhuma delas é "diminuir a fonte":

    1. **os acompanhantes viram ícones redondos de 2rem** (2,25rem na tela cheia), sem palavra
       nenhuma — o rótulo continua existindo para leitor de tela e para o `title`;
    2. **o microfone muda de lado**: ele fica junto do enviar, à direita, que é onde o original o
       põe. Dois ícones de cada lado do campo, e não três de um lado;
    3. **o campo é uma pílula que CRESCE** até ~6 linhas e só então rola (o `whatsapp-compositor.js`
       faz o ajuste; `field-sizing` cobre o navegador que o tiver mesmo sem JavaScript). Antes ele
       era um `rows="2"` fixo: gastava duas linhas para uma resposta de uma palavra e continuava
       apertado numa de dez.
*/

.keys-wa-compositor {
    flex: none;
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    min-height: 3.4rem;              /* ~54px; o original mede ~62 com fonte maior */
    padding: 0.4rem 0.5rem;
    background: var(--keys-wa-barra);
    border-top: 1px solid var(--keys-borda);
}

/* O botão redondo de ícone. Alvo de 2rem = 32px; no telefone e na tela cheia ele cresce (abaixo).
   ⚠️ Ícone SEM PALAVRA continua precisando de nome: todo uso traz `title` + `aria-label`, e há
   linter cobrando isso. */
.keys-wa-icone {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--keys-texto-2);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.keys-wa-icone:hover,
.keys-wa-icone:focus-visible {
    background: var(--keys-superficie-2);
    color: var(--keys-tinta);
}
.keys-wa-icone:focus-visible {
    outline: 2px solid var(--keys-anel-foco);
    outline-offset: 1px;
}
.keys-wa-icone[disabled] { opacity: 0.5; cursor: default; }

/* O botão de ENVIAR é o único preenchido — é a ação primária, e no original ele também é o único
   com cor de marca. Texto escuro sobre o ouro (nunca branco: reprova AA). */
.keys-wa-icone-enviar {
    background: var(--keys-primaria);
    color: var(--keys-sobre-primaria);
}
.keys-wa-icone-enviar:hover,
.keys-wa-icone-enviar:focus-visible {
    background: var(--keys-primaria-escura);
    color: var(--keys-sobre-primaria);
}

/* A PÍLULA do campo. Ela é quem tem o fundo e o raio; o `<textarea>` por dentro é transparente e
   sem borda — assim o cursor começa onde o desenho começa, e não 1px depois de uma moldura. */
.keys-wa-campo {
    flex: 1 1 auto;
    min-width: 0;                    /* sem isto o flex recusa encolher e o painel rola de lado */
    display: flex;
    align-items: flex-end;
    background: var(--keys-wa-campo);
    border: 1px solid var(--keys-borda);
    border-radius: 1.15rem;
}

.keys-wa-entrada {
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.9rem;
    border: 0;
    background: transparent;
    color: var(--keys-tinta);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.35;
    resize: none;
    /* ⚠️ `field-sizing: content` foi TENTADO e RECUSADO (medido em 19/08/2026). Onde o navegador o
       implementa, ele dimensiona a caixa VAZIA pelo PLACEHOLDER — e "Escreva para o cliente…" ocupa
       duas linhas numa doca de 280px. Resultado: o compositor nascia com o dobro da altura, e o JS
       (que lê `scrollHeight` para crescer) herdava esse número e o congelava. Quem faz a caixa
       crescer é o `whatsapp-compositor.js`, e ele parte de uma linha. O teto é ~6 linhas: passado
       ele, a caixa rola por dentro em vez de comer o fio da conversa. */
    max-height: 8.6rem;
    overflow-y: auto;
    overflow-x: hidden;
    /* Bloco contêiner por segurança: a caixa rola, e a regra da casa é que caixa que rola contém. */
    position: relative;
}
.keys-wa-entrada:focus { outline: none; }
.keys-wa-campo:focus-within {
    border-color: var(--keys-primaria);
    box-shadow: 0 0 0 2px var(--keys-anel-foco);
}
.keys-wa-entrada::placeholder { color: var(--keys-texto-3); }

/* O chip do arquivo escolhido e a recusa de anexo moram ACIMA da linha do compositor, e não dentro
   da pílula: dentro dela eles empurrariam o cursor para baixo no meio da digitação. */
.keys-wa-compositor-topo {
    flex: none;
    padding: 0.4rem 0.6rem 0;
    background: var(--keys-wa-barra);
}

/* O rodapé fora da janela de 24 h: a lista de modelos com o preço escrito. Não é o compositor
   desabilitado — é outra ferramenta, porque a partir dali a ação é outra. */
.keys-wa-modelos {
    flex: none;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    overscroll-behavior: contain;
    padding: 0.6rem;
    background: var(--keys-wa-barra);
    border-top: 1px solid var(--keys-borda);
}

/* ==========================================================================================
   3. O CABEÇALHO DA CONVERSA — avatar, nome, e as ações em ÍCONE
   ==========================================================================================

   Queixa nº 2 do dono: *"os botões podem ser menores, a quantidade de texto deve ser menor, talvez
   para a ação a gente tenha mais botão com desenho do que botão escrito."*

   MEDIDO: o cabeçalho de ações ocupava **159px de altura numa doca de 380px** (188px a 280px, e
   152px num telefone de 360) — dois a três andares de botão escrito antes da primeira mensagem.
   Agora é uma barra só, de ~3,5rem, com os mesmos atos em ícone.
*/

.keys-wa-topo {
    position: relative;              /* bloco contêiner do menu de transferência, que é `absolute` */
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--keys-wa-barra);
    border-bottom: 1px solid var(--keys-borda);
}

.keys-wa-topo-quem {
    flex: 1 1 auto;
    min-width: 0;
}
.keys-wa-topo-nome {
    display: block;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--keys-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.keys-wa-topo-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--keys-texto-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keys-wa-topo-acoes {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

/*
 * O MENU DE TRANSFERIR — `<details>`, e não um dropdown com JavaScript.
 *
 * Motivo: o miolo da doca é trocado por `innerHTML` a cada volta do polling. `<details>` é HTML
 * nativo — ele funciona no fragmento recém-inserido, funciona sem JavaScript nenhum, e não depende
 * de um componente do Bootstrap ser reinicializado. É o mesmo mecanismo do `.keys-legenda`.
 *
 * O painel é `absolute` com o `.keys-wa-topo` como bloco contêiner (ele é `relative`), então ele
 * não empurra a conversa para baixo ao abrir e não estica documento nenhum.
 */
.keys-wa-menu { flex: none; }
.keys-wa-menu > summary {
    list-style: none;
    cursor: pointer;
}
.keys-wa-menu > summary::-webkit-details-marker,
.keys-wa-menu > summary::marker { display: none; content: ''; }

.keys-wa-menu-painel {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    padding: 0.6rem;
    border: 1px solid var(--keys-borda);
    border-radius: var(--keys-raio-sm);
    background: var(--keys-superficie);
    box-shadow: var(--keys-sombra-2);
}

/* O avatar redondo — 2,5rem, o mesmo calibre do inbox de mesa que serviu de referência. */
.keys-wa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--keys-superficie-2);
    color: var(--keys-texto-2);
    border: 1px solid var(--keys-borda);
}

/* ==========================================================================================
   4. A CONVERSA COMO APLICATIVO — cabeçalho fixo, fio que rola, compositor colado embaixo
   ==========================================================================================
   É o que faz o painel "parecer o WhatsApp aberto": só o FIO se move. O container query é o que
   permite ao mesmo desenho servir uma doca de 280px e uma coluna de 800 sem uma segunda folha.
*/
.keys-wa-conversa {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--keys-wa-tela);
    container-type: inline-size;
    container-name: keys-wa;
}

/* Os avisos que ficam ENTRE o cabeçalho e o fio (simulação e o selo da janela de 24 h). Eles não
   rolam com a conversa de propósito: o selo da janela decide se a próxima resposta é grátis ou
   cobrada, e um aviso de dinheiro que sai da vista ao rolar é um aviso que ninguém leu. */
.keys-wa-avisos {
    flex: none;
    padding: 0.5rem 0.6rem 0;
    background: var(--keys-wa-barra);
}
.keys-wa-avisos > .alert:last-child { margin-bottom: 0.5rem; }

/* ==========================================================================================
   5. A LISTA DE CONVERSAS — a fila de quem está esperando
   ========================================================================================== */

.keys-wa-fila {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--keys-superficie);
}

/* A barra de filtros/abas da fila: fixa no topo da coluna, e o que rola é a lista. */
.keys-wa-fila-topo {
    flex: none;
    padding: 0.5rem 0.6rem;
    background: var(--keys-wa-barra);
    border-bottom: 1px solid var(--keys-borda);
}

/* ---- A TIRA DE FILTROS ------------------------------------------------------------------
 *
 * Ordem do dono, 20/08/2026: *"Onde está Abertas, Não lidas, Arquivadas, poderia ser uma cor de
 * fundo diferente e uma caixa de escolha para ganhar espaço (…) E um símbolo de um filtro, para a
 * pessoa entender — assim como a pesquisa tem a lupa."*
 *
 * **A regra desta coluna é altura, não largura.** Medido no Edge, na conta de demonstração, antes:
 * as pastilhas quebravam em DUAS linhas até 360px (68px) e o formulário caía em TRÊS fileiras
 * (117px) — 193px de filtro numa coluna de 320px onde sobravam 306px de lista, e 199px contra
 * 166px de lista no celular. Depois: duas fileiras, ~84px.
 *
 * `flex-wrap` e não uma grade de colunas: a mesma tira serve 280px (a doca no mínimo) e 380px, e é
 * a própria largura que decide quantas fileiras existem. Uma grade fixa precisaria de uma media
 * query por largura de painel — e o painel é ARRASTÁVEL, então não há breakpoint que o descreva.
 */
.keys-wa-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.3rem;
    border: 1px solid var(--keys-borda);
    border-radius: var(--keys-raio-sm);
    background: var(--keys-wa-filtro-fundo);
}

/*
 * OS DOIS GRUPOS DISPUTAM A LARGURA — E QUEM DECIDE QUANTAS FILEIRAS EXISTEM É O CONTEÚDO.
 *
 * `flex-basis: auto` (o `auto` do atalho) e não uma medida escrita: a tira tem DOIS desenhos
 * diferentes conforme quem a abre — com a caixa de corretor para quem enxerga a casa, sem ela para
 * o corretor —, e uma base fixa que fizesse a busca descer com as três caixas mandaria a busca para
 * uma fileira própria também na tira de duas caixas, onde ela cabia ao lado. Com `auto`, a mesma
 * regra dá duas fileiras a 320px com corretor e UMA fileira a 380px sem ele.
 *
 * ⚠️ `min-width: 0` é o que impede a tira de rolar de lado a 280px: sem ele o `<select>` recusa
 * encolher abaixo do texto da opção mais longa ("Todos os corretores"), o grupo estoura a coluna e
 * a página inteira ganha rolagem horizontal (`LarguraCelularTest`).
 */
.keys-wa-filtro-visao,
.keys-wa-filtro-busca {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

/*
 * DENTRO DO GRUPO, A SOBRA NÃO SE PARTE AO MEIO.
 *
 * A caixa de visão tem quatro textos que o produto escreve ("Abertas", "Não lidas", "Sem dono",
 * "Arquivadas") e nenhum deles cresce; a de corretor mostra o que a imobiliária digitou, de "Ana" a
 * "Todos os corretores". Partir a sobra em partes iguais — que foi a primeira versão, e foi medida —
 * deixava AS DUAS truncadas numa doca de 380px: 66px cada, "Não lidas" virando "Nã…". Aqui a visão
 * fica do tamanho da própria opção mais longa e o corretor leva o resto.
 *
 * `width: auto` junto do `flex` não é redundância: o Bootstrap põe `width: 1%` em todo `.form-select`
 * dentro de um `.input-group`, e com `flex-basis: auto` é o `width` que vira a base — 1% da coluna,
 * ou seja, três pixels.
 *
 * ⚠️ E o seletor tem DOIS níveis de propósito. A regra do vendor é `.input-group > .form-select`,
 * que vale (0,2,0); uma classe sozinha vale (0,1,0) e PERDE, silenciosamente — foi o que aconteceu
 * na primeira versão desta tira, medida: as duas caixas saíram do mesmo tamanho (127px cada a
 * 320px), com "Todos os corretores" cortado em "Todos os co" enquanto sobrava espaço na caixa de
 * visão. Empatar em (0,2,0) e vencer pela ordem do arquivo é o que faz a regra existir.
 */
.keys-wa-filtros .keys-wa-filtro-visao-campo { flex: 0 1 auto; width: auto; min-width: 0; }
.keys-wa-filtros .keys-wa-filtro-dono-campo  { flex: 1 1 6rem; width: auto; min-width: 0; }

/* O símbolo do filtro. Sem `flex: none` ele encolheria junto com os seletores e o funil sairia
   cortado — que é o mesmo defeito do ícone da conversa, e a mesma correção. O recuo é menor que o
   do vendor porque aqui ele não abriga texto: cada pixel dele sai da caixa de corretor ao lado. */
.keys-wa-filtro-simbolo {
    flex: none;
    padding-inline: 0.45rem;
    color: var(--keys-texto-2);
    background: var(--keys-superficie-2);
    border-color: var(--keys-borda-forte);
}

/*
 * A SETA DO `<select>` COMIA 36px DE CADA CAIXA.
 *
 * O Bootstrap reserva `padding-right: 2.25rem` para desenhar a setinha — um número dimensionado
 * para um campo de formulário de página inteira. Numa tira onde duas caixas dividem 257px, são
 * **72px dos 257 gastos com duas setas**, e foi essa conta que fez "Todos os corretores" virar
 * "Todos os co". Aqui a seta encosta mais na borda: continua desenhada, continua clicável (o alvo é
 * a caixa inteira), e devolve ~20px de texto às duas caixas.
 */
.keys-wa-filtros .form-select {
    padding-right: 1.55rem;
    background-position: right 0.4rem center;
}

/*
 * ⚠️ O CAMPO NÃO PODE DESCER DE 16px NO TELEFONE.
 *
 * O `app.css` já protege `.form-control-sm`/`.form-select-sm` abaixo de 576px, porque o iOS aplica
 * zoom sozinho quando o campo que ganha foco tem fonte menor que 16px — e a página NÃO volta ao
 * lugar depois. Aqui os controles moram num `.input-group-sm` e por isso **não levam aquelas
 * classes**: a proteção some sem avisar, e o sintoma aparece só num iPhone de verdade. Repetida
 * aqui, com o motivo escrito, porque o dia em que alguém trocar o `input-group-sm` por outra coisa
 * é o dia em que este bloco vira inofensivo em vez de virar defeito.
 *
 * O recuo sobe junto para o alvo de toque não ficar menor que o de hoje mais do que o necessário:
 * ~37px por fileira contra os 42px de antes — e são só duas fileiras, contra quatro.
 */
@media (max-width: 575.98px) {
    .keys-wa-filtros .form-control,
    .keys-wa-filtros .form-select,
    .keys-wa-filtros .btn,
    .keys-wa-filtros .input-group-text {
        font-size: 1rem;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
}

.keys-wa-fila-rolo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    overscroll-behavior: contain;
}

/* A LINHA de uma conversa. Três andares de informação em ~76px: nome + hora · prévia + contador ·
   os selos que dizem de quem é e como está a janela. */
.keys-wa-linha {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-bottom: 1px solid var(--keys-borda);
    border-radius: 0;
    background: var(--keys-superficie);
    color: var(--keys-tinta);
    text-decoration: none;
}
.keys-wa-linha:hover,
.keys-wa-linha:focus-visible {
    background: var(--keys-superficie-2);
    color: var(--keys-tinta);
}
.keys-wa-linha-corpo { display: block; flex: 1 1 auto; min-width: 0; }
.keys-wa-linha-1,
.keys-wa-linha-2 {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.keys-wa-linha-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
}
.keys-wa-linha-hora {
    flex: none;
    font-size: 0.7rem;
    color: var(--keys-texto-2);
    white-space: nowrap;
}
.keys-wa-linha-previa {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--keys-texto-2);
}
.keys-wa-linha-selos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.15rem;
}
.keys-wa-linha-selos .badge { font-size: 0.62rem; font-weight: 500; }

/* NÃO LIDA: contador em pílula verde + nome em negrito + hora na cor do contador. Três sinais para
   o mesmo fato, porque cor sozinha não é sinal (P9). A faixa lateral de marca continua sendo o
   quarto — é ela que o `whatsapp.js` liga e desliga no polling. */
.keys-wa-nao-lida {
    border-left: 4px solid var(--keys-wa-nova);
    padding-left: calc(0.7rem - 4px);
}
.keys-wa-nao-lida .keys-wa-linha-nome { font-weight: 700; }
.keys-wa-nao-lida .keys-wa-linha-hora { color: var(--keys-wa-lida); }

.keys-wa-pilula-nova {
    flex: none;
    display: inline-block;
    min-width: 1.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--keys-wa-nova);
    color: var(--keys-wa-sobre-nova);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

/* ==========================================================================================
   6. A MESA DE ATENDIMENTO — três colunas na tela cheia (o pedido do Octadesk)
   ==========================================================================================

   *"Na tela inteira a gente pode fazer de uma forma que tenha mais espaço, igual ao Octadesk (…)
   de um lado você põe o cadastro do cliente, do outro lado a lista dos que estão esperando."*

   O desenho base aqui é o do TELEFONE (uma coluna); as três colunas entram no `@media` de 992px,
   lá embaixo, depois do bloco da doca. As duas laterais são px FIXOS e só o miolo flexiona — é o
   que os inboxes de mesa fazem, e o motivo é prático: a ficha do cliente tem largura mínima de
   leitura e não pode encolher junto com a janela.
*/
.keys-wa-mesa {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: var(--keys-wa-mesa-max);
    margin-inline: auto;
}

.keys-wa-painel {
    border: 1px solid var(--keys-borda);
    border-radius: var(--keys-raio);
    background: var(--keys-superficie);
    box-shadow: var(--keys-sombra-1);
    overflow: hidden;                /* o raio precisa recortar o papel de parede do fio */
}

/* No telefone a fila SOME quando há conversa aberta: quem abriu uma conversa quer a conversa, e a
   volta é o botão do cabeçalho. Acima de 992px as duas convivem. */
.keys-wa-mesa-com-conversa > .keys-wa-mesa-fila { display: none; }

/*
 * ⚠️ A COLUNA DA FICHA NASCE ESCONDIDA, e este é o padrão — não a exceção (medido em 19/08/2026).
 *
 * A ficha do cliente é desenhada em DOIS lugares (a coluna daqui e a dobra dentro da conversa), com
 * o mesmo `_ficha.php`, e quem escolhe qual aparece é o CSS. Enquanto esta linha não existia, num
 * telefone de 360px **as duas apareciam**: a dobra acima do fio e a coluna empilhada embaixo, o
 * mesmo telefone e o mesmo nome lidos duas vezes — inclusive por quem usa leitor de tela.
 *
 * A coluna só entra onde ela CABE ao lado da conversa (o bloco de 1200px, lá embaixo). Fora dali,
 * quem responde é a dobra. Começar escondido é o que faz um telefone novo, um monitor estreito ou a
 * doca aberta caírem no caminho certo sem ninguém prever a combinação.
 */
.keys-wa-mesa-ficha { display: none; }

/* Sem conversa escolhida, o miolo diz o que fazer em vez de ficar em branco. */
.keys-wa-nenhuma {
    display: none;                   /* no telefone a fila já é a tela; só aparece na mesa */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--keys-texto-2);
    background-color: var(--keys-wa-tela);
}

/* ==========================================================================================
   7. A DOCA — o painel lateral de conversas (D22, 17/08/2026)
   ==========================================================================================

   Pedido do dono: *"o WhatsApp aparece no canto direito e fica como se fosse ele aberto no
   celular. O sistema diminui um pouquinho para a esquerda, redimensiona. A pessoa pode mostrar e
   ocultar. No computador ele ocupa o lado direito; no celular, a tela inteira."*

   ⚠️ **"DOCA" JÁ TEM OUTRO DONO.** No `app.css`, `--keys-doca-alt` é a FILEIRA HORIZONTAL de
   botões redondos acima da tab bar do telefone. Aqui é o painel lateral do WhatsApp — e por isso
   TUDO leva o prefixo `wa`, sem exceção: `.keys-wa-doca-*`, `--keys-wa-doca-larg`.

   ## O encolhimento é `padding` no `<body>`, e o resto é consequência

   "O sistema diminui para a esquerda" se resolve com uma linha: `padding-right` no `<body>`. Ela
   encolhe navbar, `<main>` e rodapé de uma vez, porque os três estão no fluxo. O que NÃO se
   resolve com ela é o que é `position: fixed` — `padding` no corpo não move nada que se ancore na
   janela. Daí o bloco de recuos abaixo, e daí ele ser explícito e nominal em vez de esperto: são
   cinco elementos conhecidos do chrome, e uma regra "esperta" que tentasse pegar todos acabaria
   pegando também o que não é para mover (a doca, os modais, o backdrop do tour).
   ========================================================================================== */

.keys-wa-doca {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--keys-wa-doca-larg);
    max-width: 100%;
    /* Acima da tab bar e da navbar (1030), acima dos três flutuantes (1040–1042) e da barra de
       ação em lote (1045); ABAIXO do convite de instalação e do backdrop do tour (1050), do painel
       do consultor de IA (1060) e dos toasts (1089/1090). A ordem não é gosto: um aviso do sistema
       tem de continuar aparecendo por cima de um painel que a própria pessoa deixou aberto. */
    z-index: 1046;
    display: flex;
    flex-direction: column;
    background: var(--keys-superficie);
    border-left: 1px solid var(--keys-borda);
    box-shadow: var(--keys-sombra-3);
}

/* `[hidden]` do navegador perde para a classe (especificidade); sem esta linha a doca "fechada"
   continuaria desenhada. */
.keys-wa-doca[hidden] { display: none; }

.keys-wa-doca-topo {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: none;
    padding: 0.5rem 0.75rem;
    background: var(--keys-wa-barra);
    border-bottom: 1px solid var(--keys-borda);
}

.keys-wa-doca-titulo {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--keys-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keys-wa-doca-acao {
    flex: none;
    color: var(--keys-texto-2);
    text-decoration: none;
}
.keys-wa-doca-acao:hover,
.keys-wa-doca-acao:focus-visible { color: var(--keys-primaria-texto); }

/*
 * O MIOLO. `padding: 0` — e isso não é economia de estilo: o papel de parede e as duas barras da
 * conversa têm de sangrar até a borda do painel, senão o que se vê é um WhatsApp dentro de uma
 * moldura em vez do WhatsApp. Quem tem recuo agora é cada peça por dentro.
 */
.keys-wa-doca-corpo {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    /* A rolagem PARA na borda do painel em vez de continuar na página de trás. Sem isto, chegar ao
       fim da lista de conversas rola o cadastro que a pessoa deixou aberto — e ela volta para uma
       tela que "andou sozinha". */
    overscroll-behavior: contain;
    padding: 0;
    background: var(--keys-fundo);
}

/* O flash de resultado ("está na fila de reenvio") vem do `layout_fragmento`, antes do miolo, e
   precisa do recuo que o painel deixou de ter. */
.keys-wa-doca-corpo > .alert { margin: 0.6rem; }

/* A conversa DENTRO da doca ocupa a altura toda do painel: cabeçalho em cima, compositor embaixo,
   e só o fio rolando no meio. É o que faz o painel parecer o aplicativo, e não uma página estreita. */
.keys-wa-doca-corpo > .keys-wa-conversa,
.keys-wa-doca-corpo > .keys-wa-fila { height: 100%; }

/* ---- O SELO DA JANELA DE 24 H DENTRO DA DOCA ----------------------------
 *
 * Decisão do dono, 18/08/2026: *"talvez não caiba na tela 100% do jeito novo, mas pode fazer em um
 * tamanho menor — mais MANTER, porque ajuda a pessoa a entender. Inclusive o simplesinho de
 * interrogação, que a pessoa para o mouse e vê o porquê."*
 *
 * Este bloco é o "tamanho menor", e ele é **requisito**, não estética: a janela de 24 h é o que
 * decide se a resposta sai de graça ou vira modelo cobrado na conta da imobiliária. A economia de
 * espaço vem de fonte, recuo e margem — nunca de `display: none`, e nunca do "?", que é o par
 * obrigatório do número (P9: o dado aparece **e** se explica).
 *
 * Sem cor nenhuma aqui de propósito: quem pinta continua sendo o `alert-*` do Bootstrap
 * (verde/amarelo/cinza pelos três estados da janela), já conferido nos dois temas. Redefinir cor
 * neste ponto criaria uma segunda paleta para o mesmo aviso.
 */
.keys-wa-janela-doca {
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.5rem;
    gap: 0.35rem;
    line-height: 1.3;
}

/* O "?" não encolhe junto com o texto: alvo de mouse menor que ~1rem vira alvo que ninguém acerta. */
.keys-wa-janela-doca .keys-ajuda {
    flex: none;
    font-size: 1rem;
}

/* ---- O puxador de largura (só no computador) ---------------------------- */

.keys-wa-doca-puxador {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.5rem;
    margin-left: -0.25rem;   /* alvo mais largo que a linha, sem empurrar o conteúdo */
    cursor: col-resize;
    background: transparent;
    touch-action: none;
    z-index: 1;
}
.keys-wa-doca-puxador:hover,
.keys-wa-doca-puxador:focus-visible { background: var(--keys-primaria); }
.keys-wa-doca-puxador:focus-visible {
    outline: 2px solid var(--keys-anel-foco);
    outline-offset: 0;
}

/*
 * ENQUANTO SE ARRASTA (classe posta pelo `whatsapp-doca.js` no `<body>`). Sem ela, o arrasto
 * seleciona o texto da tela de trás — o cursor vira "I" no meio do gesto, a página fica com meia
 * lista pintada de azul e o próximo clique desfaz a seleção em vez de fazer o que se queria. E o
 * cursor de redimensionar tem de valer para a JANELA INTEIRA durante o gesto: o ponteiro sai de
 * cima do puxador (é o que arrastar significa) e voltaria à seta no meio do caminho.
 */
.keys-wa-doca-arrastando {
    user-select: none;
    cursor: col-resize;
}

/* ---- NO COMPUTADOR: o produto encolhe para a esquerda -------------------- */

@media (min-width: 992px) {
    body.keys-wa-doca-aberta { padding-right: var(--keys-wa-doca-larg); }

    /* O que é `position: fixed` não anda com o `padding` do corpo — recua um por um.
       Sem estas quatro linhas, o convite de instalação passaria POR BAIXO da doca, o toast de
       "desfazer" nasceria escondido atrás dela (e desfazer é a única chance de reverter), e os
       três flutuantes ficariam inalcançáveis no canto que a doca ocupa.
       `--keys-fab-borda` é reusado, nunca copiado: a distância da borda continua sendo decisão do
       `app.css`; o que muda aqui é ONDE fica a borda. */
    body.keys-wa-doca-aberta .keys-instalar-banner,
    body.keys-wa-doca-aberta .toast-container.bottom-0.end-0 { right: var(--keys-wa-doca-larg); }
    body.keys-wa-doca-aberta .keys-barra-lote { left: calc(50% - var(--keys-wa-doca-larg) / 2); }
    body.keys-wa-doca-aberta .keys-feedback,
    body.keys-wa-doca-aberta .keys-chat-ia,
    body.keys-wa-doca-aberta .keys-camera-doc {
        right: calc(var(--keys-fab-borda) + var(--keys-wa-doca-larg));
    }

    /* O encolhimento acompanha o painel em vez de saltar. Curto (0,2 s) de propósito: isto
       acontece no meio do trabalho de alguém, não é uma abertura de tela. */
    body { transition: padding-right 0.2s ease; }
}

/* ---- NO TELEFONE: a tela inteira ---------------------------------------- */

@media (max-width: 991.98px) {
    .keys-wa-doca {
        left: 0;
        width: 100%;
    }
    /* Nada a arrastar quando o painel já é a tela toda — e um alvo de arrasto invisível na borda
       esquerda roubaria o gesto de "voltar" do navegador. */
    .keys-wa-doca-puxador { display: none; }
}

/* ==========================================================================================
   8. A MESA, NO MONITOR — duas colunas, e três quando há espaço para as três
   ==========================================================================================

   ⚠️ Este bloco vem DEPOIS do `@media (min-width: 992px)` da doca de propósito: `WhatsAppDocaTest`
   recorta "o bloco do monitor" a partir da PRIMEIRA ocorrência dessa media query para conferir que
   todo flutuante recua junto com o painel. Pôr este bloco antes faria o teste medir a mesa e
   aprovar uma doca que tapa o botão de desfazer.

   ## Por que a TERCEIRA coluna tem um segundo corte, e por que ele olha para a doca

   MEDIDO a 1366px com a doca aberta: as três colunas deixavam **278px** para a conversa — o painel
   central, que é o que o dono mandou fazer "igual ao WhatsApp", ficava mais estreito que a doca.
   A doca come `--keys-wa-doca-larg` (380px de fábrica) do corpo inteiro, e nenhuma media query
   enxerga isso: elas medem a JANELA, não o que sobrou dela.

   Daí os dois cortes, e o segundo é nominal: acima de 1200px a ficha do cliente vira coluna; entre
   1200 e 1600 **com a doca aberta** ela volta a ser a dobra dentro da conversa. Nada some — o que
   muda é onde a mesma ficha (`_ficha.php`, uma cópia só) é mostrada. Contas na largura de 1366:
   sem a doca, 320 + 658 + 320; com a doca, 320 + 618 e a ficha a um clique.
*/

@media (min-width: 992px) {
    /* O desconto é o chrome do app em volta da mesa (navbar + o `py-4` do `<main>` + o cabeçalho da
       página + o rodapé). É uma ESTIMATIVA declarada: errar para mais deixa folga; errar para menos
       faria a página inteira ganhar uma segunda barra de rolagem — e por isso o `min-height` segura
       um piso utilizável. */
    :root { --keys-wa-mesa-desconto: 16.5rem; }

    /* A caixa de atendimento usa a tela toda: o `.container` do Bootstrap capa em 1320px, e o dono
       pediu "mais espaço". `:has()` deixa a exceção presa a ESTA tela — nenhuma outra do produto
       muda de largura por causa disto. Onde `:has()` não existir, a mesa simplesmente fica dentro
       do container: degrada, não quebra. */
    main.container:has(.keys-wa-mesa) { max-width: none; }

    .keys-wa-mesa {
        flex-direction: row;
        align-items: stretch;
        gap: 0.75rem;
        height: calc(100dvh - var(--keys-wa-mesa-desconto));
        min-height: 26rem;
    }

    /* A lateral é FIXA; só o miolo flexiona. */
    .keys-wa-mesa-fila {
        flex: none;
        width: var(--keys-wa-fila-larg);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .keys-wa-mesa-conversa {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .keys-wa-mesa-conversa > .keys-wa-conversa { height: 100%; }

    /* Com conversa aberta a fila continua na tela — é a "lista dos que estão esperando" do pedido. */
    .keys-wa-mesa-com-conversa > .keys-wa-mesa-fila { display: flex; }

    .keys-wa-nenhuma { display: flex; flex: 1 1 auto; }

    /* A seta de voltar só existe onde a lista SAIU da tela. Aqui a fila está ao lado. */
    .keys-wa-mesa-conversa .keys-wa-voltar { display: none; }

    /* ⚠️ A ficha do cliente NÃO volta aqui: até 1200px ela continua sendo a dobra dentro da
       conversa (a regra base, lá em cima, já a esconde). Três colunas numa janela de 1000px
       deixariam a conversa com menos de 350px — que é mais estreito que a própria doca. */

    /* Na tela cheia sobra espaço: os alvos de ícone crescem para o calibre confortável de mouse. */
    .keys-wa-mesa .keys-wa-icone { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }

    /* Numa coluna larga o balão de 65% ainda é uma linha longa demais para o olho voltar ao começo. */
    .keys-wa-mesa-conversa .keys-wa-balao { max-width: min(65%, 34rem); }
}

/* ---- A TERCEIRA COLUNA: o cadastro do cliente ao lado da conversa ---- */
@media (min-width: 1200px) {
    .keys-wa-mesa-ficha {
        display: block;
        flex: none;
        width: var(--keys-wa-ficha-larg);
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        overscroll-behavior: contain;
    }
    /* Com a coluna na tela, a dobra dentro da conversa seria a MESMA ficha duas vezes. Quem
       desaparece é a dobra: `display: none` a tira também da árvore de acessibilidade, então quem
       usa leitor de tela ouve o cadastro uma vez, não duas. */
    .keys-wa-mesa-conversa .keys-wa-ficha-dobra { display: none; }
}

/* ---- E ela cede a vez quando a doca está aberta e a janela não é grande ---- */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    body.keys-wa-doca-aberta .keys-wa-mesa-ficha { display: none; }
    body.keys-wa-doca-aberta .keys-wa-mesa-conversa .keys-wa-ficha-dobra { display: block; }
}

/* ==========================================================================================
   9. QUANDO O PAINEL É ESTREITO — container query, não media query
   ==========================================================================================
   A doca vai de 280 a 640px e a coluna do meio da mesa vai de ~500 a 900. Quem decide o aperto é a
   LARGURA DO PAINEL, não a da janela: uma media query acertaria a doca a 1366px e erraria a mesma
   doca a 1920. `@container` pergunta a coisa certa.
*/

@container keys-wa (max-width: 420px) {
    /* Balão mais largo: numa coluna estreita, 65% deixa metade da tela vazia. */
    .keys-wa-balao { max-width: 85%; }
    .keys-wa-fio { padding-left: 0.6rem; padding-right: 0.6rem; }
    .keys-wa-meta-autor { max-width: 4.5rem; }
}

@container keys-wa (max-width: 330px) {
    /* No mínimo da doca (280px) cada pixel do campo de texto conta: o compositor perde o recuo
       lateral e os ícones encolhem meio passo. O campo continua sendo o que sobra — e sobra mais. */
    .keys-wa-compositor { padding-left: 0.3rem; padding-right: 0.3rem; gap: 0.1rem; }
    .keys-wa-icone { width: 1.85rem; height: 1.85rem; font-size: 0.95rem; }
    .keys-wa-entrada { padding-left: 0.7rem; padding-right: 0.7rem; }
    .keys-wa-topo { padding-left: 0.4rem; padding-right: 0.4rem; gap: 0.35rem; }
    .keys-wa-avatar { width: 2rem; height: 2rem; }
}

/* ==========================================================================================
   10. AS PEÇAS QUE FALTAVAM — rodapé do formulário, voltar, ficha dobrada e o telefone
   ========================================================================================== */

/* O formulário de resposta É o rodapé: ele empilha o chip do anexo, a recusa e a linha do
   compositor. `flex: none` para não roubar altura do fio. */
.keys-wa-rodape {
    flex: none;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Cada ação do cabeçalho vem embrulhada no próprio `<form>` (é um POST com CSRF, não um link).
   Sem estas duas linhas o embrulho vira um bloco e quebra a fileira de ícones. */
.keys-wa-topo-acoes form { margin: 0; display: flex; }

/* GRAVANDO: a cor tem de vir daqui e não do `btn-danger` que o `whatsapp-anexo.js` alterna — sem a
   classe `.btn` do Bootstrap junto, aquelas classes só definem variáveis e não pintam nada. O
   sinal redundante continua sendo o rótulo acessível, que o JS troca, e a pulsação. */
.keys-wa-icone.keys-wa-gravando,
.keys-wa-icone.keys-wa-gravando:hover {
    background: var(--keys-despesa);
    color: var(--keys-sobre-primaria);
}

/* A FICHA DOBRADA — onde não há terceira coluna (a doca, e o telefone). Um andar de ~28px que a
   pessoa abre quando quer, em vez de um cartão permanente comendo o fio. */
.keys-wa-ficha-dobra {
    flex: none;
    background: var(--keys-wa-barra);
    border-bottom: 1px solid var(--keys-borda);
    font-size: 0.82rem;
}
.keys-wa-ficha-dobra > summary {
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    color: var(--keys-texto-2);
}
.keys-wa-ficha-dobra > summary:hover { color: var(--keys-tinta); }
.keys-wa-ficha-dobra-corpo {
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding: 0 0.7rem 0.6rem;
}

/* ---- NO TELEFONE: cada painel é a tela -------------------------------------------------
 *
 * Abaixo de 992px a mesa é uma coluna só. Para a tela parecer o aplicativo — e não uma página
 * comprida — o painel visível ocupa a janela menos o chrome do app (navbar + o `py-4` do `<main>`
 * + o cabeçalho da página + a barra de baixo). O desconto é uma ESTIMATIVA declarada: errar para
 * mais deixa folga; errar para menos faria a página ganhar uma segunda barra de rolagem, e por isso
 * o `min-height` segura um piso utilizável.
 */
@media (max-width: 991.98px) {
    :root { --keys-wa-movel-desconto: 15rem; }

    .keys-wa-mesa-conversa > .keys-wa-conversa,
    .keys-wa-mesa-fila > .keys-wa-fila {
        height: calc(100dvh - var(--keys-wa-movel-desconto));
        min-height: 20rem;
    }

    /* ⚠️ O CABEÇALHO DA PÁGINA SOME NO TELEFONE COM UMA CONVERSA ABERTA — e o interruptor NÃO mora
       aqui. Foi tentado (`main:has(.keys-wa-mesa-com-conversa) .keys-page-header { display: none }`)
       e MEDIDO como inerte: aquele cabeçalho leva `.d-flex` do Bootstrap, que é
       `display: flex !important`. Vencer um utilitário do vendor exigiria `!important` do nosso
       lado, e é assim que uma folha começa a competir consigo mesma. Quem decide é o servidor, que
       já sabe se há conversa aberta: a `whatsapp/mesa.php` carimba `d-none d-lg-flex` no cabeçalho.
       O porquê da decisão está lá. */

    /* Sem conversa escolhida o miolo não existe no telefone: a fila JÁ é a tela, e uma caixa
       vazia com borda embaixo dela seria só uma moldura sem quadro. */
    .keys-wa-mesa:not(.keys-wa-mesa-com-conversa) > .keys-wa-mesa-conversa { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
}

/* ---- NO PAPEL: a doca não existe ---------------------------------------- */
/*
 * `layout_impressao.php` não tem doca nenhuma — este bloco é para o Ctrl+P dado de dentro do app,
 * onde o layout é o `layout_app`. Sem ele, a folha sairia com uma faixa em branco de 380px na
 * direita (o `padding-right` do corpo) e, na primeira página, com o painel impresso por cima.
 * Vem por último no arquivo: mesma especificidade, ordem decide, e assim nenhum `!important`
 * precisa existir.
 */
@media print {
    .keys-wa-doca { display: none; }
    body.keys-wa-doca-aberta { padding-right: 0; }
    /* A mesa vira uma coluna só no papel: três colunas de 340px numa folha A4 não cabem, e o que
       importa imprimir é a conversa. */
    .keys-wa-mesa { display: block; height: auto; }
    .keys-wa-mesa-fila, .keys-wa-mesa-ficha { display: none; }
    .keys-wa-fio { max-height: none; overflow: visible; }
}