Add logging and toasts

src/main/resources/static/css/styles.css

@@ -1058,3 +1058,92 @@ body {
 .avatar-fallback {
     border: 1px solid rgba(255, 255, 255, 0.08);
 }
+
+.toast-container {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    z-index: 10000;
+    max-width: 360px;
+}
+
+.toast {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 12px;
+    align-items: center;
+    padding: 12px 14px;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: #0b1221;
+    color: #e5e7eb;
+    cursor: pointer;
+    transition: transform 120ms ease, opacity 120ms ease;
+}
+
+.toast:hover {
+    transform: translateY(-2px);
+}
+
+.toast-exit {
+    opacity: 0;
+    transform: translateY(-6px);
+}
+
+.toast-indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #a5b4fc;
+    box-shadow: 0 0 0 4px rgba(165, 180, 252, 0.16);
+}
+
+.toast-message {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.toast-success {
+    border-color: rgba(34, 197, 94, 0.35);
+    background: rgba(16, 185, 129, 0.12);
+}
+
+.toast-success .toast-indicator {
+    background: #34d399;
+    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2);
+}
+
+.toast-error {
+    border-color: rgba(239, 68, 68, 0.35);
+    background: rgba(248, 113, 113, 0.12);
+}
+
+.toast-error .toast-indicator {
+    background: #f87171;
+    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.2);
+}
+
+.toast-warning {
+    border-color: rgba(251, 191, 36, 0.35);
+    background: rgba(251, 191, 36, 0.12);
+}
+
+.toast-warning .toast-indicator {
+    background: #facc15;
+    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.2);
+}
+
+.toast-info {
+    border-color: rgba(96, 165, 250, 0.35);
+    background: rgba(96, 165, 250, 0.12);
+}
+
+.toast-info .toast-indicator {
+    background: #60a5fa;
+    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2);
+}