/* ===========================================================================
   PhantomBot — Design System v2.1
   Paleta alinhada ao redesign do Lovable (brand azul #2f5bff, base #0a0f1e)
   + violeta --accent-500 reintroduzido pra quebrar o "paredão azul".
   Carrega DEPOIS de style.css para sobrescrever os tokens essenciais.
   Mantemos a estrutura HTML antiga; apenas o vocabulario visual muda.
   =========================================================================== */

/* --- Fontes (Inter + Space Grotesk + JetBrains Mono) -------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap");

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Brand scale — MAIS SATURADA que a v2.1: aproxima mais dos prints
     do Lovable (azul chapado tipo neon, não pastel). */
  --brand-300: #8fb3ff;
  --brand-400: #5b8bff;
  --brand-500: #3a70ff;
  --brand-600: #2354e6;
  --brand-700: #1a3fb5;
  --brand-800: #12297a;
  --brand-glow: rgba(91, 139, 255, 0.60);
  /* Violeta complementar — reintroduzido no redesign pra quebrar o
     "paredão azul": usado em avatares, gradientes decorativos, KPIs de
     acento e badges secundárias. */
  --accent-500: #8b5cf6;
  --accent-600: #7c3aed;

  /* Superficies — base azul-marinho DENSO (Lovable-style, não cinza).
     Tons mais saturados pra o azul dominar visualmente. */
  --ds-bg:        #050c24;   /* body base — azul-marinho profundo (Lovable-like) */
  --ds-bg-2:      #08132f;   /* sidebar / painéis elevados */
  --ds-surface-0: #0a1533;   /* legacy alias */
  --ds-surface-1: #0d1c42;   /* legacy alias */
  --ds-surface-2: #122554;

  /* Vidro / glass surfaces — TINT AZUL em vez de branco/alpha (senão
     mistura com o fundo azul e vira cinza). Cards ficam num azul-claro
     translúcido que reforça a paleta em vez de neutralizá-la. */
  --ds-glass-1: rgba(91, 139, 255, 0.06);
  --ds-glass-2: rgba(91, 139, 255, 0.10);
  --ds-glass-3: rgba(91, 139, 255, 0.16);

  /* Linhas — MAIS AZULADAS também, pra continuidade visual. */
  --ds-line-1: rgba(91, 139, 255, 0.12);
  --ds-line-2: rgba(91, 139, 255, 0.20);
  --ds-line-3: rgba(91, 139, 255, 0.32);

  /* Texto. */
  --ds-fg:      #e9eefb;
  --ds-muted:   #8a94ad;
  --ds-dim:     #5b657d;
  /* legacy aliases mantidos pra código antigo continuar funcionando */
  --ds-text-1: var(--ds-fg);
  --ds-text-2: rgba(233, 238, 251, 0.70);
  --ds-text-3: var(--ds-muted);
  --ds-text-4: rgba(233, 238, 251, 0.40);
  --ds-text-5: var(--ds-dim);

  /* Estados. */
  --ds-success: #22c78a;
  --ds-warning: #f6c453;
  --ds-danger:  #ff5169;

  /* Sobrescreve tokens antigos para harmonia visual. */
  --tg: var(--brand-500);
  --tg-dark: var(--brand-600);
  --bg: var(--ds-bg);
  --bg-soft: var(--ds-bg-2);
  --card: var(--ds-glass-2);
  --surface-2: var(--ds-glass-3);
  --line: var(--ds-line-2);

  /* Larguras do app shell (sidebar retratil). */
  --sidebar-w-collapsed: 56px;
  --sidebar-w-expanded:  240px;
}

/* --- Tipografia base ---------------------------------------------------- */
html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  letter-spacing: -0.005em;
}
body {
  /* Glows AZUIS PUROS (sem violeta) — o Lovable é azul-marinho denso,
     e misturar violeta jogava tudo pra o cinza-arroxeado. Manteve 3
     glows pra dar profundidade, todos em tons de azul brand. */
  background:
    radial-gradient(1400px circle at 8% -10%, rgba(91, 139, 255, 0.18), transparent 55%),
    radial-gradient(1100px circle at 100% 5%, rgba(58, 112, 255, 0.14), transparent 55%),
    radial-gradient(1000px circle at 50% 120%, rgba(143, 179, 255, 0.08), transparent 55%),
    var(--ds-bg);
  background-attachment: fixed;
}
h1, h2, h3, .display {
  font-family: "Space Grotesk", "Inter", sans-serif;
  letter-spacing: -0.02em;
}
.mono, .kicker, .ds-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.kicker, .ds-eyebrow {
  font-size: 11px;
  color: var(--ds-text-4);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* --- Sidebar (App Shell) ----------------------------------------------- */
body[data-sidebar] { padding-left: var(--sidebar-w-collapsed); }
body[data-sidebar="expanded"] { padding-left: var(--sidebar-w-expanded); }

.app-sidebar {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--sidebar-w-collapsed);
  display: flex;
  flex-direction: column;
  padding: 18px 8px;
  gap: 4px;
  background: var(--ds-surface-0);
  border-right: 1px solid var(--ds-line-1);
  z-index: 90;
  transition: width 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
}
body[data-sidebar="expanded"] .app-sidebar { width: var(--sidebar-w-expanded); }

.sb-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  margin-bottom: 14px;
  color: var(--ds-text-1);
  text-decoration: none;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}
.sb-logo svg { width: 29px; height: 29px; color: var(--brand-500); flex-shrink: 0; }
/* Logo em img (novo PhantomBot). Borda arredondada bate com o rx do SVG. */
.sb-icon--logo img { width: 29px; height: 29px; border-radius: 7px; display: block; }
.sb-icon--logo { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-logo:hover { text-decoration: none; }

.sb-nav { display: flex; flex-direction: column; gap: 4px; }
.sb-item, .sb-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--ds-text-4);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
}

/* Labels de secao (Operacao / Analise / Conta) na sidebar. */
.sb-section {
  padding: 14px 8px 4px;
  display: flex;
  align-items: center;
  min-height: 22px;
}
.sb-section .sb-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--ds-text-5);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  flex: 1;
}
/* Quando a sidebar colapsa, esconde as labels de secao (vira uma linha
   sutil separando os grupos). */
body[data-sidebar="collapsed"] .sb-section {
  padding: 6px 8px 6px;
  border-top: 1px solid var(--ds-line-1);
  min-height: 0;
  height: 12px;
  overflow: hidden;
}
body[data-sidebar="collapsed"] .sb-section:first-of-type {
  border-top: none;
}
.sb-item:hover, .sb-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-text-1);
  text-decoration: none;
}
.sb-item.is-active {
  background: rgba(58, 112, 255, 0.16);
  border-color: rgba(91, 139, 255, 0.35);
  color: var(--brand-300);
  box-shadow: 0 0 0 1px rgba(91, 139, 255, 0.18) inset;
}

.sb-icon {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sb-icon svg { width: 16px; height: 16px; stroke-width: 2; }

.sb-label {
  flex: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
body[data-sidebar="expanded"] .sb-label {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.sb-toggle {
  margin-top: auto;
  font: inherit;
  text-align: left;
}

/* --- Modernizacao dos componentes existentes --------------------------- */
.card {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  border-radius: 16px;
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card:hover { border-color: var(--ds-line-3); }
.card h3 { font-family: "Space Grotesk", sans-serif; letter-spacing: -0.02em; }

button, .btn {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  border-radius: 10px;
  letter-spacing: -0.005em;
}
button.ghost, .btn.ghost {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-text-2);
}
button.ghost:hover, .btn.ghost:hover {
  background: var(--ds-glass-3);
  border-color: var(--ds-line-3);
  color: var(--ds-text-1);
}

.pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}

/* Chips clicaveis (usados no gerador de URL de pressel) */
button.pill {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-muted, #9aa3b2);
  cursor: pointer;
  transition: all 0.15s ease;
}
button.pill:hover {
  background: var(--ds-glass-3);
  color: var(--ds-fg, #eef2f7);
  border-color: var(--brand-500, #3d9bff);
}

.topbar {
  /* Azul-marinho translúcido pra combinar com o fundo — nao mais preto. */
  background: rgba(5, 12, 36, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ds-line-1);
}
.topbar .brand {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Inputs modernos. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], textarea, select {
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-text-1);
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  transition: border-color 0.15s ease, background 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
  background: var(--ds-glass-2);
}

/* --- Responsivo: em telas estreitas, sidebar volta a 56px ------------- */
@media (max-width: 760px) {
  body[data-sidebar="expanded"] { padding-left: var(--sidebar-w-collapsed); }
  body[data-sidebar="expanded"] .app-sidebar { width: var(--sidebar-w-collapsed); }
  body[data-sidebar="expanded"] .sb-label { opacity: 0; transform: translateX(-4px); }
}

/* ===========================================================================
   Sistema de botões — primário, secundário, ícone, perigo
   =========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  color: #ffffff;
  /* Fundo CHAPADO azul (gradient sutil pra dar profundidade) — igual Lovable */
  background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand-500) 100%);
  border: 1px solid var(--brand-400);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 20px rgba(58, 112, 255, 0.42),
    0 2px 6px rgba(58, 112, 255, 0.28);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(96, 165, 250, 0.12) 0%, transparent 100%);
  pointer-events: none;
  border-radius: inherit;
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(96, 165, 250, 0.48);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 10px 24px rgba(37, 99, 235, 0.25);
  text-decoration: none;
}
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-primary:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.55);
  outline-offset: 2px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ds-text-2);
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
              transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn-secondary:hover {
  background: var(--ds-glass-3);
  border-color: var(--ds-line-3);
  color: var(--ds-text-1);
  text-decoration: none;
}
.btn-secondary:active { transform: scale(0.98); }

.btn-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-text-3);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
              transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
  padding: 0;
}
.btn-icon:hover {
  background: var(--ds-glass-3);
  border-color: var(--ds-line-3);
  color: var(--ds-text-1);
}
.btn-icon:active { transform: scale(0.95); }
.btn-icon svg { width: 16px; height: 16px; stroke-width: 2; }

.btn-icon--danger:hover {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--ds-danger);
}

/* Quando um ícone aparece dentro de um botão padrão. */
.btn-primary svg, .btn-secondary svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ===========================================================================
   Thumb do funil — cartão polido com hierarquia, estado e hover.
   =========================================================================== */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.funnel-thumb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 18px;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  overflow: hidden;
  text-decoration: none;
  color: var(--ds-text-1);
  animation: thumb-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) backwards;
  transition:
    transform 0.28s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.2s ease,
    box-shadow 0.3s ease;
}
.funnel-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at 85% -20%,
              rgba(59, 130, 246, 0.10), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  border-radius: inherit;
}
.funnel-thumb::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent,
              rgba(59, 130, 246, 0.30), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.funnel-thumb:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.22);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(59, 130, 246, 0.08);
}
.funnel-thumb:hover::before,
.funnel-thumb:hover::after { opacity: 1; }

/* ===========================================================================
   Painel de saude dos pixels (Analytics > Resumo)
   =========================================================================== */
