/* ---------------------------------------------------------------------------
   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: #e8f3ec !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 {
  /* CLARO (07/09/2026): fundo liso, sem textura. O papel de parede ficava
     bem no escuro e "sujo" no claro; a textura segue só no .dark abaixo. */
  background-color: #faf9f7;
  background-image: none;
}

.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);
}

/* ---------------------------------------------------------------------------
   CELULAR (03/09/2026). Os botões que a camada injeta no cabeçalho da
   conversa (resolver, ficha, telefone, provas, contrato) somam ~220px — numa
   tela de 390px sobrava um dedo para o nome e o subtítulo, que quebravam
   palavra por palavra. Abaixo de 768px ficam só Resolver e Ficha; telefone,
   provas e contrato continuam pelo painel do contato. Botões menores.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #adv-telefone, #adv-provas, #adv-contrato { display: none !important; }
  #adv-resolver, #adv-ficha { width: 32px !important; height: 32px !important; padding: 0 !important; }
}

/* ---------------------------------------------------------------------------
   PAINEL DE ATENDIMENTO (07/09/2026) — paleta quente no tema claro.

   Veio de um painel de atendimento em HTML puro que o Murilo aprovou: fundo
   off-white, papel branco, linhas e cinzas quentes, balão do cliente branco e
   balão nosso em verde-pálido. O cinza-azulado do shadcn é frio e "de
   sistema"; este é de papel. O azul da marca continua sendo a ação (botão,
   item ativo); só o que é neutro muda de temperatura.

   Só o tema claro. O escuro já tem as cores do WhatsApp Web e a equipe está
   acostumada — não mexe.
--------------------------------------------------------------------------- */

:root {
  --background: #faf9f7;
  --foreground: #1c1b19;
  --card: #ffffff;
  --card-foreground: #1c1b19;
  --popover: #ffffff;
  --popover-foreground: #1c1b19;
  --secondary: #f3f1ee;
  --secondary-foreground: #1c1b19;
  --muted: #f3f1ee;
  --muted-foreground: #6f6a63;
  --accent: #f3f1ee;
  --accent-foreground: #1c1b19;
  --border: #e6e3df;
  --input: #e6e3df;
  --sidebar: #ffffff;
  --sidebar-foreground: #1c1b19;
  --sidebar-accent: #f3f1ee;
  --sidebar-accent-foreground: #1c1b19;
  --sidebar-border: #e6e3df;
}

/* Balões: raio 10px, sombra de papel, sem borda. Vale para os dois lados
   e para os dois temas — a cor de cada lado é definida acima (saída) e
   abaixo (entrada). `:not(button)` pelo mesmo motivo da regra de saída. */
[data-message-id] .bg-primary:not(button):not(a):not([role="button"]),
[data-message-id] .bg-muted:not(button):not(a):not([role="button"]),
[data-message-id] .bg-purple-600:not(button):not(a):not([role="button"]) {
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
  border-color: transparent !important;
}

/* Balão de ENTRADA (cliente) no claro: papel branco, como no WhatsApp e no
   painel. O upstream usa `bg-muted border`, cinza com borda. */
html:not(.dark) [data-message-id] .bg-muted:not(button):not(a):not([role="button"]) {
  background-color: #ffffff !important;
  color: #1c1b19 !important;
}

/* Balão do AGENTE (Aline, sender agent_bot): o upstream pinta de roxo, para
   diferenciar bot de humano. Aqui a diferença é a assinatura dentro do balão
   ("Agente · Aline" vs "Equipe · Camila"); a cor é a mesma da saída humana,
   senão a conversa vira um tabuleiro roxo e verde. */
html:not(.dark) [data-message-id] .bg-purple-600:not(button):not(a):not([role="button"]) {
  background-color: #e8f3ec !important;
  color: #1c1b19 !important;
}
html:not(.dark) [data-message-id] .bg-purple-600:not(button):not(a) * { color: #1c1b19 !important; }

.dark [data-message-id] .bg-purple-600:not(button):not(a):not([role="button"]),
.dark [data-message-id] .bg-purple-700:not(button):not(a):not([role="button"]) {
  background-color: #005c4b !important;
  color: #e9edef !important;
}

/* Lista de conversas: o item ativo ganha o verde-claro do painel no claro,
   em vez do azul a 10% (que ficava lilás sobre o off-white). */
html:not(.dark) .bg-primary\/10.border-l-primary {
  background-color: #e7f4f1 !important;
}