# Inbox

> Unified inbox for chat, email and WhatsApp with a filterable conversation list, thread, composer, contact panel, assignment, snooze, find in thread, voice notes, location sharing, saved replies, reactions, a docked chat launcher and live new message toasts, driven by callbacks.

Source: https://docs.nasaqui.com/components/inbox

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/inbox.json
```

The screen an agent lives in: every conversation from chat, email and WhatsApp in one list, the thread next to it,
and who the customer is on the side. It stores nothing. You pass `conversations` and the component calls your
callbacks (`onSend`, `onUpdate`, `onReact`); you update your state and pass the new list back.

## When to use

- A support or sales team answering customers over several channels.
- Any admin screen that needs threads, an assignee, snooze and internal notes.

## When not to use

- A customer-facing chat box: use [`ChatWidget`](https://docs.nasaqui.com/components/chat-widget).
- A single AI conversation: use [`CopilotChat`](https://docs.nasaqui.com/components/copilot-chat).

## Import

```tsx
import { Inbox } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { Inbox, type InboxAgent, type InboxConversation } from "@fadymondy/nasaq/web";
import { useState } from "react";

declare const initial: InboxConversation[];
declare const agents: InboxAgent[];

export function Support() {
  const [list, setList] = useState(initial);
  return (
    <Inbox
      conversations={list}
      agents={agents}
      currentAgentId="a1"
      onSend={async (draft) => {
        // POST the draft, then append the message you get back
      }}
      onUpdate={async (id, patch) => setList((all) => all.map((c) => (c.id === id ? { ...c, ...patch } : c)))}
    />
  );
}
```

## Anatomy

```
Inbox                              data-slot="inbox" (data-compact under compactBelow px)
├─ conversation list               search, view tabs (Open, Unread, Snoozed, Closed, Archived), channel and assignment filters
│  └─ row                          avatar, colour dot, pin and mute marks, preview, unread badge, ConversationRowMenu
├─ thread                          header (assign, SnoozeMenu, close, find, pop out, contact), ThreadSearchBar, ChatThread
│  ├─ InboxMessageView             chat bubble, email card, internal note, event line
│  └─ InboxComposer                reply or note, emoji, saved replies, attach, VoiceRecorder, LocationPicker
├─ ContactInfoPanel                details, tags, notes, Media, Files and Links with a lightbox
├─ NewMessageToast                 a stack, for messages in conversations you are not reading
└─ InboxDock (separate)            launcher with unread count and small chat windows
```

## API

**Inbox**: every `div` prop except `children`, plus:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `conversations` | `readonly InboxConversation[]` | required | Channel, contact, messages, status, assignee, unread, pinned, muted, colour, snooze. |
| `agents` | `readonly InboxAgent[]` | required | Teammates for assignment and @mentions in notes. |
| `currentAgentId` | `string` | required | Signed-in agent. |
| `selectedId` / `defaultSelectedId` / `onSelectedChange` | `string \| null` | none | Controlled or uncontrolled selection. |
| `onSend` | `(draft: InboxDraft) => Promise<void \| { error? }>` | required | Reply, note, voice message or location. An `error` keeps the draft and shows the message. |
| `onUpdate` | `(id, patch: ConversationPatch) => void \| Promise<void>` | required | Pin, archive, mute, colour, status, assignee, snooze, mark unread. |
| `onReact` | `(conversationId, messageId, emoji) => void` | | Reaction toggled. |
| `onRetry` | `(conversationId, message) => void` | | Retry a failed send. |
| `onPopOut` | `(conversationId) => void` | | Shows a pop out button (pair with `InboxDock`). |
| `snippets` | `readonly CannedSnippet[]` | none | Saved replies, typed after `/`, with `{{name}}` and `{{agent}}`. |
| `loading` | `boolean` | `false` | Skeleton rows. |
| `toasts` | `boolean` | `true` | Toast for a new incoming message in another conversation (muted ones stay quiet). |
| `simulateVoice` | `boolean` | `false` | The recorder makes a fake note without the microphone (demos and tests). |
| `compactBelow` | `number` | `820` | Under this width one pane shows at a time and contact opens in a sheet. |
| `labels` | `Partial<InboxLabels>` | | Override any string. |

**Parts** you can use alone: `InboxComposer`, `InboxMessageView`, `MessageReactions`, `ReactionPicker`, `ReplyQuote`,
`MessageText`, `AttachmentList`, `VoiceRecorder`, `VoicePlayer`, `LocationPicker`, `LocationCard`, `LinkPreviewCard`,
`SnoozeMenu`, `ConversationRowMenu`, `CannedPicker`, `ThreadSearchBar`, `ContactInfoPanel`, `NewMessageToast`, `InboxDock`.

**Helpers** (pure, tested): `filterConversations`, `countViews`, `findMatches`, `snoozePresets`, `applySnippet`.

## Examples

**Docked chat windows next to any page**

```tsx
import { InboxDock, type InboxConversation, type InboxDraft } from "@fadymondy/nasaq/web";

declare const list: InboxConversation[];
declare const send: (d: InboxDraft) => Promise<void>;

export const Dock = () => <InboxDock conversations={list} me="a1" onSend={send} />;
```

## Context menu

Each conversation row opens the same menu as its ⋯ button (status, labels, snooze, mute…) on right-click, Shift+F10 or the Menu key. `contextMenu={false}` opts out. Exported as `ConversationContextMenu`.

## Accessibility

- The list is a labelled region; the open row has `aria-current`. Unread count is text for screen readers.
- The thread is a `role="log"` that follows new messages until the reader scrolls up.
- Find: Enter and Shift+Enter move between matches, Escape closes. Menus use Base UI menu keyboard rules.
- The location pad moves with arrow keys. The recorder announces its state and needs no pointer.
- Toasts pause on hover and focus, and have a dismiss button.

## RTL & i18n

- English and Arabic follow the Nasaq locale. Email addresses, phone numbers, URLs and coordinates stay left to right.
- Send, back and panel icons mirror. The map pad does not mirror: east is always to the right.
- WhatsApp is written as text; no logo is used.

## Styling & tokens

- Built on `chat`, `mention-textarea`, `rich-text-editor`, `notification-item`, `tabs`, `sheet`, `dialog` and `--nq-*` tokens.
- Target `[data-slot="inbox"]`, `[data-slot="inbox-composer"]`, `[data-slot="inbox-dock"]`.
- Colour labels use `--nq-tag-*`.

## Do / Don't

- Do send email as HTML only after your server sanitises it. The thread renders it read only through the editor schema.
- Do resolve `onSend` with `{ error }` instead of throwing.
- Don't rely on colour alone to tell conversations apart.
- Don't keep the microphone open after `VoiceRecorder` closes; it releases the stream itself.

## Related

- [`ChatWidget`](https://docs.nasaqui.com/components/chat-widget)
- [`Chat`](https://docs.nasaqui.com/components/chat)
- [`MentionTextarea`](https://docs.nasaqui.com/components/mention-textarea)

## Code

### React

```tsx
import { Inbox, type InboxAgent, type InboxConversation } from "@fadymondy/nasaq/web";
import { useState } from "react";

declare const initial: InboxConversation[];
declare const agents: InboxAgent[];

export function Support() {
  const [list, setList] = useState(initial);
  return (
    <Inbox
      conversations={list}
      agents={agents}
      currentAgentId="a1"
      onSend={async (draft) => {
        // POST the draft, then append the message you get back
      }}
      onUpdate={async (id, patch) => setList((all) => all.map((c) => (c.id === id ? { ...c, ...patch } : c)))}
    />
  );
}
```

### shadcn

```tsx
import { Inbox, type InboxAgent, type InboxConversation } from "@/components/ui/inbox";
import { useState } from "react";

declare const initial: InboxConversation[];
declare const agents: InboxAgent[];

export function Support() {
  const [list, setList] = useState(initial);
  return (
    <Inbox
      conversations={list}
      agents={agents}
      currentAgentId="a1"
      onSend={async (draft) => {
        // POST the draft, then append the message you get back
      }}
      onUpdate={async (id, patch) => setList((all) => all.map((c) => (c.id === id ? { ...c, ...patch } : c)))}
    />
  );
}
```

### Vue

```vue
<script setup lang="ts">
import { NqInbox, type ConversationPatch, type InboxAgent, type InboxConversation, type InboxDraft } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

const agents: InboxAgent[] = [
  { id: "a1", name: "Sara Ali", email: "sara@example.com" },
  { id: "a2", name: "Omar Nasser", email: "omar@example.com" },
];
const list = ref<InboxConversation[]>([
  {
    id: "c1",
    channel: "chat",
    status: "open",
    unread: 2,
    contact: { id: "u1", name: "Layla Hassan", email: "layla@example.com" },
    messages: [
      { id: "m1", direction: "in", kind: "text", body: "Hi, where is my order?", at: new Date("2026-09-29T08:00:00").getTime() },
      { id: "m2", direction: "in", kind: "text", body: "It was due yesterday.", at: new Date("2026-09-29T08:02:00").getTime() },
    ],
  },
  {
    id: "c2",
    channel: "email",
    status: "open",
    subject: "Invoice for September",
    contact: { id: "u2", name: "Karim Adel", email: "karim@example.com" },
    messages: [{ id: "m3", direction: "in", kind: "text", body: "Could you resend the invoice?", at: new Date("2026-09-29T07:00:00").getTime() }],
  },
] as unknown as InboxConversation[]);

async function send(draft: InboxDraft) {
  const c = list.value.find((x) => x.id === draft.conversationId);
  c?.messages.push({ id: `m${Date.now()}`, direction: "out", kind: draft.mode === "note" ? "note" : "text", body: draft.body, at: Date.now() } as never);
}
async function update(id: string, patch: ConversationPatch) {
  list.value = list.value.map((c) => (c.id === id ? { ...c, ...patch } : c)) as InboxConversation[];
}
</script>

<template>
  <NqInbox :conversations="list" :agents="agents" current-agent-id="a1" :on-send="send" :on-update="update" />
</template>
```

### Blade

```blade
@php
    $agents = [
        ['id' => 'a1', 'name' => 'Sara Ali', 'email' => 'sara@example.com'],
        ['id' => 'a2', 'name' => 'Omar Nasser', 'email' => 'omar@example.com'],
    ];
    $conversations = [
        [
            'id' => 'c1', 'channel' => 'chat', 'status' => 'open', 'unread' => 2,
            'contact' => ['id' => 'u1', 'name' => 'Layla Hassan', 'email' => 'layla@example.com', 'phone' => '+966 50 123 4567', 'company' => 'Hassan Trading', 'tags' => ['VIP']],
            'messages' => [
                ['id' => 'm1', 'direction' => 'in', 'kind' => 'text', 'body' => 'Hi, where is my order?', 'at' => '2026-09-29T08:00:00'],
                ['id' => 'm2', 'direction' => 'in', 'kind' => 'text', 'body' => 'It was due yesterday.', 'at' => '2026-09-29T08:02:00'],
            ],
        ],
        [
            'id' => 'c2', 'channel' => 'email', 'status' => 'open', 'subject' => 'Invoice for September',
            'contact' => ['id' => 'u2', 'name' => 'Karim Adel', 'email' => 'karim@example.com'],
            'messages' => [
                ['id' => 'm3', 'direction' => 'in', 'kind' => 'text', 'subject' => 'Invoice for September', 'body' => 'Could you resend the invoice?', 'at' => '2026-09-29T07:00:00'],
            ],
        ],
        [
            'id' => 'c3', 'channel' => 'whatsapp', 'status' => 'closed', 'pinned' => true,
            'contact' => ['id' => 'u3', 'name' => 'Nour Samir'],
            'messages' => [
                ['id' => 'm4', 'direction' => 'in', 'kind' => 'text', 'body' => 'Thanks, all sorted.', 'at' => '2026-09-28T16:00:00'],
            ],
        ],
    ];
    $snippets = [
        ['id' => 's1', 'shortcut' => 'refund', 'title' => 'Refund policy', 'body' => 'Hi {{name}}, refunds take 3 to 5 working days. {{agent}}'],
    ];
@endphp
<x-nq::inbox :conversations="$conversations" :agents="$agents" current-agent-id="a1" :snippets="$snippets"
    x-on:nq-inbox-send="$event.detail.wait(Promise.resolve())" />
