/* ═══════════════════════════════════════════════════════════════
   EmpireVisual AI — Music Player v2
   /music/player.css  ·  All styles self-contained here
   ═══════════════════════════════════════════════════════════════ */

/* ── Root Variables ────────────────────────────────────────────── */
#evmp-wrap {
    --evmp-accent:        #007bff;
    --evmp-accent-dim:    rgba(0, 123, 255, 0.32);
    --evmp-accent-glow:   rgba(0, 123, 255, 0.20);
    --evmp-red:           #ff3b3b;
    --evmp-red-dim:       rgba(255, 59, 59, 0.18);
    --evmp-bg:            rgba(7, 7, 10, 0.97);
    --evmp-border:        rgba(255, 255, 255, 0.07);
    --evmp-border-active: rgba(0, 123, 255, 0.55);
    --evmp-text:          rgba(255, 255, 255, 0.60);
    --evmp-text-bright:   rgba(255, 255, 255, 0.92);
    --evmp-track-bg:      rgba(0, 0, 0, 0.35);
    --evmp-progress-fill: rgba(0, 90, 220, 0.50);
    --evmp-radius:        18px;
    --evmp-height:        36px;
    --evmp-font:          "DM Mono", "Courier New", monospace;
}

/* ── Wrap (fixed anchor) ───────────────────────────────────────── */
#evmp-wrap {
    position:      fixed;
    bottom:        28px;
    right:         28px;
    z-index:       9998;
    display:       flex;
    flex-direction: column-reverse;
    align-items:   flex-end;
    gap:           8px;
    font-family:   var(--evmp-font);
    -webkit-user-select: none;
    user-select:   none;
}

/* ══════════════════════════════════════════════════════════════════
   PLAYLIST PANEL
══════════════════════════════════════════════════════════════════ */
#evmp-playlist {
    width:         300px;
    background:    var(--evmp-bg);
    border:        1px solid rgba(0, 123, 255, 0.18);
    border-radius: 16px;
    box-shadow:    0 -12px 50px rgba(0, 0, 0, 0.65),
                   0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter:         blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow:      hidden;
    pointer-events: none;
    opacity:       0;
    clip-path:     inset(100% 0 0 0 round 16px);  /* closed: reveals bottom→top */
    position:      relative;
    z-index:       1;
    transition:    clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                   opacity   0.28s ease;
}

#evmp-playlist.evmp-pl-open {
    pointer-events: auto;
    opacity:        1;
    clip-path:      inset(0 0 0 0 round 16px);
}

/* ── Playlist Header ─────────── */
.evmp-pl-header {
    padding:       12px 16px 10px;
    font-size:     7.5px;
    font-family:   var(--evmp-font);
    letter-spacing: 2.0px;
    text-transform: uppercase;
    color:         #007bff;
    font-weight:   700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background:    rgba(255, 255, 255, 0.02);
}

/* ── Track list scroll area ──── */
.evmp-pl-inner {
    max-height:   280px;  /* Reduced to fit header nicely within 330px height */
    overflow-y:   auto;
    padding:      10px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 123, 255, 0.28) transparent;
}
.evmp-pl-inner::-webkit-scrollbar          { width: 3px; }
.evmp-pl-inner::-webkit-scrollbar-track   { background: transparent; }
.evmp-pl-inner::-webkit-scrollbar-thumb   { background: rgba(0, 123, 255, 0.28); border-radius: 2px; }

/* ── Category heading ─────────── */
.evmp-pl-category {
    display:      flex;
    align-items:  center;
    gap:          8px;
    padding:      8px 16px 5px;
    font-size:    7.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:        #007bff;
    font-weight:  700;
    opacity:      0.75;
}
.evmp-pl-category::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: rgba(0, 123, 255, 0.14);
}

