@adatechnology/conversations-ui 0.10.0 → 0.12.0

package/README.md

@@ -334,6 +334,7 @@ import { ConversationThread } from '@adatechnology/conversations-ui/participant'
 | `status?` | `'open' \| 'closed'` | `closed` tira o compositor e mostra `labels.closedNotice` |
 | `counterpartLabel?` | `string` | linha curta sob o título, montada pelo host |
 | `headerActions?` | `ReactNode` | slot à direita do cabeçalho; ausente não desenha nada. Espera botões curtos ou só ícone, cada um com `aria-label`: com ações, a barra quebra de linha e o título mantém no mínimo `6rem` |
+| `renderComposerLock?` | `(conversation) => ReactNode \| undefined` | devolver um nó troca o compositor por ele (aviso + ações do host), dentro de `cv-p-thread__lock`; `undefined` mantém o compositor. `closed` continua tendo prioridade. Avaliado a cada render; o rascunho fica no controlador e volta ao destravar. Também existe em `ParticipantConversations` |
 | `onBack?` | `() => void` | ausente = sem seta (o diálogo do host já tem o próprio fechar) |
 | `quickReplies?` | `QuickReply[]` | chips acima do campo; tocar **preenche**, nunca envia |
 | `renderSubjectIcon?`, `subjectGroups?` | | ícone do assunto no cabeçalho, como na lista |

package/dist/participant/index.d.ts

@@ -190,6 +190,8 @@ type ParticipantConversationsLabels = {
     readonly edit: string;
     /** Name of the menu button on a failed message. Optional; translated hosts should fill it, otherwise the English default shows. */
     readonly messageOptions?: string;
+    /** Toggle that opens the message as received (e.g. the whole email). Optional; the English default shows otherwise. */
+    readonly showOriginalText?: string;
     readonly notFound: string;
     readonly loading: string;
     readonly loadError: string;
@@ -244,6 +246,8 @@ type ParticipantConversationsProps = {
     tail?: boolean;
     /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
     audioRecording?: ParticipantAudioRecordingOptions;
+    /** Return a node to replace the composer for this conversation (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+    renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined;
 };
 declare function ParticipantConversations(props: ParticipantConversationsProps): react.JSX.Element;
 
@@ -287,6 +291,8 @@ type ConversationThreadProps = {
     readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer;
     /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
     readonly audioRecording?: ParticipantAudioRecordingOptions;
+    /** Return a node to replace the composer (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+    readonly renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined;
 };
 /** One conversation about one subject, drawn like the participant app and seen from either side. */
 declare function ConversationThread(props: ConversationThreadProps): react.JSX.Element;

package/dist/participant/index.js

@@ -64,6 +64,7 @@ function formatRecordingElapsedLabel(template, elapsed, limit) {
 
 // src/participant/participantLabels.ts
 var DEFAULT_MESSAGE_OPTIONS_LABEL = "Message options";
+var DEFAULT_SHOW_ORIGINAL_TEXT_LABEL = "Show original";
 var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   inboxTitle: "Conversations",
   sectionAwaiting: "Waiting for your reply",
@@ -101,6 +102,7 @@ var DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS = {
   discard: "Discard",
   edit: "Edit",
   messageOptions: DEFAULT_MESSAGE_OPTIONS_LABEL,
+  showOriginalText: DEFAULT_SHOW_ORIGINAL_TEXT_LABEL,
   notFound: "Conversation not found",
   loading: "Loading\u2026",
   loadError: "Could not load. Check your connection and try again.",
@@ -2577,6 +2579,14 @@ function BubbleHeading({ content, labels }) {
   if (!content.authorName) return null;
   return /* @__PURE__ */ jsx27("span", { className: "cv-p-bubble__author", children: content.authorName });
 }
+function OriginalText({ content, labels }) {
+  const original = content.originalText?.trim();
+  if (!original || original === content.text?.trim()) return null;
+  return /* @__PURE__ */ jsxs21("details", { className: "cv-p-bubble__original", children: [
+    /* @__PURE__ */ jsx27("summary", { className: "cv-p-bubble__original-toggle", children: labels.showOriginalText ?? DEFAULT_SHOW_ORIGINAL_TEXT_LABEL }),
+    /* @__PURE__ */ jsx27("div", { className: "cv-p-bubble__original-text", children: original })
+  ] });
+}
 function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }) {
   return /* @__PURE__ */ jsxs21(Fragment6, { children: [
     /* @__PURE__ */ jsx27(BubbleHeading, { content, labels }),
@@ -2595,7 +2605,8 @@ function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl,
       /* @__PURE__ */ jsx27("time", { className: "cv-p-bubble__time", dateTime: content.createdAt, children: formatTimestamp(content.createdAt) }),
       ownStatus ? /* @__PURE__ */ jsx27(OwnStatus, { status: ownStatus, labels, onRetry }) : null,
       ownStatus === "failed" ? /* @__PURE__ */ jsx27(ParticipantFailedMenu, { labels, onEdit, onDiscard }) : null
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx27(OriginalText, { content, labels })
   ] });
 }
 
@@ -2669,6 +2680,7 @@ function describeItem(item, perspective) {
       isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? void 0,
       text: message.text ?? void 0,
+      originalText: message.originalText ?? void 0,
       createdAt: message.createdAt,
       attachments: message.attachments,
       pendingFilenames: [],
@@ -2908,6 +2920,10 @@ function Footer({ props }) {
   if (conversation.status === "closed") {
     return /* @__PURE__ */ jsx33("p", { className: "cv-p-thread__closed", children: labels.closedNotice });
   }
+  const lock = props.renderComposerLock?.(conversation);
+  if (lock !== void 0 && lock !== null) {
+    return /* @__PURE__ */ jsx33("div", { className: "cv-p-thread__lock", role: "region", "aria-live": "polite", children: lock });
+  }
   return /* @__PURE__ */ jsx33(
     ParticipantComposer,
     {
@@ -3675,7 +3691,8 @@ function LoadedThread(props) {
       avatars: props.avatars,
       renderAuthorAvatar: props.renderAuthorAvatar,
       tail: props.tail,
-      audioRecording: props.audioRecording
+      audioRecording: props.audioRecording,
+      renderComposerLock: props.renderComposerLock
     }
   );
 }
@@ -4043,7 +4060,8 @@ function ConversationThreadBody(props) {
           tail: props.tail,
           counterpartLabel: props.counterpartLabel,
           headerActions: props.headerActions,
-          audioRecording: props.audioRecording
+          audioRecording: props.audioRecording,
+          renderComposerLock: props.renderComposerLock
         }
       ) })
     }

