/* Uniekaiconsultancy — AI-assistent op de homepage (direct onder de hero).
   Eén groot venster in de stijl van de film: navy venster met een verlichte rand. Links de kop
   (eyebrow, H2, één regel) met daaronder de witte vraag-pillen zoals de zoekpil uit de film; rechts
   het gesprek: blauwe vraagballon, witte antwoordkaart en direct daaronder de contactknoppen.
   Vaste antwoorden uit de HTML, geen server. Hoort bij assets/assistent.js.
   Hergebruikt uit uniek.css: .sectie, .sectie--nacht, .wrap, .eyebrow, .lead, .tint, .knop, .icoon, .vh, .reveal.

   Toestanden:
   - zonder werkend assistent.js (.assistent zonder .assistent--aan): de drie vragen met antwoord onder
     elkaar en de contactknoppen; geen pillen, geen klik-instructie;
   - .assistent--aan (gezet door assistent.js): pillen en een lege toestand; de antwoorden liggen gestapeld
     in één rastercel (onzichtbaar), elk met een eigen kopie van de contactknoppen. De cel is dus vanaf de
     eerste paint zo hoog als het langste antwoord mét contactknoppen: niets verspringt, en de knoppen
     sluiten altijd direct op het antwoord aan (de vrije ruimte valt onderaan het venster);
   - data-staat="leeg" → "denken" → "typen" → "af". */

/* ---- sectie: navy vervolg van de hero, blauw licht achter het venster ---- */
.assistent-sectie{padding-block:clamp(48px,5.5vw,84px) clamp(64px,7vw,96px);
  background:var(--korrel),radial-gradient(52% 46% at 50% 66%,rgba(37,99,235,.36),transparent 72%),radial-gradient(640px 300px at 50% 0,rgba(37,99,235,.3),transparent 70%),var(--nacht);}
/* direct onder de hero: geen naad en weinig lucht, zodat de kopbalk van het venster al boven de vouw staat */
.hero + .sectie.assistent-sectie{margin-top:0;border-radius:0;padding-top:clamp(12px,1.2vw,18px);}
/* de film blijft op zijn naad staan, ook nu de assistent tussen hero en film zit */
.sectie.assistent-sectie + .sectie--film{margin-top:0;border-radius:0;}

/* ---- het venster ---- */
.assistent{position:relative;max-width:1080px;margin-inline:auto;border-radius:var(--r-l);color:var(--tekst-licht);
  background:linear-gradient(180deg,rgba(126,166,247,.12),rgba(126,166,247,.03) 38%,transparent 70%),var(--navy);
  box-shadow:var(--glas-rand),0 60px 120px -50px rgba(37,99,235,.75),0 30px 60px -30px rgba(0,0,0,.65);}
/* verlichte haarlijn, zoals .kaart--nacht */
.assistent::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(186,209,252,.75),rgba(126,166,247,.22) 34%,rgba(126,166,247,.1) 70%,rgba(126,166,247,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;}

/* kopbalk: glimlach-avatar + naam + AI-label */
.assistent__balk{display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--lijn-donker);border-radius:var(--r-l) var(--r-l) 0 0;background:rgba(255,255,255,.035);}
.assistent__avatar{position:relative;display:block;flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--glimlach-wit) 50% 58%/22px 17px no-repeat,var(--blauw);
  box-shadow:0 0 0 4px rgba(37,99,235,.2),0 10px 24px -8px rgba(37,99,235,.9),inset 0 1px 0 rgba(255,255,255,.3);}
