/* =====================================================================
   Expoverse — session AI assistant (paired with assistant.js)
   A glass launcher pill just above the Exhibitors / Visit-reception pill,
   and a chat popover floating above it. Same glass language as the rest.
   ===================================================================== */

/* ---- launcher (round avatar button, bottom-right corner) ---------- */
.expo-ai-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 2147481650;
	width: 58px;
	height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #06121f;
	cursor: pointer;
	background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8));
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: 50%;
	box-shadow: 0 14px 32px rgba(95, 90, 220, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	backdrop-filter: blur(12px) saturate(150%);
	transition: transform .4s cubic-bezier(.22, 1.4, .42, 1), opacity .25s ease, box-shadow .2s ease;
}
.expo-ai-fab svg { width: 30px; height: 30px; }
.expo-ai-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 18px 40px rgba(95, 90, 220, .55), inset 0 1px 0 rgba(255, 255, 255, .55); }
.expo-ai-fab:active { transform: scale(.95); }
/* gentle attention pulse */
.expo-ai-fab::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(94, 234, 212, .5);
	animation: expo-ai-pulse 3.6s ease-out infinite;
	pointer-events: none;
}
@keyframes expo-ai-pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, .45); } 60%, 100% { box-shadow: 0 0 0 16px rgba(94, 234, 212, 0); } }
.expo-ai-fab.is-hidden, .expo-ai-fab.is-away { opacity: 0; transform: translateY(140%); pointer-events: none; }

@media (max-width: 760px) {
	.expo-ai-fab { right: 14px; bottom: 14px; width: 54px; height: 54px; }
	.expo-ai-fab svg { width: 28px; height: 28px; }
}

/* ---- chat popover (floats above the pill) ------------------------- */
.expo-ai-panel {
	position: fixed;
	right: 18px;
	bottom: 18px;
	transform: translateY(18px) scale(.97);
	transform-origin: bottom right;
	z-index: 2147481650;
	display: none;
	flex-direction: column;
	width: min(410px, calc(100vw - 28px));
	height: min(560px, 70vh);
	color: #f4f7ff;
	font-family: var(--expo-font, 'Inter', system-ui, sans-serif);
	/* NO container box — messages float as liquid-glass bubbles over the 3D scene;
	   only the header bar and the control box below are solid glass */
	gap: 9px;
	background: none;
	border: 0;
	opacity: 0;
	transition: transform .42s cubic-bezier(.22, 1.3, .4, 1), opacity .28s ease;
	pointer-events: none;               /* gaps between elements let clicks reach the scene */
}
.expo-ai-panel > * { pointer-events: auto; }
.expo-ai-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }

/* title + close strip — lives INSIDE the bottom control box (no top bar) */
.expo-ai-bar {
	display: flex; align-items: center; gap: 8px;
	padding: 1px 3px 7px 7px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.expo-ai-row { display: flex; align-items: center; gap: 9px; }
.expo-ai-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--expo-accent-1, #5eead4); box-shadow: 0 0 9px var(--expo-accent-1, #5eead4); }
.expo-ai-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 13px; letter-spacing: .01em; color: rgba(244, 247, 255, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.expo-ai-close {
	width: 28px; height: 28px; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	color: #f4f7ff; cursor: pointer;
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
	transition: background .15s ease, transform .15s ease;
}
.expo-ai-close svg { width: 13px; height: 13px; }
.expo-ai-close:hover { background: rgba(255, 255, 255, .2); transform: scale(1.08); }

/* "stop the voice" — appears in the bar only while the assistant is speaking */
.expo-ai-mute {
	width: 28px; height: 28px; flex: 0 0 auto;
	display: none; align-items: center; justify-content: center;
	color: #ffd9de; cursor: pointer;
	background: rgba(255, 82, 105, .2); border: 1px solid rgba(255, 82, 105, .42); border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(255, 82, 105, .5);
	transition: background .15s ease, transform .15s ease;
	animation: expo-ai-mute-pulse 1.5s ease-out infinite;
}
.expo-ai-mute.is-on { display: inline-flex; }
.expo-ai-mute svg { width: 15px; height: 15px; }
.expo-ai-mute:hover { background: rgba(255, 82, 105, .34); transform: scale(1.08); }
.expo-ai-mute:active { transform: scale(.92); }
@keyframes expo-ai-mute-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 82, 105, .45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 82, 105, 0); } }

/* feed — newest at the bottom, older messages fade out (opacity set in JS),
   plus a soft mask so they dissolve into the top edge */