/* Sumario agregado que aparece com muitos funis (4+) */
.ph-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 8px 0 14px;
}
.ph-sum-item {
  background: var(--ds-glass-1, rgba(255,255,255,0.04));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ph-sum-item strong {
  font-size: 22px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  line-height: 1.1;
}
.ph-sum-item span {
  font-size: 11px;
  color: var(--ds-text-3, #8a94a6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ph-sum-good strong { color: #4ade80; }
.ph-sum-bad  strong { color: #f87171; }
.ph-sum-idle strong { color: #94a3b8; }

/* Toolbar: busca + filtro */
.ph-toolbar {
  display: flex;
  gap: 10px;
  margin: 4px 0 12px;
  flex-wrap: wrap;
  align-items: center;
}
.ph-search {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ds-glass-1, rgba(255,255,255,0.04));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  color: var(--ds-text-1, #e6edf7);
  font-size: 13px;
}
.ph-filters {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--ds-glass-1, rgba(255,255,255,0.04));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
}
.ph-filters button {
  padding: 6px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ds-text-3, #8a94a6);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ph-filters button:hover { color: var(--ds-text-1, #e6edf7); }
.ph-filters button.active {
  background: var(--brand-500, #3b82f6);
  color: #fff;
}

@media (max-width: 640px) {
  .ph-summary { grid-template-columns: repeat(2, 1fr); }
  .ph-toolbar { flex-direction: column; align-items: stretch; }
  .ph-filters { justify-content: center; }
}

.pixel-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 8px 0 20px;
}
.ph-card {
  background: var(--ds-glass-2, rgba(255,255,255,0.06));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}
.ph-card[data-state="bad"] {
  border-color: rgba(239, 68, 68, 0.35);
}
.ph-card[data-state="good"] {
  border-color: rgba(34, 197, 94, 0.25);
}
.ph-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ph-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-color: var(--ds-glass-3, rgba(255,255,255,0.10));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.10));
}
.ph-avatar--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--ds-text-4, #6b7889);
}
.ph-avatar--empty svg { width: 20px; height: 20px; }
.ph-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ph-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--ds-glass-3, rgba(255,255,255,0.08));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  color: var(--ds-text-2, #cbd3df);
}
.ph-badge em {
  font-style: normal;
  color: var(--ds-text-4, #6b7889);
  font-size: 10.5px;
  margin-left: 2px;
}
.ph-badge[data-state="good"] { color: #4ade80; border-color: rgba(34,197,94,0.30); }
.ph-badge[data-state="bad"]  { color: #f87171; border-color: rgba(239,68,68,0.40); }
.ph-badge[data-state="off"]  { opacity: 0.5; }
.ph-state-chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
}
.ph-state-chip[data-state="good"] { background: rgba(34,197,94,0.15); color: #4ade80; }
.ph-state-chip[data-state="bad"]  { background: rgba(239,68,68,0.15); color: #f87171; }
.ph-state-chip[data-state="idle"] { background: rgba(148,163,184,0.15); color: #94a3b8; }

.ph-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ds-glass-1, rgba(255,255,255,0.04));
}
.ph-bar-ok  { background: #22c55e; }
.ph-bar-err { background: #ef4444; }
.ph-nums {
  display: flex; gap: 10px; font-size: 12px;
  font-family: "JetBrains Mono", monospace;
}
.ph-num--ok   { color: #4ade80; }
.ph-num--err  { color: #f87171; }
.ph-num--pend { color: #94a3b8; }

@media (max-width: 640px) {
  .pixel-health-grid { grid-template-columns: 1fr; }
}

/* ---- Avatar redondo (foto de perfil ao lado do titulo) ---- */
.thumb-body {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.thumb-info {
  flex: 1;
  min-width: 0;   /* deixa o titulo truncar sem estourar o card */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.thumb-body .thumb-title { margin: 0; }

.thumb-avatar {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background-color: var(--ds-glass-2, rgba(255,255,255,0.06));
  background-size: cover;
  background-position: center;
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.10));
  overflow: hidden;
  padding: 0;
}
.thumb-avatar--empty {
  color: var(--ds-text-4, #6b7889);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.thumb-avatar--empty:hover {
  color: var(--ds-text-1, #e6edf7);
  background: var(--ds-glass-3, rgba(255,255,255,0.10));
  border-color: rgba(59, 130, 246, 0.30);
}
.thumb-avatar--empty svg { width: 24px; height: 24px; }

.thumb-avatar-edit {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--ds-glass-2, rgba(11,15,23,1));
  background: var(--brand-500, #3b82f6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s;
  z-index: 2;
}
.thumb-avatar-edit:hover { transform: scale(1.1); }
.thumb-avatar-edit svg { width: 12px; height: 12px; }

.thumb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.thumb-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ds-text-1);
  margin: 4px 0 0;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.thumb-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.thumb-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ds-text-3);
}
.thumb-meta-item svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  color: var(--ds-text-4);
  flex-shrink: 0;
}
.thumb-meta-item strong {
  color: var(--ds-text-2);
  font-weight: 500;
}

.thumb-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.thumb-footer .btn-primary { flex: 1; justify-content: center; }

/* --- Status (dot + label) --------------------------------------------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ds-line-2);
  background: var(--ds-glass-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-3);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-text-5);
  flex-shrink: 0;
}
.status-chip[data-status="online"]    { color: #10b981; border-color: rgba(16, 185, 129, 0.30); }
.status-chip[data-status="online"]    .status-dot {
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
.status-chip[data-status="published"] { color: var(--brand-400); border-color: rgba(96, 165, 250, 0.28); }
.status-chip[data-status="published"] .status-dot { background: var(--brand-400); }
.status-chip[data-status="draft"]     { color: var(--ds-warning); border-color: rgba(245, 158, 11, 0.30); }
.status-chip[data-status="draft"]     .status-dot { background: var(--ds-warning); }
.status-chip[data-status="suspended"] { color: var(--ds-danger); border-color: rgba(239, 68, 68, 0.35); }
.status-chip[data-status="suspended"] .status-dot { background: var(--ds-danger); }

/* ===========================================================================
   Empty state polido
   =========================================================================== */
.empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 56px 32px;
  border-radius: 18px;
  border: 1px dashed var(--ds-line-2);
  background: var(--ds-glass-1);
}
.empty-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.18);
  color: var(--brand-500);
}
.empty-icon svg { width: 24px; height: 24px; stroke-width: 1.8; }
.empty-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-text-1);
  margin: 0;
}
.empty-text {
  font-size: 13.5px;
  color: var(--ds-text-3);
  max-width: 340px;
  margin: 0;
}

/* ===========================================================================
   Period toolbar — filtro de intervalo do dashboard
   Aparece nas abas cujo conteudo E filtrado pelo periodo: "Resumo" (KPIs e
   graficos), "Vendas" (tabela de vendas) e "Funis" (agregacao por funil).
   Some em "Campanhas" e "Atividade", que tem fonte de dados propria.

   Antes so aparecia em "Resumo". Na aba Vendas o operador via uma tabela
   que o backend JA filtrava por data, sem nenhum controle na tela pra
   escolher a data — o filtro existia e estava inalcancavel.
   =========================================================================== */
body[data-analytics-view]:not([data-analytics-view="resumo"]):not([data-analytics-view="vendas"]):not([data-analytics-view="funis"]) #period-toolbar {
  display: none !important;
}

.period-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.period-shortcuts {
  display: inline-flex;
  gap: 4px;
  background: var(--ds-glass-2);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--ds-line-2);
}
.period-shortcuts button {
  background: transparent;
  border: none;
  color: var(--ds-muted, #9aa3b2);
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.period-shortcuts button:hover {
  background: var(--ds-glass-3);
  color: var(--ds-fg, #eef2f7);
}
.period-shortcuts button.active {
  background: var(--brand-500, #3d9bff);
  color: #fff;
  font-weight: 600;
}
.period-custom {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--ds-line-2);
}
/* O atributo [hidden] do HTML precisa ganhar do display acima.
   `[hidden]` da folha do navegador e `display:none` com especificidade
   baixissima — qualquer regra de classe o atropela. O JS marcava
   customBlock.hidden = true e o bloco De/Ate continuava na tela, exibido
   junto com o preset "Total" ativo. O operador preenchia dia e hora ali e
   clicava Aplicar sem nunca ter selecionado "Custom". */
.period-custom[hidden] { display: none !important; }
/* Label DE / ATÉ vira INLINE (esquerda do input) em vez de acima —
   alinha melhor com o resto da toolbar horizontal. */
.period-custom .field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.period-custom .field span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-muted);
  margin: 0 !important;
  display: inline-block !important;
  white-space: nowrap;
}
.period-custom input[type="datetime-local"] {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-fg);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color-scheme: dark;
}
.period-funnel {
  min-width: 220px;
  padding-left: 12px;
  border-left: 1px solid var(--ds-line-2);
  margin: 0;
  /* Idem: BOT vira label inline a esquerda do select. */
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
}
.period-funnel > span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-muted);
  margin: 0 !important;
  display: inline-block !important;
  white-space: nowrap;
}
.period-funnel select { flex: 1; min-width: 0; }
.period-funnel select {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-fg);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  min-width: 180px;
  cursor: pointer;
}
.period-status {
  font-size: 12px;
  margin-left: auto;
}
@media (max-width: 640px) {
  .period-funnel {
    width: 100%;
    padding-left: 0;
    border-left: none;
    padding-top: 10px;
    border-top: 1px solid var(--ds-line-2);
  }
  .period-funnel select { width: 100%; }
}
@media (max-width: 640px) {
  /* Bloco todo mais discreto: menos padding, menos volume visual, sem
     card ostentoso. Objetivo: parecer um "chip bar" enxuto no topo. */
  .period-toolbar {
    padding: 8px 10px !important;
    gap: 8px !important;
    background: transparent !important;   /* remove aparencia de card */
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
  }
  /* Shortcuts em uma unica fileira scrollavel — nada de quebrar linha */
  .period-shortcuts {
    width: 100%;
    overflow-x: auto;
    background: var(--ds-glass-1);
    padding: 3px !important;
    border-radius: 8px;
    scrollbar-width: none;               /* firefox */
  }
  .period-shortcuts::-webkit-scrollbar { display: none; }  /* webkit */
  .period-shortcuts button {
    padding: 5px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    border-radius: 6px !important;
  }
  /* Custom (DE / ATE / Aplicar) — so aparece quando preset=custom
     esta ativo, entao o `hidden` do JS ja cuida. Aqui so redesenhamos
     pra ficar compacto quando visivel. */
  .period-custom {
    width: 100%;
    padding-left: 0 !important;
    border-left: none !important;
    padding-top: 8px !important;
    border-top: 1px dashed var(--ds-line-1);
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .period-custom .field {
    /* Mobile: label volta pra cima do input (empilhado) — mais espaco.
       Metade da linha pra cada campo (o gap de 6px sai da conta), assim os
       dois ficam do mesmo tamanho e o texto do iOS ("26 Jul 2026 at 02:30")
       nao encosta na borda. */
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    max-width: calc(50% - 3px);
    margin: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .period-custom .field span { font-size: 9px !important; margin-bottom: 1px !important; }
  .period-custom input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
  /* O Aplicar dividia a linha com os dois campos e sobrava pouco pra todo
     mundo — e como os campos tem rotulo em cima, ele ainda ficava alinhado
     pelo centro, parecendo "levantado". Agora ele ocupa a linha de baixo
     inteira: nada espremido e nada desalinhado. */
  .period-custom #period-apply {
    flex: 1 0 100%;
    width: 100%;
    height: 36px;
    margin-top: 2px;
    padding: 0 12px;
    font-size: 12.5px;
  }
  .period-custom button {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    align-self: flex-end;   /* se sobrar na mesma linha, alinha pela base */
  }
  /* Bot: select fino, largura total, sem border-left, sem label enorme */
  .period-funnel {
    width: 100%;
    min-width: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
    margin: 0 !important;
    /* Mobile: label BOT volta pra cima do select (empilhado). */
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .period-funnel > span {
    font-size: 9px !important;
    margin-bottom: 1px !important;
  }
  .period-funnel select {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    height: 34px;
  }
  .period-status {
    width: 100%;
    margin-left: 0;
    text-align: center;
    font-size: 10.5px;
  }
}

/* ===========================================================================
   Wave chart — pontos e area de linha
   =========================================================================== */
.wave-chart { display: block; }
.wave-chart circle { transition: r 0.15s ease; }
.wave-chart circle:hover { r: 5; }

/* ===========================================================================
   KPI cards — dashboard de vendas
   =========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.kpi:hover {
  border-color: var(--ds-line-3);
  transform: translateY(-1px);
}
.kpi-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.kpi-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.kpi[data-tint="brand"]   .kpi-icon { background: rgba(58, 112, 255, 0.18);  border: 1px solid rgba(91, 139, 255, 0.35);  color: var(--brand-300); box-shadow: 0 0 20px rgba(58, 112, 255, 0.20) inset; }
.kpi[data-tint="success"] .kpi-icon { background: rgba(16, 185, 129, 0.10);  border: 1px solid rgba(16, 185, 129, 0.22);  color: #10b981; }
.kpi[data-tint="warning"] .kpi-icon { background: rgba(245, 158, 11, 0.10);  border: 1px solid rgba(245, 158, 11, 0.22);  color: #f59e0b; }
.kpi[data-tint="accent"]  .kpi-icon { background: rgba(139, 92, 246, 0.10);  border: 1px solid rgba(139, 92, 246, 0.22);  color: #8b5cf6; }
.kpi-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kpi-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ds-text-4);
  font-weight: 500;
}
.kpi-value {
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ds-text-1);
  line-height: 1.1;
}

/* ===========================================================================
   Modal de templates de funil
   =========================================================================== */
.modal-templates {
  max-width: 720px;
  width: min(720px, calc(100vw - 32px));
  padding: 28px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.modal-templates header { margin-bottom: 20px; }
.modal-templates header h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ds-text-1);
}
.modal-templates header p {
  margin: 0;
  font-size: 13px;
  color: var(--ds-text-3);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.template-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-2);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.template-card:hover {
  background: var(--ds-glass-2);
  border-color: rgba(59, 130, 246, 0.30);
  transform: translateY(-1px);
}
.template-card:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.55);
  outline-offset: 2px;
}
.template-emoji {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.18);
  font-size: 22px;
  flex-shrink: 0;
}
.template-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.template-info h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ds-text-1);
  margin: 0;
}
.template-info p {
  font-size: 12.5px;
  color: var(--ds-text-3);
  margin: 0;
  line-height: 1.4;
}
.template-info .kicker { margin-top: 6px; font-size: 10px; }

/* ===========================================================================
   Caixa de entrada (inbox)
   =========================================================================== */
.inbox-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 14px;
  height: calc(100vh - 220px);
  min-height: 480px;
}
@media (max-width: 800px) {
  .inbox-shell { grid-template-columns: 1fr; height: auto; }
}

.conv-list {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  border-radius: 16px;
  overflow-y: auto;
  padding: 8px;
}
.conv-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.conv-item:hover {
  background: var(--ds-glass-2);
  border-color: var(--ds-line-2);
}
.conv-item.is-active {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.22);
}
.conv-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.conv-head strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13.5px;
  color: var(--ds-text-1);
  font-weight: 600;
}
.conv-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--ds-text-4);
  flex-shrink: 0;
}
.conv-preview {
  font-size: 12.5px;
  color: var(--ds-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.conv-meta .pill { font-size: 9px; padding: 3px 8px; }

.thread-pane {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ds-text-4);
}
.thread-empty p { margin: 0; font-size: 13px; }

.thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ds-line-1);
}
.thread-head h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--ds-text-1);
}

.thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg { display: flex; flex-direction: column; max-width: 75%; }
.msg-in  { align-self: flex-start; }
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-in  .msg-bubble {
  background: var(--ds-glass-3);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-text-1);
  border-bottom-left-radius: 4px;
}
.msg-out .msg-bubble {
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.32);
  color: var(--ds-text-1);
  border-bottom-right-radius: 4px;
}
.msg-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  color: var(--ds-text-4);
  margin-top: 4px;
}

.composer {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--ds-line-1);
  align-items: flex-end;
}
.composer textarea {
  flex: 1;
  resize: vertical;
  min-height: 38px;
  max-height: 160px;
  padding: 10px 12px;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-2);
  border-radius: 10px;
  color: var(--ds-text-1);
  font: inherit;
}
.composer textarea:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.45);
  background: var(--ds-glass-2);
}

/* ===========================================================================
   User menu (canto superior direito) — global em todas as páginas autenticadas
   =========================================================================== */
.user-menu {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-text-2);
  cursor: pointer;
  font: inherit;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  max-width: 260px;
}
.user-menu-trigger:hover,
.user-menu.is-open .user-menu-trigger {
  background: var(--ds-glass-3);
  border-color: var(--ds-line-3);
  color: var(--ds-text-1);
}
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500, #8b5cf6));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.30);
}
.user-info {
  font-size: 13px;
  font-weight: 500;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-trigger .um-chev {
  width: 14px; height: 14px;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}
.user-menu.is-open .um-chev {
  transform: rotate(180deg);
  opacity: 1;
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-line-2);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48),
              0 0 0 1px rgba(96, 165, 250, 0.04);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: um-pop 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}
/* O atributo HTML "hidden" precisa vencer o "display: flex" acima. Sem
   esta regra com especificidade maior, o dropdown fica sempre visivel
   (o bug do menu "enganchado"). */
