Update index.html

index.html

@@ -25,7 +25,6 @@
   --amber:#c08520;--amber-bg:#fdf6e8;
   --radius:14px;--radius-sm:10px;--radius-xs:7px;
   --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.02);
-  --shadow-md:0 4px 16px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.04);
   --shadow-lg:0 12px 40px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
   --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
   --font-display:'Newsreader',Georgia,serif;
@@ -39,7 +38,6 @@ body.ready{opacity:1;transition:opacity .3s}
 input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appearance:none;appearance:none}
 ::-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{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}
@@ -48,39 +46,34 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .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}
-.landing-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
-.chip{font-family:var(--font-mono);font-size:.68rem;font-weight:500;padding:5px 12px;border-radius:100px;border:1px solid var(--border);color:var(--text-2);background:var(--surface);letter-spacing:.02em}
+.landing-sub{font-size:.95rem;color:var(--text-2);max-width:460px;line-height:1.7;margin-bottom:28px;font-weight:400}
+.model-count-info{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);margin-bottom:16px}
 .model-search-wrap{position:relative;width:100%;max-width:440px;margin-bottom:20px}
-.model-search-input{width:100%;padding:14px 40px 14px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-mono);font-size:.82rem;outline:none;transition:border-color .2s,box-shadow .2s}
+.model-search-input{width:100%;padding:14px 40px 14px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-mono);font-size:.8rem;outline:none;transition:border-color .2s,box-shadow .2s}
 .model-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.1)}
 .model-search-input::placeholder{color:var(--text-4)}
 .search-chevron{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-4);font-size:.65rem;pointer-events:none;transition:transform .2s}
 .model-search-wrap.open .search-chevron{transform:translateY(-50%) rotate(180deg)}
-.model-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1.5px solid var(--accent);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);max-height:320px;overflow-y:auto;z-index:100;display:none;box-shadow:var(--shadow-lg)}
+.model-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1.5px solid var(--accent);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);max-height:350px;overflow-y:auto;z-index:100;display:none;box-shadow:var(--shadow-lg)}
 .model-search-wrap.open .model-dropdown{display:block}
 .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{padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid var(--border-light);transition:background .1s;min-height:44px}
 .model-item:last-child{border-bottom:none}
 .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.locked{opacity:.35;cursor:not-allowed}
+.model-item-name{font-family:var(--font-mono);font-size:.72rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
 .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)}
+.model-item-meta{display:flex;gap:3px;align-items:center;flex-shrink:0}
+.vram-badge{background:var(--amber-bg);color:var(--amber);padding:2px 6px;border-radius:5px;font-family:var(--font-mono);font-size:.54rem;font-weight:600}
+.mobile-ok{background:var(--green-bg);color:var(--green);padding:2px 6px;border-radius:5px;font-family:var(--font-mono);font-size:.52rem;font-weight:700}
+.lock-badge{background:var(--red-bg);color:var(--red);padding:2px 6px;border-radius:5px;font-family:var(--font-mono);font-size:.52rem;font-weight:700}
+.model-section-label{padding:7px 14px 3px;font-family:var(--font-mono);font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);background:var(--bg-warm);position:sticky;top:0;z-index:1}
 .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}
 .btn-load:hover{background:var(--accent-hover);box-shadow:0 4px 20px rgba(79,109,245,.3);transform:translateY(-1px)}
 .btn-load:active{transform:translateY(0)}
 .btn-load:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
 .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{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)}}
@@ -90,13 +83,12 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .download-text{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);text-align:center;margin-bottom:6px}
 .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{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}
 .chat-avatar{width:36px;height:36px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent),#8b5cf6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.05rem;color:#fff;font-weight:600;flex-shrink:0}
 .chat-header-info{min-width:0}
