.bkn-chat{--font-core:Space,'Space Grotesk',Arial,sans-serif;--font-mono:monospace;--ink:#060a14;--sand:#f3efe8;--blue:#0b49f5;--blue-bright:#3c7bff;--blue-soft:#7fa8ff;--text-secondary:#626978;--text-on-dark-secondary:#bbc3d1;--radius-round:999px;--radius-xs:4px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--dur-fast:180ms;--ease-beacon:cubic-bezier(.2,.8,.2,1);--weight-medium:500;--weight-regular:400}.bkn-chat,.bkn-chat *{box-sizing:border-box}.bkn-chat [hidden]{display:none!important}.bkn-chat button,.bkn-chat textarea{font:inherit}.bkn-chat button{border:0}.bkn-chat p{margin:0}.bkn-chat :focus-visible{outline:3px solid #7fa8ff;outline-offset:3px}
/* --------------------------------------------------------------------------
   Website-assistent — het zwevende gesprekspaneel rechtsonder.

   In dezelfde taal als de rest van het systeem: inkt en zand, één blauw
   accent, mono voor labels, dezelfde easing en hoekradii. Er komt geen nieuwe
   kleur en geen nieuwe letter bij.

   Twee vormen:
   - vanaf 640px een paneel rechtsonder, naast de knop;
   - daaronder een vel dat het scherm vult, want een paneel van 380px op een
     telefoon van 360px is geen paneel.

   Het paneel staat boven alles behalve het mobiele menu — dat mag hier
   overheen, anders staat de knop in de weg tijdens het navigeren.
   -------------------------------------------------------------------------- */

.bkn-chat{position:fixed;right:24px;bottom:24px;z-index:60;
  font-family:var(--font-core);
  /* Alleen de knop en het paneel vangen aanwijzingen; de lege ruimte
     ertussen niet, anders ligt er een onzichtbaar blok over de pagina. */
  pointer-events:none}
.bkn-chat > *{pointer-events:auto}

/* ---- De knop ------------------------------------------------------------
   Een baken: een donkere schijf met een lichtpunt erin. Bij een ongelezen
   antwoord licht de rand op. */
.bkn-chat__toggle{position:absolute;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:var(--radius-round);
  background:var(--ink);color:var(--sand);cursor:pointer;
  box-shadow:0 10px 34px rgba(6,10,20,.34),0 0 0 1px rgba(243,239,232,.1) inset;
  transition:transform var(--dur-fast) var(--ease-beacon),
             box-shadow var(--dur-fast) var(--ease-beacon)}
.bkn-chat__toggle:hover{transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(6,10,20,.4),0 0 0 1px rgba(60,123,255,.5) inset}
.bkn-chat__toggle:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px}
.bkn-chat__toggle svg{width:24px;height:24px;display:block}
/* De twee pictogrammen wisselen; de knop blijft dezelfde knop. */
.bkn-chat__toggle .bkn-ic-close{display:none}
.bkn-chat.is-open .bkn-chat__toggle .bkn-ic-chat{display:none}
.bkn-chat.is-open .bkn-chat__toggle .bkn-ic-close{display:block}

/* Zacht blauw schijnsel achter de knop: hetzelfde signaal als elders op de
   site, hier heel klein gehouden. */
.bkn-chat__toggle::before{content:"";position:absolute;inset:-10px;border-radius:inherit;
  background:radial-gradient(circle,rgba(11,73,245,.32),transparent 68%);
  z-index:-1;opacity:0;transition:opacity var(--dur-fast)}
.bkn-chat__toggle:hover::before{opacity:1}

/* ---- Het paneel --------------------------------------------------------- */
.bkn-chat__panel{position:absolute;right:0;bottom:74px;
  display:flex;flex-direction:column;
  width:min(384px,calc(100vw - 40px));height:min(560px,calc(100vh - 140px));
  background:var(--sand);color:var(--ink);
  border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:0 26px 70px rgba(6,10,20,.34),0 0 0 1px rgba(6,10,20,.1);
  transform-origin:100% 100%;
  animation:bkn-chat-in .3s var(--ease-beacon) both}

@keyframes bkn-chat-in{
  from{opacity:0;transform:translateY(10px) scale(.98)}
  to{opacity:1;transform:none}
}

