/* ==========================================================================
   FocoProspecção B2B PRO - Design System & Modern Stylesheet
   ========================================================================== */

:root {
  /* Obsidian Dark Glass (Default) — vidro translucido com acento esmeralda neon */
  --bg-app: #0b0f17;
  --bg-app-gradient: radial-gradient(at 15% 0%, rgba(16, 185, 129, 0.06) 0px, transparent 55%),
                     radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.04) 0px, transparent 50%);
  --bg-sidebar: rgba(24, 32, 45, 0.82);
  --bg-card: rgba(24, 32, 45, 0.68);
  --bg-card-hover: rgba(32, 42, 58, 0.85);
  --bg-input: rgba(15, 20, 31, 0.9);
  --bg-modal: rgba(24, 32, 45, 0.88);
  --bg-drawer: rgba(24, 32, 45, 0.88);
  --bg-popover: #18202d;

  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(16, 185, 129, 0.4);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(16, 185, 129, 0.35);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-sub: #64748b;

  --primary: #10b981;
  --primary-hover: #059669;
  --primary-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --primary-glow: rgba(16, 185, 129, 0.35);

  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-indigo: #6366f1;
  --accent-rose: #f43f5e;
  --accent-purple: #8b5cf6;

  /* Soft Edge: cantos arredondados Premium */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.25);
  --backdrop-blur: blur(20px) saturate(180%);
  --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}

/* Light Theme — fundo slate/zinc corporativo com cards em branco puro (opaco, não
   jateado) para garantir contraste de alta legibilidade; o efeito de vidro translúcido
   fica só no tema escuro, onde não há queixa de contraste. */
body.light-theme {
  --bg-app: #f8fafc;
  --bg-app-gradient: none;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --bg-input: #ffffff;
  --bg-modal: #ffffff;
  --bg-drawer: #ffffff;
  --bg-popover: #ffffff;

  --border-color: #e2e8f0;
  --border-color-hover: rgba(5, 150, 105, 0.4);
  --glass-border: #e2e8f0;
  --glass-border-hover: rgba(5, 150, 105, 0.4);

  --text-main: #0f172a;
  --text-muted: #334155;
  --text-sub: #475569;

  --primary: #059669;
  --primary-hover: #047857;
  --primary-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
  --primary-glow: rgba(5, 150, 105, 0.25);

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 0 15px rgba(5, 150, 105, 0.18);
  --backdrop-blur: none;
}

/* Global Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-app);
  background-image: var(--bg-app-gradient);
  color: var(--text-main);
  line-height: 1.5;
  overflow-x: hidden;
  height: 100vh;
}

button,
input,
select,
textarea {
  font-family: inherit;
  color: inherit;
}

/* ==========================================================================
   Glassmorphism universal — vidro jateado nos paineis, cards e janelas
   flutuantes, nos dois temas (Obsidian Dark Glass / Clean Light Frosted).
   ========================================================================== */
.sidebar,
.topbar,
.inbox-col,
.stat-card,
.funil-caixa,
.table-card,
.config-card,
.instancia-card,
.cadence-rule-card,
.glass-card,
.drawer-panel,
.filtro-tags-menu,
.quick-replies-popup,
.status-card,
.coluna {
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  box-shadow: var(--shadow-card);
}

/* Utilitário genérico de visibilidade — várias telas (Inbox, modais, badges) alternam
   esta classe via JS; !important garante que sempre vence, independente do display
   base do componente (flex/grid/block). */
.hidden {
  display: none !important;
}

/* App Layout Grid */
.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ==========================================================================
   Sidebar Component
   ========================================================================== */
.sidebar {
  width: 250px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 20;
  overflow: hidden;
  transition: width var(--transition-normal), border-color var(--transition-normal);
}

.app-layout.sidebar-collapsed .sidebar {
  width: 0;
  border-right-color: transparent;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.logo-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--accent-indigo));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-glow);
}

.brand-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.3px;
  display: block;
}

.brand-highlight {
  color: var(--primary);
}

.brand-badge {
  font-size: 9px;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.sidebar-nav {
  padding: 12px 10px;
  flex: 1;
  overflow-y: auto;
  white-space: nowrap;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  padding: 14px 10px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: var(--transition-fast);
  margin-bottom: 2px;
  border-left: 3px solid transparent;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-sub);
  transition: var(--transition-fast);
}

.nav-item:hover {
  color: var(--text-main);
  background-color: var(--bg-card-hover);
}

.nav-item:hover svg {
  color: var(--primary);
}

.nav-item.active {
  color: var(--primary);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
  border-left-color: var(--primary);
  font-weight: 700;
}

.nav-item.active svg {
  color: var(--primary);
}

.sidebar-footer {
  padding: 14px;
  border-top: 1px solid var(--border-color);
  white-space: nowrap;
}

.status-card {
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
}

.status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.status-indicator.online {
  width: 8px;
  height: 8px;
  background-color: var(--accent-emerald);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-emerald);
}

.status-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

.status-details {
  font-size: 11px;
  color: var(--text-muted);
}

.status-row {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}

.usuario-logado-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 4px 0;
}

#select-cliente-visualizacao {
  width: 100%;
  font-size: 11px;
  padding: 7px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-top: 4px;
}

.usuario-logado-email {
  font-size: 11px;
  color: var(--text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-success {
  color: var(--accent-emerald);
}

.text-amber {
  color: var(--accent-amber);
}

.text-blue {
  color: var(--primary);
}

.text-emerald {
  color: var(--accent-emerald);
}

.text-indigo {
  color: var(--accent-indigo);
}

.text-muted {
  color: var(--text-muted);
}

/* ==========================================================================
   Main Wrapper & Topbar
   ========================================================================== */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.topbar {
  height: 42px;
  background-color: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  z-index: 10;
}

.faixa-visualizacao-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(99, 102, 241, 0.15);
  border-bottom: 1px solid rgba(99, 102, 241, 0.4);
  color: var(--accent-indigo);
  font-size: 12px;
  font-weight: 600;
}

.faixa-visualizacao-admin span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.faixa-visualizacao-admin svg {
  width: 14px;
  height: 14px;
}

.faixa-visualizacao-admin .btn-sm {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 6px;
  color: var(--accent-indigo);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.topbar-search {
  position: relative;
  width: 440px;
  max-width: 100%;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-sub);
}

.topbar-search input {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 42px 10px 38px;
  font-size: 13px;
  transition: var(--transition-fast);
}

.topbar-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.search-kbd {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-sub);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.btn-icon {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-icon:hover {
  color: var(--text-main);
  border-color: var(--border-color-hover);
  transform: translateY(-1px);
}

.btn-icon.agente-ia-ligado {
  background: rgba(16, 185, 129, 0.14);
  border-color: var(--primary);
  color: var(--primary);
}

/* Sino de notificações da topbar */
.notificacoes-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

#btn-notificacoes {
  position: relative;
}

#nav-notificacoes-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  margin-left: 0;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  padding: 0 4px;
  border: 2px solid var(--bg-sidebar);
}

