Spaces:

CaffeinatedCoding
/

nyayasetu

Running

App Files Files Community

CaffeinatedCoding commited on 16 days ago

Commit

88eaa79

verified ·

1 Parent(s): 0430df4

Upload folder using huggingface_hub

Browse files

Files changed (4) hide show

frontend/app.js +7 -7
frontend/index.html +106 -37
frontend/style.css +667 -260
frontend/style_old_backup.css +641 -0

frontend/app.js CHANGED Viewed

@@ -7,7 +7,7 @@ let sidebarCollapsed = localStorage.getItem("sidebarCollapsed") === "true";
 const textarea = document.getElementById("query-input");
 const sendBtn = document.getElementById("send-btn");
-const messagesList = document.getElementById("messages-list");
 if (sidebarCollapsed) {
   document.getElementById("sidebar").classList.add("collapsed");
@@ -62,7 +62,7 @@ function switchSession(id) {
 function newChat() {
   activeSessionId = null;
-  messagesList.innerHTML = "";
   showScreen("welcome");
   document.getElementById("topbar-title").textContent = "New Research Session";
   renderSessionsList();
@@ -85,7 +85,7 @@ function renderSessionsList() {
 function renderMessages() {
   const session = getActiveSession();
   if (!session) return;
-  messagesList.innerHTML = "";
   session.messages.forEach(msg => {
     if (msg.role === "user") appendUserBubble(msg.text, false);
     else if (msg.role === "ai") appendAIBubble(msg.data, false);
@@ -155,7 +155,7 @@ function appendUserBubble(text, scroll = true) {
   const div = document.createElement("div");
   div.className = "message user";
   div.innerHTML = `<div class="bubble user">${escHtml(text)}</div>`;
-  messagesList.appendChild(div);
   if (scroll) scrollBottom();
 }
@@ -180,7 +180,7 @@ function appendAIBubble(data, scroll = true) {
         ${latency}
       </div>
     </div>`;
-  messagesList.appendChild(div);
   if (scroll) scrollBottom();
 }
@@ -188,7 +188,7 @@ function appendErrorBubble(text, scroll = true) {
   const div = document.createElement("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();
 }
@@ -202,7 +202,7 @@ function appendLoader() {
       <div class="dots"><span></span><span></span><span></span></div>
       Searching...
     </div>`;
-  messagesList.appendChild(div);
   scrollBottom();
   return id;
 }

 const textarea = document.getElementById("query-input");
 const sendBtn = document.getElementById("send-btn");
+const proceedings = document.getElementById("proceedings");
 if (sidebarCollapsed) {
   document.getElementById("sidebar").classList.add("collapsed");
 function newChat() {
   activeSessionId = null;
+  proceedings.innerHTML = "";
   showScreen("welcome");
   document.getElementById("topbar-title").textContent = "New Research Session";
   renderSessionsList();
 function renderMessages() {
   const session = getActiveSession();
   if (!session) return;
+  proceedings.innerHTML = "";
   session.messages.forEach(msg => {
     if (msg.role === "user") appendUserBubble(msg.text, false);
     else if (msg.role === "ai") appendAIBubble(msg.data, false);
   const div = document.createElement("div");
   div.className = "message user";
   div.innerHTML = `<div class="bubble user">${escHtml(text)}</div>`;
+  proceedings.appendChild(div);
   if (scroll) scrollBottom();
 }
         ${latency}
       </div>
     </div>`;
+  proceedings.appendChild(div);
   if (scroll) scrollBottom();
 }
   const div = document.createElement("div");
   div.className = "message ai";
   div.innerHTML = `<div class="bubble ai" style="border-left-color: var(--red);">⚠ ${escHtml(text)}</div>`;
+  proceedings.appendChild(div);
   if (scroll) scrollBottom();
 }
       <div class="dots"><span></span><span></span><span></span></div>
       Searching...
     </div>`;
+  proceedings.appendChild(div);
   scrollBottom();
   return id;
 }

frontend/index.html CHANGED Viewed

@@ -5,99 +5,168 @@
   <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-container">
-  <!-- SIDEBAR -->
   <aside class="sidebar" id="sidebar">
     <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()">☰</button>
     </div>
-    <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>
-    <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">
-      <p class="disclaimer">⚠ Not legal advice</p>
-      <p class="meta">Supreme Court of India · 1950–2024</p>
     </div>
   </aside>
-  <!-- MAIN CONTENT -->
   <main class="main-content">
     <header class="topbar">
-      <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 -->
     <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>
     </section>
-    <!-- CHAT SCREEN -->
     <section id="screen-chat" class="screen">
       <div class="chat-area">
-        <div class="messages" id="messages-list"></div>
       </div>
     </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>
           </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</div>
           </div>
           <div class="stat-card">
             <div class="stat-value" id="stat-sources">—</div>
-            <div class="stat-label">Avg Sources</div>
           </div>
         </div>
       </div>

   <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=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
 <div class="app-container">
+  <!-- SIDEBAR - JUDICIAL PANEL -->
   <aside class="sidebar" id="sidebar">
+    <!-- Header with Judicial Seal -->
     <div class="sidebar-header">
+      <div class="judicial-seal">
+        <svg viewBox="0 0 100 100" class="seal-svg">
+          <circle cx="50" cy="50" r="48" fill="none" stroke="currentColor" stroke-width="2"/>
+          <circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" stroke-width="1" opacity="0.5"/>
+          <!-- Scale/Balance symbol -->
+          <path d="M50 20 L35 45 L65 45 Z" fill="none" stroke="currentColor" stroke-width="1.5"/>
+          <line x1="35" y1="45" x2="65" y2="45" stroke="currentColor" stroke-width="2"/>
+          <circle cx="35" cy="55" r="3" fill="currentColor"/>
+          <circle cx="65" cy="55" r="3" fill="currentColor"/>
+          <text x="50" y="75" font-size="8" text-anchor="middle" font-weight="bold" letter-spacing="1">NYAYASETU</text>
+        </svg>
+      </div>
+      <div class="brand-text">
+        <div class="brand-name">NYAYA SETU</div>
+        <div class="brand-sub">Legal Research Registry</div>
       </div>
+      <button class="sidebar-toggle" onclick="toggleSidebar()">≡</button>
     </div>
+    <!-- Primary Actions -->
+    <div class="action-group">
+      <button class="btn-primary" onclick="newChat()">⊕ New Petition</button>
+      <button class="btn-secondary" onclick="showAnalytics()">📋 Case Analytics</button>
+      <button class="btn-secondary" onclick="window.location.href='/court/ui'">⚔ Moot Court</button>
+    </div>
+    <!-- Case Registry -->
+    <div class="registry-section">
+      <div class="registry-header">
+        <span class="registry-title">CASE REGISTRY</span>
+        <div class="registry-divider"></div>
+      </div>
+      <div class="sessions-list" id="sessions-list">
+        <div class="sessions-empty">No active cases</div>
+      </div>
     </div>
+    <!-- Sidebar Footer - Court Info -->
     <div class="sidebar-footer">
+      <div class="court-info">
+        <p class="disclaimer">⚠ DISCLAIMER</p>
+        <p class="disclaimer-text">Not legal advice. Consult qualified advocate.</p>
+      </div>
+      <div class="court-meta">
+        <p class="meta-text">Supreme Court of India</p>
+        <p class="meta-text">Established 1950</p>
+      </div>
     </div>
   </aside>
+  <!-- MAIN CONTENT AREA -->
   <main class="main-content">
+    <!-- Header/Bench -->
     <header class="topbar">
+      <div class="topbar-left">
+        <h1 class="topbar-title" id="topbar-title">Research Session</h1>
+        <p class="topbar-subtitle" id="topbar-subtitle">Indian Legal Research System</p>
+      </div>
+      <div class="status-indicator" id="status-pill">
         <span class="status-dot"></span>
         <span id="status-text">Ready</span>
       </div>
     </header>
+    <!-- Welcome/Research Section -->
     <section id="screen-welcome" class="screen active">
       <div class="welcome-container">
+        <div class="welcome-graphic">
+          <svg viewBox="0 0 200 200" class="welcome-icon">
+            <!-- Judge's Bench -->
+            <rect x="20" y="120" width="160" height="40" fill="none" stroke="currentColor" stroke-width="2" rx="2"/>
+            <!-- Gavel -->
+            <rect x="85" y="30" width="30" height="50" fill="none" stroke="currentColor" stroke-width="2"/>
+            <circle cx="100" cy="20" r="12" fill="currentColor" opacity="0.3"/>
+            <!-- Scales -->
+            <line x1="50" y1="80" x2="50" y2="120" stroke="currentColor" stroke-width="2"/>
+            <line x1="35" y1="100" x2="65" y2="100" stroke="currentColor" stroke-width="2"/>
+            <circle cx="35" cy="105" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
+            <circle cx="65" cy="105" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
+            <!-- Books -->
+            <rect x="130" y="70" width="15" height="35" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1.5"/>
+            <rect x="148" y="65" width="15" height="40" fill="currentColor" opacity="0.2" stroke="currentColor" stroke-width="1.5"/>
+          </svg>
+        </div>
+        <h2>Indian Legal Research</h2>
+        <p class="welcome-subtitle">Query 26,688 Supreme Court Judgments<br><span class="text-muted">Cited sources | Verified citations | Complete legal brief</span></p>
         <div class="suggestions">
+          <div class="suggestion-label">Sample Petitions:</div>
+          <button class="suggestion" onclick="usesuggestion(this)">Fundamental Rights — Definition & Scope</button>
+          <button class="suggestion" onclick="usesuggestion(this)">Right to Privacy under Article 21</button>
+          <button class="suggestion" onclick="usesuggestion(this)">Bail — Legal Framework & Supreme Court Tests</button>
+          <button class="suggestion" onclick="usesuggestion(this)">Basic Structure Doctrine — Implications</button>
+          <button class="suggestion" onclick="usesuggestion(this)">Article 15 — Non-discrimination Doctrine</button>
+          <button class="suggestion" onclick="usesuggestion(this)">Freedom of Speech — Reasonable Restrictions</button>
         </div>
       </div>
     </section>
+    <!-- Chat/Case Proceedings Section -->
     <section id="screen-chat" class="screen">
       <div class="chat-area">
+        <div class="proceedings" id="messages-list"></div>
+      </div>
+      <div class="input-bench">
+        <textarea id="query-input" placeholder="Address the court... (Enter to submit, Shift+Enter for new line)" class="query-input"></textarea>
+        <button id="send-btn" class="btn-submit" onclick="submitQuery()">📤 Submit Petition</button>
       </div>
     </section>
+    <!-- Analytics Dashboard -->
     <section id="screen-analytics" class="screen">
       <div class="analytics-container">
+        <div class="analytics-header">
+          <h2>Case Analytics & System Metrics</h2>
+          <p>Live inference data from NyayaSetu research engine</p>
+        </div>
         <div class="stats-grid">
           <div class="stat-card">
+            <div class="stat-icon">📊</div>
             <div class="stat-value" id="stat-total">—</div>
             <div class="stat-label">Total Queries</div>
           </div>
           <div class="stat-card">
+            <div class="stat-icon">✓</div>
             <div class="stat-value" id="stat-verified">—</div>
+            <div class="stat-label">Verified Answers</div>
           </div>
           <div class="stat-card">
+            <div class="stat-icon">⚡</div>
             <div class="stat-value" id="stat-latency">—</div>
             <div class="stat-label">Avg Latency</div>
           </div>
           <div class="stat-card">
+            <div class="stat-icon">🔍</div>
             <div class="stat-value" id="stat-ood">—</div>
             <div class="stat-label">Out-of-Domain</div>
           </div>
           <div class="stat-card">
+            <div class="stat-icon">📚</div>
             <div class="stat-value" id="stat-sources">—</div>
+            <div class="stat-label">Avg Sources Used</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</div>
+<script src="/static/app.js"></script>
+</body>
+</html>
           </div>
         </div>
       </div>

frontend/style.css CHANGED Viewed

@@ -1,164 +1,219 @@
-/* ── 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);
-  --border-gold: rgba(200,168,75,0.3);
-  --green: #4caf82;
-  --red: #e05252;
 }
 html, body { height: 100%; }
 body {
-  font-family: 'DM Sans', sans-serif;
-  background: var(--navy);
-  color: var(--text-1);
   font-size: 14px;
   line-height: 1.6;
 }
-/* ── LAYOUT ── */
 .app-container {
   display: flex;
   height: 100vh;
   overflow: hidden;
 }
-/* ── SIDEBAR ── */
 .sidebar {
-  width: 272px;
-  background: var(--navy-2);
-  border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
-  padding: 16px;
-  gap: 12px;
   overflow-y: auto;
   transition: width 0.3s ease;
 }
 .sidebar.collapsed {
-  width: 60px;
 }
 .sidebar.collapsed .brand-text,
-.sidebar.collapsed .btn-primary span,
-.sidebar.collapsed .btn-secondary span,
-.sidebar.collapsed .sessions-header,
 .sidebar.collapsed .sidebar-footer {
   display: none;
 }
 .sidebar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid var(--border);
 }
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex: 1;
 }
-.brand-icon {
-  font-size: 24px;
 }
 .brand-name {
-  font-family: 'Cormorant Garamond', serif;
   font-size: 18px;
   font-weight: 700;
-  color: var(--gold);
   line-height: 1.1;
 }
 .brand-sub {
   font-size: 10px;
-  color: var(--text-3);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
 .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;
-  border: 1px solid var(--border);
-  font-family: 'DM Sans', sans-serif;
   font-size: 12px;
-  font-weight: 500;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 6px;
   transition: all 0.2s ease;
 }
 .btn-primary {
-  background: var(--gold-glow);
-  border-color: var(--border-gold);
-  color: var(--gold);
 }
 .btn-primary:hover {
-  background: rgba(200,168,75,0.25);
-  border-color: var(--gold);
 }
 .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;
 }
-/* ── 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 {
@@ -166,110 +221,165 @@ body {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 4px;
 }
 .sessions-empty {
-  font-size: 12px;
-  color: var(--text-3);
   font-style: italic;
   padding: 12px 8px;
 }
 .session-item {
-  padding: 8px 10px;
-  border-radius: 6px;
-  background: transparent;
   border: 1px solid transparent;
   font-size: 12px;
-  color: var(--text-2);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 .session-item:hover {
-  background: var(--navy-3);
 }
 .session-item.active {
-  background: var(--navy-4);
-  border-color: var(--border-gold);
-  color: var(--text-1);
 }
 .sidebar-footer {
-  padding-top: 12px;
-  border-top: 1px solid var(--border);
-  font-size: 10px;
-  color: var(--text-3);
-  line-height: 1.4;
 }
 .disclaimer {
-  margin-bottom: 6px;
 }
-.meta {
   font-size: 9px;
 }
-/* ── MAIN CONTENT ── */
 .main-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-/* ── TOPBAR ── */
 .topbar {
-  height: 56px;
-  border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px;
   flex-shrink: 0;
-  background: var(--navy);
 }
 .topbar-title {
-  font-family: 'Cormorant Garamond', serif;
-  font-size: 17px;
-  font-weight: 600;
-  color: var(--text-1);
 }
-.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);
 }
-.status-pill.loading .status-dot {
-  background: var(--gold);
-  animation: pulse 1s infinite;
 }
 @keyframes pulse {
   0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
 }
-/* ── SCREENS ── */
 .screen {
   display: none;
   flex: 1;
@@ -280,87 +390,128 @@ body {
   display: flex;
 }
-/* ── WELCOME ── */
 .welcome-container {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 24px;
   text-align: center;
 }
 .welcome-icon {
-  font-size: 48px;
-  margin-bottom: 16px;
-  opacity: 0.7;
 }
 .welcome-container h2 {
-  font-family: 'Cormorant Garamond', serif;
-  font-size: 40px;
   font-weight: 700;
   margin-bottom: 12px;
-  color: var(--text-1);
 }
 .welcome-container > p {
-  color: var(--text-2);
-  margin-bottom: 32px;
-  max-width: 600px;
 }
 .suggestions {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 12px;
-  max-width: 800px;
 }
 .suggestion {
-  padding: 12px 14px;
-  background: var(--navy-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text-2);
-  font-family: 'DM Sans', sans-serif;
-  font-size: 12px;
   cursor: pointer;
   text-align: left;
-  line-height: 1.4;
   transition: all 0.2s ease;
 }
 .suggestion:hover {
-  background: var(--navy-3);
   border-color: var(--border-gold);
-  color: var(--text-1);
 }
-/* ── CHAT ── */
 .chat-area {
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  padding: 20px 0;
 }
-.messages {
   width: 100%;
-  max-width: 900px;
   margin: 0 auto;
-  padding: 0 24px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
 }
 .message {
   display: flex;
   flex-direction: column;
-  gap: 4px;
   animation: slideIn 0.3s ease;
 }
@@ -377,45 +528,49 @@ body {
   align-items: flex-start;
 }
 .bubble {
-  padding: 12px 16px;
-  border-radius: 12px;
-  max-width: 70%;
   word-wrap: break-word;
   overflow-wrap: break-word;
   font-size: 13px;
-  line-height: 1.5;
 }
 .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);
-  color: var(--text-1);
   max-width: 85%;
 }
 .bubble p {
-  margin-bottom: 8px;
 }
 .bubble p:last-child {
   margin-bottom: 0;
 }
 .bubble-meta {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border);
   font-size: 10px;
   flex-wrap: wrap;
 }
@@ -424,187 +579,253 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-weight: 600;
 }
 .badge.verified {
-  background: rgba(76,175,130,0.15);
-  color: var(--green);
 }
 .badge.unverified {
-  background: rgba(224,82,82,0.15);
-  color: #e8a060;
 }
 .sources-btn {
-  background: var(--gold-glow);
   border: 1px solid var(--border-gold);
-  color: var(--gold);
-  padding: 2px 8px;
-  border-radius: 12px;
   cursor: pointer;
-  font-size: 10px;
-  font-weight: 500;
   transition: all 0.2s ease;
 }
 .sources-btn:hover {
-  background: rgba(200,168,75,0.25);
 }
 .bubble.loading {
-  color: var(--text-3);
 }
 .dots {
   display: flex;
-  gap: 4px;
 }
 .dots span {
-  width: 5px;
-  height: 5px;
   border-radius: 50%;
-  background: var(--gold);
-  animation: bounce 1.2s infinite;
 }
 .dots span:nth-child(2) { animation-delay: 0.2s; }
 .dots span:nth-child(3) { animation-delay: 0.4s; }
 @keyframes bounce {
-  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
-  30% { transform: translateY(-6px); opacity: 1; }
 }
-/* ── ANALYTICS ── */
 .analytics-container {
   flex: 1;
   overflow-y: auto;
-  padding: 32px 24px;
-  max-width: 1200px;
   margin: 0 auto;
 }
-.analytics-container h2 {
-  font-family: 'Cormorant Garamond', serif;
-  font-size: 28px;
   font-weight: 700;
   margin-bottom: 8px;
 }
-.analytics-container > p {
-  color: var(--text-2);
-  margin-bottom: 24px;
 }
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 12px;
-  margin-bottom: 24px;
 }
 .stat-card {
-  background: var(--navy-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 16px 12px;
   text-align: center;
 }
 .stat-value {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--gold);
-  margin-bottom: 6px;
 }
 .stat-label {
   font-size: 10px;
-  color: var(--text-3);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
 }
-/* ── INPUT ── */
-.input-area {
-  padding: 12px 20px 16px;
-  background: linear-gradient(transparent, var(--navy) 30%);
-  border-top: 1px solid var(--border);
-  flex-shrink: 0;
-}
-.input-wrapper {
   display: flex;
-  gap: 8px;
-  background: var(--navy-2);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 8px 12px;
-  transition: border-color 0.2s ease;
-  max-width: 900px;
   margin: 0 auto;
 }
-.input-wrapper:focus-within {
-  border-color: var(--border-gold);
-}
 .query-input {
   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: 120px;
   line-height: 1.5;
 }
 .query-input::placeholder {
-  color: var(--text-3);
 }
-.send-btn {
-  width: 36px;
-  height: 36px;
-  background: var(--gold);
-  border: none;
-  border-radius: 6px;
-  color: var(--navy);
-  font-size: 20px;
   cursor: pointer;
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: background 0.2s ease;
 }
-.send-btn:hover {
-  background: #dbb95c;
 }
-.send-btn:disabled {
-  background: var(--navy-4);
-  color: var(--text-3);
   cursor: not-allowed;
 }
-.disclaimer-line {
-  text-align: center;
-  font-size: 10px;
-  color: var(--text-3);
-  margin-top: 6px;
 }
-/* ── RESPONSIVE ── */
 @media (max-width: 768px) {
   .app-container {
     flex-direction: column;
@@ -612,12 +833,71 @@ body {
   .sidebar {
     width: 100%;
-    max-height: 40vh;
     border-right: none;
-    border-bottom: 1px solid var(--border);
   }
-  .messages {
     padding: 0 16px;
   }
@@ -625,7 +905,134 @@ body {
     max-width: 90%;
   }
   .suggestions {
     grid-template-columns: 1fr;
   }
 }

+/* ═══════════════════════════════════════════════════════════════
+   NYAYA SETU — COURTROOM LEGAL RESEARCH INTERFACE
+   Professional judicial aesthetic with formal legal typography
+   ═══════════════════════════════════════════════════════════════ */
 * { margin: 0; padding: 0; box-sizing: border-box; }
 :root {
+  /* Judicial Color Palette */
+  --judicial-dark: #1a1410;      /* Deep wood/bench */
+  --judicial-navy: #1c233e;       /* Formal navy */
+  --judicial-maroon: #621e3d;     /* Judicial accent */
+  --seal-gold: #d4af37;           /* Official seal gold */
+  --seal-gold-dim: #a8860a;       /* Dimmed gold */
+  --parchment: #f4ede5;           /* Legal document white */
+  --text-dark: #1a1410;           /* Primary text */
+  --text-medium: #4a4a4a;         /* Secondary text */
+  --text-light: #7a7a7a;          /* Tertiary text */
+  /* Borders & Dividers */
+  --border-dark: rgba(26, 20, 16, 0.1);
+  --border-accent: rgba(212, 175, 55, 0.2);
+  --border-gold: rgba(212, 175, 55, 0.5);
+  /* Status Colors */
+  --verified-green: #2d5d3f;
+  --attention-red: #8b3e3e;
+  --neutral-gray: #6b5f52;
 }
 html, body { height: 100%; }
 body {
+  font-family: 'Lora', serif;
+  background: linear-gradient(135deg, #f4ede5 0%, #e8e0d8 100%);
+  color: var(--text-dark);
   font-size: 14px;
   line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
 }
+/* ═════════════════════════════════════════
+   LAYOUT STRUCTURE
+   ═════════════════════════════════════════ */
 .app-container {
   display: flex;
   height: 100vh;
   overflow: hidden;
+  background: #f4ede5;
 }
+/* ═════════════════════════════════════════
+   SIDEBAR / JUDICIAL REGISTRY PANEL
+   ═════════════════════════════════════════ */
 .sidebar {
+  width: 280px;
+  background: linear-gradient(180deg, #2c221a 0%, #1a1410 100%);
+  border-right: 3px solid var(--seal-gold);
   display: flex;
   flex-direction: column;
+  padding: 20px;
+  gap: 16px;
   overflow-y: auto;
   transition: width 0.3s ease;
+  color: #e8d7c3;
+  box-shadow: inset -2px 0 8px rgba(0, 0, 0, 0.3);
 }
 .sidebar.collapsed {
+  width: 70px;
 }
 .sidebar.collapsed .brand-text,
+.sidebar.collapsed .action-group,
+.sidebar.collapsed .registry-section,
 .sidebar.collapsed .sidebar-footer {
   display: none;
 }
+/* ── Judicial Seal Header ── */
 .sidebar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid var(--border-gold);
 }
+.judicial-seal {
+  width: 48px;
+  height: 48px;
+  color: var(--seal-gold);
+  flex-shrink: 0;
 }
+.seal-svg {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
+}
+.brand-text {
+  flex: 1;
 }
 .brand-name {
+  font-family: 'Crimson Text', serif;
   font-size: 18px;
   font-weight: 700;
+  color: var(--seal-gold);
+  letter-spacing: 2px;
   line-height: 1.1;
 }
 .brand-sub {
   font-size: 10px;
+  color: #a89968;
   text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-top: 2px;
 }
 .sidebar-toggle {
   background: none;
+  border: 1px solid var(--border-gold);
+  color: var(--seal-gold);
+  font-size: 18px;
   cursor: pointer;
+  padding: 6px 8px;
   border-radius: 4px;
   transition: all 0.2s ease;
+  flex-shrink: 0;
 }
 .sidebar-toggle:hover {
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--seal-gold);
+}
+/* ── Action Buttons ── */
+.action-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 .btn-primary, .btn-secondary {
   width: 100%;
+  padding: 11px 14px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold);
+  font-family: 'Lora', serif;
   font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
+  gap: 7px;
   transition: all 0.2s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 .btn-primary {
+  background: linear-gradient(135deg, var(--seal-gold), #c9a535);
+  border-color: var(--seal-gold);
+  color: var(--text-dark);
 }
 .btn-primary:hover {
+  background: linear-gradient(135deg, #e8c547, #d4af37);
+  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
+  transform: translateY(-1px);
 }
 .btn-secondary {
+  background: rgba(212, 175, 55, 0.08);
+  color: #d4af37;
 }
 .btn-secondary:hover {
+  background: rgba(212, 175, 55, 0.15);
+  border-color: var(--seal-gold);
 }
+/* ── Case Registry ── */
+.registry-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 200px;
+}
+.registry-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding-top: 12px;
+}
+.registry-title {
+  font-size: 10px;
+  font-weight: 700;
+  color: #a89968;
   text-transform: uppercase;
+  letter-spacing: 1.5px;
+}
+.registry-divider {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--seal-gold), transparent);
 }
 .sessions-list {
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  gap: 6px;
 }
 .sessions-empty {
+  font-size: 11px;
+  color: #8b7f75;
   font-style: italic;
   padding: 12px 8px;
+  text-align: center;
 }
 .session-item {
+  padding: 10px 12px;
+  border-radius: 3px;
+  background: rgba(212, 175, 55, 0.05);
   border: 1px solid transparent;
   font-size: 12px;
+  color: #d4cfc9;
   cursor: pointer;
   transition: all 0.2s ease;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .session-item:hover {
+  background: rgba(212, 175, 55, 0.12);
+  border-color: var(--border-gold);
 }
 .session-item.active {
+  background: rgba(212, 175, 55, 0.2);
+  border-color: var(--seal-gold);
+  color: var(--seal-gold);
 }
+/* ── Sidebar Footer ── */
 .sidebar-footer {
+  padding-top: 16px;
+  border-top: 1px solid var(--border-gold);
+  text-align: center;
+}
+.court-info {
+  margin-bottom: 12px;
 }
 .disclaimer {
+  font-size: 10px;
+  color: #d4a574;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 4px;
+}
+.disclaimer-text {
+  font-size: 9px;
+  color: #a89968;
+  line-height: 1.4;
 }
+.court-meta {
   font-size: 9px;
+  color: #8b7f75;
+}
+.meta-text {
+  margin: 1px 0;
 }
+/* ═════════════════════════════════════════
+   MAIN CONTENT AREA
+   ═════════════════════════════════════════ */
 .main-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background: #f4ede5;
 }
+/* ── Top Bar / Bench Header ── */
 .topbar {
+  height: 70px;
+  border-bottom: 3px double var(--seal-gold);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 12px 32px;
   flex-shrink: 0;
+  background: linear-gradient(180deg, #faf6f1 0%, #f4ede5 100%);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+.topbar-left {
+  flex: 1;
 }
 .topbar-title {
+  font-family: 'Crimson Text', serif;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-dark);
+  letter-spacing: 1px;
+}
+.topbar-subtitle {
+  font-family: 'Lora', serif;
+  font-size: 11px;
+  color: var(--text-light);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-top: 2px;
 }
+.status-indicator {
   display: flex;
   align-items: center;
+  gap: 8px;
+  background: rgba(45, 93, 63, 0.1);
+  border: 1px solid rgba(45, 93, 63, 0.3);
+  border-radius: 3px;
+  padding: 7px 14px;
+  font-size: 11px;
+  color: var(--verified-green);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 .status-dot {
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
+  background: var(--verified-green);
+}
+.status-indicator.loading {
+  background: rgba(212, 175, 55, 0.1);
+  color: var(--seal-gold-dim);
+  border-color: var(--border-gold);
 }
+.status-indicator.loading .status-dot {
+  background: var(--seal-gold);
+  animation: pulse 1.2s infinite;
 }
 @keyframes pulse {
   0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 }
+/* ═════════════════════════════════════════
+   SCREEN SECTIONS
+   ═════════════════════════════════════════ */
 .screen {
   display: none;
   flex: 1;
   display: flex;
 }
+/* ────────────────────────────────────────
+   WELCOME / RESEARCH INITIATION SCREEN
+   ──────────────────────────────────────── */
 .welcome-container {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  padding: 50px 32px;
   text-align: center;
+  overflow-y: auto;
+}
+.welcome-graphic {
+  width: 120px;
+  height: 120px;
+  margin-bottom: 30px;
+  color: var(--seal-gold);
+  opacity: 0.8;
 }
 .welcome-icon {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
 }
 .welcome-container h2 {
+  font-family: 'Crimson Text', serif;
+  font-size: 48px;
   font-weight: 700;
   margin-bottom: 12px;
+  color: var(--text-dark);
+  letter-spacing: 2px;
 }
 .welcome-container > p {
+  color: var(--text-medium);
+  margin-bottom: 36px;
+  max-width: 650px;
+  font-size: 15px;
+  line-height: 1.7;
+}
+.text-muted {
+  font-size: 12px;
+  color: var(--text-light);
+  display: block;
+  margin-top: 6px;
 }
+/* ── Suggestions Grid ── */
 .suggestions {
+  display: flex;
+  flex-direction: column;
   gap: 12px;
+  max-width: 750px;
+  width: 100%;
+}
+.suggestion-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-light);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  text-align: left;
+  margin-bottom: 6px;
 }
 .suggestion {
+  padding: 14px 16px;
+  background: #ffffff;
+  border: 1px solid var(--border-dark);
+  border-radius: 3px;
+  color: var(--text-medium);
+  font-family: 'Lora', serif;
+  font-size: 13px;
   cursor: pointer;
   text-align: left;
+  line-height: 1.5;
   transition: all 0.2s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .suggestion:hover {
+  background: #faf6f1;
   border-color: var(--border-gold);
+  color: var(--text-dark);
+  box-shadow: 0 3px 8px rgba(212, 175, 55, 0.12);
+  transform: translateY(-2px);
 }
+/* ────────────────────────────────────────
+   CHAT / PROCEEDINGS SCREEN
+   ──────────────────────────────────────── */
 .chat-area {
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
+  padding: 24px 0;
+  background: #f4ede5;
 }
+.proceedings {
   width: 100%;
+  max-width: 950px;
   margin: 0 auto;
+  padding: 0 32px;
   display: flex;
   flex-direction: column;
+  gap: 20px;
 }
 .message {
   display: flex;
   flex-direction: column;
+  gap: 6px;
   animation: slideIn 0.3s ease;
 }
   align-items: flex-start;
 }
