/* ============================================================
   GLOBAL MUSIC PLAYER — a floating now_playing.mp3 window that
   lives in the site layout, so it persists on every page. it is
   draggable anywhere, remembers its position, and resumes the
   track from where it left off across page navigations.
   self-contained (does NOT depend on .netdesk) so it styles the
   same on every page.
   ============================================================ */

.gmus {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 320px;
    z-index: 9450;
    display: flex;
    flex-direction: column;
    background: rgba(8, 8, 18, 0.94);
    border: 1px solid rgba(var(--c-primary-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--c-primary-rgb), 0.3);
    font-family: var(--f-mono);
    text-shadow: none;
    animation: gmus-pop .16s ease;
}

@keyframes gmus-pop {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* little corner ticks, matching the desktop windows */
.gmus::before, .gmus::after {
    content: ""; position: absolute; width: 7px; height: 7px;
    border: 1px solid var(--c-secondary); opacity: .6; pointer-events: none;
}
.gmus::before { left: -1px; bottom: -1px; border-top: none; border-right: none; }
.gmus::after  { right: -1px; bottom: -1px; border-top: none; border-left: none; }

/* ---- live audio visualizer — real FFT spectrum painted as the window background ---- */
.gmus-viz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0.3; }
.gmus.collapsed .gmus-viz { display: none; }
/* keep the title bar + controls above the visualizer, and legible over it */
.gmus-bar, .gmus-body { position: relative; z-index: 1; }
.gmus-body { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); }

.gmus-bar {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.55rem; cursor: move; user-select: none;
    background: rgba(var(--c-primary-rgb), 0.16);
    border-bottom: 1px solid rgba(var(--c-primary-rgb), 0.4);
    font-family: var(--f-mono); font-size: 11px; letter-spacing: 1px;
    color: var(--c-primary); text-transform: uppercase;
    touch-action: none;
}
.gmus-bar .ttl { flex: 1; }
.gmus-bar > .pi { font-size: 13px; }
.gmus-bar .gmus-btn {
    width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
    line-height: 14px; text-align: center; cursor: pointer;
    background: none; color: var(--c-text); border: 1px solid rgba(var(--c-text-rgb), 0.3);
    font-family: var(--f-mono); font-size: 11px; padding: 0;
}
.gmus-bar .gmus-btn:hover { color: var(--c-primary); border-color: var(--c-primary); }

/* ---- rain ambience toggle — a tiny animated downpour lives inside the button.
   drops sit still + faint when rain is off, and fall (lit in the accent) when on ---- */
.gmus-bar .gmus-rain { position: relative; width: 22px; overflow: hidden; }
.gmus-bar .gmus-rain .rain-fx { position: absolute; inset: 0; pointer-events: none; }
.gmus-bar .gmus-rain .rain-fx i {
    position: absolute; top: 2px; width: 1px; height: 5px; opacity: 0.45;
    background: linear-gradient(to bottom, transparent, currentColor);
}
.gmus-bar .gmus-rain .rain-fx i:nth-child(1) { left: 5px;  }
.gmus-bar .gmus-rain .rain-fx i:nth-child(2) { left: 9px;  }
.gmus-bar .gmus-rain .rain-fx i:nth-child(3) { left: 13px; }
.gmus-bar .gmus-rain .rain-fx i:nth-child(4) { left: 17px; }
/* lit + falling while rain is on */
.gmus-bar .gmus-rain.on { color: var(--c-secondary); border-color: var(--c-secondary); box-shadow: 0 0 8px rgba(var(--c-secondary-rgb), 0.5); }
.gmus-bar .gmus-rain.on .rain-fx i { opacity: 1; animation: gmus-rainfall linear infinite; }
.gmus-bar .gmus-rain.on .rain-fx i:nth-child(1) { animation-duration: 0.85s; animation-delay: 0.00s; }
.gmus-bar .gmus-rain.on .rain-fx i:nth-child(2) { animation-duration: 1.05s; animation-delay: 0.30s; }
.gmus-bar .gmus-rain.on .rain-fx i:nth-child(3) { animation-duration: 0.95s; animation-delay: 0.55s; }
.gmus-bar .gmus-rain.on .rain-fx i:nth-child(4) { animation-duration: 1.15s; animation-delay: 0.15s; }
@keyframes gmus-rainfall {
    0%   { transform: translateY(-7px); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gmus-bar .gmus-rain.on .rain-fx i { animation: none; opacity: 1; }
}

.gmus-body { padding: 0.85rem; font-size: 13px; line-height: 1.6; }
.gmus-body .mono { font-family: var(--f-mono); font-size: 12.5px; }

/* collapsed → only the title bar shows */
.gmus.collapsed .gmus-body { display: none; }

/* ---- now playing row (cover + title) ---- */
.gmus .mus-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; }
.gmus .mus-meta { min-width: 0; }
.gmus .mus-title { font-family: var(--f-head, var(--f-mono)); font-size: 15px; color: var(--c-primary); text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.5); }
.gmus .mus-artist { font-size: 11px; opacity: 0.7; letter-spacing: 1px; text-transform: uppercase; }

