/* 
  Super CHAT (Info Sete) — overrides consolidados
  Observação: o nome do arquivo não importa; pode ser carregado como `infosete.css`.

  Objetivos:
  1) Login: logo correta (dark/light) + botão submit vermelho.
  2) App (#app): vermelho somente em elementos explicitamente "brand/primary".
  3) Painel: logo-square sempre 20x20.
  4) Super Admin (.superchat-superadmin): botões/acentos em vermelho (sem mexer no layout).
*/

/* =========================================================
   1) LOGIN — logo + botão submit vermelho (escopo estrito)
   ========================================================= */

/* Logo maior SOMENTE no login (escopo estrito) */
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo"],
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-dark"],
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo_dark"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo-dark"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo_dark"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 200px !important;     /* ajuste aqui se quiser maior/menor */
  width: auto !important;
  max-width: 520px !important;
  max-height: 140px !important;
  margin: 0 auto 12px auto !important;
  object-fit: contain !important;
}

/* Dashboard LOGIN (v4.9+): às vezes o login renderiza DENTRO do #app, e o logo-square acaba herdando o 20x20 do painel.
   Este bloco garante logo GRANDE e centralizada SOMENTE na tela de login. */
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-square"],
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-square.png"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 200px !important;
  width: auto !important;
  max-width: 520px !important;
  max-height: 140px !important;
  margin: 0 auto 12px auto !important;
  object-fit: contain !important;
}

/* Se algum layout do login usar logo-square como <img> no header, garante que não fique 20x20 */
#app main.py-20 img[src*="/brand-assets/logo-square"],
#app main.py-20 img[src*="/brand-assets/logo-square.png"]{
  width: auto !important;
  max-width: 520px !important;
}

/* Dark/light: mostra só a correta no login (cobre URL absoluta e variações logo_dark) */
html.dark #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo.png"],
html.dark #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo.png"]{
  display: none !important;
}
html.dark #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
html.dark #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"],
html.dark #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
html.dark #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"]{
  display: block !important;
}

html:not(.dark) #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
html:not(.dark) #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"],
html:not(.dark) #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
html:not(.dark) #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"]{
  display: none !important;
}
html:not(.dark) #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo.png"],
html:not(.dark) #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo.png"]{
  display: block !important;
}
/* Se por algum motivo ambos (logo + logo_dark) renderizarem no login, garante que só 1 fica visível */
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo.png"],
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo.png"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"]{
  max-height: 140px !important;
}

/* Super Admin LOGIN (usa logo_thumbnail + layout Tailwind, não tem body.text-slate-600) */
body > div.h-full.w-full.antialiased main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo_thumbnail"],
body > div.h-full.w-full.antialiased main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo_thumbnail.png"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 128px !important;
  width: auto !important;
  max-width: 520px !important;
  max-height: 128px !important;
  margin: 0 auto 10px auto !important;
  object-fit: contain !important;
}

/* Botão Entrar no Super Admin login */
body > div.h-full.w-full.antialiased main.flex.flex-col button.bg-woot-500,
body > div.h-full.w-full.antialiased main.flex.flex-col a.bg-woot-500{
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #fff !important;
}

body > div.h-full.w-full.antialiased main.flex.flex-col button.hover\:bg-woot-600:hover,
body > div.h-full.w-full.antialiased main.flex.flex-col a.hover\:bg-woot-600:hover{
  background-color: var(--superchat-red-hover) !important;
  border-color: var(--superchat-red-hover) !important;
}

body > div.h-full.w-full.antialiased main.flex.flex-col .focus-visible\:outline-woot-500:focus-visible{
  outline-color: var(--superchat-red) !important;
}

/* Remove o título "Entrar no Super CHAT" somente na tela de login (dashboard) */
#app main.py-20 > section.max-w-5xl h2.mt-6.text-3xl.font-medium.text-center.text-n-slate-12,
#app main.flex.flex-col > section.max-w-5xl h2.mt-6.text-3xl.font-medium.text-center.text-n-slate-12{
  display: none !important;
}

/* Botões: vermelho SÓ no submit do login */
main.py-20 > section.max-w-5xl form button[type="submit"],
main.py-20 > section.max-w-5xl form [type="submit"]{
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

main.py-20 > section.max-w-5xl form button[type="submit"]:hover,
main.py-20 > section.max-w-5xl form [type="submit"]:hover{
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

main.py-20 > section.max-w-5xl form button[type="submit"]:focus,
main.py-20 > section.max-w-5xl form button[type="submit"]:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.35) !important;
}

