/*!
 * Liquor Assistant — public styles
 * Dossier-style: warm dark surfaces, gold accents, serif headings.
 * Scoped under [data-la] / .la- to avoid theme bleed.
 */

:root {
	--la-bg-deep: #1a1612;
	--la-bg-card: #211d18;
	--la-bg-input: #2a251f;
	--la-border: rgba(201,169,97,0.25);
	--la-border-strong: rgba(201,169,97,0.55);
	--la-text: #f5ede0;
	--la-text-soft: rgba(245,237,224,0.72);
	--la-text-muted: rgba(245,237,224,0.45);
	--la-gold-1: #E8C988;
	--la-gold-2: #C9A961;
	--la-gold-3: #9C7E3F;
	--la-shadow: 0 18px 50px -12px rgba(0,0,0,0.55);
	--la-mobile-offset: 80px;
	--la-radius: 4px;
	--la-radius-lg: 8px;
}

/* Only takes effect when the site's Appearance setting is "Auto (match visitor's
   device)" — in that mode the inline per-site <style> block (see class-la-public.php
   theme_css()) skips overriding these background/text variables entirely, leaving
   this media query in charge. In "Fixed" mode (the default) that inline block always
   sets them explicitly afterward, so it wins regardless of device preference and
   this block has no effect. */
@media (prefers-color-scheme: light) {
	:root {
		--la-bg-deep: #ffffff;
		--la-bg-card: #f7f5f0;
		--la-bg-input: #efebe3;
		--la-text: #1a1612;
		--la-text-soft: rgba(26,22,18,0.72);
		--la-text-muted: rgba(26,22,18,0.45);
		--la-shadow: 0 18px 50px -12px rgba(0,0,0,0.18);
	}
}

.liquor-assistant-root *,
#liquor-assistant-root *,
#liquor-assistant-root *::before,
#liquor-assistant-root *::after {
	box-sizing: border-box;
}

/* =====================================================================
   SEARCH BAR — sits inline wherever it is placed (sticky header on roots)
   ===================================================================== */

.la-searchbar {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 720px;
	margin: 0 auto;
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: 999px;
	padding: 4px 6px 4px 18px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
	font-family: inherit;
}

.la-searchbar:focus-within {
	border-color: var(--la-border-strong);
	box-shadow: 0 0 0 4px rgba(201,169,97,0.08);
}

.la-searchbar__icon {
	width: 18px;
	height: 18px;
	opacity: 0.6;
	margin-right: 10px;
	flex-shrink: 0;
}

.la-searchbar__input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--la-text);
	font-size: 15px;
	padding: 12px 4px;
	min-width: 0;
	font-family: inherit;
}

.la-searchbar__input::placeholder {
	color: var(--la-text-muted);
	font-style: italic;
}

.la-searchbar__submit {
	background: linear-gradient(135deg, var(--la-gold-1) 0%, var(--la-gold-2) 50%, var(--la-gold-3) 100%) !important;
	color: var(--la-bg-deep) !important;
	border: 0 !important;
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 150ms ease, transform 100ms ease;
}

.la-searchbar__submit:hover { opacity: 0.92; }
.la-searchbar__submit:active { transform: translateY(1px); }
.la-searchbar__submit:disabled { opacity: 0.5; cursor: wait; }

/* Result panel that drops below the bar */
.la-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--la-bg-card);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius-lg);
	box-shadow: var(--la-shadow);
	max-height: 540px;
	overflow-y: auto;
	z-index: 99999;
	padding: 0;
	display: none;
}

.la-panel.is-open {
	display: block;
	animation: la-fade-in 180ms ease-out;
}

@keyframes la-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   FLOATING BUBBLE
   ===================================================================== */

.la-bubble-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 72px;
	height: 72px;
	/* No card/fill behind it — just the icon itself, floating on the page.
	   A drop shadow keeps it legible over busy photo backgrounds without
	   needing a solid background colour. */
	background: transparent !important;
	border: 0 !important;
	filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99998;
	transition: transform 180ms ease, filter 180ms ease;
	padding: 0;
}

