/**
 * Woo AI Product Recommender — signature design tokens.
 *
 * Shared visual language for BOTH the admin and public-facing sides of
 * the plugin. This file only defines tokens (custom properties) and the
 * minimal reset needed to apply them consistently — it never carries
 * component styles. Component styles live in:
 *   - admin/css/woo-ai-product-recommender-admin.css
 *   - public/css/woo-ai-product-recommender-public.css
 *
 * Every selector is scoped under `.woo-ai-product-recommender-ui` so nothing here leaks
 * into wp-admin chrome or other plugins' markup on the same page. Wrap
 * any screen/partial that uses this system in:
 *   <div class="woo-ai-product-recommender-ui"> ... </div>
 *
 * @since 1.0.0
 */

.woo-ai-product-recommender-ui {
	/* ---------------------------------------------------------------
	 * Color — brand
	 * ------------------------------------------------------------- */
	--wapr-color-primary: #4f39f6;
	--wapr-color-primary-hover: #4029d6;
	--wapr-color-primary-active: #3420b0;
	--wapr-color-primary-soft: #eeecfe;
	--wapr-color-accent: #12b3a8;
	--wapr-color-accent-soft: #e0f7f5;

	/* Color — text & surfaces (light, default) */
	--wapr-color-ink: #16151f;
	--wapr-color-body-text: #3f3d56;
	--wapr-color-muted: #75738c;
	--wapr-color-border: #e3e1ee;
	--wapr-color-border-strong: #cac7de;
	--wapr-color-surface: #ffffff;
	--wapr-color-surface-alt: #f7f6fb;
	--wapr-color-surface-sunken: #efedf7;

	/* Color — feedback */
	--wapr-color-success: #1a9e6e;
	--wapr-color-success-soft: #e5f7ef;
	--wapr-color-warning: #b8790a;
	--wapr-color-warning-soft: #fdf1dc;
	--wapr-color-danger: #d1373f;
	--wapr-color-danger-soft: #fbe7e8;

	/* ---------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------- */
	--wapr-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wapr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--wapr-text-xs: 0.75rem;
	--wapr-text-sm: 0.8125rem;
	--wapr-text-base: 0.9375rem;
	--wapr-text-md: 1rem;
	--wapr-text-lg: 1.125rem;
	--wapr-text-xl: 1.375rem;
	--wapr-text-2xl: 1.75rem;
	--wapr-text-3xl: 2.25rem;

	--wapr-weight-regular: 400;
	--wapr-weight-medium: 500;
	--wapr-weight-semibold: 600;
	--wapr-weight-bold: 700;

	--wapr-leading-tight: 1.2;
	--wapr-leading-normal: 1.5;
	--wapr-leading-relaxed: 1.7;

	/* ---------------------------------------------------------------
	 * Spacing (4px base scale)
	 * ------------------------------------------------------------- */
	--wapr-space-1: 4px;
	--wapr-space-2: 8px;
	--wapr-space-3: 12px;
	--wapr-space-4: 16px;
	--wapr-space-5: 20px;
	--wapr-space-6: 24px;
	--wapr-space-8: 32px;
	--wapr-space-10: 40px;
	--wapr-space-12: 48px;
	--wapr-space-16: 64px;

	/* ---------------------------------------------------------------
	 * Radius, shadow, motion
	 * ------------------------------------------------------------- */
	--wapr-radius-sm: 6px;
	--wapr-radius-md: 10px;
	--wapr-radius-lg: 14px;
	--wapr-radius-xl: 20px;
	--wapr-radius-pill: 999px;

	--wapr-shadow-sm: 0 1px 2px rgba(24, 16, 90, 0.06);
	--wapr-shadow-md: 0 4px 16px rgba(24, 16, 90, 0.08);
	--wapr-shadow-lg: 0 12px 32px rgba(24, 16, 90, 0.12);

	--wapr-duration-fast: 150ms;
	--wapr-duration-normal: 220ms;
	--wapr-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* ---------------------------------------------------------------
	 * Base reset
	 * ------------------------------------------------------------- */
	font-family: var(--wapr-font-sans);
	font-size: var(--wapr-text-base);
	line-height: var(--wapr-leading-normal);
	color: var(--wapr-color-body-text);
	-webkit-font-smoothing: antialiased;
}

.woo-ai-product-recommender-ui *,
.woo-ai-product-recommender-ui *::before,
.woo-ai-product-recommender-ui *::after {
	box-sizing: border-box;
}

.woo-ai-product-recommender-ui h1,
.woo-ai-product-recommender-ui h2,
.woo-ai-product-recommender-ui h3,
.woo-ai-product-recommender-ui h4 {
	margin: 0 0 var(--wapr-space-2);
	font-weight: var(--wapr-weight-semibold);
	line-height: var(--wapr-leading-tight);
	color: var(--wapr-color-ink);
}

.woo-ai-product-recommender-ui a {
	color: var(--wapr-color-primary);
}

.woo-ai-product-recommender-ui a:hover {
	color: var(--wapr-color-primary-hover);
}

.woo-ai-product-recommender-ui :focus-visible {
	outline: 2px solid var(--wapr-color-primary);
	outline-offset: 2px;
}

.wapr-chat__chips button {
    all: unset;
    font-size: 12px;
    background: rgb(57 54 82 / 55%);
    padding: 5px 9px 7px;
    border-radius: 20px;
    color: #fff;
    backdrop-filter: blur(5px);
}

.wapr-chat__composer button {
    position: absolute;
    bottom: 26px;
    right: 30px;
    width: 40px;
    height: 40px !important;
    min-height: unset;
    border-radius: 50%;
    background: var(--wapr-color-primary);
    color: #fff;
}

.wapr-chat__composer button svg {
    width: 40px !important;
    height: 40px !important;
}

.wapr-chat__header .wapr-chat__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 22px;
}

.wapr-chat__header .wapr-chat__close span {
    margin-bottom: 4px;
}
.woo-ai-product-recommender-public.wapr-chat > button {
    background: var(--wapr-color-primary);
    color: #fff;
    border-radius: 50%;
}