/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --bg:        #080b0b;
  --surface:   #0f1413;
  --surface2:  #161c1b;
  --border:    rgba(255,255,255,.07);
  --border2:   rgba(255,255,255,.12);
  --cyan:      #FF8A00;
  --cyan-dim:  rgba(255,138,0,.15);
  --cyan-glow: rgba(255,138,0,.35);
  --text:      #e8eeec;
  --text-sub:  rgba(232,238,236,.45);
  --text-dim:  rgba(232,238,236,.25);
  --danger:    #e05757;
  --warn:      #e8a64a;
  --success:   #3ecf8e;
  --branco:    #ffffff;
}

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

/* ── Body ────────────────────────────────────────────────────── */
body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: 220px; min-width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 10;
}

.logo {
  display: flex; gap: 12px; align-items: center;
  padding: 24px 20px 22px;
  border-bottom: 1px solid var(--border);
}
.logo-mark {
  color: var(--cyan);
  font-size: 20px;
  text-shadow: 0 0 12px var(--cyan-glow);
}
.logo strong { display: block; font-size: 14px; letter-spacing: .4px; color: var(--text); }
.logo small  { color: var(--text-sub); font-size: 11px; }

.sidebar nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 20px; color: var(--text-sub);
  text-decoration: none; font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: color .18s, background .18s, border-color .18s;
  letter-spacing: .01em;
}
.sidebar nav a:hover {
  background: rgba(255,138,0,.06);
  color: var(--text);
}
.sidebar nav a.ativo {
  background: rgba(255,138,0,.08);
  border-left-color: var(--cyan);
  color: var(--cyan);
  font-weight: 600;
}
.sidebar-rodape {
  padding: 14px 20px;
  font-size: 11px; color: var(--text-dim);
  border-top: 1px solid var(--border);
}
.sidebar-rodape a { color: var(--text-dim); text-decoration: none; margin-left: 8px; }
.sidebar-rodape a:hover { color: var(--text-sub); }

/* ── Conteúdo ────────────────────────────────────────────────── */
.conteudo {
  flex: 1; padding: 32px 36px;
  max-width: 100%; overflow-x: hidden;
  animation: fadeIn .35s ease;
}

@keyframes fadeIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes slideUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

h1 {
  font-size: 24px; font-weight: 300;
  color: var(--text); margin-bottom: 6px;
  letter-spacing: -.02em;
}
.subtitulo { color: var(--text-sub); font-size: 13px; margin-bottom: 26px; }
h2 { font-size: 14px; font-weight: 600; color: var(--text-sub); margin: 26px 0 12px; text-transform: uppercase; letter-spacing: .06em; }
h3 { font-size: 16px; color: var(--text); font-weight: 500; margin-bottom: 6px; }

/* ── Cards ───────────────────────────────────────────────────── */
.cards-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
  transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: var(--border2); box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.card .num { font-size: 30px; font-weight: 300; color: var(--text); letter-spacing: -.02em; }
.card .rotulo { font-size: 11px; color: var(--text-sub); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }
.card.destaque .num { color: var(--cyan); }

