Update app.py

app.py

@@ -1,14 +1,13 @@
-# app_beautiful_blue_purple_theme.py
+# app.py
 """
-Multi-Mode AI Assistant (Voice, PDF, Image) with Wow-Factor Features
-- Preserves original features
-- Adds snippet highlighting, cross-modal memory, styled PDF generation
-- Live waveform placeholder for voice input
-- Modular & Hugging Face safe
-- UI: Blue -> Purple Neon theme (colorful tabs, headers, buttons, chat bubbles)
-THIS FILE is functionally identical to the user's original app.py but with
-additional CSS/HTML inside the Gradio Blocks to provide a colorful UI.
+Multi-Mode AI Assistant (Voice, PDF, Image) with Ultra Neon FX
+- Preserves all original logic and functionality
+- Visual tweaks: Background lightened (~30%), stronger header and labels,
+  brighter mic icon, increased button glow, neon borders, animations, rounded chat boxes,
+  soft shadows. NO functional changes.
 """
+
+
 import os
 import uuid
 import tempfile
@@ -21,7 +20,7 @@ from sentence_transformers import SentenceTransformer, util
 from fpdf import FPDF
 from datetime import datetime
 
-# ------------------ Load API Keys ------------------
+# ------------------ Load API KEYS ------------------
 load_dotenv()
 GROQ_API_KEY = os.getenv("GROQ_API_KEY", "").strip()
 OCR_SPACE_API_KEY = os.getenv("OCR_SPACE_API_KEY", "").strip()
@@ -162,7 +161,6 @@ def handle_pdf_question(question, session_id):
         {"role": "user", "content": f"PDF chunk:\n{chunk}\n\nQuestion: {question}"}
     ]
     assistant_text = groq_chat_completion(messages)
-    # Add snippet highlighting for wow factor
     assistant_text = f"**Snippet from PDF:**\n{chunk[:200]}...\n\n**Answer:**\n{assistant_text}"
     if session_id not in SESSION_HISTORY:
         SESSION_HISTORY[session_id] = []
@@ -285,335 +283,519 @@ def handle_text_image(question, session_id):
 
 # ------------------ Gradio UI ------------------
 with gr.Blocks() as demo:
