/* ==========================================================================
   Mul Vidya AI — shared "AI feature" visual language.

   Every generative-AI touchpoint on the site (Generate with AI, Analyze &
   format with AI, the pdf-to-test AI toggle, AI explanations) gets its
   styling from here instead of ad-hoc rules per page, so they all look and
   animate the same way. Include this file *after* style.css on any page
   that has an AI-generation UI element (index.html, test-generator.html,
   translation-series.html, pdf-to-test.html). It only adds new classes —
   nothing here changes existing markup behaviour, so it's safe to include
   even where a given class isn't used.

   Uses the same var()-with-fallback convention as mulvidya-ai-chat.css so
   it degrades gracefully on any page, styled or not.
   ========================================================================== */

/* ---------- AI panel: wraps a "Generate with AI" / "Analyze with AI" block ---------- */
.ai-section{
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent, #6E5BD6) 35%, var(--border, #DFDFEE)) !important;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent-2, #C98A2E) 10%, transparent), transparent 60%),
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent, #6E5BD6) 10%, transparent), transparent 60%),
    var(--surface, #FFFFFF);
}
.ai-section::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent, #6E5BD6), var(--accent-3, #1E9A90), var(--accent-2, #C98A2E), var(--accent, #6E5BD6));
  background-size: 200% 100%;
  animation: ai-gradient-flow 6s linear infinite;
}
@keyframes ai-gradient-flow{ to{ background-position: -200% 0; } }

/* ---------- AI chip: small gradient badge used next to any AI-powered label ---------- */
.ai-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent, #6E5BD6), var(--accent-2, #C98A2E));
  color: var(--accent-ink, #FFFFFF);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent, #6E5BD6) 45%, transparent);
  vertical-align: middle;
  white-space: nowrap;
}
.ai-chip svg{
  width: 11px; height: 11px;
  fill: currentColor;
  flex-shrink: 0;
}
h2 .ai-chip, h3 .ai-chip{ margin-left: 8px; transform: translateY(-2px); }

/* ---------- AI status line: builds on .parse-warning / .up-status, adds an icon + gradient rail ---------- */
.ai-status{
  position: relative;
  padding-left: 30px !important;
  animation: ai-fade-in .25s ease both;
}
.ai-status::before{
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent, #6E5BD6), var(--accent-3, #1E9A90));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #6E5BD6) 18%, transparent);
}
.ai-status.is-loading::before{ animation: ai-pulse-dot 1s ease-in-out infinite; }
@keyframes ai-pulse-dot{ 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity: .55; transform: scale(.7); } }
@keyframes ai-fade-in{ from{ opacity: 0; transform: translateY(-3px); } to{ opacity: 1; transform: translateY(0); } }

/* ---------- AI action buttons: gradient variant + a real spinning icon while .is-loading ---------- */
.btn.ai-btn{
  background: linear-gradient(135deg, var(--accent, #6E5BD6), var(--accent-2, #C98A2E));
  color: var(--accent-ink, #FFFFFF);
  border: none;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent, #6E5BD6) 35%, transparent);
}
.btn.ai-btn:hover:not(:disabled){
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent, #6E5BD6) 48%, transparent);
}

.btn.is-loading{
  position: relative;
  overflow: hidden;
  opacity: 1 !important;
  cursor: progress;
}
.btn.is-loading::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent-ink, #FFFFFF) 30%, transparent) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: ai-shimmer 1.3s linear infinite;
  pointer-events: none;
}
.btn.is-loading svg{ animation: ai-spin 1s linear infinite; }
@keyframes ai-spin{ to{ transform: rotate(360deg); } }
@keyframes ai-shimmer{ from{ background-position: 140% 0; } to{ background-position: -80% 0; } }

@media (prefers-reduced-motion: reduce){
  .ai-section::before,
  .ai-status.is-loading::before,
  .btn.is-loading::after,
  .btn.is-loading svg{ animation: none; }
}

html[data-theme="dark"] .ai-chip{ color: var(--accent-ink, #12131E); }