/* webmcp-forms.css — Feedback visual WebMCP declarativo 2026 (compartido)
   ═══════════════════════════════════════════════════════════════════
   Human-in-the-loop: el navegador marca visualmente el form que la IA del
   navegador está operando (:tool-form-active) y, cuando el form cambia estado
   sin toolautosubmit, pausa el envío mostrando :tool-submit-active hasta que
   un humano confirma.

   Dos variantes:
   1. Form con caja (register/login): el outline se aplica al propio <form>.
   2. Form display:contents (explorar/tienda/producto): sin caja propia, el
      outline se aplica al contenedor VISIBLE marcado con .wmcp-form-visual.

   Requiere que la página defina --purple y --emerald (todas la definen).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variante 1: form con caja ── */
form:tool-form-active {
  outline: 2px dashed var(--purple);
  outline-offset: 6px;
  border-radius: 18px;
}
form:tool-submit-active {
  outline: 2px dashed var(--emerald);
  outline-offset: 6px;
  border-radius: 18px;
  animation: wmcp-submit-pulse 1.2s ease-in-out infinite;
}
form[data-agent-active] {
  outline: 2px dashed var(--purple);
  outline-offset: 6px;
  border-radius: 18px;
}
@keyframes wmcp-submit-pulse {
  0%, 100% { outline-color: var(--emerald); }
  50% { outline-color: var(--purple); }
}

/* ── Variante 2: contenedor visible de forms display:contents ── */
form:tool-form-active .wmcp-form-visual,
form[data-agent-active] .wmcp-form-visual {
  outline: 2px dashed var(--purple, #a855f7) !important;
  outline-offset: 4px;
  border-radius: 10px;
}