Redesign playground to match StepFun Studio reference UI

static/app.js

@@ -8,12 +8,12 @@ const STATE = {
     maxTokens: 2048,
     temperature: 0.7,
     uploadedFiles: [], // Current prompt attachments
-    conversationHistory: [], // Conversation log sent to StepFun
+    conversationHistory: [], // Sent to StepFun API
     gradioClient: null,
     isThinking: false
 };
 
-// DOM Selections
+// DOM Elements hooks
 const dom = {
     apiKeyInput: document.getElementById("api-key-input"),
     toggleKeyVisibility: document.getElementById("toggle-key-visibility"),
@@ -22,18 +22,43 @@ const dom = {
     maxTokensVal: document.getElementById("max-tokens-val"),
     temperatureSlider: document.getElementById("temperature-slider"),
     temperatureVal: document.getElementById("temperature-val"),
-    dropZone: document.getElementById("drop-zone"),
+    
+    // Sidebar drawers
+    sidebarLeft: document.getElementById("sidebar-left"),
+    sidebarRight: document.getElementById("sidebar-right"),
+    btnToggleLeft: document.getElementById("btn-toggle-left"),
+    btnToggleRight: document.getElementById("btn-toggle-right"),
+    
+    // Viewports
+    studioDashboard: document.getElementById("studio-dashboard"),
+    chatThreadContainer: document.getElementById("chat-thread-container"),
+    chatMessagesFeed: document.getElementById("chat-messages-feed"),
+    
+    // Main Console Box Elements (Dashboard view)
+    studioPromptInput: document.getElementById("studio-prompt-input"),
+    innerShelfPreview: document.getElementById("inner-shelf-preview"),
+    studioUploadTrigger: document.getElementById("studio-upload-trigger"),
+    studioSendBtn: document.getElementById("studio-send-button"),
+    studioSpinner: document.getElementById("studio-spinner"),
+    
+    // Mini Console Box Elements (Chat thread view)
+    miniPromptInput: document.getElementById("mini-prompt-input"),
+    miniShelfPreview: document.getElementById("mini-shelf-preview"),
+    miniUploadTrigger: document.getElementById("mini-upload-trigger"),
+    miniSendBtn: document.getElementById("mini-send-button"),
+    miniSpinner: document.getElementById("mini-spinner"),
+    
+    // Core file upload console
     fileUploader: document.getElementById("file-uploader"),
-    shelfInventory: document.getElementById("shelf-inventory"),
-    recipeCards: document.querySelectorAll(".recipe-card"),
+    shelfList: document.getElementById("shelf-list"),
+    dropZone: document.getElementById("drop-zone"),
+    
+    // Resets
     clearChatBtn: document.getElementById("clear-chat-button"),
-    chatMessages: document.getElementById("chat-messages"),
-    quickShelfPreview: document.getElementById("quick-shelf-preview"),
-    quickUploadTrigger: document.getElementById("quick-upload-trigger"),
-    promptInput: document.getElementById("prompt-input"),
-    sendBtn: document.getElementById("send-button"),
-    sendIcon: document.getElementById("send-icon"),
-    sendSpinner: document.getElementById("send-spinner")
+    menuNewChat: document.getElementById("menu-new-chat"),
+    
+    // Showcase cards
+    showcaseCards: document.querySelectorAll(".showcase-card")
 };
 
 // Markdown configuration
@@ -54,15 +79,22 @@ async function initializeApp() {
 
     // 2. Connect Gradio Client
     try {
-        // connects to current host (where python app.py is served)
         STATE.gradioClient = await Client.connect(window.location.origin);
         console.log("Successfully connected to Gradio.Server backend.");
     } catch (e) {
         console.error("Gradio Client Connection Failed:", e);
-        appendSystemLog("System connection is restricted. Local commands might not be running.", true);
+        appendSystemLog("Gradio Server connection is restricted.", true);
     }
 
-    // 3. Register Settings Listeners
+    // 3. Register Sidebar Toggles
+    dom.btnToggleLeft.addEventListener("click", () => {
+        dom.sidebarLeft.classList.toggle("collapsed");
+    });
+    dom.btnToggleRight.addEventListener("click", () => {
+        dom.sidebarRight.classList.toggle("collapsed");
+    });
+
+    // 4. Register Settings Listeners
     dom.apiKeyInput.addEventListener("input", (e) => {
         STATE.apiKey = e.target.value;
         localStorage.setItem("step_api_key", STATE.apiKey);
@@ -89,8 +121,9 @@ async function initializeApp() {
         dom.temperatureVal.textContent = STATE.temperature.toFixed(1);
     });
 
-    // 4. Register Files Upload Listeners
-    dom.quickUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
+    // 5. Register File Upload Anchors
+    dom.studioUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
+    dom.miniUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
     dom.dropZone.addEventListener("click", () => dom.fileUploader.click());
     dom.fileUploader.addEventListener("change", handleFileSelection);
 
@@ -115,29 +148,42 @@ async function initializeApp() {
         processFiles(files);
     });
 
-    // 5. Chat Operations
-    dom.sendBtn.addEventListener("click", triggerPromptSubmission);
-    dom.promptInput.addEventListener("keydown", (e) => {
+    // 6. Submit Triggers
+    dom.studioSendBtn.addEventListener("click", () => triggerPromptSubmission(dom.studioPromptInput));
+    dom.miniSendBtn.addEventListener("click", () => triggerPromptSubmission(dom.miniPromptInput));
+
+    dom.studioPromptInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            triggerPromptSubmission(dom.studioPromptInput);
+        }
+    });
+
+    dom.miniPromptInput.addEventListener("keydown", (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
-            triggerPromptSubmission();
+            triggerPromptSubmission(dom.miniPromptInput);
         }
     });
 
+    // 7. Resets
     dom.clearChatBtn.addEventListener("click", resetSandbox);
+    dom.menuNewChat.addEventListener("click", resetSandbox);
 
