/* =====================================================================
   Expoverse — Hall dock: Exhibitors · Speakers · Business Directory
   ---------------------------------------------------------------------
   A bottom-centre glass dock that holds the existing "Exhibitors" pill
   (moved in from directory.js) plus two new pills:
     • Speakers            -> glass modal with the hall's live-session video,
                              the hall sponsor and a "View notes" panel
     • <Hall> - Business Directory -> big glass modal embedding the
                              One Step North Business Directory
   Driven by hall-dock.js. Top-level overlay in index.php; reuses the
   tokens + spinner from poi.css. Loads AFTER directory.css so the dock
   rules for .expo-dir-fab win. Delete this file + hall-dock.js + their
   refs in index.php to revert (the Exhibitors pill then floats on its own).
   ===================================================================== */

/* ---- the dock ------------------------------------------------------ */
.expo-dock {
	position: fixed;
	left: 0; right: 0;
	bottom: 22px;
	margin: 0 auto;
	width: max-content;
	max-width: calc(100vw - 176px);      /* clear the "?" (left) and AI (right) corner buttons */
	z-index: 2147481500;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	pointer-events: none;                /* gaps let clicks reach the scene */
}
.expo-dock > * { pointer-events: auto; }

/* the stock Exhibitors pill becomes a normal dock item */
.expo-dock .expo-dir-fab {
	position: static;
	margin: 0;
	max-width: none;
}

/* UI reveal gate (mirrors poi.css): stay hidden until the scene is on screen */
body:not(.expo-ui-ready) .expo-dock {
	opacity: 0 !important;
	transform: scale(.5) !important;
	pointer-events: none !important;
}
body.expo-ui-ready .expo-dock { animation: expo-fab-in .55s var(--expo-elastic) .14s both; }
@media (prefers-reduced-motion: reduce) { body.expo-ui-ready .expo-dock { animation-duration: .01s; } }

/* ---- top bar: Business Directory pill — top-centre on desktop, top-right on phones --- */
.expo-topbar {
	position: fixed;
	left: 0; right: 0;
	top: 16px;
	margin: 0 auto;
	width: max-content;
	max-width: calc(100vw - 160px);      /* clear the menu FAB (left) + booth toggle (right) */
	z-index: 2147481500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: top .3s var(--expo-ease);
}
/* the "Avatar speaking" panel drops into the top-centre slot: step the pill down while it is on */
body:has(.expo-avatar-panel.is-on) .expo-topbar { top: 82px; }
body:not(.expo-ui-ready) .expo-topbar {
	opacity: 0 !important;
	transform: scale(.5) !important;
	pointer-events: none !important;
}
body.expo-ui-ready .expo-topbar { animation: expo-fab-in .55s var(--expo-elastic) .1s both; }
@media (prefers-reduced-motion: reduce) { body.expo-ui-ready .expo-topbar { animation-duration: .01s; } }
.expo-topbar .expo-dock-btn { max-width: 100%; }
.expo-topbar .expo-dock-btn__lbl { overflow: hidden; text-overflow: ellipsis; }

/* ---- new dock pills (same glass language as .expo-dir-fab) --------- */
.expo-dock-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 20px;
	font-family: var(--expo-font);
	font-size: 14px;
	font-weight: 600;
	color: #f4f7ff;
	cursor: pointer;
	background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 999px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	white-space: nowrap;
	transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.expo-dock-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .42); transform: translateY(-2px); }
.expo-dock-btn:active { transform: scale(.97); }
.expo-dock-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Speakers gets a soft accent tint so it reads as the "live" action */
.expo-speak-fab {
	background:
		linear-gradient(135deg, rgba(139, 123, 255, .34), rgba(45, 212, 191, .22)),
		linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
	border-color: rgba(255, 255, 255, .3);
}
.expo-speak-fab:hover { background: linear-gradient(135deg, rgba(139, 123, 255, .46), rgba(45, 212, 191, .3)), rgba(255, 255, 255, .12); }
.expo-speak-fab .expo-live-dot {
	width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
	background: #ff5e72;
	box-shadow: 0 0 0 0 rgba(255, 94, 114, .6);
	animation: expo-live-pulse 1.8s ease-out infinite;
}
@keyframes expo-live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 94, 114, .6); }
	70%  { box-shadow: 0 0 0 7px rgba(255, 94, 114, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 94, 114, 0); }
}
/* Directory pill (top of the hall): accent gradient + glow so it stands out
   from the glass pills; label text comes from the admin console */
