add dark theme

phd-advisor-frontend/src/App.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { ThemeProvider } from './contexts/ThemeContext';
 import HomePage from './pages/HomePage';
 import ChatPage from './pages/ChatPage';
 import './styles/components.css';
@@ -22,13 +23,15 @@ function App() {
   };
 
   return (
-    <div className="App">
-      {currentView === 'home' ? (
-        <HomePage onNavigateToChat={navigateToChat} />
-      ) : (
-        <ChatPage onNavigateToHome={navigateToHome} />
-      )}
-    </div>
+    <ThemeProvider>
+      <div className="App">
+        {currentView === 'home' ? (
+          <HomePage onNavigateToChat={navigateToChat} />
+        ) : (
+          <ChatPage onNavigateToHome={navigateToHome} />
+        )}
+      </div>
+    </ThemeProvider>
   );
 }
 

phd-advisor-frontend/src/components/AdvisorCard.js

@@ -1,20 +1,24 @@
 import React from 'react';
+import { getAdvisorColors } from '../data/advisors';
+import { useTheme } from '../contexts/ThemeContext';
 
-const AdvisorCard = ({ advisor }) => {
+const AdvisorCard = ({ advisor, advisorId }) => {
   const Icon = advisor.icon;
+  const { isDark } = useTheme();
+  const colors = getAdvisorColors(advisorId, isDark);
 
   return (
     <div className="advisor-card">
       <div 
         className="advisor-card-icon" 
-        style={{ backgroundColor: advisor.bgColor }}
+        style={{ backgroundColor: colors.bgColor }}
       >
-        <Icon style={{ color: advisor.color }} />
+        <Icon style={{ color: colors.color }} />
       </div>
       <h3 className="advisor-card-title">{advisor.name}</h3>
       <p 
         className="advisor-card-role" 
-        style={{ color: advisor.color }}
+        style={{ color: colors.color }}
       >
         {advisor.role}
       </p>

phd-advisor-frontend/src/components/MessageBubble.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import { advisors } from '../data/advisors';
+import { advisors, getAdvisorColors } from '../data/advisors';
+import { useTheme } from '../contexts/ThemeContext';
 
 const MessageBubble = ({ message }) => {
+  const { isDark } = useTheme();
+
   if (message.type === 'user') {
     return (
       <div className="user-message-container">
@@ -15,31 +18,51 @@ const MessageBubble = ({ message }) => {
   if (message.type === 'advisor') {
     const advisor = advisors[message.advisorId];
     const Icon = advisor.icon;
+    const colors = getAdvisorColors(message.advisorId, isDark);
 
     return (
       <div className="advisor-message-container">
         <div 
           className="advisor-avatar" 
-          style={{ backgroundColor: advisor.bgColor }}
+          style={{ backgroundColor: colors.bgColor }}
         >
-          <Icon style={{ color: advisor.color }} />
+          <Icon style={{ color: colors.color }} />
         </div>
-        <div className="advisor-message-bubble">
+        <div 
+          className="advisor-message-bubble"
+          style={{ 
+            backgroundColor: colors.bgColor,
+            borderColor: colors.color + '40' // Adding transparency to the border
+          }}
+        >
           <div className="advisor-message-header">
             <h4 
               className="advisor-message-name" 
-              style={{ color: advisor.color }}
+              style={{ color: colors.color }}
             >
               {advisor.name}
             </h4>
-            <span className="message-time">
+            <span 
+              className="message-time"
+              style={{ 
+                color: colors.color,
+                opacity: 0.7 
+              }}
+            >
               {message.timestamp.toLocaleTimeString([], {
                 hour: '2-digit', 
                 minute: '2-digit'
               })}
             </span>
           </div>
-          <p className="advisor-message-text">{message.content}</p>
+          <p 
+            className="advisor-message-text"
+            style={{ 
+              color: colors.textColor
+            }}
+          >
+            {message.content}
+          </p>
         </div>
       </div>
     );

phd-advisor-frontend/src/components/ThinkingIndicator.js

@@ -1,23 +1,32 @@
 import React from 'react';
-import { advisors } from '../data/advisors';
+import { advisors, getAdvisorColors } from '../data/advisors';
+import { useTheme } from '../contexts/ThemeContext';
 
 const ThinkingIndicator = ({ advisorId }) => {
   const advisor = advisors[advisorId];
   const Icon = advisor.icon;
+  const { isDark } = useTheme();
+  const colors = getAdvisorColors(advisorId, isDark);
 
   return (
     <div className="thinking-container">
       <div 
         className="advisor-avatar" 
-        style={{ backgroundColor: advisor.bgColor }}
+        style={{ backgroundColor: colors.bgColor }}
       >
-        <Icon style={{ color: advisor.color }} />
+        <Icon style={{ color: colors.color }} />
       </div>
-      <div className="thinking-bubble">
+      <div 
+        className="thinking-bubble"
+        style={{ 
+          backgroundColor: colors.bgColor,
+          borderColor: colors.color + '40' // Adding transparency to the border
+        }}
+      >
         <div className="thinking-header">
           <h4 
             className="advisor-name" 
-            style={{ color: advisor.color }}
+            style={{ color: colors.color }}
           >
             {advisor.name}
           </h4>
@@ -26,26 +35,34 @@ const ThinkingIndicator = ({ advisorId }) => {
           <div 
             className="thinking-dot" 
             style={{ 
-              backgroundColor: advisor.color, 
+              backgroundColor: colors.color, 
               animationDelay: '0ms' 
             }}
           ></div>
           <div 
             className="thinking-dot" 
             style={{ 
-              backgroundColor: advisor.color, 
+              backgroundColor: colors.color, 
               animationDelay: '150ms' 
             }}
           ></div>
           <div 
             className="thinking-dot" 
             style={{ 
-              backgroundColor: advisor.color, 
+              backgroundColor: colors.color, 
               animationDelay: '300ms' 
             }}
           ></div>
         </div>
-        <p className="thinking-text">thinking...</p>
+        <p 
+          className="thinking-text"
+          style={{ 
+            color: colors.color,
+            opacity: 0.8 
+          }}
+        >
+          thinking...
+        </p>
       </div>
     </div>
   );

phd-advisor-frontend/src/data/advisors.js

@@ -4,25 +4,57 @@ export const advisors = {
   methodist: {
     name: 'Dr. Methodist',
     role: 'Methodical Advisor',
+    // Light theme colors
     color: '#3B82F6',
     bgColor: '#EFF6FF',
+    // Dark theme colors
+    darkColor: '#60A5FA',
+    darkBgColor: '#1E3A8A',
+    // Icon and description
     icon: BookOpen,
     description: 'Structured & Planning-focused'
   },
   theorist: {
     name: 'Dr. Theorist',
     role: 'Theoretical Advisor',
+    // Light theme colors
     color: '#8B5CF6',
     bgColor: '#F3E8FF',
+    // Dark theme colors
+    darkColor: '#A78BFA',
+    darkBgColor: '#581C87',
+    // Icon and description
     icon: Brain,
     description: 'Abstract & Conceptual'
   },
   pragmatist: {
     name: 'Dr. Pragmatist',
     role: 'Practical Advisor',
+    // Light theme colors
     color: '#10B981',
     bgColor: '#ECFDF5',
+    // Dark theme colors
+    darkColor: '#34D399',
+    darkBgColor: '#065F46',
+    // Icon and description
     icon: Target,
     description: 'Real-world & Outcome-focused'
   }
+};
+
+// Helper function to get theme-appropriate colors
+export const getAdvisorColors = (advisorId, isDark = false) => {
+  const advisor = advisors[advisorId];
+  if (!advisor) return { color: '#6B7280', bgColor: '#F3F4F6' };
+  
+  return {
+    color: isDark ? advisor.darkColor : advisor.color,
+    bgColor: isDark ? advisor.darkBgColor : advisor.bgColor,
+    // For text that needs to be readable on colored backgrounds
+    textColor: isDark ? '#F9FAFB' : 
+                advisor.color === '#10B981' ? '#047857' : // Darker green for pragmatist
+                advisor.color === '#3B82F6' ? '#1D4ED8' : // Darker blue for methodist  
+                advisor.color === '#8B5CF6' ? '#7C3AED' : // Darker purple for theorist
+                '#374151' // fallback
+  };
 };

phd-advisor-frontend/src/pages/ChatPage.js

@@ -3,7 +3,10 @@ import { Home, MessageCircle } from 'lucide-react';
 import ChatInput from '../components/ChatInput';
 import MessageBubble from '../components/MessageBubble';
 import ThinkingIndicator from '../components/ThinkingIndicator';
-import { advisors } from '../data/advisors';
+import SuggestionsPanel from '../components/SuggestionsPanel';
+import ThemeToggle from '../components/ThemeToggle';
+import { advisors, getAdvisorColors } from '../data/advisors';
+import { useTheme } from '../contexts/ThemeContext';
 
 const ChatPage = ({ onNavigateToHome }) => {
   const [messages, setMessages] = useState([]);
@@ -11,6 +14,7 @@ const ChatPage = ({ onNavigateToHome }) => {
   const [thinkingAdvisors, setThinkingAdvisors] = useState([]);
   const [collectedInfo, setCollectedInfo] = useState({});
   const messagesEndRef = useRef(null);
+  const { isDark } = useTheme();
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -120,6 +124,10 @@ const ChatPage = ({ onNavigateToHome }) => {
     }
   };
 
+  const handleSuggestionClick = (suggestion) => {
+    handleSendMessage(suggestion);
+  };
+
   return (
     <div className="chat-page">
       {/* Header */}
@@ -137,24 +145,28 @@ const ChatPage = ({ onNavigateToHome }) => {
               <p className="chat-subtitle">
                 {Object.keys(collectedInfo).length > 0 
                   ? `Context: ${Object.entries(collectedInfo).map(([k,v]) => `${k}: ${v}`).join(', ')}`
-                  : 'Consulting with your three advisors'
+                  : 'Consulting with personas'
                 }
               </p>
             </div>
           </div>
-          <div className="advisor-indicators">
-            {Object.entries(advisors).map(([id, advisor]) => {
-              const Icon = advisor.icon;
-              return (
-                <div 
-                  key={id} 
-                  className="advisor-indicator" 
-                  style={{ backgroundColor: advisor.bgColor }}
-                >
-                  <Icon style={{ color: advisor.color }} />
-                </div>
-              );
-            })}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <div className="advisor-indicators">
+              {Object.entries(advisors).map(([id, advisor]) => {
+                const Icon = advisor.icon;
+                const colors = getAdvisorColors(id, isDark);
+                return (
+                  <div 
+                    key={id} 
+                    className="advisor-indicator" 
+                    style={{ backgroundColor: colors.bgColor }}
+                  >
+                    <Icon style={{ color: colors.color }} />
+                  </div>
+                );
+              })}
+            </div>
+            <ThemeToggle />
           </div>
         </div>
       </header>
@@ -165,37 +177,29 @@ const ChatPage = ({ onNavigateToHome }) => {
           {/* Messages */}
           <div className="messages-container">
             {messages.length === 0 && (
-              <div className="empty-state">
-                <div className="empty-state-icon">
-                  <MessageCircle />
-                </div>
-                <h3 className="empty-state-title">Start Your Consultation</h3>
-                <p className="empty-state-text">
-                  Ask a question and get insights from all three advisors
-                </p>
-              </div>
+              <SuggestionsPanel onSuggestionClick={handleSuggestionClick} />
             )}
             
             {messages.map((message, index) => {
               if (message.type === 'orchestrator') {
                 return (
                   <div key={index} className="advisor-message-container">
-                    <div className="advisor-avatar" style={{ backgroundColor: '#F3F4F6' }}>
-                      <MessageCircle style={{ color: '#6B7280' }} />
+                    <div className="advisor-avatar orchestrator-avatar">
+                      <MessageCircle className="orchestrator-icon" />
                     </div>
-                    <div className="advisor-message-bubble">
+                    <div className="advisor-message-bubble orchestrator-bubble">
                       <div className="advisor-message-header">
-                        <h4 className="advisor-message-name" style={{ color: '#6B7280' }}>
+                        <h4 className="advisor-message-name orchestrator-name">
                           PhD Assistant
                         </h4>
-                        <span className="message-time">
+                        <span className="message-time orchestrator-time">
                           {message.timestamp.toLocaleTimeString([], {
                             hour: '2-digit', 
                             minute: '2-digit'
                           })}
                         </span>
                       </div>
-                      <p className="advisor-message-text">{message.content}</p>
+                      <p className="advisor-message-text orchestrator-text">{message.content}</p>
                     </div>
                   </div>
                 );
@@ -206,21 +210,21 @@ const ChatPage = ({ onNavigateToHome }) => {
             {/* Thinking Indicators */}
             {thinkingAdvisors.includes('system') && (
               <div className="thinking-container">
-                <div className="advisor-avatar" style={{ backgroundColor: '#F3F4F6' }}>
-                  <MessageCircle style={{ color: '#6B7280' }} />
+                <div className="advisor-avatar orchestrator-avatar">
+                  <MessageCircle className="orchestrator-icon" />
                 </div>
-                <div className="thinking-bubble">
+                <div className="thinking-bubble orchestrator-bubble">
                   <div className="thinking-header">
-                    <h4 className="advisor-name" style={{ color: '#6B7280' }}>
+                    <h4 className="advisor-name orchestrator-name">
                       Processing...
                     </h4>
                   </div>
                   <div className="thinking-dots">
-                    <div className="thinking-dot" style={{ backgroundColor: '#6B7280', animationDelay: '0ms' }}></div>
-                    <div className="thinking-dot" style={{ backgroundColor: '#6B7280', animationDelay: '150ms' }}></div>
-                    <div className="thinking-dot" style={{ backgroundColor: '#6B7280', animationDelay: '300ms' }}></div>
+                    <div className="thinking-dot orchestrator-dot" style={{ animationDelay: '0ms' }}></div>
+                    <div className="thinking-dot orchestrator-dot" style={{ animationDelay: '150ms' }}></div>
+                    <div className="thinking-dot orchestrator-dot" style={{ animationDelay: '300ms' }}></div>
                   </div>
-                  <p className="thinking-text">analyzing your question...</p>
+                  <p className="thinking-text orchestrator-thinking-text">analyzing your question...</p>
                 </div>
               </div>
             )}

phd-advisor-frontend/src/pages/HomePage.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { MessageCircle, Users, Target, Brain, ArrowRight } from 'lucide-react';
 import AdvisorCard from '../components/AdvisorCard';
+import ThemeToggle from '../components/ThemeToggle';
 import { advisors } from '../data/advisors';
 
 const HomePage = ({ onNavigateToChat }) => {
@@ -18,6 +19,9 @@ const HomePage = ({ onNavigateToChat }) => {
               <p className="logo-subtitle">Your AI-powered academic advisors</p>
             </div>
           </div>
+          <div className="header-right">
+            <ThemeToggle />
+          </div>
         </div>
       </header>
 
@@ -25,7 +29,7 @@ const HomePage = ({ onNavigateToChat }) => {
       <main className="main">
         <div className="hero-section">
           <h2 className="hero-title">
-            Get Guidance from <span className="hero-highlight">Three Expert Advisors</span>
+            Get Guidance from <span className="hero-highlight">Advisor Personas</span>
           </h2>
           <p className="hero-subtitle">
             Receive diverse perspectives on your PhD journey from our specialized AI advisors, 
@@ -44,7 +48,7 @@ const HomePage = ({ onNavigateToChat }) => {
         {/* Advisors Grid */}
         <div className="advisors-grid">
           {Object.entries(advisors).map(([id, advisor]) => (
-            <AdvisorCard key={id} advisor={advisor} />
+            <AdvisorCard key={id} advisor={advisor} advisorId={id} />
           ))}
         </div>
 

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

@@ -1,13 +1,131 @@
+/* CSS Custom Properties for Theming */
+:root[data-theme="light"] {
+  /* Background Colors */
+  --bg-primary: #FFFFFF;
+  --bg-secondary: #F9FAFB;
+  --bg-tertiary: #F3F4F6;
+  --bg-gradient: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 50%, #F3E8FF 100%);
+  
+  /* Text Colors */
+  --text-primary: #111827;
+  --text-secondary: #6B7280;
+  --text-tertiary: #9CA3AF;
+  --text-accent: #374151;
+  
+  /* Border Colors */
+  --border-primary: #E5E7EB;
+  --border-secondary: #D1D5DB;
+  --border-tertiary: #F3F4F6;
+  
+  /* Accent Colors */
+  --accent-primary: #6366F1;
+  --accent-secondary: #8B5CF6;
+  --accent-gradient: linear-gradient(135deg, #6366F1, #8B5CF6);
+  
+  /* Shadow Colors */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  
+  /* Feature Colors */
+  --feature-bg: #EFF6FF;
+  --feature-icon-color: #6366F1;
+  
+  /* Error Colors */
+  --error-bg: #FEF2F2;
+  --error-border: #FECACA;
+  --error-text: #DC2626;
+  
+  /* Input Colors */
+  --input-bg: #FFFFFF;
+  --input-border: #D1D5DB;
+  --input-focus: #6366F1;
+  --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+:root[data-theme="dark"] {
+  /* Background Colors */
+  --bg-primary: #1F2937;
+  --bg-secondary: #111827;
+  --bg-tertiary: #374151;
+  --bg-gradient: linear-gradient(135deg, #1F2937 0%, #111827 50%, #374151 100%);
+  
+  /* Text Colors */
+  --text-primary: #F9FAFB;
+  --text-secondary: #D1D5DB;
+  --text-tertiary: #9CA3AF;
+  --text-accent: #E5E7EB;
+  
+  /* Border Colors */
+  --border-primary: #374151;
+  --border-secondary: #4B5563;
+  --border-tertiary: #6B7280;
+  
+  /* Accent Colors */
+  --accent-primary: #818CF8;
+  --accent-secondary: #A78BFA;
+  --accent-gradient: linear-gradient(135deg, #818CF8, #A78BFA);
+  
+  /* Shadow Colors */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  
+  /* Feature Colors */
+  --feature-bg: #374151;
+  --feature-icon-color: #818CF8;
+  
+  /* Error Colors */
+  --error-bg: #7F1D1D;
+  --error-border: #DC2626;
+  --error-text: #FCA5A5;
+  
+  /* Input Colors */
+  --input-bg: #374151;
+  --input-border: #4B5563;
+  --input-focus: #818CF8;
+  --input-focus-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
+}
+
+/* Theme Toggle Button */
+.theme-toggle {
+  padding: 8px;
+  background-color: transparent;
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.theme-toggle:hover {
+  background-color: var(--bg-tertiary);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+}
+
+.theme-icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* Updated Component Styles with Theme Variables */
+
 /* Homepage Styles */
 .homepage {
   min-height: 100vh;
-  background: linear-gradient(135deg, #EFF6FF 0%, #FFFFFF 50%, #F3E8FF 100%);
+  background: var(--bg-gradient);
 }
 
 .header {
-  background-color: #FFFFFF;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid #E5E7EB;
+  background-color: var(--bg-primary);
+  box-shadow: var(--shadow-sm);
+  border-bottom: 1px solid var(--border-primary);
 }
 
 .header-content {
@@ -25,10 +143,16 @@
   gap: 12px;
 }
 
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 .logo-container {
   width: 40px;
   height: 40px;
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  background: var(--accent-gradient);
   border-radius: 8px;
   display: flex;
   align-items: center;
@@ -44,13 +168,13 @@
 .logo-title {
   font-size: 20px;
   font-weight: bold;
-  color: #111827;
+  color: var(--text-primary);
   margin: 0;
 }
 
 .logo-subtitle {
   font-size: 14px;
-  color: #6B7280;
+  color: var(--text-secondary);
   margin: 0;
 }
 
@@ -68,13 +192,13 @@
 .hero-title {
   font-size: 48px;
   font-weight: bold;
-  color: #111827;
+  color: var(--text-primary);
   margin-bottom: 24px;
   line-height: 1.1;
 }
 
 .hero-highlight {
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  background: var(--accent-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -82,7 +206,7 @@
 
 .hero-subtitle {
   font-size: 20px;
-  color: #6B7280;
+  color: var(--text-secondary);
   max-width: 768px;
   margin: 0 auto 32px auto;
   line-height: 1.6;
@@ -92,7 +216,7 @@
   display: inline-flex;
   align-items: center;
   gap: 12px;
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  background: var(--accent-gradient);
   color: #FFFFFF;
   padding: 16px 32px;
   border-radius: 12px;
@@ -100,7 +224,7 @@
   font-weight: 600;
   border: none;
   cursor: pointer;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
   transition: all 0.3s ease;
   text-decoration: none;
 }
@@ -128,16 +252,16 @@
 }
 
 .advisor-card {
-  background-color: #FFFFFF;
+  background-color: var(--bg-primary);
   border-radius: 16px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
   padding: 32px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border-primary);
   transition: box-shadow 0.3s ease;
 }
 
 .advisor-card:hover {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-lg);
 }
 
 .advisor-card-icon {
@@ -158,7 +282,7 @@
 .advisor-card-title {
   font-size: 24px;
   font-weight: bold;
-  color: #111827;
+  color: var(--text-primary);
   margin-bottom: 8px;
 }
 
@@ -169,24 +293,24 @@
 }
 
 .advisor-card-description {
-  color: #6B7280;
+  color: var(--text-secondary);
   line-height: 1.6;
   margin: 0;
 }
 
 /* Features Section */
 .features-section {
-  background-color: #FFFFFF;
+  background-color: var(--bg-primary);
   border-radius: 24px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-xl);
   padding: 48px;
-  border: 1px solid #E5E7EB;
+  border: 1px solid var(--border-primary);
 }
 
 .features-title {
   font-size: 32px;
   font-weight: bold;
-  color: #111827;
+  color: var(--text-primary);
   text-align: center;
   margin-bottom: 48px;
 }
@@ -204,7 +328,7 @@
 .feature-icon {
   width: 48px;
   height: 48px;
-  background-color: #EFF6FF;
+  background-color: var(--feature-bg);
   border-radius: 12px;
   display: flex;
   align-items: center;
@@ -215,260 +339,32 @@
 .feature-icon svg {
   width: 24px;
   height: 24px;
-  color: #6366F1;
+  color: var(--feature-icon-color);
 }
 
 .feature-title {
   font-weight: 600;
-  color: #111827;
+  color: var(--text-primary);
   margin-bottom: 8px;
   font-size: 18px;
 }
 
 .feature-description {
-  color: #6B7280;
+  color: var(--text-secondary);
   margin: 0;
   line-height: 1.6;
 }
 
-/* Clarification Flow Styles */
-.clarification-flow {
-  background-color: #FFFFFF;
-  border-radius: 16px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  padding: 24px;
-  margin: 24px auto;
-  max-width: 600px;
-  border: 1px solid #E5E7EB;
-}
-
-.clarification-header {
-  text-align: center;
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #F3F4F6;
-}
-
-.clarification-icon {
-  width: 48px;
-  height: 48px;
-  background-color: #EFF6FF;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 16px auto;
-}
-
-.clarification-icon svg {
-  width: 24px;
-  height: 24px;
-}
-
-.clarification-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #111827;
-  margin-bottom: 8px;
-}
-
-.clarification-subtitle {
-  font-size: 14px;
-  color: #6B7280;
-  margin: 0;
-}
-
-.clarification-conversation {
-  max-height: 300px;
-  overflow-y: auto;
-  margin-bottom: 16px;
-}
-
-.clarification-message {
-  margin-bottom: 12px;
-}
-
-.user-clarification-message {
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
-  color: #FFFFFF;
-  border-radius: 12px;
-  padding: 10px 16px;
-  margin-left: auto;
-  max-width: 80%;
-  width: fit-content;
-}
-
-.user-clarification-message p {
-  margin: 0;
-  font-size: 14px;
-}
-
-.system-clarification-message {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  background-color: #F9FAFB;
-  border-radius: 12px;
-  padding: 12px 16px;
-  max-width: 90%;
-}
-
-.system-clarification-message p {
-  margin: 0;
-  font-size: 14px;
-  color: #374151;
-  line-height: 1.5;
-}
-
-.current-question {
-  margin-bottom: 16px;
-  padding: 16px;
-  background-color: #EFF6FF;
-  border-radius: 12px;
-  border-left: 4px solid #6366F1;
-}
-
-.collected-info {
-  background-color: #F0FDF4;
-  border-radius: 12px;
-  padding: 16px;
-  margin-bottom: 16px;
-  border-left: 4px solid #10B981;
-}
-
-.collected-info h4 {
-  margin: 0 0 12px 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #065F46;
-}
-
-.info-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.info-tag {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background-color: #DCFCE7;
-  color: #166534;
-  padding: 4px 8px;
-  border-radius: 6px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.info-tag svg {
-  width: 14px;
-  height: 14px;
-}
-
-.clarification-input-area {
-  border-top: 1px solid #F3F4F6;
-  padding-top: 16px;
-}
-
-.clarification-input-container {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.clarification-input {
-  width: 100%;
-  resize: none;
-  border: 1px solid #D1D5DB;
-  border-radius: 8px;
-  padding: 12px;
-  font-size: 14px;
-  font-family: inherit;
-  outline: none;
-  transition: border-color 0.2s ease;
-}
-
-.clarification-input:focus {
-  border-color: #6366F1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-}
-
-.clarification-buttons {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.clarification-submit-btn {
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
-  color: #FFFFFF;
-  padding: 8px 16px;
-  border-radius: 8px;
-  border: none;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-}
-
-.clarification-submit-btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-}
-
-.clarification-submit-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.clarification-skip-btn {
-  background-color: #F3F4F6;
-  color: #6B7280;
-  padding: 8px 16px;
-  border-radius: 8px;
-  border: none;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-}
-
-.clarification-skip-btn:hover {
-  background-color: #E5E7EB;
-  color: #374151;
-}
-
-.clarification-cancel-btn {
-  background-color: transparent;
-  color: #DC2626;
-  padding: 8px 16px;
-  border-radius: 8px;
-  border: 1px solid #FCA5A5;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-}
-
-.clarification-cancel-btn:hover {
-  background-color: #FEF2F2;
-}
-
 /* Chat Page Styles */
 .chat-page {
   min-height: 100vh;
-  background-color: #F9FAFB;
+  background-color: var(--bg-secondary);
 }
 
 .chat-header {
-  background-color: #FFFFFF;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid #E5E7EB;
+  background-color: var(--bg-primary);
+  box-shadow: var(--shadow-sm);
+  border-bottom: 1px solid var(--border-primary);
   position: sticky;
   top: 0;
   z-index: 10;
@@ -499,25 +395,25 @@
 }
 
 .home-button:hover {
-  background-color: #F3F4F6;
+  background-color: var(--bg-tertiary);
 }
 
 .home-icon {
   width: 20px;
   height: 20px;
-  color: #6B7280;
+  color: var(--text-secondary);
 }
 
 .chat-title {
   font-size: 18px;
   font-weight: 600;
-  color: #111827;
+  color: var(--text-primary);
   margin: 0;
 }
 
 .chat-subtitle {
   font-size: 14px;
-  color: #6B7280;
+  color: var(--text-secondary);
   margin: 0;
 }
 
@@ -549,9 +445,9 @@
 }
 
 .chat-box {
-  background-color: #FFFFFF;
+  background-color: var(--bg-primary);
   border-radius: 16px;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
   height: calc(100vh - 200px);
   display: flex;
   flex-direction: column;
@@ -566,42 +462,146 @@
   gap: 16px;
 }
 
-/* Empty State */
-.empty-state {
+/* Suggestions Panel */
+.suggestions-panel {
+  padding: 32px 0;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.suggestions-header {
   text-align: center;
-  padding: 48px 0;
+  margin-bottom: 32px;
 }
 
-.empty-state-icon {
-  width: 64px;
-  height: 64px;
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
-  border-radius: 16px;
+.suggestions-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.suggestions-subtitle {
+  font-size: 16px;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.suggestions-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+}
+
+.suggestion-category {
+  background-color: var(--bg-primary);
+  border-radius: 12px;
+  border: 1px solid var(--border-primary);
+  padding: 20px;
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+}
+
+.suggestion-category:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.category-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin: 0 auto 16px auto;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-tertiary);
 }
 
-.empty-state-icon svg {
-  width: 32px;
-  height: 32px;
-  color: #FFFFFF;
+.category-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.empty-state-title {
-  font-size: 18px;
+.category-title {
+  font-size: 16px;
   font-weight: 600;
-  color: #111827;
-  margin-bottom: 8px;
+  margin: 0;
+  line-height: 1.3;
+  color: var(--text-primary);
 }
 
-.empty-state-text {
-  color: #6B7280;
-  margin: 0;
+.suggestion-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.suggestion-button {
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  padding: 12px 16px;
+  text-align: left;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--text-accent);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+}
+
+.suggestion-button:hover {
+  background-color: var(--bg-tertiary);
+  border-color: var(--accent-primary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
 }
 
-/* Message Bubbles */
+.suggestion-button:active {
+  transform: translateY(0);
+}
+
+/* Orchestrator/PhD Assistant Styles */
+.orchestrator-avatar {
+  background-color: var(--bg-tertiary) !important;
+}
+
+.orchestrator-icon {
+  color: var(--text-secondary) !important;
+}
+
+.orchestrator-bubble {
+  background-color: var(--bg-tertiary) !important;
+  border-color: var(--border-secondary) !important;
+}
+
+.orchestrator-name {
+  color: var(--text-secondary) !important;
+}
+
+.orchestrator-time {
+  color: var(--text-tertiary) !important;
+}
+
+.orchestrator-text {
+  color: var(--text-accent) !important;
+}
+
+.orchestrator-dot {
+  background-color: var(--text-secondary) !important;
+}
+
+.orchestrator-thinking-text {
+  color: var(--text-secondary) !important;
+  opacity: 0.8;
+}
 .user-message-container {
   display: flex;
   justify-content: flex-end;
@@ -609,7 +609,7 @@
 }
 
 .user-message {
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  background: var(--accent-gradient);
   color: #FFFFFF;
   border-radius: 16px;
   padding: 12px 24px;
@@ -643,10 +643,9 @@
 }
 
 .advisor-message-bubble {
-  background-color: #FFFFFF;
   border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  border: 1px solid #E5E7EB;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid;
   padding: 16px;
   max-width: 512px;
 }
@@ -665,11 +664,9 @@
 
 .message-time {
   font-size: 12px;
-  color: #9CA3AF;
 }
 
 .advisor-message-text {
-  color: #374151;
   line-height: 1.6;
   margin: 0;
 }
@@ -682,9 +679,9 @@
 }
 
 .error-message {
-  background-color: #FEF2F2;
-  border: 1px solid #FECACA;
-  color: #DC2626;
+  background-color: var(--error-bg);
+  border: 1px solid var(--error-border);
+  color: var(--error-text);
   border-radius: 12px;
   padding: 12px 16px;
   max-width: 384px;
@@ -704,10 +701,9 @@
 }
 
 .thinking-bubble {
-  background-color: #FFFFFF;
   border-radius: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  border: 1px solid #E5E7EB;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid;
   padding: 16px;
   max-width: 288px;
 }
@@ -739,14 +735,13 @@
 
 .thinking-text {
   font-size: 14px;
-  color: #6B7280;
   margin-top: 4px;
   margin-bottom: 0;
 }
 
 /* Chat Input */
 .input-area {
-  border-top: 1px solid #E5E7EB;
+  border-top: 1px solid var(--border-primary);
   padding: 16px;
 }
 
@@ -758,22 +753,28 @@
 .message-input {
   flex: 1;
   resize: none;
-  border: 1px solid #D1D5DB;
+  border: 1px solid var(--input-border);
   border-radius: 12px;
   padding: 12px 16px;
   font-size: 14px;
   font-family: inherit;
   outline: none;
   transition: border-color 0.2s ease;
+  background-color: var(--input-bg);
+  color: var(--text-primary);
+}
+
+.message-input::placeholder {
+  color: var(--text-secondary);
 }
 
 .message-input:focus {
-  border-color: #6366F1;
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  border-color: var(--input-focus);
+  box-shadow: var(--input-focus-shadow);
 }
 
 .send-button {
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  background: var(--accent-gradient);
   color: #FFFFFF;
   padding: 12px 24px;
   border-radius: 12px;
@@ -788,7 +789,7 @@
 
 .send-button:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+  box-shadow: var(--shadow-md);
 }
 
 .send-button:disabled {
@@ -806,8 +807,85 @@
   display: none;
 }
 
-@media (min-width: 640px) {
+/* Animations */
+@keyframes bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+  .suggestions-panel {
+    padding: 24px 16px;
+  }
+  
+  .suggestion-category {
+    padding: 18px;
+    min-height: 180px;
+  }
+}
+
+@media (max-width: 768px) {
+  .suggestions-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .suggestions-panel {
+    padding: 24px 16px;
+  }
+  
+  .suggestions-title {
+    font-size: 24px;
+  }
+  
+  .suggestion-category {
+    padding: 16px;
+    min-height: auto;
+  }
+  
+  .suggestion-button {
+    padding: 10px 14px;
+    font-size: 13px;
+  }
+
   .send-text {
     display: inline;
   }
+
+  .hero-title {
+    font-size: 36px;
+  }
+
+  .hero-subtitle {
+    font-size: 18px;
+  }
+
+  .advisors-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .chat-header-content {
+    padding: 12px 16px;
+  }
+
+  .chat-container {
+    padding: 16px;
+  }
+
+  .chat-box {
+    height: calc(100vh - 160px);
+  }
+
+  .messages-container {
+    padding: 16px;
+  }
 }