From bf439024444c7d302281e4bee18881543ad9ccf6 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Tue, 30 Dec 2025 18:36:19 +0100
Subject: [PATCH] style: make hint bar float over editor

- Editor content now extends full height
- Hint area floats at bottom with blur effect
- Hide hint area when empty
- Update hint styling for dark background
---
 src/main.css | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/main.css b/src/main.css
index dffca73..eec08a2 100644
--- a/src/main.css
+++ b/src/main.css
@@ -298,6 +298,7 @@ code, kbd {
 	display: flex;
 	flex-direction: column;
 	min-height: 0;
+	position: relative;
 }
 
 .code-editor {
@@ -368,10 +369,18 @@ code, kbd {
 
 /* ================= HINT AREA ================= */
 .hint-area {
-	min-height: 3rem;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
 	padding: var(--spacing-sm) var(--spacing-md);
-	background: var(--code-bg);
-	border-top: 1px solid var(--border-color);
+	background: rgba(30, 30, 30, 0.9);
+	backdrop-filter: blur(4px);
+	z-index: 5;
+}
+
+.hint-area:empty {
+	display: none;
 }
 
 .hint {
@@ -379,9 +388,10 @@ code, kbd {
 	align-items: center;
 	gap: var(--spacing-sm);
 	padding: var(--spacing-xs) var(--spacing-sm);
-	background: var(--primary-bg-light);
-	border-left: 3px solid var(--primary-color);
+	background: rgba(94, 75, 139, 0.3);
+	border-left: 3px solid var(--primary-light);
 	border-radius: var(--border-radius-sm);
+	color: var(--editor-text);
 }
 
 .hint-progress {