# Âncoras de CSS

Catálogo dos alvos disponíveis para o CSS personalizado — geral ou por
empresa. Como usar as duas camadas está em
[Customizacao-CSS-JS.md](./Customizacao-CSS-JS.md).

> **Este arquivo é gerado.** Não edite à mão: rode
> `node frontend/scripts/lista-ancoras.js`. O texto explicativo mora no
> script, então regerar não apaga nada.

## Convenções

Três regras cobrem quase tudo — saber elas evita procurar no catálogo:

| Onde | Padrão |
|---|---|
| Página | `#custom-css-<nome-da-página>` no container |
| Modal | `.custom-css-modal` (todos) **+** `.custom-css-modal-<nome>` (aquele) |
| Tema | `body[data-theme="dark"]` / `[data-theme="light"]` |

Classe diz **onde**; atributo `data-*` diz **quando**. Para pintar só a
mensagem que falhou, não existe classe — existe `[data-status="pending"]`.

Para vencer o Material-UI às vezes é preciso `!important`, igual no CSS geral.

## Propriedades que o CSS pode mandar

Quase tudo aqui é só alvo de estilo, mas há um ponto em que o CSS **decide**:

| Propriedade | Onde | O que faz |
|---|---|---|
| `--ticket-actions-visiveis` | `.custom-css-ticket-actions` | quantas ações ficam na barra antes de o resto ir para o menu `⋯`. Sem ela, a barra mede o espaço sozinha |

```css
/* três ações na barra, o resto sempre no menu */
.custom-css-ticket-actions { --ticket-actions-visiveis: 3; }
```

Existe porque a medição automática roda **depois** de qualquer coisa que o
CSS faça, então quando ela erra não há como corrigir por fora. Valor inválido
ou ausente cai na medição normal.

## Atributos de estado

