@charset "UTF-8";

/* Keep the compact transport in place; the settings float above its top edge. */
.music-dock { z-index: 40; }
.music-player {
  position: relative;
  overflow: visible;
}

.music-player.expanded {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.music-player .player-top {
  position: relative;
  z-index: 1;
}

.music-player .player-details {
  --details-available: var(--player-expand-height, min(360px, calc(100svh - 90px)));
  position: absolute;
  bottom: calc(100% - 1px);
  left: -1px;
  right: -1px;
  display: block;
  max-height: max(0px, var(--details-available));
  overflow: hidden;
  border: 1px solid #d4dfdd;
  border-bottom: 0;
  border-radius: 17px 17px 0 0;
  background: #fafcfb;
  box-shadow: 0 -10px 30px -17px #526b7045, inset 0 1px 0 #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scaleY(.98);
  transform-origin: bottom center;
  transition: opacity .22s ease, transform .3s ease, visibility .3s;
}

.music-player.expanded .player-details {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.music-player .player-details-inner {
  /* Border-box sizing includes this padding within the viewport allowance. */
  max-height: max(0px, calc(var(--details-available) - 1px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #b7c9c9 transparent;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 12px;
}

.music-player .volume-row {
  border-top: 0;
  margin-top: 0;
  padding-top: 16px;
}

.music-player .music-intro p {
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .music-player .player-details {
    transition: none;
    transform: none;
  }
}

/* Short embeds must keep the transport reachable without scrolling the page. */
@media (max-height: 720px) {
  body {
    /* Space after both main and footer also works when focus mode hides footer. */
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .music-dock,
  .focus-mode .music-dock {
    position: fixed;
    left: 50%;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(380px, calc(100% - 24px));
    margin: 0;
  }

  .toast {
    bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }
}