/*
 * XM Textiles Assistant — a secondary catalog search.
 *
 * Design intent: a search field that expands inline into a plain answer.
 * NOT a chat. No bubbles, no avatars, no messaging skin. No internal scroll
 * container — the answer renders at its natural height and the page scrolls as
 * one. Nothing scrolls programmatically; only the user's own input scrolls.
 *
 * Namespaced under .xmt-search so nothing collides with the legacy askbot-*
 * CSS snippet still present on the site.
 */

.xmt-search {
	--xmt-green: #5f9a10;
	--xmt-green-dark: #527f12;
	--xmt-green-soft: rgba(95, 154, 16, 0.10);
	--xmt-ink: #1f2630;
	--xmt-muted: #677181;
	--xmt-line: #e4e7ea;
	--xmt-line-strong: #d3d8dd;

	width: 100%;
	max-width: 1180px;
	margin: 44px auto 60px;
	box-sizing: border-box;
	color: var(--xmt-ink);
	font-size: 16px;
	line-height: 1.6;
}

.xmt-search *,
.xmt-search *::before,
.xmt-search *::after {
	box-sizing: border-box;
}

/* ---- Search field ---- */
.xmt-search-box {
	display: flex;
	align-items: stretch;
	border: 1.5px solid var(--xmt-line-strong);
	border-radius: 14px;
	background: #fff;
	/* No overflow:hidden — the pinned-state fade renders above the box edge.
	   The submit button rounds its own outer corners instead. */
	transition: border-color 0.15s, box-shadow 0.15s;
}

.xmt-search-box:focus-within {
	border-color: var(--xmt-green);
	box-shadow: 0 0 0 3px var(--xmt-green-soft);
}

.xmt-search-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 18px;
	color: #9aa4b0;
}

.xmt-search-icon svg { width: 20px; height: 20px; display: block; }

.xmt-search-input {
	flex: 1 1 auto;
	border: none;
	outline: none;
	resize: none;
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	max-height: 168px;
	padding: 17px 16px;
	background: transparent;
	color: var(--xmt-ink);
}

.xmt-search-input:focus { outline: none; box-shadow: none; }
.xmt-search-input::placeholder { color: #9aa4b0; }

.xmt-search-submit {
	flex: 0 0 auto;
	align-self: stretch;
	width: 60px;
	border: none;
	border-radius: 0 12px 12px 0;
	background: var(--xmt-green);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
}

.xmt-search-submit:hover { background: var(--xmt-green-dark); }
.xmt-search-submit:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.xmt-search-submit svg { width: 19px; height: 19px; display: block; }
.xmt-search-submit-label { display: none; }

/* Loading spinner (replaces the old red stop button) */
.xmt-search-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: xmt-spin 0.7s linear infinite;
}

@keyframes xmt-spin { to { transform: rotate(360deg); } }

/* ---- Restore bar (previous conversation found after a reload) ---- */
.xmt-restore {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-top: 14px;
	padding: 10px 16px;
	border: 1px solid var(--xmt-line);
	border-radius: 10px;
	background: #fafbfb;
	font-size: 13.5px;
	color: var(--xmt-muted);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.xmt-restore:hover {
	background: var(--xmt-green-soft);
	border-color: var(--xmt-green);
}

.xmt-restore button {
	border: none;
	background: none;
	padding: 2px 4px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.xmt-restore-q { color: var(--xmt-ink); font-style: italic; }

.xmt-restore-btn { color: var(--xmt-green-dark); text-decoration: underline; }
.xmt-restore-btn:hover { text-decoration: none; }
.xmt-restore-dismiss { color: var(--xmt-muted); }
.xmt-restore-dismiss:hover { color: var(--xmt-ink); }

/* ---- Suggestions (shown before a search) ---- */
.xmt-search-suggestions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 18px 2px 0;
}

.xmt-search-suggestions[hidden] { display: none; }

.xmt-search-try {
	font-size: 13.5px;
	color: var(--xmt-muted);
	font-weight: 500;
}

/* NOTE: not named .xmt-chip — the front-page hero defines its own .xmt-chip
   (product card) and the classes collided. */
.xmt-search-chip {
	border: 1px solid var(--xmt-line);
	background: #fafbfb;
	border-radius: 999px;
	padding: 8px 15px;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.3;
	color: #38414d;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.xmt-search-chip:hover {
	background: var(--xmt-green-soft);
	border-color: var(--xmt-green);
	color: var(--xmt-green-dark);
}

/* ---- Results (stacked turns, newest on top) ---- */
.xmt-search-results {
	margin-top: 20px;
}

.xmt-search-results[hidden] { display: none; }

.xmt-search-resultsbar {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--xmt-line);
}