/* Login social (Google), se existir — pinta só o botão (não links comuns) */
main.py-20 > section.max-w-5xl a[href*="google_oauth2"],
main.py-20 > section.max-w-5xl a[href*="google_oauth"]{
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.6rem 0.9rem !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
}
main.py-20 > section.max-w-5xl a[href*="google_oauth2"]:hover,
main.py-20 > section.max-w-5xl a[href*="google_oauth"]:hover{
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}


/* =========================================================
   2) APP (#app) — vermelho só em elementos brand/primary
   ========================================================= */

/* NÃO deixar regras de login vazarem pro app */
#app img[src^="/brand-assets/logo"]{
  height: auto !important;
  max-height: initial !important;
}


/* "brand" de fundo */
#app .bg-n-brand,
#app [class~="bg-n-brand"]{
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}


/* Modais (dialog/portal): alguns CTAs ficam fora do #app (ex.: “Atualizar domínio”).
   Aqui a gente pinta o CTA primário de vermelho sem afetar botões secundários (ex.: Cancelar). */

/* 1) CTA com bg-n-brand (ou variações) dentro de dialog/modal */
body dialog button.bg-n-brand,
body dialog button[class*="bg-n-brand"],
body [role="dialog"] button.bg-n-brand,
body [role="dialog"] button[class*="bg-n-brand"],
body .modal button.bg-n-brand,
body .modal button[class*="bg-n-brand"],
body dialog a.bg-n-brand,
body dialog a[class*="bg-n-brand"],
body [role="dialog"] a.bg-n-brand,
body [role="dialog"] a[class*="bg-n-brand"],
body .modal a.bg-n-brand,
body .modal a[class*="bg-n-brand"]{
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

body dialog button.bg-n-brand:hover,
body dialog button[class*="bg-n-brand"]:hover,
body [role="dialog"] button.bg-n-brand:hover,
body [role="dialog"] button[class*="bg-n-brand"]:hover,
body .modal button.bg-n-brand:hover,
body .modal button[class*="bg-n-brand"]:hover,
body dialog a.bg-n-brand:hover,
body dialog a[class*="bg-n-brand"]:hover,
body [role="dialog"] a.bg-n-brand:hover,
body [role="dialog"] a[class*="bg-n-brand"]:hover,
body .modal a.bg-n-brand:hover,
body .modal a[class*="bg-n-brand"]:hover{
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

/* 2) Fallback: em alguns modais o CTA vem como submit com bg-n-slate-* (azul/cinza).
      Pintar SOMENTE submit dentro do dialog/modal (pra não mexer em Cancelar). */
body dialog button[type="submit"],
body [role="dialog"] button[type="submit"],
body .modal button[type="submit"],
body dialog input[type="submit"],
body [role="dialog"] input[type="submit"],
body .modal input[type="submit"]{
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

body dialog button[type="submit"]:hover,
body [role="dialog"] button[type="submit"]:hover,
body .modal button[type="submit"]:hover,
body dialog input[type="submit"]:hover,
body [role="dialog"] input[type="submit"]:hover,
body .modal input[type="submit"]:hover{
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
}

#app .hover\:bg-n-brand-dark:hover,
#app .hover\:bg-n-brand-darker:hover{
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

#app .active\:bg-n-brand-dark:active,
#app .active\:bg-n-brand-darker:active{
  background-color: #991b1b !important;
  border-color: #991b1b !important;
}

/* textos/ícones "brand" */
#app .text-n-brand,
#app [class~="text-n-brand"]{
  color: #dc2626 !important;
}

/* bordas "brand" */
#app .border-n-brand,
#app [class~="border-n-brand"]{
  border-color: #dc2626 !important;
}

/* foco bonito (apenas no app) */
#app button:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.25) !important;
}

/* Botões primários (classes comuns) */
#app .button--primary,
#app .woot-button--primary,
#app .btn-primary,
#app .is-primary,
#app [class*="btn-primary"],
#app [class*="button--primary"],
#app [class*="woot-button--primary"],
#app button[type="submit"].bg-n-brand,
#app button[type="submit"][class*="bg-n-brand"],
#app a[role="button"].bg-n-brand,
#app a[role="button"][class*="bg-n-brand"]{
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

#app .button--primary:hover,
#app .woot-button--primary:hover,
#app .btn-primary:hover,
#app .is-primary:hover,
#app button[type="submit"].bg-n-brand:hover,
#app a[role="button"].bg-n-brand:hover{
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

#app .button--primary:active,
#app .woot-button--primary:active,
#app .btn-primary:active,
#app .is-primary:active,
#app button[type="submit"].bg-n-brand:active,
#app a[role="button"].bg-n-brand:active{
  background-color: #991b1b !important;
  border-color: #991b1b !important;
}

