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

@@ -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);
+	background: rgba(30, 30, 30, 0.9);
-	border-top: 1px solid var(--border-color);
+	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);
+	background: rgba(94, 75, 139, 0.3);
-	border-left: 3px solid var(--primary-color);
+	border-left: 3px solid var(--primary-light);
 	border-radius: var(--border-radius-sm);
+	color: var(--editor-text);
 }
 
 .hint-progress {