/* =============================================================================
   IzeChat Motion System — Phase 1 adapter: the bottom navigation
   -----------------------------------------------------------------------------
   Refinement, not redesign. The bar, its markup, its six destinations, its
   liquid-glass background and its scroll auto-hide are all untouched. What was
   missing is that the bar never ACKNOWLEDGED anything: tapping a tab produced no
   press, no ripple and no travel — the icon simply changed colour on the next
   page. That is the single biggest "this is a website" tell in the app.

   Added here, all of it from Motion System tokens:
     • touch ripple, clipped to the circular target
     • icon compresses under the finger and springs back on release
     • the active icon rests slightly larger
     • an active indicator that GLIDES between tabs instead of blinking

   WHAT IS DELIBERATELY NOT HERE
     • Labels. The bar has never had them; adding them is a redesign, not
       motion, and would change the bar's height and every safe-area
       calculation that depends on it.

   THREE HARD CONSTRAINTS THIS FILE OBEYS (each one is a bug that has already
   been paid for once in this codebase)
     1. NO transform / will-change / filter on `.tag_hdr_right` itself or on the
        `.dropdown` wrappers. Those properties make an element the containing
        block for its position:fixed descendants, and this bar CONTAINS the
        full-screen notification / message / request panels. Press effects
        therefore live on the inner <svg>/<img>, and the indicator is an
        absolutely positioned sibling that transforms only itself.
     2. NO use of `.tag_hdr_droptoggle::before` — style.css:4350 sets it to
        display:none at mobile widths, so anything built on it would work on
        desktop and silently vanish on a phone. The ripple ink is a real
        element created by ize-motion.js instead.
     3. `overflow: hidden` on the toggles is scoped to the mobile bar, where the
        targets are icon-only. The desktop header renders a name <span> inside
        the same button, which clipping would cut off.

   Loaded after ize-motion.css (tokens) and after dark.css, so equal-specificity
   rules win without !important.
   ========================================================================== */

/* Hidden by default: this element only means something in the mobile bar. */
.ize-mo-navdot { display: none; }

@media (max-width: 768px) {

	/* ---------- Ripple host ------------------------------------------------- */
	/* position:relative already exists on .tag_hdr_droptoggle (style.css:381);
	   restated so this file does not silently depend on it. The badge
	   (.new-update-alert) is a SIBLING of the button, not a child, so clipping
	   here can never cut off an unread count. */
	.tag_hdr_right .tag_hdr_droptoggle {
		position: relative;
		overflow: hidden;
		border-radius: 50%;
		-webkit-tap-highlight-color: transparent;
	}

	/* ---------- Press: the icon takes the touch ----------------------------- */
	/* Release is the spring, press is the fast standard curve: going down should
	   feel immediate, coming back should feel physical. */
	.tag_hdr_right .tag_hdr_droptoggle > svg,
	.tag_hdr_right .tag_hdr_droptoggle > img {
		transform-origin: 50% 50%;
		transition: transform var(--ize-mo-t-quick) var(--ize-mo-e-spring);
	}

	/* Resting state of the CURRENT tab. Small on purpose — 8% is legible as
	   "you are here" next to the colour change, without the icon looking like
	   it is at a different zoom level from its neighbours. */
	.tag_hdr_right .tag_hdr_active > svg,
	.tag_hdr_right .show > .tag_hdr_droptoggle > svg,
	.tag_hdr_right .show > .tag_hdr_droptoggle > img {
		transform: scale(1.08);
	}

	/* Must come after the active rule and carries one more class, so a press on
	   the tab you are already on still compresses instead of sticking at 1.08. */
	.tag_hdr_right .tag_hdr_droptoggle.ize-mo-pressed > svg,
	.tag_hdr_right .tag_hdr_droptoggle.ize-mo-pressed > img {
		transform: scale(.88);
		transition-duration: var(--ize-mo-t-instant);
		transition-timing-function: var(--ize-mo-e-standard);
	}

	/* ---------- Active indicator -------------------------------------------- */
	/* A 3px rule along the top edge of the bar rather than the Material pill
	   behind the icon: the bar is translucent glass with unread badges hanging
	   off the top-right of three of its six targets, and a filled pill under
	   those would read as clutter. The top edge is empty, so travel there is
	   pure signal.

	   Fixed width + translateX only. Animating width would be a layout change
	   on every tab switch; a constant-width indicator over equal-width tabs
	   glides on the compositor alone and looks identical.

	   The bar is already position:fixed, so it is the containing block for this
	   absolutely positioned child — no new stacking or containing-block
	   behaviour is introduced, and the fixed dropdown panels stay unaffected. */
	.tag_hdr_right .ize-mo-navdot {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 22px;
		height: 3px;
		border-radius: 0 0 4px 4px;
		background: var(--main, #2196f3);
		pointer-events: none;
		z-index: 2;

		/* Parked state: invisible and narrowed, so its first appearance grows
		   out of the tab rather than sliding in from the corner. */
		opacity: 0;
		transform: translate3d(0, 0, 0) scaleX(.35);
		transform-origin: 50% 0;

		transition: transform var(--ize-mo-t-normal) var(--ize-mo-e-glide),
		            opacity   var(--ize-mo-t-fast)   var(--ize-mo-e-standard);
	}

	.tag_hdr_right .ize-mo-navdot.ize-mo-navdot-on { opacity: 1; }

	/* First positioning after load must not animate in from x=0 — it would look
	   like the indicator flew across the bar on every page open. ize-motion-nav.js
	   adds this class for exactly one frame while it places the indicator. */
	.tag_hdr_right .ize-mo-navdot.ize-mo-navdot-init { transition: none; }
}

/* ---------- Desktop / tablet ------------------------------------------------ */
/* The same icons live in the top-right header above 768px. They get the press
   response (no clipping needed, so the name span in the account button is
   safe) but no indicator — there is no bar for it to travel along. */
@media (min-width: 769px) {
	.tag_hdr_right .tag_hdr_droptoggle > svg,
	.tag_hdr_right .tag_hdr_droptoggle > img {
		transition: transform var(--ize-mo-t-quick) var(--ize-mo-e-spring);
	}

	.tag_hdr_right .tag_hdr_droptoggle.ize-mo-pressed > svg,
	.tag_hdr_right .tag_hdr_droptoggle.ize-mo-pressed > img {
		transform: scale(.90);
		transition-duration: var(--ize-mo-t-instant);
		transition-timing-function: var(--ize-mo-e-standard);
	}
}

/* ---------- In-app page arrival --------------------------------------------- */
/* Applied to #contnet by ize-motion-nav.js when a data-ajax navigation lands.
   Short and small: 6px of travel over 240ms reads as the screen settling, and
   is cheap enough to composite on an entry-level phone. No fill mode — if the
   animation is cancelled or never runs, the content is simply there. */
.ize-mo-page-in {
	animation: ize-mo-page-in var(--ize-mo-t-page) var(--ize-mo-e-enter);
}