/* Chatmaatje — kleuren getoetst op WCAG AA-contrast (tekst ≥ 4,5:1, randen/iconen ≥ 3:1). */
:root {
  --achtergrond: #f6f7fb;
  --vlak: #ffffff;
  --tekst: #1b1f2e;
  --tekst-zacht: #4f566b;
  --rand: #8a91a8;
  --rand-zacht: #dde0ea;
  --accent: #3b4cca;
  --accent-tekst: #ffffff;
  --accent-hover: #2f3da6;
  --ai-bel: #ffffff;
  --mijn-bel: #3b4cca;
  --mijn-tekst: #ffffff;
  --fout: #b3261e;
  --focus: #1b1f2e;
  --code: #eef0f6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --achtergrond: #12141c;
    --vlak: #1c1f2b;
    --tekst: #eceef5;
    --tekst-zacht: #b0b6c8;
    --rand: #747c95;
    --rand-zacht: #2c3142;
    --accent: #8f9bff;
    --accent-tekst: #12141c;
    --accent-hover: #aab3ff;
    --ai-bel: #1c1f2b;
    --mijn-bel: #3b4cca;
    --mijn-tekst: #ffffff;
    --fout: #ff8a80;
    --focus: #eceef5;
    --code: #2a2e3d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--achtergrond);
  color: var(--tekst);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
.verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.knop-hoofd {
  background: var(--accent); color: var(--accent-tekst); border: 0; border-radius: 12px;
  padding: 12px 18px; font-weight: 600; min-height: 44px;
}
.knop-hoofd:hover { background: var(--accent-hover); }
.knop-hoofd:disabled { opacity: .7; cursor: wait; }
.knop-hoofd.breed { width: 100%; }
.knop-icoon {
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1;
}
.knop-icoon:hover { border-color: var(--rand-zacht); }
.fout { color: var(--fout); min-height: 1.5em; margin: 6px 0; font-size: 15px; }

/* ── Koppelscherm ── */
.koppel { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.kaart {
  background: var(--vlak); border: 1px solid var(--rand-zacht); border-radius: 20px;
  padding: 28px 24px; width: 100%; max-width: 380px; text-align: center;
}
.logo { border-radius: 18px; }
.kaart h1 { margin: 12px 0 16px; font-size: 26px; }
.kaart form { text-align: left; }
.kaart label { font-weight: 600; display: block; }
.uitleg { margin: 2px 0 8px; color: var(--tekst-zacht); font-size: 15px; }
.tip {
  text-align: left; background: var(--code); border-radius: 12px; padding: 12px 14px;
  font-size: 15px; margin: 0 0 18px;
}
#koppelcode {
  width: 100%; font-size: 24px; letter-spacing: .12em; text-transform: uppercase; text-align: center;
  padding: 10px 12px; border: 2px solid var(--rand); border-radius: 12px;
  background: var(--vlak); color: var(--tekst);
}
.kaart .knop-hoofd { width: 100%; margin-top: 6px; }

/* ── Chatscherm ── */
.app { display: flex; height: 100%; height: 100dvh; }
.lade {
  width: 290px; flex-shrink: 0; background: var(--vlak); border-right: 1px solid var(--rand-zacht);
  display: flex; flex-direction: column; padding: 12px; padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.lade-kop { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.lade-kop h2 { font-size: 18px; margin: 0 4px; }
.gesprekkenlijst { list-style: none; margin: 12px 0; padding: 0; overflow-y: auto; flex: 1; }
.gesprekkenlijst li { display: flex; align-items: stretch; border-radius: 10px; }
.gesprekkenlijst li.actief { background: var(--code); }
.lijst-leeg { color: var(--tekst-zacht); padding: 8px; }
.gesprek-open {
  flex: 1; min-width: 0; text-align: left; background: transparent; border: 0; padding: 10px;
  border-radius: 10px; display: flex; flex-direction: column; min-height: 44px;
}
.gesprek-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gesprek-datum { font-size: 13px; color: var(--tekst-zacht); }
.gesprek-weg { background: transparent; border: 0; min-width: 44px; border-radius: 10px; font-size: 16px; }
.gesprek-weg:hover, .gesprek-open:hover { background: var(--rand-zacht); }
.privacy { font-size: 13px; color: var(--tekst-zacht); margin: 0; }

.hoofd { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kop {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  padding-top: max(6px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--rand-zacht); background: var(--vlak);
}
.kop h1 { flex: 1; font-size: 18px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.berichten { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bericht { max-width: min(680px, 88%); padding: 10px 14px; border-radius: 18px; overflow-wrap: anywhere; }
.bericht p { margin: 0 0 8px; }
.bericht p:last-child { margin-bottom: 0; }
.bericht ul, .bericht ol { margin: 4px 0 8px; padding-left: 22px; }
.bericht .kopje { font-weight: 700; }
.bericht code { background: var(--code); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.bericht pre { background: var(--code); padding: 10px; border-radius: 10px; overflow-x: auto; }
.bericht pre code { background: none; padding: 0; }
.van-mij { align-self: flex-end; background: var(--mijn-bel); color: var(--mijn-tekst); border-bottom-right-radius: 6px; white-space: pre-wrap; }
.van-ai { align-self: flex-start; background: var(--ai-bel); border: 1px solid var(--rand-zacht); border-bottom-left-radius: 6px; }
.denkt { display: flex; gap: 5px; padding: 16px 18px; }
.stip { width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-zacht); animation: stip 1.2s infinite ease-in-out; }
.stip:nth-child(3) { animation-delay: .15s; }
.stip:nth-child(4) { animation-delay: .3s; }
@keyframes stip { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stip { animation: none; opacity: .7; } }

.leeg { margin: auto; text-align: center; color: var(--tekst-zacht); max-width: 340px; }
.leeg-titel { font-size: 20px; font-weight: 600; color: var(--tekst); }

.invoer {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rand-zacht); background: var(--vlak);
}
.invoer textarea {
  flex: 1; min-width: 0; resize: none; font: inherit; font-size: 17px; /* ≥16px: iOS zoomt dan niet in */
  padding: 10px 14px; border: 2px solid var(--rand); border-radius: 22px; max-height: 160px;
  background: var(--vlak); color: var(--tekst);
}
.knop-verstuur {
  width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-tekst); font-size: 20px;
}
.knop-verstuur:disabled { opacity: .6; cursor: wait; }
.invoerfout { flex-basis: 100%; margin: 0; min-height: 0; }
.invoerfout:empty { display: none; }

/* Smalle schermen: gesprekkenlijst als uitschuiflade */
.lade-achtergrond { display: none; }
@media (max-width: 760px) {
  .lade {
    position: fixed; inset: 0 auto 0 0; width: min(86vw, 320px); z-index: 20;
    transform: translateX(-105%); transition: transform .2s ease; visibility: hidden;
  }
  .lade.open { transform: none; visibility: visible; }
  .lade-achtergrond { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .4); z-index: 10; }
  .lade-achtergrond[hidden] { display: none !important; }
}
@media (min-width: 761px) { .alleen-smal { display: none; } }
@media (prefers-reduced-motion: reduce) { .lade { transition: none; } }

/* Meldingen onder een gesprek */
.melding {
  align-self: center; text-align: center; max-width: 420px; padding: 12px 16px; border-radius: 14px;
  background: var(--code); border: 1px solid var(--rand-zacht);
}
.melding p { margin: 0 0 8px; }
.melding p:last-child { margin: 0; }
.melding-stop { border: 2px solid var(--fout); }
.invoer textarea:disabled { opacity: .7; }