/* =============================================================
   ASK BBSS — Floating Help Launcher (v1.0 UI enhancement)

   Chrome ONLY for the floating button + modal shell. The widget's
   own look (form, inputs, buttons, result panel, ticket form) is
   entirely untouched — it still lives in askbbss-frontend.css and
   is rendered by the exact same [ask_bbss] shortcode output, just
   relocated inside this modal's body instead of wherever a page
   author would otherwise place the shortcode directly.

   Same conventions as the rest of the site: dark is the base/
   default ruleset, light mode overrides are scoped under
   html:not(.bbss-dark-mode) — matches askbbss-frontend.css and the
   site-wide bbss-dark-mode.php pattern. Same overlay/backdrop-blur/
   fade+scale/ESC/click-outside/focus-restore/body-scroll-lock
   pattern already established by mu-plugins/bbss-cta-modal.php.
   ============================================================= */

/* ─── Floating launcher button ──────────────────────────────── */
/* v1.0.1 polish: shape/spacing/typography/transition copied from the
   site's own button family — matched live against both
   #bbss-suggest-project-btn (Community Requests section) and the
   homepage "Start Building" CTA, which share one underlying style:
   border-radius 3px, padding 5px 20px (44px tall), font-size 16px /
   weight 600, transition on background-color/border-color/color at
   .15s. Color pairing (cyan bg / navy text) matches "Start Building"
   specifically, since that's this same family's existing cyan variant
   — reusing it rather than inventing a new accent treatment. Only the
   box-shadow is unique to this button (none of the site's inline
   page buttons use one), kept deliberately light since this is the
   one button on the site that floats above content and needs a little
   separation from it. */
#askbbss-launcher-btn {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 5px 20px;
	box-sizing: border-box;
	border: none;
	border-radius: 3px;
	background: #00C3FF;
	color: #011E3D;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(11, 18, 32, .25);
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#askbbss-launcher-btn:hover {
	background: #5DD9FF;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(11, 18, 32, .3);
}

#askbbss-launcher-btn:focus-visible {
	outline: 2px solid #00C3FF;
	outline-offset: 3px;
}

body.askbbss-modal-open #askbbss-launcher-btn {
	display: none;
}

/* ─── Overlay ────────────────────────────────────────────────── */
.askbbss-launcher-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(11, 18, 32, .6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .19s ease, visibility .19s ease;
}

.askbbss-launcher-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

body.askbbss-modal-open {
	overflow: hidden;
}

/* ─── Modal ──────────────────────────────────────────────────── */
.askbbss-launcher-modal {
	display: flex;
	flex-direction: column;
	width: 70%;
	max-width: 900px;
	height: 80vh;
	max-height: 80vh;
	background: #131C2E;
	/* v1.0.1 polish: same 1px low-opacity white border formula already
	   used on .askbbss-widget itself (askbbss-frontend.css) — reused
	   here rather than inventing a new border treatment, just to give
	   the modal edge definition against the blurred backdrop. No glow,
	   no cyan. */
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .19s ease, transform .19s ease;
}

.askbbss-launcher-overlay.is-open .askbbss-launcher-modal {
	opacity: 1;
	transform: translateY(0);
}

.askbbss-launcher-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.askbbss-launcher-title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	color: #F1F5F9;
}

.askbbss-launcher-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, .1);
	color: #F1F5F9;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.askbbss-launcher-close:hover {
	background: rgba(255, 255, 255, .18);
}

.askbbss-launcher-close:focus-visible {
	outline: 2px solid #00C3FF;
	outline-offset: 2px;
}

.askbbss-launcher-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 24px;
}

/* Neutralize the widget's own standalone "card" chrome (max-width,
   background, border, padding) only inside this modal context — the
   modal itself now provides that chrome, avoiding a double border/
   card look. Scoped to .askbbss-launcher-body only; the shortcode's
   default standalone appearance (askbbss-frontend.css) is completely
   untouched for any page that places [ask_bbss] directly. */
.askbbss-launcher-body .askbbss-widget {
	max-width: none;
	margin: 0;
	background: transparent;
	border: none;
	padding: 0;
}

/* ─── Light mode ─────────────────────────────────────────────── */
html:not(.bbss-dark-mode) .askbbss-launcher-modal {
	background: #FFFFFF;
	/* Same subtle-border formula as the light-mode .askbbss-widget border
	   (#CBD5E1 at reduced strength) — elegant separation, no glow. */
	border-color: rgba(15, 23, 42, .1);
	box-shadow: 0 24px 64px rgba(15, 23, 42, .16);
}

html:not(.bbss-dark-mode) .askbbss-launcher-header {
	border-bottom-color: #E2E8F0;
}

html:not(.bbss-dark-mode) .askbbss-launcher-title {
	color: #0F172A;
}

html:not(.bbss-dark-mode) .askbbss-launcher-close {
	background: rgba(15, 23, 42, .06);
	color: #0F172A;
}

html:not(.bbss-dark-mode) .askbbss-launcher-close:hover {
	background: rgba(15, 23, 42, .12);
}

/* ─── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.askbbss-launcher-modal {
		width: 85%;
	}
}

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
	#askbbss-launcher-btn {
		right: 16px;
		bottom: 16px;
		padding: 5px 16px;
	}

	.askbbss-launcher-overlay {
		padding: 0;
	}

	.askbbss-launcher-modal {
		width: 95%;
		height: 90vh;
		max-height: 90vh;
		border-radius: 14px;
	}

	.askbbss-launcher-header {
		padding: 16px 18px;
	}

	.askbbss-launcher-body {
		padding: 18px;
	}
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.askbbss-launcher-overlay,
	.askbbss-launcher-modal,
	#askbbss-launcher-btn {
		transition: none;
	}
}