/* Conversa: trocar "Resolver/Finalizar" (success -> vermelho) */
#app button[data-testid*="resolve" i],
#app button[data-testid*="resolved" i],
#app button[data-cy*="resolve" i],
#app button[aria-label*="resolver" i],
#app button[aria-label*="resolve" i],
#app button[title*="resolver" i],
#app button[title*="resolve" i],
#app a[data-testid*="resolve" i],
#app a[data-cy*="resolve" i],
#app a[aria-label*="resolver" i],
#app a[title*="resolver" i]{
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

#app button[data-testid*="resolve" i]:hover,
#app button[data-cy*="resolve" i]:hover,
#app button[aria-label*="resolver" i]:hover,
#app button[title*="resolve" i]:hover,
#app a[data-testid*="resolve" i]:hover,
#app a[data-cy*="resolve" i]:hover,
#app a[aria-label*="resolver" i]:hover,
#app a[title*="resolve" i]:hover{
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}


#app button[data-testid*="resolve" i] *,
#app button[data-cy*="resolve" i] *,
#app button[aria-label*="resolver" i] *,
#app button[title*="resolve" i] *,
#app a[data-testid*="resolve" i] *,
#app a[data-cy*="resolve" i] *{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* =========================================================
   APP: Mensagem privada / Private note — trocar amarelo por verde clarinho
   ========================================================= */

:root{
  --superchat-private-bg: rgba(15, 23, 42, 0.04);      /* cinza bem leve (discreto) */
  --superchat-private-border: rgba(34, 197, 94, 0.35); /* verde suave na borda */
  --superchat-private-strong: #16a34a;                /* verde do botão */
  --superchat-private-strong-hover: #15803d;          /* hover */
}


/* Container do composer em modo private note (cobre variações de markup/classes do Chatwoot) */
#app [data-testid*="private" i],
#app [data-cy*="private" i],
#app [class*="private" i],
#app [aria-label*="mensagem privada" i],
#app [aria-label*="nota privada" i],
#app [aria-label*="private note" i],
#app [title*="mensagem privada" i],
#app [title*="nota privada" i],
#app [title*="private note" i]{
  --superchat-private-mode: 1;
}

/* Quando houver qualquer elemento marcando private note na área de resposta, pinta o bloco do editor */
#app [style][data-testid*="conversation" i] [class*="reply" i],
#app [data-testid*="conversation" i] [class*="reply" i],
#app [data-testid*="conversation" i] [class*="composer" i],
#app [data-testid*="conversation" i] [class*="editor" i]{
  /* não força cor aqui para evitar efeitos colaterais */
}

/* Regras efetivas (Chatwoot atual): o modo de nota privada aplica .is-note-mode no reply box */
#app .is-note-mode,
#app .reply-box.is-private,
#app .reply_box.is-private{
  background-color: var(--superchat-private-bg) !important;
  border-color: var(--superchat-private-border) !important;
}

/* Barra superior do composer (onde aparece a frase "visível apenas para agentes") */
#app .is-note-mode > .flex,
#app .reply-box.is-private > .flex,
#app .reply_box.is-private > .flex,
#app .is-note-mode .reply_box__top,
#app .reply-box.is-private .reply_box__top,
#app .reply_box.is-private .reply_box__top{
  background-color: var(--superchat-private-bg) !important;
  border-color: var(--superchat-private-border) !important;
}

/* Garantir legibilidade: não deixa o modo nota "lavar" textos (light/dark) */
#app .is-note-mode,
#app .reply-box.is-private,
#app .reply_box.is-private{
  color: #0f172a !important; /* slate-900 */
}
html.dark #app .is-note-mode,
html.dark #app .reply-box.is-private,
html.dark #app .reply_box.is-private{
  color: #e2e8f0 !important; /* slate-200 */
}

#app .is-note-mode input,
#app .is-note-mode textarea,
#app .is-note-mode [contenteditable="true"],
#app .reply-box.is-private input,
#app .reply-box.is-private textarea,
#app .reply-box.is-private [contenteditable="true"],
#app .reply_box.is-private input,
#app .reply_box.is-private textarea,
#app .reply_box.is-private [contenteditable="true"]{
  color: inherit !important;
}

#app .is-note-mode input::placeholder,
#app .is-note-mode textarea::placeholder,
#app .reply-box.is-private input::placeholder,
#app .reply-box.is-private textarea::placeholder,
#app .reply_box.is-private input::placeholder,
#app .reply_box.is-private textarea::placeholder{
  color: rgba(15, 23, 42, 0.55) !important;
}
html.dark #app .is-note-mode input::placeholder,
html.dark #app .is-note-mode textarea::placeholder,
html.dark #app .reply-box.is-private input::placeholder,
html.dark #app .reply-box.is-private textarea::placeholder,
html.dark #app .reply_box.is-private input::placeholder,
html.dark #app .reply_box.is-private textarea::placeholder{
  color: rgba(226, 232, 240, 0.65) !important;
}

