:root {
  color-scheme: light dark;
  --plane: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --ring: rgba(11,11,11,.10);
  --s1: #2a78d6; --s1deep: #1c5cab; --s1soft: #9ec5f4;
  --good: #006300; --warn: #8a6100; --crit: #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --plane: #0d0d0d; --surface: #1a1a19; --ink: #fff; --ink2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --ring: rgba(255,255,255,.10);
    --s1: #3987e5; --s1deep: #86b6ef; --s1soft: #256abf;
    --good: #0ca30c; --warn: #fab219;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--plane); color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 1150px; margin: 0 auto; padding: 20px 20px 60px; }
nav { position: sticky; top: 0; z-index: 5; background: var(--plane); border-bottom: 1px solid var(--grid);
  display: flex; gap: 4px; align-items: center; padding: 10px 20px; flex-wrap: wrap; }
nav b { margin-right: 12px; }
nav button { font: 600 13.5px system-ui; color: var(--ink2); background: none; border: 0;
  padding: 6px 12px; border-radius: 7px; cursor: pointer; }
nav button.on { color: var(--s1); background: color-mix(in srgb, var(--s1) 12%, transparent); }
nav button:hover { color: var(--ink); }
nav .right { margin-left: auto; font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
h1 { font-size: 22px; margin: 4px 0 16px; letter-spacing: -.02em; }
h2 { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--ring); border-radius: 10px; padding: 14px 16px; }
.kl { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kv { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.kn { font-size: 12.5px; color: var(--ink2); }
.crit { color: var(--crit); } .good { color: var(--good); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
svg text { font: 11px system-ui; fill: var(--ink2); }
svg .tick { fill: var(--muted); } svg .val { fill: var(--ink); font-weight: 600; }
svg .gridl { stroke: var(--grid); } svg .axis { stroke: var(--grid); }
.bar { fill: var(--s1); } .bar.dim { fill: var(--s1soft); } .bar.hot { fill: var(--s1deep); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  padding: 7px 9px; border-bottom: 1px solid var(--grid); position: sticky; top: 0; background: var(--surface); }
td { padding: 7px 9px; border-bottom: 1px solid var(--grid); }
tr:hover td { background: color-mix(in srgb, var(--muted) 7%, transparent); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px; }
.pill.ok { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.pill.bad { color: var(--crit); background: color-mix(in srgb, var(--crit) 13%, transparent); }
.pill.mid { color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); }
/* Contador de acionamentos em aberto, na aba da navegação */
.badge { display: inline-block; min-width: 17px; font-size: 11px; font-weight: 700; line-height: 17px;
  text-align: center; color: #fff; background: var(--crit); border-radius: 999px; padding: 0 5px; margin-left: 4px; }
/* Pausas e Cadência: só "tem coisa aqui", sem contar. O número dessas duas é
   volume de operação normal (e sempre grande) — contá-lo na navegação vira
   ruído e faz o contador de acionamentos, que é dívida real, perder o destaque. */
.badge.ponto { min-width: 7px; width: 7px; height: 7px; padding: 0; line-height: 0;
  background: var(--s1); vertical-align: middle; margin-left: 5px; }
/* Aviso que não chegou ao humano: o agente está devendo retorno a alguém */
tr.linha-falha td { background: color-mix(in srgb, var(--crit) 8%, transparent); }
tr.linha-falha:hover td { background: color-mix(in srgb, var(--crit) 13%, transparent); }
button.act { font: 600 13.5px system-ui; color: #fff; background: var(--s1); border: 0; border-radius: 7px;
  padding: 8px 16px; cursor: pointer; }
button.act:hover { background: var(--s1deep); }
button.act[disabled] { opacity: .5; cursor: default; }
button.ghost { font: 600 13px system-ui; color: var(--ink2); background: none; border: 1px solid var(--grid);
  border-radius: 7px; padding: 6px 12px; cursor: pointer; }
button.ghost:hover { color: var(--ink); }
a { color: var(--s1); text-decoration: none; } a:hover { text-decoration: underline; }
.scroll { overflow: auto; max-height: 520px; border: 1px solid var(--ring); border-radius: 10px; background: var(--surface); }

/* login */
#login { max-width: 340px; margin: 14vh auto; }
#login input { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--grid); border-radius: 8px;
  background: var(--surface); color: var(--ink); margin: 10px 0; }
.err { color: var(--crit); font-size: 13px; min-height: 18px; }

/* editor do agente */
.agent-layout { display: grid; grid-template-columns: 290px 1fr; gap: 12px; }
@media (max-width: 900px) { .agent-layout { grid-template-columns: 1fr; } }
.filelist { background: var(--surface); border: 1px solid var(--ring); border-radius: 10px; padding: 8px;
  max-height: 640px; overflow: auto; }
.filelist .grp { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin: 10px 6px 4px; font-weight: 650; }
.filelist button { display: block; width: 100%; text-align: left; font: 13.5px system-ui; color: var(--ink2);
  background: none; border: 0; border-radius: 7px; padding: 7px 9px; cursor: pointer; }
.filelist button.on { color: var(--s1); background: color-mix(in srgb, var(--s1) 11%, transparent); font-weight: 600; }
.filelist button:hover { color: var(--ink); }
#editor textarea { width: 100%; min-height: 480px; font: 13px/1.55 ui-monospace, Consolas, monospace;
  color: var(--ink); background: var(--surface); border: 1px solid var(--grid); border-radius: 10px;
  padding: 14px; resize: vertical; }
#editor textarea:focus-visible { outline: 2px solid var(--s1); }
.editbar { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.editbar .meta { font-size: 12.5px; color: var(--muted); }
.savemsg { font-size: 13px; font-weight: 600; }
.hidden { display: none !important; }
.note { font-size: 13px; color: var(--ink2); }

/* chat de teste do agente */
.chatform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
@media (max-width: 700px) { .chatform { grid-template-columns: 1fr; } }
.chatform input, #ccenario, #chinput, #acresumo { width: 100%; padding: 9px 11px; font: 14px/1.5 system-ui;
  color: var(--ink); background: var(--plane); border: 1px solid var(--grid); border-radius: 8px; }
#ccenario, #acresumo { resize: vertical; }
/* formulário de registro manual de acionamento */
#view-acionamentos label.meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
#view-acionamentos select { font: 13px system-ui; color: var(--ink); background: var(--surface);
  border: 1px solid var(--grid); border-radius: 7px; padding: 5px 8px; }
.chat { background: var(--surface); border: 1px solid var(--ring); border-radius: 10px; padding: 14px;
  height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.bolha { max-width: 76%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha.gabriel { align-self: flex-start; background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-bottom-left-radius: 3px; }
.bolha.lead { align-self: flex-end; background: color-mix(in srgb, var(--s1) 18%, transparent);
  border-bottom-right-radius: 3px; }
.acao { align-self: flex-start; font: 600 11.5px ui-monospace, Consolas, monospace; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: 6px; padding: 3px 9px; }
.acao.escalar, .acao.notificar { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.acao.crm { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
/* ações de agenda: informação, não alerta */
.acao.agendar, .acao.confirmar-reuniao, .acao.remarcar-reuniao { color: var(--s1); background: color-mix(in srgb, var(--s1) 12%, transparent); }
.acao.cancelar-reuniao { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); }
.pensando { align-self: flex-start; font-size: 13px; color: var(--muted); font-style: italic; }
.turno-meta { align-self: flex-start; font: 11px ui-monospace, Consolas, monospace; color: var(--muted);
  margin: -2px 0 4px; }
#view-chat select { font: 13px system-ui; color: var(--ink); background: var(--surface);
  border: 1px solid var(--grid); border-radius: 7px; padding: 5px 8px; max-width: 260px; }
#simnovo label.meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
#simnovo label.meta select { max-width: none; }
.chatbar { display: flex; gap: 8px; align-items: flex-end; margin: 10px 0 4px; }
.chatbar textarea { flex: 1; max-height: 140px; resize: none; }
#chavaliacao { font-size: 14px; line-height: 1.6; }
#chavaliacao h2 { margin: 18px 0 8px; }
#chavaliacao h2:first-child { margin-top: 0; }
#chavaliacao ul { margin: 6px 0; padding-left: 20px; }
#simlist .meta { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* config — WhatsApp */
#view-config input { padding: 8px 11px; font: 14px system-ui; color: var(--ink); background: var(--plane);
  border: 1px solid var(--grid); border-radius: 8px; }
#waqr img { display: block; margin: 8px 0; }
#waeventos code, #watopo code { font-size: 12px; overflow-wrap: anywhere; }