Upgrade UI

frontend/src/App.js

@@ -3,7 +3,7 @@ import { Toaster } from 'react-hot-toast';
 import ChatInterface from './components/ChatInterface';
 import Sidebar from './components/Sidebar';
 import WelcomeScreen from './components/WelcomeScreen';
-import { SunIcon, MoonIcon, HomeIcon } from '@heroicons/react/24/outline';
+import { SunIcon, MoonIcon, HomeIcon, Bars3Icon } from '@heroicons/react/24/outline';
 import ConversationStorage from './utils/conversationStorage';
 
 function App() {
@@ -104,66 +104,104 @@ function App() {
         ? 'bg-gray-900 text-white' 
         : 'bg-gray-50 text-gray-900'
     }`}>
-      {/* Header */}
+      {/* Header - Mobile optimized */}
       <header className={`fixed top-0 left-0 right-0 z-50 ${
         darkMode 
           ? 'bg-gray-800/95 border-gray-700' 
           : 'bg-white/95 border-gray-200'
-      } backdrop-blur-sm border-b`}>
-        <div className="flex items-center justify-between px-4 py-3">
-          <div className="flex items-center space-x-4">
+      } backdrop-blur-sm border-b shadow-sm`}>
+        <div className="flex items-center justify-between px-3 md:px-4 py-3 md:py-3">
+          {/* Left side - Menu and Title */}
+          <div className="flex items-center space-x-2 md:space-x-4 flex-1 min-w-0">
+            {/* Hamburger Menu Button - Larger touch target */}
             <button
               onClick={() => setSidebarOpen(!sidebarOpen)}
-              className={`p-2 rounded-lg transition-colors ${
+              className={`p-2 md:p-2 rounded-lg md:rounded-xl transition-all duration-200 touch-manipulation ${
                 darkMode
-                  ? 'hover:bg-gray-700 text-gray-300'
-                  : 'hover:bg-gray-100 text-gray-600'
-              }`}
+                  ? 'hover:bg-gray-700 active:bg-gray-600 text-gray-300 hover:text-white'
+                  : 'hover:bg-gray-100 active:bg-gray-200 text-gray-600 hover:text-gray-900'
+              } min-w-[44px] min-h-[44px] md:min-w-[40px] md:min-h-[40px] flex items-center justify-center`}
+              title="Toggle menu"
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              </svg>
+              <Bars3Icon className="w-6 h-6 md:w-5 md:h-5" />
             </button>
             
+            {/* App Title - Mobile optimized */}
             <button
               onClick={goBackToHome}
-              className="text-lg font-semibold gradient-text hover:opacity-80 transition-opacity"
+              className="flex-1 min-w-0 text-left group"
             >
-              CA Study Assistant
+              <h1 className="text-lg md:text-xl font-bold gradient-text hover:opacity-80 transition-opacity truncate">
+                CA Study Assistant
+              </h1>
+              {/* Subtitle for larger screens */}
+              <p className={`text-xs hidden md:block ${
+                darkMode ? 'text-gray-400' : 'text-gray-500'
+              }`}>
+                AI-powered study companion
+              </p>
             </button>
           </div>
 
-          <div className="flex items-center space-x-2">
+          {/* Right side - Action buttons */}
+          <div className="flex items-center space-x-1 md:space-x-2 flex-shrink-0">
+            {/* Home Button - Only show in chat mode */}
             {chatStarted && (
               <button
                 onClick={goBackToHome}
-                className={`p-2 rounded-lg transition-colors ${
+                className={`p-2 md:p-2 rounded-lg md:rounded-xl transition-all duration-200 touch-manipulation ${
                   darkMode
-                    ? 'hover:bg-gray-700 text-gray-300'
-                    : 'hover:bg-gray-100 text-gray-600'
-                }`}
+                    ? 'hover:bg-gray-700 active:bg-gray-600 text-gray-300 hover:text-white'
+                    : 'hover:bg-gray-100 active:bg-gray-200 text-gray-600 hover:text-gray-900'
+                } min-w-[44px] min-h-[44px] md:min-w-[40px] md:min-h-[40px] flex items-center justify-center`}
                 title="Back to Home"
               >
-                <HomeIcon className="w-5 h-5" />
+                <HomeIcon className="w-6 h-6 md:w-5 md:h-5" />
               </button>
             )}
             
+            {/* Dark Mode Toggle - Larger touch target */}
             <button
               onClick={toggleDarkMode}
-              className={`p-2 rounded-lg transition-colors ${
+              className={`p-2 md:p-2 rounded-lg md:rounded-xl transition-all duration-200 touch-manipulation ${
                 darkMode
-                  ? 'hover:bg-gray-700 text-gray-300'
-                  : 'hover:bg-gray-100 text-gray-600'
-              }`}
+                  ? 'hover:bg-gray-700 active:bg-gray-600 text-gray-300 hover:text-yellow-400'
+                  : 'hover:bg-gray-100 active:bg-gray-200 text-gray-600 hover:text-yellow-600'
+              } min-w-[44px] min-h-[44px] md:min-w-[40px] md:min-h-[40px] flex items-center justify-center`}
+              title={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
             >
               {darkMode ? (
-                <SunIcon className="w-5 h-5" />
+                <SunIcon className="w-6 h-6 md:w-5 md:h-5" />
               ) : (
-                <MoonIcon className="w-5 h-5" />
+                <MoonIcon className="w-6 h-6 md:w-5 md:h-5" />
               )}
             </button>
+
+            {/* Conversation count badge - Mobile optimized */}
+            {conversations.length > 0 && (
+              <div className={`hidden sm:flex items-center px-2 md:px-3 py-1 md:py-1.5 rounded-full text-xs md:text-sm font-medium ${
+                darkMode 
+                  ? 'bg-primary-900/30 text-primary-300 border border-primary-700/50' 
+                  : 'bg-primary-50 text-primary-700 border border-primary-200'
+              }`}>
+                {conversations.length} chat{conversations.length !== 1 ? 's' : ''}
+              </div>
+            )}
           </div>
         </div>
+
+        {/* Mobile conversation indicator - Shows only on small screens */}
+        {conversations.length > 0 && (
+          <div className="sm:hidden px-3 pb-2">
+            <div className={`flex items-center justify-center px-3 py-1 rounded-full text-xs font-medium ${
+              darkMode 
+                ? 'bg-primary-900/30 text-primary-300 border border-primary-700/50' 
+                : 'bg-primary-50 text-primary-700 border border-primary-200'
+            }`}>
+              📚 {conversations.length} conversation{conversations.length !== 1 ? 's' : ''} saved
+            </div>
+          </div>
+        )}
       </header>
 
       {/* Sidebar */}
@@ -179,10 +217,10 @@ function App() {
         darkMode={darkMode}
       />
 
-      {/* Main Content */}
+      {/* Main Content - Mobile optimized */}
       <main className={`transition-all duration-200 ${
-        sidebarOpen ? 'md:ml-64' : 'ml-0'
-      } pt-16`}>
+        sidebarOpen ? 'md:ml-80' : 'ml-0'
+      } pt-16 md:pt-20 min-h-screen`}>
         {chatStarted ? (
           <ChatInterface
             conversationId={activeConversationId}
@@ -199,18 +237,86 @@ function App() {
         )}
       </main>
 
-      {/* Toast notifications */}
+      {/* Toast notifications - Mobile optimized */}
       <Toaster
-        position="top-right"
+        position="top-center"
+        containerStyle={{
+          top: '80px', // Account for header height
+        }}
         toastOptions={{
           duration: 4000,
           style: {
             background: darkMode ? '#374151' : '#ffffff',
             color: darkMode ? '#f9fafb' : '#111827',
             border: darkMode ? '1px solid #4b5563' : '1px solid #e5e7eb',
+            borderRadius: '12px',
+            padding: '12px 16px',
+            fontSize: '14px',
+            maxWidth: '90vw',
+            wordBreak: 'break-word',
+          },
+          success: {
+            iconTheme: {
+              primary: '#10b981',
+              secondary: '#ffffff',
+            },
+          },
+          error: {
+            iconTheme: {
+              primary: '#ef4444',
+              secondary: '#ffffff',
+            },
           },
         }}
       />
+
+      {/* Global loading overlay for mobile (if needed) */}
+      {/* This can be used for app-wide loading states */}
+      
+      {/* Safe area spacing for mobile devices */}
+      <style jsx global>{`
+        @supports (padding: max(0px)) {
+          .pb-safe {
+            padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+          }
+        }
+        
+        /* Prevent zoom on double-tap for iOS */
+        button, input, select, textarea {
+          touch-action: manipulation;
+        }
+        
+        /* Improve scrolling on mobile */
+        * {
+          -webkit-overflow-scrolling: touch;
+        }
+        
+        /* Custom gradient text */
+        .gradient-text {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+        }
+        
+        /* Mobile-specific touch improvements */
+        @media (max-width: 768px) {
+          /* Increase minimum touch target size */
+          button, [role="button"] {
+            min-height: 44px;
+            min-width: 44px;
+          }
+          
+          /* Reduce motion for users who prefer it */
+          @media (prefers-reduced-motion: reduce) {
+            * {
+              animation-duration: 0.01ms !important;
+              animation-iteration-count: 1 !important;
+              transition-duration: 0.01ms !important;
+            }
+          }
+        }
+      `}</style>
     </div>
   );
 }

frontend/src/components/ChatInterface.js

@@ -112,40 +112,40 @@ const ChatInterface = ({ conversationId, conversations, setConversations, darkMo
 
   return (
     <div className="flex flex-col h-screen">
-      {/* Messages Container */}
-      <div className="flex-1 overflow-y-auto px-4 py-6">
-        <div className="max-w-3xl mx-auto">
-          {/* Empty State */}
+      {/* Messages Container - Mobile optimized */}
+      <div className="flex-1 overflow-y-auto px-3 md:px-4 py-4 md:py-6">
+        <div className="max-w-4xl mx-auto">
+          {/* Empty State - Mobile optimized */}
           {messages.length === 0 && !isLoading && (
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
-              className="flex flex-col items-center justify-center min-h-[60vh] text-center"
+              className="flex flex-col items-center justify-center min-h-[50vh] md:min-h-[60vh] text-center px-4"
             >
-              {/* CA Assistant Avatar */}
+              {/* CA Assistant Avatar - Larger on mobile */}
               <motion.div
                 initial={{ scale: 0.8 }}
                 animate={{ scale: 1 }}
                 transition={{ duration: 0.5, delay: 0.2 }}
-                className={`w-20 h-20 rounded-full flex items-center justify-center mb-6 ${
+                className={`w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center mb-4 md:mb-6 ${
                   darkMode 
                     ? 'bg-gradient-to-br from-primary-600 to-purple-600' 
                     : 'bg-gradient-to-br from-primary-500 to-purple-500'
                 } shadow-lg`}
               >
-                <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="w-8 h-8 md:w-10 md:h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                     d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                 </svg>
               </motion.div>
 
-              {/* Welcome Message */}
+              {/* Welcome Message - Mobile optimized */}
               <motion.h2 
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.4 }}
-                className="text-2xl md:text-3xl font-bold mb-3 gradient-text"
+                className="text-xl md:text-2xl lg:text-3xl font-bold mb-2 md:mb-3 gradient-text text-center"
               >
                 Hello! I'm your CA Study Assistant
               </motion.h2>
