/* 
  Super CHAT (Info Sete) — overrides consolidados (SEM DUPLICAÇÕES)
  Arquivo sugerido: 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: botões/acentos em vermelho (sem mexer no layout).
  5) Composer (normal/private/IA): borda sempre visível + botão Enviar sempre vermelho com texto branco.
*/

/* =========================================================
   0) VARIÁVEIS (sempre no topo)
   ========================================================= */
:root{
  /* Brand */
  --superchat-red: #d10000;
  --superchat-red-hover: #b80000;

  /* Composer / bordas gerais */
  --superchat-composer-border: rgba(148, 163, 184, 0.45);

  /* Private note surfaces (tira o amarelo) */
  --superchat-private-surface: #f1f5f9;        /* slate-100 */
  --superchat-private-surface-strong: #e2e8f0; /* slate-200 */
  --superchat-private-border: rgba(148, 163, 184, 0.60);
}

/* Dark mode overrides */
:is(html.dark, html[data-theme="dark"], html.theme-dark, body.dark, body[data-theme="dark"], body.theme-dark, [data-theme="dark"]){
  --superchat-composer-border: rgba(148, 163, 184, 0.35);
  --superchat-private-surface: #0b0f14;        /* cinza escuro real */
  --superchat-private-surface-strong: #1f2937; /* slate-800 */
  --superchat-private-border: rgba(148, 163, 184, 0.40);
}

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

/* Logo (login do agente /app/login) */
html.sc-route-login img[src*="/brand-assets/logo_thumbnail"],
html.sc-route-login img[src*="/brand-assets/logo_thumbnail.png"],
html.sc-route-login img[src*="/brand-assets/logo.png"],
html.sc-route-login img[src*="/brand-assets/logo_dark.png"],
html.sc-route-login img[src*="/brand-assets/logo-dark.png"],
html.sc-route-login img[src*="/brand-assets/logo.svg"],
html.sc-route-login img[src*="/brand-assets/logo_dark.svg"],
html.sc-route-login img[src*="/brand-assets/logo-dark.svg"],
html.sc-route-login img[src*="/brand-assets/logo-square"],
html.sc-route-login img[src*="/brand-assets/logo-square.png"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  margin: 0 auto 12px auto !important;
  object-fit: contain !important;
}

/* Dark: esconde logo clara e mostra 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;
}

/* Light: esconde logo dark e mostra logo clara */
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;
}

/* Remove o título "Entrar no Super CHAT" somente na tela de login */
#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ão submit do login (somente ali) */
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 */
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;
}

/* =========================================================
   SUPER_ADMIN SIGN_IN — logo + botão (escopo layout)
   ========================================================= */
body > div.h-full.w-full.antialiased main.flex.flex-col img[src*="/brand-assets/logo"],
body > div.h-full.w-full.antialiased main.flex.flex-col img[src*="/brand-assets/logo_dark"],
body > div.h-full.w-full.antialiased main.flex.flex-col img[src*="/brand-assets/logo-dark"],
body > div.h-full.w-full.antialiased main.flex.flex-col img[src*="/brand-assets/logo_thumbnail"],
body > div.h-full.w-full.antialiased main.flex.flex-col img[src*="/brand-assets/logo-square"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  margin: 0 auto 12px 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;
}

/* Super Admin (logado) — logo do menu (pequena) */
body.antialiased nav img[src*="/brand-assets/logo_thumbnail"],
body.antialiased nav img[src*="/brand-assets/logo_thumbnail.svg"],
body.antialiased nav img[src*="/brand-assets/logo-thumbnail"],
body.antialiased nav img[src*="/brand-assets/logo-thumbnail.svg"],
body.antialiased nav img[src*="/brand-assets/logo-square"],
body.antialiased nav img[src*="/brand-assets/logo-square.png"]{
  width: auto !important;
  height: 40px !important;
  max-width: none !important;
  max-height: 40px !important;
  object-fit: contain !important;
}

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

/* Botões/links brand */
#app button.bg-n-brand,
#app a.bg-n-brand,
#app input.bg-n-brand{
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #ffffff !important;
  filter: none !important;
}

