feat: show calculator status messages as overlay bar

samples/calc-02/index.css

@@ -65,6 +65,8 @@ body {
 		"buttons functions"
 		"keypad functions"
 		"keypad trigo";
+
+
 }
 
 .display-panel,
@@ -81,6 +83,7 @@ body {
 
 .display-panel {
 	grid-area: display;
+	position: relative;
 	padding: clamp(12px, 1.5vw, 16px);
 	background: linear-gradient(180deg, var(--display), var(--display2));
 	color: var(--displayText);
@@ -203,14 +206,38 @@ body {
 	padding-top: 10px;
 }
 
-.status-line {
-	grid-area: status;
-	padding: 10px 14px;
+.status-bar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 2;
+	padding: 8px 12px;
+	min-height: 30px;
 	display: flex;
 	align-items: center;
-	min-height: 42px;
-	font-size: 14px;
-	color: rgba(255, 255, 255, 0.85);
+	justify-content: center;
+	font-size: 13px;
+	font-weight: 700;
+	letter-spacing: 0.02em;
+	color: rgba(31, 42, 18, 0.96);
+	background: rgba(255, 246, 170, 0.92);
+	border-bottom: 1px solid rgba(31, 42, 18, 0.2);
+	transform: translateY(-100%);
+	opacity: 0;
+	transition: transform 180ms ease, opacity 180ms ease;
+	pointer-events: none;
+}
+
+.status-bar.is-visible {
+	transform: translateY(0);
+	opacity: 1;
+}
+
+.status-bar.is-error {
+	color: #fff;
+	background: rgba(72, 14, 14, 0.98);
+	border-bottom-color: rgba(255, 255, 255, 0.12);
 }
 
 .keypad-grid,

samples/calc-02/index.html

@@ -10,6 +10,7 @@
 	<main class="app-shell">
 		<section class="calculator calculator-portrait" aria-label="HP48GX style RPN calculator">
 			<div class="display-panel">
+				<div class="status-bar" id="statusLine" aria-live="polite"></div>
 				<div class="display-frame">
 					<div class="display-grid">
 						<div class="stack-cell"><span class="stack-label">T:</span><span id="stackT" class="stack-value"></span></div>

samples/calc-02/index.js

@@ -20,6 +20,7 @@ const keypadGrid = document.getElementById('keypadGrid');
 const functionsGrid = document.getElementById('functionsGrid');
 const trigoGrid = document.getElementById('trigoGrid');
 const calculatorEl = document.querySelector('.calculator');
+const statusLine = document.getElementById('statusLine');
 
 const keypadKeys = [
 	{ label: '±', action: 'neg', className: 'key-default' },
@@ -75,8 +76,20 @@ function focusInput() {
 	hiddenInput.focus();
 }
 
-function setStatus(message) {
-	console.log(message);
+let statusTimer = null;
+
+function setStatus(message, isError = false, timeoutMs = 1400) {
+	if (!statusLine) return;
+	clearTimeout(statusTimer);
+	statusLine.textContent = message;
+	statusLine.classList.toggle('is-error', isError);
+	statusLine.classList.toggle('is-visible', Boolean(message));
+	if (!message || timeoutMs <= 0) return;
+	statusTimer = window.setTimeout(() => {
+		statusLine.textContent = '';
+		statusLine.classList.remove('is-visible');
+		statusLine.classList.remove('is-error');
+	}, timeoutMs);
 }
 
 function normalizeStack() {
@@ -191,7 +204,7 @@ function execute(name) {
 		}
 		render();
 	} catch (error) {
-		console.error(error);
+		setStatus(error?.message || 'Operation error', true);
 	}
 }
 
@@ -311,7 +324,7 @@ pasteButton.addEventListener('click', async () => {
 		const text = await navigator.clipboard.readText();
 		pasteTextIntoStack(text);
 	} catch (error) {
-		setStatus('Paste unavailable');
+		setStatus('Paste unavailable', true);
 	}
 });
 
@@ -356,6 +369,7 @@ function openConstMenu() {
 			pushEditingValueIfNeeded();
 			calc.push(constant.value);
 			render();
+			setStatus(`Inserted ${constant.label}`);
 			closeConstMenu();
 			focusInput();
 		});