/* =============================================================================
   IzeChat — compact post action bar
   -----------------------------------------------------------------------------
   Scope: the post card's action row ONLY (.post .tag_post_actions). Nothing
   else on the card is touched. Loaded after style.css and dark.css so equal
   specificity wins without !important.

   What it replaces:
     - the stock 40px grey squircle icon chips
       (.tag_post_react_btn svg { padding:9px; width:40px; background:#0001 })
     - the second counts row (.tag_post_foot_stats), now folded into this row
       by footer.phtml

   `.stat-item`, `.like-stat` and `.post-actions` are shared with chat, blog and
   comment templates, so every selector here stays under `.post
   .tag_post_actions` to avoid leaking into them.

   Dark mode: WoWonder only signals dark by injecting <link id="night-mode-css">
   (no body class), so tokens key off `html:has(#night-mode-css)` — pure CSS, no
   JS dependency, correct on first paint.
   ========================================================================== */

.post .tag_post_actions.ize-bar {
	--ize-ink-2:   #65676b;   /* resting icon + count */
	--ize-ink:     #1c1e21;   /* hover               */
	--ize-hover:   rgba(0, 0, 0, .05);
	--ize-hair:    rgba(0, 0, 0, .08);
	--ize-surface: #fff;
	--ize-fast:    140ms;
	--ize-ease:    cubic-bezier(.2, .7, .3, 1);
	--ize-spring:  cubic-bezier(.34, 1.4, .64, 1);

	/* One row. Stock was `margin:15px -15px 0; padding:0 0 10px` plus a whole
	   second row underneath.
	   The asymmetric padding is deliberate: 8px above the buttons separates
	   them from the divider, 12px below gives the row room to breathe against
	   the card edge (or the comments) instead of sitting flush on it. */
	margin: 6px 0 0;
	padding: 8px 6px 12px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	position: relative;
}

/* Hairline separating media/caption from the bar, inset to the text column. */
.post .tag_post_actions.ize-bar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 9px;
	right: 9px;
	height: 1px;
	background: var(--ize-hair);
}

.post .tag_post_actions.ize-bar .ize-bar-left {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

.post .tag_post_actions.ize-bar .ize-bar-right {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
	padding-right: 3px;
}

/* ---------- Buttons -------------------------------------------------------- */
/* NB: .stat-item must stay overflow:visible — the reaction flyout
   (.reactions-box) is absolutely positioned inside it. Button chrome and the
   ripple therefore live on the inner element. */
.post .tag_post_actions.ize-bar .stat-item {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	/* Deliberately NOT position:relative, and NOT overflow:hidden.
	   .reactions-box is `position:absolute; bottom:100%` with no left/right, so
	   its width is shrink-to-fit CAPPED BY ITS CONTAINING BLOCK. style.css
	   relies on that block being .tag_post_actions (the full-width bar) so the
	   six 48px reactions lay out in a row. Positioning .stat-item would make it
	   the containing block (~75px) and the reactions would wrap into a vertical
	   stack. The ripple doesn't need this either — it lives on .like-btn, which
	   style.css already positions. */
	overflow: visible;
	cursor: pointer;
}

.post .tag_post_actions.ize-bar .tag_post_foot_acticon,
.post .tag_post_actions.ize-bar .like-btn,
.post .tag_post_actions.ize-bar .ize-stat-static,
.post #like-button,
.post #wonder-button {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 10px;
	border-radius: 9px;
	position: relative;
	overflow: hidden;              /* clips the ripple */
	/* Must not shrink. These carry overflow:hidden for the ripple, so a squeezed
	   button silently CLIPS its count ("312" -> "31") rather than overflowing —
	   invisible to an overflow check, but very visible on screen. */
	flex: 0 0 auto;
	color: var(--ize-ink-2);
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--ize-fast) var(--ize-ease),
	            color var(--ize-fast) var(--ize-ease),
	            transform var(--ize-fast) var(--ize-ease);
}

.post .tag_post_actions.ize-bar .ize-stat-static { cursor: default; }

@media (hover: hover) and (pointer: fine) {
	.post .tag_post_actions.ize-bar .tag_post_foot_acticon:hover,
	.post .tag_post_actions.ize-bar .like-btn:hover,
	.post #like-button:hover,
	.post #wonder-button:hover { background-color: var(--ize-hover); color: var(--ize-ink); }
}

.post .tag_post_actions.ize-bar .tag_post_foot_acticon:active,
.post .tag_post_actions.ize-bar .like-btn:active,
.post #like-button:active,
.post #wonder-button:active { transform: scale(.92); }