/* Brand de fundo */
#app .bg-n-brand,
#app [class~="bg-n-brand"]{
  background-color: #dc2626 !important;
  border-color: #dc2626 !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;
}

/* Hover/active brand */
#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;
}

/* Foco (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;
}

/* Modais: pinta apenas CTA primário dentro do 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;
}

/* Fallback: submit dentro de dialog/modal (não mexe 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;
}

/* Conversa: botão Resolver/Finalizar vira 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] *,
#app button[data-cy*="resolve" i] *,
#app a[data-testid*="resolve" i] *,
#app a[data-cy*="resolve" i] *{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* =========================================================
   2.1) COMPOSER — borda SEMPRE visível (normal/private/IA)
   (isso é o que resolve “sumiu a caixa”)
   ========================================================= */
#app .reply-box,
#app .reply_box{
  border: 1px solid var(--superchat-composer-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Private note: fundo cinza + borda levemente reforçada */
#app .reply-box.is-private,
#app .reply_box.is-private,
#app .is-note-mode{
  background-color: var(--superchat-private-surface) !important;
  border-color: var(--superchat-private-border) !important;
}

/* No private: não deixar o fundo “pintar” o topo */
#app .reply-box.is-private .reply-box__top,
#app .reply_box.is-private .reply_box__top,
#app .reply-box.is-private [class*="reply-box__top" i],
#app .reply_box.is-private [class*="reply_box__top" i]{
  background: transparent !important;
}

/* =========================================================
   2.2) BOTÃO ENVIAR — sempre vermelho, sempre texto branco
   (corrige tua letra escura quando seleciona “Agente I.A”)
   ========================================================= */
#app .reply-box button[type="submit"],
#app .reply_box button[type="submit"],
#app .reply-box button[aria-label*="enviar" i],
#app .reply_box button[aria-label*="enviar" i],
#app .reply-box button[title*="enviar" i],
#app .reply_box button[title*="enviar" i],
#app .reply-box button[data-testid*="send" i],
#app .reply_box button[data-testid*="send" i]{
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}
#app .reply-box button[type="submit"]:hover,
#app .reply_box button[type="submit"]:hover,
#app .reply-box button[data-testid*="send" i]:hover,
#app .reply_box button[data-testid*="send" i]:hover{
  background-color: var(--superchat-red-hover) !important;
  border-color: var(--superchat-red-hover) !important;
  color: #ffffff !important;
}
#app .reply-box button[type="submit"] *,
#app .reply_box button[type="submit"] *,
#app .reply-box button[data-testid*="send" i] *,
#app .reply_box button[data-testid*="send" i] *{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* =========================================================
   2.3) SELETOR (Responder / Mensagem Agente I.A / Privado)
   - objetivo: quando estiver LIGADO/SELECIONADO, fica VERMELHO igual o botão Enviar
   - texto/ícones sempre BRANCOS
   - cobre variações: aria-pressed/aria-selected/data-state/headlessui
   ========================================================= */

/* Base da pílula (container do toggle) */
#app .reply-box__top button.rounded-full.group.relative,
#app .reply_box__top button.rounded-full.group.relative,
#app [class*="reply-box__top" i] button.rounded-full.group.relative,
#app [class*="reply_box__top" i] button.rounded-full.group.relative{
  background-color: #1f2937 !important;
  border: 1px solid var(--superchat-composer-border) !important;
  overflow: hidden !important;
  padding: 2px !important;
  opacity: 1 !important;
  filter: none !important;
  position: relative !important;
}

/* =========================================================
   2.3.c) SELETOR — MARKUP REAL (o toggle fica FORA de .reply-box__top)
   HTML que você colou:
   .reply-box > .flex.justify-between... > button.border.rounded-full.bg-n-alpha-2.group.relative
   ========================================================= */

/* Base da pílula (container) */
#app .reply-box > div.flex.justify-between button.border.rounded-full.bg-n-alpha-2.group.relative,
#app .reply_box > div.flex.justify-between button.border.rounded-full.bg-n-alpha-2.group.relative{
  border: 1px solid var(--superchat-composer-border) !important;
  background-color: rgba(31, 41, 55, 0.85) !important; /* neutro escuro */
  overflow: hidden !important;
  padding: 0.25rem !important;
}

