added all css in one file

frontend/src/App.css

@@ -1,23 +0,0 @@
-/* frontend/src/App.css */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Optional: Basic body styling */
-body {
-  margin: 0;
-  font-family: 'Inter', "Noto Sans", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Hide scrollbar for webkit browsers */
-.hide-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* For IE, Edge and Firefox */
-.hide-scrollbar {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}

frontend/src/components/chat/ChatInputArea.jsx

@@ -1,11 +1,11 @@
-// frontend/src/components/chat/ChatInputArea.jsx
 import React, { useState, useEffect } from 'react';
 import { VoiceVisualizer, useVoiceVisualizer } from 'react-voice-visualizer';
 
 const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
   const [message, setMessage] = useState('');
 
-  const BASE_URL = '/api';
+  // BASE_URL is not used here, so it can be removed if not needed elsewhere
+  // const BASE_URL = '/api';
 
   const voiceVisualizerHook = useVoiceVisualizer({});
 
@@ -36,7 +36,7 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
   };
 
   const handleStartRecording = () => {
-    if (isLoading) return;
+    if (isLoading) return; // Prevent recording if an action is already in progress
     startRecording();
     console.log("Recording started...");
   };
@@ -83,12 +83,15 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
               </svg>
             )}
           </button>
-          <VoiceVisualizer
-            className="sound-wave"
-            mainBarColor="#4CAF50"
-            secondaryBarColor="#81C784"
-            hook={voiceVisualizerHook}
-          />
+          {/* Only show visualizer if recording or if there's audio data to show */}
+          {isRecording && (
+            <VoiceVisualizer
+              className="sound-wave"
+              mainBarColor="#4CAF50"
+              secondaryBarColor="#81C784"
+              hook={voiceVisualizerHook}
+            />
+          )}
         </div>
       </form>
     </div>

frontend/src/components/chat/ChatInterface.css