| Atributo | Onde | Valores |
|---|---|---|
| `data-aberto` | painel que o "+" abre no campo de digitação | `true` · `false` — antes o estado só existia como `display: none` inline |
| `data-acao` | cartão do template WABA | `editar-midia-local` — o botão que troca a mídia de exemplo do template |
| `data-acao-funil` | cartão do funil, no CRM v2 | `arquivar` · `reativar` |
| `data-acesso` | cada linha do histórico de entradas e saídas do operador (botão "Acessos" no card da tela de Usuários) | `LOGIN` · `LOGOUT` — dá para colorir a entrada e a saída de formas diferentes, ou esconder uma das duas |
| `data-ack` | balão da mensagem | 0–5, o código bruto de entrega do WhatsApp |
| `data-action` | botões do atendimento e do popup de encerramento | na barra: `resolve` · `return` · `transfer` · `schedule` · `task` · `delete` · `invite` · `call` · `files` · `flow` · `opportunity` · `summary` · `analyzer` · `contact-summary` · `accept-audio` · `external-chat-link` · `mais-acoes`. No popup de encerramento: `resolve-silent` (sem mensagem) · `resolve-message` (com mensagem) · `resolve-rating` (com avaliação) — os dois primeiros são idênticos no DOM, só o texto difere |
| `data-active` | item do menu lateral e cartão do menu da tela de Configurações | `true` no item da tela aberta (menu lateral) · `true` / `false` no cartão de Configurações, conforme a aba aberta |
| `data-aguardando` | aviso de coluna pausada no quadro de atendimentos | quantas atualizações chegaram enquanto a coluna está pausada (`0` quando nada mudou) — dá para esconder o aviso quando não há nada esperando |
| `data-aguardando-envio` | selo na mensagem represada pelo limitador de envio | `true` — a mensagem existe e ainda não saiu |
| `data-amqp-vazio` | aviso de monitor AMQP sem mensagem | `sem-fila` (nenhuma conexão da empresa passa por RabbitMQ) · `sem-mensagem` (passa, mas nada chegou) |
| `data-answer-from-ia` | sugestão de resposta com IA (barra e cartão sobre o campo, e a aba de Tokens de IA) | no bloco: `barra` · `cartao`. Dentro dele: `sugerir` · `melhorar` · `saldo` · `sugestao` · `texto` · `usar` · `nova` · `descartar`. Na aba do super: `ilimitado` · `abrir-recarga` · `recarga-pontos` · `recarga-observacao` |
| `data-answer-from-ia-camada` | painel flutuante da sugestão de IA | `padrao` · `acima-do-dialogo` — quando a barra vive dentro de um diálogo, o painel precisa ficar acima dele |
| `data-apagada` | balão de mensagem do chat interno | `true` · `false` — se a mensagem foi apagada |
| `data-apagada-por` | balão de mensagem apagada | quem apagou (o nome), ou `desconhecido` quando o registro não diz |
| `data-appbar` | botões da barra do topo | `menu` · `msgs` · `notifications` · `announcements` · `theme` · `lang` · `font` · `sound` · `ping` · `refresh` · `collapse` · `user` |
| `data-atrasada` | atividade do CRM (painel e cartão) | `true` quando o prazo passou — o único estado que pede ação agora |
| `data-audio` | gravador de áudio do campo de digitação | no bloco: `gravando` · `pausado`. Dentro dele: `player` · `pausar` · `continuar` |
| `data-auditoria` | cartão da oportunidade no quadro do CRM v2 | o status da auditoria daquela venda |
| `data-auditoria-acao` | botões da fila do auditor | `aprovar` · `reprovar` |
| `data-auditoria-propria` | cartão na fila do auditor | `sim` quando a venda é do próprio auditor — é o cartão que aparece com os botões desligados |
| `data-auditoria-status` | linha do histórico de auditoria | `APROVADA` · `REPROVADA` |
| `data-avatar` | avatar no balão | `contact` · `user` · `none` |
| `data-barra-concatenacao` | barra que avisa que a próxima mensagem será concatenada | `true` |
| `data-bot-ativo` | cartão do ticket (lista e grupos), cabeçalho da conversa aberta e os cards do quadro de atendimentos e dos kanbans | `true` enquanto um nó do fluxo (flowbuilder) está rodando NESTE ticket — é o `flowStatus = executing`, a trava que impede duas execuções ao mesmo tempo; `false` nos demais estados. **Ausente quando o payload não traz `flowStatus`**: sem o campo, o card não afirma nada. Fluxo que morreu no meio pode deixar `true` para trás até a rotina de partida soltar a trava |
| `data-cadastro-ativo` | a mesma linha | `true` · `false` — desativado continua na lista, não some |
| `data-cadastro-funil` | etiqueta do motivo de perda preso a um funil | o id do funil. Motivo global não tem a etiqueta |
| `data-cadastro-item` | linha de origem de venda ou motivo de perda, nos Cadastros do CRM | o id do item |
| `data-campo` | formulário de atividade do CRM, seletor de motivo por funil e liberação de agenda | na atividade: `tipo` · `responsavel` · `assunto` · `descricao` · `data` · `hora` · `duracao`, e `descricao-lista` no texto já gravado. Nos cadastros do CRM: `funil-do-novo`. Nas regras de encadeamento: `produto-da-regra` · `destino-da-regra` · `responsavel-da-regra`. No cadastro de usuário: `agendas-visiveis`. Nas tarefas: `filtro-de-agenda` |
| `data-campo-responsavel` | campo de responsável no modal da oportunidade | `true` — marca o campo que define de quem é a venda |
| `data-canal` | linha de canal na conciliação de conexões e pílula do monitor AMQP | a chave do grupo (`whatsapp`, `hub`, `instagramInc`, …) |
| `data-carregando` | barra da sugestão de IA | `true` enquanto a IA gera — é por ele que se estiliza o estado "Gerando sugestão…" |
| `data-channel` | cartão do ticket, CABEÇALHO da conversa aberta e ícone da conexão | o canal (`whatsapp`, `instagram`, `facebook`, …) |
| `data-channel-filter` | chips de filtro de canal, na página de Conexões | `all` ou a chave do canal. Junto vai `aria-pressed`, que diz se o filtro está ligado |
| `data-chat-externo` | balão de mensagem vinda do chat externo | `recebida` (veio de lá e está nas duas pontas) · `somenteExterno` (só existe no chat externo) |
| `data-chat-id` | botões de favoritar e de marcar como não lida, na lista do chat interno | o id da conversa |
| `data-collapsed` | menu lateral | `true` quando recolhido |
| `data-coluna-pausada` | coluna do quadro de atendimentos | `true` na coluna com a atualização pausada, `false` nas demais |
| `data-coluna-tipo` | coluna do quadro de atendimentos (no quadro e na tela de configuração) | `PENDENTES` · `ATENDENDO` (as duas fixas) · `LIVRE` (aberto, criada pelo admin) · `PENDENTE_LIVRE` (pendente, classificação manual) · `PENDENTE_FILA` (pendente, automática: recebe sozinha os pendentes das filas da regra) |
| `data-concat-example` | prévia do texto concatenado, no modal do concatenador | `true` |
| `data-concat-field` | campos do modal do concatenador | `enabled` · `mode` · `timeout` |
| `data-concat-indicator` | selo de concatenação no cartão da conexão | o id da conexão |
| `data-conectado` | bloco de conexão do Google Calendar | `true` · `false` |
| `data-conexao` | escolha do tipo de conexão, ao criar uma nova | `sem-aparelho` · `oficial-app-proprio` · `oficial-portal` |
| `data-connected` | botão de atender do webphone | `true` · `false` — o estado do ramal. Sem ele, a única forma de saber se o ramal está conectado era ler a COR do ícone |
| `data-connection` | etiqueta verde da conexão no card do quadro de atendimentos | o NOME da conexão ("Comercial", "Suporte"…) — dá para colorir o card por conexão, o que o `data-channel` não permite, porque ele só diz o canal |
| `data-connection-action` | botões do cartão de conexão | `close-all` · `close-pending` · `templates` · `edit` · `delete` · `qrcode` · `profile` · `sip` · `sip-config` · `hybrid` · `proxy` · `rotate-ip` · `events` · `import-session` · `pair-code` · `passkey` · `reconnect` · `new-qr`. "Fechar Todos" e "Fechar Pendentes" são o mesmo botão no DOM — só o texto difere, e texto morre na troca de idioma |
| `data-connection-color` | etiqueta da conexão no cartão | `green` (hoje é o único valor emitido) |
| `data-connection-id` | cartão da conexão e CABEÇALHO da conversa aberta | o id da conexão. No cabeçalho é a conexão pela qual o atendimento entrou |
| `data-connection-manual-review` | aviso no cartão da conexão | `true` quando o número está em revisão manual da Meta |
| `data-connection-name` | cartão do ticket e cabeçalho da conversa aberta | o nome da conexão. Antes só existia como texto no cartão da lista (`.ticket-connection`), e a conversa aberta não dizia por onde tinha chegado |
| `data-connection-status` | cartão da conexão | `connected` · `disconnected` · `qrcode` · `opening` · `error`. **É o estado como atributo**: antes ele existia só como cor do chip, e saber que uma conexão caiu exigia ler a cor computada ou o texto "Conectado" — cor muda com o tema e texto muda com o idioma. `PENDING` conta como `opening`; status desconhecido vira `error` |
| `data-contact-id` | cartão do ticket, cabeçalho da conversa aberta e ficha lateral do contato | o id do contato. A ficha **não publicava identificador nenhum** — nome, telefone e e-mail existiam só como texto, e ligar uma anotação ou um registro de CRM ao contato certo dependia de casar texto, que se repete entre contatos e muda quando alguém corrige um cadastro |
| `data-deleted` | balão da mensagem | `true` quando apagada |
| `data-dia` | coluna do gráfico de logs do Pixel | a data daquele dia |
| `data-docker-aviso` | avisos do cadastro por app próprio | `numero-canonico` · `metodo-atendido` |
| `data-docker-bloqueio` | alerta de bloqueio no cadastro por app próprio | o tipo do bloqueio devolvido pela Meta |
| `data-docker-campo` | campos de desafio no cadastro por app próprio | `captcha` · `2fa` |
| `data-docker-cooldown` | alerta de espera no cadastro por app próprio | o tipo da espera imposta pela Meta |
| `data-docker-ddi` | campo de DDI no cadastro por app próprio | o DDI escolhido |
| `data-docker-desafio` | bloco do desafio no cadastro por app próprio | `captcha` · `2fa` |
| `data-docker-registro` | etapas do cadastro por app próprio | `numero` · `codigo` |
| `data-edited` | balão da mensagem | `contact` quando o contato editou |
| `data-elapsed-late` | tempo relativo no cartão do ticket | `true` · `false` — a regra simples de "está atrasado", para o CSS não precisar listar quais estados contam como atraso |
| `data-elapsed-status` | tempo relativo no cartão do ticket | `fresh` (até 30 min) · `warning` (até 60) · `late` (acima). Vem junto do `data-elapsed-late`, que é o mesmo em forma de sim/não |
| `data-email-account` | campos e botões do modal de conta de e-mail | `carregar-pastas` · `nova-pasta` · `novo-endereco` |
| `data-embed-bloqueado` | aviso do ticket incorporado quando ele não pode ser aberto | `true` — marca o quadro que explica o motivo em vez da conversa |
| `data-embed-motivo` | aviso do ticket incorporado que não pôde abrir | o motivo, para o CSS separar um do outro (o `data-embed-bloqueado` só diz QUE bloqueou) |
| `data-emoji` | botão de reação rápida no menu da mensagem do chat interno | o próprio emoji |
| `data-empresa` | linha da empresa na aba de Tokens de IA | o id dela |
| `data-endereco` | pílula de endereço aceito no modal de conta de e-mail | o endereço que a conta aceita (recebidos pelo destinatário, enviados pelo remetente) |
| `data-erro` | diálogo de erro da Meta | `mensagem` · `campos` · `alterna-bruto` (o botão que mostra a resposta crua da Meta) |
| `data-erro-conexao` | modal do Facebook nativo | `true` no bloco que explica a falha de conexão |
| `data-error` | balão da mensagem | `true` no balão rosa (a plataforma não processou) |
| `data-escopo` | bloco de conexão do Google Calendar | `operador` (cada um conecta a própria agenda) · `empresa` (uma conta para todos) |
| `data-excedente` | linha da empresa na conciliação de conexões | `true` quando ela usa mais conexões do que o plano permite |
| `data-favorita` | estrela da mensagem rápida, na tela de Mensagens Rápidas | `true` · `false` — se aquela mensagem está favoritada |
| `data-favorita-id` | item da lista de mensagens rápidas favoritas, no campo de digitação do HUB | o id da mensagem rápida daquele item |
| `data-favorite` | cartão do ticket e a estrela dele | `true` · `false` |
| `data-filter` | filtros da lista de atendimento | `scope` · `groups` · `closed` · `unread` · `queues` · `tags` · `users` · `connections` |
| `data-filtro-operador` | filtro de operador no quadro do CRM v2 | `true` — marca o campo |
| `data-filtro-tag` | filtro de etiqueta no quadro do CRM v2 | `true` — marca o campo |
| `data-fixado` | estrela de fixar no card do quadro de atendimentos | `true` · `false` |
| `data-flow-action` | botões do editor de fluxo | `logs` — abre o histórico de execução do fluxo |
| `data-flow-id` | bloco de um nó de rodízio no relatório do rodízio | o id do fluxo, ou `legado` no grupo do que foi gravado antes da identificação por nó |
| `data-flow-log-detail` | pilha de detalhe de uma falha do fluxo | o id do registro |
| `data-flow-log-row` | linha de falha do fluxo | o id do registro |
| `data-flow-logs-empty` | aviso de histórico de fluxo vazio | `true` |
| `data-flow-logs-level` | filtro de nível no histórico do fluxo | o nível (`warn`, `error`…) ou `all` |
| `data-flow-logs-list` | tabela de falhas do histórico do fluxo | `true` |
| `data-flow-logs-summary` | tabela de resumo do histórico do fluxo | `true` |
| `data-flow-logs-window` | filtro de janela de tempo no histórico do fluxo | quantas horas |
| `data-flow-status` | os mesmos elementos do `data-bot-ativo` | `executing` (um nó rodando agora) · `waiting_input` · `menu` · `pending` (fluxo parado, esperando o contato) · `idle` (nenhum fluxo em curso — também para quem nunca entrou num fluxo). Ausente quando o payload não traz o campo |
| `data-fora-do-no` | linha de operador no relatório do rodízio | `true` quando o operador recebeu atendimentos mas não está mais na configuração do nó · `false` |
| `data-forcar-hibrido` | botão de forçar o envio pelo caminho híbrido, no compositor do Hub | `true` quando o próximo TEXTO vai pela conexão whatsmeow_pro do modo híbrido · `false` no envio normal. Só texto: o ramo de mídia não tem o botão |
| `data-fromme` | balão e cartão | `true` quando saiu da plataforma |
| `data-gerenciar-grupos` | botão de gerenciar grupos de template, no cabeçalho de /waba-templates | sem valor — marca o botão que abre o gerenciador |
| `data-gravando` | campo de digitação | `sim` enquanto grava áudio · `nao` fora disso |
| `data-group` | cartão do ticket e CABEÇALHO da conversa aberta | `true` em conversa de grupo. No cabeçalho vale nos três lugares que usam a âncora `custom-css-ticket-header`: a conversa do frame da direita, o ticket em modal e o popup de espiar |
| `data-group-filter` | botão do filtro de grupos, na barra do quadro de atendimentos | `todos` · `true` (só grupos) · `false` (sem grupos) — é o estado atual do filtro, e serve para destacar o botão quando ele está recortando a tela |
| `data-group-option` | cada opção dentro do filtro de grupos | `todos` · `true` · `false` |
| `data-grupo` | linha de um grupo no gerenciador de grupos de template | o id do grupo |
| `data-grupos-do-template` | seletor de grupos no cartão do template | sem valor — marca o bloco que vincula o template aos grupos |
| `data-grupos-nao-lidos` | botão de trocar de visão | quantos grupos têm mensagem não lida (ausente quando zero) |
| `data-history-nav` | paginação do histórico do limitador de envio | `anterior` · `proximo` |
| `data-icon` | ícones do topo | `theme` · `status` · `refresh` |
| `data-iframe-altura` | moldura das páginas embutidas (Central de Ajuda, TypeBot, ChamaAi e os links do menu) | a altura medida em pixels (`665px`, por exemplo) ou `padrao` no instante antes da primeira medição. Serve para conferir que a moldura ocupou a tela toda — se ficar em `padrao`, a medição não rodou |
| `data-ilimitado` | pílula de tokens da sugestão de IA (barra e cartão) | `true` na empresa que usa credencial própria e não gasta tokens |
| `data-import-state` | barra de andamento da importação de contatos | `enviando` (arquivo subindo, barra indeterminada) · `processando` (linhas sendo importadas) |
| `data-indicador` | selo do card no Quadro de Atendimentos, dizendo o que já existe sobre aquele contato | `oportunidade` · `agendamento` · `anotacao`. O selo só é desenhado quando o número é maior que zero, e a linha inteira some quando não há nenhum |
| `data-indicador-total` | o mesmo selo | quantos — o número que aparece ao lado do ícone. Dá para destacar o card a partir de um patamar (por exemplo, três anotações ou mais) |
| `data-lane-type` | raia do funil | `IN_PROGRESS` · `WON` · `LOST` |
| `data-lista-de-grupos` | lista do gerenciador de grupos de template | sem valor — marca a lista inteira |
| `data-lugar` | pódio de vendas | `1` · `2` · `3` |
| `data-media-type` | balão da mensagem | `conversation` · `image` · `audio` · `video` · `document` · … |
| `data-mencao` | nome de quem foi marcado com @ | o identificador original (o número que aparecia antes) |
| `data-mencao-contato` | nome de quem foi marcado com @ | o id do contato. **Só existe quando o clique abre conversa privada** — some em grupo e no preview do ticket, então `[data-mencao-contato]` seleciona exatamente os clicáveis |
| `data-menu` | item do menu lateral | o identificador do item |
| `data-menu-group` | grupo do menu lateral | o identificador do grupo |
| `data-message-id` | balão da mensagem | o id da mensagem |
| `data-meta-plataforma` | cartão da conexão oficial nativa | `cloud_api` · `coex`. Ausente quando a conexão não é oficial nativa ou quando ainda não se sabe — a pergunta não se aplica |
| `data-metodo` | opções de método de cadastro do número | a chave do método |
| `data-midia` | prévia de mídia do template WABA | `local` (a que está sendo trocada) · `atual` (a que o template já tem) |
| `data-migracao-destino` | campo de empresa de destino, no modal de migração | sem valor — marca o campo que escolhe para onde migrar |
| `data-migracao-empresa` | linha da empresa no gerenciador | o id da empresa a migrar |
| `data-migracao-inventario` | conteúdo do modal de migração | o id da empresa |
| `data-migracao-tabela` | linha de tabela no inventário da migração | o nome da tabela |
| `data-migracao-teste` | resultado do teste antes de migrar | `ok` · `barrado` |
| `data-minha` | pílula de reação numa mensagem do chat interno | `true` quando quem está olhando reagiu com aquele emoji · `false` |
| `data-mode` | campo de digitação (na caixa externa **e** em `.custom-css-composer-field`) | `normal` · `signature` (assinar) · `internal` (nota interna) · `external` (só canal externo) |
| `data-monitoravel` | pílula de canal no monitor AMQP | `true` no canal que passa por fila e portanto pode aparecer no monitor |
| `data-mostra-encerrar` | botão que liga e desliga o encerrar nos cards, na barra do quadro de atendimentos | `true` · `false` |
| `data-motivo` | linha do histórico de remarketing | o motivo do registro |
| `data-nivel` | linha do histórico de remarketing | o nível do registro |
| `data-node-id` | o mesmo bloco | o id do nó dentro do fluxo (vazio no grupo legado) |
| `data-nota-id` | bloco de nota interna do atendimento | o id da nota |
| `data-notification-action` | faixa de permissão de notificação | `enable` · `dismiss` |
| `data-novo-grupo` | campo de nome no gerenciador de grupos de template | sem valor — marca o campo de criar grupo |
| `data-operador` | foto do operador | o nome dele |
| `data-operator-id` | linha do ranking e linha de operador no relatório do rodízio | o id do operador |
| `data-ordem` | botão de ordenação no cabeçalho de cada coluna do Quadro de Atendimentos | `recentes` (os mais novos em cima, o padrão) · `antigos`. Cada coluna tem a sua, e a escolha fica guardada no navegador |
| `data-origem` | cartão do template WABA | quem criou (`bm`, `wsw`, `desconhecida`) |
| `data-origin` | balão da mensagem | `contact` · `user` (operador) · `app` (celular pareado) · `api` (bot/API) |
| `data-pasta` | caixa de seleção de pasta no modal de conta de e-mail | o caminho IMAP da pasta (ex.: `INBOX`, `INBOX.Comercial`) |
| `data-perfil-erro` | alerta do modal de perfil do número | sem valor — marca o aviso de falha ao carregar ou salvar o perfil |
| `data-permissao` | botões que dependem de permissão (painel do contato e barra de ações) | o estado da permissão daquele botão |
| `data-pisca` | brilho sobre o card do quadro que acabou de receber mensagem | `mensagem-nova` (o único valor). O elemento só existe enquanto pisca |
| `data-pixel-logs-day` | campo de dia na tela de logs do Pixel | `true` — marca o campo |
| `data-plataforma` | opções de plataforma no cadastro por app próprio | o id da plataforma |
| `data-pode-espiar` | card do quadro de atendimentos | `true` quando quem olha pode abrir a conversa com duplo clique · `false` quando "Operador Visualiza Prévias?" está desligada para ele |
| `data-prefixo` | linha de conexão na lista de prefixos do discador SIP | o prefixo de discagem daquela conexão |
| `data-prefixos` | botão que abre e recolhe a lista de prefixos do discador SIP | `aberto` · `recolhido` |
| `data-presence-state` | selo de presença no cabeçalho do atendimento | `online` · `away` · `offline`, ou vazio quando a conexão não informa |
| `data-produtos` | linha de produtos da oportunidade | quantos itens são |
| `data-quadro` | aviso da página do Quadro de Atendimentos | `fora-do-plano` — a empresa não tem o módulo `useQuadro` contratado. É o único valor emitido hoje; serve para esconder o aviso ou trocá-lo por um texto próprio |
| `data-queue-chatbot` | cartão do ticket, cartão de grupo, cabeçalho da conversa aberta e os cards do quadro de atendimentos e dos kanbans (`/kanban`, equipe, filas e grupos) | `true` · `false`. **Ausente quando o payload traz a fila sem dizer se ela é de chatbot** — é "não sei", e não "false"; quem customiza cai no critério seguinte dele |
| `data-queue-color` | cartão do ticket e cabeçalho da conversa aberta | a cor da fila |
| `data-queue-id` | cartão do ticket, cartão de grupo, cabeçalho da conversa aberta e os cards do quadro de atendimentos e dos kanbans | o id da fila, ou vazio quando o atendimento não tem fila |
| `data-queue-name` | cartão do ticket e cabeçalho da conversa aberta | o nome do setor. No cartão o nome só existe como texto do badge (`.ticket-queue`), que muda com o idioma |
| `data-quoted` | balão da mensagem | `true` quando é resposta a outra |
| `data-ramal` | linha do ramal no card do operador, na tela de Usuários | o número do ramal. Sai do campo `webphoneRamal` do cadastro e, quando ele está vazio, do trecho do `sipuri` antes do `@`. O card só desenha a linha quando existe um dos dois |
| `data-rascunho` | campo de digitação | `true` quando há texto não enviado — dá para avisar quem sai da conversa com resposta pela metade |
| `data-reconnect-path` | escolha de caminho de reconexão, na página de Conexões | `own` (app próprio) · `aini` |
| `data-reconnect-path-dialog` | diálogo que pergunta o caminho de reconexão | `true` |
| `data-referencia` | linha da tabela de logs de erro | a referência daquele log — dá pra destacar por CSS os erros de uma origem só |
| `data-regra` | ícone de regra no cabeçalho da coluna automática do quadro de atendimentos | `fila` — a coluna recebe sozinha os pendentes das filas da regra (hoje é o único tipo de regra) |
| `data-remarketing` | controles da tela de logs de remarketing | `auto-atualizar` · `retencao` |
| `data-resposta-na-volta` | modal que oferece deixar pronta a retomada, ao enviar um template | `pergunta` · `texto` · `prazo` · `nao` |
| `data-resposta-na-volta-aviso` | faixa sobre o campo, dizendo que há uma retomada guardada | `true` na faixa · `cancelar` no botão que a descarta |
| `data-restantes` | botão “ver mais” de uma raia do quadro do CRM | quantos cartões ainda não foram carregados |
| `data-selecionando` | campo de digitação | `true` enquanto o modo de selecionar mensagens está ligado |
| `data-selected` | cartão do ticket | `true` no ticket aberto |
| `data-send-limit-action` | botões do modal do limitador | `history` |
| `data-send-limit-counter` | contador de envios no cartão da conexão | o id da conexão |
| `data-send-limit-field` | campos do modal do limitador de envio | `enabled` · `amount` · `cutoffDay` |
| `data-send-limit-history` | bloco do histórico de limites | `true` |
| `data-send-limit-summary` | resumo do limite, no mesmo modal | `true` |
| `data-settings-tab` | cartão do menu da tela de Configurações | o nome da aba (`options`, `schedules`, `tokenempresa`, `companies`…). O cartão também carrega `id="simple-tab-<nome>"`, `role="tab"`, `aria-selected` e `aria-controls="simple-tabpanel-<nome>"` — o painel já se apresentava com esse id e apontava para uma aba que não existia |
| `data-sincroniza-agenda` | opção de sincronizar com o Google Agenda (atividade do CRM e tarefa) | `true` · `false` |
| `data-sip` | widget do webphone minimizado | `abrir-teclado` |
| `data-so-os-meus` | botão "só os meus" na barra do quadro de atendimentos | `true` · `false` — se o filtro por mim mesmo está ligado |
| `data-so-sem-resposta` | botão "sem resposta" na barra do quadro de atendimentos | `true` · `false` — se o filtro de sem resposta está ligado |
| `data-status` | balão, cartão do ticket e CABEÇALHO da conversa aberta | no balão: `pending` · `sent` · `received` · `read` · `played`. No cartão e no cabeçalho: o status do atendimento. **Mesmo nome nos dois**, de propósito — a regra escrita para o cartão vale no cabeçalho sem `if` |
| `data-tag-color` | etiqueta | a cor dela |
| `data-tag-id` | etiqueta | o id dela |
| `data-tarefa` | linha de tarefa no resumo do contato, dentro do atendimento | o id da tarefa — a linha inteira abre a tarefa |
| `data-tem-contato` | bloco de identificação de quem liga, na janela de chamada recebida do webphone | `true` quando o número casou com um contato (a linha do nome existe) · `false` |
| `data-tem-sugestao` | barra da sugestão de IA | `true` quando já existe sugestão gerada — junto do `data-carregando`, cobre os três estados da barra |
| `data-template-groups` | seletor de grupos de template no modal da fila | sem valor — marca o campo que define quais grupos a fila usa |
| `data-testid` | prévias de mídia do template WABA | `previa-video` · `previa-documento` |
| `data-theme` | `<body>` | `dark` · `light` |
| `data-ticket-created` | cartão do ticket e cabeçalho da conversa aberta | quando o atendimento foi aberto, em ISO 8601. Existe para o cálculo de tempo ser aritmética de data: o único horário publicado antes era o TEXTO do `.ticket-datetime`, que sai como `20:50`, `ontem` ou `12/08` conforme a idade da mensagem |
| `data-ticket-id` | cartão do ticket, cabeçalho e ficha do contato | o id |
| `data-ticket-name` | cartão do ticket | o nome do contato |
| `data-ticket-protocol` | cartão do ticket | o protocolo |
| `data-ticket-status` | cartão do quadro de atendimentos | o status do atendimento naquele card: `pending` · `open` |
| `data-ticket-updated` | cartão do ticket e cabeçalho da conversa aberta | última alteração do atendimento, em ISO 8601. ⚠️ **Não é o horário da última mensagem**: `updatedAt` também anda quando o atendimento muda de fila, é transferido, atribuído ou resolvido. Para "há quanto tempo sem resposta" ele erra numa transferência — não existe hoje coluna do horário da última mensagem |
| `data-ticket-uuid` | cartão do ticket e cabeçalho da conversa aberta | o uuid. É o que a rota `/tickets/<uuid>` usa, então é com ele que se monta link direto para um atendimento a partir de outra tela |
| `data-tipo` | atividade do CRM (painel e cartão) | `lembrete` · `reuniao` · `ligacao` · `email` · `visita` · `tarefa` |
| `data-total-servidor` | subtítulo da raia do Kanban | quantos cartões existem NO SERVIDOR naquela etapa — pode ser maior que os carregados na tela |
| `data-transbordos` | linha de transbordo do bloco, no relatório do rodízio | quantos atendimentos o nó não conseguiu entregar no período — dá para destacar o bloco a partir de um patamar |
| `data-ultimo-login` | linha do último login no card do operador, na tela de Usuários | a data e hora no formato `dd/MM/yyyy HH:mm`, ou `nunca` para quem nunca entrou — dá para destacar quem está sumido |
| `data-unread` | cartão do ticket | `true` · `false` — SE há mensagem não lida. (A descrição anterior aqui dizia "quantas", e estava errada: sempre foi booleano.) |
| `data-unread-count` | cartão do ticket | QUANTAS mensagens não lidas, como número. O valor já era desenhado no badge, mas só como texto dentro do MUI |
| `data-user-color` | cartão do ticket | a cor do operador |
| `data-user-field` | campos do modal de usuário | o nome do campo (`webphoneTipo`, `webphoneAcaoDoBotao`…) |
| `data-user-section` | blocos do modal de usuário | `webphone-widget` · `webphone-nativo` |
| `data-user-status` | linha do usuário na tela de Usuários | `online` · `offline` · `inactive` |
| `data-usuario-id` | caixa de seleção de cada pessoa no modal de compartilhar registro | o id do usuário |
| `data-vazia` | coluna do quadro de atendimentos | `true` quando a coluna não tem card nenhum · `false`. É o estado que `div:has(> .custom-css-quadro-card)` não consegue casar |
| `data-webphone` | botão de chamada na barra de ações | o modo de webphone do operador |
| `data-window` | faixa da conversa (Meta) | estado da janela de 24h |

