/* BoostronixX — FAQ assistant panel.
 *
 * Deliberately borrows the FAQ page's own card language (1px line border,
 * rounded-2xl, ink-soft body copy) so the answer reads as part of the page
 * rather than a bolted-on widget. No layout of the existing page changes.
 */

.faq-ai.hidden {
	display: none;
}

.faq-ai {
	margin-top: .75rem;
}

.faq-ai-card {
	border: 1px solid var(--color-line, #e6e1da);
	border-radius: 1rem;
	background: var(--color-surface, #f6f3ee);
	padding: 1.25rem 1.5rem;
}

.faq-ai-kicker {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent, #fa5539);
	margin: 0;
}

.faq-ai-body {
	margin: .6rem 0 0;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--ink, #0a0a0a);
}

.faq-ai-more {
	margin: 1rem 0 .35rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-soft, #57534e);
}

.faq-ai-sources {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .3rem;
}

.faq-ai-sources a {
	font-size: .875rem;
	color: var(--ink, #0a0a0a);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--color-line, #e6e1da);
	transition: color .15s ease, text-decoration-color .15s ease;
}

.faq-ai-sources a:hover {
	color: var(--accent, #fa5539);
	text-decoration-color: var(--accent, #fa5539);
}

.faq-ai-foot {
	margin: 1rem 0 0;
	font-size: .8rem;
	color: var(--ink-soft, #57534e);
}

.faq-ai-foot a {
	color: var(--accent, #fa5539);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ---------------------------------------------------------------
 * Thinking state
 *
 * This is the one moment the visitor is actually watching the page, so it
 * shows a shimmering skeleton of the answer that is about to land rather than
 * a spinner — the shape of the result is already on screen before the words
 * arrive, which makes the wait read as progress instead of delay.
 * ------------------------------------------------------------- */
.faq-ai-thinking .faq-ai-kicker {
	color: var(--accent, #fa5539);
}

.faq-ai-step {
	transition: opacity .18s ease;
}

/* A soft pulsing orb with an orbiting highlight. */
.faq-ai-orb {
	position: relative;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: radial-gradient(circle at 30% 30%, var(--accent, #fa5539), #ffb199);
	box-shadow: 0 0 0 0 rgba(250, 85, 57, .45);
	animation: bxFaqPulse 1.6s ease-out infinite;
}

.faq-ai-orb::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 1.5px solid transparent;
	border-top-color: var(--accent, #fa5539);
	animation: bxFaqSpin 1s linear infinite;
}

@keyframes bxFaqPulse {
	0%   { box-shadow: 0 0 0 0 rgba(250, 85, 57, .45); }
	70%  { box-shadow: 0 0 0 9px rgba(250, 85, 57, 0); }
	100% { box-shadow: 0 0 0 0 rgba(250, 85, 57, 0); }
}

@keyframes bxFaqSpin {
	to { transform: rotate(360deg); }
}

/* Skeleton lines that sweep, sized like the sentences about to replace them. */
.faq-ai-skeleton {
	margin-top: .85rem;
	display: grid;
	gap: .5rem;
}

.faq-ai-skeleton span {
	display: block;
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		rgba(10, 10, 10, .07) 0%,
		rgba(10, 10, 10, .07) 40%,
		rgba(250, 85, 57, .18) 50%,
		rgba(10, 10, 10, .07) 60%,
		rgba(10, 10, 10, .07) 100%
	);
	background-size: 220% 100%;
	animation: bxFaqSweep 1.5s ease-in-out infinite;
}

.faq-ai-skeleton span:nth-child(2) { animation-delay: .12s; }
.faq-ai-skeleton span:nth-child(3) { animation-delay: .24s; }

@keyframes bxFaqSweep {
	0%   { background-position: 120% 0; }
	100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.faq-ai-orb,
	.faq-ai-orb::after,
	.faq-ai-skeleton span {
		animation: none;
	}
	.faq-ai-skeleton span {
		background: rgba(10, 10, 10, .07);
	}
}