/**
 * Styles for [pfd_docs_bot]. Every rule is scoped under .pfd-docs-bot so the
 * widget can sit inside arbitrary host themes without leaking selectors.
 *
 * Reference design lives in the bsf-docs-bot widget shipped on wpastra.com —
 * see Phase 3 audit screenshots. No Tailwind preflight here; host page
 * typography stays untouched. Brand colours come from inline styles in
 * Chat.js (driven by SaaS widget-config), so this file only owns layout and
 * neutral surfaces.
 */

.pfd-docs-bot {
	font-family: inherit;
	color: #1f2937;
	margin: 1.5rem auto;
	box-sizing: border-box;
}

.pfd-docs-bot *,
.pfd-docs-bot *::before,
.pfd-docs-bot *::after {
	box-sizing: border-box;
}

.pfd-docs-bot__widget {
	font-family: inherit;
	color: inherit;
}

/* ---------- Title (matches wpastra.com h2) ----------------------------- */

.pfd-docs-bot__title {
	font-size: 31px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: left;
	margin: 0 0 2.5rem;
}

@media (min-width: 640px) {
	.pfd-docs-bot__title {
		font-size: 2rem;
	}
}

@media (max-width: 600px) {
	.pfd-docs-bot__title {
		margin-bottom: 2rem;
	}
}

/* ---------- Form row ---------------------------------------------------- */

.pfd-docs-bot__form {
	margin: 0;
}

.pfd-docs-bot__input-row {
	display: flex;
	align-items: stretch;
	gap: 0;
	border-style: solid;
	border-width: 1px;
	border-color: #d1d5db;
	border-radius: 7px;
	background: rgba(0, 0, 0, 0) !important;
	padding: 7px 7px 7px 0;
	transition: border-color 0.15s ease;
	overflow: hidden;
}

/* Hover + focus paint the container border in the brand colour
   (`--pfd-primary` is set inline from JS on .pfd-docs-bot__widget).
   No shadow halo — matches the bsf-docs-bot reference. Background
   pinned to rgba(0,0,0,0) with !important across every interactive
   state so host themes that fill `:focus-within` containers can't
   leak a tint over the input row. */
.pfd-docs-bot__input-row:hover,
.pfd-docs-bot__input-row:focus-within {
	border-color: var(--pfd-primary, #480ca8);
	background: rgba(0, 0, 0, 0) !important;
}

.pfd-docs-bot__input {
	flex: 1 1 auto;
	min-width: 0;
	/* !important defends against host themes (Astra, Storefront, etc.) that
	   target all <input> elements with border / box-shadow / outline /
	   background rules. The background covers `:hover`/`:focus` paints
	   themes apply to text inputs. */
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: rgba(0, 0, 0, 0) !important;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0 1rem;
	color: inherit;
	font-family: inherit;
}

.pfd-docs-bot__input:hover,
.pfd-docs-bot__input:focus,
.pfd-docs-bot__input:focus-visible,
.pfd-docs-bot__input:active {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: rgba(0, 0, 0, 0) !important;
}

.pfd-docs-bot__input::placeholder {
	color: #9ca3af;
}

.pfd-docs-bot__input:disabled {
	color: #6b7280;
	cursor: not-allowed;
}

.pfd-docs-bot__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: auto 4px auto 0;
	/* !important defends against host themes (Astra, Storefront, etc.)
	   that paint a default box-shadow / border on every <button>. */
	border: 0 !important;
	border-radius: 8px;
	background: transparent;
	box-shadow: none !important;
	color: #9ca3af;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
	padding: 0;
}

.pfd-docs-bot__clear:focus,
.pfd-docs-bot__clear:focus-visible,
.pfd-docs-bot__clear:active {
	box-shadow: none !important;
	outline: none;
}

.pfd-docs-bot__clear:hover {
	background: transparent;
	color: #4b5563;
}

.pfd-docs-bot__primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 7px;
	color: #ffffff;
	font-size: 1.125rem;
	font-weight: 700;
	padding: 0 2.5rem;
	min-height: 46px;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: 0.01em;
}

