/* Roberto Sound V20 — full live lyrics + no empty Spotify shelf + bottom-edge player dock */
:root{
  --roberto-dock-height:64px;
  --roberto-dock-safe:env(safe-area-inset-bottom,0px);
}

/* 1) Live lyrics: show the complete lyric body instead of a nested scrolling viewport. */
.spotify-live-lyrics-v17{
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
  padding-top:1rem!important;
  display:grid!important;
  grid-template-columns:minmax(190px,280px) minmax(0,1fr)!important;
  gap:.9rem 1.25rem!important;
  align-items:start!important;
}
.spotify-live-lyrics-v17[hidden]{display:none!important}
.spotify-live-lyrics-head-v17{position:sticky;top:86px;align-self:start;min-width:0!important}
.spotify-live-lyrics-lines-v17{
  max-height:none!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  padding:0!important;
  margin:0!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  scrollbar-width:none!important;
  min-width:0!important;
}
.spotify-live-lyrics-lines-v17::-webkit-scrollbar{display:none!important}
.spotify-live-lyrics-line-v17{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  margin:0!important;
  padding:.23rem 0!important;
  transform:none!important;
}
.spotify-live-lyrics-line-v17.is-active{
  transform:none!important;
  padding-left:.7rem!important;
  border-left:2px solid rgba(255,255,255,.75)!important;
}

/* 2) The playlist iframe shelf must never become a large blank rectangle.
      Keep the official Spotify embed visible only after the API reports it ready,
      and render it as a compact player rather than a 352–480px shelf. */
.spotify-chart-embed{
  display:none!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  overflow:hidden!important;
}
.spotify-chart-embed:not([hidden]).is-spotify-ready,
.spotify-chart-embed:not([hidden]):has(.spotify-iframe-host[data-ready="true"]){
  display:block!important;
}
.spotify-chart-embed[hidden]{display:none!important}
.spotify-iframe-host{
  min-height:0!important;
  height:152px!important;
  overflow:hidden!important;
  border-radius:12px!important;
}
.spotify-iframe-host iframe{
  width:100%!important;
  height:152px!important;
  min-height:152px!important;
  max-height:152px!important;
  display:block!important;
  border:0!important;
}

/* The unused custom-embed placeholder should collapse completely until a real iframe exists. */
.spotify-embed:not(:has(iframe)){
  display:none!important;
  min-height:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
}
.spotify-embed:has(iframe){
  min-height:0!important;
  padding:.5rem!important;
}
.spotify-embed:has(iframe) iframe{height:152px!important;min-height:152px!important}

/* Trim the oversized gap before the footer. */
.site-footer{
  margin-top:clamp(1.25rem,2.8vw,2.5rem)!important;
  margin-bottom:0!important;
  padding-bottom:calc(var(--roberto-dock-height) + 14px + var(--roberto-dock-safe))!important;
}

/* 3) Bottom transport becomes a real dock: flush to the viewport's bottom edge. */
.sticky-player{
  position:fixed!important;
  z-index:2147482500!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  min-height:var(--roberto-dock-height)!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:7px max(16px,env(safe-area-inset-right,0px)) calc(7px + var(--roberto-dock-safe)) max(16px,env(safe-area-inset-left,0px))!important;
  grid-template-columns:46px minmax(160px,1fr) 42px minmax(140px,1.1fr) auto!important;
  gap:.75rem!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-top:1px solid rgba(230,224,233,.22)!important;
  background:rgba(10,9,12,.96)!important;
  box-shadow:0 -18px 48px rgba(0,0,0,.38)!important;
  backdrop-filter:blur(20px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(130%)!important;
}
.sticky-player[hidden]{display:none!important}
.sticky-player img{width:46px!important;height:46px!important;border-radius:8px!important;object-fit:cover!important}
.sticky-player>div:nth-child(2){min-width:0!important;max-width:520px!important}
.sticky-player strong{font-size:.78rem!important;line-height:1.15!important}
.sticky-player span{font-size:.64rem!important;line-height:1.25!important}
.sticky-player button{min-height:38px!important}
.sticky-progress{width:100%!important;min-width:90px!important}

html{scroll-padding-bottom:calc(var(--roberto-dock-height) + 18px + var(--roberto-dock-safe))}

@media(max-width:820px){
  .spotify-live-lyrics-v17{grid-template-columns:1fr!important}
  .spotify-live-lyrics-head-v17{position:static!important}
  .sticky-player{
    grid-template-columns:40px minmax(0,1fr) 38px auto!important;
    min-height:58px!important;
    padding:6px max(10px,env(safe-area-inset-right,0px)) calc(6px + var(--roberto-dock-safe)) max(10px,env(safe-area-inset-left,0px))!important;
  }
  .sticky-player img{width:40px!important;height:40px!important}
  .sticky-progress{display:none!important}
  .sticky-player>button:last-child{display:inline-flex!important;align-items:center;justify-content:center!important}
  .site-footer{padding-bottom:calc(72px + var(--roberto-dock-safe))!important}
}

@media(max-width:520px){
  .sticky-player{grid-template-columns:38px minmax(0,1fr) 36px!important;gap:.55rem!important}
  .sticky-player img{width:38px!important;height:38px!important}
  .sticky-player>button:last-child{display:none!important}
  .spotify-iframe-host,.spotify-iframe-host iframe{height:152px!important;min-height:152px!important}
}