From d48f3ef3b2602df13ef8b9d7dc53351c8961c2b3 Mon Sep 17 00:00:00 2001
From: Adityasinh Sodha <adityasinh@proton.me>
Date: Mon, 28 Sep 2026 14:00:12 +0530
Subject: [PATCH 1/4] Redesign document vault interface

---
 index.html |   33 +-
 styles.css | 1281 +++++-----------------------------------------------
 2 files changed, 131 insertions(+), 1183 deletions(-)

diff --git a/index.html b/index.html
index 8fa09fb..811e7e7 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Chatbot</title>
+<title>ChatBot — Private document vault</title>
 <link rel="stylesheet" href="styles.css">
 <link rel="icon" href="icons/favicon.ico" type="image/ico">
 <link rel="manifest" href="manifest.json" />
@@ -14,27 +14,36 @@
 
 </head>
 <body>
-<!-- MAIN VAULT CONTAINER -->
 <div class="vault-container">
-  <h1>Chatbot</h1>
-  <div class="vault-toolbar">
-    <button id="editDocsBtn" type="button" title="Edit Documents">Manage</button>
-    <button id="aboutBtn" class="toolbar-btn">About</button>
-    <button id="helpBtn">?</button>
-  </div>
+  <header class="app-header">
+    <div class="brand">
+      <div class="brand-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 4.75A1.75 1.75 0 0 1 6.75 3h7.5L19 7.75v11.5A1.75 1.75 0 0 1 17.25 21h-10.5A1.75 1.75 0 0 1 5 19.25V4.75Z"/><path d="M14 3v5h5M8.5 13h7M8.5 16.5h5"/></svg></div>
+      <div class="brand-copy"><h1>ChatBot</h1><p>Your private document vault</p></div>
+    </div>
+    <nav class="vault-toolbar" aria-label="Application actions">
+      <button id="editDocsBtn" type="button" title="Manage your documents">Manage</button>
+      <button id="aboutBtn" type="button">About</button>
+      <button id="helpBtn" type="button" aria-label="Open user guide" title="User guide">?</button>
+    </nav>
+  </header>
+  <section class="search-intro" aria-labelledby="search-heading">
+    <p class="eyebrow">Document search</p>
+    <h2 id="search-heading">Find what you need, when you need it.</h2>
+    <p>Search your saved documents by the name you remember. Everything stays on this device.</p>
+  </section>
   <div class="chatbox" id="chatbox">
     <div class="typing-indicator" id="typingIndicator">
       <span></span><span></span><span></span>
     </div>
   </div>
-  <div class="input-area">
-    <button id="addDocBtn" title="Add Document">
+  <div class="input-area" role="search">
+    <button id="addDocBtn" type="button" title="Add a document" aria-label="Add a document">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
         <path d="M12 5v14m-7-7h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
-    <input type="text" id="userInput" placeholder="Type your query...">
-    <button id="sendBtn" title="Send">
+    <input type="text" id="userInput" aria-label="Search your documents" placeholder="Search your documents..." autocomplete="off">
+    <button id="sendBtn" type="button" title="Search" aria-label="Search">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path d="M12 5L6 11H10V19H14V11H18L12 5Z" fill="#141414"/>
       </svg>
diff --git a/styles.css b/styles.css
index 896e4dd..be23d3a 100644
--- a/styles.css
+++ b/styles.css
@@ -1,1179 +1,118 @@
+:root {
+  --canvas: #f8faf9;
+  --surface: #ffffff;
+  --surface-muted: #f3f6f4;
+  --text: #18211e;
+  --text-muted: #64706b;
+  --line: #dce3df;
+  --line-strong: #c8d3cd;
+  --accent: #167a5c;
+  --accent-hover: #106249;
+  --accent-soft: #e7f3ee;
+  --danger: #b42318;
+  --radius: 12px;
+  --shadow: 0 18px 45px rgba(29, 48, 39, .09);
+}
+
+* { box-sizing: border-box; }
+
 body {
+  min-width: 320px;
+  min-height: 100vh;
   margin: 0;
-  height: 100vh;
-  background: #141414;
-  color: #e9ecf5;
-  font-family: "Inter", "Poppins", sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-.vault-container {
-  backdrop-filter: blur(20px);
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 22px;
-  padding: 35px 30px;
-  width: 100%;
-  max-width: 440px;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  transition: all 0.3s ease;
-}
-
-.vault-container:hover {
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 0 8px 50px rgba(0, 0, 0, 0.7);
-}
-
-.vault-container h1 {
-  font-size: 1.6rem;
-  font-weight: 600;
-  color: #fcfcfc;
-  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
-  letter-spacing: 0.8px;
-  margin-bottom: 8px;
-}
-
-.chatbox {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 14px;
-  height: 340px;
-  padding: 14px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  scroll-behavior: smooth;
-  transition: background 0.3s ease;
-}
-
-.chatbox::-webkit-scrollbar {
-  width: 6px;
-}
-
-.chatbox::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 6px;
-}
-
-.user-message,
-.bot-message {
-  padding: 10px 14px;
-  border-radius: 14px;
-  max-width: 85%;
-  word-wrap: break-word;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  animation: fadeUp 0.3s ease;
-}
-
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.user-message {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fcfcfc;
-  align-self: flex-end;
-  border-bottom-right-radius: 4px;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(4px);
-}
-
-.bot-message {
-  background: rgba(255, 255, 255, 0.08);
-  color: #e2e6f3;
-  align-self: flex-start;
-  border-bottom-left-radius: 4px;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
-}
-
-.input-area {
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  margin-top: 10px;
-}
-
-#userInput {
-  width: 100%;
-  padding: 12px 48px 12px 16px; /* space for button */
-  border: none;
-  border-radius: 30px;
-  background: rgba(255, 255, 255, 0.08);
-  color: #fcfcfc;
+  background: var(--canvas);
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 15px;
-  outline: none;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
-}
-
-#sendBtn {
-  all: unset;
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.25s ease;
-  border-radius: 50%;
-}
-
-#sendBtn:hover {
-  background: rgba(255, 255, 255, 0.08); 
-  transform: translateY(-50%) scale(1.08);
-}
-
-#sendBtn:active {
-  transform: translateY(-50%) scale(0.95);
-  background: rgba(255, 255, 255, 0.08);
-}
-
-#sendBtn svg {
-  width: 22px;
-  height: 22px;
-  stroke: #ffffff;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  fill: none;
-  transform: rotate(45deg);
-  transition: all 0.25s ease;
-}
-
-#sendBtn:hover svg {
-  stroke: #111; 
-}
-
-#sendBtn:active svg {
-  stroke: #000;
-}
-
-#sendBtn svg {
-  width: 22px;
-  height: 22px;
-  transform: rotate(45deg);
-  transition: fill 0.18s ease, stroke 0.18s ease, transform 0.25s ease;
-}
-
-#sendBtn svg path {
-  fill: none;
-  stroke: #ffffff;
-}
-
-#sendBtn:hover svg path,
-#sendBtn:active svg path {
-  fill: #ffffff;    
-  stroke: #ffffff;  
-}
-
-
-.input-area input {
-  flex: 1;
-  padding: 11px 14px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: rgba(255, 255, 255, 0.08);
-  color: #e9ecf5;
-  font-size: 0.95rem;
-  transition: all 0.25s ease;
+  line-height: 1.5;
 }
 
-.input-area input:focus {
-  outline: none;
-  border-color: #619eff;
-  box-shadow: 0 0 8px rgba(90, 157, 248, 0.4);
-  background: rgba(255, 255, 255, 0.12);
-}
+button, input, textarea { font: inherit; }
+button { cursor: pointer; }
+button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
 
