/* ============================================================
   MegaZap Business — Dashboard CSS
   Fiel ao design de https://megazap.chat/index.html#/atendimentos/chat/
   ============================================================ */

/* ---- VARIÁVEIS ---- */
:root {
  color-scheme: light;

  /* Scrollbars integradas */
  --scrollbar-track: transparent;
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-thumb-hover: #94A3B8;

  /* Topbar — navy escuro exato do megazap.chat */
  --topbar-bg: #0E1633;
  --topbar-text: #FFFFFF;
  --topbar-height: 60px;

  /* Superfícies */
  --bg: #F0F2F5;
  --surface: #FFFFFF;
  --border: #E5E7EB;
  --border-light: #F3F4F6;

  /* Texto */
  --text: #111827;
  --text-muted: #6B7280;
  --text-light: #9CA3AF;

  /* Accent */
  --accent: #1B73C5;
  --accent-dark: #1558A0;
  --accent-contrast: #EBF5FB;
  --primary: #0F6E56;
  --primary-hover: #0b5240;

  /* Status/canal */
  --whatsapp: #25D366;
  --messenger: #0084FF;
  --instagram: #E1306C;

  /* Danger */
  --danger: #DC2626;

  /* Sidebar */
  --sidenav-collapsed: 68px;
  --sidenav-expanded: 300px;

  /* KPI gradientes — exatos do megazap */
  --kpi-teal-a: #14B8A6;
  --kpi-teal-b: #0891B2;
  --kpi-blue-a: #3B82F6;
  --kpi-blue-b: #06B6D4;
  --kpi-purple-a: #8B5CF6;
  --kpi-purple-b: #6366F1;
  --kpi-gray-a: #6B7280;
  --kpi-gray-b: #4B5563;
  --kpi-gold-a: #F59E0B;
  --kpi-gold-b: #EF4444;

  /* Conv list */
  --conv-selected: #EBF5FB;
  --unread-badge: #22C55E;
  --count-blue: #3B82F6;
}

/* ---- MODO ESCURO (DARK MODE) ---- */
[data-theme="dark"],
html[data-theme="dark"],
body.dark-theme {
  color-scheme: dark;

  --topbar-bg: #070B14;
  --topbar-text: #F3F4F6;

  --bg: #0A0E17;
  --surface: #111827;
  --border: #1F293D;
  --border-light: #162032;

  --text: #F9FAFB;
  --text-muted: #9CA3AF;
  --text-light: #6B7280;

  --accent: #00F5A0;
  --accent-dark: #0F6E56;
  --accent-contrast: rgba(0, 245, 160, 0.12);
  --primary: #10B981;
  --primary-hover: #059669;

  --conv-selected: #182234;
  --unread-badge: #10B981;

  /* Scrollbars integradas no Modo Escuro (Mescladas com o layout #0A0E17 / #111827) */
  --scrollbar-track: #0A0E17;
  --scrollbar-thumb: #1E293D;
  --scrollbar-thumb-hover: #0F6E56;
}

/* ============================================================
   BARRA DE ROLAGEM GLOBAL & MESCLADA (MODO CLARO E ESCURO)
   ============================================================ */
html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome, Edge, Safari, Opera */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease, border-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

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

/* Regras com especificidade máxima para o Modo Escuro */
[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark-theme ::-webkit-scrollbar-track,
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0A0E17 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark-theme ::-webkit-scrollbar-thumb,
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #1E293D !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
body.dark-theme ::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #0F6E56 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
}

/* Estilos de superfícies para o Modo Escuro */
[data-theme="dark"] .app-screen,
[data-theme="dark"] .conversation-pane {
  background-color: var(--bg);
}
[data-theme="dark"] .empty-state {
  background: radial-gradient(circle at 50% 28%, #040711 0%, #020308 55%, #000000 100%) !important;
}

[data-theme="dark"] .topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .conv-sidebar,
[data-theme="dark"] .sidenav,
[data-theme="dark"] .conversation-header,
[data-theme="dark"] .conversation-footer,
[data-theme="dark"] .topbar-dropdown,
[data-theme="dark"] .compact-analytics-card,
[data-theme="dark"] .crm-col,
[data-theme="dark"] .report-card {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .conv-item {
  border-bottom-color: var(--border-light);
}
[data-theme="dark"] .conv-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .conv-item.active {
  background: var(--conv-selected);
}

[data-theme="dark"] .floating-chat-bubble {
  background: rgba(17, 24, 39, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: #F9FAFB;
}
[data-theme="dark"] .floating-chat-bubble:hover {
  border-color: rgba(0, 245, 160, 0.6);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 22px rgba(0, 245, 160, 0.25);
}

[data-theme="dark"] .bubble-message-body {
  background: rgba(10, 14, 23, 0.85);
  border-color: #1F293D;
  color: #E2E8F0;
}
[data-theme="dark"] .bubble-message-body.agent-reply {
  background: rgba(15, 110, 86, 0.22);
  border-color: rgba(0, 245, 160, 0.3);
  color: #D1FAE5;
}

[data-theme="dark"] .omni-display-title {
  color: #FFFFFF;
  text-shadow: 0 0 18px rgba(0, 245, 160, 0.25);
}

[data-theme="dark"] .omni-status-chip {
  background: rgba(0, 245, 160, 0.14);
  color: #00F5A0;
  border-color: rgba(0, 245, 160, 0.3);
}

[data-theme="dark"] .chip-pulse-dot {
  background: #00F5A0;
  box-shadow: 0 0 10px #00F5A0;
}

[data-theme="dark"] .op-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="dark"] .op-toggle-btn.active {
  background: rgba(0, 245, 160, 0.16);
  color: #00F5A0;
  border-color: rgba(0, 245, 160, 0.4);
}

[data-theme="dark"] .sim-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="dark"] .sim-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
[data-theme="dark"] .sim-btn.active {
  background: var(--surface);
  color: #fff;
  border-color: var(--accent);
}

[data-theme="dark"] .compact-channel-bar-bg,
[data-theme="dark"] .agent-row-bar-bg {
  background: rgba(255, 255, 255, 0.08);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Roboto, -apple-system, Inter, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }
.muted { color: var(--text-muted); }
.error-text { color: var(--danger); font-size: 12px; min-height: 16px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 36px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.login-logo-circle {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--topbar-bg);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
}

.login-logo h1 { font-size: 18px; font-weight: 600; color: var(--text); }
.login-card .muted { font-size: 13px; text-align: center; }

.login-card label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--text-muted); font-weight: 500;
}
.login-card input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  transition: border-color .15s;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card button[type=submit] {
  margin-top: 4px;
  padding: 11px;
  border: none; border-radius: 8px;
  background: var(--topbar-bg); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.login-card button[type=submit]:hover { background: var(--accent-dark); }
.login-signup-link { text-align: center; font-size: 12px; }


/* ============================================================
   APP SHELL
   ============================================================ */
.app-screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- TOPBAR ---- */
.topbar {
  height: var(--topbar-height);
  background: var(--topbar-bg);
  color: var(--topbar-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 0;
  flex-shrink: 0;
  z-index: 30;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.topbar-left { display: flex; align-items: center; gap: 0; }

.menu-toggle-btn {
  border: none; background: transparent; color: #fff;
  width: 44px; height: 60px; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.menu-toggle-btn:hover { background: rgba(255,255,255,.1); }

.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px 0 20px;
  height: 60px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.brand-circle {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; flex-shrink: 0;
}
.brand-name { font-weight: 600; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }

.topbar-right { display: flex; align-items: center; gap: 4px; }

.topbar-icon-btn {
  border: none; background: transparent; color: rgba(255,255,255,.85);
  width: 36px; height: 36px; border-radius: 8px;
  font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
  position: relative;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Ícone da Lua roxa vibrante no Modo Claro (Indica mudança para Modo Escuro) */
#topbar-theme-btn .fa-moon {
  color: #A855F7 !important;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.45));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease, color 0.2s ease;
}

#topbar-theme-btn:hover .fa-moon {
  color: #C084FC !important;
  transform: rotate(-12deg) scale(1.18);
  filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.75));
}

.topbar-bell { margin-right: 2px; }

.topbar-divider {
  width: 1px; height: 24px;
  background: rgba(255,255,255,.2);
  margin: 0 8px;
  flex-shrink: 0;
}

/* Availability toggle */
.switch { position: relative; width: 36px; height: 20px; display: inline-block; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.25);
  border-radius: 999px; cursor: pointer; transition: background .15s;
}
.slider::before {
  content: ""; position: absolute;
  width: 14px; height: 14px; left: 3px; top: 3px;
  background: white; border-radius: 50%; transition: transform .15s;
}
.switch input:checked + .slider { background: var(--unread-badge); }
.switch input:checked + .slider::before { transform: translateX(16px); }

.availability-label {
  font-size: 12px; color: rgba(255,255,255,.8);
  white-space: nowrap; margin: 0 8px 0 6px;
}

.topbar-user-info {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px; cursor: pointer;
  border-radius: 8px; height: 36px;
  transition: background .15s;
}
.topbar-user-info:hover { background: rgba(255,255,255,.12); }

.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  border: 2px solid rgba(255,255,255,.3);
}
.topbar-user-name { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9); white-space: nowrap; }

.topbar-logout { margin-left: 4px; color: rgba(255,255,255,.7); }
.topbar-logout:hover { color: #fff; background: rgba(255,255,255,.15); }


/* ============================================================
   APP BODY
   ============================================================ */
.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.sidenav-overlay { display: none; }

/* ============================================================
   SIDE NAV — 68px colapsado, 250px expandido (via toggle)
   ============================================================ */
.sidenav {
  width: var(--sidenav-collapsed);
  background: var(--surface);
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width .2s ease;
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 3px rgba(0,0,0,.04);
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.sidenav.open {
  width: var(--sidenav-expanded);
}

/* Scrollbar customizada */
.sidenav::-webkit-scrollbar { width: 4px; }
.sidenav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ---- Busca no topo ---- */
.sidenav-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  height: 52px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
}
.sidenav-search:hover {
  background: rgba(0, 0, 0, 0.02);
}
.sidenav-search i {
  font-size: 15px; color: var(--text-muted);
  flex-shrink: 0; width: 40px; text-align: center;
  cursor: pointer;
  transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), color .15s ease;
}
.sidenav-search:hover i {
  color: var(--accent);
  transform: scale(1.15);
}
.sidenav-search-input {
  flex: 1; border: none; outline: none;
  font-size: 13px; color: var(--text);
  background: transparent;
  white-space: nowrap;
  opacity: 0; transition: opacity .15s;
}
.sidenav.open .sidenav-search-input { opacity: 1; }

.sidenav-search-clear {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.sidenav-search-clear:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  transform: scale(1.1);
}
.sidenav-search-clear.hidden {
  display: none !important;
}

/* ---- Logo ---- */
.sidenav-logo { display: none; }

/* ---- Groups ---- */
.sidenav-groups { flex: 1; padding: 10px 0 0; overflow-x: hidden; }
.sidenav-group { margin-bottom: 8px; }

.sidenav-group-label {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--text-light); text-transform: uppercase;
  padding: 6px 0 6px 16px;
  white-space: nowrap;
  opacity: 0; transition: opacity .12s ease;
}
.sidenav.open .sidenav-group-label { opacity: .8; }

.sidenav-item {
  display: flex; align-items: center;
  border: none; background: none;
  padding: 0; height: 42px;
  margin: 2px 10px; width: calc(100% - 20px);
  cursor: pointer; color: var(--text);
  font-size: 13px; font-weight: 500;
  white-space: nowrap; border-radius: 8px;
  transition: background .12s, color .12s;
}
.sidenav-item:hover { background: rgba(0,0,0,.05); }
.sidenav-item.active {
  background: var(--accent-contrast);
  color: var(--accent);
  font-weight: 600;
}

.sidenav-icon {
  font-size: 17px; width: 48px; height: 42px; text-align: center;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.sidenav-item.active .sidenav-icon { color: var(--accent); opacity: 1; }
.sidenav-item:hover .sidenav-icon { color: var(--accent); opacity: 1; }

.sidenav-text {
  white-space: nowrap; opacity: 0;
  transition: opacity .12s ease;
  font-size: 13px;
}
.sidenav.open .sidenav-text { opacity: 1; }

/* ---- Footer: ajuda + usuário ---- */
.sidenav-footer {
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
  overflow: hidden;
  padding: 6px 0;
}

.sidenav-help {
  display: flex; align-items: center;
  height: 40px; margin: 4px 10px;
  background: #16A34A; color: #fff;
  text-decoration: none; font-size: 13px; font-weight: 600;
  white-space: nowrap; border-radius: 8px;
  overflow: hidden;
  transition: background .12s;
}
.sidenav-help .sidenav-icon { color: #fff; width: 48px; opacity: 1; }
.sidenav-help:hover { background: #15803D; text-decoration: none; }

.sidenav-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--border-light);
  overflow: hidden;
}
.sidenav-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  margin-left: 7px;
}
.sidenav.open .sidenav-user-avatar { margin-left: 0; }
.sidenav-user-meta {
  display: flex; flex-direction: column;
  min-width: 0;
  opacity: 0; transition: opacity .12s;
}
.sidenav.open .sidenav-user-meta { opacity: 1; }
.sidenav-user-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidenav-user-status { font-size: 11px; color: var(--text-muted); }


/* ============================================================
   MAIN
   ============================================================ */
.app-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---- Tab panels ---- */
.tab-panel { flex: 1; min-height: 0; display: flex; }
.tab-panel.hidden { display: none; }
#tab-atendimento.tab-panel { padding: 0; }
#tab-atendimento .layout { flex: 1; }

/* ============================================================
   ATENDIMENTO LAYOUT
   ============================================================ */
.layout { flex: 1; display: flex; min-height: 0; }

/* ---- Sidebar de conversas ---- */
.sidebar {
  width: 340px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 25;
  overflow: visible;
}

.notif-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FFF7ED;
  border-bottom: 1px solid #FED7AA;
  padding: 10px 14px;
  font-size: 12px; color: #92400E;
  flex-shrink: 0;
}
.notif-banner-icon { font-size: 14px; flex-shrink: 0; color: #F97316; }
.link-btn {
  border: none; background: none; padding: 0; margin-top: 2px;
  color: var(--accent); font-size: 12px; cursor: pointer; text-decoration: underline;
}

/* ---- Toolbar (busca + ação) ---- */
.sidebar-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}
.sidebar-search {
  flex: 1; min-width: 0; padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px;
  background: var(--bg); color: var(--text);
  box-sizing: border-box;
}
.sidebar-search:focus { outline: none; border-color: var(--accent); background: #fff; }

.sidebar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.icon-btn-toolbar {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 8px; width: 32px; height: 32px; flex-shrink: 0;
  cursor: pointer; font-size: 13px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.icon-btn-toolbar:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-contrast); }
.icon-btn-green {
  background: #16A34A !important; border-color: #16A34A !important; color: #fff !important;
}
.icon-btn-green:hover { background: #15803D !important; border-color: #15803D !important; }

/* ========================================================
   BARRA DE FILTROS ESTILO WHATSAPP WEB
   (Todas, Não lidas, Pendentes e Canais)
   ======================================================== */
.wpp-filter-bar {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--border, #f0f2f5);
  padding: 8px 10px;
  flex-shrink: 0;
  z-index: 10;
  gap: 4px;
  contain: layout style;
}

/* Botões de seta para passar os filtros pro lado estilo WhatsApp Web */
.wpp-scroll-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(11, 20, 26, 0.1);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #54656f;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 5;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, background-color 0.12s ease, opacity 0.15s ease;
  font-size: 11px;
  user-select: none;
  -webkit-user-select: none;
}

.wpp-scroll-arrow:hover {
  background: #ffffff;
  color: #111b21;
  transform: scale(1.06);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}

.wpp-scroll-arrow:active,
.wpp-scroll-arrow.is-holding {
  transform: scale(0.92);
  background: #e9edef;
}

.wpp-scroll-arrow.hidden {
  display: none !important;
}

/* Container de rolagem acelerado por GPU a 65+ FPS */
.wpp-filter-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  cursor: grab;
  padding: 2px 2px;
  will-change: scroll-position;
  transform: translateZ(0);
  contain: paint layout;
}

.wpp-filter-scroll.is-dragging {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  scroll-behavior: auto !important;
}

.wpp-filter-scroll.is-dragging * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.wpp-filter-scroll::-webkit-scrollbar {
  display: none;
}

/* Chip / Pílula arredondada padrão WhatsApp Web */
.wpp-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted, #54656f);
  background: #f0f2f5;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
  box-shadow: none;
}

.wpp-filter-chip:hover {
  background: #e9edef;
  color: #111b21;
}

.wpp-filter-chip:active {
  transform: scale(0.96);
}

/* Estado Ativo padrão WhatsApp Web (fundo verde claro suave #d9fdd3 com texto #008069) */
.wpp-filter-chip.active {
  background: #d9fdd3 !important;
  color: #008069 !important;
  font-weight: 500;
  border: none !important;
  box-shadow: none !important;
}

.wpp-filter-chip.active:hover {
  background: #cbf9c4 !important;
  color: #00705b !important;
}

/* Badges de contagem integradas aos chips estilo WhatsApp Web */
.wpp-chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: rgba(84, 101, 111, 0.14);
  color: #54656f;
  transition: background-color 0.14s, color 0.14s;
}

.wpp-chip-badge.hidden {
  display: none !important;
}

/* Badge quando o chip está ativo */
.wpp-filter-chip.active .wpp-chip-badge {
  background: #008069 !important;
  color: #ffffff !important;
}

/* Badge especial verde vibrante WhatsApp para Não Lidas (#25D366) */
.wpp-badge-unread {
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(37, 211, 102, 0.4);
}

.wpp-badge-blue {
  background: rgba(84, 101, 111, 0.14) !important;
  color: #54656f !important;
}

.wpp-filter-chip.active .wpp-badge-blue {
  background: #008069 !important;
  color: #FFFFFF !important;
}

.wpp-badge-green {
  background: #16a34a !important;
  color: #FFFFFF !important;
}

.wpp-badge-channel {
  background: rgba(84, 101, 111, 0.12);
  color: inherit;
}

/* Divisor vertical sutil entre abas e canais estilo WhatsApp */
.wpp-filter-divider {
  width: 1px;
  height: 16px;
  background: #e2e8f0;
  margin: 0 3px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Chips temáticas de Canais Omnichannel */
.wpp-chip-channel i {
  font-size: 13.5px;
  transition: transform 0.15s ease;
}

.wpp-chip-channel:hover i {
  transform: scale(1.15);
}

/* WhatsApp */
.wpp-chip-whatsapp i {
  color: #25D366;
}
.wpp-chip-whatsapp.active {
  background: #d9fdd3 !important;
  color: #008069 !important;
}

/* Instagram */
.wpp-chip-instagram i {
  color: #E1306C;
}
.wpp-chip-instagram.active {
  background: #fce7f3 !important;
  color: #be185d !important;
}

/* Messenger */
.wpp-chip-messenger i {
  color: #0084FF;
}
.wpp-chip-messenger.active {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

/* Compatibilidade legada para seletores .conv-tabs e .conv-tab */
.conv-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0 14px;
}
.conv-tab {
  cursor: pointer;
}
.count-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  font-weight: 700; min-width: 18px; text-align: center;
}
.count-badge-green { background: var(--unread-badge); color: #fff; }
.count-badge-blue { background: var(--count-blue); color: #fff; }

/* ---- Lista de conversas ---- */
.conv-list {
  list-style: none;
  padding: 6px 0;
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}
.conv-list::-webkit-scrollbar { width: 4px; }
.conv-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

#mine-list, #offers-list { padding: 6px 0; }

.conv-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background .1s;
  position: relative;
}
.conv-item:hover { background: #F9FAFB; }
.conv-item.selected { background: var(--conv-selected); }
.conv-item.selected::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent); border-radius: 0 2px 2px 0;
}

.conv-item-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  overflow: hidden;
  position: relative;
  user-select: none;
}
.avatar-photo-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.conv-item-body { min-width: 0; flex: 1; }

.conv-item-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 3px;
}
.conv-item-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.conv-item-time {
  font-size: 11px; color: var(--text-light);
  flex-shrink: 0; margin-left: 6px; white-space: nowrap;
}
.conv-item-preview {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.conv-item-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

.channel-pill {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  color: white; margin-top: 3px; letter-spacing: .01em;
}
.channel-pill.whatsapp { background: var(--whatsapp); }
.channel-pill.messenger { background: var(--messenger); }
.channel-pill.instagram { background: var(--instagram); }

.conv-item-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; color: #fff;
  margin-top: 4px; margin-right: 3px;
}

/* ============================================================
   CONVERSATION PANE
   ============================================================ */
.conversation-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  position: relative;
  z-index: 1;
}

/* ---- Estado vazio / dashboard ---- */
.empty-state {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: radial-gradient(circle at 50% 28%, #F8FAFC 0%, #F1F5F9 45%, #E2E8F0 80%, #CBD5E1 100%);
  user-select: none;
  -webkit-user-select: none;
}
.dashboard-view { padding: 20px 24px; }

/* ---- Conversa aberta ---- */
.conversation-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.conversation-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.conv-header-left { display: flex; align-items: center; gap: 12px; }
.mobile-back-btn { display: none; }
.conv-lead-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  overflow: hidden; position: relative;
}
.conv-lead-name { font-size: 15px; font-weight: 600; }
.conv-header-actions { display: flex; gap: 8px; }

.btn-danger-outline {
  border: 1px solid #FCA5A5;
  background: #FEF2F2; color: var(--danger);
  padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all .12s;
}
.btn-danger-outline:hover { background: #FEE2E2; border-color: var(--danger); }

/* ---- Botão Dados do Contato ---- */
.btn-contact-info {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s;
}
.btn-contact-info:hover {
  background: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-contact-info.active {
  background: var(--accent-contrast);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ---- Layout da conversa (Chat + Painel Lateral de Informações) ---- */
.conv-body-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.conv-chat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ---- Painel Lateral do Contato ---- */
.contact-info-panel {
  width: 290px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  transition: width .2s ease, transform .2s ease;
}
.contact-info-panel.hidden {
  display: none !important;
}
.contact-info-panel::-webkit-scrollbar { width: 4px; }
.contact-info-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.contact-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.contact-panel-header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.icon-btn-sm {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .1s;
}
.icon-btn-sm:hover {
  background: var(--bg);
  color: var(--text);
}

.contact-panel-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  border-radius: 12px;
}
.contact-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  overflow: hidden;
  position: relative;
}
.contact-hero-name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.contact-hero-badge-wrap {
  margin-top: 2px;
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px 14px;
}
.contact-detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}
.contact-detail-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.contact-detail-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.contact-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.contact-detail-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.contact-detail-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.contact-action-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
}
.contact-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-contrast);
}

.window-warning {
  background: #FFF7ED; color: #92400E;
  border-bottom: 1px solid #FED7AA;
  padding: 10px 20px; font-size: 12px;
  flex-shrink: 0;
}

.messages {
  flex: 1; overflow-y: auto; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg);
}
.messages::-webkit-scrollbar { width: 4px; }
.messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.message {
  max-width: 62%; padding: 10px 14px;
  font-size: 14px; line-height: 1.5; border-radius: 12px;
  position: relative;
}
.message.inbound {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px 12px 12px 12px;
}
.message.outbound {
  align-self: flex-end;
  background: var(--topbar-bg);
  color: white;
  border-radius: 12px 4px 12px 12px;
}
.message-time {
  font-size: 10px; opacity: .6; margin-top: 4px;
  display: block; text-align: right;
}

[data-theme="dark"] .messages {
  background: var(--bg);
}
[data-theme="dark"] .message.inbound {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .message.outbound {
  background: #0084FF;
  color: #FFFFFF;
}
[data-theme="dark"] .window-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #FBBF24;
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
}
[data-theme="dark"] .contact-info-panel {
  background: var(--surface);
  border-left-color: var(--border);
}
[data-theme="dark"] .contact-panel-header {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .contact-hero-card,
[data-theme="dark"] .contact-section-card {
  background: #141C2B;
  border-color: var(--border);
}
[data-theme="dark"] .contact-action-btn,
[data-theme="dark"] .btn-contact-info {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .btn-danger-outline {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.12);
  color: #F87171;
}
[data-theme="dark"] .btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #EF4444;
}

/* ---- Reply area ---- */
.reply-area {
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  position: relative;
}

.reply-form { padding: 12px 16px; }
.reply-form-inner {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px 6px 4px 4px;
}
.reply-form-inner:focus-within { border-color: var(--accent); }

.reply-icon-btn {
  border: none; background: transparent; color: var(--text-muted);
  width: 34px; height: 34px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .12s;
}
.reply-icon-btn:hover { background: var(--border); color: var(--text); }

#reply-input {
  flex: 1; border: none; outline: none;
  font-size: 14px; background: transparent; color: var(--text);
  padding: 6px 4px;
}

.reply-send-btn {
  border: none; border-radius: 8px;
  background: var(--topbar-bg); color: #fff;
  width: 36px; height: 36px; font-size: 14px;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.reply-send-btn:hover { background: var(--accent-dark); }

/* Quick reply dropdown */
.quick-reply-dropdown {
  position: absolute; bottom: 100%; left: 16px; right: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  max-height: 220px; overflow-y: auto;
  margin-bottom: 6px; z-index: 10;
}
.quick-reply-option {
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background .1s;
}
.quick-reply-option:last-child { border-bottom: none; }
.quick-reply-option:hover { background: var(--accent-contrast); }
.qr-shortcut { font-weight: 600; margin-right: 8px; color: var(--accent); }
.qr-preview { font-size: 12px; color: var(--text-muted); }


/* ============================================================
   KPI TILES — gradientes idênticos ao megazap
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.kpi-tile {
  border-radius: 10px; padding: 16px;
  color: #fff;
  display: flex; align-items: center; gap: 14px;
  min-height: 76px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .15s, box-shadow .15s;
}
.kpi-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.16); }

/* Gradientes por tipo */
.kpi-teal   { background: linear-gradient(135deg, var(--kpi-teal-a), var(--kpi-teal-b)); }
.kpi-blue   { background: linear-gradient(135deg, var(--kpi-blue-a), var(--kpi-blue-b)); }
.kpi-purple { background: linear-gradient(135deg, var(--kpi-purple-a), var(--kpi-purple-b)); }
.kpi-gray   { background: linear-gradient(135deg, var(--kpi-gray-a), var(--kpi-gray-b)); }
.kpi-gold   { background: linear-gradient(135deg, var(--kpi-gold-a), var(--kpi-gold-b)); }

/* Override para quando kpi está zerado */
.kpi-tile.kpi-zero { background: linear-gradient(135deg, #9CA3AF, #6B7280); }

.kpi-icon-wrap {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.kpi-content { display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-size: 10px; font-weight: 600; opacity: .8; letter-spacing: .05em; }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1; }


/* ============================================================
   PALCO DO HUB OMNICHANNEL ANIMADO & ANALYTICS COMPACTO
   ============================================================ */
.omni-stage-view {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: visible;
  padding: 10px 0 20px 0;
}

/* Canvas de Fundo Interativo (Rede Neural / Constelação cobrindo toda a área cinza) */
.omni-interactive-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

/* Barra de Controle de Simulação em Tempo Real */
.omni-simulation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 840px;
  z-index: 10;
  flex-wrap: wrap;
  gap: 10px;
}
/* Seletor Real de Disponibilidade do Atendente */
.omni-operator-toggle {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.op-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.op-toggle-btn:hover {
  color: var(--text);
}
.op-toggle-btn.active {
  background: var(--topbar-bg);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(14, 22, 51, 0.18);
}
.op-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.op-dot.green { background: #16A34A; box-shadow: 0 0 6px #16A34A; }
.op-dot.amber { background: #F59E0B; box-shadow: 0 0 6px #F59E0B; }

.omni-sim-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.omni-sim-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

.sim-btn {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.sim-btn:hover {
  transform: translateY(-1.5px);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.sim-btn.active {
  background: var(--topbar-bg);
  color: #FFFFFF;
  border-color: var(--topbar-bg);
  box-shadow: 0 2px 8px rgba(14, 22, 51, 0.2);
}
.sim-btn.active[data-sim-channel="whatsapp"] {
  background: #128C7E;
  border-color: #128C7E;
}
.sim-btn.active[data-sim-channel="instagram"] {
  background: linear-gradient(135deg, #833AB4, #FD1D1D);
  border-color: #833AB4;
}
.sim-btn.active[data-sim-channel="messenger"] {
  background: #0084FF;
  border-color: #0084FF;
}

.sim-btn-pulse {
  background: linear-gradient(135deg, #0E1633, #1B73C5);
  color: #FFFFFF;
  border-color: #1B73C5;
  animation: pulseSimBtn 3s infinite alternate;
}
@keyframes pulseSimBtn {
  0% { box-shadow: 0 0 0 0 rgba(27, 115, 197, 0.4); }
  70% { box-shadow: 0 0 0 8px rgba(27, 115, 197, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 115, 197, 0); }
}

/* PALCO 3D COM PERSPECTIVA */
.omni-3d-scene {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  perspective: 1200px;
  z-index: 5;
}

/* Palco da Experiência Visual / Animação com Suporte a 3D (Sem delay de CSS transition) */
.omni-hero-experience {
  position: relative;
  width: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
  padding: 16px 0;
  overflow: visible;
}

/* Brilho de Fundo Ambiental (Opção C: Galáxia Espiral Expandida) */
.omni-ambient-glow {
  position: absolute;
  width: 860px;
  height: 860px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.14) 0%, rgba(14, 165, 233, 0.09) 40%, rgba(168, 85, 247, 0.05) 65%, transparent 75%);
  pointer-events: none;
  animation: ambientBreath 9s ease-in-out infinite alternate;
  transform: translateZ(-35px);
}

@keyframes ambientBreath {
  0% { transform: translateZ(-35px) scale(0.92) rotate(0deg); opacity: 0.7; }
  100% { transform: translateZ(-35px) scale(1.1) rotate(25deg); opacity: 1; }
}

/* ---- Braços Espirais Volumétricos da Galáxia Expandida (Opção C: Galáxia Espiral Viva) ---- */
.spiral-galaxy-arms {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 880px;
  height: 880px;
  margin-top: -440px;
  margin-left: -440px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(16, 185, 129, 0.16) 0deg,
    transparent 42deg,
    rgba(14, 165, 233, 0.16) 120deg,
    transparent 162deg,
    rgba(168, 85, 247, 0.13) 240deg,
    transparent 282deg,
    rgba(16, 185, 129, 0.16) 360deg
  );
  filter: blur(36px);
  pointer-events: none;
  z-index: 1;
  animation: spiralArmsSpin 50s linear infinite;
  transform: translateZ(-25px);
}

.galactic-core-bulge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 440px;
  height: 440px;
  margin-top: -220px;
  margin-left: -220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(14, 165, 233, 0.11) 40%, rgba(168, 85, 247, 0.06) 65%, transparent 75%);
  pointer-events: none;
  z-index: 2;
  animation: coreBulgePulse 6s ease-in-out infinite alternate;
}

@keyframes spiralArmsSpin {
  from { transform: translateZ(-25px) rotate(0deg); }
  to { transform: translateZ(-25px) rotate(360deg); }
}

@keyframes coreBulgePulse {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.08); opacity: 1; }
}

/* Partículas Flutuantes Ambientais */
.omni-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(-10px);
}
.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  animation: particleFloat 6s ease-in-out infinite alternate;
  pointer-events: none;
}
.particle.p1 { width: 8px; height: 8px; background: #25D366; left: 22%; top: 25%; animation-duration: 5s; box-shadow: 0 0 10px #25D366; }
.particle.p2 { width: 6px; height: 6px; background: #E1306C; right: 24%; top: 20%; animation-duration: 7s; box-shadow: 0 0 8px #E1306C; }
.particle.p3 { width: 9px; height: 9px; background: #0084FF; left: 28%; bottom: 20%; animation-duration: 6.5s; box-shadow: 0 0 12px #0084FF; }
.particle.p4 { width: 7px; height: 7px; background: #F59E0B; right: 26%; bottom: 25%; animation-duration: 8s; box-shadow: 0 0 10px #F59E0B; }
.particle.p5 { width: 5px; height: 5px; background: #10B981; left: 48%; top: 12%; animation-duration: 5.5s; box-shadow: 0 0 8px #10B981; }
.particle.p6 { width: 5px; height: 5px; background: #38BDF8; right: 38%; top: 16%; animation-duration: 6.2s; box-shadow: 0 0 8px #38BDF8; }
.particle.p7 { width: 7px; height: 7px; background: #C084FC; left: 16%; bottom: 32%; animation-duration: 7.8s; box-shadow: 0 0 10px #C084FC; }
.particle.p8 { width: 4px; height: 4px; background: #00F5A0; right: 18%; top: 44%; animation-duration: 5.2s; box-shadow: 0 0 6px #00F5A0; }
.particle.p9 { width: 6px; height: 6px; background: #FDE047; left: 38%; bottom: 12%; animation-duration: 8.4s; box-shadow: 0 0 9px #FDE047; }
.particle.p10 { width: 4px; height: 4px; background: #67E8F9; right: 32%; bottom: 18%; animation-duration: 6.9s; box-shadow: 0 0 6px #67E8F9; }
.particle.p11 { width: 5px; height: 5px; background: #A7F3D0; left: 12%; top: 38%; animation-duration: 5.8s; box-shadow: 0 0 8px #A7F3D0; }
.particle.p12 { width: 6px; height: 6px; background: #F472B6; right: 12%; bottom: 38%; animation-duration: 7.2s; box-shadow: 0 0 8px #F472B6; }
.particle.p13 { width: 4px; height: 4px; background: #FFFFFF; left: 52%; bottom: 28%; animation-duration: 9.1s; box-shadow: 0 0 8px #FFFFFF; }
.particle.p14 { width: 5px; height: 5px; background: #38BDF8; left: 35%; top: 22%; animation-duration: 6.4s; box-shadow: 0 0 8px #38BDF8; }

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0.3; }
  50% { opacity: 0.85; }
  100% { transform: translateY(-16px) translateX(10px); opacity: 0.3; }
}

/* Hub Central */
.omni-hub-center {
  position: relative;
  width: 270px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: translateZ(20px);
}

/* Anéis de Órbita Giratórios */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.orbit-ring.orbit-outer {
  width: 280px;
  height: 280px;
  border: 1.5px dashed rgba(14, 22, 51, 0.16);
  animation: orbitSpin 30s linear infinite;
}
.orbit-ring.orbit-inner {
  width: 190px;
  height: 190px;
  border: 1px solid rgba(37, 211, 102, 0.25);
  animation: orbitSpinRev 20s linear infinite;
}
.orbit-ring.orbit-gyro-1 {
  width: 240px;
  height: 240px;
  border: 1.5px dashed rgba(0, 210, 255, 0.4);
  animation: gyroSpin1 16s linear infinite;
  transform-style: preserve-3d;
}
.orbit-ring.orbit-gyro-2 {
  width: 210px;
  height: 210px;
  border: 1px solid rgba(0, 245, 160, 0.35);
  animation: gyroSpin2 12s linear infinite reverse;
  transform-style: preserve-3d;
}

@keyframes gyroSpin1 {
  0% { transform: rotateX(65deg) rotateY(15deg) rotateZ(0deg); }
  100% { transform: rotateX(65deg) rotateY(15deg) rotateZ(360deg); }
}
@keyframes gyroSpin2 {
  0% { transform: rotateX(-55deg) rotateY(35deg) rotateZ(0deg); }
  100% { transform: rotateX(-55deg) rotateY(35deg) rotateZ(360deg); }
}

.hologram-scanline {
  position: absolute;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 245, 160, 0.8), transparent);
  box-shadow: 0 0 10px #00F5A0;
  pointer-events: none;
  animation: hologramSweep 4s ease-in-out infinite alternate;
  z-index: 3;
}
@keyframes hologramSweep {
  0% { transform: translateY(-70px) scaleX(0.7); opacity: 0.2; }
  50% { opacity: 0.95; transform: translateY(0px) scaleX(1); }
  100% { transform: translateY(70px) scaleX(0.7); opacity: 0.2; }
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orbitSpinRev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Ondas de Radar do Núcleo Expandido */
.radar-pulse {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 211, 102, 0.45);
  pointer-events: none;
  animation: radarExpand 3.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.radar-pulse.pulse-2 {
  animation-delay: 1.9s;
  border-color: rgba(0, 132, 255, 0.4);
}

@keyframes radarExpand {
  0% { width: 70px; height: 70px; opacity: 0.9; }
  100% { width: 340px; height: 340px; opacity: 0; }
}

/* Linhas SVG de Feixe de Energia */
.omni-energy-lines {
  position: absolute;
  width: 320px;
  height: 320px;
  pointer-events: none;
  z-index: 1;
}
.energy-beam {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  animation: beamFlow 1.6s linear infinite;
}
.beam-wa { stroke: #25D366; opacity: 0.65; }
.beam-ig { stroke: #E1306C; opacity: 0.65; }
.beam-ms { stroke: #0084FF; opacity: 0.65; }
.beam-queue { stroke: #0EA5E9; opacity: 0.65; }

@keyframes beamFlow {
  to { stroke-dashoffset: -28; }
}

/* Ponto de Pulso de Energia em Trânsito */
.energy-packet-dot {
  fill: #F59E0B;
  filter: drop-shadow(0 0 6px #F59E0B);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Satélites dos Canais (Botões Clicáveis e Interativos) */
.channel-satellite {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  z-index: 6;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.channel-satellite::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: auto;
}
.channel-satellite:hover {
  filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
.channel-satellite:active {
  transform: scale(0.94) !important;
}

.sat-tooltip {
  position: absolute;
  bottom: -24px;
  background: rgba(14, 22, 51, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.channel-satellite:hover .sat-tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.satellite-signal-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: satPulse 3s ease-out infinite;
}
@keyframes satPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.45); opacity: 0; }
}

.sat-wa {
  top: 15px;
  left: 15px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  animation: floatSat 4.5s ease-in-out infinite;
}
.sat-wa.active {
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.35), 0 8px 24px rgba(37, 211, 102, 0.4);
}

.sat-ig {
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F56040 100%);
  animation: floatSat 4.9s ease-in-out 0.4s infinite;
}
.sat-ig.active {
  box-shadow: 0 0 0 4px rgba(225, 48, 108, 0.35), 0 8px 24px rgba(225, 48, 108, 0.4);
}

.sat-ms {
  bottom: 15px;
  left: 15px;
  background: linear-gradient(135deg, #00C6FF 0%, #0078FF 100%);
  animation: floatSat 4.7s ease-in-out 0.8s infinite;
}
.sat-ms.active {
  box-shadow: 0 0 0 4px rgba(0, 132, 255, 0.35), 0 8px 24px rgba(0, 132, 255, 0.4);
}

.sat-queue {
  bottom: 15px;
  right: 15px;
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  animation: floatSat 5.1s ease-in-out 1.2s infinite;
}
.sat-queue.active {
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.35), 0 8px 24px rgba(2, 132, 199, 0.4);
}

@keyframes floatSat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ---- Bulbo Galáctico / Supercluster Core (Opção C: Galáxia Espiral Viva) ---- */
.galaxy-core-system {
  position: relative;
  z-index: 5;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. Planos Orbitais Tridimensionais da Galáxia (Disco de Poeira & Braços) */
.galaxy-orbit-plane {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.galaxy-orbit-plane.plane-1 {
  width: 220px;
  height: 220px;
  border: 1.5px solid rgba(16, 185, 129, 0.7);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.4), inset 0 0 12px rgba(16, 185, 129, 0.25);
  animation: galacticPlaneSpin1 20s linear infinite;
}

.galaxy-orbit-plane.plane-2 {
  width: 190px;
  height: 190px;
  border: 1.5px dashed rgba(14, 165, 233, 0.75);
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.4);
  animation: galacticPlaneSpin2 15s linear infinite reverse;
}

/* 2. Coroa de Radiação e Fótons do Bulbo */
.galaxy-corona-pulse {
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.65);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
  pointer-events: none;
  z-index: 4;
  animation: coronaPulse 3.5s ease-in-out infinite;
}

/* 3. Trilha de Fótons Estelares em Rotação */
.galaxy-photon-trail {
  position: absolute;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  border: 1px dotted rgba(245, 158, 11, 0.85);
  pointer-events: none;
  z-index: 4;
  animation: photonTrailSpin 12s linear infinite;
}

/* 4. Círculo do Núcleo Galáctico */
.core-logo-circle.galaxy-core-circle {
  background: linear-gradient(135deg, #064E3B 0%, #0F6E56 50%, #0284C7 100%) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.35), 0 10px 30px rgba(6, 78, 59, 0.4) !important;
  color: #FFFFFF !important;
  z-index: 7;
}

@keyframes galacticPlaneSpin1 {
  0% { transform: rotateX(68deg) rotateY(18deg) rotateZ(0deg); }
  100% { transform: rotateX(68deg) rotateY(18deg) rotateZ(360deg); }
}

@keyframes galacticPlaneSpin2 {
  0% { transform: rotateX(-58deg) rotateY(32deg) rotateZ(0deg); }
  100% { transform: rotateX(-58deg) rotateY(32deg) rotateZ(360deg); }
}

@keyframes coronaPulse {
  0%, 100% { transform: scale(0.94); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes photonTrailSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Esfera Núcleo MegaZap (Cérebro / Core Router com respiração fluida e estável) */
.omni-core-sphere {
  position: relative;
  z-index: 5;
  animation: coreFloat 4.2s ease-in-out infinite alternate;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  /* Hitbox expandido para estabilidade total do mouse */
  padding: 8px;
  margin: -8px;
}
.omni-core-sphere::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: auto;
}
/* Animação de hover aplicada com elegância apenas ao círculo interior para evitar jitter */
.omni-core-sphere:hover .core-logo-circle {
  transform: scale(1.08);
  filter: drop-shadow(0 0 20px rgba(0, 245, 160, 0.65));
}
.omni-core-sphere:active .core-logo-circle {
  transform: scale(0.96);
}

@keyframes coreFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.035); }
  100% { transform: translateY(0) scale(1); }
}

.core-logo-circle {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0E1633 0%, #162456 60%, #1B73C5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 29px;
  box-shadow: 0 10px 30px rgba(14, 22, 51, 0.3), 0 0 0 6px rgba(27, 115, 197, 0.15);
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
}

.core-zap-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #F59E0B;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.6);
  border: 2px solid #fff;
  animation: zapShine 2s infinite ease-in-out;
  transition: transform 0.3s;
}
@keyframes zapShine {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(8deg); }
}

/* Pílula de Ação e Telemetria no Núcleo MegaZap - Alta Fidelidade & Cristalina */
.core-action-pill {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%) translateZ(45px);
  background: rgba(7, 15, 28, 0.94);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #F8FAFC;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.35px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 245, 160, 0.45);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 14px rgba(0, 245, 160, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}
.core-action-pill:hover {
  border-color: rgba(0, 245, 160, 0.85);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 245, 160, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateX(-50%) translateZ(48px) scale(1.03);
}
.core-action-pill strong {
  font-weight: 700;
  color: #00F5A0;
}
.core-action-pill.active-duty {
  border-color: rgba(0, 245, 160, 0.55);
  background: linear-gradient(135deg, rgba(6, 28, 22, 0.95) 0%, rgba(10, 42, 34, 0.95) 100%);
}
.core-action-pill.has-queue {
  background: linear-gradient(135deg, #15803D 0%, #166534 100%);
  border-color: #4ADE80;
  box-shadow: 0 8px 26px rgba(34, 197, 94, 0.5), 0 0 16px rgba(74, 222, 128, 0.4);
  animation: pulseQueuePill 1.8s infinite;
}
.core-action-pill.has-queue strong {
  color: #FFFFFF;
}
.core-action-pill.paused {
  background: linear-gradient(135deg, rgba(30, 20, 10, 0.95) 0%, rgba(55, 35, 12, 0.95) 100%);
  border-color: #F59E0B;
  color: #FDE68A;
}
.core-action-pill.idle {
  border-color: rgba(56, 189, 248, 0.4);
}

.core-action-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00F5A0;
  box-shadow: 0 0 8px #00F5A0;
  flex-shrink: 0;
}
.core-action-pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid #00F5A0;
  animation: pulseBeaconRing 2s ease-out infinite;
}
@keyframes pulseBeaconRing {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Light Theme para a Pílula do Núcleo */
[data-theme="light"] .core-action-pill,
body:not([data-theme="dark"]) .core-action-pill {
  background: rgba(255, 255, 255, 0.96);
  color: #0F172A;
  border: 1px solid rgba(16, 185, 129, 0.55);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1), 0 0 12px rgba(16, 185, 129, 0.2);
}
[data-theme="light"] .core-action-pill strong,
body:not([data-theme="dark"]) .core-action-pill strong {
  color: #059669;
}
[data-theme="light"] .core-action-pulse,
body:not([data-theme="dark"]) .core-action-pulse {
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}
[data-theme="light"] .core-action-pulse::after,
body:not([data-theme="dark"]) .core-action-pulse::after {
  border-color: #10B981;
}

/* Balões de Chat Flutuantes (Profundidade 3D e Transições Suaves) */
.floating-chat-bubble {
  position: absolute;
  width: 250px;
  background: rgba(10, 18, 32, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 245, 160, 0.28);
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 20px rgba(0, 245, 160, 0.08);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  user-select: text;
  color: #F8FAFC;
}
.floating-chat-bubble:hover {
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 32px rgba(0, 245, 160, 0.25);
  border-color: rgba(0, 245, 160, 0.6);
}

.floating-chat-bubble.bubble-left {
  left: 28px;
  top: 35px;
}

.floating-chat-bubble.bubble-right {
  right: 28px;
  bottom: 35px;
}

.bubble-sender {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bubble-avatar-lead {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.bubble-avatar-agent {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0E1633;
  color: #25D366;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bubble-sender-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.bubble-sender-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.bubble-channel-tag {
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color 0.3s ease;
}
.bubble-channel-tag.wa { color: #16A34A; }
.bubble-channel-tag.ig { color: #E1306C; }
.bubble-channel-tag.ms { color: #0084FF; }

.bubble-status-online {
  font-size: 10px;
  font-weight: 500;
  color: #16A34A;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tiny-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 6px rgba(22, 163, 74, 0.6);
}

.bubble-message-body {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  background: #F8FAFC;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.25s ease;
}
.bubble-message-body.agent-reply {
  background: #F0FDF4;
  border-color: #DCFCE7;
  color: #14532D;
}
.bubble-message-body p {
  margin: 0;
  transition: opacity 0.2s;
}

.bubble-typing-dots {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.bubble-typing-dots.active {
  display: flex;
}
.bubble-typing-dots span {
  width: 5px;
  height: 5px;
  background: #94A3B8;
  border-radius: 50%;
  animation: typingDot 1.4s infinite ease-in-out;
}
.bubble-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.bubble-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.bubble-time {
  font-size: 10px;
  color: var(--text-light);
  align-self: flex-end;
}
.bubble-meta-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Badges de Inteligência Artificial nos Balões 3D */
.bubble-ai-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 4px 9px;
  background: rgba(15, 110, 86, 0.1);
  border: 1px solid rgba(15, 110, 86, 0.25);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #0F6E56;
  letter-spacing: 0.2px;
  transition: all 0.2s ease;
}
.bubble-ai-badge i {
  color: #F59E0B;
}
[data-theme="dark"] .bubble-ai-badge {
  background: rgba(0, 245, 160, 0.14);
  border-color: rgba(0, 245, 160, 0.35);
  color: #00F5A0;
}
.bubble-ai-badge.agent-ai {
  background: rgba(27, 115, 197, 0.1);
  border-color: rgba(27, 115, 197, 0.25);
  color: #1B73C5;
}
.bubble-ai-badge.agent-ai i {
  color: #1B73C5;
}
[data-theme="dark"] .bubble-ai-badge.agent-ai {
  background: rgba(0, 132, 255, 0.15);
  border-color: rgba(0, 132, 255, 0.35);
  color: #38BDF8;
}
[data-theme="dark"] .bubble-ai-badge.agent-ai i {
  color: #38BDF8;
}

/* Toast de Telemetria de Roteamento em Tempo Real */
.omni-live-telemetry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 22, 51, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F8FAFC;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid rgba(27, 115, 197, 0.4);
  box-shadow: 0 4px 18px rgba(14, 22, 51, 0.22);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  z-index: 12;
}
.omni-live-telemetry i {
  color: #F59E0B;
}
.omni-live-telemetry.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PALCO OMNICHANNEL: BALÕES FLUTUANTES (MODO CLARO E ESCURO)
   ============================================================ */

/* MODO CLARO (Default / :root) - Balão do Lead (Cliente) */
:root .omni-3d-scene .floating-chat-bubble.bubble-left {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #0F172A !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-sender-name {
  color: #0F172A !important;
  font-weight: 700 !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-channel-tag.wa {
  background: rgba(37, 211, 102, 0.12) !important;
  color: #15803D !important;
  font-weight: 700 !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #1E293B !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body p {
  color: #1E293B !important;
  font-weight: 500 !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-time {
  color: #64748B !important;
  font-weight: 600 !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-ai-badge {
  background: rgba(15, 110, 86, 0.08) !important;
  border: 1px solid rgba(15, 110, 86, 0.22) !important;
  color: #0F6E56 !important;
  font-weight: 700 !important;
}

/* MODO CLARO (Default / :root) - Balão do Atendente */
:root .omni-3d-scene .floating-chat-bubble.bubble-right {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #064E3B !important;
  border: 1px solid rgba(167, 243, 208, 0.9) !important;
  box-shadow: 0 16px 36px rgba(16, 185, 129, 0.09), 0 2px 8px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-sender-name {
  color: #065F46 !important;
  font-weight: 700 !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-status-online {
  color: #16A34A !important;
  font-weight: 600 !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #064E3B !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body p {
  color: #064E3B !important;
  font-weight: 500 !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-time {
  color: #059669 !important;
  font-weight: 600 !important;
}

:root .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-ai-badge {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  color: #047857 !important;
  font-weight: 700 !important;
}

/* MODO ESCURO - Balão do Lead (Cliente) */
[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-left,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-left {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #F8FAFC !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.15) !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-sender-name,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-sender-name {
  color: #F8FAFC !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-channel-tag.wa,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-channel-tag.wa {
  background: rgba(37, 211, 102, 0.2) !important;
  color: #4ADE80 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body {
  background: #0B1120 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #F1F5F9 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body p,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body p {
  color: #F1F5F9 !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-time,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-time {
  color: #94A3B8 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-ai-badge,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-left .bubble-ai-badge {
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #38BDF8 !important;
  font-weight: 700 !important;
}

/* MODO ESCURO - Balão do Atendente */
[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-right,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-right {
  background: rgba(6, 78, 59, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #ECFDF5 !important;
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.8), 0 0 30px rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-sender-name,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-sender-name {
  color: #A7F3D0 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-status-online,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-status-online {
  color: #34D399 !important;
  font-weight: 600 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body {
  background: rgba(6, 46, 35, 0.88) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #ECFDF5 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body p,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body p {
  color: #ECFDF5 !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-meta-footer,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-meta-footer {
  color: #6EE7B7 !important;
}

[data-theme="dark"] .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-ai-badge,
body.dark-theme .omni-3d-scene .floating-chat-bubble.bubble-right .bubble-ai-badge {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34D399 !important;
  font-weight: 700 !important;
}

/* ============================================================
   PALCO OMNICHANNEL: CONTROLES & GARGANTUA NO MODO ESCURO
   ============================================================ */

[data-theme="dark"] .omni-status-chip,
body.dark-theme .omni-status-chip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F1F5F9;
}

[data-theme="dark"] .omni-operator-toggle,
body.dark-theme .omni-operator-toggle {
  background: #111827;
  border: 1px solid #1F293D;
}

[data-theme="dark"] .op-toggle-btn,
body.dark-theme .op-toggle-btn {
  color: #94A3B8;
}

[data-theme="dark"] .op-toggle-btn.active,
body.dark-theme .op-toggle-btn.active {
  background: #1E293B;
  color: #F8FAFC;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sim-btn,
body.dark-theme .sim-btn {
  background: #111827;
  border: 1px solid #1F293D;
  color: #F1F5F9;
}

[data-theme="dark"] .sim-btn:hover,
body.dark-theme .sim-btn:hover {
  background: #1E293B;
  border-color: #38BDF8;
}

[data-theme="dark"] .sim-btn-pulse,
body.dark-theme .sim-btn-pulse {
  background: linear-gradient(135deg, #1E293B, #0284C7);
  border-color: #38BDF8;
  color: #FFFFFF;
}

/* Galáxia Espiral Viva no Modo Escuro (Luminescência Neon & Vácuo Cósmico Expandido) */
[data-theme="dark"] .spiral-galaxy-arms,
body.dark-theme .spiral-galaxy-arms {
  background: conic-gradient(
    from 0deg,
    rgba(0, 245, 160, 0.28) 0deg,
    transparent 38deg,
    rgba(56, 189, 248, 0.3) 120deg,
    transparent 158deg,
    rgba(192, 132, 252, 0.28) 240deg,
    transparent 278deg,
    rgba(0, 245, 160, 0.28) 360deg
  );
  filter: blur(42px);
}

[data-theme="dark"] .galactic-core-bulge,
body.dark-theme .galactic-core-bulge {
  background: radial-gradient(circle, rgba(0, 245, 160, 0.3) 0%, rgba(56, 189, 248, 0.22) 35%, rgba(168, 85, 247, 0.16) 65%, transparent 78%);
}

[data-theme="dark"] .galaxy-orbit-plane.plane-1,
body.dark-theme .galaxy-orbit-plane.plane-1 {
  border: 1.5px solid rgba(0, 245, 160, 0.85);
  box-shadow: 0 0 20px rgba(0, 245, 160, 0.55), inset 0 0 12px rgba(0, 245, 160, 0.35);
}

[data-theme="dark"] .galaxy-orbit-plane.plane-2,
body.dark-theme .galaxy-orbit-plane.plane-2 {
  border: 1.5px dashed rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.55);
}

[data-theme="dark"] .galaxy-corona-pulse,
body.dark-theme .galaxy-corona-pulse {
  border: 1.5px solid rgba(0, 245, 160, 0.9);
  box-shadow: 0 0 28px rgba(0, 245, 160, 0.65);
}

[data-theme="dark"] .core-logo-circle.galaxy-core-circle,
body.dark-theme .core-logo-circle.galaxy-core-circle {
  background: linear-gradient(135deg, #052e16 0%, #064e3b 50%, #0369a1 100%) !important;
  box-shadow: 0 0 0 4px rgba(0, 245, 160, 0.45), 0 0 40px rgba(0, 245, 160, 0.6), 0 0 20px rgba(56, 189, 248, 0.4) !important;
}

[data-theme="dark"] .omni-ambient-glow,
body.dark-theme .omni-ambient-glow {
  background: radial-gradient(circle, rgba(0, 245, 160, 0.18) 0%, rgba(56, 189, 248, 0.14) 40%, rgba(168, 85, 247, 0.08) 65%, transparent 75%);
}

/* Modo Escuro: Barra de Filtros Estilo WhatsApp Web */
[data-theme="dark"] .wpp-filter-bar,
body.dark-theme .wpp-filter-bar {
  background: #111b21;
  border-color: #222d34;
}

[data-theme="dark"] .wpp-scroll-arrow,
body.dark-theme .wpp-scroll-arrow {
  background: rgba(32, 44, 51, 0.94);
  color: #8696a0;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .wpp-scroll-arrow:hover,
body.dark-theme .wpp-scroll-arrow:hover {
  background: #2a3942;
  color: #FFFFFF;
}

[data-theme="dark"] .wpp-scroll-arrow:active,
[data-theme="dark"] .wpp-scroll-arrow.is-holding,
body.dark-theme .wpp-scroll-arrow:active,
body.dark-theme .wpp-scroll-arrow.is-holding {
  background: #374248;
}

[data-theme="dark"] .wpp-filter-chip,
body.dark-theme .wpp-filter-chip {
  background: #202c33;
  color: #8696a0;
  border: none;
}

[data-theme="dark"] .wpp-filter-chip:hover,
body.dark-theme .wpp-filter-chip:hover {
  background: #2a3942;
  color: #d1d7db;
}

[data-theme="dark"] .wpp-filter-chip.active,
body.dark-theme .wpp-filter-chip.active {
  background: #0a332c !important;
  color: #00a884 !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .wpp-filter-chip.active:hover,
body.dark-theme .wpp-filter-chip.active:hover {
  background: #0e4337 !important;
}

[data-theme="dark"] .wpp-chip-whatsapp.active,
body.dark-theme .wpp-chip-whatsapp.active {
  background: #0a332c !important;
  color: #00a884 !important;
}

[data-theme="dark"] .wpp-chip-instagram.active,
body.dark-theme .wpp-chip-instagram.active {
  background: #371b2d !important;
  color: #F472B6 !important;
}

[data-theme="dark"] .wpp-chip-messenger.active,
body.dark-theme .wpp-chip-messenger.active {
  background: #152c48 !important;
  color: #60A5FA !important;
}

[data-theme="dark"] .wpp-filter-divider,
body.dark-theme .wpp-filter-divider {
  background: #2a3942;
}

[data-theme="dark"] .wpp-chip-badge,
body.dark-theme .wpp-chip-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #8696a0;
}

[data-theme="dark"] .wpp-filter-chip.active .wpp-chip-badge,
body.dark-theme .wpp-filter-chip.active .wpp-chip-badge {
  background: #00a884 !important;
  color: #111b21 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .wpp-badge-blue,
body.dark-theme .wpp-badge-blue {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #8696a0 !important;
}

[data-theme="dark"] .wpp-filter-chip.active .wpp-badge-blue,
body.dark-theme .wpp-filter-chip.active .wpp-badge-blue {
  background: #00a884 !important;
  color: #111b21 !important;
}

/* ========================================================
   RADAR EM TEMPO REAL: FLUXO DE ATENDIMENTOS & TELEMETRIA IA
   ======================================================== */
.omni-live-stream-section {
  width: 100%;
  max-width: 880px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 8;
  transition: all 0.25s ease;
}
[data-theme="dark"] .omni-live-stream-section {
  background: rgba(17, 24, 39, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.live-stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
}
.live-stream-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-beacon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 10px #22C55E;
  animation: beaconPulse 1.6s infinite;
}
@keyframes beaconPulse {
  0% { transform: scale(0.9); box-shadow: 0 0 4px #22C55E; }
  50% { transform: scale(1.35); box-shadow: 0 0 14px #22C55E; }
  100% { transform: scale(0.9); box-shadow: 0 0 4px #22C55E; }
}
.live-beacon-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text);
}
.live-beacon-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

.live-stream-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Container cápsula padronizado — mesmo design dos Relatórios, Home e Atendimento */
.live-channel-pills {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px;
  border-radius: 22px;
  gap: 3px;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.live-channel-pill {
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}

.live-channel-pill:hover {
  color: var(--text);
  background: var(--border-light);
}

/* Cores dos ícones nos estados inativos (Idêntico ao padrão dos Relatórios e Home) */
.live-channel-pill[data-live-filter="all"] i,
.live-channel-pill.live-pill-all i {
  color: #0F6E56;
}
[data-theme="dark"] .live-channel-pill[data-live-filter="all"] i,
body.dark-theme .live-channel-pill[data-live-filter="all"] i {
  color: #10B981;
}

.live-channel-pill[data-live-filter="whatsapp"] i,
.live-channel-pill.live-pill-wa i {
  color: #25D366;
}

.live-channel-pill[data-live-filter="instagram"] i,
.live-channel-pill.live-pill-ig i {
  color: #E1306C;
}

.live-channel-pill[data-live-filter="messenger"] i,
.live-channel-pill.live-pill-ms i {
  color: #0084FF;
}

.live-channel-pill[data-live-filter="ai"] i,
.live-channel-pill.live-pill-ai i {
  color: #8B5CF6;
}
[data-theme="dark"] .live-channel-pill[data-live-filter="ai"] i,
body.dark-theme .live-channel-pill[data-live-filter="ai"] i {
  color: #A855F7;
}

/* Estados ATIVOS com as cores oficiais e efeito luminoso (Idêntico a Relatórios e Home) */
.live-channel-pill[data-live-filter="all"].active,
.live-channel-pill.live-pill-all.active {
  background: #0F6E56 !important;
  color: #ffffff !important;
  border-color: #0F6E56 !important;
  box-shadow: 0 2px 8px rgba(15, 110, 86, 0.4) !important;
  font-weight: 700 !important;
}
.live-channel-pill[data-live-filter="all"].active i,
.live-channel-pill.live-pill-all.active i {
  color: #ffffff !important;
}

[data-theme="dark"] .live-channel-pill[data-live-filter="all"].active,
body.dark-theme .live-channel-pill[data-live-filter="all"].active {
  background: #0F6E56 !important;
  color: #ffffff !important;
  border-color: #10B981 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
}

.live-channel-pill[data-live-filter="whatsapp"].active,
.live-channel-pill.live-pill-wa.active {
  background: #25D366 !important;
  color: #ffffff !important;
  border-color: #25D366 !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.45) !important;
  font-weight: 700 !important;
}
.live-channel-pill[data-live-filter="whatsapp"].active i,
.live-channel-pill.live-pill-wa.active i {
  color: #ffffff !important;
}

.live-channel-pill[data-live-filter="instagram"].active,
.live-channel-pill.live-pill-ig.active {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important;
  color: #ffffff !important;
  border-color: #fd1d1d !important;
  box-shadow: 0 2px 8px rgba(253, 29, 29, 0.45) !important;
  font-weight: 700 !important;
}
.live-channel-pill[data-live-filter="instagram"].active i,
.live-channel-pill.live-pill-ig.active i {
  color: #ffffff !important;
}

.live-channel-pill[data-live-filter="messenger"].active,
.live-channel-pill.live-pill-ms.active {
  background: #0084FF !important;
  color: #ffffff !important;
  border-color: #0084FF !important;
  box-shadow: 0 2px 8px rgba(0, 132, 255, 0.45) !important;
  font-weight: 700 !important;
}
.live-channel-pill[data-live-filter="messenger"].active i,
.live-channel-pill.live-pill-ms.active i {
  color: #ffffff !important;
}

.live-channel-pill[data-live-filter="ai"].active,
.live-channel-pill.live-pill-ai.active {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
  color: #ffffff !important;
  border-color: #8B5CF6 !important;
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.45) !important;
  font-weight: 700 !important;
}
.live-channel-pill[data-live-filter="ai"].active i,
.live-channel-pill.live-pill-ai.active i {
  color: #ffffff !important;
}

[data-theme="dark"] .live-channel-pill[data-live-filter="ai"].active,
body.dark-theme .live-channel-pill[data-live-filter="ai"].active {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
  color: #ffffff !important;
  border-color: #A855F7 !important;
  box-shadow: 0 2px 12px rgba(168, 85, 247, 0.5) !important;
}
.live-pause-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all 0.15s;
}
.live-pause-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
}
.live-pause-btn.paused {
  background: rgba(220, 38, 38, 0.15);
  color: var(--danger);
  border-color: var(--danger);
}

.live-events-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.live-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 12px;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  animation: eventSlideIn 0.35s ease-out;
}
@keyframes eventSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.live-event-row:hover {
  transform: translateX(4px);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .live-event-row {
  background: rgba(26, 35, 51, 0.6);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .live-event-row:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(0, 245, 160, 0.4);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.live-event-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.live-event-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.live-event-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.live-event-headline {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-event-desc {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-event-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.live-event-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.live-event-tag.hot {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}
.live-event-tag.ai {
  background: rgba(139, 92, 246, 0.15);
  color: #7C3AED;
}
[data-theme="dark"] .live-event-tag.ai {
  background: rgba(168, 85, 247, 0.22);
  color: #C084FC;
}
.live-event-tag.deal {
  background: rgba(34, 197, 94, 0.15);
  color: #16A34A;
}
.live-event-time {
  font-size: 10px;
  color: var(--text-light);
  white-space: nowrap;
}

/* ========================================================
   PAINEL TÁTICO DE ESPERA: DICAS DE IA & AÇÕES DO MINUTO
   ======================================================== */
.omni-standby-tactical-grid {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  margin-top: 10px;
  z-index: 8;
}
@media (max-width: 768px) {
  .omni-standby-tactical-grid {
    grid-template-columns: 1fr;
  }
}
.standby-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.standby-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
[data-theme="dark"] .standby-card {
  background: rgba(17, 24, 39, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.standby-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
}
.standby-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ai-sparkle-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.ai-sparkle-icon.action {
  background: linear-gradient(135deg, #0F6E56, #00F5A0);
}
.standby-header-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.standby-cycle-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}
.standby-cycle-btn:hover {
  color: var(--accent);
  transform: rotate(45deg);
}
.standby-tip-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
  margin: 0;
  min-height: 38px;
  transition: opacity 0.2s ease;
}
.standby-tip-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.standby-badge-tag {
  font-size: 10px;
  font-weight: 700;
  color: #16A34A;
  background: rgba(34, 197, 94, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}
.standby-tip-counter {
  font-size: 10px;
  color: var(--text-light);
}
.standby-badge-live {
  font-size: 9.5px;
  font-weight: 800;
  color: #0F6E56;
  background: rgba(15, 110, 86, 0.12);
  padding: 2px 6px;
  border-radius: 999px;
}
[data-theme="dark"] .standby-badge-live {
  color: #00F5A0;
  background: rgba(0, 245, 160, 0.15);
}
.standby-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quick-action-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}
.quick-action-pill:hover {
  background: var(--conv-selected);
  border-color: var(--accent);
  transform: translateX(3px);
}
[data-theme="dark"] .quick-action-pill {
  background: rgba(26, 35, 51, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .quick-action-pill:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: var(--accent);
}
.quick-action-pill i {
  font-size: 12px;
  color: var(--accent);
}

/* Apresentação da Marca */
.omni-brand-presentation {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  z-index: 8;
}
.omni-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #DCFCE7;
  color: #166534;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #BBF7D0;
}
.chip-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 8px rgba(22, 163, 74, 0.8);
  animation: dotPulse 1.8s infinite;
}
@keyframes dotPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.omni-display-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.3px;
}
.omni-display-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0;
  line-height: 1.45;
}

/* ============================================================
   SEÇÃO COMPACTA: VOLUME POR CANAL & RANKING DE ATENDENTES
   ============================================================ */
.omni-compact-analytics {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 6px;
}

.compact-analytics-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.compact-analytics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.compact-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 8px;
}
.compact-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.compact-card-title i {
  color: var(--accent);
  font-size: 13px;
}
.compact-card-badge {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
  background: #F1F5F9;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Lista Compacta de Canais */
.compact-channel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compact-channel-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.compact-channel-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.compact-channel-icon.whatsapp { background: var(--whatsapp); }
.compact-channel-icon.instagram { background: var(--instagram); }
.compact-channel-icon.messenger { background: var(--messenger); }

.compact-channel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compact-channel-top {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
}
.compact-channel-name { color: var(--text); }
.compact-channel-pct { color: var(--text-muted); font-size: 11.5px; font-weight: 600; }

.compact-channel-bar-track {
  height: 7px;
  background: #F1F5F9;
  border-radius: 99px;
  overflow: hidden;
}
.compact-channel-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease;
}
.compact-channel-bar-fill.whatsapp { background: linear-gradient(90deg, #25D366, #128C7E); }
.compact-channel-bar-fill.instagram { background: linear-gradient(90deg, #FD1D1D, #833AB4); }
.compact-channel-bar-fill.messenger { background: linear-gradient(90deg, #00C6FF, #0078FF); }

/* Lista Compacta de Atendentes */
.compact-agent-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.compact-agent-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.compact-agent-item:hover {
  background: var(--border-light);
  transform: translateX(2px);
  border-color: var(--accent);
}
.compact-agent-rank {
  font-size: 13px;
  font-weight: 700;
  width: 20px;
  text-align: center;
}
.compact-agent-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.compact-agent-meta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}
.compact-agent-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compact-agent-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.compact-agent-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* Modo Escuro específico para o Ranking de Atendentes e Volume por Canal */
[data-theme="dark"] .compact-analytics-card,
body.dark-theme .compact-analytics-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .compact-card-header,
body.dark-theme .compact-card-header {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .compact-card-title,
body.dark-theme .compact-card-title {
  color: var(--text);
}
[data-theme="dark"] .compact-card-badge,
body.dark-theme .compact-card-badge {
  background: #162032;
  color: var(--text-muted);
}
[data-theme="dark"] .compact-agent-item,
body.dark-theme .compact-agent-item {
  background: #162032;
  border-color: #1F293D;
}
[data-theme="dark"] .compact-agent-item:hover,
body.dark-theme .compact-agent-item:hover {
  background: #1C283F;
  border-color: var(--accent);
}
[data-theme="dark"] .compact-agent-rank,
body.dark-theme .compact-agent-rank {
  color: var(--text);
}
[data-theme="dark"] .compact-agent-name,
body.dark-theme .compact-agent-name {
  color: #F1F5F9;
}
[data-theme="dark"] .compact-agent-sub,
body.dark-theme .compact-agent-sub {
  color: #94A3B8;
}
[data-theme="dark"] .compact-channel-name,
body.dark-theme .compact-channel-name {
  color: #F1F5F9;
}
[data-theme="dark"] .compact-channel-pct,
body.dark-theme .compact-channel-pct {
  color: #94A3B8;
}
[data-theme="dark"] .compact-channel-bar-track,
body.dark-theme .compact-channel-bar-track {
  background: #162032;
}

.omni-select-hint {
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  text-align: center;
}

/* Responsivo para telas menores */
@media (max-width: 860px) {
  .floating-chat-bubble {
    display: none;
  }
  .omni-compact-analytics {
    grid-template-columns: 1fr;
  }
  .omni-hero-experience {
    min-height: 260px;
  }
}

.dashboard-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 16px;
}
.dashboard-panel h3 {
  margin: 0 0 14px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}

.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.bar-row-label { width: 100px; flex-shrink: 0; color: var(--text-muted); }
.bar-row-track {
  flex: 1; background: var(--border);
  border-radius: 4px; height: 8px; overflow: hidden;
}
.bar-row-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.bar-row-value { width: 36px; text-align: right; color: var(--text-muted); font-weight: 600; }

/* Tabela genérica */
.report-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  font-size: 13px;
}
.report-table th, .report-table td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.report-table th {
  color: var(--text-muted); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em;
  background: #F9FAFB;
}
.report-table tr:last-child td { border-bottom: none; }
.report-table tr:hover td { background: #F9FAFB; }

.stat-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; padding: 4px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: #fff;
}
.stat-pill-green { background: #22C55E; }
.stat-pill-blue { background: #3B82F6; }
.stat-pill-orange { background: #F97316; }
.stat-pill-zero { background: transparent; color: var(--text-muted); font-weight: 400; }


/* ============================================================
   BOTÕES GENÉRICOS
   ============================================================ */
.primary-btn, .secondary-btn {
  font-size: 13px; padding: 8px 14px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer;
  font-weight: 500; transition: all .12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.primary-btn {
  background: var(--topbar-bg); color: white;
  border-color: var(--topbar-bg);
}
.primary-btn:hover { background: var(--accent-dark); }
.secondary-btn:hover { background: var(--bg); }

.icon-btn {
  border: none; background: transparent;
  font-size: 20px; cursor: pointer; color: var(--text-muted);
  line-height: 1; padding: 4px;
}
.icon-btn:hover { color: var(--text); }


/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal-overlay.hidden { display: none; }

.modal-card {
  background: var(--surface);
  border-radius: 14px; padding: 24px;
  width: 400px; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.modal-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 18px;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--topbar-bg); }

.quick-reply-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.quick-reply-form input, .quick-reply-form textarea {
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; font-family: inherit;
  transition: border-color .12s;
}
.quick-reply-form input:focus,
.quick-reply-form textarea:focus { outline: none; border-color: var(--accent); }
.quick-reply-form textarea { min-height: 80px; resize: vertical; }
.quick-reply-form button {
  padding: 10px; border: none; border-radius: 8px;
  background: var(--topbar-bg); color: white;
  cursor: pointer; font-weight: 600; transition: background .12s;
}
.quick-reply-form button:hover { background: var(--accent-dark); }

.quick-reply-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.quick-reply-list li {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.quick-reply-list .qr-remove {
  border: none; background: transparent; color: var(--danger); cursor: pointer; font-size: 16px;
}


/* ============================================================
   KANBAN
   ============================================================ */
.kanban-board {
  flex: 1; display: flex; gap: 14px;
  padding: 20px; overflow-x: auto; align-items: flex-start;
}
.kanban-column {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column; max-height: 100%;
}
.kanban-column-header {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-muted);
}
.kanban-cards {
  padding: 10px; display: flex; flex-direction: column;
  gap: 8px; overflow-y: auto; min-height: 60px;
}
.kanban-cards.drag-over { background: var(--conv-selected); }
.kanban-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; cursor: grab; font-size: 13px;
  transition: box-shadow .12s;
}
.kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.kanban-card:active { cursor: grabbing; }
.kanban-card-name { font-weight: 600; margin-bottom: 4px; }
.kanban-card-preview {
  color: var(--text-muted); font-size: 12px;
  margin-bottom: 6px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.tag-chip {
  font-size: 10px; padding: 2px 7px;
  border-radius: 999px; color: white;
  display: inline-flex; align-items: center; gap: 4px;
}
.tag-chip .tag-remove { cursor: pointer; opacity: .8; }
.kanban-add-tag {
  font-size: 11px; color: var(--accent);
  cursor: pointer; background: none; border: none; padding: 0;
}


/* ============================================================
   RELATÓRIOS
   ============================================================ */
.reports-view { flex: 1; padding: 24px 28px; overflow-y: auto; background: var(--bg); }

/* Cabeçalho Pro */
.reports-header-pro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.reports-header-left h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
}
.reports-header-subtitle {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.reports-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.reports-channel-pills {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 22px;
  gap: 4px;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.reports-channel-pill {
  border: 1px solid transparent;
  background: transparent;
  padding: 5px 13px;
  border-radius: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.reports-channel-pill:hover {
  color: var(--text);
  background: var(--border-light);
}

/* Ícones nos estados inativos */
.reports-channel-pill[data-channel="all"] i,
.reports-channel-pill.reports-pill-all i {
  color: #0F6E56;
}
[data-theme="dark"] .reports-channel-pill[data-channel="all"] i,
body.dark-theme .reports-channel-pill[data-channel="all"] i {
  color: #10B981;
}

.reports-channel-pill[data-channel="whatsapp"] i,
.reports-channel-pill.reports-pill-wa i {
  color: #25D366;
}

.reports-channel-pill[data-channel="instagram"] i,
.reports-channel-pill.reports-pill-ig i {
  color: #E1306C;
}

.reports-channel-pill[data-channel="messenger"] i,
.reports-channel-pill.reports-pill-ms i {
  color: #0084FF;
}

/* Estados ATIVOS (Mesma lógica visual do Home e do Atendimento) */
.reports-channel-pill[data-channel="all"].active,
.reports-channel-pill.reports-pill-all.active {
  background: #0F6E56 !important;
  color: #ffffff !important;
  border-color: #0F6E56 !important;
  box-shadow: 0 2px 10px rgba(15, 110, 86, 0.4) !important;
  font-weight: 700 !important;
}
.reports-channel-pill[data-channel="all"].active i,
.reports-channel-pill.reports-pill-all.active i {
  color: #ffffff !important;
}

[data-theme="dark"] .reports-channel-pill[data-channel="all"].active,
body.dark-theme .reports-channel-pill[data-channel="all"].active {
  background: #0F6E56 !important;
  color: #ffffff !important;
  border-color: #10B981 !important;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.45) !important;
}

.reports-channel-pill[data-channel="whatsapp"].active,
.reports-channel-pill.reports-pill-wa.active {
  background: #25D366 !important;
  color: #ffffff !important;
  border-color: #25D366 !important;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.45) !important;
  font-weight: 700 !important;
}
.reports-channel-pill[data-channel="whatsapp"].active i,
.reports-channel-pill.reports-pill-wa.active i {
  color: #ffffff !important;
}

.reports-channel-pill[data-channel="instagram"].active,
.reports-channel-pill.reports-pill-ig.active {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important;
  color: #ffffff !important;
  border-color: #fd1d1d !important;
  box-shadow: 0 2px 10px rgba(253, 29, 29, 0.45) !important;
  font-weight: 700 !important;
}
.reports-channel-pill[data-channel="instagram"].active i,
.reports-channel-pill.reports-pill-ig.active i {
  color: #ffffff !important;
}

.reports-channel-pill[data-channel="messenger"].active,
.reports-channel-pill.reports-pill-ms.active {
  background: #0084FF !important;
  color: #ffffff !important;
  border-color: #0084FF !important;
  box-shadow: 0 2px 10px rgba(0, 132, 255, 0.45) !important;
  font-weight: 700 !important;
}
.reports-channel-pill[data-channel="messenger"].active i,
.reports-channel-pill.reports-pill-ms.active i {
  color: #ffffff !important;
}
.reports-select {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  outline: none;
}

/* 1. Cards de KPIs Executivos */
.report-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.report-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.report-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.report-kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.report-kpi-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.report-kpi-icon-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.report-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.report-kpi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  margin-top: 4px;
}
.report-kpi-sub {
  color: var(--text-muted);
}
.report-kpi-badge {
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-success { background: rgba(39, 174, 96, 0.12); color: #27AE60; }
.badge-warning { background: rgba(230, 126, 34, 0.12); color: #E67E22; }
.badge-primary { background: rgba(15, 110, 86, 0.12); color: var(--primary); }

/* 2. Insights Inteligentes */
.reports-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 20px 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reports-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.report-insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.report-insight-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.report-insight-body {
  flex: 1;
}
.report-insight-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.report-insight-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.report-insight-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* 3. Gráficos em Grid */
.reports-charts-row {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.report-card-chart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  min-width: 280px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.chart-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.chart-card-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}
.chart-badge-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.chart-canvas-container {
  position: relative;
  width: 100%;
}
.channel-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.channel-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.channel-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

/* 4. Funil CRM */
.reports-funnel-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.funnel-step-item {
  padding: 10px 14px;
  border-left: 3px solid var(--primary);
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
  border-left-width: 3px;
}
.funnel-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.funnel-step-name {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.funnel-bar-bg {
  height: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  margin: 6px 0;
  overflow: hidden;
}
.funnel-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.funnel-step-desc {
  font-size: 11px;
  color: var(--text-muted);
}

/* 5. Tabela Leaderboard */
.table-agent-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.badge-role {
  font-size: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text-muted);
  margin-left: 5px;
  font-weight: 500;
}
.score-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 11px;
  border: 1px solid transparent;
}


/* ============================================================
   CONFIGURAÇÕES / EQUIPE
   ============================================================ */
#tab-config,
#tab-equipe {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}
#tab-config::-webkit-scrollbar,
#tab-equipe::-webkit-scrollbar,
#tab-relatorios::-webkit-scrollbar {
  width: 6px;
}
#tab-config::-webkit-scrollbar-thumb,
#tab-equipe::-webkit-scrollbar-thumb,
#tab-relatorios::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
}
#tab-config::-webkit-scrollbar-thumb:hover,
#tab-equipe::-webkit-scrollbar-thumb:hover,
#tab-relatorios::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.settings-view {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 40px;
  box-sizing: border-box;
}
.settings-view h2 { font-size: 20px; font-weight: 600; margin: 0 0 20px; }
.settings-view h3 {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin: 28px 0 12px;
}

/* ---- Admin-only section header ---- */
.admin-section-header {
  display: flex; align-items: center; gap: 10px;
  background: #F0F9FF; border: 1px solid #BAE6FD;
  border-radius: 10px; padding: 12px 16px;
  font-size: 13px; font-weight: 600; color: #0369A1;
  margin: 28px 0 20px;
}
.admin-section-header i { font-size: 15px; flex-shrink: 0; }

/* ---- Sidenav divider ---- */
.sidenav-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 14px;
  flex-shrink: 0;
}

/* ---- New conversation dropdown ---- */
.new-conv-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
}
.new-conv-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 180px;
  z-index: 20;
  overflow: hidden;
}
.new-conv-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  border: none; background: none;
  font-size: 13px; color: var(--text);
  cursor: pointer; text-align: left;
  transition: background .1s;
}
.new-conv-menu-item:hover { background: var(--bg); color: var(--accent); }
.new-conv-menu-item i { font-size: 13px; color: var(--text-muted); width: 16px; text-align: center; }
.new-conv-menu-item:hover i { color: var(--accent); }
.new-conv-menu-item + .new-conv-menu-item { border-top: 1px solid var(--border-light); }

/* ---- Channel bars (dashboard) ---- */
.channel-bars-list { display: flex; flex-direction: column; gap: 12px; }
.channel-bar-row {
  display: flex; align-items: center; gap: 12px;
}
.channel-bar-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; flex-shrink: 0;
}
.channel-bar-icon.whatsapp { background: var(--whatsapp); }
.channel-bar-icon.messenger { background: var(--messenger); }
.channel-bar-icon.instagram { background: var(--instagram); }
.channel-bar-body { flex: 1; min-width: 0; }
.channel-bar-header {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 600; margin-bottom: 5px;
}
.channel-bar-label { color: var(--text); }
.channel-bar-pct { color: var(--text-muted); font-weight: 400; }
.channel-bar-track {
  height: 7px; background: var(--border);
  border-radius: 99px; overflow: hidden;
}
.channel-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width .4s ease;
}
.channel-bar-fill.whatsapp { background: var(--whatsapp); }
.channel-bar-fill.messenger { background: var(--messenger); }
.channel-bar-fill.instagram { background: var(--instagram); }
.channel-bar-count {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  flex-shrink: 0; width: 28px; text-align: right;
}

/* ---- Agent rank cards (dashboard) ---- */
.agent-rank-list { display: flex; flex-direction: column; gap: 8px; }
.agent-rank-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border-radius: 8px; padding: 10px 12px;
  border: 1px solid var(--border-light);
}
.agent-rank-pos {
  font-size: 13px; font-weight: 700; color: var(--text-light);
  width: 20px; text-align: center; flex-shrink: 0;
}
.agent-rank-pos.gold { color: #F59E0B; }
.agent-rank-pos.silver { color: #94A3B8; }
.agent-rank-pos.bronze { color: #B45309; }
.agent-rank-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.agent-rank-info { flex: 1; min-width: 0; }
.agent-rank-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-rank-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.agent-rank-badge {
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--accent); padding: 3px 9px;
  border-radius: 99px; flex-shrink: 0;
}


.settings-form { display: flex; gap: 10px; flex-wrap: wrap; }
.settings-form input, .settings-form select {
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 13px; flex: 1; min-width: 150px;
  background: var(--surface);
  transition: border-color .12s;
}
.settings-form input:focus,
.settings-form select:focus { outline: none; border-color: var(--accent); }
.settings-form button {
  padding: 10px 18px; border: none; border-radius: 8px;
  background: var(--topbar-bg); color: white;
  cursor: pointer; flex-shrink: 0; font-weight: 600;
  transition: background .12s;
}
.settings-form button:hover { background: var(--accent-dark); }

.channels-summary { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.channel-status-chip {
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border); font-size: 13px; background: var(--surface);
}
.channel-status-chip.connected {
  border-color: #22C55E; color: #16A34A;
  background: #F0FDF4;
}

.channel-config-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 14px;
}
.channel-config-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
}
.channel-config-card h3 { margin: 0 0 14px; font-size: 14px; color: var(--text); }
.channel-config-card .settings-form { flex-direction: column; }
.channel-config-card .settings-form input { width: 100%; }

.webhook-urls-list {
  list-style: none; display: flex; flex-direction: column; gap: 8px;
}
.webhook-urls-list li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  font-size: 12px; font-family: ui-monospace, monospace;
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.webhook-urls-list .wu-label { font-family: inherit; color: var(--text-muted); flex-shrink: 0; }
.webhook-urls-list .wu-copy {
  border: none; background: transparent; color: var(--accent);
  cursor: pointer; font-family: inherit; font-size: 12px;
}
.webhook-urls-list .wu-copy:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .menu-toggle-btn { display: flex !important; }

  .sidenav {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 260px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-right: none;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  .sidenav.open {
    transform: translateX(0);
    width: 260px;
    overflow-y: auto;
  }
  .sidenav.open .sidenav-text,
  .sidenav.open .sidenav-group-label,
  .sidenav.open .sidenav-search-input,
  .sidenav.open .sidenav-user-meta { opacity: 1; }

  .sidenav-overlay:not(.hidden) {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 35;
  }

  .brand-name { display: none; }

  .topbar-user-name { display: none; }
  .availability-label { display: none; }

  .sidebar { width: 100%; }
  .conversation-pane { display: none; }
  .layout.has-open-conv .sidebar { display: none; }
  .layout.has-open-conv .conversation-pane { display: flex; }

  .contact-info-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 310px;
    z-index: 25;
    box-shadow: -4px 0 24px rgba(0,0,0,.22);
  }
  .btn-contact-text {
    display: none;
  }

  .mobile-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .mobile-back-btn:active {
    background: var(--bg);
  }

  .reply-area {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--surface);
  }

  .sidebar-toolbar button,
  .conv-tab,
  .reply-icon-btn,
  .reply-send-btn {
    min-height: 40px;
  }

  .kanban-board {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 12px;
    gap: 10px;
  }
  .kanban-column {
    scroll-snap-align: start;
    min-width: 260px;
  }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-panels { grid-template-columns: 1fr; }
}

/* ============================================================
   MENU NA BARRA LATERAL ESQUERDA & RESPONSIVIDADE
   ============================================================ */
.sidenav-menu-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  height: 52px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
  flex-shrink: 0;
}

.sidenav-menu-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sidenav-menu-toggle:hover {
  background: var(--border-light);
  color: var(--accent);
  transform: translateY(-1px) scale(1.05);
}
.sidenav-menu-toggle:active {
  transform: scale(0.95);
}

.sidenav-menu-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
}
.sidenav.open .sidenav-menu-label {
  opacity: 1;
}

@media (min-width: 769px) {
  .topbar-left .menu-toggle-btn.mobile-only {
    display: none !important;
  }
}

/* ============================================================
   BOTÕES DE FECHAR NOTIFICAÇÕES E BANNERS
   ============================================================ */
.notif-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #FFF7ED;
  border-bottom: 1px solid #FED7AA;
  padding: 10px 14px;
  font-size: 12px;
  color: #92400E;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.notif-banner-content {
  flex: 1;
  min-width: 0;
}

.notif-banner-close-btn {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.notif-banner-close-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
  transform: scale(1.1);
}

.notif-banner.dismissed {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
  overflow: hidden;
  pointer-events: none;
}

/* ============================================================
   TOPBAR DROPDOWNS (AJUSTES & NOTIFICAÇÕES)
   ============================================================ */
.topbar-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.topbar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(14, 22, 51, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.topbar-dropdown.hidden {
  display: none !important;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}

.dropdown-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-close-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.dropdown-close-btn:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  transform: scale(1.1);
}

.dropdown-body {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px 0;
}

.dropdown-item {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s;
}

.dropdown-item.dropdown-clickable {
  cursor: pointer;
}
.dropdown-item.dropdown-clickable:hover {
  background: var(--bg);
}

.dropdown-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.dropdown-icon {
  font-size: 15px;
  color: var(--accent);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.dropdown-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dropdown-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.dropdown-item-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.dropdown-arrow {
  font-size: 12px;
  color: var(--text-light);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn-outline:hover {
  background: var(--accent);
  color: #fff;
}

.switch-sm {
  width: 34px !important;
  height: 18px !important;
}
.switch-sm .slider::before {
  width: 12px !important;
  height: 12px !important;
  left: 3px !important;
  top: 3px !important;
}
.switch-sm input:checked + .slider::before {
  transform: translateX(16px) !important;
}

.link-btn-xs {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 4px;
}
.link-btn-xs:hover {
  text-decoration: underline;
}

/* Notificações individuais no dropdown */
.notif-item {
  padding: 10px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  transition: background 0.15s;
}
.notif-item:hover {
  background: var(--border-light);
}
[data-theme="dark"] .notif-item:hover,
body.dark-theme .notif-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.notif-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid #FDE68A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .notif-item-icon,
body.dark-theme .notif-item-icon {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3) !important;
}

#notifications-dropdown .dropdown-title i {
  color: #F59E0B !important;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}

.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.notif-item-msg {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}
.notif-item-time {
  font-size: 10px;
  color: var(--text-light);
  margin-top: 4px;
}
.notif-item-dismiss {
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-size: 12px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.notif-item-dismiss:hover {
  opacity: 1;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  transform: scale(1.15);
}

.empty-notifs {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
.empty-notifs i {
  font-size: 32px;
  color: #94A3B8;
  margin-bottom: 8px;
  display: block;
}

[data-theme="dark"] .empty-notifs i,
body.dark-theme .empty-notifs i {
  color: #FBBF24 !important;
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.45)) !important;
  opacity: 0.95 !important;
}

.topbar-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  line-height: 1.2;
  display: none;
  border: 2px solid var(--topbar-bg);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}
.topbar-badge.visible {
  display: inline-block;
}

/* ============================================================
   DROPDOWN DE TEMPO DE ATENDIMENTO & PRODUTIVIDADE
   ============================================================ */
.timer-dropdown-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timer-session-card {
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 100%);
  border: 1px solid #A7F3D0;
}

[data-theme="dark"] .timer-session-card,
body.dark-theme .timer-session-card {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.45) 0%, rgba(15, 110, 86, 0.25) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.timer-session-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.timer-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #059669;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-theme="dark"] .timer-label,
body.dark-theme .timer-label {
  color: #34D399;
}

.timer-clock {
  font-size: 18px;
  font-weight: 800;
  font-family: monospace;
  color: #064E3B;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .timer-clock,
body.dark-theme .timer-clock {
  color: #6EE7B7;
  text-shadow: 0 0 10px rgba(110, 231, 183, 0.4);
}

.timer-session-start {
  font-size: 11px;
  color: var(--text-muted);
}

.timer-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.timer-metric-box {
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.timer-metric-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  font-family: monospace;
}

.timer-metric-lbl {
  font-size: 9.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.timer-action-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-timer-pause {
  width: 100%;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.18s ease;
}
.btn-timer-pause:hover {
  background: var(--border-light);
  transform: translateY(-1px);
}
.btn-timer-pause.paused {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: #F59E0B !important;
  color: #F59E0B !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3) !important;
}

/* ============================================================
   ANIMAÇÕES UNIVERSAIS PARA TODOS OS BOTÕES
   ============================================================ */
button,
.topbar-icon-btn,
.icon-btn-toolbar,
.banner-action-btn,
.sidenav-item,
.conv-tab,
.reply-send-btn,
.reply-icon-btn,
.btn-sm,
.secondary-btn,
.new-conv-menu-item {
  position: relative;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.18s ease,
              box-shadow 0.18s ease,
              color 0.18s ease,
              border-color 0.18s ease !important;
}

button:hover:not(:disabled),
.topbar-icon-btn:hover:not(:disabled),
.icon-btn-toolbar:hover:not(:disabled),
.banner-action-btn:hover:not(:disabled),
.conv-tab:hover:not(:disabled),
.btn-sm:hover:not(:disabled),
.reply-send-btn:hover:not(:disabled) {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

button:active:not(:disabled),
.topbar-icon-btn:active:not(:disabled),
.icon-btn-toolbar:active:not(:disabled),
.banner-action-btn:active:not(:disabled),
.conv-tab:active:not(:disabled),
.btn-sm:active:not(:disabled),
.reply-send-btn:active:not(:disabled) {
  transform: scale(0.96) translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.topbar-icon-btn:hover i,
.icon-btn-toolbar:hover i {
  transform: scale(1.15);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animação de rotação 360° no botão de atualizar */
@keyframes spinRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.btn-refreshing i,
.is-refreshing i,
i.is-refreshing,
.fa-spin-fast {
  animation: spinRotate 0.65s linear infinite !important;
  display: inline-block;
}

/* ============================================================
   TOASTS COM BOTÃO DE FECHAR
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: #1E293B;
  color: #FFFFFF;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  min-width: 280px;
  max-width: 420px;
  animation: toastSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.success { background: #065F46; border-left: 4px solid #10B981; }
.toast.info { background: #1E293B; border-left: 4px solid #3B82F6; }
.toast.warning { background: #78350F; border-left: 4px solid #F59E0B; }
.toast.error { background: #7F1D1D; border-left: 4px solid #EF4444; }

.toast-icon { font-size: 15px; flex-shrink: 0; }
.toast-message { flex: 1; min-width: 0; line-height: 1.35; }

.toast-close-btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 14px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.toast-close-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.15);
}

@keyframes toastSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   DROPDOWN DE FILTROS DA SIDEBAR
   ============================================================ */
.filter-dropdown-wrap {
  position: relative;
}

.filter-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: -52px;
  left: auto;
  width: 290px;
  max-width: 90vw;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(14, 22, 51, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-dropdown.hidden {
  display: none !important;
}

.filter-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}

.filter-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-dropdown-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.filter-channel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.filter-chip:hover {
  border-color: var(--accent);
  background: #EFF6FF;
}
.filter-chip.active {
  background: var(--accent);
  color: #fff !important;
  border-color: var(--accent);
}
.filter-chip.active i {
  color: #fff !important;
}

.filter-select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.filter-select:focus {
  border-color: var(--accent);
}

.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.filter-checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.filter-dropdown-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s;
}
.btn-ghost:hover {
  color: var(--danger);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--accent-dark);
}

.filter-empty-message {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
.filter-empty-message i {
  font-size: 22px;
  color: var(--text-light);
  margin-bottom: 6px;
  display: block;
}
.filter-empty-message a {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  margin-left: 4px;
}

/* ============================================================
   MÓDULO HOME / INÍCIO (GALÁXIA ESPIRAL & SIMULAÇÃO OMNICHANNEL INTELIGENTE)
   ============================================================ */

.home-view {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--text);
}

/* Hero de Boas-Vindas */
.home-hero-card {
  background: linear-gradient(135deg, #0F6E56 0%, #0b5240 100%);
  color: #ffffff;
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 10px 25px -5px rgba(15, 110, 86, 0.25);
}

.home-hero-content {
  flex: 1;
  min-width: 300px;
}

.home-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.home-hero-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.home-brand-accent {
  color: #5eead4;
}

.home-hero-desc {
  font-size: 13.5px;
  opacity: 0.92;
  line-height: 1.5;
  max-width: 680px;
  margin: 0 0 16px 0;
}

.home-hero-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.home-badge {
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.home-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 180px;
}

.home-hero-actions .btn-lg {
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.home-hero-actions .primary-btn {
  background: #ffffff;
  color: #0F6E56;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.home-hero-actions .primary-btn:hover {
  background: #f1f5f9;
  transform: translateY(-1px);
}

.home-hero-actions .secondary-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.home-hero-actions .secondary-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Cockpit de Métricas Rápidas */
.home-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.home-kpi-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.home-kpi-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: #0F6E56;
}

.home-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.home-kpi-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.home-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.home-kpi-label {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.home-kpi-arrow {
  color: var(--text-muted);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.home-kpi-item:hover .home-kpi-arrow {
  opacity: 1;
  transform: translateX(3px);
  color: #0F6E56;
}

/* ============================================================
   PALCO INTERATIVO OMNICHANNEL 3D & GALÁXIA ESPIRAL
   ============================================================ */

.home-interactive-showcase {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.home-showcase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.home-showcase-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.home-showcase-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}

.live-pill-tag {
  font-size: 10px;
  font-weight: 800;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.05em;
}

.live-pill-tag .tiny-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

/* Controles de Simulação & Botões de Canal */
.home-sim-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-mode-toggle-btn {
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.sim-mode-toggle-btn.active {
  background: rgba(37, 211, 102, 0.15);
  color: #25D366;
  border-color: #25D366;
  box-shadow: 0 0 12px rgba(37, 211, 102, 0.25);
}

.sim-mode-toggle-btn:hover {
  transform: translateY(-1px);
}

.home-sim-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-sim-controls .sim-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.home-sim-controls .sim-btn:hover {
  transform: translateY(-1px);
  border-color: #0F6E56;
}

[data-theme="dark"] .home-sim-controls .sim-btn:hover,
body.dark-theme .home-sim-controls .sim-btn:hover {
  border-color: #25D366;
}

/* Estados ATIVOS específicos por canal */
.home-sim-controls .sim-btn.sim-btn-wa.active {
  background: #25D366 !important;
  color: #ffffff !important;
  border-color: #25D366 !important;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.45);
  font-weight: 700;
}

.home-sim-controls .sim-btn.sim-btn-ig.active {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045) !important;
  color: #ffffff !important;
  border-color: #fd1d1d !important;
  box-shadow: 0 2px 10px rgba(253, 29, 29, 0.45);
  font-weight: 700;
}

.home-sim-controls .sim-btn.sim-btn-ms.active {
  background: #0084FF !important;
  color: #ffffff !important;
  border-color: #0084FF !important;
  box-shadow: 0 2px 10px rgba(0, 132, 255, 0.45);
  font-weight: 700;
}

.home-sim-controls .sim-btn-pulse {
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #0F6E56, #25D366);
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(15, 110, 86, 0.35);
}

.home-sim-controls .sim-btn-pulse:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5);
}

/* Palco Espaçoso da Simulação 3D & Galáxia */
.home-stage-canvas-wrap {
  position: relative;
  min-height: 500px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--border);
  perspective: 1200px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Modo Claro: Palco Suave com Contraste Perfeito */
:root .home-stage-canvas-wrap {
  background: radial-gradient(ellipse at center, #ffffff 0%, #edf5f8 60%, #e2eef4 100%);
  border-color: #cbd5e1;
  box-shadow: inset 0 0 60px rgba(15, 110, 86, 0.04);
}

/* Modo Escuro: Palco Cósmico Espacial Profundo */
[data-theme="dark"] .home-stage-canvas-wrap,
body.dark-theme .home-stage-canvas-wrap {
  background: radial-gradient(ellipse at center, #09131e 0%, #04080e 65%, #010306 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.75);
}

/* ============================================================
   ATMOSFERA GALÁCTICA VIVA (BRAÇOS ESPIRAIS, HALO & BULBO)
   ============================================================ */

.home-galaxy-ambient-glow {
  position: absolute;
  width: 760px;
  height: 760px;
  top: 50%;
  left: 50%;
  margin-top: -380px;
  margin-left: -380px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: ambientBreath 9s ease-in-out infinite alternate;
  transform: translateZ(-35px);
}

:root .home-galaxy-ambient-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, rgba(14, 165, 233, 0.08) 40%, rgba(168, 85, 247, 0.04) 65%, transparent 75%);
}

[data-theme="dark"] .home-galaxy-ambient-glow,
body.dark-theme .home-galaxy-ambient-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(14, 165, 233, 0.15) 40%, rgba(168, 85, 247, 0.1) 65%, transparent 75%);
}

.home-spiral-galaxy-arms {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 780px;
  height: 780px;
  margin-top: -390px;
  margin-left: -390px;
  border-radius: 50%;
  filter: blur(36px);
  pointer-events: none;
  z-index: 1;
  animation: spiralArmsSpin 50s linear infinite;
  transform: translateZ(-25px);
}

:root .home-spiral-galaxy-arms {
  background: conic-gradient(
    from 0deg,
    rgba(16, 185, 129, 0.12) 0deg,
    transparent 42deg,
    rgba(14, 165, 233, 0.11) 120deg,
    transparent 162deg,
    rgba(168, 85, 247, 0.09) 240deg,
    transparent 282deg,
    rgba(16, 185, 129, 0.12) 360deg
  );
}

[data-theme="dark"] .home-spiral-galaxy-arms,
body.dark-theme .home-spiral-galaxy-arms {
  background: conic-gradient(
    from 0deg,
    rgba(16, 185, 129, 0.25) 0deg,
    transparent 42deg,
    rgba(14, 165, 233, 0.22) 120deg,
    transparent 162deg,
    rgba(168, 85, 247, 0.18) 240deg,
    transparent 282deg,
    rgba(16, 185, 129, 0.25) 360deg
  );
}

.home-galactic-core-bulge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  margin-top: -190px;
  margin-left: -190px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: coreBulgePulse 6s ease-in-out infinite alternate;
}

:root .home-galactic-core-bulge {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(14, 165, 233, 0.09) 40%, rgba(168, 85, 247, 0.04) 65%, transparent 75%);
}

[data-theme="dark"] .home-galactic-core-bulge,
body.dark-theme .home-galactic-core-bulge {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(14, 165, 233, 0.16) 40%, rgba(168, 85, 247, 0.09) 65%, transparent 75%);
}

/* Partículas Estelares Flutuantes Ambientais */
.home-galaxy-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(-10px);
}

.gstar {
  position: absolute;
  border-radius: 50%;
  opacity: 0.65;
  pointer-events: none;
  animation: particleFloat 6s ease-in-out infinite alternate;
}

.gstar.s1 { width: 7px; height: 7px; background: #25D366; left: 24%; top: 22%; animation-duration: 5s; box-shadow: 0 0 10px #25D366; }
.gstar.s2 { width: 5px; height: 5px; background: #00F5D4; right: 28%; top: 18%; animation-duration: 7s; box-shadow: 0 0 8px #00F5D4; }
.gstar.s3 { width: 8px; height: 8px; background: #38BDF8; left: 30%; bottom: 22%; animation-duration: 6.5s; box-shadow: 0 0 12px #38BDF8; }
.gstar.s4 { width: 6px; height: 6px; background: #E1306C; right: 24%; bottom: 25%; animation-duration: 8s; box-shadow: 0 0 10px #E1306C; }
.gstar.s5 { width: 4px; height: 4px; background: #F59E0B; left: 45%; top: 14%; animation-duration: 5.5s; box-shadow: 0 0 7px #F59E0B; }
.gstar.s6 { width: 6px; height: 6px; background: #C084FC; right: 42%; bottom: 18%; animation-duration: 7.8s; box-shadow: 0 0 9px #C084FC; }
.gstar.s7 { width: 5px; height: 5px; background: #10B981; left: 16%; top: 48%; animation-duration: 5.8s; box-shadow: 0 0 8px #10B981; }
.gstar.s8 { width: 5px; height: 5px; background: #67E8F9; right: 16%; top: 44%; animation-duration: 6.9s; box-shadow: 0 0 7px #67E8F9; }

.home-omni-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Cena 3D com Perspectiva e Parallax ao Mover o Mouse */
.home-stage-3d-scene {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex: 1;
  padding: 36px 40px;
  box-sizing: border-box;
  gap: 24px;
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
}

/* Balões Flutuantes (Lead e Atendente) */
.home-stage-3d-scene .floating-chat-bubble {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 320px;
  max-width: 36%;
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.25s ease;
  box-sizing: border-box;
  transform-style: preserve-3d;
  z-index: 5;
}

.home-stage-3d-scene .floating-chat-bubble:hover {
  transform: translateY(-4px) scale(1.02);
}

/* Badges numeradas dos passos da simulação */
.bubble-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.step-badge-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

/* CORPO DA MENSAGEM & EQUALIZADOR DE ÁUDIO CINEMATOGRÁFICO */
.home-stage-3d-scene .bubble-message-body {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: auto !important;
}

.home-stage-3d-scene .bubble-message-body p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.bubble-audio-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 12px;
  opacity: 0.75;
}

.bubble-audio-wave span {
  display: inline-block;
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  animation: audioWaveBar 1.2s ease-in-out infinite alternate;
}

.bubble-audio-wave span:nth-child(1) { animation-delay: 0.1s; height: 5px; }
.bubble-audio-wave span:nth-child(2) { animation-delay: 0.3s; height: 11px; }
.bubble-audio-wave span:nth-child(3) { animation-delay: 0.2s; height: 7px; }
.bubble-audio-wave span:nth-child(4) { animation-delay: 0.5s; height: 13px; }
.bubble-audio-wave span:nth-child(5) { animation-delay: 0.15s; height: 6px; }
.bubble-audio-wave span:nth-child(6) { animation-delay: 0.4s; height: 10px; }
.bubble-audio-wave span:nth-child(7) { animation-delay: 0.25s; height: 4px; }

@keyframes audioWaveBar {
  0% { transform: scaleY(0.4); opacity: 0.5; }
  100% { transform: scaleY(1.3); opacity: 1; }
}

/* ============================================================
   ESTILOS DE ALTO CONTRASTE (MODO CLARO E ESCURO PERFEITOS)
   ============================================================ */

/* --- MODO CLARO --- */
:root .home-stage-3d-scene .floating-chat-bubble.bubble-left {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-sender-name {
  color: #0f172a !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-step-badge {
  color: #0F6E56 !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-left .step-badge-num {
  background: #0F6E56 !important;
  color: #ffffff !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body p {
  color: #0f172a !important;
  font-weight: 500 !important;
}

/* MODO CLARO: BALÃO DO ATENDENTE (SOLUÇÃO DEFINITIVA DO BUG BRANCO) */
:root .home-stage-3d-scene .floating-chat-bubble.bubble-right {
  background: #ffffff !important;
  color: #064e3b !important;
  border: 1px solid #86efac !important;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.12) !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-sender-name {
  color: #065f46 !important;
  font-weight: 700 !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-step-badge {
  color: #059669 !important;
  border-bottom-color: rgba(5, 150, 105, 0.2) !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-right .step-badge-num {
  background: #059669 !important;
  color: #ffffff !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #064e3b !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body p {
  color: #064e3b !important;
  font-weight: 500 !important;
}

:root .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-meta-footer {
  color: #059669 !important;
}

/* --- MODO ESCURO --- */
[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-left,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-left {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-sender-name,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-sender-name {
  color: #f8fafc !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-step-badge,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-step-badge {
  color: #38bdf8 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-left .step-badge-num,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-left .step-badge-num {
  background: #0284c7 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body {
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
  color: #f1f5f9 !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body p,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-left .bubble-message-body p {
  color: #f1f5f9 !important;
  font-weight: 500 !important;
}

/* MODO ESCURO: BALÃO DO ATENDENTE */
[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-right,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-right {
  background: #064e3b !important;
  color: #ecfdf5 !important;
  border: 1px solid #10b981 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 25px rgba(16, 185, 129, 0.25) !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-sender-name,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-sender-name {
  color: #a7f3d0 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-step-badge,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-step-badge {
  color: #34d399 !important;
  border-bottom-color: rgba(52, 211, 153, 0.2) !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-right .step-badge-num,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-right .step-badge-num {
  background: #10b981 !important;
  color: #052e16 !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #ecfdf5 !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body p,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-message-body p {
  color: #ecfdf5 !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-meta-footer,
body.dark-theme .home-stage-3d-scene .floating-chat-bubble.bubble-right .bubble-meta-footer {
  color: #6ee7b7 !important;
}

/* Senders e Avatares */
.bubble-sender {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bubble-avatar-lead {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0F6E56, #25D366);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(15, 110, 86, 0.3);
  flex-shrink: 0;
}

.bubble-avatar-agent {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #00F5D4);
  color: #052e16;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
  flex-shrink: 0;
}

.bubble-sender-name {
  font-size: 13.5px;
  font-weight: 700;
  display: block;
}

.bubble-channel-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.bubble-channel-tag.wa { background: rgba(37, 211, 102, 0.15); color: #25D366; }
.bubble-channel-tag.ig { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.bubble-channel-tag.fb { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }

.bubble-status-online {
  font-size: 11px;
  color: #25D366;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.bubble-meta-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 10px;
}

.message-check.read {
  color: #38bdf8 !important;
}

/* ============================================================
   NÚCLEO GALÁCTICO TASKROUTER (PLANOS ORBITAIS 3D & COROA)
   ============================================================ */

.home-distribution-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 4;
  min-width: 230px;
  text-align: center;
  transform-style: preserve-3d;
}

.home-distribution-hub .galaxy-core-system {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.home-orbit-plane {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.home-orbit-plane.plane-1 {
  width: 176px;
  height: 176px;
  border: 1.5px solid rgba(16, 185, 129, 0.75);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4), inset 0 0 12px rgba(16, 185, 129, 0.25);
  animation: galacticPlaneSpin1 18s linear infinite;
}

.home-orbit-plane.plane-2 {
  width: 150px;
  height: 150px;
  border: 1.5px dashed rgba(14, 165, 233, 0.8);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.4);
  animation: galacticPlaneSpin2 13s linear infinite reverse;
}

.home-corona-pulse {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.65);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  pointer-events: none;
  z-index: 4;
  animation: coronaPulse 3.5s ease-in-out infinite;
}

.home-photon-trail {
  position: absolute;
  width: 114px;
  height: 114px;
  border-radius: 50%;
  border: 1.5px dotted rgba(245, 158, 11, 0.85);
  pointer-events: none;
  z-index: 4;
  animation: photonTrailSpin 10s linear infinite;
}

.dist-radar-sweep {
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(37, 211, 102, 0.24) 0deg, transparent 60deg, transparent 360deg);
  animation: orbitRotateClockwise 3.5s linear infinite;
  pointer-events: none;
  z-index: 4;
}

@keyframes orbitRotateClockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.dist-hub-circle.galaxy-core-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #064E3B 0%, #0F6E56 50%, #0284C7 100%) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.35), 0 0 28px rgba(16, 185, 129, 0.75) !important;
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  position: relative;
  z-index: 5;
  border: 2px solid rgba(255, 255, 255, 0.65);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.dist-hub-card {
  border-radius: 14px;
  padding: 14px 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 230px;
  transition: all 0.2s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Modo Claro: Card Central */
:root .dist-hub-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cbd5e1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

:root .dist-hub-title {
  color: #0f172a;
}

/* Modo Escuro: Card Central */
[data-theme="dark"] .dist-hub-card,
body.dark-theme .dist-hub-card {
  background: rgba(17, 24, 39, 0.92);
  border: 1px solid #1F293D;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .dist-hub-title,
body.dark-theme .dist-hub-title {
  color: #f1f5f9;
}

.dist-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.dist-hub-title {
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dist-live-tag {
  font-size: 9.5px;
  font-weight: 800;
  color: #25D366;
  background: rgba(37, 211, 102, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.05em;
}

.dist-hub-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dist-metric-chip {
  flex: 1;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  text-align: center;
}

[data-theme="dark"] .dist-metric-chip,
body.dark-theme .dist-metric-chip {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.metric-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.metric-val {
  font-size: 11px;
  font-weight: 800;
  color: #25D366;
  font-family: monospace;
}

.dist-hub-status {
  font-size: 10.5px;
  font-weight: 600;
  color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.dist-hub-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.dist-step {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.dist-step.active {
  color: #25D366;
  background: rgba(37, 211, 102, 0.15);
}

.dist-step-arrow {
  font-size: 8px;
  color: var(--text-muted);
}

/* Barra de Telemetria */
.home-showcase-telemetry {
  position: relative;
  z-index: 3;
  padding: 11px 20px;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:root .home-showcase-telemetry {
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid #cbd5e1;
  color: #475569;
}

[data-theme="dark"] .home-showcase-telemetry,
body.dark-theme .home-showcase-telemetry {
  background: rgba(5, 10, 15, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

/* ============================================================
   CARDS DE APRESENTAÇÃO DOS MÓDULOS (MODO CLARO E ESCURO)
   ============================================================ */

.home-modules-section {
  margin-top: 4px;
}

.home-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.home-module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
}

.home-module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: #0F6E56;
}

.home-module-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-bottom: 12px;
}

.home-module-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
}

.home-module-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 16px 0;
  flex: 1;
}

.home-module-link {
  font-size: 12px;
  font-weight: 600;
  color: #0F6E56;
  display: flex;
  align-items: center;
  gap: 5px;
}

[data-theme="dark"] .home-module-link,
body.dark-theme .home-module-link {
  color: #25D366;
}

.home-module-card:hover .home-module-link i {
  transform: translateX(4px);
  transition: transform 0.15s ease;
}

/* Responsividade da Apresentação */
@media (max-width: 992px) {
  .home-stage-canvas-wrap {
    height: auto;
    min-height: 540px;
  }
  .home-stage-3d-scene {
    flex-direction: column;
    padding: 30px 20px;
    gap: 20px;
  }
  .home-stage-3d-scene .floating-chat-bubble {
    width: 100% !important;
    max-width: 90% !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .menu-toggle-btn { display: flex !important; }

  .sidenav {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 260px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .25s ease;
    border-right: none;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }
  .sidenav.open {
    transform: translateX(0);
    width: 260px;
    overflow-y: auto;
  }
  .sidenav.open .sidenav-text,
  .sidenav.open .sidenav-group-label,
  .sidenav.open .sidenav-search-input,
  .sidenav.open .sidenav-user-meta { opacity: 1; }

  .sidenav-overlay:not(.hidden) {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 35;
  }

  .brand-name { display: none; }

  .topbar-user-name { display: none; }
  .availability-label { display: none; }

  .sidebar { width: 100%; }
  .conversation-pane { display: none; }
  .layout.has-open-conv .sidebar { display: none; }
  .layout.has-open-conv .conversation-pane { display: flex; }

  .contact-info-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 310px;
    z-index: 25;
    box-shadow: -4px 0 24px rgba(0,0,0,.22);
  }
  .btn-contact-text {
    display: none;
  }

  .mobile-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .mobile-back-btn:active {
    background: var(--bg);
  }

  .reply-area {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--surface);
  }

  .sidebar-toolbar button,
  .conv-tab,
  .reply-icon-btn,
  .reply-send-btn {
    min-height: 40px;
  }

  .kanban-board {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 12px;
    gap: 10px;
  }
  .kanban-column {
    scroll-snap-align: start;
    min-width: 260px;
  }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-panels { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TORRE DE CONTROLE DE VIGILÂNCIA & GESTÃO DE EQUIPE — OMNI CHANNEL
   Identidade Estelar Cósmica • Limite de 40 conversas simultâneas • Perfis de Acesso
   ========================================================================== */

.team-surveillance-container {
  padding: 24px;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}

/* Fundo Cósmico & Halos de Nébula */
.team-cosmic-glow {
  position: absolute;
  top: -60px;
  left: 20%;
  width: 600px;
  height: 350px;
  background: radial-gradient(circle, rgba(15, 110, 86, 0.14) 0%, rgba(14, 165, 233, 0.08) 45%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

body.dark .team-cosmic-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(139, 92, 246, 0.12) 50%, transparent 75%);
}

.team-cosmic-stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400px;
  background-image: 
    radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 120px 80px, rgba(16, 185, 129, 0.5), transparent),
    radial-gradient(1px 1px at 280px 140px, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 450px 60px, rgba(56, 189, 248, 0.5), transparent),
    radial-gradient(1px 1px at 700px 110px, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 920px 40px, rgba(168, 85, 247, 0.5), transparent);
  background-repeat: repeat-x;
  background-size: 1000px 300px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Header da Torre de Controle Estelar */
.team-header-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.dark .team-header-panel {
  background: rgba(17, 24, 39, 0.85);
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.team-header-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Núcleo de Radar Galáctico do Header (Identidade Omni Channel) */
.team-galaxy-core {
  position: relative;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.team-orbit-plane {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.team-orbit-plane.plane-outer {
  width: 58px;
  height: 58px;
  border: 1.5px solid rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
  animation: teamOrbitSpin1 12s linear infinite;
}

.team-orbit-plane.plane-inner {
  width: 46px;
  height: 46px;
  border: 1px dashed rgba(14, 165, 233, 0.7);
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
  animation: teamOrbitSpin2 8s linear infinite reverse;
}

.team-radar-sweep {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(37, 211, 102, 0.3) 0deg, transparent 65deg, transparent 360deg);
  animation: teamRadarSweep 3s linear infinite;
  pointer-events: none;
}

@keyframes teamOrbitSpin1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes teamOrbitSpin2 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes teamRadarSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.team-core-sphere {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #064E3B 0%, #0F6E56 50%, #0284C7 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 2;
}

.team-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.team-main-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}

.badge-omni-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(15, 110, 86, 0.12);
  border: 1px solid rgba(15, 110, 86, 0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #0F6E56;
}

body.dark .badge-omni-live {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34D399;
}

.badge-omni-frequency {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #D97706;
}

body.dark .badge-omni-frequency {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #FBBF24;
}

.pulse-dot-green {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseDotGreen 1.8s infinite;
}

@keyframes pulseDotGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.team-subtitle {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-light);
}

.team-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Seletor Dinâmico de Papéis (Simulador) */
.role-switcher-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.role-switcher-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 5px;
}

.role-switcher-pills {
  display: flex;
  gap: 4px;
}

.role-pill-btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.18s ease;
}

.role-pill-btn:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.05);
}

body.dark .role-pill-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

.role-pill-btn.active {
  background: #0F6E56;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(15, 110, 86, 0.35);
}

body.dark .role-pill-btn.active {
  background: #10B981;
  color: #0A0E17 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

.btn-primary-team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #0F6E56 0%, #0b5240 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 110, 86, 0.3);
  transition: all 0.2s ease;
}

.btn-primary-team:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 110, 86, 0.4);
}

.btn-primary-team:active {
  transform: translateY(0);
}

/* Banner de Perfil Ativo */
.role-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
}

.role-banner-owner {
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #B45309;
}
body.dark .role-banner-owner {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #FCD34D;
}

.role-banner-supervisor {
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #6D28D9;
}
body.dark .role-banner-supervisor {
  background: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.35);
  color: #D8B4FE;
}

.role-banner-agent {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #047857;
}
body.dark .role-banner-agent {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6EE7B7;
}

.role-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Grid de Telemetria Tática */
.team-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  position: relative;
  z-index: 1;
}

.telemetry-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(12px);
}

body.dark .telemetry-card {
  background: rgba(17, 24, 39, 0.8);
  border-color: rgba(255, 255, 255, 0.07);
}

.telemetry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 110, 86, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.dark .telemetry-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.telemetry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.telemetry-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
}

.telemetry-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.telemetry-badge.success { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.telemetry-badge.warning { background: rgba(245, 158, 11, 0.12); color: #F59E0B; }
.telemetry-badge.danger { background: rgba(239, 68, 68, 0.12); color: #EF4444; }

.telemetry-main-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.current-chats-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}

.total-slots-denom {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
}

/* Barra de Capacidade Global */
.global-capacity-track {
  width: 100%;
  height: 8px;
  background: var(--bg);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
}

.global-capacity-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fill-success { background: linear-gradient(90deg, #10B981, #059669); }
.fill-warning { background: linear-gradient(90deg, #F59E0B, #D97706); }
.fill-danger { background: linear-gradient(90deg, #EF4444, #DC2626); }

.troop-status-counters {
  display: flex;
  align-items: center;
  gap: 12px;
}

.troop-mini-stat {
  display: flex;
  flex-direction: column;
}

.mini-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.mini-stat-label {
  font-size: 11px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tiny-dot-green { width: 6px; height: 6px; background: #10B981; border-radius: 50%; display: inline-block; }
.tiny-dot-amber { width: 6px; height: 6px; background: #F59E0B; border-radius: 50%; display: inline-block; }
.tiny-dot-red { width: 6px; height: 6px; background: #EF4444; border-radius: 50%; display: inline-block; }

.telemetry-footer-text {
  font-size: 11.5px;
  color: var(--text-light);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}

/* Toolbar de Filtros e Busca */
.team-toolbar-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

[data-theme="dark"] .team-toolbar-card,
.dark-theme .team-toolbar-card,
body.dark .team-toolbar-card {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.team-filters-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-filter-pill {
  padding: 7px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.team-filter-pill:hover {
  border-color: rgba(15, 110, 86, 0.4);
  color: var(--text);
}

.team-filter-pill.active {
  background: #0F6E56;
  border-color: #0F6E56;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(15, 110, 86, 0.35);
}

[data-theme="dark"] .team-filter-pill,
.dark-theme .team-filter-pill,
body.dark .team-filter-pill {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .team-filter-pill:hover,
.dark-theme .team-filter-pill:hover,
body.dark .team-filter-pill:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: #10B981 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .team-filter-pill.active,
.dark-theme .team-filter-pill.active,
body.dark .team-filter-pill.active {
  background: #10B981 !important;
  border-color: #10B981 !important;
  color: #0A0E17 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4) !important;
}

.team-filter-pill.pill-overload {
  border-color: rgba(239, 68, 68, 0.35);
  color: #EF4444;
}

.team-filter-pill.pill-overload.active {
  background: #EF4444;
  border-color: #EF4444;
  color: #FFFFFF;
}

.pill-dot-green { width: 7px; height: 7px; background: #10B981; border-radius: 50%; }
.pill-dot-amber { width: 7px; height: 7px; background: #F59E0B; border-radius: 50%; }

.team-search-and-view {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 260px;
}

.team-search-box .search-icon {
  position: absolute;
  left: 12px;
  font-size: 13px;
  color: var(--text-light);
  pointer-events: none;
}

.team-search-box input {
  width: 100%;
  padding: 8px 32px 8px 34px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.team-search-box input:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.15);
}

[data-theme="dark"] .team-search-box input,
.dark-theme .team-search-box input,
body.dark .team-search-box input {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .team-search-box input:focus,
.dark-theme .team-search-box input:focus,
body.dark .team-search-box input:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

.clear-search-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--text-light);
  cursor: pointer;
}

.view-mode-toggle {
  display: flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.view-btn {
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--text-light);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.18s ease;
}

.view-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* ==========================================================================
   CARDS DE VIGILÂNCIA DA TROPA (RADAR CÓSMICO TÁTICO)
   ========================================================================== */

.team-surveillance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 20px;
  position: relative;
  z-index: 1;
}

.agent-surveillance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px);
}

body.dark .agent-surveillance-card {
  background: rgba(17, 24, 39, 0.82);
  border-color: rgba(255, 255, 255, 0.08);
}

.agent-surveillance-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(15, 110, 86, 0.45);
}

body.dark .agent-surveillance-card:hover {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(16, 185, 129, 0.15);
}

/* Brilho de Nébula Ambiental no topo do Card */
.card-ambient-nebula {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.6), rgba(14, 165, 233, 0.5), rgba(168, 85, 247, 0.4));
  opacity: 0.7;
}

/* Card em sobrecarga / alerta (> 30 chats) */
.agent-surveillance-card.card-under-pressure {
  border-color: rgba(239, 68, 68, 0.7);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 6px 24px rgba(239, 68, 68, 0.18);
}

.agent-surveillance-card.card-under-pressure .card-ambient-nebula {
  height: 4px;
  background: linear-gradient(90deg, #EF4444, #F59E0B, #EF4444);
  animation: pressureBarPulse 1.8s infinite alternate;
}

@keyframes pressureBarPulse {
  0% { opacity: 0.7; filter: drop-shadow(0 0 2px #EF4444); }
  100% { opacity: 1; filter: drop-shadow(0 0 8px #EF4444); }
}

.agent-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.agent-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

/* Anel Orbital do Avatar */
.agent-orbit-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px dashed rgba(16, 185, 129, 0.4);
  pointer-events: none;
  animation: avatarOrbitSpin 14s linear infinite;
}

body.dark .agent-orbit-ring {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
}

@keyframes avatarOrbitSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.agent-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.status-indicator-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2.5px solid var(--surface);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

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

.agent-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.agent-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-role-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.badge-role-owner { background: rgba(217, 119, 6, 0.12); color: #B45309; }
.badge-role-supervisor { background: rgba(139, 92, 246, 0.12); color: #7C3AED; }
.badge-role-agent { background: rgba(15, 110, 86, 0.12); color: #0F6E56; }

body.dark .badge-role-owner { background: rgba(245, 158, 11, 0.2); color: #FCD34D; }
body.dark .badge-role-supervisor { background: rgba(168, 85, 247, 0.2); color: #D8B4FE; }
body.dark .badge-role-agent { background: rgba(16, 185, 129, 0.2); color: #6EE7B7; }

.agent-status-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.status-text-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

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

/* Indicadores de Canais Ativos do Atendente */
.agent-active-channels {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.agent-channel-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #FFFFFF;
}

.agent-channel-dot.wa {
  background: #25D366;
  box-shadow: 0 0 6px rgba(37, 211, 102, 0.4);
}

.agent-channel-dot.ig {
  background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCAF45);
  box-shadow: 0 0 6px rgba(225, 48, 108, 0.4);
}

.agent-channel-dot.msg {
  background: #0084FF;
  box-shadow: 0 0 6px rgba(0, 132, 255, 0.4);
}

/* ==========================================================================
   REATOR / TERMÔMETRO DE CAPACIDADE SIMULTÂNEA (BASE 40 CONVERSAS)
   ========================================================================== */

.agent-capacity-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

body.dark .agent-capacity-section {
  background: rgba(10, 14, 23, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
}

.capacity-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.capacity-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.2px;
}

.capacity-count {
  font-size: 13px;
  color: var(--text);
}
.capacity-count.critical { color: #EF4444; font-weight: 800; }
.capacity-count.moderate { color: #F59E0B; font-weight: 800; }
.capacity-count.normal { color: #10B981; font-weight: 800; }

.capacity-percent {
  font-size: 11px;
  color: var(--text-light);
  margin-left: 2px;
}

/* Wrapper do Termômetro Cósmico */
.workload-meter-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.workload-meter-track {
  width: 100%;
  height: 9px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: visible;
  position: relative;
}

body.dark .workload-meter-track {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.workload-meter-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.workload-normal {
  background: linear-gradient(90deg, #10B981 0%, #059669 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.workload-moderate {
  background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.workload-critical {
  background: linear-gradient(90deg, #EF4444 0%, #DC2626 100%);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  animation: meterAlertPulse 1.2s infinite alternate;
}

@keyframes meterAlertPulse {
  0% { filter: brightness(1); }
  100% { filter: brightness(1.25); }
}

/* Ponto de Energia / Fóton na ponta do termômetro */
.meter-photon-head {
  position: absolute;
  right: -2px;
  top: -2px;
  width: 13px;
  height: 13px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 8px #FFFFFF, 0 0 14px currentColor;
  opacity: 0.95;
}

/* Marcadores de Escala de 40 conversas */
.meter-scale-markers {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
}

.scale-point {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-light);
  opacity: 0.75;
}

.scale-point.max {
  font-weight: 800;
  color: var(--text);
  opacity: 1;
}

.capacity-footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  margin-top: 2px;
}

.load-badge {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.load-badge-normal { color: #10B981; }
.load-badge-moderate { color: #F59E0B; }
.load-badge-critical { color: #EF4444; }

.free-slots-text {
  color: var(--text-light);
}

/* Mini KPIs de Produção (Estilo HUD Espacial) */
.agent-kpis-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 2px;
}

.mini-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg);
  padding: 8px 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color 0.2s ease;
}

body.dark .mini-kpi {
  background: rgba(10, 14, 23, 0.5);
  border-color: rgba(255, 255, 255, 0.05);
}

.kpi-label {
  font-size: 10px;
  color: var(--text-light);
  font-weight: 600;
  margin-bottom: 3px;
  letter-spacing: 0.2px;
}

.kpi-val {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

.kpi-val.highlight {
  color: #0F6E56;
}
body.dark .kpi-val.highlight {
  color: #34D399;
}

/* Painel de Vigilância & Ações do Supervisor */
.agent-surveillance-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.btn-action-spy {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(6, 182, 212, 0.12);
  color: #0284C7;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark .btn-action-spy {
  background: rgba(6, 182, 212, 0.16);
  color: #38BDF8;
  border-color: rgba(6, 182, 212, 0.4);
}

.btn-action-spy:hover {
  background: #0284C7;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

body.dark .btn-action-spy:hover {
  background: #0284C7;
  color: #FFFFFF;
}

.btn-action-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.btn-action-pause:hover {
  background: #F59E0B;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-action-pause.btn-resume {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}

.btn-action-pause.btn-resume:hover {
  background: #10B981;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .btn-action-pause,
.dark-theme .btn-action-pause,
body.dark .btn-action-pause {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #FBBF24 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] .btn-action-pause:hover,
.dark-theme .btn-action-pause:hover,
body.dark .btn-action-pause:hover {
  background: #F59E0B !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .btn-action-pause.btn-resume,
.dark-theme .btn-action-pause.btn-resume,
body.dark .btn-action-pause.btn-resume {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34D399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .btn-action-pause.btn-resume:hover,
.dark-theme .btn-action-pause.btn-resume:hover,
body.dark .btn-action-pause.btn-resume:hover {
  background: #10B981 !important;
  color: #FFFFFF !important;
}

.btn-action-reassign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  flex-shrink: 0;
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.btn-action-reassign:hover {
  background: #EF4444;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .btn-action-reassign,
.dark-theme .btn-action-reassign,
body.dark .btn-action-reassign {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #F87171 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .btn-action-reassign:hover,
.dark-theme .btn-action-reassign:hover,
body.dark .btn-action-reassign:hover {
  background: #EF4444 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   PÓDIO DE PRODUÇÃO DO DIA (TOP 3 HOLOGRÁFICO)
   ========================================================================== */

.podium-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(14px);
}

body.dark .podium-section {
  background: rgba(17, 24, 39, 0.8);
  border-color: rgba(255, 255, 255, 0.08);
}

.podium-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.podium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .podium-grid {
    grid-template-columns: 1fr;
  }
}

.podium-card {
  border-radius: 16px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.podium-card:hover {
  transform: translateY(-3px);
}

.podium-first {
  border-color: rgba(245, 158, 11, 0.6);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, var(--bg) 100%);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
}

.podium-second {
  border-color: rgba(148, 163, 184, 0.6);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.14) 0%, var(--bg) 100%);
  box-shadow: 0 8px 24px rgba(148, 163, 184, 0.12);
}

.podium-third {
  border-color: rgba(217, 119, 6, 0.5);
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.1) 0%, var(--bg) 100%);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.1);
}

.podium-medal {
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 8px;
}

.podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.podium-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
}

.podium-score {
  font-size: 13.5px;
  margin: 5px 0;
  color: #0F6E56;
  font-weight: 700;
}
body.dark .podium-score {
  color: #34D399;
}

.podium-sub {
  font-size: 12px;
  color: var(--text-light);
}

/* ==========================================================================
   TABELA DE VIGILÂNCIA E PRODUÇÃO
   ========================================================================== */

.team-table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(14px);
}

body.dark .team-table-card {
  background: rgba(17, 24, 39, 0.8);
  border-color: rgba(255, 255, 255, 0.08);
}

.team-surveillance-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.team-surveillance-table th {
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.team-surveillance-table td {
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.team-surveillance-table tbody tr:hover {
  background: rgba(15, 110, 86, 0.04);
}

body.dark .team-surveillance-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.table-agent-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rank-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  min-width: 20px;
}

.agent-avatar-xs {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.table-agent-text {
  display: flex;
  flex-direction: column;
}

.agent-name-txt {
  font-size: 13.5px;
  font-weight: 700;
}

.agent-email-txt {
  font-size: 11.5px;
  color: var(--text-light);
}

.table-capacity-cell {
  min-width: 130px;
}

.table-capacity-nums {
  font-size: 12px;
  margin-bottom: 4px;
}

.table-capacity-bar {
  width: 100%;
  height: 6px;
  background: var(--bg);
  border-radius: 6px;
  overflow: hidden;
}

.table-capacity-fill {
  height: 100%;
  border-radius: 6px;
}

.table-actions-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-table-spy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(6, 182, 212, 0.12);
  color: #0284C7;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.btn-table-spy:hover {
  background: #0284C7;
  color: #FFFFFF;
}

.btn-table-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11px;
  color: var(--text-light);
  cursor: pointer;
}

.btn-table-icon:hover {
  color: var(--text);
  border-color: var(--text-light);
}

/* ==========================================================================
   VISÃO ADAPTADA AO ATENDENTE
   ========================================================================== */

.agent-view-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.my-production-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .my-production-card,
.dark-theme .my-production-card,
body.dark .my-production-card {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
}

.my-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
}

.my-avatar {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 16px;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.my-meta-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.my-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.my-name {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

[data-theme="dark"] .my-name,
.dark-theme .my-name,
body.dark .my-name {
  color: #F8FAFC !important;
}

.badge-role-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-agent {
  background: rgba(15, 110, 86, 0.12);
  color: #0F6E56;
}

[data-theme="dark"] .badge-agent,
.dark-theme .badge-agent,
body.dark .badge-agent {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34D399 !important;
}

.agent-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #10B981;
  background: rgba(16, 185, 129, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
}

.tiny-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreen 1.8s infinite;
}

.my-sub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dept-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
}

.status-duration {
  font-size: 12.5px;
  color: var(--text-light);
}

[data-theme="dark"] .status-duration,
.dark-theme .status-duration,
body.dark .status-duration {
  color: #94A3B8 !important;
}

/* Seção do Meio: Capacidade e Vagas Livres Espaçosas */
.my-slots-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-theme="dark"] .my-slots-box,
.dark-theme .my-slots-box,
body.dark .my-slots-box {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.my-slots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.my-slots-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

[data-theme="dark"] .my-slots-title,
.dark-theme .my-slots-title,
body.dark .my-slots-title {
  color: #F8FAFC !important;
}

.my-capacity-badge {
  background: rgba(6, 182, 212, 0.12);
  color: #0284C7;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 13px;
}

[data-theme="dark"] .my-capacity-badge,
.dark-theme .my-capacity-badge,
body.dark .my-capacity-badge {
  background: rgba(6, 182, 212, 0.2) !important;
  color: #38BDF8 !important;
}

.free-slots-text {
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.my-slots-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-light);
  flex-wrap: wrap;
  gap: 10px;
}

[data-theme="dark"] .my-slots-footer,
.dark-theme .my-slots-footer,
body.dark .my-slots-footer {
  color: #94A3B8 !important;
}

.load-badge {
  background: rgba(0, 0, 0, 0.04);
  padding: 3px 10px;
  border-radius: 6px;
}

[data-theme="dark"] .load-badge,
.dark-theme .load-badge,
body.dark .load-badge {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Balões de Métricas (Grid de 4 colunas horizontais amplas) */
.my-kpis-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .my-kpis-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .my-kpis-row {
    grid-template-columns: 1fr;
  }
}

.my-mini-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] .my-mini-kpi,
.dark-theme .my-mini-kpi,
body.dark .my-mini-kpi {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.my-mini-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 110, 86, 0.35);
}

.my-kpi-icon-wrap {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.my-kpi-icon-wrap.orb-cyan {
  background: rgba(6, 182, 212, 0.12);
  color: #0284C7;
}

[data-theme="dark"] .my-kpi-icon-wrap.orb-cyan,
.dark-theme .my-kpi-icon-wrap.orb-cyan,
body.dark .my-kpi-icon-wrap.orb-cyan {
  background: rgba(6, 182, 212, 0.2) !important;
  color: #38BDF8 !important;
}

.my-kpi-icon-wrap.orb-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

[data-theme="dark"] .my-kpi-icon-wrap.orb-emerald,
.dark-theme .my-kpi-icon-wrap.orb-emerald,
body.dark .my-kpi-icon-wrap.orb-emerald {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34D399 !important;
}

.my-kpi-icon-wrap.orb-primary {
  background: rgba(15, 110, 86, 0.12);
  color: #0F6E56;
}

[data-theme="dark"] .my-kpi-icon-wrap.orb-primary,
.dark-theme .my-kpi-icon-wrap.orb-primary,
body.dark .my-kpi-icon-wrap.orb-primary {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34D399 !important;
}

.my-kpi-icon-wrap.orb-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
}

[data-theme="dark"] .my-kpi-icon-wrap.orb-amber,
.dark-theme .my-kpi-icon-wrap.orb-amber,
body.dark .my-kpi-icon-wrap.orb-amber {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #FBBF24 !important;
}

.my-kpi-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.my-kpi-info .val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.my-kpi-info .lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
}

[data-theme="dark"] .my-kpi-info .lbl,
.dark-theme .my-kpi-info .lbl,
body.dark .my-kpi-info .lbl {
  color: #94A3B8 !important;
}

/* Card 2: Repassar Conversas (Transferência Rápida e Espaçosa) */
.peers-transfer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .peers-transfer-card,
.dark-theme .peers-transfer-card,
body.dark .peers-transfer-card {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
}

.peers-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.peers-card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-theme="dark"] .peers-card-header h3,
.dark-theme .peers-card-header h3,
body.dark .peers-card-header h3 {
  color: #F8FAFC !important;
}

.peers-sub {
  font-size: 13px;
  color: var(--text-light);
  display: block;
  margin-top: 3px;
}

[data-theme="dark"] .peers-sub,
.dark-theme .peers-sub,
body.dark .peers-sub {
  color: #94A3B8 !important;
}

.peers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  max-height: none;
  overflow-y: visible;
}

.peer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  gap: 14px;
  transition: all 0.2s ease;
}

[data-theme="dark"] .peer-item,
.dark-theme .peer-item,
body.dark .peer-item {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.peer-item:hover {
  transform: translateY(-2px);
  border-color: #0F6E56;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .peer-item:hover,
.dark-theme .peer-item:hover,
body.dark .peer-item:hover {
  border-color: #10B981 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

.peer-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.peer-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .peer-name,
.dark-theme .peer-name,
body.dark .peer-name {
  color: #F8FAFC !important;
}

.peer-tags-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.peer-dept-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.peer-slots-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #10B981;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-peer-transfer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: #0F6E56;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.btn-peer-transfer:hover {
  background: #0b5240;
  transform: scale(1.02);
}

[data-theme="dark"] .btn-peer-transfer,
.dark-theme .btn-peer-transfer,
body.dark .btn-peer-transfer {
  background: #10B981 !important;
  color: #0F172A !important;
}

[data-theme="dark"] .btn-peer-transfer:hover,
.dark-theme .btn-peer-transfer:hover,
body.dark .btn-peer-transfer:hover {
  background: #34D399 !important;
}

/* ==========================================================================
   MODAL DE MONITORAMENTO / VIGILÂNCIA DE CHATS
   ========================================================================== */

.modal-monitor-card {
  max-width: 680px;
  width: 100%;
  backdrop-filter: blur(20px);
}

.modal-monitor-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-monitor-title i {
  font-size: 22px;
}

.monitor-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.monitor-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.monitor-conv-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  gap: 14px;
  transition: all 0.2s ease;
}

body.dark .monitor-conv-item {
  background: rgba(10, 14, 23, 0.6);
  border-color: rgba(255, 255, 255, 0.06);
}

.monitor-conv-item.conv-alert-danger {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.05);
}

.conv-item-left {
  flex: 1;
  min-width: 0;
}

.conv-lead-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.conv-channel-pill {
  font-size: 11px;
  padding: 2px 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.conv-last-msg {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.conv-timer {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.conv-timer.timer-danger {
  color: #EF4444;
  animation: timerBlink 1.5s infinite;
}

@keyframes timerBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.conv-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-conv-reassign {
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-conv-reassign:hover {
  border-color: #0F6E56;
  color: #0F6E56;
}

.btn-conv-intervene {
  padding: 6px 12px;
  background: #0284C7;
  border: none;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-conv-intervene:hover {
  background: #0369A1;
}

.monitor-empty-state,
.team-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
}

.empty-icon {
  font-size: 42px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* Helpers */
.text-cyan { color: #0284C7; }
.text-rose { color: #E1306C; }
.text-blue { color: #0084FF; }
.text-amber { color: #F59E0B; }
.text-emerald { color: #10B981; }
.font-xs { font-size: 11px; }
.font-sm { font-size: 12px; }
.font-md { font-size: 14px; }
.font-lg { font-size: 16px; }

/* ==========================================================================
   MODAL DE TRANSFERÊNCIA SELETIVA DE CONVERSAS (SELEÇÃO DE CONTATOS)
   ========================================================================== */

.modal-transfer-card {
  max-width: 650px;
  width: 100%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.modal-transfer-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-transfer-header-title i {
  font-size: 20px;
}

/* Card do Destinatário */
.transfer-target-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-top: 14px;
  margin-bottom: 16px;
}

body.dark .transfer-target-card {
  background: rgba(10, 14, 23, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.transfer-target-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.transfer-target-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.transfer-target-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.target-label {
  font-size: 11.5px;
  color: var(--text-light);
}

.transfer-target-slots {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

/* Toolbar de Seleção Rápida */
.transfer-selection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}

.transfer-selection-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.transfer-selection-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-transfer-quick {
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.btn-transfer-quick:hover {
  color: var(--text);
  border-color: rgba(15, 110, 86, 0.4);
}

/* Lista Scrollável de Conversas com Checkboxes */
.transfer-conv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 16px;
}

.transfer-conv-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

body.dark .transfer-conv-item {
  background: rgba(10, 14, 23, 0.5);
  border-color: rgba(255, 255, 255, 0.06);
}

.transfer-conv-item:hover {
  border-color: rgba(15, 110, 86, 0.4);
  transform: translateX(2px);
}

.transfer-conv-item.is-selected {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25);
}

body.dark .transfer-conv-item.is-selected {
  background: rgba(16, 185, 129, 0.12);
  border-color: #34D399;
}

.transfer-checkbox-wrap {
  margin-top: 2px;
  flex-shrink: 0;
}

.transfer-item-checkbox {
  width: 17px;
  height: 17px;
  accent-color: #0F6E56;
  cursor: pointer;
}

body.dark .transfer-item-checkbox {
  accent-color: #10B981;
}

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

.transfer-conv-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.transfer-lead-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.transfer-timer {
  font-size: 11px;
  color: var(--text-light);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.transfer-conv-snippet {
  margin: 0;
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grupo de Motivo / Nota Interna */
.transfer-note-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

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

.transfer-reason-select {
  width: 100%;
  padding: 9px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease;
}

.transfer-reason-select:focus {
  border-color: #0F6E56;
}

body.dark .transfer-reason-select {
  background: rgba(10, 14, 23, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Rodapé do Modal */
.transfer-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.transfer-counter-text {
  font-size: 12.5px;
  color: var(--text-light);
}

.transfer-footer-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-cancel-transfer {
  padding: 8px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-cancel-transfer:hover {
  color: var(--text);
  border-color: var(--text-light);
}

.btn-confirm-transfer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #0F6E56 0%, #0b5240 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 110, 86, 0.3);
  transition: all 0.2s ease;
}

.btn-confirm-transfer:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 110, 86, 0.4);
}

.btn-confirm-transfer:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.transfer-empty-box {
  text-align: center;
  padding: 30px 16px;
  color: var(--text-light);
}

/* ==========================================================================
   TELA DIVIDIDA & VISÃO RESUMIDA DE EQUIPE / DEPARTAMENTOS
   ========================================================================== */

/* Alternador Superior de Tela Dividida (Segmented Control Cósmico) */
.team-view-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 14px;
  width: fit-content;
  max-width: 100%;
}

[data-theme="dark"] .team-view-tabs-bar,
.dark-theme .team-view-tabs-bar,
body.dark .team-view-tabs-bar,
body[data-theme="dark"] .team-view-tabs-bar {
  background: rgba(17, 24, 39, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}

.team-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.team-tab-btn:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .team-tab-btn:hover,
.dark-theme .team-tab-btn:hover,
body.dark .team-tab-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.team-tab-btn.active {
  color: #FFFFFF;
  background: linear-gradient(135deg, #0F6E56 0%, #0b5240 100%);
  box-shadow: 0 3px 12px rgba(15, 110, 86, 0.35);
  font-weight: 700;
}

[data-theme="dark"] .team-tab-btn.active,
.dark-theme .team-tab-btn.active,
body.dark .team-tab-btn.active {
  box-shadow: 0 4px 16px rgba(15, 110, 86, 0.45);
}

/* Alternador de Empresa: Demo vs Personalizada */
.btn-company-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .btn-company-toggle,
.dark-theme .btn-company-toggle,
body.dark .btn-company-toggle {
  background: rgba(17, 24, 39, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}

.btn-company-toggle:hover {
  border-color: #0F6E56;
  transform: translateY(-1px);
}

.company-toggle-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(15, 110, 86, 0.12);
  color: #0F6E56;
}

[data-theme="dark"] .company-toggle-badge,
.dark-theme .company-toggle-badge,
body.dark .company-toggle-badge {
  background: rgba(52, 211, 153, 0.2);
  color: #34D399;
}

/* Header da Equipe & Departamentos */
.team-header-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
}

[data-theme="dark"] .team-header-panel,
.dark-theme .team-header-panel,
body.dark .team-header-panel {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

.team-header-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(15, 110, 86, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

[data-theme="dark"] .team-header-icon-box,
.dark-theme .team-header-icon-box,
body.dark .team-header-icon-box {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
}

/* Abas de Navegação Principais (Atendentes vs Departamentos) */
.team-view-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  width: fit-content;
  max-width: 100%;
}

[data-theme="dark"] .team-view-tabs-bar,
.dark-theme .team-view-tabs-bar,
body.dark .team-view-tabs-bar {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.team-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-light);
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.team-tab-btn:hover {
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .team-tab-btn:hover,
.dark-theme .team-tab-btn:hover,
body.dark .team-tab-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #F8FAFC !important;
}

.team-tab-btn.active {
  color: #FFFFFF !important;
  background: #0F6E56 !important;
  box-shadow: 0 4px 14px rgba(15, 110, 86, 0.35);
}

[data-theme="dark"] .team-tab-btn.active,
.dark-theme .team-tab-btn.active,
body.dark .team-tab-btn.active {
  background: #10B981 !important;
  color: #0A0E17 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45);
}

/* Cards de Métricas em Alto Contraste (Balões Modernos, Elegantes e Agradáveis) */
.team-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.team-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease;
  position: relative;
  overflow: hidden;
}

.team-kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}

.team-kpi-card.kpi-card-emerald {
  background: radial-gradient(circle at 92% 10%, rgba(16, 185, 129, 0.08) 0%, transparent 60%), var(--surface);
}
.team-kpi-card.kpi-card-emerald::before { background: #10B981; }

.team-kpi-card.kpi-card-cyan {
  background: radial-gradient(circle at 92% 10%, rgba(2, 132, 199, 0.08) 0%, transparent 60%), var(--surface);
}
.team-kpi-card.kpi-card-cyan::before { background: #0284C7; }

.team-kpi-card.kpi-card-primary {
  background: radial-gradient(circle at 92% 10%, rgba(15, 110, 86, 0.08) 0%, transparent 60%), var(--surface);
}
.team-kpi-card.kpi-card-primary::before { background: #0F6E56; }

.team-kpi-card.kpi-card-amber {
  background: radial-gradient(circle at 92% 10%, rgba(245, 158, 11, 0.08) 0%, transparent 60%), var(--surface);
}
.team-kpi-card.kpi-card-amber::before { background: #F59E0B; }

[data-theme="dark"] .team-kpi-card,
.dark-theme .team-kpi-card,
body.dark .team-kpi-card {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38) !important;
}

[data-theme="dark"] .team-kpi-card.kpi-card-emerald,
.dark-theme .team-kpi-card.kpi-card-emerald,
body.dark .team-kpi-card.kpi-card-emerald {
  background: radial-gradient(circle at 92% 10%, rgba(16, 185, 129, 0.15) 0%, transparent 65%), #1E293B !important;
}

[data-theme="dark"] .team-kpi-card.kpi-card-cyan,
.dark-theme .team-kpi-card.kpi-card-cyan,
body.dark .team-kpi-card.kpi-card-cyan {
  background: radial-gradient(circle at 92% 10%, rgba(14, 165, 233, 0.15) 0%, transparent 65%), #1E293B !important;
}

[data-theme="dark"] .team-kpi-card.kpi-card-primary,
.dark-theme .team-kpi-card.kpi-card-primary,
body.dark .team-kpi-card.kpi-card-primary {
  background: radial-gradient(circle at 92% 10%, rgba(15, 110, 86, 0.2) 0%, transparent 65%), #1E293B !important;
}

[data-theme="dark"] .team-kpi-card.kpi-card-amber,
.dark-theme .team-kpi-card.kpi-card-amber,
body.dark .team-kpi-card.kpi-card-amber {
  background: radial-gradient(circle at 92% 10%, rgba(245, 158, 11, 0.15) 0%, transparent 65%), #1E293B !important;
}

.team-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .team-kpi-card:hover,
.dark-theme .team-kpi-card:hover,
body.dark .team-kpi-card:hover {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.kpi-card-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.kpi-icon-orb {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.team-kpi-card:hover .kpi-icon-orb {
  transform: scale(1.08);
}

.orb-emerald {
  background: rgba(16, 185, 129, 0.14);
  color: #10B981;
}

.orb-cyan {
  background: rgba(2, 132, 199, 0.14);
  color: #0284C7;
}

.orb-primary {
  background: rgba(15, 110, 86, 0.14);
  color: #0F6E56;
}

.orb-amber {
  background: rgba(245, 158, 11, 0.14);
  color: #D97706;
}

[data-theme="dark"] .orb-emerald,
.dark-theme .orb-emerald,
body.dark .orb-emerald {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #34D399 !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.25);
}

[data-theme="dark"] .orb-cyan,
.dark-theme .orb-cyan,
body.dark .orb-cyan {
  background: rgba(14, 165, 233, 0.22) !important;
  color: #38BDF8 !important;
  box-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
}

[data-theme="dark"] .orb-primary,
.dark-theme .orb-primary,
body.dark .orb-primary {
  background: rgba(15, 110, 86, 0.26) !important;
  color: #34D399 !important;
  box-shadow: 0 0 18px rgba(15, 110, 86, 0.3);
}

[data-theme="dark"] .orb-amber,
.dark-theme .orb-amber,
body.dark .orb-amber {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #FBBF24 !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.25);
}

.kpi-meta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.team-kpi-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.2;
}

[data-theme="dark"] .team-kpi-title,
.dark-theme .team-kpi-title,
body.dark .team-kpi-title {
  color: #94A3B8 !important;
}

.team-kpi-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  width: fit-content;
}
.team-kpi-badge.success { background: rgba(16, 185, 129, 0.12); color: #10B981; }
.team-kpi-badge.info { background: rgba(2, 132, 199, 0.12); color: #0284C7; }
.team-kpi-badge.highlight { background: rgba(15, 110, 86, 0.12); color: #0F6E56; }
.team-kpi-badge.warning { background: rgba(245, 158, 11, 0.12); color: #D97706; }

[data-theme="dark"] .team-kpi-badge.success { background: rgba(16, 185, 129, 0.2); color: #34D399; }
[data-theme="dark"] .team-kpi-badge.highlight { background: rgba(16, 185, 129, 0.2); color: #34D399; }
[data-theme="dark"] .team-kpi-badge.info { background: rgba(14, 165, 233, 0.2); color: #38BDF8; }
[data-theme="dark"] .team-kpi-badge.warning { background: rgba(245, 158, 11, 0.2); color: #FBBF24; }

.kpi-val-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 4px 0;
}

.team-kpi-val {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.8px;
  line-height: 1;
}

[data-theme="dark"] .team-kpi-val,
.dark-theme .team-kpi-val,
body.dark .team-kpi-val {
  color: #F8FAFC !important;
}

.kpi-val-suffix {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
}

[data-theme="dark"] .kpi-val-suffix,
.dark-theme .kpi-val-suffix,
body.dark .kpi-val-suffix {
  color: #94A3B8 !important;
}

.team-kpi-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="dark"] .team-kpi-desc,
.dark-theme .team-kpi-desc,
body.dark .team-kpi-desc {
  color: #94A3B8 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}


/* Toolbar de Filtros */
.team-toolbar-card.compact-toolbar {
  padding: 10px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

[data-theme="dark"] .team-toolbar-card.compact-toolbar,
.dark-theme .team-toolbar-card.compact-toolbar,
body.dark .team-toolbar-card.compact-toolbar {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dept-dot-filter {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

/* Cards de Atendentes em Alto Contraste */
.agent-surveillance-card.compact-agent-card {
  padding: 18px 20px;
  gap: 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

[data-theme="dark"] .agent-surveillance-card.compact-agent-card,
.dark-theme .agent-surveillance-card.compact-agent-card,
body.dark .agent-surveillance-card.compact-agent-card {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

.agent-surveillance-card.compact-agent-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .agent-surveillance-card.compact-agent-card:hover,
.dark-theme .agent-surveillance-card.compact-agent-card:hover,
body.dark .agent-surveillance-card.compact-agent-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .agent-name,
.dark-theme .agent-name,
body.dark .agent-name {
  color: #F8FAFC !important;
}

.compact-capacity {
  padding: 10px 14px;
  background: #F8FAFC;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
}

[data-theme="dark"] .compact-capacity,
.dark-theme .compact-capacity,
body.dark .compact-capacity {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.compact-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #F8FAFC;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
}

[data-theme="dark"] .compact-kpis,
.dark-theme .compact-kpis,
body.dark .compact-kpis {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.compact-kpis .mini-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.compact-kpis .mini-kpi .kpi-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 2px;
}

[data-theme="dark"] .compact-kpis .mini-kpi .kpi-label,
.dark-theme .compact-kpis .mini-kpi .kpi-label,
body.dark .compact-kpis .mini-kpi .kpi-label {
  color: #94A3B8 !important;
}

.compact-kpis .mini-kpi .kpi-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

[data-theme="dark"] .compact-kpis .mini-kpi .kpi-val,
.dark-theme .compact-kpis .mini-kpi .kpi-val,
body.dark .compact-kpis .mini-kpi .kpi-val {
  color: #F8FAFC !important;
}

/* ==========================================================================
   TELA DEDICADA DE DEPARTAMENTOS (LAYOUT LIMPO, TABELA MODERNA)
   ========================================================================== */

.dept-minimal-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  margin-bottom: 20px;
}

[data-theme="dark"] .dept-minimal-container,
.dark-theme .dept-minimal-container,
body.dark .dept-minimal-container {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Header Enxuto de Departamentos */
.dept-minimal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

[data-theme="dark"] .dept-minimal-header,
.dark-theme .dept-minimal-header,
body.dark .dept-minimal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.dept-minimal-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dept-minimal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-theme="dark"] .dept-minimal-title,
.dark-theme .dept-minimal-title,
body.dark .dept-minimal-title {
  color: #F8FAFC !important;
}

.dept-minimal-subtitle {
  font-size: 12.5px;
  color: var(--text-light);
}

[data-theme="dark"] .dept-minimal-subtitle,
.dark-theme .dept-minimal-subtitle,
body.dark .dept-minimal-subtitle {
  color: #94A3B8 !important;
}

/* Estado Vazio */
.dept-empty-minimal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
  color: var(--text-light);
}

.dept-empty-icon-subtle {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(15, 110, 86, 0.1);
  color: #0F6E56;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}

[data-theme="dark"] .dept-empty-icon-subtle,
.dark-theme .dept-empty-icon-subtle,
body.dark .dept-empty-icon-subtle {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
}

.dept-empty-minimal h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px 0;
}

[data-theme="dark"] .dept-empty-minimal h4,
.dark-theme .dept-empty-minimal h4,
body.dark .dept-empty-minimal h4 {
  color: #F8FAFC !important;
}

.dept-empty-minimal p {
  font-size: 13px;
  max-width: 480px;
  margin: 0;
  line-height: 1.5;
}

[data-theme="dark"] .dept-empty-minimal p,
.dark-theme .dept-empty-minimal p,
body.dark .dept-empty-minimal p {
  color: #94A3B8 !important;
}

/* Tabela de Departamentos */
.dept-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.dept-minimal-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.dept-minimal-table thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-light);
  border-bottom: 1px solid var(--border);
  background: transparent;
  white-space: nowrap;
}

[data-theme="dark"] .dept-minimal-table thead th,
.dark-theme .dept-minimal-table thead th,
body.dark .dept-minimal-table thead th {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #94A3B8 !important;
}

.dept-table-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

[data-theme="dark"] .dept-table-row,
.dark-theme .dept-table-row,
body.dark .dept-table-row {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

.dept-table-row:last-child {
  border-bottom: none;
}

.dept-table-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .dept-table-row:hover,
.dark-theme .dept-table-row:hover,
body.dark .dept-table-row:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.dept-minimal-table tbody td {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}

.dept-td-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  white-space: nowrap;
}

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

.dept-name-cell strong {
  color: var(--text);
}

[data-theme="dark"] .dept-name-cell strong,
.dark-theme .dept-name-cell strong,
body.dark .dept-name-cell strong {
  color: #F8FAFC !important;
}

.dept-desc-text {
  font-size: 12.5px;
  color: var(--text-light);
  max-width: 380px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .dept-desc-text,
.dark-theme .dept-desc-text,
body.dark .dept-desc-text {
  color: #CBD5E1 !important;
}

.dept-chats-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-light);
}

.dept-chats-tag.has-chats {
  background: rgba(2, 132, 199, 0.12);
  color: #0284C7;
}

[data-theme="dark"] .dept-chats-tag {
  background: rgba(255, 255, 255, 0.05);
  color: #94A3B8;
}

[data-theme="dark"] .dept-chats-tag.has-chats {
  background: rgba(14, 165, 233, 0.2);
  color: #38BDF8;
}

.dept-crew-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.btn-dept-row-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme="dark"] .btn-dept-row-action,
.dark-theme .btn-dept-row-action,
body.dark .btn-dept-row-action {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #F8FAFC !important;
}

.btn-dept-row-action:hover {
  border-color: #0F6E56;
  color: #0F6E56;
  background: rgba(15, 110, 86, 0.08);
}

[data-theme="dark"] .btn-dept-row-action:hover,
.dark-theme .btn-dept-row-action:hover,
body.dark .btn-dept-row-action:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10B981 !important;
  color: #34D399 !important;
}

.btn-dept-row-del {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s ease;
}

[data-theme="dark"] .btn-dept-row-del,
.dark-theme .btn-dept-row-del,
body.dark .btn-dept-row-del {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #94A3B8 !important;
}

.btn-dept-row-del:hover {
  color: #EF4444;
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.08);
}

/* Seletor de Cores do Departamento */
.dept-color-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.color-pick-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.color-pick-circle:hover {
  transform: scale(1.15);
}

.color-pick-circle.active {
  border-color: #FFFFFF;
  box-shadow: 0 0 0 2px #0F6E56, 0 4px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.12);
}

.color-pick-circle i {
  display: none;
  font-size: 11px;
  color: #FFFFFF;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.color-pick-circle.active i {
  display: block;
}

[data-theme="dark"] .color-pick-circle.active {
  box-shadow: 0 0 0 2px #10B981, 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Modais de Equipe & Departamentos (Prioridade Máxima) */
#team-new-dept-modal,
#team-invite-modal,
#team-monitor-modal,
#team-transfer-modal {
  z-index: 99999 !important;
}

[data-theme="dark"] #team-new-dept-modal .modal-card,
[data-theme="dark"] #team-invite-modal .modal-card,
[data-theme="dark"] #team-monitor-modal .modal-card,
[data-theme="dark"] #team-transfer-modal .modal-card {
  background: #1E293B !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #team-new-dept-modal .modal-header h3,
[data-theme="dark"] #team-invite-modal .modal-header h3,
[data-theme="dark"] #team-monitor-modal .modal-header h3,
[data-theme="dark"] #team-transfer-modal .modal-header h3 {
  color: #F8FAFC !important;
}

/* Estilos Dedicados para o Pop-up de Novo Departamento & Novo Membro */
.modal-dept-card {
  max-width: 520px;
  width: 100%;
  border-radius: 20px;
  padding: 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .modal-dept-card,
.dark-theme .modal-dept-card,
body.dark .modal-dept-card {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

.modal-dept-header-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.modal-icon-badge {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: rgba(15, 110, 86, 0.12);
  color: #0F6E56;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

[data-theme="dark"] .modal-icon-badge,
.dark-theme .modal-icon-badge,
body.dark .modal-icon-badge {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34D399 !important;
}

.modal-subtitle-text {
  font-size: 12px;
  color: var(--text-light);
  display: block;
  margin-top: 2px;
  font-weight: 500;
}

[data-theme="dark"] .modal-subtitle-text,
.dark-theme .modal-subtitle-text,
body.dark .modal-subtitle-text {
  color: #94A3B8 !important;
}

.dept-form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.dept-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dept-field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="dark"] .dept-field-label,
.dark-theme .dept-field-label,
body.dark .dept-field-label {
  color: #F8FAFC !important;
}

.dept-field-hint {
  font-size: 11.5px;
  color: var(--text-light);
  line-height: 1.4;
  margin-top: -2px;
  margin-bottom: 2px;
}

[data-theme="dark"] .dept-field-hint,
.dark-theme .dept-field-hint,
body.dark .dept-field-hint {
  color: #94A3B8 !important;
}

.dept-input-styled {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dept-input-styled:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.15);
}

[data-theme="dark"] .dept-input-styled,
.dark-theme .dept-input-styled,
body.dark .dept-input-styled {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .dept-input-styled:focus,
.dark-theme .dept-input-styled:focus,
body.dark .dept-input-styled:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

/* CAIXA DE TEXTO DE DESCRIÇÃO DO SETOR ESTILIZADA, ELEGANTE E MODERNA */
.dept-textarea-styled {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 82px;
  max-height: 180px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dept-textarea-styled:focus {
  border-color: #0F6E56;
  box-shadow: 0 0 0 3px rgba(15, 110, 86, 0.15);
}

[data-theme="dark"] .dept-textarea-styled,
.dark-theme .dept-textarea-styled,
body.dark .dept-textarea-styled {
  background: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .dept-textarea-styled:focus,
.dark-theme .dept-textarea-styled:focus,
body.dark .dept-textarea-styled:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

.dept-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

[data-theme="dark"] .dept-modal-actions,
.dark-theme .dept-modal-actions,
body.dark .dept-modal-actions {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.btn-dept-cancel {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-light);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-dept-cancel:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}

[data-theme="dark"] .btn-dept-cancel,
.dark-theme .btn-dept-cancel,
body.dark .btn-dept-cancel {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #94A3B8 !important;
}

[data-theme="dark"] .btn-dept-cancel:hover,
.dark-theme .btn-dept-cancel:hover,
body.dark .btn-dept-cancel:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #F8FAFC !important;
}

.btn-primary-team {
  padding: 9px 20px;
  border-radius: 10px;
  border: none;
  background: #0F6E56;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(15, 110, 86, 0.25);
}

.btn-primary-team:hover {
  background: #0b5240;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 110, 86, 0.35);
}

/* ==========================================================================
   MODAL DE TRANSFERÊNCIA INTELIGENTE — SELETOR DE MODO & CHIPS
   ========================================================================== */

.transfer-mode-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 14px;
}

[data-theme="dark"] .transfer-mode-selector,
.dark-theme .transfer-mode-selector,
body.dark .transfer-mode-selector {
  background: rgba(10, 14, 23, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.transfer-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.18s ease;
}

.transfer-mode-btn:hover {
  color: var(--text);
}

.transfer-mode-btn.active {
  background: #0F6E56;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(15, 110, 86, 0.35);
}

.transfer-dept-chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.transfer-dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: all 0.18s ease;
}

[data-theme="dark"] .transfer-dept-chip,
.dark-theme .transfer-dept-chip,
body.dark .transfer-dept-chip {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.transfer-dept-chip:hover {
  border-color: #0F6E56;
}

.transfer-dept-chip.active {
  background: rgba(15, 110, 86, 0.12);
  border-color: #0F6E56;
  color: #0F6E56;
  font-weight: 700;
}

[data-theme="dark"] .transfer-dept-chip.active,
.dark-theme .transfer-dept-chip.active,
body.dark .transfer-dept-chip.active {
  background: rgba(15, 110, 86, 0.25) !important;
  border-color: #34D399 !important;
  color: #34D399 !important;
}