/**
 * CAL Chatbot Launcher
 *
 * Bottom-anchored chat launcher + panel. Colours follow the Avada palette
 * (navy #204285 / #153065, gold #ffd157) with hard-coded fallbacks so the
 * widget still looks right if the theme variables are ever absent.
 */

.cal-chatbot {
	--cal-chatbot-navy: var(--awb-custom_color_1, #204285);
	--cal-chatbot-navy-dark: var(--awb-custom_color_2, #153065);
	--cal-chatbot-gold: var(--awb-color4, #ffd157);
	--cal-chatbot-surface: #ffffff;
	--cal-chatbot-offset-bottom: 24px;
	--cal-chatbot-offset-side: 24px;
	--cal-chatbot-launcher-size: 60px;
	--cal-chatbot-panel-width: 400px;
	--cal-chatbot-panel-height: 600px;
	--cal-chatbot-gap: 16px;
	--cal-chatbot-radius: 16px;
	--cal-chatbot-z: 999998;

	position: fixed;
	bottom: var(--cal-chatbot-offset-bottom);
	z-index: var(--cal-chatbot-z);
	font-family: inherit;
	line-height: 1.4;
}

.cal-chatbot--right { right: var(--cal-chatbot-offset-side); }
.cal-chatbot--left { left: var(--cal-chatbot-offset-side); }

/* ---------------------------------------------------------------- launcher */

.cal-chatbot__launcher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cal-chatbot-launcher-size);
	height: var(--cal-chatbot-launcher-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--cal-chatbot-navy) 0%, var(--cal-chatbot-navy-dark) 100%);
	box-shadow: 0 6px 20px rgba(21, 48, 101, 0.32);
	color: #fff;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cal-chatbot__launcher:hover,
.cal-chatbot__launcher:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(21, 48, 101, 0.42);
}

.cal-chatbot__launcher:focus-visible {
	outline: 3px solid var(--cal-chatbot-gold);
	outline-offset: 3px;
}

.cal-chatbot__launcher:active { transform: translateY(0); }

