/* ---------------------------------------------------------------------------
   Marca AdvBrasil — azul institucional da marca (#006BE6) no lugar do verde da
   Evolution, com o dourado (#CFA730) como único destaque.
   Carregado DEPOIS do CSS do app: mesma especificidade (:root / .dark), ganha
   por ordem de origem. Só redefine variáveis; nenhuma regra de componente.
--------------------------------------------------------------------------- */

:root {
  /* ação: botões, links, item ativo */
  --primary: oklch(55% 0.19 255);
  --primary-foreground: oklch(99% 0 0);
  --ring: oklch(55% 0.19 255);

  /* destaque: dourado do logo, com texto escuro por contraste */
  --sidebar-primary: oklch(74% 0.12 85);
  --sidebar-primary-foreground: oklch(22% 0.02 85);
}

.dark {
  /* No escuro a ação é o verde-petróleo do WhatsApp Web (#00A884) — a tela de
     conversa vira parente visual do WhatsApp, que é onde a equipe passa o dia.
     Não confundir com o verde neon da Evolution, que era claro e estridente:
     este é escuro e dessaturado.
     Texto branco por cima, como no WhatsApp. */
  --primary: #00a884;              /* hex exato do WhatsApp Web, sem aproximar */
  --primary-foreground: #ffffff;
  --ring: #00a884;

  --sidebar-primary: #00a884;
  --sidebar-primary-foreground: #ffffff;
}

/* ---------------------------------------------------------------------------
   Barra de rolagem — defeito do upstream: o polegar é fixo em #ffffff26
   (branco a 15%), sem variante de tema. No modo claro fica branco sobre branco
   e some. Aqui damos cor por tema; o seletor com :root/.dark tem especificidade
   maior que a regra crua do app, e este arquivo carrega depois.
--------------------------------------------------------------------------- */

:root ::-webkit-scrollbar-thumb        { background-color: rgba(0, 0, 0, .28); }
:root ::-webkit-scrollbar-thumb:hover  { background-color: rgba(0, 0, 0, .42); }
:root ::-webkit-scrollbar-thumb:active { background-color: rgba(0, 0, 0, .55); }
:root * { scrollbar-color: rgba(0, 0, 0, .28) transparent; }

.dark ::-webkit-scrollbar-thumb        { background-color: rgba(255, 255, 255, .22); }
.dark ::-webkit-scrollbar-thumb:hover  { background-color: rgba(255, 255, 255, .34); }
.dark ::-webkit-scrollbar-thumb:active { background-color: rgba(255, 255, 255, .46); }
.dark * { scrollbar-color: rgba(255, 255, 255, .22) transparent; }

/* ---------------------------------------------------------------------------
   Avisos amarelos ilegíveis no tema claro — defeito do upstream.
   Os banners usam tons claros de âmbar/amarelo no TEXTO (text-amber-400 e
   parentes), que só têm contraste sobre fundo escuro. No tema claro o fundo
   também é claro (bg-amber-500/10), e o texto some.
   Aqui escurecemos apenas o TEXTO e apenas fora do tema escuro. O `!important`
   é necessário: são classes utilitárias do Tailwind, que já vêm com peso alto.
--------------------------------------------------------------------------- */

