/**
 * WeFixed AI chat widget.
 *
 * Self-contained. It borrows the theme's brand tokens when present
 * (--accent, --text, --surface, --line, --card) but every custom property has a
 * hard fallback, so it still looks right if the theme changes or the tokens are
 * renamed. Scoped entirely under #wefixed-ai to avoid touching site styles.
 */

#wefixed-ai {
	--bai-accent: var(--accent, #3b6fe5);
	/* Derived, not a second literal. --accent-ink is not a token this theme
	   defines, and a fixed fallback here meant the bubble sat in the site accent
	   until you hovered it, then jumped to a color from another brand entirely.
	   Mixing black into whatever the accent is keeps the pressed state a shade
	   of the real accent on any site this module lands on. */
	--bai-accent-ink: var(--accent-ink, color-mix(in srgb, #000 18%, var(--bai-accent)));
	--bai-on-accent: #fff;
	--bai-bg: var(--surface, #fff);
	--bai-panel: var(--card, #fff);
	--bai-text: var(--text, #0b1320);
	--bai-muted: var(--muted, #64748b);
	--bai-line: var(--line, rgba(11, 19, 32, 0.12));
	/* The assistant's message background: a hair off the panel, in the panel's
	   own hue, so it reads as a quiet tint in both light and dark themes. */
	--bai-bot: var(--surface-2, color-mix(in srgb, var(--bai-text) 6%, var(--bai-panel)));
	--bai-radius: 18px;
	--bai-shadow: 0 18px 50px -12px rgba(11, 19, 32, 0.32);

	position: fixed;
	right: clamp(14px, 4vw, 28px);
	bottom: clamp(14px, 4vw, 28px);
	z-index: 2147483000;
	font-family: inherit;
}

/* On phones the floating bubble is replaced by the mobile action bar's chat
   button (footer.php), so there is exactly ONE chat entry point, not two. The
   panel still opens (via wefixed:ai-open). The #wefixed-ai id keeps this rule ahead
   of the later base `.wefixed-ai__bubble { display:inline-flex }` regardless of
   source order (an ID outranks the class), otherwise the bubble would reappear
   on mobile and duplicate the bar button.
   ONLY where that bar exists: the booking, sell, track and enterprise pages and
   the pages with a bar of their own render no .mobile-bar, and hiding the bubble
   there left a phone with no way into the chat at all. */
@media (max-width: 767px) {
	body:has(.mobile-bar) #wefixed-ai .wefixed-ai__bubble { display: none; }
	body:has(.mobile-bar) #wefixed-ai { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	/* iOS Safari auto-zooms the page when a focused input's font is under 16px,
	   which shoves the fixed panel (and its Send button) off-screen. Force 16px
	   on every chat input on phones so focusing never triggers that zoom. */
	#wefixed-ai .wefixed-ai__input,
	#wefixed-ai .wefixed-ai__lead input { font-size: 16px; }
}

#wefixed-ai *,
#wefixed-ai *::before,
#wefixed-ai *::after { box-sizing: border-box; }

/* Honor the hidden attribute. The JS toggles [hidden] + .is-open to open and
   close the panel and to swap the composer for the lead form. The explicit
   display rules below would otherwise defeat the browser's [hidden] style, so
   the panel and the lead form would BOTH show on page load, before anyone
   clicks, looking like an already-open form. This keeps them closed until the
   bubble is tapped. */
#wefixed-ai[hidden],
.wefixed-ai__panel[hidden],
.wefixed-ai__lead[hidden],
.wefixed-ai__composer[hidden] { display: none !important; }

/* ---- Launcher bubble -------------------------------------------------- */
/* Wefi himself is the launcher: his orb (wefi-orb.css) on a dark glass pill
   with the words, the same character as in WeFixed OS and in the phone's
   bottom bar. On a narrow screen the words go and the orb alone is the button. */
.wefixed-ai__bubble {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	margin-left: auto;
	padding: 8px 1.15rem 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: rgba(11, 19, 32, 0.9);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 14px 34px -10px rgba(11, 19, 32, 0.55);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.wefixed-ai__bubble:hover { transform: translateY(-2px); }
.wefixed-ai__bubble:focus-visible { outline: 3px solid var(--bai-accent); outline-offset: 3px; }
@media (max-width: 480px) {
	.wefixed-ai__bubble-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.wefixed-ai__bubble { padding: 6px; gap: 0; border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.wefixed-ai.is-open .wefixed-ai__bubble { transform: scale(0.85); opacity: 0; pointer-events: none; }

/* ---- Panel ------------------------------------------------------------ */
.wefixed-ai__panel {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(380px, calc(100vw - 28px));
	height: min(600px, calc(100vh - 96px));
	max-height: 76vh;
	display: flex;
	flex-direction: column;
	background: var(--bai-panel);
	color: var(--bai-text);
	border: 1px solid var(--bai-line);
	border-radius: var(--bai-radius);
	box-shadow: var(--bai-shadow);
	overflow: hidden;
	transform-origin: bottom right;
	animation: wefixed-ai-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes wefixed-ai-in {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
	.wefixed-ai__panel {
		position: fixed;
		right: 8px; left: 8px; bottom: 8px;
		width: auto;
		height: min(80vh, calc(100vh - 16px));
		max-height: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.wefixed-ai__panel { animation: none; }
	.wefixed-ai__bubble { transition: none; }
}

.wefixed-ai__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem 1.05rem;
	background: linear-gradient(135deg, var(--bai-accent), var(--bai-accent-ink));
	color: var(--bai-on-accent);
}
.wefixed-ai__head-text { display: flex; flex-direction: column; gap: 2px; }
.wefixed-ai__title { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.wefixed-ai__subtitle { font-size: 0.78rem; opacity: 0.9; }
.wefixed-ai__x {
	margin-left: auto;
	display: inline-flex;
	padding: 6px;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.16);
	color: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}
.wefixed-ai__x:hover { background: rgba(255, 255, 255, 0.3); }

/* ---- Message log ------------------------------------------------------ */
.wefixed-ai__log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1rem 0.95rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: var(--bai-bg);
	scroll-behavior: smooth;
}
/* Sender label above each run of messages, so a long thread never reads as one
   undifferentiated pile. Printed once per change of sender. */
.wefixed-ai__who {
	align-self: flex-start;
	margin: 0.35rem 0.15rem -0.25rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bai-muted);
}
.wefixed-ai__who--user { align-self: flex-end; }
.wefixed-ai__who--agent { color: var(--bai-accent); }
.wefixed-ai__log > .wefixed-ai__who:first-child { margin-top: 0; }

.wefixed-ai__msg {
	max-width: 85%;
	padding: 0.6rem 0.8rem;
	border-radius: 14px;
	font-size: 0.9rem;
	line-height: 1.45;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.wefixed-ai__msg--bot {
	align-self: flex-start;
	background: var(--bai-bot);
	color: var(--bai-text);
	border-bottom-left-radius: 5px;
}
.wefixed-ai__msg--user {
	align-self: flex-end;
	background: var(--bai-accent);
	color: var(--bai-on-accent);
	border-bottom-right-radius: 5px;
}
.wefixed-ai__msg a { color: inherit; text-decoration: underline; }

/* Photos travelling either way. Stored as WebP server-side, so these stay small. */
.wefixed-ai__msg--photo { padding: 5px; max-width: 74%; }
.wefixed-ai__shot { display: block; text-decoration: none; }
.wefixed-ai__shot img {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	border-radius: 10px;
	background: var(--bai-bot);
}
.wefixed-ai__cap { display: block; padding: 7px 5px 3px; font-size: 0.86rem; line-height: 1.4; }

/* Attach control sits with the send button in the composer. */
.wefixed-ai__attach {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 40px;
	border: 0;
	border-radius: 11px;
	background: transparent;
	color: var(--bai-muted);
	cursor: pointer;
	transition: color 0.15s ease;
}
.wefixed-ai__attach:hover { color: var(--bai-accent); }
/* Operator (live person) messages: bot-side, marked with an accent edge. */
.wefixed-ai__msg--agent {
	align-self: flex-start;
	background: var(--bai-bot);
	color: var(--bai-text);
	border-bottom-left-radius: 5px;
	border-left: 3px solid var(--bai-accent);
}
/* ---- Identity avatar + AI / live header ------------------------------- */
.wefixed-ai__ident {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
/* The live person's avatar keeps its round plate; Wefi's orb brings its own ring. */
.wefixed-ai--live .wefixed-ai__ident { overflow: hidden; }
.wefixed-ai__ident-ai { display: inline-flex; }
.wefixed-ai__ident-live { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; }
/* A mark, not a headshot: contain and pad it, because `cover` crops a logo to
   fill the circle and takes a letter off the edge. */
.wefixed-ai__ident-live img { width: 100%; height: 100%; padding: 18%; object-fit: contain; }
.wefixed-ai__ident-initial { font-weight: 800; font-size: 0.95rem; color: var(--bai-on-accent); }
/* When live, hide the AI badge and show the person avatar. */
.wefixed-ai--live .wefixed-ai__ident { background: #fff; }
.wefixed-ai--live .wefixed-ai__ident-ai { display: none; }
.wefixed-ai--live .wefixed-ai__ident-live { display: inline-flex; }
.wefixed-ai--live .wefixed-ai__ident-initial { color: var(--bai-accent-ink); }
/* A small "live" dot before the subtitle so the state reads at a glance. */
.wefixed-ai--live .wefixed-ai__subtitle { display: inline-flex; align-items: center; gap: 6px; }
.wefixed-ai--live .wefixed-ai__subtitle::before {
	content: "";
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #34d17a;
	box-shadow: 0 0 0 0 rgba(52, 209, 122, 0.7);
	animation: wefixed-ai-pulse 1.8s infinite;
}
@keyframes wefixed-ai-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(52, 209, 122, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(52, 209, 122, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 209, 122, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.wefixed-ai--live .wefixed-ai__subtitle::before { animation: none; }
}

/* When live, hide the handoff button row and secondary link unconditionally */
.wefixed-ai--live .wefixed-ai__alt {
	display: none !important;
}

/* ---- The quiet row under the input: leave details, talk to a tech -----
   Owner, 02.10.2026: a person is one tap away, but the visitor talks to Wefi
   first, so both links are small and muted, under the input, not a big
   button above it. */
.wefixed-ai__alt {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.15rem 0.45rem;
	padding: 0.15rem 0.9rem 0.35rem;
	background: var(--bai-panel);
}
.wefixed-ai__alt-dot { color: var(--bai-muted); font-size: 0.78rem; }
.wefixed-ai__handoff { display: inline-flex; }
/* The script hides both links together (the details form is open, or a
   person is on the chat), so the whole row goes with them. */
.wefixed-ai__alt:has(.wefixed-ai__leave-link[hidden]) { display: none; }
.wefixed-ai__handoff[hidden] { display: none; }
.wefixed-ai__handoff-btn,
.wefixed-ai__leave-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.15rem;
	border: 0;
	background: transparent;
	color: var(--bai-muted);
	font: inherit;
	font-size: 0.78rem;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--bai-muted) 45%, transparent);
	text-underline-offset: 2px;
	cursor: pointer;
}
.wefixed-ai__handoff-btn:hover,
.wefixed-ai__leave-link:hover { color: var(--bai-accent); }
.wefixed-ai__handoff-btn:disabled { opacity: 0.6; cursor: default; }
.wefixed-ai__leave-link[hidden] { display: none; }

.wefixed-ai__typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 0.7rem 0.85rem; background: var(--bai-bot); border-radius: 14px; border-bottom-left-radius: 5px; }
.wefixed-ai__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--bai-muted); opacity: 0.5; animation: wefixed-ai-blink 1.2s infinite ease-in-out; }
.wefixed-ai__typing span:nth-child(2) { animation-delay: 0.2s; }
.wefixed-ai__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wefixed-ai-blink { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---- Composer --------------------------------------------------------- */
.wefixed-ai__composer {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem;
	border-top: 1px solid var(--bai-line);
	background: var(--bai-panel);
}
.wefixed-ai__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--bai-line);
	border-radius: 12px;
	background: var(--bai-bg);
	color: var(--bai-text);
	font: inherit;
	font-size: 0.92rem;
}
.wefixed-ai__input:focus { outline: none; border-color: var(--bai-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bai-accent) 22%, transparent); }
.wefixed-ai__send,
.wefixed-ai__lead-open {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.wefixed-ai__send { background: var(--bai-accent); color: var(--bai-on-accent); }
.wefixed-ai__send:hover { background: var(--bai-accent-ink); }
.wefixed-ai__send:disabled { opacity: 0.5; cursor: default; }
.wefixed-ai__lead-open { background: transparent; color: var(--bai-muted); border: 1px solid var(--bai-line); }
.wefixed-ai__lead-open:hover { color: var(--bai-accent); border-color: var(--bai-accent); }

/* ---- Lead form -------------------------------------------------------- */
.wefixed-ai__lead {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem;
	border-top: 1px solid var(--bai-line);
	background: var(--bai-panel);
}
.wefixed-ai__lead-title { margin: 0 0 0.15rem; font-weight: 700; font-size: 0.92rem; }
.wefixed-ai__lead input {
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--bai-line);
	border-radius: 10px;
	background: var(--bai-bg);
	color: var(--bai-text);
	font: inherit;
	font-size: 0.9rem;
}
.wefixed-ai__lead input:focus { outline: none; border-color: var(--bai-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bai-accent) 22%, transparent); }
.wefixed-ai__lead-row { display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.wefixed-ai__lead-cancel,
.wefixed-ai__lead-send {
	flex: 1 1 auto;
	padding: 0.6rem;
	border-radius: 10px;
	border: 1px solid var(--bai-line);
	font: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
}
.wefixed-ai__lead-cancel { background: transparent; color: var(--bai-muted); }
.wefixed-ai__lead-cancel:hover { color: var(--bai-text); }
.wefixed-ai__lead-send { background: var(--bai-accent); color: var(--bai-on-accent); border-color: transparent; }
.wefixed-ai__lead-send:hover { background: var(--bai-accent-ink); }

.wefixed-ai__disclaimer {
	margin: 0;
	padding: 0.5rem 0.9rem 0.7rem;
	font-size: 0.7rem;
	line-height: 1.35;
	color: var(--bai-muted);
	text-align: center;
	background: var(--bai-panel);
}

/* Dark theme: the site sets html.dark / .section--dark; the tokens above
   already track it, but nudge the bot bubble so it reads on a dark panel. */
html.dark #wefixed-ai { --bai-bot: rgba(255, 255, 255, 0.08); }