/* Success by Design – Chat widget. Alles onder de sbd-namespace + hoge specificiteit
   via #sbd-chat-root, zodat het naast elk WordPress-thema werkt zonder conflicten. */

#sbd-chat-root, #sbd-chat-root * { box-sizing: border-box; }

#sbd-chat-root {
	--sbd-accent: #d77a62;      /* wilmasue huisstijl — terracotta/zalm */
	--sbd-accent-2: #eaa899;
	--sbd-bg: #ffffff;
	--sbd-user: #d77a62;
	--sbd-bot: #f6f1e9;
	--sbd-text: #2b2724;
	--sbd-radius: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* Launcher-bubbel rechtsonder */
#sbd-chat-root .sbd-launcher {
	position: fixed; right: 20px; bottom: 116px; z-index: 99998; /* ruim boven de 'GRATIS scan'-balk */
	width: 48px; height: 48px; border-radius: 50%;
	border: none; cursor: pointer;
	background: linear-gradient(135deg, var(--sbd-accent), var(--sbd-accent-2));
	box-shadow: 0 6px 22px rgba(0,0,0,.22);
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
#sbd-chat-root .sbd-launcher:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 9px 26px rgba(0,0,0,.28); }
#sbd-chat-root .sbd-launcher-icon { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
#sbd-chat-root .sbd-launcher.sbd-hidden { display: none; }

/* Chat-stipjes onder de lotus (typ-indicator = 'dit is een chat') */
#sbd-chat-root .sbd-ldots { display: flex; gap: 3px; }
#sbd-chat-root .sbd-ldots i { width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .55; animation: sbd-ldot 1.4s infinite both; }
#sbd-chat-root .sbd-ldots i:nth-child(2) { animation-delay: .2s; }
#sbd-chat-root .sbd-ldots i:nth-child(3) { animation-delay: .4s; }
@keyframes sbd-ldot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-2px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #sbd-chat-root .sbd-ldots i { animation: none; opacity: .75; } }