```

### HTML + Alpine

```html
<div data-slot="inbox" x-data="nqInbox(JSON.parse('{\u0022conversations\u0022:[{\u0022id\u0022:\u0022c1\u0022,\u0022channel\u0022:\u0022chat\u0022,\u0022status\u0022:\u0022open\u0022,\u0022unread\u0022:2,\u0022contact\u0022:{\u0022id\u0022:\u0022u1\u0022,\u0022name\u0022:\u0022Layla Hassan\u0022,\u0022email\u0022:\u0022layla@example.com\u0022,\u0022phone\u0022:\u0022+966 50 123 4567\u0022,\u0022company\u0022:\u0022Hassan Trading\u0022,\u0022tags\u0022:[\u0022VIP\u0022]},\u0022messages\u0022:[{\u0022id\u0022:\u0022m1\u0022,\u0022direction\u0022:\u0022in\u0022,\u0022kind\u0022:\u0022text\u0022,\u0022body\u0022:\u0022Hi, where is my order?\u0022,\u0022at\u0022:\u00222026-09-29T08:00:00\u0022},{\u0022id\u0022:\u0022m2\u0022,\u0022direction\u0022:\u0022in\u0022,\u0022kind\u0022:\u0022text\u0022,\u0022body\u0022:\u0022It was due yesterday.\u0022,\u0022at\u0022:\u00222026-09-29T08:02:00\u0022}]},{\u0022id\u0022:\u0022c2\u0022,\u0022channel\u0022:\u0022email\u0022,\u0022status\u0022:\u0022open\u0022,\u0022subject\u0022:\u0022Invoice for September\u0022,\u0022contact\u0022:{\u0022id\u0022:\u0022u2\u0022,\u0022name\u0022:\u0022Karim Adel\u0022,\u0022email\u0022:\u0022karim@example.com\u0022},\u0022messages\u0022:[{\u0022id\u0022:\u0022m3\u0022,\u0022direction\u0022:\u0022in\u0022,\u0022kind\u0022:\u0022text\u0022,\u0022subject\u0022:\u0022Invoice for September\u0022,\u0022body\u0022:\u0022Could you resend the invoice?\u0022,\u0022at\u0022:\u00222026-09-29T07:00:00\u0022}]},{\u0022id\u0022:\u0022c3\u0022,\u0022channel\u0022:\u0022whatsapp\u0022,\u0022status\u0022:\u0022closed\u0022,\u0022pinned\u0022:true,\u0022contact\u0022:{\u0022id\u0022:\u0022u3\u0022,\u0022name\u0022:\u0022Nour Samir\u0022},\u0022messages\u0022:[{\u0022id\u0022:\u0022m4\u0022,\u0022direction\u0022:\u0022in\u0022,\u0022kind\u0022:\u0022text\u0022,\u0022body\u0022:\u0022Thanks, all sorted.\u0022,\u0022at\u0022:\u00222026-09-28T16:00:00\u0022}]}],\u0022agents\u0022:[{\u0022id\u0022:\u0022a1\u0022,\u0022name\u0022:\u0022Sara Ali\u0022,\u0022email\u0022:\u0022sara@example.com\u0022},{\u0022id\u0022:\u0022a2\u0022,\u0022name\u0022:\u0022Omar Nasser\u0022,\u0022email\u0022:\u0022omar@example.com\u0022}],\u0022me\u0022:\u0022a1\u0022,\u0022snippets\u0022:[{\u0022id\u0022:\u0022s1\u0022,\u0022shortcut\u0022:\u0022refund\u0022,\u0022title\u0022:\u0022Refund policy\u0022,\u0022body\u0022:\u0022Hi {{name}}, refunds take 3 to 5 working days. {{agent}}\u0022}],\u0022selected\u0022:null,\u0022toasts\u0022:true,\u0022compactBelow\u0022:820,\u0022contextMenu\u0022:true,\u0022popOut\u0022:false,\u0022loading\u0022:false,\u0022now\u0022:1790672400000,\u0022locale\u0022:\u0022en\u0022,\u0022t\u0022:{\u0022inbox\u0022:\u0022Inbox\u0022,\u0022conversations\u0022:\u0022Conversations\u0022,\u0022search\u0022:\u0022Search conversations\u0022,\u0022searchPlaceholder\u0022:\u0022Search name, email or message\u0022,\u0022views\u0022:\u0022Views\u0022,\u0022viewActive\u0022:\u0022Open\u0022,\u0022viewUnread\u0022:\u0022Unread\u0022,\u0022viewSnoozed\u0022:\u0022Snoozed\u0022,\u0022viewClosed\u0022:\u0022Closed\u0022,\u0022viewArchived\u0022:\u0022Archived\u0022,\u0022scopeAll\u0022:\u0022Everyone\u0022,\u0022scopeMine\u0022:\u0022Mine\u0022,\u0022scopeUnassigned\u0022:\u0022Unassigned\u0022,\u0022scope\u0022:\u0022Assignment\u0022,\u0022channels\u0022:\u0022Channel\u0022,\u0022channelAll\u0022:\u0022All channels\u0022,\u0022channelChat\u0022:\u0022Chat\u0022,\u0022channelEmail\u0022:\u0022Email\u0022,\u0022channelWhatsapp\u0022:\u0022WhatsApp\u0022,\u0022empty\u0022:\u0022No conversations here\u0022,\u0022emptyHint\u0022:\u0022New messages show up as they arrive.\u0022,\u0022noSelection\u0022:\u0022Select a conversation\u0022,\u0022noSelectionHint\u0022:\u0022Pick one from the list to read it and reply.\u0022,\u0022loading\u0022:\u0022Loading conversations\u0022,\u0022unreadCount\u0022:\u0022{n} unread\u0022,\u0022typing\u0022:\u0022is typing\u0022,\u0022you\u0022:\u0022You\u0022,\u0022unassigned\u0022:\u0022Unassigned\u0022,\u0022assignTo\u0022:\u0022Assign to\u0022,\u0022assignToMe\u0022:\u0022Assign to me\u0022,\u0022assignedTo\u0022:\u0022Assigned to {name}\u0022,\u0022back\u0022:\u0022Back to conversations\u0022,\u0022close\u0022:\u0022Close conversation\u0022,\u0022reopen\u0022:\u0022Reopen\u0022,\u0022closed\u0022:\u0022Closed\u0022,\u0022snoozedUntil\u0022:\u0022Snoozed until {when}\u0022,\u0022openContact\u0022:\u0022Contact details\u0022,\u0022hideContact\u0022:\u0022Hide contact details\u0022,\u0022popOut\u0022:\u0022Open in the dock\u0022,\u0022more\u0022:\u0022More actions\u0022,\u0022pin\u0022:\u0022Pin\u0022,\u0022unpin\u0022:\u0022Unpin\u0022,\u0022archive\u0022:\u0022Archive\u0022,\u0022unarchive\u0022:\u0022Unarchive\u0022,\u0022mute\u0022:\u0022Mute\u0022,\u0022unmute\u0022:\u0022Unmute\u0022,\u0022markUnread\u0022:\u0022Mark as unread\u0022,\u0022markRead\u0022:\u0022Mark as read\u0022,\u0022color\u0022:\u0022Colour\u0022,\u0022noColor\u0022:\u0022No colour\u0022,\u0022colors\u0022:{\u0022gray\u0022:\u0022Gray\u0022,\u0022red\u0022:\u0022Red\u0022,\u0022orange\u0022:\u0022Orange\u0022,\u0022amber\u0022:\u0022Amber\u0022,\u0022green\u0022:\u0022Green\u0022,\u0022teal\u0022:\u0022Teal\u0022,\u0022blue\u0022:\u0022Blue\u0022,\u0022violet\u0022:\u0022Violet\u0022,\u0022pink\u0022:\u0022Pink\u0022},\u0022rowActions\u0022:\u0022Actions for {name}\u0022,\u0022pinned\u0022:\u0022Pinned\u0022,\u0022muted\u0022:\u0022Muted\u0022,\u0022snooze\u0022:\u0022Snooze\u0022,\u0022unsnooze\u0022:\u0022Unsnooze\u0022,\u0022snoozeLater\u0022:\u0022Later today\u0022,\u0022snoozeTomorrow\u0022:\u0022Tomorrow morning\u0022,\u0022snoozeWeekend\u0022:\u0022This weekend\u0022,\u0022snoozeNextWeek\u0022:\u0022Next week\u0022,\u0022snoozeCustom\u0022:\u0022Pick a date and time\u0022,\u0022snoozeConfirm\u0022:\u0022Snooze until\u0022,\u0022snoozeCustomLabel\u0022:\u0022Wake up at\u0022,\u0022thread\u0022:\u0022Messages\u0022,\u0022reply\u0022:\u0022Reply\u0022,\u0022note\u0022:\u0022Internal note\u0022,\u0022noteHint\u0022:\u0022Only your team sees notes.\u0022,\u0022noteBadge\u0022:\u0022Note\u0022,\u0022replyTo\u0022:\u0022Replying to\u0022,\u0022cancelReply\u0022:\u0022Cancel reply\u0022,\u0022replyAction\u0022:\u0022Reply\u0022,\u0022react\u0022:\u0022React\u0022,\u0022reactions\u0022:\u0022Reactions\u0022,\u0022reactedWith\u0022:\u0022{emoji} {n}\u0022,\u0022quoteJump\u0022:\u0022Go to the original message\u0022,\u0022sending\u0022:\u0022Sending\u0022,\u0022failed\u0022:\u0022Failed to send\u0022,\u0022retry\u0022:\u0022Retry\u0022,\u0022voiceMessage\u0022:\u0022Voice message\u0022,\u0022locationMessage\u0022:\u0022Location\u0022,\u0022attachmentMessage\u0022:\u0022Attachment\u0022,\u0022linkOpen\u0022:\u0022Open link\u0022,\u0022find\u0022:\u0022Find in conversation\u0022,\u0022findPlaceholder\u0022:\u0022Find in conversation\u0022,\u0022findCount\u0022:\u0022{i} of {n}\u0022,\u0022findNone\u0022:\u0022No matches\u0022,\u0022findNext\u0022:\u0022Next match\u0022,\u0022findPrev\u0022:\u0022Previous match\u0022,\u0022findClose\u0022:\u0022Close search\u0022,\u0022message\u0022:\u0022Message\u0022,\u0022messagePlaceholder\u0022:\u0022Write a reply. Type \\\/ for saved replies\u0022,\u0022notePlaceholder\u0022:\u0022Write a note. Type @ to mention a teammate\u0022,\u0022emailPlaceholder\u0022:\u0022Write your reply\u0022,\u0022send\u0022:\u0022Send\u0022,\u0022sendNote\u0022:\u0022Add note\u0022,\u0022subject\u0022:\u0022Subject\u0022,\u0022to\u0022:\u0022To\u0022,\u0022cc\u0022:\u0022Cc\u0022,\u0022addCc\u0022:\u0022Add Cc\u0022,\u0022ccPlaceholder\u0022:\u0022name@example.com, another@example.com\u0022,\u0022attach\u0022:\u0022Attach files\u0022,\u0022removeAttachment\u0022:\u0022Remove {name}\u0022,\u0022emoji\u0022:\u0022Emoji\u0022,\u0022voice\u0022:\u0022Record a voice message\u0022,\u0022location\u0022:\u0022Share a location\u0022,\u0022snippets\u0022:\u0022Saved replies\u0022,\u0022sendFailed\u0022:\u0022Could not send. Try again.\u0022,\u0022channelHintWhatsapp\u0022:\u0022Sent through WhatsApp\u0022,\u0022recording\u0022:\u0022Recording\u0022,\u0022recorderCancel\u0022:\u0022Discard recording\u0022,\u0022recorderSend\u0022:\u0022Send voice message\u0022,\u0022recorderStop\u0022:\u0022Stop recording\u0022,\u0022recorderMic\u0022:\u0022Microphone access was blocked. Allow it in the browser and try again.\u0022,\u0022recorderUnsupported\u0022:\u0022This browser cannot record audio.\u0022,\u0022recorderStarting\u0022:\u0022Starting the microphone\u0022,\u0022play\u0022:\u0022Play\u0022,\u0022pause\u0022:\u0022Pause\u0022,\u0022speed\u0022:\u0022Playback speed\u0022,\u0022voiceProgress\u0022:\u0022Voice message position\u0022,\u0022pickLocation\u0022:\u0022Share a location\u0022,\u0022pickLocationHint\u0022:\u0022Click the map or drag the pin. You can also type coordinates.\u0022,\u0022mapPad\u0022:\u0022Map area. Arrow keys move the pin.\u0022,\u0022latitude\u0022:\u0022Latitude\u0022,\u0022longitude\u0022:\u0022Longitude\u0022,\u0022place\u0022:\u0022Place name\u0022,\u0022placeOptional\u0022:\u0022Optional label\u0022,\u0022useMyLocation\u0022:\u0022Use my location\u0022,\u0022locating\u0022:\u0022Finding you\u0022,\u0022locationDenied\u0022:\u0022Location access was blocked.\u0022,\u0022locationInvalid\u0022:\u0022Enter a latitude from -90 to 90 and a longitude from -180 to 180.\u0022,\u0022sendLocation\u0022:\u0022Send location\u0022,\u0022cancel\u0022:\u0022Cancel\u0022,\u0022openInMaps\u0022:\u0022Open in maps\u0022,\u0022nearby\u0022:\u0022Suggested places\u0022,\u0022snippetSearch\u0022:\u0022Search saved replies\u0022,\u0022snippetsEmpty\u0022:\u0022No saved replies match\u0022,\u0022snippetInsert\u0022:\u0022Insert\u0022,\u0022contact\u0022:\u0022Contact\u0022,\u0022contactEmail\u0022:\u0022Email\u0022,\u0022contactPhone\u0022:\u0022Phone\u0022,\u0022contactCompany\u0022:\u0022Company\u0022,\u0022contactLocation\u0022:\u0022Location\u0022,\u0022contactTimezone\u0022:\u0022Time zone\u0022,\u0022contactSince\u0022:\u0022First seen\u0022,\u0022contactTags\u0022:\u0022Tags\u0022,\u0022contactNotes\u0022:\u0022Notes\u0022,\u0022copy\u0022:\u0022Copy\u0022,\u0022copied\u0022:\u0022Copied\u0022,\u0022media\u0022:\u0022Media\u0022,\u0022files\u0022:\u0022Files\u0022,\u0022links\u0022:\u0022Links\u0022,\u0022mediaEmpty\u0022:\u0022Nothing shared yet\u0022,\u0022mediaOpen\u0022:\u0022Open image\u0022,\u0022mediaTabs\u0022:\u0022Shared in this conversation\u0022,\u0022download\u0022:\u0022Download\u0022,\u0022newMessage\u0022:\u0022New message\u0022,\u0022openConversation\u0022:\u0022Open\u0022,\u0022dismiss\u0022:\u0022Dismiss\u0022,\u0022dock\u0022:\u0022Chats\u0022,\u0022dockOpen\u0022:\u0022Open chats\u0022,\u0022dockClose\u0022:\u0022Close chats\u0022,\u0022dockMinimize\u0022:\u0022Minimize\u0022,\u0022dockCloseWindow\u0022:\u0022Close chat\u0022,\u0022dockEmpty\u0022:\u0022No open chats\u0022,\u0022dockNew\u0022:\u0022Recent conversations\u0022,\u0022system\u0022:\u0022Event\u0022,\u0022email\u0022:\u0022Email\u0022,\u0022from\u0022:\u0022From\u0022,\u0022showQuoted\u0022:\u0022Show earlier messages\u0022}}'))" x-modelable="conversations" x-bind:data-compact="compact ? `` : null"
    x-on:nq-inbox-send="$event.detail.wait(Promise.resolve())" class="relative flex h-[40rem] min-h-0 w-full overflow-hidden rounded-card border border-border bg-card">
    <section x-show="showList" aria-label="Conversations" x-bind:class="compact ? `flex-1` : `w-80 shrink-0 border-e xl:w-96`" class="flex min-h-0 flex-col border-border bg-card">
    <div class="flex flex-col gap-2 border-b border-border p-3">
        <div class="relative">
            <svg aria-hidden="true" class="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>            <input data-slot="input" type="search"
                    dir="auto" x-model="searchText" aria-label="Search conversations" placeholder="Search name, email or message" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control ps-9">
        </div>
        <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('active')" x-modelable="value" x-id="['nq-tabs']" x-model="view" class="flex flex-col gap-0">
    <div data-slot="tabs-list" data-variant="segmented" aria-orientation="horizontal" x-bind="list"
    aria-label="Views" class="relative z-0 flex max-w-full [scrollbar-width:none] [&::-webkit-scrollbar]:hidden gap-0.5 rounded-control bg-secondary p-0.5 w-full overflow-x-auto">
    <button type="button" data-slot="tabs-tab" x-bind="tab('active')"
     data-active aria-selected="true"         class="inline-flex shrink-0 items-center whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-7 rounded-[calc(var(--radius-control)-2px)] px-3 gap-1.5">Open
                        <span class="text-caption tabular-nums text-muted-foreground" x-text="num(counts.active)"></span></button>
                                    <button type="button" data-slot="tabs-tab" x-bind="tab('unread')"
            class="inline-flex shrink-0 items-center whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-7 rounded-[calc(var(--radius-control)-2px)] px-3 gap-1.5">Unread
                        <span class="text-caption tabular-nums text-muted-foreground" x-text="num(counts.unread)"></span></button>
                                    <button type="button" data-slot="tabs-tab" x-bind="tab('snoozed')"
            class="inline-flex shrink-0 items-center whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-7 rounded-[calc(var(--radius-control)-2px)] px-3 gap-1.5">Snoozed
                        <span class="text-caption tabular-nums text-muted-foreground" x-text="num(counts.snoozed)"></span></button>
                                    <button type="button" data-slot="tabs-tab" x-bind="tab('closed')"
            class="inline-flex shrink-0 items-center whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-7 rounded-[calc(var(--radius-control)-2px)] px-3 gap-1.5">Closed
                        <span class="text-caption tabular-nums text-muted-foreground" x-text="num(counts.closed)"></span></button>
                                    <button type="button" data-slot="tabs-tab" x-bind="tab('archived')"
            class="inline-flex shrink-0 items-center whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-7 rounded-[calc(var(--radius-control)-2px)] px-3 gap-1.5">Archived
                        <span class="text-caption tabular-nums text-muted-foreground" x-text="num(counts.archived)"></span></button>
                                <span data-slot="tabs-indicator" aria-hidden="true"
    class="absolute -z-10 transition-[left,width] duration-200 ease-nq left-[var(--active-tab-left)] w-[var(--active-tab-width)] top-[var(--active-tab-top)] h-[var(--active-tab-height)] rounded-[calc(var(--radius-control)-2px)] bg-background shadow-xs"></span>
