1 files changed, 15 insertions, 2 deletions
diff --git a/src/style.css b/src/style.css
index 460b584..bf61f6a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2018,7 +2018,7 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 
 /* 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-timeline { padding: 8px 0; white-space: normal; color: var(--text); }
 .note-video-box .media-timeline:not(.has-marks) { display: none; }
 .media-time { font-variant-numeric: tabular-nums; }
 .media-seek { position: relative; height: 42px; --played: 0%; }
@@ -2030,12 +2030,20 @@ 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 { position: absolute; left: 0; right: 0; top: -22px; height: 22px; pointer-events: none; }
+/* the marks hang just under the line, at their moment (a plain bar: inside
+   its touch strip); under a waveform, below it */
+.media-marks { position: absolute; left: 0; right: 0; top: 24px; height: 18px; pointer-events: none; }
+.has-wave .media-marks { top: 100%; height: 22px; }
+.media-seek.has-wave:has(.media-mark) { margin-bottom: 22px; }
+.media-mark { bottom: auto; top: 0; }
 .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; }
+.media-mark-face { display: block; width: 20px !important; height: 20px !important; min-width: 0; font-size: 8px; border-radius: 50%; }
+.mp-mark .media-mark-face { width: 26px !important; height: 26px !important; box-shadow: 0 0 0 1.5px #fff; }
+.mp-pop .media-mark-face { width: 36px !important; height: 36px !important; box-shadow: 0 0 0 2px #fff; }
 /* 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)); }
@@ -2057,6 +2065,11 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 }
 @media (prefers-reduced-motion: reduce) { .mp-pop { animation: none; opacity: 0; } }
 
+/* a timed comment's time: a chip that plays the clip from there */
+.media-time-link { display: inline-flex; align-items: center; margin-right: 6px; padding: 1px 8px; border-radius: 999px;
+  background: var(--accent-soft); color: var(--accent); font-size: .85em; font-weight: 650; font-variant-numeric: tabular-nums;
+  text-decoration: none; vertical-align: 1px; white-space: nowrap; }
+.media-time-link:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
 .media-moment-detail { overflow-wrap: anywhere; max-height: 72px; overflow-y: auto; margin-top: 5px; }
 .media-moment-detail:empty { display: none; }
 .live-watching.has-who { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }