/* ── Assistant page layout ──────────────────────────────────────────────────── */

.assistant-page {
	min-height: 80vh;
	display: flex;
	flex-direction: column;
}
.ast-container {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

@media only screen and (min-width: 768px) {
	.ast-container {
		display: grid;
		/* Thread is capped at ~700px (matching .ast-answer p max-width: 65ch).
		   Any remaining space flows to the products column instead of being
		   wasted as right-margin inside the thread. */
		grid-template-columns: 240px minmax(0, 700px) minmax(280px, 1fr);
		grid-auto-rows: min-content;
		gap: 0 24px;
		padding: 35px;
		align-items: start;
	}
	.ast-empty { grid-column: 1 / -1; }
	.ast-input-bar { grid-column: 2; }
}

@media only screen and (min-width: 1100px) {
	.ast-container {
		grid-template-columns: 280px minmax(0, 720px) minmax(300px, 1fr);
	}
}

/* ── Empty state ───────────────────────────────────────────────────────────── */

.ast-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 60px 20px;
}

.ast-hero h2 {
	font-family: "FuturaEagle", sans-serif;
	text-transform: uppercase;
	font-size: 2em;
	color: var(--color-text-black);
	margin-bottom: 8px;
}

.ast-hero p {
	font-size: 1.1em;
	color: var(--color-text-gray);
	max-width: 500px;
	margin: 0 auto 30px;
}

.ast-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.ast-suggestion {
	background: var(--color-bg-blue-light);
	border: 1px solid var(--color-gray);
	border-radius: 20px;
	padding: 10px 18px;
	font-size: 0.95em;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	font-family: 'Roboto', sans-serif;
}

.ast-suggestion:hover {
	background: var(--color-blue);
	color: var(--color-text-white);
	border-color: var(--color-blue);
}

/* ── Chat area ─────────────────────────────────────────────────────────────── */

.ast-chat {
	flex: 1;
	display: none;
	flex-direction: column;
	gap: 24px;
}

.ast-chat.active {
	display: flex;
}