#btn-toggle-som.som-desativado {
  opacity: 0.5;
}

.notificacoes-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 300;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.notificacoes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}

.btn-link:hover {
  text-decoration: underline;
}

.notificacoes-body {
  max-height: 420px;
  overflow-y: auto;
}

.notificacao-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.15s;
}

.notificacao-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.notificacao-item.nao-lida {
  background: rgba(99, 102, 241, 0.08);
}

.notificacao-item.nao-lida:hover {
  background: rgba(99, 102, 241, 0.14);
}

.notificacao-icone {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}

.notificacao-icone.whatsapp { background: rgba(16, 185, 129, 0.15); }
.notificacao-icone.instagram { background: rgba(217, 70, 239, 0.15); }
.notificacao-icone.messenger { background: rgba(59, 130, 246, 0.15); }
.notificacao-icone.lead { background: rgba(245, 158, 11, 0.15); }

.notificacao-info {
  flex: 1;
  min-width: 0;
}

.notificacao-titulo {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notificacao-texto {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notificacao-hora {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-primario {
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-primario svg {
  width: 16px;
  height: 16px;
}

.btn-primario:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-secundario {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-secundario:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-color-hover);
}

.glow-effect {
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

/* ==========================================================================
   Content Body & Views
   ========================================================================== */
.content-body {
  flex: 1;
  padding: 10px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.section-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: auto;
  gap: 16px;
}

.section-view.hidden {
  display: none !important;
}

/* Stats Cards Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition-fast);
}

.stat-card-clicavel {
  cursor: pointer;
}

.stat-card-clicavel:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-1px);
}

.stat-card-clicavel.stat-card-ativo {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.stat-card:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 17px;
  height: 17px;
}

.bg-blue {
  background: linear-gradient(135deg, #10b981, #047857);
}

.bg-emerald {
  background: linear-gradient(135deg, #10b981, #047857);
}

.bg-amber {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.bg-indigo {
  background: linear-gradient(135deg, #6366f1, #4338ca);
}

.bg-cyan {
  background: linear-gradient(135deg, #06b6d4, #0e7490);
}

.bg-green {
  background: linear-gradient(135deg, #22c55e, #15803d);
}

.bg-purple {
  background: linear-gradient(135deg, #a855f7, #7e22ce);
}

.bg-red {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.text-purple {
  color: #c084fc;
}

.dashboard-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
}

.dashboard-filtros select,
.dashboard-filtros input[type="date"] {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  color: inherit;
  font-size: 12px;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.stat-value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.stat-sub {
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.stat-sub svg {
  width: 12px;
  height: 12px;
}

/* Filter Pills Bar */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.funil-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.funil-ativo-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.etapas-vendas-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  max-height: 50vh;
  overflow-y: auto;
}

.etapa-vendas-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
}

.etapa-vendas-row .etapa-cor-input {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
}

.etapa-vendas-row .etapa-nome {
  flex: 1;
  font-weight: 600;
  color: var(--text-main);
}

.etapa-vendas-row .etapa-nome-input {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
}

.etapa-vendas-row .btn-icon.btn-sm[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.funil-switcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.funil-switcher-btn:hover {
  color: var(--text-main);
  border-color: var(--border-color-hover);
}

.funil-switcher-btn.active {
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
  border-color: rgba(16, 185, 129, 0.4);
}

.funil-switcher-btn svg {
  width: 16px;
  height: 16px;
}

.filter-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-label svg {
  width: 14px;
  height: 14px;
}

.chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.chip:hover {
  color: var(--text-main);
  border-color: var(--border-color-hover);
}

.chip.active {
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
  border-color: rgba(16, 185, 129, 0.4);
  font-weight: 600;
}

.last-updated {
  font-size: 11px;
  color: var(--text-sub);
}

.view-options {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ==========================================================================
   Kanban Board
   ========================================================================== */
.board-container {
  flex: 1;
  overflow-x: auto;
  padding-bottom: 12px;
}

.board {
  display: flex;
  gap: 16px;
  min-height: 520px;
  align-items: flex-start;
}

.coluna {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 250px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 270px);
}

.coluna-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coluna-titulo {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.coluna-count {
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.coluna-cards {
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 100px;
}

.coluna-acoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
}

.coluna-agente-select {
  width: 100%;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
}

.text-area-agendar {
  width: 100%;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-color);
  background: var(--bg-app);
  color: var(--text-main);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  margin-top: 14px;
}

.card-acoes-funil {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
}

/* Card Lead Component */
.card-lead {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 7px 9px;
  cursor: pointer;
  transition: var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.card-lead::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  opacity: 0;
  transition: var(--transition-fast);
}

.card-lead:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-lead:hover::before {
  opacity: 1;
}

.card-lead-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.card-lead-avatar {
  flex-shrink: 0;
}

.card-lead-avatar .avatar-img,
.card-lead-avatar .avatar-fallback {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.card-lead-header-info {
  flex: 1;
  min-width: 0;
}

.card-lead .nome {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-lead .sub-nicho {
  font-size: 11px;
  color: var(--text-sub);
}

.card-abrir-conversa {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.card-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.meta-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--bg-app);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-chip.has-decisor {
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
}

.meta-chip.has-cnpj {
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent-indigo);
}

.meta-chip.cadence-chip {
  background: rgba(245, 158, 11, 0.14);
  color: var(--accent-amber);
}

.meta-chip.meta-chip-valor {
  background: rgba(16, 185, 129, 0.14);
  color: var(--accent-emerald);
  font-weight: 700;
}

.editable-inline {
  cursor: text;
  border-bottom: 1px dashed transparent;
}

.editable-inline:hover {
  border-bottom-color: var(--primary);
}

.editable-inline-input {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--bg-app);
  border: 1px solid var(--primary);
  border-radius: 3px;
  padding: 1px 4px;
}

/* ==========================================================================
   Modals & Drawers
   ========================================================================== */
.custom-modal {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 540px;
  width: 90vw;
}

.custom-modal::backdrop {
  background: rgba(9, 13, 22, 0.75);
  backdrop-filter: blur(6px);
}

.glass-card {
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.modal-title {
  display: flex;
  gap: 14px;
}

.title-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--primary), var(--accent-indigo));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.modal-title h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.modal-title p {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-close {
  background: none;
  border: none;
  color: var(--text-sub);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: var(--transition-fast);
}

.btn-close:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
}

/* Form Controls */
.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.input-with-icon {
  position: relative;
}

.input-with-icon svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-sub);
}

