/**
 * WooCommerce AI Sales Agent — chat widget styles.
 * Scoped under #wcai-root; brand color via CSS custom properties.
 */

:root {
	--wcai-brand: #7c3aed;
	--wcai-brand-dark: #6d28d9;
	--wcai-surface: #ffffff;
	--wcai-text: #1f2937;
	--wcai-muted: #6b7280;
	--wcai-border: #e5e7eb;
	--wcai-user-bg: var(--wcai-brand);
	--wcai-bot-bg: #f3f4f6;
}

#wcai-root {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: var(--wcai-text);
}

/* Launcher ---------------------------------------------------------- */

#wcai-root .wcai-launcher {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	background: var(--wcai-brand);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease, background 0.15s ease;
}

#wcai-root .wcai-launcher:hover {
	transform: scale(1.06);
	background: var(--wcai-brand-dark);
}

#wcai-root .wcai-launcher.wcai-open svg {
	transform: rotate(180deg) scale(0.9);
}

/* Panel ------------------------------------------------------------- */

#wcai-root .wcai-panel {
	position: absolute;
	bottom: 76px;
	right: 0;
	width: 380px;
	max-width: calc(100vw - 40px);
	height: 560px;
	max-height: calc(100vh - 120px);
	background: var(--wcai-surface);
	border-radius: 16px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: wcai-in 0.18s ease-out;
}

@keyframes wcai-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

#wcai-root .wcai-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--wcai-brand), var(--wcai-brand-dark));
	color: #fff;
	flex-shrink: 0;
}

#wcai-root .wcai-head-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

#wcai-root .wcai-title {
	font-size: 15px;
	line-height: 1.2;
}

#wcai-root .wcai-subtitle {
	font-size: 12px;
	opacity: 0.85;
}

#wcai-root .wcai-lang {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 4px 6px;
	font-size: 12px;
	max-width: 96px;
	cursor: pointer;
}

#wcai-root .wcai-lang option {
	color: var(--wcai-text);
}

#wcai-root .wcai-close {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}

/* Escalation banner -------------------------------------------------- */

#wcai-root .wcai-banner {
	flex-shrink: 0;
	background: #fff7ed;
	color: #9a3412;
	border-bottom: 1px solid #fed7aa;
	padding: 8px 14px;
	font-size: 13px;
	text-align: center;
}

/* Messages ----------------------------------------------------------- */

#wcai-root .wcai-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fafafa;
}

#wcai-root .wcai-msg {
	max-width: 82%;
	padding: 10px 14px;
	border-radius: 14px;
	line-height: 1.45;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

#wcai-root .wcai-msg a {
	color: inherit;
	text-decoration: underline;
}

#wcai-root .wcai-user {
	align-self: flex-end;
	background: var(--wcai-user-bg);
	color: #fff;
	border-bottom-right-radius: 4px;
}

#wcai-root .wcai-assistant {
	align-self: flex-start;
	background: var(--wcai-bot-bg);
	border-bottom-left-radius: 4px;
}

#wcai-root .wcai-human {
	align-self: flex-start;
	background: #e0f2fe;
	color: #075985;
	border-bottom-left-radius: 4px;
}

/* Typing indicator --------------------------------------------------- */

#wcai-root .wcai-typing {
	display: flex;
	gap: 4px;
	padding: 4px 14px 10px;
	background: #fafafa;
}

#wcai-root .wcai-typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wcai-muted);
	animation: wcai-blink 1.2s infinite ease-in-out;
}

#wcai-root .wcai-typing span:nth-child(2) { animation-delay: 0.2s; }
#wcai-root .wcai-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wcai-blink {
	0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-3px); }
}

/* Product cards ------------------------------------------------------ */

#wcai-root .wcai-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 88%;
}

#wcai-root .wcai-card {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--wcai-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#wcai-root .wcai-card img,
#wcai-root .wcai-card-noimg {
	width: 84px;
	height: 84px;
	object-fit: cover;
	background: #f3f4f6;
	flex-shrink: 0;
}

#wcai-root .wcai-card-body {
	flex: 1;
	min-width: 140px;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

#wcai-root .wcai-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--wcai-text);
	text-decoration: none !important;
	line-height: 1.3;
}

#wcai-root .wcai-card-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--wcai-brand-dark);
}

#wcai-root .wcai-card-stock {
	font-size: 11px;
	color: #15803d;
}

#wcai-root .wcai-card-stock.wcai-oos {
	color: #b91c1c;
}

#wcai-root .wcai-card-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	flex-basis: 100%;
}

#wcai-root .wcai-btn {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	border: none;
	text-align: center;
}

#wcai-root .wcai-btn-view {
	background: #f3f4f6;
	color: var(--wcai-text);
}

#wcai-root .wcai-btn-view:hover {
	background: #e5e7eb;
}

#wcai-root .wcai-btn-cart {
	background: var(--wcai-brand);
	color: #fff;
}

#wcai-root .wcai-btn-cart:hover {
	background: var(--wcai-brand-dark);
}

#wcai-root .wcai-btn-cart.wcai-added {
	background: #15803d;
}

#wcai-root .wcai-btn-cart[disabled] {
	opacity: 0.6;
	cursor: wait;
}

/* Input row ----------------------------------------------------------- */

#wcai-root .wcai-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--wcai-border);
	background: #fff;
	flex-shrink: 0;
}

#wcai-root .wcai-input {
	flex: 1;
	resize: none;
	border: 1px solid var(--wcai-border);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	max-height: 96px;
	outline: none;
}

#wcai-root .wcai-input:focus {
	border-color: var(--wcai-brand);
}

#wcai-root .wcai-send {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: none;
	background: var(--wcai-brand);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

#wcai-root .wcai-send:hover {
	background: var(--wcai-brand-dark);
}

#wcai-root .wcai-send[disabled] {
	opacity: 0.5;
	cursor: wait;
}

/* Footer -------------------------------------------------------------- */

#wcai-root .wcai-footer {
	padding: 6px 14px;
	text-align: center;
	background: #fff;
	border-top: 1px solid var(--wcai-border);
	flex-shrink: 0;
}

#wcai-root .wcai-footer a {
	font-size: 11px;
	color: var(--wcai-muted);
	text-decoration: underline;
}

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

@media (max-width: 480px) {
	#wcai-root {
		bottom: 14px;
		right: 14px;
	}

	#wcai-root .wcai-panel {
		bottom: 72px;
		width: calc(100vw - 28px);
		height: calc(100vh - 90px);
	}
}

/* Global language font stack (spec 3.4.5) ------------------------------ */

#wcai-root,
#wcai-root .wcai-input {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		"Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Thai",
		"Noto Sans Devanagari", "Nirmala UI", "Leelawadee UI", Tahoma,
		"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
		"Hiragino Kaku Gothic ProN", "Yu Gothic", "Malgun Gothic",
		"Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* RTL mirroring (spec 3.4.5): dir="rtl" flips flexbox inline axes
   automatically; only physical border-radius tails need explicit mirrors. */

#wcai-root .wcai-rtl .wcai-user {
	border-bottom-right-radius: 14px;
	border-bottom-left-radius: 4px;
}

#wcai-root .wcai-rtl .wcai-assistant,
#wcai-root .wcai-rtl .wcai-human {
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 4px;
}