/* UX AI Chat Bot - floating bubble + panel chrome (inc/ux-ai-bot/chat-bot.php). The panel's
   content is the real Ask element markup - this file only styles the bubble/panel container
   around it; the chat UI itself (input/answer/loading/etc.) is styled by
   uaf-ai-ask-element.css, loaded as this file's own dependency. */

/* WP's own admin bar (#wpadminbar) is ALSO position:fixed at the very top with z-index:99999 -
   the exact same layer this bubble lives on. It's only ever visible to logged-in staff, which
   is also the only time this bubble is visible while logged in - so the two are guaranteed to
   collide whenever they'd both be showing. Rather than depend on which of two equal-z-index
   fixed elements happens to win the stacking tie-break (Zaki confirmed live: the panel was
   landing UNDER the bar, hiding its own top), this just makes sure nothing here ever tries to
   occupy the bar's own strip in the first place - correct regardless of the exact tie-break
   mechanism. 0 by default (no bar/not logged in), matches WP core's own two states: 32px
   desktop, 46px on the same <= 782px breakpoint WP itself uses for the bar (a DIFFERENT
   breakpoint than this file's own 480px "mobile" one - the two are unrelated). */
:root {
	--uaf-admin-bar-height: 0px;
}
body.admin-bar {
	--uaf-admin-bar-height: 32px;
}
@media (max-width: 782px) {
	body.admin-bar {
		--uaf-admin-bar-height: 46px;
	}
}

/* Horizontal (Right/Left) and vertical (Bottom/Middle/Top) are two independent modifier
   classes (uaf_ai_chat_bot_render(), chat-bot.php) rather than one combined class per
   position, so each axis's CSS only has to be written once instead of 6 times over. */
.uaf-ai-chat-bot {
	position: fixed;
	z-index: 99999;
}
/* uaf-ai-chat-bot--start-hidden class added by uaf_ai_chat_bot_render() (chat-bot.php) only on
   a page that's here purely because [uaf_ai_ask_chat]/the Header Builder button forced it, not
   because page targeting actually included it (Zaki: "not appear yet until they click the
   button... once they click it will show and stay"). Removed permanently by
   uaf-ai-chat-bot.js the first time an inline trigger is clicked - never re-added afterward, so
   closing the panel later has no effect on this. */
.uaf-ai-chat-bot--start-hidden {
	display: none;
}
.uaf-ai-chat-bot--right {
	right: 20px;
}
.uaf-ai-chat-bot--left {
	left: 20px;
}

/* --uaf-chat-bot-base carries just the "how far up the stack" number (set by the
   --stack-1/--stack-2 modifier below, overridden again at the mobile breakpoint) - the actual
   `bottom` offset is always computed from it in ONE place, adding the safe-area inset (notch/
   home-indicator) on top. Keeping stacking and safe-area as two separate concerns that combine
   via calc(), rather than two rules that both set `bottom` directly, avoids whichever one
   happens to come later in the cascade silently overriding the other's offset. Bottom-anchored
   only - collision with Back To Top/WhatsApp (both always bottom-anchored) can't happen for
   Middle/Top, so uaf_ai_chat_bot_offset_classes() never adds a --stack-* class for those. */
.uaf-ai-chat-bot--v-bottom {
	--uaf-chat-bot-base: 20px;
	bottom: calc(var(--uaf-chat-bot-base) + env(safe-area-inset-bottom, 0px));
}
.uaf-ai-chat-bot--v-bottom.uaf-ai-chat-bot--stack-1 {
	--uaf-chat-bot-base: 90px;
}
.uaf-ai-chat-bot--v-bottom.uaf-ai-chat-bot--stack-2 {
	--uaf-chat-bot-base: 160px;
}

.uaf-ai-chat-bot--v-top {
	top: calc(20px + env(safe-area-inset-top, 0px) + var(--uaf-admin-bar-height, 0px));
}

/* calc(50vh - 30px), NOT top:50% + transform:translateY(-50%) - that combination is exactly
   the kind of pattern that's caused real cross-browser trouble already this session
   (percentage/transform interactions against an element's own auto-derived box). transform on
   this wrapper would also apply to the panel positioned absolutely inside it (its containing
   block), compounding the risk. vh is always relative to the viewport itself, never ambiguous
   the way a percentage against an auto-height box can be, and needs no transform at all - 30px
   is simply half the 60px toggle button's own height, centering it directly. */
.uaf-ai-chat-bot--v-middle {
	top: calc(50vh - 30px);
}