.xmt-search-hint {
	font-size: 13px;
	color: var(--xmt-muted);
}

.xmt-search-clear {
	border: none;
	background: none;
	color: var(--xmt-muted);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	padding: 2px 4px;
	text-decoration: underline;
}

.xmt-search-clear:hover { color: var(--xmt-green-dark); }

.xmt-turn {
	padding: 20px 0;
	border-bottom: 1px solid var(--xmt-line);
}

.xmt-turn:last-child { border-bottom: none; }

.xmt-turn-q {
	font-weight: 600;
	font-size: 17px;
	line-height: 1.4;
	color: var(--xmt-ink);
	margin-bottom: 12px;
	padding-left: 13px;
	border-left: 3px solid var(--xmt-green);
}

/* Collapsed turns: a recognizable card — the question plus a one-line
   answer preview with that turn's fabric thumbnails. Click to re-expand;
   the question line of an expanded turn collapses it again. */
.xmt-turn.is-collapsible .xmt-turn-q { cursor: pointer; }

.xmt-turn.is-collapsible .xmt-turn-q::after {
	content: " –";
	color: var(--xmt-green-dark);
	font-weight: 600;
}

.xmt-turn.is-collapsed .xmt-turn-q::after { content: " +"; }

.xmt-turn.is-collapsed { padding: 16px 0; }
.xmt-turn.is-collapsed > .xmt-md,
.xmt-turn.is-collapsed .xmt-search-cta { display: none; }

.xmt-turn.is-collapsed .xmt-turn-q {
	margin-bottom: 7px;
	border-left-color: var(--xmt-line-strong);
}

.xmt-turn.is-collapsed:hover .xmt-turn-q {
	border-left-color: var(--xmt-green);
}

.xmt-turn-preview {
	display: none;
	align-items: center;
	gap: 7px;
	padding-left: 16px;
	color: var(--xmt-muted);
	font-size: 13.5px;
	cursor: pointer;
	min-width: 0;
}

.xmt-turn.is-collapsed .xmt-turn-preview { display: flex; }

.xmt-turn-preview .xmt-prod-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	object-fit: cover;
	border: 1px solid var(--xmt-line);
	background: #fff;
}

.xmt-turn-preview-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---- Markdown answer body ---- */
.xmt-md { font-size: 16px; }
.xmt-md > *:first-child { margin-top: 0; }
.xmt-md > *:last-child { margin-bottom: 0; }
.xmt-md p { margin: 0 0 12px; }
.xmt-md h1, .xmt-md h2, .xmt-md h3, .xmt-md h4 {
	margin: 20px 0 8px;
	line-height: 1.3;
	font-weight: 600;
}
.xmt-md h1 { font-size: 1.2em; }
.xmt-md h2 { font-size: 1.12em; }
.xmt-md h3 { font-size: 1.04em; }
.xmt-md h4 { font-size: 1em; }
.xmt-md ul, .xmt-md ol { margin: 0 0 12px; padding-left: 22px; }
.xmt-md li { margin: 4px 0; }
.xmt-md a { color: var(--xmt-green-dark); font-weight: 500; text-decoration: underline; }
.xmt-md a:hover { text-decoration: none; }
.xmt-md strong { font-weight: 600; }
.xmt-md code {
	background: rgba(16, 24, 40, 0.06);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 0.9em;
}
.xmt-md pre {
	background: rgba(16, 24, 40, 0.05);
	padding: 12px 14px;
	border-radius: 8px;
	overflow-x: auto;
	margin: 0 0 12px;
}
.xmt-md pre code { background: none; padding: 0; }
.xmt-md blockquote {
	margin: 0 0 12px;
	padding-left: 14px;
	border-left: 3px solid var(--xmt-line-strong);
	color: var(--xmt-muted);
}
.xmt-md table {
	border-collapse: collapse;
	margin: 0 0 12px;
	font-size: 0.94em;
	display: block;
	overflow-x: auto;
}
.xmt-md th, .xmt-md td {
	border: 1px solid var(--xmt-line);
	padding: 7px 11px;
	text-align: left;
}
.xmt-md th { background: #f7f8f9; }
.xmt-md hr { border: none; border-top: 1px solid var(--xmt-line); margin: 16px 0; }

/* ---- Product link decoration (icon + e-shop link) ---- */
.xmt-md .xmt-prod-icon {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	object-fit: cover;
	display: inline-block;
	vertical-align: -5px;
	margin-right: 6px;
	border: 1px solid var(--xmt-line);
	background: #fff;
}

.xmt-md a.xmt-prod-eshop {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 9px;
	border: 1px solid var(--xmt-green);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--xmt-green-dark);
	text-decoration: none;
	white-space: nowrap;
	vertical-align: 1px;
	transition: background 0.15s, color 0.15s;
}

