/* =========================================================
   AI Search page — styling for the AI Product Recommendation
   Agent widget (chat bar, conversation, product results)
   Matches the site palette:
   #64a3c2 / #2c7599 (blues) - #faad1e (accent gold)
   Fonts: 'Cormorant Garamond' (headings), 'Open Sans' (body)

   Colors below use var(--ai-color-xxx, <original hex>) so the Admin
   Panel's "Customize Widget" page (Search Assistant) can override them per-
   site - the custom properties are set inline on .ai-search-wrap by
   _search_by_agent.cfm. Nothing changes until someone edits Customize
   Widget, since the fallback hex always matches the original design.
   ========================================================= */

.ai-subtitle{
	color:#666;
	font-size:14px;
	margin:0 0 14px;
}

.ai-search-wrap{
	max-width:1300px;
	margin:0 auto 60px;
	display:flex;
	align-items:flex-start;
	gap:24px;
}

/* ============================================================
   Left column - "AI Search" widget panel
   Styled like the Shop Assistant / Appointments floating widgets
   (branded gradient header, rounded card, shadow), but positioned
   with position:sticky instead of position:fixed since it lives
   inline in this page's own 30/70 layout - sticky keeps it "fixed"
   in view while the product results column scrolls past it,
   without ever overlapping the results the way a truly fixed
   floating widget would.
   ============================================================ */