</div>
</div>
        <div class="flex flex-wrap items-center gap-1.5">
            <div role="group" aria-label="Channel" class="flex flex-wrap gap-1">
                                    <button type="button" data-channel="all" x-bind:aria-pressed="chan == `all`" x-on:click="chan = `all`" class="h-7 rounded-full px-2.5 text-caption text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus aria-pressed:bg-secondary aria-pressed:text-foreground border border-border aria-pressed:border-transparent">All channels</button>
                                    <button type="button" data-channel="chat" x-bind:aria-pressed="chan == `chat`" x-on:click="chan = `chat`" class="h-7 rounded-full px-2.5 text-caption text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus aria-pressed:bg-secondary aria-pressed:text-foreground border border-border aria-pressed:border-transparent">Chat</button>
                                    <button type="button" data-channel="email" x-bind:aria-pressed="chan == `email`" x-on:click="chan = `email`" class="h-7 rounded-full px-2.5 text-caption text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus aria-pressed:bg-secondary aria-pressed:text-foreground border border-border aria-pressed:border-transparent">Email</button>
                                    <button type="button" data-channel="whatsapp" x-bind:aria-pressed="chan == `whatsapp`" x-on:click="chan = `whatsapp`" class="h-7 rounded-full px-2.5 text-caption text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus aria-pressed:bg-secondary aria-pressed:text-foreground border border-border aria-pressed:border-transparent">WhatsApp</button>
                            </div>
            <span class="flex-1"></span>
            <div role="group" aria-label="Assignment" class="flex gap-1">
                                    <button type="button" data-scope="all" x-bind:aria-pressed="scopeSel == `all`" x-on:click="scopeSel = `all`" class="h-7 rounded-full px-2.5 text-caption text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus aria-pressed:bg-secondary aria-pressed:text-foreground">Everyone</button>
                                    <button type="button" data-scope="mine" x-bind:aria-pressed="scopeSel == `mine`" x-on:click="scopeSel = `mine`" class="h-7 rounded-full px-2.5 text-caption text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus aria-pressed:bg-secondary aria-pressed:text-foreground">Mine</button>
                                    <button type="button" data-scope="unassigned" x-bind:aria-pressed="scopeSel == `unassigned`" x-on:click="scopeSel = `unassigned`" class="h-7 rounded-full px-2.5 text-caption text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus aria-pressed:bg-secondary aria-pressed:text-foreground">Unassigned</button>
                            </div>
        </div>
    </div>
    <ul x-show="cfg.loading" style="display: none" aria-busy="true" aria-label="Loading conversations" class="flex flex-col gap-1 p-3">
                    <li class="flex items-center gap-3 rounded-control p-2">
                <span class="size-10 rounded-full bg-secondary motion-safe:animate-pulse"></span>
                <span class="flex flex-1 flex-col gap-2">
                    <span class="h-3 w-1/2 rounded bg-secondary motion-safe:animate-pulse"></span>
                    <span class="h-3 w-4/5 rounded bg-secondary motion-safe:animate-pulse"></span>
                </span>
            </li>
                    <li class="flex items-center gap-3 rounded-control p-2">
                <span class="size-10 rounded-full bg-secondary motion-safe:animate-pulse"></span>
                <span class="flex flex-1 flex-col gap-2">
                    <span class="h-3 w-1/2 rounded bg-secondary motion-safe:animate-pulse"></span>
                    <span class="h-3 w-4/5 rounded bg-secondary motion-safe:animate-pulse"></span>
                </span>
            </li>
                    <li class="flex items-center gap-3 rounded-control p-2">
                <span class="size-10 rounded-full bg-secondary motion-safe:animate-pulse"></span>
                <span class="flex flex-1 flex-col gap-2">
                    <span class="h-3 w-1/2 rounded bg-secondary motion-safe:animate-pulse"></span>
                    <span class="h-3 w-4/5 rounded bg-secondary motion-safe:animate-pulse"></span>
                </span>
            </li>
                    <li class="flex items-center gap-3 rounded-control p-2">
                <span class="size-10 rounded-full bg-secondary motion-safe:animate-pulse"></span>
                <span class="flex flex-1 flex-col gap-2">
                    <span class="h-3 w-1/2 rounded bg-secondary motion-safe:animate-pulse"></span>
                    <span class="h-3 w-4/5 rounded bg-secondary motion-safe:animate-pulse"></span>
                </span>
            </li>
                    <li class="flex items-center gap-3 rounded-control p-2">
                <span class="size-10 rounded-full bg-secondary motion-safe:animate-pulse"></span>
                <span class="flex flex-1 flex-col gap-2">
                    <span class="h-3 w-1/2 rounded bg-secondary motion-safe:animate-pulse"></span>
                    <span class="h-3 w-4/5 rounded bg-secondary motion-safe:animate-pulse"></span>
                </span>
            </li>
            </ul>
    <div x-show="!cfg.loading &amp;&amp; rows.length == 0" style="display: none" class="m-3 flex flex-1 flex-col">
        <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card flex-1 border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">No conversations here</p>
                    <p class="text-body-sm text-muted-foreground">New messages show up as they arrive.</p>
            </div>
    </div>
    </div>
    <div x-show="!cfg.loading &amp;&amp; rows.length != 0" role="list" class="flex min-h-0 flex-1 flex-col overflow-y-auto p-1.5">
        <template x-for="c in rows" x-bind:key="c.id">
                            <div data-slot="context-menu" x-data="nqContextMenu(false)" x-modelable="open" class="contents"><div data-slot="context-menu-trigger" x-bind="trigger" x-ref="trigger" class="group/row relative data-popup-open:bg-nq-hover" role="listitem"><button type="button" x-bind:aria-current="c.id == selId ? `true` : null" x-bind:data-unread="isUnread(c) ? `` : null" x-on:click="pick(c.id)"
    class="flex w-full items-start gap-3 rounded-control p-2.5 pe-10 text-start outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus aria-[current=true]:bg-secondary">
    <span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption ">
    <img data-slot="avatar-image" x-show="c.contact.avatar" x-bind:src="c.contact.avatar" x-bind:alt="c.contact.name" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(c.contact.avatar)" role="img" x-bind:aria-label="c.contact.name" x-text="initials(c.contact.name)" class="flex size-full items-center justify-center"></span>
</span>
    <span class="flex min-w-0 flex-1 flex-col gap-0.5">
        <span class="flex items-center gap-1.5">
            <span x-show="c.color" style="display: none" aria-hidden="true" data-slot="color-dot" class="inline-block size-2 shrink-0 rounded-full" x-bind:style="c.color ? `background: var(--nq-tag-` + c.color + `)` : ``"></span>
            <span dir="auto" x-bind:class="isUnread(c) ? `font-semibold` : `font-medium`" class="min-w-0 flex-1 truncate text-body-sm text-foreground" x-text="c.contact.name"></span>
            <svg x-show="c.pinned" style="display: none" aria-label="Pinned" class="size-3 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
</svg>            <svg x-show="c.muted" style="display: none" aria-label="Muted" class="size-3 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10.268 21a2 2 0 0 0 3.464 0"/>
  <path d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"/>
  <path d="m2 2 20 20"/>
  <path d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"/>
</svg>            <span x-show="lastAt(c)" style="display: none" class="shrink-0 text-caption text-muted-foreground" x-text="lastAt(c) ? relative(lastAt(c)) : ``"></span>
        </span>
        <span x-show="c.subject" style="display: none" dir="auto" class="truncate text-caption text-foreground" x-text="c.subject"></span>
        <span class="flex items-center gap-1.5">
            <span dir="auto" x-bind:class="isUnread(c) ? `text-foreground` : `text-muted-foreground`" class="min-w-0 flex-1 truncate text-caption" x-text="preview(c)"></span>
            <span x-show="isUnread(c)" style="display: none" class="grid h-5 min-w-5 shrink-0 place-items-center rounded-full bg-nq-accent px-1 text-caption tabular-nums text-foreground">
                <span aria-hidden="true" x-text="num(c.unread ?? 0)"></span>
                <span class="sr-only" x-text="say(`unreadCount`, { n: num(c.unread ?? 0) })"></span>
            </span>
        </span>
        <span class="flex items-center gap-2">
            <span class="inline-flex items-center gap-1 text-caption text-muted-foreground">
                <svg x-show="c.channel == `chat`" style="display: none" aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>
</svg>                <svg x-show="c.channel == `email`" style="display: none" aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/>
  <rect x="2" y="4" width="20" height="16" rx="2"/>
</svg>                <span x-text="channelLabel(c.channel)"></span>
            </span>
            <span x-show="snoozedText(c)" style="display: none" class="text-caption text-muted-foreground" x-text="snoozedText(c)"></span>
        </span>
    </span>
</button>
<div class="absolute end-1.5 top-1.5">
    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" x-bind:aria-label="say(`rowActions`, { name: c.contact.name })" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 opacity-0 group-focus-within/row:opacity-100 group-hover/row:opacity-100 data-[popup-open]:opacity-100 max-md:opacity-100">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="1"/>
    <circle cx="19" cy="12" r="1"/>
    <circle cx="5" cy="12" r="1"/>
</svg></button>
        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-52"><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="pin" x-on:click="patch(c.id, { pinned: !c.pinned })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg x-show="c.pinned" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/>
  <path d="m2 2 20 20"/>
  <path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/>
</svg>    <svg x-show="!c.pinned" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
</svg>    <span x-text="c.pinned ? t.unpin : t.pin">Pin</span></div>
<div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="read" x-on:click="patch(c.id, { unread: !isUnread(c) })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg x-show="isUnread(c)" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"/>
  <path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"/>
</svg>    <svg x-show="!isUnread(c)" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/>
  <rect x="2" y="4" width="20" height="16" rx="2"/>
</svg>    <span x-text="isUnread(c) ? t.markRead : t.markUnread">Mark as unread</span></div>
<div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="mute" x-on:click="patch(c.id, { muted: !c.muted })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg x-show="c.muted" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10.268 21a2 2 0 0 0 3.464 0"/>
  <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>
</svg>    <svg x-show="!c.muted" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10.268 21a2 2 0 0 0 3.464 0"/>
  <path d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"/>
  <path d="m2 2 20 20"/>
  <path d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"/>
</svg>    <span x-text="c.muted ? t.unmute : t.mute">Mute</span></div>
<div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/>
  <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
  <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
  <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
  <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
</svg>Colour<svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
    <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-40"><div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: null })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 rounded-full border border-border"></span>
            <span class="flex-1">No colour</span>
            <svg x-show="!c.color" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `gray` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-gray)"></span>
                <span class="flex-1">Gray</span>
                <svg x-show="c.color == `gray`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `red` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-red)"></span>
                <span class="flex-1">Red</span>
                <svg x-show="c.color == `red`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `orange` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-orange)"></span>
                <span class="flex-1">Orange</span>
                <svg x-show="c.color == `orange`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `amber` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-amber)"></span>
                <span class="flex-1">Amber</span>
                <svg x-show="c.color == `amber`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `green` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-green)"></span>
                <span class="flex-1">Green</span>
                <svg x-show="c.color == `green`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `teal` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-teal)"></span>
                <span class="flex-1">Teal</span>
                <svg x-show="c.color == `teal`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `blue` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-blue)"></span>
                <span class="flex-1">Blue</span>
                <svg x-show="c.color == `blue`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `violet` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-violet)"></span>
                <span class="flex-1">Violet</span>
                <svg x-show="c.color == `violet`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `pink` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-pink)"></span>
                <span class="flex-1">Pink</span>
                <svg x-show="c.color == `pink`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div></div>
