/*
 * DrHerbo AI chat — uses the theme's own CSS custom properties (--df-*)
 * so it automatically matches the site's brand tokens without duplicating
 * the color/type system here. Falls back to sane literals only if the
 * theme's tokens aren't present (e.g. a different theme is active).
 */

.df-ai-chat{ display: flex; flex-direction: column; gap: 1rem; }
.df-ai-chat__intro h3{ margin-bottom: 0.75rem; }
.df-ai-chat__prompts{ display: flex; flex-wrap: wrap; gap: 0.5rem; }

.df-ai-chat__messages{
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-height: 360px;
	min-height: 80px;
	overflow-y: auto;
	padding: 0.25rem;
}
@media (min-width: 768px){
	.df-ai-chat__messages{ max-height: 440px; }
}

.df-ai-chat__message{
	max-width: 85%;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	font-size: var(--df-fs-sm, 0.9375rem);
	line-height: 1.5;
	overflow-wrap: break-word;
}
.df-ai-chat__message--user{
	align-self: flex-end;
	background: var(--df-primary, #025043);
	color: var(--df-paper, #FBF8F2);
	border-bottom-right-radius: 2px;
}
.df-ai-chat__message--assistant{
	align-self: flex-start;
	background: rgba(251,248,242,0.12);
	color: var(--df-paper, #FBF8F2);
	border-bottom-left-radius: 2px;
}
.df-ai-chat__message--error{
	align-self: center;
	background: rgba(165,64,44,0.15);
	color: #E8B8AE;
	font-size: var(--df-fs-xs, 0.8125rem);
	text-align: center;
}

.df-ai-chat__status{
	min-height: 1.25rem;
	font-size: var(--df-fs-xs, 0.8125rem);
	color: rgba(251,248,242,0.7);
}
.df-ai-chat__status[data-state="loading"]::before{
	content: "";
	display: inline-block;
	width: 12px; height: 12px;
	border-radius: 50%;
	border: 2px solid rgba(251,248,242,0.3);
	border-top-color: var(--df-paper, #FBF8F2);
	animation: drherbo-ai-spin 800ms linear infinite;
	margin-right: 0.5rem;
	vertical-align: middle;
}
@keyframes drherbo-ai-spin{ to{ transform: rotate(360deg); } }

.df-ai-chat__form{ margin-top: 0; }

.df-ai-chat__controls{ display: flex; justify-content: flex-end; }
.df-ai-chat__control{
	background: none;
	border: none;
	color: rgba(251,248,242,0.6);
	font-size: var(--df-fs-xs, 0.8125rem);
	text-decoration: underline;
	padding: 0.4rem;
	min-height: 36px;
}

.df-ai-chat__products{
	display: grid;
	grid-template-columns: minmax(0,1fr);
	gap: 0.75rem;
}
@media (min-width: 560px){
	.df-ai-chat__products{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.df-ai-chat__product-card{
	display: flex;
	gap: 0.75rem;
	background: var(--df-paper, #FBF8F2);
	border-radius: 8px;
	padding: 0.75rem;
	min-width: 0;
}
.df-ai-chat__product-card img{
	width: 64px; height: 64px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}
.df-ai-chat__product-body{ min-width: 0; flex: 1; }
.df-ai-chat__product-body h4{
	font-size: var(--df-fs-sm, 0.9375rem);
	color: var(--df-forest, #24312A);
	margin: 0 0 0.25rem;
	overflow-wrap: break-word;
}
.df-ai-chat__product-price{ font-size: var(--df-fs-sm, 0.9375rem); color: var(--df-forest, #24312A); margin-bottom: 0.4rem; }
.df-ai-chat__why-title{ font-size: var(--df-fs-xs, 0.8125rem); font-weight: 600; color: var(--df-primary, #025043); margin: 0.4rem 0 0.2rem; }
.df-ai-chat__product-body ul{ margin: 0 0 0.5rem; padding-left: 1.1rem; font-size: var(--df-fs-xs, 0.8125rem); color: var(--df-stone, #7B7568); }
.df-ai-chat__product-actions{ display: flex; gap: 0.5rem; flex-wrap: wrap; }

.df-ai-widget--disabled{ text-align: center; padding: 2rem; }

/* Mobile: full-width, comfortable touch targets — inherits the widget's
   existing mobile-first padding from the theme's .df-ai-widget rules. */
@media (max-width: 479px){
	.df-ai-chat__form{ flex-direction: column; }
	.df-ai-chat__form input,
	.df-ai-chat__form button{ width: 100%; }
	.df-ai-chat__product-actions .df-btn{ flex: 1 1 auto; }
}