/* =============================================================================
   IzeChat Motion System — Round A adapter: micro-interactions + ambient
   (Phases 2 and 5)
   -----------------------------------------------------------------------------
   Almost all of Phase 2 is REGISTRATION, not CSS: ize-motion-ui.js names the
   surfaces and the runtime arms them with the shared `.ize-mo-press` primitive
   on first touch. This file exists only for the three things registration
   cannot do:

     1. Make a surface able to CLIP a ripple (position + overflow), which has to
        be decided per component because clipping the wrong box hides content.
     2. Carry the few press exceptions where a plain scale would be wrong.
     3. Hold the ambient (idle) rules, all of which are gated by
        --ize-mo-ambient-play so they stop dead on a battery-saver device, in a
        background tab, or under Reduce Motion.

   Additive: every selector either adds motion properties to an element that had
   none, or is a new .ize-mo-* class. No layout, colour or spacing is changed.
   ========================================================================== */

/* ---------- Ripple hosts ---------------------------------------------------- */
/* Only surfaces verified to have nothing escaping their own box. A badge, a
   flyout or an absolutely positioned chevron that lives OUTSIDE the padding box
   would be cut off by `overflow: hidden`, so those get press feedback only. */
.ize-hc-nudge,
.ize-hc-nudge-cta,
.tag_feed_reel_follow,
.tag_feed_group_join,
.tag_lbox_save_btn,
.tag_lbox_mobi_cmt_btn,
.mp-pp-btn,
.mp-place-btn,
.mp-vopt,
.mp-sh-opt,
[data-ize-ripple] {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- Press exceptions ------------------------------------------------ */
/* The premium CTA is permanently `transform: skewX(-25deg)` (style.header.css:24).
   Any scale from the generic press primitive would replace that transform and
   the pill would visibly un-skew under the finger, so it dims instead — the
   same message in the vocabulary this element can speak. */
.tag_prem.ize-mo-pressed {
	transform: skewX(-25deg) scale(.97);
	opacity: .9;
}

/* Media cannot scale without revealing the layout edge behind it. */
.tag_lbox_img.ize-mo-pressed,
.post .post-thumb-image.ize-mo-pressed { transform: none; opacity: var(--ize-mo-dim); }

/* ---------- Acknowledgement targets ----------------------------------------- */
/* NOTE: an earlier version of this file forced `display: inline-block` here so
   a badge could host a transform. That was a bug, and a visible one: WoWonder
   hides a zero-count badge by adding `.hidden`, which is `display:none` with NO
   !important (style.css:3228). This file loads later, so at equal specificity
   the inline-block won and every unread badge showed a permanent "0".
   The rule was never needed — .new-update-alert is position:absolute
   (style.css:400), and an absolutely positioned box is already blockified and
   perfectly transformable. Set only what actually needs setting. */
.new-update-alert { transform-origin: 50% 50%; }

/* =============================================================================
   AMBIENT (Phase 5)
   The rule for everything below: if you can notice it while reading, it is
   wrong. All of it stops via --ize-mo-ambient-play.
   ========================================================================== */

/* ---------- AI assistant FAB ------------------------------------------------ */
/* The FAB is dragged by writing style.left/top (ize-ai-assistant.js:176-177), so
   transform is free for us and a breathing scale can never fight the drag.
   3.2s and 3% — at the edge of the screen this reads as "it is awake", and it
   is impossible to notice while reading the feed. */
#ize-ai-fab {
	animation: ize-mo-breathe var(--ize-mo-t-breathe) var(--ize-mo-e-standard) infinite;
	animation-play-state: var(--ize-mo-ambient-play);
}

/* A finger on it stops the idle motion outright — nothing should be breathing
   while it is being held or moved. */
#ize-ai-fab:active,
#ize-ai-fab.ize-mo-pressed { animation-play-state: paused; }

/* ---------- Greeting card --------------------------------------------------- */
/* Two iterations, not infinite. The greeting card sits at the top of the feed,
   directly in the reading path, and a permanently animating element there is
   precisely the "distracting" failure this phase is meant to avoid. Two breaths
   on arrival reads as the card waking up; after that it is still. */