.expo-ai-feed {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	/* generous padding so the soft bubble shadows have room and aren't clipped
	   into hard edges by the scroll overflow */
	padding: 8px 10px 12px 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .34) transparent;
	/* dissolve the older messages into total transparency at the top — a gentle,
	   gradual ramp so the bottom bubbles stay crisp and the fade eases in slowly */
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .35) 60px, #000 150px);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .35) 60px, #000 150px);
}
.expo-ai-feed::-webkit-scrollbar { width: 7px; }
.expo-ai-feed::-webkit-scrollbar-track { background: transparent; }
.expo-ai-feed::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .32); border-radius: 4px; }
.expo-ai-feed::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .48); }
.expo-ai-msg {
	max-width: 88%;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.42;
	border-radius: 17px;
	word-wrap: break-word;
	transition: opacity .6s ease;
	/* each new bubble bounces up into place (backwards fill, no forwards, so the
	   JS-driven recency opacity still takes over once it has settled) */
	animation: expo-ai-msg-in .44s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
/* anchor the conversation to the BOTTOM: free space sits above the oldest
   message, so the latest always rests just above the control box; when the
   feed overflows this collapses to 0 and it scrolls normally */
.expo-ai-msg:first-child { margin-top: auto; }
@keyframes expo-ai-msg-in {
	from { opacity: 0; transform: translateY(20px) scale(.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
/* liquid-glass message bubble (translucent, blurred, refracts the scene behind) */
.expo-ai-msg--bot {
	align-self: flex-start;
	color: #f4f7ff;
	/* even, softly-tinted glass (no heavy dark corner) so the bubble reads as
	   one clean liquid-glass surface rather than a gradient panel */
	background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(22, 27, 44, .34));
	border: 1px solid rgba(255, 255, 255, .2);
	/* soft, tight shadow — no murky overlapping clouds between stacked bubbles */
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border-bottom-left-radius: 6px;
}
.expo-ai-msg--user {
	align-self: flex-end;
	color: #06121f;
	font-weight: 600;
	background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8));
	box-shadow: 0 4px 12px rgba(8, 12, 26, .26), inset 0 1px 0 rgba(255, 255, 255, .4);
	border-bottom-right-radius: 6px;
}

/* suggestion (nav / yes-no) — lives as the last row INSIDE the feed, so it sits
   directly under the bubble that proposed it and stays bottom-anchored */
.expo-ai-suggest:empty { display: none; }
.expo-ai-suggest {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: 0;
	animation: expo-ai-msg-in .4s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.expo-ai-go, .expo-ai-no {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 14px;
	font-family: inherit; font-size: 13.5px; font-weight: 600;
	cursor: pointer; border-radius: 999px;
	transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.expo-ai-go {
	color: #06121f; border: 0;
	background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8));
	box-shadow: 0 4px 12px rgba(95, 90, 220, .28);
}
.expo-ai-go svg { width: 16px; height: 16px; }
.expo-ai-go:hover { transform: translateY(-1px); filter: brightness(1.06); }
.expo-ai-no {
	color: #f4f7ff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
}
.expo-ai-no:hover { background: rgba(255, 255, 255, .16); }

/* status line */
.expo-ai-status:empty { display: none; }
.expo-ai-status {
	flex: 0 0 auto;
	padding: 0 14px 2px;
	font-size: 12px;
	color: rgba(244, 247, 255, .9);
	text-shadow: 0 1px 5px rgba(0, 0, 0, .65);
	min-height: 0;
}
.expo-ai-status.is-listen { color: #ff7a8a; }
.expo-ai-status.is-speak, .expo-ai-status.is-think { color: var(--expo-accent-1, #5eead4); }
.expo-ai-status.is-warn, .expo-ai-status.is-cool { color: #ffd27a; }

/* the control box: a self-contained liquid-glass box holding the title+close
   strip and the mic + input + send row */
.expo-ai-foot {
	flex: 0 0 auto;
	display: flex; flex-direction: column; gap: 8px;
	padding: 9px 10px 10px;
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(18, 22, 38, .5));
	border: 1px solid rgba(255, 255, 255, .2);
	box-shadow: 0 16px 38px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .24);
	-webkit-backdrop-filter: blur(22px) saturate(165%);
	backdrop-filter: blur(22px) saturate(165%);
}
.expo-ai-mic, .expo-ai-send {
	flex: 0 0 auto; width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #f4f7ff; cursor: pointer; border-radius: 50%;
	background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
	transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
	touch-action: none; -webkit-user-select: none; user-select: none;
}
.expo-ai-mic svg, .expo-ai-send svg { width: 20px; height: 20px; }
.expo-ai-mic:hover, .expo-ai-send:hover { background: rgba(255, 255, 255, .18); }
.expo-ai-mic:active { transform: scale(.94); }
.expo-ai-mic.is-rec {
	color: #fff;
	background: linear-gradient(135deg, #ff5269, #ff7a3d);
	border-color: transparent;
	box-shadow: 0 0 0 0 rgba(255, 82, 105, .5);
	animation: expo-ai-rec 1.1s ease-out infinite;
}
@keyframes expo-ai-rec { 0% { box-shadow: 0 0 0 0 rgba(255, 82, 105, .5); } 100% { box-shadow: 0 0 0 12px rgba(255, 82, 105, 0); } }
.expo-ai-send {
	color: #06121f;
	background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8));
	border-color: transparent;
}
.expo-ai-input {
	flex: 1 1 auto; min-width: 0; height: 42px;
	padding: 0 14px;
	font-family: inherit; font-size: 14px;
	color: #f4f7ff;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 21px;
	outline: none;
	transition: border-color .15s ease, background .15s ease;
}
.expo-ai-input::placeholder { color: rgba(244, 247, 255, .45); }
.expo-ai-input:focus { border-color: rgba(94, 234, 212, .55); background: rgba(255, 255, 255, .1); }
.expo-ai-input:disabled, .expo-ai-mic:disabled, .expo-ai-send:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 760px) {
	.expo-ai-panel { right: 8px; bottom: 14px; width: calc(100vw - 16px); height: min(72vh, 72dvh); }
}
@media (prefers-reduced-motion: reduce) {
	.expo-ai-fab::after, .expo-ai-mic.is-rec, .expo-ai-msg, .expo-ai-mute { animation: none; }
}