#app .is-note-mode svg,
#app .reply-box.is-private svg,
#app .reply_box.is-private svg{
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Se ainda existir algum wrapper amarelo/amber dentro do modo nota, neutraliza */
#app .is-note-mode .bg-yellow-50,
#app .is-note-mode .bg-yellow-100,
#app .is-note-mode .bg-amber-50,
#app .is-note-mode .bg-amber-100,
#app .is-note-mode .bg-woot-25,
#app .is-note-mode [class*="bg-yellow"],
#app .is-note-mode [class*="bg-amber"]{
  background-color: var(--superchat-private-bg) !important;
  border-color: var(--superchat-private-border) !important;
}

/* Alternativa: quando o wrapper do editor já vem com fundo direto */
#app .is-note-mode textarea,
#app .is-note-mode [contenteditable="true"],
#app .reply-box.is-private textarea,
#app .reply-box.is-private [contenteditable="true"],
#app .reply_box.is-private textarea,
#app .reply_box.is-private [contenteditable="true"]{
  background-color: var(--superchat-private-bg) !important;
}

/* Borda/ring do editor em private note */
#app .is-note-mode .ring-yellow-200,
#app .is-note-mode .ring-amber-200,
#app .is-note-mode [class*="ring-yellow"],
#app .is-note-mode [class*="ring-amber"],
#app .is-note-mode [class*="border-yellow"],
#app .is-note-mode [class*="border-amber"],
#app .reply-box.is-private .ring-yellow-200,
#app .reply-box.is-private .ring-amber-200,
#app .reply-box.is-private [class*="ring-yellow"],
#app .reply-box.is-private [class*="ring-amber"],
#app .reply-box.is-private [class*="border-yellow"],
#app .reply-box.is-private [class*="border-amber"],
#app .reply_box.is-private .ring-yellow-200,
#app .reply_box.is-private .ring-amber-200,
#app .reply_box.is-private [class*="ring-yellow"],
#app .reply_box.is-private [class*="ring-amber"],
#app .reply_box.is-private [class*="border-yellow"],
#app .reply_box.is-private [class*="border-amber"]{
  --tw-ring-color: var(--superchat-private-border) !important;
  border-color: var(--superchat-private-border) !important;
}

/* Botão de enviar em private note: de amarelo para verde */
#app .is-note-mode button[type="submit"],
#app .is-note-mode button[aria-label*="enviar" i],
#app .is-note-mode button[title*="enviar" i],
#app .reply-box.is-private button[type="submit"],
#app .reply-box.is-private button[aria-label*="enviar" i],
#app .reply-box.is-private button[title*="enviar" i],
#app .reply_box.is-private button[type="submit"],
#app .reply_box.is-private button[aria-label*="enviar" i],
#app .reply_box.is-private button[title*="enviar" i]{
  background-color: var(--superchat-private-strong) !important;
  border-color: var(--superchat-private-strong) !important;
  color: #fff !important;
}

#app .is-note-mode button[type="submit"]:hover,
#app .is-note-mode button[aria-label*="enviar" i]:hover,
#app .is-note-mode button[title*="enviar" i]:hover,
#app .reply-box.is-private button[type="submit"]:hover,
#app .reply-box.is-private button[aria-label*="enviar" i]:hover,
#app .reply-box.is-private button[title*="enviar" i]:hover,
#app .reply_box.is-private button[type="submit"]:hover,
#app .reply_box.is-private button[aria-label*="enviar" i]:hover,
#app .reply_box.is-private button[title*="enviar" i]:hover{
  background-color: var(--superchat-private-strong-hover) !important;
  border-color: var(--superchat-private-strong-hover) !important;
}

/* Pills/tabs do topo (Responder / Mensagem Privada):
   No Chatwoot atual isso é 1 botão “segmented control” com um slider interno.
   A ideia aqui é:
   - Modo responder: slider vermelho
   - Modo nota privada: slider verde
   - Não forçar cor do texto (deixa o tema original garantir legibilidade)
*/

/* Detecta o controle (botão cápsula com bg-n-alpha-2 + slider interno bg-n-solid-1)
   Ajustes:
   - remove a “linhazinha” entre os itens (gap/overflow)
   - garante legibilidade (texto branco)
   - responder = vermelho, mensagem privada = verde
*/