/* ---- Kop ---------------------------------------------------------------- */
.bkn-chat__head{flex:none;padding:18px 20px 16px;background:var(--ink);color:var(--sand)}
.bkn-chat__eyebrow{display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-soft)}
.bkn-chat__dot{width:6px;height:6px;border-radius:var(--radius-round);
  background:var(--blue-bright);box-shadow:0 0 0 3px rgba(11,73,245,.25)}
.bkn-chat__title{margin:9px 0 0;font-size:15px;font-weight:var(--weight-regular);
  line-height:1.45;color:var(--text-on-dark-secondary)}

/* ---- Berichten ---------------------------------------------------------- */
.bkn-chat__log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:20px;display:flex;flex-direction:column;gap:14px;
  scrollbar-width:thin}

.bkn-msg{max-width:88%;font-size:14.5px;line-height:1.6;white-space:pre-wrap;
  padding:12px 15px;border-radius:var(--radius-lg)}
.bkn-msg--bot{align-self:flex-start;background:#fff;
  border:1px solid rgba(6,10,20,.08);border-bottom-left-radius:var(--radius-xs)}
.bkn-msg--user{align-self:flex-end;background:var(--blue);color:#fff;
  border-bottom-right-radius:var(--radius-xs)}

/* De samenvatting vóór een doorverwijzing: zelfde bericht, andere status. */
.bkn-msg--sum{align-self:stretch;max-width:100%;background:rgba(11,73,245,.06);
  border:1px solid rgba(11,73,245,.18);border-radius:var(--radius-md);
  font-size:13.5px;color:var(--text-secondary)}
.bkn-msg--sum b{display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:var(--weight-regular);
  color:var(--blue);margin-bottom:6px}

/* Denkt-indicator: drie punten in hetzelfde ritme als de rest. */
.bkn-typing{display:flex;gap:5px;align-items:center;padding:15px}
.bkn-typing span{width:6px;height:6px;border-radius:var(--radius-round);
  background:rgba(6,10,20,.3);animation:bkn-blip 1.1s var(--ease-beacon) infinite}
.bkn-typing span:nth-child(2){animation-delay:.15s}
.bkn-typing span:nth-child(3){animation-delay:.3s}
@keyframes bkn-blip{0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}}

/* ---- Keuzeknoppen en de actieknop --------------------------------------- */
.bkn-chat__opts{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:100%}
.bkn-opt{font-family:var(--font-core);font-size:13px;line-height:1.3;
  padding:9px 14px;border-radius:100px;cursor:pointer;text-align:left;
  background:transparent;color:var(--ink);border:1px solid rgba(6,10,20,.2);
  transition:border-color var(--dur-fast),background var(--dur-fast),color var(--dur-fast)}
.bkn-opt:hover{border-color:var(--blue);color:var(--blue);background:rgba(11,73,245,.05)}
.bkn-opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.bkn-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;
  align-self:stretch;padding:15px 18px;border-radius:var(--radius-md);
  background:var(--blue);color:#fff;font-size:14.5px;font-weight:var(--weight-medium);
  transition:background var(--dur-fast) var(--ease-beacon)}
.bkn-cta:hover{background:var(--ink)}
.bkn-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* De maat moet hier staan: de SVG heeft alleen een viewBox en geen eigen
   breedte, dus binnen een flexregel klapt hij anders naar nul dicht. */
.bkn-cta__arrow{flex:none;display:flex}
.bkn-cta__arrow svg{width:20px;height:20px;display:block}
/* Zolang het formulier nog niet bestaat staat dat er eerlijk bij, zodat
   niemand op een leeg formulier uitkomt zonder waarschuwing. */
.bkn-cta__note{display:block;margin-top:3px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:var(--weight-regular);
  color:rgba(255,255,255,.72)}

/* ---- Invoer ------------------------------------------------------------- */
/* De rij blijft precies zo breed als het paneel. Het tekstvak rekt mee, de
   verzendknop niet: die houdt zijn 42px en kan dus nooit uit beeld worden
   gedrukt. min-width:0 is daarbij het belangrijkste — zonder die regel weigert
   een flexitem onder zijn eigen inhoudsbreedte te krimpen en duwt het de rij
   breder dan het scherm. */
.bkn-chat__form{flex:none;display:flex;align-items:flex-end;gap:10px;
  width:100%;max-width:100%;
  padding:14px;border-top:1px solid rgba(6,10,20,.1);background:var(--sand)}
