Add persistent mini now-playing bar

Fixed bar at bottom of window when video is playing. Shows title,
channel, progress, play/pause toggle. Click to restore player view.

Files:
- frontend/index.html: mini-bar markup
- frontend/app.js: showMiniBar/hideMiniBar/updateMiniBar, wiring
- frontend/styles.css: .mini-bar, .mini-bar-inner, .mini-progress styles

frontend/styles.css

@@ -1087,6 +1087,75 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 
 .hidden { display: none !important; }
 
+/* ===================== Mini now-playing bar ===================== */
+.mini-bar {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  z-index: 300;
+  cursor: pointer;
+  animation: miniBarIn 0.25s var(--ease);
+}
+@keyframes miniBarIn {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+.mini-bar-inner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border-top: 1px solid var(--line);
+  backdrop-filter: blur(8px);
+}
+.mini-btn {
+  background: var(--bg-3);
+  border: 1px solid var(--line);
+  color: var(--text);
+  width: 34px; height: 34px;
+  border-radius: 9px;
+  cursor: pointer;
+  font-size: 14px;
+  display: grid; place-items: center;
+  flex-shrink: 0;
+  transition: all 0.16s;
+}
+.mini-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
+.mini-close {
+  width: 28px; height: 28px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.mini-close:hover { color: var(--text); border-color: var(--text-dim); }
+.mini-info {
+  min-width: 0; flex: 1;
+  display: flex; flex-direction: column;
+  gap: 2px;
+}
+.mini-title {
+  font-size: 13px; font-weight: 600;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.mini-channel {
+  font-size: 11px; color: var(--text-dim);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.mini-time {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-2);
+  flex-shrink: 0;
+}
+.mini-progress {
+  height: 3px;
+  background: var(--bg-3);
+}
+.mini-progress-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
+  transition: width 1s linear;
+}
+
 @media (max-width: 1080px) {
   .body { flex-direction: column; }
   .list-pane { width: auto; border-left: none; border-top: 1px solid var(--line-soft); }