/* ===== Base do segmented control (Responder) ===== */
#app .reply-box__top button.bg-n-alpha-2.rounded-full,
#app .reply_box__top button.bg-n-alpha-2.rounded-full,
#app [class*="reply_box__top" i] button.bg-n-alpha-2.rounded-full,
#app button.bg-n-alpha-2.rounded-full.group.relative{
  background-color: rgba(209, 0, 0, 0.06) !important;
  border: 1px solid rgba(209, 0, 0, 0.25) !important;
  overflow: hidden !important;          /* evita “linha” interna aparecer */
  padding: 2px !important;              /* deixa o slider encostar bonitinho */
}

#app .reply-box__top button.bg-n-alpha-2.rounded-full:hover,
#app .reply_box__top button.bg-n-alpha-2.rounded-full:hover,
#app [class*="reply_box__top" i] button.bg-n-alpha-2.rounded-full:hover,
#app button.bg-n-alpha-2.rounded-full.group.relative:hover{
  background-color: rgba(209, 0, 0, 0.10) !important;
  border-color: rgba(209, 0, 0, 0.35) !important;
}

/* Remove gap interno (a “linhazinha” entre Responder e Mensagem Privada) */
#app .reply-box__top button.bg-n-alpha-2.rounded-full > div.flex,
#app .reply_box__top button.bg-n-alpha-2.rounded-full > div.flex,
#app [class*="reply_box__top" i] button.bg-n-alpha-2.rounded-full > div.flex,
#app button.bg-n-alpha-2.rounded-full.group.relative > div.flex{
  gap: 0 !important;
}

/* Texto sempre legível */
#app .reply-box__top button.bg-n-alpha-2.rounded-full *,
#app .reply_box__top button.bg-n-alpha-2.rounded-full *,
#app [class*="reply_box__top" i] button.bg-n-alpha-2.rounded-full *,
#app button.bg-n-alpha-2.rounded-full.group.relative *{
  color: rgba(255,255,255,0.92) !important;
}

/* Slider interno (Responder = vermelho) */
#app .reply-box__top button.bg-n-alpha-2.rounded-full > div.absolute.bg-n-solid-1,
#app .reply_box__top button.bg-n-alpha-2.rounded-full > div.absolute.bg-n-solid-1,
#app [class*="reply_box__top" i] button.bg-n-alpha-2.rounded-full > div.absolute.bg-n-solid-1,
#app button.bg-n-alpha-2.rounded-full.group.relative > div.absolute.bg-n-solid-1{
  background-color: var(--superchat-red) !important;
  border-radius: 9999px !important;
}

/* ===== Modo Mensagem Privada (nota privada) =====
   No seu build o marcador confiável é `.is-note-mode`.
   Por isso, não depende de reply-box__top existir.
*/
#app .is-note-mode button.bg-n-alpha-2.rounded-full,
#app .reply-box.is-private button.bg-n-alpha-2.rounded-full,
#app .reply_box.is-private button.bg-n-alpha-2.rounded-full{
  background-color: rgba(22, 163, 74, 0.06) !important;
  border-color: rgba(22, 163, 74, 0.25) !important;
}

#app .is-note-mode button.bg-n-alpha-2.rounded-full:hover,
#app .reply-box.is-private button.bg-n-alpha-2.rounded-full:hover,
#app .reply_box.is-private button.bg-n-alpha-2.rounded-full:hover{
  background-color: rgba(22, 163, 74, 0.10) !important;
  border-color: rgba(22, 163, 74, 0.35) !important;
}

/* Slider interno (Mensagem Privada = verde) */
#app .is-note-mode button.bg-n-alpha-2.rounded-full > div.absolute.bg-n-solid-1,
#app .reply-box.is-private button.bg-n-alpha-2.rounded-full > div.absolute.bg-n-solid-1,
#app .reply_box.is-private button.bg-n-alpha-2.rounded-full > div.absolute.bg-n-solid-1{
  background-color: var(--superchat-private-strong) !important;
  border-radius: 9999px !important;
}

/* Texto branco também no modo Mensagem Privada (mantém leitura) */
#app .is-note-mode button.bg-n-alpha-2.rounded-full *,
#app .reply-box.is-private button.bg-n-alpha-2.rounded-full *,
#app .reply_box.is-private button.bg-n-alpha-2.rounded-full *{
  color: #ffffff !important;
}

