mobile resolution fixes

phd-advisor-frontend/src/styles/ChatPage.css

@@ -1,3 +1,4 @@
+/* ChatPage.css - Complete Fixed File */
 
 /* Modern Chat Page Layout */
 .modern-chat-page {
@@ -307,18 +308,110 @@
   40% { transform: scale(1); }
 }
 
-/* Floating Input Area - New Style */
+/* Floating Input Area - FIXED VERSION */
 .floating-input-area {
   position: fixed;
   bottom: 20px;
   left: 0;
   right: 0;
   z-index: 50;
-  background: transparent; /* No background or blur */
+  background: transparent;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 800px;
+  margin: 0 auto;
 }
 
-/* Provider Dropdown Styles */
+/* Reply Banner in ChatPage - matches input width and fixes dark mode */
+.floating-input-area .reply-banner {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin: 0 16px 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  max-width: 768px;
+  box-sizing: border-box;
+}
+
+[data-theme="dark"] .floating-input-area .reply-banner {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+/* Reply Info - Fix dark mode text color */
+.floating-input-area .reply-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.floating-input-area .reply-info strong {
+  color: var(--accent-primary);
+}
+
+/* Cancel Reply Button */
+.floating-input-area .cancel-reply {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.floating-input-area .cancel-reply:hover {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+}
+
+/* Document Indicator Styles */
+.document-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--feature-bg);  /* Use theme variable */
+  border: 1px solid var(--accent-primary);  /* Use theme variable */
+  border-radius: 20px;
+  color: var(--accent-primary);  /* Use theme variable */
+  font-size: 13px;
+  font-weight: 600;
+  cursor: default;
+  transition: all 0.2s ease;
+}
+
+.document-indicator:hover {
+  background: var(--accent-primary);
+  color: white;
+}
+
+.doc-count {
+  background: var(--accent-primary);
+  color: white;
+  border-radius: 10px;
+  padding: 2px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 16px;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.document-indicator:hover .doc-count {
+  background: white;
+  color: var(--accent-primary);
+}
+
+/* Provider Dropdown Styles - FIXED */
 .provider-dropdown {
   position: relative;
   display: inline-block;
@@ -422,6 +515,10 @@
   -webkit-backdrop-filter: blur(20px);
 }
 
+[data-theme="dark"] .provider-dropdown-menu {
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+}
+
 .provider-option {
   width: 100%;
   display: flex;
@@ -531,6 +628,10 @@
     bottom: 10px;
   }
   
+  .floating-input-area .reply-banner {
+    margin: 0 12px 12px 12px;
+  }
+  
   .orchestrator-content {
     max-width: none;
   }

phd-advisor-frontend/src/styles/EnhancedChatInput.css

@@ -1,30 +1,60 @@
-/* src/styles/EnhancedChatInput.css - Complete Fixed File */
-
-/* Main Container */
+/* Enhanced Chat Input Styles */
 .enhanced-chat-input-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  position: relative;
   width: 100%;
-  max-width: 768px;
+  max-width: 800px;
   margin: 0 auto;
   padding: 0 16px;
 }
 
+/* Reply Banner */
+.reply-banner {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px 12px 0 0;
+  padding: 12px 16px;
+  margin: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.reply-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cancel-reply {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.cancel-reply:hover {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+}
+
 /* Floating Upload Section */
 .floating-upload-section {
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: 16px;
+  margin-bottom: 12px;
   padding: 20px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   animation: slideUpFade 0.2s ease-out;
 }
 
 [data-theme="dark"] .floating-upload-section {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
 /* Floating Documents Section */
@@ -32,15 +62,15 @@
   background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: 16px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  animation: slideUpFade 0.2s ease-out;
+  margin-bottom: 12px;
+  max-height: 400px;
   overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  animation: slideUpFade 0.2s ease-out;
 }
 
 [data-theme="dark"] .floating-documents-section {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
 .documents-header {
@@ -56,7 +86,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--text-primary);
   font-size: 14px;
 }
@@ -64,16 +94,16 @@
 .close-documents-btn {
   background: none;
   border: none;
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
   cursor: pointer;
-  padding: 4px;
+  padding: 6px;
   border-radius: 6px;
   transition: all 0.2s ease;
 }
 
 .close-documents-btn:hover {
   background: var(--bg-tertiary);
-  color: var(--text-primary);
+  color: var(--text-secondary);
 }
 
 .documents-list {
@@ -89,16 +119,16 @@
   justify-content: center;
   padding: 40px 20px;
   text-align: center;
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
 }
 
 .no-documents svg {
-  color: var(--text-tertiary);
   margin-bottom: 12px;
+  opacity: 0.5;
 }
 
 .no-documents p {
-  margin: 0 0 4px 0;
+  margin: 8px 0;
   font-weight: 500;
   color: var(--text-primary);
 }
@@ -212,41 +242,17 @@
   max-height: 200px;
   border: none;
   outline: none;
+  resize: none;
   background: transparent;
   color: var(--text-primary);
   font-size: 16px;
   font-family: inherit;
   line-height: 1.5;
-  resize: none;
   overflow-y: auto;
-  scrollbar-width: thin;
 }
 
 .main-textarea::placeholder {
-  color: var(--text-secondary);
-}
-
-.main-textarea:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/* Custom scrollbar for textarea */
-.main-textarea::-webkit-scrollbar {
-  width: 4px;
-}
-
-.main-textarea::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.main-textarea::-webkit-scrollbar-thumb {
-  background: var(--border-primary);
-  border-radius: 2px;
-}
-
-.main-textarea::-webkit-scrollbar-thumb:hover {
-  background: var(--text-tertiary);
+  color: var(--text-tertiary);
 }
 
 /* Controls Row */
@@ -255,50 +261,47 @@
   align-items: center;
   justify-content: space-between;
   padding: 8px 20px 16px 20px;
-  gap: 12px;
 }
 
