Update app.py

app.py

@@ -23,9 +23,9 @@ def get_whisper():
         whisper_model = WhisperModel("base", compute_type="int8")
     return whisper_model
 
-GROQ_API_KEY = os.environ.get("YOUR_GROQ_API_KEY", "")
+GROQ_API_KEY = os.environ.get("GROQ_API_KEY", "")
 if not GROQ_API_KEY:
-    raise ValueError("YOUR_GROQ_API_KEY secret is not set. Add it in HF Space Settings → Secrets.")
+    raise ValueError("GROQ_API_KEY secret is not set. Add it in HF Space Settings → Secrets.")
 
 client = Groq(api_key=GROQ_API_KEY)
 MODEL_NAME = "llama-3.3-70b-versatile"
@@ -283,444 +283,497 @@ def voice_chat(audio, history):
         return history, ""
 
 # =========================
-# CSS — Dark Academic / Premium Research Theme
+# CSS — "Obsidian Intelligence" Premium 2026 Research Platform
+# Ethos: High-Density Functionalism meets Dark Luxury
+# Trends: Bento Grid · Glassmorphism · Kinetic borders · Layered depth
 # =========================
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
 
+/* ═══════════ DESIGN TOKENS ═══════════ */
 :root {
-    --bg-0: #0a0c10;
-    --bg-1: #0f1117;
-    --bg-2: #151821;
-    --bg-3: #1b1f2c;
-    --bg-4: #222638;
-    --border: #252a3a;
-    --border-hi: #303650;
-    --gold: #c9a96e;
-    --gold-dim: #9e7845;
-    --gold-glow: rgba(201,169,110,0.10);
-    --gold-glow-hi: rgba(201,169,110,0.20);
-    --blue: #5b8dee;
-    --green: #56c490;
-    --red: #e05c5c;
-    --tx-1: #eae6dc;
-    --tx-2: #9b9588;
-    --tx-3: #5a5650;
-    --tx-4: #333030;
-    --r: 14px;
-    --r-sm: 9px;
-    --sh: 0 4px 28px rgba(0,0,0,.45);
-    --sh-lg: 0 8px 56px rgba(0,0,0,.65);
-    --sh-gold: 0 0 0 3px rgba(201,169,110,0.18);
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-/* Page background with subtle grid */
+    --void:       #07080c;
+    --bg-0:       #0b0d13;
+    --bg-1:       #0f1119;
+    --bg-2:       #13161f;
+    --bg-3:       #181c28;
+    --bg-4:       #1e2333;
+    --bg-5:       #242840;
+    --b-0:        #1c2030;
+    --b-1:        #252a3c;
+    --b-2:        #303650;
+    --b-hi:       #404868;
+    --gold:       #d4a853;
+    --gold-lt:    #e8c47a;
+    --gold-dk:    #9e7535;
+    --gold-muted: rgba(212,168,83,0.08);
+    --gold-glow:  rgba(212,168,83,0.16);
+    --gold-ring:  0 0 0 2.5px rgba(212,168,83,0.22);
+    --green:      #3ecf8e;
+    --blue:       #4d94ff;
+    --red:        #f06565;
+    --amber:      #f0a443;
+    --tx-1:       #f0ece2;
+    --tx-2:       #8a8578;
+    --tx-3:       #4a4740;
+    --r-xs: 6px; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px;
+    --sh-sm:  0 2px 12px rgba(0,0,0,.4);
+    --sh:     0 4px 32px rgba(0,0,0,.55);
+    --sh-lg:  0 8px 64px rgba(0,0,0,.7);
+    --sh-xl:  0 16px 80px rgba(0,0,0,.8);
+    --sh-gold: 0 4px 28px rgba(212,168,83,0.2);
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; }
+html { scroll-behavior: smooth; }
+
 body, .gradio-container {
     background: var(--bg-0) !important;
-    font-family: 'DM Sans', sans-serif !important;
+    font-family: 'Geist', system-ui, sans-serif !important;
     color: var(--tx-1) !important;
     min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* Dot-matrix background */
+.gradio-container {
+    background-image: radial-gradient(circle, rgba(212,168,83,0.05) 1px, transparent 1px) !important;
+    background-size: 28px 28px !important;
+    background-attachment: fixed !important;
 }
 
-.gradio-container::after {
+/* Vignette overlay */
+.gradio-container::before {
     content: '';
-    position: fixed;
-    inset: 0;
-    background-image:
-        linear-gradient(rgba(201,169,110,0.025) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(201,169,110,0.025) 1px, transparent 1px);
-    background-size: 48px 48px;
-    pointer-events: none;
-    z-index: 0;
+    position: fixed; inset: 0;
+    background: radial-gradient(ellipse 80% 60% at 50% 0%, transparent 40%, rgba(7,8,12,0.75) 100%);
+    pointer-events: none; z-index: 0;
 }
 
-/* ── HEADER ─────────────────────────────── */
-#app-header {
-    background: linear-gradient(160deg, #13161f 0%, #181c28 60%, #111420 100%);
-    border: 1px solid var(--border-hi);
-    border-radius: 20px;
-    padding: 52px 44px 40px;
-    text-align: center;
+/* ═══════════ HERO HEADER ═══════════ */
+#hero {
     position: relative;
+    background: linear-gradient(145deg, #0f1220 0%, #131828 45%, #0c0f1a 100%);
+    border: 1px solid var(--b-2);
+    border-radius: var(--r-xl);
+    padding: 56px 48px 44px;
+    text-align: center;
     overflow: hidden;
-    box-shadow: var(--sh-lg);
-    margin-bottom: 4px;
+    box-shadow: var(--sh-xl);
+    margin-bottom: 2px;
 }
 
-#app-header::before {
+#hero::before {
     content: '';
     position: absolute;
-    top: -80px; left: 50%;
-    transform: translateX(-50%);
-    width: 440px; height: 340px;
-    background: radial-gradient(ellipse, rgba(201,169,110,0.09) 0%, transparent 68%);
-    pointer-events: none;
+    top: -120px; left: 50%; transform: translateX(-50%);
+    width: 600px; height: 400px;
+    background: conic-gradient(from 180deg at 50% 50%, rgba(212,168,83,0) 0deg, rgba(212,168,83,0.07) 60deg, rgba(77,148,255,0.04) 120deg, rgba(212,168,83,0) 180deg, rgba(212,168,83,0.06) 240deg, rgba(77,148,255,0.03) 300deg, rgba(212,168,83,0) 360deg);
+    animation: aurora 12s linear infinite;
+    pointer-events: none; border-radius: 50%;
 }
 
-#app-header::after {
-    content: '';
-    position: absolute;
-    bottom: 0; left: 10%; right: 10%;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--border-hi), transparent);
-}
-
-.hdr-icon {
-    font-size: 2.8rem;
-    margin-bottom: 14px;
-    display: block;
-    filter: drop-shadow(0 0 18px rgba(201,169,110,0.4));
-}
-
-.hdr-title {
-    font-family: 'Playfair Display', serif !important;
-    font-size: 3rem !important;
-    font-weight: 700 !important;
-    color: var(--gold) !important;
-    letter-spacing: -1px;
-    line-height: 1.1;
-    margin: 0 0 12px !important;
-    text-shadow: 0 2px 32px rgba(201,169,110,0.25);
-}
-
-.hdr-sub {
-    font-family: 'DM Sans', sans-serif;
-    font-size: 1.02rem;
-    color: var(--tx-2);
-    font-weight: 300;
-    letter-spacing: 0.4px;
-    margin-bottom: 24px;
-}
-
-.badge-row {
-    display: flex;
-    gap: 8px;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-top: 6px;
-}
-
-.badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    background: rgba(201,169,110,0.07);
-    border: 1px solid rgba(201,169,110,0.18);
-    border-radius: 99px;
-    padding: 5px 13px;
-    font-family: 'DM Mono', monospace;
-    font-size: 0.72rem;
-    color: var(--gold);
-    letter-spacing: 0.3px;
-    transition: background 0.2s;
-}
-
-.badge:hover { background: rgba(201,169,110,0.13); }
-
-/* ── PANEL CARDS ─────────────────────────── */
-.gr-group {
-    background: var(--bg-2) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r) !important;
-    padding: 26px 28px !important;
-    box-shadow: var(--sh) !important;
-    transition: border-color 0.25s;
-    position: relative;
+@keyframes aurora {
+    from { transform: translateX(-50%) rotate(0deg); }
+    to   { transform: translateX(-50%) rotate(360deg); }
 }
 