.la-bubble-launcher:hover {
	transform: translateY(-2px);
	filter: drop-shadow(0 14px 32px rgba(0,0,0,0.45));
}

.la-bubble-launcher img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Labelled variant — a pill with an "online" dot + text next to the icon,
   instead of the plain icon-only circle. Only applied when the site sets
   a Bubble launcher label; the base rules above still cover the default. */
.la-bubble-launcher.la-bubble-launcher--labeled {
	width: auto;
	height: 56px;
	background: var(--la-bg-card) !important;
	border: 1px solid var(--la-border-strong) !important;
	border-radius: 999px;
	padding: 6px 18px 6px 6px;
	justify-content: flex-start;
	gap: 10px;
}
.la-bubble-launcher--labeled img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
}
.la-bubble-launcher__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.la-bubble-launcher__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 2px var(--la-bg-card);
	flex-shrink: 0;
}
.la-bubble-launcher__label-text {
	color: var(--la-text);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.la-bubble-panel {
	position: fixed;
	right: 20px;
	bottom: 104px;
	width: 360px;
	max-width: calc(100vw - 24px);
	height: 540px;
	max-height: calc(100vh - 120px);
	background: var(--la-bg-card);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius-lg);
	box-shadow: var(--la-shadow);
	z-index: 99999;
	display: none;
	flex-direction: column;
	overflow: hidden;
}

.la-bubble-panel.is-open {
	display: flex;
	animation: la-rise-in 220ms ease-out;
}

@keyframes la-rise-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.la-bubble-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--la-border);
	background: var(--la-bg-deep);
}

.la-bubble-header img { width: 28px; height: 28px; border-radius: 50%; }
.la-bubble-header__text { flex: 1; min-width: 0; }
.la-bubble-header__title {
	font-family: 'Playfair Display','Cormorant Garamond',Georgia,serif;
	font-size: 16px;
	color: var(--la-text);
	letter-spacing: 1px;
}
.la-bubble-header__subtitle {
	font-size: 11.5px;
	color: var(--la-text-soft);
	margin-top: 2px;
}
.la-bubble-header__close {
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-soft) !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

.la-bubble-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

.la-bubble-foot {
	border-top: 1px solid var(--la-border);
	padding: 12px;
	background: var(--la-bg-deep);
}

.la-bubble-foot form {
	display: flex;
	gap: 8px;
	align-items: center;
}

.la-bubble-foot input {
	flex: 1;
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: 999px;
	padding: 10px 14px;
	color: var(--la-text);
	font-size: 14px;
	font-family: inherit;
	outline: 0;
}

.la-bubble-foot input::placeholder { color: var(--la-text-muted); }

.la-bubble-foot button {
	background: linear-gradient(135deg, var(--la-gold-1), var(--la-gold-2), var(--la-gold-3)) !important;
	color: var(--la-bg-deep) !important;
	border: 0 !important;
	border-radius: 999px;
	width: 38px;
	height: 38px;
	cursor: pointer;
	font-size: 16px;
}

/* =====================================================================
   MESSAGES (shared by search-bar panel and bubble panel)
   ===================================================================== */

.la-msg {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--la-text);
	font-family: inherit;
}

.la-msg-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 14px;
}
.la-msg-row .la-msg { margin: 0; }
.la-msg-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 2px;
	object-fit: cover;
}

.la-msg-user {
	color: var(--la-text-soft);
	font-style: italic;
	padding-left: 14px;
	border-left: 2px solid var(--la-border);
}

.la-msg-assistant {
	white-space: pre-wrap;
}

.la-msg-system {
	color: var(--la-text-muted);
	font-size: 12px;
	text-align: center;
	padding: 8px;
}

.la-msg-thinking {
	color: var(--la-text-muted);
	font-style: italic;
}

.la-msg a {
	color: var(--la-gold-1);
	text-decoration: underline;
	text-decoration-color: rgba(232,201,136,0.4);
	text-underline-offset: 3px;
}
.la-msg a:hover { text-decoration-color: var(--la-gold-1); }