.assistent__naam{display:flex;flex-direction:column;gap:3px;min-width:0;}
.assistent__naam b{display:flex;align-items:center;flex-wrap:wrap;font:600 18px/1.2 var(--f-tekst);letter-spacing:-.4px;color:var(--wit);}
.assistent__naam b > span:not(.assistent__ai){color:var(--ijs);}
.assistent__ai{margin-left:8px;padding:4px 7px 3px;border-radius:6px;font:800 11px/1 var(--f-display);letter-spacing:.12em;color:var(--wit);background:var(--blauw);box-shadow:0 0 0 1px rgba(186,209,252,.45),0 0 16px rgba(37,99,235,.7);}
.assistent__naam small{font-size:14px;line-height:1.3;color:var(--tekst-licht-zacht);}
.assistent[data-staat="denken"] .assistent__balk .assistent__avatar{animation:assistent-puls 1s ease-out infinite;}

/* romp: kop + vragen links, gesprek rechts */
.assistent__romp{display:grid;grid-template-columns:minmax(0,376px) minmax(0,1fr);}
.assistent__keuze{display:flex;flex-direction:column;gap:26px;padding:32px 28px 32px 30px;border-right:1px solid var(--lijn-donker);}
.assistent__kop .eyebrow{margin-bottom:14px;}
.assistent__kop h2{max-width:none;font-size:clamp(30px,3.6vw,50px);text-wrap:wrap;}   /* 'VRAAG HET' / 'DE AI.' */
.assistent__kop .lead{margin-top:16px;max-width:none;font-size:17px;line-height:1.5;}
.assistent__vragen{list-style:none;margin:0;padding:0;display:grid;gap:14px;isolation:isolate;}

/* vraag-pil: de zoekpil uit de film, maar dan een echte knop.
   Optillen met top (niet translate): dan maakt geen enkele pil een eigen stapellaag en blijft de gloed
   van de actieve pil (::before, z-index -1) áchter alle pillen, ook bij hover. */
.assistent__vraag{position:relative;top:0;display:flex;align-items:center;gap:12px;width:100%;min-height:62px;margin:0;padding:0 8px 0 20px;border:0;border-radius:var(--r-pil);cursor:pointer;
  background:var(--wit);color:var(--navy);font:600 16.5px/1.25 var(--f-tekst);text-align:left;
  box-shadow:0 0 0 6px rgba(255,255,255,.08),0 18px 34px -18px rgba(0,0,0,.8);
  transition:top var(--t-snel) var(--ease),box-shadow var(--t-ui),background-color var(--t-ui),color var(--t-ui);}
.assistent__vraag::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 0 44px rgba(37,99,235,.55);opacity:0;transition:opacity var(--t-ui),box-shadow var(--t-ui);}
.assistent__vraag > .icoon{width:18px;height:18px;color:var(--blauw);transition:color var(--t-ui);}
.assistent__vraagtekst{flex:1;min-width:0;}
.assistent__pijl{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--blauw);color:var(--wit);transition:translate var(--t-ui) var(--ease),background-color var(--t-ui),color var(--t-ui);}
.assistent__pijl .icoon{width:18px;height:18px;}
@media (hover:hover){
  .assistent__vraag:hover{top:-2px;box-shadow:0 0 0 6px rgba(255,255,255,.16),0 22px 40px -18px rgba(0,0,0,.85);}
  .assistent__vraag:hover .assistent__pijl{translate:3px 0;}
  .assistent__vraag[aria-pressed="true"]:hover{box-shadow:0 0 0 6px rgba(37,99,235,.34),0 0 0 7px rgba(126,166,247,.45);}
  .assistent__vraag[aria-pressed="true"]:hover::before{box-shadow:0 0 50px rgba(37,99,235,.6);}
}
.assistent__vraag:active{top:1px;}
.assistent__vraag[aria-pressed="true"]{background:var(--blauw);color:var(--wit);box-shadow:0 0 0 6px rgba(37,99,235,.28),0 0 0 7px rgba(126,166,247,.35);}
.assistent__vraag[aria-pressed="true"]::before{opacity:1;}
.assistent__vraag[aria-pressed="true"] > .icoon{color:var(--ijs);}
.assistent__vraag[aria-pressed="true"] .assistent__pijl{background:var(--wit);color:var(--blauw);}