/* Pin every interactive state to the same brand colour the inline
   style applies in idle. Host themes (Astra, Storefront, etc.) ship
   `button:hover { background: ... !important }` rules that out-rank
   the inline `style="background-color:…"` on the element, repainting
   the Ask button on hover. Re-asserting the brand colour here with
   `!important` and `var(--pfd-primary)` (set inline on the widget
   wrapper) wins the cascade and keeps the button visually flat — no
   filter, no shadow halo, no theme tint. */
.pfd-docs-bot__primary:hover,
.pfd-docs-bot__primary:focus,
.pfd-docs-bot__primary:focus-visible,
.pfd-docs-bot__primary:active {
	background-color: var(--pfd-primary, #480ca8) !important;
	color: #ffffff !important;
	filter: none !important;
	opacity: 1 !important;
	box-shadow: none !important;
	outline: none;
}

/* No `:disabled` override — the Ask button is always interactive and
   keeps the brand colour. Empty / short input now triggers an inline
   error (via Alert) instead of greying the button out. */

/* ---------- Popular questions chip strip -------------------------------- */

.pfd-docs-bot__chips-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
	text-align: left;
}

.pfd-docs-bot__chips-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #1f2937;
	margin-right: 0.25rem;
}

.pfd-docs-bot__chips {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pfd-docs-bot__chip {
	display: inline-flex;
	align-items: center;
	border: 0;
	border-radius: 2px;
	/* background + color come from inline styles in Chat.js — derived from
	   the brand primary_color so the chips stay tinted to whatever the
	   author picks. The hardcoded #edeaff / #8478cd lavender pair lives on
	   only as the fallback for #480CA8 (the default primary). */
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	transition:
		filter 0.15s ease,
		transform 0.05s ease;
	font-family: inherit;
	line-height: 1.3;
}

.pfd-docs-bot__chip:hover:not(:disabled),
.pfd-docs-bot__chip:focus:not(:disabled) {
	/* Inline bg/color stay in effect; just a subtle darken on interaction. */
	filter: brightness(0.95);
	outline: none;
}

.pfd-docs-bot__chip:active:not(:disabled) {
	transform: translateY(1px);
}

.pfd-docs-bot__chip:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Loader (full-bleed, mid-card) ------------------------------- */

.pfd-docs-bot__loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 2rem 0 0.75rem;
	gap: 0.5rem;
}

.pfd-docs-bot__loader-spinner {
	position: relative;
	width: 80px;
	height: 80px;
}

.pfd-docs-bot__loader-track,
.pfd-docs-bot__loader-arc {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-sizing: border-box;
}

.pfd-docs-bot__loader-track {
	border-style: solid;
	border-width: 2px;
	border-color: rgba(72, 12, 168, 0.3);
}

.pfd-docs-bot__loader-arc {
	border-style: solid;
	border-width: 4px;
	border-color: transparent;
	/* border-top-color set inline from primaryColor */
	animation: pfd-docs-bot-spin 0.85s linear infinite;
}

.pfd-docs-bot__loader-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	transform: translate(-50%, -50%);
	animation: pfd-docs-bot-icon-pulse 1.5s ease-in-out infinite;
}

.pfd-docs-bot__loader-phrase {
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
	font-style: italic;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
	max-width: 32rem;
	line-height: 1.5;
}

@keyframes pfd-docs-bot-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes pfd-docs-bot-icon-pulse {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}

/* ---------- Streaming text (under the loader) --------------------------- */

.pfd-docs-bot__streaming {
	margin: 1rem 0 0;
	padding: 1.25rem 1.5rem;
	background: #f5f5fb;
	border-radius: 12px;
	font-size: 1rem;
	line-height: 1.7;
	color: #1f2937;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.pfd-docs-bot__caret {
	display: inline-block;
	width: 8px;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: text-bottom;
	border-radius: 1px;
	animation: pfd-docs-bot-caret 1s steps(1) infinite;
}

@keyframes pfd-docs-bot-caret {
	0%,
	50% {
		opacity: 1;
	}
	51%,
	100% {
		opacity: 0;
	}
}

/* ---------- Answer card ------------------------------------------------- */

.pfd-docs-bot__answer-card {
	margin-top: 1.5rem;
	background: #f6fafe;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.75rem 2rem;
}

