Upload folder using huggingface_hub

frontend/app.js

@@ -1,38 +1,35 @@
-// ── Config ──────────────────────────────────────────────────────
-const API_BASE = ""; // "" = same origin (HF Spaces). "http://localhost:8000" for local dev.
+const API_BASE = "";
 
-// ── State ───────────────────────────────────────────────────────
-let sessions = [];          // [{id, title, messages:[]}]
+let sessions = [];
 let activeSessionId = null;
 let isLoading = false;
 let sidebarCollapsed = localStorage.getItem("sidebarCollapsed") === "true";
 
-// ── Init ────────────────────────────────────────────────────────
-const textarea  = document.getElementById("query-input");
-const sendBtn   = document.getElementById("send-btn");
-const msgsList  = document.getElementById("messages-list");
+const textarea = document.getElementById("query-input");
+const sendBtn = document.getElementById("send-btn");
+const messagesList = document.getElementById("messages-list");
 
-// Apply sidebar collapsed state on load
 if (sidebarCollapsed) {
   document.getElementById("sidebar").classList.add("collapsed");
 }
 
 textarea.addEventListener("input", () => {
   textarea.style.height = "auto";
-  textarea.style.height = Math.min(textarea.scrollHeight, 140) + "px";
+  textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
 });
 
 textarea.addEventListener("keydown", e => {
-  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitQuery(); }
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    submitQuery();
+  }
 });
 
-// ── Screen switching ─────────────────────────────────────────────
 function showScreen(name) {
   document.querySelectorAll(".screen").forEach(s => s.classList.remove("active"));
   document.getElementById("screen-" + name).classList.add("active");
 }
 