/* Same label+icon split as the WhatsApp Floating Button (uaf-whatsapp-button.css's
   .uaf-whatsapp-bubble/.uaf-whatsapp-icon) - the button itself is just a transparent flex row
   now, the accent-colored circle moved to .uaf-ai-chat-bot-icon-circle so the label pill can
   sit beside it without inheriting a circular shape. */
.uaf-ai-chat-bot-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	border: none;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	/* Flatsome's own theme CSS sets text-transform: uppercase on every plain <button> element
	   (.button,button,input[type=button]... - confirmed in flatsome.css), which otherwise
	   inherits straight down into .uaf-ai-chat-bot-label since text-transform is an inherited
	   property and this button has no theme "button" class of its own to exempt it. */
	text-transform: none;
}
/* Right-positioned: label first in DOM so it renders on the inward side, icon second so it
   sits at the true screen edge (same reasoning/order as WhatsApp's own markup). Left-positioned
   flips this via row-reverse instead of a second copy of the markup in PHP. */
.uaf-ai-chat-bot--left .uaf-ai-chat-bot-toggle {
	flex-direction: row-reverse;
}

.uaf-ai-chat-bot-label {
	background: #fff;
	color: #111;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 16px;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
}
/* Collapses back to just the icon once open - keeps the panel's own 76px offset (based on the
   60px icon circle alone) accurate regardless of how wide the label text is, and reads better
   than a "click to chat" CTA still showing once the visitor has already engaged. */
.uaf-ai-chat-bot.is-open .uaf-ai-chat-bot-label {
	display: none;
}

.uaf-ai-chat-bot-icon-circle {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--uaf-ai-ask-accent, #6c5ce8);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease, transform 0.15s ease;
}
.uaf-ai-chat-bot-toggle:hover .uaf-ai-chat-bot-icon-circle {
	transform: scale(1.05);
}

.uaf-ai-chat-bot-icon-close {
	display: none;
	font-size: 30px;
	line-height: 1;
}
.uaf-ai-chat-bot.is-open .uaf-ai-chat-bot-icon-open {
	display: none;
}
.uaf-ai-chat-bot.is-open .uaf-ai-chat-bot-icon-close {
	display: block;
}