.cal-chatbot__icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.cal-chatbot__icon svg {
	width: 27px;
	height: 27px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cal-chatbot__icon--close svg { width: 24px; height: 24px; }

/* Swap chat icon for a close icon while the panel is open. */
.cal-chatbot__icon--close { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.cal-chatbot.is-open .cal-chatbot__icon--chat { opacity: 0; transform: rotate(45deg) scale(0.7); }
.cal-chatbot.is-open .cal-chatbot__icon--close { opacity: 1; transform: none; }

/* ------------------------------------------------------------------- panel */

.cal-chatbot__panel {
	position: absolute;
	bottom: calc(var(--cal-chatbot-launcher-size) + var(--cal-chatbot-gap));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: var(--cal-chatbot-panel-width);
	height: var(--cal-chatbot-panel-height);
	max-height: calc(100vh - var(--cal-chatbot-offset-bottom) * 2 - var(--cal-chatbot-launcher-size) - var(--cal-chatbot-gap));
	border-radius: var(--cal-chatbot-radius);
	background: var(--cal-chatbot-surface);
	box-shadow: 0 18px 48px rgba(16, 32, 63, 0.28);
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transform-origin: bottom right;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cal-chatbot--right .cal-chatbot__panel { right: 0; }
.cal-chatbot--left .cal-chatbot__panel { left: 0; transform-origin: bottom left; }

.cal-chatbot__panel[hidden] { display: none; }

.cal-chatbot.is-open .cal-chatbot__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.cal-chatbot__header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 0 0 auto;
	padding: 16px 18px;
	background: linear-gradient(135deg, var(--cal-chatbot-navy) 0%, var(--cal-chatbot-navy-dark) 100%);
	color: #fff;
}

.cal-chatbot__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cal-chatbot__title {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.cal-chatbot__subtitle {
	font-size: 12.5px;
	opacity: 0.85;
	color: #fff;
}

.cal-chatbot__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	transition: background 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cal-chatbot__close:hover { background: rgba(255, 255, 255, 0.26); }

.cal-chatbot__close:focus-visible {
	outline: 3px solid var(--cal-chatbot-gold);
	outline-offset: 2px;
}

.cal-chatbot__close svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.cal-chatbot__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	background: #fff;
}

/* The Zapier web component renders its own iframe; make both fill the panel. */
.cal-chatbot__body zapier-interfaces-chatbot-embed,
.cal-chatbot__body zapier-interfaces-chatbot-embed iframe {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	border: 0;
}

/* -------------------------------------------------------- loading + errors */

.cal-chatbot__status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
	font-size: 14px;
	color: #4c4c4c;
	background: #fff;
}

.cal-chatbot__status[hidden] { display: none; }

.cal-chatbot__spinner {
	width: 30px;
	height: 30px;
	border: 3px solid rgba(32, 66, 133, 0.18);
	border-top-color: var(--cal-chatbot-navy);
	border-radius: 50%;
	animation: cal-chatbot-spin 0.8s linear infinite;
}

@keyframes cal-chatbot-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ greeting pill
   A teaser beside the launcher ("How can we help?") so visitors realise the
   icon is clickable. Sits to the side on desktop, stacks above on phones,
   and hides itself as soon as the chat is opened or dismissed. */

.cal-chatbot__greeting {
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: stretch;
	height: var(--cal-chatbot-launcher-size);
	border-radius: 999px;
	background: var(--cal-chatbot-surface);
	box-shadow: 0 6px 20px rgba(16, 32, 63, 0.18);
	opacity: 0;
	transform: translateX(8px) scale(0.96);
	transition: opacity 0.22s ease, transform 0.22s ease;
	pointer-events: none;
	white-space: nowrap;
}

.cal-chatbot--right .cal-chatbot__greeting {
	right: calc(var(--cal-chatbot-launcher-size) + 12px);
	transform-origin: right center;
}

.cal-chatbot--left .cal-chatbot__greeting {
	left: calc(var(--cal-chatbot-launcher-size) + 12px);
	transform: translateX(-8px) scale(0.96);
	transform-origin: left center;
}

.cal-chatbot__greeting[hidden] { display: none; }

.cal-chatbot.has-greeting .cal-chatbot__greeting {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: auto;
}

/* The chat panel takes over once open. */
.cal-chatbot.is-open .cal-chatbot__greeting {
	opacity: 0;
	pointer-events: none;
}

.cal-chatbot__greeting-text {
	display: flex;
	align-items: center;
	max-width: 15em;
	overflow: hidden;
	margin: 0;
	padding: 0 6px 0 20px;
	border: 0;
	border-radius: 999px 0 0 999px;
	background: transparent;
	color: var(--cal-chatbot-navy-dark);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-overflow: ellipsis;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.cal-chatbot__greeting-text:hover { color: var(--cal-chatbot-navy); }

.cal-chatbot__greeting-dismiss {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	padding: 0;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: transparent;
	color: #8a93a6;
	cursor: pointer;
	transition: color 0.16s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cal-chatbot__greeting-dismiss:hover { color: var(--cal-chatbot-navy); }

.cal-chatbot__greeting-dismiss svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

.cal-chatbot__greeting-text:focus-visible,
.cal-chatbot__greeting-dismiss:focus-visible {
	outline: 3px solid var(--cal-chatbot-navy);
	outline-offset: -3px;
}

/* Little tail pointing at the launcher. */
.cal-chatbot__greeting::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	background: var(--cal-chatbot-surface);
	transform: translateY(-50%) rotate(45deg);
}

.cal-chatbot--right .cal-chatbot__greeting::after { right: -4px; }
.cal-chatbot--left .cal-chatbot__greeting::after { left: -4px; }

/* --------------------------------------------------------------- backdrop */

.cal-chatbot__backdrop { display: none; }

/* ------------------------------------------------------------- small screens
   Below 600px the panel becomes a near full-screen sheet with a backdrop,
   which is the expected pattern for chat widgets on phones. */

@media (max-width: 600px) {
	.cal-chatbot {
		--cal-chatbot-offset-bottom: 16px;
		--cal-chatbot-offset-side: 16px;
	}

	.cal-chatbot__panel {
		position: fixed;
		right: var(--cal-chatbot-offset-side);
		left: var(--cal-chatbot-offset-side);
		bottom: calc(var(--cal-chatbot-offset-bottom) + var(--cal-chatbot-launcher-size) + var(--cal-chatbot-gap));
		width: auto;
		height: auto;
		max-height: none;
		top: max(16px, env(safe-area-inset-top, 16px));
	}

	.cal-chatbot--left .cal-chatbot__panel,
	.cal-chatbot--right .cal-chatbot__panel { right: var(--cal-chatbot-offset-side); left: var(--cal-chatbot-offset-side); }

	.cal-chatbot__greeting {
		right: 0;
		left: auto;
		bottom: calc(var(--cal-chatbot-launcher-size) + 10px);
		height: auto;
		padding: 2px 0;
	}

	.cal-chatbot--left .cal-chatbot__greeting { right: auto; left: 0; }

	.cal-chatbot__greeting-text {
		max-width: calc(100vw - 96px);
		padding: 10px 4px 10px 16px;
		font-size: 14px;
	}

	/* Tail points down at the launcher instead of sideways. */
	.cal-chatbot__greeting::after {
		top: auto;
		bottom: -4px;
		right: 22px;
		left: auto;
		transform: rotate(45deg);
	}

	.cal-chatbot--left .cal-chatbot__greeting::after { right: auto; left: 22px; }

	.cal-chatbot.is-open .cal-chatbot__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(16, 32, 63, 0.45);
		animation: cal-chatbot-fade 0.2s ease;
	}

	@keyframes cal-chatbot-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Users who prefer less motion get the same states without the movement. */
@media (prefers-reduced-motion: reduce) {
	.cal-chatbot__launcher,
	.cal-chatbot__panel,
	.cal-chatbot__icon,
	.cal-chatbot__close { transition: none; }

	.cal-chatbot__spinner { animation-duration: 1.6s; }
	.cal-chatbot__greeting { transition: opacity 0.01ms; transform: none; }
	.cal-chatbot.has-greeting .cal-chatbot__greeting { transform: none; }
	.cal-chatbot.is-open .cal-chatbot__panel { transform: none; }
	.cal-chatbot__panel { transform: none; }
	.cal-chatbot__launcher:hover { transform: none; }
}

/* Print: the widget is screen furniture only. */
@media print { .cal-chatbot { display: none; } }