/**
 * JagMag floating support bubble (#pl-fab → compact lens with team rows).
 *
 * Every colour and font is a --jmb-* token that falls back to the theme's
 * --jl2-* tokens, so the bubble follows jl-tokens.css automatically. The
 * Messaging › Floating bubble screen can override any token; those values
 * are printed inline right after this file. *-rgb tokens drive translucency.
 */

#pl-fab,
.pl-veil,
.pl-lens,
.jmb-preview {
	/* colour */
	--jmb-gold:        var(--jl2-color-gold, #8f6b3d);
	--jmb-gold-rgb:    var(--jl2-color-gold-rgb, 143, 107, 61);
	--jmb-gold-hi:     var(--jl2-color-gold-bright, #e4b858);
	--jmb-gold-deep:   var(--jl2-color-gold-soft-1, #b98523);
	--jmb-ink:         var(--jl2-color-ink, #14140f);
	--jmb-ink-rgb:     var(--jl2-color-ink-rgb, 20, 20, 15);
	--jmb-mute:        var(--jl2-color-mute-soft, #58544e);
	--jmb-quiet:       var(--jl2-color-mute, #6b6660);
	--jmb-surface:     var(--jl2-color-cream, #faf8f2);
	--jmb-surface-rgb: var(--jl2-color-cream-rgb, 250, 248, 242);
	--jmb-white-rgb:   var(--jl2-color-white-rgb, 255, 255, 255);

	/* type */
	--jmb-font:        var(--jl2-font-sans, "Open Sans", "Segoe UI", sans-serif);
	--jmb-display:     var(--jl2-font-display, "Sriracha", "Segoe UI", sans-serif);

	/* shape + motion */
	--jmb-radius:      18px;
	--jmb-radius-sm:   calc(var(--jmb-radius) * 0.7);
	--jmb-orb:         var(--jmb-set-orb, 60px);
	--jmb-x:           var(--jmb-set-x, 20px);
	--jmb-y:           var(--jmb-set-y, 22px);
	--jmb-btn:         30px;
	--jmb-ease:        cubic-bezier(0.22, 1, 0.36, 1);

	/* derived */
	--jmb-line:        rgba(var(--jmb-gold-rgb), 0.14);
	--jmb-rim:         rgba(var(--jmb-gold-rgb), 0.28);
	--jmb-wash:        rgba(var(--jmb-gold-rgb), 0.08);
	--jmb-glass:       rgba(var(--jmb-white-rgb), 0.55);
	--jmb-shadow:      0 18px 40px rgba(var(--jmb-ink-rgb), 0.08);
	--jmb-shadow-gold: 0 10px 26px rgba(var(--jmb-gold-rgb), 0.12);
}

#pl-fab,
#pl-fab *,
.pl-lens,
.pl-lens * { box-sizing: border-box; }

/* ═════ LAUNCHER ═════ */
#pl-fab {
	visibility: visible;
	position: fixed;
	bottom: calc(var(--jmb-y) + env(safe-area-inset-bottom, 0px));
	right: var(--jmb-x);
	z-index: 10001;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 0.3s ease;
}
#pl-fab[data-side="left"] { right: auto; left: var(--jmb-x); }
#pl-fab[data-dimmed="true"] { opacity: 0.28; pointer-events: none; }

.pl-orb {
	position: relative;
	width: var(--jmb-orb);
	height: var(--jmb-orb);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 30% 25%, rgba(var(--jmb-white-rgb), 0.92), rgba(var(--jmb-surface-rgb), 0.7) 40%, rgba(var(--jmb-white-rgb), 0.92) 80%);
	box-shadow: var(--jmb-shadow), var(--jmb-shadow-gold);
	transition: transform 0.35s var(--jmb-ease), box-shadow 0.35s var(--jmb-ease);
}
.pl-orb::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: conic-gradient(from 20deg, var(--jmb-gold) 0%, var(--jmb-gold-hi) 22%, rgba(var(--jmb-gold-rgb), 0.12) 45%, var(--jmb-gold-hi) 68%, var(--jmb-gold-deep) 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
	opacity: 0.95;
	transition: transform 0.5s var(--jmb-ease);
}
.pl-orb img {
	width: calc(var(--jmb-orb) * 0.625);
	height: calc(var(--jmb-orb) * 0.625);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 10px 20px rgba(var(--jmb-ink-rgb), 0.12);
}
#pl-fab:hover .pl-orb,
#pl-fab:focus-visible .pl-orb { transform: translateY(-3px) scale(1.05); box-shadow: 0 22px 48px rgba(var(--jmb-ink-rgb), 0.12), 0 14px 28px rgba(var(--jmb-gold-rgb), 0.18); }
#pl-fab:hover .pl-orb::before { transform: rotate(12deg); }

.pl-whisper {
	position: absolute;
	right: calc(var(--jmb-orb) + 12px);
	top: 50%;
	transform: translateY(-50%) translateX(8px);
	white-space: nowrap;
	font-family: var(--jmb-font);
	font-size: 12px;
	font-weight: 700;
	color: rgba(var(--jmb-ink-rgb), 0.86);
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(var(--jmb-white-rgb), 0.85);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--jmb-rim);
	box-shadow: 0 12px 26px rgba(var(--jmb-ink-rgb), 0.1);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--jmb-ease), transform 0.3s var(--jmb-ease);
}
#pl-fab[data-side="left"] .pl-whisper { right: auto; left: calc(var(--jmb-orb) + 12px); transform: translateY(-50%) translateX(-8px); }
#pl-fab:hover .pl-whisper,
#pl-fab:focus-visible .pl-whisper { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ═════ VEIL ═════ */
.pl-veil {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10002;
	background: rgba(var(--jmb-surface-rgb), 0.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.pl-veil[data-open="true"] { display: block; animation: jmb-fade 0.2s ease; }
@keyframes jmb-fade { from { opacity: 0; } }

/* ═════ LENS — compact ═════ */
.pl-lens {
	display: none;
	position: fixed;
	z-index: 10003;
	bottom: calc(var(--jmb-y) + var(--jmb-orb) + 10px);
	right: var(--jmb-x);
	width: 360px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - var(--jmb-y) - var(--jmb-orb) - 110px);
	max-height: calc(100dvh - var(--jmb-y) - var(--jmb-orb) - 110px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	border-radius: var(--jmb-radius);
	background:
		linear-gradient(rgba(var(--jmb-surface-rgb), 0.96), rgba(var(--jmb-surface-rgb), 0.93)) padding-box,
		linear-gradient(155deg, rgba(var(--jmb-gold-rgb), 0.42), rgba(var(--jmb-white-rgb), 0.55) 40%, rgba(var(--jmb-gold-rgb), 0.3)) border-box;
	border: 1.5px solid transparent;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: var(--jmb-shadow), inset 0 0 0 1px rgba(var(--jmb-white-rgb), 0.6);
	font-family: var(--jmb-font);
	color: var(--jmb-ink);
	text-align: left;
	--lx: 50%;
	--ly: 50%;
}
.pl-lens[data-side="left"] { right: auto; left: var(--jmb-x); }
.pl-lens[data-open="true"] { display: flex; flex-direction: column; animation: jmb-open 0.32s var(--jmb-ease); }
@keyframes jmb-open { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.pl-lens:focus { outline: none; }

.pl-lens-light {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 240px 240px at var(--lx) var(--ly), rgba(var(--jmb-gold-rgb), 0.05), transparent 70%);
	pointer-events: none;
}

/* Header */
.pl-head { position: relative; padding: 14px 44px 10px 16px; border-bottom: 1px solid var(--jmb-line); }
.pl-lens .pl-title {
	font-family: var(--jmb-display) !important; /* theme forces h2 fonts with !important */
	font-size: 18px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--jmb-ink);
	margin: 0;
}
.pl-lens .pl-sub {
	font-family: var(--jmb-font) !important;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jmb-mute);
	margin: 2px 0 0;
}
.pl-x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--jmb-line);
	background: var(--jmb-glass);
	color: var(--jmb-mute);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pl-x:hover { color: var(--jmb-gold); border-color: var(--jmb-rim); transform: rotate(90deg); }
.pl-x svg { width: 10px; height: 10px; }

/* Body */
.pl-body { position: relative; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pl-eyebrow {
	margin: 0 2px;
	font-family: var(--jmb-font);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jmb-quiet);
}

/* Teams — one compact row each: icon · name/role/hours · round buttons */
.pl-teams { display: grid; gap: 6px; }
.pl-team {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 9px 10px 9px 11px;
	border-radius: var(--jmb-radius-sm);
	background: var(--jmb-glass);
	border: 1px solid var(--jmb-line);
	overflow: hidden;
}
.pl-team::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--jmb-gold-hi), var(--jmb-gold)); }
.pl-team-ic {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: linear-gradient(140deg, var(--jmb-gold-hi), var(--jmb-gold) 60%, var(--jmb-gold-deep));
}
.pl-team-ic svg { width: 14px; height: 14px; fill: none; stroke: rgb(var(--jmb-white-rgb)); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pl-team-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl-team-h { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--jmb-ink); }
.pl-team-p,
.pl-team-hours { font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--jmb-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-team-hours { color: var(--jmb-quiet); font-weight: 500; }

.pl-team-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--jmb-mute);
	background: rgba(var(--jmb-ink-rgb), 0.05);
}
.pl-team-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.pl-team-status[data-state="open"] { color: #2f7a3d; background: rgba(47, 122, 61, 0.1); }
.pl-team-status[data-state="open"]::before { opacity: 1; }

.pl-team-acts { display: flex; gap: 5px; }
.pl-act {
	width: var(--jmb-btn);
	height: var(--jmb-btn);
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--jmb-rim);
	background: rgba(var(--jmb-white-rgb), 0.8);
	color: var(--jmb-gold-deep) !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.18s var(--jmb-ease), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.pl-act svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-act:hover,
.pl-act:focus-visible { transform: translateY(-1px); border-color: var(--jmb-gold); background: var(--jmb-wash); box-shadow: 0 6px 14px rgba(var(--jmb-gold-rgb), 0.16); }
.pl-act--wa {
	border-color: transparent;
	color: rgb(var(--jmb-white-rgb)) !important;
	background: linear-gradient(140deg, var(--jmb-gold-hi) -20%, var(--jmb-gold) 60%, var(--jmb-gold-deep) 130%);
	box-shadow: 0 5px 12px rgba(var(--jmb-gold-rgb), 0.25);
}
.pl-act--wa:hover,
.pl-act--wa:focus-visible { border-color: transparent; background: linear-gradient(140deg, var(--jmb-gold-hi) -40%, var(--jmb-gold) 45%, var(--jmb-gold-deep) 110%); }

/* Quick links — slim chips side by side */
.pl-grid { display: flex; gap: 6px; }
.pl-cell {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 10px 0 6px;
	border-radius: 999px;
	background: var(--jmb-glass);
	border: 1px solid var(--jmb-line);
	color: var(--jmb-ink) !important;
	text-decoration: none !important;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.pl-cell:hover,
.pl-cell:focus-visible { border-color: var(--jmb-rim); background: var(--jmb-wash); }
.pl-cell-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--jmb-wash); }
.pl-cell-ic svg { width: 12px; height: 12px; fill: none; stroke: var(--jmb-gold-deep); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pl-cell-h { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Footer */
.pl-foot { position: relative; padding: 8px 12px 10px; border-top: 1px solid var(--jmb-line); text-align: center; }
.pl-soc { display: flex; justify-content: center; gap: 6px; margin: 0; padding: 0; }
.pl-soc a {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 999px; /* round, like the footer */
	background: var(--jmb-glass);
	border: 1px solid var(--jmb-line);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.pl-soc a:hover { border-color: var(--jmb-rim); transform: translateY(-1px); }
/* Same line icons as the site footer */
.pl-soc svg { width: 14px; height: 14px; fill: none; stroke: var(--jmb-mute); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s ease; }
.pl-soc a:hover svg { stroke: var(--jmb-gold); }
.pl-lens .pl-foot-t {
	font-family: var(--jmb-font) !important;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jmb-quiet);
	margin: 6px 0 0;
}

/* Stagger */
.pl-lens[data-open="true"] .pl-team { opacity: 0; transform: translateY(6px); animation: jmb-in 0.26s var(--jmb-ease) forwards; }
.pl-lens[data-open="true"] .pl-team:nth-child(1) { animation-delay: 0.04s; }
.pl-lens[data-open="true"] .pl-team:nth-child(2) { animation-delay: 0.08s; }
.pl-lens[data-open="true"] .pl-team:nth-child(3) { animation-delay: 0.12s; }
@keyframes jmb-in { to { opacity: 1; transform: none; } }

/* Focus — scoped to the bubble only */
#pl-fab:focus-visible,
.pl-lens :focus-visible { outline: 2px solid var(--jmb-gold); outline-offset: 2px; }

.pl-drag { display: none; width: 32px; height: 4px; border-radius: 2px; background: rgba(var(--jmb-ink-rgb), 0.14); margin: 8px auto 0; }

/* ═════ MOBILE: bottom sheet ═════ */
@media (max-width: 640px) {
	#pl-fab,
	.pl-veil,
	.pl-lens { --jmb-x: 14px; --jmb-y: 16px; --jmb-orb: 54px; --jmb-btn: 36px; }
	#pl-fab[data-hide-mobile="1"] { display: none; }
	.pl-whisper { display: none; }

	.pl-lens,
	.pl-lens[data-side="left"] {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		max-height: 78vh;
		max-height: 78dvh;
		border-radius: var(--jmb-radius) var(--jmb-radius) 0 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.pl-lens[data-open="true"] { animation: jmb-sheet 0.32s var(--jmb-ease); }
	@keyframes jmb-sheet { from { transform: translateY(100%); } to { transform: none; } }
	.pl-drag { display: block; }
	.pl-head { padding: 6px 48px 10px 16px; }
	.pl-x { top: 14px; width: 30px; height: 30px; }
	.pl-body { padding: 10px 12px; }
	.pl-act svg { width: 16px; height: 16px; }
	.pl-cell { height: 38px; }
	.pl-soc a { width: 34px; height: 34px; }
	.pl-soc svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	#pl-fab *,
	.pl-veil,
	.pl-lens,
	.pl-lens * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pl-lens { background: rgb(var(--jmb-surface-rgb)); border-color: var(--jmb-gold); }
	.pl-veil { background: rgba(var(--jmb-surface-rgb), 0.85); }
}