.uaf-ai-chat-bot-panel {
	position: absolute;
	/* Fixed px offsets throughout this file, never calc(100% + Npx) - that was the actual bug
	   behind an earlier issue (Zaki: "it go beyond upper border... in some screen"). A
	   percentage top/right/bottom/left on an absolutely-positioned element resolves against
	   its containing block's size - but .uaf-ai-chat-bot (the containing block here) never
	   gets an explicit width/height, only auto-sizing from its 60px toggle button, and
	   browsers don't all resolve that auto size the same way for this calculation. 76px below
	   = the 60px toggle button's own width/height + the 16px gap - a fixed offset has nothing
	   to resolve against, so it's the same everywhere. */
	width: 380px;
	/* 116px, not just a flat 40px margin - the panel starts 96px in from whichever edge it's
	   anchored to (20px bubble offset + 76px width/gap), so that much has to come off the
	   available width too before it can overflow the OPPOSITE edge, plus 20px breathing room
	   on that far side. Without this, a narrower browser window (not just phone-width, which
	   the mobile breakpoint below handles separately) could still push the panel off-screen. */
	max-width: calc(100vw - 116px);
	height: 600px;
	/* - var(--uaf-admin-bar-height, 0px) - benefits Top/Middle (no override below), so the
	   panel never grows tall enough to reach up into the admin bar's own strip. */
	max-height: calc(100vh - 40px - var(--uaf-admin-bar-height, 0px));
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
/* Opens beside the bubble now, not stacked above/below it (2026-09-23, Zaki: "keep bubble
   always in its direction but window open at left of it or right of it depending position").
   Side follows h_pos: a Right-positioned bubble opens its panel to the LEFT (toward the page's
   visible center) and vice versa - the only sensible choice, since opening toward the screen
   edge would just push the panel off-screen. */
.uaf-ai-chat-bot--right .uaf-ai-chat-bot-panel {
	right: 76px;
	left: auto;
	transform-origin: right center;
	transform: translateX(16px) scale(0.98);
}
.uaf-ai-chat-bot--left .uaf-ai-chat-bot-panel {
	left: 76px;
	right: auto;
	transform-origin: left center;
	transform: translateX(-16px) scale(0.98);
}

/* Vertical alignment matches the bubble's own edge for Bottom/Top (they share the same
   baseline - panel and bubble bottoms, or tops, level with each other) and centers to match
   Middle. Independent of the horizontal siding above. */
.uaf-ai-chat-bot--v-bottom .uaf-ai-chat-bot-panel {
	bottom: 0;
	/* Overrides the base max-height: calc(100vh - 40px) - that flat formula only accounted
	   for the bubble's own default 20px offset from the bottom, not the extra 70-140px it
	   gets pushed up by when stacked above Back To Top/WhatsApp (Zaki: "both send our AI
	   bubble little bit higher which hide its top part from screen"). --uaf-chat-bot-base is
	   the SAME custom property already carrying that exact offset (set on this wrapper,
	   20/90/160px depending on --stack-1/--stack-2) - it inherits straight down to this panel
	   since custom properties always inherit, so referencing it here keeps the two numbers
	   permanently in sync instead of hardcoding a second copy that could drift out of step. */
	max-height: calc(100vh - var(--uaf-chat-bot-base, 20px) - 20px - var(--uaf-admin-bar-height, 0px));
}
.uaf-ai-chat-bot--v-top .uaf-ai-chat-bot-panel {
	top: 0;
}
.uaf-ai-chat-bot--v-middle .uaf-ai-chat-bot-panel {
	/* Fixed px, NOT top: 50% - same containing-block-has-no-explicit-height pitfall called out
	   above would apply here too (the wrapper's auto height comes only from its 60px button).
	   -270px = the button's own vertical center (30px, half of 60px) minus half the panel's
	   own 600px height (300px), landing the panel's center exactly on the button's center. */
	top: -270px;
}

.uaf-ai-chat-bot.is-open .uaf-ai-chat-bot-panel {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: auto;
}

/* Gradient overlay on top of the (dynamic, per-site) accent color rather than trying to
   compute a "darker" version of it in CSS - plain CSS has no darken() function, but a
   semi-transparent black gradient layered over any base color reliably darkens just the
   bottom-right corner regardless of what accent color is picked. Multiple comma-separated
   background layers with a plain color last is the standard way to combine a gradient with a
   solid base color in one `background` shorthand. */
.uaf-ai-chat-bot-panel-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%), var(--uaf-ai-ask-accent, #6c5ce8);
	color: #fff;
}
.uaf-ai-chat-bot-panel-title {
	/* min-width: 0 - the actual bug (Zaki: "'Ask Anything' is hidden" when the window gets
	   narrower). A flex item's default min-width is "auto", NOT 0 - meaning without this, the
	   title refuses to shrink below its own natural single-line width even as the panel itself
	   gets narrower (max-width: calc(100vw - 116px) on .uaf-ai-chat-bot-panel already handles
	   the "don't take all the space on a huge screen" half correctly - this was the other
	   half, the title not cooperating with an already-shrinking panel). It was overflowing the
	   header, then getting silently clipped by the panel's own overflow: hidden - a hard,
	   invisible cut instead of a clean truncation. text-overflow: ellipsis now makes that
	   truncation visible and intentional-looking instead. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.uaf-ai-chat-bot-panel-close {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}
.uaf-ai-chat-bot-panel-close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.uaf-ai-chat-bot-panel-inner {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 20px;
}

/* Intro line above the input (uaf_ai_chat_bot_welcome_text, settings.php AI Bot tab) - plain
   muted text, not a card/bubble, so it reads as a caption rather than a second header. */
.uaf-ai-chat-bot-welcome {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
}

/* The Ask element's own card styling assumes sitting inline in page content - inside this
   panel it just needs to fill the available space, so its width constraint is cleared here
   rather than duplicated. */
.uaf-ai-chat-bot-panel-inner .uaf-ai-ask-element {
	max-width: none;
}

/* Name/Email/Send stacked one-per-line always inside this panel (narrower than a typical
   inline placement of the Ask element), not just under 480px like uaf-ai-ask-element.css's own
   mobile rule for the regular element (Zaki: "only inside window of chat bot... but for other
   section like builder elements please dont change anything" - deliberately kept OUT of that
   shared file entirely, scoped here instead, so the inline/builder element's own row layout
   above 480px is untouched). Same values that file's mobile breakpoint already uses. */
.uaf-ai-chat-bot-panel-inner .uaf-ai-ask-email-form {
	flex-direction: column;
	align-items: stretch;
}
.uaf-ai-chat-bot-panel-inner .uaf-ai-ask-name-input,
.uaf-ai-chat-bot-panel-inner .uaf-ai-ask-email-input,
.uaf-ai-chat-bot-panel-inner .uaf-ai-ask-email-submit {
	flex: 1 1 auto;
	width: 100%;
}

/* uaf_ai_chat_bot_render() passes label: '' (a floating chat panel doesn't need a repeated
   "Ask AI" caption above its own input) - hide the now-empty label rather than leaving its
   margin/line-height as blank vertical space. */
.uaf-ai-chat-bot-panel-inner .uaf-ai-ask-label:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.uaf-ai-chat-bot-panel,
	.uaf-ai-chat-bot-icon-circle {
		transition: none;
	}
}

