/* ══════════════════════════════════════════════════════════════
   AMBIENT MUSIC PLAYER - Floating mini-player
   ══════════════════════════════════════════════════════════════ */

.ambient-player {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(8,8,12,.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: .4rem .7rem .4rem .4rem;
    transition: all .4s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
    opacity: 0;
    transform: translateY(20px);
    animation: ambientSlideIn .6s .5s cubic-bezier(.32,.72,0,1) forwards;
}

@keyframes ambientSlideIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Theme accents */
.ambient-player[data-theme="crimson"] { --ambient-accent: var(--crimson, #e0607a); --ambient-glow: rgba(224,96,122,.2); }
.ambient-player[data-theme="ayleid"]  { --ambient-accent: var(--ayleid-blue, #6a9eb4); --ambient-glow: rgba(106,158,180,.2); }
.ambient-player[data-theme="wyrd"]    { --ambient-accent: var(--wyrd-green, #7ab47a); --ambient-glow: rgba(122,180,122,.2); }

.ambient-player:hover {
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 20px var(--ambient-glow);
}

/* Playing state glow */
.ambient-player.is-playing {
    border-color: var(--ambient-accent);
    box-shadow: 0 4px 24px rgba(0,0,0,.4), 0 0 15px var(--ambient-glow);
}

/* Paused by video indicator */
.ambient-player.is-paused-by-video {
    opacity: .6;
}

/* ── Toggle button ────────────────────────────────────── */
.ambient-player__toggle {
    background: none;
    border: none;
    color: var(--ambient-accent);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s cubic-bezier(.32,.72,0,1);
    flex-shrink: 0;
    background: rgba(255,255,255,.04);
}

.ambient-player__toggle:hover {
    background: rgba(255,255,255,.08);
    transform: scale(1.08);
}

/* Icon states */
.ambient-player__icon { display: none; }
.ambient-player__icon--play { display: block; }
.ambient-player.is-playing .ambient-player__icon--play { display: none; }
.ambient-player.is-playing .ambient-player__icon--pause { display: block; }
.ambient-player.is-playing .ambient-player__icon--paused-by-video { display: none; }

/* When paused by video unmute */
.ambient-player.is-paused-by-video .ambient-player__icon { display: none; }
.ambient-player.is-paused-by-video .ambient-player__icon--paused-by-video { display: block; }

/* ── Track info ───────────────────────────────────────── */
.ambient-player__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ambient-player__title {
    font-family: var(--font-label, sans-serif);
    font-size: .55rem;
    letter-spacing: .1em;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.ambient-player__artist {
    font-family: var(--font-label, sans-serif);
    font-size: .45rem;
    letter-spacing: .08em;
    color: rgba(255,255,255,.35);
    text-transform: uppercase;
}

/* ── Equalizer bars (animated when playing) ───────────── */
.ambient-player__bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    flex-shrink: 0;
    margin-left: .25rem;
}

.ambient-player__bars span {
    display: block;
    width: 2px;
    background: var(--ambient-accent);
    border-radius: 1px;
    height: 3px;
    opacity: .3;
    transition: height .15s, opacity .3s;
}

/* CSS animation fallback (when Web Audio not available) */
.ambient-player.is-playing:not(.is-waveform) .ambient-player__bars span {
    opacity: .7;
    animation: ambientBar 1.2s ease-in-out infinite;
}
.ambient-player.is-playing:not(.is-waveform) .ambient-player__bars span:nth-child(1) { animation-delay: 0s; }
.ambient-player.is-playing:not(.is-waveform) .ambient-player__bars span:nth-child(2) { animation-delay: .15s; }
.ambient-player.is-playing:not(.is-waveform) .ambient-player__bars span:nth-child(3) { animation-delay: .3s; }
.ambient-player.is-playing:not(.is-waveform) .ambient-player__bars span:nth-child(4) { animation-delay: .45s; }

@keyframes ambientBar {
    0%, 100% { height: 3px; }
    25%      { height: 10px; }
    50%      { height: 5px; }
    75%      { height: 12px; }
}

/* Real waveform mode - bars are driven by JS, disable CSS animation */
.ambient-player.is-waveform .ambient-player__bars span {
    animation: none;
    transition: height .08s ease-out, opacity .1s;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
    .ambient-player {
        bottom: 1rem;
        left: 1rem;
        padding: .3rem .5rem .3rem .3rem;
        gap: .4rem;
    }
    .ambient-player__title { max-width: 100px; font-size: .5rem; }
    .ambient-player__toggle { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-player { animation: none; opacity: 1; transform: none; }
    .ambient-player__bars span { animation: none !important; }
}