/* ---- gesprek ---- */
.assistent__scherm{position:relative;min-width:0;padding:32px 32px 32px 34px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);}
.assistent__scherm:focus:not(:focus-visible){outline:none;}   /* krijgt focus als een 'Nog een vraag'-knop verdwijnt, of op een smal scherm na een vraag; met het toetsenbord zie je waar je bent */
.assistent__paar{grid-area:1/1;align-self:start;display:flex;flex-direction:column;gap:16px;min-width:0;}
.assistent__bel{margin:0;font-size:16.5px;line-height:1.6;}
.assistent__bel--vraag{align-self:flex-end;max-width:min(82%,440px);padding:12px 20px;border-radius:22px 22px 6px 22px;background:var(--blauw);color:var(--wit);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 32px -16px rgba(37,99,235,.95);}
.assistent__rij{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;}
.assistent__rij > .assistent__avatar{width:38px;height:38px;margin-top:2px;background-size:18px 14px,auto;box-shadow:0 0 0 3px rgba(37,99,235,.2),0 8px 18px -8px rgba(37,99,235,.9);}
.assistent__cel{display:grid;min-width:0;}
.assistent__cel > *{grid-area:1/1;}
.assistent__bel--antwoord{padding:20px 24px;border-radius:6px 22px 22px 22px;background:var(--wit);color:var(--tekst);box-shadow:0 1px 0 rgba(11,28,61,.04),0 24px 50px -26px rgba(0,0,0,.7);}
.assistent__bel--antwoord p{margin:0;text-wrap:pretty;}
/* de zichtbare ballon waarin het antwoord verschijnt; de statische ballon eronder houdt de maat */
.assistent__maat{visibility:hidden!important;}
.assistent__stroom{justify-self:start;align-self:start;max-width:100%;}
.assistent__stroom.is-denken{display:grid;place-items:center;min-width:76px;min-height:52px;padding:14px 20px;}
.assistent__laden{display:block;width:32px;height:25px;overflow:visible;color:var(--blauw);}
.assistent__laden path{fill:none;stroke:currentColor;stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:assistent-teken .55s var(--ease) .06s forwards;}
.assistent__laden circle{fill:currentColor;transform-box:fill-box;transform-origin:center;scale:0;animation:assistent-punt .22s var(--ease) .56s forwards;}
.assistent__cursor{display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.16em;border-radius:1px;background:var(--blauw);}

/* lege toestand: wat een assistent laat zien voordat je iets vraagt */
.assistent__leeg{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center;
  border-radius:22px;background:radial-gradient(55% 55% at 50% 44%,rgba(37,99,235,.18),transparent 75%);
  transition:opacity var(--t-ui),visibility 0s linear var(--t-ui);}
.assistent__avatar--groot{width:76px;height:76px;background-size:36px 28px,auto;
  box-shadow:0 0 0 10px rgba(37,99,235,.14),0 0 0 22px rgba(37,99,235,.07),0 0 70px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.3);}
.assistent__leeg p{display:flex;flex-direction:column;gap:8px;}
.assistent__leeg b{font:800 clamp(22px,2.2vw,28px)/1.1 var(--f-display);letter-spacing:-.01em;color:var(--wit);}
.assistent__leeg p span{font-size:16px;color:var(--tekst-licht-zacht);}

/* ---- contact, direct onder het antwoord (uitgelijnd met de antwoordkaart) ----
   Bewust in twee rijen, op elke breedte: 'Neem contact op' als brede blauwe balk (net zo breed als de
   antwoordkaart), Bel en WhatsApp samen eronder. Op één rij paste het alleen bij toeval. */