.expo-bizdir-fab {
	height: 48px;
	padding: 0 24px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #0a1020;
	background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8));
	border: 1px solid rgba(255, 255, 255, .55);
	box-shadow: 0 12px 30px rgba(94, 234, 212, .35), 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
	animation: expo-bizdir-glow 2.8s ease-in-out infinite;
}
.expo-bizdir-fab:hover { background: linear-gradient(135deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8)); filter: brightness(1.08); border-color: #fff; transform: translateY(-2px) scale(1.03); }
.expo-bizdir-fab svg { width: 20px; height: 20px; }
@keyframes expo-bizdir-glow {
	0%, 100% { box-shadow: 0 12px 30px rgba(94, 234, 212, .35), 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
	50%      { box-shadow: 0 14px 38px rgba(129, 140, 248, .55), 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); }
}
@media (prefers-reduced-motion: reduce) { .expo-bizdir-fab { animation: none; } }

/* ---- hover peek: live thumbnail of the map under the directory pill ---- */
.expo-bd-peek {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px) scale(.96);
	transform-origin: top center;
	width: 336px;
	padding: 8px 8px 10px;
	color: #f4f7ff;
	background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)), rgba(10, 13, 24, .55);
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	backdrop-filter: blur(22px) saturate(160%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--expo-ease), transform .3s var(--expo-elastic);
	z-index: 1;
}
.expo-bd-peek::before {                      /* little arrow up to the pill */
	content: "";
	position: absolute;
	top: -6px; left: 50%;
	width: 11px; height: 11px;
	transform: translateX(-50%) rotate(45deg);
	background: rgba(40, 46, 70, .9);
	border-left: 1px solid rgba(255, 255, 255, .26);
	border-top: 1px solid rgba(255, 255, 255, .26);
}
.expo-bd-peek.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.expo-bd-peek__map {
	position: relative;
	width: 100%;
	aspect-ratio: 1180 / 740;
	overflow: hidden;
	border-radius: 10px;
	background: #0f1a2b;
	border: 1px solid rgba(255, 255, 255, .18);
}
.expo-bd-peek__frame {
	position: absolute;
	top: 0; left: 0;
	border: 0;
	transform-origin: top left;
	pointer-events: none;                    /* the peek is a picture, the pill is the control */
	background: #0f1a2b;
}
.expo-bd-peek__spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.expo-bd-peek__cap { display: flex; flex-direction: column; gap: 1px; padding: 8px 4px 0; font-family: var(--expo-font); }
.expo-bd-peek__cap b { font-size: 13.5px; font-weight: 700; }
.expo-bd-peek__cap span { font-size: 11.5px; color: rgba(244, 247, 255, .68); }
.expo-topbar { overflow: visible; }
@media (max-width: 760px) { .expo-bd-peek { display: none; } }

/* ---- shared modal chrome (speakers + directory) --------------------- */
.expo-sp-backdrop,
.expo-bd-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	background: radial-gradient(120% 120% at 50% 0%, rgba(20, 24, 45, .4), rgba(6, 8, 16, .66));
	-webkit-backdrop-filter: blur(9px) saturate(120%);
	backdrop-filter: blur(9px) saturate(120%);
	opacity: 0;
	transition: opacity .28s var(--expo-ease);
	font-family: var(--expo-font);
	-webkit-tap-highlight-color: transparent;
}
.expo-sp-backdrop.is-open,
.expo-bd-backdrop.is-open { opacity: 1; }