-    # --- THEME CSS: Blue -> Purple Neon ---
-    gr.HTML(r"""
+    # Inject CSS via HTML to avoid gr.Blocks(css=...) (compatibility)
+    gr.HTML("""
     <style>
-    /* PAGE BACKGROUND */
-    body { background: linear-gradient(180deg, #0f172a 0%, #071029 100%); }
-    /* ---------------- Tabs ---------------- */
-    /* Target Gradio tab buttons (data-testid may vary across versions) */
-    div[data-testid="tab-list"] button,
-    .tabs button {
-        background: linear-gradient(90deg, #0ea5e9, #7c3aed);
-        color: white !important;
-        font-weight: 700;
-        border-radius: 12px 12px 0 0;
-        padding: 10px 18px;
-        margin-right: 6px;
-        border: none;
-        box-shadow: 0 6px 18px rgba(124,58,237,0.18);
-        transition: transform 0.18s ease, box-shadow 0.18s ease;
-    }
-    div[data-testid="tab-list"] button:hover,
-    .tabs button:hover { transform: translateY(-3px); }
-    /* Active tab style (selected) */
-    div[data-testid="tab-list"] button[aria-selected="true"],
-    .tabs button[aria-selected="true"] {
-        background: linear-gradient(90deg, #60a5fa, #a78bfa);
-        box-shadow: 0 8px 24px rgba(99,102,241,0.28);
-    }
-    /* ---------------- Global headers / markdown ---------------- */
-    .gradio-container h2, .gradio-container h3, .gradio-container h4,
-    .gradio-container .markdown { color: #e6eef8; }
-    /* Custom title styling */
-    .app-title {
-        font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
-        font-size: 22px;
-        color: white;
-        padding: 10px 14px;
-        border-radius: 10px;
-        background: linear-gradient(90deg, rgba(14,165,233,0.08), rgba(124,58,237,0.06));
-        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.02);
-        display: inline-block;
-    }
-    /* ---------------- Buttons ---------------- */
-    /* Generic Gradio buttons (use both .gr-button and button selectors for compat) */
-    .gr-button, .gradio-button, button {
-        background: linear-gradient(90deg, #06b6d4, #7c3aed) !important;
-        color: white !important;
-        border: none !important;
-        box-shadow: 0 8px 20px rgba(124,58,237,0.18);
-        border-radius: 10px !important;
-        padding: 8px 14px !important;
-        font-weight: 700 !important;
-        transition: transform 0.12s ease, box-shadow 0.12s ease;
-    }
-    .gr-button:hover, .gradio-button:hover, button:hover { transform: translateY(-3px); }
-    /* Small secondary buttons */
-    .secondary-btn { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color: #cfe8ff; box-shadow:none; }
-    /* ---------------- Chat bubbles ---------------- */
-    /* Gradio internals vary between versions; include multiple selectors for safety */
-    .chatbot .message.user, .gr-chat .message.user, .chat-message.user {
-        background: linear-gradient(90deg,#60a5fa,#38bdf8);
-        color: #051025;
-        border-radius: 16px 16px 16px 4px;
-        padding: 10px 12px;
-        max-width: 85%;
-    }
-    .chatbot .message.assistant, .gr-chat .message.assistant, .chat-message.assistant {
-        background: linear-gradient(90deg,#7c3aed,#a78bfa);
-        color: #fff;
-        border-radius: 16px 16px 4px 16px;
-        padding: 10px 12px;
-        max-width: 85%;
-    }
-    /* Timestamp / small metadata inside chat */
-    .chatbot .timestamp, .gr-chat .timestamp { color: rgba(230,238,248,0.6); font-size: 11px; }
-    /* Adjust chat container look */
-    .chatbot { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 12px; padding: 8px; }
-    /* Inputs and boxes */
-    .gradio-container textarea, .gradio-container input[type='text'], .gradio-container .textbox {
-        background: rgba(255,255,255,0.03); color: #e6eef8; border-radius: 8px; border: 1px solid rgba(255,255,255,0.04);
-    }
-    /* Small responsive tweaks */
-    @media (max-width: 768px) {
-        div[data-testid="tab-list"] button { padding: 8px 10px; font-size: 14px; }
-    }
-    
-/* Fix mic icon visibility and remove dark backend */
-.light-fix {
-    /* reset dark backgrounds in inputs */
+
+  /* ================= MIC INPUT BOX FIX ================= */
+/* ===== MIC BOX FIX ===== */
+#mic_box {
+    width: 100% !important;
+    height: 250px !important;
+    padding: 10px !important;
+    margin: 0 !important;
+    border-radius: 20px !important;
+    background: linear-gradient(180deg, #f0e0ff, #d8c0ff) !important;
+    border: 2px solid #aa66ff !important;
+    box-shadow: 0 8px 30px rgba(0,200,255,0.2) !important;
+    overflow: visible !important;
 }
-#mic_box button svg, #mic_box svg {
-    fill: #6d28d9 !important;
-    stroke: #6d28d9 !important;
+
+/* Hide all buttons except the first record and first stop */
+#mic_box button[title="Record"]:not(:first-of-type),
+#mic_box button[title="Stop"]:not(:first-of-type),
+#mic_box button[title="Download"],
+#mic_box button[title="Share"],
+#mic_box button[title="Edit"] {
+    display: none !important;
 }
-.gradio-container, body {
-    background: linear-gradient(135deg, #eef2ff 0%, #f5e8ff 100%) !important;
+
+/* Make buttons smaller */
+#mic_box button {
+    width: 36px !important;
+    height: 36px !important;
+    min-width: 36px !important;
+    min-height: 36px !important;
+    padding: 0 !important;
+    margin: 0 5px !important;
 }
-/* Fix mic inner box styling */
-#mic_box {
-    position: relative !important; /* for custom mic icon */
-    background: #ffffff !important;
-    border: 2px solid #d3c7ff !important;
-    border-radius: 14px !important;
-    padding: 10px !important;
-    height: 220px !important;
-    
 
+/* Center everything */
+#mic_box > div {
+    width: 100% !important;
+    min-height: 100px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: left !important;
+    justify-content: center !important;
+    gap: 20px !important;
+}
 
-   
+/* Button styles */
+#mic_box button[title="Record"] {
+    background: #ff4d4d !important;
+    border-radius: 50% !important;
 }
-#mic_box button, #mic_box .icon, #mic_box svg {
-    background: transparent !important;
-    fill: #6d28d9 !important;
-    stroke: #6d28d9 !important;
-}
-/* Ensure all text is clearly readable */
-body, .gradio-container, .gr-box, .gr-input, label, .gr-text, .gr-markdown, .gr-form, .gr-button, .gr-chatbot {
-    color: #2b2b2b !important;
-}
-/* Chatbot bubble fixes */
-.gr-chatbot .message.user {
-    background: #e4e7ff !important;
-    color: #1f1f1f !important;
-}
-.gr-chatbot .message.bot {
-    background: #f1e4ff !important;
-    color: #1f1f1f !important;
-}
-/* Input fields readable */
-input, textarea, .gr-textbox, .gr-textbox textarea {
-    background: #ffffff !important;
-    color: #1e1e1e !important;
-    border: 1px solid #cfcfcf !important;
-}
-/* Buttons readable */
-.gr-button {
-    color: #ffffff !important;
-    font-weight: 600;
+
+#mic_box button[title="Stop"] {
+    background: #4CAF50 !important;
+    border-radius: 50% !important;
 }
-/* Clear & visible mic button redesign */
-#mic_box button {
-    background: #6d28d9 !important; /* bright purple */
+
+/* Hide other elements */
+#mic_box .waveform,
+#mic_box .time,
+#mic_box .duration {
+    display: none !important;
+}
+
+/* Style the "Drop audio here" text */
+#mic_box .drag-text {
+    color: #6a0dad !important;
+    font-weight: bold !important;
+    font-size: 14px !important;
+    margin-top: 5px !important;
+    text-align: center !important;
+}
+
+  /* ================= AUDIO PLAYER FIX ================= */
+#audio_output_box {
+    width: 100% !important;
+    padding: 12px !important;
+    margin: 0 !important;
+    border-radius: 20px !important;
+    background: linear-gradient(180deg, #f0e0ff, #d8c0ff) !important;
+    border: 2px solid #aa66ff !important;
+    box-shadow: 0 8px 30px rgba(0,200,255,0.2) !important;
+    overflow: visible !important;
+}
+
+/* Audio player container */
+#audio_output_box .gradio-audio {
+    width: 100% !important;
+    min-width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    position: relative;
+}
+
+/* Controls row */
+#audio_output_box .controls {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    width: 100% !important;
+    gap: 4px !important;
+    padding: 4px 0 !important;
+    margin: 0 !important;
+    flex-wrap: nowrap !important;
+    overflow: visible !important;
+}
+
+/* Buttons */
+#audio_output_box button {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    margin: 0 2px !important;
+    padding: 0 !important;
     border-radius: 50% !important;
-    width: 60px !important;
-    height: 60px !important;
+    background: linear-gradient(90deg, #7fe9ff, #00a1ff) !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    border: none !important;
-    box-shadow: 0 0 10px rgba(109,40,217,0.4) !important;
-}
-/* Replace icon with clear mic symbol */
-#mic_box button svg {
-    width: 28px !important;
-    height: 28px !important;
-    fill: #1f1f1f !important;
-    stroke: #1f1f1f !important;
-}
-#mic_box button:hover {
-    background: #8b5cf6 !important;
-    box-shadow: 0 0 14px rgba(139,92,246,0.6) !important;
-}
-/* Add label under mic */
-#mic_box::after {
-    content: "Tap to Record";
-    display: block;
-    text-align: center;
-    font-size: 12px;
-    margin-top: 6px;
-    color: #4b4b4b;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
+    flex-shrink: 0 !important;
+}
+
+/* Button icons */
+#audio_output_box button svg {
+    width: 16px !important;
+    height: 16px !important;
+    color: #000 !important;
+    fill: #000 !important;
+}
+
+/* Progress bar */
+#audio_output_box .progress {
+    flex: 1 !important;
+    min-width: 60px !important;
+    margin: 0 8px !important;
+    height: 4px !important;
+    background: rgba(0,0,0,0.1) !important;
+    border-radius: 2px !important;
 }
 
