/* ════════════════════════════════════════════════════════════
   style.css — LocalLLM by Actalithic
════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root,[data-theme="light"]{
  --bg:#ffffff;--bg2:#f4f4f7;--bg3:#eaeaed;
  --border:#dddde6;--border2:#c0c0cc;
  --ink:#111118;--ink2:#3a3a48;--muted:#787890;
  --accent:#111118;--accent-inv:#ffffff;
  --green:#1c7c45;--green-bg:#edf7f2;--green-dim:#d0eedd;
  --amber:#b06000;--amber-bg:#fff8ee;--amber-dim:#fde8b8;
  --red:#c0281a;--red-bg:#fdf2f1;--red-dim:#f8ccc8;
  --blue:#1155cc;--blue-bg:#eef3ff;
  --purple:#6633bb;--purple-bg:#f3eeff;--purple-dim:#d8c8f8;
  --think-bg:#f9f9fc;--think-border:#e4e4ee;--think-text:#5a5a72;
  --shadow:rgba(0,0,0,0.06);--shadow-lg:rgba(0,0,0,0.14);
  --radius:6px;
  --logo-light:url('https://i.ibb.co/mV4rQV7B/Chat-GPT-Image-18-Feb-2026-08-42-07.png');
  --logo-dark:url('https://i.ibb.co/tpSTrg7Z/whitelogo.png');
}
[data-theme="dark"]{
  --bg:#0c0c10;--bg2:#14141a;--bg3:#1e1e26;
  --border:#272730;--border2:#363642;
  --ink:#eeeef6;--ink2:#b8b8cc;--muted:#62627a;
  --accent:#eeeef6;--accent-inv:#0c0c10;
  --green:#28aa60;--green-bg:#0c1e14;--green-dim:#143a20;
  --amber:#e09020;--amber-bg:#1e1400;--amber-dim:#3a2800;
  --red:#e04535;--red-bg:#1a0c0c;--red-dim:#3a1010;
  --blue:#6699ff;--blue-bg:#0c1020;
  --purple:#aa88ff;--purple-bg:#1a1030;--purple-dim:#3a2060;
  --think-bg:#0e0e16;--think-border:#222232;--think-text:#686888;
  --shadow:rgba(0,0,0,0.35);--shadow-lg:rgba(0,0,0,0.6);
}

html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  height:100%;min-height:100dvh;
  background:var(--bg);color:var(--ink);
  font-family:'DM Mono',monospace;
  display:flex;flex-direction:column;align-items:center;
  transition:background .2s,color .2s;
  -webkit-font-smoothing:antialiased;
}


/* ════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════ */
header{
  width:100%;max-width:840px;
  padding:.65rem 1rem;
  display:flex;align-items:center;gap:.6rem;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;
  background:var(--bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  z-index:100;transition:background .2s,border-color .2s;
}
.header-brand{display:flex;align-items:center}
/* Light logo */
.logo-light{display:block}
.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}
.header-brand img.logo-img{
  height:38px;display:block;object-fit:contain;
}
.header-right{
  margin-left:auto;display:flex;align-items:center;gap:.35rem;flex-shrink:0;
}
.icon-btn{
  width:32px;height:32px;border-radius:0;
  border:1px solid var(--border);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;flex-shrink:0;
  color:var(--muted);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.icon-btn:hover{border-color:var(--border2);background:var(--bg3);color:var(--ink);transform:translateY(-1px)}
.icon-btn:active{transform:scale(.92)}
.icon-btn .material-icons-round{font-size:16px}
.icon-btn svg{width:14px;height:14px}
.icon-btn.bsky{color:#1185fe}
.icon-btn.bsky:hover{border-color:#1185fe;background:var(--blue-bg)}
.model-badge{
  font-family:'DM Mono',monospace;font-size:.6rem;letter-spacing:.06em;
  color:var(--muted);padding:3px 9px;
  border:1px solid var(--border);border-radius:20px;
  white-space:nowrap;background:var(--bg2);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;user-select:none;transition:all .15s;
  display:flex;align-items:center;gap:4px;
  -webkit-tap-highlight-color:transparent;
}
.model-badge .material-icons-round{font-size:12px;flex-shrink:0}
.model-badge:hover{border-color:var(--border2);color:var(--ink);background:var(--bg3)}
.model-badge.loaded{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.model-badge.loaded:hover{border-color:var(--border2);color:var(--ink);background:var(--bg3)}

/* ════════════════════════════════════════════════════════
   OFFLINE BANNER
════════════════════════════════════════════════════════ */
.offline-banner{
  display:none;width:100%;max-width:840px;
  background:var(--amber-bg);border-bottom:1px solid var(--amber-dim);
  padding:.4rem 1rem;font-size:.67rem;color:var(--amber);
  align-items:center;gap:.5rem;
}
.offline-banner.visible{display:flex}
.offline-banner .material-icons-round{font-size:14px;flex-shrink:0}

/* ════════════════════════════════════════════════════════
   MODAL — FULLSCREEN model manager (matches picker style)
════════════════════════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.65);z-index:200;
  align-items:stretch;justify-content:flex-end;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg);
  width:100%;max-width:100%;
  height:100dvh;max-height:100dvh;
  display:flex;flex-direction:column;
  overflow:hidden;
  border-radius:0;
  animation:fsSlideIn .22s cubic-bezier(.34,1.15,.64,1);
}
@keyframes fsSlideIn{
  from{opacity:0;transform:translateX(30px)}
  to  {opacity:1;transform:none}
}
/* Desktop: compact centered panel */
@media(min-width:601px){
  .modal-overlay{align-items:center;justify-content:center}
  .modal{
    width:420px;max-width:420px;
    height:auto;max-height:82dvh;
    border-radius:4px;
    animation:modalPopIn .2s cubic-bezier(.34,1.1,.64,1);
  }
  .modal-handle{display:none!important}
}
@keyframes modalPopIn{
  from{opacity:0;transform:scale(.97) translateY(6px)}
  to  {opacity:1;transform:none}
}
.modal-handle{display:none}
.modal-head{
  padding:.75rem 1.25rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:.6rem;flex-shrink:0;
  background:var(--bg);
  position:sticky;top:0;z-index:2;
}
.modal-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:1.05rem;letter-spacing:-.01em;flex:1;color:var(--ink);
}
.modal-close{
  background:var(--bg2);border:1px solid var(--border);border-radius:0;
  width:32px;height:32px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;color:var(--muted);flex-shrink:0;
}
.modal-close:hover{background:var(--bg3);color:var(--ink)}
.modal-close .material-icons-round{font-size:16px}

/* Body uses full remaining height, scrollable */
.modal-body{
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
  gap:0;padding:0;
}
@media(max-width:600px){
  .modal-body{gap:.6rem;padding:.5rem 0;}
  .modal-model-row{padding:1rem 1rem;}
  .modal-note{margin:0 .5rem;border-radius:4px;}
  .modal-section-label{border-radius:0;}
}
.modal-section-label{
  font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);padding:.7rem 1rem .35rem;
  background:var(--bg2);border-top:1px solid var(--border);
  position:sticky;top:0;z-index:1;
}
.modal-note{
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:.7rem 1rem;font-size:.67rem;line-height:1.65;color:var(--muted);
  display:flex;gap:.5rem;align-items:flex-start;
}
.modal-note .material-icons-round{font-size:13px;flex-shrink:0;margin-top:1px}

.modal-foot{
  padding:.65rem 1.25rem;border-top:1px solid var(--border);
  font-size:.6rem;color:var(--muted);line-height:1.7;flex-shrink:0;
  padding-bottom:max(.65rem, env(safe-area-inset-bottom));
  background:var(--bg);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
}
.modal-foot-text{flex:1}
.modal-refresh-btn{
  display:flex;align-items:center;gap:4px;
  font-family:'DM Mono',monospace;font-size:.58rem;
  padding:.28rem .6rem;border-radius:2px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg2);color:var(--muted);
  white-space:nowrap;flex-shrink:0;transition:all .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.modal-refresh-btn .material-icons-round{font-size:12px}
.modal-refresh-btn:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}
/* Refresh warning dialog */
.refresh-dialog-overlay{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.refresh-dialog-overlay.open{display:flex}
.refresh-dialog{
  background:var(--bg);border:1px solid var(--border);
  border-radius:4px;padding:1.5rem;max-width:340px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.refresh-dialog-icon{font-size:2rem;margin-bottom:.6rem;text-align:center}
.refresh-cache-size{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--bg3);border:1px solid var(--border);border-radius:2px;
  padding:.45rem .85rem;margin-bottom:.85rem;font-size:.68rem;color:var(--muted);
  font-family:'DM Mono',monospace;
}
.refresh-cache-size .material-icons-round{font-size:13px;color:var(--muted)}
.refresh-cache-size-val{color:var(--ink);font-weight:500}
.refresh-dialog-title{
  font-family:'Syne',sans-serif;font-weight:700;font-size:1rem;
  color:var(--ink);margin-bottom:.5rem;text-align:center;
}
.refresh-dialog-body{
  font-size:.68rem;color:var(--muted);line-height:1.7;text-align:center;margin-bottom:1.1rem;
}
.refresh-dialog-warn{
  background:var(--red-bg);border:1px solid var(--red);border-radius:2px;
  padding:.55rem .7rem;font-size:.63rem;color:var(--red);line-height:1.6;
  margin-bottom:1.1rem;
}
.refresh-dialog-actions{display:flex;gap:.5rem}
.refresh-dialog-actions button{
  flex:1;font-family:'DM Mono',monospace;font-size:.65rem;
  padding:.55rem .5rem;border-radius:2px;cursor:pointer;
  border:1px solid var(--border);transition:all .15s;
}
.refresh-dialog-cancel{background:var(--bg2);color:var(--ink)}
.refresh-dialog-cancel:hover{background:var(--bg3)}
.refresh-dialog-confirm{background:var(--red);color:#fff;border-color:var(--red)}
.refresh-dialog-confirm:hover{opacity:.85}

/* ── Picker-style model rows inside modal ── */
.modal-model-row{
  display:flex;align-items:center;gap:.8rem;
  padding:.9rem 1rem;cursor:default;
  border-bottom:1px solid var(--border);
  -webkit-tap-highlight-color:transparent;
}
.modal-model-row:last-child{border-bottom:none}
.modal-model-row.active-row{background:var(--green-bg)}
.modal-model-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--border2);transition:background .15s;
}
.modal-model-row.active-row .modal-model-dot{background:var(--green)}
.modal-model-info{flex:1;min-width:0}
.modal-model-name{
  font-size:.9rem;color:var(--ink);
  font-family:'DM Mono',monospace;
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;line-height:1.4;
}
.modal-model-row.active-row .modal-model-name{color:var(--green)}
.modal-model-meta{
  font-size:.62rem;color:var(--muted);margin-top:3px;
  display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;
}
.modal-model-actions{display:flex;gap:.3rem;align-items:center;flex-shrink:0}
/* ── Per-model memory usage bar in modal ── */
.modal-mem-bar{display:flex;align-items:center;gap:.4rem;padding:.3rem 0 0;flex-wrap:wrap}
.modal-mem-track{flex:1;min-width:60px;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
.modal-mem-fill{height:100%;border-radius:2px;width:0%;transition:width .5s cubic-bezier(.4,0,.2,1)}
.modal-mem-label{font-size:.56rem;color:var(--muted);white-space:nowrap;font-family:'DM Mono',monospace}
.modal-mem-quota-btn{
  width:18px;height:18px;border-radius:2px;border:1px solid var(--border);
  background:var(--bg3);color:var(--muted);display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s;
}
.modal-mem-quota-btn .material-icons-round{font-size:11px}
.modal-mem-quota-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg,#eef3ff)}


/* model cards (keep for legacy compat — now using modal-model-row) */
.model-card{border:1px solid var(--border);border-radius:0;padding:.8rem 1rem;background:var(--bg2);border-bottom-width:1px;display:flex;align-items:center;gap:.65rem}
.model-card:hover{background:var(--bg3)}
.model-card.active{background:var(--green-bg)}
.model-card-info{flex:1;min-width:0}
.model-card-name{font-size:.82rem;color:var(--ink);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;line-height:1.4}
.model-card-meta{font-size:.6rem;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.model-card-actions{display:flex;gap:.3rem;align-items:center;flex-shrink:0}
.mc-tag{font-size:.53rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:20px;white-space:nowrap;border:1px solid var(--border);color:var(--muted);background:var(--bg3)}
.mc-tag.green{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.mc-btn{
  font-family:'DM Mono',monospace;font-size:.64rem;
  padding:.32rem .7rem;border-radius:2px;cursor:pointer;
  transition:all .15s;white-space:nowrap;
  border:1px solid var(--border);background:var(--bg);color:var(--ink);
  display:flex;align-items:center;gap:3px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:32px;
}
.mc-btn .material-icons-round{font-size:13px}
.mc-btn:hover{border-color:var(--border2);background:var(--bg3)}
.mc-btn.switch{background:var(--ink);color:var(--accent-inv);border-color:var(--ink)}
.mc-btn.switch:hover{opacity:.8}
.mc-btn.del{color:var(--red);padding:.32rem .5rem}
.mc-btn.del:hover{background:var(--red-bg);border-color:var(--red)}
.mc-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

.info-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;border:1px solid var(--border);background:var(--bg3);font-size:.58rem;color:var(--muted);white-space:nowrap}
.info-chip .material-icons-round{font-size:10px}
.info-chip a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.info-chip a:hover{color:var(--ink)}
.model-info-popup-label{font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.model-info-popup-name{font-size:.9rem;color:var(--ink);font-weight:500;margin-bottom:.65rem;font-family:'Syne',sans-serif}
.model-info-popup-url{display:block;word-break:break-all;color:var(--blue);font-size:.72rem;line-height:1.7;text-decoration:underline;text-underline-offset:2px}

/* ════════════════════════════════════════════════════════
   CUSTOM MODEL PICKER (replaces native <select>)
════════════════════════════════════════════════════════ */
/* Hide native select visually but keep for non-JS fallback */
#modelSelect{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}

/* ════════════════════════════════════════════════════════
   RUN PILLS
════════════════════════════════════════════════════════ */
.run-pill{display:inline-flex;align-items:center;gap:3px;font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:20px;white-space:nowrap;font-weight:500}
.run-easy   {background:var(--green-bg);border:1px solid var(--green-dim);color:var(--green)}
.run-mid    {background:var(--amber-bg);border:1px solid var(--amber-dim);color:var(--amber)}
.run-hard   {background:var(--red-bg);border:1px solid var(--red-dim);color:var(--red)}
.run-extreme{background:var(--bg3);border:1px solid var(--border);color:var(--muted)}

/* ════════════════════════════════════════════════════════
   HERO BRAND TEXT
════════════════════════════════════════════════════════ */
.hero-brand-text{
  display:flex;align-items:baseline;justify-content:center;
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(2.4rem,10vw,4rem);
  letter-spacing:-.05em;line-height:1;user-select:none;
  width:100%;
}
.hero-local{color:var(--ink)}
.hero-llm  {color:var(--red)}

/* Load screen hero logo (5× header size) */
.load-logo-wrap{
  display:flex;align-items:center;justify-content:center;
  width:100%;
}
.load-logo-img{
  height:min(190px,42vw);width:auto;
  display:block;object-fit:contain;
}
/* theme-aware visibility on load screen */
.load-logo-light{display:block}
.load-logo-dark {display:none}
[data-theme="dark"] .load-logo-light{display:none}
[data-theme="dark"] .load-logo-dark {display:block}

/* ════════════════════════════════════════════════════════
   LOAD SCREEN
════════════════════════════════════════════════════════ */
#loadScreen{
  width:100%;max-width:840px;flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding:0;gap:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.load-hero{text-align:center;display:flex;flex-direction:column;gap:.4rem;width:100%;max-width:440px}
.load-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(.92rem,3vw,1.2rem);color:var(--ink);letter-spacing:-.02em}
.load-sub{font-size:.75rem;color:var(--muted);line-height:1.85;max-width:360px;margin:0 auto}
.progress-wrap{width:100%;max-width:440px;display:none;flex-direction:column;gap:.45rem}
.progress-track{height:2px;background:var(--border);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:var(--ink);width:0%;transition:width .3s ease}
.progress-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.progress-status{font-size:.62rem;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress-label{font-size:.65rem;color:var(--ink);letter-spacing:.05em;flex-shrink:0;font-weight:500}
.disclaimer-note{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;font-size:.72rem;line-height:1.75;color:var(--muted);display:flex;gap:.65rem;align-items:flex-start;width:100%;max-width:440px}
.disclaimer-note .material-icons-round{font-size:16px;flex-shrink:0;margin-top:1px}

/* model select card */
.model-select-card{width:100%;max-width:440px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);overflow:visible;position:relative}
.model-info-row{padding:.55rem .9rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.6rem;color:var(--muted);border-top:1px solid var(--border)}

/* speed table */
.speed-table{width:100%;max-width:440px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);overflow:hidden}
.speed-table-head{padding:.65rem 1.1rem;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.speed-row{display:flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;border-bottom:1px solid var(--border)}
.speed-row:last-child{border-bottom:none}
.speed-device{flex:1;font-size:.78rem;color:var(--ink2)}
.speed-val{color:var(--ink);white-space:nowrap;font-size:.75rem;text-align:right;font-weight:500}

/* toggle rows */
.toggle-section{width:100%;max-width:440px;display:flex;flex-direction:column;gap:.55rem}
.toggle-section-label{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.exp-row{display:flex;align-items:center;gap:1rem;padding:1.4rem 1.5rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);transition:background .15s}
.exp-label{flex:1;min-width:0}
.exp-label-title{font-size:1rem;color:var(--ink);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;line-height:1.4;font-weight:600}
.exp-label-sub{font-size:.8rem;color:var(--muted);margin-top:6px;line-height:1.7}
.exp-badge{font-size:.55rem;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);border:1px solid var(--blue);background:var(--blue-bg);padding:3px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.core-badge{font-size:.55rem;letter-spacing:.07em;text-transform:uppercase;color:var(--purple);border:1px solid var(--purple);background:var(--purple-bg);padding:3px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;border-radius:20px;background:var(--bg3);border:1px solid var(--border);cursor:pointer;transition:all .2s}
.toggle-slider:before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;left:2px;top:2px;background:var(--muted);transition:all .2s}
.toggle input:checked+.toggle-slider{background:var(--ink);border-color:var(--ink)}
.toggle input:checked+.toggle-slider:before{transform:translateX(20px);background:var(--accent-inv)}
#coreToggle:checked+.toggle-slider{background:var(--purple);border-color:var(--purple)}
#coreToggle:checked+.toggle-slider:before{background:#fff}
.load-btn{
  font-family:'Syne',sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.06em;
  padding:.9rem 2.6rem;background:var(--ink);color:var(--accent-inv);
  border:none;border-radius:0;cursor:pointer;
  transition:opacity .15s,transform .12s,box-shadow .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 20px var(--shadow);display:flex;align-items:center;gap:.5rem;
  min-height:52px;width:100%;max-width:440px;justify-content:center;
}
.load-btn .material-icons-round{font-size:18px}
.load-btn:hover{opacity:.87;transform:translateY(-2px)}
.load-btn:active{transform:translateY(0);opacity:.95}
.load-btn:disabled{background:var(--bg3);color:var(--muted);cursor:not-allowed;transform:none;box-shadow:none}

/* ════════════════════════════════════════════════════════
   CHAT SCREEN
════════════════════════════════════════════════════════ */
#chatScreen{display:none;flex-direction:column;width:100%;max-width:840px;flex:1;min-height:0}
.messages{flex:1;overflow-y:auto;padding:1.25rem 1rem 1rem;display:flex;flex-direction:column;gap:1.1rem;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.messages::-webkit-scrollbar{width:3px}
.messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.msg-row{display:flex;gap:.7rem;animation:msgIn .45s cubic-bezier(.16,.84,.44,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg-row.user{flex-direction:row-reverse}
.avatar{width:30px;height:30px;min-width:30px;border-radius:50%;flex-shrink:0;margin-top:2px;overflow:hidden;border:1px solid var(--border)}
.avatar img{width:100%;height:100%;object-fit:cover}
.msg-col{display:flex;flex-direction:column;gap:.22rem;max-width:82%}
.msg-row.user .msg-col{align-items:flex-end}
.msg-sender{font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 .12rem}
.bubble{padding:.75rem 1rem;font-size:.92rem;line-height:1.8;border:1px solid transparent;word-break:break-word}
.msg-row.ai   .bubble{background:var(--bg2);border-color:var(--border);border-radius:3px 12px 12px 12px;color:var(--ink)}
.msg-row.user .bubble{background:var(--ink);color:var(--accent-inv);border-radius:12px 3px 12px 12px}
/* Text fade-in for streaming AI text */
/* Welcome bubble subtle fade */

/* think block */
.think-block{background:var(--think-bg);border:1px solid var(--think-border);border-radius:4px;overflow:hidden;margin-bottom:.4rem;margin-top:.2rem}
.think-header{display:flex;align-items:center;gap:.45rem;padding:.5rem .8rem;cursor:pointer;transition:background .15s;user-select:none;-webkit-tap-highlight-color:transparent}
.think-header:hover{background:var(--bg3)}
.think-icon{font-size:14px;color:var(--blue)}
.think-label{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--think-text);flex:1}
.think-label-sub{font-size:.52rem;letter-spacing:0;text-transform:none;color:var(--think-text);opacity:.6;margin-left:.3rem;font-style:italic}
.think-chevron{font-size:13px;color:var(--think-text);transition:transform .2s}
.think-block.collapsed .think-chevron{transform:rotate(-90deg)}
.think-content{font-size:.76rem;line-height:1.7;color:var(--think-text);padding:.5rem .7rem .65rem;white-space:pre-wrap;word-break:break-word;border-top:1px solid var(--think-border);font-style:italic;max-height:300px;overflow-y:auto}
.think-block.collapsed .think-content{display:none}
.think-block:not(.collapsed) .think-content{animation:thinkIn .18s ease}
@keyframes thinkIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.typing-dots{display:flex;gap:5px;padding:6px 2px;align-items:center}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:tdot 1.2s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,75%,100%{transform:translateY(0);opacity:.3}38%{transform:translateY(-5px);opacity:1}}

/* ════════════════════════════════════════════════════════
   BOTTOM AREA
════════════════════════════════════════════════════════ */
.bottom-area{border-top:1px solid var(--border);background:var(--bg);padding-bottom:env(safe-area-inset-bottom,0px);transition:background .2s,border-color .2s;flex-shrink:0}
.core-stats-bar{background:var(--purple-bg);border-bottom:1px solid var(--purple-dim);padding:.35rem 1rem;display:flex;flex-direction:column;gap:.28rem;font-family:'DM Mono',monospace}
.core-stats-header{display:flex;align-items:center;gap:.4rem;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);margin-bottom:.05rem}
.core-split-row{display:flex;align-items:center;gap:.5rem}
.core-split-label{color:var(--muted);width:60px;flex-shrink:0;font-size:.58rem}
.core-bar-wrap{flex:1;height:3px;background:var(--border);border-radius:3px;overflow:hidden}
.core-bar{height:100%;border-radius:3px;width:0%;transition:width .7s cubic-bezier(.4,0,.2,1)}
.core-bar.gpu-bar{background:var(--purple)}
.core-bar.cpu-bar{background:var(--blue)}
.core-split-val{color:var(--muted);font-size:.57rem;white-space:nowrap;min-width:100px;text-align:right}
.input-bar{padding:.55rem 1rem .65rem;display:flex;gap:.5rem;align-items:flex-end}
textarea#msgInput{flex:1;font-family:'DM Mono',monospace;font-size:1rem;line-height:1.5;padding:.65rem .9rem;border:1px solid var(--border);border-radius:12px;background:var(--bg2);color:var(--ink);resize:none;min-height:48px;max-height:160px;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}
textarea#msgInput:focus{border-color:var(--border2);box-shadow:0 0 0 3px var(--shadow)}
textarea#msgInput::placeholder{color:var(--muted)}
.send-btn{width:44px;height:44px;min-width:44px;background:var(--ink);border:none;border-radius:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex-shrink:0;box-shadow:0 2px 10px var(--shadow)}
.send-btn:hover{opacity:.8;transform:translateY(-1px)}
.send-btn:active{transform:scale(.93);opacity:1}
.send-btn:disabled{background:var(--bg3);cursor:not-allowed;transform:none;box-shadow:none}
.send-btn .material-icons-round{font-size:18px;color:var(--accent-inv)}
.send-btn:disabled .material-icons-round{color:var(--muted)}
.info-bar{font-size:.56rem;color:var(--muted);text-align:center;padding:0 1rem .5rem;letter-spacing:.05em}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════
   MOBILE — full rework (max-width: 480px)
   Desktop untouched. Every value here is deliberate.
════════════════════════════════════════════════════════ */
@media(max-width:480px){

  /* ── Prevent iOS font-size boosting ── */
  html { font-size: 16px; }

  /* ── Layout: body centres content ── */
  body { align-items: center; }

  /* ── Header ── */
  header{
    max-width: 100%;
    padding:.7rem 1rem;
    gap:.55rem;
  }
  .header-brand img.logo-img{height:30px}
  .icon-btn{width:36px;height:36px}
  .icon-btn .material-icons-round{font-size:17px}
  .model-badge{
    max-width:120px;font-size:.7rem;
    padding:5px 10px;gap:5px;
  }

  /* ── Load screen outer shell ── */
  #loadScreen{
    max-width:100%;
    padding:0;
    gap:0;
    overflow-y:auto;
    height:auto;
    align-items:stretch;
    flex-direction:column;
  }

  /* ── Two-col becomes single stacked col ── */
  .load-desktop-cols{
    flex-direction:column;
    align-items:stretch;
    max-width:100%;
    height:auto;
    padding:0;
    gap:0;
    width:100%;
  }

  /* ── Right col (branding + picker) — shown first ── */
  .load-col-right{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:2rem;
    padding:2.25rem 1.5rem 2rem;
    background:var(--bg);
    border-left:none;
    border-bottom:1px solid var(--border);
    order:1;
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  /* ── Left col (engine options) — shown second ── */
  .load-col-left{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:1.75rem;
    padding:2rem 1.5rem 2.5rem;
    background:var(--bg2);
    order:2;
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  /* ── Logo ── */
  .load-logo-wrap{justify-content:center;width:100%}
  .load-logo-img{height:96px;width:auto}

  /* ── "LocalLLM" hero title ── */
  .hero-brand-text{
    font-size:3rem;
    letter-spacing:-.06em;
    justify-content:center;
    width:100%;
    margin:0;
  }

  /* ── Tagline block ── */
  .load-hero{
    gap:.8rem;
    align-items:center;
    text-align:center;
    width:100%;
    max-width:100%;
    margin:0;
  }
  .load-title{font-size:1rem;letter-spacing:-.01em}
  .load-sub{
    font-size:.82rem;line-height:1.9;
    max-width:100%;margin:0;
  }

  /* ── Progress bar ── */
  .progress-wrap{max-width:100%;width:100%}
  .progress-status{font-size:.72rem}
  .progress-label{font-size:.75rem}

  /* ── Model picker card ── */
  .model-select-card{
    width:100%;max-width:100%;
    border-radius:12px;
    overflow:visible;
  }
  .model-picker-btn{
    padding:1rem 2.8rem 1rem 1.1rem;
    font-size:.95rem;
    min-height:56px;
  }
  .model-info-row{
    padding:.75rem 1.1rem;
    gap:.55rem;
    font-size:.72rem;
    flex-wrap:wrap;
  }

  /* ── Download button ── */
  .load-btn{
    width:100%;max-width:100%;
    font-size:.95rem;
    padding:1.1rem 1.5rem;
    border-radius:0;
    min-height:58px;
    margin-top:0;
  }

  /* ── Left col section title ── */
  .load-col-title{
    font-size:.72rem;letter-spacing:.12em;
    margin-bottom:0;
  }

  /* ── Engine toggle rows ── */
  .toggle-section{gap:1rem;width:100%}
  .exp-row{
    padding:1.25rem 1.2rem;
    gap:1rem;
    border-radius:10px;
    align-items:flex-start;
  }
  .exp-label-title{
    font-size:.92rem;
    gap:.5rem;
    line-height:1.5;
  }
  .exp-label-sub{
    font-size:.78rem;
    margin-top:8px;
    line-height:1.75;
  }
  .toggle{flex-shrink:0;align-self:flex-start;margin-top:2px}

  /* ── Speed table ── */
  .speed-table{width:100%;border-radius:12px}
  .speed-table-head{
    padding:.8rem 1.1rem;
    font-size:.7rem;
  }
  .speed-row{padding:.8rem 1.1rem}
  .speed-device{font-size:.8rem}
  .speed-val{font-size:.8rem}

  /* ── Disclaimer ── */
  .disclaimer-note{
    font-size:.78rem;
    padding:1.1rem 1.2rem;
    border-radius:12px;
    gap:.75rem;
    line-height:1.8;
  }

  /* ── Mobile warning banner ── */
  .mobile-banner{
    padding:.85rem 1.5rem;
    font-size:.82rem;
    gap:.7rem;
    line-height:1.65;
  }

  /* ══ CHAT SCREEN ══ */
  #chatScreen { max-width: 100%; }

  /* ── Messages area ── */
  .messages{
    padding:1.5rem 1rem 1rem;
    gap:1.5rem;
  }

  /* ── Message rows ── */
  .msg-row{gap:.75rem}
  .avatar{width:30px;height:30px;min-width:30px}
  .msg-col{max-width:84%}
  .msg-sender{font-size:.65rem;margin-bottom:3px}

  /* ── Bubbles ── */
  .bubble{
    font-size:.95rem;
    padding:.9rem 1.1rem;
    line-height:1.85;
    border-radius:3px 14px 14px 14px;
  }
  .msg-row.user .bubble{
    border-radius:14px 3px 14px 14px;
  }

  /* ── Think block ── */
  .think-header{padding:.65rem 1rem}
  .think-label{font-size:.68rem}
  .think-content{font-size:.8rem;padding:.65rem .9rem .7rem}

  /* ── Input bar ── */
  .bottom-area{
    padding-bottom:env(safe-area-inset-bottom, 8px);
  }
  .input-bar{
    padding:.75rem 1rem .85rem;
    gap:.6rem;
    align-items:flex-end;
  }
  textarea#msgInput{
    font-size:16px;
    padding:.8rem 1rem;
    border-radius:14px;
    min-height:52px;
    line-height:1.6;
  }
  .send-btn{
    width:48px;height:48px;min-width:48px;
    border-radius:0;
    flex-shrink:0;
  }
  .stop-btn{
    width:44px;height:44px;border-radius:0;
    flex-shrink:0;
  }

  /* ── Info bar ── */
  .info-bar{
    font-size:.65rem;
    padding:.2rem 1rem .65rem;
    letter-spacing:.04em;
  }

  /* ── Core stats bar ── */
  .core-stats-bar{padding:.55rem 1rem .5rem}
  .core-stats-header{font-size:.7rem}
  .core-split-label{font-size:.68rem}
  .core-split-val{font-size:.66rem;min-width:80px}

  /* ── Chat sidebar ── */
  .chat-sidebar{width:100%;max-width:100%}
  .chat-sidebar-head{padding:1rem 1rem}
  .chat-sidebar-title{font-size:1.05rem}
  .chat-list-item{padding:.9rem 1rem}
  .chat-list-title{font-size:.86rem}
  .chat-list-meta{font-size:.68rem}
}
@media(min-width:600px){
  header{padding:.75rem 1.5rem;gap:.8rem}
  .header-brand img.logo-img{height:44px}
  .icon-btn{width:34px;height:34px}
  .model-badge{max-width:200px}
  /* #loadScreen padding handled by col-level padding in 600-899 range */
  #loadScreen{padding:0;gap:0}
  .messages{padding:1.75rem 1.5rem;gap:1.25rem}
  .input-bar{padding:.65rem 1.5rem .9rem}
  .core-stats-bar{padding:.55rem 1.5rem .45rem}
  .info-bar{padding:0 1.5rem .55rem}
}
@media(min-width:840px){
  .icon-btn{width:38px;height:38px}
  header{padding:.8rem 2rem}
  .header-brand img.logo-img{height:58px}
  #loadScreen{padding:3rem 2rem 6rem;gap:1.8rem}
  .messages{padding:2rem 2.5rem;gap:1.4rem}
  .input-bar{padding:.75rem 2.5rem 1rem}
  .core-stats-bar{padding:.6rem 2.5rem .5rem}
  .info-bar{padding:0 2.5rem .6rem}
  .msg-col{max-width:68%}
}

/* ════════════════════════════════════════════════════════
   BLOG PAGE
════════════════════════════════════════════════════════ */
.blog-main{width:100%;max-width:720px;padding:2.5rem 1rem 6rem;display:flex;flex-direction:column}
.blog-page-header{margin-bottom:2.5rem;border-bottom:1px solid var(--border);padding-bottom:1.75rem}
.blog-page-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(1.8rem,7vw,2.8rem);letter-spacing:-.04em;color:var(--ink);line-height:1.05;margin-bottom:.45rem}
.blog-page-title span{color:var(--red)}
.blog-page-sub{font-size:.76rem;color:var(--muted);line-height:1.75;max-width:480px}
.post-card{border-bottom:1px solid var(--border);padding:2rem 0;display:flex;flex-direction:column;gap:.95rem}
.post-card:first-of-type{padding-top:0}
.post-card:last-of-type{border-bottom:none}
.post-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-tag{padding:2px 8px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--muted);font-size:.53rem;letter-spacing:.08em;text-transform:uppercase}
.post-tag.release     {border-color:var(--green-dim);background:var(--green-bg);color:var(--green)}
.post-tag.update      {border-color:var(--blue-bg);background:var(--blue-bg);color:var(--blue)}
.post-tag.announcement{border-color:var(--amber-dim);background:var(--amber-bg);color:var(--amber)}
.post-tag.guide       {border-color:var(--purple-dim);background:var(--purple-bg);color:var(--purple)}
.post-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(1.1rem,4vw,1.5rem);letter-spacing:-.025em;color:var(--ink);line-height:1.2}
.post-image{width:100%;border-radius:10px;border:1px solid var(--border);background:var(--bg2);aspect-ratio:16/7;object-fit:cover;display:block}
.post-image-placeholder{width:100%;border-radius:10px;border:1px solid var(--border);background:var(--bg2);aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;gap:.5rem}
.post-image-placeholder .material-icons-round{font-size:20px}
.post-body{font-size:.88rem;line-height:1.9;color:var(--ink2)}
.post-body p{margin-bottom:.9rem}
.post-body p:last-child{margin-bottom:0}
.post-body strong{color:var(--ink);font-weight:500}
.post-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.post-body a:hover{color:var(--ink)}
.post-body code{font-family:'DM Mono',monospace;font-size:.8em;background:var(--bg3);border:1px solid var(--border);padding:1px 6px;border-radius:4px;color:var(--red)}
.post-footer{display:flex;align-items:center;gap:.7rem;padding-top:.2rem}
.post-author{display:flex;align-items:center;gap:.4rem;font-size:.66rem;color:var(--muted)}
.author-dot{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--accent-inv);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:.56rem;flex-shrink:0}
.post-share{margin-left:auto;display:flex;gap:.3rem}
.share-btn{width:28px;height:28px;border-radius:0;border:1px solid var(--border);background:var(--bg2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:all .15s;text-decoration:none}
.share-btn:hover{border-color:var(--border2);background:var(--bg3);color:var(--ink)}
.share-btn .material-icons-round{font-size:12px}
@media(max-width:480px){
  .blog-main{padding:1.75rem .85rem 4rem}
  .blog-page-header{margin-bottom:1.75rem;padding-bottom:1.25rem}
  .post-card{padding:1.5rem 0;gap:.75rem}
  .post-body{font-size:.84rem}
}
@media(min-width:600px){.blog-main{padding:3rem 1.5rem 6rem}}
@media(min-width:840px){.blog-main{padding:4rem 2rem 8rem}}

/* ════════════════════════════════════════════════════════
   LOGO SIZE — 2x on load screen / blog hero
   (header logos use header-constrained height)
════════════════════════════════════════════════════════ */
/* Header logos stay at header-defined heights */
header .logo-img { /* sizes set by responsive rules above */ }

/* Bigger logo displayed on load screen hero area if needed */
.logo-hero {
  width:min(360px,82vw);display:block;
  margin:0 auto;object-fit:contain;
}

/* ════════════════════════════════════════════════════════
   CUSTOM MODEL PICKER EXTRAS
════════════════════════════════════════════════════════ */
.model-select-card { overflow:visible; }

/* Picker opens relative to the card */
.model-picker-wrap { position:relative; width:100%; }

.model-picker-btn {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  width:100%;
  font-family:'DM Mono',monospace;
  font-size:.9rem;
  padding:.9rem 2.8rem .9rem 1rem;
  background:transparent;color:var(--ink);
  border:none;
  text-align:left;cursor:pointer;position:relative;
  display:flex;align-items:center;gap:.55rem;
  min-height:54px;transition:background .15s;
  border-radius:10px 10px 0 0;
}
.model-picker-btn:hover{background:var(--bg3)}
.model-picker-btn::after{
  content:'';position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  width:10px;height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;
  transition:transform .2s;
}
.model-picker-wrap.open .model-picker-btn::after{transform:translateY(-50%) rotate(180deg)}

.model-picker-cached-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--green);flex-shrink:0;
  opacity:0;transition:opacity .2s;
}
.model-picker-cached-dot.visible{opacity:1}