-.gr-group:hover {
-    border-color: var(--border-hi) !important;
+#hero::after {
+    content: ''; position: absolute;
+    bottom: 0; left: 8%; right: 8%; height: 1px;
+    background: linear-gradient(90deg, transparent, var(--b-2) 30%, var(--b-hi) 50%, var(--b-2) 70%, transparent);
 }
 
-/* ── SECTION LABELS ─────────────────────── */
-.sec-label {
-    font-family: 'DM Mono', monospace;
-    font-size: 0.67rem;
-    font-weight: 500;
-    letter-spacing: 2.5px;
-    text-transform: uppercase;
-    color: var(--gold);
-    margin-bottom: 18px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+.hero-corner { position: absolute; width: 36px; height: 36px; opacity: 0.35; }
+.hero-corner-tl { top: 18px; left: 18px; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); border-radius: 4px 0 0 0; }
+.hero-corner-tr { top: 18px; right: 18px; border-top: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); border-radius: 0 4px 0 0; }
+.hero-corner-bl { bottom: 18px; left: 18px; border-bottom: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); border-radius: 0 0 0 4px; }
+.hero-corner-br { bottom: 18px; right: 18px; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); border-radius: 0 0 4px 0; }
+
+.hero-eyebrow {
+    display: inline-flex; align-items: center; gap: 8px;
+    background: rgba(212,168,83,0.07); border: 1px solid rgba(212,168,83,0.2);
+    border-radius: 99px; padding: 5px 14px;
+    font-family: 'Geist Mono', monospace; font-size: 0.67rem;
+    color: var(--gold); letter-spacing: 2px; text-transform: uppercase;
+    margin-bottom: 20px; animation: fadeDown 0.6s ease both;
 }
 
