Update app.py

app.py

@@ -228,36 +228,33 @@ def generate_stream(
         yield f"⚠ Error: {str(e)}"
 
 # ============================================================
-# Styling — Elegant Dark Glass, Aurora Accents, Premium UI
+# Styling — Black Glass & Brushed Metal Aesthetic
 # ============================================================
 
 CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 
 :root {
-    /* Elegant Dark Theme Palette */
-    --bg-primary: #090b10;
-    --bg-secondary: #0f121b;
-    --glass-bg: rgba(22, 27, 45, 0.65);
+    /* Obsidian & Titanium Palette */
+    --bg-obsidian: #050507;
+    --bg-metal-dark: #0a0a0c;
+    --bg-metal-light: #141418;
+    
+    /* Glass & Edges */
+    --glass-bg: rgba(12, 12, 15, 0.65);
+    --glass-edge-top: rgba(255, 255, 255, 0.12); /* Specular highlight */
+    --glass-edge-bottom: rgba(0, 0, 0, 0.4);
     --glass-border: rgba(255, 255, 255, 0.06);
-    --glass-border-hover: rgba(255, 255, 255, 0.12);
     
-    /* Accents */
-    --accent-primary: #38bdf8; /* Sky blue */
-    --accent-secondary: #818cf8; /* Indigo */
-    --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
-    --accent-glow: rgba(56, 189, 248, 0.15);
+    /* Chrome & Silver Accents */
+    --chrome-light: #f8fafc;
+    --chrome-mid: #cbd5e1;
+    --chrome-dark: #64748b;
     
     /* Text */
-    --text-primary: #f1f5f9;
+    --text-primary: #e2e8f0;
     --text-secondary: #94a3b8;
-    --text-muted: #64748b;
-    
-    /* Chat */
-    --user-bubble: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(129, 140, 248, 0.12) 100%);
-    --user-bubble-border: rgba(56, 189, 248, 0.2);
-    --bot-bubble: rgba(255, 255, 255, 0.03);
-    --bot-bubble-border: rgba(255, 255, 255, 0.05);
+    --text-muted: #475569;
 }
 
 * {
@@ -265,37 +262,45 @@ CUSTOM_CSS = """
     box-sizing: border-box;
 }
 
-/* Force mono for chat, code, and inputs */
+/* Monospace for chat/code/inputs */
 .message, .prose, textarea, input, .token-counter, code, pre {
     font-family: 'JetBrains Mono', ui-monospace, monospace !important;
 }
 
+/* Main Background: Brushed Metal / Anodized Black */
 body, .gradio-container {
-    background: var(--bg-primary) !important;
+    background-color: var(--bg-obsidian) !important;
     color: var(--text-primary) !important;
     background-image: 
-        radial-gradient(at 20% 10%, rgba(56, 189, 248, 0.04) 0px, transparent 50%),
-        radial-gradient(at 80% 90%, rgba(129, 140, 248, 0.04) 0px, transparent 50%),
-        radial-gradient(at 50% 50%, rgba(15, 18, 27, 1) 0px, transparent 100%) !important;
+        /* Subtle top-down lighting */
+        radial-gradient(ellipse at 50% 0%, rgba(30, 30, 35, 0.4) 0%, transparent 60%),
+        /* Diagonal brushed metal sheen */
+        linear-gradient(135deg, 
+            #08080a 0%, 
+            #111115 20%, 
+            #0a0a0c 40%, 
+            #141418 60%, 
+            #08080a 80%, 
+            #111115 100%) !important;
     min-height: 100vh;
 }
 
 /* Header */
 #veylon-header {
     text-align: center;
-    padding: 28px 12px 16px 12px;
-    animation: fadeInDown 0.8s ease-out;
+    padding: 32px 12px 20px 12px;
 }
 
 #veylon-header h1 {
-    font-size: 2.2rem;
+    font-size: 2.4rem;
     font-weight: 700;
     letter-spacing: -0.5px;
-    background: var(--accent-gradient);
+    /* Polished silver text */
+    background: linear-gradient(180deg, #ffffff 0%, #94a3b8 60%, #475569 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin-bottom: 6px;
-    filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.15));
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
+    margin-bottom: 8px;
 }
 
 #veylon-header p {
@@ -303,69 +308,60 @@ body, .gradio-container {
     font-size: 0.85rem;
     margin: 0;
     font-weight: 400;
-    letter-spacing: 0.02em;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
 
-/* Panels and Glassmorphism */
+/* Glass Panels with Physical Thickness */
 .gr-panel, .block, .form, .gap, .wrap {
     background: var(--glass-bg) !important;
     border: 1px solid var(--glass-border) !important;
+    /* The magic: top light edge, bottom dark edge for 3D glass effect */
+    border-top-color: var(--glass-edge-top) !important;
+    border-bottom-color: var(--glass-edge-bottom) !important;
     border-radius: 16px !important;
-    backdrop-filter: blur(20px) saturate(1.3);
-    -webkit-backdrop-filter: blur(20px) saturate(1.3);
-    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-.gr-panel:hover, .block:hover {
-    border-color: var(--glass-border-hover) !important;
+    backdrop-filter: blur(24px) saturate(1.2);
+    -webkit-backdrop-filter: blur(24px) saturate(1.2);
+    box-shadow: 
+        0 12px 40px rgba(0, 0, 0, 0.6), 
+        inset 0 1px 0 rgba(255, 255, 255, 0.05), 
+        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
 }
 
-/* Chatbot specific */
+/* Chatbot Container (OLED Screen Vibe) */
 #chatbot {
     border-radius: 20px !important;
-    border: 1px solid var(--glass-border) !important;
-    background: rgba(15, 18, 27, 0.4) !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
+    background: rgba(5, 5, 8, 0.85) !important;
+    border: 1px solid rgba(255, 255, 255, 0.04) !important;
+    box-shadow: 
+        inset 0 2px 15px rgba(0, 0, 0, 0.8), 
+        0 8px 32px rgba(0, 0, 0, 0.4) !important;
     overflow: hidden;
 }
 
-/* Chat input area inside chatbot */
 #chatbot .form {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
-    padding: 8px !important;
-}
-
-#chatbot textarea {
-    background: rgba(255, 255, 255, 0.04) !important;
-    border: 1px solid var(--glass-border) !important;
-    border-radius: 14px !important;
-    resize: none !important;
-    min-height: 46px !important;
-    max-height: 120px !important;
-    transition: all 0.3s ease !important;
-}
-
-#chatbot textarea:focus {
-    background: rgba(255, 255, 255, 0.06) !important;
-    border-color: var(--accent-primary) !important;
-    box-shadow: 0 0 0 3px var(--accent-glow) !important;
+    padding: 10px !important;
 }
 
 /* Chat Bubbles */
 .message.user {
-    background: var(--user-bubble) !important;
-    border: 1px solid var(--user-bubble-border) !important;
+    /* Brushed dark metal for user */
+    background: linear-gradient(135deg, rgba(35, 35, 40, 0.9) 0%, rgba(20, 20, 25, 0.9) 100%) !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-top-color: rgba(255, 255, 255, 0.15) !important;
     border-radius: 18px 18px 4px 18px !important;
     color: var(--text-primary) !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
 }
 
 .message.bot {
-    background: var(--bot-bubble) !important;
-    border: 1px solid var(--bot-bubble-border) !important;
+    /* Smoky glass for bot */
+    background: rgba(15, 15, 20, 0.6) !important;
+    border: 1px solid rgba(255, 255, 255, 0.04) !important;
     border-radius: 18px 18px 18px 4px !important;
     color: var(--text-primary) !important;
 }
@@ -376,113 +372,128 @@ body, .gradio-container {
     font-size: 0.9rem !important;
 }
 
-/* Inputs and Textareas (Global) */
-input:not([type="range"]), .gr-box, .gr-text-input {
-    background: rgba(255, 255, 255, 0.03) !important;
+/* Recessed Inputs (Carved Metal Look) */
+input:not([type="range"]), textarea, .gr-box, .gr-text-input {
+    background: rgba(0, 0, 0, 0.5) !important;
     color: var(--text-primary) !important;
-    border: 1px solid var(--glass-border) !important;
+    border: 1px solid rgba(255, 255, 255, 0.06) !important;
     border-radius: 12px !important;
+    /* Inset shadow makes it look physically recessed */
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(0,0,0,0.4) !important;
     transition: all 0.3s ease !important;
     font-size: 0.9rem !important;
 }
 
-input:not([type="range"]):focus, .gr-box:focus-within {
-    background: rgba(255, 255, 255, 0.05) !important;
-    border-color: var(--accent-primary) !important;
-    box-shadow: 0 0 0 3px var(--accent-glow) !important;
+input:not([type="range"]):focus, textarea:focus, .gr-box:focus-within {
+    background: rgba(0, 0, 0, 0.6) !important;
+    border-color: rgba(255, 255, 255, 0.15) !important;
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.05) !important;
     outline: none !important;
 }
 
 /* Labels */
 label span, .form label span {
     color: var(--text-muted) !important;
-    font-size: 0.72rem !important;
+    font-size: 0.7rem !important;
     text-transform: uppercase !important;
-    letter-spacing: 0.08em !important;
+    letter-spacing: 0.1em !important;
     font-weight: 600 !important;
-    margin-bottom: 6px !important;
+    margin-bottom: 8px !important;
 }
 
-/* Sliders */
+/* Metallic Sliders */
 input[type="range"] {
     -webkit-appearance: none;
     background: transparent;
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
-    height: 6px;
-    background: rgba(255, 255, 255, 0.08);
-    border-radius: 3px;
+    height: 4px;
+    background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+    border-radius: 2px;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
 }
 
 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
-    height: 16px;
-    width: 16px;
+    height: 18px;
+    width: 18px;
     border-radius: 50%;
-    background: var(--accent-gradient);
-    margin-top: -5px;
-    box-shadow: 0 0 10px var(--accent-glow);
+    /* Chrome sphere */
+    background: linear-gradient(145deg, #f8fafc 0%, #94a3b8 50%, #475569 100%);
+    margin-top: -7px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.8);
     cursor: pointer;
     transition: transform 0.2s ease;
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-    transform: scale(1.2);
+    transform: scale(1.15);
 }
 
-/* Buttons */
+/* Polished Chrome Primary Buttons */
 button.primary, .gr-button-primary, button[type="submit"] {
-    background: var(--accent-gradient) !important;
+    background: linear-gradient(180deg, #f1f5f9 0%, #94a3b8 40%, #cbd5e1 100%) !important;
     color: #0f172a !important;
-    border: none !important;
+    border: 1px solid rgba(255, 255, 255, 0.4) !important;
+    border-bottom-color: rgba(0, 0, 0, 0.3) !important;
     border-radius: 12px !important;
-    font-weight: 600 !important;
-    font-size: 0.9rem !important;
-    letter-spacing: 0.02em;
-    box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-weight: 700 !important;
+    font-size: 0.85rem !important;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    box-shadow: 
+        0 4px 12px rgba(0, 0, 0, 0.5), 
+        inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 10px 24px !important;
 }
 
 button.primary:hover, .gr-button-primary:hover, button[type="submit"]:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 40%, #e2e8f0 100%) !important;
+    transform: translateY(-1px);
+    box-shadow: 
+        0 6px 16px rgba(0, 0, 0, 0.6), 
+        inset 0 1px 0 rgba(255, 255, 255, 1);
 }
 
 button.primary:active, .gr-button-primary:active {
-    transform: translateY(0);
+    transform: translateY(1px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
-/* Secondary buttons */
+/* Secondary Buttons (Dark Metal) */
 button.secondary, .gr-button-secondary, button:not(.primary):not([type="submit"]) {
-    background: rgba(255, 255, 255, 0.04) !important;
+    background: linear-gradient(180deg, rgba(30, 30, 35, 0.8) 0%, rgba(15, 15, 20, 0.8) 100%) !important;
     color: var(--text-secondary) !important;
-    border: 1px solid var(--glass-border) !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-top-color: rgba(255, 255, 255, 0.12) !important;
     border-radius: 12px !important;
-    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
+    transition: all 0.2s ease;
 }
 
 button.secondary:hover, .gr-button-secondary:hover {
-    background: rgba(255, 255, 255, 0.08) !important;
+    background: linear-gradient(180deg, rgba(40, 40, 45, 0.9) 0%, rgba(20, 20, 25, 0.9) 100%) !important;
     color: var(--text-primary) !important;
-    border-color: var(--glass-border-hover) !important;
 }
 
 /* Stats badge */
 #stats-badge {
     text-align: center;
     color: var(--text-muted);
-    font-size: 0.75rem;
-    padding: 16px 0 4px 0;
-    font-weight: 400;
-    letter-spacing: 0.02em;
+    font-size: 0.7rem;
+    padding: 20px 0 4px 0;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
 
 /* Scrollbars */
 ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -491,45 +502,19 @@ button.secondary:hover, .gr-button-secondary:hover {
 
 ::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
+    border-radius: 3px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.2);
 }
 
-/* Animations */
-@keyframes fadeInDown {
-    from { opacity: 0; transform: translateY(-12px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-.gradio-container > * {
-    animation: fadeIn 0.6s ease-out forwards;
-}
-
 /* Hide default Gradio footer */
 footer { display: none !important; }
 
-/* Links */
-a {
-    color: var(--accent-primary) !important;
-    text-decoration: none !important;
-    transition: color 0.2s ease;
-}
-
-a:hover {
-    color: var(--accent-secondary) !important;
-}
-
 /* Markdown inside chat */
 .message .prose h1, .message .prose h2, .message .prose h3 {
-    color: var(--text-primary) !important;
+    color: var(--chrome-light) !important;
     margin-top: 1em !important;
 }
 
@@ -538,32 +523,34 @@ a:hover {
 }
 
 .message .prose code {
-    background: rgba(0, 0, 0, 0.3) !important;
+    background: rgba(0, 0, 0, 0.5) !important;
     padding: 2px 6px !important;
     border-radius: 6px !important;
     font-size: 0.85em !important;
-    color: var(--accent-primary) !important;
+    color: var(--chrome-mid) !important;
     border: 1px solid rgba(255, 255, 255, 0.05) !important;
 }
 
 .message .prose pre {
-    background: rgba(0, 0, 0, 0.4) !important;
-    border: 1px solid var(--glass-border) !important;
+    background: rgba(0, 0, 0, 0.6) !important;
+    border: 1px solid rgba(255, 255, 255, 0.05) !important;
     border-radius: 12px !important;
     padding: 16px !important;
+    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
 }
 """
 
 THEME = gr.themes.Base(
-    primary_hue="sky",
-    secondary_hue="indigo",
-    neutral_hue="slate",
+    primary_hue="slate",
+    secondary_hue="zinc",
+    neutral_hue="zinc",
     font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
 ).set(
-    body_background_fill="#090b10",
-    block_background_fill="rgba(22, 27, 45, 0.65)",
+    body_background_fill="#050507",
+    block_background_fill="rgba(12, 12, 15, 0.65)",
     border_color_primary="rgba(255, 255, 255, 0.06)",
     shadow_spread="0",
+    shadow_color="rgba(0,0,0,0.5)",
 )
 
 # ============================================================
@@ -571,7 +558,6 @@ THEME = gr.themes.Base(
 # ============================================================
 
 def build_demo() -> gr.Blocks:
-    # Pass css and theme directly to Blocks for proper rendering
     with gr.Blocks(title=MODEL_NAME, css=CUSTOM_CSS, theme=THEME) as demo:
         gr.HTML(f"""
         <div id="veylon-header">