-.chat-header-title{font-size:.92rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.chat-header-title{font-size:.88rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .chat-header-status{font-family:var(--font-mono);font-size:.6rem;color:var(--green);letter-spacing:.05em;display:flex;align-items:center;gap:4px;font-weight:500}
 .chat-header-status::before{content:"";width:5px;height:5px;background:var(--green);border-radius:50%;flex-shrink:0}
 .chat-header-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
@@ -108,8 +100,7 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .toggle-lbl{font-size:.65rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);transition:color .2s;white-space:nowrap}
 .toggle-pill:has(input:checked) .toggle-lbl{color:var(--accent-text)}
 .btn-icon{background:var(--surface);border:1px solid var(--border);color:var(--text-3);width:32px;height:32px;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:.78rem;flex-shrink:0}
-.btn-icon:hover{background:var(--bg-cool);color:var(--text-2)}
-.btn-icon:active{transform:scale(.95)}
+.btn-icon:hover{background:var(--bg-cool);color:var(--text-2)}.btn-icon:active{transform:scale(.95)}
 .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)}
@@ -118,7 +109,6 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .settings-row{display:flex;align-items:center;gap:5px}
 .settings-label{font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);min-width:40px;white-space:nowrap}
 .settings-select{padding:4px 8px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.72rem;outline:none;cursor:pointer;min-height:32px}
-.settings-select:focus{border-color:var(--accent)}
 .settings-slider{width:64px;accent-color:var(--accent);height:3px;cursor:pointer}
 .settings-val{font-family:var(--font-mono);font-size:.68rem;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
 .system-prompt-wrap{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;background:var(--bg)}
@@ -144,11 +134,9 @@ 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{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}
 .msg-bubble.md h1{font-size:1.2em}.msg-bubble.md h2{font-size:1.1em}.msg-bubble.md h3{font-size:1em}
-.msg-bubble.md h1:first-child,.msg-bubble.md h2:first-child,.msg-bubble.md h3:first-child{margin-top:0}
 .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}
@@ -156,40 +144,37 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 .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 th{background:var(--bg-cool);font-weight:600;color:var(--text-2);font-size:.72rem;text-transform:uppercase}
 .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}
-.msg-stats{font-family:var(--font-mono);font-size:.58rem;color:var(--text-3);margin-top:5px;letter-spacing:.03em}
+.msg-stats{font-family:var(--font-mono);font-size:.58rem;color:var(--text-3);margin-top:5px}
 .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}
 @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}
-.input-wrap textarea{width:100%;min-height:44px;max-height:120px;padding:11px 14px;background:var(--bg-warm);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:.88rem;line-height:1.5;resize:none;outline:none;transition:border-color .2s,box-shadow .2s}
+.input-wrap{flex:1}.input-wrap textarea{width:100%;min-height:44px;max-height:120px;padding:11px 14px;background:var(--bg-warm);border:1.5px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:.88rem;line-height:1.5;resize:none;outline:none;transition:border-color .2s,box-shadow .2s}
 .input-wrap textarea::placeholder{color:var(--text-4)}
 .input-wrap textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.08)}
 .btn-send{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;background:var(--accent);border:none;color:#fff;transition:all .15s}
 .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):hover{background:var(--accent-hover)}
 .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}
-.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}
+.chat-footer-note{font-family:var(--font-mono);font-size:.55rem;color:var(--text-4);text-align:center;margin-top:6px;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)}
-
 @media(max-width:640px){
-  .chip{font-size:.62rem;padding:4px 10px}.landing-sub{font-size:.88rem;padding:0 8px}
+  .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}
+  .chat-header-title{font-size:.82rem}.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}
@@ -199,10 +184,8 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
   .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}}
 </style>
 </head>
 <body>
@@ -212,30 +195,25 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
   <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. No server, no API keys — powered by WebLLM.</p>
-  <div class="landing-chips">
-    <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-count-info" id="modelCountInfo">Loading model list…</div>
   <div class="model-search-wrap" id="modelSearchWrap">
