/**
 * Woo AI Product Recommender — public-facing signature components.
 *
 * Builds on the shared tokens in assets/css/woo-ai-product-recommender-tokens.css
 * (enqueued as a dependency of this file — see enqueue_styles() in
 * class-woo-ai-product-recommender-public.php). Wrap shortcode/front-end output in:
 *
 *   <div class="woo-ai-product-recommender-ui woo-ai-product-recommender-public"> ... </div>
 *
 * Mirrors the same component vocabulary as the admin side
 * (admin/css/woo-ai-product-recommender-admin.css) so the plugin reads as one
 * consistent product across wp-admin and the front end, instead of
 * two unrelated visual styles.
 *
 * @since 1.0.0
 */

.woo-ai-product-recommender-public {
	max-width: 100%;
}

/* ---------------------------------------------------------------
 * Container
 * ------------------------------------------------------------- */

.woo-ai-product-recommender-public .wapr-container {
	margin: var(--wapr-space-6) 0;
}

/* ---------------------------------------------------------------
 * Card
 * ------------------------------------------------------------- */

.woo-ai-product-recommender-public .wapr-card {
	background: var(--wapr-color-surface);
	border: 1px solid var(--wapr-color-border);
	border-radius: var(--wapr-radius-lg);
	box-shadow: var(--wapr-shadow-sm);
	padding: var(--wapr-space-6);
	margin-bottom: var(--wapr-space-6);
}

.woo-ai-product-recommender-public .wapr-card__title {
	font-size: var(--wapr-text-lg);
	margin: 0 0 var(--wapr-space-3);
}

/* ---------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------- */

.woo-ai-product-recommender-public .wapr-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wapr-space-2);
	padding: var(--wapr-space-3) var(--wapr-space-5);
	font-size: var(--wapr-text-md);
	font-weight: var(--wapr-weight-semibold);
	line-height: var(--wapr-leading-tight);
	border-radius: var(--wapr-radius-md);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--wapr-duration-fast) var(--wapr-ease-standard),
		border-color var(--wapr-duration-fast) var(--wapr-ease-standard),
		transform var(--wapr-duration-fast) var(--wapr-ease-standard);
}

.woo-ai-product-recommender-public .wapr-btn--primary {
	background: var(--wapr-color-primary);
	color: #fff;
}

.woo-ai-product-recommender-public .wapr-btn--primary:hover {
	background: var(--wapr-color-primary-hover);
	transform: translateY(-1px);
}

.woo-ai-product-recommender-public .wapr-btn--secondary {
	background: var(--wapr-color-surface);
	border-color: var(--wapr-color-border-strong);
	color: var(--wapr-color-ink);
}

.woo-ai-product-recommender-public .wapr-btn--secondary:hover {
	border-color: var(--wapr-color-primary);
	color: var(--wapr-color-primary);
}

/* ---------------------------------------------------------------
 * Badges
 * ------------------------------------------------------------- */

.woo-ai-product-recommender-public .wapr-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wapr-space-1);
	padding: 2px var(--wapr-space-3);
	font-size: var(--wapr-text-xs);
	font-weight: var(--wapr-weight-semibold);
	border-radius: var(--wapr-radius-pill);
	background: var(--wapr-color-surface-sunken);
	color: var(--wapr-color-body-text);
}

.woo-ai-product-recommender-public .wapr-badge--success {
	background: var(--wapr-color-success-soft);
	color: var(--wapr-color-success);
}

.woo-ai-product-recommender-public .wapr-badge--warning {
	background: var(--wapr-color-warning-soft);
	color: var(--wapr-color-warning);
}

.woo-ai-product-recommender-public .wapr-badge--danger {
	background: var(--wapr-color-danger-soft);
	color: var(--wapr-color-danger);
}

/* ---------------------------------------------------------------
 * Notices
 * ------------------------------------------------------------- */

.woo-ai-product-recommender-public .wapr-notice {
	padding: var(--wapr-space-4);
	border-radius: var(--wapr-radius-md);
	background: var(--wapr-color-surface-alt);
	margin-bottom: var(--wapr-space-5);
	font-size: var(--wapr-text-sm);
}

