From d94f41cb56332bfd908f18f6fc964532c4367d86 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Wed, 17 Jun 2026 14:28:29 +0200
Subject: [PATCH] feat(toast): surface toasts bottom-left by the bell, brighter
 dark rim

Toasts rose top-right, far from the notification bell which now lives bottom-left.
Anchor them bottom-left inside the content column (clears the sidebar at any width),
newest nearest the bell. Add a ~50% white border in dark mode so they stand out off
the conventional top-right spot.
---
 frontend/src/components/Toaster.tsx | 4 ++--
 frontend/src/index.css              | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Toaster.tsx b/frontend/src/components/Toaster.tsx
index 9aa0928..0b94953 100644
--- a/frontend/src/components/Toaster.tsx
+++ b/frontend/src/components/Toaster.tsx
@@ -31,13 +31,13 @@ export default function Toaster() {
   const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
 
   return (
-    <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
+    <div className="absolute bottom-4 left-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
       {toasts.map((toast) => {
         const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
         return (
           <div
             key={toast.id}
-            className="glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
+            className="toast-card glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
           >
             <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
             <div className="min-w-0 flex-1">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6225ce3..59a35fa 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -93,6 +93,12 @@ html[data-theme="dark"] .glass-menu {
   backdrop-filter: blur(30px) saturate(1.7) brightness(1.4);
   -webkit-backdrop-filter: blur(30px) saturate(1.7) brightness(1.4);
 }
+/* Toasts surface bottom-left (by the nav's notification bell), off the conventional
+   top-right; a brighter rim draws the eye there. Most needed in dark mode, where the
+   default glass border (dark navy) all but vanishes against the backdrop. */
+html[data-theme="dark"] .toast-card {
+  border-color: color-mix(in srgb, #fff 50%, transparent);
+}
 
 /* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */
 html[data-perf="1"] .glass,