/**
 * Noxora App-like Bottom Navigation Dock
 * Loaded after the design system so it can override legacy header-system nav rules.
 */

@media (max-width: 767px) {
	.nx-bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: var(--nx-bottom-nav-height, 65px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: rgba(10, 10, 10, 0.85);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		z-index: var(--nx-z-bottom-nav, 100);
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
	}

	.nx-bottom-nav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		flex: 1 1 0;
		min-width: 0;
		padding: 3px 2px;
		color: #a1a1aa;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.65rem;
		font-weight: 500;
		transition: color 0.2s ease, transform 0.15s ease;
	}

	.nx-bottom-nav__item:hover,
	.nx-bottom-nav__item.is-active {
		color: #ffffff;
	}

	.nx-bottom-nav__item.is-active .nx-bottom-nav__icon {
		filter: drop-shadow(0 0 6px rgba(138, 43, 226, 0.6));
	}

	.nx-bottom-nav__item:active {
		transform: scale(0.95);
	}

	.nx-bottom-nav__icon {
		display: grid;
		place-items: center;
		width: 19px;
		height: 19px;
		flex: 0 0 19px;
	}

	.nx-bottom-nav__icon svg {
		width: 100%;
		height: 100%;
		stroke: currentColor;
		fill: none;
	}

	.nx-bottom-nav__label {
		font-size: 0.58rem;
		font-weight: 500;
		line-height: 1;
	}

	/* Ensure body/content clears the dock using the design token */
	.noxora-body,
	.ns-story-body,
	.ns-tube-body,
	.ns-pro-body,
	.nx-comm-body,
	.nx-academy-body {
		padding-bottom: calc(var(--nx-bottom-nav-safe-height, 80px) + 1rem) !important;
	}

	.ns-story-content,
	.ns-tube-content,
	.ns-pro-content,
	.nx-comm-main,
	.nx-main-content,
	.nx-academy-main,
	.nx-academy-view--lesson,
	.nx-academy-lesson-layout,
	.nx-academy-lesson-main,
	.nx-dashboard--premium-v2 {
		padding-bottom: calc(var(--nx-bottom-nav-safe-height, 80px) + env(safe-area-inset-bottom, 0px) + 2.5rem) !important;
	}

	.nx-comm-page--single {
		padding-bottom: calc(var(--nx-bottom-nav-height, 70px) + 3rem) !important;
	}
}

@media (min-width: 768px) {
	.nx-bottom-nav {
		display: none;
	}
}