.ai-search-panel{
	flex:0 0 30%;
	max-width:360px;
	min-width:280px;
	position:sticky;
	top:20px;
	align-self:flex-start;
	max-height:calc(100vh - 40px);
	background:var(--ai-color-surface, #fff);
	border:1px solid #e7edf0;
	border-radius:16px;
	box-shadow:0 12px 40px rgba(0,0,0,.12);
	overflow:hidden;
	display:flex;
	flex-direction:column;
}

.ai-search-panel-header{
	background:linear-gradient(135deg, var(--ai-color-primary, #2c7599) 0%, var(--ai-color-primary-light, #64a3c2) 100%);
	color:#fff;
	padding:14px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	flex:0 0 auto;
}

.ai-search-panel-title{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}

.ai-search-avatar{
	flex:0 0 38px;
	width:38px;
	height:38px;
	border-radius:50%;
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:17px;
	overflow:hidden;
}

.ai-search-avatar i,
.ai-search-avatar .svg-inline--fa{
	color:var(--ai-color-primary, #2c7599);
}

.ai-search-name{
	font-family:'Cormorant Garamond', Georgia, serif;
	font-size:17px;
	font-weight:700;
	line-height:1.2;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.ai-search-status{
	font-size:.72rem;
	opacity:.85;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.ai-search-header-actions{
	display:flex;
	align-items:center;
	gap:4px;
	flex:0 0 auto;
}

.ai-icon-btn{
	width:32px;
	height:32px;
	border:none;
	background:transparent;
	color:#fff;
	border-radius:50%;
	cursor:pointer;
	font-size:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background 150ms ease-in-out;
}

.ai-icon-btn:hover{
	background:rgba(255,255,255,.2);
}

.ai-icon-btn .svg-inline--fa{
	color:#fff;
}

/* Collapse/expand toggle - only shown on mobile (see media query below);
   the sticky panel is always visible on desktop, so there's nothing to
   collapse there. */
.ai-search-toggle-btn{
	display:none;
	flex:0 0 32px;
	width:32px;
	height:32px;
	border-radius:50%;
	border:none;
	background:rgba(255,255,255,.18);
	color:#fff;
	cursor:pointer;
	align-items:center;
	justify-content:center;
	font-size:14px;
	transition:transform 200ms ease-in-out, background 160ms ease-in-out;
}

.ai-search-toggle-btn:hover{
	background:rgba(255,255,255,.3);
}

.ai-search-toggle-btn .svg-inline--fa{
	color:#fff;
}

/* rotate the chevron when collapsed (see aria-expanded toggling in ai_search.js) */
.ai-search-toggle-btn[aria-expanded="false"] i,
.ai-search-toggle-btn[aria-expanded="false"] .svg-inline--fa{
	transform:rotate(180deg);
}

.ai-search-panel-body{
	padding:16px;
	overflow-y:auto;
	flex:1 1 auto;
	min-height:0;
}

/* Wraps the scrollable body + the pinned input bar together, so the
   collapse/expand toggle (mobile only) can hide both at once while leaving
   the header visible - see ai_search.js. */
.ai-search-panel-content{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	min-height:0;
	overflow:hidden;
}

.ai-search-panel.ai-search-collapsed .ai-search-panel-content{
	display:none;
}

/* Right column - product results */
.ai-results-panel{
	flex:1 1 auto;
	min-width:0;
}

.ai-results-panel .ai-product-results{
	margin-top:0;
}

/* ---------- Chat bar ---------- */
.ai-chat-bar{
	display:flex;
	align-items:center;
	background:#fff;
	border:1px solid #dee2e6;
	border-radius:30px;
	padding:6px 6px 6px 22px;
	box-shadow:0 2px 10px rgba(0,0,0,.06);
	flex:0 0 auto;
	margin:0 16px 16px;
}

.ai-chat-bar input[type="text"]{
	flex:1;
	border:none;
	outline:none;
	font-size:16px;
	padding:10px 6px;
	background:transparent;
	font-family:'Open Sans', sans-serif;
}

.ai-chat-bar button{
	border:none;
	cursor:pointer;
	width:42px;
	height:42px;
	border-radius:50%;
	flex:0 0 42px;
	font-size:17px;
	line-height:1;
	margin-left:6px;
	padding:0;
	text-transform:none;
	box-shadow:0 1px 4px rgba(0,0,0,.18);
	-webkit-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.ai-chat-bar button.ai-send-btn{
	background:var(--ai-color-primary, #2c7599);
	color:#fff;
}

.ai-chat-bar button.ai-send-btn:hover{
	background:#1f5a78;
}

.ai-chat-bar button.ai-send-btn:disabled{
	background:#b7cfdd;
	color:#fff;
	box-shadow:none;
	cursor:not-allowed;
}

/* The site's Font Awesome kit renders icons as inline <svg class="svg-inline--fa">
   with a global rule hardcoding every icon to var(--ai-color-primary-light, #64a3c2). A direct rule on the SVG
   itself beats inherited color from the button, so it needs its own override. */
.ai-chat-bar button .svg-inline--fa{
	color:#ffffff;
}

.ai-chat-bar.is-loading .ai-send-btn i{
	-webkit-animation: ai-spin 900ms linear infinite;
	animation: ai-spin 900ms linear infinite;
}

@-webkit-keyframes ai-spin{ from{-webkit-transform:rotate(0);} to{-webkit-transform:rotate(360deg);} }
@keyframes ai-spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }

/* ---------- Conversation ---------- */
.ai-chat-messages{
	margin-top:22px;
	padding-right:4px;
}

.ai-chat-messages:empty{
	display:none;
}

.ai-msg{
	display:flex;
	margin-bottom:14px;
	-webkit-animation: ai-fade-in 250ms ease-in-out;
	animation: ai-fade-in 250ms ease-in-out;
}

@keyframes ai-fade-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.ai-msg .ai-bubble{
	max-width:75%;
	padding:10px 16px;
	line-height:150%;
	font-size:15px;
	border-radius:16px;
}

.ai-msg.user{
	justify-content:flex-end;
}

.ai-msg.user .ai-bubble{
	background:var(--ai-color-primary-light, #64a3c2);
	color:#fff;
	border-bottom-right-radius:4px;
}

.ai-msg.agent{
	justify-content:flex-start;
}

.ai-msg.agent .ai-bubble{
	background:#f1f1f1;
	color:#333;
	border-bottom-left-radius:4px;
}

.ai-msg.agent .ai-bubble i.fa-magic{
	color:var(--ai-color-accent, #faad1e);
	margin-right:6px;
}

.ai-msg.error .ai-bubble{
	background:#fbeaea;
	color:#a94442;
	border:1px solid #f0c4c4;
}

/* typing indicator */
.ai-typing .ai-bubble{
	background:#f1f1f1;
	padding:14px 18px;
}

.ai-typing span{
	display:inline-block;
	width:6px;
	height:6px;
	margin-right:3px;
	border-radius:50%;
	background:#999;
	-webkit-animation: ai-bounce 1.2s infinite ease-in-out both;
	animation: ai-bounce 1.2s infinite ease-in-out both;
}
.ai-typing span:nth-child(2){ animation-delay:.15s; }
.ai-typing span:nth-child(3){ animation-delay:.3s; }

@keyframes ai-bounce{
	0%, 80%, 100% { transform: scale(0); }
	40% { transform: scale(1); }
}

/* ---------- Product results ---------- */
.ai-product-results{
	margin-top:30px;
}

.ai-product-results h2{
	font-size:20px;
	margin-bottom:20px;
}

.ai-results-empty{
	text-align:center;
	color:#888;
	padding:30px 10px;
	font-size:15px;
}

.ai-results-empty a{
	color:var(--ai-color-primary, #2c7599);
	font-weight:600;
	text-decoration:underline;
}

.ai-results-empty a:hover{
	color:var(--ai-color-accent, #faad1e);
}

.ai-results-loading{
	text-align:center;
	padding:30px 10px;
	color:var(--ai-color-primary-light, #64a3c2);
}

/* re-use the site's ul.product-list card look inside the AI results */
.ai-product-results ul.product-list li{
	margin-bottom:10px;
}

/* ---------- Suggestion chips (starter prompts) ---------- */
.ai-suggestions{
	text-align:center;
	margin:16px 0 0;
}

.ai-suggestions span.ai-chip{
	display:inline-block;
	background:#fff;
	border:1px solid #dee2e6;
	color:#555;
	font-size:13px;
	padding:6px 14px;
	border-radius:20px;
	margin:4px;
	cursor:pointer;
	-webkit-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.ai-suggestions span.ai-chip:hover{
	background:var(--ai-color-primary-light, #64a3c2);
	color:#fff;
	border-color:var(--ai-color-primary-light, #64a3c2);
}

@media (max-width:767px){
	.ai-msg .ai-bubble{ max-width:88%; }
	.ai-chat-bar{ padding-left:14px; }

	/* Single column: search widget on top (collapsible), results below. */
	.ai-search-wrap{
		flex-direction:column;
		gap:16px;
	}

	.ai-search-panel{
		position:static;
		top:auto;
		max-height:none;
		max-width:none;
		min-width:0;
		width:100%;
		flex:1 1 auto;
	}

	.ai-search-panel-content{
		max-height:calc(100vh - 220px);
	}

	/* Collapse/expand button only makes sense once the widget can no longer
	   stay pinned via position:sticky (see above) - on desktop it's hidden
	   (display:none in the base rules). */
	.ai-search-toggle-btn{
		display:flex;
	}
}