Moved CSS

The CSS was moved to its own file. The style sheet has been linked to

app.py

@@ -222,228 +222,6 @@ def respond_with_enhanced_streaming(message, history):
 # UI CONFIGURATION SECTION - ALL UI RELATED CODE CENTRALIZED HERE
 # ===============================================================================
 
-# --- UI: Custom CSS Styles ---
-custom_css = """
-/* Import Oswald font - Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
-
-/* HIDE the HTML components that create scrollbars */
-#component-1, #component-2, #component-3 {
-    display: none !important;
-    height: 0 !important;
-    min-height: 0 !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    visibility: hidden !important;
-}
-
-}
-
-/* Apply Oswald globally */
-*, *::before, *::after {
-    font-family: "Oswald", sans-serif !important;
-    color: #120f0e !important;
-}
-
-.title-header {
-    background-color: rgb(240, 236, 230) !important;
-    padding: 10px 20px;
-    margin: 0 !important;
-    border-bottom: 1pt solid #59524f;
-    text-align: left;
-    flex-shrink: 0 !important;
-    height: 60px !important;
-    display: flex !important;
-    align-items: center !important;
-    width: 100% !important;
-}
-
-.title-header h1 {
-    font-size: 1.5rem;
-    font-weight: 600 !important;
-    color: #120f0e !important;
-    margin: 0;
-    padding: 0;
-}
-
-/* Input controls styling - acts as footer */
-.input-controls {
-    padding: 15px 20px !important;
-    background-color: rgb(240, 236, 230) !important;
-    border-top: 1pt solid #59524f;
-    flex-shrink: 0 !important;
-    width: 100% !important;
-}
-
-/* Main container styling - viewport height with no top margin */
-.gradio-container-5-42-0 {
-    background-color: rgb(240, 236, 230) !important;
-    font-family: "Oswald", sans-serif !important;
-    color: #120f0e !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
-    overflow: hidden !important;
-    display: flex !important;
-    flex-direction: column !important;
-}
-
-/* Target Gradio's internal structure */
-.gradio-container-5-42-0 > div {
-    height: 95% !important;
-    display: flex !important;
-    flex-direction: column !important;
-    padding-top: 0 !important;
-    margin-top: 0 !important;
-}
-
-/* Chat styling - FLEX to fill space */
-.gradio-container-5-42-0 .gradio-chatbot {
-    background-color: #d9d1ce !important;
-    border: 1pt solid #59524f !important;
-    border-radius: 6px !important;
-    padding: 15px !important;
-    flex: 1 !important;              /* Fill all remaining space */
-    min-height: 0 !important;        /* Prevent overflow issues */
-    overflow-y: auto !important;
-    margin: 15px 20px !important;
-}
-
-/* Message styling */
-.gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown {
-    background-color: #f09c7d !important;
-    color: #120f0e !important;
-    border-radius: 8px !important;
-    padding: 12px 16px !important;
-    border: 1pt solid #59524f !important;
-    max-width: 70%;
-    margin-left: 0;
-    margin-right: auto;
-    word-wrap: break-word;
-    font-weight: 400 !important;
-    margin-bottom: 10px !important;
-}
-
-.gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
-    background-color: #a69189 !important;
-    color: #120f0e !important;
-    border-radius: 8px !important;
-    padding: 12px 16px !important;
-    border: 1pt solid #59524f !important;
-    max-width: 70%;
-    margin-left: auto;
-    margin-right: 0;
-    word-wrap: break-word;
-    font-weight: 400 !important;
-    margin-bottom: 10px !important;
-}
-
-/* Input controls styling */
-.input-controls {
-    padding: 15px 20px !important;
-    background-color: rgb(240, 236, 230) !important;
-    border-top: 1pt solid #59524f;
-    flex-shrink: 0 !important;
-}
-
-.input-textbox textarea {
-    background-color: #f0ece6 !important;
-    border: 1pt solid #59524f !important;
-    border-radius: 6px !important;
-    color: #120f0e !important;
-    font-family: "Oswald", sans-serif !important;
-    padding: 10px !important;
-    resize: none !important;
-}
-
-.input-textbox textarea:focus {
-    border-color: #f09c7d !important;
-    box-shadow: 0 0 0 2px rgba(240, 156, 125, 0.2) !important;
-}
-
-.button-column {
-    margin-left: 10px !important;
-    min-width: 80px !important;
-}
-
-.send-button, .clear-button {
-   border: 1pt solid #59524f !important;
-   border-radius: 6px !important;
-   font-weight: 500 !important;
-   padding: 8px 16px !important;
-   margin-bottom: 5px !important;
-   width: 100% !important;
-}
-
-.send-button {
-   background-color: #f09c7d !important;
-   color: #120f0e !important;
-}
-
-.send-button:hover {
-   background-color: #e8895a !important;
-   border-color: #4a3f3c !important;
-}
-
-.clear-button {
-   background-color: #a69189 !important;
-   color: #120f0e !important;
-}
-
-.clear-button:hover {
-   background-color: #8f7d73 !important;
-   border-color: #4a3f3c !important;
-}
-
-/* Ensure Gradio footer is visible and properly positioned */
-footer.svelte-czcr5b {
-    display: flex !important;
-    visibility: visible !important;
-    position: fixed !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    background-color: rgba(240, 236, 230, 0.95) !important;
-    backdrop-filter: blur(5px) !important;
-    border-top: 1pt solid #59524f !important;
-    padding: 8px 16px !important;
-    z-index: 1000 !important;
-    height: auto !important;
-    min-height: 40px !important;
-}
-
-/* Style the footer buttons to match your theme */
-footer.svelte-czcr5b button {
-    background-color: transparent !important;
-    color: #120f0e !important;
-    border: none !important;
-    font-family: "Oswald", sans-serif !important;
-    font-size: 12px !important;
-}
-
-footer.svelte-czcr5b .divider {
-    color: #59524f !important;
-}
-
-/* Adjust main container to account for footer */
-.main-container {
-    padding-bottom: 50px !important;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown,
-    .gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
-        max-width: 85%;
-    }
-    
-    .input-controls {
-        padding: 10px !important;
-    }
-}
-"""
-
 # --- UI: HTML Head Content ---
 html_head_content = '''
 <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -523,7 +301,8 @@ def create_interface():
         title="EduBot", 
         fill_width=True, 
         fill_height=True,
-        theme=gr.themes.Base()
+        theme=gr.themes.Origin()
+        css="./styles.css"
     ) as demo:
         # Add head content and MathJax
         gr.HTML(html_head_content)