/* * letmechat.css * Branding override para o Chatwoot via sub_filter do Nginx * * Cor primária: #3a9e57 rgb(58 158 87) * Fundo geral: #f9fafb rgb(249 250 251) * * Última atualização: 2026-06-06 * * Changelog: * 2026-06-06 — v5: oculta "Help Center" no modo COLAPSADO (button com ícone * i-lucide-library-big / title) e esconde "Preferred Language" em * Perfil → Interface (idioma segue sempre o default da conta). [seção 12] * 2026-06-05 — v4: ativa ocultação de Central de Ajuda [name="Portals"] e * Respostas Prontas [href*="/settings/canned-response"]. Configurações * mantida visível (recebe a tela custom "Agentes e Times"). * 2026-05-21 — v3: ocultação de itens da sidebar para tenants * - Campanhas, Central de Ajuda e Configurações ocultos * - Seletores por atributo name — estáveis entre updates * 2026-05-13 — v2: CSS de entrega * - Popover do usuário: fundo opaco branco (light) / dark nativo * - Dark mode: sidebar neutra #1a1d21 com acentos verdes * - Seletores restritos com :not(.n-dropdown-body *) em toda sidebar * - Cobertura: badges, tooltips, modais, toasts, steppers, * status indicators, conversation cards, message bubbles, * empty states, filtros, tabs, toggles, avatares * - Seção de monitoramento pós-update documentada no fim * 2026-05-11 — v1: sidebar verde, variáveis :root, classes .n-brand */ /* ============================================================= 1. VARIÁVEIS — MODO CLARO Sobrescreve a escala blue-* pelo verde primário ============================================================= */ :root { --background-color: 249 250 251; --blue-1: 240 249 244; --blue-2: 224 242 231; --blue-3: 196 229 207; --blue-4: 163 213 179; --blue-5: 130 196 150; --blue-6: 100 178 123; --blue-7: 74 158 98; --blue-8: 58 140 78; --blue-9: 58 158 87; --blue-10: 46 138 70; --blue-11: 36 120 58; --blue-12: 14 60 26; --border-blue: 58, 158, 87, .5; --solid-blue: 196 229 207; --solid-blue-2: 240 249 244; --text-blue: 36 120 58; --border-blue-strong: 14 60 26; } /* ============================================================= 2. VARIÁVEIS — MODO ESCURO ============================================================= */ .dark { --blue-1: 10 28 16; --blue-2: 14 38 22; --blue-3: 18 55 30; --blue-4: 22 72 38; --blue-5: 26 90 46; --blue-6: 32 108 56; --blue-7: 40 125 66; --blue-8: 48 140 76; --blue-9: 58 158 87; --blue-10: 46 138 70; --blue-11: 120 200 144; --blue-12: 196 235 210; --border-blue: 58, 158, 87, .5; --solid-blue: 18 55 30; --solid-blue-2: 14 38 22; --text-blue: 120 200 144; --border-blue-strong: 196 235 210; } /* ============================================================= 3. CLASSES HARDCODED .n-brand O Chatwoot fixa #2781F6 — override explícito ============================================================= */ /* --- Backgrounds --- */ .bg-n-brand, .banner.primary, .notification--unread-indicator, .ProseMirror-prompt .ProseMirror-prompt-buttons button[type="submit"], .before\:bg-n-brand::before, .after\:bg-n-brand::after, .checked\:bg-n-brand:checked, .indeterminate\:bg-n-brand:indeterminate, .hover\:bg-n-brand:hover, .group:hover .group-hover\:bg-n-brand, .dark\:bg-n-brand:is(.dark *), .dark\:checked\:bg-n-brand:checked:is(.dark *), .dark\:hover\:text-n-brand:hover:is(.dark *) { background-color: rgb(58 158 87 / var(--tw-bg-opacity, 1)) !important; } /* --- Textos --- */ .text-n-brand, .hover\:text-n-brand:hover, .group:hover .group-hover\:text-n-brand, .group:focus-within .group-focus-within\:text-n-brand, p a, p a:is(.dark *) { color: rgb(58 158 87 / var(--tw-text-opacity, 1)) !important; } /* --- Bordas --- */ .border-n-brand, .focus\:border-n-brand:focus, .checked\:border-n-brand:checked, .indeterminate\:border-n-brand:indeterminate, .hover\:border-n-brand:hover, .dark\:border-n-brand:is(.dark *), .dark\:checked\:border-n-brand:checked:is(.dark *), .before\:\!border-t-n-brand::before, .border-t-n-brand { border-color: rgb(58 158 87 / var(--tw-border-opacity, 1)) !important; } /* --- Rings (focus outlines) --- */ .ring-n-brand, .focus\:ring-n-brand:focus, .focus-within\:ring-n-brand:focus-within, .dark\:ring-n-brand:is(.dark *), .dark\:focus\:ring-woot-500:focus:is(.dark *) { --tw-ring-color: rgb(58 158 87 / var(--tw-ring-opacity, 1)) !important; } /* --- Outline --- */ .outline-n-blue-9, .focus\:outline-n-blue-9:focus { outline-color: rgb(58 158 87 / 1) !important; } /* --- Search input focus --- */ .search-input:focus { border-color: rgb(58, 158, 87) !important; } /* --- Accent color (checkboxes, range inputs) --- */ .accent-n-blue-9 { accent-color: rgb(58 158 87 / 1) !important; } /* ============================================================= 4. COMPONENTES GLOBAIS — MODO CLARO + ESCURO Elementos que aparecem fora da sidebar e precisam de override pontual para manter consistência verde ============================================================= */ /* Menu hover (sidebar navigation) — NÃO aplicar aos dropdowns da área de conversa (etiquetas/agentes/times). Eles são