feat(ui): liquid-glass design system, settings polish, hints, notif fixes

- Add a theme-aware glass surface system (.glass/.glass-card + ambient backdrop,
  performance-mode opt-out) and apply it across panels, popovers, toasts, cards,
  sidebar widgets, channel rows, video cards and login.
- SettingsPanel: slide in/out animation, glass styling, wrapping pill tabs (no
  horizontal scrollbar) with a prominent active state.
- Notifications: auto-dismiss can be switched off (stays until closed); the test
  notification now also triggers the alert sound; resume a suspended AudioContext.
- Add an app-wide, toggleable hint/tooltip system (lib/hints + Tooltip) and wire
  hints across the settings and channel-manager surfaces; persisted per account.

frontend/src/components/Tooltip.tsx

@@ -0,0 +1,38 @@
+import { useSyncExternalStore } from "react";
+import { hintsEnabled, subscribeHints } from "../lib/hints";
+
+type Side = "top" | "bottom" | "left";
+
+/** Wrap any element to show a short glass hint caption on hover — but only while the
+ *  app-wide hints toggle (Settings → Appearance) is on. */
+export default function Tooltip({
+  hint,
+  side = "top",
+  children,
+}: {
+  hint: string;
+  side?: Side;
+  children: React.ReactNode;
+}) {
+  const enabled = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
+  if (!enabled || !hint) return <>{children}</>;
+
+  const place =
+    side === "bottom"
+      ? "top-full mt-2 left-1/2 -translate-x-1/2"
+      : side === "left"
+        ? "right-full mr-2 top-1/2 -translate-y-1/2"
+        : "bottom-full mb-2 left-1/2 -translate-x-1/2";
+
+  return (
+    <span className="relative inline-flex group/tip">
+      {children}
+      <span
+        role="tooltip"
+        className={`glass pointer-events-none absolute ${place} z-50 w-max max-w-[220px] px-2.5 py-1.5 rounded-lg text-xs leading-snug text-fg font-normal normal-case tracking-normal opacity-0 group-hover/tip:opacity-100 transition-opacity duration-150`}
+      >
+        {hint}
+      </span>
+    </span>
+  );
+}