</template></div>
<div data-slot="dropdown-menu-sub" role="none" x-data="nqDropdownSub()" class="contents"><div data-slot="dropdown-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg>Snooze<svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
    <template x-teleport="body">
    <div data-slot="dropdown-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-56"><template x-for="p in snoozeOptions" x-bind:key="p.id">
            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="snooze" x-on:click="snoozeTo(c.id, p.at)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1" x-text="p.label"></span>
                <span class="text-caption text-muted-foreground" x-text="p.hint"></span></div>
        </template>
        <template x-if="c.status == `snoozed`">
            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="unsnooze" x-on:click="snoozeTo(c.id, null)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Unsnooze</div>
        </template></div>
</template></div>
<div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
<div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="archive" x-on:click="patch(c.id, { archived: !c.archived })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg x-show="c.archived" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="5" x="2" y="3" rx="1"/>
  <path d="M4 8v11a2 2 0 0 0 2 2h2"/>
  <path d="M20 8v11a2 2 0 0 1-2 2h-2"/>
  <path d="m9 15 3-3 3 3"/>
  <path d="M12 12v9"/>
</svg>    <svg x-show="!c.archived" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="5" x="2" y="3" rx="1"/>
  <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/>
  <path d="M10 12h4"/>
</svg>    <span x-text="c.archived ? t.unarchive : t.archive">Archive</span></div></div>
</template></div>
</div></div>
                    <template x-teleport="body">
    <div data-slot="context-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open"
        class="fixed z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-52"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="pin" x-on:click="patch(c.id, { pinned: !c.pinned })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg x-show="c.pinned" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89"/>
  <path d="m2 2 20 20"/>
  <path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11"/>
</svg>    <svg x-show="!c.pinned" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 17v5"/>
  <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
</svg>    <span x-text="c.pinned ? t.unpin : t.pin">Pin</span></div>
<div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="read" x-on:click="patch(c.id, { unread: !isUnread(c) })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg x-show="isUnread(c)" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z"/>
  <path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10"/>
</svg>    <svg x-show="!isUnread(c)" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/>
  <rect x="2" y="4" width="20" height="16" rx="2"/>
</svg>    <span x-text="isUnread(c) ? t.markRead : t.markUnread">Mark as unread</span></div>
<div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="mute" x-on:click="patch(c.id, { muted: !c.muted })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg x-show="c.muted" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10.268 21a2 2 0 0 0 3.464 0"/>
  <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>
</svg>    <svg x-show="!c.muted" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M10.268 21a2 2 0 0 0 3.464 0"/>
  <path d="M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742"/>
  <path d="m2 2 20 20"/>
  <path d="M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05"/>
</svg>    <span x-text="c.muted ? t.unmute : t.mute">Mute</span></div>
<div data-slot="context-menu-sub" role="none" x-data="nqContextSub()" class="contents"><div data-slot="context-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/>
  <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/>
  <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/>
  <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/>
  <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>
</svg>Colour<svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
    <template x-teleport="body">
    <div data-slot="context-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-40"><div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: null })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 rounded-full border border-border"></span>
            <span class="flex-1">No colour</span>
            <svg x-show="!c.color" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `gray` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-gray)"></span>
                <span class="flex-1">Gray</span>
                <svg x-show="c.color == `gray`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `red` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-red)"></span>
                <span class="flex-1">Red</span>
                <svg x-show="c.color == `red`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `orange` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-orange)"></span>
                <span class="flex-1">Orange</span>
                <svg x-show="c.color == `orange`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `amber` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-amber)"></span>
                <span class="flex-1">Amber</span>
                <svg x-show="c.color == `amber`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `green` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-green)"></span>
                <span class="flex-1">Green</span>
                <svg x-show="c.color == `green`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `teal` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-teal)"></span>
                <span class="flex-1">Teal</span>
                <svg x-show="c.color == `teal`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `blue` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-blue)"></span>
                <span class="flex-1">Blue</span>
                <svg x-show="c.color == `blue`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `violet` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-violet)"></span>
                <span class="flex-1">Violet</span>
                <svg x-show="c.color == `violet`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                    <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="color" x-on:click="patch(c.id, { color: `pink` })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span aria-hidden="true" class="inline-block size-2.5 shrink-0 rounded-full" style="background: var(--nq-tag-pink)"></span>
                <span class="flex-1">Pink</span>
                <svg x-show="c.color == `pink`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div></div>
</template></div>
<div data-slot="context-menu-sub" role="none" x-data="nqContextSub()" class="contents"><div data-slot="context-menu-sub-trigger" role="menuitem" x-ref="subtrigger" x-bind="subTrigger"
        class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-popup-open:bg-nq-selected"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg>Snooze<svg data-slot="icon" aria-hidden="true" class="rtl:-scale-x-100 ms-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m9 18 6-6-6-6"/>
</svg></div>
    <template x-teleport="body">
    <div data-slot="context-menu-sub-content" x-bind="subPopup" x-init="subPopupEl = $el" x-nq-presence="subOpen" x-anchor.right-start.offset.-4="$refs.subtrigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-56"><template x-for="p in snoozeOptions" x-bind:key="p.id">
            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="snooze" x-on:click="snoozeTo(c.id, p.at)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1" x-text="p.label"></span>
                <span class="text-caption text-muted-foreground" x-text="p.hint"></span></div>
        </template>
        <template x-if="c.status == `snoozed`">
            <div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="unsnooze" x-on:click="snoozeTo(c.id, null)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Unsnooze</div>
        </template></div>
</template></div>
<div data-slot="context-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
<div data-slot="context-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="archive" x-on:click="patch(c.id, { archived: !c.archived })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><svg x-show="c.archived" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="5" x="2" y="3" rx="1"/>
  <path d="M4 8v11a2 2 0 0 0 2 2h2"/>
  <path d="M20 8v11a2 2 0 0 1-2 2h-2"/>
  <path d="m9 15 3-3 3 3"/>
  <path d="M12 12v9"/>
</svg>    <svg x-show="!c.archived" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="20" height="5" x="2" y="3" rx="1"/>
  <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/>
  <path d="M10 12h4"/>
</svg>    <span x-text="c.archived ? t.unarchive : t.archive">Archive</span></div></div>
</template></div>
                    </template>
    </div>
</section>
    <template x-if="showThread">
    <div class="flex min-h-0 min-w-0 flex-1 flex-col">
        <template x-if="conv">
            <section x-bind:aria-label="conv.contact.name" class="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
                <header class="flex items-center gap-2 border-b border-border bg-card px-3 py-2.5">
                    <button data-slot="button"
     type="button"                         x-show="compact" style="display: none" aria-label="Back to conversations" x-on:click="pick(null)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m12 19-7-7 7-7"/>
  <path d="M19 12H5"/>
</svg></button>
                    <span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption ">
    <img data-slot="avatar-image" x-show="conv.contact.avatar" x-bind:src="conv.contact.avatar" x-bind:alt="conv.contact.name" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(conv.contact.avatar)" role="img" x-bind:aria-label="conv.contact.name" x-text="initials(conv.contact.name)" class="flex size-full items-center justify-center"></span>
</span>
                    <div class="flex min-w-0 flex-1 flex-col">
                        <h2 dir="auto" class="truncate text-label text-foreground" x-text="conv.contact.name"></h2>
                        <span class="flex items-center gap-2 truncate text-caption text-muted-foreground">
                            <span class="inline-flex items-center gap-1 text-caption text-muted-foreground">
                                <svg x-show="conv.channel == `chat`" style="display: none" aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>
</svg>                                <svg x-show="conv.channel == `email`" style="display: none" aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/>
  <rect x="2" y="4" width="20" height="16" rx="2"/>
</svg>                                <span x-text="channelLabel(conv.channel)"></span>
                            </span>
                            <span x-show="conv.status == `closed`" style="display: none">Closed</span>
                        </span>
                    </div>
                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" aria-label="Assign to" data-action="assign" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <span x-show="assignee" style="display: none"><span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-5 text-[9px] ">
    <img data-slot="avatar-image" x-show="assignee?.avatar" x-bind:src="assignee?.avatar" x-bind:alt="assignee?.name ?? ``" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(assignee?.avatar)" role="img" x-bind:aria-label="assignee?.name ?? ``" x-text="initials(assignee?.name ?? ``)" class="flex size-full items-center justify-center"></span>
</span>
</span>
                            <svg x-show="!assignee" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <circle cx="12" cy="10" r="3"/>
  <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/>
</svg>                            <span class="hidden max-w-24 truncate sm:inline" x-text="assignee ? assignee.name : t.unassigned">Unassigned</span></button>
                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-52"><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Assign to</div>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="assign-me" x-on:click="patch(conv.id, { assigneeId: cfg.me })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Assign to me</div>
                            <template x-for="a in agents" x-bind:key="a.id">
                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="assign-agent" x-on:click="patch(conv.id, { assigneeId: a.id })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-5 text-[9px] ">
    <img data-slot="avatar-image" x-show="a.avatar" x-bind:src="a.avatar" x-bind:alt="a.name" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(a.avatar)" role="img" x-bind:aria-label="a.name" x-text="initials(a.name)" class="flex size-full items-center justify-center"></span>
</span>
                                    <span class="flex-1 truncate" x-text="a.name"></span>
                                    <svg x-show="a.id == conv.assigneeId" style="display: none" aria-hidden="true" class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></div>
                            </template>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="unassign" x-on:click="patch(conv.id, { assigneeId: null })" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Unassigned</div></div>
</template></div>
                    <div data-slot="dropdown-menu" x-data="nqDropdownMenu(false)" x-modelable="open" class="contents"><button data-slot="dropdown-menu-trigger"
     type="button"                         x-bind="trigger" x-ref="trigger" aria-label="Snooze" data-action="snooze-menu" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 6v6l4 2"/>
</svg></button>
                        <template x-teleport="body">
    <div data-slot="dropdown-menu-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.bottom-end.offset.4="$refs.trigger"
        class="z-50 overflow-hidden rounded-floating border border-border bg-popover p-1.5 text-popover-foreground shadow-floating outline-none max-h-[var(--available-height)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 min-w-56"><div data-slot="dropdown-menu-label" role="presentation" class="px-2.5 pt-1.5 pb-1 text-caption font-medium text-muted-foreground">Snooze</div>
                            <template x-for="p in snoozeOptions" x-bind:key="p.id">
                                <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="snooze" x-on:click="snoozeTo(conv.id, p.at)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground"><span class="flex-1" x-text="p.label"></span>
                                    <span class="text-caption text-muted-foreground" x-text="p.hint"></span></div>
                            </template>
                            <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="snooze-custom" x-on:click="openSnoozeDialog()" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Pick a date and time</div>
                            <template x-if="conv.status == `snoozed`">
                                <div>
                                    <div data-slot="dropdown-menu-separator" role="separator" aria-orientation="horizontal" class="-mx-1.5 my-1.5 h-px bg-border"></div>
                                    <div data-slot="dropdown-menu-item" role="menuitem" data-variant="default" x-bind="item"
        data-action="unsnooze" x-on:click="snoozeTo(conv.id, null)" class="relative flex h-nav-row min-h-[var(--nq-touch-min,0px)] cursor-default select-none items-center gap-2.5 rounded-control px-2.5 text-body-sm text-foreground outline-none data-highlighted:bg-nq-selected data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">Unsnooze</div>
                                </div>
                            </template></div>
</template></div>
                    <button data-slot="button"
     type="button"                         x-show="conv.status == `closed`" style="display: none" data-action="reopen" aria-label="Reopen" x-on:click="patch(conv.id, { status: `open` })" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M9 14 4 9l5-5"/>
  <path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>
</svg></button>
                    <button data-slot="button"
     type="button"                         x-show="conv.status != `closed`" data-action="close" aria-label="Close conversation" x-on:click="patch(conv.id, { status: `closed` })" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg></button>
                    <button data-slot="button"
     type="button"                         data-action="find" aria-label="Find in conversation" x-bind:aria-pressed="finding" x-on:click="toggleFind()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg></button>
                                        <button data-slot="button"
     type="button"                         data-action="contact" x-bind:aria-label="contactOpen ? t.hideContact : t.openContact" x-bind:aria-pressed="contactOpen" x-on:click="contactOpen = !contactOpen" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control p-0">
        <svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2"/>
  <path d="M15 3v18"/>
</svg></button>
                </header>
                <div x-show="finding" style="display: none" data-slot="thread-search" role="search" aria-label="Find in conversation" class="flex items-center gap-2 border-b border-border bg-card px-3 py-2">
                    <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>                    <input data-slot="input" type="search"
                    placeholder="Find in conversation" aria-label="Find in conversation" x-bind:value="findQuery" x-on:input="typeFind($event.target.value)" x-on:keydown="onFindKey($event)" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-8 flex-1">
                    <span role="status" class="min-w-16 text-center text-caption tabular-nums text-muted-foreground" x-text="findLabel"></span>
                    <button data-slot="button"
     type="button"                         aria-label="Previous match" x-bind:disabled="matches.length == 0 ? true : null" x-on:click="stepFind(-1)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m18 15-6-6-6 6"/>
</svg></button>
                    <button data-slot="button"
     type="button"                         aria-label="Next match" x-bind:disabled="matches.length == 0 ? true : null" x-on:click="stepFind(1)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m6 9 6 6 6-6"/>
