Upload 5 files

README.md

@@ -1,13 +1,63 @@
 ---
-title: Message Router Hackerrank
-emoji: 👁
-colorFrom: red
-colorTo: yellow
-sdk: gradio
-sdk_version: 6.22.0
-python_version: '3.12'
-app_file: app.py
+title: Message Router — An Inbox That Reasons
+emoji: 🧭
+colorFrom: green
+colorTo: pink
+sdk: static
 pinned: false
+short_description: Interactive WhatsApp UI for a real AI notification router
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Message Router — an inbox that reasons
+
+A WhatsApp-accurate, fully interactive front end for the notification-routing
+pipeline documented in the parent repo's `README.md`. Every decision shown
+here is a real, precomputed output of the actual run — nothing is invented
+for the demo, and no API key is needed to view it.
+
+- Pick any of the 32 real inboxes from the dropdown and browse their chats.
+- Tap a message with a dashed outline to open the animated 5-phase routing
+  trace: bundle → media → rules → router → normalize, including hard-override
+  behavior, evidence, and the semantic-consistency check.
+- **Router HQ** (pinned chat, pulses on load) narrates the architecture
+  inside a chat thread, with tappable quick replies and deep links into real
+  examples.
+- **Try It Yourself** (pinned chat) runs a small client-side heuristic so you
+  can type your own message and get an instant (clearly-labelled toy) verdict.
+- Search, Unread/Groups filters, a ⋮ menu, and the static architecture
+  diagram below the phone (animated on scroll) are all live, not decorative.
+- Light/dark theme toggle, default light.
+
+This folder is exactly what gets deployed — nothing here needs a build step.
+
+## Local preview
+
+```bash
+cd hf
+python -m http.server 8000
+# open http://localhost:8000
+```
+
+## Regenerating data.json
+
+`data.json` is generated once from the parent repo's real outputs and
+committed here. The generator and its source data (`runs/`, `dataset/`) live
+one level up — see `../webapp/build_data.py`:
+
+```bash
+python ../webapp/build_data.py     # reads ../dataset, ../runs
+                                    # writes ./data.json
+```
+
+## Deploying this folder to a Hugging Face Space
+
+This folder *is* the Space — `sdk: static` in the frontmatter above means
+Spaces serves `index.html`, `styles.css`, `app.js` and `data.json` directly,
+no runtime, no secrets, no `GEMINI_API_KEY`.
+
+```bash
+huggingface-cli repo create message-router --type space --space_sdk static
+git clone https://huggingface.co/spaces/<you>/message-router
+cp hf/*.md hf/*.html hf/*.css hf/*.js hf/*.json message-router/
+cd message-router && git add -A && git commit -m "deploy" && git push
+```

app.js

