/* Systeemlettertypen: geen externe fonts, dus geen gegevens naar derden. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F4F9; --ink:#1C1A27; --muted:#64627A; --line:#DDDDE7;
  --accent:#D6336C; --accent-ink:#FFFFFF; --accent-soft:#FBE4ED;
  --green:#1D6A5B; --green-soft:#DCEFE9; --amber:#8F5600; --amber-soft:#FBEBD0;
  --display: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#111019; --surface:#1B1A25; --surface-2:#252432; --ink:#F1EFF8; --muted:#A4A1B8; --line:#34323F;
  --accent:#F25E92; --accent-ink:#1B0611; --accent-soft:#3B1727;
  --green:#6CC7B1; --green-soft:#15302A; --amber:#EBB860; --amber-soft:#33270F; color-scheme:dark;
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);display:flex;flex-direction:column}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{flex:1;overflow-y:auto;max-width:560px;width:100%;margin:0 auto;
  padding:max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:16px}
.app > *{flex-shrink:0}
.nav{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--surface);
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.nav a{text-align:center;padding:10px 2px 12px;font-size:12px;color:var(--muted);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent);font-weight:600}
h1{font-family:var(--display);font-weight:800;font-size:30px;line-height:1.1;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:700;font-size:20px;margin:0}
p{margin:0}
.brand{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.muted{color:var(--muted)} .small{font-size:14px}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.btn{border:0;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding:13px 18px;border-radius:14px;font-weight:600;text-decoration:none}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:var(--surface);border:1px solid var(--line)}
.btn.soft{background:var(--surface-2)}
.btn[disabled]{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap} .row > .btn{flex:1}
.box{background:var(--surface-2);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.box.green{background:var(--green-soft)} .box.green .label{color:var(--green)}
.box.amber{background:var(--amber-soft)} .box.amber .label{color:var(--amber)}
.box.red{background:var(--accent-soft)} .box.red .label{color:var(--accent)}
.card{border:1px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.field{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface-2)}
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.msgs{display:flex;flex-direction:column;gap:10px}
.msg{max-width:85%;padding:10px 14px;border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.them{background:var(--surface-2);align-self:flex-start;border-bottom-left-radius:6px}
.msg.me{background:var(--accent);color:var(--accent-ink);align-self:flex-end;border-bottom-right-radius:6px}
.who{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.composer{display:flex;gap:8px;align-items:flex-end;position:sticky;bottom:0;background:var(--bg);padding-top:8px}
.composer textarea{flex:1;resize:none;min-height:46px;max-height:140px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.suggest{border:1px dashed var(--accent);background:var(--accent-soft);border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer}
.tag{display:inline-block;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--green-soft);color:var(--green);font-weight:600}
.toggle{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.toggle input{width:22px;height:22px;accent-color:var(--accent)}
.error{color:var(--accent);font-weight:600}
.thinking{color:var(--muted);font-style:italic}
ul.clean{margin:0;padding-left:18px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}