Switch flash messages to toast notifications

- Simple single-line toasts in top-right corner
- Positioned below navbar (70px from top)
- Auto-dismiss after 4 seconds
- Color-coded: green success, yellow warning, red error

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontends/web/templates/base.html

@@ -65,19 +65,22 @@
     </nav>
 
     <main class="container py-5">
+        <!-- Toast notifications container -->
+        <div class="toast-container position-fixed end-0 p-3" style="z-index: 1100; top: 70px;">
             {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                <div class="mx-auto mb-3" style="max-width: 460px;">
                 {% for category, message in messages %}
-                        <div class="alert alert-{{ 'danger' if category == 'error' else ('warning' if category == 'warning' else 'success') }} alert-dismissible fade show" role="alert">
+                    <div class="toast show align-items-center text-bg-{{ 'danger' if category == 'error' else ('warning' if category == 'warning' else 'success') }} border-0" role="alert" data-bs-autohide="true" data-bs-delay="4000">
+                        <div class="d-flex">
+                            <div class="toast-body">
                                 <i class="bi bi-{{ 'exclamation-triangle' if category == 'error' else ('exclamation-circle' if category == 'warning' else 'check-circle') }} me-2"></i>
                                 {{ message }}
-                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                            </div>
+                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+                        </div>
                     </div>
                 {% endfor %}
-                </div>
-            {% endif %}
             {% endwith %}
+        </div>
 
         {% block content %}{% endblock %}
     </main>
@@ -92,6 +95,10 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+    // Initialize toasts (auto-hide after delay)
+    document.querySelectorAll('.toast').forEach(el => new bootstrap.Toast(el));
+    </script>
     {% block scripts %}{% endblock %}
 </body>
 </html>