:root {
  color-scheme: light dark;
  --plane: #f9f9f7; --surface: #fcfcfb; --ink: #0b0b0b; --ink2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --ring: rgba(11,11,11,.10);
  --s1: #c2558a; --s1deep: #a3416f; --s1soft: #f0b6d1;
  --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: #e38bb6; --s1deep: #f0b6d1; --s1soft: #8a3a62;
    --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; } }
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); }
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); }
/* Achado desta tarefa: só button.act tinha estilo de [disabled] — todo botão
   .ghost desabilitado durante uma requisição (Reenviar da aba Acionamentos,
   Devolver/Pausar de novo, Assumir...) ficava sem NENHUM sinal visual da
   trava, e a Task 14 é a que mais depende disso (o botão precisa parecer
   desabilitado, não só estar inerte). */
button.ghost[disabled] { opacity: .45; cursor: default; }
button.ghost[disabled]:hover { color: var(--ink2); }
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 (aba "Agente Sofia" — conteúdo chega na tarefa 5) */
.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; }
/* Achado da Task 13 (Pausas): a regra vivia só sob `.editbar`, então todo uso
   de `.meta` dentro de célula de tabela (Conversas e, agora, Pausas — telefone,
   nota, "por quem") saía sem o texto pequeno e apagado que a classe promete;
   generalizada para valer em qualquer lugar, `.editbar`/`#simlist` inclusive. */
.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 da Sofia (aba "Testar Sofia" — simulador) */
.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 { 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 { resize: vertical; }
.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.sofia { align-self: flex-start; background: color-mix(in srgb, var(--muted) 14%, transparent);
  border-bottom-left-radius: 3px; }
.bolha.cliente { 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.ferramenta { color: var(--ink2); background: color-mix(in srgb, var(--muted) 14%, 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; }

/* mídias (aba "Mídias" — biblioteca por procedimento, Storage do Supabase) */
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 22px; }
.md-item { padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.md-preview { height: 120px; border-radius: 8px; background: var(--plane); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; overflow: hidden; }
.md-preview img { width: 100%; height: 100%; object-fit: cover; }
.md-icone { font-size: 30px; line-height: 1; }
.md-nome { font-size: 12px; color: var(--ink2); text-align: center; padding: 0 8px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-chave { font: 600 12.5px ui-monospace, Consolas, monospace; color: var(--s1); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.md-legenda { width: 100%; padding: 6px 8px; font: 13px system-ui; color: var(--ink); background: var(--plane);
  border: 1px solid var(--grid); border-radius: 6px; }

/* config */
#view-config input { padding: 8px 11px; font: 14px system-ui; color: var(--ink); background: var(--plane);
  border: 1px solid var(--grid); border-radius: 8px; }

/* Linha de tabela com pendência (pausa, falha de envio, acionamento em aberto). */
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); }

/* Quem falou pelo aparelho não é a Sofia: a bolha precisa deixar isso óbvio. */
.bolha.humano { align-self: flex-start; background: color-mix(in srgb, var(--warn) 14%, transparent);
  border-bottom-left-radius: 3px; }
/* Modo sombra: a Sofia escreveu, a cliente não recebeu. */
.bolha.sofia.sombra { opacity: .62; border: 1px dashed var(--grid); }

/* Pausas: histórico de eventos por número — <details> nativo, sem JS para
   abrir/fechar. Fechado por padrão: a maioria das linhas tem um evento só e
   nem mostra o alternador (ver historicoCel em app.js). */
#tblPausas details { margin-top: 2px; }
#tblPausas summary { cursor: pointer; font-size: 12.5px; color: var(--s1); }
#tblPausas summary::marker { color: var(--muted); }

/* Fila de follow-up: um cartão por item, com o texto que sairia dentro. */
/* `--grid` é o nome da variável de borda em `public/styles.css` (claro e
   escuro). `--linha` não existe: o fallback salvaria a borda, mas fixa no tom
   claro dentro do tema escuro. */
.fu-item { border: 1px solid var(--grid); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.fu-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fu-item .bolha { margin-top: 8px; white-space: pre-wrap; }
/* Ajuste 5 (2026-09-08): pacotes vencendo com o aviso de validade desligado —
   informativo, nunca vira mensagem. Cor de aviso (mesma de `.pill.mid`), não
   de erro nem de sucesso: não é um problema, é só leitura para a equipe. */
.fu-informativo { border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--grid)); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: color-mix(in srgb, var(--warn) 6%, transparent); }
.fu-informativo table { margin-top: 6px; }

/* Formulário da campanha: os dois textareas ocupam a largura do cartão. */
#view-campanhas textarea { width: 100%; margin: 6px 0; font: inherit; padding: 8px; box-sizing: border-box; }

/* Dashboard — pendências */
.pend { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--grid); }
.pend:first-child { border-top: 0; }
.pend b { font-size: 13.5px; font-weight: 600; }
.pend .meta { font-size: 12.5px; color: var(--muted); }