/* Dropdown (desktop: below button; mobile: bottom sheet) */
.model-picker-dropdown{
  display:none;
  z-index:160;
  background:var(--bg);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Desktop dropdown — position:fixed so it escapes overflow parents */
@media(min-width:601px){
  .model-picker-dropdown{
    position:fixed;
    border:1px solid var(--border2);
    border-radius:8px;
    box-shadow:0 14px 40px var(--shadow-lg);
    max-height:65dvh;
    /* JS sets top/left/width dynamically */
  }
  .model-picker-backdrop{display:none!important}
  .model-picker-sheet-handle{display:none!important}
  .model-picker-sheet-title{display:none!important}
}

/* Mobile bottom sheet */
@media(max-width:600px){
  .model-picker-dropdown{
    position:fixed;
    left:0;right:0;bottom:0;top:auto;
    border-radius:20px 20px 0 0;
    max-height:78dvh;
    box-shadow:0 -8px 60px var(--shadow-lg);
    border:none;
    padding-bottom:env(safe-area-inset-bottom,0px);
    z-index:160;
  }
}

.model-picker-wrap.open .model-picker-dropdown{
  display:block;
  animation:pickerDrop .22s cubic-bezier(.34,1.15,.64,1);
}
@keyframes pickerDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:600px){
  @keyframes pickerDrop{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}

/* Backdrop (mobile only) */
.model-picker-backdrop{
  display:none;
  position:fixed;inset:0;z-index:155;
  background:rgba(0,0,0,.55);
}
.model-picker-wrap.open .model-picker-backdrop{
  display:block;
}
@media(min-width:601px){
  .model-picker-wrap.open .model-picker-backdrop{display:none}
}

.model-picker-sheet-handle{
  width:36px;height:4px;border-radius:4px;
  background:var(--border2);
  margin:10px auto 0;
}
.model-picker-sheet-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:1rem;color:var(--ink);
  padding:.9rem 1.25rem .6rem;
  border-bottom:1px solid var(--border);
}

.picker-group-label{
  font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);padding:.7rem 1rem .35rem;
  background:var(--bg2);border-top:1px solid var(--border);
  position:sticky;top:0;z-index:1;
}
.picker-group-label:first-of-type{border-top:none}

.picker-option{
  display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1rem;cursor:pointer;
  transition:background .12s;
  border-bottom:1px solid var(--border);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.picker-option:last-child{border-bottom:none}
.picker-option:hover,.picker-option:active{background:var(--bg3)}
.picker-option.selected{background:var(--green-bg)}

.picker-option-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--border2);transition:background .15s;
}
.picker-option.selected .picker-option-dot{background:var(--green)}

.picker-option-info{flex:1;min-width:0}
.picker-option-name{
  font-size:.9rem;color:var(--ink);
  font-family:'DM Mono',monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.picker-option.selected .picker-option-name{color:var(--green)}
.picker-option-meta{
  font-size:.62rem;color:var(--muted);margin-top:3px;
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
}

.picker-option-cached{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);flex-shrink:0;
  opacity:0;transition:opacity .15s;
}
.picker-option-cached.visible{opacity:1}

.picker-check{
  flex-shrink:0;color:var(--green);
  opacity:0;transition:opacity .15s;
}
.picker-option.selected .picker-check{opacity:1}
.picker-check .material-icons-round{font-size:20px}

/* ── Mobile banner ─────────────────────────────────── */
.mobile-banner{
  display:flex;align-items:flex-start;gap:.6rem;
  background:linear-gradient(135deg,rgba(255,160,0,.12),rgba(255,100,0,.08));
  border-bottom:1px solid rgba(255,160,0,.3);
  padding:.65rem 1rem;font-size:.72rem;color:var(--ink);
  line-height:1.5;
}
.mobile-banner .material-icons-round{
  font-size:16px;color:#f90;flex-shrink:0;margin-top:1px;
}

/* ── Stop button ───────────────────────────────────── */
.stop-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:0;flex-shrink:0;
  background:rgba(255,60,60,.15);border:1.5px solid rgba(255,60,60,.35);
  color:var(--red,#e05);cursor:pointer;transition:background .15s,transform .1s;
}
.stop-btn:hover{background:rgba(255,60,60,.28);}
.stop-btn:active{transform:scale(.92);}
.stop-btn .material-icons-round{font-size:18px;}

/* ════════════════════════════════════════════════════════
   CHAT HISTORY SIDEBAR
════════════════════════════════════════════════════════ */
.chat-sidebar-overlay{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.4);backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.chat-sidebar-overlay.open{display:block}
.chat-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:300px;max-width:88vw;
  background:var(--bg);border-right:1px solid var(--border);
  z-index:301;display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  box-shadow:4px 0 30px var(--shadow-lg);
}
.chat-sidebar.open{transform:none}
.chat-sidebar.open ~ .chat-sidebar-overlay,
#chatSidebar.open ~ #chatSidebarOverlay{display:block!important}
#chatSidebarOverlay.active{display:block}
.chat-sidebar-head{
  display:flex;align-items:center;padding:.9rem 1rem;
  border-bottom:1px solid var(--border);flex-shrink:0;gap:.6rem;
  background:var(--bg);position:sticky;top:0;z-index:2;
}
.chat-sidebar-title{
  flex:1;font-family:'Syne',sans-serif;font-weight:700;
  font-size:.95rem;color:var(--ink);letter-spacing:-.01em;
}
.chat-sidebar-close{
  width:28px;height:28px;border-radius:2px;border:1px solid var(--border);
  background:var(--bg2);color:var(--muted);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:all .15s;
}
.chat-sidebar-close .material-icons-round{font-size:16px}
.chat-sidebar-close:hover{background:var(--bg3);color:var(--ink)}
.chat-sidebar-new{
  display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--border);cursor:pointer;flex-shrink:0;
  font-family:'DM Mono',monospace;font-size:.72rem;color:var(--muted);
  transition:background .15s;
}
.chat-sidebar-new .material-icons-round{font-size:16px}
.chat-sidebar-new:hover{background:var(--bg2);color:var(--ink)}
.chat-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0}
.chat-list-item{
  display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;
  cursor:pointer;border-bottom:1px solid var(--border);
  transition:background .12s;
}
.chat-list-item:hover{background:var(--bg2)}
.chat-list-item.current{background:var(--green-bg)!important}
.chat-list-icon{color:var(--muted);flex-shrink:0}
.chat-list-icon .material-icons-round{font-size:16px}
.chat-list-item.current .chat-list-icon{color:var(--green)}
.chat-list-info{flex:1;min-width:0}
.chat-list-title{
  font-size:.78rem;font-family:'DM Mono',monospace;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-list-item.current .chat-list-title{color:var(--green);font-weight:500}
.chat-list-meta{font-size:.57rem;color:var(--muted);margin-top:2px}
.chat-list-del{
  width:24px;height:24px;border-radius:2px;border:1px solid transparent;
  background:transparent;color:var(--muted);display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;
  transition:all .15s;opacity:0;
}
.chat-list-del .material-icons-round{font-size:13px}
.chat-list-item:hover .chat-list-del{opacity:1}
.chat-list-del:hover{border-color:var(--red);color:var(--red);background:var(--red-bg)}

/* ── Per-model think toggle in picker ── */
.picker-think-row{
  display:flex;align-items:center;gap:.4rem;
  padding:.3rem 0 .15rem;
  border-top:1px solid var(--border);margin-top:.3rem;
  -webkit-tap-highlight-color:transparent;
}
.picker-think-label{
  flex:1;font-size:.58rem;color:var(--muted);
  display:flex;align-items:center;gap:.25rem;
}
.picker-think-toggle{position:relative;display:inline-block;width:28px;height:16px;flex-shrink:0}
.picker-think-toggle input{opacity:0;width:0;height:0;position:absolute}
.picker-think-slider{
  position:absolute;inset:0;border-radius:20px;
  background:var(--bg3);border:1px solid var(--border);cursor:pointer;
  transition:all .2s;
}
.picker-think-slider:before{
  content:'';position:absolute;width:10px;height:10px;
  border-radius:50%;left:2px;top:2px;background:var(--muted);transition:.2s;
}
.picker-think-toggle input:checked + .picker-think-slider{
  background:var(--purple);border-color:var(--purple);
}
.picker-think-toggle input:checked + .picker-think-slider:before{
  transform:translateX(12px);background:#fff;
}

/* ════════════════════════════════════════════════════════
   DESKTOP LAYOUT — full-width, two columns
════════════════════════════════════════════════════════ */
@media(min-width: 900px) {

  /* Body: stop centering, let children stretch */
  body { align-items: stretch; }

  /* Header: full width, no cap */
  header {
    max-width: none;
    width: 100%;
    padding: .8rem 2.5rem;
  }

  /* Load screen: full width, two-col row, no max-width cap */
  #loadScreen {
    max-width: none;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: visible;
    height: calc(100dvh - 65px);
  }

  /* ── Two-column container fills the whole load screen ── */
  .load-desktop-cols {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 100%;
    gap: 0;
  }

  /* ── RIGHT col: branding + picker — 44% of screen ── */
  .load-col-right {
    width: 44%;
    min-width: 340px;
    max-width: none;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 3.5rem;
    gap: 1.8rem;
    overflow-y: visible;
    overflow-x: visible;
    order: 2;
    border-left: 1px solid var(--border);
  }

  /* ── LEFT col: options — 56% of screen ── */
  .load-col-left {
    flex: 1;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    padding: 3rem 3.5rem;
    gap: 1.8rem;
    overflow-y: auto;
    overflow-x: visible;
    order: 1;
    background: var(--bg2);
  }

  /* Strip max-width from every child in both cols */
  .load-col-right .model-select-card,
  .load-col-right .load-btn,
  .load-col-right .load-hero,
  .load-col-right .load-logo-wrap,
  .load-col-left .speed-table,
  .load-col-left .toggle-section,
  .load-col-left .disclaimer-note,
  .load-col-left .progress-wrap,
  .progress-wrap {
    max-width: 100%;
    width: 100%;
  }

  /* Logo sizing */
  .load-col-right .load-logo-img {
    height: clamp(60px, 8vw, 120px);
  }

  /* Brand name */
  .load-col-right .hero-brand-text {
    font-size: clamp(3rem, 4.5vw, 5.5rem);
  }

  /* Tagline */
  .load-col-right .load-title {
    font-size: clamp(1rem, 1.3vw, 1.3rem);
  }

  /* Subtitle */
  .load-col-right .load-sub {
    font-size: clamp(.8rem, 1vw, 1rem);
    max-width: 100%;
    margin: 0;
    line-height: 1.8;
  }

  .load-col-right .load-hero {
    text-align: left;
    align-items: flex-start;
    max-width: 100%;
  }

  .load-col-right .load-logo-wrap {
    justify-content: flex-start;
  }

  #progressWrap { max-width: 100%; width: 100%; }

  /* Column title labels */
  .load-col-title {
    font-size: .65rem;
    margin-bottom: .3rem;
  }

  /* Load button full width */
  .load-col-right .load-btn {
    max-width: 100%;
    margin-top: auto;
  }

  /* Desktop picker: use fixed positioning to escape all overflow contexts */
  .model-picker-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 9000;
    max-height: 45vh;
    overflow-y: auto;
    width: 360px;
    border-radius: 10px;
    box-shadow: 0 8px 40px var(--shadow-lg);
  }
  .model-picker-wrap {
    position: relative;
  }

  /* Chat screen also full width */
  #chatScreen {
    max-width: none;
    width: 100%;
  }
  .messages {
    padding: 2rem 3rem;
  }
  .input-bar {
    padding: .8rem 3rem 1rem;
  }
  .info-bar {
    padding: 0 3rem .6rem;
  }
  .core-stats-bar {
    padding: .6rem 3rem .5rem;
  }
  .msg-col { max-width: 60%; }
}

@media(min-width: 1300px) {
  .load-col-right { width: 42%; padding: 3rem 4rem; }
  .load-col-left  { padding: 3rem 4rem; }
  .messages       { padding: 2rem 5rem; }
  .input-bar      { padding: .8rem 5rem 1rem; }
  .info-bar       { padding: 0 5rem .6rem; }
  .core-stats-bar { padding: .6rem 5rem .5rem; }
}

/* ── Streaming text fade-in (no blink, incremental) ── */
/* ── Word-by-word burst animation ── */
.word-token{display:inline;white-space:pre-wrap}
@keyframes wordIn{
  0%  {opacity:0;transform:translateY(4px)}
  40% {opacity:.4;transform:translateY(2px)}
  100%{opacity:1;transform:translateY(0)}
}



/* ── Mobile explicit resets to prevent desktop CSS bleed ── */
/* ════════════════════════════════════════════════════════
   TABLET / NARROW — layout reset (481px – 899px)
   Stacks the two columns, removes desktop-only sizing.
   NOTE: scoped to 481px+ so it never overrides the
   dedicated max-width:480px phone block below.
════════════════════════════════════════════════════════ */
@media(min-width: 481px) and (max-width: 899px) {
  body { align-items: center; }
  header { max-width: 840px; }

  /* All max-width caps lifted — children go full width */
  .model-select-card,
  .progress-wrap,
  .disclaimer-note,
  .speed-table,
  .toggle-section,
  .load-btn { max-width: 100%; }

  #loadScreen {
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 0;
    overflow-y: auto;
    height: auto;
  }

  .load-desktop-cols {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    height: auto;
    padding: 0;
    width: 100%;
  }

  /* Default stacked col styles (overridden per breakpoint below) */
  .load-col-right,
  .load-col-left {
    width: 100%;
    max-width: 100%;
    overflow: visible;
    order: unset;
  }

  /* Right col centres its children on narrow screens */
  .load-col-right {
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem 1.5rem;
    gap: 1.6rem;
    border-left: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .load-col-right .load-hero {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }

  /* Left col full-width */
  .load-col-left {
    padding: 2rem 2rem 2.5rem;
    gap: 1.4rem;
    background: var(--bg2);
  }

  #chatScreen { max-width: 840px; }
}
/* ═══ Mobile overflow fixes for picker ═══ */
@media(max-width:600px){
  .model-select-card{overflow:visible!important}
  #modelPickerWrap{overflow:visible!important}
}

/* ════════════════════════════════════════════════════════
   ACC ENGINE ADDITIONS — LocalLLM by Actalithic
════════════════════════════════════════════════════════ */

/* ACC badge in picker and modal */
.acc-badge{
  display:inline-block;font-size:.5rem;letter-spacing:.05em;
  color:var(--purple);border:1px solid var(--purple);
  border-radius:3px;padding:1px 5px;vertical-align:middle;
  background:var(--purple-bg);
}
.acc-badge.lg{font-size:.62rem;padding:2px 7px;border-radius:4px}

/* Phase labels in progress bar for ACC loading */
.progress-phase{
  font-size:.58rem;color:var(--purple);letter-spacing:.06em;
  text-transform:uppercase;margin-left:.4rem;opacity:.8;
}

/* Dev download tooltip — shown on hover of .acc Load button */
.mc-btn[ondblclick]::after{
  content:"Double-click to download .acc";
  position:absolute;bottom:calc(100% + 6px);right:0;
  font-size:.58rem;color:var(--ink2);background:var(--bg2);
  border:1px solid var(--border2);border-radius:4px;
  padding:4px 8px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .15s;z-index:999;
}
.mc-btn[ondblclick]:hover::after{opacity:1}
.modal-model-actions{position:relative}

/* Download ACC button (purple) */
.mc-btn.acc-dl{
  color:var(--purple);border-color:var(--purple);
  background:var(--purple-bg);
}
.mc-btn.acc-dl:hover{
  background:var(--purple-dim);border-color:var(--purple);
}

