fix music navs

static/panel.css

@@ -85,14 +85,10 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .card.offline { opacity: .5; }
 
 .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
-.card-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
-
-.level { color: var(--muted); font-size: 13px; }
-.level b {
-  color: var(--ink);
-  font-size: 26px;
-  font-weight: 640;
-  font-variant-numeric: tabular-nums;
+.card-head h2 {
+  margin: 0; min-width: 0;
+  font-size: 17px; font-weight: 600;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 
 .pill {
@@ -102,6 +98,26 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 }
 .pill.on { color: var(--live); }
 
+/* --- now playing, between the room's name and its volume --------------- */
+/* The padding matches the card's gap, so the line sits halfway between the
+   song and the volume. It goes with the block, when nothing is playing. */
+.now-playing {
+  display: flex; align-items: center; gap: 16px; min-width: 0;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--edge);
+}
+.cover {
+  flex: 0 0 auto;
+  width: 62px; height: 62px;
+  border-radius: 13px;
+  object-fit: cover;
+  background: var(--raised);
+}
+.track { display: flex; flex-direction: column; min-width: 0; }
+.track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.song { font-size: 20px; font-weight: 550; }
+.artist { font-size: 17px; color: var(--muted); }
+
 /* --- volume ---------------------------------------------------------- */
 .volume { display: flex; align-items: center; gap: 14px; }
 
@@ -116,12 +132,41 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .step:active { background: var(--accent); transform: scale(.96); }
 .step:disabled { opacity: .4; }
 
-.meter { flex: 1; height: 8px; border-radius: 999px; background: #0c111b; overflow: hidden; }
-.meter i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .12s ease-out; }
+.meter { position: relative; flex: 1; height: 8px; border-radius: 999px; background: #0c111b; }
+.meter i {
+  display: block; height: 100%; width: calc(var(--level, 0) * 1%);
+  border-radius: 999px; background: var(--accent);
+  transition: width .12s ease-out;
+}
 
-/* --- play / pause, beside the join button ------------------------------ */
-.actions { display: flex; align-items: stretch; gap: 10px; }
-.actions .toggle { flex: 1; }
+/* The level rides the bar. It travels the track less its own width, so it
+   never hangs off either end over the buttons -- and the fill's end is
+   always somewhere underneath it. */
+.knob {
+  position: absolute; top: 50%;
+  left: calc((100% - 46px) * var(--level, 0) / 100);
+  width: 46px; height: 30px;
+  transform: translateY(-50%);
+  display: grid; place-items: center;
+  border-radius: 999px;
+  background: var(--accent); color: #fff;
+  box-shadow: 0 0 0 3px var(--card);
+  font-size: 14px; font-weight: 640; font-variant-numeric: tabular-nums;
+  transition: left .12s ease-out;
+  cursor: grab;
+  touch-action: none;   /* the drag is ours, not a page scroll */
+}
+/* A thumb-sized grip around a knob only 30px tall. A press on the
+   pseudo-element lands on the knob itself. */
+.knob::before { content: ''; position: absolute; inset: -12px -8px; }
+
+/* Under a finger the knob has to keep up, not ease after it. */
+.meter.dragging i,
+.meter.dragging .knob { transition: none; }
+.meter.dragging .knob { cursor: grabbing; transform: translateY(-50%) scale(1.12); }
+
+/* --- previous / play-pause / next, centred ----------------------------- */
+.actions { display: flex; align-items: stretch; justify-content: center; gap: 10px; }
 
 .transport {
   flex: 0 0 auto;
@@ -141,15 +186,16 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .transport.playing .icon-play { display: none; }
 .transport.playing .icon-pause { display: block; }
 
-/* --- join / leave the AVR -------------------------------------------- */
+/* --- join / leave the AVR, beside the room's name ---------------------- */
 .toggle {
-  height: 62px; border-radius: 16px;
+  flex: 0 0 auto;
+  height: 40px; padding: 0 14px; border-radius: 999px;
   background: var(--raised);
-  display: flex; align-items: center; justify-content: center; gap: 10px;
-  font-size: 15px; font-weight: 550;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  font-size: 14px; font-weight: 550; white-space: nowrap;
   color: var(--muted);
 }
-.toggle .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .6; }
+.toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .6; }
 .toggle[aria-pressed="true"] { background: var(--accent); color: #fff; }
 .toggle[aria-pressed="true"] .dot { background: #fff; opacity: 1; }
 .toggle:active { transform: scale(.985); }
@@ -196,11 +242,13 @@ svg { width: 22px; height: 22px; fill: currentColor; }
 .joined .card.room { background: none; border: 0; border-radius: 0; padding: 0; gap: 12px; }
 .joined .card.room + .card.room { border-top: 1px solid var(--edge); padding-top: 14px; }
 .joined .card-head h2 { font-size: 15px; font-weight: 550; color: var(--muted); }
-.joined .level b { font-size: 22px; }
+.joined .now-playing { padding-bottom: 12px; }
+.joined .cover { width: 52px; height: 52px; border-radius: 10px; }
+.joined .song { font-size: 18px; }
 .joined .step { height: 54px; }
 .joined .toggle,
 .joined .toggle[aria-pressed="true"] {
-  height: 40px; font-size: 13px; font-weight: 500;
+  height: 36px; font-size: 13px; font-weight: 500;
   background: none; border: 1px solid var(--edge); color: var(--muted);
 }
 .joined .toggle .dot { display: none; }