diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index e11fedb71..7769bcb7c 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -245,16 +245,18 @@
 /* Override .field textarea min-height (180px) from components.css */
 .chat-compose .chat-compose__field textarea {
   width: 100%;
-  height: 40px;
   min-height: 40px;
-  max-height: 150px;
+  max-height: 200px;
   padding: 9px 12px;
   border-radius: 8px;
-  resize: vertical;
+  resize: none; /* Disable manual resize since we auto-expand */
   white-space: pre-wrap;
   font-family: var(--font-body);
   font-size: 14px;
   line-height: 1.45;
+  overflow-y: auto;
+  box-sizing: border-box;
+  field-sizing: content; /* Modern CSS auto-sizing (Chrome 123+, Firefox 131+) */
 }
 
 .chat-compose__field textarea:disabled {
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
index a9b4da572..4b7be985c 100644
--- a/ui/src/ui/views/chat.ts
+++ b/ui/src/ui/views/chat.ts
@@ -1,5 +1,6 @@
 import { html, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
+import { ref } from "lit/directives/ref.js";
 import type { SessionsListResult } from "../types";
 import type { ChatAttachment, ChatQueueItem } from "../ui-types";
 import type { ChatItem, MessageGroup } from "../types/chat-types";
@@ -102,6 +103,18 @@ function generateAttachmentId(): string {
   return `att-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 }
 
+function autoResizeTextarea(textarea: HTMLTextAreaElement) {
+  // If empty, reset to default height
+  if (!textarea.value) {
+    textarea.style.height = "";
+    return;
+  }
+  // Reset height to auto to get the correct scrollHeight
+  textarea.style.height = "auto";
+  // Set height to scrollHeight (capped by max-height in CSS)
+  textarea.style.height = `${textarea.scrollHeight}px`;
+}
+
 function handlePaste(
   e: ClipboardEvent,
   props: ChatProps,
@@ -327,6 +340,9 @@ export function renderChat(props: ChatProps) {
           <label class="field chat-compose__field">
             <span>Message</span>
             <textarea
+              ${ref((el) => {
+                if (el) autoResizeTextarea(el as HTMLTextAreaElement);
+              })}
               .value=${props.draft}
               ?disabled=${!props.connected}
               @keydown=${(e: KeyboardEvent) => {
@@ -337,8 +353,11 @@ export function renderChat(props: ChatProps) {
                 e.preventDefault();
                 if (canCompose) props.onSend();
               }}
-              @input=${(e: Event) =>
-                props.onDraftChange((e.target as HTMLTextAreaElement).value)}
+              @input=${(e: Event) => {
+                const textarea = e.target as HTMLTextAreaElement;
+                props.onDraftChange(textarea.value);
+                autoResizeTextarea(textarea);
+              }}
               @paste=${(e: ClipboardEvent) => handlePaste(e, props)}
               placeholder=${composePlaceholder}
             ></textarea>