/* ── Track items ──────────────── */
.evmp-track-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       7px 14px 7px 12px;
    cursor:        pointer;
    transition:    background 0.18s, border-color 0.18s;
    border-left:   2.5px solid #007bff;
}
.evmp-track-item:hover {
    background: rgba(0, 123, 255, 0.07);
}
.evmp-track-item.evmp-active {
    background:        rgba(0, 123, 255, 0.12);
    border-left-color: #007bff;
}

.evmp-track-num {
    font-size:  9px;
    color:      rgba(255, 255, 255, 0.22);
    width:      16px;
    text-align: right;
    flex-shrink: 0;
    transition: color 0.18s;
}
.evmp-track-item.evmp-active .evmp-track-num { color: var(--evmp-accent); }

.evmp-track-title {
    font-size:     10px;
    color:         var(--evmp-text);
    letter-spacing: 0.4px;
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    transition:    color 0.18s;
}
.evmp-track-item:hover .evmp-track-title            { color: var(--evmp-text-bright); }
.evmp-track-item.evmp-active .evmp-track-title      { color: #fff; font-weight: 700; }

.evmp-track-thumb {
    width:         16px;
    height:        16px;
    border-radius: 4px;
    object-fit:    cover;
    border:        1px solid rgba(255, 255, 255, 0.08);
    flex-shrink:   0;
    margin-left:   6px;
    margin-right:  2px;
}

.evmp-track-duration {
    font-size:     8px;
    color:         rgba(255, 255, 255, 0.28);
    margin-right:  8px;
    font-family:   var(--evmp-font);
    flex-shrink:   0;
    transition:    color 0.18s;
}
.evmp-track-item.evmp-active .evmp-track-duration {
    color: rgba(255, 255, 255, 0.6);
}

.evmp-track-playing-icon {
    font-size:  16px;
    color:      var(--evmp-accent);
    display:    none;
    animation:  evmp-blink 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
.evmp-track-item.evmp-active .evmp-track-playing-icon { display: block; }

@keyframes evmp-blink {
    0%,100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* ── Playlist footer ──────────── */
.evmp-pl-footer {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     8px 14px 10px;
    border-top:  1px solid rgba(255, 255, 255, 0.05);
}

.evmp-pl-footer-btn {
    display:     flex;
    align-items: center;
    gap:         5px;
    background:  none;
    border:      1px solid rgba(255, 255, 255, 0.08);
    color:       rgba(255, 255, 255, 0.38);
    padding:     4px 9px;
    border-radius: 6px;
    cursor:      pointer;
    font-family: var(--evmp-font);
    font-size:   8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:  all 0.2s;
    line-height: 1;
}
.evmp-pl-footer-btn:hover {
    border-color: rgba(0, 123, 255, 0.45);
    color:        #007bff;
}
.evmp-pl-footer-btn.evmp-active {
    background:   rgba(0, 123, 255, 0.15);
    border-color: rgba(0, 123, 255, 0.5);
    color:        #007bff;
}

.evmp-credit {
    margin-left:   auto;
    font-size:     7.5px;
    color:         #007bff;
    letter-spacing: 0.3px;
    font-style:    italic;
    white-space:   nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   MAIN BAR
══════════════════════════════════════════════════════════════════ */
#evmp-bar {
    width:           300px;
    box-sizing:      border-box;
    display:         flex;
    align-items:     center;
    height:          var(--evmp-height);
    background:      var(--evmp-bg);
    border:          1.5px solid var(--evmp-border);
    border-radius:   var(--evmp-radius);
    backdrop-filter:         blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:      0 8px 32px rgba(0, 0, 0, 0.58);
    overflow:        visible; /* Changed from hidden to show volume popup above the bar */
    cursor:          pointer;
    position:        relative;
    z-index:         10;
    transition:      width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                     border-color 0.28s ease,
                     box-shadow 0.28s ease;
    padding:         0 8px 0 12px;
}

#evmp-bar:hover {
    width:           450px;
    border-color: var(--evmp-border-active);
    box-shadow:   0 0 28px var(--evmp-accent-glow), 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Left section (icon + label + marquee) ───── */
.evmp-left {
    display:     flex;
    align-items: center;
    gap:         7px;
    flex-shrink: 0;
}

.evmp-music-icon {
    color:       var(--evmp-accent);
    flex-shrink: 0;
    opacity:     0.85;
    transition:  opacity 0.2s;
}
#evmp-bar:hover .evmp-music-icon { opacity: 1; }

.evmp-label {
    font-size:      8px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color:          var(--evmp-text);
    font-weight:    700;
    white-space:    nowrap;
    flex-shrink:    0;
    transition:     color 0.2s;
}
#evmp-bar:hover .evmp-label {
    color: #ffffff;
    text-shadow: 0 0 8px #007bff, 0 0 16px rgba(0, 123, 255, 0.8);
}

/* ── Marquee (expands 300px on hover) ─────────── */
#evmp-marquee-wrap {
    width:        0;
    height:       100%; /* Spans full height of the bar */
    overflow:     hidden;
    flex-shrink:  0;
    display:      flex;
    align-items:  center;
    position:     relative; /* relative for simulation grid */
    transition:   width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#evmp-bar:hover #evmp-marquee-wrap { width: 150px; }

#evmp-sim-grid {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 4px 6px; /* slightly tighter vertical padding */
    box-sizing: border-box;
    z-index: 1;
}
/* Only show when player has .evmp-is-playing class */
.evmp-is-playing #evmp-sim-grid {
    opacity: 0.35; /* increased from 0.18 for better visibility */
}
#evmp-sim-grid div {
    width: 4px;
    height: 100%;
    background: repeating-linear-gradient(to top, var(--evmp-accent) 0, var(--evmp-accent) 2px, transparent 2px, transparent 3px);
    transform-origin: bottom;
    transform: scaleY(0.1);
}
.evmp-is-playing #evmp-sim-grid div {
    animation: evmp-sim-wave 1.2s ease-in-out infinite alternate;
}
/* Random delays for simulation effect */
#evmp-sim-grid div:nth-child(1) { animation-delay: 0.1s; }
#evmp-sim-grid div:nth-child(2) { animation-delay: 0.4s; }
#evmp-sim-grid div:nth-child(3) { animation-delay: 0.2s; }
#evmp-sim-grid div:nth-child(4) { animation-delay: 0.6s; }
#evmp-sim-grid div:nth-child(5) { animation-delay: 0.3s; }
#evmp-sim-grid div:nth-child(6) { animation-delay: 0.7s; }
#evmp-sim-grid div:nth-child(7) { animation-delay: 0.15s; }
#evmp-sim-grid div:nth-child(8) { animation-delay: 0.5s; }
#evmp-sim-grid div:nth-child(9) { animation-delay: 0.35s; }
#evmp-sim-grid div:nth-child(10) { animation-delay: 0.8s; }
#evmp-sim-grid div:nth-child(11) { animation-delay: 0.25s; }
#evmp-sim-grid div:nth-child(12) { animation-delay: 0.65s; }
#evmp-sim-grid div:nth-child(13) { animation-delay: 0.45s; }
#evmp-sim-grid div:nth-child(14) { animation-delay: 0.9s; }
#evmp-sim-grid div:nth-child(15) { animation-delay: 0.05s; }

