/* Chatbot-enquete Trimbos. Trimbos-stijl: lichte surrealistische achtergrond
   (achtergrond.svg), witte kaarten erop, Trimbos-rood #E3032C als enige
   accentkleur (knop, gekozen optie, focus), tekst #212121. Koppen in
   Instrument Serif (licht, zacht), de rest in Instrument Sans; beide OFL en
   zelf gehost (keuze Rienk 9 sep, naar het voorbeeld van refero.design).
   De bot spreekt links met een rode accentlijn, de deelnemer rechts in een
   zachte bubbel.
   Geen voortgangsbalk (spec par. 7, regel 13). Geen inline styles (CSP). */

:root{
  --ink:#212121;
  --body:#3A3A3A;
  --meta:#6E6E6E;
  --paper:#FFFFFF;
  --whisper:#F4F3F2;
  --rule:#E4E2E1;
  --rood:#E3032C;
  --rood-donker:#C1001F;
  --rood-zacht:rgba(227,3,44,.10);
  --donker:#212121;
  --fout:#B4453C;
  --font:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --kop:"Instrument Serif", Georgia, "Times New Roman", serif;
  --schaduw:0 2px 2px rgba(0,0,0,.05), 0 12px 32px rgba(33,33,33,.06);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* Instrument Sans (variabel 400 tot 700) en Instrument Serif (400), beide
   SIL Open Font License 1.1 */
@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/instrumentsans-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("fonts/instrumentserif-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font);
  color:var(--body);
  background:#FBF9F8 url("achtergrond.svg") center / cover no-repeat fixed;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  font-size:15px;
  line-height:1.6;
}
[hidden]{display:none !important}
button,input,textarea{font-family:var(--font)}
:focus-visible{outline:3px solid var(--rood);outline-offset:2px}

/* ---------- WELKOM ---------- */
#welkom{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px 20px}
.split{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  width:100%;max-width:1080px;
  background:var(--paper);border-radius:20px;overflow:hidden;
  box-shadow:var(--schaduw);border:1px solid var(--rule);
}

.paneel{
  background:var(--donker);
  background-image:radial-gradient(ellipse 70% 50% at 100% 100%, rgba(227,3,44,.35), transparent 70%);
  color:#fff;
  padding:48px 44px;
  display:flex;flex-direction:column;
}
/* de kop staat bovenaan het donkere paneel (keuze Rienk 9 sep, ronde 2),
   de tekst eronder, het logo onderaan */
.paneel h1{
  font-family:var(--kop);font-weight:400;font-size:46px;line-height:1.08;
  letter-spacing:-.01em;margin:0 0 18px;max-width:16ch;text-wrap:balance;
}
.paneel-tekst{font-size:17px;line-height:1.5;color:rgba(255,255,255,.82);max-width:34ch;margin:0 0 44px}
.tag-logo{height:30px;width:auto;opacity:.9;align-self:flex-start}
.paneel .tag-logo{margin-top:auto}

.kaart-start{
  background:var(--paper);
  padding:48px 56px;display:flex;flex-direction:column;justify-content:center;
}
.kaart-start>*{max-width:460px}
.trimbos-logo{height:52px;width:auto;display:block;margin:0 0 26px;align-self:flex-start}
.kaart-start h2{font-family:var(--kop);font-weight:400;font-size:30px;color:var(--ink);margin:0 0 12px;line-height:1.15;letter-spacing:-.005em;text-wrap:balance}
.kaart-start p{margin:0 0 12px;max-width:54ch}
.kaart-start form{margin:22px 0 16px}
.kaart-start label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.kaart-start input{
  width:100%;font-size:16px;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--rule);border-radius:11px;padding:13px 15px;
  outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.kaart-start input:focus{border-color:var(--rood);outline:none;box-shadow:0 0 0 3px var(--rood-zacht)}
.fout{color:var(--fout);font-size:14px;margin:10px 0 0}
.cta{
  margin-top:16px;font-weight:600;font-size:16px;color:#fff;
  background:var(--rood);border:none;border-radius:999px;padding:14px 28px;cursor:pointer;
  transition:background .15s var(--ease),transform .12s var(--ease);
}
.cta:hover{background:var(--rood-donker)}
.cta:active{transform:translateY(1px)}
.cta:disabled{opacity:.6;cursor:default;transform:none}
.klein{font-size:13px;color:var(--meta)}

/* ---------- CHAT ---------- */
/* Desktop (keuze Rienk 9 sep, naar de tweekoloms-chat van Meta AI en de
   stappenlijst van onboarding-schermen): links een vaste donkere balk met
   het logo en de vijf thema's, rechts het gesprek in een kolom op een wit
   vlak. Geen zwevende kaart, geen tekening. Mobiel (media query onderaan):
   balk weg, kop met logo en themahint, gesprek op het hele scherm. */
#chat{height:100dvh;padding:0;display:grid;grid-template-columns:280px minmax(0,1fr);background:var(--paper)}
.zijbalk{
  background:var(--donker);
  background-image:radial-gradient(ellipse 70% 40% at 100% 100%, rgba(227,3,44,.35), transparent 70%);
  color:#fff;padding:28px 24px 24px;
  display:flex;flex-direction:column;justify-content:space-between;min-height:0;overflow-y:auto;
}
/* het logo is rood en grijs op transparant; op het donker krijgt het een
   wit plaatje, zodat de huisstijlkleuren blijven */
.zijbalk-logo{height:38px;width:auto;display:block;background:var(--paper);border-radius:10px;padding:8px 12px;box-sizing:content-box;margin:0 0 28px}
.zijbalk-kop{font-family:var(--kop);font-weight:400;font-size:26px;line-height:1.15;margin:0 0 22px;color:#fff}
.themalijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.thema-item{
  display:flex;gap:12px;align-items:baseline;padding:9px 12px;border-radius:10px;
  font-size:14px;line-height:1.35;color:rgba(255,255,255,.45);border-left:3px solid transparent;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.thema-item .thema-nr{font-family:var(--kop);font-size:19px;min-width:14px;line-height:1}
.thema-item.gedaan{color:rgba(255,255,255,.65)}
.thema-item.actief{color:#fff;background:rgba(255,255,255,.08);border-left-color:var(--rood);font-weight:600}
.zijbalk-onder{margin-top:24px}
.zijbalk-klein{color:rgba(255,255,255,.6);margin:0 0 18px;max-width:30ch}
.chatshell{
  height:100dvh;width:100%;max-width:840px;margin:0 auto;display:flex;flex-direction:column;
  padding:22px 36px 20px;min-height:0;
}
.chatkop{display:none;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--rule);flex:none}
.klein-logo{height:34px;margin:0}
.themahint{font-size:13px;font-weight:600;color:var(--meta);text-align:right}

.thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:22px 2px 12px;scroll-behavior:smooth}

/* de bot spreekt zonder ballon, met een rode streep als stem */
.msg{max-width:92%;animation:msg .45s var(--ease) both}
@keyframes msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.bot{padding-left:18px;border-left:3px solid var(--rood)}
.msg.bot .bubble{font-size:17px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
.msg.me{align-self:flex-end;max-width:80%}
.msg.me .bubble{background:var(--whisper);border-radius:16px 16px 4px 16px;padding:12px 16px;color:var(--ink);white-space:pre-wrap}
.msg.me .vraagje{display:block;font-size:12px;color:var(--meta);margin-bottom:4px}


/* typing */
.typing{display:flex;gap:6px;padding:4px 0 4px 21px}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--rood);display:inline-block;animation:bob 1.1s var(--ease) infinite;opacity:.5}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}