.xmt-md a.xmt-prod-eshop::after { content: " \2192"; }

.xmt-md a.xmt-prod-eshop:hover {
	background: var(--xmt-green);
	color: #fff;
	text-decoration: none;
}

/* Streaming caret */
.xmt-md.is-streaming > *:last-child::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 1.05em;
	margin-left: 2px;
	vertical-align: text-bottom;
	background: var(--xmt-green);
	border-radius: 1px;
	animation: xmt-blink 1s steps(2, start) infinite;
}

@keyframes xmt-blink { 50% { opacity: 0; } }

/* Typing indicator (before the first token) */
.xmt-typing {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 4px 0;
}

.xmt-typing span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--xmt-green);
	opacity: 0.45;
	animation: xmt-bounce 1.2s infinite ease-in-out;
}

.xmt-typing span:nth-child(2) { animation-delay: 0.18s; }
.xmt-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes xmt-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
	40% { transform: translateY(-4px); opacity: 1; }
}

/* Notice line */
.xmt-md-notice {
	font-size: 13px;
	color: var(--xmt-muted);
	margin-top: 10px;
}

.xmt-md-notice.error { color: #b42318; }

/* ---- Call to action (after an answer) ---- */
.xmt-search-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--xmt-line);
}

.xmt-search-cta[hidden] { display: none; }

.xmt-search-cta a {
	color: var(--xmt-green-dark);
	font-weight: 500;
	font-size: 14.5px;
	text-decoration: none;
}

.xmt-search-cta a:hover { text-decoration: underline; }

/* ---- Conversation layout: box below the turns, pinned while reading ----
   The box sticks to the viewport bottom while the conversation extends past
   it and docks back into the flow once you scroll to the end. The sentinel
   marks the box's natural position; is-pinned is set while it's off-screen. */
.xmt-search.is-conversing > .xmt-search-box {
	margin-top: 22px;
	position: sticky;
	bottom: 12px;
	z-index: 5;
}

.xmt-search-sentinel { height: 1px; }

/* The pinned box floats over scrolling content: an all-around shadow (above
   AND below) does the lifting. No white fade — gradients hard-coded to a
   background color halo on non-white sections. */
.xmt-search.is-pinned > .xmt-search-box {
	box-shadow:
		0 -10px 28px rgba(16, 24, 40, 0.10),
		0 12px 32px rgba(16, 24, 40, 0.18);
}

/* ---- Front-page embed: match the page's 1280px Kadence row width ---- */
.xmt-assistant-home {
	max-width: 1280px;
	margin: 40px auto 48px;
}

.xmt-assistant-home .xmt-search {
	max-width: none;
	margin: 0;
}

/* The page's own p.header-first ships padding-top:40px and
   margin-bottom:-20px with !important (its rows absorb that); neutralize
   both or the box overlaps the title. */
.xmt-assistant-home .xmt-assistant-home-title {
	padding-top: 0 !important;
	padding-left: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 24px !important;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.xmt-search-submit { padding: 0; min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.xmt-typing span,
	.xmt-md.is-streaming > *:last-child::after { animation: none; }
}