diff --git a/webui/package-lock.json b/webui/package-lock.json
index 67c7e9b..7afec61 100644
--- a/webui/package-lock.json
+++ b/webui/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@tailwindcss/cli": "^4.1.10",
         "@tailwindcss/container-queries": "^0.1.1",
-        "@tailwindcss/vite": "^4.1.10",
+        "@tailwindcss/vite": "^4.1.11",
         "@xterm/addon-fit": "^0.10.0",
         "@xterm/xterm": "^5.5.0",
         "dompurify": "^3.2.6",
@@ -2187,19 +2187,265 @@
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.1.10",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.10.tgz",
-      "integrity": "sha512-QWnD5HDY2IADv+vYR82lOhqOlS1jSCUUAmfem52cXAhRTKxpDh3ARX8TTXJTCCO7Rv7cD2Nlekabv02bwP3a2A==",
-      "license": "MIT",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.11.tgz",
+      "integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==",
       "dependencies": {
-        "@tailwindcss/node": "4.1.10",
-        "@tailwindcss/oxide": "4.1.10",
-        "tailwindcss": "4.1.10"
+        "@tailwindcss/node": "4.1.11",
+        "@tailwindcss/oxide": "4.1.11",
+        "tailwindcss": "4.1.11"
       },
       "peerDependencies": {
-        "vite": "^5.2.0 || ^6"
+        "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/node": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
+      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
+      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-x64": "4.1.11",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
+      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
+      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
+      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
+      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
+      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
+      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
+      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
+      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
+      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
+      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.11",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
+      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
+      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@tailwindcss/vite/node_modules/tailwindcss": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
+      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA=="
+    },
     "node_modules/@tootallnate/quickjs-emscripten": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