.assistent__cta{margin-left:50px;padding-top:6px;}
.assistent__cta-tekst{margin-bottom:16px;padding-top:18px;border-top:1px solid var(--lijn-donker);font-size:17px;font-weight:600;line-height:1.4;color:var(--wit);}
.assistent__knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.assistent__knoppen .knop{min-height:50px;padding:0 20px;font-size:15.5px;}
.assistent__knoppen .knop--blauw{flex:1 0 100%;justify-content:space-between;min-height:54px;padding-left:24px;font-size:16.5px;}
.assistent__knoppen .knop--glas{flex:1 1 auto;}
.assistent__knoppen .knop--pijl{padding-right:6px;}
.assistent__knoppen .knop--pijl::after{width:42px;height:42px;}
.assistent__knoppen .knop--glas .icoon{width:18px;height:18px;}
/* 'Nog een vraag': alleen als de vragen boven het gesprek staan (smal scherm), zie hieronder */
.assistent__meer{display:none;}

/* ---- met assistent.js: gestapeld, één antwoord tegelijk ---- */
.assistent--aan .assistent__paar{visibility:hidden;}
.assistent--aan .assistent__paar.is-actief{visibility:visible;}
.assistent--aan .assistent__paar.is-actief .assistent__bel--vraag{animation:assistent-in .34s var(--ease) both;transform-origin:100% 100%;}
.assistent--aan .assistent__paar.is-actief .assistent__rij > .assistent__avatar,
.assistent--aan .assistent__paar.is-actief .assistent__stroom{animation:assistent-in .3s var(--ease) .14s both;transform-origin:0 0;}
.assistent--aan:not([data-staat="leeg"]) .assistent__leeg{opacity:0;visibility:hidden;}
.assistent--aan .assistent__cta{visibility:hidden;}
.assistent--aan .assistent__cta > *{opacity:0;translate:0 10px;}
.assistent--aan .assistent__cta.is-zichtbaar{visibility:visible;}
.assistent--aan .assistent__cta.is-zichtbaar > *{opacity:1;translate:0 0;transition:opacity .4s var(--ease),translate .4s var(--ease);}
.assistent--aan .assistent__cta.is-zichtbaar > :nth-child(2){transition-delay:90ms;}
.assistent--aan .assistent__cta.is-zichtbaar > :nth-child(3){transition-delay:180ms;}

/* ---- zonder (werkend) assistent.js: de drie vragen met antwoord onder elkaar ---- */
.assistent:not(.assistent--aan) .assistent__romp{display:block;}
.assistent:not(.assistent--aan) .assistent__keuze{padding-bottom:0;border:0;}
.assistent:not(.assistent--aan) :is(.assistent__kop .lead,.assistent__vragen,.assistent__leeg){display:none;}
.assistent:not(.assistent--aan) .assistent__scherm{display:flex;flex-direction:column;gap:30px;}

@keyframes assistent-in{from{opacity:0;translate:0 10px;scale:.96}}
@keyframes assistent-teken{to{stroke-dashoffset:0}}
@keyframes assistent-punt{to{scale:1}}
@keyframes assistent-puls{0%{box-shadow:0 0 0 4px rgba(37,99,235,.2),0 0 0 4px rgba(126,166,247,.5)}100%{box-shadow:0 0 0 4px rgba(37,99,235,.2),0 0 0 16px rgba(126,166,247,0)}}