.input-with-icon input {
  padding-left: 38px !important;
}

form input,
form select,
form textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-size: 12px;
  transition: var(--transition-fast);
}

form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chips-label {
  font-size: 11px;
  color: var(--text-sub);
}

.nicho-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.nicho-chip:hover {
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
  border-color: var(--primary);
}

.modal-info-box {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.modal-info-box svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Slide-Over Drawer Panel */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 13, 22, 0.7);
  backdrop-filter: blur(4px);
  z-index: 100;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.hidden,
.drawer-panel.hidden {
  display: none !important;
}

.drawer-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 520px;
  max-width: 90vw;
  background: var(--bg-drawer);
  border-left: 1px solid var(--border-color);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  z-index: 101;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.drawer-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.drawer-header-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.drawer-avatar-box {
  flex-shrink: 0;
}

.drawer-avatar-box .avatar-img,
.drawer-avatar-box .avatar-fallback {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.drawer-title-box h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 6px 0 2px;
}

.lead-sub {
  font-size: 12px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 4px;
}

.badge-status-lg {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
  border: 1px solid rgba(16, 185, 129, 0.3);
  display: inline-block;
}

.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  padding: 0 28px;
  background: rgba(0, 0, 0, 0.1);
}

.drawer-tab {
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-fast);
}

.drawer-tab svg {
  width: 16px;
  height: 16px;
}

.drawer-tab:hover {
  color: var(--text-main);
}

.drawer-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.agente-ia-canal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.drawer-content {
  padding: 28px;
  overflow-y: auto;
  flex: 1;
}

.tab-pane {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tab-pane.hidden {
  display: none !important;
}

.detail-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.info-label {
  font-size: 11px;
  color: var(--text-sub);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-label svg {
  width: 14px;
  height: 14px;
}

.info-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-all;
}

.info-val a {
  color: var(--primary);
  text-decoration: none;
}

.info-val a:hover {
  text-decoration: underline;
}

.divider {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 10px 0;
}

.form-section-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  padding: 12px;
  border-radius: var(--radius-md);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #475569;
  transition: .3s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: var(--primary);
}

input:checked+.slider:before {
  transform: translateX(16px);
}

.toggle-label {
  font-size: 12px;
  color: var(--text-muted);
}

.drawer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

/* CNPJ Box */
.cnpj-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cnpj-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.cnpj-header svg {
  width: 32px;
  height: 32px;
  color: var(--accent-indigo);
}

/* Timeline Component */
.cadence-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  padding-left: 20px;
}

.cadence-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-color);
}

.timeline-item {
  position: relative;
}

.timeline-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-drawer);
  border: 3px solid var(--text-sub);
}

.timeline-item.active .timeline-dot {
  border-color: var(--accent-emerald);
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);
}

.timeline-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}

.timeline-content p {
  font-size: 12px;
  color: var(--text-muted);
}

.badge-status-sm {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
}

.ad-thumbnail {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.filtros-relatorio-mensagens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.filtros-relatorio-mensagens input,
.filtros-relatorio-mensagens select {
  width: auto;
}

.badge-limite {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-app);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.badge-limite.limite-atingido {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Data Table Component */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 11.5px;
}

.data-table th {
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 10px;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

.data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
}

.lead-empresa-cel {
  cursor: pointer;
}

.lead-empresa-cel .sub-nicho {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 2px;
}

.telefone-linha {
  font-size: 13px;
}

.badge-higienizado {
  font-size: 11px;
  color: var(--accent-emerald);
  margin-top: 3px;
}

.btn-abrir-chat-mapeamento {
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 15px;
  font-weight: 800;
}

.section-header p {
  font-size: 13px;
  color: var(--text-muted);
}

/* Cadence Rules Grid */
.cadence-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.cadence-rule-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.rule-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 10px;
}

.cadence-rule-card h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

.cadence-rule-card p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.4;
}

.rule-meta {
  font-size: 11px;
  color: var(--text-sub);
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}

.agente-seletor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.agente-seletor-card:hover {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.05);
}

.agente-seletor-card > i {
  flex-shrink: 0;
  color: var(--primary);
}

.agente-seletor-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.agente-seletor-info strong {
  font-size: 14px;
}

.agente-seletor-info span {
  font-size: 12px;
  color: var(--text-muted);
}

.agente-seletor-divisor {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-sub);
  margin: 14px 0 10px;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.toast {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  box-shadow: var(--shadow-md);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeIn 0.25s ease;
}

.toast.success {
  border-left-color: var(--accent-emerald);
}

.toast.error {
  border-left-color: var(--accent-rose);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Gerenciador de Cadências
   ========================================================================== */
.dias-semana-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dias-semana-picker label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
}

.dias-semana-picker input {
  width: auto;
  accent-color: var(--primary);
}

.cadence-rule-card {
  cursor: pointer;
  transition: var(--transition-fast);
}

.cadence-rule-card:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-2px);
}

.cadence-rule-card.cadencia-inativa {
  opacity: 0.55;
}

.cadence-card-stats {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 10px;
}

.etapa-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}

.etapa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.etapa-card-header strong {
  font-size: 12px;
  color: var(--primary);
}

.etapa-card textarea {
  width: 100%;
  min-height: 70px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 8px;
}

.etapa-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.etapa-espera {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.etapa-espera input {
  width: 70px;
}

/* ==========================================================================
   Mapeamento & Enriquecimento
   ========================================================================== */
.mapeamento-auto-config {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 12px;
}

.auto-config-rows {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.auto-config-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auto-config-row select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-main);
}

.auto-config-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-muted);
}

.auto-config-label svg {
  width: 14px;
  height: 14px;
  color: var(--accent-amber);
}

.auto-config-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
}

.auto-config-toggle input {
  width: auto;
  accent-color: var(--primary);
}

/* ==========================================================================
   Mapeamento: 3 etapas de funil empilhadas (Google Maps -> Instagram -> BrasilAPI)
   ========================================================================== */
