/* ==========================================================
   BuddySocial v10.41
   MOBILE + TABLET LAYOUT / PLAYER BUTTON FIX
   Desktop > 1100px blijft ongemoeid.
   ========================================================== */

@media (max-width:1100px){

  /* ---------- General safety ---------- */
  html, body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body *{
    box-sizing:border-box;
  }

  body img,
  body video,
  body iframe{
    max-width:100% !important;
  }

  /* Never allow ordinary page cards to force the viewport wider.
     Chat itself is deliberately excluded. */
  body :not(#friend-chat):not(#friend-chat *) .retro-box,
  body :not(#friend-chat):not(#friend-chat *) .retro-pad,
  body :not(#friend-chat):not(#friend-chat *) main,
  body :not(#friend-chat):not(#friend-chat *) section,
  body :not(#friend-chat):not(#friend-chat *) article{
    min-width:0;
  }

  .retro-content,
  .classic-profile-bg,
  .public-profile-shell,
  .pimp-page,
  .settings-page-v781{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* ---------- Header / account ---------- */
  .retro-headerin,
  .retro-navin{
    width:100% !important;
    max-width:100% !important;
  }

  .account-hub{
    max-width:100% !important;
  }

  /* ---------- Mobile/tablet menu ---------- */
  .main-nav-links{
    width:100% !important;
    max-width:100% !important;
    left:auto !important;
    right:auto !important;
  }

  .nav-primary,
  .nav-utilities,
  .mobile-menu-account-actions,
  .nav-more-menu{
    width:100% !important;
    min-width:0 !important;
  }

  .nav-primary > *,
  .nav-utilities > *,
  .mobile-menu-account-actions > *,
  .nav-more-menu > *{
    min-width:0 !important;
  }

  .nav-primary a,
  .nav-utilities a,
  .nav-more-menu a,
  .mobile-menu-account-actions a{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .retro-search{
    width:100% !important;
    min-width:0 !important;
  }

  .retro-search input{
    min-width:0 !important;
  }

  /* ---------- Generic page grids ---------- */
  .public-profile-grid,
  .settings-clean-grid,
  .stream-settings-grid,
  .player-branding-grid,
  .player-studio-grid{
    min-width:0 !important;
  }

  .public-profile-grid > *,
  .settings-clean-grid > *,
  .stream-settings-grid > *,
  .player-branding-grid > *,
  .player-studio-grid > *{
    min-width:0 !important;
    max-width:100% !important;
  }

  /* ---------- Profile responsive ---------- */
  body[data-page="profile"] .classic-profile,
  body[data-page="profile"] .classic-profile-bg{
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  body[data-page="profile"] .profile-player{
    max-width:100% !important;
  }

  /* ---------- Player: robust structure ---------- */
  .profile-player.profile-playlist{
    width:min(96%, 900px) !important;
    max-width:96% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:hidden !important;
  }

  .profile-player.profile-playlist .pp-controls{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .profile-player.profile-playlist .pp-controls > button{
    position:relative !important;
    flex:0 0 34px !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-indent:-9999px !important;
    font-size:0 !important;
    line-height:0 !important;
  }

  /* CSS drawn icons: no emoji/font dependency anymore */
  .profile-player.profile-playlist .pp-play::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-42%,-50%) !important;
    width:0 !important;
    height:0 !important;
    border-top:7px solid transparent !important;
    border-bottom:7px solid transparent !important;
    border-left:11px solid currentColor !important;
    text-indent:0 !important;
  }

  .profile-player.profile-playlist .pp-prev::before,
  .profile-player.profile-playlist .pp-next::before{
    content:"" !important;
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:0 !important;
    height:0 !important;
    text-indent:0 !important;
  }

  .profile-player.profile-playlist .pp-prev::before{
    left:11px !important;
    border-top:6px solid transparent !important;
    border-bottom:6px solid transparent !important;
    border-right:8px solid currentColor !important;
    box-shadow:6px 0 0 -2px currentColor !important;
  }

  .profile-player.profile-playlist .pp-next::before{
    right:11px !important;
    border-top:6px solid transparent !important;
    border-bottom:6px solid transparent !important;
    border-left:8px solid currentColor !important;
    box-shadow:-6px 0 0 -2px currentColor !important;
  }

  /* Extra vertical bar for previous/next */
  .profile-player.profile-playlist .pp-prev::after,
  .profile-player.profile-playlist .pp-next::after{
    content:"" !important;
    position:absolute !important;
    top:10px !important;
    width:2px !important;
    height:14px !important;
    border-radius:2px !important;
    background:currentColor !important;
  }

  .profile-player.profile-playlist .pp-prev::after{
    left:8px !important;
  }

  .profile-player.profile-playlist .pp-next::after{
    right:8px !important;
  }

  /* Main player information may shrink, buttons may not */
  .profile-player.profile-playlist .pp-main{
    min-width:0 !important;
    max-width:100% !important;
  }

  .profile-player.profile-playlist .pp-now{
    min-width:0 !important;
  }

  .profile-player.profile-playlist .pp-title{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .profile-player.profile-playlist .pp-progress,
  .profile-player.profile-playlist .pp-eq,
  .profile-player.profile-playlist .pp-bottomline,
  .profile-player.profile-playlist .pp-stream-info{
    max-width:100% !important;
    min-width:0 !important;
  }

  .profile-player.profile-playlist .pp-volume-inline{
    min-width:0 !important;
    max-width:100% !important;
  }

  .profile-player.profile-playlist .pp-volume{
    min-width:60px !important;
    max-width:100% !important;
  }

  .profile-player.profile-playlist .pp-list-toggle{
    max-width:calc(100% - 12px) !important;
  }

  /* ---------- Pimp / settings tablet safety ---------- */
  body[data-page="pimp_profile"] .pimp-shell,
  body[data-page="admin_pimp_profile"] .pimp-shell,
  body[data-page="pimp_profile"] .pimp-main,
  body[data-page="admin_pimp_profile"] .pimp-main{
    min-width:0 !important;
    max-width:100% !important;
  }

  body[data-page="pimp_profile"] input,
  body[data-page="pimp_profile"] select,
  body[data-page="pimp_profile"] textarea,
  body[data-page="settings"] input,
  body[data-page="settings"] select,
  body[data-page="settings"] textarea{
    max-width:100% !important;
  }
}

/* ==========================================================
   TABLET
   ========================================================== */
@media (min-width:701px) and (max-width:1100px){

  .retro-content,
  .classic-profile-bg,
  .pimp-page,
  .settings-page-v781{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .public-profile-grid{
    grid-template-columns:minmax(210px, .72fr) minmax(0,1.8fr) !important;
    gap:14px !important;
  }

  .profile-player.profile-playlist{
    width:92% !important;
    max-width:92% !important;
  }

  .profile-player.profile-playlist .pp-controls > button{
    flex-basis:36px !important;
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
  }

  body[data-page="pimp_profile"] .pimp-block-grid.pimp-block-grid-balanced,
  body[data-page="admin_pimp_profile"] .pimp-block-grid.pimp-block-grid-balanced{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .settings-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width:700px){

  .retro-content,
  .classic-profile-bg,
  .public-profile-shell,
  .pimp-page,
  .settings-page-v781{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .public-profile-grid,
  .settings-clean-grid,
  .settings-form-grid,
  .stream-settings-grid,
  .player-branding-grid,
  .player-studio-grid{
    grid-template-columns:1fr !important;
  }

  /* prevent side-by-side columns from squeezing mobile */
  .public-profile-grid > aside,
  .public-profile-grid > section{
    width:100% !important;
    max-width:100% !important;
  }

  .profile-player.profile-playlist{
    width:calc(100% - 8px) !important;
    max-width:calc(100% - 8px) !important;
    margin:4px auto !important;
    border-radius:9px !important;
  }

  .profile-player.profile-playlist .pp-controls{
    gap:5px !important;
  }

  .profile-player.profile-playlist .pp-controls > button{
    flex-basis:32px !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  .profile-player.profile-playlist .pp-main{
    width:100% !important;
  }

  .profile-player.profile-playlist .pp-now{
    display:flex !important;
    width:100% !important;
    gap:4px !important;
  }

  .profile-player.profile-playlist .pp-title{
    flex:1 1 auto !important;
    font-size:8.5px !important;
  }

  .profile-player.profile-playlist .pp-trackno{
    flex:0 0 auto !important;
  }

  .profile-player.profile-playlist .pp-bottomline{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:6px !important;
  }

  .profile-player.profile-playlist .pp-volume-inline{
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) !important;
    align-items:center !important;
    gap:5px !important;
    width:100% !important;
  }

  .profile-player.profile-playlist .pp-mute{
    width:28px !important;
    min-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .profile-player.profile-playlist .pp-volume{
    width:100% !important;
    min-width:0 !important;
  }

  .profile-player.profile-playlist .pp-stream-info{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
    gap:3px !important;
  }

  .profile-player.profile-playlist .pp-stream-info span{
    min-width:0 !important;
    max-width:95px !important;
  }

  body[data-page="pimp_profile"] .pimp-block-grid.pimp-block-grid-balanced,
  body[data-page="admin_pimp_profile"] .pimp-block-grid.pimp-block-grid-balanced{
    grid-template-columns:1fr !important;
  }

  .pimp-tabs-organized,
  .pimp-dashboard{
    grid-template-columns:1fr !important;
  }

  .retro-search button{
    min-width:76px !important;
  }
}

/* very narrow phones */
@media (max-width:390px){
  .profile-player.profile-playlist .pp-controls > button{
    flex-basis:30px !important;
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
  }

  .profile-player.profile-playlist .pp-listeners{
    display:none !important;
  }

  .profile-player.profile-playlist .pp-trackno{
    font-size:6.5px !important;
  }
}