Update chat.html

chat.html

@@ -165,6 +165,10 @@
             transition: all 0.3s ease;
         }
 
+        .menu-toggle.active {
+            left: 260px;
+        }
+
         .menu-toggle:hover {
             transform: scale(1.1);
         }
@@ -243,13 +247,14 @@
         }
 
         .conversation-item:hover {
-            background: var(--olive-light);
-            color: white;
+            background: rgba(58, 102, 42, 0.1);
+            color: var(--olive-light);
         }
 
         .conversation-item.active {
             background: var(--olive-light);
             color: white;
+            box-shadow: 0 4px 12px rgba(58, 102, 42, 0.3);
         }
 
         .conversation-title {
@@ -385,24 +390,32 @@
         }
 
         .message-content {
-            max-width: 70%;
-            padding: 15px 20px;
-            border-radius: 12px;
+            max-width: 75%;
+            padding: 12px 18px;
+            border-radius: 18px;
             line-height: 1.6;
             word-wrap: break-word;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            position: relative;
+            font-size: 15px;
         }
 
         .message.user .message-content {
             background: var(--olive-light);
             color: white;
+            border-bottom-right-radius: 4px;
         }
 
         .light-mode .message.ai .message-content {
-            background: var(--bg-light);
+            background: white;
+            border: 1px solid rgba(0,0,0,0.05);
+            border-bottom-left-radius: 4px;
         }
 
         .dark-mode .message.ai .message-content {
             background: var(--bg-dark);
+            border: 1px solid rgba(255,255,255,0.05);
+            border-bottom-left-radius: 4px;
         }
 
         /* Feedback Buttons */
@@ -445,22 +458,31 @@
 
         .chat-input-area {
             padding: 20px;
-            border-top: 2px solid var(--olive-light);
+            background: transparent;
         }
 
         .input-wrapper {
             display: flex;
             gap: 10px;
             align-items: flex-end;
+            background: var(--bg-light);
+            padding: 10px;
+            border-radius: 26px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+            border: 1px solid rgba(0,0,0,0.05);
+        }
+
+        .dark-mode .input-wrapper {
+            background: var(--bg-dark);
+            border-color: rgba(255,255,255,0.1);
         }
 
         #messageInput {
             flex: 1;
-            padding: 15px;
-            border-radius: 8px;
-            border: 2px solid transparent;
+            padding: 12px 15px;
+            border: none;
+            background: transparent;
             font-size: 16px;
-            transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
             resize: none;
             font-family: inherit;
             height: 54px;
@@ -469,42 +491,37 @@
         }
 
         .light-mode #messageInput {
-            background: var(--bg-light);
             color: var(--text-light);
-            border-color: #e0e0e0;
         }
 
         .dark-mode #messageInput {
-            background: var(--bg-dark);
             color: var(--text-dark);
-            border-color: #444;
         }
 
         #messageInput:focus {
             outline: none;
-            border-color: var(--olive-light);
         }
 
         .send-btn {
-            width: 50px;
-            height: 50px;
-            padding: 0;
+            width: auto;
+            height: auto;
+            padding: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
-            background: var(--olive-light);
-            color: white;
+            background: transparent;
+            color: var(--olive-light);
             border: none;
-            border-radius: 50%;
             cursor: pointer;
-            font-size: 20px;
+            font-size: 24px;
             transition: all 0.3s ease;
             position: relative;
         }
 
         .send-btn:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(58, 102, 42, 0.4);
+            transform: scale(1.1);
+            box-shadow: none;
+            background: transparent;
         }
 
         .send-btn:disabled {
@@ -516,9 +533,9 @@
             display: inline-block;
             width: 16px;
             height: 16px;
-            border: 2px solid rgba(255,255,255,.3);
+            border: 2px solid rgba(58, 102, 42, 0.3);
             border-radius: 50%;
-            border-top-color: white;
+            border-top-color: var(--olive-light);
             animation: spin 0.8s linear infinite;
         }
 
@@ -652,7 +669,7 @@
 
             .main-content {
                 margin-left: 0;
-                padding: 80px 20px 20px 20px;
+                padding: 80px 10px 20px 10px;
                 height: 100dvh; /* Full viewport height on mobile */
             }
 
@@ -667,6 +684,10 @@
             .header-bar h1 {
                 font-size: 24px;
             }
+            
+            .chat-input-area {
+                padding: 10px 0;
+            }
 
             .modal-content {
                 margin: 10% auto;
@@ -847,7 +868,9 @@
                         autocomplete="off"
                     ></textarea>
                     <button class="send-btn" id="sendBtn" data-tooltip="Send Message">
-                        ➤
+                        <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
+                        </svg>
                     </button>
                 </div>
             </div>
@@ -1035,13 +1058,20 @@
             toggleSidebar() {
                 this.elements.sidebar.classList.toggle('active');
                 this.elements.sidebarOverlay.classList.toggle('active');
+                this.elements.menuToggle.classList.toggle('active');
+
+                if (this.elements.menuToggle.classList.contains('active')) {
+                    this.elements.menuToggle.innerHTML = '←';
+                } else {
+                    this.elements.menuToggle.innerHTML = '☰';
+                }
             },
 
             closeSidebar() {
-                if (state.isMobile) {
-                    this.elements.sidebar.classList.remove('active');
-                    this.elements.sidebarOverlay.classList.remove('active');
-                }
+                this.elements.sidebar.classList.remove('active');
+                this.elements.sidebarOverlay.classList.remove('active');
+                this.elements.menuToggle.classList.remove('active');
+                this.elements.menuToggle.innerHTML = '☰';
             },
 
             clearEmptyState() {
@@ -1119,7 +1149,9 @@
                 if (disabled) {
                     this.elements.sendBtn.innerHTML = '<span class="spinner"></span>';
                 } else {
-                    this.elements.sendBtn.innerHTML = '➤';
+                    this.elements.sendBtn.innerHTML = `<svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
+                        </svg>`;
                 }
             },