/* BuddySocial v10.71 - mobile/app menu color + responsive players */

@media (max-width:1100px){
  /* MOBILE / TABLET / APP MENU: keep one clean readable style */
  body .retro-nav #main-nav-links .nav-primary > a,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link,
  body .retro-nav #main-nav-links .nav-more > summary,
  body .retro-nav #main-nav-links .nav-more-menu > a,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a,
  body .retro-nav #main-nav-links .nav-status-control,
  body .retro-nav #main-nav-links .nav-sound-toggle,
  body .retro-nav #main-nav-links .retro-sidemenu a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    min-height:48px !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    border:1px solid #6ba6d0 !important;
    background:linear-gradient(180deg,#4c8ac2 0%, #3b7fb8 58%, #2f6fa8 100%) !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-align:left !important;
    text-shadow:0 1px 1px rgba(0,0,0,.22) !important;
    white-space:normal !important;
    overflow:visible !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 1px 3px rgba(18,69,115,.12) !important;
  }

  body .retro-nav #main-nav-links .nav-primary > a *,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link *,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link *,
  body .retro-nav #main-nav-links .nav-more > summary *,
  body .retro-nav #main-nav-links .nav-more-menu > a *,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a *,
  body .retro-nav #main-nav-links .nav-status-control *,
  body .retro-nav #main-nav-links .nav-sound-toggle *,
  body .retro-nav #main-nav-links .retro-sidemenu a *{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body .retro-nav #main-nav-links .nav-primary > a.active,
  body .retro-nav #main-nav-links .nav-primary > a:hover,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link.active,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link:hover,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link.active,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link:hover,
  body .retro-nav #main-nav-links .nav-more.active > summary,
  body .retro-nav #main-nav-links .nav-more > summary:hover,
  body .retro-nav #main-nav-links .nav-more-menu > a.active,
  body .retro-nav #main-nav-links .nav-more-menu > a:hover,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a:hover{
    background:linear-gradient(180deg,#f5b03b 0%, #f39a13 55%, #dd8408 100%) !important;
    border-color:#ffd17c !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
  }

  body .retro-nav #main-nav-links .nav-primary > a > span:last-child,
  body .retro-nav #main-nav-links .nav-utilities > a.utility-link > span:last-child,
  body .retro-nav #main-nav-links .notification-nav-wrap > a.utility-link > span:last-child,
  body .retro-nav #main-nav-links .nav-more > summary > span:nth-child(2),
  body .retro-nav #main-nav-links .nav-more-menu > a > span:last-child,
  body .retro-nav #main-nav-links .mobile-menu-account-actions > a > span:last-child,
  body .retro-nav #main-nav-links .retro-sidemenu a > span:last-child{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:block !important;
  }

  body .retro-nav #main-nav-links .menu-icon-buddy{
    margin-right:0 !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(255,255,255,.18) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28) !important;
    font-size:16px !important;
    line-height:1 !important;
  }

  body .retro-nav #main-nav-links .nav-more-menu,
  body .retro-nav #main-nav-links .mobile-menu-account-actions{
    margin-top:8px !important;
  }

  body .retro-nav #main-nav-links .retro-search input{
    color:#214e7c !important;
    -webkit-text-fill-color:#214e7c !important;
  }
  body .retro-nav #main-nav-links .retro-search input::placeholder{
    color:#6884a0 !important;
    -webkit-text-fill-color:#6884a0 !important;
  }

  /* MOBILE / APP PLAYER: stack cleanly and prevent stretching */
  .profile-player,
  .integrated-stream-preview .profile-player,
  .player-studio-card .profile-player,
  .retro-box .profile-player{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    align-items:start !important;
    padding:14px !important;
  }

  .profile-player audio{width:100% !important; max-width:100% !important;}
  .profile-player .pp-brand,
  .profile-player .pp-controls,
  .profile-player .pp-main,
  .profile-player .pp-vinyl-wrap,
  .profile-player .pp-list-toggle,
  .profile-player .pp-playlist-list,
  .profile-player .pp-stream-info{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .profile-player .pp-brand{
    justify-self:start !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    overflow:hidden !important;
  }
  .profile-player .pp-brand img{width:34px !important; height:34px !important;}
  .profile-player .pp-brand span{max-width:none !important; white-space:normal !important; line-height:1.2 !important; font-size:11px !important;}

  .profile-player .pp-controls{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
  .profile-player .pp-controls > button{
    flex:0 0 auto !important;
  }

  .profile-player .pp-main{min-width:0 !important; display:block !important;}
  .profile-player .pp-now{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
  }
  .profile-player .pp-title{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    word-break:break-word !important;
    line-height:1.25 !important;
  }
  .profile-player .pp-live-badge,
  .profile-player .pp-listeners,
  .profile-player .pp-trackno{
    flex:0 0 auto !important;
  }

  .profile-player .pp-progress,
  .profile-player .pp-progress > span,
  .profile-player .pp-volume-inline,
  .profile-player .pp-volume{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .profile-player .pp-bottomline{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }
  .profile-player .pp-time{
    flex:1 1 auto !important;
    min-width:110px !important;
  }
  .profile-player .pp-volume-inline{
    flex:1 1 100% !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
  }
  .profile-player .pp-mute{flex:0 0 auto !important;}

  .profile-player .pp-stream-info{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
  .profile-player .pp-stream-info span{
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  .profile-player .pp-visual.pp-vinyl-wrap{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    padding:4px 0 !important;
  }
  .profile-player .pp-vinyl{
    width:min(160px,48vw) !important;
    height:min(160px,48vw) !important;
    max-width:160px !important;
    max-height:160px !important;
  }

  .profile-player .pp-list-toggle{
    display:block !important;
    text-align:center !important;
  }
  .profile-player .pp-playlist-list{
    max-height:260px !important;
    overflow:auto !important;
    padding-right:2px !important;
  }
  .profile-player .pp-track{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
  }
  .profile-player .pp-track > span,
  .profile-player .pp-track > em{flex:0 0 auto !important;}
  .profile-player .pp-track > b{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}

@media (max-width:680px){
  .profile-player,
  .integrated-stream-preview .profile-player,
  .player-studio-card .profile-player,
  .retro-box .profile-player{
    padding:12px !important;
    gap:10px !important;
  }
  .profile-player .pp-vinyl{
    width:min(142px,46vw) !important;
    height:min(142px,46vw) !important;
  }
  .profile-player .pp-controls{gap:8px !important;}
  .profile-player .pp-brand span{font-size:10px !important;}
}