-    <input class="model-search-input" id="modelSearchInput" type="text" value="" placeholder="Select a model…" autocomplete="off" readonly/>
+    <input class="model-search-input" id="modelSearchInput" type="text" value="" placeholder="Select a model…" autocomplete="off"/>
     <span class="search-chevron">▾</span>
     <div class="model-dropdown" id="modelDropdown"></div>
   </div>
-  <button class="btn-load" id="btnLoad">Load Model</button>
+  <button class="btn-load" id="btnLoad" disabled>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><div class="loader-text" id="loaderText">Initializing…</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>
     <div class="chat-header-controls">
-      <label class="toggle-pill" title="Stream responses"><input type="checkbox" id="streamToggle" checked/><span class="toggle-dot"></span><span class="toggle-lbl">Stream</span></label>
+      <label class="toggle-pill" title="Stream"><input type="checkbox" id="streamToggle" checked/><span class="toggle-dot"></span><span class="toggle-lbl">Stream</span></label>
       <button class="btn-icon" id="btnSettings" title="Settings">⚙</button>
       <button class="btn-icon" id="btnSysPrompt" title="System prompt">S</button>
       <button class="btn-reset" id="btnReset">Reset</button>
@@ -244,17 +222,16 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
   <div class="settings-panel" id="settingsPanel">
     <div class="settings-row"><span class="settings-label">Temp</span><input type="range" class="settings-slider" id="tempSlider" min="0" max="200" value="70"/><span class="settings-val" id="tempVal">0.70</span></div>
     <div class="settings-row"><span class="settings-label">Top-P</span><input type="range" class="settings-slider" id="toppSlider" min="1" max="100" value="95"/><span class="settings-val" id="toppVal">0.95</span></div>
-    <div class="settings-row"><span class="settings-label">Tokens</span><select class="settings-select" id="maxTokSelect"><option value="256">256</option><option value="512" selected>512</option><option value="1024">1024</option><option value="2048">2048</option><option value="4096">4096</option></select></div>
-    <div class="settings-row"><span class="settings-label">Rep</span><input type="range" class="settings-slider" id="repPenSlider" min="100" max="200" value="110"/><span class="settings-val" id="repPenVal">1.10</span></div>
+    <div class="settings-row"><span class="settings-label">Tokens</span><select class="settings-select" id="maxTokSelect"><option value="256">256</option><option value="512" selected>512</option><option value="1024">1024</option><option value="2048">2048</option></select></div>
   </div>
   <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.<br/>Everything runs locally in your browser.</p></div></div>
+  <div class="chat-messages" id="chatMessages"><div class="welcome-msg"><h3>Start a conversation</h3><p>Type a message below.<br/>Everything runs locally.</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>
-      <button class="btn-send" id="btnSend" disabled title="Send">
+      <button class="btn-send" id="btnSend" disabled>
         <svg class="icon-send" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
         <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>
@@ -267,76 +244,73 @@ input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appea
 <script type="module">
 import * as webllm from "https://esm.run/@mlc-ai/web-llm";
 
-/* ═══ 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;
+/* ═══ DEVICE DETECT ═══ */
+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;
   return false;
 })();
+const MOBILE_VRAM_LIMIT=1500;
 
-/* ═══ MODEL CATALOG (2025~2026 Latest) ═══ */
-const MODELS = [
-  // ── 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" },
-];
+/* ═══ READ REAL MODEL LIST FROM WEBLLM ═══ */
+const allModels=webllm.prebuiltAppConfig.model_list;
+console.log(`WebLLM has ${allModels.length} prebuilt models`);
 
