/* EagleTagz demo: the sound's waveform in Micro's preview (October 2026). See micro-wave.js. */

/* ---------- a video: a slim strip along the bottom of the picture, above the progress line ---------- */
.etz-wave { display: none; position: relative; height: 40px; margin-bottom: 2px; }
#video-section.etz-wave-on .etz-wave { display: block; }
#video-section.etz-wave-on.etz-idle .etz-wave {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); /* readable once the controls fade */
}
@media (max-width: 639px) { .etz-wave { height: 32px; } }
/* the page's tips over the video move up so they don't cover the strip */
#video-section.etz-wave-on #videoLoadHelper { bottom: 112px !important; }

.etz-wave-canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: none; }
.etz-wave-canvas.etz-wave-waiting { animation: etz-wave-pulse 1.2s ease-in-out infinite; }
@keyframes etz-wave-pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .etz-wave-canvas.etz-wave-waiting { animation: none; } }

.etz-wave-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5e7eb;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.etz-wave-note:empty { display: none; }

/* ---------- an audio file: a large waveform fills the picture area ---------- */
.etz-wave-big {
  display: none;
  position: absolute;
  left: 5%;
  right: 5%;
  top: 9%;
  bottom: 104px; /* above the player controls */
  z-index: 10;
  flex-direction: column;
  gap: 12px;
}
#video-section.etz-wave-big-on .etz-wave-big { display: flex; }
.etz-wave-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #f9fafb;
  font-size: 17px;
  font-weight: 600;
}
.etz-wave-title i { color: #a3e635; }
.etz-wave-title span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.etz-wave-stage { position: relative; flex: 1; min-height: 48px; }
@media (max-width: 639px) {
  .etz-wave-big { top: 7%; bottom: 96px; gap: 8px; }
  .etz-wave-title { font-size: 15px; }
}

/* the waveform replaces the faint music note micro-player.css put in the middle of a sound file's stage */
#video-section.etz-wave-big-on::after { content: none !important; }

/* the file's name is above the waveform, so the green "Playing your upload" note isn't needed (warnings still show) */
#video-section.etz-wave-big-on #videoLoadHelper.bg-green-600 { display: none !important; }

/* an audio file has no picture to reveal, so its controls stay in view */
#video-section.etz-audio .etz-wave { display: none !important; }
#video-section.etz-audio.etz-idle .etz-bar { transform: none !important; }
#video-section.etz-audio.etz-idle .etz-bar::before { opacity: 1 !important; }

/* ---------- the Audio Track Options panel (its waveform is here now; its buttons repeated the Mode menu) ---------- */
.etz-wave-hidden { display: none !important; }