/* Reactions (member request, burrattababy: "reactions when you hold down the message, like iMessage").
   Under the bubble, Discord-style (member request, Ethan): a wrapping row of hard chips, glyph + count, pale red;
   yours is note-red with a red glyph and the hard-button rim, then a quiet add chip. Holding a bubble lifts it over the
   dimmed chat with the tapback bar above (white capsule, its dots pointing at the bubble) and who reacted + Copy below. */

/* ---------- the reaction row (Discord-style, member request, Ethan) ---------- */
.msg .bubble, .msg .ph-bub, .msg .ph-bub img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.msg .bubble a { -webkit-touch-callout: none; }
.msg .tbs {
  display: flex; flex-wrap: wrap; gap: 4px; max-width: min(80%, 540px); margin: 4px 0 0 46px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.msg.own .tbs { justify-content: flex-end; margin: 4px 46px 0 0; }
.tbc {
  position: relative; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 7px; border: 0;
  background: #e8edf6; color: var(--ink-2); font: 700 14px/1 var(--font); font-variant-numeric: tabular-nums;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tbc::before { content: ""; position: absolute; inset: -8px -2px; } /* a finger-sized hit area over the gaps */
.tbc svg { width: 16px; height: 16px; display: block; flex: none; }
.tbc .tbn { min-width: .6em; }
.tbc .tb-emo { font-size: 16px; }
.tbc.on { background: var(--note); color: var(--red); }
.tbc.add { width: 30px; padding: 0; justify-content: center; background: none; color: var(--ink-3); }
.msg.own .tbc.add { order: -1; } /* on your side it sits on the inner edge */
.tbc.add svg { width: 18px; height: 18px; }
.tbc.pop > * { animation: tb-pop .38s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes tb-pop { from { transform: scale(.3); opacity: 0; } }

/* badges in the "who reacted" list */
.tb {
  position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--red); font-weight: 700; font-style: normal;
}
.tb.mine { background: var(--red); color: #fff; }
.tb svg { width: 16px; height: 16px; display: block; }
/* the glyphs are emoji (member request, Ethan) */
.tb-emo {
  display: block; font: 400 16px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-variant-emoji: emoji;
}

/* ---------- the lifted bubble ---------- */
.tb-layer {
  position: fixed; inset: 0; z-index: 30; padding: env(safe-area-inset-top) 0 var(--sab);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tb-scrim { position: absolute; inset: 0; background: #0b1a2e80; animation: tb-fade .18s ease both; }
.tb-layer.out { animation: tb-fade .15s ease reverse both; pointer-events: none; }
@keyframes tb-fade { from { opacity: 0; } }

.tb-layer .tb-lift { position: fixed; margin: 0; display: flex; flex-direction: column; align-items: flex-start; animation: tb-lift .26s cubic-bezier(.2, .9, .3, 1.15) both; }
.tb-layer .tb-lift.own { align-items: flex-end; }
.tb-layer .tb-lift .bubble, .tb-layer .tb-lift .ph-stack { max-width: none; box-sizing: border-box; flex: none; }
.tb-layer .tb-lift.cut .bubble, .tb-layer .tb-lift.cut .ph-stack { max-height: 100%; overflow: hidden; }
.tb-layer .tb-lift .ph-bub { pointer-events: none; }
@keyframes tb-lift { from { transform: translateY(var(--dy, 0)) scale(1); } 55% { transform: scale(1.04); } to { transform: scale(1.02); } }
.tb-layer .tb-lift { transform-origin: left center; }
.tb-layer .tb-lift.own { transform-origin: right center; }

.tb-bar {
  position: fixed; display: flex; gap: 2px; padding: 5px; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px var(--bubble-edge); transform-origin: var(--tail, 24px) 100%;
  animation: tb-bar .28s cubic-bezier(.3, 1.5, .55, 1) both;
}
.tb-bar::before, .tb-bar::after { content: ""; position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--bubble-edge); }
.tb-bar::before { width: 11px; height: 11px; left: var(--tail, 24px); bottom: -6px; }
.tb-bar::after { width: 5px; height: 5px; left: calc(var(--tail, 24px) + 7px); bottom: -13px; }
.tb-layer.own .tb-bar::after { left: calc(var(--tail, 24px) - 1px); }
@keyframes tb-bar { from { transform: scale(.3); opacity: 0; } }
.tb-pick {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  background: none; color: var(--ink-2); font: 700 22px/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: tb-glyph .3s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(40ms + var(--n, 0) * 22ms);
}
.tb-pick:nth-child(2) { --n: 1; } .tb-pick:nth-child(3) { --n: 2; } .tb-pick:nth-child(4) { --n: 3; }
.tb-pick:nth-child(5) { --n: 4; } .tb-pick:nth-child(6) { --n: 5; } .tb-pick:nth-child(7) { --n: 6; }
@media (max-width: 350px) { .tb-bar { gap: 0; padding: 4px; } .tb-pick { width: 40px; height: 40px; } .tb-pick .tb-emo { font-size: 24px; } }
@keyframes tb-glyph { from { transform: scale(.4) translateY(6px); opacity: 0; } }
.tb-pick svg { width: 24px; height: 24px; display: block; transition: transform .12s; }
.tb-pick .tb-emo { font-size: 26px; transition: transform .12s; }
.tb-pick:active > * { transform: scale(1.25); }
.tb-pick.on { background: var(--red); color: #fff; }

.tb-menu {
  position: fixed; min-width: 190px; max-width: calc(100vw - 16px); border-radius: 12px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px var(--bubble-edge); overflow: hidden; animation: tb-menu .22s ease both .04s;
}
@keyframes tb-menu { from { opacity: 0; transform: translateY(-6px); } }
.tb-who { list-style: none; margin: 0; padding: 6px 0; max-height: 196px; overflow-y: auto; }
.tb-who li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 10px; font-size: 16px; font-weight: 700; }
.tb-who .tb { width: 28px; height: 28px; box-shadow: 0 0 0 1px var(--bubble-edge) inset; }
.tb-who .tb.mine { box-shadow: none; }
.tb-who .tb .tb-emo { font-size: 15px; }
.tb-who span { color: var(--c, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-copy {
  display: block; width: 100%; min-height: 46px; padding: 0 16px; border: 0; background: #fff; color: var(--ink);
  font: 700 16px/1 var(--font); text-align: left; cursor: pointer;
}
.tb-who + .tb-copy, .tb-copy + .tb-copy { border-top: 1px solid var(--rule); }
.tb-copy:active { background: var(--note); }

@media (prefers-reduced-motion: reduce) {
  .tb-scrim, .tb-layer .tb-lift, .tb-bar, .tb-pick, .tb-menu, .tbc.pop > * { animation: none; }
}