.user-menu-dropdown[hidden] {
  display: none !important;
}
@keyframes um-pop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user-menu-head {
  padding: 10px 12px 8px;
}
.user-menu-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ds-text-1);
  letter-spacing: -0.01em;
}
.user-menu-sub {
  font-size: 11.5px;
  color: var(--ds-text-4);
  margin-top: 2px;
  word-break: break-all;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ds-text-2);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.user-menu-item:hover {
  background: var(--ds-glass-3);
  color: var(--ds-text-1);
  text-decoration: none;
}
.user-menu-item svg {
  width: 15px; height: 15px;
  stroke-width: 2;
  flex-shrink: 0;
  opacity: 0.7;
}
.user-menu-logout { color: var(--ds-text-3); }
.user-menu-logout:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--ds-danger);
}
.user-menu-logout:hover svg { opacity: 1; }

.user-menu-divider {
  border: 0;
  border-top: 1px solid var(--ds-line-1);
  margin: 4px 6px;
}

/* Em telas estreitas, esconde o e-mail e mostra só o avatar arredondado. */
@media (max-width: 640px) {
  .user-info, .user-menu-trigger .um-chev { display: none; }
  .user-menu-trigger {
    padding: 4px;
    gap: 0;
    border-radius: 999px;
  }
}

/* Reserva espaço no topbar de cada página pra não conflitar com o user-menu.
   A largura vem medida do JS (reservarEspacoDoUserMenu, em app.js) porque ela
   muda com o tamanho do e-mail e com o botao "Privado". Os 280px sao so o
   fallback pro instante antes do script rodar. */
body:has(.user-menu) .topbar { padding-right: var(--user-menu-reserva, 280px); }
@media (max-width: 640px) {
  body:has(.user-menu) .topbar { padding-right: 100px; }
}

/* ===========================================================================
   Animações utilitárias
   =========================================================================== */