/* Chip/slider (selecionado) */
#app .reply-box > div.flex.justify-between button.border.rounded-full.bg-n-alpha-2.group.relative > div.absolute,
#app .reply_box > div.flex.justify-between button.border.rounded-full.bg-n-alpha-2.group.relative > div.absolute{
  background-color: var(--superchat-red) !important;
  background-image: none !important;
}

/* Texto sempre branco (como não há atributo de "selected" nos chips, forçamos a leitura) */
#app .reply-box > div.flex.justify-between button.border.rounded-full.bg-n-alpha-2.group.relative > div.z-20,
#app .reply_box > div.flex.justify-between button.border.rounded-full.bg-n-alpha-2.group.relative > div.z-20{
  color: #ffffff !important;
}

#app .reply-box > div.flex.justify-between button.border.rounded-full.bg-n-alpha-2.group.relative > div.z-20 *,
#app .reply_box > div.flex.justify-between button.border.rounded-full.bg-n-alpha-2.group.relative > div.z-20 *{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Slider/knob (div.absolute)
   FIX: força o seletor a ficar VERMELHO (o "ativo" é indicado pela posição do knob)
   Isso mata de vez o "padrão" que estava vazando no modo Agente I.A / Privado.
*/
#app .reply-box__top button.rounded-full.group.relative > div.absolute,
#app .reply_box__top button.rounded-full.group.relative > div.absolute{
  background-color: var(--superchat-red) !important;
  background-image: none !important;
  border-radius: 9999px !important;
  z-index: 2 !important;
}

/* Camada do texto acima */
#app .reply-box__top button.rounded-full.group.relative > div.flex,
#app .reply_box__top button.rounded-full.group.relative > div.flex{
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
}

/* Texto/ícones sempre BRANCOS (independente do tema) */
#app .reply-box__top button.rounded-full.group.relative *,
#app .reply_box__top button.rounded-full.group.relative *{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* =========================
   ESTADO ATIVO (LIGADO)
   ========================= */

/* 1) Quando o próprio botão estiver marcado como ativo */
#app .reply-box__top button.rounded-full.group.relative:is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [data-state="on"],
  [data-state="checked"],
  [data-active="true"],
  [data-selected="true"],
  [data-headlessui-state~="checked"],
  [data-headlessui-state~="selected"],
  [data-headlessui-state~="active"]
),
#app .reply_box__top button.rounded-full.group.relative:is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [data-state="on"],
  [data-state="checked"],
  [data-active="true"],
  [data-selected="true"],
  [data-headlessui-state~="checked"],
  [data-headlessui-state~="selected"],
  [data-headlessui-state~="active"]
){
  border-color: var(--superchat-red) !important;
}

/* 2) Quando houver um "segment" selecionado dentro do botão */
#app .reply-box__top button.rounded-full.group.relative :is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [data-state="on"],
  [data-state="checked"],
  [data-active="true"],
  [data-selected="true"],
  [data-headlessui-state~="checked"],
  [data-headlessui-state~="selected"],
  [data-headlessui-state~="active"]
),
#app .reply_box__top button.rounded-full.group.relative :is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [data-state="on"],
  [data-state="checked"],
  [data-active="true"],
  [data-selected="true"],
  [data-headlessui-state~="checked"],
  [data-headlessui-state~="selected"],
  [data-headlessui-state~="active"]
){
  background-color: var(--superchat-red) !important;
  border-radius: 9999px !important;
}

/* 3) Se existir o knob como div.absolute, quando ativo ele vira vermelho */
#app .reply-box__top button.rounded-full.group.relative:is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [data-state="on"],
  [data-state="checked"],
  [data-active="true"],
  [data-selected="true"],
  [data-headlessui-state~="checked"],
  [data-headlessui-state~="selected"],
  [data-headlessui-state~="active"]
) > div.absolute,
#app .reply_box__top button.rounded-full.group.relative:is(
  [aria-pressed="true"],
  [aria-selected="true"],
  [data-state="on"],
  [data-state="checked"],
  [data-active="true"],
  [data-selected="true"],
  [data-headlessui-state~="checked"],
  [data-headlessui-state~="selected"],
  [data-headlessui-state~="active"]
) > div.absolute{
  background-color: var(--superchat-red) !important;
}

