feat(ui): redesign top bar as chrome-glass masthead (#696)

Extract the app header into a dedicated TopBar component and apply the
same translucent chrome language used by the sidebar: bg-sidebar +
backdrop-blur-md + inset top highlight. A new --chrome-top-highlight
token drives the highlight in both themes via the shadow-chrome-top
utility alias.

Restore the pulsing-dot unread indicator on the notification bell
(replaces the temporary count pill) and keep its aria-label dynamic so
screen readers still hear the unread count. Tighten nav a11y with
aria-current on the active item, aria-label on icon-only buttons, and a
proper <nav> landmark around the desktop Highlight group.

frontend/src/components/NotificationPanel.tsx

@@ -132,11 +132,9 @@ export function NotificationPanel({
 
     const bellBadge =
         unreadCount > 0 ? (
-            <span
-                aria-hidden="true"
-                className="absolute -right-1 -top-1 flex min-h-[16px] min-w-[16px] items-center justify-center rounded-full bg-destructive px-1 font-mono text-[9px] font-semibold tabular-nums leading-none text-destructive-foreground"
-            >
-                {unreadCount > 99 ? '99+' : unreadCount}
+            <span aria-hidden="true" className="absolute -right-1 -top-1 flex h-2.5 w-2.5">
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-destructive opacity-75" />
+                <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-destructive" />
             </span>
         ) : null;
 
@@ -154,7 +152,7 @@ export function NotificationPanel({
                     size="icon"
                     className="relative h-8 w-8 rounded-lg"
                     title="Notifications"
-                    aria-label="Notifications"
+                    aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'}
                 >
                     <Bell className="h-4 w-4" strokeWidth={1.5} />
                     {bellBadge}