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


/* === SUPER CHAT — AUTO-COLLAPSE SIDEBAR LEFT (HOVER) ===
   A largura da sidebar é gerenciada pelo Vue (useSidebarResize).
   O script sidebar-toggle.js apenas dispara collapse/expand via hover.
   Mantemos só o hotspot que captura mouse no canto esquerdo. */
#scLeftHotspot{
  position: fixed;
  left: 0;
  top: 0;
  width: 12px;
  height: 100vh;
  z-index: 2147483646;
  background: transparent;
  pointer-events: auto;
}



/* === SUPER I.A / COPILOT - ESTILOS DE TRADUCAO E BOTOES === */
.sc-i18n-original {
  display: inline-block !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sc-i18n-replacement {
  display: inline !important;
  white-space: nowrap !important;
}

.sc-copilot-red-btn {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
  border-radius: 0.5rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.sc-copilot-red-btn:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

.editor-root.editor--copilot .ProseMirror-woot-style p.empty-node::before,
.editor-root.editor--copilot .ProseMirror p.empty-node::before,
.editor--copilot .ProseMirror-woot-style p.empty-node::before,
.editor--copilot .ProseMirror p.empty-node::before {
  content: "Digite algo para a Super I.A ou refine a resposta... pressione Enter para enviar" !important;
}
/* === FIM SUPER I.A / COPILOT === */


/* =========================================================
   LAYER 2 — AZUIS RESIDUAIS DO CHATWOOT (Info Sete 2026-05-11)
   Override via CSS pra não precisar rebuild da imagem. Mantém
   as cores semânticas (azul/verde/amarelo de banner/status),
   só substitui o azul "decorativo" por vermelho transparente.
   ========================================================= */

/* ---- Tabs ativas (Mensagens/Consultar CNPJ/etc + Minhas/Não atribuídas/Todos) ----
   O TabsItem.vue do Chatwoot, quando ativo, sempre aplica DUAS classes
   juntas: `text-n-blue-11` no texto + `after:bg-n-brand` no underline.
   Usamos a presença do `after:bg-n-brand` como assinatura confiável pra
   identificar tab ativa, e pintamos o texto/badge no mesmo tom rosa-claro
   #f98f8f usado em router-link-active (sidebar "Todas as conversas").
   Decisão Bruno 2026-05-11 — pra ficar consistente com o resto da UI. */
a[class*="after:bg-n-brand"][class*="text-n-blue-11"]{
  color: #f98f8f !important;
}
a[class*="after:bg-n-brand"] > div[class*="bg-n-blue-3"]{
  background-color: rgba(249, 143, 143, 0.15) !important;
}
a[class*="after:bg-n-brand"] > div[class*="text-n-blue-11"]{
  color: #f98f8f !important;
}

/* ---- Azuis residuais em links e botões do dashboard ----
   O Chatwoot usa text-n-blue-11 como cor "destaque/link" em vários
   lugares (Inbox cards, contact attributes, copilot input, contacts
   merge, contact import, suggestions de etiqueta, etc). Trocamos por
   #f98f8f pra unificar com a tab ativa e o item ativo do sidebar.
   Cuidado: NAO afeta banners de info (que usam bg-n-blue-3 +
   text-n-blue-11 juntos com classes especificas do Banner.vue) porque
   estamos cobrindo só elementos onde text-n-blue-11 é o texto principal. */
.text-n-blue-11:not(.bg-n-blue-3):not(.bg-n-blue-4):not(.bg-n-alpha-2),
[class*="text-n-blue-11"]:not([class*="bg-n-blue"]):not([class*="bg-n-alpha"]){
  color: #f98f8f !important;
}
.hover\:text-n-blue-11:hover{
  color: #f98f8f !important;
}
.text-n-blue-10{
  color: #f98f8f !important;
}
.hover\:text-n-blue-11\:hover{
  color: #f98f8f !important;
}
.text-n-blue-text{
  color: #f98f8f !important;
}

/* ---- Bolhas de mensagens do AGENTE (variant=agent) ----
   Mantém o azul original do Chatwoot (`bg-n-solid-blue`).
   Tentamos vermelho (confundiu com erro) e verde WhatsApp (Bruno
   achou feio) — voltou pro default em 2026-05-11. */

/* === FIM LAYER 2 === */


/* =========================================================
   LAYER 3 — DESIGN SYSTEM 'APPLE-LIKE' (Info Sete 2026-05-12)
   Sistema de tokens + utilitários reutilizáveis em todo o app.
   Foco: glassmorphism, blur generoso, sombras profundas, bordas
   arredondadas grandes, gradientes sutis, aurora de fundo.
   Esses utilitários ficam disponíveis via classe (.sc-glass,
   .sc-bg-aurora, .sc-radius-lg etc) e podem ser adicionados nos
   componentes Vue progressivamente.
   ========================================================= */
:root{
  /* Glass (vidro fosco) */
  --sc-glass-bg: rgba(255, 255, 255, 0.55);
  --sc-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --sc-glass-border: rgba(255, 255, 255, 0.7);

  /* Sombras Apple-style: offset Y maior, blur grande, alpha baixo */
  --sc-shadow-sm: 0 4px 14px -2px rgba(15, 23, 42, 0.08);
  --sc-shadow-md: 0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 2px 6px -1px rgba(15, 23, 42, 0.06);
  --sc-shadow-lg: 0 30px 60px -15px rgba(15, 23, 42, 0.22), 0 6px 12px -2px rgba(15, 23, 42, 0.08);
  --sc-shadow-glow-red: 0 20px 40px -10px rgba(209, 0, 0, 0.35);

  /* Gradiente de página (light) — suave, lavanda → branco → coral */
  --sc-gradient-page:
    radial-gradient(60% 80% at 100% 0%, rgba(254, 226, 226, 0.55) 0%, transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(221, 214, 254, 0.45) 0%, transparent 70%),
    linear-gradient(180deg, #fafaf9 0%, #f5f5f4 100%);

  /* Tipografia (sistema Apple primeiro, fallback sans) */
  --sc-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
}

html.dark{
  --sc-glass-bg: rgba(17, 24, 39, 0.55);
  --sc-glass-bg-strong: rgba(17, 24, 39, 0.82);
  --sc-glass-border: rgba(255, 255, 255, 0.08);

  --sc-shadow-sm: 0 4px 14px -2px rgba(0, 0, 0, 0.4);
  --sc-shadow-md: 0 12px 28px -6px rgba(0, 0, 0, 0.55), 0 2px 6px -1px rgba(0, 0, 0, 0.4);
  --sc-shadow-lg: 0 30px 60px -15px rgba(0, 0, 0, 0.7), 0 6px 12px -2px rgba(0, 0, 0, 0.45);
  --sc-shadow-glow-red: 0 20px 40px -10px rgba(248, 113, 113, 0.45);

  --sc-gradient-page:
    radial-gradient(60% 80% at 100% 0%, rgba(127, 29, 29, 0.18) 0%, transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(67, 56, 202, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #0b1220 0%, #060a13 100%);
}

/* Utilitários glass — adicionar como classe em qualquer container */
.sc-glass{
  background-color: var(--sc-glass-bg) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sc-glass-border) !important;
}
.sc-glass-strong{
  background-color: var(--sc-glass-bg-strong) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--sc-glass-border) !important;
}

/* Sombras */
.sc-shadow-sm{ box-shadow: var(--sc-shadow-sm) !important; }
.sc-shadow-md{ box-shadow: var(--sc-shadow-md) !important; }
.sc-shadow-lg{ box-shadow: var(--sc-shadow-lg) !important; }
.sc-shadow-glow{ box-shadow: var(--sc-shadow-glow-red) !important; }

/* Background da página com aurora (gradientes radiais) */
.sc-bg-page{
  background: var(--sc-gradient-page) !important;
  background-attachment: fixed !important;
}

/* Raios */
.sc-radius-lg{ border-radius: 1.5rem !important; }
.sc-radius-xl{ border-radius: 2rem !important; }
.sc-radius-2xl{ border-radius: 2.5rem !important; }

/* Tipografia display */
.sc-font-display{ font-family: var(--sc-font-display) !important; letter-spacing: -0.01em; }

/* Botão primary Apple-like (com glow vermelho) */
.sc-btn-primary{
  background: linear-gradient(180deg, #e11d1d 0%, #b91c1c 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: 1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    var(--sc-shadow-glow-red) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
  border: 0 !important;
}
.sc-btn-primary:hover{
  filter: brightness(1.05) !important;
  transform: translateY(-1px);
}
.sc-btn-primary:active{
  transform: translateY(0);
  filter: brightness(0.97) !important;
}

/* Input Apple-like (background discreto, raio grande, focus suave) */
.sc-input{
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0.875rem !important;
  padding: 0.875rem 1rem !important;
  font-size: 0.95rem !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.sc-input:focus, .sc-input:focus-within{
  background: rgba(0, 0, 0, 0.01) !important;
  border-color: rgba(209, 0, 0, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(209, 0, 0, 0.1) !important;
  outline: none !important;
}
html.dark .sc-input{
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .sc-input:focus, html.dark .sc-input:focus-within{
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Cascading dentro do card glass-strong: estiliza inputs e botão submit
   sem precisar editar cada componente Vue individualmente. */
.sc-glass-strong form input[type="text"],
.sc-glass-strong form input[type="password"],
.sc-glass-strong form input[type="email"]{
  background: rgba(0, 0, 0, 0.025) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 0.875rem !important;
  padding: 0.875rem 1rem !important;
  font-size: 0.95rem !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.sc-glass-strong form input[type="text"]:focus,
.sc-glass-strong form input[type="password"]:focus,
.sc-glass-strong form input[type="email"]:focus{
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(209, 0, 0, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(209, 0, 0, 0.1) !important;
  outline: none !important;
}
html.dark .sc-glass-strong form input[type="text"],
html.dark .sc-glass-strong form input[type="password"],
html.dark .sc-glass-strong form input[type="email"]{
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.sc-glass-strong form button[type="submit"]{
  background: linear-gradient(180deg, #e11d1d 0%, #b91c1c 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  border-radius: 1rem !important;
  padding: 0.875rem 1rem !important;
  font-size: 1rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 20px 40px -10px rgba(209, 0, 0, 0.45) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
  border: 0 !important;
  outline: 0 !important;
}
.sc-glass-strong form button[type="submit"]:hover:not(:disabled){
  filter: brightness(1.06) !important;
  transform: translateY(-1px);
}
.sc-glass-strong form button[type="submit"]:active:not(:disabled){
  transform: translateY(0);
  filter: brightness(0.97) !important;
}
.sc-glass-strong form button[type="submit"]:disabled{
  filter: saturate(0.5) brightness(0.95);
  cursor: not-allowed;
}

/* Links do card (esqueci a senha) */
.sc-glass-strong form a.text-link{
  color: #d10000 !important;
  font-weight: 500;
  text-underline-offset: 4px;
}
.sc-glass-strong form a.text-link:hover{
  text-decoration: underline;
}

/* OAuth button (Google) e SAML button dentro do card */
.sc-glass-strong .gsi-material-button,
.sc-glass-strong a[href*="login/sso"]{
  border-radius: 0.875rem !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  transition: background 120ms ease, transform 120ms ease;
}
.sc-glass-strong .gsi-material-button:hover,
.sc-glass-strong a[href*="login/sso"]:hover{
  background: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-1px);
}

/* === FIM LAYER 3 === */


/* ============================================================
   LAYER 7 — ATENDECHAT-INSPIRED (Info Sete 2026-05-14 noite)
   ============================================================
   Inspiração: código do Atendechat (que Bruno comprou).
   Adaptação: trocar paleta roxa (#682EE3) por vermelho institucional
   Info Sete (#d10000), manter bubble verde WhatsApp clássico (#dcf8c6),
   raio suave (7.5px), estrutura de cinzas neutros, topbar com gradient
   horizontal, scrollbar customizada.

   Filosofia: visual "WhatsApp Business BR" reconhecível pelos clientes,
   sem glass/blur/gradient agressivo. Identidade Info Sete em pontos-chave.
   ============================================================ */

/* ---- Tokens (light/dark) ---- */
:root{
  --sc7-primary: #d10000;
  --sc7-primary-dark: #b91c1c;
  --sc7-primary-soft: rgba(209, 0, 0, 0.06);
  --sc7-primary-gradient: linear-gradient(to right, #d10000, #b91c1c, #991b1b);

  /* Fundo do app: gradient sutil cinza-claríssimo (baseline pro glass) */
  --sc7-bg-app: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  --sc7-bg-app-solid: #f8fafc; /* fallback sólido */

  /* Superfícies elevadas: cinza super claro com transparência alta + blur.
     Pra glass funcionar, o backdrop-filter blur precisa estar no elemento. */
  --sc7-bg-elev: rgba(248, 250, 252, 0.55);
  --sc7-bg-elev-strong: rgba(248, 250, 252, 0.78);
  --sc7-bg-muted: rgba(15, 23, 42, 0.04);
  --sc7-bg-conv: #efeae2;

  --sc7-text: #1e293b;
  --sc7-text-muted: #64748b;

  /* Borda: praticamente invisível, só pra dar definição */
  --sc7-border: rgba(15, 23, 42, 0.06);

  /* Bubbles */
  --sc7-bubble-left: rgba(219, 234, 254, 0.7); /* azul claro translúcido (cliente) */
  --sc7-bubble-left-text: #1e293b;
  --sc7-bubble-right: #dcf8c6;                  /* agente sólido (cor brand WhatsApp) */

  --sc7-shadow-bubble: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  --sc7-shadow-glass-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --sc7-shadow-glass-md: 0 8px 24px -6px rgba(15, 23, 42, 0.08);
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]){
  --sc7-primary: #ef4444;
  --sc7-primary-dark: #b91c1c;
  --sc7-primary-soft: rgba(239, 68, 68, 0.12);
  --sc7-primary-gradient: linear-gradient(to right, #991b1b, #b91c1c, #991b1b);

  /* Fundo do app dark: gradient sutil cinza-escuro (baseline pro glass) */
  --sc7-bg-app: linear-gradient(180deg, #0f172a 0%, #0b141a 100%);
  --sc7-bg-app-solid: #0b141a;

  /* Superfícies elevadas no dark: cinza-azulado WhatsApp com transparência */
  --sc7-bg-elev: rgba(31, 44, 51, 0.55);
  --sc7-bg-elev-strong: rgba(31, 44, 51, 0.78);
  --sc7-bg-muted: rgba(255, 255, 255, 0.05);
  --sc7-bg-conv: #0b141a;

  --sc7-text: #e9edef;
  --sc7-text-muted: #8696a0;

  --sc7-border: rgba(255, 255, 255, 0.06);

  --sc7-bubble-left: rgba(239, 68, 68, 0.18); /* vermelho institucional translúcido, dark mode */
  --sc7-bubble-left-text: #ffffff;
  --sc7-bubble-right: #005c4b;

  --sc7-shadow-bubble: 0 1px 0.5px rgba(0, 0, 0, 0.4);
}

/* ---- Topbar fina no topo do shell — gradient vermelho ----
   Cria barra de 4px no topo absoluto, parecido com header do Atendechat
   mas mais sutil (sem ocupar espaço) — só marca identidade visual. */
.sc-app-shell{
  position: relative;
  background: var(--sc7-bg-app) !important;
  background-color: var(--sc7-bg-app-solid) !important;
  background-attachment: fixed !important;
}
.sc-app-shell::before{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--sc7-primary-gradient);
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(209, 0, 0, 0.25);
}

/* ---- Sidebar — glass cinza-claríssimo com blur (Apple-style) ---- */
.sc-sidebar{
  background-color: var(--sc7-bg-elev) !important;
  border-right: 1px solid var(--sc7-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-sidebar{
  background-color: rgba(31, 44, 51, 0.6) !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Lista de conversas — glass cinza-claríssimo ---- */
.sc-chat-list{
  background-color: var(--sc7-bg-elev) !important;
  border-right: 1px solid var(--sc7-border) !important;
  backdrop-filter: blur(24px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-chat-list{
  background-color: rgba(31, 44, 51, 0.6) !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Cards de conversa — estilo WhatsApp Web ---- */
.sc-conv-card{
  padding: 0.75rem 0.875rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sc7-border) !important;
  position: relative;
  transition: background 120ms ease !important;
}
.sc-conv-card:hover{
  background: var(--sc7-bg-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}
.sc-conv-card.active{
  background: var(--sc7-bg-muted) !important;
  box-shadow: none !important;
}
/* Accent line vermelha à esquerda quando ativo */
.sc-conv-card.active::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sc7-primary);
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-conv-card:hover,
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-conv-card.active{
  background: var(--sc7-bg-muted) !important;
}

/* ---- Janela de conversa — fundo WhatsApp-like com wallpaper ---- */
/* Wallpaper bege com padrão sutil de triângulos (estilo WhatsApp Web).
   SVG inline em data URI pra não depender de asset externo. */
.sc-conv-box{
  background-color: var(--sc7-bg-conv) !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='%23000' fill-opacity='0.025'><circle cx='10' cy='10' r='1'/><circle cx='30' cy='30' r='1'/><circle cx='50' cy='10' r='1'/><circle cx='10' cy='50' r='1'/><circle cx='50' cy='50' r='1'/></g></svg>") !important;
  background-repeat: repeat !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-conv-box{
  background-color: var(--sc7-bg-conv) !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='%23fff' fill-opacity='0.025'><circle cx='10' cy='10' r='1'/><circle cx='30' cy='30' r='1'/><circle cx='50' cy='10' r='1'/><circle cx='10' cy='50' r='1'/><circle cx='50' cy='50' r='1'/></g></svg>") !important;
}

/* ---- Header da conversa — gradient vermelho horizontal sutil ----
   Não tão saturado quanto o Atendechat (que era roxo), mas notável.
   Texto e ícones em branco/cor clara pra contrastar. */
.sc-conv-header{
  background: var(--sc7-primary-gradient) !important;
  background-color: var(--sc7-primary) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #ffffff !important;
}
/* Texto branco em cima do gradient — força a maioria dos textos do header */
.sc-conv-header *,
.sc-conv-header [class*="text-n-slate"],
.sc-conv-header [class*="text-n-amber"]{
  color: #ffffff !important;
}
/* Avatares: borda branca pra destacar */
.sc-conv-header img,
.sc-conv-header [class*="rounded-full"]{
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}
/* Botões do header (Finalizar, etc) com fundo translúcido branco */
/* Botões e elementos clicáveis dentro do header (Finalizar/Reabrir, menus,
   chevrons etc) — fundo escuro discreto sem borda, texto branco. Estilo
   mais clean, sem parecer "vidro" com borda.
   NÃO inclui [class*="text-n-slate"] aqui pra não dar background em qualquer
   texto cinza (que causava double-background no canal de atendimento). */
.sc-conv-header button,
.sc-conv-header a,
.sc-conv-header [role="button"],
.sc-conv-header [class*="bg-n-solid"],
.sc-conv-header [class*="bg-n-background"],
.sc-conv-header [class*="bg-n-alpha"]{
  background: rgba(0, 0, 0, 0.18) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.sc-conv-header button:hover,
.sc-conv-header a:hover,
.sc-conv-header [role="button"]:hover{
  background: rgba(0, 0, 0, 0.28) !important;
}
/* Ícones SVG dentro de botões do header — força branco */
.sc-conv-header button svg,
.sc-conv-header a svg,
.sc-conv-header [role="button"] svg,
.sc-conv-header button [class^="i-"],
.sc-conv-header [class*="i-lucide"],
.sc-conv-header [class*="i-ph"]{
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* Texto dentro de dropdowns/menus expandidos do header — força contraste alto */
.sc-conv-header button span,
.sc-conv-header a span,
.sc-conv-header [class*="dropdown"] span{
  color: #ffffff !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-conv-header{
  background: linear-gradient(to right, #7f1d1d, #991b1b, #7f1d1d) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Bubbles de mensagem — estilo WhatsApp clássico ----
   .left-bubble = cliente (incoming) → branco
   .right-bubble = agente (outgoing) → verde WhatsApp */
.left-bubble,
.right-bubble{
  border-radius: 7.5px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  box-shadow: var(--sc7-shadow-bubble) !important;
  border: 0 !important;
}

.left-bubble{
  background: var(--sc7-bubble-left) !important;
  color: var(--sc7-bubble-left-text) !important;
  border-bottom-left-radius: 0 !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}
.left-bubble *{
  color: var(--sc7-bubble-left-text) !important;
}

.right-bubble{
  background: var(--sc7-bubble-right) !important;
  color: var(--sc7-text) !important;
  border-bottom-right-radius: 0 !important;
  /* Bubble do agente mantém cor sólida (verde WhatsApp brand) — sem blur */
}

/* Texto dentro das bubbles — herdar cor neutra */
.left-bubble *,
.right-bubble *{
  color: inherit !important;
}

/* Container da mensagem com espaço aéreo modesto */
.message-bubble-container{
  margin-bottom: 0.25rem !important;
}

/* Timestamp/meta discreto, estilo WhatsApp */
.message-bubble-container [class*="text-n-slate-11"]{
  font-size: 0.6875rem !important;
  color: var(--sc7-text-muted) !important;
  opacity: 0.9;
}

/* Bubbles de nota privada (Orientar Agente) — manter amarelo Atendechat */
[class*="bg-n-solid-amber"]:not(.sc-mode-toggle-chip){
  background: #fff3c4 !important;
  border: 0 !important;
  color: #5a3d00 !important;
  border-radius: 7.5px !important;
  padding: 0.5rem 0.75rem !important;
  box-shadow: var(--sc7-shadow-bubble) !important;
}
/* Dark mode: bubbles de nota privada (Orientar Agente) ficam AZUIS
   com texto branco. Tom = azul Chatwoot padrão (--solid-blue dark = rgb 16 49 91). */
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) [class*="bg-n-solid-amber"]:not(.sc-mode-toggle-chip){
  background: #10315b !important;
  color: #ffffff !important;
  box-shadow: var(--sc7-shadow-bubble) !important;
}
/* Força texto/ícones internos brancos também */
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) [class*="bg-n-solid-amber"]:not(.sc-mode-toggle-chip) *{
  color: #ffffff !important;
}

/* ---- Composer — glass cinza-claríssimo com blur ---- */
.sc-composer{
  background-color: var(--sc7-bg-elev) !important;
  border-top: 1px solid var(--sc7-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
  margin: 0 !important;
  /* min-height idêntico nos dois modos pra altura uniforme.
     Especificidade alta com body pra desempatar contra layout interno do ReplyBox. */
}
/* Quick replies agora aparecem nos DOIS modos (Reply e Nota) — layout simétrico,
   altura natural fica igual sem precisar forçar via CSS.
   Min-height só pra evitar composer minúsculo em casos extremos. */
body .sc-composer,
.sc-app-shell .sc-composer{
  min-height: 200px !important;
}
/* Editor com altura mínima razoável e scroll interno quando texto grande.
   SEM flex: 1 — isso estava fazendo o editor crescer diferente em cada modo
   (com/sem quick replies). Agora altura é estável: composer 220px min + editor
   ocupa o que sobrar naturalmente. */
.sc-composer .ProseMirror,
.sc-composer [class*="ProseMirror"]{
  max-height: 50vh;
  overflow-y: auto;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-composer{
  background-color: rgba(31, 44, 51, 0.6) !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Contatos lista + detalhes — glass ---- */
.sc-contacts-list,
.sc-contact-details{
  background: var(--sc7-bg-app) !important;
  background-color: var(--sc7-bg-app-solid) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-contacts-list,
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-contact-details{
  background-color: var(--sc7-bg-app) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- Settings — glass ---- */
.sc-settings-wrapper{
  background: var(--sc7-bg-app) !important;
  background-color: var(--sc7-bg-app-solid) !important;
  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-settings-wrapper{
  background-color: var(--sc7-bg-app) !important;
}

/* ---- Pílula Reply/Nota — segmented soft glass (Apple-style) ----
   Container glass com blur saturado, pill total (border-radius 9999),
   sombra externa suave + inset highlight pra dar profundidade.
   Chip ativo com gradient bordeaux + dual shadow + transição iOS ease.
   Especificidade ALTA: o template tem `bg-n-alpha-2` Tailwind que vem depois
   no CSS bundle. Encadear classes desempata. */
.sc-app-shell .sc-composer .sc-mode-toggle,
body .sc-mode-toggle{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(226, 232, 240, 0.85) 100%) !important;
  background-color: rgba(241, 245, 249, 0.92) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  height: 2.25rem !important;
  border-radius: 0.375rem !important;
  padding: 4px !important;
}

/* Especificidade brutal pra vencer o `rounded-full` (9999px) do Tailwind
   mesmo em cenários onde o cascade @layer flipa a ordem. */
html body button.sc-mode-toggle,
html body button.sc-mode-toggle[data-mode]{
  border-radius: 0.375rem !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.06),
    0 0 0 0.5px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04) !important;
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 180ms cubic-bezier(0.32, 0.72, 0, 1),
              background 180ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.sc-app-shell .sc-composer .sc-mode-toggle:hover,
body .sc-mode-toggle:hover{
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(241, 245, 249, 0.95) 100%) !important;
  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.1),
    0 0 0 0.5px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 23, 42, 0.05) !important;
}
.sc-app-shell .sc-composer .sc-mode-toggle:active,
body .sc-mode-toggle:active{
  transform: scale(0.98) !important;
}
.sc-app-shell .sc-composer .sc-mode-toggle:focus-visible,
body .sc-mode-toggle:focus-visible{
  outline: 2px solid rgba(209, 29, 29, 0.45) !important;
  outline-offset: 2px !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-app-shell .sc-composer .sc-mode-toggle,
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) body .sc-mode-toggle{
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.8) 0%, rgba(30, 41, 59, 0.7) 100%) !important;
  background-color: rgba(30, 41, 59, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 0 0.5px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-app-shell .sc-composer .sc-mode-toggle:hover,
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) body .sc-mode-toggle:hover{
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.85) 0%, rgba(51, 65, 85, 0.78) 100%) !important;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
}

/* Texto inativo: cinza Apple legível, peso 500.
   IMPORTANTE: padding interno deve casar com o JS do EditorModeToggle.vue
   que calcula `chipWidth = paneWidth + 16`. Cada lado = 8px = 0.5rem. */
.sc-mode-toggle .sc-mode-toggle-pane{
  color: rgba(60, 60, 67, 0.78) !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  letter-spacing: -0.01em !important;
  padding: 0 0.5rem !important;
  transition: color 220ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-mode-toggle .sc-mode-toggle-pane{
  color: rgba(235, 235, 245, 0.75) !important;
}
.sc-mode-toggle:hover .sc-mode-toggle-pane{
  color: rgba(15, 23, 42, 0.95) !important;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-mode-toggle:hover .sc-mode-toggle-pane{
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Texto ATIVO: branco bold com micro text-shadow pra legibilidade no chip */
.sc-mode-toggle[data-mode="reply"] .sc-mode-toggle-pane--reply,
.sc-mode-toggle[data-mode="note"] .sc-mode-toggle-pane--note{
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 1px rgba(127, 29, 29, 0.35) !important;
}

/* Chip ATIVO: gradient bordeaux + dual shadow + transição iOS ease.
   Especificidade ALTA (5 classes) porque o Vite injeta CSS de Tailwind
   APÓS o infosete.css carregar — quando ambos têm !important, ganha o
   declarado por último (Tailwind). Encadear classes desempata. */
.sc-app-shell .sc-composer .sc-mode-toggle .sc-mode-toggle-chip,
body .sc-mode-toggle .sc-mode-toggle-chip{
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
  background-color: #d10000 !important;
  border: 1px solid rgba(127, 29, 29, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(127, 29, 29, 0.2),
    0 2px 6px -1px rgba(185, 28, 28, 0.35) !important;
  height: 1.75rem !important;
  border-radius: 0.375rem !important;
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
              filter 180ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.sc-app-shell .sc-composer .sc-mode-toggle:hover .sc-mode-toggle-chip,
body .sc-mode-toggle:hover .sc-mode-toggle-chip{
  filter: brightness(1.06) !important;
}
.sc-app-shell .sc-composer .sc-mode-toggle:active .sc-mode-toggle-chip,
body .sc-mode-toggle:active .sc-mode-toggle-chip{
  filter: brightness(0.96) !important;
}

/* Remover o traço fininho colorido abaixo (não precisa mais — chip vermelho já indica ativo) */
.sc-mode-toggle[data-mode="reply"] .sc-mode-toggle-pane--reply::after,
.sc-mode-toggle[data-mode="note"] .sc-mode-toggle-pane--note::after{
  display: none !important;
}

/* ---- Toggle em mobile: compacto pra liberar espaço pros 5 ícones da direita ----
   Texto pt-BR ("Responder cliente"/"Orientar agente") é longo. Em < 640px volta
   pro padding original (0.5rem) + height 1.75rem + font-size 0.75rem. */
@media (max-width: 639px){
  .sc-app-shell .sc-composer .sc-mode-toggle,
  body .sc-mode-toggle{
    height: 2rem !important;
    padding: 3px !important;
    border-radius: 0.3125rem !important;
  }
  .sc-mode-toggle .sc-mode-toggle-pane{
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
  }
  .sc-app-shell .sc-composer .sc-mode-toggle .sc-mode-toggle-chip,
  body .sc-mode-toggle .sc-mode-toggle-chip{
    height: 1.5rem !important;
    border-radius: 0.3125rem !important;
  }
}

/* ---- Padrão global de botões PRIMARY ---- */
/* Especificidade ALTA pra desempatar contra Tailwind do Vite (carregado depois).
   Cobre: bg-n-brand (NextButton color=blue), bg-n-solid-blue (variantes),
   bg-n-amber-9 (NextButton color=amber, usado em Nota), bg-n-solid-amber.
   Também pega .button.primary do Foundation legado. */
.sc-app-shell button[class*="bg-n-brand"],
.sc-app-shell button[class*="bg-n-solid-blue"],
.sc-app-shell button[class*="bg-n-amber-9"],
.sc-app-shell button[class*="bg-n-solid-amber"],
.sc-app-shell .sc-btn-primary,
.sc-app-shell .button.primary,
.sc-app-shell button.primary,
body button[class*="bg-n-brand"],
body button[class*="bg-n-amber-9"]{
  background: linear-gradient(180deg, #e11d1d 0%, #b91c1c 100%) !important;
  background-color: #d10000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(127, 29, 29, 0.3) !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 12px -2px rgba(209, 0, 0, 0.3) !important;
  transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease !important;
}
.sc-app-shell button[class*="bg-n-brand"]:hover:not(:disabled),
.sc-app-shell button[class*="bg-n-solid-blue"]:hover:not(:disabled),
.sc-app-shell button[class*="bg-n-amber-9"]:hover:not(:disabled),
.sc-app-shell .sc-btn-primary:hover:not(:disabled),
body button[class*="bg-n-brand"]:hover:not(:disabled){
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 16px -3px rgba(209, 0, 0, 0.45) !important;
}
.sc-app-shell button[class*="bg-n-brand"]:active:not(:disabled),
.sc-app-shell .sc-btn-primary:active:not(:disabled){
  transform: translateY(0);
  filter: brightness(0.97);
}
.sc-app-shell button[class*="bg-n-brand"]:disabled,
.sc-app-shell button[class*="bg-n-amber-9"]:disabled,
.sc-app-shell .sc-btn-primary:disabled{
  filter: saturate(0.5) brightness(0.95);
  cursor: not-allowed;
  opacity: 0.6;
}
/* Texto e ícones dentro dos botões primary — força branco */
.sc-app-shell button[class*="bg-n-brand"] span,
.sc-app-shell button[class*="bg-n-brand"] svg,
.sc-app-shell button[class*="bg-n-brand"] [class^="i-"],
.sc-app-shell button[class*="bg-n-amber-9"] span,
.sc-app-shell button[class*="bg-n-amber-9"] svg,
.sc-app-shell button[class*="bg-n-amber-9"] [class^="i-"],
.sc-app-shell .sc-btn-primary span,
.sc-app-shell .sc-btn-primary svg,
.sc-app-shell .sc-btn-primary [class^="i-"]{
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ---- Scrollbar customizada — vermelha institucional ---- */
.sc-app-shell *::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
.sc-app-shell *::-webkit-scrollbar-track{
  background: transparent;
}
.sc-app-shell *::-webkit-scrollbar-thumb{
  background-color: rgba(209, 0, 0, 0.25);
  border-radius: 4px;
}
.sc-app-shell *::-webkit-scrollbar-thumb:hover{
  background-color: rgba(209, 0, 0, 0.45);
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-app-shell *::-webkit-scrollbar-thumb{
  background-color: rgba(239, 68, 68, 0.3);
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],html[style*="color-scheme: dark"],[data-color-scheme="dark"]) .sc-app-shell *::-webkit-scrollbar-thumb:hover{
  background-color: rgba(239, 68, 68, 0.5);
}

/* ---- Banners de pausa dentro do header (Em pausa / Atrasado) ----
   Eles usam bg-n-ruby-3/amber-3 (cores claras translúcidas) + text-n-ruby-12/amber-12
   (cores escuras). Minha regra global do header força tudo pra branco e
   o resultado é texto branco sobre fundo claro → invisível.
   Solução: fundo branco sólido + texto vermelho/âmbar escuro pra contraste claro. */
.sc-conv-header [class*="bg-n-ruby"],
.sc-conv-header [class*="bg-n-amber"]{
  background: rgba(255, 255, 255, 0.95) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 0.5rem !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.sc-conv-header [class*="bg-n-ruby"] *,
.sc-conv-header [class*="bg-n-ruby"] span{
  color: #b91c1c !important; /* ruby-700 */
}
.sc-conv-header [class*="bg-n-amber"] *,
.sc-conv-header [class*="bg-n-amber"] span{
  color: #b45309 !important; /* amber-700 */
}
/* Ícones SVG/Lucide dentro dos banners também escuros */
.sc-conv-header [class*="bg-n-ruby"] svg,
.sc-conv-header [class*="bg-n-ruby"] [class^="i-"]{
  color: #b91c1c !important;
  fill: #b91c1c !important;
}
.sc-conv-header [class*="bg-n-amber"] svg,
.sc-conv-header [class*="bg-n-amber"] [class^="i-"]{
  color: #b45309 !important;
  fill: #b45309 !important;
}

/* ---- Header da conversa — altura mínima maior pra não cortar avatar ----
   Default era h-12 (48px) que cortava avatares circulares. Aumentar pra 56px
   no desktop, mantendo h-24 no mobile. */
.sc-conv-header{
  min-height: 3.5rem !important; /* 56px */
}
@media (min-width: 1280px){
  .sc-conv-header{
    height: 3.5rem !important;
  }
}

/* ---- Dropdown global — também pega DropdownMenu novo (components-next) ----
   O DropdownMenu novo NÃO usa classe .n-dropdown-body, usa combinação de
   classes Tailwind. Seletor específico abaixo cobre ambos os patterns. */
[class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"][class*="z-50"]{
  background: #7f1d1d !important;
  background-color: #7f1d1d !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  outline: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}
[class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"][class*="z-50"] *{
  color: #ffffff !important;
}
[class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"][class*="z-50"] [class*="text-n-slate-11"]{
  color: rgba(255, 255, 255, 0.65) !important;
}
[class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"][class*="z-50"] li:hover,
[class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"][class*="z-50"] button:hover,
[class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"][class*="z-50"] a:hover,
[class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"][class*="z-50"] [class*="cursor-pointer"]:hover{
  background: rgba(255, 255, 255, 0.12) !important;
}
/* Header sticky interno do dropdown (search, section title) também escuro */
[class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"][class*="z-50"] [class*="sticky"][class*="bg-n-alpha-3"]{
  background: rgba(127, 29, 29, 0.95) !important;
}

/* ---- Dropdown legado (.n-dropdown-body) ----
   Aplica em TODOS os dropdowns que usam DropdownBody antigo (Account Switcher,
   perfil, etc). Mesmo padrão dos botões do header. */
.n-dropdown-body{
  background: #7f1d1d !important;
  background-color: #7f1d1d !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.75rem !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
}
/* Texto interno em branco — força mesmo sobre classes Tailwind originais */
.n-dropdown-body,
.n-dropdown-body *,
.n-dropdown-body [class*="text-n-slate"],
.n-dropdown-body [class*="text-n-amber"]{
  color: #ffffff !important;
}
/* Title da seção do dropdown (ex: "Alterar conta") — peso/contraste */
.n-dropdown-body [class*="text-xs"],
.n-dropdown-body [class*="text-n-slate-11"]{
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
/* Divisores translúcidos brancos */
.n-dropdown-body [class*="bg-n-strong"],
.n-dropdown-body hr{
  background-color: rgba(255, 255, 255, 0.2) !important;
}
/* Items clicáveis com hover translúcido branco */
.n-dropdown-body li,
.n-dropdown-body button,
.n-dropdown-body a,
.n-dropdown-body [class*="cursor-pointer"]{
  background: transparent !important;
  border-radius: 0.5rem !important;
  transition: background 120ms ease !important;
}
.n-dropdown-body li:hover,
.n-dropdown-body button:hover,
.n-dropdown-body a:hover,
.n-dropdown-body [class*="cursor-pointer"]:hover{
  background: rgba(255, 255, 255, 0.12) !important;
}
/* Ícone de check verde da conta ativa — manter verde claro */
.n-dropdown-body [class*="text-n-teal"]{
  color: #4ade80 !important;
}
/* Ícones em geral — herda branco */
.n-dropdown-body svg,
.n-dropdown-body [class^="i-"],
.n-dropdown-body [class*="i-lucide"],
.n-dropdown-body [class*="i-ph"]{
  color: #ffffff !important;
}

/* ---- Dropdown do botão Finalizar/Reabrir (.resolve-actions) ----
   Esse dropdown está DENTRO do .sc-conv-header mas é um popup com fundo
   próprio (bg-n-alpha-3). Sem essa regra, herda 'color: white' do header
   e some no fundo claro. Solução: fundo escuro sólido vermelho-escuro + texto branco. */
.sc-conv-header .resolve-actions [class*="bg-n-alpha"],
.sc-conv-header .resolve-actions [class*="rounded-lg"][class*="shadow"],
.sc-conv-header [class*="dropdown-pane"]{
  background: #7f1d1d !important;
  background-color: #7f1d1d !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}
/* Items do dropdown (li, button, span) — fundo transparente, texto branco,
   hover com tom mais escuro */
.sc-conv-header .resolve-actions [class*="bg-n-alpha"] li,
.sc-conv-header .resolve-actions [class*="bg-n-alpha"] button,
.sc-conv-header .resolve-actions [class*="bg-n-alpha"] a,
.sc-conv-header .resolve-actions [class*="rounded-lg"][class*="shadow"] li,
.sc-conv-header .resolve-actions [class*="rounded-lg"][class*="shadow"] button{
  background: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0.375rem !important;
}
.sc-conv-header .resolve-actions [class*="bg-n-alpha"] li:hover,
.sc-conv-header .resolve-actions [class*="bg-n-alpha"] button:hover,
.sc-conv-header .resolve-actions [class*="rounded-lg"][class*="shadow"] button:hover{
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ---- Logo da sidebar — aumentar tamanho (estava size-4 = 16px) ----
   Mira no componente Logo da sidebar (img dentro de div.size-6 no header). */
.sc-sidebar .size-6 > img,
.sc-sidebar .size-6 > svg,
.sc-sidebar img[class*="size-4"],
.sc-sidebar svg[class*="size-4"]{
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}
/* Container precisa crescer junto pro logo aparecer inteiro */
.sc-sidebar .size-6:has(> img),
.sc-sidebar .size-6:has(> svg){
  width: 32px !important;
  height: 32px !important;
}

/* ---- Logo Info Sete no centro do EmptyState ----
   Substitui no-chat.svg / no-chat-dark.svg pelo logo Info Sete.
   Light: logo.png (Info Sete colorida/preta), Dark: logo_dark.png (Info Sete branca). */
/* Vite renomeia assets com hash (ex: no-chat-okxWD-4P.svg) — seletor sem .svg */
img[src*="no-chat"]{
  visibility: hidden !important;
  position: relative;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}
/* Adiciona logo Info Sete via pseudo-element APENAS no DIRECT parent do img,
   pra não duplicar (EmptyState.vue aninha divs com a mesma classe). */
.flex.flex-col.items-center.justify-center.h-full:has(> img[src*="no-chat"]){
  position: relative;
}
.flex.flex-col.items-center.justify-center.h-full:has(> img[src*="no-chat"])::before{
  content: "";
  display: block;
  width: 220px;
  height: 220px;
  background-image: url("/brand-assets/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 1rem auto;
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],[data-color-scheme="dark"]) .flex.flex-col.items-center.justify-center.h-full:has(> img[src*="no-chat"])::before{
  background-image: url("/brand-assets/logo_dark.png");
}

/* ---- Pílulas de quick-replies/atalhos do composer ----
   Os chips /LIBERAÇÃO /ALMOÇO /APP OLÉ TV ficam dentro do .sc-composer,
   são botões/links pill cinza. Aplicar mesmo padrão vermelho institucional
   dos outros botões primary do app. */
.sc-composer button[class*="rounded-full"]:not([type="submit"]):not([class*="bg-n-brand"]):not(.sc-mode-toggle),
.sc-composer a[class*="rounded-full"]:not(.sc-mode-toggle),
.sc-composer [class*="canned-response"] button,
.sc-composer [class*="shortcut"]{
  background: rgba(209, 0, 0, 0.08) !important;
  color: #d10000 !important;
  border: 1px solid rgba(209, 0, 0, 0.2) !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.01em !important;
  padding: 0.25rem 0.75rem !important;
  transition: all 120ms ease !important;
}
.sc-composer button[class*="rounded-full"]:not([type="submit"]):not([class*="bg-n-brand"]):not(.sc-mode-toggle):hover,
.sc-composer a[class*="rounded-full"]:not(.sc-mode-toggle):hover,
.sc-composer [class*="canned-response"] button:hover{
  background: rgba(209, 0, 0, 0.15) !important;
  border-color: rgba(209, 0, 0, 0.4) !important;
  transform: translateY(-1px);
}
:is(body.dark,html.dark,html[style*="color-scheme:dark"],[data-color-scheme="dark"]) .sc-composer button[class*="rounded-full"]:not([type="submit"]):not([class*="bg-n-brand"]):not(.sc-mode-toggle),
:is(body.dark,html.dark,html[style*="color-scheme:dark"],[data-color-scheme="dark"]) .sc-composer a[class*="rounded-full"]:not(.sc-mode-toggle){
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ---- Tooltip v-popper — limitar largura ----
   Algumas regras agressivas (display:grid no composer, seletores amplos)
   parecem estar afetando os tooltips Vue popper, esticando lateralmente.
   Reset explícito + max-width pequeno e estilo Apple-like compacto. */
.v-popper__popper,
.v-popper__popper.v-popper--theme-tooltip{
  max-width: 240px !important;
  width: auto !important;
  min-width: 0 !important;
}
.v-popper__popper .v-popper__inner,
.v-popper--theme-tooltip .v-popper__inner{
  max-width: 240px !important;
  width: auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  background: rgba(0, 0, 0, 0.85) !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.v-popper__popper .v-popper__arrow-container{
  display: none !important;
}

/* ---- Popup de filtro de conversas (ConversationFilter) ----
   Teleportado pra um div #conversationFilterTeleportTarget que fica dentro
   da .sc-chat-list. O popup tem lg:w-[750px] mas estava sendo cortado pela
   largura da lista (~340px). Forçar tamanho + overflow visible no caminho. */
#conversationFilterTeleportTarget{
  width: max-content !important;
  z-index: 9999 !important;
}
#conversationFilterTeleportTarget > div{
  width: 720px !important;
  max-width: 90vw !important;
}
/* Permitir overflow visible APENAS no .sc-chat-list raiz e no PRIMEIRO filho
   (que é o header com os popups de filter/sort). NÃO mexer nos outros filhos
   pra preservar overflow-y:auto da .conversations-list (rolagem dos cards). */
.sc-chat-list{
  overflow: visible !important;
}
.sc-chat-list > *:first-child{
  overflow: visible !important;
}
/* Garantir que a lista de cards ainda rola normalmente */
.sc-chat-list .conversations-list{
  overflow-y: auto !important;
}

/* Quando o popup do filtro está ABERTO, eleva o stacking context da lista
   inteira pra ela cobrir a janela de chat (que normalmente vem depois no
   DOM e cobre o popup quando ele tenta vazar pra direita). */
.sc-chat-list{
  position: relative;
}
.sc-chat-list:has(#conversationFilterTeleportTarget > *),
.sc-chat-list:has([class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="rounded-xl"][class*="absolute"]){
  z-index: 50 !important;
}

/* Popup de ordenação (ConversationBasicFilter) — mesmo estilo do filtro:
   fundo branco translúcido com sombra Apple, contraste alto. */
.sc-chat-list [class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="w-72"][class*="rounded-xl"][class*="absolute"][class*="z-40"]{
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.2), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  z-index: 9999 !important;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .sc-chat-list [class*="bg-n-alpha-3"][class*="backdrop-blur-[100px]"][class*="w-72"][class*="rounded-xl"][class*="absolute"][class*="z-40"]{
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* O popup do filter usa bg-n-alpha-3 backdrop-blur — estilizar pra ter
   contraste claro (texto, fundo) sem herdar o tema do dropdown vermelho. */
#conversationFilterTeleportTarget [class*="bg-n-alpha-3"][class*="backdrop-blur"]{
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.2), 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) #conversationFilterTeleportTarget [class*="bg-n-alpha-3"][class*="backdrop-blur"]{
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Texto dentro do popup do filtro — força contraste */
#conversationFilterTeleportTarget [class*="bg-n-alpha-3"] *{
  color: inherit !important;
}

/* ---- Reorganização dos cantos do ConversationCard (pedido Bruno) ----
   Topo: InboxName ESQUERDA + assignee ("superchat") DIREITA
   Linha labels: labels ESQUERDA + (5mo • 1h + SLA amarelo) DIREITA
   Sem padding-bottom extra: a linha de SLA fica na própria linha dos labels. */
.sc-conv-card{
  position: relative;
}

/* Row meta (InboxName) volta pro fluxo natural — fica à esquerda no topo */
.sc-conv-card .flex.items-center.min-w-0.gap-1[class*="ml-2"],
.sc-conv-card .flex.items-center.min-w-0.gap-1[class*="mx-2"]{
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
}

/* SOMENTE o sub-bloco com assignee + priority sai pro canto superior direito */
.sc-conv-card .flex.items-baseline.gap-2.flex-shrink-0{
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.75rem !important;
  width: auto !important;
  z-index: 3;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.125rem 0.5rem !important;
  border-radius: 0.5rem !important;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .sc-conv-card .flex.items-baseline.gap-2.flex-shrink-0{
  background: rgba(15, 23, 42, 0.65);
}

/* SLACardLabel: dentro do CardLabels (slot #before), empurrar pra direita
   com margin-left auto + box amarelo destacado. */
.sc-conv-card [class*="flex"][class*="items-center"][class*="min-w-fit"][class*="gap-0.5"][class*="h-6"]{
  margin-left: auto !important;
  background: rgba(254, 240, 138, 0.85);
  padding: 0.125rem 0.4rem !important;
  border-radius: 0.5rem !important;
  height: auto !important;
  z-index: 2;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .sc-conv-card [class*="flex"][class*="items-center"][class*="min-w-fit"][class*="gap-0.5"][class*="h-6"]{
  background: rgba(120, 53, 15, 0.7);
}

/* TimeAgo (5mo • 1h) absolute → alinhar com o BOTTOM da linha do CardLabels.
   Pequeno offset à direita do SLA (que está com margin-left:auto na linha). */
.sc-conv-card .absolute.flex.flex-col[class*="right-3"],
.sc-conv-card [class*="absolute"][class*="flex-col"][class*="right-3"]{
  bottom: 0.625rem !important;
  top: auto !important;
  right: 0.75rem !important;
}

/* h4 nome do contato sem precisar reservar tanto espaço — só pra não bater
   no badge do assignee que está top-right */
.sc-conv-card h4.conversation--user,
.sc-conv-card [class*="conversation--user"]{
  padding-right: 5rem !important;
}

/* ---- Cantos arredondados dos painéis — só nos cantos INFERIORES ----
   Os cantos superiores ficavam "pegando" o fundo escuro do app-shell, parecia
   buraco visual. Manter só os inferiores onde combina com layout natural. */
.sc-sidebar{
  border-bottom-right-radius: 16px !important;
}
.sc-chat-list{
  border-bottom-right-radius: 16px !important;
}

/* ---- Botão "Voltar" no header da conversa — só seta, sem texto "Anterior" ----
   Esconde o texto via font-size:0 e estiliza como botão circular branco translúcido. */
.sc-conv-header button:has(> i.i-lucide-chevron-left){
  font-size: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0;
}
.sc-conv-header button:has(> i.i-lucide-chevron-left):hover{
  background: rgba(255, 255, 255, 0.32) !important;
}
.sc-conv-header button:has(> i.i-lucide-chevron-left) > i{
  font-size: 1.25rem !important;
  color: #ffffff !important;
  margin: 0 !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* ---- Menu flutuante de edição de texto (ProseMirror selection menubar) ----
   Especificidade ALTA: o SCSS interno do Editor.vue aplica size-4 (16px) nos
   menuitems via @apply Tailwind. Encadear .popover-prosemirror-menu.has-selection
   garante que vencemos a regra original. */
body .popover-prosemirror-menu.has-selection .ProseMirror-menubar{
  padding: 0.5rem 0.625rem !important;
  gap: 0.375rem !important;
  border-radius: 0.625rem !important;
  align-items: center !important;
}
body .popover-prosemirror-menu.has-selection .ProseMirror-menubar .ProseMirror-menuitem{
  width: 1.75rem !important;
  height: 1.75rem !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
  cursor: pointer;
  background: transparent !important;
  background-color: transparent !important;
}
body .popover-prosemirror-menu.has-selection .ProseMirror-menubar .ProseMirror-menuitem:hover{
  background: rgba(15, 23, 42, 0.08) !important;
}
/* Força transparente TUDO dentro do menuitem que não for o ícone/SVG.
   As "bolinhas vermelhas" pareciam vir de algum background/wrapper extra. */
body .popover-prosemirror-menu.has-selection .ProseMirror-menubar .ProseMirror-menuitem *{
  background: transparent !important;
  background-color: transparent !important;
}
body .popover-prosemirror-menu.has-selection .ProseMirror-menubar .ProseMirror-menuitem .ProseMirror-icon{
  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .popover-prosemirror-menu.has-selection .ProseMirror-menubar .ProseMirror-menuitem svg{
  width: 1.125rem !important;
  height: 1.125rem !important;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) body .popover-prosemirror-menu.has-selection .ProseMirror-menubar .ProseMirror-menuitem:hover{
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Header da conversa: nome do contato + canal na MESMA linha, separados por "-" ----
   Badge ÚNICO envolvendo nome + separador + canal. Fundo escuro translúcido
   no container pai. */
.sc-conv-header .flex.flex-col.items-start{
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgba(0, 0, 0, 0.18) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 0.5rem !important;
  height: auto !important;
}
/* Força TODOS os descendentes do badge unificado a serem transparentes,
   pra não criar segunda camada. EXCETO ícones Tailwind (i-lucide, i-ph, i-ri)
   que usam mask + background-color pra renderizar — esses precisam manter
   background pra serem visíveis. */
body .sc-conv-header .flex.flex-col.items-start > *:not([class^="i-"]):not([class*=" i-"]),
body .sc-conv-header .flex.flex-col.items-start > * > *:not([class^="i-"]):not([class*=" i-"]),
body .sc-conv-header .flex.flex-col.items-start > * > * > *:not([class^="i-"]):not([class*=" i-"]){
  background: transparent !important;
  background-color: transparent !important;
}
/* Ícone do canal (ChannelIcon) — branco e tamanho visível */
body .sc-conv-header .flex.flex-col.items-start [class^="i-"],
body .sc-conv-header .flex.flex-col.items-start [class*=" i-"],
body .sc-conv-header .flex.flex-col.items-start svg{
  background-color: #ffffff !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  width: 1rem !important;
  height: 1rem !important;
  opacity: 1 !important;
}
.sc-conv-header .conversation--header--actions,
.sc-conv-header .conversation--header--actions *{
  align-items: center !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
}
.sc-conv-header .conversation--header--actions{
  gap: 0.5rem !important;
}
/* Botão Finalizar/Reabrir e similares: remover outline branco que sobrava */
.sc-conv-header [class*="outline"],
.sc-conv-header [class*="ring"]{
  outline: 0 !important;
  outline-width: 0 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  box-shadow: none !important;
}
.sc-conv-header .conversation--header--actions::before{
  content: "—";
  margin: 0;
  opacity: 0.75;
  color: inherit;
  font-weight: 400;
}

/* Canal de atendimento como BADGE — mesmo padrão dos botões/avisos do header:
   fundo escuro translúcido, texto+ícone branco, padding maior pra ser visível. */
.sc-conv-header .conversation--header--actions{
  background: rgba(0, 0, 0, 0.18) !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: 0.5rem !important;
  height: auto !important;
  font-size: 0.8125rem !important;
}
.sc-conv-header .conversation--header--actions svg,
.sc-conv-header .conversation--header--actions [class^="i-"],
.sc-conv-header .conversation--header--actions [class*="i-lucide"],
.sc-conv-header .conversation--header--actions [class*="i-ph"],
.sc-conv-header .conversation--header--actions [class*="i-ri"]{
  color: #ffffff !important;
  fill: #ffffff !important;
  background-color: #ffffff !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  opacity: 1 !important;
}
.sc-conv-header .conversation--header--actions span,
.sc-conv-header .conversation--header--actions [class*="text-label"]{
  color: #ffffff !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Espaço respirável entre o botão voltar (←) e o avatar */
.sc-conv-header button:has(> i.i-lucide-chevron-left) + *,
.sc-conv-header button:has(> i.i-lucide-chevron-left) ~ [class*="rounded-full"]:first-of-type{
  margin-left: 0.5rem !important;
}
/* Espaço entre o avatar e o bloco de nome/canal */
.sc-conv-header > div:first-child > [class*="rounded-full"]{
  margin-right: 0.625rem !important;
}

/* ---- Popover de SLA (Faltas de SLA, Próximo tempo de resposta, etc) ----
   Estava muito translúcido, dificultando leitura. Aumentar opacidade + forçar
   cor do texto contrastante (não confundir com fundo branco). */
[class*="bg-n-solid-3"][class*="backdrop-blur-[100px]"][class*="w-96"][class*="rounded-xl"][class*="absolute"]{
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.25), 0 4px 16px rgba(15, 23, 42, 0.08) !important;
  color: #1e293b !important;
  width: 32rem !important;
  overflow-x: hidden !important;
}
[class*="bg-n-solid-3"][class*="backdrop-blur-[100px]"][class*="w-96"][class*="rounded-xl"][class*="absolute"] *{
  color: #1e293b !important;
}
[class*="bg-n-solid-3"][class*="backdrop-blur-[100px]"][class*="w-96"][class*="rounded-xl"][class*="absolute"] [class*="text-n-slate-11"]{
  color: #64748b !important;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) [class*="bg-n-solid-3"][class*="backdrop-blur-[100px]"][class*="w-96"][class*="rounded-xl"][class*="absolute"]{
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) [class*="bg-n-solid-3"][class*="backdrop-blur-[100px]"][class*="w-96"][class*="rounded-xl"][class*="absolute"] *{
  color: #f1f5f9 !important;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) [class*="bg-n-solid-3"][class*="backdrop-blur-[100px]"][class*="w-96"][class*="rounded-xl"][class*="absolute"] [class*="text-n-slate-11"]{
  color: #94a3b8 !important;
}

/* ---- Mention box (canned responses, mentions, variáveis) ----
   Teleportada pro body, centralizada como modal. Item selecionado/hover
   usa o vermelho institucional Info Sete (substitui o azul/cinza-Chatwoot). */
.mention--box-teleported{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  bottom: auto !important;
  right: auto !important;
  width: 36rem !important;
  max-width: 90vw !important;
  max-height: 70vh !important;
  z-index: 9999 !important;
  background: #7f1d1d !important;
  background-color: #7f1d1d !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  padding: 0.75rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Quick replies do composer: forçar wrap pra não criar scroll horizontal
   quando tem muitos chips. */
.sc-composer [class*="canned-response"],
.sc-composer .flex.flex-wrap,
.sc-composer > div:has(button[class*="rounded-full"]){
  flex-wrap: wrap !important;
  overflow-x: hidden !important;
}
/* Texto branco em TODOS os elementos internos (mesmo padrão do menu perfil) */
.mention--box-teleported,
.mention--box-teleported *{
  color: #ffffff !important;
}
.mention--box-teleported [class*="text-n-slate-11"]{
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Item hover/selecionado: branco translúcido sobre vermelho-bordô */
.mention--box-teleported button,
.mention--box-teleported li{
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0.5rem !important;
}
.mention--box-teleported button:hover,
.mention--box-teleported button[class*="bg-n-alpha-black2"],
.mention--box-teleported li:hover{
  background: rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}
.mention--box-teleported button:hover *,
.mention--box-teleported button[class*="bg-n-alpha-black2"] *,
.mention--box-teleported li:hover *{
  color: #ffffff !important;
}

/* ---- Emoji picker (EmojiInput) — centralizar como modal ----
   Teleportado pro body (igual mention-box e modal HSM). Padrão Info Sete:
   centro da tela, fundo branco translúcido, sombra Apple, com overlay
   escuro atrás (clicável pra fechar) e botão × no canto. */
.emoji-dialog-overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9998;
  cursor: pointer;
}
.emoji-dialog-teleported{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 22rem !important;
  height: auto !important;
  max-width: 90vw !important;
  max-height: 80vh !important;
  z-index: 9999 !important;
  background: #7f1d1d !important;
  background-color: #7f1d1d !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  outline: 0 !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

/* Texto interno branco (categoria title, NOT FOUND, etc) */
.emoji-dialog-teleported,
.emoji-dialog-teleported *{
  color: #ffffff !important;
}
.emoji-dialog-teleported [class*="text-n-slate-11"]{
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Footer da barra de categorias: esconder (criava largura extra e Bruno
   prefere atalho via search). Apenas search + grid de emojis. */
.emoji-dialog-teleported .emoji-dialog--footer{
  display: none !important;
}

/* Search input com contraste */
.emoji-dialog-teleported input[type="text"]{
  background: rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.emoji-dialog-teleported input[type="text"]::placeholder{
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Items (emoji buttons + category buttons) com hover branco translúcido */
.emoji-dialog-teleported button:hover,
.emoji-dialog-teleported .emoji--item:hover,
.emoji-dialog-teleported .active{
  background: rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.375rem !important;
}

/* Botão × de fechar no canto superior direito (branco sobre bordô) */
.emoji-dialog-close{
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 10;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  transition: background 120ms ease;
  text-align: center;
}
.emoji-dialog-close:hover{
  background: rgba(255, 255, 255, 0.28);
}

/* Search input com margem direita pra não colidir com o botão X */
.emoji-dialog-teleported input[type="text"]{
  margin-right: 2rem !important;
}

/* ---- Modal de histórico de conversas (ConversationHistoryModal) ----
   Teleportado pro body, centralizado, padrão Apple-style. Lista as conversas
   anteriores do contato atual quando agente clica no botão "Histórico" no
   ReplyTopPanel (ao lado do "expandir editor"). */
.conv-history-overlay{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9998;
  cursor: pointer;
}
.conv-history-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36rem;
  max-width: 92vw;
  height: auto;
  max-height: 80vh;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.875rem;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.25), 0 4px 16px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #1e293b;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .conv-history-modal{
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}
.conv-history-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: var(--sc7-primary-gradient);
  color: #ffffff;
}
.conv-history-modal__title{
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  color: #ffffff;
}
.conv-history-modal__close{
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  font-weight: 400;
  transition: background 120ms ease;
}
.conv-history-modal__close:hover{
  background: rgba(255, 255, 255, 0.32);
}
.conv-history-modal__body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
}
/* Modal de Ações da conversa: padding interno + espaçamento entre seções.
   Overflow visible no body pra dropdowns internos (agente, time, prioridade,
   etiqueta) abrirem livremente sem criar scrollbar interna. */
.conv-actions-modal{
  overflow: visible !important;
}
.conv-actions-modal__body{
  padding: 1rem 1.25rem !important;
  overflow: visible !important;
}
.conv-actions-modal__body > div > div{
  margin-bottom: 1rem;
}

/* Form de criar nota dentro do ContactNotesModal */
.contact-notes-modal__form{
  padding: 0.875rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-notes-modal__form{
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.contact-notes-modal__input{
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-family: inherit;
  color: #1e293b;
  resize: vertical;
  min-height: 4rem;
  outline: 0;
  transition: border-color 120ms ease, background 120ms ease;
  box-sizing: border-box;
}
.contact-notes-modal__input:focus{
  border-color: rgba(209, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.95);
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-notes-modal__input{
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-notes-modal__input:focus{
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
}
.contact-notes-modal__form-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 0.625rem;
}
.contact-notes-modal__save{
  background: linear-gradient(180deg, #e11d1d 0%, #b91c1c 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid rgba(127, 29, 29, 0.3);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px -2px rgba(209, 0, 0, 0.3);
}
.contact-notes-modal__save:hover:not(:disabled){
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.contact-notes-modal__save:disabled{
  filter: saturate(0.5) brightness(0.95);
  cursor: not-allowed;
  opacity: 0.6;
}
.conv-history-modal__item{
  padding: 0;
}
.conv-history-modal__date{
  padding: 0.5rem 1.25rem 0.125rem;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---- Modal Mensagens Prontas (CannedResponsesPickerModal) ----
   Reaproveita o esqueleto do .conv-history-modal (overlay+modal+header+body)
   e adiciona barra de busca + lista de itens clicáveis. */
.canned-picker-modal__body{
  display: flex;
  flex-direction: column;
  padding: 0;
}
.canned-picker-modal__search{
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .canned-picker-modal__search{
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.canned-picker-modal__input{
  width: 100%;
  padding: 0.5rem 0.875rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-family: inherit;
  color: #1e293b;
  outline: 0;
  transition: border-color 120ms ease, background 120ms ease;
  box-sizing: border-box;
}
.canned-picker-modal__input:focus{
  border-color: rgba(209, 0, 0, 0.4);
  background: rgba(255, 255, 255, 0.95);
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .canned-picker-modal__input{
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .canned-picker-modal__input:focus{
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(239, 68, 68, 0.4);
}
.canned-picker-modal__list{
  display: flex;
  flex-direction: column;
  padding: 0.375rem 0.75rem 0.75rem;
  gap: 0.125rem;
  overflow-x: hidden;
}
.canned-picker-modal__item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  transition: background 120ms ease;
}
.canned-picker-modal__item:hover{
  background: rgba(15, 23, 42, 0.04);
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .canned-picker-modal__item:hover{
  background: rgba(255, 255, 255, 0.06);
}
.canned-picker-modal__code{
  font-size: 0.8125rem;
  font-weight: 600;
  color: #b91c1c;
  letter-spacing: -0.005em;
  max-width: 100%;
  overflow-wrap: anywhere;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .canned-picker-modal__code{
  color: #fca5a5;
}
.canned-picker-modal__preview{
  font-size: 0.75rem;
  color: #64748b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .canned-picker-modal__preview{
  color: #94a3b8;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .conv-history-modal__date{
  color: #94a3b8;
}
/* Conversa atual destacada (linha vermelha à esquerda + fundo translúcido) */
.conv-history-modal__item--current{
  position: relative;
  background: rgba(209, 0, 0, 0.04);
}
.conv-history-modal__item--current::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sc7-primary);
}
.conv-history-modal__item--current .conv-history-modal__date{
  color: var(--sc7-primary);
  font-weight: 600;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .conv-history-modal__item--current{
  background: rgba(239, 68, 68, 0.08);
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .conv-history-modal__item--current .conv-history-modal__date{
  color: #fca5a5;
}

/* Transição suave da largura da sidebar (controlada pelo Vue collapse/expand). */
.sc-sidebar{
  transition: width 200ms ease !important;
}

/* ---- Modal Dados do cliente (ContactAttributesModal) ----
   Lista atributos básicos + customizados do contato, com botão de copiar
   ao lado de cada valor. Reutiliza padrão visual dos outros modais. */
.contact-attrs-modal__body{
  padding: 0.75rem 1rem 1rem !important;
}
.contact-attrs-modal__empty{
  padding: 2rem 1rem;
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
}
.contact-attrs-modal__section{
  margin-bottom: 1rem;
}
.contact-attrs-modal__section:last-child{
  margin-bottom: 0;
}
.contact-attrs-modal__section-title{
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #7f1d1d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem 0.5rem;
}
.contact-attrs-modal__section-icon{
  width: 0.875rem;
  height: 0.875rem;
  color: currentColor;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-attrs-modal__section-title{
  color: #fca5a5;
}
.contact-attrs-modal__row{
  display: grid;
  grid-template-columns: 9rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.contact-attrs-modal__row:last-child{
  border-bottom: 0;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-attrs-modal__row{
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
.contact-attrs-modal__row-label{
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 500;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-attrs-modal__row-label{
  color: #94a3b8;
}
.contact-attrs-modal__row-value{
  font-size: 0.875rem;
  color: #1e293b;
  font-weight: 500;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-attrs-modal__row-value{
  color: #f1f5f9;
}
.contact-attrs-modal__copy{
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.04);
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 120ms ease;
}
.contact-attrs-modal__copy:hover{
  background: rgba(209, 0, 0, 0.08);
  color: #d10000;
  border-color: rgba(209, 0, 0, 0.25);
}
.contact-attrs-modal__copy.is-copied{
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.3);
}
.contact-attrs-modal__copy span{
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-attrs-modal__copy{
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.08);
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-attrs-modal__copy:hover{
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}
.contact-attrs-modal__copy--danger{
  background: rgba(209, 0, 0, 0.08) !important;
  color: #d10000 !important;
  border-color: rgba(209, 0, 0, 0.25) !important;
}
.contact-attrs-modal__copy--danger:hover{
  background: rgba(209, 0, 0, 0.18) !important;
  border-color: rgba(209, 0, 0, 0.45) !important;
}
:is(body.dark,html.dark,[data-color-scheme="dark"]) .contact-attrs-modal__copy--danger{
  background: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* === FIM LAYER 7 === */