@keyframes thumb-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
@keyframes shimmer-bg {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===========================================================================
   Editor: abas horizontais (Configuração / Fluxo)
   =========================================================================== */
.editor-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: var(--ds-glass-1, rgba(255,255,255,0.04));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  border-radius: 12px;
}
.editor-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  font: 600 13px/1 "Inter", system-ui, sans-serif;
  color: var(--ds-text-2, #a8b1c2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.editor-tab:hover {
  color: var(--ds-text-1, #e6edf7);
  background: var(--ds-glass-2, rgba(255,255,255,0.06));
}
.editor-tab.is-active {
  color: var(--ds-text-1, #e6edf7);
  background: var(--ds-glass-3, rgba(255,255,255,0.10));
  border-color: var(--ds-line-3, rgba(255,255,255,0.14));
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.editor-tab svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.editor-pane.is-hidden { display: none; }

/* ===========================================================================
   Botoes secundarios em variante compacta (Salvar funil, Salvar pagamento, etc).
   .btn-secondary normal e 38px; aqui descemos pra 32px quando combinado com .small.
   =========================================================================== */
.btn-secondary.small {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* ===========================================================================
   Modal overlay reforçado — backdrop opaco com blur, em vez de translúcido
   (sem isso, o conteúdo da pagina aparecia atras do modal "Escolha um template").
   =========================================================================== */
.modal-overlay {
  background: rgba(8, 11, 18, 0.92) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
/* [hidden] HTML e sobrescrito pelo display:flex do overlay — igual
   ao dropdown do user-menu. Regra explicita pra permitir hidden. */
.modal-overlay[hidden] { display: none !important; }

/* ===========================================================================
   Simulador — mockup de iPhone com Telegram dentro
   Estrutura: .phone (chassi) > .phone-head (status+nav bar) > .chat (corpo)
   O design imita um iPhone 14 Pro com Dynamic Island e tela do Telegram dentro.
   =========================================================================== */
.sim-panel .card { background: transparent; border: none; box-shadow: none; padding: 12px 0; }

.phone {
  position: relative;
  background: #0a0a0c;
  border-radius: 48px;
  padding: 10px;                /* moldura uniforme bem fina */
  max-width: 330px;
  margin: 0 auto;
  /* Acabamento metalico: dois aros + sombra projetada limpa */
  box-shadow:
    inset 0 0 0 2px #2c2c30,    /* aro interno (titânio) */
    0 0 0 1px #1a1a1d,          /* outline preto sutil */
    0 24px 50px -16px rgba(0, 0, 0, 0.65),
    0 10px 24px -10px rgba(0, 0, 0, 0.45);
}
/* Botoes laterais do iPhone (decorativos) */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  background: #1f1f23;
  border-radius: 2px;
  z-index: -1;
}
.phone::before {           /* sleep/wake (direita) */
  right: -3px;
  top: 130px;
  width: 4px;
  height: 80px;
}
.phone::after {            /* volume + + - (esquerda) */
  left: -3px;
  top: 100px;
  width: 4px;
  height: 56px;
  box-shadow: 0 80px 0 #1f1f23, 0 144px 0 #1f1f23;
}

/* Tela do iPhone — wrapper interno */
.phone > * {
  position: relative;
}
.phone-head {
  position: relative;
  background: #17212b;        /* azul-petroleo do Telegram dark */
  margin: 0;
  padding: 56px 12px 10px;    /* topo grande pra a status bar caber acima */
  color: #fff;
  border-top-left-radius: 38px;
  border-top-right-radius: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Dynamic Island */
.phone-head::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 102px;
  height: 30px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}
/* Status bar (hora) — overlay em cima da phone-head */
.phone-head::after {
  content: "9:41";
  position: absolute;
  top: 18px;
  left: 28px;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  z-index: 3;
}
/* Status bar (sinal/wifi/bateria) — pseudo via .phone-head .avatar~indicator (simulado) */
.phone-head .avatar {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #4ea2d6, #2b7cb3);
  font-size: 13px;
}
/* Ícones de sinal/wifi/bateria à direita usando uma barra desenhada via SVG inline */
.phone-head > div:last-child::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 24px;
  width: 60px;
  height: 12px;
  background-image:
    /* bateria */
    linear-gradient(#fff, #fff),
    /* corpo bateria */
    linear-gradient(#fff, #fff),
    /* wifi (3 arcos simplificados como pontos) */
    radial-gradient(circle, #fff 40%, transparent 42%),
    radial-gradient(circle, #fff 40%, transparent 42%),
    /* sinal (3 pontos) */
    radial-gradient(circle, #fff 40%, transparent 42%);
  background-repeat: no-repeat;
  background-size:
    18px 8px,
    2px 4px,
    8px 8px,
    8px 8px,
    8px 8px;
  background-position:
    right 0 top 2px,
    right -2px top 4px,
    right 22px top 2px,
    right 36px top 2px,
    right 50px top 2px;
  z-index: 3;
}

/* Corpo do chat dentro do iPhone */
.chat {
  margin: 0;
  border-radius: 0;
  padding: 14px 12px 22px;
  background-image:
    radial-gradient(ellipse at top, rgba(96, 165, 250, 0.04), transparent 60%),
    linear-gradient(180deg, #17212b 0%, #0e1621 100%);
  height: 460px;
  /* arredonda o canto inferior pra encaixar no chassi */
  border-bottom-left-radius: 38px;
  border-bottom-right-radius: 38px;
}
/* Home indicator (barrinha embaixo) sobre o chat */
.chat::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 110px;
  height: 4px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  z-index: 4;
}

/* ===========================================================================
   Analytics grid — KPIs/gráficos + painel de atividade em tempo real
   =========================================================================== */
.analytics-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}
@media (max-width: 960px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

.activity-panel {
  background: var(--ds-glass-1, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--ds-line-2, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 16px;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.activity-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.activity-head h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-text-1, #e6edf7);
  flex: 1;
}
.activity-sound-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  background: var(--ds-glass-2, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--ds-line-2, rgba(255, 255, 255, 0.08));
  color: var(--ds-text-2, #a8b1c2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.activity-sound-btn:hover {
  background: var(--ds-glass-3, rgba(255, 255, 255, 0.10));
  color: var(--ds-text-1, #e6edf7);
}
.activity-sound-btn svg { width: 15px; height: 15px; }
.activity-sound-btn .ico-off { display: none; }
.activity-panel.sound-off .activity-sound-btn .ico-on { display: none; }
.activity-panel.sound-off .activity-sound-btn .ico-off { display: block; }

.activity-item {
  display: flex;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background 0.15s;
  margin-bottom: 4px;
  animation: activity-in 0.3s ease-out;
}
.activity-item:hover {
  background: var(--ds-glass-2, rgba(255, 255, 255, 0.05));
}
@keyframes activity-in {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.activity-item.ev-lead   { border-left-color: #10b981; }
.activity-item.ev-pix    { border-left-color: #f59e0b; }
.activity-item.ev-paid   { border-left-color: #3b82f6; background: rgba(59, 130, 246, 0.06); }
.activity-item.ev-end    { border-left-color: rgba(255, 255, 255, 0.3); }

.activity-icon {
  font-size: 15px;
  line-height: 1.2;
  flex-shrink: 0;
}
.activity-body {
  flex: 1;
  min-width: 0;
}
.activity-msg {
  font-size: 13px;
  color: var(--ds-text-1, #e6edf7);
  line-height: 1.35;
  word-wrap: break-word;
}
.activity-msg strong {
  color: #60a5fa;
  font-weight: 600;
}
.activity-meta {
  font-size: 11px;
  color: var(--ds-text-3, #8697b0);
  margin-top: 3px;
  font-family: "JetBrains Mono", monospace;
}
.activity-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.activity-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-family: "JetBrains Mono", monospace;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--ds-glass-2, rgba(255,255,255,0.06));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.10));
  color: var(--ds-text-3, #8697b0);
  white-space: nowrap;
  line-height: 1.3;
  margin-top: 1px;
  transition: background 0.2s ease;
}
.activity-item.ev-paid .activity-badge {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}
.activity-item.ev-lead .activity-badge {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}

/* ===========================================================================
   Input de senha com botão "mostrar/ocultar" (ícone de olho)
   =========================================================================== */
.password-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.password-wrap .password-input {
  /* garante espaço pro botão à direita não sobrepor o texto digitado */
  padding-right: 42px;
  width: 100%;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--ds-text-3, #8697b0);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.password-toggle:hover {
  color: var(--ds-text-1, #e6edf7);
  background: var(--ds-glass-2, rgba(255, 255, 255, 0.05));
}
.password-toggle:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.5);
  outline-offset: 2px;
}
/* Mascara de chave/segredo feita por CSS em vez de type=password — ver o
   comentario em aplicarOlhoNasSenhas (app.js). Sem isso o iOS pede Face ID
   e troca a chave da API por uma senha gerada. */
.password-input.is-mascarado { -webkit-text-security: disc; }
.password-input.is-mascarado.is-revelado { -webkit-text-security: none; }

.password-toggle svg { width: 18px; height: 18px; }
.password-toggle .ico-hide { display: none; }
/* Ao mostrar a senha, troca o ícone */
.password-wrap.is-shown .password-toggle .ico-show { display: none; }
.password-wrap.is-shown .password-toggle .ico-hide { display: block; }

/* ===========================================================================
   Mobile polish — regras que só valem quando a tela é estreita.
   Objetivo: passar o painel na mão como se fosse um app nativo.
   =========================================================================== */
@media (max-width: 640px) {
  /* Safe area — respeita o notch/dynamic island do iPhone e a nav bar do Android */
  body {
    padding-left: 0 !important;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* CRITICO: zera o padding-left do body no mobile.
     Desktop reserva 56/240px pra sidebar via padding-left. No mobile a
     sidebar vira drawer (position:fixed) e sai da tela — mas se o
     padding permanecer, o conteudo fica empurrado 56px pra direita e,
     com o overflow-x:hidden, aparenta estar "cortado" na esquerda. */
  body[data-sidebar],
  body[data-sidebar="expanded"],
  body[data-sidebar="collapsed"],
  body[data-sidebar="mobile-open"] {
    padding-left: 0 !important;
  }

  /* Sidebar vira drawer: por padrão fica escondida fora da tela.
     Quando o body ganha data-sidebar="mobile-open", desliza pra dentro. */
  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 240px !important;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 60;
    box-shadow: 20px 0 50px -10px rgba(0, 0, 0, 0.55);
  }
  body[data-sidebar="mobile-open"] .app-sidebar {
    transform: translateX(0);
  }
  body[data-sidebar="mobile-open"]::after {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 55;
    animation: fadein 0.2s ease-out;
  }
  .app-sidebar .sb-label { opacity: 1 !important; transform: none !important; }

  /* ==================================================================
     Layout mobile: TRÊS barras empilhadas no topo
       1) system bar   → user-menu (hamburger + tema + avatar), full-width
       2) topbar       → back + nome do funil + publish + save
       3) funnel-nav   → Editor / Conversas / Leads / Disparador
     ================================================================== */

  /* Botoes de nav com svg do topbar SUMEM no mobile — foram pra funnel-nav */
  .topbar .btn-secondary:has(svg),
  .topbar .btn-primary:has(svg):not(.btn-icon) {
    display: none;
  }
  /* O back button (btn-icon) precisa continuar visivel */
  .topbar .btn-icon { display: inline-flex !important; }

  /* Topbar limpo: back + nome + publish + save */
  .topbar {
    padding: 8px 12px !important;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
    position: sticky;
    top: 48px;  /* fica logo abaixo da system bar */
    z-index: 30;
    background: var(--ds-bg, #050c24);
    border-bottom: 1px solid var(--ds-line-2, rgba(255,255,255,0.06));
  }
  .topbar > * { flex-shrink: 0; }

  /* Botao "Salvar funil" (sem svg) — compacto */
  .topbar .btn-secondary:not(:has(svg)),
  .topbar .btn-primary:not(:has(svg)) {
    height: 34px; padding: 0 10px; font-size: 12.5px;
  }

  /* Input do nome do funil ganha o espaco livre */
  .topbar #funnel-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    font-size: 15px !important;
  }

  /* Checkbox "Publicado" mais compacto */
  .topbar label:has(#published) { font-size: 12px; gap: 4px; }
  .topbar label:has(#published) span { display: none; }
  .topbar label:has(#published)::after {
    content: "Live";
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-2);
  }

  /* O kicker (breadcrumb) VOLTA no mobile: ele e o rotulo pequeno que fica
     em cima do titulo da pagina ("Painel - Funis", "Dashboard - Vendas"). */
  .topbar .kicker { display: block; }

  /* Com o kicker e os botoes-com-svg escondidos, sobram topbars 100% vazias
     (Funis, Vendas, Financeiro, Clientes, Configuracoes...). Elas viravam uma
     segunda barra escura por cima do titulo da pagina. O JS do base.html marca
     essas com .topbar-vazio; aqui a gente tira do fluxo. */
  .topbar.topbar-vazio { display: none !important; }

  /* Topbar cujo unico conteudo visivel e o kicker nao precisa ser barra
     nenhuma: tira o fundo, a borda e principalmente o `sticky` (era ele que
     descia por cima do titulo) e sobra so a linha de texto no lugar certo. */
  .topbar.topbar-so-kicker {
    position: static;
    background: none;
    border-bottom: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 14px 12px 0 !important;
  }
  /* Cola o titulo no kicker, do mesmo jeito que o .hero-header faz.
     So vale quando o breadcrumb aparece de verdade — nas paginas de hero ele
     esta display:none e o `+ .page` ainda casaria, subindo o hero 8px. */
  body:not(:has(.hero-header .kicker)) .topbar.topbar-so-kicker + .page {
    padding-top: 6px !important;
  }
  /* Kicker do hero ("Snapshot 24h", "Fluxo em tempo real", "Pre-pago") na
     MESMA altura do breadcrumb das outras paginas: 14px abaixo da system bar,
     que e o padding-top que a .topbar-so-kicker usa. */
  body:has(.hero-header .kicker) > .page { padding-top: 14px !important; }

  /* Bloco de titulo compacto. Duas folgas invisiveis esticavam o hero:
     1) o <p class="hero-sub"> herdava o `margin: 1em 0` do navegador e somava
        ~13px ao gap de 6px do flex;
     2) o line-height 1.55 do body deixava o kicker (11px) numa caixa de 17px.
     Resultado: "Snapshot 24h / Bem-vindo / subtitulo" ficava muito mais solto
     que "Painel - Funis / Meus funis" das outras paginas. */
  .topbar.topbar-so-kicker .kicker,
  .hero-header .kicker { line-height: 1.2; margin-bottom: 0; }
  .hero-header { gap: 6px; }
  /* line-height no titulo de TODA pagina, nao so no hero: com o 1.55 do body
     a caixa do h1 ficava 6px mais alta e empurrava o subtitulo pra baixo so
     nas telas sem hero. */
  .page h1 { line-height: 1.25; }
  .hero-header .hero-sub { margin: 0; line-height: 1.4; }

  /* Ritmo UNICO do cabecalho, igual em toda tela. Antes cada template tinha
     o seu: subtitulo com margin-top 4px (inline) ou 13px (herdado do <p>), e
     o bloco fechava com 12, 16, 18, 20 ou 22px de margem embaixo.
        14px da barra ate a primeira linha de texto
         6px do kicker pro titulo
         6px do titulo pro subtitulo
        16px do bloco ate o conteudo                                        */
  .mobile-funnel-nav + .page { padding-top: 14px !important; }
  /* :not(.hero-sub) porque la o respiro ja vem do `gap` do .hero-header —
     somar os dois daria 12px so nessas telas. */
  .page h1 + p:not(.hero-sub) { margin: 6px 0 0 !important; line-height: 1.4; }
  .page > .row:first-child,
  .page > .hero-header:first-child { margin-bottom: 16px !important; }
  /* Paginas que ja tem um kicker proprio no hero (Clientes, Financeiro,
     Visao geral) nao repetem o breadcrumb. */
  body:has(.hero-header .kicker) .topbar.topbar-so-kicker { display: none !important; }

  /* Sem barra em cima, a nav do funil encosta direto na barra do sistema. */
  .topbar.topbar-vazio + .mobile-funnel-nav,
  .topbar.topbar-so-kicker + .mobile-funnel-nav { top: 48px; }

  /* Titulo espremido: em leads_all/financeiro o hero fica num .row junto de
     um <span class="spacer"> que tambem tem flex:1 — os dois dividiam a
     largura meio a meio e o titulo quebrava linha com a tela vazia do lado.
     No mobile o spacer nao precisa empurrar nada nesse header. */
  .page .row:has(> .hero-header) > .spacer { display: none; }
  .page .hero-header { flex: 1 1 auto !important; min-width: 0; }
  /* Sem o spacer, o que vem depois do hero (badge Live) volta pra direita. */
  .page .row:has(> .hero-header) > .hero-header ~ * { margin-left: auto; }

  /* Titulo de pagina: um tamanho so em todas as telas, igual ao da marca
     no topo — antes variava entre 24px (h1 padrao) e 30px (.hero-header). */
  .page h1,
  .page .hero-header h1 {
    font-size: 19px;
    letter-spacing: -0.01em;
  }

  /* Botão hambúrguer sempre visível no topbar em mobile */
  /* Hamburger DISCRETO: so o icone, sem fundo colorido, pra nao competir
     visualmente com a logo do PhantomBot ao lado. */
  .mobile-menu-toggle {
    display: inline-flex !important;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border-radius: 8px;
    background: transparent !important;
    border: 0 !important;
    color: var(--ds-text-3, #a8b2c7);
    cursor: pointer;
    padding: 0;
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
  }
  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:active {
    opacity: 1;
    color: var(--ds-text-1, #e6edf7);
  }
  /* SVG sanduiche sempre visivel — algumas regras globais podem ter
     zerado stroke; forcar aqui. */
  .mobile-menu-toggle svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    fill: none !important;
    display: block;
  }
  .mobile-menu-toggle svg line,
  .mobile-menu-toggle svg path {
    stroke: currentColor !important;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* Sem overflow lateral em NENHUMA página mobile — matam KPIs, tabelas
     e cards que tentam vazar pra fora do viewport.
     ATENCAO: `overflow-x: hidden` no html/body faz o body virar container de
     rolagem, e no Safari do iPhone isso QUEBRA `position: fixed` — as barras
     param de se ancorar na viewport e passam a se ancorar no fim do documento
     (a barra "trava"/pula durante o scroll e some do rodape). `overflow: clip`
     corta igual mas NAO cria container de rolagem, entao o fixed continua
     preso na tela. `hidden` fica so de fallback pra navegador antigo. */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  @supports (overflow: clip) {
    html, body { overflow-x: clip !important; }
  }

  /* Página com padding lateral menor pra ganhar espaço + garantir que ela
     nunca seja mais larga que o viewport. */
  .page {
    padding: 12px !important;
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* ==================================================================
     DEFESA UNIVERSAL CONTRA OVERFLOW HORIZONTAL NO MOBILE
     ==================================================================
     Muitos componentes usam .row (flex row) com filhos que tem min-width
     alto. No desktop cabe, no mobile estoura. Aqui forcamos:
       - Qualquer .row descendente da .page faz wrap
       - Qualquer .card cap 100%
       - Todos children de flex/grid podem encolher (min-width: 0)
     Sem isso, cards de "Saude do motor", "Saude dos Pixels" e campos
     Valor/Descricao do editor estouram pra direita. */
  .page .row,
  .page .row-actions,
  .card .row {
    flex-wrap: wrap !important;
    min-width: 0;
  }
  .page .card,
  .page section,
  .page > * {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* min-width: 0 é o segredo pra grid/flex children nao forçarem
     overflow. Aplicamos em TODOS os descendentes de .page. */
  .page * {
    min-width: 0;
  }
  /* Excecao: chips/pills nao devem encolher a ponto de sumir texto */
  .page .pill,
  .page .chip,
  .page .btn-icon {
    min-width: auto;
  }

  /* Empurra o conteúdo abaixo das 2 barras sticky (system + topbar).
     Sem isso, o primeiro titulo ("Bem-vindo" / "Painel de Vendas") fica
     escondido debaixo do topo. 48 (system) + 48 (topbar) + 12 (folga). */
  main, .page {
    scroll-margin-top: 110px;
  }
  body > main:first-of-type,
  body > .page {
    padding-top: 12px;
  }

  /* Grid de funis: uma coluna, sem “quebrado” */
  .funnel-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Cabecalho "Meus funis": os botoes Importar/Novo funil ficavam
     espremidos com o titulo, quebrando texto. Quebra pra linha propria. */
  .page > .row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  /* Botoes com texto (nao icones) nao podem quebrar palavra */
  .btn-primary, .btn-secondary { white-space: nowrap; }

  /* Editor: coluna única, simulador empilhado embaixo (não faz sentido lado
     a lado num mobile). O phone mockup encolhe pra caber. */
  .editor-grid { gap: 14px !important; }
  .sim-panel { margin-top: 10px; }
  .sim-panel .phone { transform: scale(0.85); transform-origin: top center; }

  /* Cards do editor com padding mais gentil */
  .card { padding: 14px !important; border-radius: 14px !important; }
  .card h3 { font-size: 15px !important; }

  /* Editor: campos em 100% e sem hover fantasma */
  .field input, .field select, .field textarea { font-size: 15px !important; }
  input, select, textarea { font-size: 16px !important; }  /* evita zoom iOS */

  /* Abas Config/Fluxo: full-width iguais, com toque grande */
  .editor-tabs { width: 100%; }
  .editor-tab { flex: 1; justify-content: center; padding: 10px 6px !important; }
  .editor-tab svg { width: 15px !important; height: 15px !important; }

  /* Inbox no mobile: stack de duas telas — lista OU thread */
  .inbox-shell {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body[data-inbox-view="thread"] .conv-list { display: none; }
  body:not([data-inbox-view="thread"]) .thread-pane { display: none; }
  .thread-pane {
    height: calc(100vh - 140px);
    display: flex; flex-direction: column;
  }
  .thread-body { flex: 1; min-height: 0; }
  .composer {
    position: sticky;
    bottom: 0;
    padding: 10px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--ds-bg, #050c24);
    border-top: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  }
  .composer textarea { min-height: 44px !important; max-height: 120px; }

  /* Voltar pra lista dentro da thread */
  .thread-back {
    display: inline-flex !important;
    align-items: center; gap: 6px;
    background: none; border: 0;
    color: var(--ds-text-2, #a8b1c2);
    padding: 6px 4px; margin-bottom: 6px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
  }

  /* Dashboard de vendas: gráficos ocupam largura toda e feed vem por baixo */
  .analytics-grid { gap: 14px !important; }
  .activity-panel {
    position: static !important;
    max-height: none !important;
    top: auto !important;
  }

  /* Tabelas com scroll horizontal contido */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  }
  table { min-width: 520px; }

  /* Modal em mobile: quase tela cheia */
  .modal-overlay { padding: 12px !important; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: calc(100vh - 24px);
    border-radius: 16px !important;
  }

  /* Perfil: card de notificação com botões empilhados e alvo grande */
  .profile-shell { grid-template-columns: 1fr !important; }
  #btn-push-toggle, #btn-push-test {
    width: 100%; justify-content: center;
    height: 44px !important; font-size: 14px !important;
  }

  /* Toast: mais confortável no polegar */
  .toast, .toast-container { bottom: calc(20px + env(safe-area-inset-bottom)) !important; }

  /* Menu do usuário no topbar: só o avatar, sem reservar 280px */
  body:has(.user-menu) .topbar { padding-right: 12px !important; }
  .user-menu-dropdown { right: 12px; left: auto; }
}

/* Em desktop, o hambúrguer some — sempre */
@media (min-width: 641px) {
  .mobile-menu-toggle, .thread-back, .mobile-funnel-nav, .mobile-brand { display: none !important; }
}

/* ===========================================================================
   Mobile: System bar (user-menu) e funil-nav bar
   =========================================================================== */
@media (max-width: 640px) {
  /* User-menu no mobile vira uma barra full-width fixa no topo:
     [≡] .... [🌓] [R]  */
  .user-menu {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    /* camada propria: sem isso o iOS deixa a barra "andar" durante o scroll */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    padding: 6px 12px !important;  /* respiro igual dos dois lados */
    gap: 8px !important;
    background: var(--ds-bg, #050c24);
    border-bottom: 1px solid var(--ds-line-2, rgba(255,255,255,0.06));
    justify-content: flex-end;
    height: 48px;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
  }
  /* Hamburger dentro do user-menu vai pra esquerda */
  .user-menu .mobile-menu-toggle { margin-right: 0; }
  /* Ordem visual: [logo] ......... [olho] [avatar].
     O app.js insere o botao de privacidade como PRIMEIRO filho do DOM, entao
     sem `order` ele apareceria na esquerda. Isso independe do DOM. */
  .user-menu .mobile-brand      { order: -1; }
  .user-menu .btn-privacidade   { order: 1; margin-right: 0; }
  .user-menu .user-menu-trigger { order: 2; }
  /* Logo PhantomBot centralizada entre o hamburger e o avatar */
  .user-menu .mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--ds-text-1);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.01em;
    margin-right: auto;   /* empurra o avatar pra direita */
    margin-left: 0;
  }
  .user-menu .mobile-brand img {
    width: 31px;
    height: 31px;
    border-radius: 6px;
    display: block;
    flex-shrink: 0;
  }

  /* A system bar (.user-menu) e position:fixed — ela NAO ocupa espaco no
     fluxo. Sem reservar a altura dela aqui, o primeiro elemento da pagina
     nasce debaixo dela; e como o .topbar e sticky com top:48px, ele ainda
     descia mais 48px por cima do conteudo. Resultado: o titulo de quase toda
     pagina ficava escondido. Reservar os 48px conserta os dois de uma vez,
     em todas as paginas. */
  body { padding-top: 0 !important; }
  body:has(.user-menu) {
    padding-top: calc(48px + env(safe-area-inset-top)) !important;
  }
  /* System bar (user-menu) ja ocupa 48px em cima. Topbar sticky ja empurra
     o conteudo. Nao precisamos mais reservar padding-right pro user-menu. */
  body:has(.user-menu) .topbar { padding-right: 12px !important; }

  /* Barra de navegacao por funil (Editor/Conversas/Leads/Disparador) */
  .mobile-funnel-nav {
    position: sticky;
    top: 96px;  /* logo abaixo do topbar (48+48) */
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 4px;
    background: var(--ds-bg, #050c24);
    border-bottom: 1px solid var(--ds-line-2, rgba(255,255,255,0.06));
  }
  .mfn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    border-radius: 10px;
    color: var(--ds-text-3, #8a94a6);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background 0.15s ease, color 0.15s ease;
    min-height: 52px;
  }
  .mfn-item svg { width: 18px; height: 18px; stroke-width: 2; }
  .mfn-item.is-active {
    background: var(--ds-glass-3, rgba(255,255,255,0.10));
    color: var(--ds-text-1, #e6edf7);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  }
  .mfn-item:hover:not(.is-active) {
    background: var(--ds-glass-2, rgba(255,255,255,0.05));
    color: var(--ds-text-2, #a8b1c2);
  }

  /* Sub-abas do editor (Configuracao/Fluxo/Remarketing) sao movidas via JS
     pra ficarem irmas da .mobile-funnel-nav (fora do .page). Aqui elas
     ganham posicionamento sticky com fundo SOLIDO e ficam empilhadas junto
     com as outras barras do topo. */
  .editor-tabs.moved-mobile {
    position: sticky;
    top: 152px;                /* 48 (system) + 48 (topbar) + 56 (funnel-nav) */
    z-index: 24;               /* acima do conteudo, abaixo da funnel-nav (25) */
    background: #050c24 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(91, 139, 255, 0.12) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    display: flex;
    gap: 4px;
  }
  .editor-tabs.moved-mobile .editor-tab {
    padding: 10px 6px !important;
    font-size: 12px !important;
    gap: 6px !important;   /* espaco entre icone e texto */
  }
  .editor-tabs.moved-mobile .editor-tab svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
  }

  /* Funnel-nav (Editor / Conversas / Leads / Disparador): botoes maiores
     e mais confortaveis pra toque (min-height 60px em vez de 52) */
  .mobile-funnel-nav {
    padding: 6px 4px !important;
  }
  .mfn-item {
    padding: 10px 4px !important;
    min-height: 60px !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  .mfn-item svg { width: 20px !important; height: 20px !important; }

  /* Barra de sub-abas: ajusta o top pra bater com a funnel-nav mais alta.
     48 (system) + 48 (topbar) + 72 (funnel-nav com min-height 60 + padding) */
  .editor-tabs.moved-mobile { top: 168px !important; }

  /* Fluxo pane: adiciona um pouco de padding no topo pra o botao
     "+ Adicionar etapa" nao ficar colado na sub-tab bar sticky */
  .editor-pane[data-pane="fluxo"] { padding-top: 10px; }
  .editor-pane[data-pane="fluxo"] > .row:first-child {
    flex-wrap: wrap;
    row-gap: 8px;
    margin-bottom: 12px !important;
  }
  .editor-pane[data-pane="fluxo"] > .row:first-child > .section-title {
    flex: 1 1 auto;
    min-width: 140px;
  }
  .editor-pane[data-pane="fluxo"] > .row:first-child #btn-add-node {
    width: 100%;
    height: 40px;
    font-size: 13px;
  }
}

/* Desktop e mobile: nao deixar texto dos botoes secondary/primary quebrar
   em duas linhas. */
.btn-primary, .btn-secondary {
  white-space: nowrap;
}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ===========================================================================
   Tags de leads — pills coloridas com botao X pra remover
   =========================================================================== */
.lead-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand-500, #3b82f6) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-500, #3b82f6) 32%, transparent);
  color: var(--ds-text-1, #e6edf7);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
@supports not (background: color-mix(in oklab, red 12%, transparent)) {
  .lead-tag {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.32);
  }
}
.lead-tag-x {
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.lead-tag-x:hover {
  background: var(--ds-danger, #ef4444);
}


/* ===========================================================================
   Dashboard de vendas — abas mobile (Resumo / Funis / Vendas / Atividade)
   =========================================================================== */
/* No desktop, a barra de abas fica escondida e o layout duas colunas prevalece */
.mobile-seg { display: none; }

@media (max-width: 960px) {
  /* Sinaliza que estamos em "modo abas" — cada view aparece só se a aba dela
     estiver ativa. O body ganha data-analytics-view via JS. */
  .mobile-seg {
    /* Eram 4 colunas fixas pra 5 botoes — "Atividade" caia pra segunda linha.
       Flex com base no conteudo cabe numa linha so ate em tela de 320px:
       cada aba pega a largura do texto e o resto e dividido igualmente. */
    display: flex;
    gap: 0;
    padding: 4px;
    background: var(--ds-glass-2, rgba(255,255,255,0.06));
    border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
    border-radius: 12px;
    margin: 4px 0 16px;
    position: sticky;
    top: 8px;
    z-index: 20;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .mobile-seg-btn {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    height: 36px;
    padding: 0 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-text-2, #a8b1c2);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-seg-btn.is-active {
    background: var(--ds-glass-3, rgba(255,255,255,0.10));
    color: var(--ds-text-1, #e6edf7);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
                0 6px 14px rgba(0,0,0,0.25);
  }
  /* Ponto vermelho pulsante pra sinalizar evento novo na aba "Atividade" */
  .mobile-seg-dot {
    display: none;
    position: absolute;
    top: 5px; right: 4px;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
    animation: seg-dot-pulse 1.6s ease-out infinite;
  }
  .mobile-seg-dot.has-new { display: block; }
  @keyframes seg-dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  }

  /* Só mostra a view da aba ativa */
  body[data-analytics-view] .analytics-view,
  body[data-analytics-view] .activity-panel { display: none; }
  body[data-analytics-view="resumo"]    .analytics-view[data-view="resumo"],
  body[data-analytics-view="funis"]     .analytics-view[data-view="funis"],
  body[data-analytics-view="vendas"]    .analytics-view[data-view="vendas"],
  body[data-analytics-view="campanhas"] .analytics-view[data-view="campanhas"],
  body[data-analytics-view="atividade"] .activity-panel[data-view="atividade"] {
    display: block;
  }

  /* Cabeçalho da aba Campanhas: em vez de tentar caber tudo em uma linha
     (título + descrição + select + botão), empilha vertical.  */
  .analytics-view[data-view="campanhas"] > .row {
    display: block !important;
  }
  .analytics-view[data-view="campanhas"] > .row > .spacer { display: none; }
  .analytics-view[data-view="campanhas"] > .row > * {
    display: block;
    margin: 0 0 8px !important;
    width: 100%;
    max-width: 100%;
  }
  .analytics-view[data-view="campanhas"] > .row #camp-funnel-select {
    box-sizing: border-box;
  }
  .analytics-view[data-view="campanhas"] > .row #btn-new-campaign {
    text-align: center;
    height: 40px;
  }
  /* Cards de campanha ganham padding menor e as métricas quebram linha */
  .analytics-view[data-view="campanhas"] .card { padding: 12px !important; }
  .analytics-view[data-view="campanhas"] .card .row { gap: 12px !important; }

  /* Grid vira uma coluna e sem gap (as abas já cuidam da separação) */
  .analytics-grid { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* KPIs em duas colunas: métricas ficam pareadas, sem cortar */
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .kpi {
    padding: 14px !important;
    gap: 10px;
    border-radius: 14px;
    min-width: 0 !important;      /* impede grid children de forçar overflow */
    overflow: hidden;
  }
  .kpi-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
  .kpi-icon svg { width: 15px; height: 15px; }
  .kpi-value {
    font-size: 18px !important;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kpi-label { font-size: 9px !important; }
  .kpi-body { min-width: 0 !important; overflow: hidden; }

  /* Cabeçalho da seção Evolução: título em cima, tabs embaixo */
  .analytics-view[data-view="resumo"] .row {
    flex-wrap: wrap; gap: 10px;
  }
  .range-tabs { display: flex; gap: 4px; width: 100%; }
  .range-tabs button { flex: 1; height: 32px; font-size: 12px; }

  /* Gráficos ocupam largura toda, sem overflow horizontal */
  .chart-card { padding: 12px !important; margin-bottom: 12px !important; }
  .chart-card > div { max-width: 100%; overflow-x: hidden; }
  .chart-card svg, .chart-card canvas { max-width: 100% !important; height: auto !important; }

  /* --------------------------------------------------------------------
     Tabelas do dashboard viram cards empilhados — sem scroll horizontal.
     Padrão de app nativo (Nubank, Stone): cada linha da tabela vira um
     bloco vertical com o nome do funil grande e as métricas embaixo em
     pills, cada uma com o rótulo da coluna via ::before.
     -------------------------------------------------------------------- */
  #funnels-table table, #sales-table table {
    display: block;
    width: 100%;
    min-width: 0;                /* mata o min-width que forçava scroll */
    border-collapse: separate;
    border-spacing: 0;
  }
  #funnels-table thead, #sales-table thead { display: none; }
  #funnels-table tbody, #sales-table tbody { display: block; }
  #funnels-table tr, #sales-table tr {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--ds-glass-2, rgba(255,255,255,0.04));
    border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  }
  #funnels-table tr:last-child, #sales-table tr:last-child { margin-bottom: 0; }
  #funnels-table td, #sales-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0 !important;
    border: 0;
    text-align: right;
    font-size: 13px;
    gap: 12px;
  }
  #funnels-table td::before, #sales-table td::before {
    content: attr(data-label);
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ds-text-4, #6b7889);
    font-weight: 500;
    white-space: nowrap;
  }

  /* Primeira célula (nome do funil / data): título em cima, cheio */
  #funnels-table td:first-child,
  #sales-table td:first-child {
    display: block;
    text-align: left;
    padding: 0 0 8px !important;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ds-line-2, rgba(255,255,255,0.06));
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--ds-text-1, #e6edf7);
  }
  #funnels-table td:first-child::before,
  #sales-table td:first-child::before { display: none; }

  /* Última célula (faturamento/valor): destaca em verde */
  #funnels-table td:last-child,
  #sales-table td:last-child {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #6ee7b7;
  }

  /* Não precisamos mais do card-table zerando padding porque já não tem
     tabela larga que estoure — a gente reativa o padding original */
  .card-table { padding: 14px !important; }

  /* Feed de atividade em tela cheia quando é a aba ativa */
  body[data-analytics-view="atividade"] .activity-panel {
    background: transparent;
    border: 0;
    padding: 0;
    max-height: none;
  }
  body[data-analytics-view="atividade"] .activity-head h3 {
    font-size: 16px !important;
  }
}

@media (max-width: 380px) {
  .mobile-seg-btn { font-size: 10.5px; padding: 0 2px; }
}

/* ===========================================================================
   Ajustes específicos: evitar estouro horizontal no editor e nas tabelas
   =========================================================================== */
@media (max-width: 640px) {
  /* --- Editor: cards de etapa (node-card) --- */
  /* Cabeçalho da etapa: nome + pill + Excluir precisam quebrar linha */
  .node-card { overflow: hidden; }
  .node-card .node-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .node-card .node-head input.node-name {
    flex: 1 1 100%;      /* nome ocupa a linha inteira */
    min-width: 0;
    order: 2;
    font-size: 15px !important;
  }
  .node-card .node-head .star { order: 1; }
  .node-card .node-head .pill { order: 3; }
  .node-card .node-head .btn-del { order: 4; margin-left: auto; }

  /* Linha de botão de navegação (label + destino + remover) */
  .btn-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .btn-row input, .btn-row select { flex: 1 1 100%; min-width: 0; }
  .btn-row .x { flex: 0 0 auto; align-self: flex-end; }

  /* Miniaturas de mídia: um pouco menores pra caberem 4 por linha */
  .media-item { width: 72px; height: 72px; }

  /* Fields internos: quebra livre e nada estoura */
  .node-card .field { min-width: 0; }
  .node-card textarea { min-height: 90px; }

  /* --- Cards que envolvem tabelas grandes (por funil, vendas, leads) --- */
  /* Card com classe card-table (usado no analytics): zera o padding pra
     tabela poder rolar horizontalmente dentro dele sem vazar pra direita. */
  .card-table {
    padding: 0 !important;
    overflow: hidden;
  }
  .card-table > .table-wrap {
    border: 0 !important;
    border-radius: 14px;
  }

  /* Reforço geral: nada nas páginas estoura o viewport pra direita */
  .page, .editor-grid, .analytics-grid { max-width: 100%; overflow-x: hidden; }
  .editor-pane, .analytics-view { min-width: 0; overflow-x: hidden; }
  .card { max-width: 100%; overflow-x: hidden; }
  /* mas quem envolve tabela precisa poder rolar horizontalmente */
  .card .table-wrap { overflow-x: auto; }
}

/* ===========================================================================
   Node cards do editor — identidade visual FORTE por tipo de etapa.
   Cada tipo (start / message / upsell / downsell / pix / end) ganha:
   - Barra colorida grossa na esquerda
   - Faixa colorida sutil no topo (gradient)
   - Fundo com tint da cor do tipo (bem baixinho, ~4%)
   - Pill grandona com icone SVG do tipo em destaque
   Objetivo: o operador identifica cada modulo de longe, sem ler.
   =========================================================================== */

/* Baseline do card: barra esquerda grossa (fica em cima de tudo) */
.node-card {
  position: relative;
  border-left: 6px solid var(--r-message);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Faixa colorida do topo — pseudo-element com gradient sutil pra "assinar"
   o card sem competir com o conteudo. */
.node-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--r-message);
  opacity: 0.85;
  pointer-events: none;
}

/* Tint do fundo: aplica em cima do glass do card, bem sutil */
:root {
  /* Verde da entrega — vibrante o suficiente pra destacar do start (que
     tambem e verde-esmeralda), tende pro turquesa/lima. */
  --r-delivery: #10b981;
}

.node-card.role-start    { background-color: color-mix(in oklab, var(--r-start)    6%, transparent); border-left-color: var(--r-start); }
.node-card.role-message  { background-color: color-mix(in oklab, var(--r-message)  5%, transparent); border-left-color: var(--r-message); }
.node-card.role-upsell   { background-color: color-mix(in oklab, var(--r-upsell)   6%, transparent); border-left-color: var(--r-upsell); }
.node-card.role-downsell { background-color: color-mix(in oklab, var(--r-downsell) 6%, transparent); border-left-color: var(--r-downsell); }
.node-card.role-pix      { background-color: color-mix(in oklab, var(--r-pix)      6%, transparent); border-left-color: var(--r-pix); }
.node-card.role-delivery { background-color: color-mix(in oklab, var(--r-delivery) 8%, transparent); border-left-color: var(--r-delivery); }
.node-card.role-end      { background-color: color-mix(in oklab, var(--r-end)      5%, transparent); border-left-color: var(--r-end); }

.node-card.role-start::before    { background: var(--r-start); }
.node-card.role-message::before  { background: var(--r-message); }
.node-card.role-upsell::before   { background: var(--r-upsell); }
.node-card.role-downsell::before { background: var(--r-downsell); }
.node-card.role-pix::before      { background: var(--r-pix); }
.node-card.role-delivery::before { background: var(--r-delivery); }
.node-card.role-end::before      { background: var(--r-end); }

/* Fallback pra navegadores antigos sem color-mix — usa rgba manual */
@supports not (background: color-mix(in oklab, red 5%, transparent)) {
  .node-card.role-start    { background-color: rgba(47, 197, 110, 0.06); }
  .node-card.role-message  { background-color: rgba(61, 155, 255, 0.05); }
  .node-card.role-upsell   { background-color: rgba(167, 134, 255, 0.06); }
  .node-card.role-downsell { background-color: rgba(240, 169, 58, 0.06); }
  .node-card.role-pix      { background-color: rgba(40, 200, 189, 0.06); }
  .node-card.role-end      { background-color: rgba(133, 144, 163, 0.05); }
}

/* Pill do role: gancho visual principal — grandona com icone */
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--r-message);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 4px 10px -2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  line-height: 1;
}
.role-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}
.role-pill-icon svg { width: 13px; height: 13px; }
.role-pill-label { font-size: inherit; }

.role-pill.badge-start    { background: var(--r-start); }
.role-pill.badge-message  { background: var(--r-message); }
.role-pill.badge-upsell   { background: var(--r-upsell); }
.role-pill.badge-downsell { background: var(--r-downsell); }
.role-pill.badge-pix      { background: var(--r-pix); }
.role-pill.badge-delivery { background: var(--r-delivery); }
.role-pill.badge-end      { background: var(--r-end); }

/* Star (marcar como etapa inicial) ganha destaque em amarelo quando ativo */
.node-card .star { font-size: 18px; transition: transform 0.15s ease; }
.node-card .star:hover { transform: scale(1.15); }

/* Select "Tipo da etapa": borda esquerda com a cor do tipo atual pra o
   operador ver que mudar aqui muda o card inteiro */
.node-card .node-role {
  border-left: 3px solid var(--r-message);
}
.node-card.role-start .node-role    { border-left-color: var(--r-start); }
.node-card.role-upsell .node-role   { border-left-color: var(--r-upsell); }
.node-card.role-downsell .node-role { border-left-color: var(--r-downsell); }
.node-card.role-pix .node-role      { border-left-color: var(--r-pix); }
.node-card.role-delivery .node-role { border-left-color: var(--r-delivery); }
.node-card.role-end .node-role      { border-left-color: var(--r-end); }

/* Input de URL do botao — hint visual quando preenchido (link externo) */
.btn-row .b-url {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ds-glass-1, rgba(255,255,255,0.04));
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  color: var(--ds-text-1, #e6edf7);
  font-size: 12px;
  font-family: "JetBrains Mono", monospace;
}
.btn-row .b-url:not(:placeholder-shown) {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(16, 185, 129, 0.06);
}

/* Botao no simulador que aponta pra URL externa — mostra ↗ */
.sim-btn-url { border-color: rgba(16, 185, 129, 0.5) !important; }
.sim-btn-link {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.7;
  font-size: 12px;
}

/* Em mobile as pills ficam menores mas ainda destacadas */
@media (max-width: 640px) {
  .role-pill { padding: 4px 8px 4px 7px; font-size: 10px; }
  .role-pill-icon { width: 13px; height: 13px; }
  .role-pill-icon svg { width: 11px; height: 11px; }
  .node-card { border-left-width: 5px; }
  .node-card::before { height: 2px; }
}

/* ===========================================================================
   Paleta de emojis pros rótulos de botão
   =========================================================================== */
.emoji-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 100%;
  padding: 4px 0 0;
}
.emoji-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.emoji-btn:hover {
  background: var(--ds-glass-2, rgba(255,255,255,0.06));
  border-color: var(--ds-line-2, rgba(255,255,255,0.08));
}

/* ===========================================================================
   FAB "Nova etapa" no editor Fluxo
   =========================================================================== */
.node-fab {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.95);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    0 12px 30px -6px rgba(37, 99, 235, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  transition: transform 0.16s ease, box-shadow 0.18s ease;
}
.node-fab:hover {
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px -6px rgba(37, 99, 235, 0.65),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.node-fab svg { width: 20px; height: 20px; stroke-width: 2.4; }

/* Só aparece quando a aba Fluxo está ativa */
.editor-pane[data-pane="fluxo"].is-hidden .node-fab { display: none !important; }
.editor-pane[data-pane="config"] .node-fab,
.editor-pane[data-pane="remarketing"] .node-fab { display: none !important; }

/* Em mobile o FAB fica mais discreto e o texto some (só o + fica) */
@media (max-width: 640px) {
  .node-fab {
    height: 52px;
    padding: 0;
    width: 52px;
    justify-content: center;
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .node-fab svg { width: 22px; height: 22px; }
  .node-fab span { display: none; }
}

/* ===========================================================================
   Modo apresentação (esconde miniaturas de mídia dos nodes)
   =========================================================================== */
body.privacy-on .node-card .media-thumb,
body.privacy-on .node-card video.media-thumb {
  filter: blur(18px) brightness(0.4);
  transition: filter 0.2s ease;
}
body.privacy-on .node-card .media-item:hover .media-thumb {
  /* Revela ao passar o mouse (útil pro operador conferir sem tirar o modo) */
  filter: blur(4px) brightness(0.7);
}
body.privacy-on .node-card .media-item::after {
  content: "🔒";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  pointer-events: none;
  filter: none;
}

/* ===========================================================================
   Emoji picker: botão inline (😊) + popup flutuante
   =========================================================================== */
.emoji-open-btn {
  background: transparent;
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-3, #8a94a6);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.emoji-open-btn:hover {
  background: var(--ds-glass-2, rgba(255,255,255,0.06));
  color: var(--ds-text-1, #e6edf7);
}
.emoji-open-btn svg { width: 18px; height: 18px; }

.emoji-popup {
  position: absolute;
  z-index: 100;
  background: #0f1420;
  border: 1px solid var(--ds-line-2, rgba(255,255,255,0.10));
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 24px 60px -10px rgba(0,0,0,0.65);
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
}
.emoji-cat-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-4, #6b7889);
  margin: 8px 4px 4px;
}
.emoji-cat-title:first-child { margin-top: 0; }
.emoji-cat {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.emoji-cell {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s;
}
.emoji-cell:hover {
  background: var(--ds-glass-3, rgba(255,255,255,0.10));
}

/* Mobile: popup respeita safe area e não estoura */
@media (max-width: 640px) {
  .emoji-popup {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 320px;
  }
  .emoji-cat { grid-template-columns: repeat(7, 1fr); }
  .emoji-cell { height: 40px; font-size: 22px; }
}

/* ===========================================================================
   Refinamento visual v2.2 (redesign Lovable)
   Novos componentes: sparklines, hero de saldo, mini-KPIs de funil,
   breadcrumb de fluxo, chips com contador, gráfico de barras horizontais,
   card de saúde de pix, hero de leads.
   =========================================================================== */

/* ---- Sparkline mini-wave debaixo dos KPIs ---- */
.kpi-sparkline {
  width: 100%;
  height: 32px;
  margin-top: 6px;
  opacity: 0.85;
  display: block;
}
.kpi-sparkline path.spark-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-sparkline path.spark-area {
  opacity: 0.35;
}
/* KPI ganha coluna vertical (icon + body em cima, sparkline embaixo) */
.kpi.has-spark {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.kpi.has-spark .kpi-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kpi.has-spark .kpi-body { flex: 1; }

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  margin-top: 2px;
  font-weight: 500;
}
.kpi-delta--up { color: var(--ds-success); }
.kpi-delta--down { color: var(--ds-danger); }
.kpi-delta--neutral { color: var(--ds-text-4); }

/* ---- Hero card grande (usado no financeiro pra saldo) ---- */
.hero-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 24px;
  padding: 26px 28px;
  border-radius: 20px;
  background:
    radial-gradient(420px circle at 12% 20%, rgba(59, 130, 246, 0.15), transparent 55%),
    radial-gradient(420px circle at 90% 100%, rgba(139, 92, 246, 0.12), transparent 55%),
    var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  align-items: center;
  overflow: hidden;
  position: relative;
}
.hero-metric-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-text-4);
  font-weight: 500;
  margin-bottom: 8px;
}
.hero-metric-value {
  font-family: "Space Grotesk", sans-serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  /* Cor vibrante gradient azul (mesmo look do "R$ 28.274,17" do Lovable). */
  background: linear-gradient(180deg, var(--brand-300) 0%, var(--brand-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-400);   /* fallback pra browsers sem background-clip */
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 0 0 32px rgba(91, 139, 255, 0.25);
}
.hero-metric-hint {
  font-size: 13px;
  color: var(--ds-text-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-metric-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-line-1);
}
.hero-metric-mini > div { display: flex; flex-direction: column; gap: 2px; }
.hero-metric-mini strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  color: var(--ds-text-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-metric-mini span {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  color: var(--ds-text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hero-metric-chart {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 860px) {
  .hero-metric { grid-template-columns: 1fr; padding: 20px; }
  .hero-metric-value { font-size: 34px; }
  .hero-metric-mini { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
  .hero-metric-mini { grid-template-columns: 1fr; }
}

/* ---- Summary-strip: barra fina com 4 KPIs (topo do dashboard de funis) ---- */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-2);
  margin-bottom: 20px;
}
.summary-strip-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 12px;
  border-left: 2px solid var(--ds-line-2);
}
.summary-strip-item:first-child { border-left: 0; padding-left: 0; }
.summary-strip-item span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--ds-text-4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.summary-strip-item strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-400);   /* azul vibrante — mesmo look do Lovable */
  letter-spacing: -0.02em;
}
@media (max-width: 640px) {
  .summary-strip { padding: 12px; }
  .summary-strip-item {
    border-left: 0;
    padding: 8px 0;
    border-top: 1px solid var(--ds-line-2);
  }
  .summary-strip-item:first-child { border-top: 0; padding-top: 0; }
}

/* ---- Chip com contador (filtros de status) ---- */
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 12px;
  border-radius: 999px;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-text-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.chip-filter:hover {
  background: var(--ds-glass-3);
  color: var(--ds-text-1);
  border-color: var(--ds-line-3);
}
.chip-filter.is-active {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(59, 130, 246, 0.45);
  color: var(--brand-300);
}
.chip-filter .chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  color: var(--ds-text-2);
}
.chip-filter.is-active .chip-count {
  background: rgba(59, 130, 246, 0.24);
  color: #fff;
}
.chip-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Gráfico de barras horizontal (starts por hora) ---- */
.hbar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding: 16px 4px 8px;
}
.hbar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hbar-bar {
  width: 100%;
  max-width: 28px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  border-radius: 6px 6px 2px 2px;
  transition: opacity 0.15s ease, transform 0.15s ease;
  cursor: default;
  min-height: 4px;
  opacity: 0.85;
}
.hbar-bar:hover { opacity: 1; transform: scaleY(1.03); transform-origin: bottom; }
.hbar-bar[data-empty="true"] {
  background: var(--ds-glass-3);
  opacity: 0.5;
}
.hbar-lbl {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  color: var(--ds-text-4);
  letter-spacing: 0.04em;
}

/* ---- Card de saúde do Pix (barra horizontal segmentada) ---- */
.pix-health-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
}
.pix-health-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pix-health-head h3 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pix-health-nums {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ds-text-3);
}
.pix-health-nums span strong {
  font-family: "Space Grotesk", sans-serif;
  color: var(--ds-text-1);
  font-weight: 700;
  font-size: 14px;
  margin-right: 4px;
}
.pix-health-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-2);
}
.pix-health-bar-paid { background: linear-gradient(90deg, #10b981, #22c78a); }
.pix-health-bar-pending { background: linear-gradient(90deg, #f59e0b, #f6c453); }
.pix-health-bar-expired { background: var(--ds-glass-3); }

/* ---- Funnel thumb enriquecido (mini-KPIs, progresso, breadcrumb) ---- */
.thumb-mini-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-1);
  margin-top: 4px;
}
.thumb-mini-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.thumb-mini-kpi span {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: var(--ds-text-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.thumb-mini-kpi strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  /* Azul vibrante — matches Lovable pra dar destaque nos valores. */
  color: var(--brand-400);
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.thumb-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
}
.thumb-progress-head span:first-child {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  color: var(--ds-text-4);
  letter-spacing: 0.12em;
}
.thumb-progress-head span:last-child {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--ds-text-2);
  font-size: 12px;
}
.thumb-progress-bar {
  height: 5px;
  border-radius: 999px;
  background: var(--ds-glass-3);
  overflow: hidden;
}
.thumb-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-300));
  box-shadow: 0 0 12px rgba(91, 139, 255, 0.45);
  border-radius: inherit;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.thumb-flow {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding: 8px 0 4px;
  border-top: 1px dashed var(--ds-line-1);
}
.thumb-flow-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 4px;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-2);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ds-text-2);
  max-width: 100%;
  overflow: hidden;
}
.thumb-flow-item b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--brand-500);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.thumb-flow-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}
.thumb-flow-sep {
  color: var(--ds-text-5);
  font-size: 11px;
  padding: 0 2px;
}

/* Botão fantasma (usado como secundário sem borda no card do funil) */
.btn-ghost-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--ds-line-2);
  border-radius: 10px;
  color: var(--ds-text-3);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.btn-ghost-inline:hover {
  background: var(--ds-glass-2);
  color: var(--ds-text-1);
  border-color: var(--ds-line-3);
}
.btn-ghost-inline svg { width: 14px; height: 14px; stroke-width: 2; }

/* Card "criar novo funil" (placeholder dashed) */
.funnel-create-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 24px;
  border-radius: 18px;
  border: 2px dashed var(--ds-line-3);
  background: transparent;
  color: var(--ds-text-3);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  min-height: 260px;
}
.funnel-create-card:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.04);
  color: var(--ds-text-1);
}
.funnel-create-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.24);
  color: var(--brand-400);
}
.funnel-create-card-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.funnel-create-card strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-text-1);
}
.funnel-create-card span {
  font-size: 12.5px;
  max-width: 200px;
  text-align: center;
  line-height: 1.4;
}

/* ---- Header hero de leads (kicker + h1 grandão + contador) ---- */
.hero-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.hero-header .kicker { margin-bottom: 2px; }
.hero-header h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero-header .hero-sub {
  font-size: 13.5px;
  color: var(--ds-text-3);
}

