Update app.py

app.py

@@ -29,29 +29,40 @@ client = Groq(api_key=os.getenv("GROQ_API_KEY"))
 # Initialize HuggingFace embeddings for FAISS
 embeddings = HuggingFaceEmbeddings(model_name="sentence-transformers/all-MiniLM-L6-v2")
 
-# Custom CSS with Silver, Blue, and Gold Theme + Responsiveness
+# Custom CSS with Modernized Silver, Blue, and Gold Theme + Responsiveness
 st.markdown("""
     <style>
     :root {
-        --silver: #D8D8D8;
+        --silver-light: #D8D8D8;
+        --silver-dark: #B8B8B8;
         --blue: #5C89BC;
+        --blue-dark: #4E73A0;
+        --blue-light: #6EA8E0;
         --gold: #A87E01;
         --text-color: #333333;
+        --shadow-color: rgba(0,0,0,0.1);
+        --shadow-color-stronger: rgba(0,0,0,0.2);
     }
     .stApp {
-        background-color: var(--silver);
+        background: linear-gradient(135deg, var(--silver-light) 0%, var(--silver-dark) 100%);
         font-family: 'Inter', sans-serif;
         max-width: 900px;
         margin: 0 auto;
         padding: 10px;
+        transition: all 0.3s ease;
     }
     .header {
-        background-color: var(--blue);
+        background: linear-gradient(90deg, var(--blue) 80%, var(--blue-dark) 100%);
         color: white;
-        padding: 15px;
-        border-radius: 5px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        padding: 20px;
+        border-radius: 16px 16px 0 0;
+        box-shadow: 0 4px 12px var(--shadow-color);
         text-align: center;
+        transition: transform 0.2s ease;
+    }
+    .header:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px var(--shadow-color-stronger);
     }
     .header-title {
         font-size: 1.5rem;
@@ -60,38 +71,57 @@ st.markdown("""
     }
     .header-subtitle {
         font-size: 0.9rem;
-        margin-top: 5px;
+        margin-top: 8px;
+        opacity: 0.9;
     }
     .sidebar .sidebar-content {
         background-color: white;
-        border-radius: 5px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        padding: 15px;
+        border-radius: 16px;
+        box-shadow: 0 6px 16px var(--shadow-color);
+        padding: 20px;
+        transition: box-shadow 0.3s ease;
+    }
+    .sidebar .sidebar-content:hover {
+        box-shadow: 0 8px 20px var(--shadow-color-stronger);
     }
     .chat-container {
         background-color: white;
-        border-radius: 5px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        padding: 15px;
-        margin-top: 20px;
+        border-radius: 16px;
+        box-shadow: 0 6px 16px var(--shadow-color);
+        padding: 20px;
+        margin-top: 25px;
+        transition: box-shadow 0.3s ease;
+    }
+    .chat-container:hover {
+        box-shadow: 0 8px 20px var(--shadow-color-stronger);
     }
     .user-message {
-        background-color: var(--blue);
+        background: linear-gradient(45deg, var(--blue), var(--blue-light));
         color: white;
-        border-radius: 18px 18px 4px 18px;
-        padding: 12px 16px;
+        border-radius: 20px 20px 6px 20px;
+        padding: 14px 18px;
         margin-left: auto;
         max-width: 80%;
-        margin-bottom: 10px;
+        margin-bottom: 12px;
+        box-shadow: 0 2px 8px var(--blue-dark);
+        transition: transform 0.2s ease;
+    }
+    .user-message:hover {
+        transform: scale(1.02);
     }
     .bot-message {
         background-color: #F0F0F0;
         color: var(--text-color);
-        border-radius: 18px 18px 18px 4px;
-        padding: 12px 16px;
+        border-radius: 20px 20px 20px 6px;
+        padding: 14px 18px;
         margin-right: auto;
         max-width: 80%;
-        margin-bottom: 10px;
+        margin-bottom: 12px;
+        box-shadow: 0 2px 8px var(--shadow-color);
+        transition: transform 0.2s ease;
+    }
+    .bot-message:hover {
+        transform: scale(1.02);
     }
     .footer {
         text-align: center;
@@ -112,17 +142,23 @@ st.markdown("""
         color: var(--blue);
         border-bottom: 2px solid var(--gold);
         padding-bottom: 5px;
+        font-size: 1.5rem;
+        font-weight: 700;
     }
     .stButton > button {
         background-color: var(--gold);
         color: white;
-        border-radius: 5px;
-        padding: 8px 16px;
+        border-radius: 12px;
+        padding: 10px 20px;
         border: none;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        box-shadow: 0 4px 12px var(--shadow-color);
+        font-weight: 600;
+        transition: all 0.3s ease;
     }
     .stButton > button:hover {
         background-color: #8C6B01;
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px var(--shadow-color-stronger);
     }
     @media (max-width: 768px) {
         .header-title {
@@ -144,7 +180,7 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-# Helper Functions (unchanged)
+# Helper Functions
 def enhance_section_title(title):
     st.markdown(f"<h2 style='border-bottom: 2px solid var(--gold); padding-bottom: 5px; color: var(--blue);'>{title}</h2>", unsafe_allow_html=True)