Frontend: scroll fix, SSE reconnect, toast global, stale states, theming

5 bloques en una pasada:

A. Scroll fixes (síntoma reportado por el usuario):
   - run-timeline: nuevo flag _userScrolledUp con detección por rAF en
     bindScroll. Auto-scroll al final SOLO si el usuario está abajo
     (umbral 150px) o si él mismo disparó un optimistic bubble. Cuando
     el usuario manda mensaje, se resetea el flag y se scrollea.
   - conversation-inspector: mismo patrón. ui:chatScroll respeta el
     flag userScrolledUp del emisor para no perseguir al usuario que
     lee arriba.
   - .bubble: + min-width:0, overflow-wrap:anywhere para URLs/JSON
     largos sin espacios.
   - <pre>: + overflow-x:auto, max-width:100%.
   - chat-simulator: textarea con resize:vertical, min/max heights
     viewport-friendly. inputs-col con overflow-y:auto.

B. Stale state options:
   - conversation-list y conversations-crud: dropdowns ahora muestran
     IDLE / CART / SHIPPING / AWAITING_HUMAN. Quitados BROWSING,
     BUILDING_ORDER, WAITING_ADDRESS, WAITING_PAYMENT, COMPLETED.
   - main.js: simulated plan.next_state pasa a CART.

C. SSE resilience (lib/sse.js):
   - connect() con backoff exponencial (1s → 30s).
   - safeParse() helper: cada evento envuelve JSON.parse en try-catch
     para que un payload malformado no rompa otros listeners.
   - reset retryDelay al primer "hello" exitoso.
   - ops-shell: indicador con dot (verde "En vivo" / naranja pulsante
     "Reconectando…") en lugar de texto plano.

D. Toast service global (public/lib/toast.js):
   - API simple: toast({ kind, text, ms }). Apila, animación slide-in,
     auto-dismiss 4s. Click para cerrar.
   - safeFetch en api.js: wrapper que dispara toast en network error y
     non-OK. Migrados simEvolution + retryLast.
   - chat-simulator usa toast en lugar de status text efímero.

E. Theming con CSS vars:
   - public/styles/theme.css con paleta completa (panels, borders,
     text, accents, bubbles, charts, radii, shadows). Linkeado desde
     index.html.
   - Migrados a var(--*) los 5 componentes más visibles:
     run-timeline, chat-simulator, conversation-inspector,
     conversation-list, home-dashboard. Custom properties heredan a
     través del shadow DOM, así que los demás componentes pueden
     migrar gradualmente sin cambios estructurales.
   - home-dashboard ya tenía vars locales: ahora apuntan a las globales.

Backend: 192/192 tests pasando. Sin cambios de API.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/components/chat-simulator.js

@@ -1,6 +1,7 @@
 import { api } from "../lib/api.js";
 import { emit, on } from "../lib/bus.js";
 import { modal } from "../lib/modal.js";
+import { toast } from "../lib/toast.js";
 
 class ChatSimulator extends HTMLElement {
   constructor() {
@@ -12,23 +13,23 @@ class ChatSimulator extends HTMLElement {
       <style>
         :host { display:block; height:100%; overflow:hidden; }
         * { box-sizing:border-box; }
-        .container { display:grid; grid-template-columns:1fr 1fr; gap:0; height:100%; overflow:hidden; }
-        .col { display:flex; flex-direction:column; padding:10px 12px; border-right:1px solid #1e2a3a; min-width:0; overflow:hidden; }
+        .container { display:grid; grid-template-columns:1fr 1fr; gap:0; height:100%; min-height:0; overflow:hidden; }
+        .col { display:flex; flex-direction:column; padding:10px 12px; border-right:1px solid var(--border); min-width:0; min-height:0; overflow:hidden; }
         .col:last-child { border-right:none; }
-        .muted { color:#8aa0b5; font-size:11px; margin-bottom:6px; }
+        .muted { color:var(--text-muted); font-size:11px; margin-bottom:6px; }
         .row { display:flex; gap:8px; align-items:center; }
-        input,textarea,button { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:6px; padding:6px 8px; font-size:12px; box-sizing:border-box; }
+        input,textarea,button { background:var(--panel-2); color:var(--text); border:1px solid var(--border-hi); border-radius:var(--r-sm); padding:6px 8px; font-size:12px; box-sizing:border-box; }
         input { width:100%; min-width:0; }
-        textarea { width:100%; resize:none; height:186px; min-width:0; margin-bottom:10px;}
+        textarea { width:100%; resize:vertical; min-height:120px; max-height:60vh; min-width:0; margin-bottom:10px; word-break:break-word; overflow-wrap:anywhere; }
         button { cursor:pointer; white-space:nowrap; }
-        button.primary { background:#1f6feb; border-color:#1f6feb; }
+        button.primary { background:var(--accent); border-color:var(--accent); }
         button:disabled { opacity:.6; cursor:not-allowed; }
-        .status { font-size:11px; color:#8aa0b5; margin-top:6px; }
-        .inputs-col { display:flex; flex-direction:column; gap:6px; flex:1; overflow:hidden; min-width:0; }
+        .status { font-size:11px; color:var(--text-muted); margin-top:6px; word-break:break-word; }
+        .inputs-col { display:flex; flex-direction:column; gap:6px; flex:1; min-height:0; min-width:0; overflow-y:auto; padding-right:4px; }
         .field { display:flex; flex-direction:column; min-width:0; }
-        .field label { font-size:10px; color:#8aa0b5; margin-bottom:2px; }
-        .msg-col { display:flex; flex-direction:column; min-width:0; }
-        .msg-bottom { display:flex; gap:8px; align-items:center; margin-top:6px; }
+        .field label { font-size:10px; color:var(--text-muted); margin-bottom:2px; }
+        .msg-col { display:flex; flex-direction:column; min-width:0; min-height:0; flex:1; }
+        .msg-bottom { display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; }
       </style>
 
       <div class="container">
@@ -167,14 +168,15 @@ class ChatSimulator extends HTMLElement {
         console.log("[evolution sim] webhook response:", data);
 
         if (!data.ok) {
-          statusEl.textContent = "Error enviando (ver consola)";
+          toast({ kind: "error", text: `Sim Evolution: ${data.error || "respuesta no-ok"}` });
           return;
         }
 
         evoTextEl.value = "";
         evoTextEl.focus();
       } catch (e) {
-        statusEl.textContent = `Error: ${String(e?.message || e)}`;
+        // safeFetch ya disparó toast; sólo logueamos.
+        console.error("[chat-simulator] send error:", e);
       } finally {
         setSending(false);
       }
@@ -187,10 +189,10 @@ class ChatSimulator extends HTMLElement {
       api
         .retryLast(chat_id)
         .then((r) => {
-          if (!r?.ok) statusEl.textContent = `Retry error: ${r?.error || "unknown"}`;
-          else statusEl.textContent = "Retry enviado.";
+          if (!r?.ok) toast({ kind: "error", text: `Retry: ${r?.error || "fallo"}` });
+          else toast({ kind: "ok", text: "Retry enviado." });
         })
-        .catch((e) => (statusEl.textContent = `Retry error: ${String(e?.message || e)}`))
+        .catch((e) => console.error("[chat-simulator] retry error:", e))
         .finally(() => setSending(false));
     };
     retryEl.disabled = false;