Modernize chat UI (Claude-style) and fix smushed logo

- Warm canvas + centered narrow conversation column; assistant turns
render as plain text (no bubble), user turns as soft pills.
- Floating centered composer pill with gradient fade so messages scroll
under it; up-arrow send icon.
- Fix the Tencent/Hy3 wordmark being squashed into a square: size the
logo by height with natural aspect ratio (object-fit: contain), in
both the header and the empty-state hero.
- Refined sidebar (lighter fields, hairline accordion), slim scrollbars,
softer shadows, larger rounded radii, warmer dark theme.
- Collapse the sidebar by default; the header toggle opens/closes it on
both desktop and mobile via a single sidebar-closed class.

Co-Authored-By: Claude <noreply@anthropic.com>

static/index.html

@@ -36,45 +36,56 @@
   --tc-red:         #E53935;
   --tc-teal:        #00A98F;
 
-  --bg:             #ffffff;
-  --bg-soft:        #f7f9fc;
-  --bg-muted:       #f0f3f9;
+  --bg:             #f7f6f3;          /* warm canvas, Claude-like */
+  --bg-soft:        #ffffff;          /* surfaces / bubbles / sidebar */
+  --bg-muted:       #efece6;
+  --bg-elev:        #ffffff;
   --sidebar-bg:     #ffffff;
-  --text:           #1d2129;
-  --text-strong:    #0f1115;
-  --text-muted:     #6b7785;
-  --border:         #e5e8ee;
-  --border-strong:  #d3d8e0;
-  --shadow-sm:      0 1px 3px rgba(15, 17, 21, 0.06);
-  --shadow-md:      0 4px 16px rgba(15, 17, 21, 0.08);
-  --shadow-lg:      0 12px 40px rgba(15, 17, 21, 0.16);
+  --text:           #2b2b2b;
+  --text-strong:    #1a1a1a;
+  --text-muted:     #8a8580;
+  --border:         #e7e3dc;
+  --border-strong:  #d8d3cb;
+  --accent:         #c96442;          /* warm terracotta accent (Claude) */
+  --accent-soft:    #f4ece7;
+  --shadow-sm:      0 1px 2px rgba(20, 18, 14, 0.04);
+  --shadow-md:      0 4px 14px rgba(20, 18, 14, 0.06);
+  --shadow-lg:      0 16px 48px rgba(20, 18, 14, 0.14);
+  --ring:           0 0 0 3px rgba(0, 82, 217, 0.16);
 
   --radius-sm:      8px;
-  --radius:         12px;
-  --radius-lg:      18px;
+  --radius:         14px;
+  --radius-lg:      20px;
+  --radius-xl:      26px;
 
-  --font-sans:      -apple-system, BlinkMacSystemFont, "SF Pro Text",
-                    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
-                    "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --col-max:        768px;            /* centered conversation width */
+
+  --font-sans:      "Söhne", "Inter", -apple-system, BlinkMacSystemFont,
+                    "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
+                    "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-mono:      "SF Mono", "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
 }
 
 html.dark {
-  --bg:             #0f1115;
-  --bg-soft:        #161a21;
-  --bg-muted:       #1c2129;
-  --sidebar-bg:     #131820;
-  --text:           #dfe3ea;
+  --bg:             #1a1a1a;          /* warm-tinted dark canvas */
+  --bg-soft:        #232323;
+  --bg-muted:       #2c2c2c;
+  --bg-elev:        #232323;
+  --sidebar-bg:     #202020;
+  --text:           #ece9e4;
   --text-strong:    #ffffff;
-  --text-muted:     #8b95a3;
-  --border:         #2a313b;
-  --border-strong:  #3a434f;
+  --text-muted:     #9a948d;
+  --border:         #34312d;
+  --border-strong:  #423e39;
+  --accent:         #d97757;
+  --accent-soft:    rgba(217, 119, 87, 0.16);
   --tc-blue-soft:   rgba(0, 82, 217, 0.16);
   --tc-blue-060:    rgba(0, 82, 217, 0.12);
-  --tc-blue-120:    rgba(0, 82, 217, 0.22);
-  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.4);
-  --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.5);
-  --shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.6);
+  --tc-blue-120:    rgba(0, 82, 217, 0.24);
+  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md:      0 4px 14px rgba(0, 0, 0, 0.4);
+  --shadow-lg:      0 16px 48px rgba(0, 0, 0, 0.6);
+  --ring:           0 0 0 3px rgba(0, 82, 217, 0.3);
 }
 
 * { box-sizing: border-box; }