</svg></button>
                    <button data-slot="button"
     type="button"                         aria-label="Close search" x-on:click="closeFind()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                </div>
                <div data-slot="chat-thread" x-data="nqChatThread" class="relative flex min-h-0 flex-col flex-1">
    <div x-ref="scroller" x-on:scroll="onScroll()" role="log" aria-live="polite" aria-relevant="additions" aria-label="Messages" tabindex="0"
        class="min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
        <div x-ref="content" class="flex flex-col gap-3 p-4"><template x-for="row in thread" x-bind:key="row.key">
                        <div class="flex flex-col gap-3" x-bind:data-message-id="row.m.id">
    <div x-show="row.day" style="display: none" class="flex items-center gap-3 text-caption text-muted-foreground">
        <span class="h-px flex-1 bg-border"></span>
        <span x-text="row.day"></span>
        <span class="h-px flex-1 bg-border"></span>
    </div>
    <template x-if="row.m.kind == `system`">
        <div data-slot="inbox-event" class="flex items-center gap-3 text-caption text-muted-foreground">
            <span aria-hidden="true" class="h-px flex-1 bg-border"></span>
            <span dir="auto" class="text-center" x-text="row.m.body"></span>
            <time x-text="when(row.m.at, { timeStyle: `short` })"></time>
            <span aria-hidden="true" class="h-px flex-1 bg-border"></span>
        </div>
    </template>
    <template x-if="row.m.kind == `note`">
        <div data-slot="inbox-note" class="flex flex-col gap-1 rounded-card border border-dashed border-nq-warning/50 bg-nq-warning-soft p-3">
            <div class="flex items-center gap-2 text-caption text-muted-foreground">
                <span data-slot="badge" class="inline-flex h-5 items-center gap-1 rounded-full border border-transparent bg-nq-warning-soft px-2 text-caption text-nq-warning-text [&_svg]:size-3"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
  <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>Note</span>
                <span class="text-label text-foreground" x-text="row.who"></span>
                <time x-text="when(row.m.at, { timeStyle: `short` })"></time>
            </div>
            <p dir="auto" class="whitespace-pre-wrap text-start text-body text-nq-fg-body [overflow-wrap:anywhere]" x-html="row.html"></p>
        </div>
    </template>
    <template x-if="row.m.kind != `system` &amp;&amp; row.m.kind != `note` &amp;&amp; isEmail">
        <article data-slot="inbox-email" x-bind:data-direction="row.m.direction" class="flex flex-col gap-3 rounded-card border border-border bg-card p-4">
            <header class="flex items-start gap-3">
                <span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption ">
    <img data-slot="avatar-image" x-show="row.out ? row.m.author?.avatar : conv.contact.avatar" x-bind:src="row.out ? row.m.author?.avatar : conv.contact.avatar" x-bind:alt="row.who" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(row.out ? row.m.author?.avatar : conv.contact.avatar)" role="img" x-bind:aria-label="row.who" x-text="initials(row.who)" class="flex size-full items-center justify-center"></span>
</span>
                <div class="flex min-w-0 flex-1 flex-col">
                    <span class="flex flex-wrap items-center gap-x-2 text-label text-foreground">
                        <span dir="auto" x-text="row.who"></span>
                        <span x-show="row.out" style="display: none" data-slot="badge" class="inline-flex h-5 items-center rounded-full border border-border px-2 text-caption text-muted-foreground">Reply</span>
                    </span>
                    <span x-show="row.m.to?.length" style="display: none" class="truncate text-caption text-muted-foreground">
                        To: <bdi dir="ltr" x-text="(row.m.to ?? []).join(`, `)"></bdi>
                        <span x-show="row.m.cc?.length" style="display: none"> · Cc: <bdi dir="ltr" x-text="(row.m.cc ?? []).join(`, `)"></bdi></span>
                    </span>
                </div>
                <time class="shrink-0 text-caption text-muted-foreground" x-text="when(row.m.at, { dateStyle: `medium`, timeStyle: `short` })"></time>
            </header>
            <h3 x-show="row.m.subject" style="display: none" dir="auto" class="text-h3 text-foreground" x-text="row.m.subject"></h3>
            <p dir="auto" class="whitespace-pre-wrap text-start text-body text-nq-fg-body [overflow-wrap:anywhere]" x-html="row.html"></p>
            <ul x-show="row.m.attachments?.length" style="display: none" data-slot="attachment-list" class=" flex flex-wrap gap-1.5">
    <template x-for="a in (row.m.attachments ?? [])" x-bind:key="a.id">
        <li>
            <a x-bind:href="a.url ?? `#`" x-bind:download="a.name" class="flex max-w-56 items-center gap-2 rounded-control border border-border bg-card p-1.5 text-foreground no-underline outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                <img x-show="a.kind == `image` &amp;&amp; a.url" x-bind:src="a.url" alt="" loading="lazy" class="size-10 rounded-[4px] object-cover" style="display: none">
                <svg x-show="a.kind != `image` || !a.url" aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                <span class="flex min-w-0 flex-col">
                    <span dir="auto" class="truncate text-body-sm" x-text="a.name"></span>
                    <bdi x-show="a.size" dir="ltr" class="text-caption text-muted-foreground" x-text="a.size ? bytes(a.size) : ``"></bdi>
                </span>
            </a>
        </li>
    </template>
</ul>
<a x-show="row.m.linkPreview" style="display: none" data-slot="link-preview" x-bind:href="row.m.linkPreview?.url" target="_blank" rel="noopener noreferrer"
    x-bind:aria-label="`Open link: ` + (row.m.linkPreview?.title ?? host(row.m.linkPreview?.url ?? ``))"
    class="mt-2 flex w-64 max-w-full flex-col overflow-hidden rounded-control border border-border bg-card text-start no-underline outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
    <img x-show="row.m.linkPreview?.image" x-bind:src="row.m.linkPreview?.image" alt="" loading="lazy" class="aspect-video w-full object-cover" style="display: none">
    <span class="flex flex-col gap-0.5 p-2.5">
        <span dir="ltr" class="truncate text-caption text-muted-foreground" x-text="row.m.linkPreview?.siteName ?? host(row.m.linkPreview?.url ?? ``)"></span>
        <span x-show="row.m.linkPreview?.title" style="display: none" dir="auto" class="line-clamp-2 text-label text-foreground" x-text="row.m.linkPreview?.title"></span>
        <span x-show="row.m.linkPreview?.description" style="display: none" dir="auto" class="line-clamp-2 text-caption text-muted-foreground" x-text="row.m.linkPreview?.description"></span>
    </span>
</a>
            <span x-show="row.m.status == `sending`" style="display: none" role="status" class="text-caption text-muted-foreground">Sending</span>
            <span x-show="row.m.status == `error`" style="display: none" class="flex items-center gap-2 text-caption text-nq-danger-text">
                <span role="alert">Failed to send</span>
                <button data-slot="button"
     type="button"                         x-on:click="retry(row.m)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        Retry</button>
            </span>
            <footer>
                <button data-slot="button"
     type="button"                         data-action="reply" x-on:click="startReply(row.m)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20v-7a4 4 0 0 0-4-4H4"/>
  <path d="M9 14 4 9l5-5"/>
</svg>Reply</button>
            </footer>
        </article>
    </template>
    <template x-if="row.m.kind != `system` &amp;&amp; row.m.kind != `note` &amp;&amp; !isEmail">
        <div data-slot="inbox-message" x-bind:data-direction="row.m.direction" x-bind:class="row.out ? `flex-row-reverse self-end` : `self-start`" class="group flex max-w-[88%] items-start gap-1">
            <div class="flex min-w-0 flex-col gap-1">
                <div data-slot="chat-message" x-bind:data-side="row.out ? `user` : `assistant`" x-bind:data-status="row.m.status == `sending` || row.m.status == `error` ? row.m.status : null"
                    x-bind:class="row.out ? `flex-row-reverse self-end` : `self-start`" class="flex max-w-full items-start gap-2">
                    <span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-6 text-[10px] mt-0.5">
    <img data-slot="avatar-image" x-show="row.out ? row.m.author?.avatar : conv.contact.avatar" x-bind:src="row.out ? row.m.author?.avatar : conv.contact.avatar" x-bind:alt="row.who" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(row.out ? row.m.author?.avatar : conv.contact.avatar)" role="img" x-bind:aria-label="row.who" x-text="initials(row.who)" class="flex size-full items-center justify-center"></span>
</span>
                    <div x-bind:class="row.out ? `items-end` : `items-start`" class="flex min-w-0 flex-col gap-1">
                        <div class="flex items-center gap-2 text-caption text-muted-foreground">
                            <span class="text-label text-foreground" x-text="row.who"></span>
                            <time x-text="when(row.m.at, { timeStyle: `short` })"></time>
                        </div>
                        <div data-slot="chat-bubble" x-bind:class="(row.out ? `bg-secondary text-secondary-foreground` : `border border-border bg-card text-nq-fg-body`) + (row.m.status == `error` ? ` border border-nq-danger` : ``)" class="min-w-0 rounded-card px-3 py-2 text-body">
                            <div class="flex flex-col">
                                <div x-show="row.m.replyTo" style="display: none" data-slot="reply-quote" class="mb-1.5 rounded-[4px] border-s-2 border-nq-accent bg-background/60 py-1 ps-2 pe-2 text-start">
                                    <button type="button" x-bind:aria-label="`Go to the original message: ` + (row.m.replyTo?.author ?? ``)" x-on:click="jump(row.m.replyTo.id)" class="block w-full text-start outline-none focus-visible:outline-2 focus-visible:outline-nq-focus">
                                        <span dir="auto" class="block truncate text-caption font-medium text-foreground" x-text="row.m.replyTo?.author"></span>
                                        <span dir="auto" class="line-clamp-2 block text-caption text-muted-foreground" x-text="row.m.replyTo?.excerpt"></span>
                                    </button>
                                </div>
                                <div x-show="row.m.kind == `voice` &amp;&amp; row.m.voice" style="display: none" data-slot="voice-player" class="flex w-56 max-w-full items-center gap-2 py-1">
                                    <button type="button" x-bind:aria-label="playing[row.m.id] ? `Pause` : `Play`" x-on:click="playVoice(row.m)"
                                        class="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground outline-none focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4">
                                        <svg x-show="playing[row.m.id]" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect x="14" y="3" width="5" height="18" rx="1"/>
  <rect x="5" y="3" width="5" height="18" rx="1"/>
</svg>                                        <svg x-show="!playing[row.m.id]" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>
</svg>                                    </button>
                                    <span aria-hidden="true" dir="ltr" class="flex h-6 flex-1 items-center gap-px">
                                        <template x-for="(h, i) in (row.m.voice ? bars(row.m) : [])" x-bind:key="i">
                                            <span class="w-0.5 flex-1 rounded-full bg-muted-foreground/60" x-bind:style="`height: ` + Math.round(h * 100) + `%`"></span>
                                        </template>
                                    </span>
                                    <bdi dir="ltr" class="text-caption tabular-nums text-muted-foreground" x-text="row.m.voice ? duration(row.m.voice.duration) : ``"></bdi>
                                </div>
                                <div x-show="row.m.kind == `location` &amp;&amp; row.m.location" style="display: none" data-slot="location-card" class="my-1 w-60 max-w-full overflow-hidden rounded-control border border-border bg-card">
                                    <div aria-hidden="true" dir="ltr" class="relative grid h-24 place-items-center bg-secondary [background-image:linear-gradient(var(--nq-line)_1px,transparent_1px),linear-gradient(90deg,var(--nq-line)_1px,transparent_1px)] [background-size:2rem_2rem]">
                                        <svg class="size-7 -translate-y-2 fill-current stroke-background text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
  <circle cx="12" cy="10" r="3"/>
</svg>                                    </div>
                                    <div class="flex flex-col gap-0.5 p-2.5">
                                        <span dir="auto" class="text-label text-foreground" x-text="row.m.location?.label ?? t.locationMessage"></span>
                                        <bdi dir="ltr" class="text-caption tabular-nums text-muted-foreground" x-text="row.m.location ? coords(row.m.location) : ``"></bdi>
                                        <a x-bind:href="row.m.location ? mapsLink(row.m.location) : `#`" target="_blank" rel="noopener noreferrer" class="mt-1 inline-flex items-center gap-1 self-start text-caption text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current">Open in maps<svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg></a>
                                    </div>
                                </div>
                                <ul x-show="row.m.attachments?.length" style="display: none" data-slot="attachment-list" class="my-1 flex flex-wrap gap-1.5">
    <template x-for="a in (row.m.attachments ?? [])" x-bind:key="a.id">
        <li>
            <a x-bind:href="a.url ?? `#`" x-bind:download="a.name" class="flex max-w-56 items-center gap-2 rounded-control border border-border bg-card p-1.5 text-foreground no-underline outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                <img x-show="a.kind == `image` &amp;&amp; a.url" x-bind:src="a.url" alt="" loading="lazy" class="size-10 rounded-[4px] object-cover" style="display: none">
                <svg x-show="a.kind != `image` || !a.url" aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                <span class="flex min-w-0 flex-col">
                    <span dir="auto" class="truncate text-body-sm" x-text="a.name"></span>
                    <bdi x-show="a.size" dir="ltr" class="text-caption text-muted-foreground" x-text="a.size ? bytes(a.size) : ``"></bdi>
                </span>
            </a>
        </li>
    </template>
</ul>
<a x-show="row.m.linkPreview" style="display: none" data-slot="link-preview" x-bind:href="row.m.linkPreview?.url" target="_blank" rel="noopener noreferrer"
    x-bind:aria-label="`Open link: ` + (row.m.linkPreview?.title ?? host(row.m.linkPreview?.url ?? ``))"
    class="mt-2 flex w-64 max-w-full flex-col overflow-hidden rounded-control border border-border bg-card text-start no-underline outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
    <img x-show="row.m.linkPreview?.image" x-bind:src="row.m.linkPreview?.image" alt="" loading="lazy" class="aspect-video w-full object-cover" style="display: none">
    <span class="flex flex-col gap-0.5 p-2.5">
        <span dir="ltr" class="truncate text-caption text-muted-foreground" x-text="row.m.linkPreview?.siteName ?? host(row.m.linkPreview?.url ?? ``)"></span>
        <span x-show="row.m.linkPreview?.title" style="display: none" dir="auto" class="line-clamp-2 text-label text-foreground" x-text="row.m.linkPreview?.title"></span>
        <span x-show="row.m.linkPreview?.description" style="display: none" dir="auto" class="line-clamp-2 text-caption text-muted-foreground" x-text="row.m.linkPreview?.description"></span>
    </span>
