/* ════════════════════════════════════════════════════════════════════════
   COMMENT REACTIONS
   ════════════════════════════════════════════════════════════════════════
   Pills carry the Comet border animation (conic-gradient sweep) when in
   .on state — a slow accent comet circles the pill rim. Click triggers
   the Slam & Spring pop (.popping class added by /static/js/reaction-pop.js)
   plus an independent sticker wobble (.emoji-pop class).

   Both effects ported verbatim from I:/_AIVAULT/PRIMITIVES_HTML/conic_with_pop
   — values tuned for our chassis tokens (--io-accent*, --io-surface-*).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── pill base — zero layout shift between on/off ─── */

/* .reactions-row removed — reactions now render inline inside
   .reader-comment-actions (mock-style single-row layout). */

.reaction-form {
  display: inline-flex;   /* unwrap the <form> visually — pill is the only child */
  margin: 0;
  padding: 0;
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 5px;
  border: none;
  font-family: var(--io-font-mono);
  font-size: var(--io-fs-sm);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 0;
  background: var(--io-surface-overlay);
  color: var(--io-text-tertiary);
  box-shadow: 0 0 0 1.5px var(--io-border);
  transition: color 0.15s, box-shadow 0.15s, background 0.15s;
  transform-origin: center center;
  line-height: 1;
}

.reaction-pill .reaction-sticker {
  width: 22px;
  height: 22px;
  display: inline-block;
  image-rendering: -webkit-optimize-contrast;
  pointer-events: none;
}

.reaction-pill .reaction-count {
  font-variant-numeric: tabular-nums;
}

.reaction-pill.off:hover {
  background: var(--io-surface-hover);
  color: var(--io-text-secondary);
}

.reaction-pill.on {
  color: var(--io-text-primary);
  box-shadow: none;
}

/* The two pseudos build the conic-gradient border: ::before is the moving
   gradient, ::after is an inset copy of the surface that masks the middle
   so only a thin rim shows the sweep. */
.reaction-pill.on::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 7px;
  z-index: -1;
}

.reaction-pill.on::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  background: var(--io-surface-overlay);
  z-index: -1;
}

/* ─── Comet sweep — conic gradient that spins around the pill rim ─── */

@property --ca {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes reaction-spin {
  from { --ca: 0deg; }
  to   { --ca: 360deg; }
}

.reaction-pill.on.comet::before {
  background: conic-gradient(
    from var(--ca),
    var(--io-accent-dim)    0%,
    var(--io-accent-dim)   52%,
    var(--io-accent-bright) 62%,
    var(--io-accent-dim)   72%,
    var(--io-accent-dim)  100%
  );
  animation: reaction-spin 1.4s linear infinite;
}

/* ─── Slam & Spring pop — hard flatten, tall rebound ─── */

@keyframes reaction-slam {
  0%   { transform: scaleY(1)    scaleX(1); }
  20%  { transform: scaleY(0.72) scaleX(1.18); }   /* flatten hard */
  45%  { transform: scaleY(1.14) scaleX(0.92); }   /* spring up tall */
  65%  { transform: scaleY(0.96) scaleX(1.03); }
  82%  { transform: scaleY(1.02) scaleX(0.99); }
  100% { transform: scaleY(1)    scaleX(1); }
}

.reaction-pill.popping {
  animation: reaction-slam 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* sticker also wobbles independently when newly activated */
@keyframes reaction-sticker-pop {
  0%   { transform: rotate(0deg)   scale(1); }
  40%  { transform: rotate(-20deg) scale(1.3); }
  70%  { transform: rotate(10deg)  scale(0.95); }
  100% { transform: rotate(0deg)   scale(1); }
}

.reaction-pill.sticker-pop .reaction-sticker {
  animation: reaction-sticker-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─── "+" add button ─── */

.reaction-pill.reaction-add {
  padding: 4px 10px;
  font-size: var(--io-fs-base);
  color: var(--io-text-tertiary);
}

.reaction-pill.reaction-add:hover {
  color: var(--io-accent);
  background: var(--io-surface-hover);
}

/* ─── picker — 16 stickers in a portal that flies out from the "+" ─── */

/* anchor span: gives the absolutely-positioned picker a coordinate parent
   pinned to the "+" trigger. Inline-flex so it slots into .reactions-row
   without breaking the wrap. */
.reaction-picker-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.reaction-picker {
  /* Always rendered as a grid; visibility controlled by opacity + scale so
     it can animate instead of snapping on/off. Absolute removes it from
     flow so the closed state takes no layout space. */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(8, 32px);
  gap: 4px;
  padding: 8px;
  background: var(--io-surface-sunken);
  border: 1px solid var(--io-border-subtle);
  border-radius: var(--io-radius-sm);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.7),
    0 0 14px var(--io-accent-glow),
    inset 0 0 12px var(--io-accent-subtle);
  width: max-content;

  /* Closed state — portal collapsed to a point near the "+" with a slight
     downward translate so the open animation springs upward. */
  opacity: 0;
  transform: translateY(10px) scale(0.35);
  transform-origin: bottom left;
  pointer-events: none;
  filter: blur(2px);

  transition:
    opacity 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 160ms ease-out;
}

.reaction-picker.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  filter: blur(0);
}

.reaction-picker form {
  display: contents;   /* unwrap so the button sits in the grid directly */
}

.reaction-picker-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--io-radius-sm);
  background: transparent;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.reaction-picker-btn img {
  width: 26px;
  height: 26px;
  pointer-events: none;
}

.reaction-picker-btn:hover {
  background: var(--io-surface-overlay);
  transform: scale(1.08);
}