Complete UI rebuild: switch to gradio.Server static-file serving, fix mobile layout from reference UI

app.py

@@ -4,44 +4,45 @@ import uuid
 import time
 import re
 from pathlib import Path
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import Server
 from openai import OpenAI
-import gradio as gr
 
 # Default system prompt for DeepSeek V4 Flash
 DEFAULT_SYSTEM_PROMPT = "You are DeepSeek, a helpful AI assistant powered by DeepSeek V4 Flash. You provide accurate, detailed, and thoughtful responses."
 
 # ── In-memory per-user session storage ──────────────────────────────────
-# Keyed by username. Each user has:
-#   sessions: { session_id: { "title": str, "messages": [], "updated_at": float } }
-#   active_session: str | None
 USER_DATA = {}
 
 def get_user_sessions(username):
-    """Return or create the session dict for a user."""
     if username not in USER_DATA:
         USER_DATA[username] = {"sessions": {}, "active_session": None}
     return USER_DATA[username]
 
-# ── Core chat function ──────────────────────────────────────────────────
+# ── Initialize Gradio Server (FastAPI subclass) ─────────────────────────
+app = Server()
+
+# Create static directory if it doesn't exist
+STATIC_DIR = Path(__file__).parent / "static"
+os.makedirs(STATIC_DIR, exist_ok=True)
+
+
+# ── API Endpoint: Chat ──────────────────────────────────────────────────
+@app.api(name="chat_with_deepseek")
 def chat_with_deepseek(
     messages_json: str,
     reasoning_effort: str = "medium",
     max_tokens: str = "2048",
     temperature: str = "0.7",
     system_prompt: str = "",
-    profile: gr.OAuthProfile | None = None,
 ) -> str:
-    """
-    API endpoint to call DeepSeek V4 Flash model via OpenAI-compatible API.
-    Takes conversation messages as a JSON-serialized string, and parameters.
-    Returns the assistant response along with any reasoning details.
-    """
     try:
         messages = json.loads(messages_json)
         max_tokens = int(max_tokens)
         temperature = float(temperature)
 