-/* File Controls */
+/* File Controls - ensure buttons stay side by side */
 .file-controls {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-wrap: nowrap;
 }
 
 /* Add Documents Button */
 .add-docs-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: transparent;
-  border: none;
+  gap: 6px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-secondary);
   border-radius: 8px;
-  color: var(--text-secondary);
+  padding: 8px 12px;
   font-size: 14px;
   font-weight: 500;
+  color: var(--text-secondary);
   cursor: pointer;
   transition: all 0.2s ease;
-  position: relative;
 }
 
 .add-docs-btn:hover:not(:disabled) {
-  background: var(--bg-secondary);
+  background: var(--bg-tertiary);
+  border-color: var(--border-primary);
   color: var(--text-primary);
 }
 
-.add-docs-btn.active {
-  background: var(--feature-bg);
-  color: var(--accent-primary);
-}
-
 .add-docs-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.add-docs-btn span {
-  user-select: none;
+.add-docs-btn.active {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+  color: white;
 }
 
 /* View Documents Button */
@@ -306,25 +309,25 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 10px;
-  background: var(--feature-bg);
-  border: 1px solid var(--accent-primary);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-secondary);
   border-radius: 8px;
-  color: var(--accent-primary);
-  font-size: 12px;
-  font-weight: 600;
+  padding: 8px 10px;
+  color: var(--text-secondary);
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
 }
 
 .view-docs-btn:hover {
-  background: var(--accent-primary);
-  color: white;
+  background: var(--bg-tertiary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
 }
 
 .view-docs-btn.active {
   background: var(--accent-primary);
+  border-color: var(--accent-primary);
   color: white;
 }
 
@@ -346,7 +349,7 @@
   color: var(--accent-primary);
 }
 
-/* Send Button - FIXED FOR BOTH LIGHT AND DARK MODE */
+/* Send Button - FIXED VERSION */
 .send-button {
   display: flex;
   align-items: center;
@@ -361,24 +364,22 @@
   flex-shrink: 0;
 }
 
-/* Enabled state - ensure visibility in both modes */
+/* Enabled state - clean approach */
 .send-button.enabled {
-  background: #3B82F6 !important; /* Blue background - force override */
-  color: #FFFFFF !important; /* White text/icon - force override */
+  background: #3B82F6;
+  color: #FFFFFF;
   box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
 }
 
-/* Force icon color to white when enabled */
-.send-button.enabled svg {
-  color: #FFFFFF !important;
-  fill: #FFFFFF !important;
-  stroke: #FFFFFF !important;
-  width: 16px !important;
-  height: 16px !important;
+/* Icon styling - use currentColor for better inheritance */
+.send-button svg {
+  width: 16px;
+  height: 16px;
+  color: currentColor;
 }
 
 .send-button.enabled:hover {
-  background: #2563EB !important; /* Darker blue on hover */
+  background: #2563EB;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
 }
@@ -390,29 +391,15 @@
 
 /* Disabled state */
 .send-button.disabled {
-  background: #E5E7EB; /* Light gray background */
-  color: #9CA3AF; /* Gray text/icon */
+  background: #E5E7EB;
+  color: #9CA3AF;
   cursor: not-allowed;
   box-shadow: none;
 }
 
 [data-theme="dark"] .send-button.disabled {
-  background: #374151; /* Dark gray background in dark mode */
-  color: #6B7280; /* Gray text/icon in dark mode */
-}
-
-.send-button.disabled svg {
-  color: #9CA3AF !important;
-  fill: #9CA3AF !important;
-  stroke: #9CA3AF !important;
-  width: 16px !important;
-  height: 16px !important;
-}
-
-[data-theme="dark"] .send-button.disabled svg {
-  color: #6B7280 !important;
-  fill: #6B7280 !important;
-  stroke: #6B7280 !important;
+  background: #374151;
+  color: #6B7280;
 }
 
 /* Document Upload Notifications */
@@ -421,103 +408,64 @@
   justify-content: center;
   margin: 16px 0;
   animation: slideUpFade 0.3s ease-out;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  padding: 0;
 }
 