-#mic_box::part(label) {
+/* Time display */
+#audio_output_box .time {
+    min-width: 70px !important;
+    text-align: center !important;
     font-size: 12px !important;
-    color: #6d28d9 !important;
-    writing-mode: vertical-lr;
-    text-align: center;
+    color: #000 !important;
+    font-weight: 600 !important;
+    padding: 0 4px !important;
+    flex-shrink: 0 !important;
+}
+
+/* Volume control */
+#audio_output_box .volume {
+    min-width: 80px !important;
+    margin-left: 4px !important;
+    flex-shrink: 0 !important;
 }
 
-/* ---------------- Mic Box Customization ---------------- */
-/* Make mic box taller and center contents */
-#mic_box.gradio-audio, 
-#mic_box.gradio-audio > div {
-    height: 150px !important;         /* total box height */
-    min-height: 150px !important;
+/* Hide default audio element */
+#audio_output_box audio {
+    display: none !important;
+}
+
+/* Ensure all controls are properly aligned */
+#audio_output_box .gradio-audio > div {
     display: flex !important;
-    flex-direction: column !important;
-    justify-content: center !important;
     align-items: center !important;
+    width: 100% !important;
+    overflow: visible !important;
 }
 
-/* Make the mic button bigger */
-#mic_box button {
-    width: 70px !important;
-    height: 70px !important;
+
+/* Force button visibility */
+#audio_output_box button[title="Mute"] {
+    margin-right: 4px !important;
 }
 
