/* Lentebad Assistent
 * Alle selectors beginnen met .lba-root zodat thema- en Elementor-stijlen
 * (bijv. ".elementor-kit-5 p" of "button:hover") er niet doorheen drukken.
 */
.lba-root {
	--lba-accent: #4a8fc0;
	--lba-accent-ink: #ffffff;
	--lba-bg: #ffffff;
	--lba-surface: #f3f6f9;
	--lba-fg: #1d2733;
	--lba-muted: #6b7682;
	--lba-line: #e2e7ed;
	--lba-radius: 18px;
	--lba-font: inherit;
	box-sizing: border-box;
	font-family: var(--lba-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--lba-fg);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
.lba-root *, .lba-root *::before, .lba-root *::after { box-sizing: border-box; }

/* Reset van alles wat een thema kan overschrijven */
.lba-root.lba-root p, .lba-root.lba-root ul, .lba-root.lba-root ol, .lba-root.lba-root li,
.lba-root.lba-root span, .lba-root.lba-root div, .lba-root.lba-root strong, .lba-root.lba-root a,
.lba-root.lba-root form, .lba-root.lba-root button, .lba-root.lba-root textarea,
.lba-root.lba-root input, .lba-root.lba-root label {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	color: inherit;
	margin: 0;
	padding: 0;
}
.lba-root.lba-root strong { font-weight: 600; }
.lba-root.lba-root button, .lba-root.lba-root textarea, .lba-root.lba-root input {
	-webkit-appearance: none; appearance: none;
	min-height: 0; min-width: 0;
	box-shadow: none;
	border: 0;
	background: none;
	transition: none;
}
.lba-root svg { display: block; flex: none; }

/* ------------------------------------------------------------------ Chatvenster */
.lba-root.lba-root .lba-chat {
	display: flex; flex-direction: column;
	height: 100%; width: 100%;
	background: var(--lba-bg);
	border: 1px solid var(--lba-line);
	border-radius: var(--lba-radius);
	overflow: hidden;
}

.lba-root.lba-root .lba-head {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 12px 14px 16px;
	background: var(--lba-accent); color: var(--lba-accent-ink);
}
.lba-root.lba-root .lba-avatar {
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.18);
}
.lba-root.lba-root .lba-avatar svg { width: 20px; height: 20px; }
.lba-root.lba-root .lba-head-text { flex: 1; min-width: 0; }
.lba-root.lba-root .lba-title { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.lba-root.lba-root .lba-sub { display: block; font-size: 12.5px; line-height: 1.3; opacity: .85; }
.lba-root.lba-root .lba-actions { display: flex; gap: 2px; }
.lba-root.lba-root .lba-icon-btn {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px; color: var(--lba-accent-ink); cursor: pointer;
}
.lba-root.lba-root .lba-icon-btn:hover,
.lba-root.lba-root .lba-icon-btn:focus-visible { background: rgba(255,255,255,.18); color: var(--lba-accent-ink); outline: none; }
.lba-root.lba-root .lba-icon-btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ Berichten */
.lba-root.lba-root .lba-log {
	flex: 1; min-height: 0; overflow-y: auto;
	padding: 16px 14px;
	display: flex; flex-direction: column; gap: 10px;
	background: var(--lba-bg);
	scrollbar-width: thin;
	scrollbar-color: var(--lba-line) transparent;
}
.lba-root.lba-root .lba-log::-webkit-scrollbar { width: 6px; }
.lba-root.lba-root .lba-log::-webkit-scrollbar-thumb { background: var(--lba-line); border-radius: 3px; }

.lba-root.lba-root .lba-msg {
	max-width: 86%;
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.lba-root.lba-root .lba-msg p { margin: 0 0 8px; }
.lba-root.lba-root .lba-msg p:last-child,
.lba-root.lba-root .lba-msg ul:last-child,
.lba-root.lba-root .lba-msg ol:last-child { margin-bottom: 0; }
.lba-root.lba-root .lba-msg .lba-h { font-weight: 600; margin-top: 4px; }
.lba-root.lba-root .lba-msg ul,
.lba-root.lba-root .lba-msg ol { margin: 0 0 8px; padding-left: 20px; }
.lba-root.lba-root .lba-msg ul { list-style: disc; }
.lba-root.lba-root .lba-msg ol { list-style: decimal; }
.lba-root.lba-root .lba-msg li { margin: 0 0 3px; padding: 0; list-style: inherit; font-size: inherit; line-height: inherit; }
.lba-root.lba-root .lba-msg li::before { content: none; }
.lba-root.lba-root .lba-msg a { color: var(--lba-accent); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }

.lba-root.lba-root .lba-assistant {
	align-self: flex-start;
	background: var(--lba-surface); color: var(--lba-fg);
	border-bottom-left-radius: 6px;
}
.lba-root.lba-root .lba-user {
	align-self: flex-end;
	background: var(--lba-accent); color: var(--lba-accent-ink);
	border-bottom-right-radius: 6px;
}
.lba-root.lba-root .lba-user a { color: var(--lba-accent-ink); }
.lba-root.lba-root .lba-error { background: #fdeeee; color: #8a1f1f; }

.lba-root.lba-root .lba-typing { display: inline-flex; align-items: center; gap: 5px; padding: 14px 16px; }
.lba-root.lba-root .lba-typing span {
	width: 7px; height: 7px; border-radius: 50%; background: var(--lba-muted);
	animation: lba-bounce 1.2s infinite ease-in-out;
}
.lba-root.lba-root .lba-typing span:nth-child(2) { animation-delay: .15s; }
.lba-root.lba-root .lba-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lba-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ------------------------------------------------------------------ Doorsturen naar medewerker */
.lba-root.lba-root .lba-handoff { align-self: flex-start; max-width: 86%; margin-top: -4px; }
.lba-root.lba-root .lba-handoff-link {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	font-size: 13px; font-weight: 600; line-height: 1.3;
	color: var(--lba-accent);
	background: var(--lba-bg);
	border: 1px solid var(--lba-line);
	border-radius: 999px;
	cursor: pointer;
}
.lba-root.lba-root .lba-handoff-link:hover,
.lba-root.lba-root .lba-handoff-link:focus-visible { background: var(--lba-surface); color: var(--lba-accent); border-color: var(--lba-accent); outline: none; }
.lba-root.lba-root .lba-handoff-link svg { width: 15px; height: 15px; }
.lba-root.lba-root .lba-handoff-done {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; line-height: 1.4; color: #2f7a4a;
}
.lba-root.lba-root .lba-handoff-done svg { width: 16px; height: 16px; }

.lba-root.lba-root .lba-hoform {
	display: flex; flex-direction: column; gap: 10px;
	width: 300px; max-width: 100%;
	padding: 14px;
	background: var(--lba-bg);
	border: 1px solid var(--lba-line);
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(10, 30, 50, .06);
}
.lba-root.lba-root .lba-hoform-intro { font-size: 13.5px; line-height: 1.45; color: var(--lba-fg); }
.lba-root.lba-root .lba-field { display: flex; flex-direction: column; gap: 4px; }
.lba-root.lba-root .lba-field-label { font-size: 12.5px; font-weight: 600; color: var(--lba-fg); }
.lba-root.lba-root .lba-field-input {
	display: block; width: 100%;
	height: 38px; padding: 8px 11px;
	font-size: 14px; line-height: 20px; color: var(--lba-fg);
	background: var(--lba-bg);
	border: 1px solid #cfd7df; border-radius: 10px;
	outline: none;
}
.lba-root.lba-root .lba-field-note { height: auto; min-height: 64px; resize: vertical; overflow: auto; }
.lba-root.lba-root .lba-field-input:focus { border-color: var(--lba-accent); box-shadow: 0 0 0 3px rgba(74, 143, 192, .2); }
.lba-root.lba-root .lba-field-input::placeholder { color: var(--lba-muted); opacity: 1; }
.lba-root.lba-root .lba-hoform-error { font-size: 12.5px; color: #a12626; }
.lba-root.lba-root .lba-hoform-error:empty { display: none; }
.lba-root.lba-root .lba-hoform-privacy { font-size: 11.5px; line-height: 1.4; color: var(--lba-muted); }
.lba-root.lba-root .lba-hoform-actions { display: flex; gap: 8px; }
.lba-root.lba-root .lba-btn {
	height: 36px; padding: 0 16px;
	font-size: 14px; font-weight: 600; line-height: 36px;
	border-radius: 10px; cursor: pointer;
}
.lba-root.lba-root .lba-btn:disabled { opacity: .6; cursor: default; }
.lba-root.lba-root .lba-btn-primary { background: var(--lba-accent); color: var(--lba-accent-ink); }
.lba-root.lba-root .lba-btn-primary:hover { background: var(--lba-accent); color: var(--lba-accent-ink); filter: brightness(1.06); }
.lba-root.lba-root .lba-btn-ghost { background: transparent; color: var(--lba-muted); }
.lba-root.lba-root .lba-btn-ghost:hover { background: var(--lba-surface); color: var(--lba-fg); }
.lba-root.lba-root .lba-btn:focus-visible { outline: 2px solid var(--lba-accent); outline-offset: 2px; }

/* ------------------------------------------------------------------ Invoer */
.lba-root.lba-root .lba-form {
	display: flex; align-items: flex-end; gap: 8px;
	margin: 0 12px; padding: 6px 6px 6px 14px;
	background: var(--lba-surface);
	border: 1px solid var(--lba-line);
	border-radius: 24px;
}
.lba-root.lba-root .lba-form:focus-within { border-color: var(--lba-accent); background: var(--lba-bg); }
.lba-root.lba-root .lba-input {
	flex: 1; display: block;
	height: 36px; max-height: 120px;
	padding: 8px 0; margin: 0;
	font-size: 15px; line-height: 20px;
	color: var(--lba-fg);
	background: transparent;
	border: 0; border-radius: 0; outline: none;
	resize: none; overflow: hidden; white-space: pre-wrap;
}
.lba-root.lba-root .lba-input::placeholder { color: var(--lba-muted); opacity: 1; }
.lba-root.lba-root .lba-input:focus { outline: none; box-shadow: none; border: 0; background: transparent; }
.lba-root.lba-root .lba-send {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--lba-accent); color: var(--lba-accent-ink);
	cursor: pointer;
}
.lba-root.lba-root .lba-send:hover,
.lba-root.lba-root .lba-send:focus-visible { background: var(--lba-accent); color: var(--lba-accent-ink); filter: brightness(1.08); }
.lba-root.lba-root .lba-send:focus-visible { outline: 2px solid var(--lba-accent); outline-offset: 2px; }
.lba-root.lba-root .lba-send:disabled { opacity: .45; cursor: default; filter: none; }
.lba-root.lba-root .lba-send svg { width: 17px; height: 17px; margin-left: 2px; }

.lba-root.lba-root .lba-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lba-root.lba-root .lba-foot {
	padding: 8px 16px 10px;
	font-size: 11px; line-height: 1.4; color: var(--lba-muted);
	text-align: center; background: var(--lba-bg);
}

/* ------------------------------------------------------------------ Shortcode */
.lba-root.lba-inline { width: 100%; max-width: 720px; margin: 1.5em 0; }

/* ------------------------------------------------------------------ Widget linksonder */
.lba-root.lba-floating {
	position: fixed; left: 20px; bottom: 20px; z-index: 99990;
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.lba-root.lba-root .lba-launcher {
	display: inline-flex; align-items: center; gap: 10px;
	height: 54px; padding: 0 20px 0 16px;
	border-radius: 27px;
	background: var(--lba-accent); color: var(--lba-accent-ink);
	font-size: 15px; font-weight: 600; line-height: 1;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(10, 30, 50, .22);
	transition: transform .15s ease, box-shadow .15s ease;
}
.lba-root.lba-root .lba-launcher:hover { background: var(--lba-accent); color: var(--lba-accent-ink); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10, 30, 50, .28); }
.lba-root.lba-root .lba-launcher:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px var(--lba-accent); }
.lba-root.lba-root .lba-launcher svg { width: 22px; height: 22px; }
.lba-root.lba-open .lba-launcher { width: 54px; padding: 0; justify-content: center; }
.lba-root.lba-open .lba-launcher .lba-launch-label { display: none; }

.lba-root.lba-root .lba-panel {
	width: 380px; height: 560px; max-height: calc(100vh - 110px);
	border-radius: var(--lba-radius);
	box-shadow: 0 16px 48px rgba(10, 30, 50, .25);
	transform-origin: bottom left;
	animation: lba-pop .18s ease-out;
}
.lba-root.lba-root .lba-panel .lba-chat { border: 0; }
.lba-root.lba-root .lba-panel[hidden] { display: none; }
@keyframes lba-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
	.lba-root.lba-floating { left: 12px; right: 12px; bottom: 12px; }
	.lba-root.lba-root .lba-panel { width: 100%; height: calc(100vh - 96px); }
	.lba-root.lba-root .lba-launcher { width: 54px; padding: 0; justify-content: center; }
	.lba-root.lba-root .lba-launcher .lba-launch-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lba-root.lba-root .lba-typing span, .lba-root.lba-root .lba-panel { animation: none; }
	.lba-root.lba-root .lba-launcher { transition: none; }
}