+/* ── Speech Bubbles ── */
 .bubble {
+  padding: 16px 18px;
+  border-radius: 2px;
+  max-width: 75%;
   word-wrap: break-word;
   overflow-wrap: break-word;
   font-size: 13px;
+  line-height: 1.6;
+  border-left: 4px solid transparent;
 }
 .bubble.user {
+  background: #e8dfd8;
+  border-color: var(--neutral-gray);
+  color: var(--text-dark);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 }
 .bubble.ai {
+  background: #ffffff;
+  border-color: var(--seal-gold);
+  color: var(--text-dark);
   max-width: 85%;
+  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1);
 }
 .bubble p {
+  margin-bottom: 10px;
 }
 .bubble p:last-child {
   margin-bottom: 0;
 }
+/* ── Bubble Metadata ── */
 .bubble-meta {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-dark);
   font-size: 10px;
   flex-wrap: wrap;
 }
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  padding: 3px 10px;
+  border-radius: 2px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 9px;
 }
 .badge.verified {
+  background: rgba(45, 93, 63, 0.15);
+  color: var(--verified-green);
+  border: 1px solid rgba(45, 93, 63, 0.3);
 }
 .badge.unverified {
+  background: rgba(139, 62, 62, 0.15);
+  color: var(--attention-red);
+  border: 1px solid rgba(139, 62, 62, 0.3);
 }
 .sources-btn {
+  background: rgba(212, 175, 55, 0.15);
   border: 1px solid var(--border-gold);
+  color: var(--seal-gold-dim);
+  padding: 3px 10px;
+  border-radius: 2px;
   cursor: pointer;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
   transition: all 0.2s ease;
 }
 .sources-btn:hover {
+  background: rgba(212, 175, 55, 0.25);
+  border-color: var(--seal-gold);
+  color: var(--seal-gold);
 }
