/* ============================================================================
 * Right panel = Spotify "Now Playing View" with the Spicy Lyrics sidebar card
 * (Lucid styling). Overrides the earlier "lyrics fill the panel" rules.
 * Loaded last.
 * ========================================================================== */

body .now-playing-panel.visible,
body .now-playing-panel.visible:has(.sl-root),
body.has-ambient-artwork .now-playing-panel.visible:has(.sl-root) {
    position: relative; overflow: hidden !important; isolation: isolate;
    background: var(--main-bg) !important;
    border: var(--default-border) !important; border-radius: 16px !important;
    padding: 0 !important;
}
body .now-playing-panel.visible:has(.sl-root)::before { display: none !important; }

/* Canvas / cover: fills the WHOLE panel (behind the title, lyrics card and queue) */
body .now-playing-panel .np-video-bg,
body .now-playing-panel:has(.sl-root) .np-video-bg {
    display: block !important; position: absolute; inset: 0; height: 100%; z-index: 0; opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
body .now-playing-panel .np-cover-container, body .now-playing-panel:has(.sl-root) .np-cover-container {
    position: absolute; inset: 0; filter: none !important; border-radius: 0 !important; margin: 0 !important; width: 100% !important; height: 100% !important;
}
body .now-playing-panel .np-cover-container img, body .now-playing-panel .np-cover-container video {
    width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important;
    -webkit-mask-image: none !important; mask-image: none !important;
}
body .now-playing-panel .np-bg-veil, body .now-playing-panel:has(.sl-root) .np-bg-veil {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%) !important;
}

/* Scrolling content on top */
body .now-playing-panel .np-scroll { position: relative; z-index: 1; height: 100%; overflow-y: auto !important; padding: 0 16px 16px !important; scrollbar-width: none; }

/* Header: context name (playlist) + close */
body .now-playing-panel .np-header, body .now-playing-panel:has(.sl-root) .np-header {
    position: sticky !important; top: 0; right: auto; z-index: 3; display: flex !important; align-items: center; justify-content: space-between;
    padding: 16px 0 8px !important; margin: 0 !important;
}
body .now-playing-panel .np-header .np-title-stack, body .now-playing-panel:has(.sl-root) .np-header .np-title-stack { display: block !important; }
body .now-playing-panel .np-title-top { font-size: 16px !important; font-weight: 700 !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; }
body .now-playing-panel .np-session-caption { display: none !important; }
body .now-playing-panel .np-icon-btn {
    width: 32px; height: 32px; border-radius: 50% !important; color: #fff !important;
    background: rgba(0, 0, 0, 0.35) !important; border: 0 !important;
}

/* Title row over the bottom of the canvas */
body .now-playing-panel .np-stage, body .now-playing-panel:has(.sl-root) .np-stage {
    display: block !important; border: 0 !important; background: none !important; padding: 0 !important;
    margin-top: calc(78% - 170px) !important; min-height: 0 !important;
}
body .now-playing-panel .np-stage-row { display: flex; align-items: flex-end; gap: 12px; }
body .now-playing-panel .np-stage-title { flex: 1; min-width: 0; }
body .now-playing-panel .np-stage-title .t { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
body .now-playing-panel .np-stage-title .a { font-size: 14px !important; color: rgba(255, 255, 255, 0.75) !important; margin-top: 2px; }
body .now-playing-panel .np-stage-actions { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
body .now-playing-panel .np-stage-btn { border: 0; background: none; color: rgba(255, 255, 255, 0.75); cursor: pointer; display: inline-flex; padding: 4px; }
body .now-playing-panel .np-stage-btn:hover { color: #fff; transform: scale(1.06); }
body .now-playing-panel .np-stage-btn.is-liked .sp-like-on { display: block; color: var(--clr-primary); }
body .now-playing-panel .np-stage-btn.is-liked .sp-like-off { display: none; }
body .now-playing-panel .np-stage-btn .sp-like-on { display: none; }
body .now-playing-panel .np-track-info { display: none !important; }

/* Spicy Lyrics sidebar card */
body .now-playing-panel .np-lyrics-container, body .now-playing-panel:has(.sl-root) .np-lyrics-container {
    display: block !important; margin: 16px 0 0 !important; padding: 0 !important; overflow: hidden !important;
    border-radius: 12px !important; border: var(--default-border) !important;
    background: rgba(0, 0, 0, 0.32) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; backdrop-filter: blur(24px) saturate(1.6) !important;
}
body .now-playing-panel .sp-lyrics-card-header, body .now-playing-panel:has(.sl-root) .sp-lyrics-card-header {
    display: flex !important; align-items: center; gap: 8px; padding: 14px 14px 6px 16px !important; cursor: default; color: #fff !important;
}
.sp-lyrics-card-title { font-size: 16px; font-weight: 700; color: #fff; flex: 1; }
.sp-lyrics-card-header .lyrics-source { display: none !important; }
.sp-lyrics-card-actions { display: flex; gap: 6px; }
.sp-lc-btn {
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    color: #fff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.25); transition: background 0.2s ease, transform 0.15s ease;
}
.sp-lc-btn:hover { background: rgba(255, 255, 255, 0.18); }
.sp-lc-btn:active { transform: scale(0.94); }
#npLyricsPanel.is-collapsed .sp-lc-collapse svg { transform: rotate(180deg); }

body .now-playing-panel .np-lyrics-content, body .now-playing-panel:has(.sl-root) .np-lyrics-content {
    height: 230px !important; max-height: none !important; overflow-y: auto !important; padding: 0 16px !important; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 80%, transparent 100%) !important;
    transition: height 0.3s ease;
}
body .now-playing-panel .np-lyrics-content::-webkit-scrollbar { display: none; }
#npLyricsPanel.is-expanded .np-lyrics-content { height: 460px !important; }
#npLyricsPanel.is-collapsed .np-lyrics-content { height: 0 !important; }
body .now-playing-panel .sl-root { --sl-size: 26px; gap: 6px; padding: 90px 0 140px !important; }
body .now-playing-panel .sl-line { font-weight: 700; }
body .now-playing-panel .sl-credit { margin-top: 18px; }

/* Queue card like Spotify's "Next in queue" section */
body .now-playing-panel #npQueueBox {
    margin-top: 16px !important; border-radius: 12px !important; border: var(--default-border) !important;
    background: var(--background-highlight) !important; padding: 12px 16px !important;
}

/* Fixes: title sits on the bottom of the canvas; drop the old tinted veil; casing */
body .now-playing-panel .np-stage, body .now-playing-panel:has(.sl-root) .np-stage {
    margin-top: max(120px, calc((100vh - 170px) * 0.78 - 215px)) !important;
}
body.has-ambient-artwork .now-playing-panel .np-bg-veil,
body.has-ambient-artwork .now-playing-panel:has(.sl-root) .np-bg-veil,
body .now-playing-panel .np-bg-veil {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%) !important;
}
body.has-ambient-artwork .now-playing-panel .np-cover-container,
body .now-playing-panel:has(.sl-root) .np-cover-container { filter: none !important; }
body .now-playing-panel .sp-lyrics-card-title { text-transform: none !important; letter-spacing: 0 !important; }
body .now-playing-panel .np-lyrics-header { text-transform: none !important; letter-spacing: 0 !important; }

#npStage.np-stage { margin-top: max(120px, calc((100vh - 170px) * 0.78 - 215px)) !important; }
#npStage.np-stage { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; flex: none !important; }