.funil-caixa {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--funil-cor, var(--primary));
  border-radius: var(--radius-lg);
  margin-bottom: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.funil-etapa-1 { --funil-cor: var(--primary); }
.funil-etapa-2 { --funil-cor: var(--accent-purple); }
.funil-etapa-3 { --funil-cor: var(--accent-amber); }

/* ==========================================================================
   Hunter Leads: Stepper de navegação + modo Abas (foco em 1 etapa) / Sanfona
   ========================================================================== */
.hunter-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 6px 10px;
  margin-bottom: 4px;
  box-shadow: var(--shadow-card);
}

.hunter-stepper-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hunter-stepper-seta {
  width: 14px;
  height: 14px;
  color: var(--text-sub);
  opacity: 0.6;
  flex-shrink: 0;
}

.hunter-stepper-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  white-space: nowrap;
}

.hunter-stepper-tab svg {
  width: 15px;
  height: 15px;
}

.hunter-stepper-tab:hover {
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.hunter-stepper-tab.active {
  color: #fff;
  background: var(--primary-gradient);
  border-color: transparent;
}

.hunter-stepper-count {
  background: rgba(0, 0, 0, 0.2);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.hunter-stepper-tab.active .hunter-stepper-count {
  background: rgba(255, 255, 255, 0.25);
}

/* Modo Abas (default): só a etapa ativa fica visível, em altura ampliada; sem setas
   de conexão entre caixas, já que só uma aparece por vez. */
.hunter-modo-abas .funil-conector {
  display: none;
}

.hunter-modo-abas .funil-caixa {
  display: none;
}

.hunter-modo-abas .funil-caixa.hunter-etapa-ativa {
  display: block;
}

.hunter-modo-abas .funil-caixa.hunter-etapa-ativa .funil-caixa-scroll {
  max-height: 70vh;
}

.hunter-leads-body .funil-caixa-scroll .data-table td,
.hunter-leads-body .funil-caixa-scroll .data-table th {
  padding: 12px 16px;
}

.hunter-banner-fechavel {
  position: relative;
  padding-right: 40px !important;
}

.hunter-banner-fechar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
}

.hunter-banner-fechar svg {
  width: 13px;
  height: 13px;
}

/* Seta indicando o sentido do fluxo entre uma etapa e a próxima. */
.funil-conector {
  display: flex;
  justify-content: center;
  margin: -2px 0;
  color: var(--text-sub);
  opacity: 0.7;
}

.funil-conector svg {
  width: 20px;
  height: 20px;
}

.funil-caixa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.15);
}

.funil-caixa-titulo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.funil-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--funil-cor, var(--primary));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.funil-caixa-titulo svg {
  width: 20px;
  height: 20px;
  color: var(--funil-cor, var(--primary));
  flex-shrink: 0;
}

.funil-caixa-titulo h3 {
  font-size: 14px;
  font-weight: 700;
}

.funil-caixa-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.funil-caixa-acoes select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
}

.funil-progress-box {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
}

.funil-progress-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.funil-progress-bar-bg {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.funil-progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), #34d399);
  transition: width 0.4s ease;
}

/* Rolagem interna própria de cada etapa (até ~460px) — a página em si também rola pra
   passar de uma etapa pra outra. */
.funil-caixa-scroll {
  max-height: 460px;
  overflow-y: auto;
  transition: max-height 0.25s ease;
}

.funil-caixa-scroll-expandida {
  max-height: 900px;
}

.funil-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
}

.funil-led.led-amarelo {
  background: var(--accent-amber);
}

.funil-led.led-azul {
  background: #3b82f6;
  animation: funil-led-pulso 1.4s ease-in-out infinite;
}

.funil-led.led-verde {
  background: var(--accent-emerald);
}

@keyframes funil-led-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.progresso-enriquecimento {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-sub);
  white-space: nowrap;
}

.progresso-spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary);
  flex-shrink: 0;
  animation: progresso-spinner-girar 0.7s linear infinite;
}

@keyframes progresso-spinner-girar {
  to { transform: rotate(360deg); }
}

.progresso-enriquecimento.concluido {
  color: var(--accent-emerald);
}

.progresso-enriquecimento.concluido svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.select-mover-etapa {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
}

.select-mover-etapa:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.funil-caixa-scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.mapeamento-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.15);
}

.mapeamento-select-all {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

.mapeamento-select-all input {
  width: auto;
  accent-color: var(--primary);
}

.mapeamento-ativar-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mapeamento-selecao-rapida {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.mapeamento-selecao-rapida select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12px;
}

.funil-status-linha {
  font-size: 11px;
  white-space: nowrap;
}

.mapeamento-ativar-box select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text-main);
}

.score-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  display: inline-block;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.score-badge.score-a {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #b45309 100%);
  color: #3b1e00;
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.score-badge.score-b {
  background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 45%, #475569 100%);
  color: #1e293b;
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 1px 3px rgba(148, 163, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.score-badge.score-c {
  background: linear-gradient(135deg, #f0c896 0%, #b45309 45%, #78350f 100%);
  color: #2b1300;
  border: 1px solid rgba(180, 83, 9, 0.5);
  box-shadow: 0 1px 3px rgba(180, 83, 9, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.score-badge.score-none {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-sub);
}

/* ==========================================================================
   Instâncias WhatsApp & Anti-Ban
   ========================================================================== */
.config-card,
.table-card,
.instancias-card {
  flex-shrink: 0;
}

.instancias-card {
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: max-content;
}

.sincronizar-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.08);
}

.sincronizar-periodo-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sincronizar-periodo-box label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.sincronizar-periodo-box select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-main);
}

.form-novo-usuario-completo {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
}

.form-novo-usuario-completo .dias-semana-picker {
  padding: 0 16px 16px;
}

.form-novo-usuario-completo select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-main);
}

.nova-instancia-form {
  display: flex;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.nova-instancia-form input {
  flex: 1;
  min-width: 200px;
}

.instancias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 18px;
}

.instancia-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: var(--transition-fast);
}

.instancia-card.instancia-inativa {
  opacity: 0.55;
}

.instancia-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.instancia-card-header strong {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-padrao {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.35);
  white-space: nowrap;
}

.instancia-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  margin-bottom: 14px;
}

.instancia-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-muted);
}

.instancia-row code {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text-main);
}

.instancia-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-sm {
  padding: 7px 10px;
  font-size: 11px;
}

.btn-sm svg {
  width: 14px;
  height: 14px;
}

.btn-danger {
  color: var(--accent-rose);
  border-color: rgba(244, 63, 94, 0.3);
}

