Upload app.py

app.py

@@ -2230,58 +2230,155 @@ with st.sidebar:
 # MAIN AREA
 # ════════════════════════════════════════════════════════════════════
 
-# Welcome message if no chat
+# Welcome screen — only when no messages
 if not st.session_state.messages:
     st.markdown("""
     <style>
     @keyframes fadeInUp {
-        from { opacity: 0; transform: translateY(20px); }
-        to   { opacity: 1; transform: translateY(0); }
+        from { opacity:0; transform:translateY(24px); }
+        to   { opacity:1; transform:translateY(0); }
     }
-    @keyframes blink {
-        0%, 100% { opacity: 1; }
-        50%       { opacity: 0; }
+    @keyframes gradientShift {
+        0%   { background-position: 0% 50%; }
+        50%  { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
     }
-    .saad-welcome {
+    @keyframes floatSymbol {
+        0%,100% { transform: translateY(0px) rotate(0deg); opacity:0.18; }
+        33%      { transform: translateY(-8px) rotate(5deg); opacity:0.32; }
+        66%      { transform: translateY(4px) rotate(-3deg); opacity:0.22; }
+    }
+    @keyframes spin {
+        from { transform: rotate(0deg); }
+        to   { transform: rotate(360deg); }
+    }
+    .saad-welcome-wrap {
+        position: relative;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        padding: 6rem 1rem 4rem 1rem;
+        padding: 5rem 1rem 4rem 1rem;
         text-align: center;
-        animation: fadeInUp 0.6s ease both;
+        animation: fadeInUp 0.7s cubic-bezier(.22,1,.36,1) both;
+        overflow: hidden;
+    }
+    /* Floating math symbols background */
+    .math-bg {
+        position: absolute;
+        top: 0; left: 0; right: 0; bottom: 0;
+        pointer-events: none;
+        z-index: 0;
+    }
+    .math-sym {
+        position: absolute;
+        font-size: 1.4rem;
+        color: #3b82f6;
+        animation: floatSymbol 6s ease-in-out infinite;
+        font-family: 'JetBrains Mono', monospace;
+        user-select: none;
     }
-    .saad-name {
-        font-size: 2.6rem;
-        font-weight: 700;
-        color: #ffffff;
+    /* Main name with gradient */
+    .saad-main-name {
+        position: relative;
+        z-index: 1;
+        font-size: 3rem;
+        font-weight: 800;
+        background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 40%, #f472b6 70%, #60a5fa 100%);
+        background-size: 300% 300%;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        animation: gradientShift 4s ease infinite;
+        letter-spacing: 1px;
+        margin-bottom: 0.5rem;
         font-family: 'Inter', sans-serif;
-        letter-spacing: 0.5px;
-        margin-bottom: 0.6rem;
     }
-    .saad-sub {
-        font-size: 0.88rem;
-        color: #4b5563;
-        letter-spacing: 0.3px;
+    /* Spinning math ring */
+    .math-ring {
+        position: relative;
+        z-index: 1;
+        width: 56px;
+        height: 56px;
         margin-bottom: 1.2rem;
+        border-radius: 50%;
+        border: 2px solid transparent;
+        background: linear-gradient(#0f0f0f, #0f0f0f) padding-box,
+                    linear-gradient(135deg, #3b82f6, #a78bfa, #f472b6) border-box;
+        animation: spin 3s linear infinite;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
     }
-    .saad-cursor {
-        display: inline-block;
-        width: 2px;
-        height: 1.4rem;
-        background: #3b82f6;
-        margin-left: 4px;
-        vertical-align: middle;
-        animation: blink 1s step-start infinite;
-        border-radius: 1px;
+    .math-ring-inner {
+        animation: spin 3s linear infinite reverse;
+        font-size: 1.4rem;
+    }
+    .saad-tagline {
+        position: relative;
+        z-index: 1;
+        font-size: 0.82rem;
+        color: #4b5563;
+        letter-spacing: 0.4px;
+        margin-top: 0.3rem;
+    }
+    .saad-tagline span {
+        color: #374151;
+        margin: 0 0.4rem;
     }
     </style>
-    <div class="saad-welcome">
-        <div class="saad-name">Saad.AI <span class="saad-cursor"></span></div>
-        <div class="saad-sub">BSc Mathematics · Step-by-Step · SymPy Verified · LaTeX Rendered</div>
+
+    <div class="saad-welcome-wrap">
+        <!-- Floating math symbols -->
+        <div class="math-bg">
+            <span class="math-sym" style="top:10%; left:8%; animation-delay:0s;">∫</span>
+            <span class="math-sym" style="top:20%; right:10%; animation-delay:1s;">∑</span>
+            <span class="math-sym" style="top:60%; left:5%; animation-delay:2s;">∂</span>
+            <span class="math-sym" style="top:70%; right:8%; animation-delay:0.5s;">√</span>
+            <span class="math-sym" style="top:40%; left:15%; animation-delay:1.5s; font-size:1rem;">π</span>
+            <span class="math-sym" style="top:35%; right:15%; animation-delay:2.5s; font-size:1rem;">∞</span>
+            <span class="math-sym" style="top:80%; left:20%; animation-delay:3s; font-size:0.9rem;">Δ</span>
+            <span class="math-sym" style="top:15%; left:40%; animation-delay:3.5s; font-size:0.85rem;">λ</span>
+        </div>
+        <!-- Spinning ring -->
+        <div class="math-ring">
+            <span class="math-ring-inner">∑</span>
+        </div>
+        <!-- Name with gradient -->
+        <div class="saad-main-name">Saad.AI</div>
+        <!-- Tagline -->
+        <div class="saad-tagline">
+            BSc Mathematics
+            <span>·</span> Step-by-Step Solutions
+            <span>·</span> SymPy Verified
+            <span>·</span> LaTeX Rendered
+        </div>
     </div>
     """, unsafe_allow_html=True)
 
+# Small corner header — only when chat has started
+else:
+    st.markdown("""
+    <style>
+    @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
+    .saad-corner {
+        font-size: 0.88rem;
+        font-weight: 600;
+        background: linear-gradient(135deg, #60a5fa, #a78bfa);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        letter-spacing: 0.3px;
+        margin-bottom: 0.6rem;
+        padding: 0.1rem 0;
+        animation: fadeIn 0.4s ease both;
+        font-family: 'Inter', sans-serif;
+    }
+    </style>
+    <div class="saad-corner">∑ Saad.AI</div>
+    """, unsafe_allow_html=True)
+
 # Render chat history
 for i, msg in enumerate(st.session_state.messages):
     avatar = "🧑‍🎓" if msg["role"] == "user" else "📐"