/* Atende — Atlas Blue (advogado tech, moderno sem moderno demais)
   Inter (body) + JetBrains Mono (números/IDs). Light-first, dark suportado.
   Refactor: 2026-05-25 — substitui paleta roxo+verde por azul sóbrio. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ATENÇÃO: [hidden] TEM QUE ESCONDER — sempre (25/jul).
   O atributo `hidden` do HTML só aplica `display:none` pela folha do NAVEGADOR,
   e qualquer regra nossa com `display` ganha dela. Foi assim que a barra de
   gravação (.rec-bar { display:flex }) ficou visível junto com o campo de
   texto: o `hidden` estava lá no EJS e não valia nada.
   Esta regra fecha a classe inteira do bug — quem escrever `display` numa
   classe de elemento escondível não precisa lembrar de repetir a guarda. */
[hidden] { display: none !important; }

/* Navegação instantânea (MPA, sem SPA): cross-fade entre telas tira o flash
   branco do full page load. Só Chromium; degrada pra navegação normal. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

:root {
  /* ============================================
     COR — Atlas Blue (light default)
     ============================================ */
  --bg: #F7F8FA;            /* slate-50 quase branco */
  --paper: #FFFFFF;          /* cards, sidebar */
  --paper-2: #F1F3F7;        /* insets, hover row */
  --line: #E4E7EC;
  --line-strong: #767E8A;    /* 3.06:1 — é a BORDA de input/botão, e WCAG 1.4.11
                                exige 3:1 pra limite de componente. Era #CDD2DA
                                (1.52:1): a borda do campo não existia. */
  --muted: #5C6470;          /* medido 5.98:1 sobre #FFFFFF — AA (não AAA, o
                                comentário antigo dizia 7.1 e estava errado) */
  --muted-soft: #6B7383;     /* placeholders/hints — 5.02:1 no branco e 4.54:1
                                sobre --paper-2. Era #8A93A4 (2.78:1 no hover),
                                o placeholder sumia quando a linha acendia. */

  /* Azul — accent único */
  --ink: #0F1419;            /* quase preto, levemente quente */
  --ink-soft: #2A2F38;
  --accent: var(--brand-blue); /* Azul iMessage find-apple #007AFF */
  --accent-soft: #007AFF1A;    /* hover/selecionado bg */
  --accent-bg: #007AFF1A;      /* alias compat */
  --accent-deep: #0055B3;      /* hover de CTA */
  /* Par ESCURO do acento, pra quando o azul carrega TEXTO branco em cima.
     #007AFF com branco ~3.7:1 — reprova AA. Este dá ~4.6:1. */
  --accent-on: #0060C8;
  /* Mesma história do verde da marca: #00A884 com branco = 3.03:1. Texto verde
     ou botão verde com rótulo branco usa este (5.38:1). */
  --signature-ink: #00795F;
  /* Balão/badge — default = Azul iMessage do find-apple (#007AFF). */
  --bubble-out: #007AFF;
  --bubble-out-fg: #fff;
  --bubble-out-meta: rgba(255, 255, 255, .72);
  --unread-badge: #007AFF;
  --chat-sand: #F2EEE5;      /* fundo do thread no protótipo */

  /* Compat com código legado que ainda usa --green / --green-dark.
     Mapeamos pra semântica certa, sem manter paleta WhatsApp. */
  --green: #22C55E;          /* success principal — ancorado na cor já usada */
  --green-dark: #047857;
  --green-deep: #064E3B;
  --green-soft: #D1FAE5;

  --success: #22C55E;        /* = verde que já estava hardcoded (zero shift nele) */
  --success-soft: #D1FAE5;

  --danger: #DC2626;         /* vermelho ancorado na cor já usada */
  --danger-soft: #FEE2E2;
  --danger-deep: #991B1B;
  --urgent: var(--danger);   /* dedup do token órfão */

  --warn: #B8862E;                 /* âmbar sóbrio — warn não pode ser verde */
  --warn-soft: rgba(184, 134, 46, 0.14);
  --ok: var(--success);

  /* Cores da MARCA — fonte única (antes hardcoded ~106×). */
  --signature: #00A884;       /* verde WhatsApp — nova assinatura (terracota aposentado, Eduardo 24/jul) */
  --signature-soft: rgba(0, 168, 132, 0.12);
  --brand-blue: #007AFF;      /* Azul iMessage — find-apple (era Pernambuco #2BA0D8) */

  --surface: var(--paper);   /* fim do token fantasma */
  --surface-subtle: var(--paper-2);
  --border: var(--line);     /* fim do token fantasma */

  /* ============================================
     RADIUS — Atlas Blue: 8px universal (nem sharp, nem inflado)
     ============================================ */
  --radius-sm: 6px;       /* inputs, chips, tags */
  --radius-md: 8px;       /* cards, botões, modais — DEFAULT */
  --radius-lg: 10px;      /* cards grandes, panels */
  --radius-full: 999px;   /* pills, avatars */

  /* ============================================
     SPACE — escala 4pt
     ============================================ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ============================================
     TIPOGRAFIA — Atlas Blue
     ============================================ */
  --text-xs: 11px;        /* badges, categoria sidebar */
  --text-sm: 13px;        /* secondary, captions */
  --text-base: 14px;      /* body padrão */
  --text-md: 14.5px;      /* body conforto leitura */
  --text-lg: 16px;        /* sidebar labels, lead */
  --text-xl: 18px;        /* H2 */
  --text-2xl: 26px;       /* H1 / page titles */
  --text-display: 36px;   /* KPI cards */
  --text-hero: 48px;      /* hero numbers, login brand */

  /* Font families — Inter + Mono. Sem display serif. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ============================================
     SHADOW — sombras editorial consistentes
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(15, 30, 58, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 30, 58, 0.08);
  --shadow-lg: 0 24px 80px rgba(15, 30, 58, 0.25);

  /* ============================================
     OVERLAY — backdrop único para modais
     ============================================ */
  --backdrop: rgba(15, 30, 58, 0.55);

  /* ============================================
     MOTION — durações de transição
     ============================================ */
  --motion-fast: 0.12s;
  --motion-base: 0.18s;
  --motion-slow: 0.3s;
}

/* ============================================
   TEMA DARK — Atlas Blue v2 (inspirado Z-API)
   Seletor mantém .theme-fracta por compatibilidade com toggle existente.
   ============================================ */
body.theme-fracta {
  /* DARK WHATSAPP (Eduardo 24/jul: "achei meio feio o dark") — superfícies do
     WhatsApp Web escuro. O navy antigo morreu; verde #00A884 brilha em cima. */
  --bg: #0B141A;             /* fundo base (WA chat dark) */
  --paper: #111B21;          /* cards / painéis */
  --paper-2: #202C33;        /* insets, hover row, superfícies elevadas */
  --line: #222D34;
  --line-strong: #59656D;    /* 3.02:1 — borda de componente visível no escuro */
  --muted: #8696A0;          /* text secundário (WA) */
  --muted-soft: #7C8B95;     /* 4.52:1 sobre --paper-2 (era #667781, 3.08:1) */

  --ink: #E9EDEF;            /* text forte (WA) */
  --ink-soft: #D1D7DB;
  /* aliases que as telas usam com fallback CLARO — sem eles o dark "não pega"
     (card #fff no meio do escuro). Agora TODA tela herda o tema. */
  --card: #111B21;
  --bg-soft: #0F1920;
  --line-soft: #1F2A31;
  --brand-blue: #53BDEB;     /* azul de link do WA dark */
  --accent: #3B82F6;         /* blue-500 — accent principal */
  --accent-soft: rgba(59, 130, 246, 0.16);
  --accent-bg: rgba(59, 130, 246, 0.16);
  --accent-deep: #2563EB;
  --accent-on: #1D4ED8;      /* 6.3:1 com branco */
  --signature-ink: #00A884;  /* no escuro o verde já lê: 5.77:1 */

  --green: #10B981;          /* emerald — sucesso e CTAs positivos tipo Z-API */
  --green-dark: #059669;
  --green-deep: #047857;
  --green-soft: rgba(16, 185, 129, 0.16);
  --success: var(--green);
  --success-soft: var(--green-soft);

  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.16);
  --danger-deep: #DC2626;
  --urgent: var(--danger);
  --warn: #B8862E;                 /* âmbar sóbrio — warn não pode ser verde */
  --warn-soft: rgba(184, 134, 46, 0.14);
  --ok: var(--success);

  /* Marca — mesma cor; ajustar aqui se quiser realçar no escuro. */
  --signature: #00A884;       /* verde WhatsApp — nova assinatura (terracota aposentado, Eduardo 24/jul) */
  --signature-soft: rgba(0, 168, 132, 0.16);
  --brand-blue: #2BA0D8;

  /* Chips temáticos (estilo Z-API: Stripe purple, etc) */
  --chip-info-bg: rgba(167, 139, 250, 0.16);
  --chip-info-fg: #A78BFA;

  --surface: var(--paper);
  --surface-subtle: var(--paper-2);
  --border: var(--line);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.6);
  --backdrop: rgba(0, 0, 0, 0.72);

  background: var(--bg);
  color: var(--ink);
}
/* Topbar e sidebar */
body.theme-fracta .topbar { background: var(--paper); border-bottom: 1px solid var(--line); }
body.theme-fracta .topbar .brand { color: var(--ink); }
body.theme-fracta .topbar .brand-sub { color: var(--muted); }
body.theme-fracta .app-sidebar { background: var(--paper); border-right-color: var(--line); }
body.theme-fracta .sb-section-label { color: var(--muted); }
body.theme-fracta .sb-link { color: var(--ink); }
body.theme-fracta .sb-link:hover { background: var(--paper-2); color: var(--ink); }
body.theme-fracta .sb-link.active { background: var(--accent); color: #FFFFFF; }
body.theme-fracta .sb-link.active:hover { background: var(--accent-deep); color: #FFFFFF; }
body.theme-fracta .sb-footer { border-top-color: var(--line); }

/* Page header (h1 real) */
body.theme-fracta .page-header { border-bottom-color: var(--line); }
body.theme-fracta .page-title { color: var(--ink); }
body.theme-fracta .page-subtitle { color: var(--muted); }

/* Forms */
body.theme-fracta input,
body.theme-fracta select,
body.theme-fracta textarea {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
body.theme-fracta input::placeholder,
body.theme-fracta textarea::placeholder { color: var(--muted-soft); }
body.theme-fracta input:focus,
body.theme-fracta select:focus,
body.theme-fracta textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* Links */
body.theme-fracta a { color: var(--accent); }
body.theme-fracta a:hover { color: var(--accent-deep); }
body.theme-fracta a.active { color: var(--accent); }

/* Tables */
body.theme-fracta table { color: var(--ink); }
body.theme-fracta table th {
  background: var(--paper-2);
  color: var(--muted);
  border-bottom-color: var(--line);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: 600;
}
body.theme-fracta table tr { background: var(--paper); border-color: var(--line); }
body.theme-fracta table td { border-color: var(--line); color: var(--ink); }
body.theme-fracta table tr:hover { background: var(--paper-2); }
body.theme-fracta .users-table,
body.theme-fracta .rep-table,
body.theme-fracta .metric-card,
body.theme-fracta .summary-card,
body.theme-fracta .dash-card,
body.theme-fracta .ag-card,
body.theme-fracta .ret-card,
body.theme-fracta .ia-kpi,
body.theme-fracta .pt-card { background: var(--paper); border-color: var(--line); color: var(--ink); }

/* Filter pills + chips */
body.theme-fracta .filter-pill { background: transparent; color: var(--muted); border: 1px solid var(--line); }
body.theme-fracta .filter-pill:hover { background: var(--paper-2); color: var(--ink); border-color: var(--line-strong); }
body.theme-fracta .filter-pill[aria-pressed="true"],
body.theme-fracta .filter-pill.active { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }

/* Botões */
body.theme-fracta .btn {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
body.theme-fracta .btn:hover { background: var(--line); border-color: var(--line-strong); }
body.theme-fracta .btn.primary {
  background: var(--accent-on);
  color: #FFFFFF;
  border-color: var(--accent-on);
}
body.theme-fracta .btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
body.theme-fracta .btn.success {
  background: var(--success);
  color: #FFFFFF;
  border-color: var(--success);
}
body.theme-fracta .btn.btn-danger,
body.theme-fracta .btn.danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
body.theme-fracta .btn.btn-danger:hover,
body.theme-fracta .btn.danger:hover {
  background: var(--danger);
  color: #FFFFFF;
}

/* Modais e dropdowns */
body.theme-fracta .modal-bg,
body.theme-fracta .modal-overlay { background: var(--backdrop); }
body.theme-fracta .modal,
body.theme-fracta .modal-card,
body.theme-fracta .modal-content {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}
body.theme-fracta details > .advanced-filters-panel,
body.theme-fracta .dropdown-menu,
body.theme-fracta .conv-drawer { background: var(--paper); border-color: var(--line); color: var(--ink); }

/* Status badges */
body.theme-fracta .badge,
body.theme-fracta .status-badge,
body.theme-fracta .conv-status {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line);
}
body.theme-fracta .badge.success,
body.theme-fracta .status-badge.success,
body.theme-fracta .status-badge.won { background: var(--success-soft); color: var(--success); border-color: transparent; }
body.theme-fracta .badge.danger,
body.theme-fracta .status-badge.danger,
body.theme-fracta .status-badge.lost,
body.theme-fracta .status-badge.discarded { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
body.theme-fracta .badge.warn,
body.theme-fracta .status-badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
body.theme-fracta .badge.info,
body.theme-fracta .status-badge.info { background: var(--chip-info-bg); color: var(--chip-info-fg); border-color: transparent; }

/* Tabs */
body.theme-fracta .tab { color: var(--muted); border-color: transparent; }
body.theme-fracta .tab:hover { color: var(--ink); }
body.theme-fracta .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
body.theme-fracta .tab-count {
  background: var(--paper-2);
  color: var(--muted);
}
body.theme-fracta .tab.active .tab-count {
  background: var(--accent);
  color: #FFFFFF;
}

/* Inbox + conversation */
body.theme-fracta .inbox-header-compact,
body.theme-fracta .search-bar-compact,
body.theme-fracta .bulk-bar { background: var(--paper); border-color: var(--line); color: var(--ink); }
body.theme-fracta .conv-actionbar { background: var(--paper); border-bottom-color: var(--line); }
body.theme-fracta .composer,
body.theme-fracta .composer-v2 { background: var(--paper); border-color: var(--line); color: var(--ink); }
body.theme-fracta .composer-toolbar { border-bottom-color: var(--line); }
body.theme-fracta .composer-v2 textarea,
body.theme-fracta .composer textarea,
body.theme-fracta .composer-toolbar select,
body.theme-fracta .composer-shortcuts,
body.theme-fracta .attachments-preview { background: var(--surface-subtle); color: var(--ink); border-color: var(--line); }
body.theme-fracta .composer-v2 textarea::placeholder,
body.theme-fracta .composer textarea::placeholder { color: var(--muted-soft); }
/* Painel de contato (meta) + thread: surfaces da conversa no dark */
body.theme-fracta .meta { background: var(--paper); border-color: var(--line); color: var(--ink); }
body.theme-fracta .meta dd { color: var(--ink); }
body.theme-fracta .embed-body .meta,
body.theme-fracta.embed-body .meta { background: var(--bg); border-color: var(--line); }
body.theme-fracta .thread { background: var(--paper); border-color: var(--line); }
body.theme-fracta .sidepanel { background: var(--paper); border-color: var(--line); color: var(--ink); }
body.theme-fracta .sidepanel h4 { color: var(--muted); }
body.theme-fracta .sp-task,
body.theme-fracta .sp-note,
body.theme-fracta .sp-form input,
body.theme-fracta .sp-form textarea { background: var(--surface-subtle); color: var(--ink); border-color: var(--line); }
body.theme-fracta .sp-form input::placeholder,
body.theme-fracta .sp-form textarea::placeholder { color: var(--muted-soft); }

/* Empty states */
body.theme-fracta .empty-state,
body.theme-fracta .empty { color: var(--muted); }
body.theme-fracta .empty-state .hint { color: var(--muted-soft); }

/* Scrollbar dark */
body.theme-fracta ::-webkit-scrollbar-thumb { background: var(--line-strong); }
body.theme-fracta ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: var(--space-sm);
  transition: all var(--motion-fast);
  /* SVG centrado e botão preso ao eixo da nav (emoji antigo flutuava) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.theme-toggle-btn svg { display: block; }
.theme-toggle-btn:hover { background: var(--accent-bg); border-color: var(--accent); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  position: relative;
}

/* Scrollbar customizada — detalhe que diferencia */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-md); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Seleção de texto com brand color */
::selection { background: var(--lime, var(--green-soft)); color: var(--ink); }

a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent); }

/* Focus visible — A11Y crítico, mantém visual quando teclado, esconde no clique */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Respeita usuário que não quer animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
}
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 6px;
  margin-right: 9px;
  flex-shrink: 0;
}

.brand-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 400;
}

/* Logout sempre no fim do nav, separado visualmente */
.topbar-logout { color: var(--muted); margin-left: 24px; }
.topbar-logout:hover { color: var(--danger); }
/* Divisor entre grupo principal e grupo de "configurações" no topbar */
.topbar-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--line-strong);
  margin: 0 8px 0 16px;
  vertical-align: middle;
}

.back {
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
}

nav a, nav span, nav button {
  margin-left: 18px;
  font-size: 14px;
  color: var(--ink-soft);
}

nav a.active { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 4px; font-weight: 600; }
nav a:hover { color: var(--accent); }

.container {
  max-width: 1180px;
  margin: 32px auto;
  padding: 0 32px;
}

/* ============================================
   PERIOD PILLS — Hoje | Ontem | 7d | 30d (estilo Z-API)
   ============================================ */