.post .tag_post_actions.ize-bar .tag_post_foot_acticon:focus-visible,
.post .tag_post_actions.ize-bar .like-btn:focus-visible,
.post #like-button:focus-visible,
.post #wonder-button:focus-visible { outline: 2px solid var(--main); outline-offset: -2px; }

/* ---------- Icons ---------------------------------------------------------- */
/* Kills the stock 40px grey chip: padding:9px, 40x40, border-radius:40%,
   background rgba(0,0,0,.06). That chip is what made the bar look heavy. */
.post .tag_post_actions.ize-bar .tag_post_react_btn svg,
.post .tag_post_actions.ize-bar .tag_post_react_btn .inline_post_emoji,
.post .tag_post_actions.ize-bar .tag_post_react_btn .inline_post_count_emoji,
.post .tag_post_actions.ize-bar .tag_post_foot_acticon svg,
.post .tag_post_actions.ize-bar .tag_post_foot_acticon svg.feather,
.post .tag_post_actions.ize-bar .ize-stat-static svg,
.post #like-button > svg,
.post #wonder-button .icoo svg {
	padding: 0;
	margin: 0;
	background-color: transparent;
	border-radius: 0;
	width: 21px;
	height: 21px;
	flex: 0 0 auto;
	transition: transform 200ms var(--ize-spring);
}

.post .tag_post_actions.ize-bar .stat-item .icoo {
	padding: 0; margin: 0; width: auto; height: auto;
	background-color: transparent; border-radius: 0;
}

/* The reaction "hand" is drawn in a 58.553 viewBox where its own stroke-width
   of 2.5 renders far lighter than the 24-viewBox feather icons beside it.
   stroke-width is in user units, so matching apparent weight is a pure ratio of
   the two viewBoxes — independent of the rendered px size:
       1.8 x (58.553 / 24) ~= 4.4
   Matched on viewBox so it only ever hits that one icon. */
.post .tag_post_actions.ize-bar svg[viewBox="0 0 58.553 58.266"] path { stroke-width: 4.4; }

.post .tag_post_actions.ize-bar .tag_post_react_btn { gap: 7px; }
.post .tag_post_actions.ize-bar .tag_post_react_btn > span {
	display: flex;
	align-items: center;
	gap: 7px;
	/* style.css sets font-size:0 here below 520px to collapse the bare "Like"
	   text node. We want the caption at every width, so restore it. */
	font-size: 14px;
	/* On react, JS rewrites this span to `<div class="inline_post_emoji">…</div>
	   &nbsp;&nbsp;Like`. That caption is a bare text node, so as a flex item it
	   wraps mid-word ("Li/ke") inside the narrow button without this. */
	white-space: nowrap;
}

/* WoWonder emits an always-empty <span class="t_likes<id>"> beside the icon.
   As a flex item it contributes nothing but still eats a gap. */
.post .tag_post_actions.ize-bar .tag_post_react_btn > span > [class*="t_likes"]:empty { display: none; }

/* ---------- Counts alongside the buttons ---------------------------------- */
.post .tag_post_actions.ize-bar .ize-cnt {
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--ize-ink-2);
	/* tabular figures stop the row twitching as counts animate/change */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}
.post .tag_post_actions.ize-bar .ize-cnt.d-none { display: none; }

/* Standalone like/wonder totals (non-reaction config) get their own hit area. */
.post .tag_post_actions.ize-bar .ize-cnt.tag_hid_e_lik,
.post .tag_post_actions.ize-bar .ize-cnt.tag_hid_e_wnd {
	padding: 0 6px 0 0;
	cursor: pointer;
	transition: color var(--ize-fast) var(--ize-ease);
}
.post .tag_post_actions.ize-bar .ize-cnt.tag_hid_e_lik:hover,
.post .tag_post_actions.ize-bar .ize-cnt.tag_hid_e_wnd:hover { color: var(--main); }

/* ---------- Reaction badges (right) --------------------------------------- */
.post .tag_post_actions.ize-bar .like-stat.stat-item { padding: 0; }

