/* BuddySocial v10.75 - Mobile/App compact player + real logout button
   Only mobile/tablet/PWA (<=1100px). Desktop intentionally untouched. */

@media (max-width:1100px){
  /* Keep every player inside its own frame and stop long music lists taking over the page. */
  .profile-player.profile-playlist{
    isolation:isolate !important;
  }

  .profile-player.profile-playlist .pp-list-toggle{
    width:100% !important;
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:8px 12px !important;
    cursor:pointer !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    overflow:hidden !important;
  }
  .profile-player.profile-playlist .pp-list-toggle::after{
    content:"▾" !important;
    flex:0 0 auto !important;
    font-size:16px !important;
    line-height:1 !important;
    transition:transform .18s ease !important;
  }
  .profile-player.profile-playlist .pp-list-toggle[aria-expanded="true"]::after{
    transform:rotate(180deg) !important;
  }

  /* Mobile/app starts closed. JS flips data-mobile-playlist-open when user asks for the list. */
  .profile-player.profile-playlist .pp-playlist-list{
    display:none !important;
    width:100% !important;
    max-height:190px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .profile-player.profile-playlist[data-mobile-playlist-open="1"] .pp-playlist-list{
    display:block !important;
  }

  .profile-player.profile-playlist .pp-track{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:24px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:7px !important;
    text-align:left !important;
  }
  .profile-player.profile-playlist .pp-track > span{
    width:24px !important;
    min-width:24px !important;
    text-align:center !important;
    overflow:hidden !important;
  }
  .profile-player.profile-playlist .pp-track > b{
    min-width:0 !important;
    display:block !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }
  .profile-player.profile-playlist .pp-track > em{
    justify-self:end !important;
  }

  /* Player content remains contained and readable, even for long station/song metadata. */
  .profile-player.profile-playlist .pp-now,
  .profile-player.profile-playlist .pp-bottomline,
  .profile-player.profile-playlist .pp-stream-info,
  .profile-player.profile-playlist .pp-brand{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .profile-player.profile-playlist .pp-title,
  .profile-player.profile-playlist .pp-brand span,
  .profile-player.profile-playlist .pp-stream-info span{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .profile-player.profile-playlist .pp-title,
  .profile-player.profile-playlist .pp-brand span{
    white-space:nowrap !important;
  }

  /* Mobile bottom-bar logout becomes a clear dedicated power button. */
  .mobilebar a.mobile-logout{
    position:relative !important;
  }
  .mobilebar a.mobile-logout .mobilebar-icon{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:9px !important;
    background:linear-gradient(180deg,#ff6a6a,#d93232) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.72) !important;
    box-shadow:0 3px 9px rgba(117,12,12,.28),inset 0 1px 0 rgba(255,255,255,.35) !important;
    font-size:18px !important;
    line-height:1 !important;
  }
  .mobilebar a.mobile-logout .mobilebar-label{
    font-weight:900 !important;
  }

  /* Same visual treatment in the opened mobile menu. */
  .mobile-menu-account-actions a[href*="page=logout"] .menu-icon-buddy{
    width:28px !important;
    height:28px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:8px !important;
    background:linear-gradient(180deg,#ff6a6a,#d93232) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.7) !important;
    box-shadow:0 2px 7px rgba(117,12,12,.22) !important;
  }
}

@media (max-width:680px){
  .profile-player.profile-playlist .pp-playlist-list{
    max-height:170px !important;
  }
  .profile-player.profile-playlist .pp-track{
    min-height:38px !important;
    padding:7px 8px !important;
  }
  .profile-player.profile-playlist .pp-list-toggle{
    min-height:40px !important;
    padding:7px 10px !important;
  }
}

@media (max-width:390px){
  .profile-player.profile-playlist .pp-playlist-list{
    max-height:150px !important;
  }
  .profile-player.profile-playlist .pp-track{
    grid-template-columns:20px minmax(0,1fr) auto !important;
    gap:5px !important;
  }
  .profile-player.profile-playlist .pp-track > span{
    width:20px !important;
    min-width:20px !important;
  }
}