1 files changed, 67 insertions, 3 deletions
diff --git a/src/style.css b/src/style.css
index 4fbe96b..460b584 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.
@@ -1538,6 +1578,20 @@ body::after {
   background: var(--surface2); overflow: hidden; cursor: pointer;
 }
 .media-tile.video { aspect-ratio: 9 / 16; }
+/* only wide clips in it: one to a row, the poster whole */
+.media-grid.wide { grid-template-columns: 1fr; gap: 6px; }
+.media-grid.wide .media-tile.video { aspect-ratio: 16 / 9; }
+/* every shape in it: justified rows. A tile starts at its proportions at
+   the row height and grows in proportion to them, so a row's tiles share one
+   height and fill the width; the filler takes the last row's slack instead
+   of stretching its few tiles. */
+.media-grid.justified { display: flex; flex-wrap: wrap; --row-h: 140px; }
+.media-grid.justified .media-tile { aspect-ratio: var(--ar); flex: var(--ar) 1 calc(var(--ar) * var(--row-h)); min-width: 0; }
+.media-grid.justified::after { content: ''; flex: 1000 1 0; }
+/* the picture fills the tile without sizing it: a frame-grab <video>'s own
+   320px would widen its tile, and the row's height with it */
+.media-grid.justified .media-tile > img, .media-grid.justified .media-tile > video { position: absolute; inset: 0; }
+@media (max-width: 600px) { .media-grid.justified { --row-h: 100px; } }
 .media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
 .media-tile.broken { display: none; }
 .media-tile-play {
@@ -1965,6 +2019,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); }
+.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;
@@ -2007,3 +2062,12 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 .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); }