.period-pills {
  display: inline-flex;
  gap: 4px;
  background: var(--paper-2);
  padding: 4px;
  border-radius: 8px;
}
.period-pill {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
}
.period-pill:hover {
  color: var(--ink);
}
.period-pill.active {
  background: var(--paper);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
body.theme-fracta .period-pills { background: var(--paper-2); }
body.theme-fracta .period-pill.active { background: var(--accent); color: #FFFFFF; box-shadow: none; }

/* Timestamp "Atualizado às HH:MM" no canto da toolbar */
.refreshed-at {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
body.theme-fracta .refreshed-at { color: var(--muted); }

/* ============================================
   DASHBOARD HERO CARDS — 2 KPIs principais sólidos
   Estilo Z-API: tile colorido grande com número branco
   ============================================ */
.dash-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .dash-hero { grid-template-columns: 1fr; }
}
.hero-card {
  position: relative;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  color: #FFFFFF;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.hero-card-accent { background: var(--accent); }              /* azul Atlas var(--accent) */
.hero-card-deep   { background: var(--accent-deep); }         /* azul mais escuro #1D4ED8 */
.hero-card-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.hero-card-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 8px;
}
.hero-card-value {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-card-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 8px;
}

/* ============================================
   DASHBOARD CARDS SECUNDÁRIOS — icon-bg tinted (Z-API style)
   ============================================ */
.dash-grid-tinted .dash-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 18px 20px;
  border-radius: var(--radius-md);
}
.dash-card-icon-tint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.tint-success { background: var(--success-soft); color: var(--success); }
.tint-warn    { background: var(--warn-soft);    color: var(--warn); }
.tint-info    { background: var(--accent-soft);  color: var(--accent); }
.tint-danger  { background: var(--danger-soft);  color: var(--danger); }

/* ============================================
   IA SUBNAV — sub-abas entre Dashboard/Prompt/Coach (fase 5/B)
   ============================================ */
.ia-subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.ia-subnav-tab {
  padding: 10px 18px;
  text-decoration: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.ia-subnav-tab:hover { color: var(--ink); }
.ia-subnav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
body.theme-fracta .ia-subnav { border-bottom-color: var(--line); }
body.theme-fracta .ia-subnav-tab { color: var(--muted); }
body.theme-fracta .ia-subnav-tab:hover { color: var(--ink); }
body.theme-fracta .ia-subnav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================
   PAGE HEADER — h1 real, consistente entre views
   ============================================ */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.page-header-text { min-width: 0; flex: 1; }
.page-title {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.page-subtitle {
  font-size: var(--text-base);
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.45;
}
.page-header-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Login */
.login-page {
  background: var(--bg);
  min-height: 100vh;
  margin: 0;
  /* ZERA o padding do body base (padding-left = sidebar-w, padding-top = topbar-h).
     O login/env-gate não tem sidebar nem topbar — sem isto, o offset da sidebar
     empurrava o card pra DIREITA (Eduardo 22/jul: "pra ti, tá centralizado?"). */
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-wrap {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  position: relative;
  z-index: 1;
}

/* Marca d'água discreta do símbolo Deferi, atrás do card (estilo editorial/MUJI).
   Resolvido um conflito de merge que tinha ficado CRU aqui (<<<<<<</=======/>>>>>>>)
   — CSS inválido que quebrava o parser e desalinhava o login/env-gate. */
.login-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(420px, 84vw, 640px);
  aspect-ratio: 1 / 1;
  background-color: var(--accent);
  -webkit-mask: url('/brand-assets/deferi/mark-mono.svg') center / contain no-repeat;
  mask: url('/brand-assets/deferi/mark-mono.svg') center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.login-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 40px 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.login-brand {
  font-family: var(--font-body);
  font-size: 36px;
  margin: 0 0 4px;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.login-sub {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 28px;
}

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); }
.login-form input {
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.login-form input:focus { outline: none; border-color: var(--accent); }
.login-form .btn { width: 100%; padding: 12px; font-size: 14px; margin-top: 6px; }

.login-hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 16px 0 0;
}

.login-error {
  background: #ead2d2;
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
  font-size: 13px;
}

/* Phone switcher (topo da inbox) */
.phone-switcher {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.phone-switcher-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 500;
}

.phone-switcher-select {
  flex: 0 1 380px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
}

.phone-switcher-select:focus {
  outline: none;
  border-color: var(--accent);
}

.phone-switcher-meta {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}

.meta-ai-on { color: var(--ok); font-weight: 600; }
.meta-ai-off { color: var(--ink-soft); font-weight: 600; }

/* Phones grid */
.phones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.phone-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phone-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.phone-card-head h3 {
  font-family: var(--font-body);
  font-size: 18px;
  margin: 0;
}
.phone-card-meta {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 13px;
}
.phone-card-meta dt { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
.phone-card-meta dd { margin: 0; color: var(--ink); }
.phone-card-meta code { background: var(--bg); padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.phone-desc { font-size: 13px; color: var(--ink-soft); margin: 0; }
.phone-card-actions { display: flex; gap: 8px; }
.checkbox-row { flex-direction: row !important; align-items: center; gap: 8px !important; cursor: pointer; }

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: var(--backdrop);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  /* Form alto (ex.: Fones, ~15 campos) ficava MAIOR que a tela e o flex
     centralizado empurrava o topo pra fora da janela — sem como rolar até ele.
     Os campos de credencial sumiam. Rolagem no container + padding resolve. */
  overflow-y: auto;
  padding: 24px 0;
}
.modal-card {
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 28px;
  min-width: 480px;
  max-width: 620px;
  width: 90%;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  /* trava a altura e rola por dentro; margin:auto centraliza sem cortar o topo */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  margin: auto;
}
.modal-card h2 {
  font-family: var(--font-body);
  margin: 0 0 18px;
  color: var(--ink);
}
.modal-card form {
  display: flex; flex-direction: column; gap: 12px;
}
.modal-card label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--ink-soft);
}
.modal-card input, .modal-card select, .modal-card textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Metrics */
.metrics-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.metric-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px;
}
.metric-card h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink);
}
.metric-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metric-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.metric-list li:last-child { border-bottom: none; }
.metric-list li.empty { color: var(--muted); font-style: italic; border: none; }
.metric-list code { background: var(--bg); padding: 1px 6px; border-radius: 3px; font-size: 12px; }

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.search-bar input {
  flex: 1;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

.search-bar input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(183, 139, 58, 0.12);
}

.search-bar input::placeholder { color: var(--muted); }

.flow-filter {
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink-soft);
  max-width: 220px;
}
.flow-filter:focus { outline: none; border-color: var(--accent); }

/* Data de–até: as duas datas numa linha só (par que não quebra no meio) */
.date-range { display: inline-flex; align-items: center; gap: 4px; }
.date-range .date-inp {
  padding: 9px 8px;
  max-width: none;
  width: 118px;
  min-width: 0;
}
.date-range .date-sep { color: var(--muted); font-size: 13px; }

.search-meta {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  min-width: 200px;
  text-align: right;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
}

.tab {
  background: transparent;
  border: none;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.tab em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
}

.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab.active em { color: var(--accent-soft); }
/* Tab ativa ainda é clicável — clicar de novo desativa (toggle), mostrando TUDO. */

