/* Dashboard "Usabilidade da Iris" — layout próprio.
   Cores, raios, sombras e tipografia vêm dos tokens --sz-* do design system. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sz-bg);
  color: var(--sz-text-body);
  font-family: var(--sz-font);
  font-size: 14px;
}

:focus-visible { outline: none; box-shadow: var(--sz-focus-ring); border-radius: var(--sz-radius-btn); }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: var(--sz-z-sticky);
  display: flex; align-items: center; gap: 20px;
  height: 64px; padding: 0 40px;
  background: var(--sz-topbar-bg);
  border-bottom: 1px solid var(--sz-border);
}
/* alt text vira fallback tipográfico se o PNG do logo não estiver em assets/ */
.logo { display: flex; align-items: center; height: 20px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--sz-text-primary); }
[data-theme="dark"] .logo-light, .logo-dark { display: none; }
[data-theme="dark"] .logo-dark { display: flex; }

.crumb { display: flex; align-items: center; gap: 10px; height: 28px; padding-left: 20px; border-left: 1px solid var(--sz-border); }
.app-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: var(--sz-product-chat); color: #fff; }
.crumb-app { font-size: 14px; font-weight: 600; color: var(--sz-text-primary); }
.crumb-page { font-size: 14px; color: var(--sz-text-muted); }
.topbar-spacer { flex: 1; }

.search { position: relative; width: 320px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--sz-text-muted); pointer-events: none; }
.search input {
  width: 100%; padding: 9px 12px 9px 36px;
  font-family: var(--sz-font); font-size: 14px;
  color: var(--sz-text-primary); background: var(--sz-surface);
  border: 1.5px solid var(--sz-border-strong); border-radius: var(--sz-radius-btn);
  outline: none;
}
.search input:focus { border-color: var(--sz-accent); }
.periodo { font-size: 13px; color: var(--sz-text-muted); white-space: nowrap; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  color: var(--sz-text-muted); background: transparent; border: none;
  border-radius: var(--sz-radius-btn); cursor: pointer;
  transition: background var(--sz-transition-fast), color var(--sz-transition-fast);
}
.icon-btn:hover { background: var(--sz-surface-2); color: var(--sz-text-primary); }

/* ── Página ─────────────────────────────────────────────── */
.page { max-width: 1440px; margin: 0 auto; padding: 36px 40px 72px; }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.head-text { max-width: 780px; }
.head-overline { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sz-accent-fg); margin-bottom: 10px; }
.head h1 { margin: 0 0 10px; font-family: var(--sz-font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--sz-text-primary); text-wrap: pretty; }
.head p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sz-text-muted); text-wrap: pretty; }
.head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 4px; }
.atualizado { font-size: 13px; color: var(--sz-text-muted); white-space: nowrap; }

.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sz-text-muted); white-space: nowrap; cursor: pointer; user-select: none; }
.check input { width: 14px; height: 14px; margin: 0; accent-color: var(--sz-accent); cursor: pointer; }

