Update app.py

app.py

@@ -751,524 +751,500 @@ def rename_kb_file(old_name: str, new_name: str) -> Tuple[str, str]:
         return f"❌ Could not rename: {e}", list_kb_files_html()
 
 
-# ── CSS ────────────────────────────────────────────────────────────────────────
 
-STYLE_HTML = """<style>
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-:root {
-  /* Palette */
-  --sage:#6b8f71;   --sage-l:#eaf2eb;  --sage-d:#4f6e55;  --sage-xl:#f2f8f3;
-  --sand:#f5f0e8;   --cream:#fdfaf5;   --stone:#e4ddd3;   --stone2:#d0c8bd;
-  --ink:#2d2d2d;    --ink2:#4a4540;    --muted:#7a7167;   --muted2:#a09890;
-  --rose:#c0717a;   --rose-l:#f8eded;
-  /* Spacing & shape */
-  --r:13px; --r-sm:8px; --r-xs:5px;
-  /* Shadows */
-  --sh-sm: 0 1px 3px rgba(0,0,0,.07);
-  --sh:    0 2px 10px rgba(0,0,0,.08);
-  --sh-md: 0 4px 20px rgba(0,0,0,.10);
-  --sh-lg: 0 8px 32px rgba(0,0,0,.13);
-}
+# ── CSS + JS ────────────────────────────────────────────────────────────────
 
-*, *::before, *::after { box-sizing: border-box; }
-
-body, .gradio-container {
-  background: var(--sand) !important;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
-  color: var(--ink) !important;
-  -webkit-font-smoothing: antialiased;
-}
-.gradio-container { padding: 0 !important; max-width: 100% !important; }
-
-/* ── Header ─────────────────────────────────────────── */
-.app-hdr {
-  background: var(--cream);
-  border-bottom: 1px solid var(--stone);
-  padding: 0 24px;
-  height: 58px;
-  display: flex; align-items: center; gap: 13px;
-  position: sticky; top: 0; z-index: 20;
-  box-shadow: var(--sh-sm);
-}
-.app-hdr-icon {
-  width: 36px; height: 36px;
-  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-d) 100%);
-  border-radius: 10px;
+STYLE_HTML = """
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+<style>
+/* ─── Reset & tokens ───────────────────────────────────────── */
+:root {
+  --c-bg:       #F6F1E9;
+  --c-surface:  #FDFAF5;
+  --c-border:   #E2D9CE;
+  --c-border2:  #C9BFB3;
+  --c-ink:      #1E1C1A;
+  --c-ink2:     #4A4540;
+  --c-muted:    #7A7167;
+  --c-muted2:   #A09890;
+  --c-sage:     #5C7E62;
+  --c-sage-h:   #4A6550;
+  --c-sage-bg:  #EAF2EB;
+  --c-sage-bg2: #D4E8D6;
+  --c-rose:     #B5626A;
+  --c-rose-bg:  #F8EDEE;
+  --r:          10px;
+  --r2:         7px;
+  --r3:         5px;
+}
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html, body, .gradio-container {
+  height: 100% !important;
+  background: var(--c-bg) !important;
+  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
+  font-size: 14px !important;
+  color: var(--c-ink) !important;
+  -webkit-font-smoothing: antialiased !important;
+}
+.gradio-container { max-width: 100% !important; padding: 0 !important; overflow: hidden !important; }
+footer, .footer { display: none !important; }
+
+/* ─── Header ────────────────────────────────────────────────── */
+.h-bar {
+  height: 52px;
+  background: var(--c-surface);
+  border-bottom: 1px solid var(--c-border);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  gap: 11px;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+.h-logo {
+  width: 32px; height: 32px;
+  background: var(--c-sage);
+  border-radius: 8px;
   display: flex; align-items: center; justify-content: center;
-  font-size: 1.1rem; flex-shrink: 0;
-  box-shadow: 0 2px 8px rgba(107,143,113,.35);
+  font-size: 15px; flex-shrink: 0;
+  box-shadow: 0 1px 4px rgba(92,126,98,.4);
 }
-.app-hdr h1 {
-  margin: 0 0 1px; font-size: .97rem; font-weight: 650;
-  color: var(--ink); letter-spacing: -.01em;
+.h-name {
+  font-size: 14px; font-weight: 600;
+  color: var(--c-ink); letter-spacing: -.01em;
 }
-.app-hdr p { margin: 0; font-size: .73rem; color: var(--muted); }
-/* Subtle version badge */
-.app-hdr-badge {
+.h-sub { font-size: 11.5px; color: var(--c-muted); margin-top: 1px; }
+.h-badge {
   margin-left: auto;
-  background: var(--sage-xl); border: 1px solid var(--sage-l);
-  color: var(--sage-d); border-radius: 999px;
-  padding: 3px 10px; font-size: .68rem; font-weight: 600;
-  letter-spacing: .02em;
+  font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
+  color: var(--c-sage); background: var(--c-sage-bg);
+  border: 1px solid var(--c-sage-bg2);
+  border-radius: 999px; padding: 3px 10px;
 }
 
-/* ── 3-column layout ──────���──────────────────────────── */
-.app-body {
-  display: grid;
-  grid-template-columns: 210px 1fr 230px;
-  height: calc(100vh - 58px);
-  overflow: hidden;
+/* ─── 3-col layout ──────────────────────────────────────────── */
+.body-grid {
+  display: grid !important;
+  grid-template-columns: 196px 1fr 218px !important;
+  height: calc(100vh - 52px) !important;
+  overflow: hidden !important;
+  gap: 0 !important;
 }
-@media(max-width: 900px) {
-  .app-body { grid-template-columns: 1fr; height: auto; overflow: visible; }
-  .left-col, .right-col { display: none; }
+@media (max-width: 860px) {
+  .body-grid { grid-template-columns: 1fr !important; height: auto !important; overflow: visible !important; }
+  .left-panel, .right-panel { display: none !important; }
 }
 
-/* ── Left col ────────────────────────────────────────── */
-.left-col {
-  border-right: 1px solid var(--stone); background: var(--cream);
+/* ─── Left panel: suggestions ───────────────────────────────── */
+.left-panel {
+  border-right: 1px solid var(--c-border);
+  background: var(--c-surface);
   display: flex; flex-direction: column; overflow: hidden;
 }
-.left-col-hdr {
-  padding: 16px 14px 10px;
-  font-size: .63rem; font-weight: 700; letter-spacing: .08em;
-  text-transform: uppercase; color: var(--muted2);
-  border-bottom: 1px solid var(--stone); flex-shrink: 0;
+.lp-head {
+  padding: 14px 14px 10px;
+  font-size: 10px; font-weight: 600; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--c-muted2);
+  border-bottom: 1px solid var(--c-border);
   display: flex; align-items: center; gap: 6px;
 }
-.left-col-hdr::before {
+.lp-head::before {
   content: "";
-  display: inline-block; width: 6px; height: 6px;
-  background: var(--sage); border-radius: 50%;
-}
-.left-col-body { overflow-y: auto; padding: 12px 10px 16px; flex: 1; }
-
-/* Suggestion pills — staggered fade-in */
-.suggestion-pill {
-  display: flex; align-items: flex-start; gap: 8px;
-  width: 100%; text-align: left;
-  background: var(--cream); border: 1.5px solid var(--stone);
-  border-radius: var(--r); padding: 9px 12px;
-  font-size: .77rem; color: var(--ink2); cursor: pointer;
-  margin-bottom: 8px; line-height: 1.45;
-  transition: background .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
-  box-shadow: var(--sh-sm);
-  opacity: 0; animation: pillFadeIn .4s ease forwards;
-}
-.suggestion-pill:nth-child(1) { animation-delay: .05s; }
-.suggestion-pill:nth-child(2) { animation-delay: .12s; }
-.suggestion-pill:nth-child(3) { animation-delay: .19s; }
-.suggestion-pill:nth-child(4) { animation-delay: .26s; }
-.suggestion-pill:nth-child(5) { animation-delay: .33s; }
-.suggestion-pill::before {
-  content: "→"; color: var(--sage); font-size: .8rem;
-  flex-shrink: 0; margin-top: 1px; transition: transform .16s;
-}
-.suggestion-pill:hover {
-  background: var(--sage-xl); border-color: var(--sage);
-  color: var(--sage-d); transform: translateX(3px);
-  box-shadow: var(--sh);
-}
-.suggestion-pill:hover::before { transform: translateX(3px); }
-@keyframes pillFadeIn {
-  from { opacity: 0; transform: translateY(6px); }
-  to   { opacity: 1; transform: translateY(0);   }
+  width: 5px; height: 5px;
+  background: var(--c-sage); border-radius: 50%; flex-shrink: 0;
+}
+.lp-body { overflow-y: auto; padding: 10px 10px 16px; flex: 1; }
+.s-pill {
+  width: 100%; display: flex; align-items: flex-start; gap: 8px;
+  text-align: left; background: var(--c-surface);
+  border: 1px solid var(--c-border); border-radius: var(--r);
+  padding: 9px 11px; font-size: 12px; font-weight: 400;
+  color: var(--c-ink2); cursor: pointer; margin-bottom: 7px;
+  line-height: 1.45; transition: all .15s ease;
+  opacity: 0; animation: fadeUp .3s ease forwards;
+}
+.s-pill:nth-child(1) { animation-delay: .04s; }
+.s-pill:nth-child(2) { animation-delay: .10s; }
+.s-pill:nth-child(3) { animation-delay: .16s; }
+.s-pill:nth-child(4) { animation-delay: .22s; }
+.s-pill::before {
+  content: "→"; color: var(--c-sage); font-size: 13px;
+  flex-shrink: 0; margin-top: 0; line-height: 1.45;
+  transition: transform .15s ease;
+}
+.s-pill:hover {
+  background: var(--c-sage-bg); border-color: var(--c-sage);
+  color: var(--c-sage-h); transform: translateX(2px);
+}
+.s-pill:hover::before { transform: translateX(2px); }
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(5px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 
-/* ── Centre col ──────────────────────────────────────── */
-.centre-col {
-  display: flex; flex-direction: column; overflow: hidden;
-  background: var(--sand);
+/* ─── Centre: chat ───────────────────────���───────────────────── */
+.chat-col {
+  display: flex !important; flex-direction: column !important;
+  overflow: hidden !important; background: var(--c-bg) !important;
 }
 
-/* Kill ALL Gradio chrome */
+/* Strip ALL Gradio chrome from the chatbot */
+[data-testid="chatbot"], .gr-chatbot {
+  flex: 1 !important; border: none !important;
+  border-radius: 0 !important; background: transparent !important;
+  box-shadow: none !important;
+}
+/* Kill label every possible way */
+[data-testid="chatbot"] .label-wrap,
 [data-testid="chatbot"] > .label-wrap,
-[data-testid="chatbot"] > div > .label-wrap,
 [data-testid="chatbot"] label,
-[data-testid="chatbot"] .label-wrap,
-.chatbot-label, .label-wrap span,
-.gr-chatbot-container .label-wrap,
-.chatbot > .panel > .label,
-div[class*="label"] > span:only-child,
-.block > .label-wrap { display: none !important; }
-.gr-chatbot, [data-testid="chatbot"] {
-  flex: 1 !important; height: 100% !important;
-  border: none !important; border-radius: 0 !important; background: transparent !important;
-}
-footer { display: none !important; }
+.block > .label-wrap,
+.label-wrap { display: none !important; }
 
-/* ── Chat bubbles ─────────────────────────────────────── */
-.message { animation: bubbleIn .22s ease; }
-@keyframes bubbleIn {
-  from { opacity: 0; transform: translateY(8px); }
+/* ─── Bubbles ────────────────────────────────────────────────── */
+@keyframes bubIn {
+  from { opacity: 0; transform: translateY(6px); }
   to   { opacity: 1; transform: translateY(0); }
 }
+.message { animation: bubIn .2s ease; }
+
 .message.user > div {
-  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-d) 100%) !important;
+  background: var(--c-sage) !important;
   color: #fff !important;
-  border-radius: var(--r) var(--r) 4px var(--r) !important;
-  padding: 10px 15px !important; max-width: 74% !important;
-  font-size: .875rem !important; line-height: 1.6 !important;
-  box-shadow: 0 3px 12px rgba(79,110,85,.30) !important;
+  border-radius: var(--r) var(--r) 3px var(--r) !important;
+  padding: 9px 13px !important;
+  max-width: 72% !important;
+  font-size: 13.5px !important; line-height: 1.6 !important;
+  box-shadow: 0 2px 8px rgba(92,126,98,.28) !important;
 }
 .message.bot > div {
-  background: var(--cream) !important; border: 1px solid var(--stone) !important;
-  border-radius: var(--r) var(--r) var(--r) 4px !important;
-  padding: 12px 16px !important; max-width: 80% !important;
-  font-size: .875rem !important; line-height: 1.68 !important;
-  box-shadow: var(--sh) !important; color: var(--ink) !important;
-}
-/* Bot avatar dot */
-.message.bot::before {
-  content: "🤖";
-  display: block; font-size: .85rem; margin-bottom: 4px;
-  opacity: .7;
+  background: var(--c-surface) !important;
+  border: 1px solid var(--c-border) !important;
+  border-radius: var(--r) var(--r) var(--r) 3px !important;
+  padding: 11px 14px !important;
+  max-width: 80% !important;
+  font-size: 13.5px !important; line-height: 1.68 !important;
+  box-shadow: 0 1px 4px rgba(0,0,0,.07) !important;
+  color: var(--c-ink) !important;
 }
 
-/* ── Input + toolbar card ────────────────────────────── */
+/* ─── Input card (textarea + toolbar as one unit) ────────────── */
 .chat-input-container {
-  background: var(--cream) !important;
-  border-top: 1px solid var(--stone) !important;
-  padding: 12px 14px 8px !important;
-  flex-shrink: 0;
+  background: var(--c-surface) !important;
+  border-top: 1px solid var(--c-border) !important;
+  padding: 10px 14px 10px !important;
+  flex-shrink: 0 !important;
 }
-/* Outer card border */
+/* The outer input row Gradio wraps */
 .chat-input-container > .wrap,
 .chat-input-container > div:first-child {
-  border: 1.5px solid var(--stone) !important;
-  border-radius: var(--r) var(--r) var(--r-sm) var(--r-sm) !important;
-  overflow: hidden !important; background: var(--sand) !important;
-  transition: border-color .2s, box-shadow .2s !important;
+  border: 1.5px solid var(--c-border) !important;
+  border-radius: var(--r) !important;
+  background: var(--c-bg) !important;
+  overflow: hidden !important;
+  transition: border-color .18s, box-shadow .18s !important;
 }
 .chat-input-container > .wrap:focus-within,
 .chat-input-container > div:first-child:focus-within {
-  border-color: var(--sage) !important;
-  box-shadow: 0 0 0 3px rgba(107,143,113,.15) !important;
+  border-color: var(--c-sage) !important;
+  box-shadow: 0 0 0 3px rgba(92,126,98,.12) !important;
 }
 .chat-input-container textarea {
-  background: var(--sand) !important; border: none !important;
-  border-radius: 0 !important; padding: 11px 14px !important;
-  font-size: .875rem !important; color: var(--ink) !important;
-  resize: none !important; font-family: inherit !important;
+  background: var(--c-bg) !important;
+  border: none !important; border-radius: 0 !important;
+  padding: 11px 13px !important;
+  font-size: 13.5px !important; font-family: "Inter", sans-serif !important;
+  color: var(--c-ink) !important; resize: none !important;
   line-height: 1.55 !important;
 }
 .chat-input-container textarea:focus { outline: none !important; box-shadow: none !important; }
-.chat-input-container textarea::placeholder { color: var(--muted2) !important; }
-.chat-input-container button[aria-label="Send"] {
-  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-d) 100%) !important;
-  color: #fff !important; border: none !important;
-  border-radius: var(--r-sm) !important; padding: 0 15px !important; height: 36px !important;
-  font-weight: 600 !important; font-size: .82rem !important;
-  transition: opacity .15s, transform .1s !important;
-  margin: 0 7px 7px 0 !important; align-self: flex-end !important;
-  box-shadow: 0 2px 8px rgba(79,110,85,.28) !important;
+.chat-input-container textarea::placeholder { color: var(--c-muted2) !important; }
+
+/* Send button */
+.chat-input-container button[aria-label="Send"],
+.chat-input-container button.send-btn {
+  background: var(--c-sage) !important; color: #fff !important;
+  border: none !important; border-radius: var(--r2) !important;
+  padding: 0 14px !important; height: 34px !important;
+  font-size: 12.5px !important; font-weight: 600 !important;
+  margin: 0 6px 6px 0 !important; align-self: flex-end !important;
+  transition: background .14s, transform .1s !important;
+  box-shadow: 0 1px 4px rgba(92,126,98,.3) !important;
 }
 .chat-input-container button[aria-label="Send"]:hover {
-  opacity: .88 !important; transform: translateY(-1px) !important;
-}
-
-/* Toolbar — fused bottom of input card */
-.tb-bar {
-  display: flex; align-items: center; gap: 2px;
-  padding: 5px 10px 7px;
-  background: var(--sand); border-top: 1px solid var(--stone);
-  border-radius: 0 0 var(--r-sm) var(--r-sm);
-  margin: 0 -1px -1px -1px;
-}
-.tb-btn {
-  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
-  background: none; border: none; border-radius: var(--r-xs);
-  cursor: pointer; color: var(--muted); transition: background .13s, color .13s;
-  position: relative; flex-shrink: 0;
-}
-.tb-btn:hover { background: var(--sage-l); color: var(--sage-d); }
-.tb-btn svg { width: 13px; height: 13px; pointer-events: none; }
-.tb-sep { width: 1px; height: 13px; background: var(--stone2); margin: 0 3px; flex-shrink: 0; }
-.tb-btn::after {
-  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
-  transform: translateX(-50%); background: var(--ink); color: #fff;
-  font-size: .63rem; padding: 3px 7px; border-radius: 4px; white-space: nowrap;
-  pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 99;
+  background: var(--c-sage-h) !important;
+  transform: translateY(-1px) !important;
+}
+
+/* ─── Toolbar fused below textarea ───────────────────────────── */
+.tb {
+  display: flex; align-items: center; gap: 1px;
+  padding: 4px 9px 6px;
+  background: var(--c-bg);
+  border-top: 1px solid var(--c-border);
+  border-radius: 0 0 var(--r2) var(--r2);
+  margin: 0 -1px -1px;
+}
+.tb-b {
+  width: 24px; height: 24px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: none; border: none; border-radius: var(--r3);
+  cursor: pointer; color: var(--c-muted);
+  transition: background .12s, color .12s; position: relative; flex-shrink: 0;
+}
+.tb-b svg { width: 12px; height: 12px; pointer-events: none; display: block; }
+.tb-b:hover { background: var(--c-sage-bg); color: var(--c-sage); }
+.tb-div { width: 1px; height: 12px; background: var(--c-border2); margin: 0 3px; flex-shrink: 0; }
+.tb-b[data-tip]::after {
+  content: attr(data-tip);
+  position: absolute; bottom: calc(100% + 5px); left: 50%;
+  transform: translateX(-50%);
+  background: var(--c-ink); color: #fff;
+  font-size: 10px; padding: 3px 7px; border-radius: 4px;
+  white-space: nowrap; pointer-events: none;
+  opacity: 0; transition: opacity .12s; z-index: 99;
   font-family: "Inter", sans-serif;
 }
-.tb-btn:hover::after { opacity: 1; }
+.tb-b:hover[data-tip]::after { opacity: 1; }
 
-/* ── Right col ───────────────────────────────────────── */
-.right-col {
-  border-left: 1px solid var(--stone); background: var(--cream);
+/* ─── Right panel: files ─────────────────────────────────────── */
+.right-panel {
+  border-left: 1px solid var(--c-border);
+  background: var(--c-surface);
   display: flex; flex-direction: column; overflow: hidden;
 }
-.right-col-hdr {
-  padding: 14px 14px 12px; border-bottom: 1px solid var(--stone);
-  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
+.rp-head {
+  padding: 13px 14px 11px;
+  border-bottom: 1px solid var(--c-border);
+  flex-shrink: 0; display: flex; align-items: center;
 }
-.right-col-title {
-  font-size: .63rem; font-weight: 700; letter-spacing: .08em;
-  text-transform: uppercase; color: var(--muted2);
+.rp-title {
+  font-size: 10px; font-weight: 600; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--c-muted2);
   display: flex; align-items: center; gap: 6px;
 }
-.right-col-title::before {
+.rp-title::before {
   content: "";
-  display: inline-block; width: 6px; height: 6px;
-  background: var(--sage); border-radius: 50%;
+  width: 5px; height: 5px;
+  background: var(--c-sage); border-radius: 50%;
 }
-/* File count badge */
-.kb-count-badge {
-  background: var(--sage-xl); color: var(--sage-d); border-radius: 999px;
-  padding: 1px 8px; font-size: .68rem; font-weight: 600;
-  border: 1px solid var(--sage-l);
+.rp-count {
+  font-size: 10px; font-weight: 600; color: var(--c-sage);
+  background: var(--c-sage-bg); border: 1px solid var(--c-sage-bg2);
+  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
 }
-
 /* + Add file */
-.add-file-btn-wrap { position: relative; display: inline-block; }
-.add-file-btn {
-  background: var(--sage-xl); border: 1.5px solid var(--sage-l);
-  color: var(--sage-d); border-radius: var(--r-sm); padding: 5px 11px;
-  font-size: .74rem; font-weight: 600; cursor: pointer;
-  transition: all .15s; white-space: nowrap;
-  display: flex; align-items: center; gap: 5px;
-  box-shadow: var(--sh-sm);
-}
-.add-file-btn:hover {
-  background: var(--sage); color: #fff; border-color: var(--sage);
-  box-shadow: 0 2px 8px rgba(107,143,113,.3);
-  transform: translateY(-1px);
-}
-.add-file-tooltip {
-  display: none; position: absolute; top: calc(100% + 8px); right: 0;
-  background: var(--ink); color: #fff; border-radius: var(--r-sm);
-  padding: 10px 13px; font-size: .72rem; line-height: 1.65;
-  white-space: nowrap; z-index: 50;
-  box-shadow: var(--sh-lg); min-width: 210px;
-  animation: tooltipIn .14s ease;
+.add-wrap { position: relative; margin-left: auto; }
+.add-btn {
+  display: flex; align-items: center; gap: 4px;
+  background: var(--c-sage-bg); border: 1px solid var(--c-sage-bg2);
+  color: var(--c-sage-h); border-radius: var(--r2);
+  padding: 5px 11px; font-size: 12px; font-weight: 600;
+  cursor: pointer; transition: all .14s; white-space: nowrap;
+}
+.add-btn:hover {
+  background: var(--c-sage); color: #fff;
+  border-color: var(--c-sage);
+  box-shadow: 0 1px 6px rgba(92,126,98,.3);
+}
+.add-tip {
+  display: none; position: absolute; top: calc(100% + 7px); right: 0;
+  background: var(--c-ink); color: #f5f5f0;
+  border-radius: var(--r2); padding: 11px 13px;
+  font-size: 11px; line-height: 1.7; min-width: 206px;
+  box-shadow: 0 6px 24px rgba(0,0,0,.18); z-index: 60;
+}
+.add-tip strong { display: block; margin-bottom: 5px; font-size: 12px; color: #fff; }
+.add-tip em { display: flex; align-items: center; gap: 5px; opacity: .82; font-style: normal; }
+.add-tip em::before { content: "•"; color: #9ecfa4; }
+.add-tip::before {
+  content: ""; position: absolute; top: -5px; right: 13px;
+  border: 5px solid transparent; border-top: 0;
+  border-bottom-color: var(--c-ink);
+}
+.add-wrap:hover .add-tip { display: block; }
+
+.rp-body { overflow-y: auto; padding: 4px 8px 16px; flex: 1; }
+.rp-count-line {
+  font-size: 10.5px; color: var(--c-muted2); padding: 8px 6px 4px;
 }
-@keyframes tooltipIn {
-  from { opacity: 0; transform: translateY(-3px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-.add-file-tooltip::before {
-  content: ""; position: absolute; top: -5px; right: 14px;
-  border-left: 5px solid transparent; border-right: 5px solid transparent;
-  border-bottom: 5px solid var(--ink);
-}
-.add-file-tooltip strong { display: block; margin-bottom: 4px; font-size: .76rem; }
-.add-file-tooltip .tt-row { display: flex; align-items: center; gap: 6px; opacity: .88; }
-.add-file-tooltip .tt-row::before { content: "•"; color: var(--sage-l); }
-.add-file-btn-wrap:hover .add-file-tooltip { display: block; }
-
-.right-col-body { overflow-y: auto; padding: 6px 8px 16px; flex: 1; }
 
 /* File rows */
-.kb-file-row {
-  display: flex; align-items: center; gap: 8px;
-  padding: 7px 9px; border-radius: var(--r-sm); cursor: default;
-  transition: background .13s;
-}
-.kb-file-row:hover { background: var(--sand); }
-.kb-file-icon { font-size: .82rem; flex-shrink: 0; opacity: .8; }
-.kb-file-name {
-  flex: 1; font-size: .775rem; color: var(--ink2);
+.f-row {
+  display: flex; align-items: center; gap: 7px;
+  padding: 7px 8px; border-radius: var(--r2);
+  transition: background .12s; position: relative;
+}
+.f-row:hover { background: var(--c-bg); }
+.f-ico { font-size: 13px; flex-shrink: 0; opacity: .75; }
+.f-name {
+  flex: 1; font-size: 12px; color: var(--c-ink2);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.kb-file-actions {
-  display: none; gap: 1px; align-items: center; flex-shrink: 0;
-}
-.kb-file-row:hover .kb-file-actions { display: flex; }
-.kb-action-btn {
-  background: none; border: none; cursor: pointer; font-size: .78rem;
-  padding: 3px 5px; border-radius: 4px; color: var(--muted);
-  transition: background .12s, color .12s; line-height: 1;
+.f-acts { display: none; gap: 1px; align-items: center; flex-shrink: 0; }
+.f-row:hover .f-acts { display: flex; }
+.f-btn {
+  background: none; border: none; cursor: pointer;
+  font-size: 12px; padding: 3px 4px; border-radius: 4px;
+  color: var(--c-muted); transition: background .11s, color .11s; line-height: 1;
 }
-.kb-action-btn:hover { background: var(--stone); color: var(--ink); }
-.kb-action-btn.del:hover { background: var(--rose-l); color: var(--rose); }
+.f-btn:hover { background: var(--c-border); color: var(--c-ink); }
+.f-btn.del:hover { background: var(--c-rose-bg); color: var(--c-rose); }
 
-/* Rename inline */
-.kb-rename-row {
-  display: none; padding: 5px 8px; gap: 5px; align-items: center;
-}
-.kb-rename-row.active { display: flex; }
-.kb-rename-input {
-  flex: 1; border: 1.5px solid var(--sage); border-radius: var(--r-xs);
-  padding: 4px 8px; font-size: .75rem; background: var(--sand);
-  color: var(--ink); outline: none; font-family: inherit;
+/* Rename row */
+.f-rename { display: none; padding: 5px 8px; gap: 5px; align-items: center; }
+.f-rename.on { display: flex; }
+.f-rename input {
+  flex: 1; border: 1.5px solid var(--c-sage); border-radius: var(--r3);
+  padding: 4px 8px; font-size: 11px; background: var(--c-bg);
+  color: var(--c-ink); outline: none; font-family: "Inter", sans-serif;
 }
-.kb-rename-save {
-  background: var(--sage); color: #fff; border: none; border-radius: var(--r-xs);
-  padding: 4px 9px; font-size: .72rem; font-weight: 600; cursor: pointer;
-  transition: background .13s;
+.f-rename .save {
+  background: var(--c-sage); color: #fff; border: none;
+  border-radius: var(--r3); padding: 4px 9px;
+  font-size: 11px; font-weight: 600; cursor: pointer;
 }
-.kb-rename-save:hover { background: var(--sage-d); }
-.kb-rename-cancel {
-  background: none; border: 1px solid var(--stone); border-radius: var(--r-xs);
-  padding: 4px 7px; font-size: .72rem; color: var(--muted); cursor: pointer;
+.f-rename .cancel {
+  background: none; border: 1px solid var(--c-border);
+  border-radius: var(--r3); padding: 4px 7px;
+  font-size: 11px; color: var(--c-muted); cursor: pointer;
 }
 
-/* ── Toast notification ───────────────────────────────── */
-.kb-toast {
-  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(6px);
-  background: var(--ink); color: #fff; border-radius: var(--r-sm);
-  padding: 9px 20px; font-size: .79rem; z-index: 9999;
-  opacity: 0; pointer-events: none;
-  transition: opacity .22s, transform .22s;
-  white-space: nowrap; box-shadow: var(--sh-md);
-  display: flex; align-items: center; gap: 8px;
-}
-.kb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
-
-/* ── Source chip ────────────────────────────────────────── */
+/* ─── Source chips on bot replies ────────────────────────────── */
 .src-row {
   display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
   margin-top: 10px; padding-top: 9px;
-  border-top: 1px solid var(--stone);
+  border-top: 1px solid var(--c-border);
 }
-.src-label {
-  font-size: .67rem; font-weight: 700; letter-spacing: .07em;
-  text-transform: uppercase; color: var(--muted2);
-  margin-right: 2px; flex-shrink: 0;
+.src-lbl {
+  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--c-muted2); flex-shrink: 0; margin-right: 1px;
 }
 .src-chip {
   display: inline-flex; align-items: center; gap: 4px;
-  background: var(--sage-xl); border: 1px solid var(--sage-l);
+  background: var(--c-sage-bg); border: 1px solid var(--c-sage-bg2);
   border-radius: 999px; padding: 2px 10px 2px 7px;
-  transition: background .14s, border-color .14s;
-  animation: chipIn .22s ease;
+  animation: chipIn .2s ease;
+  transition: background .13s, border-color .13s;
 }
-.src-chip:hover { background: var(--sage-l); border-color: var(--sage); }
+.src-chip:hover { background: var(--c-sage-bg2); border-color: var(--c-sage); }
 @keyframes chipIn {
-  from { opacity: 0; transform: translateY(4px) scale(.95); }
-  to   { opacity: 1; transform: translateY(0)   scale(1);   }
+  from { opacity:0; transform: scale(.92) translateY(3px); }
+  to   { opacity:1; transform: scale(1)   translateY(0);   }
 }
-.src-chip-icon { font-size: .72rem; }
+.src-chip-icon { font-size: 10.5px; }
 .src-chip-name {
-  font-size: .72rem; font-weight: 500;
-  color: var(--sage-d); max-width: 140px;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 11px; font-weight: 500; color: var(--c-sage-h);
+  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 
-/* ── Scrollbar polish ────────────────────────────��────── */
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--stone2); border-radius: 99px; }
-::-webkit-scrollbar-thumb:hover { background: var(--muted2); }
+/* ─── Toast ──────────────────────────────────────────────────── */
+.toast {
+  position: fixed; bottom: 20px; left: 50%;
+  transform: translateX(-50%) translateY(8px);
+  background: var(--c-ink); color: #fff;
+  border-radius: var(--r2); padding: 8px 18px;
+  font-size: 12px; z-index: 9999; opacity: 0;
+  pointer-events: none; transition: opacity .2s, transform .2s;
+  box-shadow: 0 4px 16px rgba(0,0,0,.2); white-space: nowrap;
+}
+.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
 
-/* ── Selection colour ─────────────────────────────────── */
-::selection { background: rgba(107,143,113,.22); }
+/* ─── Scrollbars ─────────────────────────────────────────────── */
+* { scrollbar-width: thin; scrollbar-color: var(--c-border2) transparent; }
+::-webkit-scrollbar { width: 4px; }
+::-webkit-scrollbar-thumb { background: var(--c-border2); border-radius: 99px; }
+
+/* ─── Text selection ─────────────────────────────────────────── */
+::selection { background: rgba(92,126,98,.18); }
 </style>
 
 <script>
-/* ── KB action dispatcher ──────────────────────── */
-function kbAction(action, filename) {
+/* ── Action dispatcher ────────────────────────────── */
+function kbAction(action, name) {
   if (action === 'delete') {
-    if (!confirm('Delete ' + filename + '?')) return;
-    setGradioInput('kb-hidden-delete', filename);
-    setTimeout(function(){ clickGradioBtn('kb-delete-trigger'); }, 80);
+    if (!confirm('Delete ' + name + '?')) return;
+    _setGI('kb-hidden-delete', name);
+    setTimeout(function(){ _clickGI('kb-delete-trigger'); }, 80);
   } else if (action === 'replace') {
     document.getElementById('kb-file-attach').click();
-    // Store target for replacement note
-    window._kbReplaceTarget = filename;
   } else if (action === 'rename') {
-    var row  = document.getElementById('row-' + filename);
-    var rrow = document.getElementById('rrow-' + filename);
-    if (row)  row.style.display  = 'none';
-    if (rrow) { rrow.classList.add('active'); rrow.querySelector('input').focus(); }
+    var r = document.getElementById('row-' + name);
+    var rr= document.getElementById('rrow-' + name);
+    if (r) r.style.display = 'none';
+    if (rr){ rr.classList.add('on'); rr.querySelector('input').focus(); }
   }
 }
-function kbCancelRename(filename) {
-  var row  = document.getElementById('row-'  + filename);
-  var rrow = document.getElementById('rrow-' + filename);
-  if (row)  row.style.display  = '';
-  if (rrow) rrow.classList.remove('active');
-}
-function kbSaveRename(oldName) {
-  var rrow  = document.getElementById('rrow-' + oldName);
-  var input = rrow ? rrow.querySelector('input') : null;
-  if (!input || !input.value.trim()) return;
-  setGradioInput('kb-hidden-old-name', oldName);
-  setGradioInput('kb-hidden-new-name', input.value.trim());
-  setTimeout(function(){ clickGradioBtn('kb-rename-trigger'); }, 80);
-}
-function setGradioInput(elemId, value) {
-  var el = document.querySelector('#' + elemId + ' input, #' + elemId + ' textarea');
+function kbCancelRename(name) {
+  var r = document.getElementById('row-' + name);
+  var rr= document.getElementById('rrow-' + name);
+  if (r) r.style.display = '';
+  if (rr) rr.classList.remove('on');
+}
+function kbSaveRename(old) {
+  var rr = document.getElementById('rrow-' + old);
+  var v  = rr ? rr.querySelector('input').value.trim() : '';
+  if (!v) return;
+  _setGI('kb-hidden-old-name', old);
+  _setGI('kb-hidden-new-name', v);
+  setTimeout(function(){ _clickGI('kb-rename-trigger'); }, 80);
+}
+function _setGI(id, val) {
+  var el = document.querySelector('#' + id + ' input, #' + id + ' textarea');
   if (!el) return;
-  el.value = value;
-  el.dispatchEvent(new Event('input',  { bubbles: true }));
-  el.dispatchEvent(new Event('change', { bubbles: true }));
+  el.value = val;
+  ['input','change'].forEach(function(e){ el.dispatchEvent(new Event(e,{bubbles:true})); });
 }
-function clickGradioBtn(elemId) {
-  var btn = document.querySelector('#' + elemId + ' button, #' + elemId);
-  if (btn) btn.click();
+function _clickGI(id) {
+  var b = document.querySelector('#' + id + ' button, #' + id);
+  if (b) b.click();
 }
 function showToast(msg) {
-  var t = document.getElementById('kb-toast');
+  var t = document.getElementById('app-toast');
   if (!t) return;
   t.textContent = msg; t.classList.add('show');
-  setTimeout(function(){ t.classList.remove('show'); }, 2800);
+  setTimeout(function(){ t.classList.remove('show'); }, 2600);
 }
-/* ── Inject left & right columns into Gradio layout ── */
-(function injectColumns() {
-  function tryInject() {
-    var chatCol = document.querySelector('.centre-col-inner');
-    if (!chatCol) { setTimeout(tryInject, 400); return; }
-    var body = document.querySelector('.app-body');
-    if (body) return; // already done
-
-    /* Wrap everything in a 3-col grid */
-    var wrapper = document.createElement('div');
-    wrapper.className = 'app-body';
-
-    var left  = document.getElementById('left-col-mount');
-    var right = document.getElementById('right-col-mount');
-    var chat  = chatCol.parentElement;
-
-    if (left && right && chat) {
-      chat.parentElement.insertBefore(wrapper, chat);
-      wrapper.appendChild(left);
-      wrapper.appendChild(chat);
-      wrapper.appendChild(right);
-    }
-  }
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function(){ setTimeout(tryInject, 600); });
-  } else {
-    setTimeout(tryInject, 600);
-  }
-})();
-/* Kill "Chatbot" label — JS fallback for Svelte-hashed classnames */
-function killChatbotLabel() {
-  /* Find all elements whose visible text is exactly "Chatbot" and hide them */
+/* ── Kill "Chatbot" label via DOM walk ──────────────── */
+function killLabel() {
   document.querySelectorAll('label, span, div').forEach(function(el) {
-    if (el.children.length === 0 && el.textContent.trim() === 'Chatbot') {
+    if (!el.children.length && el.textContent.trim() === 'Chatbot') {
       el.style.display = 'none';
-      var wrap = el.closest('[class*="label"]');
-      if (wrap) wrap.style.display = 'none';
+      var w = el.closest('[class*="label"]');
+      if (w) w.style.display = 'none';
     }
   });
 }
-/* Run on load + after any Gradio re-render */
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', function(){ setTimeout(killChatbotLabel, 600); });
-} else {
-  setTimeout(killChatbotLabel, 600);
-}
-var _kbLabelObserver = new MutationObserver(function(){ killChatbotLabel(); });
-_kbLabelObserver.observe(document.body, { childList: true, subtree: true });
+new MutationObserver(killLabel).observe(document.documentElement, { childList:true, subtree:true });
+setTimeout(killLabel, 400);
+setTimeout(killLabel, 1200);
 
-/* toolbar helpers */
-function tbWrap(tag1, tag2) {
+/* ── Pill click → fill textarea ─────────────────────── */
+function fillChat(text) {
+  var t = document.querySelector('.chat-input-container textarea');
+  if (!t) return;
+  t.value = text;
+  t.dispatchEvent(new Event('input', { bubbles: true }));
+  t.focus();
+}
+/* ── Toolbar helpers ────────────────────────────────── */
+function tbWrap(a, b) {
   var t = document.querySelector('.chat-input-container textarea');
   if (!t) return;
   var s = t.selectionStart, e = t.selectionEnd, v = t.value;
   if (s === e) return;
-  t.value = v.slice(0,s) + tag1 + v.slice(s,e) + tag2 + v.slice(e);
-  t.selectionStart = s; t.selectionEnd = e + tag1.length + tag2.length;
+  t.value = v.slice(0,s)+a+v.slice(s,e)+b+v.slice(e);
+  t.selectionStart = s; t.selectionEnd = e+a.length+b.length;
   t.dispatchEvent(new Event('input',{bubbles:true}));
 }
 function tbBullet() {
   var t = document.querySelector('.chat-input-container textarea');
   if (!t) return;
-  var lines = t.value.split('\n'), idx = t.value.slice(0,t.selectionStart).split('\n').length-1;
-  lines[idx] = '- ' + lines[idx]; t.value = lines.join('\n');
+  var ls = t.value.split('\n'), idx = t.value.slice(0,t.selectionStart).split('\n').length-1;
+  ls[idx] = '- '+ls[idx]; t.value = ls.join('\n');
   t.dispatchEvent(new Event('input',{bubbles:true}));
 }
 function tbPaste() {
@@ -1276,35 +1252,55 @@ function tbPaste() {
   if (!t) return;
   navigator.clipboard.readText().then(function(s){
     var i = t.selectionStart;
-    t.value = t.value.slice(0,i) + s + t.value.slice(t.selectionEnd);
-    t.selectionStart = t.selectionEnd = i + s.length;
+    t.value = t.value.slice(0,i)+s+t.value.slice(t.selectionEnd);
+    t.selectionStart = t.selectionEnd = i+s.length;
     t.dispatchEvent(new Event('input',{bubbles:true}));
   }).catch(function(){ t.focus(); });
 }
-</script>"""
+</script>
+"""
 
 TOOLBAR_HTML = """
-<div class="tb-bar">
-  <button class="tb-btn" data-tip="Attach file" onclick="document.getElementById('kb-file-attach').click()">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
+<div class="tb">
+  <button class="tb-b" data-tip="Attach file" onclick="document.getElementById('kb-file-attach').click()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
+    </svg>
   </button>
-  <button class="tb-btn" data-tip="Paste" onclick="tbPaste()">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/></svg>
+  <button class="tb-b" data-tip="Paste" onclick="tbPaste()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <rect x="8" y="2" width="8" height="4" rx="1"/>
+      <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/>
+    </svg>
   </button>
-  <div class="tb-sep"></div>
-  <button class="tb-btn" data-tip="Bold" onclick="tbWrap('**','**')">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 4h8a4 4 0 010 8H6zM6 12h9a4 4 0 010 8H6z"/></svg>
+  <div class="tb-div"></div>
+  <button class="tb-b" data-tip="Bold" onclick="tbWrap('**','**')">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+      <path d="M6 4h8a4 4 0 010 8H6zM6 12h9a4 4 0 010 8H6z"/>
+    </svg>
   </button>
-  <button class="tb-btn" data-tip="Italic" onclick="tbWrap('*','*')">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
+  <button class="tb-b" data-tip="Italic" onclick="tbWrap('*','*')">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/>
+    </svg>
   </button>
-  <button class="tb-btn" data-tip="Bullet list" onclick="tbBullet()">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none"/></svg>
+  <button class="tb-b" data-tip="Bullet" onclick="tbBullet()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/>
+      <circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none"/>
+      <circle cx="4" cy="12" r="1.5" fill="currentColor" stroke="none"/>
+      <circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none"/>
+    </svg>
   </button>
-  <button class="tb-btn" data-tip="Code" onclick="tbWrap('`','`')">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+  <button class="tb-b" data-tip="Code" onclick="tbWrap('`','`')">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+      <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
+    </svg>
   </button>
-</div>"""
+</div>
+"""
+
+# ── Examples ──────────────────────────────────────────────────────────────────
 
 examples = [
     q["query"] for q in CONFIG.get("quick_actions", []) if "query" in q
@@ -1314,72 +1310,67 @@ examples = [
     "Why is self-service important for customer support?",
 ]
 
+# ── Gradio layout ─────────────────────────────────────────────────────────────
+
 with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
 
     gr.HTML(STYLE_HTML)
-    gr.HTML('<div id="kb-toast" class="kb-toast"></div>')
+    gr.HTML('<div id="app-toast" class="toast"></div>')
 
-    # ── Sticky header ─────────────────────────────────────────────────
+    # Header
     gr.HTML(f"""
-    <div class="app-hdr">
-      <div class="app-hdr-icon">🤖</div>
+    <div class="h-bar">
+      <div class="h-logo">🤖</div>
       <div>
-        <h1>{CONFIG["client"]["name"]}</h1>
-        <p>Search the knowledge base and get answers in plain language</p>
+        <div class="h-name">{CONFIG["client"]["name"]}</div>
+        <div class="h-sub">Search the knowledge base and get answers in plain language</div>
       </div>
-      <span class="app-hdr-badge">MVP · AI-powered</span>
+      <span class="h-badge">MVP · AI-powered</span>
     </div>""")
 
-    # ── 3-column body ──────────────���──────────────────────────────────
-    with gr.Row(elem_classes="app-body"):
-
-        # ── LEFT: suggested questions ──────────────────────────────────
-        with gr.Column(scale=1, elem_classes="left-col"):
-            gr.HTML("""<div class="left-col-hdr">✦ Try asking</div>
-            <div class="left-col-body">""" +
-            "".join(
-                f'<button class="suggestion-pill" '
-                f'onclick="(function(){{var t=document.querySelector(\'.chat-input-container textarea\');'
-                f'if(t){{t.value={repr(q)};t.dispatchEvent(new Event(\'input\',{{bubbles:true}}));}}}})()">'
-                f'{q}</button>'
-                for q in examples
-            ) + "</div>")
-
-        # ── CENTRE: chat ───────────────────────────────────────────────
-        with gr.Column(scale=3, elem_classes="centre-col"):
-            gr.ChatInterface(
-                fn=chat_respond,
-                cache_examples=False,
+    with gr.Row(elem_classes="body-grid"):
+
+        # ── Left: suggestions ──────────────────────────────────────────
+        with gr.Column(scale=1, elem_classes="left-panel"):
+            pills_html = (
+                '<div class="lp-head">Try asking</div>'
+                '<div class="lp-body">'
+                + "".join(
+                    f'<button class="s-pill" onclick="fillChat({repr(q)})">{q}</button>'
+                    for q in examples
+                )
+                + "</div>"
             )
+            gr.HTML(pills_html)
+
+        # ── Centre: chat ───────────────────────────────────────────────
+        with gr.Column(scale=3, elem_classes="chat-col"):
+            gr.ChatInterface(fn=chat_respond, cache_examples=False)
             gr.HTML(TOOLBAR_HTML)
 
-        # ── RIGHT: file list ───────────────────────────────────────────
-        with gr.Column(scale=1, elem_classes="right-col"):
+        # ── Right: file list ───────────────────────────────────────────
+        with gr.Column(scale=1, elem_classes="right-panel"):
             gr.HTML("""
-            <div class="right-col-hdr">
-              <span class="right-col-title">Knowledge Base</span>
-              <div class="add-file-btn-wrap">
-                <button class="add-file-btn"
-                  onclick="document.getElementById('kb-file-attach').click()">
+            <div class="rp-head">
+              <span class="rp-title">Knowledge Base</span>
+              <div class="add-wrap">
+                <button class="add-btn" onclick="document.getElementById('kb-file-attach').click()">
                   + Add file
                 </button>
-                <div class="add-file-tooltip">
+                <div class="add-tip">
                   <strong>Add to knowledge base</strong>
-                  <div class="tt-row">Formats: .txt · .md · .pdf · .docx</div>
-                  <div class="tt-row">Max size: 10 MB per file</div>
-                  <div class="tt-row">Multiple files at once supported</div>
-                  <div class="tt-row">Index rebuilds automatically</div>
+                  <em>Formats: .txt &nbsp;.md &nbsp;.pdf &nbsp;.docx</em>
+                  <em>Max 10 MB per file</em>
+                  <em>Multiple files at once</em>
+                  <em>Index rebuilds automatically</em>
                 </div>
               </div>
             </div>""")
 
-            kb_file_list = gr.HTML(value=list_kb_files_html)
-
-            # Hidden upload status
+            kb_file_list  = gr.HTML(value=list_kb_files_html)
             upload_status = gr.Markdown(visible=False)
 
-    # ── Hidden Gradio widgets for backend actions ──────────────────────
-    # These are invisible — actions are triggered by JS above
+    # Hidden Gradio widgets ────────────────────────────────────────────────────
     with gr.Row(visible=False):
         toolbar_upload = gr.File(
             label="", file_count="multiple",
@@ -1387,17 +1378,15 @@ with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
             elem_id="kb-file-attach",
         )
         toolbar_status = gr.Markdown()
-
-        delete_input = gr.Textbox(elem_id="kb-hidden-delete", show_label=False)
-        delete_btn   = gr.Button("del", elem_id="kb-delete-trigger")
-        delete_status= gr.Markdown()
-
+        delete_input   = gr.Textbox(elem_id="kb-hidden-delete",   show_label=False)
+        delete_btn     = gr.Button("del", elem_id="kb-delete-trigger")
+        delete_status  = gr.Markdown()
         old_name_input = gr.Textbox(elem_id="kb-hidden-old-name", show_label=False)
         new_name_input = gr.Textbox(elem_id="kb-hidden-new-name", show_label=False)
         rename_btn     = gr.Button("ren", elem_id="kb-rename-trigger")
         rename_status  = gr.Markdown()
 
-    # ── Event wiring ──────────────────────────────────────────────────
+    # Event wiring ─────────────────────────────────────────────────────────────
     def handle_upload(files):
         status, _ = upload_kb_files(files)
         return status, list_kb_files_html()
@@ -1410,9 +1399,9 @@ with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
         status, _ = rename_kb_file(old, new)
         return status, list_kb_files_html()
 
-    toolbar_upload.change(handle_upload,  inputs=[toolbar_upload],                       outputs=[toolbar_status, kb_file_list])
-    delete_btn.click(     handle_delete,  inputs=[delete_input],                          outputs=[delete_status,  kb_file_list])
-    rename_btn.click(     handle_rename,  inputs=[old_name_input, new_name_input],        outputs=[rename_status,  kb_file_list])
+    toolbar_upload.change(handle_upload,  inputs=[toolbar_upload],                    outputs=[toolbar_status, kb_file_list])
+    delete_btn.click(     handle_delete,  inputs=[delete_input],                  outputs=[delete_status,  kb_file_list])
+    rename_btn.click(     handle_rename,  inputs=[old_name_input, new_name_input], outputs=[rename_status,  kb_file_list])
 
 
 # -----------------------------