-.sec-label::before {
-    content: '';
-    display: block;
-    width: 22px; height: 1px;
-    background: linear-gradient(90deg, var(--gold), transparent);
+.hero-eyebrow::before {
+    content: ''; width: 5px; height: 5px; background: var(--gold);
+    border-radius: 50%; box-shadow: 0 0 6px var(--gold);
+    animation: pulse-dot 2s ease-in-out infinite;
 }
 
-.sec-label::after {
-    content: '';
-    flex: 1; height: 1px;
-    background: linear-gradient(90deg, var(--border), transparent);
+@keyframes pulse-dot {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.4; transform: scale(0.65); }
 }
 
-/* ── FORM ELEMENTS ──────────────────────── */
-label span {
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.78rem !important;
-    font-weight: 500 !important;
-    color: var(--tx-2) !important;
-    letter-spacing: 0.5px !important;
-    text-transform: uppercase !important;
+.hero-title {
+    font-family: 'Instrument Serif', Georgia, serif !important;
+    font-size: 3.4rem !important; font-weight: 400 !important;
+    color: var(--tx-1) !important; letter-spacing: -1.5px;
+    line-height: 1.05; margin-bottom: 16px !important;
+    animation: fadeDown 0.6s 0.1s ease both;
 }
 
-textarea, input[type="text"], .gr-textbox textarea {
-    background: var(--bg-3) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-sm) !important;
-    color: var(--tx-1) !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.9rem !important;
-    padding: 13px 16px !important;
-    transition: border-color 0.2s, box-shadow 0.2s !important;
-    resize: none !important;
+.hero-title em {
+    font-style: italic; color: var(--gold);
+    text-shadow: 0 0 40px rgba(212,168,83,0.3);
+}
+
+.hero-sub {
+    font-size: 1rem; color: var(--tx-2); font-weight: 300;
+    letter-spacing: 0.2px; max-width: 560px; margin: 0 auto 28px;
+    line-height: 1.6; animation: fadeDown 0.6s 0.2s ease both;
+}
+
+.pill-row {
+    display: flex; gap: 8px; justify-content: center;
+    flex-wrap: wrap; animation: fadeDown 0.6s 0.3s ease both;
+}
+
+.pill {
+    display: inline-flex; align-items: center; gap: 6px;
+    background: rgba(255,255,255,0.03); border: 1px solid var(--b-2);
+    border-radius: 99px; padding: 6px 14px;
+    font-size: 0.76rem; font-weight: 500;
+    color: var(--tx-2); letter-spacing: 0.2px;
+    transition: all 0.2s; cursor: default;
+}
+
+.pill:hover { border-color: var(--gold); color: var(--gold-lt); background: var(--gold-muted); transform: translateY(-1px); }
+.pill-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
+
+/* ═══════════ PANEL CARDS ═══════════ */
+.gr-group {
+    background: rgba(19,22,31,0.88) !important;
+    backdrop-filter: blur(20px) saturate(140%) !important;
+    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
+    border: 1px solid var(--b-1) !important;
+    border-radius: var(--r-lg) !important;
+    padding: 28px 32px !important;
+    box-shadow: var(--sh) !important;
+    transition: border-color 0.3s, box-shadow 0.3s !important;
+    position: relative; overflow: hidden;
+}
+
+.gr-group::before {
+    content: ''; position: absolute;
+    top: 0; left: 0; right: 0; height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.05) 60%, transparent);
+    pointer-events: none;
+}
+
+.gr-group:hover { border-color: var(--b-2) !important; box-shadow: var(--sh-lg) !important; }
+
+/* ═══════════ STEP HEADERS ═══════════ */
+.step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
+
+.step-num {
+    width: 30px; height: 30px; background: var(--gold-muted);
+    border: 1px solid rgba(212,168,83,0.25); border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Geist Mono', monospace; font-size: 0.72rem;
+    font-weight: 500; color: var(--gold); flex-shrink: 0;
+}
+
+.step-title { font-size: 0.95rem; font-weight: 600; color: var(--tx-1); letter-spacing: -0.2px; }
+.step-desc { font-size: 0.76rem; color: var(--tx-3); margin-left: auto; }
+.step-divider { height: 1px; background: linear-gradient(90deg, var(--b-1), transparent); margin-bottom: 20px; }
+
+/* ═══════════ FORM CONTROLS ═══════════ */
+label span, .block label span {
+    font-family: 'Geist', sans-serif !important; font-size: 0.73rem !important;
+    font-weight: 600 !important; color: var(--tx-3) !important;
+    letter-spacing: 0.8px !important; text-transform: uppercase !important;
+}
+
+textarea, input[type="text"], .gr-textbox textarea, .gr-textbox input {
+    background: var(--bg-3) !important; border: 1px solid var(--b-1) !important;
+    border-radius: var(--r-sm) !important; color: var(--tx-1) !important;
+    font-family: 'Geist Mono', monospace !important; font-size: 0.88rem !important;
+    padding: 14px 18px !important;
+    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
+    resize: none !important; line-height: 1.5 !important;
 }
 
 textarea:focus, input[type="text"]:focus {
-    border-color: var(--gold) !important;
-    box-shadow: var(--sh-gold) !important;
-    outline: none !important;
+    border-color: var(--gold) !important; box-shadow: var(--gold-ring) !important;
+    background: var(--bg-4) !important; outline: none !important;
 }
 
 textarea::placeholder, input::placeholder {
-    color: var(--tx-3) !important;
-    font-style: italic;
+    color: var(--tx-3) !important; font-style: italic;
+    font-family: 'Geist', sans-serif !important; font-size: 0.84rem !important;
 }
 
 select, .gr-dropdown select {
-    background: var(--bg-3) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-sm) !important;
-    color: var(--tx-1) !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.88rem !important;
-    padding: 13px 16px !important;
-    transition: border-color 0.2s !important;
+    background: var(--bg-3) !important; border: 1px solid var(--b-1) !important;
+    border-radius: var(--r-sm) !important; color: var(--tx-1) !important;
+    font-family: 'Geist', sans-serif !important; font-size: 0.88rem !important;
+    padding: 14px 18px !important; transition: border-color 0.2s, box-shadow 0.2s !important;
 }
 
