/* =================================================================== ZeraSync - Tema Zera v3 - 2026-07-26 A escala --blue-* passou a ser DERIVADA da cor oficial da marca. Antes o arquivo definia #5865f2 e o comentario afirmava que aquele era "o azul da Zera". Nao era: #5865f2 e o blurple do Discord. A cor oficial, confirmada pelo Rodrigo e usada no site, e o azul-aco #5B7A99. O passo 9 (cor solida de botao e selo) e #5B7998, que e a cor da marca escurecida em 0,2 ponto de luminancia. O motivo e acessibilidade: com o #5B7A99 exato, texto branco por cima da 4,48:1 e reprova no WCAG AA por pouco; com #5B7998 da 4,53:1 e passa. A diferenca e invisivel a olho. Matiz (210) e saturacao (25%) da marca sao preservados nos 12 passos. Semantica Radix: 1-2 fundo, 3-5 componente, 6-8 borda, 9-10 solido, 11-12 texto. =================================================================== */ /* ---- CLARO ---- */ html.zera{ --blue-1: 250 251 252; --blue-2: 243 246 249; --blue-3: 228 236 244; --blue-4: 211 224 238; --blue-5: 191 212 232; --blue-6: 167 196 226; --blue-7: 135 176 217; --blue-8: 93 150 208; --blue-9: 91 121 152; /* #5B7998 — azul-aço Zera, ajustado p/ contraste AA */ --blue-10: 74 108 143; /* hover */ --blue-11: 56 102 148; /* texto azul */ --blue-12: 30 52 74; --solid-blue: 229 236 243; --solid-blue-2: 250 251 252; --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: 18 23 28; --blue-2: 22 29 37; --blue-3: 29 42 56; --blue-4: 33 52 71; --blue-5: 39 62 86; --blue-6: 46 76 107; --blue-7: 55 94 134; --blue-8: 65 117 170; --blue-9: 85 122 158; /* #557A9E — o mesmo azul, clareado para o modo escuro */ --blue-10: 102 139 176; --blue-11: 137 173 210; --blue-12: 219 230 240; --solid-blue: 29 42 56; --solid-blue-2: 19 24 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. */