</a>
                                <p x-show="row.html &amp;&amp; row.m.kind != `voice`" style="display: none" dir="auto" class="whitespace-pre-wrap text-start [overflow-wrap:anywhere]" x-html="row.html"></p>
                            </div>
                        </div>
                        <div x-show="row.m.status == `sending`" style="display: none" class="flex items-center gap-1.5 text-caption text-muted-foreground"><svg data-slot="spinner" aria-hidden="true" class="animate-spin motion-reduce:animate-none size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg><span role="status">Sending</span></div>
                        <div x-show="row.m.status == `error`" style="display: none" class="flex items-center gap-1.5 text-caption text-muted-foreground">
                            <svg aria-hidden="true" class="size-3 text-nq-danger-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <line x1="12" x2="12" y1="8" y2="12"/>
  <line x1="12" x2="12.01" y1="16" y2="16"/>
</svg>                            <span role="alert" class="text-nq-danger-text">Failed to send</span>
                            <button data-slot="button"
     type="button"                         x-on:click="retry(row.m)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        Retry</button>
                        </div>
                    </div>
                </div>
                <div x-show="row.m.reactions?.length" style="display: none" data-slot="message-reactions" role="group" aria-label="Reactions" x-bind:class="row.out ? `justify-end` : `ms-8 justify-start`" class="flex flex-wrap gap-1">
                    <template x-for="r in (row.m.reactions ?? [])" x-bind:key="r.emoji">
                        <button type="button" x-bind:aria-pressed="reacted(r)" x-bind:aria-label="say(`reactedWith`, { emoji: r.emoji, n: num(r.by.length) })" x-on:click="react(row.m, r.emoji)"
                            x-bind:class="reacted(r) ? `border-nq-accent bg-nq-accent/15 text-foreground` : `border-border bg-card text-muted-foreground hover:bg-nq-hover`"
                            class="inline-flex h-6 items-center gap-1 rounded-full border px-2 text-caption tabular-nums outline-none transition-colors duration-150 ease-nq focus-visible:outline-2 focus-visible:outline-nq-focus">
                            <span aria-hidden="true" x-text="r.emoji"></span>
                            <span x-text="num(r.by.length)"></span>
                        </button>
                    </template>
                </div>
            </div>
            <div data-slot="message-actions" class="flex shrink-0 items-center self-center opacity-0 transition-opacity duration-150 group-focus-within:opacity-100 group-hover:opacity-100 max-md:opacity-100">
                <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button data-slot="popover-trigger"
     type="button"                         x-bind:data-popup-open="open ? &#039;&#039; : undefined" x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" :aria-expanded="open" aria-label="React" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
  <line x1="9" x2="9.01" y1="9" y2="9"/>
  <line x1="15" x2="15.01" y1="9" y2="9"/>
</svg></button>
                    <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.top.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 flex w-auto gap-0.5 p-1"><template x-for="e in quick" x-bind:key="e">
                            <button type="button" x-bind:aria-label="e" x-on:click="react(row.m, e); close()" x-text="e"
                                class="grid size-8 place-items-center rounded-control text-lg outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus"></button>
                        </template></div>
</template>
</div>
                <button data-slot="button"
     type="button"                         data-action="reply" aria-label="Reply" x-on:click="startReply(row.m)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 20v-7a4 4 0 0 0-4-4H4"/>
  <path d="M9 14 4 9l5-5"/>
</svg></button>
            </div>
        </div>
    </template>
</div>
                    </template>
                    <div x-show="conv.typing" style="display: none" class="flex items-center gap-2 text-caption text-muted-foreground">
                        <span data-slot="typing-indicator" role="status" x-bind:aria-label="conv.contact.name + ` ` + t.typing" class="inline-flex items-center gap-1 py-1">
            <span aria-hidden="true" style="animation-delay: 0ms" class="size-1.5 rounded-full bg-muted-foreground motion-safe:animate-pulse"></span>
            <span aria-hidden="true" style="animation-delay: 150ms" class="size-1.5 rounded-full bg-muted-foreground motion-safe:animate-pulse"></span>
            <span aria-hidden="true" style="animation-delay: 300ms" class="size-1.5 rounded-full bg-muted-foreground motion-safe:animate-pulse"></span>
        <span class="sr-only">Assistant is typing</span>
</span>
                    </div></div>
    </div>
    <button data-slot="chat-jump"
     type="button"                         x-show="away" x-cloak="x-cloak" x-on:click="jump()" aria-label="Jump to latest" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover size-control-sm p-0 absolute end-4 bottom-3 rounded-full shadow-sm">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 5v14"/>
  <path d="m19 12-7 7-7-7"/>
</svg></button>
</div>
                <div data-slot="inbox-composer" x-bind:data-mode="mode" class="flex flex-col gap-2 border-t border-border bg-card p-3">
    <div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('reply')" x-modelable="value" x-id="['nq-tabs']" x-model="mode" class="flex flex-col gap-0">
    <div data-slot="tabs-list" data-variant="segmented" aria-orientation="horizontal" x-bind="list"
    aria-label="Reply" class="relative z-0 flex max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden w-fit gap-0.5 rounded-control bg-secondary p-0.5">
    <button type="button" data-slot="tabs-tab" x-bind="tab('reply')"
     data-active aria-selected="true"         class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-7 rounded-[calc(var(--radius-control)-2px)] px-3">Reply</button>
            <button type="button" data-slot="tabs-tab" x-bind="tab('note')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-7 rounded-[calc(var(--radius-control)-2px)] px-3">Internal note</button>
            <span data-slot="tabs-indicator" aria-hidden="true"
    class="absolute -z-10 transition-[left,width] duration-200 ease-nq left-[var(--active-tab-left)] w-[var(--active-tab-width)] top-[var(--active-tab-top)] h-[var(--active-tab-height)] rounded-[calc(var(--radius-control)-2px)] bg-background shadow-xs"></span>
</div>
</div>
    <p x-show="noteMode" style="display: none" class="text-caption text-muted-foreground">Only your team sees notes.</p>
    <div x-show="replyTo" style="display: none" class="flex items-start gap-2">
        <div data-slot="reply-quote" class="mb-0 flex-1 rounded-[4px] border-s-2 border-nq-accent bg-background/60 py-1 ps-2 pe-2 text-start">
            <span dir="auto" class="block truncate text-caption font-medium text-foreground" x-text="replyTo ? quoteAuthor(replyTo) : ``"></span>
            <span dir="auto" class="line-clamp-2 block text-caption text-muted-foreground" x-text="replyTo ? quoteExcerpt(replyTo) : ``"></span>
        </div>
        <button data-slot="button"
     type="button"                         aria-label="Cancel reply" x-on:click="replyTo = null" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
    </div>
    <div x-bind:class="noteMode ? `border-dashed bg-nq-warning-soft` : `bg-background`" class="flex flex-col gap-2 rounded-card border border-input p-2 transition-colors duration-150 ease-nq focus-within:border-nq-focus">
        <div x-show="richMode" style="display: none" class="flex flex-col gap-2">
            <div class="flex items-center gap-2 text-caption text-muted-foreground">
                <span class="w-12 shrink-0">To</span>
                <bdi dir="ltr" class="min-w-0 flex-1 truncate text-foreground" x-text="toWho"></bdi>
                <button data-slot="button"
     type="button"                         x-show="!showCc" data-action="add-cc" x-on:click="showCc = true" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground underline decoration-nq-line underline-offset-4 hover:decoration-current h-auto px-0">
        Add Cc</button>
            </div>
            <label x-show="showCc" style="display: none" class="flex items-center gap-2 text-caption text-muted-foreground">
                <span class="w-12 shrink-0">Cc</span>
                <input data-slot="input" type="text"
     dir="ltr"                 x-model="ccText" placeholder="name@example.com, another@example.com" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] text-start h-8">
            </label>
            <label class="flex items-center gap-2 text-caption text-muted-foreground">
                <span class="w-12 shrink-0">Subject</span>
                <input data-slot="input" type="text"
                    dir="auto" x-model="subject" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-8">
            </label>
        </div>
        <div x-show="mentionOptions.length" style="display: none" role="listbox" aria-label="Conversations" class="flex max-h-40 flex-col gap-0.5 overflow-y-auto rounded-control border border-border bg-popover p-1">
            <template x-for="(a, i) in mentionOptions" x-bind:key="a.id">
                <button type="button" role="option" x-bind:aria-selected="i == mentionActive" x-on:mousedown.prevent="pickMention(a)" x-bind:class="i == mentionActive ? `bg-nq-hover` : ``"
                    class="flex items-center gap-2 rounded-control px-2 py-1.5 text-start text-body-sm text-foreground outline-none">
                    <span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-5 text-[9px] ">
    <img data-slot="avatar-image" x-show="a.avatar" x-bind:src="a.avatar" x-bind:alt="a.name" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(a.avatar)" role="img" x-bind:aria-label="a.name" x-text="initials(a.name)" class="flex size-full items-center justify-center"></span>
</span>
                    <span class="flex-1 truncate" x-text="a.name"></span>
                </button>
            </template>
        </div>
        <textarea data-slot="textarea"
                dir="auto" x-model="draftText" x-bind:placeholder="placeholder" x-bind:aria-label="noteMode ? t.note : t.message" x-bind:rows="richMode ? 4 : 2" x-on:input="onDraftInput()" x-on:keydown="onDraftKey($event)" class="w-full min-w-0 rounded-control border-input text-body text-foreground transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] min-h-14 resize-none border-0 bg-transparent px-1 py-1 focus-visible:outline-0"></textarea>
        <ul x-show="files.length" style="display: none" class="flex flex-wrap gap-1.5">
            <template x-for="(f, i) in files" x-bind:key="f.name + i">
                <li class="inline-flex h-7 max-w-48 items-center gap-1 rounded-full border border-border bg-secondary ps-2.5 pe-1 text-caption text-foreground">
                    <span dir="auto" class="truncate" x-text="f.name"></span>
                    <button type="button" x-bind:aria-label="say(`removeAttachment`, { name: f.name })" x-on:click="removeFile(i)"
                        class="grid size-5 place-items-center rounded-full outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg>                    </button>
                </li>
            </template>
        </ul>
        <div class="flex items-center gap-0.5">
            <input type="file" multiple hidden x-ref="fileInput" x-on:change="addFiles($event)">
            <button data-slot="button"
     type="button"                         data-action="attach" aria-label="Attach files" x-on:click="$refs.fileInput.click()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"/>
</svg></button>
            <span x-show="!richMode" style="display: none" class="contents">
                <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" class="contents">
    <button data-slot="popover-trigger"
     type="button"                         x-bind:data-popup-open="open ? &#039;&#039; : undefined" x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" :aria-expanded="open" aria-label="Choose emoji" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control p-0">
        <svg data-slot="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="12" cy="12" r="10"/>
  <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
  <line x1="9" x2="9.01" y1="9" y2="9"/>
  <line x1="15" x2="15.01" y1="9" y2="9"/>
</svg></button>
    <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.top-start.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 w-auto overflow-hidden p-0"><div data-slot="emoji-picker" x-data="nqEmojiPicker('none', 8)" x-on:keydown="onKey($event)"
    x-on:emoji-select="close(); insertEmoji($event.detail.emoji)" class="isolate flex h-80 w-72 flex-col bg-popover text-popover-foreground">
    <div class="flex items-center gap-2 border-b border-border p-2">
        <div class="relative min-w-0 flex-1">
            <svg data-slot="icon" aria-hidden="true" class="pointer-events-none absolute inset-y-0 start-2.5 my-auto size-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="m21 21-4.34-4.34"/>
  <circle cx="11" cy="11" r="8"/>
</svg>            <input x-model="query" type="search" data-slot="emoji-picker-search" aria-label="Search emoji" placeholder="Search emoji"
                class="h-control-sm w-full min-w-0 rounded-control border border-input bg-card ps-8 pe-2 text-body-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus">
        </div>
        <button type="button" data-slot="emoji-picker-skin-tone" aria-label="Change skin tone" x-on:click="cycleTone()" x-text="toneGlyph"
            class="inline-flex size-control-sm shrink-0 items-center justify-center rounded-control text-body outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus">✋</button>
    </div>
    <div data-slot="emoji-picker-viewport" class="relative flex-1 overflow-y-auto outline-none">
        <div x-show="! data" role="status" class="absolute inset-0 flex items-center justify-center text-body-sm text-muted-foreground">Loading emoji…</div>
        <div x-show="data &amp;&amp; ! count" style="display:none" role="status" class="absolute inset-0 flex items-center justify-center px-4 text-center text-body-sm text-muted-foreground"
            x-text="`No emoji found for “:q”.`.replace(`:q`, query)"></div>
        <div x-show="data &amp;&amp; count > 0" style="display:none" role="grid" class="select-none pb-1">
            <template x-for="s in sections" x-bind:key="s.index">
                <section>
                    <div data-slot="emoji-picker-category" class="sticky top-0 bg-popover px-3 py-1.5 text-start text-caption font-medium text-muted-foreground" x-text="s.label"></div>
                    <div data-slot="emoji-picker-row" class="grid scroll-my-1 px-1.5" style="grid-template-columns: repeat(8, minmax(0, 1fr)); justify-items: center">
                        <template x-for="item in s.items" x-bind:key="item.emoji.emoji">
                            <button type="button" data-slot="emoji-picker-emoji" role="gridcell"
                                x-bind:aria-label="item.emoji.label" x-bind:data-index="item.flat" x-bind:data-active="item.flat === active ? '' : null"
                                x-bind:tabindex="item.flat === active ? 0 : -1" x-on:click="pick(item.emoji)" x-on:focus="active = item.flat" x-text="glyph(item.emoji)"
                                class="flex size-8 items-center justify-center rounded-control text-[20px] leading-none outline-none hover:bg-nq-hover data-[active]:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus"></button>
                        </template>
                    </div>
                </section>
            </template>
        </div>
    </div>