-select:focus { border-color: var(--gold) !important; outline: none !important; }
+select:focus { border-color: var(--gold) !important; box-shadow: var(--gold-ring) !important; outline: none !important; }
 
-/* ── BUTTONS ────────────────────────────── */
+/* ═══════════ BUTTONS ═══════════ */
 .gr-button {
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.86rem !important;
-    font-weight: 600 !important;
-    letter-spacing: 0.2px !important;
-    border-radius: var(--r-sm) !important;
-    cursor: pointer !important;
-    transition: all 0.2s ease !important;
-    padding: 12px 22px !important;
-    border: none !important;
+    font-family: 'Geist', sans-serif !important; font-size: 0.85rem !important;
+    font-weight: 600 !important; letter-spacing: 0.1px !important;
+    border-radius: var(--r-sm) !important; cursor: pointer !important;
+    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+    padding: 13px 24px !important; position: relative; overflow: hidden;
+}
+
+.gr-button-primary::after {
+    content: ''; position: absolute;
+    top: 0; left: -100%; width: 100%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
+    transition: left 0.45s ease;
 }
+.gr-button-primary:hover::after { left: 100%; }
 
 .gr-button-primary {
-    background: linear-gradient(135deg, #c9a96e 0%, #a87c3a 100%) !important;
-    color: #0a0c10 !important;
-    box-shadow: 0 2px 14px rgba(201,169,110,0.28) !important;
+    background: linear-gradient(135deg, #d4a853 0%, #b8893a 60%, #9e7535 100%) !important;
+    color: #070810 !important; border: none !important;
+    box-shadow: 0 2px 16px rgba(212,168,83,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
 }
 
 .gr-button-primary:hover {
-    filter: brightness(1.1) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 22px rgba(201,169,110,0.38) !important;
+    transform: translateY(-2px) scale(1.01) !important;
+    box-shadow: 0 8px 28px rgba(212,168,83,0.42), inset 0 1px 0 rgba(255,255,255,0.2) !important;
+    filter: brightness(1.06) !important;
 }
 
-.gr-button-primary:active { transform: translateY(0) !important; }
+.gr-button-primary:active { transform: translateY(0) scale(0.99) !important; }
 
 .gr-button-secondary {
-    background: var(--bg-4) !important;
-    color: var(--tx-1) !important;
-    border: 1px solid var(--border-hi) !important;
+    background: var(--bg-4) !important; color: var(--tx-2) !important;
+    border: 1px solid var(--b-2) !important;
 }
 
 .gr-button-secondary:hover {
-    border-color: var(--gold) !important;
-    color: var(--gold) !important;
-    background: var(--gold-glow) !important;
-    transform: translateY(-1px) !important;
+    border-color: var(--gold) !important; color: var(--gold-lt) !important;
+    background: var(--gold-muted) !important; transform: translateY(-1px) !important;
+    box-shadow: var(--sh-gold) !important;
 }
 
-/* ── STATUS ─────────────────────────────── */
+/* ═══════════ STATUS BOX ═══════════ */
 #status-box .prose p, #status-box p {
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.82rem !important;
-    color: var(--tx-2) !important;
-    background: var(--bg-3) !important;
-    border-left: 3px solid var(--gold) !important;
-    border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
-    padding: 10px 16px !important;
-    margin: 0 !important;
-}
-
-/* ── CHATBOT ─────────────────────────────── */
-.gr-chatbot {
-    background: var(--bg-1) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r) !important;
-    padding: 12px !important;
-}
-
-/* ── SUMMARY ────────────────────────────── */
-#summary-out .prose {
-    background: var(--bg-3) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r) !important;
-    padding: 22px 26px !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.93rem !important;
-    line-height: 1.78 !important;
-    color: var(--tx-1) !important;
+    font-family: 'Geist Mono', monospace !important; font-size: 0.8rem !important;
+    color: var(--tx-2) !important; background: var(--bg-3) !important;
+    border: 1px solid var(--b-1) !important; border-left: 3px solid var(--gold) !important;
+    border-radius: 0 var(--r-xs) var(--r-xs) 0 !important;
+    padding: 11px 16px !important; margin: 0 !important; line-height: 1.55 !important;
 }
 