.btn-danger:hover {
  background: rgba(244, 63, 94, 0.1);
  border-color: var(--accent-rose);
}

.anti-ban-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.anti-ban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.anti-ban-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.anti-ban-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.anti-ban-range input {
  width: 0;
  flex: 1;
}

.anti-ban-range span {
  font-size: 12px;
  color: var(--text-sub);
}

.anti-ban-toggle-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.anti-ban-toggle-card label {
  margin-bottom: 0;
}

.anti-ban-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Configurações: Cards de Integração (Apify / Instagram / Evolution API)
   ========================================================================== */
.config-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.config-card-header {
  margin-bottom: 16px;
}

.config-card-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
}

.config-card-header h3 svg {
  width: 17px;
  height: 17px;
  color: var(--primary);
}

.config-card-header p {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 4px;
}

.config-card-form .form-group {
  margin-bottom: 14px;
}

.senha-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.senha-input-box input {
  flex: 1;
  padding-right: 44px;
}

.senha-input-box:has(.btn-testar-chave) input {
  padding-right: 76px;
}

.senha-input-box .btn-toggle-senha {
  position: absolute;
  right: 4px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
}

.senha-input-box .btn-testar-chave {
  position: absolute;
  right: 36px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
}

.senha-input-box .btn-toggle-senha svg,
.senha-input-box .btn-testar-chave svg {
  width: 15px;
  height: 15px;
}

.chave-status-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
}

.chave-status-badge.status-ok { color: var(--accent-emerald); }
.chave-status-badge.status-cota { color: #f59e0b; }
.chave-status-badge.status-erro { color: var(--accent-rose); }

.config-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.config-card-footer-actions {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  margin-top: 16px;
  justify-content: flex-start;
}

.config-status-texto {
  font-size: 12px;
  color: var(--text-sub);
}

.sincronizar-footer {
  align-items: center;
}

.sincronizar-footer .config-status-texto {
  flex-basis: 100%;
}

.sincronizar-periodo-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sincronizar-periodo-box label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.sincronizar-periodo-box select {
  font-size: 12px;
  padding: 7px 10px;
  width: auto;
}

.instancias-card .sincronizar-footer {
  border-top: none;
  margin-top: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
}

/* ==========================================================================
   WhatsApp: Status Card (Sidebar) & Modal QR Code
   ========================================================================== */
.status-card-btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator.online {
  background-color: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald);
}

.status-indicator.offline {
  background-color: var(--accent-rose);
  box-shadow: 0 0 8px var(--accent-rose);
}

.status-indicator.connecting {
  background-color: var(--accent-amber);
  box-shadow: 0 0 8px var(--accent-amber);
  animation: pulse-dot 1s infinite;
}

.cnpj-alerta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-rose);
  font-size: 12px;
  white-space: nowrap;
}

.section-header-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agente-ia-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-size: 12.5px;
  font-weight: 600;
}

.anexo-treinamento-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.anexo-treinamento-box input[type="file"] {
  flex: 1;
  min-width: 200px;
}

.spin {
  animation: spin-girar 0.8s linear infinite;
}

@keyframes spin-girar {
  to { transform: rotate(360deg); }
}

.modelos-custo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.modelo-custo-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--bg-input);
  font-size: 11px;
}

.modelo-custo-card.disponivel {
  border-color: var(--primary);
  background: rgba(16, 185, 129, 0.08);
}

.modelo-custo-card.indisponivel {
  opacity: 0.55;
}

.modelo-custo-card-nome {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modelo-custo-card-preco {
  color: var(--text-sub);
  line-height: 1.5;
}

.modelo-custo-card-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

.modelo-custo-card.disponivel .modelo-custo-card-tag {
  background: rgba(16, 185, 129, 0.15);
  color: var(--primary);
}

.modelo-custo-card.indisponivel .modelo-custo-card-tag {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
}

.script-variacoes-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.script-variacao-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--bg-input);
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.script-variacao-item span {
  flex: 1;
}

.drive-picker-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
  margin-top: 10px;
}

.drive-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: 12.5px;
  transition: var(--transition-fast);
}

.drive-picker-item:hover {
  border-color: var(--border-color-hover);
  background: var(--bg-card-hover);
}

.drive-picker-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-ia-resumo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  background: rgba(168, 85, 247, 0.1);
  color: var(--text-sub);
  font-size: 11px;
  line-height: 1.4;
}

.card-ia-resumo svg {
  width: 11px;
  height: 11px;
  color: #a855f7;
  vertical-align: -1px;
}

.card-motivo-desqualificado {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.1);
  color: var(--text-sub);
  font-size: 11px;
  line-height: 1.4;
}

.card-motivo-desqualificado svg {
  width: 11px;
  height: 11px;
  color: #ef4444;
  vertical-align: -1px;
}

.card-nota-destaque {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.12);
  color: var(--accent-emerald);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.card-nota-destaque svg {
  width: 11px;
  height: 11px;
  vertical-align: -1px;
}

.lead-anexos-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.lead-anexo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-size: 12px;
}

.lead-anexo-row a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-main);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-anexo-row a:hover {
  color: var(--primary);
}

.lead-empresa-cel .btn-editar-lead-hunter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  margin-top: 2px;
}

.lead-empresa-cel .btn-editar-lead-hunter svg {
  width: 12px;
  height: 12px;
}

.modal-leads-hunter {
  max-width: 1100px;
  width: 94vw;
}

.leads-hunter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.leads-hunter-toolbar .topbar-search {
  width: 260px;
}

.input-filtro-leads-hunter {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 12.5px;
  width: 160px;
}

.leads-hunter-toolbar .btn-primario {
  margin-left: auto;
}