</div></div>
</template>
</div>
            </span>
                            <span x-show="!noteMode" class="contents">
                    <div data-slot="popover" x-data="nqPopover(false)" x-modelable="open" x-id="['nq-popover']" x-model="snipOpen" class="contents">
    <button data-slot="popover-trigger"
     type="button"                         x-bind:data-popup-open="open ? &#039;&#039; : undefined" x-ref="trigger" aria-haspopup="dialog" x-on:click="toggle()" :aria-expanded="open" data-action="snippets" aria-label="Saved replies" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z"/>
</svg></button>
                        <template x-teleport="body">
    <div data-slot="popover-content" x-bind="popup" x-init="popupEl = $el" x-nq-presence="open" x-anchor.top-start.offset.6="$refs.trigger"
        class="z-50 max-w-[var(--available-width)] rounded-floating border border-border bg-popover text-body-sm text-popover-foreground shadow-floating outline-none transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 flex w-80 flex-col gap-2 p-2"><input data-slot="snippet-search" type="text"
                    role="combobox" aria-expanded="true" aria-label="Search saved replies" placeholder="Search saved replies" x-model="snipQuery" x-on:input="snipActive = 0" x-on:keydown="onSnipKey($event)" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control">
                            <ul role="listbox" aria-label="Saved replies" class="flex max-h-64 flex-col gap-0.5 overflow-y-auto">
                                <li x-show="snippetList.length == 0" style="display: none" role="presentation" class="px-2 py-3 text-center text-body-sm text-muted-foreground">No saved replies match</li>
                                <template x-for="(s, i) in snippetList" x-bind:key="s.id">
                                    <li role="option" tabindex="-1" data-action="snippet" x-bind:aria-selected="i == snipActive" x-bind:class="i == snipActive ? `bg-nq-hover` : ``" x-on:mouseenter="snipActive = i" x-on:click="pickSnippet(s)"
                                        class="flex cursor-pointer flex-col gap-0.5 rounded-control px-2 py-1.5 text-start">
                                        <span class="flex items-center gap-2">
                                            <span dir="auto" class="flex-1 truncate text-label text-foreground" x-text="s.title"></span>
                                            <kbd dir="ltr" class="rounded-[4px] border border-border bg-secondary px-1 font-mono text-caption text-muted-foreground" x-text="`/` + s.shortcut"></kbd>
                                        </span>
                                        <span dir="auto" class="line-clamp-2 text-caption text-muted-foreground" x-text="s.body"></span>
                                    </li>
                                </template>
                            </ul></div>
</template>
</div>
                </span>
                        <span class="flex-1"></span>
            <span x-show="conv.channel == `whatsapp` &amp;&amp; !noteMode" style="display: none" class="me-2 hidden text-caption text-muted-foreground sm:inline">Sent through WhatsApp</span>
            <button data-slot="button"
     type="button"                         x-show="!wideSend" data-action="send" x-bind:aria-label="noteMode ? t.sendNote : t.send" x-bind:disabled="canSend ? null : true" x-on:click="send()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] size-control p-0">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="sending" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                <svg x-show="!sending" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
  <path d="m21.854 2.147-10.94 10.939"/>
</svg></button>
            <button data-slot="button"
     type="button"                         x-show="wideSend" style="display: none" data-action="send" x-bind:aria-label="noteMode ? t.sendNote : t.send" x-bind:disabled="canSend ? null : true" x-on:click="send()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        <svg data-slot="spinner" aria-hidden="true" style="display: none;" x-show="sending" class="size-4 animate-spin motion-reduce:animate-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
</svg>                <svg x-show="!sending" aria-hidden="true" class="rtl:-scale-x-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/>
  <path d="m21.854 2.147-10.94 10.939"/>
</svg>                <span x-text="noteMode ? t.sendNote : t.send">Send</span></button>
        </div>
    </div>
    <p x-show="sendError" style="display: none" role="alert" class="text-caption text-nq-danger-text" x-text="sendError"></p>
</div>
            </section>
        </template>
        <div x-show="!conv" style="display: none" class="flex min-w-0 flex-1 items-center justify-center bg-background p-6">
            <div data-slot="empty-state" class="flex flex-col items-center justify-center gap-3 border-dashed border-border px-6 py-12 text-center rounded-card max-w-sm border-0">
            <span data-slot="state-icon" class="inline-flex size-10 items-center justify-center rounded-control border border-border bg-card [&amp;_svg]:size-5 text-muted-foreground">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/>
  <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>
</svg>        </span>
        <div class="flex max-w-sm flex-col gap-1">
        <p class="text-label text-foreground">Select a conversation</p>
                    <p class="text-body-sm text-muted-foreground">Pick one from the list to read it and reply.</p>
            </div>
    </div>
        </div>
    </div>
</template>
<div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="snoozeDialog" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 max-w-sm">
            <div data-slot="dialog-header" class="flex flex-col gap-1.5 pe-8 text-start"><h2 data-slot="dialog-title" :id="$id('nq-dialog', 'title')" class="text-h3 text-foreground">Pick a date and time</h2></div>
        <label class="flex flex-col gap-1.5 text-label text-foreground">
            Wake up at
            <input data-slot="input" type="datetime-local"
     dir="ltr"                 x-model="snoozeValue" x-bind:min="snoozeMin" class="w-full min-w-0 rounded-control border border-input bg-card px-3 text-body text-foreground min-h-[var(--nq-touch-min,0px)] transition-colors duration-150 ease-nq outline-none placeholder:text-muted-foreground focus-visible:border-nq-focus focus-visible:outline-1 focus-visible:outline-nq-focus data-invalid:border-nq-danger aria-invalid:border-nq-danger disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:text-[16px] h-control text-start">
        </label>
        <div data-slot="dialog-footer" class="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"><button data-slot="button"
     type="button"                         x-on:click="snoozeDialog = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border-border bg-card text-foreground hover:bg-nq-hover h-control px-[var(--nq-control-pad)]">
        Cancel</button>
            <button data-slot="button"
     type="button"                         data-action="snooze-confirm" x-bind:disabled="Number.isFinite(snoozeAt) ? null : true" x-on:click="confirmSnooze()" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-[color-mix(in_oklab,var(--nq-action)_88%,var(--nq-fg))] h-control px-[var(--nq-control-pad)]">
        Snooze until</button></div>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    <template x-if="contactColumn">
        <aside data-slot="contact-info" aria-label="Contact" class="flex min-h-0 w-80 shrink-0 flex-col overflow-y-auto border-s border-border bg-card">
            <div class="flex items-start justify-between gap-2 p-4 pb-0">
    <span class="text-label text-foreground">Contact</span>
    <button data-slot="button"
     type="button"                         aria-label="Hide contact details" x-on:click="contactOpen = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
</div>
<div class="flex flex-col items-center gap-2 p-4 text-center">
    <span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-10 text-label size-16 text-h3">
    <img data-slot="avatar-image" x-show="conv.contact.avatar" x-bind:src="conv.contact.avatar" x-bind:alt="conv.contact.name" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(conv.contact.avatar)" role="img" x-bind:aria-label="conv.contact.name" x-text="initials(conv.contact.name)" class="flex size-full items-center justify-center"></span>
</span>
    <h2 dir="auto" class="text-h3 text-foreground" x-text="conv.contact.name"></h2>
    <span data-slot="badge"     x-text="channelLabel(conv.channel)" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground"></span>
    <span x-show="assignee" style="display: none" class="text-caption text-muted-foreground" x-text="assignee ? say(`assignedTo`, { name: assignee.name }) : ``"></span>
</div>
<dl class="flex flex-col gap-3 border-t border-border p-4">
            <div x-show="conv.contact.email" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Email</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <bdi dir="ltr" class="min-w-0 flex-1 truncate " x-text="conv.contact.email"></bdi>
                                                    <button type="button" data-action="copy-email" aria-label="Copy: Email" x-on:click="copy(conv.contact.email, `email`)"
                        class="inline-flex size-7 shrink-0 items-center justify-center rounded-control text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4">
                        <svg x-show="copied == `email`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                        <svg x-show="copied != `email`" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>                    </button>
                            </dd>
        </div>
            <div x-show="conv.contact.phone" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Phone</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <bdi dir="ltr" class="min-w-0 flex-1 truncate tabular-nums" x-text="conv.contact.phone"></bdi>
                                                    <button type="button" data-action="copy-phone" aria-label="Copy: Phone" x-on:click="copy(conv.contact.phone, `phone`)"
                        class="inline-flex size-7 shrink-0 items-center justify-center rounded-control text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4">
                        <svg x-show="copied == `phone`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                        <svg x-show="copied != `phone`" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>                    </button>
                            </dd>
        </div>
            <div x-show="conv.contact.company" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Company</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <span dir="auto" x-text="conv.contact.company"></span>
                                            </dd>
        </div>
            <div x-show="conv.contact.location" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Location</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <span dir="auto" x-text="conv.contact.location"></span>
                                            </dd>
        </div>
            <div x-show="conv.contact.timezone" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Time zone</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <bdi dir="ltr" class="min-w-0 flex-1 truncate " x-text="conv.contact.timezone"></bdi>
                                            </dd>
        </div>
        <div x-show="conv.contact.firstSeen" style="display: none" class="flex flex-col gap-0.5">
        <dt class="text-caption text-muted-foreground">First seen</dt>
        <dd class="flex items-center gap-1 text-body-sm text-foreground"><span x-text="conv.contact.firstSeen ? when(conv.contact.firstSeen, { dateStyle: `medium` }) : ``"></span></dd>
    </div>
    <div x-show="conv.contact.tags?.length" style="display: none" class="flex flex-col gap-1.5">
        <dt class="text-caption text-muted-foreground">Tags</dt>
        <dd class="flex flex-wrap gap-1">
            <template x-for="tag in (conv.contact.tags ?? [])" x-bind:key="tag">
                <span data-slot="badge" class="inline-flex h-5 items-center rounded-full border border-border bg-secondary px-2 text-caption text-foreground" x-text="tag"></span>
            </template>
        </dd>
    </div>
    <div x-show="conv.contact.notes" style="display: none" class="flex flex-col gap-0.5">
        <dt class="text-caption text-muted-foreground">Notes</dt>
        <dd class="flex items-center gap-1 text-body-sm text-foreground"><span dir="auto" class="whitespace-pre-wrap text-nq-fg-body" x-text="conv.contact.notes"></span></dd>
    </div>
</dl>
<div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('media')" x-modelable="value" x-id="['nq-tabs']" x-model="mediaTab" class="flex flex-col gap-3 border-t border-border p-4">
    <div data-slot="tabs-list" data-variant="underline" aria-orientation="horizontal" x-bind="list"
    aria-label="Shared in this conversation" class="relative z-0 flex max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden gap-4 border-b border-border">
    <button type="button" data-slot="tabs-tab" x-bind="tab('media')"
     data-active aria-selected="true"         class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
  <circle cx="9" cy="9" r="2"/>
  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
</svg>Media</button>
        <button type="button" data-slot="tabs-tab" x-bind="tab('files')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>Files</button>
        <button type="button" data-slot="tabs-tab" x-bind="tab('links')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Links</button>
        <span data-slot="tabs-indicator" aria-hidden="true"
    class="absolute -z-10 transition-[left,width] duration-200 ease-nq left-[var(--active-tab-left)] w-[var(--active-tab-width)] bottom-0 h-0.5 rounded-full bg-primary"></span>
</div>
    <div data-slot="tabs-panel" x-bind="panel('media')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><p x-show="images.length == 0" style="display: none" class="py-4 text-center text-caption text-muted-foreground">Nothing shared yet</p>
        <ul x-show="images.length != 0" class="grid grid-cols-3 gap-1.5">
            <template x-for="m in images" x-bind:key="m.id">
                <li>
                    <button type="button" x-bind:aria-label="`Open image: ` + m.name" x-on:click="openLightbox(m)"
                        class="block aspect-square w-full overflow-hidden rounded-control border border-border bg-secondary outline-none focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <img x-show="m.url" x-bind:src="m.url" alt="" loading="lazy" class="size-full object-cover" style="display: none">
                        <svg x-show="!m.url" aria-hidden="true" style="display: none" class="m-auto size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
  <circle cx="9" cy="9" r="2"/>
  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
</svg>                    </button>
                </li>
            </template>
        </ul></div>
    <div data-slot="tabs-panel" x-bind="panel('files')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><p x-show="fileItems.length == 0" style="display: none" class="py-4 text-center text-caption text-muted-foreground">Nothing shared yet</p>
        <ul x-show="fileItems.length != 0" class="flex flex-col gap-1">
            <template x-for="m in fileItems" x-bind:key="m.id">
                <li>
                    <a x-bind:href="m.url" x-bind:download="m.name" class="flex items-center gap-2 rounded-control p-1.5 no-underline outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                        <span dir="auto" class="min-w-0 flex-1 truncate text-body-sm text-foreground" x-text="m.name"></span>
                        <bdi x-show="m.size" dir="ltr" class="text-caption text-muted-foreground" x-text="m.size ? bytes(m.size) : ``"></bdi>
                    </a>
                </li>
            </template>
        </ul></div>
    <div data-slot="tabs-panel" x-bind="panel('links')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><p x-show="linkItems.length == 0" style="display: none" class="py-4 text-center text-caption text-muted-foreground">Nothing shared yet</p>
        <ul x-show="linkItems.length != 0" class="flex flex-col gap-1">
            <template x-for="m in linkItems" x-bind:key="m.id">
                <li>
                    <a x-bind:href="m.url" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 rounded-control p-1.5 no-underline outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg>                        <span class="flex min-w-0 flex-1 flex-col">
                            <span dir="auto" class="truncate text-body-sm text-foreground" x-text="m.name"></span>
                            <bdi dir="ltr" class="truncate text-caption text-muted-foreground" x-text="host(m.url ?? ``)"></bdi>
                        </span>
                    </a>
                </li>
            </template>
        </ul></div>