Exemplo — destacar mensagem não entregue e nota interna:

```css
.custom-css-msg-bubble[data-status="pending"] { opacity: .6; }
.custom-css-msg-bubble[data-origin="api"]     { border-left: 2px solid #888; }
[data-mode="private"] textarea                { background: #fffbe6; }
```

## Páginas

103 telas, uma âncora cada, no container:

```
custom-css-ai                         custom-css-amqp-messages              custom-css-announcement-history
custom-css-announcements              custom-css-appbar                     custom-css-atendimento-report
custom-css-atendimentos               custom-css-audit-logs                 custom-css-bot-files
custom-css-calls-report               custom-css-campaign-report            custom-css-campaigns
custom-css-campaigns-config           custom-css-chats                      custom-css-companies
custom-css-company-report             custom-css-connections                custom-css-contact-list-items
custom-css-contact-lists              custom-css-contact-permissao-chamada  custom-css-contacts
custom-css-contacts-duplicates        custom-css-content                    custom-css-copilot-historico
custom-css-copilot-modal              custom-css-dashboard                  custom-css-dashboard-legado
custom-css-docker-registro            custom-css-email-accounts             custom-css-emails
custom-css-facebook-erro              custom-css-financeiro                 custom-css-flow-categories
custom-css-flow-default               custom-css-flow-whatsapp              custom-css-flow-whatsapp-title
custom-css-flowbuilder-config         custom-css-flowbuilders               custom-css-forgotpassword
custom-css-google-calendar            custom-css-gpt-analyzer               custom-css-group-management
custom-css-helps                      custom-css-helps-iframe               custom-css-instagram-posts
custom-css-integrations               custom-css-kanban                     custom-css-kanban-filas
custom-css-kanban-grupos              custom-css-kanban-team                custom-css-login
custom-css-menu-suspenso              custom-css-messages-backup            custom-css-meta-template-log-detalhe
custom-css-meta-template-logs         custom-css-mikweb                     custom-css-oportunidade-funil
custom-css-oportunidades              custom-css-pipeline                   custom-css-pixel-logs
custom-css-products                   custom-css-prompts                    custom-css-propostas
custom-css-queue-categories           custom-css-queues                     custom-css-quick-messages
custom-css-ratings                    custom-css-ratings-report             custom-css-remarketing-logs
custom-css-reports                    custom-css-reports-group-tickets      custom-css-reports-research
custom-css-reports-tickets            custom-css-reports-tickets-duration   custom-css-reports-tickets-duration-detail
custom-css-sales-ranking              custom-css-schedules                  custom-css-services
custom-css-settings                   custom-css-shell                      custom-css-short-links
custom-css-signup                     custom-css-sip-prefixos               custom-css-sip-ramais
custom-css-sistema-postgres           custom-css-sistema-redis              custom-css-subscription
custom-css-survey                     custom-css-tags                       custom-css-task-agenda
custom-css-thirdpart                  custom-css-ticket-embed               custom-css-ticket-embed-blocked
custom-css-ticket-embed-error         custom-css-todolist                   custom-css-translation-manager
custom-css-typebot                    custom-css-user-whatsapps             custom-css-users
custom-css-visitors-live              custom-css-waba-templates             custom-css-webhook-config
custom-css-webhooks
```