/* =========================================================
   2.3.b) SELETOR — fallback AGRESSIVO (quando a marcação real não bate)
   - pinta QUALQUER botão/tab/label "selecionado" dentro do topo do composer
   ========================================================= */

/* Tabs/segmented via ARIA (bem comum) */
#app .reply-box__top :is([role="tab"],[role="radio"],[role="switch"],[role="button"][aria-pressed]):is(
  [aria-selected="true"],
  [aria-checked="true"],
  [aria-pressed="true"]
){
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #ffffff !important;
}

#app .reply_box__top :is([role="tab"],[role="radio"],[role="switch"],[role="button"][aria-pressed]):is(
  [aria-selected="true"],
  [aria-checked="true"],
  [aria-pressed="true"]
){
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #ffffff !important;
}

/* Se o selecionado for um "span"/"div" interno (HeadlessUI / Radix etc.) */
#app .reply-box__top :is([role="tab"],[role="radio"],[role="switch"],[data-state],[data-headlessui-state]):is(
  [data-state="on"],
  [data-state="checked"],
  [data-active="true"],
  [data-selected="true"],
  [data-headlessui-state~="checked"],
  [data-headlessui-state~="selected"],
  [data-headlessui-state~="active"]
){
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #ffffff !important;
}

#app .reply_box__top :is([role="tab"],[role="radio"],[role="switch"],[data-state],[data-headlessui-state]):is(
  [data-state="on"],
  [data-state="checked"],
  [data-active="true"],
  [data-selected="true"],
  [data-headlessui-state~="checked"],
  [data-headlessui-state~="selected"],
  [data-headlessui-state~="active"]
){
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #ffffff !important;
}

/* Radio/checkbox escondido + label (muito usado em segmented) */
#app .reply-box__top input:is([type="radio"],[type="checkbox"]):checked + label,
#app .reply-box__top input:is([type="radio"],[type="checkbox"]):checked + label *{
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

#app .reply_box__top input:is([type="radio"],[type="checkbox"]):checked + label,
#app .reply_box__top input:is([type="radio"],[type="checkbox"]):checked + label *{
  background-color: var(--superchat-red) !important;
  border-color: var(--superchat-red) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Garanta que ícones/texto do item ativo fiquem brancos (mesmo que herdem cor escura) */
#app .reply-box__top :is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-state="on"],[data-state="checked"],[data-selected="true"],[data-active="true"]) *,
#app .reply_box__top :is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-state="on"],[data-state="checked"],[data-selected="true"],[data-active="true"]) *{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Caso seja um botão com bg transparente e o "pill" seja um ::before/::after */
#app .reply-box__top :is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-state="on"],[data-state="checked"],[data-selected="true"],[data-active="true"])::before,
#app .reply-box__top :is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-state="on"],[data-state="checked"],[data-selected="true"],[data-active="true"])::after,
#app .reply_box__top :is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-state="on"],[data-state="checked"],[data-selected="true"],[data-active="true"])::before,
#app .reply_box__top :is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-state="on"],[data-state="checked"],[data-selected="true"],[data-active="true"])::after{
  background-color: var(--superchat-red) !important;
}

/* Fallback extra: se algum tema estiver aplicando texto escuro no item ativo, zera tudo pra branco */
#app .reply-box__top :is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-state="on"],[data-state="checked"],[data-selected="true"],[data-active="true"]) :is(span,div,p,svg,path),
#app .reply_box__top :is([aria-selected="true"],[aria-checked="true"],[aria-pressed="true"],[data-state="on"],[data-state="checked"],[data-selected="true"],[data-active="true"]) :is(span,div,p,svg,path){
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* =========================================================
   2.4) PRIVATE NOTES (bolha já enviada) — remove amarelo
   ========================================================= */
