/* Hulpchat met AI (kern/hulpchat.php, hulpchat.js), op de site en bij de
   klant in het portaal. Knop rechts onder, op de telefoon boven de
   onderbalk of de knopbalk. Zonder JS verborgen (data-ks-wacht). Eigen
   bestand, zodat site en portaal dezelfde opmaak delen. */
.ks-hc-blok[data-ks-wacht] { display: none; }
.ks-hc-knop {
  position: fixed; z-index: 30; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px;
  border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-pil);
  background: var(--ks-paneel); color: var(--ks-inkt); box-shadow: var(--ks-schaduw-zoek);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ks-hc-knop svg { width: 20px; height: 20px; }
.ks-hc-knop:hover { border-color: var(--ks-rand); }
.ks-hc-knop:focus-visible, .ks-hc-sluit:focus-visible, .ks-hc-stuur:focus-visible, .ks-hc-snelknop:focus-visible, .ks-hc-link:focus-visible { outline: 2px solid var(--ks-merk); outline-offset: 2px; }
.ks-hc-is-open .ks-hc-knop { display: none; }
.ks-hc-paneel {
  position: fixed; z-index: 31; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; width: min(392px, calc(100vw - 32px)); height: min(620px, calc(100vh - 112px));
  background: var(--ks-paneel); color: var(--ks-inkt); border: 1px solid var(--ks-lijn-sterk);
  border-radius: var(--ks-rond-groot); box-shadow: var(--ks-schaduw-zoek); overflow: hidden;
}
.ks-hc-paneel[hidden] { display: none; }
.ks-hc-kop { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 14px 20px; border-bottom: 1px solid var(--ks-lijn); }
.ks-hc-kop-tekst { flex: 1; min-width: 0; }
.ks-hc-titel { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ks-hc-sub { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ks-zacht); }
.ks-hc-label { flex: none; padding: 1px 7px; border: 1px solid var(--ks-rand); border-radius: var(--ks-rond-pil); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ks-inkt); }
.ks-hc-sluit { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -6px -6px 0 0; border: 0; border-radius: var(--ks-rond-pil); background: transparent; color: var(--ks-inkt); cursor: pointer; }
.ks-hc-sluit:hover { background: var(--ks-vlak-sterk); }
.ks-hc-sluit svg { width: 20px; height: 20px; }
.ks-hc-lijst { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ks-hc-bericht { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.ks-hc-bericht p { margin: 0; }
.ks-hc-bericht p + p { margin-top: 8px; }
.ks-hc-bericht-ai { align-self: flex-start; background: var(--ks-vlak-sterk); border-bottom-left-radius: 4px; }
.ks-hc-bericht-klant { align-self: flex-end; background: var(--ks-inkt); color: var(--ks-achter); border-bottom-right-radius: 4px; }
.ks-hc-bericht-fout { align-self: stretch; max-width: none; background: var(--ks-rood-zacht); color: var(--ks-rood); font-size: 14px; }
.ks-hc-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ks-hc-bericht .ks-hc-links { margin-top: 10px; }
.ks-hc-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--ks-rand);
  border-radius: var(--ks-rond-pil); background: var(--ks-paneel); color: var(--ks-inkt); font-size: 14px; font-weight: 600; text-decoration: none;
}
.ks-hc-link:hover { border-color: var(--ks-inkt); }
.ks-hc-denkt { display: inline-flex; gap: 5px; padding: 14px 16px; }
.ks-hc-denkt span { width: 7px; height: 7px; border-radius: 50%; background: var(--ks-zacht); animation: ks-hc-stip 1.2s infinite ease-in-out; }
.ks-hc-denkt span:nth-child(2) { animation-delay: .15s; }
.ks-hc-denkt span:nth-child(3) { animation-delay: .3s; }
@keyframes ks-hc-stip { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ks-hc-denkt span { animation: none; opacity: .7; } }
.ks-hc-snel { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.ks-hc-snel[hidden] { display: none; }
.ks-hc-snelknop {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--ks-lijn-sterk); border-radius: var(--ks-rond-pil);
  background: var(--ks-paneel); color: var(--ks-inkt); font: inherit; font-size: 14px; cursor: pointer;
}
.ks-hc-snelknop:hover { border-color: var(--ks-rand); background: var(--ks-vlak); }
.ks-hc-form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--ks-rand); border-radius: 22px; background: var(--ks-paneel); }
.ks-hc-form:focus-within { border-color: var(--ks-inkt); }
.ks-hc-veld { flex: 1; min-width: 0; max-height: 132px; padding: 7px 0; border: 0; background: transparent; color: var(--ks-inkt); font: inherit; font-size: 16px; line-height: 1.4; resize: none; }
.ks-hc-veld:focus { outline: none; }
.ks-hc-veld::placeholder { color: var(--ks-zacht); }
.ks-hc-stuur { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ks-merk); color: var(--ks-op-merk); cursor: pointer; }
.ks-hc-stuur:hover { background: var(--ks-merk-hover); }
.ks-hc-stuur svg { width: 18px; height: 18px; }
.ks-hc-form[aria-busy="true"] .ks-hc-stuur { opacity: .5; cursor: progress; }
.ks-hc-noot { margin: 0; padding: 10px 16px 14px; font-size: 12px; line-height: 1.45; color: var(--ks-zacht); }
.ks-hc-noot a { color: var(--ks-inkt); }
@media (max-width: 743px) {
  .ks-hc-knop { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 44px; padding: 0 14px 0 12px; font-size: 14px; }
  /* Site: boven de onderbalk (58 px). */
  .ks-gebied-site .ks-hc-knop { bottom: calc(58px + 12px + env(safe-area-inset-bottom)); }
  .ks-hc-paneel { inset: 0; z-index: 45; width: auto; height: auto; border: 0; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .ks-hc-kop { padding-top: calc(14px + env(safe-area-inset-top)); }
}
/* Portaal (klant): op de telefoon alleen het icoon, boven de knopbalk van
   Klus plaatsen of de onderbalk van de klantpagina. */
@media (max-width: 860px) {
  .ks-gebied-klant .ks-hc-knop { bottom: calc(88px + env(safe-area-inset-bottom)); width: 48px; min-height: 48px; padding: 0; justify-content: center; }
  .ks-gebied-klant .ks-hc-knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 743px) {
  .ks-gebied-klant .ks-hc-paneel { inset: 0; }
}
@media print { .ks-hc-blok { display: none; } }