/* Klik-hint: label naast het icoon dat uitnodigt om te chatten */
#sbd-chat-root .sbd-launcher::before {
	content: "Vraag het de gids";
	position: absolute; right: 58px; top: 50%; transform: translateY(-50%);
	white-space: nowrap; pointer-events: none;
	background: #fff; color: var(--sbd-accent);
	border: 1px solid #ecd9d2; border-radius: 999px;
	font-size: 13px; font-weight: 600; padding: 7px 12px;
	box-shadow: 0 4px 14px rgba(0,0,0,.16);
	animation: sbd-hint-in .3s ease both .8s;
}
@keyframes sbd-hint-in { from { opacity: 0; transform: translateY(-50%) translateX(6px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }
/* Op smalle schermen het label verbergen, alleen het icoon tonen */
@media (max-width: 400px) { #sbd-chat-root .sbd-launcher::before { display: none; } }

/* Pijltje: wijst vanaf het label naar het icoon */
#sbd-chat-root .sbd-launcher::after {
	content: ""; position: absolute; right: 49px; top: 50%; transform: translateY(-50%);
	border: 7px solid transparent; border-left-color: var(--sbd-accent);
	pointer-events: none;
}
@media (max-width: 400px) { #sbd-chat-root .sbd-launcher::after { display: none; } }

/* Pulserende ring: maakt duidelijk dat het icoon aanklikbaar is */
#sbd-chat-root .sbd-launcher { animation: sbd-pulse 3.8s ease-out infinite 1.4s; }
@keyframes sbd-pulse {
	0%   { box-shadow: 0 6px 22px rgba(0,0,0,.22), 0 0 0 0 rgba(215,122,98,.3); }
	70%  { box-shadow: 0 6px 22px rgba(0,0,0,.22), 0 0 0 10px rgba(215,122,98,0); }
	100% { box-shadow: 0 6px 22px rgba(0,0,0,.22), 0 0 0 0 rgba(215,122,98,0); }
}
@media (prefers-reduced-motion: reduce) { #sbd-chat-root .sbd-launcher { animation: none; } }

/* Chatvenster */
#sbd-chat-root .sbd-panel {
	position: fixed; right: 20px; bottom: 20px; z-index: 99999;
	width: 300px; max-width: calc(100vw - 32px);
	height: 440px; max-height: calc(100vh - 40px);
	background: var(--sbd-bg); color: var(--sbd-text);
	border-radius: var(--sbd-radius);
	box-shadow: 0 16px 48px rgba(0,0,0,.28);
	display: flex; flex-direction: column; overflow: hidden;
	animation: sbd-in .18s ease;
}
/* Ingeklapt: paneel verborgen tot de launcher wordt aangeklikt (hidden-attr respecteren) */
#sbd-chat-root .sbd-panel[hidden] { display: none !important; }
@keyframes sbd-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

#sbd-chat-root .sbd-header {
	background: linear-gradient(135deg, var(--sbd-accent), var(--sbd-accent-2));
	color: #fff; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between;
}
#sbd-chat-root .sbd-title { font-weight: 700; font-size: 15px; }
#sbd-chat-root .sbd-close {
	background: transparent; border: none; color: #fff; font-size: 24px; line-height: 1;
	cursor: pointer; padding: 0 4px; opacity: .9;
}
#sbd-chat-root .sbd-close:hover { opacity: 1; }

#sbd-chat-root .sbd-body { flex: 1; overflow-y: auto; padding: 14px; background: #faf7f4; }

#sbd-chat-root .sbd-msg { display: flex; margin-bottom: 10px; }
#sbd-chat-root .sbd-msg-user { justify-content: flex-end; }
#sbd-chat-root .sbd-bubble {
	max-width: 82%; padding: 9px 13px; border-radius: 14px;
	white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
#sbd-chat-root .sbd-msg-bot .sbd-bubble { background: var(--sbd-bot); color: var(--sbd-text); border-bottom-left-radius: 4px; }
#sbd-chat-root .sbd-msg-user .sbd-bubble { background: var(--sbd-user); color: #fff; border-bottom-right-radius: 4px; }

/* Typ-indicator */
#sbd-chat-root .sbd-typing { display: inline-flex; gap: 4px; align-items: center; }
#sbd-chat-root .sbd-dot { width: 7px; height: 7px; border-radius: 50%; background: #cdbcb3; animation: sbd-bounce 1.2s infinite; }
#sbd-chat-root .sbd-dot:nth-child(2) { animation-delay: .2s; }
#sbd-chat-root .sbd-dot:nth-child(3) { animation-delay: .4s; }
@keyframes sbd-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Voorbeeldvragen */
#sbd-chat-root .sbd-examples { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; background: #faf7f4; }
#sbd-chat-root .sbd-chip {
	background: #fff; border: 1px solid #ecd9d2; color: var(--sbd-accent);
	border-radius: 999px; padding: 7px 12px; font-size: 13px; cursor: pointer; text-align: left;
	transition: background .12s ease, border-color .12s ease;
}
#sbd-chat-root .sbd-chip:hover { background: #f7efe9; border-color: var(--sbd-accent-2); }

/* Invoerbalk */
#sbd-chat-root .sbd-inputbar { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #efe6df; background: #fff; }
#sbd-chat-root .sbd-input {
	flex: 1; border: 1px solid #e2d5cd; border-radius: 999px; padding: 10px 14px;
	font-size: 15px; color: var(--sbd-text); outline: none; background: #fff;
}
#sbd-chat-root .sbd-input:focus { border-color: var(--sbd-accent); box-shadow: 0 0 0 3px rgba(215,122,98,.18); }
#sbd-chat-root .sbd-send {
	background: var(--sbd-accent); color: #fff; border: none; border-radius: 999px;
	padding: 0 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
#sbd-chat-root .sbd-send:hover { background: var(--sbd-accent-2); }
#sbd-chat-root .sbd-send:disabled { opacity: .55; cursor: default; }

@media (max-width: 480px) {
	#sbd-chat-root .sbd-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); max-height: none; border-radius: 12px; }
	#sbd-chat-root .sbd-launcher { right: 16px; bottom: 108px; }
}