/* Assistent (drop-in van de module Chat; docs/modules/CHAT.md). Zwevende knop rechtsonder + paneel in de donkere
   veenstijl van het mobiele menu (DESIGN §6.3): veenbruin met een zachte gloed onderaan, het lichte logo, koppen in
   ochtendamber, lichte tekst, dunne lichte lijnen. Alleen tokens (--dh-*); transparantie via color-mix().
   --chat-lift (px) zet chat/launcher.js als iets vast onderaan staat (cookiemelding, mengbalk van de configurator). */
.chat {
  --chat-gap: 16px;
  --chat-lift: 0px;
  --chat-z: calc(var(--dh-z-dropdown) - 10);       /* onder megamenu, drawers en modals; boven header en inhoud */
  --chat-z-open: calc(var(--dh-z-cookie) + 10);    /* open paneel boven de cookiemelding, onder modals en toasts */
}

/* ---------- knop ---------- */
.chat-launcher {
  position: fixed;
  right: var(--chat-gap);
  bottom: calc(var(--chat-gap) + env(safe-area-inset-bottom) + var(--chat-lift));
  z-index: var(--chat-z);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px 0 8px;
  border-radius: var(--dh-r-pill);
  background: var(--dh-glow-corner), var(--dh-veen-900);
  color: var(--dh-mist-50);
  font: 600 var(--dh-fs-sm)/1.2 var(--dh-font-text);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--dh-shadow-3), 0 0 0 1px color-mix(in srgb, var(--dh-mist-50) 12%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dh-dur-base) var(--dh-ease-spring), opacity var(--dh-dur-fast) var(--dh-ease-out),
    bottom var(--dh-dur-base) var(--dh-ease-out), background-color var(--dh-dur-fast) var(--dh-ease-out);
}
.chat-launcher:hover { transform: translateY(-2px); background-color: var(--dh-veen-800); color: var(--dh-mist-50); }
.chat-launcher:active { transform: scale(var(--dh-press-scale)); }
.chat-launcher:focus-visible {
  outline: 2px solid var(--dh-goud-300);
  outline-offset: 2px;
  border-radius: var(--dh-r-pill);
  box-shadow: var(--dh-shadow-3), 0 0 0 5px var(--dh-veen-950);
}
.chat-launcher__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dh-goud-300) 16%, transparent);
  color: var(--dh-goud-300);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dh-goud-300) 34%, transparent);
}
.chat-launcher__icon .icon { width: 20px; height: 20px; }
.chat.is-open .chat-launcher,
.chat.is-tucked .chat-launcher { opacity: 0; pointer-events: none; transform: translateY(8px); }
.chat.is-open .chat-launcher { visibility: hidden; }
/* Weggeschoven, maar met toetsenbordfocus: de knop toont zich zolang de focus erop staat, zodat de focus nooit op iets
   onzichtbaars staat (WCAG 2.4.7) en de assistent met het toetsenbord bereikbaar blijft. */
.chat.is-tucked .chat-launcher:focus-visible { opacity: 1; pointer-events: auto; transform: none; }

