1 files changed, 88 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index dfed44b..5e08a6a 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -1975,6 +1975,30 @@ a.transfer-name {
   display: flex;
 }
 .transfer-cancel:hover { color: var(--error); }
+/* Same shape as cancel, and beside it: pausing and cancelling are the two
+   things a person does to a transfer, and one of them is not destructive. */
+.transfer-pause {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 0 2px;
+  display: flex;
+}
+.transfer-pause:hover { color: var(--accent); }
+/* Not a button: there is nothing to click. Dimmer than the cancel beside it,
+   and it carries its explanation in a tooltip rather than in the row, which
+   would be four lines of prose in a panel that has none. */
+.transfer-nopause {
+  color: var(--text-dim);
+  opacity: .45;
+  padding: 0 2px;
+  display: flex;
+  cursor: help;
+}
+/* A paused bar keeps its fill -- what was written is still on disk -- but stops
+   looking like something in progress. */
+.dl-fill.dl-paused { background: var(--text-dim); }
 .transfer-meta {
   display: flex;
   justify-content: space-between;
@@ -4243,3 +4267,67 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   color: var(--warn);
   margin-bottom: 2px;
 }
+
+/* A transfer waiting for a slot. Deliberately not a progress bar at 0%: it is
+   not stalled and nothing is wrong, and a bar that never moves is exactly how a
+   queue comes to look like a hang. The stripes say "not yet", not "broken". */
+.dl-progress.dl-waiting {
+  background-color: var(--bg-raised);
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--accent-bg) 0 8px,
+    transparent 8px 16px);
+  animation: dl-waiting-slide 1.1s linear infinite;
+}
+@keyframes dl-waiting-slide {
+  from { background-position: 0 0; }
+  to   { background-position: 22.6px 0; }
+}
+/* The state has to survive without the motion: someone who asked for less of it
+   still needs to see that this row is waiting rather than stopped. */
+@media (prefers-reduced-motion: reduce) {
+  .dl-progress.dl-waiting { animation: none; }
+}
+
+/* ── Transfers panel (grouped) ───────────────────────────────────────────── */
+
+.transfer-head-title { font-weight: 600; }
+.transfer-head-summary {
+  margin-left: auto;
+  margin-right: .5rem;
+  font-size: .85em;
+  color: var(--text-dim);
+  /* Never wraps to a second line: it is the one part of the header that grows
+     with what is happening, and a header that changes height as transfers come
+     and go pushes every row under it. */
+  white-space: nowrap;
+}
+.transfer-group + .transfer-group { border-top: 1px solid var(--border); }
+.transfer-group-head {
+  padding: .35rem .6rem .2rem;
+  font-size: .78em;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  color: var(--text-dim);
+}
+/* Finished rows recede rather than disappear: somebody who just downloaded
+   three files wants to see that all three are there. */
+.transfer-item.transfer-done .transfer-name,
+.transfer-item.transfer-cancelled .transfer-name { color: var(--text-dim); }
+
+/* Announced, not shown. The transfers panel needs a live region that says what
+   changed state without drawing anything — used with aria-live, so it must
+   stay in the accessibility tree: `display: none` would remove it from there
+   too and announce nothing at all, which is the usual way this is got wrong. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}