/* Phase 16 D-22 — per-field AI provenance markers.
 * Pairs with existing .ai-feature-box halo (memory feedback_ai_brand_visual.md).
 * Removed via JS hook on user input event so once edited, the field loses the
 * outline + adjacent badge.
 *
 * Usage:
 *   - Add `ai-suggest` class to <input>, <select>, <textarea> that received an
 *     AI-extracted value.
 *   - Add a sibling/label-internal `<span class="ai-badge-inline">AI</span>`
 *     marker so the user knows that field came from AI.
 *   - The base.html input listener flips `.user-edited` on first keystroke
 *     and removes both the outline and the inline badge.
 */

.ai-suggest {
  outline: 1.5px solid rgba(99, 102, 241, 0.55); /* indigo halo, subtle */
  outline-offset: 1px;
  background-color: rgba(99, 102, 241, 0.04);
  transition: outline 200ms ease, background-color 200ms ease;
}

.ai-suggest:focus,
.ai-suggest:focus-visible {
  outline: 2px solid rgba(99, 102, 241, 0.85);
}

.ai-badge-inline {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, #6366F1 0%, #A855F7 100%);
  color: #ffffff;
  border-radius: 4px;
  vertical-align: middle;
  user-select: none;
}

/* Removed when user types: JS hook flips a class. */
.ai-suggest.user-edited {
  outline: none;
  background-color: transparent;
}

.ai-suggest.user-edited + .ai-badge-inline,
.ai-badge-inline.user-edited {
  display: none;
}

/* Catastro variant — deterministic OVC API source, not probabilistic AI.
 * Same auto-fill UX (halo + adjacent badge, both stripped on user edit)
 * but a distinct teal/emerald hue to signal "official cadastral data"
 * vs. the indigo→violet AI gradient.
 *
 * Usage:
 *   - Add `ai-suggest catastro-suggest` to the input.
 *   - Add `<span class="ai-badge-inline badge-catastro">Catastro</span>`
 *     inside (or next to) the label.
 */
.catastro-suggest {
  outline-color: rgba(13, 148, 136, 0.55); /* teal-600 */
  background-color: rgba(13, 148, 136, 0.05);
}

.catastro-suggest:focus,
.catastro-suggest:focus-visible {
  outline: 2px solid rgba(13, 148, 136, 0.85);
}

.ai-badge-inline.badge-catastro {
  background: linear-gradient(90deg, #0D9488 0%, #10B981 100%);
}