/**
 * BAS Public Assistant — Widget Styles
 *
 * Color system:
 *   --bea-accent          : Teal #30b2b4 (default) — overridden per-vendor in store_page mode
 *   --bea-accent-dark     : Darker teal for hover states
 *   --bea-sage            : Sage green #70ac43
 *   --bea-sage-light      : Lime green #c2e86b (gradient top)
 *   --bea-forest          : Forest green #1d741b (link color)
 *   --bea-cream           : Warm cream #fffbef (Bea bubble bg)
 *   --bea-charcoal        : #313131 (body text)
 *
 * Teal is the primary accent (vs. sage green in dashboard Bea)
 * to visually distinguish public Bea from the vendor dashboard widget.
 *
 * @package BAS_Public_Assistant
 * @since   0.1.0
 */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
.bas-pa-widget {
	--bea-accent       : #30b2b4;
	--bea-accent-dark  : #228e90;
	--bea-accent-alpha : rgba(48, 178, 180, 0.12);
	--bea-sage         : #70ac43;
	--bea-sage-light   : #c2e86b;
	--bea-forest       : #1d741b;
	--bea-yellow       : #ffda3d;
	--bea-orange       : #ff4c25;
	--bea-cream        : #fffbef;
	--bea-charcoal     : #313131;
	--bea-white        : #ffffff;
	--bea-border       : rgba(0, 0, 0, 0.08);
	--bea-shadow       : 0 8px 32px rgba(0, 0, 0, 0.18);
	--bea-radius-panel : 16px;
	--bea-radius-bubble: 12px;
	--bea-radius-btn   : 100px;
	--bea-panel-w      : 360px;
	--bea-panel-h      : 520px;
	--bea-z            : 99999;
	font-family        : Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Widget Root ───────────────────────────────────────────────────────────── */
.bas-pa-widget *,
.bas-pa-widget *::before,
.bas-pa-widget *::after {
	box-sizing: border-box;
}

/* ── Intro Speech Bubble (Phase 5) ─────────────────────────────────────────── */
.bas-pa-intro-bubble {
	position      : fixed;
	bottom        : 112px;   /* sits above the 76px trigger */
	right         : 24px;
	z-index       : calc(var(--bea-z) - 1);
	background    : var(--bea-white);
	color         : var(--bea-charcoal);
	border        : 1px solid var(--bea-border);
	border-radius : 12px 12px 4px 12px;
	padding       : 11px 14px;
	font-size     : 13px;
	line-height   : 1.45;
	max-width     : 230px;
	box-shadow    : 0 4px 16px rgba(0, 0, 0, 0.14);
	/* Hidden by default */
	opacity       : 0;
	transform     : translateY(8px) scale(0.95);
	pointer-events: none;
	transition    : opacity 0.3s ease, transform 0.3s ease;
}

.bas-pa-intro-bubble--visible {
	opacity       : 1;
	transform     : translateY(0) scale(1);
	pointer-events: none;  /* click passes through to trigger */
}

/* ── Trigger Bubble ────────────────────────────────────────────────────────── */
.bas-pa-trigger {
	position        : fixed;
	bottom          : 24px;
	right           : 24px;
	z-index         : var(--bea-z);
	width           : 76px;   /* Phase 5: was 64px — slightly bigger for visibility */
	height          : 76px;
	border-radius   : 50%;
	/* Gold gradient — signals "this is Bea" before the panel opens */
	background      : linear-gradient(145deg, #ffda3d 0%, #fccd06 100%);
	border          : none;
	cursor          : pointer;
	display         : flex;
	align-items     : center;
	justify-content : center;
	/* overflow:visible lets Bea's wings + antennae pop above the circle */
	overflow        : visible;
	box-shadow      : 0 4px 18px rgba(252, 205, 6, 0.55), 0 2px 8px rgba(0, 0, 0, 0.12);
	transition      : transform 0.2s ease, box-shadow 0.2s ease;
	padding         : 0;
}

.bas-pa-trigger:hover {
	transform  : scale(1.07);
	box-shadow : 0 6px 24px rgba(252, 205, 6, 0.70), 0 3px 10px rgba(0, 0, 0, 0.14);
}

.bas-pa-trigger:focus-visible {
	outline        : 3px solid #fccd06;
	outline-offset : 3px;
}

/* Phase 5: intro grow animation — fires once on first visit */
.bas-pa-trigger--intro {
	animation: basPA-beaIntro 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes basPA-beaIntro {
	0%   { transform: scale(0.7); }
	100% { transform: scale(1); }
}

/* Real Bea PNG — floats above and within the bubble.
   721×768px source → taller-than-wide, so control by height. */
.bas-pa-trigger__bee {
	position        : absolute;
	height          : 96px;   /* Phase 5: was 82px — bigger for visibility */
	width           : auto;
	bottom          : -4px;   /* anchor to bubble bottom; head + wings rise above */
	left            : 50%;
	transform       : translateX(-50%);
	pointer-events  : none;
	/* No drop-shadow — clean crisp edges */
	animation       : basPA-beaFloat 3s ease-in-out infinite;
}

@keyframes basPA-beaFloat {
	0%,  100% { transform: translateX(-50%) translateY(0);    }
	50%        { transform: translateX(-50%) translateY(-5px); }
}

/* ── Chat Panel ────────────────────────────────────────────────────────────── */
.bas-pa-panel {
	position      : fixed;
	bottom        : 112px;   /* Phase 5: was 96px — accounts for taller 76px trigger */
	right         : 24px;
	z-index       : var(--bea-z);
	width         : var(--bea-panel-w);
	max-height    : var(--bea-panel-h);
	background    : var(--bea-white);
	border-radius : var(--bea-radius-panel);
	box-shadow    : var(--bea-shadow);
	border        : 1px solid var(--bea-border);
	display       : flex;
	flex-direction: column;
	overflow      : hidden;
	/* Hidden by default — shown by JS adding --open class */
	opacity       : 0;
	transform     : translateY(12px) scale(0.97);
	pointer-events: none;
	transition    : opacity 0.22s ease, transform 0.22s ease;
}

.bas-pa-panel--open {
	opacity       : 1;
	transform     : translateY(0) scale(1);
	pointer-events: all;
}

.bas-pa-panel:focus {
	outline: none;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.bas-pa-header {
	background      : linear-gradient(135deg, var(--bea-accent) 0%, var(--bea-accent-dark) 100%);
	padding         : 14px 16px;
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	flex-shrink     : 0;
}

.bas-pa-header__info {
	display    : flex;
	align-items: center;
	gap        : 10px;
}

.bas-pa-header__avatar {
	flex-shrink : 0;
	display     : flex;
	align-items : center;    /* Phase 5: was flex-end — center vertically for better alignment */
	overflow    : visible;   /* let her wings breathe */
	margin-left : 2px;       /* Phase 5: tiny nudge right so she's not flush against the panel edge */
}

/* 721×768 PNG — control by height so she stays centred in the header.
   No drop-shadow, no filter — clean edges on the teal gradient background. */
.bas-pa-header__avatar-img {
	height    : 40px;        /* Phase 5: was 44px — sized to sit cleanly in header without overflow */
	width     : auto;
	display   : block;
	animation : basPA-beaFloat 3s ease-in-out infinite;
}

.bas-pa-header__name {
	display    : block;
	color      : var(--bea-white);
	font-size  : 16px;
	font-weight: 700;
	line-height: 1.2;
	font-family: 'Playfair Display', Georgia, serif;
}

.bas-pa-header__subtitle {
	display    : block;
	color      : rgba(255, 255, 255, 0.85);
	font-size  : 11px;
	font-weight: 400;
	line-height: 1.3;
}

.bas-pa-header__close {
	background    : rgba(255, 255, 255, 0.2);
	border        : none;
	border-radius : 50%;
	width         : 30px;
	height        : 30px;
	cursor        : pointer;
	display       : flex;
	align-items   : center;
	justify-content: center;
	color         : var(--bea-white);
	flex-shrink   : 0;
	transition    : background 0.15s ease;
}

.bas-pa-header__close:hover {
	background: rgba(255, 255, 255, 0.35);
}

.bas-pa-header__close:focus-visible {
	outline       : 2px solid var(--bea-white);
	outline-offset: 2px;
}

/* ── Phase 4: Header Actions (restart + close grouped together) ────────────── */
.bas-pa-header__actions {
	display    : flex;
	align-items: center;
	gap        : 8px;
	flex-shrink: 0;
}

/* "↩ Start over" — small text link, always visible when panel is open */
.bas-pa-header__restart {
	background    : none;
	border        : none;
	cursor        : pointer;
	color         : rgba(255, 255, 255, 0.80);
	font-size     : 11px;
	font-weight   : 500;
	line-height   : 1;
	padding       : 4px 6px;
	border-radius : 4px;
	white-space   : nowrap;
	transition    : color 0.15s ease, background 0.15s ease;
}

.bas-pa-header__restart:hover {
	color      : var(--bea-white);
	background : rgba(255, 255, 255, 0.15);
}

.bas-pa-header__restart:focus-visible {
	outline       : 2px solid var(--bea-white);
	outline-offset: 2px;
}

/* ── Messages Area ─────────────────────────────────────────────────────────── */
.bas-pa-messages {
	flex         : 1;
	overflow-y   : auto;
	padding      : 16px 14px 8px;
	scroll-behavior: smooth;
	display      : flex;
	flex-direction: column;
	gap          : 8px;
}

.bas-pa-messages::-webkit-scrollbar {
	width: 4px;
}
.bas-pa-messages::-webkit-scrollbar-track {
	background: transparent;
}
.bas-pa-messages::-webkit-scrollbar-thumb {
	background    : var(--bea-accent-alpha);
	border-radius : 4px;
}

/* ── Message Bubbles ───────────────────────────────────────────────────────── */
.bas-pa-msg {
	display      : flex;
	max-width    : 88%;
	animation    : basPA-fadeIn 0.2s ease;
}

@keyframes basPA-fadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Bea's messages — left-aligned, warm cream */
.bas-pa-msg--bea {
	align-self: flex-start;
	margin-right: auto;
}

.bas-pa-msg--bea .bas-pa-msg__bubble {
	background    : var(--bea-cream);
	color         : var(--bea-charcoal);
	border        : 1px solid var(--bea-border);
	border-radius : 4px var(--bea-radius-bubble) var(--bea-radius-bubble) var(--bea-radius-bubble);
	padding       : 10px 13px;
	font-size     : 13.5px;
	line-height   : 1.55;
}

/* User messages — right-aligned, sage green */
.bas-pa-msg--user {
	align-self : flex-end;
	margin-left: auto;
}

.bas-pa-msg--user .bas-pa-msg__bubble {
	background    : var(--bea-sage);
	color         : var(--bea-white);
	border-radius : var(--bea-radius-bubble) 4px var(--bea-radius-bubble) var(--bea-radius-bubble);
	padding       : 10px 13px;
	font-size     : 13.5px;
	line-height   : 1.55;
}

/* Bea bubble typography */
.bas-pa-msg--bea .bas-pa-msg__bubble strong {
	color       : var(--bea-charcoal);
	font-weight : 700;
}

.bas-pa-msg--bea .bas-pa-msg__bubble a,
.bas-pa-msg--bea .bas-pa-msg__bubble em {
	color          : var(--bea-forest);
	text-decoration: underline;
	font-style     : normal;
}

/* ── Thinking Indicator (animated dots) ────────────────────────────────────── */
.bas-pa-msg--thinking .bas-pa-msg__bubble {
	display    : flex;
	align-items: center;
	gap        : 5px;
	padding    : 12px 16px;
}

.bas-pa-dot {
	width         : 7px;
	height        : 7px;
	border-radius : 50%;
	background    : var(--bea-accent);
	display       : inline-block;
	animation     : basPA-bounce 1.2s infinite;
}

.bas-pa-dot:nth-child(2) { animation-delay: 0.2s; }
.bas-pa-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes basPA-bounce {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
	40%            { transform: translateY(-6px); opacity: 1; }
}

/* ── Button Rows ───────────────────────────────────────────────────────────── */
.bas-pa-btn-row {
	display        : flex;
	flex-direction : column;
	gap            : 6px;
	align-self     : stretch;
	animation      : basPA-fadeIn 0.25s ease;
}

.bas-pa-btn-row--used {
	opacity: 0.55;
}

.bas-pa-btn {
	display         : block;
	width           : 100%;
	padding         : 9px 16px;
	border-radius   : var(--bea-radius-btn);
	font-size       : 13px;
	font-weight     : 700;
	font-family     : Lato, -apple-system, sans-serif;
	cursor          : pointer;
	transition      : opacity 0.15s ease, transform 0.12s ease;
	text-align      : center;
	text-decoration : none;
	line-height     : 1.3;
	white-space     : normal;
	word-break      : break-word;
}

.bas-pa-btn:hover:not(:disabled) {
	opacity  : 0.88;
	transform: translateY(-1px);
}

.bas-pa-btn:active:not(:disabled) {
	transform: translateY(0);
}

.bas-pa-btn:disabled {
	cursor : not-allowed;
	opacity: 0.55;
}

.bas-pa-btn:focus-visible {
	outline       : 2px solid var(--bea-charcoal);
	outline-offset: 2px;
}

/* Primary — sage gradient */
.bas-pa-btn--primary {
	background : linear-gradient(180deg, var(--bea-sage-light) 0%, var(--bea-sage) 100%);
	color      : var(--bea-white);
	border     : 1px solid var(--bea-sage);
}

/* Secondary — accent (teal) outline */
.bas-pa-btn--secondary {
	background : var(--bea-white);
	color      : var(--bea-accent);
	border     : 1.5px solid var(--bea-accent);
}

/* ── Footer / Input Area ───────────────────────────────────────────────────── */
.bas-pa-footer {
	padding     : 10px 12px 12px;
	border-top  : 1px solid var(--bea-border);
	flex-shrink : 0;
	background  : var(--bea-white);
}

.bas-pa-footer__row {
	display    : flex;
	align-items: stretch;
	gap        : 8px;
}

.bas-pa-input {
	flex          : 1;
	padding       : 9px 13px;
	border        : 1.5px solid var(--bea-border);
	border-radius : var(--bea-radius-btn);
	font-size     : 13.5px;
	font-family   : Lato, -apple-system, sans-serif;
	color         : var(--bea-charcoal);
	background    : var(--bea-cream);
	outline       : none;
	transition    : border-color 0.15s ease;
}

.bas-pa-input:focus {
	border-color: var(--bea-accent);
}

.bas-pa-input::placeholder {
	color  : rgba(49, 49, 49, 0.45);
}

.bas-pa-send {
	width           : 38px;
	height          : 38px;
	border-radius   : 50%;
	background      : linear-gradient(180deg, var(--bea-sage-light) 0%, var(--bea-sage) 100%);
	border          : 1px solid var(--bea-sage);
	color           : var(--bea-white);
	cursor          : pointer;
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-shrink     : 0;
	transition      : opacity 0.15s ease, transform 0.12s ease;
	padding         : 0;
}

.bas-pa-send:hover {
	opacity  : 0.88;
	transform: scale(1.05);
}

.bas-pa-send:focus-visible {
	outline       : 2px solid var(--bea-sage);
	outline-offset: 2px;
}

/* ── Phase 2: Geo Result Cards ─────────────────────────────────────────────── */

.bas-pa-results {
	display        : flex;
	flex-direction : column;
	gap            : 8px;
	margin         : 4px 8px 4px 0;
	width          : 100%;
}

.bas-pa-result-card {
	background    : var(--bea-cream, #fffbef);
	border        : 1px solid var(--bea-accent);
	border-radius : 10px;
	padding       : 10px 12px;
	font-size     : 13px;
	line-height   : 1.45;
	display       : flex;
	flex-direction: column;
	gap           : 2px;
}

.bas-pa-result-card__name {
	font-weight : 700;
	color       : #313131;
	font-size   : 13px;
}

.bas-pa-result-card__meta {
	color    : #666;
	font-size: 11.5px;
}

.bas-pa-result-card__detail {
	display  : block;
	color    : #555;
	font-size: 11.5px;
}

.bas-pa-result-card__link {
	display      : inline-block;
	margin-top   : 6px;
	color        : #1d741b;
	font-weight  : 600;
	font-size    : 12px;
	text-decoration: underline;
}

.bas-pa-result-card__link:hover {
	color: #145914;
}

/* ── Phase 2: Article Cards (content search results) ───────────────────────── */

.bas-pa-article-card {
	background    : #f5f5f0;
	border-left   : 3px solid var(--bea-accent);
	border-radius : 0 8px 8px 0;
	padding       : 10px 12px;
	font-size     : 13px;
	line-height   : 1.45;
}

.bas-pa-article-card__title {
	display        : block;
	font-weight    : 700;
	color          : #313131;
	text-decoration: none;
	margin-bottom  : 4px;
	font-size      : 13px;
}

.bas-pa-article-card__title:hover {
	color: #1d741b;
	text-decoration: underline;
}

.bas-pa-article-card__excerpt {
	color      : #555;
	font-size  : 11.5px;
	margin     : 0 0 6px;
	line-height: 1.4;
}

.bas-pa-article-card__link {
	color          : #1d741b;
	font-size      : 12px;
	font-weight    : 600;
	text-decoration: underline;
}

.bas-pa-article-card__link:hover {
	color: #145914;
}

/* ── Phase 6: Live Search Widget ───────────────────────────────────────────── */

.bas-pa-live-search {
	background    : var(--bea-cream, #fffbef);
	border        : 1px solid #ddd;
	border-radius : 12px;
	padding       : 12px 12px 10px;
	margin        : 6px 0 4px;
	display       : flex;
	flex-direction: column;
	gap           : 8px;
}

/* Input row: text field + spinner side-by-side */
.bas-pa-live-search__row {
	display        : flex;
	align-items    : center;
	gap            : 8px;
	background     : #fff;
	border         : 1.5px solid var(--bea-accent, #30b2b4);
	border-radius  : 8px;
	padding        : 4px 10px;
}

.bas-pa-live-search__input {
	flex       : 1;
	border     : none;
	outline    : none;
	background : transparent;
	font-size  : 13px;
	color      : #313131;
	padding    : 5px 0;
	font-family: inherit;
}

.bas-pa-live-search__input::placeholder {
	color: #aaa;
}

/* Animated spinner — three dots */
.bas-pa-live-search__spinner {
	width          : 16px;
	height         : 16px;
	border         : 2px solid var(--bea-accent, #30b2b4);
	border-top-color: transparent;
	border-radius  : 50%;
	display        : inline-block;
	animation      : basPA-spin 0.7s linear infinite;
	flex-shrink    : 0;
}

.bas-pa-live-search__spinner[hidden] {
	display: none;
}

/* Results container */
.bas-pa-live-search__results {
	display       : flex;
	flex-direction: column;
	gap           : 6px;
	min-height    : 32px;
}

.bas-pa-live-search__hint,
.bas-pa-live-search__empty {
	color      : #888;
	font-size  : 12px;
	margin     : 4px 0 2px;
	font-style : italic;
}

/* Individual result card */
.bas-pa-live-search__card {
	background    : #fff;
	border        : 1px solid #e5e5e5;
	border-radius : 8px;
	overflow      : hidden;
	transition    : border-color 0.15s, box-shadow 0.15s;
}

.bas-pa-live-search__card:hover {
	border-color: var(--bea-accent, #30b2b4);
	box-shadow  : 0 2px 8px rgba(0,0,0,0.08);
}

/* The card is a single <a> tag wrapping thumb + body */
.bas-pa-live-search__card-link {
	display        : flex;
	align-items    : flex-start;
	gap            : 0;
	text-decoration: none;
	color          : inherit;
}

.bas-pa-live-search__thumb {
	width      : 64px;
	min-width  : 64px;
	height     : 64px;
	object-fit : cover;
	flex-shrink: 0;
	border-radius: 8px 0 0 8px;
}

.bas-pa-live-search__card-body {
	display       : flex;
	flex-direction: column;
	gap           : 2px;
	padding       : 8px 10px;
	min-width     : 0; /* allows text to truncate */
}

.bas-pa-live-search__card-title {
	font-weight   : 700;
	font-size     : 12.5px;
	color         : #313131;
	line-height   : 1.3;
	display       : -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow      : hidden;
}

.bas-pa-live-search__card-excerpt {
	font-size     : 11px;
	color         : #666;
	line-height   : 1.4;
	display       : -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow      : hidden;
}

.bas-pa-live-search__card-cta {
	font-size  : 11px;
	color      : var(--bea-forest, #1d741b);
	font-weight: 600;
	margin-top : 2px;
}

/* Back-to-menu button — secondary outline, full width */
.bas-pa-live-search__back {
	width     : 100%;
	text-align: center;
	margin-top: 2px;
}

/* Spin animation (shared with thinking dots' parent if needed) */
@keyframes basPA-spin {
	to { transform: rotate(360deg); }
}

/* ── Screen-reader only utility ────────────────────────────────────────────── */
.screen-reader-text {
	position  : absolute;
	width     : 1px;
	height    : 1px;
	padding   : 0;
	margin    : -1px;
	overflow  : hidden;
	clip      : rect(0, 0, 0, 0);
	white-space: nowrap;
	border    : 0;
}

/* ── Responsive — mobile ───────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.bas-pa-panel {
		width         : calc(100vw - 24px);
		right         : 12px;
		bottom        : 100px;   /* Phase 5: was 84px — accounts for taller trigger */
		border-radius : 12px;
		max-height    : calc(100vh - 120px);
	}

	.bas-pa-trigger {
		width : 68px;   /* Phase 5: slightly smaller on mobile to save space */
		height: 68px;
		right : 16px;
		bottom: 20px;
	}

	.bas-pa-intro-bubble {
		right    : 16px;
		max-width: 200px;
		bottom   : 100px;
	}
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.bas-pa-panel,
	.bas-pa-trigger,
	.bas-pa-btn,
	.bas-pa-msg {
		transition : none;
		animation  : none;
	}

	.bas-pa-dot {
		animation: none;
		opacity  : 1;
	}
}