-const MOBILE_VRAM_LIMIT = 1300; // MB
+function getFamily(id){
+  if(/^Qwen3[^.]/i.test(id))return"Qwen3";
+  if(/^Qwen2/i.test(id))return"Qwen2.5";
+  if(/^Qwen/i.test(id))return"Qwen";
+  if(/^DeepSeek/i.test(id))return"DeepSeek";
+  if(/^SmolLM/i.test(id))return"SmolLM";
+  if(/^Llama-3\.2/i.test(id))return"Llama 3.2";
+  if(/^Llama-3\.1/i.test(id))return"Llama 3.1";
+  if(/^Llama/i.test(id))return"Llama";
+  if(/^gemma/i.test(id))return"Gemma";
+  if(/^Phi/i.test(id))return"Phi";
+  if(/^Mistral/i.test(id))return"Mistral";
+  if(/^Hermes/i.test(id))return"Hermes";
+  if(/^TinyLlama/i.test(id))return"TinyLlama";
+  return"Other";
+}
+
+/* Build enriched model list */
+const models=allModels.map(m=>{
+  const vramMB=m.vram_required_MB||m.required_features?.includes("shader-f16")?m.vram_required_MB:m.vram_required_MB;
+  const vram=vramMB?(vramMB>1024?(vramMB/1024).toFixed(1)+"GB":Math.round(vramMB)+"MB"):"?";
+  const mobileOk=m.low_resource_required===true||(vramMB&&vramMB<=MOBILE_VRAM_LIMIT);
+  const needsF16=m.required_features?.includes("shader-f16");
+  return{id:m.model_id,vramMB:vramMB||9999,vram,mobileOk,family:getFamily(m.model_id),needsF16};
+}).sort((a,b)=>a.vramMB-b.vramMB);
 
 /* ═══ STATE ═══ */
-let engine=null, isGenerating=false, abortController=null, chatHistory=[], totalTokens=0;
+let engine=null,isGenerating=false,abortController=null,chatHistory=[],totalTokens=0;
 const $=id=>document.getElementById(id);
+document.fonts.ready.then(()=>document.body.classList.add("ready"));
+const $messages=$("chatMessages"),$input=$("msgInput"),$btnSend=$("btnSend"),$btnLoad=$("btnLoad");
+const $searchInput=$("modelSearchInput"),$searchWrap=$("modelSearchWrap"),$dropdown=$("modelDropdown");
+const $downloadBar=$("downloadBar"),$downloadText=$("downloadText"),$downloadFill=$("downloadFill");
+const $statsBar=$("statsBar"),$toast=$("toast"),$errBanner=$("errorBanner");
 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";
-}
+/* Device badge */
+const $badge=$("deviceBadge");
+if(isMobile){$badge.textContent="MOBILE MODE";$badge.className="device-badge mobile"}
+else{$badge.textContent="DESKTOP MODE";$badge.className="device-badge desktop"}
+
+/* Count */
+const availableCount=isMobile?models.filter(m=>m.mobileOk).length:models.length;
+$("modelCountInfo").textContent=`${availableCount} models available (${models.length} total)`;
 
-/* ═══ SET DEFAULT MODEL ═══ */
-const defaultModel = isMobile ? "Qwen3-0.6B-q4f16_1-MLC" : "Qwen3-4B-q4f16_1-MLC";
-$searchInput.value = defaultModel;
+/* Default model */
+const defaultModel=isMobile
+  ?(models.find(m=>m.mobileOk&&m.family==="SmolLM")||models.find(m=>m.mobileOk)||models[0])
+  :(models.find(m=>m.family==="Qwen3"&&m.vramMB<3000)||models.find(m=>m.family==="Llama 3.2")||models[0]);
+$searchInput.value=defaultModel?.id||models[0]?.id||"";
+$btnLoad.disabled=false;
 
 /* ═══ TOAST ═══ */
 let toastTimer=null;