.ize-hc-bar-ic {
	animation: ize-mo-breathe var(--ize-mo-t-breathe) var(--ize-mo-e-standard) 2;
	animation-play-state: var(--ize-mo-ambient-play);
}

/* ---------- Premium badge --------------------------------------------------- */
/* The gradient sweep already exists (style.header.css:24-26) and already looks
   right; it was simply never gated. One property brings it under the same
   policy as everything else — on a battery-saver device an infinite background
   animation in the header is exactly the wrong place to spend the budget. */
.tag_prem { animation-play-state: var(--ize-mo-ambient-play); }

/* =============================================================================
   GIF / STICKER / EMOJI PICKERS  (Phase 4 — the last inconsistent popup)
   -----------------------------------------------------------------------------
   These are the one popup the sheet converter correctly refuses: they are
   content GRIDS, not action menus, so presenting them as a list of rows would
   be wrong. But they were still stock Bootstrap dropdowns — a narrow floating
   card, positioned by Popper wherever it fit, overlapping the composer at an
   angle nobody chose. On a phone that is the most website-looking surface left
   in the app.

   Docked here instead: full width, pinned to the bottom edge, rounded top
   corners, real height, and a slide-up. Same shape language as every other
   sheet in the product, without pretending a grid is a menu.

   WHY THE !important
   Bootstrap 4 positions these with Popper, which writes `position`, `top`,
   `left` and a `transform` as INLINE styles when the menu opens. Inline styles
   cannot be beaten by specificity — only by !important. Scoped to these two
   picker classes and to phone widths, so nothing else in the app is affected.

   WHY `translate` AND NOT `transform` FOR THE ANIMATION
   `transform: none !important` is what neutralises Popper's offset — and an
   !important declaration also beats an animation, so animating `transform`
   here would silently do nothing. The independent `translate` property
   composes with `transform` instead of fighting it. On an engine without it
   the panel simply appears docked and un-animated, which is still better than
   where it started.
   ========================================================================== */
@media (max-width: 800px) {
	.dropdown-menu.tag_comm_gifs,
	.dropdown-menu.wo_comm_emojis,
	.dropdown-menu.tag_chat_gifs {
		position: fixed !important;
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		transform: none !important;

		/* Sits ON TOP OF the composer, not over it — you can still see what you
		   are typing, which is how every messaging app does this. The offset is
		   measured, not guessed: ize-motion-ui.js sets --ize-mo-dock-bottom to
		   the distance from the bottom of the viewport to the top of the button
		   that opened the picker. The composer's height changes with the text,
		   the keyboard and the safe area, so a hardcoded value would be wrong
		   somewhere. Falls back to 0 (flush to the bottom) if JS never runs. */
		bottom: var(--ize-mo-dock-bottom, 0px) !important;

		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;

		/* Tall enough to browse, and never taller than the space actually left
		   above the composer. */
		max-height: min(46vh, calc(100vh - var(--ize-mo-dock-bottom, 0px) - 72px));
		overflow-y: auto;
		overscroll-behavior: contain;

		border: 0;
		/* Top corners only: it is full-bleed and rests on the composer, so a
		   rounded bottom edge would read as a floating card again. */
		border-radius: 18px 18px 0 0;
		box-shadow: var(--ize-mo-elev-3);
		padding-bottom: 8px;
		/* Above the comment sheet (1100) and the bottom nav. */
		z-index: 1150;
	}

	.dropdown-menu.tag_comm_gifs.show,
	.dropdown-menu.wo_comm_emojis.show,
	.dropdown-menu.tag_chat_gifs.show {
		animation: ize-mo-dock-in var(--ize-mo-t-slow) var(--ize-mo-e-enter);
	}

	/* The grids inside were sized for a 280px floating card. */
	.dropdown-menu.tag_comm_gifs .tag_chat_GIF,
	.dropdown-menu.tag_comm_gifs .tag_chat_stickers { width: 100%; }
}

@keyframes ize-mo-dock-in {
	from { translate: 0 100%; opacity: 0; }
	to   { translate: 0 0;    opacity: 1; }
}