/* ================================================
   SHARED LOADER — Clapperboard
   Used by all feature pages. Do NOT duplicate in
   individual page CSS files.
   ================================================ */

.loader-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-body, #f4f7f9);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10000;
}

.loader-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.loader-overlay .clapperboard {
  width: 220px;
  height: 180px;
  position: relative;
}

.loader-overlay .clap {
  width: 100%;
  height: 35px;
  background-color: #111;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  animation: prep-clap 1s infinite ease-in-out;
  border-radius: 6px 6px 0 0;
  background-image: repeating-linear-gradient(
    120deg,
    #fff, #fff 30px,
    #111 30px, #111 60px
  );
}

.loader-overlay .board {
  width: 100%;
  height: 145px;
  background: linear-gradient(135deg, #333, #1a1a1a);
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 6px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px;
  text-align: center;
  gap: 12px;
}

.loader-overlay .loader-text {
  font-family: 'Courier New', monospace;
  color: var(--color-secondary, #ffc300);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: prep-loader-pulse 1.5s infinite;
}

/* Stop-generation button (ai_script only, harmless elsewhere) */
.loader-overlay .stop-generation-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}

.loader-overlay .stop-generation-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes prep-clap {
  0%, 100% { transform: rotate(0deg); }
  50%       { transform: rotate(-15deg); }
}

@keyframes prep-loader-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .loader-overlay .clapperboard {
    width: 180px;
    height: 150px;
  }

  .loader-overlay .loader-text {
    font-size: 1rem;
  }
}