@@ -154,26 +154,27 @@ const ChatInterface = ({ conversationId, conversations, setConversations, darkMo
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: 0.5 }}
-                className={`text-lg mb-8 ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}
+                className={`text-base md:text-lg mb-6 md:mb-8 px-2 ${darkMode ? 'text-gray-300' : 'text-gray-600'} text-center max-w-md`}
               >
                 I'm here to help you with accounting, finance, taxation, and auditing concepts. 
                 Ask me anything or upload your study materials!
               </motion.p>
 
-              {/* Quick Start Suggestions */}
+              {/* Quick Start Suggestions - Mobile optimized */}
               <motion.div
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.6 }}
-                className="w-full max-w-2xl"
+                className="w-full max-w-lg md:max-w-2xl"
               >
-                <h3 className={`text-sm font-semibold mb-4 ${
+                <h3 className={`text-xs md:text-sm font-semibold mb-3 md:mb-4 ${
                   darkMode ? 'text-gray-400' : 'text-gray-500'
-                }`}>
+                } text-center`}>
                   Try asking me about:
                 </h3>
                 
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {/* Mobile: Single column, Desktop: Two columns */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
                   {[
                     { icon: "📊", text: "Financial statement analysis", query: "Explain financial statement analysis" },
                     { icon: "💰", text: "Depreciation methods", query: "What are different depreciation methods?" },
@@ -190,41 +191,41 @@ const ChatInterface = ({ conversationId, conversations, setConversations, darkMo
                       whileHover={{ scale: 1.02, y: -2 }}
                       whileTap={{ scale: 0.98 }}
                       onClick={() => setMessage(suggestion.query)}
-                      className={`flex items-center p-4 rounded-xl text-left transition-all ${
+                      className={`flex items-center p-3 md:p-4 rounded-lg md:rounded-xl text-left transition-all touch-manipulation ${
                         darkMode
-                          ? 'bg-gray-800 hover:bg-gray-700 border-gray-700 text-gray-300'
-                          : 'bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-700'
-                      } border hover:border-primary-300 hover:shadow-md`}
+                          ? 'bg-gray-800 hover:bg-gray-700 active:bg-gray-600 border-gray-700 text-gray-300'
+                          : 'bg-gray-50 hover:bg-gray-100 active:bg-gray-200 border-gray-200 text-gray-700'
+                      } border hover:border-primary-300 hover:shadow-md active:shadow-lg`}
                     >
-                      <span className="text-2xl mr-3">{suggestion.icon}</span>
-                      <span className="font-medium">{suggestion.text}</span>
+                      <span className="text-xl md:text-2xl mr-2 md:mr-3 flex-shrink-0">{suggestion.icon}</span>
+                      <span className="font-medium text-sm md:text-base">{suggestion.text}</span>
                     </motion.button>
                   ))}
                 </div>
               </motion.div>
 
-              {/* Upload Reminder */}
+              {/* Upload Reminder - Mobile optimized */}
               <motion.div
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 transition={{ delay: 1.2 }}
-                className={`mt-8 p-4 rounded-xl ${
+                className={`mt-6 md:mt-8 p-3 md:p-4 rounded-lg md:rounded-xl max-w-md ${
                   darkMode 
                     ? 'bg-primary-900/20 border-primary-700/30' 
                     : 'bg-primary-50 border-primary-200'
                 } border`}
               >
                 <div className="flex items-center justify-center">
-                  <svg className={`w-5 h-5 mr-2 ${
+                  <svg className={`w-4 h-4 md:w-5 md:h-5 mr-2 flex-shrink-0 ${
                     darkMode ? 'text-primary-400' : 'text-primary-600'
                   }`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                       d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                   </svg>
-                  <span className={`text-sm ${
+                  <span className={`text-xs md:text-sm text-center ${
                     darkMode ? 'text-primary-300' : 'text-primary-700'
                   }`}>
-                    💡 Upload your study materials for more specific and detailed answers
+                    💡 Upload your study materials for more specific answers
                   </span>
                 </div>
               </motion.div>
@@ -249,118 +250,96 @@ const ChatInterface = ({ conversationId, conversations, setConversations, darkMo
         </div>
       </div>
 
-      {/* File Uploader Modal */}
+      {/* File Uploader Modal - Mobile optimized */}
       <AnimatePresence>
         {showFileUploader && (
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+            className="fixed inset-0 bg-black bg-opacity-50 flex items-end md:items-center justify-center z-50 p-0 md:p-4"
             onClick={() => setShowFileUploader(false)}
           >
             <motion.div
-              initial={{ scale: 0.9, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.9, opacity: 0 }}
+              initial={{ y: '100%', opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: '100%', opacity: 0 }}
               onClick={(e) => e.stopPropagation()}
-              className={`max-w-md w-full p-6 rounded-2xl ${
+              className={`w-full max-w-md md:max-w-lg p-4 md:p-6 rounded-t-3xl md:rounded-2xl ${
                 darkMode ? 'bg-gray-800' : 'bg-white'
-              } shadow-2xl`}
+              } shadow-2xl max-h-[80vh] overflow-y-auto`}
             >
-              <h3 className="text-lg font-semibold mb-4">Upload Document</h3>
+              <h3 className="text-lg md:text-xl font-semibold mb-4 text-center md:text-left">Upload Document</h3>
               <FileUploader darkMode={darkMode} onClose={() => setShowFileUploader(false)} />
             </motion.div>
           </motion.div>
         )}
       </AnimatePresence>
 
-      {/* Input Area */}
+      {/* Input Area - Mobile-first optimized */}
       <div className={`border-t ${
         darkMode ? 'border-gray-700/50 bg-gray-900/95' : 'border-gray-200/50 bg-white/95'
-      } backdrop-blur-sm p-6`}>
-        <div className="max-w-3xl mx-auto">
+      } backdrop-blur-sm p-3 md:p-6 pb-safe`}>
+        <div className="max-w-4xl mx-auto">
           <form onSubmit={handleSubmit} className="relative">
-            {/* Enhanced Input Container */}
-            <div className={`relative overflow-hidden rounded-2xl border-2 transition-all duration-300 ${
+            {/* Mobile-optimized Input Container */}
+            <div className={`relative overflow-hidden rounded-2xl md:rounded-3xl border-2 transition-all duration-300 ${
               darkMode 
                 ? 'bg-gradient-to-br from-gray-800 to-gray-900 border-gray-600 focus-within:border-primary-500 focus-within:from-gray-700 focus-within:to-gray-800' 
                 : 'bg-gradient-to-br from-white to-gray-50 border-gray-300 focus-within:border-primary-500 focus-within:from-blue-50 focus-within:to-white'
-            } focus-within:ring-4 focus-within:ring-primary-500/20 shadow-xl hover:shadow-2xl focus-within:shadow-2xl`}>
+            } focus-within:ring-4 focus-within:ring-primary-500/20 shadow-lg md:shadow-xl hover:shadow-xl md:hover:shadow-2xl focus-within:shadow-xl md:focus-within:shadow-2xl`}>
               
-              {/* Subtle Inner Glow */}
-              <div className={`absolute inset-0 opacity-0 focus-within:opacity-100 transition-opacity duration-300 ${
-                darkMode 
-                  ? 'bg-gradient-to-br from-primary-900/20 to-purple-900/20' 
-                  : 'bg-gradient-to-br from-primary-50/50 to-purple-50/50'
-              }`} />
-              
-              {/* Input Content */}
-              <div className="relative flex items-end space-x-4 p-4">
-                {/* File Upload Button */}
+              {/* Input Content - Mobile optimized */}
+              <div className="relative flex items-end space-x-2 md:space-x-4 p-3 md:p-4">
+                {/* File Upload Button - Larger touch target */}
                 <motion.button
                   type="button"
                   whileHover={{ scale: 1.05 }}
                   whileTap={{ scale: 0.95 }}
                   onClick={() => setShowFileUploader(true)}
-                  className={`flex-shrink-0 p-3 rounded-xl transition-all duration-200 ${
+                  className={`flex-shrink-0 p-3 md:p-3 rounded-xl md:rounded-xl transition-all duration-200 touch-manipulation ${
                     darkMode
-                      ? 'hover:bg-gray-700/70 text-gray-400 hover:text-primary-400 hover:shadow-lg'
-                      : 'hover:bg-gray-100/70 text-gray-500 hover:text-primary-600 hover:shadow-md'
-                  } relative group backdrop-blur-sm`}
+                      ? 'hover:bg-gray-700/70 active:bg-gray-600/70 text-gray-400 hover:text-primary-400'
+                      : 'hover:bg-gray-100/70 active:bg-gray-200/70 text-gray-500 hover:text-primary-600'
+                  } relative group backdrop-blur-sm min-h-[44px] min-w-[44px] flex items-center justify-center`}
                   title="Upload document"
                 >
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg className="w-6 h-6 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
                       d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                   </svg>
-                  
-                  {/* Enhanced Tooltip */}
-                  <div className={`absolute -top-14 left-1/2 transform -translate-x-1/2 px-3 py-2 rounded-lg text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all duration-200 ${
-                    darkMode ? 'bg-gray-800 text-white shadow-xl border border-gray-700' : 'bg-gray-900 text-white shadow-xl'
-                  }`}>
-                    Upload documents
-                    <div className={`absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent ${
-                      darkMode ? 'border-t-gray-800' : 'border-t-gray-900'
-                    }`} />
-                  </div>
                 </motion.button>
 
-                {/* Enhanced Text Input */}
+                {/* Text Input - Mobile optimized */}
                 <div className="flex-1 relative">
                   <textarea
                     ref={textareaRef}
                     value={message}
                     onChange={(e) => setMessage(e.target.value)}
                     onKeyDown={handleKeyDown}
-                    placeholder={messages.length === 0 ? "Hi! Ask me about accounting, finance, taxation, or upload your study materials..." : "Ask a follow-up question..."}
-                    className={`w-full resize-none border-none outline-none bg-transparent py-3 px-2 text-base leading-relaxed ${
+                    placeholder={messages.length === 0 ? "Ask me about accounting, finance, taxation..." : "Ask a follow-up question..."}
+                    className={`w-full resize-none border-none outline-none bg-transparent py-3 md:py-3 px-2 text-base md:text-base leading-relaxed ${
                       darkMode ? 'text-white placeholder-gray-400' : 'text-gray-900 placeholder-gray-500'
-                    } placeholder:text-sm placeholder:leading-relaxed`}
+                    } placeholder:text-sm md:placeholder:text-sm placeholder:leading-relaxed touch-manipulation`}
                     rows={1}
                     disabled={isLoading}
                     style={{ 
                       minHeight: '24px',
-                      maxHeight: '120px',
+                      maxHeight: '100px',
                       lineHeight: '1.5'
                     }}
                   />
-                  
-                  {/* Input Focus Indicator */}
-                  <div className={`absolute left-0 bottom-0 h-0.5 w-0 bg-gradient-to-r from-primary-500 to-purple-500 transition-all duration-300 ${
-                    message.trim() ? 'w-full' : 'group-focus-within:w-full'
-                  }`} />
                 </div>
 
-                {/* Enhanced Send Button */}
+                {/* Send Button - Larger touch target */}
                 <motion.button
                   type="submit"
                   disabled={!message.trim() || isLoading}
                   whileHover={message.trim() && !isLoading ? { scale: 1.05 } : {}}
                   whileTap={message.trim() && !isLoading ? { scale: 0.95 } : {}}
-                  className={`flex-shrink-0 p-3 rounded-xl transition-all duration-200 relative group ${
+                  className={`flex-shrink-0 p-3 md:p-3 rounded-xl md:rounded-xl transition-all duration-200 relative group touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center ${
                     message.trim() && !isLoading
-                      ? 'bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white shadow-lg hover:shadow-xl'
+                      ? 'bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 active:from-primary-800 active:to-primary-900 text-white shadow-lg hover:shadow-xl active:shadow-2xl'
                       : darkMode
                         ? 'bg-gray-600/50 text-gray-400 hover:bg-gray-600/70'
                         : 'bg-gray-300/50 text-gray-500 hover:bg-gray-300/70'
@@ -369,31 +348,23 @@ const ChatInterface = ({ conversationId, conversations, setConversations, darkMo
                 >
                   {isLoading ? (
                     <div className="relative">
-                      <StopIcon className="w-5 h-5" />
+                      <StopIcon className="w-6 h-6 md:w-5 md:h-5" />
                       <div className="absolute inset-0 border-2 border-white border-t-transparent rounded-full animate-spin opacity-50"></div>
                     </div>
                   ) : (
-                    <PaperAirplaneIcon className="w-5 h-5" />
-                  )}
-                  
-                  {/* Enhanced Send Button Glow Effect */}
-                  {message.trim() && !isLoading && (
-                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-primary-600 to-primary-700 opacity-0 group-hover:opacity-30 transition-opacity duration-200 blur-lg -z-10"></div>
+                    <PaperAirplaneIcon className="w-6 h-6 md:w-5 md:h-5" />
                   )}
                 </motion.button>
               </div>
-              
-              {/* Bottom Border Accent */}
-              <div className={`absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-primary-500 to-transparent opacity-0 focus-within:opacity-100 transition-opacity duration-300`} />
             </div>
           </form>
 
-          {/* Footer Text */}
+          {/* Footer Text - Mobile optimized */}
           <motion.p 
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ delay: 0.3 }}
-            className={`text-xs text-center mt-3 ${
+            className={`text-xs text-center mt-2 md:mt-3 px-2 ${
               darkMode ? 'text-gray-500' : 'text-gray-400'
             }`}
           >

frontend/src/components/FileUploader.js

@@ -110,173 +110,284 @@ const FileUploader = ({ darkMode, onClose }) => {
   };
 
   return (
-    <div className="space-y-4">
-      {/* Dropzone */}
+    <div className="space-y-4 md:space-y-6">
+      {/* Dropzone - Mobile optimized */}
       <motion.div
         {...getRootProps()}
-        whileHover={{ scale: 1.02 }}
-        whileTap={{ scale: 0.98 }}
-        className={`file-drop-zone border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all ${
+        whileHover={{ scale: 1.01 }}
+        whileTap={{ scale: 0.99 }}
+        className={`file-drop-zone border-2 border-dashed rounded-2xl md:rounded-3xl p-6 md:p-8 text-center cursor-pointer transition-all touch-manipulation ${
           isDragActive
             ? darkMode
-              ? 'border-primary-400 bg-primary-900/20'
-              : 'border-primary-500 bg-primary-50'
+              ? 'border-primary-400 bg-primary-900/20 scale-[1.02]'
+              : 'border-primary-500 bg-primary-50 scale-[1.02]'
             : darkMode
-              ? 'border-gray-600 hover:border-gray-500 bg-gray-800'
-              : 'border-gray-300 hover:border-gray-400 bg-gray-50'
-        }`}
+              ? 'border-gray-600 hover:border-gray-500 active:border-primary-400 bg-gray-800/50 hover:bg-gray-800'
+              : 'border-gray-300 hover:border-gray-400 active:border-primary-300 bg-gray-50 hover:bg-gray-100'
+        } min-h-[200px] md:min-h-[240px] flex flex-col justify-center`}
       >
         <input {...getInputProps()} />
         
-        <CloudArrowUpIcon className={`w-12 h-12 mx-auto mb-4 ${
-          isDragActive
-            ? darkMode ? 'text-primary-400' : 'text-primary-500'
-            : darkMode ? 'text-gray-400' : 'text-gray-500'
-        }`} />
+        {/* Upload Icon - Mobile optimized */}
+        <motion.div
+          animate={isDragActive ? { y: -5, scale: 1.1 } : { y: 0, scale: 1 }}
+          transition={{ duration: 0.2 }}
+        >
+          <CloudArrowUpIcon className={`w-16 h-16 md:w-20 md:h-20 mx-auto mb-4 md:mb-6 ${
+            isDragActive
+              ? darkMode ? 'text-primary-400' : 'text-primary-500'
+              : darkMode ? 'text-gray-400' : 'text-gray-500'
+          }`} />
+        </motion.div>
         
-        <h3 className={`text-lg font-semibold mb-2 ${
+        {/* Upload Text - Mobile optimized */}
+        <h3 className={`text-xl md:text-2xl font-bold mb-3 md:mb-4 ${
           darkMode ? 'text-white' : 'text-gray-900'
         }`}>
-          {isDragActive ? 'Drop files here' : 'Upload study materials'}
+          {isDragActive ? 'Drop files here!' : 'Upload study materials'}
         </h3>
         
-        <p className={`mb-4 ${
+        <p className={`mb-4 md:mb-6 text-base md:text-lg px-2 ${
           darkMode ? 'text-gray-400' : 'text-gray-600'
         }`}>
-          Drag & drop files here, or click to browse
+          {isDragActive 
+            ? 'Release to upload your files' 
+            : 'Drag & drop files here, or tap to browse'
+          }
         </p>
         
-        <p className={`text-xs mb-4 ${
+        {/* File size info - Mobile optimized */}
+        <p className={`text-sm md:text-base mb-4 md:mb-6 ${
           darkMode ? 'text-gray-500' : 'text-gray-500'
         }`}>
-          Maximum file size: 100MB
+          Maximum file size: <span className="font-semibold">100MB</span>
         </p>
         
-        <div className="flex justify-center space-x-2">
-          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
-            darkMode 
-              ? 'bg-blue-900/30 text-blue-400' 
-              : 'bg-blue-100 text-blue-700'
-          }`}>
-            PDF
-          </span>
-          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
-            darkMode 
-              ? 'bg-green-900/30 text-green-400' 
-              : 'bg-green-100 text-green-700'
-          }`}>
-            DOCX
-          </span>
-          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
-            darkMode 
-              ? 'bg-purple-900/30 text-purple-400' 
-              : 'bg-purple-100 text-purple-700'
+        {/* File type badges - Mobile optimized */}
+        <div className="flex flex-wrap justify-center gap-2 md:gap-3">
+          <motion.span 
+            whileHover={{ scale: 1.05 }}
+            className={`px-4 py-2 md:px-5 md:py-2.5 rounded-full text-sm md:text-base font-semibold shadow-md ${
+              darkMode 
+                ? 'bg-blue-900/40 text-blue-300 border border-blue-700/50' 
+                : 'bg-blue-100 text-blue-800 border border-blue-200'
+            }`}
+          >
+            📄 PDF
+          </motion.span>
+          <motion.span 
+            whileHover={{ scale: 1.05 }}
+            className={`px-4 py-2 md:px-5 md:py-2.5 rounded-full text-sm md:text-base font-semibold shadow-md ${
+              darkMode 
+                ? 'bg-green-900/40 text-green-300 border border-green-700/50' 
+                : 'bg-green-100 text-green-800 border border-green-200'
+            }`}
+          >
+            📝 DOCX
+          </motion.span>
+          <motion.span 
+            whileHover={{ scale: 1.05 }}
+            className={`px-4 py-2 md:px-5 md:py-2.5 rounded-full text-sm md:text-base font-semibold shadow-md ${
+              darkMode 
+                ? 'bg-purple-900/40 text-purple-300 border border-purple-700/50' 
+                : 'bg-purple-100 text-purple-800 border border-purple-200'
+            }`}
+          >
+            📋 TXT
+          </motion.span>
+        </div>
+
+        {/* Mobile-specific help text */}
+        <div className="md:hidden mt-4">
+          <p className={`text-xs ${
+            darkMode ? 'text-gray-500' : 'text-gray-400'
           }`}>
-            TXT
-          </span>
+            💡 Tip: You can select multiple files at once
+          </p>
         </div>
       </motion.div>
 
-      {/* Upload Progress */}
-      {uploading && (
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className={`p-4 rounded-lg ${
-            darkMode ? 'bg-gray-800' : 'bg-gray-100'
-          }`}
-        >
-          <div className="flex items-center space-x-3">
-            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary-500"></div>
-            <span className={`${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
-              Uploading files...
-            </span>
-          </div>
-        </motion.div>
-      )}
+      {/* Upload Progress - Mobile optimized */}
+      <AnimatePresence>
+        {uploading && (
+          <motion.div
+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -20, scale: 0.95 }}
+            className={`p-4 md:p-6 rounded-2xl ${
+              darkMode ? 'bg-gray-800/50 border border-gray-700/50' : 'bg-gray-100/50 border border-gray-200/50'
+            } backdrop-blur-sm`}
+          >
+            <div className="flex items-center space-x-3 md:space-x-4">
+              <div className="relative">
+                <div className="animate-spin rounded-full h-6 w-6 md:h-8 md:w-8 border-b-2 border-primary-500"></div>
+                <div className="absolute inset-0 rounded-full border-2 border-primary-500/20"></div>
+              </div>
+              <div>
+                <span className={`font-medium text-base md:text-lg ${
+                  darkMode ? 'text-gray-200' : 'text-gray-800'
+                }`}>
+                  Uploading files...
+                </span>
+                <p className={`text-sm ${
+                  darkMode ? 'text-gray-400' : 'text-gray-600'
+                }`}>
+                  Please wait while we process your documents
+                </p>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
 
-      {/* Uploaded Files List */}
+      {/* Uploaded Files List - Mobile optimized */}
       <AnimatePresence>
         {uploadedFiles.length > 0 && (
           <motion.div
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: 'auto' }}
             exit={{ opacity: 0, height: 0 }}
-            className="space-y-2"
+            className="space-y-3 md:space-y-4"
           >
-            <h4 className={`font-medium ${
-              darkMode ? 'text-gray-300' : 'text-gray-700'
+            <h4 className={`font-bold text-lg md:text-xl ${
+              darkMode ? 'text-gray-200' : 'text-gray-800'
             }`}>
-              Uploaded Files
+              Uploaded Files ({uploadedFiles.length})
             </h4>
             
-            {uploadedFiles.map((file, index) => (
-              <motion.div
-                key={index}
-                initial={{ opacity: 0, x: -20 }}
-                animate={{ opacity: 1, x: 0 }}
-                className={`flex items-center justify-between p-3 rounded-lg ${
-                  darkMode ? 'bg-gray-800' : 'bg-gray-100'
-                }`}
-              >
-                <div className="flex items-center space-x-3">
-                  <DocumentIcon className={`w-5 h-5 ${
-                    darkMode ? 'text-gray-400' : 'text-gray-500'
-                  }`} />
-                  
-                  <div>
-                    <p className={`text-sm font-medium ${
-                      darkMode ? 'text-white' : 'text-gray-900'
+            <div className="space-y-2 md:space-y-3">
+              {uploadedFiles.map((file, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: index * 0.1 }}
+                  className={`flex items-center justify-between p-4 md:p-5 rounded-xl md:rounded-2xl transition-all ${
+                    darkMode 
+                      ? 'bg-gray-800/70 border border-gray-700/50 hover:bg-gray-800' 
+                      : 'bg-gray-50 border border-gray-200/50 hover:bg-gray-100'
+                  } shadow-sm hover:shadow-md`}
+                >
+                  <div className="flex items-center space-x-3 md:space-x-4 flex-1 min-w-0">
+                    {/* File Icon */}
+                    <div className={`p-2 md:p-3 rounded-lg flex-shrink-0 ${
+                      file.status === 'success'
+                        ? darkMode
+                          ? 'bg-green-900/30 text-green-400'
+                          : 'bg-green-100 text-green-700'
+                        : darkMode
+                          ? 'bg-red-900/30 text-red-400'
+                          : 'bg-red-100 text-red-700'
                     }`}>
-                      {file.name}
-                    </p>
-                    <p className={`text-xs ${
-                      darkMode ? 'text-gray-500' : 'text-gray-400'
-                    }`}>
-                      {formatFileSize(file.size)}
-                    </p>
+                      <DocumentIcon className="w-5 h-5 md:w-6 md:h-6" />
+                    </div>
+                    
+                    {/* File Info */}
+                    <div className="flex-1 min-w-0">
+                      <p className={`font-medium text-sm md:text-base truncate ${
+                        darkMode ? 'text-gray-100' : 'text-gray-900'
+                      }`}>
+                        {file.name}
+                      </p>
+                      <div className="flex items-center space-x-2 md:space-x-3 mt-1">
+                        <p className={`text-xs md:text-sm ${
+                          darkMode ? 'text-gray-400' : 'text-gray-500'
+                        }`}>
+                          {formatFileSize(file.size)}
+                        </p>
+                        {file.status === 'error' && file.error && (
+                          <>
+                            <span className={`text-xs ${
+                              darkMode ? 'text-gray-600' : 'text-gray-400'
+                            }`}>•</span>
+                            <p className={`text-xs truncate ${
+                              darkMode ? 'text-red-400' : 'text-red-600'
+                            }`}>
+                              {file.error}
+                            </p>
+                          </>
+                        )}
+                      </div>
+                    </div>
                   </div>
-                </div>
-                
-                <div className="flex items-center space-x-2">
-                  {file.status === 'success' ? (
-                    <CheckCircleIcon className="w-5 h-5 text-green-500" />
-                  ) : (
-                    <XCircleIcon className="w-5 h-5 text-red-500" />
-                  )}
                   
-                  <button
-                    onClick={() => removeFile(index)}
-                    className={`p-1 rounded transition-colors ${
-                      darkMode
-                        ? 'hover:bg-gray-700 text-gray-400'
-                        : 'hover:bg-gray-200 text-gray-500'
-                    }`}
-                  >
-                    <XMarkIcon className="w-4 h-4" />
-                  </button>
-                </div>
-              </motion.div>
-            ))}
+                  {/* Status and Actions */}
+                  <div className="flex items-center space-x-2 md:space-x-3 flex-shrink-0">
+                    {/* Status Icon */}
+                    {file.status === 'success' ? (
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        transition={{ type: "spring", delay: 0.2 }}
+                      >
+                        <CheckCircleIcon className="w-6 h-6 md:w-7 md:h-7 text-green-500" />
+                      </motion.div>
+                    ) : (
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        transition={{ type: "spring", delay: 0.2 }}
+                      >
+                        <XCircleIcon className="w-6 h-6 md:w-7 md:h-7 text-red-500" />
+                      </motion.div>
+                    )}
+                    
+                    {/* Remove Button - Larger touch target */}
+                    <motion.button
+                      whileHover={{ scale: 1.1 }}
+                      whileTap={{ scale: 0.9 }}
+                      onClick={() => removeFile(index)}
+                      className={`p-2 md:p-2.5 rounded-lg transition-colors touch-manipulation ${
+                        darkMode
+                          ? 'hover:bg-gray-700 active:bg-gray-600 text-gray-400 hover:text-gray-200'
+                          : 'hover:bg-gray-200 active:bg-gray-300 text-gray-500 hover:text-gray-700'
+                      }`}
+                      title="Remove file"
+                    >
+                      <XMarkIcon className="w-4 h-4 md:w-5 md:h-5" />
+                    </motion.button>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
           </motion.div>
         )}
       </AnimatePresence>
 
-      {/* Close Button */}
-      {onClose && (
-        <div className="flex justify-end">
-          <button
+      {/* Action Buttons - Mobile optimized */}
+      <div className="flex flex-col sm:flex-row gap-3 md:gap-4 pt-2">
+        {/* Upload More Button */}
+        <motion.button
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+          {...getRootProps()}
+          className={`flex-1 sm:flex-none px-6 py-3 md:py-3.5 rounded-xl md:rounded-2xl font-semibold transition-all touch-manipulation ${
+            darkMode
+              ? 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white shadow-lg'
+              : 'bg-primary-500 hover:bg-primary-600 active:bg-primary-700 text-white shadow-lg'
+          } hover:shadow-xl active:shadow-2xl disabled:opacity-50 disabled:cursor-not-allowed`}
+          disabled={uploading}
+        >
+          <input {...getInputProps()} />
+          {uploading ? 'Uploading...' : 'Upload More Files'}
+        </motion.button>
+
+        {/* Close Button */}
+        {onClose && (
+          <motion.button
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
             onClick={onClose}
-            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+            className={`flex-1 sm:flex-none px-6 py-3 md:py-3.5 rounded-xl md:rounded-2xl font-semibold transition-all touch-manipulation ${
               darkMode
-                ? 'bg-gray-700 hover:bg-gray-600 text-white'
-                : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
-            }`}
+                ? 'bg-gray-700 hover:bg-gray-600 active:bg-gray-500 text-gray-200 shadow-lg'
+                : 'bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 shadow-lg'
+            } hover:shadow-xl active:shadow-2xl`}
           >
-            Close
-          </button>
-        </div>
-      )}
+            Done
+          </motion.button>
+        )}
+      </div>
     </div>
   );
 };

frontend/src/components/MessageBubble.js

@@ -1,136 +1,285 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { tomorrow, prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { UserIcon, AcademicCapIcon } from '@heroicons/react/24/solid';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
+import { ClipboardIcon, CheckIcon } from '@heroicons/react/24/outline';
 
-const MessageBubble = ({ message, darkMode, isLast }) => {
-  const isUser = message.role === 'user';
-  
-  const messageVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: { 
-      opacity: 1, 
-      y: 0,
-      transition: {
-        duration: 0.3,
-        ease: "easeOut"
-      }
+const MessageBubble = ({ message, darkMode, isLast = false }) => {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
     }
   };
 
-  const formatTime = (timestamp) => {
-    return new Date(timestamp).toLocaleTimeString([], { 
+  const formatTimestamp = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString('en-US', { 
       hour: '2-digit', 
-      minute: '2-digit' 
+      minute: '2-digit',
+      hour12: false 
     });
   };
 
   return (
     <motion.div
-      variants={messageVariants}
-      initial="hidden"
-      animate="visible"
-      className={`flex gap-4 mb-6 ${isUser ? 'justify-end' : 'justify-start'}`}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'} mb-4 md:mb-6 px-2 md:px-4`}
     >
-      {!isUser && (
-        <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
-          darkMode ? 'bg-primary-600' : 'bg-primary-500'
-        }`}>
-          <AcademicCapIcon className="w-5 h-5 text-white" />
-        </div>
-      )}
-
-      <div className={`max-w-[80%] ${isUser ? 'order-first' : ''}`}>
-        <div className={`rounded-2xl px-4 py-3 ${
-          isUser
-            ? darkMode
-              ? 'bg-primary-600 text-white'
-              : 'bg-primary-500 text-white'
-            : darkMode
-              ? 'bg-gray-800 border border-gray-700'
-              : 'bg-white border border-gray-200 shadow-sm'
+      <div className={`max-w-[85%] md:max-w-[80%] lg:max-w-[70%] ${
+        message.role === 'user' ? 'order-2' : 'order-1'
+      }`}>
+        {/* Avatar and Timestamp - Mobile optimized */}
+        <div className={`flex items-center mb-2 ${
+          message.role === 'user' ? 'justify-end' : 'justify-start'
         }`}>
-          {isUser ? (
-            <p className="whitespace-pre-wrap">{message.content}</p>
-          ) : (
-            <div className="message-content">
-              <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                components={{
-                  code({ node, inline, className, children, ...props }) {
-                    const match = /language-(\w+)/.exec(className || '');
-                    return !inline && match ? (
-                      <SyntaxHighlighter
-                        style={darkMode ? tomorrow : prism}
-                        language={match[1]}
-                        PreTag="div"
-                        {...props}
-                      >
-                        {String(children).replace(/\n$/, '')}
-                      </SyntaxHighlighter>
-                    ) : (
-                      <code className={className} {...props}>
-                        {children}
-                      </code>
-                    );
-                  },
-                  p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
-                  ul: ({ children }) => <ul className="list-disc list-inside mb-2">{children}</ul>,
-                  ol: ({ children }) => <ol className="list-decimal list-inside mb-2">{children}</ol>,
-                  li: ({ children }) => <li className="mb-1">{children}</li>,
-                  h1: ({ children }) => <h1 className="text-xl font-bold mb-2">{children}</h1>,
-                  h2: ({ children }) => <h2 className="text-lg font-semibold mb-2">{children}</h2>,
-                  h3: ({ children }) => <h3 className="text-md font-medium mb-2">{children}</h3>,
-                  blockquote: ({ children }) => (
-                    <blockquote className={`border-l-4 pl-4 italic my-2 ${
-                      darkMode ? 'border-gray-600 text-gray-300' : 'border-gray-300 text-gray-600'
-                    }`}>
-                      {children}
-                    </blockquote>
-                  ),
-                }}
-              >
-                {message.content}
-              </ReactMarkdown>
+          {message.role === 'assistant' && (
+            <div className={`w-6 h-6 md:w-8 md:h-8 rounded-full flex items-center justify-center mr-2 md:mr-3 flex-shrink-0 ${
+              darkMode 
+                ? 'bg-gradient-to-br from-primary-600 to-purple-600' 
+                : 'bg-gradient-to-br from-primary-500 to-purple-500'
+            }`}>
+              <svg className="w-3 h-3 md:w-4 md:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+              </svg>
             </div>
           )}
-        </div>
-
-        {/* Timestamp and Sources */}
-        <div className={`text-xs mt-2 ${
-          darkMode ? 'text-gray-500' : 'text-gray-400'
-        } ${isUser ? 'text-right' : 'text-left'}`}>
-          <span>{formatTime(message.timestamp)}</span>
           
-          {!isUser && message.sources && message.sources.length > 0 && (
-            <div className="mt-2">
-              <span className="font-medium">Sources: </span>
-              {message.sources.map((source, index) => (
-                <span key={index} className={`inline-block mr-2 px-2 py-1 rounded text-xs ${
-                  darkMode 
-                    ? 'bg-gray-700 text-gray-300' 
-                    : 'bg-gray-100 text-gray-600'
-                }`}>
-                  {source}
-                </span>
-              ))}
+          <span className={`text-xs md:text-sm font-medium ${
+            darkMode ? 'text-gray-400' : 'text-gray-500'
+          } ${message.role === 'user' ? 'order-2' : 'order-1'}`}>
+            {message.role === 'user' ? 'You' : 'CA Assistant'}
+          </span>
+          
+          <span className={`text-xs ${
+            darkMode ? 'text-gray-500' : 'text-gray-400'
+          } ml-2 ${message.role === 'user' ? 'order-1 mr-2 ml-0' : 'order-2'}`}>
+            {formatTimestamp(message.timestamp)}
+          </span>
+
+          {message.role === 'user' && (
+            <div className={`w-6 h-6 md:w-8 md:h-8 rounded-full flex items-center justify-center ml-2 md:ml-3 flex-shrink-0 ${
+              darkMode 
+                ? 'bg-gradient-to-br from-blue-600 to-blue-700' 
+                : 'bg-gradient-to-br from-blue-500 to-blue-600'
+            }`}>
+              <svg className="w-3 h-3 md:w-4 md:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
             </div>
           )}
         </div>
-      </div>
 
-      {isUser && (
-        <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
-          darkMode ? 'bg-gray-700' : 'bg-gray-300'
+        {/* Message Content - Mobile optimized */}
+        <div className={`relative group ${
+          message.role === 'user' ? 'text-right' : 'text-left'
         }`}>
-          <UserIcon className={`w-5 h-5 ${
-            darkMode ? 'text-gray-300' : 'text-gray-600'
+          <div className={`inline-block p-3 md:p-4 rounded-2xl md:rounded-2xl relative shadow-md hover:shadow-lg transition-all duration-200 ${
+            message.role === 'user'
+              ? darkMode
+                ? 'bg-gradient-to-br from-blue-600 to-blue-700 text-white'
+                : 'bg-gradient-to-br from-blue-500 to-blue-600 text-white'
+              : darkMode
+                ? 'bg-gradient-to-br from-gray-800 to-gray-850 border border-gray-700/50 text-gray-100'
+                : 'bg-gradient-to-br from-white to-gray-50 border border-gray-200/50 text-gray-900'
+          } max-w-full`}>
+            
+            {/* Message Text - Mobile optimized */}
+            <div className={`prose prose-sm md:prose-base max-w-none ${
+              message.role === 'user' 
+                ? 'prose-invert' 
+                : darkMode 
+                  ? 'prose-invert prose-gray' 
+                  : 'prose-gray'
+            } ${message.role === 'user' ? 'text-left' : ''}`}>
+              {message.role === 'user' ? (
+                <p className="mb-0 text-sm md:text-base leading-relaxed break-words">{message.content}</p>
+              ) : (
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    // Mobile-optimized code blocks
+                    code({ node, inline, className, children, ...props }) {
+                      const match = /language-(\w+)/.exec(className || '');
+                      return !inline && match ? (
+                        <div className="relative my-3 md:my-4 rounded-lg md:rounded-xl overflow-hidden">
+                          <div className={`flex items-center justify-between px-3 md:px-4 py-2 md:py-3 text-xs md:text-sm ${
+                            darkMode ? 'bg-gray-900 text-gray-300' : 'bg-gray-800 text-gray-200'
+                          }`}>
+                            <span className="font-medium">{match[1]}</span>
+                            <button
+                              onClick={() => copyToClipboard(String(children).replace(/\n$/, ''))}
+                              className={`flex items-center space-x-1 md:space-x-2 px-2 md:px-3 py-1 md:py-1.5 rounded-md transition-colors touch-manipulation ${
+                                darkMode 
+                                  ? 'hover:bg-gray-800 active:bg-gray-700' 
+                                  : 'hover:bg-gray-700 active:bg-gray-600'
+                              }`}
+                              title="Copy code"
+                            >
+                              {copied ? (
+                                <CheckIcon className="w-3 h-3 md:w-4 md:h-4" />
+                              ) : (
+                                <ClipboardIcon className="w-3 h-3 md:w-4 md:h-4" />
+                              )}
+                              <span className="text-xs hidden md:inline">
+                                {copied ? 'Copied!' : 'Copy'}
+                              </span>
+                            </button>
+                          </div>
+                          <SyntaxHighlighter
+                            style={darkMode ? oneDark : oneLight}
+                            language={match[1]}
+                            PreTag="div"
+                            className="!m-0 text-xs md:text-sm"
+                            customStyle={{
+                              fontSize: '12px',
+                              lineHeight: '1.4',
+                              padding: '12px 16px',
+                            }}
+                            {...props}
+                          >
+                            {String(children).replace(/\n$/, '')}
+                          </SyntaxHighlighter>
+                        </div>
+                      ) : (
+                        <code 
+                          className={`px-1.5 md:px-2 py-0.5 md:py-1 rounded text-xs md:text-sm font-mono ${
+                            darkMode 
+                              ? 'bg-gray-700 text-gray-200' 
+                              : 'bg-gray-200 text-gray-800'
+                          }`} 
+                          {...props}
+                        >
+                          {children}
+                        </code>
+                      );
+                    },
+                    // Mobile-optimized paragraphs
+                    p: ({ children }) => (
+                      <p className="mb-3 md:mb-4 last:mb-0 text-sm md:text-base leading-relaxed break-words">
+                        {children}
+                      </p>
+                    ),
+                    // Mobile-optimized lists
+                    ul: ({ children }) => (
+                      <ul className="mb-3 md:mb-4 ml-4 md:ml-6 space-y-1 md:space-y-2 text-sm md:text-base">
+                        {children}
+                      </ul>
+                    ),
+                    ol: ({ children }) => (
+                      <ol className="mb-3 md:mb-4 ml-4 md:ml-6 space-y-1 md:space-y-2 text-sm md:text-base">
+                        {children}
+                      </ol>
+                    ),
+                    li: ({ children }) => (
+                      <li className="leading-relaxed break-words">
+                        {children}
+                      </li>
+                    ),
+                    // Mobile-optimized headings
+                    h1: ({ children }) => (
+                      <h1 className="text-lg md:text-xl font-bold mb-2 md:mb-3 mt-4 md:mt-6 first:mt-0 break-words">
+                        {children}
+                      </h1>
+                    ),
+                    h2: ({ children }) => (
+                      <h2 className="text-base md:text-lg font-bold mb-2 md:mb-3 mt-3 md:mt-4 first:mt-0 break-words">
+                        {children}
+                      </h2>
+                    ),
+                    h3: ({ children }) => (
+                      <h3 className="text-sm md:text-base font-bold mb-1 md:mb-2 mt-2 md:mt-3 first:mt-0 break-words">
+                        {children}
+                      </h3>
+                    ),
+                    // Mobile-optimized blockquotes
+                    blockquote: ({ children }) => (
+                      <blockquote className={`border-l-3 md:border-l-4 pl-3 md:pl-4 my-3 md:my-4 italic text-sm md:text-base ${
+                        darkMode ? 'border-gray-600 text-gray-300' : 'border-gray-400 text-gray-600'
+                      }`}>
+                        {children}
+                      </blockquote>
+                    ),
+                    // Mobile-optimized tables
+                    table: ({ children }) => (
+                      <div className="overflow-x-auto my-3 md:my-4 -mx-1">
+                        <table className={`min-w-full text-xs md:text-sm border-collapse ${
+                          darkMode ? 'border-gray-600' : 'border-gray-300'
+                        }`}>
+                          {children}
+                        </table>
+                      </div>
+                    ),
+                    th: ({ children }) => (
+                      <th className={`border px-2 md:px-3 py-1 md:py-2 font-medium text-left ${
+                        darkMode 
+                          ? 'border-gray-600 bg-gray-700/50' 
+                          : 'border-gray-300 bg-gray-100'
+                      }`}>
+                        {children}
+                      </th>
+                    ),
+                    td: ({ children }) => (
+                      <td className={`border px-2 md:px-3 py-1 md:py-2 ${
+                        darkMode ? 'border-gray-600' : 'border-gray-300'
+                      }`}>
+                        {children}
+                      </td>
+                    ),
+                  }}
+                >
+                  {message.content || '*Thinking...*'}
+                </ReactMarkdown>
+              )}
+            </div>
+
+            {/* Copy Button for Assistant Messages - Mobile optimized */}
+            {message.role === 'assistant' && message.content && (
+              <button
+                onClick={() => copyToClipboard(message.content)}
+                className={`absolute top-2 md:top-3 right-2 md:right-3 opacity-0 group-hover:opacity-100 transition-all duration-200 p-1.5 md:p-2 rounded-lg touch-manipulation ${
+                  darkMode 
+                    ? 'hover:bg-gray-700/70 active:bg-gray-600/70 text-gray-400 hover:text-gray-200' 
+                    : 'hover:bg-gray-200/70 active:bg-gray-300/70 text-gray-500 hover:text-gray-700'
+                } backdrop-blur-sm`}
+                title="Copy message"
+              >
+                {copied ? (
+                  <CheckIcon className="w-3 h-3 md:w-4 md:h-4" />
+                ) : (
+                  <ClipboardIcon className="w-3 h-3 md:w-4 md:h-4" />
+                )}
+              </button>
+            )}
+          </div>
+
+          {/* Message tail/pointer - Mobile optimized */}
+          <div className={`absolute top-3 md:top-4 w-0 h-0 ${
+            message.role === 'user'
+              ? 'right-0 border-l-8 md:border-l-10 border-t-8 md:border-t-10 border-transparent'
+              : 'left-0 border-r-8 md:border-r-10 border-t-8 md:border-t-10 border-transparent'
+          } ${
+            message.role === 'user'
+              ? darkMode
+                ? 'border-t-blue-600'
+                : 'border-t-blue-500'
+              : darkMode
+                ? 'border-t-gray-800'
+                : 'border-t-white'
           }`} />
         </div>
-      )}
+      </div>
     </motion.div>
   );
 };

frontend/src/components/Sidebar.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { 
   PlusIcon, 
-  XMarkIcon, 
+  TrashIcon, 
+  XMarkIcon,
   ChatBubbleLeftIcon,
-  TrashIcon,
-  HomeIcon
+  HomeIcon,
+  Bars3Icon 
 } from '@heroicons/react/24/outline';
 
 const Sidebar = ({ 
@@ -19,197 +20,271 @@ const Sidebar = ({
   onBackToHome,
   darkMode 
 }) => {
+  
   const formatDate = (date) => {
     const now = new Date();
     const messageDate = new Date(date);
     const diffTime = Math.abs(now - messageDate);
     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-
+    
     if (diffDays === 1) return 'Today';
     if (diffDays === 2) return 'Yesterday';
-    if (diffDays <= 7) return `${diffDays} days ago`;
+    if (diffDays <= 7) return `${diffDays - 1} days ago`;
     return messageDate.toLocaleDateString();
   };
 
-  const sidebarVariants = {
-    open: {
-      x: 0,
-      transition: {
-        type: "spring",
-        stiffness: 300,
-        damping: 30
-      }
-    },
-    closed: {
-      x: -280,
-      transition: {
-        type: "spring",
-        stiffness: 300,
-        damping: 30
-      }
-    }
-  };
-
-  const overlayVariants = {
-    open: { opacity: 1 },
-    closed: { opacity: 0 }
+  const truncateTitle = (title, maxLength = 25) => {
+    if (title.length <= maxLength) return title;
+    return title.substring(0, maxLength) + '...';
   };
 
   return (
-    <>
-      {/* Mobile Overlay */}
-      <AnimatePresence>
-        {open && (
+    <AnimatePresence>
+      {open && (
+        <>
+          {/* Mobile: Full-screen overlay background */}
           <motion.div
-            variants={overlayVariants}
-            initial="closed"
-            animate="open"
-            exit="closed"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
             className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
             onClick={onClose}
           />
-        )}
-      </AnimatePresence>
 
-      {/* Sidebar */}
-      <motion.aside
-        variants={sidebarVariants}
-        initial="closed"
-        animate={open ? "open" : "closed"}
-        className={`fixed left-0 top-16 h-[calc(100vh-4rem)] w-64 z-50 ${
-          darkMode 
-            ? 'bg-gray-900 border-gray-700' 
-            : 'bg-white border-gray-200'
-        } border-r shadow-lg flex flex-col`}
-      >
-        {/* Header */}
-        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="font-semibold text-lg">Conversations</h2>
-            <button
-              onClick={onClose}
-              className={`p-1 rounded-lg transition-colors md:hidden ${
-                darkMode
-                  ? 'hover:bg-gray-800 text-gray-400'
-                  : 'hover:bg-gray-100 text-gray-500'
-              }`}
-            >
-              <XMarkIcon className="w-5 h-5" />
-            </button>
-          </div>
+          {/* Sidebar Content */}
+          <motion.div
+            initial={{ 
+              x: '-100%',
+              opacity: 0 
+            }}
+            animate={{ 
+              x: 0,
+              opacity: 1 
+            }}
+            exit={{ 
+              x: '-100%',
+              opacity: 0 
+            }}
+            transition={{ 
+              type: "spring", 
+              damping: 25, 
+              stiffness: 200 
+            }}
+            className={`fixed top-0 left-0 h-full w-full md:w-80 z-50 md:z-30 ${
+              darkMode 
+                ? 'bg-gray-900 border-gray-700' 
+                : 'bg-white border-gray-200'
+            } border-r shadow-2xl md:shadow-xl flex flex-col`}
+          >
+            {/* Header - Mobile optimized */}
+            <div className={`p-4 md:p-6 border-b ${
+              darkMode ? 'border-gray-700/50' : 'border-gray-200/50'
+            } flex-shrink-0`}>
+              {/* Top row: Close button and title */}
+              <div className="flex items-center justify-between mb-4 md:mb-3">
+                <h2 className={`text-lg md:text-xl font-bold ${
+                  darkMode ? 'text-white' : 'text-gray-900'
+                }`}>
+                  Conversations
+                </h2>
+                
+                <button
+                  onClick={onClose}
+                  className={`p-2 md:p-1.5 rounded-lg transition-colors touch-manipulation ${
+                    darkMode
+                      ? 'hover:bg-gray-800 active:bg-gray-700 text-gray-400'
+                      : 'hover:bg-gray-100 active:bg-gray-200 text-gray-500'
+                  }`}
+                  title="Close sidebar"
+                >
+                  <XMarkIcon className="w-6 h-6 md:w-5 md:h-5" />
+                </button>
+              </div>
 
-          <div className="space-y-2">
-            <motion.button
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              onClick={onNewChat}
-              className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
-                darkMode
-                  ? 'bg-gray-800 hover:bg-gray-700 text-white border-gray-600'
-                  : 'bg-gray-50 hover:bg-gray-100 text-gray-900 border-gray-300'
-              } border`}
-            >
-              <PlusIcon className="w-4 h-4" />
-              <span className="font-medium">New Chat</span>
-            </motion.button>
-            
-            <motion.button
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
-              onClick={onBackToHome}
-              className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
-                darkMode
-                  ? 'bg-primary-600 hover:bg-primary-700 text-white'
-                  : 'bg-primary-50 hover:bg-primary-100 text-primary-900 border-primary-300'
-              } border`}
-            >
-              <HomeIcon className="w-4 h-4" />
-              <span className="font-medium">Back to Home</span>
-            </motion.button>
-          </div>
-        </div>
+              {/* Action buttons - Mobile optimized */}
+              <div className="flex flex-col sm:flex-row gap-2 md:gap-3">
+                <motion.button
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                  onClick={() => {
+                    onNewChat();
+                    onClose();
+                  }}
+                  className={`flex items-center justify-center gap-2 md:gap-3 px-4 py-3 md:py-2.5 rounded-xl md:rounded-lg font-medium transition-all touch-manipulation ${
+                    darkMode
+                      ? 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white shadow-lg'
+                      : 'bg-primary-500 hover:bg-primary-600 active:bg-primary-700 text-white shadow-lg'
+                  } hover:shadow-xl active:shadow-2xl flex-1 sm:flex-none`}
+                >
+                  <PlusIcon className="w-5 h-5 md:w-4 md:h-4" />
+                  <span className="text-base md:text-sm">New Chat</span>
+                </motion.button>
 
-        {/* Conversations List */}
-        <div className="flex-1 overflow-y-auto p-2">
-          {conversations.length === 0 ? (
-            <div className={`text-center py-8 ${
-              darkMode ? 'text-gray-500' : 'text-gray-400'
-            }`}>
-              <ChatBubbleLeftIcon className="w-12 h-12 mx-auto mb-3 opacity-50" />
-              <p className="text-sm">No conversations yet</p>
-              <p className="text-xs mt-1">Start a new chat to begin</p>
-            </div>
-          ) : (
-            <div className="space-y-1">
-              {conversations.map((conversation) => (
                 <motion.button
-                  key={conversation.id}
-                  whileHover={{ x: 4 }}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
                   onClick={() => {
-                    onConversationSelect(conversation.id);
+                    onBackToHome();
                     onClose();
                   }}
-                  className={`w-full text-left p-3 rounded-lg transition-all group ${
-                    activeConversationId === conversation.id
-                      ? darkMode
-                        ? 'bg-primary-600 text-white'
-                        : 'bg-primary-50 text-primary-900 border-primary-200'
-                      : darkMode
-                        ? 'hover:bg-gray-800 text-gray-300'
-                        : 'hover:bg-gray-50 text-gray-700'
-                  }`}
+                  className={`flex items-center justify-center gap-2 md:gap-3 px-4 py-3 md:py-2.5 rounded-xl md:rounded-lg font-medium transition-all touch-manipulation ${
+                    darkMode
+                      ? 'bg-gray-700 hover:bg-gray-600 active:bg-gray-500 text-gray-200 shadow-lg'
+                      : 'bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 shadow-lg'
+                  } hover:shadow-xl active:shadow-2xl flex-1 sm:flex-none`}
                 >
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1 min-w-0">
-                      <p className="font-medium truncate text-sm">
-                        {conversation.title}
-                      </p>
-                      <p className={`text-xs mt-1 ${
-                        activeConversationId === conversation.id
-                          ? 'text-primary-200'
+                  <HomeIcon className="w-5 h-5 md:w-4 md:h-4" />
+                  <span className="text-base md:text-sm">Home</span>
+                </motion.button>
+              </div>
+            </div>
+
+            {/* Conversations List - Mobile optimized */}
+            <div className="flex-1 overflow-y-auto p-3 md:p-4">
+              {conversations.length === 0 ? (
+                <div className="flex flex-col items-center justify-center h-full text-center px-4">
+                  <ChatBubbleLeftIcon className={`w-12 h-12 md:w-16 md:h-16 mb-4 ${
+                    darkMode ? 'text-gray-600' : 'text-gray-400'
+                  }`} />
+                  <p className={`text-base md:text-lg font-medium mb-2 ${
+                    darkMode ? 'text-gray-400' : 'text-gray-500'
+                  }`}>
+                    No conversations yet
+                  </p>
+                  <p className={`text-sm md:text-base ${
+                    darkMode ? 'text-gray-500' : 'text-gray-400'
+                  }`}>
+                    Start a new chat to begin your CA study session
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-2 md:space-y-1">
+                  {conversations.map((conv) => (
+                    <motion.div
+                      key={conv.id}
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      whileHover={{ x: 4 }}
+                      className={`group relative p-3 md:p-3 rounded-xl md:rounded-lg cursor-pointer transition-all touch-manipulation ${
+                        activeConversationId === conv.id
+                          ? darkMode
+                            ? 'bg-primary-600/20 border-primary-500/30 shadow-lg'
+                            : 'bg-primary-50 border-primary-200 shadow-lg'
                           : darkMode
-                            ? 'text-gray-500'
-                            : 'text-gray-500'
-                      }`}>
-                        {formatDate(conversation.createdAt)}
-                      </p>
-                    </div>
-                    
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (window.confirm('Are you sure you want to delete this conversation?')) {
-                          onDeleteConversation(conversation.id);
-                        }
-                      }}
-                      className={`opacity-0 group-hover:opacity-100 p-1 rounded transition-opacity ${
-                        darkMode
-                          ? 'hover:bg-gray-700 text-gray-400'
-                          : 'hover:bg-gray-200 text-gray-500'
+                            ? 'hover:bg-gray-800 active:bg-gray-700'
+                            : 'hover:bg-gray-50 active:bg-gray-100'
+                      } border ${
+                        activeConversationId === conv.id
+                          ? ''
+                          : darkMode
+                            ? 'border-transparent'
+                            : 'border-transparent'
                       }`}
+                      onClick={() => {
+                        onConversationSelect(conv.id);
+                        onClose();
+                      }}
                     >
-                      <TrashIcon className="w-4 h-4" />
-                    </button>
-                  </div>
-                </motion.button>
-              ))}
+                      {/* Conversation Content */}
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1 min-w-0 mr-2">
+                          {/* Title */}
+                          <h3 className={`font-medium text-sm md:text-sm mb-1 truncate ${
+                            activeConversationId === conv.id
+                              ? darkMode
+                                ? 'text-primary-300'
+                                : 'text-primary-700'
+                              : darkMode
+                                ? 'text-gray-200'
+                                : 'text-gray-900'
+                          }`}>
+                            {truncateTitle(conv.title || 'New Conversation')}
+                          </h3>
+                          
+                          {/* Message count and date */}
+                          <div className="flex items-center space-x-2">
+                            <span className={`text-xs ${
+                              activeConversationId === conv.id
+                                ? darkMode
+                                  ? 'text-primary-400/80'
+                                  : 'text-primary-600/80'
+                                : darkMode
+                                  ? 'text-gray-500'
+                                  : 'text-gray-500'
+                            }`}>
+                              {conv.messages?.length || 0} messages
+                            </span>
+                            <span className={`text-xs ${
+                              darkMode ? 'text-gray-600' : 'text-gray-400'
+                            }`}>
+                              •
+                            </span>
+                            <span className={`text-xs ${
+                              darkMode ? 'text-gray-500' : 'text-gray-400'
+                            }`}>
+                              {formatDate(conv.createdAt)}
+                            </span>
+                          </div>
+
+                          {/* Last message preview - Mobile optimized */}
+                          {conv.messages && conv.messages.length > 0 && (
+                            <p className={`text-xs mt-1 truncate ${
+                              darkMode ? 'text-gray-500' : 'text-gray-500'
+                            }`}>
+                              {conv.messages[conv.messages.length - 1].content.substring(0, 40)}...
+                            </p>
+                          )}
+                        </div>
+
+                        {/* Delete Button - Larger touch target for mobile */}
+                        <motion.button
+                          whileHover={{ scale: 1.1 }}
+                          whileTap={{ scale: 0.9 }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onDeleteConversation(conv.id);
+                          }}
+                          className={`p-2 md:p-1.5 rounded-lg opacity-0 md:group-hover:opacity-100 transition-all touch-manipulation ${
+                            darkMode
+                              ? 'hover:bg-red-600/20 active:bg-red-600/30 text-red-400'
+                              : 'hover:bg-red-50 active:bg-red-100 text-red-500'
+                          } flex-shrink-0 md:opacity-100 sm:opacity-100`}
+                          title="Delete conversation"
+                        >
+                          <TrashIcon className="w-4 h-4 md:w-4 md:h-4" />
+                        </motion.button>
+                      </div>
+
+                      {/* Active indicator */}
+                      {activeConversationId === conv.id && (
+                        <motion.div
+                          layoutId="activeConversation"
+                          className={`absolute left-0 top-0 bottom-0 w-1 rounded-r ${
+                            darkMode ? 'bg-primary-500' : 'bg-primary-500'
+                          }`}
+                        />
+                      )}
+                    </motion.div>
+                  ))}
+                </div>
+              )}
             </div>
-          )}
-        </div>
 
-        {/* Footer */}
-        <div className={`p-4 border-t ${
-          darkMode ? 'border-gray-700' : 'border-gray-200'
-        }`}>
-          <div className={`text-xs ${
-            darkMode ? 'text-gray-500' : 'text-gray-400'
-          }`}>
-            <p>CA Study Assistant v2.0</p>
-            <p className="mt-1">Powered by AI</p>
-          </div>
-        </div>
-      </motion.aside>
-    </>
+            {/* Footer - Mobile optimized */}
+            <div className={`p-4 md:p-6 border-t ${
+              darkMode ? 'border-gray-700/50' : 'border-gray-200/50'
+            } flex-shrink-0`}>
+              <div className={`text-center text-xs ${
+                darkMode ? 'text-gray-500' : 'text-gray-400'
+              }`}>
+                <p className="mb-1">📚 CA Study Assistant</p>
+                <p>{conversations.length} conversation{conversations.length !== 1 ? 's' : ''}</p>
+              </div>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
   );
 };