## Modais

267 modais. Todos carregam também `custom-css-modal`, então
`.custom-css-modal { border-radius: 12px; }` pega os 267 de uma vez.

```
custom-css-modal-accept-ticket                    custom-css-modal-acessos-do-usuario
custom-css-modal-advanced-search                  custom-css-modal-agenda
custom-css-modal-agendamento-do-ticket            custom-css-modal-amqp-message
custom-css-modal-announcement                     custom-css-modal-announcement-alert
custom-css-modal-announcements-popover            custom-css-modal-botfile
custom-css-modal-botfile-url                      custom-css-modal-bulk-extra-fields
custom-css-modal-calendar-config                  custom-css-modal-calls-report
custom-css-modal-campaign                         custom-css-modal-change-password
custom-css-modal-change-plan                      custom-css-modal-chat
custom-css-modal-chat-messages                    custom-css-modal-color-picker
custom-css-modal-comandos-ia                      custom-css-modal-companies
custom-css-modal-company                          custom-css-modal-concatenador
custom-css-modal-confirmation                     custom-css-modal-confirmation-agendamento-excluir
custom-css-modal-confirmation-agendamento-excluir-lista custom-css-modal-confirmation-ajuda-excluir
custom-css-modal-confirmation-arquivo-do-bot-excluir custom-css-modal-confirmation-arquivos-do-bot-excluir
custom-css-modal-confirmation-atendimento-excluir custom-css-modal-confirmation-atendimento-excluir-menu
custom-css-modal-confirmation-avaliacao-excluir   custom-css-modal-confirmation-backup-de-mensagens
custom-css-modal-confirmation-base-de-conhecimento custom-css-modal-confirmation-campanha-excluir
custom-css-modal-confirmation-categoria-de-fluxo-excluir custom-css-modal-confirmation-categoria-de-setor-excluir
custom-css-modal-confirmation-conciliacao-conexoes custom-css-modal-confirmation-conexao
custom-css-modal-confirmation-conexao-facebook    custom-css-modal-confirmation-config-campanha-excluir
custom-css-modal-confirmation-config-webhook-excluir custom-css-modal-confirmation-conta-de-email-excluir
custom-css-modal-confirmation-contato-excluir     custom-css-modal-confirmation-contato-excluir-v2
custom-css-modal-confirmation-contatos-duplicados custom-css-modal-confirmation-contatos-importar-conversas
custom-css-modal-confirmation-conversa-interna-excluir custom-css-modal-confirmation-crm-funis
custom-css-modal-confirmation-empresa-excluir     custom-css-modal-confirmation-etiqueta-criar
custom-css-modal-confirmation-etiqueta-excluir    custom-css-modal-confirmation-fatura
custom-css-modal-confirmation-fluxo-duplicar      custom-css-modal-confirmation-fluxo-excluir
custom-css-modal-confirmation-fluxo-padrao        custom-css-modal-confirmation-informativo-excluir
custom-css-modal-confirmation-informativos-excluir custom-css-modal-confirmation-item-da-lista-excluir
custom-css-modal-confirmation-link-curto-excluir  custom-css-modal-confirmation-lista-de-contatos-excluir
custom-css-modal-confirmation-mensagem-apagar     custom-css-modal-confirmation-nota-do-contato-excluir
custom-css-modal-confirmation-notas-do-contato-excluir custom-css-modal-confirmation-oportunidade-excluir
custom-css-modal-confirmation-oportunidade-excluir-modal custom-css-modal-confirmation-plano-excluir
custom-css-modal-confirmation-produto-excluir     custom-css-modal-confirmation-prompt-excluir
custom-css-modal-confirmation-proposta-enviar     custom-css-modal-confirmation-proposta-excluir
custom-css-modal-confirmation-quadro-config-excluir custom-css-modal-confirmation-quadro-mover
custom-css-modal-confirmation-resposta-rapida-excluir custom-css-modal-confirmation-respostas-rapidas-excluir
custom-css-modal-confirmation-servico-excluir     custom-css-modal-confirmation-setor-excluir
custom-css-modal-confirmation-tarefa-excluir-modal custom-css-modal-confirmation-token-da-empresa
custom-css-modal-confirmation-usuario-excluir     custom-css-modal-confirmation-webhook-excluir
custom-css-modal-contact                          custom-css-modal-contact-list
custom-css-modal-contact-list-item                custom-css-modal-contact-list-items
custom-css-modal-contact-modal-ticket             custom-css-modal-contact-send
custom-css-modal-contact-summary                  custom-css-modal-contacts
custom-css-modal-copilot                          custom-css-modal-copilot-historico
custom-css-modal-crm-auditoria-decisao            custom-css-modal-crm-funil
custom-css-modal-crm-importar                     custom-css-modal-crm-metas
custom-css-modal-crm-motivo-perda                 custom-css-modal-crm-quem-acessa
custom-css-modal-crm-raia                         custom-css-modal-cross-domain-meta-oauth
custom-css-modal-dashboard-settings               custom-css-modal-docker-code
custom-css-modal-docker-perfil                    custom-css-modal-email-account
custom-css-modal-email-compose                    custom-css-modal-erro-meta
custom-css-modal-espiar-conversa                  custom-css-modal-facebook-aini
custom-css-modal-facebook-portal                  custom-css-modal-facebook-queue
custom-css-modal-facilita-vendas                  custom-css-modal-facilita-vendas-remover
custom-css-modal-file-upload                      custom-css-modal-file-upload-hub
custom-css-modal-flow-add-audio                   custom-css-modal-flow-add-img
custom-css-modal-flow-add-text                    custom-css-modal-flow-add-video
custom-css-modal-flow-asaas                       custom-css-modal-flow-avaliacao
custom-css-modal-flow-away                        custom-css-modal-flow-button
custom-css-modal-flow-carousel                    custom-css-modal-flow-category
custom-css-modal-flow-close                       custom-css-modal-flow-close-quick
custom-css-modal-flow-comment-reply               custom-css-modal-flow-condition
custom-css-modal-flow-contact                     custom-css-modal-flow-external-chat-link
custom-css-modal-flow-http-request                custom-css-modal-flow-internal
custom-css-modal-flow-interval                    custom-css-modal-flow-ixc
custom-css-modal-flow-location                    custom-css-modal-flow-logs
custom-css-modal-flow-menu                        custom-css-modal-flow-new-flow
custom-css-modal-flow-new-gpt                     custom-css-modal-flow-new-typebot
custom-css-modal-flow-oportunidade                custom-css-modal-flow-pixel
custom-css-modal-flow-question                    custom-css-modal-flow-queue
custom-css-modal-flow-randomizer                  custom-css-modal-flow-remove-tag
custom-css-modal-flow-rodizio                     custom-css-modal-flow-single-block
custom-css-modal-flow-tag                         custom-css-modal-flow-template
custom-css-modal-flow-templates                   custom-css-modal-flow-user
custom-css-modal-flow-variable                    custom-css-modal-flow-wbh
custom-css-modal-flow-webview                     custom-css-modal-flow-whats-app
custom-css-modal-flowbuilder                      custom-css-modal-fluxo-recuperar
custom-css-modal-fluxo-restaurar                  custom-css-modal-forward-message
custom-css-modal-grupo-criar                      custom-css-modal-grupo-editar
custom-css-modal-grupo-entrar                     custom-css-modal-grupo-info
custom-css-modal-grupo-membros                    custom-css-modal-grupo-participantes
custom-css-modal-hybrid-mode                      custom-css-modal-import-progress
custom-css-modal-import-session                   custom-css-modal-incoming-call
custom-css-modal-information                      custom-css-modal-information-mensagem-aviso
custom-css-modal-instagram-aini                   custom-css-modal-instagram-portal
custom-css-modal-invite-operators                 custom-css-modal-invoices
custom-css-modal-kanban                           custom-css-modal-kanban-team
custom-css-modal-knowledge-base                   custom-css-modal-lista-por-aniversario
custom-css-modal-lista-por-conexao                custom-css-modal-lista-por-grupo
custom-css-modal-lista-por-tag                    custom-css-modal-message-options-menu
custom-css-modal-meta-embedded-signup             custom-css-modal-meta-sip
custom-css-modal-meta-template-detalhe            custom-css-modal-migra-itens-usuario
custom-css-modal-migracao-empresa                 custom-css-modal-migrate-tickets
custom-css-modal-modal-users                      custom-css-modal-new-connection
custom-css-modal-new-ticket-modal-ticket          custom-css-modal-new-ticket-modal-ticket-alternativa
custom-css-modal-new-ticket-modal-ticket-official custom-css-modal-newticket
custom-css-modal-notas-do-contato                 custom-css-modal-notificame-connection
custom-css-modal-oportunidades                    custom-css-modal-paircode
custom-css-modal-passkey-pair                     custom-css-modal-pipeline-etapas
custom-css-modal-pontos-de-iamanager              custom-css-modal-product
custom-css-modal-prompt                           custom-css-modal-proposta-config
custom-css-modal-proxy-diagnostic                 custom-css-modal-qrcode
custom-css-modal-queue                            custom-css-modal-queue-category
custom-css-modal-quick-message                    custom-css-modal-rating
custom-css-modal-rating-close                     custom-css-modal-rating-form
custom-css-modal-ratings-report                   custom-css-modal-rcs
custom-css-modal-reconnect-choose                 custom-css-modal-remarketing-log
custom-css-modal-resposta-na-volta                custom-css-modal-sales-goals
custom-css-modal-schedule                         custom-css-modal-send-limit
custom-css-modal-service                          custom-css-modal-short-link
custom-css-modal-sip-dialer                       custom-css-modal-sip-receiver
custom-css-modal-sistema-postgres                 custom-css-modal-sistema-redis
custom-css-modal-socket-disconnect                custom-css-modal-subscription
custom-css-modal-tag                              custom-css-modal-tag-contacts
custom-css-modal-tag-dono-em-massa                custom-css-modal-tags-por-criador-impacto
custom-css-modal-tarefa-anexos                    custom-css-modal-tarefa-comentarios
custom-css-modal-tarefa-compartilhar              custom-css-modal-task
custom-css-modal-telegram-aini                    custom-css-modal-template-groups
custom-css-modal-ticket                           custom-css-modal-ticket-files
custom-css-modal-ticket-files-preview             custom-css-modal-ticket-quadro
custom-css-modal-ticket-resumo                    custom-css-modal-tiktok
custom-css-modal-transfer-carteira                custom-css-modal-transfer-ticket
custom-css-modal-transfer-ticket-modal-custom     custom-css-modal-translation-manager
custom-css-modal-two-factor-setup                 custom-css-modal-user
custom-css-modal-usuario-fechar-tickets           custom-css-modal-usuario-transferir-tickets
custom-css-modal-waba-connection                  custom-css-modal-waba-template
custom-css-modal-waba-template-excluir            custom-css-modal-waba-template-json
custom-css-modal-waba-template-midia-local        custom-css-modal-waba-template-new
custom-css-modal-wabatemplate-preview             custom-css-modal-webchat
custom-css-modal-webhook                          custom-css-modal-whatsapp
custom-css-modal-whatsapp-docker                  custom-css-modal-whatsmeow-events
custom-css-modal-whatsmeow-sip
```

## Âncoras específicas, por área

Partes de tela com alvo próprio — o balão da mensagem, o cartão do funil, a
barra de ações. Âncora usada em mais de uma área aparece em todas.

| Área | Âncoras |
|---|---|
| `AgendasVisiveisSelect` | `.custom-css-user-modal-agendas` |
| `AmqpMessages` | `.custom-css-amqp-vazio` |
| `AnexosDoRegistro` | `.custom-css-anexos` |
| `Annoucements` | `.custom-css-btn-open-form` |
| `AnswerFromIABar` | `.custom-css-answer-from-ia` · `.custom-css-answer-from-ia-actions` · `.custom-css-answer-from-ia-bar` · `.custom-css-answer-from-ia-card` · `.custom-css-answer-from-ia-header` · `.custom-css-answer-from-ia-points` · `.custom-css-answer-from-ia-text` · `.custom-css-button` · `.custom-css-button-answer-from-ia-dismiss` · `.custom-css-button-answer-from-ia-improve` · `.custom-css-button-answer-from-ia-regenerate` · `.custom-css-button-answer-from-ia-suggest` · `.custom-css-button-answer-from-ia-toggle` · `.custom-css-button-answer-from-ia-use` |
| `AnswerFromIASettings` | `.custom-css-button` · `.custom-css-button-answer-from-ia-save` · `.custom-css-page` · `.custom-css-page-answer-from-ia` |
| `App` | `.custom-css-dark` |
| `AtendimentoReport` | `.custom-css-atendimento-report-pdf` |
| `AtividadesDaOportunidade` | `.custom-css-atividade` · `.custom-css-atividade-descricao` · `.custom-css-atividade-link` · `.custom-css-atividade-prazo` · `.custom-css-atividades` · `.custom-css-atividades-agenda` · `.custom-css-atividades-cancelar` · `.custom-css-atividades-criar` · `.custom-css-atividades-form` · `.custom-css-atividades-historico` |
| `AvatarOperador` | `.custom-css-avatar-operador` |
| `BarraDeAcoes` | `.custom-css-ticket-actions-overflow` · `.custom-css-ticket-actions-overflow-menu` |
| `BarraDeConcatenacao` | `.custom-css-message-barra-concat` |
| `BloqueioDeEspera` | `.custom-css-bloqueio-espera` |
| `ButtonWithSpinner` | `.custom-css-btn-confirm` |
| `Campaigns` | `.custom-css-btn-open-form` |
| `Chat` | `.custom-css-menu` · `.custom-css-menu-mensagem-chat-interno` · `.custom-css-page-title` |
| `ComentariosDaOportunidade` | `.custom-css-oportunidade-comentarios` |
| `ComentariosDoRegistro` | `.custom-css-comentarios` |
| `CompanyCustomization` | `.custom-css-poslogin` |
| `CompartilharRegistro` | `.custom-css-compartilhar` |
| `ConciliacaoConexoes` | `.custom-css-conciliacao-conexoes` |
| `ConfirmationModal` | `.custom-css-btn-cancel` · `.custom-css-btn-confirm` |
| `Connections` | `.custom-css-connection-card` · `.custom-css-connection-concatenador` · `.custom-css-connection-filters` · `.custom-css-connection-manual-review` · `.custom-css-connection-meta` · `.custom-css-connection-platform` · `.custom-css-connection-send-limit` · `.custom-css-reconnect-path-dialog` |
| `ContactDrawer` | `.custom-css-contact-drawer` |
| `ContactListItems` | `.custom-css-btn-open-form` |
| `Contacts` | `.custom-css-btn-open-form` · `.custom-css-contacts-import-progress` · `.custom-css-contacts-table` |
| `ContactsDuplicates` | `.custom-css-contacts-duplicates-search` · `.custom-css-contacts-duplicates-search-clear` |
| `ContactsStats` | `.custom-css-contacts-stats` · `.custom-css-contacts-stats-toggle` |
| `ContactTag` | `.custom-css-contact-tag` |
| `CrmPipelineSelect` | `.custom-css-user-modal-funis` |
| `CrmV2Auditoria` | `.custom-css-crm-auditoria` · `.custom-css-crm-auditoria-card` · `.custom-css-crm-auditoria-conteudo` · `.custom-css-crm-auditoria-historico` · `.custom-css-crm-auditoria-historico-card` · `.custom-css-crm-auditoria-tabs` |
| `CrmV2Board` | `.custom-css-crm-board` · `.custom-css-crm-board-card` · `.custom-css-crm-board-copilot` · `.custom-css-crm-board-nova` · `.custom-css-crm-board-raia` · `.custom-css-crm-board-raia-sem-etapa` · `.custom-css-crm-board-raias` · `.custom-css-crm-board-refresh` · `.custom-css-crm-board-ver-mais` · `.custom-css-crm-card-auditoria` · `.custom-css-crm-motivo-perda` |
| `CrmV2Funis` | `.custom-css-crm-funil` · `.custom-css-crm-funil-modal` · `.custom-css-crm-funis` · `.custom-css-crm-funis-novo` · `.custom-css-crm-importar` · `.custom-css-crm-importar-modal` · `.custom-css-crm-quem-acessa` · `.custom-css-crm-quem-acessa-modal` · `.custom-css-crm-raia` · `.custom-css-crm-raia-encadeamentos` · `.custom-css-crm-raia-encadeia` · `.custom-css-crm-raia-modal` · `.custom-css-crm-regra-encadeamento` |
| `CrmV2Ranking` | `.custom-css-crm-metas-modal` · `.custom-css-crm-ranking` · `.custom-css-crm-ranking-linha` · `.custom-css-crm-ranking-metas` |
| `Dashboard` | `.custom-css-aniversariantes` |
| `DashboardNew` | `.custom-css-dash-card` |
| `EmailAccountModal` | `.custom-css-email-account-enderecos` |
| `Emails` | `.custom-css-emails-carregar-mais` |
| `ErrorLogs` | `.custom-css-page-error-logs` |
| `FaixaDeEnvio` | `.custom-css-faixa-envio` |
| `FlowBuilder` | `.custom-css-btn-flow-templates` · `.custom-css-btn-open-form` |
| `FlowBuilderButtonModal` | `.custom-css-flow-button-limites` |
| `FlowBuilderConfig` | `.custom-css-flow-node` · `.custom-css-flow-node-comment-reply` · `.custom-css-flow-node-is-follower` · `.custom-css-flowbuilder-actions` · `.custom-css-flowbuilder-actions-search` |
| `FlowCategories` | `.custom-css-btn-open-form` |
| `FlowTemplatesModal` | `.custom-css-flow-templates` |
| `GoogleCalendarConexao` | `.custom-css-google-calendar-conexao` |
| `GroupManagement` | `.custom-css-btn-open-form` |
| `helpers` | `.custom-css-composer-field` · `.custom-css-mencao` |
| `InstagramPosts` | `.custom-css-instagram-comment-reply` · `.custom-css-instagram-comment-reply-toggle` |
| `Kanban` | `.custom-css-kanban-board` · `.custom-css-kanban-btn-empty-lanes` · `.custom-css-kanban-btn-filters` · `.custom-css-kanban-btn-refresh` · `.custom-css-kanban-btn-tag-filter` · `.custom-css-kanban-card` · `.custom-css-kanban-col` · `.custom-css-kanban-col-body` · `.custom-css-kanban-col-header` · `.custom-css-kanban-col-title` · `.custom-css-kanban-filters` · `.custom-css-kanban-lanes` · `.custom-css-kanban-search` · `.custom-css-kanban-stat-card` · `.custom-css-kanban-stats` · `.custom-css-page-title` |
| `KanbanFilas` | `.custom-css-kanban-filas-board` · `.custom-css-kanban-filas-btn-empty-lanes` · `.custom-css-kanban-filas-btn-filters` · `.custom-css-kanban-filas-btn-refresh` · `.custom-css-kanban-filas-card` · `.custom-css-kanban-filas-col` · `.custom-css-kanban-filas-col-body` · `.custom-css-kanban-filas-col-header` · `.custom-css-kanban-filas-col-title` · `.custom-css-kanban-filas-filters` · `.custom-css-kanban-filas-lanes` · `.custom-css-kanban-filas-search` · `.custom-css-kanban-filas-stat-card` · `.custom-css-kanban-filas-stats` · `.custom-css-page-title` |
| `KanbanGrupos` | `.custom-css-kanban-grupos-board` · `.custom-css-kanban-grupos-btn-empty-lanes` · `.custom-css-kanban-grupos-btn-filters` · `.custom-css-kanban-grupos-btn-refresh` · `.custom-css-kanban-grupos-card` · `.custom-css-kanban-grupos-col` · `.custom-css-kanban-grupos-col-body` · `.custom-css-kanban-grupos-col-header` · `.custom-css-kanban-grupos-col-title` · `.custom-css-kanban-grupos-filters` · `.custom-css-kanban-grupos-lanes` · `.custom-css-kanban-grupos-search` · `.custom-css-kanban-grupos-stat-card` · `.custom-css-kanban-grupos-stats` · `.custom-css-page-title` |
| `KanbanTeam` | `.custom-css-kanban-team-board` · `.custom-css-kanban-team-btn-empty-lanes` · `.custom-css-kanban-team-btn-filters` · `.custom-css-kanban-team-btn-refresh` · `.custom-css-kanban-team-btn-tag-filter` · `.custom-css-kanban-team-card` · `.custom-css-kanban-team-col` · `.custom-css-kanban-team-col-body` · `.custom-css-kanban-team-col-header` · `.custom-css-kanban-team-col-title` · `.custom-css-kanban-team-filters` · `.custom-css-kanban-team-lanes` · `.custom-css-kanban-team-search` · `.custom-css-kanban-team-stat-card` · `.custom-css-kanban-team-stats` · `.custom-css-page-title` |
| `KnowledgeBaseModal` | `.custom-css-knowledge-base-item` · `.custom-css-knowledge-base-modal` |
| `layout` | `.custom-css-appbar-menu` · `.custom-css-dark` · `.custom-css-greeting` · `.custom-css-greeting-company` · `.custom-css-greeting-duedate` · `.custom-css-greeting-name` · `.custom-css-icon` · `.custom-css-logo` · `.custom-css-menu-group` · `.custom-css-menu-item` · `.custom-css-sidebar` · `.custom-css-topbar-actions` |
| `LeadsDoAnuncioModal` | `.custom-css-lead-do-anuncio` · `.custom-css-leads-do-anuncio` |
| `LimitadorDeEnvioModal` | `.custom-css-send-limit-breakdown` |
| `Login` | `.custom-css-login-card` · `.custom-css-login-logo` |
| `MainHeader` | `.custom-css-page-header` |
| `MessageInputCustom` | `.custom-css-composer` · `.custom-css-composer-extras` · `.custom-css-composer-field` |
| `MessageInputCustomHub` | `.custom-css-composer` · `.custom-css-composer-extras` · `.custom-css-composer-favoritas` · `.custom-css-composer-favoritas-menu` · `.custom-css-composer-field` · `.custom-css-composer-forcar-hibrido` |
| `MessagesList` | `.custom-css-conversation-bar` · `.custom-css-conversation-bar-active` · `.custom-css-conversation-bar-btn-template` · `.custom-css-conversation-bar-expired` · `.custom-css-conversation-bar-human-agent` · `.custom-css-conversation-bar-text` · `.custom-css-message-aguardando` · `.custom-css-message-chat-externo` · `.custom-css-messages` · `.custom-css-msg-bubble` · `.custom-css-resposta-na-volta-aviso` |
| `MessagesListGhost` | `.custom-css-messages` · `.custom-css-msg-bubble` |
| `MessagesSearchBar` | `.custom-css-msg-search` · `.custom-css-msg-search-btn-close` · `.custom-css-msg-search-btn-nav` · `.custom-css-msg-search-counter` · `.custom-css-msg-search-icon` · `.custom-css-msg-search-input` · `.custom-css-msg-search-nav` |
| `MetaTemplateLogs` | `.custom-css-meta-template-divergencias` · `.custom-css-meta-template-erro` · `.custom-css-meta-template-json` |
| `MinhaEvolucao` | `.custom-css-gamificacao-config` · `.custom-css-minha-evolucao` · `.custom-css-minha-evolucao-atualizar` · `.custom-css-minha-evolucao-config` · `.custom-css-minha-evolucao-degrau` · `.custom-css-minha-evolucao-extrato` · `.custom-css-minha-evolucao-nivel` |
| `NotasDoContato` | `.custom-css-notas-do-contato` |
| `NotasInternasDoTicket` | `.custom-css-btn-notas-mais` · `.custom-css-btn-ver-notas-internas` · `.custom-css-popover` · `.custom-css-popover-notas-internas` |
| `NotificationBadge` | `.custom-css-icon` |
| `OportunidadesModal` | `.custom-css-oportunidade-abas` · `.custom-css-oportunidade-anexos` · `.custom-css-oportunidade-btn-excluir` · `.custom-css-oportunidade-btn-proposta` · `.custom-css-oportunidade-campo-livre-1` · `.custom-css-oportunidade-campo-livre-2` · `.custom-css-oportunidade-campo-livre-3` · `.custom-css-oportunidade-campo-livre-4` · `.custom-css-oportunidade-campos-livres` · `.custom-css-oportunidade-campos-livres-titulo` · `.custom-css-oportunidade-origem` · `.custom-css-oportunidade-propostas-grid` · `.custom-css-oportunidade-responsavel` · `.custom-css-oportunidade-vinculo` |
| `PaginaEmIframe` | `.custom-css-pagina-em-iframe` · `.custom-css-pagina-em-iframe-quadro` |
| `Pipeline` | `.custom-css-dash-card` · `.custom-css-page-title` · `.custom-css-pipeline-board` · `.custom-css-pipeline-btn-customize` · `.custom-css-pipeline-btn-refresh` · `.custom-css-pipeline-btn-stats` · `.custom-css-pipeline-card` · `.custom-css-pipeline-card-content` · `.custom-css-pipeline-card-header` · `.custom-css-pipeline-customize-modal` · `.custom-css-pipeline-filters` · `.custom-css-pipeline-lane` · `.custom-css-pipeline-lane-body` · `.custom-css-pipeline-lane-empty` · `.custom-css-pipeline-lane-header` · `.custom-css-pipeline-lane-sem-etapa` · `.custom-css-pipeline-lane-title` · `.custom-css-pipeline-lanes` · `.custom-css-pipeline-search` · `.custom-css-pipeline-stats` |
| `PixelLogs` | `.custom-css-pixel-logs-day` |
| `PlansManager` | `.custom-css-plano-erro` |
| `PodioDeVendas` | `.custom-css-podio` · `.custom-css-podio-fileira` |
| `PontosDeIAManager` | `.custom-css-button` · `.custom-css-button-answer-from-ia-credit` · `.custom-css-pontos-de-ia` |
| `Products` | `.custom-css-btn-open-form` |
| `ProdutosDaOportunidade` | `.custom-css-oportunidade-produto-item` · `.custom-css-oportunidade-produtos` · `.custom-css-oportunidade-produtos-itens` · `.custom-css-oportunidade-produtos-restantes` · `.custom-css-oportunidade-produtos-total` |
| `Prompts` | `.custom-css-btn-knowledge-base` · `.custom-css-btn-open-form` |
| `PropostaConfigModal` | `.custom-css-proposta-config-btn-logo` · `.custom-css-proposta-config-modal` |
| `Propostas` | `.custom-css-page-title` · `.custom-css-propostas-btn-config` · `.custom-css-propostas-btn-delete` · `.custom-css-propostas-btn-download` · `.custom-css-propostas-btn-enviar` · `.custom-css-propostas-btn-pdf` · `.custom-css-propostas-search` · `.custom-css-propostas-table` |
| `PropostasDaOportunidade` | `.custom-css-oportunidade-propostas` |
| `ProximaAtividade` | `.custom-css-crm-proxima-atividade` · `.custom-css-crm-proxima-atividade-prazo` |
| `PushPermissionBanner` | `.custom-css-notification-banner` |
| `QuadroDeAtendimentos` | `.custom-css-quadro-fora-do-plano` · `.custom-css-quadro-pagina` |
| `QueueCategories` | `.custom-css-btn-open-form` |
| `QueueModal` | `.custom-css-queue-chatbot` |
| `Queues` | `.custom-css-btn-open-form` |
| `QuickMessages` | `.custom-css-btn-open-form` · `.custom-css-quickmessage-favorita` |
| `Ratings` | `.custom-css-btn-open-form` |
| `RelatorioAnuncios` | `.custom-css-abrir-leads-do-anuncio` · `.custom-css-relatorio-anuncios` · `.custom-css-relatorio-anuncios-csv` · `.custom-css-relatorio-anuncios-filtros` · `.custom-css-relatorio-anuncios-tabela` · `.custom-css-relatorio-anuncios-totais` · `.custom-css-relatorio-anuncios-truncado` |
| `RelatorioRodizio` | `.custom-css-relatorio-rodizio` · `.custom-css-relatorio-rodizio-csv` · `.custom-css-relatorio-rodizio-filtros` · `.custom-css-relatorio-rodizio-grafico` · `.custom-css-relatorio-rodizio-grupo` · `.custom-css-relatorio-rodizio-seletor-de-no` · `.custom-css-relatorio-rodizio-tabela` · `.custom-css-relatorio-rodizio-totais` · `.custom-css-relatorio-rodizio-transbordo` · `.custom-css-relatorio-rodizio-vazio` |
| `RelatorioVendas` | `.custom-css-relatorio-vendas` · `.custom-css-relatorio-vendas-csv` · `.custom-css-relatorio-vendas-filtros` · `.custom-css-relatorio-vendas-linha` · `.custom-css-relatorio-vendas-origem` · `.custom-css-relatorio-vendas-perdas` · `.custom-css-relatorio-vendas-produto` · `.custom-css-relatorio-vendas-tabela` · `.custom-css-relatorio-vendas-totais` · `.custom-css-relatorio-vendas-truncado` · `.custom-css-relatorio-vendas-vendedor` · `.custom-css-relatorio-vendas-visao-geral` |
| `RemarketingLogs` | `.custom-css-btn-refresh` |
| `SalesRanking` | `.custom-css-page-title` |
| `Schedules` | `.custom-css-btn-open-form` |
| `Services` | `.custom-css-btn-open-form` |
| `Settings` | `.custom-css-setting-menu-type` · `.custom-css-settings-crm-versao` · `.custom-css-token-da-empresa` |
| `SettingsCustom` | `.custom-css-settings-menu` · `.custom-css-settings-menu-item` |
| `ShortLinks` | `.custom-css-btn-open-form` |
| `Signup` | `.custom-css-signup-card` · `.custom-css-signup-logo` |
| `SipDialer` | `.custom-css-icon` |
| `SipReceiver` | `.custom-css-icon` |
| `Tags` | `.custom-css-btn-open-form` |
| `TagsContainer` | `.custom-css-ticket-tags` |
| `TagsStats` | `.custom-css-tags-stats` · `.custom-css-tags-stats-toggle` |
| `TaskModal` | `.custom-css-tarefa-abas` · `.custom-css-tarefa-anexos` · `.custom-css-tarefa-btn-excluir` · `.custom-css-tarefa-comentarios` · `.custom-css-tarefa-compartilhar` |
| `ThirdPart` | `.custom-css-ai-provider` · `.custom-css-google-calendar-config` |
| `Ticket` | `.custom-css-ticket` |
| `TicketActionButtonsCustom` | `.custom-css-ticket-actions` |
| `TicketActionButtonsCustomMobile` | `.custom-css-ticket-actions-menu` |
| `TicketHeader` | `.custom-css-ticket-header` |
| `TicketInfo` | `.custom-css-ticket-presence` |
| `TicketListItemCustom` | `.custom-css-ticket-item` |
| `TicketListItemCustomGroup` | `.custom-css-ticket-item` |
| `TicketQuadroConfigModal` | `.custom-css-quadro-config-ajuda` · `.custom-css-quadro-config-ajuda-atribuir` · `.custom-css-quadro-config-ajuda-colunas` · `.custom-css-quadro-config-btn-add-coluna` · `.custom-css-quadro-config-btn-criar` · `.custom-css-quadro-config-btn-descer` · `.custom-css-quadro-config-btn-excluir-coluna` · `.custom-css-quadro-config-btn-excluir-quadro` · `.custom-css-quadro-config-btn-fechar` · `.custom-css-quadro-config-btn-subir` · `.custom-css-quadro-config-campo-coluna` · `.custom-css-quadro-config-campo-novo` · `.custom-css-quadro-config-coluna` · `.custom-css-quadro-config-coluna-ajuda` · `.custom-css-quadro-config-coluna-nome` · `.custom-css-quadro-config-colunas` · `.custom-css-quadro-config-cor` · `.custom-css-quadro-config-corpo` · `.custom-css-quadro-config-filas` · `.custom-css-quadro-config-filas-nova` · `.custom-css-quadro-config-fixa` · `.custom-css-quadro-config-input-cor` · `.custom-css-quadro-config-input-cor-nova` · `.custom-css-quadro-config-modal` · `.custom-css-quadro-config-nome` · `.custom-css-quadro-config-nova-coluna` · `.custom-css-quadro-config-novo` · `.custom-css-quadro-config-quadro` · `.custom-css-quadro-config-seletor` · `.custom-css-quadro-config-tipo-coluna` · `.custom-css-quadro-config-titulo` · `.custom-css-quadro-config-vazio` |
| `TicketQuadroSelect` | `.custom-css-user-modal-quadros` |
| `TicketsCustom` | `.custom-css-chat-empty` · `.custom-css-chat-empty-image` |
| `TicketsKanban` | `.custom-css-button` · `.custom-css-quadro-acoes` · `.custom-css-quadro-btn-config` · `.custom-css-quadro-btn-encerrar-toggle` · `.custom-css-quadro-btn-novo-ticket` · `.custom-css-quadro-btn-ordem` · `.custom-css-quadro-btn-pausa` · `.custom-css-quadro-btn-sem-resposta` · `.custom-css-quadro-btn-so-os-meus` · `.custom-css-quadro-busca` · `.custom-css-quadro-busca-limpar` · `.custom-css-quadro-canal` · `.custom-css-quadro-card` · `.custom-css-quadro-coluna` · `.custom-css-quadro-coluna-cabecalho` · `.custom-css-quadro-coluna-corpo` · `.custom-css-quadro-coluna-regra` · `.custom-css-quadro-coluna-vazia` · `.custom-css-quadro-conexao` · `.custom-css-quadro-de-tickets` · `.custom-css-quadro-encerrar` · `.custom-css-quadro-fila` · `.custom-css-quadro-filtro-conexao` · `.custom-css-quadro-filtro-fila` · `.custom-css-quadro-filtro-grupo` · `.custom-css-quadro-filtro-operador` · `.custom-css-quadro-filtros` · `.custom-css-quadro-fixar` · `.custom-css-quadro-grupo` · `.custom-css-quadro-indicador` · `.custom-css-quadro-indicadores` · `.custom-css-quadro-nao-lidas` · `.custom-css-quadro-operador` · `.custom-css-quadro-pausado` · `.custom-css-quadro-pisca` · `.custom-css-quadro-seletor` · `.custom-css-quadro-tempo` |
| `TicketsListCustom` | `.custom-css-ticket-list` |
| `TicketsListGroup` | `.custom-css-ticket-list` |
| `TicketsManagerTabs` | `.custom-css-grupos-nao-lidos` · `.custom-css-ticket-search` · `.custom-css-ticket-tabs` · `.custom-css-tickets` · `.custom-css-tickets-toolbar` · `.custom-css-tickets-toolbar-buttons` · `.custom-css-tickets-toolbar-search` |
| `Title` | `.custom-css-page-title` |
| `UserModal` | `.custom-css-user-limite-de-atendimentos` · `.custom-css-user-pagina-inicial` |
| `Users` | `.custom-css-btn-open-form` · `.custom-css-user-btn-acessos` |
| `WABATemplates` | `.custom-css-template-groups-modal` · `.custom-css-waba-template-autoria` |
| `Webhook` | `.custom-css-btn-open-form` |
| `WebhookDoFunil` | `.custom-css-crm-funil-webhook` |

## Chat Externo (página pública)

A página que o cliente final abre pelo link do Modo Alternativo
(`frontend/public/chat/index.html`) é HTML estático, fora do React, e é
vestida por **outro campo** — `Companies.chatCss`, em Empresas → Configurações
→ CSS do Chat Externo —, não pelo CSS da plataforma. Por que é um campo
separado está em [Customizacao-CSS-JS.md](./Customizacao-CSS-JS.md).

31 âncoras, lidas da página, na ordem da tela:

| Âncora | O quê |
|---|---|
| `.custom-css-chat-app` | a tela inteira |
| `.custom-css-chat-header` | o topo |
| `.custom-css-chat-avatar` | a foto no topo |
| `.custom-css-chat-title` | o nome no topo |
| `.custom-css-chat-subtitle` | a linha de status no topo (conectando… / online) |
| `.custom-css-chat-banner` | a faixa de aviso (conversa encerrada; também é onde o botão de notificação aparece) |
| `.custom-css-chat-messages` | a área de conversa |
| `.custom-css-chat-date-divider` | o divisor de data (Hoje, Ontem, dd/mm) |
| `.custom-css-chat-row` | cada mensagem — a linha inteira, com o balão, as reações e o botão de ações |
| `.custom-css-chat-bubble` | o balão |
| `.custom-css-chat-quote` | a citação dentro do balão (resposta a outra mensagem) e a prévia na barra de resposta |
| `.custom-css-chat-media` | imagem, áudio ou vídeo dentro do balão |
| `.custom-css-chat-doc` | o anexo (link para o arquivo) dentro do balão |
| `.custom-css-chat-caption` | a legenda de uma imagem |
| `.custom-css-chat-meta` | hora e checks, dentro do balão |
| `.custom-css-chat-reactions` | a fileira de reações embaixo do balão |
| `.custom-css-chat-reaction` | cada reação da fileira (agrupada por emoji, com o contador quando há mais de uma) |
| `.custom-css-chat-actions-btn` | o botão ao lado do balão que abre "reagir / responder" |
| `.custom-css-chat-actions` | a barra de ações aberta |
| `.custom-css-chat-action-react` | cada emoji rápido da barra de ações |
| `.custom-css-chat-action-reply` | o botão de responder da barra de ações |
| `.custom-css-chat-reply-bar` | a barra "respondendo a…" sobre o campo de digitação |
| `.custom-css-chat-reply-cancel` | o × que fecha a barra de resposta |
| `.custom-css-chat-composer` | a barra de digitação |
| `.custom-css-chat-input` | o campo de texto |
| `.custom-css-chat-mic` | o botão do microfone |
| `.custom-css-chat-send` | o botão de enviar |
| `.custom-css-chat-aviso` | o botão "avisar quando chegar mensagem" (pedido de permissão de notificação), dentro da faixa |
| `.custom-css-chat-screen` | a tela de carregando / erro / senha, sobre tudo |
| `.custom-css-chat-pass` | o formulário da senha (chat autenticado), dentro dessa tela |
| `.custom-css-chat-lightbox` | a imagem ampliada |

