/* Shopping Assistant Chatbot — launcher + chat panel. Every colour/size is a CSS variable
   set inline from the settings, so the admin preview can change them live. */

.wbnchat {
	--wbnchat-primary: #0F1A2E;
	--wbnchat-accent: #2457E6;
	--wbnchat-surface: #FFFFFF;
	--wbnchat-text: #0F1A2E;
	--wbnchat-muted: #7A8497;
	--wbnchat-user-bubble: #2457E6;
	--wbnchat-user-text: #FFFFFF;
	--wbnchat-bot-bubble: #F1F3F7;
	--wbnchat-bot-text: #0F1A2E;
	--wbnchat-radius: 16px;
	--wbnchat-font-size: 15px;
	--wbnchat-width: 380px;
	--wbnchat-height: 560px;
	--wbnchat-launcher: 56px;
	--wbnchat-offset-x: 24px;
	--wbnchat-offset-y: 24px;
	--wbnchat-z: 99990;
	--wbnchat-line: rgba(15, 26, 46, .1);

	position: fixed;
	bottom: var(--wbnchat-offset-y);
	z-index: var(--wbnchat-z);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--wbnchat-font-size);
	line-height: 1.45;
	color: var(--wbnchat-text);
	-webkit-font-smoothing: antialiased;
}

.wbnchat--right { right: var(--wbnchat-offset-x); }
.wbnchat--left { left: var(--wbnchat-offset-x); }

.wbnchat *, .wbnchat *::before, .wbnchat *::after { box-sizing: border-box; }

.wbnchat__sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------ launcher -- */

.wbnchat__launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--wbnchat-launcher);
	min-width: var(--wbnchat-launcher);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wbnchat-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 30px -10px rgba(15, 26, 46, .5);
	transition: transform .15s, box-shadow .15s;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
}

.wbnchat__launcher.has-label { padding: 0 20px 0 16px; }
.wbnchat__launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(15, 26, 46, .55); }
.wbnchat__launcher:focus-visible { outline: 3px solid var(--wbnchat-accent); outline-offset: 3px; }

.wbnchat__launcher-icon { position: relative; width: 26px; height: 26px; display: block; }
.wbnchat__launcher-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .15s, transform .15s; }
.wbnchat__ico-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.wbnchat.is-open .wbnchat__ico-close { opacity: 1; transform: none; }
.wbnchat.is-open .wbnchat__ico-chat { opacity: 0; transform: rotate(90deg) scale(.6); }

/* --------------------------------------------------------------- panel -- */

.wbnchat__panel {
	position: absolute;
	bottom: calc(var(--wbnchat-launcher) + 14px);
	width: var(--wbnchat-width);
	max-width: calc(100vw - 2 * var(--wbnchat-offset-x));
	height: var(--wbnchat-height);
	max-height: calc(100vh - var(--wbnchat-launcher) - var(--wbnchat-offset-y) - 30px);
	display: flex;
	flex-direction: column;
	background: var(--wbnchat-surface);
	color: var(--wbnchat-text);
	border-radius: var(--wbnchat-radius);
	box-shadow: 0 24px 60px -20px rgba(15, 26, 46, .45), 0 0 0 1px var(--wbnchat-line);
	overflow: hidden;
	transform-origin: bottom right;
	animation: wbnchatPop .18s ease-out;
}

.wbnchat--right .wbnchat__panel { right: 0; }
.wbnchat--left .wbnchat__panel { left: 0; transform-origin: bottom left; }
.wbnchat__panel[hidden] { display: none; }

@keyframes wbnchatPop {
	from { opacity: 0; transform: translateY(10px) scale(.97); }
	to { opacity: 1; transform: none; }
}

.wbnchat__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 12px 14px 16px;
	background: var(--wbnchat-primary);
	color: #fff;
	flex: none;
}

.wbnchat__avatar {
	width: 40px; height: 40px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	font-size: 20px;
	font-weight: 700;
}

