feat(ui): implement global error toast and state management

Introduces a persistent, styled error toast notification system for displaying critical application errors. This required refactoring the local error handling logic in App.svelte to manage complex state objects instead of simple timers, allowing for better control over visibility and interaction (e.g., pausing on hover).

- Adds global CSS styling and animations for the visible error toast component
- Updates error auto-hide mechanism to use structured state management
- Implements interactive features like pause/resume timing on mouse events

src/app.css

@@ -1222,6 +1222,113 @@
     color: #eadfff;
   }
 
+  /* --- Global error toast --- */
+
+  .error-toast-region {
+    position: fixed;
+    top: calc(var(--app-titlebar-height, 40px) + 14px);
+    left: 50%;
+    z-index: 90;
+    width: min(560px, calc(100vw - 32px));
+    pointer-events: none;
+    transform: translateX(-50%);
+  }
+
+  .error-toast {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: start;
+    gap: 11px;
+    width: 100%;
+    padding: 13px 13px 14px;
+    overflow: hidden;
+    border: 1px solid rgba(232,96,96,0.46);
+    border-radius: 13px;
+    color: var(--color-ink);
+    background:
+      linear-gradient(135deg, rgba(232,96,96,0.18), rgba(100,108,255,0.08)),
+      rgba(12,13,24,0.96);
+    box-shadow: 0 18px 54px rgba(0,0,0,0.46), 0 0 0 1px rgba(255,255,255,0.035) inset;
+    backdrop-filter: blur(18px);
+    pointer-events: auto;
+    animation: error-toast-in 180ms cubic-bezier(.2,.8,.2,1) both;
+  }
+
+  .error-toast-icon {
+    display: grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border: 1px solid rgba(232,96,96,0.28);
+    border-radius: 10px;
+    color: #ff9b9b;
+    background: rgba(232,96,96,0.12);
+  }
+
+  .error-toast-content {
+    display: grid;
+    gap: 3px;
+    min-width: 0;
+    padding-top: 1px;
+  }
+
+  .error-toast-content strong {
+    color: #fff;
+    font-size: 13px;
+    font-weight: 800;
+    line-height: 1.25;
+  }
+
+  .error-toast-content span {
+    color: var(--color-ink-muted);
+    font-size: 12.5px;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .error-toast-close {
+    width: 28px;
+    min-width: 28px;
+    min-height: 28px;
+    padding: 0;
+    border-color: rgba(255,255,255,0.1);
+    border-radius: 8px;
+    color: var(--color-ink-dim);
+    background: rgba(255,255,255,0.04);
+  }
+
+  .error-toast-close:hover:not(:disabled) {
+    border-color: rgba(255,255,255,0.2);
+    color: #fff;
+    background: rgba(255,255,255,0.1);
+  }
+
+  .error-toast-timeout {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #ff7878, #ef9a9a);
+    transform-origin: left;
+    animation: error-toast-timeout 6s linear both;
+  }
+
+  .error-toast:hover .error-toast-timeout {
+    animation-play-state: paused;
+  }
+
+  @keyframes error-toast-in {
+    from { opacity: 0; transform: translateY(-10px) scale(.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  @keyframes error-toast-timeout {
+    from { transform: scaleX(1); }
+    to { transform: scaleX(0); }
+  }
+
   /* --- Update toast --- */
 
   .update-toast {
@@ -5306,6 +5413,23 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
   background: rgba(210, 55, 75, 0.08);
 }
 
+:root[data-theme="light"] .error-toast {
+  border-color: rgba(190,48,66,0.28);
+  background:
+    linear-gradient(135deg, rgba(210,55,75,0.11), rgba(49,95,214,0.05)),
+    rgba(255,255,255,0.96);
+  box-shadow: 0 18px 48px rgba(28,44,74,0.18), 0 0 0 1px rgba(255,255,255,0.8) inset;
+}
+
+:root[data-theme="light"] .error-toast-icon {
+  color: #b33445;
+  background: rgba(210,55,75,0.09);
+}
+
+:root[data-theme="light"] .error-toast-content strong {
+  color: #24314a;
+}
+
 :root[data-theme="light"] .notice.busy {
   color: #315fd6;
 }