-#summary-out strong { color: var(--gold) !important; }
-#summary-out em { color: var(--tx-2) !important; }
-#summary-out ul { padding-left: 20px !important; }
-#summary-out li { margin-bottom: 6px !important; }
+/* ═══════════ SUMMARY OUTPUT ═══════════ */
+#summary-out .prose strong, #summary-out strong { color: var(--gold-lt) !important; font-weight: 600 !important; }
+#summary-out .prose p { margin-bottom: 10px !important; }
+#summary-out .prose ul { padding-left: 20px !important; }
+#summary-out .prose li { margin-bottom: 5px !important; color: var(--tx-1) !important; }
+#summary-out .prose em { color: var(--tx-2) !important; }
+
+/* ═══════════ CHATBOT ═══════════ */
+.gr-chatbot, [data-testid="chatbot"] {
+    background: var(--bg-1) !important; border: 1px solid var(--b-1) !important;
+    border-radius: var(--r) !important; padding: 12px !important;
+}
 
-/* ── AUDIO ──────────────────────────────── */
-.gr-audio {
-    background: var(--bg-3) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: var(--r-sm) !important;
+.gr-chatbot .message {
+    font-family: 'Geist', sans-serif !important; font-size: 0.9rem !important;
+    line-height: 1.7 !important; padding: 13px 18px !important;
+    border-radius: 12px !important; max-width: 82% !important;
+    animation: msgIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
 }
 
-/* ── FOOTER ─────────────────────────────── */
-#footer .prose p {
-    text-align: center !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.7rem !important;
-    color: var(--tx-4) !important;
-    letter-spacing: 0.5px !important;
-    padding: 4px !important;
+@keyframes msgIn {
+    from { opacity: 0; transform: translateY(8px) scale(0.97); }
+    to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-/* ── SCROLLBAR ──────────────────────────── */
-::-webkit-scrollbar { width: 5px; height: 5px; }
-::-webkit-scrollbar-track { background: var(--bg-1); }
-::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 99px; }
-::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }
+.gr-chatbot .message.user {
+    background: linear-gradient(135deg, var(--bg-4), var(--bg-5)) !important;
+    border: 1px solid var(--b-2) !important; color: var(--tx-1) !important; margin-left: auto !important;
+}
+
+.gr-chatbot .message.bot {
+    background: var(--bg-2) !important; border: 1px solid var(--b-1) !important; color: var(--tx-1) !important;
+}
+
+/* ═══════════ AUDIO ═══════════ */
+.gr-audio, [data-testid="audio"] {
+    background: var(--bg-3) !important; border: 1px solid var(--b-1) !important;
+    border-radius: var(--r-sm) !important; padding: 8px !important;
+}
 