.leads-hunter-scroll {
  max-height: 55vh;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.table-leads-hunter th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

.leads-hunter-paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.qr-frame {
  width: 280px;
  height: 280px;
  background: #ffffff;
  padding: 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.qr-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.qr-loading {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  padding: 0 20px;
}

.qr-hint {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.whatsapp-conectado-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  color: var(--accent-emerald);
  text-align: center;
}

.whatsapp-conectado-info svg {
  width: 40px;
  height: 40px;
}

.whatsapp-conectado-info p {
  color: var(--text-main);
  font-size: 13px;
}

/* ==========================================================================
   WhatsApp Inbox: Layout de 3 Colunas
   ========================================================================== */
.inbox-layout {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  gap: 12px;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.inbox-col {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inbox-col-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inbox-col-header h3 {
  font-size: 15px;
  font-weight: 700;
}

.inbox-search input {
  height: 38px;
  font-size: 12px;
  color: var(--text-main);
  padding: 8px 12px 8px 34px;
}

.inbox-empty,
.inbox-empty-state {
  padding: 24px;
  text-align: center;
  color: var(--text-sub);
  font-size: 12px;
}

.inbox-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.inbox-empty-state svg {
  width: 42px;
  height: 42px;
  color: var(--text-sub);
  opacity: 0.5;
}

.inbox-empty-state p {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 220px;
}

/* Linha única e compacta de filtro do Inbox: caixa seletora combinada (canal/status) +
   tags + período (retrátil) + sincronizar — substitui a antiga barra de pílulas. */
.inbox-filtro-linha {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inbox-filtro-select {
  flex: 1;
  min-width: 0;
  height: 38px;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 12px;
}

.inbox-periodo-select {
  flex: 0 0 auto;
  width: 108px;
  height: 38px;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 6px;
  font-size: 12px;
}

/* Tabs de canal (Todos/WhatsApp/Instagram) -- atalho visual pro filtro mais usado, sem
   precisar abrir o dropdown de filtros avançados pra isso. */
.inbox-canal-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.inbox-canal-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
}

.inbox-canal-tab svg {
  width: 14px;
  height: 14px;
}

.inbox-canal-tab:hover {
  color: var(--text-main);
  border-color: var(--border-color-hover);
}

.inbox-canal-tab.active {
  color: #fff;
  border-color: transparent;
}

.inbox-canal-tab.active[data-canal-tab="todos"] { background: var(--primary); }
.inbox-canal-tab.active[data-canal-tab="whatsapp"] { background: #25d366; }
.inbox-canal-tab.active[data-canal-tab="instagram"] { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%); }

/* Contraste mais suave nos botões de ação da barra do Inbox (tags/sincronizar/marcar lidas). */
#inbox-filtros .btn-icon:hover {
  background: var(--bg-card-hover);
}


.inbox-sincronizar-box .btn-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.inbox-sincronizar-box .btn-icon svg {
  width: 14px;
  height: 14px;
}

.filtro-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 7px 10px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.filtro-pill:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.filtro-pill.active {
  background: var(--primary);
  color: #06231a;
}

.filtro-pill svg {
  width: 12px;
  height: 12px;
}

.filtro-pill-count {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 0;
  padding: 1px 6px;
  font-size: 10px;
}

.filtro-tags-dropdown {
  position: relative;
}

.filtro-tags-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 200px;
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 12px 24px rgba(0, 0, 0, 0.4));
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filtro-tags-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
}

.filtro-tags-menu-item:hover {
  background: var(--bg-card-hover);
}

.filtro-tags-menu-item.active {
  background: rgba(16, 185, 129, 0.15);
}

.tag-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Chips de tag coloridas (Kanban, painel CRM do Inbox, drawer do lead) */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
}

.tag-chip .tag-chip-remover {
  cursor: pointer;
  opacity: 0.8;
  font-size: 11px;
  line-height: 1;
}

.tag-chip .tag-chip-remover:hover {
  opacity: 1;
}

/* Seletor de tags permitidas do Agente IA (chips + dropdown das tags do cliente) */
.agente-tags-permitidas-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agente-tags-permitidas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
  padding: 6px 8px;
  border: 1px solid var(--border, #333);
  border-radius: 8px;
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
}

.agente-tags-permitidas-add select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  background: var(--bg-input, rgba(255, 255, 255, 0.04));
  color: inherit;
  font-size: 12px;
}

.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.6;
}

/* Popover flutuante de seleção/criação de tags (usado no Kanban, CRM do Inbox e drawer) */
.tag-seletor-popover {
  position: absolute;
  z-index: 200;
  min-width: 220px;
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  padding: 10px;
}

.tag-seletor-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.tag-seletor-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
}

.tag-seletor-item:hover {
  background: var(--bg-card-hover);
}

.tag-seletor-nova {
  display: flex;
  gap: 6px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}

.tag-seletor-nova input[type="text"] {
  flex: 1;
  font-size: 12px;
  padding: 6px 8px;
}

.tag-seletor-nova input[type="color"] {
  width: 32px;
  padding: 2px;
  border-radius: 6px;
}

.drawer-tags-box {
  margin: 16px 0;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.drawer-tags-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.drawer-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.card-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.tag-chip svg {
  width: 10px;
  height: 10px;
}

.card-tag-add-btn {
  cursor: pointer;
  border: 1px dashed var(--border-color);
  background: var(--bg-app);
  color: var(--text-muted);
}

.card-move-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.btn-card-move {
  width: 18px;
  height: 14px;
  line-height: 14px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-sub);
  font-size: 9px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-card-move:hover:not(:disabled) {
  color: var(--primary);
}

.btn-card-move:disabled {
  opacity: 0.25;
  cursor: default;
}

.card-lead.arrastando {
  opacity: 0.4;
}

.coluna.kanban-drop-target {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.card-tag-add-btn:hover {
  color: var(--text-main);
  border-color: var(--border-color-hover);
}

#btn-arquivar-chat.ativo-arquivado {
  color: var(--accent-amber);
  border-color: rgba(245, 158, 11, 0.4);
}

.instagram-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
}

/* Coluna 1: Lista de Conversas */
.chat-list {
  flex: 1;
  overflow-y: auto;
}

.chat-list-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition-fast);
}

.chat-list-item:hover {
  background: var(--bg-card-hover);
  box-shadow: inset 3px 0 0 0 var(--border-color-hover);
}

.chat-list-item.active {
  background: rgba(16, 185, 129, 0.1);
  border-left: 3px solid var(--primary);
}

.chat-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-list-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.chat-list-top strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-hora {
  font-size: 10px;
  color: var(--text-sub);
  flex-shrink: 0;
}

.chat-list-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.chat-list-preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-name-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.chat-list-name-wrapper strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-username {
  color: var(--text-muted-2, #9ca3af);
  font-weight: 500;
  font-size: 11px;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.chat-unread-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.55);
}

.chat-list-nao-lida-grupo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.btn-marcar-lida-lista {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-app);
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: var(--transition-fast);
}

.btn-marcar-lida-lista svg {
  width: 11px;
  height: 11px;
}

.chat-list-item:hover .btn-marcar-lida-lista {
  opacity: 1;
}

.btn-marcar-lida-lista:hover {
  color: var(--primary);
  border-color: var(--border-color-hover);
}

