fix(mana,ui): integrate guest nudge into bottom stack + theme it

The "Gefällt es dir?" guest nudge was a free-floating fixed element at
bottom: 10rem, so it didn't follow the bottom-stack when the PillNav was
collapsed. Move it inside .bottom-stack as the first child so it shares
the stack's reflow.

NotificationBar now uses the elevation system (--color-surface-elevated,
--color-border-strong, --color-foreground) instead of hardcoded rgba so
it adapts to all themes. Bumped the CTA button (shadow + hover lift) and
container (stronger border, layered shadow) to be more visible.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/mana/apps/web/src/routes/(app)/+layout.svelte

@@ -432,6 +432,13 @@
 	<div class="min-h-screen bg-background">
 		<!-- Bottom Stack: all fixed-bottom elements in one flex container -->
 		<div class="bottom-stack" style:--bottom-chrome-height="{bottomChromeHeight}px">
+			<!-- Guest nudge — sits above the input bar, fades with the stack -->
+			{#if guestMode && guestMode.notifications.length > 0}
+				<div class="bottom-stack-notification">
+					<NotificationBar notifications={guestMode.notifications} />
+				</div>
+			{/if}
+
 			<!-- QuickInputBar with inline nav toggle -->
 			<QuickInputBar
 				onSearch={inputBarAdapter.onSearch}
@@ -536,13 +543,6 @@
 
 		<!-- Keyboard shortcuts modal -->
 		<KeyboardShortcutsModal open={showShortcuts} onclose={() => (showShortcuts = false)} />
-
-		<!-- Guest notifications (nudge) -->
-		{#if guestMode && guestMode.notifications.length > 0}
-			<div class="notification-float">
-				<NotificationBar notifications={guestMode.notifications} />
-			</div>
-		{/if}
 	</div>
 
 	<!-- Navigation Context Menu -->
@@ -618,12 +618,9 @@
 		transform: rotate(180deg);
 	}
 
-	.notification-float {
+	.bottom-stack-notification {
-		position: fixed;
+		display: flex;
-		bottom: 10rem;
+		justify-content: center;
-		left: 50%;
+		padding: 0 1rem 0.5rem;
-		transform: translateX(-50%);
-		z-index: 100;
-		pointer-events: auto;
 	}
 </style>

packages/shared-ui/src/bottom-stack/NotificationBar.svelte

@@ -52,19 +52,24 @@
 	.notification-bar {
 		display: flex;
 		align-items: center;
-		gap: 0.625rem;
+		gap: 0.75rem;
-		padding: 0.5rem 0.625rem 0.5rem 0.875rem;
+		padding: 0.625rem 0.625rem 0.625rem 1rem;
-		background: var(--color-surface-elevated, rgba(255, 255, 255, 0.95));
+		background: hsl(var(--color-surface-elevated));
-		border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+		border: 1px solid hsl(var(--color-border-strong, var(--color-border)));
-		border-radius: 0.625rem;
+		border-radius: 0.875rem;
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+		box-shadow:
-		backdrop-filter: blur(12px);
+			0 8px 24px rgba(0, 0, 0, 0.12),
+			0 2px 6px rgba(0, 0, 0, 0.06);
+		backdrop-filter: blur(16px);
+		-webkit-backdrop-filter: blur(16px);
 		max-width: 480px;
 		width: max-content;
 		animation: slideUp 250ms ease-out;
 	}
 	:global(.dark) .notification-bar {
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+		box-shadow:
+			0 12px 32px rgba(0, 0, 0, 0.45),
+			0 2px 8px rgba(0, 0, 0, 0.25);
 	}
 
 	.notification-bar.warning {
@@ -90,7 +95,7 @@
 		margin: 0;
 		font-size: 0.8125rem;
 		line-height: 1.4;
-		color: var(--color-muted-foreground, rgba(0, 0, 0, 0.65));
+		color: hsl(var(--color-foreground) / 0.85);
 	}
 
 	.notification-actions {
@@ -103,21 +108,34 @@
 	.notification-action {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.3rem;
+		gap: 0.4rem;
-		padding: 0.375rem 0.75rem;
+		padding: 0.5rem 0.95rem;
 		font-size: 0.8125rem;
 		font-weight: 600;
 		color: white;
 		background: var(--color-primary, #7c3aed);
-		border: none;
+		border: 1px solid rgba(255, 255, 255, 0.18);
-		border-radius: 0.5rem;
+		border-radius: 0.625rem;
 		cursor: pointer;
-		transition: background 150ms ease;
+		transition:
+			background 150ms ease,
+			transform 150ms ease,
+			box-shadow 150ms ease;
 		white-space: nowrap;
 		font-family: inherit;
+		box-shadow:
+			0 4px 12px rgba(124, 58, 237, 0.35),
+			0 1px 2px rgba(0, 0, 0, 0.1);
 	}
 	.notification-action:hover {
-		filter: brightness(0.9);
+		filter: brightness(1.08);
+		transform: translateY(-1px);
+		box-shadow:
+			0 6px 16px rgba(124, 58, 237, 0.45),
+			0 2px 4px rgba(0, 0, 0, 0.12);
+	}
+	.notification-action:active {
+		transform: translateY(0);
 	}
 
 	.notification-dismiss {
@@ -127,7 +145,7 @@
 		width: 24px;
 		height: 24px;
 		padding: 0;
-		color: var(--color-muted-foreground, rgba(0, 0, 0, 0.35));
+		color: hsl(var(--color-foreground) / 0.45);
 		background: transparent;
 		border: none;
 		border-radius: 0.25rem;
@@ -135,11 +153,8 @@
 		transition: all 150ms ease;
 	}
 	.notification-dismiss:hover {
-		background: rgba(0, 0, 0, 0.06);
+		background: hsl(var(--color-foreground) / 0.08);
-		color: var(--color-foreground, rgba(0, 0, 0, 0.7));
+		color: hsl(var(--color-foreground) / 0.85);
-	}
-	:global(.dark) .notification-dismiss:hover {
-		background: rgba(255, 255, 255, 0.1);
 	}
 
 	@media (max-width: 480px) {