/* BuddySocial v10.73 - Premium mobile/tablet/app player layout
   Desktop >=1101px deliberately untouched. */

@media (max-width:1100px){
  /* One predictable box model for every profile player skin */
  .profile-player,
  .profile-playlist,
  .integrated-stream-preview .profile-player,
  .player-studio-card .profile-player,
  .retro-box .profile-player{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    margin:0 auto !important;
    padding:14px !important;
    border-radius:20px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-areas:
      "brand"
      "main"
      "controls"
      "vinyl"
      "playlisttoggle"
      "playlist" !important;
    gap:12px !important;
    align-items:start !important;
    isolation:isolate !important;
  }

  /* Soft inner panel which works with every chosen player theme */
  .profile-player::after{
    content:"" !important;
    position:absolute !important;
    inset:8px !important;
    z-index:-1 !important;
    pointer-events:none !important;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,.24) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  .profile-player audio{display:none !important;}

  .profile-player .pp-brand{
    grid-area:brand !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:7px 9px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
    background:rgba(0,0,0,.13) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    overflow:hidden !important;
  }
  .profile-player .pp-brand img{
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    object-fit:contain !important;
    border-radius:9px !important;
  }
  .profile-player .pp-brand span{
    min-width:0 !important;
    max-width:none !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
  }

  .profile-player .pp-main{
    grid-area:main !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:12px !important;
    box-sizing:border-box !important;
    border-radius:16px !important;
    background:rgba(0,0,0,.16) !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  .profile-player .pp-now{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    margin-bottom:10px !important;
  }
  .profile-player .pp-title{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
  }
  .profile-player .pp-live-badge,
  .profile-player .pp-listeners,
  .profile-player .pp-trackno{
    flex:none !important;
    min-width:0 !important;
    padding:4px 7px !important;
    border-radius:999px !important;
    line-height:1 !important;
    font-size:10px !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    background:rgba(0,0,0,.22) !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }
  .profile-player .pp-live-badge{
    background:#e82f39 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    border-color:rgba(255,255,255,.35) !important;
  }

  .profile-player .pp-progress{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:10px !important;
    margin:2px 0 10px !important;
    border-radius:999px !important;
    overflow:hidden !important;
    background:rgba(0,0,0,.28) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-sizing:border-box !important;
  }
  .profile-player .pp-progress > span{
    display:block !important;
    height:100% !important;
    max-width:100% !important;
    border-radius:inherit !important;
  }

  .profile-player .pp-eq{
    width:100% !important;
    min-height:28px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:4px !important;
    margin:5px 0 8px !important;
    overflow:hidden !important;
  }
  .profile-player .pp-eq > span{
    flex:0 1 7px !important;
    max-width:7px !important;
    border-radius:999px 999px 3px 3px !important;
  }

  .profile-player .pp-bottomline{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:10px !important;
  }
  .profile-player .pp-time{
    min-width:88px !important;
    white-space:nowrap !important;
    font-size:11px !important;
    font-weight:800 !important;
  }
  .profile-player .pp-volume-inline{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    align-items:center !important;
    gap:7px !important;
  }
  .profile-player .pp-mute{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
  }
  .profile-player .pp-volume{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .profile-player .pp-stream-info{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    margin-top:10px !important;
  }
  .profile-player .pp-stream-info[hidden]{display:none !important;}
  .profile-player .pp-stream-info span{
    min-width:0 !important;
    max-width:100% !important;
    padding:5px 8px !important;
    border-radius:999px !important;
    background:rgba(0,0,0,.18) !important;
    border:1px solid rgba(255,255,255,.15) !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }

  .profile-player .pp-controls{
    grid-area:controls !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:12px !important;
    padding:4px 0 !important;
    box-sizing:border-box !important;
  }
  .profile-player .pp-controls > button{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    padding:0 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.30) !important;
    background:rgba(0,0,0,.20) !important;
    color:var(--player-text,#fff) !important;
    -webkit-text-fill-color:var(--player-text,#fff) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 3px 8px rgba(0,0,0,.14) !important;
    font-size:18px !important;
    line-height:1 !important;
  }
  .profile-player .pp-controls .pp-play{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    font-size:22px !important;
    background:var(--player-accent,#f39a16) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
  }

  .profile-player .pp-vinyl-wrap{
    grid-area:vinyl !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:2px 0 4px !important;
    box-sizing:border-box !important;
  }
  .profile-player .pp-vinyl{
    width:clamp(118px,34vw,170px) !important;
    height:clamp(118px,34vw,170px) !important;
    max-width:170px !important;
    max-height:170px !important;
    min-width:0 !important;
    aspect-ratio:1/1 !important;
    flex:0 0 auto !important;
  }
  .profile-player .pp-vinyl-label,
  .profile-player .pp-vinyl-cover{
    max-width:100% !important;
    max-height:100% !important;
    object-fit:cover !important;
  }

  .profile-player .pp-list-toggle{
    grid-area:playlisttoggle !important;
    width:100% !important;
    min-height:42px !important;
    padding:9px 12px !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
    border:1px solid rgba(255,255,255,.23) !important;
    background:rgba(0,0,0,.18) !important;
    color:var(--player-text,#fff) !important;
    -webkit-text-fill-color:var(--player-text,#fff) !important;
    font-weight:900 !important;
    text-align:center !important;
  }

  .profile-player .pp-playlist-list{
    grid-area:playlist !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    max-height:270px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
  }
  .profile-player .pp-track{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    padding:9px 10px !important;
    overflow:hidden !important;
    text-align:left !important;
  }
  .profile-player .pp-track > span{
    min-width:0 !important;
    text-align:center !important;
  }
  .profile-player .pp-track > b{
    min-width:0 !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .profile-player .pp-track > em{
    min-width:0 !important;
    white-space:nowrap !important;
  }

  /* Prevent theme decorations from forcing a desktop width */
  .profile-player > *,
  .profile-player .pp-main > *,
  .profile-player .pp-controls > *{
    box-sizing:border-box !important;
  }
}

@media (max-width:640px){
  .profile-player,
  .profile-playlist,
  .integrated-stream-preview .profile-player,
  .player-studio-card .profile-player,
  .retro-box .profile-player{
    padding:11px !important;
    gap:10px !important;
    border-radius:17px !important;
  }
  .profile-player .pp-main{padding:10px !important; border-radius:14px !important;}
  .profile-player .pp-now{grid-template-columns:minmax(0,1fr) auto !important;}
  .profile-player .pp-trackno{display:none !important;}
  .profile-player .pp-title{font-size:14px !important;}
  .profile-player .pp-controls > button{width:42px !important;height:42px !important;min-width:42px !important;}
  .profile-player .pp-controls .pp-play{width:54px !important;height:54px !important;min-width:54px !important;}
  .profile-player .pp-bottomline{grid-template-columns:1fr !important; gap:8px !important;}
  .profile-player .pp-time{text-align:center !important; min-width:0 !important;}
  .profile-player .pp-vinyl{width:clamp(112px,42vw,150px) !important;height:clamp(112px,42vw,150px) !important;}
}

@media (max-width:380px){
  .profile-player .pp-brand{padding:6px 7px !important;}
  .profile-player .pp-brand img{width:31px !important;height:31px !important;flex-basis:31px !important;}
  .profile-player .pp-controls{gap:8px !important;}
  .profile-player .pp-controls > button{width:39px !important;height:39px !important;min-width:39px !important;font-size:16px !important;}
  .profile-player .pp-controls .pp-play{width:50px !important;height:50px !important;min-width:50px !important;font-size:20px !important;}
}