/* ==========================================================================
   PhoneCoverPro AI Chatbot — Frontend Widget Styles
   All selectors scoped under #pcp-chatbot for theme specificity
   ========================================================================== */

/* ---------- Isolation & Variables ---------- */

#pcp-chatbot.pcp-ai-chat-widget {
	--pcp-primary: #2563eb;
	--pcp-primary-dark: color-mix(in srgb, var(--pcp-primary) 85%, #000);
	--pcp-user-bubble: #2563eb;
	--pcp-bot-bubble: #ffffff;
	--pcp-surface-soft: color-mix(in srgb, var(--pcp-primary) 6%, #f8fafc);
	--pcp-surface-strong: color-mix(in srgb, var(--pcp-primary) 10%, #ffffff);
	--pcp-border-soft: rgba(148, 163, 184, 0.22);
	--pcp-shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.16), 0 6px 20px rgba(15, 23, 42, 0.08);
	--pcp-radius-full: 9999px;
	--pcp-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--pcp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Customizable defaults (overridden via inline style from PHP) */
	--pcp-header-bg: var(--pcp-primary);
	--pcp-header-text: #ffffff;
	--pcp-header-subtitle-color: #ffffff;
	--pcp-status-dot: #4ade80;
	--pcp-bot-msg-text: #334155;
	--pcp-user-msg-text: #ffffff;
	--pcp-bot-bubble-radius: 18px;
	--pcp-user-bubble-radius: 18px;
	--pcp-input-bg: #f8fafc;
	--pcp-input-border: #e2e8f0;
	--pcp-input-text: #1e293b;
	--pcp-input-placeholder: #94a3b8;
	--pcp-send-bg: var(--pcp-primary);
	--pcp-send-icon: #ffffff;
	--pcp-launcher-bg: var(--pcp-primary);
	--pcp-launcher-icon: #ffffff;
	--pcp-launcher-label-bg: var(--pcp-launcher-bg);
	--pcp-launcher-label-text: #ffffff;
	--pcp-window-bg: #ffffff;
	--pcp-window-border: transparent;
	--pcp-window-radius: 16px;
	--pcp-window-shadow: 0 24px 64px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.1);
	--pcp-widget-width-desktop: 380px;
	--pcp-widget-height-desktop: 520px;
	--pcp-widget-width-mobile: calc(100vw - 32px);
	--pcp-widget-height-mobile: min(70vh, 620px);
	--pcp-launcher-size: 64px;
	--pcp-mobile-vh: 100dvh;
	--pcp-mobile-offset: 0px;

	display: block;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	max-width: none;
	min-width: 0;
	max-height: none;
	overflow: visible;
	z-index: 999999;

	/* Rendering isolation — style only (NOT layout, which would trap fixed children) */
	contain: style;
	isolation: isolate;

	/* Prevent the invisible container from blocking page interactions */
	pointer-events: none;

	/* Self-contained typography — never inherit from the page */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	color: #1e293b;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	word-spacing: normal;
	text-decoration: none;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
}

/* Scoped sizing only — avoid global-style reset behavior inside the host page */
#pcp-chatbot.pcp-ai-chat-widget,
#pcp-chatbot.pcp-ai-chat-widget *,
#pcp-chatbot.pcp-ai-chat-widget *::before,
#pcp-chatbot.pcp-ai-chat-widget *::after {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

/* Element resets limited to widget-owned controls/content only */
#pcp-chatbot.pcp-ai-chat-widget button,
#pcp-chatbot.pcp-ai-chat-widget input,
#pcp-chatbot.pcp-ai-chat-widget textarea {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

#pcp-chatbot.pcp-ai-chat-widget button {
	border: 0;
	background: none;
}

#pcp-chatbot.pcp-ai-chat-widget a {
	color: inherit;
	text-decoration: none;
}

#pcp-chatbot.pcp-ai-chat-widget img,
#pcp-chatbot.pcp-ai-chat-widget svg {
	display: block;
	max-width: none;
}

/* Re-enable pointer events on interactive children */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher,
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__window {
	pointer-events: auto;
}

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

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: var(--pcp-launcher-size);
	height: var(--pcp-launcher-size);
	border-radius: var(--pcp-radius-full);
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.34), transparent 34%),
		linear-gradient(145deg, color-mix(in srgb, var(--pcp-launcher-bg) 86%, #ffffff 14%), var(--pcp-launcher-bg));
	color: var(--pcp-launcher-icon);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), 0 6px 20px rgba(15, 23, 42, 0.12);
	transition:
		transform 0.3s var(--pcp-ease-spring),
		box-shadow 0.3s var(--pcp-ease),
		background-color 0.3s var(--pcp-ease),
		opacity 0.3s var(--pcp-ease);
	z-index: 999999;
	outline: none;
}

/* Launcher with label (legacy compat) */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher--has-label {
	width: auto;
	border-radius: 30px;
	padding: 0 24px 0 18px;
	gap: 10px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher-label {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	position: relative;
	color: var(--pcp-launcher-label-text);
	background: var(--pcp-launcher-label-bg);
	padding: 4px 10px;
	border-radius: var(--pcp-radius-full);
	margin: -4px -10px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 26px 64px rgba(15, 23, 42, 0.24), 0 10px 28px rgba(15, 23, 42, 0.14);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher:active {
	transform: scale(0.95);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher:focus-visible {
	outline: 3px solid var(--pcp-launcher-bg);
	outline-offset: 3px;
}

/* Launcher icon swap */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher-icon {
	position: absolute;
	transition: opacity 0.25s var(--pcp-ease), transform 0.3s var(--pcp-ease-spring);
}

/* When launcher has a label, chat icon is inline, close icon stays hidden */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher--has-label .pcp-chatbot__launcher-icon--chat {
	position: relative;
}

/* Close icon stays absolute so it doesn't take flow space when invisible */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher--has-label .pcp-chatbot__launcher-icon--close {
	position: absolute;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher-icon--chat {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher-icon--close {
	opacity: 0;
	transform: scale(0.5) rotate(-90deg);
}

#pcp-chatbot.pcp-chatbot--open .pcp-chatbot__launcher-icon--chat {
	opacity: 0;
	transform: scale(0.5) rotate(90deg);
}

#pcp-chatbot.pcp-chatbot--open .pcp-chatbot__launcher-icon--close {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* Hide label when open — revert to icon-only circle */
#pcp-chatbot.pcp-chatbot--open .pcp-chatbot__launcher-label {
	display: none;
}

#pcp-chatbot.pcp-chatbot--open .pcp-chatbot__launcher--has-label {
	width: var(--pcp-launcher-size);
	border-radius: var(--pcp-radius-full);
	padding: 0;
}

/* Icons must stack absolutely when label is hidden and launcher is a circle */
#pcp-chatbot.pcp-chatbot--open .pcp-chatbot__launcher--has-label .pcp-chatbot__launcher-icon {
	position: absolute;
}

/* Hide launcher when open (setting) */
#pcp-chatbot.pcp-chatbot--hide-launcher.pcp-chatbot--open .pcp-chatbot__launcher {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.5);
}

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

/* Icon + Label style — pill shape with icon and text */
#pcp-chatbot.pcp-chatbot--launcher-icon-label .pcp-chatbot__launcher {
	width: auto;
	border-radius: 30px;
	padding: 0 24px 0 18px;
	gap: 10px;
}

#pcp-chatbot.pcp-chatbot--launcher-icon-label .pcp-chatbot__launcher-icon--chat {
	position: relative;
}

#pcp-chatbot.pcp-chatbot--launcher-icon-label .pcp-chatbot__launcher-icon--close {
	position: absolute;
}

/* When open: revert to icon-only circle */
#pcp-chatbot.pcp-chatbot--launcher-icon-label.pcp-chatbot--open .pcp-chatbot__launcher {
	width: var(--pcp-launcher-size);
	border-radius: var(--pcp-radius-full);
	padding: 0;
}

#pcp-chatbot.pcp-chatbot--launcher-icon-label.pcp-chatbot--open .pcp-chatbot__launcher-label {
	display: none;
}

#pcp-chatbot.pcp-chatbot--launcher-icon-label.pcp-chatbot--open .pcp-chatbot__launcher-icon {
	position: absolute;
}

/* Pill style — text only, no icon */
#pcp-chatbot.pcp-chatbot--launcher-pill .pcp-chatbot__launcher {
	width: auto;
	border-radius: 30px;
	padding: 0 24px;
	gap: 0;
}

#pcp-chatbot.pcp-chatbot--launcher-pill .pcp-chatbot__launcher-label {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

/* When open: hide pill launcher entirely (header close button is sufficient) */
#pcp-chatbot.pcp-chatbot--launcher-pill.pcp-chatbot--open .pcp-chatbot__launcher {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.5);
}

/* ---------- Left Position ---------- */

#pcp-chatbot.pcp-chatbot--left .pcp-chatbot__launcher {
	right: auto;
	left: 24px;
}

#pcp-chatbot.pcp-chatbot--left .pcp-chatbot__window {
	right: auto;
	left: 24px;
}

/* ---------- Window ---------- */

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__window {
	position: fixed;
	bottom: 100px;
	right: 24px;
	width: min(var(--pcp-widget-width-desktop), calc(100vw - 32px));
	max-width: calc(100vw - 32px);
	height: min(var(--pcp-widget-height-desktop), calc(100vh - 124px));
	min-height: min(var(--pcp-widget-height-desktop), calc(100vh - 124px));
	background: var(--pcp-window-bg);
	border-radius: var(--pcp-window-radius);
	border: 1px solid color-mix(in srgb, var(--pcp-window-border) 55%, rgba(255, 255, 255, 0.48));
	box-shadow: var(--pcp-window-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.72);
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	overflow: hidden;
	overflow-x: clip;
	opacity: 0;
	transform: translateY(18px) scale(0.97);
	pointer-events: none;
	transition:
		opacity 0.3s var(--pcp-ease),
		transform 0.3s var(--pcp-ease-spring),
		box-shadow 0.3s var(--pcp-ease);
	z-index: 999998;
	backdrop-filter: blur(12px);
}

#pcp-chatbot.pcp-chatbot--open .pcp-chatbot__window {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ---------- Header ---------- */

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__header {
	background:
		radial-gradient(circle at top left, color-mix(in srgb, var(--pcp-header-text) 16%, transparent), transparent 30%),
		linear-gradient(145deg, var(--pcp-header-bg), color-mix(in srgb, var(--pcp-header-bg) 84%, #08111f));
	color: var(--pcp-header-text);
	padding: 18px 20px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Solid header style */
#pcp-chatbot.pcp-chatbot--header-solid .pcp-chatbot__header {
	background: var(--pcp-header-bg);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__header-info {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__avatar {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
	backdrop-filter: blur(4px);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__header-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__bot-name {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--pcp-header-text);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__header-subtitle {
	font-size: 12px;
	color: var(--pcp-header-subtitle-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0.85;
	margin-top: 2px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__status {
	font-size: 12px;
	color: var(--pcp-header-text);
	opacity: 0.8;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 5px 9px;
	border-radius: var(--pcp-radius-full);
	background: var(--pcp-status-bg);
	width: fit-content;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__status-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--pcp-radius-full);
	background: var(--pcp-status-dot);
	display: inline-block;
	flex-shrink: 0;
	animation: _pcp_w_pulse 2s ease-in-out infinite;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__close {
	background: var(--pcp-header-control-bg);
	border: none;
	border: 1px solid var(--pcp-header-control-border);
	color: var(--pcp-header-text);
	width: 44px;
	height: 44px;
	border-radius: var(--pcp-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s var(--pcp-ease), transform 0.2s var(--pcp-ease);
	flex-shrink: 0;
	outline: none;
	position: relative;
	z-index: 2;
	box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__close:hover {
	background: var(--pcp-header-control-hover);
	transform: rotate(90deg);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__close:focus-visible {
	outline: 2px solid var(--pcp-header-text);
	outline-offset: 2px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__close svg {
	pointer-events: none;
	stroke: currentColor;
}

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

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__messages {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 22px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: linear-gradient(180deg, var(--pcp-surface-soft) 0%, var(--pcp-window-bg) 100%);
	min-width: 0;
	min-height: 0;
	overscroll-behavior-y: contain;
	overscroll-behavior-x: none;
	scroll-padding-bottom: 12px;
}

/* Scrollbar */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__messages::-webkit-scrollbar {
	width: 5px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__messages::-webkit-scrollbar-track {
	background: transparent;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__messages::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: var(--pcp-radius-full);
}

/* ---------- Message Bubbles ---------- */

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__message {
	max-width: min(84%, 312px);
	min-width: 0;
	padding: 13px 16px;
	font-size: 14px;
	line-height: 1.58;
	word-break: break-word;
	overflow-wrap: break-word;
	display: block;
	position: relative;
	flex: 0 0 auto;
	flex-shrink: 0;
	overflow: hidden;
	animation: _pcp_w_fadeIn 0.3s var(--pcp-ease) both;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__message--bot {
	align-self: flex-start;
	background: var(--pcp-bot-bubble);
	color: var(--pcp-bot-msg-text);
	border-radius: var(--pcp-bot-bubble-radius);
	border-bottom-left-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--pcp-border-soft) 100%, transparent);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__msg-block {
	display: block;
	min-width: 0;
	max-width: 100%;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__msg-block + .pcp-chatbot__msg-block {
	margin-top: 8px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__msg-text {
	display: block;
	white-space: pre-wrap;
	min-width: 0;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__msg-text a {
	color: var(--pcp-primary, #2563eb);
	text-decoration: none;
	font-weight: 600;
	word-break: break-word;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 0.15s ease;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__msg-text a:hover {
	opacity: 0.7;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__msg-text a::after {
	content: " \2197";
	font-size: 0.75em;
	vertical-align: super;
	opacity: 0.6;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__msg-text strong {
	font-weight: 600;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__message--user {
	align-self: flex-end;
	background: var(--pcp-user-bubble);
	color: var(--pcp-user-msg-text);
	border-radius: var(--pcp-user-bubble-radius);
	border-bottom-right-radius: 6px;
	box-shadow: 0 12px 26px color-mix(in srgb, var(--pcp-user-bubble) 26%, transparent);
}

/* Bot avatar in messages */
#pcp-chatbot.pcp-chatbot--show-msg-avatar .pcp-chatbot__message--bot {
	margin-left: 36px;
	position: relative;
}

#pcp-chatbot.pcp-chatbot--show-msg-avatar .pcp-chatbot__msg-avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--pcp-radius-full);
	background: var(--pcp-header-bg);
	color: var(--pcp-header-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 11px;
	position: absolute;
	left: -36px;
	bottom: 0;
	overflow: hidden;
}

#pcp-chatbot.pcp-chatbot--show-msg-avatar .pcp-chatbot__msg-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Product Cards ---------- */

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__image-cards {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 2px 0 6px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__image-card {
	display: block;
	width: 112px;
	height: 112px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	background: #fff;
	box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__image-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 2px 10px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	cursor: grab;
	max-width: 100%;
	width: 100%;
	scroll-padding-inline: 2px;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: auto;
	touch-action: auto;

	/* Right-edge fade to hint more cards */
	-webkit-mask-image: none;
	mask-image: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards.pcp-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	-webkit-user-select: none;
	user-select: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards.pcp-dragging *,
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards.pcp-dragging a,
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards.pcp-dragging img,
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards.pcp-dragging span,
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards.pcp-dragging div {
	-webkit-user-select: none;
	user-select: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards::-webkit-scrollbar {
	display: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-card {
	flex: 0 0 auto;
	width: 148px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Only one card: make it wider */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards > .pcp-chatbot__product-card:only-child {
	width: 200px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-img {
	width: 100%;
	height: 110px;
	overflow: hidden;
	background: #f8fafc;
	flex-shrink: 0;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-body {
	padding: 8px 10px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-title {
	font-size: 12px;
	font-weight: 700;
	color: #1e293b;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--pcp-primary, #2563eb);
	margin-top: 2px;
}

/* Sale price: original crossed out, sale highlighted */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__price-original {
	text-decoration: line-through;
	color: #94a3b8;
	font-weight: 500;
	font-size: 11px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__price-sale {
	color: #dc2626;
	font-weight: 700;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-desc {
	font-size: 10px;
	color: #64748b;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cta {
	display: block;
	padding: 6px 10px;
	background: var(--pcp-primary, #2563eb);
	color: #fff !important;
	text-align: center;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none !important;
	border-bottom: none !important;
	transition: background 0.15s ease, transform 0.1s ease;
	cursor: pointer;
	margin-top: 6px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cta:hover {
	filter: brightness(0.9);
	transform: scale(1.02);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cta::after {
	content: none !important;
}

/* Image placeholder and error states */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-img--placeholder {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-img--placeholder::after {
	content: "\1F4F1";
	font-size: 28px;
	opacity: 0.3;
}

/* Hide broken image icon */
#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-img.pcp-img-error img {
	display: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-img.pcp-img-error {
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__message--bot.pcp-chatbot__message--has-products {
	max-width: 92%;
	overflow: hidden;
	min-width: 0;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__message--bot .pcp-chatbot__product-cards {
	max-width: 100%;
	min-width: 0;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__message--bot .pcp-chatbot__msg-block--products {
	width: 100%;
	min-width: 0;
	overflow: visible;
}

/* ---------- Suggestion Chips ---------- */

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 20px 14px;
	background: var(--pcp-window-bg);
	border-top: 1px solid rgba(226, 232, 240, 0.72);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__suggestions.pcp-hidden {
	display: none;
}

#pcp-chatbot.pcp-chatbot--keyboard-open .pcp-chatbot__suggestions {
	display: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	background: color-mix(in srgb, var(--pcp-primary) 4%, #ffffff);
	color: #475569;
	border: 1px solid rgba(148, 163, 184, 0.2);
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	-webkit-user-select: none;
	user-select: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__chip:hover {
	background: color-mix(in srgb, var(--pcp-primary) 8%, #ffffff);
	border-color: color-mix(in srgb, var(--pcp-primary) 18%, rgba(148, 163, 184, 0.2));
	color: #1e293b;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__chip:active {
	transform: scale(0.96);
}

/* ---------- Typing Indicator ---------- */

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__typing {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 14px 20px;
	background: var(--pcp-bot-bubble);
	border-radius: var(--pcp-bot-bubble-radius);
	border-bottom-left-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	flex: 0 0 auto;
	flex-shrink: 0;
	animation: _pcp_w_fadeIn 0.3s var(--pcp-ease) both;
}

/* Typing indicator also offset when msg avatar is on */
#pcp-chatbot.pcp-chatbot--show-msg-avatar .pcp-chatbot__typing {
	margin-left: 36px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__typing span {
	width: 8px;
	height: 8px;
	border-radius: var(--pcp-radius-full);
	background: #94a3b8;
	display: block;
	animation: _pcp_w_bounce 1.4s ease-in-out infinite;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__typing span:nth-child(2) {
	animation-delay: 0.15s;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__typing span:nth-child(3) {
	animation-delay: 0.3s;
}

/* ---------- Input Area ---------- */

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__input-area {
	padding: 14px 18px 18px;
	background: linear-gradient(180deg, var(--pcp-composer-surface) 0%, var(--pcp-window-bg) 100%);
	border-top: 1px solid color-mix(in srgb, var(--pcp-border-soft) 100%, transparent);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	box-shadow: 0 -10px 22px rgba(248, 250, 252, 0.95);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	min-width: 0;
	padding: 8px;
	border: 1px solid var(--pcp-input-border);
	border-radius: calc(var(--pcp-input-radius, var(--pcp-radius-full)) + 8px);
	background: var(--pcp-input-bg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__input {
	flex: 1;
	min-width: 0;
	min-height: 24px;
	max-height: 132px;
	border: 0;
	border-radius: calc(var(--pcp-input-radius, var(--pcp-radius-full)) + 2px);
	padding: 8px 10px;
	font-size: 14px;
	font-family: inherit;
	color: var(--pcp-input-text);
	background: transparent;
	outline: none;
	resize: none;
	line-height: 1.5;
	overflow-y: auto;
	transition:
		border-color 0.2s var(--pcp-ease),
		background-color 0.2s var(--pcp-ease),
		box-shadow 0.2s var(--pcp-ease);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__input::placeholder {
	color: var(--pcp-input-placeholder);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__input:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__input:focus {
	background: transparent;
	box-shadow: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__send {
	width: 44px;
	height: 44px;
	border-radius: var(--pcp-radius-full);
	background: linear-gradient(145deg, color-mix(in srgb, var(--pcp-send-bg) 84%, #ffffff 16%), var(--pcp-send-bg));
	color: var(--pcp-send-icon);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition:
		background-color 0.2s var(--pcp-ease),
		transform 0.15s var(--pcp-ease),
		opacity 0.2s var(--pcp-ease),
		box-shadow 0.2s var(--pcp-ease);
	outline: none;
	box-shadow: 0 12px 24px color-mix(in srgb, var(--pcp-send-bg) 24%, transparent);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__send:hover {
	filter: brightness(0.9);
	transform: translateY(-1px) scale(1.02);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__send:active {
	transform: scale(0.95);
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__send:focus-visible {
	outline: 3px solid var(--pcp-send-bg);
	outline-offset: 2px;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__send:disabled {
	cursor: default;
	opacity: 0.45;
	box-shadow: none;
	transform: none;
	filter: none;
}

#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__form:focus-within {
	border-color: color-mix(in srgb, var(--pcp-primary) 24%, rgba(148, 163, 184, 0.28));
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--pcp-primary) 12%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, 0.78);
	background: color-mix(in srgb, var(--pcp-window-bg) 86%, #ffffff);
}

/* ---------- Animations ---------- */

@keyframes _pcp_w_fadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes _pcp_w_bounce {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.4;
	}
	30% {
		transform: translateY(-6px);
		opacity: 1;
	}
}

@keyframes _pcp_w_pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* ---------- Responsive: Mobile ---------- */

@media (max-width: 640px) {
	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher {
		bottom: 16px;
		right: 16px;
		width: max(56px, min(var(--pcp-launcher-size), 64px));
		height: max(56px, min(var(--pcp-launcher-size), 64px));
	}

	/* On mobile: always icon-only, hide label and reset pill/label shape */
	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher--has-label,
	#pcp-chatbot.pcp-chatbot--launcher-icon-label .pcp-chatbot__launcher,
	#pcp-chatbot.pcp-chatbot--launcher-pill .pcp-chatbot__launcher {
		width: 56px;
		border-radius: var(--pcp-radius-full);
		padding: 0;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__launcher-label {
		display: none;
	}

	/* Pill launcher on mobile: show chat icon since label is hidden */
	#pcp-chatbot.pcp-chatbot--launcher-pill .pcp-chatbot__launcher::before {
		content: "\1F4AC";
		font-size: 24px;
		line-height: 1;
	}

	#pcp-chatbot.pcp-chatbot--left .pcp-chatbot__launcher {
		right: auto;
		left: 16px;
	}

	/* Always hide launcher on mobile when chat is open */
	#pcp-chatbot.pcp-chatbot--open .pcp-chatbot__launcher {
		display: none;
	}

	/* Fullscreen mobile backdrop — covers entire screen to prevent page bleed-through */
	#pcp-chatbot.pcp-chatbot--open::before {
		content: '';
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100vh;
		height: 100lvh; /* large viewport height — always full screen, even with keyboard open */
		height: -webkit-fill-available; /* iOS Safari fallback */
		min-height: 100vh;
		background: var(--pcp-window-bg, #ffffff);
		z-index: 999997;
		pointer-events: none;
	}

	/* Fullscreen mobile (default) */
	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__window {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100vw;
		height: var(--pcp-mobile-vh, 100dvh);
		min-height: 0;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
		border: 0;
		/* Smooth keyboard transitions */
		transition:
			height 0.15s ease-out,
			opacity 0.3s var(--pcp-ease),
			transform 0.3s var(--pcp-ease-spring);
	}

	/* When keyboard opens, extend window background below to cover the gap between
	   the shrunk chat window and the keyboard — prevents page content from showing */
	#pcp-chatbot.pcp-chatbot--keyboard-open .pcp-chatbot__window {
		box-shadow: 0 50vh 0 50vh var(--pcp-window-bg, #ffffff);
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__header {
		padding: 14px 16px 12px;
		padding-top: max(16px, env(safe-area-inset-top, 16px));
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__close {
		width: 42px;
		height: 42px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__messages {
		padding: 16px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__input-area {
		padding: 10px 14px calc(max(12px, env(safe-area-inset-bottom, 12px)) + 10px);
	}

	/* When keyboard is open, reduce bottom padding since safe-area is no longer needed */
	#pcp-chatbot.pcp-chatbot--keyboard-open .pcp-chatbot__input-area {
		padding-bottom: 10px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__suggestions {
		padding: 0 14px 10px;
		gap: 6px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__message {
		max-width: min(88%, 320px);
		padding: 12px 14px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__form {
		padding: 6px;
		gap: 8px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__input {
		font-size: 16px;
		padding: 8px 10px;
		max-height: 120px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__send {
		width: 42px;
		height: 42px;
	}

	/* Mobile product cards — smaller and more compact */
	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-card {
		width: 128px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cards > .pcp-chatbot__product-card:only-child {
		width: 172px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-img {
		height: 90px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-body {
		padding: 6px 8px 8px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-title {
		font-size: 11px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-price {
		font-size: 12px;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__product-cta {
		padding: 5px 8px;
		font-size: 10px;
		width: 100%;
	}

	#pcp-chatbot.pcp-ai-chat-widget .pcp-chatbot__message--bot.pcp-chatbot__message--has-products {
		max-width: 95%;
	}

	/* Non-fullscreen mode: no backdrop needed */
	#pcp-chatbot.pcp-chatbot--no-mobile-fs.pcp-chatbot--open::before {
		display: none;
	}

	/* Non-fullscreen mobile: keep as floating panel */
	#pcp-chatbot.pcp-chatbot--no-mobile-fs .pcp-chatbot__window {
		inset: auto;
		bottom: 84px;
		right: 16px;
		left: auto;
		width: min(var(--pcp-widget-width-mobile), calc(100vw - 32px));
		max-width: calc(100vw - 32px);
		height: min(var(--pcp-widget-height-mobile), calc(100vh - 112px));
		max-height: calc(100vh - 112px);
		border-radius: var(--pcp-window-radius);
		border: 1px solid color-mix(in srgb, var(--pcp-window-border) 55%, rgba(255, 255, 255, 0.48));
		box-shadow: var(--pcp-window-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.72);
	}

	#pcp-chatbot.pcp-chatbot--no-mobile-fs.pcp-chatbot--left .pcp-chatbot__window {
		right: auto;
		left: 16px;
	}

	#pcp-chatbot.pcp-chatbot--no-mobile-fs .pcp-chatbot__header {
		padding-top: 16px;
	}

	#pcp-chatbot.pcp-chatbot--no-mobile-fs .pcp-chatbot__input-area {
		padding-bottom: 12px;
	}
}