@@ -0,0 +1,879 @@
+/* =================================================================
+   Message Router — demo shell logic
+   Loads APP_DATA (inline <script id="app-data"> for the single-file
+   preview build, or fetch('data.json') for the deployed HF Space),
+   then renders an interactive WhatsApp-accurate phone on top of it.
+   Every decision shown is a real, precomputed output of the actual
+   Python pipeline in src/ — nothing here re-derives a verdict.
+   ================================================================= */
+(function () {
+  "use strict";
+
+  const BANDS = { notify: [0.85, 0.91], mute: [0.81, 0.87], digest: [0.78, 0.84] };
+  const ACTION_META = {
+    notify: { label: "Notify", color: "#e0592a", icon: "🔔" },
+    digest: { label: "Digest", color: "#2f86c9", icon: "🕓" },
+    mute: { label: "Mute", color: "#847a90", icon: "🔇" },
+  };
+  const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  const state = { data: null, userId: null, convKey: null, view: "list", search: "", filter: "all", navTab: "chats" };
+
+  function toast(msg, ms) {
+    const stack = $("#toastStack");
+    if (!stack) return;
+    const t = el("div", "toast", esc(msg));
+    stack.appendChild(t);
+    setTimeout(() => {
+      t.classList.add("out");
+      setTimeout(() => t.remove(), 240);
+    }, ms || 3200);
+  }
+
+  // ------------------------------------------------------------- helpers
+  const $ = (sel, root) => (root || document).querySelector(sel);
+  const $$ = (sel, root) => Array.from((root || document).querySelectorAll(sel));
+  const el = (tag, cls, html) => {
+    const n = document.createElement(tag);
+    if (cls) n.className = cls;
+    if (html !== undefined) n.innerHTML = html;
+    return n;
+  };
+  const esc = (s) => (s || "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+  const titleize = (s) => (s || "").replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  const clamp01 = (v) => Math.max(0, Math.min(1, v));
+
+  function nowClock() {
+    const d = new Date();
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
+  }
+
+  function currentUser() { return state.data.users[state.userId]; }
+  function currentConv() {
+    const u = currentUser();
+    if (!u) return null;
+    return u.conversations.find((c) => c.conv_key === state.convKey) || null;
+  }
+
+  // -------------------------------------------------------------- theme
+  function applyTheme(mode) {
+    document.documentElement.setAttribute("data-theme", mode);
+    localStorage.setItem("router-theme", mode);
+    $("#themeToggle").innerHTML = mode === "dark" ? ICON_SUN : ICON_MOON;
+  }
+  const ICON_SUN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></svg>';
+  const ICON_MOON = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.8 14.6A8.6 8.6 0 1 1 9.4 3.2a7 7 0 0 0 11.4 11.4Z"/></svg>';
+
+  function initTheme() {
+    const saved = localStorage.getItem("router-theme") || "light";
+    applyTheme(saved);
+    $("#themeToggle").addEventListener("click", () => {
+      const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
+      applyTheme(next);
+    });
+  }
+
+  // ---------------------------------------------------------- boot / data
+  function boot(data) {
+    state.data = data;
+    state.userId = data.meta.hero_user_id;
+    hydrateStats(data.meta);
+    populateUserSwitch(data);
+    renderChatList();
+    showView("list");
+    $("#phone").addEventListener("mouseenter", () => $("#phone").classList.add("settled"), { once: true });
+    document.querySelectorAll(".reveal").forEach((n, i) => (n.style.animationDelay = i * 90 + "ms"));
+    initSearchAndFilters();
+    initMenu();
+    initNav();
+    initContactInfo();
+    initArchDiagram();
+    maybeSpotlightRouterHQ();
+  }
+
+  function hydrateStats(meta) {
+    $("#statAccuracy").textContent = (meta.action_accuracy * 100).toFixed(1) + "%";
+    $("#statCalls").textContent = meta.routing_calls + " / " + meta.raw_message_count;
+    $("#statCost").textContent = "$" + meta.cost_usd;
+    $("#statCaught").textContent = meta.semantic_contradictions_caught;
+    $("#statRank").textContent = meta.rank + " / " + meta.total_participants.toLocaleString();
+  }
+
+  function populateUserSwitch(data) {
+    const sel = $("#userSwitch");
+    sel.innerHTML = "";
+    Object.values(data.users)
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .forEach((u) => {
+        const opt = el("option");
+        opt.value = u.user_id;
+        opt.textContent = `${u.name} — ${u.stats.n_new} new msg${u.stats.n_new === 1 ? "" : "s"}`;
+        sel.appendChild(opt);
+      });
+    sel.value = state.userId;
+    sel.addEventListener("change", () => {
+      state.userId = sel.value;
+      renderChatList();
+      showView("list");
+    });
+  }
+
+  // ------------------------------------------------- search & filter row
+  function initSearchAndFilters() {
+    const input = $("#searchInput");
+    const bar = $("#searchBar");
+    const clear = $("#searchClear");
+    input.addEventListener("input", () => {
+      state.search = input.value;
+      bar.classList.toggle("has-value", !!input.value);
+      renderChatList();
+    });
+    clear.addEventListener("click", () => {
+      input.value = "";
+      state.search = "";
+      bar.classList.remove("has-value");
+      renderChatList();
+      input.focus();
+    });
+    $$(".filter-pill", $("#filterRow")).forEach((pill) => {
+      pill.addEventListener("click", () => {
+        $$(".filter-pill", $("#filterRow")).forEach((p) => p.classList.remove("active"));
+        pill.classList.add("active");
+        state.filter = pill.dataset.filter;
+        renderChatList();
+      });
+    });
+    $("#searchIconBtn").addEventListener("click", () => input.focus());
+  }
+
+  // ------------------------------------------------------------- 3-dot menu
+  function initMenu() {
+    const btn = $("#menuBtn");
+    const dd = $("#menuDropdown");
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      dd.classList.toggle("show");
+    });
+    document.addEventListener("click", () => dd.classList.remove("show"));
+    dd.addEventListener("click", (e) => e.stopPropagation());
+    dd.addEventListener("click", (e) => {
+      const action = e.target.closest("button")?.dataset.action;
+      if (!action) return;
+      dd.classList.remove("show");
+      if (action === "theme") {
+        const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
+        applyTheme(next);
+        toast(`Switched to ${next} mode`);
+      } else if (action === "shuffle") {
+        const ids = Object.keys(state.data.users).filter((id) => id !== state.userId);
+        const pick = ids[Math.floor(Math.random() * ids.length)];
+        state.userId = pick;
+        $("#userSwitch").value = pick;
+        renderChatList();
+        toast(`Now viewing ${state.data.users[pick].name}'s inbox`);
+      } else if (action === "router") {
+        openRouterHQ();
+      } else if (action === "diagram") {
+        document.getElementById("archCard").scrollIntoView({ behavior: reduceMotion ? "auto" : "smooth", block: "center" });
+      }
+    });
+  }
+
+  // ------------------------------------------------------------- bottom nav
+  const NAV_STUBS = {
+    updates: { icon: "🔄", text: "Status updates aren't part of a notification router — this demo lives entirely in Chats." },
+    communities: { icon: "👥", text: "Communities are a WhatsApp feature this demo doesn't need — every routing decision already lives in one inbox at a time." },
+    calls: { icon: "📞", text: "No calling here — this pipeline decides whether a message interrupts you, it doesn't place calls." },
+  };
+  function initNav() {
+    $$(".nav-item").forEach((item) => {
+      item.addEventListener("click", () => {
+        $$(".nav-item").forEach((x) => x.classList.remove("active"));
+        item.classList.add("active");
+        const tab = item.dataset.tab;
+        state.navTab = tab;
+        const stub = $("#navStub");
+        const isChats = tab === "chats";
+        $("#chatList").classList.toggle("hidden", !isChats);
+        $("#filterRow").style.display = isChats ? "" : "none";
+        $("#searchBar").style.display = isChats ? "" : "none";
+        stub.classList.toggle("hidden", isChats);
+        if (!isChats) {
+          const s = NAV_STUBS[tab];
+          stub.innerHTML = `<span class="ns-icon">${s.icon}</span><p>${esc(s.text)}</p><button id="navBack">Back to Chats</button>`;
+          $("#navBack").addEventListener("click", () => $('.nav-item[data-tab="chats"]').click());
+        }
+      });
+    });
+  }
+
+  // -------------------------------------------------------- contact info
+  function initContactInfo() {
+    const pop = $("#infoPop");
+    const open = () => {
+      pop.innerHTML = contactInfoHTML();
+      pop.classList.add("show");
+    };
+    $("#threadAvatar").addEventListener("click", (e) => { e.stopPropagation(); open(); });
+    $("#threadTitleBtn").addEventListener("click", (e) => { e.stopPropagation(); open(); });
+    document.addEventListener("click", () => pop.classList.remove("show"));
+    pop.addEventListener("click", (e) => e.stopPropagation());
+    $("#videoBtn").addEventListener("click", () => toast("📹 No video calls — this demo only decides whether a message interrupts you."));
+    $("#callBtn").addEventListener("click", () => toast("📞 No voice calls either — routing, not ringing."));
+  }
+
+  function contactInfoHTML() {
+    if (state.convKey === "meta:router") {
+      return `<div class="ip-avatar" style="background:linear-gradient(135deg,var(--brand-teal),var(--accent-lavender))">🧭</div>
+        <h4>Router HQ</h4><div class="ip-sub">The pipeline, narrating itself inside a chat thread.</div>`;
+    }
+    if (state.convKey === "meta:sandbox") {
+      return `<div class="ip-avatar" style="background:linear-gradient(135deg,var(--accent-mint),var(--accent-sun))">✍️</div>
+        <h4>Try It Yourself</h4><div class="ip-sub">A simplified live demo — not the real 30-signal pipeline.</div>`;
+    }
+    const conv = currentConv();
+    if (!conv) return "";
+    const rows = [];
+    if (conv.kind === "group") rows.push(["type", "group chat"]);
+    if (conv.kind === "business") { rows.push(["verified", conv.verified ? "yes ✔️" : "no"]); }
+    if (conv.subtitle) rows.push(["details", conv.subtitle]);
+    rows.push(["messages here", String(conv.messages.length)]);
+    rows.push(["routed by AI", String(conv.messages.filter((m) => m.decision).length)]);
+    return `<div class="ip-avatar" style="background:${conv.color}">${esc(conv.initials)}</div>
+      <h4>${esc(conv.name)}</h4><div class="ip-sub">${esc(conv.subtitle || (conv.kind === "personal" ? "direct message" : ""))}</div>
+      ${rows.map(([k, v]) => `<div class="ip-row"><span>${esc(k)}</span><b>${esc(v)}</b></div>`).join("")}`;
+  }
+
+  // --------------------------------------------------- architecture diagram
+  const ARCH_SEQUENCE = [
+    { nodes: ["an-source"], edges: [] },
+    { nodes: ["an-bundle"], edges: ["ae-source-bundle"] },
+    { nodes: ["an-media"], edges: ["ae-bundle-media"] },
+    { nodes: ["an-rules"], edges: ["ae-media-rules"] },
+    { nodes: ["an-override"], edges: ["ae-override-stub"] },
+    { nodes: ["an-router"], edges: ["ae-rules-router"] },
+    { nodes: ["an-normalize"], edges: ["ae-router-normalize"] },
+    { nodes: ["an-output"], edges: ["ae-normalize-output"] },
+    { nodes: ["an-evidence-note"], edges: ["ae-evidence"] },
+  ];
+  function initArchDiagram() {
+    const card = $("#archCard");
+    if (!card) return;
+    const edges = $$(".arch-edge", card);
+    edges.forEach((e) => {
+      const len = e.getTotalLength ? e.getTotalLength() : 120;
+      e.style.strokeDasharray = String(len);
+      e.style.strokeDashoffset = String(len);
+    });
+    let played = false;
+    function playArch() {
+      card.classList.add("play");
+      $$(".arch-node, .arch-edge", card).forEach((n) => n.classList.remove("on"));
+      edges.forEach((e) => (e.style.strokeDashoffset = e.style.strokeDasharray));
+      let i = 0;
+      const stepDelay = reduceMotion ? 0 : 260;
+      function tick() {
+        if (i >= ARCH_SEQUENCE.length) return;
+        const step = ARCH_SEQUENCE[i];
+        step.nodes.forEach((id) => $("#" + id)?.classList.add("on"));
+        step.edges.forEach((id) => {
+          const line = $("#" + id);
+          if (line) { line.classList.add("on"); line.style.strokeDashoffset = "0"; }
+        });
+        i++;
+        if (i < ARCH_SEQUENCE.length) setTimeout(tick, stepDelay);
+      }
+      tick();
+    }
+    if ("IntersectionObserver" in window) {
+      const io = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !played) { played = true; playArch(); }
+        });
+      }, { threshold: 0.35 });
+      io.observe(card);
+    } else {
+      playArch();
+    }
+    $("#diagramReplay").addEventListener("click", playArch);
+  }
+
+  // ---------------------------------------------------------- navigation
+  function showView(which) {
+    state.view = which;
+    $("#viewChatList").classList.toggle("hidden", which !== "list");
+    $("#viewThread").classList.toggle("hidden", which !== "thread");
+  }
+
+  // ------------------------------------------------------- chat list ----
+  function lastPreview(conv) {
+    const m = conv.messages[conv.messages.length - 1];
+    if (!m) return { text: "", time: "" };
+    let text;
+    if (m.media) text = m.media.type === "image" ? "📷 Photo" : "🎤 Voice message";
+    else text = (m.text || "").replace(/\s+/g, " ").slice(0, 46);
+    return { text, time: m.time, action: m.decision ? m.decision.action : null };
+  }
+
+  function renderChatList() {
+    const u = currentUser();
+    const list = $("#chatList");
+    list.innerHTML = "";
+
+    const q = (state.search || "").trim().toLowerCase();
+    if (!q || "router hq".includes(q)) {
+      const hqRow = buildMetaRow("router", "🧭", "Router HQ", "Tap to see how I actually think →", true);
+      hqRow.id = "hqRow";
+      hqRow.classList.add("pinned-hq");
+      list.appendChild(hqRow);
+    }
+    if (!q || "try it yourself".includes(q)) {
+      list.appendChild(buildMetaRow("sandbox", "✍️", "Try It Yourself", "Write your own message, get a live verdict", false));
+    }
+
+    const filtered = u.conversations.filter((conv) => {
+      if (q && !conv.name.toLowerCase().includes(q)) return false;
+      if (state.filter === "unread" && !conv.messages.some((m) => m.is_new)) return false;
+      if (state.filter === "group" && conv.kind !== "group") return false;
+      return true;
+    });
+
+    if (!filtered.length) {
+      const empty = el("div", "empty-row", `<span class="ee">🔍</span>No chats match${q ? ` “${esc(q)}”` : " this filter"}.`);
+      list.appendChild(empty);
+      return;
+    }
+
+    filtered.forEach((conv) => {
+      const prev = lastPreview(conv);
+      const unreadCount = conv.messages.filter((m) => m.is_new).length;
+      const row = el("div", "chat-row");
+      row.innerHTML = `
+        <div class="avatar ${conv.kind === "group" ? "group" : ""}" style="background:${conv.color}">${esc(conv.initials)}</div>
+        <div class="chat-row-body">
+          <div class="chat-row-top">
+            <span class="chat-row-name">${esc(conv.name)} ${conv.verified ? '<span class="verified-badge" title="Verified business">✔️</span>' : ""}</span>
+            <span class="chat-row-time ${unreadCount ? "unread" : ""}">${esc(prev.time)}</span>
+          </div>
+          <div class="chat-row-bottom">
+            <span class="chat-row-preview">${prev.action ? `<span class="action-dot" style="background:${ACTION_META[prev.action].color}"></span>` : ""}${esc(prev.text)}</span>
+            ${unreadCount ? `<span class="chat-row-badge">${unreadCount}</span>` : ""}
+          </div>
+        </div>`;
+      row.addEventListener("click", () => openThread(conv.conv_key));
+      list.appendChild(row);
+    });
+  }
+
+  function buildMetaRow(key, emoji, name, subtitle, pinned) {
+    const row = el("div", "chat-row");
+    row.innerHTML = `
+      <div class="avatar bot">${emoji}</div>
+      <div class="chat-row-body">
+        <div class="chat-row-top">
+          <span class="chat-row-name">${pinned ? "📌 " : ""}${name}${pinned ? '<span class="start-badge">start here</span>' : ""}</span>
+          <span class="chat-row-time"></span>
+        </div>
+        <div class="chat-row-bottom"><span class="chat-row-preview">${subtitle}</span></div>
+      </div>`;
+    row.addEventListener("click", () => (key === "router" ? openRouterHQ() : openSandbox()));
+    return row;
+  }
+
+  // ------------------------------------------------- surface Router HQ --
+  function maybeSpotlightRouterHQ() {
+    if (sessionStorage.getItem("hq_spotlight_seen")) return;
+    sessionStorage.setItem("hq_spotlight_seen", "1");
+    const row = $("#hqRow");
+    if (!row) return;
+    const arrow = el("div", "spotlight-arrow", "👆 Start here — I explain myself");
+    row.appendChild(arrow);
+    setTimeout(() => {
+      arrow.classList.add("out");
+      setTimeout(() => arrow.remove(), 320);
+    }, 4200);
+  }
+
+  // ---------------------------------------------------------- thread ----
+  function openThread(convKey) {
+    state.convKey = convKey;
+    const conv = currentConv();
+    $("#threadAvatar").style.background = conv.color;
+    $("#threadAvatar").textContent = conv.initials;
+    $("#threadAvatar").className = "avatar " + (conv.kind === "group" ? "group" : "");
+    $("#threadName").innerHTML = esc(conv.name) + (conv.verified ? ' <span class="verified-badge">✔️</span>' : "");
+    $("#threadSubtitle").textContent = conv.subtitle || (conv.kind === "personal" ? subtitleFor(conv.id) : "");
+    renderFakeComposer();
+    renderThreadMessages(conv);
+    showView("thread");
+  }
+
+  function renderFakeComposer() {
+    $("#composer").innerHTML = `
+      <div class="composer-fake">
+        <div class="cbox">
+          <button class="icon-btn" data-quip="😊 Emoji picker isn't wired up — this inbox is read-only by design.">😊</button>
+          <span class="ph">This inbox is read-only — try “Try It Yourself”</span>
+          <button class="icon-btn" data-quip="📎 Nothing to attach — every message here already happened, in the real run.">📎</button>
+        </div>
+        <button class="send-btn fake" data-quip="🎤 No mic input — type a message in “Try It Yourself” instead." aria-label="Voice message">
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 15a3 3 0 003-3V6a3 3 0 10-6 0v6a3 3 0 003 3z"/><path d="M19 11a1 1 0 00-2 0 5 5 0 01-10 0 1 1 0 00-2 0 7 7 0 006 6.93V20H9a1 1 0 000 2h6a1 1 0 000-2h-2v-2.07A7 7 0 0019 11z"/></svg>
+        </button>
+      </div>`;
+    $$("[data-quip]", $("#composer")).forEach((btn) => btn.addEventListener("click", () => toast(btn.dataset.quip)));
+  }
+
+  function subtitleFor(id) {
+    const seed = id.split("_")[1] ? parseInt(id.split("_")[1], 10) : 0;
+    const opts = ["online", "last seen today at " + nowClock(), "last seen recently"];
+    return opts[seed % opts.length];
+  }
+
+  function renderThreadMessages(conv) {
+    const box = $("#threadMessages");
+    box.innerHTML = "";
+    let lastDate = "";
+    conv.messages.forEach((m) => {
+      if (m.date && m.date !== lastDate) {
+        box.appendChild(el("div", "date-chip", esc(m.date)));
+        lastDate = m.date;
+      }
+      box.appendChild(renderBubble(m, conv));
+    });
+    box.scrollTop = box.scrollHeight;
+  }
+
+  function mediaCardHTML(media) {
+    if (!media) return "";
+    if (media.type === "image") {
+      return `<div class="media-card">
+        <div class="media-visual"><span class="media-icon">🖼️</span><div style="font-size:.72rem;line-height:1.35"><b>${esc(media.visual_type || "image")}</b><br>${esc((media.summary || "").slice(0, 70))}</div></div>
+        <div class="media-cap">OCR: “${esc((media.ocr_text || "").slice(0, 90))}${(media.ocr_text || "").length > 90 ? "…" : ""}”</div>
+      </div>`;
+    }
+    const bars = Array.from({ length: 26 }, (_, i) => `<span style="height:${6 + Math.round(Math.abs(Math.sin(i * 1.7)) * 16)}px"></span>`).join("");
+    return `<div class="media-card voice">
+      <div class="media-visual"><span class="media-icon">🎤</span><div class="waveform">${bars}</div><span style="font-size:.72rem">0:0${Math.max(3, (media.transcript || "").length % 6 + 3)}</span></div>
+      <div class="media-cap">“${esc((media.transcript || "").slice(0, 90))}${(media.transcript || "").length > 90 ? "…" : ""}”</div>
+    </div>`;
+  }
+
+  function renderBubble(m, conv, opts) {
+    opts = opts || {};
+    const out = !!opts.out;
+    const row = el("div", "bubble-row " + (out ? "out" : "in"));
+    const b = el("div", "bubble " + (out ? "out" : "in") + (m.decision ? " decisioned" : ""));
+    if (m.decision) b.style.setProperty("--action-color", ACTION_META[m.decision.action].color);
+    b.dataset.msgId = m.message_id;
+    let senderHTML = "";
+    if (!out && conv && conv.kind === "group" && m.sender_name) {
+      senderHTML = `<span class="sender-name" style="color:${m.senderColor || conv.color}">${esc(m.sender_name)}</span>`;
+    }
+    const ticksHTML = out ? tickSVG(m.tickState || "read") : "";
+    b.innerHTML = `
+      ${senderHTML}
+      ${mediaCardHTML(m.media)}
+      <span class="btext">${esc(m.text || (m.media ? "" : ""))}</span>
+      <span class="bmeta"><span class="btime">${esc(m.time)}</span>${ticksHTML}</span>
+      ${m.decision ? decisionTagHTML(m.decision) : ""}
+    `;
+    if (m.decision) {
+      b.addEventListener("click", () => openPipelineSheet(m, conv));
+    }
+    row.appendChild(b);
+    return row;
+  }
+
+  function decisionTagHTML(d) {
+    const meta = ACTION_META[d.action];
+    return `<div class="decision-tag" style="--action-color:${meta.color}"><span class="dot"></span>${meta.icon} ${meta.label} · tap for the trace</div>`;
+  }
+
+  function tickSVG(tickState) {
+    const cls = tickState === "read" ? "tick read" : "tick";
+    return `<svg class="${cls}" viewBox="0 0 16 11"><path class="stroke" d="M1 6l3 3 7-8"/>${tickState !== "sent" ? '<path class="stroke" d="M5 6l3 3 7-8"/>' : ""}</svg>`;
+  }
+
+  // ---------------------------------------------------- pipeline sheet --
+  function openPipelineSheet(m, conv) {
+    const d = m.decision;
+    const meta = ACTION_META[d.action];
+    const overlay = $("#sheetOverlay");
+    const sheet = $("#pipelineSheet");
+    sheet.style.setProperty("--action-color", meta.color);
+    $("#sheetTitle").textContent = "How this got routed";
+    $("#sheetMsgPreview").textContent = "“" + (m.text || (m.media ? m.media.summary : "")).slice(0, 90) + "”";
+    $("#actionBadge").style.setProperty("--action-color", meta.color);
+    $("#actionBadge").innerHTML = `${meta.icon} ${meta.label} <span style="opacity:.6">· ${esc(titleize(d.message_type))}</span>`;
+
+    const band = BANDS[d.action];
+    const pct = ((d.confidence - band[0]) / (band[1] - band[0])) * 100;
+    $("#confGauge").innerHTML = `
+      <div class="cg-label"><span>confidence band ${band[0].toFixed(2)}–${band[1].toFixed(2)}</span><span>${d.confidence.toFixed(2)}</span></div>
+      <div class="cg-track"><div class="cg-band" style="left:0;right:0"></div><div class="cg-dot" style="left:${clamp01(pct / 100) * 100}%"></div></div>`;
+
+    const steps = buildFlowSteps(m, d, conv);
+    $("#flowRail").innerHTML = steps.map((s, i) => `
+      <div class="flow-node ${s.overrideHere ? "override" : ""}" data-i="${i}">${s.icon}</div>
+      ${i < steps.length - 1 ? `<div class="flow-line ${s.overrideHere ? "dashed" : ""}" data-i="${i}"><div class="fill"></div></div>` : ""}
+    `).join("");
+    const railNodes = $$(".flow-node", $("#flowRail"));
+    railNodes[railNodes.length - 1].classList.add("final");
+
+    $("#flowSteps").innerHTML = steps.map((s, i) => `
+      <div class="flow-step" data-i="${i}"><h4>${s.icon} ${s.title}</h4><div class="fs-body">${s.body}</div></div>`).join("");
+
+    overlay.classList.remove("hidden"); requestAnimationFrame(() => overlay.classList.add("show"));
+    sheet.classList.remove("hidden"); requestAnimationFrame(() => sheet.classList.add("show"));
+
+    animateFlow(steps.length);
+
+    // wire evidence chips after render
+    $$(".evid-chip", $("#flowSteps")).forEach((chip) => {
+      chip.addEventListener("click", () => {
+        const prev = chip.nextElementSibling;
+        if (prev && prev.classList.contains("evid-preview")) prev.classList.toggle("show");
+      });
+    });
+  }
+
+  function animateFlow(n) {
+    const nodes = $$(".flow-node", $("#flowRail"));
+    const lines = $$(".flow-line", $("#flowRail"));
+    const steps = $$(".flow-step", $("#flowSteps"));
+    const stepDelay = reduceMotion ? 0 : 420;
+    nodes.forEach((x) => x.classList.remove("active"));
+    steps.forEach((x) => x.classList.remove("active"));
+    lines.forEach((x) => x.querySelector(".fill").style.height = "0%");
+    let i = 0;
+    function tick() {
+      if (i >= n) return;
+      nodes[i].classList.add("active");
+      steps[i].classList.add("active");
+      if (lines[i]) requestAnimationFrame(() => (lines[i].querySelector(".fill").style.height = "100%"));
+      i++;
+      if (i < n) setTimeout(tick, stepDelay);
+    }
+    setTimeout(tick, reduceMotion ? 0 : 120);
+  }
+
+  function buildFlowSteps(m, d, conv) {
+    const u = currentUser();
+    const steps = [];
+    const histCount = u.conversations.reduce((s, c) => s + c.messages.filter((x) => !x.is_new).length, 0);
+    steps.push({
+      icon: "📦", title: "Bundle — one context block per user",
+      body: `Built once for <strong>${esc(u.name)}</strong>: ${histCount} past messages, quiet hours <strong>${esc(u.profile.do_not_disturb_window)}</strong>, dismissal rate ${(u.profile.dismissal_rate * 100).toFixed(0)}%. This whole batch shares one prompt.`,
+    });
+    if (m.media) {
+      const mm = m.media;
+      const flags = [
+        mm.contains_qr && "QR code", mm.contains_payment_request && "payment request",
+        mm.contains_urgency_language && "urgency language", mm.contains_otp_or_credential_request && "OTP/credential ask",
+      ].filter(Boolean);
+      steps.push({
+        icon: mm.type === "image" ? "🖼️" : "🎤", title: mm.type === "image" ? "Media — OCR" : "Media — transcription",
+        body: `${mm.type === "image" ? "OCR" : "Whisper-style transcript"} read: “${esc((mm.ocr_text || mm.transcript || "").slice(0, 110))}”. ${flags.length ? `Flags: <strong>${flags.join(", ")}</strong>.` : "No risk flags in the media itself."}`,
+      });
+    }
+    const sigs = d.signals_relied_on || [];
+    steps.push({
+      icon: "🛡️", title: "Rules — deterministic, no LLM",
+      body: `${sigs.length ? `Signals this decision leaned on: <div class="chip-row">${sigs.map((s) => `<span class="sig-chip ${d.override_rule && s.includes(d.override_rule.split("_")[0]) ? "hot" : ""}">${esc(s)}</span>`).join("")}</div>` : "No individual signal dominated — a blend of context."}${d.override_rule ? `<div class="override-banner">⚡ HARD OVERRIDE: <code>${esc(d.override_rule)}</code> — this bypassed the model. Four rules like this exist specifically because a fluent, confident message can itself be the attack.</div>` : ""}`,
+      overrideHere: !!d.override_rule,
+    });
+    steps.push({
+      icon: "🧠", title: d.source === "rule_override" ? "Router — model bypassed" : "Router — gemini-3.5-flash-lite",
+      body: d.source === "rule_override"
+        ? `The rule decided the <em>action</em>, but the model's evidence selection was kept regardless — an override constrains the verdict, not the reasoning behind it.`
+        : `Reasoned in the same call as the rest of ${esc(u.name)}'s batch, temperature 0, structured JSON out.${d.adjudicated ? ` Escalated to the adjudicator model over a rule/model disagreement: “${esc(d.adjudicator_note || "")}”` : ""}`,
+    });
+    const evid = d.evidence_message_ids || [];
+    const evidHTML = evid.length && evid[0] !== "none"
+      ? evid.map((eid) => {
+          const e = state.data.evidence[eid];
+          if (!e) return "";
+          return `<span class="evid-chip" data-eid="${eid}">📎 ${esc(eid)}</span><div class="evid-preview">“${esc(e.text.slice(0, 140))}” — ${esc(e.sender_name)}, ${esc(e.date)}<div class="ep-meta">opened=${e.event.opened} replied=${e.event.replied} dismissed=${e.event.dismissed} reported=${e.event.reported}</div></div>`;
+        }).join("")
+      : `<span class="sig-chip">no historical evidence — write it as "none", not a guess</span>`;
+    steps.push({
+      icon: "✅", title: "Normalize — semantic consistency check",
+      body: `Confidence clamped into the <strong>${d.action}</strong> band, enum validated, every phrase in the reason checked against the row's real signals.${evidHTML}
+        <div class="reason-final">“${esc(d.reason)}”<span class="rf-check">✓ consistency check passed</span></div>`,
+    });
+    return steps;
+  }
+
+  function closeSheet() {
+    $("#sheetOverlay").classList.remove("show");
+    $("#pipelineSheet").classList.remove("show");
+    setTimeout(() => { $("#sheetOverlay").classList.add("hidden"); $("#pipelineSheet").classList.add("hidden"); }, 380);
+  }
+
+  function initSheet() {
+    $("#sheetOverlay").addEventListener("click", closeSheet);
+    $("#sheetClose").addEventListener("click", closeSheet);
+  }
+
+  // ---------------------------------------------------------- deep link
+  function deepLink(userId, convKey, messageId) {
+    state.userId = userId;
+    $("#userSwitch").value = userId;
+    renderChatList();
+    openThread(convKey);
+    showView("thread");
+    setTimeout(() => {
+      const bubble = $(`.bubble[data-msg-id="${messageId}"]`);
+      if (bubble) {
+        bubble.scrollIntoView({ block: "center", behavior: reduceMotion ? "auto" : "smooth" });
+        bubble.style.transition = "box-shadow .3s ease";
+        bubble.style.boxShadow = "0 0 0 3px var(--brand-teal)";
+        setTimeout(() => (bubble.style.boxShadow = ""), 1400);
+        setTimeout(() => bubble.click(), reduceMotion ? 0 : 550);
+      }
+    }, reduceMotion ? 0 : 340);
+  }
+
+  // ============================================================
+  // Router HQ — a quirky pipeline explainer that lives IN a chat
+  // ============================================================
+  const HQ_INTRO = [
+    "Hey — I'm the router. Yes, the thing that just decided whether your last WhatsApp message deserved your attention. I live inside 5 phases and a few hard rules. Want the tour?",
+    "Quick numbers before we start: 110 messages, 32 people, 32 API calls — one per person, not per message. $0 spent. 93.3% action accuracy on the held-out samples.",
+    "Pick a thread below, or open any message bubble in a real chat above — the little dashed outline means I have a full trace for it.",
+  ];
+
+  const HQ_REPLIES = [
+    {
+      chip: "🛡️ Show me a scam you caught",
+      user: "Show me a scam you caught",
+      bot: [
+        "This one's my favourite. A message asking to \"verify OTP now or your profile will be limited\" landed in Vihaan's Myntra group thread.",
+        "I didn't even ask the model. `otp_or_credential_request` is one of 4 hard overrides — the kind of message that's dangerous *because* it sounds urgent and official. Confident text talking a model into the wrong answer is exactly the failure mode a rule has to catch before generation happens.",
+      ],
+      link: { label: "Open the trace →", userId: "u_004", convKey: "group:group_005", messageId: "msg_044" },
+    },
+    {
+      chip: "🧮 Why only 32 calls for 110 messages?",
+      user: "Why only 32 calls for 110 messages?",
+      bot: [
+        "Free-tier quota was the real constraint, not latency. I batch by *person*, not by message — one prompt per user with their whole profile, quiet hours, history and business relationships already inside it.",
+        "That's the 32 people in the dropdown above, by the way — every single one is a real routing call from the actual run, not a mock.",
+        "Bonus: batching means near-duplicate messages land in the same context, so I can tell a genuine admin notice apart from a copycat asking for a screenshot via a sketchy link — same batch, side by side.",
+      ],
+    },
+    {
+      chip: "🤔 Tell me about a mistake",
+      user: "Tell me about a mistake you made",
+      bot: [
+        "Early on I auto-muted anyone with a bad cross-user reputation, no matter what they said. Sounded safe.",
+        "The labelled data disagreed: the worst-reputation sender in the dataset sent both a scam *and* a completely harmless message to different people — and only the scam was meant to be muted.",
+        "So reputation got demoted to a ceiling, not a verdict: it can cap a decision at 'digest', but it can never mute by itself anymore. Accuracy went from 90.0% back up to 93.3% on that one fix.",
+      ],
+    },
+    {
+      chip: "🎬 Play my full trace live",
+      user: "Play my full trace live",
+      bot: ["Loading the OTP-scam trace — watch the left rail light up phase by phase.", "That dashed red line means the router rule fired and skipped the model for the *verdict* — but kept its evidence, because evidence is scored output, not a safety call."],
+      link: { label: "▶ Watch it route →", userId: "u_004", convKey: "group:group_005", messageId: "msg_044" },
+    },
+    {
+      chip: "🔍 A false claim you caught yourself",
+      user: "Did you ever catch yourself lying?",
+      bot: [
+        "Fair question. Every generated reason gets checked phrase-by-phrase against the row's real signals before it ships — not just \"is this valid JSON\", but \"is this true\".",
+        "Across the full run it rejected 15 reasons that were well-formed but false — including calling an unverified pharmacy \"a verified business\", and calling a one-to-one message about holding a jacket \"marketing the user opted out of\".",
+        "One targeted re-ask, then a deterministic fallback that can't contradict the row. No hallucinated justification ships.",
+      ],
+    },
+  ];
+
+  function openRouterHQ() {
+    state.convKey = "meta:router";
+    $("#threadAvatar").className = "avatar bot";
+    $("#threadAvatar").style.background = "";
+    $("#threadAvatar").textContent = "🧭";
+    $("#threadName").textContent = "Router HQ";
+    $("#threadSubtitle").textContent = "always online · replies instantly";
+    const box = $("#threadMessages");
+    box.innerHTML = "";
+    $("#composer").innerHTML = `<div class="locked-note">Tap a suggestion below — this bot only speaks in facts from the real run</div>`;
+    showView("thread");
+    playHQIntro(box);
+  }
+
+  function botBubble(text) {
+    const row = el("div", "bubble-row in");
+    const b = el("div", "bubble in");
+    b.innerHTML = `<span class="btext">${text}</span><span class="bmeta"><span class="btime">${nowClock()}</span></span>`;
+    row.appendChild(b);
+    return row;
+  }
+  function userBubble(text) {
+    const row = el("div", "bubble-row out");
+    const b = el("div", "bubble out");
+    b.innerHTML = `<span class="btext">${esc(text)}</span><span class="bmeta"><span class="btime">${nowClock()}</span>${tickSVG("sent")}</span>`;
+    row.appendChild(b);
+    setTimeout(() => { b.querySelector(".tick").outerHTML = tickSVG("delivered"); }, 350);
+    setTimeout(() => { b.querySelector(".tick").outerHTML = tickSVG("read"); }, 850);
+    return row;
+  }
+  function typingIndicator() {
+    const row = el("div", "typing-row");
+    row.innerHTML = `<div class="typing-bubble"><span></span><span></span><span></span></div>`;
+    return row;
+  }
+
+  function playHQIntro(box) {
+    let i = 0;
+    function next() {
+      if (i >= HQ_INTRO.length) { renderHQChips(box); return; }
+      const t = typingIndicator();
+      box.appendChild(t); box.scrollTop = box.scrollHeight;
+      setTimeout(() => {
+        t.remove();
+        box.appendChild(botBubble(HQ_INTRO[i]));
+        box.scrollTop = box.scrollHeight;
+        i++;
+        setTimeout(next, reduceMotion ? 30 : 480);
+      }, reduceMotion ? 30 : 620);
+    }
+    next();
+  }
+
+  function renderHQChips(box) {
+    const wrap = el("div", "quick-replies");
+    HQ_REPLIES.forEach((r) => {
+      const chip = el("button", "qr-chip", r.chip);
+      chip.addEventListener("click", () => {
+        wrap.querySelectorAll(".qr-chip").forEach((c) => (c.disabled = true));
+        box.appendChild(userBubble(r.user));
+        box.scrollTop = box.scrollHeight;
+        const t = typingIndicator();
+        setTimeout(() => { box.appendChild(t); box.scrollTop = box.scrollHeight; }, 300);
+        setTimeout(() => {
+          t.remove();
+          let j = 0;
+          function nextLine() {
+            if (j >= r.bot.length) {
+              if (r.link) {
+                const row = el("div", "bubble-row in");
+                const b = el("div", "bubble in");
+                const btn = el("button", "deep-link-btn", r.link.label);
+                btn.addEventListener("click", () => deepLink(r.link.userId, r.link.convKey, r.link.messageId));
+                b.innerHTML = `<span class="btext">One tap away:</span>`;
+                b.appendChild(btn);
+                row.appendChild(b);
+                box.appendChild(row);
+              }
+              wrap.querySelectorAll(".qr-chip").forEach((c) => (c.disabled = false));
+              box.appendChild(wrap);
+              box.scrollTop = box.scrollHeight;
+              return;
+            }
+            box.appendChild(botBubble(r.bot[j]));
+            box.scrollTop = box.scrollHeight;
+            j++;
+            setTimeout(nextLine, reduceMotion ? 20 : 520);
+          }
+          nextLine();
+        }, reduceMotion ? 50 : 900);
+      });
+      wrap.appendChild(chip);
+    });
+    box.appendChild(wrap);
+    box.scrollTop = box.scrollHeight;
+  }
+
+  // ============================================================
+  // Try It Yourself — live sandbox with an honestly-labelled
+  // simplified heuristic (not the real 30-signal pipeline)
+  // ============================================================
+  function openSandbox() {
+    state.convKey = "meta:sandbox";
+    $("#threadAvatar").className = "avatar bot";
+    $("#threadAvatar").style.background = "";
+    $("#threadAvatar").textContent = "✍️";
+    $("#threadName").textContent = "Try It Yourself";
+    $("#threadSubtitle").textContent = "simplified live demo";
+    const box = $("#threadMessages");
+    box.innerHTML = "";
+    box.appendChild(botBubble("Type any WhatsApp-style message and I'll route it live — right here, in your browser, no server call."));
+    box.appendChild(botBubble("Heads up: this is a ~15-line keyword heuristic for the demo, not the real 5-phase pipeline. For the real thing, tap any dashed message bubble in an actual chat above."));
+    box.scrollTop = box.scrollHeight;
+    $("#composer").innerHTML = `
+      <div class="cbox"><input id="sandboxInput" placeholder="e.g. Pay ₹500 now or lose your seat, scan this QR" maxlength="180" /></div>
+      <button class="send-btn" id="sandboxSend">${SEND_ICON}</button>`;
+    const input = $("#sandboxInput");
+    const send = () => {
+      const val = input.value.trim();
+      if (!val) return;
+      box.appendChild(userBubble(val));
+      box.scrollTop = box.scrollHeight;
+      input.value = "";
+      const t = typingIndicator();
+      setTimeout(() => { box.appendChild(t); box.scrollTop = box.scrollHeight; }, 200);
+      setTimeout(() => {
+        t.remove();
+        const r = simulateRoute(val);
+        const row = el("div", "bubble-row in");
+        const b = el("div", "bubble in");
+        b.style.setProperty("--action-color", ACTION_META[r.action].color);
+        b.innerHTML = `<span class="btext">${r.icon} <strong>${ACTION_META[r.action].label}</strong> · ${titleize(r.message_type)}<br><span style="font-size:.86rem;color:var(--wa-list-subtitle)">${esc(r.reason)}</span></span>
+          <span class="bmeta"><span class="btime">${nowClock()}</span></span>
+          <div class="decision-tag" style="--action-color:${ACTION_META[r.action].color}"><span class="dot"></span>confidence ${r.confidence.toFixed(2)} · toy heuristic</div>`;
+        row.appendChild(b);
+        box.appendChild(row);
+        box.scrollTop = box.scrollHeight;
+      }, reduceMotion ? 30 : 700);
+    };
+    $("#sandboxSend").addEventListener("click", send);
+    input.addEventListener("keydown", (e) => { if (e.key === "Enter") send(); });
+    showView("thread");
+    setTimeout(() => input.focus(), 300);
+  }
+
+  const SEND_ICON = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 20l18-8L3 4v6l12 2-12 2z"/></svg>';
+
+  function simulateRoute(text) {
+    const t = text.toLowerCase();
+    const has = (arr) => arr.some((w) => t.includes(w));
+    if (has(["otp", "verify your account", "bank detail", "card number", "cvv", "pin number", "click this link and login"])) {
+      return { action: "mute", message_type: "scam", confidence: 0.83, icon: "🔇", reason: "Requests a credential or OTP through an unverified flow — mirrors the OTP hard override." };
+    }
+    if (has(["forward this", "send to", "people you care about", "10 people", "share this", "chain"])) {
+      return { action: "mute", message_type: "forward", confidence: 0.85, icon: "🔇", reason: "Reads like a chain-forward asking to reshare — the pattern usually gets ignored anyway." };
+    }
+    if (has(["% off", "sale", "discount", "buy now", "offer", "limited stock", "flat "])) {
+      return { action: "digest", message_type: "promotion", confidence: 0.8, icon: "🕓", reason: "Promotional content — plausibly useful, but nothing time-critical here." };
+    }
+    if (has(["urgent", "immediately", "asap", "right now", "emergency", "in 10 min", "in 20 min", "call now"])) {
+      return { action: "notify", message_type: "urgent", confidence: 0.88, icon: "🔔", reason: "Deadline or urgency language pushes this to interrupt-now." };
+    }
+    if (has(["good morning", "good night", "gm", "happy diwali", "happy new year", "god bless"])) {
+      return { action: "mute", message_type: "greeting", confidence: 0.84, icon: "🔇", reason: "Low-content greeting text — the kind that's routinely dismissed." };
+    }
+    if (has(["payment", "due", "pay by", "invoice", "fee", "penalty"])) {
+      return { action: "notify", message_type: "payment", confidence: 0.87, icon: "🔔", reason: "Mentions a concrete payment obligation — worth surfacing even without extra urgency words." };
+    }
+    return { action: "digest", message_type: "personal", confidence: 0.79, icon: "🕓", reason: "No strong signal matched this toy heuristic — the real pipeline would pull in sender history, DND state and cross-user reputation here." };
+  }
+
+  // ---------------------------------------------------------------- init
+  function init() {
+    initTheme();
+    initSheet();
+    $("#backBtn").addEventListener("click", () => showView("list"));
+    const el2 = document.getElementById("app-data");
+    if (el2) {
+      boot(JSON.parse(el2.textContent));
+    } else {
+      fetch("data.json").then((r) => r.json()).then(boot).catch((err) => {
+        $("#chatList").innerHTML = `<div style="padding:30px;color:var(--wa-list-subtitle);font-size:.85rem">Could not load data.json (${esc(String(err))}). Run webapp/build_data.py and serve this folder over HTTP.</div>`;
+      });
+    }
+  }
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);
+  else init();
+})();

