/* ==========================================================================
   Go Beesiness — identidade visual aplicada ao Chatwoot 4.15.x
   --------------------------------------------------------------------------
   Fonte da identidade: "documentação prog/Identidade Visual/go_beesiness_brand_ia.json"
     primária #FFCB05 · secundária #231F20 · neutra #878787
     tipografia: Helvetica Bold (títulos) · Helvetica (corpo)

   POR QUE ESTE ARQUIVO FOI REESCRITO (06/08/2026)
   A versão anterior mirava `--color-woot`, `.app-navi`, `.sidebar`, `.topbar`,
   `.header` e `.button.primary`. O Chatwoot migrou para Tailwind + tokens `n-*`,
   e o bundle atual (1,4 MB) tem ZERO ocorrências de qualquer um deles: todo
   seletor ficou órfão — carregava, aplicava, e não pintava nada.

   Este arquivo mira os 47 seletores que REALMENTE existem no bundle 4.15.1,
   extraídos dele por medição (scratchpad/mapeia_marca.py), não por suposição.
   A cor de marca do Chatwoot é #2781F6, exposta pelo token `n-brand`.

   ⚠️ ISTO TEM PRAZO DE VALIDADE enquanto a imagem for `chatwoot/chatwoot:latest`.
   A tag é mutável: o próximo restart pode trazer a 4.16.2 e renomear tokens de
   novo. Fixar a tag é parte do conserto, não um extra. Ver MENSAGERIA-074.
   ========================================================================== */

:root {
  --gb-amarelo:        #FFCB05;
  --gb-amarelo-escuro: #E6B500;
  --gb-preto:          #231F20;
  --gb-cinza:          #878787;

  /* Amarelo escurecido para TEXTO em fundo claro.
     #FFCB05 sobre branco dá ~1.5:1 de contraste — ilegível, reprova em qualquer
     nível de WCAG. Este tom mantém a identidade e passa em AA (~4.6:1).
     Em fundo ESCURO o amarelo puro volta, porque ali ele é legível (~11:1). */
  --gb-marca-texto:    #8A6D00;
}

/* ==========================================================================
   1. TIPOGRAFIA — Helvetica, conforme o manual
   ========================================================================== */