-/* ── ANIMATIONS ─────────────────────────── */
-@keyframes fadeUp {
-    from { opacity: 0; transform: translateY(14px); }
-    to   { opacity: 1; transform: translateY(0); }
+/* ═══════════ VOICE DESC ═══════════ */
+.voice-desc {
+    font-size: 0.84rem; color: var(--tx-2); margin: 0 0 16px; line-height: 1.6;
+    padding: 10px 14px; background: var(--bg-3); border-radius: var(--r-xs);
+    border-left: 2px solid var(--b-2);
 }
 
-.gradio-container > .gr-group,
-.gradio-container > div > .gr-group {
-    animation: fadeUp 0.45s ease both;
+/* ═══════════ FOOTER ═══════════ */
+#footer-bar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px 20px; background: rgba(15,17,25,0.6);
+    border: 1px solid var(--b-0); border-radius: var(--r); margin-top: 4px;
+    flex-wrap: wrap; gap: 10px;
 }
 
-.gradio-container > div > *:nth-child(1) { animation-delay: 0.05s; }
-.gradio-container > div > *:nth-child(2) { animation-delay: 0.12s; }
-.gradio-container > div > *:nth-child(3) { animation-delay: 0.19s; }
-.gradio-container > div > *:nth-child(4) { animation-delay: 0.26s; }
-.gradio-container > div > *:nth-child(5) { animation-delay: 0.33s; }
+.footer-copy { font-family: 'Geist Mono', monospace; font-size: 0.68rem; color: var(--tx-3); }
+.footer-stack { display: flex; gap: 6px; flex-wrap: wrap; }
+.footer-tag {
+    font-family: 'Geist Mono', monospace; font-size: 0.64rem; color: var(--tx-3);
+    background: var(--bg-2); border: 1px solid var(--b-0); border-radius: 4px; padding: 2px 7px;
+}
+
+/* ═══════════ SCROLLBAR ═══════════ */
+::-webkit-scrollbar { width: 4px; height: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--b-2); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--gold-dk); }
+
+/* ═══════════ ANIMATIONS ═══════════ */
+@keyframes fadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px);  } to { opacity: 1; transform: translateY(0); } }
+@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
+
+.gradio-container .gr-group { animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
+
+::selection { background: rgba(212,168,83,0.25); color: var(--tx-1); }
 """
 
 # =========================
 # BUILD UI
 # =========================
 
-with gr.Blocks(title="ArXiv Research Assistant") as demo:
+with gr.Blocks(title="Research Intelligence Platform") as demo:
 
-    # ─── HEADER ───────────────────────────────────────────────────────
+    # ─── HERO HEADER ──────────────────────────────────────────────────
     gr.HTML("""
-    <div id="app-header">
-        <span class="hdr-icon">📖</span>
-        <div class="hdr-title">ArXiv Research Assistant</div>
-        <div class="hdr-sub">Load any research paper · Generate AI summaries · Chat with the content · Ask via voice</div>
-        <div class="badge-row">
-            <span class="badge">⚡ RAG-Powered</span>
-            <span class="badge">🧠 LLaMA 3.3 70B</span>
-            <span class="badge">🎙️ Whisper ASR</span>
-            <span class="badge">🔍 FAISS Semantic Search</span>
-            <span class="badge">🔗 DOI Resolver</span>
+    <div id="hero">
+        <div class="hero-corner hero-corner-tl"></div>
+        <div class="hero-corner hero-corner-tr"></div>
+        <div class="hero-corner hero-corner-bl"></div>
+        <div class="hero-corner hero-corner-br"></div>
+
+        <div class="hero-eyebrow">Research Intelligence Platform</div>
+
+        <div class="hero-title">Your <em>AI Research</em> Partner</div>
+
+        <div class="hero-sub">
+            Paste any paper DOI — instantly fetch, index, summarize, and interrogate
+            research literature with LLaMA 3.3 and semantic search.
+        </div>
+
+        <div class="pill-row">
+            <span class="pill"><span class="pill-dot" style="background:#3ecf8e"></span>RAG Architecture</span>
+            <span class="pill"><span class="pill-dot" style="background:#d4a853"></span>LLaMA 3.3 · 70B</span>
+            <span class="pill"><span class="pill-dot" style="background:#4d94ff"></span>Whisper ASR</span>
+            <span class="pill"><span class="pill-dot" style="background:#f0a443"></span>FAISS Semantic Index</span>
+            <span class="pill"><span class="pill-dot" style="background:#c084fc"></span>DOI Resolver</span>
         </div>
     </div>
     """)
 
-    # ─── 01 LOAD PAPER ────────────────────────────────────────────────
+    # ─── STEP 01 — LOAD PAPER ─────────────────────────────────────────
     with gr.Group():
-        gr.HTML('<div class="sec-label">01 &nbsp; Load Paper</div>')
+        gr.HTML("""
+        <div class="step-header">
+            <div class="step-num">01</div>
+            <div><div class="step-title">Load Paper</div></div>
+            <div class="step-desc">Paste DOI &rarr; fetch &rarr; index</div>
+        </div>
+        <div class="step-divider"></div>
+        """)
         with gr.Row(equal_height=True):
             arxiv_input = gr.Textbox(
                 label="Paper DOI",
-                placeholder="e.g.  10.1038/s41586-021-03819-2  or  https://doi.org/10.48550/arXiv.1706.03762",
+                placeholder="10.1038/s41586-021-03819-2  ·  https://doi.org/10.48550/arXiv.1706.03762",
                 scale=5,
             )
-            load_btn = gr.Button("🚀  Load Paper", variant="primary", scale=1, min_width=150)
-
+            load_btn = gr.Button("Load Paper →", variant="primary", scale=1, min_width=160)
         status = gr.Markdown(
-            value="*Enter a paper DOI above and click **Load Paper** to begin.*",
+            value="*Paste a DOI above and click **Load Paper** — the full text will be fetched and indexed automatically.*",
             elem_id="status-box",
         )
 
-    # ─── 02 SECTION SUMMARY ──���────────────────────────────────────────
+    # ─── STEP 02 — SECTION SUMMARY ────────────────────────────────────
     with gr.Group():
-        gr.HTML('<div class="sec-label">02 &nbsp; Section Summary</div>')
+        gr.HTML("""
+        <div class="step-header">
+            <div class="step-num">02</div>
+            <div><div class="step-title">Section Summary</div></div>
+            <div class="step-desc">AI-powered breakdown</div>
+        </div>
+        <div class="step-divider"></div>
+        """)
         with gr.Row(equal_height=True):
             section_dropdown = gr.Dropdown(
-                label="Select Section",
-                choices=[],
-                scale=5,
-                interactive=True,
+                label="Select Section", choices=[], scale=5, interactive=True,
             )
-            summarize_btn = gr.Button("✨  Summarize", variant="secondary", scale=1, min_width=150)
-
+            summarize_btn = gr.Button("✦ Summarize", variant="secondary", scale=1, min_width=150)
         summary_output = gr.Markdown(
-            value="*Select a section above and click Summarize to get an AI-powered breakdown.*",
+            value="*Select a section from the dropdown, then click **Summarize** for a structured AI breakdown.*",
             elem_id="summary-out",
         )
 
-    # ─── 03 CHAT ──────────────────────────────────────────────────────
+    # ─── STEP 03 — CHAT ───────────────────────────────────────────────
     with gr.Group():
-        gr.HTML('<div class="sec-label">03 &nbsp; Chat with Paper</div>')
-        chatbot = gr.Chatbot(
-            value=[],
-            height=430,
-            show_label=False,
-        )
+        gr.HTML("""
+        <div class="step-header">
+            <div class="step-num">03</div>
+            <div><div class="step-title">Chat with Paper</div></div>
+            <div class="step-desc">Context-aware Q&A</div>
+        </div>
+        <div class="step-divider"></div>
+        """)
+        chatbot = gr.Chatbot(value=[], height=440, show_label=False)
         with gr.Row(equal_height=True):
             msg = gr.Textbox(
-                label="Your Question",
+                label="Ask a Question",
                 placeholder="What is the main contribution?  ·  How does the method work?  ·  What datasets were used?",
-                scale=5,
-                lines=1,
-                max_lines=3,
+                scale=5, lines=1, max_lines=4,
             )
-            send_btn = gr.Button("Send  →", variant="primary", scale=1, min_width=120)
+            send_btn = gr.Button("Send →", variant="primary", scale=1, min_width=120)
 
-    # ─── 04 VOICE ─────────────────────────────────────────────────────
+    # ─── STEP 04 — VOICE ──────────────────────────────────────────────
     with gr.Group():
-        gr.HTML('<div class="sec-label">04 &nbsp; Voice Query</div>')
         gr.HTML("""
-            <p style="font-family:'DM Sans',sans-serif;font-size:0.85rem;
-                      color:#9b9588;margin:0 0 18px;line-height:1.6;">
-                Record or upload your question — Whisper will transcribe it and search the paper automatically.
-            </p>
+        <div class="step-header">
+            <div class="step-num">04</div>
+            <div><div class="step-title">Voice Query</div></div>
+            <div class="step-desc">Speak &rarr; transcribe &rarr; search</div>
+        </div>
+        <div class="step-divider"></div>
+        <p class="voice-desc">
+            Record or upload an audio question — Whisper ASR transcribes it and runs semantic search automatically.
+        </p>
         """)
         with gr.Row(equal_height=True):
-            audio = gr.Audio(
-                type="filepath",
-                label="Record or Upload Audio",
-                scale=5,
-            )
-            voice_btn = gr.Button("🎙️  Transcribe & Ask", variant="secondary", scale=1, min_width=160)
+            audio = gr.Audio(type="filepath", label="Record or Upload Audio", scale=5)
+            voice_btn = gr.Button("🎙 Transcribe & Ask", variant="secondary", scale=1, min_width=170)
 
     # ─── FOOTER ───────────────────────────────────────────────────────
-    gr.Markdown(
-        "Powered by · Gradio · Groq LLaMA 3.3 · FAISS · Sentence Transformers · faster-whisper · PyMuPDF",
-        elem_id="footer",
-    )
+    gr.HTML("""
+    <div id="footer-bar">
+        <span class="footer-copy">Research Intelligence Platform &middot; 2026</span>
+        <div class="footer-stack">
+            <span class="footer-tag">Gradio</span>
+            <span class="footer-tag">Groq LLaMA 3.3</span>
+            <span class="footer-tag">FAISS</span>
+            <span class="footer-tag">Sentence Transformers</span>
+            <span class="footer-tag">faster-whisper</span>
+            <span class="footer-tag">PyMuPDF</span>
+            <span class="footer-tag">Unpaywall</span>
+        </div>
+    </div>
+    """)
 
     # ─── BINDINGS ─────────────────────────────────────────────────────
     load_btn.click(load_paper, inputs=arxiv_input, outputs=[section_dropdown, status])