/* 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');

/* 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: #CDD2DA;
  --muted: #5C6470;          /* 7.1:1 sobre #FFFFFF — AAA */
  --muted-soft: #8A93A4;     /* placeholders, hints */

  /* Azul — accent único */
  --ink: #0F1419;            /* quase preto, levemente quente */
  --ink-soft: #2A2F38;
  --accent: var(--brand-blue); /* Azul Pernambuco #2BA0D8 — acento ÚNICO da marca */
  --accent-soft: #E4F4FC;    /* hover/selecionado bg */
  --accent-bg: #E4F4FC;      /* alias compat */
  --accent-deep: #1C86BE;    /* hover de CTA — Azul Pernambuco profundo */

  /* 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: var(--signature);                 /* terracota da marca (sem âmbar) */
  --warn-soft: var(--signature-soft);
  --ok: var(--success);

  /* Cores da MARCA — fonte única (antes hardcoded ~106×). */
  --signature: #C8633A;       /* terracota — assinatura do escritório */
  --signature-soft: rgba(200, 99, 58, 0.12);
  --brand-blue: #2BA0D8;      /* Azul Pernambuco — primário da marca */

  --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 {
  --bg: #0B0F17;             /* navy escuro com tom azul (Z-API base) */
  --paper: #161B26;          /* cards */
  --paper-2: #1F2632;        /* insets, hover row */
  --line: #293040;
  --line-strong: #3A4256;
  --muted: #7C8497;          /* text secundário */
  --muted-soft: #5A6273;

  --ink: #E8ECF3;            /* text forte */
  --ink-soft: #C8CDD7;
  --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;

  --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: var(--signature);                 /* terracota da marca (sem âmbar) */
  --warn-soft: var(--signature-soft);
  --ok: var(--success);

  /* Marca — mesma cor; ajustar aqui se quiser realçar no escuro. */
  --signature: #C8633A;
  --signature-soft: rgba(200, 99, 58, 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);
  color: #FFFFFF;
  border-color: var(--accent);
}
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;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

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

/* Logo do escritório como marca d'água centralizada ATRÁS do card de login */
.login-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 88vw);
  height: min(560px, 88vw);
  transform: translate(-50%, -50%);
  background-image: url("/brand-assets/logo-mark.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.10;
  pointer-events: none;
  z-index: -1;
=======
}

/* Marca d'água da logo — discreta, atrás do card (estilo editorial/MUJI).
   Centralizada e extravasando simétrico pros 4 lados. CSS puro. */
.login-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(420px, 84vw, 640px);
  aspect-ratio: 1 / 1;
  /* mask = usa só a silhueta do SVG; pinto com a cor da marca (independe do
     fill=currentColor do arquivo, que não funciona em background-image). */
  background-color: var(--accent);
  -webkit-mask: url('/brand-assets/logo-mark-mono.svg') center / contain no-repeat;
  mask: url('/brand-assets/logo-mark-mono.svg') center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
>>>>>>> ac5bb50231639db6d800e62de115d5f13ac5be3b
}

.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;
}
.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);
}
.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.
   ============================================================ */
