/* ==========================================================================
   GeLife Bottom Mobile Nav
   Visible on mobile only (<= 768px), fully hidden on desktop.
   ========================================================================== */

:root {
	--gln-accent: #d70010;      /* gelife.ge brand red (same as the chat button) */
	--gln-accent-dark: #a20611; /* darker shade for the FAB button gradient/shadow */
	--gln-inactive: #7b7f85;    /* inactive icon/label color */
	--gln-bg: #ffffff;
	--gln-border: #ececec;
	--gln-height: 60px;
}

.gln-bottom-nav {
	display: none; /* hidden by default, enabled in the media query below */
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--gln-bg);
	border-top: 1px solid var(--gln-border);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.gln-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: var(--gln-height);
	text-decoration: none;
	color: var(--gln-inactive);
	font-size: 11px;
	line-height: 1.1;
	font-weight: 500;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.gln-item:hover,
.gln-item:focus {
	color: var(--gln-accent);
}

.gln-item.is-active {
	color: var(--gln-accent);
}

.gln-item__icon {
	display: inline-flex;
	width: 23px;
	height: 23px;
}

.gln-item__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.gln-item__label {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- "Add" — elevated accent button (modern FAB-style highlight) --- */
.gln-item--fab {
	color: var(--gln-inactive);
}

.gln-item--fab .gln-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-top: -22px;
	border-radius: 50%;
	background: linear-gradient(155deg, var(--gln-accent), var(--gln-accent-dark));
	color: #ffffff;
	box-shadow: 0 6px 14px rgba(215, 0, 16, 0.35);
	border: 3px solid var(--gln-bg);
}

.gln-item--fab .gln-item__icon svg {
	width: 20px;
	height: 20px;
}

.gln-item--fab.is-active,
.gln-item--fab:hover,
.gln-item--fab:focus {
	color: var(--gln-accent);
}

/* --- "Chat AI" — a regular button with its own icon; clicking it triggers
   the existing chat button from the ai-chat-search plugin (see JS). --- */
.gln-item--chat {
	font-family: inherit;
}

/* --- Reserve space so the fixed nav doesn't overlap the footer/content --- */
body.has-gln-bottom-nav {
	padding-bottom: calc(var(--gln-height) + env(safe-area-inset-bottom, 0));
}

/* --- Show the nav on mobile only --- */
@media (max-width: 768px) {
	.gln-bottom-nav {
		display: flex;
	}
}

@media (min-width: 769px) {
	body.has-gln-bottom-nav {
		padding-bottom: 0;
	}
}