:root {
  --fundo: #f7f6f3;
  --papel: #ffffff;
  --texto: #1c1b19;
  --suave: #625f5a;
  --borda: #e0ddd6;
  --acento: #0f6b4f;
  --acento-fraco: #e6f1ec;
  --alerta: #a33a2a;
  --alerta-fraco: #fbecea;
  --raio: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #16171a;
    --papel: #1e2024;
    --texto: #e8e6e3;
    --suave: #a3a09b;
    --borda: #32353b;
    --acento: #4dbd93;
    --acento-fraco: #17302a;
    --alerta: #e88a7a;
    --alerta-fraco: #33211e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 4rem;
  max-width: 62rem;
  margin-inline: auto;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- topo e abas ---------- */
.topo { padding: 2rem 0 1rem; }
.topo h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; }
.sub { margin: 0.25rem 0 0; color: var(--suave); }

.status {
  margin-top: 1rem; padding: 0.75rem 1rem;
  background: var(--alerta-fraco); border: 1px solid var(--alerta);
  border-radius: var(--raio); color: var(--alerta); font-size: 0.9rem;
}
.status p { margin: 0.25rem 0; }

.abas { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--borda); margin-bottom: 1.5rem; }
.abas button {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 0.6rem 0.9rem; font: inherit; color: var(--suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas button[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

/* ---------- conversa ---------- */
.conversa { display: flex; flex-direction: column; gap: 1rem; min-height: 8rem; }

.bolha {
  padding: 0.9rem 1.1rem; border-radius: var(--raio);
  border: 1px solid var(--borda); background: var(--papel);
}
.bolha.usuario { background: var(--acento-fraco); border-color: transparent; align-self: flex-end; max-width: 85%; }
.bolha > :first-child { margin-top: 0; }
.bolha > :last-child { margin-bottom: 0; }

.pensando { margin-bottom: 0.75rem; font-size: 0.85rem; color: var(--suave); }
.pensando summary { cursor: pointer; }
.pensando div { white-space: pre-wrap; padding-top: 0.5rem; }

.ferramentas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.chip {
  font-size: 0.78rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--acento-fraco); color: var(--acento); border: 1px solid transparent;
}
.chip.pronto::before { content: "✓ "; }
.chip.falhou { background: var(--alerta-fraco); color: var(--alerta); }

.uso { font-size: 0.75rem; color: var(--suave); margin: 0.75rem 0 0; }
.erro { color: var(--alerta); }

/* ---------- formulários ---------- */
.barra-envio { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
textarea, input, select {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit;
  color: var(--texto); background: var(--papel);
  border: 1px solid var(--borda); border-radius: var(--raio);
}
textarea { resize: vertical; }
label { display: block; font-size: 0.85rem; color: var(--suave); margin-bottom: 0.7rem; }
label input, label select { margin-top: 0.2rem; }

button[type="submit"], .acoes-envio button {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  padding: 0.55rem 1.1rem; border-radius: var(--raio);
  background: var(--acento); color: #fff; border: 1px solid transparent;
}
button.secundario, #parar {
  background: transparent; color: var(--suave); border-color: var(--borda); font-weight: 400;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
.acoes-envio { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.exemplos { margin-top: 1.5rem; font-size: 0.9rem; color: var(--suave); }
.exemplos summary { cursor: pointer; }
.exemplos ul { list-style: none; padding: 0.5rem 0 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.exemplo {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  background: var(--papel); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 0.5rem 0.75rem; width: 100%;
}

/* ---------- cartões ---------- */
.cartao {
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.1rem; margin-bottom: 1rem;
}
.cartao h2, .cartao h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.dica, .nota, .obs { font-size: 0.85rem; color: var(--suave); }
.nota { margin: 0 0 1.25rem; }
.dica { margin: 0 0 0.9rem; }

.grade-calc { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .grade-calc { grid-template-columns: 1fr 1fr; } }

.linha { display: grid; gap: 0 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .linha { grid-template-columns: 1fr 1fr; } }

output { display: block; margin-top: 0.9rem; }
.veredito { font-weight: 700; color: var(--acento); margin: 0.6rem 0 0.2rem; }

table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--borda); }
thead th { color: var(--suave); font-weight: 600; }
table.resultado th { color: var(--suave); font-weight: 400; width: 55%; }
.rolagem { overflow-x: auto; }

/* ---------- multi-busca ---------- */
.largo { margin-top: 1rem; }
.rotas { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.rota { border: 1px solid var(--borda); border-radius: var(--raio); padding: 0.7rem; }
.rota h4 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.rota a { display: block; font-size: 0.85rem; padding: 0.15rem 0; color: var(--acento); }
.fontes { list-style: none; padding: 0; margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--suave); }

/* ---------- rodapé ---------- */
.rodape { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); font-size: 0.82rem; color: var(--suave); }

a { color: var(--acento); }
code { background: var(--acento-fraco); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.88em; }
pre { background: var(--acento-fraco); padding: 0.8rem; border-radius: var(--raio); overflow-x: auto; }
pre code { background: none; padding: 0; }