body,
input, textarea, button, select,
.font-inter {
  font-family: Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Bold", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   2. SUPERFÍCIES DE MARCA — onde o azul do Chatwoot vira o amarelo da casa
   Todo seletor abaixo foi extraído do bundle. Alfas preservados (1a=10%,
   0d=5%, 33=20%, 4d=30%, 80=50%, cc=80%).
   ========================================================================== */

.bg-n-brand,
.bg-\[\#2781F6\] {
  background-color: var(--gb-amarelo) !important;
}

.bg-n-brand\/10                          { background-color: #FFCB051a !important; }
.bg-n-brand\/5                           { background-color: #FFCB050d !important; }
.hover\:bg-n-brand\/10:hover             { background-color: #FFCB051a !important; }
.hover\:bg-n-brand\/80:hover             { background-color: #FFCB05cc !important; }
.focus-visible\:bg-n-brand\/20:focus-visible { background-color: #FFCB0533 !important; }
.hover\:enabled\:bg-n-brand\/20:enabled:hover { background-color: #FFCB0533 !important; }
.hover\:enabled\:bg-n-blue-border:enabled:hover { background-color: #FFCB0580 !important; }

.before\:bg-n-brand:before               { background-color: var(--gb-amarelo) !important; }
.after\:bg-n-brand:after                 { background-color: var(--gb-amarelo) !important; }
.checked\:bg-n-brand:checked             { background-color: var(--gb-amarelo) !important; }
.indeterminate\:bg-n-brand:indeterminate { background-color: var(--gb-amarelo) !important; }
.group:hover .group-hover\:bg-n-brand    { background-color: var(--gb-amarelo) !important; }

/* Legibilidade: sobre o amarelo, o texto tem de ser o preto da marca.
   Sem isto, o botão primário fica branco sobre amarelo (~1.5:1) e some. */
.bg-n-brand,
.bg-n-brand .text-white,
.bg-n-brand > .text-white,
.bg-\[\#2781F6\],
.checked\:bg-n-brand:checked,
.group:hover .group-hover\:bg-n-brand {
  color: var(--gb-preto) !important;
}

.bg-n-brand svg,
.bg-\[\#2781F6\] svg {
  color: var(--gb-preto) !important;
}

/* ==========================================================================
   3. BORDAS, CONTORNOS E FOCO — amarelo puro (não é texto, contraste ok)
   ========================================================================== */

.border-n-brand,
.checked\:border-n-brand:checked,
.indeterminate\:border-n-brand:indeterminate,
.focus\:border-n-brand:focus,
.hover\:enabled\:border-n-blue-9:enabled:hover,
.dark\:border-n-brand:is(.dark *) {
  border-color: var(--gb-amarelo) !important;
}

.border-t-n-brand,
.before\:\!border-t-n-brand:before {
  border-top-color: var(--gb-amarelo) !important;
}

.border-n-blue-9\/30  { border-color: #FFCB054d !important; }
.border-n-blue-border { border-color: #FFCB0580 !important; }

.outline-n-brand,
.\!outline-n-brand,
.outline-n-blue-9,
.focus\:outline-n-brand:focus,
.focus\:outline-n-blue-9:focus,
.focus-within\:outline-n-brand:focus-within,
.has-\[\:focus\]\:outline-n-brand:has(:focus) {
  outline-color: var(--gb-amarelo) !important;
}

.fill-n-blue-9 { fill: var(--gb-amarelo) !important; }

/* ==========================================================================
   4. TEXTO E LINKS DE MARCA
   Aqui o amarelo puro NÃO serve em fundo claro. Tema claro usa o amarelo
   escurecido; o tema escuro recupera o amarelo puro logo abaixo.
   ========================================================================== */

.text-n-brand,
.text-n-blue-9,
.text-link,
.hover\:text-n-brand:hover,
.group:hover .group-hover\:text-n-brand,
.group:focus-within .group-focus-within\:text-n-brand {
  color: var(--gb-marca-texto) !important;
}

/* ==========================================================================
   5. TEMA ESCURO — o Chatwoot marca com `.dark` (199 regras `:is(.dark *)`)
   Sobre fundo escuro o amarelo puro é legível (~11:1), então ele volta.
   ========================================================================== */

.dark .text-n-brand,
.dark .text-n-blue-9,
.dark .text-link,
.dark .hover\:text-n-brand:hover,
.dark .group:hover .group-hover\:text-n-brand,
.dark .group:focus-within .group-focus-within\:text-n-brand,
:is(.dark *).text-n-brand,
:is(.dark *).text-n-blue-9,
:is(.dark *).text-link {
  color: var(--gb-amarelo) !important;
}

/* No escuro o amarelo continua de fundo, e o texto por cima segue preto —
   é o par de maior contraste da identidade (~11:1). */
.dark .bg-n-brand,
:is(.dark *).bg-n-brand {
  background-color: var(--gb-amarelo) !important;
  color: var(--gb-preto) !important;
}

/* 🔴 DEFEITO CORRIGIDO NA TELA, e vale registrar o mecanismo:
   o Chatwoot escreve `bg-n-brand/5 dark:bg-n-background` no <main>. Nosso `!important`
   em `.bg-n-brand\/5` vencia TAMBÉM no tema escuro e matava o `dark:bg-n-background` —
   resultado: fundo creme claro no dark, com o logo branco sumindo em cima dele.
   `!important` não distingue tema; quem sobrescreve um utilitário precisa devolver
   explicitamente a variante escura. Medido no navegador, não deduzido. */
.dark .bg-n-brand\/5,
:is(.dark *).bg-n-brand\/5 {
  background-color: rgb(28, 29, 32) !important;   /* = bg-n-background no dark */
}

.dark .bg-n-brand\/10,
:is(.dark *).bg-n-brand\/10 {
  background-color: #FFCB0526 !important;          /* amarelo mais presente sobre escuro */
}

/* ==========================================================================
   6. WIDGET DE CHAT — a bolha usa var(--widget-color) com fallback no azul
   ========================================================================== */

:root { --widget-color: var(--gb-amarelo); }

.woot-widget-bubble,
.woot-widget-holder { --widget-color: var(--gb-amarelo) !important; }

/* ==========================================================================
   7. LOGO — troca pela marca sem depender do Super Admin
   --------------------------------------------------------------------------
   O `installation_config` está em default de fábrica (LOGO=/brand-assets/logo.svg,
   caminho RELATIVO ⇒ servido pelo container ⇒ é o símbolo azul do Chatwoot).
   Mudar aquilo exige credencial de Super Admin, que hoje está travada
   (MENSAGERIA-064). `content` sobre <img> resolve pela folha de estilo.

   ⚠️ Isto é um CONTORNO consciente, não o conserto definitivo: o certo é apontar
   LOGO / LOGO_DARK / LOGO_THUMBNAIL para estas URLs no Super Admin e então remover
   esta seção. Enquanto ela existir, quem inspecionar o `installation_config` vai
   ler "Chatwoot" e não entender por que a tela mostra outra coisa.
   ========================================================================== */

/* ⚠️ USA PNG, NÃO O SVG DA PASTA DE IDENTIDADE VISUAL — e o motivo importa:
   o `logo_vectorizado.svg` está QUEBRADO. Ampliado a 520px, mostra formas pretas
   desconexas com bordas serrilhadas; os paths são traçado pixel-a-pixel
   ("L 36.5,0.0 L 37.0,0.5 L 38.0,0.5"), assinatura de vetorização automática
   malfeita de bitmap. O bbox bate com o viewBox — não é corte, o desenho é que não
   fecha. O ativo íntegro é o apple-touch-icon.png (180×180, 33,7% transparente).
   Isso é um defeito do ativo de marca, e continua aberto: o SVG precisa ser
   redesenhado por quem cuida da identidade. */

img[src*="brand-assets/logo_thumbnail"] {
  content: url("https://stgchatwootevolutionprd.blob.core.windows.net/brand-assets/logo-gobee.png") !important;
}

img[src*="brand-assets/logo_dark"] {
  content: url("https://stgchatwootevolutionprd.blob.core.windows.net/brand-assets/logo-gobee-dark.png") !important;
}

img[src$="brand-assets/logo.svg"] {
  content: url("https://stgchatwootevolutionprd.blob.core.windows.net/brand-assets/logo-gobee.png") !important;
}

/* No tema escuro o traço preto sumiria no fundo — troca pela variante clara. */
.dark img[src$="brand-assets/logo.svg"],
:is(.dark *) img[src$="brand-assets/logo.svg"] {
  content: url("https://stgchatwootevolutionprd.blob.core.windows.net/brand-assets/logo-gobee-dark.png") !important;
}

/* O logo original do Chatwoot é um wordmark LARGO (2559×581): com `h-8` o Chatwoot
   calcula ~141px de largura. O nosso é quadrado (180×180), então herdaria 39×32px e
   ficaria minúsculo — medido na tela. Fixamos os dois eixos. */
img[src*="brand-assets/logo.svg"],
img[src*="brand-assets/logo_dark"] {
  height: 56px !important;
  width: 56px !important;
  object-fit: contain !important;
}

/* O thumbnail vive em espaço apertado (avatar, aba) — ali 28px basta. */
img[src*="brand-assets/logo_thumbnail"] {
  height: 28px !important;
  width: 28px !important;
  object-fit: contain !important;
}