@media (max-width: 639.98px) {
  .chat { --chat-gap: 12px; }
  /* Smal scherm: alleen het icoon (het label blijft de toegankelijke naam). */
  .chat-launcher { min-height: 56px; width: 56px; padding: 0; justify-content: center; }
  .chat-launcher__icon { width: 40px; height: 40px; }
  .chat-launcher__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- ruimte voor de knop in de onderregel van de footer ----------
   De knop staat vast rechtsonder en de onderregel van de footer (bedrijfsgegevens, cookie-instellingen, taalkeuze) is
   het laatste van de pagina: die kan er niet onder vandaan scrollen. De regel houdt daarom rechts de kolom van de knop
   vrij, zodat de taallinks aanklikbaar blijven en toetsenbordfocus niet achter de knop valt (WCAG 2.2 SC 2.4.11).
   Alleen als de knop er staat (:has). Smal scherm: ronde knop van 56px op 12px van de rand, plus lucht. Vanaf 640px:
   16px rand plus een knop van hooguit 16,5rem (het langste label, Frans, is 14,25rem), min wat de container rechts al
   vrijlaat; op een breed scherm wordt dat 0. Vangnet zonder :has of bij een langer label: chat/launcher.js duikt weg. */
body:has(.chat-launcher) .site-footer__legal { padding-right: max(0px, calc(84px - var(--dh-gutter))); }
@media (min-width: 640px) {
  body:has(.chat-launcher) .site-footer__legal {
    padding-right: max(0px, calc(16px + 16.5rem - var(--dh-gutter) - max(0px, (100vw - var(--dh-container)) / 2)));
  }
}

/* ---------- paneel ---------- */
.chat-panel {
  position: fixed;
  right: var(--chat-gap);
  bottom: calc(var(--chat-gap) + env(safe-area-inset-bottom));
  z-index: var(--chat-z-open);
  display: flex;
  flex-direction: column;
  width: min(408px, calc(100vw - 2 * var(--chat-gap)));
  height: min(720px, calc(100vh - 2 * var(--chat-gap)));
  height: min(720px, calc(100dvh - 2 * var(--chat-gap)));
  border-radius: var(--dh-r-lg);
  background: var(--dh-glow-sunrise) center bottom / 150% 38% no-repeat, var(--dh-grad-veen);
  color: var(--dh-text);
  font: 400 0.9375rem/1.5 var(--dh-font-text);
  box-shadow: var(--dh-shadow-3), 0 0 0 1px color-mix(in srgb, var(--dh-mist-50) 12%, transparent);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transform-origin: 100% 100%;
  transition: opacity var(--dh-dur-base) var(--dh-ease-out), transform var(--dh-dur-base) var(--dh-ease-drawer);
}
.chat-panel[hidden] { display: none; }
.chat-panel.is-open { opacity: 1; transform: none; }
.chat-panel:focus { outline: none; }

.chat-panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px 4px;
  padding: 16px 12px 14px 20px;
  border-bottom: 1px solid var(--dh-line);
}
.chat-panel__logo { grid-column: 1 / -1; grid-row: 1; width: auto; height: 22px; margin-bottom: 8px; justify-self: start; }
.chat-panel__title {
  grid-column: 1;
  font-family: var(--dh-font-display);
  font-stretch: var(--dh-stretch-label);
  font-weight: 650;
  font-size: var(--dh-fs-md);
  line-height: var(--dh-lh-snug);
  letter-spacing: var(--dh-track-heading);
  color: var(--dh-goud-300);
}
.chat-panel__sub { grid-column: 1; grid-row: 3; font-size: var(--dh-fs-xs); line-height: 1.4; color: var(--dh-text-2); }
.chat-panel__tool {
  grid-row: 1 / 4;
  align-self: start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dh-text-2);
  cursor: pointer;
  transition: background-color var(--dh-dur-fast) var(--dh-ease-out), color var(--dh-dur-fast) var(--dh-ease-out);
}
.chat-panel__tool:hover { background: color-mix(in srgb, var(--dh-mist-50) 8%, transparent); color: var(--dh-text); }
.chat-panel__tool:focus-visible { outline: 2px solid var(--dh-focus); outline-offset: -2px; border-radius: 50%; }
.chat-panel__tool .icon { width: 20px; height: 20px; }

/* ---------- gesprek ---------- */
.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--dh-mist-50) 24%, transparent) transparent;
}
.chat-log:focus-visible { outline: 2px solid var(--dh-focus); outline-offset: -4px; border-radius: var(--dh-r-md); }
.chat-msg { display: grid; gap: 8px; max-width: 92%; }
.chat-msg--user { align-self: flex-end; justify-items: end; max-width: 86%; }
.chat-msg__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chat-msg__text {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--dh-r-md);
  overflow-wrap: anywhere;
}
.chat-msg__text p { margin: 0; white-space: pre-line; }
.chat-msg--bot .chat-msg__text {
  background: color-mix(in srgb, var(--dh-mist-50) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--dh-line);
  border-top-left-radius: var(--dh-r-xs);
  color: var(--dh-text);
}
.chat-msg--user .chat-msg__text {
  background: var(--dh-gloed-800);
  border-top-right-radius: var(--dh-r-xs);
  color: var(--dh-mist-50);
}
.chat-msg--error .chat-msg__text { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dh-rood-300) 55%, transparent); color: var(--dh-text); }