-    // 6. Recipe Recipes Console Setup
-    dom.recipeCards.forEach(card => {
+    // 8. Recipe Recipes Console Setup
+    dom.showcaseCards.forEach(card => {
         card.addEventListener("click", () => {
             const recipeType = card.getAttribute("data-recipe");
             loadRecipe(recipeType);
         });
     });
 
-    // Auto-expand input textbox
-    dom.promptInput.addEventListener("input", () => {
-        dom.promptInput.style.height = "auto";
-        dom.promptInput.style.height = (dom.promptInput.scrollHeight) + "px";
+    // Auto-expand input textareas
+    [dom.studioPromptInput, dom.miniPromptInput].forEach(textarea => {
+        textarea.addEventListener("input", () => {
+            textarea.style.height = "auto";
+            textarea.style.height = (textarea.scrollHeight) + "px";
+        });
     });
 }
 
@@ -167,14 +213,14 @@ function processFiles(files) {
     });
 }
 
-// Update the Visual Attachments list
+// Update UI Attachment Previews
 function updateShelfUI() {
-    // Clear inventory container
-    dom.shelfInventory.innerHTML = "";
-    dom.quickShelfPreview.innerHTML = "";
+    dom.shelfList.innerHTML = "";
+    dom.innerShelfPreview.innerHTML = "";
+    dom.miniShelfPreview.innerHTML = "";
 
     if (STATE.uploadedFiles.length === 0) {
-        dom.shelfInventory.innerHTML = `<div class="empty-shelf-text">No media loaded. Files are held in local state for your next prompts.</div>`;
+        dom.shelfList.innerHTML = `<div class="empty-shelf-text">No active attachments loaded. Upload images or video clips.</div>`;
         return;
     }
 
@@ -202,7 +248,7 @@ function updateShelfUI() {
                 </div>
             </div>
             <button class="media-chip-remove" data-id="${file.id}">
-                <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" 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>
+                <svg viewBox="0 0 24 24" width="12" height="12" 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>
         `;
 
@@ -210,38 +256,45 @@ function updateShelfUI() {
             removeFile(file.id);
         });
 
-        dom.shelfInventory.appendChild(chip);
+        dom.shelfList.appendChild(chip);
 
-        // 2. Chat Quick Preview Item
-        const previewItem = document.createElement("div");
-        previewItem.className = "quick-preview-item";
-        previewItem.title = file.name;
-        
-        if (file.type.startsWith("image/")) {
-            previewItem.innerHTML = `<img src="${file.base64}"><div class="quick-preview-badge"></div>`;
-        } else {
-            previewItem.innerHTML = `<div class="media-chip-preview" style="width:100%;height:100%;">🎬</div><div class="quick-preview-badge"></div>`;
-        }
+        // 2. Dashboard Inner Console Preview
+        const previewItemDash = createPreviewThumb(file);
+        dom.innerShelfPreview.appendChild(previewItemDash);
 
-        dom.quickShelfPreview.appendChild(previewItem);
+        // 3. Mini Input Preview
+        const previewItemMini = createPreviewThumb(file);
+        dom.miniShelfPreview.appendChild(previewItemMini);
     });
 }
 
+function createPreviewThumb(file) {
+    const previewItem = document.createElement("div");
+    previewItem.className = "quick-preview-item";
+    previewItem.title = file.name;
+    
+    if (file.type.startsWith("image/")) {
+        previewItem.innerHTML = `<img src="${file.base64}"><div class="quick-preview-badge"></div>`;
+    } else {
+        previewItem.innerHTML = `<div class="media-chip-preview" style="width:100%;height:100%;">🎬</div><div class="quick-preview-badge"></div>`;
+    }
+    return previewItem;
+}
+
 function removeFile(id) {
     STATE.uploadedFiles = STATE.uploadedFiles.filter(f => f.id !== id);
     updateShelfUI();
 }
 
-// Load Play Recipes template prompts
+// Load Cookbook Showcase Recipes
 function loadRecipe(recipeType) {
-    // Standard mock files
     const mockImageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
-    
-    // Reset shelf
     STATE.uploadedFiles = [];
 
+    let promptText = "";
+
     if (recipeType === "whiteboard") {
-        dom.promptInput.value = "Here is a snapshot of our whiteboard project plan sketch. Translate this visual sequence of tasks and boxes into a clean, itemized roadmap plan with a structured markdown table.";
+        promptText = "Here is a snapshot of our whiteboard project plan sketch. Translate this visual sequence of tasks and boxes into a clean, itemized roadmap plan with a structured markdown table.";
         STATE.uploadedFiles.push({
             id: "recipe-whiteboard",
             name: "whiteboard_gantt.png",
@@ -250,7 +303,7 @@ function loadRecipe(recipeType) {
             base64: mockImageBase64
         });
     } else if (recipeType === "code") {
-        dom.promptInput.value = "Review this dashboard interface design. Generate beautiful, fully responsive HTML structure styling using elegant flex grids to match it.";
+        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",
@@ -259,7 +312,7 @@ function loadRecipe(recipeType) {
             base64: mockImageBase64
         });
     } else if (recipeType === "receipt") {
-        dom.promptInput.value = "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.";
+        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",
@@ -268,40 +321,48 @@ function loadRecipe(recipeType) {
             base64: mockImageBase64
         });
     } else if (recipeType === "diagnostic") {
-        dom.promptInput.value = "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.";
-        // Simulating loading a short recording clip
+        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({
             id: "recipe-diagnostics",
             name: "console_bug.mp4",
             type: "video/mp4",
             size: "1.45 MB",
-            base64: mockImageBase64 // Represented via base64 for simplicity
+            base64: mockImageBase64
         });
     }
 
+    // Set value in BOTH text areas so that it works regardless of viewport state
+    dom.studioPromptInput.value = promptText;
+    dom.miniPromptInput.value = promptText;
+
     updateShelfUI();
-    dom.promptInput.dispatchEvent(new Event("input"));
-    dom.promptInput.focus();
+    dom.studioPromptInput.dispatchEvent(new Event("input"));
+    dom.miniPromptInput.dispatchEvent(new Event("input"));
+    
+    // Focus active textarea
+    if (dom.studioDashboard.style.display !== "none") {
+        dom.studioPromptInput.focus();
+    } else {
+        dom.miniPromptInput.focus();
+    }
 }
 
-// Submitting prompts to Server
-async function triggerPromptSubmission() {
+// Submit prompt values to Gradio.Server API
+async function triggerPromptSubmission(inputElement) {
     if (STATE.isThinking) return;
 
-    const promptText = dom.promptInput.value.trim();
+    const promptText = inputElement.value.trim();
     if (!promptText && STATE.uploadedFiles.length === 0) return;
 
-    // Check key
-    if (!STATE.apiKey && !dom.apiKeyInput.placeholder.includes("env key")) {
-        appendSystemLog("StepFun API Key is required. Please set it in the credentials input or configure STEP_API_KEY environment variable.", true);
+    // 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);
         return;
     }
 
-    // Set UI loading state
     setLoadingState(true);
 
-    // 1. Format user message content
-    // Content starts with the user's textual input prompt
+    // 1. Format user message contents
     const contentArray = [];
     if (promptText) {
         contentArray.push({
@@ -310,7 +371,7 @@ async function triggerPromptSubmission() {
         });
     }
 
-    // Append attachments
+    // Attachments
     STATE.uploadedFiles.forEach(file => {
         if (file.type.startsWith("image/")) {
             contentArray.push({
@@ -334,31 +395,37 @@ async function triggerPromptSubmission() {
         content: contentArray
     };
 
-    // 2. Add message to visible chat list
+    // 2. Transition dashboard to Chat Thread view
+    if (dom.studioDashboard.style.display !== "none") {
+        dom.studioDashboard.style.display = "none";
+        dom.chatThreadContainer.style.display = "flex";
+    }
+
+    // Append to UI thread list
     appendUserBubble(promptText, STATE.uploadedFiles);
 
-    // Add user message to backend conversation history log
+    // Append to backend log history
     STATE.conversationHistory.push(userMessage);
 
-    // Empty active UI text box and attachment shelf
-    dom.promptInput.value = "";
-    dom.promptInput.style.height = "auto";
-    const currentPromptAttachments = [...STATE.uploadedFiles];
+    // Clear active UI containers
+    dom.studioPromptInput.value = "";
+    dom.miniPromptInput.value = "";
+    dom.studioPromptInput.style.height = "auto";
+    dom.miniPromptInput.style.height = "auto";
+    
     STATE.uploadedFiles = [];
     updateShelfUI();
 
-    // 3. Connect to Gradio.Server API
+    // 3. Connect API Call
     try {
         if (!STATE.gradioClient) {
             throw new Error("Gradio server is not connected.");
         }
 
-        // Generate response bubble placeholder
         const responseId = appendAssistantPlaceholderBubble();
         const startTime = Date.now();
 
-        // Call the chat_with_step endpoint
-        // Arguments: [messages_json, api_key, reasoning_effort, max_tokens, temperature]
+        // Call our gradio.Server api endpoint
         const result = await STATE.gradioClient.predict("/chat_with_step", [
             JSON.stringify(STATE.conversationHistory),
             STATE.apiKey,
@@ -368,18 +435,13 @@ async function triggerPromptSubmission() {
         ]);
 
         const duration = ((Date.now() - startTime) / 1000).toFixed(1);
-        
-        // Parse results
         const data = JSON.parse(result.data[0]);
 
         if (data.status === "error") {
             updateAssistantBubble(responseId, `⚠️ **API Error:** ${data.message}`, "", duration);
-            STATE.conversationHistory.pop(); // Remove failed prompt from history
+            STATE.conversationHistory.pop(); // Remove failed prompt
         } else {
-            // Update bubble with result markdown and thoughts
             updateAssistantBubble(responseId, data.content, data.reasoning_content, duration);
-            
-            // Append assistant completion to thread history
             STATE.conversationHistory.push({
                 role: "assistant",
                 content: data.content
@@ -395,26 +457,24 @@ async function triggerPromptSubmission() {
     setLoadingState(false);
 }
 
-// UI State Switcher
+// UI spinner state toggles
 function setLoadingState(loading) {
     STATE.isThinking = loading;
     if (loading) {
-        dom.sendIcon.style.display = "none";
-        dom.sendSpinner.style.display = "block";
-        dom.sendBtn.disabled = true;
+        dom.studioSpinner.style.display = "block";
+        dom.miniSpinner.style.display = "block";
+        dom.studioSendBtn.disabled = true;
+        dom.miniSendBtn.disabled = true;
     } else {
-        dom.sendIcon.style.display = "block";
-        dom.sendSpinner.style.display = "none";
-        dom.sendBtn.disabled = false;
+        dom.studioSpinner.style.display = "none";
+        dom.miniSpinner.style.display = "none";
+        dom.studioSendBtn.disabled = false;
+        dom.miniSendBtn.disabled = false;
     }
 }
 
-// Append User Chat Message Bubble to Screen
+// Render User Bubble
 function appendUserBubble(text, files) {
-    // Hide welcome box if present
-    const welcome = document.querySelector(".welcome-box");
-    if (welcome) welcome.style.display = "none";
-
     const bubble = document.createElement("div");
     bubble.className = "message-bubble user";
     
@@ -449,11 +509,11 @@ function appendUserBubble(text, files) {
         </div>
     `;
 
-    dom.chatMessages.appendChild(bubble);
+    dom.chatMessagesFeed.appendChild(bubble);
     scrollToBottom();
 }
 
-// Append Assistant Loader/Placeholder to Chat Feed
+// Render Assistant Placeholder
 function appendAssistantPlaceholderBubble() {
     const id = "assistant-" + Math.random().toString(36).substring(2, 9);
     const bubble = document.createElement("div");
@@ -466,7 +526,7 @@ function appendAssistantPlaceholderBubble() {
             <div class="thought-container" id="${id}-thought-box">
                 <div class="thought-header">
                     <div class="thought-title-group">
-                        <div class="spinner" style="width:12px;height:12px;border-width:1.5px;"></div>
+                        <div class="spinner-light" style="width:12px;height:12px;border-width:1.5px; border-top-color:#111827; border-left-color:#e5e7eb;"></div>
                         <span>Reasoning...</span>
                     </div>
                     <span class="thought-timer" id="${id}-timer">0.0s</span>
@@ -478,10 +538,10 @@ function appendAssistantPlaceholderBubble() {
         </div>
     `;
 
-    dom.chatMessages.appendChild(bubble);
+    dom.chatMessagesFeed.appendChild(bubble);
     scrollToBottom();
 
-    // Start UI thought Timer
+    // Start Thought Timer
     let seconds = 0.0;
     const timerEl = document.getElementById(`${id}-timer`);
     const interval = setInterval(() => {
@@ -496,7 +556,7 @@ function appendAssistantPlaceholderBubble() {
     return id;
 }
 
-// Update Assistant Placeholder with Final API Results
+// Complete Assistant Bubble
 function updateAssistantBubble(id, content, reasoning, duration) {
     const bubble = document.getElementById(id);
     if (!bubble) return;
@@ -504,7 +564,6 @@ function updateAssistantBubble(id, content, reasoning, duration) {
     const thoughtBox = document.getElementById(`${id}-thought-box`);
     const textBox = document.getElementById(`${id}-text-box`);
 
-    // 1. Update Collapsible thoughts
     if (reasoning) {
         thoughtBox.innerHTML = `
             <div class="thought-header" id="${id}-thought-toggle">
@@ -519,20 +578,16 @@ function updateAssistantBubble(id, content, reasoning, duration) {
             <div class="thought-content">${escapeHtml(reasoning)}</div>
         `;
         
-        // Add toggle expand/collapse behavior
         const toggleBtn = document.getElementById(`${id}-thought-toggle`);
         toggleBtn.addEventListener("click", () => {
             thoughtBox.classList.toggle("collapsed");
         });
     } else {
-        // If model skipped reasoning, hide thinking layout entirely
         thoughtBox.style.display = "none";
     }
 
-    // 2. Render final markdown text
     textBox.innerHTML = marked.parse(content);
     
-    // Highlight code blocks
     textBox.querySelectorAll("pre code").forEach((el) => {
         hljs.highlightElement(el);
     });
@@ -540,41 +595,48 @@ function updateAssistantBubble(id, content, reasoning, duration) {
     scrollToBottom();
 }
 
-// Reset chat log
+// Reset Sandbox Chat Context Logs
 function resetSandbox() {
     STATE.conversationHistory = [];
     STATE.uploadedFiles = [];
     updateShelfUI();
-    dom.chatMessages.innerHTML = `
-        <div class="welcome-box">
-            <div class="welcome-icon">⚡</div>
-            <h2>Sandbox Reset</h2>
-            <p>Conversation log history has been cleared. Load a recipe below or upload files to begin fresh.</p>
-        </div>
-    `;
-    appendSystemLog("Conversation context cleared successfully.");
+
+    // Clear feed
+    dom.chatMessagesFeed.innerHTML = "";
+
+    // Show dashboard
+    dom.chatThreadContainer.style.display = "none";
+    dom.studioDashboard.style.display = "flex";
+
+    dom.studioPromptInput.value = "";
+    dom.miniPromptInput.value = "";
+    dom.studioPromptInput.style.height = "auto";
+    dom.miniPromptInput.style.height = "auto";
+
+    appendSystemLog("Workspace sandbox reset successful.");
 }
 
-// Helper: Append system errors or status notifications
 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;
+    }
+
     const log = document.createElement("div");
     log.className = "message-bubble assistant";
     log.innerHTML = `
         <div class="message-meta">System</div>
-        <div class="message-body" style="background-color: ${isError ? 'rgba(244,63,94,0.06)' : 'rgba(20,184,166,0.06)'}; border-color: ${isError ? 'rgba(244,63,94,0.2)' : 'rgba(20,184,166,0.2)'};">
-            <div class="message-text" style="color: ${isError ? varColor('danger') : varColor('accent-teal')}; font-size:12px; font-weight:500;">
+        <div class="message-body" style="background-color: ${isError ? '#fef2f2' : '#f0fdf4'}; border-color: ${isError ? '#fee2e2' : '#bbf7d0'};">
+            <div class="message-text" style="color: ${isError ? '#ef4444' : '#16a34a'}; font-size: 11.5px; font-weight: 500;">
                 ${isError ? '🛑' : 'ℹ️'} ${message}
             </div>
         </div>
     `;
-    dom.chatMessages.appendChild(log);
+    dom.chatMessagesFeed.appendChild(log);
     scrollToBottom();
 }
 
-function varColor(name) {
-    return getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
-}
-
 function escapeHtml(text) {
     if (!text) return "";
     return text
@@ -586,8 +648,8 @@ function escapeHtml(text) {
 }
 
 function scrollToBottom() {
-    dom.chatMessages.scrollTop = dom.chatMessages.scrollHeight;
+    dom.chatMessagesFeed.scrollTop = dom.chatMessagesFeed.scrollHeight;
 }
 
-// Initialise Application when loaded
+// Initialise application when DOM is fully set up
 window.addEventListener("DOMContentLoaded", initializeApp);

static/index.html

@@ -3,13 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Step 3.7 Flash - Multimodal Reasoning Playground</title>
+    <title>StepFun Studio - Multimodal Playground</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&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@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&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-dark.min.css">
+    <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>
     <!-- Marked.js for Markdown Parsing -->
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@@ -18,188 +18,262 @@
 </head>
 <body>
     <div class="app-container">
-        <!-- Sidebar Navigation & Parameter Controls -->
-        <aside class="sidebar">
-            <div class="sidebar-header">
-                <div class="logo-container">
-                    <span class="logo-icon">⚡</span>
-                    <div class="logo-text">
-                        <h1>Step 3.7 Flash</h1>
-                        <span class="badge">NATIVE MULTIMODAL</span>
-                    </div>
+        
+        <!-- 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">
+                        <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>
                 </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>
 
-            <div class="sidebar-content">
-                <!-- API Credentials -->
-                <section class="config-section">
-                    <h2 class="section-title">Credentials</h2>
-                    <div class="form-group">
-                        <label for="api-key-input">StepFun API Key</label>
-                        <div class="password-wrapper">
-                            <input type="password" id="api-key-input" placeholder="Enter your key or use env key" autocomplete="off">
-                            <button type="button" id="toggle-key-visibility" class="icon-button" title="Show/Hide Key">
-                                <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="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>
-                        <span class="input-tip">Visit StepFun Console to obtain an API Key.</span>
-                    </div>
-                </section>
+        <!-- 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>
+                <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>
 
-                <!-- Model Parameters -->
-                <section class="config-section">
-                    <h2 class="section-title">Parameters</h2>
+            <!-- Interactive Workspace Content -->
+            <div class="workspace-viewport">
+                
+                <!-- 1. EMPTY CHAT / STUDIO DASHBOARD (Matches Screenshot) -->
+                <div class="studio-dashboard" id="studio-dashboard">
+                    <h2 class="welcome-heading">Hello, welcome to Studio</h2>
                     
-                    <div class="form-group">
-                        <label>Reasoning Effort</label>
-                        <div class="effort-picker">
-                            <label class="effort-pill">
-                                <input type="radio" name="reasoning-effort" value="low">
-                                <span>Low</span>
-                            </label>
-                            <label class="effort-pill">
-                                <input type="radio" name="reasoning-effort" value="medium" checked>
-                                <span>Medium</span>
-                            </label>
-                            <label class="effort-pill">
-                                <input type="radio" name="reasoning-effort" value="high">
-                                <span>High</span>
-                            </label>
-                        </div>
-                        <span class="input-tip">Low: fast summary/Q&amp;A. High: complex math/code.</span>
-                    </div>
+                    <!-- Central Search/Input Console -->
+                    <div class="console-box">
+                        <textarea id="studio-prompt-input" placeholder="Describe the task you want to verify, or start with the showcase below..."></textarea>
+                        
+                        <!-- Upload preview shelf internally -->
+                        <div class="inner-shelf-preview" id="inner-shelf-preview"></div>
 
-                    <div class="form-group">
-                        <div class="label-row">
-                            <label for="max-tokens-slider">Max Output Tokens</label>
-                            <span class="value-display" id="max-tokens-val">2048</span>
+                        <div class="console-action-row">
+                            <button class="circle-btn-action" id="studio-upload-trigger" title="Attach Media File">
+                                <svg viewBox="0 0 24 24" width="16" height="16" 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>
+                            </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>
+                                <div class="spinner-light" id="studio-spinner" style="display: none;"></div>
+                            </button>
                         </div>
-                        <input type="range" id="max-tokens-slider" min="256" max="8192" step="256" value="2048">
                     </div>
 
-                    <div class="form-group">
-                        <div class="label-row">
-                            <label for="temperature-slider">Temperature</label>
-                            <span class="value-display" id="temperature-val">0.7</span>
+                    <!-- Showcase Section -->
+                    <div class="showcase-section">
+                        <div class="showcase-header">
+                            <h3>Showcase</h3>
+                            <a href="#" class="view-all-link">View all <span>&rsaquo;</span></a>
                         </div>
-                        <input type="range" id="temperature-slider" min="0.0" max="1.5" step="0.1" value="0.7">
-                    </div>
-                </section>
-
-                <!-- Media Upload Desk -->
-                <section class="config-section">
-                    <h2 class="section-title">Multimodal Shelf</h2>
-                    <div class="upload-zone" id="drop-zone">
-                        <input type="file" id="file-uploader" accept="image/*,video/*" multiple style="display: none;">
-                        <svg class="upload-icon" viewBox="0 0 24 24" width="24" height="24" 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 here or <span>browse</span></p>
-                        <span class="upload-limit">Images (PNG, JPG, WebP) | Videos (&lt;128MB, MP4)</span>
-                    </div>
-                    <div class="shelf-inventory" id="shelf-inventory">
-                        <!-- Uploaded files will populate here dynamically -->
-                        <div class="empty-shelf-text">No media loaded. Files are held in local state for your next prompts.</div>
-                    </div>
-                </section>
-
-                <!-- Cookbooks & Quick Prompts -->
-                <section class="config-section">
-                    <h2 class="section-title">Playground Recipes</h2>
-                    <div class="recipes-grid">
-                        <div class="recipe-card" data-recipe="whiteboard">
-                            <span class="recipe-icon">✏️</span>
-                            <div class="recipe-details">
-                                <h3>Whiteboard Plan</h3>
-                                <p>Turn a sketch into a project roadmap table.</p>
+                        
+                        <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>
-                        <div class="recipe-card" data-recipe="code">
-                            <span class="recipe-icon">💻</span>
-                            <div class="recipe-details">
-                                <h3>Screenshot to Code</h3>
-                                <p>Extract design elements to code.</p>
+                            
+                            <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>
-                        <div class="recipe-card" data-recipe="receipt">
-                            <span class="recipe-icon">📊</span>
-                            <div class="recipe-details">
-                                <h3>Receipt Auditor</h3>
-                                <p>Tabulate receipts with reasoning check.</p>
+                            
+                            <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>
+                            </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>
                         </div>
-                        <div class="recipe-card" data-recipe="diagnostic">
-                            <span class="recipe-icon">🎥</span>
-                            <div class="recipe-details">
-                                <h3>Video Diagnostics</h3>
-                                <p>Reconstruct timeline events from video clip.</p>
+                    </div>
+                </div>
+
+                <!-- 2. ACTIVE CHAT THREAD (Hidden initially) -->
+                <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 -->
+                    <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>
+                                </button>
+                                <button class="circle-btn-send" id="mini-send-button" title="Send Task">
+                                    <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="mini-spinner" style="display: none;"></div>
+                                </button>
                             </div>
                         </div>
                     </div>
-                </section>
+                </div>
+
             </div>
+        </main>
+
+        <!-- Right Sidebar: Configuration Cards & Multimodal Shelf (Matches right blocks) -->
+        <aside class="sidebar-right" id="sidebar-right">
+            <input type="file" id="file-uploader" accept="image/*,video/*" multiple style="display: none;">
             
-            <div class="sidebar-footer">
-                <div class="connection-status">
-                    <span class="status-indicator online"></span>
-                    <span>Gradio Server Queued</span>
-                </div>
+            <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>
+                </button>
             </div>
-        </aside>
 
-        <!-- Main Chat Area -->
-        <main class="chat-container">
-            <header class="chat-header">
-                <div class="header-main">
-                    <h2>Workspace Playground</h2>
-                    <span class="model-badge">step-3.7-flash</span>
-                </div>
-                <div class="header-actions">
-                    <button id="clear-chat-button" class="btn btn-secondary flex-center" title="Reset Sandbox">
-                        <svg viewBox="0 0 24 24" width="16" height="16" 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><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
-                        <span>Clear Chat</span>
-                    </button>
+            <div class="sidebar-right-content">
+                
+                <!-- Credentials Card -->
+                <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">
+                        <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>
-            </header>
 
-            <!-- Chat Message Feed -->
-            <div class="chat-messages" id="chat-messages">
-                <!-- Welcome greeting message -->
-                <div class="welcome-box">
-                    <div class="welcome-icon">⚡</div>
-                    <h2>Welcome to Step 3.7 Flash Playground</h2>
-                    <p>Experience ultra-fast, state-of-the-art multimodal reasoning. This client communicates natively with your backend via <strong>Gradio.Server</strong>, using robust FastAPI queuing and threading.</p>
-                    <div class="feature-tags">
-                        <span class="tag">💡 High-Fidelity Thoughts</span>
-                        <span class="tag">🖼️ Multi-Image Compares</span>
-                        <span class="tag">🎬 Native Video Support</span>
-                        <span class="tag">⚡ Low Latency Queuing</span>
+                <!-- Parameters Card -->
+                <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">
+                            <input type="radio" name="reasoning-effort" value="low">
+                            <span>Low</span>
+                        </label>
+                        <label class="effort-pill">
+                            <input type="radio" name="reasoning-effort" value="medium" checked>
+                            <span>Medium</span>
+                        </label>
+                        <label class="effort-pill">
+                            <input type="radio" name="reasoning-effort" value="high">
+                            <span>High</span>
+                        </label>
+                    </div>
+                    <span class="block-tip">Controls the computational budget for Step 3.7 Flash's thought processes.</span>
                 </div>
-            </div>
 
-            <!-- Input Controls and Chat Bar -->
-            <footer class="chat-footer">
-                <!-- Quick Shelf Preview above input bar -->
-                <div class="quick-shelf-preview" id="quick-shelf-preview"></div>
-                
-                <div class="input-panel">
-                    <button class="btn btn-icon flex-center" id="quick-upload-trigger" title="Attach Media File">
-                        <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.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
-                    </button>
-                    
-                    <div class="textarea-wrapper">
-                        <textarea id="prompt-input" rows="1" placeholder="Ask anything, or drop an image/video here..." autofocus></textarea>
+                <!-- 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">
 
-                    <button class="btn btn-primary btn-send flex-center" id="send-button" title="Send message to model">
-                        <svg id="send-icon" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
-                        <div id="send-spinner" class="spinner" style="display: none;"></div>
-                    </button>
+                    <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>
-            </footer>
-        </main>
+
+                <!-- Active Shelf uploads Card -->
+                <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>
+                    </div>
+                    <div class="shelf-list" id="shelf-list">
+                        <div class="empty-shelf-text">No active attachments loaded. Upload images or video clips.</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="right-sidebar-footer">
+                <div class="status-indicator-group">
+                    <span class="status-dot online"></span>
+                    <span>Server Queued</span>
+                </div>
+            </div>
+        </aside>
+
     </div>
 
-    <!-- Gradio Client JS Library Connection -->
+    <!-- Gradio Client JS library connection -->
     <script type="module" src="/static/app.js"></script>
 </body>
 </html>

static/style.css

@@ -1,38 +1,44 @@
-/* CSS Variables for Premium Dark Theme Design System */
+/* StepFun Studio Premium Light Theme Design System */
 :root {
-    --bg-primary: #080c14;
-    --bg-secondary: #0e1626;
-    --bg-sidebar: #0a0e1a;
-    --bg-glass: rgba(15, 23, 42, 0.65);
-    --border-glass: rgba(99, 102, 241, 0.12);
-    --border-focus: rgba(99, 102, 241, 0.4);
+    --bg-primary: #f8f9fa;
+    --bg-workspace: #f8f9fa;
+    --bg-card: #ffffff;
+    --bg-sidebar: #ffffff;
+    --bg-input: #ffffff;
     
-    --accent-indigo: #6366f1;
-    --accent-teal: #14b8a6;
-    --accent-indigo-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
-    --accent-teal-gradient: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
-    --accent-fusion-gradient: linear-gradient(135deg, #6366f1 0%, #14b8a6 100%);
+    --border-color: #e5e7eb;
+    --border-light: #f1f2f4;
+    --border-focus: #111827;
     
-    --text-primary: #f8fafc;
-    --text-secondary: #94a3b8;
-    --text-muted: #64748b;
+    --accent-blue: #3b82f6;
+    --accent-blue-bg: #eff6ff;
+    
+    --text-primary: #111827;
+    --text-secondary: #4b5563;
+    --text-muted: #9ca3af;
     --danger: #f43f5e;
     
-    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
-    --shadow-md: 0 4px 20px -4px rgba(0, 0, 0, 0.7);
-    --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.8), 0 0 20px -2px rgba(99, 102, 241, 0.1);
+    --btn-dark-bg: #111827;
+    --btn-dark-hover: #1f2937;
+    --btn-light-bg: #f3f4f6;
+    --btn-light-hover: #e5e7eb;
     
-    --font-heading: 'Outfit', sans-serif;
-    --font-body: 'Inter', sans-serif;
+    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --font-mono: 'Fira Code', monospace;
     
-    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-smooth: all 0.2s ease-in-out;
     --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);
 }
 
-/* Reset & Base Styling */
+/* Reset & Global Styling */
 * {
     margin: 0;
     padding: 0;
@@ -43,17 +49,18 @@ body {
     background-color: var(--bg-primary);
     color: var(--text-primary);
     font-family: var(--font-body);
-    font-size: 15px;
-    line-height: 1.6;
+    font-size: 14px;
+    line-height: 1.5;
     overflow: hidden;
     height: 100vh;
     width: 100vw;
+    -webkit-font-smoothing: antialiased;
 }
 
-/* Scrollbar styling */
+/* Scrollbar customization */
 ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 5px;
+    height: 5px;
 }
 
 ::-webkit-scrollbar-track {
@@ -61,659 +68,419 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.1);
+    background: #e5e7eb;
     border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(99, 102, 241, 0.3);
+    background: #cbd5e1;
 }
 
-/* Container Structure */
+/* Flex Container Layout */
 .app-container {
     display: flex;
     height: 100vh;
     width: 100vw;
+    overflow: hidden;
     position: relative;
-    background-image: 
-        radial-gradient(at 10% 20%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
-        radial-gradient(at 90% 80%, rgba(20, 184, 166, 0.05) 0px, transparent 50%);
 }
 
-/* Sidebar Layout */
-.sidebar {
-    width: 380px;
+/* Left Sidebar Menu (Matches screenshot left list) */
+.sidebar-left {
+    width: 240px;
     background-color: var(--bg-sidebar);
-    border-right: 1px solid var(--border-glass);
+    border-right: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     height: 100%;
     flex-shrink: 0;
-    backdrop-filter: blur(10px);
+    transition: var(--transition-smooth);
+    z-index: 100;
 }
 
-.sidebar-header {
-    padding: 24px;
-    border-bottom: 1px solid var(--border-glass);
+.sidebar-left.collapsed {
+    width: 0;
+    overflow: hidden;
+    border-right: none;
 }
 
-.logo-container {
-    display: flex;
-    align-items: center;
-    gap: 12px;
+.sidebar-brand {
+    padding: 24px 20px;
 }
 
-.logo-icon {
-    font-size: 28px;
-    background: var(--accent-fusion-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
-    animation: pulse 3s infinite ease-in-out;
+.brand-logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
-.logo-text h1 {
+.brand-name {
     font-family: var(--font-heading);
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 700;
-    letter-spacing: -0.5px;
+    letter-spacing: -0.3px;
     color: var(--text-primary);
 }
 
-.badge {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    background: rgba(99, 102, 241, 0.15);
-    color: var(--accent-indigo);
-    padding: 2px 8px;
-    border-radius: 100px;
-    border: 1px solid rgba(99, 102, 241, 0.25);
-    display: inline-block;
-    margin-top: 2px;
-}
-
-.sidebar-content {
+.sidebar-menu {
     flex: 1;
-    overflow-y: auto;
-    padding: 24px;
     display: flex;
     flex-direction: column;
-    gap: 28px;
+    padding: 10px 12px;
+    gap: 4px;
 }
 
-/* Section styling inside sidebar */
-.config-section {
+.menu-item {
     display: flex;
-    flex-direction: column;
-    gap: 16px;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 14px;
+    border-radius: var(--border-radius-sm);
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 13.5px;
+    transition: var(--transition-smooth);
 }
 
-.section-title {
-    font-family: var(--font-heading);
-    font-size: 13px;
+.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;
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    color: var(--text-secondary);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    padding-bottom: 8px;
 }
 
-/* Form inputs & Groups */
-.form-group {
+.menu-separator {
+    height: 1px;
+    background-color: var(--border-light);
+    margin: 8px 14px;
+}
+
+/* Main content workspace */
+.main-workspace {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    height: 100%;
+    background-color: var(--bg-workspace);
+    overflow: hidden;
+    position: relative;
 }
 
-.form-group label {
-    font-family: var(--font-heading);
-    font-size: 13px;
-    font-weight: 500;
+/* 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);
+}
+
+.icon-toggle-btn:hover {
+    background-color: var(--btn-light-bg);
     color: var(--text-primary);
 }
 
-.label-row {
+.header-model-title {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 8px;
 }
 
-.value-display {
-    font-family: var(--font-mono);
+.studio-badge {
+    background-color: #f3f4f6;
+    color: #4b5563;
     font-size: 11px;
-    background: rgba(255, 255, 255, 0.05);
+    font-weight: 600;
     padding: 1px 6px;
     border-radius: 4px;
-    color: var(--accent-teal);
+    font-family: var(--font-heading);
 }
 
-.input-tip {
-    font-size: 11px;
-    color: var(--text-muted);
+.model-name {
+    font-size: 13px;
+    font-family: var(--font-mono);
+    color: var(--text-secondary);
 }
 
-/* Credentials visibility toggler input */
-.password-wrapper {
-    position: relative;
+/* Viewport structure */
+.workspace-viewport {
+    flex: 1;
+    overflow-y: auto;
     display: flex;
-    align-items: center;
+    flex-direction: column;
 }
 
-input[type="text"],
-input[type="password"] {
+/* 1. Studio Dashboard Styling (Matches Screenshot perfectly) */
+.studio-dashboard {
+    max-width: 800px;
     width: 100%;
-    background-color: rgba(15, 23, 42, 0.4);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--border-radius-sm);
+    margin: 0 auto;
+    padding: 60px 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.welcome-heading {
+    font-family: var(--font-heading);
+    font-size: 32px;
+    font-weight: 600;
     color: var(--text-primary);
-    padding: 10px 14px;
-    font-size: 13px;
-    font-family: var(--font-body);
+    margin-bottom: 30px;
+    letter-spacing: -0.5px;
+    text-align: center;
+}
+
+/* Central Search/Prompt Console 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;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
     transition: var(--transition-smooth);
+    margin-bottom: 48px;
 }
 
-input[type="password"] {
-    padding-right: 40px;
+.console-box:focus-within {
+    border-color: var(--border-focus);
 }
 
-input[type="text"]:focus,
-input[type="password"]:focus {
+.console-box textarea {
+    width: 100%;
+    border: none;
     outline: none;
-    border-color: var(--accent-indigo);
-    box-shadow: 0 0 10px rgba(99, 102, 241, 0.15);
-    background-color: rgba(15, 23, 42, 0.8);
+    resize: none;
+    font-family: var(--font-body);
+    font-size: 15px;
+    color: var(--text-primary);
+    background: transparent;
+    line-height: 1.5;
+    min-height: 50px;
 }
 
-.password-wrapper .icon-button {
-    position: absolute;
-    right: 8px;
+.console-box textarea::placeholder {
+    color: var(--text-muted);
+}
+
+/* Inside console drawer for attachments */
+.inner-shelf-preview,
+.mini-shelf-preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding-bottom: 4px;
+}
+
+/* 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;
+}
+
+/* Action button (e.g. + Circle) */
+.circle-btn-action {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
     background: transparent;
-    border: none;
     color: var(--text-secondary);
     cursor: pointer;
-    padding: 6px;
-    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition: var(--transition-smooth);
 }
 
-.password-wrapper .icon-button:hover {
+.circle-btn-action:hover {
+    background-color: var(--btn-light-bg);
     color: var(--text-primary);
-    background-color: rgba(255, 255, 255, 0.05);
-}
-
-/* Range input customizing */
-input[type="range"] {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-    outline: none;
+    border-color: var(--btn-light-hover);
 }
 
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 14px;
-    height: 14px;
+/* Send button (e.g. Up-Arrow inside dark circle) */
+.circle-btn-send {
+    width: 32px;
+    height: 32px;
     border-radius: 50%;
-    background: var(--accent-indigo);
+    border: none;
+    background-color: #1f2937;
+    color: #ffffff;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition: var(--transition-smooth);
-    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
 }
 
-input[type="range"]::-webkit-slider-thumb:hover {
-    background: var(--accent-teal);
-    box-shadow: 0 0 10px rgba(20, 184, 166, 0.6);
-    transform: scale(1.1);
+.circle-btn-send:hover {
+    background-color: #111827;
+    transform: scale(1.05);
 }
 
-/* Effort Radio Pills Picker */
-.effort-picker {
-    display: flex;
-    background-color: rgba(15, 23, 42, 0.4);
-    border: 1px solid var(--border-glass);
-    padding: 3px;
-    border-radius: var(--border-radius-sm);
-    gap: 2px;
+.circle-btn-send:active {
+    transform: scale(0.95);
 }
 
-.effort-pill {
-    flex: 1;
-    cursor: pointer;
-    text-align: center;
-    position: relative;
+/* Showcase Grid Layout (Matches Screenshot grid) */
+.showcase-section {
+    width: 100%;
 }
 
-.effort-pill input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
+.showcase-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
 }
 
-.effort-pill span {
-    display: block;
-    padding: 8px 0;
+.showcase-header h3 {
+    font-family: var(--font-heading);
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.view-all-link {
     font-size: 12px;
-    font-weight: 500;
-    border-radius: 6px;
     color: var(--text-secondary);
-    transition: var(--transition-smooth);
-    font-family: var(--font-heading);
+    text-decoration: none;
+    font-weight: 500;
 }
 
-.effort-pill input:checked + span {
-    background: var(--accent-indigo-gradient);
+.view-all-link:hover {
     color: var(--text-primary);
-    box-shadow: var(--shadow-sm);
 }
 
-.effort-pill:hover span:not(input:checked + span) {
-    color: var(--text-primary);
-    background-color: rgba(255, 255, 255, 0.03);
+.showcase-cards-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    width: 100%;
 }
 
-/* Upload zone interface */
-.upload-zone {
-    border: 1.5px dashed var(--border-glass);
+/* 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;
-    text-align: center;
-    cursor: pointer;
-    background: rgba(15, 23, 42, 0.2);
-    transition: var(--transition-smooth);
     display: flex;
     flex-direction: column;
-    align-items: center;
-    gap: 8px;
+    transition: var(--transition-smooth);
+    position: relative;
+    cursor: pointer;
 }
 
-.upload-zone:hover {
-    border-color: var(--accent-indigo);
-    background: rgba(99, 102, 241, 0.03);
+.showcase-card:hover {
+    box-shadow: var(--shadow-lg);
+    border-color: #d1d5db;
+}
+
+.card-icon-container {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--border-radius-sm);
+    background-color: var(--accent-blue-bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 14px;
 }
 
-.upload-zone.drag-active {
-    border-color: var(--accent-teal);
-    background: rgba(20, 184, 166, 0.06);
-    transform: scale(0.98);
+.card-title {
+    font-family: var(--font-heading);
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1.4;
+    color: var(--text-primary);
+    margin-bottom: 6px;
 }
 
-.upload-icon {
+.card-desc {
+    font-size: 11.5px;
     color: var(--text-secondary);
-    transition: var(--transition-smooth);
+    line-height: 1.4;
+    margin-bottom: 20px;
+    flex: 1;
 }
 
-.upload-zone:hover .upload-icon {
-    color: var(--accent-indigo);
-    transform: translateY(-2px);
+/* 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);
 }
 
-.upload-zone p {
-    font-size: 13px;
-    font-weight: 500;
+.card-action-btn:hover {
+    background-color: var(--btn-dark-hover);
+    transform: translateY(-1px);
 }
 
-.upload-zone p span {
-    color: var(--accent-indigo);
-    font-weight: 600;
+/* 2. Active Chat thread view styling */
+.chat-thread-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
 }
 
-.upload-limit {
-    font-size: 10px;
-    color: var(--text-muted);
+.chat-messages-feed {
+    flex: 1;
+    overflow-y: auto;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto;
 }
 
-/* Shelf Inventory */
-.shelf-inventory {
+/* Chat bubble aesthetics */
+.message-bubble {
     display: flex;
     flex-direction: column;
-    gap: 8px;
-    max-height: 200px;
-    overflow-y: auto;
-    padding-right: 4px;
-}
-
-.empty-shelf-text {
-    font-size: 11px;
-    color: var(--text-muted);
-    text-align: center;
-    padding: 10px 0;
-    font-style: italic;
-}
-
-.media-chip {
-    display: flex;
-    align-items: center;
-    background-color: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--border-radius-sm);
-    padding: 6px 10px;
-    gap: 10px;
-    transition: var(--transition-smooth);
-    position: relative;
-    overflow: hidden;
-}
-
-.media-chip:hover {
-    border-color: rgba(99, 102, 241, 0.3);
-    background-color: rgba(255, 255, 255, 0.05);
-}
-
-.media-chip-preview {
-    width: 32px;
-    height: 32px;
-    border-radius: 4px;
-    object-fit: cover;
-    background-color: #000;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.media-chip-preview img,
-.media-chip-preview video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.media-chip-details {
-    flex: 1;
-    min-width: 0;
-}
-
-.media-chip-name {
-    font-size: 12px;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.media-chip-meta {
-    font-size: 10px;
-    color: var(--text-muted);
-    display: flex;
-    gap: 8px;
-}
-
-.media-chip-remove {
-    background: transparent;
-    border: none;
-    color: var(--text-muted);
-    cursor: pointer;
-    padding: 4px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: var(--transition-smooth);
-}
-
-.media-chip-remove:hover {
-    color: var(--danger);
-    background-color: rgba(244, 63, 94, 0.1);
-}
-
-/* Recipes Grids */
-.recipes-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-}
-
-.recipe-card {
-    background-color: rgba(255, 255, 255, 0.02);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--border-radius-sm);
-    padding: 10px;
-    cursor: pointer;
-    transition: var(--transition-smooth);
-    display: flex;
-    gap: 8px;
-    align-items: flex-start;
-}
-
-.recipe-card:hover {
-    background-color: rgba(99, 102, 241, 0.05);
-    border-color: rgba(99, 102, 241, 0.25);
-    transform: translateY(-2px);
-}
-
-.recipe-icon {
-    font-size: 16px;
-    background: rgba(255, 255, 255, 0.03);
-    padding: 6px;
-    border-radius: 6px;
-}
-
-.recipe-details h3 {
-    font-family: var(--font-heading);
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-.recipe-details p {
-    font-size: 9px;
-    color: var(--text-muted);
-    line-height: 1.3;
-    margin-top: 2px;
-}
-
-/* Sidebar Footer area */
-.sidebar-footer {
-    padding: 16px 24px;
-    border-top: 1px solid var(--border-glass);
-}
-
-.connection-status {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 11px;
-    color: var(--text-secondary);
-}
-
-.status-indicator {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    position: relative;
-}
-
-.status-indicator.online {
-    background-color: var(--accent-teal);
-    box-shadow: 0 0 6px var(--accent-teal);
-}
-
-/* Main Chat Container Area */
-.chat-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: rgba(11, 15, 25, 0.5);
-}
-
-/* Chat Header */
-.chat-header {
-    padding: 18px 30px;
-    border-bottom: 1px solid var(--border-glass);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    backdrop-filter: blur(10px);
-    z-index: 10;
-}
-
-.header-main h2 {
-    font-family: var(--font-heading);
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
-.model-badge {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--accent-teal);
-    background-color: rgba(20, 184, 166, 0.08);
-    border: 1px solid rgba(20, 184, 166, 0.2);
-    padding: 1px 6px;
-    border-radius: 4px;
-    display: inline-block;
-    margin-top: 2px;
-}
-
-.flex-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Buttons */
-.btn {
-    border-radius: var(--border-radius-sm);
-    font-family: var(--font-heading);
-    font-weight: 500;
-    font-size: 12px;
-    cursor: pointer;
-    transition: var(--transition-smooth);
-    border: none;
-    outline: none;
-    gap: 6px;
-}
-
-.btn-secondary {
-    background-color: rgba(255, 255, 255, 0.04);
-    border: 1px solid var(--border-glass);
-    color: var(--text-primary);
-    padding: 8px 12px;
-}
-
-.btn-secondary:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-    border-color: rgba(255, 255, 255, 0.15);
-}
-
-.btn-icon {
-    background: transparent;
-    color: var(--text-secondary);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--border-radius-sm);
-    width: 38px;
-    height: 38px;
-}
-
-.btn-icon:hover {
-    color: var(--text-primary);
-    background-color: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.1);
-}
-
-.btn-primary {
-    background: var(--accent-indigo-gradient);
-    color: var(--text-primary);
-    padding: 8px 16px;
-    font-weight: 600;
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
-}
-
-.btn-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
-}
-
-.btn-primary:active {
-    transform: translateY(0);
-}
-
-/* Messages area */
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 30px;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-}
-
-/* Welcome Box styling */
-.welcome-box {
-    max-width: 600px;
-    margin: 40px auto;
-    background-color: var(--bg-glass);
-    border: 1px solid var(--border-glass);
-    padding: 40px;
-    border-radius: var(--border-radius-lg);
-    text-align: center;
-    box-shadow: var(--shadow-lg);
-    backdrop-filter: blur(16px);
-    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.welcome-icon {
-    font-size: 40px;
-    width: 70px;
-    height: 70px;
-    background: rgba(99, 102, 241, 0.1);
-    border: 1px solid rgba(99, 102, 241, 0.2);
-    border-radius: 50%;
-    margin: 0 auto 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
-}
-
-.welcome-box h2 {
-    font-family: var(--font-heading);
-    font-size: 22px;
-    font-weight: 700;
-    margin-bottom: 12px;
-}
-
-.welcome-box p {
-    color: var(--text-secondary);
-    font-size: 13.5px;
-    margin-bottom: 24px;
-    line-height: 1.5;
-}
-
-.feature-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    justify-content: center;
-}
-
-.tag {
-    font-size: 11px;
-    font-weight: 500;
-    background-color: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    padding: 4px 10px;
-    border-radius: 100px;
-    color: var(--text-secondary);
-}
-
-/* Chat bubble entries */
-.message-bubble {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    max-width: 80%;
-    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    gap: 6px;
+    max-width: 85%;
+    animation: slideUp 0.3s ease-out;
 }
 
 .message-bubble.user {
@@ -722,12 +489,13 @@ input[type="range"]::-webkit-slider-thumb:hover {
 
 .message-bubble.assistant {
     align-self: flex-start;
+    width: 100%;
 }
 
 .message-meta {
     font-size: 11px;
     color: var(--text-muted);
-    font-weight: 500;
+    font-weight: 600;
     margin: 0 4px;
 }
 
@@ -739,27 +507,25 @@ input[type="range"]::-webkit-slider-thumb:hover {
     padding: 14px 18px;
     border-radius: var(--border-radius-md);
     font-size: 14.5px;
-    line-height: 1.65;
-    position: relative;
+    line-height: 1.6;
     box-shadow: var(--shadow-sm);
 }
 
 .message-bubble.user .message-body {
-    background-color: rgba(99, 102, 241, 0.15);
-    border: 1px solid rgba(99, 102, 241, 0.25);
-    border-bottom-right-radius: 4px;
+    background-color: var(--btn-light-bg);
+    border: 1px solid var(--border-color);
     color: var(--text-primary);
+    border-bottom-right-radius: 4px;
 }
 
 .message-bubble.assistant .message-body {
-    background-color: var(--bg-glass);
-    border: 1px solid var(--border-glass);
-    border-bottom-left-radius: 4px;
+    background-color: var(--bg-card);
+    border: 1px solid var(--border-color);
     color: var(--text-primary);
-    backdrop-filter: blur(10px);
+    border-bottom-left-radius: 4px;
 }
 
-/* Rendered Multimodal media inside Chat Bubbles */
+/* Thumbnail Attachments inside bubbles */
 .bubble-attachments {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
@@ -771,8 +537,8 @@ input[type="range"]::-webkit-slider-thumb:hover {
 .bubble-attachment-card {
     border-radius: var(--border-radius-sm);
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background-color: #000;
+    border: 1px solid var(--border-color);
+    background-color: #fafafa;
     position: relative;
     aspect-ratio: 16/10;
 }
@@ -789,7 +555,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
     bottom: 0;
     left: 0;
     right: 0;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.6);
     color: #fff;
     font-size: 8px;
     text-align: center;
@@ -797,13 +563,13 @@ input[type="range"]::-webkit-slider-thumb:hover {
     font-family: var(--font-mono);
 }
 
-/* Collapsible Thought Process Box for reasoning models */
+/* Collagen Thoughts Box for reasoning steps */
 .thought-container {
-    margin-bottom: 12px;
-    border: 1px solid rgba(99, 102, 241, 0.15);
+    margin-bottom: 14px;
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius-sm);
     overflow: hidden;
-    background-color: rgba(99, 102, 241, 0.02);
+    background-color: #fafbfc;
 }
 
 .thought-header {
@@ -811,14 +577,14 @@ input[type="range"]::-webkit-slider-thumb:hover {
     justify-content: space-between;
     align-items: center;
     padding: 8px 12px;
-    background-color: rgba(99, 102, 241, 0.05);
+    background-color: #f3f4f6;
     cursor: pointer;
     user-select: none;
     transition: var(--transition-smooth);
 }
 
 .thought-header:hover {
-    background-color: rgba(99, 102, 241, 0.08);
+    background-color: #e5e7eb;
 }
 
 .thought-title-group {
@@ -826,15 +592,15 @@ input[type="range"]::-webkit-slider-thumb:hover {
     align-items: center;
     gap: 6px;
     font-family: var(--font-heading);
-    font-size: 11px;
+    font-size: 11.5px;
     font-weight: 600;
-    color: var(--accent-indigo);
+    color: var(--text-secondary);
 }
 
 .thought-timer {
     font-family: var(--font-mono);
     font-size: 10px;
-    color: var(--text-secondary);
+    color: var(--text-muted);
 }
 
 .thought-toggle-icon {
@@ -852,10 +618,10 @@ input[type="range"]::-webkit-slider-thumb:hover {
     font-family: var(--font-mono);
     font-size: 12px;
     color: var(--text-secondary);
-    background-color: rgba(8, 12, 20, 0.4);
-    border-top: 1px solid rgba(99, 102, 241, 0.1);
+    background-color: #ffffff;
+    border-top: 1px solid var(--border-color);
     white-space: pre-wrap;
-    max-height: 250px;
+    max-height: 200px;
     overflow-y: auto;
 }
 
@@ -863,22 +629,22 @@ input[type="range"]::-webkit-slider-thumb:hover {
     display: none;
 }
 
-/* Markdown typography rules within message bodies */
+/* Markdown tags within chat response body */
 .markdown-body h1,
 .markdown-body h2,
 .markdown-body h3 {
     margin-top: 14px;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
     font-family: var(--font-heading);
     font-weight: 600;
 }
 
-.markdown-body h1 { font-size: 18px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 4px; }
-.markdown-body h2 { font-size: 15px; }
-.markdown-body h3 { font-size: 13.5px; }
+.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 p {
-    margin-bottom: 12px;
+    margin-bottom: 8px;
 }
 
 .markdown-body p:last-child {
@@ -887,171 +653,485 @@ input[type="range"]::-webkit-slider-thumb:hover {
 
 .markdown-body code {
     font-family: var(--font-mono);
-    font-size: 12px;
-    background-color: rgba(255, 255, 255, 0.08);
-    padding: 2px 6px;
+    font-size: 11.5px;
+    background-color: var(--btn-light-bg);
+    padding: 2px 5px;
     border-radius: 4px;
-    color: var(--accent-teal);
+    color: var(--accent-blue);
 }
 
 .markdown-body pre {
-    margin: 14px 0;
+    margin: 12px 0;
     border-radius: var(--border-radius-sm);
     overflow: hidden;
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid var(--border-color);
 }
 
 .markdown-body pre code {
     display: block;
-    padding: 12px 14px;
+    padding: 12px;
     overflow-x: auto;
-    background-color: #0c101b !important;
+    background-color: #0f172a !important;
     color: #e2e8f0;
 }
 
 .markdown-body table {
     width: 100%;
     border-collapse: collapse;
-    margin: 14px 0;
-    font-size: 13px;
+    margin: 12px 0;
+    font-size: 12.5px;
 }
 
 .markdown-body th,
 .markdown-body td {
-    border: 1px solid rgba(255,255,255,0.08);
-    padding: 8px 12px;
+    border: 1px solid var(--border-color);
+    padding: 6px 10px;
     text-align: left;
 }
 
 .markdown-body th {
-    background-color: rgba(255,255,255,0.03);
+    background-color: var(--bg-primary);
     font-weight: 600;
 }
 
-.markdown-body ul,
-.markdown-body ol {
-    margin-left: 20px;
-    margin-bottom: 12px;
+/* Chat Bottom Mini Input bar */
+.chat-mini-footer {
+    padding: 16px 24px;
+    background-color: var(--bg-workspace);
+    border-top: 1px solid var(--border-color);
 }
 
-.markdown-body li {
-    margin-bottom: 4px;
+.chat-mini-footer .console-box {
+    max-width: 800px;
+    margin: 0 auto;
+    box-shadow: var(--shadow-md);
+    padding: 10px 16px;
+    border-radius: var(--border-radius-md);
 }
 
-/* Chat Input Console Footer */
-.chat-footer {
-    padding: 20px 30px;
-    border-top: 1px solid var(--border-glass);
+/* Right Sidebar: Settings (Matches Right Mockup blocks) */
+.sidebar-right {
+    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;
 }
 
-/* Quick upload preview shelf */
-.quick-shelf-preview {
+.sidebar-right.collapsed {
+    width: 0;
+    overflow: hidden;
+    border-left: none;
+}
+
+.right-sidebar-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
     display: flex;
-    gap: 8px;
-    margin-bottom: 12px;
-    overflow-x: auto;
-    padding-bottom: 4px;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.quick-preview-item {
-    width: 48px;
-    height: 48px;
-    border-radius: 6px;
-    border: 1.5px solid var(--accent-indigo);
-    overflow: hidden;
-    position: relative;
-    flex-shrink: 0;
-    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
+.right-sidebar-header h3 {
+    font-family: var(--font-heading);
+    font-size: 14px;
+    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);
 }
 
-.quick-preview-item img,
-.quick-preview-item video {
+.btn-clear-chat:hover {
+    background-color: var(--btn-light-bg);
+    color: var(--text-primary);
+}
+
+.sidebar-right-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+/* 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;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.flex-1-card {
+    flex: 1;
+    min-height: 200px;
+}
+
+.card-block-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.block-title {
+    font-family: var(--font-heading);
+    font-size: 12.5px;
+    font-weight: 700;
+    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 */
+input[type="password"] {
     width: 100%;
-    height: 100%;
-    object-fit: cover;
+    background-color: #fafafa;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-sm);
+    color: var(--text-primary);
+    padding: 8px 12px;
+    font-size: 12.5px;
+    font-family: var(--font-body);
+    transition: var(--transition-smooth);
 }
 
-.quick-preview-badge {
+input[type="password"]:focus {
+    outline: none;
+    border-color: var(--border-focus);
+    background-color: #ffffff;
+}
+
+.password-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.password-wrapper input {
+    padding-right: 36px;
+}
+
+.visibility-toggle {
     position: absolute;
-    top: 2px;
-    right: 2px;
-    background-color: var(--accent-teal);
+    right: 8px;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.visibility-toggle:hover {
+    color: var(--text-primary);
+}
+
+/* Choice Picker Pills */
+.effort-picker {
+    display: flex;
+    background-color: #fafafa;
+    border: 1px solid var(--border-color);
+    padding: 3px;
+    border-radius: var(--border-radius-sm);
+    gap: 2px;
+}
+
+.effort-pill {
+    flex: 1;
+    cursor: pointer;
+    text-align: center;
+    position: relative;
+}
+
+.effort-pill input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.effort-pill span {
+    display: block;
+    padding: 6px 0;
+    font-size: 11.5px;
+    font-weight: 500;
+    border-radius: 4px;
+    color: var(--text-secondary);
+    transition: var(--transition-smooth);
+    font-family: var(--font-heading);
+}
+
+.effort-pill input:checked + span {
+    background-color: #111827;
+    color: #ffffff;
+}
+
+.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%;
-    border: 1px solid #fff;
+    background: #111827;
+    cursor: pointer;
+    transition: var(--transition-smooth);
 }
 
-/* Actual input bar layout */
-.input-panel {
+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;
-    background-color: rgba(15, 23, 42, 0.4);
-    border: 1px solid var(--border-glass);
-    border-radius: var(--border-radius-md);
-    padding: 6px 10px;
+    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;
+}
+
+.shelf-list {
+    display: flex;
+    flex-direction: column;
     gap: 8px;
+    overflow-y: auto;
+}
+
+.empty-shelf-text {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-align: center;
+    padding: 10px 0;
+    font-style: italic;
+}
+
+.media-chip {
+    display: flex;
+    align-items: center;
+    background-color: #fafafa;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-sm);
+    padding: 6px 10px;
+    gap: 10px;
     transition: var(--transition-smooth);
+    position: relative;
+}
+
+.media-chip-preview {
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    object-fit: cover;
+    background-color: #eaeaea;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
 }
 
-.input-panel:focus-within {
-    border-color: var(--accent-indigo);
-    box-shadow: 0 0 14px rgba(99, 102, 241, 0.1);
-    background-color: rgba(15, 23, 42, 0.8);
+.media-chip-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
-.textarea-wrapper {
+.media-chip-details {
     flex: 1;
+    min-width: 0;
 }
 
-.input-panel textarea {
-    width: 100%;
+.media-chip-name {
+    font-size: 11px;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-primary);
+}
+
+.media-chip-meta {
+    font-size: 9.5px;
+    color: var(--text-muted);
+    display: flex;
+    gap: 6px;
+}
+
+.media-chip-remove {
     background: transparent;
     border: none;
-    outline: none;
-    color: var(--text-primary);
-    font-family: var(--font-body);
-    font-size: 14px;
-    padding: 10px 4px;
-    resize: none;
-    max-height: 120px;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+}
+
+.media-chip-remove:hover {
+    color: var(--danger);
+    background-color: #fee2e2;
 }
 
-.btn-send {
-    width: 38px;
-    height: 38px;
+/* Quick Shelf Attachment Thumbnail inside textarea */
+.quick-preview-item {
+    width: 36px;
+    height: 36px;
     border-radius: var(--border-radius-sm);
-    padding: 0;
+    border: 1px solid var(--border-color);
+    overflow: hidden;
+    position: relative;
     flex-shrink: 0;
 }
 
-/* Loading animations spinner */
-.spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid rgba(255, 255, 255, 0.3);
-    border-top: 2px solid #fff;
+.quick-preview-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.quick-preview-badge {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background-color: var(--accent-blue);
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
-    animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+/* Right Sidebar Footer indicator */
+.right-sidebar-footer {
+    padding: 12px 20px;
+    border-top: 1px solid var(--border-color);
 }
 
-@keyframes pulse {
-    0%, 100% { transform: scale(1); opacity: 1; }
-    50% { transform: scale(1.05); opacity: 0.85; }
+.status-indicator-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    color: var(--text-secondary);
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+.status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+}
+
+.status-dot.online {
+    background-color: #10b981;
+}
+
+/* Loading animations */
+.spinner-light {
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-top: 2px solid #ffffff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
 @keyframes slideUp {
-    from { opacity: 0; transform: translateY(20px); }
+    from { opacity: 0; transform: translateY(10px); }
     to { opacity: 1; transform: translateY(0); }
 }