Update index.html

index.html

@@ -4,470 +4,270 @@
 <meta charset="UTF-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
 <meta name="apple-mobile-web-app-capable" content="yes"/>
-<meta name="apple-mobile-web-app-status-bar-style" content="default"/>
 <meta name="mobile-web-app-capable" content="yes"/>
 <meta name="theme-color" content="#ffffff"/>
-<title>WebLLM Chat — Local AI in Your Browser</title>
+<title>WebLLM Chat — Local AI</title>
 <link rel="preconnect" href="https://fonts.googleapis.com"/>
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
 <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
-<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>"/>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-:root{
-  --bg:#ffffff;--bg-warm:#faf9f7;--bg-cool:#f4f2ef;
-  --surface:#ffffff;--surface-raised:#fefefe;
-  --border:#e8e5e0;--border-light:#f0ede8;
-  --text:#1a1815;--text-2:#5c5650;--text-3:#9c958d;--text-4:#c4beb6;
-  --accent:#4f6df5;--accent-hover:#3d5ae0;--accent-light:#eef1fe;--accent-text:#3b54c4;
-  --green:#2d9d5e;--green-bg:#edf7f0;
-  --red:#d44040;--red-bg:#fdf0f0;
-  --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-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;
-  --font-mono:'IBM Plex Mono','SF Mono',monospace;
-  --safe-top:env(safe-area-inset-top,0px);
-  --safe-bottom:env(safe-area-inset-bottom,0px);
-}
-html{font-size:16px;height:100%}
-body{font-family:var(--font);background:var(--bg-warm);color:var(--text);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;opacity:0}
-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}
+:root{--bg:#fff;--bg-warm:#faf9f7;--bg-cool:#f4f2ef;--surface:#fff;--border:#e8e5e0;--border-light:#f0ede8;--text:#1a1815;--text-2:#5c5650;--text-3:#9c958d;--text-4:#c4beb6;--accent:#4f6df5;--accent-hover:#3d5ae0;--accent-light:#eef1fe;--accent-text:#3b54c4;--green:#2d9d5e;--green-bg:#edf7f0;--red:#d44040;--red-bg:#fdf0f0;--amber:#c08520;--amber-bg:#fdf6e8;--radius:14px;--radius-sm:10px;--radius-xs:7px;--shadow-sm:0 1px 3px rgba(0,0,0,.04);--shadow-lg:0 12px 40px rgba(0,0,0,.08);--font:'Plus Jakarta Sans',system-ui,sans-serif;--font-display:'Newsreader',Georgia,serif;--font-mono:'IBM Plex Mono',monospace;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}
+html{font-size:16px;height:100%}body{font-family:var(--font);background:var(--bg-warm);color:var(--text);height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;opacity:0}body.ready{opacity:1;transition:opacity .3s}
+input,textarea,button,select{font-family:inherit;font-size:inherit;-webkit-appearance:none}
+::-webkit-scrollbar{width:4px}::-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}
-.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: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:.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: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: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:.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: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}
+#landing{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;overflow-y:auto;background:var(--bg);position:relative}
+.landing-deco{position:absolute;width:min(500px,90vw);height:min(500px,90vw);border-radius:50%;background:radial-gradient(circle,rgba(79,109,245,.07),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:20px;font-weight:500}
+.dbadge{font-family:var(--font-mono);font-size:.6rem;font-weight:600;padding:4px 12px;border-radius:100px;margin-bottom:8px}.dbadge.m{background:var(--green-bg);color:var(--green)}.dbadge.d{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;margin-bottom:12px}.landing-title em{font-style:italic;color:var(--accent)}
+.landing-sub{font-size:.92rem;color:var(--text-2);max-width:440px;line-height:1.7;margin-bottom:24px}
+.minfo{font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);margin-bottom:12px}
+.mwrap{position:relative;width:100%;max-width:440px;margin-bottom:20px}
+.minput{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:.78rem;outline:none;transition:border-color .2s,box-shadow .2s}
+.minput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.1)}
+.minput::placeholder{color:var(--text-4)}
+.mchev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-4);font-size:.65rem;pointer-events:none;transition:transform .2s}
+.mwrap.open .mchev{transform:translateY(-50%) rotate(180deg)}
+.mdrop{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)}
+.mwrap.open .mdrop{display:block}
+.mwrap.open .minput{border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-color:var(--accent)}
+.mi{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}
+.mi:last-child{border-bottom:none}.mi:hover:not(.lk){background:var(--accent-light)}
+.mi.lk{opacity:.3;cursor:not-allowed}
+.mi-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}
+.mi.lk .mi-name{text-decoration:line-through}
+.mi-meta{display:flex;gap:3px;align-items:center;flex-shrink:0}
+.vb{background:var(--amber-bg);color:var(--amber);padding:2px 6px;border-radius:5px;font-family:var(--font-mono);font-size:.52rem;font-weight:600}
+.mb{background:var(--green-bg);color:var(--green);padding:2px 5px;border-radius:5px;font-family:var(--font-mono);font-size:.5rem;font-weight:700}
+.lb{background:var(--red-bg);color:var(--red);padding:2px 5px;border-radius:5px;font-family:var(--font-mono);font-size:.5rem;font-weight:700}
+.msec{padding:7px 14px 3px;font-family:var(--font-mono);font-size:.55rem;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)}
+.btn-load:hover{background:var(--accent-hover);transform:translateY(-1px)}.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}
 #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)}}
