@nommos/core 0.0.44 → 0.0.45

package/src/lib/popup-viewer.js

@@ -1,10 +1,14 @@
-import { POPUP_ANCHOR_SELECTOR, POPUP_LAUNCHER_HIDDEN_KEY, POPUP_MOBILE_BREAKPOINT_PX, POPUP_SCHEMA_VERSION, POPUP_SOUND_KEY, } from './constants';
+import { POPUP_ANCHOR_SELECTOR, POPUP_MOBILE_BREAKPOINT_PX, POPUP_SCHEMA_VERSION, POPUP_SOUND_KEY, } from './constants';
 import { escapeHtml, sanitizeUrl } from './dom-safe';
 import { resolveLanguage } from './i18n';
+import { formatAbsolute, formatRelative } from './relative-time';
 const HOST_ID = 'nommos-popup-host';
 const LAUNCHER_HOST_ID = 'nommos-popup-launcher';
-/** Comfortably past the 260ms slide, so the fallback only fires when `animationend` did not. */
-const GHOST_TTL_MS = 500;
+/** Tray height budget, and the figure the flip decision is measured against. */
+const TRAY_MAX_HEIGHT_PX = 420;
+const TRAY_WIDTH_PX = 340;
+/** Breathing room between the bell and the panel, and between the panel and the viewport edge. */
+const TRAY_GAP_PX = 10;
 /** Module-level so the "you have more than one anchor" advice is given once per page, not per render. */
 let warnedMultipleAnchors = false;
 /**
@@ -26,37 +30,68 @@ const BELL_ICON = `
  * <p>There is deliberately no "cancel" label. Closing already has three affordances — the × chip,
  * the backdrop and Escape — and a fourth labelled button sat beside the template's own CTAs as a
  * peer action rather than an escape hatch. `dismiss` is the only chrome action, and it is terminal.
+ *
+ * <p>The relative-time forms are compact ("11h", not "11 hours ago") for two reasons: a tray row has
+ * the width for one and not the other, and the compact forms happen to be plural-invariant in all
+ * three languages, which is what lets this table stay a table instead of pulling in plural rules.
  */
 const POPUP_COPY = {
     en: {
         close: 'Close',
         dismiss: "Don't show again",
-        prev: 'Previous message',
-        next: 'Next message',
         dialog: 'Message',
-        hideLauncher: 'Hide messages button',
-        launcher: 'Open messages',
-        launcherUnread: 'Open messages ({count} unread)',
+        launcher: 'Notifications',
+        launcherUnread: 'Notifications ({count} unread)',
+        tray: 'Notifications',
+        trayEmpty: "You're all caught up",
+        markAllSeen: 'Mark all as seen',
+        dismissRow: 'Dismiss {title}',
+        soundOn: 'Mute notification sounds',
+        soundOff: 'Unmute notification sounds',
+        unread: 'Unread',
+        timeNow: 'now',
+        timeMinutes: '{n}m',
+        timeHours: '{n}h',
+        timeYesterday: 'yesterday',
+        timeDays: '{n}d',
     },
     fr: {
         close: 'Fermer',
         dismiss: 'Ne plus afficher',
-        prev: 'Message précédent',
-        next: 'Message suivant',
         dialog: 'Message',
-        hideLauncher: 'Masquer le bouton des messages',
-        launcher: 'Ouvrir les messages',
-        launcherUnread: 'Ouvrir les messages ({count} non lus)',
+        launcher: 'Notifications',
+        launcherUnread: 'Notifications ({count} non lues)',
+        tray: 'Notifications',
+        trayEmpty: 'Vous êtes à jour',
+        markAllSeen: 'Tout marquer comme lu',
+        dismissRow: 'Ignorer {title}',
+        soundOn: 'Couper les sons de notification',
+        soundOff: 'Activer les sons de notification',
+        unread: 'Non lu',
+        timeNow: "à l'instant",
+        timeMinutes: '{n} min',
+        timeHours: '{n} h',
+        timeYesterday: 'hier',
+        timeDays: '{n} j',
     },
     es: {
         close: 'Cerrar',
         dismiss: 'No volver a mostrar',
-        prev: 'Mensaje anterior',
-        next: 'Mensaje siguiente',
         dialog: 'Mensaje',
-        hideLauncher: 'Ocultar el botón de mensajes',
-        launcher: 'Abrir mensajes',
-        launcherUnread: 'Abrir mensajes ({count} sin leer)',
+        launcher: 'Notificaciones',
+        launcherUnread: 'Notificaciones ({count} sin leer)',
+        tray: 'Notificaciones',
+        trayEmpty: 'Estás al día',
+        markAllSeen: 'Marcar todo como leído',
+        dismissRow: 'Descartar {title}',
+        soundOn: 'Silenciar los sonidos de notificación',
+        soundOff: 'Activar los sonidos de notificación',
+        unread: 'Sin leer',
+        timeNow: 'ahora',
+        timeMinutes: '{n} min',
+        timeHours: '{n} h',
+        timeYesterday: 'ayer',
+        timeDays: '{n} d',
     },
 };
 export class PopupViewer {
@@ -67,28 +102,46 @@ export class PopupViewer {
         this.state = 'hidden';
         this.launcherHost = null;
         this.launcherRoot = null;
-        /** The element the launcher is currently mounted into. `null` means the floating fallback. */
+        /** The element the launcher is mounted into. `null` means no anchor, so no launcher at all. */
         this.anchor = null;
         this.domObserver = null;
         this.remountQueued = false;
         /** Resolved once per viewer: the visitor's language does not change mid-page. */
-        this.copy = POPUP_COPY[resolveLanguage()];
+        this.lang = resolveLanguage();
+        this.copy = POPUP_COPY[this.lang];
         this.items = [];
-        /** What is on screen. Only moves once the next popup's content is in hand. */
+        /** Which popup the modal is showing. Set by {@link open}; the tray is what moves between them. */
         this.index = 0;
-        /**
-         * Where the visitor has navigated to, which runs ahead of {@link index} while a load is in
-         * flight. Without it, two quick taps on `›` both step from the same rendered index and the
-         * second is swallowed.
-         */
-        this.pendingIndex = 0;
-        /** Guards against a slow content load landing after a later move and rewinding the carousel. */
-        this.swapToken = 0;
         this.lastFocused = null;
-        this.touchStartX = null;
         this.audio = null;
+        /**
+         * Tray visibility, deliberately separate from {@link ViewerState}.
+         *
+         * <p>That enum models the modal's animated open/close and its awaited content load. The tray has
+         * neither, and folding it in would force every `state !== 'visible'` guard in this file to be
+         * re-reasoned for a surface those guards were never about.
+         */
+        this.trayOpen = false;
         this.onKeyDown = (event) => this.handleKeyDown(event);
         this.onViewportChange = () => this.renderBodyIfVisible();
+        /**
+         * Registered on `document` only while the tray is open, in the capture phase.
+         *
+         * <p>`event.target` is useless here: a click inside a shadow root retargets to the host by the
+         * time it reaches `document`. `composedPath()` is the only reliable cross-boundary test.
+         */
+        this.onDocumentPointerDown = (event) => {
+            if (!this.trayOpen)
+                return;
+            if (this.launcherHost && event.composedPath().includes(this.launcherHost))
+                return;
+            this.closeTray();
+        };
+        /** The tray is positioned from the bell's box, so it has to follow the bell. */
+        this.onTrayReflow = () => {
+            if (this.trayOpen)
+                this.positionTray();
+        };
         // `pagehide` rather than `beforeunload`: it fires on mobile backgrounding and is bfcache-safe,
         // where `beforeunload` is skipped on both.
         this.onPageHide = () => this.handlePageHide();
@@ -97,12 +150,11 @@ export class PopupViewer {
     setItems(items) {
         this.items = items;
         this.index = items.length === 0 ? 0 : Math.min(this.index, items.length - 1);
-        // A reordered or shortened inbox invalidates any navigation still in flight.
-        this.pendingIndex = this.index;
         if (items.length === 0) {
-            // Floating, an empty inbox means there is nothing to be, so remove every trace. Anchored is
-            // different: the tenant reserved a slot in their own header, and vacating it collapses their
-            // layout around the gap. Keep the launcher mounted and let it render its empty state.
+            // With no anchor there is no launcher and no tray, so an empty inbox leaves nothing that
+            // could ever be shown — remove every trace. Anchored is different: the tenant reserved that
+            // slot, and vacating it collapses their layout around the gap, so the launcher stays mounted
+            // and the tray renders its empty state.
             if (this.resolveAnchor() === null) {
                 this.teardown();
                 return;
@@ -112,6 +164,11 @@ export class PopupViewer {
         }
         this.ensureHost();
         this.renderLauncher();
+        // Emptying the list while the tray is open swaps in the empty state rather than yanking the
+        // panel out from under the visitor — they are standing in it, and it was very likely their own
+        // dismissal that emptied it.
+        if (this.trayOpen)
+            this.renderTray();
         if (this.state === 'visible') {
             void this.renderCurrent();
         }
@@ -126,6 +183,10 @@ export class PopupViewer {
             window.removeEventListener('orientationchange', this.onViewportChange);
             window.removeEventListener('pagehide', this.onPageHide);
         }
+        // Before the hosts go: a leaked document listener holding a dead shadow root outlives the
+        // viewer it belonged to and answers for it.
+        this.detachTrayListeners();
+        this.trayOpen = false;
         this.domObserver?.disconnect();
         this.domObserver = null;
         this.host?.remove();
@@ -137,7 +198,6 @@ export class PopupViewer {
         this.anchor = null;
         this.state = 'hidden';
         this.index = 0;
-        this.pendingIndex = 0;
         this.items = [];
     }
     isVisible() {
@@ -149,8 +209,11 @@ export class PopupViewer {
         const target = id === undefined ? 0 : this.items.findIndex((item) => item.id === id);
         if (target < 0)
             return;
+        // The modal wins unconditionally. A HIGH/CRITICAL push arriving while the tray is open is
+        // interruptive by definition, and leaving both on screen would stack a panel over a backdrop.
+        if (this.trayOpen)
+            this.closeTray({ restoreFocus: false });
         this.index = target;
-        this.pendingIndex = target;
         this.ensureHost();
         this.state = 'opening';
         this.lastFocused = typeof document !== 'undefined' ? document.activeElement : null;
@@ -179,9 +242,9 @@ export class PopupViewer {
         if (this.lastFocused instanceof HTMLElement) {
             this.lastFocused.focus();
         }
-        // Closing is still not dismissing — the entry stays in the inbox and is never reported as
-        // dismissed — but the launcher only survives while something else is unread. See
-        // renderLauncher.
+        // Closing is not dismissing: the entry stays in the inbox, is never reported as dismissed, and
+        // can be reopened from the tray. Without an anchor there is no tray, so the way back is the
+        // next page load or the host app calling `openViewer`.
         if (item)
             this.callbacks.onClosed(item);
     }
@@ -198,8 +261,6 @@ export class PopupViewer {
         this.root = this.host.attachShadow({ mode: 'open' });
         this.root.innerHTML = `<style>${CHROME_CSS}</style><div id="overlay" hidden></div>`;
         this.root.addEventListener('click', (event) => this.handleClick(event));
-        this.root.addEventListener('touchstart', (event) => this.handleTouchStart(event), { passive: true });
-        this.root.addEventListener('touchend', (event) => this.handleTouchEnd(event), { passive: true });
         document.addEventListener('keydown', this.onKeyDown);
         window.addEventListener('resize', this.onViewportChange);
         window.addEventListener('orientationchange', this.onViewportChange);
@@ -226,14 +287,18 @@ export class PopupViewer {
         this.launcherHost = document.createElement('div');
         this.launcherHost.id = LAUNCHER_HOST_ID;
         this.launcherRoot = this.launcherHost.attachShadow({ mode: 'open' });
-        this.launcherRoot.innerHTML = `<style>${LAUNCHER_CSS}</style><div id="launcher-slot"></div>`;
+        // Two sibling slots written once, because the two halves re-render on different schedules. The
+        // launcher is rewritten by every setItems, open, close, arrival and anchor change; doing that
+        // to a shared parent would tear an open tray out mid-interaction, along with its focus.
+        this.launcherRoot.innerHTML =
+            `<style>${LAUNCHER_CSS}</style><div id="launcher-slot"></div><div id="tray" hidden></div>`;
         // `handleClick` dispatches on ids and `data-action` and does not care which root the event
         // came from, so the second root reuses it verbatim.
         this.launcherRoot.addEventListener('click', (event) => this.handleClick(event));
         this.observeDom();
     }
     /**
-     * @returns the integrator's chosen mount point, or null for the floating fallback.
+     * @returns the integrator's chosen mount point, or null when they have not marked one.
      */
     resolveAnchor() {
         if (typeof document === 'undefined')
@@ -247,20 +312,32 @@ export class PopupViewer {
         }
         return matches[0] ?? null;
     }
-    /** Places the launcher host under the current anchor, or under `body` when there is none. */
+    /**
+     * Places the launcher host inside the integrator's anchor, or detaches it when there is none.
+     *
+     * <p>There is no floating fallback. Parking a bell in the corner of someone else's page is a
+     * decision only they can make: it lands on their layout, competes with their own widgets, and
+     * appears without them having asked for it. So the launcher exists exactly where a tenant marked
+     * a slot for it, and nowhere else.
+     *
+     * <p>Popups still arrive and still auto-open without an anchor — only the persistent bell and its
+     * tray are withheld. The cost is that a popup the visitor closes has no way back until the next
+     * page load, unless the host app calls {@code openViewer} itself.
+     */
     mountLauncher() {
         if (!this.launcherHost || typeof document === 'undefined')
             return;
         const anchor = this.resolveAnchor();
-        const parent = anchor ?? document.body;
-        if (this.anchor === anchor && this.launcherHost.parentNode === parent)
+        if (!anchor) {
+            this.anchor = null;
+            this.closeTray({ restoreFocus: false });
+            this.launcherHost.remove();
+            return;
+        }
+        if (this.anchor === anchor && this.launcherHost.parentNode === anchor)
             return;
         this.anchor = anchor;
-        if (anchor)
-            this.launcherHost.setAttribute('data-anchored', '');
-        else
-            this.launcherHost.removeAttribute('data-anchored');
-        parent.appendChild(this.launcherHost); // appendChild moves it; no explicit remove needed.
+        anchor.appendChild(this.launcherHost); // appendChild moves it; no explicit remove needed.
     }
     /**
      * Follows the anchor for the life of the page. A one-shot query at init would almost always miss
@@ -281,9 +358,14 @@ export class PopupViewer {
                 this.remountQueued = false;
                 if (!this.launcherHost)
                     return;
-                if (this.resolveAnchor() !== this.anchor || !this.launcherHost.isConnected) {
-                    // Re-render rather than just re-parent: the markup differs between the two modes, so a
-                    // move alone would leave an anchored launcher wearing the floating hide chip.
+                // Covers the anchor appearing late, being swapped on a route change, and disappearing —
+                // the last of which must take the launcher down with it rather than strand it in the body.
+                //
+                // The `isConnected` half is gated on there *being* an anchor on purpose: with none, the
+                // host is deliberately detached, and an ungated check would read its own handiwork as work
+                // still to do and re-render on every mutation the tenant's app makes.
+                const anchor = this.resolveAnchor();
+                if (anchor !== this.anchor || (anchor !== null && !this.launcherHost.isConnected)) {
                     this.renderLauncher();
                 }
             };
@@ -295,19 +377,16 @@ export class PopupViewer {
         this.domObserver.observe(document.body, { childList: true, subtree: true });
     }
     /**
-     * Whether the launcher shows at all depends on where it lives — the two placements have opposite
-     * defaults, and that is deliberate.
+     * Draws the bell, but only where the tenant asked for one.
      *
-     * <p><b>Floating</b> shows only while something is unread. A permanent button parked over
-     * someone else's page with nothing behind it is clutter, so once the visitor has seen everything
-     * it disappears. The cost is real: a read-but-undismissed popup then has no way back for the rest
-     * of the session, short of the host app calling {@link PopupInbox.openViewer}.
+     * <p>With no anchor there is no launcher at all — see {@link mountLauncher} for why there is no
+     * corner fallback.
      *
-     * <p><b>Anchored</b> always shows. The tenant deliberately reserved a slot in their own header,
-     * so vacating it leaves a hole their layout collapses around — a flex or grid {@code gap} still
-     * applies to a zero-width item — and a header bell that vanishes reads as broken chrome rather
-     * than as tidiness. Persisting also restores the way back, so a popup closed by accident can be
-     * reopened.
+     * <p>Where there is an anchor the bell is permanent, including once everything has been read. The
+     * tenant reserved that slot, so vacating it leaves a hole their layout collapses around — a flex
+     * or grid {@code gap} still applies to a zero-width item — and chrome that disappears reads as
+     * broken rather than as tidy. Persisting is also what keeps a way back to a popup closed by
+     * accident.
      */
     renderLauncher() {
         this.ensureLauncherHost();
@@ -315,17 +394,11 @@ export class PopupViewer {
         const slot = this.launcherRoot?.getElementById('launcher-slot');
         if (!slot)
             return;
-        const unread = this.items.filter((item) => item.status !== 'VIEWED').length;
-        const anchored = this.anchor !== null;
-        if (!anchored && (unread === 0 || this.launcherHidden())) {
+        if (this.anchor === null) {
             slot.innerHTML = '';
             return;
         }
-        // No hide chip when anchored: taking the icon out of the middle of the tenant's own header
-        // leaves a hole in their layout, and the corner-clutter it exists to solve isn't there.
-        const hide = anchored
-            ? ''
-            : `<button id="launcher-hide" data-action="hide-launcher" aria-label="${escapeHtml(this.copy.hideLauncher)}">×</button>`;
+        const unread = this.items.filter((item) => item.status !== 'VIEWED').length;
         // With nothing unread there is nothing to draw the eye to, so the badge and the wiggle both
         // drop away and the bell sits quietly among the tenant's own header icons.
         const badge = unread > 0 ? `<span id="badge">${escapeHtml(String(unread))}</span>` : '';
@@ -335,45 +408,191 @@ export class PopupViewer {
             : this.copy.launcher;
         slot.innerHTML = `
       <div id="launcher-wrap" part="launcher-wrap">
-        <button id="launcher" part="launcher"${attention} aria-label="${escapeHtml(label)}">
+        <button id="launcher" part="launcher"${attention} aria-label="${escapeHtml(label)}"
+                aria-haspopup="dialog" aria-expanded="${this.trayOpen}" aria-controls="tray">
           ${BELL_ICON}
           ${badge}
         </button>
-        ${hide}
       </div>`;
     }
+    // ── Notification tray ──────────────────────────────────────────────────────
     /**
-     * Hiding is per page session and deliberately weaker than dismissing: it silences the launcher
-     * for a visitor who does not want it in the corner right now, but a genuinely new popup clears
-     * it again (see {@link notifyArrival}) because that is a new reason to be shown.
+     * The list of what is waiting, and the only way to move between popups.
+     *
+     * <p>It lives in the launcher's shadow root rather than the modal's because it has to track the
+     * bell, and {@link observeDom} re-parents that host into and out of the tenant's header on SPA
+     * route changes. In the modal's root it would need a permanent coordinate sync to follow.
+     *
+     * <p>Opening it is emphatically <em>not</em> opening a popup: no row here calls
+     * {@code POST /view}, and nothing marks a popup `VIEWED`. Seeing a title in a list is not reading
+     * the message, and conflating the two would make every campaign report a 100% open rate.
      */
-    launcherHidden() {
-        try {
-            return sessionStorage.getItem(POPUP_LAUNCHER_HIDDEN_KEY) === '1';
-        }
-        catch {
-            return false;
-        }
+    toggleTray() {
+        if (this.trayOpen)
+            this.closeTray();
+        else
+            this.openTray();
     }
-    setLauncherHidden(hidden) {
-        try {
-            if (hidden)
-                sessionStorage.setItem(POPUP_LAUNCHER_HIDDEN_KEY, '1');
-            else
-                sessionStorage.removeItem(POPUP_LAUNCHER_HIDDEN_KEY);
+    openTray() {
+        if (this.trayOpen || !this.launcherRoot)
+            return;
+        this.trayOpen = true;
+        this.renderTray();
+        this.positionTray();
+        this.attachTrayListeners();
+        this.syncLauncherExpanded();
+        const first = this.launcherRoot.querySelector('.np-row-open');
+        (first ?? this.launcherRoot.getElementById('tray'))?.focus();
+        this.callbacks.onTrayOpened([...this.items], this.items.filter((item) => item.status !== 'VIEWED').length);
+    }
+    closeTray(options = {}) {
+        if (!this.trayOpen)
+            return;
+        this.trayOpen = false;
+        this.detachTrayListeners();
+        this.launcherRoot?.getElementById('tray')?.setAttribute('hidden', '');
+        this.syncLauncherExpanded();
+        if (options.restoreFocus !== false) {
+            this.launcherRoot?.getElementById('launcher')?.focus();
         }
-        catch {
-            /* storage blocked — the launcher simply stays visible */
+    }
+    /** Kept off {@link renderLauncher} so toggling the tray does not rebuild the bell. */
+    syncLauncherExpanded() {
+        this.launcherRoot?.getElementById('launcher')?.setAttribute('aria-expanded', String(this.trayOpen));
+    }
+    attachTrayListeners() {
+        if (typeof document === 'undefined')
+            return;
+        document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
+        // Capture, because the scroll that moves the bell is very often on an inner container rather
+        // than the window, and those do not bubble.
+        window.addEventListener('scroll', this.onTrayReflow, { capture: true, passive: true });
+        window.addEventListener('resize', this.onTrayReflow);
+    }
+    detachTrayListeners() {
+        if (typeof document === 'undefined')
+            return;
+        document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
+        window.removeEventListener('scroll', this.onTrayReflow, true);
+        window.removeEventListener('resize', this.onTrayReflow);
+    }
+    renderTray() {
+        const tray = this.launcherRoot?.getElementById('tray');
+        if (!tray)
+            return;
+        const c = this.copy;
+        const unread = this.items.filter((item) => item.status !== 'VIEWED').length;
+        const muted = !PopupViewer.soundEnabled();
+        const soundLabel = muted ? c.soundOff : c.soundOn;
+        // Read once per render so every row in one paint agrees, and no timer has to tick on the
+        // tenant's page for the sake of "5m" becoming "6m".
+        const now = Date.now();
+        const body = this.items.length
+            ? `<ul id="tray-list" role="list">${this.items.map((item) => this.rowMarkup(item, now)).join('')}</ul>`
+            : `<div id="tray-empty">${escapeHtml(c.trayEmpty)}</div>`;
+        tray.setAttribute('role', 'dialog');
+        tray.setAttribute('aria-labelledby', 'tray-title');
+        tray.setAttribute('tabindex', '-1');
+        tray.setAttribute('part', 'tray');
+        tray.removeAttribute('hidden');
+        tray.innerHTML = `
+      <div id="tray-head">
+        <h2 id="tray-title">${escapeHtml(c.tray)}</h2>
+        <div id="tray-actions">
+          ${unread > 0 ? `<button id="tray-mark-all" data-action="mark-all-seen">${escapeHtml(c.markAllSeen)}</button>` : ''}
+          <button id="tray-sound" data-action="toggle-sound"
+                  aria-pressed="${muted}" aria-label="${escapeHtml(soundLabel)}"
+                  title="${escapeHtml(soundLabel)}">${muted ? '🔕' : '🔔'}</button>
+        </div>
+      </div>
+      ${body}`;
+    }
+    /**
+     * One row.
+     *
+     * <p>Everything interpolated here is tenant-authored — `previewText` is derived from their own
+     * popup body and routinely contains quotes and apostrophes, and `thumbnailUrl` is a free-text
+     * column — so the title, preview and time go through {@link escapeHtml} and the thumbnail through
+     * {@link sanitizeUrl}.
+     *
+     * <p>Each of the three optional parts is omitted rather than rendered blank when its data is
+     * missing. That covers both a new SDK talking to a backend without the fields and the tail of
+     * popups delivered before they existed.
+     */
+    rowMarkup(item, now) {
+        const c = this.copy;
+        const title = item.title ?? c.dialog;
+        const thumb = sanitizeUrl(item.thumbnailUrl);
+        const relative = formatRelative(item.deliveredAtEpochMs, now, c, this.lang);
+        const absolute = formatAbsolute(item.deliveredAtEpochMs, this.lang);
+        const iso = item.deliveredAtEpochMs ? new Date(item.deliveredAtEpochMs).toISOString() : '';
+        const isUnread = item.status !== 'VIEWED';
+        return `
+      <li class="np-row${isUnread ? ' np-row-unread' : ''}" data-id="${item.id}">
+        <button class="np-row-open" data-action="open-popup" data-id="${item.id}">
+          ${thumb ? `<img class="np-row-thumb" src="${escapeHtml(thumb)}" alt="" loading="lazy">` : ''}
+          <span class="np-row-text">
+            <span class="np-row-title">${escapeHtml(title)}</span>
+            ${item.previewText ? `<span class="np-row-preview">${escapeHtml(item.previewText)}</span>` : ''}
+            ${relative ? `<time class="np-row-time" datetime="${escapeHtml(iso)}" title="${escapeHtml(absolute)}">${escapeHtml(relative)}</time>` : ''}
+          </span>
+          ${isUnread ? `<span class="np-row-dot"><span class="np-sr">${escapeHtml(c.unread)}</span></span>` : ''}
+        </button>
+        <button class="np-row-x" data-action="dismiss-row" data-id="${item.id}"
+                aria-label="${escapeHtml(c.dismissRow.replace('{title}', title))}">×</button>
+      </li>`;
+    }
+    /**
+     * Places the panel against the bell.
+     *
+     * <p>`position: fixed` with coordinates written here, rather than `absolute` inside the wrap:
+     * fixed descendants are not clipped by an ancestor's `overflow: hidden`, which is what a tenant's
+     * sticky header almost always has. It does not escape a `transform`ed ancestor — the same
+     * documented limit the modal already carries — so the anchor element must not sit inside one.
+     *
+     * <h3>Why a default decides and geometry only refines</h3>
+     * jsdom has no layout: every `getBoundingClientRect()` is zeroes. Geometry-first logic would read
+     * that as "there is room below" and be silently right in tests while being wrong for a bell in a
+     * footer or a bottom bar. Defaulting first means the untestable path is the *refinement*, never
+     * the rule.
+     */
+    positionTray() {
+        const tray = this.launcherRoot?.getElementById('tray');
+        const launcher = this.launcherRoot?.getElementById('launcher');
+        if (!tray || !launcher || typeof window === 'undefined')
+            return;
+        // Anchors overwhelmingly sit in a header, with the whole page below them. Geometry corrects the
+        // exceptions — a footer or bottom bar — whenever the box is actually measurable.
+        const fallback = 'down';
+        const rect = launcher.getBoundingClientRect();
+        const measurable = rect.width > 0 || rect.height > 0;
+        let flip = fallback;
+        let left = 0;
+        let top = 0;
+        if (measurable) {
+            const fitsDown = rect.bottom + TRAY_MAX_HEIGHT_PX + TRAY_GAP_PX <= window.innerHeight;
+            const fitsUp = rect.top - TRAY_MAX_HEIGHT_PX - TRAY_GAP_PX >= 0;
+            flip = fitsDown && !fitsUp ? 'down' : fitsUp && !fitsDown ? 'up' : fallback;
+            // Right-align to a bell in the right half, so the panel opens inwards rather than off-screen.
+            const rightAligned = rect.left > window.innerWidth / 2;
+            const raw = rightAligned ? rect.right - TRAY_WIDTH_PX : rect.left;
+            left = Math.min(Math.max(raw, TRAY_GAP_PX), window.innerWidth - TRAY_WIDTH_PX - TRAY_GAP_PX);
+            top = flip === 'down' ? rect.bottom + TRAY_GAP_PX : rect.top - TRAY_GAP_PX - TRAY_MAX_HEIGHT_PX;
+            tray.style.left = `${Math.round(left)}px`;
+            tray.style.top = `${Math.round(Math.max(top, TRAY_GAP_PX))}px`;
         }
+        tray.setAttribute('data-flip', flip);
     }
     /**
      * A popup arrived while the visitor was already on the page. Without this the only signal is a
-     * small badge appearing in a corner nobody is looking at, so shake the launcher and play a short
-     * chime. Callers suppress it for first load, cache restore and the auto-open path — see
+     * small badge appearing among header icons nobody is looking at, so shake the launcher and play a
+     * short chime. Callers suppress it for first load, cache restore and the auto-open path — see
      * `PopupInbox.refresh`.
+     *
+     * <p>Silent with no anchor: there is no bell to shake. The chime still plays, since it is the one
+     * signal that does not need a button to land on.
      */
     notifyArrival() {
-        this.setLauncherHidden(false);
         this.renderLauncher();
         const launcher = this.launcherRoot?.getElementById('launcher');
         if (launcher) {
@@ -491,18 +710,14 @@ export class PopupViewer {
     shell(item, body, content) {
         const title = escapeHtml(content?.title ?? item.title ?? '');
         const buttons = content?.buttons ?? item.buttons ?? [];
-        const many = this.items.length > 1;
         const c = this.copy;
         return `
       <style id="variant-css"></style>
       <div class="np-backdrop" data-action="close"></div>
       <div class="np-modal" role="dialog" aria-modal="true" aria-label="${title || escapeHtml(c.dialog)}" tabindex="-1">
         <button class="np-chip np-close" data-action="close" aria-label="${escapeHtml(c.close)}">×</button>
-        ${many ? `<button class="np-chip np-nav np-prev" data-action="prev" aria-label="${escapeHtml(c.prev)}">‹</button>` : ''}
         <div class="np-stage">${body}</div>
-        ${many ? `<button class="np-chip np-nav np-next" data-action="next" aria-label="${escapeHtml(c.next)}">›</button>` : ''}
         <div class="np-underbar">
-          ${many ? `<div class="np-dots">${this.dotsMarkup()}</div>` : ''}
           ${this.ctaMarkup(buttons)}
           <button class="np-dismiss" data-action="dismiss">${escapeHtml(c.dismiss)}</button>
         </div>
@@ -519,11 +734,6 @@ export class PopupViewer {
         })
             .join('');
     }
-    dotsMarkup() {
-        return this.items
-            .map((_, i) => `<span class="np-dot${i === this.index ? ' np-dot-on' : ''}"></span>`)
-            .join('');
-    }
     isMobileViewport() {
         return typeof window !== 'undefined' && window.innerWidth < POPUP_MOBILE_BREAKPOINT_PX;
     }
@@ -538,14 +748,32 @@ export class PopupViewer {
         for (const node of path) {
             if (!(node instanceof HTMLElement))
                 continue;
+            // The bell now opens the list rather than a message — the visitor chooses which one.
             if (node.id === 'launcher') {
-                void this.open(undefined, 'manual');
+                this.toggleTray();
                 return;
             }
             const action = node.dataset['action'];
-            if (action === 'hide-launcher') {
-                this.setLauncherHidden(true);
-                this.renderLauncher();
+            if (action === 'open-popup') {
+                const chosen = this.items.find((candidate) => candidate.id === Number(node.dataset['id']));
+                this.closeTray({ restoreFocus: false });
+                if (chosen)
+                    void this.open(chosen.id, 'manual');
+                return;
+            }
+            if (action === 'dismiss-row') {
+                const chosen = this.items.find((candidate) => candidate.id === Number(node.dataset['id']));
+                if (chosen)
+                    this.callbacks.onDismissed(chosen, 'tray');
+                return;
+            }
+            if (action === 'mark-all-seen') {
+                this.callbacks.onMarkAllSeen();
+                return;
+            }
+            if (action === 'toggle-sound') {
+                PopupViewer.setSoundEnabled(!PopupViewer.soundEnabled());
+                this.renderTray();
                 return;
             }
             if (action === 'close') {
@@ -554,11 +782,7 @@ export class PopupViewer {
             }
             if (action === 'dismiss') {
                 if (item)
-                    this.callbacks.onDismissed(item);
-                return;
-            }
-            if (action === 'next' || action === 'prev') {
-                this.move(action);
+                    this.callbacks.onDismissed(item, 'modal');
                 return;
             }
             if (action === 'cta' && item) {
@@ -589,112 +813,50 @@ export class PopupViewer {
         this.close();
     }
     /**
-     * Moves the carousel by one, keeping the current popup on screen until the next one is ready.
-     *
-     * <p>This used to re-render the whole modal through {@link renderCurrent}, which tore the shell
-     * down to a loading placeholder before awaiting the content. Content is cached after its first
-     * fetch, so the await almost always resolved on the next microtask — but "almost always" still
-     * paints one frame of collapsed spinner, which is what read as a flicker. Loading first and
-     * swapping second means the visitor never sees an intermediate state.
+     * The tray branch runs before the modal's `visible` guard, because the two surfaces are never open
+     * at once and Escape has to mean "close what is in front of me" for both.
      */
-    move(direction) {
-        if (this.items.length < 2 || this.state !== 'visible')
-            return;
-        const from = this.items[this.index];
-        const delta = direction === 'next' ? 1 : -1;
-        // Stepped from the pending position, not the rendered one, so a burst of taps accumulates.
-        const nextIndex = (this.pendingIndex + delta + this.items.length) % this.items.length;
-        const next = this.items[nextIndex];
-        if (!next)
-            return;
-        this.pendingIndex = nextIndex;
-        this.callbacks.onCarouselMove(from, direction);
-        // Spamming the arrows must not let a slow load land after a later one and rewind the carousel.
-        const token = ++this.swapToken;
-        void this.callbacks.loadContent(next.id).then((content) => {
-            if (token !== this.swapToken || this.state !== 'visible')
-                return;
-            if (!content) {
-                // The index deliberately has not moved: a popup that cannot render must not become the
-                // carousel's position, or the dots would point at something the visitor cannot see.
-                // Intent rewinds to match, so the next tap steps from what is actually on screen.
-                this.pendingIndex = this.index;
-                this.callbacks.onRenderFailed(next, 'content_unavailable');
+    handleKeyDown(event) {
+        if (this.trayOpen) {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.closeTray();
                 return;
             }
-            this.index = nextIndex;
-            this.swapBody(next, content, direction);
-            this.callbacks.onOpened(next, 'manual');
-        });
-    }
-    /**
-     * Cross-slides the authored body, leaving the chrome untouched.
-     *
-     * <p>Only `.np-stage`'s children change, so the underbar, the chips and the dialog itself never
-     * re-render — the frame stays put while the content moves through it.
-     */
-    swapBody(item, content, direction) {
-        const stage = this.root?.querySelector('.np-stage');
-        if (!stage)
-            return;
-        const template = document.createElement('div');
-        template.innerHTML = this.bodyFor(item, content);
-        const incoming = template.firstElementChild;
-        if (!incoming)
-            return;
-        // Drop any ghost still animating from a previous move, so rapid clicks cannot stack them.
-        stage.querySelectorAll('.np-ghost').forEach((ghost) => ghost.remove());
-        const outgoing = stage.querySelector('.np-body');
-        if (outgoing) {
-            if (this.prefersReducedMotion()) {
-                outgoing.remove();
-            }
-            else {
-                // Sheds `np-body` as it leaves: while it kept the class there were momentarily two bodies,
-                // and everything that reaches for "the body" got the one on its way out.
-                outgoing.classList.remove('np-body');
-                outgoing.classList.add('np-ghost', direction === 'next' ? 'np-leave-left' : 'np-leave-right');
-                const drop = () => outgoing.remove();
-                outgoing.addEventListener('animationend', drop, { once: true });
-                // `animationend` does not fire if the animation never starts or is cancelled — a hidden
-                // tab, a cancelled paint. Without this the ghost would sit over the popup for good.
-                window.setTimeout(drop, GHOST_TTL_MS);
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Home' || event.key === 'End') {
+                this.moveTrayFocus(event);
             }
+            // Tab is deliberately not trapped: a tray is a non-modal popover, and holding focus inside a
+            // header dropdown strands keyboard visitors in the tenant's own chrome.
+            return;
         }
-        if (!this.prefersReducedMotion()) {
-            incoming.classList.add(direction === 'next' ? 'np-enter-right' : 'np-enter-left');
-        }
-        stage.appendChild(incoming);
-        // Both bodies share one `<style>`, so during the overlap the outgoing one is briefly styled by
-        // its successor's CSS. Visible only where two templates differ sharply, and the alternative —
-        // a second style element scoped per body — costs more than the artefact it removes.
-        this.applyVariantCss(content);
-        this.syncDots();
-    }
-    /** Repoints the dots without rebuilding them, so the underbar never repaints mid-swipe. */
-    syncDots() {
-        const dots = this.root?.querySelectorAll('.np-dot');
-        dots?.forEach((dot, i) => dot.classList.toggle('np-dot-on', i === this.index));
-    }
-    prefersReducedMotion() {
-        return (typeof window !== 'undefined' &&
-            typeof window.matchMedia === 'function' &&
-            window.matchMedia('(prefers-reduced-motion: reduce)').matches);
-    }
-    handleKeyDown(event) {
         if (this.state !== 'visible')
             return;
         if (event.key === 'Escape') {
             this.close();
             return;
         }
-        if (event.key === 'ArrowRight')
-            this.move('next');
-        if (event.key === 'ArrowLeft')
-            this.move('prev');
         if (event.key === 'Tab')
             this.trapFocus(event);
     }
+    /** Roving focus between rows — the muscle memory the removed carousel arrows used to serve. */
+    moveTrayFocus(event) {
+        const rows = Array.from(this.launcherRoot?.querySelectorAll('.np-row-open') ?? []);
+        if (rows.length === 0)
+            return;
+        event.preventDefault();
+        const current = rows.indexOf(this.launcherRoot?.activeElement);
+        let next;
+        if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = rows.length - 1;
+        else if (event.key === 'ArrowDown')
+            next = current < 0 ? 0 : (current + 1) % rows.length;
+        else
+            next = current < 0 ? rows.length - 1 : (current - 1 + rows.length) % rows.length;
+        rows[next].focus();
+    }
     /** Keeps keyboard focus inside the dialog while it is open. */
     trapFocus(event) {
         const focusable = this.root?.querySelectorAll('a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -715,18 +877,6 @@ export class PopupViewer {
     focusDialog() {
         this.root?.querySelector('.np-modal')?.focus();
     }
-    handleTouchStart(event) {
-        this.touchStartX = event.touches[0]?.clientX ?? null;
-    }
-    handleTouchEnd(event) {
-        if (this.touchStartX === null || this.items.length < 2)
-            return;
-        const delta = (event.changedTouches[0]?.clientX ?? this.touchStartX) - this.touchStartX;
-        this.touchStartX = null;
-        if (Math.abs(delta) < 50)
-            return;
-        this.move(delta < 0 ? 'next' : 'prev');
-    }
 }
 /**
  * Chrome only. The authored body brings its own CSS, injected separately into `#variant-css`.
@@ -764,34 +914,9 @@ const CHROME_CSS = `
   @media (max-width: 767px) {
     .np-modal { width: 96vw; max-width: 96vw; max-height: 90dvh; }
   }
-  /* Positioned so the outgoing body can be lifted out of flow and slide across without the stage
-     stretching to hold both at once. */
+  /* Owns the body's scroll container, and the min-height:0 that lets it actually shrink. */
   .np-stage { position: relative; display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
   .np-body { overflow: auto; flex: 1 1 auto; }
-  /* Out of flow, so the stage sizes to the incoming body alone. */
-  .np-ghost {
-    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
-  }
-  .np-enter-right { animation: np-in-right 260ms cubic-bezier(.22,.61,.36,1) both; }
-  .np-enter-left  { animation: np-in-left  260ms cubic-bezier(.22,.61,.36,1) both; }
-  .np-leave-left  { animation: np-out-left  260ms cubic-bezier(.55,.06,.68,.19) both; }
-  .np-leave-right { animation: np-out-right 260ms cubic-bezier(.55,.06,.68,.19) both; }
-  @keyframes np-in-right {
-    from { transform: translateX(28%); opacity: 0; }
-    to   { transform: translateX(0);   opacity: 1; }
-  }
-  @keyframes np-in-left {
-    from { transform: translateX(-28%); opacity: 0; }
-    to   { transform: translateX(0);    opacity: 1; }
-  }
-  @keyframes np-out-left {
-    from { transform: translateX(0);    opacity: 1; }
-    to   { transform: translateX(-28%); opacity: 0; }
-  }
-  @keyframes np-out-right {
-    from { transform: translateX(0);   opacity: 1; }
-    to   { transform: translateX(28%); opacity: 0; }
-  }
   .np-surface { background: #fff; border-radius: 12px; padding: 24px; }
   .np-fallback { font-size: 18px; text-align: center; }
   .np-loading { text-align: center; color: #888; }
@@ -810,9 +935,6 @@ const CHROME_CSS = `
   /* Inside the card's own corner rather than hanging off it: outside, the chip lands on the
      tenant's page and reads as page furniture instead of part of the popup. */
   .np-close { top: 10px; right: 10px; width: 30px; height: 30px; font-size: 18px; }
-  .np-nav { top: 50%; transform: translateY(-50%); width: 34px; height: 34px; font-size: 20px; }
-  .np-prev { left: 10px; }
-  .np-next { right: 10px; }
   /* Attached to the card rather than floating below it: with no surface of its own the chrome
      reads as stray page content, especially over a busy host page. */
   .np-underbar {
@@ -832,13 +954,9 @@ const CHROME_CSS = `
     font-size: 13px; cursor: pointer; text-decoration: underline; font-family: inherit;
     padding: 0;
   }
-  .np-dots { display: flex; gap: 6px; align-items: center; }
-  .np-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); }
-  .np-dot-on { background: #fff; }
   @media (prefers-reduced-motion: reduce) {
     .np-modal, .np-backdrop { transition: none !important; animation: none !important; }
-    /* Belt and braces: swapBody already skips the classes, but a body inserted before the media
-       query is re-evaluated must not animate either. */
+    /* The authored body brings its own CSS and may animate on its own account. */
     .np-body { animation: none !important; }
   }
 `;
@@ -850,49 +968,123 @@ const CHROME_CSS = `
  * resolve per shadow root, so a rule in one root cannot reference an animation declared in another.
  */
 const LAUNCHER_CSS = `
-  :host { all: initial; }
-  /* \`all: initial\` computes \`display: inline\`, which would collapse the button's box when the
-     host sits in the tenant's own flow. Only the anchored case needs the correction — floating
-     positions the wrap absolutely, so the host's own display never matters there.
+  /* \`all: initial\` computes \`display: inline\`, which would collapse the button's box inside the
+     tenant's own flow, so the display is restored here.
+
+     \`color\` is deliberately let back in past that same reset: the launcher has no surface of its
+     own, so the glyph has to take the tenant's text colour or it is invisible on a dark header. */
+  :host { all: initial; display: inline-block; vertical-align: middle; color: inherit; }
+  /* Positioning belongs to the tenant's layout — the launcher sits in a slot they marked. The wrap
+     keeps its own \`part\` so either half can be restyled from their page. */
+  #launcher-wrap { position: static; }
+  /* The launcher is one icon among the tenant's own header actions, not a widget sitting on top of
+     their page, so it carries no disc and imposes no colour of its own.
 
-     \`color\` is deliberately let back in past that same reset, and only here: an anchored launcher
-     has no surface of its own, so the glyph has to take the tenant's own text colour or it would
-     be invisible on a dark header. Higher specificity than the \`:host\` reset above, so it wins. */
-  :host([data-anchored]) { display: inline-block; vertical-align: middle; color: inherit; }
-  /* The wrap carries the position so the hide chip has something to anchor to; the button keeps
-     its own \`part\` so a tenant can restyle either half from their page. Bottom-LEFT by default —
-     bottom-right is where our own chatbot embed and most third-party widgets live. */
-  #launcher-wrap { position: fixed; left: 20px; bottom: 20px; z-index: 2147483645; }
-  /* Anchored: hand positioning back to the tenant's layout. The badge still lands on the button's
-     corner because the button itself stays \`position: relative\`. */
-  :host([data-anchored]) #launcher-wrap { position: static; }
-  /* \`box-sizing\` and \`padding\` are explicit because the UA button stylesheet otherwise adds its
-     own padding outside a content-box width, inflating the circle past the size set here. */
+     \`box-sizing\` and \`padding\` are explicit because the UA button stylesheet otherwise adds its
+     own padding outside a content-box width, inflating the box past the size set here. */
   #launcher {
     position: relative; box-sizing: border-box; padding: 0;
     display: flex; align-items: center; justify-content: center;
-    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
-    background: #111; color: #fff; font-size: 22px;
+    width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
+    background: transparent; color: inherit; font-size: 20px;
   }
-  /* Sized in \`em\` so the bell follows the button down to its smaller anchored size. */
+  /* Sized in \`em\` so the glyph tracks the button if a tenant restyles its size through \`part\`. */
   #launcher svg { width: 1.1em; height: 1.1em; display: block; }
-  /* Anchored, the launcher is one icon among the tenant's own header actions, not a widget sitting
-     on top of their page: it drops the dark disc entirely and takes their text colour, so it
-     inherits their theme instead of imposing ours. The glyph runs larger than the floating
-     \`1.1em\` would give at this size, because without a surface behind it there is nothing to
-     anchor the eye. The badge keeps its red, which is the one thing that must not blend in. */
-  :host([data-anchored]) #launcher {
-    width: 36px; height: 36px; font-size: 20px;
-    background: transparent; color: inherit;
-  }
+  /* The badge keeps its red, which is the one thing that must not blend into the tenant's theme. */
   #badge {
     position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
     border-radius: 10px; background: #e5484d; color: #fff; font-size: 12px; line-height: 20px;
   }
-  #launcher-hide {
-    position: absolute; top: -6px; left: -6px; width: 18px; height: 18px;
-    border-radius: 50%; border: 0; cursor: pointer; padding: 0;
-    background: #555; color: #fff; font-size: 12px; line-height: 18px;
+
+  /* ── Notification tray ──────────────────────────────────────────────────────
+     \`fixed\`, with coordinates written by positionTray(): fixed descendants are not clipped by an
+     ancestor's \`overflow: hidden\`, which is what a tenant's sticky header almost always carries.
+     Both \`hidden\` and \`display: none\` — \`hidden\` alone loses to the \`display: flex\` below,
+     and a laid-out empty panel would push the tenant's own header around. */
+  #tray[hidden] { display: none; }
+  #tray {
+    position: fixed; z-index: 2147483645;
+    box-sizing: border-box;
+    width: ${TRAY_WIDTH_PX}px; max-width: calc(100vw - ${TRAY_GAP_PX * 2}px);
+    max-height: ${TRAY_MAX_HEIGHT_PX}px;
+    display: flex; flex-direction: column; overflow: hidden;
+    background: #fff; color: #111;
+    border-radius: 14px; border: 1px solid rgba(15,23,42,.10);
+    box-shadow: 0 12px 32px rgba(0,0,0,.22);
+    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+    text-align: left;
+  }
+  /* The panel grows away from the bell, so the transform origin follows the flip. No JS needed to
+     retrigger this: going from \`display: none\` to displayed restarts a CSS animation, which is
+     exactly why this is an \`animation\` and not a \`transition\`. */
+  #tray[data-flip="up"]   { transform-origin: bottom center; animation: np-tray-in 140ms ease-out; }
+  #tray[data-flip="down"] { transform-origin: top center;    animation: np-tray-in 140ms ease-out; }
+  @keyframes np-tray-in {
+    from { opacity: 0; transform: scale(.96); }
+    to   { opacity: 1; transform: scale(1); }
+  }
+  #tray-head {
+    display: flex; align-items: center; justify-content: space-between; gap: 8px;
+    padding: 12px 14px; border-bottom: 1px solid rgba(15,23,42,.08); flex: 0 0 auto;
+  }
+  #tray-title { margin: 0; font-size: 15px; font-weight: 600; }
+  #tray-actions { display: flex; align-items: center; gap: 6px; }
+  #tray-mark-all {
+    background: transparent; border: 0; padding: 0; cursor: pointer;
+    color: #2563eb; font-size: 12px; font-family: inherit; text-decoration: underline;
+  }
+  #tray-sound {
+    background: transparent; border: 0; padding: 2px; cursor: pointer;
+    font-size: 14px; line-height: 1; font-family: inherit;
+  }
+  #tray-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; flex: 1 1 auto; }
+  #tray-empty { padding: 28px 14px; text-align: center; color: #6b7280; font-size: 13px; }
+  .np-row { display: flex; align-items: flex-start; border-bottom: 1px solid rgba(15,23,42,.06); }
+  .np-row:last-child { border-bottom: 0; }
+  .np-row-open {
+    flex: 1 1 auto; display: flex; align-items: flex-start; gap: 10px;
+    padding: 12px 4px 12px 14px; background: transparent; border: 0; cursor: pointer;
+    font-family: inherit; text-align: left; color: inherit; min-width: 0;
+  }
+  .np-row-open:hover { background: rgba(15,23,42,.035); }
+  .np-row-thumb {
+    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
+  }
+  .np-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
+  /* Two lines, then ellipsis: rows must stay a scannable list, and a long authored title would
+     otherwise push the rest of the inbox off the panel. */
+  .np-row-title {
+    font-size: 13px; font-weight: 600; line-height: 1.35;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  }
+  .np-row-preview {
+    font-size: 12px; color: #6b7280; line-height: 1.35;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+  }
+  .np-row-time { font-size: 11px; color: #9ca3af; }
+  .np-row-dot {
+    width: 8px; height: 8px; border-radius: 50%; background: #2563eb;
+    flex: 0 0 auto; margin-top: 6px;
+  }
+  /* Visually hidden but still announced — the dot alone carries no meaning for a screen reader. */
+  .np-sr {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+  }
+  .np-row-x {
+    flex: 0 0 auto; align-self: center; margin-right: 8px;
+    width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
+    background: transparent; color: #9ca3af; font-size: 15px; line-height: 1; font-family: inherit;
+  }
+  .np-row-x:hover { background: rgba(15,23,42,.07); color: #374151; }
+  #tray :focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
+  @media (prefers-color-scheme: dark) {
+    #tray { background: #1f2430; color: #f3f4f6; border-color: rgba(255,255,255,.12); }
+    #tray-head { border-bottom-color: rgba(255,255,255,.10); }
+    .np-row { border-bottom-color: rgba(255,255,255,.08); }
+    .np-row-open:hover { background: rgba(255,255,255,.05); }
+    .np-row-preview { color: #9ca3af; }
+    .np-row-x:hover { background: rgba(255,255,255,.10); color: #e5e7eb; }
   }
   /* Rings continuously for as long as anything is unread — the launcher only exists in that
      state, so there is no case where this animates over nothing. */
@@ -914,7 +1106,7 @@ const LAUNCHER_CSS = `
     100% { transform: scale(1); }
   }
   @media (prefers-reduced-motion: reduce) {
-    #launcher, #badge { transition: none !important; animation: none !important; }
+    #launcher, #badge, #tray { transition: none !important; animation: none !important; }
   }
 `;
 //# sourceMappingURL=popup-viewer.js.map