/* Converter link in modal footer */
.modal-foot-convert{
  font-size:.6rem;color:var(--purple);
  display:flex;align-items:center;gap:.3rem;
  text-decoration:none;opacity:.8;transition:opacity .15s;
  margin-right:auto;
}
.modal-foot-convert:hover{opacity:1}
.modal-foot-convert .material-icons-round{font-size:12px}

/* ACC model engine indicator in speed table */
.speed-val.acc{color:var(--purple);font-weight:600}

/* ACC model: download from HF indicator in picker */
.picker-hf-note{
  font-size:.55rem;color:var(--purple);
  display:flex;align-items:center;gap:.2rem;margin-top:.2rem;
}


/* ════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
.site-footer{
  width:100%;border-top:1px solid var(--border);
  background:var(--bg);flex-shrink:0;
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:background .2s,border-color .2s;
}
.footer-inner{
  width:100%;max-width:840px;margin:0 auto;
  padding:1rem 1.5rem;
  display:flex;align-items:center;gap:1rem;
  font-size:.6rem;color:var(--muted);letter-spacing:.04em;
  flex-wrap:wrap;
}
.footer-logo{
  height:18px;width:auto;opacity:.45;transition:opacity .15s;
  display:block;object-fit:contain;flex-shrink:0;
}
.footer-logo-light{display:block}
.footer-logo-dark{display:none}
[data-theme="dark"] .footer-logo-light{display:none}
[data-theme="dark"] .footer-logo-dark{display:block}
.footer-logo:hover{opacity:.9}
.footer-copy{white-space:nowrap}
.footer-links{
  display:flex;align-items:center;gap:.75rem;margin-left:auto;flex-wrap:wrap;
}
.footer-link{
  color:var(--muted);text-decoration:none;transition:color .15s;white-space:nowrap;
  display:flex;align-items:center;gap:.3rem;
}
.footer-link:hover{color:var(--ink)}
.footer-link svg{width:10px;height:10px;flex-shrink:0}
.footer-sep{color:var(--border2)}
@media(max-width:480px){
  .footer-inner{padding:.75rem 1rem;gap:.55rem;font-size:.58rem}
  .footer-logo{height:14px}
  .footer-links{gap:.55rem}
}
@media(min-width:900px){
  .footer-inner{max-width:none;padding:1rem 2.5rem}
}

/* ════════════════════════════════════════════════════════
   SPACING IMPROVEMENTS — more breathing room everywhere
════════════════════════════════════════════════════════ */
/* Desktop: chat messages more padding */
@media(min-width:900px){
  .messages{padding:2.5rem 3.5rem;gap:1.75rem}
  .input-bar{padding:1rem 3.5rem 1.2rem}
  .info-bar{padding:0 3.5rem .75rem}
  .core-stats-bar{padding:.7rem 3.5rem .6rem}
  .msg-col{max-width:62%}
}
@media(min-width:1300px){
  .messages{padding:2.5rem 6rem;gap:1.75rem}
  .input-bar{padding:1rem 6rem 1.2rem}
  .info-bar{padding:0 6rem .75rem}
  .core-stats-bar{padding:.7rem 6rem .6rem}
}

/* Converter page footer matches main site */
.converter-wrap{padding-bottom:2rem}

/* ACC converter card spacing */
.conv-card{padding:1.5rem 1.75rem;margin-bottom:0}
@media(min-width:600px){.converter-wrap{padding:2rem 1.5rem 3rem}}
@media(min-width:840px){.converter-wrap{padding:2.5rem 2rem 3.5rem;max-width:760px}}