/* BuddySocial v10.89 - COVER INLINE FIX
   The artwork is a real 86x86 stream/MP3 cover in the LEFT column of the SAME
   top player row. It never drops below the information panel and the old round
   note/vinyl decoration stays removed. Existing player JS/audio remains untouched. */

.profile-player.profile-playlist{
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr) auto!important;
  grid-template-areas:
    "cover main controls"
    "toggle toggle toggle"
    "list list list"!important;
  grid-auto-flow:row!important;
  align-items:start!important;
  gap:6px 8px!important;
}

/* Artwork column: fixed in the first row, directly beside the information panel. */
.profile-player.profile-playlist .pp-visual.pp-vinyl-wrap{
  grid-area:cover!important;
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:start!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:86px!important;
  height:86px!important;
  min-width:86px!important;
  min-height:86px!important;
  max-width:86px!important;
  max-height:86px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  display:block!important;
  z-index:3!important;
}

.profile-player.profile-playlist .pp-vinyl{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:86px!important;
  height:86px!important;
  min-width:86px!important;
  min-height:86px!important;
  max-width:86px!important;
  max-height:86px!important;
  margin:0!important;
  padding:0!important;
  border-radius:12px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background:rgba(0,0,0,.18)!important;
}

.profile-player.profile-playlist .pp-vinyl-label{
  position:absolute!important;
  inset:0!important;
  width:86px!important;
  height:86px!important;
  margin:0!important;
  padding:0!important;
  border-radius:12px!important;
  overflow:hidden!important;
  display:block!important;
  background:rgba(0,0,0,.16)!important;
}

.profile-player.profile-playlist .pp-vinyl-cover{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:12px!important;
}

/* Completely remove the old music-note/vinyl-centre artwork. */
.profile-player.profile-playlist .pp-vinyl-hole,
.profile-player.profile-playlist .pp-vinyl-label::before,
.profile-player.profile-playlist .pp-vinyl-label::after,
.profile-player.profile-playlist .pp-vinyl::before,
.profile-player.profile-playlist .pp-vinyl::after{
  display:none!important;
  content:none!important;
}

/* Force info and controls to live in that same first row. */
.profile-player.profile-playlist .pp-main{
  grid-area:main!important;
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  min-width:0!important;
  width:100%!important;
  margin:0!important;
}
.profile-player.profile-playlist .pp-controls{
  grid-area:controls!important;
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
}
.profile-player.profile-playlist .pp-list-toggle{
  grid-area:toggle!important;
  grid-column:1 / -1!important;
  grid-row:2!important;
  width:100%!important;
  margin:0!important;
}
.profile-player.profile-playlist .pp-playlist-list{
  grid-area:list!important;
  grid-column:1 / -1!important;
  grid-row:3!important;
}

/* Tablet / app / mobile keep exactly the same inline structure. */
@media (max-width:1100px){
  .profile-player.profile-playlist{
    grid-template-columns:92px minmax(0,1fr) auto!important;
    grid-template-areas:"cover main controls" "toggle toggle toggle" "list list list"!important;
    align-items:start!important;
    gap:5px 7px!important;
  }
  .profile-player.profile-playlist .pp-visual.pp-vinyl-wrap,
  .profile-player.profile-playlist .pp-vinyl,
  .profile-player.profile-playlist .pp-vinyl-label{
    width:86px!important;
    height:86px!important;
    min-width:86px!important;
    min-height:86px!important;
    max-width:86px!important;
    max-height:86px!important;
    transform:none!important;
  }
}

@media (max-width:430px){
  .profile-player.profile-playlist{
    grid-template-columns:86px minmax(0,1fr) 70px!important;
    gap:4px 5px!important;
  }
  .profile-player.profile-playlist .pp-controls{
    width:70px!important;
    max-width:70px!important;
    justify-content:flex-end!important;
  }
}