/* =================================================================== ZeraSync — Tema Zera (recolor de marca) Escopado à conta "Zera Interno" (account 2) pela classe .zera no (ver zera-theme.js). Inerte nas outras contas. NÃO remove nem oculta NADA — só troca a cor de marca do Chatwoot (azul #2781f6) pelo azul da Zera (#5865f2), via as variáveis CSS nativas. =================================================================== */ /* ---- CLARO ---- */ html.zera{ --blue-1: 250 251 254; --blue-2: 245 247 255; --blue-3: 237 240 255; --blue-4: 226 231 255; --blue-5: 214 220 255; --blue-6: 198 205 253; --blue-7: 176 184 250; --blue-8: 146 156 246; --blue-9: 88 101 242; /* #5865f2 — azul Zera (cor sólida / botões) */ --blue-10: 76 88 228; /* hover */ --blue-11: 78 86 212; /* texto azul */ --blue-12: 33 40 96; --solid-blue: 226 231 255; --solid-blue-2: 250 251 254; --text-blue: 30 34 92; --border-blue-strong: 40 46 110; --border-blue: 88, 101, 242, 0.5; } /* ---- ESCURO ---- ATENÇÃO: o Chatwoot aplica a classe .dark no (não no ), via setColorTheme() em dashboard/helper/themeHelper.js. Por isso o seletor é `html.zera body.dark` — as variáveis passam a ser definidas no body, que é ancestral de todos os componentes. */ html.zera body.dark{ --blue-1: 12 14 22; --blue-2: 17 20 32; --blue-3: 25 30 64; --blue-4: 32 39 94; --blue-5: 42 50 116; --blue-6: 55 62 140; --blue-7: 70 78 166; --blue-8: 92 100 214; --blue-9: 88 101 242; /* #5865f2 — mesmo azul sólido */ --blue-10: 112 122 250; --blue-11: 156 166 255; --blue-12: 214 220 255; --solid-blue: 32 39 94; --solid-blue-2: 20 22 30; --text-blue: 214 220 255; --border-blue-strong: 198 205 255; --border-blue: 88, 101, 242, 0.5; } /* ============================ POLISH (fase 2) ============================ Tudo aditivo/visual — NUNCA display:none, nunca esconde recurso. ======================================================================== */ /* Fundo estilo WhatsApp na área de mensagens. .conversation-panel = container nativo do chat no Chatwoot v4 (position:relative). Aplicado como background-image (fica atrás do conteúdo, acima da cor de fundo). */ html.zera .conversation-panel{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27170%27%20height%3D%27170%27%20viewBox%3D%270%200%20170%20170%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238b93ab%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.30%27%3E%3Crect%20x%3D%2716%27%20y%3D%2722%27%20width%3D%2748%27%20height%3D%2732%27%20rx%3D%279%27/%3E%3Cpath%20d%3D%27M30%2054%20l0%209%20l11%20-9%27/%3E%3Cpath%20d%3D%27M104%2040%20l5%205%20l12%20-14%27/%3E%3Cpath%20d%3D%27M118%2040%20l5%205%20l12%20-14%27/%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%27120%27%20r%3D%2715%27/%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%27116%27%20r%3D%271.4%27%20fill%3D%27%238b93ab%27/%3E%3Ccircle%20cx%3D%2744%27%20cy%3D%27116%27%20r%3D%271.4%27%20fill%3D%27%238b93ab%27/%3E%3Cpath%20d%3D%27M31%20124%20q7%207%2014%200%27/%3E%3Cpath%20d%3D%27M120%20112%20c-7%20-9%20-20%20-2%200%2013%20c20%20-15%207%20-22%200%20-13z%27/%3E%3Cpath%20d%3D%27M136%2066%20l0%20-20%20l11%20-3%20l0%2020%27/%3E%3Ccircle%20cx%3D%27133%27%20cy%3D%2766%27%20r%3D%273.4%27/%3E%3Ccircle%20cx%3D%27147%27%20cy%3D%2763%27%20r%3D%273.4%27/%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27120%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%2786%27%20cy%3D%2786%27%20r%3D%272.4%27/%3E%3C/g%3E%3C/svg%3E"); background-size: 190px; } html.zera body.dark .conversation-panel{ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27170%27%20height%3D%27170%27%20viewBox%3D%270%200%20170%20170%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238b93ff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.10%27%3E%3Crect%20x%3D%2716%27%20y%3D%2722%27%20width%3D%2748%27%20height%3D%2732%27%20rx%3D%279%27/%3E%3Cpath%20d%3D%27M30%2054%20l0%209%20l11%20-9%27/%3E%3Cpath%20d%3D%27M104%2040%20l5%205%20l12%20-14%27/%3E%3Cpath%20d%3D%27M118%2040%20l5%205%20l12%20-14%27/%3E%3Ccircle%20cx%3D%2738%27%20cy%3D%27120%27%20r%3D%2715%27/%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%27116%27%20r%3D%271.4%27%20fill%3D%27%238b93ff%27/%3E%3Ccircle%20cx%3D%2744%27%20cy%3D%27116%27%20r%3D%271.4%27%20fill%3D%27%238b93ff%27/%3E%3Cpath%20d%3D%27M31%20124%20q7%207%2014%200%27/%3E%3Cpath%20d%3D%27M120%20112%20c-7%20-9%20-20%20-2%200%2013%20c20%20-15%207%20-22%200%20-13z%27/%3E%3Cpath%20d%3D%27M136%2066%20l0%20-20%20l11%20-3%20l0%2020%27/%3E%3Ccircle%20cx%3D%27133%27%20cy%3D%2766%27%20r%3D%273.4%27/%3E%3Ccircle%20cx%3D%27147%27%20cy%3D%2763%27%20r%3D%273.4%27/%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%27120%27%20r%3D%273%27/%3E%3Ccircle%20cx%3D%2786%27%20cy%3D%2786%27%20r%3D%272.4%27/%3E%3C/g%3E%3C/svg%3E"); } /* ---- Botão de modo claro/escuro (injetado pelo zera-theme.js, só na conta 2) ---- Usa as próprias variáveis do Chatwoot, então se adapta sozinho aos dois temas. É ADITIVO: acrescenta um botão, não esconde nem substitui nada. */ #zera-theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; cursor:pointer; flex-shrink:0; border:1px solid rgb(var(--slate-6)); background:rgb(var(--slate-2)); color:rgb(var(--slate-11)); transition:background .15s, color .15s, border-color .15s; } #zera-theme-toggle:hover{ color:rgb(var(--blue-9)); border-color:rgb(var(--blue-8)); background:rgb(var(--blue-3)); } #zera-theme-toggle:focus-visible{ outline:2px solid rgb(var(--blue-9)); outline-offset:2px; } #zera-theme-toggle svg{ width:18px; height:18px; } /* fallback: se não achar âncora na barra lateral, fica flutuando num canto livre */ #zera-theme-toggle.zera-float{ position:fixed; left:14px; bottom:72px; z-index:2147483000; box-shadow:0 6px 18px rgba(0,0,0,.18); } /* AINDA A AFINAR AO VIVO NO DEPLOY (Chatwoot v4 usa utilitários Tailwind que só dá pra mirar com o DOM real na frente): balão de saída com gradiente, read receipts mais fortes, card de handoff, e a POSIÇÃO final do botão de tema. Obs: o recolor JÁ deixa esses elementos em azul Zera — isto é só refino. */