malice

<script lang="ts">

  import { get } from 'svelte/store';

  import { onDestroy, onMount, tick } from 'svelte';

  import { getMembers, mentionContext, mentionsPage, recoverMentions, retryMentionContext, setMentionsRead, markMentionsReadThrough } from './api';

  import ContextTimeline from './ContextTimeline.svelte';

  import EmojiText from './EmojiText.svelte';

  import MessageRow from './MessageRow.svelte';

  import { mentionsSnapshot, publishMentionsPage, rooms, sessionUser } from './store';

  import { TimelineViewport } from './timeline-viewport';

  import { ApiError } from './transport';

  import type { TimelineItem } from './types';

  import { mentionKey } from './mentions-model';

  import { contextWithProfiles, roomsLackingProfiles, withProfiles } from './mention-profiles';

  import type { RoomProfiles } from './mention-profiles';

  import type { MentionEntry, MentionsPage, SavedMentionContext } from './mentions-model';

  export let self: string;

  export let onLive: (roomId: string, eventId: string, threadRoot: string | null) => void;

  let page: MentionsPage | null = null;

  let entries: MentionEntry[] = [];

  let selected: MentionEntry | null = null;

  let saved: SavedMentionContext | null = null;

  let list: HTMLDivElement;

  let viewport: TimelineViewport | null = null;

  let observer: ResizeObserver | null = null;

  let error = '';

  let busy = false;

  let actionBusy = false;

  let loadingContext = false;

  let mounted = false;

  let alive = true;

  let generation = 0;

  let contextGeneration = 0;

  let depth = 1;

  let pendingRevision = 0;

  let refreshTimer: ReturnType<typeof setTimeout> | null = null;

  let renderedAccount = '';

  let selectedRevision = -1;

  let contextKey = '';

  let contextRequest: { key: string; revision: number } | null = null;

  let queuedContext: MentionEntry | null = null;

  let pendingExplicitOpen = false;

  let savedListTop = 0;

  let roomProfiles: RoomProfiles = {};

  let profileRequests = new Set<string>();

  $: unreadCount = $mentionsSnapshot?.boundary.account === self ? $mentionsSnapshot.unread_count : page?.unread_count ?? 0;

  $: joinedRooms = new Map($rooms.filter((room) => room.membership === 'Joined').map((room) => [room.room_id, room]));

  $: selectedRoom = selected ? joinedRooms.get(selected.key.room_id) : undefined;

  $: contextCanPaginate = !!selectedRoom;

  $: requestProfiles([

    ...entries.map((entry) => ({ roomId: entry.key.room_id, item: entry.event })),

    ...(selected && saved?.context ? [...saved.context.events_before, saved.context.event, ...saved.context.events_after].map((item) => ({ roomId: selected!.key.room_id, item })) : [])

  ], joinedRooms);

  function itemEvent(item: TimelineItem) {

    return item.kind === 'event' ? item.event : null;

  }

  function roomName(entry: MentionEntry): string {

    return entry.room_name || joinedRooms.get(entry.key.room_id)?.name || entry.key.room_id;

  }

  const GAP_LABELS: Record<string, string> = {

    SyncDiscontinuity: 'Sync was interrupted',

    LimitedTimeline: 'Too many messages arrived at once',

    RoomLeft: 'You left the room',

    ContextUnavailable: 'Context could not be loaded',

    NotificationHistoryUnavailable: 'Notification history unavailable',

    CandidateExpired: 'A message could not be read',

    StoreReset: 'Inbox was reset',

    StoreFailed: 'Inbox could not be saved',

    HookTimedOut: 'Checking a message timed out'

  };

  function gapLabel(reason: string): string {

    return GAP_LABELS[reason] ?? reason;

  }

  function reasonLabel(reason: string): string {

    return reason === 'Direct' ? 'Direct mention' : reason === 'Reply' ? 'Reply' : reason === 'Keyword' ? 'Keyword' : 'Room mention';

  }

  function captureLabel(state: MentionEntry['capture']): string {

    if (state.kind === 'Failed') return state.message;

    return state.kind === 'Ready' ? 'Context saved' : state.kind === 'Partial' ? 'Partial context saved' : state.kind === 'Pending' ? 'Saving context' : 'Context unavailable';

  }

  function keyOf(entry: MentionEntry): string { return mentionKey(entry.key); }

  function requestProfiles(items: { roomId: string; item: TimelineItem }[], joined: Map<string, unknown>): void {

    const account = self;

    const requests = profileRequests;

    for (const roomId of roomsLackingProfiles(items)) {

      if (requests.has(roomId) || !joined.has(roomId)) continue;

      requests.add(roomId);

      getMembers(roomId).then(({ members }) => {

        if (currentAccount(account) && requests === profileRequests) roomProfiles = { ...roomProfiles, [roomId]: Object.fromEntries(members.map((member) => [member.user_id, member])) };

      }, () => requests.delete(roomId));

    }

  }

  function bindViewport(node: HTMLDivElement) {

    list = node;

    viewport?.releaseScroll();

    observer?.disconnect();

    node.scrollTop = savedListTop;

    viewport = new TimelineViewport(node, null);

    const content = node.querySelector<HTMLElement>('.entry-content');

    observer = new ResizeObserver(() => viewport?.restore());

    if (content) observer.observe(content);

    void tick().then(() => {

      if (!alive || selected || list !== node) return;

      node.scrollTop = savedListTop;

      viewport?.capture();

    });

    return {

      destroy() {

        if (!selected) savedListTop = node.scrollTop;

        observer?.disconnect();

        observer = null;

        viewport?.releaseScroll();

        viewport = null;

      }

    };

  }

  function openContext(entry: MentionEntry): void {

    if (!selected) savedListTop = list?.scrollTop ?? savedListTop;

    void loadContext(entry);

  }

  function currentAccount(account: string): boolean {

    return alive && account === self && get(sessionUser) === account;

  }

  function captureViewport(): void { viewport?.capture(); }

  async function restoreViewport(): Promise<void> {

    await tick();

    if (alive) viewport?.restore();

  }

  async function fetchPage(cursor: string | null): Promise<MentionsPage> {

    return mentionsPage(cursor, 50);

  }

  async function fetchRange(targetDepth: number, request: number, account: string): Promise<void> {

    busy = true;

    error = '';

    const anchorPage = page;

    const anchorRevision = anchorPage?.revision ?? 0;

    let succeeded = false;

    try {

      const first = await fetchPage(null);

      if (!currentAccount(account) || request !== generation || first.boundary.account !== account) return;

      const firstSnapshot = first;

      const gathered = [...first.entries];

      let loadedDepth = 1;

      let cursor = first.next_cursor;

      let last = first;

      for (let index = 1; index < targetDepth && cursor; index++) {

        last = await fetchPage(cursor);

        if (!currentAccount(account) || request !== generation || last.boundary.account !== account) return;

        gathered.push(...last.entries);

        loadedDepth++;

        cursor = last.next_cursor;

      }

      const mirror = get(mentionsSnapshot);

      if (mirror?.boundary.account === account && mirror.revision > firstSnapshot.revision) {

        pendingRevision = Math.max(pendingRevision, mirror.revision);

      }

      if (firstSnapshot.revision < anchorRevision) return;

      captureViewport();

      const unique = new Map<string, MentionEntry>();

      for (const entry of gathered) unique.set(keyOf(entry), entry);

      if (mirror?.boundary.account === account) {

        for (const update of mirror.entries) {

          const key = keyOf(update);

          const previous = unique.get(key);

          if (previous && update.revision >= previous.revision) unique.set(key, update);

        }

      }

      const replacement = [...unique.values()];

      page = { ...firstSnapshot, next_cursor: last.next_cursor, end_reached: last.end_reached, entries: replacement };

      entries = replacement;

      if (selected) {

        const latestSelected = replacement.find((entry) => keyOf(entry) === keyOf(selected!));

        if (latestSelected && latestSelected.revision > selected.revision) selected = latestSelected;

        void loadContext(selected, false);

      }

      publishMentionsPage(firstSnapshot);

      if (pendingRevision <= firstSnapshot.revision) pendingRevision = 0;

      depth = loadedDepth;

      succeeded = true;

      await restoreViewport();

    } catch (cause) {

      if (currentAccount(account) && request === generation) error = cause instanceof Error ? cause.message : 'Could not load mentions';

    } finally {

      if (currentAccount(account) && request === generation) {

        busy = false;

        if (succeeded && pendingRevision > (page?.revision ?? 0)) scheduleRefresh(pendingRevision);

      }

    }

  }

  function scheduleRefresh(revision: number): void {

    pendingRevision = Math.max(pendingRevision, revision);

    if (busy || !mounted) return;

    if (refreshTimer) clearTimeout(refreshTimer);

    refreshTimer = setTimeout(() => {

      refreshTimer = null;

      if (!alive || busy) return;

      const request = ++generation;

      void fetchRange(Math.max(1, depth), request, self);

    }, 200);

  }

  async function loadMore(): Promise<void> {

    if (!page?.next_cursor || page.end_reached || busy) return;

    const cursor = page.next_cursor;

    const request = ++generation;

    const account = self;

    busy = true;

    error = '';

    let succeeded = false;

    try {

      const next = await fetchPage(cursor);

      if (!currentAccount(account) || request !== generation || next.boundary.account !== account) return;

      const current = page;

      if (!current || next.revision < current.revision) return;

      captureViewport();

      const unique = new Map(entries.map((entry) => [keyOf(entry), entry]));

      for (const entry of next.entries) unique.set(keyOf(entry), entry);

      page = { ...current, next_cursor: next.next_cursor, end_reached: next.end_reached, entries: [...unique.values()] };

      entries = page.entries;

      const mirror = get(mentionsSnapshot);

      if (mirror?.boundary.account === account) {

        for (const update of mirror.entries) {

          const key = keyOf(update);

          const previous = unique.get(key);

          if (previous && update.revision >= previous.revision) unique.set(key, update);

        }

        entries = [...unique.values()];

        page = { ...page, entries };

      }

      depth++;

      succeeded = true;

      await restoreViewport();

    } catch (cause) {

      if (currentAccount(account) && request === generation) error = cause instanceof Error ? cause.message : 'Could not load mentions';

    } finally {

      if (currentAccount(account) && request === generation) {

        busy = false;

        if (succeeded && pendingRevision > (page?.revision ?? 0)) scheduleRefresh(pendingRevision);

      }

    }

  }

  async function loadContext(entry: MentionEntry, explicit = true): Promise<void> {

    const id = keyOf(entry);

    if (explicit) pendingExplicitOpen = true;

    if (contextRequest?.key === id) {

      if (entry.revision > contextRequest.revision) queuedContext = entry;

      return;

    }

    if (contextKey !== id) {

      if (!selected) savedListTop = list?.scrollTop ?? savedListTop;

      saved = null;

      selectedRevision = -1;

    }

    contextKey = id;

    selectedRevision = entry.revision;

    selected = entry;

    loadingContext = true;

    error = '';

    const account = self;

    const request = ++contextGeneration;

    contextRequest = { key: id, revision: entry.revision };

    try {

      const result = await mentionContext(entry.key.room_id, entry.key.event_id);

      if (!currentAccount(account) || request !== contextGeneration || contextKey !== id || mentionKey(result.key) !== id) return;

      saved = result;

      if (pendingExplicitOpen) {

        pendingExplicitOpen = false;

        const current = entries.find((item) => keyOf(item) === id);

        if (current && !current.read) {

          await setMentionsRead([current.key], true);

          if (currentAccount(account) && request === contextGeneration) scheduleRefresh(get(mentionsSnapshot)?.revision ?? page?.revision ?? 0);

        }

      }

    } catch (cause) {

      if (currentAccount(account) && request === contextGeneration) {

        pendingExplicitOpen = false;

        if (cause instanceof ApiError && cause.status === 404) {

          backToList();

          error = 'This mention is no longer available';

          scheduleRefresh(page?.revision ?? 0);

        } else {

          error = cause instanceof Error ? cause.message : 'Could not load saved context';

        }

      }

    } finally {

      if (currentAccount(account) && request === contextGeneration) {

        contextRequest = null;

        loadingContext = false;

        const queued = queuedContext;

        queuedContext = null;

        if (queued && keyOf(queued) === id && queued.revision !== selectedRevision) void loadContext(queued, false);

      }

    }

  }

  async function setRead(entry: MentionEntry, read: boolean): Promise<void> {

    if (actionBusy) return;

    actionBusy = true;

    const account = self;

    try {

      await setMentionsRead([entry.key], read);

      if (!currentAccount(account)) return;

      const mirror = get(mentionsSnapshot);

      if (mirror?.boundary.account === account) scheduleRefresh(mirror.revision);

      else scheduleRefresh((page?.revision ?? 0) + 1);

    } catch (cause) {

      if (currentAccount(account)) error = cause instanceof Error ? cause.message : 'Could not update mention';

    } finally {

      if (currentAccount(account)) actionBusy = false;

    }

  }

  async function markAllRead(): Promise<void> {

    if (!page || actionBusy) return;

    actionBusy = true;

    const account = self;

    const boundary = page.boundary;

    try {

      await markMentionsReadThrough(boundary);

      if (!currentAccount(account)) return;

      const mirror = get(mentionsSnapshot);

      scheduleRefresh(mirror?.boundary.account === account ? mirror.revision : page?.revision ?? 0);

    } catch (cause) {

      if (currentAccount(account)) error = cause instanceof Error ? cause.message : 'Could not mark mentions read';

    } finally {

      if (currentAccount(account)) actionBusy = false;

    }

  }

  async function recover(): Promise<void> {

    if (actionBusy) return;

    actionBusy = true;

    const account = self;

    try {

      await recoverMentions();

      if (!currentAccount(account)) return;

      scheduleRefresh(get(mentionsSnapshot)?.revision ?? page?.revision ?? 0);

    } catch (cause) {

      if (currentAccount(account)) error = cause instanceof Error ? cause.message : 'Could not recover mention history';

    } finally {

      if (currentAccount(account)) actionBusy = false;

    }

  }

  async function retryCapture(): Promise<void> {

    if (!selected || !selectedRoom || actionBusy || loadingContext) return;

    actionBusy = true;

    const request = contextGeneration;

    const account = self;

    try {

      const result = await retryMentionContext(selected.key.room_id, selected.key.event_id);

      if (!currentAccount(account) || request !== contextGeneration || mentionKey(result.key) !== contextKey) return;

      saved = result;

      scheduleRefresh(get(mentionsSnapshot)?.revision ?? page?.revision ?? 0);

    } catch (cause) {

      if (currentAccount(account) && request === contextGeneration) error = cause instanceof Error ? cause.message : 'Could not retry context capture';

    } finally {

      if (currentAccount(account)) actionBusy = false;

    }

  }

  async function retryEntry(entry: MentionEntry): Promise<void> {

    if (selected?.revision !== entry.revision || keyOf(selected) !== keyOf(entry)) await loadContext(entry, false);

    else await tick();

    await retryCapture();

  }

  function backToList(): void {

    contextGeneration++;

    contextRequest = null;

    queuedContext = null;

    loadingContext = false;

    pendingExplicitOpen = false;

    selected = null;

    saved = null;

    contextKey = '';

  }

  const unsubscribe = mentionsSnapshot.subscribe((snapshot) => {

    if (!snapshot || snapshot.boundary.account !== self) return;

    if (snapshot.revision < (page?.revision ?? -1)) return;

    const updated = new Map(snapshot.entries.map((entry) => [keyOf(entry), entry]));

    if (entries.length) {

      captureViewport();

      entries = entries.map((entry) => {

        const update = updated.get(keyOf(entry));

        return update && update.revision >= entry.revision ? update : entry;

      });

      if (page) page = { ...page, entries };

      void restoreViewport();

    }

    if (selected) {

      const update = snapshot.entries.find((entry) => keyOf(entry) === keyOf(selected!));

      if (update && update.revision > selected.revision) selected = update;

    }

    if (busy) {

      pendingRevision = Math.max(pendingRevision, snapshot.revision);

      return;

    }

    if (!page || snapshot.revision > page.revision) scheduleRefresh(snapshot.revision);

  });

  $: if (self && self !== renderedAccount) {

    generation++;

    contextGeneration++;

    page = null;

    entries = [];

    error = '';

    selected = null;

    saved = null;

    depth = 1;

    busy = false;

    actionBusy = false;

    loadingContext = false;

    contextRequest = null;

    queuedContext = null;

    pendingExplicitOpen = false;

    pendingRevision = 0;

    savedListTop = 0;

    roomProfiles = {};

    profileRequests = new Set();

    if (refreshTimer) clearTimeout(refreshTimer);

    renderedAccount = self;

    if (mounted) void fetchRange(1, generation, self);

  }

  $: if (selected && selected.revision !== selectedRevision) void loadContext(selected, false);

  onMount(() => {

    mounted = true;

    if (!page) void fetchRange(1, ++generation, self);

  });

  onDestroy(() => {

    alive = false;

    generation++;

    contextGeneration++;

    unsubscribe();

    observer?.disconnect();

    viewport?.releaseScroll();

    if (refreshTimer) clearTimeout(refreshTimer);

  });