-/* Adjust the label under the button */
-#mic_box::after {
-    content: "Tap to Record" !important;
-    display: block !important;
+/* Ensure time display has enough space */
+#audio_output_box .time {
+    min-width: 80px !important;
     text-align: center !important;
-    font-size: 14px !important;       /* larger label text */
-    margin-top: 8px !important;
-    color: #4b4b4b !important;
 }
 
-/* ---------------- Drop Audio Here Box ---------------- */
-/* Target the internal Gradio file/audio drop area */
-#mic_box .gr-file-dropzone {
-    height: 120px !important;          /* taller drop area */
+/* Audio player container adjustments */
+#audio_output_box .gradio-audio {
+    min-height: 50px !important;
     display: flex !important;
     align-items: center !important;
-    justify-content: center !important;
-    background-color: #f3f0ff !important;  /* light purple background */
-    border: 2px dashed #a78bfa !important; /* dashed purple border */
-    border-radius: 14px !important;
+    padding: 8px !important;
+}
+/* --------------------- GLOBAL BODY & CONTAINER --------------------- */
+body, .gradio-container {
+    background: radial-gradient(circle at 8% 12%, #5a6ea0 0%, #7a8fc0 60%, #6f82b5 100%) !important;
+    color: #eaf6ff !important;
+    font-family: Inter, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* --------------------- HEADER & TITLE --------------------- */
+.header-box {
+    text-align: center;
+    padding: 18px 12px;
+    margin-bottom: 14px;
+    border-radius: 14px;
+    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
+    box-shadow: 0 12px 46px rgba(20, 30, 70, 0.35), inset 0 1px 0 rgba(255,255,255,0.03);
+}
+.app-title {
+    font-size: 34px;
+    font-weight: 900;
+    color: #ffffff !important;
+    letter-spacing: 1px;
+    text-shadow: 0 0 18px rgba(180,220,255,0.95), 0 0 48px rgba(140,180,255,0.65);
+    animation: titleGlow 3s infinite alternate;
+}
+@keyframes titleGlow {
+    from { opacity: 0.88; text-shadow: 0 0 16px rgba(120,200,255,0.6); transform: translateY(0); }
+    to   { opacity: 1;   text-shadow: 0 0 54px rgba(200,240,255,0.98); transform: translateY(-2px); }
+}
+.app-sub { color: rgba(235,245,255,0.98); margin-top:6px; }
+
+/* --------------------- CARDS & BOXES --------------------- */
+.glow-card, .header-box, .gr-chatbot, .upload-box, .gradio-container > .container {
+    border-radius: 20px !important;
+    border: 1px solid rgba(120,180,255,0.22) !important;
+    box-shadow: 0 16px 50px rgba(10,20,40,0.20), inset 0 0 28px rgba(140,180,255,0.02);
+    transition: transform 0.28s ease, box-shadow 0.28s ease;
+}
+.glow-card:hover { transform: translateY(-6px); box-shadow: 0 22px 58px rgba(30,50,90,0.32); }
+
+/* --------------------- BUTTONS --------------------- */
+.neon-btn, button {
+    background: linear-gradient(90deg,#7fe9ff,#00a1ff) !important;
+    color: #001528 !important;
+    border-radius: 18px !important;
+    padding: 10px 18px !important;
+    font-weight: 800 !important;
+    border: none !important;
+    box-shadow: 0 16px 36px rgba(0,150,255,0.28), 0 0 120px rgba(0,190,255,0.24), inset 0 1px 0 rgba(255,255,255,0.06);
+    transition: transform .18s ease, box-shadow .18s ease;
+}
+.neon-btn:hover, button:hover {
+    transform: translateY(-8px) scale(1.06);
+    box-shadow: 0 24px 58px rgba(0,160,255,0.46), 0 0 140px rgba(0,220,255,0.34);
+}
+.neon-btn:active, button:active { transform: scale(.98); }
+
+/* --------------------- MIC & AUDIO BOX --------------------- */
+
+
+@keyframes micPulse {
+    from { transform: scale(.985); box-shadow: 0 0 28px rgba(0,140,255,0.36); }
+    to   { transform: scale(1.04);  box-shadow: 0 0 120px rgba(0,230,255,0.95); }
+}
+
+/* AUDIO BUTTONS ICONS */
+
+
+
+
+/* --------------------- MIC & AUDIO ICONS FIX --------------------- */
+
+
+
+    /* Make all audio control buttons visible in Assistant Voice Output */
+    #audio_output_box .gradio-audio button,
+    #audio_output_box .gradio-audio button svg,
+    #audio_output_box .gradio-audio button i {
+    color: #00f7ff !important;       /* bright cyan */
+    fill: #00f7ff !important;
+    stroke: #00f7ff !important;
+    background: transparent !important;
+    filter: drop-shadow(0 8px 26px rgba(0,255,255,0.7)) !important;
+    }
+
+
+
+
+
+#audio_output_box {
+    border-radius: 20px !important;
+    padding: 8px !important;
+    background: linear-gradient(180deg, #f0e0ff, #d8c0ff) !important;
+    border: 2px solid #aa66ff !important;
+    box-shadow: 0 8px 30px rgba(0,200,255,0.2), inset 0 0 20px rgba(0,200,255,0.1);
+    }
+    #audio_output_box audio {
+    border-radius: 12px !important;
+    height: 40px !important;
+    width: 100% !important;
+    background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));
+    border: 2px solid rgba(0,180,255,0.12) !important;
+    }
+
+#audio_output_box .gradio-audio button,
+#audio_output_box .gradio-audio button svg,
+#audio_output_box .gradio-audio button i {
+    color: #000000 !important;
+    fill: #000000 !important;
+    stroke: #000000 !important;
+    opacity: 1 !important;
+    filter: none !important;
+}
+
+
+
+
+
+/* AUDIO ELEMENTS */
+#audio_output_box, #mic_box, #pdf_box, #img_box {
+    border-radius: 20px !important;
+    padding: 8px !important;
+    background: linear-gradient(180deg, #f0e0ff, #d8c0ff) !important;
+    border: 2px solid #aa66ff !important;
+    box-shadow: 0 8px 30px rgba(0,200,255,0.2), inset 0 0 20px rgba(0,200,255,0.1);
+    position: relative !important;
+    overflow: visible !important;
+}
+
+/* ====================== PDF Upload Box ====================== */
+#pdf_box,
+#pdf_box .file-container,
+#pdf_box .gr-file,
+#pdf_box input[type="file"],
+#pdf_box button {
+    border-radius: 20px !important;
+    padding: 8px !important;
+    background: linear-gradient(180deg, #f0e0ff, #d8c0ff) !important; /* same gradient as mic box */
+    border: 2px solid #aa66ff !important;
+    box-shadow: 0 8px 30px rgba(0,200,255,0.2), inset 0 0 20px rgba(0,200,255,0.1);
+    color: #001528 !important;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+/* Hover effect for PDF box */
+#pdf_box:hover,
+#pdf_box .file-container:hover,
+#pdf_box .gr-file:hover,
+#pdf_box input[type="file"]:hover,
+#pdf_box button:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(30,50,90,0.32), inset 0 0 25px rgba(0,220,255,0.08);
+}
+
+/* ====================== Image Upload Box ====================== */
+#img_box,
+#img_box .file-container,
+#img_box .gr-file,
+#img_box input[type="file"],
+#img_box button {
+    border-radius: 20px !important;
+    padding: 8px !important;
+    background: linear-gradient(180deg, #f0e0ff, #d8c0ff) !important; /* same gradient as mic box */
+    border: 2px solid #aa66ff !important;
+    box-shadow: 0 8px 30px rgba(0,200,255,0.2), inset 0 0 20px rgba(0,200,255,0.1);
+    color: #001528 !important;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+/* Hover effect for Image box */
+#img_box:hover,
+#img_box .file-container:hover,
+#img_box .gr-file:hover,
+#img_box input[type="file"]:hover,
+#img_box button:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 40px rgba(30,50,90,0.32), inset 0 0 25px rgba(0,220,255,0.08);
+}
+
+/* Adjust mic glow ring to fit new box size */
+#mic_box::before {
+    width: 88px !important;
+    height: 88px !important;
+    left: -14px !important;
+    top: -14px !important;
+}
+
+
+/* --------------------- CHAT BOT --------------------- */
+.gr-chatbot {
+    border-radius: 28px !important;
     padding: 12px !important;
+    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
+    border: 1px solid rgba(120,170,255,0.06) !important;
+    box-shadow: 0 16px 40px rgba(10,20,40,0.20);
 }
