/* ======================================================================
   duonova. - de chat voor bezoekers, rechtsonder op elke publieke pagina
   ----------------------------------------------------------------------
   De HTML komt uit dn_bchat_widget() in _bezoekerschat.php, het gedrag uit
   assets/js/bezoekerschat.js. De kleuren en letters zijn die van
   duonova.css (:root): roest, oranje, crème, Bricolage en Public Sans.

   Dicht is het een ronde pil met "Chat met ons"; op een telefoon alleen
   het rondje. Open staat het venster erboven: een roest kop met het
   beeldmerk, de berichten op crème (de bezoeker rechts in roest, wij links
   in wit) en onderaan het tekstvak met een oranje rondje om te versturen.
   ====================================================================== */

.bchat{
  /* Hoeveel hoger de chat moet staan, als er onderaan al iets vast staat
     (de balk met het totaal in de configurator). Zet bezoekerschat.js. */
  --bchat-onder:0px;
  position:fixed;right:20px;bottom:calc(20px + var(--bchat-onder) + env(safe-area-inset-bottom));
  z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:var(--tekst);
  pointer-events:none;
}
.bchat[hidden]{display:none}
.bchat > *{pointer-events:auto}

/* ---- De knop ---- */
.bchat-knop{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  height:54px;padding:0 22px 0 18px;border:0;border-radius:999px;cursor:pointer;
  background:var(--roest);color:var(--creme);
  font:600 16px/1 var(--kop);letter-spacing:-.01em;
  /* Een lichte ring: zo valt de knop ook op over de roest kop van een pagina. */
  outline:2px solid rgba(var(--creme-rgb),.55);outline-offset:-2px;
  box-shadow:0 2px 6px rgba(var(--inkt-rgb),.12),0 14px 34px rgba(var(--roest-rgb),.32);
  transition:transform var(--soepel),background var(--soepel);
}
.bchat-knop svg{width:22px;height:22px;flex:none}
@media (hover:hover){.bchat-knop:hover{background:var(--roest-diep);transform:translateY(-2px)}}
.bchat-knop:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
/* Open: de knop wordt een rondje om het venster te sluiten. */
.bchat.is-open .bchat-knop{width:54px;padding:0;justify-content:center}
.bchat.is-open .bchat-knop-tekst{display:none}
/* Een antwoord dat de bezoeker nog niet zag (.heeft-nieuw, zet bezoekerschat.js):
   het ballonnetje wijkt voor de twee puntjes van het beeldmerk, crème en
   oranje, die om en om opspringen. De stip met het aantal is er alleen voor
   een schermlezer (.enkel-voorlezen). */
.bchat-stip[hidden]{display:none}
.bchat-puntjes{display:none;align-items:center;justify-content:center;gap:5px;width:24px;height:22px;flex:none}
.bchat-puntjes i{width:8px;height:8px;border-radius:50%;background:var(--creme);animation:bchat-hop 1.1s cubic-bezier(.3,0,.4,1) infinite}
.bchat-puntjes i:last-child{background:var(--oranje);animation-delay:.55s}
@keyframes bchat-hop{0%,55%,100%{transform:translateY(0)}25%{transform:translateY(-7px)}}
.bchat.heeft-nieuw:not(.is-open) .bchat-knop > svg{display:none}
.bchat.heeft-nieuw:not(.is-open) .bchat-puntjes{display:inline-flex}

/* ---- Het venster ---- */
.bchat-venster{
  width:min(380px,calc(100vw - 40px));
  height:min(560px,calc(100vh - 140px - var(--bchat-onder)));
  height:min(560px,calc(100dvh - 140px - var(--bchat-onder)));
  display:flex;flex-direction:column;overflow:hidden;
  margin:0;padding:0;   /* niets overnemen van algemene regels voor blokken op de site */
  background:var(--creme);color:var(--inkt);
  border:1px solid rgba(var(--inkt-rgb),.1);border-radius:var(--rond-kaart);
  box-shadow:var(--schaduw-op);
  transform-origin:bottom right;
}
.bchat-venster[hidden]{display:none}
/* Alleen als de bezoeker zelf op de knop drukt (bezoekerschat.js zet .springt
   en haalt hem na afloop weg). Na een paginawissel staat het venster er meteen
   en vol: een animatie die niet afspeelt (een tabblad op de achtergrond) liet
   het anders doorzichtig staan. */
