Tighter intro bubble + Clear restores default

Intro: moved out of static HTML into a JS constant rendered via the
same addMessage path used for all other bubbles. Source-HTML whitespace
between <div class="bubble"> and <p> was being preserved by the
bubble's white-space:pre-wrap and showing as extra vertical padding;
JS rendering produces clean markup without that.

Clear button: re-renders the intro message instead of writing
'Conversation cleared. How can I help next?'.

app.js

@@ -32,6 +32,10 @@ const SYSTEM_PROMPT =
   "Be concise, accurate, and well-structured. If a question is outside your knowledge, say so. " +
   "When the user asks about medical, legal, or financial topics, remind them once that you are not a substitute for a qualified professional, then answer the question helpfully.";
 
+// Shown in the chat at boot and again every time the user clicks Clear.
+const INTRO_MESSAGE =
+  "Hi — I'm an AI assistant running entirely in your browser. Ask a question, paste notes, or attach a document and tell me what to do with it.";
+
 // Default generation parameters. Mirrored by the UI sliders and persisted to
 // localStorage. Each entry: [defaultValue, decimalsForDisplay].
 const PARAM_DEFAULTS = {
@@ -660,15 +664,16 @@ document.addEventListener("drop", (e) => {
   if (e.dataTransfer?.files?.length) handleFiles(e.dataTransfer.files);
 });
 
+function renderIntro() {
+  chat.innerHTML = "";
+  addMessage("assistant", INTRO_MESSAGE);
+}
+
 clearBtn.addEventListener("click", () => {
   state.history = [{ role: "system", content: SYSTEM_PROMPT }];
   state.attachments = [];
   renderAttachments();
-  chat.innerHTML = "";
-  addMessage(
-    "assistant",
-    "Conversation cleared. How can I help next?",
-  );
+  renderIntro();
 });
 
 bannerCloseBtn.addEventListener("click", () => {
@@ -679,6 +684,7 @@ bannerCloseBtn.addEventListener("click", () => {
 detectDevice().then((d) => (backendEl.textContent = d.toUpperCase()));
 autoResize();
 initParamUI();
+renderIntro();
 
 // If we've successfully loaded this same model before in this browser, the
 // weights are already in the HTTP cache — surface a one-tap resume so the

index.html

@@ -45,14 +45,7 @@
             </div>
           </div>
 
-          <div class="chat" id="chat" aria-live="polite">
-            <div class="msg assistant">
-              <div class="avatar">AI</div>
-              <div class="bubble">
-                <p>Hi — I'm an AI assistant running entirely in your browser. Ask a question, paste notes, or attach a document and tell me what to do with it.</p>
-              </div>
-            </div>
-          </div>
+          <div class="chat" id="chat" aria-live="polite"></div>
 
           <div class="attachments" id="attachments" hidden></div>