/* 
  DrumSplit Native App Experience
  A complete redesign with native mobile patterns and excellent UX
*/

/* Import all modular CSS files */
@import 'common.css';
@import 'upload-screen.css';
@import 'processing-screen.css';
@import 'result.css';
@import 'audio-player.css'; /* Add the new audio player CSS */

/* REMOVING ALL AUDIO PLAYER VISIBILITY CONTROLS */

/* Make sure action buttons stay at the bottom */
#downloadLink, 
#newSongBtn {
  position: relative;
}

/* Force proper display order in the status container */
.status-content {
  display: flex;
  flex-direction: column;
}

/* Ensure the header and status message stay at the top */
.status-header, 
.status-message {
  order: 0;
}

/* Ensure the progress elements appear after the audio player */
.progress-container,
.stages {
  order: 2;
}

/* Style for completion Lottie animation */
#completionLottieContainer {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  transform: scale(0.9);
  z-index: 10; /* Ensure it appears above other elements */
}

#completionLottieContainer.active {
  transform: scale(1);
}

/* When completion animation is visible, ensure proper spacing */
#completionLottieContainer + .status-header {
  margin-top: 5px;
}

/* Give more space to the audio player */
.audio-player {
  margin: 30px 0;
}

/* Improved transitions for status elements */
.status-title, 
.status-message,
#lottieContainer,
#completionLottieContainer,
.progress-container,
.stages,
.audio-player,
.btn-download,
.btn-new-song {
  transition: opacity 0.4s ease-out, transform 0.5s ease-out;
}

/* Ensure Lottie animations play properly */
lottie-player {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}