.pfd-docs-bot__answer-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.pfd-docs-bot__answer-label {
	font-size: 1.0625rem;
	font-weight: 600;
	color: #2F3F50;
}

.pfd-docs-bot__feedback {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.pfd-docs-bot__thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	/* !important defends against host themes that paint a default
	   box-shadow / border / background on every <button>. */
	border: 0 !important;
	border-radius: 6px;
	background: none !important;
	box-shadow: none !important;
	color: #9ca3af;
	cursor: pointer;
	padding: 0;
	transition: color 0.15s ease;
}

.pfd-docs-bot__thumb svg{
	width: 25px;
	height: 25px;
}

.pfd-docs-bot__thumb:hover,
.pfd-docs-bot__thumb:focus,
.pfd-docs-bot__thumb:focus-visible,
.pfd-docs-bot__thumb:active {
	background: none !important;
	box-shadow: none !important;
	outline: none;
}

.pfd-docs-bot__thumb:hover:not(:disabled) {
	color: #4b5563;
}

.pfd-docs-bot__thumb:disabled {
	cursor: default;
}

/* Body / rendered markdown */

.pfd-docs-bot__answer-body {
	font-size: 1rem;
	line-height: 1.75;
	color: #374151;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.pfd-docs-bot__answer-body :first-child {
	margin-top: 0;
}

.pfd-docs-bot__answer-body :last-child {
	margin-bottom: 0;
}

.pfd-docs-bot__answer-body p {
	margin: 0 0 1rem;
}

.pfd-docs-bot__answer-body ul,
.pfd-docs-bot__answer-body ol {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
}

.pfd-docs-bot__answer-body li {
	margin: 0.25rem 0;
}

.pfd-docs-bot__answer-body h1,
.pfd-docs-bot__answer-body h2,
.pfd-docs-bot__answer-body h3,
.pfd-docs-bot__answer-body h4 {
	margin: 1.25rem 0 0.5rem;
	line-height: 1.3;
	color: #111827;
}

/* Soften `**bold**` markdown — Tailwind's `prose` utility (used by the
   reference docs-bot plugin) overrides browser bold to semibold so
   emphasis sits a step below headings instead of competing with them.
   Mirroring that here keeps our answer card visually in line. */
.pfd-docs-bot__answer-body strong {
	font-weight: 600;
}

.pfd-docs-bot__answer-body code {
	background: rgba(15, 23, 42, 0.06);
	border-radius: 4px;
	padding: 0.05rem 0.35rem;
	font-size: 0.9em;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.pfd-docs-bot__answer-body pre {
	background: #111827;
	color: #f9fafb;
	border-radius: 8px;
	padding: 0.875rem 1rem;
	overflow-x: auto;
	margin: 0 0 1rem;
}

.pfd-docs-bot__answer-body pre code {
	background: transparent;
	color: inherit;
	padding: 0;
}

.pfd-docs-bot__answer-body a {
	color: #480ca8;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 500;
}

.pfd-docs-bot__answer-body blockquote {
	margin: 0 0 1rem;
	padding: 0.5rem 0.85rem;
	border-left: 3px solid rgba(15, 23, 42, 0.15);
	color: #4b5563;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 0 6px 6px 0;
}

.pfd-docs-bot__after-text {
	margin-top: 1rem;
	font-size: 0.9375rem;
	color: #4b5563;
	line-height: 1.65;
}

.pfd-docs-bot__after-text p {
	margin: 0 0 0.5rem;
}

.pfd-docs-bot__support {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
}

.pfd-docs-bot__support a {
	color: inherit;
	text-decoration: underline;
}

/* ---------- Sources ----------------------------------------------------- */

.pfd-docs-bot__sources {
	margin-top: 2rem;
}

.pfd-docs-bot__sources-label {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #111827;
	margin-bottom: 0.75rem;
}

ul.pfd-docs-bot__sources-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.pfd-docs-bot__source {
	margin: 0;
	padding: 0;
}

.pfd-docs-bot__source-link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 0.875rem 1rem;
	color: #1f2937;
	text-decoration: none;
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease;
	font-size: 0.9375rem;
	line-height: 1.4;
}