.post .tag_post_actions.ize-bar .like-emo {
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.post .tag_post_actions.ize-bar .like-emo > .how_reacted {
	background: var(--ize-surface);
	display: inline-flex;
	margin: 0 0 0 -5px;
	padding: 1px;
	border-radius: 50%;
	cursor: pointer;
	/* ring in the card colour so overlapping badges read as separate discs */
	box-shadow: 0 0 0 1.5px var(--ize-surface);
	transition: transform 180ms var(--ize-spring);
}
.post .tag_post_actions.ize-bar .like-emo > .how_reacted:nth-child(1) { margin-left: 0; z-index: 3; }
.post .tag_post_actions.ize-bar .like-emo > .how_reacted:nth-child(2) { z-index: 2; }
.post .tag_post_actions.ize-bar .like-emo > .how_reacted:nth-child(3) { z-index: 1; }
.post .tag_post_actions.ize-bar .like-emo > .how_reacted:nth-child(n+4) { display: none; }

/* Badge sizing — load-bearing, not cosmetic.
   style.css declares a generic `.reaction { width:48px; height:48px }` for the
   flyout, and only shrinks the summary badges back down via
   `.post-actions .stat-item .inline_post_count_emoji.reaction`. Folding the
   counts row into this bar removed that `.post-actions` ancestor, so the
   badges inherited the 48px flyout size and inflated the row. Size them here
   instead: independent of ancestry, and independent of whatever dimensions the
   admin's reaction images happen to have. 16px keeps style.css's CSS-emoji
   scale calibration (.emoji { transform: scale(.1333) }) valid. */
.post .tag_post_actions.ize-bar .like-emo .inline_post_count_emoji,
.post .tag_post_actions.ize-bar .like-emo .inline_post_count_emoji.reaction {
	width: 16px;
	height: 16px;
	float: none;
	line-height: 1;
	display: block;
}
.post .tag_post_actions.ize-bar .like-emo .inline_post_count_emoji > img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* Reacted state: the chosen reaction image replaces the hand inside the button.
   style.css sizes `.post .inline_post_emoji > .reaction` at 22px, which would
   overflow our 19px icon slot. */
.post .tag_post_actions.ize-bar .tag_post_react_btn .inline_post_emoji > .reaction {
	width: 21px;
	height: 21px;
	float: none;
	line-height: 1;
}
.post .tag_post_actions.ize-bar .tag_post_react_btn .inline_post_emoji > .reaction > img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* The "life": badges lift and glow on hover, staggered so it reads as one
   group reacting rather than icons twitching independently. */
@media (hover: hover) and (pointer: fine) {
	.post .tag_post_actions.ize-bar .like-stat:hover .how_reacted {
		transform: translateY(-2px) scale(1.06);
		filter: drop-shadow(0 2px 5px rgba(var(--main-rgb), .45));
	}
	.post .tag_post_actions.ize-bar .like-stat:hover .how_reacted:nth-child(2) { transition-delay: 35ms; }
	.post .tag_post_actions.ize-bar .like-stat:hover .how_reacted:nth-child(3) { transition-delay: 70ms; }
}

.post .tag_post_actions.ize-bar .like-emo .how_many_reacts {
	margin: 0 0 0 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ize-ink-2);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Badges pop in when the summary is (re)rendered — ize-actionbar.js re-adds
   this class after WoWonder replaces the markup on every reaction. */
.post .tag_post_actions.ize-bar .ize-react-in > .how_reacted {
	animation: izeBadgeIn 320ms var(--ize-spring) both;
}
.post .tag_post_actions.ize-bar .ize-react-in > .how_reacted:nth-child(2) { animation-delay: 45ms; }
.post .tag_post_actions.ize-bar .ize-react-in > .how_reacted:nth-child(3) { animation-delay: 90ms; }
@keyframes izeBadgeIn {
	0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
	70%  { transform: scale(1.18) rotate(4deg); opacity: 1; }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Count tick when the number changes. */
.post .tag_post_actions.ize-bar .ize-cnt-bump { animation: izeCntBump 260ms var(--ize-spring); }
@keyframes izeCntBump {
	0%   { transform: translateY(0)    scale(1); }
	40%  { transform: translateY(-2px) scale(1.16); }
	100% { transform: translateY(0)    scale(1); }
}

/* ---------- Active (reacted) state ---------------------------------------- */
/* WoWonder adds .active-like to .status-reaction-<id> and sets an inline colour
   for the chosen reaction, so colour is left alone here — only the motion and
   the glow are ours. */
.post .tag_post_actions.ize-bar .active-like { font-weight: 600; }
.post .tag_post_actions.ize-bar .active-like svg { fill: currentColor; }

.post .tag_post_actions.ize-bar .ize-pop svg,
.post .tag_post_actions.ize-bar .ize-pop .inline_post_emoji {
	animation: izePop 260ms var(--ize-spring);
}
@keyframes izePop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.32); }
	100% { transform: scale(1); }
}

/* Glow pulse on the moment of reacting. */
.post .tag_post_actions.ize-bar .ize-glow::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(circle at center, rgba(var(--main-rgb), .38), transparent 70%);
	animation: izeGlow 480ms var(--ize-ease) forwards;
}
@keyframes izeGlow {
	0%   { opacity: 0; transform: scale(.6); }
	40%  { opacity: 1; }
	100% { opacity: 0; transform: scale(1.35); }
}