/* ---- time bar ---- */
.gmus .mus-prog { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.gmus .mus-t { font-size: 10px; color: var(--c-accent); min-width: 30px; text-align: center; opacity: 0.85; }
.gmus .mus-bar { position: relative; flex: 1; height: 7px; background: rgba(var(--c-text-rgb), 0.1); border: 1px solid rgba(var(--c-primary-rgb), 0.3); cursor: pointer; touch-action: none; transition: height .12s ease; }
/* invisible taller grab zone so the thin bar is easy to drag with a mouse or finger */
.gmus .mus-bar::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
/* fatten on hover / while scrubbing so dragging is discoverable + easy to track */
.gmus .mus-bar:hover, .gmus .mus-bar.scrubbing { height: 11px; }
.gmus .mus-bar.scrubbing { cursor: grabbing; }
.gmus .mus-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--c-secondary), var(--c-primary)); box-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.6); }
.gmus .mus-bar-head { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; transform: translate(-50%, -50%); background: var(--c-primary); box-shadow: 0 0 8px var(--c-primary); transition: width 0.1s ease, height 0.1s ease; }
.gmus .mus-bar:hover .mus-bar-head { background: var(--c-accent); box-shadow: 0 0 10px var(--c-accent); }
.gmus .mus-bar.scrubbing .mus-bar-head { width: 14px; height: 14px; background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent); }

/* ---- controls: play/pause + neon volume fader ---- */
.gmus .mus-controls { display: flex; align-items: center; gap: 0.6rem; }
.gmus .mus-icon {
    width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1; cursor: pointer;
    color: var(--c-primary); background: rgba(var(--c-primary-rgb), 0.1); border: 1px solid var(--c-primary);
    box-shadow: 0 0 10px rgba(var(--c-primary-rgb), 0.3); transition: all .14s ease;
}
.gmus .mus-icon:hover { background: var(--c-primary); color: var(--c-bg); box-shadow: 0 0 18px rgba(var(--c-primary-rgb), 0.65); }
.gmus .mus-icon.playing { color: var(--c-secondary); border-color: var(--c-secondary); box-shadow: 0 0 10px rgba(var(--c-secondary-rgb), 0.4); }
.gmus .mus-icon.playing:hover { background: var(--c-secondary); color: var(--c-bg); }
/* pixel-icon sizing inside the player controls (icons are 1em, so set font-size) */
.gmus .mus-icon .pi { font-size: 17px; }
.gmus .mus-nav .pi { font-size: 15px; }
.gmus-bar .gmus-btn .pi { font-size: 12px; }
.gmus .mus-vol-ico { font-size: 9px; opacity: 0.55; letter-spacing: 1px; }
.gmus .mus-vol-val { font-size: 11px; color: var(--c-accent); min-width: 34px; text-align: right; }

