/**
 * Voiceflow chat — light-DOM styles (host z-index + promo bubble).
 * Not injected into the widget shadow root.
 */

/* Above sticky header (often 1000 / 99999) so launcher stays visible while scrolling */
#voiceflow-chat {
	z-index: 10005099999 !important;
    position: relative;
}

.icl-vf-promo {
	--Background-grey: #F3F3F3;
	--icl-vf-navy: #002846;
	position: fixed;
	bottom: 104px;
	right: 24px;
	z-index: 100060;
	max-width: min(280px, calc(100vw - 48px));
	padding: 14px 36px 14px 16px;
	border-radius: 10px;
	background: #fff;
	color: var(--icl-vf-navy, #002846);
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	box-shadow: 0 4px 18px rgba(0, 40, 70, 0.18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.icl-vf-promo.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

body.icl-vf-panel-open .icl-vf-promo {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.icl-vf-promo::after {
	content: "";
	position: absolute;
	bottom: -7px;
	right: 28px;
	width: 14px;
	height: 14px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: 2px 2px 4px rgba(0, 40, 70, 0.1);
}

.icl-vf-promo__text {
	margin: 0;
}

.icl-vf-promo__close {
	appearance: none;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--icl-vf-navy, #002846);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.icl-vf-promo__close:hover,
.icl-vf-promo__close:focus-visible {
	background: rgba(0, 40, 70, 0.06);
	outline: none;
}

/* Mobile offsets follow the Figma hero-mobile frame (390x844): bubble
 * right 24 / bottom 100, and the tail 10px in from the bubble trailing edge
 * so it lines up with the 50px launcher. */
@media (max-width: 768px) {
	.icl-vf-promo {
		bottom: 100px;
		right: 24px;
	}

	.icl-vf-promo::after {
		right: 10px;
	}
}

/* RTL sites: mirror launcher side */
body.rtl .icl-vf-promo,
html[dir="rtl"] .icl-vf-promo {
	right: auto;
	left: 24px;
	padding: 14px 16px 14px 36px;
}

body.rtl .icl-vf-promo::after,
html[dir="rtl"] .icl-vf-promo::after {
	right: auto;
	left: 28px;
}

body.rtl .icl-vf-promo__close,
html[dir="rtl"] .icl-vf-promo__close {
	right: auto;
	left: 8px;
}

@media (max-width: 768px) {
	body.rtl .icl-vf-promo,
	html[dir="rtl"] .icl-vf-promo {
		left: 24px;
	}

	body.rtl .icl-vf-promo::after,
	html[dir="rtl"] .icl-vf-promo::after {
		left: 10px;
	}
}