/* ============================================================
   IDENTIDADE VISUAL — BEAMBROKER (oficial)
   Verde em degradê sobre fundo escuro, conforme a logo da marca.
   Mesmos tokens das outras ferramentas internas da Beam.
   ============================================================ */
:root {
  --bg: #060d09;
  --bg-card: #0c1712;
  --bg-card-2: #12211a;
  --bg-card-3: #182c22;
  --line: #1e3a2b;
  --line-2: #2a4d3a;
  --text: #ecfdf3;
  --muted: #86a795;
  --muted-2: #5f7d6c;
  --accent-1: #2ee06e;
  --accent-2: #93f7b4;
  --on-accent: #04150a;
  --good: #34d399;
  --bad: #f87171;
  --warn: #fbbf24;
  --info: #60a5fa;
  /* séries dos gráficos — validadas (faixa de luminosidade, daltonismo e contraste) sobre --bg-card */
  --chart-1: #17a74f;   /* disparos */
  --chart-2: #2f7ff5;   /* aquecimento */
  --chart-3: #c9731a;   /* recebidas / respostas */
  --radius: 16px;
  --radius-s: 10px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent-1) 45%, transparent);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height: 100vh; display: flex; flex-direction: column; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--accent-1) 40%, transparent); }

/* "feixe de luz" de fundo */
.bg-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(700px 340px at 75% -10%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 70%),
    radial-gradient(900px 420px at 15% -20%, color-mix(in srgb, var(--accent-1) 18%, transparent), transparent 70%);
}

/* ---------------------------------------------------------------- header */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  padding: 12px 28px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { height: 30px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text span { font-size: 10.5px; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; }
nav { display: flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; }
.tab {
  background: none; border: 1px solid transparent; color: var(--muted);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; transition: color .15s, background .15s;
}
.tab svg { width: 16px; height: 16px; }
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text); border-color: var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-1) 18%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
}
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.who b { color: var(--text); font-weight: 600; }
.who .papel { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.who .papel.admin { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-1) 50%, transparent); }
.ao-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); }
.ao-vivo.on { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }

main { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; }
footer { position: relative; z-index: 1; text-align: center; padding: 18px; color: var(--muted-2); font-size: 12px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ tipografia */
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.4px; }
h2 { font-size: 19px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
.sub { color: var(--muted); margin-top: 6px; font-size: 14px; max-width: 760px; }
.sub b { color: var(--text); font-weight: 600; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.bold { font-weight: 600; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.accent { color: var(--accent-2); }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .info { color: var(--info); }
.erro-msg { color: var(--bad); font-size: 13.5px; min-height: 1.2em; }
.center { text-align: center; }
.right { text-align: right; }

/* ------------------------------------------------------------- layout */
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.topo .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.linha.entre { justify-content: space-between; }
.coluna { display: flex; flex-direction: column; gap: 10px; }
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mt { margin-top: 16px; } .mt-l { margin-top: 28px; } .mb { margin-bottom: 16px; }
.gap { gap: 16px; }
.cresce { flex: 1; min-width: 0; }

/* ------------------------------------------------------------- cartões */
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.card.compacto { padding: 14px 16px; }
.card.destaque { border-color: color-mix(in srgb, var(--accent-1) 45%, var(--line)); box-shadow: 0 20px 60px -40px color-mix(in srgb, var(--accent-1) 60%, transparent); }
.card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-titulo h2, .card-titulo h3 { margin: 0; }

/* painéis de número (stat tiles) */
.stat { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.stat .rotulo { font-size: 12px; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; }
.stat .valor { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin-top: 4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .valor small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 4px; }
.stat .extra { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line); background: var(--bg-card-2); color: var(--text);
  padding: 9px 15px; border-radius: var(--radius-s); cursor: pointer; font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: filter .15s, border-color .15s, transform .05s;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { border-color: var(--line-2); filter: brightness(1.1); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn.primario { border: none; color: var(--on-accent); background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); }
.btn.primario:hover { filter: brightness(1.1); }
.btn.ghost { background: none; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.perigo { color: var(--bad); }
.btn.perigo:hover { border-color: var(--bad); }
.btn.pequeno { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.btn.pequeno svg { width: 14px; height: 14px; }
.btn.icone { padding: 7px; }
.btn.bloco { width: 100%; }

/* ------------------------------------------------------------- formulários */
label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); min-width: 0; }
label.campo > span { display: flex; justify-content: space-between; gap: 8px; }
.input, .select, .textarea {
  width: 100%; background: var(--bg-card-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--text); padding: 9px 12px; font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: color-mix(in srgb, var(--accent-1) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 15%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.select option { background: var(--bg-card-2); }
.textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.input.curto { width: 90px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.ajuda { font-size: 12px; color: var(--muted-2); line-height: 1.4; }

/* interruptor */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--muted); user-select: none; }
.switch input { display: none; }
.switch i { width: 36px; height: 20px; border-radius: 999px; background: var(--bg-card-3); border: 1px solid var(--line); position: relative; transition: background .15s; flex: none; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + i { background: color-mix(in srgb, var(--accent-1) 35%, var(--bg-card-3)); border-color: color-mix(in srgb, var(--accent-1) 60%, var(--line)); }
.switch input:checked + i::after { transform: translateX(16px); background: var(--accent-2); }
.switch input:checked ~ span { color: var(--text); }

/* caixinhas de seleção (chips de um grupo) */
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-card-2); cursor: pointer; font-size: 13px; color: var(--muted); }
.check input { accent-color: var(--accent-1); }
.check:has(input:checked) { color: var(--text); border-color: color-mix(in srgb, var(--accent-1) 55%, var(--line)); background: color-mix(in srgb, var(--accent-1) 12%, var(--bg-card-2)); }

/* ------------------------------------------------------------- badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; letter-spacing: .2px; }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.sem-ponto::before { display: none; }
.badge.good, .badge.conectado, .badge.concluida, .badge.lido, .badge.entregue { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.badge.warn, .badge.conectando, .badge.pausada, .badge.agendada, .badge.enviando, .badge.aquecendo { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.badge.bad, .badge.erro, .badge.cancelada { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.badge.accent, .badge.rodando, .badge.enviado, .badge.morno { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-1) 50%, transparent); }
.badge.info, .badge.quente { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.badge.conectando::before, .badge.rodando::before, .badge.enviando::before { animation: pulsa 1.2s infinite; }
/* saúde do número no WhatsApp */
.badge.saude-restrito { color: #ff9f43; border-color: color-mix(in srgb, #ff9f43 50%, transparent); background: color-mix(in srgb, #ff9f43 10%, transparent); }
.badge.saude-bloqueado, .badge.saude-possivel_bloqueio { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.ponto.saude-restrito { background: #ff9f43; }
.ponto.saude-bloqueado, .ponto.saude-possivel_bloqueio { background: var(--bad); }
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--bg-card-3); color: var(--muted); }
.tag.aquecimento { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--bg-card-3)); }
.tag.disparo { color: var(--accent-2); background: color-mix(in srgb, var(--accent-1) 14%, var(--bg-card-3)); }
.tag.externo { color: var(--info); background: color-mix(in srgb, var(--info) 14%, var(--bg-card-3)); }

/* ------------------------------------------------------------- tabelas */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th, .tabela td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabela th { font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: color-mix(in srgb, var(--accent-1) 4%, transparent); }
.tabela tr.clicavel { cursor: pointer; }
.tabela td.acoes { text-align: right; white-space: nowrap; }
.tabela td.acoes .btn + .btn { margin-left: 4px; }
.tabela .num { font-variant-numeric: tabular-nums; text-align: right; }

/* barra de progresso */
.barra { position: relative; height: 8px; border-radius: 999px; background: var(--bg-card-3); overflow: hidden; min-width: 80px; }
.barra > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); transition: width .4s ease; }
.barra.grande { height: 14px; }

/* ------------------------------------------------------------- lista vazia / carregando */
.vazio { padding: 36px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.vazio b { color: var(--text); display: block; margin-bottom: 6px; font-size: 15px; }
.carregando { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 36px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent-1); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- overlays */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(6px);
}
.overlay-card {
  width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow);
}
.overlay-card .logo-login { height: 34px; width: auto; align-self: flex-start; margin-bottom: 4px; }
.overlay-card h2 { font-size: 20px; }
.overlay-card .btn.primario { padding: 12px; margin-top: 4px; }
.overlay-card.larga { max-width: 640px; }
.overlay-card.extra-larga { max-width: 820px; }
.overlay-card .modal-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.overlay-card .modal-corpo { max-height: min(70vh, 640px); overflow: auto; margin: 0 -6px; padding: 0 6px; }
.overlay-card .modal-acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.fechar { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.fechar:hover { color: var(--text); background: var(--bg-card-2); }

/* toasts */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: var(--bg-card-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent-1); border-radius: var(--radius-s); padding: 11px 14px; font-size: 13.5px; box-shadow: 0 20px 50px -20px #000; animation: entra .2s ease; }
.toast.erro { border-left-color: var(--bad); }
.toast.aviso { border-left-color: var(--warn); }
.toast.info { border-left-color: var(--info); }
@keyframes entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------- QR */
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.qr-box img { width: 240px; height: 240px; border-radius: 12px; background: #fff; padding: 8px; }
.qr-box .passos { text-align: left; font-size: 13px; color: var(--muted); line-height: 1.6; }
.qr-box .passos b { color: var(--text); }
.qr-espera { width: 240px; height: 240px; border-radius: 12px; border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--muted); }

/* ------------------------------------------------------------- chip card (corretor) */
.chip-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.chip-card .avatar { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--bg-card-2); border: 1px solid var(--line); font-size: 22px; flex: none; }
.chip-card .avatar.on { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-1) 30%, transparent), color-mix(in srgb, var(--accent-2) 30%, transparent)); border-color: color-mix(in srgb, var(--accent-1) 50%, var(--line)); }
.chip-card .avatar svg { width: 26px; height: 26px; }
.chip-card .info { flex: 1; min-width: 200px; }
.chip-card .info h3 { font-size: 17px; }
.chip-card .info p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.chip-card .metricas { display: flex; gap: 18px; flex-wrap: wrap; }
.chip-card .metricas div { font-size: 12px; color: var(--muted); }
.chip-card .metricas b { display: block; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- conversas (chat) */
.chat { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; min-height: 560px; height: calc(100vh - 250px); }
.chat .lista, .chat .thread { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat .lista .filtros { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.chat .lista .itens { overflow-y: auto; flex: 1; }
.conv-item { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; align-items: flex-start; }
.conv-item:hover { background: color-mix(in srgb, var(--accent-1) 5%, transparent); }
.conv-item.ativa { background: color-mix(in srgb, var(--accent-1) 10%, transparent); }
.conv-item .av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-card-3); color: var(--muted); font-weight: 700; font-size: 14px; }
.conv-item .av.chip { background: color-mix(in srgb, var(--warn) 18%, var(--bg-card-3)); color: var(--warn); }
.conv-item .txt { flex: 1; min-width: 0; }
.conv-item .txt .n { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.conv-item .txt .n time { font-size: 11px; color: var(--muted-2); font-weight: 400; white-space: nowrap; }
.conv-item .txt .p { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-item .txt .t { margin-top: 5px; display: flex; gap: 6px; }
.thread .cabeca { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.thread .cabeca h3 { font-size: 15px; }
.thread .cabeca p { font-size: 12px; color: var(--muted); }
.thread .msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: radial-gradient(600px 300px at 50% 0%, color-mix(in srgb, var(--accent-1) 5%, transparent), transparent 70%); }
.bolha { max-width: 72%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; position: relative; word-break: break-word; white-space: pre-wrap; }
.bolha.eu { align-self: flex-end; background: color-mix(in srgb, var(--accent-1) 22%, var(--bg-card-2)); border-bottom-right-radius: 4px; }
.bolha.ele { align-self: flex-start; background: var(--bg-card-3); border-bottom-left-radius: 4px; }
.bolha .meta { display: flex; justify-content: flex-end; gap: 6px; align-items: center; font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.bolha .meta .tick { font-family: var(--mono); letter-spacing: -2px; }
.bolha .meta .tick.lido { color: var(--info); }
.bolha .meta .tick.erro { color: var(--bad); letter-spacing: 0; }
.bolha .origem { position: absolute; top: -8px; right: 10px; }
.bolha.eu .origem { right: auto; left: 10px; }
.sep-dia { align-self: center; font-size: 11px; color: var(--muted); background: var(--bg-card-2); padding: 3px 10px; border-radius: 999px; margin: 8px 0; }
.thread .enviar { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.thread .enviar .input { flex: 1; }
.thread .vazio-thread { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; padding: 30px; }

/* ------------------------------------------------------------- gráficos */
.grafico { width: 100%; height: 220px; display: block; overflow: visible; }
.grafico .grade line { stroke: var(--line); stroke-width: 1; }
.grafico .eixo text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.grafico rect.m { rx: 3; }
.grafico rect.m:hover { filter: brightness(1.25); }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tooltip { position: fixed; z-index: 70; pointer-events: none; background: var(--bg-card-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 10px 30px -10px #000; }
.tooltip b { display: block; margin-bottom: 2px; }

/* log do aquecimento */
.log { background: #040a06; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; max-height: 320px; overflow-y: auto; font-family: var(--mono); font-size: 12px; line-height: 1.7; color: #8fb8a1; }
.log .l { display: flex; gap: 10px; }
.log time { color: var(--muted-2); flex: none; }
.log .msg { color: #c6f0d4; } .log .conversa { color: var(--accent-2); } .log .erro { color: var(--bad); } .log .aviso { color: var(--warn); }

/* sub-abas (admin) */
.subabas { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.subaba { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 14px; cursor: pointer; font-size: 14px; font-weight: 600; margin-bottom: -1px; }
.subaba:hover { color: var(--text); }
.subaba.active { color: var(--accent-2); border-bottom-color: var(--accent-1); }

/* pílulas de seleção de chip */
.pilulas { display: flex; gap: 8px; flex-wrap: wrap; }
.pilula { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-card); cursor: pointer; font-size: 13px; color: var(--muted); }
.pilula:hover { color: var(--text); }
.pilula.active { color: var(--text); border-color: color-mix(in srgb, var(--accent-1) 55%, var(--line)); background: color-mix(in srgb, var(--accent-1) 12%, var(--bg-card)); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: none; }
.ponto.conectado { background: var(--good); } .ponto.conectando { background: var(--warn); } .ponto.erro { background: var(--bad); }

.lista-cards { display: flex; flex-direction: column; gap: 12px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { color: var(--text); }
.auditoria { font-size: 12.5px; display: flex; flex-direction: column; gap: 6px; }
.auditoria div { display: flex; gap: 10px; align-items: baseline; }
.auditoria time { color: var(--muted-2); font-family: var(--mono); font-size: 11.5px; flex: none; }

/* ------------------------------------------------------------- responsivo */
@media (max-width: 960px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat { grid-template-columns: 1fr; height: auto; }
  .chat .lista { max-height: 320px; }
  .chat .thread { min-height: 480px; }
}
@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .who { margin-left: auto; }
  nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  main { padding: 18px 16px 60px; }
  h1 { font-size: 23px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .bolha { max-width: 88%; }
  .tabela th, .tabela td { padding: 9px 10px; }
}

/* Campaign workspace: a single path from import to execution. */
.c2-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--muted);margin:0 0 8px}
.c2-toolbar,.c2-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:22px 0}.c2-toolbar .campo{min-width:240px}.c2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:22px 0}.c2-stat{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--panel,#151b19);display:flex;flex-direction:column;gap:6px}.c2-stat strong{font-size:27px;letter-spacing:-.8px}.c2-stat span{font-size:12px;color:var(--muted)}.c2-empty{text-align:center;padding:64px 24px;display:flex;align-items:center;flex-direction:column;gap:16px}.c2-empty p{max-width:570px;line-height:1.7}.c2-orbit{width:56px;height:56px;border-radius:18px;background:rgba(137,239,90,.12);color:var(--accent,#9de567);display:grid;place-items:center;font-size:30px}.c2-flow-mini{font-size:12px;letter-spacing:.3px;padding:20px;color:var(--muted)}.c2-table{overflow:auto;margin:14px 0}.c2-table table{width:100%;border-collapse:collapse;font-size:13px}.c2-table th{text-align:left;padding:14px 12px;font-size:11px;color:var(--muted);font-weight:500;white-space:nowrap;border-bottom:1px solid var(--line)}.c2-table td{padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:middle}.c2-table input{min-width:90px}.c2-tag{display:inline-block;font-size:11px;padding:5px 9px;border-radius:6px;background:rgba(139,230,122,.10);color:var(--accent,#a5df87);white-space:nowrap}.c2-tag.warn{background:rgba(255,178,61,.12);color:#ffc573}.c2-steps{display:grid;grid-template-columns:repeat(6,1fr);margin:24px 0 30px;border-bottom:1px solid var(--line)}.c2-step{display:flex;align-items:center;gap:8px;font-size:12px;padding:14px 4px;color:var(--muted);border-bottom:2px solid transparent}.c2-step span{border:1px solid var(--line);border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-size:11px;flex-shrink:0}.c2-step.active{color:var(--text);border-bottom-color:var(--accent,#9de567)}.c2-step.active span,.c2-step.done span{background:#a7ed72;color:#142510;border:0}.c2-card{margin:14px 0;display:flex;flex-direction:column;gap:15px}.c2-card h3{margin:0}.c2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}.c2-upload{border:1px dashed var(--line);border-radius:10px;padding:25px;margin:10px 0}.c2-upload input{margin-top:12px}.c2-editor{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}.c2-blocks{max-width:780px;width:100%;margin:auto}.c2-arrow{text-align:center;color:var(--muted)}.c2-phone{position:sticky;top:24px;background:#12251f;border:1px solid #294037;border-radius:22px;padding:18px;min-height:450px;box-shadow:0 20px 40px #0002}.c2-phone-head{border-bottom:1px solid #294037;padding:4px 4px 18px;margin-bottom:22px;font-weight:600}.c2-phone-head small{display:block;color:#b1c1b9;font-weight:400;margin-top:6px}.c2-bubble{background:#21513a;color:#edfff3;padding:14px;border-radius:12px 12px 2px 12px;margin:12px 0 12px 15px;line-height:1.6;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.c2-delay{text-align:center;color:#afc2b7;font-size:11px;padding:12px}.c2-notice{border-left:3px solid #a7ed72;background:rgba(139,230,122,.06);padding:16px;font-size:13px;line-height:1.6;margin:18px 0}.c2-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.c2-template{white-space:pre-wrap;padding:14px;background:rgba(255,255,255,.025);border-radius:8px;line-height:1.6}.c2-template small{display:block;color:var(--muted);margin-bottom:6px}.c2-progress{height:6px;border-radius:10px;background:var(--line);overflow:hidden}.c2-progress div{height:100%;background:#a7ed72}.c2-footer{position:sticky;bottom:0;padding:18px;background:var(--bg,#111714);border-top:1px solid var(--line);z-index:3}.c2-editor textarea{resize:vertical;min-height:96px}.c2-card .acoes{flex-wrap:wrap}
@media(max-width:1000px){.c2-editor{grid-template-columns:1fr}.c2-phone{position:static;max-width:400px;margin:auto;width:100%}.c2-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.c2-toolbar,.c2-footer{align-items:stretch;flex-direction:column}.c2-step{font-size:10px}.c2-grid{grid-template-columns:1fr}.c2-stats{grid-template-columns:repeat(2,1fr)}.c2-empty{padding:36px 18px}}

/* Campaign setup: selectable sequence and sender cards. */
.c2-flow-map{display:flex;align-items:center;gap:12px;overflow-x:auto;padding:28px 18px;background:radial-gradient(var(--line) 1px,transparent 1px) 0 0/18px 18px;border:1px solid var(--line);border-radius:14px}
.c2-flow-node{flex:0 0 170px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--panel,#151b19);color:var(--text);cursor:pointer;display:flex;flex-direction:column;gap:9px;font:inherit}
.c2-flow-node small{color:var(--muted);font-size:12px}.c2-flow-node.selected{border-color:#a7ed72;box-shadow:0 0 0 2px #a7ed7222}.c2-flow-node:focus-visible{outline:2px solid #a7ed72;outline-offset:4px}.c2-flow-line{color:var(--muted)}.c2-flow-end{font-size:12px;border:1px solid var(--line);border-radius:22px;padding:10px 18px;background:var(--bg);white-space:nowrap}
.c2-brokers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:20px;align-items:start}.c2-brokers .c2-card{margin:0}.c2-broker-selected{border-color:#a7ed72}.c2-broker-number{font-size:18px;letter-spacing:.5px;margin:0}.c2-broker-select{display:flex;align-items:center;gap:12px;padding:14px;background:#a7ed720c;border-radius:9px;cursor:pointer}.c2-broker-select input{width:18px;height:18px;min-width:18px;accent-color:#a7ed72}.c2-broker-advanced{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}.c2-broker-advanced summary{cursor:pointer;color:var(--muted);font-size:12px}.c2-broker-advanced .c2-grid{margin:16px 0}.c2-budget-warning{display:block;color:#ffc573;margin-top:6px}.c2-notice p{margin:8px 0 0}.c2-brokers .small{line-height:1.6}

/* Visual flow builder. The graph is the execution order, not just decoration. */
.fe{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel,#111b14);width:100%;min-width:0}.fe-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px;border-bottom:1px solid var(--line)}.fe-toolbar>strong{margin-right:auto}.fe-scale{font-size:12px;min-width:38px;text-align:center}.fe-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;min-height:620px}.fe-viewport{position:relative;overflow:auto;height:620px;touch-action:none;cursor:grab;overscroll-behavior:contain;background:radial-gradient(#506f543b 1px,transparent 1px) 0 0/20px 20px;outline-offset:-3px}.fe-space{position:relative}.fe-world{position:absolute;left:0;top:0;transform-origin:0 0}.fe-links{position:absolute;inset:0;overflow:visible;pointer-events:none}.fe-edge{fill:none;stroke:#779581;stroke-width:3;pointer-events:stroke;cursor:pointer;outline:none}.fe-edge:hover,.fe-edge.selected,.fe-edge:focus{stroke:#b2f281;stroke-width:6}.fe-pending{fill:none;stroke:#b2f281;stroke-width:3;stroke-dasharray:7 5;pointer-events:none}.fe-node{position:absolute;width:220px;height:130px;border:1px solid #47634e;border-radius:12px;background:#142119;box-shadow:0 6px 18px #0003;cursor:default}.fe-node.selected{border-color:#b2f281;box-shadow:0 0 0 2px #b2f28133}.fe-node-head{padding:13px 14px;border-bottom:1px solid #47634e66;display:flex;gap:9px;align-items:center;font-size:13px;font-weight:650;cursor:grab;touch-action:none;user-select:none;border-radius:12px 12px 0 0}.fe-node-head:focus-visible{outline:2px solid #b2f281}.fe-node-icon{color:#b2f281;font-size:19px}.fe-node-summary{font-size:12px;color:#bbcdbf;line-height:1.45;margin:10px 14px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}.fe-node>small{display:block;font-size:10px;color:#86a98c;margin:0 14px}.fe-port{position:absolute;top:56px;width:18px;height:18px;padding:0;min-width:18px;border:3px solid #142119;border-radius:50%;background:#b2f281;cursor:crosshair;touch-action:none}.fe-port:hover,.fe-port:focus-visible{outline:3px solid #b2f28166}.fe-port.input-port{left:-10px}.fe-port.output-port{right:-10px}.fe-inspector{border-left:1px solid var(--line);padding:22px;max-height:620px;overflow:auto;background:var(--panel,#111b14)}.fe-inspector h3{margin:0 0 16px}.fe-inspector p{font-size:13px;line-height:1.65}.fe-inspector .campo{margin:16px 0 8px}.fe-inspector textarea{resize:vertical;min-height:120px;font-size:13px}.fe-inspector>.btn{margin-top:10px}.fe-actions{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.fe-status{padding:12px 16px;font-size:12px;color:#b2f281;border-top:1px solid var(--line);min-height:44px}.fe-status.invalid{color:#ffc573}.fe-inspector .c2-bubble{margin-left:0}.fe button:disabled{opacity:.4;cursor:default}@media(max-width:900px){.fe-workspace{grid-template-columns:1fr}.fe-viewport{height:450px}.fe-inspector{border-left:0;border-top:1px solid var(--line);max-height:380px}.fe-toolbar>strong{width:100%}.fe-node{box-shadow:none}}
.overlay-card.fe-modal{width:min(1500px,96vw);max-width:1500px}.overlay-card.fe-modal .modal-corpo{max-height:80vh}
@media(min-width:901px){.overlay-card.fe-modal .fe-workspace{min-height:0}.overlay-card.fe-modal .fe-viewport{height:clamp(320px,calc(100vh - 270px),650px)}.overlay-card.fe-modal .fe-inspector{max-height:clamp(320px,calc(100vh - 270px),650px)}}