.bkn-chat__input{flex:1 1 auto;min-width:0;max-width:100%;resize:none;
  font-family:var(--font-core);font-size:15px;line-height:1.5;
  padding:11px 13px;max-height:110px;
  background:#fff;color:var(--ink);
  border:1px solid rgba(6,10,20,.16);border-radius:var(--radius-md);
  transition:border-color var(--dur-fast)}
/* Focus wordt uitsluitend met de rand aangegeven. Geen transform, geen andere
   breedte, geen negatieve marge: dan verspringt er niets bij het aantikken. */
.bkn-chat__input:focus{outline:none;border-color:var(--blue)}
.bkn-chat__input::placeholder{color:rgba(6,10,20,.4)}

.bkn-chat__send{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--radius-md);cursor:pointer;
  background:var(--blue);color:#fff;
  transition:background var(--dur-fast),opacity var(--dur-fast)}
.bkn-chat__send:hover{background:var(--ink)}
.bkn-chat__send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bkn-chat__send[disabled]{opacity:.35;cursor:default;background:var(--blue)}
.bkn-chat__send svg{width:18px;height:18px}

.bkn-chat__fine{flex:none;padding:0 16px 12px;background:var(--sand);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(6,10,20,.38)}

/* --------------------------------------------------------------------------
   Geen inzoomen bij het aantikken van het tekstvak

   Safari op iOS zoomt de hele pagina in zodra je een invoerveld met een
   lettergrootte ONDER de 16px aanraakt. Het stond hier op 15px, dus dat
   gebeurde: het paneel werd meegeschaald, de verzendknop schoof daardoor
   buiten beeld en er ontstond horizontale overloop.

   16px op aanraakschermen haalt die zoom weg. Dat is de juiste oplossing:
   user-scalable=no of maximum-scale=1 zou het ook "oplossen", maar dan neem
   je iedereen die op de site wil inzoomen zijn zoom af. Die blijft dus
   gewoon werken.

   Alleen onder 768px, zodat de desktopweergave ongemoeid blijft.
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .bkn-chat__input{font-size:16px}
}

/* ---- Telefoon ----------------------------------------------------------- */
@media (max-width:639px){
  .bkn-chat{right:16px;bottom:16px}
  .bkn-chat__toggle{width:52px;height:52px}
  /* Vol scherm. `100dvh` houdt rekening met de adresbalk van mobiele Safari,
     die anders de invoerregel onder de rand duwt. */
  .bkn-chat__panel{position:fixed;inset:0;width:100%;height:100dvh;
    border-radius:0;bottom:auto;right:auto;animation-name:bkn-chat-in-sheet}
  @keyframes bkn-chat-in-sheet{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
  }
  .bkn-chat__head{padding-top:calc(18px + env(safe-area-inset-top));padding-right:64px}
  .bkn-chat__fine{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  /* Op vol scherm heeft het paneel zijn eigen sluitknop nodig: de zwevende
     knop ligt eronder. */
  .bkn-chat__close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;
    display:flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:var(--radius-round);cursor:pointer;
    background:rgba(243,239,232,.1);color:var(--sand)}
  .bkn-chat__close svg{width:16px;height:16px}
  .bkn-chat.is-open .bkn-chat__toggle{display:none}
}
@media (min-width:640px){
  .bkn-chat__close{display:none}
}

/* Erg lage vensters (landschap op een telefoon): het paneel moet passen. */
@media (min-width:640px) and (max-height:620px){
  .bkn-chat__panel{height:calc(100vh - 120px)}
}

@media (prefers-reduced-motion:reduce){
  .bkn-chat__panel{animation:none}
  .bkn-chat__toggle:hover{transform:none}
  .bkn-typing span{animation:none;opacity:.5}
}

/* Bij het afdrukken van een pagina hoort geen chatknop. */
@media print{.bkn-chat{display:none}}

.bkn-chat{z-index:1000}.bkn-chat__fine{line-height:1.5}.bkn-chat__panel{max-width:calc(100vw - 32px)}@media(max-width:639px){.bkn-chat__panel{max-width:100vw}}.bkn-chat .bkn-cta{color:#fff!important;text-decoration:none}.bkn-chat .bkn-opt{border:1px solid #060a1433;font-size:13px}.bkn-chat .bkn-chat__send{font-size:15px}.bkn-chat .bkn-chat__input{font-size:15px}.bkn-chat .bkn-chat__panel{color:#060a14}