/* 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:none;
	}

	.falue-concept-dock-item:active,
	.falue-concept-create:active {
		transform:none;
	}

	.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_CONTEXTUAL_MESSAGE_ICON_SIZE_V17
	 * The Message artwork has more intrinsic viewBox padding than Home.
	 * A 32px SVG box gives both icons the same optical footprint while
	 * leaving the dock item and its 52px/48px touch target unchanged.
	 */
	.falue-concept-dock-item[data-falue-concept-key="messages"] .falue-message-icon {
		width:32px;
		height:32px;
	}
.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);
	}
/*
	 * 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;
	}
}


/* FALUE_MOBILE_DOCK_ICON_ALIGNMENT_V1 */
@media (max-width:768px) {
  .falue-concept-dock-item,
  .falue-concept-dock-pill,
  .falue-concept-create,
  .falue-concept-create-core {
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  .falue-concept-dock-item svg,
  .falue-concept-dock-item[data-falue-concept-key="messages"] .falue-message-icon,
  .falue-concept-create-core svg {
    width:27px !important;
    height:27px !important;
    min-width:27px;
    min-height:27px;
    max-width:27px;
    max-height:27px;
    display:block;
    flex:0 0 27px;
    margin:0;
    box-sizing:border-box;
  }
}


/* FALUE_RAISED_ACTIVE_MEDALLION_V1 */
@media (max-width:768px) {
  .falue-concept-dock,
  .falue-concept-dock-item,
  .falue-concept-dock-pill {
    overflow:visible;
  }

  .falue-concept-dock-pill {
    width:52px;
    height:52px;
    transform:translateY(0) scale(1);
    transform-origin:center;
    transition:width .18s cubic-bezier(.22,1,.36,1),
      height .18s cubic-bezier(.22,1,.36,1),
      transform .18s cubic-bezier(.22,1,.36,1),
      box-shadow .18s ease;
  }

  .falue-concept-dock-item.is-active {
    z-index:3;
  }

  .falue-concept-dock-item.is-active .falue-concept-dock-pill {
    width:58px;
    height:58px;
    transform:translateY(-5px) scale(1.02);
    box-shadow:0 14px 28px rgba(43,45,66,.16),
      0 3px 8px rgba(43,45,66,.10);
  }

  .falue-concept-dock-item:active .falue-concept-dock-pill {
    transform:translateY(0) scale(1);
  }
}

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


/* FALUE_RAISED_ACTIVE_MEDALLION_V2 */
@media (max-width:768px) {
  .falue-concept-dock-item svg,
  .falue-concept-dock-item[data-falue-concept-key="messages"] .falue-message-icon,
  .falue-concept-create-core svg,
  .falue-concept-dock-item.is-active svg,
  .falue-concept-dock-item.is-active .falue-message-icon,
  .falue-concept-create.is-active .falue-concept-create-core svg {
    width:38px !important;
    height:38px !important;
    min-width:38px;
    min-height:38px;
    max-width:38px;
    max-height:38px;
    flex-basis:38px;
  }

  .falue-concept-dock-item.is-active .falue-concept-dock-pill {
    transform:translateY(-14px);
  }
}

/* FALUE_LIFTED_MEDALLION_CONCEPT_1 */
@media (max-width:768px) {
  .falue-concept-dock-item.is-active {
    z-index:4;
  }

  .falue-concept-dock-item.is-active .falue-concept-dock-pill {
    width:60px;
    height:60px;
    border-radius:50%;
    transform:translateY(-14px);
    box-shadow:0 18px 34px rgba(43,45,66,.18),
      0 4px 10px rgba(43,45,66,.12);
  }

  .falue-concept-dock-item.is-active svg,
  .falue-concept-dock-item.is-active .falue-message-icon,
  .falue-concept-create.is-active .falue-concept-create-core svg {
    width:38px !important;
    height:38px !important;
    min-width:38px;
    min-height:38px;
    max-width:38px;
    max-height:38px;
    flex-basis:38px;
  }

  .falue-concept-dock-item.is-active:active .falue-concept-dock-pill {
    transform:translateY(-14px);
  }
}

/* FALUE_STABLE_DOCK_POSITION_V2 */
@media (max-width:768px) {
  html body nav.falue-concept-dock .falue-concept-dock-item,
  html body nav.falue-concept-dock .falue-concept-dock-item:active,
  html body nav.falue-concept-dock .falue-concept-dock-item:focus,
  html body nav.falue-concept-dock .falue-concept-dock-item:focus-visible {
    transform:none !important;
    transition:none !important;
  }

  html body nav.falue-concept-dock .falue-concept-dock-item .falue-concept-dock-pill,
  html body nav.falue-concept-dock .falue-concept-dock-item:active .falue-concept-dock-pill,
  html body nav.falue-concept-dock .falue-concept-dock-item:focus .falue-concept-dock-pill,
  html body nav.falue-concept-dock .falue-concept-dock-item:focus-visible .falue-concept-dock-pill {
    transform:translateY(0) !important;
    transition:none !important;
  }

  html body nav.falue-concept-dock .falue-concept-dock-item.is-active .falue-concept-dock-pill,
  html body nav.falue-concept-dock .falue-concept-dock-item.is-active:active .falue-concept-dock-pill,
  html body nav.falue-concept-dock .falue-concept-dock-item.is-active:focus .falue-concept-dock-pill,
  html body nav.falue-concept-dock .falue-concept-dock-item.is-active:focus-visible .falue-concept-dock-pill {
    transform:translateY(-14px) !important;
  }
}


/* FALUE_DOCK_FOCUS_STATE_V1 */
@media (max-width:768px) {
  .falue-concept-dock {
    background:rgba(255,255,255,.86);
    box-shadow:0 12px 32px rgba(43,45,66,.10),0 1px 6px rgba(43,45,66,.04);
  }
  .falue-concept-dock-item {
    color:rgba(85,98,127,.48) !important;
    opacity:.68;
    transition:color .18s ease, opacity .18s ease;
  }
  .falue-concept-dock-item .falue-concept-dock-pill {
    background:transparent !important;
    box-shadow:none !important;
  }
  .falue-concept-dock-item.is-active {
    color:#6a59ff !important;
    opacity:1;
  }
  .falue-concept-dock-item.is-active .falue-concept-dock-pill {
    background:#fff !important;
    box-shadow:0 14px 28px rgba(43,45,66,.16),0 3px 8px rgba(43,45,66,.10) !important;
  }
  .falue-concept-create {
    opacity:.84;
    transition:opacity .18s ease;
  }
}
@media (prefers-reduced-motion:reduce) {
  .falue-concept-dock-item,
  .falue-concept-create { transition:none !important; }
}
/* /FALUE_DOCK_FOCUS_STATE_V1 */


/* FALUE_DOCK_FOCUS_STATE_V2 */
@media (max-width:768px) {
  html body nav.falue-concept-dock {
    background:rgba(255,255,255,.72) !important;
    border:1px solid rgba(43,45,66,.10);
    -webkit-backdrop-filter:blur(18px) saturate(115%);
    backdrop-filter:blur(18px) saturate(115%);
    box-shadow:0 14px 34px rgba(43,45,66,.12),0 1px 8px rgba(43,45,66,.05);
  }
  html body nav.falue-concept-dock .falue-concept-dock-item:not(.is-active) {
    color:rgba(85,98,127,.42) !important;
    opacity:.42 !important;
  }
  html body nav.falue-concept-dock .falue-concept-dock-item:not(.is-active) .falue-concept-dock-pill {
    background:transparent !important;
    box-shadow:none !important;
  }
  html body nav.falue-concept-dock .falue-concept-dock-item.is-active {
    color:#6a59ff !important;
    opacity:1 !important;
  }
  html body nav.falue-concept-dock .falue-concept-create {
    opacity:.74 !important;
  }
}
/* /FALUE_DOCK_FOCUS_STATE_V2 */