@@ -86,51 +97,60 @@ html, body {
 }
 button, input, textarea, select { font-family: inherit; }
 
-/* ── Layout shell ─────────────────────────────────────────────────────── */
+/* ── Layout shell ───────────────────────────────────────────────────────
+   The chat surface (#main) IS the warm canvas and fills everything below
+   the header; the composer floats at the bottom of it, centered, so the
+   conversation scrolls underneath it (Claude-style) rather than living
+   in a separate hard-bordered bar. */
 #app {
   display: grid;
-  grid-template-columns: 320px 1fr;
-  grid-template-rows: 56px 1fr 84px;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: 60px 1fr;
   grid-template-areas:
     "header header"
-    "sidebar main"
-    "sidebar composer";
+    "sidebar main";
   height: 100vh; width: 100vw;
 }
 #app.sidebar-closed { grid-template-columns: 0 1fr; }
 #app.sidebar-closed #sidebar { transform: translateX(-100%); }
 
-/* ── Header / brand bar ──────────────────────────────────────────────── */
+/* ── Header / brand bar ────────────────────────────────────────────────
+   Transparent over the canvas with only a hairline divider — feels like
+   part of the page, not a chrome bar. */
 #header {
   grid-area: header;
   display: flex; align-items: center; gap: 12px;
-  padding: 0 18px;
-  background: var(--bg);
+  padding: 0 20px;
+  background: var(--bg-soft);
   border-bottom: 1px solid var(--border);
   position: relative; z-index: 20;
 }
-.brand { display: flex; align-items: center; gap: 10px; cursor: default; }
+.brand { display: flex; align-items: center; gap: 12px; cursor: default; }
+/* The logo is a wide horizontal wordmark (Tencent + Hy3). Size it by
+   height and let width follow the natural aspect ratio so it never
+   gets smushed into a square. */
 .brand-logo {
-  width: 30px; height: 30px; border-radius: 7px;
+  height: 26px; width: auto;
   object-fit: contain;
-  background: var(--bg-muted);
+  display: block;
+  border-radius: 4px;
 }
-.brand-name { font-size: 17px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; }
+.brand-name { font-size: 16px; font-weight: 650; color: var(--text-strong); letter-spacing: -0.01em; }
 .brand-sep { color: var(--border-strong); font-weight: 300; }
 .brand-tag { font-size: 13px; color: var(--text-muted); font-weight: 500; }
 .brand-badge {
-  margin-left: 6px; font-size: 11px; font-weight: 600;
+  margin-left: 4px; font-size: 11px; font-weight: 600;
   color: var(--tc-blue); background: var(--tc-blue-soft);
-  padding: 2px 8px; border-radius: 999px; letter-spacing: 0.02em;
+  padding: 2px 9px; border-radius: 999px; letter-spacing: 0.02em;
 }
 .header-spacer { flex: 1; }
 .icon-btn {
-  width: 36px; height: 36px; border-radius: 8px;
-  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
+  width: 36px; height: 36px; border-radius: 9px;
+  border: 1px solid transparent; background: transparent; color: var(--text-muted);
   display: inline-flex; align-items: center; justify-content: center;
-  cursor: pointer; transition: all 0.15s ease; padding: 0;
+  cursor: pointer; transition: background 0.15s ease, color 0.15s ease; padding: 0;
 }
-.icon-btn:hover { background: var(--bg-muted); color: var(--text); border-color: var(--border-strong); }
+.icon-btn:hover { background: var(--bg-muted); color: var(--text); }
 .icon-btn svg { width: 18px; height: 18px; }
 
 /* ── Sidebar ──────────────────────────────────────────────────────────── */
@@ -140,47 +160,47 @@ button, input, textarea, select { font-family: inherit; }
   border-right: 1px solid var(--border);
   overflow-y: auto; overflow-x: hidden;
   transition: transform 0.22s ease;
-  padding: 14px 16px 24px;
-  display: flex; flex-direction: column; gap: 14px;
+  padding: 18px 18px 28px;
+  display: flex; flex-direction: column; gap: 16px;
 }
 .sidebar-notice {
-  font-size: 12px; line-height: 1.5; color: var(--text-muted);
-  background: var(--tc-blue-060); border: 1px solid var(--tc-blue-120);
-  border-radius: var(--radius-sm); padding: 10px 12px;
+  font-size: 12px; line-height: 1.55; color: var(--text-muted);
+  background: var(--accent-soft); border: 1px solid transparent;
+  border-radius: var(--radius-sm); padding: 11px 13px;
 }