/* =====================================================================
   PRIVACY DISCLOSURE BANNER (first interaction)
   ===================================================================== */

.la-privacy {
	background: rgba(201,169,97,0.08);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	padding: 12px 14px;
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--la-text-soft);
	line-height: 1.5;
}

.la-privacy button {
	display: inline-block;
	margin-top: 8px;
	background: transparent !important;
	border: 1px solid var(--la-border-strong) !important;
	color: var(--la-gold-1) !important;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
}

.la-privacy button:hover { background: rgba(201,169,97,0.1) !important; }

/* =====================================================================
   AGE GATE (first message, before privacy banner)
   ===================================================================== */

.la-age-gate {
	background: rgba(201,169,97,0.08);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	padding: 12px 14px;
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--la-text);
	line-height: 1.5;
}

.la-age-gate__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/* =====================================================================
   TEST-MODE BADGE
   ===================================================================== */

.la-test-badge {
	display: inline-block;
	background: #4a3818;
	color: var(--la-gold-1);
	font-size: 10px;
	letter-spacing: 1px;
	padding: 3px 8px;
	border-radius: 3px;
	margin-left: 8px;
	text-transform: uppercase;
	font-weight: 600;
}

/* =====================================================================
   PANEL HEADER (for search-bar dropdown)
   ===================================================================== */

.la-panel-header {
	padding: 14px 18px 10px;
	border-bottom: 1px solid var(--la-border);
	display: flex;
	align-items: center;
	gap: 10px;
}

.la-panel-header img { width: 24px; height: 24px; border-radius: 50%; }

.la-panel-header__text { flex: 1; min-width: 0; }

.la-panel-header__title {
	font-family: 'Playfair Display','Cormorant Garamond',Georgia,serif;
	font-size: 14px;
	color: var(--la-text);
	letter-spacing: 1px;
}

.la-panel-header__subtitle {
	font-size: 11px;
	color: var(--la-text-soft);
	margin-top: 2px;
}

.la-panel-header__close {
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-soft) !important;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 8px;
}

.la-panel-body { padding: 14px 18px 18px; }

/* =====================================================================
   FEEDBACK (thumbs up/down)
   ===================================================================== */

.la-feedback {
	margin-top: 6px;
	font-size: 11px;
	color: var(--la-text-muted);
}
.la-feedback button {
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-muted) !important;
	font-size: 13px;
	cursor: pointer;
	padding: 2px 4px;
}
.la-feedback button:hover { color: var(--la-gold-1) !important; }
.la-feedback button.is-active { color: var(--la-gold-1) !important; }

/* =====================================================================
   MOBILE
   ===================================================================== */

@media (max-width: 600px) {
	/* Closer to the edge than desktop's 20px inset — wasted space on a narrow
	   screen — but kept large enough that the Digby image (which now fills the
	   whole button) actually reads clearly. */
	.la-bubble-launcher {
		right: 10px;
		width: 64px;
		height: 64px;
		/* --la-mobile-offset (px, set per-site in Appearance settings) plus a flat
		   10% of viewport height, so it clears whatever fixed bottom bar the site
		   itself has — its own nav, an "Add to cart" bar, etc — and scales
		   sensibly across different phone screen sizes rather than a fixed guess. */
		bottom: calc(16px + 10vh + var(--la-mobile-offset, 80px) + env(safe-area-inset-bottom, 0px));
	}
	.la-bubble-launcher.la-bubble-launcher--labeled {
		width: auto;
		height: 48px;
		padding: 4px 14px 4px 4px;
	}
	.la-bubble-launcher--labeled img {
		width: 40px;
		height: 40px;
	}
	.la-bubble-launcher__label-text {
		font-size: 13px;
	}
	/* Chat open on mobile = full-screen takeover (below): the launcher and the
	   proactive preview have nothing left to float over, so hide both rather
	   than risk them showing through or overlapping the open panel. */
	body.la-chat-open .la-bubble-launcher,
	body.la-chat-open .la-preview {
		display: none !important;
	}
	/* A proper full-screen app-style panel, not a floating card — the previous
	   inset "card" (top:15vh, 10px margins) read as cramped and, combined with
	   the launcher/preview still visible underneath, could visually overlap
	   them. 100dvh (falls back to 100vh where unsupported) tracks the on-screen
	   keyboard on modern mobile browsers without the old "fixed + 100vh" bug. */
	.la-bubble-panel {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-width: none;
		max-height: none;
		border: 0;
		border-radius: 0;
	}
	.la-bubble-panel.is-open { animation: none; }
	.la-bubble-header { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
	.la-bubble-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
	/* Well clear of the launcher regardless of label length — was tuned for the
	   plain icon launcher and became a near-overlap once the labeled pill (with
	   its own text) shipped; kept generous rather than re-tuned to the exact
	   labeled height so a future launcher style change can't reopen this. */
	.la-preview {
		right: 10px;
		bottom: calc(96px + 10vh + var(--la-mobile-offset, 80px) + env(safe-area-inset-bottom, 0px));
		max-width: calc(100vw - 40px);
	}
	.la-searchbar {
		max-width: 100%;
		padding: 4px 4px 4px 14px;
	}
	.la-searchbar__submit {
		padding: 8px 14px;
		font-size: 12px;
	}
}

/* Prevent the page behind from scrolling while the full-screen mobile panel is open. */
@media (max-width: 600px) {
	body.la-chat-open { overflow: hidden !important; }
}

/* =====================================================================
   v0.0.2 — product cards, quick-reply chips, hand-off button
   ===================================================================== */

.la-cards {
	display: grid;
	gap: 8px;
	margin: 0 0 14px;
}

.la-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	text-decoration: none;
	color: var(--la-text);
}
.la-card:hover { border-color: var(--la-border-strong); }

.la-card img,
.la-card__noimg {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: rgba(245,237,224,0.06);
	border-radius: 2px;
}

.la-card__meta { display: flex; flex-direction: column; min-width: 0; }
.la-card__name { font-size: 13px; line-height: 1.35; }
.la-card__price { font-size: 13px; color: var(--la-gold-1); }
.la-card__oos { font-size: 11.5px; color: var(--la-text-muted); }

.la-card-row { display: flex; flex-direction: column; gap: 4px; }
.la-card__add {
	align-self: flex-start;
	background: transparent !important;
	border: 1px solid var(--la-border-strong) !important;
	color: var(--la-gold-1) !important;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
}
.la-card__add:hover { background: rgba(201,169,97,0.1) !important; }
.la-card__add:disabled { opacity: .55; cursor: default; }

/* Vertical quick-action list — a clean menu of rows (icon, label, chevron)
   rather than wrapped pill chips, closer to how most commercial chat widgets
   present the opening options when there are more than two or three. */
.la-chips {
	display: flex;
	flex-direction: column;
	margin: 4px 0 14px;
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius-lg);
	overflow: hidden;
	background: var(--la-bg-input);
}
.la-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--la-border) !important;
	color: var(--la-text) !important;
	padding: 11px 12px;
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.la-chips .la-chip:last-child { border-bottom: 0 !important; }
.la-chip:hover { background: rgba(201,169,97,0.08) !important; }
.la-chip__icon { flex-shrink: 0; color: var(--la-gold-1); display: flex; }
.la-chip__text { flex: 1; min-width: 0; }
.la-chip__arrow { flex-shrink: 0; color: var(--la-text-muted); font-size: 16px; }

/* Second+ greeting bubble aligns under the first instead of repeating the avatar. */
.la-msg-avatar--spacer { width: 22px; flex-shrink: 0; }

.la-handoff {
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--la-border);
	color: var(--la-text-soft);
	padding: 8px 12px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
}
.la-handoff[hidden] { display: none; }
.la-handoff:hover { color: var(--la-gold-1); }

/* =====================================================================
   v0.0.4 — live chat with the team
   ===================================================================== */

.la-live-div {
	text-align: center;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--la-gold-2);
	margin: 6px 0 12px;
	padding-top: 10px;
	border-top: 1px solid var(--la-border);
}

.la-msg-agent {
	background: rgba(201,169,97,0.12);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	padding: 8px 10px;
	white-space: pre-wrap;
}
.la-agent-name {
	display: block;
	font-size: 11px;
	color: var(--la-gold-1);
	margin-bottom: 2px;
}

.la-handoff-form {
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	padding: 12px;
	margin: 0 0 14px;
}
.la-handoff-form input,
.la-handoff-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 8px;
	background: var(--la-bg-deep);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
	color: var(--la-text);
	padding: 8px 10px;
	font: inherit;
	font-size: 13.5px;
}
.la-form-title { font-size: 13px; color: var(--la-text-soft); margin: 0 0 10px; }
.la-form-err { color: #eb8f8f; font-size: 12.5px; min-height: 16px; }
.la-form-actions { display: flex; gap: 8px; margin-top: 4px; }
.la-btn {
	background: linear-gradient(135deg, var(--la-gold-1), var(--la-gold-2), var(--la-gold-3)) !important;
	color: var(--la-bg-deep) !important;
	border: 0 !important;
	border-radius: var(--la-radius);
	padding: 7px 14px;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.la-btn:disabled { opacity: .5; }
.la-btn-ghost { background: transparent !important; color: var(--la-gold-1) !important; border: 1px solid var(--la-border-strong) !important; }

/* Keep the hand-off button in our style whatever the theme does to buttons on focus/hover. */
.la-panel .la-handoff,
.la-bubble-panel .la-handoff,
.la-panel .la-handoff:hover, .la-panel .la-handoff:focus, .la-panel .la-handoff:active,
.la-bubble-panel .la-handoff:hover, .la-bubble-panel .la-handoff:focus, .la-bubble-panel .la-handoff:active {
	background: transparent;
	color: var(--la-text-soft);
	border: 0;
	border-top: 1px solid var(--la-border);
	box-shadow: none;
	border-radius: 0;
	outline: none;
}
.la-panel .la-handoff:hover, .la-bubble-panel .la-handoff:hover { color: var(--la-gold-1); }

/* =====================================================================
   v0.0.5 — CSAT rating after a live chat ends
   ===================================================================== */

.la-csat {
	text-align: center;
	margin: 4px 0 14px;
	padding: 10px;
	background: var(--la-bg-input);
	border: 1px solid var(--la-border);
	border-radius: var(--la-radius);
}
.la-csat-q { font-size: 13px; color: var(--la-text-soft); margin-bottom: 8px; }
.la-csat-btns { display: flex; align-items: center; justify-content: center; gap: 10px; }
.la-csat-btn {
	background: transparent !important;
	border: 1px solid var(--la-border-strong) !important;
	border-radius: 999px;
	width: 34px;
	height: 34px;
	font-size: 16px;
	cursor: pointer;
}
.la-csat-btn:hover { background: rgba(201,169,97,0.1) !important; }
.la-csat-skip {
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-muted) !important;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.la-csat-thanks { font-size: 12.5px; color: var(--la-text-soft); }

/* =====================================================================
   v0.0.10 — proactive greeting preview above the bubble
   ===================================================================== */

.la-preview {
	position: fixed;
	right: 20px;
	bottom: 104px;
	max-width: 260px;
	background: var(--la-bg-card);
	border: 1px solid var(--la-border-strong);
	border-radius: var(--la-radius-lg);
	box-shadow: var(--la-shadow);
	padding: 14px 32px 14px 16px;
	cursor: pointer;
	z-index: 99997;
	animation: la-fade-in 220ms ease-out;
}

.la-preview-text {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--la-text);
}

.la-preview-close {
	position: absolute !important;
	top: 6px;
	right: 8px;
	background: transparent !important;
	border: 0 !important;
	color: var(--la-text-muted) !important;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}
.la-preview-close:hover { color: var(--la-gold-1) !important; }