/* ── Tabelas ─────────────────────────────────────────────────── */
.tabela-envoltorio {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  background: var(--surface2);
  color: var(--text-sub);
  text-align: left; padding: 11px 14px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
td { padding: 10px 14px; border-top: 1px solid var(--border); vertical-align: top; color: var(--text); }
tr:hover td { background: rgba(255,255,255,.02); }

/* ── Botões ──────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cyan); color: #000; border: 0;
  padding: 10px 20px; border-radius: 8px;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  letter-spacing: .01em;
  transition: background .18s, box-shadow .18s, transform .12s;
}
.botao:hover {
  background: #FFA030;
  box-shadow: 0 0 18px var(--cyan-glow);
  transform: translateY(-1px);
}
.botao:active { transform: none; }
.botao.secundario {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border2);
}
.botao.secundario:hover {
  background: var(--surface);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: none;
}
.botao.mini { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
.botao:disabled { background: var(--surface2); color: var(--text-dim); cursor: not-allowed; box-shadow: none; transform: none; border: 1px solid var(--border); }
.botao.whatsapp { background: #25D366; color:#fff; }
.botao.whatsapp:hover { background: #1da851; box-shadow: 0 0 16px rgba(37,211,102,.4); }
.botao.perigo { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.botao.perigo:hover { background: var(--danger); color: #fff; box-shadow: 0 0 14px rgba(224,87,87,.4); }

/* ── Formulários ─────────────────────────────────────────────── */
label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--text-sub); margin: 14px 0 5px;
  text-transform: uppercase; letter-spacing: .05em;
}
input, select, textarea {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--border2);
  border-radius: 8px; font-size: 14px;
  background: var(--surface2); color: var(--text);
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(255,138,0,.12);
}
select option { background: var(--surface2); }
.form-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Score / etiquetas ───────────────────────────────────────── */
.score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 3px 8px; border-radius: 6px;
  font-weight: 700; font-size: 12px;
}
.score.quente { background: rgba(224,87,87,.2); color: var(--danger); border: 1px solid rgba(224,87,87,.3); }
.score.medio  { background: rgba(232,166,74,.2); color: var(--warn); border: 1px solid rgba(232,166,74,.3); }
.score.frio   { background: rgba(255,138,0,.15); color: var(--cyan); border: 1px solid rgba(255,138,0,.25); }
.etiqueta {
  display: inline-block; padding: 2px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.aviso-atraso { color: var(--danger); font-weight: 700; }

/* ── Kanban ──────────────────────────────────────────────────── */
.kanban { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 16px; align-items: flex-start; }
.coluna {
  min-width: 255px; width: 255px;
  background: var(--surface);
  border-radius: 12px; border: 1px solid var(--border);
}
.coluna-cabecalho {
  padding: 12px 14px; font-weight: 600; font-size: 12px;
  color: var(--text-sub);
  text-transform: uppercase; letter-spacing: .06em;
  border-radius: 11px 11px 0 0;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
}
.coluna-cabecalho .qtd {
  background: var(--surface2);
  border-radius: 12px; padding: 1px 9px; font-size: 11px;
  color: var(--text-sub);
}
.coluna-corpo { padding: 8px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.coluna-corpo.arrastando-sobre { background: var(--cyan-dim); border-radius: 0 0 11px 11px; }

.cartao {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  cursor: grab; font-size: 13px;
  transition: border-color .18s, box-shadow .18s, transform .14s;
  animation: slideUp .25s ease;
}
.cartao:hover { border-color: var(--border2); box-shadow: 0 4px 16px rgba(0,0,0,.5); transform: translateY(-1px); }
.cartao:active { cursor: grabbing; transform: none; }
.cartao.arrastando { opacity: .35; }
.cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.cartao .nome { font-weight: 600; color: var(--text); font-size: 13.5px; flex: 1; }
.cartao .meta { font-size: 11px; color: var(--text-sub); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cartao .cadencia { margin-top: 7px; font-size: 11px; color: var(--text-dim); }
.cartao .cadencia.atrasado { color: var(--danger); font-weight: 700; }

/* Alerta humano — triângulo sutil */
.cartao.precisa-humano {
  border-color: rgba(224,87,87,.3);
  background: linear-gradient(135deg, rgba(224,87,87,.05) 0%, var(--surface2) 60%);
}
.icone-alerta {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px;
  stroke: var(--danger); fill: rgba(224,87,87,.15);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}

.cartao-lead-conv.precisa-humano { border-left: 3px solid var(--danger); }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-fundo {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
  z-index: 50; align-items: center; justify-content: center; padding: 20px;
}
.modal-fundo.aberto { display: flex; }
.modal-caixa {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 16px; padding: 28px;
  width: 100%; max-width: 580px; max-height: 88vh; overflow-y: auto;
  animation: slideUp .22s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.modal-caixa h3 { color: var(--text); font-size: 18px; font-weight: 400; margin-bottom: 5px; letter-spacing: -.01em; }
.modal-detalhes { font-size: 13px; line-height: 1.85; margin: 12px 0; color: var(--text-sub); }
.modal-detalhes a { color: var(--cyan); text-decoration: none; }
.modal-detalhes a:hover { text-decoration: underline; }
.modal-acoes { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

/* ── Análise completa do lead ────────────────────────────────── */
.analise-bloco {
  border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  background: var(--surface2); margin-top: 10px;
}
.analise-bloco summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: .05em; list-style: none; }
.analise-bloco summary::-webkit-details-marker { display:none; }
.analise-bloco summary::before { content: "▶ "; font-size: 10px; color: var(--cyan); }
details.analise-bloco[open] summary::before { content: "▼ "; }
.analise-linha { display: flex; gap: 8px; font-size: 12px; line-height: 1.7; padding: 1px 0; }
.analise-linha a { color: var(--cyan); }
.analise-rotulo { min-width: 130px; color: var(--text-dim); flex-shrink: 0; }
.analise-categoria {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Log de execução ─────────────────────────────────────────── */
.log-caixa {
  background: #020505; color: #cc9944;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px; padding: 16px; border-radius: 10px;
  border: 1px solid var(--border);
  max-height: 380px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}
.barra-progresso {
  background: var(--surface2); border-radius: 20px; height: 22px;
  overflow: hidden; margin: 12px 0; border: 1px solid var(--border);
}
.barra-progresso > div {
  height: 100%; background: var(--cyan); color: #000;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: width .5s; min-width: 36px;
}
.selo { padding: 3px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.selo.rodando  { background: rgba(232,166,74,.2); color: var(--warn); border: 1px solid rgba(232,166,74,.3); }
.selo.concluida{ background: rgba(62,207,142,.2); color: var(--success); border: 1px solid rgba(62,207,142,.3); }
.selo.erro     { background: rgba(224,87,87,.2); color: var(--danger); border: 1px solid rgba(224,87,87,.3); }
.selo.cancelada{ background: rgba(150,150,150,.18); color: var(--text-sub); border: 1px solid rgba(150,150,150,.28); }

/* ── Abas ────────────────────────────────────────────────────── */
.abas { display: flex; gap: 2px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.aba {
  background: none; border: none; color: var(--text-sub);
  padding: 10px 20px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s, border-color .18s;
}
.aba:hover { color: var(--text); }
.aba.ativa { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 600; }

/* ── Seletor de campos ───────────────────────────────────────── */
.secao-campos {
  margin-top: 20px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.secao-cabecalho {
  background: var(--surface2); padding: 12px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text);
  transition: background .18s;
}
.secao-cabecalho:hover { background: var(--surface); }
.secao-cabecalho span:last-child { margin-left: auto; color: var(--text-dim); }
.contador { font-size: 12px; color: var(--text-dim); font-weight: 400; }
#campos-corpo { padding: 14px 16px; }
.acoes-campos { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.grupo-campos { margin-bottom: 14px; }
.grupo-titulo {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.link-mini {
  background: none; border: 0; color: var(--cyan); font-size: 11px;
  cursor: pointer; text-decoration: underline; font-family: inherit;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.grupo-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 3px; }
.campo-item {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 400; color: var(--text); margin: 0; cursor: pointer;
}
.campo-item input { width: auto; }

/* ── Barra de ações revisão ──────────────────────────────────── */
.barra-acoes {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 16px;
  display: flex; gap: 14px; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
}
.barra-acoes-esq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.celula-sub { font-size: 12px; color: var(--text-sub); line-height: 1.7; }
.celula-sub a { color: var(--cyan); text-decoration: none; }

.dica-campo {
  font-size: 12px; color: var(--warn);
  background: rgba(232,166,74,.08);
  border: 1px solid rgba(232,166,74,.2);
  border-radius: 8px; padding: 9px 12px; margin: -4px 0 14px;
}

/* ── Login ───────────────────────────────────────────────────── */
body.pagina-auth {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

/* Glow backdrop */
body.pagina-auth::before {
  content: '';
  position: fixed;
  top: 30%; left: 50%; transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,138,0,.08) 0%, transparent 70%);
  pointer-events: none;
}

.caixa-auth {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px; padding: 42px 44px;
  width: 100%; max-width: 400px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  animation: slideUp .35s ease;
  position: relative; z-index: 1;
}
.logo-auth {
  display: flex; gap: 12px; align-items: center; margin-bottom: 36px;
}
.logo-auth .logo-mark {
  color: var(--cyan); font-size: 28px;
  text-shadow: 0 0 16px var(--cyan-glow);
}
.logo-auth strong { display: block; font-size: 17px; color: var(--text); }
.logo-auth small { color: var(--text-sub); font-size: 11px; }
.caixa-auth h1 {
  font-size: 28px; font-weight: 300; color: var(--text);
  margin-bottom: 28px; letter-spacing: -.02em;
}
.aviso-erro {
  background: rgba(224,87,87,.12); color: var(--danger);
  border: 1px solid rgba(224,87,87,.25);
  border-radius: 8px; padding: 10px 13px; font-size: 13px; margin-bottom: 14px;
}

/* ── Placeholders / WhatsApp ─────────────────────────────────── */
.legenda-placeholders { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.legenda-placeholders code {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 6px; padding: 3px 8px; font-size: 12px;
  color: var(--cyan); font-family: Consolas, monospace;
}
.cartao-wpp { width: 100%; margin-top: 8px; font-size: 11px; padding: 5px 8px; }

/* ── Produtos ────────────────────────────────────────────────── */
.card-produto { margin-bottom: 12px; }
.produto-cabecalho { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.produto-nome { color: var(--text); font-size: 15px; font-weight: 500; }
.produto-acoes { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.produto-campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 18px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border); font-size: 13px;
}
.rotulo-campo {
  display: block; font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}

/* ── Fila de trabalho ────────────────────────────────────────── */
.contador-aba {
  background: var(--surface2);
  color: var(--text-sub); border-radius: 12px;
  padding: 1px 9px; font-size: 11px; margin-left: 4px;
}
.aba.ativa .contador-aba { background: var(--cyan-dim); color: var(--cyan); }
.cartao-fila { max-width: 800px; }
.fila-cabecalho { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.fila-nome { display: block; font-size: 19px; color: var(--text); margin-top: 6px; font-weight: 400; }
.fila-bloco {
  background: var(--surface2);
  border-left: 3px solid var(--border2);
  padding: 12px 14px; border-radius: 8px;
  font-size: 13px; margin-bottom: 10px; line-height: 1.65;
  color: var(--text-sub);
}
.fila-bloco.dor { border-left-color: var(--danger); }
.fila-acoes { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.acoes-mensagem { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
kbd {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 4px; padding: 2px 7px; font-size: 11px;
  font-family: Consolas, monospace; color: var(--text-sub);
}
.aviso-flutuante {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text); padding: 13px 20px;
  border-radius: 12px; font-size: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: slideUp .2s ease;
}

/* ── Régua de cadência ───────────────────────────────────────── */
.linha-etapa {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.linha-etapa:last-child { border-bottom: 0; }
.etapa-num {
  background: var(--cyan-dim); color: var(--cyan);
  border: 1px solid rgba(255,138,0,.25);
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.etapa-texto { color: var(--text-sub); }
.etapa-fixa { font-weight: 600; color: var(--text); }
.linha-etapa input, .linha-etapa select { width: auto; padding: 7px 10px; font-size: 13px; }

/* ── Métricas ────────────────────────────────────────────────── */
.barra-taxa {
  background: var(--surface2); border-radius: 10px;
  height: 6px; overflow: hidden; margin-top: 4px; min-width: 90px;
}
.barra-taxa > div { height: 100%; border-radius: 10px; }
.celula-taxa { font-size: 13px; }
.funil { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.funil-etapa {
  flex: 1; min-width: 92px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 12px; text-align: center;
}
.funil-barra { height: 4px; border-radius: 4px; margin-bottom: 10px; }
.funil-num { font-size: 26px; font-weight: 300; color: var(--text); letter-spacing: -.02em; }
.funil-nome { font-size: 11px; color: var(--text-sub); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
h2 small { font-weight: 400; color: var(--text-dim); font-size: 12px; }

.vazio { text-align: center; color: var(--text-dim); padding: 40px; font-size: 13px; }
.filtros-linha { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filtros-linha input, .filtros-linha select { width: auto; min-width: 160px; }

/* ── Conversas ───────────────────────────────────────────────── */
.conv-layout { display: flex; gap: 0; height: calc(100vh - 64px); overflow: hidden; }
.conv-lista { width: 300px; min-width: 300px; border-right: 1px solid var(--border); overflow-y: auto; }
.conv-thread { flex: 1; display: flex; flex-direction: column; }
.conv-cabecalho { padding: 14px 18px; border-bottom: 1px solid var(--border); font-weight: 600; }
.cartao-lead-conv {
  padding: 13px 16px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.cartao-lead-conv:hover { background: var(--surface2); }
.cartao-lead-conv.ativo { background: var(--cyan-dim); border-left: 3px solid var(--cyan); }
.thread-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.msg-saida, .msg-entrada {
  max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6;
}
.msg-saida { background: var(--cyan-dim); border: 1px solid rgba(255,138,0,.2); color: var(--text); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-entrada { background: var(--surface2); border: 1px solid var(--border); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }