/* Teksthulp — opmaak naar het klikbare ontwerp (Nunito, vier thema's). */

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:'Nunito',system-ui,sans-serif;background:#eef0f3}
textarea,input,button,select{font-family:inherit}
button{cursor:pointer;border:none;background:none;color:inherit}
button:disabled{cursor:default}
[hidden]{display:none !important}
u{text-decoration:underline;text-underline-offset:2px}

.tscroll{scrollbar-width:thin;scrollbar-color:var(--dash) transparent}
.tscroll::-webkit-scrollbar{width:9px;height:9px}
.tscroll::-webkit-scrollbar-thumb{background:var(--dash);border-radius:9px;border:2px solid var(--surface)}

@keyframes tspin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dot{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------- thema's ---------- */
.app{--bg:#f4f5f7;--surface:#ffffff;--surface2:#fafbfc;--pill:#f0f2f4;--border:#eef0f3;--cardBorder:#eceef1;--hair:#f2f3f5;--ctrlBorder:#e4e7ec;--dash:#d3d7dd;--text:#151a20;--text2:#2b3038;--muted:#79808a;--muted2:#a2a8b0;--accent:#2f3b52;--accent-dark:#232d40;--accent-ink:#2f3b52;--accent-bg:#eef1f7;--schaduw:rgba(20,25,35,.09);--hover:rgba(20,25,35,.05)}
.app[data-theme="1"]{--bg:#f4ebe3;--surface:#fffdfb;--surface2:#f8f0e9;--pill:#ecdfd4;--border:#ecdfd4;--cardBorder:#f0e6dd;--hair:#f4ece4;--ctrlBorder:#e4d5c8;--dash:#d8c7b8;--text:#3b302a;--text2:#4c4039;--muted:#9c8c7f;--muted2:#bcac9e;--accent:#b5563f;--accent-dark:#9a4433;--accent-ink:#a84a35;--accent-bg:#f4e2d8;--schaduw:rgba(60,40,30,.10);--hover:rgba(60,40,30,.05)}
.app[data-theme="2"]{--bg:#333a47;--surface:#414a5b;--surface2:#3b4453;--pill:#2d3441;--border:#4d5768;--cardBorder:#4d5768;--hair:#485162;--ctrlBorder:#59637a;--dash:#5b657b;--text:#f1f3f7;--text2:#e3e7ed;--muted:#aab2be;--muted2:#8b94a1;--accent:#4d5f85;--accent-dark:#5d719b;--accent-ink:#b7c6e6;--accent-bg:#4b566e;--schaduw:rgba(0,0,0,.25);--hover:rgba(255,255,255,.05)}
.app[data-theme="3"]{--bg:#181d26;--surface:#20262f;--surface2:#1c222b;--pill:#141a22;--border:#2f3742;--cardBorder:#2f3742;--hair:#2a313b;--ctrlBorder:#3a434f;--dash:#414b57;--text:#eef1f6;--text2:#d3d9e1;--muted:#9aa2ae;--muted2:#727b88;--accent:#4a5c82;--accent-dark:#5b6f99;--accent-ink:#a9bbe0;--accent-bg:#2f3a52;--schaduw:rgba(0,0,0,.35);--hover:rgba(255,255,255,.05)}

.app{height:100dvh;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);overflow:hidden;position:relative}
.muted{color:var(--muted);font-weight:500}

/* ---------- knoppen ---------- */
.knop-primair{padding:13px 26px;border-radius:11px;background:var(--accent);color:#fff;font:600 15px/1 'Nunito';box-shadow:0 6px 16px -8px var(--accent);transition:all .14s;white-space:nowrap}
.knop-primair:hover:not(:disabled){background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 9px 22px -8px var(--accent)}
.knop-primair:disabled{background:var(--ctrlBorder);color:var(--muted2);box-shadow:none}
.knop-breed{width:100%;margin-top:20px;padding:11px;font-size:13.5px}
.knop-licht{padding:7px 13px;border:1px solid var(--ctrlBorder);border-radius:8px;background:var(--surface);font:500 12.5px/1 'Nunito';color:var(--text);transition:background .12s}
.knop-licht:hover{background:var(--bg)}
.knop-stil{padding:7px 13px;border-radius:8px;font:500 12.5px/1 'Nunito';color:var(--muted);transition:all .12s}
.knop-stil:hover{background:var(--hover);color:var(--text)}
.sluit-klein{width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:var(--bg);color:var(--muted);font:400 20px/1 'Nunito';display:flex;align-items:center;justify-content:center}
.sluit-klein:hover{color:var(--text)}

/* ---------- toegang ---------- */
.toegang{position:absolute;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px}
.toegang-kaart{width:min(380px,100%);background:var(--surface);border:1px solid var(--cardBorder);border-radius:18px;padding:32px 28px;text-align:center;box-shadow:0 30px 80px -30px var(--schaduw);animation:popIn .3s ease both}
.toegang-logo{height:44px;margin-bottom:10px}
.toegang-kaart h1{margin:0 0 6px;font:800 20px/1.2 'Nunito'}
.toegang-kaart p{margin:0 0 18px;color:var(--muted);font-size:13.5px;line-height:1.5}
.toegang-kaart input{width:100%;padding:12px 14px;border:1px solid var(--ctrlBorder);border-radius:11px;background:var(--surface);color:var(--text);font:400 15px/1.3 'Nunito';margin-bottom:12px;outline:none}
.toegang-kaart input:focus{border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-bg)}
.toegang-kaart .knop-primair{width:100%}
.toegang-fout{color:#b42318;font-size:13px;margin-top:10px;min-height:16px}

/* ---------- kop ---------- */
.kop{flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--border)}
.kop-rij1{display:flex;align-items:center;gap:16px;padding:12px 22px;flex-wrap:wrap}
.hamburger{width:40px;height:40px;border-radius:11px;background:var(--bg);display:none;align-items:center;justify-content:center;flex:0 0 auto}
.hamburger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;box-shadow:0 -6px 0 var(--text),0 6px 0 var(--text)}
.merk{display:flex;align-items:center;gap:11px;margin-right:auto}
.merk img{height:30px;width:auto;display:block}
.merk-naam{display:flex;flex-direction:column;line-height:1.1}
.merk-naam span:first-child{font:800 17px/1.1 'Nunito';color:var(--text)}
.merk-naam span:last-child{font:700 9.5px/1.2 'Nunito';letter-spacing:.18em;color:var(--muted)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:11px;background:var(--pill)}
.tab{padding:8px 18px;border-radius:8px;transition:all .12s;font:600 13.5px/1 'Nunito';color:var(--muted2)}
.tab.actief{background:var(--surface);color:var(--text);box-shadow:0 1px 2px var(--schaduw)}
.themas{display:flex;gap:7px;align-items:center}
.thema{width:22px;height:22px;border-radius:7px;flex:0 0 auto;transition:all .12s;border:2px solid rgba(140,148,158,.4)}
.thema.actief{border-color:var(--accent-ink);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--accent-ink)}
.kop-rij2{display:flex;align-items:center;gap:12px;padding:0 22px 12px;flex-wrap:wrap}
.pillen{display:flex;gap:3px;padding:4px;border-radius:10px;background:var(--pill)}
.pil{padding:8px 15px;border-radius:7px;font:600 13.5px/1 'Nunito';transition:all .15s;white-space:nowrap;color:var(--muted)}
.pil:hover{background:var(--hover);color:var(--text)}
.pil.actief{background:var(--surface);color:var(--text);box-shadow:0 1px 2px var(--schaduw)}
.hulp-knop{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:1px solid var(--ctrlBorder);background:var(--surface);color:var(--muted);font:700 13px/1 'Nunito';display:flex;align-items:center;justify-content:center;transition:all .14s}
.hulp-knop:hover{border-color:var(--accent-ink);background:var(--accent-bg);color:var(--accent-ink)}
.model-chip{font:600 12.5px/1 'Nunito';color:var(--accent-ink);background:var(--accent-bg);padding:7px 12px;border-radius:999px}

/* ---------- schil + zijbalk ---------- */
.schil{flex:1 1 auto;display:flex;min-height:0;position:relative}
.backdrop{position:absolute;inset:0;z-index:40;background:rgba(20,25,35,.35);animation:fadeUp .2s ease both}
.zijbalk{flex:0 0 300px;width:300px;background:var(--surface2);border-right:1px solid var(--border);padding:22px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.zijbalk-kop{display:flex;align-items:center;justify-content:space-between;font:800 11px/1 'Nunito';letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 6px}
.zijbalk-kop .sluit-klein{display:none;width:26px;height:26px;border-radius:7px;font-size:18px;background:none}
.zijbalk-groep{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.zijbalk-groep-naam{font:700 11.5px/1 'Nunito';color:var(--muted2);padding:0 13px 6px}
.zijbalk-item{display:block;width:100%;text-align:left;padding:9px 13px;border-radius:10px;font:500 14.5px/1.25 'Nunito';color:var(--text);transition:background .12s,color .12s}
.zijbalk-item:hover{background:var(--hover)}
.zijbalk-item.actief{background:var(--accent-bg);color:var(--accent-ink);font-weight:700}
.zijbalk-aanpassen{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1px dashed var(--dash);border-radius:10px;font:600 12.5px/1 'Nunito';color:var(--muted);transition:all .14s}
.zijbalk-aanpassen:hover{border-color:var(--accent-ink);background:var(--accent-bg);color:var(--accent-ink)}

/* ---------- werkvlak ---------- */
.werk{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.weergave{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:24px 26px;animation:fadeUp .25s ease both}
.functie-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.functie-naam{font:800 22px/1.2 'Nunito';margin-bottom:4px}
.functie-hint{font:400 14px/1.4 'Nunito';color:var(--muted)}
.functie-keuze{font:500 12.5px/1.4 'Nunito';color:var(--muted2);margin-top:6px;display:flex;align-items:center;gap:7px;min-height:16px}
.functie-keuze::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent-ink);flex:0 0 auto}
.functie-keuze:empty{display:none}
.eigen-instructie{width:100%;margin-bottom:16px;padding:13px 15px;border:1px solid var(--ctrlBorder);border-radius:11px;background:var(--surface);font:400 14px/1.4 'Nunito';color:var(--text);outline:none;transition:all .14s}
.eigen-instructie:focus{border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-bg)}
.kolommen{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.paneel{min-height:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--cardBorder);border-radius:16px;box-shadow:0 1px 2px var(--schaduw);overflow:hidden}
.paneel-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--hair);font:700 13px/1 'Nunito'}
.paneel-kop .muted{font-size:12px}
#tekst{flex:1 1 auto;min-height:120px;width:100%;resize:none;border:none;outline:none;padding:16px;background:transparent;color:var(--text);font:400 14.5px/1.65 'Nunito'}
.dropzone{margin:0 14px 12px;display:flex;align-items:center;gap:11px;padding:11px 15px;border:1.5px dashed var(--dash);border-radius:12px;background:var(--surface2);transition:all .12s;cursor:pointer;font:500 12.5px/1.3 'Nunito';color:var(--muted)}
.dropzone:hover,.dropzone.over{border-color:var(--accent-ink);background:var(--accent-bg);color:var(--accent-ink)}
.dz-pijl{width:24px;height:24px;border-radius:7px;background:var(--pill);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text)}
.paneel-voet{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--hair);flex-wrap:wrap}
.bestand-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--pill);font:500 12px/1 'Nunito';color:var(--text2);max-width:100%}
.bestand-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.bestand-chip button{color:var(--muted);font:500 14px/1 'Nunito';padding:0 2px}
.resultaat{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:16px}
.resultaat-tekst{white-space:pre-wrap;font:400 14.5px/1.65 'Nunito';color:var(--text2)}
.leeg{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted2);font:500 13.5px/1.4 'Nunito';text-align:center;padding:20px}
.leeg-bol{width:34px;height:34px;border-radius:50%;background:var(--pill)}
.bezig{display:flex;align-items:center;gap:10px;color:var(--muted);font:500 13.5px/1.4 'Nunito'}
.tspin{width:18px;height:18px;border:2px solid var(--ctrlBorder);border-top-color:var(--accent-ink);border-radius:50%;animation:tspin .8s linear infinite;flex:0 0 auto}
.fout{margin-top:12px;padding:11px 13px;border-radius:10px;background:rgba(180,35,24,.08);color:#b42318;font:500 13px/1.4 'Nunito'}
.app[data-theme="2"] .fout,.app[data-theme="3"] .fout{color:#ffb4a8}

/* ---------- chat ---------- */
#weergave-chat{padding-bottom:18px}
.chat-berichten{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:6px 4px 16px}
.chat-rij{display:flex;align-items:flex-end;animation:msgIn .3s ease both}
.chat-rij.gebruiker{justify-content:flex-end}
.chat-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-right:10px;flex:0 0 auto}
.chat-avatar img{width:17px;height:auto;display:block}
.chat-bubbel{max-width:74%;padding:13px 16px;font:400 14.5px/1.6 'Nunito';white-space:pre-wrap;word-break:break-word}
.chat-rij.gebruiker .chat-bubbel{background:var(--accent);color:#fff;border-radius:16px 16px 5px 16px}
.chat-rij.assistent .chat-bubbel{background:var(--surface);color:var(--text2);border:1px solid var(--cardBorder);border-radius:16px 16px 16px 5px;box-shadow:0 1px 2px var(--schaduw)}
.chat-rij.assistent .chat-bubbel.fout{margin:0;background:rgba(180,35,24,.08)}
.chat-dots span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--muted);margin-right:4px;animation:dot 1.2s infinite}
.chat-dots span:nth-child(2){animation-delay:.2s}.chat-dots span:nth-child(3){animation-delay:.4s}
.chat-invoer{display:flex;align-items:flex-end;gap:10px;padding:10px;background:var(--surface);border:1px solid var(--cardBorder);border-radius:16px;box-shadow:0 1px 2px var(--schaduw)}
.chat-plus{flex:0 0 auto;width:42px;height:42px;border-radius:12px;border:1px solid var(--ctrlBorder);background:var(--surface2);color:var(--muted);font:400 22px/1 'Nunito';display:flex;align-items:center;justify-content:center;transition:background .12s}
.chat-plus:hover{background:var(--pill);color:var(--text)}
#chat-tekst{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--text);font:400 14.5px/1.5 'Nunito';padding:11px 6px;max-height:160px}
.chat-invoer .knop-primair{padding:11px 20px;border-radius:12px;font-size:14px}
.chat-noot{margin-top:10px;text-align:center;font:500 12px/1.4 'Nunito';color:var(--muted2);min-height:16px}

/* ---------- modals ---------- */
.modal{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,25,35,.45);animation:fadeUp .2s ease both}
.modal-kaart{position:relative;width:min(460px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--cardBorder);border-radius:18px;padding:24px;box-shadow:0 40px 90px -30px var(--schaduw);animation:popIn .25s ease both}
.modal-breed{width:min(560px,100%)}
.modal-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}
.modal-titel{font:800 18px/1.25 'Nunito';margin-bottom:4px}
.modal-kaart p{font:400 14px/1.55 'Nunito';color:var(--text2);margin:10px 0}
.modal-kaart .muted{font-size:13px;line-height:1.4}
.hulp-lijst{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.hulp-rij{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:11px;background:var(--surface2);border:1px solid var(--hair)}
.hulp-rij b{font:700 13.5px/1.3 'Nunito'}
.hulp-rij span{font:400 13px/1.45 'Nunito';color:var(--muted)}
.aanpassen-rijen{display:flex;flex-direction:column;gap:8px;overflow-y:auto;margin:12px 0;padding-right:4px}
.aanpassen-rij{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--ctrlBorder);border-radius:12px;background:var(--surface);transition:all .14s}
.aanpassen-rij.uit{opacity:.6;border-color:var(--hair);background:var(--surface2)}
.aanpassen-pijlen{display:flex;flex-direction:column;gap:2px}
.aanpassen-pijlen button{width:22px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:5px;font:400 9px/1 'Nunito';color:var(--muted)}
.aanpassen-pijlen button:hover:not(:disabled){background:var(--hover);color:var(--text)}
.aanpassen-pijlen button:disabled{opacity:.3}
.aanpassen-tekst{flex:1 1 auto;min-width:0}
.aanpassen-tekst div:first-child{font:600 14px/1.3 'Nunito'}
.aanpassen-tekst div:last-child{font:500 12px/1.3 'Nunito';color:var(--muted2)}
.schakel{position:relative;width:38px;height:22px;border-radius:999px;flex:0 0 auto;background:var(--ctrlBorder);transition:background .18s}
.schakel.aan{background:var(--accent)}
.schakel span{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fefefe;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.schakel.aan span{transform:translateX(16px)}
.modal-voet{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* ---------- smal ---------- */
@media (max-width:960px){
  .hamburger{display:flex}
  .zijbalk{position:absolute;top:0;left:0;bottom:0;width:min(300px,84vw);z-index:45;background:var(--surface);box-shadow:24px 0 60px -30px rgba(20,25,35,.5);transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translateX(-102%)}
  .zijbalk.open{transform:none}
  .zijbalk-kop .sluit-klein{display:flex}
  .merk-naam span:last-child{display:none}
}
@media (max-width:760px){
  .kop-rij1{gap:10px;padding:10px 14px}
  .kop-rij2{padding:0 14px 10px}
  .weergave{padding:16px 14px}
  .kolommen{grid-template-columns:1fr;grid-auto-rows:minmax(260px,1fr)}
  .functie-kop{flex-direction:column;align-items:stretch}
  .knop-verwerk{width:100%}
  .chat-bubbel{max-width:88%}
  .model-chip{display:none}
}