</script>

<section class="mentions-inbox">

  {#if selected}

    {#if error}<div class="error" role="alert"><EmojiText text={error} /><button disabled={loadingContext} onclick={() => void loadContext(selected!)}>Retry</button></div>{/if}

    {#if saved?.context}

      <ContextTimeline context={contextWithProfiles(saved.context, roomProfiles[selected.key.room_id])} roomId={selected.key.room_id} eventId={selected.key.event_id} roomName={roomName(selected)} {self} canPaginate={contextCanPaginate} onClose={backToList} {onLive} />

      {#if selected.capture.kind === 'Partial' || selected.capture.kind === 'Failed' || selected.capture.kind === 'Unavailable' || saved.state.kind === 'Partial' || saved.state.kind === 'Failed'}<button class="capture-retry" disabled={!selectedRoom || actionBusy} onclick={retryCapture}>Retry context capture</button>{/if}

      {#if !contextCanPaginate}<p class="status">This room is no longer joined. Saved context remains available.</p>{/if}

      {#if saved.state.kind === 'Partial'}<p class="status">This saved context is partial.</p>{/if}

      {#if saved.state.kind === 'Pending'}<p class="status">Saving context…</p>{/if}

      {#if saved.state.kind === 'Failed'}<p class="status" role="alert"><EmojiText text={saved.state.message} /></p>{/if}

    {:else}

      <header><button onclick={backToList}>Back to mentions</button><strong><EmojiText text={roomName(selected)} /></strong></header>

      {#if loadingContext}<p class="status">Loading saved context…</p>

      {:else if saved?.state.kind === 'Failed'}<p class="status" role="alert"><EmojiText text={saved.state.message} /></p>

      {:else if saved?.state.kind === 'Unavailable'}<p class="status">Saved context is unavailable.</p>

      {:else if saved?.state.kind === 'Partial'}<p class="status">Saved context is partial and currently unavailable.</p>

      {:else}<p class="status">Saved context is not available yet.</p>{/if}

      {@const preview = itemEvent(withProfiles(selected.event, roomProfiles[selected.key.room_id]))}

      {#if preview}<MessageRow itemId={preview.item_id} event={preview} showSender={true} reacting={false} onReact={() => {}} readOnly={true} showSent={false} {self} senderAvatar={preview.sender.avatar} />{/if}

      {#if selected.capture.kind === 'Failed' || selected.capture.kind === 'Partial' || selected.capture.kind === 'Unavailable'}

        <button disabled={!selectedRoom || actionBusy} onclick={retryCapture}>Retry context capture</button>

      {/if}

    {/if}

  {:else}

    <header><h2>Mentions {#if page}<span>({unreadCount} unread)</span>{/if}</h2><button disabled={!page || unreadCount === 0 || actionBusy} onclick={markAllRead}>Mark all read</button></header>

    <details class="coverage">

      <summary>{page?.coverage.recovering ? 'Recovering mention history…' : 'History coverage'}{#if page?.coverage.gaps.length} · Incomplete{/if}</summary>

      <div class="coverage-body">

        {#if page}

          {#if page.coverage.recovering}<p>History recovery is in progress.</p>{/if}

          {#if page.coverage.truncated}<p>Results are truncated.</p>{/if}

          {#if page.coverage.historical_supported === false}<p>Historical mention search is unsupported.</p>{/if}

          {#if page.coverage.unresolved_candidates}<p>{page.coverage.unresolved_candidates} possible mentions could not be resolved.</p>{/if}

          {#if page.coverage.gaps.length}<p>{page.coverage.gaps.length} history gaps remain.</p>{/if}

          {#if page.coverage.earliest_timestamp_ms}<p>Oldest observed event from {new Date(page.coverage.earliest_timestamp_ms).toLocaleString()}.</p>{/if}

          {#each page.coverage.gaps as gap}<p><EmojiText text={gap.room_id ? joinedRooms.get(gap.room_id)?.name ?? gap.room_id : 'Unknown room'} /> · {gapLabel(gap.reason)}</p>{/each}

        {:else}<p>Coverage is loading.</p>{/if}

        <button disabled={actionBusy || page?.coverage.recovering} onclick={recover}>Recover history</button>

      </div>

    </details>

    {#if error}<div class="error" role="alert"><EmojiText text={error} /><button disabled={busy} onclick={() => fetchRange(depth, ++generation, self)}>Retry</button></div>{/if}

    <div class="entries" use:bindViewport onscroll={() => { if (!viewport?.consumeScroll()) viewport?.capture(); }}>

      <div class="entry-content">

      {#each entries as entry (keyOf(entry))}

        {@const event = itemEvent(withProfiles(entry.event, roomProfiles[entry.key.room_id]))}

        <article class:unread={!entry.read}>

          <div class="entry-head"><button class="room" onclick={() => openContext(entry)}><EmojiText text={roomName(entry)} /></button><time>{new Date(entry.timestamp_ms).toLocaleString()}</time><span>{entry.read ? 'Read' : 'Unread'}</span></div>

          <div class="labels">{#each entry.reasons as reason}<span>{reasonLabel(reason)}</span>{/each}<span>{captureLabel(entry.capture)}</span>{#if entry.notification_suppressed}<span>Notifications suppressed</span>{/if}</div>

          {#if event}<MessageRow itemId={keyOf(entry)} {event} showSender={true} reacting={false} onReact={() => {}} readOnly={true} showSent={false} {self} senderAvatar={event.sender.avatar} />{:else}<p>Mention message unavailable</p>{/if}

          <div class="entry-actions"><button onclick={() => openContext(entry)}>Open saved context</button><button disabled={actionBusy} onclick={() => void setRead(entry, !entry.read)}>{entry.read ? 'Mark unread' : 'Mark read'}</button>{#if entry.capture.kind === 'Failed' || entry.capture.kind === 'Partial' || entry.capture.kind === 'Unavailable'}<button disabled={!joinedRooms.has(entry.key.room_id) || actionBusy} onclick={() => void retryEntry(entry)}>Retry capture</button>{/if}</div>

        </article>

      {/each}

      </div>

    </div>

    <footer><button disabled={!page?.next_cursor || page.end_reached || busy} onclick={loadMore}>{busy ? 'Loading…' : 'Load older mentions'}</button></footer>

    {#if entries.length === 0 && !busy && !error}<p class="status">No mentions yet.</p>{/if}

  {/if}

</section>

<style>

  .mentions-inbox { display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; color:var(--text); }

  header { display:flex; align-items:center; gap:.6rem; padding:.6rem; border-bottom:1px solid var(--border); }

  header h2 { flex:1; margin:0; font-size:1rem; }

  header h2 span { color:var(--muted); font-size:.85em; }

  button { color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:.4rem; padding:.4rem .65rem; cursor:pointer; }

  button:disabled { opacity:.55; cursor:default; }

  .entries { flex:1; min-height:0; overflow:auto; overflow-anchor:none; padding:.5rem; }

  article { border:1px solid var(--border); border-radius:.6rem; padding:.5rem; margin-bottom:.6rem; }

  article.unread { border-color:var(--accent); }

  .entry-head,.entry-actions,.labels { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

  .entry-head .room { font-weight:600; text-align:left; }

  .entry-head time,.entry-head span { color:var(--muted); font-size:.8rem; }

  .entry-head time { margin-left:auto; }

  .labels { margin:.35rem 0; color:var(--muted); font-size:.78rem; }

  .labels span { border:1px solid var(--border); border-radius:1rem; padding:.1rem .4rem; }

  .entry-actions { justify-content:flex-end; margin-top:.4rem; }

  footer { display:flex; justify-content:center; padding:.45rem; }

  .coverage { padding:.55rem .75rem; background:var(--panel); border-bottom:1px solid var(--border); }

  .coverage-body { max-height:min(15rem, 35vh); overflow:auto; }

  .coverage p,.status { margin:.25rem 0; color:var(--muted); }

  .error { display:flex; align-items:center; gap:.5rem; padding:.5rem; color:var(--danger); }

  .capture-retry { align-self:flex-start; margin:.4rem; }

</style>