/*
 * Canpol Warehouse — chatbot, rebuilt as a modern launcher + panel.
 *
 * The vendored widget renders the whole 380px panel straight into the page and
 * leaves it there; its only "toggle" collapses it to a 60px bar that still sits
 * in the corner. Every portal people are used to does the opposite — a small
 * bubble, and the panel only on a click. That is what the JS companion adds, and
 * this stylesheet dresses it in the storefront's palette.
 *
 * Kept as an override rather than edits inside includes/chatbot/, so the engine
 * can still be replaced wholesale when it is updated upstream. Values mirror the
 * tokens in the theme's main.css; the theme defines them on :root, so var()
 * picks them up and the literals only apply if the theme is ever swapped out.
 *
 * One thing here is a fix, not a preference: the title is an <h3>, and the theme
 * sets `h1, h2, h3, h4 { color: var(--ink) }`. A direct rule beats an inherited
 * one, so the title took ink — on an ink header. It was invisible. It needs its
 * colour set on the element itself, which is what .ka-chatbot-title does below.
 */

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

.canpol-cb-launcher {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	background: var(--brand, #b8211c);
	color: var(--white, #fff);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Below the panel on purpose. The bubble is hidden while the chat is open,
	   but if that ever fails it must end up behind the conversation, not on
	   top of it. */
	z-index: 9996;
	box-shadow: 0 6px 20px rgba(184, 33, 28, .32), 0 2px 6px rgba(28, 15, 13, .12);
	transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, opacity .18s ease, visibility .18s;
	padding: 0;
}

.canpol-cb-launcher:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 10px 28px rgba(184, 33, 28, .4), 0 3px 8px rgba(28, 15, 13, .14);
}

.canpol-cb-launcher:active { transform: scale(.96); }

.canpol-cb-launcher:focus-visible {
	outline: 2px solid var(--ink, #1c0f0d);
	outline-offset: 3px;
}

.canpol-cb-launcher svg {
	width: 26px;
	height: 26px;
	display: block;
	transition: transform .22s ease, opacity .18s ease;
}

/* While the panel is open the bubble folds away, so only one thing is on screen. */
.canpol-cb-launcher.is-hidden {
	opacity: 0;
	transform: scale(.6);
	pointer-events: none;
	/* Not opacity alone: a transparent button is still a hit target for
	   screen readers and still paints over the panel mid-transition. */
	visibility: hidden;
}

/* A single, slow pulse ring — attention without a nightclub. */
.canpol-cb-launcher::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--brand, #b8211c);
	opacity: 0;
	animation: canpolCbPulse 3.6s ease-out 1.5s 3;
}

@keyframes canpolCbPulse {
	0%   { opacity: .55; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
	.canpol-cb-launcher::after { animation: none; }
	.canpol-cb-launcher, .canpol-cb-launcher svg { transition: none; }
}

/* Placement is an admin setting. Centre is the default, so it leads. */
.canpol-cb-launcher.canpol-cb-pos-center {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}
.canpol-cb-launcher.canpol-cb-pos-center:hover { transform: translateX(-50%) translateY(-2px) scale(1.05); }
.canpol-cb-launcher.canpol-cb-pos-center:active { transform: translateX(-50%) scale(.96); }
.canpol-cb-launcher.canpol-cb-pos-center.is-hidden { transform: translateX(-50%) scale(.6); }

.canpol-cb-launcher.canpol-cb-pos-left { left: 24px; right: auto; }

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

.ka-chatbot-container.ka-chatbot-floating {
	/* Twice the engine's 380px. Wholesale answers carry product cards, tables of
	   sizes and passages from documents — a narrow column turns those into a
	   ribbon of wrapped fragments. Still capped against the viewport. */
	width: 760px;
	max-width: calc(100vw - 32px);
	max-height: min(620px, calc(100vh - 120px));
	bottom: 24px;
	right: 24px;
	background: var(--white, #fff);
	border: 1px solid var(--line, #ebe4df);
	border-radius: 8px !important;
	box-shadow: 0 24px 60px rgba(28, 15, 13, .18), 0 4px 12px rgba(28, 15, 13, .08) !important;
	font-family: var(--font-body, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
	overflow: hidden;
	/* Closed by default — the launcher opens it. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.97);
	transform-origin: bottom right;
	transition: opacity .2s ease, transform .24s cubic-bezier(.34, 1.4, .64, 1), visibility .24s;
}

.ka-chatbot-container.ka-chatbot-floating.canpol-cb-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

/* The engine's minimise state is redundant now — the launcher owns open/closed. */
.ka-chatbot-container.ka-chatbot-floating.ka-chatbot-minimized {
	max-height: min(620px, calc(100vh - 120px));
	overflow: hidden;
}
.ka-chatbot-container.ka-chatbot-floating.ka-chatbot-minimized .ka-chatbot-messages,
.ka-chatbot-container.ka-chatbot-floating.ka-chatbot-minimized .ka-chatbot-input-container {
	display: flex;
}

.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-center {
	left: 50%;
	right: auto;
	margin-left: -380px; /* half the width — no transform, that drives the open/close animation */
	transform-origin: bottom center;
}
/* Below the full width the negative margin would push it off-screen. */
@media (max-width: 824px) {
	.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-center {
		margin-left: 0;
		left: 16px;
		right: 16px;
		width: auto;
	}
}

.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-left {
	left: 24px;
	right: auto;
	transform-origin: bottom left;
}

.ka-chatbot-container.ka-chatbot-embedded {
	border: 1px solid var(--line, #ebe4df);
	border-radius: 8px !important;
	font-family: var(--font-body, "Inter", sans-serif);
	box-shadow: 0 8px 30px rgba(28, 15, 13, .08) !important;
}

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

.ka-chatbot-header {
	background: var(--ink, #1c0f0d) !important;
	border-radius: 0 !important;
	padding: 14px 16px !important;
	border-bottom: 2px solid var(--brand, #b8211c);
	cursor: default;
	gap: 12px;
}

/* THE FIX: set the colour on the element, or the theme's h3 rule wins. */
.ka-chatbot-title {
	color: var(--white, #fff) !important;
	font-family: var(--font-display, "Cormorant Garamond", serif) !important;
	font-size: 19px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: .01em;
	margin: 0 !important;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Small live dot + label, so the panel reads as staffed rather than static. */
.canpol-cb-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-family: var(--font-body, "Inter", sans-serif);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	flex-shrink: 0;
}

.canpol-cb-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
	transition: background .2s ease, box-shadow .2s ease;
}

/* Red the moment a message fails to get through, green again when one does. */
.canpol-cb-status.is-offline { color: rgba(255, 255, 255, .8); }
.canpol-cb-status.is-offline::before {
	background: #f87171;
	box-shadow: 0 0 0 3px rgba(248, 113, 113, .22);
}

/* The engine's minimise button is replaced by an explicit close. */
.ka-chatbot-toggle { display: none !important; }

.canpol-cb-close {
	background: rgba(255, 255, 255, .1);
	border: none;
	color: var(--white, #fff);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0;
	transition: background .18s ease;
}

.canpol-cb-close:hover { background: rgba(255, 255, 255, .22); }
.canpol-cb-close:focus-visible { outline: 2px solid var(--white, #fff); outline-offset: 2px; }
.canpol-cb-close svg { width: 15px; height: 15px; display: block; }

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

.ka-chatbot-messages {
	background: var(--paper, #fbf7f2) !important;
	padding: 18px 16px !important;
	gap: 10px !important;
	max-height: none !important;
	min-height: 260px;
	scroll-behavior: smooth;
}

.ka-chatbot-message-content {
	border-radius: 12px !important;
	font-size: 14.5px !important;
	line-height: 1.55 !important;
	padding: 11px 14px !important;
	max-width: 86% !important;
	font-family: var(--font-body, "Inter", sans-serif);
}

.ka-chatbot-message-user .ka-chatbot-message-content {
	background: var(--brand, #b8211c) !important;
	color: var(--white, #fff) !important;
	border-bottom-right-radius: 3px !important;
	box-shadow: 0 1px 3px rgba(184, 33, 28, .22);
}

.ka-chatbot-message-assistant .ka-chatbot-message-content {
	background: var(--white, #fff) !important;
	color: var(--ink, #1c0f0d) !important;
	border: 1px solid var(--line, #ebe4df) !important;
	border-bottom-left-radius: 3px !important;
	box-shadow: 0 1px 3px rgba(28, 15, 13, .05) !important;
}

/* ---------------------------------------------------------------------------
 * Product cards
 *
 * A recommendation people can act on: thumbnail, name, SKU and — for signed-in
 * accounts only — the price and stock the server chose to send.
 * ------------------------------------------------------------------------- */

.canpol-cb-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line, #ebe4df);
}

.canpol-cb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .canpol-cb-cards { grid-template-columns: 1fr; } }

.canpol-cb-card {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px;
	border: 1px solid var(--line, #ebe4df);
	border-radius: 8px;
	background: var(--paper, #fbf7f2);
	text-decoration: none !important;
	color: var(--ink, #1c0f0d) !important;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.canpol-cb-card:hover {
	border-color: var(--brand, #b8211c);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(28, 15, 13, .08);
}

.canpol-cb-card img,
.canpol-cb-card-noimg {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 5px;
	background: var(--bone, #f3ebe4);
	display: block;
}

.canpol-cb-card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.canpol-cb-card-title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink, #1c0f0d);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.canpol-cb-card-variant {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink, #1c0f0d);
}

.canpol-cb-card-sku {
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--mute, #786662);
}

.canpol-cb-card-price {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--brand, #b8211c);
}

.canpol-cb-card-stock {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--mute, #786662);
}
.canpol-cb-card-stock.is-instock { color: #15803d; }
.canpol-cb-card-stock.is-onbackorder { color: #b45309; }
.canpol-cb-card-stock.is-outofstock,
.canpol-cb-card-stock.is-discontinued { color: #9b1c17; }

.canpol-cb-card-buy {
	flex-shrink: 0;
	align-self: center;
	padding: 7px 12px;
	border-radius: 4px;
	background: var(--brand, #b8211c);
	color: var(--white, #fff);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	white-space: nowrap;
	cursor: pointer;
	transition: filter .16s ease;
}
.canpol-cb-card-buy:hover { filter: brightness(1.1); }
.canpol-cb-card-buy:focus-visible { outline: 2px solid var(--ink, #1c0f0d); outline-offset: 2px; }

/* Links inside replies still need to look like links against both bubbles. */
.ka-chatbot-message-assistant .ka-chatbot-message-content a { color: var(--brand, #b8211c); }
.ka-chatbot-message-user .ka-chatbot-message-content a { color: var(--white, #fff); }

.ka-chatbot-messages::-webkit-scrollbar { width: 8px; }
.ka-chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.ka-chatbot-messages::-webkit-scrollbar-thumb {
	background: var(--line, #ebe4df);
	border-radius: 4px;
	border: 2px solid var(--paper, #fbf7f2);
}
.ka-chatbot-messages::-webkit-scrollbar-thumb:hover { background: #d9cec6; }

/* Typing */
.ka-chatbot-typing {
	background: var(--paper, #fbf7f2) !important;
	border-top: none !important;
	padding: 0 16px 12px !important;
}
.ka-chatbot-typing-text {
	font-size: 12px !important;
	color: var(--mute, #786662) !important;
	font-style: normal !important;
	letter-spacing: .02em;
}
.ka-chatbot-typing-dots span { background: var(--brand, #b8211c) !important; width: 6px !important; height: 6px !important; }

/* ---------------------------------------------------------------------------
 * Composer
 * ------------------------------------------------------------------------- */

.ka-chatbot-input-container {
	background: var(--white, #fff) !important;
	border-top: 1px solid var(--line, #ebe4df) !important;
	border-radius: 0 !important;
	padding: 12px !important;
	gap: 10px !important;
	align-items: center;
}

.ka-chatbot-input {
	border: 1px solid var(--line, #ebe4df) !important;
	border-radius: 22px !important;
	padding: 11px 16px !important;
	font-size: 14.5px !important;
	font-family: var(--font-body, "Inter", sans-serif) !important;
	color: var(--ink, #1c0f0d) !important;
	background: var(--paper, #fbf7f2) !important;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ka-chatbot-input::placeholder { color: var(--mute, #786662); opacity: .75; }

.ka-chatbot-input:focus {
	border-color: var(--brand, #b8211c) !important;
	box-shadow: 0 0 0 3px rgba(184, 33, 28, .1) !important;
	background: var(--white, #fff) !important;
}

.ka-chatbot-send {
	background: var(--brand, #b8211c) !important;
	color: var(--white, #fff) !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 8px rgba(184, 33, 28, .26);
	transition: transform .18s ease, filter .18s ease;
}

.ka-chatbot-send:hover:not(:disabled) { filter: brightness(1.08); transform: scale(1.05); box-shadow: 0 4px 12px rgba(184, 33, 28, .34) !important; }
.ka-chatbot-send:focus-visible { outline: 2px solid var(--ink, #1c0f0d); outline-offset: 2px; }

/* Error notice, in the theme's register rather than the engine's pink. */
.ka-chatbot-error {
	border-radius: var(--radius, 2px) !important;
	border: 1px solid #f3c9c8 !important;
	background: #fdf3f2 !important;
	color: #8f1a16 !important;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 13.5px;
}


/* The widget sits above the storefront's sticky bits — and above its own
   launcher — but below the accessibility panel, which must stay reachable at
   all times. */
.ka-chatbot-container[data-chat-style="floating"] { z-index: 9997; }

/* ---------------------------------------------------------------------------
 * Phones
 *
 * A full-height sheet, not a shrunken desktop card. Written with the position
 * classes included in every selector on purpose: the placement rules above are
 * three classes deep, so a two-class mobile rule loses to them and the panel
 * keeps a desktop offset — which is exactly how it ended up hanging off the
 * side of the screen.
 *
 * Heights use dvh where supported. On phones vh is the height the viewport
 * would have with the browser chrome hidden, so 88vh genuinely does not fit
 * while the address bar is showing.
 * ------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.ka-chatbot-container.ka-chatbot-floating,
	.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-left,
	.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-center,
	.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-right {
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		/* Half the screen, so the page stays visible behind it and the visitor can
		   see what they are asking about while they type. */
		height: 52vh;
		height: 52dvh;
		max-height: 52vh;
		max-height: 52dvh;
		min-height: 320px;
		border-radius: 14px 14px 0 0 !important;
		border-bottom: none;
		transform-origin: bottom center;
		transform: translateY(100%);
		display: flex;
		flex-direction: column;
	}

	.ka-chatbot-container.ka-chatbot-floating.canpol-cb-open,
	.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-left.canpol-cb-open,
	.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-center.canpol-cb-open,
	.ka-chatbot-container.ka-chatbot-floating.canpol-cb-pos-right.canpol-cb-open {
		transform: translateY(0);
	}

	/* A grab bar, so it reads as a sheet that can be dismissed. */
	.ka-chatbot-container.ka-chatbot-floating .ka-chatbot-header {
		position: relative;
		padding: 20px 14px 12px !important;
	}
	.ka-chatbot-container.ka-chatbot-floating .ka-chatbot-header::before {
		content: "";
		position: absolute;
		top: 7px;
		left: 50%;
		transform: translateX(-50%);
		width: 38px;
		height: 4px;
		border-radius: 2px;
		background: rgba(255, 255, 255, .3);
	}

	/* The messages area is the only thing that may grow, or the composer gets
	   pushed off the bottom of the screen where it cannot be reached. */
	.ka-chatbot-container.ka-chatbot-floating .ka-chatbot-messages {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none !important;
		padding: 14px 12px !important;
		-webkit-overflow-scrolling: touch;
	}

	.ka-chatbot-container.ka-chatbot-floating .ka-chatbot-input-container {
		flex: 0 0 auto;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
	}

	/* 16px or iOS zooms the whole page in when the field is focused, and the
	   layout the visitor gets back afterwards is not the one they left. */
	.ka-chatbot-container.ka-chatbot-floating .ka-chatbot-input {
		font-size: 16px !important;
		padding: 12px 16px !important;
	}

	.ka-chatbot-container.ka-chatbot-floating .ka-chatbot-send {
		width: 46px !important;
		height: 46px !important;
	}

	.ka-chatbot-container.ka-chatbot-floating .canpol-cb-status { display: none; }
	.ka-chatbot-container.ka-chatbot-floating .canpol-cb-close { width: 36px; height: 36px; }
	.ka-chatbot-container.ka-chatbot-floating .ka-chatbot-title { font-size: 17px !important; }

	.ka-chatbot-container.ka-chatbot-floating .ka-chatbot-message-content {
		max-width: 92% !important;
		font-size: 15px !important;
	}

	.canpol-cb-cards { grid-template-columns: 1fr; }
	.canpol-cb-card { padding: 10px; }
	.canpol-cb-card-buy { padding: 10px 14px; font-size: 13px; }

	.canpol-cb-launcher,
	.canpol-cb-launcher.canpol-cb-pos-left,
	.canpol-cb-launcher.canpol-cb-pos-right {
		bottom: calc(16px + env(safe-area-inset-bottom));
		width: 56px;
		height: 56px;
	}
}

/* ---------------------------------------------------------------------------
 * Sharing the corner
 *
 * Three things want the bottom of the screen: this widget, the cookie button
 * (.cw-cc-fab, bottom left) and the accessibility toggle
 * (#wa_wcag-toggle-accessibility-panel, bottom right at z-index 9999 — above
 * the chat panel, and in the same brand red as the launcher, so two identical
 * red circles ended up overlapping the conversation).
 *
 * Rather than shuffle them around each other, the other two stand down while
 * the chat is open and return the moment it closes. The accessibility toggle
 * carries its position inline, so these need !important to reach it — and they
 * deliberately do not use display, which would leave it unreachable to a
 * keyboard mid-transition rather than merely invisible.
 * ------------------------------------------------------------------------- */

body.canpol-cb-chatting .cw-cc-fab,
body.canpol-cb-chatting #wa_wcag-toggle-accessibility-panel {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity .18s ease, visibility .18s;
}

/* The accessibility panel itself must never be trapped behind the chat: if it
   is open, it wins. */
body.canpol-cb-chatting #wa_wcag-accessibility-panel {
	z-index: 10000 !important;
}

.cw-cc-fab,
#wa_wcag-toggle-accessibility-panel {
	transition: opacity .18s ease, visibility .18s;
}

/* The cookie banner is a consent gate — it outranks the chat, always. */
.cw-cc { z-index: 99999; }