/* ==========================================================================
 Aura Music - Player Engine (Mini Player & Full Player Sheet)
 ========================================================================== */

/* Floating Mini Player */
.floating-player-bar {
 position: absolute;
 left: 12px;
 right: 12px;
 bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px);
 height: var(--mini-player-height);
 background: rgba(24, 24, 36, 0.92);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border: 1px solid var(--border);
 border-radius: 16px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 12px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
 z-index: 40;
 cursor: pointer;
 overflow: hidden;
}

.mini-progress-line {
 position: absolute;
 bottom: 0;
 left: 0;
 height: 2.5px;
 background: var(--accent);
 width: 0%;
 transition: width 0.15s linear;
}

.mini-track-info {
 display: flex;
 align-items: center;
 gap: 12px;
 flex: 1;
 min-width: 0;
}

.mini-thumb {
 width: 44px;
 height: 44px;
 border-radius: 10px;
 object-fit: cover;
 background: var(--bg-surface);
 flex-shrink: 0;
}

.mini-meta {
 display: flex;
 flex-direction: column;
 min-width: 0;
 gap: 2px;
}

.mini-title {
 font-size: 13px;
 font-weight: 700;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.mini-artist {
 font-size: 11px;
 color: var(--text-secondary);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.mini-actions {
 display: flex;
 align-items: center;
 gap: 8px;
 flex-shrink: 0;
}

.mini-btn {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 border: none;
 background: transparent;
 color: var(--text-primary);
 font-size: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
}

.mini-btn.btn-play-toggle {
 background: var(--text-primary);
 color: #000;
 font-size: 14px;
}

/* Full Player Bottom Sheet */
.full-player-sheet {
 position: absolute;
 inset: 0;
 background: var(--bg-base);
 z-index: 90;
 transform: translateY(100%);
 transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 display: flex;
 flex-direction: column;
 padding: calc(var(--safe-top) + 14px) 24px calc(var(--safe-bottom) + 20px);
 overflow: hidden;
}

.full-player-sheet.open {
 transform: translateY(0);
}

#sheet-ambient-bg {
 position: absolute;
 inset: -20px;
 background-size: cover;
 background-position: center;
 filter: blur(70px) brightness(0.28);
 opacity: 0.85;
 z-index: -1;
 transition: background-image 0.5s ease;
}

.sheet-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 20px;
}

.sheet-header-title {
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1px;
 color: var(--text-muted);
 text-transform: uppercase;
}

.sheet-header-btn {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.08);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-secondary);
 cursor: pointer;
}

.sheet-artwork-wrap {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 0;
 padding: 10px 0;
}

.sheet-artwork {
 width: min(72vw, 320px);
 height: min(72vw, 320px);
 border-radius: 24px;
 object-fit: cover;
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
 background: var(--bg-card);
}

.sheet-info-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-top: 16px;
 gap: 12px;
}

.sheet-title-col {
 min-width: 0;
 flex: 1;
}

.sheet-track-title {
 font-size: 20px;
 font-weight: 800;
 letter-spacing: -0.4px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.sheet-track-artist {
 font-size: 14px;
 color: var(--text-secondary);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 margin-top: 2px;
}

.sheet-btn-heart {
 background: transparent;
 border: none;
 font-size: 22px;
 color: var(--text-muted);
 cursor: pointer;
 transition: all 0.2s ease;
}

.sheet-btn-heart.favorited {
 color: var(--heart);
 text-shadow: 0 0 15px var(--heart-glow);
}

/* Scrubber / Progress Slider */
.scrubber-container {
 margin-top: 18px;
}

.range-slider {
 -webkit-appearance: none;
 appearance: none;
 width: 100%;
 height: 4px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.15);
 outline: none;
 cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: #ffffff;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
 cursor: pointer;
 transition: transform 0.1s ease;
}

.range-slider::-webkit-slider-thumb:hover,
.range-slider::-webkit-slider-thumb:active {
 transform: scale(1.3);
}

.time-row {
 display: flex;
 justify-content: space-between;
 margin-top: 6px;
 font-size: 11px;
 color: var(--text-muted);
 font-weight: 600;
}

/* Controls */
.player-controls-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-top: 14px;
 padding: 0 8px;
}

.btn-ctrl {
 background: transparent;
 border: none;
 color: var(--text-secondary);
 font-size: 18px;
 cursor: pointer;
 transition: all 0.2s ease;
}

.btn-ctrl:active {
 color: var(--text-primary);
 transform: scale(0.9);
}

.btn-ctrl.active {
 color: var(--accent);
}

.btn-skip {
 font-size: 22px;
 color: var(--text-primary);
}

.btn-play-hero {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 background: var(--accent);
 color: #000;
 border: none;
 font-size: 22px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 box-shadow: 0 6px 25px var(--accent-glow);
 transition: transform 0.15s ease;
}

.btn-play-hero:active {
 transform: scale(0.92);
}

/* Smart Audio Features Row */
.smart-features-row {
 display: flex;
 align-items: center;
 justify-content: space-around;
 margin-top: 16px;
 padding-top: 12px;
 border-top: 1px solid var(--border);
}

.smart-feature-pill {
 display: flex;
 align-items: center;
 gap: 6px;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid var(--border);
 border-radius: 999px;
 padding: 6px 12px;
 font-size: 11px;
 font-weight: 700;
 color: var(--text-secondary);
 cursor: pointer;
 transition: all 0.2s ease;
}

.smart-feature-pill.active {
 background: rgba(29, 185, 84, 0.15);
 border-color: var(--accent);
 color: var(--accent);
}

/* Volume Slider */
.sheet-volume-row {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-top: 14px;
 color: var(--text-muted);
 font-size: 13px;
}

.sheet-vol-slider {
 flex: 1;
}

/* Queue Drawer */
#sheet-queue-drawer {
 position: absolute;
 inset: 0;
 background: var(--bg-base);
 z-index: 95;
 transform: translateY(100%);
 transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 display: flex;
 flex-direction: column;
 padding: calc(var(--safe-top) + 14px) 20px calc(var(--safe-bottom) + 20px);
}

#sheet-queue-drawer.open {
 transform: translateY(0);
}

#sheet-queue-list {
 flex: 1;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-top: 14px;
}