/* FALUE_UNIVERSAL_BAR_RADIUS_V21 */
/* Footer and publisher bar now use the exact same 26px radius as the header. */

/* FALUE_HEADER_FOOTER_EQUAL_WIDTH_V20 */
/* Footer uses the same shared inline gutter and height variables as the header. */

/* FALUE_UNIVERSAL_BAR_SIZE_V19 */
/* Header, publisher bar, and footer share 64px height and 22px mobile gutter. */

/*
 * Falue Exact Concept Dock v15
 *
 * Built specifically to match the approved concept image:
 *   - slim white floating dock
 *   - four icon destinations only
 *   - active icon sits inside a small raised pill
 *   - tiny active indicator dot under the icon
 *   - create + button placed inside the dock
 *
 * No labels in the dock. No profile tab. No remixing.
 */
.falue-concept-dock,
.falue-concept-create {
	display:none;
}

@media (max-width:768px) {
	body.falue-concept-dock-ready {
		padding-bottom:calc(108px + env(safe-area-inset-bottom,0px)) !important;
	}

	body.falue-concept-dock-ready .tag_sec_toolbar {
		display:none !important;
	}

	/* Keep legacy notification mechanics alive offscreen. */
	body.falue-concept-dock-ready .tag_hdr_right {
		left:-10000px !important;
		right:auto !important;
		top:0 !important;
		bottom:auto !important;
		width:1px !important;
		height:1px !important;
		padding:0 !important;
		overflow:visible !important;
	}

	.falue-concept-dock {
		position:fixed;
		z-index:1061;
		left:var(--falue-mobile-content-inline);
		right:var(--falue-mobile-content-inline);
		width:auto;
		max-width:none;
		bottom:calc(16px + env(safe-area-inset-bottom,0px));
		height:var(--falue-mobile-bar-height);
		display:grid;
		grid-template-columns:repeat(5,1fr);
		align-items:center;
		padding:6px 10px;
		border:0;
		border-radius:var(--falue-mobile-bar-radius);
		background:rgba(255,255,255,.98);
		box-shadow:
			0 12px 32px rgba(43,45,66,.12),
			0 1px 6px rgba(43,45,66,.05);
	}

	.falue-concept-dock-item {
		position:relative;
		display:flex;
		align-items:center;
		justify-content:center;
		min-width:0;
		height:52px;
		padding:0;
		background:transparent;
		border:0;
		color:#55627f;
		text-decoration:none !important;
		-webkit-tap-highlight-color:transparent;
		transition:transform .14s ease;
	}

	.falue-concept-dock-item:active,
	.falue-concept-create:active {
		transform:scale(.96);
	}

	.falue-concept-dock-pill {
		position:relative;
		width:52px;
		height:52px;
		display:flex;
		align-items:center;
		justify-content:center;
		border-radius:20px;
		background:transparent;
		transition:background-color .18s ease, box-shadow .18s ease;
	}

	.falue-concept-dock-item svg {
		width:27px;
		height:27px;
		fill:none;
		stroke:currentColor;
		stroke-width:1.9;
		stroke-linecap:round;
		stroke-linejoin:round;
	}

	.falue-concept-dock-dot {
		display:none;
		position:absolute;
		left:50%;
		bottom:7px;
		width:7px;
		height:7px;
		margin-left:-3.5px;
		border-radius:999px;
		background:#6a59ff;
		box-shadow:0 0 0 1px rgba(255,255,255,.95);
	}

	.falue-concept-dock-item.is-active {
		color:#6a59ff;
	}

	.falue-concept-dock-item.is-active .falue-concept-dock-pill {
		background:#ffffff;
		box-shadow:
			0 10px 20px rgba(43,45,66,.08),
			0 1px 2px rgba(43,45,66,.04);
	}

	.falue-concept-dock-item.is-active .falue-concept-dock-dot {
		display:block;
	}

	/*
	 * Create button uses the existing refined v16 appearance and now sits inside the dock.
	 */
	/* FALUE_CREATE_BUTTON_REFINED_V16 */
	/* Refined smaller create control: lighter ring, less visual weight. */
	.falue-concept-create {
		position:relative;
		z-index:2;
		justify-self:center;
		align-self:center;
		width:52px;
		height:52px;
		display:flex;
		align-items:center;
		justify-content:center;
		padding:0;
		border:0;
		background:transparent;
		cursor:pointer;
		-webkit-tap-highlight-color:transparent;
	}

	.falue-concept-create-ring {
		position:absolute;
		inset:0;
		border-radius:999px;
		background:linear-gradient(145deg, rgba(121,157,255,.95) 0%, rgba(127,89,255,.96) 100%);
		box-shadow:0 9px 20px rgba(74,92,206,.18);
		opacity:.94;
	}

	.falue-concept-create-core {
		position:relative;
		z-index:1;
		width:44px;
		height:44px;
		display:flex;
		align-items:center;
		justify-content:center;
		border-radius:999px;
		background:linear-gradient(145deg,#5464ee 0%,#6d53ff 100%);
		box-shadow:inset 0 0 0 2px rgba(255,255,255,.26);
		color:#fff;
	}

	.falue-concept-create-core svg {
		width:25px;
		height:25px;
		fill:none;
		stroke:currentColor;
		stroke-width:2.1;
		stroke-linecap:round;
	}

	@media (max-width:390px) {
		.falue-concept-dock {
			left:var(--falue-mobile-content-inline);
			right:var(--falue-mobile-content-inline);
			width:auto;
			max-width:none;
			height:var(--falue-mobile-bar-height);
			padding:6px 10px;
			border-radius:var(--falue-mobile-bar-radius);
		}
		.falue-concept-dock-pill {
			width:48px;
			height:48px;
			border-radius:18px;
		}
		.falue-concept-create {
			width:52px;
			height:52px;
		}
		.falue-concept-create-core {
			width:44px;
			height:44px;
		}
	}
}

@media (prefers-reduced-motion:reduce) {
	.falue-concept-dock-item,
	.falue-concept-dock-pill,
	.falue-concept-create {
		transition:none !important;
	}
}