Atributos de estado da página:

| Atributo | Onde | Valores |
|---|---|---|
| `data-autor` | `.custom-css-chat-row`, `.custom-css-chat-quote` e `.custom-css-chat-reaction` | na linha e na citação: `contato` (o visitante) · `atendente`. Na reação: `contato` · `atendente` · `ambos` (os dois reagiram com o mesmo emoji). ⚠️ Use este, e não as classes `out`/`in` da página: ali `out` é a mensagem do VISITANTE — o inverso do `fromMe` do resto da plataforma |
| `data-aviso` | `.custom-css-chat-banner` | `1` enquanto a faixa está mostrando o botão de pedir permissão de notificação; some quando o visitante responde ao pedido |
| `data-body` | `.custom-css-chat-row` | o texto da mensagem. Uso interno da página (casa a bolha otimista com a confirmação) — não é um bom alvo de CSS |
| `data-emoji` | `.custom-css-chat-reaction` e `.custom-css-chat-action-react` | o próprio emoji |
| `data-id` | `.custom-css-chat-row` | o id da mensagem na plataforma. É o alvo do clique na citação; a bolha recém-enviada ganha o id quando o servidor responde |
| `data-media-type` | `.custom-css-chat-row` | `text` · `image` · `audio` · `video` · `doc` |
| `data-optimistic` | `.custom-css-chat-row` | `1` enquanto a mensagem do visitante ainda não foi confirmada pelo servidor; o atributo some na confirmação (o `data-status` vira `sent`) |
| `data-quoted-id` | `.custom-css-chat-quote` | o id da mensagem citada |
| `data-reacted` | `.custom-css-chat-row` | `true` quando o visitante reagiu a esta mensagem · `false` |
| `data-reactions` | `.custom-css-chat-row` | as reações em JSON. Uso interno da página (é como o poll sabe se mudou); para estilizar use `data-reacted` e as `.custom-css-chat-reaction` |
| `data-status` | `.custom-css-chat-row` | `sent` · `received` · `pending` (a mensagem do visitante ainda não confirmada pelo servidor) · `failed` |
| `data-wid` | `.custom-css-chat-row` | o identificador da mensagem no canal (`ext_…` quando o visitante escreveu pela própria página) |