/* Ícones/textos que ficavam amarelos no modo privado */
#app .is-note-mode .text-yellow-700,
#app .is-note-mode .text-amber-700,
#app .is-note-mode [class*="text-yellow"],
#app .is-note-mode [class*="text-amber"],
#app .reply-box.is-private .text-yellow-700,
#app .reply-box.is-private .text-amber-700,
#app .reply-box.is-private [class*="text-yellow"],
#app .reply-box.is-private [class*="text-amber"],
#app .reply_box.is-private .text-yellow-700,
#app .reply_box.is-private .text-amber-700,
#app .reply_box.is-private [class*="text-yellow"],
#app .reply_box.is-private [class*="text-amber"]{
  color: var(--superchat-private-strong) !important;
}



/* =========================================================
   3) PAINEL — logo-square sempre 20x20 (escopo #app)
   ========================================================= */

/* Logo-square pequeno SOMENTE dentro do painel autenticado (sidebar/topbar).
   Evita quebrar a tela de login quando ela renderiza dentro do #app. */
#app nav img[src*="/brand-assets/logo-square.png"],
#app nav img[src*="/brand-assets/logo-square.png?"],
#app nav img[src*="/brand-assets/logo-square"],
#app aside img[src*="/brand-assets/logo-square.png"],
#app aside img[src*="/brand-assets/logo-square.png?"],
#app aside img[src*="/brand-assets/logo-square"],
#app header img[src*="/brand-assets/logo-square.png"],
#app header img[src*="/brand-assets/logo-square.png?"],
#app header img[src*="/brand-assets/logo-square"]{
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain !important;
}


/* =========================================================
   4) SUPERADMIN — tema vermelho (escopo .superchat-superadmin)
   ========================================================= */

:root{
  --superchat-red: #d10000;
  --superchat-red-hover: #b80000;
}

/* Super Admin: escopo por estrutura do super_admin (Administrate) */

/* CTA/botões que usam a paleta woot (Tailwind classes) */
section.main-content__body button[class*="bg-woot-"],
section.main-content__body a[class*="bg-woot-"],
section.main-content__body input[class*="bg-woot-"]{
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #fff !important;
}

section.main-content__body button[class*="hover\\:bg-woot-"]:hover,
section.main-content__body a[class*="hover\\:bg-woot-"]:hover{
  background-color: var(--superchat-red-hover) !important;
  border-color: var(--superchat-red-hover) !important;
}

/* Submit padrão do super_admin (ex.: form.submit "Salvar" geralmente vira input[type=submit]) */
section.main-content__body .form-actions input[type="submit"],
section.main-content__body .form-actions button[type="submit"],
section.main-content__body form input[type="submit"]{
  background-color: var(--superchat-red) !important;
  border: 1px solid var(--superchat-red) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
}

section.main-content__body .form-actions input[type="submit"]:hover,
section.main-content__body .form-actions button[type="submit"]:hover,
section.main-content__body form input[type="submit"]:hover{
  background-color: var(--superchat-red-hover) !important;
  border-color: var(--superchat-red-hover) !important;
}

section.main-content__body .form-actions input[type="submit"]:focus,
section.main-content__body .form-actions input[type="submit"]:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(209,0,0,.25) !important;
}

/* Ring/focus */
section.main-content__body .focus\:ring-woot-500:focus{
  --tw-ring-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
}

section.main-content__body .focus-visible\:outline-woot-500:focus-visible{
  outline-color: var(--superchat-red) !important;
}

/* Alguns screens do super_admin reutilizam classes do app (bg-n-brand). Forçar vermelho aqui também */
section.main-content__body .bg-n-brand,
section.main-content__body button.bg-n-brand,
section.main-content__body a.bg-n-brand,
section.main-content__body input.bg-n-brand,
section.main-content__body [class~="bg-n-brand"]{
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #fff !important;
}

section.main-content__body .hover\:bg-n-brand-dark:hover,
section.main-content__body .hover\:bg-n-brand-darker:hover,
section.main-content__body [class*="hover\\:bg-n-brand"]:hover{
  background-color: var(--superchat-red-hover) !important;
  border-color: var(--superchat-red-hover) !important;
}

section.main-content__body .text-n-brand,
section.main-content__body [class~="text-n-brand"]{
  color: var(--superchat-red) !important;
}

section.main-content__body .border-n-brand,
section.main-content__body [class~="border-n-brand"]{
  border-color: var(--superchat-red) !important;
}

section.main-content__body .focus-visible\:outline-n-brand:focus-visible,
section.main-content__body [class*="focus-visible\\:outline-n-brand"]:focus-visible{
  outline-color: var(--superchat-red) !important;
}

/* Links/acentos (sem mexer no fundo do layout) */
section.main-content__body .text-woot-500{ color: var(--superchat-red) !important; }
section.main-content__body .border-woot-500{ border-color: var(--superchat-red) !important; }