@keyframes evmp-sim-wave {
    0% { transform: scaleY(0.1); }
    100% { transform: scaleY(0.95); }
}

#evmp-marquee-inner {
    z-index: 2; /* text above equalizer */
    display:    flex;
    width:      max-content;
    animation:  evmp-marquee 14s linear infinite;
    padding-left: 10px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.evmp-mq-span {
    font-size:      8px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color:          #007bff;
    padding-right:  60px;
    white-space:    nowrap;
}

@keyframes evmp-marquee {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ── Controls section (right side) ───────────── */
.evmp-controls {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Shared button base ───────────────────────── */
.evmp-btn {
    background:  none;
    border:      none;
    color:       var(--evmp-text);
    padding:     5px;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:  color 0.18s, background 0.18s;
    line-height: 1;
    flex-shrink: 0;
}
.evmp-btn:hover {
    color:       var(--evmp-accent);
    background:  var(--evmp-accent-glow);
}

/* ══════════════════════════════════════════════════════════════════
   TIMELINE (waveform + progress)
══════════════════════════════════════════════════════════════════ */
#evmp-timeline {
    width:        120px;   /* Set back to 120px as requested */
    height:       20px;
    position:     relative;
    cursor:       pointer;
    overflow:     hidden;
    border-radius: 4px;
    background:   var(--evmp-track-bg);
    flex-shrink:  0;
    transition:   box-shadow 0.2s;
}
#evmp-timeline:hover {
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.3);
}