.woo-ai-product-recommender-public .wapr-notice--success {
	background: var(--wapr-color-success-soft);
	color: var(--wapr-color-success);
}

.woo-ai-product-recommender-public .wapr-notice--warning {
	background: var(--wapr-color-warning-soft);
	color: var(--wapr-color-warning);
}

.woo-ai-product-recommender-public .wapr-notice--danger {
	background: var(--wapr-color-danger-soft);
	color: var(--wapr-color-danger);
}

/* ---------------------------------------------------------------
 * Dark mode — front end only.
 *
 * wp-admin manages its own color schemes, so admin.css intentionally
 * does not respond to prefers-color-scheme. The public side is a
 * normal front-end surface and should feel native in either theme.
 * ------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.woo-ai-product-recommender-public {
		--wapr-color-ink: #f3f2fb;
		--wapr-color-body-text: #cfcde3;
		--wapr-color-muted: #9997b3;
		--wapr-color-border: #2d2b3d;
		--wapr-color-border-strong: #3c394f;
		--wapr-color-surface: #14131c;
		--wapr-color-surface-alt: #1c1b28;
		--wapr-color-surface-sunken: #232130;
		--wapr-color-primary-soft: #262052;
	}
}

/* ---------------------------------------------------------------
 * Chat widget
 *
 * A fixed-position launcher + panel, independent of theme layout.
 * Sits outside the normal document flow so it can float above any
 * storefront template without the theme needing to know about it.
 * ------------------------------------------------------------- */

.wapr-chat {
	position: fixed;
	right: var(--wapr-space-5);
	bottom: var(--wapr-space-5);
	z-index: 100000;
}

.wapr-chat__launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: none;
	border-radius: var(--wapr-radius-pill);
	background: var(--wapr-color-primary);
	color: #fff;
	box-shadow: var(--wapr-shadow-lg);
	cursor: pointer;
	transition: background var(--wapr-duration-fast) var(--wapr-ease-standard),
		transform var(--wapr-duration-fast) var(--wapr-ease-standard);
}

.wapr-chat__launcher:hover {
	background: var(--wapr-color-primary-hover);
	transform: translateY(-1px);
}

.wapr-chat__launcher-icon {
	display: flex;
}

.wapr-chat__launcher-icon-img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.wapr-chat__panel {
	position: absolute;
	right: 0;
	bottom: calc(56px + var(--wapr-space-3));
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100vw - var(--wapr-space-8)));
	height: min(560px, calc(100vh - 120px));
	background: var(--wapr-color-surface);
	border: 1px solid var(--wapr-color-border);
	border-radius: var(--wapr-radius-xl);
	box-shadow: var(--wapr-shadow-lg);
	overflow: hidden;
}

.wapr-chat__panel[hidden] {
	display: none;
}

.wapr-chat__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wapr-space-4) var(--wapr-space-5);
	background: var(--wapr-color-primary);
	color: #fff;
	flex-shrink: 0;
}

.wapr-chat__header-title {
	font-size: var(--wapr-text-md);
	font-weight: var(--wapr-weight-semibold);
}

.wapr-chat__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: var(--wapr-radius-pill);
	background: transparent;
	color: #fff;
	font-size: var(--wapr-text-xl);
	line-height: 1;
	cursor: pointer;
}

.wapr-chat__close:hover {
	background: rgba(255, 255, 255, 0.15);
}

.wapr-chat__log {
	flex: 1;
	overflow-y: auto;
	padding: var(--wapr-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--wapr-space-3);
}

.wapr-chat__message {
	max-width: 85%;
	padding: var(--wapr-space-3) var(--wapr-space-4);
	border-radius: var(--wapr-radius-lg);
	font-size: var(--wapr-text-sm);
	line-height: var(--wapr-leading-normal);
	white-space: pre-wrap;
	word-wrap: break-word;
}

.wapr-chat__message--assistant {
	align-self: flex-start;
	background: var(--wapr-color-surface-alt);
	color: var(--wapr-color-body-text);
	border-bottom-left-radius: var(--wapr-radius-sm);
}

.wapr-chat__message--user {
	align-self: flex-end;
	background: var(--wapr-color-primary);
	color: #fff;
	border-bottom-right-radius: var(--wapr-radius-sm);
}

.wapr-chat__message p {
	margin: 0 0 var(--wapr-space-2);
}

.wapr-chat__message ul {
	margin: 0 0 var(--wapr-space-2);
	padding-left: var(--wapr-space-5);
}

.wapr-chat__message li {
	margin-bottom: var(--wapr-space-1);
}

.wapr-chat__message p:last-child,
.wapr-chat__message ul:last-child {
	margin-bottom: 0;
}

.wapr-chat__message li:last-child {
	margin-bottom: 0;
}

.wapr-chat__message strong {
	font-weight: var(--wapr-weight-semibold);
}

/* Recommended product names, linkified inline in the reply text (see
   linkifyProducts() in woo-ai-product-recommender-public.js). Scoped to
   assistant bubbles only -- product links never appear in a user's own
   message, and the assistant bubble's light background is what the
   primary color is tuned to sit on. */
.wapr-chat__message--assistant a {
	color: var(--wapr-color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.wapr-chat__message--assistant a:hover {
	color: var(--wapr-color-primary-hover);
}

.wapr-chat__message--error {
	align-self: flex-start;
	background: var(--wapr-color-danger-soft);
	color: var(--wapr-color-danger);
	border-bottom-left-radius: var(--wapr-radius-sm);
}

.wapr-chat__message--typing {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--wapr-space-1);
	background: var(--wapr-color-surface-alt);
	border-bottom-left-radius: var(--wapr-radius-sm);
}

.wapr-chat__typing-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wapr-color-muted);
	animation: wapr-chat-typing 1s var(--wapr-ease-standard) infinite;
}

.wapr-chat__typing-dot:nth-child(2) {
	animation-delay: 0.15s;
}

.wapr-chat__typing-dot:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes wapr-chat-typing {
	0%, 60%, 100% {
		opacity: 0.3;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
		transform: translateY(-2px);
	}
}

.wapr-chat__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wapr-space-2);
	padding: 0 var(--wapr-space-5) var(--wapr-space-3);
	flex-shrink: 0;
}

.wapr-chat__chips:empty {
	display: none;
}

.wapr-chat__chip {
	padding: var(--wapr-space-2) var(--wapr-space-3);
	border: 1px solid var(--wapr-color-border-strong);
	border-radius: var(--wapr-radius-pill);
	background: var(--wapr-color-surface);
	color: var(--wapr-color-primary);
	font-size: var(--wapr-text-xs);
	font-weight: var(--wapr-weight-medium);
	cursor: pointer;
	transition: border-color var(--wapr-duration-fast) var(--wapr-ease-standard),
		background var(--wapr-duration-fast) var(--wapr-ease-standard);
}

.wapr-chat__chip:hover {
	border-color: var(--wapr-color-primary);
	background: var(--wapr-color-primary-soft);
}

.wapr-chat__composer {
	display: flex;
	align-items: flex-end;
	gap: var(--wapr-space-2);
	padding: var(--wapr-space-3) var(--wapr-space-4);
	border-top: 1px solid var(--wapr-color-border);
	flex-shrink: 0;
}

.wapr-chat__input {
	flex: 1;
	resize: none;
	max-height: 96px;
	padding: var(--wapr-space-2) var(--wapr-space-3);
	font-family: inherit;
	font-size: var(--wapr-text-sm);
	color: var(--wapr-color-ink);
	background: var(--wapr-color-surface-alt);
	border: 1px solid var(--wapr-color-border);
	border-radius: var(--wapr-radius-md);
}

.wapr-chat__input:focus {
	outline: none;
	border-color: var(--wapr-color-primary);
}

.wapr-chat__send {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	padding: 0;
	border: none;
	border-radius: var(--wapr-radius-pill);
	background: var(--wapr-color-primary);
	color: #fff;
	cursor: pointer;
	transition: background var(--wapr-duration-fast) var(--wapr-ease-standard);
}

.wapr-chat__send:hover {
	background: var(--wapr-color-primary-hover);
}

.wapr-chat__send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.wapr-chat {
		right: var(--wapr-space-3);
		bottom: var(--wapr-space-3);
	}

	.wapr-chat__panel {
		width: calc(100vw - var(--wapr-space-6));
		height: calc(100vh - 140px);
	}
}