/* ── Botão (DS Button) ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sz-font); font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; border: none; border-radius: var(--sz-radius-btn);
  transition: background var(--sz-transition), color var(--sz-transition), transform var(--sz-transition-fast);
}
.btn:active { transform: scale(0.98); }
.btn-secondary { padding: 5px 13px; font-size: 13px; background: transparent; color: var(--sz-text-primary); border: 1.5px solid var(--sz-text-primary); }
.btn-secondary:hover { background: var(--sz-black); color: var(--sz-white); }

/* ── Badge (DS Badge) ───────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--sz-radius-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-success { background: var(--sz-success-bg); color: var(--sz-success); }
.badge-warning { background: var(--sz-warning-bg); color: var(--sz-warning); }
.badge-danger  { background: var(--sz-danger-bg);  color: var(--sz-danger); }
.badge-accent  { background: var(--sz-accent-soft); color: var(--sz-accent-fg); }
.badge-neutral { background: var(--sz-light-gray); color: var(--sz-text-body); }

/* ── Segmentos ──────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.seg {
  text-align: left; cursor: pointer; padding: 16px 20px; font-family: var(--sz-font);
  background: var(--sz-surface); border: 1.5px solid var(--sz-border); border-radius: var(--sz-radius);
  transition: box-shadow var(--sz-transition), border-color var(--sz-transition), background var(--sz-transition);
}
.seg:hover { box-shadow: var(--sz-shadow-hover); }
.seg[aria-pressed="true"] { background: var(--sz-accent-soft); border-color: var(--sz-accent); }
.seg-top { display: flex; align-items: baseline; gap: 8px; }
.seg-count { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--sz-text-primary); }
.seg[aria-pressed="true"] .seg-count { color: var(--sz-accent-fg); }
.seg-label { font-size: 14px; font-weight: 600; color: var(--sz-text-primary); }
.seg-sub { margin-top: 4px; font-size: 13px; color: var(--sz-text-muted); }

/* ── KPI (DS KpiCard) ───────────────────────────────────── */
.kpi {
  background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-radius);
  padding: 20px 24px;
  transition: box-shadow var(--sz-transition), transform var(--sz-transition);
}
.kpi:hover { box-shadow: var(--sz-shadow-hover); transform: translateY(-2px); }
.kpi-chip { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--sz-accent-soft); color: var(--sz-accent-fg); border-radius: var(--sz-radius-sm); }
.kpi-value { font-family: var(--sz-font-display); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--sz-text-primary); margin: 14px 0 4px; }
.kpi-label { font-size: 14px; font-weight: 300; color: var(--sz-text-muted); }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--sz-success); }
.kpi-delta.down { color: var(--sz-danger); }
.kpi-nota { margin-top: 8px; font-size: 13px; color: var(--sz-text-muted); }

/* ── Estados de carga e falha ───────────────────────────── */
.carregando { padding: 96px 24px; text-align: center; font-size: 15px; color: var(--sz-text-muted); }
.falha { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 24px; text-align: center; }
.falha b { font-size: 16px; color: var(--sz-text-primary); }
.falha span { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12.5px; color: var(--sz-danger); }

/* ── Card genérico ──────────────────────────────────────── */
.card { background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-radius); margin-bottom: 16px; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--sz-surface-2); border-bottom: 1px solid var(--sz-border); }
.overline { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sz-text-muted); }
.legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--sz-text-muted); }
.legend > span { display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 2px; }
.dot-pre { background: var(--sz-text-primary); }
.dot-pos { background: var(--sz-accent); }

/* ── Faixa de métricas ──────────────────────────────────── */
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.metric { padding: 18px 24px; border-right: 1px solid var(--sz-border); }
.metric:last-child { border-right: none; }
.metric-label { font-size: 13px; color: var(--sz-text-muted); min-height: 34px; line-height: 1.3; }
.metric-vals { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
.metric-pre, .metric-pos { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.metric-pre { color: var(--sz-text-primary); }
.metric-pos { color: var(--sz-accent-fg); }
.metrics-nota { padding: 12px 24px; background: var(--sz-surface-2); border-top: 1px solid var(--sz-border); font-size: 12px; color: var(--sz-text-muted); }

/* ── Sobreposição + matriz ──────────────────────────────── */
.split { display: grid; grid-template-columns: 420px 1fr; background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-radius); margin-bottom: 16px; overflow: hidden; }
.split > div { padding: 24px 28px; }
.split > div:first-child { border-right: 1px solid var(--sz-border); }
.split .overline { display: block; margin-bottom: 4px; }
.split-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--sz-text-primary); margin-bottom: 8px; }
.split-title.tight { margin-bottom: 18px; }
/* Só as duas matrizes: o card ocupa a linha inteira. */
.split-solo { grid-template-columns: 1fr; }
.mx-wrap { display: flex; flex-direction: column; }
.mx-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mx-pane { min-width: 0; }
.mx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sz-border); }
.mx-bot { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--sz-text-primary); }
.mx-sum { font-size: 12px; color: var(--sz-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.matrix { display: grid; grid-template-columns: 88px repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
.matrix-col { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sz-text-muted); }
.matrix-row-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sz-text-muted); text-align: right; padding-right: 8px; }
.matrix-cell { height: 58px; display: flex; align-items: center; justify-content: center; padding: 0; font-family: var(--sz-font); font-size: 20px; font-weight: 800; border: 1px solid var(--sz-border); border-radius: var(--sz-radius-btn); cursor: pointer; transition: box-shadow var(--sz-transition-fast), transform var(--sz-transition-fast), border-color var(--sz-transition-fast); }
.matrix-cell:hover:not(:disabled) { border-color: var(--sz-accent); box-shadow: var(--sz-shadow-hover); transform: translateY(-1px); }
.matrix-cell:disabled { cursor: default; }
.matrix-legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--sz-text-muted); }
.mx-fora { margin-top: 10px; font-size: 12px; color: var(--sz-text-muted); }