@media only screen and (min-width: 768px) {
	/* display:contents elevates the chat's children (visual, thread, products)
	   into the parent .ast-container grid, so they share columns with the input bar. */
	.ast-chat.active {
		display: contents;
	}
	.ast-visual   { grid-column: 1; position: sticky; top: 100px; }
	.ast-thread   { grid-column: 2; min-width: 0; }
	.ast-products { grid-column: 3; position: sticky; top: 100px; }

	/* Input bar sticks to the bottom of the viewport so it stays accessible
	   even with a long chat thread above. Column 2 alignment keeps it visually
	   tied to the chat. */
	.ast-input-bar {
		position: sticky;
		bottom: 20px;
		background: var(--color-white, #fff);
		z-index: 2;
		margin-top: 0;
	}
}

/* ── Visual column (image stack + accent squares) ──────────────────────── */

.ast-visual {
	display: none;  /* hidden on mobile */
}

@media only screen and (min-width: 768px) {
	.ast-visual {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

.ast-visual-slot,
.ast-visual-accent {
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.ast-visual-slot {
	background: var(--color-bg-blue-light, #e8eef3);
}

.ast-visual-slot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.ast-visual-slot img.active {
	opacity: 1;
}

/* Decorative accent squares - extend the design language down the column.
   Subtle brand colors so they read as deliberate composition, not empty cells. */
.ast-visual-accent-1 {
	background: var(--color-theme-blue, #3385bd);
}
.ast-visual-accent-2 {
	background: var(--color-bg-blue-light, #e8eef3);
	border: 1px solid var(--color-gray-light, #ddd);
}

.ast-thread {
	flex: 1;
	min-width: 0;
}

.ast-question {
	font-size: 0.9em;
	font-weight: 500;
	color: var(--color-text-gray);
	padding: 0 0 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--color-gray-light);
}

.ast-question::before {
	content: 'Q: ';
	font-weight: 700;
	color: var(--color-blue);
}

.ast-answer {
	font-size: 1em;
	line-height: 1.65;
	color: var(--color-text-black);
	margin-bottom: 32px;
}

.ast-answer p {
	margin: 0 0 12px;
	max-width: 65ch;
}

.ast-answer ul {
	margin: 0 0 12px 20px;
	padding: 0;
	max-width: 65ch;
}

.ast-answer li {
	margin-bottom: 4px;
}

.ast-loading {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.ast-phase {
	font-size: 0.85em;
	color: var(--color-text-gray, #888);
	font-style: italic;
	margin-bottom: 12px;
	transition: opacity 0.15s ease;
}

.ast-error {
	color: #c00;
	font-style: italic;
	margin: 0 0 8px;
}

.ast-retry-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: var(--color-theme-blue, #3385bd);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ast-retry-btn:hover {
	background: #2a6fa0;
}

.ast-retry-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Product cards ─────────────────────────────────────────────────────────── */

.ast-products {
	width: 100%;
}

@media only screen and (min-width: 768px) {
	.ast-products {
		width: 320px;
		flex-shrink: 0;
	}
}

.ast-products-title {
	font-family: "FuturaEagle", sans-serif;
	text-transform: uppercase;
	font-size: 0.9em;
	letter-spacing: 1px;
	color: var(--color-text-gray);
	margin-bottom: 12px;
}

.ast-product-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ast-product-list .card {
	border: 1px solid var(--color-gray-light);
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s;
}

.ast-product-list .card:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.ast-product-list .card a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	padding: 8px;
	gap: 12px;
}

.ast-product-list .card .media {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--color-gray-light);
}

.ast-product-list .card .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ast-product-list .card .meta {
	flex: 1;
	min-width: 0;
}

.ast-product-list .card .name {
	font-weight: bold;
	font-size: 0.95em;
	color: var(--color-blue-dark);
}

.ast-product-list .card .desc {
	font-size: 0.85em;
	color: var(--color-text-gray);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Family links (fallback when no specific products) ────────────────────── */

.ast-link-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ast-family-link {
	display: block;
	padding: 12px 16px;
	border: 1px solid var(--color-gray-light);
	border-radius: 8px;
	text-decoration: none;
	font-weight: bold;
	color: var(--color-blue-dark);
	transition: background 0.2s, box-shadow 0.2s;
}

.ast-family-link:hover {
	background: var(--color-bg-blue-light);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Input bar ─────────────────────────────────────────────────────────────── */

.ast-input-bar {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--color-gray-light);
}

.ast-input-bar form {
	display: flex;
	max-width: 700px;
}

.ast-input-bar input {
	flex: 1;
	font-size: 1.1em;
	padding: 14px 16px;
	border: 1px solid var(--color-gray);
	border-right: none;
	border-radius: 6px 0 0 6px;
	font-family: 'Roboto', sans-serif;
	background: var(--color-bg-blue-light);
	outline: none;
}

.ast-input-bar input:focus {
	border-color: var(--color-blue);
}

.ast-input-bar button {
	background: var(--color-blue);
	color: var(--color-text-white);
	border: none;
	padding: 0 24px;
	font-family: "FuturaEagle", sans-serif;
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0 6px 6px 0;
	transition: background-color 0.2s;
}

.ast-input-bar button:hover {
	background: var(--color-blue-dark);
}

/* ── Loading animation ─────────────────────────────────────────────────────── */

.lds-ellipsis,
.lds-ellipsis div {
	box-sizing: border-box;
}

.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 20px;
	color: var(--color-gray-dark);
}

.lds-ellipsis div {
	position: absolute;
	top: 3px;
	width: 13.33px;
	height: 13.33px;
	border-radius: 50%;
	background: currentColor;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) { left: 8px;  animation: lds-ellipsis1 0.6s infinite; }
.lds-ellipsis div:nth-child(2) { left: 8px;  animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; }
.lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; }

@keyframes lds-ellipsis1 {
	0%   { transform: scale(0); }
	100% { transform: scale(1); }
}
@keyframes lds-ellipsis2 {
	0%   { transform: translate(0, 0); }
	100% { transform: translate(24px, 0); }
}
@keyframes lds-ellipsis3 {
	0%   { transform: scale(1); }
	100% { transform: scale(0); }
}

/* ── Fade-in for product cards ─────────────────────────────────────────────── */

.ast-fade-in {
	animation: astFadeIn 0.3s ease-in;
}

@keyframes astFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media only screen and (max-width: 480px) {
	.ast-hero h2 {
		font-size: 1.5em;
	}

	.ast-suggestions {
		flex-direction: column;
		align-items: center;
	}

	.ast-question {
		font-size: 0.85em;
	}
}