/* ---- Avatar circular de lead (iniciais + gradient) ---- */
.lead-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.lead-avatar-a { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.lead-avatar-b { background: linear-gradient(135deg, #22c78a, #10b981); }
.lead-avatar-c { background: linear-gradient(135deg, #f59e0b, #f6c453); }
.lead-avatar-d { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.lead-avatar-e { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.lead-avatar-f { background: linear-gradient(135deg, #06b6d4, #3b82f6); }

.lead-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ds-line-1);
  transition: background 0.15s ease;
  cursor: default;
}
.lead-row:hover { background: var(--ds-glass-1); }
.lead-row:last-child { border-bottom: 0; }
.lead-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lead-row-name {
  font-weight: 600;
  color: var(--ds-text-1);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lead-row-handle {
  font-size: 12px;
  color: var(--ds-text-3);
  font-family: "JetBrains Mono", monospace;
}
.lead-row-funnel {
  font-size: 12px;
  color: var(--ds-text-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.lead-row-value {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ds-text-1);
  min-width: 76px;
  text-align: right;
}
.lead-row-value.paid { color: #6ee7b7; }
.lead-row-time {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--ds-text-4);
  min-width: 60px;
  text-align: right;
}

@media (max-width: 720px) {
  .lead-row { padding: 12px; flex-wrap: wrap; gap: 10px; }
  .lead-row-funnel { display: none; }
  .lead-row-time { min-width: 0; }
}

/* ---- Pix-provider health rows (analytics reformulado) ---- */
.pixel-provider-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  transition: border-color 0.2s ease;
}
.pixel-provider-row[data-state="bad"] { border-color: rgba(239, 68, 68, 0.35); }
.pixel-provider-row[data-state="good"] { border-color: rgba(34, 197, 94, 0.28); }
.pixel-provider-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pixel-provider-row-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.pixel-provider-row-title strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ds-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pixel-provider-row-title small {
  font-size: 11px;
  color: var(--ds-text-4);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Cards do dashboard-overview: painel lateral de atividade rico ---- */
.activity-filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 10px;
  margin: 4px 0 8px;
  border-bottom: 1px solid var(--ds-line-1);
}
.activity-filter-btn {
  padding: 5px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ds-line-2);
  color: var(--ds-text-3);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: all 0.15s ease;
}
.activity-filter-btn:hover {
  background: var(--ds-glass-2);
  color: var(--ds-text-1);
}
.activity-filter-btn.is-active {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--brand-300);
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: 999px;
  color: #f87171;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.live-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  animation: pulse-dot 1.6s ease-in-out infinite;
}

/* ---- Chart-card no dashboard overview: header enriquecido ---- */
.chart-card { padding: 20px; }
.chart-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  letter-spacing: -0.01em;
  margin: 0;
  font-weight: 600;
}

/* ---- Row de 2 gráficos (starts por hora + saude pix) ---- */
.overview-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
}
@media (max-width: 900px) {
  .overview-secondary-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Editor Fluxo — Sanfona hierárquica de 3 níveis (categoria → item → card)
   Nível 1: .editor-cat (por role, colapsável)
   Nível 2: .editor-node-item (linha compacta, drag handle + nome + pill)
   Nível 3: .editor-node-body (card completo inline abaixo do item)
   =========================================================================== */
.editor-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* -------- Nível 1: categoria -------------------------------------------- */
.editor-cat {
  border: 1px solid var(--ds-line-2);
  border-radius: 14px;
  background: var(--ds-glass-1);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.editor-cat.is-open { border-color: var(--ds-line-3); }
.editor-cat.is-empty { opacity: 0.72; }
.editor-cat.is-drop-hint {
  border-color: rgba(59, 130, 246, 0.6);
  background: rgba(59, 130, 246, 0.06);
}

.editor-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease;
}
.editor-cat-header:hover { background: var(--ds-glass-2); }
.editor-cat-header:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.5);
  outline-offset: -2px;
}

.editor-cat-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--ds-text-3);
  transition: transform 0.22s ease;
}
.editor-cat-chevron svg { width: 100%; height: 100%; }
.editor-cat.is-open .editor-cat-chevron { transform: rotate(90deg); }

.editor-cat-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  background: var(--r-message);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
.editor-cat-icon svg { width: 15px; height: 15px; }

.editor-cat.cat-start    .editor-cat-icon { background: var(--r-start); }
.editor-cat.cat-message  .editor-cat-icon { background: var(--r-message); }
.editor-cat.cat-upsell   .editor-cat-icon { background: var(--r-upsell); }
.editor-cat.cat-downsell .editor-cat-icon { background: var(--r-downsell); }
.editor-cat.cat-pix      .editor-cat-icon { background: var(--r-pix); }
.editor-cat.cat-delivery .editor-cat-icon { background: var(--r-delivery); }
.editor-cat.cat-end      .editor-cat-icon { background: var(--r-end); }

.editor-cat-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-1);
}
.editor-cat-count {
  color: var(--ds-text-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
}
.editor-cat-add {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-text-2);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.editor-cat-add:hover {
  background: var(--ds-glass-3);
  border-color: var(--ds-line-3);
  color: var(--ds-text-1);
}
.editor-cat-add svg { width: 16px; height: 16px; }

/* "Repetir ciclo" no header do Downsell.
   O "+" ja tem margin-left:auto. Com DOIS auto no mesmo flex, a sobra e
   dividida entre os dois e o "+" descola da borda direita — some o canto.
   Aqui o irmao seguinte perde o auto e fica colado no controle, com o gap
   de 10px do proprio header. */
.editor-cat-header .cat-loop + .editor-cat-add { margin-left: 0; }
.editor-cat-header .cat-loop select { cursor: pointer; }

/* Body colapsável — animação de max-height */
.editor-cat-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, padding 0.18s ease;
  padding: 0 8px;
}
.editor-cat.is-open .editor-cat-body {
  /* Cap alto o bastante pra caber cards expandidos empilhados */
  max-height: 40000px;
  padding: 4px 8px 10px;
}