.tab-count {
  background: var(--accent-bg);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.tab.active .tab-count {
  background: var(--accent);
  color: white;
}

/* ── Bucket-nav: navegação por BALDÕES (redesenho 04/jun) ────────────────────
   2 baldes GRANDES lado a lado + gaveta "mais". Substitui as 6 abas de peso
   igual que deixavam a tela "perdida". Componente NOVO (classe .bucket, não
   .tab) — assim ignora de vez as 4 definições conflitantes de .tab. */
.bucket-nav { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 16px; flex-wrap: wrap; }
.bucket-row { display: flex; gap: 4px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; }
.scope-btn { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Baldão grande */
/* Tabs compactas estilo Helena: "Novos 1 · Meus · Outros 17" — pill leve,
   count vira badge ao lado do rótulo. Sem card gordo nem número gigante. */
.bucket {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; text-align: left;
  background: transparent; border: 1px solid transparent;
  border-radius: 999px; transition: background .15s, color .15s;
}
.bucket:hover { background: var(--paper-2, var(--paper-2)); }
.bucket.active { background: var(--accent-bg, rgba(58,114,196,0.10)); box-shadow: none; }
/* label antes do count (ordem Helena), independente da ordem no HTML */
.bucket-text { display: contents; }
.bucket-label { order: 1; font-size: 14px; font-weight: 600; color: var(--ink, #1a1a1a); white-space: nowrap; }
.bucket.active .bucket-label { color: var(--accent, var(--brand-blue)); }
.bucket-sub { display: none; }   /* Helena não tem subtítulo "esperando agora/comigo" */
.bucket .bucket-count {
  order: 2;
  font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  min-width: auto; text-align: center;
  background: var(--paper-2, #eef0f2); color: var(--muted, var(--muted));
  padding: 2px 7px; border-radius: 999px;
}
.bucket.active .bucket-count { background: var(--accent, var(--brand-blue)); color: #fff; }

/* Gaveta "mais ⌄" */
.bucket-more { position: relative; flex: 0 0 auto; align-self: center; }
.bucket-more > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px;
  border-radius: 10px; font-size: 13px; color: var(--muted, #777); border: 1px solid transparent;
}
.bucket-more > summary::-webkit-details-marker { display: none; }
.bucket-more > summary:hover { color: var(--ink); background: var(--paper-2, var(--paper-2)); }
.bucket-more[open] > summary { color: var(--ink); background: var(--paper-2, var(--paper-2)); }
.bucket-more-chev { transition: transform .15s; font-size: 11px; }
.bucket-more[open] .bucket-more-chev { transform: rotate(180deg); }
.bucket-more-panel {
  /* Abre pra DIREITA (left:0) — o botão "mais" fica à esquerda, então right:0
     jogava o painel (e os rótulos) pra fora da tela à esquerda. Fix do bug
     "janelinha só com números". max-width pra nunca estourar a viewport. */
  position: absolute; left: 0; right: auto; top: calc(100% + 6px); z-index: 30;
  min-width: 230px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 12px;
  background: var(--paper, #fff); border: 1px solid var(--line, #e3e3e3);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.bucket-mini {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 8px; text-align: left; color: var(--ink, #222); font-size: 14px;
}
.bucket-mini:hover { background: var(--paper-2, var(--paper-2)); }
.bucket-mini.active { background: var(--accent-bg, rgba(58,114,196,0.10)); color: var(--accent, var(--brand-blue)); font-weight: 600; }
.bucket-count-mini {
  font-size: 13px; font-weight: 600; color: var(--muted, #8a8a8a);
  background: var(--paper-2, #f0f0f1); padding: 1px 8px; border-radius: 999px; min-width: auto;
}
.bucket-mini.active .bucket-count-mini { color: var(--accent); background: rgba(58,114,196,0.14); }

@media (max-width: 640px) {
  .bucket { padding: 7px 12px; gap: 7px; }
  .bucket .bucket-count { font-size: 12px; }
  .bucket-label { font-size: 14px; }
}

.inbox { margin-top: 0; border-top: none; border-radius: 0 0 4px 4px; }

.ellipsis {
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-num {
  font-family: var(--font-body);
  font-size: 48px;
  color: var(--accent);
  line-height: 0.95;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

/* Número decorativo nas tabs — alma editorial */
.tab.active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
}

.stat-label {
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Filters */
.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.filter {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.filter:hover { border-color: var(--accent); }
.filter.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Inbox table */
.inbox {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.inbox th {
  text-align: left;
  padding: 14px 18px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

.inbox td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.inbox tr:hover td { background: var(--bg); }
.inbox tr:last-child td { border-bottom: none; }

.loading { text-align: center; color: var(--muted); padding: 40px; }

/* ============================================================
   Inbox em CARDS (lista estilo WhatsApp) — menos chats, maiores,
   com etiquetas coloridas visíveis. Mantém a <table> por baixo
   (preserva seleção/grupo/paginador), só re-skina a linha.
   ============================================================ */
/* Card mode: thead some inteiro. Manter só o checkbox de "select all"
   (colunas escondidas) virava uma linha órfã vazia acima da lista —
   print Eduardo 26/jul. Seleção em massa segue pelos checkboxes da linha. */
.inbox-cards thead { display: none; }
.inbox-cards td { padding: 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.inbox-cards td.cell-select { padding: 18px 8px 0 14px; width: 34px; }
.inbox-cards tr:hover td { background: #f5f6f6; }   /* WhatsApp-Mac: hover cinza levíssimo */

.chat-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 14px 4px;
  min-height: 64px;
}
.chat-card .unread-slot { flex: 0 0 8px; padding-top: 6px; }
.chat-card-av { flex: 0 0 auto; }
.chat-card-av .avatar, .chat-card-av img, .chat-card-av > * {
  width: 49px; height: 49px; font-size: 18px;   /* WhatsApp-Mac: avatar 49px redondo */
}
.chat-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chat-card-name {
  flex: 1 1 auto;                 /* nome reivindica o espaço livre — o tempo só ocupa o que precisa */
  font-size: 16px; color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.chat-card-time { flex: 0 0 auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Peso, não cor (benchmark 2.1 "mude peso antes de cor"): #25d366 sobre branco
   mede 1.98:1 — a hora da conversa NÃO-LIDA era o texto menos legível da lista,
   justo o que o atendente procura de relance. O badge redondo já leva a cor. */
.chat-row.row-unread .chat-card-time { color: var(--ink); font-weight: 700; }   /* WhatsApp: hora verde quando tem não-lida */

/* ── SLA de espera: cronômetro "há X sem resposta" no card da fila ───────────
   Limiar pedido pelo Eduardo: 3min já fica visível, 10min grita. Cores do
   escritório — acento TERRACOTA (var(--signature)), NUNCA âmbar; vermelho só no crítico. */
.sla-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 2px 6px; border-radius: 999px; margin-right: 6px;
  vertical-align: middle; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sla-badge:empty { display: none; }
.sla-badge.sla-calm { color: var(--muted); background: transparent; padding: 0; font-weight: 500; }
/* #B8862E sobre o próprio warn-soft mede 2.81:1 a 11px — o cronômetro da fila
   (o instrumento de pressão do time) era ilegível. #7A5713 dá 6.1:1. */
.sla-badge.sla-warn { color: #7A5713; background: var(--warn-soft); }   /* médio (3min–2h) */
.sla-badge.sla-late { color: #fff; background: #C0392B; }                    /* crítico (≥2h) — vermelho sólido, sem pulso */
/* VÁCUO (≥30min, só no Gestão) — o degrau que faltava entre "esperando" e
   "crítico". Mesmo tom do warn, mas SÓLIDO em vez de suave: é a diferença que
   separa 5min de 50min, que antes pintavam igual. Não usa var(--signature)
   porque ela virou verde WhatsApp em 24/jul, e verde num atraso lê como "ok".
   Acima de 2h esta regra não se aplica (sla-late continua vermelho) — a cor
   segue medindo urgência, a palavra só diz de quem é a bola. */
.sla-badge.sla-vacuo.sla-warn { color: #fff; background: #7A5713; }
.sla-badge.sla-vacuo { letter-spacing: .01em; }

/* Barra de pressão no topo da fila "Em atendimento" — instrumento, não alarme.
   Clicável: liga o filtro "esperando resposta". Ponto pulsante em CSS puro. */
.sla-pressure {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0 0 10px; padding: 10px 14px;
  border: 1px solid rgba(179, 38, 30, .16); border-left: 3px solid #B3261E;
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(179, 38, 30, .045), rgba(179, 38, 30, .045)), var(--paper, #fff);
  font: inherit; font-size: 13.5px; font-weight: 500; color: #7F1D1D;
  text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sla-pressure:hover {
  background: linear-gradient(0deg, rgba(179, 38, 30, .09), rgba(179, 38, 30, .09)), var(--paper, #fff);
  border-color: rgba(179, 38, 30, .3);
}
.sla-pressure:focus-visible { outline: 2px solid #B3261E; outline-offset: 2px; }
.sla-pressure[hidden] { display: none; }
.sla-pressure .slap-text strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #B3261E; }
.slap-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #B3261E; position: relative;
}
.slap-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid rgba(179, 38, 30, .28);
}
.slap-cta {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #B3261E; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.slap-cta::after { content: "\2192"; transition: transform .15s ease; }
.sla-pressure:hover .slap-cta::after { transform: translateX(2px); }
.sla-pressure.active { border-left-color: var(--accent, var(--brand-blue)); }
.sla-pressure.active .slap-cta { color: var(--accent, var(--brand-blue)); }
@media (prefers-reduced-motion: reduce) { .slap-dot::after { animation: none; } }
.chat-card-preview {
  font-size: 14px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-card-preview.is-empty {  opacity: 0.7; }
/* Lead sem mensagem: origem+campanha+entrada. Não é fala do cliente, então
   fica discreto (não-itálico, tom de metadado), distinto de mensagem real. */
.chat-card-preview.is-lead { color: var(--muted); opacity: 0.92; }
.chat-row.row-unread .chat-card-preview.is-lead { color: var(--muted); font-weight: 400; }
.chat-row.row-unread .chat-card-name { font-weight: 700; }
.chat-row.row-unread .chat-card-preview { color: var(--ink); font-weight: 500; }
/* WhatsApp: prévia à esquerda, badge de não-respondidas no canto (sob a hora). */
.chat-card-preview-row { display: flex; align-items: center; gap: 8px; }
.chat-card-preview-row .chat-card-preview { flex: 1 1 auto; min-width: 0; }
.chat-card-preview-row .unread-count { flex: 0 0 auto; margin-left: auto; }
.chat-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.chat-card-meta:empty { display: none; }
.chat-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* "EM ATENDIMENTO" some (estilo WhatsApp) → normalmente fica só o chip da fase.
   Quando há status que informa (finalizado) + fase, ficam LADO A LADO; só quebra
   pra baixo se faltar espaço, em vez de cortar. */
.chat-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 4px; flex: 1 1 auto; min-width: 0; }
/* "Finalizado" e afins ANCORAM NA DIREITA (Eduardo 28/jul: "os finalizados não
   ficam alinhados"). Antes vinham logo após o chip do atendente — e como os
   nomes têm larguras diferentes (Maria Clara × Tammyres Adv × Maria Emylly), o
   selo caía num x diferente em cada linha e a coluna saía serrilhada. Encostado
   na direita ele forma uma coluna só, alinhada com a hora lá em cima. */
.chat-card-status { margin-left: auto; display: inline-flex; align-items: center; flex: none; }
/* Selo de estágio do funil (SDR/Closer/Contrato/Assinatura/Follow-up) */
.stage-chip { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; line-height: 1.4; padding: 2px 8px; border-radius: 6px; white-space: nowrap; letter-spacing: .01em; }
/* Badge IA × humano */
.ia-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; line-height: 1.4; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.ia-badge.on  { color: #158048; background: #e7f4ec; }
.ia-badge.on::before  { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1a9e5f; }
.ia-badge.off { color: #5f6672; background: #eef0f4; }
/* Resumo IA no preview */
.chat-card-preview.is-summary { color: var(--ink); font-weight: 400; }
.chat-card-preview .sum-ic { color: #6D28FF; font-weight: 700; margin-right: 1px; }
/* Tag de status estilo CRM moderno (Kommo/Respond/Linear): largura do conteúdo,
   sentence case, tint suave SEM borda, cantos levemente arredondados, discreta.
   A cor comunica a fase — não o tamanho. */
.chat-card-badges .status-badge {
  min-width: 0; width: auto; box-sizing: border-box;
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 500; line-height: 1.45;
  padding: 2px 8px; border-radius: 6px; border: 0 !important;
  text-transform: none !important; letter-spacing: normal; text-align: left; white-space: nowrap;
}
/* ATENÇÃO: o `border: 0 !important` acima é DE PROPÓSITO (tint sem borda) — mas ele
   também mata qualquer `border:` inline, porque !important de folha ganha de
   inline normal. Quem precisar de contorno usa box-shadow inset, como abaixo:
   desenha DENTRO da caixa, então não muda largura nem altura. */

/* ESPERANDO — o único selo que mora numa linha da PRÓPRIA COR (.row-esperando
   pinta o card de âmbar). Com o fundo antigo #FFF9DB ele media 1,01:1 contra a
   linha: a pílula era invisível e sobrava só o texto, que termina 8px antes da
   borda da caixa (o padding). Resultado na tela: "Finalizado" encostava na
   coluna da hora e "Esperando" parava antes — a coluna da direita serrilhada
   (Eduardo, 30/jul: "tá achando os css desalinhado não?").
   O contorno resolve sem peso: 3,07:1 contra a linha (a referência é o
   Finalizado, que faz 3,3:1 no branco). Continua tom ensaio — pílula âmbar
   SÓLIDA media 4,15:1 mas puxava pro marrom, vizinho do terracota aposentado. */
.chat-card-badges .status-esperando {
  background: #FDF3C4;
  color: #6E5600;                              /* 6,28:1 sobre o fundo do selo */
  box-shadow: inset 0 0 0 1px #B08800;
  font-weight: 700;
}
/* NOVO LEAD — mora em linha branca, então o tint sozinho já se separa (5,2:1). */
.chat-card-badges .status-novo-lead { background: #EFF6FF; color: #2563EB; }

/* TEMA ESCURO: NADA de regra `body.theme-fracta` para estes dois — seria CSS morto.
   `fracta-design.css:938` faz `body.theme-fracta .status-badge { background /
   color / border … !important }`: no tema escuro TODO selo vira o mesmo cinza
   de papel, e Finalizado / Esperando / Novo lead ficam indistinguíveis. Medido
   30/jul: os três com texto-sobre-selo idênticos em 4,68:1.
   Não é o bug desta leva (no escuro nada serrilha, justamente porque são todos
   iguais), e desfazer aquele !important mexe em selo de tela nenhuma —
   CRM, kanban, conversa. Fica anotado: o tema escuro perdeu a cor de estado. */
.case-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700;
  background: var(--paper-2, rgba(0,0,0,0.05)); color: var(--ink);
  border: 1px solid var(--line);
}

/* Chip de etiqueta colorido (cor via --tag-c do payload) */
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  text-transform: capitalize;
  color: var(--tag-c, #777);
  background: color-mix(in srgb, var(--tag-c, #777) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-c, #777) 35%, transparent);
  white-space: nowrap;
}
.tag-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tag-c, #777); flex: 0 0 auto; }
.tag-chip .tag-x {
  border: none; background: none; cursor: pointer; padding: 0 0 0 2px;
  color: var(--tag-c, #777); opacity: 0.6; font-size: 13px; line-height: 1;
}
.tag-chip .tag-x:hover { opacity: 1; }
/* "×" pra apagar de vez na aba Descartados — botãozinho vermelho antes da hora. */
.discard-del-x {
  border: none; background: none; cursor: pointer;
  color: var(--danger, var(--danger)); opacity: 0.7;
  font-size: 16px; line-height: 1; padding: 0 6px 0 0; margin-right: 2px;
  vertical-align: middle;
}
.discard-del-x:hover { opacity: 1; }
.chat-row.row-discarded { opacity: 0.82; }
.tag-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px dashed var(--line); background: none; color: var(--muted);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
}
.tag-add:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }

/* Declutter inbox: o × de cada tag e o + de etiqueta ficam ocultos e só
   aparecem ao passar o mouse na linha — menos ruído fixo, mais calma (MUJI).
   Layout estável: × usa opacidade; + (trailing) colapsa a largura. */
.chat-row .tag-chip .tag-x { opacity: 0; transition: opacity .12s ease; }
.chat-row:hover .tag-chip .tag-x,
.chat-row .tag-chip .tag-x:focus-visible { opacity: 0.55; }
.chat-row .tag-add {
  opacity: 0; width: 0; border-width: 0; margin-left: -6px;
  transition: opacity .12s ease;
}
.chat-row:hover .tag-add,
.chat-row .tag-add:focus-visible {
  opacity: 1; width: 20px; border-width: 1px; margin-left: 0;
}

/* Popover de criar/aplicar etiqueta na hora */
.tag-popover {
  z-index: 1000; width: 240px; padding: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.tag-pop-existing { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto; }
.tag-pop-empty { font-size: 12px; color: var(--muted); }
.tag-pop-chip {
  cursor: pointer; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--tag-c, #777);
  background: color-mix(in srgb, var(--tag-c, #777) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-c, #777) 35%, transparent);
}
.tag-pop-chip:hover { background: color-mix(in srgb, var(--tag-c, #777) 26%, transparent); }
.tag-popover hr { border: none; border-top: 1px solid var(--line); margin: 9px 0; }
.tag-pop-new { display: flex; flex-direction: column; gap: 8px; }
.tag-pop-input { width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--bg); color: var(--ink); }
.tag-pop-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-pop-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.tag-pop-swatch.is-sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--paper) inset; }
.tag-pop-create { width: 100%; padding: 7px; font-size: 13px; cursor: pointer; }

/* Badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.badge-sector-atendimento     { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-soft); }
.badge-sector-comercial_trafego { background: var(--green-soft); color: var(--green-dark); border: 1px solid var(--green); }
.badge-sector-juridico        { background: var(--warn-soft); color: #7C2D12; border: 1px solid var(--warn); }
.muted-cell { color: var(--muted); font-size: 12px; }

.badge-in_progress  { background: var(--accent-bg); color: var(--accent); }
.badge-qualified    { background: var(--green-soft); color: var(--green-dark); }
.badge-active_client { background: #DBEAFE; color: var(--accent-deep); }
.badge-partner      { background: #FCE7F3; color: #9F1239; }
.badge-won          { background: var(--green); color: white; }
.badge-lost         { background: #FEE2E2; color: var(--danger); }
.badge-discarded    { background: var(--paper-2); color: var(--muted); }

/* Conversation view — agora com sidepanel direito (tasks + notas) */
.conversation-view {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(240px, 280px);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "meta thread sidepanel" "meta thread sidepanel" "meta composer sidepanel";
  gap: 14px;
  height: calc(100vh - 130px);
}
/* Garante que os itens do grid possam encolher dentro da própria coluna —
   sem isto o conteúdo (ex: botão Enviar do composer) estoura pra fora e fica
   cortado na borda direita em telas estreitas. */
.conversation-view > .meta,
.conversation-view > .thread,
.conversation-view > .composer,
.conversation-view > .composer-v2,
.conversation-view > .sidepanel { min-width: 0; max-width: 100%; }

.sidepanel {
  grid-area: sidepanel;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidepanel .sp-section + .sp-section {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
/* Regra base do h4 do sidepanel: o conversa-liso.css sobrescreve TUDO que
   havia aqui (uppercase/itálico/tracking) — o bloco antigo era só armadilha
   pra próxima sessão achar que valia. Fica o mínimo comum. */
.sp-section h4 {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  display: inline;
}
/* Accordion via <details>/<summary> nativo */
details.sp-section { padding: 0; }
details.sp-section > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
details.sp-section > summary::-webkit-details-marker { display: none; }
details.sp-section > summary::before {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  margin-left: 2px;
  transition: transform 180ms ease;
}
details[open].sp-section > summary::before {
  transform: rotate(45deg);
}
details.sp-section[open] > summary { margin-bottom: 10px; }
details.sp-section > summary:hover h4 { color: var(--ink); }
.sp-tasks, .sp-notes {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.sp-task, .sp-note {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  position: relative;
}
.sp-task.done { opacity: 0.55; }
.sp-task.done .sp-task-body { text-decoration: line-through; }
.sp-task-body { cursor: pointer; }
.sp-task-due { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sp-task-due.overdue { color: var(--danger); font-weight: 600; }
.sp-task-del, .sp-note-del {
  position: absolute;
  top: 4px; right: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
}
.sp-task-del:hover, .sp-note-del:hover { color: var(--danger); }
.sp-note-body { white-space: pre-wrap; line-height: 1.45; }
.sp-note-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }

.sp-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-form input, .sp-form textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.sp-form input:focus, .sp-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.meta {
  grid-area: meta; background: var(--paper);
  padding: 16px 14px; border: 1px solid var(--line); border-radius: 6px;
  overflow-y: auto;
}
.meta dl { margin: 0; }
.meta dt { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.6px; margin-top: 10px; }
.meta dd { margin: 2px 0 0 0; font-size: 13px; color: var(--ink); line-height: 1.35; }

/* ---- Bloco de nome do contato (com apelido + edit) ---- */
.conv-name-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
}
.conv-name-block {
  flex: 1;
  min-width: 0;          /* permite text-overflow funcionar */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conv-name-display {
  display: flex;
  align-items: center;
  gap: 6px;
}
.conv-name-primary {
  font-size: 15px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.conv-name-secondary {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Linha rápida (número · status · finalizar) sob o nome ---- */
/* Mostra só o essencial no topo; o resto fica no <details> abaixo. */
.conv-meta-quickline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.conv-quick-phone { font-size: 12px; color: var(--muted); }
.conv-quick-status-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.conv-quick-status-btn:hover {
  border-color: var(--accent-soft, rgba(37,99,235,.3));
  color: var(--ink);
}

/* ---- Bloco colapsável "Detalhes" (resto da meta) ---- */
.conv-meta-more { margin-top: 8px; }
.conv-meta-more-toggle {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}
.conv-meta-more-toggle::-webkit-details-marker { display: none; }
.conv-meta-more-toggle::before {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.conv-meta-more[open] > .conv-meta-more-toggle::before { transform: rotate(45deg); }
.conv-meta-more-toggle:hover { color: var(--ink); }
.conv-name-edit-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity 0.12s, background 0.12s;
  line-height: 1;
}
.conv-name-edit-btn:hover {
  opacity: 1;
  background: var(--paper-2, var(--accent-soft));
}
.conv-name-edit-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Modo edição */
.conv-name-edit-wrap {
  display: flex;
  gap: 4px;
  align-items: center;
}
.conv-name-edit-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid var(--accent, var(--line));
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
}
.conv-name-edit-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.conv-name-edit-save,
.conv-name-edit-cancel {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.conv-name-edit-save:hover {
  border-color: var(--success, var(--accent));
  color: var(--success, var(--accent));
}
.conv-name-edit-cancel:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.conv-name-edit-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}

/* ---- Toggle "É cliente do escritório" — sutil, sem CTA agressivo ---- */
.conv-client-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 4px 8px;
  margin: 6px 0 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  text-align: left;
}
.conv-client-btn:hover {
  color: var(--ink);
  background: var(--accent-soft, rgba(0,0,0,0.04));
}
.conv-client-btn.is-active {
  background: transparent;
  color: var(--success, var(--green-dark));
  font-weight: 600;
}
.conv-client-btn.is-active:hover {
  background: var(--accent-soft, rgba(5, 150, 105, 0.08));
  color: var(--success, var(--green-dark));
}
.conv-client-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.conv-client-btn .conv-client-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.conv-client-btn .conv-client-label {
  flex: 1;
  min-width: 0;
}

/* ---- Chip "cliente" inline nas listas (inbox, kanban, etc) ---- */
.client-chip {
  display: inline-block;
  margin-right: 4px;
  font-size: 13px;
  vertical-align: middle;
  filter: saturate(1.2);
}

/* ---- Botão "Mesclar com outra conversa" (resolve duplicados @lid) ---- */
.conv-merge-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.conv-merge-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  border-style: solid;
}
.conv-merge-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.thread {
  grid-area: thread;
  /* find-apple: areia lisa (não pontilhado WA). */
  background: var(--chat-sand, #F2EEE5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg {
  max-width: 65%;
  padding: 8px 12px 10px;
  border-radius: 18px;           /* iMessage, não 7.5px WA */
  font-size: 15px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}

.msg > div:first-child { /* corpo da msg */
  display: block;
}

/* CLIENTE (inbound) — bolha branca, cantos iMessage */
.msg-client {
  background: #FFFFFF;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  color: #111b21;
  box-shadow: 0 1px .5px rgba(11, 20, 26, 0.08);
}
.msg-client::before {
  content: '';
  position: absolute;
  left: -6px; top: 0;
  width: 8px; height: 9px;
  background: #FFFFFF;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
/* SAÍDA (IA e humano) — balão SÓLIDO do acento + texto branco (find-apple). */
.msg-ai,
.msg-human {
  background: var(--bubble-out, #007AFF);
  color: var(--bubble-out-fg, #fff);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px .5px rgba(11, 20, 26, 0.13);
}
/* find-apple / iMessage: sem cauda WA no canto */
.msg-ai::after,
.msg-human::after { display: none; }
/* Marca quem mandou (tag pequena dentro da meta) */
.msg-client::before,
.msg-ai::after,
.msg-human::after { pointer-events: none; }

/* Highlight de msg recém-chegada — pop suave + glow sutil */
.msg.msg-new {
  animation: msgPop 0.35s cubic-bezier(0.16, 1, 0.3, 1), msgGlow 1.2s ease-out;
}
@keyframes msgPop {
  from { transform: translateY(6px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}
@keyframes msgGlow {
  0%   { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.28); }
  100% { box-shadow: 0 0 0 10px rgba(124, 58, 237, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .msg.msg-new { animation: none; }
}

.msg-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
  align-self: flex-end;
  opacity: 0.7;
}
.msg-client .msg-meta { align-self: flex-start; }
.msg-ai .msg-meta,
.msg-human .msg-meta { color: var(--bubble-out-meta, rgba(255, 255, 255, .72)); }

/* ---- Apagar mensagem (botão hover + estado tombstone) ----
   Botão "" só aparece em hover na bolha. Posicionado DENTRO da bolha
   no canto inferior-esquerdo — antes ficava fora (top:-10px left:-28px)
   e quando o mouse atravessava o gap entre bolha e ícone, nenhum dos
   dois tinha hover e o ícone sumia (UX ruim). Agora fica embutido no
   hover-area da bolha, click sempre funciona. Cliente (msg-client) nunca
   tem esse botão — política do produto. */
.msg-action-delete {
  position: absolute;
  bottom: 4px;
  left: 6px;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease, background 0.12s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  z-index: 2;
}
/* Em bolhas muito curtas (ex: "ok") a meta-text pode encostar no ícone.
   O background opaco do botão (var(--paper)) cobre o texto por trás, então
   a leitura da meta fica parcial só quando user tá realmente hovering pra
   apagar — UX aceitável. */
.msg:hover .msg-action-delete,
.msg:focus-within .msg-action-delete {
  opacity: 1;
  pointer-events: auto;
}
.msg-action-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
  transform: scale(1.08);
}
.msg-action-delete:disabled {
  opacity: 0.4 !important;
  cursor: wait;
}

/* Tombstone — mensagem apagada renderiza com estilo translúcido + itálico
   estilo "this message was deleted" do WhatsApp. Esconde mídia (não chega
   no DOM porque o template já omite) e o body fica como placeholder. */
.msg.msg-deleted {
  background: transparent !important;
  border: 1px dashed var(--line) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-style: italic;
}
.msg.msg-deleted::before,
.msg.msg-deleted::after {
  display: none !important;
}
.msg.msg-deleted .msg-deleted-body {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.msg.msg-deleted .msg-meta {
  color: var(--muted-soft, var(--muted));
}
.msg.msg-deleted:hover .msg-action-delete {
  /* Não exibe botão de apagar em msg já apagada (não tem como reapagar) */
  opacity: 0;
  pointer-events: none;
}

/* Monospace inline (markdown WhatsApp ``` ```) dentro das bolhas */
.msg .wa-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: pre-wrap;
}
.msg-ai .wa-mono { background: rgba(255,255,255,0.18); }

/* Dark mode — tombstone com contraste apropriado */
body.theme-fracta .msg.msg-deleted {
  border-color: var(--line-strong) !important;
  color: var(--muted) !important;
}
body.theme-fracta .msg-action-delete {
  background: var(--paper-2);
  border-color: var(--line-strong);
  color: var(--muted);
}
body.theme-fracta .msg-action-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.thread {
  gap: 2px !important;
}
.thread .msg + .msg.msg-client,
.thread .msg + .msg.msg-ai,
.thread .msg + .msg.msg-human {
  margin-top: 3px;
}
/* msgs do mesmo tipo coladas (WhatsApp: quase grudadas) */
.thread .msg-client + .msg-client,
.thread .msg-ai + .msg-ai,
.thread .msg-human + .msg-human {
  margin-top: 0;
}

.msg-media-img { max-width: 280px; border-radius: var(--radius-sm); display: block; margin-bottom: 6px; cursor: zoom-in; }
/* Baixar = ícone discreto, não link azul solto (proxy /api/media/download —
   cross-origin não baixa direto). */
.msg-media-dl { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: inherit; opacity: .5;
  text-decoration: none; margin: 2px 0 4px; transition: opacity .15s, background .15s; }
.msg-media-dl svg { width: 15px; height: 15px; }
.msg-media-dl:hover { opacity: 1; background: rgba(0,0,0,.07); }
.msg-media-audio { max-width: 280px; margin-bottom: 6px; }
.msg-media-video { max-width: 280px; border-radius: var(--radius-sm); margin-bottom: 6px; }
.msg-media-doc { display: inline-block; padding: 8px 12px; background: rgba(0,0,0,0.05); border-radius: 4px; text-decoration: none; }

/* Documento no estilo WhatsApp: ícone + nome + extensão, com o baixar DENTRO
   do card. Antes era um retângulo cinza com um "Baixar" azul solto embaixo
   (Eduardo 25/jul: "nem parece whatsapp"). */
.wa-doc { display: flex; align-items: center; gap: 10px; min-width: 210px; max-width: 300px;
  padding: 8px 8px 8px 10px; margin-bottom: 4px; border-radius: 10px;
  background: rgba(0,0,0,.05); }
.wa-doc-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; }
.wa-doc-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 8px; background: rgba(0,0,0,.07); opacity: .75; }
.wa-doc-ic svg { width: 18px; height: 18px; }
.wa-doc-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.wa-doc-name { font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.wa-doc-sub { font-size: 11px; opacity: .55; letter-spacing: .02em; }
.wa-doc-dl { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%; color: inherit; opacity: .5;
  text-decoration: none; transition: opacity .15s, background .15s; }
.wa-doc-dl svg { width: 16px; height: 16px; }
.wa-doc-dl:hover { opacity: 1; background: rgba(0,0,0,.08); }

.composer {
  grid-area: composer;
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.composer-shortcuts {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 160px;
}

.composer textarea {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
}

.btn {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover {
  background: var(--paper-2);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn:disabled, .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--paper-2);
}

.btn.primary {
  /* --accent PURO (27/jul, template find-apple): o CTA segue a cor escolhida
     nas bolinhas — azul iMessage / verde Apple — como no protótipo e no iOS.
     Era --accent-on (par AA), mas o verde-escuro destoava do resto ("o meu
     não muda do azul pro verde"). AA fica pro texto sobre branco; botão
     grande com rótulo bold segue o template. */
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
  font-weight: 600;
}
.btn.primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #FFFFFF;
}
.btn.primary:active {
  background: var(--accent-deep);
}

.btn.success {
  background: var(--success);
  color: #FFFFFF;
  border-color: var(--success);
  font-weight: 600;
}
.btn.success:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn.btn-danger, .btn.danger {
  background: var(--paper);
  color: var(--danger);
  border-color: var(--danger);
}
.btn.btn-danger:hover, .btn.danger:hover {
  background: var(--danger);
  color: #FFFFFF;
  border-color: var(--danger);
}

/* Kanban */
.kanban-wrap {
  padding: 24px 32px;
  overflow-x: auto;
}
/* Board do CRM ocupa a tela TODA (sem o cap de 1180px do .container) —
   mais colunas visíveis = navegação melhor. */
.kanban-wrap.container {
  max-width: none;
  margin: 16px 0 0;
  padding: 8px 24px 24px;
}

.kanban {
  display: grid;
  /* Colunas fluem na horizontal: poucas esticam pra preencher; muitas mantêm
     300px e o board rola lateralmente. */
  grid-auto-flow: column;
  /* 352px (era 300) — mesma largura que a esteira do Lex ganhou em 22/ago.
     Card estreito obriga a cortar nome no meio da palavra e espremer os pills. */
  grid-auto-columns: minmax(352px, 1fr);
  gap: 16px;
  min-height: calc(100vh - 130px);
}

.kanban-loading { color: var(--muted); padding: 60px; text-align: center; }

.kcol {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  max-height: calc(100vh - 130px);
}

.kcol-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: transparent;
  border-radius: 14px 14px 0 0;
}

.kcol-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0;
}

/* Título empurra count+valor pra direita, mantendo-os juntos. */
.kcol-title { margin-right: auto; }

.kcol-count {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  background: var(--paper-2);
  padding: 2px 9px;
  border-radius: var(--radius-full);
  border: none;
  margin-left: 8px;
}

/* Soma de R$ da coluna (só aparece quando > 0 — tipicamente "Contrato"). */
.kcol-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--ok, var(--success));
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
  white-space: nowrap;
}

.kcol-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kcol-body.drag-over {
  background: rgba(183, 139, 58, 0.08);
}

.kcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 12px 14px;
  cursor: grab;
  transition: box-shadow 0.15s, transform 0.15s;
  user-select: none;
}

.kcard:hover {
  box-shadow: 0 4px 14px rgba(15, 30, 58, 0.08);
  transform: translateY(-1px);
}

.kcard:active { cursor: grabbing; }

.kcard.dragging { opacity: 0.4; }

/* Card recém-respondido: sobe pro topo da coluna com um flash sutil (kanban.js). */
.kcard-bumped { animation: kcard-bump 1.1s ease-out; }
@keyframes kcard-bump {
  0%   { background: color-mix(in srgb, var(--accent) 15%, var(--paper)); box-shadow: 0 4px 16px rgba(15, 30, 58, 0.12); }
  100% { background: var(--paper); box-shadow: none; }
}

/* Linha do inbox recém-atualizada (msg nova): sobe pro topo com flash sutil
   (inbox.js bumpInboxRow — update cirúrgico, sem repintar a lista toda). */
.chat-row.row-bumped { animation: row-bump 0.9s ease-out; }
@keyframes row-bump {
  0%   { background: color-mix(in srgb, var(--accent) 13%, transparent); }
  100% { background: transparent; }
}

.kcard-status-qualified { border-left-color: var(--green-dark); }
.kcard-status-active_client { border-left-color: var(--accent); }
.kcard-status-partner { border-left-color: #DB2777; }
.kcard-status-won { border-left-color: var(--green); }

.kcard-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.kcard-phone {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.kcard-flow {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: rgba(183, 139, 58, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 8px;
}

.kcard-last {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kcard-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

.kcard-ready-badge {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--green);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 700;
}

.kcard-flow {
  background: var(--accent-bg);
  color: var(--accent);
}

/* Forms */
.container.narrow { max-width: 540px; }

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

.form input, .form select, .form textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
}

.form input:focus, .form select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}

.form .btn { align-self: flex-start; margin-top: 4px; }

#result { margin-top: 18px; }
#result .success { color: var(--ok); background: #cfe4d3; padding: 12px 16px; border-radius: 4px; }
#result .error { color: var(--danger); background: #ead2d2; padding: 12px 16px; border-radius: 4px; }
#result a { text-decoration: underline; }

/* Prompt editor */
.hint { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.hint code { background: var(--paper); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); font-size: 12px; }
.prompt-editor {
  width: 100%;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: 13px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}

/* ============================================================
   UI Engineer additions: responsividade, microinterações,
   skeleton loaders, empty states, accessibility refinements
   ============================================================ */

/* === Skeleton loader === */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--line) 0%, var(--accent-bg) 50%, var(--line) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row { height: 12px; margin: 8px 0; width: 100%; }
.skeleton-row.short { width: 40%; }
.skeleton-row.medium { width: 70%; }

/* === Avatar de iniciais === */
.avatar-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
  font-family: var(--font-body);
}

/* === Badges visuais novos === */
.flow-badge, .status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* === Tabela compacta === */
table.inbox.compact td, table.inbox.compact th { padding: 8px 14px; font-size: 13px; }
table.inbox.compact tbody tr { height: auto; }
.density-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.density-toggle button {
  background: #fff;
  border: none;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--muted);
}
.density-toggle button.active {
  background: var(--accent-bg);
  color: var(--ink);
  font-weight: 600;
}

/* === VIP === */
.vip-chip {
  display: inline-block;
  background: var(--signature-ink, #00795F);
  color: #fff;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  margin-right: 4px;
  font-weight: 700;
}
tr.row-vip { background: rgba(252, 211, 77, 0.06); }
tr.row-vip:hover { background: rgba(252, 211, 77, 0.14) !important; }

/* === Empty state === */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty-state-icon {
  font-size: 48px;
  opacity: 0.4;
  margin-bottom: 12px;
}
.empty-state-illustrated { padding: 48px 20px; }
.empty-state-img {
  width: 180px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .empty-state-img { animation: none; }
}
.empty-state-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.empty-state-text {
  font-size: 14px;
  margin: 0 auto;
  max-width: 38ch;
  line-height: 1.5;
}

/* === Microinterações === */
.kcard, .phone-card, .stat, .metric-card, table.inbox tbody tr {
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background-color 0.15s;
}
table.inbox tbody tr:hover {
  background: var(--accent-bg, #F3EEFF);
  transform: translateX(2px);
}
.tab {
  transition: color 0.18s, background-color 0.18s, border-color 0.18s, transform 0.12s;
}
.tab:hover:not(.active) {
  transform: translateY(-1px);
}
/* Badge de não-lidas: estático (o número + fundo accent já sinalizam). */
body.has-unread .tab-count {
  background: var(--accent);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  body.has-unread .tab-count { animation: none; }
  table.inbox tbody tr:hover { transform: none; }
}
.stat:hover, .metric-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
}

/* Tabela inbox: zebra + hover melhorado */
.inbox tbody tr {
  transition: background 0.12s;
}
.inbox tbody tr:nth-child(even) td {
  background: rgba(124, 58, 237, 0.015);
}
.inbox tr:hover td {
  background: var(--accent-bg) !important;
}

/* === Datas relativas (tooltip + estilo) === */
.relative-time {
  cursor: help;
  border-bottom: 1px dotted transparent;
}
.relative-time:hover {
  border-bottom-color: var(--accent-soft);
}

/* === Toast / Notificação === */
/* Balão de mensagem nova — avatar + nome + prévia, desliza da direita, clicável. */
.msg-balloon {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  display: flex; align-items: center; gap: 11px;
  width: min(340px, calc(100vw - 36px)); padding: 10px 12px;
  background: var(--paper, #fff); border: 1px solid var(--line, #e6eaf2); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(20,30,60,.16);
  transform: translateX(118%); opacity: 0;
  transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
.msg-balloon.in { transform: translateX(0); opacity: 1; }
.msg-balloon.out { transform: translateX(118%); opacity: 0; }
.msg-balloon.clickable { cursor: pointer; }
.msg-balloon.clickable:hover { border-color: var(--accent, #2b59c3); box-shadow: 0 14px 38px rgba(20,30,60,.2); }
.msg-balloon-av { flex: 0 0 auto; }
.msg-balloon-av .avatar { width: 38px; height: 38px; font-size: 13px; }
.msg-balloon-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.msg-balloon-name { font-weight: 700; font-size: 13px; color: var(--ink, #1c2433); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-balloon-text { font-size: 12.5px; color: var(--muted, #6b7686); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-balloon-x { flex: 0 0 auto; align-self: flex-start; background: none; border: 0; font-size: 17px; line-height: 1; color: var(--muted, #9aa4b6); cursor: pointer; padding: 0 2px; }
.msg-balloon-x:hover { color: var(--ink, #1c2433); }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  font-size: 14px;
  z-index: 9999;
  animation: toast-in 0.25s ease-out;
}
.toast.success { border-left-color: var(--green-dark); }
.toast.error { border-left-color: var(--danger); }
@keyframes toast-in {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* === RESPONSIVIDADE — MOBILE FIRST === */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .kanban {
    /* acompanha o alargamento de 22/ago: 260 apertava o nome em 15px */
    grid-auto-columns: minmax(300px, 1fr);
  }
  .metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Conversa em viewport médio: vira layout vertical com META compacto no topo
     (não aside lateral). Sidepanel some — funcionalidades acessíveis via menu.
     Evita o sintoma "meta empilhado em cima do thread roubando metade da tela". */
  .conversation-view {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "thread" "composer";
    grid-template-rows: auto 1fr auto;
  }
  .conversation-view .sidepanel { display: none; }
  .conversation-view .meta {
    max-height: 110px;
    overflow-y: auto;
    padding: 10px 14px;
  }
  /* No layout horizontal compacto, o avatar+nome ficam inline */
  .meta .conv-name-row { margin-bottom: 6px; }
  /* dl colapsa: dt/dd em linha, badges visíveis */
  .meta dl {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    align-items: baseline;
  }
  .meta dt {
    display: inline; margin: 0;
    font-size: 11px;
  }
  .meta dt::after { content: ': '; }
  .meta dd { display: inline; margin: 0; font-size: 12px; }
  /* Botão mesclar/cliente ficam menos prioritários */
  .meta .conv-merge-btn { display: none; }
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  body { font-size: 14px; }

  /* :not(.topbar-slim) / :not(.appnav-links) — ver a nota longa em
     components.css (@media max-width 960px). Resumo: a .topbar-slim é fixa com
     altura travada em 56px; virar coluna aqui fazia os filhos (engrenagem, Comercial,
     Lex, Sair, tema) transbordarem POR CIMA do <main>. Isto aqui é a topbar
     antiga, que não é fixa. Idem a nav: `flex-wrap: wrap; width: 100%` na
     .appnav-links empurrava metade da barra pra fora da faixa. */
  .topbar:not(.topbar-slim) {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .brand {
    font-size: 20px;
  }
  .brand-sub { display: none; }

  /* Também fora: .ins-idx (o menu do Mural). É <nav>, então caía aqui e o
     `flex-wrap: wrap` empilhava 12 pills em 6 fileiras — ~340px de cromo antes
     do primeiro card em 375px. Ele é fileira ÚNICA rolável com degradê. */
  nav:not(.appnav-links):not(.ins-idx) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
  }
  nav:not(.appnav-links):not(.ins-idx) a {
    margin: 0;
    font-size: 13px;
  }

  .container {
    margin: 16px auto;
    padding: 0 16px;
  }

  .phone-switcher {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }
  .phone-switcher-select { flex: 1; max-width: 100%; }
  .phone-switcher-meta { margin: 0; }

  .search-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .flow-filter { max-width: 100%; }

  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .tab { padding: 10px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* Tabela vira "cards" no mobile */
  .inbox thead { display: none; }
  .inbox, .inbox tbody, .inbox tr, .inbox td { display: block; width: 100%; }
  .inbox tr {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    padding: 12px;
  }
  .inbox tr:hover td { background: transparent !important; }
  .inbox td {
    padding: 4px 0;
    border: none;
    font-size: 14px;
  }
  .inbox td:nth-child(1) { font-weight: 600; font-size: 15px; color: var(--ink); }
  .inbox td:nth-child(2) { color: var(--muted); font-size: 12px; }
  .inbox td:nth-child(5) { color: var(--ink-soft); }
  .inbox td:nth-child(6) { color: var(--muted); font-size: 12px; }

  /* Kanban: scroll horizontal */
  .kanban {
    grid-auto-columns: 300px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 200px);
  }
  .kanban-wrap { padding: 12px; }
  .kcol { max-height: none; }

  /* Stats em 2 colunas */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 24px; }

  /* Conversation view empilha */
  .conversation-view {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "thread" "composer";
    grid-template-rows: auto 1fr auto;
    height: calc(100vh - 130px);
  }
  .meta {
    max-height: 200px;
    overflow-y: auto;
  }

  /* Metrics em 1 coluna */
  .metrics-grid { grid-template-columns: 1fr; }

  /* Modal fullscreen no mobile */
  .modal-card {
    min-width: 0;
    width: 100%;
    margin: 0;
    border-radius: 0;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Phones grid 1 coluna */
  .phones-grid { grid-template-columns: 1fr; }
}

/* Print/dispositivos muito pequenos */
@media (max-width: 380px) {
  nav a { font-size: 12px; }
  .brand { font-size: 18px; }
}


/* ============================================================
   === LEVEZA VISUAL (Wave 12.1) ===
   Pacote de refinamento: cores mais suaves, respiro tipográfico,
   sombras delicadas, hover sutil, transições mais calmas.
   Aplicado por cima do CSS legado pra reescrever sem quebrar.
   ============================================================ */

/* Tipografia mais arejada */
body {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  background:
    radial-gradient(1200px 600px at 80% -100px, rgba(124,58,237,0.05), transparent),
    radial-gradient(900px 500px at -100px 110%, rgba(37,211,102,0.04), transparent),
    var(--bg);
  background-attachment: fixed;
}

/* Topbar: borda mais sutil + glass effect */
.topbar {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(124, 58, 237, 0.08);
  box-shadow: 0 1px 0 rgba(124, 58, 237, 0.04);
}

/* Cards/Containers: sombras orgânicas em vez de bordas duras */
.kcard, .phone-card, .stat, .metric-card, .ret-card,
.dash-card, .pt-table, .he-card, .op-card, .sec-card, .tpl-card {
  border: 1px solid rgba(124, 58, 237, 0.06);
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.03), 0 0 0 1px rgba(124, 58, 237, 0.02);
  transition: box-shadow 0.25s ease, border-color 0.2s ease, transform 0.2s ease;
}
.kcard:hover, .phone-card:hover, .metric-card:hover, .ret-card:hover,
.dash-card:hover, .he-card:hover, .op-card:hover {
  box-shadow: 0 4px 12px rgba(76, 29, 149, 0.08), 0 0 0 1px rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.12);
  transform: none; /* sem bounce */
}

/* Tabelas: bordas mais suaves */
table.inbox, .ret-table, .pt-table, .dash-table, .he-table, .op-unassigned {
  border: 1px solid rgba(124, 58, 237, 0.07);
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.025);
  border-radius: var(--radius-lg);
}

/* Linha hover mais leve */
table.inbox tbody tr {
  transition: background-color 0.18s ease;
}
table.inbox tbody tr:hover {
  background: rgba(124, 58, 237, 0.035) !important;
  transform: none;
}

/* Badges mais pastel */
.status-badge, .flow-badge {
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Avatar: anel suave em vez de borda */
.avatar-pill {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* Tabs: hover delicado */
.tab {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  font-weight: 500;
}
.tab:hover:not(.active) {
  color: var(--ink);
  background: rgba(124, 58, 237, 0.04);
  transform: none;
}
.tab.active { font-weight: 600; }
.tab-count {
  background: rgba(124, 58, 237, 0.08);
  color: var(--ink);
  padding: 1px 8px;
  border-radius: var(--radius-md);
  font-size: 11px;
  margin-left: 4px;
  font-weight: 600;
}

/* Inputs/selects: focus suave em vez de outline duro */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="time"],
input[type="datetime-local"], select, textarea {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  border-radius: var(--radius-md);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Botões: estilos compartilhados (Atlas Blue — sem neobrutalist) */
.btn, .sec-btn, .op-redistribute, .op-save-btn {
  font-weight: 500;
  letter-spacing: 0.005em;
}
.btn.primary, .sec-btn:not(.ghost):not(.danger), .op-redistribute, .op-save-btn {
  font-weight: 600;
}

/* Headers de seção: hierarquia mais clara */
.dash-section-h, .ret-section-h, .pt-section-h, .he-section-h, .op-section-h,
.sec-card-h {
  font-size: 11px;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

/* Headers grandes (Fraunces): peso 500 em vez de 700, mais elegante */
.dash-greeting, .ret-h1, .pt-h1, .he-h1, .sec-h1, .op-h1, .nf-title {
  font-weight: 500;
}

/* Bolhas: sombras mais leves */
.msg-client { box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.msg-ai { box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15); }
.msg-human { box-shadow: 0 1px 2px rgba(37, 211, 102, 0.08); }

/* Scrollbar VISÍVEL (Eduardo 29/jul: "parte de rolar a conversa fica invisível
   quase") — o roxo a 15% de alpha sumia no fundo claro. Volta pro neutro da
   régua de cima (var(--line-strong)) + acento no hover. Firefox idem. */
html { scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }


/* ═════════════════════════════════════════════════════════════════════════
   POLISH PACK — Wave 13: stagger, view transitions, progress bar
   Adiciona sensação "leve e interativo" estilo React/shadcn sem deps.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Stagger fade-in: itens aparecem em sequência ────────────────────── */
@keyframes wave13-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Aplica automaticamente em containers comuns de lista/grid */
.dash-grid > *,
.phones-grid > *,
.metrics-grid > *,
.kanban-col,
table.inbox tbody tr,
.dash-table tbody tr,
.kcard,
.phone-card,
.metric-card,
.he-card,
.op-card,
.sec-card,
.tpl-card,
.ret-card {
  animation: wave13-fade-up 0.35s ease-out backwards;
}

/* Delays escalonados — primeiros 12 items recebem stagger,
   resto entra com delay base (não trava listas grandes) */
.dash-grid > *:nth-child(1),
.phones-grid > *:nth-child(1),
.metrics-grid > *:nth-child(1),
table.inbox tbody tr:nth-child(1),
.dash-table tbody tr:nth-child(1) { animation-delay: 0ms; }

.dash-grid > *:nth-child(2),
.phones-grid > *:nth-child(2),
.metrics-grid > *:nth-child(2),
table.inbox tbody tr:nth-child(2),
.dash-table tbody tr:nth-child(2) { animation-delay: 40ms; }

.dash-grid > *:nth-child(3),
.phones-grid > *:nth-child(3),
.metrics-grid > *:nth-child(3),
table.inbox tbody tr:nth-child(3),
.dash-table tbody tr:nth-child(3) { animation-delay: 80ms; }

.dash-grid > *:nth-child(4),
.phones-grid > *:nth-child(4),
.metrics-grid > *:nth-child(4),
table.inbox tbody tr:nth-child(4),
.dash-table tbody tr:nth-child(4) { animation-delay: 120ms; }

.dash-grid > *:nth-child(5),
table.inbox tbody tr:nth-child(5),
.dash-table tbody tr:nth-child(5) { animation-delay: 160ms; }

.dash-grid > *:nth-child(6),
table.inbox tbody tr:nth-child(6),
.dash-table tbody tr:nth-child(6) { animation-delay: 200ms; }

table.inbox tbody tr:nth-child(7),
.dash-table tbody tr:nth-child(7) { animation-delay: 220ms; }

table.inbox tbody tr:nth-child(8),
.dash-table tbody tr:nth-child(8) { animation-delay: 240ms; }

table.inbox tbody tr:nth-child(n+9),
.dash-table tbody tr:nth-child(n+9) { animation-delay: 260ms; }

/* Mensagens do chat: também stagger (já têm hover-elevate) */
.msg-client, .msg-ai, .msg-human {
  animation: wave13-fade-up 0.28s ease-out backwards;
}

/* Pra quem prefere zero movimento, mata o stagger inteiro */
@media (prefers-reduced-motion: reduce) {
  .dash-grid > *, .phones-grid > *, .metrics-grid > *,
  .kanban-col, table.inbox tbody tr, .dash-table tbody tr,
  .kcard, .phone-card, .metric-card, .he-card, .op-card,
  .sec-card, .tpl-card, .ret-card,
  .msg-client, .msg-ai, .msg-human {
    animation: none !important;
  }
}

/* ─── View Transitions API: navegação suave entre páginas ─────────────── */
/* Chrome 111+, Edge 111+, Safari 18+. Browsers antigos: fallback hard refresh. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both wave13-vt-fade-out;
}
::view-transition-new(root) {
  animation: 240ms cubic-bezier(0, 0, 0.2, 1) both wave13-vt-fade-in;
}

@keyframes wave13-vt-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes wave13-vt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ─── Progress bar global (estilo NProgress) ──────────────────────────── */
#wave13-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--green-dark) 100%);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: width 0.18s ease, opacity 0.25s ease;
  border-radius: 0 2px 2px 0;
}
#wave13-progress.active { opacity: 1; }

/* ─── Botão "carregando": estado loading inline ───────────────────────── */
.btn.is-loading, button.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after, button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: wave13-spin 0.6s linear infinite;
  color: var(--ink);
}
.btn.primary.is-loading::after { color: white; }
@keyframes wave13-spin {
  to { transform: rotate(360deg); }
}


/* ═════════════════════════════════════════════════════════════════════════
   POLISH PACK — Wave 14: modais animados, tooltips, atalhos teclado
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Modais com fade backdrop + scale card ──────────────────────────── */
@keyframes wave14-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(4px); }
}
@keyframes wave14-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wave14-card-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}

.modal {
  animation: wave14-backdrop-in 0.22s ease-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-card {
  animation: wave14-card-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(15, 30, 58, 0.25),
              0 2px 8px rgba(76, 29, 149, 0.08);
}

/* Estado de saída — JS adiciona .closing antes de remover */
.modal.closing { animation: wave14-backdrop-in 0.18s ease-in reverse; }
.modal.closing .modal-card { animation: wave14-card-out 0.2s ease-in forwards; }

/* ─── Tooltips ricos via data-tooltip ─────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  position: absolute;
  z-index: 9998;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 23, 42, 0.95);
  color: white;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  white-space: nowrap;
  letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  max-width: 240px;
}
[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 4px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.95);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.4s;
}

/* Variante pra tooltip embaixo */
[data-tooltip][data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 8px);
}
[data-tooltip][data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: rgba(15, 23, 42, 0.95);
}

/* ─── Help overlay (atalhos de teclado) ───────────────────────────────── */
#wave14-help {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99998;
  animation: wave14-backdrop-in 0.2s ease-out;
}
#wave14-help.closing { animation: wave14-backdrop-in 0.16s ease-in reverse; }
#wave14-help[hidden] { display: none; }

.wave14-help-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  min-width: 360px;
  max-width: 480px;
  box-shadow: 0 24px 80px rgba(15, 30, 58, 0.3);
  animation: wave14-card-in 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.wave14-help-card h3 {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 18px;
  color: var(--ink);
}
.wave14-help-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px dashed rgba(124, 58, 237, 0.08);
}
.wave14-help-row:last-child { border-bottom: none; }
.wave14-help-row .label {
  color: var(--ink-soft);
}
.wave14-kbd {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 2px;
  min-width: 18px;
  text-align: center;
}
.wave14-help-hint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* ─── "G mode" indicator (Gmail-style: pressionou G, esperando próxima tecla) ─── */
.wave14-g-indicator {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--ink);
  color: white;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(76, 29, 149, 0.35);
  z-index: 99997;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.wave14-g-indicator.active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-card, #wave14-help, .wave14-help-card,
  [data-tooltip]::before, [data-tooltip]::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   POLISH PACK — Wave 15: optimistic UI nas mensagens
   ═════════════════════════════════════════════════════════════════════════ */

/* Bolha "enviando…" — aparece antes do server confirmar */
.msg.msg-pending {
  opacity: 0.7;
  position: relative;
  animation: wave13-fade-up 0.18s ease-out backwards;
}
.msg.msg-pending::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -22px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid var(--accent-soft);
  border-top-color: transparent;
  border-radius: 50%;
  animation: wave13-spin 0.7s linear infinite;
}
.msg.msg-pending .msg-meta { font-style: italic; }

/* Bolha que falhou no envio */
.msg.msg-failed {
  opacity: 1;
  border: 1px solid var(--danger) !important;
  background: #fff5f5 !important;
}
.msg.msg-failed .msg-meta {
  color: var(--danger);
  font-weight: 600;
}
.msg-failed-retry {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--danger);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s ease;
}
.msg-failed-retry:hover { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .msg.msg-pending { animation: none !important; }
  .msg.msg-pending::before { animation: none !important; }
}


/* ═════════════════════════════════════════════════════════════════════════
   POLISH PACK — Wave 17: Command palette (⌘K)
   ═════════════════════════════════════════════════════════════════════════ */

#wave17-palette {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 99996;
  animation: wave14-backdrop-in 0.18s ease-out;
}
#wave17-palette[hidden] { display: none; }
#wave17-palette.closing { animation: wave14-backdrop-in 0.14s ease-in reverse; }

.wave17-palette-card {
  width: 560px;
  max-width: 92vw;
  max-height: 70vh;
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(15, 30, 58, 0.32),
              0 2px 8px rgba(76, 29, 149, 0.10);
  display: flex;
  flex-direction: column;
  animation: wave14-card-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.wave17-palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.wave17-palette-icon {
  width: 18px;
  height: 18px;
  opacity: 0.5;
  flex-shrink: 0;
}
.wave17-palette-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  padding: 4px 0;
}
.wave17-palette-input::placeholder { color: var(--muted); }
.wave17-palette-hint {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.wave17-palette-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.wave17-palette-group {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 12px 4px;
}
.wave17-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.wave17-palette-item:hover,
.wave17-palette-item.active {
  background: var(--accent-bg);
}
.wave17-palette-item-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.wave17-palette-item-content {
  flex: 1;
  min-width: 0;
}
.wave17-palette-item-title {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wave17-palette-item-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wave17-palette-item-kbd {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.wave17-palette-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

.wave17-palette-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
}

@media (prefers-reduced-motion: reduce) {
  #wave17-palette, .wave17-palette-card { animation: none !important; }
}


/* ═════════════════════════════════════════════════════════════════════════
   POLISH PACK — Wave 18: Kanban D&D polido
   ═════════════════════════════════════════════════════════════════════════ */

/* Card sendo arrastado: ghost translúcido */
.kcard.dragging {
  opacity: 0.4;
  transform: rotate(1.5deg) scale(1.02);
  box-shadow: 0 12px 32px rgba(76, 29, 149, 0.25) !important;
  cursor: grabbing;
  transition: opacity 0.15s, transform 0.15s;
}

/* Coluna recebendo drop: highlight visual */
.kcol-body.drag-over {
  background: linear-gradient(180deg,
    rgba(124, 58, 237, 0.06) 0%,
    rgba(124, 58, 237, 0.03) 100%);
  border-radius: var(--radius-md);
  outline: 2px dashed var(--accent-soft);
  outline-offset: -4px;
  transition: background 0.18s ease, outline-color 0.18s ease;
}

/* Placeholder onde o card vai cair */
.kcard-placeholder {
  background: rgba(124, 58, 237, 0.08);
  border: 2px dashed var(--accent-soft);
  border-radius: var(--radius-md);
  margin: 6px 0;
  min-height: 60px;
  animation: wave18-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wave18-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Card grabbable cursor */
.kcard {
  cursor: grab;
}
.kcard:active {
  cursor: grabbing;
}

/* View Transition no kanban: anima cards trocando de coluna */
.kcard {
  view-transition-name: var(--vt-card, none);
}

@media (prefers-reduced-motion: reduce) {
  .kcard.dragging { transition: none !important; transform: none !important; }
  .kcard-placeholder { animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PAGE-SCOPED COMPONENTS — consolidados das views EJS
   (antes estavam em <style> inline em cada view; agora padronizados com tokens)
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Primitives compartilhados pelas dashboards (.dash, .ret, .ag, .pt, .he, .op, .sec) ─── */
.dash-wrap, .ret-wrap, .ag-wrap, .pt-wrap, .he-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-3xl);
}
/* op-wrap (Plantão) e pt-wrap (Parceiros) alinhados em 1100 (mesmo do
   dash-wrap). Antes ficavam 1200 → encostavam na borda direita do viewport
   útil quando sidebar aberta (conteúdo "demasiado pra direita"). */
.op-wrap, .pt-wrap { max-width: 1100px; }
.he-wrap { max-width: 960px; }
.sec-wrap { max-width: 720px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-3xl); }

.dash-greeting, .ret-h1, .ag-h1, .pt-h1, .op-h1, .he-h1, .sec-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 38px;
  margin: 0 0 var(--space-xs);
  font-weight: 500;
}
.dash-greeting-sub, .ret-sub, .ag-sub, .pt-sub, .op-sub, .he-sub, .sec-sub {
  color: var(--muted);
  margin: 0 0 var(--space-xl);
  font-size: var(--text-base);
}
.he-sub { max-width: 60ch; line-height: 1.5; }

.dash-section-h, .ret-section-h, .pt-section-h, .op-section-h, .he-section-h, .ag-section-h {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  margin: var(--space-xl) 0 12px;
}
.ag-section-h {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.op-section-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grids de KPI cards (todos com o mesmo comportamento) */
.dash-grid, .ret-grid-3, .ag-grid, .he-grid, .op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.ag-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: var(--space-lg); }
.he-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 12px; }
.op-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ─── KPI CARD — padrão visual único pra todas as dashboards ─── */
.dash-card, .ret-card, .ag-card, .he-card, .op-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.ret-card, .ag-card { padding: 18px 20px; }
.ag-card {
  border-color: rgba(124, 58, 237, 0.06);
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.03);
}
.dash-card.alert { border-color: var(--danger); background: #fff7f7; }
.dash-card.success { border-color: var(--green); background: #f3fbf7; }

.dash-card-label, .ret-card-label, .ag-card-label, .he-card-label, .op-card-role {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}
.dash-card-label { font-size: 12px; }

.dash-card-value, .ret-card-value, .ag-card-value, .he-card-value {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 6px 0 2px;
  color: var(--ink);
}
.dash-card-value, .he-card-value { font-size: var(--text-display); }
.ret-card-value { font-size: 38px; }
.ag-card-value { font-size: 32px; font-weight: 500; margin: 4px 0 2px; }

.dash-card-meta, .ret-card-meta, .ag-card-meta, .he-card-meta {
  font-size: 12px;
  color: var(--muted);
}
.dash-card-icon {
  position: absolute;
  top: var(--space-md);
  right: 18px;
  font-size: 22px;
  opacity: 0.55;
}
.he-card.warning .he-card-value { color: var(--danger); }
.he-card.ok .he-card-value { color: var(--green-dark); }

/* ─── TABLE — padrão único pra todas as listagens ─── */
.dash-table, .ret-table, .ag-table, .pt-table, .he-table, .op-unassigned {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ag-table { border-color: var(--line); border-radius: var(--radius-lg); }

.dash-table th, .dash-table td,
.ret-table th, .ret-table td,
.ag-table th, .ag-table td,
.pt-table th, .pt-table td,
.he-table th, .he-table td {
  padding: 12px var(--space-md);
  text-align: left;
  font-size: var(--text-sm);
}
.dash-table th, .dash-table td { font-size: var(--text-base); }
.ag-table th, .ag-table td { vertical-align: middle; }

.dash-table th, .ret-table th, .ag-table th, .pt-table th, .he-table th {
  background: var(--surface-subtle);
  font-weight: 600;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-table th { font-size: 12px; }
.pt-table th { cursor: default; }

.dash-table tbody tr, .he-table tbody tr {
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--motion-fast);
}
.ret-table tbody tr, .pt-table tbody tr { border-top: 1px solid var(--line); }
.ag-table tbody tr {
  border-top: 1px solid rgba(124, 58, 237, 0.05);
  transition: background 0.15s;
}
.dash-table tbody tr:hover,
.he-table tbody tr:hover,
.pt-table tbody tr:hover { background: var(--surface-subtle); }
.ag-table tbody tr:hover { background: var(--paper-2); }

.dash-empty, .ret-empty, .ag-empty, .pt-empty, .he-empty, .op-empty {
  padding: var(--space-lg);
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: var(--text-sm);
}
.ag-empty { padding: var(--space-xl); }

/* ─── RETENTION — NPS bar + templates ─── */
.nps-bar {
  display: flex;
  height: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-2);
  margin: var(--space-sm) 0 var(--space-xs);
}
.nps-bar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}
.nps-bar .promoter { background: var(--green); }
.nps-bar .passive { background: var(--line-strong); }
.nps-bar .detractor { background: var(--danger); }
.nps-legend {
  display: flex;
  gap: 14px;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 6px;
}
.nps-legend span::before {
  content: '';
  display: inline-block;
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%;
  margin-right: var(--space-xs);
  vertical-align: middle;
}
.nps-legend .l-pro::before { background: var(--green); }
.nps-legend .l-pas::before { background: var(--line-strong); }
.nps-legend .l-det::before { background: var(--danger); }

.tpl-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px var(--space-md);
  margin-bottom: 10px;
}
.tpl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.tpl-tag {
  display: inline-block;
  padding: 2px var(--space-sm);
  background: var(--accent-bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}
.tpl-body {
  font-size: var(--text-sm);
  color: #2a2a2a;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ─── OPERAÇÃO — operator cards + shift controls ─── */
.op-card.off-shift { opacity: 0.55; }
.op-card-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.op-card-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
}
.op-shift-pill {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.op-shift-pill.on { background: var(--green-soft); color: var(--green-deep); }
.op-shift-pill.off { background: var(--danger-soft); color: var(--danger-deep); }

.op-load {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 14px 0 6px;
}
.op-load-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
}
.op-load-max { color: var(--muted); font-size: var(--text-base); }
.op-load-bar {
  height: var(--space-sm);
  background: #f0f0f0;
  border-radius: var(--radius-xs, 4px);
  overflow: hidden;
}
.op-load-bar > div { height: 100%; transition: width var(--motion-slow); }
.op-load-bar.ok > div { background: linear-gradient(90deg, var(--green), var(--green-dark)); }
.op-load-bar.mid > div { background: linear-gradient(90deg, var(--warn), #A04E2C); }
.op-load-bar.over > div { background: linear-gradient(90deg, var(--danger), var(--danger-deep)); }

.op-meta {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.op-edit-btn {
  font-size: var(--text-xs);
  background: transparent;
  border: 1px solid var(--line);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--muted);
}
.op-edit-btn:hover { color: var(--ink); border-color: var(--accent); }
.op-edit-form {
  padding: 14px;
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  margin-top: 12px;
  display: grid;
  gap: 10px;
  font-size: var(--text-sm);
}
.op-edit-form label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.op-edit-form input[type="time"],
.op-edit-form input[type="number"] {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.op-days { display: flex; gap: var(--space-xs); }
.op-day {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
  user-select: none;
}
.op-day.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.op-save-btn {
  padding: var(--space-sm) 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.op-unassigned th, .op-unassigned td {
  padding: 10px 14px;
  text-align: left;
  font-size: var(--text-sm);
}
.op-unassigned th {
  background: var(--surface-subtle);
  font-weight: 600;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
}
.op-unassigned tbody tr { border-top: 1px solid var(--line); cursor: pointer; }
.op-unassigned tbody tr:hover { background: var(--surface-subtle); }

/* ─── Mural Follow-up: cabeçalho fixo ao rolar ───────────────
   A regra agrupada acima dá overflow:hidden na tabela (clip do
   border-radius). overflow:hidden num ancestral MATA position:sticky,
   então o thead nunca conseguiria grudar. Liberamos o overflow só
   aqui e fixamos o cabeçalho logo abaixo do topbar fixo (56px).
   box-shadow (não border) garante o traço de baixo ao rolar — border
   em <th> sticky some em tabelas border-collapse. */
.op-unassigned { overflow: visible; }
.op-unassigned thead th {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  background: var(--surface-subtle);
  box-shadow: inset 0 -1px 0 var(--line);
}
.op-redistribute {
  padding: var(--space-sm) var(--space-md);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--space-sm);
  font-weight: 600;
  cursor: pointer;
  font-size: var(--text-sm);
}
.op-redistribute:hover { opacity: 0.92; }

/* ─── AGENDA — pills + tabs + cancel ─── */
.ag-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}
.ag-pill.pending { background: var(--warn-soft); color: var(--warn); }
.ag-pill.sent { background: var(--green-soft); color: var(--green-deep); }
.ag-pill.failed { background: var(--danger-soft); color: var(--danger-deep); }
.ag-pill.cancelled { background: var(--paper-2); color: var(--muted); }
/* Cancelar quieto (lei "sinal só em problema"): 10 botões vermelhos em fileira
   viravam muro de alarme. Neutro em repouso, vermelho só no hover. */
.ag-cancel-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: var(--space-xs) 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ag-cancel-btn:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.ag-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); }
.ag-tab {
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;   /* gramática dos buckets do inbox (pill Helena) */
  cursor: pointer;
  font: 600 12.5px/1 Inter, sans-serif;
  color: var(--muted);
  transition: all 0.15s;
}
.ag-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ag-tab:hover:not(.active) { background: var(--accent-bg); color: var(--ink); }

/* ─── PARTNERS — bars + rates ─── */
.pt-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pt-bar-cell { width: 200px; }
.pt-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: 3px;
  overflow: hidden;
}
.pt-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
}
.pt-rate {
  display: inline-block;
  padding: 2px var(--space-sm);
  background: var(--green-soft);
  color: var(--green-deep);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}
.pt-rate.low { background: var(--danger-soft); color: var(--danger-deep); }
.pt-rate.mid { background: var(--warn-soft); color: var(--warn); }
.pt-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.pt-tab {
  padding: 10px var(--space-md);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pt-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ─── SECURITY — cards + QR + backup codes ─── */
.sec-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: 18px;
}
.sec-card-h {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--ink);
}
.sec-card-p {
  color: var(--muted);
  margin: 0 0 var(--space-md);
  font-size: var(--text-base);
  line-height: 1.5;
}
.sec-status {
  display: inline-block;
  padding: var(--space-xs) 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}
.sec-status.on { background: var(--green-soft); color: var(--green-deep); }
.sec-status.off { background: var(--danger-soft); color: var(--danger-deep); }
.sec-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sec-btn {
  padding: 10px 20px;
  border-radius: var(--space-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
}
.sec-btn.ghost { background: var(--paper); color: var(--accent); }
.sec-btn.danger { background: var(--danger); border-color: var(--danger); }
.qr-wrap {
  text-align: center;
  padding: 18px;
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
}
.qr-wrap img {
  width: 220px;
  height: 220px;
  background: var(--paper);
  padding: 12px;
  border-radius: var(--space-sm);
}
.qr-secret {
  font-family: var(--font-mono);
  background: var(--paper);
  padding: var(--space-sm) 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-top: 10px;
  font-size: var(--text-sm);
  letter-spacing: 1px;
  border: 1px solid var(--line);
}
.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  padding: 14px;
  background: var(--surface-subtle);
  border-radius: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.backup-codes div {
  background: var(--paper);
  padding: var(--space-sm) 10px;
  border-radius: var(--radius-xs, 4px);
  text-align: center;
  border: 1px solid var(--line);
}
.form-inline { display: flex; gap: 10px; margin-top: 12px; }
.form-inline input {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--space-sm);
  font-size: var(--text-base);
  flex: 1;
  font-family: var(--font-mono);
  letter-spacing: 1px;
}

/* ─── REPORT EDUARDO — bars + suggestion box ─── */
.he-bar {
  height: 22px;
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  margin-bottom: var(--space-sm);
}
.he-bar > div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
}
.he-bar .eduardo { background: linear-gradient(90deg, var(--accent), var(--ink-soft)); }
.he-bar .team { background: linear-gradient(90deg, var(--green-dark), var(--green)); }
.he-suggestion {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(37, 211, 102, 0.05));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 18px 0;
  font-size: var(--text-base);
  line-height: 1.55;
}
.he-suggestion strong { color: var(--ink); }

/* ─── 404 ─── */
.nf-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}
.nf-card { max-width: 420px; text-align: center; }
.nf-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 120px;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0;
}
.nf-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  margin: 12px 0 6px;
}
.nf-sub {
  color: var(--muted);
  margin: 0 0 28px;
  font-size: var(--text-base);
}
.nf-btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--space-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-base);
}
.nf-btn:hover { opacity: 0.92; }

/* ─── CONVERSATION — typing indicator, x-sell, message checks, composer V2, schedule modal ─── */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 14px;
  margin: 6px 0;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots span { animation: none; opacity: 0.7; }
}

.sp-xsell {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.sp-xsell-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(37, 211, 102, 0.06));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.sp-xsell-title {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
  color: var(--ink);
}
.sp-xsell-body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: var(--space-sm);
}
.sp-xsell-actions { display: flex; gap: 6px; }
.sp-xsell-btn {
  font-size: var(--text-xs);
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  color: var(--ink);
}
.sp-xsell-btn:hover { background: var(--accent-bg); }
.sp-xsell-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.sp-xsell-btn.primary:hover { opacity: 0.92; }

/* Check marks tipo WhatsApp */
.msg-checks {
  margin-left: var(--space-xs);
  display: inline-flex; align-items: center;
  transition: color 200ms ease-out, transform 200ms ease-out;
}
.msg-checks svg { display: block; vertical-align: -1px; }
.msg-checks.sent { color: rgba(0, 0, 0, 0.30); }
.msg-checks.delivered { color: rgba(0, 0, 0, 0.55); }
.msg-checks.seen { color: #2196F3; }
.msg-ai .msg-checks.sent { color: rgba(255, 255, 255, 0.55); }
.msg-ai .msg-checks.delivered { color: rgba(255, 255, 255, 0.85); }
.msg-ai .msg-checks.seen { color: #4FC3F7; }
.msg-checks.failed { color: #c0392b; gap: 3px; font-size: 11px; font-weight: 500; }
.msg-ai .msg-checks.failed { color: #ffb4a8; }
/* Pulse rápido na primeira aparição do tick azul (seen) */
@keyframes tick-seen-pulse {
  0%   { transform: scale(1);    filter: none; }
  40%  { transform: scale(1.25); filter: drop-shadow(0 0 4px rgba(33, 150, 243, 0.6)); }
  100% { transform: scale(1);    filter: none; }
}
.msg-checks.seen.just-seen { animation: tick-seen-pulse 450ms ease-out; }

/* Composer V2 — toolbar leve */
.composer-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(76, 29, 149, 0.04);
}
.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.composer-toolbar select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--space-sm);
  font-size: 12px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.composer-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 10px;
  border-radius: var(--space-sm);
  cursor: pointer;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.cmp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cmp-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.composer-icon-btn:not(:disabled):hover { background: var(--accent-bg); border-color: var(--line); }
.composer-icon-btn:not(:disabled):active { transform: scale(0.96); }
.composer-icon-btn:disabled {
  background: var(--surface-subtle);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}
.composer-icon-btn.recording {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
  animation: rec-pulse 1.2s infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.composer-status {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  
}
.composer-v2 textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  resize: vertical;
  background: var(--surface-subtle);
  min-height: 60px;
}
.composer-v2 textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
/* Fila de anexos (imagens / documentos) aguardando envio. Aparece entre a
   barra de ferramentas e o textarea — texto digitado vira caption da primeira
   imagem (estilo WhatsApp). Múltiplos cards lado a lado, X em cada pra remover. */
.attachments-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.attachments-preview[hidden] { display: none; }
.attachment-card {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.attachment-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attachment-card .doc-icon {
  font-size: 28px;
  margin-bottom: 2px;
  line-height: 1;
}
.attachment-card .doc-name {
  font-size: 10px;
  padding: 0 4px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 76px;
  color: var(--ink);
}
.attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.65);
  color: white;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.attachment-remove:hover { background: var(--danger); }

/* Preview do áudio gravado: substitui o textarea entre a barra de ferramentas e
   o botão Enviar. Player ocupa o espaço todo, lixeira fica grudada à direita. */
.audio-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  min-height: 60px;
}
.audio-preview[hidden] { display: none; }
.audio-preview audio {
  flex: 1;
  min-width: 0;
  height: 38px;
}
.audio-preview-cancel {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 7px 10px;
  border-radius: var(--space-sm);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.audio-preview-cancel:hover {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}

.composer-send-row { display: flex; justify-content: flex-end; }
.composer-send-row .btn.primary {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.25), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.composer-send-row .btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.35), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.composer-send-row .btn.primary:active {
  transform: translateY(0);
}
.composer-send-row .btn.primary::after {
  content: ' →';
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.18s ease;
}
.composer-send-row .btn.primary:hover::after {
  transform: translateX(3px);
}
/* Fracta: botão Enviar fica lime — primary action chama atenção */
body.theme-fracta .composer-send-row .btn.primary {
  background: var(--lime, #C5F82A) !important;
  color: var(--ink, #0E0A24) !important;
  box-shadow: 0 6px 20px rgba(197, 248, 42, 0.3), 0 0 0 1px rgba(197, 248, 42, 0.6) inset;
}
body.theme-fracta .composer-send-row .btn.primary:hover {
  box-shadow: 0 10px 28px rgba(197, 248, 42, 0.5), 0 0 0 1px rgba(197, 248, 42, 0.8) inset;
}

/* Modal de agendamento (sobre o composer) */
.schedule-modal {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.schedule-modal-card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 26px;
  max-width: 460px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}
.schedule-modal-card .schedule-preset {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: var(--space-sm);
}
.schedule-modal-card .schedule-preset.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ═════════════════════════════════════════════════════════════════════════
   UNREAD INDICATOR — conversa com inbound não respondida (em qualquer aba)
   ═════════════════════════════════════════════════════════════════════════ */

/* calm-v1: bolinha de não-respondida = sinal ÚNICO, estático e discreto.
   Sem pulse (cassino), sem glow, vermelho calmo. A barra/gradiente vermelho na
   linha eram a MESMA info em dobro — removidos. A bolinha basta. */
.unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B5544F;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* === Coluna CLIENTE alinhada (fim do "tronxo") ===
   Flex com slot fixo pra bolinha de não-lida (com ou sem, mesma largura) →
   os avatares formam uma coluna RETA. VIP/cliente/canal vão depois do nome,
   então não empurram o avatar. */
.conv-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conv-cell .unread-slot {
  flex: 0 0 7px; width: 7px; height: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.conv-cell .unread-slot .unread-dot { margin: 0; }
.conv-cell-name {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

tr.row-unread td {
  background: transparent;
}
tr.row-unread td:first-child {
  border-left: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
   SATURATION LAYER — cores fortes por status, urgência visível
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Cores semânticas saturadas */
  --urgent: #DC2626;
  --urgent-deep: #991B1B;
  --urgent-bg: #FEF2F2;
  --urgent-bg-strong: #FECACA;

  --active: var(--signature);
  --active-deep: #7C2D12;
  --active-bg: #FBF0EA;

  --info: #2563EB;
  --info-deep: #1E40AF;
  --info-bg: #EFF6FF;

  --success: #059669;
  --success-deep: #047857;
  --success-bg: #ECFDF5;

  --closed: #6B7280;
  --closed-bg: #F3F4F6;
}

/* ─── Background do body ─── calm-v1: removido o glow radial VERMELHO (cassino
   ambiente). Mantido só um respiro roxo sutil no topo, alinhado à identidade. */
body {
  background:
    radial-gradient(ellipse at top, rgba(124, 58, 237, 0.04) 0%, transparent 50%),
    var(--bg);
}

/* ─── TABS por scope: vermelho urgente pra "Em aberto hoje" ─── */
.tab[data-scope="today_open"] {
  color: var(--urgent);
}
.tab[data-scope="today_open"] .tab-count {
  background: var(--urgent-bg-strong);
  color: var(--urgent-deep);
  font-weight: 700;
}
.tab[data-scope="today_open"].active {
  color: var(--urgent);
  border-bottom-color: var(--urgent);
  background: linear-gradient(180deg, transparent 0%, var(--urgent-bg) 100%);
}
.tab[data-scope="today_open"].active .tab-count {
  background: var(--urgent);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
  animation: urgent-pulse 2.2s ease-in-out 3;
}
@keyframes urgent-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tab[data-scope="today_open"].active .tab-count { animation: none; }
}

.tab[data-scope="mine"] { color: var(--active-deep); }
.tab[data-scope="mine"] .tab-count {
  background: var(--active-bg);
  color: var(--active-deep);
}
.tab[data-scope="mine"].active {
  color: var(--active-deep);
  border-bottom-color: var(--active);
  background: linear-gradient(180deg, transparent 0%, var(--active-bg) 100%);
}
.tab[data-scope="mine"].active .tab-count { background: var(--active); color: #fff; }

.tab[data-scope="clients"] { color: var(--info-deep); }
.tab[data-scope="clients"] .tab-count {
  background: var(--info-bg);
  color: var(--info-deep);
}
.tab[data-scope="clients"].active {
  color: var(--info);
  border-bottom-color: var(--info);
  background: linear-gradient(180deg, transparent 0%, var(--info-bg) 100%);
}
.tab[data-scope="clients"].active .tab-count { background: var(--info); color: #fff; }

.tab[data-scope="today_closed"] { color: var(--success-deep); }
.tab[data-scope="today_closed"] .tab-count {
  background: var(--success-bg);
  color: var(--success-deep);
}
.tab[data-scope="today_closed"].active {
  color: var(--success);
  border-bottom-color: var(--success);
  background: linear-gradient(180deg, transparent 0%, var(--success-bg) 100%);
}
.tab[data-scope="today_closed"].active .tab-count { background: var(--success); color: #fff; }

.tab[data-scope="archived"] .tab-count {
  background: var(--closed-bg);
  color: var(--closed);
}

/* ─── Linhas em aberto/não respondidas com mais peso ─── */
tr.row-unread td {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.10) 0%, rgba(220, 38, 38, 0.02) 60%, transparent 100%);
}
tr.row-unread td:first-child {
  border-left: 4px solid var(--urgent);
}
tr.row-unread .unread-dot {
  width: 10px;
  height: 10px;
}

/* Linhas de leads in_progress (mesmo sem unread) recebem destaque sutil */
tr[data-status="in_progress"] td:first-child {
  box-shadow: inset 3px 0 0 var(--urgent);
}

/* ─── STATUS BADGES — paleta forte por estado ─── */
.status-badge,
.badge-status {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
}
.status-badge.status-in_progress,
.badge-status.status-in_progress {
  background: var(--urgent-bg-strong);
  color: var(--urgent-deep);
  border-color: rgba(220, 38, 38, 0.25);
}
.status-badge.status-qualified,
.badge-status.status-qualified {
  background: var(--active-bg);
  color: var(--active-deep);
  border-color: rgba(0, 168, 132, 0.3);
}
.status-badge.status-active_client,
.badge-status.status-active_client {
  background: var(--info-bg);
  color: var(--info-deep);
  border-color: rgba(37, 99, 235, 0.25);
}
.status-badge.status-won,
.badge-status.status-won {
  background: var(--success-bg);
  color: var(--success-deep);
  border-color: rgba(5, 150, 105, 0.3);
}
.status-badge.status-discarded,
.status-badge.status-lost,
.badge-status.status-discarded,
.badge-status.status-lost {
  background: var(--closed-bg);
  color: var(--closed);
  border-color: rgba(107, 114, 128, 0.25);
}

/* ─── DASHBOARD KPI cards por tipo ─── */
.dash-card { transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.dash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(76, 29, 149, 0.2);
}

#kpi-new-card, .dash-card:has(#kpi-new) {
  background: linear-gradient(135deg, var(--urgent-bg) 0%, #fff 65%);
  border-color: rgba(220, 38, 38, 0.25);
}
#kpi-new-card .dash-card-value, .dash-card:has(#kpi-new) .dash-card-value { color: var(--urgent-deep); }
#kpi-new-card::before, .dash-card:has(#kpi-new)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--urgent);
}

.dash-card:has(#kpi-active) {
  background: linear-gradient(135deg, var(--active-bg) 0%, #fff 65%);
  border-color: rgba(0, 168, 132, 0.25);
}
.dash-card:has(#kpi-active) .dash-card-value { color: var(--active-deep); }
.dash-card:has(#kpi-active)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--active);
}


.dash-card:has(#kpi-stale) {
  background: linear-gradient(135deg, var(--urgent-bg-strong) 0%, var(--urgent-bg) 60%);
  border-color: var(--urgent);
}
.dash-card:has(#kpi-stale) .dash-card-value { color: var(--urgent-deep); }
.dash-card:has(#kpi-stale)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
  background: var(--urgent);
  animation: urgent-pulse 2.2s ease-in-out 3;
}

/* ─── KANBAN headers — calm-v1: neutros (sem gradiente/contador colorido por
   status). A cor de status vive no card/na barra de urgência, não no header —
   marca-se a exceção, não a coluna inteira. Revert: restaurar os gradientes por
   data-col aqui. ─── */

.kcol-count {
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-xs);
}

/* Card do kanban com borda lateral colorida por status */
.kcard-status-in_progress { border-left: 3px solid var(--urgent); }
.kcard-status-qualified   { border-left: 3px solid var(--active); }
.kcard-status-active_client { border-left: 3px solid var(--info); }
.kcard-status-won         { border-left: 3px solid var(--success); }
.kcard-status-discarded   { border-left: 3px solid var(--closed); opacity: 0.7; }

/* ─── Mensagens de cliente não respondidas na thread ─── */
.msg.msg-client {
  background: linear-gradient(135deg, var(--urgent-bg) 0%, #fff 100%);
  border-left: 3px solid var(--urgent);
}

/* ─── Conversation list / inbox row: nome do cliente em destaque quando in_progress ─── */
tr[data-status="in_progress"] .client-name,
tr[data-status="in_progress"] td:nth-child(2) strong {
  color: var(--urgent-deep);
  font-weight: 700;
}

/* ─── Header brand fica mais quente ─── */
header.topbar {
  background: linear-gradient(120deg, var(--paper) 0%, rgba(220, 38, 38, 0.04) 100%);
  border-bottom: 2px solid var(--urgent);
}

/* ─── Phone-switcher mais visível ─── */
.phone-switcher {
  background: linear-gradient(135deg, var(--accent-bg) 0%, #fff 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.phone-switcher-select {
  background: #fff;
  border: 2px solid var(--accent);
  font-weight: 600;
}

/* ─── Botão "Pra mim" chip quando ativo ─── */
.mine-chip[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--active), var(--urgent));
  color: #fff;
  border-color: var(--urgent);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

/* ─── Tab "Sem dono" — cor de "pega na fila" ─── */
.tab[data-scope="unassigned"] { color: var(--info-deep); }
.tab[data-scope="unassigned"] .tab-count {
  background: var(--info-bg);
  color: var(--info-deep);
}
.tab[data-scope="unassigned"].active {
  color: var(--info);
  border-bottom-color: var(--info);
  background: linear-gradient(180deg, transparent 0%, var(--info-bg) 100%);
}
.tab[data-scope="unassigned"].active .tab-count {
  background: var(--info);
  color: #fff;
}

/* ─── Filter chips (Inbox) — abaixo das tabs, aditivos ─────────────── */
.filter-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.filter-chip {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  padding: 6px 14px 6px 12px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.filter-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.filter-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 28%, transparent);
}
.filter-chip[data-filter="mine"][aria-pressed="true"] {
  background: linear-gradient(135deg, var(--active), var(--urgent));
  border-color: var(--urgent);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}
.filter-chip[data-filter="unassigned"][aria-pressed="true"] {
  background: var(--info);
  border-color: var(--info);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.filter-chip[data-filter="clients"][aria-pressed="true"] {
  background: var(--success);
  border-color: var(--success);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}
.filter-chip-count {
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}
.filter-chip[aria-pressed="true"] .filter-chip-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Chip "Esperando resposta" — cor de urgência */
.filter-chip[data-filter="waiting"][aria-pressed="true"] {
  background: var(--urgent);
  border-color: var(--urgent);
  color: #fff;
  box-shadow: 0 2px 12px rgba(220, 38, 38, 0.35);
  animation: urgent-pulse 2.2s ease-in-out 3;
}
@media (prefers-reduced-motion: reduce) {
  .filter-chip[data-filter="waiting"][aria-pressed="true"] { animation: none; }
}

/* ============================================
   BADGE — atom unificado pra substituir
   .sector-chip, .role-badge, .status-badge inline.
   Variantes via classe modifier (--sector, --role-admin, etc).
   ============================================ */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  margin: 2px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--paper-2);
  color: var(--ink-soft);
}
.badge--sector       { background: var(--paper-2);             color: var(--ink-soft); }
.badge--role-admin   { background: var(--danger-soft);  color: var(--danger-deep); }
.badge--role-attendant { background: #DBEAFE;           color: var(--accent-deep); }
.badge--role-ai      { background: #E0E7FF;             color: #3730A3; }
.badge--status-blue  { background: #DBEAFE;             color: var(--accent-deep); }
.badge--status-amber { background: var(--warn-soft);    color: var(--warn); }
.badge--status-cyan  { background: #CFFAFE;             color: #155E75; }
.badge--status-green { background: var(--green-soft);   color: var(--green-deep); }
.badge--status-red   { background: var(--danger-soft);  color: var(--danger-deep); }
.badge--vip          { background: var(--signature-ink, #00795F); color: #fff; }
.badge--locked       { background: var(--warn-soft);    color: var(--warn); border: 1px solid var(--warn); }

/* ============================================
   A11Y — utility class pra esconder visualmente
   mas manter accessível pra screen readers.
   Usado em <caption class="sr-only">, labels
   invisíveis, contexto pra navegação.
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   INBOX MINIMALISTA (S07) — corta poluição visual
   Princípio: tudo que não decide aparece. Tudo que decide, escolhe.
   ============================================ */

/* Header compacto: phone-switcher inline numa linha só */
.inbox-minimal .inbox-header-compact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.inbox-minimal .phone-switcher-select-compact {
  appearance: none;
  background: transparent;
  border: none;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}
.inbox-minimal .phone-switcher-select-compact:hover { background: var(--accent-bg); }

/* Search bar compacto: input + chip alerta + filtros */
.inbox-minimal .search-bar-compact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.inbox-minimal .search-bar-compact input[type="search"] {
  flex: 1;
  min-width: 200px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}

/* Chip principal de alerta (Esperando resposta) — destaque vermelho */
.filter-chip-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-sm) var(--space-md);
  background: var(--danger-soft);
  color: var(--danger-deep);
  border: 1px solid var(--danger);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--motion-fast);
}
.filter-chip-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.filter-chip-primary[aria-pressed="true"] {
  background: var(--danger);
  color: white;
}
.filter-chip-primary .alert-dot {
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  animation: alert-pulse 1.6s ease-in-out 3;
}
.filter-chip-primary[aria-pressed="true"] .alert-dot { background: white; }
@keyframes alert-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .filter-chip-primary .alert-dot { animation: none; }
}

/* Filtros avançados (<details><summary>) */
.advanced-filters {
  position: relative;
}
.advanced-filters > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  user-select: none;
  transition: background var(--motion-fast);
}
.advanced-filters > summary::-webkit-details-marker { display: none; }
.advanced-filters > summary:hover { background: var(--accent-bg); }
.advanced-filters[open] > summary { background: var(--accent-bg); color: var(--accent); }
.advanced-filters-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 340px;
}

/* Tabs mais sutis (só 2 visíveis em modo minimal) */
.inbox-minimal .tabs-compact { gap: var(--space-md); }
.inbox-minimal .tab-hidden { display: none !important; }

/* TABELA: col 1 = checkbox de select. Esconde Telefone (col 3),
   Fluxo (col 6), Atualizado (col 8). Mostra: select · Cliente · Setor ·
   Status · Última mensagem (5 colunas focadas). */
@media (min-width: 720px) {
  .inbox-minimal-table th:nth-child(3),
  .inbox-minimal-table td:nth-child(3),
  .inbox-minimal-table th:nth-child(6),
  .inbox-minimal-table td:nth-child(6),
  .inbox-minimal-table th:nth-child(8),
  .inbox-minimal-table td:nth-child(8) {
    display: none;
  }
}

/* Mobile: mostra só checkbox + Cliente + Última msg pra caber */
@media (max-width: 720px) {
  .inbox-minimal-table th:nth-child(3),
  .inbox-minimal-table td:nth-child(3),
  .inbox-minimal-table th:nth-child(4),
  .inbox-minimal-table td:nth-child(4),
  .inbox-minimal-table th:nth-child(5),
  .inbox-minimal-table td:nth-child(5),
  .inbox-minimal-table th:nth-child(6),
  .inbox-minimal-table td:nth-child(6),
  .inbox-minimal-table th:nth-child(8),
  .inbox-minimal-table td:nth-child(8) {
    display: none;
  }
}

/* ============================================================
   LAYOUT: TOPBAR SLIM + SIDEBAR LATERAL
   HTML criado em views/partials/_topbar.ejs (sessao paralela).
   JS de toggle em public/js/sidebar.js. CSS aqui no fim.
   3 estados via classe no <body>:
     (default)            desktop expandida (240px) / mobile fechada
     sidebar-collapsed    desktop minimizada (96px, so icones)
     sidebar-open         mobile drawer aberto com backdrop
   ============================================================ */

:root {
  /* Sidebar lateral MORREU (nav no topo). Manter 0 aqui — senão o bloco
     legado abaixo empurra .dash-wrap/.gph com margin-left: 240px e o
     painel vira uma coluna espremida à direita (print Eduardo 26/jul). */
  --sidebar-w: 0px;
  --sidebar-w-collapsed: 0px;
  --topbar-h: 56px;
}

/* Topbar slim ----------------------------------------------- */
.topbar.topbar-slim {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-md);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  /* Alto pra o dropdown "Mais" abrir ACIMA dos painéis do inbox (z 1000–1100);
     abaixo dos modais (9998+). Esta regra (.topbar.topbar-slim) vence a de
     components.css por ter 2 classes — então o valor real do header é este. */
  z-index: 9000;
}
.topbar.topbar-slim .brand {
  font-size: 18px;
  margin: 0;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.topbar.topbar-slim .brand-sub {
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 400;
  margin-left: 4px;
}
.topbar-hamburger {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--ink);
  font-size: 16px;
  transition: background 0.12s, border-color 0.12s;
}
.topbar-hamburger:hover {
  background: var(--accent-bg);
  border-color: var(--accent-soft);
}
.topbar-actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
.topbar.topbar-slim .topbar-actions a,
.topbar.topbar-slim .topbar-actions button {
  font-size: var(--text-sm);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.topbar.topbar-slim .topbar-logout:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* Sidebar --------------------------------------------------- */
.app-sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--paper);
  border-right: 1px solid var(--line);
  z-index: 50;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: width 0.18s ease, transform 0.2s ease;
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

/* Sidebar — Atlas Blue v2 (Z-API-inspired)
   - Active: barra esquerda azul + texto azul (não bloco)
   - Ícones SVG line (Lucide-style)
   - MixedCase 15px, generoso */
.sb-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 10px 12px;
}
.sb-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 16px 8px;
}

.sb-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
}
.sb-link:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.sb-link.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.sb-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.sb-link.active:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.sb-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.85;
}
.sb-link.active .sb-icon { opacity: 1; }
.sb-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sb-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-footer {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}
.sb-collapse {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--muted);
  transition: border-color 0.12s, color 0.12s, transform 0.18s;
}
.sb-collapse:hover {
  border-color: var(--accent-soft);
  color: var(--accent);
}

/* Backdrop mobile ------------------------------------------- */
.app-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.45);
  backdrop-filter: blur(2px);
  z-index: 49;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.app-sidebar-backdrop.open { opacity: 1; }
body.theme-fracta .app-sidebar-backdrop { background: rgba(0, 0, 0, 0.6); }

/* Body offset: empurra conteudo pra direita da sidebar ------ */
body {
  padding-top: var(--topbar-h);
}
body > main,
body > .container,
body > .dash-wrap,
body > .lp-wrap {
  margin-left: var(--sidebar-w);
  transition: margin-left 0.18s ease, margin-right 0.18s ease;
}

/* Estado collapsed (desktop) — só ícones, centralizados */
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sb-section-label,
body.sidebar-collapsed .sb-label { display: none; }
body.sidebar-collapsed .sb-link {
  justify-content: center;
  padding: 11px 8px;
  gap: 0;
}
body.sidebar-collapsed .sb-link.active::before {
  /* barra à esquerda menor no collapsed */
  width: 3px;
}
body.sidebar-collapsed .sb-nav { padding: 18px 6px 8px; gap: 14px; }
body.sidebar-collapsed .sb-footer .sb-collapse { transform: rotate(180deg); }
/* Sidebar fechada: margens simétricas + max-width: 100% pra ESTICAR o conteúdo
   (etiquetas/tags-wrap usa max-width: 100% sempre, é a referência do user).
   Sem o override, os wrappers ficam capados em 1100-1280px e sobra muito
   espaço lateral mesmo com a sidebar minimizada. */
body.sidebar-collapsed > main,
body.sidebar-collapsed > .container,
body.sidebar-collapsed > .dash-wrap,
body.sidebar-collapsed > .lp-wrap {
  margin-left: var(--sidebar-w-collapsed);
  margin-right: var(--sidebar-w-collapsed);
}
/* Override max-width quando colapsado — cobre todos os wrappers usados nas
   páginas do app (dash/op/pt/ret/ag/he/ia/audit-wrap + .container genérico).
   Especificidade dupla (body.sidebar-collapsed.sidebar-collapsed) pra beat
   o `max-width: 1300px !important` que fracta-design.css aplica em
   body.theme-fracta .dash-wrap (cascade ordem perdia a disputa). */
body.sidebar-collapsed.sidebar-collapsed .dash-wrap,
body.sidebar-collapsed.sidebar-collapsed .op-wrap,
body.sidebar-collapsed.sidebar-collapsed .pt-wrap,
body.sidebar-collapsed.sidebar-collapsed .ret-wrap,
body.sidebar-collapsed.sidebar-collapsed .ag-wrap,
body.sidebar-collapsed.sidebar-collapsed .he-wrap,
body.sidebar-collapsed.sidebar-collapsed .ia-wrap,
body.sidebar-collapsed.sidebar-collapsed .audit-wrap,
body.sidebar-collapsed.sidebar-collapsed .container,
body.sidebar-collapsed.sidebar-collapsed .tags-wrap {
  max-width: 100% !important;
}

/* Mobile: sidebar vira drawer off-canvas -------------------- */
@media (max-width: 768px) {
  body > main,
  body > .container,
  body > .dash-wrap,
  body > .lp-wrap {
    margin-left: 0;
  }
  .app-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w);
  }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  body.sidebar-collapsed .app-sidebar { width: var(--sidebar-w); }
}

/* Tema dark — overrides específicos da sidebar -------------- */
body.theme-fracta .topbar.topbar-slim {
  background: var(--paper);
  border-bottom-color: var(--line);
}
body.theme-fracta .app-sidebar {
  background: var(--paper);
  border-right-color: var(--line);
}
body.theme-fracta .sb-link { color: var(--ink); }
body.theme-fracta .sb-link:hover { background: var(--paper-2); }
body.theme-fracta .sb-link.active {
  background: var(--accent);
  color: #FFFFFF;
}
body.theme-fracta .sb-section-label { color: var(--muted); }
body.theme-fracta .topbar.topbar-slim .topbar-logout {
  color: var(--muted);
}

/* ============================================================
   LIMPEZA VISUAL (estilo Helena / minimalismo Azul Pernambuco) — 04/jun.
   Tira o "alarmante": linha não-lida e em-atendimento NÃO pintam de vermelho.
   Card branco; não-lida = nome em negrito + pontinho azul (cor de marca).
   Vermelho fica reservado SÓ pro SLA real (badge/≥3/10min, que continua).
   Acento único = --accent (Azul Pernambuco var(--brand-blue)), nunca âmbar/vermelho como decoração.
   ============================================================ */
tr.row-unread td { background: transparent; }
tr.row-unread td:first-child { border-left: 0; }
tr[data-status="in_progress"] td:first-child { box-shadow: none; }
.chat-row.row-unread td { background: transparent; }
/* pontinho de não-lida discreto na cor de marca (não vermelho) */
.chat-card .unread-dot,
tr.row-unread .unread-dot { background: var(--accent, var(--brand-blue)); }
/* hover do card: cinza neutro suave, não tom de alerta */
.chat-row:hover .chat-card { background: var(--paper-2, #f6f7f9); }

/* ============================================================
   TELA DA CONVERSA: grande e limpa estilo WhatsApp — 04/jun.
   Eduardo: "pra tela ficar grande... poucas coisas". Balões maiores e
   arejados + composer enxuto (some B/I/S/mono — Ctrl+B/I ainda funcionam
   por atalho) + área de digitação maior.
   ============================================================ */
.thread { padding: 24px 30px; gap: 12px; }
.msg { max-width: 72%; font-size: 15px; line-height: 1.46; padding: 9px 14px 7px; }
/* composer enxuto: tira a formatação e o separador (menos botão na cara) */
.composer-toolbar [data-fmt],
.composer-fmt-sep { display: none; }
/* área de digitação maior e fonte legível (#body por id vence o seletor base) */
#body,
.composer-v2 textarea,
.composer textarea { min-height: 56px; font-size: 15px; line-height: 1.4; }
/* balão do cliente sem barra/fundo vermelho (resíduo da camada de "saturação").
   .msg.msg-client tem 2 classes → preciso igualar a especificidade pra vencer.
   Branco limpo igual WhatsApp; urgência fica no inbox (pontinho/SLA), não no balão. */
.msg.msg-client { background: #FFFFFF; border-left: 1px solid var(--line); }

/* Contador de mensagens não lidas na linha do inbox (estilo ChatGuru "5") */
.unread-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--unread-badge, #25d366); color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1; margin-left: 6px;
}
body.theme-fracta .unread-count { background: var(--unread-badge, #25d366); color: #fff; }
/* OPERACIONAL, estágio 2 (Eduardo 24/jul): a conversa ABERTA e não respondida
   vira PONTO. Enquanto ninguém abriu, o badge com NÚMERO fica (o JS
   decide qual dos dois renderizar — nada de font-size:0 escondendo número). */
.unread-dot {
  display: inline-block; flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%; background: var(--unread-badge, #25d366);
  margin-left: 6px;
}

/* /prompt: separação "Em atividade" vs gaveta de arquivados (11/jun) */
.prompt-section-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, var(--muted)); margin: 4px 0 10px; }
.prompt-live {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  color: #15803D; background: rgba(21, 128, 61, .08);
  border: 1px solid rgba(21, 128, 61, .25); border-radius: 999px; padding: 2px 8px;
  vertical-align: 2px;
}
.prompt-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.prompt-archive { margin-top: 18px; }
.prompt-archive > summary {
  cursor: pointer; font-size: 13px; color: var(--muted, var(--muted));
  padding: 10px 0; border-top: 1px solid var(--line, var(--line)); user-select: none;
}
.prompt-archive > summary:hover { color: var(--ink, #111827); }
.prompt-archive[open] > summary { margin-bottom: 10px; }

/* ── Amaciar: micro-interações white-label suaves (transição + "squish" no toque
   + foco com glow azul-céu). Tira o "clicar num ferro" — dá um feel macio. ── */
button, .btn, a.btn, [role="button"], .nav-link, .conv-action-btn, .cw-tab, .cw-btn,
.cw-fase, .tag-chip, .tag-add, .pf-tab, .pf-view, .pf-dim,
.modal-close, .quick-reply-chip, .chip, .pill, summary {
  transition: background-color .17s ease, border-color .17s ease, color .17s ease,
    box-shadow .2s ease, transform .12s cubic-bezier(.34, 1.45, .64, 1), opacity .17s ease;
}
button:not(:disabled):active, .btn:not(:disabled):active, a.btn:active, [role="button"]:active,
.nav-link:active, .conv-action-btn:active, .cw-tab:active, .cw-btn:not([disabled]):active,
.tag-chip:active, .tag-add:active, .pf-view:active, .pf-dim:active, .modal-close:active {
  transform: scale(.955);
}
input, textarea, select, [contenteditable="true"] {
  transition: border-color .17s ease, box-shadow .2s ease, background-color .17s ease;
}
input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 160, 216, .18);
  border-color: var(--accent, #2BA0D8);
}
/* linhas/cards clicáveis: hover macio em vez de seco */
.chat-row, .cw-card, .conv-card { transition: background-color .17s ease, box-shadow .18s ease; }

/* ═══════════════════════════════════════════════════════════════════════
   KANBAN REFRESH (30/jun) — balões WhatsApp Business, white-label AZUL/VERDE,
   compactos e uniformes. Referência: Kommo (card limpo + chip verde + ações).
   Bloco ÚNICO, escopado em .kanban / .metric-cards.
   ═══════════════════════════════════════════════════════════════════════ */
.kanban, .metric-cards { --k-blue:#2BA0D8; --k-blue-deep:#1C86BE; --k-blue-soft:#E9F5FB; --k-green:#1FAA5C; --k-green-deep:#12814A; --k-green-soft:#E4F6EC; --k-teal:#0E9AA3; --k-teal-soft:#E2F4F5; --k-slate:#94A3B8; --k-ink:#1F2A3A; --k-muted:#6B7686; --k-line:#E9EEF5; }

.metric-cards .metric-card { border-radius:16px; border:1px solid var(--k-line); box-shadow:0 1px 2px rgba(20,40,80,.03); }
.metric-card.metric-blue .metric-value { color:var(--k-blue-deep); }
.metric-card.metric-amber .metric-value { color:var(--k-teal); }
.metric-card[data-status="won"] .metric-value, .metric-card.metric-green .metric-value { color:var(--k-green-deep); }

.kanban .kcol { border:1px solid var(--k-line); border-radius:16px; background:#fbfcfe; box-shadow:0 1px 2px rgba(20,40,80,.03); overflow:hidden; }
.kanban .kcol-head { background:#fff !important; border-bottom:1px solid #eef2f7; border-top:3px solid var(--k-blue); padding:13px 16px; align-items:center; }
/* Caixa ALTA sempre: os rótulos vêm do backend com caixas diferentes ("GANHO" x
   "Descartado") e a coluna denunciava a falta de sistema. Uniformiza aqui, sem
   tocar no dado — auditoria de 25/jul. */
.kanban .kcol-title { font-size:13px !important; font-weight:700; color:var(--k-ink) !important; text-transform:uppercase; letter-spacing:.045em; }
.kanban .kcol-count { background:var(--k-blue-soft) !important; color:var(--k-blue-deep) !important; border:0 !important; font-weight:800; font-size:12px; padding:2px 9px; }
.kanban .kcol-body { padding:11px; gap:8px; background:linear-gradient(180deg,#fbfcfe,#f5f9fc); }
.kanban .kcol-body.drag-over { background:var(--k-blue-soft); }
.kanban .kcol[data-col="qualified"] .kcol-head { border-top-color:var(--k-teal); }
.kanban .kcol[data-col="qualified"] .kcol-count { background:var(--k-teal-soft) !important; color:#0a7a82 !important; }
.kanban .kcol[data-col="active_client"] .kcol-head { border-top-color:var(--k-blue-deep); }
.kanban .kcol[data-col="won"] .kcol-head { border-top-color:var(--k-green); }
.kanban .kcol[data-col="won"] .kcol-count { background:var(--k-green-soft) !important; color:var(--k-green-deep) !important; }
.kanban .kcol[data-col="discarded"] .kcol-head { border-top-color:var(--k-slate); }
.kanban .kcol[data-col="discarded"] .kcol-count { background:#eef1f5 !important; color:#64748b !important; }
/* LIGAR PELO VOIP (Eduardo, 25/ago) — a única coluna da cadência que NÃO é do
   robô: o 1º toque é ligação, e quem liga é gente. Vermelho porque é a única
   coluna que cobra ação humana AGORA; o resto do funil é o verde da casa.
   Casa pelo rótulo (não por id) porque a coluna nasce igual nos dois comerciais
   e o board já expõe `data-col-label`. */
.kanban .kcol[data-col-label="Ligar pelo VoIP · D+1"] .kcol-head { border-top-color: var(--danger, #D92D20); }
.kanban .kcol[data-col-label="Ligar pelo VoIP · D+1"] .kcol-title { color: var(--danger-deep, #912018) !important; }
.kanban .kcol[data-col-label="Ligar pelo VoIP · D+1"] .kcol-count { background: #FEE4E2 !important; color: #912018 !important; }

/* BALÃO: min-height uniforme (sem clipar), coluna flex, ações no rodapé */
.kanban .kcard { background:#fff; border:1px solid #eaeef4; border-left:3px solid var(--k-blue); border-radius:14px; padding:14px 16px; height:136px; flex:0 0 auto; overflow:hidden; position:relative; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(20,40,80,.04),0 6px 16px rgba(20,40,80,.03); transition:box-shadow .16s ease, transform .08s ease, border-color .16s ease; }
.kanban .kcard:hover { box-shadow:0 2px 4px rgba(20,40,80,.06),0 14px 30px rgba(20,40,80,.10); transform:translateY(-2px); border-color:#dbe3ee; }
.kanban .kcol[data-col="qualified"] .kcard { border-left-color:var(--k-teal); }
.kanban .kcol[data-col="active_client"] .kcard { border-left-color:var(--k-blue-deep); }
.kanban .kcol[data-col="won"] .kcard { border-left-color:var(--k-green); }
.kanban .kcol[data-col="discarded"] .kcard { border-left-color:var(--k-slate); opacity:.74; }
.kanban .kcard.urgent { box-shadow:0 0 0 1.5px var(--k-blue) inset, 0 8px 20px rgba(43,160,216,.12); }

.kanban .kcard-row { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.kanban .kcard-avatar { width:40px; height:40px; border-radius:50%; font-weight:700; font-size:12px; flex:0 0 auto; display:grid; place-items:center; }
.kanban .kcard-main { min-width:0; flex:1; }
.kanban .kcard-name { font-size:15px; font-weight:700; color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kanban .kcard-attendant { font-size:12px; color:var(--muted); margin-top:1px; }
.kanban .kcard-time { font-size:12px; color:var(--muted); font-weight:600; flex:0 0 auto; align-self:flex-start; }
/* A FASE MORA NO LEX (03/set): link do processo, e o aviso de divergência. */
.kanban .kcard-lex { display:inline-block; margin:4px 0 0; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--k-blue-deep, #1d4ed8); text-decoration:none; border:1px solid currentColor; border-radius:6px; padding:1px 7px; }
.kanban .kcard-lex:hover, .kanban .kcard-lex:focus-visible { background:var(--k-blue-soft, #e8f0fe); outline:none; }
.kanban .kcard-diverg { display:inline-block; margin:4px 0 0; font-size:11px; font-weight:600; color:#92400E; background:#FEF3C7; border-radius:6px; padding:2px 7px; }
.kanban .kcard:not([draggable="true"]) { cursor:default; }
/* Cabeçalho da esteira da Triagem — os 4 números do Lex. */
.pf-triagem-resumo { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; margin:0 0 10px; font-size:13px; color:var(--muted); }
.pf-triagem-resumo .pf-res-item b { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:800; margin-right:2px; }
.pf-triagem-resumo .pf-res-alerta b { color:var(--danger, #D92D20); }
.pf-triagem-resumo .pf-res-mute { opacity:.7; }
/* Motivo da pendência no popup do card (vocabulário fechado, uma cor cada). */
.kcard-motivos { display:flex; flex-wrap:wrap; gap:4px; padding:6px 8px 8px; border-bottom:1px solid var(--line, #e2e7ef); }
.kcard-motivo { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; border-radius:5px; padding:3px 7px; cursor:pointer; border:1.5px solid var(--mc); background:transparent; color:var(--mc); }
.kcard-motivo.on { background:var(--mc); color:#fff; }
.kcard-motivo:hover, .kcard-motivo:focus-visible { filter:brightness(.92); outline:none; }
.kanban .kcard-time.urgent { color:var(--k-blue-deep); }
.kanban .kcard-flag { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:1px 5px; border-radius:5px; margin-right:4px; background:var(--k-blue-soft); color:var(--k-blue-deep); }
.kanban .kcard-last { font-size:12.5px; color:var(--k-muted); margin-top:6px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 0 auto; }
.kanban .kcard-pills { display:flex; flex-wrap:nowrap; overflow:hidden; gap:5px; margin-top:6px; flex:0 0 auto; }
/* Medidas do card alargado (24/ago) + o anti-corte do chip (b899a17): encolhe
   com reticências (flex:0 1 auto + min-width:0) em vez de ser cortado no meio da
   palavra pela borda do card — era o que fazia virar "comercia"/"ia pausa". As
   duas coisas convivem: a main mandou no TAMANHO, o fix manda no que acontece
   quando não cabe. */
.kanban .kcard-pill { font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px; border:0; white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.kanban .kcard-pill-flow { background:var(--k-green-soft); color:var(--k-green-deep); }
.kanban .kcard-pill-sector { background:#eef1f6; color:#5a6a86; }
.kanban .kcard-pill-locked { background:#fdeeee; color:#b4534f; }
.kanban .kcard-pill-paused { background:#fff3e6; color:#b5791f; }
/* Super qualificado (afastado pelo INSS) = ROXO; Qualificado = AZUL CLARO
   (cores pedidas pelo Eduardo 22/jul). Sólidas pra saltar dos outros pills. */
.kanban .kcard-pill-superqual { background:#7C3AED; color:#fff; }
.kanban .kcard-pill-qual { background:#60A5FA; color:#fff; }
.kanban .kcard-regua .rg-pip.on { background:var(--k-green); }
.kanban .kcard-regua.ok { color:var(--k-green-deep); }
.kanban .kcard-actions { position:absolute; right:9px; bottom:8px; display:flex; gap:6px; margin:0; padding:0 0 0 22px; opacity:0; background:linear-gradient(90deg,transparent,#fff 45%); transition:opacity .14s; }
.kanban .kcard:hover .kcard-actions { opacity:1; }
.kanban .kcard-action-btn { width:27px; height:27px; padding:0; border:0; background:none; color:var(--muted); border-radius:7px; display:grid; place-items:center; }
.kanban .kcard-action-btn:hover { background:var(--k-green-soft); color:var(--k-green-deep); }

/* ── KPIs do topo: fio de cor por status, número grande colorido (sem vermelho) ── */
.metric-cards { gap:10px; }
.metric-cards .metric-card { position:relative; overflow:hidden; padding:15px 16px 13px; background:#fff; border-radius:16px; border:1px solid var(--k-line); box-shadow:0 1px 2px rgba(20,40,80,.03); transition:box-shadow .16s, transform .08s; }
.metric-cards .metric-card:hover { box-shadow:0 8px 22px rgba(20,40,80,.08); transform:translateY(-1px); }
.metric-cards .metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--k-slate); }
.metric-card[data-status="all"]::before { background:var(--k-ink); }
.metric-card[data-status="in_progress"]::before { background:var(--k-blue); }
.metric-card[data-status="qualified"]::before { background:var(--k-teal); }
.metric-card[data-status="active_client"]::before { background:var(--k-blue-deep); }
.metric-card[data-status="won"]::before { background:var(--k-green); }
.metric-card[data-status="discarded"]::before { background:var(--k-slate); }
.metric-cards .metric-label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--k-muted); }
.metric-cards .metric-value { font-size:30px; line-height:1.05; font-weight:800; letter-spacing:-.02em; color:var(--k-ink); margin-top:3px; }
.metric-card[data-status="in_progress"] .metric-value { color:var(--k-blue-deep) !important; }
.metric-card[data-status="qualified"] .metric-value { color:#0a7a82 !important; }
.metric-card[data-status="active_client"] .metric-value { color:var(--k-blue-deep) !important; }
.metric-card[data-status="won"] .metric-value { color:var(--k-green-deep) !important; }
.metric-card[data-status="discarded"] .metric-value { color:var(--k-slate) !important; }

/* ── Filtros: segmented control limpo (trilho + pílula branca ativa) — sem "bingo" ── */
.kanban-toolbar { gap:10px; align-items:center; margin:8px 0 16px; flex-wrap:wrap; }
.kanban-toolbar .filter-pills:first-child { gap:2px; background:#eef2f8; border-radius:999px; padding:3px; }
#phone-pills .filter-pill { border:0 !important; background:transparent !important; color:var(--k-muted) !important; border-radius:999px !important; padding:6px 14px !important; font-weight:600; box-shadow:none !important; }
#phone-pills .filter-pill:hover { color:var(--k-ink) !important; }
#phone-pills .filter-pill.active { background:#fff !important; color:var(--k-blue-deep) !important; box-shadow:0 1px 3px rgba(20,40,80,.12) !important; }
.kanban-toolbar select.filter-pill { border:1px solid var(--k-line) !important; background:#fff !important; border-radius:999px !important; color:var(--k-ink) !important; padding:7px 14px !important; font-weight:600; }
.kanban-toolbar select.filter-pill:hover { border-color:var(--k-blue) !important; }

/* Remove o banner "Atenção necessária" do kanban (pedido 30/jun) */
#attention-banner, .attention-banner { display: none !important; }

/* ═══ COWORK REFRESH (30/jun) — alinha com o kanban: cards macios, abas em
       segmented control, badge tingido. Escopado em .cw-wrap (vence o <style>
       inline do cowork.ejs sem precisar editá-lo). ═══ */
.cw-wrap .cw-head h1 { letter-spacing:-.01em; }
/* abas de responsável → segmented control (trilho + pílula branca ativa, roxo) */
.cw-wrap .cw-tabs { gap:2px; background:#eef2f8; border-radius:999px; padding:3px; display:inline-flex; flex-wrap:wrap; }
.cw-wrap .cw-tab { border:0; background:transparent; color:#6B7686; border-radius:999px; padding:7px 15px; font-weight:600; box-shadow:none; }
.cw-wrap .cw-tab:hover { border:0; color:#1f2a3a; background:rgba(255,255,255,.5); }
.cw-wrap .cw-tab.active { background:#fff; color:var(--accent, #2BA0D8); box-shadow:0 1px 3px rgba(20,40,80,.12); }
.cw-wrap .cw-tab .n { background:rgba(20,40,80,.07); color:inherit; font-weight:800; }
.cw-wrap .cw-tab.active .n { background:var(--accent-bg, #E4F4FC); color:var(--accent-deep, #1C86BE); }
/* BALÃO de fase: BRANCO, cantos macios, profundidade, trilho de cor (--cw-c) à esquerda */
/* Refino Helena "sem frescura" (03/jul): o setor é UM card branco; as fases
   são LINHAS separadas por fio. Morre o balão solto com trilho colorido "("
   — cor mora só no ponto e no número. Texto = tinta. */
.cw-wrap .cw-setor-body { background:#fff; border:1px solid var(--line, #e6eaf2); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(20,40,80,.04); }
.cw-wrap .cw-fase { background:transparent; border:0; border-radius:0; padding:13px 16px; box-shadow:none; transition:background .12s ease; }
.cw-wrap .cw-grp + .cw-grp .cw-fase { border-top:1px solid var(--line, #eef1f6); }
.cw-wrap .cw-fase:hover { background:var(--paper-2, #F5F7FA); box-shadow:none; transform:none; }
.cw-wrap .cw-grp { margin-bottom:0; }
.cw-wrap .cw-dot { width:10px; height:10px; box-shadow:none; }
.cw-wrap .cw-fase .lbl { font-size:14.5px; font-weight:600; letter-spacing:-.005em; color:var(--ink, #1c2433) !important; }
.cw-wrap .cw-fase .n { background:var(--paper-2, #F1F3F7); color:var(--cw-c, #64748B); font-weight:700; border-radius:999px; padding:4px 12px; min-width:32px; }
.cw-wrap .cw-chev { color:#c0c7d4; }

/* Cowork: subtítulo vira citação (aspas curvas + itálico) */
.cw-wrap .cw-head p { font-style:italic; color:#7a8496; }
.cw-wrap .cw-head p::before { content:'\201C'; }
.cw-wrap .cw-head p::after { content:'\201D'; }
/* Cards do modal de fase → balões macios + CTA roxa (tema do cowork) */
.cw-fmodal-card { border-radius:18px; }
.cw-fmodal-body .cw-card { border:1px solid #eaeef4; border-radius:14px; padding:12px 14px; box-shadow:0 1px 2px rgba(20,40,80,.04), 0 6px 16px rgba(20,40,80,.03); transition:box-shadow .16s ease, transform .08s ease, border-color .16s ease; }
.cw-fmodal-body .cw-card:hover { box-shadow:0 12px 28px rgba(20,40,80,.10); transform:translateY(-1px); border-color:#dbe3ee; }
.cw-fmodal-body .cw-av { box-shadow:none; }
.cw-fmodal-body .cw-btn.go:not([disabled]), .cw-fmodal-body .cw-btn.link:not([disabled]) { background:var(--accent-deep, #1C86BE); }
.cw-fmodal-body .cw-btn.go:not([disabled]):hover, .cw-fmodal-body .cw-btn.link:not([disabled]):hover { background:var(--accent, #2BA0D8); }
.cw-fmodal-body .cw-btn.fase:hover:not([disabled]), .cw-fmodal-body .cw-btn.resp:hover:not([disabled]) { border-color:var(--accent, #2BA0D8); color:var(--accent, #2BA0D8); }

/* CTAs do modal de fase: MESMA largura (texto centralizado) → botões e ícones
   alinhados em todas as linhas, não importa o tamanho da frase. */
.cw-fmodal-body .cw-btn.go, .cw-fmodal-body .cw-btn.link { min-width:126px; justify-content:center; }

/* Botão "Ver fluxo" no header do cowork (injetado por cowork.js) */
.cw-wrap .cw-head { position: relative; }
.cw-wrap .cw-fluxo-link { position:absolute; top:6px; right:0; display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--muted, #5c6470); text-decoration:none; background:transparent; border:1px solid var(--line, #e4e7ec); border-radius:999px; padding:7px 14px; transition:color .14s, border-color .14s; }
.cw-wrap .cw-fluxo-link:hover { color:var(--accent-deep, #1C86BE); border-color:var(--accent, #2BA0D8); }

/* ─── Refino WhatsApp iOS 2025 na lista do inbox (Eduardo 22/jul, benchmark
   Figma "WhatsApp Screens 2025"). Só CRAFT — mantém a paleta Deferi (nada do
   verde do WhatsApp fora do que já existe no não-lido). Escopado em #inbox-table
   pra não tocar outras listas. ─────────────────────────────────────────────── */
#inbox-table .chat-card {
  gap: 13px;
  padding: 11px 16px 11px 4px;   /* padding uniforme — sem isto o card ficava torto */
  align-items: center;            /* avatar centralizado com o bloco de texto */
}
/* O checkbox de seleção tinha padding-top:18px (ancorado no TOPO) — com o avatar
   centralizado ele ficava ACIMA do avatar e a linha parecia torta (Eduardo
   22/jul). Centraliza o checkbox junto. */
#inbox-table td.cell-select { vertical-align: middle; padding-top: 0; padding-bottom: 0; }
#inbox-table .chat-card .unread-slot { padding-top: 0; }
/* SÓ o avatar (foto/iniciais) cresce — NUNCA `> *`, senão o seletor com #id
   arrastava o selo de canal (.av-channel) pra 52px e ele tampava as iniciais
   (Eduardo 22/jul: "tem certeza que é assim?"). */
#inbox-table .chat-card-av .avatar,
#inbox-table .chat-card-av .avatar-initials,
#inbox-table .chat-card-av .avatar-photo,
#inbox-table .chat-card-av img {
  width: 52px; height: 52px; font-size: 19px;   /* iOS: avatar redondo maior */
}
/* Container FIXO no tamanho do avatar — sem isto o selo Deferi ancorava torto e
   o -4px o fazia estourar pra baixo, cruzando a divisória (Eduardo 22/jul: "os
   símbolos azuis tão todos alinhados?"). Selo no canto inferior direito, dentro. */
#inbox-table .chat-card-av { width: 52px; height: 52px; flex: 0 0 52px; }
#inbox-table .av-channel { right: 1px; bottom: 1px; width: 16px; height: 16px; }
#inbox-table .av-channel svg { width: 16px; height: 16px; }
#inbox-table .chat-card-main { gap: 4px; }
/* Sem divisória própria: cada conversa já é um card separado (a linha entre
   cards vem daí). A minha ::after somava uma SEGUNDA linha e ficava duplicado
   (Eduardo 22/jul: "tá quebrando ainda"). */
#inbox-table .chat-card-name { font-size: 16.5px; letter-spacing: -0.012em; }
#inbox-table .chat-card-name strong { font-weight: 600; }
#inbox-table .chat-row.row-unread .chat-card-name strong { font-weight: 700; }
#inbox-table .chat-card-preview { font-size: 14.5px; line-height: 1.35; }
#inbox-table .chat-card-time { font-size: 12.5px; }
/* (badge de não-lido .unread-count já é verde/redondo — não repete aqui) */

/* ── Gravando áudio: a barra do WhatsApp ────────────────────────────────────
   O campo de texto dá lugar a lixeira + ponto pulsando + tempo + onda + parar.
   Antes: um "Gravando… clica de novo pra parar" em itálico no canto (Eduardo
   25/jul: "não parece nem 1 pouco de wha"). */
.rec-bar { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 12px; border-radius: 10px; background: var(--bg-soft, #f4f2ef); }
.rec-cancel, .rec-stop { display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; transition: background .15s, color .15s; }
.rec-cancel { color: var(--muted, #8a8681); }
.rec-cancel svg { width: 18px; height: 18px; }
.rec-cancel:hover { color: #d64545; background: rgba(214, 69, 69, .1); }
.rec-stop { color: #fff; background: #00A884; }
.rec-stop svg { width: 16px; height: 16px; }
.rec-stop:hover { background: #019277; }

.rec-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: #e0403f;
  animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.rec-time { flex-shrink: 0; font-size: 14px; font-variant-numeric: tabular-nums;
  color: var(--text, #2c2926); min-width: 38px; }

/* Onda: barrinhas com alturas e atrasos distintos — dá vida sem medir áudio. */
.rec-wave { display: flex; align-items: center; justify-content: space-between;
  gap: 3px; flex: 1; height: 22px; overflow: hidden; }
.rec-wave i { flex: 1; max-width: 3px; border-radius: 2px; background: currentColor;
  color: var(--muted, #b3aea7); opacity: .55;
  animation: rec-bar 1.1s ease-in-out infinite; }
.rec-wave i:nth-child(3n)   { animation-delay: .15s; animation-duration: .9s }
.rec-wave i:nth-child(3n+1) { animation-delay: .35s; animation-duration: 1.3s }
.rec-wave i:nth-child(4n)   { animation-delay: .05s; animation-duration: 1.5s }
@keyframes rec-bar { 0%, 100% { height: 20% } 50% { height: 90% } }

@media (prefers-reduced-motion: reduce) {
  .rec-dot, .rec-wave i { animation: none }
  .rec-wave i { height: 45% }
}

/* Ação que saiu da barra mas continua no DOM: o menu "⋯" dispara .click() nela.
   Esconder em vez de remover mantém todos os listeners existentes intactos. */
.conv-action-oculta { display: none !important; }

/* ═══ CARD EM ABERTO (28/jul) ═══════════════════════════════════════════════
   Eduardo: "os que tão em aberto, ao invés de deixar só número azul, deixa o
   card todo pra vermos que tá aberto; só fica em branco quando responderem ou
   finalizarem."

   Cuidado deliberado: em 04/jun ele mandou TIRAR o fundo vermelho da linha
   não-lida ("tira o alarmante"). Então isto NÃO é o alarme de volta — é o azul
   da marca em tom de ensaio (~4% de tinta) mais uma barra fina à esquerda.
   Marca sem gritar. Vermelho segue reservado só pro SLA real.

   Some sozinho: `row-aberta` sai quando alguém responde (last_direction vira
   outbound) ou quando a conversa é finalizada (won/lost/discarded). */
/* Reforçado em 28/jul a pedido do Eduardo ("a cor quando a conversa tá em aberto
   poderia ser mais forte"): 4% → 9% de tinta e a barra de 3px → 4px. Continua
   sendo o AZUL da marca, não o vermelho que ele mandou tirar em 04/jun — a
   regra de "nada alarmante" segue de pé; o que mudou foi o peso do azul. */
/* 29/jul: `row-aberta` virou `row-esperando` e a tinta trocou do acento pro
   AMARELO do estado (Eduardo, vendo em prod: "queria que ficasse amarelo o
   card todo, nao so o nome" — o card fica da cor do badge). A régua é a MESMA
   do badge Esperando (estado derivado, services/estado-conversa.js): cliente
   falou por último, em QUALQUER status — inclusive finalizada. Segue não
   sendo alarme (regra de 04/jun): amarelo tom ensaio, não vermelho. */
.chat-row.row-esperando .chat-card {
  background: color-mix(in srgb, #F0C400 13%, var(--paper, #fff));
  box-shadow: inset 4px 0 0 #E3C34A;
}
.chat-row.row-esperando:hover .chat-card {
  background: color-mix(in srgb, #F0C400 19%, var(--paper, #fff));
}
/* Super qualificado continua mandando na barra da esquerda: a etiqueta roxa
   dele é mais específica que "tem mensagem esperando". */
.chat-row.row-esperando.row-superqual .chat-card { box-shadow: inset 4px 0 0 #7C3AED; }
/* Descartada nunca acende, mesmo com inbound pendente. */
.chat-row.row-discarded .chat-card { background: var(--paper, #fff); box-shadow: none; }

body.theme-fracta .chat-row.row-esperando .chat-card {
  background: color-mix(in srgb, #E3C34A 16%, var(--paper, #131820));
}
body.theme-fracta .chat-row.row-esperando:hover .chat-card {
  background: color-mix(in srgb, #E3C34A 21%, var(--paper, #131820));
}

/* ─── Régua visível na tela (28/jul): todo número tem um ⓘ com a lógica ────
   Componente único: <span class="regua-i" tabindex="0" data-regua="texto">i</span>
   O "i" é tipográfico (serifa itálica num círculo), sem cor de alerta — é
   explicação, não aviso. Tooltip no hover E no clique (clique foca o span).
   Texto vem LITERAL de docs/mapa-logicas-28jul2026.md — não reescrever aqui. */
.regua-i {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: italic 600 9px/1 Georgia, 'Times New Roman', serif;
  color: var(--muted, #8a93a2);
  opacity: .5;
  cursor: help;
  vertical-align: middle;
  user-select: none;
  flex: none;
  transition: opacity .12s;
}
.regua-i:hover, .regua-i:focus { opacity: 1; outline: none; }
.regua-i::after {
  content: attr(data-regua);
  position: absolute;
  top: calc(100% + 8px);
  left: -6px; /* cresce pra direita — centrado estourava a borda esquerda */
  z-index: 9999;
  width: max-content;
  max-width: 280px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, .96);
  color: #fff;
  font: 400 12px/1.5 Inter, system-ui, sans-serif;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: pre-line;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}
.regua-i:hover::after, .regua-i:focus::after { opacity: 1; }
/* Perto da borda direita (contador de coluna, valor à direita): o balão cresce
   pra esquerda em vez de estourar a tela. */
.regua-i[data-pos="left"]::after { left: auto; right: -4px; }
/* Dentro de pill/botão colorido o "i" herda a tinta do pai e continua legível. */
button .regua-i, .bp .regua-i, a .regua-i { color: inherit; }
/* Elemento de contagem vazio ao lado (ex.: meta de busca sem busca) esconde o ⓘ. */
.regua-hide-when-empty:empty + .regua-i { display: none; }
body.theme-fracta .regua-i::after { background: #1c2430; color: #EAF1F9; }

/* ─── CARD ESPERANDO no Kanban do CRM (25/ago) ────────────────────────────────
   Eduardo, vendo o painel: "quando alguém responder no CRM deixa ele em
   laranja, feito o inbox. só sai, quando eu respondo".

   É a MESMA tinta e a MESMA régua da linha do inbox (.chat-row.row-esperando,
   linha 5975): âmbar #F0C400 a 13% sobre o papel, barra de 4px na esquerda. Um
   amarelo novo aqui faria a mesma dívida ter duas cores em duas telas — e o
   card do kanban e a linha do inbox mostram a MESMA conversa.

   A barra da esquerda vence a cor do funil (.kcol[data-col=…] pinta border-left
   por coluna): quando o cliente está esperando, o que importa é a dívida, não
   em que fase o card está. Especificidade resolvida com `.kanban .kcard…` pra
   empatar com a regra da coluna e ganhar no desempate por ordem.

   Não é alarme (regra de 04/jun): âmbar tom ensaio, nunca vermelho. E some
   sozinho — a classe sai no primeiro outbound, sem ninguém marcar nada. */
.kcard.kcard-esperando,
.kanban .kcard.kcard-esperando {
  background: color-mix(in srgb, #F0C400 13%, var(--paper, #fff));
  border-left-color: #E3C34A;
}
.kcard.kcard-esperando:hover,
.kanban .kcard.kcard-esperando:hover {
  background: color-mix(in srgb, #F0C400 19%, var(--paper, #fff));
}
/* Descartada nunca acende — o JS já não põe a classe; isto é o cinto. */
.kanban .kcol[data-col="discarded"] .kcard.kcard-esperando {
  background: var(--paper, #fff);
  border-left-color: var(--k-slate);
}

body.theme-fracta .kcard.kcard-esperando,
body.theme-fracta .kanban .kcard.kcard-esperando {
  background: color-mix(in srgb, #E3C34A 16%, var(--paper, #131820));
}
body.theme-fracta .kcard.kcard-esperando:hover,
body.theme-fracta .kanban .kcard.kcard-esperando:hover {
  background: color-mix(in srgb, #E3C34A 21%, var(--paper, #131820));
}