/* ---- tablet en smaller: kop en vragen boven, gesprek eronder ---- */
@media (max-width:960px){
  .assistent__romp{grid-template-columns:minmax(0,1fr);}
  .assistent__keuze{gap:22px;padding:26px 24px 24px;border-right:0;border-bottom:1px solid var(--lijn-donker);}
  .assistent__kop h2{font-size:clamp(30px,5.4vw,44px);}
  .assistent__scherm{padding:26px 24px;}
  /* Op een smal scherm staat het gesprek ónder de vragen. Een leeg vlak van een antwoord hoog
     zou er leeg uitzien, dus tot de eerste vraag is de lege toestand één regel. Bij de eerste klik
     krijgt het vlak meteen zijn volle hoogte (het gesprek scrolt in beeld); daarna springt er niets meer. */
  .assistent--aan:not(.is-gevraagd) .assistent__paar{display:none;}
  .assistent__leeg{flex-direction:row;justify-content:flex-start;gap:16px;padding:4px 2px;text-align:left;background:none;}
  .assistent__avatar--groot{width:52px;height:52px;background-size:25px 19px,auto;box-shadow:0 0 0 6px rgba(37,99,235,.14),0 0 40px rgba(37,99,235,.55),inset 0 1px 0 rgba(255,255,255,.3);}
  .assistent__leeg p{gap:4px;}
  .assistent__leeg b{font-size:20px;}
  .assistent__leeg p span{font-size:15px;}
  /* de vragen staan nu boven beeld: de andere twee vragen als kleine knoppen onder het antwoord */
  .assistent__meer{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;}
  .assistent__meer-label{flex:1 0 100%;font-size:15px;font-weight:600;color:var(--tekst-licht-zacht);}
  .assistent__chip{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:0;padding:0 18px 0 14px;border:1px solid rgba(126,166,247,.5);border-radius:var(--r-pil);cursor:pointer;
    background:rgba(37,99,235,.16);color:var(--wit);font:600 15px/1.2 var(--f-tekst);text-align:left;transition:background-color var(--t-ui),border-color var(--t-ui);}
  .assistent__chip .icoon{width:15px;height:15px;color:var(--lucht);}
  .assistent__chip:hover{background:rgba(37,99,235,.3);border-color:var(--lucht);}
}
/* ---- telefoon ---- */
@media (max-width:560px){
  .assistent{border-radius:24px;}
  .assistent__balk{gap:12px;padding:14px 16px;border-radius:24px 24px 0 0;}
  .assistent__avatar{width:40px;height:40px;background-size:19px 15px,auto;}
  .assistent__naam b{font-size:16px;}
  .assistent__ai{margin-left:6px;font-size:10px;}
  .assistent__naam small{font-size:13px;}
  .assistent__keuze{gap:18px;padding:22px 16px 20px;}
  .assistent__kop .eyebrow{margin-bottom:10px;}
  .assistent__kop h2{font-size:min(8.2vw,34px);}
  .assistent__kop .lead{margin-top:10px;font-size:16px;}
  .assistent__vragen{gap:12px;}
  .assistent__vraag{min-height:58px;padding-left:18px;font-size:16px;}
  .assistent__pijl{width:42px;height:42px;}
  @media (max-width:360px){.assistent__vraag{gap:10px;padding-left:14px;font-size:15px;}}
  .assistent__scherm{padding:20px 16px 22px;}
  .assistent:not(.assistent--aan) .assistent__scherm{gap:24px;}
  .assistent__paar{gap:12px;}
  .assistent__bel{font-size:16px;line-height:1.55;}
  .assistent__rij{grid-template-columns:minmax(0,1fr);}
  .assistent__rij > .assistent__avatar{display:none;}
  .assistent__bel--antwoord{padding:16px 18px;border-radius:6px 20px 20px 20px;}
  .assistent__bel--vraag{padding:11px 16px;border-radius:20px 20px 6px 20px;}
  .assistent__cta{margin-left:0;padding-top:4px;}
  .assistent__cta-tekst{padding-top:16px;font-size:16.5px;}
  .assistent__knoppen .knop{min-height:50px;padding:0 14px;font-size:15px;}
  .assistent__knoppen .knop--blauw{min-height:54px;padding-left:20px;font-size:16px;}
  .assistent__chip{font-size:14.5px;padding:0 14px 0 12px;}
}

/* ---- rustige beweging: geen puls, geen tekenen; het antwoord staat er meteen ---- */
@media (prefers-reduced-motion:reduce){
  .assistent[data-staat] .assistent__avatar,.assistent--aan .assistent__paar.is-actief *{animation:none!important;}
  .assistent__cursor{display:none;}
}