/* Qaulee player component styles — shared by public/player/index.php
   (standalone page) and public/index.php (embedded landing-page player).
   Page-level resets (body/scrollbar) stay local to each shell instead of
   living here, since public/index.php must keep its own scrolling body. */

.glass { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

#login-gate-overlay { transition: opacity .3s, visibility .3s; }
#login-gate-overlay.gate-visible { opacity: 1 !important; visibility: visible !important; }

#toast-container { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast-item { animation: toastIn .25s ease-out; padding: .75rem 1rem; border-radius: .75rem; background: #121215; color: #fff; font-size: .875rem; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.toast-item.toast-out { animation: toastOut .2s ease-in forwards; }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(20px); } }

input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 14px; width: 14px; border-radius: 50%; background: #FFC107; cursor: pointer; box-shadow: 0 0 8px rgba(255,193,7,.5); margin-top: -5px; } /* (14-4)/2=5px for 4px track */
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: rgba(140,140,140,.3); border-radius: 2px; }
/* WebKit doesn't auto-center a custom thumb on a custom track — nudge it to
   the vertical midpoint. progress-bar-lg uses a 6px track: (14-6)/2=4px. */
.progress-bar-lg::-webkit-slider-thumb { margin-top: -4px; }
.volume-input::-webkit-slider-thumb { margin-top: -5px; }
.progress-bar { background: linear-gradient(to right, #FFC107 var(--progress,0%), rgba(140,140,140,.3) var(--progress,0%)); }
.progress-bar-lg { height: 6px !important; border-radius: 999px; }

.eq-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq-bars span { display: block; width: 3px; background: #FFC107; border-radius: 1px; animation: eqBounce .9s ease-in-out infinite; }
.eq-bars span:nth-child(1) { animation-delay: -.6s; }
.eq-bars span:nth-child(2) { animation-delay: -.3s; }
.eq-bars span:nth-child(3) { animation-delay: 0s; }
@keyframes eqBounce { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.eq-bars.is-paused span { animation-play-state: paused; height: 3px; }

#player-cover-wrap.is-playing { box-shadow: 0 0 0 2px rgba(255,193,7,.55), 0 6px 18px rgba(255,193,7,.25); }

#full-player { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; overflow: hidden; background: #0A0A0C; color: #fff; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .35s cubic-bezier(.4,0,.2,1), visibility .35s, transform .35s cubic-bezier(.4,0,.2,1); }
#full-player.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.fp-bg { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(60px) brightness(.35) saturate(1.4); transform: scale(1.15); pointer-events: none; }
.fp-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.85) 60%, #0A0A0C 100%); }
.fp-inner { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.vinyl-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.vinyl-disc { position: relative; border-radius: 9999px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 8px #050505, 0 0 0 9px rgba(255,255,255,.06); animation: vinylSpin 9s linear infinite; animation-play-state: paused; }
.vinyl-disc.is-spinning { animation-play-state: running; }
.vinyl-disc::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: radial-gradient(circle at center, #0A0A0C 0 6%, transparent 6.5%), repeating-radial-gradient(circle at center, rgba(255,255,255,.03) 0 2px, transparent 2px 6px); }
@keyframes vinylSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.waveform-bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; }
.waveform-bars span { flex: 1; min-width: 2px; background: rgba(255,193,7,.35); border-radius: 2px; transition: background .3s; }
.waveform-bars span.is-played { background: #FFC107; }

.lyric-line { transition: color .3s, opacity .3s; opacity: .4; }
.lyric-line.active { opacity: 1; color: #FFC107; font-weight: 700; }

#queue-drawer, #sleep-panel, #speed-panel { position: fixed; z-index: 110; background: #121215; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.5); color: #fff; }
#queue-drawer { top: 0; bottom: 0; right: 0; width: 100%; max-width: 420px; transform: translateX(100%); transition: transform .35s; display: flex; flex-direction: column; }
#queue-drawer.is-open { transform: translateX(0); }
#queue-drawer-overlay { position: fixed; inset: 0; z-index: 105; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: all .3s; }
#queue-drawer-overlay.is-open { opacity: 1; visibility: visible; }
#sleep-panel, #speed-panel { bottom: 100px; right: 16px; width: 260px; border-radius: 1rem; padding: 1rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s; }
#sleep-panel.is-open, #speed-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.fp-chip { padding: .4rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; transition: all .15s; cursor: pointer; border: none; background: rgba(255,255,255,.08); color: #d1d5db; }
.fp-chip:hover { background: rgba(255,255,255,.15); }
.fp-chip.is-active { background: #FFC107; color: #000; }
.fp-icon-btn { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #9ca3af; transition: all .15s; cursor: pointer; border: none; background: transparent; }
.fp-icon-btn:hover { color: #fff; background: rgba(255,255,255,.08); }

#volume-popover.flex { display: flex; }
.volume-popover-track-wrap { height: 96px; width: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#volume-popover-slider { width: 88px !important; transform: rotate(-90deg); }

/* #mini-player itself is styled entirely via Tailwind utility classes on the
   element (matching client/index.php) — no id-selector rule here, since one
   would out-specificity those utilities (e.g. the light/dark background,
   the bottom-offset class toggled by $playerAboveBottomNav in _player.php). */