:root{
  --bg:#f4f6fb;--card:#fff;--text:#1b2133;--muted:#667089;--line:#dde2ee;
  --accent:#4f46e5;--accent-d:#4338ca;--accent-t:#fff;--user:#e8e9ff;--ai:#f1f3f8;
  --ok:#157f3b;--bad:#b3261e;--warn:#9a6700;--radius:12px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1220;--card:#181c2e;--text:#e8eaf4;--muted:#99a1bd;--line:#2a3050;
  --accent:#7c78ff;--accent-d:#6a66f0;--accent-t:#0f1220;--user:#26295a;--ai:#202540;
  --ok:#4cc27a;--bad:#ff8a80;--warn:#e3b341}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:.85rem}
code{background:var(--ai);padding:.1em .35em;border-radius:5px;font-size:.9em}
h1{font-size:1.4rem;margin:.2rem 0 .6rem}h2{font-size:1.1rem;margin:1.2rem 0 .5rem}.h-sm{margin-top:0}
.ver{font-weight:400;color:var(--muted);font-size:.8em}

/* knoppen & velden */
.btn{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--text);padding:.6rem 1rem;border-radius:10px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-t);font-weight:600}
.btn.primary:hover{background:var(--accent-d)}
.btn.small{padding:.35rem .7rem;font-size:.85rem}
.btn.block{display:block;width:100%;margin-top:1rem}
.btn:disabled{opacity:.55;cursor:not-allowed}
label{display:block;font-weight:600;font-size:.9rem;margin:.8rem 0 .3rem}
input[type=text],input[type=password],input[type=search],input[type=file],select,textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.row{display:flex;gap:.5rem}.row input{flex:0 1 38%}.row select{flex:1 1 62%}

/* login / installatie */
.auth-page{display:flex;justify-content:center;padding:1.5rem 1rem}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;align-self:flex-start;margin-top:4vh}
.auth-card.wide{max-width:640px}
.alert{padding:.7rem .9rem;border-radius:10px;margin:.6rem 0;border:1px solid;font-size:.95rem}
.alert.error{border-color:var(--bad);color:var(--bad)}
.alert.success{border-color:var(--ok);color:var(--ok)}
.alert.info{border-color:var(--accent);color:var(--accent)}
.checks{list-style:none;padding:0;margin:.4rem 0}
.checks li{padding:.25rem 0 .25rem 1.6rem;position:relative}
.checks li::before{position:absolute;left:0}
.checks .ok::before{content:"✔";color:var(--ok)}
.checks .bad::before{content:"✘";color:var(--bad)}
.checks .warn::before{content:"!";color:var(--warn);font-weight:700}

/* hoofdindeling */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--line);padding:.6rem 1rem}
.brand{font-weight:800;letter-spacing:.02em}
.tabs{display:flex;gap:.3rem;flex:1;overflow-x:auto}
.tab{appearance:none;border:0;background:transparent;color:var(--muted);padding:.5rem .8rem;border-radius:9px;font:inherit;cursor:pointer;white-space:nowrap}
.tab.active{background:var(--accent);color:var(--accent-t);font-weight:600}
.logout{margin:0}
.banner{margin:.7rem 1rem 0;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--warn);color:var(--warn);background:var(--card)}
.banner.error{border-color:var(--bad);color:var(--bad)}
main{max-width:1100px;margin:0 auto;padding:1rem}
.panel{display:none}.panel.active{display:block}
.toolbar{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.field.grow{flex:1 1 320px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.grid-2{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:860px){.grid-2{grid-template-columns:minmax(320px,440px) 1fr;align-items:start}}
.model-info{margin:.4rem 0 .6rem;min-height:1.2em}
.badge{display:inline-block;padding:.05rem .45rem;border-radius:20px;border:1px solid var(--line);font-size:.75rem;margin-right:.25rem;color:var(--muted)}
.badge.on{border-color:var(--accent);color:var(--accent)}

/* chat */
.chat-log{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem;min-height:300px;max-height:58vh;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem}
.empty{color:var(--muted);text-align:center;padding:2rem 1rem}
.msg{max-width:92%;padding:.65rem .85rem;border-radius:14px;word-wrap:break-word;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;background:var(--user);border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:var(--ai);border-bottom-left-radius:4px}
.msg.err{align-self:flex-start;border:1px solid var(--bad);color:var(--bad)}
.msg .who{font-size:.72rem;font-weight:700;color:var(--muted);margin-bottom:.15rem;text-transform:uppercase;letter-spacing:.04em}
.msg p{margin:.3rem 0}.msg ul,.msg ol{margin:.3rem 0;padding-left:1.4rem}
.msg pre{background:#0d1020;color:#e8eaf4;padding:.7rem;border-radius:9px;overflow-x:auto;font-size:.85rem}
.msg pre code{background:none;padding:0;color:inherit}
.msg h3,.msg h4{margin:.5rem 0 .2rem;font-size:1rem}
.typing{display:inline-block;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.composer{display:flex;gap:.6rem;margin-top:.7rem;align-items:stretch}
.composer textarea{flex:1}

/* afbeeldingen */
.modes{display:flex;gap:.5rem;flex-wrap:wrap}
.mode{display:flex;align-items:center;gap:.35rem;border:1px solid var(--line);border-radius:10px;padding:.4rem .7rem;margin:0;font-weight:500;cursor:pointer}
.mode.disabled{opacity:.45;cursor:not-allowed}
.ref-preview{margin-top:.6rem;display:flex;gap:.8rem;align-items:flex-start}
.ref-preview img{max-width:140px;max-height:140px;border-radius:9px;border:1px solid var(--line)}
.results{display:grid;gap:1rem}
.result{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.result img{display:block;width:100%;height:auto}
.result .bar{display:flex;justify-content:space-between;align-items:center;padding:.5rem .7rem;gap:.5rem;font-size:.85rem}
.spinner{border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:spin 1s linear infinite;margin:1.5rem auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* modellenlijst */
.model-list{display:grid;gap:.6rem;margin-top:.6rem}
@media(min-width:760px){.model-list{grid-template-columns:1fr 1fr}}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem}
.mcard h3{margin:0 0 .15rem;font-size:1rem}
.mcard .id{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;color:var(--muted);word-break:break-all}
.mcard p{margin:.4rem 0 0;font-size:.85rem;color:var(--muted)}
.foot{max-width:1100px;margin:0 auto;padding:1rem 1rem 2rem}
@media(max-width:600px){main{padding:.7rem}.row{flex-direction:column}.row input,.row select{flex:1 1 auto}.msg{max-width:100%}}

/* bijlagen */
.atts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--accent);color:var(--accent);border-radius:20px;padding:.15rem .3rem .15rem .7rem;font-size:.85rem;max-width:100%;overflow-wrap:anywhere}
.chip-x{appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;font-size:.85rem;padding:.1rem .4rem;border-radius:50%}
.chip-x:hover{background:var(--ai)}
.att-line{margin-top:.4rem}
#chat-attach{padding:.6rem .8rem;align-self:flex-start}