:root {
  --bg: #f3f5f9;
  --card: #ffffff;
  --text: #1b2330;
  --muted: #5d6b7e;
  --line: #dde3ec;
  --accent: #1d5fd1;
  --accent-text: #ffffff;
  --danger: #c0392b;
  --ok: #1f8f4e;
  --meter: #1d5fd1;
  --meter-alt: #8e44ad;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; gap: 10px; align-items: baseline; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #eef2f8;
  font-size: 12px;
  white-space: nowrap;
}
.chip.ok { border-color: var(--ok); color: var(--ok); background: #e9f7ef; }
.chip.bad { border-color: var(--danger); color: var(--danger); background: #fdecea; }
.chip.accent { border-color: var(--accent); color: var(--accent); background: #e8effc; font-weight: 600; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding: 12px 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 0;
}
.card.wide { grid-column: 1 / -1; }
.card h2 { margin: 0 0 10px; font-size: 15px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); margin: 8px 0 0; min-height: 1em; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.kv.small { font-size: 12px; margin-top: 8px; }

.row { display: flex; gap: 8px; align-items: center; }
.row.between { justify-content: space-between; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

button {
  font: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f6f8fb;
  color: var(--text);
  cursor: pointer;
  min-height: 36px;
}
button:hover:not(:disabled) { background: #e9eef6; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.accent { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.accent:hover:not(:disabled) { background: #174db0; }
button.danger { color: var(--danger); border-color: #efc4bf; background: #fff5f4; }
button:focus-visible { outline: 3px solid #9ec0ff; outline-offset: 1px; }

input {
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex: 1;
  min-width: 0;
}

.timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.contact { margin-top: 10px; }
.contact .name { font-weight: 600; font-size: 16px; }

.meters { margin-top: 12px; display: grid; gap: 6px; }
.meter-row { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.meter { height: 10px; background: #e6ebf3; border-radius: 999px; overflow: hidden; }
.meter .fill { height: 100%; width: 0; background: var(--meter); transition: width 120ms linear; }
.meter .fill.alt { background: var(--meter-alt); }

.history { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.history li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; font-size: 13px; }
.history .who { font-weight: 600; }
.history .qual { grid-column: 2 / -1; font-size: 12px; color: var(--muted); }
.history .qual.success { color: var(--ok); }
.history .qual.discard { color: var(--danger); }

.transcript { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; max-height: 280px; overflow: auto; }
.transcript li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.transcript li.agent { background: #e8effc; }
.transcript li.customer { background: #f3eefa; }
.transcript .who { font-weight: 600; }
.transcript .who small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.transcript .cues { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.transcript .cue { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.transcript .cue.pos { color: var(--ok); border-color: var(--ok); }
.transcript .cue.neg { color: var(--danger); border-color: var(--danger); }
.transcript .cue.state { color: #7a3e9d; border-color: #c9a7df; background: #f8f2fc; }
#transcript-links a { margin-right: 10px; }

.tabs { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.tabs li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.tabs li.principal { border-color: var(--accent); background: #e8effc; font-weight: 600; }

pre#log {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  font: 12px/1.4 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: #2d3a4d;
}

@media (max-width: 480px) {
  .meter-row { grid-template-columns: 1fr; gap: 2px; }
}

.transcript li.interim { opacity: 0.7; border-style: dashed; }
.transcript li.interim > span:nth-child(2) { font-style: italic; }
.transcript .cue.emo { color: #9a4b00; border-color: #e5b98a; background: #fff6ec; }
.transcript .cue.emo.ctx { color: #0f5e6b; border-color: #8fcbd6; background: #ecf8fa; }
.insight { display: grid; gap: 6px; }
.insight-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.insight .chip { font-size: 12px; }
.insight .chip[data-stance="aberto"] { background: #e3f6ea; color: #156b35; }
.insight .chip[data-stance="resistente"], .insight .chip[data-stance="hostil"] { background: #fde8e8; color: #a12a2a; }
.insight .interest { display: inline-flex; align-items: center; gap: 6px; }
.insight .interest-bar { display: inline-block; width: 120px; height: 8px; border-radius: 999px; background: #e6e6ef; overflow: hidden; }
.insight .interest-bar span { display: block; height: 100%; background: linear-gradient(90deg, #d9534f, #f0ad4e 50%, #3c9d5d); width: 0; transition: width 0.4s; }
.insight .next-move { margin: 0; padding: 8px 10px; border-radius: 8px; background: #fff8e1; border: 1px solid #f1d98a; font-size: 13px; }
.transcript li.refined { border-left: 3px solid #3c9d5d; }