/* Badge de contagem agregada na sidebar (item "Inbox Omnichannel") */
.nav-badge {
  margin-left: auto;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-header-info {
  flex: 1;
  min-width: 0;
}

/* Avatares (foto de perfil com fallback de iniciais) */
.chat-avatar-box,
.crm-avatar-lg {
  flex-shrink: 0;
  position: relative;
}

/* Selo de canal no canto do avatar -- cor identifica a origem à primeira vista, sem
   precisar ler o texto (verde = WhatsApp, gradiente rosa/roxo = Instagram). */
.chat-avatar-canal-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-card);
  color: #fff;
}

.chat-avatar-canal-badge svg {
  width: 9px;
  height: 9px;
  stroke-width: 3px;
}

.chat-avatar-canal-badge.canal-whatsapp {
  background: #25d366;
}

.chat-avatar-canal-badge.canal-instagram {
  background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%);
}

.chat-avatar-canal-badge.canal-messenger {
  background: linear-gradient(135deg, #00b2ff 0%, #006aff 55%, #a033ff 100%);
}

.avatar-img,
.avatar-fallback {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--accent-indigo));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.avatar-img.avatar-lg,
.avatar-fallback.avatar-lg {
  width: 96px;
  height: 96px;
  font-size: 28px;
  border-radius: 0;
}

/* Coluna 2: Janela de Chat */
.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-window-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-window-header strong {
  display: block;
  font-size: 14px;
}

.chat-window-header span {
  font-size: 11px;
}

.btn-voltar-chats-mobile,
.btn-ver-crm-mobile,
#btn-mobile-menu {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.08);
}

.chat-bubble-row {
  display: flex;
}

.chat-bubble-row.in {
  justify-content: flex-start;
}

.chat-bubble-row.out {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 68%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  margin: 4px 0;
  position: relative;
  font-size: 13px;
}

.chat-bubble-row.in .chat-bubble {
  background: var(--bg-modal);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.chat-bubble-row.out .chat-bubble {
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.bubble-remetente {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 3px;
}

.bubble-caption {
  font-size: 12px;
  margin-top: 6px;
  opacity: 0.9;
}

.bubble-hora {
  display: block;
  font-size: 10px;
  opacity: 0.7;
  text-align: right;
  margin-top: 4px;
}

/* Respostas Rápidas: popup de autocomplete no chat + modal de gerenciamento */
.quick-replies-popup {
  position: relative;
  margin: 0 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 180px;
  overflow-y: auto;
}

.quick-replies-popup.hidden {
  display: none !important;
}

.quick-reply-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid var(--border-color);
}

.quick-reply-item:last-child {
  border-bottom: none;
}

.quick-reply-item:hover,
.quick-reply-item.active {
  background: rgba(16, 185, 129, 0.12);
}

.quick-reply-item strong {
  color: var(--primary);
}

.quick-reply-item span {
  display: block;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.respostas-rapidas-lista {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resposta-rapida-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
}

.resposta-rapida-row .atalho {
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.resposta-rapida-row .mensagem {
  flex: 1;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gravador de Áudio */
.gravando-audio-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-rose);
}

.gravando-audio-bar.hidden {
  display: none !important;
}

.gravando-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-rose);
  animation: pulse-dot 1s infinite;
}

.btn-icon.gravando {
  background: var(--accent-rose);
  color: #fff;
  border-color: var(--accent-rose);
}

.paste-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-color);
}

.paste-preview-bar.hidden {
  display: none !important;
}

.paste-preview-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.paste-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paste-preview-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  padding: 2px;
  overflow: hidden;
}

.paste-preview-doc span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paste-preview-bar input {
  flex: 1;
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
}

.chat-input-bar input {
  flex: 1;
}

.agendadas-bar {
  padding: 8px 16px;
  border-top: 1px solid var(--border-color);
}

.followup-alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
}

.aviso-igaa {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 13px;
  line-height: 1.4;
  color: #b45309;
}

.aviso-igaa svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.aviso-igaa code {
  background: rgba(245, 158, 11, 0.18);
  border-radius: 4px;
  padding: 0 4px;
  font-size: 12px;
}

.followup-alert-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #b45309;
}

.followup-alert-info svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-cancelar-followup {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 6px;
  color: #b45309;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-cancelar-followup svg {
  width: 14px;
  height: 14px;
}

.agendadas-bar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.agendadas-bar-btn svg {
  width: 14px;
  height: 14px;
}

.agendar-preview {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.agendar-preview img {
  max-width: 100%;
  max-height: 160px;
  display: block;
  margin-top: 6px;
}

.item-agendado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  margin-bottom: 8px;
  background: var(--bg-input);
}

.item-agendado-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  min-width: 0;
}

.item-agendado-conteudo {
  color: var(--text-main);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-agendado-data {
  color: var(--text-muted);
}

.item-agendado-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  color: var(--text-sub);
}

.item-agendado-status.status-erro {
  color: var(--accent-rose);
}

.btn-send {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}

.btn-send:hover {
  background: var(--primary-hover);
}

/* Player de Áudio Customizado */
.audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}

.audio-play-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(16, 185, 129, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.audio-play-btn svg {
  width: 14px;
  height: 14px;
}

.audio-progress-track {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.chat-bubble-row.in .audio-progress-track {
  background: rgba(255, 255, 255, 0.12);
}

.audio-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-emerald);
  border-radius: 4px;
}

.audio-time {
  font-size: 10px;
  min-width: 32px;
  opacity: 0.85;
}

.audio-player.audio-carregando .audio-play-btn {
  opacity: 0.6;
  cursor: wait;
}

.audio-player.audio-erro .audio-play-btn {
  background: rgba(239, 68, 68, 0.85);
  cursor: not-allowed;
}

.audio-player.audio-erro .audio-time {
  color: #ef4444;
  opacity: 1;
}