html:not(.dark) .text-amber-300,
html:not(.dark) .text-amber-400,
html:not(.dark) .text-amber-500 { color: #92400e !important; }  /* amber-800 */

html:not(.dark) .text-yellow-300,
html:not(.dark) .text-yellow-400,
html:not(.dark) .text-yellow-500 { color: #854d0e !important; } /* yellow-800 */

/* ---------------------------------------------------------------------------
   Citação (responder mensagem) dentro da PRÓPRIA bolha — defeito do upstream.
   A bolha de saída é `bg-primary`; o bloco citado dentro dela é `bg-primary/20`
   (a MESMA cor, translúcida). Cor sobre a mesma cor não separa nada, e a citação
   se funde com a resposta — parece uma mensagem só.
   Solução do WhatsApp: escurecer o bloco citado. É o que fazemos aqui, mexendo
   só na citação que está dentro de bolha primary.
--------------------------------------------------------------------------- */

.bg-primary [class*="bg-primary/"] {
  background-color: rgba(0, 0, 0, .26) !important;
}

.bg-primary [class*="border-primary/"] {
  border-left-color: rgba(255, 255, 255, .65) !important;
}

/* ---------------------------------------------------------------------------
   Conversa com cara de WhatsApp — duas correções que andam juntas.

   1) BALÃO DE SAÍDA. O app pinta o balão com a MESMA variável dos botões
      (--primary). No WhatsApp são cores diferentes de propósito: o verde vivo
      #00A884 é de AÇÃO (botão, badge), e o balão é #005C4B, bem mais escuro.
      Usar o vivo no balão deixa a conversa "chapada", com blocos berrantes.
   2) FUNDO. O painel é liso; o WhatsApp usa papel de parede com textura, que
      dá profundidade e separa os balões do fundo. O padrão abaixo é nosso
      (desenho próprio, não a arte deles), discreto o bastante para não brigar
      com o texto.
--------------------------------------------------------------------------- */

/* :not(button) — dentro da mensagem também há botões (baixar anexo, ações);
   esses continuam com o verde de ação, senão somem no balão. */
.dark [data-message-id] .bg-primary:not(button):not(a):not([role="button"]) {
  background-color: #005c4b !important;
  color: #e9edef !important;
}

html:not(.dark) [data-message-id] .bg-primary:not(button):not(a):not([role="button"]) {
  background-color: #d9fdd3 !important;
  color: #111b21 !important;
}

/* o horário e os "vistos" dentro do balão claro precisam acompanhar */
html:not(.dark) [data-message-id] .bg-primary:not(button):not(a) * { color: #111b21 !important; }

.adv-painel-conversa {
  background-color: #efeae2;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'>\
<g fill='none' stroke='%23000000' stroke-opacity='0.05' stroke-width='1.6' stroke-linecap='round'>\
<circle cx='40' cy='40' r='9'/><path d='M96 28h26M109 15v26'/>\
<path d='M170 46c6-10 18-10 24 0'/><circle cx='210' cy='96' r='6'/>\
<path d='M28 108h22M39 97v22'/><path d='M120 120l14 14-14 14-14-14z'/>\
<circle cx='72' cy='176' r='10'/><path d='M150 168h28'/><path d='M164 158v20'/>\
<path d='M196 196c8-8 20-8 28 0'/><circle cx='36' cy='214' r='7'/>\
</g></svg>");
  background-repeat: repeat;
}

.dark .adv-painel-conversa {
  background-color: #0b141a;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'>\
<g fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.6' stroke-linecap='round'>\
<circle cx='40' cy='40' r='9'/><path d='M96 28h26M109 15v26'/>\
<path d='M170 46c6-10 18-10 24 0'/><circle cx='210' cy='96' r='6'/>\
<path d='M28 108h22M39 97v22'/><path d='M120 120l14 14-14 14-14-14z'/>\
<circle cx='72' cy='176' r='10'/><path d='M150 168h28'/><path d='M164 158v20'/>\
<path d='M196 196c8-8 20-8 28 0'/><circle cx='36' cy='214' r='7'/>\
</g></svg>");
  background-repeat: repeat;
}

/* ---------------------------------------------------------------------------
   Texto legivel sobre a cor da marca.

   MEDIDO: o submenu de Configuracoes abre com fundo `bg-primary` (azul da
   marca) e os itens herdam a cor de texto normal — azul-escuro sobre azul,
   praticamente ilegivel.

   Usamos `[class~="bg-primary"]`, que casa a classe EXATA: assim `bg-primary/10`
   (fundo 10% usado no cartao selecionado da lista) NAO entra na regra — senao
   texto branco cairia sobre fundo quase branco.
--------------------------------------------------------------------------- */
[class~="bg-primary"],
[class~="bg-primary"] a,
[class~="bg-primary"] span,
[class~="bg-primary"] p,
[class~="bg-primary"] h1, [class~="bg-primary"] h2,
[class~="bg-primary"] h3, [class~="bg-primary"] h4 {
  color: var(--primary-foreground);
}