feat: implement kiosk mode with wake lock and UI adjustments

Signed-off-by: zwlucas <lucas.fariamo08@gmail.com>

1 files changed, 47 insertions, 0 deletions

diff --git a/frontend/src/app.css b/frontend/src/app.css
index c1d9e47..a45bd93 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -48,3 +48,50 @@ body {
 	background: var(--border-color);
 	border-radius: 3px;
 }
+
+/* ── Kiosk / TV Mode ── */
+html.kiosk-mode,
+html.kiosk-mode body {
+	overflow: hidden !important;
+	cursor: none;
+}
+
+html.kiosk-mode body {
+	background:
+		radial-gradient(ellipse 100% 80% at 30% -10%, rgba(34, 240, 106, 0.06) 0%, transparent 60%),
+		radial-gradient(ellipse 80% 70% at 80% 30%, rgba(255, 64, 96, 0.04) 0%, transparent 50%),
+		var(--bg-primary);
+}
+
+html.kiosk-mode header,
+html.kiosk-mode .kiosk-hidden {
+	display: none !important;
+}
+
+html.kiosk-mode main {
+	max-width: none !important;
+	padding: 1rem !important;
+}
+
+html.kiosk-mode .kiosk-active .grid {
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
+}
+
+html.kiosk-mode .kiosk-active .grid > * {
+	transform: scale(1);
+}
+
+/* SSE pulse animation */
+.kiosk-active.pulse [class*="border"] {
+	animation: kioskPulse 0.6s ease-out;
+}
+
+@keyframes kioskPulse {
+	0%   { box-shadow: 0 0 0 0 rgba(34, 240, 106, 0.3); }
+	100% { box-shadow: 0 0 0 8px transparent; }
+}
+
+/* Re-enable cursor when moving in kiosk mode */
+html.kiosk-mode .kiosk-active {
+	cursor: auto;
+}