-// ── Sidebar toggle ───────────────────────────────────────────────
 function toggleSidebar() {
   const sidebar = document.getElementById("sidebar");
   sidebarCollapsed = !sidebarCollapsed;
@@ -40,12 +37,9 @@ function toggleSidebar() {
   localStorage.setItem("sidebarCollapsed", sidebarCollapsed);
 }
 
-// ── Session management ───────────────────────────────────────────
 function createSession(firstQuery) {
   const id = Date.now();
-  const title = firstQuery.length > 45
-    ? firstQuery.substring(0, 45) + "…"
-    : firstQuery;
+  const title = firstQuery.length > 40 ? firstQuery.substring(0, 40) + "…" : firstQuery;
   const session = { id, title, messages: [] };
   sessions.unshift(session);
   activeSessionId = id;
@@ -68,7 +62,7 @@ function switchSession(id) {
 
 function newChat() {
   activeSessionId = null;
-  msgsList.innerHTML = "";
+  messagesList.innerHTML = "";
   showScreen("welcome");
   document.getElementById("topbar-title").textContent = "New Research Session";
   renderSessionsList();
@@ -78,15 +72,12 @@ function newChat() {
 function renderSessionsList() {
   const list = document.getElementById("sessions-list");
   if (sessions.length === 0) {
-    list.innerHTML = '<div class="sessions-empty">No sessions yet</div>';
+    list.innerHTML = '<div class="sessions-empty">No sessions</div>';
     return;
   }
   list.innerHTML = sessions.map(s => `
-    <div class="session-item ${s.id === activeSessionId ? "active" : ""}"
-         onclick="switchSession(${s.id})">
-      <div class="session-dot"></div>
-      <span class="session-label">${escHtml(s.title)}</span>
-      <span class="session-count">${s.messages.filter(m => m.role === "ai").length}</span>
+    <div class="session-item ${s.id === activeSessionId ? "active" : ""}" onclick="switchSession(${s.id})">
+      ${escHtml(s.title)}
     </div>
   `).join("");
 }
@@ -94,7 +85,7 @@ function renderSessionsList() {
 function renderMessages() {
   const session = getActiveSession();
   if (!session) return;
-  msgsList.innerHTML = "";
+  messagesList.innerHTML = "";
   session.messages.forEach(msg => {
     if (msg.role === "user") appendUserBubble(msg.text, false);
     else if (msg.role === "ai") appendAIBubble(msg.data, false);
@@ -103,12 +94,11 @@ function renderMessages() {
   scrollBottom();
 }
 
-// ── Submit ───────────────────────────────────────────────────────
 async function submitQuery() {
   const query = textarea.value.trim();
   if (!query || isLoading) return;
-  if (query.length < 10) { showToast("Query too short — minimum 10 characters."); return; }
-  if (query.length > 1000) { showToast("Query too long — maximum 1000 characters."); return; }
+  if (query.length < 10) { alert("Query too short"); return; }
+  if (query.length > 1000) { alert("Query too long"); return; }
 
   if (!activeSessionId) {
     createSession(query);
@@ -117,10 +107,8 @@ async function submitQuery() {
   }
 
   getActiveSession().messages.push({ role: "user", text: query });
-
   textarea.value = "";
   textarea.style.height = "auto";
-
   appendUserBubble(query);
   const loaderId = appendLoader();
   setLoading(true);
@@ -139,17 +127,16 @@ async function submitQuery() {
     removeLoader(loaderId);
 
     if (!res.ok) {
-      const msg = data.detail || "Something went wrong. Please try again.";
+      const msg = data.detail || "Error: please try again";
       getActiveSession().messages.push({ role: "error", text: msg });
       appendErrorBubble(msg);
     } else {
       getActiveSession().messages.push({ role: "ai", data });
       appendAIBubble(data);
     }
-
   } catch (err) {
     removeLoader(loaderId);
-    const msg = "Could not reach the server. The Space may be waking up — try again in 30 seconds.";
+    const msg = "Could not reach server";
     getActiveSession().messages.push({ role: "error", text: msg });
     appendErrorBubble(msg);
   }
@@ -164,56 +151,44 @@ function usesuggestion(el) {
   submitQuery();
 }
 
-// ── Bubble renderers ─────────────────────────────────────────────
 function appendUserBubble(text, scroll = true) {
   const div = document.createElement("div");
-  div.className = "msg msg-user";
-  div.innerHTML = `<div class="bubble-user">${escHtml(text)}</div>`;
-  msgsList.appendChild(div);
+  div.className = "message user";
+  div.innerHTML = `<div class="bubble user">${escHtml(text)}</div>`;
+  messagesList.appendChild(div);
   if (scroll) scrollBottom();
 }
 
 function appendAIBubble(data, scroll = true) {
   const verified = data.verification_status === true || data.verification_status === "verified";
   const badgeClass = verified ? "verified" : "unverified";
-  const badgeText  = verified ? "✓ Verified" : "⚠ Unverified";
-
-  const truncNote = data.truncated
-    ? `<div class="truncated-note">3 of 5 retrieved documents used — context limit reached.</div>`
-    : "";
+  const badgeText = verified ? "✓ Verified" : "⚠ Unverified";
 
   const sourceCount = (data.sources || []).length;
-  const sourcesBtn = sourceCount > 0
-    ? `<button class="sources-btn" onclick='openSources(${escAttr(JSON.stringify(data.sources))})'>
-         📄 ${sourceCount} Source${sourceCount > 1 ? "s" : ""}
-       </button>`
-    : "";
+  const sourcesBtn = sourceCount > 0 ? `<button class="sources-btn">📄 ${sourceCount} Source${sourceCount > 1 ? "s" : ""}</button>` : "";
 
-  const latency = data.latency_ms
-    ? `<span class="latency-label">${Math.round(data.latency_ms)}ms</span>`
-    : "";
+  const latency = data.latency_ms ? `<span style="margin-left: auto; font-size: 10px; color: var(--text-3);">${Math.round(data.latency_ms)}ms</span>` : "";
 
   const div = document.createElement("div");
-  div.className = "msg msg-ai";
+  div.className = "message ai";
   div.innerHTML = `
-    <div class="bubble-ai">
-      <div class="bubble-answer">${formatAnswer(data.answer)}</div>
-      ${truncNote}
+    <div class="bubble ai">
+      <div>${formatAnswer(data.answer)}</div>
       <div class="bubble-meta">
-        <span class="verify-badge ${badgeClass}">${badgeText}</span>
+        <span class="badge ${badgeClass}">${badgeText}</span>
         ${sourcesBtn}
         ${latency}
       </div>
     </div>`;
-  msgsList.appendChild(div);
+  messagesList.appendChild(div);
   if (scroll) scrollBottom();
 }
 
 function appendErrorBubble(text, scroll = true) {
   const div = document.createElement("div");
-  div.className = "msg msg-ai";
-  div.innerHTML = `<div class="bubble-error">⚠ ${escHtml(text)}</div>`;
-  msgsList.appendChild(div);
+  div.className = "message ai";
+  div.innerHTML = `<div class="bubble ai" style="border-left-color: var(--red);">⚠ ${escHtml(text)}</div>`;
+  messagesList.appendChild(div);
   if (scroll) scrollBottom();
 }
 
@@ -221,13 +196,13 @@ function appendLoader() {
   const id = "loader-" + Date.now();
   const div = document.createElement("div");
   div.id = id;
-  div.className = "msg msg-ai";
+  div.className = "message ai";
   div.innerHTML = `
-    <div class="bubble-ai bubble-loading">
+    <div class="bubble ai loading">
       <div class="dots"><span></span><span></span><span></span></div>
-      Searching judgments…
+      Searching...
     </div>`;
-  msgsList.appendChild(div);
+  messagesList.appendChild(div);
   scrollBottom();
   return id;
 }
@@ -237,256 +212,51 @@ function removeLoader(id) {
   if (el) el.remove();
 }
 
-// ── Sources panel ────────────────────────────────────────────────
-function openSources(sources) {
-  const panel   = document.getElementById("sources-panel");
-  const overlay = document.getElementById("sources-overlay");
-  const body    = document.getElementById("sources-panel-body");
-
-  body.innerHTML = sources.map((s, i) => {
-    const meta    = s.meta || {};
-    const id      = meta.judgment_id || "Unknown";
-    const year    = meta.year ? ` · ${meta.year}` : "";
-    const excerpt = (s.text || "").trim().substring(0, 400);
-    return `
-      <div class="source-card">
-        <div class="source-num">${i + 1}</div>
-        <div class="source-id">${escHtml(id)}</div>
-        <div class="source-year">Supreme Court of India${year}</div>
-        <div class="source-excerpt">${escHtml(excerpt)}${s.text && s.text.length > 400 ? "…" : ""}</div>
-      </div>`;
-  }).join("");
-
-  panel.classList.add("open");
-  overlay.classList.add("open");
-  requestAnimationFrame(() => { panel.style.transform = "translateX(0)"; });
-}
-
-function closeSourcesPanel() {
-  const panel   = document.getElementById("sources-panel");
-  const overlay = document.getElementById("sources-overlay");
-  panel.classList.remove("open");
-  overlay.classList.remove("open");
-}
-
-// ── Helpers ──────────────────────────────────────────────────────
-function setLoading(state) {
-  isLoading = state;
-  sendBtn.disabled = state;
+function setLoading(loading) {
+  isLoading = loading;
+  sendBtn.disabled = loading;
   const pill = document.getElementById("status-pill");
-  const text = document.getElementById("status-text");
-  if (state) {
+  if (loading) {
     pill.classList.add("loading");
-    text.textContent = "Searching…";
+    document.getElementById("status-text").textContent = "Searching...";
   } else {
     pill.classList.remove("loading");
-    text.textContent = "Ready";
+    document.getElementById("status-text").textContent = "Ready";
   }
 }
 
 function scrollBottom() {
-  const c = document.querySelector(".messages-container");
-  if (c) c.scrollTop = c.scrollHeight;
-}
-
-function escHtml(str) {
-  return String(str || "")
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
+  setTimeout(() => {
+    const container = document.querySelector(".chat-area");
+    if (container) container.scrollTop = container.scrollHeight;
+  }, 0);
 }
 
-function escAttr(str) {
-  return String(str || "").replace(/'/g, "&#39;").replace(/"/g, "&quot;");
-}
-
-// ── Answer formatter ─────────────────────────────────────────────
 function formatAnswer(text) {
   if (!text) return "";
-  text = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
-
-  const lines = text.split('\n');
-  let html = '';
-  let inTable = false;
-  let tableHtml = '';
-  let inList = false;
-  let listType = '';
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-
-    // Table row
-    if (line.trim().startsWith('|')) {
-      if (line.match(/^\|[\s\-|]+\|$/)) continue; // skip separator rows
-      if (!inTable) { tableHtml = '<table class="answer-table">'; inTable = true; }
-      const cells = line.split('|').filter((c, idx, a) => idx > 0 && idx < a.length - 1);
-      tableHtml += '<tr>' + cells.map(c => `<td>${inline(c.trim())}</td>`).join('') + '</tr>';
-      continue;
-    } else if (inTable) {
-      html += tableHtml + '</table>';
-      tableHtml = ''; inTable = false;
-    }
-
-    // Numbered list
-    if (line.match(/^\d+\.\s+/)) {
-      if (!inList || listType !== 'ol') {
-        if (inList) html += `</${listType}>`;
-        html += '<ol>'; inList = true; listType = 'ol';
-      }
-      html += `<li>${inline(line.replace(/^\d+\.\s+/, ''))}</li>`;
-      continue;
-    }
-
-    // Bullet list
-    if (line.match(/^[\*\-]\s+/)) {
-      if (!inList || listType !== 'ul') {
-        if (inList) html += `</${listType}>`;
-        html += '<ul>'; inList = true; listType = 'ul';
-      }
-      html += `<li>${inline(line.replace(/^[\*\-]\s+/, ''))}</li>`;
-      continue;
-    }
-
-    // Close list on blank line
-    if (inList && line.trim() === '') {
-      html += `</${listType}>`;
-      inList = false; listType = '';
-    }
-
-    // Headers
-    if (line.startsWith('### ')) { html += `<h3>${inline(line.slice(4))}</h3>`; continue; }
-    if (line.startsWith('## '))  { html += `<h2>${inline(line.slice(3))}</h2>`; continue; }
-    if (line.startsWith('# '))   { html += `<h1>${inline(line.slice(2))}</h1>`; continue; }
-
-    // Blank line
-    if (line.trim() === '') { html += '<br>'; continue; }
-
-    // Normal paragraph line
-    html += `<p>${inline(line)}</p>`;
-  }
-
-  // Close any unclosed tags
-  if (inTable) html += tableHtml + '</table>';
-  if (inList)  html += `</${listType}>`;
-
-  return html;
-}
-
-function inline(text) {
-  return String(text || '')
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/`(.+?)`/g, '<code>$1</code>');
+  return text.replace(/\n/g, "<br>");
 }
 
-function showToast(msg) {
-  alert(msg);
+function escHtml(text) {
+  const map = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" };
+  return text.replace(/[&<>"']/g, m => map[m]);
 }
 
-// ── Analytics ────────────────────────────────────────────────────────
-async function showAnalytics() {
+function showAnalytics() {
   showScreen("analytics");
   document.getElementById("topbar-title").textContent = "System Analytics";
-  await loadAnalytics();
+  loadAnalytics();
 }
 
-async function loadAnalytics() {
-  try {
-    const res = await fetch(`${API_BASE}/analytics`);
-    const data = await res.json();
-
-    if (data.total_queries === 0) {
-      document.getElementById("stat-total").textContent = "0";
-      document.getElementById("stat-verified").textContent = "—";
-      document.getElementById("stat-latency").textContent = "—";
-      document.getElementById("stat-ood").textContent = "—";
-      document.getElementById("stat-sources").textContent = "—";
-      document.getElementById("chart-stages").innerHTML = "<p class='no-data'>No queries yet. Start asking questions.</p>";
-      document.getElementById("chart-entities").innerHTML = "<p class='no-data'>No entity data yet.</p>";
-      document.getElementById("chart-latency").innerHTML = "<p class='no-data'>No latency data yet.</p>";
-      return;
-    }
-
-    // Stat cards
-    document.getElementById("stat-total").textContent = data.total_queries;
-    document.getElementById("stat-verified").textContent = data.verified_ratio + "%";
-    document.getElementById("stat-latency").textContent = data.avg_latency_ms + "ms";
-    document.getElementById("stat-ood").textContent = data.out_of_domain_rate + "%";
-    document.getElementById("stat-sources").textContent = data.avg_sources;
-
-    // Stage distribution bar chart
-    renderBarChart("chart-stages", data.stage_distribution);
-
-    // Entity frequency bar chart
-    renderBarChart("chart-entities", data.entity_type_frequency);
-
-    // Latency sparkline
-    renderSparkline("chart-latency", data.recent_latencies);
-
-  } catch (err) {
-    document.getElementById("chart-stages").innerHTML = "<p class='no-data'>Could not load analytics.</p>";
-  }
+function loadAnalytics() {
+  fetch(`${API_BASE}/analytics`)
+    .then(r => r.json())
+    .then(data => {
+      document.getElementById("stat-total").textContent = data.total_queries || "—";
+      document.getElementById("stat-verified").textContent = (data.verified_rate || 0).toFixed(1) + "%";
+      document.getElementById("stat-latency").textContent = Math.round(data.avg_latency_ms || 0) + "ms";
+      document.getElementById("stat-ood").textContent = (data.ood_rate || 0).toFixed(1) + "%";
+      document.getElementById("stat-sources").textContent = (data.avg_sources || 0).toFixed(1);
+    })
+    .catch(err => console.error("Analytics load failed:", err));
 }
-
-function renderBarChart(containerId, data) {
-  const container = document.getElementById(containerId);
-  if (!data || Object.keys(data).length === 0) {
-    container.innerHTML = "<p class='no-data'>No data yet.</p>";
-    return;
-  }
-
-  const max = Math.max(...Object.values(data));
-  const html = Object.entries(data)
-    .sort((a, b) => b[1] - a[1])
-    .map(([label, value]) => `
-      <div class="bar-row">
-        <span class="bar-label">${escHtml(label)}</span>
-        <div class="bar-track">
-          <div class="bar-fill" style="width: ${Math.round(value / max * 100)}%"></div>
-        </div>
-        <span class="bar-value">${value}</span>
-      </div>
-    `).join("");
-
-  container.innerHTML = `<div class="bar-chart">${html}</div>`;
-}
-
-function renderSparkline(containerId, latencies) {
-  const container = document.getElementById(containerId);
-  if (!latencies || latencies.length === 0) {
-    container.innerHTML = "<p class='no-data'>No data yet.</p>";
-    return;
-  }
-
-  const max = Math.max(...latencies);
-  const min = Math.min(...latencies);
-  const range = max - min || 1;
-  const height = 60;
-  const width = 300;
-  const step = width / (latencies.length - 1 || 1);
-
-  const points = latencies.map((v, i) => {
-    const x = i * step;
-    const y = height - ((v - min) / range) * height;
-    return `${x},${y}`;
-  }).join(" ");
-
-  container.innerHTML = `
-    <svg viewBox="0 0 ${width} ${height}" class="sparkline">
-      <polyline points="${points}" fill="none" stroke="var(--accent)" stroke-width="2"/>
-    </svg>
-    <div class="sparkline-range">
-      <span>${Math.round(min)}ms min</span>
-      <span>${Math.round(max)}ms max</span>
-    </div>
-  `;
-}
-
-function escHtml(text) {
-  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
-  return String(text).replace(/[&<>"']/g, m => map[m]);
-}

frontend/app_old.js

@@ -0,0 +1,492 @@
+// ── Config ──────────────────────────────────────────────────────
+const API_BASE = ""; // "" = same origin (HF Spaces). "http://localhost:8000" for local dev.
+
+// ── State ───────────────────────────────────────────────────────
+let sessions = [];          // [{id, title, messages:[]}]
+let activeSessionId = null;
+let isLoading = false;
+let sidebarCollapsed = localStorage.getItem("sidebarCollapsed") === "true";
+
+// ── Init ────────────────────────────────────────────────────────
+const textarea  = document.getElementById("query-input");
+const sendBtn   = document.getElementById("send-btn");
+const msgsList  = document.getElementById("messages-list");
+
+// Apply sidebar collapsed state on load
+if (sidebarCollapsed) {
+  document.getElementById("sidebar").classList.add("collapsed");
+}
+
+textarea.addEventListener("input", () => {
+  textarea.style.height = "auto";
+  textarea.style.height = Math.min(textarea.scrollHeight, 140) + "px";
+});
+
+textarea.addEventListener("keydown", e => {
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitQuery(); }
+});
+
+// ── Screen switching ─────────────────────────────────────────────
+function showScreen(name) {
+  document.querySelectorAll(".screen").forEach(s => s.classList.remove("active"));
+  document.getElementById("screen-" + name).classList.add("active");
+}
+
+// ── Sidebar toggle ───────────────────────────────────────────────
+function toggleSidebar() {
+  const sidebar = document.getElementById("sidebar");
+  sidebarCollapsed = !sidebarCollapsed;
+  sidebar.classList.toggle("collapsed");
+  localStorage.setItem("sidebarCollapsed", sidebarCollapsed);
+}
+
+// ── Session management ───────────────────────────────────────────
+function createSession(firstQuery) {
+  const id = Date.now();
+  const title = firstQuery.length > 45
+    ? firstQuery.substring(0, 45) + "…"
+    : firstQuery;
+  const session = { id, title, messages: [] };
+  sessions.unshift(session);
+  activeSessionId = id;
+  renderSessionsList();
+  return session;
+}
+
+function getActiveSession() {
+  return sessions.find(s => s.id === activeSessionId);
+}
+
+function switchSession(id) {
+  activeSessionId = id;
+  renderSessionsList();
+  renderMessages();
+  showScreen("chat");
+  const session = getActiveSession();
+  document.getElementById("topbar-title").textContent = session.title;
+}
+
+function newChat() {
+  activeSessionId = null;
+  msgsList.innerHTML = "";
+  showScreen("welcome");
+  document.getElementById("topbar-title").textContent = "New Research Session";
+  renderSessionsList();
+  textarea.focus();
+}
+
+function renderSessionsList() {
+  const list = document.getElementById("sessions-list");
+  if (sessions.length === 0) {
+    list.innerHTML = '<div class="sessions-empty">No sessions yet</div>';
+    return;
+  }
+  list.innerHTML = sessions.map(s => `
+    <div class="session-item ${s.id === activeSessionId ? "active" : ""}"
+         onclick="switchSession(${s.id})">
+      <div class="session-dot"></div>
+      <span class="session-label">${escHtml(s.title)}</span>
+      <span class="session-count">${s.messages.filter(m => m.role === "ai").length}</span>
+    </div>
+  `).join("");
+}
+
+function renderMessages() {
+  const session = getActiveSession();
+  if (!session) return;
+  msgsList.innerHTML = "";
+  session.messages.forEach(msg => {
+    if (msg.role === "user") appendUserBubble(msg.text, false);
+    else if (msg.role === "ai") appendAIBubble(msg.data, false);
+    else if (msg.role === "error") appendErrorBubble(msg.text, false);
+  });
+  scrollBottom();
+}
+
+// ── Submit ───────────────────────────────────────────────────────
+async function submitQuery() {
+  const query = textarea.value.trim();
+  if (!query || isLoading) return;
+  if (query.length < 10) { showToast("Query too short — minimum 10 characters."); return; }
+  if (query.length > 1000) { showToast("Query too long — maximum 1000 characters."); return; }
+
+  if (!activeSessionId) {
+    createSession(query);
+    showScreen("chat");
+    document.getElementById("topbar-title").textContent = getActiveSession().title;
+  }
+
+  getActiveSession().messages.push({ role: "user", text: query });
+
+  textarea.value = "";
+  textarea.style.height = "auto";
+
+  appendUserBubble(query);
+  const loaderId = appendLoader();
+  setLoading(true);
+
+  try {
+    const res = await fetch(`${API_BASE}/query`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        query,
+        session_id: activeSessionId ? String(activeSessionId) : "default"
+      })
+    });
+
+    const data = await res.json();
+    removeLoader(loaderId);
+
+    if (!res.ok) {
+      const msg = data.detail || "Something went wrong. Please try again.";
+      getActiveSession().messages.push({ role: "error", text: msg });
+      appendErrorBubble(msg);
+    } else {
+      getActiveSession().messages.push({ role: "ai", data });
+      appendAIBubble(data);
+    }
+
+  } catch (err) {
+    removeLoader(loaderId);
+    const msg = "Could not reach the server. The Space may be waking up — try again in 30 seconds.";
+    getActiveSession().messages.push({ role: "error", text: msg });
+    appendErrorBubble(msg);
+  }
+
+  setLoading(false);
+  scrollBottom();
+}
+
+function usesuggestion(el) {
+  textarea.value = el.textContent;
+  textarea.dispatchEvent(new Event("input"));
+  submitQuery();
+}
+
+// ── Bubble renderers ─────────────────────────────────────────────
+function appendUserBubble(text, scroll = true) {
+  const div = document.createElement("div");
+  div.className = "msg msg-user";
+  div.innerHTML = `<div class="bubble-user">${escHtml(text)}</div>`;
+  msgsList.appendChild(div);
+  if (scroll) scrollBottom();
+}
+
+function appendAIBubble(data, scroll = true) {
+  const verified = data.verification_status === true || data.verification_status === "verified";
+  const badgeClass = verified ? "verified" : "unverified";
+  const badgeText  = verified ? "✓ Verified" : "⚠ Unverified";
+
+  const truncNote = data.truncated
+    ? `<div class="truncated-note">3 of 5 retrieved documents used — context limit reached.</div>`
+    : "";
+
+  const sourceCount = (data.sources || []).length;
+  const sourcesBtn = sourceCount > 0
+    ? `<button class="sources-btn" onclick='openSources(${escAttr(JSON.stringify(data.sources))})'>
+         📄 ${sourceCount} Source${sourceCount > 1 ? "s" : ""}
+       </button>`
+    : "";
+
+  const latency = data.latency_ms
+    ? `<span class="latency-label">${Math.round(data.latency_ms)}ms</span>`
+    : "";
+
+  const div = document.createElement("div");
+  div.className = "msg msg-ai";
+  div.innerHTML = `
+    <div class="bubble-ai">
+      <div class="bubble-answer">${formatAnswer(data.answer)}</div>
+      ${truncNote}
+      <div class="bubble-meta">
+        <span class="verify-badge ${badgeClass}">${badgeText}</span>
+        ${sourcesBtn}
+        ${latency}
+      </div>
+    </div>`;
+  msgsList.appendChild(div);
+  if (scroll) scrollBottom();
+}
+
+function appendErrorBubble(text, scroll = true) {
+  const div = document.createElement("div");
+  div.className = "msg msg-ai";
+  div.innerHTML = `<div class="bubble-error">⚠ ${escHtml(text)}</div>`;
+  msgsList.appendChild(div);
+  if (scroll) scrollBottom();
+}
+
+function appendLoader() {
+  const id = "loader-" + Date.now();
+  const div = document.createElement("div");
+  div.id = id;
+  div.className = "msg msg-ai";
+  div.innerHTML = `
+    <div class="bubble-ai bubble-loading">
+      <div class="dots"><span></span><span></span><span></span></div>
+      Searching judgments…
+    </div>`;
+  msgsList.appendChild(div);
+  scrollBottom();
+  return id;
+}
+
+function removeLoader(id) {
+  const el = document.getElementById(id);
+  if (el) el.remove();
+}
+
+// ── Sources panel ────────────────────────────────────────────────
+function openSources(sources) {
+  const panel   = document.getElementById("sources-panel");
+  const overlay = document.getElementById("sources-overlay");
+  const body    = document.getElementById("sources-panel-body");
+
+  body.innerHTML = sources.map((s, i) => {
+    const meta    = s.meta || {};
+    const id      = meta.judgment_id || "Unknown";
+    const year    = meta.year ? ` · ${meta.year}` : "";
+    const excerpt = (s.text || "").trim().substring(0, 400);
+    return `
+      <div class="source-card">
+        <div class="source-num">${i + 1}</div>
+        <div class="source-id">${escHtml(id)}</div>
+        <div class="source-year">Supreme Court of India${year}</div>
+        <div class="source-excerpt">${escHtml(excerpt)}${s.text && s.text.length > 400 ? "…" : ""}</div>
+      </div>`;
+  }).join("");
+
+  panel.classList.add("open");
+  overlay.classList.add("open");
+  requestAnimationFrame(() => { panel.style.transform = "translateX(0)"; });
+}
+
+function closeSourcesPanel() {
+  const panel   = document.getElementById("sources-panel");
+  const overlay = document.getElementById("sources-overlay");
+  panel.classList.remove("open");
+  overlay.classList.remove("open");
+}
+
+// ── Helpers ──────────────────────────────────────────────────────
+function setLoading(state) {
+  isLoading = state;
+  sendBtn.disabled = state;
+  const pill = document.getElementById("status-pill");
+  const text = document.getElementById("status-text");
+  if (state) {
+    pill.classList.add("loading");
+    text.textContent = "Searching…";
+  } else {
+    pill.classList.remove("loading");
+    text.textContent = "Ready";
+  }
+}
+
+function scrollBottom() {
+  const c = document.querySelector(".messages-container");
+  if (c) c.scrollTop = c.scrollHeight;
+}
+
+function escHtml(str) {
+  return String(str || "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function escAttr(str) {
+  return String(str || "").replace(/'/g, "&#39;").replace(/"/g, "&quot;");
+}
+
+// ── Answer formatter ─────────────────────────────────────────────
+function formatAnswer(text) {
+  if (!text) return "";
+  text = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
+  const lines = text.split('\n');
+  let html = '';
+  let inTable = false;
+  let tableHtml = '';
+  let inList = false;
+  let listType = '';
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // Table row
+    if (line.trim().startsWith('|')) {
+      if (line.match(/^\|[\s\-|]+\|$/)) continue; // skip separator rows
+      if (!inTable) { tableHtml = '<table class="answer-table">'; inTable = true; }
+      const cells = line.split('|').filter((c, idx, a) => idx > 0 && idx < a.length - 1);
+      tableHtml += '<tr>' + cells.map(c => `<td>${inline(c.trim())}</td>`).join('') + '</tr>';
+      continue;
+    } else if (inTable) {
+      html += tableHtml + '</table>';
+      tableHtml = ''; inTable = false;
+    }
+
+    // Numbered list
+    if (line.match(/^\d+\.\s+/)) {
+      if (!inList || listType !== 'ol') {
+        if (inList) html += `</${listType}>`;
+        html += '<ol>'; inList = true; listType = 'ol';
+      }
+      html += `<li>${inline(line.replace(/^\d+\.\s+/, ''))}</li>`;
+      continue;
+    }
+
+    // Bullet list
+    if (line.match(/^[\*\-]\s+/)) {
+      if (!inList || listType !== 'ul') {
+        if (inList) html += `</${listType}>`;
+        html += '<ul>'; inList = true; listType = 'ul';
+      }
+      html += `<li>${inline(line.replace(/^[\*\-]\s+/, ''))}</li>`;
+      continue;
+    }
+
+    // Close list on blank line
+    if (inList && line.trim() === '') {
+      html += `</${listType}>`;
+      inList = false; listType = '';
+    }
+
+    // Headers
+    if (line.startsWith('### ')) { html += `<h3>${inline(line.slice(4))}</h3>`; continue; }
+    if (line.startsWith('## '))  { html += `<h2>${inline(line.slice(3))}</h2>`; continue; }
+    if (line.startsWith('# '))   { html += `<h1>${inline(line.slice(2))}</h1>`; continue; }
+
+    // Blank line
+    if (line.trim() === '') { html += '<br>'; continue; }
+
+    // Normal paragraph line
+    html += `<p>${inline(line)}</p>`;
+  }
+
+  // Close any unclosed tags
+  if (inTable) html += tableHtml + '</table>';
+  if (inList)  html += `</${listType}>`;
+
+  return html;
+}
+
+function inline(text) {
+  return String(text || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*(.+?)\*/g, '<em>$1</em>')
+    .replace(/`(.+?)`/g, '<code>$1</code>');
+}
+
+function showToast(msg) {
+  alert(msg);
+}
+
+// ── Analytics ────────────────────────────────────────────────────────
+async function showAnalytics() {
+  showScreen("analytics");
+  document.getElementById("topbar-title").textContent = "System Analytics";
+  await loadAnalytics();
+}
+
+async function loadAnalytics() {
+  try {
+    const res = await fetch(`${API_BASE}/analytics`);
+    const data = await res.json();
+
+    if (data.total_queries === 0) {
+      document.getElementById("stat-total").textContent = "0";
+      document.getElementById("stat-verified").textContent = "—";
+      document.getElementById("stat-latency").textContent = "—";
+      document.getElementById("stat-ood").textContent = "—";
+      document.getElementById("stat-sources").textContent = "—";
+      document.getElementById("chart-stages").innerHTML = "<p class='no-data'>No queries yet. Start asking questions.</p>";
+      document.getElementById("chart-entities").innerHTML = "<p class='no-data'>No entity data yet.</p>";
+      document.getElementById("chart-latency").innerHTML = "<p class='no-data'>No latency data yet.</p>";
+      return;
+    }
+
+    // Stat cards
+    document.getElementById("stat-total").textContent = data.total_queries;
+    document.getElementById("stat-verified").textContent = data.verified_ratio + "%";
+    document.getElementById("stat-latency").textContent = data.avg_latency_ms + "ms";
+    document.getElementById("stat-ood").textContent = data.out_of_domain_rate + "%";
+    document.getElementById("stat-sources").textContent = data.avg_sources;
+
+    // Stage distribution bar chart
+    renderBarChart("chart-stages", data.stage_distribution);
+
+    // Entity frequency bar chart
+    renderBarChart("chart-entities", data.entity_type_frequency);
+
+    // Latency sparkline
+    renderSparkline("chart-latency", data.recent_latencies);
+
+  } catch (err) {
+    document.getElementById("chart-stages").innerHTML = "<p class='no-data'>Could not load analytics.</p>";
+  }
+}
+
+function renderBarChart(containerId, data) {
+  const container = document.getElementById(containerId);
+  if (!data || Object.keys(data).length === 0) {
+    container.innerHTML = "<p class='no-data'>No data yet.</p>";
+    return;
+  }
+
+  const max = Math.max(...Object.values(data));
+  const html = Object.entries(data)
+    .sort((a, b) => b[1] - a[1])
+    .map(([label, value]) => `
+      <div class="bar-row">
+        <span class="bar-label">${escHtml(label)}</span>
+        <div class="bar-track">
+          <div class="bar-fill" style="width: ${Math.round(value / max * 100)}%"></div>
+        </div>
+        <span class="bar-value">${value}</span>
+      </div>
+    `).join("");
+
+  container.innerHTML = `<div class="bar-chart">${html}</div>`;
+}
+
+function renderSparkline(containerId, latencies) {
+  const container = document.getElementById(containerId);
+  if (!latencies || latencies.length === 0) {
+    container.innerHTML = "<p class='no-data'>No data yet.</p>";
+    return;
+  }
+
+  const max = Math.max(...latencies);
+  const min = Math.min(...latencies);
+  const range = max - min || 1;
+  const height = 60;
+  const width = 300;
+  const step = width / (latencies.length - 1 || 1);
+
+  const points = latencies.map((v, i) => {
+    const x = i * step;
+    const y = height - ((v - min) / range) * height;
+    return `${x},${y}`;
+  }).join(" ");
+
+  container.innerHTML = `
+    <svg viewBox="0 0 ${width} ${height}" class="sparkline">
+      <polyline points="${points}" fill="none" stroke="var(--accent)" stroke-width="2"/>
+    </svg>
+    <div class="sparkline-range">
+      <span>${Math.round(min)}ms min</span>
+      <span>${Math.round(max)}ms max</span>
+    </div>
+  `;
+}
+
+function escHtml(text) {
+  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+  return String(text).replace(/[&<>"']/g, m => map[m]);
+}

frontend/index.html

@@ -1,118 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>NyayaSetu — Indian Legal Research</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/static/style.css">
+  <link rel="stylesheet" href="/static/style_new.css">
 </head>
 <body>
-
-<div class="app-layout">
-
-  <!-- ── SIDEBAR ── -->
+<div class="app-container">
+  
+  <!-- SIDEBAR -->
   <aside class="sidebar" id="sidebar">
-    <div class="sidebar-brand">
-      <div class="brand-mark">⚖</div>
-      <div class="brand-text">
-        <span class="brand-name">NyayaSetu</span>
-        <span class="brand-sub">Legal Research</span>
+    <div class="sidebar-header">
+      <div class="brand">
+        <span class="brand-icon">⚖</span>
+        <div class="brand-text">
+          <div class="brand-name">NyayaSetu</div>
+          <div class="brand-sub">Legal Research</div>
+        </div>
       </div>
-      <button class="sidebar-toggle" onclick="toggleSidebar()" title="Toggle sidebar">
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <line x1="3" y1="6" x2="21" y2="6"></line>
-          <line x1="3" y1="12" x2="21" y2="12"></line>
-          <line x1="3" y1="18" x2="21" y2="18"></line>
-        </svg>
-      </button>
+      <button class="sidebar-toggle" onclick="toggleSidebar()">☰</button>
     </div>
 
-    <button class="new-chat-btn" onclick="newChat()">
-      <span class="new-chat-icon">＋</span>
-      New Research Session
-    </button>
-
-    <button class="analytics-btn" onclick="showAnalytics()">
-      <span class="analytics-icon">📊</span>
-      System Analytics
-    </button>
+    <button class="btn-primary" onclick="newChat()">+ New Session</button>
+    <button class="btn-secondary" onclick="showAnalytics()">📊 Analytics</button>
+    <button class="btn-secondary" onclick="window.location.href='/court/ui'">⚖ Moot Court</button>
 
-    <button class="analytics-btn" onclick="window.location.href='/court/ui'">
-      <span class="analytics-icon">⚖️</span>
-      Moot Court
-    </button>
-
-    <div class="sidebar-section-label">SESSIONS</div>
-    <div id="sessions-list" class="sessions-list">
-      <div class="sessions-empty">No sessions yet</div>
+    <div class="sessions-header">SESSIONS</div>
+    <div class="sessions-list" id="sessions-list">
+      <div class="sessions-empty">No sessions</div>
     </div>
 
     <div class="sidebar-footer">
-      <div class="footer-disclaimer">
-        <span class="disclaimer-icon">⚠</span>
-        <span>Not legal advice. Consult a qualified advocate.</span>
-      </div>
-      <div class="footer-meta">
-        Supreme Court of India · 1950–2024<br>
-        443,598 judgment chunks indexed
-      </div>
+      <p class="disclaimer">⚠ Not legal advice</p>
+      <p class="meta">Supreme Court of India · 1950–2024</p>
     </div>
   </aside>
 
-  <!-- ── MAIN ── -->
-  <div class="main-wrapper">
-
-    <!-- Top bar -->
+  <!-- MAIN CONTENT -->
+  <main class="main-content">
     <header class="topbar">
-      <div class="topbar-left">
-        <span class="topbar-title" id="topbar-title">New Research Session</span>
-      </div>
-      <div class="topbar-right">
-        <div class="status-pill" id="status-pill">
-          <span class="status-dot"></span>
-          <span id="status-text">Ready</span>
-        </div>
+      <h1 class="topbar-title" id="topbar-title">New Research Session</h1>
+      <div class="status-pill" id="status-pill">
+        <span class="status-dot"></span>
+        <span id="status-text">Ready</span>
       </div>
     </header>
 
-    <!-- ── WELCOME SCREEN ── -->
-    <div id="screen-welcome" class="screen screen-welcome active">
-      <div class="welcome-inner">
-        <div class="welcome-emblem">⚖</div>
-        <h1 class="welcome-heading">Ask Indian Law</h1>
-        <p class="welcome-body">
-          Search across 26,688 Supreme Court judgments.<br>
-          Every answer is cited. Every source is traceable.
-        </p>
-        <div class="suggestion-grid">
-          <button class="suggestion-pill" onclick="usesuggestion(this)">What are fundamental rights under the Constitution?</button>
-          <button class="suggestion-pill" onclick="usesuggestion(this)">What is the right to privacy under Article 21?</button>
-          <button class="suggestion-pill" onclick="usesuggestion(this)">How does the Supreme Court define bail in non-bailable offences?</button>
-          <button class="suggestion-pill" onclick="usesuggestion(this)">What is the basic structure doctrine?</button>
-          <button class="suggestion-pill" onclick="usesuggestion(this)">What does Article 15 prohibit?</button>
-          <button class="suggestion-pill" onclick="usesuggestion(this)">How is freedom of speech limited under Article 19?</button>
+    <!-- WELCOME SCREEN -->
+    <section id="screen-welcome" class="screen active">
+      <div class="welcome-container">
+        <div class="welcome-icon">⚖</div>
+        <h2>Ask Indian Law</h2>
+        <p>Search across 26,688 Supreme Court judgments.<br>Every answer is cited. Every source is traceable.</p>
+        <div class="suggestions">
+          <button class="suggestion" onclick="usesuggestion(this)">What are fundamental rights?</button>
+          <button class="suggestion" onclick="usesuggestion(this)">What is the right to privacy under Article 21?</button>
+          <button class="suggestion" onclick="usesuggestion(this)">How does the Supreme Court define bail?</button>
+          <button class="suggestion" onclick="usesuggestion(this)">What is the basic structure doctrine?</button>
+          <button class="suggestion" onclick="usesuggestion(this)">What does Article 15 prohibit?</button>
+          <button class="suggestion" onclick="usesuggestion(this)">How is freedom of speech limited?</button>
         </div>
       </div>
-    </div>
+    </section>
 
-    <!-- ── CHAT SCREEN ── -->
-    <div id="screen-chat" class="screen screen-chat">
-      <div id="messages-container" class="messages-container">
-        <div id="messages-list" class="messages-list"></div>
+    <!-- CHAT SCREEN -->
+    <section id="screen-chat" class="screen">
+      <div class="chat-area">
+        <div class="messages" id="messages-list"></div>
       </div>
-    </div>
-
-    <!-- ── ANALYTICS SCREEN ── -->
-    <div id="screen-analytics" class="screen screen-analytics">
-      <div class="analytics-inner">
-        <div class="analytics-header">
-          <h2>System Analytics</h2>
-          <p>Live metrics from inference logs</p>
-        </div>
-        
-        <div class="analytics-grid">
+    </section>
+
+    <!-- ANALYTICS SCREEN -->
+    <section id="screen-analytics" class="screen">
+      <div class="analytics-container">
+        <h2>System Analytics</h2>
+        <p>Live metrics from inference logs</p>
+        <div class="stats-grid">
           <div class="stat-card">
             <div class="stat-value" id="stat-total">—</div>
             <div class="stat-label">Total Queries</div>
@@ -127,69 +93,27 @@
           </div>
           <div class="stat-card">
             <div class="stat-value" id="stat-ood">—</div>
-            <div class="stat-label">Out-of-Domain Rate</div>
+            <div class="stat-label">Out-of-Domain</div>
           </div>
           <div class="stat-card">
             <div class="stat-value" id="stat-sources">—</div>
-            <div class="stat-label">Avg Sources / Query</div>
+            <div class="stat-label">Avg Sources</div>
           </div>
         </div>
-
-        <div class="analytics-charts">
-          <div class="chart-card">
-            <h3>Stage Distribution</h3>
-            <div id="chart-stages" class="chart-container"></div>
-          </div>
-          <div class="chart-card">
-            <h3>Entity Types Extracted</h3>
-            <div id="chart-entities" class="chart-container"></div>
-          </div>
-          <div class="chart-card">
-            <h3>Recent Query Latencies (ms)</h3>
-            <div id="chart-latency" class="chart-container"></div>
-          </div>
-        </div>
-
-        <div class="analytics-footer">
-          <button class="refresh-btn" onclick="loadAnalytics()">↻ Refresh</button>
-          <span class="analytics-note">Data from current session logs. Resets on container restart.</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- ── SOURCES PANEL ── -->
-    <div id="sources-panel" class="sources-panel">
-      <div class="sources-panel-header">
-        <span class="sources-panel-title">Sources</span>
-        <button class="sources-panel-close" onclick="closeSourcesPanel()">✕</button>
       </div>
-      <div id="sources-panel-body" class="sources-panel-body"></div>
-    </div>
-    <div id="sources-overlay" class="sources-overlay" onclick="closeSourcesPanel()"></div>
+    </section>
 
-    <!-- ── INPUT ── -->
-    <div class="input-zone">
-      <div class="input-box">
-        <textarea
-          id="query-input"
-          class="query-textarea"
-          placeholder="Ask a question about Indian law…"
-          rows="1"
-          maxlength="1000"
-        ></textarea>
-        <button id="send-btn" class="send-btn" onclick="submitQuery()">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <line x1="22" y1="2" x2="11" y2="13"></line>
-            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-          </svg>
-        </button>
+    <!-- INPUT AREA -->
+    <div class="input-area">
+      <div class="input-wrapper">
+        <textarea id="query-input" class="query-input" placeholder="Ask about Indian law..." maxlength="1000"></textarea>
+        <button id="send-btn" class="send-btn" onclick="submitQuery()">→</button>
       </div>
-      <p class="input-disclaimer">NyayaSetu is not a substitute for professional legal advice.</p>
+      <p class="disclaimer-line">Not a substitute for professional legal advice</p>
     </div>
-
-  </div>
+  </main>
 </div>
 
-<script src="/static/app.js?v=2"></script>
+<script src="/static/app_new.js"></script>
 </body>
-</html>
+</html>

frontend/index_old.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>NyayaSetu — Indian Legal Research</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+
+<div class="app-layout">
+
+  <!-- ── SIDEBAR ── -->
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebar-brand">
+      <div class="brand-mark">⚖</div>
+      <div class="brand-text">
+        <span class="brand-name">NyayaSetu</span>
+        <span class="brand-sub">Legal Research</span>
+      </div>
+      <button class="sidebar-toggle" onclick="toggleSidebar()" title="Toggle sidebar">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+
+    <button class="new-chat-btn" onclick="newChat()">
+      <span class="new-chat-icon">＋</span>
+      New Research Session
+    </button>
+
+    <button class="analytics-btn" onclick="showAnalytics()">
+      <span class="analytics-icon">📊</span>
+      System Analytics
+    </button>
+
+    <button class="analytics-btn" onclick="window.location.href='/court/ui'">
+      <span class="analytics-icon">⚖️</span>
+      Moot Court
+    </button>
+
+    <div class="sidebar-section-label">SESSIONS</div>
+    <div id="sessions-list" class="sessions-list">
+      <div class="sessions-empty">No sessions yet</div>
+    </div>
+
+    <div class="sidebar-footer">
+      <div class="footer-disclaimer">
+        <span class="disclaimer-icon">⚠</span>
+        <span>Not legal advice. Consult a qualified advocate.</span>
+      </div>
+      <div class="footer-meta">
+        Supreme Court of India · 1950–2024<br>
+        443,598 judgment chunks indexed
+      </div>
+    </div>
+  </aside>
+
+  <!-- ── MAIN ── -->
+  <div class="main-wrapper">
+
+    <!-- Top bar -->
+    <header class="topbar">
+      <div class="topbar-left">
+        <span class="topbar-title" id="topbar-title">New Research Session</span>
+      </div>
+      <div class="topbar-right">
+        <div class="status-pill" id="status-pill">
+          <span class="status-dot"></span>
+          <span id="status-text">Ready</span>
+        </div>
+      </div>
+    </header>
+
+    <!-- ── WELCOME SCREEN ── -->
+    <div id="screen-welcome" class="screen screen-welcome active">
+      <div class="welcome-inner">
+        <div class="welcome-emblem">⚖</div>
+        <h1 class="welcome-heading">Ask Indian Law</h1>
+        <p class="welcome-body">
+          Search across 26,688 Supreme Court judgments.<br>
+          Every answer is cited. Every source is traceable.
+        </p>
+        <div class="suggestion-grid">
+          <button class="suggestion-pill" onclick="usesuggestion(this)">What are fundamental rights under the Constitution?</button>
+          <button class="suggestion-pill" onclick="usesuggestion(this)">What is the right to privacy under Article 21?</button>
+          <button class="suggestion-pill" onclick="usesuggestion(this)">How does the Supreme Court define bail in non-bailable offences?</button>
+          <button class="suggestion-pill" onclick="usesuggestion(this)">What is the basic structure doctrine?</button>
+          <button class="suggestion-pill" onclick="usesuggestion(this)">What does Article 15 prohibit?</button>
+          <button class="suggestion-pill" onclick="usesuggestion(this)">How is freedom of speech limited under Article 19?</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── CHAT SCREEN ── -->
+    <div id="screen-chat" class="screen screen-chat">
+      <div id="messages-container" class="messages-container">
+        <div id="messages-list" class="messages-list"></div>
+      </div>
+    </div>
+
+    <!-- ── ANALYTICS SCREEN ── -->
+    <div id="screen-analytics" class="screen screen-analytics">
+      <div class="analytics-inner">
+        <div class="analytics-header">
+          <h2>System Analytics</h2>
+          <p>Live metrics from inference logs</p>
+        </div>
+        
+        <div class="analytics-grid">
+          <div class="stat-card">
+            <div class="stat-value" id="stat-total">—</div>
+            <div class="stat-label">Total Queries</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value" id="stat-verified">—</div>
+            <div class="stat-label">Verified Rate</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value" id="stat-latency">—</div>
+            <div class="stat-label">Avg Latency</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value" id="stat-ood">—</div>
+            <div class="stat-label">Out-of-Domain Rate</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-value" id="stat-sources">—</div>
+            <div class="stat-label">Avg Sources / Query</div>
+          </div>
+        </div>
+
+        <div class="analytics-charts">
+          <div class="chart-card">
+            <h3>Stage Distribution</h3>
+            <div id="chart-stages" class="chart-container"></div>
+          </div>
+          <div class="chart-card">
+            <h3>Entity Types Extracted</h3>
+            <div id="chart-entities" class="chart-container"></div>
+          </div>
+          <div class="chart-card">
+            <h3>Recent Query Latencies (ms)</h3>
+            <div id="chart-latency" class="chart-container"></div>
+          </div>
+        </div>
+
+        <div class="analytics-footer">
+          <button class="refresh-btn" onclick="loadAnalytics()">↻ Refresh</button>
+          <span class="analytics-note">Data from current session logs. Resets on container restart.</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── SOURCES PANEL ── -->
+    <div id="sources-panel" class="sources-panel">
+      <div class="sources-panel-header">
+        <span class="sources-panel-title">Sources</span>
+        <button class="sources-panel-close" onclick="closeSourcesPanel()">✕</button>
+      </div>
+      <div id="sources-panel-body" class="sources-panel-body"></div>
+    </div>
+    <div id="sources-overlay" class="sources-overlay" onclick="closeSourcesPanel()"></div>
+
+    <!-- ── INPUT ── -->
+    <div class="input-zone">
+      <div class="input-box">
+        <textarea
+          id="query-input"
+          class="query-textarea"
+          placeholder="Ask a question about Indian law…"
+          rows="1"
+          maxlength="1000"
+        ></textarea>
+        <button id="send-btn" class="send-btn" onclick="submitQuery()">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+          </svg>
+        </button>
+      </div>
+      <p class="input-disclaimer">NyayaSetu is not a substitute for professional legal advice.</p>
+    </div>
+
+  </div>
+</div>
+
+<script src="/static/app.js?v=2"></script>
+</body>
+</html>

frontend/style.css

@@ -1,29 +1,24 @@
-/* ── Reset & Variables ── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+/* ── RESET & CORE ── */
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
 :root {
-  --navy:        #0f1724;
-  --navy-2:      #161f30;
-  --navy-3:      #1c2840;
-  --navy-4:      #243050;
-  --gold:        #c8a84b;
-  --gold-dim:    #9a7d34;
-  --gold-glow:   rgba(200,168,75,0.15);
-  --text-1:      #e8e2d4;
-  --text-2:      #9ba8bc;
-  --text-3:      #576070;
-  --border:      rgba(255,255,255,0.07);
+  --navy: #0f1724;
+  --navy-2: #161f30;
+  --navy-3: #1c2840;
+  --navy-4: #243050;
+  --gold: #c8a84b;
+  --gold-dim: #9a7d34;
+  --gold-glow: rgba(200,168,75,0.15);
+  --text-1: #e8e2d4;
+  --text-2: #9ba8bc;
+  --text-3: #576070;
+  --border: rgba(255,255,255,0.07);
   --border-gold: rgba(200,168,75,0.3);
-  --red-soft:    #e05252;
-  --green-soft:  #4caf82;
-  --sidebar-w:   272px;
-  --topbar-h:    56px;
-  --input-h:     96px;
-  --radius:      12px;
-  --transition:  0.2s ease;
+  --green: #4caf82;
+  --red: #e05252;
 }
 
-html { height: 100%; }
+html, body { height: 100%; }
 
 body {
   font-family: 'DM Sans', sans-serif;
@@ -31,27 +26,25 @@ body {
   color: var(--text-1);
   font-size: 14px;
   line-height: 1.6;
-  min-height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
-/* ── Layout ── */
-.app-layout {
+/* ── LAYOUT ── */
+.app-container {
   display: flex;
-  min-height: 100vh;
-  overflow: visible;
+  height: 100vh;
+  overflow: hidden;
 }
 
-/* ── Sidebar ── */
+/* ── SIDEBAR ── */
 .sidebar {
-  width: var(--sidebar-w);
+  width: 272px;
   background: var(--navy-2);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
-  flex-shrink: 0;
-  overflow: hidden;
+  padding: 16px;
+  gap: 12px;
+  overflow-y: auto;
   transition: width 0.3s ease;
 }
 
@@ -60,116 +53,70 @@ body {
 }
 
 .sidebar.collapsed .brand-text,
-.sidebar.collapsed .new-chat-btn span:not(.new-chat-icon),
-.sidebar.collapsed .sidebar-section-label,
-.sidebar.collapsed .session-label,
-.sidebar.collapsed .session-count,
-.sidebar.collapsed .footer-disclaimer,
-.sidebar.collapsed .footer-meta {
-  display: none;
-}
-
-.sidebar.collapsed .new-chat-btn {
-  width: calc(100% - 16px);
-  margin: 12px 8px;
-  padding: 8px;
-  justify-content: center;
-}
-
-.sidebar.collapsed .analytics-btn {
-  width: calc(100% - 16px);
-  margin: 0 8px 8px;
-  padding: 10px 8px;
-  justify-content: center;
-}
-
-.sidebar.collapsed .new-chat-icon,
-.sidebar.collapsed .analytics-icon {
-  margin: 0;
-}
-
-.sidebar.collapsed .sessions-list {
-  padding: 0 8px;
-}
-
-.sidebar.collapsed .session-item {
-  padding: 9px 10px;
-  justify-content: center;
-}
-
+.sidebar.collapsed .btn-primary span,
+.sidebar.collapsed .btn-secondary span,
+.sidebar.collapsed .sessions-header,
 .sidebar.collapsed .sidebar-footer {
-  padding: 8px 8px;
+  display: none;
 }
 
-.sidebar-brand {
+.sidebar-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 16px 16px 12px;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 12px;
   border-bottom: 1px solid var(--border);
-  position: relative;
 }
 
-.sidebar-toggle {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: var(--text-3);
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 6px;
+.brand {
   display: flex;
   align-items: center;
-  justify-content: center;
-  transition: color var(--transition), background var(--transition);
-}
-
-.sidebar-toggle:hover {
-  color: var(--text-1);
-  background: var(--navy-3);
+  gap: 10px;
+  flex: 1;
 }
 
-.brand-mark {
-  width: 38px;
-  height: 38px;
-  background: var(--gold-glow);
-  border: 1px solid var(--border-gold);
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  color: var(--gold);
-  flex-shrink: 0;
+.brand-icon {
+  font-size: 24px;
 }
 
 .brand-name {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: var(--gold);
-  display: block;
   line-height: 1.1;
 }
 
 .brand-sub {
   font-size: 10px;
   color: var(--text-3);
-  display: block;
-  letter-spacing: 0.8px;
   text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-.new-chat-btn {
-  margin: 12px 12px 8px;
-  padding: 8px 12px;
-  background: var(--gold-glow);
-  border: 1px solid var(--border-gold);
+.sidebar-toggle {
+  background: none;
+  border: none;
+  color: var(--text-2);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.sidebar-toggle:hover {
+  background: var(--navy-3);
+  color: var(--text-1);
+}
+
+/* ── BUTTONS ── */
+.btn-primary, .btn-secondary {
+  width: 100%;
+  padding: 10px 12px;
   border-radius: 8px;
-  color: var(--gold);
+  border: 1px solid var(--border);
   font-family: 'DM Sans', sans-serif;
   font-size: 12px;
   font-weight: 500;
@@ -177,129 +124,111 @@ body {
   display: flex;
   align-items: center;
   gap: 6px;
-  transition: background var(--transition), border-color var(--transition);
-  width: calc(100% - 24px);
+  transition: all 0.2s ease;
+}
+
+.btn-primary {
+  background: var(--gold-glow);
+  border-color: var(--border-gold);
+  color: var(--gold);
 }
 
-.new-chat-btn:hover {
-  background: rgba(200,168,75,0.22);
+.btn-primary:hover {
+  background: rgba(200,168,75,0.25);
   border-color: var(--gold);
 }
 
-.new-chat-icon { font-size: 16px; font-weight: 300; }
+.btn-secondary {
+  background: transparent;
+  color: var(--text-2);
+}
+
+.btn-secondary:hover {
+  background: var(--navy-3);
+  border-color: var(--border-gold);
+  color: var(--text-1);
+  transform: none;
+}
 
-.sidebar-section-label {
-  padding: 8px 16px 4px;
+/* ── SESSIONS ── */
+.sessions-header {
   font-size: 9px;
   font-weight: 600;
   color: var(--text-3);
   letter-spacing: 1px;
+  text-transform: uppercase;
+  padding: 8px 0 4px;
+  margin-top: 8px;
 }
 
 .sessions-list {
   flex: 1;
   overflow-y: auto;
-  padding: 0 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.sessions-list::-webkit-scrollbar { width: 3px; }
-.sessions-list::-webkit-scrollbar-thumb { background: var(--navy-4); border-radius: 2px; }
-
 .sessions-empty {
-  padding: 12px 10px;
   font-size: 12px;
   color: var(--text-3);
   font-style: italic;
+  padding: 12px 8px;
 }
 
 .session-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 9px 10px;
-  border-radius: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid transparent;
+  font-size: 12px;
+  color: var(--text-2);
   cursor: pointer;
-  transition: background var(--transition);
-  margin-bottom: 2px;
-  position: relative;
+  transition: all 0.2s ease;
 }
 
-.session-item:hover { background: var(--navy-3); }
+.session-item:hover {
+  background: var(--navy-3);
+}
 
 .session-item.active {
   background: var(--navy-4);
-  border: 1px solid var(--border-gold);
-}
-
-.session-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--gold-dim);
-  flex-shrink: 0;
-}
-
-.session-item.active .session-dot { background: var(--gold); }
-
-.session-label {
-  font-size: 12px;
-  color: var(--text-2);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-}
-
-.session-item.active .session-label { color: var(--text-1); }
-
-.session-count {
-  font-size: 10px;
-  color: var(--text-3);
-  flex-shrink: 0;
+  border-color: var(--border-gold);
+  color: var(--text-1);
 }
 
 .sidebar-footer {
-  padding: 10px 14px;
+  padding-top: 12px;
   border-top: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.footer-disclaimer {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
   font-size: 10px;
   color: var(--text-3);
-  line-height: 1.3;
+  line-height: 1.4;
 }
 
-.disclaimer-icon { color: var(--gold-dim); flex-shrink: 0; }
+.disclaimer {
+  margin-bottom: 6px;
+}
 
-.footer-meta {
+.meta {
   font-size: 9px;
-  color: var(--text-3);
-  line-height: 1.4;
 }
 
-/* ── Main wrapper ── */
-.main-wrapper {
+/* ── MAIN CONTENT ── */
+.main-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  position: relative;
 }
 
-/* ── Topbar ── */
+/* ── TOPBAR ── */
 .topbar {
-  height: var(--topbar-h);
+  height: 56px;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
+  padding: 0 24px;
   flex-shrink: 0;
   background: var(--navy);
 }
@@ -309,10 +238,6 @@ body {
   font-size: 17px;
   font-weight: 600;
   color: var(--text-1);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 500px;
 }
 
 .status-pill {
@@ -331,8 +256,7 @@ body {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--green-soft);
-  transition: background var(--transition);
+  background: var(--green);
 }
 
 .status-pill.loading .status-dot {
@@ -340,408 +264,297 @@ body {
   animation: pulse 1s infinite;
 }
 
-.status-pill.error .status-dot { background: var(--red-soft); }
-
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
 }
 
-/* ── Screens ── */
+/* ── SCREENS ── */
 .screen {
   display: none;
   flex: 1;
   overflow: hidden;
-  position: relative;
 }
 
-.screen.active { display: flex; }
+.screen.active {
+  display: flex;
+}
 
-/* ── Welcome screen ── */
-.screen-welcome {
+/* ── WELCOME ── */
+.welcome-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 20px 24px;
-  flex-direction: column;
-}
-
-.welcome-inner {
-  max-width: 720px;
-  width: 100%;
+  padding: 40px 24px;
   text-align: center;
-  animation: fadeUp 0.5s ease;
 }
 
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(16px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.welcome-emblem {
-  font-size: 40px;
-  margin-bottom: 12px;
+.welcome-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
   opacity: 0.7;
 }
 
-.welcome-heading {
+.welcome-container h2 {
   font-family: 'Cormorant Garamond', serif;
-  font-size: 42px;
+  font-size: 40px;
   font-weight: 700;
+  margin-bottom: 12px;
   color: var(--text-1);
-  margin-bottom: 10px;
-  line-height: 1.1;
 }
 
-.welcome-body {
-  font-size: 14px;
+.welcome-container > p {
   color: var(--text-2);
-  line-height: 1.6;
-  margin-bottom: 24px;
+  margin-bottom: 32px;
+  max-width: 600px;
 }
 
-.suggestion-grid {
+.suggestions {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  max-width: 800px;
 }
 
-.suggestion-pill {
+.suggestion {
+  padding: 12px 14px;
   background: var(--navy-2);
   border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 10px 12px;
+  border-radius: 8px;
+  color: var(--text-2);
   font-family: 'DM Sans', sans-serif;
   font-size: 12px;
-  color: var(--text-2);
   cursor: pointer;
   text-align: left;
   line-height: 1.4;
-  transition: all var(--transition);
+  transition: all 0.2s ease;
 }
 
-.suggestion-pill:hover {
+.suggestion:hover {
   background: var(--navy-3);
   border-color: var(--border-gold);
   color: var(--text-1);
-  transform: translateY(-1px);
 }
 
-/* ── Chat screen ── */
-.screen-chat { flex-direction: column; }
-
-.messages-container {
+/* ── CHAT ── */
+.chat-area {
   flex: 1;
   overflow-y: auto;
-  overflow-x: hidden;
-  padding: 16px 0 12px;
-  width: 100%;
-  max-height: calc(100vh - var(--topbar-h) - var(--input-h) - 40px);
   display: flex;
   flex-direction: column;
-  align-items: center;
+  padding: 20px 0;
 }
 
-.messages-container::-webkit-scrollbar { width: 4px; }
-.messages-container::-webkit-scrollbar-thumb { background: var(--navy-4); border-radius: 2px; }
-
-.messages-list {
+.messages {
   width: 100%;
   max-width: 900px;
+  margin: 0 auto;
+  padding: 0 24px;
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 0 24px;
 }
 
-/* ── Message bubbles ── */
-.msg {
+.message {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  animation: fadeUp 0.3s ease;
-  width: 100%;
-  margin-bottom: 4px;
+  gap: 4px;
+  animation: slideIn 0.3s ease;
 }
 
-.msg-user { align-items: flex-end; margin: 0 0 8px 0; }
-.msg-ai { align-items: flex-start; margin: 0 0 8px 0; }
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
 
-.bubble-user {
-  background: var(--navy-4);
-  border: 1px solid var(--border);
-  border-radius: 16px 16px 4px 16px;
-  padding: 10px 14px;
+.message.user {
+  align-items: flex-end;
+}
+
+.message.ai {
+  align-items: flex-start;
+}
+
+.bubble {
+  padding: 12px 16px;
+  border-radius: 12px;
   max-width: 70%;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  word-break: break-word;
-  color: var(--text-1);
   font-size: 13px;
   line-height: 1.5;
 }
 
-.bubble-ai {
+.bubble.user {
+  background: var(--navy-4);
+  border: 1px solid var(--border);
+  color: var(--text-1);
+}
+
+.bubble.ai {
   background: var(--navy-2);
   border: 1px solid var(--border);
   border-left: 3px solid var(--gold);
-  border-radius: 4px 16px 16px 16px;
-  padding: 14px 18px;
-  max-width: 85%;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  word-break: break-word;
   color: var(--text-1);
-  font-size: 13px;
-  line-height: 1.6;
-  position: relative;
+  max-width: 85%;
+}
+
+.bubble p {
+  margin-bottom: 8px;
 }
 
-.bubble-ai p { margin-bottom: 10px; }
-.bubble-ai p:last-child { margin-bottom: 0; }
+.bubble p:last-child {
+  margin-bottom: 0;
+}
 
-/* AI bubble meta row */
 .bubble-meta {
   display: flex;
   align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin-top: 10px;
+  gap: 8px;
+  margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid var(--border);
+  font-size: 10px;
+  flex-wrap: wrap;
 }
 
-.verify-badge {
+.badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  font-size: 10px;
-  font-weight: 600;
   padding: 2px 8px;
-  border-radius: 20px;
+  border-radius: 12px;
+  font-weight: 600;
 }
 
-.verify-badge.verified {
-  background: rgba(76,175,130,0.12);
-  color: var(--green-soft);
-  border: 1px solid rgba(76,175,130,0.3);
+.badge.verified {
+  background: rgba(76,175,130,0.15);
+  color: var(--green);
 }
 
-.verify-badge.unverified {
-  background: rgba(224,82,82,0.1);
+.badge.unverified {
+  background: rgba(224,82,82,0.15);
   color: #e8a060;
-  border: 1px solid rgba(224,82,82,0.3);
 }
 
 .sources-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 10px;
-  font-weight: 500;
-  color: var(--gold);
   background: var(--gold-glow);
   border: 1px solid var(--border-gold);
-  border-radius: 20px;
-  padding: 2px 10px;
+  color: var(--gold);
+  padding: 2px 8px;
+  border-radius: 12px;
   cursor: pointer;
-  transition: background var(--transition);
+  font-size: 10px;
+  font-weight: 500;
+  transition: all 0.2s ease;
 }
 
-.sources-btn:hover { background: rgba(200,168,75,0.22); }
-
-.latency-label {
-  font-size: 10px;
-  color: var(--text-3);
-  margin-left: auto;
+.sources-btn:hover {
+  background: rgba(200,168,75,0.25);
 }
 
-.truncated-note {
-  font-size: 10px;
+.bubble.loading {
   color: var(--text-3);
-  margin-top: 6px;
-  font-style: italic;
 }
 
-/* Loading bubble */
-.bubble-loading {
+.dots {
   display: flex;
-  align-items: center;
-  gap: 10px;
-  color: var(--text-3);
-  font-size: 12px;
-  padding: 10px 14px;
+  gap: 4px;
 }
 
-.dots { display: flex; gap: 4px; }
 .dots span {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--gold);
-  animation: dotBounce 1.2s infinite;
+  animation: bounce 1.2s infinite;
 }
+
 .dots span:nth-child(2) { animation-delay: 0.2s; }
 .dots span:nth-child(3) { animation-delay: 0.4s; }
 
-@keyframes dotBounce {
+@keyframes bounce {
   0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
   30% { transform: translateY(-6px); opacity: 1; }
 }
 
-/* Error bubble */
-.bubble-error {
-  background: rgba(224,82,82,0.08);
-  border: 1px solid rgba(224,82,82,0.25);
-  border-left: 3px solid var(--red-soft);
-  border-radius: 4px 16px 16px 16px;
-  padding: 14px 18px;
-  color: #e8a0a0;
-  font-size: 13px;
-  max-width: 80%;
+/* ── ANALYTICS ── */
+.analytics-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
-/* ── Sources side panel ── */
-.sources-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.4);
-  z-index: 100;
+.analytics-container h2 {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
 }
 
-.sources-panel {
-  display: none;
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 380px;
-  height: 100vh;
-  background: var(--navy-2);
-  border-left: 1px solid var(--border);
-  z-index: 101;
-  flex-direction: column;
-  transform: translateX(100%);
-  transition: transform 0.3s ease;
+.analytics-container > p {
+  color: var(--text-2);
+  margin-bottom: 24px;
 }
 
-.sources-panel.open,
-.sources-overlay.open {
-  display: flex;
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
 }
 
-.sources-panel.open { transform: translateX(0); }
-
-.sources-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 18px 20px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-}
-
-.sources-panel-title {
-  font-family: 'Cormorant Garamond', serif;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-1);
-}
-
-.sources-panel-close {
-  background: none;
-  border: none;
-  color: var(--text-3);
-  font-size: 16px;
-  cursor: pointer;
-  padding: 4px 8px;
-  border-radius: 6px;
-  transition: color var(--transition);
-}
-
-.sources-panel-close:hover { color: var(--text-1); }
-
-.sources-panel-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.sources-panel-body::-webkit-scrollbar { width: 3px; }
-.sources-panel-body::-webkit-scrollbar-thumb { background: var(--navy-4); }
-
-.source-card {
-  background: var(--navy-3);
+.stat-card {
+  background: var(--navy-2);
   border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 14px;
-  transition: border-color var(--transition);
+  border-radius: 8px;
+  padding: 16px 12px;
+  text-align: center;
 }
 
-.source-card:hover { border-color: var(--border-gold); }
-
-.source-id {
-  font-family: 'Cormorant Garamond', serif;
-  font-size: 14px;
+.stat-value {
+  font-size: 20px;
   font-weight: 600;
   color: var(--gold);
-  margin-bottom: 4px;
-}
-
-.source-year {
-  font-size: 11px;
-  color: var(--text-3);
-  margin-bottom: 10px;
-}
-
-.source-excerpt {
-  font-size: 12px;
-  color: var(--text-2);
-  line-height: 1.6;
-  border-left: 2px solid var(--border-gold);
-  padding-left: 10px;
+  margin-bottom: 6px;
 }
 
-.source-num {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: var(--navy-4);
-  border-radius: 50%;
+.stat-label {
   font-size: 10px;
   color: var(--text-3);
-  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-/* ── Input zone ── */
-.input-zone {
-  padding: 8px 20px 10px;
+/* ── INPUT ── */
+.input-area {
+  padding: 12px 20px 16px;
   background: linear-gradient(transparent, var(--navy) 30%);
+  border-top: 1px solid var(--border);
   flex-shrink: 0;
-  height: var(--input-h);
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
 }
 
-.input-box {
+.input-wrapper {
   display: flex;
-  align-items: flex-end;
   gap: 8px;
   background: var(--navy-2);
   border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 8px 10px 8px 14px;
-  transition: border-color var(--transition);
+  border-radius: 10px;
+  padding: 8px 12px;
+  transition: border-color 0.2s ease;
+  max-width: 900px;
+  margin: 0 auto;
 }
 
-.input-box:focus-within { border-color: var(--border-gold); }
+.input-wrapper:focus-within {
+  border-color: var(--border-gold);
+}
 
-.query-textarea {
+.query-input {
   flex: 1;
   background: none;
   border: none;
@@ -750,419 +563,69 @@ body {
   font-size: 14px;
   color: var(--text-1);
   resize: none;
-  max-height: 140px;
-  line-height: 1.6;
-  padding: 2px 0;
+  max-height: 120px;
+  line-height: 1.5;
 }
 
-.query-textarea::placeholder { color: var(--text-3); }
+.query-input::placeholder {
+  color: var(--text-3);
+}
 
 .send-btn {
   width: 36px;
   height: 36px;
   background: var(--gold);
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   color: var(--navy);
+  font-size: 20px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  transition: background var(--transition), transform 0.1s;
-}
-
-.send-btn:hover { background: #dbb95c; transform: scale(1.04); }
-.send-btn:disabled { background: var(--navy-4); color: var(--text-3); cursor: not-allowed; transform: none; }
-
-.input-disclaimer {
-  text-align: center;
-  font-size: 10px;
-  color: var(--text-3);
-  margin-top: 4px;
-  line-height: 1.3;
-}
-
-/* ── Answer formatting ── */
-.bubble-ai ol, .bubble-ai ul {
-  margin: 8px 0 8px 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.bubble-ai ol { list-style: decimal; }
-.bubble-ai ul { list-style: disc; }
-
-.bubble-ai li {
-  color: var(--text-1);
-  line-height: 1.5;
-  padding-left: 2px;
+  transition: background 0.2s ease;
 }
 
-.bubble-ai h1, .bubble-ai h2, .bubble-ai h3 {
-  font-family: 'Cormorant Garamond', serif;
-  color: var(--gold);
-  margin: 12px 0 6px;
+.send-btn:hover {
+  background: #dbb95c;
 }
 
-.bubble-ai h1 { font-size: 18px; }
-.bubble-ai h2 { font-size: 15px; }
-.bubble-ai h3 { font-size: 13px; }
-
-.bubble-ai strong { color: var(--text-1); font-weight: 600; }
-.bubble-ai em { color: var(--text-2); font-style: italic; }
-
-.bubble-ai code {
+.send-btn:disabled {
   background: var(--navy-4);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 12px;
-  color: var(--gold);
-}
-
-.answer-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 10px 0;
-  font-size: 12px;
-}
-
-.answer-table td {
-  padding: 6px 10px;
-  border: 1px solid var(--border);
-  color: var(--text-2);
-  line-height: 1.4;
-}
-
-.answer-table tr:first-child td {
-  background: var(--navy-3);
-  color: var(--text-1);
-  font-weight: 600;
-}
-
-.answer-table tr:hover td { background: var(--navy-3); }
-
-.bubble-ai p {
-  margin-bottom: 10px;
-}
-
-.bubble-ai p:last-child { margin-bottom: 0; }
-
-/* ── Analytics ────────────────────────────────────────────── */
-.analytics-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 14px;
-  margin-top: 8px;
-  background: transparent;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text-2);
-  font-size: 13px;
-  cursor: pointer;
-  transition: background var(--transition), border-color var(--transition), color var(--transition);
-}
-.analytics-btn:hover {
-  background: var(--navy-3);
-  border-color: var(--border-gold);
-  color: var(--text-1);
-  transform: none;
-}
-.analytics-inner {
-  max-width: 900px;
-  margin: 0 auto;
-}
-.analytics-header h2 {
-  font-family: 'Cormorant Garamond', serif;
-  font-size: 24px;
-  margin: 0 0 4px;
-}
-.analytics-header p {
-  color: var(--text-2);
-  font-size: 13px;
-  margin: 0 0 16px;
+  color: var(--text-3);
+  cursor: not-allowed;
 }
 
-.analytics-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 12px;
-  margin-bottom: 20px;
-}
-.stat-card {
-  background: var(--navy-2);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 14px 12px;
+.disclaimer-line {
   text-align: center;
-}
-.stat-value {
-  font-size: 22px;
-  font-weight: 600;
-}
-.stat-label {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-3);
   margin-top: 6px;
 }
 
-.analytics-charts {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.chart-card {
-  background: var(--navy-2);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 14px;
-}
-
-.chart-card h3 {
-  font-family: 'Cormorant Garamond', serif;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-1);
-  margin-bottom: 10px;
-}
-
-.chart-container {
-  min-height: 140px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── Responsive Improvements ── */
-html {
-  scroll-behavior: smooth;
-}
-
+/* ── RESPONSIVE ── */
 @media (max-width: 768px) {
-  :root {
-    --sidebar-w: 200px;
-    --topbar-h: 48px;
-    --input-h: 80px;
-  }
-
-  .app-layout {
+  .app-container {
     flex-direction: column;
   }
 
   .sidebar {
-    width: 100% !important;
-    height: auto;
-    max-height: 35vh;
-    overflow-y: auto;
+    width: 100%;
+    max-height: 40vh;
     border-right: none;
     border-bottom: 1px solid var(--border);
   }
 
-  .main-wrapper {
-    flex: 1;
-    overflow-y: hidden;
-  }
-
-  .topbar-title {
-    font-size: 13px;
-    max-width: 60%;
-  }
-
-  .screen {
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-  }
-
-  .screen-welcome {
-    padding: 18px 16px 12px !important;
-  }
-
-  .welcome-heading {
-    font-size: 32px !important;
-  }
-
-  .welcome-body {
-    font-size: 13px !important;
-    margin-bottom: 16px !important;
-  }
-
-  .suggestion-grid {
-    grid-template-columns: 1fr !important;
-    gap: 6px !important;
-  }
-
-  .suggestion-pill {
-    font-size: 11px !important;
-    padding: 8px 10px !important;
-  }
-
-  .messages-list {
-    gap: 12px !important;
-  }
-
-  .bubble-ai,
-  .bubble-user {
-    max-width: 95% !important;
-    font-size: 12px !important;
-    padding: 10px 12px !important;
-  }
-
-  .analytics-grid {
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
-    gap: 8px !important;
-  }
-
-  .analytics-charts {
-    grid-template-columns: 1fr !important;
-  }
-}
-
-@media (max-width: 480px) {
-  .sessions-list {
-    max-height: 200px;
-  }
-
-  .topbar {
-    padding: 0 12px;
-  }
-
-  .topbar-title {
-    font-size: 12px;
-  }
-
-  .status-pill {
-    font-size: 11px;
-    padding: 4px 8px;
-  }
-
-  .screen-welcome {
-    padding: 16px 12px 40px !important;
+  .messages {
+    padding: 0 16px;
   }
 
-  .welcome-inner h1 {
-    font-size: 20px !important;
-    line-height: 1.3;
+  .bubble {
+    max-width: 90%;
   }
 
-  .chat-container {
-    max-height: 300px;
+  .suggestions {
+    grid-template-columns: 1fr;
   }
 }
-  color: var(--text-1);
-  font-family: 'Cormorant Garamond', serif;
-}
-.stat-label {
-  font-size: 11px;
-  color: var(--text-3);
-  margin-top: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.analytics-charts {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-.chart-card {
-  background: var(--navy-2);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 20px;
-}
-.chart-card h3 {
-  font-size: 14px;
-  font-weight: 500;
-  margin: 0 0 16px;
-  color: var(--text-2);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.chart-container {
-  min-height: 60px;
-}
-.no-data {
-  color: var(--text-3);
-  font-size: 13px;
-  text-align: center;
-  padding: 16px 0;
-}
-
-.bar-chart {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.bar-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 12px;
-}
-.bar-label {
-  width: 100px;
-  color: var(--text-3);
-  text-align: right;
-  flex-shrink: 0;
-}
-.bar-track {
-  flex: 1;
-  height: 8px;
-  background: var(--navy-3);
-  border-radius: 4px;
-  overflow: hidden;
-}
-.bar-fill {
-  height: 100%;
-  background: var(--gold);
-  border-radius: 4px;
-  transition: width 0.4s ease;
-}
-.bar-value {
-  width: 30px;
-  color: var(--text-1);
-  font-weight: 500;
-  text-align: right;
-}
-
-.sparkline {
-  width: 100%;
-  height: 60px;
-}
-.sparkline-range {
-  display: flex;
-  justify-content: space-between;
-  font-size: 11px;
-  color: var(--text-3);
-  margin-top: 4px;
-}
-
-.analytics-footer {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-top: 24px;
-}
-.refresh-btn {
-  padding: 8px 16px;
-  background: var(--navy-3);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text-1);
-  font-size: 13px;
-  cursor: pointer;
-  transition: background var(--transition);
-}
-.refresh-btn:hover {
-  background: var(--navy-4);
-}
-.analytics-note {
-  font-size: 12px;
-  color: var(--text-3);
-}

frontend/style_old.css

@@ -0,0 +1,1168 @@
+/* ── Reset & Variables ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --navy:        #0f1724;
+  --navy-2:      #161f30;
+  --navy-3:      #1c2840;
+  --navy-4:      #243050;
+  --gold:        #c8a84b;
+  --gold-dim:    #9a7d34;
+  --gold-glow:   rgba(200,168,75,0.15);
+  --text-1:      #e8e2d4;
+  --text-2:      #9ba8bc;
+  --text-3:      #576070;
+  --border:      rgba(255,255,255,0.07);
+  --border-gold: rgba(200,168,75,0.3);
+  --red-soft:    #e05252;
+  --green-soft:  #4caf82;
+  --sidebar-w:   272px;
+  --topbar-h:    56px;
+  --input-h:     96px;
+  --radius:      12px;
+  --transition:  0.2s ease;
+}
+
+html { height: 100%; }
+
+body {
+  font-family: 'DM Sans', sans-serif;
+  background: var(--navy);
+  color: var(--text-1);
+  font-size: 14px;
+  line-height: 1.6;
+  min-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* ── Layout ── */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  overflow: visible;
+}
+
+/* ── Sidebar ── */
+.sidebar {
+  width: var(--sidebar-w);
+  background: var(--navy-2);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+  transition: width 0.3s ease;
+}
+
+.sidebar.collapsed {
+  width: 60px;
+}
+
+.sidebar.collapsed .brand-text,
+.sidebar.collapsed .new-chat-btn span:not(.new-chat-icon),
+.sidebar.collapsed .sidebar-section-label,
+.sidebar.collapsed .session-label,
+.sidebar.collapsed .session-count,
+.sidebar.collapsed .footer-disclaimer,
+.sidebar.collapsed .footer-meta {
+  display: none;
+}
+
+.sidebar.collapsed .new-chat-btn {
+  width: calc(100% - 16px);
+  margin: 12px 8px;
+  padding: 8px;
+  justify-content: center;
+}
+
+.sidebar.collapsed .analytics-btn {
+  width: calc(100% - 16px);
+  margin: 0 8px 8px;
+  padding: 10px 8px;
+  justify-content: center;
+}
+
+.sidebar.collapsed .new-chat-icon,
+.sidebar.collapsed .analytics-icon {
+  margin: 0;
+}
+
+.sidebar.collapsed .sessions-list {
+  padding: 0 8px;
+}
+
+.sidebar.collapsed .session-item {
+  padding: 9px 10px;
+  justify-content: center;
+}
+
+.sidebar.collapsed .sidebar-footer {
+  padding: 8px 8px;
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid var(--border);
+  position: relative;
+}
+
+.sidebar-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--text-3);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--transition), background var(--transition);
+}
+
+.sidebar-toggle:hover {
+  color: var(--text-1);
+  background: var(--navy-3);
+}
+
+.brand-mark {
+  width: 38px;
+  height: 38px;
+  background: var(--gold-glow);
+  border: 1px solid var(--border-gold);
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: var(--gold);
+  flex-shrink: 0;
+}
+
+.brand-name {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--gold);
+  display: block;
+  line-height: 1.1;
+}
+
+.brand-sub {
+  font-size: 10px;
+  color: var(--text-3);
+  display: block;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+}
+
+.new-chat-btn {
+  margin: 12px 12px 8px;
+  padding: 8px 12px;
+  background: var(--gold-glow);
+  border: 1px solid var(--border-gold);
+  border-radius: 8px;
+  color: var(--gold);
+  font-family: 'DM Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: background var(--transition), border-color var(--transition);
+  width: calc(100% - 24px);
+}
+
+.new-chat-btn:hover {
+  background: rgba(200,168,75,0.22);
+  border-color: var(--gold);
+}
+
+.new-chat-icon { font-size: 16px; font-weight: 300; }
+
+.sidebar-section-label {
+  padding: 8px 16px 4px;
+  font-size: 9px;
+  font-weight: 600;
+  color: var(--text-3);
+  letter-spacing: 1px;
+}
+
+.sessions-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 8px;
+}
+
+.sessions-list::-webkit-scrollbar { width: 3px; }
+.sessions-list::-webkit-scrollbar-thumb { background: var(--navy-4); border-radius: 2px; }
+
+.sessions-empty {
+  padding: 12px 10px;
+  font-size: 12px;
+  color: var(--text-3);
+  font-style: italic;
+}
+
+.session-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background var(--transition);
+  margin-bottom: 2px;
+  position: relative;
+}
+
+.session-item:hover { background: var(--navy-3); }
+
+.session-item.active {
+  background: var(--navy-4);
+  border: 1px solid var(--border-gold);
+}
+
+.session-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--gold-dim);
+  flex-shrink: 0;
+}
+
+.session-item.active .session-dot { background: var(--gold); }
+
+.session-label {
+  font-size: 12px;
+  color: var(--text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.session-item.active .session-label { color: var(--text-1); }
+
+.session-count {
+  font-size: 10px;
+  color: var(--text-3);
+  flex-shrink: 0;
+}
+
+.sidebar-footer {
+  padding: 10px 14px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.footer-disclaimer {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  font-size: 10px;
+  color: var(--text-3);
+  line-height: 1.3;
+}
+
+.disclaimer-icon { color: var(--gold-dim); flex-shrink: 0; }
+
+.footer-meta {
+  font-size: 9px;
+  color: var(--text-3);
+  line-height: 1.4;
+}
+
+/* ── Main wrapper ── */
+.main-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ── Topbar ── */
+.topbar {
+  height: var(--topbar-h);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  flex-shrink: 0;
+  background: var(--navy);
+}
+
+.topbar-title {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 500px;
+}
+
+.status-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 5px 12px;
+  font-size: 12px;
+  color: var(--text-2);
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green-soft);
+  transition: background var(--transition);
+}
+
+.status-pill.loading .status-dot {
+  background: var(--gold);
+  animation: pulse 1s infinite;
+}
+
+.status-pill.error .status-dot { background: var(--red-soft); }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* ── Screens ── */
+.screen {
+  display: none;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.screen.active { display: flex; }
+
+/* ── Welcome screen ── */
+.screen-welcome {
+  align-items: center;
+  justify-content: center;
+  padding: 20px 24px;
+  flex-direction: column;
+}
+
+.welcome-inner {
+  max-width: 720px;
+  width: 100%;
+  text-align: center;
+  animation: fadeUp 0.5s ease;
+}
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.welcome-emblem {
+  font-size: 40px;
+  margin-bottom: 12px;
+  opacity: 0.7;
+}
+
+.welcome-heading {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 42px;
+  font-weight: 700;
+  color: var(--text-1);
+  margin-bottom: 10px;
+  line-height: 1.1;
+}
+
+.welcome-body {
+  font-size: 14px;
+  color: var(--text-2);
+  line-height: 1.6;
+  margin-bottom: 24px;
+}
+
+.suggestion-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 8px;
+}
+
+.suggestion-pill {
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 12px;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 12px;
+  color: var(--text-2);
+  cursor: pointer;
+  text-align: left;
+  line-height: 1.4;
+  transition: all var(--transition);
+}
+
+.suggestion-pill:hover {
+  background: var(--navy-3);
+  border-color: var(--border-gold);
+  color: var(--text-1);
+  transform: translateY(-1px);
+}
+
+/* ── Chat screen ── */
+.screen-chat { flex-direction: column; }
+
+.messages-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 16px 0 12px;
+  width: 100%;
+  max-height: calc(100vh - var(--topbar-h) - var(--input-h) - 40px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.messages-container::-webkit-scrollbar { width: 4px; }
+.messages-container::-webkit-scrollbar-thumb { background: var(--navy-4); border-radius: 2px; }
+
+.messages-list {
+  width: 100%;
+  max-width: 900px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 0 24px;
+}
+
+/* ── Message bubbles ── */
+.msg {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  animation: fadeUp 0.3s ease;
+  width: 100%;
+  margin-bottom: 4px;
+}
+
+.msg-user { align-items: flex-end; margin: 0 0 8px 0; }
+.msg-ai { align-items: flex-start; margin: 0 0 8px 0; }
+
+.bubble-user {
+  background: var(--navy-4);
+  border: 1px solid var(--border);
+  border-radius: 16px 16px 4px 16px;
+  padding: 10px 14px;
+  max-width: 70%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  color: var(--text-1);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.bubble-ai {
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--gold);
+  border-radius: 4px 16px 16px 16px;
+  padding: 14px 18px;
+  max-width: 85%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  color: var(--text-1);
+  font-size: 13px;
+  line-height: 1.6;
+  position: relative;
+}
+
+.bubble-ai p { margin-bottom: 10px; }
+.bubble-ai p:last-child { margin-bottom: 0; }
+
+/* AI bubble meta row */
+.bubble-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.verify-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 20px;
+}
+
+.verify-badge.verified {
+  background: rgba(76,175,130,0.12);
+  color: var(--green-soft);
+  border: 1px solid rgba(76,175,130,0.3);
+}
+
+.verify-badge.unverified {
+  background: rgba(224,82,82,0.1);
+  color: #e8a060;
+  border: 1px solid rgba(224,82,82,0.3);
+}
+
+.sources-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--gold);
+  background: var(--gold-glow);
+  border: 1px solid var(--border-gold);
+  border-radius: 20px;
+  padding: 2px 10px;
+  cursor: pointer;
+  transition: background var(--transition);
+}
+
+.sources-btn:hover { background: rgba(200,168,75,0.22); }
+
+.latency-label {
+  font-size: 10px;
+  color: var(--text-3);
+  margin-left: auto;
+}
+
+.truncated-note {
+  font-size: 10px;
+  color: var(--text-3);
+  margin-top: 6px;
+  font-style: italic;
+}
+
+/* Loading bubble */
+.bubble-loading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--text-3);
+  font-size: 12px;
+  padding: 10px 14px;
+}
+
+.dots { display: flex; gap: 4px; }
+.dots span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--gold);
+  animation: dotBounce 1.2s infinite;
+}
+.dots span:nth-child(2) { animation-delay: 0.2s; }
+.dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dotBounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
+  30% { transform: translateY(-6px); opacity: 1; }
+}
+
+/* Error bubble */
+.bubble-error {
+  background: rgba(224,82,82,0.08);
+  border: 1px solid rgba(224,82,82,0.25);
+  border-left: 3px solid var(--red-soft);
+  border-radius: 4px 16px 16px 16px;
+  padding: 14px 18px;
+  color: #e8a0a0;
+  font-size: 13px;
+  max-width: 80%;
+}
+
+/* ── Sources side panel ── */
+.sources-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 100;
+}
+
+.sources-panel {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 380px;
+  height: 100vh;
+  background: var(--navy-2);
+  border-left: 1px solid var(--border);
+  z-index: 101;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+}
+
+.sources-panel.open,
+.sources-overlay.open {
+  display: flex;
+}
+
+.sources-panel.open { transform: translateX(0); }
+
+.sources-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.sources-panel-title {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-1);
+}
+
+.sources-panel-close {
+  background: none;
+  border: none;
+  color: var(--text-3);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: color var(--transition);
+}
+
+.sources-panel-close:hover { color: var(--text-1); }
+
+.sources-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sources-panel-body::-webkit-scrollbar { width: 3px; }
+.sources-panel-body::-webkit-scrollbar-thumb { background: var(--navy-4); }
+
+.source-card {
+  background: var(--navy-3);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px;
+  transition: border-color var(--transition);
+}
+
+.source-card:hover { border-color: var(--border-gold); }
+
+.source-id {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--gold);
+  margin-bottom: 4px;
+}
+
+.source-year {
+  font-size: 11px;
+  color: var(--text-3);
+  margin-bottom: 10px;
+}
+
+.source-excerpt {
+  font-size: 12px;
+  color: var(--text-2);
+  line-height: 1.6;
+  border-left: 2px solid var(--border-gold);
+  padding-left: 10px;
+}
+
+.source-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background: var(--navy-4);
+  border-radius: 50%;
+  font-size: 10px;
+  color: var(--text-3);
+  margin-bottom: 6px;
+}
+
+/* ── Input zone ── */
+.input-zone {
+  padding: 8px 20px 10px;
+  background: linear-gradient(transparent, var(--navy) 30%);
+  flex-shrink: 0;
+  height: var(--input-h);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.input-box {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 8px 10px 8px 14px;
+  transition: border-color var(--transition);
+}
+
+.input-box:focus-within { border-color: var(--border-gold); }
+
+.query-textarea {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 14px;
+  color: var(--text-1);
+  resize: none;
+  max-height: 140px;
+  line-height: 1.6;
+  padding: 2px 0;
+}
+
+.query-textarea::placeholder { color: var(--text-3); }
+
+.send-btn {
+  width: 36px;
+  height: 36px;
+  background: var(--gold);
+  border: none;
+  border-radius: 8px;
+  color: var(--navy);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background var(--transition), transform 0.1s;
+}
+
+.send-btn:hover { background: #dbb95c; transform: scale(1.04); }
+.send-btn:disabled { background: var(--navy-4); color: var(--text-3); cursor: not-allowed; transform: none; }
+
+.input-disclaimer {
+  text-align: center;
+  font-size: 10px;
+  color: var(--text-3);
+  margin-top: 4px;
+  line-height: 1.3;
+}
+
+/* ── Answer formatting ── */
+.bubble-ai ol, .bubble-ai ul {
+  margin: 8px 0 8px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.bubble-ai ol { list-style: decimal; }
+.bubble-ai ul { list-style: disc; }
+
+.bubble-ai li {
+  color: var(--text-1);
+  line-height: 1.5;
+  padding-left: 2px;
+}
+
+.bubble-ai h1, .bubble-ai h2, .bubble-ai h3 {
+  font-family: 'Cormorant Garamond', serif;
+  color: var(--gold);
+  margin: 12px 0 6px;
+}
+
+.bubble-ai h1 { font-size: 18px; }
+.bubble-ai h2 { font-size: 15px; }
+.bubble-ai h3 { font-size: 13px; }
+
+.bubble-ai strong { color: var(--text-1); font-weight: 600; }
+.bubble-ai em { color: var(--text-2); font-style: italic; }
+
+.bubble-ai code {
+  background: var(--navy-4);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--gold);
+}
+
+.answer-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0;
+  font-size: 12px;
+}
+
+.answer-table td {
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  color: var(--text-2);
+  line-height: 1.4;
+}
+
+.answer-table tr:first-child td {
+  background: var(--navy-3);
+  color: var(--text-1);
+  font-weight: 600;
+}
+
+.answer-table tr:hover td { background: var(--navy-3); }
+
+.bubble-ai p {
+  margin-bottom: 10px;
+}
+
+.bubble-ai p:last-child { margin-bottom: 0; }
+
+/* ── Analytics ────────────────────────────────────────────── */
+.analytics-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 14px;
+  margin-top: 8px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-2);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background var(--transition), border-color var(--transition), color var(--transition);
+}
+.analytics-btn:hover {
+  background: var(--navy-3);
+  border-color: var(--border-gold);
+  color: var(--text-1);
+  transform: none;
+}
+.analytics-inner {
+  max-width: 900px;
+  margin: 0 auto;
+}
+.analytics-header h2 {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 24px;
+  margin: 0 0 4px;
+}
+.analytics-header p {
+  color: var(--text-2);
+  font-size: 13px;
+  margin: 0 0 16px;
+}
+
+.analytics-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.stat-card {
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px 12px;
+  text-align: center;
+}
+.stat-value {
+  font-size: 22px;
+  font-weight: 600;
+}
+.stat-label {
+  font-size: 11px;
+  color: var(--text-3);
+  margin-top: 6px;
+}
+
+.analytics-charts {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.chart-card {
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px;
+}
+
+.chart-card h3 {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-1);
+  margin-bottom: 10px;
+}
+
+.chart-container {
+  min-height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Responsive Improvements ── */
+html {
+  scroll-behavior: smooth;
+}
+
+@media (max-width: 768px) {
+  :root {
+    --sidebar-w: 200px;
+    --topbar-h: 48px;
+    --input-h: 80px;
+  }
+
+  .app-layout {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    width: 100% !important;
+    height: auto;
+    max-height: 35vh;
+    overflow-y: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .main-wrapper {
+    flex: 1;
+    overflow-y: hidden;
+  }
+
+  .topbar-title {
+    font-size: 13px;
+    max-width: 60%;
+  }
+
+  .screen {
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+  }
+
+  .screen-welcome {
+    padding: 18px 16px 12px !important;
+  }
+
+  .welcome-heading {
+    font-size: 32px !important;
+  }
+
+  .welcome-body {
+    font-size: 13px !important;
+    margin-bottom: 16px !important;
+  }
+
+  .suggestion-grid {
+    grid-template-columns: 1fr !important;
+    gap: 6px !important;
+  }
+
+  .suggestion-pill {
+    font-size: 11px !important;
+    padding: 8px 10px !important;
+  }
+
+  .messages-list {
+    gap: 12px !important;
+  }
+
+  .bubble-ai,
+  .bubble-user {
+    max-width: 95% !important;
+    font-size: 12px !important;
+    padding: 10px 12px !important;
+  }
+
+  .analytics-grid {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
+    gap: 8px !important;
+  }
+
+  .analytics-charts {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .sessions-list {
+    max-height: 200px;
+  }
+
+  .topbar {
+    padding: 0 12px;
+  }
+
+  .topbar-title {
+    font-size: 12px;
+  }
+
+  .status-pill {
+    font-size: 11px;
+    padding: 4px 8px;
+  }
+
+  .screen-welcome {
+    padding: 16px 12px 40px !important;
+  }
+
+  .welcome-inner h1 {
+    font-size: 20px !important;
+    line-height: 1.3;
+  }
+
+  .chat-container {
+    max-height: 300px;
+  }
+}
+  color: var(--text-1);
+  font-family: 'Cormorant Garamond', serif;
+}
+.stat-label {
+  font-size: 11px;
+  color: var(--text-3);
+  margin-top: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.analytics-charts {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.chart-card {
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 20px;
+}
+.chart-card h3 {
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0 0 16px;
+  color: var(--text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.chart-container {
+  min-height: 60px;
+}
+.no-data {
+  color: var(--text-3);
+  font-size: 13px;
+  text-align: center;
+  padding: 16px 0;
+}
+
+.bar-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.bar-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+}
+.bar-label {
+  width: 100px;
+  color: var(--text-3);
+  text-align: right;
+  flex-shrink: 0;
+}
+.bar-track {
+  flex: 1;
+  height: 8px;
+  background: var(--navy-3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.bar-fill {
+  height: 100%;
+  background: var(--gold);
+  border-radius: 4px;
+  transition: width 0.4s ease;
+}
+.bar-value {
+  width: 30px;
+  color: var(--text-1);
+  font-weight: 500;
+  text-align: right;
+}
+
+.sparkline {
+  width: 100%;
+  height: 60px;
+}
+.sparkline-range {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--text-3);
+  margin-top: 4px;
+}
+
+.analytics-footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 24px;
+}
+.refresh-btn {
+  padding: 8px 16px;
+  background: var(--navy-3);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-1);
+  font-size: 13px;
+  cursor: pointer;
+  transition: background var(--transition);
+}
+.refresh-btn:hover {
+  background: var(--navy-4);
+}
+.analytics-note {
+  font-size: 12px;
+  color: var(--text-3);
+}