/* Kennisassistent – chatvenster. Kleuren via --kas-brand en --kas-accent (instellingen per site). */
.kas-root {
	--kas-brand: #1F3B5C;
	--kas-accent: #2EC4B6;
	--kas-light: var(--kas-accent);
	--kas-mid: var(--kas-brand);
	--kas-mid: color-mix(in srgb, var(--kas-brand) 70%, var(--kas-accent));
	--kas-ink: #2b2f3a;
	--kas-muted: #5f6675;
	--kas-mist: #eef3f8;
	--kas-rule: #d8e1ea;
	--kas-paper: #ffffff;
	font-family: var(--kas-font, inherit);
	font-size: 15px;
	line-height: 1.5;
	color: var(--kas-ink);
	box-sizing: border-box;
}
:where(.kas-root) *, :where(.kas-root) *::before, :where(.kas-root) *::after { box-sizing: inherit; }
:where(.kas-root) :where(button, input, textarea) { font: inherit; color: inherit; }
.kas-root [hidden] { display: none !important; }
.kas-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kas-root :focus-visible { outline: 2px solid var(--kas-accent); outline-offset: 2px; }

/* ---------- Zwevend: rond icoon met een kort tekstje ---------- */
.kas-float { position: fixed; bottom: var(--kas-edge-y, 20px); z-index: 99990; }
.kas-float.kas-pos-right { right: var(--kas-edge-x, 20px); }
.kas-float.kas-pos-left { left: var(--kas-edge-x, 20px); }
.kas-launch { width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--kas-brand); color: #fff; cursor: pointer; padding: 15px; box-shadow: 0 6px 20px rgba(20, 30, 45, .3); transition: transform .15s ease; display: block; }
.kas-launch-logo { background: #fff; border: 2px solid var(--kas-brand); padding: 9px; }
.kas-launch img, .kas-badge img, .kas-gate-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kas-launch:hover { transform: scale(1.05); }
.kas-launch svg { width: 100%; height: 100%; display: block; }
.kas-label { position: absolute; bottom: 14px; white-space: nowrap; background: #fff; color: var(--kas-brand); border: 1px solid var(--kas-rule); border-radius: 18px; padding: 7px 14px; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 3px 10px rgba(43, 47, 58, .12); }
.kas-pos-right .kas-label { right: 76px; }
.kas-pos-left .kas-label { left: 76px; }
.kas-is-open .kas-label, .kas-is-open .kas-launch { display: none; }
/* ---------- Eén of twee losse knoppen, elk naar een eigen tab (sinds 1.2.31) ---------- */
.kas-launch { position: relative; }
/* In de Community-app (sinds 1.2.60): boven de onderrand van een telefoon met uitsparing. De app kan --kas-edge-y zelf verhogen. */
.kas-float.kas-surface-app { bottom: calc(var(--kas-edge-y, 20px) + env(safe-area-inset-bottom, 0px)); }
.kas-launchers { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.kas-pos-left .kas-launchers { align-items: flex-start; }
.kas-is-open .kas-launchers { display: none; }
.kas-ml { position: relative; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 9px; border: 0; border-radius: 28px; background: var(--kas-brand); color: #fff; font: 600 15px/1 var(--kas-font, inherit); white-space: nowrap; cursor: pointer; box-shadow: 0 6px 20px rgba(20, 30, 45, .3); transition: transform .15s ease; }
.kas-ml:hover { transform: scale(1.04); }
.kas-ml-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .16); padding: 8px; flex: none; }
.kas-ml-icon svg { width: 100%; height: 100%; display: block; }
.kas-ml-icononly { width: 56px; padding: 0; justify-content: center; }
.kas-ml-icononly .kas-ml-icon { background: transparent; width: 40px; height: 40px; }
/* De bovenste knop iets rustiger, zodat de onderste het meest opvalt. */
.kas-ml:not(:last-child) { height: 50px; background: #fff; color: var(--kas-brand); border: 1px solid var(--kas-rule); box-shadow: 0 4px 14px rgba(20, 30, 45, .18); padding-left: 7px; }
.kas-ml:not(:last-child).kas-ml-icononly { width: 50px; padding: 0; }
.kas-ml:not(:last-child) .kas-ml-icon { background: transparent; width: 36px; height: 36px; }
.kas-ml-dot, .kas-launch.kas-has-dot::after { position: absolute; top: 0; right: 0; width: 15px; height: 15px; border-radius: 50%; background: #e5484d; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.kas-launch.kas-has-dot::after { content: ""; }
.kas-ml-online { position: absolute; top: -9px; left: 12px; padding: 3px 7px; border-radius: 9px; background: #1a7f37; color: #fff; font: 600 11px/1 var(--kas-font, inherit); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
@media (max-width: 600px) {
	.kas-launchers { gap: 10px; }
	.kas-ml, .kas-ml:not(:last-child) { width: 52px; height: 52px; padding: 0; justify-content: center; }
	.kas-ml .kas-ml-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.kas-ml .kas-ml-icon { background: transparent; }
	.kas-ml-online { left: auto; right: 44px; top: 50%; transform: translateY(-50%); }
	.kas-pos-left .kas-ml-online { right: auto; left: 44px; }
}
@media (prefers-reduced-motion: reduce) { .kas-ml { transition: none; } }
/* Icoon met tekst eraan vast */
.kas-launch-pill { width: auto; height: 58px; border-radius: 29px; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 9px; font: 600 15px/1 var(--kas-font, inherit); white-space: nowrap; }
.kas-launch-pill .kas-launch-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .16); padding: 8px; flex: none; }
.kas-launch-pill.kas-launch-logo .kas-launch-icon { background: transparent; padding: 3px; }
.kas-launch-pill.kas-launch-logo { color: var(--kas-brand); }
/* Tab aan de rand van het scherm, verticaal */
.kas-float.kas-shape-zijtab { bottom: auto; top: calc(50% - 90px); }
.kas-float.kas-shape-zijtab.kas-pos-right { right: 0; } .kas-float.kas-shape-zijtab.kas-pos-left { left: 0; }
.kas-launch-side { width: auto !important; height: auto !important; display: flex; align-items: center; gap: 10px; padding: 16px 10px !important; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 14.5px/1 var(--kas-font, inherit); white-space: nowrap; }
.kas-pos-right .kas-launch-side { border-radius: 0 12px 12px 0 !important; } .kas-pos-left .kas-launch-side { border-radius: 12px 0 0 12px !important; transform: none; }
.kas-launch-side .kas-launch-icon { width: 26px; height: 26px; flex: none; transform: none; }
.kas-pos-right .kas-launch-side .kas-launch-icon { transform: rotate(180deg); } /* rechtop houden binnen de gedraaide tab */
.kas-shape-zijtab .kas-launch:hover { transform: rotate(180deg); }
.kas-pos-left.kas-shape-zijtab .kas-launch:hover { transform: none; }
/* Zijpaneel over de hele hoogte */
.kas-float.kas-side .kas-panel { top: 0; bottom: 0; height: 100%; width: min(440px, 100vw); border-radius: 0; box-shadow: -8px 0 32px rgba(20, 30, 45, .22); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.kas-float.kas-side.kas-pos-right .kas-panel { right: 0; } .kas-float.kas-side.kas-pos-left .kas-panel { left: 0; box-shadow: 8px 0 32px rgba(20, 30, 45, .22); }

/* ---------- Venster ---------- */
.kas-panel { position: relative; display: flex; flex-direction: column; background: var(--kas-paper); border-radius: 14px; overflow: hidden; }
.kas-float .kas-panel { position: fixed; bottom: 20px; width: min(820px, calc(100vw - 40px)); height: min(700px, calc(100vh - 40px)); box-shadow: 0 14px 40px rgba(43, 47, 58, .24); z-index: 99991; }
.kas-float.kas-pos-right .kas-panel { right: 20px; }
.kas-float.kas-pos-left .kas-panel { left: 20px; }
.kas-embed { position: relative; width: 100%; max-width: 900px; height: clamp(480px, calc(100vh - 220px), 1000px); margin: 1.5em auto; box-sizing: border-box; }
.kas-embed.kas-embed-left { margin-left: 0; margin-right: 0; }
/* Groter of kleiner slepen met het clipje buiten het venster, rechtsonder (muis, touchpad of vinger) */
.kas-embed.kas-embed-resize { margin-bottom: 3em; }
.kas-embed-grip { position: absolute; right: -6px; bottom: -40px; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--kas-brand); border: 1px solid var(--kas-rule); box-shadow: 0 3px 10px rgba(20, 30, 45, .28); cursor: nwse-resize; z-index: 6; touch-action: none; display: grid; place-content: center; transition: transform .15s ease, background-color .15s ease; }
.kas-embed-grip svg { width: 16px; height: 16px; }
.kas-embed-grip:hover { transform: scale(1.1); background: var(--kas-mist); }
.kas-embed.is-resizing { user-select: none; }
@media (max-width: 600px) { .kas-embed { height: calc(100vh - 120px); } .kas-embed-grip { display: none; } }
.kas-embed .kas-panel { height: 100%; border: 1px solid var(--kas-rule); }

.kas-head { display: flex; align-items: center; gap: 10px; background: var(--kas-brand); color: #fff; padding: 12px 10px 12px 12px; }
.kas-drag { width: 22px; height: 22px; flex: none; color: rgba(255, 255, 255, .85); display: grid; place-items: center; }
.kas-drag svg { width: 20px; height: 20px; }
@media (min-width: 601px) { .kas-float .kas-head { cursor: move; user-select: none; } }
.kas-badge { width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--kas-brand); flex: none; padding: 6px; }
.kas-badge svg { width: 100%; height: 100%; display: block; }
.kas-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.kas-head-text strong, .kas-head-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kas-head-text strong { font-size: 16px; font-weight: 600; }
.kas-head-text span { font-size: 12.5px; opacity: .85; }
.kas-iconbtn { background: transparent; border: 0; color: #fff; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; padding: 6px; flex: none; }
.kas-iconbtn:hover { background: rgba(255, 255, 255, .15); }
.kas-iconbtn svg { width: 100%; height: 100%; display: block; }
.kas-head :focus-visible, .kas-tabs :focus-visible { outline-color: #fff; }

.kas-tabs { display: flex; flex-wrap: wrap; background: var(--kas-brand); padding: 0 8px; gap: 0 2px; container-type: inline-size; }
.kas-tabs-single { display: none; }
.kas-tab { flex: 1 1 auto; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; background: transparent; border: 0; color: rgba(255, 255, 255, .75); padding: 8px 18px 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; }
.kas-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--kas-light); }
.kas-tab:hover { color: #fff; }

.kas-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kas-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kas-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }

/* Verslepen en schalen */
.kas-rz { position: absolute; z-index: 6; }
.kas-rz-n, .kas-rz-s { left: 12px; right: 12px; height: 7px; cursor: ns-resize; }
.kas-rz-n { top: 0; } .kas-rz-s { bottom: 0; }
.kas-rz-e, .kas-rz-w { top: 12px; bottom: 12px; width: 7px; cursor: ew-resize; }
.kas-rz-e { right: 0; } .kas-rz-w { left: 0; }
.kas-rz-ne, .kas-rz-nw, .kas-rz-se, .kas-rz-sw { width: 14px; height: 14px; }
.kas-rz-ne { top: 0; right: 0; cursor: nesw-resize; } .kas-rz-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.kas-rz-nw { top: 0; left: 0; cursor: nwse-resize; } .kas-rz-se { bottom: 0; right: 0; cursor: nwse-resize; }
.kas-embed .kas-rz { display: none; }
.kas-moving, .kas-moving * { user-select: none !important; }

/* ---------- Berichten ---------- */
.kas-intro p { margin: 0 0 12px; color: var(--kas-muted); }
.kas-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.kas-chip { background: var(--kas-mist); border: 1px solid transparent; color: var(--kas-brand); border-radius: 16px; padding: 6px 12px; font-size: 13.5px; text-align: left; cursor: pointer; line-height: 1.35; }
.kas-chip:hover { border-color: var(--kas-accent); }
.kas-followups { margin-top: 12px; }
.kas-msg { max-width: 92%; }
.kas-msg-user { align-self: flex-end; }
.kas-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--kas-muted); margin: 0 2px 3px; }
.kas-meta span { font-weight: 600; color: var(--kas-ink); }
.kas-bubble { padding: 9px 13px; border-radius: 12px; overflow-wrap: anywhere; }
.kas-bubble p { margin: 0 0 .5em; } .kas-bubble p:last-child { margin: 0; }
.kas-msg-user .kas-bubble { background: var(--kas-brand); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.kas-msg-user .kas-bubble a { color: #fff; }
.kas-msg-staff .kas-bubble { background: var(--kas-mist); border-bottom-left-radius: 4px; }
.kas-msg-bot { max-width: 100%; }
.kas-answer p { margin: 0 0 .65em; }
.kas-answer ul, .kas-answer ol { margin: 0 0 .65em 1.2em; padding: 0; }
.kas-answer li { margin: 0 0 .3em; }
.kas-answer > :last-child { margin-bottom: 0; }
.kas-answer a, .kas-bubble a { color: var(--kas-mid); text-decoration: underline; }
.kas-msg-nosource .kas-answer { color: var(--kas-muted); }
.kas-sources { margin-top: 12px; border-left: 3px solid var(--kas-accent); padding: 2px 0 2px 12px; }
.kas-sources-title { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--kas-muted); }
.kas-src { display: block; text-decoration: none; color: var(--kas-ink); padding: 5px 0; line-height: 1.35; }
.kas-src + .kas-src { border-top: 1px solid var(--kas-rule); }
a.kas-src:hover .kas-src-title { color: var(--kas-mid); text-decoration: underline; }
.kas-src-type { display: block; font-size: 12px; color: var(--kas-mid); font-weight: 600; }
.kas-src-title { font-size: 13.5px; }
.kas-feedback { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12.5px; color: var(--kas-muted); flex-wrap: wrap; }
.kas-feedback > span { margin-right: 4px; }
.kas-thumb { background: transparent; border: 1px solid var(--kas-rule); border-radius: 8px; padding: 1px 8px; cursor: pointer; font-size: 15px; }
.kas-thumb:hover { border-color: var(--kas-accent); }
.kas-why { width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.kas-why label { display: flex; flex-direction: column; gap: 4px; }
.kas-why textarea { width: 100%; border: 1px solid var(--kas-rule); border-radius: 8px; padding: 7px 10px; }
.kas-why .kas-btn { align-self: flex-start; }
.kas-note { align-self: center; font-size: 12.5px; color: var(--kas-muted); text-align: center; max-width: 90%; }
.kas-note-error { color: #9b2c2c; background: #fdf1f1; border-radius: 8px; padding: 8px 12px; }
.kas-thinking { display: flex; align-items: center; gap: 10px; color: var(--kas-muted); font-size: 14px; }
.kas-dots { display: inline-flex; gap: 4px; }
.kas-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--kas-accent); animation: kas-bounce 1.1s infinite ease-in-out; }
.kas-dots i:nth-child(2) { animation-delay: .15s; } .kas-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes kas-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
.kas-typing { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--kas-muted); }

/* ---------- Invoer en voet ---------- */
.kas-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--kas-rule); margin: 0; flex: none; }
/* Vraagveld: vast drie regels hoog; langere tekst scrolt in het veld, zodat de verstuurknop altijd in beeld blijft. */
.kas-root.kas-root .kas-compose textarea { flex: 1; resize: none; border: 1px solid var(--kas-rule); border-radius: 10px; padding: 8px 12px; height: calc(3 * 1.4em + 18px) !important; min-height: calc(3 * 1.4em + 18px); max-height: calc(3 * 1.4em + 18px); overflow-y: auto; background: #fff; line-height: 1.4; margin: 0; box-sizing: border-box; }
.kas-root.kas-root .kas-compose .kas-send { flex: none; align-self: flex-end; }
.kas-pane > .kas-save, .kas-pane > .kas-foot, .kas-pane > .kas-statusbar, .kas-pane > .kas-notice, .kas-pane > .kas-offer-mail, .kas-pane > .kas-flash { flex: none; }
.kas-pane > .kas-log { flex: 1 1 auto; min-height: 80px; }
.kas-compose textarea:focus, .kas-staff-form input:focus, .kas-staff-form textarea:focus, .kas-offer-mail input:focus, .kas-why textarea:focus, .kas-sv-form input:focus { outline: 2px solid var(--kas-accent); outline-offset: 0; border-color: var(--kas-accent); }
.kas-send { width: 42px; height: 42px; flex: none; border: 0; border-radius: 10px; background: var(--kas-brand); color: #fff; padding: 10px; cursor: pointer; }
.kas-send:disabled { opacity: .5; cursor: default; }
.kas-send svg { width: 100%; height: 100%; display: block; }
.kas-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 14px 10px; font-size: 11.5px; color: var(--kas-muted); }
.kas-linkbtn { background: none; border: 0; padding: 0; color: var(--kas-mid); text-decoration: underline; cursor: pointer; font-size: inherit; white-space: nowrap; }
.kas-save { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 6px 14px 2px; font-size: 12.5px; }
.kas-sv-note { color: var(--kas-muted); }
.kas-sv-form { display: flex; gap: 6px; align-items: center; width: 100%; margin: 4px 0 2px; }
.kas-sv-form input { flex: 1; min-width: 0; border: 1px solid var(--kas-rule); border-radius: 8px; padding: 6px 10px; background: #fff; }

/* Lampje: alleen op de tab “Vraag een medewerker” */
.kas-statusbar { display: flex; align-items: center; gap: 9px; line-height: 1.35; width: 100%; border: 0; border-top: 1px solid var(--kas-rule); background: var(--kas-mist); color: var(--kas-ink); padding: 8px 14px; font-size: 12.5px; cursor: default; text-align: left; }
.kas-statusbar i { width: 9px; height: 9px; border-radius: 50%; background: #c0392b; flex: none; }
.kas-statusbar.is-on i { background: #2e9e5b; box-shadow: 0 0 0 3px rgba(46, 158, 91, .22); }

/* ---------- Knoppen en formulieren ---------- */
.kas-btn { display: inline-block; background: var(--kas-brand); color: #fff !important; border: 1px solid var(--kas-brand); border-radius: 8px; padding: 9px 18px; font-weight: 600; text-decoration: none !important; cursor: pointer; text-align: center; line-height: 1.3; }
.kas-btn:hover { filter: brightness(1.1); }
.kas-btn:disabled { opacity: .6; cursor: default; }
.kas-btn-ghost { background: #fff; color: var(--kas-brand) !important; }
.kas-btn-small { padding: 6px 12px; font-size: 13.5px; }
.kas-staff-form { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; margin: 0; }
.kas-staff-form label { font-weight: 600; font-size: 13.5px; margin: 10px 0 4px; }
.kas-staff-form label span { font-weight: 400; color: var(--kas-muted); }
.kas-staff-form input, .kas-staff-form textarea, .kas-offer-mail input { width: 100%; border: 1px solid var(--kas-rule); border-radius: 8px; padding: 8px 11px; background: #fff; margin: 0; }
.kas-staff-form textarea { resize: vertical; min-height: 110px; }
.kas-staff-form > * { flex-shrink: 0; } /* nooit samendrukken, ook niet in een laag venster */
.kas-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.kas-name-row > div { display: flex; flex-direction: column; }
.kas-staff-form .kas-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin-top: 12px; }
.kas-staff-form .kas-check input { width: auto; margin-top: 5px; }
.kas-staff-form .kas-check small { display: block; color: var(--kas-muted); font-size: 12px; }
.kas-staff-form .kas-staff-submit { margin-top: 14px; align-self: flex-start; }
.kas-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kas-privacy { font-size: 12px; color: var(--kas-muted); margin: 12px 0 0; }
.kas-privacy a { color: var(--kas-mid); }
.kas-error { color: #9b2c2c; font-size: 13.5px; margin: 10px 0 0; }
.kas-light { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 4px; padding: 10px 12px; background: var(--kas-mist); border-radius: 8px; font-size: 13.5px; }
.kas-light i { width: 10px; height: 10px; border-radius: 50%; background: #c0392b; flex: none; margin-top: 6px; }
.kas-light.is-on i { background: #2e9e5b; box-shadow: 0 0 0 3px rgba(46, 158, 91, .2); }
.kas-notice, .kas-offer-mail { margin: 0 12px 8px; font-size: 13.5px; background: var(--kas-mist); border-radius: 8px; padding: 9px 12px; }
.kas-offer-mail p { margin: 0 0 8px; }
.kas-row { display: flex; gap: 6px; }
.kas-ended, .kas-done { padding: 16px; text-align: center; }
.kas-ended { border-top: 1px solid var(--kas-rule); }
.kas-ended p { margin: 0 0 8px; color: var(--kas-muted); }
.kas-ended-hint { font-size: 12.5px; }
.kas-done { margin: auto 0; }
.kas-done-title { font-size: 18px; font-weight: 600; color: var(--kas-brand); margin: 0 0 6px; }
.kas-done p { margin: 0 0 14px; }
/* Ruimte tussen de bedanktekst en de knop (sinds 1.2.18), ook als het thema de marges van alinea’s weghaalt */
.kas-root.kas-root .kas-done-text > :last-child { margin-bottom: 0 !important; }
.kas-root.kas-root .kas-done .kas-btn { margin-top: 24px !important; }
.kas-gate { padding: 26px 22px; margin: auto 0; text-align: center; }
.kas-gate-icon { width: 60px; height: 60px; margin: 0 auto 14px; color: var(--kas-brand); }
.kas-gate-icon svg { width: 100%; height: 100%; }
.kas-gate-text { margin: 0 auto 16px; max-width: 30em; }
.kas-root .kas-gate-actions { display: grid; gap: 10px; width: 100%; max-width: 440px; margin: 0 auto; }
.kas-root .kas-gate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kas-root .kas-gate-pair.kas-gate-one { grid-template-columns: 1fr; }
.kas-root a.kas-btn.kas-gate-choice { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; box-sizing: border-box; min-height: 46px; line-height: 1.25; }
.kas-root .kas-gate-sub { display: block; font-size: 12px; font-weight: 400; opacity: .85; margin-top: 3px; line-height: 1.3; }
@media (max-width: 380px) { .kas-root .kas-gate-pair { grid-template-columns: 1fr; } }
.kas-root .kas-gate .kas-codeform { max-width: 440px; margin-left: auto; margin-right: auto; }
.kas-gate-alt { margin: 18px 0 0; font-size: 13.5px; color: var(--kas-muted); }

/* ---------- Aanbodblok, doorverbinden, streaming ---------- */
.kas-offers { margin-top: 12px; border: 1px solid var(--kas-rule); border-radius: 10px; padding: 10px 12px; background: #fff; }
.kas-offers-title { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--kas-muted); }
.kas-offer { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.kas-offer + .kas-offer { border-top: 1px solid var(--kas-rule); }
.kas-offer-main { flex: 1; min-width: 0; text-decoration: none; color: var(--kas-ink); line-height: 1.35; }
.kas-offer-main b { display: block; font-size: 14px; font-weight: 600; }
.kas-offer-main small { display: block; font-size: 12px; color: var(--kas-muted); }
.kas-offer-main:hover b { color: var(--kas-mid); text-decoration: underline; }
.kas-offer-buy { flex: none; }
.kas-handoff { margin-top: 10px; }
.kas-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--kas-accent); animation: kas-blink 1s steps(2) infinite; }
@keyframes kas-blink { 50% { opacity: 0; } }
.kas-think-text { margin-left: 8px; }
.kas-thinking .kas-answer { display: flex; align-items: center; }
.kas-flash { margin: 0 12px 6px; font-size: 13px; color: #9b2c2c; background: #fdf1f1; border-radius: 8px; padding: 7px 10px; }
.kas-loading { margin: auto; padding: 30px; }
.kas-sv-form { flex-direction: column; align-items: stretch; }
.kas-sv-form .kas-row { align-items: center; }
.kas-check { display: flex; gap: 9px; align-items: center; font-weight: 400; font-size: 13px; line-height: 1.35; }
/* Rond aanvinkvakje, met de tekst in het midden ernaast */
.kas-root .kas-check, .kas-root .kas-staff-form .kas-check { display: flex !important; align-items: center !important; gap: 9px; }
.kas-root .kas-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px !important; height: 20px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 2px solid var(--kas-brand) !important; border-radius: 50% !important; background: #fff !important; cursor: pointer; display: grid; place-content: center; box-shadow: none !important; }
.kas-root .kas-check input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--kas-brand); transform: scale(0); transition: transform .12s ease; }
.kas-root .kas-check input[type="checkbox"]:checked::before { transform: scale(1); }
.kas-root .kas-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--kas-accent); outline-offset: 2px; }

/* ---------- Overlays: disclaimer en beëindigen ---------- */
.kas-overlay { position: absolute; inset: 0; z-index: 20; background: rgba(20, 26, 35, .45); display: flex; align-items: center; justify-content: center; padding: 18px; }
.kas-card { background: #fff; border-radius: 12px; padding: 18px; max-width: 380px; width: 100%; max-height: 100%; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.kas-card p { margin: 0 0 10px; }
.kas-card-title { font-size: 17px; font-weight: 600; color: var(--kas-brand); }
.kas-card-text { font-size: 13.5px; }
.kas-card-save .kas-save { padding: 4px 0 8px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13.5px; }
.kas-card-save .kas-sv-mail, .kas-card-save .kas-sv-pdf { text-decoration: none; border: 1px solid var(--kas-brand); color: var(--kas-brand); border-radius: 8px; padding: 6px 12px; font-weight: 600; background: #fff; }
.kas-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* ---------- Telefoon: volledig scherm ---------- */
@media (max-width: 600px) {
	/* Op een telefoon: een duidelijk zwevend venster met ruimte rondom en een donkere achtergrond erachter. */
	.kas-float:not(.kas-side) .kas-panel { left: 10px !important; right: 10px !important; top: calc(env(safe-area-inset-top, 0px) + 14px) !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important; width: auto !important; height: auto !important; max-height: none !important; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 12px 40px rgba(10, 18, 30, .45); }
	.kas-float:not(.kas-side).kas-is-open::before { content: ""; position: fixed; inset: 0; background: rgba(12, 20, 32, .5); z-index: 99990; animation: kas-fade .2s ease; }
	.kas-float .kas-panel .kas-body { background: #fff; }
	.kas-drag, .kas-rz { display: none; }
	.kas-float { bottom: 14px; }
	.kas-float.kas-pos-right { right: 14px; } .kas-float.kas-pos-left { left: 14px; }
	.kas-label { display: none; }
	.kas-compose textarea { font-size: 16px; }
	.kas-name-row { grid-template-columns: 1fr; }
	html.kas-chat-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .kas-dots i, .kas-caret { animation: none; opacity: .8; } .kas-launch { transition: none; } }



.kas-waitnote { display: flex; align-items: center; gap: 10px; justify-content: center; }
.kas-waitnote[hidden] { display: none; }
.kas-info-sub { font-weight: 600; margin: 0 0 4px; }
.kas-hours { border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.kas-hours td { padding: 2px 16px 2px 0; border: 0; }

.kas-foot > :nth-child(2) { margin-left: auto; }
.kas-root .kas-infobtn, .kas-root .kas-infobtn:hover, .kas-root .kas-infobtn:focus { flex: none; width: 22px !important; height: 22px !important; border-radius: 50% !important; border: 1.5px solid var(--kas-brand) !important; background: #fff !important; color: var(--kas-brand) !important; font: italic 700 13px/1 Georgia, serif !important; padding: 0 !important; cursor: pointer; display: inline-grid; place-content: center; margin-left: 8px; }
.kas-root .kas-infobtn:hover { background: var(--kas-brand) !important; color: #fff !important; }
.kas-root .kas-staffname, .kas-root .kas-staffname:hover { display: inline-flex; align-items: center; gap: 6px; background: transparent !important; border: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; font-weight: 600 !important; cursor: pointer; }
.kas-staffname img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.kas-staffname:hover span { text-decoration: underline; }
.kas-profile { text-align: center; }
.kas-profile img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 4px auto 10px; display: block; }
.kas-profile-bio { margin: 0 0 6px; }

.kas-codeform { margin: 18px auto 0; max-width: 340px; text-align: inherit; border-top: 1px solid var(--kas-rule); padding-top: 14px; }
.kas-codeform label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--kas-ink); }
.kas-codeform label p { margin: 0; }
/* Uitlijning van de uitnodiging (Instellingen → Teksten) */
.kas-gate.kas-align-midden { text-align: center; } .kas-gate.kas-align-links { text-align: left; } .kas-gate.kas-align-rechts { text-align: right; }
.kas-gate.kas-align-links .kas-gate-icon, .kas-gate.kas-align-links .kas-codeform { margin-left: 0; }
.kas-gate.kas-align-rechts .kas-gate-icon, .kas-gate.kas-align-rechts .kas-codeform { margin-right: 0; }
.kas-root .kas-gate.kas-align-links .kas-gate-actions { margin-left: 0; } .kas-root .kas-gate.kas-align-rechts .kas-gate-actions { margin-right: 0; }
.kas-codeform .kas-row { display: flex; gap: 8px; }
.kas-codeform input { flex: 1; min-width: 0; border: 1px solid var(--kas-rule); border-radius: 8px; padding: 8px 10px; font: 600 15px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; text-transform: uppercase; }
.kas-codeform .kas-error { margin: 6px 0 0; }

.kas-related { margin-top: 10px; border: 1px solid var(--kas-rule); border-radius: 10px; padding: 9px 12px; background: #fff; }
.kas-related-title { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--kas-muted); }
.kas-related ul { list-style: none; margin: 0; padding: 0; }
.kas-related li { margin: 0; padding: 5px 0; }
.kas-related li + li { border-top: 1px solid var(--kas-rule); }
.kas-related li a { text-decoration: none; color: var(--kas-ink); display: block; line-height: 1.35; }
.kas-related li b { display: block; font-size: 13.5px; font-weight: 600; }
.kas-related li small { display: block; font-size: 12px; color: var(--kas-muted); }
.kas-related li a:hover b { color: var(--kas-mid); text-decoration: underline; }
.kas-root .kas-related-more { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--kas-mid) !important; }

@keyframes kas-fade { from { opacity: 0; } to { opacity: 1; } }

.kas-preview-bar { background: #fff4cf; color: #5a4600; font-size: 12px; line-height: 1.35; padding: 6px 12px; text-align: center; flex: none; }

/* Suggesties: kaarten naast elkaar als er ruimte is, anders onder elkaar */
.kas-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.kas-related-grid .kas-related { margin-top: 0; }
/* Zijbalk naast de chat (ingebed venster of zijpaneel op een breed scherm) */
.kas-pane.kas-has-aside:not([hidden]) { flex-direction: row; }
.kas-pane-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.kas-pane-main > .kas-log { flex: 1 1 auto; min-height: 80px; }
.kas-aside { flex: none; width: 300px; border-left: 1px solid var(--kas-rule); background: var(--kas-mist); overflow-y: auto; padding: 12px; box-sizing: border-box; }
.kas-aside-title { margin: 0 0 8px; font-weight: 700; font-size: 14px; color: var(--kas-ink); }
.kas-aside-empty { font-size: 13px; color: var(--kas-muted); margin: 0; }
.kas-aside .kas-related-grid { grid-template-columns: 1fr; margin-top: 0; }

.kas-sv-ok { flex-basis: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: #e7f6ec; color: #1d5e33; font-size: 13px; }
.kas-code-ok { margin: 10px auto 0; max-width: 340px; padding: 8px 10px; border-radius: 8px; background: #fff4cf; color: #5a4600; font-size: 13px; }

/* Groot venster (zwevend): bijna het hele scherm */
.kas-float.kas-maxed:not(.kas-side) .kas-panel { left: 24px !important; top: 24px !important; right: 24px !important; bottom: 24px !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; }
.kas-float.kas-maxed .kas-rz, .kas-float.kas-maxed .kas-drag { display: none !important; }
@media (max-width: 600px) { .kas-root .kas-maxbtn { display: none !important; } }
.kas-maxbtn svg { width: 18px; height: 18px; }

/* ---------- Bestand tegen thema-stijlen ----------
   Veel thema’s geven alle knoppen en links een eigen kleur, achtergrond of hoofdletters. Daardoor werd tekst
   onzichtbaar (zelfde kleur als de knop). Hieronder zetten we de eigen kleuren van het chatvenster vast. */
.kas-root button, .kas-root.kas-root a.kas-btn { text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important; box-shadow: none; font-family: inherit !important; min-width: 0; }
.kas-root.kas-root .kas-chip, .kas-root.kas-root .kas-chip:hover, .kas-root.kas-root .kas-chip:focus { background: var(--kas-mist) !important; color: var(--kas-brand) !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.35 !important; padding: 6px 12px !important; border-radius: var(--kas-chip-radius, 16px) !important; height: auto !important; }
.kas-root .kas-chip { border: 1px solid transparent !important; }
.kas-root .kas-chip:hover, .kas-root .kas-chip:focus-visible { border-color: var(--kas-accent) !important; }
.kas-related { margin-top: 10px; border: 1px solid var(--kas-rule); border-radius: 10px; padding: 9px 12px; background: #fff; }
.kas-related-title { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--kas-muted); }
.kas-related ul { list-style: none; margin: 0; padding: 0; }
.kas-related li { margin: 0; padding: 5px 0; }
.kas-related li + li { border-top: 1px solid var(--kas-rule); }
.kas-related li a { text-decoration: none; color: var(--kas-ink); display: block; line-height: 1.35; }
.kas-related li b { display: block; font-size: 13.5px; font-weight: 600; }
.kas-related li small { display: block; font-size: 12px; color: var(--kas-muted); }
.kas-related li a:hover b { color: var(--kas-mid); text-decoration: underline; }
.kas-root .kas-related-more { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--kas-mid) !important; }

/* ---------- Bestand tegen thema-stijlen ----------
   Veel thema’s geven alle knoppen en links een eigen kleur, achtergrond of hoofdletters. Daardoor werd tekst
   onzichtbaar (zelfde kleur als de knop). Hieronder zetten we de eigen kleuren van het chatvenster vast. */
.kas-root button, .kas-root.kas-root a.kas-btn { text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important; box-shadow: none; font-family: inherit !important; min-width: 0; }
.kas-root.kas-root .kas-chip, .kas-root.kas-root .kas-chip:hover, .kas-root.kas-root .kas-chip:focus { background: var(--kas-mist) !important; color: var(--kas-brand) !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.35 !important; padding: 6px 12px !important; border-radius: var(--kas-chip-radius, 16px) !important; height: auto !important; }
.kas-root .kas-chip { border: 1px solid transparent !important; }
.kas-root .kas-chip:hover, .kas-root .kas-chip:focus-visible { border-color: var(--kas-accent) !important; }
/* Knoppen: kleuren uit Instellingen → Algemeen → Knoppen. Standaardwaarden staan als terugval in var(),
   zodat de volgorde van stijlregels (bijv. door een optimalisatieplugin) nooit uitmaakt. */
.kas-root.kas-root .kas-send, .kas-root.kas-root .kas-send:focus { background: var(--kas-btn-bg, var(--kas-accent)) !important; color: var(--kas-btn-icon, var(--kas-btn-text, #fff)) !important; border: 2px solid var(--kas-btn-border, var(--kas-accent)) !important; padding: 9px !important; border-radius: var(--kas-send-radius, 10px) !important; width: 42px !important; height: 42px !important; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.kas-root.kas-root .kas-send:hover, .kas-root.kas-root .kas-send:focus-visible, .kas-root.kas-root .kas-send:active { background: var(--kas-btn-bg-h, var(--kas-brand)) !important; color: var(--kas-btn-icon-h, var(--kas-btn-text-h, #fff)) !important; border-color: var(--kas-btn-border-h, var(--kas-brand)) !important; }
.kas-root.kas-root .kas-send svg, .kas-root.kas-root .kas-send svg path { fill: currentColor !important; color: inherit !important; }
.kas-root.kas-root .kas-btn, .kas-root.kas-root a.kas-btn { border-radius: var(--kas-btn-radius, 8px) !important; }
.kas-root.kas-root .kas-btn:not(.kas-btn-ghost), .kas-root.kas-root .kas-btn:not(.kas-btn-ghost):focus, .kas-root.kas-root a.kas-btn:not(.kas-btn-ghost):visited { background: var(--kas-btn-bg, var(--kas-accent)) !important; color: var(--kas-btn-text, #fff) !important; border: 2px solid var(--kas-btn-border, var(--kas-accent)) !important; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.kas-root.kas-root .kas-btn:not(.kas-btn-ghost):hover, .kas-root.kas-root .kas-btn:not(.kas-btn-ghost):focus-visible, .kas-root.kas-root .kas-btn:not(.kas-btn-ghost):active, .kas-root.kas-root a.kas-btn:not(.kas-btn-ghost):hover { background: var(--kas-btn-bg-h, var(--kas-brand)) !important; color: var(--kas-btn-text-h, #fff) !important; border-color: var(--kas-btn-border-h, var(--kas-brand)) !important; filter: none; }
/* Tweede knop (bijv. Inloggen, Nieuwe vraag stellen): wit, en bij hover dezelfde kleuren als de gewone knoppen */
.kas-root.kas-root .kas-btn-ghost, .kas-root.kas-root .kas-btn-ghost:focus, .kas-root.kas-root a.kas-btn-ghost:visited { background: #fff !important; color: var(--kas-brand) !important; border: 2px solid var(--kas-btn-border, var(--kas-accent)) !important; }
.kas-root.kas-root .kas-btn-ghost:hover, .kas-root.kas-root .kas-btn-ghost:focus-visible, .kas-root.kas-root .kas-btn-ghost:active, .kas-root.kas-root a.kas-btn-ghost:hover { background: var(--kas-btn-bg-h, var(--kas-brand)) !important; color: var(--kas-btn-text-h, #fff) !important; border-color: var(--kas-btn-border-h, var(--kas-brand)) !important; }
.kas-root.kas-root .kas-btn { text-decoration: none !important; }
.kas-root.kas-root .kas-linkbtn, .kas-root.kas-root .kas-linkbtn:hover, .kas-root.kas-root .kas-linkbtn:focus { background: transparent !important; color: var(--kas-mid) !important; border: 0 !important; padding: 0 !important; height: auto !important; text-decoration: underline !important; font-weight: inherit !important; }
.kas-root.kas-root .kas-tab, .kas-root.kas-root .kas-tab:focus { background: transparent !important; color: rgba(255, 255, 255, .78) !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; }
.kas-root.kas-root .kas-tab:hover, .kas-root.kas-root .kas-tab[aria-selected="true"] { background: transparent !important; color: #fff !important; }
.kas-root.kas-root .kas-tab[aria-selected="true"] { border-bottom-color: var(--kas-light) !important; }
.kas-root .kas-iconbtn, .kas-root .kas-iconbtn:focus { background: transparent !important; color: #fff !important; border: 0 !important; padding: 6px !important; }
.kas-root .kas-iconbtn:hover { background: rgba(255, 255, 255, .15) !important; color: #fff !important; }
.kas-root .kas-thumb, .kas-root .kas-thumb:hover { background: transparent !important; color: inherit !important; padding: 1px 8px !important; }
.kas-root .kas-launch, .kas-root .kas-launch:hover, .kas-root .kas-launch:focus { background: var(--kas-brand) !important; color: #fff !important; }
.kas-root .kas-launch-logo, .kas-root .kas-launch-logo:hover { background: #fff !important; color: var(--kas-brand) !important; }
.kas-root .kas-label, .kas-root .kas-label:hover { background: #fff !important; color: var(--kas-brand) !important; }
.kas-root .kas-statusbar { display: flex; align-items: flex-start; gap: 9px; background: #fff !important; color: var(--kas-ink) !important; border-top: 1px solid var(--kas-rule); padding: 10px 14px 12px; min-height: 44px; font-size: 13px; line-height: 1.45; text-align: left; flex: none; cursor: default; }
.kas-root .kas-statusbar[hidden] { display: none; }
.kas-root .kas-statusbar > i { margin-top: 5px; flex: none; }
.kas-status-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kas-status-text small { color: var(--kas-muted); font-size: 12px; }
.kas-status-text small[hidden] { display: none; }
.kas-intro-text p { margin: 0 0 8px; }
.kas-root .kas-src, .kas-root .kas-offer-main { text-decoration: none !important; }

/* ---------- Zijpaneel: schuift van rechts in en uit, met een clipje halverwege ---------- */
.kas-float.kas-side .kas-launch, .kas-float.kas-side .kas-label { display: none !important; }
.kas-float.kas-side { --kas-side-w: 440px; }
.kas-float.kas-side .kas-panel { right: 0 !important; left: auto !important; width: min(var(--kas-side-w), 100vw) !important; transform: translateX(100%); visibility: hidden; transition: transform .45s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .45s; }
.kas-float.kas-side.kas-side-open .kas-panel { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
.kas-float.kas-side.is-resizing .kas-panel { transition: none; }
.kas-root .kas-side-handle { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 99992; display: flex; align-items: center; transition: right .45s cubic-bezier(.22, .61, .36, 1); }
.kas-side-open .kas-side-handle { right: min(var(--kas-side-w), 100vw); }
.kas-side.is-resizing .kas-side-handle { transition: none; }
/* Ingeklapt: rechthoekig verticaal tabje met tekst */
.kas-root.kas-root .kas-side-tab { order: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 40px !important; height: auto !important; min-height: 150px; padding: 14px 0 !important; border: 0 !important; border-radius: 10px 0 0 10px !important; background: var(--kas-brand) !important; color: #fff !important; box-shadow: -4px 0 16px rgba(20, 30, 45, .28); cursor: pointer; touch-action: none; }
.kas-side-tab .kas-side-icon { width: 22px; height: 22px; display: block; }
.kas-side-icon svg, .kas-side-icon img { width: 100%; height: 100%; }
.kas-side-text { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 13.5px/1.2 var(--kas-font, inherit); white-space: nowrap; letter-spacing: .01em; }
.kas-root.kas-root.kas-side-open .kas-side-tab { display: none !important; }
/* Rond knopje: ‹ om uit te trekken, › om in te klappen; slepen = breder of smaller */
.kas-root.kas-root .kas-side-knob { order: 1; width: 30px !important; height: 30px !important; margin-right: -6px; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--kas-rule) !important; background: #fff !important; color: var(--kas-brand) !important; box-shadow: 0 3px 12px rgba(20, 30, 45, .3); display: grid; place-content: center; cursor: ew-resize; touch-action: none; z-index: 1; transition: transform .15s ease; }
.kas-root.kas-root .kas-side-knob span { font: 700 20px/1 Arial, sans-serif; margin-top: -2px; }
.kas-root.kas-root .kas-side-knob:hover { transform: scale(1.1); }
.kas-side-open .kas-side-knob { margin-right: -15px; }
@media (max-width: 600px) { .kas-side-open .kas-side-handle { display: none; } .kas-float.kas-side .kas-panel { width: 100vw !important; } .kas-root.kas-root .kas-side-knob { display: none; } }
@media (prefers-reduced-motion: reduce) { .kas-float.kas-side .kas-panel, .kas-root .kas-side-handle { transition: none; } }

/* Links in het venster: bestand tegen thema-stijlen voor links (achtergrond, hoofdletters, kleur). */
.kas-root.kas-root a:not(.kas-btn) { background: transparent !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-shadow: none !important; }
.kas-root.kas-root .kas-src, .kas-root.kas-root .kas-related li a, .kas-root.kas-root .kas-offer-main { color: var(--kas-ink) !important; text-decoration: none !important; }
.kas-root.kas-root .kas-src-type, .kas-root.kas-root .kas-related li small, .kas-root.kas-root .kas-offer-main small { color: var(--kas-muted) !important; }
.kas-root.kas-root .kas-related-more, .kas-root.kas-root .kas-answer a, .kas-root.kas-root .kas-bubble a, .kas-root.kas-root .kas-card-text a, .kas-root.kas-root .kas-privacy a { color: var(--kas-mid) !important; text-decoration: underline !important; }
.kas-root.kas-root .kas-msg-user .kas-bubble a, .kas-root.kas-root .kas-msg-staff .kas-bubble a { color: inherit !important; }

/* Tekst tussen Inloggen en de knoppen eronder (sinds 1.2.35) */
.kas-root .kas-gate-or { margin: 0 !important; font-size: 13.5px; color: var(--kas-muted); }
/* Welkomsttips (sinds 1.2.35) */
.kas-root .kas-tips { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 30, 45, .35); border-radius: inherit; animation: kas-fade .2s ease; }
.kas-root .kas-tips-card { background: #fff; color: #2b2f3a; border-radius: 14px; padding: 20px 22px; max-width: 440px; width: 100%; box-shadow: 0 12px 40px rgba(10, 18, 30, .3); font-size: 14.5px; line-height: 1.5; text-align: left; }
.kas-root .kas-tips-card p { margin: 0 0 8px; }
.kas-root .kas-tips-card ul { margin: 0 0 14px; padding-left: 20px; }
.kas-root .kas-tips-card li { margin: 4px 0; }
.kas-root .kas-tips-card .kas-btn { display: block; margin-left: auto; }

/* Initiaal als de foto van de medewerker ontbreekt (sinds 1.2.39) */
.kas-root .kas-staff-ini { display: inline-grid; place-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--kas-brand); color: #fff; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1; flex: none; }

/* “Nu online” als groene rand om de chatknop (sinds 1.2.40), dikte instelbaar; het oude label verdwijnt. */
.kas-root .kas-ml-online { display: none !important; }
.kas-root.kas-float .kas-ml.kas-is-online { box-shadow: 0 0 0 var(--kas-online-w, 3px) #1a9e4b, 0 6px 18px rgba(10, 18, 30, .22) !important; transition: box-shadow .3s ease; }

/* Extra tabs (zoals de Peilingwijzer) scrollen zelf (sinds 1.2.57). */
.kas-pane[data-type="extra"] { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Tabbalk (sinds 1.2.58): bij minder ruimte eerst kleinere marges, daarna een tweede rij. Woorden breken nooit af. */
.kas-tab[hidden] { display: none !important; }
@container (max-width: 640px) { .kas-root.kas-root .kas-tab { padding-left: 10px !important; padding-right: 10px !important; } }
@container (max-width: 460px) { .kas-root.kas-root .kas-tab { padding-left: 6px !important; padding-right: 6px !important; } }

/* ===== In de Community-app (sinds 1.2.60) ===== */
/* Titels van de losse knoppen blijven ook op een telefoon zichtbaar (op de website verdwijnen ze onder 600 px). */
@media (max-width: 600px) {
	.kas-surface-app .kas-ml:not(.kas-ml-icononly) { width: auto; height: 56px; padding: 0 22px 0 9px; justify-content: flex-start; }
	.kas-surface-app .kas-ml:not(:last-child):not(.kas-ml-icononly) { height: 50px; padding: 0 18px 0 7px; }
	.kas-surface-app .kas-ml:not(.kas-ml-icononly) .kas-ml-text { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; }
	.kas-surface-app .kas-ml:not(.kas-ml-icononly) .kas-ml-icon { background: rgba(255, 255, 255, .16); }
	.kas-surface-app .kas-ml:not(:last-child):not(.kas-ml-icononly) .kas-ml-icon { background: transparent; }
}
/* Kop: de knoppen (geluid, verkleinen, sluiten) hoger, de titel en ondertitel lager over de volle breedte, groter logo. */
.kas-surface-app .kas-head { position: relative; padding: 30px 12px 12px 12px; }
.kas-surface-app .kas-badge { width: 48px; height: 48px; padding: 7px; }
.kas-surface-app .kas-head .kas-iconbtn { position: absolute; top: 2px; width: 30px; height: 30px; padding: 5px; }
.kas-surface-app .kas-head .kas-iconbtn:last-child { right: 6px; }
.kas-surface-app .kas-head .kas-iconbtn:nth-last-child(2) { right: 38px; }
.kas-surface-app .kas-head .kas-iconbtn:nth-last-child(3) { right: 70px; }
.kas-surface-app .kas-head .kas-iconbtn:nth-last-child(4) { right: 102px; }
.kas-surface-app .kas-head-text span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Eén tab open (sinds 1.2.61 ook op de website): de titel van die tab staat op de plek van de tabbalk, zodat je weet waar je bent.
   De toelichting erachter alleen als er ruimte voor is: hoe minder plek, hoe minder tekst. */
.kas-tab .kas-tab-tag { display: none; }
.kas-root.kas-root .kas-tabs.kas-tabs-single { display: flex; }
.kas-root.kas-root .kas-tabs-single .kas-tab { flex: 1 1 100%; pointer-events: none; text-align: left; white-space: normal; padding: 6px 8px 12px; font-size: 15px; color: #fff !important; border-bottom-color: transparent !important; }
.kas-tabs-single .kas-tab-tag { font-weight: 400; opacity: .85; font-size: 13.5px; }
.kas-tabs-single .kas-tab-tag::before { content: "\00b7\00a0"; margin-left: 4px; }
@container (min-width: 480px) { .kas-tabs-single .kas-tab-tag { display: inline; } }

/* Suggesties: kruisje per soort, en de regel eronder (sinds 1.2.61) */
.kas-related { position: relative; }
.kas-related-x { position: absolute; top: 2px; right: 4px; width: 28px; height: 28px; border: 0; background: transparent; color: inherit; opacity: .55; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; }
.kas-related-x:hover, .kas-related-x:focus-visible { opacity: 1; background: rgba(0, 0, 0, .06); }
.kas-related-title { padding-right: 26px; }
.kas-sugg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0 0; font-size: 13px; }
.kas-sugg-add { font: inherit; font-size: 13px; max-width: 100%; padding: 4px 6px; border: 1px solid var(--kas-rule); border-radius: 8px; background: #fff; color: inherit; }