Update index.html

index.html

@@ -40,10 +40,12 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
 .screen{display:none;width:100%;height:100%}.screen.active{display:flex}
 
-/* LANDING */
 #landing{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;position:relative;overflow-y:auto;background:var(--bg)}
 .landing-deco{position:absolute;width:min(500px,90vw);height:min(500px,90vw);border-radius:50%;background:radial-gradient(circle,rgba(79,109,245,.07) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-55%);pointer-events:none}
 .landing-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-light);padding:6px 16px;border-radius:100px;margin-bottom:24px;font-weight:500}
+.device-badge{font-family:var(--font-mono);font-size:.6rem;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:8px;letter-spacing:.06em}
+.device-badge.mobile{background:var(--green-bg);color:var(--green)}
+.device-badge.desktop{background:var(--accent-light);color:var(--accent-text)}
 .landing-title{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,4.5rem);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--text);margin-bottom:12px}
 .landing-title em{font-style:italic;color:var(--accent)}
 .landing-sub{font-size:.95rem;color:var(--text-2);max-width:460px;line-height:1.7;margin-bottom:32px;font-weight:400}
@@ -60,12 +62,16 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .model-search-wrap.open .model-search-input{border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-color:var(--accent)}
 .model-item{padding:11px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border-light);transition:background .1s;min-height:44px}
 .model-item:last-child{border-bottom:none}
-.model-item:hover,.model-item.active{background:var(--accent-light)}
+.model-item:hover:not(.locked),.model-item.active:not(.locked){background:var(--accent-light)}
+.model-item.locked{opacity:.4;cursor:not-allowed;pointer-events:none}
 .model-item-name{font-family:var(--font-mono);font-size:.75rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
-.model-item-meta{display:flex;gap:5px;align-items:center;flex-shrink:0}
-.size-badge{background:var(--accent-light);color:var(--accent-text);padding:3px 8px;border-radius:6px;font-family:var(--font-mono);font-size:.6rem;font-weight:600}
-.vram-badge{background:var(--amber-bg);color:var(--amber);padding:3px 7px;border-radius:6px;font-family:var(--font-mono);font-size:.58rem;font-weight:600}
-.mobile-badge{background:var(--green-bg);color:var(--green);padding:3px 7px;border-radius:6px;font-family:var(--font-mono);font-size:.56rem;font-weight:700;letter-spacing:.03em}
+.model-item.locked .model-item-name{text-decoration:line-through}
+.model-item-meta{display:flex;gap:4px;align-items:center;flex-shrink:0}
+.size-badge{background:var(--accent-light);color:var(--accent-text);padding:3px 7px;border-radius:6px;font-family:var(--font-mono);font-size:.58rem;font-weight:600}
+.vram-badge{background:var(--amber-bg);color:var(--amber);padding:3px 6px;border-radius:6px;font-family:var(--font-mono);font-size:.56rem;font-weight:600}
+.mobile-badge{background:var(--green-bg);color:var(--green);padding:3px 6px;border-radius:6px;font-family:var(--font-mono);font-size:.54rem;font-weight:700;letter-spacing:.03em}
+.lock-badge{background:var(--red-bg);color:var(--red);padding:3px 6px;border-radius:6px;font-family:var(--font-mono);font-size:.52rem;font-weight:700;letter-spacing:.03em}
+.new-badge{background:#edf7f0;color:#16803c;padding:2px 6px;border-radius:5px;font-family:var(--font-mono);font-size:.5rem;font-weight:700;letter-spacing:.04em}
 .model-dropdown-loading{padding:12px 14px;font-size:.75rem;color:var(--text-3);text-align:center}
 .model-section-label{padding:8px 14px 4px;font-family:var(--font-mono);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);background:var(--bg-warm)}
 .btn-load{font-family:var(--font);font-size:.9rem;font-weight:600;color:#fff;background:var(--accent);border:none;padding:14px 40px;border-radius:100px;cursor:pointer;transition:all .2s;box-shadow:0 2px 12px rgba(79,109,245,.25);min-height:48px}
@@ -75,7 +81,6 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .landing-footer{margin-top:auto;padding:20px 0;font-family:var(--font-mono);font-size:.65rem;color:var(--text-4)}
 .landing-footer a{color:var(--text-3);text-decoration:none}.landing-footer a:hover{color:var(--accent)}
 
-/* LOADING */
 #loading{flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;background:var(--bg)}
 .loader-ring{width:56px;height:56px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
@@ -86,7 +91,6 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .download-track{height:4px;background:var(--bg-cool);border-radius:2px;overflow:hidden}
 .download-fill{height:100%;width:0%;background:var(--accent);border-radius:2px;transition:width .3s}
 
-/* CHAT */
 #chat{flex-direction:column;height:100%;background:var(--bg-warm)}
 .chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:calc(10px + var(--safe-top));border-bottom:1px solid var(--border-light);background:var(--bg);flex-shrink:0;min-height:56px;gap:8px}
 .chat-header-left{display:flex;align-items:center;gap:10px;min-width:0}
@@ -109,7 +113,6 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .btn-icon.active{background:var(--accent-light);color:var(--accent-text);border-color:var(--accent)}
 .btn-reset{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);background:var(--surface);border:1px solid var(--border);padding:6px 12px;border-radius:100px;cursor:pointer;transition:all .15s;white-space:nowrap;min-height:32px}
 .btn-reset:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)}
-
 .settings-panel{padding:0 16px;background:var(--bg);border-bottom:1px solid var(--border-light);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:center;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s}
 .settings-panel.open{max-height:200px;padding:10px 16px}
 .settings-row{display:flex;align-items:center;gap:5px}
@@ -131,11 +134,9 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .stat-value.hl{color:var(--accent-text)}
 .error-banner{display:none;padding:10px 16px;background:var(--red-bg);border:1px solid rgba(212,64,64,.2);border-radius:var(--radius-sm);color:var(--red);font-size:.8rem;margin:8px 16px 0}
 .error-banner.visible{display:block}
-
 .chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
 .msg-group{display:flex;flex-direction:column;gap:3px;max-width:85%;animation:msgIn .25s ease}
-.msg-group.user{align-self:flex-end}
-.msg-group.assistant{align-self:flex-start}
+.msg-group.user{align-self:flex-end}.msg-group.assistant{align-self:flex-start}
 @keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
 .msg-role{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:1px;font-weight:600}
 .msg-group.assistant .msg-role{color:var(--accent-text)}
@@ -143,7 +144,6 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .msg-group.user .msg-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px;box-shadow:0 2px 8px rgba(79,109,245,.15)}
 .msg-group.assistant .msg-bubble{background:var(--surface);border:1px solid var(--border-light);border-bottom-left-radius:4px}
 .msg-group.assistant .msg-bubble.generating{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,109,245,.08)}
-
 .msg-bubble.md{white-space:normal}
 .msg-bubble.md p{margin:0 0 .5em}.msg-bubble.md p:last-child{margin:0}
 .msg-bubble.md h1,.msg-bubble.md h2,.msg-bubble.md h3{margin:.7em 0 .35em;font-weight:600;line-height:1.3}
@@ -152,32 +152,20 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .msg-bubble.md code{font-family:var(--font-mono);font-size:.84em;padding:2px 6px;background:var(--bg-cool);border-radius:5px;color:var(--accent-text)}
 .msg-bubble.md pre{margin:.5em 0;padding:12px;background:var(--bg-warm);border:1px solid var(--border-light);border-radius:var(--radius-sm);overflow-x:auto;line-height:1.5}
 .msg-bubble.md pre code{padding:0;background:none;color:var(--text);font-size:.78rem}
-.msg-bubble.md ul,.msg-bubble.md ol{margin:.4em 0;padding-left:1.4em}
-.msg-bubble.md li{margin:.15em 0}
+.msg-bubble.md ul,.msg-bubble.md ol{margin:.4em 0;padding-left:1.4em}.msg-bubble.md li{margin:.15em 0}
 .msg-bubble.md blockquote{margin:.5em 0;padding:8px 12px;border-left:3px solid var(--accent);color:var(--text-2);background:var(--accent-light);border-radius:0 var(--radius-xs) var(--radius-xs) 0}
 .msg-bubble.md table{margin:.5em 0;border-collapse:collapse;width:100%;font-size:.82rem}
 .msg-bubble.md th,.msg-bubble.md td{padding:6px 8px;border:1px solid var(--border);text-align:left}
 .msg-bubble.md th{background:var(--bg-cool);font-weight:600;color:var(--text-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
-.msg-bubble.md strong{font-weight:600}
-.msg-bubble.md a{color:var(--accent)}
+.msg-bubble.md strong{font-weight:600}.msg-bubble.md a{color:var(--accent)}
 .msg-bubble.md hr{margin:.7em 0;border:none;border-top:1px solid var(--border-light)}
 .msg-group.user .msg-bubble.md code{background:rgba(255,255,255,.2);color:#fff}
 .msg-group.user .msg-bubble.md pre{background:rgba(0,0,0,.1);border-color:rgba(255,255,255,.15)}
 .msg-group.user .msg-bubble.md pre code{color:#fff}
-
-.think-block{margin-bottom:8px;border-left:2.5px solid var(--accent);padding:8px 12px;background:var(--accent-light);border-radius:0 var(--radius-xs) var(--radius-xs) 0}
-.think-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text);min-height:28px}
-.think-toggle:hover{opacity:.75}
-.think-arrow{font-size:.5rem;transition:transform .2s;display:inline-block}
-.think-arrow.open{transform:rotate(90deg)}
-.think-content{font-size:.8rem;color:var(--text-2);line-height:1.65;white-space:pre-wrap;word-wrap:break-word;margin-top:6px;overflow:hidden;max-height:50vh;transition:max-height .3s,margin .3s,opacity .2s}
-.think-content.collapsed{max-height:0;margin-top:0;opacity:0}
 .msg-stats{font-family:var(--font-mono);font-size:.58rem;color:var(--text-3);margin-top:5px;letter-spacing:.03em}
 .thinking-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:4px;animation:dot 1.2s ease-in-out infinite}
-.thinking-dots span:nth-child(2){animation-delay:.2s}
-.thinking-dots span:nth-child(3){animation-delay:.4s}
+.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}
 @keyframes dot{0%,80%,100%{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
-
 .chat-input-area{padding:10px 12px;padding-bottom:calc(10px + var(--safe-bottom));border-top:1px solid var(--border-light);background:var(--bg);flex-shrink:0}
 .chat-input-row{display:flex;align-items:flex-end;gap:6px}
 .input-wrap{flex:1;position:relative}
@@ -188,82 +176,61 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .btn-send:disabled{opacity:.3;cursor:not-allowed}
 .btn-send:not(:disabled):hover{background:var(--accent-hover);box-shadow:0 2px 8px rgba(79,109,245,.25)}
 .btn-send:not(:disabled):active{transform:scale(.95)}
-.btn-send .icon-stop{display:none}
-.btn-send.stopping{background:var(--red)}
-.btn-send.stopping .icon-send{display:none}
-.btn-send.stopping .icon-stop{display:block}
+.btn-send .icon-stop{display:none}.btn-send.stopping{background:var(--red)}
+.btn-send.stopping .icon-send{display:none}.btn-send.stopping .icon-stop{display:block}
 .chat-footer-note{font-family:var(--font-mono);font-size:.55rem;color:var(--text-4);text-align:center;margin-top:6px;letter-spacing:.03em;padding:0 8px}
-
 .welcome-msg{text-align:center;padding:40px 20px;color:var(--text-3);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
 .welcome-msg h3{font-family:var(--font-display);font-size:1.5rem;color:var(--text-2);margin-bottom:8px;font-weight:400;font-style:italic}
 .welcome-msg p{font-size:.85rem;line-height:1.65}
-
 .toast{position:fixed;bottom:calc(24px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(20px);padding:10px 20px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:500;background:var(--surface);color:var(--text);border:1px solid var(--border);opacity:0;transition:all .3s;z-index:1000;max-width:min(480px,90vw);box-shadow:var(--shadow-lg);pointer-events:none}
 .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
-.toast.error{border-color:var(--red);color:var(--red)}
-.toast.success{border-color:var(--green);color:var(--green)}
+.toast.error{border-color:var(--red);color:var(--red)}.toast.success{border-color:var(--green);color:var(--green)}
 
 @media(max-width:640px){
-  .chip{font-size:.62rem;padding:4px 10px}
-  .landing-sub{font-size:.88rem;padding:0 8px}
+  .chip{font-size:.62rem;padding:4px 10px}.landing-sub{font-size:.88rem;padding:0 8px}
   .chat-header{padding:8px 12px;padding-top:calc(8px + var(--safe-top));gap:6px}
-  .chat-header-title{font-size:.84rem}
-  .chat-header-controls{gap:4px}
-  .toggle-pill{padding:4px 8px;min-height:28px}
-  .toggle-lbl{font-size:.58rem}
+  .chat-header-title{font-size:.84rem}.chat-header-controls{gap:4px}
+  .toggle-pill{padding:4px 8px;min-height:28px}.toggle-lbl{font-size:.58rem}
   .btn-icon{width:28px;height:28px;font-size:.7rem}
   .btn-reset{font-size:.58rem;padding:5px 10px;min-height:28px}
-  .settings-panel.open{gap:6px 12px;padding:8px 12px}
-  .settings-slider{width:56px}
-  .chat-messages{padding:12px}
-  .msg-group{max-width:90%}
+  .settings-panel.open{gap:6px 12px;padding:8px 12px}.settings-slider{width:56px}
+  .chat-messages{padding:12px}.msg-group{max-width:90%}
   .msg-bubble{padding:10px 14px;font-size:.85rem}
   .chat-input-area{padding:8px 10px;padding-bottom:calc(8px + var(--safe-bottom))}
   .btn-send{width:42px;height:42px}
   .input-wrap textarea{min-height:42px;padding:10px 12px;font-size:.86rem}
-  .stats-bar{gap:10px;padding:4px 12px}
-  .system-prompt-wrap.open{padding:6px 12px 8px}
-}
-@media(max-width:380px){
-  .toggle-lbl{display:none}
-  .landing-title{font-size:2rem}
-  .chat-header-title{font-size:.78rem;max-width:120px}
-}
-@media(max-height:500px) and (orientation:landscape){
-  .chat-header{padding:6px 12px;min-height:44px}
-  .chat-avatar{width:28px;height:28px;font-size:.8rem}
-  .chat-messages{padding:8px 12px;gap:10px}
+  .stats-bar{gap:10px;padding:4px 12px}.system-prompt-wrap.open{padding:6px 12px 8px}
 }
+@media(max-width:380px){.toggle-lbl{display:none}.landing-title{font-size:2rem}.chat-header-title{font-size:.78rem;max-width:120px}}
+@media(max-height:500px) and (orientation:landscape){.chat-header{padding:6px 12px;min-height:44px}.chat-avatar{width:28px;height:28px;font-size:.8rem}.chat-messages{padding:8px 12px;gap:10px}}
 </style>
 </head>
 <body>
-
 <div id="landing" class="screen active">
   <div class="landing-deco"></div>
-  <div class="landing-tag">WebLLM · Mobile Ready · WebGPU</div>
+  <div class="landing-tag">WebLLM · Mobile + Desktop · WebGPU</div>
+  <div class="device-badge" id="deviceBadge"></div>
   <h1 class="landing-title">Local <em>AI Chat</em></h1>
-  <p class="landing-sub">Run open-source LLMs entirely in your browser — desktop and mobile. No server, no API keys, powered by WebLLM.</p>
+  <p class="landing-sub">Run open-source LLMs entirely in your browser. No server, no API keys — powered by WebLLM.</p>
   <div class="landing-chips">
-    <span class="chip">Qwen · Llama · Gemma</span>
-    <span class="chip">Mobile + Desktop</span>
+    <span class="chip">Qwen3 · Llama · Gemma</span>
     <span class="chip">Streaming</span>
     <span class="chip">Markdown</span>
+    <span class="chip" id="chipDevice"></span>
   </div>
   <div class="model-search-wrap" id="modelSearchWrap">
-    <input class="model-search-input" id="modelSearchInput" type="text" value="SmolLM2-360M-Instruct-q4f16_1-MLC" placeholder="Select a model…" autocomplete="off" readonly/>
+    <input class="model-search-input" id="modelSearchInput" type="text" value="" placeholder="Select a model…" autocomplete="off" readonly/>
     <span class="search-chevron">▾</span>
     <div class="model-dropdown" id="modelDropdown"></div>
   </div>
   <button class="btn-load" id="btnLoad">Load Model</button>
   <div class="landing-footer">Powered by <a href="https://webllm.mlc.ai/" target="_blank">WebLLM</a> + <a href="https://mlc.ai/" target="_blank">MLC-AI</a></div>
 </div>
-
 <div id="loading" class="screen">
   <div class="loader-ring" id="loaderRing"></div>
   <div><div class="loader-text" id="loaderText">Initializing engine…</div><div class="loader-sub" id="loaderSub">Model is cached after first download.</div></div>
   <div class="download-bar" id="downloadBar" style="display:none"><div class="download-text" id="downloadText">Downloading…</div><div class="download-track"><div class="download-fill" id="downloadFill"></div></div></div>
 </div>
-
 <div id="chat" class="screen">
   <div class="chat-header">
     <div class="chat-header-left"><div class="chat-avatar">W</div><div class="chat-header-info"><div class="chat-header-title" id="chatTitle">WebLLM Chat</div><div class="chat-header-status">Ready</div></div></div>
@@ -283,7 +250,7 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
   <div class="system-prompt-wrap" id="sysPromptWrap"><textarea class="system-prompt-input" id="sysPromptInput" placeholder="System prompt (optional)…"></textarea></div>
   <div class="stats-bar" id="statsBar"></div>
   <div class="error-banner" id="errorBanner"></div>
-  <div class="chat-messages" id="chatMessages"><div class="welcome-msg" id="welcomeMsg"><h3>Start a conversation</h3><p>Type a message below. The model runs entirely in your browser — desktop and mobile.</p></div></div>
+  <div class="chat-messages" id="chatMessages"><div class="welcome-msg" id="welcomeMsg"><h3>Start a conversation</h3><p>Type a message below.<br/>Everything runs locally in your browser.</p></div></div>
   <div class="chat-input-area">
     <div class="chat-input-row">
       <div class="input-wrap"><textarea id="msgInput" rows="1" placeholder="Type a message…"></textarea></div>
@@ -292,325 +259,253 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
         <svg class="icon-stop" width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
       </button>
     </div>
-    <div class="chat-footer-note">100% local — no data leaves your device. Works on mobile and desktop.</div>
+    <div class="chat-footer-note">100% local — no data leaves your device.</div>
   </div>
 </div>
-
 <div class="toast" id="toast"></div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
-
 <script type="module">
 import * as webllm from "https://esm.run/@mlc-ai/web-llm";
 
-/* ─── Model catalog ─── */
+/* ═══ DEVICE DETECTION ═══ */
+const isMobile = (()=>{
+  const ua = navigator.userAgent || "";
+  if (/Mobile|Android|iPhone|iPad|iPod|webOS|BlackBerry|Opera Mini|IEMobile/i.test(ua)) return true;
+  if ('ontouchstart' in window && window.innerWidth < 768) return true;
+  if (navigator.maxTouchPoints > 1 && window.innerWidth < 1024) return true;
+  return false;
+})();
+
+/* ═══ MODEL CATALOG (2025~2026 Latest) ═══ */
 const MODELS = [
-  { id: "SmolLM2-135M-Instruct-q0f32-MLC", label: "SmolLM2 135M", vram: "719MB", mobile: true },
-  { id: "SmolLM2-360M-Instruct-q4f16_1-MLC", label: "SmolLM2 360M", vram: "489MB", mobile: true },
-  { id: "Qwen2.5-0.5B-Instruct-q4f16_1-MLC", label: "Qwen2.5 0.5B", vram: "945MB", mobile: true },
-  { id: "Qwen2.5-1.5B-Instruct-q4f16_1-MLC", label: "Qwen2.5 1.5B", vram: "1.5GB", mobile: true },
-  { id: "gemma-2-2b-it-q4f16_1-MLC-1k", label: "Gemma-2 2B (1k ctx)", vram: "1.6GB", mobile: true },
-  { id: "Llama-3.2-1B-Instruct-q4f16_1-MLC", label: "Llama 3.2 1B", vram: "1.1GB", mobile: true },
-  { id: "Llama-3.2-3B-Instruct-q4f16_1-MLC", label: "Llama 3.2 3B", vram: "2.2GB", mobile: false },
-  { id: "gemma-2-2b-it-q4f16_1-MLC", label: "Gemma-2 2B (4k ctx)", vram: "1.9GB", mobile: false },
-  { id: "Qwen2.5-3B-Instruct-q4f16_1-MLC", label: "Qwen2.5 3B", vram: "2.3GB", mobile: false },
-  { id: "Phi-3.5-mini-instruct-q4f16_1-MLC", label: "Phi-3.5 Mini 3.8B", vram: "3.0GB", mobile: false },
-  { id: "Mistral-7B-Instruct-v0.3-q4f16_1-MLC", label: "Mistral 7B", vram: "5.0GB", mobile: false },
-  { id: "Llama-3.1-8B-Instruct-q4f16_1-MLC", label: "Llama 3.1 8B", vram: "5.1GB", mobile: false },
+  // ── Qwen3 (Latest, 2025) ──
+  { id:"Qwen3-0.6B-q4f16_1-MLC",         label:"Qwen3 0.6B",           family:"Qwen3",  vram:"500MB",  maxVramMB:500,  mobile:true,  isNew:true, desc:"Thinking support, multilingual" },
+  { id:"Qwen3-1.7B-q4f16_1-MLC",          label:"Qwen3 1.7B",           family:"Qwen3",  vram:"1.2GB",  maxVramMB:1200, mobile:true,  isNew:true, desc:"Best mobile quality" },
+  { id:"Qwen3-4B-q4f16_1-MLC",            label:"Qwen3 4B",             family:"Qwen3",  vram:"2.5GB",  maxVramMB:2500, mobile:false, isNew:true, desc:"Reasoning + code" },
+  { id:"Qwen3-8B-q4f16_1-MLC",            label:"Qwen3 8B",             family:"Qwen3",  vram:"5.0GB",  maxVramMB:5000, mobile:false, isNew:true, desc:"Full-size chat" },
+  { id:"Qwen3-30B-A3B-q4f16_1-MLC",       label:"Qwen3 30B MoE (3B active)", family:"Qwen3", vram:"3.0GB", maxVramMB:3000, mobile:false, isNew:true, desc:"MoE efficiency" },
+  // ── Qwen2.5 (Stable) ──
+  { id:"Qwen2.5-0.5B-Instruct-q4f16_1-MLC", label:"Qwen2.5 0.5B Instruct", family:"Qwen2.5", vram:"945MB", maxVramMB:945, mobile:true, isNew:false, desc:"Lightweight instruct" },
+  { id:"Qwen2.5-1.5B-Instruct-q4f16_1-MLC", label:"Qwen2.5 1.5B Instruct", family:"Qwen2.5", vram:"1.5GB", maxVramMB:1500, mobile:false, isNew:false, desc:"Balanced quality" },
+  { id:"Qwen2.5-3B-Instruct-q4f16_1-MLC",   label:"Qwen2.5 3B Instruct",   family:"Qwen2.5", vram:"2.3GB", maxVramMB:2300, mobile:false, isNew:false, desc:"Strong multilingual" },
+  // ── DeepSeek R1 Distill ──
+  { id:"DeepSeek-R1-Distill-Qwen-1.5B-q4f16_1-MLC", label:"DeepSeek-R1 1.5B (Qwen)", family:"DeepSeek", vram:"1.5GB", maxVramMB:1500, mobile:false, isNew:true, desc:"Reasoning distilled" },
+  // ── SmolLM2 (Ultra-light) ──
+  { id:"SmolLM2-135M-Instruct-q0f32-MLC",   label:"SmolLM2 135M",          family:"SmolLM2", vram:"719MB",  maxVramMB:719,  mobile:true,  isNew:false, desc:"Ultra-lightweight" },
+  { id:"SmolLM2-360M-Instruct-q4f16_1-MLC", label:"SmolLM2 360M",          family:"SmolLM2", vram:"489MB",  maxVramMB:489,  mobile:true,  isNew:false, desc:"Fastest loading" },
+  { id:"SmolLM2-1.7B-Instruct-q4f16_1-MLC", label:"SmolLM2 1.7B",          family:"SmolLM2", vram:"1.2GB",  maxVramMB:1200, mobile:true,  isNew:false, desc:"Best SmolLM" },
+  // ── Llama 3.2 / 3.1 ──
+  { id:"Llama-3.2-1B-Instruct-q4f16_1-MLC", label:"Llama 3.2 1B",          family:"Llama",  vram:"1.1GB",  maxVramMB:1100, mobile:true,  isNew:false, desc:"Meta compact" },
+  { id:"Llama-3.2-3B-Instruct-q4f16_1-MLC", label:"Llama 3.2 3B",          family:"Llama",  vram:"2.2GB",  maxVramMB:2200, mobile:false, isNew:false, desc:"Strong general" },
+  { id:"Llama-3.1-8B-Instruct-q4f16_1-MLC", label:"Llama 3.1 8B",          family:"Llama",  vram:"5.1GB",  maxVramMB:5100, mobile:false, isNew:false, desc:"Full Llama" },
+  // ── Gemma 2 ──
+  { id:"gemma-2-2b-it-q4f16_1-MLC-1k",      label:"Gemma-2 2B (1k ctx)",   family:"Gemma",  vram:"1.6GB",  maxVramMB:1600, mobile:true,  isNew:false, desc:"Short context mobile" },
+  { id:"gemma-2-2b-it-q4f16_1-MLC",          label:"Gemma-2 2B (4k ctx)",   family:"Gemma",  vram:"1.9GB",  maxVramMB:1900, mobile:false, isNew:false, desc:"Full context" },
+  // ── Phi 3.5 ──
+  { id:"Phi-3.5-mini-instruct-q4f16_1-MLC",  label:"Phi-3.5 Mini 3.8B",    family:"Phi",    vram:"3.0GB",  maxVramMB:3000, mobile:false, isNew:false, desc:"Microsoft reasoning" },
+  // ── Mistral ──
+  { id:"Mistral-7B-Instruct-v0.3-q4f16_1-MLC", label:"Mistral 7B v0.3",   family:"Mistral", vram:"5.0GB", maxVramMB:5000, mobile:false, isNew:false, desc:"Classic Mistral" },
 ];
 
-/* ���── State ─── */
-let engine = null;
-let isGenerating = false;
-let abortController = null;
-let chatHistory = [];
-let totalTokens = 0;
-
-const $ = id => document.getElementById(id);
-const getTemp = () => parseInt($("tempSlider").value) / 100;
-const getTopP = () => parseInt($("toppSlider").value) / 100;
-const getMaxTok = () => parseInt($("maxTokSelect").value);
-const getRepPen = () => parseInt($("repPenSlider").value) / 100;
-const getSysPrompt = () => $("sysPromptInput").value.trim();
-
-document.fonts.ready.then(() => document.body.classList.add("ready"));
-
-const $loaderTx = $("loaderText"), $loaderSub = $("loaderSub");
-const $messages = $("chatMessages"), $input = $("msgInput"), $btnSend = $("btnSend");
-const $btnLoad = $("btnLoad"), $btnReset = $("btnReset");
-const $errBanner = $("errorBanner"), $streamToggle = $("streamToggle");
-const $searchInput = $("modelSearchInput"), $searchWrap = $("modelSearchWrap"), $dropdown = $("modelDropdown");
-const $downloadBar = $("downloadBar"), $downloadText = $("downloadText"), $downloadFill = $("downloadFill");
-const $statsBar = $("statsBar"), $toast = $("toast");
-
-/* ─── Toast ─── */
-let toastTimer = null;
-function showToast(m, t = "") { clearTimeout(toastTimer); $toast.textContent = m; $toast.className = "toast " + t + " show"; toastTimer = setTimeout(() => $toast.classList.remove("show"), 3000); }
+const MOBILE_VRAM_LIMIT = 1300; // MB
+
+/* ═══ STATE ═══ */
+let engine=null, isGenerating=false, abortController=null, chatHistory=[], totalTokens=0;
+const $=id=>document.getElementById(id);
+const getTemp=()=>parseInt($("tempSlider").value)/100;
+const getTopP=()=>parseInt($("toppSlider").value)/100;
+const getMaxTok=()=>parseInt($("maxTokSelect").value);
+const getRepPen=()=>parseInt($("repPenSlider").value)/100;
+const getSysPrompt=()=>$("sysPromptInput").value.trim();
+document.fonts.ready.then(()=>document.body.classList.add("ready"));
+const $messages=$("chatMessages"),$input=$("msgInput"),$btnSend=$("btnSend"),$btnLoad=$("btnLoad"),$btnReset=$("btnReset");
+const $errBanner=$("errorBanner"),$streamToggle=$("streamToggle");
+const $searchInput=$("modelSearchInput"),$searchWrap=$("modelSearchWrap"),$dropdown=$("modelDropdown");
+const $downloadBar=$("downloadBar"),$downloadText=$("downloadText"),$downloadFill=$("downloadFill");
+const $statsBar=$("statsBar"),$toast=$("toast");
+
+/* ═══ DEVICE BADGE ═══ */
+const $badge=$("deviceBadge"), $chipDev=$("chipDevice");
+if(isMobile){
+  $badge.textContent="MOBILE DETECTED";$badge.className="device-badge mobile";
+  $chipDev.textContent="Mobile optimized";
+}else{
+  $badge.textContent="DESKTOP DETECTED";$badge.className="device-badge desktop";
+  $chipDev.textContent="All models available";
+}
 
-/* ─── Stats ─── */
-function updateStatsBar(tps = null, tokens = null) {
-  if (!totalTokens && !tps) { $statsBar.innerHTML = ""; return; }
-  let h = "";
-  if (tps !== null) h += `<div class="stat"><span class="stat-label">Speed</span><span class="stat-value hl">${tps} t/s</span></div>`;
-  if (tokens !== null) h += `<div class="stat"><span class="stat-label">Tokens</span><span class="stat-value">${tokens}</span></div>`;
-  if (totalTokens > 0) h += `<div class="stat"><span class="stat-label">Session</span><span class="stat-value">${totalTokens}</span></div>`;
-  h += `<div class="stat"><span class="stat-label">Msgs</span><span class="stat-value">${chatHistory.length}</span></div>`;
-  $statsBar.innerHTML = h;
+/* ═══ SET DEFAULT MODEL ═══ */
+const defaultModel = isMobile ? "Qwen3-0.6B-q4f16_1-MLC" : "Qwen3-4B-q4f16_1-MLC";
+$searchInput.value = defaultModel;
+
+/* ═══ TOAST ═══ */
+let toastTimer=null;
+function showToast(m,t=""){clearTimeout(toastTimer);$toast.textContent=m;$toast.className="toast "+t+" show";toastTimer=setTimeout(()=>$toast.classList.remove("show"),3000)}
+
+/* ═══ STATS ═══ */
+function updateStatsBar(tps=null,tokens=null){
+  if(!totalTokens&&!tps){$statsBar.innerHTML="";return}
+  let h="";
+  if(tps!==null)h+=`<div class="stat"><span class="stat-label">Speed</span><span class="stat-value hl">${tps} t/s</span></div>`;
+  if(tokens!==null)h+=`<div class="stat"><span class="stat-label">Tokens</span><span class="stat-value">${tokens}</span></div>`;
+  if(totalTokens>0)h+=`<div class="stat"><span class="stat-label">Session</span><span class="stat-value">${totalTokens}</span></div>`;
+  $statsBar.innerHTML=h;
 }
 
-/* ─── Model dropdown ─── */
-function renderDropdown(filter = "") {
-  const q = filter.toLowerCase();
-  const filtered = q ? MODELS.filter(m => m.label.toLowerCase().includes(q) || m.id.toLowerCase().includes(q)) : MODELS;
-  const mobileModels = filtered.filter(m => m.mobile);
-  const desktopModels = filtered.filter(m => !m.mobile);
-  let html = "";
-  if (mobileModels.length) {
-    html += '<div class="model-section-label">Mobile-friendly</div>';
-    html += mobileModels.map(m => modelItemHtml(m)).join("");
-  }
-  if (desktopModels.length) {
-    html += '<div class="model-section-label">Desktop (more VRAM)</div>';
-    html += desktopModels.map(m => modelItemHtml(m)).join("");
+/* ═══ MODEL DROPDOWN ═══ */
+function renderDropdown(filter=""){
+  const q=filter.toLowerCase();
+  const filtered=q?MODELS.filter(m=>m.label.toLowerCase().includes(q)||m.id.toLowerCase().includes(q)||m.family.toLowerCase().includes(q)):MODELS;
+  const families=[...new Set(filtered.map(m=>m.family))];
+  let html="";
+  for(const fam of families){
+    const group=filtered.filter(m=>m.family===fam);
+    html+=`<div class="model-section-label">${fam}</div>`;
+    for(const m of group){
+      const locked=isMobile&&m.maxVramMB>MOBILE_VRAM_LIMIT;
+      const cls=locked?"model-item locked":"model-item";
+      const badges=[
+        m.isNew?'<span class="new-badge">NEW</span>':"",
+        m.mobile?'<span class="mobile-badge">MOBILE</span>':"",
+        `<span class="vram-badge">${m.vram}</span>`,
+        locked?'<span class="lock-badge">PC ONLY</span>':"",
+      ].filter(Boolean).join("");
+      html+=`<div class="${cls}" data-id="${m.id}" title="${m.desc}"><span class="model-item-name">${m.label}</span><span class="model-item-meta">${badges}</span></div>`;
+    }
   }
-  if (!filtered.length) html = '<div class="model-dropdown-loading">No models found</div>';
-  $dropdown.innerHTML = html;
-  $dropdown.querySelectorAll(".model-item").forEach(el => {
-    el.addEventListener("click", () => { $searchInput.value = el.dataset.id; closeDropdown(); });
+  if(!filtered.length)html='<div class="model-dropdown-loading">No models found</div>';
+  $dropdown.innerHTML=html;
+  $dropdown.querySelectorAll(".model-item:not(.locked)").forEach(el=>{
+    el.addEventListener("click",()=>{$searchInput.value=el.dataset.id;closeDropdown()});
   });
 }
 
-function modelItemHtml(m) {
-  return `<div class="model-item" data-id="${m.id}">
-    <span class="model-item-name">${m.label}</span>
-    <span class="model-item-meta">
-      ${m.mobile ? '<span class="mobile-badge">MOBILE</span>' : ''}
-      <span class="vram-badge">${m.vram}</span>
-    </span>
-  </div>`;
-}
-
-function openDropdown() { $searchWrap.classList.add("open"); renderDropdown(); }
-function closeDropdown() { $searchWrap.classList.remove("open"); }
-$searchInput.addEventListener("click", () => { $searchInput.removeAttribute("readonly"); openDropdown(); });
-$searchInput.addEventListener("focus", () => { $searchInput.removeAttribute("readonly"); openDropdown(); });
-$searchInput.addEventListener("input", () => renderDropdown($searchInput.value));
-document.addEventListener("click", e => { if (!e.target.closest(".model-search-wrap")) closeDropdown(); });
-$searchInput.addEventListener("keydown", e => {
-  if (e.key === "Escape") closeDropdown();
-  const items = $dropdown.querySelectorAll(".model-item");
-  if (!items.length) return;
-  const active = $dropdown.querySelector(".model-item.active");
-  let idx = Array.from(items).indexOf(active);
-  if (e.key === "ArrowDown") { e.preventDefault(); idx = Math.min(idx + 1, items.length - 1); items.forEach(i => i.classList.remove("active")); items[idx].classList.add("active"); items[idx].scrollIntoView({ block: "nearest" }); }
-  if (e.key === "ArrowUp") { e.preventDefault(); idx = Math.max(idx - 1, 0); items.forEach(i => i.classList.remove("active")); items[idx].classList.add("active"); items[idx].scrollIntoView({ block: "nearest" }); }
-  if (e.key === "Enter") { e.preventDefault(); if (active) { $searchInput.value = active.dataset.id; } closeDropdown(); }
+function openDropdown(){$searchWrap.classList.add("open");renderDropdown()}
+function closeDropdown(){$searchWrap.classList.remove("open")}
+$searchInput.addEventListener("click",()=>{$searchInput.removeAttribute("readonly");openDropdown()});
+$searchInput.addEventListener("focus",()=>{$searchInput.removeAttribute("readonly");openDropdown()});
+$searchInput.addEventListener("input",()=>renderDropdown($searchInput.value));
+document.addEventListener("click",e=>{if(!e.target.closest(".model-search-wrap"))closeDropdown()});
+$searchInput.addEventListener("keydown",e=>{
+  if(e.key==="Escape")closeDropdown();
+  const items=$dropdown.querySelectorAll(".model-item:not(.locked)");if(!items.length)return;
+  const active=$dropdown.querySelector(".model-item.active");let idx=Array.from(items).indexOf(active);
+  if(e.key==="ArrowDown"){e.preventDefault();idx=Math.min(idx+1,items.length-1);items.forEach(i=>i.classList.remove("active"));items[idx].classList.add("active");items[idx].scrollIntoView({block:"nearest"})}
+  if(e.key==="ArrowUp"){e.preventDefault();idx=Math.max(idx-1,0);items.forEach(i=>i.classList.remove("active"));items[idx].classList.add("active");items[idx].scrollIntoView({block:"nearest"})}
+  if(e.key==="Enter"){e.preventDefault();if(active){$searchInput.value=active.dataset.id}closeDropdown()}
 });
 
-/* ─── Settings ─── */
-$("btnSettings").addEventListener("click", () => { $("settingsPanel").classList.toggle("open"); $("btnSettings").classList.toggle("active"); });
-$("btnSysPrompt").addEventListener("click", () => { $("sysPromptWrap").classList.toggle("open"); $("btnSysPrompt").classList.toggle("active"); });
-$("tempSlider").addEventListener("input", () => $("tempVal").textContent = getTemp().toFixed(2));
-$("toppSlider").addEventListener("input", () => $("toppVal").textContent = getTopP().toFixed(2));
-$("repPenSlider").addEventListener("input", () => $("repPenVal").textContent = getRepPen().toFixed(2));
-
-function showScreen(id) { document.querySelectorAll(".screen").forEach(s => s.classList.toggle("active", s.id === id)); }
-
-/* ─── Engine loading ─── */
-$btnLoad.addEventListener("click", async () => {
-  const modelId = $searchInput.value.trim();
-  if (!modelId) { showToast("Select a model", "error"); return; }
-  showScreen("loading");
-  $downloadBar.style.display = "none";
-  try {
-    $loaderTx.textContent = "Initializing WebLLM…";
-    engine = await webllm.CreateMLCEngine(modelId, {
-      initProgressCallback: (progress) => {
-        $downloadBar.style.display = "";
-        const pct = Math.round(progress.progress * 100);
-        $downloadFill.style.width = pct + "%";
-        $downloadText.textContent = progress.text || `Loading: ${pct}%`;
-        $loaderTx.textContent = progress.text || "Loading model…";
-      }
+/* ═══ SETTINGS ═══ */
+$("btnSettings").addEventListener("click",()=>{$("settingsPanel").classList.toggle("open");$("btnSettings").classList.toggle("active")});
+$("btnSysPrompt").addEventListener("click",()=>{$("sysPromptWrap").classList.toggle("open");$("btnSysPrompt").classList.toggle("active")});
+$("tempSlider").addEventListener("input",()=>$("tempVal").textContent=getTemp().toFixed(2));
+$("toppSlider").addEventListener("input",()=>$("toppVal").textContent=getTopP().toFixed(2));
+$("repPenSlider").addEventListener("input",()=>$("repPenVal").textContent=getRepPen().toFixed(2));
+function showScreen(id){document.querySelectorAll(".screen").forEach(s=>s.classList.toggle("active",s.id===id))}
+
+/* ═══ ENGINE LOAD ═══ */
+$btnLoad.addEventListener("click",async()=>{
+  const modelId=$searchInput.value.trim();
+  if(!modelId){showToast("Select a model","error");return}
+  const m=MODELS.find(x=>x.id===modelId);
+  if(isMobile&&m&&m.maxVramMB>MOBILE_VRAM_LIMIT){showToast("This model requires a PC — too large for mobile","error");return}
+  showScreen("loading");$downloadBar.style.display="none";
+  try{
+    $("loaderText").textContent="Initializing WebLLM…";
+    engine=await webllm.CreateMLCEngine(modelId,{
+      initProgressCallback:(p)=>{$downloadBar.style.display="";const pct=Math.round(p.progress*100);$downloadFill.style.width=pct+"%";$downloadText.textContent=p.text||`Loading: ${pct}%`;$("loaderText").textContent=p.text||"Loading model…"}
     });
-    $loaderTx.textContent = "Ready!";
-    const m = MODELS.find(m => m.id === modelId);
-    $("chatTitle").textContent = m ? m.label : modelId.split("-").slice(0, 3).join(" ");
-    setTimeout(() => showScreen("chat"), 300);
-    showToast("Model loaded!", "success");
-  } catch (err) {
-    console.error(err);
-    $loaderTx.textContent = "Failed to load";
-    $loaderSub.textContent = err.message;
-    $("loaderRing").style.borderTopColor = "var(--red)";
-    showToast("Load failed: " + err.message.slice(0, 60), "error");
+    $("loaderText").textContent="Ready!";
+    $("chatTitle").textContent=m?m.label:modelId;
+    setTimeout(()=>showScreen("chat"),300);
+    showToast("Model loaded!","success");
+  }catch(err){
+    console.error(err);$("loaderText").textContent="Failed to load";
+    $("loaderSub").textContent=err.message;$("loaderRing").style.borderTopColor="var(--red)";
+    showToast("Load failed","error");
   }
 });
 
-/* ─── Input ─── */
-$input.addEventListener("input", () => { $input.style.height = "auto"; $input.style.height = Math.min($input.scrollHeight, 120) + "px"; updateSendBtn(); });
-$input.addEventListener("keydown", e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); if (!isGenerating) sendMessage(); } });
-$btnSend.addEventListener("click", () => { if (isGenerating) abortGeneration(); else sendMessage(); });
-function updateSendBtn() {
-  if (isGenerating) { $btnSend.disabled = false; $btnSend.classList.add("stopping"); }
-  else { $btnSend.classList.remove("stopping"); $btnSend.disabled = !$input.value.trim(); }
-}
-function abortGeneration() { if (abortController) { abortController.abort(); abortController = null; } }
-
-/* ─── Reset ─── */
-$btnReset.addEventListener("click", async () => {
-  chatHistory = [];
-  totalTokens = 0;
-  if (engine) try { await engine.resetChat(); } catch (e) { console.warn(e); }
-  $messages.innerHTML = '<div class="welcome-msg" id="welcomeMsg"><h3>Start a conversation</h3><p>Type a message below. The model runs entirely in your browser.</p></div>';
-  $errBanner.classList.remove("visible");
-  $input.value = ""; $input.style.height = "auto";
-  updateStatsBar(); updateSendBtn();
+/* ═══ INPUT ═══ */
+$input.addEventListener("input",()=>{$input.style.height="auto";$input.style.height=Math.min($input.scrollHeight,120)+"px";updateSendBtn()});
+$input.addEventListener("keydown",e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();if(!isGenerating)sendMessage()}});
+$btnSend.addEventListener("click",()=>{if(isGenerating)abortGeneration();else sendMessage()});
+function updateSendBtn(){if(isGenerating){$btnSend.disabled=false;$btnSend.classList.add("stopping")}else{$btnSend.classList.remove("stopping");$btnSend.disabled=!$input.value.trim()}}
+function abortGeneration(){if(abortController){abortController.abort();abortController=null}}
+
+/* ═══ RESET ═══ */
+$btnReset.addEventListener("click",async()=>{
+  chatHistory=[];totalTokens=0;
+  if(engine)try{await engine.resetChat()}catch(e){}
+  $messages.innerHTML='<div class="welcome-msg"><h3>Start a conversation</h3><p>Type a message below.<br/>Everything runs locally in your browser.</p></div>';
+  $errBanner.classList.remove("visible");$input.value="";$input.style.height="auto";updateStatsBar();updateSendBtn();
 });
 
-/* ─── Markdown ─── */
-function renderMarkdown(t) {
-  if (typeof marked === "undefined") return escapeHtml(t);
-  try { marked.setOptions({ breaks: true, gfm: true }); return marked.parse(t); } catch { return escapeHtml(t); }
-}
-function escapeHtml(s) { return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }
+/* ═══ MARKDOWN ═══ */
+function renderMarkdown(t){if(typeof marked==="undefined")return escapeHtml(t);try{marked.setOptions({breaks:true,gfm:true});return marked.parse(t)}catch{return escapeHtml(t)}}
+function escapeHtml(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}
 
-/* ─── Send message ─── */
-async function sendMessage() {
-  if (isGenerating || !engine) return;
-  const text = $input.value.trim();
-  if (!text) return;
+/* ═══ SEND ═══ */
+async function sendMessage(){
+  if(isGenerating||!engine)return;const text=$input.value.trim();if(!text)return;
   $errBanner.classList.remove("visible");
-  const welcome = $messages.querySelector(".welcome-msg");
-  if (welcome) welcome.remove();
-
-  appendMessage("user", text);
-  chatHistory.push({ role: "user", content: text });
-
-  $input.value = ""; $input.style.height = "auto";
-  isGenerating = true;
-  updateSendBtn();
-
-  const { groupEl, bubbleEl } = appendAssistantPlaceholder();
-
-  try {
-    const messages = [];
-    const sysPrompt = getSysPrompt();
-    if (sysPrompt) messages.push({ role: "system", content: sysPrompt });
+  const w=$messages.querySelector(".welcome-msg");if(w)w.remove();
+  appendMessage("user",text);chatHistory.push({role:"user",content:text});
+  $input.value="";$input.style.height="auto";isGenerating=true;updateSendBtn();
+  const{groupEl,bubbleEl}=appendAssistantPlaceholder();
+  try{
+    const messages=[];const sp=getSysPrompt();if(sp)messages.push({role:"system",content:sp});
     messages.push(...chatHistory);
-
-    const useStream = $streamToggle.checked;
-    let fullText = "";
-    let tokenCount = 0;
-    const startTime = performance.now();
-
-    const textNode = document.createElement("div");
-    textNode.className = "msg-text";
-    bubbleEl.appendChild(textNode);
-
-    if (useStream) {
-      abortController = new AbortController();
-      const stream = await engine.chat.completions.create({
-        messages,
-        temperature: getTemp(),
-        top_p: getTopP(),
-        max_tokens: getMaxTok(),
-        frequency_penalty: getRepPen() - 1,
-        stream: true,
-        stream_options: { include_usage: true },
-      });
-
-      for await (const chunk of stream) {
-        if (abortController?.signal?.aborted) break;
-        const delta = chunk.choices?.[0]?.delta?.content;
-        if (delta) {
-          fullText += delta;
-          tokenCount++;
-          textNode.innerHTML = renderMarkdown(fullText);
-          $messages.scrollTop = $messages.scrollHeight;
-        }
-        if (chunk.usage) tokenCount = chunk.usage.completion_tokens || tokenCount;
+    let fullText="",tokenCount=0;const startTime=performance.now();
+    const textNode=document.createElement("div");textNode.className="msg-text";bubbleEl.appendChild(textNode);
+    if($streamToggle.checked){
+      abortController=new AbortController();
+      const stream=await engine.chat.completions.create({messages,temperature:getTemp(),top_p:getTopP(),max_tokens:getMaxTok(),frequency_penalty:getRepPen()-1,stream:true,stream_options:{include_usage:true}});
+      for await(const chunk of stream){
+        if(abortController?.signal?.aborted)break;
+        const delta=chunk.choices?.[0]?.delta?.content;
+        if(delta){fullText+=delta;tokenCount++;textNode.innerHTML=renderMarkdown(fullText);$messages.scrollTop=$messages.scrollHeight}
+        if(chunk.usage)tokenCount=chunk.usage.completion_tokens||tokenCount;
       }
-    } else {
-      const reply = await engine.chat.completions.create({
-        messages,
-        temperature: getTemp(),
-        top_p: getTopP(),
-        max_tokens: getMaxTok(),
-        frequency_penalty: getRepPen() - 1,
-      });
-      fullText = reply.choices[0]?.message?.content || "";
-      tokenCount = reply.usage?.completion_tokens || 0;
-      textNode.innerHTML = renderMarkdown(fullText);
-    }
-
-    chatHistory.push({ role: "assistant", content: fullText });
-
-    if (fullText.includes("`") || fullText.includes("#") || fullText.includes("|") || fullText.includes("*")) {
-      bubbleEl.classList.add("md");
-    }
-
-    const elapsed = (performance.now() - startTime) / 1000;
-    const tps = tokenCount > 0 ? (tokenCount / elapsed).toFixed(1) : "?";
-    const statsEl = document.createElement("div");
-    statsEl.className = "msg-stats";
-    statsEl.textContent = `${tokenCount} tokens · ${tps} tok/s · ${elapsed.toFixed(1)}s`;
-    groupEl.appendChild(statsEl);
-
-    totalTokens += tokenCount;
-    updateStatsBar(tps, tokenCount);
-    bubbleEl.classList.remove("generating");
-
-  } catch (err) {
-    if (err.name === "AbortError") {
-      bubbleEl.classList.remove("generating");
-      showToast("Generation stopped", "");
-    } else {
-      console.error(err);
-      groupEl.remove();
-      $errBanner.textContent = "Error: " + err.message;
-      $errBanner.classList.add("visible");
-      showToast("Generation failed", "error");
+    }else{
+      const reply=await engine.chat.completions.create({messages,temperature:getTemp(),top_p:getTopP(),max_tokens:getMaxTok(),frequency_penalty:getRepPen()-1});
+      fullText=reply.choices[0]?.message?.content||"";tokenCount=reply.usage?.completion_tokens||0;textNode.innerHTML=renderMarkdown(fullText);
     }
+    chatHistory.push({role:"assistant",content:fullText});
+    if(fullText.includes("`")||fullText.includes("#")||fullText.includes("|")||fullText.includes("*"))bubbleEl.classList.add("md");
+    const elapsed=(performance.now()-startTime)/1000;const tps=tokenCount>0?(tokenCount/elapsed).toFixed(1):"?";
+    const se=document.createElement("div");se.className="msg-stats";se.textContent=`${tokenCount} tokens · ${tps} tok/s · ${elapsed.toFixed(1)}s`;groupEl.appendChild(se);
+    totalTokens+=tokenCount;updateStatsBar(tps,tokenCount);bubbleEl.classList.remove("generating");
+  }catch(err){
+    if(err.name==="AbortError"){bubbleEl.classList.remove("generating");showToast("Stopped","")}
+    else{console.error(err);groupEl.remove();$errBanner.textContent="Error: "+err.message;$errBanner.classList.add("visible");showToast("Failed","error")}
   }
-
-  isGenerating = false;
-  abortController = null;
-  updateSendBtn();
-  $messages.scrollTop = $messages.scrollHeight;
+  isGenerating=false;abortController=null;updateSendBtn();$messages.scrollTop=$messages.scrollHeight;
 }
 
-/* ─── Render helpers ─── */
-function appendMessage(role, text) {
-  const g = document.createElement("div"); g.className = `msg-group ${role}`;
-  const r = document.createElement("div"); r.className = "msg-role"; r.textContent = role === "user" ? "You" : "AI"; g.appendChild(r);
-  const b = document.createElement("div"); b.className = "msg-bubble"; b.textContent = text; g.appendChild(b);
-  $messages.appendChild(g); $messages.scrollTop = $messages.scrollHeight; return g;
+/* ═══ RENDER ═══ */
+function appendMessage(role,text){
+  const g=document.createElement("div");g.className=`msg-group ${role}`;
+  const r=document.createElement("div");r.className="msg-role";r.textContent=role==="user"?"You":"AI";g.appendChild(r);
+  const b=document.createElement("div");b.className="msg-bubble";b.textContent=text;g.appendChild(b);
+  $messages.appendChild(g);$messages.scrollTop=$messages.scrollHeight;return g;
 }
-
-function appendAssistantPlaceholder() {
-  const g = document.createElement("div"); g.className = "msg-group assistant";
-  const r = document.createElement("div"); r.className = "msg-role"; r.textContent = "AI"; g.appendChild(r);
-  const b = document.createElement("div"); b.className = "msg-bubble generating";
-  const d = document.createElement("span"); d.className = "thinking-dots";
-  for (let i = 0; i < 3; i++) d.appendChild(document.createElement("span"));
-  b.appendChild(d); g.appendChild(b); $messages.appendChild(g); $messages.scrollTop = $messages.scrollHeight;
-  return { groupEl: g, bubbleEl: b };
+function appendAssistantPlaceholder(){
+  const g=document.createElement("div");g.className="msg-group assistant";
+  const r=document.createElement("div");r.className="msg-role";r.textContent="AI";g.appendChild(r);
+  const b=document.createElement("div");b.className="msg-bubble generating";
+  const d=document.createElement("span");d.className="thinking-dots";
+  for(let i=0;i<3;i++)d.appendChild(document.createElement("span"));
+  b.appendChild(d);g.appendChild(b);$messages.appendChild(g);$messages.scrollTop=$messages.scrollHeight;
+  return{groupEl:g,bubbleEl:b};
 }
+window.visualViewport?.addEventListener("resize",()=>{$messages.scrollTop=$messages.scrollHeight});
 
-/* ─── Mobile keyboard resize ─── */
-window.visualViewport?.addEventListener("resize", () => { $messages.scrollTop = $messages.scrollHeight; });
-
-/* ─── WebGPU check ─── */
-(async () => {
-  if (!navigator.gpu) {
-    showToast("WebGPU not available — try Chrome or Edge", "error");
-    $btnLoad.disabled = true;
-    return;
-  }
-  try {
-    const a = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" });
-    if (!a) { showToast("No WebGPU adapter found", "error"); $btnLoad.disabled = true; }
-  } catch (e) { showToast("WebGPU init failed", "error"); }
+/* ═══ WEBGPU CHECK ═══ */
+(async()=>{
+  if(!navigator.gpu){showToast("WebGPU not available — try Chrome or Edge","error");$btnLoad.disabled=true;return}
+  try{const a=await navigator.gpu.requestAdapter({powerPreference:"high-performance"});if(!a){showToast("No WebGPU adapter","error");$btnLoad.disabled=true}}
+  catch(e){showToast("WebGPU init failed","error")}
 })();
 </script>
 </body>