+.message.user { background: linear-gradient(90deg,#b0e0ff,#60b0ff) !important; color: #001528 !important; border-radius: 20px !important; padding:8px !important; }
+.message.bot  { background: linear-gradient(90deg,#004cff,#00aaff) !important; color: #ffffff !important; border-radius: 20px !important; padding:8px !important; }
 
-/* Make the text inside the drop area bigger and centered */
-#mic_box .gr-file-dropzone span {
-    font-size: 14px !important;        /* text size */
-    color: #4b4b4b !important;         /* text color */
-    text-align: center !important;
+/* --------------------- INPUTS & DROPDOWNS --------------------- */
+label, .gradio-textbox label, .gradio-select label, .gradio-dropdown label, .gradio-file label {
+    color: #001528 !important;
+    font-weight: 800;
 }
+select, .gradio-dropdown, .gradio-select, .gradio-file, input, textarea {
+    color: #00171f !important;
+    background: rgba(255,255,255,0.96) !important;
+    border: 1px solid rgba(0,120,255,0.12) !important;
+}
+.gradio-row .gradio-dropdown, .gradio-row select, .gradio-dropdown select {
+    background: linear-gradient(180deg,#ffffff,#f0f8ff) !important;
+    color: #00171f !important;
+    font-weight: 800;
+    border-radius: 12px !important;
+}
+
+/* --------------------- MARKDOWN & TEXT --------------------- */
+.gr-markdown, h1, h2, h3, p {
+    color: #effbff !important;
+}
+
+/* --------------------- ANIMATIONS --------------------- */
+.section-slide { animation: slideIn 0.9s cubic-bezier(.2,.9,.3,1) both; }
+@keyframes slideIn { 0% { transform: translateY(26px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
+.shimmer { background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06), rgba(255,255,255,0.02)); background-size: 200% 100%; animation: shimmer 2.8s infinite linear; }
+@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
+
+/* --------------------- RESPONSIVE --------------------- */
+@media (max-width: 800px) { #mic_box::before { left: -12px; top: -12px; width: 96px; height: 96px; } .app-title { font-size: 22px; } }
+@media (max-width: 480px) { #mic_box::before { left: -10px; top: -10px; width: 80px; height: 80px; } #mic_box audio { height: 36px !important; } #mic_box svg, #mic_box i { font-size: 20px !important; } }
+
+
+
+
 </style>
+
     """)
 
-    # Title area with colorful headline
+    # Header (title color adjusted for visibility)
     gr.HTML("""
-    <div style='display:flex;align-items:center;gap:14px'>
-      <div class='app-title'>
-        <strong>🛠 Multi-Mode AI Assistant</strong>
-        <div style='font-size:12px;color:#1f1f1f'>Voice · PDF · Image — Blue·Purple Neon Theme</div>
-      </div>
+    <div class="header-box">
+        <div class="app-title">⚡ OmniSense AI Bot — Ultra Neon</div>
+        <div class="app-sub">Voice • PDF • Image — Multi-Modal Intelligence with Neon FX</div>
     </div>
     """)
 
+    # Keep the main markdown visible and readable
+    gr.Markdown("## 🛠 Multi-Mode AI Assistant (Voice, PDF, Image)")
+
     session_voice = gr.State(str(uuid.uuid4()))
     session_pdf = gr.State(str(uuid.uuid4()))
     session_image = gr.State(str(uuid.uuid4()))
 
+    # ---------------- Voice Tab ----------------
     with gr.Tab("🎤 Voice Chat"):
-        # Tab header content (small colored markdown)
-        gr.HTML("""
-        <div style='margin-bottom:6px;'>
-          <h3 style='margin:0;padding:0;color:#1f1f1f'>🎤 Voice Chat — Speak naturally, get voice & text responses</h3>
-          <p style='margin:2px 0 6px;color:#3a3a3a;font-size:13px'>Hold and speak, ask general or knowledge-document questions. Enable enhancer for richer answers.</p>
-        </div>
-        """)
-
-        chat_voice = gr.Chatbot( height=320)
-        with gr.Row():
-            mic = gr.Audio(type="filepath",label="🎤 Record Voice (hold & speak)", elem_id="mic_box")
-            audio_output = gr.Audio(label="Assistant Voice Output", type="filepath", interactive=False)
-            tts_lang = gr.Dropdown(choices=["en", "ur"], value="en", label="TTS Language")
-
-        with gr.Row():
-            btn_general = gr.Button("⚡Ask General 🎯")
-            btn_pdf = gr.Button("⚡Ask PDF 📄")
-            btn_image = gr.Button("⚡Ask Image 🖼")
-            enhancer_toggle = gr.Checkbox(label="Enable Response Enhancer", value=False, scale =1)
-            tone_dropdown = gr.Dropdown(choices=["Helpful", "Formal", "Friendly"], value="Helpful", label="Enhancer Tone", scale =1)
-        with gr.Row():
-            btn_reset_logs = gr.Button("♻ Reset LOGs", elem_id='reset_logs')
-            btn_download_logs = gr.Button("📥 Download Summary", elem_id='download_logs')
-            Voice_summary_file = gr.File(label="📥Download Summary File", interactive=False)
-
-        answer_voice = gr.Textbox(label="Assistant Answer (text)", lines=2, visible=False)
-
-        btn_general.click(fn=handle_voice_general, 
-                          inputs=[mic, session_voice, tts_lang, enhancer_toggle, tone_dropdown],
-                          outputs=[answer_voice, audio_output, chat_voice])
+        chat_voice = gr.Chatbot(height=320, elem_classes=["section-slide"])
+        with gr.Row(elem_classes=["section-slide"]):
+            mic = gr.Audio(type="filepath", label="🎤 Record Voice (hold & speak)", elem_id="mic_box", interactive=True)
+            audio_output = gr.Audio(label="Assistant Voice Output", type="filepath", interactive=False,elem_id="audio_output_box")
+            tts_lang = gr.Dropdown(choices=["en","ur"], value="en", label="TTS Language")
+        with gr.Row(elem_classes=["section-slide"]):
+            btn_general = gr.Button("⚡Ask General 🎯", elem_classes=["neon-btn"])
+            btn_pdf = gr.Button("⚡Ask PDF 📄", elem_classes=["neon-btn"])
+            btn_image = gr.Button("⚡Ask Image 🖼", elem_classes=["neon-btn"])
+            enhancer_toggle = gr.Checkbox(label="Enable Response Enhancer", value=False, scale=1)
+            tone_dropdown = gr.Dropdown(choices=["Helpful","Formal","Friendly"], value="Helpful", label="Enhancer Tone", scale=1)
+        with gr.Row(elem_classes=["section-slide"]):
+            btn_reset_logs = gr.Button("♻ Reset LOGs", elem_classes=["neon-btn"])
+            btn_download_logs = gr.Button("📥 Download Summary", elem_classes=["neon-btn"])
+            Voice_summary_file = gr.File(label="📥Download Summary File", interactive=False, scale=1,elem_id="summary_file_voice")
+        answer_voice = gr.Textbox(label="Assistant Answer", lines=2, visible=False)
+
+        # Bind click handlers (functionality unchanged)
+        btn_general.click(fn=handle_voice_general, inputs=[mic, session_voice, tts_lang, enhancer_toggle, tone_dropdown], outputs=[answer_voice, audio_output, chat_voice])
         btn_pdf.click(fn=handle_voice_pdf, inputs=[mic, session_pdf, tts_lang], outputs=[answer_voice, audio_output, chat_voice])
         btn_image.click(fn=handle_voice_image, inputs=[mic, session_image, tts_lang], outputs=[answer_voice, audio_output, chat_voice])
         btn_reset_logs.click(lambda: (str(uuid.uuid4()), [], None, None, ""), outputs=[session_voice, chat_voice, mic, audio_output, answer_voice])
         btn_download_logs.click(download_pdf_summary, inputs=[session_voice], outputs=[Voice_summary_file])
 
+    # ---------------- PDF Tab ----------------
     with gr.Tab("📄 PDF Summarizer"):
-        gr.HTML("""
-        <div style='margin-bottom:6px;'>
-          <h3 style='margin:0;padding:0;color:#1f1f1f'>📄 PDF Summarizer — Upload a PDF, ask questions</h3>
-          <p style='margin:2px 0 6px;color:#3a3a3a;font-size:13px'>Uploads are chunked and embedded so you can ask targeted questions about the document.</p>
-        </div>
-        """)
-
-        pdf_output = gr.Textbox(label="Answer (Text Only)", lines=5)
-        with gr.Row():
-            pdf_upload_btn = gr.File(label="Upload PDF", file_types=[".pdf"], scale=1 )
-            pdf_question = gr.Textbox(label="Ask a question about PDF (text)", lines=3)
+        pdf_output = gr.Textbox(label="Answer (Text Only)", lines=5, elem_classes=["glow-card","section-slide"])
+        with gr.Row(elem_classes=["section-slide"]):
+            pdf_upload_btn = gr.File(label="Upload PDF", file_types=[".pdf"], scale=1,elem_id="pdf_box")
+            pdf_question = gr.Textbox(label="Ask a question about PDF", lines=3)
             pdf_upload_msg = gr.Textbox(label="Upload Status", interactive=False)
-
-        with gr.Row():
-            pdf_send_btn = gr.Button("Ask (Questions)")
-            pdf_reset_btn = gr.Button("♻ Reset LOGs")
-        with gr.Row():
-            pdf_summary_file = gr.File(label="📥Download Summary File", interactive=False,scale =1)
-            pdf_download_btn = gr.Button("📥 Download Summary")
+        with gr.Row(elem_classes=["section-slide"]):
+            pdf_send_btn = gr.Button("Ask (Questions)", elem_classes=["neon-btn"])
+            pdf_reset_btn = gr.Button("♻ Reset LOGs", elem_classes=["neon-btn"])
+        with gr.Row(elem_classes=["section-slide"]):
+            pdf_summary_file = gr.File(label="📥Download Summary File", interactive=False, scale=1)
+            pdf_download_btn = gr.Button("📥 Download Summary", elem_classes=["neon-btn"])
 
         pdf_upload_btn.upload(handle_pdf_upload, inputs=[pdf_upload_btn, session_pdf], outputs=[pdf_upload_msg])
         pdf_send_btn.click(handle_text_pdf, inputs=[pdf_question, session_pdf], outputs=[pdf_output])
         pdf_reset_btn.click(lambda: (str(uuid.uuid4()), ""), outputs=[session_pdf, pdf_output])
         pdf_download_btn.click(download_pdf_summary, inputs=[session_pdf], outputs=[pdf_summary_file])
 
+    # ---------------- IMAGE Tab ----------------
     with gr.Tab("🖼 Image OCR"):
-        gr.HTML("""
-        <div style='margin-bottom:6px;'>
-          <h3 style='margin:0;padding:0;color:#1f1f1f'>🖼 Image OCR — Extract text from images</h3>
-          <p style='margin:2px 0 6px;color:#3a3a3a;font-size:13px'>Upload an image, OCR runs, then ask questions about the extracted text.</p>
-        </div>
-        """)
-
-        image_output = gr.Textbox(label="Answer (Text Only)", lines=5)
-        with gr.Row():
-            image_upload_btn = gr.File(label="Upload Image", file_types=[".png", ".jpg", ".jpeg"], scale =1 )
+        image_output = gr.Textbox(label="Answer (Text Only)", lines=5, elem_classes=["glow-card","section-slide"])
+        with gr.Row(elem_classes=["section-slide"]):
+            image_upload_btn = gr.File(label="Upload Image", file_types=[".png",".jpg",".jpeg"], scale=1, elem_id="img_box")
             image_question = gr.Textbox(label="Ask question about Image", lines=3)
             image_upload_msg = gr.Textbox(label="Upload Status", interactive=False)
-
-        with gr.Row():
-            image_send_btn = gr.Button("Ask (Questions)")
-            image_reset_btn = gr.Button("♻ Reset LOGs")
-        with gr.Row():
-            image_summary_file = gr.File(label="📥Download Summary File", interactive=False,scale =1)
-            image_download_btn = gr.Button("📥 Download Summary")
+        with gr.Row(elem_classes=["section-slide"]):
+            image_send_btn = gr.Button("Ask (Questions)", elem_classes=["neon-btn"])
+            image_reset_btn = gr.Button("♻ Reset LOGs", elem_classes=["neon-btn"])
+        with gr.Row(elem_classes=["section-slide"]):
+            image_summary_file = gr.File(label="📥Download Summary File", interactive=False, scale=1)
+            image_download_btn = gr.Button("📥 Download Summary", elem_classes=["neon-btn"])
 
         image_upload_btn.upload(handle_image_upload, inputs=[image_upload_btn, session_image], outputs=[image_upload_msg, image_output])
         image_send_btn.click(handle_text_image, inputs=[image_question, session_image], outputs=[image_output])
         image_reset_btn.click(lambda: (str(uuid.uuid4()), ""), outputs=[session_image, image_output])
         image_download_btn.click(download_pdf_summary, inputs=[session_image], outputs=[image_summary_file])
 
+
+
+  
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()