Group media behaviour

static/panel.css

@@ -11,11 +11,14 @@
   --ink-bright: #fff;
   --ink-bright-muted: rgba(255, 255, 255, .8);
   --live: #3ddc97;
+  --media: #1a3333;
   --muted: #8d98ad;
-  --radius: 22px;
+  --radius-lg: 16px;
+  --radius-xl: 22px;
   --raised: #29334a;
   --scrim: rgba(4, 6, 11, .6);
   --shadow: rgba(0, 0, 0, .45);
+  --shade: rgba(255, 255, 255, .05);
   /* spacing scale for every gap/padding/margin in the sheet, smallest to
      largest: 2xs 4px, sm 8px, md 12px, gutter 16px, lg 24px. */
   --space-xs: 4px;
@@ -89,7 +92,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .card {
   background: var(--card);
   border: 1px solid var(--edge);
-  border-radius: var(--radius);
+  border-radius: var(--radius-xl);
   padding: var(--space-md);
   display: flex;
   flex-direction: column;
@@ -116,6 +119,15 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .card-head h2 .room-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* --- now playing, between the room's name and its volume --------------- */
+.media {
+  background: var(--shade);
+  border-radius: var(--radius-lg);
+  padding: var(--space-md);
+  display: flex;
+  row-gap: var(--space-md);
+  flex-direction: column;
+}
+
 .now-playing {
   display: flex; align-items: center; gap: var(--space-md); min-width: 0;
 }
@@ -195,7 +207,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .control-btn {
   flex: 0 0 auto;
   width: 72px; height: 62px;
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: var(--raised);
   display: grid; place-items: center;
 }
@@ -246,7 +258,7 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .sources { display: flex; gap: var(--space-md); }
 .sources-btn {
   flex: 1; min-width: 0;
-  height: 50px; border-radius: 16px;
+  height: 50px; border-radius: var(--radius-lg);
   background: var(--raised);
   display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
   font-size: 15px; font-weight: 550;
@@ -273,7 +285,7 @@ button.sources-btn.loading .icon { display: none; }
   display: flex; align-items: center; gap: var(--space-md);
   width: 100%; min-height: 50px;
   padding: var(--space-md) var(--space-md);
-  border-radius: 16px;
+  border-radius: var(--radius-lg);
   background: var(--raised);
   text-align: left;
 }
@@ -302,7 +314,7 @@ button.sources-btn.loading .icon { display: none; }
 .joined .toggle .leave { display: block; }
 
 /* --- misc ------------------------------------------------------------- */
-.wide { width: 100%; height: 50px; border-radius: 16px; font-size: 15px; }
+.wide { width: 100%; height: 50px; border-radius: var(--radius-lg); font-size: 15px; }
 .ghost { background: transparent; border: 1px solid var(--edge); color: var(--muted); }
 
 .foot { margin: var(--space-xs) var(--space-xs) 0; min-height: 18px; font-size: 12px; color: var(--muted); text-align: center; }
@@ -331,7 +343,7 @@ button.sources-btn.loading .icon { display: none; }
 .option {
   display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
   min-height: 58px; padding: 0 var(--space-md);
-  border-radius: 16px; background: var(--raised);
+  border-radius: var(--radius-lg); background: var(--raised);
   font-size: 17px; text-align: left;
 }
 .option[aria-current="true"] { background: var(--accent); color: var(--ink-bright); }