Merge pull request #98 from meowarex/dev

Lyrics Flush Feature + Redesigned HideUI

plugins/radiant-lyrics-luna/src/cover-everywhere.css

@@ -72,8 +72,7 @@
 
 /* Ensure now-playing content renders above the dynamic background */
 [data-test="new-now-playing"] > header,
-[data-test="new-now-playing"] > [class*="_content_"],
+[data-test="new-now-playing"] > [class*="_content_"] {
-[data-test="new-now-playing"] > .unhide-ui-button {
 	position: relative;
 	z-index: 1;
 }

plugins/radiant-lyrics-luna/src/index.ts

@@ -1,5 +1,5 @@
 // MARKER: Core Setup
-import { type LunaUnload, Tracer } from "@luna/core";
+import { type LunaUnload, Tracer, reduxStore, buildActions } from "@luna/core";
 import {
 	MediaItem,
 	observe,
@@ -28,6 +28,15 @@ import baseStyles from "file://styles.css?minify";
 export const { trace } = Tracer("[Radiant Lyrics]");
 export { Settings };
 
+const toast = (msg: string) =>
+	reduxStore.dispatch(
+		buildActions["message/MESSAGE_INFO"]?.({ message: msg, category: "OTHER", severity: "INFO" }),
+	);
+const toastErr = (msg: string) =>
+	reduxStore.dispatch(
+		buildActions["message/MESSAGE_ERROR"]?.({ message: msg, category: "OTHER", severity: "ERROR" }),
+	);
+
 // clean up resources
 export const unloads = new Set<LunaUnload>();
 
@@ -239,95 +248,29 @@ const updateRadiantLyricsStyles = function (): void {
 // MARKER: UI Visibility Control
 // UI state shared across features
 let isHidden = false;
-let unhideButtonAutoFadeTimeout: number | null = null;
 
-// Helper to safely create a one-off timeout that clears previous if any
+const EYE_OFF_SVG = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;
-const safelySetAutoFadeTimeout = (
+const EYE_ON_SVG = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`;
-	existingId: number | null,
-	fn: () => void,
-	delay: number,
-): number => {
-	if (existingId != null) window.clearTimeout(existingId);
-	return window.setTimeout(fn, delay);
-};
 
 const updateButtonStates = function (): void {
-	const hideButton = document.querySelector(".hide-ui-button") as HTMLElement;
+	const toggleButton = document.querySelector(".hide-ui-button") as HTMLElement;
-	const unhideButton = document.querySelector(
+	if (!toggleButton) return;
-		".unhide-ui-button",
-	) as HTMLElement;
 
-	if (hideButton) {
+	if (settings.hideUIEnabled) {
-		if (settings.hideUIEnabled && !isHidden) {
+		toggleButton.style.display = "";
-			hideButton.style.display = "flex";
+		const newSvg = isHidden ? EYE_ON_SVG : EYE_OFF_SVG;
-			// Small delay to ensure display is set first, then fade in
+		const label = isHidden ? "Show UI" : "Hide UI";
-			safeTimeout(
+		toggleButton.setAttribute("aria-label", label);
-				unloads,
+		toggleButton.setAttribute("title", label);
-				() => {
+		const spanWrapper = toggleButton.querySelector("span");
-					hideButton.style.opacity = "1";
+		if (spanWrapper) {
-					hideButton.style.visibility = "visible";
+			const svgClass = spanWrapper.querySelector("svg")?.getAttribute("class") ?? "";
-					hideButton.style.pointerEvents = "auto";
+			spanWrapper.innerHTML = newSvg;
-				},
+			const svg = spanWrapper.querySelector("svg");
-				50,
+			if (svg && svgClass) svg.setAttribute("class", svgClass);
-			);
+		}
 	} else {
-			// Hide UI button immediately when clicked - (couldn't get the fade to work)
+		toggleButton.style.display = "none";
-			hideButton.style.display = "none";
-			hideButton.style.opacity = "0";
-			hideButton.style.visibility = "hidden";
-			hideButton.style.pointerEvents = "none";
-		}
-	}
-	if (unhideButton) {
-		// Clear any existing auto-fade timeout
-		if (unhideButtonAutoFadeTimeout != null) {
-			window.clearTimeout(unhideButtonAutoFadeTimeout);
-			unhideButtonAutoFadeTimeout = null;
-		}
-
-		if (settings.hideUIEnabled && isHidden) {
-			unhideButton.style.display = "flex";
-			// Remove the hide-immediately class and let it fade in smoothly
-			unhideButton.classList.remove("hide-immediately");
-			unhideButton.classList.remove("auto-faded");
-			// Small delay to ensure display is set first, then fade in - (Works for unhide button.. but not hide button.. because uhh idk)
-			safeTimeout(
-				unloads,
-				() => {
-					unhideButton.style.opacity = "1";
-					unhideButton.style.visibility = "visible";
-					unhideButton.style.pointerEvents = "auto";
-
-					// Set up auto-fade after 2 seconds
-					unhideButtonAutoFadeTimeout = safelySetAutoFadeTimeout(
-						unhideButtonAutoFadeTimeout,
-						() => {
-							if (isHidden && unhideButton && !unhideButton.matches(":hover")) {
-								unhideButton.classList.add("auto-faded");
-							}
-						},
-						2000,
-					);
-				},
-				50,
-			);
-		} else {
-			// Smooth fade out for Unhide UI button
-			unhideButton.style.opacity = "0";
-			unhideButton.style.visibility = "hidden";
-			unhideButton.style.pointerEvents = "none";
-			unhideButton.classList.remove("auto-faded");
-			// Keep display: flex to maintain transitions, then hide after fade
-			safeTimeout(
-				unloads,
-				() => {
-					if (unhideButton.style.opacity === "0") {
-						unhideButton.style.display = "none";
-					}
-				},
-				500,
-			);
-		}
 	}
 };
 
@@ -336,12 +279,20 @@ const toggleRadiantLyrics = function (): void {
 	const nowPlayingContainer = document.querySelector(
 		'[class*="_nowPlayingContainer"]',
 	) as HTMLElement;
-	if (isHidden) {
-		const unhideButton = document.querySelector(
-			".unhide-ui-button",
-		) as HTMLElement;
-		if (unhideButton) unhideButton.classList.add("hide-immediately");
 	isHidden = !isHidden;
+	updateButtonStates();
+	if (isHidden) {
+		safeTimeout(
+			unloads,
+			() => {
+				updateRadiantLyricsStyles();
+				if (nowPlayingContainer)
+					nowPlayingContainer.classList.add("radiant-lyrics-ui-hidden");
+				document.body.classList.add("radiant-lyrics-ui-hidden");
+			},
+			50,
+		);
+	} else {
 		if (nowPlayingContainer)
 			nowPlayingContainer.classList.remove("radiant-lyrics-ui-hidden");
 		document.body.classList.remove("radiant-lyrics-ui-hidden");
@@ -354,128 +305,187 @@ const toggleRadiantLyrics = function (): void {
 			},
 			500,
 		);
-		updateButtonStates();
-	} else {
-		isHidden = !isHidden;
-		updateButtonStates();
-		safeTimeout(
-			unloads,
-			() => {
-				updateRadiantLyricsStyles();
-				if (nowPlayingContainer)
-					nowPlayingContainer.classList.add("radiant-lyrics-ui-hidden");
-				document.body.classList.add("radiant-lyrics-ui-hidden");
-			},
-			50,
-		);
 	}
 };
 
 // Create buttons
-const createHideUIButton = function (): void {
+let resyncLocked = false;
-	safeTimeout(
+const unlockResync = (): void => {
-		unloads,
+	resyncLocked = false;
-		() => {
+	const btn = document.querySelector(".resync-lyrics-button") as HTMLButtonElement;
-			if (!settings.hideUIEnabled) return;
+	if (btn) {
-			const fullscreenButton = document.querySelector(
+		btn.disabled = false;
-				'[data-test="new-now-playing-expand"]',
+		btn.style.opacity = "";
-			);
+		btn.style.cursor = "";
-			if (!fullscreenButton || !fullscreenButton.parentElement) {
+		btn.setAttribute("title", "Resync Lyrics");
-				safeTimeout(unloads, () => createHideUIButton(), 1000);
+		btn.setAttribute("aria-label", "Resync Lyrics");
+	}
+};
+const lockResync = (): void => {
+	resyncLocked = true;
+	const btn = document.querySelector(".resync-lyrics-button") as HTMLButtonElement;
+	if (btn) {
+		btn.disabled = true;
+		btn.style.opacity = "0.3";
+		btn.style.cursor = "not-allowed";
+	}
+};
+const disableResyncNoLyrics = (): void => {
+	resyncLocked = true;
+	const btn = document.querySelector(".resync-lyrics-button") as HTMLButtonElement;
+	if (btn) {
+		btn.disabled = true;
+		btn.style.opacity = "0.3";
+		btn.style.cursor = "not-allowed";
+		btn.setAttribute("title", "Track has no lyrics");
+		btn.setAttribute("aria-label", "Track has no lyrics");
+	}
+};
+
+const resyncLyrics = async (): Promise<void> => {
+	if (resyncLocked) return;
+
+	const trackInfo = await getTrackInfo();
+	if (!trackInfo) {
+		trace.msg.err("Resync: could not get track info");
 		return;
 	}
-			if (document.querySelector(".hide-ui-button")) return;
+
-			const buttonContainer = fullscreenButton.parentElement;
+	lockResync();
-			const hideUIButton = document.createElement("button");
+
-			hideUIButton.className = "hide-ui-button";
+	let params = `?title=${encodeURIComponent(trackInfo.title)}&artist=${encodeURIComponent(trackInfo.artist)}`;
-			hideUIButton.setAttribute("aria-label", "Hide UI");
+	if (trackInfo.isrc) params += `&isrc=${encodeURIComponent(trackInfo.isrc)}`;
-			hideUIButton.setAttribute("title", "Hide UI");
+	params += "&flush=true&platform=" + encodeURIComponent("Radiant Lyrics");
-			hideUIButton.textContent = "Hide UI";
+
-			hideUIButton.style.backgroundColor = "#ffffff";
+	const url = `https://api.atomix.one/rl-api${params}`;
-			hideUIButton.style.color = "black";
+	try {
-			hideUIButton.style.border = "none";
+		const res = await fetch(url, {
-			hideUIButton.style.borderRadius = "12px";
+			headers: {
-			hideUIButton.style.height = "40px";
+				"P-Access-Token-Id": "58hy4s86",
-			hideUIButton.style.padding = "0 12px";
+				"P-Access-Token": "xjehy2lfg5h5mjwotoxrcqugam",
-			hideUIButton.style.marginLeft = "8px";
+			},
-			hideUIButton.style.cursor = "pointer";
-			hideUIButton.style.display = "flex";
-			hideUIButton.style.alignItems = "center";
-			hideUIButton.style.justifyContent = "center";
-			hideUIButton.style.fontSize = "12px";
-			hideUIButton.style.fontWeight = "600";
-			hideUIButton.style.whiteSpace = "nowrap";
-			hideUIButton.style.transition =
-				"opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.2s ease-in-out";
-			hideUIButton.style.opacity = "0";
-			hideUIButton.style.visibility = "hidden";
-			hideUIButton.style.pointerEvents = "none";
-			hideUIButton.addEventListener("mouseenter", () => {
-				hideUIButton.style.backgroundColor = "#e5e5e5";
 		});
-			hideUIButton.addEventListener("mouseleave", () => {
+		if (res.status === 404) {
-				hideUIButton.style.backgroundColor = "#ffffff";
+			toast("No lyrics found for this track");
-			});
+			unlockResync();
-			hideUIButton.onclick = toggleRadiantLyrics;
+			return;
-			buttonContainer.insertBefore(hideUIButton, fullscreenButton.nextSibling);
+		}
+		if (!res.ok) {
+			toastErr(`Resync failed (${res.status})`);
+			unlockResync();
+			return;
+		}
+		const data = (await res.json()) as LyricsApiResponse & { _flush?: string };
+		const flush = data?._flush ?? "";
+
+		const needsReload = flush.startsWith("Created") || flush.startsWith("Updated");
+		if (flush) {
+			toast(flush);
+		} else {
+			toast("Lyrics resynced");
+		}
+		if (needsReload || !flush) {
+			cachedLyricsKey = null;
+			cachedLyricsData = null;
+			onTrackChange();
+		} else {
+			unlockResync();
+		}
+	} catch (err) {
+		toastErr(`Resync error: ${err instanceof Error ? err.message : String(err)}`);
+		unlockResync();
+	}
+};
+
+const createResyncButton = function (): void {
 	safeTimeout(
 		unloads,
 		() => {
-					if (settings.hideUIEnabled && !isHidden) {
+			const closeButton = document.querySelector(
-						hideUIButton.style.opacity = "1";
+				'[data-test="new-now-playing-close"]',
-						hideUIButton.style.visibility = "visible";
+			) as HTMLButtonElement;
-						hideUIButton.style.pointerEvents = "auto";
+			if (!closeButton || !closeButton.parentElement) {
+				safeTimeout(unloads, () => createResyncButton(), 1000);
+				return;
 			}
-				},
+			if (document.querySelector(".resync-lyrics-button")) return;
-				100,
+			const buttonContainer = closeButton.parentElement;
+
+			const resyncButton = closeButton.cloneNode(false) as HTMLButtonElement;
+			resyncButton.className = closeButton.className;
+			resyncButton.classList.add("resync-lyrics-button");
+			resyncButton.removeAttribute("data-test");
+			resyncButton.setAttribute("type", "button");
+			resyncButton.setAttribute("aria-label", "Resync Lyrics");
+			resyncButton.setAttribute("title", "Resync Lyrics");
+			resyncButton.disabled = true;
+			resyncButton.style.opacity = "0.3";
+			resyncButton.style.cursor = "not-allowed";
+
+			const iconSpan = closeButton.querySelector("span");
+			const iconSvg = closeButton.querySelector("svg");
+			const spanWrapper = document.createElement("span");
+			if (iconSpan) spanWrapper.className = iconSpan.className;
+			spanWrapper.setAttribute("aria-hidden", "true");
+			const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+			svgEl.setAttribute("viewBox", "0 0 20 20");
+			if (iconSvg) svgEl.setAttribute("class", iconSvg.className.baseVal);
+			const useEl = document.createElementNS("http://www.w3.org/2000/svg", "use");
+			useEl.setAttribute("href", "#general__lyrics-sync");
+			svgEl.appendChild(useEl);
+			spanWrapper.appendChild(svgEl);
+			resyncButton.appendChild(spanWrapper);
+
+			resyncButton.onclick = () => resyncLyrics();
+
+			const hideBtn = buttonContainer.querySelector(".hide-ui-button");
+			buttonContainer.insertBefore(
+				resyncButton,
+				hideBtn ?? closeButton,
 			);
 		},
 		1000,
 	);
 };
 
-const createUnhideUIButton = function (): void {
+const createHideUIButton = function (): void {
 	safeTimeout(
 		unloads,
 		() => {
 			if (!settings.hideUIEnabled) return;
-			if (document.querySelector(".unhide-ui-button")) return;
+			const closeButton = document.querySelector(
-			const nowPlayingContainer = document.querySelector(
+				'[data-test="new-now-playing-close"]',
-				'[class*="_nowPlayingContainer"]',
+			) as HTMLButtonElement;
-			) as HTMLElement;
+			if (!closeButton || !closeButton.parentElement) {
-			if (!nowPlayingContainer) {
+				safeTimeout(unloads, () => createHideUIButton(), 1000);
-				safeTimeout(unloads, () => createUnhideUIButton(), 1000);
 				return;
 			}
-			const unhideUIButton = document.createElement("button");
+			if (document.querySelector(".hide-ui-button")) return;
-			unhideUIButton.className = "unhide-ui-button";
+			const buttonContainer = closeButton.parentElement;
-			unhideUIButton.setAttribute("aria-label", "Unhide UI");
+
-			unhideUIButton.setAttribute("title", "Unhide UI");
+			const hideUIButton = closeButton.cloneNode(false) as HTMLButtonElement;
-			unhideUIButton.textContent = "Unhide";
+			hideUIButton.className = closeButton.className;
-			unhideUIButton.style.cssText = `position: absolute; top: 10px; right: 10px; background-color: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; height: 40px; padding: 0 12px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: all 0.5s ease-in-out; font-size: 12px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; pointer-events: none;`;
+			hideUIButton.classList.add("hide-ui-button");
-			unhideUIButton.addEventListener("mouseenter", () => {
+			hideUIButton.removeAttribute("data-test");
-				unhideUIButton.style.backgroundColor = "rgba(255,255,255,0.3)";
+			hideUIButton.setAttribute("type", "button");
-				unhideUIButton.style.transform = "scale(1.05)";
+			hideUIButton.setAttribute("aria-label", isHidden ? "Show UI" : "Hide UI");
-				unhideUIButton.classList.remove("auto-faded");
+			hideUIButton.setAttribute("title", isHidden ? "Show UI" : "Hide UI");
-			});
+
-			unhideUIButton.addEventListener("mouseleave", () => {
+			const iconSpan = closeButton.querySelector("span");
-				unhideUIButton.style.backgroundColor = "rgba(255,255,255,0.2)";
+			const iconSvg = closeButton.querySelector("svg");
-				unhideUIButton.style.transform = "scale(1)";
+			const spanWrapper = document.createElement("span");
-				safeTimeout(
+			if (iconSpan) spanWrapper.className = iconSpan.className;
-					unloads,
+			spanWrapper.setAttribute("aria-hidden", "true");
-					() => {
+			const svgContent = isHidden ? EYE_ON_SVG : EYE_OFF_SVG;
-						if (isHidden && !unhideUIButton.matches(":hover")) {
+			spanWrapper.innerHTML = svgContent;
-							unhideUIButton.classList.add("auto-faded");
+			const svg = spanWrapper.querySelector("svg");
-						}
+			if (svg && iconSvg) svg.setAttribute("class", iconSvg.className.baseVal);
+			hideUIButton.appendChild(spanWrapper);
+
+			hideUIButton.onclick = toggleRadiantLyrics;
+			buttonContainer.insertBefore(hideUIButton, closeButton);
 		},
-					2000,
+		1000,
-				);
-			});
-			unhideUIButton.onclick = toggleRadiantLyrics;
-			nowPlayingContainer.appendChild(unhideUIButton);
-			updateButtonStates();
-		},
-		1500,
 	);
 };
 
@@ -1007,21 +1017,10 @@ unloads.add(() => {
 		footerPlayer.style.removeProperty("width");
 	}
 
-	// Clean up HideUI button auto-fade timeout
+	// Clean up action buttons
-	if (unhideButtonAutoFadeTimeout != null) {
+	for (const sel of [".hide-ui-button", ".resync-lyrics-button"]) {
-		window.clearTimeout(unhideButtonAutoFadeTimeout);
+		const btn = document.querySelector(sel);
-		unhideButtonAutoFadeTimeout = null;
+		if (btn?.parentNode) btn.parentNode.removeChild(btn);
-	}
-
-	// Clean up HideUI button
-	const hideButton = document.querySelector(".hide-ui-button");
-	if (hideButton && hideButton.parentNode) {
-		hideButton.parentNode.removeChild(hideButton);
-	}
-
-	const unhideButton = document.querySelector(".unhide-ui-button");
-	if (unhideButton && unhideButton.parentNode) {
-		unhideButton.parentNode.removeChild(unhideButton);
 	}
 
 	// Clean up sticky lyrics elements
@@ -3922,6 +3921,7 @@ const startTickLoop = (): void => {
 // Called by track change or style toggle
 const onTrackChange = async (): Promise<void> => {
 	teardown();
+	lockResync();
 
 	const runId = ++trackChangeRunSeq;
 	isTrackChangeRunning = true;
@@ -3947,6 +3947,7 @@ const onTrackChange = async (): Promise<void> => {
 		if (token !== trackChangeToken) return;
 		if (!response) {
 			trace.log("RL API: no API lyrics available, falling back to TIDAL lines");
+			disableResyncNoLyrics();
 			const tidalTexts = getTidalLines();
 			const romanized = settings.romanizeLyrics
 				? await romanizeLines(tidalTexts)
@@ -3992,6 +3993,7 @@ const onTrackChange = async (): Promise<void> => {
 			`[RL-Syllable] Loaded "${trackInfo.title}" by "${trackInfo.artist}" — ${response.data.length} lines`,
 		);
 
+		unlockResync();
 		lyricsMode = response.type === "Word" ? "word" : "line-api";
 		if (token !== trackChangeToken) return;
 		lyricsData =
@@ -4166,19 +4168,13 @@ const setupTrackChangeListener = (): void => {
 
 function setupHeaderObserver(): void {
 	const existing = document.querySelector('[data-test="header"]');
-	if (existing && !document.querySelector(".hide-ui-button"))
+	if (existing) {
-		createHideUIButton();
+		if (!document.querySelector(".resync-lyrics-button")) createResyncButton();
-	observe<HTMLElement>(unloads, '[data-test="header"]', () => {
+		if (!document.querySelector(".hide-ui-button")) createHideUIButton();
+	}
+	observe<HTMLElement>(unloads, '[data-test="header"]', () => {
+		if (!document.querySelector(".resync-lyrics-button")) createResyncButton();
 		if (!document.querySelector(".hide-ui-button")) createHideUIButton();
-	});
-}
-
-function setupNowPlayingObserver(): void {
-	const existing = document.querySelector('[class*="_nowPlayingContainer"]');
-	if (existing && !document.querySelector(".unhide-ui-button"))
-		createUnhideUIButton();
-	observe<HTMLElement>(unloads, '[class*="_nowPlayingContainer"]', () => {
-		if (!document.querySelector(".unhide-ui-button")) createUnhideUIButton();
 	});
 }
 
@@ -4190,6 +4186,5 @@ onGlobalTrackChange(() => {
 
 // Init observers
 setupHeaderObserver();
-setupNowPlayingObserver();
 setupStickyLyricsObserver();
 setupTrackChangeListener();

plugins/radiant-lyrics-luna/src/styles.css

@@ -23,60 +23,27 @@
 .radiant-lyrics-ui-hidden [data-test="toggle-credits"],
 .radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"] {
 	opacity: 0 !important;
-	transition: opacity 0.4s ease-in-out;
+	transition: opacity 0.4s ease-in-out !important;
 }
 
 .radiant-lyrics-ui-hidden [data-test="toggle-lyrics"]:hover,
 .radiant-lyrics-ui-hidden [data-test="toggle-credits"]:hover,
-.radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"]:hover {
+.radiant-lyrics-ui-hidden [data-test="toggle-similar-tracks"]:hover,
+.radiant-lyrics-ui-hidden.rl-dropdown-open [data-test="toggle-lyrics"] {
 	opacity: 1 !important;
+	transition: opacity 0.4s ease-in-out !important;
 }
 
-/* Hide header container (search, minimize, fullscreen) when UI is hidden */
+/* Hide header, artist info, and visualizer when UI is hidden */
-.radiant-lyrics-ui-hidden [data-test="header"] {
+.radiant-lyrics-ui-hidden [data-test="header"],
+.radiant-lyrics-ui-hidden [data-test="artist-info"],
+.radiant-lyrics-ui-hidden .audio-visualizer-container {
 	opacity: 0 !important;
 	visibility: hidden !important;
-	transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
+	transition: opacity 0.4s ease-in-out !important, visibility 0s linear 0.4s;
 	pointer-events: none !important;
 }
 
-/* Immediate hide class for unhide button */
-.hide-immediately {
-	opacity: 0 !important;
-	visibility: hidden !important;
-	pointer-events: none !important;
-}
-
-/* Auto-fade styling for unhide button */
-.unhide-ui-button.auto-faded {
-	background-color: transparent !important;
-	border-color: transparent !important;
-	box-shadow: none !important;
-	backdrop-filter: none !important;
-	-webkit-backdrop-filter: none !important;
-	color: rgba(255, 255, 255, 0.4) !important;
-	transition:
-		background-color 0.8s ease-in-out,
-		border-color 0.8s ease-in-out,
-		box-shadow 0.8s ease-in-out,
-		backdrop-filter 0.8s ease-in-out,
-		color 0.8s ease-in-out !important;
-}
-
-.unhide-ui-button.auto-faded:hover {
-	background-color: rgba(255, 255, 255, 0.2) !important;
-	border-color: rgba(255, 255, 255, 0.3) !important;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
-	backdrop-filter: blur(10px) !important;
-	-webkit-backdrop-filter: blur(10px) !important;
-	color: white !important;
-	transition:
-		background-color 0.3s ease-in-out,
-		border-color 0.3s ease-in-out,
-		box-shadow 0.3s ease-in-out,
-		backdrop-filter 0.3s ease-in-out,
-		color 0.3s ease-in-out !important;
-}
 
 
 /* MARKER: Sticky Lyrics CSS */
@@ -295,3 +262,8 @@ body.rl-dropdown-open [data-test="toggle-lyrics"] {
 ._artworkTilt_1c6d5cc {
     border: none !important;
 }
+
+/* Hide fullscreen button — breaks Radiant Lyrics */
+[data-test="new-now-playing-expand"] {
+	display: none !important;
+}