.wbnchat__head-text { flex: 1; min-width: 0; }
.wbnchat__title { font-weight: 700; font-size: 1em; line-height: 1.2; }
.wbnchat__subtitle { font-size: .82em; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wbnchat__iconbtn {
	width: 34px; height: 34px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 8px;
	background: transparent; color: #fff; opacity: .8; cursor: pointer;
}
.wbnchat__iconbtn:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.wbnchat__iconbtn svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- log -- */

.wbnchat__log {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scroll-behavior: smooth;
}

.wbnchat__msg { display: flex; flex-direction: column; max-width: 88%; gap: 8px; }
.wbnchat__msg--user { align-self: flex-end; align-items: flex-end; }
.wbnchat__msg--bot { align-self: flex-start; align-items: flex-start; max-width: 100%; }

.wbnchat__bubble {
	padding: 10px 14px;
	border-radius: calc(var(--wbnchat-radius) * .9);
	white-space: pre-wrap;
	word-wrap: break-word;
	max-width: 100%;
}
.wbnchat__msg--user .wbnchat__bubble { background: var(--wbnchat-user-bubble); color: var(--wbnchat-user-text); border-bottom-right-radius: 6px; }
.wbnchat__msg--bot .wbnchat__bubble { background: var(--wbnchat-bot-bubble); color: var(--wbnchat-bot-text); border-bottom-left-radius: 6px; max-width: 88%; }

.wbnchat__bubble a { color: var(--wbnchat-accent); font-weight: 600; }

.wbnchat__typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.wbnchat__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--wbnchat-muted); animation: wbnchatDot 1s infinite; }
.wbnchat__typing span:nth-child(2) { animation-delay: .15s; }
.wbnchat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wbnchatDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.wbnchat__link { font-size: .85em; }

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

.wbnchat__cards {
	display: flex;
	gap: 10px;
	width: 100%;
	overflow-x: auto;
	padding: 2px 2px 8px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.wbnchat__card {
	flex: 0 0 150px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--wbnchat-text);
	background: var(--wbnchat-surface);
	border: 1px solid var(--wbnchat-line);
	border-radius: calc(var(--wbnchat-radius) * .7);
	overflow: hidden;
	transition: border-color .15s, transform .15s;
}
.wbnchat__card:hover { border-color: var(--wbnchat-accent); transform: translateY(-2px); color: var(--wbnchat-text); }