.bchat.springt .bchat-venster{animation:bchat-op .22s ease}
@keyframes bchat-op{from{opacity:0;transform:translateY(10px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.bchat.springt .bchat-venster,.bchat-puntjes i{animation:none}.bchat-knop{transition:none}}

.bchat-kop{
  display:flex;align-items:center;gap:12px;
  padding:16px 14px 16px 18px;
  background:var(--roest);color:var(--creme);
}
.bchat-kop .beeldmerk{width:38px;height:38px;border-radius:11px;flex:none;background:var(--creme)}
.bchat-kop .beeldmerk i{background:var(--roest)}
.bchat-kop .beeldmerk i:last-child{background:var(--oranje)}
.bchat-kop-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bchat-kop-tekst strong{font:700 17px/1.15 var(--kop);letter-spacing:-.02em}
.bchat-kop-tekst span{font-size:13px;line-height:1.3;color:rgba(var(--creme-rgb),.78)}
.bchat-weg{
  width:36px;height:36px;flex:none;border:0;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(var(--creme-rgb),.12);color:var(--creme);
}
.bchat-weg svg{width:18px;height:18px}
@media (hover:hover){.bchat-weg:hover{background:rgba(var(--creme-rgb),.22)}}

/* ---- De berichten ---- */
.bchat-vak{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:6px;
  padding:18px 14px 10px;
  /* Dezelfde tegel als achter de chat in de app (_chat_tegel.php, alleen duonova):
     1000 px op 500, en hij scrolt niet mee met de berichten. */
  background:#EFE3D5 url("/api/portaal.php?tegel=0&v=1") 0 0/500px 500px repeat;
}
.bchat-rij{display:flex;flex-direction:column;max-width:84%}
.bchat-rij.van-ons{align-self:flex-start;align-items:flex-start}
.bchat-rij.van-ik{align-self:flex-end;align-items:flex-end}
.bchat-bel{
  margin:0;padding:10px 14px;border-radius:18px;
  font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;
}
.van-ons .bchat-bel{background:var(--wit);color:var(--inkt);border:1px solid rgba(var(--inkt-rgb),.08);border-bottom-left-radius:6px}
.van-ik .bchat-bel{background:var(--roest);color:var(--creme);border-bottom-right-radius:6px}
.bchat-bel a{color:inherit;text-decoration:underline}
.bchat-tijd{font-size:11px;color:var(--inkt-zacht);margin:3px 6px 4px}
.bchat-rij.is-bezig .bchat-bel{opacity:.6}

.bchat-af{
  margin:0;padding:10px 16px;font-size:13.5px;line-height:1.4;color:var(--inkt-zacht);
  border-top:1px solid var(--lijn);background:var(--papier);
}
.bchat-af[hidden]{display:none}
.bchat-af button{
  border:0;background:none;padding:0;cursor:pointer;
  font:600 13.5px var(--tekst);color:var(--roest);text-decoration:underline;
}

/* ---- Onderaan: wie ben je, en het tekstvak ---- */
.bchat-balk{
  margin:0;padding:10px 12px 12px;
  border-top:1px solid var(--lijn);background:var(--creme);
  display:flex;flex-direction:column;gap:8px;
}
.bchat-wie{display:flex;flex-direction:column;gap:4px}
.bchat-wie[hidden]{display:none}
.bchat-wie input{
  width:100%;box-sizing:border-box;height:42px;padding:0 16px;
  border:1px solid rgba(var(--inkt-rgb),.16);border-radius:999px;background:var(--wit);
  font:15px var(--tekst);color:var(--inkt);
}
.bchat-wie small{font-size:12px;line-height:1.35;color:var(--inkt-zacht);padding:0 8px}
/* Het lokkertje voor robots: buiten beeld, niet weg (sommige robots slaan display:none over). */
.bchat-lok{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bchat-fout{margin:0;padding:0 8px;font-size:13px;line-height:1.35;color:var(--roest)}
.bchat-fout[hidden]{display:none}

.bchat-invoer{display:flex;align-items:flex-end;gap:8px}
.bchat-veld{flex:1;min-width:0;display:block}
.bchat-veld textarea{
  display:block;width:100%;box-sizing:border-box;resize:none;
  min-height:44px;max-height:140px;padding:11px 16px;
  border:1px solid rgba(var(--inkt-rgb),.16);border-radius:22px;background:var(--wit);
  font:15px/1.4 var(--tekst);color:var(--inkt);
}
.bchat-wie input:focus,.bchat-veld textarea:focus{outline:none;border-color:var(--roest);box-shadow:0 0 0 3px rgba(var(--roest-rgb),.14)}
.bchat-stuur{
  width:44px;height:44px;flex:none;border:0;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;
  background:var(--oranje);color:var(--inkt);
  transition:transform var(--soepel),opacity var(--soepel);
}
.bchat-stuur svg{width:20px;height:20px}
.bchat-stuur:disabled{opacity:.45;cursor:default}
@media (hover:hover){.bchat-stuur:not(:disabled):hover{background:#ffa033}}
.bchat-stuur:not(:disabled):active{transform:scale(.92)}

/* ---- Op een telefoon ----
   Dicht alleen het rondje, zodat het niet over de tekst ligt. Open is het
   venster bijna schermbreed en tot vlak onder de balk bovenaan. Het tekstvak
   op 16 px: kleiner en Safari zoomt in bij het typen. */
@media (max-width:640px){
  .bchat{right:14px;bottom:calc(14px + var(--bchat-onder) + env(safe-area-inset-bottom))}
  .bchat-knop{width:56px;height:56px;padding:0;justify-content:center}
  .bchat-knop-tekst{display:none}
  .bchat.is-open .bchat-knop{width:48px;height:48px}
  .bchat-venster{
    width:calc(100vw - 20px);
    height:calc(100vh - 150px - var(--bchat-onder));
    height:calc(100dvh - 150px - var(--bchat-onder));
    margin-right:-4px;
  }
  .bchat-wie input,.bchat-veld textarea{font-size:16px}

  /* Open is de chat op een telefoon een eigen scherm, zoals een chat-app.
     Een zwevend venster ging mis zodra het toetsenbord kwam: dat schuift op
     een iPhone óver de pagina heen in plaats van hem kleiner te maken, dus
     de velden vielen erachter en Safari schoof de hele pagina weg.

     Daarom meet bezoekerschat.js het stuk scherm dat boven het toetsenbord
     overblijft (window.visualViewport) en zet dat in --bchat-vh, en hoe ver
     Safari het beeld al heeft opgeschoven in --bchat-vt. Het scherm volgt
     dat precies; de pagina erachter staat stil (html.bchat-vast). Zonder
     script valt het terug op 100dvh. De ronde knop is open niet nodig: het
     kruisje staat in de kop. */
  html.bchat-vast,html.bchat-vast body{overflow:hidden;overscroll-behavior:none}
  /* De pagina eronder is er niet, maar Safari laat hem zien in de strook
     achter zijn doorschijnende balken: zet hem uit beeld. */
  html.bchat-vast body > :not(.bchat){visibility:hidden}
  .bchat.is-open{
    top:0;left:0;right:0;bottom:auto;z-index:200;
    height:var(--bchat-vh,100dvh);transform:translateY(var(--bchat-vt,0px));
    gap:0;align-items:stretch;
  }
  .bchat.is-open .bchat-knop{display:none}
  /* De schaduwen zijn hier geen schaduw maar een verlengstuk: in Safari zijn
     de adresbalk en de balk boven het toetsenbord doorschijnend. Zonder dit
     zag je daar de pagina achter de chat door schemeren. Nu loopt boven de
     kop roest door en onder het tekstvak crème. */
  .bchat.is-open .bchat-venster{
    width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:visible;
    box-shadow:0 -320px 0 0 var(--roest),0 320px 0 0 var(--creme);
  }
  .bchat.is-open .bchat-vak{border-radius:0}
  /* En de pagina zelf ook roest zolang de chat open is: Safari kleurt de
     strook bij de klok naar wat er bovenaan staat. */
  html.bchat-vast,html.bchat-vast body{background:var(--roest)}
  .bchat.is-open .bchat-kop{padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:14px}
  .bchat.is-open .bchat-weg{width:42px;height:42px}
  .bchat.is-open .bchat-balk{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  /* Met het toetsenbord erbij is de veilige rand onderaan er niet meer. */
  .bchat.is-open.toetsenbord .bchat-balk{padding-bottom:10px}
  .bchat.springt .bchat-venster{animation:bchat-blad .3s cubic-bezier(.2,.8,.2,1)}
  @keyframes bchat-blad{from{opacity:0;transform:translateY(48px)}}
}
@media print{.bchat{display:none}}