</div>
        </aside>
    </template>
    <div data-slot="sheet" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="contactSheet" class="contents">
    <template x-teleport="body">
    <div data-slot="sheet-portal">
        <div data-slot="sheet-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/10 transition-opacity duration-200 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 dark:bg-nq-bg/60"></div>
        <div data-slot="sheet-content" data-side="end" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed z-50 flex flex-col bg-popover text-popover-foreground outline-none shadow-floating transition-[translate,opacity] duration-200 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 inset-y-0 end-0 h-dvh border-s border-border data-starting-style:translate-x-8 data-ending-style:translate-x-8 rtl:data-starting-style:-translate-x-8 rtl:data-ending-style:-translate-x-8 w-[min(24rem,100vw)] p-0">
            <h2 class="sr-only">Contact details</h2>
            <aside data-slot="contact-info" aria-label="Contact" class="flex h-full min-h-0 flex-col overflow-y-auto bg-card">
                <template x-if="conv">
                    <div class="flex flex-col">
                        <div class="flex items-start justify-between gap-2 p-4 pb-0">
    <span class="text-label text-foreground">Contact</span>
    <button data-slot="button"
     type="button"                         aria-label="Hide contact details" x-on:click="contactOpen = false" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
</div>
<div class="flex flex-col items-center gap-2 p-4 text-center">
    <span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-10 text-label size-16 text-h3">
    <img data-slot="avatar-image" x-show="conv.contact.avatar" x-bind:src="conv.contact.avatar" x-bind:alt="conv.contact.name" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(conv.contact.avatar)" role="img" x-bind:aria-label="conv.contact.name" x-text="initials(conv.contact.name)" class="flex size-full items-center justify-center"></span>
</span>
    <h2 dir="auto" class="text-h3 text-foreground" x-text="conv.contact.name"></h2>
    <span data-slot="badge"     x-text="channelLabel(conv.channel)" class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground"></span>
    <span x-show="assignee" style="display: none" class="text-caption text-muted-foreground" x-text="assignee ? say(`assignedTo`, { name: assignee.name }) : ``"></span>
</div>
<dl class="flex flex-col gap-3 border-t border-border p-4">
            <div x-show="conv.contact.email" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Email</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <bdi dir="ltr" class="min-w-0 flex-1 truncate " x-text="conv.contact.email"></bdi>
                                                    <button type="button" data-action="copy-email" aria-label="Copy: Email" x-on:click="copy(conv.contact.email, `email`)"
                        class="inline-flex size-7 shrink-0 items-center justify-center rounded-control text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4">
                        <svg x-show="copied == `email`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                        <svg x-show="copied != `email`" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>                    </button>
                            </dd>
        </div>
            <div x-show="conv.contact.phone" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Phone</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <bdi dir="ltr" class="min-w-0 flex-1 truncate tabular-nums" x-text="conv.contact.phone"></bdi>
                                                    <button type="button" data-action="copy-phone" aria-label="Copy: Phone" x-on:click="copy(conv.contact.phone, `phone`)"
                        class="inline-flex size-7 shrink-0 items-center justify-center rounded-control text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4">
                        <svg x-show="copied == `phone`" aria-hidden="true" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>                        <svg x-show="copied != `phone`" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
</svg>                    </button>
                            </dd>
        </div>
            <div x-show="conv.contact.company" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Company</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <span dir="auto" x-text="conv.contact.company"></span>
                                            </dd>
        </div>
            <div x-show="conv.contact.location" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Location</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <span dir="auto" x-text="conv.contact.location"></span>
                                            </dd>
        </div>
            <div x-show="conv.contact.timezone" style="display: none" class="flex flex-col gap-0.5">
            <dt class="text-caption text-muted-foreground">Time zone</dt>
            <dd class="flex items-center gap-1 text-body-sm text-foreground">
                                    <bdi dir="ltr" class="min-w-0 flex-1 truncate " x-text="conv.contact.timezone"></bdi>
                                            </dd>
        </div>
        <div x-show="conv.contact.firstSeen" style="display: none" class="flex flex-col gap-0.5">
        <dt class="text-caption text-muted-foreground">First seen</dt>
        <dd class="flex items-center gap-1 text-body-sm text-foreground"><span x-text="conv.contact.firstSeen ? when(conv.contact.firstSeen, { dateStyle: `medium` }) : ``"></span></dd>
    </div>
    <div x-show="conv.contact.tags?.length" style="display: none" class="flex flex-col gap-1.5">
        <dt class="text-caption text-muted-foreground">Tags</dt>
        <dd class="flex flex-wrap gap-1">
            <template x-for="tag in (conv.contact.tags ?? [])" x-bind:key="tag">
                <span data-slot="badge" class="inline-flex h-5 items-center rounded-full border border-border bg-secondary px-2 text-caption text-foreground" x-text="tag"></span>
            </template>
        </dd>
    </div>
    <div x-show="conv.contact.notes" style="display: none" class="flex flex-col gap-0.5">
        <dt class="text-caption text-muted-foreground">Notes</dt>
        <dd class="flex items-center gap-1 text-body-sm text-foreground"><span dir="auto" class="whitespace-pre-wrap text-nq-fg-body" x-text="conv.contact.notes"></span></dd>
    </div>
</dl>
<div data-slot="tabs" data-orientation="horizontal" x-data="nqTabs('media')" x-modelable="value" x-id="['nq-tabs']" x-model="mediaTab" class="flex flex-col gap-3 border-t border-border p-4">
    <div data-slot="tabs-list" data-variant="underline" aria-orientation="horizontal" x-bind="list"
    aria-label="Shared in this conversation" class="relative z-0 flex max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden gap-4 border-b border-border">
    <button type="button" data-slot="tabs-tab" x-bind="tab('media')"
     data-active aria-selected="true"         class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
  <circle cx="9" cy="9" r="2"/>
  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
</svg>Media</button>
        <button type="button" data-slot="tabs-tab" x-bind="tab('files')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>Files</button>
        <button type="button" data-slot="tabs-tab" x-bind="tab('links')"
            class="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-label text-muted-foreground outline-none transition-colors duration-150 ease-nq hover:text-foreground data-active:text-foreground [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:pointer-events-none data-disabled:opacity-50 h-9 px-0.5"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M9 17H7A5 5 0 0 1 7 7h2"/>
  <path d="M15 7h2a5 5 0 1 1 0 10h-2"/>
  <line x1="8" x2="16" y1="12" y2="12"/>
</svg>Links</button>
        <span data-slot="tabs-indicator" aria-hidden="true"
    class="absolute -z-10 transition-[left,width] duration-200 ease-nq left-[var(--active-tab-left)] w-[var(--active-tab-width)] bottom-0 h-0.5 rounded-full bg-primary"></span>
</div>
    <div data-slot="tabs-panel" x-bind="panel('media')"
        class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><p x-show="images.length == 0" style="display: none" class="py-4 text-center text-caption text-muted-foreground">Nothing shared yet</p>
        <ul x-show="images.length != 0" class="grid grid-cols-3 gap-1.5">
            <template x-for="m in images" x-bind:key="m.id">
                <li>
                    <button type="button" x-bind:aria-label="`Open image: ` + m.name" x-on:click="openLightbox(m)"
                        class="block aspect-square w-full overflow-hidden rounded-control border border-border bg-secondary outline-none focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <img x-show="m.url" x-bind:src="m.url" alt="" loading="lazy" class="size-full object-cover" style="display: none">
                        <svg x-show="!m.url" aria-hidden="true" style="display: none" class="m-auto size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
  <circle cx="9" cy="9" r="2"/>
  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
</svg>                    </button>
                </li>
            </template>
        </ul></div>
    <div data-slot="tabs-panel" x-bind="panel('files')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><p x-show="fileItems.length == 0" style="display: none" class="py-4 text-center text-caption text-muted-foreground">Nothing shared yet</p>
        <ul x-show="fileItems.length != 0" class="flex flex-col gap-1">
            <template x-for="m in fileItems" x-bind:key="m.id">
                <li>
                    <a x-bind:href="m.url" x-bind:download="m.name" class="flex items-center gap-2 rounded-control p-1.5 no-underline outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/>
  <path d="M14 2v5a1 1 0 0 0 1 1h5"/>
  <path d="M10 9H8"/>
  <path d="M16 13H8"/>
  <path d="M16 17H8"/>
</svg>                        <span dir="auto" class="min-w-0 flex-1 truncate text-body-sm text-foreground" x-text="m.name"></span>
                        <bdi x-show="m.size" dir="ltr" class="text-caption text-muted-foreground" x-text="m.size ? bytes(m.size) : ``"></bdi>
                    </a>
                </li>
            </template>
        </ul></div>
    <div data-slot="tabs-panel" x-bind="panel('links')"
     hidden     class="outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus"><p x-show="linkItems.length == 0" style="display: none" class="py-4 text-center text-caption text-muted-foreground">Nothing shared yet</p>
        <ul x-show="linkItems.length != 0" class="flex flex-col gap-1">
            <template x-for="m in linkItems" x-bind:key="m.id">
                <li>
                    <a x-bind:href="m.url" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 rounded-control p-1.5 no-underline outline-none hover:bg-nq-hover focus-visible:outline-2 focus-visible:outline-nq-focus">
                        <svg aria-hidden="true" class="size-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg>                        <span class="flex min-w-0 flex-1 flex-col">
                            <span dir="auto" class="truncate text-body-sm text-foreground" x-text="m.name"></span>
                            <bdi dir="ltr" class="truncate text-caption text-muted-foreground" x-text="host(m.url ?? ``)"></bdi>
                        </span>
                    </a>
                </li>
            </template>
        </ul></div>
</div>
                    </div>
                </template>
            </aside>
                    </div>
    </div>
</template>
</div>
    <div data-slot="dialog" x-data="nqDialog(false)" x-modelable="open" x-id="['nq-dialog']" x-model="lightboxOpen" class="contents">
    <template x-teleport="body">
    <div data-slot="dialog-portal">
        <div data-slot="dialog-backdrop" x-nq-presence="open" x-on:click="close()" class="fixed inset-0 z-50 bg-nq-fg/15 dark:bg-nq-bg/60 transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0"></div>
        <div data-slot="dialog-content" x-bind="popup" x-nq-presence="open" x-trap.noscroll="open"
            class="fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] gap-4 rounded-floating border border-border bg-popover p-6 text-popover-foreground outline-none max-h-[calc(100dvh-2rem)] overflow-y-auto transition-opacity duration-150 ease-nq data-starting-style:opacity-0 data-ending-style:opacity-0 max-w-3xl">
            <h2 data-slot="dialog-title" class="truncate text-body-sm font-medium text-foreground" x-text="lightbox?.name"></h2>
            <img x-show="lightbox?.url" style="display: none" x-bind:src="lightbox?.url" x-bind:alt="lightbox?.name" class="max-h-[70dvh] w-full rounded-control object-contain">
            <a x-show="lightbox?.url" style="display: none" x-bind:href="lightbox?.url" x-bind:download="lightbox?.name" class="self-start text-body-sm text-foreground underline decoration-nq-line underline-offset-4">Download</a>
                            <button type="button" data-slot="dialog-close" x-on:click="close()" aria-label="Close"
                    class="absolute end-3 top-3 inline-flex size-8 items-center justify-center rounded-control text-muted-foreground transition-colors duration-150 hover:bg-nq-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-nq-focus [&_svg]:size-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
                    </div>
    </div>
</template>
</div>
    <div x-show="toastList.length" style="display: none" class="pointer-events-none absolute bottom-4 end-4 z-30 flex w-80 max-w-[calc(100%-2rem)] flex-col gap-2">
        <template x-for="n in toastList" x-bind:key="n.key">
            <div role="status" data-slot="new-message-toast" x-on:mouseenter="holdToast(n.key, true)" x-on:mouseleave="holdToast(n.key, false)" x-on:focusin="holdToast(n.key, true)" x-on:focusout="holdToast(n.key, false)"
                class="pointer-events-auto relative w-80 max-w-full overflow-hidden rounded-floating border border-border bg-popover text-popover-foreground shadow-floating">
                <button type="button" data-slot="notification-item" data-unread x-on:click="openToast(n)" x-bind:aria-label="`New message: ` + (toastConv(n)?.contact.name ?? ``) + `. Open`"
                    class="flex w-full items-start gap-3 px-4 py-3 pe-10 text-start no-underline outline-none transition-colors duration-150 ease-nq hover:bg-nq-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nq-focus">
                    <span class="relative mt-0.5 shrink-0">
                        <span data-slot="avatar" class="inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-secondary align-middle font-medium text-secondary-foreground size-8 text-caption ">
    <img data-slot="avatar-image" x-show="toastConv(n)?.contact.avatar" x-bind:src="toastConv(n)?.contact.avatar" x-bind:alt="toastConv(n)?.contact.name ?? ``" class="size-full object-cover" style="display: none">
    <span data-slot="avatar-fallback" x-show="!(toastConv(n)?.contact.avatar)" role="img" x-bind:aria-label="toastConv(n)?.contact.name ?? ``" x-text="initials(toastConv(n)?.contact.name ?? ``)" class="flex size-full items-center justify-center"></span>
</span>
                    </span>
                    <span class="flex min-w-0 flex-1 flex-col gap-0.5">
                        <span dir="auto" class="text-body-sm font-medium text-foreground" x-text="toastConv(n)?.contact.name"></span>
                        <span dir="auto" class="line-clamp-2 text-caption text-muted-foreground" x-text="toastPreview(n)"></span>
                    </span>
                    <span class="flex shrink-0 flex-col items-end gap-1.5 pt-0.5">
                        <time class="text-caption tabular-nums text-muted-foreground" x-text="relative(n.message.at)"></time>
                        <span class="size-2 rounded-full bg-nq-accent"><span class="sr-only">New message</span></span>
                    </span>
                </button>
                <button data-slot="button"
     type="button"                         aria-label="Dismiss" x-on:click="dismissToast(n.key)" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover size-control-sm p-0 absolute end-1.5 top-1.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M18 6 6 18"/>
  <path d="m6 6 12 12"/>
</svg></button>
            </div>
        </template>
    </div>
    <p x-show="notice" style="display: none" role="alert" x-text="notice" class="absolute start-4 top-3 z-30 rounded-control border border-nq-danger bg-popover px-3 py-1.5 text-caption text-nq-danger-text shadow-floating"></p>
</div>
```