/* AI buttons (Hamid 2026-11-03: "purple with the AI star... a glow around it... look at how Gemini does it... the same
   with all AI buttons... it should be distinctive that it's an AI button"). One look for every button that runs the
   AI: a blue-violet-pink gradient edge, a pale violet fill, violet text, a soft violet glow and a ✦ before the label.
   Loaded last so it wins over each box's own button style. */
:root {
  --ai-1: #4f7cff; --ai-2: #8b5cf6; --ai-3: #d946ef;
  --ai-text: #5b34d6; --ai-fill: #f7f3ff; --ai-glow: rgba(139, 92, 246, 0.38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ai-text: #c4b5fd; --ai-fill: #1f1838; --ai-glow: rgba(167, 139, 250, 0.35); }
}
:root[data-theme="dark"] { --ai-text: #c4b5fd; --ai-fill: #1f1838; --ai-glow: rgba(167, 139, 250, 0.35); }

.btn.btn-ai {
  color: var(--ai-text); font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  background: linear-gradient(var(--ai-fill), var(--ai-fill)) padding-box,
              linear-gradient(120deg, var(--ai-1), var(--ai-2) 50%, var(--ai-3)) border-box;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-2) 8%, transparent), 0 2px 10px var(--ai-glow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.btn.btn-ai:not(.has-spark)::before { content: "✦"; margin-right: 6px; font-size: 0.85em;
  background: linear-gradient(120deg, var(--ai-1), var(--ai-2), var(--ai-3)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.btn.btn-ai:hover:not(:disabled) {
  color: var(--ai-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-2) 14%, transparent), 0 4px 16px var(--ai-glow);
  transform: translateY(-1px);
}
.btn.btn-ai:focus-visible { outline: 2px solid var(--ai-2); outline-offset: 2px; }
.btn.btn-ai:disabled, .btn.btn-ai[aria-disabled="true"] {
  box-shadow: none; opacity: 0.55; transform: none; cursor: default;
}
@media (prefers-reduced-motion: reduce) { .btn.btn-ai { transition: none; } .btn.btn-ai:hover { transform: none; } }