/* ===================================================
   PROGRESS OVERLAY
   ===================================================
   Full-screen blocking overlay with a centered card, shown during slow
   actions (LLM calls, generation, training). Theme-aware: the card uses the
   surface and text tokens so it stays readable in dark mode instead of showing
   light text on a hardcoded white card.

   Toggle visibility by adding/removing the `is-visible` class from JS — do not
   set inline `display` styles.

     <div id="…ProgressOverlay" class="progress-overlay">
       <div class="progress-overlay__card">…</div>
     </div>
     overlay.classList.add('is-visible');
*/
.progress-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-index-max);
  align-items: center;
  justify-content: center;
  /* Scrim: a translucent black veil reads correctly over light and dark UIs. */
  background: rgba(0, 0, 0, 0.55);
}

.progress-overlay.is-visible {
  display: flex;
}

.progress-overlay__card {
  max-width: 480px;
  padding: var(--space-8) var(--space-12);
  text-align: center;
  background: var(--bg-white);
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* Wider variant for overlays with more status text (e.g. NorMistral). */
.progress-overlay__card--wide {
  max-width: 520px;
}