.inbox-cards thead th:not(.col-select) { display: none; }
.inbox-cards thead th.col-select { padding: 10px 14px; }
.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; }
.chat-row.row-unread .chat-card-time { color: #25d366; font-weight: 600; }   /* 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; }
.sla-badge.sla-warn { color: var(--warn); background: var(--warn-soft); }   /* médio (3min–2h) — terracota suave */
.sla-badge.sla-late { color: #fff; background: #C0392B; }                    /* crítico (≥2h) — vermelho sólido, sem pulso */

/* 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 { font-style: italic; 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; }
/* 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;
}
.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;
}
.sp-section h4 {
  font-family: var(--font-body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  margin: 0;
  font-style: italic;
  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: 10px; 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;
  /* Fundo estilo WhatsApp — papel de parede verde-bege com padrão sutil.
     Combina identidade Thially (roxo) + WhatsApp (verde) com textura papel craft. */
  /* Fundo WhatsApp-Mac: bege liso com textura de pontinhos sutil. */
  background: radial-gradient(rgba(11, 20, 26, 0.04) 1px, transparent 1px) #efeae2;
  background-size: 24px 24px;
  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: 6px 9px 8px;
  border-radius: 7.5px;
  font-size: 14px;
  line-height: 1.4;
  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 tipo WhatsApp, alinhada à esquerda */
.msg-client {
  background: #FFFFFF;
  align-self: flex-start;
  border-top-left-radius: 0;
  color: #111b21;
  box-shadow: 0 1px .5px rgba(11, 20, 26, 0.13);
}
.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) — WhatsApp não diferencia: todo balão de saída é verde.
   Quem mandou (IA/atendente) fica na etiqueta da meta, não na cor. */
.msg-ai,
.msg-human {
  background: #d9fdd3;
  color: #111b21;
  align-self: flex-end;
  border-top-right-radius: 0;
  box-shadow: 0 1px .5px rgba(11, 20, 26, 0.13);
}
.msg-ai::after,
.msg-human::after {
  content: '';
  position: absolute;
  right: -6px; top: 0;
  width: 8px; height: 9px;
  background: #d9fdd3;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* 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: rgba(11, 20, 26, 0.45); }   /* hora WhatsApp — escura na bolha verde (era branca/invisível) */

/* ---- 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; }
/* Link "Baixar" sob a mídia — proxy /api/media/download (cross-origin não baixa direto) */
.msg-media-dl { display: inline-block; font-size: 12px; color: var(--accent); text-decoration: none; margin: 2px 0 4px; opacity: .85; }
.msg-media-dl:hover { text-decoration: underline; opacity: 1; }
.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; }

.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 {
  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;
  grid-auto-columns: minmax(300px, 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: linear-gradient(135deg, #D98A5E, var(--signature));
  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 {
    grid-auto-columns: minmax(260px, 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: 9px;
  }
  .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; }

  .topbar {
    padding: 12px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

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

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
  }
  nav 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: 280px;
    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: var(--bg);
}
/* Gradientes de ambiente numa camada fixa COMPOSTA (GPU) — mesmo visual.
   PERF 11/jul: background-attachment:fixed no body repintava a viewport
   INTEIRA a cada frame de scroll (o "app lento", pior no macOS). A camada
   position:fixed própria não repinta nunca. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  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);
  transform: translateZ(0);
}

/* Topbar: borda mais sutil + glass effect
   PERF 11/jul: blur 14→8 e sem saturate() — o backdrop-filter recalcula a
   cada frame de scroll; metade do raio = fração do custo, visual quase igual. */
.topbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  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 mais discreta */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.15); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.3); background-clip: padding-box; border: 2px solid transparent; }


/* ═════════════════════════════════════════════════════════════════════════
   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; }
/* 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);
  font-style: italic;
}
.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 infinite;
}
@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(200, 99, 58, 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(200, 99, 58, 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 infinite;
}

/* ─── 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 2px 8px rgba(124, 58, 237, 0.25);
}
.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 infinite;
}
@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: linear-gradient(135deg,#D98A5E,var(--signature)); 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 infinite;
}
.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-w: 240px;
  /* Alinhado com components.css (96px). Páginas que não carregam
     components.css (audit, coach, ia, metrics, etc.) usavam 60px aqui
     e ficavam com sidebar visivelmente menor que dashboard/kanban/etc.
     no estado colapsado. Manter este valor sincronizado com
     --sidebar-w-collapsed em components.css. */
  --sidebar-w-collapsed: 96px;
  --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: #25d366; color: #fff; border-radius: 999px;   /* WhatsApp-Mac: badge verde */
  font-size: 12px; font-weight: 600; line-height: 1; margin-left: 6px;
}
body.theme-fracta .unread-count { background: #25d366; color: #fff; }

/* /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; }
.kanban .kcol-title { font-size:13px !important; font-weight:700; color:var(--k-ink) !important; }
.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; }

/* BALÃO: min-height uniforme (sem clipar), coluna flex, ações no rodapé */
.kanban .kcard { background:#fff; border:1px solid #eceff4; border-radius:16px; padding:12px 14px; height:108px; flex:0 0 auto; overflow:hidden; position:relative; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(20,40,80,.05); 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:36px; height:36px; 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:13px; font-weight:700; color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kanban .kcard-attendant { font-size:11px; color:#8a95a5; margin-top:1px; }
.kanban .kcard-time { font-size:10px; color:#aab3c0; font-weight:600; flex:0 0 auto; align-self:flex-start; }
.kanban .kcard-time.urgent { color:var(--k-blue-deep); }
.kanban .kcard-flag { font-size:9px; font-weight:800; 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:11.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; }
.kanban .kcard-pill { font-size:10px; font-weight:600; padding:2px 9px; border-radius:999px; border:0; white-space:nowrap; letter-spacing:.01em; }
.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; }
.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:#aab3c0; 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); }