Complete UI overhaul - dark glassmorphism with backlight glow

1. Much darker background (#050010) to accentuate glass effects
2. Removed stacking/layered backgrounds in chat and input areas
3. Added subtle backlight glow effects on panels
4. Single glass layer for chat messages - no nested backgrounds
5. Clean input box with single glass effect
6. Glowing buttons on hover
7. Subtle purple accent lighting throughout
8. Fixed washed-out appearance from stacked elements
9. Theme set to transparent backgrounds to prevent conflicts

app.py

@@ -1859,54 +1859,70 @@ Be educational and help the student understand the concept better. Keep it conci
 
 if __name__ == "__main__":
     custom_css = """
-    /* Purple Color Palette - Exact from provided palette */
+    /* ============================================
+       GNOSIS - Dark Glassmorphism Theme
+       Deep purple/black background with glowing glass
+       ============================================ */
+    
+    /* Color Palette - Darker base for better glass contrast */
     :root {
-        --purple-darkest: #10002B;
-        --purple-darker: #240046;
-        --purple-dark: #3C096C;
-        --purple-medium-dark: #5A189A;
-        --purple-medium: #7B2CBF;
-        --purple-bright: #9D4EDD;
+        --bg-darkest: #050010;
+        --bg-darker: #0a0018;
+        --bg-dark: #10002B;
+        --purple-deep: #1a0035;
+        --purple-dark: #240046;
+        --purple-medium: #3C096C;
+        --purple-bright: #7B2CBF;
+        --purple-glow: #9D4EDD;
         --purple-light: #C77DFF;
         --purple-lightest: #E0AAFF;
+        --glass-white: rgba(255, 255, 255, 0.03);
+        --glass-border: rgba(157, 78, 221, 0.3);
+        --glow-color: rgba(157, 78, 221, 0.5);
     }
     
-    /* Base Styles */
+    /* ============================================
+       Base Container - Very Dark Background
+       ============================================ */
     .gradio-container {
-        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
-        background: linear-gradient(135deg, var(--purple-darkest) 0%, var(--purple-darker) 30%, var(--purple-dark) 60%, var(--purple-medium-dark) 100%);
-        background-attachment: fixed;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        background: 
+            radial-gradient(ellipse at 20% 20%, rgba(60, 9, 108, 0.15) 0%, transparent 50%),
+            radial-gradient(ellipse at 80% 80%, rgba(123, 44, 191, 0.1) 0%, transparent 50%),
+            radial-gradient(ellipse at 50% 50%, rgba(26, 0, 53, 0.5) 0%, transparent 70%),
+            linear-gradient(180deg, var(--bg-darkest) 0%, var(--bg-darker) 50%, var(--bg-dark) 100%) !important;
+        background-attachment: fixed !important;
         min-height: 100vh;
         padding: 1.5rem;
     }
     
-    /* Main content area */
-    .main-content {
-        background: rgba(16, 0, 43, 0.3);
-        backdrop-filter: blur(20px);
-        -webkit-backdrop-filter: blur(20px);
-        border-radius: 32px;
-        padding: 2rem;
+    /* Remove all default Gradio backgrounds */
+    .gradio-container > div,
+    .gradio-container .contain,
+    .gradio-container .wrap {
+        background: transparent !important;
     }
     
-    /* Glassmorphism Header - Enhanced */
+    /* ============================================
+       Glass Header with Backlight Glow
+       ============================================ */
     .glass-header {
         text-align: center;
-        padding: 3.5rem 2.5rem;
+        padding: 2.5rem 2rem;
         background: linear-gradient(135deg, 
-            rgba(157, 78, 221, 0.2) 0%, 
-            rgba(123, 44, 191, 0.25) 30%,
-            rgba(90, 24, 154, 0.2) 60%,
-            rgba(157, 78, 221, 0.15) 100%);
-        backdrop-filter: blur(25px) saturate(200%);
-        -webkit-backdrop-filter: blur(25px) saturate(200%);
-        border-radius: 32px;
-        border: 1.5px solid rgba(224, 170, 255, 0.35);
-        margin-bottom: 2.5rem;
+            rgba(157, 78, 221, 0.08) 0%, 
+            rgba(123, 44, 191, 0.12) 50%,
+            rgba(60, 9, 108, 0.08) 100%);
+        backdrop-filter: blur(40px) saturate(150%);
+        -webkit-backdrop-filter: blur(40px) saturate(150%);
+        border-radius: 24px;
+        border: 1px solid rgba(157, 78, 221, 0.2);
+        margin-bottom: 2rem;
         box-shadow: 
-            0 12px 40px rgba(16, 0, 43, 0.5),
-            0 0 0 1px rgba(224, 170, 255, 0.15) inset,
-            0 0 60px rgba(157, 78, 221, 0.1);
+            0 0 80px rgba(157, 78, 221, 0.15),
+            0 0 40px rgba(157, 78, 221, 0.1),
+            0 20px 60px rgba(0, 0, 0, 0.5),
+            inset 0 1px 0 rgba(255, 255, 255, 0.05);
         color: white;
         position: relative;
         overflow: hidden;
@@ -1915,518 +1931,355 @@ if __name__ == "__main__":
     .glass-header::before {
         content: '';
         position: absolute;
-        top: -50%;
-        left: -50%;
-        width: 200%;
-        height: 200%;
-        background: radial-gradient(circle, rgba(224, 170, 255, 0.1) 0%, transparent 70%);
-        animation: shimmer 8s ease-in-out infinite;
-    }
-    
-    @keyframes shimmer {
-        0%, 100% { transform: translate(0, 0) rotate(0deg); }
-        50% { transform: translate(20px, 20px) rotate(180deg); }
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, rgba(224, 170, 255, 0.3), transparent);
     }
     
     .glass-header h1 {
         margin: 0;
-        font-size: 2.8em;
+        font-size: 2.5em;
         font-weight: 700;
-        text-shadow: 0 4px 20px rgba(16, 0, 43, 0.5),
-                     0 2px 10px rgba(224, 170, 255, 0.3);
-        position: relative;
-        z-index: 1;
-        background: linear-gradient(135deg, #fff 0%, var(--purple-lightest) 100%);
+        background: linear-gradient(135deg, #fff 0%, var(--purple-lightest) 50%, var(--purple-light) 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
+        text-shadow: 0 0 40px rgba(224, 170, 255, 0.5);
     }
     
     .glass-header p {
-        font-size: 1.3em;
-        margin-top: 0.8rem;
+        font-size: 1.1em;
+        margin-top: 0.5rem;
         margin-bottom: 0;
-        opacity: 0.95;
-        position: relative;
-        z-index: 1;
-        color: var(--purple-lightest);
-    }
-    
-    /* Glass Panels - Enhanced glassmorphism */
-    .glass-panel {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.12) 0%, 
-            rgba(199, 125, 255, 0.15) 50%,
-            rgba(224, 170, 255, 0.12) 100%);
-        backdrop-filter: blur(20px) saturate(180%);
-        -webkit-backdrop-filter: blur(20px) saturate(180%);
-        border-radius: 24px;
-        border: 1.5px solid rgba(224, 170, 255, 0.3);
-        box-shadow: 
-            0 8px 32px rgba(16, 0, 43, 0.35),
-            0 0 0 1px rgba(224, 170, 255, 0.15) inset,
-            0 0 40px rgba(157, 78, 221, 0.08);
-        padding: 1.75rem;
-        margin-bottom: 1.25rem;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    
-    .glass-panel:hover {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.18) 0%, 
-            rgba(199, 125, 255, 0.22) 50%,
-            rgba(224, 170, 255, 0.18) 100%);
-        border-color: rgba(224, 170, 255, 0.5);
-        transform: translateY(-3px);
-        box-shadow: 
-            0 16px 48px rgba(16, 0, 43, 0.45),
-            0 0 0 1px rgba(224, 170, 255, 0.25) inset,
-            0 0 60px rgba(157, 78, 221, 0.15);
-    }
-    
-    .chat-header {
-        text-align: center;
-        background: linear-gradient(135deg, 
-            rgba(199, 125, 255, 0.2) 0%, 
-            rgba(157, 78, 221, 0.25) 100%) !important;
-        backdrop-filter: blur(20px) saturate(180%) !important;
-        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
-        border: 2px solid rgba(224, 170, 255, 0.4) !important;
-        border-radius: 32px !important;
-        padding: 2rem !important;
-        box-shadow: 
-            0 8px 32px rgba(16, 0, 43, 0.3),
-            0 0 0 1px rgba(224, 170, 255, 0.2) inset !important;
-    }
-    
-    .chat-header h2 {
-        margin-top: 0;
-        color: white;
-        text-shadow: 0 2px 10px rgba(16, 0, 43, 0.3);
-    }
-    
-    .chat-header p {
         color: var(--purple-lightest);
+        opacity: 0.8;
     }
     
-    /* Glass Tabs - Enhanced glassmorphism */
-    .glass-tabs-container, .gradio-tabs {
+    /* ============================================
+       Glass Panels with Backlight Effect
+       ============================================ */
+    .glass-panel, .glass-tabs-container, .gradio-tabs {
         background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.12) 0%, 
-            rgba(199, 125, 255, 0.18) 100%) !important;
-        backdrop-filter: blur(20px) saturate(200%) !important;
-        -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
-        border-radius: 32px !important;
-        border: 2px solid rgba(224, 170, 255, 0.4) !important;
-        padding: 2rem !important;
+            rgba(255, 255, 255, 0.02) 0%, 
+            rgba(157, 78, 221, 0.05) 50%,
+            rgba(255, 255, 255, 0.02) 100%) !important;
+        backdrop-filter: blur(30px) saturate(120%) !important;
+        -webkit-backdrop-filter: blur(30px) saturate(120%) !important;
+        border-radius: 20px !important;
+        border: 1px solid rgba(157, 78, 221, 0.15) !important;
+        padding: 1.5rem !important;
         box-shadow: 
-            0 12px 48px rgba(16, 0, 43, 0.35),
-            0 0 0 1px rgba(224, 170, 255, 0.2) inset,
-            0 0 60px rgba(157, 78, 221, 0.1) !important;
+            0 0 60px rgba(157, 78, 221, 0.08),
+            0 0 30px rgba(157, 78, 221, 0.05),
+            0 15px 40px rgba(0, 0, 0, 0.4),
+            inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
         position: relative !important;
-        overflow: hidden !important;
     }
     
-    .glass-tabs-container > div, .gradio-tabs > div {
-        gap: 0.75rem !important;
+    .glass-panel::before, .glass-tabs-container::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 20%;
+        right: 20%;
+        height: 1px;
+        background: linear-gradient(90deg, transparent, rgba(199, 125, 255, 0.2), transparent);
+        pointer-events: none;
     }
     
+    /* ============================================
+       Tab Buttons - Subtle Glass
+       ============================================ */
     .glass-tabs-container > div > button, 
-    .gradio-tabs > div > button,
-    .glass-tab-item {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.12) 0%, 
-            rgba(199, 125, 255, 0.15) 100%) !important;
-        backdrop-filter: blur(12px) saturate(180%);
-        -webkit-backdrop-filter: blur(12px) saturate(180%);
-        border: 1.5px solid rgba(224, 170, 255, 0.3) !important;
-        border-radius: 18px !important;
-        color: var(--purple-lightest) !important;
-        padding: 0.875rem 1.75rem !important;
-        margin: 0.375rem !important;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        font-weight: 600 !important;
-        font-size: 0.95rem !important;
-        box-shadow: 
-            0 2px 8px rgba(16, 0, 43, 0.2),
-            0 0 0 1px rgba(224, 170, 255, 0.1) inset;
+    .gradio-tabs > div > button {
+        background: rgba(157, 78, 221, 0.08) !important;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(157, 78, 221, 0.15) !important;
+        border-radius: 12px !important;
+        color: var(--purple-light) !important;
+        padding: 0.75rem 1.25rem !important;
+        margin: 0.25rem !important;
+        font-weight: 500 !important;
+        font-size: 0.9rem !important;
+        transition: all 0.3s ease !important;
     }
     
     .glass-tabs-container > div > button:hover, 
     .gradio-tabs > div > button:hover {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.22) 0%, 
-            rgba(199, 125, 255, 0.28) 100%) !important;
-        border-color: rgba(224, 170, 255, 0.5) !important;
-        transform: translateY(-3px);
-        box-shadow: 
-            0 6px 20px rgba(157, 78, 221, 0.35),
-            0 0 0 1px rgba(224, 170, 255, 0.2) inset;
+        background: rgba(157, 78, 221, 0.15) !important;
+        border-color: rgba(157, 78, 221, 0.3) !important;
+        box-shadow: 0 0 20px rgba(157, 78, 221, 0.2);
     }
     
     .glass-tabs-container > div > button.selected, 
     .gradio-tabs > div > button.selected {
-        background: linear-gradient(135deg, 
-            rgba(157, 78, 221, 0.35) 0%, 
-            rgba(123, 44, 191, 0.4) 50%,
-            rgba(90, 24, 154, 0.35) 100%) !important;
-        border-color: rgba(224, 170, 255, 0.6) !important;
+        background: linear-gradient(135deg, rgba(157, 78, 221, 0.2) 0%, rgba(123, 44, 191, 0.25) 100%) !important;
+        border-color: rgba(199, 125, 255, 0.4) !important;
         color: white !important;
         box-shadow: 
-            0 6px 24px rgba(157, 78, 221, 0.45),
-            0 0 0 1px rgba(224, 170, 255, 0.35) inset,
-            0 0 40px rgba(157, 78, 221, 0.2);
-        transform: translateY(-1px);
+            0 0 30px rgba(157, 78, 221, 0.3),
+            inset 0 1px 0 rgba(255, 255, 255, 0.1);
     }
     
-    /* Tab Content Areas - Enhanced */
-    .glass-tabs-container > div > div[style*="display"],
-    .gradio-tabs > div > div[style*="display"] {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.06) 0%, 
-            rgba(199, 125, 255, 0.1) 100%) !important;
-        backdrop-filter: blur(15px) saturate(180%);
-        -webkit-backdrop-filter: blur(15px) saturate(180%);
-        border-radius: 24px;
-        padding: 2rem;
-        margin-top: 1.25rem;
-        border: 1.5px solid rgba(224, 170, 255, 0.2);
-        box-shadow: 
-            0 4px 20px rgba(16, 0, 43, 0.25),
-            0 0 0 1px rgba(224, 170, 255, 0.1) inset;
-    }
+    /* ============================================
+       CHAT AREA - Clean, No Stacking
+       ============================================ */
     
-    /* Glass Buttons - Enhanced glassmorphism */
-    button.primary, button[class*="primary"], 
-    button[type="button"].primary {
-        background: linear-gradient(135deg, 
-            rgba(157, 78, 221, 0.35) 0%, 
-            rgba(123, 44, 191, 0.45) 50%,
-            rgba(90, 24, 154, 0.4) 100%) !important;
-        backdrop-filter: blur(15px) saturate(180%);
-        -webkit-backdrop-filter: blur(15px) saturate(180%);
-        border: 1.5px solid rgba(224, 170, 255, 0.45) !important;
-        border-radius: 28px !important;
-        color: white !important;
-        padding: 0.875rem 1.75rem !important;
-        font-weight: 600 !important;
-        font-size: 0.95rem !important;
-        box-shadow: 
-            0 6px 24px rgba(157, 78, 221, 0.35),
-            0 0 0 1px rgba(224, 170, 255, 0.25) inset,
-            0 0 30px rgba(157, 78, 221, 0.15);
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        text-shadow: 0 1px 3px rgba(16, 0, 43, 0.3);
+    /* Chat container - single glass layer only */
+    .chat-header {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        padding: 1rem !important;
     }
     
-    button.primary:hover, button[class*="primary"]:hover,
-    button[type="button"].primary:hover {
-        background: linear-gradient(135deg, 
-            rgba(157, 78, 221, 0.45) 0%, 
-            rgba(123, 44, 191, 0.55) 50%,
-            rgba(90, 24, 154, 0.5) 100%) !important;
-        border-color: rgba(224, 170, 255, 0.65) !important;
-        transform: translateY(-3px) scale(1.02);
-        box-shadow: 
-            0 10px 36px rgba(157, 78, 221, 0.45),
-            0 0 0 1px rgba(224, 170, 255, 0.35) inset,
-            0 0 50px rgba(157, 78, 221, 0.25);
+    /* Remove ALL nested backgrounds in chatbot */
+    .gradio-chatbot,
+    .gradio-chatbot > div,
+    .gradio-chatbot > div > div,
+    .gradio-chatbot .wrap,
+    .gradio-chatbot .contain,
+    [class*="chatbot"],
+    [class*="chatbot"] > div {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
     }
     
-    button.secondary, button[class*="secondary"],
-    button[type="button"].secondary {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.12) 0%, 
-            rgba(199, 125, 255, 0.18) 100%) !important;
-        backdrop-filter: blur(12px) saturate(180%);
-        -webkit-backdrop-filter: blur(12px) saturate(180%);
-        border: 1.5px solid rgba(224, 170, 255, 0.35) !important;
-        border-radius: 28px !important;
-        color: var(--purple-lightest) !important;
-        padding: 0.75rem 1.5rem !important;
-        font-weight: 500 !important;
-        box-shadow: 
-            0 4px 16px rgba(16, 0, 43, 0.25),
-            0 0 0 1px rgba(224, 170, 255, 0.15) inset;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    /* Chat message area - subtle dark background */
+    .gradio-chatbot .messages,
+    .gradio-chatbot [class*="message-wrap"],
+    .gradio-chatbot [class*="bot"],
+    .gradio-chatbot [class*="user"] {
+        background: transparent !important;
     }
     
-    button.secondary:hover, button[class*="secondary"]:hover,
-    button[type="button"].secondary:hover {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.22) 0%, 
-            rgba(199, 125, 255, 0.28) 100%) !important;
-        border-color: rgba(224, 170, 255, 0.55) !important;
-        transform: translateY(-3px);
+    /* Individual message bubbles */
+    .gradio-chatbot .message,
+    .gradio-chatbot [class*="message"]:not([class*="messages"]) {
+        background: rgba(157, 78, 221, 0.08) !important;
+        border: 1px solid rgba(157, 78, 221, 0.15) !important;
+        border-radius: 16px !important;
+        padding: 12px 16px !important;
+        margin: 6px 0 !important;
         box-shadow: 
-            0 8px 24px rgba(157, 78, 221, 0.3),
-            0 0 0 1px rgba(224, 170, 255, 0.25) inset;
+            0 0 20px rgba(157, 78, 221, 0.05),
+            0 4px 12px rgba(0, 0, 0, 0.2) !important;
     }
     
-    /* Glass Input Fields - Enhanced */
-    input[type="text"], textarea, select,
-    .gradio-textbox input, .gradio-textbox textarea {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.08) 0%, 
-            rgba(199, 125, 255, 0.12) 100%) !important;
-        backdrop-filter: blur(12px) saturate(180%);
-        -webkit-backdrop-filter: blur(12px) saturate(180%);
-        border: 1.5px solid rgba(224, 170, 255, 0.3) !important;
-        border-radius: 18px !important;
-        color: var(--purple-lightest) !important;
-        padding: 0.875rem 1.25rem !important;
-        transition: all 0.3s ease !important;
-        box-shadow: 
-            0 2px 8px rgba(16, 0, 43, 0.2),
-            0 0 0 1px rgba(224, 170, 255, 0.1) inset;
+    /* User messages - slightly different tint */
+    .gradio-chatbot [class*="user"] .message,
+    .gradio-chatbot .user {
+        background: rgba(123, 44, 191, 0.12) !important;
+        border-color: rgba(123, 44, 191, 0.2) !important;
+        margin-left: 20% !important;
     }
     
-    input[type="text"]:focus, textarea:focus, select:focus,
-    .gradio-textbox input:focus, .gradio-textbox textarea:focus {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.15) 0%, 
-            rgba(199, 125, 255, 0.2) 100%) !important;
-        border-color: rgba(224, 170, 255, 0.6) !important;
-        box-shadow: 
-            0 0 0 4px rgba(157, 78, 221, 0.2),
-            0 4px 16px rgba(157, 78, 221, 0.25),
-            0 0 0 1px rgba(224, 170, 255, 0.2) inset;
-        outline: none;
+    /* Bot messages */
+    .gradio-chatbot [class*="bot"] .message,
+    .gradio-chatbot .bot {
+        background: rgba(60, 9, 108, 0.15) !important;
+        border-color: rgba(157, 78, 221, 0.15) !important;
+        margin-right: 20% !important;
     }
     
-    input[type="text"]::placeholder, textarea::placeholder {
-        color: rgba(224, 170, 255, 0.55) !important;
-        opacity: 0.8;
-    }
+    /* ============================================
+       INPUT BOX - Single Clean Glass Layer
+       ============================================ */
     
-    /* Glass File Upload - Enhanced & Fully Rounded (for chat file uploads) */
-    .gradio-file, .gradio-file-upload,
-    .multimodal-textbox .file-upload-area,
-    .gradio-chatbot .file-upload-area {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.15) 0%, 
-            rgba(199, 125, 255, 0.2) 100%) !important;
-        backdrop-filter: blur(20px) saturate(200%) !important;
-        -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
-        border: 2.5px dashed rgba(224, 170, 255, 0.5) !important;
-        border-radius: 28px !important;
-        padding: 2rem !important;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        box-shadow: 
-            0 8px 32px rgba(16, 0, 43, 0.35),
-            0 0 0 1px rgba(224, 170, 255, 0.25) inset,
-            0 0 40px rgba(157, 78, 221, 0.1) !important;
+    /* Remove all nested input backgrounds */
+    .multimodal-textbox,
+    .multimodal-textbox > div,
+    .multimodal-textbox .wrap,
+    [class*="textbox"],
+    [class*="textbox"] > div,
+    .gradio-textbox,
+    .gradio-textbox > div {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
     }
     
-    .gradio-file:hover, .gradio-file-upload:hover,
-    .multimodal-textbox .file-upload-area:hover {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.22) 0%, 
-            rgba(199, 125, 255, 0.28) 100%) !important;
-        border-color: rgba(224, 170, 255, 0.7) !important;
-        transform: translateY(-2px);
+    /* Main input container - single glass effect */
+    .multimodal-textbox,
+    .glass-input {
+        background: rgba(157, 78, 221, 0.06) !important;
+        backdrop-filter: blur(20px) !important;
+        -webkit-backdrop-filter: blur(20px) !important;
+        border: 1px solid rgba(157, 78, 221, 0.2) !important;
+        border-radius: 16px !important;
+        padding: 0.5rem !important;
         box-shadow: 
-            0 12px 40px rgba(157, 78, 221, 0.4),
-            0 0 0 1px rgba(224, 170, 255, 0.35) inset,
-            0 0 60px rgba(157, 78, 221, 0.15) !important;
+            0 0 40px rgba(157, 78, 221, 0.08),
+            0 8px 24px rgba(0, 0, 0, 0.3),
+            inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
     }
     
-    /* Quiz Block - Uses EXACT same styling as left sidebar (glass-tabs-container) */
-    /* All quiz elements inherit from glass-tabs-container styling automatically */
-    
-    /* Quiz feedback and explanation visibility - Force visibility when content exists */
-    .quiz-feedback,
-    .quiz-explanation {
-        display: block !important;
-        visibility: visible !important;
-        opacity: 1 !important;
-        margin: 1rem 0 !important;
-        z-index: 100 !important;
-        position: relative !important;
+    /* Textarea inside input */
+    .multimodal-textbox textarea,
+    .glass-input textarea,
+    textarea {
+        background: transparent !important;
+        border: none !important;
+        color: var(--purple-lightest) !important;
+        font-size: 0.95rem !important;
+        padding: 0.75rem 1rem !important;
+        box-shadow: none !important;
     }
     
-    /* Ensure feedback is visible even when Gradio tries to hide it */
-    .quiz-feedback[style*="display: none"],
-    .quiz-explanation[style*="display: none"] {
-        display: block !important;
-        visibility: visible !important;
+    textarea:focus {
+        outline: none !important;
+        box-shadow: none !important;
     }
     
-    /* Make sure HTML content inside feedback is visible */
-    .quiz-feedback > div,
-    .quiz-explanation > div {
-        display: block !important;
-        visibility: visible !important;
-        opacity: 1 !important;
+    textarea::placeholder {
+        color: rgba(199, 125, 255, 0.4) !important;
     }
     
     /* ============================================
-       Clean Chat Interface - Minimal styling
+       Buttons with Glow Effect
        ============================================ */
-    
-    /* Main chat container - clean and simple */
-    .glass-chatbot {
-        background: transparent !important;
-        border: none !important;
-        box-shadow: none !important;
-    }
-    
-    .glass-chatbot > div {
-        background: transparent !important;
-        border: none !important;
-    }
-    
-    /* Chat message bubbles - simple and clean */
-    .glass-chatbot .message {
+    button, .gradio-button {
         background: rgba(157, 78, 221, 0.15) !important;
-        border: 1px solid rgba(200, 150, 255, 0.2) !important;
-        border-radius: 16px !important;
-        padding: 12px 16px !important;
-        margin: 8px 4px !important;
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(157, 78, 221, 0.25) !important;
+        border-radius: 12px !important;
+        color: var(--purple-lightest) !important;
+        padding: 0.6rem 1.2rem !important;
+        font-weight: 500 !important;
+        transition: all 0.3s ease !important;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
     }
     
-    /* Glass input styling */
-    .glass-input {
-        background: rgba(157, 78, 221, 0.1) !important;
-        border: 1px solid rgba(200, 150, 255, 0.3) !important;
-        border-radius: 16px !important;
+    button:hover, .gradio-button:hover {
+        background: rgba(157, 78, 221, 0.25) !important;
+        border-color: rgba(199, 125, 255, 0.4) !important;
+        box-shadow: 
+            0 0 30px rgba(157, 78, 221, 0.3),
+            0 6px 20px rgba(0, 0, 0, 0.3) !important;
+        transform: translateY(-2px) !important;
     }
     
-    .glass-input textarea {
-        background: transparent !important;
+    /* Primary button with stronger glow */
+    button.primary, button[class*="primary"] {
+        background: linear-gradient(135deg, rgba(157, 78, 221, 0.3) 0%, rgba(123, 44, 191, 0.35) 100%) !important;
+        border-color: rgba(199, 125, 255, 0.35) !important;
         color: white !important;
-        transition: all 0.2s ease !important;
+        box-shadow: 
+            0 0 25px rgba(157, 78, 221, 0.2),
+            0 6px 20px rgba(0, 0, 0, 0.3);
     }
     
-    /* Button hover */
-    .gradio-chatbot button:hover,
-    .chatbot-container button:hover,
-    [class*="chatbot"] button:hover {
-        background: linear-gradient(
-            135deg,
-            rgba(157, 78, 221, 0.85) 0%,
-            rgba(123, 44, 191, 0.95) 100%
-        ) !important;
-        transform: translateY(-1px) !important;
+    button.primary:hover, button[class*="primary"]:hover {
+        background: linear-gradient(135deg, rgba(157, 78, 221, 0.4) 0%, rgba(123, 44, 191, 0.45) 100%) !important;
         box-shadow: 
-            0 6px 20px rgba(123, 44, 191, 0.4),
-            0 0 0 1px rgba(255, 255, 255, 0.15) inset !important;
+            0 0 40px rgba(157, 78, 221, 0.4),
+            0 0 20px rgba(157, 78, 221, 0.2),
+            0 8px 25px rgba(0, 0, 0, 0.4) !important;
     }
     
-    /* File attachment styling */
-    [class*="file"], [class*="attachment"],
-    .gradio-chatbot [class*="file"] {
-        background: linear-gradient(
-            135deg,
-            rgba(255, 255, 255, 0.08) 0%,
-            rgba(200, 170, 255, 0.1) 100%
-        ) !important;
-        border: 1px solid rgba(255, 255, 255, 0.15) !important;
-        border-radius: 12px !important;
-        backdrop-filter: blur(15px) !important;
-        -webkit-backdrop-filter: blur(15px) !important;
+    /* ============================================
+       Quiz Panel Styling
+       ============================================ */
+    .quiz-feedback, .quiz-explanation {
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+        margin: 0.75rem 0 !important;
+    }
+    
+    /* Radio options with glow on hover */
+    .gradio-radio label,
+    input[type="radio"] + label {
+        background: rgba(157, 78, 221, 0.05) !important;
+        border: 1px solid rgba(157, 78, 221, 0.15) !important;
+        border-radius: 10px !important;
+        padding: 0.75rem 1rem !important;
+        margin: 0.3rem 0 !important;
+        transition: all 0.3s ease !important;
+        color: var(--purple-light) !important;
     }
     
-    /* Placeholder text */
-    .gradio-chatbot input::placeholder,
-    .gradio-chatbot textarea::placeholder,
-    [class*="chatbot"] input::placeholder,
-    [class*="chatbot"] textarea::placeholder {
-        color: rgba(255, 255, 255, 0.5) !important;
+    .gradio-radio label:hover {
+        background: rgba(157, 78, 221, 0.12) !important;
+        border-color: rgba(157, 78, 221, 0.3) !important;
+        box-shadow: 0 0 20px rgba(157, 78, 221, 0.15);
     }
     
-    /* Markdown/Text Content */
-    .markdown, .markdown p, .markdown h1, .markdown h2, .markdown h3 {
-        color: var(--purple-lightest) !important;
+    .gradio-radio input:checked + label {
+        background: rgba(157, 78, 221, 0.2) !important;
+        border-color: rgba(199, 125, 255, 0.4) !important;
+        box-shadow: 0 0 25px rgba(157, 78, 221, 0.25);
     }
     
-    /* Scrollbar Styling */
+    /* ============================================
+       Scrollbar - Subtle
+       ============================================ */
     ::-webkit-scrollbar {
-        width: 10px;
+        width: 8px;
+        height: 8px;
     }
     
     ::-webkit-scrollbar-track {
         background: rgba(16, 0, 43, 0.3);
-        border-radius: 16px;
+        border-radius: 10px;
     }
     
     ::-webkit-scrollbar-thumb {
-        background: linear-gradient(135deg, 
-            rgba(157, 78, 221, 0.6) 0%, 
-            rgba(123, 44, 191, 0.7) 100%);
-        border-radius: 16px;
-        border: 2px solid rgba(16, 0, 43, 0.3);
+        background: rgba(157, 78, 221, 0.3);
+        border-radius: 10px;
     }
     
     ::-webkit-scrollbar-thumb:hover {
-        background: linear-gradient(135deg, 
-            rgba(157, 78, 221, 0.8) 0%, 
-            rgba(123, 44, 191, 0.9) 100%);
-    }
-    
-    /* Smooth Transitions */
-    * {
-        transition: background-color 0.3s ease, border-color 0.3s ease, 
-                    box-shadow 0.3s ease, transform 0.3s ease !important;
+        background: rgba(157, 78, 221, 0.5);
     }
     
-    /* Button Hover Effects */
-    button {
-        transition: all 0.3s ease !important;
-    }
-    
-    button:hover {
-        transform: translateY(-2px) !important;
+    /* ============================================
+       Text and Labels
+       ============================================ */
+    .markdown, .markdown p, .markdown h1, .markdown h2, .markdown h3,
+    label, .gradio-label, span, p {
+        color: var(--purple-lightest) !important;
     }
     
-    /* Radio and Checkbox Styling */
-    input[type="radio"], input[type="checkbox"] {
-        accent-color: var(--purple-bright) !important;
+    /* Accordion styling */
+    .gradio-accordion {
+        background: transparent !important;
+        border: 1px solid rgba(157, 78, 221, 0.15) !important;
+        border-radius: 12px !important;
     }
     
-    /* JSON Display - Enhanced */
-    .gradio-json, .json-container {
-        background: linear-gradient(135deg, 
-            rgba(16, 0, 43, 0.5) 0%, 
-            rgba(36, 0, 70, 0.45) 100%) !important;
-        backdrop-filter: blur(15px) saturate(180%);
-        -webkit-backdrop-filter: blur(15px) saturate(180%);
-        border: 1.5px solid rgba(224, 170, 255, 0.25) !important;
-        border-radius: 28px !important;
-        color: var(--purple-lightest) !important;
-        padding: 1.25rem !important;
-        box-shadow: 
-            0 4px 20px rgba(16, 0, 43, 0.3),
-            0 0 0 1px rgba(224, 170, 255, 0.1) inset;
+    .gradio-accordion > div:first-child {
+        background: rgba(157, 78, 221, 0.08) !important;
+        border-radius: 12px !important;
     }
     
-    /* Dropdown/Select Styling */
-    select, .gradio-dropdown select {
-        background: linear-gradient(135deg, 
-            rgba(224, 170, 255, 0.1) 0%, 
-            rgba(199, 125, 255, 0.15) 100%) !important;
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-        border: 1.5px solid rgba(224, 170, 255, 0.3) !important;
-        border-radius: 18px !important;
-        color: var(--purple-lightest) !important;
-        padding: 0.75rem 1rem !important;
+    /* File upload */
+    .gradio-file, .gradio-file-upload {
+        background: rgba(157, 78, 221, 0.05) !important;
+        border: 2px dashed rgba(157, 78, 221, 0.2) !important;
+        border-radius: 16px !important;
+        transition: all 0.3s ease !important;
     }
     
-    /* Slider Styling */
-    .gradio-slider input[type="range"] {
-        accent-color: var(--purple-bright) !important;
+    .gradio-file:hover, .gradio-file-upload:hover {
+        border-color: rgba(157, 78, 221, 0.4) !important;
+        box-shadow: 0 0 30px rgba(157, 78, 221, 0.15);
     }
     
-    /* Radio Button Styling */
-    .gradio-radio, input[type="radio"] {
-        accent-color: var(--purple-bright) !important;
+    /* JSON Display */
+    .gradio-json {
+        background: rgba(16, 0, 43, 0.4) !important;
+        border: 1px solid rgba(157, 78, 221, 0.15) !important;
+        border-radius: 12px !important;
     }
     
-    /* Label Styling */
-    label, .gradio-label {
-        color: var(--purple-lightest) !important;
-        font-weight: 500 !important;
+    /* Disable aggressive transitions on everything */
+    * {
+        transition: background-color 0.2s ease, border-color 0.2s ease, 
+                    box-shadow 0.2s ease, transform 0.2s ease;
     }
     """
     
@@ -2438,8 +2291,12 @@ if __name__ == "__main__":
             secondary_hue="purple",
             neutral_hue="purple"
         ).set(
-            body_background_fill="linear-gradient(135deg, #10002B 0%, #240046 50%, #3C096C 100%)",
-            body_background_fill_dark="linear-gradient(135deg, #10002B 0%, #240046 50%, #3C096C 100%)",
+            body_background_fill="#050010",
+            body_background_fill_dark="#050010",
+            block_background_fill="transparent",
+            block_background_fill_dark="transparent",
+            panel_background_fill="transparent",
+            panel_background_fill_dark="transparent",
         ),
         css=custom_css,
         mcp_server=True  # Enable MCP server mode