/* ================= SCROLL + MUSIC DOCK UX FIX ================= */

/* Desktop: the document scrolls, while the left column stays in place. */
html{overflow-y:auto!important}
body{overflow-y:auto!important;overflow-x:hidden;min-height:100vh}
.app{align-items:start}

@media(min-width:761px){
  .sidebar{
    position:sticky!important;
    top:0;
    align-self:start;
    height:100vh;
    height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* Sheets and the auth gate should still lock the page behind them. */
html.sheet-open,html.sheet-open body,
html.gated,html.gated body{
  overflow:hidden!important;
}

/* Dock window controls */
.music-dock{position:fixed}
.dock-window-controls{
  position:absolute;
  top:7px;
  right:8px;
  display:flex;
  align-items:center;
  gap:4px;
  z-index:3;
}
.dock-window-controls button{
  width:25px;
  height:25px;
  border:0;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:rgba(237,243,231,.92);
  color:#607869;
  font-size:13px;
  font-weight:800;
  line-height:1;
  transition:.18s ease;
}
.dock-window-controls button:hover{
  background:#dfeadb;
  color:#365343;
  transform:translateY(-1px);
}

/* Leave room for minimize / close controls in the full player. */
.music-dock:not(.is-minimized){
  padding-right:78px;
}

/* Compact state */
.music-dock.is-minimized{
  left:auto!important;
  right:24px!important;
  width:min(330px,calc(100vw - 36px));
  min-height:54px;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:6px 68px 6px 7px;
  border-radius:17px;
}
.music-dock.is-minimized:hover{transform:translateY(-2px)}
.music-dock.is-minimized .dock-progress-wrap,
.music-dock.is-minimized .dock-wave,
.music-dock.is-minimized [data-dock-action]{
  display:none!important;
}
.music-dock.is-minimized .dock-meta small,
.music-dock.is-minimized .spotify-badge{
  display:none!important;
}
.music-dock.is-minimized .dock-cover{
  width:38px;
  height:38px;
  border-radius:11px;
}
.music-dock.is-minimized .dock-track{gap:8px}
.music-dock.is-minimized .dock-controls{gap:0}
.music-dock.is-minimized .dock-controls .dock-play{
  width:34px;
  height:34px;
}
.music-dock.is-minimized .dock-window-controls{
  top:50%;
  transform:translateY(-50%);
}

/* Fully hidden state + tiny restore button */
.music-dock.is-closed{display:none!important}
.dock-restore{
  position:fixed;
  right:22px;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:41;
  width:42px;
  height:42px;
  border:1px solid rgba(49,78,64,.14);
  border-radius:14px;
  background:rgba(255,254,250,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 14px 38px rgba(40,66,50,.14);
  color:#527c60;
  display:none;
  place-items:center;
  font-size:17px;
  cursor:pointer;
  transition:.18s ease;
}
.dock-restore:hover{transform:translateY(-2px);background:#edf3e7}
body.dock-closed .dock-restore{display:grid}

/* Give content the right amount of breathing room for each player state. */
body.dock-minimized .main{padding-bottom:95px}
body.dock-closed .main{padding-bottom:54px}

@media(max-width:760px){
  .dock-restore{
    right:12px;
    bottom:calc(76px + env(safe-area-inset-bottom,0px));
  }
  .music-dock.is-minimized{
    right:12px!important;
    bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;
    width:min(310px,calc(100vw - 24px));
  }
  body.dock-minimized .main{padding-bottom:145px}
  body.dock-closed .main{padding-bottom:92px}
}