.audio-speed-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-transcrever-audio {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-transcrever-audio svg {
  width: 13px;
  height: 13px;
}

.audio-transcricao {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
}

/* Player de Vídeo (thumb + lightbox) */
.video-thumb {
  position: relative;
  width: 220px;
  max-width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.video-thumb video {
  width: 100%;
  display: block;
  pointer-events: none;
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.video-play-overlay svg {
  width: 36px;
  height: 36px;
  color: #fff;
}

/* Visualizador de Imagens */
.chat-image {
  max-width: 240px;
  max-height: 240px;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  display: block;
}

.chat-document {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

/* Lightbox: Imagem / Vídeo em Tela Cheia */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.hidden {
  display: none !important;
}

.lightbox-content img,
.lightbox-content video {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Coluna 3: Painel CRM do Contato */
.inbox-col-crm {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.crm-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crm-mobile-header {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.crm-panel-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.crm-nome-editavel {
  display: flex;
  align-items: center;
  gap: 6px;
}

.crm-nome-editavel .btn-icon.btn-sm {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.crm-nome-editavel .btn-icon.btn-sm svg {
  width: 13px;
  height: 13px;
}

.crm-panel-header h3 {
  font-size: 16px;
  font-weight: 700;
}

.crm-badge-funil {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.crm-info-extra {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.crm-info-bio {
  font-size: 12px;
  color: var(--text-sub);
  white-space: pre-wrap;
  margin: 0 0 6px;
}

.crm-info-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  word-break: break-all;
}

.crm-info-link:hover {
  text-decoration: underline;
}

.crm-info-instancia {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 14px;
}

.crm-btn-funil,
.crm-btn-detalhe {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   Otimização Mobile Estilo WhatsApp (<=860px): menu lateral vira gaveta
   sobreposta e o Inbox mostra uma coluna por vez (lista → conversa → dados
   do contato), igual ao app do WhatsApp — em vez do grid de 3 colunas fixas
   do desktop. Kanban, tabelas e modais já eram razoavelmente responsivos
   (scroll horizontal / grid auto-fit / max-width:90vw) e não precisaram de
   ajuste extra nessa etapa.
   ========================================================================== */
@media (max-width: 860px) {
  #btn-mobile-menu {
    display: flex;
  }

  #btn-toggle-sidebar,
  #btn-expand-sidebar {
    display: none;
  }

  .topbar {
    gap: 8px;
    padding: 0 10px;
  }

  .topbar-search {
    flex: 1;
    min-width: 0;
  }

  .search-kbd {
    display: none;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

  /* No desktop essa classe zera a largura da sidebar; no mobile a sidebar já
     é fixed/off-canvas por padrão, então neutraliza esse comportamento aqui. */
  .app-layout.sidebar-collapsed .sidebar {
    width: 260px;
  }

  .app-layout.sidebar-mobile-aberta .sidebar {
    transform: translateX(0);
  }

  .app-layout.sidebar-mobile-aberta .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 19;
  }

  /* Inbox estilo WhatsApp: uma coluna por vez */
  .inbox-layout {
    display: block;
    position: relative;
    height: 100%;
  }

  .inbox-col-chats,
  .inbox-col-messages,
  .inbox-col-crm {
    display: none;
    height: 100%;
    border-radius: 0;
  }

  .inbox-layout:not(.mostrar-chat):not(.mostrar-crm) .inbox-col-chats {
    display: flex;
  }

  .inbox-layout.mostrar-chat .inbox-col-messages {
    display: flex;
  }

  .inbox-layout.mostrar-crm .inbox-col-crm {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 30;
    border-radius: 0;
  }

  .btn-voltar-chats-mobile,
  .btn-ver-crm-mobile {
    display: flex;
  }

  .crm-mobile-header {
    display: flex;
  }

  .chat-window-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }

  .chat-header-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 4px;
  }

  .btn-premium {
    padding: 6px 10px;
    font-size: 11px;
    gap: 4px;
  }

  .btn-premium i {
    width: 14px;
    height: 14px;
  }

  .coluna {
    max-height: calc(100vh - 220px);
  }
}

/* ---------- Créditos de IA ---------- */
.creditos-ia-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 18px 6px;
}

.credito-box {
  background: var(--bg-input, rgba(148, 163, 184, 0.08));
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.credito-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}

.credito-valor {
  font-size: 18px;
  font-weight: 700;
}

.creditos-ia-por-agente {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.creditos-ia-por-agente-titulo {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-bottom: 2px;
}

.creditos-ia-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.06);
  font-size: 13px;
}

.creditos-ia-linha-nome {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creditos-ia-linha-valores {
  white-space: nowrap;
  opacity: 0.85;
}

/* === Custom Premium Design Elements === */
.btn-premium {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-xl);
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.btn-premium:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  color: var(--primary);
}

.btn-premium i {
  width: 16px;
  height: 16px;
}

.btn-premium.agente-ia-ligado {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.1);
}


/* ==========================================================================
   Serena IA View Layout Styles
   ========================================================================== */

.serena-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  height: calc(100vh - 180px);
  padding: 10px 0;
}

.serena-study-panel {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.serena-study-tabs {
  width: 250px;
  border-right: 1px solid var(--border-color);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.12);
  overflow-y: auto;
}

.serena-study-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.serena-chat-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.serena-chat-header {
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.serena-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #a855f7;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: var(--shadow-glow);
}

.serena-chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, 0.05);
}

.serena-chat-input-area {
  padding: 12px 15px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--bg-card);
}

.serena-chat-input-area input {
  flex: 1;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}

.serena-chat-input-area input:focus {
  border-color: #a855f7;
}

.serena-tab-btn {
  transition: all 0.2s ease;
  border-left: 3px solid transparent !important;
}

.serena-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.serena-tab-btn.active {
  background: rgba(168, 85, 247, 0.12) !important;
  border-left: 3px solid #a855f7 !important;
  font-weight: 600;
  color: #c084fc !important;
}

/* ==========================================================================
   Layout Density Overrides ("diminuir textos e deixar mais compacto")
   ========================================================================== */

.chat-bubble {
  padding: 6px 10px !important;
  margin: 3px 0 !important;
  line-height: 1.4 !important;
}

.chat-bubble-row {
  margin-bottom: 2px !important;
}

.card-lead {
  padding: 10px !important;
  margin-bottom: 8px !important;
  gap: 6px !important;
}

.card-lead h4 {
  font-size: 13px !important;
  margin-bottom: 2px !important;
}

.card-lead-meta {
  margin-top: 4px !important;
  gap: 4px !important;
}

.meta-chip {
  padding: 2px 6px !important;
  font-size: 10px !important;
}


/* Prevent iOS auto-zoom on focus and optimize mobile navigation */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  .faixa-visualizacao-admin {
    display: none !important;
  }
  .topbar {
    padding: 6px 10px !important;
    gap: 8px !important;
  }
  #btn-nova-busca span {
    display: none !important;
  }
  #btn-nova-busca {
    padding: 6px 8px !important;
  }
}



.serena-study-sidebar {
  width: 240px;
  border-right: 1px solid var(--border-color);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0,0,0,0.15);
  overflow-y: auto;
}