/* Basis: kleuren, scherm, kop, podium met Zoë, antwoordpaneel. Geldt voor elk scherm. */
:root{--oranje:#FF7A00;--oranje-zacht:#FFF1E4;--inkt:#1F2937;--grijs:#6B7280;--lijn:#ECE5DD;--paneel:240px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#EFE8E1}
body{font-family:Nunito,system-ui,sans-serif;color:var(--inkt);overflow:hidden}
[hidden]{display:none!important}
/* iOS-gegevensherkenning (stippellijntjes onder getallen/eenheden): als iOS toch een link invoegt, ziet niemand hem */
a[x-apple-data-detectors],a[x-apple-data-detectors-type]{color:inherit!important;text-decoration:none!important;font:inherit!important;pointer-events:none}
.scherm{position:relative;width:100%;max-width:430px;height:100vh;height:100dvh;margin:0 auto;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 42%,#FFE6D1 0%,#FFF4EA 45%,#FFF8F2 70%),#FFF8F2}

/* kop */
header{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 16px 0}
header img{height:24px;display:block}
.mandje{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(31,41,55,.06);display:grid;place-items:center}
.mandje svg{width:19px;height:19px}
.tekst{flex:1;min-width:0;display:flex;align-items:flex-start;gap:8px}
.zin{flex:1;min-width:0}
/* Terug: zelfde stijl als de geluidsknop, rechtsboven in het paneel: in de tekstrij, gecentreerd op Zoë's titelregel,
   rechterrand in dezelfde kolom als de geluidsknop (16px); alleen als er een vorige stap is (niet op home) */
.terug{flex:0 0 44px;height:44px;margin-top:-10px;display:grid;place-items:center;padding:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--inkt);border:1px solid rgba(124,72,24,.12);box-shadow:0 4px 14px rgba(124,72,24,.16);cursor:pointer;transition:transform .15s}
.terug svg{width:21px;height:21px}
.terug:active{transform:scale(.92)}
.terug:focus-visible,.geluid:focus-visible{outline:3px solid rgba(255,122,0,.55);outline-offset:2px}

/* podium: Zoë boven het paneel. De oranje gloed staat vast in een eigen laag en beweegt nooit mee. */
.achtergrond{position:absolute;left:0;right:0;top:58px;bottom:calc(var(--paneel) - 6px);z-index:0;pointer-events:none}
.halo{position:absolute;left:50%;bottom:6%;width:min(78vw,330px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 45%,#FFD3AE 0%,#FFE4CC 45%,rgba(255,236,220,0) 72%)}
.podium{position:absolute;left:0;right:0;top:58px;bottom:calc(var(--paneel) - 6px);z-index:1;display:flex;justify-content:center;align-items:flex-end;
  transform-origin:0 0;pointer-events:none;transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.scherm.opzij .podium{z-index:2}  /* zodra Zoë iets aanwijst: haar hand altijd vóór de rondjes */
.vloer{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:44%;height:16px;border-radius:50%;background:rgba(31,41,55,.10);filter:blur(5px)}
canvas#zoe{position:relative;height:100%;max-height:600px;width:auto;display:block;transform-origin:50% 100%;animation:adem 4.2s ease-in-out infinite}
@keyframes adem{50%{transform:translateY(-2px) scaleY(1.004)}}
@keyframes zweef{50%{transform:translateY(-5px)}}
@keyframes halo{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,122,0,.5)}100%{opacity:0;box-shadow:0 0 0 18px rgba(255,122,0,0)}}

/* antwoordpaneel: tekst + keuzes + invoer als één gesprek */
.paneel{position:absolute;left:0;right:0;bottom:0;z-index:4;background:#fff;border-radius:28px 28px 0 0;
  box-shadow:0 -10px 34px rgba(124,72,24,.10);padding:20px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.paneel::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:#EEE7E0}
.vraag{margin-top:auto}   /* tekst bovenaan, knoppen er direct onder; eventuele extra ruimte valt boven het invoerveld */
.afzender{display:flex;align-items:flex-start;gap:10px;min-height:52px}
.avatar{flex:0 0 40px;height:40px;border-radius:50%;background:#FFE7D3;overflow:hidden;border:2px solid #fff;box-shadow:0 0 0 2px var(--oranje)}
.avatar img{width:100%;height:100%;display:block;object-fit:cover}
.zin{font-size:18px;font-weight:900;line-height:24px;letter-spacing:-.1px;transition:opacity .18s ease,transform .18s ease}
.zin small{display:block;line-height:1.3;font-size:13.5px;font-weight:700;color:var(--grijs);margin-top:2px;letter-spacing:0}
.zin.weg{opacity:0;transform:translateY(4px)}
.chip{display:flex;align-items:center;gap:8px;border:0;background:var(--oranje-zacht);color:#9A4A06;border-radius:14px;padding:11px 12px;font:800 14px Nunito,system-ui,sans-serif;cursor:pointer;text-align:left}
.chip svg{width:16px;height:16px}
.chip:active{transform:scale(.97)}
.chip.hoofd{background:var(--oranje);color:#fff}
.vraag{display:flex;align-items:center;gap:10px;background:#F6F2EE;border-radius:16px;padding:6px 6px 6px 14px}
.vraag input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:700 16px Nunito,system-ui,sans-serif;color:var(--inkt)}
.vraag input::placeholder{color:#9AA3AF}
.vraag button{flex:0 0 40px;height:40px;border:0;border-radius:12px;background:var(--oranje);display:grid;place-items:center;cursor:pointer}
.vraag button svg{width:20px;height:20px;color:#fff}

/* geluidsknop: rechtsonder in Zoë's ruimte, zweeft altijd net boven het paneel (ook als het paneel hoger wordt) */
.geluid{position:absolute;right:16px;bottom:calc(var(--paneel) + 12px);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(124,72,24,.12);padding:0;
  background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(124,72,24,.16);display:grid;place-items:center;color:var(--inkt);cursor:pointer;transition:bottom .3s,background .2s,color .2s}
.geluid svg{width:21px;height:21px}
.geluid .aan,.geluid.aan .uit{display:none}
.geluid.aan .aan{display:block}
.geluid.aan{background:var(--oranje);color:#fff;border-color:var(--oranje)}
/* herhaal-knop: boven de geluidsknop, alleen als het geluid aan staat */
.geluid.herhaal{bottom:calc(var(--paneel) + 66px);display:none;transition:bottom .3s,opacity 1.5s ease}
.scherm.geluid-aan .geluid.herhaal{display:grid}
/* zolang Zoë praat of uitlegt: meteen weg en niet klikbaar; daarna in 1,5 s van volledig transparant naar volledig zichtbaar */
.scherm.herhaal-weg .geluid.herhaal{opacity:0;pointer-events:none;transition:bottom .3s,opacity .15s ease}

/* korte schermen */
@media (max-height:700px){.zin{font-size:16.5px}.afzender{min-height:44px}}
@media (prefers-reduced-motion:reduce){canvas#zoe{animation:none}}

/* Inhoud als gewone HTML (voor zoekmachines en zonder JavaScript). Met JavaScript neemt de app het over. */
#statisch{display:none}
.geen-js #statisch{display:block;max-width:720px;margin:0 auto;padding:24px 16px 40px;font-size:15px;line-height:1.55;overflow:auto;height:100%}
.geen-js body{overflow:auto}
.geen-js .scherm{display:none}
#statisch img{max-width:100%;height:auto}
#statisch table{border-collapse:collapse}#statisch td{padding:4px 10px 4px 0}