/* ==========================================================================
   GHOST PLAYER DRAWER & BUTTONS
   - Circular Neon Button (30px matching Burger Menu)
   - Orange Pulse Animation
   - Sliding Drawer for Next/Prev Controls
   ========================================================================== */

#floating-player-container {
    position: fixed; /* Exact mirror of #burger-menu */
    top: 32px; /* Aligned with burger top (32px) */
    right: calc(50% - 240px + 24px); /* Symmetrical to Burger left */
    z-index: 120000; /* Ultra-Ultra-High: Above SPA Overlay (110000) */
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px; /* space between drawer and main btn */
}

#floating-player-container * {
    pointer-events: auto;
}

#minimal-ghost-player {
    width: 32px; /* Restored to perfect original size */
    height: 32px;
    position: relative;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(254, 119, 51, 0.4);
    transition: transform 0.3s ease, background 0.3s ease;
    padding: 0;
    color: var(--accent-color);
}

/* Neon glow lives on a pseudo-element and pulses via opacity only —
   compositor-friendly, unlike animating box-shadow (repaint every frame) */
#minimal-ghost-player::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(254, 119, 51, 0.8);
    border: 1px solid var(--accent-color);
    opacity: 0;
    animation: neonPulseIdle 2s infinite ease-in-out;
    pointer-events: none;
    will-change: opacity;
}

#minimal-ghost-player:hover {
    transform: scale(1.1);
    background: rgba(254, 119, 51, 0.1);
}

/* Drawer Container */
#ghost-player-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(40px) scale(0.8); /* Shrink and hide behind main btn */
    pointer-events: none; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Expansion Trigger */
#floating-player-container:hover #ghost-player-controls,
#floating-player-container.is-expanded #ghost-player-controls {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

/* Invisible tap-area expansion (same pattern as .dot::after in style.css) */
#minimal-ghost-player::after {
    content: '';
    position: absolute;
    inset: -6px; /* 32px visual -> 44px hit target */
}

/* Sub-Buttons */
.ghost-sub-btn {
    width: 24px; /* Fixed from 26px to multiple of 8px */
    height: 24px;
    position: relative;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(254, 119, 51, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: var(--accent-color);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* 44px-tall hit target; horizontal capped at half the 8px gap to avoid overlap */
.ghost-sub-btn::after {
    content: '';
    position: absolute;
    inset: -10px -4px;
}

.ghost-sub-btn:hover {
    transform: scale(1.1);
    background: rgba(254, 119, 51, 0.2);
    border-color: rgba(254, 119, 51, 0.8);
}

.ghost-sub-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Main Button Icons */
#minimal-ghost-player svg {
    width: 16px; /* Restored original icon scale */
    height: 16px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

/* Active State (When music is playing): stronger, faster pulse */
#minimal-ghost-player.is-playing {
    border-width: 2px;
}

#minimal-ghost-player.is-playing::before {
    box-shadow: 0 0 32px rgba(254, 119, 51, 1);
    animation: neonPulseActive 0.8s infinite ease-in-out;
}

@keyframes neonPulseIdle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes neonPulseActive {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Positioning adjustments for specific screens */
@media screen and (max-width: 480px) {
    #floating-player-container {
        top: 32px;
        right: 24px;
    }
}