.expo-sp-modal,
.expo-bd-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	color: #f4f7ff;
	background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 22px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
	-webkit-backdrop-filter: blur(26px) saturate(165%);
	backdrop-filter: blur(26px) saturate(165%);
	overflow: hidden;
	transform: translateY(22px) scale(.93);
	opacity: 0;
	transition: transform .44s var(--expo-elastic), opacity .3s var(--expo-ease);
}
.expo-sp-backdrop.is-open .expo-sp-modal,
.expo-bd-backdrop.is-open .expo-bd-modal { transform: none; opacity: 1; }
.expo-sp-modal::before,
.expo-bd-modal::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--expo-accent-1, #5eead4), var(--expo-accent-2, #818cf8));
	z-index: 3;
}
.expo-sp-close,
.expo-bd-close {
	flex: 0 0 auto;
	width: 38px; height: 38px;
	padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 0; color: #f4f7ff; cursor: pointer;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	transition: background .16s ease, transform .16s ease;
}
.expo-sp-close svg, .expo-bd-close svg { width: 17px; height: 17px; display: block; }
.expo-sp-close:hover, .expo-bd-close:hover { background: rgba(255, 255, 255, .2); transform: scale(1.06); }
.expo-sp-loading { display: grid; place-items: center; min-height: 220px; }

/* ---- Speakers modal ------------------------------------------------ */
.expo-sp-modal {
	width: min(1120px, 100%);
	max-height: min(960px, 92vh);
}
.expo-sp-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 18px 16px 26px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.expo-sp-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--expo-font-display);
	font-size: clamp(15px, 2.1vw, 22px);
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.expo-sp-title__pre,
.expo-sp-title__live { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.expo-sp-title__hall { font-weight: 600; }
.expo-sp-title__sep { margin: 0 .55em; font-weight: 300; opacity: .55; }
.expo-sp-title__live { color: var(--expo-accent-1, #5eead4); }
.expo-sp-title__topic { font-weight: 600; }

.expo-sp-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	aspect-ratio: 16 / 9;
	max-height: calc(92vh - 190px);
	background: #05070d;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.expo-sp-stage video,
.expo-sp-stage iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #000;
}
.expo-sp-stage video { object-fit: contain; }
.expo-sp-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 30px;
	text-align: center;
	color: rgba(244, 247, 255, .72);
	font-size: 15px;
}
.expo-sp-placeholder svg { width: 46px; height: 46px; opacity: .55; }
.expo-sp-placeholder b { color: #f4f7ff; font-size: 17px; }

.expo-sp-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px 16px 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.expo-sp-sponsor { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; text-decoration: none; color: inherit; }
.expo-sp-sponsor__logo {
	flex: 0 0 auto;
	width: 112px;
	height: 84px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.expo-sp-sponsor__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.expo-sp-sponsor__txt { min-width: 0; }
.expo-sp-sponsor__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 247, 255, .6); }
.expo-sp-sponsor__name { font-size: 17px; font-weight: 700; line-height: 1.25; margin-top: 3px; }
a.expo-sp-sponsor:hover .expo-sp-sponsor__name { text-decoration: underline; text-underline-offset: 3px; }

.expo-sp-notes-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 48px;
	padding: 0 24px;
	font-family: var(--expo-font);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #f4f7ff;
	cursor: pointer;
	background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07));
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
	transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.expo-sp-notes-btn:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .46); transform: translateY(-1px); }
.expo-sp-notes-btn:active { transform: scale(.97); }
.expo-sp-notes-btn svg { width: 18px; height: 18px; }
.expo-sp-notes-btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* ---- notes panel (slides in over the stage) ------------------------ */
.expo-sp-notes {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	z-index: 4;
	width: min(460px, 100%);
	display: flex;
	flex-direction: column;
	color: #f4f7ff;
	background: linear-gradient(160deg, rgba(24, 28, 44, .92), rgba(10, 13, 24, .94));
	border-left: 1px solid rgba(255, 255, 255, .16);
	box-shadow: -24px 0 60px rgba(0, 0, 0, .45);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	backdrop-filter: blur(22px) saturate(150%);
	transform: translateX(104%);
	transition: transform .42s var(--expo-ease);
}
.expo-sp-modal.notes-open .expo-sp-notes { transform: none; }
.expo-sp-notes__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 14px 14px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.expo-sp-notes__title { flex: 1 1 auto; margin: 0; font-family: var(--expo-font-display); font-size: 16px; font-weight: 700; }
.expo-sp-notes__title small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 247, 255, .6); margin-bottom: 2px; }
.expo-sp-notes__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 18px 22px 26px;
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(244, 247, 255, .9);
	scrollbar-width: thin;
	overflow-wrap: anywhere;
}
.expo-sp-notes__body h1, .expo-sp-notes__body h2, .expo-sp-notes__body h3, .expo-sp-notes__body h4 { font-family: var(--expo-font-display); color: #fff; line-height: 1.25; margin: 1.1em 0 .45em; }
.expo-sp-notes__body h1 { font-size: 22px; } .expo-sp-notes__body h2 { font-size: 19px; } .expo-sp-notes__body h3 { font-size: 16.5px; } .expo-sp-notes__body h4 { font-size: 15px; }
.expo-sp-notes__body > :first-child { margin-top: 0; }
.expo-sp-notes__body p { margin: 0 0 .85em; }
.expo-sp-notes__body ul, .expo-sp-notes__body ol { margin: 0 0 .9em; padding-left: 22px; }
.expo-sp-notes__body li { margin: .25em 0; }
.expo-sp-notes__body a { color: var(--expo-accent-1, #5eead4); }
.expo-sp-notes__body img { max-width: 100%; height: auto; border-radius: 10px; }
.expo-sp-notes__body blockquote { margin: .8em 0; padding: .4em 0 .4em 14px; border-left: 3px solid var(--expo-accent-2, #818cf8); color: rgba(244, 247, 255, .8); }
.expo-sp-notes__body table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.expo-sp-notes__body td, .expo-sp-notes__body th { border: 1px solid rgba(255, 255, 255, .16); padding: 6px 8px; text-align: left; }

/* ---- Business Directory modal (big) -------------------------------- */
.expo-bd-modal {
	width: min(1560px, 100%);
	height: min(1000px, 92vh);
}
.expo-bd-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 14px 22px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.expo-bd-title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--expo-font-display); font-size: clamp(15px, 2vw, 19px); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expo-bd-title small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 247, 255, .6); margin-bottom: 2px; }
.expo-bd-open {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 8px;
	height: 38px; padding: 0 16px;
	font-family: var(--expo-font); font-size: 13px; font-weight: 600;
	color: #f4f7ff; text-decoration: none; cursor: pointer;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	transition: background .16s ease;
}
.expo-bd-open:hover { background: rgba(255, 255, 255, .2); }
.expo-bd-open svg { width: 15px; height: 15px; }
.expo-bd-body { position: relative; flex: 1 1 auto; min-height: 0; background: #fff; }
.expo-bd-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.expo-bd-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; }

/* ---- mobile --------------------------------------------------------- */
@media (max-width: 760px) {
	.expo-dock { bottom: 80px; max-width: calc(100vw - 24px); gap: 8px; }
	.expo-dock-btn, .expo-dock .expo-dir-fab { height: 40px; padding: 0 14px; font-size: 13px; }
	/* phones: top-right (the menu FAB owns the top-left); slide left of the booth
	   toggle when that appears inside a stand */
	.expo-topbar { left: auto; right: 16px; top: 21px; margin: 0; max-width: calc(100vw - 92px); transition: top .3s var(--expo-ease), right .3s var(--expo-ease); }
	body:has(.expo-booth-toggle.is-on) .expo-topbar { right: 80px; max-width: calc(100vw - 156px); }
	body:has(.expo-avatar-panel.is-on) .expo-topbar { top: 82px; }
	.expo-topbar .expo-dock-btn { height: 42px; padding: 0 16px; font-size: 13.5px; }
	.expo-sp-backdrop, .expo-bd-backdrop { padding: 0; }
	.expo-sp-modal, .expo-bd-modal { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
	.expo-sp-head { padding: 16px 14px 14px 18px; }
	.expo-sp-stage { aspect-ratio: auto; max-height: none; }
	.expo-sp-foot { flex-wrap: wrap; gap: 12px; }
	.expo-sp-sponsor__logo { width: 84px; height: 64px; }
	.expo-sp-notes-btn { width: 100%; }
	.expo-bd-open span { display: none; }
	.expo-bd-open { padding: 0 12px; }
}