feat: **`globals.css`** — Edit `.chat-pane`: remove `width: 3… (+7 more)

- ✅ **`globals.css`** — Edit `.chat-pane`: remove `width: 380px`, add `min-width: 0`, `overflow: hidden`, `transition: width 0.2s ease`
- ✅ **`globals.css`** — Insert `.chat-resize-handle`, `.chat-header`, `.chat-collapse-btn` rules after `.chat-pane` block
- ✅ **`globals.css`** — Append `::-webkit-scrollbar` rules at end of file
- ✅ **`ChatPane.tsx`** — Full rewrite: new props interface, header strip, conditional body, inline width style
- ✅ **`App.tsx`** — Add `chatWidth` + `chatCollapsed` state with lazy localStorage initialisers
- ✅ **`App.tsx`** — Add two `useEffect` persistence hooks
- ✅ **`App.tsx`** — Add `handleResizeMouseDown` function
- ✅ **`App.tsx`** — Update `.main-content` JSX: insert conditional resize handle div, pass new props to `<ChatPane>`

1 files changed, 76 insertions, 1 deletions

diff --git a/renderer/src/styles/globals.css b/renderer/src/styles/globals.css
index 8e43f3a..03c7443 100644
--- a/renderer/src/styles/globals.css
+++ b/renderer/src/styles/globals.css
@@ -408,10 +408,57 @@ html[data-theme="light"] .session-rename-input {
 
 /* ── Chat Pane ───────────────────────────────────────────────── */
 .chat-pane {
-  width: 380px;
   display: flex;
   flex-direction: column;
   background: var(--bg-secondary);
+  min-width: 0;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+
+/* ── Chat Resize Handle ──────────────────────────────────────── */
+.chat-resize-handle {
+  width: 5px;
+  background: transparent;
+  cursor: col-resize;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.chat-resize-handle:hover {
+  background: var(--accent);
+}
+
+/* ── Chat Header Strip ───────────────────────────────────────── */
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 7px 12px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  font-size: 11px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.chat-collapse-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 2px 7px;
+  font-family: inherit;
+  transition: background 0.15s, color 0.15s;
+}
+
+.chat-collapse-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
 }
 
 .chat-messages {
@@ -998,3 +1045,31 @@ html[data-theme="light"] .settings-textarea:focus {
   background: var(--bg-tertiary);
   color: var(--text-primary);
 }
+
+/* ── Scrollbars ──────────────────────────────────────────────── */
+.chat-messages::-webkit-scrollbar,
+.document-content::-webkit-scrollbar,
+.cm-scroller::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.chat-messages::-webkit-scrollbar-track,
+.document-content::-webkit-scrollbar-track,
+.cm-scroller::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+
+.chat-messages::-webkit-scrollbar-thumb,
+.document-content::-webkit-scrollbar-thumb,
+.cm-scroller::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  border: 2px solid var(--bg-primary);
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover,
+.document-content::-webkit-scrollbar-thumb:hover,
+.cm-scroller::-webkit-scrollbar-thumb:hover {
+  background: var(--border);
+}