/* ══ Emoji reactions ═════════════════════════════════════ */
.tko-tile-wrap { position: relative; width: 100%; }
.tko-tile__media { isolation: isolate; }

.tko-reactions-mount {
  position: absolute;
  z-index: 6;
  top: 12px;
  right: 12px;
  max-width: calc(100% - 24px);
  pointer-events: auto;
}

.rxn {
  /* Bencho tokens mapped locally to the portfolio's existing tile palette.
     The accent has no site equivalent, so it stays scoped to this widget. */
  --ink: var(--tko-ink, #111218);
  --card: var(--tko-bg, #f8f8f8);
  --fill-on: var(--tko-ink, #111218);
  --fill-slab: var(--tko-bg, #f8f8f8);
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --on-slab: #fff;
  --pane-edge: rgba(17, 18, 24, 0.14);
  --signal: #2231dd;
  --slab: var(--tko-ink, #111218);
  position: relative;
  width: max-content;
  max-width: 100%;
  padding: 0;
  color: var(--fill-on, var(--ink));
  font-family: var(--font-ui);
  text-align: left;
  filter: drop-shadow(0 5px 18px rgba(0, 0, 0, 0.18));
}

/* the name and time on their own line, then the message as a
   pill that hugs its words */
.rxn-msg { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rxn:not(.is-open) .rxn-msg { display: none; }

/* the message's pill, and the picker it turns into: the surface is
   this, its width and corner sprung by the component */
.rxn-morph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: visible;
  background: var(--fill-slab, var(--card));
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 0 0 1px var(--pane-edge), inset 0 1px 0 rgba(255,255,255,.76);
  border-radius: var(--rxn-r);
  backdrop-filter: blur(12px);
}

.rxn-text {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 0 16px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 550;
  line-height: 22px;
  text-overflow: ellipsis;
  visibility: hidden;
  white-space: nowrap;
  transform-origin: 50% 50%;
  letter-spacing: -0.01em;
}

.rxn-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 32px;
  margin-top: 0;
}
.rxn.is-open .rxn-row { margin-top: 6px; }

.rxn-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px 0 9px;
  border: 0;
  border-radius: 999px;
  background: var(--fill-slab, var(--card));
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
  letter-spacing: -0.01em;
  backdrop-filter: blur(12px);
}

/* the ones you are in carry a coloured edge — the fill stays the
   chip's own */
.rxn-chip[data-mine] {
  background: var(--fill-slab, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal, #2231dd) 35%, transparent);
  color: var(--signal, #2231dd);
}

/* the signal blue is too deep on a dark chip: a lighter blue there */
[data-theme="dark"] .rxn-chip[data-mine],
[data-fill="dark"] .rxn-chip[data-mine] { color: #8c9bff; box-shadow: inset 0 0 0 1px rgba(140, 155, 255, 0.4); }
[data-theme="dark"] [data-fill="light"] .rxn-chip[data-mine] {
  color: var(--signal, #2231dd);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal, #2231dd) 35%, transparent);
}

.rxn-chip-e { font-size: 18px; line-height: 1; transition: opacity 160ms ease; letter-spacing: -0.02em; }
.rxn-chip-e[data-landing] { opacity: 0; }

/* ── each emoji's own arrival ─────────────────────────────── */
.rxn-p { position: relative; display: inline-block; font-style: normal; line-height: 1; }
.rxn-p[data-play][data-k="launch"] { animation: rxn-launch 640ms cubic-bezier(0.3, 1.2, 0.4, 1); }

/* its exhaust: a small puff left behind under it */
.rxn-p[data-play][data-k="launch"]::after {
  content: ""; position: absolute; left: 20%; top: 70%; width: 7px; height: 7px;
  border-radius: 50%; background: color-mix(in srgb, var(--fill-on, #17181a) 20%, transparent);
  animation: rxn-puff 520ms ease-out forwards;
}
.rxn-p[data-play][data-k="flicker"] { animation: rxn-flicker 620ms ease-out; }
.rxn-p[data-play][data-k="confetti"] { animation: rxn-pop 420ms cubic-bezier(0.3, 1.6, 0.4, 1); }
.rxn-bits { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.rxn-bits b {
  position: absolute; width: 3px; height: 3px; margin: -1.5px; border-radius: 1px; background: var(--c);
  animation: rxn-bit 560ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.rxn-p[data-play][data-k="glance"] { animation: rxn-glance 700ms ease-in-out; }
.rxn-p[data-play][data-k="tick"] { animation: rxn-tick 460ms cubic-bezier(0.3, 1.6, 0.4, 1); }
.rxn-p[data-play][data-k="beat"] { animation: rxn-beat 620ms ease-in-out; }
.rxn-p[data-play][data-k="nod"] { animation: rxn-nod 520ms cubic-bezier(0.3, 1.4, 0.4, 1); transform-origin: 50% 90%; }
.rxn-p[data-play][data-k="laugh"] { animation: rxn-laugh 560ms ease-in-out; }
.rxn-p[data-play][data-k="wow"] { animation: rxn-wow 520ms cubic-bezier(0.3, 1.5, 0.4, 1); transform-origin: 50% 100%; }
.rxn-p[data-play][data-k="droop"] { animation: rxn-droop 700ms ease-in-out; transform-origin: 50% 100%; }
.rxn-p[data-play][data-k="bow"] { animation: rxn-bow 620ms ease-in-out; transform-origin: 50% 100%; }

.rxn-count { display: inline-flex; color: #000; font-variant-numeric: tabular-nums; }
.rxn-col { display: inline-block; height: 1.4em; overflow: hidden; line-height: 1.4em; }
.rxn-strip { display: flex; flex-direction: column; transition: transform 220ms cubic-bezier(0.24, 1.34, 0.38, 1); }
.rxn-strip > span { height: 1.4em; }
.rxn-add-wrap { display: flex; }

.rxn-add {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 999px; background: var(--fill-slab, var(--card));
  color: color-mix(in srgb, var(--fill-on, #17181a) 62%, var(--fill-slab, #ffffff));
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; transition: color 160ms ease, scale 160ms cubic-bezier(0.24, 1.34, 0.38, 1);
  backdrop-filter: blur(12px);
}
.rxn-add:hover, .rxn-add[aria-expanded="true"] { color: var(--fill-on, var(--ink)); scale: 1.06; }

/* the pill floats above the row, from the row's start, so it
   never runs off the block whatever the chips have pushed the
   button to */
/* the emoji row, laid inside the message's pill once it has opened */
.rxn-pill {
  position: absolute; z-index: 5; right: 0; top: 0; display: flex; align-items: center; padding: 8px;
}
.rxn-emo { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rxn-emo span {
  display: block; font-size: 20px; line-height: 1; transform: scale(var(--s, 1)); transform-origin: 50% 90%;
  transition: transform 220ms cubic-bezier(0.24, 1.34, 0.38, 1); letter-spacing: -0.02em;
}
.rxn-tip {
  position: absolute; bottom: calc(100% + 10px); translate: -50% 0; padding: 4px 8px; border-radius: 6px;
  background: var(--slab, #17181a); color: var(--on-slab, #fff); font-size: 11px; font-weight: 400;
  white-space: nowrap; pointer-events: none; letter-spacing: 0em;
}
.rxn-fly {
  position: absolute; z-index: 6; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  display: grid; place-items: center; font-size: 16px; pointer-events: none; letter-spacing: -0.01em;
}
.rxn-status { display: block; margin-top: 3px; color: #9b2f2f; font-size: 10px; line-height: 1.3; text-align: right; }
.rxn-status:empty { display: none; }

@keyframes rxn-launch { 0% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(2px, -7px) rotate(-12deg); } 60% { transform: translate(-1px, 1px) rotate(4deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes rxn-puff { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-5px, 6px) scale(1.6); } }
@keyframes rxn-flicker { 0% { transform: scale(1); filter: brightness(1); } 15% { transform: scale(1.18, 1.1); filter: brightness(1.35); } 30% { transform: scale(0.94, 1.08); filter: brightness(1); } 48% { transform: scale(1.1, 0.96); filter: brightness(1.25); } 66% { transform: scale(0.98, 1.04); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes rxn-pop { 0% { transform: scale(0.7) rotate(-12deg); } 50% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } }
@keyframes rxn-bit { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-16px) scale(0.6); opacity: 0; } }
@keyframes rxn-glance { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2.5px); } 60% { transform: translateX(2.5px); } }
@keyframes rxn-tick { 0% { transform: scale(0.6) rotate(-14deg); } 55% { transform: scale(1.2) rotate(4deg); } 100% { transform: none; } }
@keyframes rxn-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.26); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } 60% { transform: scale(1); } }
@keyframes rxn-nod { 0% { transform: rotate(0); } 35% { transform: rotate(-16deg) translateY(-2px); } 100% { transform: rotate(0); } }
@keyframes rxn-laugh { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
@keyframes rxn-wow { 0% { transform: scale(1); } 35% { transform: scale(0.92, 1.22); } 100% { transform: scale(1); } }
@keyframes rxn-droop { 0%, 100% { transform: none; } 40% { transform: translateY(2px) rotate(-8deg) scale(0.96); } }
@keyframes rxn-bow { 0%, 100% { transform: none; } 40% { transform: translateY(2px) scale(1, 0.9); } 60% { transform: translateY(1px) scale(1, 0.95); } }

@media (max-width: 520px) {
  .tko-reactions-mount { top: 8px; right: 8px; max-width: calc(100% - 16px); }
  .rxn-text { padding: 0 12px; font-size: 12px; }
  .rxn-chip { gap: 4px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .rxn-p[data-play], .rxn-p[data-play]::after, .rxn-bits b { animation: none; }
}