/* Progress fill (played portion) */
#evmp-progress {
    position:       absolute;
    left:           0;
    top:            0;
    height:         100%;
    width:          0%;
    pointer-events: none;
    z-index:        1;
    transition:     none; /* Updated via RAF — no CSS transition */
    
    /* Default/Stopped: Red with 20% opacity */
    background:     #ff3b3b;
    opacity:        0.2;
}

/* Playing: animated gradient from right to left with breathing effect */
.evmp-is-playing #evmp-progress {
    background:     linear-gradient(90deg, var(--evmp-accent), #00c6ff, var(--evmp-accent));
    background-size: 200% 100%;
    animation:      evmp-gradient-flow 3s linear infinite, evmp-breathe 2s ease-in-out infinite;
}

@keyframes evmp-gradient-flow {
    0% { background-position: 200% 0; }
    100% { background-position: 0 0; }
}

@keyframes evmp-breathe {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.45; }
}

/* Wave overlay */
.evmp-wave-container {
    position:       absolute;
    inset:          0;
    overflow:       hidden;
    pointer-events: none;
    z-index:        2;
}

.evmp-wave-track {
    display:   flex;
    width:     200%;
    height:    100%;
    position:  absolute;
    left:      0;
    animation: evmp-wave-roll 4.5s linear infinite;
}

.evmp-wave-svg {
    width:      50%;
    height:     100%;
    flex-shrink: 0;
    transform:  scaleY(0.18); /* Increased from 0.08 so stopped red line is clearly visible */
    transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.evmp-is-playing .evmp-wave-svg { transform: scaleY(1); }

.evmp-wave-path {
    fill:             none;
    stroke:           #ff2222; /* Brighter neon red */
    stroke-width:     1.1; /* Thinner line */
    stroke-linecap:   round;
    stroke-linejoin:  round;
    transition:       stroke 0.7s ease;
}
.evmp-is-playing .evmp-wave-path { stroke: #4d9fff; }

@keyframes evmp-wave-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.evmp-is-playing .evmp-wave-track {
    animation: evmp-wave-roll 4.5s linear infinite,
               evmp-wave-glow 2.2s ease-in-out infinite alternate;
}
@keyframes evmp-wave-glow {
    from { opacity: 0.82; }
    to   { opacity: 1; }
}

/* Seek thumb indicator (shown on timeline hover) */
#evmp-timeline::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       var(--seek-x, 50%);
    width:      2px;
    height:     100%;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    opacity:    0;
    transition: opacity 0.15s;
    z-index:    3;
}
#evmp-timeline:hover::after { opacity: 0.5; }

/* ══════════════════════════════════════════════════════════════════
   SETTINGS / STOP BUTTON
══════════════════════════════════════════════════════════════════ */
#evmp-settings-wrap {
    position:    relative;
    display:     flex;
    align-items: center;
}

#evmp-settings {
    background:  none;
    border:      none;
    color:       var(--evmp-text);
    padding:     5px;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:  color 0.18s, background 0.18s;
    flex-shrink: 0;
    line-height: 1;
    position:    relative;
}
#evmp-settings:hover {
    color:      var(--evmp-accent);
    background: var(--evmp-accent-glow);
}
#evmp-settings.evmp-stopped {
    color: var(--evmp-red);
}
#evmp-settings.evmp-stopped:hover {
    background: var(--evmp-red-dim);
    color:      var(--evmp-red);
}