-.field { display: flex; flex-direction: column; gap: 6px; }
+.field { display: flex; flex-direction: column; gap: 7px; }
 .field > label {
-  font-size: 12px; font-weight: 600; color: var(--text);
+  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
+  text-transform: none; letter-spacing: 0.01em;
   display: flex; align-items: center; justify-content: space-between; gap: 8px;
 }
 .field .info {
   font-size: 11px; font-weight: 400; color: var(--text-muted);
-  margin-top: -2px; line-height: 1.4;
+  margin-top: -3px; line-height: 1.45; opacity: 0.85;
 }
 .field input[type="text"], .field textarea, .field select {
   width: 100%; padding: 9px 12px;
   border: 1px solid var(--border); border-radius: var(--radius-sm);
-  background: var(--bg); color: var(--text); font-size: 14px;
+  background: var(--bg-soft); color: var(--text); font-size: 14px;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .field textarea { resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.5; }
 .field input:focus, .field textarea:focus, .field select:focus {
-  outline: none; border-color: var(--tc-blue);
-  box-shadow: 0 0 0 3px var(--tc-blue-120);
+  outline: none; border-color: var(--tc-blue); box-shadow: var(--ring);
 }
 .field select { appearance: none; cursor: pointer;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
 }
 .range-row { display: flex; align-items: center; gap: 10px; }
 .range-row input[type="range"] { flex: 1; accent-color: var(--tc-blue); }
 .range-num {
   width: 58px; padding: 5px 8px; text-align: center;
-  border: 1px solid var(--border); border-radius: 6px;
-  background: var(--bg); color: var(--text); font-size: 12px;
+  border: 1px solid var(--border); border-radius: 7px;
+  background: var(--bg-soft); color: var(--text); font-size: 12px;
   font-variant-numeric: tabular-nums;
 }
-.range-num:focus { outline: none; border-color: var(--tc-blue); box-shadow: 0 0 0 3px var(--tc-blue-120); }
+.range-num:focus { outline: none; border-color: var(--tc-blue); box-shadow: var(--ring); }
 .range-row input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: var(--border); border-radius: 2px; }
 .range-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--tc-blue); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
 .range-row input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--tc-blue); cursor: pointer; }
@@ -190,21 +210,20 @@ button, input, textarea, select { font-family: inherit; }
 }
 .check-row input { accent-color: var(--tc-blue); width: 14px; height: 14px; }
 
-.accordion { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
+.accordion { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
 .accordion > summary {
-  list-style: none; cursor: pointer; padding: 10px 12px;
+  list-style: none; cursor: pointer; padding: 11px 13px;
   font-size: 13px; font-weight: 600; color: var(--text);
   display: flex; align-items: center; justify-content: space-between;
-  background: var(--bg-soft);
 }
 .accordion > summary::-webkit-details-marker { display: none; }
 .accordion > summary::after { content: "⌄"; color: var(--text-muted); transition: transform 0.15s ease; }
 .accordion[open] > summary::after { transform: rotate(180deg); }
-.accordion > .accordion-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
+.accordion > .accordion-body { padding: 13px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); }
 .accordion textarea { width: 100%; min-height: 180px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; resize: vertical; }
 .tiny-btn {
-  align-self: flex-start; padding: 6px 14px; font-size: 12px; font-weight: 500;
-  border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
+  align-self: flex-start; padding: 7px 15px; font-size: 12px; font-weight: 500;
+  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-soft);
   color: var(--text); cursor: pointer; transition: all 0.15s ease;
 }
 .tiny-btn:hover { border-color: var(--tc-blue); color: var(--tc-blue); background: var(--tc-blue-060); }
@@ -212,52 +231,61 @@ button, input, textarea, select { font-family: inherit; }
 .fn-msg.ok { color: var(--tc-teal); }
 .fn-msg.err { color: var(--tc-red); }
 