/* Administrate (super_admin) ações padrão: links com classe .button (ex.: "New users") */
section.main-content__body a.button,
section.main-content__body button.button,
section.main-content__body input.button{
  background-color: var(--superchat-red) !important;
  border: 1px solid var(--superchat-red) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

section.main-content__body a.button:hover,
section.main-content__body button.button:hover,
section.main-content__body input.button:hover{
  background-color: var(--superchat-red-hover) !important;
  border-color: var(--superchat-red-hover) !important;
}

/* Clear search (ícone) — manter neutro, só melhorar hover sem virar CTA */
section.main-content__body a.search__clear-link{
  background: transparent !important;
  border: 1px solid transparent !important;
  color: inherit !important;
  border-radius: 8px !important;
}

section.main-content__body a.search__clear-link:hover{
  background: rgba(209, 0, 0, 0.08) !important;
  border-color: rgba(209, 0, 0, 0.25) !important;
}

section.main-content__body a.search__clear-link .search__clear-icon,
section.main-content__body a.search__clear-link svg{
  color: var(--superchat-red) !important;
  fill: var(--superchat-red) !important;
  stroke: var(--superchat-red) !important;
}
/* =========================================================
   5) TESTE — Bloco extra de branding (CSS-only)
   Objetivo: validar rapidamente o que o CSS consegue “pegar”
   sem depender de JS/overrides.
   ========================================================= */

/* (A) Login (dashboard): garante que NÃO duplica logo e força um tamanho único */
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo.png"],
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo.png"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"]{
  height: 200px !important;
  width: auto !important;
  max-width: min(560px, 92vw) !important;
  max-height: 140px !important;
  object-fit: contain !important;
  margin: 0 auto 12px auto !important;
}

/* Em dark mode, some com a clara */
html.dark #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo.png"],
html.dark #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo.png"]{
  display: none !important;
}

/* Em light mode, some com a escura */
html:not(.dark) #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
html:not(.dark) #app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"],
html:not(.dark) #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo_dark.png"],
html:not(.dark) #app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo-dark.png"]{
  display: none !important;
}

/* Se o login usar logo-square como principal, dá o mesmo tamanho */
#app main.py-20 > section.max-w-5xl img[src*="/brand-assets/logo-square"],
#app main.flex.flex-col > section.max-w-5xl img[src*="/brand-assets/logo-square"]{
  display: block !important;
  height: 200px !important;
  width: auto !important;
  max-width: min(560px, 92vw) !important;
  max-height: 140px !important;
  margin: 0 auto 12px auto !important;
  object-fit: contain !important;
}

/* Remove qualquer “quadradinho” extra só no login (quando ele aparece como duplicado) */
#app main.py-20 > section.max-w-5xl img[src*="logo_thumbnail"],
#app main.py-20 > section.max-w-5xl img[src*="logo-square"][width="20"],
#app main.flex.flex-col > section.max-w-5xl img[src*="logo_thumbnail"],
#app main.flex.flex-col > section.max-w-5xl img[src*="logo-square"][width="20"]{
  display: none !important;
}

/* (B) Login: some com o H2 “Entrar no Super CHAT” (reforço) */
#app main.py-20 > section.max-w-5xl h2.mt-6.text-3xl.font-medium.text-center.text-n-slate-12,
#app main.flex.flex-col > section.max-w-5xl h2.mt-6.text-3xl.font-medium.text-center.text-n-slate-12{
  display: none !important;
}

/* (C) Tentativa de “troca de texto” via CSS (limitado):
   - Esconde textos específicos quando são elementos identificáveis.
   - Mostra substituto com ::before.
   Obs.: isso só funciona quando o seletor é estável.
*/

/* Exemplo: se existir algum link/label com “Chatwoot” no rodapé do login */
#app main.py-20 a[href*="chatwoot" i],
#app main.flex.flex-col a[href*="chatwoot" i]{
  position: relative !important;
  color: transparent !important;
}
#app main.py-20 a[href*="chatwoot" i]::before,
#app main.flex.flex-col a[href*="chatwoot" i]::before{
  content: "Super CHAT";
  color: inherit;
  position: absolute;
  left: 0;
  top: 0;
}

/* (D) App: reforço do vermelho só no primário (sem vazar) */
#app button[type="submit"].bg-n-brand,
#app button[type="submit"][class*="bg-n-brand"],
#app a[role="button"].bg-n-brand,
#app a[role="button"][class*="bg-n-brand"]{
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #fff !important;
}