diff --git a/webui/package.json b/webui/package.json
index c8f9861..a6d0fe5 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "@tailwindcss/cli": "^4.1.10",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/vite": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.11",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "dompurify": "^3.2.6",
diff --git a/webui/src/web-components/demo/chat-input.ts b/webui/src/web-components/demo/chat-input.ts
new file mode 100644
index 0000000..7ddcc7e
--- /dev/null
+++ b/webui/src/web-components/demo/chat-input.ts
@@ -0,0 +1,137 @@
+/**
+ * Demo fixture for sketch-chat-input component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Chat Input Component",
+  description: "Chat input with file upload and drag-and-drop support",
+  imports: ["../sketch-chat-input"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Chat Input",
+      "Type a message and press Enter or click Send. Supports file drag-and-drop.",
+    );
+
+    const messagesSection = demoUtils.createDemoSection(
+      "Chat Messages",
+      "Sent messages will appear here",
+    );
+
+    // Create messages display
+    const messagesDiv = document.createElement("div");
+    messagesDiv.id = "chat-messages";
+    messagesDiv.className =
+      "min-h-[100px] max-h-[200px] overflow-y-auto border border-gray-300 rounded-md p-3 mb-3 bg-gray-50";
+
+    // Create chat input
+    const chatInput = document.createElement("sketch-chat-input") as any;
+
+    // Add message display function
+    const addMessage = (
+      message: string,
+      isUser: boolean = true,
+      timestamp?: Date,
+    ) => {
+      const messageDiv = document.createElement("div");
+      messageDiv.className = `p-2 my-1 rounded max-w-xs ${
+        isUser
+          ? "bg-blue-500 text-white ml-auto"
+          : "bg-gray-200 text-gray-900 mr-auto"
+      }`;
+
+      const timeStr = timestamp
+        ? timestamp.toLocaleTimeString()
+        : new Date().toLocaleTimeString();
+      messageDiv.innerHTML = `
+        <div class="text-sm">${message}</div>
+        <div class="text-xs opacity-70 mt-1">${timeStr}</div>
+      `;
+
+      messagesDiv.appendChild(messageDiv);
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    };
+
+    // Handle send events
+    chatInput.addEventListener("send-chat", (evt: any) => {
+      const message = evt.detail.message;
+      if (message.trim()) {
+        addMessage(message, true);
+
+        // Simulate bot response after a delay
+        setTimeout(() => {
+          const responses = [
+            "Message received!",
+            "Thanks for sharing that.",
+            "I see you uploaded a file.",
+            "Processing your request...",
+            "How can I help you further?",
+          ];
+          const randomResponse =
+            responses[Math.floor(Math.random() * responses.length)];
+          addMessage(randomResponse, false);
+        }, 1500);
+      }
+    });
+
+    // Add initial messages
+    addMessage("Welcome to the chat input demo!", false);
+    addMessage("Try typing a message or dragging files here.", false);
+
+    // Control buttons
+    const controlsDiv = document.createElement("div");
+    controlsDiv.className = "mt-4 space-x-2";
+
+    const clearButton = demoUtils.createButton("Clear Chat", () => {
+      messagesDiv.innerHTML = "";
+      addMessage("Chat cleared!", false);
+    });
+
+    const presetButton = demoUtils.createButton("Load Sample Message", () => {
+      chatInput.content =
+        "I need help with implementing a file upload feature. Can you review the attached screenshot?";
+    });
+
+    const multilineButton = demoUtils.createButton("Multiline Message", () => {
+      chatInput.content =
+        "Here's a multiline message:\n\n1. First point\n2. Second point\n3. Third point\n\nWhat do you think?";
+    });
+
+    controlsDiv.appendChild(clearButton);
+    controlsDiv.appendChild(presetButton);
+    controlsDiv.appendChild(multilineButton);
+
+    // File upload status section
+    const statusSection = demoUtils.createDemoSection(
+      "Upload Status",
+      "Current upload status and file handling",
+    );
+
+    const statusDiv = document.createElement("div");
+    statusDiv.className =
+      "bg-blue-50 border border-blue-200 rounded p-3 text-sm";
+    statusDiv.innerHTML = `
+      <div>✓ Drag and drop files onto the chat input</div>
+      <div>✓ Paste images from clipboard</div>
+      <div>✓ Multiple file uploads supported</div>
+      <div>✓ Upload progress indication</div>
+    `;
+
+    statusSection.appendChild(statusDiv);
+
+    // Assemble the demo
+    messagesSection.appendChild(messagesDiv);
+    basicSection.appendChild(chatInput);
+    basicSection.appendChild(controlsDiv);
+
+    container.appendChild(messagesSection);
+    container.appendChild(basicSection);
+    container.appendChild(statusSection);
+  },
+};
+
+export default demo;
diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index c624cb2..7dc02d4 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -94,6 +94,7 @@
     // For now, we'll maintain a registry of known demo components
     // This could be improved with build-time generation
     const knownComponents = [
+      "chat-input",
       "sketch-call-status",
       "sketch-chat-input",
       "sketch-container-status",
diff --git a/webui/src/web-components/sketch-chat-input.test.ts b/webui/src/web-components/sketch-chat-input.test.ts
index f941b3c..532ccf4 100644
--- a/webui/src/web-components/sketch-chat-input.test.ts
+++ b/webui/src/web-components/sketch-chat-input.test.ts
@@ -167,7 +167,7 @@
 
   // Simulate dragenter event
   await component.evaluate((el: SketchChatInput) => {
-    const container = el.renderRoot.querySelector(".chat-container");
+    const container = el.querySelector(".chat-container");
     if (container) {
       const event = new DragEvent("dragenter", { bubbles: true });
       container.dispatchEvent(event);
@@ -182,8 +182,7 @@
 
   // Check that the drop zone overlay is visible
   const overlay = await component.evaluate(
-    (el: SketchChatInput) =>
-      el.renderRoot.querySelector(".drop-zone-overlay") !== null,
+    (el: SketchChatInput) => el.querySelector(".drop-zone-overlay") !== null,
   );
   expect(overlay).toBe(true);
 });
@@ -198,7 +197,7 @@
 
   // Simulate dragleave event
   await component.evaluate((el: SketchChatInput) => {
-    const container = el.renderRoot.querySelector(".chat-container");
+    const container = el.querySelector(".chat-container");
     if (container) {
       const event = new DragEvent("dragleave", { bubbles: true });
       Object.defineProperty(event, "target", { value: container });
diff --git a/webui/src/web-components/sketch-chat-input.ts b/webui/src/web-components/sketch-chat-input.ts
index 9667155..557e171 100644
--- a/webui/src/web-components/sketch-chat-input.ts
+++ b/webui/src/web-components/sketch-chat-input.ts
@@ -1,8 +1,9 @@
-import { css, html, LitElement, PropertyValues } from "lit";
+import { html } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element.js";
 
 @customElement("sketch-chat-input")
-export class SketchChatInput extends LitElement {
+export class SketchChatInput extends SketchTailwindElement {
   @state()
   content: string = "";
 
@@ -15,114 +16,6 @@
   @state()
   showUploadInProgressMessage: boolean = false;
 
-  // See https://lit.dev/docs/components/styles/ for how lit-element handles CSS.
-  // Note that these styles only apply to the scope of this web component's
-  // shadow DOM node, so they won't leak out or collide with CSS declared in
-  // other components or the containing web page (...unless you want it to do that).
-  static styles = css`
-    /* Chat styles - exactly matching timeline.css */
-    .chat-container {
-      width: 100%;
-      background: #f0f0f0;
-      padding: 15px;
-      min-height: 40px; /* Ensure minimum height */
-      position: relative;
-    }
-
-    .chat-input-wrapper {
-      display: flex;
-      max-width: 1200px;
-      margin: 0 auto;
-      gap: 10px;
-    }
-
-    #chatInput {
-      flex: 1;
-      padding: 12px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      resize: vertical;
-      font-family: monospace;
-      font-size: 12px;
-      min-height: 40px;
-      max-height: 300px;
-      background: #f7f7f7;
-      overflow-y: auto;
-      box-sizing: border-box; /* Ensure padding is included in height calculation */
-      line-height: 1.4; /* Consistent line height for better height calculation */
-    }
-
-    #sendChatButton {
-      background-color: #2196f3;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      padding: 0 20px;
-      cursor: pointer;
-      font-weight: 600;
-      align-self: center;
-      height: 40px;
-    }
-
-    #sendChatButton:hover {
-      background-color: #0d8bf2;
-    }
-
-    #sendChatButton:disabled {
-      background-color: #b0b0b0;
-      cursor: not-allowed;
-    }
-
-    /* Drop zone styling */
-    .drop-zone-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(33, 150, 243, 0.1);
-      border: 2px dashed #2196f3;
-      border-radius: 4px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 10;
-      pointer-events: none;
-    }
-
-    .drop-zone-message,
-    .upload-progress-message {
-      background-color: #ffffff;
-      padding: 15px 20px;
-      border-radius: 4px;
-      font-weight: 600;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    }
-
-    .upload-progress-message {
-      position: absolute;
-      bottom: 70px;
-      left: 50%;
-      transform: translateX(-50%);
-      background-color: #fff9c4;
-      border: 1px solid #fbc02d;
-      z-index: 20;
-      font-size: 14px;
-      animation: fadeIn 0.3s ease-in-out;
-    }
-
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateX(-50%) translateY(10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateX(-50%) translateY(0);
-      }
-    }
-  `;
-
   constructor() {
     super();
     this._handleDiffComment = this._handleDiffComment.bind(this);
@@ -227,7 +120,7 @@
     event.preventDefault();
     event.stopPropagation();
     // Only set to false if we're leaving the container (not entering a child element)
-    if (event.target === this.renderRoot.querySelector(".chat-container")) {
+    if (event.target === this.querySelector(".chat-container")) {
       this.isDraggingOver = false;
     }
   }
@@ -291,7 +184,7 @@
     window.removeEventListener("todo-comment", this._handleTodoComment);
 
     // Clean up drag and drop event listeners
-    const container = this.renderRoot.querySelector(".chat-container");
+    const container = this.querySelector(".chat-container");
     if (container) {
       container.removeEventListener("dragover", this._handleDragOver);
       container.removeEventListener("dragenter", this._handleDragEnter);
@@ -384,7 +277,7 @@
       this.chatInput.addEventListener("paste", this._handlePaste);
 
       // Add drag and drop event listeners
-      const container = this.renderRoot.querySelector(".chat-container");
+      const container = this.querySelector(".chat-container");
       if (container) {
         container.addEventListener("dragover", this._handleDragOver);
         container.addEventListener("dragenter", this._handleDragEnter);
@@ -407,8 +300,8 @@
 
   render() {
     return html`
