/* Baobab Blocks Builder: sitewide chat button. Reads the brand colours set under Settings. */
.wlb-chat { --c-wa: #25d366; --c-tg: #229ed9; --c-mail: var(--wlb-accent, #4338ca); --c-tel: #16a34a; position: fixed; inset-block-end: calc(var(--wlb-chat-y, 20px) + var(--wlb-dock-h, 0px)); transition: inset-block-end 0.35s ease; z-index: 99990; box-sizing: border-box; font-family: inherit; font-size: 16px; line-height: 1.4; color: #111827; }
.wlb-chat *, .wlb-chat *::before, .wlb-chat *::after { box-sizing: border-box; }
.wlb-chat--right { inset-inline-end: var(--wlb-chat-x, 20px); }
.wlb-chat--left { inset-inline-start: var(--wlb-chat-x, 20px); }
.wlb-chat a { color: inherit; text-decoration: none; }
.wlb-chat__i { display: block; width: 1em; height: 1em; flex: none; }
.wlb-chat__item--whatsapp { --c: var(--c-wa); }
.wlb-chat__item--telegram { --c: var(--c-tg); }
.wlb-chat__item--phone { --c: var(--c-tel); }
.wlb-chat__item--email { --c: var(--c-mail); }

/* The button */
.wlb-chat__fab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 3.6rem; height: 3.6rem; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--wlb-accent, #4338ca); color: var(--wlb-on-accent, #fff); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.45), 0 2px 6px rgba(15, 23, 42, 0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; animation: wlb-chat-in 0.5s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wlb-chat__fab:hover { transform: translateY(-2px) scale(1.04); }
.wlb-chat__fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--wlb-accent, #4338ca); }
.wlb-chat__fab .wlb-chat__i { font-size: 1.7rem; }
.wlb-chat__fab--whatsapp { background: var(--c-wa); color: #fff; }
.wlb-chat__fab--telegram { background: var(--c-tg); color: #fff; }
.wlb-chat__fab--phone { background: var(--c-tel); color: #fff; }
.wlb-chat__open, .wlb-chat__shut { display: inline-flex; transition: opacity 0.2s ease, transform 0.25s ease; }
.wlb-chat__shut { position: absolute; inset: 0; align-items: center; justify-content: center; opacity: 0; transform: rotate(-60deg) scale(0.6); }
.wlb-chat.is-open .wlb-chat__open { opacity: 0; transform: rotate(60deg) scale(0.6); }
.wlb-chat.is-open .wlb-chat__shut { opacity: 1; transform: none; }
.wlb-chat__text { white-space: nowrap; }

/* The menu */
.wlb-chat__pop { position: absolute; inset-block-end: calc(100% + 0.85rem); width: min(21rem, calc(100vw - 2 * var(--wlb-chat-x, 20px))); overflow: hidden; border-radius: 20px; background: #fff; color: #111827; box-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.5), 0 0 0 1px rgba(15, 23, 42, 0.06); visibility: hidden; opacity: 0; transform: translateY(10px) scale(0.97); transform-origin: bottom right; transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.25s; }
.wlb-chat--right .wlb-chat__pop { inset-inline-end: 0; }
.wlb-chat--left .wlb-chat__pop { inset-inline-start: 0; transform-origin: bottom left; }
.wlb-chat.is-open .wlb-chat__pop { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.wlb-chat__head { padding: 1rem 1.2rem 0.8rem; border-block-end: 1px solid rgba(15, 23, 42, 0.08); }
.wlb-chat__head strong { display: block; font-size: 1.02rem; }
.wlb-chat__list { display: grid; padding: 0.4rem; }
.wlb-chat__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.65rem 0.8rem; border-radius: 14px; transition: background-color 0.15s ease; }
.wlb-chat__item:hover { background: #f3f4f6; }
.wlb-chat__item:focus-visible { outline: 2px solid var(--wlb-accent, #4338ca); outline-offset: -2px; }
.wlb-chat__avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; background: #e5e7eb; }
.wlb-chat__avatar--icon { background: var(--c, var(--c-mail)); color: #fff; font-size: 1.35rem; }
.wlb-chat__who { display: grid; min-width: 0; }
.wlb-chat__who strong { font-size: 0.97rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-chat__who span { font-size: 0.82rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlb-chat__ch { color: var(--c, var(--c-mail)); font-size: 1.35rem; }
.wlb-chat__note { margin: 0; padding: 0.2rem 1.2rem 1rem; font-size: 0.8rem; color: #6b7280; }

/* 2. Pill */
.wlb-chat--pill .wlb-chat__fab, .wlb-chat--panel .wlb-chat__fab { width: auto; padding-inline: 1.4rem 1.5rem; height: 3.4rem; }
.wlb-chat--pill .wlb-chat__fab .wlb-chat__i, .wlb-chat--panel .wlb-chat__fab .wlb-chat__i { font-size: 1.4rem; }
.wlb-chat--pill .wlb-chat__shut, .wlb-chat--panel .wlb-chat__shut { inset: 0 auto 0 1.4rem; }
.wlb-chat--pill.is-single .wlb-chat__fab, .wlb-chat--pill .wlb-chat__fab { box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.5), 0 0 0 4px color-mix(in srgb, var(--wlb-accent, #4338ca) 20%, transparent); }

/* 3. Chat card: a coloured header with a speech bubble */
.wlb-chat--panel .wlb-chat__pop { width: min(22rem, calc(100vw - 2 * var(--wlb-chat-x, 20px))); }
.wlb-chat--panel .wlb-chat__head { padding: 1.2rem 1.3rem 1.3rem; border: 0; background: linear-gradient(160deg, var(--wlb-accent, #4338ca), color-mix(in srgb, var(--wlb-accent, #4338ca) 70%, #000)); color: var(--wlb-on-accent, #fff); }
.wlb-chat--panel .wlb-chat__head strong { font-size: 1.15rem; }
.wlb-chat--panel .wlb-chat__bubble { position: relative; margin: 0.75rem 0 0; padding: 0.7rem 0.9rem; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, 0.2); font-size: 0.92rem; line-height: 1.45; }
.wlb-chat--panel .wlb-chat__list { padding: 0.6rem; margin-block-start: -0.2rem; }
.wlb-chat--panel .wlb-chat__item { padding: 0.8rem; border: 1px solid rgba(15, 23, 42, 0.08); margin-block-end: 0.45rem; }
.wlb-chat--panel .wlb-chat__item:hover { border-color: var(--c, var(--c-mail)); background: #fff; box-shadow: 0 8px 18px -12px var(--c, var(--c-mail)); }
.wlb-chat--panel .wlb-chat__avatar { position: relative; }
.wlb-chat--panel .wlb-chat__avatar:not(.wlb-chat__avatar--icon)::after { content: ""; }

/* 4. Side dock: icons on the screen edge, names slide out */
.wlb-chat--dock { inset-block: 50% auto; transform: translateY(-50%); inset-inline-end: 0; }
.wlb-chat--dock.wlb-chat--left { inset-inline: 0 auto; }
.wlb-chat__dock { display: flex; flex-direction: column; gap: 0.4rem; }
.wlb-chat--dock .wlb-chat__item { position: relative; display: block; padding: 0; background: none; border-radius: 0; animation: wlb-chat-slide-r 0.5s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wlb-chat--dock.wlb-chat--left .wlb-chat__item { animation-name: wlb-chat-slide-l; }
.wlb-chat--dock .wlb-chat__item:nth-child(2) { animation-delay: 0.5s; }
.wlb-chat--dock .wlb-chat__item:nth-child(3) { animation-delay: 0.6s; }
.wlb-chat--dock .wlb-chat__bt { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; background: var(--c, var(--c-mail)); color: #fff; font-size: 1.5rem; border-start-start-radius: 14px; border-end-start-radius: 14px; box-shadow: -4px 6px 16px -6px rgba(15, 23, 42, 0.45); transition: width 0.2s ease; }
.wlb-chat--dock.wlb-chat--left .wlb-chat__bt { border-radius: 0 14px 14px 0; box-shadow: 4px 6px 16px -6px rgba(15, 23, 42, 0.45); }
.wlb-chat--dock .wlb-chat__item:hover .wlb-chat__bt, .wlb-chat--dock .wlb-chat__item:focus-visible .wlb-chat__bt { width: 3.6rem; }
.wlb-chat--dock .wlb-chat__item:focus-visible { outline: 3px solid var(--wlb-accent, #4338ca); outline-offset: 2px; }
.wlb-chat__tip { position: absolute; inset-block: 50% auto; inset-inline-end: calc(100% + 0.6rem); transform: translate(8px, -50%); padding: 0.4rem 0.8rem; border-radius: 10px; background: #111827; color: #fff; font-size: 0.85rem; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.2s ease; }
.wlb-chat--dock.wlb-chat--left .wlb-chat__tip { inset-inline-end: auto; inset-inline-start: calc(100% + 0.6rem); transform: translate(-8px, -50%); }
.wlb-chat__item:hover .wlb-chat__tip, .wlb-chat__item:focus-visible .wlb-chat__tip { opacity: 1; transform: translate(0, -50%); }

/* 5. Speed dial: round icons rise out of the button */
.wlb-chat--fan .wlb-chat__pop { width: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; inset-block-end: calc(100% + 0.7rem); }
.wlb-chat--fan .wlb-chat__list { display: flex; flex-direction: column-reverse; gap: 0.65rem; padding: 0; }
.wlb-chat--fan.wlb-chat--right .wlb-chat__list { align-items: flex-end; }
.wlb-chat--fan.wlb-chat--left .wlb-chat__list { align-items: flex-start; }
.wlb-chat--fan .wlb-chat__item { position: relative; display: flex; flex-direction: row; align-items: center; gap: 0.6rem; padding: 0; background: none; border-radius: 0; opacity: 0; transform: translateY(14px) scale(0.7); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.wlb-chat--fan.wlb-chat--right .wlb-chat__item { flex-direction: row-reverse; }
.wlb-chat--fan.wlb-chat--left .wlb-chat__item { flex-direction: row; }
.wlb-chat--fan.is-open .wlb-chat__item { opacity: 1; transform: none; }
.wlb-chat--fan.is-open .wlb-chat__item:nth-last-child(2) { transition-delay: 0.05s; }
.wlb-chat--fan.is-open .wlb-chat__item:nth-last-child(3) { transition-delay: 0.1s; }
.wlb-chat--fan.is-open .wlb-chat__item:nth-last-child(4) { transition-delay: 0.15s; }
.wlb-chat--fan .wlb-chat__bt { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c, var(--c-mail)); color: #fff; font-size: 1.45rem; box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.55); }
.wlb-chat--fan .wlb-chat__tip { position: static; transform: none; opacity: 1; background: #fff; color: #111827; box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.4); }
.wlb-chat--fan .wlb-chat__item:focus-visible .wlb-chat__bt { outline: 3px solid #fff; box-shadow: 0 0 0 6px var(--wlb-accent, #4338ca); }

.wlb-chat--nomobile { }
@media (max-width: 600px) {
	.wlb-chat--nomobile { display: none; }
	.wlb-chat__fab { width: 3.3rem; height: 3.3rem; }
	.wlb-chat--pill .wlb-chat__fab, .wlb-chat--panel .wlb-chat__fab { width: auto; height: 3.2rem; }
	.wlb-chat__tip { display: none; }
	.wlb-chat--fan .wlb-chat__tip { display: block; }
}
/* Without scripts the menu opens on hover or keyboard focus instead. */
@media (scripting: none) {
	.wlb-chat.has-menu:hover .wlb-chat__pop, .wlb-chat.has-menu:focus-within .wlb-chat__pop { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.wlb-chat--fan.has-menu:hover .wlb-chat__item, .wlb-chat--fan.has-menu:focus-within .wlb-chat__item { opacity: 1; transform: none; }
}
@keyframes wlb-chat-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes wlb-chat-slide-r { from { transform: translateX(100%); } to { transform: none; } }
@keyframes wlb-chat-slide-l { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .wlb-chat, .wlb-chat * { animation: none !important; transition: none !important; } }
@media print { .wlb-chat { display: none; } }