index.html

@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Message Router — an inbox that reasons</title>
+<meta name="description" content="An interactive WhatsApp replica showing a real AI notification-routing pipeline: 93.3% accuracy, 32 API calls for 110 messages, $0 cost. Ranked 18/1983 at HackerRank Orchestrate." />
+<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧭</text></svg>" />
+<link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+
+<div class="blobs" aria-hidden="true">
+  <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div><div class="blob b4"></div>
+</div>
+
+<header class="topbar">
+  <div class="brand"><span class="mark">🧭</span><span>Message&nbsp;Router</span></div>
+  <button id="themeToggle" class="theme-toggle" aria-label="Toggle dark mode"></button>
+</header>
+
+<section class="hero">
+  <div class="hero-copy reveal">
+    <p class="eyebrow">HackerRank Orchestrate · Ranked <span id="statRank">18 / 1,983</span></p>
+    <h1>Every WhatsApp message,<br>routed like <em>a person</em> would.</h1>
+    <p class="lede">An AI pipeline that decides what interrupts you now, what waits for later, and what gets muted — reasoning over text, image posters and voice notes, with hard safety rules a language model can't be talked out of. This isn't a mockup: every verdict below is a real, precomputed output of the actual routing run. Tap in.</p>
+    <div class="stat-row">
+      <div class="stat-chip" style="--rot:-4deg"><b id="statAccuracy">93.3%</b><span>action accuracy</span></div>
+      <div class="stat-chip" style="--rot:3deg"><b id="statCalls">32 / 110</b><span>API calls for messages</span></div>
+      <div class="stat-chip" style="--rot:-2deg"><b id="statCost">$0</b><span>cost, free tier only</span></div>
+      <div class="stat-chip" style="--rot:5deg"><b id="statCaught">15</b><span>false claims self-caught</span></div>
+    </div>
+  </div>
+  <div class="hero-phone-wrap reveal">
+    <div class="callout c1">Tap any dashed message → see the full 5-phase trace<span class="arrow">↳ real signals, not vibes</span></div>
+    <div class="callout c2">Switch inboxes — same sender, different verdict, on purpose<span class="arrow">↳ personalization is the whole point</span></div>
+    <div class="phone-frame-outer">
+  <div class="stage-controls">
+    <label for="userSwitch">Viewing inbox as</label>
+    <select id="userSwitch" aria-label="Switch device owner"></select>
+  </div>
+
+  <div class="phone" id="phone">
+    <div class="notch"></div>
+    <div class="screen">
+      <div class="statusbar">
+        <span id="clock">9:41</span>
+        <span class="icons">📶 🔋</span>
+      </div>
+
+      <div id="viewChatList" class="view chat-list-view">
+        <div class="wa-header list-header">
+          <span class="wa-title">Chats</span>
+          <div class="header-icons">
+            <button id="searchIconBtn" aria-label="Search">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+            </button>
+            <button id="menuBtn" aria-label="Menu">
+              <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
+            </button>
+            <div class="dropdown-menu" id="menuDropdown">
+              <button data-action="theme">🌓 <span>Toggle theme</span></button>
+              <button data-action="shuffle">🔀 <span>Shuffle inbox</span></button>
+              <button data-action="router">🧭 <span>Open Router HQ</span></button>
+              <div class="dm-divider"></div>
+              <button data-action="diagram">📐 <span>View architecture</span></button>
+            </div>
+          </div>
+        </div>
+        <div class="filter-row" id="filterRow">
+          <button class="filter-pill active" data-filter="all">All</button><button class="filter-pill" data-filter="unread">Unread</button><button class="filter-pill" data-filter="group">Groups</button>
+        </div>
+        <div class="search-bar" id="searchBar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+          <input id="searchInput" type="text" placeholder="Search chats" autocomplete="off" />
+          <button class="search-clear" id="searchClear" aria-label="Clear search">✕</button>
+        </div>
+        <div class="chat-list" id="chatList"></div>
+        <div class="nav-stub hidden" id="navStub"></div>
+        <div class="bottom-nav">
+          <button class="nav-item active" data-tab="chats"><span class="nav-ico">💬</span>Chats</button>
+          <button class="nav-item" data-tab="updates"><span class="nav-ico">🔄</span>Updates</button>
+          <button class="nav-item" data-tab="communities"><span class="nav-ico">👥</span>Communities</button>
+          <button class="nav-item" data-tab="calls"><span class="nav-ico">📞</span>Calls</button>
+        </div>
+      </div>
+
+      <div id="viewThread" class="view thread-view hidden">
+        <div class="wa-header thread-header">
+          <button class="back-btn" id="backBtn" aria-label="Back">‹</button>
+          <button class="avatar" id="threadAvatar" aria-label="Contact info" style="border:none;cursor:pointer;padding:0"></button>
+          <button class="thread-title" id="threadTitleBtn" aria-label="Contact info" style="background:none;border:none;text-align:left;cursor:pointer;padding:0;color:inherit">
+            <span class="t-name" id="threadName"></span>
+            <span class="t-sub" id="threadSubtitle"></span>
+          </button>
+          <div class="header-icons">
+            <button id="videoBtn" aria-label="Video call"><svg viewBox="0 0 24 24"><path d="M17 10.5V7a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h12a1 1 0 001-1v-3.5l4 4v-11l-4 4z"/></svg></button>
+            <button id="callBtn" aria-label="Voice call"><svg viewBox="0 0 24 24"><path d="M6.6 10.8c1.4 2.7 3.6 4.9 6.3 6.3l2.1-2.1c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.5.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.5.1.4 0 .8-.2 1L6.6 10.8z"/></svg></button>
+          </div>
+          <div class="info-pop" id="infoPop"></div>
+        </div>
+        <div class="thread-messages" id="threadMessages"></div>
+        <div class="composer" id="composer"></div>
+      </div>
+      <div class="toast-stack" id="toastStack"></div>
+    </div>
+  </div>
+    </div>
+  </div>
+</section>
+
+<section class="pipeline-overview">
+  <h2>How a message actually gets routed</h2>
+  <p class="sub">Five phases, most of them deterministic. The model only speaks once it's the last honest option.</p>
+  <figure class="diagram-card" id="archCard">
+    <svg viewBox="0 0 1100 170" role="img" aria-label="Pipeline flow: dataset feeds a per-user bundle, then media OCR/transcription, then rules. Rules run deterministically; an override branches above the rules-to-router step and can force the verdict, while a separate short path shows the router still receives the override's evidence. The router calls the LLM once per user, then normalize validates and semantically checks the output before it becomes a CSV row." font-family="ui-monospace, Consolas, monospace" font-size="11.5">
+      <defs>
+        <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+          <path d="M0 0L10 5L0 10z" fill="currentColor" />
+        </marker>
+      </defs>
+
+      <g class="arch-node" id="an-source" fill="currentColor">
+        <text x="55" y="108" text-anchor="middle" font-size="18">📄</text>
+        <text x="55" y="130" text-anchor="middle" font-size="9.5" opacity="0.7">dataset/*.csv</text>
+      </g>
+      <line class="arch-edge" id="ae-source-bundle" x1="95" y1="109" x2="130" y2="109" stroke="currentColor" stroke-width="1.6" marker-end="url(#arrow)" fill="none" />
+
+      <g class="arch-node" id="an-bundle" fill="currentColor">
+        <rect x="130" y="88" width="150" height="42" rx="10" fill="none" stroke="currentColor" opacity="0.8"/>
+        <text x="205" y="106" text-anchor="middle" font-weight="700">1 · bundle.py</text>
+        <text x="205" y="120" text-anchor="middle" opacity="0.6">one block per user</text>
+      </g>
+      <line class="arch-edge" id="ae-bundle-media" x1="280" y1="109" x2="314" y2="109" stroke="currentColor" stroke-width="1.6" marker-end="url(#arrow)" fill="none" />
+
+      <g class="arch-node" id="an-media" fill="currentColor">
+        <rect x="314" y="88" width="150" height="42" rx="10" fill="none" stroke="currentColor" opacity="0.8"/>
+        <text x="389" y="106" text-anchor="middle" font-weight="700">2 · media.py</text>
+        <text x="389" y="120" text-anchor="middle" opacity="0.6">OCR + transcript, cached</text>
+      </g>
+      <line class="arch-edge" id="ae-media-rules" x1="464" y1="109" x2="498" y2="109" stroke="currentColor" stroke-width="1.6" marker-end="url(#arrow)" fill="none" />
+
+      <g class="arch-node" id="an-rules" fill="currentColor">
+        <rect x="498" y="88" width="150" height="42" rx="10" fill="none" stroke="currentColor" opacity="0.8"/>
+        <text x="573" y="106" text-anchor="middle" font-weight="700">3 · rules.py</text>
+        <text x="573" y="120" text-anchor="middle" opacity="0.6">4 hard overrides</text>
+      </g>
+
+      <!-- override branches above the rules→router step; two short paths fan out from it -->
+      <line class="arch-edge" id="ae-override-stub" x1="665" y1="50" x2="665" y2="85" stroke="currentColor" stroke-width="1.6" stroke-dasharray="3 3" marker-end="url(#arrow)" fill="none" />
+      <g class="arch-node hot" id="an-override" fill="currentColor">
+        <rect x="580" y="8" width="170" height="42" rx="10" fill="none" stroke="var(--danger, currentColor)" stroke-width="2"/>
+        <text x="665" y="26" text-anchor="middle" font-weight="700">override fires?</text>
+        <text x="665" y="40" text-anchor="middle" opacity="0.6">verdict skips the LLM</text>
+      </g>
+
+      <line class="arch-edge" id="ae-rules-router" x1="648" y1="109" x2="682" y2="109" stroke="currentColor" stroke-width="1.6" marker-end="url(#arrow)" fill="none" />
+
+      <g class="arch-node" id="an-router" fill="currentColor">
+        <rect x="682" y="88" width="150" height="42" rx="10" fill="none" stroke="currentColor" opacity="0.8"/>
+        <text x="757" y="106" text-anchor="middle" font-weight="700">4 · router.py</text>
+        <text x="757" y="120" text-anchor="middle" opacity="0.6">1 call / user, T=0</text>
+      </g>
+      <line class="arch-edge" id="ae-router-normalize" x1="832" y1="109" x2="866" y2="109" stroke="currentColor" stroke-width="1.6" marker-end="url(#arrow)" fill="none" />
+
+      <g class="arch-node" id="an-normalize" fill="currentColor">
+        <rect x="866" y="88" width="150" height="42" rx="10" fill="none" stroke="currentColor" opacity="0.8"/>
+        <text x="941" y="106" text-anchor="middle" font-weight="700">5 · normalize.py</text>
+        <text x="941" y="120" text-anchor="middle" opacity="0.6">semantic check</text>
+      </g>
+      <line class="arch-edge" id="ae-normalize-output" x1="1016" y1="109" x2="1050" y2="109" stroke="currentColor" stroke-width="1.6" marker-end="url(#arrow)" fill="none" />
+
+      <g class="arch-node" id="an-output" fill="currentColor">
+        <text x="1063" y="108" text-anchor="middle" font-size="18">📤</text>
+        <text x="1063" y="130" text-anchor="middle" font-size="9.5" opacity="0.7">output.csv</text>
+      </g>
+
+      <path class="arch-edge" id="ae-evidence" d="M720 50 Q745 68 757 87" stroke="currentColor" stroke-width="1.6" stroke-dasharray="4 4" marker-end="url(#arrow)" fill="none" />
+      <g class="arch-node" id="an-evidence-note" fill="currentColor">
+        <text x="855" y="20" text-anchor="middle" font-size="10" opacity="0.75">override's own evidence</text>
+        <text x="855" y="33" text-anchor="middle" font-size="10" opacity="0.75">still reaches router.py</text>
+      </g>
+    </svg>
+    <figcaption>Rules can force the verdict on 4 hard-override conditions (OTP/credential asks, lookalike-domain payments, router-injection attempts, chain forwards) — but the router's evidence selection survives the override, since evidence is scored output, not a safety decision.</figcaption>
+    <button class="diagram-replay" id="diagramReplay">🔁 Replay</button>
+  </figure>
+</section>
+
+<footer class="site-footer">
+  <p>Built for HackerRank Orchestrate, August 2026 · ranked 18 / 1,983 · every number on this page comes from the committed run, nothing is fabricated for the demo.</p>
+</footer>
+
+<div id="sheetOverlay" class="sheet-overlay hidden"></div>
+<div id="pipelineSheet" class="pipeline-sheet hidden" role="dialog" aria-modal="true" aria-label="Routing trace">
+  <div class="sheet-grab"></div>
+  <div class="sheet-head">
+    <div class="sh-top">
+      <div>
+        <h3 id="sheetTitle">How this got routed</h3>
+        <div class="sh-msg" id="sheetMsgPreview"></div>
+      </div>
+      <button class="sheet-close" id="sheetClose" aria-label="Close">✕</button>
+    </div>
+    <div class="action-badge" id="actionBadge"></div>
+    <div class="conf-gauge" id="confGauge"></div>
+  </div>
+  <div class="sheet-body">
+    <div class="flow">
+      <div class="flow-rail" id="flowRail"></div>
+      <div class="flow-steps" id="flowSteps"></div>
+    </div>
+  </div>
+</div>
+
+<script src="app.js"></script>
+<script>
+  var _clk = document.getElementById("clock");
+  function _tick(){ if(_clk){ _clk.textContent = new Date().toLocaleTimeString([], {hour:"2-digit", minute:"2-digit", hour12:false}); } }
+  _tick(); setInterval(_tick, 30000);
+</script>
+</body>
+</html>

styles.css

@@ -0,0 +1,630 @@
+/* =================================================================
+   Message Router — demo shell
+   Two visual worlds on purpose: the phone reproduces WhatsApp exactly
+   (its own tokens, --wa-*), the page around it is the studio's own
+   design (--page-*, --ink-*, --accent-*). They share one theme switch.
+   ================================================================= */
+
+/* ---------- font stacks (system, no webfont fetch — kept honest) ---------- */
+:root {
+  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
+  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;
+  --font-wa: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+/* ---------- LIGHT (default — explicit, not system-derived) ---------- */
+:root,
+:root[data-theme="light"] {
+  --page-bg: #fbf6ef;
+  --page-bg-2: #f5ede1;
+  --ink: #241f2e;
+  --ink-soft: #6b6478;
+  --ink-faint: #9c93ab;
+  --paper: #ffffff;
+  --accent-blush: #f3b6c6;
+  --accent-lavender: #c9b6f3;
+  --accent-mint: #aee6c4;
+  --accent-sun: #f6d186;
+  --brand-teal: #0a8f74;
+  --brand-teal-ink: #ffffff;
+  --glass-bg: rgba(255, 255, 255, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.9);
+  --glass-shadow: rgba(60, 40, 30, 0.16);
+  --ring: rgba(36, 31, 46, 0.08);
+  --danger: #c14953;
+  --warn: #b8790f;
+  --good: #1f8a5f;
+
+  --wa-header: #008069;
+  --wa-header-ink: #ffffff;
+  --wa-list-bg: #ffffff;
+  --wa-list-search-bg: #f0f2f5;
+  --wa-list-ink: #111b21;
+  --wa-list-subtitle: #667781;
+  --wa-divider: #e9edef;
+  --wa-chat-bg: #efeae2;
+  --wa-bubble-in: #ffffff;
+  --wa-bubble-in-ink: #111b21;
+  --wa-bubble-out: #d9fdd3;
+  --wa-bubble-out-ink: #111b21;
+  --wa-bubble-shadow: rgba(0, 0, 0, 0.08);
+  --wa-timestamp: #667781;
+  --wa-tick-grey: #8696a0;
+  --wa-tick-blue: #53bdee;
+  --wa-fab: #00a884;
+  --wa-fab-ink: #ffffff;
+  --wa-online: #00a884;
+  --wa-panel-ink: #111b21;
+  --wa-icon: #54656f;
+  --wa-badge: #25d366;
+  --wa-badge-ink: #073b2c;
+  --wa-doodle: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.05) 1px, transparent 0);
+}
+
+/* ---------- DARK, system-preferred (only when no explicit choice) ---------- */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --page-bg: #15121c;
+    --page-bg-2: #1c1826;
+    --ink: #f1ecf7;
+    --ink-soft: #b8afc7;
+    --ink-faint: #79708c;
+    --paper: #1e1a28;
+    --accent-blush: #e38fa6;
+    --accent-lavender: #a98ce0;
+    --accent-mint: #7fcba0;
+    --accent-sun: #e0b563;
+    --brand-teal: #24c39a;
+    --brand-teal-ink: #0b1f1a;
+    --glass-bg: rgba(30, 26, 40, 0.55);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-shadow: rgba(0, 0, 0, 0.5);
+    --ring: rgba(255, 255, 255, 0.08);
+    --danger: #e58089;
+    --warn: #e0b563;
+    --good: #6bd9a6;
+
+    --wa-header: #202c33;
+    --wa-header-ink: #e9edef;
+    --wa-list-bg: #111b21;
+    --wa-list-search-bg: #202c33;
+    --wa-list-ink: #e9edef;
+    --wa-list-subtitle: #8696a0;
+    --wa-divider: #222e35;
+    --wa-chat-bg: #0b141a;
+    --wa-bubble-in: #202c33;
+    --wa-bubble-in-ink: #e9edef;
+    --wa-bubble-out: #005c4b;
+    --wa-bubble-out-ink: #e9edef;
+    --wa-bubble-shadow: rgba(0, 0, 0, 0.3);
+    --wa-timestamp: #8696a0;
+    --wa-tick-grey: #8696a0;
+    --wa-tick-blue: #53bdee;
+    --wa-fab: #00a884;
+    --wa-fab-ink: #062f26;
+    --wa-online: #00d9a3;
+    --wa-panel-ink: #e9edef;
+    --wa-icon: #aebac1;
+    --wa-badge: #00a884;
+    --wa-badge-ink: #04241c;
+    --wa-doodle: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
+  }
+}
+
+/* ---------- DARK, explicit toggle (always wins) ---------- */
+:root[data-theme="dark"] {
+  --page-bg: #15121c;
+  --page-bg-2: #1c1826;
+  --ink: #f1ecf7;
+  --ink-soft: #b8afc7;
+  --ink-faint: #79708c;
+  --paper: #1e1a28;
+  --accent-blush: #e38fa6;
+  --accent-lavender: #a98ce0;
+  --accent-mint: #7fcba0;
+  --accent-sun: #e0b563;
+  --brand-teal: #24c39a;
+  --brand-teal-ink: #0b1f1a;
+  --glass-bg: rgba(30, 26, 40, 0.55);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-shadow: rgba(0, 0, 0, 0.5);
+  --ring: rgba(255, 255, 255, 0.08);
+  --danger: #e58089;
+  --warn: #e0b563;
+  --good: #6bd9a6;
+
+  --wa-header: #202c33;
+  --wa-header-ink: #e9edef;
+  --wa-list-bg: #111b21;
+  --wa-list-search-bg: #202c33;
+  --wa-list-ink: #e9edef;
+  --wa-list-subtitle: #8696a0;
+  --wa-divider: #222e35;
+  --wa-chat-bg: #0b141a;
+  --wa-bubble-in: #202c33;
+  --wa-bubble-in-ink: #e9edef;
+  --wa-bubble-out: #005c4b;
+  --wa-bubble-out-ink: #e9edef;
+  --wa-bubble-shadow: rgba(0, 0, 0, 0.3);
+  --wa-timestamp: #8696a0;
+  --wa-tick-grey: #8696a0;
+  --wa-tick-blue: #53bdee;
+  --wa-fab: #00a884;
+  --wa-fab-ink: #062f26;
+  --wa-online: #00d9a3;
+  --wa-panel-ink: #e9edef;
+  --wa-icon: #aebac1;
+  --wa-badge: #00a884;
+  --wa-badge-ink: #04241c;
+}
+
+/* ------------------------------------------------------------- reset ---- */
+*, *::before, *::after { box-sizing: border-box; }
+html { color-scheme: light; scroll-behavior: smooth; }
+html[data-theme="dark"] { color-scheme: dark; }
+body {
+  margin: 0;
+  background: var(--page-bg);
+  color: var(--ink);
+  font-family: var(--font-ui);
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+img { max-width: 100%; display: block; }
+button { font: inherit; }
+::selection { background: var(--accent-mint); color: #0b1f1a; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
+}
+
+/* ------------------------------------------------------------ blobs ----- */
+.blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
+.blob {
+  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55;
+  animation: drift 26s ease-in-out infinite alternate;
+}
+.blob.b1 { width: 46vw; height: 46vw; top: -14vw; left: -12vw; background: var(--accent-blush); animation-delay: 0s; }
+.blob.b2 { width: 38vw; height: 38vw; top: 8vw; right: -14vw; background: var(--accent-lavender); animation-delay: -8s; }
+.blob.b3 { width: 34vw; height: 34vw; bottom: -12vw; left: 18vw; background: var(--accent-mint); animation-delay: -16s; }
+.blob.b4 { width: 24vw; height: 24vw; bottom: 6vw; right: 10vw; background: var(--accent-sun); animation-delay: -4s; }
+@keyframes drift {
+  from { transform: translate(0, 0) scale(1); }
+  to   { transform: translate(3vw, -2vw) scale(1.08); }
+}
+
+/* ------------------------------------------------------------ layout --- */
+.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
+
+.topbar {
+  position: sticky; top: 0; z-index: 40;
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 16px 28px;
+  backdrop-filter: blur(14px) saturate(1.3);
+  background: linear-gradient(to bottom, var(--page-bg) 55%, transparent);
+}
+.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.01em; }
+.brand .mark {
+  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
+  background: linear-gradient(135deg, var(--brand-teal), var(--accent-mint)); color: #06231c; font-size: 1rem;
+  box-shadow: 0 4px 14px var(--glass-shadow);
+}
+.theme-toggle {
+  border: 1px solid var(--ring); background: var(--glass-bg); backdrop-filter: blur(10px);
+  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
+  color: var(--ink); transition: transform 0.25s ease, box-shadow 0.25s ease;
+  box-shadow: 0 2px 10px var(--glass-shadow);
+}
+.theme-toggle:hover { transform: translateY(-2px); }
+.theme-toggle svg { width: 18px; height: 18px; }
+
+/* ------------------------------------------------------------- hero ---- */
+.hero {
+  position: relative; z-index: 1;
+  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
+  max-width: 1180px; margin: 0 auto; padding: 28px 28px 60px;
+}
+.eyebrow {
+  display: inline-flex; align-items: center; gap: 8px;
+  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--brand-teal); background: color-mix(in srgb, var(--brand-teal) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--brand-teal) 30%, transparent);
+  padding: 6px 12px; border-radius: 100px; margin-bottom: 18px;
+}
+.hero h1 {
+  font-family: var(--font-display); font-weight: 600; text-wrap: balance;
+  font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1.08; margin: 0 0 20px; letter-spacing: -0.01em;
+}
+.hero h1 em { font-style: italic; color: var(--brand-teal); }
+.lede { font-size: 1.04rem; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; margin: 0 0 30px; }
+
+.stat-row { display: flex; flex-wrap: wrap; gap: 14px; }
+.stat-chip {
+  --rot: 0deg;
+  background: var(--glass-bg); border: 1px solid var(--glass-border);
+  backdrop-filter: blur(10px); border-radius: 18px; padding: 12px 16px;
+  box-shadow: 0 8px 20px var(--glass-shadow);
+  transform: rotate(var(--rot));
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  min-width: 108px;
+}
+.stat-chip:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 14px 28px var(--glass-shadow); }
+.stat-chip b { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
+.stat-chip span { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }
+
+.hero-phone-wrap { position: relative; display: flex; justify-content: center; }
+.callout {
+  position: absolute; z-index: 5; max-width: 168px; padding: 10px 13px; border-radius: 14px;
+  background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px);
+  font-family: var(--font-display); font-style: italic; font-size: 0.86rem; line-height: 1.3;
+  box-shadow: 0 10px 24px var(--glass-shadow); color: var(--ink);
+  animation: floaty 6s ease-in-out infinite;
+}
+.callout.c1 { top: 4%; left: -8%; animation-delay: -1s; }
+.callout.c2 { bottom: 10%; right: -12%; animation-delay: -3s; }
+.callout .arrow { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--brand-teal); margin-top: 4px; font-style: normal; }
+@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+
+/* --------------------------------------------------------- phone stage - */
+.phone-stage { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 10px 28px 90px; display: flex; flex-direction: column; align-items: center; }
+.stage-controls {
+  display: flex; align-items: center; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; justify-content: center;
+}
+.stage-controls label { font-size: 0.78rem; color: var(--ink-soft); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
+#userSwitch {
+  border: 1px solid var(--ring); background: var(--glass-bg); backdrop-filter: blur(8px);
+  color: var(--ink); padding: 9px 14px; border-radius: 100px; font-family: var(--font-ui); font-size: 0.92rem;
+  cursor: pointer; box-shadow: 0 4px 14px var(--glass-shadow);
+}
+.hint-pill {
+  font-size: 0.76rem; color: var(--ink-soft); background: var(--glass-bg); border: 1px solid var(--glass-border);
+  padding: 7px 13px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px;
+}
+
+.phone-frame-outer { position: relative; }
+.phone {
+  width: 380px; max-width: 92vw; height: 780px; max-height: 82vh;
+  border-radius: 46px; padding: 12px; background: linear-gradient(160deg, #2c2c34, #131316);
+  box-shadow: 0 30px 60px -20px var(--glass-shadow), 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,255,0.06);
+  transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
+  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
+}
+.phone:hover, .phone.settled { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
+.screen {
+  position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
+  background: var(--wa-chat-bg); display: flex; flex-direction: column;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
+}
+.notch {
+  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px;
+  background: #131316; border-radius: 14px; z-index: 50;
+}
+.statusbar {
+  height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
+  background: var(--wa-header); color: var(--wa-header-ink); font-size: 0.72rem; font-family: var(--font-wa);
+  font-variant-numeric: tabular-nums; flex-shrink: 0; position: relative; z-index: 2;
+}
+.statusbar .icons { display: flex; gap: 4px; align-items: center; }
+
+/* --------------------------------------------------------- WA screens -- */
+.view { position: absolute; inset: 0; top: 30px; display: flex; flex-direction: column; background: var(--wa-list-bg); transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.32s ease; }
+.view.hidden { transform: translateX(100%); opacity: 0; pointer-events: none; }
+.view.chat-list-view.hidden { transform: translateX(-30%); }
+
+.wa-header { background: var(--wa-header); color: var(--wa-header-ink); flex-shrink: 0; }
+.list-header { padding: 14px 16px 8px; display: flex; align-items: center; justify-content: space-between; }
+.list-header .wa-title { font-size: 1.3rem; font-weight: 700; font-family: var(--font-wa); }
+.header-icons { display: flex; gap: 20px; align-items: center; }
+.header-icons svg { width: 20px; height: 20px; fill: currentColor; }
+.filter-row { display: flex; gap: 8px; padding: 10px 16px 12px; }
+.filter-pill { padding: 6px 14px; border-radius: 100px; font-size: 0.82rem; background: rgba(255,255,255,0.16); }
+.filter-pill.active { background: #ffffff; color: var(--wa-header); font-weight: 600; }
+
+.search-bar { margin: 10px 12px; background: var(--wa-list-search-bg); border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; color: var(--wa-list-subtitle); font-size: 0.9rem; flex-shrink: 0; }
+.search-bar svg { width: 16px; height: 16px; }
+
+.chat-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
+.chat-list.hidden { display: none; }
+.nav-stub.hidden { display: none; }
+.chat-row { position: relative; display: flex; gap: 12px; padding: 10px 16px; align-items: center; cursor: pointer; border-bottom: 1px solid transparent; }
+.chat-row:active { background: var(--wa-list-search-bg); }
+.avatar {
+  width: 49px; height: 49px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
+  font-family: var(--font-wa); font-weight: 600; color: #ffffff; font-size: 1rem; position: relative;
+}
+.avatar.group::after { content: "👥"; position: absolute; bottom: -2px; right: -2px; font-size: 0.7rem; background: var(--wa-list-bg); border-radius: 50%; padding: 1px; }
+.avatar.bot { background: linear-gradient(135deg, var(--brand-teal), var(--accent-lavender)) !important; }
+.chat-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.chat-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
+.chat-row-name { font-size: 0.98rem; color: var(--wa-list-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
+.verified-badge { color: var(--brand-teal); flex-shrink: 0; }
+.chat-row-time { font-size: 0.74rem; color: var(--wa-list-subtitle); flex-shrink: 0; }
+.chat-row-time.unread { color: var(--wa-badge); font-weight: 600; }
+.chat-row-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.chat-row-preview { font-size: 0.86rem; color: var(--wa-list-subtitle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
+.action-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.chat-row-badge { min-width: 19px; height: 19px; border-radius: 10px; background: var(--wa-badge); color: var(--wa-badge-ink); font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px; flex-shrink: 0; }
+
+.bottom-nav { display: flex; border-top: 1px solid var(--wa-divider); background: var(--wa-list-bg); flex-shrink: 0; }
+.bottom-nav .nav-item { flex: 1; text-align: center; padding: 8px 0 10px; font-size: 0.68rem; color: var(--wa-list-subtitle); }
+.bottom-nav .nav-item .nav-ico { font-size: 1.05rem; display: block; margin-bottom: 2px; }
+.bottom-nav .nav-item.active { color: var(--brand-teal); }
+
+/* --------------------------------------------------------- thread ------ */
+.thread-header { position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 10px; }
+.back-btn { background: none; border: none; color: var(--wa-header-ink); font-size: 1.5rem; cursor: pointer; padding: 4px 6px; line-height: 1; }
+.thread-title { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 4px; }
+.thread-title .t-name { font-size: 1rem; font-weight: 600; font-family: var(--font-wa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
+.thread-title .t-sub { font-size: 0.72rem; opacity: 0.85; }
+
+.thread-messages { flex: 1; overflow-y: auto; padding: 14px 10px; background-color: var(--wa-chat-bg); background-image: var(--wa-doodle); background-size: 16px 16px; display: flex; flex-direction: column; gap: 2px; }
+.date-chip { align-self: center; background: rgba(255,255,255,0.75); color: #54656f; font-size: 0.72rem; padding: 5px 11px; border-radius: 8px; margin: 10px 0; box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
+:root[data-theme="dark"] .date-chip { background: #182229; color: #8696a0; }
+
+.bubble-row { display: flex; margin: 2px 0; max-width: 100%; }
+.bubble-row.in { justify-content: flex-start; }
+.bubble-row.out { justify-content: flex-end; }
+.bubble {
+  position: relative; max-width: 78%; padding: 6px 8px 7px 9px; border-radius: 8px;
+  box-shadow: 0 1px 1px var(--wa-bubble-shadow); font-size: 0.89rem; line-height: 1.35; cursor: default;
+  animation: pop-in 0.28s cubic-bezier(.2,.8,.2,1) both;
+}
+@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
+.bubble.in { background: var(--wa-bubble-in); color: var(--wa-bubble-in-ink); border-top-left-radius: 2px; }
+.bubble.out { background: var(--wa-bubble-out); color: var(--wa-bubble-out-ink); border-top-right-radius: 2px; }
+.bubble .sender-name { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 2px; }
+.bubble .btext { white-space: pre-wrap; word-wrap: break-word; }
+.bubble .btext:empty { display: none; }
+.bubble .bmeta { display: flex; justify-content: flex-end; align-items: center; gap: 3px; float: right; margin: 3px -2px -2px 8px; }
+.bubble .btime { font-size: 0.68rem; color: var(--wa-timestamp); }
+.bubble.out .btime { color: rgba(17,27,33,0.5); }
+.tick { width: 15px; height: 10px; }
+.tick .stroke { fill: none; stroke: var(--wa-tick-grey); stroke-width: 1.6; }
+.tick.read .stroke { stroke: var(--wa-tick-blue); }
+
+.bubble.decisioned { cursor: pointer; }
+.bubble.decisioned::after { content: ""; position: absolute; inset: -3px; border-radius: 11px; border: 1.5px dashed color-mix(in srgb, var(--action-color, var(--brand-teal)) 55%, transparent); transition: border-color 0.2s, transform 0.15s; pointer-events: none; }
+.bubble.decisioned:hover::after, .bubble.decisioned:active::after { border-color: var(--action-color, var(--brand-teal)); }
+.bubble.decisioned:active { transform: scale(0.985); }
+.decision-tag {
+  clear: both; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 8px 3px 6px; border-radius: 100px;
+  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
+  background: color-mix(in srgb, var(--action-color) 16%, transparent); color: var(--action-color);
+  border: 1px solid color-mix(in srgb, var(--action-color) 40%, transparent);
+}
+.decision-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--action-color); }
+
+.media-card { border-radius: 6px; overflow: hidden; margin-bottom: 5px; background: rgba(0,0,0,0.04); }
+.media-card .media-visual { display: flex; align-items: center; gap: 10px; padding: 22px 12px; background: linear-gradient(135deg, var(--accent-lavender), var(--accent-blush)); color: #2b2233; }
+.media-card.voice .media-visual { background: linear-gradient(135deg, var(--accent-mint), var(--accent-sun)); }
+.media-card .media-icon { font-size: 1.5rem; }
+.media-card .media-cap { font-size: 0.78rem; padding: 6px 9px 2px; color: var(--wa-list-subtitle); font-style: italic; }
+.waveform { flex: 1; display: flex; align-items: center; gap: 2px; height: 22px; }
+.waveform span { width: 3px; border-radius: 2px; background: rgba(43,34,51,0.55); }
+
+.typing-row { display: flex; margin: 4px 0; }
+.typing-bubble { background: var(--wa-bubble-in); border-radius: 8px; border-top-left-radius: 2px; padding: 10px 14px; display: flex; gap: 4px; box-shadow: 0 1px 1px var(--wa-bubble-shadow); }
+.typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--wa-tick-grey); animation: bounce 1.1s infinite ease-in-out; }
+.typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
+.typing-bubble span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
+
+.quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 6px 4px; }
+.qr-chip {
+  border: 1px solid var(--brand-teal); color: var(--brand-teal); background: color-mix(in srgb, var(--brand-teal) 8%, var(--wa-chat-bg));
+  padding: 8px 13px; border-radius: 100px; font-size: 0.82rem; cursor: pointer; font-family: var(--font-wa);
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+.qr-chip:hover { background: color-mix(in srgb, var(--brand-teal) 16%, var(--wa-chat-bg)); transform: translateY(-1px); }
+.qr-chip:disabled { opacity: 0.4; cursor: default; transform: none; }
+
+.deep-link-btn {
+  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--brand-teal); color: var(--brand-teal-ink);
+  border: none; padding: 8px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: var(--font-wa);
+}
+
+.composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px; background: transparent; flex-shrink: 0; }
+.composer .cbox { flex: 1; background: var(--wa-bubble-in); border-radius: 24px; padding: 9px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 1px 2px var(--wa-bubble-shadow); }
+.composer input { flex: 1; border: none; outline: none; background: none; color: var(--wa-list-ink); font-size: 0.92rem; font-family: var(--font-wa); }
+.composer input::placeholder { color: var(--wa-list-subtitle); }
+.send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--wa-fab); color: var(--wa-fab-ink); border: none; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 3px 8px var(--wa-bubble-shadow); }
+.send-btn svg { width: 19px; height: 19px; margin-left: 2px; }
+.send-btn:disabled { opacity: 0.5; cursor: default; }
+
+.locked-note { text-align: center; font-size: 0.72rem; color: var(--wa-list-subtitle); padding: 6px 20px 10px; }
+
+/* --------------------------------------------------------- sheet ------- */
+.sheet-overlay { position: fixed; inset: 0; background: rgba(10, 8, 14, 0.55); backdrop-filter: blur(3px); z-index: 90; opacity: 0; transition: opacity 0.25s ease; }
+.sheet-overlay.hidden { opacity: 0; pointer-events: none; }
+.sheet-overlay.show { opacity: 1; }
+
+.pipeline-sheet {
+  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%); width: min(420px, 94vw); max-height: 86vh;
+  background: var(--paper); border-radius: 24px 24px 0 0; z-index: 91; box-shadow: 0 -20px 60px rgba(0,0,0,0.35);
+  transition: transform 0.38s cubic-bezier(.2,.85,.25,1); display: flex; flex-direction: column; overflow: hidden;
+}
+.pipeline-sheet.show { transform: translate(-50%, 0); }
+.sheet-grab { width: 40px; height: 4px; background: var(--ring); border-radius: 4px; margin: 10px auto 4px; flex-shrink: 0; }
+.sheet-head { padding: 6px 22px 14px; flex-shrink: 0; border-bottom: 1px solid var(--ring); }
+.sheet-head .sh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
+.sheet-head h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 4px; }
+.sheet-head .sh-msg { font-size: 0.86rem; color: var(--ink-soft); font-style: italic; max-width: 30ch; }
+.sheet-close { border: none; background: var(--ring); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: var(--ink); flex-shrink: 0; font-size: 1rem; }
+.action-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; background: color-mix(in srgb, var(--action-color) 18%, transparent); color: var(--action-color); border: 1px solid color-mix(in srgb, var(--action-color) 45%, transparent); margin-top: 8px; }
+
+.conf-gauge { margin-top: 12px; }
+.conf-gauge .cg-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 4px; }
+.conf-gauge .cg-track { position: relative; height: 6px; border-radius: 4px; background: var(--ring); overflow: visible; }
+.conf-gauge .cg-band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: color-mix(in srgb, var(--action-color) 30%, transparent); }
+.conf-gauge .cg-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--action-color); border: 2px solid var(--paper); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action-color) 30%, transparent); }
+
+.sheet-body { flex: 1; overflow-y: auto; padding: 18px 22px 28px; }
+
+.flow { display: flex; gap: 14px; }
+.flow-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 26px; }
+.flow-node { width: 26px; height: 26px; border-radius: 50%; background: var(--ring); border: 2px solid var(--ring); display: grid; place-items: center; font-size: 0.82rem; flex-shrink: 0; opacity: 0.35; transform: scale(0.8); transition: all 0.4s cubic-bezier(.3,1.4,.4,1); }
+.flow-node.active { opacity: 1; transform: scale(1); border-color: var(--brand-teal); background: color-mix(in srgb, var(--brand-teal) 16%, var(--paper)); }
+.flow-node.override { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, var(--paper)); }
+.flow-node.final.active { border-color: var(--action-color); background: color-mix(in srgb, var(--action-color) 20%, var(--paper)); animation: node-pop 0.5s cubic-bezier(.3,1.6,.4,1); }
+@keyframes node-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
+.flow-line { width: 2px; flex: 1; min-height: 22px; background: var(--ring); position: relative; overflow: hidden; }
+.flow-line .fill { position: absolute; inset: auto 0 0 0; height: 0%; background: var(--brand-teal); transition: height 0.5s ease; }
+.flow-line.dashed .fill { background: repeating-linear-gradient(to bottom, var(--danger) 0 4px, transparent 4px 8px); }
+.flow-steps { flex: 1; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
+.flow-step { opacity: 0.25; transform: translateY(6px); transition: all 0.4s ease; min-height: 26px; }
+.flow-step.active { opacity: 1; transform: none; }
+.flow-step h4 { margin: 0 0 4px; font-size: 0.86rem; font-family: var(--font-ui); font-weight: 700; }
+.flow-step .fs-body { font-size: 0.83rem; color: var(--ink-soft); line-height: 1.5; }
+.flow-step .fs-body strong { color: var(--ink); }
+
+.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.sig-chip { font-family: var(--font-mono); font-size: 0.68rem; background: var(--ring); color: var(--ink-soft); padding: 3px 8px; border-radius: 6px; }
+.sig-chip.hot { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
+.evid-chip { font-family: var(--font-ui); font-size: 0.76rem; background: color-mix(in srgb, var(--brand-teal) 10%, transparent); color: var(--brand-teal); padding: 5px 10px; border-radius: 8px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--brand-teal) 30%, transparent); margin-top: 6px; display: inline-block; }
+.evid-preview { margin-top: 8px; background: var(--ring); border-radius: 10px; padding: 10px 12px; font-size: 0.8rem; display: none; }
+.evid-preview.show { display: block; }
+.evid-preview .ep-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); margin-top: 4px; }
+
+.override-banner { margin-top: 10px; background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); border-radius: 10px; padding: 9px 11px; font-size: 0.8rem; font-weight: 600; }
+.reason-final { margin-top: 10px; padding: 12px 14px; background: var(--ring); border-radius: 12px; font-size: 0.87rem; line-height: 1.5; }
+.reason-final .rf-check { color: var(--good); font-size: 0.76rem; font-weight: 700; margin-top: 6px; display: block; }
+
+/* --------------------------------------------------------- pipeline ---- */
+.pipeline-overview { position: relative; z-index: 1; max-width: 900px; margin: 40px auto 0; padding: 0 28px 90px; }
+.pipeline-overview h2 { font-family: var(--font-display); font-size: 1.9rem; text-align: center; margin-bottom: 8px; text-wrap: balance; }
+.pipeline-overview .sub { text-align: center; color: var(--ink-soft); margin-bottom: 34px; }
+.diagram-card { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); border-radius: 24px; padding: 26px 20px; box-shadow: 0 14px 40px var(--glass-shadow); overflow-x: auto; }
+.diagram-card svg { width: 100%; height: auto; display: block; min-width: 640px; }
+.diagram-card figcaption { text-align: center; font-size: 0.84rem; color: var(--ink-soft); margin-top: 14px; }
+
+/* ------------------------------------------------------------ footer --- */
+.site-footer { position: relative; z-index: 1; text-align: center; padding: 30px 28px 60px; color: var(--ink-faint); font-size: 0.84rem; }
+.site-footer a { color: var(--brand-teal); text-decoration: none; border-bottom: 1px dotted; }
+
+/* ------------------------------------------------------------ misc ----- */
+.reveal { animation: rise 0.7s cubic-bezier(.2,.8,.2,1) both; }
+@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
+
+/* --------------------------------------------------- operational chrome */
+.search-bar { position: relative; }
+.search-bar input {
+  flex: 1; border: none; outline: none; background: none; color: var(--wa-list-ink);
+  font-family: var(--font-wa); font-size: 0.9rem;
+}
+.search-bar input::placeholder { color: var(--wa-list-subtitle); }
+.search-clear { border: none; background: none; color: var(--wa-list-subtitle); cursor: pointer; font-size: 0.9rem; padding: 2px; display: none; }
+.search-bar.has-value .search-clear { display: block; }
+
+.filter-pill { cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s, transform 0.1s; border: none; font: inherit; }
+.filter-pill:active { transform: scale(0.96); }
+
+.empty-row { padding: 46px 24px; text-align: center; color: var(--wa-list-subtitle); font-size: 0.86rem; line-height: 1.5; }
+.empty-row .ee { font-size: 1.8rem; display: block; margin-bottom: 10px; }
+
+.header-icons button { background: none; border: none; color: currentColor; padding: 4px; cursor: pointer; display: flex; min-width: 32px; min-height: 32px; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s; }
+.header-icons button:active { background: rgba(255, 255, 255, 0.18); }
+.header-icons { position: relative; }
+
+.dropdown-menu {
+  position: absolute; top: 44px; right: 0; z-index: 30; min-width: 208px;
+  background: var(--paper); color: var(--ink); border-radius: 14px; overflow: hidden;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); border: 1px solid var(--ring);
+  opacity: 0; transform: translateY(-6px) scale(0.97); pointer-events: none; transition: all 0.16s ease;
+}
+.dropdown-menu.show { opacity: 1; transform: none; pointer-events: auto; }
+.dropdown-menu button {
+  display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; color: var(--ink);
+  font: inherit; font-size: 0.86rem; text-align: left; padding: 12px 15px; cursor: pointer; transition: background 0.12s;
+}
+.dropdown-menu button:hover, .dropdown-menu button:active { background: var(--ring); }
+.dropdown-menu .dm-divider { height: 1px; background: var(--ring); margin: 2px 0; }
+
+/* pinned Router HQ — impossible to miss on first look */
+.chat-row.pinned-hq { position: relative; background: color-mix(in srgb, var(--brand-teal) 7%, transparent); }
+.chat-row.pinned-hq .avatar { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-teal) 55%, transparent); animation: hq-pulse 2.1s ease-out 3; }
+@keyframes hq-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-teal) 55%, transparent); }
+  70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand-teal) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-teal) 0%, transparent); }
+}
+.start-badge {
+  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
+  background: var(--brand-teal); color: var(--brand-teal-ink); padding: 2px 7px; border-radius: 100px; margin-left: 6px;
+}
+.spotlight-arrow {
+  position: absolute; left: 66px; top: -6px; z-index: 25; display: flex; align-items: center; gap: 6px;
+  background: var(--ink); color: var(--page-bg); font-family: var(--font-ui); font-size: 0.76rem; font-weight: 600;
+  padding: 7px 12px; border-radius: 100px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  animation: spotlight-in 0.4s cubic-bezier(.2, .8, .2, 1) both, spotlight-bob 1.6s ease-in-out 0.4s infinite;
+  pointer-events: none; white-space: nowrap;
+}
+@keyframes spotlight-in { from { opacity: 0; transform: translateY(6px) scale(0.9); } to { opacity: 1; transform: none; } }
+@keyframes spotlight-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+.spotlight-arrow.out { animation: spotlight-out 0.3s ease forwards; }
+@keyframes spotlight-out { to { opacity: 0; transform: translateY(-6px) scale(0.92); } }
+
+/* nav stub screen */
+.nav-item { cursor: pointer; background: none; border: none; font: inherit; color: var(--wa-list-subtitle); transition: color 0.15s; }
+.nav-stub { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; text-align: center; background: var(--wa-list-bg); }
+.nav-stub .ns-icon { font-size: 2.4rem; }
+.nav-stub p { color: var(--wa-list-subtitle); font-size: 0.86rem; line-height: 1.5; max-width: 26ch; margin: 0; }
+.nav-stub button { background: var(--brand-teal); color: var(--brand-teal-ink); border: none; padding: 10px 18px; border-radius: 100px; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
+
+/* fake-but-tappable composer row for read-only threads */
+.composer-fake { display: flex; align-items: center; gap: 6px; padding: 8px 8px; flex-shrink: 0; }
+.composer-fake .cbox { flex: 1; background: var(--wa-bubble-in); border-radius: 24px; padding: 9px 8px 9px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 1px 2px var(--wa-bubble-shadow); opacity: 0.85; }
+.composer-fake .cbox span.ph { flex: 1; color: var(--wa-list-subtitle); font-size: 0.88rem; }
+.icon-btn { background: none; border: none; font-size: 1.05rem; color: var(--wa-icon); cursor: pointer; padding: 4px; line-height: 1; border-radius: 50%; min-width: 30px; min-height: 30px; }
+.icon-btn:active { background: rgba(127, 127, 127, 0.18); }
+.send-btn.fake { opacity: 0.9; }
+
+/* toast */
+.toast-stack { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: 92%; }
+.toast {
+  background: var(--ink); color: var(--page-bg); font-family: var(--font-ui); font-size: 0.8rem; line-height: 1.4;
+  padding: 10px 15px; border-radius: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); max-width: 100%;
+  animation: toast-in 0.28s cubic-bezier(.2, .8, .2, 1) both;
+}
+.toast.out { animation: toast-out 0.22s ease forwards; }
+@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(0.97); } }
+
+/* contact-info popover */
+.info-pop {
+  position: absolute; top: 46px; left: 8px; right: 8px; z-index: 30; background: var(--paper); color: var(--ink);
+  border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); border: 1px solid var(--ring);
+  padding: 18px 18px 16px; opacity: 0; transform: translateY(-8px) scale(0.97); pointer-events: none; transition: all 0.18s ease;
+}
+.info-pop.show { opacity: 1; transform: none; pointer-events: auto; }
+.info-pop .ip-avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-family: var(--font-wa); font-size: 1.2rem; margin-bottom: 10px; }
+.info-pop h4 { margin: 0 0 3px; font-family: var(--font-display); font-size: 1.05rem; }
+.info-pop .ip-sub { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; }
+.info-pop .ip-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 6px 0; border-top: 1px solid var(--ring); }
+.info-pop .ip-row b { font-family: var(--font-mono); font-weight: 600; }
+
+/* ---------------------------------------------------- diagram animation */
+.diagram-card .arch-node { opacity: 0.18; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; transform-box: fill-box; transform-origin: center; }
+.diagram-card.play .arch-node.on { opacity: 1; transform: translateY(0); }
+.diagram-card .arch-edge { transition: stroke-dashoffset 0.5s ease, opacity 0.3s ease; opacity: 0.3; }
+.diagram-card.play .arch-edge.on { opacity: 0.9; }
+.diagram-card .arch-node rect { transition: stroke 0.3s ease, fill 0.3s ease; }
+.diagram-card.play .arch-node.on.hot rect { stroke: var(--danger); stroke-width: 2.2; }
+.diagram-replay {
+  display: flex; align-items: center; gap: 6px; margin: 16px auto 0; background: var(--glass-bg); border: 1px solid var(--glass-border);
+  color: var(--ink); font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; padding: 8px 16px; border-radius: 100px;
+  cursor: pointer; backdrop-filter: blur(8px);
+}
+
+/* ------------------------------------------------------------ responsive */
+@media (max-width: 880px) {
+  .hero { grid-template-columns: 1fr; padding-top: 8px; }
+  .hero-phone-wrap { order: -1; margin-bottom: 10px; transform: scale(0.86); }
+  .callout { display: none; }
+  .lede { max-width: 60ch; }
+}
+@media (max-width: 460px) {
+  .wrap, .topbar, .phone-stage, .pipeline-overview { padding-left: 16px; padding-right: 16px; }
+  .phone { width: 100%; height: 640px; border-radius: 32px; }
+  .screen { border-radius: 22px; }
+}