/**
 * BB Theme Switcher — floating rocker toggle.
 *
 * Positioned bottom-left to avoid overlap with chat widgets (bottom-right).
 * Uses CSS custom properties to match the site's active color scheme:
 *   RL mode:       --bb-rl-primary-color (set by ReadyLaunch)
 *   BB Theme mode: --bb-primary-color (set by BuddyBoss Theme)
 *
 * Dark mode is detected via --bb-rl-background-color (RL) or
 * prefers-color-scheme (system) and inverts the pill background.
 */

.bb-theme-switcher {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 99999;
	display: flex;
	align-items: center;
	background: var(--bb-ts-pill-bg, #1e1e1e);
	border-radius: 999px;
	padding: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	transition: opacity 0.2s ease;
}

.bb-theme-switcher:hover {
	opacity: 1 !important;
}

/* After 3s idle, fade to semi-transparent so it's not distracting. */
.bb-theme-switcher.bb-ts-idle {
	opacity: 0.45;
}

.bb-ts-option {
	position: relative;
	z-index: 2;
	border: none;
	background: transparent;
	color: var(--bb-ts-inactive-text, rgba(255, 255, 255, 0.55));
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 8px 16px;
	cursor: pointer;
	border-radius: 999px;
	white-space: nowrap;
	transition: color 0.25s ease;
	letter-spacing: 0.01em;
}

.bb-ts-option:hover {
	color: var(--bb-ts-inactive-hover, rgba(255, 255, 255, 0.85));
}

.bb-ts-option.bb-ts-active {
	color: var(--bb-ts-active-text, #fff);
	cursor: default;
}

/* Sliding pill indicator — positioned behind the active button. */
.bb-ts-slider {
	position: absolute;
	top: 4px;
	left: 4px;
	height: calc(100% - 8px);
	border-radius: 999px;
	background: var(--bb-rl-primary-color, var(--bb-primary-color, #4946fe));
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
	pointer-events: none;
}

/* Switching state — brief feedback before reload. */
.bb-theme-switcher.bb-ts-switching {
	pointer-events: none;
	opacity: 0.7;
}

.bb-theme-switcher.bb-ts-switching .bb-ts-option {
	color: var(--bb-ts-inactive-text, rgba(255, 255, 255, 0.4));
}

/* ── Dark mode: invert pill to light background ────────────────────── */

/* System-level dark mode */
@media (prefers-color-scheme: dark) {
	.bb-theme-switcher {
		--bb-ts-pill-bg: rgba(255, 255, 255, 0.15);
		--bb-ts-inactive-text: rgba(255, 255, 255, 0.5);
		--bb-ts-inactive-hover: rgba(255, 255, 255, 0.8);
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
	}
}

/* RL dark mode (body class set by ReadyLaunch when dark theme active) */
.bb-rl-dark .bb-theme-switcher,
.bb-dark-theme .bb-theme-switcher,
[data-bb-theme="dark"] .bb-theme-switcher {
	--bb-ts-pill-bg: rgba(255, 255, 255, 0.15);
	--bb-ts-inactive-text: rgba(255, 255, 255, 0.5);
	--bb-ts-inactive-hover: rgba(255, 255, 255, 0.8);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* When active text needs to be dark (e.g. bright yellow primary) */
.bb-theme-switcher.bb-ts-light-accent .bb-ts-option.bb-ts-active {
	color: #1e1e1e;
}

/* Mobile: full width at bottom, slightly smaller. */
@media (max-width: 480px) {
	.bb-theme-switcher {
		left: 12px;
		right: 12px;
		bottom: 12px;
		justify-content: center;
	}

	.bb-ts-option {
		flex: 1;
		text-align: center;
		font-size: 11px;
		padding: 7px 12px;
	}
}