/* ═══════════════════════════════════════════════════════════════
   DPA CRM 2026 — CORPORATE DARK LARANJA DESIGN SYSTEM (EVO ADAPT)
   Fonte Oficial: globals.css (crm-dpa)
   Equilíbrio Cromático / Baixo Contraste para Conversas & Chat Mobile
   ═══════════════════════════════════════════════════════════════ */

:root, .dark, [data-theme="dark"] {
  /* ── Surfaces & Backgrounds (Carvão Suave & Aveludado) */
  --bg-base: #151718 !important;
  --bg-surface: #1a1d1e !important;
  --bg-mid: #1c1f20 !important;
  --bg-card: #202324 !important;
  --bg-card-hover: #26292a !important;

  /* ── Tailwind / shadcn Mappings */
  --background: #151718 !important;
  --foreground: #ededed !important;
  --card: #202324 !important;
  --card-foreground: #ededed !important;
  --popover: #1a1d1e !important;
  --popover-foreground: #ededed !important;

  /* ── Ação (Laranja Terracota Suavizado & Repousante — Sem Estridência) */
  --primary: #c85523 !important;
  --primary-hover: #b0491b !important;
  --primary-foreground: #ffffff !important;
  --primary-light: #f0a787 !important;
  --primary-glow: rgba(200, 85, 35, 0.12) !important;
  --accent: #c85523 !important;
  --accent-foreground: #ffffff !important;
  --ring: #c85523 !important;

  /* ── Secundários & Muted */
  --secondary: #1c1f20 !important;
  --secondary-foreground: #d5d3d1 !important;
  --muted: #1c1f20 !important;
  --muted-foreground: #a09d9a !important;
  --destructive: #e05353 !important;
  --destructive-foreground: #ffffff !important;

  /* ── Bordas & Inputs */
  --border: rgba(200, 85, 35, 0.18) !important;
  --input: #1c1f20 !important;

  /* ── Sidebar Tokens (Idêntico ao ColdMail Sidebar) */
  --sidebar: #151718 !important;
  --sidebar-background: #151718 !important;
  --sidebar-foreground: #d5d3d1 !important;
  --sidebar-primary: #c85523 !important;
  --sidebar-primary-foreground: #ffffff !important;
  --sidebar-accent: rgba(200, 85, 35, 0.08) !important;
  --sidebar-accent-foreground: #ffffff !important;
  --sidebar-border: rgba(255, 255, 255, 0.06) !important;
  --sidebar-ring: #c85523 !important;
}

/* ── Correção Crítica de Opacidades do Tailwind v4 (Evita Fundo Sólido) ── */
.bg-primary\/5 {
  background-color: rgba(200, 85, 35, 0.05) !important;
}
.bg-primary\/10 {
  background-color: rgba(200, 85, 35, 0.10) !important;
}
.bg-primary\/15 {
  background-color: rgba(200, 85, 35, 0.15) !important;
}
.bg-primary\/20 {
  background-color: rgba(200, 85, 35, 0.20) !important;
}
.bg-primary\/30 {
  background-color: rgba(200, 85, 35, 0.30) !important;
}
.bg-primary\/40 {
  background-color: rgba(200, 85, 35, 0.40) !important;
}

