/*
 * Sticky mobile action bar (a theme part, loaded on every page by inc/assets.php).
 *
 * Fixed to the bottom of the screen below 900px. When it's on, <body> gets the
 * class has-mbar (inc/tokens.php), which adds space at the bottom of the page
 * so the bar never covers the footer. Source: the builder's ".mbar" CSS.
 *
 * Variables: --mbar-h (bar height; the chat button sits above it).
 */

:root { --mbar-h: 74px; }

.mbar {
	position: fixed;
	inset: auto 0 0;
	z-index: 50;
	display: flex;
	gap: 6px;
	padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
	background: var(--surface);
	border-top: 1px solid var(--line);
	box-shadow: 0 -10px 24px -14px rgb(0 0 0 / 0.3);
	/*
	 * iPhone Safari can leave a fixed bar stranded mid-screen after its toolbar collapses or the page
	 * is opened from another app. Its own compositing layer makes Safari re-anchor it to the screen bottom.
	 */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
}

.mbar__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 52px;
	border-radius: 14px;
	color: var(--ink);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.mbar__item .ico { width: 22px; height: 22px; }

.mbar__item.main {
	flex: 1.35;
	background: var(--primary);
	color: var(--on-primary);
	font-size: 13px;
}

.mbar__item.alert { color: var(--accent-2); }

/* Look F's accent-2 is a soft pastel (too faint as text on white): dark text on a pastel pill instead. */
.look-f .mbar__item.alert { background: color-mix(in srgb, var(--accent-2) 32%, var(--surface)); color: var(--ink); }

/* Room for the bar at the bottom of the page. */
body.has-mbar { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
	.mbar { display: none; }
	body.has-mbar { padding-bottom: 0; }
}

/* The Chat slot is a <button>: strip the browser's button look so it matches the links. */
button.mbar__item { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }