Fix the sidebar so it integrates seamlessly with the site.

components/sidebar.js

@@ -294,16 +294,16 @@ class CustomSidebar extends HTMLElement {
                     }
                 }
 </style>
-            <nav class="sidebar">
-                <div class="sidebar-buttons">
-                    <button onclick="startNewChat()" class="new-chat-btn">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <nav class="sidebar" role="navigation" aria-label="Main navigation">
+<div class="sidebar-buttons">
+                    <button onclick="startNewChat()" class="new-chat-btn" aria-label="Start a new chat">
+<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M12 5v14m-7-7h14"/>
                         </svg>
                         <span>New Chat</span>
                     </button>
-                    <button onclick="window.location.href='/media'" class="sidebar-btn">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <button onclick="window.location.href='/media'" class="sidebar-btn" aria-label="Go to media library">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                             <circle cx="8.5" cy="8.5" r="1.5"/>
                             <path d="M21 15l-5-5L5 21"/>
@@ -311,18 +311,18 @@ class CustomSidebar extends HTMLElement {
                         <span>Media Library</span>
                     </button>
                 </div>
-<div class="history-section">
-                    <div class="history-header">
+                <div class="history-section" role="region" aria-label="Chat history">
+<div class="history-header">
                         <span class="history-title">Chat History</span>
                         <div class="history-actions">
-                            <button class="history-action-btn" title="Search">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <button class="history-action-btn" title="Search chat history" aria-label="Search">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <circle cx="11" cy="11" r="8"/>
                                     <path d="m21 21-4.35-4.35"/>
                                 </svg>
                             </button>
-                            <button class="history-action-btn" title="Clear">
-                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <button class="history-action-btn" title="Clear chat history" aria-label="Clear">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                     <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14zM10 11v6M14 11v6"/>
                                 </svg>
                             </button>

style.css

@@ -144,6 +144,7 @@ body {
 /* Sidebar adjustments for main content */
 main {
     margin-left: 0;
+    transition: margin-left 0.3s ease;
 }
 
 /* Mobile Responsive */
@@ -159,14 +160,38 @@ main {
     .sidebar.active {
         transform: translateX(0);
     }
+    
+    body.sidebar-open main {
+        margin-left: 0 !important;
+    }
 }
+
 /* Desktop Responsive */
 @media (min-width: 769px) {
     main {
         margin-left: 260px !important;
         position: relative;
-        z-index: 5;
+        z-index: 10;
+    }
+    
+    body:not(.sidebar-closed) main {
+        margin-left: 260px !important;
     }
+    
+    body.sidebar-closed main {
+        margin-left: 0 !important;
+    }
+}
+
+/* Sidebar Transitions */
+.sidebar {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar * {
+    transition-property: background, border-color, transform, box-shadow;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
 }
 /* Loading Skeleton */
 .skeleton {