fix: error message persists after successful send + improve error colors

Bug: showError() appended the error element to #chat-messages with no
reference, so it was never removed. A successful subsequent send left
the old error visible at the top of the conversation.

Fix:
- Track the error element as this._errorEl in Chat
- Add clearError() to remove it; call it at the start of each new
send in app.js (right before the user bubble is rendered)
- Also clear _errorEl in clear() to avoid stale refs after /clean

Styling: the previous error used dark-mode-only Tailwind classes
(bg-red-950/40, text-red-400) which produced a muted brownish
background with near-invisible text in light mode. Replaced with
proper dark:-prefixed variants:
light: bg-red-50 / border-red-200 / text-red-700
dark: bg-red-950/40 / border-red-900/40 / text-red-400

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/components/app.js

@@ -258,6 +258,7 @@ export class App {
     // Add to store & render — wrapped so any localStorage/DOM error is caught
     let renderOk = false;
     try {
+      this.chat.clearError();
       store.addMessage(convId, userMessage);
       this.chat.appendUserMessage(userMessage);
       this._updateContextInfo();

src/components/chat.js

@@ -45,6 +45,7 @@ export class Chat {
     this._offset = 0; // how many messages we've hidden
     this._streamingEl = null;
     this._typingEl = null;
+    this._errorEl = null;
   }
 
   render() {
@@ -282,7 +283,7 @@ export class Chat {
     const container = this.el.querySelector('#chat-messages');
     this.hideTypingIndicator();
     if (this._streamingEl) {
-      this._streamingEl.innerHTML = `<span class="text-red-400">${escapeHtml(message)}</span>`;
+      this._streamingEl.innerHTML = `<span class="text-red-600 dark:text-red-400">${escapeHtml(message)}</span>`;
       this._streamingEl = null;
       this._streamingText = '';
       return;
@@ -290,14 +291,22 @@ export class Chat {
     const errEl = document.createElement('div');
     errEl.className = 'max-w-4xl mx-auto w-full px-6 mb-4 message-enter';
     errEl.innerHTML = `
-      <div class="bg-red-950/40 border border-red-900/40 rounded-xl px-4 py-3 text-[13px] text-red-400 flex items-center gap-2">
+      <div class="bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-900/40 rounded-xl px-4 py-3 text-[13px] text-red-700 dark:text-red-400 flex items-center gap-2">
         ${icon('x')} ${escapeHtml(message)}
       </div>
     `;
+    this._errorEl = errEl;
     container.appendChild(errEl);
     this._scrollToBottom();
   }
 
+  clearError() {
+    if (this._errorEl) {
+      this._errorEl.remove();
+      this._errorEl = null;
+    }
+  }
+
   showSystemMessage(text) {
     const container = this.el.querySelector('#chat-messages');
     if (!container) return;
@@ -328,6 +337,7 @@ export class Chat {
     this._streamingEl = null;
     this._streamingText = '';
     this._typingEl = null;
+    this._errorEl = null;
     const container = this.el.querySelector('#chat-messages');
     if (container) container.innerHTML = this._welcomeScreen();
   }