.gmus .mus-fader {
    position: relative; flex: 1; min-width: 0; height: 10px; cursor: pointer; user-select: none;
    background: rgba(var(--c-text-rgb), 0.1); border: 1px solid rgba(var(--c-primary-rgb), 0.35);
    background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(var(--c-primary-rgb), 0.12) 9px 10px);
    touch-action: none;
}
.gmus .mus-fader-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: linear-gradient(90deg, var(--c-secondary), var(--c-primary)); box-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.6); }
.gmus .mus-fader-cap { position: absolute; top: 50%; left: 25%; width: 6px; height: 22px; transform: translate(-50%, -50%); background: var(--c-primary); box-shadow: 0 0 10px var(--c-primary); transition: transform .1s ease, background .1s ease, box-shadow .1s ease; }
.gmus .mus-fader:hover .mus-fader-cap { transform: translate(-50%, -50%) scaleY(1.18); background: var(--c-accent); box-shadow: 0 0 14px var(--c-accent); }

/* ---- cover art (current track) ---- */
.gmus .mus-cover {
    width: 46px; height: 46px; flex: none; object-fit: cover;
    border: 1px solid rgba(var(--c-primary-rgb), 0.5);
    box-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.4);
    background: rgba(var(--c-primary-rgb), 0.08);
}

/* ---- prev / next skip buttons ---- */
.gmus .mus-nav {
    width: 28px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
    font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
    color: var(--c-text); background: rgba(var(--c-text-rgb), 0.05); border: 1px solid rgba(var(--c-text-rgb), 0.25);
    transition: all .14s ease;
}
.gmus .mus-nav:hover { color: var(--c-primary); border-color: var(--c-primary); box-shadow: 0 0 10px rgba(var(--c-primary-rgb), 0.4); }
.gmus .mus-nav:active { background: rgba(var(--c-primary-rgb), 0.2); }

/* title-bar playlist toggle — lit while the queue is open */
.gmus.list-open .gmus-list-btn { color: var(--c-primary); border-color: var(--c-primary); }

/* ---- playlist / queue panel ---- */
.gmus .mus-list {
    display: none; margin-top: 0.7rem; padding-top: 0.55rem;
    border-top: 1px solid rgba(var(--c-primary-rgb), 0.3);
    max-height: 198px; overflow-y: auto;
}
.gmus.list-open .mus-list { display: block; }
.gmus .mus-li {
    display: flex; align-items: center; gap: 0.55rem; width: 100%; text-align: left;
    padding: 0.32rem 0.4rem; cursor: pointer; color: var(--c-text); font-family: var(--f-mono);
    background: none; border: 1px solid transparent;
}
.gmus .mus-li + .mus-li { margin-top: 2px; }
.gmus .mus-li:hover { background: rgba(var(--c-primary-rgb), 0.08); border-color: rgba(var(--c-primary-rgb), 0.3); }
.gmus .mus-li.active { background: rgba(var(--c-primary-rgb), 0.14); border-color: rgba(var(--c-primary-rgb), 0.5); }
.gmus .mus-li-cover {
    width: 30px; height: 30px; flex: none; object-fit: cover;
    border: 1px solid rgba(var(--c-primary-rgb), 0.4); background: rgba(var(--c-primary-rgb), 0.08);
}
.gmus .mus-li-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gmus .mus-li-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmus .mus-li.active .mus-li-title { color: var(--c-primary); text-shadow: 0 0 6px rgba(var(--c-primary-rgb), 0.5); }
.gmus .mus-li-artist { font-size: 10px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* tiny equalizer that animates only on the active row */
.gmus .mus-li-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; width: 14px; flex: none; }
.gmus .mus-li.active .mus-li-eq { display: flex; }
.gmus .mus-li-eq i { width: 3px; height: 4px; background: var(--c-secondary); box-shadow: 0 0 5px rgba(var(--c-secondary-rgb), 0.7); }
.gmus .mus-li.active .mus-li-eq i { animation: gmus-eq-sm 0.9s ease-in-out infinite; }
.gmus .mus-li.active .mus-li-eq i:nth-child(2) { animation-delay: 0.2s; }
.gmus .mus-li.active .mus-li-eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes gmus-eq-sm { 0%, 100% { height: 3px; } 50% { height: 13px; } }

/* ---- mobile: dock to the bottom, full-ish width, not draggable off-screen ---- */
@media (max-width: 768px) {
    .gmus {
        left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important;
        width: auto !important;
    }
    /* the visualizer is shorter (JS) + dimmer here so it doesn't overwhelm the
       full-width mobile player */
    .gmus-viz { opacity: 0.18; }
}