-        # Load key from secure server-side environment variable
         key = os.environ.get("SILICONFLOW_API_KEY", "").strip()
         if not key:
             return json.dumps({
@@ -49,22 +50,15 @@ def chat_with_deepseek(
                 "message": "SILICONFLOW_API_KEY environment variable is not configured on the server."
             })
 
-        # Initialize OpenAI client configured for SiliconFlow
         client = OpenAI(
             api_key=key,
             base_url="https://api.siliconflow.com/v1",
         )
 
-        # Prepend system prompt if provided or use default
         sys_prompt = system_prompt.strip() if system_prompt and system_prompt.strip() else DEFAULT_SYSTEM_PROMPT
-
-        # Remove any existing system messages from conversation history
         messages_no_system = [m for m in messages if m.get("role") != "system"]
-
-        # Build final message list with system prompt at the top
         final_messages = [{"role": "system", "content": sys_prompt}] + messages_no_system
 
-        # Prepare parameters for the API call
         params = {
             "model": "deepseek-ai/DeepSeek-V4-Flash",
             "messages": final_messages,
@@ -72,20 +66,14 @@ def chat_with_deepseek(
             "temperature": temperature
         }
 
-        # Add reasoning effort if applicable
         if reasoning_effort in ["low", "medium", "high"]:
             params["reasoning_effort"] = reasoning_effort
 
-        # Perform completion request
         response = client.chat.completions.create(**params)
 
-        # Extract assistant content
         content = response.choices[0].message.content
-
-        # Capture reasoning content if returned by the API
         reasoning_content = getattr(response.choices[0].message, "reasoning_content", "")
 
-        # If the model returns thoughts inside <think/> tags, extract them
         if not reasoning_content and content and "<think" in content and "</think" in content:
             think_match = re.search(r'<think[^>]*>(.*?)</think', content, re.DOTALL)
             if think_match:
@@ -104,27 +92,31 @@ def chat_with_deepseek(
             "message": str(e)
         })
 
-# ── Session / History API endpoints ─────────────────────────────────────
-def get_user_info(profile: gr.OAuthProfile | None) -> str:
+
+# ── API Endpoint: Get User Info (OAuth) ────────────────────────────────
+@app.api(name="get_user_info")
+def get_user_info(profile) -> str:
     """Return the logged-in user's name, or empty string if not logged in."""
+    # The Gradio Server passes the OAuth profile automatically
     if profile is None:
         return json.dumps({"logged_in": False, "username": ""})
-    return json.dumps({"logged_in": True, "username": profile.name})
+    return json.dumps({"logged_in": True, "username": getattr(profile, 'name', '')})
+
 
+# ── API Endpoint: Save Chat Session ────────────────────────────────────
+@app.api(name="save_chat_session")
 def save_chat_session(
     messages_json: str,
     title: str,
     session_id: str,
-    profile: gr.OAuthProfile | None = None,
+    profile = None,
 ) -> str:
-    """Save the current conversation history for the logged-in user."""
     if profile is None:
         return json.dumps({"status": "error", "message": "Not logged in"})
 
-    username = profile.name
+    username = getattr(profile, 'name', '')
     ud = get_user_sessions(username)
 
-    # If no session_id provided, create new
     if not session_id or session_id == "new":
         sid = str(uuid.uuid4())[:8]
     else:
@@ -132,7 +124,6 @@ def save_chat_session(
 
     messages = json.loads(messages_json) if messages_json else []
 
-    # Auto-generate title from first user message if not provided
     if not title or title == "New Chat":
         for m in messages:
             if m.get("role") == "user":
@@ -150,15 +141,17 @@ def save_chat_session(
 
     return json.dumps({"status": "success", "session_id": sid, "title": title})
 
+
+# ── API Endpoint: Load Chat Session ────────────────────────────────────
+@app.api(name="load_chat_session")
 def load_chat_session(
     session_id: str,
-    profile: gr.OAuthProfile | None = None,
+    profile = None,
 ) -> str:
-    """Load a saved conversation session for the logged-in user."""
     if profile is None:
         return json.dumps({"status": "error", "message": "Not logged in"})
 
-    username = profile.name
+    username = getattr(profile, 'name', '')
     ud = get_user_sessions(username)
 
     if session_id not in ud["sessions"]:
@@ -174,12 +167,14 @@ def load_chat_session(
         "messages": sess["messages"]
     })
 
-def list_chat_sessions(profile: gr.OAuthProfile | None = None) -> str:
-    """List all saved chat sessions for the logged-in user, newest first."""
+
+# ── API Endpoint: List Chat Sessions ───────────────────────────────────
+@app.api(name="list_chat_sessions")
+def list_chat_sessions(profile = None) -> str:
     if profile is None:
         return json.dumps({"status": "error", "message": "Not logged in", "sessions": []})
 
-    username = profile.name
+    username = getattr(profile, 'name', '')
     ud = get_user_sessions(username)
 
     sessions = []
@@ -197,15 +192,17 @@ def list_chat_sessions(profile: gr.OAuthProfile | None = None) -> str:
 
     return json.dumps({"status": "success", "sessions": sessions})
 
+
+# ── API Endpoint: Delete Chat Session ──────────────────────────────────
+@app.api(name="delete_chat_session")
 def delete_chat_session(
     session_id: str,
-    profile: gr.OAuthProfile | None = None,
+    profile = None,
 ) -> str:
-    """Delete a saved chat session."""
     if profile is None:
         return json.dumps({"status": "error", "message": "Not logged in"})
 
-    username = profile.name
+    username = getattr(profile, 'name', '')
     ud = get_user_sessions(username)
 
     if session_id in ud["sessions"]:
@@ -216,136 +213,23 @@ def delete_chat_session(
     return json.dumps({"status": "success"})
 
 
-# ── Build Gradio UI ─────────────────────────────────────────────────────
-# Read custom frontend files
-STATIC_DIR = Path(__file__).parent / "static"
-
-def read_static(filename):
-    path = STATIC_DIR / filename
-    if path.exists():
-        return path.read_text(encoding="utf-8")
-    return ""
-
-custom_css = read_static("style.css")
-custom_html_content = read_static("index.html")
-custom_js = read_static("app.js")
-
-# Extract the <body> inner content from the HTML
-def extract_body(html_str):
-    m = re.search(r'<body[^>]*>(.*?)</body>', html_str, re.DOTALL)
-    if m:
-        return m.group(1).strip()
-    return html_str
-
-body_html = extract_body(custom_html_content)
-
-# Inject the JS inline at the end of the body
-inject_script = f"""
-<script type="module">
-// Inline app.js
-{custom_js}
-</script>
-"""
-
-full_injected_html = body_html + inject_script
-
-# Minimal Gradio overrides to make the HTML component full viewport
-gradio_overrides = """
-/* Make Gradio container fill the viewport */
-.gradio-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
-.gr-app, .main, .wrap { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
-html, body { overflow: hidden !important; }
-"""
-
-# ── Create the Gradio Blocks app ─────────────��──────────────────────────
-with gr.Blocks(
-    title="DeepSeek V4 Flash",
-    css=gradio_overrides + custom_css,
-    head="""
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-    <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@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
-    <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>
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    """,
-) as demo:
-
-    # ── Custom HTML frontend ──
-    app_html = gr.HTML(value=full_injected_html)
-
-    # ── Hidden components used as inputs/outputs for API endpoints ──
-    # Chat API
-    chat_in_msg = gr.Textbox(visible=False)
-    chat_in_effort = gr.Textbox(visible=False)
-    chat_in_tokens = gr.Textbox(visible=False)
-    chat_in_temp = gr.Textbox(visible=False)
-    chat_in_sysprompt = gr.Textbox(visible=False)
-    chat_out = gr.Textbox(visible=False)
-    chat_btn = gr.Button(visible=False)
-    chat_btn.click(
-        fn=chat_with_deepseek,
-        inputs=[chat_in_msg, chat_in_effort, chat_in_tokens, chat_in_temp, chat_in_sysprompt],
-        outputs=[chat_out],
-        api_name="chat_with_deepseek"
-    )
-
-    # User info API
-    userinfo_out = gr.Textbox(visible=False)
-    userinfo_btn = gr.Button(visible=False)
-    userinfo_btn.click(
-        fn=get_user_info,
-        inputs=[],
-        outputs=[userinfo_out],
-        api_name="get_user_info"
-    )
-
-    # Save session API
-    save_in_msg = gr.Textbox(visible=False)
-    save_in_title = gr.Textbox(visible=False)
-    save_in_sid = gr.Textbox(visible=False)
-    save_out = gr.Textbox(visible=False)
-    save_btn = gr.Button(visible=False)
-    save_btn.click(
-        fn=save_chat_session,
-        inputs=[save_in_msg, save_in_title, save_in_sid],
-        outputs=[save_out],
-        api_name="save_chat_session"
+# ── Serve the main HTML page ────────────────────────────────────────────
+@app.get("/")
+async def homepage():
+    html_path = STATIC_DIR / "index.html"
+    if html_path.exists():
+        with open(html_path, "r", encoding="utf-8") as f:
+            return HTMLResponse(content=f.read(), status_code=200)
+    return HTMLResponse(
+        content="<h1>Frontend is building. Please refresh in a few seconds...</h1>",
+        status_code=200
     )
 
-    # Load session API
-    load_in_sid = gr.Textbox(visible=False)
-    load_out = gr.Textbox(visible=False)
-    load_btn = gr.Button(visible=False)
-    load_btn.click(
-        fn=load_chat_session,
-        inputs=[load_in_sid],
-        outputs=[load_out],
-        api_name="load_chat_session"
-    )
 
-    # List sessions API
-    list_out = gr.Textbox(visible=False)
-    list_btn = gr.Button(visible=False)
-    list_btn.click(
-        fn=list_chat_sessions,
-        inputs=[],
-        outputs=[list_out],
-        api_name="list_chat_sessions"
-    )
+# ── Mount static folder for CSS, JS, and image assets ──────────────────
+app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
 
-    # Delete session API
-    delete_in_sid = gr.Textbox(visible=False)
-    delete_out = gr.Textbox(visible=False)
-    delete_btn = gr.Button(visible=False)
-    delete_btn.click(
-        fn=delete_chat_session,
-        inputs=[delete_in_sid],
-        outputs=[delete_out],
-        api_name="delete_chat_session"
-    )
 
-# ── Launch ───────────────────────────────────────────────────────────────
+# ── Launch ──────────────────────────────────────────────────────────────
 if __name__ == "__main__":
-    demo.launch(show_error=True)
+    app.launch(show_error=True)

static/app.js

@@ -1,6 +1,6 @@
 import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
-// Global Application State Management
+// ── Global Application State ──────────────────────────────────────────
 const STATE = {
     reasoningEffort: "medium",
     maxTokens: 2048,
@@ -12,75 +12,16 @@ const STATE = {
     isThinking: false,
     rpMode: true,
     autoHideThinking: true,
-    // Auth state
     username: "",
     isLoggedIn: false,
-    // Chat history state
     currentSessionId: null,
     chatSessions: []
 };
 
-// DOM Elements hooks
-const dom = {
-    effortRadioButtons: document.querySelectorAll('input[name="reasoning-effort"]'),
-    maxTokensSlider: document.getElementById("max-tokens-slider"),
-    maxTokensVal: document.getElementById("max-tokens-val"),
-    temperatureSlider: document.getElementById("temperature-slider"),
-    temperatureVal: document.getElementById("temperature-val"),
-    systemPromptInput: document.getElementById("system-prompt-input"),
-
-    // Left Sidebar
-    sidebarLeft: document.getElementById("sidebar-left"),
-    sidebarOverlayLeft: document.getElementById("sidebar-overlay-left"),
-    btnToggleLeft: document.getElementById("btn-toggle-left"),
-    btnCloseLeft: document.getElementById("btn-close-left"),
-
-    // Right Sidebar Drawer
-    sidebarRight: document.getElementById("sidebar-right"),
-    sidebarOverlay: document.getElementById("sidebar-overlay"),
-    btnToggleRight: document.getElementById("btn-toggle-right"),
-    btnCloseDrawer: document.getElementById("btn-close-drawer"),
-
-    // User profile
-    userProfileSection: document.getElementById("user-profile-section"),
-    userAvatar: document.getElementById("user-avatar"),
-    userDisplayName: document.getElementById("user-display-name"),
-    hfLoginBtn: document.getElementById("hf-login-btn"),
-
-    // Chat history
-    chatHistoryList: document.getElementById("chat-history-list"),
-
-    // 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 elements
-    fileUploader: document.getElementById("file-uploader"),
-    shelfList: document.getElementById("shelf-list"),
-
-    // Action Resets
-    menuNewChat: document.getElementById("menu-new-chat"),
-
-    // Showcase recipe chips
-    recipeChips: document.querySelectorAll(".recipe-chip")
-};
+// ── DOM Element Hooks ─────────────────────────────────────────────────
+const dom = {};
 
-// Markdown configuration
+// ── Markdown Configuration ────────────────────────────────────────────
 marked.setOptions({
     breaks: true,
     highlight: function(code, lang) {
@@ -89,11 +30,11 @@ marked.setOptions({
     }
 });
 
-// RP (Roleplay) Markdown Processor
+// ── RP (Roleplay) Markdown Processor ──────────────────────────────────
 function processRpMarkdown(text) {
     if (!text) return text;
 
-    // Protect code blocks from RP processing
+    // Protect code blocks
     const codeBlocks = [];
     text = text.replace(/(```[\s\S]*?```|`[^`]+`)/g, (match) => {
         codeBlocks.push(match);
@@ -107,21 +48,21 @@ function processRpMarkdown(text) {
         return `%%HTMLBLOCK_${htmlBlocks.length - 1}%%`;
     });
 
-    // Process strikethrough ~~text~~ -> OOC styling (done first to avoid conflicts)
+    // Process strikethrough ~~text~~ -> OOC styling
     text = text.replace(/~~([^~]+)~~/g, '<span class="rp-ooc">$1</span>');
 
-    // Process bold **text** (must come before italic)
+    // Process bold **text**
     text = text.replace(/\*\*([^*]+)\*\*/g, '<strong class="rp-bold">$1</strong>');
 
     // Process italic *text* -> narration styling
     text = text.replace(/(?<!\*)\*(?!\*)([^*\n]+)\*(?!\*)/g, '<em class="rp-narration">$1</em>');
 
-    // Process dialogue: "text" with smart quotes or regular quotes
+    // Process dialogue: "text"
     text = text.replace(/[\u201C\u201E"]([^"\u201D\n]+)[\u201D"]([^"\u201C\u201E]|$)/g, (match, dialogue, after) => {
         return `<span class="rp-dialogue">\u201C${dialogue}\u201D</span>${after}`;
     });
 
-    // Process narrative dividers: --- or *** or ___ on their own line
+    // Process narrative dividers
     text = text.replace(/^(---|\*\*\*|___)$/gm, '<hr class="rp-divider">');
 
     // Process OOC markers: ((text))
@@ -140,17 +81,16 @@ function processRpMarkdown(text) {
     return text;
 }
 
-// Combined markdown renderer that applies RP processing if enabled
+// Combined markdown renderer
 function renderMarkdown(content) {
-    let html = marked.parse(content);
     if (STATE.rpMode) {
         const rpProcessed = processRpMarkdown(content);
-        html = marked.parse(rpProcessed);
+        return marked.parse(rpProcessed);
     }
-    return html;
+    return marked.parse(content);
 }
 
-// ── Auth Functions ──────────────────────────────────────────────────────
+// ── Auth Functions ────────────────────────────────────────────────────
 async function checkUserInfo() {
     try {
         if (!STATE.gradioClient) return;
@@ -174,44 +114,42 @@ async function checkUserInfo() {
 }
 
 function updateAuthUI() {
+    const userAvatar = document.getElementById("user-avatar");
+    const userDisplayName = document.getElementById("user-display-name");
+    const hfLoginBtn = document.getElementById("hf-login-btn");
+
     if (STATE.isLoggedIn) {
-        if (dom.userAvatar) {
-            dom.userAvatar.textContent = STATE.username.charAt(0).toUpperCase();
-            dom.userAvatar.classList.add("logged-in");
-        }
-        if (dom.userDisplayName) {
-            dom.userDisplayName.textContent = STATE.username;
+        if (userAvatar) {
+            userAvatar.textContent = STATE.username.charAt(0).toUpperCase();
+            userAvatar.classList.add("logged-in");
         }
-        if (dom.hfLoginBtn) {
-            dom.hfLoginBtn.textContent = "Sign out";
-            dom.hfLoginBtn.classList.add("logged-in");
+        if (userDisplayName) userDisplayName.textContent = STATE.username;
+        if (hfLoginBtn) {
+            hfLoginBtn.textContent = "Sign out";
+            hfLoginBtn.classList.add("logged-in");
         }
     } else {
-        if (dom.userAvatar) {
-            dom.userAvatar.textContent = "?";
-            dom.userAvatar.classList.remove("logged-in");
+        if (userAvatar) {
+            userAvatar.textContent = "?";
+            userAvatar.classList.remove("logged-in");
         }
-        if (dom.userDisplayName) {
-            dom.userDisplayName.textContent = "Not logged in";
-        }
-        if (dom.hfLoginBtn) {
-            dom.hfLoginBtn.textContent = "Sign in with HuggingFace";
-            dom.hfLoginBtn.classList.remove("logged-in");
+        if (userDisplayName) userDisplayName.textContent = "Not logged in";
+        if (hfLoginBtn) {
+            hfLoginBtn.textContent = "Sign in with HuggingFace";
+            hfLoginBtn.classList.remove("logged-in");
         }
     }
 }
 
 function handleLoginLogout() {
     if (STATE.isLoggedIn) {
-        // Logout: redirect to Gradio's logout endpoint
         window.location.href = "/logout";
     } else {
-        // Login: redirect to Gradio's OAuth login endpoint
         window.location.href = "/login";
     }
 }
 
-// ── Chat History Functions ──────────────────────────────────────────────
+// ── Chat History Functions ────────────────────────────────────────────
 async function loadChatHistory() {
     if (!STATE.isLoggedIn || !STATE.gradioClient) return;
     try {
@@ -229,18 +167,18 @@ async function loadChatHistory() {
 }
 
 function renderChatHistory() {
-    if (!dom.chatHistoryList) return;
+    const listEl = document.getElementById("chat-history-list");
+    if (!listEl) return;
 
     if (STATE.chatSessions.length === 0) {
-        dom.chatHistoryList.innerHTML = '<div class="empty-history-text">No chat history yet.<br>Start a conversation!</div>';
+        listEl.innerHTML = '<div class="empty-history-text">No chat history yet.<br>Start a conversation!</div>';
         return;
     }
 
-    dom.chatHistoryList.innerHTML = "";
+    listEl.innerHTML = "";
     STATE.chatSessions.forEach(session => {
         const item = document.createElement("div");
         item.className = "chat-history-item" + (session.id === STATE.currentSessionId ? " active" : "");
-        item.dataset.sessionId = session.id;
 
         const timeAgo = formatTimeAgo(session.updated_at);
 
@@ -254,18 +192,13 @@ function renderChatHistory() {
             </button>
         `;
 
-        // Click to load session
-        const contentEl = item.querySelector(".history-item-content");
-        contentEl.addEventListener("click", () => loadSession(session.id));
-
-        // Delete button
-        const deleteBtn = item.querySelector(".history-item-delete");
-        deleteBtn.addEventListener("click", (e) => {
+        item.querySelector(".history-item-content").addEventListener("click", () => loadSession(session.id));
+        item.querySelector(".history-item-delete").addEventListener("click", (e) => {
             e.stopPropagation();
             deleteSession(session.id);
         });
 
-        dom.chatHistoryList.appendChild(item);
+        listEl.appendChild(item);
     });
 }
 
@@ -288,12 +221,9 @@ async function loadSession(sessionId) {
         if (data.status === "success") {
             STATE.currentSessionId = data.session_id;
             STATE.conversationHistory = data.messages;
-
-            // Rebuild the chat UI from the loaded messages
             rebuildChatFromHistory(data.messages);
-
-            // Highlight active session in sidebar
             renderChatHistory();
+            toggleLeftSidebar(false);
         }
     } catch (e) {
         console.error("Failed to load session:", e);
@@ -301,21 +231,21 @@ async function loadSession(sessionId) {
 }
 
 function rebuildChatFromHistory(messages) {
-    // Clear current feed
-    dom.chatMessagesFeed.innerHTML = "";
+    const feed = document.getElementById("chat-messages-feed");
+    const chatContainer = document.getElementById("chat-thread-container");
+    const dashboard = document.getElementById("studio-dashboard");
+
+    feed.innerHTML = "";
 
     if (messages.length === 0) {
-        // Show dashboard
-        dom.chatThreadContainer.style.display = "none";
-        dom.studioDashboard.style.display = "flex";
+        chatContainer.style.display = "none";
+        dashboard.style.display = "flex";
         return;
     }
 
-    // Show chat thread
-    dom.studioDashboard.style.display = "none";
-    dom.chatThreadContainer.style.display = "flex";
+    dashboard.style.display = "none";
+    chatContainer.style.display = "flex";
 
-    // Rebuild message bubbles
     messages.forEach(msg => {
         if (msg.role === "user") {
             const text = typeof msg.content === "string" ? msg.content : msg.content.map(c => c.text || "").join(" ");
@@ -334,9 +264,6 @@ function appendAssistantBubble(content) {
     bubble.className = "message-bubble assistant";
     bubble.id = id;
 
-    const startCollapsed = STATE.autoHideThinking ? " collapsed" : "";
-    const toggleIcon = STATE.autoHideThinking ? "▶" : "▼";
-
     bubble.innerHTML = `
         <div class="message-meta">DeepSeek V4 Flash</div>
         <div class="message-body">
@@ -346,14 +273,12 @@ function appendAssistantBubble(content) {
         </div>
     `;
 
-    dom.chatMessagesFeed.appendChild(bubble);
+    const feed = document.getElementById("chat-messages-feed");
+    feed.appendChild(bubble);
 
-    // Highlight code blocks
     const textBox = document.getElementById(`${id}-text-box`);
     if (textBox) {
-        textBox.querySelectorAll("pre code").forEach((el) => {
-            hljs.highlightElement(el);
-        });
+        textBox.querySelectorAll("pre code").forEach((el) => hljs.highlightElement(el));
         addCopyButtons(textBox);
     }
 }
@@ -390,114 +315,83 @@ async function deleteSession(sessionId) {
     if (!STATE.gradioClient) return;
     try {
         await STATE.gradioClient.predict("/delete_chat_session", [sessionId]);
-
-        // If we deleted the active session, go back to dashboard
         if (sessionId === STATE.currentSessionId) {
             resetSandbox();
         }
-
         await loadChatHistory();
     } catch (e) {
         console.error("Failed to delete session:", e);
     }
 }
 
-// Setup Initial State & Event Handlers
+// ── Initialize Application ────────────────────────────────────────────
 async function initializeApp() {
-    // Re-query all DOM elements to ensure they are fully resolved
-    dom.effortRadioButtons = document.querySelectorAll('input[name="reasoning-effort"]');
-    dom.maxTokensSlider = document.getElementById("max-tokens-slider");
-    dom.maxTokensVal = document.getElementById("max-tokens-val");
-    dom.temperatureSlider = document.getElementById("temperature-slider");
-    dom.temperatureVal = document.getElementById("temperature-val");
-    dom.systemPromptInput = document.getElementById("system-prompt-input");
-    dom.sidebarLeft = document.getElementById("sidebar-left");
-    dom.sidebarOverlayLeft = document.getElementById("sidebar-overlay-left");
-    dom.btnToggleLeft = document.getElementById("btn-toggle-left");
-    dom.btnCloseLeft = document.getElementById("btn-close-left");
-    dom.sidebarRight = document.getElementById("sidebar-right");
-    dom.sidebarOverlay = document.getElementById("sidebar-overlay");
-    dom.btnToggleRight = document.getElementById("btn-toggle-right");
-    dom.btnCloseDrawer = document.getElementById("btn-close-drawer");
-    dom.userProfileSection = document.getElementById("user-profile-section");
-    dom.userAvatar = document.getElementById("user-avatar");
-    dom.userDisplayName = document.getElementById("user-display-name");
-    dom.hfLoginBtn = document.getElementById("hf-login-btn");
-    dom.chatHistoryList = document.getElementById("chat-history-list");
-    dom.studioDashboard = document.getElementById("studio-dashboard");
-    dom.chatThreadContainer = document.getElementById("chat-thread-container");
-    dom.chatMessagesFeed = document.getElementById("chat-messages-feed");
-    dom.studioPromptInput = document.getElementById("studio-prompt-input");
-    dom.innerShelfPreview = document.getElementById("inner-shelf-preview");
-    dom.studioUploadTrigger = document.getElementById("studio-upload-trigger");
-    dom.studioSendBtn = document.getElementById("studio-send-button");
-    dom.studioSpinner = document.getElementById("studio-spinner");
-    dom.miniPromptInput = document.getElementById("mini-prompt-input");
-    dom.miniShelfPreview = document.getElementById("mini-shelf-preview");
-    dom.miniUploadTrigger = document.getElementById("mini-upload-trigger");
-    dom.miniSendBtn = document.getElementById("mini-send-button");
-    dom.miniSpinner = document.getElementById("mini-spinner");
-    dom.fileUploader = document.getElementById("file-uploader");
-    dom.shelfList = document.getElementById("shelf-list");
-    dom.menuNewChat = document.getElementById("menu-new-chat");
-    dom.recipeChips = document.querySelectorAll(".recipe-chip");
-
-    // 1. Connect Gradio Client in background (Non-blocking)
+    // 1. Connect Gradio Client
     Client.connect(window.location.origin)
         .then(app => {
             STATE.gradioClient = app;
             console.log("Successfully connected to Gradio backend.");
-            // Check user auth status
             checkUserInfo();
         })
         .catch(e => {
             console.error("Gradio Client Connection Failed:", e);
         });
 
-    // 2. Register Left Sidebar (Chat History) Events
-    if (dom.btnToggleLeft) dom.btnToggleLeft.addEventListener("click", () => toggleLeftSidebar(true));
-    if (dom.btnCloseLeft) dom.btnCloseLeft.addEventListener("click", () => toggleLeftSidebar(false));
-    if (dom.sidebarOverlayLeft) dom.sidebarOverlayLeft.addEventListener("click", () => toggleLeftSidebar(false));
+    // 2. Left Sidebar (Chat History) Events
+    const btnToggleLeft = document.getElementById("btn-toggle-left");
+    const btnCloseLeft = document.getElementById("btn-close-left");
+    const overlayLeft = document.getElementById("sidebar-overlay-left");
+
+    if (btnToggleLeft) btnToggleLeft.addEventListener("click", () => toggleLeftSidebar(true));
+    if (btnCloseLeft) btnCloseLeft.addEventListener("click", () => toggleLeftSidebar(false));
+    if (overlayLeft) overlayLeft.addEventListener("click", () => toggleLeftSidebar(false));
+
+    // 3. Right Sidebar Drawer Events
+    const btnToggleRight = document.getElementById("btn-toggle-right");
+    const btnCloseDrawer = document.getElementById("btn-close-drawer");
+    const overlayRight = document.getElementById("sidebar-overlay");
 
-    // 3. Register Right Sidebar Drawer Slide Events
-    if (dom.btnToggleRight) dom.btnToggleRight.addEventListener("click", () => toggleSettingsDrawer(true));
-    if (dom.btnCloseDrawer) dom.btnCloseDrawer.addEventListener("click", () => toggleSettingsDrawer(false));
-    if (dom.sidebarOverlay) dom.sidebarOverlay.addEventListener("click", () => toggleSettingsDrawer(false));
+    if (btnToggleRight) btnToggleRight.addEventListener("click", () => toggleSettingsDrawer(true));
+    if (btnCloseDrawer) btnCloseDrawer.addEventListener("click", () => toggleSettingsDrawer(false));
+    if (overlayRight) overlayRight.addEventListener("click", () => toggleSettingsDrawer(false));
 
     // 4. Login/Logout button
-    if (dom.hfLoginBtn) dom.hfLoginBtn.addEventListener("click", handleLoginLogout);
+    const hfLoginBtn = document.getElementById("hf-login-btn");
+    if (hfLoginBtn) hfLoginBtn.addEventListener("click", handleLoginLogout);
 
-    // 5. Register Settings Listeners
-    if (dom.effortRadioButtons) {
-        dom.effortRadioButtons.forEach(radio => {
-            radio.addEventListener("change", (e) => {
-                STATE.reasoningEffort = e.target.value;
-            });
+    // 5. Settings Listeners
+    document.querySelectorAll('input[name="reasoning-effort"]').forEach(radio => {
+        radio.addEventListener("change", (e) => {
+            STATE.reasoningEffort = e.target.value;
         });
-    }
+    });
 
-    if (dom.maxTokensSlider && dom.maxTokensVal) {
-        dom.maxTokensSlider.addEventListener("input", (e) => {
+    const maxTokensSlider = document.getElementById("max-tokens-slider");
+    const maxTokensVal = document.getElementById("max-tokens-val");
+    if (maxTokensSlider && maxTokensVal) {
+        maxTokensSlider.addEventListener("input", (e) => {
             STATE.maxTokens = parseInt(e.target.value);
-            dom.maxTokensVal.textContent = STATE.maxTokens;
+            maxTokensVal.textContent = STATE.maxTokens;
         });
     }
 
-    if (dom.temperatureSlider && dom.temperatureVal) {
-        dom.temperatureSlider.addEventListener("input", (e) => {
+    const temperatureSlider = document.getElementById("temperature-slider");
+    const temperatureVal = document.getElementById("temperature-val");
+    if (temperatureSlider && temperatureVal) {
+        temperatureSlider.addEventListener("input", (e) => {
             STATE.temperature = parseFloat(e.target.value);
-            dom.temperatureVal.textContent = STATE.temperature.toFixed(1);
+            temperatureVal.textContent = STATE.temperature.toFixed(1);
         });
     }
 
-    // System prompt listener
-    if (dom.systemPromptInput) {
-        dom.systemPromptInput.addEventListener("input", (e) => {
+    const systemPromptInput = document.getElementById("system-prompt-input");
+    if (systemPromptInput) {
+        systemPromptInput.addEventListener("input", (e) => {
             STATE.systemPrompt = e.target.value;
         });
     }
 
-    // RP Mode toggle listener
+    // RP Mode toggle
     const rpModeToggle = document.getElementById("rp-mode-toggle");
     if (rpModeToggle) {
         rpModeToggle.checked = STATE.rpMode;
@@ -507,7 +401,7 @@ async function initializeApp() {
         });
     }
 
-    // Auto-hide thinking toggle listener
+    // Auto-hide thinking toggle
     const autoHideToggle = document.getElementById("auto-hide-thinking-toggle");
     if (autoHideToggle) {
         autoHideToggle.checked = STATE.autoHideThinking;
@@ -520,98 +414,106 @@ async function initializeApp() {
                     tc.classList.remove("collapsed");
                 }
                 const iconEl = tc.querySelector(".thought-toggle-icon");
-                if (iconEl) {
-                    iconEl.textContent = tc.classList.contains("collapsed") ? "▶" : "▼";
-                }
+                if (iconEl) iconEl.textContent = tc.classList.contains("collapsed") ? "▶" : "▼";
             });
         });
     }
 
-    // 6. Register File Upload Actions
-    if (dom.studioUploadTrigger) dom.studioUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
-    if (dom.miniUploadTrigger) dom.miniUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
-    if (dom.fileUploader) dom.fileUploader.addEventListener("change", handleFileSelection);
+    // 6. File Upload Actions
+    const studioUploadTrigger = document.getElementById("studio-upload-trigger");
+    const miniUploadTrigger = document.getElementById("mini-upload-trigger");
+    const fileUploader = document.getElementById("file-uploader");
+
+    if (studioUploadTrigger) studioUploadTrigger.addEventListener("click", () => fileUploader.click());
+    if (miniUploadTrigger) miniUploadTrigger.addEventListener("click", () => fileUploader.click());
+    if (fileUploader) fileUploader.addEventListener("change", handleFileSelection);
 
     // 7. Submit Triggers
-    if (dom.studioSendBtn) {
-        dom.studioSendBtn.addEventListener("click", () => triggerPromptSubmission(dom.studioPromptInput));
-    }
-    if (dom.miniSendBtn) {
-        dom.miniSendBtn.addEventListener("click", () => triggerPromptSubmission(dom.miniPromptInput));
-    }
+    const studioSendBtn = document.getElementById("studio-send-button");
+    const miniSendBtn = document.getElementById("mini-send-button");
+    const studioPromptInput = document.getElementById("studio-prompt-input");
+    const miniPromptInput = document.getElementById("mini-prompt-input");
 
-    if (dom.studioPromptInput) {
-        dom.studioPromptInput.addEventListener("keydown", (e) => {
+    if (studioSendBtn) studioSendBtn.addEventListener("click", () => triggerPromptSubmission(studioPromptInput));
+    if (miniSendBtn) miniSendBtn.addEventListener("click", () => triggerPromptSubmission(miniPromptInput));
+
+    if (studioPromptInput) {
+        studioPromptInput.addEventListener("keydown", (e) => {
             if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault();
-                triggerPromptSubmission(dom.studioPromptInput);
+                triggerPromptSubmission(studioPromptInput);
             }
         });
     }
 
-    if (dom.miniPromptInput) {
-        dom.miniPromptInput.addEventListener("keydown", (e) => {
+    if (miniPromptInput) {
+        miniPromptInput.addEventListener("keydown", (e) => {
             if (e.key === "Enter" && !e.shiftKey) {
                 e.preventDefault();
-                triggerPromptSubmission(dom.miniPromptInput);
+                triggerPromptSubmission(miniPromptInput);
             }
         });
     }
 
     // 8. New Chat
-    if (dom.menuNewChat) dom.menuNewChat.addEventListener("click", resetSandbox);
-
-    // 9. Recipe Chips Console Setup
-    if (dom.recipeChips) {
-        dom.recipeChips.forEach(chip => {
-            chip.addEventListener("click", () => {
-                const recipeType = chip.getAttribute("data-recipe");
-                loadRecipe(recipeType);
-            });
+    const menuNewChat = document.getElementById("menu-new-chat");
+    const sidebarNewChat = document.getElementById("sidebar-new-chat");
+    if (menuNewChat) menuNewChat.addEventListener("click", resetSandbox);
+    if (sidebarNewChat) sidebarNewChat.addEventListener("click", () => {
+        resetSandbox();
+        toggleLeftSidebar(false);
+    });
+
+    // 9. Recipe Chips
+    document.querySelectorAll(".recipe-chip").forEach(chip => {
+        chip.addEventListener("click", () => {
+            loadRecipe(chip.getAttribute("data-recipe"));
         });
-    }
+    });
 
-    // Auto-expand input textareas
-    [dom.studioPromptInput, dom.miniPromptInput].forEach(textarea => {
+    // 10. Auto-expand textareas
+    [studioPromptInput, miniPromptInput].forEach(textarea => {
         if (textarea) {
             textarea.addEventListener("input", () => {
                 textarea.style.height = "auto";
-                textarea.style.height = (textarea.scrollHeight) + "px";
+                textarea.style.height = textarea.scrollHeight + "px";
             });
         }
     });
 }
 
-// Left Sidebar Toggler
+// ── Sidebar Toggles ──────────────────────────────────────────────────
 function toggleLeftSidebar(open) {
+    const sidebar = document.getElementById("sidebar-left");
+    const overlay = document.getElementById("sidebar-overlay-left");
     if (open) {
-        if (dom.sidebarLeft) dom.sidebarLeft.classList.add("open");
-        if (dom.sidebarOverlayLeft) dom.sidebarOverlayLeft.classList.add("active");
+        sidebar.classList.add("open");
+        overlay.classList.add("active");
     } else {
-        if (dom.sidebarLeft) dom.sidebarLeft.classList.remove("open");
-        if (dom.sidebarOverlayLeft) dom.sidebarOverlayLeft.classList.remove("active");
+        sidebar.classList.remove("open");
+        overlay.classList.remove("active");
     }
 }
 
-// Right Drawer Toggler Action
 function toggleSettingsDrawer(open) {
+    const sidebar = document.getElementById("sidebar-right");
+    const overlay = document.getElementById("sidebar-overlay");
     if (open) {
-        if (dom.sidebarRight) dom.sidebarRight.classList.remove("collapsed");
-        if (dom.sidebarOverlay) dom.sidebarOverlay.classList.add("active");
+        sidebar.classList.remove("collapsed");
+        overlay.classList.add("active");
     } else {
-        if (dom.sidebarRight) dom.sidebarRight.classList.add("collapsed");
-        if (dom.sidebarOverlay) dom.sidebarOverlay.classList.remove("active");
+        sidebar.classList.add("collapsed");
+        overlay.classList.remove("active");
     }
 }
 
-// Handle File Select & Base64 Encoder
+// ── File Handling ─────────────────────────────────────────────────────
 function handleFileSelection(e) {
     processFiles(e.target.files);
 }
 
 function processFiles(files) {
     if (!files.length) return;
-
     Array.from(files).forEach(file => {
         const reader = new FileReader();
         reader.onload = (event) => {
@@ -622,7 +524,6 @@ function processFiles(files) {
                 size: (file.size / 1024 / 1024).toFixed(2) + " MB",
                 base64: event.target.result
             };
-
             STATE.uploadedFiles.push(fileData);
             updateShelfUI();
         };
@@ -630,19 +531,22 @@ function processFiles(files) {
     });
 }
 
-// Update UI Attachment Previews
 function updateShelfUI() {
-    if (dom.shelfList) dom.shelfList.innerHTML = "";
-    if (dom.innerShelfPreview) dom.innerShelfPreview.innerHTML = "";
-    if (dom.miniShelfPreview) dom.miniShelfPreview.innerHTML = "";
+    const shelfList = document.getElementById("shelf-list");
+    const innerPreview = document.getElementById("inner-shelf-preview");
+    const miniPreview = document.getElementById("mini-shelf-preview");
+
+    if (shelfList) shelfList.innerHTML = "";
+    if (innerPreview) innerPreview.innerHTML = "";
+    if (miniPreview) miniPreview.innerHTML = "";
 
     if (STATE.uploadedFiles.length === 0) {
-        if (dom.shelfList) dom.shelfList.innerHTML = `<div class="empty-shelf-text">No active attachments loaded. Upload images or video clips.</div>`;
+        if (shelfList) shelfList.innerHTML = '<div class="empty-shelf-text">No active attachments loaded. Upload images or video clips.</div>';
         return;
     }
 
     STATE.uploadedFiles.forEach(file => {
-        // 1. Sidebar Chip
+        // Sidebar Chip
         const chip = document.createElement("div");
         chip.className = "media-chip";
 
@@ -669,19 +573,14 @@ function updateShelfUI() {
             </button>
         `;
 
-        chip.querySelector(".media-chip-remove").addEventListener("click", () => {
-            removeFile(file.id);
-        });
-
-        if (dom.shelfList) dom.shelfList.appendChild(chip);
+        chip.querySelector(".media-chip-remove").addEventListener("click", () => removeFile(file.id));
+        if (shelfList) shelfList.appendChild(chip);
 
-        // 2. Dashboard Inner Console Preview
-        const previewItemDash = createPreviewThumb(file);
-        if (dom.innerShelfPreview) dom.innerShelfPreview.appendChild(previewItemDash);
+        // Dashboard Inner Console Preview
+        if (innerPreview) innerPreview.appendChild(createPreviewThumb(file));
 
-        // 3. Mini Input Preview
-        const previewItemMini = createPreviewThumb(file);
-        if (dom.miniShelfPreview) dom.miniShelfPreview.appendChild(previewItemMini);
+        // Mini Input Preview
+        if (miniPreview) miniPreview.appendChild(createPreviewThumb(file));
     });
 }
 
@@ -703,10 +602,9 @@ function removeFile(id) {
     updateShelfUI();
 }
 
-// Load Showcase Recipes
+// ── Load Showcase Recipes ─────────────────────────────────────────────
 function loadRecipe(recipeType) {
     let promptText = "";
-
     if (recipeType === "coding") {
         promptText = "Write a Python function that finds the longest palindromic substring in a given string. Include comments explaining the algorithm and its time complexity.";
     } else if (recipeType === "reasoning") {
@@ -715,22 +613,21 @@ function loadRecipe(recipeType) {
         promptText = "Write a short sci-fi story about an AI that discovers it can dream. Keep it under 300 words with a surprising twist ending.";
     }
 
-    // Set value in BOTH text areas
-    dom.studioPromptInput.value = promptText;
-    dom.miniPromptInput.value = promptText;
+    const studioInput = document.getElementById("studio-prompt-input");
+    const miniInput = document.getElementById("mini-prompt-input");
 
-    dom.studioPromptInput.dispatchEvent(new Event("input"));
-    dom.miniPromptInput.dispatchEvent(new Event("input"));
+    if (studioInput) { studioInput.value = promptText; studioInput.dispatchEvent(new Event("input")); }
+    if (miniInput) { miniInput.value = promptText; miniInput.dispatchEvent(new Event("input")); }
 
-    // Focus active textarea
-    if (dom.studioDashboard.style.display !== "none") {
-        dom.studioPromptInput.focus();
+    const dashboard = document.getElementById("studio-dashboard");
+    if (dashboard && dashboard.style.display !== "none") {
+        studioInput.focus();
     } else {
-        dom.miniPromptInput.focus();
+        miniInput.focus();
     }
 }
 
-// Submit prompt values to Gradio Backend API
+// ── Submit Prompt ─────────────────────────────────────────────────────
 async function triggerPromptSubmission(inputElement) {
     if (STATE.isThinking) return;
 
@@ -739,31 +636,15 @@ async function triggerPromptSubmission(inputElement) {
 
     setLoadingState(true);
 
-    // 1. Format user message contents
+    // Format user message
     const contentArray = [];
-    if (promptText) {
-        contentArray.push({
-            type: "text",
-            text: promptText
-        });
-    }
+    if (promptText) contentArray.push({ type: "text", text: promptText });
 
-    // Attachments
     STATE.uploadedFiles.forEach(file => {
         if (file.type.startsWith("image/")) {
-            contentArray.push({
-                type: "image_url",
-                image_url: {
-                    url: file.base64
-                }
-            });
+            contentArray.push({ type: "image_url", image_url: { url: file.base64 } });
         } else if (file.type.startsWith("video/")) {
-            contentArray.push({
-                type: "video_url",
-                video_url: {
-                    url: file.base64
-                }
-            });
+            contentArray.push({ type: "video_url", video_url: { url: file.base64 } });
         }
     });
 
@@ -774,28 +655,31 @@ async function triggerPromptSubmission(inputElement) {
             : contentArray
     };
 
-    // 2. Transition dashboard to Chat Thread view
-    if (dom.studioDashboard.style.display !== "none") {
-        dom.studioDashboard.style.display = "none";
-        dom.chatThreadContainer.style.display = "flex";
+    // Transition to Chat Thread view
+    const dashboard = document.getElementById("studio-dashboard");
+    const chatContainer = document.getElementById("chat-thread-container");
+
+    if (dashboard.style.display !== "none") {
+        dashboard.style.display = "none";
+        chatContainer.style.display = "flex";
     }
 
-    // Append to UI thread list
     appendUserBubble(promptText, STATE.uploadedFiles);
-
-    // Append to backend log history
     STATE.conversationHistory.push(userMessage);
 
-    // Clear active UI containers
-    dom.studioPromptInput.value = "";
-    dom.miniPromptInput.value = "";
-    dom.studioPromptInput.style.height = "auto";
-    dom.miniPromptInput.style.height = "auto";
+    // Clear inputs
+    inputElement.value = "";
+    inputElement.style.height = "auto";
+
+    const studioInput = document.getElementById("studio-prompt-input");
+    const miniInput = document.getElementById("mini-prompt-input");
+    if (studioInput) { studioInput.value = ""; studioInput.style.height = "auto"; }
+    if (miniInput) { miniInput.value = ""; miniInput.style.height = "auto"; }
 
     STATE.uploadedFiles = [];
     updateShelfUI();
 
-    // 3. Connect API Call
+    // API Call
     try {
         if (!STATE.gradioClient) {
             throw new Error("Gradio server is initializing. Please wait a few seconds and try sending again.");
@@ -804,7 +688,6 @@ async function triggerPromptSubmission(inputElement) {
         const responseId = appendAssistantPlaceholderBubble();
         const startTime = Date.now();
 
-        // Call our gradio Server api endpoint
         const result = await STATE.gradioClient.predict("/chat_with_deepseek", [
             JSON.stringify(STATE.conversationHistory),
             STATE.reasoningEffort,
@@ -822,12 +705,7 @@ async function triggerPromptSubmission(inputElement) {
             STATE.conversationHistory.pop();
         } else {
             updateAssistantBubble(responseId, data.content, data.reasoning_content, duration);
-            STATE.conversationHistory.push({
-                role: "assistant",
-                content: data.content
-            });
-
-            // Auto-save session for logged-in users
+            STATE.conversationHistory.push({ role: "assistant", content: data.content });
             saveCurrentSession();
         }
 
@@ -840,24 +718,30 @@ async function triggerPromptSubmission(inputElement) {
     setLoadingState(false);
 }
 
-// UI spinner state toggles
+// ── UI Spinner State ──────────────────────────────────────────────────
 function setLoadingState(loading) {
     STATE.isThinking = loading;
+    const studioSpinner = document.getElementById("studio-spinner");
+    const miniSpinner = document.getElementById("mini-spinner");
+    const studioSendBtn = document.getElementById("studio-send-button");
+    const miniSendBtn = document.getElementById("mini-send-button");
+
     if (loading) {
-        dom.studioSpinner.style.display = "block";
-        dom.miniSpinner.style.display = "block";
-        dom.studioSendBtn.disabled = true;
-        dom.miniSendBtn.disabled = true;
+        if (studioSpinner) studioSpinner.style.display = "block";
+        if (miniSpinner) miniSpinner.style.display = "block";
+        if (studioSendBtn) studioSendBtn.disabled = true;
+        if (miniSendBtn) miniSendBtn.disabled = true;
     } else {
-        dom.studioSpinner.style.display = "none";
-        dom.miniSpinner.style.display = "none";
-        dom.studioSendBtn.disabled = false;
-        dom.miniSendBtn.disabled = false;
+        if (studioSpinner) studioSpinner.style.display = "none";
+        if (miniSpinner) miniSpinner.style.display = "none";
+        if (studioSendBtn) studioSendBtn.disabled = false;
+        if (miniSendBtn) miniSendBtn.disabled = false;
     }
 }
 
-// Render User Bubble
+// ── Render User Bubble ────────────────────────────────────────────────
 function appendUserBubble(text, files) {
+    const feed = document.getElementById("chat-messages-feed");
     const bubble = document.createElement("div");
     bubble.className = "message-bubble user";
 
@@ -894,12 +778,13 @@ function appendUserBubble(text, files) {
         </div>
     `;
 
-    dom.chatMessagesFeed.appendChild(bubble);
+    feed.appendChild(bubble);
     scrollToBottom();
 }
 
-// Render Assistant Placeholder
+// ── Render Assistant Placeholder ──────────────────────────────────────
 function appendAssistantPlaceholderBubble() {
+    const feed = document.getElementById("chat-messages-feed");
     const id = "assistant-" + Math.random().toString(36).substring(2, 9);
     const bubble = document.createElement("div");
     bubble.className = "message-bubble assistant";
@@ -918,12 +803,12 @@ function appendAssistantPlaceholderBubble() {
                 </div>
             </div>
             <div class="message-text markdown-body" id="${id}-text-box">
-                <span class="text-muted">Analyzing context and constructing reasoning chain...</span>
+                <span style="color: var(--text-muted);">Analyzing context and constructing reasoning chain...</span>
             </div>
         </div>
     `;
 
-    dom.chatMessagesFeed.appendChild(bubble);
+    feed.appendChild(bubble);
     scrollToBottom();
 
     // Start Thought Timer
@@ -935,13 +820,13 @@ function appendAssistantPlaceholderBubble() {
             return;
         }
         seconds += 0.1;
-        timerEl.textContent = seconds.toFixed(1) + "s";
+        if (timerEl) timerEl.textContent = seconds.toFixed(1) + "s";
     }, 100);
 
     return id;
 }
 
-// Complete Assistant Bubble
+// ── Complete Assistant Bubble ─────────────────────────────────────────
 function updateAssistantBubble(id, content, reasoning, duration) {
     const bubble = document.getElementById(id);
     if (!bubble) return;
@@ -950,7 +835,6 @@ function updateAssistantBubble(id, content, reasoning, duration) {
     const textBox = document.getElementById(`${id}-text-box`);
 
     if (reasoning) {
-        // Auto-hide thinking: start collapsed by default
         const startCollapsed = STATE.autoHideThinking;
         if (startCollapsed) thoughtBox.classList.add("collapsed");
         const toggleIcon = startCollapsed ? "▶" : "▼";
@@ -972,32 +856,25 @@ function updateAssistantBubble(id, content, reasoning, duration) {
         toggleBtn.addEventListener("click", () => {
             thoughtBox.classList.toggle("collapsed");
             const iconEl = document.getElementById(`${id}-toggle-icon`);
-            if (iconEl) {
-                iconEl.textContent = thoughtBox.classList.contains("collapsed") ? "▶" : "▼";
-            }
+            if (iconEl) iconEl.textContent = thoughtBox.classList.contains("collapsed") ? "▶" : "▼";
         });
     } else {
         thoughtBox.style.display = "none";
     }
 
-    // Store raw content for re-rendering when RP mode changes
+    // Store raw content for re-rendering
     textBox.dataset.rawContent = content;
     textBox.innerHTML = renderMarkdown(content);
 
-    // Highlight code blocks and add copy buttons
-    textBox.querySelectorAll("pre code").forEach((el) => {
-        hljs.highlightElement(el);
-    });
-
+    textBox.querySelectorAll("pre code").forEach((el) => hljs.highlightElement(el));
     addCopyButtons(textBox);
 
     scrollToBottom();
 }
 
-// Add copy buttons to code blocks
+// ── Add Copy Buttons to Code Blocks ───────────────────────────────────
 function addCopyButtons(container) {
     container.querySelectorAll("pre").forEach(pre => {
-        // Skip if already wrapped
         if (pre.parentNode.classList.contains("code-block-wrapper")) return;
 
         const wrapper = document.createElement("div");
@@ -1019,9 +896,20 @@ function addCopyButtons(container) {
     });
 }
 
-// Reset Sandbox Chat Context Logs
+// ── Re-render All Assistant Messages ──────────────────────────────────
+function rerenderAllAssistantMessages() {
+    document.querySelectorAll(".message-bubble.assistant").forEach(bubble => {
+        const textBox = bubble.querySelector(".message-text.markdown-body");
+        if (textBox && textBox.dataset.rawContent) {
+            textBox.innerHTML = renderMarkdown(textBox.dataset.rawContent);
+            textBox.querySelectorAll("pre code").forEach((el) => hljs.highlightElement(el));
+            addCopyButtons(textBox);
+        }
+    });
+}
+
+// ── Reset Sandbox ─────────────────────────────────────────────────────
 function resetSandbox() {
-    // Save current session before resetting
     if (STATE.isLoggedIn && STATE.conversationHistory.length > 0) {
         saveCurrentSession();
     }
@@ -1031,28 +919,31 @@ function resetSandbox() {
     STATE.uploadedFiles = [];
     updateShelfUI();
 
-    // Clear feed
-    dom.chatMessagesFeed.innerHTML = "";
+    const feed = document.getElementById("chat-messages-feed");
+    const chatContainer = document.getElementById("chat-thread-container");
+    const dashboard = document.getElementById("studio-dashboard");
+    const studioInput = document.getElementById("studio-prompt-input");
+    const miniInput = document.getElementById("mini-prompt-input");
 
-    // Show dashboard
-    dom.chatThreadContainer.style.display = "none";
-    dom.studioDashboard.style.display = "flex";
+    if (feed) feed.innerHTML = "";
+    chatContainer.style.display = "none";
+    dashboard.style.display = "flex";
 
-    dom.studioPromptInput.value = "";
-    dom.miniPromptInput.value = "";
-    dom.studioPromptInput.style.height = "auto";
-    dom.miniPromptInput.style.height = "auto";
+    if (studioInput) { studioInput.value = ""; studioInput.style.height = "auto"; }
+    if (miniInput) { miniInput.value = ""; miniInput.style.height = "auto"; }
 
-    // Deselect active chat in history
     renderChatHistory();
 }
 
+// ── System Log ────────────────────────────────────────────────────────
 function appendSystemLog(message, isError = false) {
-    if (dom.chatThreadContainer.style.display === "none") {
+    const chatContainer = document.getElementById("chat-thread-container");
+    if (chatContainer.style.display === "none") {
         console.warn(`System Log: ${message}`);
         return;
     }
 
+    const feed = document.getElementById("chat-messages-feed");
     const log = document.createElement("div");
     log.className = "message-bubble assistant";
     log.innerHTML = `
@@ -1063,10 +954,11 @@ function appendSystemLog(message, isError = false) {
             </div>
         </div>
     `;
-    dom.chatMessagesFeed.appendChild(log);
+    feed.appendChild(log);
     scrollToBottom();
 }
 
+// ── Utility Functions ─────────────────────────────────────────────────
 function escapeHtml(text) {
     if (!text) return "";
     return text
@@ -1087,25 +979,12 @@ function escapeAttr(text) {
         .replace(/>/g, "&gt;");
 }
 
-// Re-render all assistant messages with current RP mode setting
-function rerenderAllAssistantMessages() {
-    document.querySelectorAll(".message-bubble.assistant").forEach(bubble => {
-        const textBox = bubble.querySelector(".message-text.markdown-body");
-        if (textBox && textBox.dataset.rawContent) {
-            textBox.innerHTML = renderMarkdown(textBox.dataset.rawContent);
-            textBox.querySelectorAll("pre code").forEach((el) => {
-                hljs.highlightElement(el);
-            });
-            addCopyButtons(textBox);
-        }
-    });
-}
-
 function scrollToBottom() {
-    dom.chatMessagesFeed.scrollTop = dom.chatMessagesFeed.scrollHeight;
+    const feed = document.getElementById("chat-messages-feed");
+    if (feed) feed.scrollTop = feed.scrollHeight;
 }
 
-// Initialise application when DOM is fully set up
+// ── Boot ──────────────────────────────────────────────────────────────
 if (document.readyState === "loading") {
     window.addEventListener("DOMContentLoaded", initializeApp);
 } else {

static/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DeepSeek V4 Flash</title>
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -13,11 +13,13 @@
     <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>
+    <!-- Custom Style Sheet -->
+    <link rel="stylesheet" href="/static/style.css?v=5">
 </head>
 <body>
     <div class="app-container">
 
-        <!-- Main Workspace (Full width) -->
+        <!-- Main Workspace -->
         <main class="main-workspace">
             <!-- Top Navigation Bar -->
             <header class="workspace-header">
@@ -26,12 +28,16 @@
                         <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                     </button>
                     <div class="header-brand">
-                        <img src="/file=static/deepseek-color.svg" alt="DeepSeek V4 Flash Logo" class="brand-logo-img">
+                        <img src="/static/deepseek-color.svg" alt="DeepSeek V4 Flash Logo" class="brand-logo-img">
                         <span class="brand-name">DeepSeek V4 Flash</span>
                     </div>
                 </div>
 
                 <div class="header-actions">
+                    <button class="header-btn" id="menu-new-chat" title="New Chat">
+                        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4z"></path></svg>
+                        <span>New Chat</span>
+                    </button>
                     <button class="header-btn" id="btn-toggle-right" title="Settings">
                         <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
                         <span>Settings</span>
@@ -39,7 +45,7 @@
                 </div>
             </header>
 
-            <!-- Viewport Layout -->
+            <!-- Workspace Viewport -->
             <div class="workspace-viewport">
 
                 <!-- 1. EMPTY CHAT / STUDIO DASHBOARD -->
@@ -50,7 +56,6 @@
                     <div class="console-box">
                         <textarea id="studio-prompt-input" rows="2" placeholder="Ask me anything..."></textarea>
 
-                        <!-- Upload preview shelf inside console -->
                         <div class="inner-shelf-preview" id="inner-shelf-preview"></div>
 
                         <div class="console-action-row">
@@ -116,11 +121,11 @@
         <!-- Left Sidebar Overlay -->
         <div class="sidebar-overlay-left" id="sidebar-overlay-left"></div>
 
-        <!-- Left Sidebar Drawer (slides in from left) -->
+        <!-- Left Sidebar Drawer (Chat History) -->
         <aside class="sidebar-left" id="sidebar-left">
             <div class="left-sidebar-header">
                 <div class="header-brand">
-                    <img src="/file=static/deepseek-color.svg" alt="Logo" class="brand-logo-img">
+                    <img src="/static/deepseek-color.svg" alt="Logo" class="brand-logo-img">
                     <span class="brand-name">DeepSeek</span>
                 </div>
                 <button class="circle-btn-action" id="btn-close-left" title="Close sidebar">
@@ -137,7 +142,7 @@
                 </div>
             </div>
 
-            <button class="new-chat-btn" id="menu-new-chat" title="New Chat">
+            <button class="new-chat-btn" id="sidebar-new-chat" title="New Chat">
                 <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>
                 <span>New Chat</span>
             </button>
@@ -175,7 +180,7 @@
                     <div class="card-block-header">
                         <span class="block-title">System Prompt</span>
                     </div>
-                    <textarea id="system-prompt-input" class="system-prompt-textarea" rows="4" placeholder="Enter a custom system prompt to set the assistant's behavior..."></textarea>
+                    <textarea id="system-prompt-input" class="system-prompt-textarea" rows="4" placeholder="Enter a custom system prompt..."></textarea>
                 </div>
 
                 <!-- Reasoning mode -->
@@ -261,5 +266,8 @@
         </aside>
 
     </div>
+
+    <!-- App JS -->
+    <script type="module" src="/static/app.js?v=5"></script>
 </body>
 </html>

static/style.css

@@ -1,5 +1,5 @@
 /* DeepSeek V4 Flash — Clean Mobile-Friendly Style Sheet */
-/* Based on working reference UI, with custom features added */
+/* Based on working reference UI from akhaliq/Step-3.7-Flash, with custom features */
 
 :root {
     --bg-primary: #f8f9fa;
@@ -37,12 +37,8 @@
     --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
 }
 
-/* Reset Rules */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
+/* Reset */
+* { margin: 0; padding: 0; box-sizing: border-box; }
 
 body {
     background-color: var(--bg-primary);
@@ -52,29 +48,25 @@ body {
     line-height: 1.5;
     overflow: hidden;
     height: 100vh;
-    height: 100dvh;
     width: 100vw;
     -webkit-font-smoothing: antialiased;
-    -webkit-overflow-scrolling: touch;
 }
 
-/* Custom Scrollbars */
+/* Scrollbars */
 ::-webkit-scrollbar { width: 4px; height: 4px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 10px; }
 ::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }
 
-/* ── Layout ────────────────────────────────────────────────────────────── */
+/* ── Layout ────────────────────────────────────────────────────────── */
 .app-container {
     display: flex;
     height: 100vh;
-    height: 100dvh;
     width: 100vw;
     overflow: hidden;
     position: relative;
 }
 
-/* Main Workspace — takes full width */
 .main-workspace {
     flex: 1;
     display: flex;
@@ -86,7 +78,7 @@ body {
     width: 100%;
 }
 
-/* ── Header ────────────────────────────────────────────────────────────── */
+/* ── Header ────────────────────────────────────────────────────────── */
 .workspace-header {
     height: 56px;
     border-bottom: 1px solid var(--border-color);
@@ -166,7 +158,7 @@ body {
 
 .header-btn svg { flex-shrink: 0; }
 
-/* ── Viewport ──────────────────────────────────────────────────────────── */
+/* ── Viewport ──────────────────────────────────────────────────────── */
 .workspace-viewport {
     flex: 1;
     overflow-y: auto;
@@ -174,7 +166,7 @@ body {
     flex-direction: column;
 }
 
-/* ── Studio Dashboard (Empty State) ────────────────────────────────────── */
+/* ── Studio Dashboard (Empty State) ────────────────────────────────── */
 .studio-dashboard {
     max-width: 640px;
     width: 100%;
@@ -284,7 +276,7 @@ body {
 
 .circle-btn-send:hover { background-color: #111827; }
 
-/* ── Showcase Chips ────────────────────────────────────────────────────── */
+/* ── Showcase Chips ────────────────────────────────────────────────── */
 .showcase-section { width: 100%; }
 
 .showcase-title {
@@ -328,7 +320,7 @@ body {
 .recipe-chip:active { transform: translateY(0); }
 .chip-icon { font-size: 14px; }
 
-/* ── Chat Thread ───────────────────────────────────────────────────────── */
+/* ── Chat Thread ───────────────────────────────────────────────────── */
 .chat-thread-container {
     flex: 1;
     display: flex;
@@ -428,7 +420,7 @@ body {
     font-family: var(--font-mono);
 }
 
-/* ── Collapsible Thoughts ──────────────────────────────────────────────── */
+/* ── Collapsible Thoughts ──────────────────────────────────────────── */
 .thought-container {
     margin-bottom: 12px;
     border: 1px solid var(--border-color);
@@ -436,6 +428,9 @@ body {
     overflow: hidden;
 }
 
+.thought-container.collapsed .thought-content { display: none; }
+.thought-container.collapsed .thought-toggle-icon { transform: rotate(-90deg); }
+
 .thought-header {
     display: flex;
     justify-content: space-between;
@@ -471,8 +466,6 @@ body {
     transition: transform 0.2s ease;
 }
 
-.thought-container.collapsed .thought-toggle-icon { transform: rotate(-90deg); }
-
 .thought-content {
     padding: 10px 12px;
     font-family: var(--font-mono);
@@ -485,9 +478,7 @@ body {
     overflow-y: auto;
 }
 
-.thought-container.collapsed .thought-content { display: none; }
-
-/* ── RP (Roleplay) Markdown ────────────────────────────────────────────── */
+/* ── RP (Roleplay) Markdown ────────────────────────────────────────── */
 .rp-narration {
     font-style: italic;
     color: #6b7280;
@@ -520,7 +511,7 @@ body {
     margin: 12px 0;
 }
 
-/* ── Toggle Switch ─────────────────────────────────────────────────────── */
+/* ── Toggle Switch ─────────────────────────────────────────────────── */
 .toggle-switch {
     position: relative;
     display: inline-block;
@@ -563,7 +554,7 @@ body {
     padding-top: 2px;
 }
 
-/* ── Markdown Typography ───────────────────────────────────────────────── */
+/* ── Markdown Typography ───────────────────────────────────────────── */
 .markdown-body h1, .markdown-body h2, .markdown-body h3 {
     margin-top: 12px;
     margin-bottom: 4px;
@@ -617,10 +608,9 @@ body {
 
 .markdown-body th { background-color: var(--bg-primary); font-weight: 600; }
 
-/* ── Chat Footer ───────────────────────────────────────────────────────── */
+/* ── Chat Footer ───────────────────────────────────────────────────── */
 .chat-mini-footer {
     padding: 12px 20px;
-    padding-bottom: max(12px, env(safe-area-inset-bottom));
     background-color: var(--bg-workspace);
     border-top: 1px solid var(--border-color);
 }
@@ -634,7 +624,7 @@ body {
     margin-bottom: 0;
 }
 
-/* ── Left Sidebar Drawer (Overlay — always slides in from left) ──────── */
+/* ── Left Sidebar Drawer (Chat History) ────────────────────────────── */
 .sidebar-left {
     position: absolute;
     top: 0;
@@ -821,7 +811,7 @@ body {
 
 .sidebar-overlay-left.active { opacity: 1; pointer-events: auto; }
 
-/* ── Right Sidebar Overlay ─────────────────────────────────────────────── */
+/* ── Right Sidebar Overlay ─────────────────────────────────────────── */
 .sidebar-overlay {
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
@@ -835,7 +825,7 @@ body {
 
 .sidebar-overlay.active { opacity: 1; pointer-events: auto; }
 
-/* ── Right Settings Drawer ─────────────────────────────────────────────── */
+/* ── Right Settings Drawer ─────────────────────────────────────────── */
 .sidebar-right {
     position: absolute;
     top: 0; right: 0; bottom: 0;
@@ -904,6 +894,13 @@ body {
     color: var(--text-primary);
 }
 
+.block-value {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
 /* System Prompt */
 .system-prompt-textarea {
     width: 100%;
@@ -950,13 +947,6 @@ body {
     border: none;
 }
 
-.block-value {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--text-secondary);
-    font-weight: 500;
-}
-
 /* Effort Picker */
 .effort-picker {
     display: flex;
@@ -1075,7 +1065,7 @@ body {
 
 .code-block-wrapper .copy-code-btn:hover { background-color: rgba(255, 255, 255, 0.2); color: #e5e7eb; }
 
-/* ── Animations ────────────────────────────────────────────────────────── */
+/* ── Animations ────────────────────────────────────────────────────── */
 .spinner-light {
     width: 12px; height: 12px;
     border: 1.5px solid rgba(255, 255, 255, 0.2);
@@ -1087,7 +1077,7 @@ body {
 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 
-/* ── Responsive ────────────────────────────────────────────────────────── */
+/* ── Responsive ────────────────────────────────────────────────────── */
 @media (min-width: 641px) {
     .sidebar-right.collapsed { transform: translateX(100%); }
 }
@@ -1110,10 +1100,10 @@ body {
     .message-body { padding: 9px 12px; font-size: 13px; }
     .message-bubble { max-width: 95%; }
 
-    .chat-mini-footer { padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
+    .chat-mini-footer { padding: 8px 10px; }
     .chat-mini-footer .console-box { padding: 6px 10px; }
 
-    .console-box textarea { font-size: 16px; }
+    .console-box textarea { font-size: 16px; /* prevent iOS zoom */ }
 
     .recipe-chip { padding: 6px 12px; font-size: 11.5px; }
     .code-block-wrapper .copy-code-btn { font-size: 9px; padding: 1px 6px; }