#app [data-testid*="private" i] .message-bubble,
#app [data-testid*="private" i] [class*="message-bubble" i],
#app .message--private .message-bubble,
#app .private-note .message-bubble,
#app .is-private .message-bubble,
#app [class*="private" i] .message-bubble,
#app .message-bubble.bg-n-amber-1,
#app .message-bubble.bg-n-amber-2,
#app .message-bubble.bg-n-amber-3,
#app .message-bubble.bg-n-yellow-1,
#app .message-bubble.bg-n-yellow-2,
#app .message-bubble.bg-n-yellow-3{
  background-color: var(--superchat-private-surface) !important;
  border-color: var(--superchat-private-surface-strong) !important;
  box-shadow: none !important;
}

/* =========================================================
   3) PAINEL — logo-square sempre 20x20 (escopo #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) SUPER ADMIN — tema vermelho (Administrate)
   ========================================================= */

/* CTA/botões Tailwind woot */
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 */
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;
}

/* 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 usam bg-n-brand */
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;
}

/* Links/acentos */
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 links/botões .button */
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 (mantém neutro) */
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;
}

/* =========================================================
   NOTA FINAL: não mexer em logos globais do /brand-assets
   (evita quebrar login por regra genérica)
   ========================================================= */
#app img[src^="/brand-assets/logo"]:not([src*="logo_thumbnail"]):not([src*="logo-square"]){
  height: auto !important;
  max-height: initial !important;
}
/* =========================================================
   SUBSTITUIR “AZUL” PADRÃO POR #F98F8F
   ========================================================= */

/* Texto azul padrão */
#app .text-n-blue-text,
#app [class*="text-n-blue-text"],
#app [class^="text-n-blue-text"],
#app [class$="text-n-blue-text"] {
  color: #f98f8f !important;
}

/* Ícones/paths dentro de elementos azuis */
#app .text-n-blue-text *,
#app [class*="text-n-blue-text"] *,
#app [class^="text-n-blue-text"] *,
#app [class$="text-n-blue-text"] * {
  color: #f98f8f !important;
  fill: #f98f8f !important;
  stroke: #f98f8f !important;
}

/* Sublinhados / bordas de abas azuis */
#app a.border-n-brand,
#app [class*="border-n-brand"] {
  border-color: #f98f8f !important;
}

/* Links/abas ativas pelo router */
#app a.router-link-active,
#app a.router-link-exact-active,
#app a.router-link-active *,
#app a.router-link-exact-active * {
  color: #f98f8f !important;
  fill: #f98f8f !important;
  stroke: #f98f8f !important;
}

/* Itens ativos com fundo azul claro */
#app a.bg-n-alpha-2.text-n-blue-text,
#app [class*="bg-n-alpha-2"][class*="text-n-blue-text"] {
  color: #f98f8f !important;
}

/* Hover/foco em azul claro (quando aplicado) */
#app .hover\:enabled\:bg-n-alpha-2:hover,
#app .focus-visible\:bg-n-alpha-2:focus-visible {
  background-color: rgba(249, 143, 143, 0.2) !important;
}

/* Caso de “tags” internas que também apareçam azul */
#app span.text-n-blue-text,
#app div.text-n-blue-text {
  color: #f98f8f !important;
  fill: #f98f8f !important;
  stroke: #f98f8f !important;
}
/* =========================================================
   TECLAS DE ATALHO (SETTINGS) — SOMENTE A BORDA DO CARD SELECIONADO
   (a borda azul arredondada do card vem do outline-n-brand/30)
   ========================================================= */

/* Card selecionado (outer wrapper) — troca o outline azul por vermelho vivo */
#app button.outline-n-brand\/30,
#app [class~="outline-n-brand/30"]{
  outline: 1px solid #dc2626 !important;
}

/* Radio (bolinha) — mantém vermelho vivo (sem mexer em textos/botões) */
#app input[type="radio"].checked\:bg-n-brand:checked,
#app input[type="radio"][class*="checked:bg-n-brand"]:checked{
  background-color: #dc2626 !important;
}

#app input[type="radio"][class*="checked:before"]:checked::before,
#app input[type="radio"][class*="checked:before"]:checked:before{
  background-color: #dc2626 !important;
}