/*!
 * 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;
}

.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));
	}
	/* top+bottom (not a vh-based height) so the panel actually shrinks when the
	   on-screen keyboard opens, instead of being pushed off-screen by the browser
	   trying to scroll the focused input into view — the classic mobile-Safari
	   "fixed panel + 100vh" bug. A generous top margin (not just a token 40px)
	   keeps it reading as a floating card rather than a full-screen takeover. */
	.la-bubble-panel {
		right: 10px;
		left: 10px;
		top: 15vh;
		bottom: calc(88px + 10vh + var(--la-mobile-offset, 80px) + env(safe-area-inset-bottom, 0px));
		width: auto;
		height: auto;
		max-height: none;
	}
	.la-preview {
		right: 10px;
		bottom: calc(76px + 10vh + var(--la-mobile-offset, 80px) + env(safe-area-inset-bottom, 0px));
		max-width: calc(100vw - 90px);
	}
	.la-searchbar {
		max-width: 100%;
		padding: 4px 4px 4px 14px;
	}
	.la-searchbar__submit {
		padding: 8px 14px;
		font-size: 12px;
	}
}

/* =====================================================================
   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-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.la-chip {
	background: transparent !important;
	border: 1px solid var(--la-border-strong) !important;
	color: var(--la-gold-1) !important;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	cursor: pointer;
	font-family: inherit;
}
.la-chip:hover { background: rgba(201,169,97,0.1) !important; }

.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; }