/* ===== Sitewide chat widget (includes/caguide-chat-widget.php) - replaces
   the Chaty plugin. Colors read Elementor's own global color variables
   (var(--x, #hex)), same convention as every other widget CSS in this
   plugin. z-index 9000: above normal page content, below the Book Tour
   overlay/comparison overlay (both 99999) so those still sit on top of it. ===== */

.caguide_chat_bar,
.caguide_chat_bubble_wrap {
	position: fixed;
	z-index: 9000;
}

/* Read by the tour-page mobile booking bar (assets/css/tour-mobile-bar.css) to
   stack itself above this bar instead of the two overlapping - only actually
   meaningful when body.caguide-chat-active is present (see the body_class
   filter in includes/caguide-chat-widget.php), which is exactly when this
   variable's value is real screen space, not wasted margin on a page/device
   where the chat bar never renders (desktop, or the widget disabled). */
:root {
	--caguide-chat-bar-total-height: calc(45px + env(safe-area-inset-bottom, 0px));
}

/* ----- Mobile: thin bar fixed at the very bottom of the screen ----- */

.caguide_chat_bar {
	display: none;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px;
	box-sizing: content-box;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px;
	padding-bottom: env(safe-area-inset-bottom, 0);
	border-top: 1px solid var(--border, #e6ddd0);
	background-color: var(--card, #ffffff);
}

.caguide_chat_bar_label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink, #2b2420);
	white-space: nowrap;
}

.caguide_chat_dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #2bb673;
	flex-shrink: 0;
}

.caguide_chat_bar_links {
	display: flex;
	align-items: center;
	gap: 16px;
	overflow-x: auto;
	scrollbar-width: none;
}

.caguide_chat_bar_links::-webkit-scrollbar {
	display: none;
}

.caguide_chat_bar_links a {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink, #2b2420);
	text-decoration: underline;
	white-space: nowrap;
}

/* ----- Desktop: floating bubble that expands to one circle per channel -----
   Left side, not right - the right edge is already the favorites/comparison
   heart button + tray's own corner (see the wp_footer hook in
   custom-elementor-widgets.php); the two were overlapping there. ----- */

.caguide_chat_bubble_wrap {
	display: flex;
	flex-direction: column;
	/* Not center - the button+prompt row is wider than the channel circles
	   once the prompt bubble is showing, and everything should share the
	   button's left edge rather than the row's own (wider) centerline. */
	align-items: flex-start;
	gap: 10px;
	left: 24px;
	bottom: 24px;
}

.caguide_chat_channels {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.caguide_chat_bubble_wrap.is-open .caguide_chat_channels {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
}

/* !important throughout this button/icon block - confirmed live that the
   theme's own default button/svg styles (padding, border-radius, width) were
   winning over plain-specificity rules here, flattening the round bubble
   into an unstyled rectangle and shrinking the icon's <svg> to width:0. Same
   fight, same fix, as .caguide_itinerary_day_header's own theme-button
   override (assets/css/itinerary-map.css). */
/* Plain white circle now, not a brand-colored fill - each channel's own SVG
   (caguide_get_chat_channel_icon() in includes/caguide-chat-widget.php)
   already draws its own colored badge, so this is just a neutral mount/
   shadow behind it, not a second color layer. */
.caguide_chat_channel {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px !important;
	height: 48px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background-color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(43, 36, 32, 0.22);
}

.caguide_chat_channel svg {
	width: 40px !important;
	height: 40px !important;
	flex-shrink: 0;
}

.caguide_chat_channel_label {
	position: absolute;
	left: calc(100% + 10px);
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--ink, #2b2420);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	padding: 5px 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
}

.caguide_chat_channel:hover .caguide_chat_channel_label,
.caguide_chat_channel:focus-visible .caguide_chat_channel_label {
	opacity: 1;
}

.caguide_chat_bubble_btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 56px !important;
	height: 56px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: none !important;
	cursor: pointer;
	background-color: var(--pink-action, #e8334f);
	box-shadow: 0 4px 16px rgba(43, 36, 32, 0.28);
	transition: background-color 150ms ease, transform 150ms ease;
}

.caguide_chat_bubble_btn svg {
	width: 24px !important;
	height: 24px !important;
	flex-shrink: 0;
}

.caguide_chat_bubble_btn:hover {
	background-color: var(--e-global-color-e352649, #ca2c45) !important;
}

.caguide_chat_bubble_wrap.is-open .caguide_chat_bubble_btn {
	transform: rotate(90deg);
}

/* The button + its standing "Contact us!" prompt, side by side - the wrap is
   left-aligned (see .caguide_chat_bubble_wrap above) so this row grows
   rightward into the page, same direction the prompt bubble's tail points. */
.caguide_chat_row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.caguide_chat_prompt {
	position: relative;
	background-color: var(--ink, #2b2420);
	color: #fff;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	padding: 10px 16px;
	box-shadow: 0 4px 14px rgba(43, 36, 32, 0.22);
	transition: opacity 150ms ease, visibility 0s linear 0s;
}

/* Speech-bubble tail pointing back at the launcher button. */
.caguide_chat_prompt::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -7px;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 7px 8px 7px 0;
	border-color: transparent var(--ink, #2b2420) transparent transparent;
}

/* Redundant with the now-open channel list, and would otherwise sit on top
   of it - hidden while the bubble is expanded. */
.caguide_chat_bubble_wrap.is-open .caguide_chat_prompt {
	opacity: 0;
	visibility: hidden;
	transition: opacity 150ms ease, visibility 0s linear 150ms;
}

@media only screen and (max-width: 767px) {
	.caguide_chat_bar {
		display: flex;
	}

	.caguide_chat_bubble_wrap {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.caguide_chat_channels,
	.caguide_chat_bubble_btn {
		transition: none;
	}
}