.border-primary\/10 {
  border-color: rgba(200, 85, 35, 0.10) !important;
}
.border-primary\/20 {
  border-color: rgba(200, 85, 35, 0.20) !important;
}
.border-primary\/30 {
  border-color: rgba(200, 85, 35, 0.30) !important;
}
.border-primary\/40 {
  border-color: rgba(200, 85, 35, 0.40) !important;
}
.border-primary\/50 {
  border-color: rgba(200, 85, 35, 0.50) !important;
}
.ring-primary\/20 {
  --tw-ring-color: rgba(200, 85, 35, 0.20) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BALÕES DE MENSAGEM DO CHAT (LEITURA CONFORTÁVEL & BAIXO CONTRASTE)
   Resolve o problema de legibilidade no Celular e Desktop
   ═══════════════════════════════════════════════════════════════ */

/* Mensagens Enviadas (Outgoing / Atendente / Bot) */
div[class*="rounded-tr-[4px]"],
div[class*="ml-auto"] > div[class*="rounded-lg"],
div[class*="ml-auto"] [class*="bg-primary"],
div[class*="rounded-lg"][class*="bg-primary"],
div[class*="rounded-lg"][class*="text-primary-foreground"] {
  background-color: #232729 !important;
  color: #ededed !important;
  border: 1px solid rgba(200, 85, 35, 0.28) !important;
  border-right: 3.5px solid #c85523 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Força leitura suave de todo o texto dentro da mensagem */
div[class*="rounded-tr-[4px]"] p,
div[class*="rounded-tr-[4px]"] span,
div[class*="rounded-tr-[4px]"] div,
div[class*="rounded-tr-[4px]"] .rich-content,
div[class*="rounded-tr-[4px]"] .prosemirror-editor,
div[class*="ml-auto"] > div[class*="rounded-lg"] p,
div[class*="ml-auto"] > div[class*="rounded-lg"] span,
div[class*="ml-auto"] > div[class*="rounded-lg"] div,
div[class*="rounded-lg"][class*="bg-primary"] p,
div[class*="rounded-lg"][class*="bg-primary"] span {
  color: #ededed !important;
}

/* Nome do Atendente/Remetente no topo da mensagem */
div[class*="rounded-tr-[4px]"] > div[class*="text-xs"],
div[class*="ml-auto"] [class*="text-xs"][class*="font-bold"],
div[class*="rounded-lg"][class*="bg-primary"] > div[class*="text-xs"] {
  color: #f0a787 !important;
  font-weight: 700 !important;
}

/* Timestamp e status no rodapé da mensagem */
div[class*="rounded-tr-[4px]"] [class*="text-muted-foreground"],
div[class*="rounded-tr-[4px]"] time,
div[class*="rounded-tr-[4px]"] span[class*="text-xs"],
div[class*="ml-auto"] span[class*="text-xs"] {
  color: #a09d9a !important;
}

/* Mensagens Recebidas (Incoming / Contato) */
div[class*="rounded-tl-md"],
div:not([class*="ml-auto"]) > div[class*="rounded-lg"][class*="bg-muted"] {
  background-color: #1a1d1e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: 3px solid rgba(255, 255, 255, 0.20) !important;
  color: #ededed !important;
}

/* ═══════════════════════════════════════════════════════════════
   PÍLULAS DE ESTÁGIO DO FUNIL / PIPELINE (BAIXO CONTRASTE)
   Substitui blocos sólidos berrantes por pílulas elegantes
   ═══════════════════════════════════════════════════════════════ */

div[class*="inline-flex"][class*="rounded-full"],
div[class*="inline-flex"][style*="background-color"],
div[class*="rounded-full"][style*="background-color"],
div[class*="rounded-md"][class*="bg-primary/10"],
div[class*="rounded-md"][class*="dark:bg-primary/20"] {
  background-color: rgba(200, 85, 35, 0.12) !important;
  border: 1px solid rgba(200, 85, 35, 0.28) !important;
  color: #f0a787 !important;
}

div[class*="inline-flex"][class*="rounded-full"] span,
div[class*="inline-flex"][class*="rounded-full"] svg,
div[class*="inline-flex"][style*="background-color"] span,
div[class*="inline-flex"][style*="background-color"] svg,
div[class*="rounded-full"][style*="background-color"] span,
div[class*="rounded-full"][style*="background-color"] svg {
  color: #f0a787 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARD DE CONVERSA SELECIONADO & HOVER NA LISTA LATERAL
   ═══════════════════════════════════════════════════════════════ */

/* Card selecionado / ativo */
div[class*="rounded-[14px]"].bg-primary\/10,
div[class*="rounded-[14px]"].bg-primary\/5,
div[class*="rounded-[14px]"].border-primary\/30,
div[class*="rounded-[14px]"][class*="border"]:has(.bg-primary) {
  background-color: #222527 !important;
  border-color: rgba(200, 85, 35, 0.35) !important;
  border-left: 3.5px solid #c85523 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Card não selecionado em estado normal */
div[class*="rounded-[14px]"].border-transparent {
  background-color: transparent !important;
}

/* Card em hover */
div[class*="rounded-[14px]"]:hover {
  background-color: #1d2021 !important;
  border-color: rgba(200, 85, 35, 0.20) !important;
}

/* Tipografia dentro do Card de Conversa */
div[class*="rounded-[14px]"] h4,
div[class*="rounded-[14px]"] [class*="font-semibold"],
div[class*="rounded-[14px]"] [class*="font-medium"],
div[class*="rounded-[14px]"] span[class*="text-foreground"] {
  color: #ededed !important;
}

div[class*="rounded-[14px]"] p,
div[class*="rounded-[14px]"] span[class*="text-muted"],
div[class*="rounded-[14px]"] [class*="text-muted-foreground"] {
  color: #a09d9a !important;
}

/* ═══════════════════════════════════════════════════════════════
   ESTRUTURA GLOBAL & TIPOGRAFIA
   ═══════════════════════════════════════════════════════════════ */

body, input, textarea, select, button {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .font-heading, .font-bold {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
}

body {
  background-color: #151718 !important;
  color: #ededed !important;
}

/* Sidebar lateral */
aside, [data-sidebar="sidebar"], .sidebar {
  background-color: #151718 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Topbar / Header */
header, .topbar {
  background-color: #1a1d1e !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Coluna de Listas de Conversas */
[data-tour="chat-conversations-list"],
.conversation-list,
[class*="conversation-list"] {
  background-color: #17191a !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Cards e Painéis */
.bg-card, [class*="bg-card"], .card, .panel {
  background-color: #202324 !important;
  border-color: rgba(200, 85, 35, 0.15) !important;
}

/* Botões Primários de Ação (Apenas botões reais de clique) */
button[class*="bg-primary"]:not([class*="rounded-[14px]"]):not([class*="rounded-full"][class*="px-2"]), 
.btn-primary, 
[role="button"][class*="bg-primary"]:not([class*="rounded-[14px]"]):not([class*="rounded-full"][class*="px-2"]) {
  background-color: #c85523 !important;
  color: #ffffff !important;
  border-color: #c85523 !important;
  font-weight: 700 !important;
  transition: all 0.15s ease !important;
}

button[class*="bg-primary"]:hover:not([class*="rounded-[14px]"]), 
.btn-primary:hover {
  background-color: #a84318 !important;
  box-shadow: 0 0 14px rgba(200, 85, 35, 0.35) !important;
}

/* Itens de Menu Ativos da Sidebar */
aside [data-active="true"], 
aside .active, 
aside [class*="bg-sidebar-accent"] {
  background-color: rgba(200, 85, 35, 0.10) !important;
  border-color: rgba(200, 85, 35, 0.35) !important;
  color: #ffffff !important;
}

/* Realce e Seleção de Texto */
::selection {
  background-color: #c85523 !important;
  color: #ffffff !important;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #151718;
}
::-webkit-scrollbar-thumb {
  background: #2a2e30;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #c85523;
}