.wbnchat__card-img { aspect-ratio: 1; background: #EEF0F4; position: relative; }
.wbnchat__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wbnchat__card-badge {
	position: absolute; top: 8px; left: 8px;
	padding: 3px 7px; border-radius: 6px;
	background: var(--wbnchat-accent); color: #fff;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.wbnchat__card-badge--out { background: var(--wbnchat-muted); }

.wbnchat__card-body { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.wbnchat__card-title {
	font-size: .88em; font-weight: 600; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wbnchat__card-price { font-size: .95em; font-weight: 700; margin-top: auto; }
.wbnchat__card-price s { color: var(--wbnchat-muted); font-weight: 500; margin-left: 6px; font-size: .85em; }

/* --------------------------------------------------------------- chips -- */

.wbnchat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; flex: none; }
.wbnchat__chips:empty { display: none; }
.wbnchat__chip {
	padding: 7px 12px;
	border: 1px solid var(--wbnchat-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--wbnchat-accent);
	font: inherit; font-size: .85em; font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.wbnchat__chip:hover { background: var(--wbnchat-accent); color: #fff; }

/* ---------------------------------------------------------------- form -- */

.wbnchat__form {
	display: flex;
	gap: 8px;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--wbnchat-line);
	flex: none;
	margin: 0;
}

.wbnchat .wbnchat__input,
.wbnchat .wbnchat__input:focus {
	flex: 1; min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--wbnchat-line);
	border-radius: 12px;
	background: var(--wbnchat-surface);
	color: var(--wbnchat-text);
	font: inherit;
	outline: 0;
	box-shadow: none;
	margin: 0;
}
.wbnchat .wbnchat__input:focus { border-color: var(--wbnchat-accent); }
.wbnchat__input::placeholder { color: var(--wbnchat-muted); opacity: 1; }

.wbnchat__send {
	width: 44px; height: 44px; flex: none;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 12px;
	background: var(--wbnchat-accent); color: #fff;
	cursor: pointer;
	transition: filter .15s;
}
.wbnchat__send:hover { filter: brightness(1.1); }
.wbnchat__send.is-disabled { opacity: .5; cursor: default; pointer-events: none; }
.wbnchat__launcher, .wbnchat__send { user-select: none; -webkit-user-select: none; }
.wbnchat__send:focus-visible { outline: 2px solid var(--wbnchat-accent); outline-offset: 2px; }
.wbnchat__send svg { width: 18px; height: 18px; }

.wbnchat__powered { padding: 0 14px 10px; font-size: .72em; color: var(--wbnchat-muted); text-align: center; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 480px) {
	.wbnchat__panel {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}
	.wbnchat.is-open .wbnchat__launcher { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wbnchat__panel { animation: none; }
	.wbnchat__launcher, .wbnchat__card { transition: none; }
}

/* --------------------------------------------------- admin live preview -- */

.wbnchat--preview {
	position: absolute;
}
.wbnchat--preview .wbnchat__panel {
	/* The root is only launcher-sized here, so % limits would collapse the panel. */
	max-height: 640px;
	max-width: none;
}
@media (max-width: 480px) {
	.wbnchat--preview .wbnchat__panel { position: absolute; inset: auto; border-radius: var(--wbnchat-radius); }
	.wbnchat--preview.is-open .wbnchat__launcher { display: flex; }
}

/* ---------------------------------------------- theme override guards -- */
/* Themes and Elementor kits style bare button/input/a selectors; these
   repeat the widget's own values with higher specificity. */
.wbnchat .wbnchat__launcher,
.wbnchat .wbnchat__launcher:hover,
.wbnchat .wbnchat__launcher:focus {
	background: var(--wbnchat-primary);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 10px 30px -10px rgba(15, 26, 46, .5);
}
.wbnchat .wbnchat__launcher.has-label { padding: 0 20px 0 16px; }
.wbnchat .wbnchat__iconbtn,
.wbnchat .wbnchat__iconbtn:hover,
.wbnchat .wbnchat__iconbtn:focus {
	background: transparent;
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 0;
	box-shadow: none;
}
.wbnchat .wbnchat__iconbtn:hover { background: rgba(255, 255, 255, .12); }
.wbnchat .wbnchat__chip,
.wbnchat .wbnchat__chip:focus {
	background: transparent;
	color: var(--wbnchat-accent);
	border: 1px solid var(--wbnchat-accent);
	border-radius: 999px;
	padding: 7px 12px;
	font-size: .85em;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}
.wbnchat .wbnchat__chip:hover { background: var(--wbnchat-accent); color: #fff; }
.wbnchat .wbnchat__send,
.wbnchat .wbnchat__send:hover,
.wbnchat .wbnchat__send:focus {
	background: var(--wbnchat-accent);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: 0;
	box-shadow: none;
}
.wbnchat .wbnchat__card,
.wbnchat .wbnchat__card:hover,
.wbnchat .wbnchat__card:focus { text-decoration: none; color: var(--wbnchat-text); }
.wbnchat .wbnchat__card-title { color: var(--wbnchat-text); }
.wbnchat .wbnchat__link a { color: var(--wbnchat-accent); text-decoration: none; }
.wbnchat .wbnchat__bubble a:hover { text-decoration: underline; }
.wbnchat .wbnchat__title, .wbnchat .wbnchat__subtitle { color: #fff; }
.wbnchat .wbnchat__cards { margin: 0; }
.wbnchat svg { fill: none; }

/* ------------------------------------------------- commerce additions -- */
.wbnchat__links { display: flex; flex-wrap: wrap; gap: 6px; }
.wbnchat .wbnchat__linkbtn,
.wbnchat .wbnchat__linkbtn:hover,
.wbnchat .wbnchat__linkbtn:focus {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--wbnchat-accent);
	border-radius: 10px;
	background: var(--wbnchat-surface);
	color: var(--wbnchat-accent);
	font-size: .88em;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
}
.wbnchat .wbnchat__linkbtn:hover { background: var(--wbnchat-accent); color: #fff; }
.wbnchat .wbnchat__linkbtn.is-primary { background: var(--wbnchat-accent); color: #fff; }
.wbnchat__card-why { font-size: .74em; color: var(--wbnchat-muted); line-height: 1.3; }
.wbnchat__lead { display: flex; gap: 6px; width: 100%; max-width: 320px; margin: 0; }
.wbnchat .wbnchat__lead input,
.wbnchat .wbnchat__lead input:focus {
	flex: 1; min-width: 0; height: 40px; padding: 0 12px; margin: 0;
	border: 1.5px solid var(--wbnchat-line); border-radius: 10px;
	background: var(--wbnchat-surface); color: var(--wbnchat-text); font: inherit; font-size: .9em; outline: 0; box-shadow: none;
}
.wbnchat .wbnchat__lead input:focus { border-color: var(--wbnchat-accent); }
.wbnchat .wbnchat__lead button,
.wbnchat .wbnchat__lead button:hover,
.wbnchat .wbnchat__lead button:focus {
	height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
	background: var(--wbnchat-accent); color: #fff; font: inherit; font-size: .9em; font-weight: 700; cursor: pointer; box-shadow: none;
}
.wbnchat__lead-done { font-size: .9em; font-weight: 600; color: var(--wbnchat-accent); }
.wbnchat__lead-err { font-size: .8em; color: #c0392b; width: 100%; }

/* --------------------------------------------------- results layouts -- */
/* Carousel is the default (.wbnchat__cards above). */
.wbnchat--results-grid .wbnchat__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	overflow: visible;
	scroll-snap-type: none;
}
.wbnchat--results-grid.wbnchat--cols-3 .wbnchat__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wbnchat--results-grid .wbnchat__card { flex: none; width: auto; }
.wbnchat--results-grid.wbnchat--cols-3 .wbnchat__card-title { font-size: .8em; }

.wbnchat--results-list .wbnchat__cards {
	display: flex;
	flex-direction: column;
	overflow: visible;
	scroll-snap-type: none;
}
.wbnchat--results-list .wbnchat__card {
	flex: none;
	width: 100%;
	flex-direction: row;
	align-items: stretch;
}
.wbnchat--results-list .wbnchat__card-img { width: 84px; flex: none; aspect-ratio: 1; }
.wbnchat--results-list .wbnchat__card-body { justify-content: center; }
.wbnchat--results-list .wbnchat__card-title { -webkit-line-clamp: 2; }
.wbnchat--results-list .wbnchat__card-price { margin-top: 4px; }
.wbnchat__msg--bot:has(.wbnchat__cards) { width: 100%; }

/* Shopper grid/list switch in the header */
.wbnchat__layouts { display: flex; gap: 2px; margin-right: 2px; }
.wbnchat__layouts[hidden] { display: none; }
.wbnchat .wbnchat__layout { width: 30px; height: 30px; opacity: .55; cursor: pointer; }
.wbnchat .wbnchat__layout.is-active { opacity: 1; background: rgba(255, 255, 255, .18); }
.wbnchat .wbnchat__layout svg { width: 16px; height: 16px; }
@media (max-width: 360px) { .wbnchat__layouts { display: none; } }