Don't just leave the chat page on the right, fit it completely in the middle. The sidebar will remain fixed on the left, but still. Don't overlap them.

index.html

@@ -63,9 +63,9 @@
     <div class="flex h-screen relative z-10">
         <custom-sidebar></custom-sidebar>
         <!-- Chat Container -->
-        <div class="flex-1 flex bg-zinc-950 relative overflow-hidden" style="margin-left: 260px;">
+        <div class="flex-1 flex justify-center bg-zinc-950 relative overflow-hidden" style="margin-left: 260px;">
 <!-- Chat Section -->
-            <div class="flex-1 flex flex-col relative overflow-hidden max-h-screen">
+            <div class="w-full max-w-6xl flex flex-col relative overflow-hidden max-h-screen">
 <!-- Messages Container -->
                 <div id="chatContainer" class="flex-1 overflow-y-auto scroll-smooth p-4 space-y-4" style="scrollbar-width: thin; scrollbar-color: #525252 #18181b;">
                     <!-- AI Welcome Message -->

style.css

@@ -223,6 +223,11 @@ body {
     overflow: hidden;
     max-height: 100vh;
 }
+
+/* Chat Width Constraints */
+.max-w-6xl {
+    max-width: 72rem;
+}
 /* Fixed sidebar layout */
 custom-sidebar {
     position: fixed !important;