1 files changed, 31 insertions, 16 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 238f33a..9ff5923 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -442,17 +442,6 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .group-header h2 { margin-bottom: 0; }
 
-.status-badge {
-  display: inline-block;
-  padding: 3px 10px;
-  border-radius: 12px;
-  font-size: 0.75em;
-  font-weight: 500;
-}
-.status-ok   { background: #16a34a20; color: var(--success); }
-.status-err  { background: var(--error-bg); color: var(--error); }
-.status-busy { background: var(--bg-raised); color: var(--text-secondary); }
-
 /* ── Group tabs ──────────────────────────────────────────────────────────── */
 
 .group-tabs {
@@ -467,19 +456,35 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border: none;
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
-  padding: 8px 20px;
+  padding: 10px 18px;
   color: var(--text-secondary);
-  font-size: 0.9em;
-  font-weight: 500;
   cursor: pointer;
   border-radius: 0;
   transition: color 0.12s, border-color 0.12s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .group-tab:hover { color: var(--text); background: none; }
 .group-tab.active {
   color: var(--accent);
   border-bottom-color: var(--accent);
 }
+.tab-icon { width: 22px; height: 22px; }
+
+.group-mute-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-dim);
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+.group-mute-btn:hover { color: var(--text); }
+.group-mute-btn .icon { width: 20px; height: 20px; }
 
 /* ── Chat panel ──────────────────────────────────────────────────────────── */
 
@@ -998,7 +1003,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   color: var(--text);
   font-size: 0.9em;
   cursor: pointer;
-  min-width: 120px;
+  min-width: 180px;
 }
 .settings-select:focus { outline: none; border-color: var(--border-focus); }
 
@@ -1054,6 +1059,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   flex-shrink: 0;
 }
 .video-close:hover { background: rgba(255, 255, 255, 0.25); }
+.video-close.dl-active { background: rgba(34, 197, 94, 0.25); pointer-events: none; }
 
 .video-container {
   width: 100%;
@@ -1457,7 +1463,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 /* Green while transfers are running: the count in the badge says how many, but
    the colour is what is readable without looking at it. Back to the ordinary
    nav colour the moment the last one finishes. */
-.transfer-btn.active .icon { color: var(--success); }
+@keyframes pulse-green {
+  0%, 100% { color: #86efac; }
+  50% { color: #15803d; }
+}
+.transfer-btn.active .icon { animation: pulse-green 2s ease-in-out infinite; }
 
 .transfer-wrap { position: relative; display: flex; align-items: center; }
 .transfer-btn {
@@ -1504,6 +1514,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+a.transfer-name {
+  color: var(--link);
+  text-decoration: underline;
+  cursor: pointer;
+}
 .transfer-cancel {
   background: none;
   border: none;