Declutter interface for ultra-minimalist and mobile-friendly StepFun Studio design

static/app.js

@@ -23,11 +23,11 @@ const dom = {
     temperatureSlider: document.getElementById("temperature-slider"),
     temperatureVal: document.getElementById("temperature-val"),
     
-    // Sidebar drawers
-    sidebarLeft: document.getElementById("sidebar-left"),
+    // Sidebar Drawer and Overlay Elements (Mobile & Minimalist)
     sidebarRight: document.getElementById("sidebar-right"),
-    btnToggleLeft: document.getElementById("btn-toggle-left"),
+    sidebarOverlay: document.getElementById("sidebar-overlay"),
     btnToggleRight: document.getElementById("btn-toggle-right"),
+    btnCloseDrawer: document.getElementById("btn-close-drawer"),
     
     // Viewports
     studioDashboard: document.getElementById("studio-dashboard"),
@@ -48,17 +48,17 @@ const dom = {
     miniSendBtn: document.getElementById("mini-send-button"),
     miniSpinner: document.getElementById("mini-spinner"),
     
-    // Core file upload console
+    // Core file upload elements
     fileUploader: document.getElementById("file-uploader"),
     shelfList: document.getElementById("shelf-list"),
     dropZone: document.getElementById("drop-zone"),
     
-    // Resets
-    clearChatBtn: document.getElementById("clear-chat-button"),
+    // Action Resets
     menuNewChat: document.getElementById("menu-new-chat"),
+    clearChatBtn: document.getElementById("clear-chat-button"),
     
-    // Showcase cards
-    showcaseCards: document.querySelectorAll(".showcase-card")
+    // Showcase recipe chips
+    recipeChips: document.querySelectorAll(".recipe-chip")
 };
 
 // Markdown configuration
@@ -86,13 +86,10 @@ async function initializeApp() {
         appendSystemLog("Gradio Server connection is restricted.", true);
     }
 
-    // 3. Register Sidebar Toggles
-    dom.btnToggleLeft.addEventListener("click", () => {
-        dom.sidebarLeft.classList.toggle("collapsed");
-    });
-    dom.btnToggleRight.addEventListener("click", () => {
-        dom.sidebarRight.classList.toggle("collapsed");
-    });
+    // 3. Register Sidebar Drawer Slide Events (Drawer + Overlay)
+    dom.btnToggleRight.addEventListener("click", () => toggleSettingsDrawer(true));
+    dom.btnCloseDrawer.addEventListener("click", () => toggleSettingsDrawer(false));
+    dom.sidebarOverlay.addEventListener("click", () => toggleSettingsDrawer(false));
 
     // 4. Register Settings Listeners
     dom.apiKeyInput.addEventListener("input", (e) => {
@@ -121,7 +118,7 @@ async function initializeApp() {
         dom.temperatureVal.textContent = STATE.temperature.toFixed(1);
     });
 
-    // 5. Register File Upload Anchors
+    // 5. Register File Upload Actions
     dom.studioUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
     dom.miniUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
     dom.dropZone.addEventListener("click", () => dom.fileUploader.click());
@@ -167,13 +164,13 @@ async function initializeApp() {
     });
 
     // 7. Resets
-    dom.clearChatBtn.addEventListener("click", resetSandbox);
     dom.menuNewChat.addEventListener("click", resetSandbox);
+    dom.clearChatBtn.addEventListener("click", resetSandbox);
 
-    // 8. Recipe Recipes Console Setup
-    dom.showcaseCards.forEach(card => {
-        card.addEventListener("click", () => {
-            const recipeType = card.getAttribute("data-recipe");
+    // 8. Recipe Chips Console Setup
+    dom.recipeChips.forEach(chip => {
+        chip.addEventListener("click", () => {
+            const recipeType = chip.getAttribute("data-recipe");
             loadRecipe(recipeType);
         });
     });
@@ -187,6 +184,17 @@ async function initializeApp() {
     });
 }
 
+// Drawer Toggler Action
+function toggleSettingsDrawer(open) {
+    if (open) {
+        dom.sidebarRight.classList.remove("collapsed");
+        dom.sidebarOverlay.classList.add("active");
+    } else {
+        dom.sidebarRight.classList.add("collapsed");
+        dom.sidebarOverlay.classList.remove("active");
+    }
+}
+
 // Handle File Select & Base64 Encoder
 function handleFileSelection(e) {
     processFiles(e.target.files);
@@ -302,24 +310,6 @@ function loadRecipe(recipeType) {
             size: "0.02 MB",
             base64: mockImageBase64
         });
-    } else if (recipeType === "code") {
-        promptText = "Review this dashboard interface design. Generate beautiful, fully responsive HTML structure styling using elegant flex grids to match it.";
-        STATE.uploadedFiles.push({
-            id: "recipe-dashboard",
-            name: "dashboard_layout.png",
-            type: "image/png",
-            size: "0.02 MB",
-            base64: mockImageBase64
-        });
-    } else if (recipeType === "receipt") {
-        promptText = "Tabulate the items inside this receipt into a clean markdown table. Breakdown the tax and total, and perform a step-by-step reasoning calculation to check if the item sums match the total amount listed.";
-        STATE.uploadedFiles.push({
-            id: "recipe-receipt",
-            name: "grocery_bill.jpg",
-            type: "image/jpeg",
-            size: "0.02 MB",
-            base64: mockImageBase64
-        });
     } else if (recipeType === "diagnostic") {
         promptText = "This is a recorded visual sequence of steps leading to a runtime exception crash. Provide a detailed reconstruction of the event timeline, summarize the diagnostic signals, and suggest an engineering hotfix.";
         STATE.uploadedFiles.push({
@@ -331,7 +321,7 @@ function loadRecipe(recipeType) {
         });
     }
 
-    // Set value in BOTH text areas so that it works regardless of viewport state
+    // Set value in BOTH text areas
     dom.studioPromptInput.value = promptText;
     dom.miniPromptInput.value = promptText;
 
@@ -356,7 +346,8 @@ async function triggerPromptSubmission(inputElement) {
 
     // Check credentials
     if (!STATE.apiKey && !dom.apiKeyInput.placeholder.includes("server env")) {
-        appendSystemLog("StepFun API Key is required. Please set it in the Credentials settings card.", true);
+        appendSystemLog("StepFun API Key is required. Please set it in the settings card drawer.", true);
+        toggleSettingsDrawer(true);
         return;
     }
 
@@ -617,7 +608,6 @@ function resetSandbox() {
 }
 
 function appendSystemLog(message, isError = false) {
-    // If chat container is hidden, we display a standard javascript alert or log it
     if (dom.chatThreadContainer.style.display === "none") {
         console.warn(`System Log: ${message}`);
         return;

static/index.html

@@ -3,11 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>StepFun Studio - Multimodal Playground</title>
+    <title>StepFun Studio</title>
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
     <!-- Highlight.js for Code Highlighting -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
@@ -19,76 +19,43 @@
 <body>
     <div class="app-container">
         
-        <!-- Left Sidebar: Menu Navigation -->
-        <aside class="sidebar-left" id="sidebar-left">
-            <div class="sidebar-brand">
-                <div class="brand-logo">
-                    <svg viewBox="0 0 100 100" width="28" height="28" fill="currentColor">
+        <!-- Main Workspace (Full width, no left sidebar) -->
+        <main class="main-workspace">
+            <!-- Top Navigation Bar -->
+            <header class="workspace-header">
+                <div class="header-brand">
+                    <svg viewBox="0 0 100 100" width="24" height="24" fill="currentColor">
                         <circle cx="50" cy="50" r="46" fill="#111827"/>
                         <path d="M35 30 C35 30, 48 40, 48 55 C48 70, 35 70, 35 70" stroke="#ffffff" stroke-width="8" stroke-linecap="round" fill="none"/>
                         <circle cx="62" cy="50" r="7" fill="#ffffff"/>
                     </svg>
-                    <span class="brand-name">StepFun</span>
+                    <span class="brand-name">StepFun Studio</span>
                 </div>
-            </div>
-            
-            <nav class="sidebar-menu">
-                <a href="#" class="menu-item active" id="menu-new-chat">
-                    <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4z"></path></svg>
-                    <span>New Chat</span>
-                </a>
-                <a href="#" class="menu-item">
-                    <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    <span>search</span>
-                </a>
-                <a href="#" class="menu-item">
-                    <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"></rect><rect x="14" y="3" width="7" height="5"></rect><rect x="14" y="12" width="7" height="9"></rect><rect x="3" y="16" width="7" height="5"></rect></svg>
-                    <span>Showcase Library</span>
-                </a>
-                <a href="#" class="menu-item">
-                    <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
-                    <span>My Assets</span>
-                </a>
-                <a href="#" class="menu-item">
-                    <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
-                    <span>Playground</span>
-                </a>
-                <div class="menu-separator"></div>
-                <a href="#" class="menu-item">
-                    <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
-                    <span>More</span>
-                </a>
-            </nav>
-        </aside>
-
-        <!-- Main Content Area -->
-        <main class="main-workspace">
-            <!-- Top Navigation Bar -->
-            <header class="workspace-header">
-                <button class="icon-toggle-btn" id="btn-toggle-left" title="Toggle Navigation Sidebar">
-                    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
-                </button>
-                <div class="header-model-title">
-                    <span class="studio-badge">Studio</span>
-                    <span class="model-name">step-3.7-flash</span>
+                
+                <div class="header-actions">
+                    <button class="header-btn" id="menu-new-chat" title="New Chat">
+                        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4z"></path></svg>
+                        <span>New Chat</span>
+                    </button>
+                    <button class="header-btn" id="btn-toggle-right" title="Settings">
+                        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                        <span>Settings</span>
+                    </button>
                 </div>
-                <button class="icon-toggle-btn" id="btn-toggle-right" title="Toggle Settings Sidebar">
-                    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>
-                </button>
             </header>
 
-            <!-- Interactive Workspace Content -->
+            <!-- Workspace Viewport -->
             <div class="workspace-viewport">
                 
-                <!-- 1. EMPTY CHAT / STUDIO DASHBOARD (Matches Screenshot) -->
+                <!-- 1. EMPTY CHAT / STUDIO DASHBOARD -->
                 <div class="studio-dashboard" id="studio-dashboard">
                     <h2 class="welcome-heading">Hello, welcome to Studio</h2>
                     
-                    <!-- Central Search/Input Console -->
+                    <!-- Central Console Box -->
                     <div class="console-box">
-                        <textarea id="studio-prompt-input" placeholder="Describe the task you want to verify, or start with the showcase below..."></textarea>
+                        <textarea id="studio-prompt-input" rows="2" placeholder="Describe the task you want to verify, or start with the showcase below..."></textarea>
                         
-                        <!-- Upload preview shelf internally -->
+                        <!-- Upload preview shelf inside console -->
                         <div class="inner-shelf-preview" id="inner-shelf-preview"></div>
 
                         <div class="console-action-row">
@@ -97,70 +64,40 @@
                             </button>
                             
                             <button class="circle-btn-send" id="studio-send-button" title="Send Task">
-                                <svg viewBox="0 0 24 24" width="16" height="16" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
+                                <svg viewBox="0 0 24 24" width="14" height="14" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
                                 <div class="spinner-light" id="studio-spinner" style="display: none;"></div>
                             </button>
                         </div>
                     </div>
 
-                    <!-- Showcase Section -->
+                    <!-- Showcase Section (Decluttered: only 2 compact chips) -->
                     <div class="showcase-section">
-                        <div class="showcase-header">
-                            <h3>Showcase</h3>
-                            <a href="#" class="view-all-link">View all <span>&rsaquo;</span></a>
-                        </div>
-                        
-                        <div class="showcase-cards-grid">
-                            <div class="showcase-card" data-recipe="whiteboard">
-                                <div class="card-icon-container">
-                                    <svg viewBox="0 0 24 24" width="16" height="16" stroke="#3b82f6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                                </div>
-                                <h4 class="card-title">Global AI Funding Quarterly Report - Series A Radar</h4>
-                                <p class="card-desc">Create a single-page HTML real-time dashboard for "Global AI Funding Series A".</p>
-                                <button class="card-action-btn">Try it</button>
-                            </div>
-                            
-                            <div class="showcase-card" data-recipe="code">
-                                <div class="card-icon-container">
-                                    <svg viewBox="0 0 24 24" width="16" height="16" stroke="#3b82f6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                                </div>
-                                <h4 class="card-title">China's New Energy Vehicle Q1 Sales Report</h4>
-                                <p class="card-desc">Create a one-page HTML report titled "In-depth Observation of China's New Energy..."</p>
-                                <button class="card-action-btn">Try it</button>
-                            </div>
-                            
-                            <div class="showcase-card" data-recipe="receipt">
-                                <div class="card-icon-container">
-                                    <svg viewBox="0 0 24 24" width="16" height="16" stroke="#3b82f6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                                </div>
-                                <h4 class="card-title">ALS Family Handbook: Living with Time</h4>
-                                <p class="card-desc">Create a fictional patient education platform called "Mingyan Doctors and Patients..."</p>
-                                <button class="card-action-btn">Try it</button>
+                        <h3 class="showcase-title">Try these tasks</h3>
+                        <div class="showcase-chips-row">
+                            <div class="recipe-chip" data-recipe="whiteboard">
+                                <span class="chip-icon">🖼️</span>
+                                <span class="chip-text">Analyze Whiteboard Gantt</span>
                             </div>
-                            
-                            <div class="showcase-card" data-recipe="diagnostic">
-                                <div class="card-icon-container">
-                                    <svg viewBox="0 0 24 24" width="16" height="16" stroke="#3b82f6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
-                                </div>
-                                <h4 class="card-title">In-depth analysis of NVIDIA's Q1 financial report</h4>
-                                <p class="card-desc">In-depth analysis of NVIDIA's Q1 FY2026 financial report: core financial metrics table...</p>
-                                <button class="card-action-btn">Try it</button>
+                            <div class="recipe-chip" data-recipe="diagnostic">
+                                <span class="chip-icon">🎬</span>
+                                <span class="chip-text">Diagnose Video Logs</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <!-- 2. ACTIVE CHAT THREAD (Hidden initially) -->
+                <!-- 2. ACTIVE CHAT THREAD -->
                 <div class="chat-thread-container" id="chat-thread-container" style="display: none;">
                     <div class="chat-messages-feed" id="chat-messages-feed">
                         <!-- Message bubbles populate dynamically -->
                     </div>
                     
-                    <!-- Bottom fixed mini-input panel -->
+                    <!-- Bottom Reply bar -->
                     <div class="chat-mini-footer">
                         <div class="console-box mini">
                             <textarea id="mini-prompt-input" rows="1" placeholder="Reply or ask anything..."></textarea>
                             <div class="mini-shelf-preview" id="mini-shelf-preview"></div>
+                            
                             <div class="console-action-row">
                                 <button class="circle-btn-action" id="mini-upload-trigger" title="Attach Media File">
                                     <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
@@ -177,39 +114,38 @@
             </div>
         </main>
 
-        <!-- Right Sidebar: Configuration Cards & Multimodal Shelf (Matches right blocks) -->
-        <aside class="sidebar-right" id="sidebar-right">
+        <!-- Sidebar Overlay backdrop for mobile -->
+        <div class="sidebar-overlay" id="sidebar-overlay"></div>
+
+        <!-- Right Settings Drawer (Collapsed by default, slides on top of main area) -->
+        <aside class="sidebar-right collapsed" id="sidebar-right">
             <input type="file" id="file-uploader" accept="image/*,video/*" multiple style="display: none;">
             
             <div class="right-sidebar-header">
-                <h3>Workspace Settings</h3>
-                <button id="clear-chat-button" class="btn-clear-chat" title="Clear Context Logs">
-                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
-                    <span>Reset Chat</span>
+                <h3>Settings</h3>
+                <button class="circle-btn-action close-drawer" id="btn-close-drawer">
+                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                 </button>
             </div>
 
             <div class="sidebar-right-content">
-                
-                <!-- Credentials Card -->
+                <!-- Credentials -->
                 <div class="right-block-card">
                     <div class="card-block-header">
                         <span class="block-title">Credentials</span>
-                        <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="block-icon"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                     </div>
                     <div class="password-wrapper">
-                        <input type="password" id="api-key-input" placeholder="Enter key or uses server env..." autocomplete="off">
+                        <input type="password" id="api-key-input" placeholder="Enter key or use server env..." autocomplete="off">
                         <button type="button" id="toggle-key-visibility" class="visibility-toggle" title="Show/Hide">
                             <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                         </button>
                     </div>
                 </div>
 
-                <!-- Parameters Card -->
+                <!-- Reasoning mode -->
                 <div class="right-block-card">
                     <div class="card-block-header">
                         <span class="block-title">Reasoning Mode</span>
-                        <div class="recommend-tag">recommend</div>
                     </div>
                     <div class="effort-picker">
                         <label class="effort-pill">
@@ -225,37 +161,12 @@
                             <span>High</span>
                         </label>
                     </div>
-                    <span class="block-tip">Controls the computational budget for Step 3.7 Flash's thought processes.</span>
-                </div>
-
-                <!-- Generation Limits Card -->
-                <div class="right-block-card">
-                    <div class="card-block-header">
-                        <span class="block-title">Generation Limits</span>
-                        <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="block-icon"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
-                    </div>
-                    <div class="slider-row">
-                        <label for="max-tokens-slider">Max Output Tokens</label>
-                        <span class="slider-val" id="max-tokens-val">2048</span>
-                    </div>
-                    <input type="range" id="max-tokens-slider" min="256" max="8192" step="256" value="2048">
-
-                    <div class="slider-row" style="margin-top: 14px;">
-                        <label for="temperature-slider">Temperature</label>
-                        <span class="slider-val" id="temperature-val">0.7</span>
-                    </div>
-                    <input type="range" id="temperature-slider" min="0.0" max="1.5" step="0.1" value="0.7">
                 </div>
 
-                <!-- Active Shelf uploads Card -->
+                <!-- Upload Shelf -->
                 <div class="right-block-card flex-1-card">
                     <div class="card-block-header">
-                        <span class="block-title">Multimodal Shelf</span>
-                        <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="block-icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
-                    </div>
-                    <div class="drag-upload-zone" id="drop-zone">
-                        <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
-                        <p>Drag files or <span>browse</span></p>
+                        <span class="block-title">Attached Media</span>
                     </div>
                     <div class="shelf-list" id="shelf-list">
                         <div class="empty-shelf-text">No active attachments loaded. Upload images or video clips.</div>
@@ -266,14 +177,14 @@
             <div class="right-sidebar-footer">
                 <div class="status-indicator-group">
                     <span class="status-dot online"></span>
-                    <span>Server Queued</span>
+                    <span>Step 3.7 Flash Connected</span>
                 </div>
             </div>
         </aside>
 
     </div>
 
-    <!-- Gradio Client JS library connection -->
+    <!-- Gradio Client JS connection -->
     <script type="module" src="/static/app.js"></script>
 </body>
 </html>

static/style.css

@@ -1,25 +1,22 @@
-/* StepFun Studio Premium Light Theme Design System */
+/* StepFun Studio Ultra-Minimalist & Mobile-Friendly Style Sheet */
 :root {
     --bg-primary: #f8f9fa;
     --bg-workspace: #f8f9fa;
     --bg-card: #ffffff;
     --bg-sidebar: #ffffff;
-    --bg-input: #ffffff;
     
     --border-color: #e5e7eb;
     --border-light: #f1f2f4;
     --border-focus: #111827;
     
-    --accent-blue: #3b82f6;
+    --accent-blue: #2563eb;
     --accent-blue-bg: #eff6ff;
     
     --text-primary: #111827;
     --text-secondary: #4b5563;
     --text-muted: #9ca3af;
-    --danger: #f43f5e;
+    --danger: #ef4444;
     
-    --btn-dark-bg: #111827;
-    --btn-dark-hover: #1f2937;
     --btn-light-bg: #f3f4f6;
     --btn-light-hover: #e5e7eb;
     
@@ -27,18 +24,18 @@
     --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --font-mono: 'Fira Code', monospace;
     
-    --transition-smooth: all 0.2s ease-in-out;
+    --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     --border-radius-sm: 8px;
     --border-radius-md: 12px;
     --border-radius-lg: 16px;
     --border-radius-pill: 100px;
     
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
-    --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
+    --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
 }
 
-/* Reset & Global Styling */
+/* Reset Rules */
 * {
     margin: 0;
     padding: 0;
@@ -57,10 +54,10 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
-/* Scrollbar customization */
+/* Custom Scrollbars */
 ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+    width: 4px;
+    height: 4px;
 }
 
 ::-webkit-scrollbar-track {
@@ -76,7 +73,7 @@ body {
     background: #cbd5e1;
 }
 
-/* Flex Container Layout */
+/* Parent container */
 .app-container {
     display: flex;
     height: 100vh;
@@ -85,30 +82,31 @@ body {
     position: relative;
 }
 
-/* Left Sidebar Menu (Matches screenshot left list) */
-.sidebar-left {
-    width: 240px;
-    background-color: var(--bg-sidebar);
-    border-right: 1px solid var(--border-color);
+/* Main Workspace taking 100vw */
+.main-workspace {
+    flex: 1;
     display: flex;
     flex-direction: column;
     height: 100%;
-    flex-shrink: 0;
-    transition: var(--transition-smooth);
-    z-index: 100;
-}
-
-.sidebar-left.collapsed {
-    width: 0;
+    background-color: var(--bg-workspace);
     overflow: hidden;
-    border-right: none;
+    position: relative;
+    width: 100%;
 }
 
-.sidebar-brand {
-    padding: 24px 20px;
+/* Clean Header Bar */
+.workspace-header {
+    height: 56px;
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--bg-card);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    z-index: 10;
 }
 
-.brand-logo {
+.header-brand {
     display: flex;
     align-items: center;
     gap: 10px;
@@ -116,114 +114,44 @@ body {
 
 .brand-name {
     font-family: var(--font-heading);
-    font-size: 18px;
+    font-size: 15px;
     font-weight: 700;
     letter-spacing: -0.3px;
     color: var(--text-primary);
 }
 
-.sidebar-menu {
-    flex: 1;
+.header-actions {
     display: flex;
-    flex-direction: column;
-    padding: 10px 12px;
-    gap: 4px;
+    gap: 8px;
 }
 
-.menu-item {
+/* Simplified Header Buttons */
+.header-btn {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 10px 14px;
+    gap: 6px;
+    background-color: transparent;
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     color: var(--text-secondary);
-    text-decoration: none;
+    padding: 6px 12px;
+    font-size: 12.5px;
     font-weight: 500;
-    font-size: 13.5px;
-    transition: var(--transition-smooth);
-}
-
-.menu-item:hover {
-    background-color: var(--btn-light-bg);
-    color: var(--text-primary);
-}
-
-.menu-item.active {
-    background-color: var(--btn-light-bg);
-    color: var(--text-primary);
-    font-weight: 600;
-}
-
-.menu-separator {
-    height: 1px;
-    background-color: var(--border-light);
-    margin: 8px 14px;
-}
-
-/* Main content workspace */
-.main-workspace {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: var(--bg-workspace);
-    overflow: hidden;
-    position: relative;
-}
-
-/* Header bar */
-.workspace-header {
-    height: 56px;
-    border-bottom: 1px solid var(--border-color);
-    background-color: var(--bg-sidebar);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 16px;
-    z-index: 10;
-}
-
-.icon-toggle-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-secondary);
     cursor: pointer;
-    padding: 6px;
-    border-radius: var(--border-radius-sm);
-    display: flex;
-    align-items: center;
-    justify-content: center;
     transition: var(--transition-smooth);
+    outline: none;
 }
 
-.icon-toggle-btn:hover {
+.header-btn:hover {
     background-color: var(--btn-light-bg);
     color: var(--text-primary);
 }
 
-.header-model-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.studio-badge {
-    background-color: #f3f4f6;
-    color: #4b5563;
-    font-size: 11px;
-    font-weight: 600;
-    padding: 1px 6px;
-    border-radius: 4px;
-    font-family: var(--font-heading);
-}
-
-.model-name {
-    font-size: 13px;
-    font-family: var(--font-mono);
-    color: var(--text-secondary);
+.header-btn svg {
+    flex-shrink: 0;
 }
 
-/* Viewport structure */
+/* Viewport Layout */
 .workspace-viewport {
     flex: 1;
     overflow-y: auto;
@@ -231,12 +159,12 @@ body {
     flex-direction: column;
 }
 
-/* 1. Studio Dashboard Styling (Matches Screenshot perfectly) */
+/* Studio Dashboard (Empty state) */
 .studio-dashboard {
-    max-width: 800px;
+    max-width: 640px;
     width: 100%;
-    margin: 0 auto;
-    padding: 60px 24px;
+    margin: auto;
+    padding: 40px 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -244,31 +172,32 @@ body {
 
 .welcome-heading {
     font-family: var(--font-heading);
-    font-size: 32px;
+    font-size: 26px;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 30px;
-    letter-spacing: -0.5px;
+    margin-bottom: 24px;
+    letter-spacing: -0.4px;
     text-align: center;
 }
 
-/* Central Search/Prompt Console Box */
+/* Console Container Box */
 .console-box {
     width: 100%;
     background-color: var(--bg-card);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-lg);
-    box-shadow: var(--shadow-lg);
-    padding: 16px 20px;
+    box-shadow: var(--shadow-md);
+    padding: 12px 16px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
     transition: var(--transition-smooth);
-    margin-bottom: 48px;
+    margin-bottom: 36px;
 }
 
 .console-box:focus-within {
     border-color: var(--border-focus);
+    box-shadow: var(--shadow-lg);
 }
 
 .console-box textarea {
@@ -277,10 +206,10 @@ body {
     outline: none;
     resize: none;
     font-family: var(--font-body);
-    font-size: 15px;
+    font-size: 14.5px;
     color: var(--text-primary);
     background: transparent;
-    line-height: 1.5;
+    line-height: 1.45;
     min-height: 50px;
 }
 
@@ -288,28 +217,27 @@ body {
     color: var(--text-muted);
 }
 
-/* Inside console drawer for attachments */
+/* Inner preview shelf inside console drawer */
 .inner-shelf-preview,
 .mini-shelf-preview {
     display: flex;
     flex-wrap: wrap;
-    gap: 8px;
-    padding-bottom: 4px;
+    gap: 6px;
+    padding-bottom: 2px;
 }
 
-/* Console Footer Row containing circle buttons */
 .console-action-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid var(--border-light);
-    padding-top: 12px;
+    padding-top: 10px;
 }
 
-/* Action button (e.g. + Circle) */
+/* Action button circle */
 .circle-btn-action {
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     border-radius: 50%;
     border: 1px solid var(--border-color);
     background: transparent;
@@ -319,18 +247,18 @@ body {
     align-items: center;
     justify-content: center;
     transition: var(--transition-smooth);
+    outline: none;
 }
 
 .circle-btn-action:hover {
     background-color: var(--btn-light-bg);
     color: var(--text-primary);
-    border-color: var(--btn-light-hover);
 }
 
-/* Send button (e.g. Up-Arrow inside dark circle) */
+/* Send button dark circle */
 .circle-btn-send {
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     border-radius: 50%;
     border: none;
     background-color: #1f2937;
@@ -340,120 +268,65 @@ body {
     align-items: center;
     justify-content: center;
     transition: var(--transition-smooth);
+    outline: none;
 }
 
 .circle-btn-send:hover {
     background-color: #111827;
-    transform: scale(1.05);
-}
-
-.circle-btn-send:active {
-    transform: scale(0.95);
 }
 
-/* Showcase Grid Layout (Matches Screenshot grid) */
+/* Ultra-minimal Showcase chips (Decluttered) */
 .showcase-section {
     width: 100%;
 }
 
-.showcase-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-}
-
-.showcase-header h3 {
-    font-family: var(--font-heading);
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-.view-all-link {
-    font-size: 12px;
+.showcase-title {
+    font-size: 12.5px;
     color: var(--text-secondary);
-    text-decoration: none;
+    margin-bottom: 12px;
+    text-align: center;
     font-weight: 500;
 }
 
-.view-all-link:hover {
-    color: var(--text-primary);
-}
-
-.showcase-cards-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 16px;
-    width: 100%;
-}
-
-/* Showcase Card item (StepFun mockup style) */
-.showcase-card {
-    background-color: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-md);
-    padding: 20px;
+.showcase-chips-row {
     display: flex;
-    flex-direction: column;
-    transition: var(--transition-smooth);
-    position: relative;
-    cursor: pointer;
-}
-
-.showcase-card:hover {
-    box-shadow: var(--shadow-lg);
-    border-color: #d1d5db;
+    gap: 10px;
+    justify-content: center;
+    flex-wrap: wrap;
 }
 
-.card-icon-container {
-    width: 32px;
-    height: 32px;
-    border-radius: var(--border-radius-sm);
-    background-color: var(--accent-blue-bg);
+.recipe-chip {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-bottom: 14px;
+    gap: 8px;
+    padding: 8px 16px;
+    border-radius: var(--border-radius-pill);
+    background-color: var(--bg-card);
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: var(--transition-smooth);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    box-shadow: var(--shadow-sm);
 }
 
-.card-title {
-    font-family: var(--font-heading);
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 1.4;
+.recipe-chip:hover {
+    background-color: var(--btn-light-bg);
+    border-color: #cbd5e1;
     color: var(--text-primary);
-    margin-bottom: 6px;
-}
-
-.card-desc {
-    font-size: 11.5px;
-    color: var(--text-secondary);
-    line-height: 1.4;
-    margin-bottom: 20px;
-    flex: 1;
+    transform: translateY(-1px);
 }
 
-/* Black pill button on bottom left */
-.card-action-btn {
-    align-self: flex-start;
-    background-color: var(--btn-dark-bg);
-    color: #ffffff;
-    border: none;
-    padding: 6px 16px;
-    border-radius: var(--border-radius-pill);
-    font-size: 11px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: var(--transition-smooth);
+.recipe-chip:active {
+    transform: translateY(0);
 }
 
-.card-action-btn:hover {
-    background-color: var(--btn-dark-hover);
-    transform: translateY(-1px);
+.chip-icon {
+    font-size: 14px;
 }
 
-/* 2. Active Chat thread view styling */
+/* Chat thread viewport */
 .chat-thread-container {
     flex: 1;
     display: flex;
@@ -465,22 +338,22 @@ body {
 .chat-messages-feed {
     flex: 1;
     overflow-y: auto;
-    padding: 30px;
+    padding: 24px;
     display: flex;
     flex-direction: column;
-    gap: 28px;
-    max-width: 800px;
+    gap: 24px;
+    max-width: 680px;
     width: 100%;
     margin: 0 auto;
 }
 
-/* Chat bubble aesthetics */
+/* Message bubbles */
 .message-bubble {
     display: flex;
     flex-direction: column;
-    gap: 6px;
-    max-width: 85%;
-    animation: slideUp 0.3s ease-out;
+    gap: 4px;
+    max-width: 90%;
+    animation: slideUp 0.25s ease-out;
 }
 
 .message-bubble.user {
@@ -490,10 +363,11 @@ body {
 .message-bubble.assistant {
     align-self: flex-start;
     width: 100%;
+    max-width: 100%;
 }
 
 .message-meta {
-    font-size: 11px;
+    font-size: 10px;
     color: var(--text-muted);
     font-weight: 600;
     margin: 0 4px;
@@ -504,10 +378,10 @@ body {
 }
 
 .message-body {
-    padding: 14px 18px;
+    padding: 10px 14px;
     border-radius: var(--border-radius-md);
-    font-size: 14.5px;
-    line-height: 1.6;
+    font-size: 13.5px;
+    line-height: 1.5;
     box-shadow: var(--shadow-sm);
 }
 
@@ -525,13 +399,13 @@ body {
     border-bottom-left-radius: 4px;
 }
 
-/* Thumbnail Attachments inside bubbles */
+/* Bubble attachments grid */
 .bubble-attachments {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 8px;
-    margin-top: 10px;
-    max-width: 400px;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 6px;
+    margin-top: 8px;
+    max-width: 320px;
 }
 
 .bubble-attachment-card {
@@ -559,32 +433,31 @@ body {
     color: #fff;
     font-size: 8px;
     text-align: center;
-    padding: 2px;
+    padding: 1px;
     font-family: var(--font-mono);
 }
 
-/* Collagen Thoughts Box for reasoning steps */
+/* Collapsible Thoughts nodes */
 .thought-container {
-    margin-bottom: 14px;
+    margin-bottom: 12px;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     overflow: hidden;
-    background-color: #fafbfc;
 }
 
 .thought-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 12px;
-    background-color: #f3f4f6;
+    padding: 6px 10px;
+    background-color: #f9fafb;
     cursor: pointer;
     user-select: none;
     transition: var(--transition-smooth);
 }
 
 .thought-header:hover {
-    background-color: #e5e7eb;
+    background-color: #f3f4f6;
 }
 
 .thought-title-group {
@@ -592,19 +465,19 @@ body {
     align-items: center;
     gap: 6px;
     font-family: var(--font-heading);
-    font-size: 11.5px;
+    font-size: 11px;
     font-weight: 600;
     color: var(--text-secondary);
 }
 
 .thought-timer {
     font-family: var(--font-mono);
-    font-size: 10px;
+    font-size: 9.5px;
     color: var(--text-muted);
 }
 
 .thought-toggle-icon {
-    font-size: 10px;
+    font-size: 9px;
     color: var(--text-secondary);
     transition: transform 0.2s ease;
 }
@@ -614,14 +487,14 @@ body {
 }
 
 .thought-content {
-    padding: 12px 14px;
+    padding: 10px 12px;
     font-family: var(--font-mono);
-    font-size: 12px;
+    font-size: 11.5px;
     color: var(--text-secondary);
     background-color: #ffffff;
     border-top: 1px solid var(--border-color);
     white-space: pre-wrap;
-    max-height: 200px;
+    max-height: 150px;
     overflow-y: auto;
 }
 
@@ -629,22 +502,22 @@ body {
     display: none;
 }
 
-/* Markdown tags within chat response body */
+/* Markdown typography rendering inside bubbles */
 .markdown-body h1,
 .markdown-body h2,
 .markdown-body h3 {
-    margin-top: 14px;
-    margin-bottom: 6px;
+    margin-top: 12px;
+    margin-bottom: 4px;
     font-family: var(--font-heading);
     font-weight: 600;
 }
 
-.markdown-body h1 { font-size: 16px; border-bottom: 1px solid var(--border-light); padding-bottom: 2px; }
-.markdown-body h2 { font-size: 14.5px; }
-.markdown-body h3 { font-size: 13px; }
+.markdown-body h1 { font-size: 14.5px; border-bottom: 1px solid var(--border-light); padding-bottom: 2px; }
+.markdown-body h2 { font-size: 13.5px; }
+.markdown-body h3 { font-size: 12.5px; }
 
 .markdown-body p {
-    margin-bottom: 8px;
+    margin-bottom: 6px;
 }
 
 .markdown-body p:last-child {
@@ -653,15 +526,15 @@ body {
 
 .markdown-body code {
     font-family: var(--font-mono);
-    font-size: 11.5px;
+    font-size: 11px;
     background-color: var(--btn-light-bg);
-    padding: 2px 5px;
+    padding: 2px 4px;
     border-radius: 4px;
     color: var(--accent-blue);
 }
 
 .markdown-body pre {
-    margin: 12px 0;
+    margin: 10px 0;
     border-radius: var(--border-radius-sm);
     overflow: hidden;
     border: 1px solid var(--border-color);
@@ -669,7 +542,7 @@ body {
 
 .markdown-body pre code {
     display: block;
-    padding: 12px;
+    padding: 10px;
     overflow-x: auto;
     background-color: #0f172a !important;
     color: #e2e8f0;
@@ -678,14 +551,14 @@ body {
 .markdown-body table {
     width: 100%;
     border-collapse: collapse;
-    margin: 12px 0;
-    font-size: 12.5px;
+    margin: 10px 0;
+    font-size: 12px;
 }
 
 .markdown-body th,
 .markdown-body td {
     border: 1px solid var(--border-color);
-    padding: 6px 10px;
+    padding: 6px 8px;
     text-align: left;
 }
 
@@ -694,42 +567,65 @@ body {
     font-weight: 600;
 }
 
-/* Chat Bottom Mini Input bar */
+/* Reply footer box */
 .chat-mini-footer {
-    padding: 16px 24px;
+    padding: 12px 20px;
     background-color: var(--bg-workspace);
     border-top: 1px solid var(--border-color);
 }
 
 .chat-mini-footer .console-box {
-    max-width: 800px;
+    max-width: 680px;
     margin: 0 auto;
-    box-shadow: var(--shadow-md);
-    padding: 10px 16px;
+    box-shadow: var(--shadow-sm);
+    padding: 8px 12px;
     border-radius: var(--border-radius-md);
+    margin-bottom: 0;
+}
+
+/* Backdrop Overlay for mobile Settings slide */
+.sidebar-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.2);
+    backdrop-filter: blur(1.5px);
+    z-index: 990;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
 }
 
-/* Right Sidebar: Settings (Matches Right Mockup blocks) */
+.sidebar-overlay.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+/* Collapsible Right settings Drawer */
 .sidebar-right {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
     width: 320px;
     background-color: var(--bg-sidebar);
     border-left: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
-    height: 100%;
-    flex-shrink: 0;
-    transition: var(--transition-smooth);
-    z-index: 100;
+    z-index: 1000;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.03);
+    transform: translateX(0);
 }
 
 .sidebar-right.collapsed {
-    width: 0;
-    overflow: hidden;
-    border-left: none;
+    transform: translateX(100%);
 }
 
 .right-sidebar-header {
-    padding: 16px 20px;
+    padding: 14px 20px;
     border-bottom: 1px solid var(--border-color);
     display: flex;
     justify-content: space-between;
@@ -738,54 +634,41 @@ body {
 
 .right-sidebar-header h3 {
     font-family: var(--font-heading);
-    font-size: 14px;
+    font-size: 13.5px;
     font-weight: 600;
     color: var(--text-primary);
 }
 
-.btn-clear-chat {
-    background: transparent;
-    border: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    padding: 5px 10px;
-    border-radius: var(--border-radius-sm);
-    font-size: 11px;
-    font-weight: 500;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    transition: var(--transition-smooth);
+.close-drawer {
+    border-color: transparent !important;
 }
 
-.btn-clear-chat:hover {
-    background-color: var(--btn-light-bg);
-    color: var(--text-primary);
+.close-drawer:hover {
+    background-color: var(--btn-light-bg) !important;
 }
 
 .sidebar-right-content {
     flex: 1;
     overflow-y: auto;
-    padding: 20px;
+    padding: 16px;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 14px;
 }
 
-/* Card Block Design (Right cards in screenshot) */
 .right-block-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-md);
-    padding: 16px;
+    padding: 14px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 10px;
 }
 
 .flex-1-card {
     flex: 1;
-    min-height: 200px;
+    min-height: 180px;
 }
 
 .card-block-header {
@@ -796,42 +679,20 @@ body {
 
 .block-title {
     font-family: var(--font-heading);
-    font-size: 12.5px;
-    font-weight: 700;
+    font-size: 12px;
+    font-weight: 600;
     color: var(--text-primary);
 }
 
-.block-icon {
-    color: var(--text-muted);
-}
-
-.block-tip {
-    font-size: 10.5px;
-    color: var(--text-secondary);
-    line-height: 1.3;
-}
-
-/* Small recommend Pill tag */
-.recommend-tag {
-    font-size: 9px;
-    font-weight: 700;
-    text-transform: uppercase;
-    background-color: #f3f4f6;
-    color: #4b5563;
-    padding: 1px 6px;
-    border-radius: 4px;
-    border: 1px solid #e5e7eb;
-}
-
-/* Settings Inputs inside cards */
+/* Password Toggle and Credentials field */
 input[type="password"] {
     width: 100%;
-    background-color: #fafafa;
+    background-color: #f9fafb;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     color: var(--text-primary);
-    padding: 8px 12px;
-    font-size: 12.5px;
+    padding: 7px 10px;
+    font-size: 12px;
     font-family: var(--font-body);
     transition: var(--transition-smooth);
 }
@@ -849,18 +710,17 @@ input[type="password"]:focus {
 }
 
 .password-wrapper input {
-    padding-right: 36px;
+    padding-right: 32px;
 }
 
 .visibility-toggle {
     position: absolute;
-    right: 8px;
+    right: 6px;
     background: transparent;
     border: none;
     color: var(--text-muted);
     cursor: pointer;
     padding: 4px;
-    border-radius: 4px;
     display: flex;
     align-items: center;
 }
@@ -869,12 +729,12 @@ input[type="password"]:focus {
     color: var(--text-primary);
 }
 
-/* Choice Picker Pills */
+/* Effort Radio Buttons Pills */
 .effort-picker {
     display: flex;
-    background-color: #fafafa;
+    background-color: #f9fafb;
     border: 1px solid var(--border-color);
-    padding: 3px;
+    padding: 2.5px;
     border-radius: var(--border-radius-sm);
     gap: 2px;
 }
@@ -895,8 +755,8 @@ input[type="password"]:focus {
 
 .effort-pill span {
     display: block;
-    padding: 6px 0;
-    font-size: 11.5px;
+    padding: 5px 0;
+    font-size: 11px;
     font-weight: 500;
     border-radius: 4px;
     color: var(--text-secondary);
@@ -911,108 +771,39 @@ input[type="password"]:focus {
 
 .effort-pill:hover span:not(input:checked + span) {
     color: var(--text-primary);
-    background-color: rgba(0,0,0,0.03);
-}
-
-/* Slider Controls */
-.slider-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 11.5px;
-    font-weight: 500;
-}
-
-.slider-val {
-    font-family: var(--font-mono);
-    color: var(--accent-blue);
-    font-size: 11px;
-}
-
-input[type="range"] {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 3px;
-    background: #e5e7eb;
-    border-radius: 2px;
-    outline: none;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: #111827;
-    cursor: pointer;
-    transition: var(--transition-smooth);
-}
-
-input[type="range"]::-webkit-slider-thumb:hover {
-    transform: scale(1.15);
-}
-
-/* Multimodal Shelf Uploader & chip logs */
-.drag-upload-zone {
-    border: 1.5px dashed var(--border-color);
-    border-radius: var(--border-radius-sm);
-    padding: 16px;
-    text-align: center;
-    cursor: pointer;
-    background: #fafafa;
-    transition: var(--transition-smooth);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 6px;
-    color: var(--text-secondary);
-}
-
-.drag-upload-zone:hover {
-    border-color: var(--border-focus);
-    background: #fbfbfb;
-}
-
-.drag-upload-zone p {
-    font-size: 12px;
-}
-
-.drag-upload-zone p span {
-    font-weight: 600;
-    text-decoration: underline;
+    background-color: rgba(0,0,0,0.02);
 }
 
+/* Uploader & Media chips settings list */
 .shelf-list {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
     overflow-y: auto;
 }
 
 .empty-shelf-text {
-    font-size: 11px;
+    font-size: 10.5px;
     color: var(--text-muted);
     text-align: center;
-    padding: 10px 0;
+    padding: 8px 0;
     font-style: italic;
 }
 
 .media-chip {
     display: flex;
     align-items: center;
-    background-color: #fafafa;
+    background-color: #f9fafb;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
-    padding: 6px 10px;
-    gap: 10px;
+    padding: 5px 8px;
+    gap: 8px;
     transition: var(--transition-smooth);
-    position: relative;
 }
 
 .media-chip-preview {
-    width: 28px;
-    height: 28px;
+    width: 24px;
+    height: 24px;
     border-radius: 4px;
     object-fit: cover;
     background-color: #eaeaea;
@@ -1020,7 +811,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
+    font-size: 10px;
 }
 
 .media-chip-preview img {
@@ -1035,7 +826,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
 }
 
 .media-chip-name {
-    font-size: 11px;
+    font-size: 10.5px;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
@@ -1044,10 +835,10 @@ input[type="range"]::-webkit-slider-thumb:hover {
 }
 
 .media-chip-meta {
-    font-size: 9.5px;
+    font-size: 9px;
     color: var(--text-muted);
     display: flex;
-    gap: 6px;
+    gap: 4px;
 }
 
 .media-chip-remove {
@@ -1055,20 +846,18 @@ input[type="range"]::-webkit-slider-thumb:hover {
     border: none;
     color: var(--text-muted);
     cursor: pointer;
-    padding: 4px;
-    border-radius: 4px;
+    padding: 3px;
     display: flex;
 }
 
 .media-chip-remove:hover {
     color: var(--danger);
-    background-color: #fee2e2;
 }
 
-/* Quick Shelf Attachment Thumbnail inside textarea */
+/* Attachment preview thumbnail inside input fields */
 .quick-preview-item {
-    width: 36px;
-    height: 36px;
+    width: 32px;
+    height: 32px;
     border-radius: var(--border-radius-sm);
     border: 1px solid var(--border-color);
     overflow: hidden;
@@ -1084,31 +873,30 @@ input[type="range"]::-webkit-slider-thumb:hover {
 
 .quick-preview-badge {
     position: absolute;
-    top: 2px;
-    right: 2px;
+    top: 1.5px;
+    right: 1.5px;
     background-color: var(--accent-blue);
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
 }
 
-/* Right Sidebar Footer indicator */
 .right-sidebar-footer {
-    padding: 12px 20px;
+    padding: 10px 16px;
     border-top: 1px solid var(--border-color);
 }
 
 .status-indicator-group {
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: 11px;
+    gap: 6px;
+    font-size: 10.5px;
     color: var(--text-secondary);
 }
 
 .status-dot {
-    width: 6px;
-    height: 6px;
+    width: 5px;
+    height: 5px;
     border-radius: 50%;
 }
 
@@ -1118,10 +906,10 @@ input[type="range"]::-webkit-slider-thumb:hover {
 
 /* Loading animations */
 .spinner-light {
-    width: 14px;
-    height: 14px;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-top: 2px solid #ffffff;
+    width: 12px;
+    height: 12px;
+    border: 1.5px solid rgba(255, 255, 255, 0.2);
+    border-top: 1.5px solid #ffffff;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }
@@ -1132,6 +920,81 @@ input[type="range"]::-webkit-slider-thumb:hover {
 }
 
 @keyframes slideUp {
-    from { opacity: 0; transform: translateY(10px); }
+    from { opacity: 0; transform: translateY(8px); }
     to { opacity: 1; transform: translateY(0); }
 }
+
+/* ==========================================================================
+   Responsive & Mobile Design Rules
+   ========================================================================== */
+
+/* Drawer behavior on Tablet and Desktop */
+@media (min-width: 641px) {
+    .sidebar-right.collapsed {
+        transform: translateX(100%);
+    }
+    
+    /* When settings are open, we can optionally squeeze the workspace */
+    .app-container:not(.settings-collapsed) .main-workspace {
+        /* Only apply if you want layout shifting. Slicing over is cleaner! */
+    }
+}
+
+/* Ultra-mobile scaling details (screens < 640px) */
+@media (max-width: 640px) {
+    body {
+        font-size: 13.5px;
+    }
+    
+    .workspace-header {
+        padding: 0 16px;
+    }
+    
+    /* Header action labels hidden, only icons visible */
+    .header-btn span {
+        display: none;
+    }
+    
+    .header-btn {
+        padding: 8px;
+    }
+    
+    /* Settings slides covers 100% width on mobile */
+    .sidebar-right {
+        width: 100% !important;
+        border-left: none;
+    }
+    
+    .studio-dashboard {
+        padding: 30px 16px;
+    }
+    
+    .welcome-heading {
+        font-size: 22px;
+        margin-bottom: 20px;
+    }
+    
+    /* Chat thread viewport layout */
+    .chat-messages-feed {
+        padding: 16px;
+        gap: 18px;
+    }
+    
+    .message-body {
+        padding: 9px 12px;
+        font-size: 13px;
+    }
+    
+    .message-bubble {
+        max-width: 95%;
+    }
+    
+    .chat-mini-footer {
+        padding: 10px 12px;
+    }
+    
+    .recipe-chip {
+        padding: 6px 12px;
+        font-size: 11.5px;
+    }
+}