/* =====================================================
   Bottom bar (clean + pill nav)
   Assumes structure:
   #bottomBar
     .bb-left (p + nav.bb-nav)
     .bb-right (links)
   ===================================================== */

#bottomBar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 34px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	padding: 0 12px;

	background: rgba(20, 20, 20, 0.92);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);

	font:
		600 13px/1.1 system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;
	z-index: 1000;
}

#bottomBar .bb-left,
#bottomBar .bb-right {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0; /* critical so nav can shrink instead of blowing up layout */
}

/* Username */
#bottomBar .bb-left > p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
	flex: 0 0 auto;
}

/* Nav group: scrollable but clean */
#bottomBar .bb-nav {
	display: flex;
	align-items: center;
	gap: 6px;

	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;

	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);

	/* hide scrollbar (Firefox + WebKit) */
	scrollbar-width: none;
}
#bottomBar .bb-nav::-webkit-scrollbar {
	display: none;
}

/* All links (default) */
#bottomBar a {
	color: rgba(190, 220, 255, 0.92);
	text-decoration: none;
	white-space: nowrap;
}

/* Nav links: pills */
#bottomBar .bb-nav > a {
	padding: 4px 10px;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.85);
	background: transparent;
	border: 1px solid transparent;

	transition:
		background 120ms ease,
		border-color 120ms ease,
		color 120ms ease,
		transform 120ms ease;
}

#bottomBar .bb-nav > a:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.95);
}

#bottomBar .bb-nav > a:active {
	transform: translateY(1px);
}

/* Active page */
#bottomBar .bb-nav > a.active {
	background: rgba(120, 190, 255, 0.22);
	border-color: rgba(120, 190, 255, 0.35);
	color: rgba(255, 255, 255, 0.98);
}

/* Right-side links: lighter + less “buttony” */
#bottomBar .bb-right > a {
	padding: 4px 6px;
	border-radius: 6px;
	color: rgba(190, 220, 255, 0.9);

	transition:
		background 120ms ease,
		color 120ms ease;
}

#bottomBar .bb-right > a:hover {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.95);
}

@media (max-width: 520px) {
	#bottomBar {
		height: 44px; /* slightly taller for touch */
		padding: 0 8px;
		gap: 8px;
	}

	/* Hide username on phones (it eats width) */
	#bottomBar .bb-left > p {
		display: none;
	}

	/* Let nav take most of the bar */
	#bottomBar .bb-nav {
		padding: 3px 6px;
	}

	#bottomBar .bb-nav > a {
		padding: 6px 10px; /* more finger-friendly */
	}

	#bottomBar {
		z-index: 2500;
	}
	.mobile-sheet {
		z-index: 2000;
	}

	/* Bootstrap dropdown menu itself */
	#bottomBar .dropdown-menu {
		z-index: 2600;
	}

	/* Mobile account dropdown button */
	#bottomBar .bb-account .btn {
		padding: 6px 10px;
		border-radius: 999px;
	}

	/* If you keep right links on any mobile route, stop them wrapping */
	#bottomBar .bb-right {
		flex: 0 0 auto;
	}
}