/* ========================================
   HOME PAGE CLEANUP - PROFESSIONAL & CLEAN
   ======================================== */

/* Fix preview box to match upload button style */
html body .previewBox {
  min-height: 82px !important;
  max-height: 82px !important; /* Match upload button height */
  border-radius: 18px !important; /* Match upload button radius */
  border: 1px dashed rgba(255,255,255,.22) !important; /* Match upload button border */
  background: rgba(0,0,0,.28) !important; /* Match upload button background */
  box-shadow: 0 12px 40px rgba(0,0,0,.35) !important;
  transition: max-height 0.4s ease, border-style 0.3s ease !important;
}

/* Remove the weird stripe gradient */
html body .previewBox:before {
  display: none !important;
}

/* When output video is ready, expand preview box */
html body .previewBox.hasVideo {
  background: rgba(0,0,0,.18) !important;
  border-style: solid !important; /* Solid border when video ready */
  border-color: rgba(255,255,255,.18) !important;
  max-height: none !important; /* Allow expansion for video */
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transition: max-width .4s ease, max-height .4s ease, border-style .3s ease !important;
}

/* Remove duplicate hasVideo:before rule */
html body .previewBox.hasVideo:before {
  display: none !important;
}

/* Add spacing to actions section to prevent overlap */
html body .actions {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Make generate buttons MORE VISIBLE after video upload */
html body #btnRun,
html body #btnGenerate {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 18px 24px !important; /* Larger padding */
  min-height: 64px !important; /* Taller button */
  border-radius: 18px !important;
  border: 2px solid rgba(124,58,237,0.5) !important; /* Thicker, more visible border */
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(124,58,237,0.08)) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.3) inset,
              0 16px 48px rgba(124,58,237,0.25) !important; /* Purple glow */
  font-size: 16px !important; /* Larger text */
  font-weight: 700 !important;
  color: rgba(255,255,255,0.95) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

html body #btnRun:hover,
html body #btnGenerate:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(124,58,237,0.7) !important;
  background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(124,58,237,0.12)) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,0.4) inset,
              0 20px 60px rgba(124,58,237,0.35) !important;
}

html body #btnRun:active,
html body #btnGenerate:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Add a pulsing effect to draw attention to generate button */
@keyframes generatePulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(124,58,237,0.3) inset,
                0 16px 48px rgba(124,58,237,0.25);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(124,58,237,0.5) inset,
                0 16px 48px rgba(124,58,237,0.4);
  }
}

/* Pulse when video is uploaded and ready to generate */
html body #btnRun:not(:disabled),
html body #btnGenerate:not(:disabled) {
  animation: generatePulse 2s ease-in-out infinite !important;
}

html body #btnRun:disabled,
html body #btnGenerate:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  animation: none !important;
}

/* Simplify hero section for cleaner look */
html body .hero .h1 {
  font-size: 42px !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

html body .hero .sub {
  font-size: 17px !important;
  line-height: 1.5 !important;
  max-width: 600px !important;
  margin: 0 auto 32px !important;
}

/* Cleaner demo card header */
html body .demoTop {
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

html body .demoTitle {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.95) !important;
}

/* Simplify chips */
html body .chips {
  gap: 8px !important;
}

html body .chip {
  padding: 6px 12px !important;
  font-size: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}

/* Mobile optimizations */
@media only screen and (max-width: 768px) {
  html body .hero .h1 {
    font-size: 32px !important;
  }
  
  html body .hero .sub {
    font-size: 15px !important;
  }
  
  html body #btnRun {
    padding: 16px 20px !important;
    min-height: 56px !important;
    font-size: 15px !important;
  }
  
  html body .previewBox.hasVideo {
    max-width: 100% !important;
  }
}

/* Extra small screens */
@media only screen and (max-width: 480px) {
  html body .hero .h1 {
    font-size: 28px !important;
  }
  
  html body .hero .sub {
    font-size: 14px !important;
  }
  
  html body #btnRun {
    padding: 14px 18px !important;
    min-height: 52px !important;
    font-size: 14px !important;
  }
}