1 files changed, 68 insertions, 5 deletions
diff --git a/src/style.css b/src/style.css
index 275bb59..bf61f6a 100644
--- a/src/style.css
+++ b/src/style.css
@@ -359,6 +359,10 @@ textarea.send-dest::placeholder { font-family: var(--sans); }
 /* ---- lists (tx / utxo) ---- */
 .list { display: flex; flex-direction: column; }
 .item { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); }
+/* the middle column may shrink: a long name chip beside the label then
+   ellipsizes on one line instead of breaking mid-name and pushing the
+   amount about */
+.item > .grow { min-width: 0; }
 .item:first-child { border-top: 0; }
 .ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 16px; }
 .ico.in { background: var(--green-soft); color: var(--green); }
@@ -366,7 +370,7 @@ textarea.send-dest::placeholder { font-family: var(--sans); }
 .amount-pos { color: var(--green); font-family: var(--mono); font-weight: 600; }
 .amount-neg { color: var(--red); font-family: var(--mono); font-weight: 600; }
 .amount { font-family: var(--mono); font-weight: 600; }
-.tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
+.tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex: none; }
 .tag.pending { background: var(--accent-soft); color: var(--accent-ink); }
 .tag.conf { background: var(--green-soft); color: var(--green); }
 
@@ -847,11 +851,29 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 }
 .lightbox-x:hover { background: rgba(255, 255, 255, .24); }
 @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
-.note-video { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; }
+.note-video { display: block; width: 100%; height: auto; max-height: var(--vid-cap); object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; }
 /* a video plays by itself, muted, while it is on screen; the corner button
    turns the sound on (see autoplay in messages.js) */
 .note-video-box { position: relative; display: block; max-width: 100%; margin-top: 6px; }
 .note-video-box .note-video { margin-top: 0; }
+/* the height a feed clip may take: the whole screen on a phone, three
+   quarters of it on a computer (a portrait clip on a 1920 screen ran off it) */
+:root { --vid-cap: 100vh; }
+@media (min-width: 900px) { :root { --vid-cap: 75vh; } }
+/* with a mouse: the big play/pause in the middle, while the pointer is over the clip */
+.vid-pp {
+  position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0;
+  border: 0; border-radius: 50%; background: rgba(18, 18, 18, .6); color: #fff; cursor: pointer;
+  display: none; align-items: center; justify-content: center;
+}
+.vid-pp:hover { background: rgba(18, 18, 18, .85); }
+.vid-pp-i { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; }
+.vid-pp.playing .vid-pp-i { width: 20px; height: 24px; margin: 0; border-width: 0 7px; border-color: #fff; }
+.has-mouse .note-video-box:hover .vid-pp, .vid-pp:focus-visible { display: flex; }
+/* the moments bar is the clip's only seek bar: the middle button is its play
+   control on a touch screen too, up whenever the clip is paused */
+.note-video-box.own-bar .vid-pp:not(.playing) { display: flex; }
+.note-video-box:has(.vid-heavy) .vid-pp { display: none; }
 .vid-sound {
   position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; padding: 4px 10px; border: 0;
   border-radius: 999px; background: rgba(18, 18, 18, .7); color: #fff; font-size: 13px; line-height: 1.3;
@@ -929,6 +951,23 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 .live-line-body { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.35; }
 .live-zap .live-line-body b { color: var(--accent); }
 .live-chat .chat-row { padding-right: 2px; }
+/* on phones the stream is the page, the way Nostrich lays one out: the
+   picture runs edge to edge and the chat under it is a plain full-width
+   list of lines, no bubbles — the card walls step outside #app's padding */
+@media (max-width: 520px) {
+  .live-page > .card {
+    margin-left: -16px; margin-right: -16px; padding: 10px 0 12px;
+    border-left: none; border-right: none; border-radius: 0; box-shadow: none;
+  }
+  .live-page > .live-chat-card { margin-top: 0; padding-top: 6px; border-top: none; }
+  .live-page > .card > :not(.live-player, .live-chat) { margin-left: 14px; margin-right: 14px; }
+  .live-page .live-player { border-radius: 0; }
+  .live-page .live-chat { padding: 10px 14px 0; max-height: 60vh; }
+  .live-page .live-title { font-size: 17px; }
+  .live-chat .chat-row { gap: 10px; }
+  .live-chat .chat-bubble { display: block; background: transparent; border: 0; border-radius: 0; padding: 0; font-size: 15px; }
+  .live-chat .chat-quote { margin-bottom: 2px; }
+}
 .bc-preview.mirror { transform: scaleX(-1); }
 .bc-bar .bc-clock { font-variant-numeric: tabular-nums; font-weight: 650; }
 .go-live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #e0245e; box-shadow: 0 0 0 3px rgba(224, 36, 94, .25); }
@@ -1180,7 +1219,8 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 .profile-banner + .row .profile-avatar {
   border: 3px solid var(--paper); box-sizing: content-box;
 }
-.zap-chip { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px 1px 2px; }
+.zap-chip { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px 1px 2px; min-width: 0; max-width: 100%; }
+.zap-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .chat-avatar.mini { width: 18px; height: 18px; font-size: 8px; flex-shrink: 0; }
 /* A feed row is the one place a face is the point, not a label on a line —
    Amethyst gives it 55dp; at our 30px it read as a bullet beside the post.
@@ -1978,7 +2018,8 @@ 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%; }
 .media-wave { position: absolute; inset: 3px 0; display: flex; align-items: center; gap: 2px;
@@ -1989,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)); }
@@ -2016,8 +2065,22 @@ 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; }
 .live-who { display: flex; flex-wrap: wrap; gap: 6px; }
 .live-who-p { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--bg2, rgba(127,127,127,.12)); border: 0; color: inherit; cursor: pointer; }
+
+/* a gift's note: the sender's words above the amount, and the field for them */
+.gift-note {
+  margin: 0; padding: 8px 12px; max-width: 100%;
+  border-left: 3px solid var(--accent); border-radius: 4px;
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  font-style: italic; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.gift-note-input { width: 100%; min-height: 0; font-family: var(--sans); }