.editor-cat-empty {
  padding: 14px 12px;
  text-align: center;
  color: var(--ds-text-3);
  font-size: 12.5px;
  font-style: italic;
}

/* -------- Nível 2: item compacto ---------------------------------------- */
.editor-node-wrap {
  /* Container do item + body — ficam juntos pra o drag mover ambos */
}

.editor-node-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 4px 0;
  border-radius: 10px;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-1);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.editor-node-item:hover {
  background: var(--ds-glass-2);
  border-color: var(--ds-line-2);
}
.editor-node-item.is-open {
  background: var(--ds-glass-2);
  border-color: var(--ds-line-3);
}
/* Arraste de etapa — Pointer Events (ver initArrastarEtapas no editor.js).
   A etapa arrastada acompanha o cursor por transform no .editor-node-wrap;
   aqui so o destaque visual. */
.editor-node-item.is-dragging {
  opacity: .96;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  border-radius: 10px;
}
/* .drop-before / .drop-after removidos: eram as linhas-guia do
   drag-and-drop nativo. Com a reordenacao ao vivo nao existe mais
   "posicao prevista" pra indicar — a etapa ja esta no lugar. */

.editor-node-item .item-drag {
  cursor: grab;
  color: var(--ds-text-3);
  padding: 4px 2px;
  user-select: none;
  font-size: 13px;
  line-height: 1;
  flex: 0 0 auto;
  letter-spacing: -2px;
  font-family: "JetBrains Mono", monospace;
}
.editor-node-item .item-drag:hover { color: var(--ds-text-1); }
.editor-node-item .item-drag:active,
.editor-node-item.is-dragging .item-drag { cursor: grabbing; }
/* OBRIGATORIO pro toque: sem isso o celular trata o arraste como rolagem
   da pagina e o pointermove nunca chega ao handler. */
.editor-node-item .item-drag { touch-action: none; user-select: none; }

/* Enquanto arrasta uma etapa: cursor consistente na pagina toda e nada de
   selecionar texto sem querer. */
/* Enquanto desliza pro lugar novo, o elemento nao intercepta o ponteiro.
   Se interceptasse, o elementFromPoint o devolveria na posicao PINTADA (meio
   da animacao) e a decisao de troca oscilaria — a lista tremeria. */
.flip-animando { pointer-events: none; }

body.arrastando-etapa { cursor: grabbing; user-select: none; }
body.arrastando-etapa .editor-node-item { cursor: grabbing; }

.editor-node-item .item-chev {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--ds-text-3);
  transition: transform 0.2s ease;
}
.editor-node-item .item-chev svg { width: 100%; height: 100%; }
.editor-node-item.is-open .item-chev { transform: rotate(90deg); }

.editor-node-item .item-star {
  color: #fbbf24;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.55));
  font-size: 12px;
  margin-right: -2px;
  flex: 0 0 auto;
}

.editor-node-item .item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--ds-text-1);
}

.editor-node-item .item-pill {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  flex: 0 0 auto;
  background: var(--r-message);
  line-height: 1;
  white-space: nowrap;
}
.editor-node-item.role-start    .item-pill { background: var(--r-start); }
.editor-node-item.role-message  .item-pill { background: var(--r-message); }
.editor-node-item.role-upsell   .item-pill { background: var(--r-upsell); }
.editor-node-item.role-downsell .item-pill { background: var(--r-downsell); }
.editor-node-item.role-pix      .item-pill { background: var(--r-pix); }
.editor-node-item.role-delivery .item-pill { background: var(--r-delivery); }
.editor-node-item.role-end      .item-pill { background: var(--r-end); }

.editor-node-item .item-delete {
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ds-danger);
  flex: 0 0 auto;
  padding: 0;
}
.editor-node-item:hover .item-delete,
.editor-node-item:focus-within .item-delete { opacity: 0.85; }
.editor-node-item .item-delete:hover {
  opacity: 1;
  background: rgba(239, 83, 86, 0.15);
}
.editor-node-item .item-delete svg { width: 14px; height: 14px; }

/* -------- Nível 3: body do card completo -------------------------------- */
.editor-node-body {
  display: none;
  padding: 2px 4px 10px;
  margin: -2px 0 6px;
}
.editor-node-body.is-open { display: block; }
/* Card interno perde a margem externa — já está dentro do body */
.editor-node-body .node-card { margin: 0; }

/* Em mobile: alvos de toque maiores + drag handle mais visível */
@media (max-width: 640px) {
  .editor-cat-header { padding: 11px 12px; gap: 8px; }
  .editor-cat-title { font-size: 11px; letter-spacing: 0.06em; }
  .editor-cat-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .editor-cat-icon svg { width: 13px; height: 13px; }
  .editor-cat-add { width: 34px; height: 34px; }
  .editor-node-item {
    padding: 10px;
    gap: 10px;
    min-height: 44px;
  }
  .editor-node-item .item-drag {
    padding: 8px 4px;
    font-size: 15px;
    color: var(--ds-text-2);
  }
  .editor-node-item .item-name { font-size: 13px; }
  .editor-node-item .item-pill { font-size: 9px; padding: 2px 6px; }
  /* Delete sempre visível no touch — não tem hover */
  .editor-node-item .item-delete { opacity: 0.7; }
}

/* ============================================================
 * Dashboard tabs (Visao geral / Monitor multi-funil)
 * ============================================================ */