/* Spin animation for gear when playing */
#evmp-gear-icon {
    transition: transform 0.3s ease;
}
.evmp-is-playing #evmp-gear-icon {
    animation: evmp-gear-spin 8s linear infinite;
}
@keyframes evmp-gear-spin {
    to { transform: rotate(360deg); }
}

/* Flashing play button when playing */
#evmp-pause-icon {
    animation: evmp-play-flash 1s ease-in-out infinite;
}
@keyframes evmp-play-flash {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

/* ── Volume popup ─────────────── */
#evmp-vol-popup {
    position:        absolute;
    bottom:          calc(100% + 8px);
    right:           0;
    width:           28px;
    height:          88px;
    background:      var(--evmp-bg);
    border:          1px solid rgba(0, 123, 255, 0.28);
    border-radius:   14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    visibility:      hidden;
    pointer-events:  none;
    transition:      opacity 0.2s, visibility 0.2s, transform 0.2s;
    backdrop-filter:         blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:      0 4px 20px rgba(0, 0, 0, 0.55);
    transform:       translateY(4px);
    padding:         8px 0;
    z-index:         10;
}
/* Invisible hover bridge to prevent mouseleave trigger between button and popup */
#evmp-vol-popup::after {
    content:        '';
    position:       absolute;
    top:            100%;
    left:           0;
    width:          100%;
    height:         12px;
    background:     transparent;
}
#evmp-settings-wrap:hover #evmp-vol-popup {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translateY(0);
}

#evmp-vol-track {
    width:        3px;
    height:       100%;
    background:   rgba(255, 255, 255, 0.10);
    border-radius: 3px;
    position:     relative;
    cursor:       pointer;
}

#evmp-vol-fill {
    position:     absolute;
    bottom:       0;
    left:         0;
    width:        100%;
    background:   #007bff;
    border-radius: 3px;
    height:       80%;     /* default 80% = 0.8 volume */
    pointer-events: none;
    transition:   height 0.05s linear;
}

#evmp-vol-handle {
    position:     absolute;
    left:         50%;
    transform:    translate(-50%, 50%);
    width:        10px;
    height:       10px;
    background:   #007bff;
    border-radius: 50%;
    bottom:       80%;
    pointer-events: none;
    box-shadow:   0 0 8px rgba(0, 123, 255, 0.75);
    transition:   bottom 0.05s linear;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE FALLBACK
══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    #evmp-wrap {
        bottom: 16px;
        right:  16px;
    }
    #evmp-bar {
        width:           280px;
    }
    #evmp-bar:hover {
        width:           400px;
    }
    #evmp-bar:hover #evmp-marquee-wrap {
        width: 120px;  /* tighter on mobile */
    }
    #evmp-playlist { width: 280px; }

    /* Song Info Hover Window on Mobile: open at the top of the playlist */
    #evmp-song-info {
        right: 0 !important;
        left: 0 !important;
        bottom: calc(100% + 8px) !important;
        top: auto !important;
        width: auto !important;
        transform: translateY(-10px) !important;
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        gap: 2px 12px !important;
        padding: 12px !important;
    }
    #evmp-song-info.evmp-info-show {
        transform: translateY(0) !important;
    }
    #evmp-song-info .evmp-info-cover-wrap {
        grid-column: 1 !important;
        grid-row: 1 / span 4 !important;
        margin-bottom: 0 !important;
        width: 80px !important;
        height: 80px !important;
    }
    #evmp-song-info .evmp-info-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    #evmp-song-info .evmp-info-author {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin-bottom: 4px !important;
    }
    #evmp-song-info .evmp-info-desc {
        grid-column: 2 !important;
        grid-row: 3 !important;
        margin-bottom: 4px !important;
        max-height: 38px !important;
    }
    #evmp-song-info .evmp-info-duration {
        grid-column: 2 !important;
        grid-row: 4 !important;
    }
}