.chat-label {
  font: 600 var(--dh-fs-2xs)/1.3 var(--dh-font-text);
  letter-spacing: var(--dh-track-caps);
  text-transform: uppercase;
  color: var(--dh-text-subtle);
}
.chat-links, .chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chat-links { align-items: stretch; }
.chat-link, .chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: var(--dh-r-pill);
  border: 1.5px solid var(--dh-line-field);
  background: transparent;
  color: var(--dh-text);
  font: 600 var(--dh-fs-xs)/1.3 var(--dh-font-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dh-dur-fast) var(--dh-ease-out), border-color var(--dh-dur-fast) var(--dh-ease-out);
}
.chat-link:hover, .chat-chip:hover { background: color-mix(in srgb, var(--dh-mist-50) 8%, transparent); border-color: var(--dh-mist-400); color: var(--dh-text); }
.chat-link:focus-visible, .chat-chip:focus-visible, .chat-send:focus-visible { outline: 2px solid var(--dh-focus); outline-offset: 2px; border-radius: var(--dh-r-pill); }
.chat-link .icon { flex: none; width: 14px; height: 14px; color: var(--dh-accent-icon); }
.chat-link--enquiry { border-color: transparent; background: var(--dh-mist-50); color: var(--dh-ink-900); }
.chat-link--enquiry:hover { background: var(--dh-zand-200); border-color: transparent; color: var(--dh-ink-900); }
.chat-link--enquiry .icon { color: var(--dh-ink-900); }
.chat-chip { color: var(--dh-accent-text); border-color: color-mix(in srgb, var(--dh-goud-300) 38%, transparent); font-weight: 500; }
.chat-chip:hover { border-color: var(--dh-goud-300); color: var(--dh-goud-200); }
.chat-examples { display: grid; gap: 8px; margin-top: 4px; }

/* wachten: drie rustige punten */
.chat-typing { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; }
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dh-mist-300);
  opacity: 0.35;
  animation: chat-pulse 1.4s var(--dh-ease-in-out) infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-pulse { 0%, 70%, 100% { opacity: 0.3; } 35% { opacity: 1; } }

/* ---------- invoer ---------- */
.chat-form {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 12px 12px 8px 16px;
  border-top: 1px solid var(--dh-line);
  background: color-mix(in srgb, var(--dh-veen-950) 55%, transparent);
}
.chat-input {
  width: 100%;
  min-height: 44px;
  max-height: 132px;
  padding: 11px 14px;
  border: 1.5px solid var(--dh-line-field);
  border-radius: var(--dh-r-md);
  background: color-mix(in srgb, var(--dh-mist-50) 5%, transparent);
  color: var(--dh-text);
  font: inherit;
  line-height: 1.4;
  resize: none;
}
.chat-input::placeholder { color: var(--dh-text-subtle); opacity: 1; }
.chat-input:focus-visible { outline: 2px solid var(--dh-focus); outline-offset: 1px; border-radius: var(--dh-r-md); }
.chat-send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--dh-mist-50);
  color: var(--dh-ink-900);
  cursor: pointer;
  transition: background-color var(--dh-dur-fast) var(--dh-ease-out), transform var(--dh-dur-fast) var(--dh-ease-out);
}
.chat-send:hover { background: var(--dh-zand-200); }
.chat-send:active { transform: scale(var(--dh-press-scale)); }
.chat-send[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.chat-send .icon { width: 20px; height: 20px; }
.chat-form__meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  font-size: var(--dh-fs-2xs);
  line-height: 1.35;
  color: var(--dh-text-subtle);
}
.chat-form__error { color: var(--dh-danger-text); }
.chat-form__count { margin-left: auto; font-family: var(--dh-font-mono); white-space: nowrap; }
.chat-note {
  flex: none;
  margin: 0;
  padding: 0 16px calc(12px + env(safe-area-inset-bottom)) 16px;
  background: color-mix(in srgb, var(--dh-veen-950) 55%, transparent);
  font-size: var(--dh-fs-2xs);
  line-height: 1.4;
  color: var(--dh-text-subtle);
}
.chat-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mobiel: paneel over het hele scherm, zoals het mobiele menu. */
@media (max-width: 639.98px) {
  .chat-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    transform: translateY(18px);
  }
  .chat-panel__head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .chat-input { font-size: 1rem; }  /* voorkomt inzoomen op iOS */
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing span { animation: none; opacity: 0.7; }
  .chat-panel, .chat-launcher { transition: none; }
}
@media (forced-colors: active) {
  .chat-launcher, .chat-panel, .chat-link, .chat-chip, .chat-input, .chat-send { border: 1px solid CanvasText; }
}
@media print { .chat { display: none !important; } }

/* Meldingen van de site (.toasts) staan rechtsonder op de plek van de knop: zet ze erboven. :where houdt de regel zo
   licht als .toasts zelf, zodat de eigen plaatsing van de configurator (bespoke.css) blijft winnen. */
:where(body:has(.chat-launcher)) .toasts { bottom: calc(16px + 52px + 12px + env(safe-area-inset-bottom)); }
@media (max-width: 639.98px) {
  :where(body:has(.chat-launcher)) .toasts { bottom: calc(12px + 52px + 12px + env(safe-area-inset-bottom)); }
}