-      <div class="chat-container">
-        <div class="chat-input-wrapper">
+      <div class="chat-container w-full bg-gray-100 p-4 min-h-[40px] relative">
+        <div class="chat-input-wrapper flex max-w-6xl mx-auto gap-2.5">
           <textarea
             id="chatInput"
             placeholder="Type your message here and press Enter to send..."
@@ -416,25 +309,35 @@
             @keydown="${this._chatInputKeyDown}"
             @input="${this._chatInputChanged}"
             .value=${this.content || ""}
+            class="flex-1 p-3 border border-gray-300 rounded resize-y font-mono text-xs min-h-[40px] max-h-[300px] bg-gray-50 overflow-y-auto box-border leading-relaxed"
           ></textarea>
           <button
             @click="${this._sendChatClicked}"
             id="sendChatButton"
             ?disabled=${this.uploadsInProgress > 0}
+            class="bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed text-white border-none rounded px-5 cursor-pointer font-semibold self-center h-10"
           >
             ${this.uploadsInProgress > 0 ? "Uploading..." : "Send"}
           </button>
         </div>
         ${this.isDraggingOver
           ? html`
-              <div class="drop-zone-overlay">
-                <div class="drop-zone-message">Drop files here</div>
+              <div
+                class="drop-zone-overlay absolute inset-0 bg-blue-500/10 border-2 border-dashed border-blue-500 rounded flex justify-center items-center z-10 pointer-events-none"
+              >
+                <div
+                  class="drop-zone-message bg-white p-4 rounded font-semibold shadow-lg"
+                >
+                  Drop files here
+                </div>
               </div>
             `
           : ""}
         ${this.showUploadInProgressMessage
           ? html`
-              <div class="upload-progress-message">
+              <div
+                class="upload-progress-message absolute bottom-[70px] left-1/2 transform -translate-x-1/2 bg-yellow-50 border border-yellow-400 z-20 text-sm px-5 py-4 rounded font-semibold shadow-lg animate-fade-in"
+              >
                 Please wait for file upload to complete before sending
               </div>
             `
diff --git a/webui/tailwind.config.js b/webui/tailwind.config.js
index 919d100..f51be72 100644
--- a/webui/tailwind.config.js
+++ b/webui/tailwind.config.js
@@ -2,4 +2,23 @@
 export default {
   content: ["./src/**/*.{js,ts,jsx,tsx,html}"],
   plugins: ["@tailwindcss/container-queries"],
+  theme: {
+    extend: {
+      animation: {
+        "fade-in": "fadeIn 0.3s ease-in-out",
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": {
+            opacity: "0",
+            transform: "translateX(-50%) translateY(10px)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateX(-50%) translateY(0)",
+          },
+        },
+      },
+    },
+  },
 };