/* Bottom player bar (mini, flatter like previous version) */
.playerBar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
}
.playerInner{
  display:grid;
  grid-template-columns: 320px 220px minmax(0,1fr) 214px;
  gap:12px;
  align-items:center;
  padding:10px 18px;
  border-radius: 0;
  background: rgba(7,10,16,.94);
  backdrop-filter: blur(0px);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow: 0 -16px 40px rgba(0,0,0,.55);
}
.playerLeft{display:flex; gap:10px; align-items:center; min-width:0;}
.playerCover{
  width:40px; height:40px; border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  background-size: cover;
  background-position:center;
}
.playerMeta{min-width:0;}
.playerMiniRow{display:flex; align-items:center; gap:8px; margin-bottom:2px;}
.playerMiniBtn{appearance:none; -webkit-appearance:none; border:none; background:rgba(255,255,255,.05); color:rgba(234,240,255,.82); padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800; cursor:pointer; border:1px solid rgba(255,255,255,.10)}
.playerMiniBtn:hover{background:rgba(255,255,255,.07); color:rgba(234,240,255,.92)}
.playerTitle{font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.playerSub{font-size:11px; color:rgba(234,240,255,.70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* transport */
.playerTransport{display:flex; gap:10px; align-items:center; justify-content:flex-start;}
.tbtn{
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,.06) 55%, rgba(0,0,0,.22));
  box-shadow:
    0 14px 34px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
  display:grid; place-items:center;
  cursor:pointer;
  position:relative;
  transition: transform .06s ease, filter .10s ease, box-shadow .12s ease, border-color .12s ease;
}
.tbtn:hover{filter: brightness(1.06)}
.tbtn:active{transform: translateY(1px) scale(0.99)}

/* per-button LED vibe */
.tbtn.play{border-color: rgba(34,197,94,.22)}
.tbtn.prev,.tbtn.next{border-color: rgba(147,197,253,.18)}
.tbtn.stop{border-color: rgba(248,113,113,.18)}
.tbtn .ico{display:block; width:0; height:0;}
.tbtn.play .ico{
  border-left: 14px solid rgba(234,240,255,.92);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left:2px;
}
/* prev/next icons (|◀ / ▶|) */
.tbtn.prev .ico,
.tbtn.next .ico{ position:relative; width:18px; height:16px; }

.tbtn.prev .ico:before{
  content:'';
  position:absolute; left:5px; top:0;
  width:0; height:0;
  border-right: 11px solid rgba(234,240,255,.92);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.tbtn.prev .ico:after{
  content:'';
  position:absolute; left:0; top:2px;
  width:3px; height:12px;
  background: rgba(234,240,255,.92);
  border-radius:2px;
}

.tbtn.next .ico:before{
  content:'';
  position:absolute; left:2px; top:0;
  width:0; height:0;
  border-left: 11px solid rgba(234,240,255,.92);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.tbtn.next .ico:after{
  content:'';
  position:absolute; right:0; top:2px;
  width:3px; height:12px;
  background: rgba(234,240,255,.92);
  border-radius:2px;
}

.tbtn.stop .ico{
  width:16px; height:16px;
  background: rgba(234,240,255,.92);
  border-radius:3px;
}

/* glowing state (single play/pause button) */
.tbtn.play.isPlaying{
  border-color: rgba(34,197,94,.55);
  box-shadow:
    0 16px 42px rgba(34,197,94,.22),
    0 14px 34px rgba(0,0,0,.55),
    0 0 28px rgba(34,197,94,.14),
    inset 0 1px 0 rgba(255,255,255,.18);
}
/* Playing: keep PLAY triangle, just tint green */
.tbtn.play.isPlaying .ico{border-left-color: rgba(34,197,94,.95)}

/* Paused (track loaded but not playing): show PAUSE (||) in orange */
.tbtn.play.isPaused .ico{
  position:relative;
  width:16px; height:16px;
  border-left:0; border-top:0; border-bottom:0;
  margin-left:0;
}
.tbtn.play.isPaused .ico:before,
.tbtn.play.isPaused .ico:after{
  content:'';
  position:absolute;
  top:1px;
  width:5px;
  height:14px;
  background: rgba(249,115,22,.95);
  border-radius:2px;
}
.tbtn.play.isPaused .ico:before{ left:2px; }
.tbtn.play.isPaused .ico:after{ right:2px; }

/* stopped state: show a STOP square instead of PLAY triangle */
.tbtn.play.isStopped .ico{
  width:16px; height:16px;
  background: rgba(234,240,255,.92);
  border-radius:3px;
  border-left:0; border-top:0; border-bottom:0;
  margin-left:0;
}


.playerCenter{display:flex; flex-direction:column; gap:6px; align-items:stretch; flex:1; min-width:0;}
.playerCenterRow{display:flex; align-items:center; gap:10px; min-width:0;}
.waveWrap{flex:1; min-width:0; max-width:720px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); padding:6px;}
.wave{width:100%; height:30px; display:block;}
.timeRow{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.time{font-size:11px; color:rgba(234,240,255,.70); text-align:center;}

.volWrap{display:flex; align-items:center;}
#playerVol{width:110px; accent-color: rgba(37,99,235,.85); opacity:.9;}
#playerVol:hover{opacity:1;}
.meter{
  width:18px;
  height:36px; /* match wave height */
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.timeNow{
  font-size:13px;
  font-weight:800;
  color:rgba(234,240,255,.78);
  min-width: 42px;
  text-align:left;
}

.playerRight{display:flex; justify-content:flex-end; gap:10px; align-items:center;}

/* center the plus nicely inside the icon button */
#playerAdd{
  font-size:20px;
  line-height:1;
  display:grid;
  place-items:center;
}

/* avoid content being hidden behind the fixed player */
.shell{padding-bottom: 104px;}

/* Loop/Shuffle status icons (not buttons) */
.playerStatus{display:flex; align-items:center; gap:10px; margin-left:10px;}
.psIco{position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:8px; cursor:pointer; color:rgba(234,240,255,.70); background:transparent; border:1px solid transparent;}
.psIco:hover{color:rgba(234,240,255,.92); background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08)}
.psIco:active{transform: translateY(1px)}
.psIco.isOn{
  color: rgba(10,12,16,.92);
  border-color: rgba(250,204,21,.35);
  background: linear-gradient(180deg, rgba(253,246,178,.96), rgba(248,222,120,.92));
  box-shadow: 0 10px 28px rgba(250,204,21,.10);
}
.psGlyph{font-weight:1000; font-size:14px; line-height:1; transform: translateY(-.5px)}
.psBadge{
  position:absolute;
  right:-16px;
  top:-10px;
  min-width:22px;
  height:17px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(34,197,94,.16);
  color: rgba(234,240,255,.92);
  font-size:9px;
  font-weight:1000;
  line-height:17px;
  text-align:center;
}

/* Mini queue (left pop-out) */
.playerQueue{
  position:fixed;
  left:18px;
  bottom:74px; /* above player bar */
  width:320px; /* matches playerLeft / sidebar feel */
  max-height:52vh;
  overflow:hidden;
  z-index:55;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,10,16,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
.playerQueueHead{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px; border-bottom:1px solid rgba(255,255,255,.08)}
.playerQueueTitle{font-weight:900}
.playerQueueMeta{font-size:12px; color:rgba(234,240,255,.65); margin-top:2px}
.playerQueueList{max-height:calc(52vh - 54px); overflow:auto; padding:10px}
.playerQueueItem{display:flex; gap:10px; align-items:center; padding:10px; border-radius:14px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); cursor:pointer}
.playerQueueItem:hover{background:rgba(255,255,255,.04)}
.playerQueueItem.isOn{border-color: rgba(37,99,235,.35); background: rgba(37,99,235,.10)}
.playerQueueCover{width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); background-size:cover; background-position:center; flex:0 0 auto}
.playerQueueText{min-width:0}
.playerQueueName{font-weight:900; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.playerQueueSub{font-size:11px; color:rgba(234,240,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}


/* Mobile: keep player compact; collapse further when stopped */
@media (max-width: 720px){
  .playerInner{
    grid-template-columns: 1fr auto;
    gap:10px;
    padding:10px 12px;
  }

  /* Keep only: title + play + prev/next. Hide everything else. */
  #playerStop,#playerPop,#playerAdd,#playerShuffle,#playerLoop,#playerLike,#playerClose,#playerQueueBtn{ display:none !important; }
  .volWrap,#playerVol,.meter,#meter,.playerStatus,.timeNow{ display:none !important; }
  .playerCenter{ display:none !important; }

  /* show transport as 3 buttons */
  .playerTransport{ justify-content:flex-end; }
  #playerPrev,#playerPlay,#playerNext{ display:inline-grid !important; }

  .playerBar.mStopped .playerInner{ padding:8px 12px; }
  .playerBar.mStopped .playerSub{ display:none; }
  .playerBar.mStopped .playerMiniRow{ display:none; }
}