/* ── Prospecção automática (spec 2026-10-22) ─────────────────────────────────
   O cartão do robô no topo de Envios WhatsApp: a 390 px primeiro, botões cheios,
   só tokens do design system. A cor vem do tema (claro e escuro iguais). */
#app-shell .autopilot { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
#app-shell .autopilot[hidden] { display: none; }
#app-shell .autopilot__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
#app-shell .autopilot__head h2 { margin: 0; text-wrap: balance; }
#app-shell .autopilot__status { margin: 0; color: var(--fg); font-size: var(--text-lg); line-height: 1.4; text-wrap: pretty; }
#app-shell .autopilot__status[data-tone="danger"] { color: var(--red); }
#app-shell .autopilot__meter {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  color: var(--fg-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
#app-shell .autopilot__actions { display: grid; gap: var(--sp-2); }
/* O aviso só ocupa lugar quando tem o que dizer. */
#app-shell .autopilot > .feedback:empty { display: none; }
#app-shell .autopilot__how { display: grid; gap: var(--sp-2); margin: 0; padding-left: var(--sp-5); color: var(--fg-secondary); }
#app-shell .autopilot__explain { display: grid; gap: var(--sp-4); }
#app-shell .autopilot__example { display: grid; gap: var(--sp-2); margin: 0; }
#app-shell .autopilot__example figcaption { color: var(--fg-secondary); font-size: var(--text-sm); }
#app-shell .autopilot__example blockquote {
  margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg);
  background: var(--surface-alt); color: var(--fg); white-space: pre-line;
}
#app-shell .autopilot__consent { display: flex; align-items: flex-start; gap: var(--sp-3); line-height: 1.4; cursor: pointer; }
#app-shell .autopilot__consent .ds-check { flex: none; margin-top: var(--sp-1); }
#app-shell :is(.autopilot__queries, .autopilot__contact) { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
#app-shell :is(.autopilot__queries, .autopilot__contact) > summary {
  display: flex; align-items: center; min-height: var(--control-lg);
  cursor: pointer; font-weight: var(--weight-semibold);
}
#app-shell .autopilot__queries[open] { display: grid; gap: var(--sp-3); }
#app-shell .autopilot__queries textarea { width: 100%; resize: vertical; }
#app-shell .autopilot__recent { display: grid; gap: var(--sp-2); }
#app-shell .autopilot__recent h3 { margin: 0; font-size: var(--text-md); }
#app-shell .autopilot__hint { margin: 0; color: var(--fg-secondary); font-size: var(--text-sm); }
#app-shell .autopilot__steps { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-3); }

/* No computador os botões ficam lado a lado, do tamanho do texto, e o texto numa largura de leitura. */
@media (min-width: 768px) {
  #app-shell :is(.autopilot__actions, .autopilot__steps) { grid-auto-flow: column; justify-content: start; }
  #app-shell .autopilot__steps > small { grid-column: 1 / -1; grid-row: 2; }
  #app-shell .autopilot .ds-button--block { width: auto; }
  #app-shell .autopilot :is(.autopilot__explain, .autopilot__queries, .autopilot__status, .autopilot__recent) { max-width: var(--measure); }
  #app-shell .autopilot__queries > .ds-button { justify-self: start; }
}