/* ========================================================================= Chatwoot 4.x — estilo personalizado (injetado pelo nginx sidecar) Este arquivo é servido em /custom/chatwoot-custom.css e injetado no de todas as páginas. O destaque da mensagem citada NÃO está aqui: ele precisa de JavaScript (o Chatwoot rola sem mudar a URL, então o `:target` do CSS não alcança) e mora em chatwoot-custom.js. Escrito em cima do HTML REAL da sua instância, não mais por adivinhação. Estrutura confirmada de um balão: div#message73696.message-bubble-container.justify-start <- a mensagem div.grid[style*="grid-area"] <- grade div[grid-area:avatar] (só existe quando tem avatar) div[grid-area:bubble] div[data-bubble-name="text"] <- o balão div.prose-bubble <- citação div.gap-3.flex.flex-col > span.prose.prose-bubble <- texto div.text-xs > div > time <- horário `justify-end` = mensagem de saída (agente) `justify-start` = mensagem de entrada (cliente) ========================================================================= */ /* ------------------------------------------------------------------------- CORES — mude só aqui ------------------------------------------------------------------------- */ :root { --safei-verde: #a9f0c8; /* balão do atendente (cor da logo Safei) */ --safei-verde-texto: #10281c; --safei-verde-escuro: #146b4a; /* tema escuro */ --safei-lilas: #e6dcfb; /* mensagem enviada pelo CELULAR (UaZapi) */ --safei-lilas-texto: #2c1e4a; --safei-lilas-escuro: #4a3a75; --safei-borda-citacao: #16a34a; } /* ------------------------------------------------------------------------- 1. BALÃO DE SAÍDA EM VERDE, ESTILO WHATSAPP ------------------------------------------------------------------------- */ /* Balão do atendente (escrito no painel) */ .message-bubble-container.justify-end:not(.safei-nota) [data-bubble-name] { background-color: var(--safei-verde) !important; color: var(--safei-verde-texto) !important; } .message-bubble-container.justify-end:not(.safei-nota) [data-bubble-name] time, .message-bubble-container.justify-end:not(.safei-nota) [data-bubble-name] .text-xs { color: #3c6b52 !important; } .message-bubble-container.justify-end:not(.safei-nota) [data-bubble-name] a { color: #075e54 !important; } /* Tema escuro */ .dark .message-bubble-container.justify-end:not(.safei-nota) [data-bubble-name] { background-color: var(--safei-verde-escuro) !important; color: #e9edef !important; } .dark .message-bubble-container.justify-end [data-bubble-name] time, .dark .message-bubble-container.justify-end [data-bubble-name] .text-xs { color: #a7c3b6 !important; } .dark .message-bubble-container.justify-end:not(.safei-nota) [data-bubble-name] a { color: #7ee0c4 !important; } /* ------------------------------------------------------------------------- MENSAGEM ENVIADA PELO CELULAR (eco da UaZapi) — lilás A classe `safei-mobile` é posta pelo chatwoot-custom.js: essa informação (`content_attributes.sent_from = 'mobile'`) não existe no HTML, então o script a pega das respostas da API que o próprio painel já busca. POR QUE ESTE BLOCO FICA NO FIM (medido no tema escuro do Pedro): antes ele vinha ANTES das regras `.dark` do verde. No tema claro funcionava — o lilás vinha depois do verde e ganhava por ordem. No tema escuro, não: `.dark .…justify-end…` tem UMA classe a mais que `.…safei-mobile…` (o próprio `.dark`), então a regra escura do verde ganhava por especificidade, e o balão de celular aparecia verde para quem usa tema escuro. Agora todo o lilás — claro e escuro — vem depois de todo o verde, e as duas regras escuras têm a mesma especificidade: quem está por último vence. Ordem passa a ser a única coisa que decide, e ela está explícita. ------------------------------------------------------------------------- */ .message-bubble-container.safei-mobile:not(.safei-nota) [data-bubble-name] { background-color: var(--safei-lilas) !important; color: var(--safei-lilas-texto) !important; } .message-bubble-container.safei-mobile [data-bubble-name] time, .message-bubble-container.safei-mobile [data-bubble-name] .text-xs { color: #6b5b9a !important; } .message-bubble-container.safei-mobile:not(.safei-nota) [data-bubble-name] a { color: #4c1d95 !important; } /* Tema escuro — mesma especificidade da regra escura do verde, e depois dela no arquivo. É isto que conserta o caso do Pedro. */ .dark .message-bubble-container.safei-mobile:not(.safei-nota) [data-bubble-name] { background-color: var(--safei-lilas-escuro) !important; color: #efe9ff !important; } .dark .message-bubble-container.safei-mobile [data-bubble-name] time, .dark .message-bubble-container.safei-mobile [data-bubble-name] .text-xs { color: #d6ccf5 !important; } .dark .message-bubble-container.safei-mobile:not(.safei-nota) [data-bubble-name] a { color: #c4b5fd !important; } /* NOTAS PRIVADAS ficam de fora — o Chatwoot já as pinta de amarelo. A classe `safei-nota` é posta pelo chatwoot-custom.js, que lê `private: true` das respostas da API. `private` também não existe no HTML, mesma história do `sent_from`. */ /* ------------------------------------------------------------------------- 2. CITAÇÃO MAIS VISÍVEL DENTRO DO BALÃO O bloco cinza da mensagem citada é discreto demais e não parece clicável — sendo que ele É clicável. ------------------------------------------------------------------------- */ [data-bubble-name] > .cursor-pointer.bg-n-alpha-black1 { border-left: 3px solid var(--safei-borda-citacao) !important; transition: background-color .15s ease; } [data-bubble-name] > .cursor-pointer.bg-n-alpha-black1:hover { background-color: rgba(22, 163, 74, 0.12) !important; } .message-bubble-container.justify-end [data-bubble-name] > .cursor-pointer.bg-n-alpha-black1 { border-left-color: #075e54 !important; } /* ------------------------------------------------------------------------- 3. NOTA DE MENSAGEM APAGADA / EDITADA As notas que o n8n escreve começam com ⚠️ ou ✏️. Não dá para selecionar por texto em CSS, então isto só realça o bloco de citação dentro delas, que é onde fica o conteúdo preservado. ------------------------------------------------------------------------- */ [data-bubble-name] blockquote { border-left: 3px solid #f59e0b !important; padding-left: .6rem !important; opacity: .95; } /* ------------------------------------------------------------------------- 4. TIQUE DE LEITURA MAIS VISÍVEL Medido no HTML do balão (25/08). O Chatwoot desenha os dois assim: enviado / entregue -> lido -> Mesmo ícone; o que muda é só a cor. Por isso o seletor tem que ser pelo HEX — não há classe "read" para agarrar. O ícone não é fonte nem SVG: é uma MÁSCARA pintada com `currentColor`. Mudar só `color` funciona na maioria dos casos, mas o `background-color` também é `currentColor` — por isso as duas propriedades, para não depender de qual das duas a build do Chatwoot está usando. `#7EB6FF` é um azul claro. Sobre o balão verde do tema claro ele quase some, que foi a reclamação. Aqui ele fica azul forte e um pouco maior. SE UM DIA VOLTAR A FICAR CLARO: o Chatwoot trocou o hex numa atualização. Pegue o HTML do balão de novo e troque o valor dentro do seletor. ------------------------------------------------------------------------- */ :root { --safei-lido: #0b57d0; /* tema claro */ --safei-lido-escuro: #a8d1ff; /* tema escuro */ } .message-bubble-container [data-bubble-name] span.i-lucide-check-check.text-\[\#7EB6FF\] { color: var(--safei-lido) !important; background-color: var(--safei-lido) !important; width: 1rem !important; height: 1rem !important; } .dark .message-bubble-container [data-bubble-name] span.i-lucide-check-check.text-\[\#7EB6FF\] { color: var(--safei-lido-escuro) !important; background-color: var(--safei-lido-escuro) !important; }