/* Bosstad Tweewielers – websitechat (launcher), 2026-09-27 v3. Tokens uit bosstad-design-system.css.
   Knop in dezelfde stijl als de header-CTA "Plan een proefrit" (turquoise, donkere hoofdletters, lijn-icoon).
   Hoort bij bosstad-chat.php/.js. De GHL-widget zelf krijgt lettertype/kleuren via de CSS-variabelen op <chat-widget>. */

.bs-chat{position:fixed;right:24px;bottom:24px;z-index:9990;display:inline-flex;align-items:center;justify-content:center;gap:10px;
	height:54px;padding:0 24px 0 20px;border:0;border-radius:var(--bs-radius-sm,2px);cursor:pointer;
	background:var(--bs-turquoise,#33C7B7);color:var(--bs-btn-ink,#06110F);
	font-family:var(--bs-font-body,Barlow,system-ui,sans-serif);font-size:16px;font-weight:700;letter-spacing:.2px;text-transform:none;line-height:1;
	box-shadow:0 10px 28px rgba(14,18,20,.22),0 2px 6px rgba(14,18,20,.12);
	opacity:0;transform:translateY(12px);transition:opacity .35s var(--bs-ease,ease),transform .35s var(--bs-ease,ease),background-color .2s,padding .25s var(--bs-ease,ease),bottom .25s var(--bs-ease,ease)}
.bs-chat.is-in{opacity:1;transform:none}
.bs-chat:focus-visible{outline:2px solid var(--bs-teal,#0F8A7C);outline-offset:3px}
body.solacewp .bs-chat,body.solacewp .bs-chat:focus,body.solacewp .bs-chat:active{background:var(--bs-turquoise,#33C7B7);color:var(--bs-btn-ink,#06110F);
	border-radius:var(--bs-radius-sm,2px);padding:0 24px 0 20px;min-height:0;height:54px;font-size:16px;font-weight:700;letter-spacing:.2px;text-transform:none;line-height:1}
body.solacewp .bs-chat:hover{background:var(--bs-turquoise-light,#4FD8C8);color:var(--bs-btn-ink,#06110F);transform:translateY(-2px)}

.bs-chat__icon{position:relative;display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px}
.bs-chat__icon svg{grid-area:1/1;width:22px;height:22px;transition:opacity .2s,transform .25s var(--bs-ease,ease)}
.bs-chat__i-close{opacity:0;transform:rotate(-90deg)}
.bs-chat__spin{grid-area:1/1;width:18px;height:18px;border-radius:50%;border:2px solid rgba(6,17,15,.25);border-top-color:var(--bs-btn-ink,#06110F);opacity:0}
.bs-chat__label{white-space:nowrap;overflow:hidden;max-width:180px;transition:max-width .25s var(--bs-ease,ease),opacity .2s}

/* laden */
.bs-chat.is-loading .bs-chat__i-chat{opacity:0}
.bs-chat.is-loading .bs-chat__spin{opacity:1;animation:bs-chat-spin .8s linear infinite}
@keyframes bs-chat-spin{to{transform:rotate(360deg)}}

/* open: alleen een vierkante sluitknop */
body.solacewp .bs-chat.is-open{padding:0;width:54px;gap:0}
.bs-chat.is-open .bs-chat__label{max-width:0;opacity:0}
.bs-chat.is-open .bs-chat__i-chat{opacity:0;transform:rotate(90deg)}
.bs-chat.is-open .bs-chat__i-close{opacity:1;transform:none}

/* GHL-widget in huisstijl (CSS-variabelen op de host winnen van :host in de shadow root) */
chat-widget{--chat-widget-height:min(620px,calc(100vh - 124px));--chat-widget-max-height:620px;--chat-widget-width:370px;
	--chat-widget-font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;--ion-font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
	--chat-widget-primary-color:#0E1214;--chat-widget-header-color:#0E1214;--chat-widget-header-darken-color:#000000;--chat-widget-header-message-text-color:#FFFFFF;
	--chat-widget-avatar-border-color:#FFFFFF;
	--chat-widget-sender-message-color:#0E1214;--chat-widget-sender-message-text-color:#FFFFFF;
	--chat-widget-received-message-color:#F6F5F2;--chat-widget-received-message-text-color:#1C2022;
	--chat-widget-welcome-message-text-color:#2C3235;--chat-widget-system-message-text-color:#4A5356;
	--chat-widget-button-color:#33C7B7;--ion-color-primary:#33C7B7;--ion-color-primary-contrast:#06110F}

/* Mobiel: vierkante knop met alleen het icoon; boven de sticky prijsbalk op productpagina's; weg als chat of mobiel menu open is */
@media(max-width:767px){
	body.solacewp .bs-chat{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:54px;height:54px;padding:0;gap:0}
	.bs-chat__label{max-width:0;opacity:0}
	.bs-chat__icon,.bs-chat__icon svg{width:22px;height:22px}
	body.solacewp:has(.bs-sticky.is-visible:not([hidden])) .bs-chat{bottom:calc(86px + env(safe-area-inset-bottom))}
	html.bs-chat-open .bs-chat{display:none}
}
html.bs-mm-open .bs-chat,body.bs-mm-open .bs-chat{display:none}

@media print{.bs-chat{display:none}}
@media(prefers-reduced-motion:reduce){.bs-chat,.bs-chat__icon svg,.bs-chat__label{transition:none}.bs-chat.is-loading .bs-chat__spin{animation-duration:2s}}