a.pfd-docs-bot__source-link:hover {
	border-color: #c7c9d1;
	background: #fafafd;
}

.pfd-docs-bot__source-icon {
	flex-shrink: 0;
}

.pfd-docs-bot__source-title {
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
}

/* ---------- Alerts ------------------------------------------------------ */

.pfd-docs-bot__alert {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0 0 1rem;
	padding: 0.875rem 1rem;
	border-radius: 8px;
	font-size: 0.9375rem;
	line-height: 1.5;
	border-width: 1px;
	border-style: solid;
}

.pfd-docs-bot__alert-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.05rem;
}

.pfd-docs-bot__alert-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
}

.pfd-docs-bot__alert-close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: -2px -4px -2px 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	opacity: 0.7;
	cursor: pointer;
	padding: 0;
	transition:
		opacity 0.15s ease,
		background-color 0.15s ease;
}

.pfd-docs-bot__alert-close:hover,
.pfd-docs-bot__alert-close:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.06);
	outline: none;
}

.pfd-docs-bot__alert--error {
	background: #fef2f2;
	color: #991b1b;
	border-color: #fecaca;
}

.pfd-docs-bot__alert--error .pfd-docs-bot__alert-icon {
	color: #ef4444;
}

.pfd-docs-bot__alert--warning {
	background: #fffbeb;
	color: #92400e;
	border-color: #fde68a;
}

.pfd-docs-bot__alert--warning .pfd-docs-bot__alert-icon {
	color: #facc15;
}

.pfd-docs-bot__alert--info {
	background: #eff6ff;
	color: #1e40af;
	border-color: #bfdbfe;
}

.pfd-docs-bot__alert--info .pfd-docs-bot__alert-icon {
	color: #60a5fa;
}

/* ---------- Mobile ------------------------------------------------------ */

/* Tablet and below — first wave of mobile adjustments. */
@media (max-width: 600px) {
	.pfd-docs-bot {
		margin: 1rem auto;
	}

	/* Title — base size already 31px; just trim the chunky bottom margin. */
	.pfd-docs-bot__title {
		margin-bottom: 1.5rem;
	}

	/* Input font shrinks to fit a typed question alongside a narrower
	   Ask button. Padding inherits the base `0 1rem` — the input-row
	   stretches the input vertically via `align-items: stretch`, so the
	   button's 46px min-height (exceeds WCAG 2.5.5 tap target) drives
	   row height while the input fills it. */
	.pfd-docs-bot__input {
		font-size: 0.9375rem;
	}

	.pfd-docs-bot__primary {
		font-size: 1rem;
		padding: 0 1.25rem;
	}

	/* Chips label drops above so the chip row keeps full width. */
	.pfd-docs-bot__chips-label {
		flex: 1 1 100%;
	}

	/* Answer card — tighter padding so body copy doesn't crowd the
	   border on narrow phones. */
	.pfd-docs-bot__answer-card {
		padding: 1.25rem;
	}

	.pfd-docs-bot__answer-label,
	.pfd-docs-bot__sources-label {
		font-size: 1rem;
	}

	/* Like / dislike thumbs become real tap targets (44×44 = WCAG). */
	.pfd-docs-bot__thumb {
		width: 44px;
		height: 44px;
	}

	.pfd-docs-bot__streaming {
		padding: 1rem 1.125rem;
	}

	.pfd-docs-bot__source-link {
		padding: 0.75rem 0.875rem;
	}
}

/* Small phones — sub-480px territory (iPhone SE, narrow Androids). */
@media (max-width: 480px) {
	.pfd-docs-bot__title {
		font-size: 28px;
		margin-bottom: 1.25rem;
	}

	.pfd-docs-bot__answer-card {
		padding: 1rem 0.875rem;
	}

	.pfd-docs-bot__answer-body {
		font-size: 0.9375rem;
		line-height: 1.65;
	}

	/* Loader shrinks so the spinner doesn't dominate the card. */
	.pfd-docs-bot__loader-spinner {
		width: 64px;
		height: 64px;
	}

	.pfd-docs-bot__loader-icon {
		width: 26px;
		height: 26px;
	}

	.pfd-docs-bot__loader-phrase {
		font-size: 0.8125rem;
	}
}