+/* [data-theme="dark"] .document-upload-notification {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+} */
+
 .upload-notification-content {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 16px;
-  background: var(--feature-bg);
-  border: 1px solid var(--accent-primary);
+  background: var(--feature-bg);  /* Change from fixed color */
+  border: 1px solid var(--accent-primary);  /* Change from fixed color */
   border-radius: 12px;
-  color: var(--accent-primary);
+  color: var(--accent-primary);  /* Change from fixed color */
   font-size: 14px;
   font-weight: 500;
   max-width: 80%;
-  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
-}
-
-[data-theme="dark"] .upload-notification-content {
-  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
 }
 
-.upload-notification-content .upload-icon {
+.upload-notification-icon {
   flex-shrink: 0;
 }
 
-/* Document Counter in Header */
-.document-indicator {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: var(--feature-bg);
-  border: 1px solid var(--accent-primary);
-  border-radius: 20px;
-  color: var(--accent-primary);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: default;
-  transition: all 0.2s ease;
-}
-
-.document-indicator:hover {
-  background: var(--accent-primary);
-  color: white;
+.upload-notification-icon.success {
+  color: #10B981;
 }
 
-.doc-count {
-  background: var(--accent-primary);
-  color: white;
-  border-radius: 10px;
-  padding: 2px 6px;
-  font-size: 11px;
-  font-weight: 700;
-  min-width: 16px;
-  text-align: center;
-  line-height: 1.2;
-}
-
-.document-indicator:hover .doc-count {
-  background: white;
-  color: var(--accent-primary);
+.upload-notification-icon.error {
+  color: #EF4444;
 }
 
-/* Reply Banner Styles */
-.reply-banner {
-  background: var(--bg-primary);
-  border: 1px solid var(--border-primary);
-  border-radius: 12px;
-  padding: 12px 16px;
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  max-width: 768px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 12px;
+.upload-notification-text {
+  flex: 1;
 }
 
-[data-theme="dark"] .reply-banner {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+.upload-notification-title {
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0 0 2px 0;
+  font-size: 14px;
 }
 
-.reply-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.upload-notification-message {
   color: var(--text-secondary);
-  font-size: 14px;
+  margin: 0;
+  font-size: 13px;
 }
 
-.reply-info strong {
-  color: var(--accent-primary);
-}
+/* [data-theme="dark"] .upload-notification-content {
+  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
+} */
 
-.cancel-reply {
+.notification-close-btn {
   background: none;
   border: none;
   color: var(--text-tertiary);
@@ -527,7 +475,7 @@
   transition: all 0.2s ease;
 }
 
-.cancel-reply:hover {
+.notification-close-btn:hover {
   background: var(--bg-secondary);
   color: var(--text-secondary);
 }

phd-advisor-frontend/src/styles/components.css

@@ -1,5 +1,3 @@
-/* components.css - General Component Styles */
-
 /* CSS Custom Properties for Theming */
 :root[data-theme="light"] {
   /* Background Colors */
@@ -215,6 +213,7 @@
   line-height: 1.6;
 }
 
+/* CTA Button */
 .cta-button {
   display: inline-flex;
   align-items: center;
@@ -241,6 +240,11 @@
   height: 24px;
 }
 
+.cta-arrow {
+  width: 20px;
+  height: 20px;
+}
+
 /* Advisors Grid */
 .advisors-grid {
   display: grid;
@@ -623,6 +627,15 @@
   margin: 0;
 }
 
+.thinking-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-style: italic;
+  margin-bottom: 8px;
+}
+
 .thinking-dots {
   display: flex;
   gap: 4px;
@@ -641,7 +654,7 @@
   margin-bottom: 0;
 }
 
-/* Chat Input */
+/* Basic Chat Input - SCOPED TO AVOID CONFLICTS */
 .input-area {
   border-top: 1px solid var(--border-primary);
   padding: 16px;
@@ -675,7 +688,8 @@
   box-shadow: var(--input-focus-shadow);
 }
 
-.send-button {
+/* IMPORTANT: Make send button styles specific to basic ChatInput only */
+.input-container .send-button {
   background: var(--accent-gradient);
   color: #FFFFFF;
   padding: 12px 24px;
@@ -689,23 +703,23 @@
   gap: 8px;
 }
 
-.send-button:hover:not(:disabled) {
+.input-container .send-button:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
 
-.send-button:disabled {
+.input-container .send-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
 }
 
-.send-icon {
+.input-container .send-icon {
   width: 20px;
   height: 20px;
 }
 
-.send-text {
+.input-container .send-text {
   display: none;
 }
 
@@ -755,7 +769,8 @@
     font-size: 13px;
   }
 
-  .send-text {
+  /* Basic ChatInput mobile styles */
+  .input-container .send-text {
     display: inline;
   }