.dash-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 18px;
  border-bottom: 1px solid var(--ds-line-1);
}
.dash-tab {
  background: transparent;
  border: 0;
  color: var(--ds-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.dash-tab:hover { color: var(--ds-text-1); }
.dash-tab.is-active {
  color: var(--brand-300);
  border-bottom-color: var(--brand-400);
}
.dash-tab-panel[hidden] { display: none; }

/* ============================================================
 * Monitor multi-funil — picker de funis + grid 2x2 de cards
 * ============================================================ */
.monitor-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.monitor-picker {
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-1);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.monitor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.monitor-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-1);
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--ds-text-1);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.monitor-chip:hover:not(:disabled) {
  border-color: var(--brand-500);
  background: var(--ds-glass-3);
}
.monitor-chip.is-active {
  background: rgba(76, 125, 255, 0.14);
  border-color: var(--brand-400);
  color: var(--brand-200);
}
.monitor-chip.is-disabled,
.monitor-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.monitor-chip-name { font-weight: 600; }
.monitor-chip-bot {
  font-size: 11px;
  color: var(--ds-muted);
  font-weight: 400;
}
.monitor-chip.is-active .monitor-chip-bot { color: var(--brand-300); }
.monitor-picker-hint {
  margin-top: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.monitor-clear {
  background: transparent;
  border: 0;
  color: var(--brand-300);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.monitor-grid {
  display: grid;
  /* auto-fit: 1 col em mobile, 2 em telas medias, 3-4 em telas largas.
     Assim, quantos funis o operador quiser monitorar, o grid distribui. */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}
@media (max-width: 720px) {
  .monitor-grid { grid-template-columns: 1fr; }
}
.monitor-card {
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-1);
  border-radius: 14px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.monitor-card--loading,
.monitor-card--empty {
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
.monitor-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.monitor-card-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.monitor-card-title strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.monitor-card-title .muted { font-size: 12px; }
.monitor-card-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.monitor-card-status.is-live {
  background: rgba(34, 199, 138, 0.14);
  color: #22c78a;
}
.monitor-card-status.is-off {
  background: rgba(255, 81, 105, 0.12);
  color: #ff8592;
}
.monitor-card-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.monitor-kpi {
  background: var(--ds-glass-2);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.monitor-kpi span {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--ds-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.monitor-kpi strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-text-1);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-card-feed {
  border-top: 1px solid var(--ds-line-1);
  padding-top: 10px;
}
.monitor-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.monitor-feed-head h4 {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-muted);
}
.monitor-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.monitor-act {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ds-text-1);
  padding: 4px 2px;
  border-bottom: 1px dashed var(--ds-line-1);
}
.monitor-act:last-child { border-bottom: 0; }
.monitor-act-icon { font-size: 12px; }
.monitor-act-msg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-act-time {
  font-size: 11px;
  color: var(--ds-muted);
  flex-shrink: 0;
}

/* Filtros de evento por card do monitor (Tudo / Novos / Pix / Vendas) */
.monitor-filter-row {
  display: flex;
  gap: 4px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
.monitor-filter-btn {
  background: var(--ds-glass-2);
  border: 1px solid var(--ds-line-1);
  color: var(--ds-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}
.monitor-filter-btn:hover {
  color: var(--ds-text-1);
  border-color: var(--brand-500);
}
.monitor-filter-btn.is-active {
  background: rgba(76, 125, 255, 0.16);
  border-color: var(--brand-400);
  color: var(--brand-200);
}

/* ------------------------------------------------------------------ */
/* Reordenar linhas de botão arrastando (editor)                       */
/* ------------------------------------------------------------------ */
.b-grip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 32px;
  cursor: grab;
  color: var(--text-dim, #8b93a7);
  opacity: .45;
  border-radius: 6px;
  /* touch-action:none e OBRIGATORIO: sem isso o navegador interpreta o
     arraste no toque como rolagem da pagina e o pointermove nunca chega. */
  touch-action: none;
  user-select: none;
  transition: opacity .12s ease, background .12s ease;
}
.b-grip:hover { opacity: 1; background: rgba(255, 255, 255, .06); }
.b-grip svg  { fill: currentColor; pointer-events: none; }
.b-grip:active,
.btn-row.arrastando .b-grip { cursor: grabbing; }

.btn-row.arrastando {
  position: relative;
  z-index: 5;
  opacity: .95;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  border-radius: 8px;
  background: var(--bg-elev, #1b1f2a);
}
/* Enquanto arrasta: sem transicao na linha em movimento (seguiria o cursor
   com atraso) e COM transicao nas outras, pra troca de lugar ficar suave. */
.buttons-list.reordenando .btn-row:not(.arrastando) {
  transition: transform .12s ease;
}
.buttons-list.reordenando { cursor: grabbing; }
/* Some com o cursor de texto nos inputs enquanto arrasta, senao pisca. */
.buttons-list.reordenando input,
.buttons-list.reordenando select { pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Modo privacidade e olho injetado automaticamente                    */
/* ------------------------------------------------------------------ */
/* O .password-wrap agora e injetado por JS em TODO input[type=password]
   (ver aplicarOlhoNasSenhas no app.js). Estas regras garantem que o wrapper
   nao encolha o campo quando ele estava direto num flex/grid. */
.password-wrap { width: 100%; }
.field > .password-wrap,
label > .password-wrap { display: block; }

/* Botao de privacidade no topbar, a esquerda do avatar. */
.btn-privacidade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 6px;
  border: 1px solid var(--ds-line-2, rgba(255,255,255,.10));
  border-radius: 10px;
  background: transparent;
  color: var(--ds-text-2, #9aa3b8);
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.btn-privacidade:hover {
  color: var(--ds-text-1, #e8ecf5);
  background: rgba(255, 255, 255, .06);
}
.btn-privacidade svg { width: 17px; height: 17px; }
/* Rotulo ao lado do icone: e o UNICO controle da privacidade, entao precisa
   ser encontravel sem hover. Some em tela estreita, onde espaco e escasso. */
.btn-privacidade::after {
  content: "Privado";
  margin-left: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.btn-privacidade { width: auto; padding: 0 11px; }
@media (max-width: 720px) {
  .btn-privacidade::after { content: none; }
  .btn-privacidade { width: 34px; padding: 0; }
}
.btn-privacidade .ico-hide { display: none; }
.btn-privacidade.is-shown { color: var(--ds-accent, #7c5cff); }
.btn-privacidade.is-shown .ico-show { display: none; }
.btn-privacidade.is-shown .ico-hide { display: block; }

/* Valor escondido = BOLINHAS por cima, nao borrao.
 *
 * O texto real fica `color: transparent` (continua no fluxo, entao a coluna
 * nao muda de largura e nada dança na tela quando liga/desliga) e um ::before
 * absoluto desenha as bolinhas por cima.
 *
 * Por que ::before absoluto e nao trocar o texto: o valor original precisa
 * continuar no DOM pra revelar com um clique sem o JS ter que guardar copia.
 * `text-align: inherit` faz as bolinhas respeitarem o alinhamento do contexto
 * — numero em tabela costuma ser alinhado a direita, KPI a esquerda.
 *
 * `user-select: none` junto: esconder visualmente e deixar copiavel nao
 * esconderia nada. */
.valores-ocultos .valor-privado {
  position: relative;
  color: transparent !important;
  user-select: none;
  cursor: pointer;
}
.valores-ocultos .valor-privado::before {
  content: "•••••";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  text-align: inherit;
  color: var(--ds-text-2, #9aa3b8);
  letter-spacing: .14em;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* SEM olho em cada valor.
 *
 * Tentei um ::after com o icone do lado de cada numero e ficou poluido: o
 * dashboard tem dezenas de valores, e dezenas de olhinhos viram sujeira
 * visual. O controle e UM so, o botao no canto do topbar.
 *
 * Clicar/tocar num valor continua revelando so ele — util pra conferir um
 * numero, e o unico caminho no celular, onde nao existe hover. E affordance
 * escondida de proposito: quem precisa descobre, quem nao precisa nao ve
 * ruido. */
.valores-ocultos .valor-privado.revelado {
  color: inherit !important;
}
.valores-ocultos .valor-privado.revelado::before {
  content: none;
}


@keyframes tabbar-pop {
  0%   { transform: scale(.86); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .valores-ocultos .valor-privado::before { transition: none; }
  .tabbar-item svg { transition: none; animation: none !important; }
}


/* ===========================================================================
   MOBILE: barra de navegacao fixa no rodape (estilo Instagram)
   ---------------------------------------------------------------------------
   Os 5 primeiros itens da sidebar (Dashboard, Funis, Clientes, Vendas,
   Financeiro) viram abas fixas embaixo. Os 3 restantes (Configuracoes,
   Perfil, Administracao) vivem no menu do avatar, no topo direito.
   Nao existe mais hamburguer nem drawer no mobile: a sidebar simplesmente
   nao e renderizada. Em desktop nada muda -- a tabbar fica display:none.
   =========================================================================== */
.mobile-tabbar { display: none; }

@media (max-width: 640px) {
  /* Sidebar e drawer somem de vez */
  .app-sidebar { display: none !important; }
  .mobile-menu-toggle { display: none !important; }
  body[data-sidebar="mobile-open"]::after { content: none !important; }

  /* Pilula flutuante, descolada das bordas e com largura so do conteudo.
     Ela NAO estica de canto a canto: fica centralizada, com respiro igual
     nas laterais e em cima/embaixo dos icones. O polegar alcanca sem
     esticar ate o canto da tela, e a barra nao briga com a barra de
     gestos do iPhone (o `bottom` ja soma o safe-area-inset). */
  .mobile-tabbar {
    display: flex;
    justify-content: space-between;
    gap: 0;
    position: fixed;
    left: 14px;
    right: 14px;
    transform: translate3d(0, 0, 0);
    width: auto;
    max-width: none;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 60;
    padding: 8px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(11, 17, 38, 0.82);
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.7),
                0 2px 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }

  .tabbar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 44px;
    border-radius: 18px;
    text-decoration: none;
    color: var(--ds-text-3, #a8b2c7);
    -webkit-tap-highlight-color: transparent;
    transition: color .16s ease, background .16s ease;
  }

  /* O rotulo sai da tela mas continua no HTML — leitor de tela e busca do
     navegador continuam achando "Financeiro", "Clientes" etc. */
  .tabbar-item > span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .tabbar-item svg {
    width: 23px; height: 23px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* curva com overshoot: afunda no toque e volta com uma molinha */
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
  }

  .tabbar-item.is-active {
    color: var(--ds-text-1, #e6edf7);
    background: rgba(255, 255, 255, 0.09);
  }
  .tabbar-item.is-active svg {
    stroke-width: 2.3;
    animation: tabbar-pop .34s cubic-bezier(.34, 1.56, .64, 1);
  }

  /* Feedback do toque: o icone afunda enquanto o dedo esta em cima e
     volta com molinha ao soltar (a transicao acima cuida da volta). */
  .tabbar-item:active { background: rgba(255, 255, 255, 0.06); }
  .tabbar-item:active svg { transform: scale(.78); }

  /* Espaco pro conteudo nao ficar embaixo da barra (altura + folga de baixo) */
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }

  /* O que fica ancorado no rodape sobe pra nao colidir com a pilula */
  .toast,
  .toast-container { bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
  .node-fab { bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
}

/* ===========================================================================
   Trilha de idioma do editor de fluxo (PT / EN / ES)
   ===========================================================================
   Uma esteira de etapas por idioma. O menu troca o funil INTEIRO de idioma e
   a cor acompanha, porque modo sem sinal visual e a receita pra digitar no
   idioma errado: a pessoa esquece onde esta.

   Azul = portugues (base), vermelho = ingles, verde = espanhol.
   A cor entra leve no fundo e cheia na borda/faixa — fundo chapado deixaria
   o texto cinza das categorias ilegivel.
   =========================================================================== */
:root {
  --trilha-pt: #5b8bff;
  --trilha-en: #ff5169;
  --trilha-es: #22c78a;
}

.lang-rail {
  display: flex;
  gap: 5px;
  padding: 4px;
  background: var(--ds-glass-1);
  border: 1px solid var(--ds-line-1);
  border-radius: 11px;
}
.lang-rail-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-text-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.lang-rail-btn .lr-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .45;
  flex-shrink: 0;
}
.lang-rail-btn:hover { color: var(--ds-text-1); background: var(--ds-glass-2); }
.lang-rail-btn.is-active {
  color: var(--lr-cor);
  background: color-mix(in srgb, var(--lr-cor) 15%, transparent);
  border-color: color-mix(in srgb, var(--lr-cor) 45%, transparent);
}
.lang-rail-btn.is-active .lr-dot { opacity: 1; }
/* Contador "3/8": quanto falta traduzir sem descer o funil. O PT nao tem
   contador — ele e a base, esta completo por definicao. */
.lang-rail-btn .lr-cnt {
  font-size: 10.5px;
  font-weight: 700;
  opacity: .7;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Bloco da esteira: recebe a cor do idioma ativo via --trilha */
#nodes.trilha { border-left: 3px solid var(--trilha); border-radius: 4px 14px 14px 4px; }
#nodes.trilha-pt { --trilha: var(--trilha-pt); }
#nodes.trilha-en { --trilha: var(--trilha-en); }
#nodes.trilha-es { --trilha: var(--trilha-es); }
/* Portugues e o estado normal do editor: sem tinta, sem faixa. Only EN/ES
   ganham fundo, pra "estou fora do padrao" ser o que chama atencao. */
#nodes.trilha-en,
#nodes.trilha-es {
  background: color-mix(in srgb, var(--trilha) 7%, transparent);
  padding: 0 10px 10px;
}

.trilha-faixa {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 -10px 10px;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--trilha);
  background: color-mix(in srgb, var(--trilha) 13%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--trilha) 28%, transparent);
}
.trilha-faixa .tf-sub {
  font-weight: 400;
  color: var(--ds-text-3);
  min-width: 0;
}

/* Card de traducao: so o que da pra traduzir (texto + rotulos de botao).
   A estrutura — ordem, destino de botao, midia — mora no portugues. */
.tr-card {
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--ds-bg-2, #08132f);
  border: 1px solid var(--ds-line-1);
  margin-bottom: 9px;
}
.tr-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tr-card-nome { font-size: 13px; font-weight: 600; color: var(--ds-text-1); }
.tr-card-role {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ds-text-4); font-family: "JetBrains Mono", ui-monospace, monospace;
}
.tr-selo {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--trilha) 16%, transparent);
  color: var(--trilha);
  white-space: nowrap;
}
/* "= PT" e AVISO, nao idioma — fica neutro pra nao competir com a cor da
   trilha (na trilha verde um selo verde seria indistinguivel). */
.tr-selo.is-eq-pt {
  background: rgba(233, 238, 251, .07);
  color: var(--ds-text-3);
  border: 1px solid rgba(233, 238, 251, .10);
}
.tr-card textarea,
.tr-card input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--ds-line-1);
  border-radius: 9px;
  color: var(--ds-text-1);
  padding: 9px 11px;
  font: inherit;
  font-size: 13.5px;
}
.tr-card textarea { min-height: 78px; resize: vertical; }
/* Texto ainda igual ao PT aparece apagado: da pra ler como referencia mas
   fica claro que aquilo ainda nao e traducao. */
.tr-card textarea.eq-pt,
.tr-card input.eq-pt { color: var(--ds-text-3); }
.tr-btn-linha { margin-top: 8px; }
.tr-btn-ref {
  display: block;
  font-size: 10.5px;
  color: var(--ds-text-4);
  margin-bottom: 3px;
}

@media (max-width: 860px) {
  /* Na linha do header ja tem titulo + "Modo apresentacao". Com a trilha
     viram tres coisas e nao cabe — ela desce pra linha propria. */
  .flow-head { flex-wrap: wrap; row-gap: 8px; }
  .flow-head .lang-rail { order: 3; flex: 1 0 100%; justify-content: space-between; }
  .flow-head .lang-rail .lang-rail-btn { flex: 1 1 auto; justify-content: center; }
  .flow-head .spacer { display: none; }
}

/* Interruptor "No ar" da trilha, dentro da faixa colorida. Enquanto desligado,
   o lead daquele idioma continua indo pelo funil em portugues — e o que deixa
   voce montar e adaptar a trilha com o funil vendendo. */
.trilha-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--trilha) 35%, transparent);
  background: color-mix(in srgb, var(--trilha) 10%, transparent);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--trilha);
  cursor: pointer;
  white-space: nowrap;
}
.trilha-switch input { width: auto; margin: 0; accent-color: var(--trilha); }

.trilha-vazia { text-align: left; }
.trilha-vazia .btn-primary { margin: 0; }