/**
 * Mobile bottom app bar — sticky dock (search, chat, add business).
 * Mobile/tablet only (max-width: 1200px).
 */

:root {
	--ml-app-bar-brand: #4f5a3e;
	--ml-app-bar-pad-y: 14px;
	--ml-app-bar-pad-x: 14px;
	--ml-app-bar-inner-h: 50px;
	--ml-app-bar-action-size: 50px;
	--ml-app-bar-safe: env(safe-area-inset-bottom, 0px);
	--ml-app-bar-height: calc(
		var(--ml-app-bar-pad-y) * 2 + var(--ml-app-bar-inner-h) + var(--ml-app-bar-safe)
	);
}

@media (max-width: 1200px) {
	body.ml-mobile-app-bar-enabled {
		padding-bottom: var(--ml-app-bar-height);
	}

	body.ml-mobile-app-bar-enabled #nyuki-chatbot-toggle {
		display: none !important;
	}

	.ml-mobile-app-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0 !important;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 999990;
		margin: 0;
		padding: 0;
		background: var(--ml-app-bar-brand);
		border-top: 1px solid rgba(0, 0, 0, 0.12);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
		overflow: visible;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.ml-mobile-app-bar__inner {
		display: flex;
		align-items: center;
		gap: 10px;
		box-sizing: border-box;
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
		min-height: calc(var(--ml-app-bar-inner-h) + var(--ml-app-bar-pad-y) * 2);
		padding: var(--ml-app-bar-pad-y) var(--ml-app-bar-pad-x)
			calc(var(--ml-app-bar-pad-y) + var(--ml-app-bar-safe));
	}

	/* Search — light pill on brand bar */
	.ml-mobile-app-bar__search {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 10px;
		height: var(--ml-app-bar-inner-h);
		padding: 0 16px;
		border: none;
		border-radius: 14px;
		background: #fff;
		color: #2d3328;
		font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: -0.01em;
		line-height: 1.2;
		text-align: left;
		cursor: pointer;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
		transition: background 0.2s ease, box-shadow 0.2s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.ml-mobile-app-bar__search .mi {
		flex-shrink: 0;
		font-size: 1.3125rem;
		color: var(--ml-app-bar-brand);
		margin: 0 !important;
	}

	.ml-mobile-app-bar__search-text {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #6b7564;
		font-weight: 450;
	}

	.ml-mobile-app-bar__search:active {
		opacity: 0.92;
	}

	.ml-mobile-app-bar__search:focus-visible {
		outline: none;
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
	}

	/* Icon actions — compact */
	.ml-mobile-app-bar__actions {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}

	.ml-mobile-app-bar__action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		min-width: var(--ml-app-bar-action-size);
		width: var(--ml-app-bar-action-size);
		height: var(--ml-app-bar-action-size);
		padding: 0;
		border: none;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
		text-decoration: none;
		cursor: pointer;
		transition: background 0.2s ease, opacity 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.ml-mobile-app-bar__action .mi {
		font-size: 1.375rem;
		margin: 0 !important;
		line-height: 1;
		color: #fff;
	}

	.ml-mobile-app-bar__action--icon-only .ml-mobile-app-bar__action-label {
		display: none;
	}

	.ml-mobile-app-bar__action:active {
		opacity: 0.88;
	}

	.ml-mobile-app-bar__action:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
	}

	/* Chat & add business — icon-only white chips */
	.ml-mobile-app-bar__action--chat,
	.ml-mobile-app-bar__action--add-business {
		background: #fff;
		color: var(--ml-app-bar-brand);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	}

	.ml-mobile-app-bar__action--chat .mi,
	.ml-mobile-app-bar__action--add-business .mi {
		font-size: 1.375rem;
		color: var(--ml-app-bar-brand);
	}

	.ml-mobile-app-bar__action--chat:hover,
	.ml-mobile-app-bar__action--chat:focus-visible,
	.ml-mobile-app-bar__action--add-business:hover,
	.ml-mobile-app-bar__action--add-business:focus-visible {
		background: #f3f5f1;
	}

	#nyuki-chatbot-panel.nyuki-panel.is-open {
		bottom: var(--ml-app-bar-height);
	}
}

/* Tablet — balanced dock, not edge-to-edge search */
@media (min-width: 768px) and (max-width: 1200px) {
	:root {
		--ml-app-bar-pad-y: 16px;
		--ml-app-bar-pad-x: 28px;
		--ml-app-bar-inner-h: 52px;
		--ml-app-bar-action-size: 52px;
		--ml-app-bar-height: calc(
			var(--ml-app-bar-pad-y) * 2 + var(--ml-app-bar-inner-h) + var(--ml-app-bar-safe)
		);
	}

	.ml-mobile-app-bar__inner {
		max-width: min(840px, calc(100% - 56px));
		gap: 12px;
	}

	.ml-mobile-app-bar__search {
		flex: 1 1 auto;
		max-width: 520px;
		height: var(--ml-app-bar-inner-h);
		padding: 0 18px;
		border-radius: 14px;
		font-size: 0.9375rem;
		gap: 10px;
	}

	.ml-mobile-app-bar__search .mi {
		font-size: 1.25rem;
	}

	.ml-mobile-app-bar__actions {
		gap: 10px;
		margin-left: auto;
		flex-shrink: 0;
	}

	.ml-mobile-app-bar__action {
		border-radius: 12px;
	}

	.ml-mobile-app-bar__action .mi,
	.ml-mobile-app-bar__action--chat .mi,
	.ml-mobile-app-bar__action--add-business .mi {
		font-size: 1.3125rem;
	}
}

@media (min-width: 1201px) {
	.ml-mobile-app-bar {
		display: none !important;
	}

	body.ml-mobile-app-bar-enabled {
		padding-bottom: 0 !important;
	}
}