-/* ── Main chat surface ────────────────────────────────────────────────── */
+/* ── Main chat surface ──────────────────────────────────────────────────
+   The warm canvas. Conversation is centered in a narrow column with
+   generous vertical rhythm; assistant turns are plain text (no bubble),
+   user turns are soft pills. The composer floats at the bottom on a
+   gradient fade so messages scroll under it gracefully. */
 #main {
   grid-area: main; position: relative; background: var(--bg);
   overflow: hidden; display: flex; flex-direction: column;
 }
 #chat {
   flex: 1; overflow-y: auto; overflow-x: hidden;
-  padding: 24px clamp(16px, 5vw, 64px) 32px;
+  padding: 28px clamp(16px, 5vw, 48px) 220px;   /* bottom room for floating composer */
   scroll-behavior: auto;
 }
-.message-row { display: block; width: 100%; margin: 0 0 4px; }
-.message-row.user-row { display: flex; justify-content: flex-end; margin: 14px 0 8px; }
-.message-row.bot-row { margin: 0 0 22px; }
-.message { max-width: 95%; }
+/* Center the conversation in a narrow column. */
+#chat > .col,
+#chat > .message-row { max-width: var(--col-max); margin-left: auto; margin-right: auto; width: 100%; }
+.message-row { display: block; width: 100%; margin: 0; }
+.message-row.user-row { display: flex; justify-content: flex-end; margin: 22px 0 4px; }
+.message-row.bot-row { margin: 0 0 30px; }
+.message { max-width: 100%; }
 .message.user {
-  background: var(--tc-blue); color: #fff;
-  border-radius: var(--radius-lg); padding: 10px 18px;
-  max-width: min(720px, 78%); box-shadow: var(--shadow-sm);
+  background: var(--bg-elev); color: var(--text-strong);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg); padding: 11px 18px;
+  max-width: min(560px, 82%); box-shadow: var(--shadow-sm);
+  font-weight: 450;
 }
-.message.user .hy-user-text { font-size: 15px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
-.message.bot { background: transparent; padding: 2px 0; max-width: 100%; }
-.message.bot .markdown { font-size: 15px; line-height: 1.8; color: var(--text); letter-spacing: 0.01em; }
-.message.bot p { margin: 0.6em 0; }
+.message.user .hy-user-text { font-size: 15px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
+.message.bot { background: transparent; padding: 0; max-width: 100%; }
+.message.bot .markdown { font-size: 16px; line-height: 1.7; color: var(--text); letter-spacing: 0.005em; }
+.message.bot p { margin: 0.85em 0; }
 .message.bot p:first-child { margin-top: 0; }
 .message.bot p:last-child { margin-bottom: 0; }
-.message.bot strong, .message.bot b { font-weight: 600; color: var(--text-strong); }
-.message.bot ul, .message.bot ol { padding-left: 1.5em; margin: 0.5em 0; }
-.message.bot li { margin: 0.3em 0; line-height: 1.8; }
-.message.bot h1 { font-size: 22px; font-weight: 700; color: var(--text-strong); margin: 1em 0 0.5em; }
-.message.bot h2 { font-size: 19px; font-weight: 700; color: var(--text-strong); margin: 0.9em 0 0.4em; }
-.message.bot h3 { font-size: 17px; font-weight: 600; color: var(--text-strong); margin: 0.8em 0 0.35em; }
-.message.bot h4 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0.7em 0 0.3em; }
-.message.bot a { color: var(--tc-blue); }
-.message.bot blockquote { border-left: 3px solid var(--border-strong); margin: 0.8em 0; padding: 4px 16px; color: var(--text-muted); }
-.message.bot hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
-.message.bot table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0.8em 0; font-size: 14px; }
+.message.bot strong, .message.bot b { font-weight: 650; color: var(--text-strong); }
+.message.bot ul, .message.bot ol { padding-left: 1.5em; margin: 0.6em 0; }
+.message.bot li { margin: 0.35em 0; line-height: 1.7; }
+.message.bot h1 { font-size: 23px; font-weight: 700; color: var(--text-strong); margin: 1.1em 0 0.5em; letter-spacing: -0.01em; }
+.message.bot h2 { font-size: 20px; font-weight: 700; color: var(--text-strong); margin: 1em 0 0.45em; letter-spacing: -0.01em; }
+.message.bot h3 { font-size: 17px; font-weight: 650; color: var(--text-strong); margin: 0.9em 0 0.4em; }
+.message.bot h4 { font-size: 15px; font-weight: 650; color: var(--text); margin: 0.8em 0 0.35em; }
+.message.bot a { color: var(--tc-blue); text-underline-offset: 2px; }
+.message.bot blockquote { border-left: 3px solid var(--border-strong); margin: 0.9em 0; padding: 2px 16px; color: var(--text-muted); }
+.message.bot hr { border: none; border-top: 1px solid var(--border); margin: 1.4em 0; }
+.message.bot table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0.9em 0; font-size: 14px; }
 .message.bot th, .message.bot td { border: 1px solid var(--border); padding: 8px 14px; text-align: left; vertical-align: top; }
 .message.bot th { background: var(--bg-muted); font-weight: 600; }
-.message.bot code { font-family: var(--font-mono); font-size: 0.9em; }
-.message.bot :not(pre) > code { background: var(--bg-muted); padding: 2px 6px; border-radius: 4px; color: var(--text); }
-.hy-codeblock { margin: 0.9em 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-soft); }
-.hy-codeblock-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 14px; background: var(--bg-muted); border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1; color: var(--text-muted); user-select: none; }
+.message.bot code { font-family: var(--font-mono); font-size: 0.88em; }
+.message.bot :not(pre) > code { background: var(--bg-muted); padding: 2px 6px; border-radius: 5px; color: var(--text); }
+.hy-codeblock { margin: 1em 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
+.hy-codeblock-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 9px 7px 15px; background: var(--bg-muted); border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1; color: var(--text-muted); user-select: none; }
 .hy-codeblock-lang { text-transform: lowercase; letter-spacing: 0.02em; font-weight: 500; }
 .hy-codeblock-lang:empty::before { content: "text"; opacity: 0.7; }
-.hy-codeblock pre { margin: 0; border: none; border-radius: 0; background: transparent; padding: 12px 16px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
-.code-copy-btn { flex-shrink: 0; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit; background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
+.hy-codeblock pre { margin: 0; border: none; border-radius: 0; background: transparent; padding: 13px 16px; overflow-x: auto; font-size: 13px; line-height: 1.65; }
+.code-copy-btn { flex-shrink: 0; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit; background: transparent; border: none; border-radius: 7px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
 .code-copy-btn svg { display: block; width: 14px; height: 14px; }
 .code-copy-btn:hover { background: var(--tc-blue-060); color: var(--tc-blue); }
 .code-copy-btn.copied, .code-copy-btn.copied:hover { color: var(--tc-teal); background: transparent; }
@@ -291,14 +319,14 @@ button, input, textarea, select { font-family: inherit; }
 #examples-overlay {
   position: absolute; inset: 0; z-index: 5;
   display: flex; align-items: center; justify-content: center;
-  background: var(--bg); overflow-y: auto; padding: 40px 20px;
+  background: var(--bg); overflow-y: auto; padding: 40px 20px 160px;
   transition: opacity 0.25s ease;
 }
 #examples-overlay.hidden { opacity: 0; pointer-events: none; }
 .examples-wrapper { display: flex; flex-direction: column; align-items: center; max-width: 1020px; }
-.examples-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
-.examples-hero img { width: 52px; height: 52px; border-radius: 12px; }
-.examples-heading { font-size: 24px; font-weight: 700; color: var(--text-strong); margin: 0 0 26px; letter-spacing: -0.01em; text-align: center; }
+.examples-hero { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
+.examples-hero img { width: auto; height: 56px; border-radius: 8px; object-fit: contain; }
+.examples-heading { font-size: 28px; font-weight: 650; color: var(--text-strong); margin: 0 0 30px; letter-spacing: -0.02em; text-align: center; }
 .examples-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 460px); column-gap: 20px; row-gap: 14px; justify-content: center; width: min(1020px, 100%); }
 .example-btn:nth-child(1), .example-btn:nth-child(4) { grid-column: 1 / span 2; justify-self: center; }
 .example-btn:nth-child(2) { grid-column: 1; justify-self: end; }
@@ -306,12 +334,12 @@ button, input, textarea, select { font-family: inherit; }
 .example-btn {
   display: flex; align-items: center; justify-content: center;
   width: 460px; height: 72px; overflow: hidden;
-  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
   padding: 14px 20px; font-size: 14px; line-height: 1.5; color: var(--text);
   cursor: pointer; user-select: none; text-align: center;
-  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
+  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
 }
-.example-btn:hover { border-color: var(--tc-blue); color: var(--text-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
+.example-btn:hover { border-color: var(--border-strong); color: var(--text-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); background: var(--bg-elev); }
 .example-btn-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; width: 100%; }
 @media (max-width: 1020px) {
   .examples-grid { grid-template-columns: minmax(0, 1fr); }
@@ -319,38 +347,59 @@ button, input, textarea, select { font-family: inherit; }
   .example-btn { width: 100%; max-width: 520px; }
 }
 
-/* ── Composer (input row) ─────────────────────────────────────────────── */
+/* ── Composer (floating, centered pill) ────────────────────────────────
+   Sits at the bottom of the chat canvas, centered to the conversation
+   column, with a gradient fade above it so content scrolls under it
+   gracefully — the Claude.ai feel. */
 #composer {
-  grid-area: composer; display: flex; align-items: center; gap: 10px;
-  padding: 12px clamp(16px, 5vw, 64px); background: var(--bg);
-  border-top: 1px solid var(--border); z-index: 10;
+  position: absolute; left: 0; right: 0; bottom: 0;
+  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
+  padding: 0 clamp(16px, 5vw, 48px) 20px;
+  z-index: 10;
+  background: linear-gradient(to top, var(--bg) 52%, rgba(247,246,243,0));
+  pointer-events: none;       /* let the fade be click-through … */
 }
+#composer > * { pointer-events: auto; }  /* … but not the controls */
+html.dark #composer { background: linear-gradient(to top, var(--bg) 52%, rgba(26,26,26,0)); }
+.composer-inner {
+  display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: var(--col-max);
+  background: var(--bg-elev); border: 1px solid var(--border);
+  border-radius: var(--radius-xl); padding: 8px 8px 8px 18px;
+  box-shadow: var(--shadow-md); transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.composer-inner:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--ring); }
 #composer textarea {
