/* ==========================================================================
   Player bar, mobile mini player, full-screen player, queue panel
   ========================================================================== */

.player {
  grid-area: player;
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(320px, 2fr) minmax(180px, 1fr);
  align-items: center; gap: 16px;
  padding: 0 16px; height: var(--player-h);
  background: var(--bg-0);
}
.player.empty .p-controls, .player.empty .p-side { opacity: .45; pointer-events: none; }

.p-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.p-now .art { width: 56px; height: 56px; border-radius: var(--r-sm); flex-shrink: 0; cursor: pointer; }
.p-now .art.placeholder svg { width: 24px; height: 24px; }
.p-meta { min-width: 0; }
.p-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.p-artists { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-artists a:hover { color: var(--text-1); }
.p-like.liked { color: var(--accent); }

.p-controls { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 720px; width: 100%; justify-self: center; }
.p-buttons { display: flex; align-items: center; gap: 12px; }
.p-buttons .icon-btn { width: 34px; height: 34px; }
.p-buttons .icon-btn.active::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateY(14px); }
.p-buttons .icon-btn { position: relative; }
.p-play {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--text-1); color: var(--bg-0); transition: transform .1s var(--ease), background .15s;
  position: relative;
}
.p-play:hover { transform: scale(1.06); background: #fff; }
.p-play svg { width: 18px; height: 18px; }
.p-play.loading svg { opacity: 0; }
.p-play.loading::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 2.5px solid var(--bg-0); border-right-color: transparent; animation: spin .8s linear infinite;
}

.p-progress { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.p-progress .time { min-width: 40px; text-align: center; }

/* Range slider shared by seek and volume */
.slider {
  --pct: 0%; --buf: 0%;
  position: relative; flex: 1; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none;
}
.slider .track-bg { position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--bg-4); overflow: hidden; }
.slider .track-bg::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--buf); background: rgba(255, 255, 255, .14); }
.slider .fill { position: absolute; left: 0; height: 4px; width: var(--pct); border-radius: 4px; background: var(--text-1); }
.slider .thumb {
  position: absolute; left: var(--pct); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--text-1); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .1s;
}
.slider:hover .fill, .slider:focus-visible .fill, .slider.dragging .fill { background: var(--accent); }
.slider:hover .thumb, .slider:focus-visible .thumb, .slider.dragging .thumb { opacity: 1; }
.slider:focus-visible { outline: none; }
.slider:focus-visible .track-bg { box-shadow: 0 0 0 2px var(--accent); }
.slider.buffering .track-bg { background-image: linear-gradient(90deg, var(--bg-4) 30%, var(--bg-3) 50%, var(--bg-4) 70%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }

.p-side { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.p-volume { display: flex; align-items: center; gap: 6px; width: 140px; }
.p-volume .slider { max-width: 100px; }

/* Mini progress line for the mobile player */
.p-mini-progress { display: none; }

@media (max-width: 1100px) {
  .player { grid-template-columns: minmax(150px, 1fr) minmax(260px, 1.6fr) auto; }
  .p-volume { width: auto; }
  .p-volume .slider { display: none; }
}

@media (max-width: 767px) {
  .player {
    position: fixed; z-index: 55; left: 8px; right: 8px;
    bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 4px);
    grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    height: 58px; padding: 0 8px 0 6px; border-radius: var(--r-md);
    background: #23332d; box-shadow: var(--shadow-1); overflow: hidden;
  }
  .player.empty { display: none; }
  .p-now .art { width: 44px; height: 44px; }
  .p-controls { display: none; }
  .p-side .p-volume, .p-side .p-queue-btn, .p-side .p-expand { display: none; }
  .p-side .p-mobile-play { display: grid; }
  .p-mini-progress { display: block; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: rgba(255, 255, 255, .15); border-radius: 2px; }
  .p-mini-progress span { display: block; height: 100%; background: var(--text-1); width: 0; border-radius: 2px; }
}
.p-mobile-play { display: none; }

/* ---------------------------------------------------------------- full player */

.full-player {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--hero-tint) 0%, var(--bg-0) 85%);
  animation: sheet-up .3s var(--ease);
}
.full-player.closing { animation: sheet-down .25s var(--ease) forwards; }
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
.fp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-head .ctx { text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); min-width: 0; }
.fp-head .ctx strong { display: block; color: var(--text-1); letter-spacing: 0; text-transform: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-art { flex: 1; display: grid; place-items: center; min-height: 0; padding: 24px 0; }
.fp-art .art { width: min(84vw, 46vh, 520px); aspect-ratio: 1; border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.fp-art .art.placeholder svg { width: 30%; height: 30%; }
.fp-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; }
.fp-info .meta { min-width: 0; }
.fp-title { font: 800 24px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fp-artists { color: var(--text-2); font-size: 15px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-info .icon-btn { width: 44px; height: 44px; }
.fp-info .icon-btn svg { width: 26px; height: 26px; }
.fp-progress { max-width: 640px; width: 100%; margin: 18px auto 0; }
.fp-progress .slider { height: 22px; }
.fp-progress .slider .thumb { opacity: 1; }
.fp-times { display: flex; justify-content: space-between; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fp-controls { display: flex; align-items: center; justify-content: space-between; max-width: 520px; width: 100%; margin: 14px auto 0; }
.fp-controls .icon-btn { width: 48px; height: 48px; position: relative; }
.fp-controls .icon-btn svg { width: 28px; height: 28px; }
.fp-controls .icon-btn.active::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.fp-controls .p-play { width: 68px; height: 68px; }
.fp-controls .p-play svg { width: 30px; height: 30px; }
.fp-controls .p-play.loading::after { inset: 16px; border-width: 3px; }
.fp-foot { display: flex; justify-content: space-between; align-items: center; max-width: 640px; width: 100%; margin: 18px auto 0; }
.fp-foot .p-volume { width: 200px; }
.fp-foot .p-volume .slider { display: flex; max-width: none; }
@media (max-width: 767px) { .fp-foot .p-volume { display: none; } }

/* ---------------------------------------------------------------- queue panel */

.queue-panel {
  position: fixed; z-index: 150; top: 8px; right: 8px; bottom: calc(var(--player-h) + 8px);
  width: min(380px, calc(100vw - 16px));
  display: flex; flex-direction: column;
  background: var(--bg-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  animation: panel-in .22s var(--ease);
}
@keyframes panel-in { from { opacity: 0; transform: translateX(24px); } }
.queue-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 20px; }
.queue-head h2 { font-size: 18px; }
.queue-body { flex: 1; overflow-y: auto; padding: 0 8px 16px; }
.queue-label { font-size: 13px; font-weight: 700; color: var(--text-2); padding: 14px 12px 6px; display: flex; justify-content: space-between; align-items: center; }
.q-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); }
.q-item:hover, .q-item:focus-within { background: var(--bg-3); }
.q-item .art { width: 44px; height: 44px; border-radius: 4px; cursor: pointer; }
.q-item .art.placeholder svg { width: 20px; height: 20px; }
.q-item .title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item .sub { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-item.current .title { color: var(--accent); }
.q-item .icon-btn { opacity: 0; }
.q-item:hover .icon-btn, .q-item:focus-within .icon-btn { opacity: 1; }
.q-item .play-hit { text-align: left; min-width: 0; }
@media (max-width: 767px) {
  .queue-panel { inset: 0; width: auto; border-radius: 0; z-index: 250; }
  .q-item .icon-btn { opacity: 1; }
}