/* ============================================================================
   v14.530 — POST DETAIL action row v2 + emoji reactions
   Four actions now live in the row (like / reply / react / share), so the old
   `gap: clamp(32px, 12vw, 80px)` no longer fits — that gap is what pushed the
   share glyph out to the middle of the card. The row is distributed instead,
   which holds from 375px through 440px.
   Every size is calc(N * var(--shelfd-px, 1px)).
   ========================================================================== */

.x-post-actions-row.x-post-actions-row--v2 {
  justify-content: space-between !important;
  gap: calc(6 * var(--shelfd-px, 1px)) !important;
  padding-right: calc(4 * var(--shelfd-px, 1px)) !important;
  padding-left: calc(4 * var(--shelfd-px, 1px)) !important;
}
.x-post-actions-row.x-post-actions-row--v2 .x-post-action-btn {
  flex: 0 0 auto;
  font-weight: 500;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0.00em;
}

/* The user's own reaction replaces the smiley on the button face. */
.x-post-action-my-reaction {
  font-size: calc(19 * var(--shelfd-px, 1px));
  line-height: 1;
  display: block;
}
.x-post-action-btn.is-reacted { color: #c4b5fd; }

/* ---- Picker ---------------------------------------------------------------
   Anchored to its trigger (never centred on screen) and scales open from the
   bottom-right corner, matching the Liquid Glass popover recipe. */
.x-post-reaction-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.x-post-reaction-picker {
  position: absolute;
  bottom: calc(100% + (8 * var(--shelfd-px, 1px)));
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: calc(2 * var(--shelfd-px, 1px));
  padding: calc(6 * var(--shelfd-px, 1px)) calc(8 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)),
    rgba(18, 16, 26, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 calc(10 * var(--shelfd-px, 1px)) calc(30 * var(--shelfd-px, 1px)) rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
  /* Opens from the trigger, and never wider than the card. */
  transform: translateX(-50%) scale(0.9);
  transform-origin: bottom center;
  opacity: 0;
  max-width: calc(100vw - (32 * var(--shelfd-px, 1px)));
  overflow-x: auto;
  scrollbar-width: none;
  transition: transform 270ms cubic-bezier(0.22, 1, 0.36, 1), opacity 270ms cubic-bezier(0.22, 1, 0.36, 1);
}
.x-post-reaction-picker::-webkit-scrollbar { width: 0; height: 0; display: none; }
.x-post-reaction-picker.is-open {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}
.x-post-reaction-choice {
  flex: 0 0 auto;
  width: calc(36 * var(--shelfd-px, 1px));
  height: calc(36 * var(--shelfd-px, 1px));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: calc(21 * var(--shelfd-px, 1px));
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms ease;
}
@media (hover: hover) {
  .x-post-reaction-choice:hover { background: rgba(255, 255, 255, 0.10); transform: scale(1.12); }
}
.x-post-reaction-choice:active { transform: scale(0.92); }

/* ---- Count pills ---------------------------------------------------------- */
.x-post-reaction-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(6 * var(--shelfd-px, 1px));
  margin-top: calc(10 * var(--shelfd-px, 1px));
}
.x-post-reaction-pills:empty { display: none; }
.x-post-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--shelfd-px, 1px));
  padding: calc(4 * var(--shelfd-px, 1px)) calc(9 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.x-post-reaction-pill:active { transform: scale(0.96); }
/* Your own reaction reads as selected. */
.x-post-reaction-pill.is-mine {
  border-color: rgba(196, 181, 253, 0.42);
  background: rgba(196, 181, 253, 0.14);
}
.x-post-reaction-pill-emoji {
  font-size: calc(14 * var(--shelfd-px, 1px));
  line-height: 1;
}
.x-post-reaction-pill-count {
  color: rgba(255, 255, 255, 0.72);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 500;
  letter-spacing: 0.00em;
  line-height: 1;
}
.x-post-reaction-pill.is-mine .x-post-reaction-pill-count { color: #e7e0ff; }