/* ✨ Find targets with AI — the block inside the 🎯 Targets panel.
 * Spec: docs/superpowers/specs/2026-09-25-ai-find-targets-design.md §7.
 *
 * Its own file so the editor's shared style.css (being reworked elsewhere)
 * is untouched. Mobile-first: everything wraps, nothing has a fixed width,
 * and every child may shrink (min-width: 0), so a 390 px phone never
 * scrolls sideways. Colours come from style.css's tokens; the one new
 * colour is the suggestion violet, which is ALSO what the dashed boxes on
 * the video use (ai-targets.js reads it from --ait-suggest), so the list
 * and the picture say "suggestion" in the same colour.
 */
:root { --ait-suggest: #b99cff; --ait-suggest-strong: #d6c6ff; }

.ait[hidden], .ait [hidden] { display: none !important; }
.ait {
  margin: 10px 0 6px; padding: 10px 12px 12px;
  border: 1px dashed var(--ait-suggest); border-radius: 14px;
  background: rgba(185, 156, 255, 0.05);
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
.ait .btn.wide { margin-top: 8px; }
.ait-title { font-weight: 700; font-size: 14px; color: var(--text); }
.ait .btn:disabled { opacity: .5; cursor: default; box-shadow: none; filter: none; }
#ai-targets-prompt:empty { display: none; }
#ai-targets-prompt { margin-top: 8px; min-width: 0; }

.ait-provider-row {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0;
}
.ait-provider-row label { color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.ait-provider-row select { flex: 1 1 auto; min-width: 0; max-width: 100%; }

.ait-line { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ait-line a { color: var(--accent2); font-weight: 650; }
.ait-connect { display: inline-block; margin-top: 4px; }

.ait-progress { margin-top: 8px; }
.ait-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ait-bar span { display: block; height: 100%; width: 0; background: var(--ait-suggest);
  transition: width .3s ease; }
.ait-progress-row { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 4px; min-width: 0; }
.ait-progress-row .hint { overflow-wrap: anywhere; min-width: 0; }
.ait .ait-cancel { min-height: 36px; padding: 6px 12px; font-size: 13px; flex: 0 0 auto; }

.ait-result { margin-top: 6px; min-width: 0; }
.ait-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  justify-content: space-between; margin: 6px 0; }
.ait-head b { font-size: 14px; }
.ait-head .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }

.ait-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ait-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 8px; border-radius: 12px; border: 1px dashed var(--line2);
  background: var(--panel2); min-width: 0;
}
.ait-item.on { border-color: var(--ait-suggest); box-shadow: 0 0 0 1px var(--ait-suggest) inset; }
.ait-item.added { border-style: solid; opacity: .75; }
.ait-show {
  appearance: none; background: none; border: 0; color: var(--text); cursor: pointer;
  font: inherit; font-size: 13px; text-align: left; padding: 6px 2px; min-height: 36px;
  flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere;
}
.ait-show .ait-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  border: 2px dashed var(--ait-suggest); border-radius: 2px; vertical-align: -1px; }
.ait-show .ait-conf { color: var(--muted); }
.ait-item select { flex: 1 1 140px; min-width: 0; max-width: 100%; min-height: 40px; }
.ait-item .btn { min-height: 40px; padding: 8px 12px; font-size: 14px; flex: 0 0 auto; }
.ait-item .ait-del { color: var(--muted); }
.ait-added { color: var(--green); font-size: 13px; font-weight: 650; flex: 0 0 auto; }

.ait-notes { margin: 8px 0 0; padding-left: 18px; }
.ait-notes li { color: var(--muted); font-size: 12px; margin: 2px 0; overflow-wrap: anywhere; }
.ait-meta { color: var(--muted); font-size: 12px; margin: 6px 0 0; overflow-wrap: anywhere; }
.ait-error { color: var(--red); font-size: 13px; overflow-wrap: anywhere; }