/* ---------- KAARTEN ---------- */
.kaart{
  background:var(--paper);border:1px solid var(--rule);border-radius:16px;
  padding:18px 20px 16px;max-width:100%;align-self:stretch;
  box-shadow:0 2px 2px rgba(0,0,0,.05);
  animation:msg .45s var(--ease) both;
}
.kaart .kvraag{font-family:var(--kop);font-size:21px;font-weight:400;line-height:1.35;color:var(--ink);margin:0 0 14px}
.kaart .khulp{font-size:13px;color:var(--meta);margin:-8px 0 14px}
.opties{display:flex;flex-wrap:wrap;gap:8px}
.optie{
  font-size:14px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--rule);border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:border-color .12s var(--ease),background .12s var(--ease),color .12s var(--ease);
}
.optie:hover{border-color:var(--ink)}
.optie[aria-pressed="true"]{background:var(--rood);border-color:var(--rood);color:#fff;font-weight:600}
.optie:disabled{cursor:default;opacity:.7}
.optie:disabled[aria-pressed="true"]{opacity:1}

.schaal{display:flex;align-items:flex-start;gap:10px}
.schaal .optie{min-width:44px;text-align:center;padding:9px 0;flex:0 0 auto}
.schaal-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--meta);margin-top:8px}
.schaal.met-labels{flex-wrap:wrap}
.schaal.met-labels .optie{flex:1 1 90px;padding:9px 6px}