> ⚠️ **`out`/`in`.** As classes originais da página continuam lá, mas ali `out`
> é a mensagem do **visitante** — o inverso do `fromMe` do resto da plataforma.
> Use `data-autor`, que não tem essa inversão.

```css
.custom-css-chat-header { background: #101014; }
.custom-css-chat-row[data-autor="atendente"] .custom-css-chat-bubble { background: #1f6feb; color: #fff; }
.custom-css-chat-row[data-reacted="true"] .custom-css-chat-bubble { outline: 1px solid #1f6feb; }
.custom-css-chat-row[data-status="failed"] .custom-css-chat-bubble { outline: 1px solid #d33; }
```

## Histórico

O que MUDOU em elemento que já tinha gancho, e se foi acréscimo ou troca. De
fora não há como saber se um atributo novo substituiu algo — e a diferença é
um realce que some sem ninguém entender por quê.

### 29.416.0

- Chat Externo (página pública): reações e respostas com citação. Âncoras novas `.custom-css-chat-quote`, `.custom-css-chat-reactions` / `-reaction`, `.custom-css-chat-actions-btn`, `.custom-css-chat-actions` / `-action-react` / `-action-reply`, `.custom-css-chat-reply-bar` / `-reply-cancel`. `data-id` e `data-reacted` ACRESCENTADOS na `.custom-css-chat-row`; `data-autor` ganhou o valor `ambos` (só na `.custom-css-chat-reaction`) e passou a existir também na `.custom-css-chat-quote`. Nada foi substituído.
- O balão (`.custom-css-chat-bubble`) passou a ficar dentro de uma coluna (balão + reações) ao lado do botão de ações: seletores descendentes (`.custom-css-chat-row .custom-css-chat-bubble`) continuam valendo; só `>` (filho direto) entre a linha e o balão deixaria de casar.
- A página do Chat Externo entrou neste catálogo, em seção própria lida do HTML. A tabela escrita à mão do Customizacao-CSS-JS.md saiu — estava duas âncoras atrás da página (`-pass` e `-aviso`).

### 29.414.0

- Tela nova: relatório do rodízio (`#custom-css-relatorio-rodizio`), com `data-flow-id`, `data-node-id` e `data-transbordos` no bloco de cada nó e `data-operator-id` / `data-fora-do-no` na linha de cada operador. `data-operator-id` já existia na linha do ranking; o valor é o mesmo (o id do operador).

### 29.413.0

- `data-queue-chatbot` e `data-queue-id` ACRESCENTADOS nos cards do quadro de atendimentos e dos quatro kanbans (`/kanban`, equipe, filas e grupos); `data-queue-chatbot` também no cartão de grupo e no cabeçalho da conversa aberta. Nada foi substituído — o cartão da lista continua exatamente como estava.
- `data-flow-status` e `data-bot-ativo` (novos) no cartão do ticket, no cartão de grupo, no cabeçalho da conversa aberta e nos cards do quadro e dos kanbans.
- `.custom-css-quadro-coluna-cabecalho`, `.custom-css-quadro-coluna-corpo` e `.custom-css-quadro-coluna-vazia` (novas) dentro da coluna do quadro, e `data-vazia` na própria `.custom-css-quadro-coluna`.
- Cartão do menu de Configurações ganhou `id="simple-tab-<aba>"`, `role="tab"`, `aria-selected`, `aria-controls="simple-tabpanel-<aba>"`, `data-settings-tab`, `data-active` e `.custom-css-settings-menu-item`; a lista dos cartões, `role="tablist"` e `.custom-css-settings-menu`. O anzol por texto do rótulo pode ser aposentado.
- `data-coluna-tipo` ganhou o valor `PENDENTE_FILA` (coluna automática por fila). `PENDENTE_LIVRE` existia desde a 29.410.0 e faltava nesta tabela.
- `data-regra="fila"` (novo) no ícone `.custom-css-quadro-coluna-regra`, no cabeçalho da coluna automática.
- Dezessete atributos que já estavam no código sem descrição aqui (o catálogo não era gerado desde 17/09) ganharam descrição: `data-answer-from-ia-camada`, `data-apagada`, `data-chat-id`, `data-emoji`, `data-fixado`, `data-forcar-hibrido`, `data-minha`, `data-mostra-encerrar`, `data-nota-id`, `data-pisca`, `data-pode-espiar`, `data-prefixo`, `data-prefixos`, `data-so-os-meus`, `data-so-sem-resposta`, `data-tem-contato`, `data-usuario-id`. Nada mudou neles nesta build — só passaram a existir no catálogo.

## Não achou o que queria

Inspecione o elemento no navegador: se ele tiver uma classe `custom-css-*`,
ela está aqui. Se não tiver, o alvo ainda não existe — peça, porque depender
das classes do Material-UI (`.MuiPaper-root`, `.jss123`) quebra na próxima
atualização da biblioteca.

Totais: 103 páginas · 267 modais · 434 específicas · 211 atributos · Chat Externo: 31 âncoras e 12 atributos.