/* ── Fluxo ──────────────────────────────────────────────── */
.flow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px 28px 18px; }
.flow-head .overline { display: block; margin-bottom: 6px; }
.flow-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--sz-text-primary); }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--sz-surface-2); border: 1px solid var(--sz-border); border-radius: var(--sz-radius-btn); }
.tab { cursor: pointer; padding: 7px 16px; font-family: var(--sz-font); font-size: 13px; font-weight: 600; border: none; border-radius: 6px; background: transparent; color: var(--sz-text-muted); transition: background var(--sz-transition-fast), color var(--sz-transition-fast); }
.tab[aria-pressed="true"] { background: var(--sz-surface); color: var(--sz-text-primary); }
.flow-stats { display: flex; flex-wrap: wrap; gap: 28px; padding: 0 28px 14px; }
.flow-stat { display: flex; align-items: center; gap: 8px; }
.flow-stat i { display: block; width: 10px; height: 10px; border-radius: 3px; }
.flow-stat span { font-size: 13px; color: var(--sz-text-muted); }
.flow-stat b { font-size: 13px; font-weight: 700; color: var(--sz-text-primary); }
.flow-stat-nota { flex-basis: 100%; margin-top: 2px; font-size: 12px; color: var(--sz-text-muted); }
.flow-scroll { padding: 8px 28px 32px; overflow-x: auto; }
/* Altura casada com FLOW_H em app.js — a coluna de desfechos tem 6 nós. */
.flow-canvas { position: relative; width: 1250px; height: 630px; }
.flow-canvas > svg { position: absolute; inset: 0; }
.node {
  position: absolute; width: 210px; padding: 12px 14px; text-align: left;
  font-family: var(--sz-font); cursor: pointer;
  background: var(--sz-surface); border: 1px solid var(--sz-border); border-left: 3px solid;
  border-radius: var(--sz-radius-btn); box-shadow: var(--sz-shadow-sm);
  transition: box-shadow var(--sz-transition-fast), transform var(--sz-transition-fast), border-color var(--sz-transition-fast);
}
.node:hover:not(:disabled) { border-color: var(--sz-accent); box-shadow: var(--sz-shadow-hover); transform: translateY(-2px); }
.node:disabled { cursor: default; opacity: 0.72; }
.node-label { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--sz-text-primary); min-height: 32px; }
.node-vals { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.node-val { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.node-share { font-size: 12px; color: var(--sz-text-muted); }

/* ── Tabela ─────────────────────────────────────────────── */
.table-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px 16px; }
.table-head .overline { display: block; margin-bottom: 6px; }
.table-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--sz-text-primary); }
.table-count { font-size: 13px; color: var(--sz-text-muted); white-space: nowrap; }
.table-tools { display: flex; align-items: center; gap: 18px; }
.field { display: inline-flex; align-items: center; gap: 8px; }
.field > span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sz-text-muted); }
.field select { padding: 7px 10px; font-family: var(--sz-font); font-size: 13px; font-weight: 600; color: var(--sz-text-primary); background: var(--sz-surface); border: 1.5px solid var(--sz-border-strong); border-radius: var(--sz-radius-btn); cursor: pointer; }
.field select:hover { border-color: var(--sz-accent); }
.field select:focus { outline: none; border-color: var(--sz-accent); }
.table-scroll { overflow-x: auto; }
.table-inner { min-width: 1340px; }
/* Empresa · Contato · Bots · Funil · Pré-venda · Closer · Interesse · Atividade */
.trow { display: grid; grid-template-columns: minmax(210px, 1.2fr) minmax(170px, 1fr) 116px 112px 150px 150px 172px 132px; padding: 0 24px; }
.resp-nome { font-size: 14px; font-weight: 600; color: var(--sz-text-primary); }
.resp-tel { margin-top: 2px; font-size: 12px; color: var(--sz-text-muted); font-variant-numeric: tabular-nums; }
/* Organização cadastrada no CRM, mas sem negócio no funil do evento. */
.crm-nota { margin-top: 4px; font-size: 11px; color: var(--sz-accent-fg); }
.closer-nome { font-size: 14px; font-weight: 600; color: var(--sz-text-primary); }
.closer-sem { font-size: 13px; color: var(--sz-text-muted); }
.thead { background: var(--sz-surface-2); border-top: 1px solid var(--sz-border); border-bottom: 1px solid var(--sz-border); }
/* Tabela toda centralizada — cabeçalho e conteúdo. */
.th { cursor: pointer; user-select: none; padding: 11px 8px; font-family: var(--sz-font); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sz-text-muted); background: none; border: none; text-align: center; white-space: nowrap; }
.th.sorted { color: var(--sz-text-primary); }
.row { align-items: center; border-bottom: 1px solid var(--sz-border); cursor: pointer; transition: background var(--sz-transition-fast); }
.row:hover { background: var(--sz-surface-2); }
.cell { padding: 14px 8px; text-align: center; }
.cell.right { font-variant-numeric: tabular-nums; }
.co-nome { font-size: 14px; font-weight: 600; color: var(--sz-text-primary); }
.co-cnpj { margin-top: 2px; font-size: 12px; color: var(--sz-text-muted); font-variant-numeric: tabular-nums; }
/* CNPJ do CRM difere do que o lead digitou no chat. */
.co-alerta { margin-left: 6px; padding: 1px 6px; border-radius: var(--sz-radius-full); font-size: 10.5px; font-weight: 700; background: var(--sz-warning-bg); color: var(--sz-warning); }
.num { font-size: 14px; font-weight: 600; }
.niveis { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.nivel { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--sz-radius-full); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nivel-0 { background: var(--sz-surface-2); color: var(--sz-text-muted); }
.nivel-1 { background: var(--sz-accent-soft); color: var(--sz-accent-fg); }
.nivel-2 { background: var(--sz-accent); color: var(--sz-accent-on); }
/* Sem conversa naquele bot: ausência de dado, não interesse baixo. */
.nivel-sem { background: transparent; color: var(--sz-text-muted); box-shadow: inset 0 0 0 1px var(--sz-border-strong); }
.table-foot { padding: 14px 24px; background: var(--sz-surface-2); font-size: 13px; color: var(--sz-text-muted); }
.empty { padding: 48px 24px; text-align: center; font-size: 14px; color: var(--sz-text-muted); }

/* ── Painel de detalhe ──────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: var(--sz-z-modal); background: var(--sz-overlay); display: flex; justify-content: flex-end; }
.panel { width: 640px; max-width: 92vw; height: 100%; overflow-y: auto; background: var(--sz-surface); box-shadow: var(--sz-shadow-lg); }
.panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 28px; background: var(--sz-surface); border-bottom: 1px solid var(--sz-border); }
.panel-nome { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--sz-text-primary); }
.panel-sub { margin-top: 4px; font-size: 13px; color: var(--sz-text-muted); font-variant-numeric: tabular-nums; }
.panel-body { padding: 24px 28px 40px; }
.panel-overline { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sz-text-muted); }
.panel-overline.spaced { margin-top: 28px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sz-border); border: 1px solid var(--sz-border); border-radius: var(--sz-radius); overflow: hidden; margin-bottom: 24px; }
.stat { padding: 14px 16px; background: var(--sz-surface-2); }
.stat-label { font-size: 12px; color: var(--sz-text-muted); min-height: 30px; line-height: 1.3; }
.stat-value { margin-top: 2px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--sz-text-primary); }
.splitbar { display: flex; height: 34px; border-radius: var(--sz-radius-btn); overflow: hidden; border: 1px solid var(--sz-border); }
.splitbar-pre { background: var(--sz-text-primary); color: var(--sz-surface); }
.splitbar-pos { flex: 1; background: var(--sz-accent); color: var(--sz-accent-on); }
.splitbar > div { display: flex; align-items: center; padding-left: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.insight { margin-top: 8px; font-size: 13px; color: var(--sz-text-muted); text-wrap: pretty; }
.insight.aviso { padding: 10px 12px; background: var(--sz-warning-bg); color: var(--sz-warning); border-radius: var(--sz-radius-btn); font-weight: 500; }
.outcomes { display: flex; flex-direction: column; gap: 8px; }
.outcome { display: flex; align-items: center; gap: 12px; }
.outcome-label { width: 168px; font-size: 13px; color: var(--sz-text-body); }
.outcome-track { flex: 1; height: 8px; background: var(--sz-surface-2); border-radius: 4px; overflow: hidden; }
.outcome-fill { display: block; height: 8px; border-radius: 4px; }
.outcome-pct { width: 46px; text-align: right; font-size: 13px; font-weight: 700; color: var(--sz-text-primary); font-variant-numeric: tabular-nums; }
.convs { display: flex; flex-direction: column; gap: 8px; }
.conv { cursor: pointer; display: grid; grid-template-columns: 92px 1fr 108px; align-items: center; gap: 12px; padding: 12px 14px; font-family: var(--sz-font); text-align: left; background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-radius-btn); transition: background var(--sz-transition-fast), border-color var(--sz-transition-fast); }
.conv:hover { background: var(--sz-surface-2); border-color: var(--sz-border-strong); }
.conv-bot { font-size: 12px; font-weight: 600; }
/* No painel de um nó do funil a primeira coluna é o nome da empresa, que
   precisa de mais espaço que o rótulo "Iris-pré". */
.convs-no .conv { grid-template-columns: minmax(0, 150px) 1fr 104px; }
.convs-no .conv-bot { font-size: 13px; font-weight: 700; color: var(--sz-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-intent { display: block; font-size: 13px; font-weight: 600; color: var(--sz-text-primary); }
.conv-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--sz-text-muted); }
.conv-out { text-align: right; }
.back { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 0; font-family: var(--sz-font); font-size: 13px; font-weight: 600; color: var(--sz-accent-fg); background: none; border: none; }
.conv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--sz-surface-2); border: 1px solid var(--sz-border); border-radius: var(--sz-radius); margin-bottom: 22px; }
.conv-head-intent { font-size: 14px; font-weight: 700; color: var(--sz-text-primary); }
.conv-head-meta { margin-top: 3px; font-size: 12px; color: var(--sz-text-muted); }
.msgs { display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; flex-direction: column; gap: 4px; }
.msg.bot { align-items: flex-start; }
.msg.user { align-items: flex-end; }
.bubble { max-width: 78%; padding: 11px 14px; font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.msg.bot .bubble { background: var(--sz-surface-2); color: var(--sz-text-body); border-radius: 12px 12px 12px 4px; }
.msg.user .bubble { background: var(--sz-accent); color: var(--sz-accent-on); border-radius: 12px 12px 4px 12px; }
.msg-who { font-size: 11px; color: var(--sz-text-muted); }
.bubble-audio { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; margin: -14px 0 20px; }
.tag { padding: 3px 9px; font-size: 11px; font-weight: 600; color: var(--sz-text-muted); background: var(--sz-surface-2); border: 1px solid var(--sz-border); border-radius: var(--sz-radius-full); }

.colist { display: flex; flex-direction: column; gap: 10px; }
.co { padding: 14px 16px; background: var(--sz-surface); border: 1px solid var(--sz-border); border-radius: var(--sz-radius); }
.co-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.co-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 12px; }
.co-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-field span { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sz-text-muted); }
.co-field b { font-size: 13.5px; font-weight: 600; color: var(--sz-text-primary); }
.co-field b.co-none { color: var(--sz-text-muted); font-weight: 400; }
.co-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; font-family: var(--sz-font); font-size: 13px; font-weight: 600; color: var(--sz-accent-fg); background: none; border: none; cursor: pointer; }

/* ── Telas menores ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .topbar { gap: 14px; padding: 0 20px; }
  .search { width: 220px; }
  .page { padding: 28px 20px 56px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric:nth-child(3n) { border-right: none; }
  .split { grid-template-columns: 1fr; }
  .split > div:first-child { border-right: none; border-bottom: 1px solid var(--sz-border); }
}
@media (max-width: 900px) {
  .mx-pair { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .crumb, .periodo { display: none; }
  .head { flex-direction: column; align-items: stretch; gap: 16px; }
  .head h1 { font-size: 26px; }
  .grid-4 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3n) { border-right: 1px solid var(--sz-border); }
  .metric:nth-child(2n) { border-right: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .panel-body, .panel-head { padding-left: 18px; padding-right: 18px; }
}