+.vault-container {
+  width: min(100%, 1000px);
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 32px 40px 24px;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  gap: 24px;
+}
+
+.app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
+.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: var(--radius); background: var(--accent); color: #fff; box-shadow: 0 5px 12px rgba(22, 122, 92, .2); }
+.brand-mark svg { width: 21px; height: 21px; }
+.brand-copy h1 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
+.brand-copy p { margin: 1px 0 0; color: var(--text-muted); font-size: .78rem; }
+
+.vault-toolbar { display: flex; align-items: center; gap: 4px; }
 button {
-  background: linear-gradient(135deg, #2b2b2b, #1a1a1a);
-  color: #fcfcfc;
-  border: none;
-  border-radius: 12px;
-  padding: 10px 15px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.25s ease;
-  font-weight: 500;
-}
-
-button:hover {
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
-  transform: translateY(-1px);
-}
-
-button:active {
-  transform: scale(0.97);
-  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
-}
-
-.fab-container {
-  position: fixed;
-  bottom: 25px;
-  right: 25px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 10px;
-  z-index: 200;
-}
-
-.fab-main {
-  background: linear-gradient(145deg, #5a9df8, #3268f5);
-  border: none;
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  color: #fff;
-  font-size: 1.4rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
-  transition: all 0.3s ease;
-}
-
-.fab-main:hover {
-  transform: rotate(45deg);
-  box-shadow: 0 8px 30px rgba(90, 157, 248, 0.5);
-}
-
-.fab-options {
-  display: none;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.fab-options button {
-  width: 46px;
-  height: 46px;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.08);
-  color: #d5dbff;
-  font-size: 1.2rem;
-  cursor: pointer;
-  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
-  transition: all 0.25s ease;
-}
-
-.fab-options button:hover {
-  background: rgba(255, 255, 255, 0.15);
-  transform: translateY(-2px);
-}
-
-.popup {
-  position: fixed;
-  inset: 0;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  z-index: 100;
-  background: rgba(10, 10, 15, 0.6);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  animation: fadeIn 0.25s ease-in-out;
-}
-
-.popup-content {
-  background: rgba(255, 255, 255, 0.05);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 20px;
-  padding: 32px 26px;
-  width: 100%;
-  max-width: 400px;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  color: #f1f2f6;
-  transition: all 0.3s ease;
-}
-
-.popup-content h2 {
-  text-align: center;
-  font-size: 1.3rem;
-  color: #ffffff;
-  font-weight: 600;
-  text-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
-}
-
-.popup-content input,
-.popup-content textarea {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 12px;
-  padding: 10px 12px;
-  font-size: 0.9rem;
-  color: #eaeaea;
-  resize: none;
-  transition: all 0.25s ease;
-}
-
-.popup-content input:focus,
-.popup-content textarea:focus {
-  outline: none;
-  border-color: rgba(90, 157, 248, 0.4);
-  box-shadow: 0 0 8px rgba(90, 157, 248, 0.3);
-  background: rgba(255, 255, 255, 0.12);
-}
-
-.popup-content label {
-  font-size: 0.85rem;
-  color: #c9cce2;
-  margin-top: 4px;
-}
-
-.popup-actions {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: 10px;
-}
-
-.popup-actions button {
-  flex: 1;
-  padding: 10px 0;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: #f1f1f1;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.25s ease;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(8px);
-}
-
-.popup-actions button:hover {
-  background: rgba(90, 157, 248, 0.15);
-  border-color: rgba(90, 157, 248, 0.4);
-  box-shadow: 0 0 14px rgba(90, 157, 248, 0.35);
-  transform: translateY(-2px);
-}
-
-.popup-actions button:active {
-  transform: scale(0.96);
-  background: rgba(90, 157, 248, 0.25);
-  box-shadow: 0 0 10px rgba(90, 157, 248, 0.25);
-  border-color: rgba(90, 157, 248, 0.4);
-}
-
-
-.typing-indicator {
-  display: none;
-  align-self: flex-start;
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 14px;
-  padding: 10px 14px;
-  margin-top: 6px;
-  width: 60px;
-  justify-content: space-around;
-  box-shadow: 0 0 8px rgba(100, 150, 255, 0.3);
-}
-
-.typing-indicator span {
-  width: 8px;
-  height: 8px;
-  background: #5a9df8;
-  border-radius: 50%;
-  opacity: 0.6;
-  animation: typingBlink 1.3s infinite ease-in-out;
-}
-
-.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
-.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
-
-@keyframes typingBlink {
-  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
-  40% { opacity: 1; transform: scale(1.2); }
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: scale(0.96); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-@media (max-width: 500px) {
-  .vault-container {
-    width: 92%;
-    padding: 24px 20px;
-  }
-  .popup-content {
-    max-width: 92%;
-  }
-}
-
-.vault-toolbar {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-  margin-bottom: 10px;
-  padding: 8px 12px;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(10px);
-}
-
-.vault-toolbar button {
-  background: rgba(255, 255, 255, 0.08);
-  color: #fcfcfc;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 10px;
-  padding: 8px 16px;
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.25s ease;
-  font-weight: 500;
-}
-
-.vault-toolbar button:hover {
-  background: rgba(255, 255, 255, 0.15);
-  color: #fcfcfc;
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
-  transform: translateY(-1px);
-}
-
-.vault-toolbar button:active {
-  transform: scale(0.96);
-}
-
-/* Typing animation */
-.typing {
-  display: flex;
-  gap: 4px;
-  padding: 8px;
-  align-items: center;
-}
-.typing span {
-  width: 6px;
-  height: 6px;
-  background: #9cbcff;
-  border-radius: 50%;
-  animation: blink 1.3s infinite ease-in-out;
-}
-.typing span:nth-child(2) {
-  animation-delay: 0.2s;
-}
-.typing span:nth-child(3) {
-  animation-delay: 0.4s;
-}
-@keyframes blink {
-  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
-  40% { opacity: 1; transform: scale(1); }
-}
-
-/* Toast Notifications */
-.toast {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  background: rgba(20, 25, 45, 0.8);
+  min-height: 40px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  padding: 9px 14px;
+  background: var(--accent);
   color: #fff;
-  padding: 10px 18px;
-  border-radius: 8px;
-  opacity: 0;
-  transform: translateY(10px);
-  transition: all 0.3s ease;
-  font-size: 0.85rem;
-  backdrop-filter: blur(6px);
-  z-index: 9999;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-.toast.show {
-  opacity: 1;
-  transform: translateY(0);
-}
-.toast.success { border-color: rgba(50, 255, 140, 0.4); }
-.toast.error { border-color: rgba(255, 80, 80, 0.5); }
-
-.chatbox img {
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
-  transition: transform 0.3s ease;
-}
-.chatbox img:hover {
-  transform: scale(1.05);
-}
-
-.file-download-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
-  margin-top: 8px;
-  padding: 6px 12px;
-  border-radius: 10px;
-  border: 1px solid rgba(8, 9, 12, 0.4);
-  background: rgba(255, 255, 255, 0.08);
-  color: rgb(252, 252, 252);
-  font-size: 0.82rem;
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.2s ease;
-}
-
-.file-download-link:hover {
-  background: rgba(255, 255, 255, 0.15);
-  color: #fcfcfc;
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
-  transform: translateY(-1px);
-}
-
-.popup-actions {
-  display: flex;
-  justify-content: space-between; /* puts buttons at ends */
-  gap: 12px; /* space between buttons */
-  margin-top: 12px;
-}
-
-.popup-actions button {
-  flex: 1; /* buttons take equal width */
-  padding: 10px 0;
-}
-
-#addDocBtn {
-  all: unset;
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-  cursor: pointer;
-  transition: all 0.25s ease;
-}
-
-#addDocBtn:hover {
-  background: rgba(90, 157, 248, 0.15);
-  border-color: rgba(90, 157, 248, 0.4);
-  box-shadow: 0 0 10px rgba(90, 157, 248, 0.3);
-  transform: translateY(-1px);
-}
-
-#addDocBtn:active {
-  transform: scale(0.95);
-  background: rgba(90, 157, 248, 0.25);
-  box-shadow: 0 0 8px rgba(90, 157, 248, 0.25);
-}
-
-.edit-doc-list {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.edit-doc-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  padding: 12px 14px;
-  border-radius: 14px;
-  color: #fff;
-  backdrop-filter: blur(10px);
-}
-
-.edit-doc-item:hover {
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.18);
-}
-
-.edit-buttons {
-  display: flex;
-  gap: 10px;
-}
-
-.edit-btn,
-.delete-btn {
-  padding: 6px 12px;
-  border-radius: 10px;
-  font-size: 0.78rem;
-  cursor: pointer;
-  transition: 0.25s ease;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.edit-btn {
-  background: rgba(80, 150, 255, 0.15);
-}
-
-.edit-btn:hover {
-  background: rgba(80, 150, 255, 0.3);
-}
-
-.delete-btn {
-  background: rgba(255, 70, 70, 0.15);
-}
-
-.delete-btn:hover {
-  background: rgba(255, 70, 70, 0.3);
-}
-
-/* EXPORT BUTTON */
-#exportBtn {
-  background: rgba(50, 255, 140, 0.15);
-  border: 1px solid rgba(50, 255, 140, 0.25);
-}
-
-#exportBtn:hover {
-  background: rgba(50, 255, 140, 0.35);
-  border-color: rgba(50, 255, 140, 0.55);
-  box-shadow: 0 0 12px rgba(50, 255, 140, 0.45);
-  transform: translateY(-2px);
-}
-
-#clearBtn {
-  background: rgba(255, 70, 70, 0.15);
-  border: 1px solid rgba(255, 70, 70, 0.25);
-}
-
-#clearBtn:hover {
-  background: rgba(255, 70, 70, 0.35);
-  border-color: rgba(255, 70, 70, 0.55);
-  box-shadow: 0 0 12px rgba(255, 70, 70, 0.45);
-  transform: translateY(-2px);
-}
-
-#importBtn {
-  background: rgba(80, 140, 255, 0.15);
-  border: 1px solid rgba(80, 140, 255, 0.25);
-}
-
-#importBtn:hover {
-  background: rgba(80, 140, 255, 0.35);
-  border-color: rgba(80, 140, 255, 0.55);
-  box-shadow: 0 0 12px rgba(80, 140, 255, 0.45);
-  transform: translateY(-2px);
-}
-
-#closeEditPopup {
-  background: rgba(255, 170, 60, 0.15);
-  border: 1px solid rgba(255, 170, 60, 0.25);
-}
-
-#closeEditPopup:hover {
-  background: rgba(255, 170, 60, 0.35);
-  border-color: rgba(255, 170, 60, 0.55);
-  box-shadow: 0 0 12px rgba(255, 170, 60, 0.45);
-  transform: translateY(-2px);
-}
-
-#editPopup {
-  display: none;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#editPopup .popup-content {
-  max-height: 340px;
-  overflow-y: auto;
-}
-
-.edit-actions {
-  width: 100%;
-  max-width: 400px;
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  margin-top: 12px;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 12px;
-  border-radius: 14px;
-  border: 1px solid rgba(255,255,255,0.1);
-  backdrop-filter: blur(14px);
-}
-
-.edit-actions button {
-  flex: 1;
-  padding: 10px 0;
-  border-radius: 12px;
-}
-
-.about-popup {
-  position: fixed;
-  inset: 0;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  z-index: 200;
-  background: rgba(10, 10, 15, 0.60);
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-  animation: fadeIn 0.25s ease;
-}
-
-.about-box {
-  position: relative;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  backdrop-filter: blur(22px);
-  -webkit-backdrop-filter: blur(22px);
-  border-radius: 20px;
-  padding: 28px 24px;
-  width: 100%;
-  max-width: 420px;
-  max-height: 85vh;
-  overflow-y: auto;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
-  text-align: center;
-  color: #f1f2f6;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255,255,255,0.25) transparent;
-}
-
-.about-box::-webkit-scrollbar {
-  width: 6px;
-}
-
-.about-box::-webkit-scrollbar-thumb {
-  background: rgba(255,255,255,0.25);
-  border-radius: 10px;
-}
-
-.about-title {
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: #ffffff;
-  text-shadow: 0 0 8px rgba(255,255,255,0.10);
-  margin: 0;
-}
-
-.about-logo {
-  width: 84px;
-  height: 84px;
-  object-fit: cover;
-  margin: 6px auto;
-  border-radius: 16px;
-  border: 1px solid rgba(255,255,255,0.10);
-  box-shadow: 0 6px 22px rgba(0,0,0,0.60);
-}
-
-.about-desc {
-  margin-bottom: 0px;
-  font-size: 0.95rem;
-  color: #e6e9f3;
-  line-height: 1.45;
-  opacity: 0.95;
-}
-
-.about-version {
-  margin-top: 0;
-  margin-bottom: -5px;
-  font-size: 0.84rem;
-  color: #cbd0e3;
-  opacity: 0.80;
-}
-
-.about-links-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: 12px;
-}
-
-.about-links-row a {
-  flex: 1;
-  text-align: center;
-  padding: 10px 0;
-  border-radius: 12px;
-  background: rgba(255,255,255,0.06);
-  border: 1px solid rgba(255,255,255,0.12);
-  color: #6aa9ff;
-  font-weight: 600;
-  text-decoration: none;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  transition: all .18s ease;
-}
-
-.about-links-row a:hover {
-  background: rgba(255,255,255,0.14);
-  transform: translateY(-2px);
-}
-
-.about-dev {
-  opacity: 0.85;
-  font-size: 0.87rem;
-  color: #cfd2e2;
-  margin-top: 4px;
-  margin-bottom: -14px;
-}
-
-.about-close-btn {
-  position: absolute;
-  top: 14px;
-  right: 14px;
-  width: 34px;
-  height: 34px;
-  border: 1px solid rgba(255,255,255,0.15);
-  background: rgba(255,255,255,0.07);
-  border-radius: 10px;
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-  color: #ffffff;
-  font-size: 18px;
-  font-weight: 700;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: 0.2s ease;
-  z-index: 5;
-}
-
-.about-close-btn:hover {
-  background: rgba(255, 40, 40, 0.25);
-  border-color: rgba(255, 60, 60, 0.40);
-  color: #ff4b4b;
-  transform: translateY(-2px);
-  box-shadow: 0 0 14px rgba(255, 50, 50, 0.35);
-}
-
-@media (max-width: 520px) {
-  .about-box { max-width: 92%; padding: 24px; }
-  .about-logo { width: 70px; height: 70px; }
-  .about-details div { max-height: 180px; }
-}
-
-.changelog-box-inner {
-  padding: 14px;
-  max-height: 68vh;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  text-align: left;
-}
-
-/* compact center heading */
-.changelog-box-inner h2.about-title {
-  text-align: center;
-  margin: 4px 0;
-  padding: 0;
-  line-height: 1.1;
-  font-size: 1.2rem;
-  font-weight: 600;
-}
-
-#changelogBody {
-  background: rgba(255,255,255,0.06);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 12px;
-  padding: 12px;
-  max-height: 52vh;
-  overflow-y: auto;
-  color: #e5e7f3;
-  white-space: normal;
-}
-
-/* markdown headings */
-#changelogBody h1,
-#changelogBody h2,
-#changelogBody h3 {
-  color: #fff;
-  font-weight: 600;
-}
-
-#changelogBody h2 {
-  margin: 4px 0;
-  padding: 0;
-  text-align: center;
-}
-
-/* text */
-#changelogBody p {
-  margin: 4px 0;
-  color: #e5e7f3;
-}
-
-/* list spacing */
-#changelogBody ul,
-#changelogBody ol {
-  margin: 14px 0 14px 22px !important;
-  padding: 0;
-}
-
-#changelogBody li {
-  margin: 4px 0 !important;
-}
-
-
-/* code blocks */
-#changelogBody code,
-#changelogBody pre {
-  background: rgba(0,0,0,0.55);
-  color: #dfe6ff;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px solid rgba(255,255,255,0.05);
-  font-size: .82rem;
-}
-
-#changelogBody ul + ul,
-#changelogBody ol + ol,
-#changelogBody ul + ol,
-#changelogBody ol + ul {
-  margin-top: 10px;
-}
-
-#changelogBody table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 10px 0;
-  font-size: 0.9rem;
-}
-
-#changelogBody th,
-#changelogBody td {
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  padding: 6px 10px;
-  text-align: left;
-  vertical-align: top;
-}
-
-#changelogBody th {
-  background: rgba(255, 255, 255, 0.1);
-  font-weight: 600;
-}
-
-#changelogBody tr:nth-child(even) {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-#changelogBody tr:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-#changelogBody td code {
-  background: rgba(0,0,0,0.55);
-  padding: 4px 6px;
-  border-radius: 6px;
-  font-size: 0.82rem;
-}
-
-#changelogBody a {
-  color: #99c3ff; 
-}
-
-#changelogBody a:hover {
-  color: #c58af9; 
-}
-
-#imgModal {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.65);
-  backdrop-filter: blur(12px);
-  justify-content: center;
-  align-items: center;
-  z-index: 99999;
-}
-
-#imgModalContent {
-  max-width: 90%;
-  max-height: 90%;
-  border-radius: 14px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
-  animation: zoomIn 0.15s ease-out;
-}
-
-/* animation */
-@keyframes zoomIn {
-  from {
-    transform: scale(0.85);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-/* -------- PDF MODAL -------- */
-#pdfModal {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.65);
-  backdrop-filter: blur(12px);
-  justify-content: center;
-  align-items: center;
-  z-index: 99999;
-}
-
-#pdfModalViewer {
-  width: 90%;
-  height: 90%;
-  border: none;
-  border-radius: 12px;
-  box-shadow: 0 0 20px rgba(0,0,0,0.6);
-}
-
-#helpPopup {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.65);
-  backdrop-filter: blur(6px);
-  display: none;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-}
-
-.help-box {
-  width: 92vw;
-  max-width: 720px;
-  max-height: 85vh;
-  background: rgba(20, 25, 45, 0.55);
-  backdrop-filter: blur(18px);
-  border: 1px solid rgba(130, 160, 255, 0.25);
-  border-radius: 18px;
-  box-shadow: 0 0 25px rgba(80, 120, 255, 0.25);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.help-header {
-  padding: 12px 16px;
-  font-size: 18px;
-  font-weight: 600;
-  color: #ffffff;
-  border-bottom: 1px solid rgba(120, 160, 255, 0.2);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-#helpBody {
-  padding: 16px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  color: #ffffff;
-  font-size: 14px;
-  line-height: 1.6;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-
-#helpBody h1,
-#helpBody h2,
-#helpBody h3 {
-  color: #ffffff;
-  margin-top: 14px;
-}
-
-#helpBody p {
-  opacity: 0.95;
-}
-
-#helpBody ul,
-#helpBody ol {
-  padding-left: 18px;
-}
-
-#helpBody li {
-  margin-bottom: 6px;
-}
-
-#helpBody img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 12px auto;
-  border-radius: 12px;
-  border: 1px solid rgba(120, 160, 255, 0.3);
-  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
-}
-
-#helpBody pre {
-  background: rgba(0, 0, 0, 0.4);
-  padding: 10px;
-  border-radius: 10px;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  margin-top: 10px;
-  box-shadow: inset 0 0 8px rgba(100, 140, 255, 0.15);
-}
-
-#helpBody code {
-  color: #ffffff;
-}
-
-#helpBody::-webkit-scrollbar {
-  width: 6px;
-}
-
-#helpBody::-webkit-scrollbar-thumb {
-  background: rgba(120, 160, 255, 0.35);
-  border-radius: 20px;
-}
-
-#helpBody h1, #helpBody h2, #helpBody h3 {
-  color: #ffffff;
-  margin: 6px 0; /* reduce vertical spacing */
-}
-
-#helpBody p { margin: 4px 0; }
-#helpBody ul, #helpBody ol { margin: 4px 0; padding-left: 18px; }
-#helpBody li { margin-bottom: 4px; }
-#helpBody pre { margin: 6px 0; }
-
-hr {
-  border: none;
-  border-top: 2px solid #212224; 
-  margin: 16px 0;
-  height: 2px;
-}
-
-#updatePopup .popup-content {
-  max-width: 380px;
-  text-align: center;
-  padding: 28px 22px;
-}
-#updatePopup h2 {
-  font-size: 1.4rem;
-  color: #6ab7ff;
-  margin-bottom: 10px;
-}
-#updatePopup p {
-  font-size: 0.94rem;
-  color: #e1e7f8;
-  margin-bottom: 14px;
-}
-#updatePopup .popup-actions button {
-  background: rgba(60, 110, 200, 0.15);
-  border: 1px solid rgba(60, 110, 200, 0.4);
-  color: #9abfff;
-}
-#updatePopup .popup-actions button:hover {
-  background: rgba(60, 110, 200, 0.24);
-  color: #fff;
-}
+  font-size: .875rem;
+  font-weight: 650;
+  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
+}
+button:hover { background: var(--accent-hover); }
+button:active { transform: translateY(1px); }
+button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(22, 122, 92, .28); outline-offset: 2px; }
+.vault-toolbar button, #helpBtn, .about-close-btn { min-height: 36px; background: transparent; color: var(--text-muted); border-color: transparent; padding: 7px 10px; }
+.vault-toolbar button:hover, #helpBtn:hover, .about-close-btn:hover { background: var(--surface-muted); color: var(--text); }
+#helpBtn { width: 36px; padding: 0; border-radius: 50%; font-weight: 700; }
+
+.search-intro { max-width: 580px; }
+.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
+.search-intro h2 { margin: 0; font-size: clamp(1.65rem, 3.5vw, 2.3rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; }
+.search-intro p:last-child { max-width: 490px; margin: 10px 0 0; color: var(--text-muted); }
+
+.chatbox { min-height: 220px; padding: 8px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-color: var(--line-strong) transparent; }
+.chatbox::-webkit-scrollbar, .about-box::-webkit-scrollbar, #changelogBody::-webkit-scrollbar { width: 6px; }
+.chatbox::-webkit-scrollbar-thumb, .about-box::-webkit-scrollbar-thumb, #changelogBody::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
+.user-message, .bot-message { max-width: min(85%, 580px); padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); animation: message-in .2s ease-out; word-break: break-word; }
+.bot-message { align-self: flex-start; background: var(--surface); color: var(--text); }
+.user-message { align-self: flex-end; border-color: var(--accent); background: var(--accent); color: #fff; }
+@keyframes message-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+.typing { display: flex; align-items: center; gap: 4px; width: max-content; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
+.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite ease-in-out; }
+.typing span:nth-child(2) { animation-delay: .15s; }.typing span:nth-child(3) { animation-delay: .3s; }
+@keyframes blink { 0%,80%,100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
+.typing-indicator { display: none; }
+
+.input-area { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 2px); background: var(--surface); box-shadow: 0 8px 24px rgba(29, 48, 39, .06); }
+.input-area:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 122, 92, .13); }
+#userInput { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: 9px 2px; }
+#userInput::placeholder { color: #85918c; }
+#addDocBtn { display: grid; width: 40px; height: 40px; min-height: 40px; place-items: center; padding: 0; border-color: var(--line); background: var(--surface); }
+#addDocBtn svg { width: 20px; height: 20px; } #addDocBtn svg path { stroke: var(--text); }
+#addDocBtn:hover { background: var(--accent-soft); border-color: #b8d8ca; }
+#sendBtn { display: grid; width: 40px; height: 40px; min-height: 40px; place-items: center; padding: 0; border-radius: 10px; }
+#sendBtn svg { width: 19px; height: 19px; transform: rotate(45deg); } #sendBtn svg path { fill: #fff; }
+
+.popup, .about-popup { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(24, 33, 30, .42); backdrop-filter: blur(4px); }
+.popup-content, .about-box { width: min(100%, 480px); max-height: calc(100vh - 40px); padding: 28px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
+.popup-content { display: flex; flex-direction: column; gap: 14px; }
+.popup-content h2, .about-title { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; }
+.popup-content input, .popup-content textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; padding: 10px 12px; background: var(--surface); color: var(--text); transition: border-color .2s ease, box-shadow .2s ease; }
+.popup-content textarea { min-height: 90px; resize: vertical; }.popup-content input:focus, .popup-content textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 122, 92, .12); }
+.popup-content label { color: var(--text-muted); font-size: .875rem; font-weight: 600; }
+.popup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }.popup-actions button { flex: 1 1 110px; }
+.popup-actions button:not(#saveDocBtn):not(#refreshAppBtn) { border-color: var(--line-strong); background: var(--surface); color: var(--text); }.popup-actions button:not(#saveDocBtn):not(#refreshAppBtn):hover { background: var(--surface-muted); }
+
+#editPopup { flex-direction: column; }.edit-doc-list { display: flex; flex-direction: column; gap: 8px; }.edit-doc-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }.edit-doc-item:last-child { border-bottom: 0; }.edit-buttons, .edit-actions { display: flex; gap: 8px; }.edit-btn, .delete-btn { min-height: 34px; padding: 6px 10px; background: var(--surface-muted); color: var(--text); }.edit-btn:hover { background: var(--accent-soft); color: var(--accent-hover); }.delete-btn, #clearBtn { color: var(--danger); }.delete-btn:hover, #clearBtn:hover { background: #fef0ef; }.edit-actions { width: min(100%, 480px); flex-wrap: wrap; }.edit-actions button { flex: 1 1 90px; border-color: var(--line-strong); background: var(--surface); color: var(--text); }.edit-actions button:hover { background: var(--surface-muted); }
+
+.about-box { position: relative; display: flex; flex-direction: column; gap: 16px; text-align: center; }.about-logo { width: 72px; height: 72px; margin: 0 auto; border-radius: var(--radius); }.about-desc, .about-version, .about-dev { margin: 0; color: var(--text-muted); }.about-links-row { display: flex; gap: 8px; }.about-links-row a { flex: 1; padding: 9px 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent-hover); font-weight: 650; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }.about-links-row a:hover { border-color: #b8d8ca; background: var(--accent-soft); }.about-close-btn { position: absolute; top: 14px; right: 14px; }.changelog-box-inner { text-align: left; }.changelog-box-inner .about-title { text-align: center; } #changelogBody { max-height: 52vh; padding: 14px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); } #changelogBody h1, #changelogBody h2, #changelogBody h3 { color: var(--text); } #changelogBody a { color: var(--accent-hover); }
+
+.toast { position: fixed; right: 20px; bottom: 20px; z-index: 9999; max-width: calc(100vw - 40px); padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--text); color: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast.error { border-color: #e8a39c; }.toast.success { border-color: #8fc9af; }
+.file-download-link { display: inline-flex; width: max-content; margin-top: 8px; padding: 7px 10px; border: 1px solid #b8d8ca; border-radius: 9px; background: var(--accent-soft); color: var(--accent-hover); font-size: .85rem; font-weight: 700; text-decoration: none; }.file-download-link:hover { background: #d8ecE3; }.chatbox img { max-width: 100%; border-radius: 9px; }
+#imgModal, #pdfModal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(24, 33, 30, .72); backdrop-filter: blur(4px); } #imgModalContent { max-width: 100%; max-height: 100%; border-radius: var(--radius); } #pdfModalViewer { width: min(100%, 1000px); height: min(100%, 800px); border: 0; border-radius: var(--radius); background: #fff; }
+#importLoader { position: fixed; inset: auto 20px 20px auto; z-index: 1000; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } #importBar { height: 4px; border-radius: 99px; background: var(--accent); }
+
+@media (max-width: 620px) { .vault-container { padding: 20px 16px 16px; gap: 20px; }.app-header { align-items: flex-start; }.vault-toolbar { gap: 0; }.vault-toolbar button { padding-inline: 8px; }.brand-copy p { display: none; }.chatbox { min-height: 160px; }.search-intro h2 { font-size: 1.65rem; }.popup, .about-popup { padding: 12px; }.popup-content, .about-box { padding: 22px; }.about-links-row { flex-direction: column; } }
+@media (max-width: 390px) { #aboutBtn { display: none; }.vault-container { padding-inline: 12px; }.user-message, .bot-message { max-width: 92%; } }

From b6af91e9273a8b1d409d3468a32083368396c1c2 Mon Sep 17 00:00:00 2001
From: Adityasinh Sodha <adityasinh@proton.me>
Date: Mon, 28 Sep 2026 14:23:42 +0530
Subject: [PATCH 2/4] Add collection-based document organization

---
 index.html |  35 +++++++++---
 js/app.js  | 155 +++++++++++++++++++++++++++++++++++++++++++++++++----
 styles.css |  29 +++++++---
 3 files changed, 196 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 811e7e7..445943b 100644
--- a/index.html
+++ b/index.html
@@ -14,12 +14,20 @@
 
 </head>
 <body>
-<div class="vault-container">
-  <header class="app-header">
-    <div class="brand">
-      <div class="brand-mark" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M5 4.75A1.75 1.75 0 0 1 6.75 3h7.5L19 7.75v11.5A1.75 1.75 0 0 1 17.25 21h-10.5A1.75 1.75 0 0 1 5 19.25V4.75Z"/><path d="M14 3v5h5M8.5 13h7M8.5 16.5h5"/></svg></div>
-      <div class="brand-copy"><h1>ChatBot</h1><p>Your private document vault</p></div>
+<div class="app-shell">
+  <aside class="collection-sidebar" id="collectionSidebar" aria-label="Document collections">
+    <div class="sidebar-header">
+      <div class="brand"><img class="brand-logo" src="icons/Bot.png" alt="ChatBot logo"><div class="brand-copy"><h1>ChatBot</h1><p>Your private document vault</p></div></div>
+      <button id="closeSidebarBtn" class="sidebar-close" type="button" aria-label="Close collections">×</button>
     </div>
+    <button id="newCollectionBtn" class="new-collection-btn" type="button"><span aria-hidden="true">+</span> New collection</button>
+    <div class="sidebar-label">Collections</div>
+    <div class="collection-list" id="collectionList"></div>
+    <div class="sidebar-footer"><span class="privacy-dot" aria-hidden="true"></span> Stored only on this device</div>
+  </aside>
+  <main class="vault-container">
+  <header class="app-header">
+    <div class="header-start"><button id="sidebarToggle" class="sidebar-toggle" type="button" aria-label="Open collections"><span></span><span></span><span></span></button><div class="mobile-brand">ChatBot</div></div>
     <nav class="vault-toolbar" aria-label="Application actions">
       <button id="editDocsBtn" type="button" title="Manage your documents">Manage</button>
       <button id="aboutBtn" type="button">About</button>
@@ -36,20 +44,23 @@ <h2 id="search-heading">Find what you need, when you need it.</h2>
       <span></span><span></span><span></span>
     </div>
   </div>
-  <div class="input-area" role="search">
+  <div class="composer-wrap"><div class="input-area" role="search">
     <button id="addDocBtn" type="button" title="Add a document" aria-label="Add a document">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
         <path d="M12 5v14m-7-7h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
     <input type="text" id="userInput" aria-label="Search your documents" placeholder="Search your documents..." autocomplete="off">
+    <div class="collection-filter"><button id="collectionFilterBtn" class="filter-btn" type="button" aria-haspopup="dialog" aria-expanded="false"><span id="filterLabel">All collections</span><span aria-hidden="true">⌄</span></button><div id="collectionFilterMenu" class="filter-menu" hidden></div></div>
     <button id="sendBtn" type="button" title="Search" aria-label="Search">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path d="M12 5L6 11H10V19H14V11H18L12 5Z" fill="#141414"/>
       </svg>
     </button>
   </div>
+  </div></div>
   <input type="file" id="importFile" accept="application/json" style="display:none;">
+  </main>
 </div>
 
 <!-- ADD DOCUMENT POPUP -->
@@ -58,6 +69,8 @@ <h2 id="search-heading">Find what you need, when you need it.</h2>
     <h2 id="popupTitle">Add Document</h2>
     <input type="text" id="docName" placeholder="Document Name">
     <input type="text" id="docValue" placeholder="Document Number / Value">
+    <label for="docCollection">Collection</label>
+    <select id="docCollection" aria-label="Document collection"></select>
     <label for="docFile">Attach File (optional):</label>
     <input type="file" id="docFile" accept=".pdf,.png,.jpg,.jpeg,.gif,.txt,.doc,.docx,.zip" />
     <textarea id="docInfo" placeholder="Additional Information (optional)"></textarea>
@@ -68,6 +81,16 @@ <h2 id="popupTitle">Add Document</h2>
   </div>
 </div>
 
+<div class="popup" id="collectionPopup">
+  <div class="popup-content collection-popup-content">
+    <h2>Create collection</h2>
+    <p class="modal-description">Keep related documents together, such as personal records or family documents.</p>
+    <label for="collectionName">Collection name</label>
+    <input id="collectionName" type="text" maxlength="50" placeholder="e.g. Father's documents" autocomplete="off">
+    <div class="popup-actions"><button id="saveCollectionBtn" type="button">Create collection</button><button id="cancelCollectionBtn" type="button">Cancel</button></div>
+  </div>
+</div>
+
 <!-- EDIT DOCUMENT POPUP -->
 <div class="popup" id="editPopup">
   <div class="popup-content" style="max-height: 420px; overflow-y: auto;">
diff --git a/js/app.js b/js/app.js
index 0b8c72d..bb136aa 100644
--- a/js/app.js
+++ b/js/app.js
@@ -76,6 +76,48 @@ const clearBtn = document.getElementById('clearBtn');
 const exportBtn = document.getElementById('exportBtn');
 const importBtn = document.getElementById('importBtn');
 const importFile = document.getElementById('importFile');
+const collectionList = document.getElementById('collectionList');
+const collectionPopup = document.getElementById('collectionPopup');
+const collectionName = document.getElementById('collectionName');
+const docCollection = document.getElementById('docCollection');
+const collectionFilterBtn = document.getElementById('collectionFilterBtn');
+const collectionFilterMenu = document.getElementById('collectionFilterMenu');
+const filterLabel = document.getElementById('filterLabel');
+const collectionSidebar = document.getElementById('collectionSidebar');
+
+const COLLECTIONS_KEY = 'vaultCollections';
+let collections = JSON.parse(localStorage.getItem(COLLECTIONS_KEY) || '[]');
+let selectedCollectionIds = new Set();
+
+function persistCollections() {
+  localStorage.setItem(COLLECTIONS_KEY, JSON.stringify(collections));
+}
+
+function collectionNameFor(id) {
+  return collections.find(collection => collection.id === id)?.name || 'Unfiled';
+}
+
+function renderCollectionControls() {
+  const counts = vault.reduce((result, doc) => {
+    if (doc.collectionId) result[doc.collectionId] = (result[doc.collectionId] || 0) + 1;
+    return result;
+  }, {});
+  collectionList.innerHTML = '';
+  collections.forEach(collection => {
+    const item = document.createElement('div');
+    item.className = `collection-item${selectedCollectionIds.has(collection.id) ? ' is-selected' : ''}`;
+    item.innerHTML = `<button class="collection-select" type="button" data-collection-id="${collection.id}"><span class="collection-name">${collection.name}</span><span class="collection-count">${counts[collection.id] || 0}</span></button><button class="collection-delete" type="button" data-delete-collection-id="${collection.id}" aria-label="Delete ${collection.name}" title="Delete collection">×</button>`;
+    collectionList.appendChild(item);
+  });
+  docCollection.innerHTML = '<option value="">Unfiled</option>' + collections.map(collection => `<option value="${collection.id}">${collection.name}</option>`).join('');
+  const isGlobal = selectedCollectionIds.size === 0;
+  filterLabel.textContent = isGlobal ? 'All collections' : `${selectedCollectionIds.size} collection${selectedCollectionIds.size === 1 ? '' : 's'}`;
+  collectionFilterMenu.innerHTML = `<label class="filter-option"><input type="checkbox" id="globalCollectionFilter" ${isGlobal ? 'checked' : ''}> All collections</label><div class="filter-divider"></div>${collections.length ? collections.map(collection => `<label class="filter-option"><input type="checkbox" data-filter-collection-id="${collection.id}" ${selectedCollectionIds.has(collection.id) ? 'checked' : ''}> ${collection.name}</label>`).join('') : '<p class="filter-empty">Create a collection to narrow your search.</p>'}`;
+}
+
+function isDocumentInSearchScope(doc) {
+  return selectedCollectionIds.size === 0 || selectedCollectionIds.has(doc.collectionId);
+}
 
 async function generatePdfThumbnail(pdfDataURL) {
   const pdf = await pdfjsLib.getDocument({ url: pdfDataURL }).promise;
@@ -222,12 +264,13 @@ function addMessage(content, sender) {
 let vault = [];
 (async () => {
   vault = await getAllDocs();
+  renderCollectionControls();
 })();
 
 
 function findDoc(query) {
   query = query.toLowerCase();
-  return vault.filter(d => d.name.toLowerCase().includes(query));
+  return vault.filter(d => isDocumentInSearchScope(d) && d.name.toLowerCase().includes(query));
 }
 
 // Typing Animation
@@ -328,14 +371,16 @@ const showAllCmds = [
 
 if (showAllCmds.some(cmd => lower === cmd || lower.includes(cmd))) {
 
-  if (vault.length === 0) {
+  const scopedVault = vault.filter(isDocumentInSearchScope);
+
+  if (scopedVault.length === 0) {
     addMessage("Your vault is empty. Add a document first!", "bot");
     return;
   }
 
-  addMessage(`You have ${vault.length} stored documents:`, "bot");
+  addMessage(`You have ${scopedVault.length} stored documents in this search scope:`, "bot");
 
-  vault.forEach((doc, index) => {
+  scopedVault.forEach((doc, index) => {
     let reply = `${index + 1}. ${doc.name}: ${doc.value}`;
     if (doc.info) reply += `<br>${doc.info}`;
     addMessage(reply, 'bot');
@@ -379,6 +424,79 @@ userInput.addEventListener("keypress", (e) => {
   }
 });
 
+collectionFilterBtn.onclick = () => {
+  const isOpen = !collectionFilterMenu.hidden;
+  collectionFilterMenu.hidden = isOpen;
+  collectionFilterBtn.setAttribute('aria-expanded', String(!isOpen));
+};
+
+collectionFilterMenu.addEventListener('change', (event) => {
+  const input = event.target;
+  if (input.id === 'globalCollectionFilter' && input.checked) {
+    selectedCollectionIds.clear();
+  } else if (input.dataset.filterCollectionId) {
+    if (input.checked) selectedCollectionIds.add(input.dataset.filterCollectionId);
+    else selectedCollectionIds.delete(input.dataset.filterCollectionId);
+  }
+  renderCollectionControls();
+});
+
+document.addEventListener('click', (event) => {
+  if (!event.target.closest('.collection-filter')) {
+    collectionFilterMenu.hidden = true;
+    collectionFilterBtn.setAttribute('aria-expanded', 'false');
+  }
+});
+
+document.getElementById('newCollectionBtn').onclick = () => {
+  collectionName.value = '';
+  collectionPopup.style.display = 'flex';
+  setTimeout(() => collectionName.focus(), 0);
+};
+document.getElementById('cancelCollectionBtn').onclick = () => (collectionPopup.style.display = 'none');
+document.getElementById('saveCollectionBtn').onclick = () => {
+  const name = collectionName.value.trim();
+  if (!name) return showToast('Collection name is required', 'error');
+  if (collections.some(collection => collection.name.toLowerCase() === name.toLowerCase())) return showToast('A collection with that name already exists', 'error');
+  const collection = { id: crypto.randomUUID(), name };
+  collections.push(collection);
+  persistCollections();
+  selectedCollectionIds = new Set([collection.id]);
+  renderCollectionControls();
+  collectionPopup.style.display = 'none';
+  showToast('Collection created', 'success');
+};
+
+collectionList.addEventListener('click', async (event) => {
+  const selectButton = event.target.closest('[data-collection-id]');
+  const deleteButton = event.target.closest('[data-delete-collection-id]');
+  if (selectButton) {
+    const id = selectButton.dataset.collectionId;
+    selectedCollectionIds = new Set(selectedCollectionIds.has(id) ? [] : [id]);
+    renderCollectionControls();
+    collectionSidebar.classList.remove('is-open');
+  }
+  if (deleteButton) {
+    const id = deleteButton.dataset.deleteCollectionId;
+    const collection = collections.find(item => item.id === id);
+    if (!collection || !confirm(`Delete “${collection.name}”? Its documents will remain unfiled.`)) return;
+    collections = collections.filter(item => item.id !== id);
+    selectedCollectionIds.delete(id);
+    const db = await openDB();
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    const store = tx.objectStore(STORE_NAME);
+    vault.filter(doc => doc.collectionId === id).forEach(doc => store.put({ ...doc, collectionId: '' }));
+    await waitForTx(tx);
+    vault = await getAllDocs();
+    persistCollections();
+    renderCollectionControls();
+    showToast('Collection deleted', 'success');
+  }
+});
+
+document.getElementById('sidebarToggle').onclick = () => collectionSidebar.classList.add('is-open');
+document.getElementById('closeSidebarBtn').onclick = () => collectionSidebar.classList.remove('is-open');
+
 
 // Add Document Popup
 addDocBtn.onclick = () => {
@@ -390,6 +508,7 @@ addDocBtn.onclick = () => {
   document.getElementById("docValue").value = "";
   document.getElementById("docInfo").value = "";
   document.getElementById("docFile").value = "";
+  docCollection.value = selectedCollectionIds.size === 1 ? [...selectedCollectionIds][0] : '';
 
   // Open popup
   popup.style.display = "flex";
@@ -404,6 +523,7 @@ saveDocBtn.onclick = async () => {
   const info = document.getElementById("docInfo").value.trim();
   const fileInput = document.getElementById("docFile");
   const file = fileInput.files[0];
+  const collectionId = docCollection.value;
 
   if (!name) return showToast("Document name is required", "error");
 
@@ -434,6 +554,7 @@ if (editId) {
     value,
     info,
     file: fileData ? fileData : oldDoc.file,
+    collectionId,
   };
 
   const putReq = store.put(updatedDoc);
@@ -448,6 +569,7 @@ await waitForTx(tx);
 
 // Reload vault so array matches DB contents
 vault = await getAllDocs();
+renderCollectionControls();
 
 popup.style.display = "none";
 saveDocBtn.removeAttribute("data-edit-id");
@@ -460,9 +582,10 @@ saveDocBtn.removeAttribute("data-edit-id");
 }
 
 //add
-  const newDoc = { name, value, info, file: fileData };
+  const newDoc = { name, value, info, file: fileData, collectionId };
   await saveDocToDB(newDoc);
   vault = await getAllDocs();
+  renderCollectionControls();
   addMessage(`${name} was safely stored to vault.`, "bot");
   popup.style.display = "none";
   showToast("Document saved!", "success");
@@ -503,7 +626,8 @@ exportBtn.onclick = () => {
 
   const fileName = `vault_${y}${m}${d}_${h}${ampm}.json`;
 
-  const blob = new Blob([JSON.stringify(vault, null, 2)], { type: "application/json" });
+  const backup = { version: 2, collections, documents: vault };
+  const blob = new Blob([JSON.stringify(backup, null, 2)], { type: "application/json" });
   const url = URL.createObjectURL(blob);
 
   const a = document.createElement("a");
@@ -533,19 +657,29 @@ importFile.onchange = async (e) => {
   const reader = new FileReader();
   reader.onload = async (event) => {
     try {
-      const data = JSON.parse(event.target.result);
+      const parsed = JSON.parse(event.target.result);
+      const data = Array.isArray(parsed) ? parsed : parsed.documents;
       if (!Array.isArray(data)) {
         loader.style.display = "none";
         alert("Invalid file format.");
         return;
       }
 
+      if (Array.isArray(parsed.collections)) {
+        const existingNames = new Set(collections.map(collection => collection.name.toLowerCase()));
+        parsed.collections.forEach(collection => {
+          if (collection?.id && collection?.name && !existingNames.has(collection.name.toLowerCase())) collections.push(collection);
+        });
+        persistCollections();
+      }
+
       for (let i = 0; i < data.length; i++) {
         await saveDocToDB({
           name: data[i].name || "Unnamed",
           value: data[i].value || "",
           info: data[i].info || "",
-          file: data[i].file || null
+          file: data[i].file || null,
+          collectionId: collections.some(collection => collection.id === data[i].collectionId) ? data[i].collectionId : ''
         });
 
         const percent = Math.round(((i + 1) / data.length) * 100);
@@ -554,6 +688,7 @@ importFile.onchange = async (e) => {
       }
 
       vault = await getAllDocs();
+      renderCollectionControls();
 
       setTimeout(() => {
       loader.style.display = "none";
@@ -607,7 +742,7 @@ document.getElementById("editDocsBtn").onclick = async () => {
             item.className = "edit-doc-item";
 
             item.innerHTML = `
-                <span><strong>${doc.name}</strong></span>
+                <span><strong>${doc.name}</strong><small>${collectionNameFor(doc.collectionId)}</small></span>
                 <div class="edit-buttons">
                     <button class="edit-btn" data-id="${doc.id}">Edit</button>
                     <button class="delete-btn" data-id="${doc.id}">Delete</button>
@@ -653,6 +788,7 @@ document.getElementById("editDocsList").addEventListener("click", async (e) => {
   if (itemEl) itemEl.remove();
 
   vault = await getAllDocs();
+  renderCollectionControls();
 
   showToast("Document deleted!", "success");
   return;
@@ -675,6 +811,7 @@ document.getElementById("editDocsList").addEventListener("click", async (e) => {
             document.getElementById("docValue").value = doc.value;
             document.getElementById("docInfo").value = doc.info || "";
             document.getElementById("docFile").value = "";
+            docCollection.value = doc.collectionId || '';
 
             // Mark popup as EDIT MODE
             saveDocBtn.setAttribute("data-edit-id", id);
diff --git a/styles.css b/styles.css
index be23d3a..d0c1e57 100644
--- a/styles.css
+++ b/styles.css
@@ -25,6 +25,7 @@ body {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 15px;
   line-height: 1.5;
+  overflow: hidden;
 }
 
 button, input, textarea { font: inherit; }
@@ -32,16 +33,22 @@ button { cursor: pointer; }
 button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
 
 .vault-container {
-  width: min(100%, 1000px);
-  min-height: 100vh;
-  margin: 0 auto;
-  padding: 32px 40px 24px;
+  min-width: 0;
+  height: 100vh;
+  padding: 28px clamp(20px, 4vw, 56px) 20px;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   gap: 24px;
 }
 
+.app-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100vh; }
+.collection-sidebar { display: flex; flex-direction: column; min-height: 0; padding: 22px 14px 16px; border-right: 1px solid var(--line); background: #f4f7f5; }
+.sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding: 0 6px; }.brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }.sidebar-close, .sidebar-toggle, .mobile-brand { display: none; }
+.new-collection-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 42px; margin-bottom: 24px; background: var(--accent); }.new-collection-btn span { font-size: 1.25rem; font-weight: 400; line-height: 0; }.sidebar-label { padding: 0 10px 8px; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
+.collection-list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }.collection-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; border-radius: 9px; }.collection-select { overflow: hidden; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); text-align: left; font-weight: 550; }.collection-select:hover, .collection-item.is-selected .collection-select { background: var(--surface); color: var(--text); }.collection-item.is-selected .collection-select { color: var(--accent-hover); box-shadow: 0 1px 2px rgba(29,48,39,.05); }.collection-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.collection-count { color: var(--text-muted); font-size: .75rem; }.collection-delete { display: grid; width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #88918d; opacity: 0; }.collection-item:hover .collection-delete, .collection-delete:focus-visible { opacity: 1; }.collection-delete:hover { background: #fcefed; color: var(--danger); }.sidebar-footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 18px 10px 2px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: .75rem; }.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+
 .app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
+.header-start { display: flex; align-items: center; }
 .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
 .brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: var(--radius); background: var(--accent); color: #fff; box-shadow: 0 5px 12px rgba(22, 122, 92, .2); }
 .brand-mark svg { width: 21px; height: 21px; }
@@ -67,12 +74,12 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
 .vault-toolbar button:hover, #helpBtn:hover, .about-close-btn:hover { background: var(--surface-muted); color: var(--text); }
 #helpBtn { width: 36px; padding: 0; border-radius: 50%; font-weight: 700; }
 
-.search-intro { max-width: 580px; }
+.search-intro { max-width: 580px; align-self: end; }
 .eyebrow { margin: 0 0 7px; color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
 .search-intro h2 { margin: 0; font-size: clamp(1.65rem, 3.5vw, 2.3rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; }
 .search-intro p:last-child { max-width: 490px; margin: 10px 0 0; color: var(--text-muted); }
 
-.chatbox { min-height: 220px; padding: 8px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-color: var(--line-strong) transparent; }
+.chatbox { min-height: 0; padding: 8px 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-color: var(--line-strong) transparent; }
 .chatbox::-webkit-scrollbar, .about-box::-webkit-scrollbar, #changelogBody::-webkit-scrollbar { width: 6px; }
 .chatbox::-webkit-scrollbar-thumb, .about-box::-webkit-scrollbar-thumb, #changelogBody::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
 .user-message, .bot-message { max-width: min(85%, 580px); padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); animation: message-in .2s ease-out; word-break: break-word; }
@@ -85,7 +92,7 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
 @keyframes blink { 0%,80%,100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
 .typing-indicator { display: none; }
 
-.input-area { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 2px); background: var(--surface); box-shadow: 0 8px 24px rgba(29, 48, 39, .06); }
+.composer-wrap { position: sticky; bottom: 0; padding-top: 4px; background: var(--canvas); }.input-area { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 2px); background: var(--surface); box-shadow: 0 8px 24px rgba(29, 48, 39, .06); }
 .input-area:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 122, 92, .13); }
 #userInput { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); padding: 9px 2px; }
 #userInput::placeholder { color: #85918c; }
@@ -94,18 +101,20 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
 #addDocBtn:hover { background: var(--accent-soft); border-color: #b8d8ca; }
 #sendBtn { display: grid; width: 40px; height: 40px; min-height: 40px; place-items: center; padding: 0; border-radius: 10px; }
 #sendBtn svg { width: 19px; height: 19px; transform: rotate(45deg); } #sendBtn svg path { fill: #fff; }
+.collection-filter { position: relative; }.filter-btn { display: flex; align-items: center; gap: 6px; min-height: 36px; max-width: 180px; padding: 7px 9px; border-color: var(--line); background: var(--surface-muted); color: var(--text-muted); font-size: .8rem; }.filter-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.filter-btn:hover { background: var(--accent-soft); color: var(--accent-hover); }.filter-menu { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 10; width: min(290px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }.filter-option { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 8px; color: var(--text); font-size: .86rem; cursor: pointer; }.filter-option:hover { background: var(--surface-muted); }.filter-option input { width: 16px; height: 16px; accent-color: var(--accent); }.filter-divider { height: 1px; margin: 5px 0; background: var(--line); }.filter-empty { padding: 9px; color: var(--text-muted); font-size: .85rem; }
 
 .popup, .about-popup { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(24, 33, 30, .42); backdrop-filter: blur(4px); }
 .popup-content, .about-box { width: min(100%, 480px); max-height: calc(100vh - 40px); padding: 28px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
 .popup-content { display: flex; flex-direction: column; gap: 14px; }
 .popup-content h2, .about-title { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; }
 .popup-content input, .popup-content textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; padding: 10px 12px; background: var(--surface); color: var(--text); transition: border-color .2s ease, box-shadow .2s ease; }
+.popup-content select { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; padding: 10px 12px; background: var(--surface); color: var(--text); }.modal-description { margin: -4px 0 0; color: var(--text-muted); font-size: .9rem; }
 .popup-content textarea { min-height: 90px; resize: vertical; }.popup-content input:focus, .popup-content textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 122, 92, .12); }
 .popup-content label { color: var(--text-muted); font-size: .875rem; font-weight: 600; }
 .popup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }.popup-actions button { flex: 1 1 110px; }
 .popup-actions button:not(#saveDocBtn):not(#refreshAppBtn) { border-color: var(--line-strong); background: var(--surface); color: var(--text); }.popup-actions button:not(#saveDocBtn):not(#refreshAppBtn):hover { background: var(--surface-muted); }
 
-#editPopup { flex-direction: column; }.edit-doc-list { display: flex; flex-direction: column; gap: 8px; }.edit-doc-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }.edit-doc-item:last-child { border-bottom: 0; }.edit-buttons, .edit-actions { display: flex; gap: 8px; }.edit-btn, .delete-btn { min-height: 34px; padding: 6px 10px; background: var(--surface-muted); color: var(--text); }.edit-btn:hover { background: var(--accent-soft); color: var(--accent-hover); }.delete-btn, #clearBtn { color: var(--danger); }.delete-btn:hover, #clearBtn:hover { background: #fef0ef; }.edit-actions { width: min(100%, 480px); flex-wrap: wrap; }.edit-actions button { flex: 1 1 90px; border-color: var(--line-strong); background: var(--surface); color: var(--text); }.edit-actions button:hover { background: var(--surface-muted); }
+#editPopup { flex-direction: column; }.edit-doc-list { display: flex; flex-direction: column; gap: 8px; }.edit-doc-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }.edit-doc-item:last-child { border-bottom: 0; }.edit-doc-item span { display: flex; flex-direction: column; gap: 2px; }.edit-doc-item small { color: var(--text-muted); font-size: .76rem; }.edit-buttons, .edit-actions { display: flex; gap: 8px; }.edit-btn, .delete-btn { min-height: 34px; padding: 6px 10px; background: var(--surface-muted); color: var(--text); }.edit-btn:hover { background: var(--accent-soft); color: var(--accent-hover); }.delete-btn, #clearBtn { color: var(--danger); }.delete-btn:hover, #clearBtn:hover { background: #fef0ef; }.edit-actions { width: min(100%, 480px); flex-wrap: wrap; }.edit-actions button { flex: 1 1 90px; border-color: var(--line-strong); background: var(--surface); color: var(--text); }.edit-actions button:hover { background: var(--surface-muted); }
 
 .about-box { position: relative; display: flex; flex-direction: column; gap: 16px; text-align: center; }.about-logo { width: 72px; height: 72px; margin: 0 auto; border-radius: var(--radius); }.about-desc, .about-version, .about-dev { margin: 0; color: var(--text-muted); }.about-links-row { display: flex; gap: 8px; }.about-links-row a { flex: 1; padding: 9px 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--accent-hover); font-weight: 650; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }.about-links-row a:hover { border-color: #b8d8ca; background: var(--accent-soft); }.about-close-btn { position: absolute; top: 14px; right: 14px; }.changelog-box-inner { text-align: left; }.changelog-box-inner .about-title { text-align: center; } #changelogBody { max-height: 52vh; padding: 14px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-muted); } #changelogBody h1, #changelogBody h2, #changelogBody h3 { color: var(--text); } #changelogBody a { color: var(--accent-hover); }
 
@@ -116,3 +125,7 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
 
 @media (max-width: 620px) { .vault-container { padding: 20px 16px 16px; gap: 20px; }.app-header { align-items: flex-start; }.vault-toolbar { gap: 0; }.vault-toolbar button { padding-inline: 8px; }.brand-copy p { display: none; }.chatbox { min-height: 160px; }.search-intro h2 { font-size: 1.65rem; }.popup, .about-popup { padding: 12px; }.popup-content, .about-box { padding: 22px; }.about-links-row { flex-direction: column; } }
 @media (max-width: 390px) { #aboutBtn { display: none; }.vault-container { padding-inline: 12px; }.user-message, .bot-message { max-width: 92%; } }
+
+@media (max-width: 760px) {
+  .app-shell { display: block; }.collection-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 110; width: min(300px, 86vw); box-shadow: 20px 0 40px rgba(29,48,39,.14); transform: translateX(-105%); transition: transform .2s ease; }.collection-sidebar.is-open { transform: translateX(0); }.collection-sidebar::after { content: ""; position: fixed; inset: 0; z-index: -1; width: 100vw; background: rgba(24,33,30,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; }.collection-sidebar.is-open::after { opacity: 1; pointer-events: auto; }.sidebar-close { display: grid; width: 34px; height: 34px; min-height: 34px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 1.5rem; font-weight: 400; }.sidebar-toggle { display: grid; width: 38px; height: 38px; min-height: 38px; place-content: center; gap: 4px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }.sidebar-toggle span { display: block; width: 16px; height: 1.5px; background: var(--text); }.mobile-brand { display: block; margin-left: 10px; font-size: .9rem; font-weight: 700; }.vault-container { height: 100dvh; }.app-header { align-items: center; }.search-intro { align-self: start; }.collection-filter { order: 4; grid-column: 1 / -1; }.filter-btn { max-width: none; width: 100%; justify-content: space-between; }.input-area { grid-template-columns: auto minmax(0, 1fr) auto; }.composer-wrap { padding-top: 8px; }.vault-toolbar #aboutBtn { display: none; }
+}

From 79a3dd427ddc044dbc1430d697e231a23e8d711d Mon Sep 17 00:00:00 2001
From: Adityasinh Sodha <adityasinh@proton.me>
Date: Tue, 29 Sep 2026 12:02:26 +0530
Subject: [PATCH 3/4] Expand collections with document previews

---
 js/app.js  | 29 ++++++++++++++++++++++++++---
 styles.css |  6 +++---
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/js/app.js b/js/app.js
index bb136aa..c79a24d 100644
--- a/js/app.js
+++ b/js/app.js
@@ -84,10 +84,16 @@ const collectionFilterBtn = document.getElementById('collectionFilterBtn');
 const collectionFilterMenu = document.getElementById('collectionFilterMenu');
 const filterLabel = document.getElementById('filterLabel');
 const collectionSidebar = document.getElementById('collectionSidebar');
+const searchIntro = document.querySelector('.search-intro');
 
 const COLLECTIONS_KEY = 'vaultCollections';
 let collections = JSON.parse(localStorage.getItem(COLLECTIONS_KEY) || '[]');
 let selectedCollectionIds = new Set();
+let expandedCollectionIds = new Set();
+
+function dismissSearchIntro() {
+  searchIntro.classList.add('is-dismissed');
+}
 
 function persistCollections() {
   localStorage.setItem(COLLECTIONS_KEY, JSON.stringify(collections));
@@ -105,8 +111,11 @@ function renderCollectionControls() {
   collectionList.innerHTML = '';
   collections.forEach(collection => {
     const item = document.createElement('div');
-    item.className = `collection-item${selectedCollectionIds.has(collection.id) ? ' is-selected' : ''}`;
-    item.innerHTML = `<button class="collection-select" type="button" data-collection-id="${collection.id}"><span class="collection-name">${collection.name}</span><span class="collection-count">${counts[collection.id] || 0}</span></button><button class="collection-delete" type="button" data-delete-collection-id="${collection.id}" aria-label="Delete ${collection.name}" title="Delete collection">×</button>`;
+    const collectionDocs = vault.filter(doc => doc.collectionId === collection.id);
+    const isExpanded = expandedCollectionIds.has(collection.id);
+    item.className = `collection-item${selectedCollectionIds.has(collection.id) ? ' is-selected' : ''}${isExpanded ? ' is-expanded' : ''}`;
+    const documents = isExpanded ? `<div class="collection-documents">${collectionDocs.length ? collectionDocs.map(doc => `<button class="collection-document" type="button" data-document-id="${doc.id}" title="Open ${doc.name}">${doc.file?.type?.startsWith('image/') ? `<img src="${doc.file.data}" alt="">` : '<span class="document-placeholder" aria-hidden="true">⌁</span>'}<span>${doc.name}</span></button>`).join('') : '<p class="collection-empty">No documents yet</p>'}</div>` : '';
+    item.innerHTML = `<button class="collection-select" type="button" data-collection-id="${collection.id}" aria-expanded="${isExpanded}"><span class="collection-name">${collection.name}</span><span class="collection-count">${counts[collection.id] || 0}</span><span class="collection-chevron" aria-hidden="true">⌄</span></button><button class="collection-delete" type="button" data-delete-collection-id="${collection.id}" aria-label="Delete ${collection.name}" title="Delete collection">×</button>${documents}`;
     collectionList.appendChild(item);
   });
   docCollection.innerHTML = '<option value="">Unfiled</option>' + collections.map(collection => `<option value="${collection.id}">${collection.name}</option>`).join('');
@@ -305,6 +314,7 @@ sendBtn.onclick = () => {
   const text = userInput.value.trim();
   if (!text) return;
 
+  dismissSearchIntro();
   addMessage(text, 'user');
   userInput.value = '';
 
@@ -472,8 +482,20 @@ collectionList.addEventListener('click', async (event) => {
   const deleteButton = event.target.closest('[data-delete-collection-id]');
   if (selectButton) {
     const id = selectButton.dataset.collectionId;
-    selectedCollectionIds = new Set(selectedCollectionIds.has(id) ? [] : [id]);
+    selectedCollectionIds = new Set([id]);
+    if (expandedCollectionIds.has(id)) expandedCollectionIds.delete(id);
+    else expandedCollectionIds.add(id);
     renderCollectionControls();
+  }
+  const documentButton = event.target.closest('[data-document-id]');
+  if (documentButton) {
+    const doc = vault.find(item => item.id === Number(documentButton.dataset.documentId));
+    if (!doc) return;
+    dismissSearchIntro();
+    addMessage(`${doc.name}: ${doc.value}`, 'bot');
+    if (doc.info) addMessage(doc.info, 'bot');
+    renderFile(doc);
+    chatbox.scrollTop = chatbox.scrollHeight;
     collectionSidebar.classList.remove('is-open');
   }
   if (deleteButton) {
@@ -482,6 +504,7 @@ collectionList.addEventListener('click', async (event) => {
     if (!collection || !confirm(`Delete “${collection.name}”? Its documents will remain unfiled.`)) return;
     collections = collections.filter(item => item.id !== id);
     selectedCollectionIds.delete(id);
+    expandedCollectionIds.delete(id);
     const db = await openDB();
     const tx = db.transaction(STORE_NAME, 'readwrite');
     const store = tx.objectStore(STORE_NAME);
diff --git a/styles.css b/styles.css
index d0c1e57..60f41b4 100644
--- a/styles.css
+++ b/styles.css
@@ -45,7 +45,7 @@ button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
 .collection-sidebar { display: flex; flex-direction: column; min-height: 0; padding: 22px 14px 16px; border-right: 1px solid var(--line); background: #f4f7f5; }
 .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding: 0 6px; }.brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }.sidebar-close, .sidebar-toggle, .mobile-brand { display: none; }
 .new-collection-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 42px; margin-bottom: 24px; background: var(--accent); }.new-collection-btn span { font-size: 1.25rem; font-weight: 400; line-height: 0; }.sidebar-label { padding: 0 10px 8px; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
-.collection-list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }.collection-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; border-radius: 9px; }.collection-select { overflow: hidden; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); text-align: left; font-weight: 550; }.collection-select:hover, .collection-item.is-selected .collection-select { background: var(--surface); color: var(--text); }.collection-item.is-selected .collection-select { color: var(--accent-hover); box-shadow: 0 1px 2px rgba(29,48,39,.05); }.collection-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.collection-count { color: var(--text-muted); font-size: .75rem; }.collection-delete { display: grid; width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #88918d; opacity: 0; }.collection-item:hover .collection-delete, .collection-delete:focus-visible { opacity: 1; }.collection-delete:hover { background: #fcefed; color: var(--danger); }.sidebar-footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 18px 10px 2px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: .75rem; }.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+.collection-list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }.collection-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; border-radius: 9px; }.collection-select { overflow: hidden; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); text-align: left; font-weight: 550; }.collection-select:hover, .collection-item.is-selected .collection-select { background: var(--surface); color: var(--text); }.collection-item.is-selected .collection-select { color: var(--accent-hover); box-shadow: 0 1px 2px rgba(29,48,39,.05); }.collection-name { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }.collection-count { color: var(--text-muted); font-size: .75rem; }.collection-chevron { color: var(--text-muted); font-size: .9rem; transition: transform .2s ease; }.collection-item.is-expanded .collection-chevron { transform: rotate(180deg); }.collection-delete { display: grid; width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #88918d; opacity: 0; }.collection-item:hover .collection-delete, .collection-delete:focus-visible { opacity: 1; }.collection-delete:hover { background: #fcefed; color: var(--danger); }.collection-documents { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin: -1px 0 7px 10px; padding-left: 9px; border-left: 1px solid var(--line-strong); }.collection-document { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 5px 7px; overflow: hidden; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: .8rem; font-weight: 550; text-align: left; }.collection-document:hover { background: var(--surface); color: var(--text); }.collection-document img, .document-placeholder { flex: 0 0 23px; width: 23px; height: 23px; border-radius: 5px; object-fit: cover; background: var(--accent-soft); color: var(--accent-hover); text-align: center; line-height: 23px; }.collection-document span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.collection-empty { margin: 5px 7px; color: var(--text-muted); font-size: .76rem; }.sidebar-footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 18px 10px 2px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: .75rem; }.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
 
 .app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
 .header-start { display: flex; align-items: center; }
@@ -74,7 +74,7 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
 .vault-toolbar button:hover, #helpBtn:hover, .about-close-btn:hover { background: var(--surface-muted); color: var(--text); }
 #helpBtn { width: 36px; padding: 0; border-radius: 50%; font-weight: 700; }
 
-.search-intro { max-width: 580px; align-self: end; }
+.search-intro { max-width: 580px; align-self: end; transition: opacity .2s ease, transform .2s ease; }.search-intro.is-dismissed { display: none; }
 .eyebrow { margin: 0 0 7px; color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
 .search-intro h2 { margin: 0; font-size: clamp(1.65rem, 3.5vw, 2.3rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.12; }
 .search-intro p:last-child { max-width: 490px; margin: 10px 0 0; color: var(--text-muted); }
@@ -103,7 +103,7 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
 #sendBtn svg { width: 19px; height: 19px; transform: rotate(45deg); } #sendBtn svg path { fill: #fff; }
 .collection-filter { position: relative; }.filter-btn { display: flex; align-items: center; gap: 6px; min-height: 36px; max-width: 180px; padding: 7px 9px; border-color: var(--line); background: var(--surface-muted); color: var(--text-muted); font-size: .8rem; }.filter-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.filter-btn:hover { background: var(--accent-soft); color: var(--accent-hover); }.filter-menu { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 10; width: min(290px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }.filter-option { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 8px; color: var(--text); font-size: .86rem; cursor: pointer; }.filter-option:hover { background: var(--surface-muted); }.filter-option input { width: 16px; height: 16px; accent-color: var(--accent); }.filter-divider { height: 1px; margin: 5px 0; background: var(--line); }.filter-empty { padding: 9px; color: var(--text-muted); font-size: .85rem; }
 
-.popup, .about-popup { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(24, 33, 30, .42); backdrop-filter: blur(4px); }
+.popup, .about-popup { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(24, 33, 30, .42); backdrop-filter: blur(4px); }
 .popup-content, .about-box { width: min(100%, 480px); max-height: calc(100vh - 40px); padding: 28px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
 .popup-content { display: flex; flex-direction: column; gap: 14px; }
 .popup-content h2, .about-title { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; }

From 5f0bc232bb7f29a3ac29682edbd4325e682c2c86 Mon Sep 17 00:00:00 2001
From: Adityasinh Sodha <adityasinh@proton.me>
Date: Tue, 29 Sep 2026 12:15:35 +0530
Subject: [PATCH 4/4] Improve document actions and unfiled navigation

---
 index.html |  1 +
 js/app.js  | 84 ++++++++++++++++++++++++++++++++++++++++--------------
 styles.css |  4 ++-
 3 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 445943b..5dfaa8e 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,7 @@ <h2 id="popupTitle">Add Document</h2>
     <select id="docCollection" aria-label="Document collection"></select>
     <label for="docFile">Attach File (optional):</label>
     <input type="file" id="docFile" accept=".pdf,.png,.jpg,.jpeg,.gif,.txt,.doc,.docx,.zip" />
+    <label id="removeFileOption" class="remove-file-option" hidden><input type="checkbox" id="removeExistingFile"> Remove attached file</label>
     <textarea id="docInfo" placeholder="Additional Information (optional)"></textarea>
     <div class="popup-actions">
       <button id="saveDocBtn" type="button">Save</button>
diff --git a/js/app.js b/js/app.js
index c79a24d..48c7c22 100644
--- a/js/app.js
+++ b/js/app.js
@@ -85,14 +85,18 @@ const collectionFilterMenu = document.getElementById('collectionFilterMenu');
 const filterLabel = document.getElementById('filterLabel');
 const collectionSidebar = document.getElementById('collectionSidebar');
 const searchIntro = document.querySelector('.search-intro');
+const removeFileOption = document.getElementById('removeFileOption');
+const removeExistingFile = document.getElementById('removeExistingFile');
 
 const COLLECTIONS_KEY = 'vaultCollections';
 let collections = JSON.parse(localStorage.getItem(COLLECTIONS_KEY) || '[]');
 let selectedCollectionIds = new Set();
 let expandedCollectionIds = new Set();
+let openDocumentMenuId = null;
 
 function dismissSearchIntro() {
   searchIntro.classList.add('is-dismissed');
+  document.querySelector('.vault-container').classList.add('intro-dismissed');
 }
 
 function persistCollections() {
@@ -103,19 +107,25 @@ function collectionNameFor(id) {
   return collections.find(collection => collection.id === id)?.name || 'Unfiled';
 }
 
+function documentsForCollection(id) {
+  return id === '__unfiled__' ? vault.filter(doc => !doc.collectionId) : vault.filter(doc => doc.collectionId === id);
+}
+
 function renderCollectionControls() {
   const counts = vault.reduce((result, doc) => {
     if (doc.collectionId) result[doc.collectionId] = (result[doc.collectionId] || 0) + 1;
     return result;
   }, {});
   collectionList.innerHTML = '';
-  collections.forEach(collection => {
+  const visibleCollections = [...collections, { id: '__unfiled__', name: 'Unfiled documents' }];
+  visibleCollections.forEach(collection => {
     const item = document.createElement('div');
-    const collectionDocs = vault.filter(doc => doc.collectionId === collection.id);
+    const collectionDocs = documentsForCollection(collection.id);
     const isExpanded = expandedCollectionIds.has(collection.id);
     item.className = `collection-item${selectedCollectionIds.has(collection.id) ? ' is-selected' : ''}${isExpanded ? ' is-expanded' : ''}`;
-    const documents = isExpanded ? `<div class="collection-documents">${collectionDocs.length ? collectionDocs.map(doc => `<button class="collection-document" type="button" data-document-id="${doc.id}" title="Open ${doc.name}">${doc.file?.type?.startsWith('image/') ? `<img src="${doc.file.data}" alt="">` : '<span class="document-placeholder" aria-hidden="true">⌁</span>'}<span>${doc.name}</span></button>`).join('') : '<p class="collection-empty">No documents yet</p>'}</div>` : '';
-    item.innerHTML = `<button class="collection-select" type="button" data-collection-id="${collection.id}" aria-expanded="${isExpanded}"><span class="collection-name">${collection.name}</span><span class="collection-count">${counts[collection.id] || 0}</span><span class="collection-chevron" aria-hidden="true">⌄</span></button><button class="collection-delete" type="button" data-delete-collection-id="${collection.id}" aria-label="Delete ${collection.name}" title="Delete collection">×</button>${documents}`;
+    const documents = isExpanded ? `<div class="collection-documents">${collectionDocs.length ? collectionDocs.map(doc => `<div class="collection-document-row"><button class="collection-document" type="button" data-document-id="${doc.id}" title="Open ${doc.name}">${doc.file?.type?.startsWith('image/') ? `<img src="${doc.file.data}" alt="">` : '<span class="document-placeholder" aria-hidden="true">⌁</span>'}<span>${doc.name}</span></button><button class="document-menu-toggle" type="button" data-document-menu-id="${doc.id}" aria-label="Actions for ${doc.name}" aria-expanded="${openDocumentMenuId === doc.id}">⋯</button>${openDocumentMenuId === doc.id ? `<div class="document-menu"><button type="button" data-edit-document-id="${doc.id}">Edit</button><button type="button" data-delete-document-id="${doc.id}">Delete</button></div>` : ''}</div>`).join('') : '<p class="collection-empty">No documents yet</p>'}</div>` : '';
+    const deleteCollection = collection.id === '__unfiled__' ? '' : `<button class="collection-delete" type="button" data-delete-collection-id="${collection.id}" aria-label="Delete ${collection.name}" title="Delete collection">×</button>`;
+    item.innerHTML = `<button class="collection-select" type="button" data-collection-id="${collection.id}" aria-expanded="${isExpanded}"><span class="collection-name">${collection.name}</span><span class="collection-count">${collectionDocs.length}</span><span class="collection-chevron" aria-hidden="true">⌄</span></button>${deleteCollection}${documents}`;
     collectionList.appendChild(item);
   });
   docCollection.innerHTML = '<option value="">Unfiled</option>' + collections.map(collection => `<option value="${collection.id}">${collection.name}</option>`).join('');
@@ -125,7 +135,19 @@ function renderCollectionControls() {
 }
 
 function isDocumentInSearchScope(doc) {
-  return selectedCollectionIds.size === 0 || selectedCollectionIds.has(doc.collectionId);
+  return selectedCollectionIds.size === 0 || selectedCollectionIds.has(doc.collectionId) || (selectedCollectionIds.has('__unfiled__') && !doc.collectionId);
+}
+
+function openDocumentForEditing(doc) {
+  document.getElementById("docName").value = doc.name;
+  document.getElementById("docValue").value = doc.value;
+  document.getElementById("docInfo").value = doc.info || "";
+  document.getElementById("docFile").value = "";
+  docCollection.value = doc.collectionId || '';
+  removeExistingFile.checked = false;
+  removeFileOption.hidden = !doc.file;
+  saveDocBtn.setAttribute("data-edit-id", doc.id);
+  popup.style.display = "flex";
 }
 
 async function generatePdfThumbnail(pdfDataURL) {
@@ -487,6 +509,35 @@ collectionList.addEventListener('click', async (event) => {
     else expandedCollectionIds.add(id);
     renderCollectionControls();
   }
+  const menuToggle = event.target.closest('[data-document-menu-id]');
+  if (menuToggle) {
+    const id = Number(menuToggle.dataset.documentMenuId);
+    openDocumentMenuId = openDocumentMenuId === id ? null : id;
+    renderCollectionControls();
+    return;
+  }
+  const editDocumentButton = event.target.closest('[data-edit-document-id]');
+  if (editDocumentButton) {
+    const doc = vault.find(item => item.id === Number(editDocumentButton.dataset.editDocumentId));
+    if (doc) openDocumentForEditing(doc);
+    openDocumentMenuId = null;
+    return;
+  }
+  const deleteDocumentButton = event.target.closest('[data-delete-document-id]');
+  if (deleteDocumentButton) {
+    const id = Number(deleteDocumentButton.dataset.deleteDocumentId);
+    const doc = vault.find(item => item.id === id);
+    if (!doc || !confirm(`Delete “${doc.name}”?`)) return;
+    const db = await openDB();
+    const tx = db.transaction(STORE_NAME, 'readwrite');
+    tx.objectStore(STORE_NAME).delete(id);
+    await waitForTx(tx);
+    vault = await getAllDocs();
+    openDocumentMenuId = null;
+    renderCollectionControls();
+    showToast('Document deleted', 'success');
+    return;
+  }
   const documentButton = event.target.closest('[data-document-id]');
   if (documentButton) {
     const doc = vault.find(item => item.id === Number(documentButton.dataset.documentId));
@@ -531,6 +582,8 @@ addDocBtn.onclick = () => {
   document.getElementById("docValue").value = "";
   document.getElementById("docInfo").value = "";
   document.getElementById("docFile").value = "";
+  removeExistingFile.checked = false;
+  removeFileOption.hidden = true;
   docCollection.value = selectedCollectionIds.size === 1 ? [...selectedCollectionIds][0] : '';
 
   // Open popup
@@ -547,6 +600,7 @@ saveDocBtn.onclick = async () => {
   const fileInput = document.getElementById("docFile");
   const file = fileInput.files[0];
   const collectionId = docCollection.value;
+  const shouldRemoveFile = removeExistingFile.checked;
 
   if (!name) return showToast("Document name is required", "error");
 
@@ -576,8 +630,9 @@ if (editId) {
     name,
     value,
     info,
-    file: fileData ? fileData : oldDoc.file,
+    file: fileData ? fileData : (shouldRemoveFile ? null : oldDoc.file),
     collectionId,
+    pdfThumb: fileData || shouldRemoveFile ? null : oldDoc.pdfThumb,
   };
 
   const putReq = store.put(updatedDoc);
@@ -595,6 +650,7 @@ vault = await getAllDocs();
 renderCollectionControls();
 
 popup.style.display = "none";
+removeFileOption.hidden = true;
 saveDocBtn.removeAttribute("data-edit-id");
 
 
@@ -828,22 +884,8 @@ document.getElementById("editDocsList").addEventListener("click", async (e) => {
 
         req.onsuccess = () => {
             const doc = req.result;
-
-            // Fill popup fields
-            document.getElementById("docName").value = doc.name;
-            document.getElementById("docValue").value = doc.value;
-            document.getElementById("docInfo").value = doc.info || "";
-            document.getElementById("docFile").value = "";
-            docCollection.value = doc.collectionId || '';
-
-            // Mark popup as EDIT MODE
-            saveDocBtn.setAttribute("data-edit-id", id);
-
-            // Close edit list
             document.getElementById("editPopup").style.display = "none";
-
-            // Open form popup
-            popup.style.display = "flex";
+            openDocumentForEditing(doc);
         };
 
         return;
diff --git a/styles.css b/styles.css
index 60f41b4..c0dc1f6 100644
--- a/styles.css
+++ b/styles.css
@@ -40,12 +40,13 @@ button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   gap: 24px;
 }
+.vault-container.intro-dismissed { grid-template-rows: auto minmax(0, 1fr) auto; }
 
 .app-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100vh; }
 .collection-sidebar { display: flex; flex-direction: column; min-height: 0; padding: 22px 14px 16px; border-right: 1px solid var(--line); background: #f4f7f5; }
 .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding: 0 6px; }.brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }.sidebar-close, .sidebar-toggle, .mobile-brand { display: none; }
 .new-collection-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 42px; margin-bottom: 24px; background: var(--accent); }.new-collection-btn span { font-size: 1.25rem; font-weight: 400; line-height: 0; }.sidebar-label { padding: 0 10px 8px; color: var(--text-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
-.collection-list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }.collection-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; border-radius: 9px; }.collection-select { overflow: hidden; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); text-align: left; font-weight: 550; }.collection-select:hover, .collection-item.is-selected .collection-select { background: var(--surface); color: var(--text); }.collection-item.is-selected .collection-select { color: var(--accent-hover); box-shadow: 0 1px 2px rgba(29,48,39,.05); }.collection-name { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }.collection-count { color: var(--text-muted); font-size: .75rem; }.collection-chevron { color: var(--text-muted); font-size: .9rem; transition: transform .2s ease; }.collection-item.is-expanded .collection-chevron { transform: rotate(180deg); }.collection-delete { display: grid; width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #88918d; opacity: 0; }.collection-item:hover .collection-delete, .collection-delete:focus-visible { opacity: 1; }.collection-delete:hover { background: #fcefed; color: var(--danger); }.collection-documents { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin: -1px 0 7px 10px; padding-left: 9px; border-left: 1px solid var(--line-strong); }.collection-document { display: flex; align-items: center; gap: 8px; min-height: 35px; padding: 5px 7px; overflow: hidden; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: .8rem; font-weight: 550; text-align: left; }.collection-document:hover { background: var(--surface); color: var(--text); }.collection-document img, .document-placeholder { flex: 0 0 23px; width: 23px; height: 23px; border-radius: 5px; object-fit: cover; background: var(--accent-soft); color: var(--accent-hover); text-align: center; line-height: 23px; }.collection-document span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.collection-empty { margin: 5px 7px; color: var(--text-muted); font-size: .76rem; }.sidebar-footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 18px 10px 2px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: .75rem; }.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+.collection-list { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }.collection-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; border-radius: 9px; }.collection-select { overflow: hidden; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); text-align: left; font-weight: 550; }.collection-select:hover, .collection-item.is-selected .collection-select { background: var(--surface); color: var(--text); }.collection-item.is-selected .collection-select { color: var(--accent-hover); box-shadow: 0 1px 2px rgba(29,48,39,.05); }.collection-name { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }.collection-count { color: var(--text-muted); font-size: .75rem; }.collection-chevron { color: var(--text-muted); font-size: .9rem; transition: transform .2s ease; }.collection-item.is-expanded .collection-chevron { transform: rotate(180deg); }.collection-delete { display: grid; width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #88918d; opacity: 0; }.collection-item:hover .collection-delete, .collection-delete:focus-visible { opacity: 1; }.collection-delete:hover { background: #fcefed; color: var(--danger); }.collection-documents { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin: -1px 0 7px 10px; padding-left: 9px; border-left: 1px solid var(--line-strong); }.collection-document-row { position: relative; display: flex; align-items: center; gap: 2px; }.collection-document { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 35px; padding: 5px 7px; overflow: hidden; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font-size: .8rem; font-weight: 550; text-align: left; }.collection-document:hover { background: var(--surface); color: var(--text); }.collection-document img, .document-placeholder { flex: 0 0 23px; width: 23px; height: 23px; border-radius: 5px; object-fit: cover; background: var(--accent-soft); color: var(--accent-hover); text-align: center; line-height: 23px; }.collection-document span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.document-menu-toggle { width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 1.1rem; line-height: 1; }.document-menu-toggle:hover { background: var(--surface); color: var(--text); }.document-menu { position: absolute; z-index: 5; top: 31px; right: 0; display: grid; min-width: 104px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 20px rgba(29,48,39,.14); }.document-menu button { min-height: 31px; padding: 5px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-size: .78rem; text-align: left; }.document-menu button:hover { background: var(--surface-muted); }.document-menu button:last-child { color: var(--danger); }.collection-empty { margin: 5px 7px; color: var(--text-muted); font-size: .76rem; }.sidebar-footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 18px 10px 2px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: .75rem; }.privacy-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
 
 .app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
 .header-start { display: flex; align-items: center; }
@@ -111,6 +112,7 @@ button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visib
 .popup-content select { width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; padding: 10px 12px; background: var(--surface); color: var(--text); }.modal-description { margin: -4px 0 0; color: var(--text-muted); font-size: .9rem; }
 .popup-content textarea { min-height: 90px; resize: vertical; }.popup-content input:focus, .popup-content textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22, 122, 92, .12); }
 .popup-content label { color: var(--text-muted); font-size: .875rem; font-weight: 600; }
+.popup-content .remove-file-option { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }.remove-file-option input { width: 16px; height: 16px; accent-color: var(--accent); }
 .popup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }.popup-actions button { flex: 1 1 110px; }
 .popup-actions button:not(#saveDocBtn):not(#refreshAppBtn) { border-color: var(--line-strong); background: var(--surface); color: var(--text); }.popup-actions button:not(#saveDocBtn):not(#refreshAppBtn):hover { background: var(--surface-muted); }