/* Mobile - same 480px breakpoint as the Ask element's own CSS (uaf-ai-ask-element.css) and
   the WhatsApp button, so "mobile" means the same thing everywhere in this plugin. Full-screen
   sheet instead of a small floating box - a fixed 380x600 panel would either overflow or feel
   cramped on a phone screen (Zaki: "it has to be mobile friendly"). */
@media (max-width: 480px) {
	.uaf-ai-chat-bot--v-bottom {
		--uaf-chat-bot-base: 14px;
	}
	.uaf-ai-chat-bot--v-top {
		top: calc(14px + env(safe-area-inset-top, 0px));
	}
	.uaf-ai-chat-bot--right {
		right: 14px;
	}
	.uaf-ai-chat-bot--left {
		left: 14px;
	}
	.uaf-ai-chat-bot--stack-1 {
		--uaf-chat-bot-base: 78px;
	}
	.uaf-ai-chat-bot--stack-2 {
		--uaf-chat-bot-base: 142px;
	}

	.uaf-ai-chat-bot-icon-circle {
		width: 52px;
		height: 52px;
	}

	/* .uaf-ai-chat-bot .uaf-ai-chat-bot-panel (two classes), NOT just .uaf-ai-chat-bot-panel -
	   the side-opening rules above (.uaf-ai-chat-bot--right .uaf-ai-chat-bot-panel etc.) are
	   ALSO two-class selectors, which would outrank a plain one-class selector here regardless
	   of source order (CSS specificity beats cascade position when they differ) - inset: 0
	   would lose to their right/left/top/bottom values and the panel would stay side-anchored
	   instead of going properly fullscreen on mobile. Matching their specificity here, as the
	   LAST rule of that specificity in the file, wins the tie-break correctly instead. */
	.uaf-ai-chat-bot .uaf-ai-chat-bot-panel {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: 100%;
		/* dvh accounts for the mobile browser's own address-bar height changes - falls back to
		   vh on older browsers that don't support it, which is still correct on most devices,
		   just occasionally short by the address-bar's height. */
		height: 100vh;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
		transform: none;
	}
	.uaf-ai-chat-bot.is-open .uaf-ai-chat-bot-panel {
		transform: none;
	}

	/* Fullscreen panel already visually covers the bubble entirely (it's inset: 0, painted
	   after it in the same stacking context) - hidden explicitly anyway rather than left to
	   paint order, so there's no ambiguity/edge case (Zaki: "no bubble button" while open on
	   mobile). The panel header's own X is the only close control once this is in effect. */
	.uaf-ai-chat-bot.is-open .uaf-ai-chat-bot-toggle {
		display: none;
	}

	.uaf-ai-chat-bot-panel-inner {
		padding: 16px;
		padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
	}

	/* Fullscreen now - the header sits right at the top edge of the real screen, so it needs
	   its own notch/dynamic-island clearance the desktop floating panel never has to worry
	   about. */
	.uaf-ai-chat-bot-panel-header {
		padding-top: max(14px, env(safe-area-inset-top, 0px), var(--uaf-admin-bar-height, 0px));
	}
}

/* [uaf_ai_ask_chat] shortcode button (chat-bot.php) - a normal inline element sitting wherever
   it was placed in page content, styled as its own standalone pill button rather than reusing
   .uaf-ai-chat-bot-toggle (that one assumes being fixed-position with an icon-circle/label
   split for the floating bubble specifically; this is a plain in-flow button). */
.uaf-ai-chat-bot-inline-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--uaf-ai-ask-accent, #6c5ce8);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 22px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.uaf-ai-chat-bot-inline-trigger:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.uaf-ai-chat-bot-inline-trigger-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.uaf-ai-chat-bot-inline-trigger {
		transition: none;
	}
}