+/* ── Loading State ── */
 .bubble.loading {
+  color: var(--text-light);
 }
 .dots {
   display: flex;
+  gap: 5px;
 }
 .dots span {
+  width: 6px;
+  height: 6px;
   border-radius: 50%;
+  background: var(--seal-gold);
+  animation: bounce 1.4s infinite;
 }
 .dots span:nth-child(2) { animation-delay: 0.2s; }
 .dots span:nth-child(3) { animation-delay: 0.4s; }
 @keyframes bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+  30% { transform: translateY(-8px); opacity: 1; }
 }
+/* ────────────────────────────────────────
+   ANALYTICS DASHBOARD
+   ──────────────────────────────────────── */
 .analytics-container {
   flex: 1;
   overflow-y: auto;
+  padding: 36px 32px;
+  max-width: 1100px;
   margin: 0 auto;
 }
+.analytics-header h2 {
+  font-family: 'Crimson Text', serif;
+  font-size: 36px;
   font-weight: 700;
   margin-bottom: 8px;
+  color: var(--text-dark);
+  letter-spacing: 1px;
 }
+.analytics-header > p {
+  color: var(--text-light);
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 28px;
 }
 .stats-grid {
   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 32px;
 }
 .stat-card {
+  background: #ffffff;
+  border: 1px solid var(--border-dark);
+  border-radius: 3px;
+  padding: 22px 16px;
   text-align: center;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease;
+}
+.stat-card:hover {
+  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.12);
+  border-color: var(--border-gold);
+}
+.stat-icon {
+  font-size: 28px;
+  margin-bottom: 8px;
+  opacity: 0.7;
 }
 .stat-value {
+  font-family: 'Crimson Text', serif;
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--seal-gold);
+  margin-bottom: 8px;
 }
 .stat-label {
   font-size: 10px;
+  color: var(--text-light);
   text-transform: uppercase;
+  letter-spacing: 1.5px;
+  font-weight: 600;
 }
+/* ────────────────────────────────────────
+   INPUT AREA / SUBMISSION BENCH
+   ──────────────────────────────────────── */
+.input-bench {
+  padding: 16px 32px 24px;
+  background: linear-gradient(transparent, rgba(244, 237, 229, 0.8) 40%, #f4ede5);
+  border-top: 1px solid var(--border-dark);
+  flex-shrink: 0;
   display: flex;
+  gap: 12px;
+  max-width: 950px;
+  width: 100%;
   margin: 0 auto;
 }
 .query-input {
   flex: 1;
+  background: #ffffff;
+  border: 1px solid var(--border-dark);
+  border-radius: 2px;
   outline: none;
+  font-family: 'Lora', serif;
+  font-size: 13px;
+  color: var(--text-dark);
+  padding: 12px 14px;
   resize: none;
+  max-height: 100px;
   line-height: 1.5;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.query-input:focus {
+  border-color: var(--border-gold);
+  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
 }
 .query-input::placeholder {
+  color: var(--text-light);
+  font-style: italic;
 }
+.btn-submit {
+  padding: 12px 18px;
+  background: linear-gradient(135deg, var(--seal-gold), #c9a535);
+  border: 1px solid var(--seal-gold);
+  border-radius: 2px;
+  color: var(--text-dark);
+  font-family: 'Lora', serif;
+  font-size: 12px;
+  font-weight: 700;
   cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
+  gap: 6px;
 }
+.btn-submit:hover:not(:disabled) {
+  background: linear-gradient(135deg, #e8c547, #d4af37);
+  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
+  transform: translateY(-1px);
 }
+.btn-submit:disabled {
+  background: #d0ccc5;
+  color: #a0a0a0;
   cursor: not-allowed;
+  box-shadow: none;
 }
+/* ═════════════════════════════════════════
+   RESPONSIVE DESIGN
+   ═════════════════════════════════════════ */
+@media (max-width: 1024px) {
+  .sidebar {
+    width: 260px;
+  }
+  .topbar {
+    padding: 12px 20px;
+  }
+  .topbar-title {
+    font-size: 24px;
+  }
+  .welcome-container {
+    padding: 40px 20px;
+  }
+  .proceedings {
+    padding: 0 20px;
+  }
+  .input-bench {
+    padding: 12px 20px 16px;
+  }
+  .analytics-container {
+    padding: 24px 20px;
+  }
 }
 @media (max-width: 768px) {
   .app-container {
     flex-direction: column;
   .sidebar {
     width: 100%;
+    max-height: 35vh;
     border-right: none;
+    border-bottom: 3px solid var(--seal-gold);
+    border-top: none;
+  }
+  .sidebar.collapsed {
+    width: 100%;
+  }
+  .sidebar.collapsed .brand-text,
+  .sidebar.collapsed .action-group,
+  .sidebar.collapsed .registry-section,
+  .sidebar.collapsed .sidebar-footer {
+    display: flex;
+  }
+  .main-content {
+    flex: 1;
+    overflow: hidden;
+  }
+  .topbar {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    height: auto;
+    padding: 12px 16px;
+  }
+  .topbar-title {
+    font-size: 22px;
+  }
+  .status-indicator {
+    align-self: flex-start;
+  }
+  .welcome-container {
+    padding: 30px 16px;
+  }
+  .welcome-icon {
+    width: 90px;
+    height: 90px;
+  }
+  .welcome-container h2 {
+    font-size: 32px;
+  }
+  .welcome-container > p {
+    font-size: 13px;
+  }
+  .suggestions {
+    max-width: 100%;
   }
+  .suggestion {
+    font-size: 12px;
+    padding: 12px 14px;
+  }
+  .proceedings {
     padding: 0 16px;
   }
     max-width: 90%;
   }
+  .bubble.ai {
+    max-width: 95%;
+  }
+  .input-bench {
+    flex-direction: column;
+    padding: 12px 16px 16px;
+    max-width: 100%;
+  }
+  .query-input {
+    width: 100%;
+  }
+  .btn-submit {
+    width: 100%;
+    justify-content: center;
+  }
+  .analytics-container {
+    padding: 16px;
+  }
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 480px) {
+  .sidebar {
+    max-height: 30vh;
+  }
+  .topbar {
+    padding: 10px 12px;
+  }
+  .topbar-title {
+    font-size: 18px;
+  }
+  .topbar-subtitle {
+    font-size: 9px;
+  }
+  .welcome-container {
+    padding: 20px 12px;
+  }
+  .welcome-graphic {
+    width: 80px;
+    height: 80px;
+  }
+  .welcome-container h2 {
+    font-size: 26px;
+  }
+  .welcome-container > p {
+    font-size: 12px;
+  }
   .suggestions {
+    gap: 8px;
+  }
+  .suggestion {
+    font-size: 11px;
+    padding: 10px 12px;
+  }
+  .proceedings {
+    padding: 0 12px;
+    gap: 16px;
+  }
+  .bubble {
+    padding: 12px 14px;
+    font-size: 12px;
+    max-width: 95%;
+  }
+  .stats-grid {
     grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+/* ═════════════════════════════════════════
+   SCROLLBAR STYLING
+   ═════════════════════════════════════════ */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(212, 175, 55, 0.3);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(212, 175, 55, 0.5);
+}
+/* ─────────────────────────────────────────
+   PRINT STYLES
+   ───────────────────────────────────────── */
+@media print {
+  .sidebar, .topbar, .input-bench, .status-indicator {
+    display: none;
+  }
+  .main-content {
+    width: 100%;
+  }
+  .proceedings {
+    max-width: 100%;
+  }
+  .bubble {
+    page-break-inside: avoid;
   }
 }

frontend/style_old_backup.css ADDED Viewed

	@@ -0,0 +1,641 @@

+/* ═══════════════════════════════════════════════════════════════
+   NYAYA SETU — COURTROOM LEGAL RESEARCH INTERFACE
+   Professional judicial aesthetic with formal legal typography
+   ═══════════════════════════════════════════════════════════════ */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  /* Judicial Color Palette */
+  --judicial-dark: #1a1410;      /* Deep wood/bench */
+  --judicial-navy: #1c233e;       /* Formal navy */
+  --judicial-maroon: #621e3d;     /* Judicial accent */
+  --seal-gold: #d4af37;           /* Official seal gold */
+  --seal-gold-dim: #a8860a;       /* Dimmed gold */
+  --parchment: #f4ede5;           /* Legal document white */
+  --text-dark: #1a1410;           /* Primary text */
+  --text-medium: #4a4a4a;         /* Secondary text */
+  --text-light: #7a7a7a;          /* Tertiary text */
+  /* Borders & Dividers */
+  --border-dark: rgba(26, 20, 16, 0.1);
+  --border-accent: rgba(212, 175, 55, 0.2);
+  --border-gold: rgba(212, 175, 55, 0.5);
+  /* Status Colors */
+  --verified-green: #2d5d3f;
+  --attention-red: #8b3e3e;
+  --neutral-gray: #6b5f52;
+}
+html, body { height: 100%; }
+body {
+  font-family: 'DM Sans', sans-serif;
+  background: var(--navy);
+  color: var(--text-1);
+  font-size: 14px;
+  line-height: 1.6;
+}
+/* ── LAYOUT ── */
+.app-container {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+/* ── SIDEBAR ── */
+.sidebar {
+  width: 272px;
+  background: var(--navy-2);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 12px;
+  overflow-y: auto;
+  transition: width 0.3s ease;
+}
+.sidebar.collapsed {
+  width: 60px;
+}
+.sidebar.collapsed .brand-text,
+.sidebar.collapsed .btn-primary span,
+.sidebar.collapsed .btn-secondary span,
+.sidebar.collapsed .sessions-header,
+.sidebar.collapsed .sidebar-footer {
+  display: none;
+}
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+}
+.brand-icon {
+  font-size: 24px;
+}
+.brand-name {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--gold);
+  line-height: 1.1;
+}
+.brand-sub {
+  font-size: 10px;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.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;
+  border: 1px solid var(--border);
+  font-family: 'DM Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.2s ease;
+}
+.btn-primary {
+  background: var(--gold-glow);
+  border-color: var(--border-gold);
+  color: var(--gold);
+}
+.btn-primary:hover {
+  background: rgba(200,168,75,0.25);
+  border-color: var(--gold);
+}
+.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;
+}
+/* ── 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;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sessions-empty {
+  font-size: 12px;
+  color: var(--text-3);
+  font-style: italic;
+  padding: 12px 8px;
+}
+.session-item {
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: transparent;
+  border: 1px solid transparent;
+  font-size: 12px;
+  color: var(--text-2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.session-item:hover {
+  background: var(--navy-3);
+}
+.session-item.active {
+  background: var(--navy-4);
+  border-color: var(--border-gold);
+  color: var(--text-1);
+}
+.sidebar-footer {
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+  font-size: 10px;
+  color: var(--text-3);
+  line-height: 1.4;
+}
+.disclaimer {
+  margin-bottom: 6px;
+}
+.meta {
+  font-size: 9px;
+}
+/* ── MAIN CONTENT ── */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+/* ── TOPBAR ── */
+.topbar {
+  height: 56px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  flex-shrink: 0;
+  background: var(--navy);
+}
+.topbar-title {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text-1);
+}
+.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);
+}
+.status-pill.loading .status-dot {
+  background: var(--gold);
+  animation: pulse 1s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+/* ── SCREENS ── */
+.screen {
+  display: none;
+  flex: 1;
+  overflow: hidden;
+}
+.screen.active {
+  display: flex;
+}
+/* ── WELCOME ── */
+.welcome-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 24px;
+  text-align: center;
+}
+.welcome-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  opacity: 0.7;
+}
+.welcome-container h2 {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 40px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  color: var(--text-1);
+}
+.welcome-container > p {
+  color: var(--text-2);
+  margin-bottom: 32px;
+  max-width: 600px;
+}
+.suggestions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  max-width: 800px;
+}
+.suggestion {
+  padding: 12px 14px;
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-2);
+  font-family: 'DM Sans', sans-serif;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: left;
+  line-height: 1.4;
+  transition: all 0.2s ease;
+}
+.suggestion:hover {
+  background: var(--navy-3);
+  border-color: var(--border-gold);
+  color: var(--text-1);
+}
+/* ── CHAT ── */
+.chat-area {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0;
+}
+.messages {
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.message {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  animation: slideIn 0.3s ease;
+}
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.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;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.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);
+  color: var(--text-1);
+  max-width: 85%;
+}
+.bubble p {
+  margin-bottom: 8px;
+}
+.bubble p:last-child {
+  margin-bottom: 0;
+}
+.bubble-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  font-size: 10px;
+  flex-wrap: wrap;
+}
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-weight: 600;
+}
+.badge.verified {
+  background: rgba(76,175,130,0.15);
+  color: var(--green);
+}
+.badge.unverified {
+  background: rgba(224,82,82,0.15);
+  color: #e8a060;
+}
+.sources-btn {
+  background: var(--gold-glow);
+  border: 1px solid var(--border-gold);
+  color: var(--gold);
+  padding: 2px 8px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+.sources-btn:hover {
+  background: rgba(200,168,75,0.25);
+}
+.bubble.loading {
+  color: var(--text-3);
+}
+.dots {
+  display: flex;
+  gap: 4px;
+}
+.dots span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--gold);
+  animation: bounce 1.2s infinite;
+}
+.dots span:nth-child(2) { animation-delay: 0.2s; }
+.dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
+  30% { transform: translateY(-6px); opacity: 1; }
+}
+/* ── ANALYTICS ── */
+.analytics-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 24px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.analytics-container h2 {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.analytics-container > p {
+  color: var(--text-2);
+  margin-bottom: 24px;
+}
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.stat-card {
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px 12px;
+  text-align: center;
+}
+.stat-value {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--gold);
+  margin-bottom: 6px;
+}
+.stat-label {
+  font-size: 10px;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+/* ── INPUT ── */
+.input-area {
+  padding: 12px 20px 16px;
+  background: linear-gradient(transparent, var(--navy) 30%);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.input-wrapper {
+  display: flex;
+  gap: 8px;
+  background: var(--navy-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px 12px;
+  transition: border-color 0.2s ease;
+  max-width: 900px;
+  margin: 0 auto;
+}
+.input-wrapper:focus-within {
+  border-color: var(--border-gold);
+}
+.query-input {
+  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: 120px;
+  line-height: 1.5;
+}
+.query-input::placeholder {
+  color: var(--text-3);
+}
+.send-btn {
+  width: 36px;
+  height: 36px;
+  background: var(--gold);
+  border: none;
+  border-radius: 6px;
+  color: var(--navy);
+  font-size: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.2s ease;
+}
+.send-btn:hover {
+  background: #dbb95c;
+}
+.send-btn:disabled {
+  background: var(--navy-4);
+  color: var(--text-3);
+  cursor: not-allowed;
+}
+.disclaimer-line {
+  text-align: center;
+  font-size: 10px;
+  color: var(--text-3);
+  margin-top: 6px;
+}
+/* ── RESPONSIVE ── */
+@media (max-width: 768px) {
+  .app-container {
+    flex-direction: column;
+  }
+  .sidebar {
+    width: 100%;
+    max-height: 40vh;
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+  .messages {
+    padding: 0 16px;
+  }
+  .bubble {
+    max-width: 90%;
+  }
+  .suggestions {
+    grid-template-columns: 1fr;
+  }
+}