.matrix{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,36px);gap:8px 6px;align-items:center}
.matrix .rij{font-size:14px;color:var(--ink);padding-right:8px}
.matrix .rond{
  width:32px;height:32px;border-radius:50%;border:1.5px solid var(--rule);background:var(--paper);
  cursor:pointer;font-size:12px;color:var(--meta);padding:0;justify-self:center;
  transition:border-color .12s var(--ease),background .12s var(--ease);
}
.matrix .rond:hover{border-color:var(--ink)}
.matrix .rond[aria-pressed="true"]{background:var(--rood);border-color:var(--rood);color:#fff;font-weight:600}
.matrix .kopcel{font-size:12px;color:var(--meta);text-align:center;justify-self:center}
.matrix-legenda{font-size:12px;color:var(--meta);margin:12px 0 0;line-height:1.6}

.kaart-voet{display:flex;justify-content:flex-end;margin-top:14px}
.verder{
  font-weight:600;font-size:14px;color:#fff;background:var(--rood);
  border:none;border-radius:999px;padding:10px 22px;cursor:pointer;
  transition:background .12s var(--ease);
}
.verder:hover{background:var(--rood-donker)}
.verder:disabled{opacity:.4;cursor:default;background:var(--rood)}

/* ---------- systeem en afsluiting ---------- */
.systeem{font-size:13px;color:var(--body);background:var(--whisper);border-radius:12px;padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;align-self:center;max-width:92%}
.knop-retry{font-size:13px;font-weight:600;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:999px;padding:6px 14px;cursor:pointer}
.knop-retry:hover{border-color:var(--ink)}
.afronden{align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--meta);font-size:14px;text-align:center;padding:8px 0 4px}
.afronden .typing{padding:0}

.done{border-top:3px solid var(--rood);padding:22px 0 8px;align-self:stretch}
.done h2{font-family:var(--kop);font-weight:400;font-size:28px;color:var(--ink);margin:0 0 6px}
.done p{margin:0 0 18px;max-width:54ch}
.knop-secundair{font-size:14px;font-weight:600;color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:999px;padding:10px 20px;cursor:pointer}
.knop-secundair:hover{border-color:var(--ink)}

/* ---------- composer ---------- */
.composer{display:flex;gap:10px;align-items:flex-end;background:var(--paper);border:1.5px solid var(--rule);border-radius:22px;padding:8px 8px 8px 18px;flex:none;margin-top:12px;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.composer:focus-within{border-color:var(--rood);box-shadow:0 0 0 3px var(--rood-zacht)}
.composer textarea{
  flex:1;border:none;outline:none;resize:none;background:transparent;
  font-size:15px;line-height:1.5;color:var(--ink);padding:9px 0;max-height:140px
}
.composer textarea::placeholder{color:var(--meta)}
.composer textarea:disabled{color:var(--meta)}
.send{width:42px;height:42px;border-radius:50%;border:none;background:var(--rood);color:#fff;cursor:pointer;flex:none;display:grid;place-items:center;transition:background .12s var(--ease)}
.send:hover{background:var(--rood-donker)}
.send:disabled{opacity:.4;cursor:default;background:var(--rood)}
.send svg{width:19px;height:19px}

/* responsief */
@media (max-width:820px){
  #welkom{padding:0;align-items:stretch}
  .split{grid-template-columns:1fr;max-width:none;border-radius:0;border:none;box-shadow:none;min-height:100dvh}
  .paneel{padding:32px 24px 28px}
  .paneel h1{font-size:36px;margin-top:0}
  .paneel-tekst{margin-bottom:24px}
  .kaart-start{padding:30px 24px 40px;max-width:none}
  #chat{display:block}
  .zijbalk{display:none}
  .chatkop{display:flex}
  .chatshell{height:100dvh;max-width:none;padding:14px 18px 14px}
  .msg{max-width:100%}
  .msg.me{max-width:90%}
  .msg.bot .bubble{font-size:16px}
  .matrix{grid-template-columns:minmax(0,1fr) repeat(5,30px)}
  .matrix .rond{width:28px;height:28px}
  .themahint{max-width:50%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}