Update app.py

app.py

@@ -236,6 +236,8 @@ Answer:"""
 
 
 
+# STREAMLIT UI
+
 # STREAMLIT UI
 
 def main():
@@ -248,114 +250,114 @@ def main():
         layout="wide"
     )
 
-# Custom CSS for professional styling and centered layout
-st.markdown("""
-    <style>
-    /* Import Google Font */
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-
-    html, body, [class*="css"]  {
-        font-family: 'Inter', sans-serif;
-        color: #222; /* Default text color for light background */
-        background-color: #f9f9f9; /* Light background */
-    }
-
-    /* Center main container */
-    .main > div {
-        max-width: 900px;
-        margin: 0 auto;
-        padding: 2rem 1rem;
-    }
-
-    /* Header styling */
-    .header-container {
-        text-align: center;
-        padding: 2rem 0;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 15px;
-        margin-bottom: 2rem;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    }
-    .header-title {
-        color: #fff;
-        font-size: 2.5rem;
-        font-weight: 700;
-        margin-bottom: 0.5rem;
-    }
-    .header-subtitle {
-        color: rgba(255,255,255,0.9);
-        font-size: 1.1rem;
-    }
-
-    /* Answer box */
-    .answer-box {
-        background-color: #ffffff;
-        color: #222;
-        border-radius: 15px;
-        padding: 1.5rem;
-        margin: 1rem 0;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        border-left: 4px solid #667eea;
-    }
-
-    /* Source cards */
-    .source-card {
-        background-color: #f4f4f8;
-        color: #222;
-        border-radius: 10px;
-        padding: 1rem;
-        margin: 0.5rem 0;
-        border-left: 3px solid #764ba2;
-    }
-
-    /* Buttons */
-    .stButton > button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: #fff;
-        border: none;
-        border-radius: 8px;
-        padding: 0.5rem 2rem;
-        font-weight: 600;
-        transition: transform 0.2s, box-shadow 0.2s;
-    }
-    .stButton > button:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102,126,234,0.4);
-    }
-
-    /* Uploaded file box */
-    .uploadedFile {
-        background-color: #fff;
-        border-radius: 10px;
-        padding: 1rem;
-        border: 1px solid #e0e0e0;
-    }
-
-    /* Inputs */
-    .stTextInput > div > div > input,
-    .stTextArea > div > div > textarea {
-        border-radius: 8px;
-        border: 2px solid #e0e0e0;
-        padding: 0.75rem;
-        color: #222;
-        background-color: #fff;
-    }
-    .stTextInput > div > div > input:focus,
-    .stTextArea > div > div > textarea:focus {
-        border-color: #667eea;
-        box-shadow: 0 0 0 2px rgba(102,126,234,0.1);
-    }
-
-    /* Footer */
-    .footer {
-        text-align: center;
-        padding: 2rem 0;
-        margin-top: 3rem;
-        border-top: 1px solid #ddd;
-        color: #666;
-    }
-    </style>
-""", unsafe_allow_html=True)
+    # Custom CSS for professional styling and centered layout
+    st.markdown("""
+        <style>
+        /* Import Google Font */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+        html, body, [class*="css"]  {
+            font-family: 'Inter', sans-serif;
+            color: #222; /* Default text color for light background */
+            background-color: #f9f9f9; /* Light background */
+        }
+
+        /* Center main container */
+        .main > div {
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 2rem 1rem;
+        }
+
+        /* Header styling */
+        .header-container {
+            text-align: center;
+            padding: 2rem 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 15px;
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .header-title {
+            color: #fff;
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+        .header-subtitle {
+            color: rgba(255,255,255,0.9);
+            font-size: 1.1rem;
+        }
+
+        /* Answer box */
+        .answer-box {
+            background-color: #ffffff;
+            color: #222;
+            border-radius: 15px;
+            padding: 1.5rem;
+            margin: 1rem 0;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            border-left: 4px solid #667eea;
+        }
+
+        /* Source cards */
+        .source-card {
+            background-color: #f4f4f8;
+            color: #222;
+            border-radius: 10px;
+            padding: 1rem;
+            margin: 0.5rem 0;
+            border-left: 3px solid #764ba2;
+        }
+
+        /* Buttons */
+        .stButton > button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            padding: 0.5rem 2rem;
+            font-weight: 600;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .stButton > button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102,126,234,0.4);
+        }
+
+        /* Uploaded file box */
+        .uploadedFile {
+            background-color: #fff;
+            border-radius: 10px;
+            padding: 1rem;
+            border: 1px solid #e0e0e0;
+        }
+
+        /* Inputs */
+        .stTextInput > div > div > input,
+        .stTextArea > div > div > textarea {
+            border-radius: 8px;
+            border: 2px solid #e0e0e0;
+            padding: 0.75rem;
+            color: #222;
+            background-color: #fff;
+        }
+        .stTextInput > div > div > input:focus,
+        .stTextArea > div > div > textarea:focus {
+            border-color: #667eea;
+            box-shadow: 0 0 0 2px rgba(102,126,234,0.1);
+        }
+
+        /* Footer */
+        .footer {
+            text-align: center;
+            padding: 2rem 0;
+            margin-top: 3rem;
+            border-top: 1px solid #ddd;
+            color: #666;
+        }
+        </style>
+    """, unsafe_allow_html=True)
 
     # Header Section with gradient background
     st.markdown("""