-  flex: 1; height: 56px; min-height: 56px; max-height: 56px;
+  flex: 1; min-height: 44px; max-height: 200px;
   resize: none; overflow-y: auto;
-  border: 1px solid var(--border); border-radius: 999px;
-  padding: 16px 22px; font-size: 15px; line-height: 1.5; background: var(--bg);
-  color: var(--text); box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  border: none; border-radius: 0;
+  padding: 12px 0; font-size: 15.5px; line-height: 1.55; background: transparent;
+  color: var(--text); box-shadow: none; transition: none;
 }
-#composer textarea:focus { outline: none; border-color: var(--tc-blue); box-shadow: 0 0 0 3px var(--tc-blue-120); }
-.round-btn {
-  width: 46px; height: 46px; border-radius: 50%; padding: 0;
-  display: flex; align-items: center; justify-content: center;
-  flex-shrink: 0; cursor: pointer; border: none; transition: all 0.15s ease;
+#composer textarea:focus { outline: none; box-shadow: none; }
+#new-chat-btn {
+  width: 40px; height: 40px; border-radius: 50%; padding: 0;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text-muted);
+  transition: background 0.15s ease, color 0.15s ease;
+}
+#new-chat-btn:hover { background: var(--bg-muted); color: var(--text); }
+#new-chat-btn svg { width: 19px; height: 19px; }
+#send-btn {
+  width: 40px; height: 40px; border-radius: 50%; padding: 0;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  cursor: pointer; border: none; background: var(--tc-blue); color: #fff;
+  transition: background 0.15s ease, transform 0.1s ease;
 }
-.round-btn svg { width: 20px; height: 20px; }
-#send-btn { background: var(--tc-blue); color: #fff; }
 #send-btn:hover { background: var(--tc-blue-hover); }
-#send-btn:disabled { background: var(--border-strong); color: #fff; cursor: not-allowed; opacity: 0.7; }
-#send-btn svg { width: 22px; height: 22px; }
-#new-chat-btn { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
-#new-chat-btn:hover { background: var(--bg-muted); color: var(--text); border-color: var(--border-strong); }
+#send-btn:active { transform: scale(0.95); }
+#send-btn:disabled { background: var(--border-strong); cursor: not-allowed; opacity: 0.6; }
+#send-btn svg { width: 18px; height: 18px; }
 
 /* ── Tool-call input panel ───────────────────────────────────────────── */
 #tool-area {
-  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%);
+  position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%);
   width: min(640px, 90%); z-index: 30;
-  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
   padding: 16px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 10px;
 }
 #tool-area.visible { display: flex; }
@@ -387,25 +436,29 @@ button, input, textarea, select { font-family: inherit; }
 .toast.show { opacity: 1; }
 .toast.error { background: var(--tc-red); }
 