@@ -348,42 +322,38 @@ function updateStatsBar(tps=null,tokens=null){
   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>`;
+  if(totalTokens>0)h+=`<div class="stat"><span class="stat-label">Total</span><span class="stat-value">${totalTokens}</span></div>`;
   $statsBar.innerHTML=h;
 }
 
-/* ═══ MODEL DROPDOWN ═══ */
+/* ═══ 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 filtered=q?models.filter(m=>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>`;
+    html+=`<div class="model-section-label">${fam} (${group.length})</div>`;
     for(const m of group){
-      const locked=isMobile&&m.maxVramMB>MOBILE_VRAM_LIMIT;
+      const locked=isMobile&&!m.mobileOk;
       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>`;
+      let badges=`<span class="vram-badge">${m.vram}</span>`;
+      if(m.mobileOk)badges+=`<span class="mobile-ok">MOBILE</span>`;
+      if(locked)badges+=`<span class="lock-badge">PC</span>`;
+      html+=`<div class="${cls}" data-id="${m.id}"><span class="model-item-name">${m.id}</span><span class="model-item-meta">${badges}</span></div>`;
     }
   }
-  if(!filtered.length)html='<div class="model-dropdown-loading">No models found</div>';
+  if(!filtered.length)html='<div class="model-dropdown-loading">No models match</div>';
   $dropdown.innerHTML=html;
   $dropdown.querySelectorAll(".model-item:not(.locked)").forEach(el=>{
     el.addEventListener("click",()=>{$searchInput.value=el.dataset.id;closeDropdown()});
   });
 }
-
-function openDropdown(){$searchWrap.classList.add("open");renderDropdown()}
+function openDropdown(){$searchWrap.classList.add("open");renderDropdown($searchInput.value)}
 function closeDropdown(){$searchWrap.classList.remove("open")}
-$searchInput.addEventListener("click",()=>{$searchInput.removeAttribute("readonly");openDropdown()});
-$searchInput.addEventListener("focus",()=>{$searchInput.removeAttribute("readonly");openDropdown()});
+$searchInput.addEventListener("click",openDropdown);
+$searchInput.addEventListener("focus",openDropdown);
 $searchInput.addEventListener("input",()=>renderDropdown($searchInput.value));
 document.addEventListener("click",e=>{if(!e.target.closest(".model-search-wrap"))closeDropdown()});
 $searchInput.addEventListener("keydown",e=>{
@@ -392,7 +362,7 @@ $searchInput.addEventListener("keydown",e=>{
   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()}
+  if(e.key==="Enter"){e.preventDefault();if(active)$searchInput.value=active.dataset.id;closeDropdown()}
 });
 
 /* ═══ SETTINGS ═══ */
@@ -400,112 +370,103 @@ $("btnSettings").addEventListener("click",()=>{$("settingsPanel").classList.togg
 $("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 ═══ */
+/* ═══ 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}
+  const mid=$searchInput.value.trim();if(!mid){showToast("Select a model","error");return}
+  const mInfo=models.find(x=>x.id===mid);
+  if(isMobile&&mInfo&&!mInfo.mobileOk){showToast("Too large for mobile — pick a MOBILE model","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…"}
+    engine=await webllm.CreateMLCEngine(mid,{
+      initProgressCallback:p=>{$downloadBar.style.display="";const pct=Math.round(p.progress*100);$downloadFill.style.width=pct+"%";$downloadText.textContent=p.text||`${pct}%`;$("loaderText").textContent=p.text||"Loading…"}
     });
     $("loaderText").textContent="Ready!";
-    $("chatTitle").textContent=m?m.label:modelId;
+    $("chatTitle").textContent=mid.replace(/-MLC$/,"").replace(/-q[0-9]f[0-9]+[_0-9]*/,"");
     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");
+    console.error(err);$("loaderText").textContent="Failed";$("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()});
+$btnSend.addEventListener("click",()=>{if(isGenerating&&abortController){abortController.abort();abortController=null}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>';
+$("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.</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;")}
+function renderMd(t){if(typeof marked==="undefined")return esc(t);try{marked.setOptions({breaks:true,gfm:true});return marked.parse(t)}catch{return esc(t)}}
+function esc(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}
 
 /* ═══ SEND ═══ */
 async function sendMessage(){
   if(isGenerating||!engine)return;const text=$input.value.trim();if(!text)return;
-  $errBanner.classList.remove("visible");
-  const w=$messages.querySelector(".welcome-msg");if(w)w.remove();
-  appendMessage("user",text);chatHistory.push({role:"user",content:text});
+  $errBanner.classList.remove("visible");const w=$messages.querySelector(".welcome-msg");if(w)w.remove();
+  appendMsg("user",text);chatHistory.push({role:"user",content:text});
   $input.value="";$input.style.height="auto";isGenerating=true;updateSendBtn();
-  const{groupEl,bubbleEl}=appendAssistantPlaceholder();
+  const{g,b}=appendPlaceholder();
   try{
-    const messages=[];const sp=getSysPrompt();if(sp)messages.push({role:"system",content:sp});
-    messages.push(...chatHistory);
-    let fullText="",tokenCount=0;const startTime=performance.now();
-    const textNode=document.createElement("div");textNode.className="msg-text";bubbleEl.appendChild(textNode);
-    if($streamToggle.checked){
+    const msgs=[];const sp=getSysPrompt();if(sp)msgs.push({role:"system",content:sp});msgs.push(...chatHistory);
+    let full="",tc=0;const t0=performance.now();
+    const tn=document.createElement("div");tn.className="msg-text";b.appendChild(tn);
+    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}});
+      const stream=await engine.chat.completions.create({messages:msgs,temperature:getTemp(),top_p:getTopP(),max_tokens:getMaxTok(),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;
+        const d=chunk.choices?.[0]?.delta?.content;
+        if(d){full+=d;tc++;tn.innerHTML=renderMd(full);$messages.scrollTop=$messages.scrollHeight}
+        if(chunk.usage)tc=chunk.usage.completion_tokens||tc;
       }
     }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);
+      const r=await engine.chat.completions.create({messages:msgs,temperature:getTemp(),top_p:getTopP(),max_tokens:getMaxTok()});
+      full=r.choices[0]?.message?.content||"";tc=r.usage?.completion_tokens||0;tn.innerHTML=renderMd(full);
     }
-    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");
+    chatHistory.push({role:"assistant",content:full});
+    if(full.includes("`")||full.includes("#")||full.includes("*"))b.classList.add("md");
+    const el=(performance.now()-t0)/1000;const tps=tc>0?(tc/el).toFixed(1):"?";
+    const se=document.createElement("div");se.className="msg-stats";se.textContent=`${tc} tok · ${tps} t/s · ${el.toFixed(1)}s`;g.appendChild(se);
+    totalTokens+=tc;updateStatsBar(tps,tc);b.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")}
+    if(err.name==="AbortError"){b.classList.remove("generating");showToast("Stopped")}
+    else{console.error(err);g.remove();$errBanner.textContent="Error: "+err.message;$errBanner.classList.add("visible");showToast("Failed","error")}
   }
   isGenerating=false;abortController=null;updateSendBtn();$messages.scrollTop=$messages.scrollHeight;
 }
-
-/* ═══ RENDER ═══ */
-function appendMessage(role,text){
+function appendMsg(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;
+  $messages.appendChild(g);$messages.scrollTop=$messages.scrollHeight;
 }
-function appendAssistantPlaceholder(){
+function appendPlaceholder(){
   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};
+  return{g,b};
 }
 window.visualViewport?.addEventListener("resize",()=>{$messages.scrollTop=$messages.scrollHeight});
 
-/* ═══ WEBGPU CHECK ═══ */
+/* ═══ WEBGPU ═══ */
 (async()=>{
-  if(!navigator.gpu){showToast("WebGPU not available — try Chrome or Edge","error");$btnLoad.disabled=true;return}
+  if(!navigator.gpu){showToast("WebGPU not available — try Chrome/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")}
+  catch(e){showToast("WebGPU failed","error")}
 })();
 </script>
 </body>