@@ -1,172 +0,0 @@
-/* General Layout */
-.chat-layout {
-    display: flex;
-    height: 100vh;
-    overflow: hidden; /* Prevent body scroll if content overflows */
-}
-
-.chat-main {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background-color: #f9f9f9;
-}
-
-/* Chat Messages Area */
-.chat-messages {
-    flex-grow: 1;
-    overflow-y: auto; /* Enable scrolling for messages */
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 15px; /* Spacing between message wrappers */
-}
-
-/* Empty Chat Placeholder */
-.empty-chat-placeholder {
-    text-align: center;
-    padding: 50px;
-    color: #666;
-    flex-grow: 1; /* Pushes content to the bottom if few messages */
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-.empty-chat-placeholder h1 {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-    color: #333;
-}
-.empty-chat-placeholder p {
-    font-size: 1.1em;
-    line-height: 1.6;
-}
-
-/* Message Wrapper (contains avatar and bubble) */
-.message-wrapper {
-    display: flex; /* Use flexbox for layout of avatar and bubble */
-    align-items: flex-start; /* Align items to the top */
-    max-width: 100%; /* Ensure it doesn't overflow */
-}
-
-/* Specific styles for user messages (align to right) */
-.message-wrapper.user {
-    justify-content: flex-end; /* Push user messages to the right */
-    flex-direction: row-reverse; /* Put avatar on the right for user */
-}
-
-/* Chat Avatar Styling */
-.chat-avatar {
-    font-size: 24px; /* Still useful for user emoji */
-    padding: 8px;
-    border-radius: 50%;
-    background-color: #e0e0e0; /* Default background for avatar circle */
-    min-width: 40px;
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    /* Margins for spacing */
-    margin-right: 10px; /* Default for assistant avatar */
-    overflow: hidden; /* Crucial to clip image if it's larger than the circle */
-}
-
-/* Adjust margin for user avatar (since row-reverse) */
-.message-wrapper.user .chat-avatar {
-    margin-left: 10px;
-    margin-right: 0;
-}
-
-/* Style for the actual image inside the avatar div */
-.chat-avatar .avatar-image {
-    width: 100%; /* Make image fill the avatar div */
-    height: 100%; /* Make image fill the avatar div */
-    object-fit: cover; /* Crop and cover the area without distortion */
-    border-radius: 50%; /* Ensure the image itself is also rounded */
-}
-
-/* Message Bubble Styling */
-.message-bubble {
-    background-color: #f0f0f0;
-    padding: 12px 18px;
-    border-radius: 20px;
-    max-width: 70%; /* Limit message width */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-    /* --- THE KEY CSS PROPERTY FOR NEWLINES --- */
-    white-space: pre-wrap; /* This will make '\n' characters create new lines */
-    /* --- END KEY CSS PROPERTY --- */
-
-    word-break: break-word; /* Ensure long words break within the bubble */
-    overflow-wrap: break-word; /* Modern equivalent */
-}
-
-/* Specific styling for assistant bubbles */
-.message-wrapper.assistant .message-bubble {
-    background-color: #e6f7ff; /* Light blue for assistant */
-    border-bottom-left-radius: 5px; /* Pointy bottom-left for assistant */
-    margin-right: auto; /* Push to left, next to sidebar */
-}
-
-/* Specific styling for user bubbles */
-.message-wrapper.user .message-bubble {
-    background-color: #d1e7dd; /* Light green for user */
-    border-bottom-right-radius: 5px; /* Pointy bottom-right for user */
-    margin-left: auto; /* Push to right */
-}
-
-/* Chat Input Area */
-.chat-input-area {
-    padding: 20px;
-    border-top: 1px solid #eee;
-    background-color: #fff;
-}
-
-.chat-form {
-    display: flex;
-    gap: 10px;
-}
-
-.chat-form input[type="text"] {
-    flex-grow: 1;
-    padding: 12px;
-    border: 1px solid #ccc;
-    border-radius: 25px;
-    font-size: 16px;
-    outline: none;
-}
-
-.chat-form button {
-    padding: 12px 20px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 25px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: background-color 0.2s;
-}
-
-.chat-form button:hover:not(:disabled) {
-    background-color: #0056b3;
-}
-
-.chat-form button:disabled {
-    background-color: #a0a0a0;
-    cursor: not-allowed;
-}
-
-/* Blinking Cursor */
-.blinking-cursor {
-    animation: blink 1s step-end infinite;
-    display: inline-block; /* Essential for it to be visible next to text */
-    width: 0.5em; /* Give it a small width */
-}
-
-@keyframes blink {
-    from, to { opacity: 1; }
-    50% { opacity: 0; }
-}

frontend/src/components/chat/ChatInterface.jsx

@@ -15,20 +15,24 @@ const ChatInterface = () => {
   const FASTAPI_TRANSCRIBE_URL = '/api/transcribe-audio'; // Endpoint for audio transcription
 
   useEffect(() => {
+    // Scroll to bottom when chat history changes
     chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [chatHistory]);
 
   const handleNewChat = () => {
+    // Save current chat history before starting a new one, if user is logged in
     if (auth.currentUser && chatHistory.length > 0) {
       saveChatHistory(chatHistory);
     }
-    setChatHistory([]);
+    setChatHistory([]); // Clear chat history for a new conversation
   };
 
   const handleSendMessage = async (userPrompt) => {
-    if (!userPrompt.trim() || isSending) return;
+    if (!userPrompt.trim() || isSending) return; // Prevent empty messages or sending when busy
 
     const userMessage = { role: 'user', message: userPrompt.trim(), timestamp: new Date() };
+    
+    // Add user message and a placeholder for assistant's response
     setChatHistory(prev => [
       ...prev,
       userMessage,
@@ -40,9 +44,11 @@ const ChatInterface = () => {
     let assistantMessageTimestamp = new Date();
     let assistantMessageIndex = -1;
 
+    // Find the index of the streaming assistant message to update it
     setChatHistory(prev => {
       const updated = [...prev];
       assistantMessageIndex = updated.findIndex(msg => msg.role === 'assistant' && msg.streaming);
+      // Fallback in case the initial streaming message isn't found (shouldn't happen with the prev logic)
       if (assistantMessageIndex === -1) {
           assistantMessageIndex = updated.length - 1;
       }
@@ -69,19 +75,22 @@ const ChatInterface = () => {
         const { value, done } = await reader.read();
         if (done) {
             console.log("Stream finished.");
-            processPartialBuffer(buffer);
+            // Process any remaining buffer content
+            processPartialBuffer(buffer); 
             break;
         }
         const decodedChunk = decoder.decode(value, { stream: true });
         buffer += decodedChunk;
 
+        // Process SSE events (split by \n\n)
         const events = buffer.split('\n\n');
-        buffer = events.pop() || '';
+        buffer = events.pop() || ''; // Keep incomplete event in buffer
 
         for (const eventString of events) {
           processPartialBuffer(eventString);
         }
 
+        // Update UI with current streamed response
         setChatHistory(prev => {
           const updated = [...prev];
           const targetMessage = updated[assistantMessageIndex];
@@ -115,28 +124,32 @@ const ChatInterface = () => {
     } catch (err) {
       console.error('General Fetch/Stream Error:', err);
       currentFullResponse += `\nSorry, something went wrong. Please try again. [Error: ${err.message}]`;
+      // Update the message immediately on error
       setChatHistory(prev => {
         const updated = [...prev];
         const targetMessage = updated[assistantMessageIndex];
         if (targetMessage) {
           targetMessage.message = currentFullResponse;
-          targetMessage.timestamp = new Date();
+          targetMessage.timestamp = new Date(); // Update timestamp for error message
           targetMessage.streaming = false;
         } else {
+            // Add a new message if the streaming placeholder wasn't correctly identified
             updated.push({ role: 'assistant', message: currentFullResponse, timestamp: new Date(), streaming: false });
         }
         return updated;
       });
     } finally {
       setIsSending(false);
+      // Final update to remove blinking cursor and ensure timestamp is set
       setChatHistory(prev => {
         const updated = [...prev];
         const targetMessage = updated[assistantMessageIndex];
         if (targetMessage && targetMessage.role === 'assistant') {
           targetMessage.message = currentFullResponse;
-          targetMessage.timestamp = assistantMessageTimestamp;
+          targetMessage.timestamp = assistantMessageTimestamp; // Use the initial timestamp
           targetMessage.streaming = false;
         }
+        // If for some reason the message is empty after streaming, add a fallback
         if (!targetMessage || targetMessage.message === '') {
            const fallbackMessage = "Sorry, an unexpected error occurred.";
            updated.push({ role: 'assistant', message: fallbackMessage, timestamp: new Date(), streaming: false });
@@ -144,15 +157,17 @@ const ChatInterface = () => {
         return updated;
       });
 
+      // Save chat history after the conversation round is complete
       if (auth.currentUser) {
           setChatHistory(finalChatState => {
               const chatToSave = [...finalChatState];
               const lastMessageForSave = chatToSave.at(-1);
+              // Remove the blinking cursor if it somehow persists
               if (lastMessageForSave && lastMessageForSave.role === 'assistant' && lastMessageForSave.message.endsWith('▌')) {
                   lastMessageForSave.message = lastMessageForSave.message.slice(0, -1);
               }
               saveChatHistory(chatToSave);
-              return finalChatState;
+              return finalChatState; // Return original state to avoid re-rendering
           });
       }
     }
@@ -186,24 +201,30 @@ const ChatInterface = () => {
         if (transcriptionResult) {
             // Update the user's "Recording audio..." message with the actual transcription
             setChatHistory(prev => {
-                const updated = prev.filter(msg => msg.message !== '(Recording audio...)'); // Remove placeholder
-                return [...updated, { role: 'user', message: transcriptionResult, timestamp: new Date() }];
+                // Filter out the "Recording audio..." placeholder message
+                const updated = prev.filter(msg => !(msg.role === 'user' && msg.message === '(Recording audio...)'));
+                // Add the actual transcribed user message
+                const userMsg = { role: 'user', message: transcriptionResult, timestamp: new Date() };
+                // Filter out the "Transcribing..." assistant message
+                const filteredAssistantMsgs = updated.filter(msg => !(msg.role === 'assistant' && msg.message === 'Transcribing...'));
+                return [...filteredAssistantMsgs, userMsg];
             });
+            
             // Now, send the transcribed text to your LLM
             await handleSendMessage(transcriptionResult);
         } else {
             alert('Could not transcribe audio. Please try speaking clearer.');
             // Remove transcription messages if empty
-            setChatHistory(prev => prev.filter(msg => msg.message !== '(Recording audio...)' && msg.message !== 'Transcribing...'));
+            setChatHistory(prev => prev.filter(msg => !(msg.role === 'user' && msg.message === '(Recording audio...)') && !(msg.role === 'assistant' && msg.message === 'Transcribing...')));
         }
     } catch (error) {
         console.error('Error during voice transcription:', error);
         alert(`Failed to transcribe audio. Error: ${error.message || 'Unknown error'}`);
         // Remove transcription messages if error
-        setChatHistory(prev => prev.filter(msg => msg.message !== '(Recording audio...)' && msg.message !== 'Transcribing...'));
+        setChatHistory(prev => prev.filter(msg => !(msg.role === 'user' && msg.message === '(Recording audio...)') && !(msg.role === 'assistant' && msg.message === 'Transcribing...')));
     } finally {
         setIsSending(false);
-        // Ensure the "Transcribing..." message is removed
+        // Ensure the "Transcribing..." message is always removed when done
         setChatHistory(prev => prev.filter(msg => !(msg.role === 'assistant' && msg.message === 'Transcribing...')));
     }
   };
@@ -239,7 +260,7 @@ const ChatInterface = () => {
               </div>
             ))
           )}
-          <div ref={chatEndRef} />
+          <div ref={chatEndRef} /> {/* Ref for scrolling to the bottom */}
         </div>
         <ChatInputArea
           onSendMessage={handleSendMessage}

frontend/src/components/chat/History.css

@@ -1,152 +0,0 @@
-/* History.css */
-
-.chat-layout {
-  display: flex;
-  height: 100vh;
-  /* Assuming chat-layout takes full viewport height */
-}
-
-.chat-main {
-  flex-grow: 1;
-  padding: 20px;
-  background-color: #f0f2f5;
-  overflow-y: auto; /* Enable scrolling for main content */
-}
-
-.history-title {
-  color: #333;
-  margin-bottom: 20px;
-  font-size: 24px;
-}
-
-.history-list {
-  list-style: none;
-  padding: 0;
-}
-
-.history-item {
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 15px 20px;
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.history-item:hover {
-  background-color: #e9ecef;
-}
-
-.history-icon {
-  font-size: 24px;
-  margin-right: 15px;
-}
-
-.history-details {
-  flex-grow: 1;
-}
-
-.history-prompt {
-  font-weight: bold;
-  color: #555;
-  margin-bottom: 5px;
-}
-
-.history-date {
-  font-size: 0.85em;
-  color: #888;
-}
-
-/* Conversation View Specific Styles */
-.conversation-view {
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-.back-button {
-  background-color: #007bff;
-  color: white;
-  border: none;
-  padding: 10px 15px;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-bottom: 15px;
-  font-size: 16px;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.back-button:hover {
-  background-color: #0056b3;
-}
-
-.conversation-title {
-  color: #333;
-  margin-bottom: 20px;
-  font-size: 20px;
-  border-bottom: 1px solid #eee;
-  padding-bottom: 10px;
-}
-
-.messages-list {
-  max-height: 500px; /* Limit height and enable scrolling for messages */
-  overflow-y: auto;
-  padding-right: 10px; /* For scrollbar spacing */
-}
-
-.message-item {
-  margin-bottom: 15px;
-  padding: 10px 15px;
-  border-radius: 8px;
-  max-width: 80%;
-  clear: both; /* Clear floats for alignment */
-}
-
-.message-item.user {
-  background-color: #dcf8c6; /* Light green for user messages */
-  align-self: flex-end; /* Align to the right in a flex container */
-  margin-left: auto; /* Push to the right */
-}
-
-.message-item.chatbot {
-  background-color: #e2e2e2; /* Light grey for chatbot messages */
-  align-self: flex-start; /* Align to the left */
-  margin-right: auto; /* Push to the left */
-}
-
-.message-sender {
-  font-weight: bold;
-  margin-bottom: 5px;
-  font-size: 0.9em;
-}
-
-.message-item.user .message-sender {
-  color: #3d8c1c; /* Darker green for user sender */
-}
-
-.message-item.chatbot .message-sender {
-  color: #555;
-}
-
-.message-content {
-  font-size: 1em;
-  line-height: 1.4;
-  word-wrap: break-word; /* Ensure long words wrap */
-}
-
-.message-timestamp {
-  font-size: 0.75em;
-  color: #999;
-  margin-top: 5px;
-  text-align: right;
-}
-
-/* Ensure messages-list items align correctly */
-.messages-list {
-  display: flex;
-  flex-direction: column;
-}

frontend/src/components/chat/History.jsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from 'react';
 import { getChatHistory } from '../../services/firestore.js';
 import Sidebar from '../layout/Sidebar';
@@ -9,6 +8,7 @@ const History = () => {
 
   useEffect(() => {
     const fetchHistory = async () => {
+      setLoading(true); // Set loading to true before fetching
       const userChats = await getChatHistory();
       setChats(userChats);
       setLoading(false);
@@ -18,24 +18,28 @@ const History = () => {
 
   return (
     <div className="chat-layout">
-      <Sidebar onNewChat={() => {}} />
+      <Sidebar onNewChat={() => {}} /> {/* Sidebar for navigation */}
       <div className="chat-main">
         <h2 className="history-title">History</h2>
         {loading ? (
           <p>Loading history...</p>
         ) : (
           <ul className="history-list">
-            {chats.map(chat => (
-              <li key={chat.id} className="history-item">
-                <span className="history-icon">💬</span>
-                <div className="history-details">
-                  <p className="history-prompt">{chat.title}</p>
-                  <span className="history-date">
-                    {new Date(chat.createdAt?.toDate()).toLocaleString()}
-                  </span>
-                </div>
-              </li>
-            ))}
+            {chats.length === 0 ? (
+              <p className="no-history-message">No chat history available. Start a new conversation!</p>
+            ) : (
+              chats.map(chat => (
+                <li key={chat.id} className="history-item">
+                  <span className="history-icon">💬</span>
+                  <div className="history-details">
+                    <p className="history-prompt">{chat.title}</p>
+                    <span className="history-date">
+                      {new Date(chat.createdAt?.toDate()).toLocaleString()}
+                    </span>
+                  </div>
+                </li>
+              ))
+            )}
           </ul>
         )}
       </div>

frontend/src/components/layout/Sidebar.jsx

@@ -1,20 +1,11 @@
 import React from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { signOut } from "firebase/auth";
-import { auth } from '../../services/firebase.js';
+import { Link } from 'react-router-dom';
+
 
 const Sidebar = ({ onNewChat }) => {
-  const navigate = useNavigate();
+  
 
-  // No longer needed for sidebar, but keeping if still used elsewhere
-  const handleLogout = async () => {
-    try {
-      await signOut(auth);
-      navigate('/login');
-    } catch (error) {
-      console.error("Error signing out: ", error);
-    }
-  };
+ 
 
   return (
     <div className="sidebar">

frontend/src/index.css

@@ -1,88 +1,89 @@
 /* frontend/src/index.css */
+
+/* Tailwind CSS directives - MUST be at the very top */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 /* Define custom CSS Variables */
 :root {
-  --primary-color: #22c55e;
-  --background-color: #fff6d7;
-  --text-color: #333;
-  --white-color: #ffffff;
-  --border-color: #e5e7eb;
-  --green-button-bg: #4CAF50; /* Specific green for buttons */
-  --green-button-hover-bg: #45a049; /* Darker green on hover */
-  --dark-green-text: #0dba4b; /* Specific dark green for history/settings text */
-  --fontFamily: system-ui; /* Added a fallback for --fontFamily if not defined */
-  --header-height: 65px; /* Define a variable for consistent header height if it's fixed */
-}
-
-/* Global Styles for no full-page scrolling, and font-family */
+    --primary-color: #22c55e;
+    --background-color: #fff6d7;
+    --text-color: #333;
+    --white-color: #ffffff;
+    --border-color: #e5e7eb;
+    --green-button-bg: #4CAF50; /* Specific green for buttons */
+    --green-button-hover-bg: #45a049; /* Darker green on hover */
+    --dark-green-text: #0dba4b; /* Specific dark green for history/settings text */
+    --fontFamily: 'Inter', "Noto Sans", system-ui; /* Consolidated font families */
+    --header-height: 65px; /* Define a variable for consistent header height if it's fixed */
+}
+
+/* Global Styles for full-page layout and font-family */
 html, body, #root, .app-wrapper {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  /* overflow: hidden is critical for entire page */
-  overflow: hidden;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    /* overflow: hidden is critical for entire page to prevent unwanted scrolling */
+    overflow: hidden;
 }
 
 body {
-  font-family: var(--fontFamily), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; /* Keep this for Firefox/Mozilla */
-  background-color: var(--white-color);
-  color: var(--text-color);
+    font-family: var(--fontFamily), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--white-color); /* Changed to use white-color variable */
+    color: var(--text-color);
 }
 
 /* Hide scrollbar for webkit browsers */
 .hide-scrollbar::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 /* For IE, Edge and Firefox */
 .hide-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
 }
 
 /* --- App Wrapper (main application container) --- */
 .app-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%; /* Ensure app-wrapper takes full height */
+    display: flex;
+    flex-direction: column;
+    height: 100%; /* Ensure app-wrapper takes full height */
 }
 
 main {
-  flex-grow: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 /* --- Header --- */
 .app-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 2rem;
-  background-color: var(--white-color);
-  border-bottom: 1px solid var(--border-color);
-  /* position: sticky and top: 0 ensure it stays visible */
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  height: var(--header-height); /* Set fixed height for header if known */
-  box-sizing: border-box; /* Include padding in height calculation */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    background-color: var(--white-color);
+    border-bottom: 1px solid var(--border-color);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    height: var(--header-height); /* Set fixed height for header if known */
+    box-sizing: border-box; /* Include padding in height calculation */
 }
 
 .logo {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 .logo img {
-  height: 40px;
-  width: auto;
+    height: 40px;
+    width: auto;
 }
 
 .logo .brand-names {
@@ -103,37 +104,36 @@ main {
 }
 
 .app-header nav {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
 .app-header nav a {
-  text-decoration: none;
-  color: var(--text-color);
-  font-weight: 500;
-  transition: color 0.3s ease;
+    text-decoration: none;
+    color: var(--text-color);
+    font-weight: 500;
+    transition: color 0.3s ease;
 }
 
 .app-header nav a:hover {
-  color: var(--primary-color);
+    color: var(--primary-color);
 }
 
 /* Base button styles from root vars */
 .btn-primary {
-  background-color: var(--primary-color);
-  color: var(--white-color);
-  border: none;
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+    background-color: var(--primary-color);
+    color: var(--white-color);
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
 }
 .btn-primary:hover {
-  background-color: #1e9d4e;
+    background-color: #1e9d4e;
 }
 
-
 /* Specific Green Text Link (for Login) */
 .link-green {
     color: var(--green-button-bg) !important;
@@ -169,18 +169,18 @@ main {
 }
 
 .btn-secondary {
-  background-color: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-color);
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+    background-color: transparent;
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
 .btn-secondary:hover {
-  background-color: #f0f0f0;
-  border-color: #c0c0c0;
-  color: #555;
+    background-color: #f0f0f0;
+    border-color: #c0c0c0;
+    color: #555;
 }
 
 
@@ -191,37 +191,38 @@ main {
 .form-group { margin-bottom: 1.5rem; }
 .form-group label { display: block; margin-bottom: 0.5rem; }
 .form-group input {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  background-color: #fafafa;
-  box-sizing: border-box;
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background-color: #fafafa;
+    box-sizing: border-box;
 }
 .forgot-password { text-align: right; margin-bottom: 1rem; font-size: 0.9em;}
 .error-message { color: red; text-align: center; margin-bottom: 1rem; }
 .auth-form .btn-primary { width: 100%; padding: 0.75rem; }
 
-/* --- Chat Layout --- */
+/* --- Chat Layout (from chatinterface.css, merged and adapted) --- */
 .chat-layout {
-  display: flex;
-  width: 100%;
-  /* This is crucial: take remaining height after header */
-  height: calc(100% - var(--header-height));
+    display: flex;
+    width: 100%;
+    /* Use calc to account for header height, as body has overflow:hidden */
+    height: calc(100% - var(--header-height));
+    overflow: hidden; /* Important for containing sidebar and main chat content */
 }
 
 /* Sidebar Styling */
 .sidebar {
-  width: 260px;
-  background-color: #f9fafb;
-  padding: 1rem;
-  border-right: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between; /* Pushes content to top and bottom */
-  flex-shrink: 0;
-  height: 100%; /* Make sidebar take full height of chat-layout */
-  box-sizing: border-box;
+    width: 260px;
+    background-color: #f9fafb;
+    padding: 1rem;
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; /* Pushes content to top and bottom */
+    flex-shrink: 0;
+    height: 100%; /* Make sidebar take full height of chat-layout */
+    box-sizing: border-box;
 }
 
 /* sidebar-top now contains only the new chat button */
@@ -232,22 +233,22 @@ main {
 
 /* New Chat Button Styling */
 .new-chat-btn {
-  width: 100%;
-  padding: 0.75rem;
-  border: none;
-  border-radius: 6px;
-  background-color: var(--dark-green-text);
-  color: var(--white-color);
-  cursor: pointer;
-  text-align: left;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  transition: background-color 0.3s ease;
-  margin-bottom: 1rem; /* Space below the button */
+    width: 100%;
+    padding: 0.75rem;
+    border: none;
+    border-radius: 6px;
+    background-color: var(--dark-green-text);
+    color: var(--white-color);
+    cursor: pointer;
+    text-align: left;
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: background-color 0.3s ease;
+    margin-bottom: 1rem; /* Space below the button */
 }
 .new-chat-btn:hover {
     background-color: var(--green-button-hover-bg);
@@ -268,20 +269,20 @@ main {
 
 /* Styling for History and Settings links */
 .sidebar-nav-link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  text-decoration: none;
-  color: var(--dark-green-text);
-  border-radius: 6px;
-  background: transparent; /* Explicitly remove background */
-  border: none;
-  width: 100%;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  transition: background-color 0.3s ease, color 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    text-decoration: none;
+    color: var(--dark-green-text);
+    border-radius: 6px;
+    background: transparent; /* Explicitly remove background */
+    border: none;
+    width: 100%;
+    font-weight: 500;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 .sidebar-nav-link:hover {
     background-color: transparent; /* Ensure no background on hover */
@@ -292,97 +293,136 @@ main {
     color: var(--dark-green-text); /* Keep dark green text when active */
 }
 
-/* Main chat content area */
+/* Main chat content area (from chatinterface.css, merged) */
 .chat-main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--white-color);
-  height: 100%;
-  box-sizing: border-box;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; /* From chatinterface.css */
+    background-color: #f9f9f9; /* From chatinterface.css */
+    height: 100%; /* Ensures it takes full height of parent */
+    box-sizing: border-box; /* Include padding in height calculation */
+    overflow-y: auto; /* Enable scrolling for main content like history page */
 }
 
+/* Chat Messages Area (from chatinterface.css, merged) */
 .chat-messages {
-  flex-grow: 1;
-  padding: 2rem;
-  overflow-y: auto; /* Keep scrollbar ONLY for chat conversation */
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+    flex-grow: 1;
+    overflow-y: auto; /* Enable scrolling for messages */
+    padding: 20px; /* From chatinterface.css */
+    display: flex;
+    flex-direction: column;
+    gap: 15px; /* Spacing between message wrappers from chatinterface.css */
 }
 
+/* Empty Chat Placeholder (from chatinterface.css, merged) */
+.empty-chat-placeholder {
+    text-align: center;
+    padding: 50px; /* From chatinterface.css */
+    color: #666; /* From chatinterface.css */
+    flex-grow: 1; /* Pushes content to the bottom if few messages */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.empty-chat-placeholder h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    color: #333;
+}
+.empty-chat-placeholder p {
+    font-size: 1.1em;
+    line-height: 1.6;
+}
+.no-history-message { /* New style for when history is empty */
+    text-align: center;
+    color: #999;
+    font-style: italic;
+    margin-top: 20px;
+}
+
+
+/* Message Wrapper (contains avatar and bubble) (from chatinterface.css, merged) */
 .message-wrapper {
-  display: flex;
-  align-items: flex-start;
-  max-width: 100%;
+    display: flex; /* Use flexbox for layout of avatar and bubble */
+    align-items: flex-start; /* Align items to the top */
+    max-width: 100%; /* Ensure it doesn't overflow */
 }
+
+/* Specific styles for user messages (align to right) */
 .message-wrapper.user {
-    justify-content: flex-end;
-    flex-direction: row-reverse;
+    justify-content: flex-end; /* Push user messages to the right */
+    flex-direction: row-reverse; /* Put avatar on the right for user */
 }
-.message-wrapper.assistant { justify-content: flex-start; }
 
-/* Avatar specific styles */
+/* Chat Avatar Styling (from chatinterface.css, merged) */
 .chat-avatar {
-    width: 40px;
-    height: 40px;
-    min-width: 40px;
+    font-size: 24px; /* Still useful for user emoji */
+    padding: 8px;
     border-radius: 50%;
+    background-color: #e0e0e0; /* Default background for avatar circle */
+    min-width: 40px;
+    height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #e0e0e0;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    overflow: hidden;
-    flex-shrink: 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* Margins for spacing */
+    margin-right: 10px; /* Default for assistant avatar */
+    overflow: hidden; /* Crucial to clip image if it's larger than the circle */
 }
 
-.user-icon-placeholder {
-    font-size: 24px;
-    color: #666;
-}
-
-.message-wrapper.assistant .chat-avatar {
-    margin-right: 10px;
-}
+/* Adjust margin for user avatar (since row-reverse) */
 .message-wrapper.user .chat-avatar {
     margin-left: 10px;
+    margin-right: 0;
 }
 
+/* Style for the actual image inside the avatar div */
 .chat-avatar .avatar-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 50%;
+    width: 100%; /* Make image fill the avatar div */
+    height: 100%; /* Make image fill the avatar div */
+    object-fit: cover; /* Crop and cover the area without distortion */
+    border-radius: 50%; /* Ensure the image itself is also rounded */
 }
 
+/* Message Bubble Styling (from chatinterface.css, merged) */
 .message-bubble {
-  padding: 0.75rem 1rem;
-  border-radius: 12px;
-  max-width: 70%;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
+    background-color: #f0f0f0;
+    padding: 12px 18px;
+    border-radius: 20px;
+    max-width: 70%; /* Limit message width */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
-.message-wrapper.user .message-bubble {
-  background-color: var(--primary-color);
-  color: var(--white-color);
-  border-bottom-right-radius: 4px;
+    /* --- THE KEY CSS PROPERTY FOR NEWLINES --- */
+    white-space: pre-wrap; /* This will make '\n' characters create new lines */
+    /* --- END KEY CSS PROPERTY --- */
+
+    word-break: break-word; /* Ensure long words break within the bubble */
+    overflow-wrap: break-word; /* Modern equivalent */
 }
+
+/* Specific styling for assistant bubbles */
 .message-wrapper.assistant .message-bubble {
-  background-color: #f3f4f6;
-  color: var(--text-color);
-  border-bottom-left-radius: 4px;
+    background-color: #e6f7ff; /* Light blue for assistant */
+    border-bottom-left-radius: 5px; /* Pointy bottom-left for assistant */
+    margin-right: auto; /* Push to left, next to sidebar */
+}
+
+/* Specific styling for user bubbles */
+.message-wrapper.user .message-bubble {
+    background-color: #d1e7dd; /* Light green for user */
+    border-bottom-right-radius: 5px; /* Pointy bottom-right for user */
+    margin-left: auto; /* Push to right */
 }
 
-/* Blinking cursor for streaming */
+/* Blinking Cursor */
 .blinking-cursor {
-    display: inline-block;
-    width: 0.5em;
-    background-color: var(--text-color);
     animation: blink 1s step-end infinite;
+    display: inline-block; /* Essential for it to be visible next to text */
+    width: 0.5em; /* Give it a small width */
+    background-color: var(--text-color); /* From original index.css */
 }
 
 @keyframes blink {
@@ -391,71 +431,236 @@ main {
 }
 
 
+/* Chat Input Area (from chatinterface.css, merged) */
 .chat-input-area {
-  padding: 1rem 2rem;
-  border-top: 1px solid var(--border-color);
-  background-color: var(--white-color);
-}
-.chat-form { display: flex; gap: 0.5rem; }
-.chat-form input {
-  flex-grow: 1;
-  padding: 0.75rem;
-  border-radius: 6px;
-  border: 1px solid var(--border-color);
-  background-color: #fafafa;
-  box-sizing: border-box;
-  outline: none;
+    padding: 20px; /* From chatinterface.css */
+    border-top: 1px solid #eee; /* From chatinterface.css */
+    background-color: #fff; /* From chatinterface.css */
 }
+
+.chat-form {
+    display: flex;
+    gap: 10px; /* From chatinterface.css */
+}
+
+.chat-form input[type="text"] {
+    flex-grow: 1;
+    padding: 12px; /* From chatinterface.css */
+    border: 1px solid #ccc; /* From chatinterface.css */
+    border-radius: 25px; /* From chatinterface.css */
+    font-size: 16px; /* From chatinterface.css */
+    outline: none;
+    background-color: #fafafa; /* Using existing variable if possible, else direct value */
+}
+
 .chat-form button {
-  background-color: var(--primary-color);
-  color: var(--white-color);
-  border: none;
-  border-radius: 6px;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+    padding: 12px 20px; /* From chatinterface.css */
+    background-color: #007bff; /* From chatinterface.css */
+    color: white; /* From chatinterface.css */
+    border: none;
+    border-radius: 25px; /* From chatinterface.css */
+    cursor: pointer;
+    font-size: 16px; /* From chatinterface.css */
+    transition: background-color 0.2s;
+    /* Using primary-color for consistency */
+    background-color: var(--primary-color);
+    color: var(--white-color);
+    border-radius: 6px; /* Adjusted to match other buttons */
+    padding: 0.75rem 1rem; /* Adjusted to match other buttons */
 }
-.chat-form button:hover {
-  background-color: #1e9d4e;
+
+.chat-form button:hover:not(:disabled) {
+    background-color: #0056b3; /* Darker blue from chatinterface.css */
+    /* Using hover color from primary-color for consistency */
+    background-color: #1e9d4e;
 }
 
-.empty-chat-placeholder {
-  text-align: center;
-  margin-top: 20%;
-  color: #9ca3af;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+.chat-form button:disabled {
+    background-color: #a0a0a0; /* From chatinterface.css */
+    cursor: not-allowed;
 }
-.empty-chat-placeholder h1 {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-    color: #333;
+
+/* Voice input specific styles */
+.voice-input-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
-.empty-chat-placeholder p {
-    font-size: 1.1em;
-    line-height: 1.6;
+
+.voice-record-btn {
+    padding: 0.5rem;
+    border-radius: 50%;
+    background-color: #ef4444; /* Red color for record button */
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px; /* Make it a perfect circle */
+    height: 40px;
+    transition: background-color 0.2s;
+}
+
+.voice-record-btn:hover:not(:disabled) {
+    background-color: #dc2626; /* Darker red on hover */
+}
+
+.voice-record-btn.recording {
+    background-color: #f87171; /* Lighter red when recording */
+    animation: pulse 1.5s infinite; /* Add a pulse animation when recording */
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); }
+    70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(248, 113, 113, 0); }
+    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
+}
+
+.sound-wave {
+    flex-grow: 1; /* Allow visualizer to take available space */
+    height: 40px; /* Adjust height as needed */
+    margin-left: 0.5rem;
+}
+
+
+/* --- History Page Styles (from history.css, merged and adapted) --- */
+.history-title {
+    color: var(--text-color); /* From history.css, using variable */
+    margin-bottom: 20px;
+    font-size: 24px; /* From history.css */
+    padding: 0 20px; /* Added padding to align with chat-messages */
+    margin-top: 20px; /* Added margin-top */
+}
+
+.history-list {
+    list-style: none;
+    padding: 0 20px; /* Added padding to align with chat-messages */
 }
 
-/* --- History Page --- */
-.history-title { padding: 0 2rem; margin-top: 2rem; margin-bottom: 1.5rem; color: var(--text-color); }
-.history-list { list-style: none; padding: 0 2rem; }
 .history-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  border-bottom: 1px solid var(--border-color);
-  cursor: pointer;
-  transition: background-color 0.3s ease;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px 20px; /* From history.css */
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
 }
+
 .history-item:hover {
-    background-color: #f9f9f9;
+    background-color: #e9ecef; /* From history.css */
+}
+
+.history-icon {
+    font-size: 24px;
+    margin-right: 15px;
+}
+
+.history-details {
+    flex-grow: 1;
+}
+
+.history-prompt {
+    font-weight: bold; /* From history.css */
+    color: #555; /* From history.css */
+    margin-bottom: 5px;
+}
+
+.history-date {
+    font-size: 0.85em; /* From history.css */
+    color: #888; /* From history.css */
+}
+
+/* Conversation View Specific Styles (from history.css, merged) */
+.conversation-view {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.back-button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-bottom: 15px;
+    font-size: 16px;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.back-button:hover {
+    background-color: #0056b3;
+}
+
+.conversation-title {
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 20px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+}
+
+.messages-list {
+    max-height: 500px; /* Limit height and enable scrolling for messages */
+    overflow-y: auto;
+    padding-right: 10px; /* For scrollbar spacing */
+    display: flex;
+    flex-direction: column;
+}
+
+.message-item {
+    margin-bottom: 15px;
+    padding: 10px 15px;
+    border-radius: 8px;
+    max-width: 80%;
+    clear: both; /* Good for floating elements, though flexbox often handles this */
+}
+
+.message-item.user {
+    background-color: #dcf8c6; /* Light green for user messages */
+    align-self: flex-end; /* Align to the right in a flex container */
+    margin-left: auto; /* Push to the right */
+}
+
+.message-item.chatbot { /* Using .chatbot from history.css, convert to .assistant where needed in JSX */
+    background-color: #e2e2e2; /* Light grey for chatbot messages */
+    align-self: flex-start; /* Align to the left */
+    margin-right: auto; /* Push to the left */
+}
+
+.message-sender {
+    font-weight: bold;
+    margin-bottom: 5px;
+    font-size: 0.9em;
+}
+
+.message-item.user .message-sender {
+    color: #3d8c1c; /* Darker green for user sender */
+}
+
+.message-item.chatbot .message-sender {
+    color: #555;
+}
+
+.message-content {
+    font-size: 1em;
+    line-height: 1.4;
+    word-wrap: break-word; /* Ensure long words wrap */
+    white-space: pre-wrap; /* Ensure newlines are respected in history view */
+}
+
+.message-timestamp {
+    font-size: 0.75em;
+    color: #999;
+    margin-top: 5px;
+    text-align: right;
 }
-.history-prompt { font-weight: 500; flex-grow: 1; }
-.history-date { font-size: 0.8rem; color: #6b7280; }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
@@ -464,6 +669,7 @@ main {
         align-items: flex-start;
         padding: 1rem;
         gap: 10px;
+        height: auto; /* Allow header to expand if content wraps */
     }
     .app-header nav {
         flex-wrap: wrap;
@@ -473,8 +679,8 @@ main {
     }
     .chat-layout {
         flex-direction: column;
-        /* On mobile, chat-layout height needs to account for header and horizontal sidebar */
-        height: calc(100% - var(--header-height) - var(--sidebar-height-mobile, 60px));
+        /* On mobile, sidebar goes horizontal, its height becomes auto */
+        height: calc(100% - var(--header-height)); /* No fixed sidebar height subtraction here */
     }
     .sidebar {
         width: 100%;
@@ -482,27 +688,46 @@ main {
         border-bottom: 1px solid var(--border-color);
         padding: 10px;
         flex-direction: row; /* Sidebar items in a row for mobile */
-        justify-content: center;
-        gap: 10px;
+        justify-content: space-around; /* Distribute items evenly */
+        align-items: center;
         height: auto; /* Allow sidebar height to be determined by content */
-        overflow-y: hidden; /* Hide sidebar scrollbar on mobile if it has one */
+        overflow-x: auto; /* Allow horizontal scrolling if items overflow */
+        overflow-y: hidden; /* Hide sidebar vertical scrollbar on mobile */
+    }
+    .sidebar-top {
+        flex-direction: row; /* Align new chat button correctly */
+        align-items: center;
+        margin-bottom: 0; /* No margin-bottom on mobile to keep things compact */
+        flex-grow: 1; /* Allow to take space for justify-content */
+        justify-content: flex-start; /* Push new chat button to left */
+        gap: 10px; /* Space between new chat and nav */
     }
     .new-chat-btn {
         width: auto;
         font-size: 0.9em;
         padding: 0.5rem 0.8rem;
+        margin-bottom: 0; /* Remove margin-bottom on mobile */
     }
-    .sidebar-nav {
-        margin-top: 0;
+    .sidebar-bottom {
+        margin-top: 0; /* Remove auto margin on mobile */
+        flex-direction: row; /* Nav links in a row */
+        gap: 10px;
+        flex-grow: 1; /* Allow sidebar-bottom to take space */
+        justify-content: flex-end; /* Push nav links to the right */
+    }
+    .sidebar-nav { /* Added this for mobile layout */
         display: flex;
+        flex-direction: row;
         gap: 10px;
     }
-    .sidebar-nav a, .sidebar-link {
+    .sidebar-nav-link {
         padding: 0.5rem;
         font-size: 0.9em;
+        flex-shrink: 0; /* Prevent links from shrinking too much */
     }
     .chat-main {
         height: 100%; /* Take remaining height from parent chat-layout */
+        overflow-y: auto; /* Allow chat content to scroll */
     }
     .chat-messages {
         padding: 1rem;
@@ -513,4 +738,51 @@ main {
     .chat-input-area {
         padding: 1rem;
     }
+
+    /* Adjustments for voice input on mobile if needed */
+    .chat-form {
+        flex-wrap: wrap; /* Allow input and buttons to wrap if screen is very small */
+    }
+    .chat-form input {
+        width: 100%; /* Take full width */
+        margin-bottom: 0.5rem; /* Space below input if it wraps */
+    }
+    .chat-form button {
+        flex-grow: 1; /* Allow send button to take available space */
+    }
+    .voice-input-container {
+        width: 100%;
+        justify-content: center;
+    }
+    .voice-record-btn {
+        flex-shrink: 0;
+    }
+    .sound-wave {
+        flex-grow: 1;
+        max-width: calc(100% - 60px); /* Adjust based on button size */
+    }
+
+    /* Mobile adjustments for History Page */
+    .history-title {
+        padding: 0 1rem;
+    }
+    .history-list {
+        padding: 0 1rem;
+    }
+    .history-item {
+        flex-direction: column; /* Stack details vertically on mobile */
+        align-items: flex-start;
+        padding: 0.8rem;
+    }
+    .history-details {
+        width: 100%; /* Take full width when stacked */
+    }
+    .history-icon {
+        margin-right: 0;
+        margin-bottom: 0.5rem; /* Space below icon */
+    }
+    .history-date {
+        text-align: left; /* Align date to left when stacked */
+    }
+
 }