/* ── Song Info Hover Window (left of playlist) ── */
#evmp-song-info {
    position:        absolute;
    right:           316px; /* width of playlist (300px) + gap (16px) */
    top:             0;     /* aligned to the top of the playlist */
    width:           220px;
    background:      var(--evmp-bg);
    border:          1px solid rgba(0, 123, 255, 0.18);
    border-radius:   16px;
    backdrop-filter:         blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:      0 -12px 50px rgba(0, 0, 0, 0.65),
                     0 0 0 1px rgba(255, 255, 255, 0.04);
    padding:         16px;
    box-sizing:      border-box;
    opacity:         0;
    visibility:      hidden;
    transform:       translateX(10px);
    transition:      opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index:         9999;
}
#evmp-song-info.evmp-info-show {
    opacity:         1;
    visibility:      visible;
    transform:       translateX(0);
}

/* Hide song info when playlist is not open */
#evmp-playlist:not(.evmp-pl-open) ~ #evmp-song-info {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.evmp-info-cover-wrap {
    width:           100%;
    aspect-ratio:    1;
    border-radius:   10px;
    overflow:        hidden;
    background:      rgba(0, 0, 0, 0.3);
    border:          1px solid rgba(255, 255, 255, 0.05);
    margin-bottom:   12px;
}
.evmp-info-cover-wrap img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
}
.evmp-info-title {
    font-size:       11px;
    font-weight:     700;
    color:           #fff;
    margin-bottom:   4px;
    word-wrap:       break-word;
    text-align:      left;
}
.evmp-info-author {
    font-size:       8px;
    color:           var(--evmp-accent);
    letter-spacing:  0.8px;
    text-transform:  uppercase;
    margin-bottom:   8px;
    font-weight:     700;
    text-align:      left;
}
.evmp-info-desc {
    font-size:       9px;
    color:           var(--evmp-text);
    line-height:     1.4;
    margin-bottom:   8px;
    max-height:      60px;
    overflow-y:      auto;
    text-align:      left;
}
.evmp-info-duration {
    font-size:       8px;
    color:           rgba(255, 255, 255, 0.4);
    font-family:     var(--evmp-font);
    text-align:      left;
}

/* ── Smooth Toast Notification for Next Song (above player) ── */
#evmp-toast {
    align-self:      stretch;
    background:      var(--evmp-bg);
    border:          0 solid rgba(0, 123, 255, 0.18);
    border-radius:   var(--evmp-radius);
    backdrop-filter:         blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:      0 8px 32px rgba(0, 0, 0, 0.5);
    display:         flex;
    align-items:     center;
    padding:         0;
    box-sizing:      border-box;
    gap:             16px;
    max-height:      0;
    opacity:         0;
    overflow:        hidden;
    position:        relative;
    z-index:         2;
    transition:      max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                     opacity    0.35s ease,
                     padding    0.45s cubic-bezier(0.16, 1, 0.3, 1),
                     border-width 0.45s;
}
#evmp-toast.evmp-toast-show {
    max-height:      78px;
    opacity:         1;
    border-width:    1.5px;
    padding:         12px 16px;
}
#evmp-toast-cover {
    width:           44px;
    height:          44px;
    border-radius:   8px;
    object-fit:      cover;
    border:          1px solid rgba(255, 255, 255, 0.08);
    flex-shrink:     0;
}
.evmp-toast-content {
    flex:            1;
    min-width:       0;
    display:         flex;
    flex-direction:  column;
    gap:             3px;
    text-align:      left;
}
.evmp-toast-badge {
    font-size:       8px;
    color:           var(--evmp-accent);
    letter-spacing:  1.2px;
    text-transform:  uppercase;
    font-weight:     700;
}
.evmp-toast-title {
    font-size:       12px;
    color:           #fff;
    font-weight:     700;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}
.evmp-toast-desc {
    font-size:       10px;
    color:           var(--evmp-text);
    white-space:     normal;
    word-break:      break-word;
    display:         -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:        hidden;
    text-overflow:   ellipsis;
}