/* Mix-desk chrome only: Play mix video popup, transport, Finish wait,
   Save to Photos glow. Does not restyle the Record camera stage. */

.mix-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.mix-progress {
  flex: 1 1 7rem;
  height: 8px;
  min-width: 5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
  cursor: pointer;
}
.mix-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--teal);
  pointer-events: none;
}

/* Recorded take sits in the top half. Page dim covers the busy song page
   (Finish-style 80%) but sits under the mix dock, so Your voice / Reverb
   stay visible and tappable. */
.mix-page-dim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1195;
  background: rgba(0, 0, 0, .8);
  pointer-events: none;
}
body.is-taking:has(#song-mix:not([hidden])) #mix-page-dim {
  display: block;
}
/* Redo: leftover mix chrome must not paint a black sheet over the live
   camera. Play mix keeps #mix-replay visible while the mix desk is up,
   even if the camera stage forgot [hidden]. */
body.is-taking:not(:has(#song-mix:not([hidden]))) #song-rec-stage:not([hidden]) ~ #mix-replay,
body.is-taking:not(:has(#song-mix:not([hidden]))) #song-rec-stage:not([hidden]) ~ #mix-page-dim,
body.is-taking:not(:has(#song-mix:not([hidden]))) #song-rec-stage:not([hidden]) ~ #take-wait {
  display: none !important;
}
.mix-replay[hidden] { display: none !important; }
.mix-replay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 44vh;
  max-height: calc(100dvh - 18rem);
  z-index: 10010;
  pointer-events: none;
}
/* Same 2-id weight as the sibling hide, later so an open Play mix wins. */
body.is-taking #song-rec-stage ~ #mix-replay:not([hidden]) {
  display: block !important;
  z-index: 10020;
  isolation: isolate;
}
.mix-replay__dim {
  display: none;
}
.mix-replay__card {
  position: relative;
  z-index: 1;
  height: 44vh;
  max-height: 100%;
  max-width: 42rem;
  margin: 0 auto;
  padding: .55rem .75rem .45rem;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: .35rem;
  pointer-events: auto;
}
.mix-replay__close {
  position: absolute;
  top: max(0.35rem, env(safe-area-inset-top));
  right: max(0.35rem, env(safe-area-inset-right));
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.mix-replay__video {
  width: 100%;
  height: 100%;
  min-height: 12rem;
  border-radius: 12px;
  background: #111;
  object-fit: contain;
}
/* One transport: Play mix on the desk drives picture + backing + voice. */
.mix-replay__bar {
  display: none;
}
.mix-replay__bar .btn {
  min-height: 44px;
  padding: .45rem .85rem;
}
/* Player-style time bar under the take: current, scrub, duration. */
.mix-replay__time {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
}
.mix-replay__now,
.mix-replay__dur {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .82rem;
  color: rgba(255, 255, 255, .82);
  min-width: 2.6rem;
  flex: none;
}
.mix-replay__dur { text-align: right; }
.mix-replay__scrub {
  flex: 1 1 auto;
  position: relative;
  height: 44px;
  min-width: 4rem;
  cursor: pointer;
  touch-action: none;
}
.mix-replay__scrub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .2);
}
.mix-replay__fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  width: 0;
  border-radius: 99px;
  background: var(--teal);
  pointer-events: none;
}
.mix-replay__knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  pointer-events: none;
}

/* Finish: ~80% dim over the whole phone, including the mix dock. */
.take-wait {
  z-index: 1400;
  background: rgba(0, 0, 0, .8);
}
.take-wait__card {
  width: min(22rem, 100%);
}
.take-wait__card p {
  font-size: 1.05rem;
  line-height: 1.4;
}

/* Ready: pulse around Save. No pointing glyph. */
#song-rec-save.is-glow,
#song-rec-export.is-glow {
  animation: mix-save-glow 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(30, 209, 207, .7);
}
@keyframes mix-save-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30, 209, 207, .55); }
  50% { box-shadow: 0 0 0 10px rgba(30, 209, 207, 0); }
}