/* Exemplo (CSS-only): troca de rótulos/links por atributo (limitado)
   Funciona quando o elemento tem seletor estável (href/aria-label/title/data-*).
   Aqui cobrimos Copiloto/Copilot, Captain/Capitão e Bot.
*/

/* ===== Copiloto / Copilot -> Super I.A ===== */
#app main.py-20 a[href*="copiloto" i],
#app main.flex.flex-col a[href*="copiloto" i],
#app main.py-20 a[href*="copilot" i],
#app main.flex.flex-col a[href*="copilot" i],
#app main.py-20 [aria-label*="copiloto" i],
#app main.flex.flex-col [aria-label*="copiloto" i],
#app main.py-20 [aria-label*="copilot" i],
#app main.flex.flex-col [aria-label*="copilot" i],
#app main.py-20 [title*="copiloto" i],
#app main.flex.flex-col [title*="copiloto" i],
#app main.py-20 [title*="copilot" i],
#app main.flex.flex-col [title*="copilot" i]{
  position: relative !important;
  color: transparent !important;
}

#app main.py-20 a[href*="copiloto" i]::before,
#app main.flex.flex-col a[href*="copiloto" i]::before,
#app main.py-20 a[href*="copilot" i]::before,
#app main.flex.flex-col a[href*="copilot" i]::before,
#app main.py-20 [aria-label*="copiloto" i]::before,
#app main.flex.flex-col [aria-label*="copiloto" i]::before,
#app main.py-20 [aria-label*="copilot" i]::before,
#app main.flex.flex-col [aria-label*="copilot" i]::before,
#app main.py-20 [title*="copiloto" i]::before,
#app main.flex.flex-col [title*="copiloto" i]::before,
#app main.py-20 [title*="copilot" i]::before,
#app main.flex.flex-col [title*="copilot" i]::before{
  content: "Super I.A";
  color: inherit;
  position: absolute;
  left: 0;
  top: 0;
}

/* ===== Captain / Capitão -> Super I.A ===== */
#app main.py-20 a[href*="captain" i],
#app main.flex.flex-col a[href*="captain" i],
#app main.py-20 a[href*="capitao" i],
#app main.flex.flex-col a[href*="capitao" i],
#app main.py-20 a[href*="capit%C3%A3o" i],
#app main.flex.flex-col a[href*="capit%C3%A3o" i],
#app main.py-20 [aria-label*="captain" i],
#app main.flex.flex-col [aria-label*="captain" i],
#app main.py-20 [aria-label*="capit" i],
#app main.flex.flex-col [aria-label*="capit" i],
#app main.py-20 [title*="captain" i],
#app main.flex.flex-col [title*="captain" i],
#app main.py-20 [title*="capit" i],
#app main.flex.flex-col [title*="capit" i]{
  position: relative !important;
  color: transparent !important;
}

#app main.py-20 a[href*="captain" i]::before,
#app main.flex.flex-col a[href*="captain" i]::before,
#app main.py-20 a[href*="capitao" i]::before,
#app main.flex.flex-col a[href*="capitao" i]::before,
#app main.py-20 a[href*="capit%C3%A3o" i]::before,
#app main.flex.flex-col a[href*="capit%C3%A3o" i]::before,
#app main.py-20 [aria-label*="captain" i]::before,
#app main.flex.flex-col [aria-label*="captain" i]::before,
#app main.py-20 [aria-label*="capit" i]::before,
#app main.flex.flex-col [aria-label*="capit" i]::before,
#app main.py-20 [title*="captain" i]::before,
#app main.flex.flex-col [title*="captain" i]::before,
#app main.py-20 [title*="capit" i]::before,
#app main.flex.flex-col [title*="capit" i]::before{
  content: "Super I.A";
  color: inherit;
  position: absolute;
  left: 0;
  top: 0;
}

/* ===== Bot -> Super I.A (ou nome que você preferir) ===== */
#app main.py-20 a[href*="bot" i],
#app main.flex.flex-col a[href*="bot" i],
#app main.py-20 [aria-label*="bot" i],
#app main.flex.flex-col [aria-label*="bot" i],
#app main.py-20 [title*="bot" i],
#app main.flex.flex-col [title*="bot" i]{
  position: relative !important;
  color: transparent !important;
}

#app main.py-20 a[href*="bot" i]::before,
#app main.flex.flex-col a[href*="bot" i]::before,
#app main.py-20 [aria-label*="bot" i]::before,
#app main.flex.flex-col [aria-label*="bot" i]::before,
#app main.py-20 [title*="bot" i]::before,
#app main.flex.flex-col [title*="bot" i]::before{
  content: "Super I.A";
  color: inherit;
  position: absolute;
  left: 0;
  top: 0;
}