/* ---------- Ripple --------------------------------------------------------- */
.post .tag_post_actions.ize-bar .ize-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(0, 0, 0, .10);
	transform: scale(0);
	opacity: .6;
	pointer-events: none;
	animation: izeRipple 440ms var(--ize-ease) forwards;
	will-change: transform, opacity;
}
@keyframes izeRipple { to { transform: scale(1); opacity: 0; } }

/* Float-up emoji on react — mirrors the .story-react-particle pattern already
   used by story reactions in style.css, so posts feel the same as stories. */
.ize-react-particle {
	position: absolute;
	pointer-events: none;
	z-index: 9999;
	animation: izeReactFloat .85s cubic-bezier(.25, .46, .45, .94) forwards;
}
@keyframes izeReactFloat {
	0%   { opacity: 1; transform: translateY(0) scale(.8); }
	35%  { opacity: 1; transform: translateY(-26px) scale(1.25); }
	100% { opacity: 0; transform: translateY(-70px) scale(1.4); }
}

/* ---------- Narrow phones -------------------------------------------------- */

/* A video post carries five items (Like + comment + share + views + badges),
   which needs ~300px of a ~244px row on a 390px phone. Since the buttons must
   not shrink (they'd clip their counts), something has to give: the view count
   is the least scannable of the five and is still on the video itself, so it
   drops first. */
@media (max-width: 420px) {
	.post .tag_post_actions.ize-bar .ize-views { display: none; }
}

@media (max-width: 380px) {
	.post .tag_post_actions.ize-bar { padding: 8px 2px 12px; gap: 4px; }
	.post .tag_post_actions.ize-bar .tag_post_foot_acticon,
	.post .tag_post_actions.ize-bar .like-btn,
	.post #like-button,
	.post #wonder-button { padding: 0 7px; gap: 4px; }
	/* Drop the "Like" caption before the counts — the count is the information,
	   the caption is decoration. Matches style.css's own font-size:0 trick. */
	.post .tag_post_actions.ize-bar .tag_post_react_btn > span { font-size: 0; gap: 0; }
	.post .tag_post_actions.ize-bar .ize-cnt,
	.post .tag_post_actions.ize-bar .like-emo .how_many_reacts { font-size: 12.5px; }
}

/* ---------- Dark ----------------------------------------------------------- */
html:has(#night-mode-css) .post .tag_post_actions.ize-bar,
html.ize-dark .post .tag_post_actions.ize-bar {
	--ize-ink-2:   #b0b3b8;
	--ize-ink:     #e4e6eb;
	--ize-hover:   rgba(255, 255, 255, .08);
	--ize-hair:    rgba(255, 255, 255, .10);
	--ize-surface: #212121;   /* matches dark.css's .post .panel background */
}
html:has(#night-mode-css) .post .tag_post_actions.ize-bar .ize-ripple,
html.ize-dark .post .tag_post_actions.ize-bar .ize-ripple { background: rgba(255, 255, 255, .14); }

/* The one !important in this file, and it is forced:
   dark.css:513 re-applies the grey icon chip as
     .tag_post_actions .stat-item > svg { background-color: #fff1 !important }
   No amount of specificity beats !important, so this has to match it. It only
   hit the comment/share icons (direct children of .stat-item) — the reaction
   icon is nested deeper, which is why the chip appeared on two icons and not
   the third. Scoped to this bar so the chip is untouched anywhere else. */
html:has(#night-mode-css) .post .tag_post_actions.ize-bar .stat-item > svg,
html:has(#night-mode-css) .post .tag_post_actions.ize-bar .stat-item > .active-like > svg,
html.ize-dark .post .tag_post_actions.ize-bar .stat-item > svg,
html.ize-dark .post .tag_post_actions.ize-bar .stat-item > .active-like > svg {
	background-color: transparent !important;
}

/* ---------- Motion / a11y -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.post .tag_post_actions.ize-bar .ize-react-in > .how_reacted,
	.post .tag_post_actions.ize-bar .ize-cnt-bump,
	.post .tag_post_actions.ize-bar .ize-pop svg,
	.post .tag_post_actions.ize-bar .ize-glow::after,
	.ize-react-particle { animation: none; }

	.post .tag_post_actions.ize-bar .ize-ripple,
	.ize-react-particle { display: none; }

	.post .tag_post_actions.ize-bar .tag_post_foot_acticon:active,
	.post .tag_post_actions.ize-bar .like-btn:active,
	.post #like-button:active,
	.post #wonder-button:active { transform: none; }

	.post .tag_post_actions.ize-bar .like-stat:hover .how_reacted { transform: none; }
}