package/dist/styles.css

@@ -1812,6 +1812,11 @@
   white-space: nowrap;
   border: 0;
 }
+.cv-p-thread__lock {
+  padding: 1rem;
+  color: var(--cv-p-i-text-muted);
+  border-top: 1px solid var(--cv-p-i-border);
+}
 .cv-p-thread__closed {
   margin: 0;
   padding: 1rem;
@@ -1973,7 +1978,41 @@
 .cv-p-bubble > .cv-p-attachment {
   flex: 1 0 100%;
 }
+.cv-p-bubble__original {
+  flex: 1 0 100%;
+  margin-top: 0.2rem;
+}
+.cv-p-bubble__original-toggle {
+  display: inline-block;
+  font-size: 0.7rem;
+  color: var(--cv-p-i-text-muted);
+  cursor: pointer;
+  list-style: none;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+}
+.cv-p-bubble__original-toggle::-webkit-details-marker {
+  display: none;
+}
+.cv-p-bubble__original-toggle:focus-visible {
+  outline: 2px solid var(--cv-p-i-accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.cv-p-bubble__original-text {
+  margin-top: 0.3rem;
+  padding-inline-start: 0.5rem;
+  border-inline-start: 2px solid var(--cv-p-i-border);
+  max-height: 16rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-size: 0.8rem;
+  color: var(--cv-p-i-text-muted);
+}
 .cv-p-bubble__meta {
+  order: 1;
   display: flex;
   flex: 0 0 auto;
   justify-content: flex-end;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -35,7 +35,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
     "tailwind-merge": "^3.6.0",
-    "@adatechnology/conversation-contracts": "0.6.0",
+    "@adatechnology/conversation-contracts": "0.7.0",
     "@adatechnology/meta-whatsapp-contracts": "0.6.0"
   },
   "peerDependencies": {

package/src/participant/ConversationThread.tsx

@@ -53,6 +53,8 @@ export type ConversationThreadProps = {
   readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
   /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
   readonly audioRecording?: ParticipantAudioRecordingOptions
+  /** Return a node to replace the composer (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+  readonly renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined
 }
 
 function useConversationThreadCore(props: ConversationThreadProps): ParticipantThreadCoreProps {
@@ -109,6 +111,7 @@ function ConversationThreadBody(props: ConversationThreadProps) {
           counterpartLabel={props.counterpartLabel}
           headerActions={props.headerActions}
           audioRecording={props.audioRecording}
+          renderComposerLock={props.renderComposerLock}
         />
       </div>
     </div>

package/src/participant/ParticipantBubbleBody.tsx

@@ -4,7 +4,7 @@ import { OwnStatus } from './ParticipantBubbleStatus'
 import { ParticipantFailedMenu } from './ParticipantFailedMenu'
 import type { BubbleContent } from './ParticipantMessageBubble'
 import { ParticipantMessageText } from './ParticipantMessageText'
-import type { ParticipantConversationsLabels } from './participantLabels'
+import { DEFAULT_SHOW_ORIGINAL_TEXT_LABEL, type ParticipantConversationsLabels } from './participantLabels'
 import type { ParticipantOwnMessageStatus } from './participantMessages'
 
 type BubbleBodyProps = {
@@ -24,6 +24,18 @@ function BubbleHeading({ content, labels }: Pick<BubbleBodyProps, 'content' | 'l
   return <span className="cv-p-bubble__author">{content.authorName}</span>
 }
 
+/** Collapsed by default: the trimmed text is what the reader needs, the original is there on demand. */
+function OriginalText({ content, labels }: Pick<BubbleBodyProps, 'content' | 'labels'>) {
+  const original = content.originalText?.trim()
+  if (!original || original === content.text?.trim()) return null
+  return (
+    <details className="cv-p-bubble__original">
+      <summary className="cv-p-bubble__original-toggle">{labels.showOriginalText ?? DEFAULT_SHOW_ORIGINAL_TEXT_LABEL}</summary>
+      <div className="cv-p-bubble__original-text">{original}</div>
+    </details>
+  )
+}
+
 export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachmentUrl, onRetry, onDiscard, onEdit }: BubbleBodyProps) {
   return (
     <>
@@ -49,6 +61,8 @@ export function BubbleBody({ content, labels, ownStatus, textId, resolveAttachme
         {ownStatus ? <OwnStatus status={ownStatus} labels={labels} onRetry={onRetry} /> : null}
         {ownStatus === 'failed' ? <ParticipantFailedMenu labels={labels} onEdit={onEdit} onDiscard={onDiscard} /> : null}
       </span>
+      {/* Last child so the ids React derives for the siblings above stay as they were; CSS keeps the meta after it. */}
+      <OriginalText content={content} labels={labels} />
     </>
   )
 }

package/src/participant/ParticipantConversations.tsx

@@ -44,6 +44,8 @@ export type ParticipantConversationsProps = {
   tail?: boolean
   /** Absent draws no microphone. Present lets the user record and send an audio as a message of its own. */
   audioRecording?: ParticipantAudioRecordingOptions
+  /** Return a node to replace the composer for this conversation (notice + host actions); undefined keeps the composer. `closed` still wins. Evaluated every render. */
+  renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined
 }
 
 export function ParticipantConversations(props: ParticipantConversationsProps) {

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -70,6 +70,41 @@ describe('ParticipantMessageBubble', () => {
     expect(mine).not.toContain('Marina')
   })
 
+  it('keeps the original text collapsed behind a discreet toggle inside the bubble', () => {
+    const original = 'Pode descarregar.\n\nEm ter., 20 de out. de 2026, Equipe escreveu:\n> Autorizam?'
+    const markup = renderServer(buildMessage({ id: 'a', text: 'Pode descarregar.', originalText: original }))
+
+    expect(markup).toContain('<details class="cv-p-bubble__original">')
+    expect(markup).not.toContain('<details class="cv-p-bubble__original" open')
+    expect(markup).toContain('<summary class="cv-p-bubble__original-toggle">Show original</summary>')
+    expect(markup).toContain('Em ter., 20 de out. de 2026, Equipe escreveu:')
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+
+  it('uses the host label for the original-text toggle', () => {
+    const item: ParticipantTimelineItem = {
+      kind: 'server',
+      message: buildMessage({ id: 'a', text: 'Ok', originalText: 'Ok\n> antes' }),
+    }
+    const markup = renderToStaticMarkup(
+      <ParticipantMessageBubble
+        item={item}
+        labels={{ ...LABELS, showOriginalText: 'ver histórico' }}
+        confirmsRead
+        resolveAttachmentUrl={resolveAttachmentUrl}
+      />,
+    )
+
+    expect(markup).toContain('>ver histórico</summary>')
+  })
+
+  it('shows no toggle when the original is absent, blank or the same as the text', () => {
+    expect(renderServer(buildMessage({ id: 'a', text: 'Ok' }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'b', text: 'Ok', originalText: null }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'c', text: 'Ok', originalText: '  ' }))).not.toContain('<details')
+    expect(renderServer(buildMessage({ id: 'd', text: 'Ok', originalText: ' Ok\n' }))).not.toContain('<details')
+  })
+
   it('renders a time element with the ISO dateTime', () => {
     expect(renderServer()).toMatch(/<time[^>]*dateTime="2026-10-01T10:00:00.000Z"/)
   })

package/src/participant/ParticipantMessageBubble.tsx

@@ -37,6 +37,7 @@ export type BubbleContent = {
   readonly isMine: boolean
   readonly authorName?: string
   readonly text?: string
+  readonly originalText?: string
   readonly createdAt: string
   readonly attachments: readonly ParticipantAttachment[]
   readonly pendingFilenames: readonly string[]
@@ -51,6 +52,7 @@ function describeItem(item: ParticipantTimelineItem, perspective?: ParticipantPe
       isMine: isOwnMessage(message, perspective),
       authorName: message.authorName ?? undefined,
       text: message.text ?? undefined,
+      originalText: message.originalText ?? undefined,
       createdAt: message.createdAt,
       attachments: message.attachments,
       pendingFilenames: [],

package/src/participant/ParticipantThread.test.tsx

@@ -128,6 +128,52 @@ describe('ParticipantThread', () => {
     expect(markup).not.toContain('<textarea')
   })
 
+  it('replaces the composer with the lock node inside the lock region', () => {
+    const markup = render({ renderComposerLock: () => <p>Assumed by Ana</p> })
+
+    expect(markup).toContain(
+      '<div class="cv-p-thread__lock" role="region" aria-live="polite"><p>Assumed by Ana</p></div>',
+    )
+    expect(markup).not.toContain('<form')
+    expect(markup).not.toContain('<textarea')
+  })
+
+  it('keeps the composer when renderComposerLock returns undefined or null', () => {
+    expect(render({ renderComposerLock: () => undefined })).toContain('<form')
+    expect(render({ renderComposerLock: () => null })).toContain('<form')
+    expect(render({ renderComposerLock: () => undefined })).not.toContain('cv-p-thread__lock')
+  })
+
+  it('lets the closed notice win over the lock', () => {
+    const markup = render({
+      conversation: buildConversation({ subjectId: '1', status: 'closed' }),
+      renderComposerLock: () => <p>Assumed by Ana</p>,
+    })
+
+    expect(markup).toContain('This conversation is closed')
+    expect(markup).not.toContain('Assumed by Ana')
+  })
+
+  it('passes the conversation to renderComposerLock and brings the draft back when it unlocks', () => {
+    const draft = { value: 'half typed', onChange: () => undefined, files: [], onFilesChange: () => undefined }
+    const conversation = buildConversation({ subjectId: '7' })
+    const seen: string[] = []
+
+    const locked = render({
+      draft,
+      conversation,
+      renderComposerLock: (received) => {
+        seen.push(received.subjectId)
+        return <p>Locked</p>
+      },
+    })
+    const unlocked = render({ draft, conversation, renderComposerLock: () => undefined })
+
+    expect(seen).toEqual(['7'])
+    expect(locked).not.toContain('half typed')
+    expect(unlocked).toContain('half typed')
+  })
+
   it('shows the composer when the conversation is open', () => {
     const markup = render()
 

package/src/participant/ParticipantThread.tsx

@@ -76,6 +76,8 @@ export type ParticipantThreadProps = {
   readonly audioRecording?: ParticipantAudioRecordingOptions
   /** Receives the recorded audio; the controller sends it as a message of its own. */
   readonly onSendAudio?: (file: File) => void
+  /** Return a node to replace the composer for this conversation (notice + host actions); undefined keeps the composer. Evaluated every render. */
+  readonly renderComposerLock?: (conversation: ParticipantConversationSummary) => ReactNode | undefined
 }
 
 function Footer({ props }: { readonly props: ParticipantThreadProps }) {
@@ -83,6 +85,14 @@ function Footer({ props }: { readonly props: ParticipantThreadProps }) {
   if (conversation.status === 'closed') {
     return <p className="cv-p-thread__closed">{labels.closedNotice}</p>
   }
+  const lock = props.renderComposerLock?.(conversation)
+  if (lock !== undefined && lock !== null) {
+    return (
+      <div className="cv-p-thread__lock" role="region" aria-live="polite">
+        {lock}
+      </div>
+    )
+  }
   return (
     <ParticipantComposer
       value={draft.value}

package/src/participant/ParticipantThreadScreen.tsx

@@ -105,6 +105,7 @@ function LoadedThread(props: LoadedThreadProps) {
       renderAuthorAvatar={props.renderAuthorAvatar}
       tail={props.tail}
       audioRecording={props.audioRecording}
+      renderComposerLock={props.renderComposerLock}
     />
   )
 }

package/src/participant/participantLabels.ts

@@ -1,6 +1,7 @@
 import { DEFAULT_PARTICIPANT_AUDIO_LABELS, type ParticipantAudioLabels } from './participantAudioLabels'
 
 export const DEFAULT_MESSAGE_OPTIONS_LABEL = 'Message options'
+export const DEFAULT_SHOW_ORIGINAL_TEXT_LABEL = 'Show original'
 
 export type ParticipantConversationsLabels = {
   readonly inboxTitle: string
@@ -43,6 +44,8 @@ export type ParticipantConversationsLabels = {
   readonly edit: string
   /** Name of the menu button on a failed message. Optional; translated hosts should fill it, otherwise the English default shows. */
   readonly messageOptions?: string
+  /** Toggle that opens the message as received (e.g. the whole email). Optional; the English default shows otherwise. */
+  readonly showOriginalText?: string
   readonly notFound: string
   readonly loading: string
   readonly loadError: string
@@ -106,6 +109,7 @@ export const DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS: ParticipantConversationsL
   discard: 'Discard',
   edit: 'Edit',
   messageOptions: DEFAULT_MESSAGE_OPTIONS_LABEL,
+  showOriginalText: DEFAULT_SHOW_ORIGINAL_TEXT_LABEL,
   notFound: 'Conversation not found',
   loading: 'Loading…',
   loadError: 'Could not load. Check your connection and try again.',

package/src/styles.css

@@ -1275,6 +1275,7 @@
 .cv-p-thread__messages { display: flex; flex-direction: column; gap: 0.5rem; }
 .cv-p-thread__live { padding: 0 1rem; font-size: 0.75rem; color: var(--cv-p-i-accent); background: var(--cv-p-i-surface-raised); }
 .cv-p-thread__live:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.cv-p-thread__lock { padding: 1rem; color: var(--cv-p-i-text-muted); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-thread__closed { margin: 0; padding: 1rem; text-align: center; color: var(--cv-p-i-text-muted); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-day { align-self: center; margin: 0.5rem 0; padding: 0.25rem 0.75rem; background: var(--cv-p-i-surface-raised); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); font: 0.65rem 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cv-p-i-text-muted); }
 
@@ -1301,7 +1302,12 @@
 .cv-p-bubble__author { display: block; flex: 1 0 100%; margin-bottom: 0.15rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; text-transform: uppercase; color: var(--cv-p-i-accent); }
 .cv-p-bubble > .cv-p-text { flex: 0 1 auto; min-width: 0; margin-inline-end: auto; }
 .cv-p-bubble > .cv-p-attachment { flex: 1 0 100%; }
-.cv-p-bubble__meta { display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
+.cv-p-bubble__original { flex: 1 0 100%; margin-top: 0.2rem; }
+.cv-p-bubble__original-toggle { display: inline-block; font-size: 0.7rem; color: var(--cv-p-i-text-muted); cursor: pointer; list-style: none; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
+.cv-p-bubble__original-toggle::-webkit-details-marker { display: none; }
+.cv-p-bubble__original-toggle:focus-visible { outline: 2px solid var(--cv-p-i-accent); outline-offset: 2px; border-radius: 2px; }
+.cv-p-bubble__original-text { margin-top: 0.3rem; padding-inline-start: 0.5rem; border-inline-start: 2px solid var(--cv-p-i-border); max-height: 16rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; color: var(--cv-p-i-text-muted); }
+.cv-p-bubble__meta { order: 1; display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
 .cv-p-bubble__status { display: inline-flex; align-items: center; gap: 0.25rem; }
 .cv-p-bubble .cv-status-ticks--queued, .cv-p-bubble .cv-status-ticks--sent, .cv-p-bubble .cv-status-ticks--delivered { color: var(--cv-p-i-tick); }
 .cv-p-bubble .cv-status-ticks--read { color: var(--cv-p-i-tick-read); }