Update app.py

app.py

@@ -777,9 +777,20 @@ body, .gradio-container {
   background: var(--sand);
 }
 
-/* Kill Gradio chrome */
-.label-wrap, .chatbot-label, label.svelte-1b6s6vi,
-.gr-prose .label-wrap, [data-testid="chatbot"] > .label-wrap { display: none !important; }
+/* Kill ALL Gradio chrome — chatbot label, panel borders, etc. */
+/* Svelte hashes change between Gradio versions; target structurally instead */
+[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,           /* hide text but let icon survive if any */
+.gr-chatbot-container .label-wrap,
+/* catch the actual rendered element seen in screenshot (☰ Chatbot) */
+.chatbot > .panel > .label,
+div[class*="label"] > span:only-child,
+.block > .label-wrap { display: none !important; }
+/* Belt-and-braces: hide via JS after render too (see script below) */
 .gr-chatbot, [data-testid="chatbot"] {
   flex: 1 !important; height: 100% !important;
   border: none !important; border-radius: 0 !important; background: transparent !important;
@@ -801,34 +812,59 @@ footer { display: none !important; }
   box-shadow: var(--sh) !important; color: var(--ink) !important;
 }
 
-/* Input bar */
+/* ── Merged input + toolbar box ──────────────────────────────── */
+/* Wrap the Gradio input area + our toolbar inside one rounded border */
 .chat-input-container {
-  background: var(--cream) !important; border-top: 1px solid var(--stone) !important;
-  padding: 8px 12px !important; flex-shrink: 0;
+  background: var(--cream) !important;
+  border-top: 1px solid var(--stone) !important;
+  padding: 10px 12px 4px !important;
+  flex-shrink: 0;
+}
+/* The inner row Gradio renders: give it a rounded bordered card look */
+.chat-input-container > .wrap,
+.chat-input-container > div:first-child {
+  border: 1.5px solid var(--stone) !important;
+  border-radius: 12px 12px 0 0 !important;
+  overflow: hidden !important;
+  background: var(--sand) !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,.14) !important;
 }
 .chat-input-container textarea {
-  background: var(--sand) !important; border: 1.5px solid var(--stone) !important;
-  border-radius: 10px !important; padding: 9px 13px !important;
+  background: var(--sand) !important;
+  border: none !important;           /* border lives on parent now */
+  border-radius: 0 !important;
+  padding: 10px 13px !important;
   font-size: .88rem !important; color: var(--ink) !important;
-  resize: none !important; transition: border-color .18s, box-shadow .18s !important;
+  resize: none !important;
 }
 .chat-input-container textarea:focus {
-  border-color: var(--sage) !important; outline: none !important;
-  box-shadow: 0 0 0 3px rgba(107,143,113,.16) !important;
+  outline: none !important;
+  box-shadow: none !important;       /* parent handles focus ring */
 }
 .chat-input-container textarea::placeholder { color: var(--muted2) !important; }
 .chat-input-container button[aria-label="Send"] {
   background: var(--sage) !important; color: #fff !important; border: none !important;
   border-radius: 9px !important; padding: 0 13px !important; height: 36px !important;
-  font-weight: 600 !important; transition: background .15s !important;
+  font-weight: 600 !important; transition: background .15s !important; margin: 0 6px 0 0 !important;
+  align-self: flex-end !important; margin-bottom: 6px !important;
 }
 .chat-input-container button[aria-label="Send"]:hover { background: var(--sage-d) !important; }
 
-/* Compact toolbar */
+/* ── Toolbar — sits flush below textarea, inside same border ─── */
 .tb-bar {
   display: flex; align-items: center; gap: 2px;
-  padding: 4px 12px 5px; background: var(--cream); border-top: 1px solid var(--stone);
-  flex-shrink: 0;
+  padding: 4px 10px 6px;
+  /* no border-top — it's inside the same card */
+  background: var(--sand);
+  border-top: 1px solid var(--stone);
+  border-radius: 0 0 12px 12px;
+  /* merge with the parent card */
+  margin: 0 -1px -1px -1px;    /* bleed to parent border edges */
 }
 .tb-btn {
   width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
@@ -1016,6 +1052,26 @@ function showToast(msg) {
     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 */
+  document.querySelectorAll('label, span, div').forEach(function(el) {
+    if (el.children.length === 0 && el.textContent.trim() === 'Chatbot') {
+      el.style.display = 'none';
+      var wrap = el.closest('[class*="label"]');
+      if (wrap) wrap.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 });
+
 /* toolbar helpers */
 function tbWrap(tag1, tag2) {
   var t = document.querySelector('.chat-input-container textarea');