-.loader-text{font-size:.88rem;color:var(--text-2);font-weight:500;text-align:center}
-.loader-sub{font-size:.75rem;color:var(--text-3);margin-top:4px;text-align:center;line-height:1.5}
-.download-bar{width:min(360px,85vw)}
-.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}
+.lr{width:56px;height:56px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
+.lt{font-size:.88rem;color:var(--text-2);font-weight:500;text-align:center}.ls{font-size:.75rem;color:var(--text-3);margin-top:4px;text-align:center}
+.dbar{width:min(360px,85vw)}.dt{font-family:var(--font-mono);font-size:.68rem;color:var(--text-3);text-align:center;margin-bottom:6px}
+.dtrack{height:4px;background:var(--bg-cool);border-radius:2px;overflow:hidden}.dfill{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:.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}
-.toggle-pill{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;padding:5px 10px;border-radius:100px;border:1px solid var(--border);background:var(--surface);transition:all .2s;min-height:32px}
-.toggle-pill:has(input:checked){background:var(--accent-light);border-color:var(--accent)}
-.toggle-pill input{display:none}
-.toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--text-4);transition:background .2s;flex-shrink:0}
-.toggle-pill:has(input:checked) .toggle-dot{background:var(--accent)}
-.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.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}
-.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-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)}
-.system-prompt-wrap.open{max-height:170px;padding:8px 16px 10px;border-bottom:1px solid var(--border-light)}
-.system-prompt-input{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-warm);color:var(--text);outline:none;resize:vertical;min-height:48px;max-height:120px;font-size:.8rem;line-height:1.5}
-.system-prompt-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,109,245,.08)}
-.system-prompt-input::placeholder{color:var(--text-4)}
-.stats-bar{display:flex;align-items:center;justify-content:center;gap:16px;padding:5px 16px;border-bottom:1px solid var(--border-light);background:var(--bg);flex-shrink:0;font-size:.62rem;flex-wrap:wrap}
-.stats-bar:empty{display:none}
-.stat{display:flex;align-items:center;gap:4px}
-.stat-label{color:var(--text-4);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-family:var(--font-mono);font-size:.55rem}
-.stat-value{color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:.68rem}
-.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}
-@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)}
-.msg-bubble{padding:12px 16px;border-radius:var(--radius);color:var(--text);font-size:.88rem;line-height:1.7;word-wrap:break-word;box-shadow:var(--shadow-sm)}
-.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}
-.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 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 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}
-.msg-bubble.md strong{font-weight:600}.msg-bubble.md a{color:var(--accent)}
-.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}
-.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}
+.ch{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}
+.ch-l{display:flex;align-items:center;gap:10px;min-width:0}
+.ch-av{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:1rem;color:#fff;font-weight:600;flex-shrink:0}
+.ch-info{min-width:0}.ch-title{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ch-st{font-family:var(--font-mono);font-size:.6rem;color:var(--green);display:flex;align-items:center;gap:4px;font-weight:500}.ch-st::before{content:"";width:5px;height:5px;background:var(--green);border-radius:50%}
+.ch-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
+.tp{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none;padding:5px 10px;border-radius:100px;border:1px solid var(--border);background:var(--surface);transition:all .2s;min-height:32px}
+.tp:has(input:checked){background:var(--accent-light);border-color:var(--accent)}.tp input{display:none}
+.td{width:8px;height:8px;border-radius:50%;background:var(--text-4);transition:background .2s}.tp:has(input:checked) .td{background:var(--accent)}
+.tl{font-size:.65rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}.tp:has(input:checked) .tl{color:var(--accent-text)}
+.bi{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}
+.bi:hover{background:var(--bg-cool)}.bi.act{background:var(--accent-light);color:var(--accent-text);border-color:var(--accent)}
+.br{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;min-height:32px}.br:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)}
+.sp{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}.sp.open{max-height:200px;padding:10px 16px}
+.sr{display:flex;align-items:center;gap:5px}
+.slb{font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;color:var(--text-3);min-width:40px}
+.ssl{padding:4px 8px;border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.72rem;outline:none;min-height:32px}
+.sslider{width:64px;accent-color:var(--accent);height:3px;cursor:pointer}
+.sv{font-family:var(--font-mono);font-size:.68rem;color:var(--text-2);min-width:28px;text-align:right}
+.spw{padding:0 16px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;background:var(--bg)}.spw.open{max-height:170px;padding:8px 16px 10px;border-bottom:1px solid var(--border-light)}
+.spi{width:100%;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg-warm);color:var(--text);outline:none;resize:vertical;min-height:48px;max-height:120px;font-size:.8rem;line-height:1.5}.spi:focus{border-color:var(--accent)}.spi::placeholder{color:var(--text-4)}
+.sb{display:flex;align-items:center;justify-content:center;gap:16px;padding:5px 16px;border-bottom:1px solid var(--border-light);background:var(--bg);flex-shrink:0;flex-wrap:wrap}.sb:empty{display:none}
+.st{display:flex;align-items:center;gap:4px}.stl{color:var(--text-4);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-family:var(--font-mono);font-size:.55rem}.stv{color:var(--text-2);font-weight:600;font-family:var(--font-mono);font-size:.68rem}.stv.hl{color:var(--accent-text)}
+.eb{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}.eb.vis{display:block}
+.cms{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
+.mg{display:flex;flex-direction:column;gap:3px;max-width:85%;animation:mi .25s ease}.mg.u{align-self:flex-end}.mg.a{align-self:flex-start}
+@keyframes mi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
+.mr{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:600}.mg.a .mr{color:var(--accent-text)}
+.mb2{padding:12px 16px;border-radius:var(--radius);font-size:.88rem;line-height:1.7;word-wrap:break-word;box-shadow:var(--shadow-sm)}
+.mg.u .mb2{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
+.mg.a .mb2{background:var(--surface);border:1px solid var(--border-light);border-bottom-left-radius:4px}
+.mg.a .mb2.gen{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,109,245,.08)}
+.mb2.md{white-space:normal}.mb2.md p{margin:0 0 .5em}.mb2.md p:last-child{margin:0}.mb2.md code{font-family:var(--font-mono);font-size:.84em;padding:2px 6px;background:var(--bg-cool);border-radius:5px;color:var(--accent-text)}.mb2.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}.mb2.md pre code{padding:0;background:none;color:var(--text);font-size:.78rem}
+.mb2.md ul,.mb2.md ol{margin:.4em 0;padding-left:1.4em}.mb2.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}
+.mb2.md table{margin:.5em 0;border-collapse:collapse;width:100%;font-size:.82rem}.mb2.md th,.mb2.md td{padding:6px 8px;border:1px solid var(--border)}.mb2.md th{background:var(--bg-cool);font-weight:600;font-size:.72rem;text-transform:uppercase}
+.mg.u .mb2.md code{background:rgba(255,255,255,.2);color:#fff}.mg.u .mb2.md pre{background:rgba(0,0,0,.1)}.mg.u .mb2.md pre code{color:#fff}
+.ms2{font-family:var(--font-mono);font-size:.58rem;color:var(--text-3);margin-top:5px}
+.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}.dots span:nth-child(2){animation-delay:.2s}.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}.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)}
-.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;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){
-  .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:.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}
-  .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}
-}
-@media(max-width:380px){.toggle-lbl{display:none}.landing-title{font-size:2rem}.chat-header-title{font-size:.78rem;max-width:120px}}
+.cia{padding:10px 12px;padding-bottom:calc(10px + var(--safe-bottom));border-top:1px solid var(--border-light);background:var(--bg);flex-shrink:0}
+.cir{display:flex;align-items:flex-end;gap:6px}
+.ciw{flex:1}.ciw 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}.ciw textarea:focus{border-color:var(--accent)}.ciw textarea::placeholder{color:var(--text-4)}
+.bs{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}.bs:disabled{opacity:.3;cursor:not-allowed}.bs:not(:disabled):active{transform:scale(.95)}
+.bs .is{display:none}.bs.stop{background:var(--red)}.bs.stop .ss{display:none}.bs.stop .is{display:block}
+.cfn{font-family:var(--font-mono);font-size:.55rem;color:var(--text-4);text-align:center;margin-top:6px}
+.wm{text-align:center;padding:40px 20px;color:var(--text-3);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.wm h3{font-family:var(--font-display);font-size:1.5rem;color:var(--text-2);margin-bottom:8px;font-weight:400;font-style:italic}.wm 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.err{border-color:var(--red);color:var(--red)}.toast.ok{border-color:var(--green);color:var(--green)}
+@media(max-width:640px){.ch{padding:8px 12px;padding-top:calc(8px + var(--safe-top));gap:6px}.ch-title{font-size:.82rem}.ch-r{gap:4px}.tp{padding:4px 8px;min-height:28px}.tl{font-size:.58rem}.bi{width:28px;height:28px;font-size:.7rem}.br{font-size:.58rem;padding:5px 10px;min-height:28px}.cms{padding:12px}.mg{max-width:90%}.mb2{padding:10px 14px;font-size:.85rem}.cia{padding:8px 10px;padding-bottom:calc(8px + var(--safe-bottom))}.bs{width:42px;height:42px}.ciw textarea{min-height:42px;padding:10px 12px;font-size:.86rem}}
+@media(max-width:380px){.tl{display:none}.landing-title{font-size:2rem}.ch-title{font-size:.78rem;max-width:120px}}
 </style>
 </head>
 <body>
 <div id="landing" class="screen active">
   <div class="landing-deco"></div>
-  <div class="landing-tag">WebLLM · Mobile + Desktop · WebGPU</div>
-  <div class="device-badge" id="deviceBadge"></div>
+  <div class="landing-tag">WebLLM · Mobile + Desktop</div>
+  <div class="dbadge" id="db"></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="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"/>
-    <span class="search-chevron">▾</span>
-    <div class="model-dropdown" id="modelDropdown"></div>
+  <p class="landing-sub">Run open-source LLMs in your browser. No server, no API keys.</p>
+  <div class="minfo" id="minfo">Loading models…</div>
+  <div class="mwrap" id="mwrap">
+    <input class="minput" id="minput" type="text" value="" placeholder="Select a model…" autocomplete="off"/>
+    <span class="mchev">▾</span>
+    <div class="mdrop" id="mdrop"></div>
   </div>
   <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 class="landing-footer">Powered by <a href="https://webllm.mlc.ai/" target="_blank">WebLLM</a></div>
 </div>
 <div id="loading" class="screen">
-  <div class="loader-ring" id="loaderRing"></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 class="lr" id="lr"></div>
+  <div><div class="lt" id="lt">Initializing…</div><div class="ls" id="ls">Cached after first download.</div></div>
+  <div class="dbar" id="dbar" style="display:none"><div class="dt" id="dtt"></div><div class="dtrack"><div class="dfill" id="df"></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"><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>
-    </div>
-  </div>
-  <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></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"><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>
-        <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>
-    </div>
-    <div class="chat-footer-note">100% local — no data leaves your device.</div>
+  <div class="ch"><div class="ch-l"><div class="ch-av">W</div><div class="ch-info"><div class="ch-title" id="ct">WebLLM</div><div class="ch-st">Ready</div></div></div>
+    <div class="ch-r"><label class="tp"><input type="checkbox" id="stog" checked/><span class="td"></span><span class="tl">Stream</span></label><button class="bi" id="bset">⚙</button><button class="bi" id="bsys">S</button><button class="br" id="brst">Reset</button></div>
   </div>
+  <div class="sp" id="sp"><div class="sr"><span class="slb">Temp</span><input type="range" class="sslider" id="stemp" min="0" max="200" value="70"/><span class="sv" id="vtemp">0.70</span></div><div class="sr"><span class="slb">Top-P</span><input type="range" class="sslider" id="stopp" min="1" max="100" value="95"/><span class="sv" id="vtopp">0.95</span></div><div class="sr"><span class="slb">Tokens</span><select class="ssl" id="smax"><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="spw" id="spw"><textarea class="spi" id="sysin" placeholder="System prompt (optional)…"></textarea></div>
+  <div class="sb" id="sbar"></div>
+  <div class="eb" id="eb"></div>
+  <div class="cms" id="cms"><div class="wm"><h3>Start a conversation</h3><p>Type a message below.</p></div></div>
+  <div class="cia"><div class="cir"><div class="ciw"><textarea id="inp" rows="1" placeholder="Type a message…"></textarea></div><button class="bs" id="bsend" disabled><svg class="ss" 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="is" 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="cfn">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";
 
-/* ═══ 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;
-
-/* ═══ READ REAL MODEL LIST FROM WEBLLM ═══ */
-const allModels=webllm.prebuiltAppConfig.model_list;
-console.log(`WebLLM has ${allModels.length} prebuilt models`);
-
-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;
+const isMob=(()=>{const u=navigator.userAgent||"";return/Mobile|Android|iPhone|iPad|iPod/i.test(u)||('ontouchstart'in window&&innerWidth<768)})();
 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 getSysPrompt=()=>$("sysPromptInput").value.trim();
-
-/* 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)`;
+/* Read ALL models from WebLLM runtime */
+const raw=webllm.prebuiltAppConfig.model_list;
+const SKIP=/snowflake|embed|arctic/i;
+const models=raw.filter(m=>!SKIP.test(m.model_id)).map(m=>{
+  const v=m.vram_required_MB||0;
+  const vStr=v>1024?(v/1024).toFixed(1)+"GB":Math.round(v)+"MB";
+  return{id:m.model_id,vram:v,vStr,low:!!m.low_resource_required};
+}).sort((a,b)=>a.vram-b.vram);
 
-/* 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;
+const mobModels=models.filter(m=>m.low);
+const $db=$("db");
+if(isMob){$db.textContent=`MOBILE · ${mobModels.length} models`;$db.className="dbadge m"}
+else{$db.textContent=`DESKTOP · ${models.length} models`;$db.className="dbadge d"}
+$("minfo").textContent=isMob?`${mobModels.length} mobile-safe of ${models.length} total`:`${models.length} models available`;
 
-/* ═══ 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)}
+/* Default */
+const def=isMob?(mobModels.find(m=>/SmolLM2-360M.*q4f16/i.test(m.id))||mobModels[0]):(models.find(m=>/Qwen3-4B-q4f16/i.test(m.id))||models.find(m=>/Llama-3\.2-3B.*q4f16/i.test(m.id))||models[0]);
+const $mi=$("minput"),$mw=$("mwrap"),$md=$("mdrop");
+$mi.value=def?.id||"";
+$("btnLoad").disabled=false;
 
-/* ═══ 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">Total</span><span class="stat-value">${totalTokens}</span></div>`;
-  $statsBar.innerHTML=h;
+function fam(id){
+  if(/^Qwen3-/i.test(id))return"Qwen3";if(/^Qwen2\.5-C/i.test(id))return"Qwen2.5-Coder";if(/^Qwen2\.5-M/i.test(id))return"Qwen2.5-Math";if(/^Qwen2\.5/i.test(id))return"Qwen2.5";if(/^Qwen2-M/i.test(id))return"Qwen2-Math";if(/^Qwen2/i.test(id))return"Qwen2";
+  if(/^DeepSeek/i.test(id))return"DeepSeek";if(/^SmolLM/i.test(id))return"SmolLM2";if(/^Llama-3\.2/i.test(id))return"Llama3.2";if(/^Llama-3\.1/i.test(id))return"Llama3.1";if(/^Llama-3-/i.test(id))return"Llama3";if(/^Llama-2/i.test(id))return"Llama2";
+  if(/^gemma-2-/i.test(id))return"Gemma2";if(/^gemma-/i.test(id))return"Gemma";if(/^Phi-3\.5/i.test(id))return"Phi3.5";if(/^Phi-3/i.test(id))return"Phi3";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";if(/^Ministral/i.test(id))return"Ministral";
+  if(/^stable/i.test(id))return"StableLM";if(/^Red/i.test(id))return"RedPajama";if(/^Wizard/i.test(id))return"Wizard";if(/^Open/i.test(id))return"OpenHermes";if(/^Neural/i.test(id))return"NeuralHermes";
+  return"Other";
 }
 
-/* ═══ DROPDOWN ═══ */
-function renderDropdown(filter=""){
-  const q=filter.toLowerCase();
-  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} (${group.length})</div>`;
-    for(const m of group){
-      const locked=isMobile&&!m.mobileOk;
-      const cls=locked?"model-item locked":"model-item";
-      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>`;
+function renderDD(q=""){
+  const f=q.toLowerCase();
+  const list=f?models.filter(m=>m.id.toLowerCase().includes(f)||fam(m.id).toLowerCase().includes(f)):models;
+  const fams=[...new Set(list.map(m=>fam(m.id)))];
+  let h="";
+  for(const fm of fams){
+    const grp=list.filter(m=>fam(m.id)===fm);
+    h+=`<div class="msec">${fm} (${grp.length})</div>`;
+    for(const m of grp){
+      const lk=isMob&&!m.low;
+      const c=lk?"mi lk":"mi";
+      let bd=`<span class="vb">${m.vStr}</span>`;
+      if(m.low)bd+=`<span class="mb">OK</span>`;
+      if(lk)bd+=`<span class="lb">PC</span>`;
+      h+=`<div class="${c}" data-id="${m.id}"><span class="mi-name">${m.id}</span><span class="mi-meta">${bd}</span></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()});
-  });
+  if(!list.length)h='<div style="padding:12px;text-align:center;color:var(--text-3);font-size:.75rem">No match</div>';
+  $md.innerHTML=h;
+  $md.querySelectorAll(".mi:not(.lk)").forEach(el=>el.addEventListener("click",()=>{$mi.value=el.dataset.id;closeDD()}));
 }
-function openDropdown(){$searchWrap.classList.add("open");renderDropdown($searchInput.value)}
-function closeDropdown(){$searchWrap.classList.remove("open")}
-$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=>{
-  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);
+function openDD(){$mw.classList.add("open");renderDD($mi.value)}
+function closeDD(){$mw.classList.remove("open")}
+$mi.addEventListener("click",openDD);$mi.addEventListener("focus",openDD);
+$mi.addEventListener("input",()=>renderDD($mi.value));
+document.addEventListener("click",e=>{if(!e.target.closest(".mwrap"))closeDD()});
+$mi.addEventListener("keydown",e=>{
+  if(e.key==="Escape")closeDD();
+  const items=$md.querySelectorAll(".mi:not(.lk)");if(!items.length)return;
+  const act=$md.querySelector(".mi.active")||null;let idx=Array.from(items).indexOf(act);
   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();const a=$md.querySelector(".mi.active");if(a)$mi.value=a.dataset.id;closeDD()}
 });
 
-/* ═══ 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));
-function showScreen(id){document.querySelectorAll(".screen").forEach(s=>s.classList.toggle("active",s.id===id))}
-
-/* ═══ LOAD ═══ */
-$btnLoad.addEventListener("click",async()=>{
-  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(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=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";$("loaderSub").textContent=err.message;
-    $("loaderRing").style.borderTopColor="var(--red)";showToast("Load failed","error");
-  }
-});
+/* Settings */
+$("bset").addEventListener("click",()=>{$("sp").classList.toggle("open");$("bset").classList.toggle("act")});
+$("bsys").addEventListener("click",()=>{$("spw").classList.toggle("open");$("bsys").classList.toggle("act")});
+$("stemp").addEventListener("input",()=>$("vtemp").textContent=(parseInt($("stemp").value)/100).toFixed(2));
+$("stopp").addEventListener("input",()=>$("vtopp").textContent=(parseInt($("stopp").value)/100).toFixed(2));
+function showScr(id){document.querySelectorAll(".screen").forEach(s=>s.classList.toggle("active",s.id===id))}
 
-/* ═══ 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&&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()}}
+let engine=null,isGen=false,abort=null,hist=[],totTok=0;
+let tt=null;function toast(m,c=""){clearTimeout(tt);$("toast").textContent=m;$("toast").className="toast "+c+" show";tt=setTimeout(()=>$("toast").classList.remove("show"),3000)}
+function stats(tps,tok){if(!totTok&&!tps){$("sbar").innerHTML="";return}let h="";if(tps!=null)h+=`<div class="st"><span class="stl">Speed</span><span class="stv hl">${tps} t/s</span></div>`;if(tok!=null)h+=`<div class="st"><span class="stl">Tokens</span><span class="stv">${tok}</span></div>`;if(totTok>0)h+=`<div class="st"><span class="stl">Total</span><span class="stv">${totTok}</span></div>`;$("sbar").innerHTML=h}
 
-/* ═══ 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.</p></div>';
-  $errBanner.classList.remove("visible");$input.value="";$input.style.height="auto";updateStatsBar();updateSendBtn();
+$("btnLoad").addEventListener("click",async()=>{
+  const mid=$mi.value.trim();if(!mid){toast("Select a model","err");return}
+  const mf=models.find(x=>x.id===mid);
+  if(isMob&&mf&&!mf.low){toast("Too large for mobile","err");return}
+  showScr("loading");$("dbar").style.display="none";
+  try{
+    $("lt").textContent="Initializing…";
+    engine=await webllm.CreateMLCEngine(mid,{initProgressCallback:p=>{$("dbar").style.display="";const pct=Math.round(p.progress*100);$("df").style.width=pct+"%";$("dtt").textContent=p.text||pct+"%";$("lt").textContent=p.text||"Loading…"}});
+    $("lt").textContent="Ready!";$("ct").textContent=mid.replace(/-MLC$/,"").replace(/-q\w+/,"");
+    setTimeout(()=>showScr("chat"),300);toast("Loaded!","ok");
+  }catch(e){console.error(e);$("lt").textContent="Failed";$("ls").textContent=e.message;$("lr").style.borderTopColor="var(--red)";toast("Failed","err")}
 });
 
-/* ═══ MARKDOWN ═══ */
-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;")}
+const $inp=$("inp"),$bs=$("bsend"),$cms=$("cms"),$eb=$("eb");
+$inp.addEventListener("input",()=>{$inp.style.height="auto";$inp.style.height=Math.min($inp.scrollHeight,120)+"px";ubtn()});
+$inp.addEventListener("keydown",e=>{if(e.key==="Enter"&&!e.shiftKey){e.preventDefault();if(!isGen)send()}});
+$bs.addEventListener("click",()=>{if(isGen&&abort){abort.abort();abort=null}else send()});
+function ubtn(){if(isGen){$bs.disabled=false;$bs.classList.add("stop")}else{$bs.classList.remove("stop");$bs.disabled=!$inp.value.trim()}}
+$("brst").addEventListener("click",async()=>{hist=[];totTok=0;if(engine)try{await engine.resetChat()}catch(e){}$cms.innerHTML='<div class="wm"><h3>Start a conversation</h3><p>Type a message below.</p></div>';$eb.classList.remove("vis");$inp.value="";$inp.style.height="auto";stats();ubtn()});
+function md(t){if(typeof marked==="undefined")return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");try{marked.setOptions({breaks:true,gfm:true});return marked.parse(t)}catch{return t}}
 
-/* ═══ 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();
-  appendMsg("user",text);chatHistory.push({role:"user",content:text});
-  $input.value="";$input.style.height="auto";isGenerating=true;updateSendBtn();
-  const{g,b}=appendPlaceholder();
+async function send(){
+  if(isGen||!engine)return;const text=$inp.value.trim();if(!text)return;
+  $eb.classList.remove("vis");const w=$cms.querySelector(".wm");if(w)w.remove();
+  amsg("u",text);hist.push({role:"user",content:text});
+  $inp.value="";$inp.style.height="auto";isGen=true;ubtn();
+  const{g,b}=aph();
   try{
-    const msgs=[];const sp=getSysPrompt();if(sp)msgs.push({role:"system",content:sp});msgs.push(...chatHistory);
+    const msgs=[];const sp=$("sysin").value.trim();if(sp)msgs.push({role:"system",content:sp});msgs.push(...hist);
     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: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 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 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:full});
+    if($("stog").checked){
+      abort=new AbortController();
+      const s=await engine.chat.completions.create({messages:msgs,temperature:parseInt($("stemp").value)/100,top_p:parseInt($("stopp").value)/100,max_tokens:parseInt($("smax").value),stream:true,stream_options:{include_usage:true}});
+      for await(const c of s){if(abort?.signal?.aborted)break;const d=c.choices?.[0]?.delta?.content;if(d){full+=d;tc++;tn.innerHTML=md(full);$cms.scrollTop=$cms.scrollHeight}if(c.usage)tc=c.usage.completion_tokens||tc}
+    }else{const r=await engine.chat.completions.create({messages:msgs,temperature:parseInt($("stemp").value)/100,top_p:parseInt($("stopp").value)/100,max_tokens:parseInt($("smax").value)});full=r.choices[0]?.message?.content||"";tc=r.usage?.completion_tokens||0;tn.innerHTML=md(full)}
+    hist.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"){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;
+    const se=document.createElement("div");se.className="ms2";se.textContent=`${tc} tok · ${tps} t/s · ${el.toFixed(1)}s`;g.appendChild(se);
+    totTok+=tc;stats(tps,tc);b.classList.remove("gen");
+  }catch(e){if(e.name==="AbortError"){b.classList.remove("gen");toast("Stopped")}else{console.error(e);g.remove();$eb.textContent="Error: "+e.message;$eb.classList.add("vis");toast("Failed","err")}}
+  isGen=false;abort=null;ubtn();$cms.scrollTop=$cms.scrollHeight;
 }
-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;
-}
-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{g,b};
-}
-window.visualViewport?.addEventListener("resize",()=>{$messages.scrollTop=$messages.scrollHeight});
-
-/* ═══ WEBGPU ═══ */
-(async()=>{
-  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 failed","error")}
-})();
+function amsg(r,t){const g=document.createElement("div");g.className=`mg ${r}`;const rl=document.createElement("div");rl.className="mr";rl.textContent=r==="u"?"You":"AI";g.appendChild(rl);const b=document.createElement("div");b.className="mb2";b.textContent=t;g.appendChild(b);$cms.appendChild(g);$cms.scrollTop=$cms.scrollHeight}
+function aph(){const g=document.createElement("div");g.className="mg a";const r=document.createElement("div");r.className="mr";r.textContent="AI";g.appendChild(r);const b=document.createElement("div");b.className="mb2 gen";const d=document.createElement("span");d.className="dots";for(let i=0;i<3;i++)d.appendChild(document.createElement("span"));b.appendChild(d);g.appendChild(b);$cms.appendChild(g);$cms.scrollTop=$cms.scrollHeight;return{g,b}}
+window.visualViewport?.addEventListener("resize",()=>{$cms.scrollTop=$cms.scrollHeight});
+(async()=>{if(!navigator.gpu){toast("WebGPU not available","err");$("btnLoad").disabled=true;return}try{const a=await navigator.gpu.requestAdapter({powerPreference:"high-performance"});if(!a){toast("No WebGPU adapter","err");$("btnLoad").disabled=true}}catch(e){toast("WebGPU failed","err")}})();
 </script>
 </body>
 </html>