-/* ── Sidebar toggle on small screens ──────────────────────────────────── */
-#sidebar-toggle { display: none; }
+/* ── Sidebar toggle ─────────────────────────────────────────────────────
+   One class (``#app.sidebar-closed``) drives collapse on every breakpoint:
+   desktop collapses the grid column to 0; mobile slides the fixed overlay
+   out. The header toggle is always visible so users can re-open it. */
+#sidebar-toggle { display: inline-flex; }
 @media (max-width: 860px) {
-  #app { grid-template-columns: 1fr; grid-template-areas: "header" "main" "composer"; }
+  #app { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
   #sidebar {
-    position: fixed; top: 56px; bottom: 0; left: 0; width: 86%; max-width: 360px;
+    position: fixed; top: 60px; bottom: 0; left: 0; width: 86%; max-width: 360px;
     z-index: 50; box-shadow: var(--shadow-lg);
   }
-  #app:not(.sidebar-open) #sidebar { transform: translateX(-100%); }
-  #sidebar-toggle { display: inline-flex; }
-  .examples-hero img { width: 44px; height: 44px; }
-  .examples-heading { font-size: 20px; }
+  /* On mobile the sidebar is an overlay; show it unless explicitly closed. */
+  #app.sidebar-closed #sidebar { transform: translateX(-100%); }
+  .examples-hero img { height: 46px; }
+  .examples-heading { font-size: 22px; }
 }
 
-/* ── Scrollbars ───────────────────────────────────────────────────────── */
-::-webkit-scrollbar { width: 9px; height: 9px; }
+/* ── Scrollbars (slim & subtle) ─────────────────────────────────���────── */
+::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
 ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; }
+* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
 
 /* KaTeX: keep its own math fonts and reset inherited typography so SVG
    stretchy operators don't get distorted by the bubble's line-height. */
@@ -418,7 +471,7 @@ button, input, textarea, select { font-family: inherit; }
 </style>
 </head>
 <body>
-<div id="app">
+<div id="app" class="sidebar-closed">
   <!-- ── Header ────────────────────────────────────────────────────── -->
   <header id="header">
     <button id="sidebar-toggle" class="icon-btn" title="Menu" aria-label="Toggle sidebar">
@@ -523,15 +576,17 @@ button, input, textarea, select { font-family: inherit; }
     </div>
   </main>
 
-  <!-- ── Composer ─────────────────────────────────────────────────── -->
+  <!-- ── Composer (floating pill) ─────────────────────────────────── -->
   <div id="composer">
-    <button id="new-chat-btn" class="round-btn" title="New chat" aria-label="New chat">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
-    </button>
-    <textarea id="msg-input" rows="1" data-i18n-ph="msg_placeholder"></textarea>
-    <button id="send-btn" class="round-btn" title="Send" aria-label="Send">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
-    </button>
+    <div class="composer-inner">
+      <button id="new-chat-btn" title="New chat" aria-label="New chat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
+      </button>
+      <textarea id="msg-input" rows="1" data-i18n-ph="msg_placeholder"></textarea>
+      <button id="send-btn" title="Send" aria-label="Send">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
+      </button>
+    </div>
   </div>
 </div>
 
@@ -629,9 +684,13 @@ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.7.1/dist/i
     setTheme(!document.documentElement.classList.contains("dark"))
   );
 
-  /* ─── sidebar toggle (mobile) ───────────────────────────────────── */
+  /* ─── sidebar toggle ───────────────────────────────────────────────
+     One class (``sidebar-closed``) drives collapse on every breakpoint;
+     the header button flips it, so the same control opens/closes the
+     sidebar on both desktop and mobile. It starts closed by default
+     (see the ``sidebar-closed`` class on #app). */
   $("sidebar-toggle").addEventListener("click", () => {
-    $("app").classList.toggle("sidebar-open");
+    $("app").classList.toggle("sidebar-closed");
   });
 
   /* ─── markdown + math rendering ────────────────────────────────────
@@ -1152,7 +1211,7 @@ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1.7.1/dist/i
   });
   msgInput.addEventListener("input", () => {
     msgInput.style.height = "auto";
-    msgInput.style.height = Math.min(msgInput.scrollHeight, 140) + "px";
+    msgInput.style.height = Math.min(msgInput.scrollHeight, 200) + "px";
   });
 
   /* ─── new chat ────────────────────────────────────────────────────── */