/* ============================================================================
   21st.dev loaders — adapted to vanilla CSS for this project.
   Source components: loader.tsx (multi-variant) + ai-loader.tsx (Generating).

   This project is plain HTML/CSS/JS (no React/shadcn), so the TSX components
   are reproduced 1:1 as CSS classes. All keyframes and classes are namespaced
   with `ld-` to avoid colliding with existing app.css animations
   (e.g. app.css already defines @keyframes shimmer / pulse-dot).

   Color mapping from the shadcn tokens used by the originals:
     --primary          -> var(--accent)        (#8b5cf6)
     --foreground       -> var(--text-primary)
     --muted-foreground -> var(--text-muted)
   ========================================================================== */

:root {
  --ld-primary: var(--accent, #8b5cf6);
  --ld-foreground: var(--text-primary, #f8fafc);
  --ld-muted: var(--text-muted, #71717a);
}

/* ── Wave loader (loader.tsx → WaveLoader) ───────────────────────────────── */
.ld-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  vertical-align: middle;
}
.ld-wave span {
  width: 2px;
  border-radius: 9999px;
  background: var(--ld-primary);
  animation: ld-wave 1s ease-in-out infinite;
}
.ld-wave span:nth-child(1) { height: 8px;  animation-delay: 0ms;   }
.ld-wave span:nth-child(2) { height: 12px; animation-delay: 100ms; }
.ld-wave span:nth-child(3) { height: 16px; animation-delay: 200ms; }
.ld-wave span:nth-child(4) { height: 12px; animation-delay: 300ms; }
.ld-wave span:nth-child(5) { height: 8px;  animation-delay: 400ms; }

@keyframes ld-wave {
  0%, 100% { transform: scaleY(1);   }
  50%      { transform: scaleY(0.6); }
}

/* ── Bars loader (loader.tsx → BarsLoader) ───────────────────────────────── */
.ld-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 18px;
  vertical-align: middle;
}
.ld-bars span {
  width: 4px;
  height: 100%;
  background: var(--ld-primary);
  border-radius: 1px;
  animation: ld-wave-bars 1.2s ease-in-out infinite;
}
.ld-bars span:nth-child(1) { animation-delay: 0s;   }
.ld-bars span:nth-child(2) { animation-delay: 0.2s; }
.ld-bars span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ld-wave-bars {
  0%, 100% { transform: scaleY(1);   opacity: 0.5; }
  50%      { transform: scaleY(0.6); opacity: 1;   }
}

/* ── Dots loader (loader.tsx → DotsLoader) ───────────────────────────────── */
.ld-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  vertical-align: middle;
}
.ld-dots span {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--ld-primary);
  animation: ld-bounce-dots 1.4s ease-in-out infinite;
}
.ld-dots span:nth-child(1) { animation-delay: 0ms;   }
.ld-dots span:nth-child(2) { animation-delay: 160ms; }
.ld-dots span:nth-child(3) { animation-delay: 320ms; }

@keyframes ld-bounce-dots {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50%      { transform: scale(1.2); opacity: 1;   }
}

/* ── Text shimmer loader (loader.tsx → TextShimmerLoader) ────────────────── */
.ld-text-shimmer {
  font-weight: 500;
  background: linear-gradient(
    to right,
    var(--ld-muted) 40%,
    var(--ld-foreground) 60%,
    var(--ld-muted) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: ld-shimmer 4s infinite linear;
}

@keyframes ld-shimmer {
  0%   { background-position: 200% 50%;  }
  100% { background-position: -200% 50%; }
}

/* ============================================================================
   ai-loader.tsx → contained "Generating" loader.
   ========================================================================== */
.ld-ai-loader-container {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #11131c 0%, #08090d 100%);
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  container-type: size;
  container-name: loader-container;
}

/* Scanner Background */
.ld-ai-scanner-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
  opacity: 0.8;
}

