/* Shortcuts bar — mobile: fixed bottom; desktop: fixed left vertical */

.shortcuts-bar {
	position: fixed;
	z-index: 1025;
}

.shortcuts-bar-inner {
	display: flex;
	background-color: var(--color-secondary);
	box-shadow: 0 -1px 10px rgba(var(--color-primary-rgb), 0.07);
}

.shortcuts-bar-item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	min-width: 0;
	padding: 0.3rem 0.2rem;
	color: black;
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.shortcuts-bar-item:hover,
.shortcuts-bar-item:focus-visible {
	color: var(--color-primary-dark);
	background-color: rgba(var(--color-primary-rgb), 0.06);
}

.shortcuts-bar-item:focus-visible {
	outline: none;
	box-shadow: inset var(--focus-ring-primary);
}

.shortcuts-bar-item.is-active {
	color: var(--color-primary-dark);
	background-color: rgba(var(--color-primary-rgb), 0.11);
	font-weight: 600;
}

.shortcuts-bar-item i {
	font-size: 1.5rem;
	line-height: 1;
}

.shortcuts-bar-label {
	font-size: 0.68rem;
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Mobile: horizontal strip pinned to bottom */
@media (max-width: 991.98px) {
	.shortcuts-bar {
		inset: auto 0 0 0;
		padding: 0 0.65rem calc(0.65rem + env(safe-area-inset-bottom));
	}

	.shortcuts-bar-inner {
		flex-direction: row;
		width: 100%;
		border: 1px solid rgba(var(--color-primary-rgb), 0.08);
		border-radius: 0.75rem;
		box-shadow: 0 2px 12px rgba(var(--color-primary-rgb), 0.08);
	}

	.shortcuts-bar-item + .shortcuts-bar-item {
		border-inline-start: 1px solid rgba(var(--color-primary-rgb), 0.12);
	}

	body:has(.shortcuts-bar) main.app-main > .container.container-stream {
		padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
	}

	body:has(.shortcuts-bar) footer {
		padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
	}
}

/* Desktop: vertical rail on the left */
@media (min-width: 992px) {
	.shortcuts-bar {
		inset: 50% auto auto 0;
		transform: translateY(-50%);
		padding-left: env(safe-area-inset-left);
	}

	.shortcuts-bar-inner {
		flex-direction: column;
		border-radius: 0 0.65rem 0.65rem 0;
		border: 1px solid rgba(var(--color-primary-rgb), 0.08);
		border-left: 0;
		box-shadow: 2px 0 12px rgba(var(--color-primary-rgb), 0.06);
	}

	.shortcuts-bar-item {
		flex: 0 0 auto;
		min-width: 3.75rem;
		padding: 0.9rem 0.65rem;
	}

	.shortcuts-bar-item + .shortcuts-bar-item {
		border-block-start: 1px solid rgba(var(--color-primary-rgb), 0.12);
	}

	body:has(.shortcuts-bar) main.app-main > .container.container-stream {
		padding-left: calc(env(safe-area-inset-left));
	}
}