Timed reactions sit on the seek bar at their moment, and the usual buttons carry the time

The "at this time" reply/like/zap buttons are gone, and with them the panel they made over the pager. A reply, like or zap made from a post's own buttons (the feed's, or the pager's ♥ ⚡ and post) while its clip has played is about that moment; the reply box says so and its × makes it about the whole post. What was said, reacted or zapped at a moment sits over the bar at that moment (a custom :emoji: as its picture, from the reaction's own tag; it was showing as :cb-rofl: text), a tap goes there and says who and what, and in the pager it floats up off the bar as the clip plays past. Your reaction no longer turns the count red, only the heart.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_013ZDf1cyCQLkfjftYhymZAg

1 files changed, 32 insertions, 15 deletions

diff --git a/src/style.css b/src/style.css
index 6e1097a..4fbe96b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1614,7 +1614,8 @@ body::after {
 }
 .mp-counts .i { font-size: 24px; line-height: 1; display: flex; }
 .mp-counts .i svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
-.mp-like.on { color: #ff4d6d; }
+/* yours: the heart goes red; the count stays white (a 🤣 of yours left only the number red) */
+.mp-like.on .i { color: #ff4d6d; }
 .mp-like .i .cemoji { width: 28px; height: 28px; }
 /* the emoji sheet over the media pager (z-index 200) */
 .confirm-pop-backdrop.over-pager { z-index: 300; }
@@ -1961,12 +1962,10 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 .call-log-pill svg { width: 16px; height: 16px; }
 .chat-row.call-log.missed .call-log-pill { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
 
-/* Timestamp actions and the audio waveform share the player's lifetime. */
-.media-timeline { padding: 8px 0; white-space: normal; color: var(--text); }
-.media-moment-actions { gap: 6px; flex-wrap: wrap; align-items: center; }
-.media-moment-actions[hidden] { display: none; }
-.media-moment-actions > span { margin-right: auto; font-variant-numeric: tabular-nums; }
-.media-moment-actions button { font-size: 12px; min-height: 32px; }
+/* A post's audio/video timeline: the waveform (audio), and what was said,
+   reacted or zapped at a moment, sitting over the bar at that moment. */
+.media-timeline { padding: 24px 0 8px; white-space: normal; color: var(--text); }
+.media-time { font-variant-numeric: tabular-nums; }
 .media-seek { position: relative; height: 42px; --played: 0%; }
 .media-wave { position: absolute; inset: 3px 0; display: flex; align-items: center; gap: 2px;
   background: linear-gradient(to right, var(--accent) var(--played), var(--line) var(--played)); }
@@ -1976,14 +1975,32 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 .has-wave .media-wave::after { content: ''; position: absolute; inset: 0 0 0 var(--played); background: var(--bg, #fff); opacity: .55; pointer-events: none; }
 .media-seek input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .01; cursor: pointer; }
 .media-seek:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
-.media-marks { display: flex; gap: 6px; overflow-x: auto; padding-top: 5px; }
-.media-mark { flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.media-marks:empty { display: none; }
-.mp-slide > .media-timeline { position: absolute; left: 16px; right: 16px; bottom: calc(var(--mp-seek-lift) + 30px); z-index: 4;
-  padding: 6px; border-radius: 8px; background: rgba(0,0,0,.7); color: #fff; display: none; }
-.media-pager.show .mp-cur > .media-timeline { display: block; }
-.mp-slide > .media-timeline .media-seek { display: none; }
-.media-pager.videos.show .mp-meta { padding-bottom: calc(var(--mp-seek-lift) + 130px); }
+.media-marks { position: absolute; left: 0; right: 0; top: -22px; height: 22px; pointer-events: none; }
+.media-mark, .mp-mark {
+  position: absolute; bottom: 0; transform: translateX(-50%); padding: 0 2px; margin: 0; border: 0; background: none;
+  font-size: 16px; line-height: 1; cursor: pointer; pointer-events: auto;
+}
+.media-mark .cemoji, .mp-mark .cemoji { width: 20px; height: 20px; vertical-align: bottom; }
+/* the pager's: above its seek bar, there when the bar is */
+.mp-marks { position: absolute; left: 0; right: 0; bottom: 10px; height: 26px; pointer-events: none; }
+.mp-mark { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
+.mp-mark .cemoji { width: 24px; height: 24px; }
+.mp-seek-time { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
+.mp-seek.say .mp-seek-time { opacity: 1; }
+.mp-marks:not(:empty) ~ .mp-seek-time { bottom: 42px; }
+/* ...and a moment the clip plays through floats up off the bar */
+.mp-pop {
+  position: absolute; bottom: calc(var(--mp-seek-lift) + 12px); z-index: 4; transform: translateX(-50%);
+  font-size: 30px; line-height: 1; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
+  animation: mp-pop 1.6s ease-out forwards;
+}
+.mp-pop .cemoji { width: 34px; height: 34px; }
+@keyframes mp-pop {
+  0% { opacity: 0; transform: translate(-50%, 8px) scale(.6); }
+  15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
+  100% { opacity: 0; transform: translate(-50%, -90px) scale(1); }
+}
+@media (prefers-reduced-motion: reduce) { .mp-pop { animation: none; opacity: 0; } }
 
 .media-moment-detail { overflow-wrap: anywhere; max-height: 72px; overflow-y: auto; margin-top: 5px; }
 .media-moment-detail:empty { display: none; }