.ld-ai-scanner-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent, #8b5cf6), transparent);
  box-shadow: 0 0 15px 3px var(--accent, #8b5cf6);
  opacity: 0.6;
  animation: ld-scan 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ld-scan {
  0%, 100% { top: 0%; }
  50% { top: 100%; }
}

/* Centered Card */
.ld-ai-loader-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  width: 90%;
  max-width: 290px;
  text-align: center;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Pulsing Icon */
.ld-ai-loader-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 50%;
  color: var(--accent, #8b5cf6);
  margin-bottom: 16px;
}

.ld-ai-loader-svg {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

.ld-ai-loader-sparkle {
  color: #fff;
  animation: ld-sparklePulse 1.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes ld-sparklePulse {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

.ld-ai-loader-pulse {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--accent, #8b5cf6);
  opacity: 0;
  animation: ld-pulseOuter 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes ld-pulseOuter {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Main status */
.ld-ai-loader-status {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #fff, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Progress bar */
.ld-ai-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}

.ld-ai-progress-bar {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent, #8b5cf6) 0%, #d946ef 100%);
  width: 40%;
  animation: ld-progressIndeterminate 2.5s ease-in-out infinite;
}

@keyframes ld-progressIndeterminate {
  0% {
    width: 10%;
    transform: translateX(-100%);
  }
  50% {
    width: 40%;
  }
  100% {
    width: 20%;
    transform: translateX(500%);
  }
}

/* Caption */
.ld-ai-loader-caption {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #71717a);
  line-height: 1.4;
  margin: 0;
}

/* Structural wrapper styles */
.prod-video-pending {
  position: relative;
  overflow: hidden;
}

/* ── Skeleton media overlays (image/video being generated) ───────────────── */
.ld-skel-frame {
  position: relative;
}

.ld-skel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  text-align: center;
  padding: 8px;
}

.ld-skel-overlay__label {
  font-size: 12px;
  line-height: 1.3;
}

/* Caption under the contained ai-loader, shown over the glow */
.ld-ai-loader__caption {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
  z-index: 2;
}

/* Options Panel Styles */
.ld-ai-options-panel {
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ld-ai-option-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 4px;
}

.ld-ai-option-product {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ld-ai-option-industry {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.ld-ai-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}

.ld-ai-grid-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  min-width: 0;
}

.ld-ai-grid-label {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.ld-ai-grid-value {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* ── Responsive Container Queries for compact layouts (e.g. 16:9 aspect ratios) ── */
@container loader-container (max-height: 310px) {
  .ld-ai-loader-card {
    padding: 12px;
    border-radius: 12px;
    max-width: 92%;
  }
  .ld-ai-loader-icon-wrap {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    background: rgba(139, 92, 246, 0.08);
  }
  .ld-ai-loader-icon-wrap svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
  }
  .ld-ai-loader-status {
    font-size: 11px;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
  }
  .ld-ai-progress-track {
    margin-bottom: 8px;
    height: 3px;
  }
  .ld-ai-loader-caption {
    font-size: 9px;
  }
  .ld-ai-options-panel {
    margin-top: 8px;
    padding-top: 8px;
    gap: 4px;
  }
  .ld-ai-option-product {
    font-size: 11px;
    max-width: 180px;
  }
  .ld-ai-option-industry {
    font-size: 8px;
  }
  .ld-ai-options-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  .ld-ai-grid-item {
    flex: 1 1 calc(50% - 4px);
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.01);
  }
  .ld-ai-grid-label {
    font-size: 7px;
    margin-bottom: 0px;
  }
  .ld-ai-grid-value {
    font-size: 9px;
  }
}

@container loader-container (max-width: 280px) {
  .ld-ai-loader-card {
    padding: 14px 16px;
    border-radius: 12px;
    width: 92%;
  }
  .ld-ai-options-panel {
    margin-top: 10px;
    padding-top: 10px;
    gap: 4px;
  }
  .ld-ai-grid-item {
    padding: 6px 8px;
    border-radius: 6px;
  }
  .ld-ai-grid-value {
    font-size: 10px;
  }
}