/**
 * BETEP 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 #betep-ai to avoid touching site styles.
 */

#betep-ai {
	--bai-accent: var(--accent, #f6631c);
	--bai-accent-ink: var(--accent-ink, #b8410a);
	--bai-on-accent: #fff;
	--bai-bg: var(--surface, #fff);
	--bai-panel: var(--card, #fff);
	--bai-text: var(--text, #1c1a17);
	--bai-muted: var(--muted, #6b6660);
	--bai-line: var(--line, rgba(20, 18, 15, 0.12));
	--bai-bot: var(--surface-2, #f4f1ec);
	--bai-radius: 18px;
	--bai-shadow: 0 18px 50px -12px rgba(20, 16, 10, 0.35);

	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 "Ask"
   button; the panel still opens (via betep:ai-open). Keep the panel clear of
   the bar. */
@media (max-width: 767px) {
	.betep-ai__bubble { display: none; }
	#betep-ai { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

#betep-ai *,
#betep-ai *::before,
#betep-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. */
#betep-ai[hidden],
.betep-ai__panel[hidden],
.betep-ai__lead[hidden],
.betep-ai__composer[hidden] { display: none !important; }

/* ---- Launcher bubble -------------------------------------------------- */
.betep-ai__bubble {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	margin-left: auto;
	padding: 0.7rem 1.1rem 0.7rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: var(--bai-accent);
	color: var(--bai-on-accent);
	font: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--bai-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.betep-ai__bubble:hover { transform: translateY(-2px); background: var(--bai-accent-ink); }
.betep-ai__bubble:focus-visible { outline: 3px solid var(--bai-accent); outline-offset: 3px; }
.betep-ai__bubble-icon { display: inline-flex; }
/* The logo head as a clean vector, no white chip, rendered white so it reads on
   the accent bubble, and sized to nearly fill it. */
.betep-ai__bubble-mark { display: block; width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); }
@media (max-width: 480px) { .betep-ai__bubble-mark { width: 36px; height: 36px; } }
@media (max-width: 480px) {
	.betep-ai__bubble-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.betep-ai__bubble { padding: 0.85rem; }
}

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

/* ---- Panel ------------------------------------------------------------ */
.betep-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: betep-ai-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes betep-ai-in {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
	.betep-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) {
	.betep-ai__panel { animation: none; }
	.betep-ai__bubble { transition: none; }
}

.betep-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);
}
.betep-ai__head-text { display: flex; flex-direction: column; gap: 2px; }
.betep-ai__title { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.betep-ai__subtitle { font-size: 0.78rem; opacity: 0.9; }
.betep-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;
}
.betep-ai__x:hover { background: rgba(255, 255, 255, 0.3); }

/* ---- Message log ------------------------------------------------------ */
.betep-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;
}
.betep-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;
}
.betep-ai__msg--bot {
	align-self: flex-start;
	background: var(--bai-bot);
	color: var(--bai-text);
	border-bottom-left-radius: 5px;
}
.betep-ai__msg--user {
	align-self: flex-end;
	background: var(--bai-accent);
	color: var(--bai-on-accent);
	border-bottom-right-radius: 5px;
}
.betep-ai__msg a { color: inherit; text-decoration: underline; }

.betep-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; }
.betep-ai__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--bai-muted); opacity: 0.5; animation: betep-ai-blink 1.2s infinite ease-in-out; }
.betep-ai__typing span:nth-child(2) { animation-delay: 0.2s; }
.betep-ai__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes betep-ai-blink { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---- Composer --------------------------------------------------------- */
.betep-ai__composer {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem;
	border-top: 1px solid var(--bai-line);
	background: var(--bai-panel);
}
.betep-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;
}
.betep-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); }
.betep-ai__send,
.betep-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;
}
.betep-ai__send { background: var(--bai-accent); color: var(--bai-on-accent); }
.betep-ai__send:hover { background: var(--bai-accent-ink); }
.betep-ai__send:disabled { opacity: 0.5; cursor: default; }
.betep-ai__lead-open { background: transparent; color: var(--bai-muted); border: 1px solid var(--bai-line); }
.betep-ai__lead-open:hover { color: var(--bai-accent); border-color: var(--bai-accent); }

/* ---- Lead form -------------------------------------------------------- */
.betep-ai__lead {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem;
	border-top: 1px solid var(--bai-line);
	background: var(--bai-panel);
}
.betep-ai__lead-title { margin: 0 0 0.15rem; font-weight: 700; font-size: 0.92rem; }
.betep-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;
}
.betep-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); }
.betep-ai__lead-row { display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.betep-ai__lead-cancel,
.betep-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;
}
.betep-ai__lead-cancel { background: transparent; color: var(--bai-muted); }
.betep-ai__lead-cancel:hover { color: var(--bai-text); }
.betep-ai__lead-send { background: var(--bai-accent); color: var(--bai-on-accent); border-color: transparent; }
.betep-ai__lead-send:hover { background: var(--bai-accent-ink); }

.betep-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 #betep-ai { --bai-bot: rgba(255, 255, 255, 0.08); }