Tailwind CSS Inbox Layouts Blocks

Inbox Layouts

Inbox workspace layouts for shared mailboxes, thread lists, reply panes, and message triage workflows.

Shared Inbox Workspace with Thread List and Reply Pane Pro

Three-column inbox workspace combines team navigation, thread list, active conversation pane, and reply tools.

Create a shared inbox workspace component named "Shared Inbox Workspace with Thread List and Reply Pane" that visually and behaviorally matches the reference design. Use the current project's existing framework, styling conventions, tokens, components, icons, routing, responsive utilities, dropdown/menu primitives, tab primitives, overlay primitives, form controls, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/communication/inbox-layouts/#shared-inbox-workspace-with-thread-list-and-reply-pane. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Baseline fidelity gates:
- Preserve exact visible copy, data values, order, hierarchy, and default state unless the user explicitly asks to change them.
- Map semantic token roles to one coherent destination token vocabulary. Every source primary role must use the destination project's primary token/config, never Preline blue or fixed blue palette values unless the destination primary is explicitly blue.
- Verify every emitted utility or component class exists in the destination. Map or define a missing semantic token before use; do not leave any undefined source class in generated markup.
- Use exact source assets, image URLs, inline SVGs, avatars, logos, and brand marks when supplied; do not replace them with placeholders, initials, emojis, generic icons, or alternate stock media.
- Final QA: compare the implementation with the exact anchored Preview and HTML source at mobile and desktop widths, including open/alternate states, assets, layering, focus behavior, and dark mode.

Behavior runtime rule:
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.

This is not a generic email inbox, dashboard, CRM shell, or marketing page. The source block is a complete shared-inbox workspace with a fixed top header, collapsible primary navigation sidebar, thread-list sidebar, active conversation pane, reply composer, comment composer, dropdown menus, select menus, modal dialogs, responsive overlays, layout splitters, and TipTap rich-text editors.

Build only the source-included shared inbox workspace. Because the source itself includes the header, inbox sidebars, thread list, active conversation, reply tools, and source modals, include those pieces. Do not append unrelated dashboards, analytics cards, product tables, testimonials, pricing sections, marketing CTAs, extra app shells, or different side navigation around it.

Preserve the source brand/content unless the destination project explicitly requires a global brand replacement. The source uses the Preline header/logo and a Work section named `Preline`; do not invent unrelated brands such as OrbitDesk or Northstar.

Source identity and logo:
- The top-left brand is the actual Preline wordmark, not a generic app badge. Source asset path: `partials/pro/logos/logo.html`.
- Use the source wordmark SVG at about `w-28` / 116px wide by 32px high with the mark plus `preline` text, mapped to the primary color role.
- If the generated project cannot import repo partials, inline this exact source wordmark SVG (do not redraw it):
  `<svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/> <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/> <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/> <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/> </svg>`
- Do not approximate the wordmark with a square icon plus `Preline`, a star, an envelope, a letter `P`, a Lucide icon, or a generic gradient logo.
- The Work sidebar item named `Preline` uses a compact circular/initial workspace mark. That sidebar workspace avatar is separate from the header wordmark and must not replace the header logo.

Source avatar and identity assets:
- Preserve the exact source avatar identities. Do not substitute random avatars from the destination project's sample data, generated faces, generic user icons, or differently colored initials.
- Top-right account avatar and the `James Collins` editing/reply composer avatar use this exact image URL: `https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80`.
- `Lewis Clarke` uses this exact image URL everywhere he has a photo avatar, including the assign trigger, assign dropdown row, comment cluster, message card, and recipient picker: `https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80`.
- `David Harrisom` in the recipient picker uses this exact image URL: `https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80`.
- `Amanda Harvey` in the recipient picker uses this exact image URL: `https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80`.
- `Sarah Chen` uses an `S` initial avatar, not a photo. Its source role is the muted/surface initial style `bg-surface-3 text-foreground-inverse`.
- `Isabella Lauda` uses an `I` initial avatar with the source purple role `bg-purple-500 text-foreground-inverse`; in the assign dropdown it also has a small online green status dot.
- `Christina Williams` uses a `C` initial avatar with the source orange role `bg-orange-500 text-foreground-inverse`.
- Source avatar scale: top account avatar is about `size-9.5`; conversation avatars are about `size-8`; recipient-chip avatars are about `size-6`. Preserve these proportions.

Source interface icons:
- Ordinary interface icons in this block use Lucide-style outline SVGs: 24 viewBox, `fill="none"`, `stroke="currentColor"`, `stroke-width="2"`, rounded caps/joins, and compact `size-3.5` to `size-4` glyphs inside controls.
- Use the destination project's icon system only if it can provide visually equivalent Lucide-style outline icons for compose/edit, inbox/tray, contacts/users, reports/bar-chart, archive, trash, octagon-alert/report spam, bell/snooze, tag, vertical ellipsis, paperclip, smile-plus, microphone, send arrow, reply, pencil, star, lock, sort, chevrons, and checkmarks. If no equivalent icon library exists, install/use Lucide or inline the matching Lucide SVGs.
- Do not substitute Bootstrap Icons, Material filled icons, Font Awesome filled icons, emojis, random icon glyphs, or generic app icons for ordinary interface controls. The Preline wordmark and person avatars are identity assets and must remain exact; do not replace them with Lucide icons.

Dependency and library requirements:
- The source uses TipTap/ProseMirror for the reply editors. If the destination project already uses TipTap, use it. If the destination project uses an equivalent rich-text editor that can deliver the same placeholder, formatting toolbar actions, links, lists, blockquote/code controls, and editable composer behavior, use that existing library. Otherwise install or load the Preline-used TipTap dependencies and deliver a real editor.
- Source TipTap packages are `@tiptap/core@2.11.0`, `@tiptap/starter-kit@2.11.0`, `@tiptap/extension-placeholder@2.11.0`, `@tiptap/extension-paragraph@2.11.0`, `@tiptap/extension-bold@2.11.0`, `@tiptap/extension-underline@2.11.0`, `@tiptap/extension-link@2.11.0`, `@tiptap/extension-bullet-list@2.11.0`, `@tiptap/extension-ordered-list@2.11.0`, `@tiptap/extension-list-item@2.11.0`, and `@tiptap/extension-blockquote@2.11.0`.
- The source behavior uses Preline-style layout splitters, overlays, tabs, dropdowns, selects, collapse/accordion menus, tooltips, remove-element controls, and textarea auto-height. If the destination project has equivalent primitives, use them. If it does not and dependencies are allowed, install/use the Preline-used runtime or library needed for that behavior. Do not replace these plugin-backed behaviors with scoped JavaScript/custom React state unless the project explicitly forbids dependencies.
- Do not fake the bubble/loading states, editors, dropdowns, splitters, or reply composer as static placeholder SVGs/images. The thread list, dropdowns, responsive overlays, reply editors, and modal dialogs must be functional enough to demonstrate the source interactions.
- The layout splitter must work in generated examples. Do not render static columns with decorative/inert handles. If the destination project has a resizable panel or splitter primitive, use it. If the project already uses Preline, use `HSLayoutSplitter`. If neither exists and dependencies are allowed, install/use Preline `HSLayoutSplitter`; only under an explicit dependency prohibition implement scoped pointer and keyboard resizing that updates CSS variables or flex-basis values, respects min sizes, and resets to responsive defaults at the same breakpoints as the source.

Keep the implementation Tailwind-first in Tailwind projects. Use utility classes directly in markup and reuse existing project component classes only when they already exist. Do not create new one-off classes such as `.shared-inbox-shell`, `.thread-list-card`, `.mail-row`, `.message-pane`, or `@layer components` rules just to style this block.

Preserve source scale/layout utilities where the destination Tailwind setup supports them, and map missing custom scale values to the closest existing project scale or a reusable theme token. Do not replace source scale with scattered arbitrary bracket utilities. Source scale/layout examples for this block include `fixed`, `top-0`, `inset-x-0`, `z-61`, `h-dvh`, `pt-14`, `-mt-px`, `flex`, `hidden`, `xl:block`, `lg:block`, `overflow-hidden`, `overflow-y-auto`, `overflow-x-hidden`, `w-80`, `lg:w-auto`, `size-9.5`, `size-7`, `size-6`, `size-5`, `size-4`, `size-3.5`, `size-2.5`, `p-2`, `p-3`, `p-4`, `px-2`, `px-2.5`, `px-4`, `px-5`, `py-1`, `py-1.5`, `py-2`, `py-2.5`, `pt-2.5`, `pb-4`, `gap-1`, `gap-1.5`, `gap-2`, `gap-2.5`, `gap-3`, `gap-x-1.5`, `gap-x-2`, `gap-x-3`, `rounded-lg`, `rounded-xl`, `rounded-full`, `border`, `border-b`, `border-s`, `shadow-xl`, `shadow-lg`, `text-xs`, `text-[11px]`, `text-[13px]`, `text-sm`, `font-medium`, `font-semibold`, `uppercase`, `truncate`, `line-clamp-1`, `line-clamp-2`, `whitespace-nowrap`, `min-h-56`, `h-9.5`, `w-40`, and `w-60`.

Preserve source `max-w-*` only where the live composed source uses it on that same local element. Do not promote local or iframe-only max-width classes into global layout wrappers. In this block, `max-w-20` is local to the move-to label, `max-w-xl` is local to comment/editing bubbles, and standalone partial iframe wrappers use `max-w-xs`, `max-w-lg`, or `max-w-3xl` only to center an isolated partial demo. The live shared-inbox conversation pane, title bar, message stack, reply composer, and bottom comment composer are not centered `mx-auto max-w-*` columns.

Separate Tailwind scale from source token class names. Source token classes such as `bg-background-2`, `bg-navbar`, `border-navbar-line`, `bg-sidebar`, `border-sidebar-line`, `bg-layer`, `border-layer-line`, `bg-dropdown`, `border-dropdown-line`, `bg-select`, `border-select-line`, `bg-muted-hover`, `bg-muted-focus`, `bg-muted-active`, `text-foreground`, `text-foreground-inverse`, `text-muted-foreground-1`, `text-muted-foreground-2`, `bg-primary`, `text-primary`, `text-primary-foreground`, `bg-secondary`, `text-secondary-foreground`, `bg-surface`, `bg-surface-1`, `bg-surface-2`, `bg-surface-3`, `text-surface-foreground`, `border-surface-line`, `bg-card`, `border-card-line`, `bg-tooltip`, `bg-popover`, `bg-alert-soft`, `text-alert`, `bg-info-soft`, and `text-info` describe roles. Map those roles to the destination project's actual token vocabulary. Do not copy Preline-only token names unless those exact classes already exist in the destination project.

Use one token vocabulary consistently. In common Tailwind/shadcn-style projects, use native tokens such as `bg-background`, `bg-card`, `bg-popover`, `bg-muted`, `bg-accent`, `border-border`, `text-foreground`, `text-muted-foreground`, `bg-primary`, `text-primary`, `text-primary-foreground`, `ring-ring`, `text-destructive`, and status tokens when available. In tokenized Tailwind projects, combine structural utilities with semantic token utilities; do not use raw palette classes like `text-gray-900`, `text-gray-500`, `bg-white`, `bg-gray-50`, `dark:bg-gray-950`, `border-gray-200`, `bg-blue-600`, or `ring-indigo-600` for colors, surfaces, borders, focus rings, or selected states when semantic tokens exist. In Bootstrap projects, use native Bootstrap layout, dropdown, navbar, tab, form, button, badge, list-group, card, and offcanvas classes and variables such as `.navbar`, `.dropdown-menu`, `.nav`, `.btn`, `.btn-primary`, `.btn-outline-secondary`, `.form-control`, `.form-check-input`, `.badge`, `.card`, `.list-group`, `.offcanvas`, `.text-body`, `.text-muted`, `.border`, `--bs-primary`, and `--bs-primary-rgb`, including any app override such as a green/teal primary. Do not mix Preline token names, shadcn token names, Bootstrap classes, raw Tailwind palette colors, inline styles, and newly invented token classes in the same component.

Primary color behavior:
- When adapting this block into an existing product theme, primary buttons, selected tabs, checked states, focus rings, active badges, and action links should use the destination project's primary color.
- Primary controls always use the destination project's primary token; only if the project is blank and defines no primary token, fall back to Preline's blue, about `#2563eb`. Do not randomly reskin the block to purple, teal, black, or another brand color unless the destination project's theme actually maps there. The Preline wordmark asset itself keeps its own brand color regardless of this mapping unless the user asks for rebranding.
- If the destination project has a green/teal Bootstrap primary and the implementation is expected to adopt that Bootstrap theme, the send/compose/selected controls must be green/teal, not Preline blue. The Preline identity mark itself should still be the actual Preline wordmark unless the user explicitly asks for rebranding.
- Preserve semantic accent intent for tag dots and status marks, but map colors to the destination token system when available.

Reference visual presentation:
- Match the first-load desktop presentation as a full-width, full-height app workspace, not a centered card or dashboard section.
- At wide desktop width the layout reads as three vertical zones under a fixed header: primary sidebar about 15% wide, thread-list sidebar about 21% wide, and the active conversation pane filling the remaining width. The visible reference corresponds to roughly a 300px primary sidebar, a 430px thread list, and a wide conversation area at a 2048px viewport.
- The primary sidebar and thread-list sidebar use light surface roles and subtle borders. The active conversation pane uses a muted gray canvas behind white rounded message cards and gray chat bubbles.
- The default visible state is the collapsed conversation overview: the first Sarah Chen message appears as a compact white rounded card with one-line preview text, the Isabella/Lewis comment clusters and activity records are visible below, and the compact bottom comment bar is sticky at the bottom of the conversation pane.
- Do not show the first Sarah Chen email fully expanded as the default top-of-thread state. The full email body is an expanded card state that appears after interaction or in a scrolled/expanded example state.
- Do not include the blue `Download Templates` floating button from the template preview chrome. It is not part of the inbox block.

Generated-output anti-patterns to avoid:
- Do not turn the layout into a generic inbox product, CRM shell, admin dashboard, or centered message card demo.
- Do not replace the Preline wordmark with a generic square/letter/icon logo or invent another brand color system.
- Do not replace source avatars or initials with different photos, app sample users, generic avatar components, or recolored initial bubbles.
- Do not add `mx-auto`, `container`, `max-w-4xl`, `max-w-5xl`, `max-w-6xl`, `max-w-screen-*`, or any other global max-width wrapper around the active conversation pane, titlebar, message cards, reply composer, or bottom comment composer. The live pane fills the available splitter area.
- Do not render the thread-list tabs as rounded pills or a segmented control; the source uses flat text tabs with an active underline.
- Do not render the first Sarah Chen email body fully expanded on initial load, and do not make every message card expanded by default.
- Do not convert source menus into generic checkbox/radio lists. Match each menu's source row structure, icon placement, checked state, and dividers.
- Do not render visible radio circles in the Snooze menu, checkboxes in the Assign menu, or colored dot-only rows in the Tags menu unless those controls exist in the source.
- Do not render the top thread action header as a generic secondary nav, centered toolbar, large button group, or labeled `Snooze` / `Tags` buttons on desktop. Those are compact source icon triggers.
- Do not let the `Unassigned` / `Assigned` / `Archived` tabs shrink to text width; the source tabs divide the thread-list width equally.
- Do not create lopsided `Newest` / `Oldest` select padding; the source trigger has balanced left/right icon slots and centered text.
- Do not let the sticky thread title/action bars cover open dropdowns, selects, tooltips, or modals.
- Do not render the compact `Add a comment...` bar as the large reply editor, a yellow edit card, a bottom sheet, or a text `Send` button composer.
- Do not make comment hover action buttons square-cornered inside the pill; each action button is circular.
- Do not detach hover action toolbars, select menus, or dropdown cards from their triggers or push them into page flow.
- Do not use a different icon family for source UI controls when Lucide-equivalent icons are available or can be added.
- Do not paraphrase or rewrite the source message copy, names, counts, tag labels, or dates.
- Do not create decorative splitter dots that cannot resize the panes.

Overall workspace:
- Full viewport workspace on a background role surface.
- Fixed top navbar at the top with subtle bottom border.
- Under the navbar, a horizontal layout splitter contains the primary inbox sidebar, the thread-list sidebar, and the active content pane.
- Source splitter behavior:
  - Primary sidebar id role: inbox sidebar, hidden below `xl`, about 15% width at `1280px+`, 0% below that.
  - Thread-list sidebar id role: thread list, fixed overlay below `lg`, about 25.4% width at `1024px+`, about 21% at `1280px+`, 0% below `1024px`.
  - Content pane: 100% width below `lg`, about 74.6% at `1024px+`, about 64% at `1280px+`.
  - Include visible splitter handles on desktop if the destination supports draggable splitters.
- Source splitter item constraints:
  - Primary inbox sidebar minimum size is about 12% and default/dynamic size is about 15% at desktop.
  - Thread-list sidebar minimum size is about 17%, default/dynamic size is about 25.4% at `1024px+`, and about 21% at `1280px+`.
  - Content pane minimum size is about 55%.
- Splitter handles:
  - Place a narrow draggable handle between the primary sidebar and thread list, and another between the thread list and content pane.
  - Handle visual shape is a small vertical pill with a six-dot/grip icon, centered on the divider.
  - Use the destination project's splitter primitive only if it preserves the source pane constraints, breakpoint reset behavior, handle geometry, pointer resizing, and keyboard accessibility.
- Splitter dependency and fallback:
  - If no faithful destination splitter exists, install/use Preline `HSLayoutSplitter` and preserve the source item ids, handles, breakpoint sizes, minimum sizes, initialization, and resize updates.
  - Only under the explicit dependency-prohibition fallback above, implement a custom splitter with `role="separator"`, vertical orientation, keyboard focus, arrow-key resizing, and `aria-valuenow` or equivalent accessible state.
  - Store pane sizes in local component state or CSS variables, not inline magic numbers on every element.
  - Use pointer capture for dragging, clamp sizes to the min constraints, and update adjacent pane widths without causing page scroll.
  - On resize, restore source breakpoint defaults: primary/sidebar/content `0/0/100` below `1024px`, thread/content about `25.4/74.6` from `1024px`, and primary/thread/content about `15/21/64` from `1280px`.
- The primary sidebar should become an overlay on smaller screens. The thread-list sidebar should become an overlay below desktop and close when a thread is chosen.
- Respect source scrolling: sidebars and active pane scroll independently, while the fixed navbar remains in place.

Top navbar:
- Fixed top header with logo at the inline-start, centered search on medium screens and up, and utility/account controls at the inline-end.
- Header logo must be the source Preline wordmark SVG from `partials/pro/logos/logo.html`, about `w-28` wide. It is a blue Preline mark plus wordmark, not a text label paired with a generic icon.
- Search placeholder: `Search in mail`.
- Include mobile buttons for opening sidebars/search where relevant.
- Include help/support, settings, and account menu trigger icons with accessible labels/tooltips.
- Header control scale is compact: icon buttons about `size-9.5`.

Primary inbox sidebar:
- Include a prominent `Compose` primary button at the top.
- Include section heading `Pages` with a `New` badge.
- Pages list:
  - `Inbox`, active, count `3`.
  - `Contacts`, count `245`.
  - `Reports`.
- Include section heading `Mailboxes`.
- Mailboxes list:
  - `Inbox`, open accordion, count `1,086`.
  - Nested items: `Assigned to me` count `26`, `Shared with me` count `9`, `Discussions`, and `Gmail` count `1,048` with a red dot.
  - `Starred`.
  - `Sent`.
  - `Drafts`.
  - Collapsible `Show more` group with `Snoozed`, `Spam` count `3`, and `Trash`.
- Include section heading `Work` with a plus/create-label button.
- Work list:
  - `Preline`, open accordion, count `10`, with a primary avatar/mark.
  - Nested items: `Github` count `312` with an indigo dot, `Gmail` count `39` with a red dot, `Crisp` count `494` with a primary dot, and `Slack - Internal` count `203` with an orange dot.

Thread-list sidebar:
- Top tabs are `Unassigned`, `Assigned`, and `Archived`.
- `Unassigned` is active.
- The tab strip is flush across the top of the thread list with the active tab underlined by a dark bottom border. It is not rendered as pills or a segmented control.
- The source tab header uses `flex gap-1 w-full`; each tab button uses `w-full inline-flex justify-center`, `px-2.5 py-2 mb-3`, and an inset active underline (`after:inset-x-2.5`). The three labels distribute evenly across the thread-list width, with the underline centered under each equal-width tab.
- Filter row contains `3 unread` and a select menu with selected value `Newest`.
- The `Newest` / `Oldest` select trigger uses balanced source spacing: `px-6`, `gap-x-2.5`, `text-xs leading-7`, a left sort icon at `inset-s-1.5`, a right chevron at `inset-e-1.5`, and centered text. Do not give the right side extra visual padding or shift the label. Its dropdown is right-aligned with `inset-e-0`, `z-50`, `w-40`, rounded-xl, and shadow-xl.
- Select menu options in order: `Choose`, `Newest`, `Oldest`, `Newest unreplied`, `Oldest unreplied`.
- Render exactly seven unassigned thread previews in this order:
  1. Active/read thread from `Costa Quinn`, time `Now`, title `Project Timeline Update`, count `2`, tags `Generic, +1`, preview `Hi team, I've reviewed the latest sprint progress`.
  2. Unread thread from `Rachel Doe`, time `09:35`, title `RE: Follow-up`, count `3`, attachment preview text `I hope you're doing well. I wanted to check in on the proposal you sent last week for the web design project we discussed.`, attachment count `+2`.
  3. Read thread from `isabella@site.com`, time `01/10/2024`, title `Quarterly marketing strategy review meeting`, count `1`, initial avatar `I`, typing indicator dots.
  4. Unread thread from `Finch Hoot`, time `28/09/2024`, title `RE: Follow-up`, count `5`, preview `Awesome! 🔥`.
  5. Unread thread from `casey112oklahoma@site.com`, time `28/09/2024`, title `Missing payout`, count `19`, preview `Thanks`.
  6. Read thread from `amandaharvey@site.com`, time `25/09/2024`, title `Quarterly marketing strategy review meeting`, count `7`, James avatar, preview `@brian any thoughts on that?`.
  7. Read thread from `Mike Clirk`, time `20/09/2024`, title `Project Timeline Update`, count `15`, tag `Chat`, attachment preview using the same proposal text, attachment count `+9`.
- Thread previews are compact rows with border-bottom separators, active row muted background, hover muted background, read/unread status dot, optional avatar/initial/comment icon, sender, time, title, count, tag/attachment/message preview, and hover action buttons for archive/delete.
- The active Costa Quinn row is a gray/muted selected row. The active row shows the `Generic, +1` pill before the title on the same line, then the preview below.
- Hover actions on thread rows appear as a small floating two-button group near the right edge of the row with Archive and Delete icon buttons; Archive shows a dark tooltip labeled `Archive`.
- Assigned tab empty state: title `No assigned message`, description `Only assigned messages appear here`.
- Archived tab empty state: title `No archived message`, description `Only archived messages appear here`.

Active conversation pane:
- The visible active thread is `Project Timeline Update`.
- The other thread tabs should be present or represented as switchable panels; hidden panels may show the source loader with three pulsing dots and explanatory placeholder text.
- Width and scroll model:
  - The conversation pane fills the remaining splitter width. It is not a centered content column.
  - The live source scroll container uses conversation-pane padding and spacing, roughly `px-2 pb-8 sm:px-4 sm:pb-2 overflow-y-auto overflow-x-hidden`, followed by a vertical stack such as `space-y-3 lg:space-y-5`.
  - Do not wrap the conversation content in `mx-auto max-w-4xl`, `mx-auto max-w-5xl`, `mx-auto max-w-6xl`, `container`, or any other global max-width. Preserve only local source max-widths on local bubbles/labels.
- Top thread action header:
  - The header is sticky at the top of the active conversation pane and spans the full content-pane width.
  - It uses a compact `p-2 sm:px-5` source scale, subtle bottom border, and `justify-between` grouping.
  - Left group, in order: mobile thread-list toggle labeled `Inbox` only below `lg`; move-to dropdown trigger showing red dot + `Gmail` + chevron; vertical divider; icon-only Archive button; icon-only Delete button; icon-only Report spam button. The three action icons are hidden on very small screens and visible from `sm`.
  - Right group, in order: Assign dropdown trigger showing an `S` initial avatar, the exact Lewis photo avatar, and chevron; icon-only Snooze trigger; icon-only Tags trigger; vertical divider; icon-only More trigger.
  - `Snooze` and `Tags` are icon-only buttons in the source desktop action header. Do not label them with visible text, turn them into outline pills, or move them into a separate nav row.
  - Keep icon scale compact, about `size-8` buttons with `size-4` icons, and use tooltips/accessibility labels for icon-only controls.
  - Layering: the source action header is only `z-9`; dropdowns, menus, selects, tooltips, and modals open above it (`z-10+`, and the thread tag select uses a much higher window-scoped layer). Keep the `Project Timeline Update` title row and sticky action header below open dropdowns. Menus must not disappear behind, be clipped by, or be overlapped by the title/action bars.
- The thread title row below it shows `Project Timeline Update` on the left with `Generic` and `Reviews` tag pills immediately to the right. A date divider row with `October 3, 2024` centered appears below the title row.

Floating menu layering and placement:
- Dropdowns, selects, and popovers are anchored to their triggers and float above the content pane, with enough z-index to sit above sticky title/action bars and message cards.
- If the destination framework supports portals, Popper/Floating UI, or window-scoped select menus, use that for menus inside scroll/overflow panes so they are not clipped.
- Do not attach floating menus to message cards, center them in the page, push them into normal document flow, or place them far from the triggering icon/button.

Move-to dropdown:
- Title `Move to`.
- Include plus/create-label button and search placeholder `Search`.
- Visual placement: a floating white rounded card opens directly below the `Gmail` move trigger near the top-left edge of the conversation pane. Width is compact, about `w-60`, with a soft shadow and row dividers.
- Source selection controls are hidden inputs. Rows show an icon/dot on the left and an optional checkmark on the right for the selected item; do not show visible checkbox boxes.
- Items:
  - `Starred`.
  - `Github` with indigo dot, unchecked.
  - `Gmail` with red dot, checked.
  - `Crisp` with primary dot, unchecked.
  - `Slack - Internal` with orange dot, unchecked.

Assign dropdown:
- Title `Assign`.
- Search placeholder `Search teammates`.
- Visual placement: a floating white rounded card opens under the avatar/assign trigger near the top-right side of the conversation pane. Width is compact, about `w-72` to `w-80`.
- Source selection controls are hidden inputs. Rows show a user icon/avatar on the left and a checkmark on the right when selected; do not render visible checkbox boxes.
- Items:
  - `No assignee`, unchecked.
  - `isabella@site.com`, checked, initial avatar `I`, online green status dot.
  - `Lewis Clarke`, checked, avatar photo.

Snooze dropdown:
- Title `Snooze`.
- Visual placement: a floating white rounded card opens under the snooze icon on the top-right side. Each row is a two-column option with the label on the left and the scheduled time/date on the right.
- Source selection controls are hidden radio inputs. The visible UI is stretched list rows, not visible radio circles.
- Options:
  - `Today` with time `5:05 PM`, checked.
  - `Tomorrow` with time `Wed 9:00 AM`.
  - `This week` with time `Thu, May 8, 9:00 AM`.
  - `Next week` with time `Mon, May 13, 9:00 AM`.
- Footer row `Custom` is a full-width text row with a chevron/right arrow and opens a custom date and time modal. It is not a large filled button.
- The custom date/time modal is centered over a dimmed backdrop. It has a top bar with back arrow, title `Custom date & time`, close button, a scrollable two-column time grid, footer fields for `Date` and `Time`, and footer actions `Cancel` and `Snooze`. The visible selected footer values are `07/05/2024` and `9:00 AM`.

Tags dropdown:
- Title `Tags`.
- Include plus/create-tag button and search placeholder `Search`.
- Visual placement: a floating white rounded card opens under the tag icon on the top-right side. Width is about `w-80`, with compact rows, tag icons at the left, optional lock icons for private tags, and checkbox controls at the right.
- Section label `All tags`.
- Every row uses a tag-shaped outline icon on the left, not a plain colored dot. Private tags include a lock icon with a `Private tag` tooltip. Checked states use right-aligned checkbox controls.
- Items:
  - `Bug`, not private, unchecked.
  - `Generic`, private, checked, orange role.
  - `Reviews`, not private, checked, primary role.
  - `Closed`, not private, unchecked, disabled, green role.
  - `Feedback`, private, unchecked, muted role.
  - `Account`, private, unchecked, muted role.
  - `FAQ`, not private, unchecked, purple role.

More dropdown:
- On small screens include archive, delete, and report spam actions.
- Include `Mark as unread`, `Mark as read`, `Expand all`, and `Collapse all`.
- Include `Print` with a `New` badge.
- Include `Link to conversation`, `Copy conversation ID`, and `Copy conversation link`.
- Header more dropdown placement is top-right and aligned under the vertical-ellipsis icon.

Thread title and tags:
- Thread title: `Project Timeline Update`.
- Tag pills: `Generic` and `Reviews`.
- Title/tags bar uses the conversation background role and can be sticky on large screens.
- Tag pill dropdown state: clicking a tag pill opens a small floating menu with `Edit tag`, `Remove from conversation`, and `View all conversations`. The menu sits below the pill and uses icons plus text rows.

Conversation timeline:
- Date divider: `October 3, 2024`.
- Default collapsed message-card visual:
  - Message cards are white rounded rectangles on the gray conversation canvas.
  - Collapsed cards show avatar, author, one-line preview text, compact date (`Oct 3`), and a vertical-ellipsis action button.
  - Long preview text is truncated with ellipsis rather than wrapping into a full paragraph.
  - The first Sarah Chen card is collapsed on initial load.
  - The collapsed first Sarah card shows `Sarah Chen` plus the preview, not a full email header with `schen@company.com`, angle-bracket addresses, or the full body.
- Expanded message-card visual:
  - Expanded cards keep the same white rounded surface but reveal a header row with author, `To: Lewis Clarke`, full timestamp on the right, and the vertical-ellipsis action button.
  - The expanded body has comfortable paragraph spacing and a simple ordered list.
  - Expanded state is an interaction/scrolled state, not the first-load default.
- Message-card action menu:
  - Opens from the vertical-ellipsis button on a message card.
  - Contains, in order: `Reply`, `Reply all`, `Forward`, `Resend`, divider, `Mark as unread`, `Mark as read`, `Archive`, `Delete`, `Report spam`, divider, `Print` with a `New` badge.
  - The menu is a tall floating white card aligned to the message card's right side.
- Expanded first message card content:
  - From `Sarah Chen` (`schen@company.com`) to `Lewis Clarke` (`lewis@company.com`).
  - Full date: `October 3, 2024 10:15 AM`; compact date: `Oct 3`.
  - Preview text: `Hi team, I've reviewed the latest sprint progress, and I think we need to discuss some adjustments to our project timeline. We're running into some unexpected challenges with the API integration, which might impact our delivery date.`
  - Body starts with `Hi team,`, explains API integration challenges and delivery date impact, asks to schedule a meeting, and includes an ordered list:
    - `Current blockers in the API integration`
    - `Potential solutions and workarounds`
    - `Revised timeline estimates`
  - Signoff: `Thanks, Sarah Chen Project Manager`.
- Isabella comment cluster:
  - Author `Isabella Lauda`, initial avatar `I`.
  - Message at `10:20`: `@lewis_clarke Hi Lewis`.
  - Reaction pill: `✋ 1`, tooltip `Lewis reacted`.
  - Second message at `10:20`: `what do you say?`.
- Comment bubbles are gray pill-like rounded bubbles. Mention text such as `@lewis_clarke` and `@isabella` uses the primary/link token.
- Comment bubble hover state shows a compact floating action toolbar beside the bubble with add reaction, reply, edit, and delete icons. The add-reaction icon shows a dark tooltip labeled `Add reaction`.
- Source comment hover toolbar body is `p-0.5`, rounded-full, inline-flex, `gap-0.5`, with a soft shadow; each action button is `size-7 rounded-full` with a `size-3.5` Lucide-style icon. It appears beside the hovered bubble in the same comment row on desktop and tucks below with the source left offset on smaller screens. Do not use squared buttons, large rectangular cards, or remote placement away from the bubble. Tooltip appears above or near the hovered icon.
- Lewis comment cluster:
  - Author `Lewis Clarke`, avatar photo.
  - Message at `11:12 AM`: `@isabella`.
  - Message at `11:12`: `I agree we should discuss this ASAP`.
  - Message at `11:13`: `I'm available tomorrow (Thursday) at 2 PM or Friday morning before 11 AM`.
  - Reaction pill: `👍️ 2`, tooltip `Isabella and James reacted`.
- Activity records:
  - `Assigned to Lewis Clarke` by `Isabella Lauda` at `11:28 AM`.
  - `Moved to Gmail` by `Isabella Lauda` at `11:28 AM`.
  - `Added to Generic tag` by `Isabella Lauda` at `11:29 AM`.
  - `Added to Reviews tag` by `Isabella Lauda` at `11:29 AM`.
- Expanded second message card content:
  - From `Lewis Clarke` to `Sarah Chen`.
  - Full date: `October 3, 2024 11:30 AM`; compact date: `Oct 3`.
  - Body starts `Hi Sarah,` and confirms availability for Thursday at 2 PM, then signs off `Regards, Lewis`.
- Editing reply/comment:
  - From `James Collins`, avatar photo.
  - Textarea value: `@lewis_clarke @isabella please, don't forget to add me`.
  - Include `Cancel` and `Save` buttons.
  - This edit state is an inline comment-edit control in the comment cluster next to James Collins' avatar, using the compact comment edit textarea and `Cancel`/`Save` controls. It is not a page-wide yellow warning panel, full reply composer, or detached floating form.
- Expanded third message card content:
  - From `Sarah Chen` to `Lewis Clarke`.
  - Full date: `October 3, 2024 11:45 AM`; compact date: `Oct 3`.
  - Preview/body text: `Thanks for the quick response, Alex. Thursday at 2 PM works for me. I'll send a calendar invite to the team.`
  - Signoff: `Best, Sarah Chen`.

Reply composer:
- Inline reply card appears below the active thread.
- From identity: `James Collins` with avatar photo.
- To tags include selected `Sarah Chen`.
- Cc is active with selected `Lewis Clarke` and `Isabella Lauda`.
- Bcc is inactive.
- Subject field is available with value `Re:Project Timeline Update`.
- The rich editor placeholder is `Add a message...` and has a minimum editor height close to `min-h-56`.
- Toolbar controls include formatting dropdown plus bold, italic, underline, strike, link, ordered list, unordered list, blockquote, and code actions.
- Include attachment/image/file, emoji, voice, popout, send button, and send-more dropdown controls as shown by the source.
- The popout control opens a modal reply composer with the same thread title and editor behavior.
- Reply composer visual state:
  - The composer is a large white rounded card near the bottom of the conversation, below the third message card.
  - Header rows show `From: James Collins`, `To:` selected Sarah Chen pill, and active `Cc:` selected Lewis Clarke and Isabella Lauda pills.
  - `Cc`, `Bcc`, `Subject`, and popout controls align at the top-right of the composer.
  - The editor body is a large empty white area with placeholder `Add a message...`.
  - Toolbar icons sit along the bottom-left: formatting, attach, link, emoji, voice, and delete.
  - The `Send` split button sits at the bottom-right.
- First-load position:
  - The large reply composer is not the default first viewport focus. It appears after scrolling near the lower part of the thread or as an expanded reply state.
  - On initial load, the sticky compact bottom comment bar remains visible at the bottom of the conversation pane.
- Recipient picker visual state:
  - Opening a To/Cc/Bcc picker shows a floating list below the recipient row.
  - Items appear in this order: `Sarah Chen`, `David Harrisom`, `Lewis Clarke`, `Isabella Lauda`, `Christina Williams`, and `Amanda Harvey`.
  - The selected Sarah Chen row shows a checkmark at the right.

Bottom comment composer:
- Include the source compact bottom comment textarea with placeholder `Add a comment...`; do not replace it with the rich reply composer.
- The textarea is single-row auto-height by default (`rows=1`, default height about 46, `max-h-36`) with `py-3 ps-4 pe-24`, full width, `rounded-lg`, a subtle surface/border role, and no rich-text toolbar.
- Attach, emoji, voice, and send controls are small circular icon-only buttons (`size-6`, icons `size-3.5`) in a `gap-x-1` group absolutely positioned inside the textarea wrapper at `top-1/2 inset-e-4 -translate-y-1/2`.
- The compact send control is a circular icon-only primary button with an accessible label, not a visible text `Send` button. The text `Send` split button belongs to the large reply composer only.
- The sticky bottom comment composer spans the active conversation pane with source padding and remains visible while the thread scrolls. It is not centered in a max-width wrapper, attached to a message card, converted into a bottom sheet, or replaced by the large reply editor.

Source modals:
- Reply modal title: `Re:Project Timeline Update`.
- Create tag modal title: `Create new tag`, input placeholder `e.g. App`, primary button `Create`.
- Custom snooze modal title: `Custom date & time`, date/calendar controls, time input value `9:00 AM`, primary button `Snooze`.

Visual behavior and accessibility:
- All tabs use proper tablist/tab/tabpanel semantics or the destination framework equivalent.
- Dropdowns and menus expose button semantics, `aria-haspopup`, `aria-expanded`, labels, keyboard focus, escape/blur dismissal, and keyboard navigation where supported.
- Splitter handles must be keyboard and pointer usable when implemented.
- Inputs, selects, hidden selection inputs, visible checkboxes, editor buttons, and icon-only buttons need accessible names. Only show visible checkbox/radio controls where the source menu actually shows them.
- Use real text nodes for message content. Do not bake text into screenshots or canvases.
- Keep focus rings visible and mapped to the destination primary/ring token.
- Implement polished light and dark mode for surfaces, borders, dividers, hover/active rows, dropdowns, sidebars, editors, tags, status dots, and scrollbars.

Final quality bar:
- At desktop width the result should read as a three-column shared inbox with header, primary sidebar, thread list, and active conversation pane.
- Header identity should show the actual Preline wordmark SVG from the source, not a generic icon/logo reconstruction.
- The active conversation pane should fill the splitter area. Inspect the generated DOM: there should be no `mx-auto max-w-*`, `container`, or arbitrary centered wrapper around the conversation titlebar, timeline, message stack, reply composer, or bottom comment bar.
- Avatars should match the source inventory exactly: Sarah is an `S` initial, Isabella is a purple `I` initial, Lewis uses the `photo-167941...` URL, and James/top-account uses the `photo-165948...` URL.
- The top thread action header should match the source grouping and order: `Gmail` move trigger plus archive/delete/report icons on the left; assign/avatar group, icon-only snooze, icon-only tags, and icon-only more on the right. No visible `Snooze` or `Tags` text buttons on desktop.
- First-load desktop should match the collapsed overview state: selected Costa Quinn thread, collapsed Sarah Chen card, visible comment clusters/activity, and sticky bottom comment bar.
- Thread-list tabs should be flat underline tabs, not segmented/pill tabs. They must be equal-width across the thread-list header, with full-width tab buttons and inset active underline.
- The `Newest` / `Oldest` select must look balanced left/right, with sort icon, centered label, chevron, and right-aligned dropdown.
- Open dropdowns/select menus/tooltips must visually sit above the `Project Timeline Update` title/action bars and not be clipped by the scroll pane.
- The compact bottom `Add a comment...` composer must be a single-row rounded textarea with small circular icon-only actions inside its right edge, not the rich reply editor.
- Comment hover actions must be a rounded-full pill with circular `size-7` icon buttons anchored next to the hovered bubble.
- Ordinary UI icons should match the source Lucide-style outline set; no filled/material/bootstrap/generic icon substitutions unless that is the project's established equivalent and visually matches.
- Dragging the splitter handles must resize the neighboring panes. Keyboard focus on a splitter handle should allow resizing or at least expose an accessible separator with documented keyboard behavior.
- Expanded email body, tag pill menu, message action menu, move-to menu, assign menu, snooze menu/custom date modal, tags menu, thread-row hover actions, comment hover actions, and recipient picker should exist as alternate states rather than replacing the default view.
- Dropdowns should match source-specific controls: Assign uses avatars plus right checkmarks, Tags uses tag icons plus lock icons and right checkboxes, Snooze uses hidden-radio two-column rows plus a chevron Custom row, and Move-to uses dots plus right checkmarks.
- At tablet/mobile widths the sidebars should collapse into overlays/toggles and the content pane should remain usable.
- The active thread, seven thread previews, dropdowns, tag/select menus, reply composer, comment composer, and TipTap/equivalent editor should be present.
- No placeholder chart/SVG/editor is acceptable for source behavior that is implemented with a library.
- No unrelated app shell, unrelated brand, or extra sample blocks should appear.
- Token usage should be internally consistent for the destination project, especially primary buttons and selected states.

<header class="fixed top-0 inset-x-0 z-61 flex flex-wrap md:justify-start md:flex-nowrap z-50 bg-navbar border-b border-navbar-line">
                      <div class="flex justify-between md:grid md:grid-cols-6 basis-full items-center w-full py-2 px-2 sm:px-5">
                        <div class="md:col-span-2 h-full flex items-center">
                          
                          <a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80" href="#" aria-label="Preline">
                            <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M33.5696 30.8182V11.3182H37.4474V13.7003H37.6229C37.7952 13.3187 38.0445 12.9309 38.3707 12.5369C38.7031 12.1368 39.134 11.8045 39.6634 11.5398C40.1989 11.2689 40.8636 11.1335 41.6577 11.1335C42.6918 11.1335 43.6458 11.4044 44.5199 11.946C45.3939 12.4815 46.0926 13.291 46.6158 14.3743C47.139 15.4515 47.4006 16.8026 47.4006 18.4276C47.4006 20.0095 47.1451 21.3452 46.6342 22.4347C46.1295 23.518 45.4401 24.3397 44.5661 24.8999C43.6982 25.4538 42.7256 25.7308 41.6484 25.7308C40.8852 25.7308 40.2358 25.6046 39.7003 25.3523C39.1709 25.0999 38.737 24.7829 38.3984 24.4013C38.0599 24.0135 37.8014 23.6226 37.6229 23.2287H37.5028V30.8182H33.5696ZM37.4197 18.4091C37.4197 19.2524 37.5367 19.9879 37.7706 20.6158C38.0045 21.2436 38.343 21.733 38.7862 22.0838C39.2294 22.4285 39.768 22.6009 40.402 22.6009C41.0421 22.6009 41.5838 22.4254 42.027 22.0746C42.4702 21.7176 42.8056 21.2251 43.0334 20.5973C43.2673 19.9633 43.3842 19.2339 43.3842 18.4091C43.3842 17.5904 43.2704 16.8703 43.0426 16.2486C42.8149 15.6269 42.4794 15.1406 42.0362 14.7898C41.593 14.4389 41.0483 14.2635 40.402 14.2635C39.7618 14.2635 39.2202 14.4328 38.777 14.7713C38.34 15.1098 38.0045 15.59 37.7706 16.2116C37.5367 16.8333 37.4197 17.5658 37.4197 18.4091ZM49.2427 25.5V11.3182H53.0559V13.7926H53.2037C53.4622 12.9124 53.8961 12.2476 54.5055 11.7983C55.1149 11.3428 55.8166 11.1151 56.6106 11.1151C56.8076 11.1151 57.02 11.1274 57.2477 11.152C57.4754 11.1766 57.6755 11.2105 57.8478 11.2536V14.7436C57.6632 14.6882 57.4077 14.639 57.0815 14.5959C56.7553 14.5528 56.4567 14.5312 56.1859 14.5312C55.6073 14.5312 55.0903 14.6574 54.6348 14.9098C54.1854 15.156 53.8284 15.5007 53.5638 15.9439C53.3052 16.3871 53.176 16.898 53.176 17.4766V25.5H49.2427ZM64.9043 25.777C63.4455 25.777 62.1898 25.4815 61.1373 24.8906C60.0909 24.2936 59.2845 23.4503 58.7182 22.3608C58.1519 21.2652 57.8688 19.9695 57.8688 18.4737C57.8688 17.0149 58.1519 15.7346 58.7182 14.6328C59.2845 13.531 60.0816 12.6723 61.1096 12.0568C62.1437 11.4413 63.3563 11.1335 64.7474 11.1335C65.683 11.1335 66.5539 11.2843 67.3603 11.5859C68.1728 11.8814 68.8806 12.3277 69.4839 12.9247C70.0932 13.5218 70.5672 14.2727 70.9057 15.1776C71.2443 16.0762 71.4135 17.1288 71.4135 18.3352V19.4155H59.4384V16.978H67.7111C67.7111 16.4117 67.588 15.91 67.3418 15.473C67.0956 15.036 66.754 14.6944 66.317 14.4482C65.8861 14.1958 65.3844 14.0696 64.812 14.0696C64.2149 14.0696 63.6856 14.2081 63.2239 14.4851C62.7684 14.7559 62.4114 15.1222 62.1529 15.5838C61.8944 16.0393 61.762 16.5471 61.7559 17.1072V19.4247C61.7559 20.1264 61.8851 20.7327 62.1437 21.2436C62.4083 21.7545 62.7807 22.1484 63.2608 22.4254C63.741 22.7024 64.3103 22.8409 64.9689 22.8409C65.406 22.8409 65.8061 22.7794 66.1692 22.6562C66.5324 22.5331 66.8432 22.3485 67.1018 22.1023C67.3603 21.8561 67.5572 21.5545 67.6927 21.1974L71.3304 21.4375C71.1458 22.3116 70.7672 23.0748 70.1948 23.7273C69.6285 24.3736 68.896 24.8783 67.9974 25.2415C67.1048 25.5985 66.0738 25.777 64.9043 25.777ZM77.1335 6.59091V25.5H73.2003V6.59091H77.1335ZM79.5043 25.5V11.3182H83.4375V25.5H79.5043ZM81.4801 9.49006C80.8954 9.49006 80.3937 9.29616 79.9752 8.90838C79.5628 8.51444 79.3566 8.04356 79.3566 7.49574C79.3566 6.95407 79.5628 6.48935 79.9752 6.10156C80.3937 5.70762 80.8954 5.51065 81.4801 5.51065C82.0649 5.51065 82.5635 5.70762 82.9759 6.10156C83.3944 6.48935 83.6037 6.95407 83.6037 7.49574C83.6037 8.04356 83.3944 8.51444 82.9759 8.90838C82.5635 9.29616 82.0649 9.49006 81.4801 9.49006ZM89.7415 17.3011V25.5H85.8083V11.3182H89.5569V13.8203H89.723C90.037 12.9955 90.5632 12.343 91.3019 11.8629C92.0405 11.3767 92.9361 11.1335 93.9887 11.1335C94.9735 11.1335 95.8322 11.349 96.5647 11.7798C97.2971 12.2107 97.8665 12.8262 98.2728 13.6264C98.679 14.4205 98.8821 15.3684 98.8821 16.4702V25.5H94.9489V17.1719C94.9551 16.304 94.7335 15.6269 94.2841 15.1406C93.8348 14.6482 93.2162 14.402 92.4283 14.402C91.8989 14.402 91.4311 14.5159 91.0249 14.7436C90.6248 14.9714 90.3109 15.3037 90.0831 15.7408C89.8615 16.1716 89.7477 16.6918 89.7415 17.3011ZM107.665 25.777C106.206 25.777 104.951 25.4815 103.898 24.8906C102.852 24.2936 102.045 23.4503 101.479 22.3608C100.913 21.2652 100.63 19.9695 100.63 18.4737C100.63 17.0149 100.913 15.7346 101.479 14.6328C102.045 13.531 102.842 12.6723 103.87 12.0568C104.905 11.4413 106.117 11.1335 107.508 11.1335C108.444 11.1335 109.315 11.2843 110.121 11.5859C110.934 11.8814 111.641 12.3277 112.245 12.9247C112.854 13.5218 113.328 14.2727 113.667 15.1776C114.005 16.0762 114.174 17.1288 114.174 18.3352V19.4155H102.199V16.978H110.472C110.472 16.4117 110.349 15.91 110.103 15.473C109.856 15.036 109.515 14.6944 109.078 14.4482C108.647 14.1958 108.145 14.0696 107.573 14.0696C106.976 14.0696 106.446 14.2081 105.985 14.4851C105.529 14.7559 105.172 15.1222 104.914 15.5838C104.655 16.0393 104.523 16.5471 104.517 17.1072V19.4247C104.517 20.1264 104.646 20.7327 104.905 21.2436C105.169 21.7545 105.542 22.1484 106.022 22.4254C106.502 22.7024 107.071 22.8409 107.73 22.8409C108.167 22.8409 108.567 22.7794 108.93 22.6562C109.293 22.5331 109.604 22.3485 109.863 22.1023C110.121 21.8561 110.318 21.5545 110.454 21.1974L114.091 21.4375C113.907 22.3116 113.528 23.0748 112.956 23.7273C112.389 24.3736 111.657 24.8783 110.758 25.2415C109.866 25.5985 108.835 25.777 107.665 25.777Z" class="fill-primary" fill="currentColor"/>
                              <path d="M1 29.5V16.5C1 9.87258 6.37258 4.5 13 4.5C19.6274 4.5 25 9.87258 25 16.5C25 23.1274 19.6274 28.5 13 28.5H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                              <path d="M5 29.5V16.66C5 12.1534 8.58172 8.5 13 8.5C17.4183 8.5 21 12.1534 21 16.66C21 21.1666 17.4183 24.82 13 24.82H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                              <circle cx="13" cy="16.5214" r="5" class="fill-primary" fill="currentColor"/>
                            </svg>
                          </a>
                          
      
                          <div id="hs-left-sidebar-toggle" class="xl:hidden ms-3">
                            
                            <button type="button" class="w-7 h-9.5 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-inbox-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-inbox-sidebar">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 8L21 12L17 16M3 12H13M3 6H13M3 18H13"/></svg>
                            </button>
                            
                          </div>
                        </div>

<div class="md:col-span-2 hidden md:block">
                          
                          <div class="relative">
                            <div class="absolute inset-y-0 inset-s-0 flex items-center pointer-events-none z-20 ps-3.5">
                              <svg class="shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                            </div>
                            <input type="text" class="py-2 ps-10 px-3 block w-full bg-layer border-layer-line rounded-lg text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="Search in mail">
                            <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                              <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                <span class="sr-only">Close</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                              </button>
                            </div>
                          </div>
                          
                        </div>

<button type="button" class="size-9.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                          </button>

<button type="button" class="size-9.5 inline-flex justify-center items-center gap-x-2 rounded-lg border border-transparent text-muted-foreground-1 hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                          </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-dnad">
                                <div class="p-1 border-b border-dropdown-divider">
                                  <a class="py-2 px-3 flex items-center gap-x-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="../../../templates/dashboards/admin-dashboard/user-profile-my-profile.html">
                                    <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">

<div class="grow">
                                      <span class="text-sm font-semibold text-foreground">
                                        James Collison
                                      </span>
                                      <p class="text-xs text-muted-foreground-1">
                                        Preline@HS
                                      </p>
                                    </div>
                                  </a>
                                </div>
                                <div class="p-1">
                                  <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                    <svg class="shrink-0 mt-0.5 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>
                                    Billing
                                  </a>
                                  <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                                    Settings
                                  </a>
                                  <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                    <svg class="shrink-0 mt-0.5 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                    My account
                                  </a>
                                </div>
                                <div class="px-4 py-3.5 border-y border-dropdown-divider">
                                  
                                  <div class="flex flex-wrap justify-between items-center gap-2">
                                    <label for="hs-pro-inndm" class="flex-1 cursor-pointer text-sm text-foreground">Dark mode</label>
                                    <label for="hs-pro-inndm" class="relative inline-block w-11 h-6 cursor-pointer">
                                      <input data-hs-theme-switch type="checkbox" id="hs-pro-inndm" class="peer sr-only">
                                      <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                      <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform! duration-200 ease-in-out peer-checked:translate-x-full"></span>
                                    </label>
                                  </div>
                                  
                                </div>
                                <div class="p-1">
                                  <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                    Customization
                                    <div class="ms-auto">
                                      <span class="ms-auto inline-flex items-center gap-1.5 py-px px-1.5 rounded-sm text-[10px] leading-4 font-medium bg-surface text-surface-foreground">
                                        New
                                      </span>
                                    </div>
                                  </a>
                                  <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                    Manage team
                                  </a>
                                  <a class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" href="#">
                                    Sign out
                                  </a>
                                </div>
                                <div class="p-1 border-t border-dropdown-divider">
                                  <button type="button" class="flex mt-0.5 gap-x-3 py-2 px-3 w-full rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-dasadam">
                                    <svg class="shrink-0 size-4 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 12h8"/><path d="M12 8v8"/></svg>
                                    Add team account
                                  </button>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>
                      </div>
                    </header>

<div id="hs-main-layout-splitter" data-hs-layout-splitter='{"isSplittersAddedManually": true}'>
                      <div class="pt-14 -mt-px flex" data-hs-layout-splitter-horizontal-group>
                        
                        <aside id="hs-pro-inbox-sidebar" class="hs-overlay 
                            -translate-x-full transition-all duration-300 transform
                            w-64 h-full
                            hidden
                            fixed inset-y-0 inset-s-0 z-60
                            bg-sidebar border-e border-sidebar-line
                            
    
                            [--auto-close:xl] [--auto-close-equality-type:less-than]
                            xl:w-auto
                            xl:static xl:top-auto xl:inset-s-auto 
                            xl:block
                            xl:translate-x-0 xl:h-[calc(100dvh-55px)] xl:transition-none

hs-overlay-open:translate-x-0
                            hs-layout-splitter-dragging:pointer-events-none
  
                            hs-layout-splitter-prev-pre-limit-reached:w-64
                            hs-layout-splitter-prev-pre-limit-reached:h-dvh
                            hs-layout-splitter-prev-pre-limit-reached:overflow-auto
                            hs-layout-splitter-prev-pre-limit-reached:fixed hs-layout-splitter-prev-pre-limit-reached:top-0 hs-layout-splitter-prev-pre-limit-reached:inset-s-0 hs-layout-splitter-prev-pre-limit-reached:z-70
                            hs-layout-splitter-prev-pre-limit-reached:-translate-x-full hs-layout-splitter-prev-pre-limit-reached:transition-all
  
                            hs-overlay-open:hs-layout-splitter-prev-pre-limit-reached:translate-x-0" tabindex="-1" aria-label="Sidebar" data-hs-layout-splitter-item='{
                              "dynamicSize": 15.0,
                              "minSize": 12.0
                            }' style="flex: 15 1 0px;">
                          <div class="size-full flex">
                            <div class="flex flex-col size-full max-h-full">
                              
                              <div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                
                                <nav class="flex pt-2.5 pb-4 px-2.5 w-full flex flex-col">
                                  <div class="px-1.5">
                                    
                                    <button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-1.5 text-xs font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-intcm">
                                      <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>
                                      Compose
                                    </button>
                                    
                                  </div>
    
                                  
                                  <div class="py-1.5 space-y-0.5">
                                    
                                    <div class="pt-3 pb-1.5 ps-2 pe-0.5 flex justify-between items-center gap-x-2">
                                      <span class="block text-xs truncate text-muted-foreground-1">
                                        <span class="truncate">Pages</span>
                                      </span>
                                      <span class="py-px px-1.5 inline-flex items-center gap-x-1.5 text-xs bg-primary-100 text-primary-800 rounded-md dark:bg-primary-500/10 dark:text-primary-500">
                                        New
                                      </span>
                                    </div>

<div>
                                      <a class="flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus bg-sidebar-nav-active" href="index.html">
                                        <span class="w-3.5"></span>
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="truncate">Inbox</span>
                                        <span class="ms-auto">
                                          <span class="text-xs opacity-60">
                                            3
                                          </span>
                                        </span>
                                      </a>
                                    </div>

<div>
                                      <a class="flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="contacts.html">
                                        <span class="w-3.5"></span>
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                                        <span class="truncate">Contacts</span>
                                        <span class="ms-auto">
                                          <span class="text-xs opacity-60">
                                            245
                                          </span>
                                        </span>
                                      </a>
                                    </div>

<div>
                                      <a class="flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus " href="reports.html">
                                        <span class="w-3.5"></span>
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="18" y1="20" y2="10"/><line x1="12" x2="12" y1="20" y2="4"/><line x1="6" x2="6" y1="20" y2="14"/></svg>
                                        <span class="truncate">Reports</span>
                                      </a>
                                    </div>
                                    
                                  </div>

<div class="py-1.5 space-y-0.5">
                                    
                                    <div class="pt-3 pb-1.5 ps-2 pe-0.5 flex justify-between items-center gap-x-2">
                                      <span class="block text-xs truncate text-muted-foreground-1">
                                        <span class="truncate">Mailboxes</span>
                                      </span>
                                    </div>

<div class="hs-accordion active" id="inbox-accordion">
                                      <button type="button" class="hs-accordion-toggle w-full text-start flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" aria-expanded="true" aria-controls="inbox-accordion-sub">
                                        <span class="w-3.5">
                                          <svg class="hs-accordion-active:-rotate-180 shrink-0 size-3.5 transition" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </span>
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="truncate">Inbox</span>
                                        <span class="ms-auto">
                                          <span class="text-xs opacity-60">
                                            1,086
                                          </span>
                                        </span>
                                      </button>

<div id="inbox-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="inbox-accordion">
                                        <ul class="hs-accordion-group mt-0.5 space-y-0.5" data-hs-accordion-always-open>
                                          <li>
                                            <a class="flex items-center gap-x-2 py-1.5 ps-8 pe-3 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                                              <span class="truncate">Assigned to me</span>

<li>
                                            <a class="flex items-center gap-x-2 py-1.5 ps-8 pe-3 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                                              <span class="truncate">Shared with me</span>

<li>
                                            <a class="flex items-center gap-x-2 py-1.5 ps-8 pe-3 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 10h.01"/><path d="M12 10h.01"/><path d="M16 10h.01"/></svg>
                                              <span class="truncate">Discussions</span>
                                            </a>
                                          </li>

<li>
                                            <a class="flex items-center gap-x-2 py-1.5 ps-8 pe-3 font-semibold text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                              <div class="shrink-0 w-3.5">
                                                <div class="shrink-0 size-2 mx-auto bg-teal-500 rounded-full"></div>
                                              </div>
                                              <span class="truncate">Gmail</span>

<div>
                                      <a class="flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                        <span class="w-3.5"></span>
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                        <span class="truncate">Starred</span>
                                      </a>
                                    </div>

<div>
                                      <a class="flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                        <span class="w-3.5"></span>
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="truncate">Sent</span>
                                      </a>
                                    </div>

<div>
                                      <a class="flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                        <span class="w-3.5"></span>
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/></svg>
                                        <span class="truncate">Drafts</span>
                                      </a>
                                    </div>

<div id="hs-pro-isnshml-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-pro-isnshml" role="region">
                                      <div class="space-y-0.5">
                                        
                                        <div>
                                          <a class="flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                            <span class="w-3.5"></span>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"/><polyline points="12 6 12 12 16 14"/></svg>
                                            <span class="truncate">Snoozed</span>
                                          </a>
                                        </div>

<div>
                                          <a class="flex items-center gap-x-2 py-1.5 px-2.5 font-semibold text-sm text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                            <span class="w-3.5"></span>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="truncate">Spam</span>
                                            <span class="ms-auto lg:group-hover:opacity-0">
                                              <span class="text-xs opacity-60">
                                                3
                                              </span>
                                            </span>
                                          </a>
                                        </div>

<div>
                                          <a class="flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                            <span class="w-3.5"></span>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                            <span class="truncate">Trash</span>
                                          </a>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="pt-1">
                                      <button type="button" class="hs-collapse-toggle py-1 px-2 flex justify-center items-center gap-x-1 text-xs text-muted-foreground-1 rounded-md hover:bg-sidebar-nav-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" id="hs-pro-isnshml" aria-expanded="false" aria-controls="hs-pro-isnshml-heading" data-hs-collapse="#hs-pro-isnshml-heading">
                                        Show
                                        <span class="hs-collapse-open:hidden">more</span>
                                        <span class="hs-collapse-open:block hidden">less</span>
                                        <svg class="hs-collapse-open:-rotate-180 shrink-0 size-3 transition" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                    </div>
                                    
                                  </div>

<div class="py-1.5 space-y-0.5">
                                    
                                    <div class="ps-2 pe-0.5 flex justify-between items-center gap-x-2">
                                      <span class="block text-xs truncate text-muted-foreground-1">
                                        <span class="truncate">Work</span>
                                      </span>

<div class="hs-tooltip [--placement:left] inline-block">
                                        <button type="button" class="hs-tooltip-toggle size-8 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-lg hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-chhcntm">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 12h8"/><path d="M12 8v8"/></svg>
                                        </button>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                          Create new label
                                        </span>
                                      </div>
                                      
                                    </div>

<div class="hs-accordion active" id="preline-accordion">
                                      <button type="button" class="hs-accordion-toggle w-full text-start flex items-center gap-x-2 py-1.5 px-2.5 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" aria-expanded="true" aria-controls="preline-accordion-sub">
                                        <span class="w-3.5">
                                          <svg class="hs-accordion-active:-rotate-180 shrink-0 size-3.5 transition" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </span>
                                        <span class="flex shrink-0 justify-center items-center size-3.5 text-[10px] uppercase bg-primary text-primary-foreground rounded-full">
                                          P
                                        </span>
                                        <span class="truncate">Preline</span>
                                        <span class="ms-auto lg:group-hover:opacity-0">
                                          <span class="text-xs opacity-60">
                                            10
                                          </span>
                                        </span>
                                      </button>

<div id="preline-accordion-sub" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="preline-accordion">
                                        <ul class="hs-accordion-group mt-0.5 space-y-0.5" data-hs-accordion-always-open>
                                          <li>
                                            <a class="flex items-center gap-x-2 py-1.5 ps-8 pe-3 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                              <div class="shrink-0 w-3.5">
                                                <div class="shrink-0 size-2 mx-auto bg-indigo-500 rounded-full"></div>
                                              </div>
                                              <span class="truncate">Github</span>

<li>
                                            <a class="flex items-center gap-x-2 py-1.5 ps-8 pe-3 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                              <div class="shrink-0 w-3.5">
                                                <div class="shrink-0 size-2 mx-auto bg-red-500 rounded-full"></div>
                                              </div>
                                              <span class="truncate">Gmail</span>

<li>
                                            <a class="flex items-center gap-x-2 py-1.5 ps-8 pe-3 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                              <div class="shrink-0 w-3.5">
                                                <div class="shrink-0 size-2 mx-auto bg-primary rounded-full"></div>
                                              </div>
                                              <span class="truncate">Crisp</span>

<li>
                                            <a class="flex items-center gap-x-2 py-1.5 ps-8 pe-3 text-sm truncate text-sidebar-nav-foreground rounded-lg hover:bg-sidebar-nav-hover focus:outline-hidden focus:bg-sidebar-nav-focus" href="#">
                                              <div class="shrink-0 w-3.5">
                                                <div class="shrink-0 size-2 mx-auto bg-orange-500 rounded-full"></div>
                                              </div>
                                              <span class="truncate">Slack - Internal</span>

</div>

<div class="hs-layout-splitter-control relative hidden xl:flex">
                          <span class="absolute top-1/2 inset-s-1/2 z-60 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-layer-hover">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>
                            </svg>
                          </span>
                        </div>

<div id="hs-pro-inbox-thread-list-sidebar" class="hs-overlay [--auto-close:lg] [--auto-close-equality-type:less-than]
                            hs-overlay-open:translate-x-0
                            lg:overflow-x-hidden lg:overflow-y-hidden
                            h-dvh
                            fixed inset-s-0 z-59 w-80 lg:w-auto lg:static top-13.5 lg:top-auto lg:inset-s-auto 
                            -translate-x-full transition-all duration-300 transform lg:transition-none
                            hidden
                            bg-sidebar lg:border-e border-sidebar-line
                            hs-layout-splitter-dragging:pointer-events-none
                            lg:block lg:translate-x-0 lg:h-[calc(100dvh-55px)] " role="dialog" tabindex="-1" aria-label="Thread List" data-hs-layout-splitter-item='{
                              "dynamicSize": 21.0,
                              "minSize": 17.0
                            }' style="flex: 21.0 1 0px;">
                          <div class="h-full flex">
                            <div class="size-full">
                              <div class="h-full flex flex-col">
                                
                                <div class="border-b border-overlay-divider">
                                  <div class="-mb-1 pt-2 px-2 overflow-x-auto">
                                    
                                    <nav  class="flex gap-1 w-full" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                                      <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2.5 py-2 mb-3 relative w-full inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground font-medium text-xs rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus after:absolute after:-bottom-2 after:inset-x-2.5 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-intltg-item-unassigned" aria-selected="true" data-hs-tab="#hs-pro-tabs-intltg-unassigned" aria-controls="hs-pro-tabs-intltg-unassigned" role="tab" >
                                        Unassigned
                                      </button>
                                      <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2.5 py-2 mb-3 relative w-full inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground font-medium text-xs rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus after:absolute after:-bottom-2 after:inset-x-2.5 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-intltg-item-assigned" aria-selected="false" data-hs-tab="#hs-pro-tabs-intltg-assigned" aria-controls="hs-pro-tabs-intltg-assigned" role="tab" >
                                        Assigned
                                      </button>
                                      <button type="button" class="hs-tab-active:after:bg-secondary hs-tab-active:text-foreground px-2.5 py-2 mb-3 relative w-full inline-flex justify-center items-center gap-x-2 hover:bg-muted-hover text-muted-foreground-1 hover:text-foreground font-medium text-xs rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus after:absolute after:-bottom-2 after:inset-x-2.5 after:z-10 after:h-0.5 after:pointer-events-none disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-intltg-item-archived" aria-selected="false" data-hs-tab="#hs-pro-tabs-intltg-archived" aria-controls="hs-pro-tabs-intltg-archived" role="tab" >
                                        Archived
                                      </button>
                                    </nav>
                                    
                                  </div>
                                </div>

<div class="h-full overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                  
                                  <div id="hs-pro-tabs-intltg-unassigned" class="h-full" role="tabpanel" aria-labelledby="hs-pro-tabs-intltg-item-unassigned">
                                    
                                    <div class="p-2 ps-5 flex justify-between items-center gap-x-2 border-b border-b-line-1">
                                      <p class="text-xs text-muted-foreground-1">
                                        3 unread
                                      </p>

<div class="flex items-center">
                                        
                                        <div class="relative inline-block">
                                          <select id="hs-pro-select-revenue" data-hs-select='{
                                              "placeholder": "Select option...",
                                              "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                              "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative px-6 inline-flex shrink-0 justify-center items-center gap-x-2.5 text-xs leading-7 text-foreground rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1",
                                              "dropdownClasses": "mt-2 inset-e-0 z-50 w-40 p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl",
                                              "optionClasses": "hs-selected:bg-select-item-active py-1.5 px-2 w-full text-[13px] text-select-item-foreground rounded-lg cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                                              "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                                              "extraMarkup": "<div><div class=\"absolute top-1/2 inset-s-1.5 -translate-y-1/2\"><svg class=\"shrink-0 size-3 text-muted-foreground-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m3 16 4 4 4-4\"/><path d=\"M7 20V4\"/><path d=\"m21 8-4-4-4 4\"/><path d=\"M17 4v16\"/></svg></div><div class=\"absolute top-1/2 inset-e-1.5 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>"
                                            }' class="hidden">
                                            <option value="">Choose</option>
                                            <option selected>Newest</option>
                                            <option>Oldest</option>
                                            <option>Newest unreplied</option>
                                            <option>Oldest unreplied</option>
                                          </select>
                                        </div>
                                        
                                      </div>
                                    </div>

<div aria-label="Tabs" role="tablist" aria-orientation="vertical">
                                      
                                      <div class="hs-tab-active:bg-muted-active hs-dropdown-toggle group cursor-pointer bg-layer hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus active " id="hs-pro-tabs-intl-item-1" aria-selected="true" data-hs-tab="#hs-pro-tabs-intl-1" aria-controls="hs-pro-tabs-intl-1" role="tab" >
                                        
                                        <div class="p-3 relative border-b border-b-line-1">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0 w-5 mt-[5px] flex flex-col">
                                              <input type="checkbox" class="size-2.5 mx-auto appearance-none bg-none border-0 bg-primary checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full checked:opacity-0 group-hover:opacity-100 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inrsid1" name="hs-pro-inrsn" checked>
                                              <label for="hs-pro-inrsid1" class="sr-only">Read Status</label>
                                            </div>

<div class="grow truncate">
                                              <div class="flex justify-between items-center gap-x-1">
                                                <p class="truncate  text-sm text-foreground">Costa Quinn</p>
                                                <span class="opacity-100 group-hover:opacity-0 text-[11px] text-muted-foreground uppercase">Now</span>
                                              </div>
                                              <div class="flex justify-between items-center gap-x-1">
                                                <div class="grow mt-1 flex items-center gap-x-2 truncate text-foreground">
                                                  <span class="py-0.5 px-1.5 max-w-20 truncate text-xs bg-surface-1 text-surface-foreground rounded-sm">
                                                    Generic, +1
                                                  </span>
                                                  <span class="truncate text-[13px] text-muted-foreground-2">Project Timeline Update</span>
                                                </div>
                                                <span class="me-1 text-xs text-muted-foreground">2</span>
                                              </div>
                                              <p class="mt-1 truncate text-[13px] text-muted-foreground">Hi team, I've reviewed the latest sprint progress</p>
                                            </div>
                                          </div>

<div class="lg:opacity-0 lg:group-hover:opacity-100 lg:absolute top-0 inset-e-0 z-1 p-2 ms-5">
                                            <div class="p-0.5 inline-flex items-center gap-1 bg-layer border border-layer-line rounded-lg shadow-2xs">
                                              
                                              <div class="hs-tooltip [--placement:top] inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-6 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Archive
                                                </span>
                                              </div>

<div class="hs-tooltip [--placement:top] inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-6 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-label="Close" data-hs-remove-element="#hs-pro-tabs-intl-item-1">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Delete
                                                </span>
                                              </div>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-tab-active:bg-muted-active hs-dropdown-toggle group cursor-pointer bg-layer hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus  " id="hs-pro-tabs-intl-item-2" aria-selected="false" data-hs-tab="#hs-pro-tabs-intl-2" aria-controls="hs-pro-tabs-intl-2" role="tab" >
                                        
                                        <div class="p-3 relative border-b border-b-line-1">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0 w-5 mt-[5px] flex flex-col">
                                              <input type="checkbox" class="size-2.5 mx-auto appearance-none bg-none border-0 bg-primary checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full checked:opacity-0 group-hover:opacity-100 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inrsid2" name="hs-pro-inrsn" >
                                              <label for="hs-pro-inrsid2" class="sr-only">Read Status</label>
                                            </div>

<div class="grow truncate">
                                              <div class="flex justify-between items-center gap-x-1">
                                                <p class="truncate font-semibold text-sm text-foreground">Rachel Doe</p>
                                                <span class="opacity-100 group-hover:opacity-0 text-[11px] text-muted-foreground uppercase">09:35</span>
                                              </div>
                                              <div class="flex justify-between items-center gap-x-1">
                                                <div class="grow mt-1 flex items-center gap-x-2 truncate text-foreground">
                                                  <span class="truncate text-[13px] text-muted-foreground-2">RE: Follow-up</span>
                                                </div>
                                                <span class="me-1 text-xs text-muted-foreground">3</span>
                                              </div>
                                              <div class="mt-1 flex items-center gap-x-1.5">
                                                <div class="grow truncate">
                                                  <p class="truncate text-[13px] text-muted-foreground">I hope you're doing well. I wanted to check in on the proposal you sent last week for the web design project we discussed.</p>
                                                </div>
                                                <div class="py-0.5 ps-1 pe-1.5 flex items-center gap-x-1 border border-line-2 text-[10px] text-muted-foreground rounded-full">
                                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                                                  <span>+2</span>
                                                </div>
                                              </div>
                                            </div>
                                          </div>

<div class="hs-tooltip [--placement:top] inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-6 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-label="Close" data-hs-remove-element="#hs-pro-tabs-intl-item-2">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Delete
                                                </span>
                                              </div>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-tab-active:bg-muted-active hs-dropdown-toggle group cursor-pointer bg-layer hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus  " id="hs-pro-tabs-intl-item-3" aria-selected="false" data-hs-tab="#hs-pro-tabs-intl-3" aria-controls="hs-pro-tabs-intl-3" role="tab" >
                                        
                                        <div class="p-3 relative border-b border-b-line-1">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0 w-5 mt-[5px] flex flex-col">
                                              <input type="checkbox" class="size-2.5 mx-auto appearance-none bg-none border-0 bg-primary checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full checked:opacity-0 group-hover:opacity-100 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inrsid3" name="hs-pro-inrsn" checked>
                                              <label for="hs-pro-inrsid3" class="sr-only">Read Status</label>
        
                                              <div class="mt-auto">
                                                <span class="flex shrink-0 justify-center items-center size-5 text-[10px] uppercase bg-purple-500 text-foreground-inverse rounded-full">I</span>
                                              </div>
                                            </div>

<div class="grow truncate">
                                              <div class="flex justify-between items-center gap-x-1">
                                                <p class="truncate  text-sm text-foreground">isabella@site.com</p>
                                                <span class="opacity-100 group-hover:opacity-0 text-[11px] text-muted-foreground uppercase">01/10/2024</span>
                                              </div>
                                              <div class="flex justify-between items-center gap-x-1">
                                                <div class="grow mt-1 flex items-center gap-x-2 truncate text-foreground">
                                                  <span class="truncate text-[13px] text-muted-foreground-2">Quarterly marketing strategy review meeting</span>
                                                </div>
                                                <span class="me-1 text-xs text-muted-foreground">1</span>
                                              </div>
                                              <div class="mt-1 flex">
                                                <div class="mt-1 py-0.5 px-2 truncate flex items-center gap-x-1.5 bg-primary-100 text-primary dark:bg-primary-500/20 rounded-full">
                                                  <span class="py-1.5 inline-flex gap-x-0.5"><span class="size-[5px] bg-primary animate-[typing_1s_ease-in-out_infinite] rounded-full"></span><span class="size-[5px] bg-primary animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span><span class="size-[5px] bg-primary animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span></span>
                                                </div>
                                              </div>
                                            </div>
                                          </div>

<div class="hs-tooltip [--placement:top] inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-6 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-label="Close" data-hs-remove-element="#hs-pro-tabs-intl-item-3">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Delete
                                                </span>
                                              </div>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-tab-active:bg-muted-active hs-dropdown-toggle group cursor-pointer bg-layer hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus  " id="hs-pro-tabs-intl-item-4" aria-selected="false" data-hs-tab="#hs-pro-tabs-intl-4" aria-controls="hs-pro-tabs-intl-4" role="tab" >
                                        
                                        <div class="p-3 relative border-b border-b-line-1">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0 w-5 mt-[5px] flex flex-col">
                                              <input type="checkbox" class="size-2.5 mx-auto appearance-none bg-none border-0 bg-primary checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full checked:opacity-0 group-hover:opacity-100 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inrsid4" name="hs-pro-inrsn" >
                                              <label for="hs-pro-inrsid4" class="sr-only">Read Status</label>
                                            </div>

<div class="grow truncate">
                                              <div class="flex justify-between items-center gap-x-1">
                                                <p class="truncate font-semibold text-sm text-foreground">Finch Hoot</p>
                                                <span class="opacity-100 group-hover:opacity-0 text-[11px] text-muted-foreground uppercase">28/09/2024</span>
                                              </div>
                                              <div class="flex justify-between items-center gap-x-1">
                                                <div class="grow mt-1 flex items-center gap-x-2 truncate text-foreground">
                                                  <span class="truncate text-[13px] text-muted-foreground-2">RE: Follow-up</span>
                                                </div>
                                                <span class="me-1 text-xs text-muted-foreground">5</span>
                                              </div>
                                              <p class="mt-1 truncate text-[13px] text-muted-foreground">Awesome! 🔥</p>
                                            </div>
                                          </div>

<div class="hs-tooltip [--placement:top] inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-6 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-label="Close" data-hs-remove-element="#hs-pro-tabs-intl-item-4">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Delete
                                                </span>
                                              </div>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-tab-active:bg-muted-active hs-dropdown-toggle group cursor-pointer bg-layer hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus  " id="hs-pro-tabs-intl-item-5" aria-selected="false" data-hs-tab="#hs-pro-tabs-intl-5" aria-controls="hs-pro-tabs-intl-5" role="tab" >
                                        
                                        <div class="p-3 relative border-b border-b-line-1">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0 w-5 mt-[5px] flex flex-col">
                                              <input type="checkbox" class="size-2.5 mx-auto appearance-none bg-none border-0 bg-primary checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full checked:opacity-0 group-hover:opacity-100 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inrsid5" name="hs-pro-inrsn" >
                                              <label for="hs-pro-inrsid5" class="sr-only">Read Status</label>
                                            </div>

<div class="grow truncate">
                                              <div class="flex justify-between items-center gap-x-1">
                                                <p class="truncate font-semibold text-sm text-foreground">casey112oklahoma@site.com</p>
                                                <span class="opacity-100 group-hover:opacity-0 text-[11px] text-muted-foreground uppercase">28/09/2024</span>
                                              </div>
                                              <div class="flex justify-between items-center gap-x-1">
                                                <div class="grow mt-1 flex items-center gap-x-2 truncate text-foreground">
                                                  <span class="truncate text-[13px] text-muted-foreground-2">Missing payout</span>
                                                </div>
                                                <span class="me-1 text-xs text-muted-foreground">19</span>
                                              </div>
                                              <p class="mt-1 truncate text-[13px] text-muted-foreground">Thanks</p>
                                            </div>
                                          </div>

<div class="hs-tooltip [--placement:top] inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-6 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-label="Close" data-hs-remove-element="#hs-pro-tabs-intl-item-5">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Delete
                                                </span>
                                              </div>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-tab-active:bg-muted-active hs-dropdown-toggle group cursor-pointer bg-layer hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus  " id="hs-pro-tabs-intl-item-6" aria-selected="false" data-hs-tab="#hs-pro-tabs-intl-6" aria-controls="hs-pro-tabs-intl-6" role="tab" >
                                        
                                        <div class="p-3 relative border-b border-b-line-1">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0 w-5 mt-[5px] flex flex-col">
                                              <input type="checkbox" class="size-2.5 mx-auto appearance-none bg-none border-0 bg-primary checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full checked:opacity-0 group-hover:opacity-100 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inrsid6" name="hs-pro-inrsn" checked>
                                              <label for="hs-pro-inrsid6" class="sr-only">Read Status</label>
        
                                              <div class="mt-auto">
                                                <img class="shrink-0 size-5 rounded-full object-cover" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                              </div>
                                            </div>

<div class="grow truncate">
                                              <div class="flex justify-between items-center gap-x-1">
                                                <p class="truncate  text-sm text-foreground">amandaharvey@site.com</p>
                                                <span class="opacity-100 group-hover:opacity-0 text-[11px] text-muted-foreground uppercase">25/09/2024</span>
                                              </div>
                                              <div class="flex justify-between items-center gap-x-1">
                                                <div class="grow mt-1 flex items-center gap-x-2 truncate text-foreground">
                                                  <span class="truncate text-[13px] text-muted-foreground-2">Quarterly marketing strategy review meeting</span>
                                                </div>
                                                <span class="me-1 text-xs text-muted-foreground">7</span>
                                              </div>
                                              <div class="mt-1 flex">
                                                <div class="mt-1 py-0.5 px-2 truncate flex items-center gap-x-1.5 bg-surface-1 text-surface-foreground rounded-full">
                                                  <p class="truncate text-[13px] leading-4">@brian any thoughts on that?</p>
                                                </div>
                                              </div>
                                            </div>
                                          </div>

<div class="hs-tooltip [--placement:top] inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-6 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-label="Close" data-hs-remove-element="#hs-pro-tabs-intl-item-6">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Delete
                                                </span>
                                              </div>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

<div class="hs-tab-active:bg-muted-active hs-dropdown-toggle group cursor-pointer bg-layer hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus  " id="hs-pro-tabs-intl-item-7" aria-selected="false" data-hs-tab="#hs-pro-tabs-intl-7" aria-controls="hs-pro-tabs-intl-7" role="tab" >
                                        
                                        <div class="p-3 relative border-b border-b-line-1">
                                          <div class="flex gap-x-2">
                                            <div class="shrink-0 w-5 mt-[5px] flex flex-col">
                                              <input type="checkbox" class="size-2.5 mx-auto appearance-none bg-none border-0 bg-primary checked:bg-none focus:ring-0 focus:ring-offset-0 rounded-full checked:opacity-0 group-hover:opacity-100 disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inrsid7" name="hs-pro-inrsn" checked>
                                              <label for="hs-pro-inrsid7" class="sr-only">Read Status</label>
                                            </div>

<div class="grow truncate">
                                              <div class="flex justify-between items-center gap-x-1">
                                                <p class="truncate  text-sm text-foreground">Mike Clirk</p>
                                                <span class="opacity-100 group-hover:opacity-0 text-[11px] text-muted-foreground uppercase">20/09/2024</span>
                                              </div>
                                              <div class="flex justify-between items-center gap-x-1">
                                                <div class="grow mt-1 flex items-center gap-x-2 truncate text-foreground">
                                                  <span class="py-0.5 px-1.5 max-w-20 truncate text-xs bg-surface-1 text-surface-foreground rounded-sm">
                                                    Chat
                                                  </span>
                                                  <span class="truncate text-[13px] text-muted-foreground-2">Project Timeline Update</span>
                                                </div>
                                                <span class="me-1 text-xs text-muted-foreground">15</span>
                                              </div>
                                              <div class="mt-1 flex items-center gap-x-1.5">
                                                <div class="grow truncate">
                                                  <p class="truncate text-[13px] text-muted-foreground">I hope you're doing well. I wanted to check in on the proposal you sent last week for the web design project we discussed.</p>
                                                </div>
                                                <div class="py-0.5 ps-1 pe-1.5 flex items-center gap-x-1 border border-line-2 text-[10px] text-muted-foreground rounded-full">
                                                  <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                                                  <span>+9</span>
                                                </div>
                                              </div>
                                            </div>
                                          </div>

<div class="hs-tooltip [--placement:top] inline-block">
                                                <button type="button" class="hs-tooltip-toggle size-6 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-label="Close" data-hs-remove-element="#hs-pro-tabs-intl-item-7">
                                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                  Delete
                                                </span>
                                              </div>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                  </div>

<div id="hs-pro-tabs-intltg-assigned" class="hidden h-full" role="tabpanel" aria-labelledby="hs-pro-tabs-intltg-item-assigned">
                                    
                                    <div class="p-5 h-full flex flex-col justify-center items-center text-center">
                                      <svg class="w-48 mx-auto mb-4" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="fill-layer opacity-30"/>
                                        <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1 opacity-30"/>
                                        <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                        <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                        <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                        <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="fill-layer"/>
                                        <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1"/>
                                        <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                                        <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                        <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                        <g filter="url(#filter1)">
                                        <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="fill-layer" shape-rendering="crispEdges"/>
                                        <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1" shape-rendering="crispEdges"/>
                                        <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                                        <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                        <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                        </g>
                                        <defs>
                                        <filter id="filter1" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                        <feOffset dy="6"/>
                                        <feGaussianBlur stdDeviation="6"/>
                                        <feComposite in2="hardAlpha" operator="out"/>
                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/>
                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/>
                                        </filter>
                                        </defs>
                                      </svg>

<div class="max-w-sm mx-auto">
                                        <p class="mt-2 font-medium text-foreground">
                                          No assigned message
                                        </p>
                                        <p class="mb-5 text-sm text-muted-foreground-1">
                                          Only assigned messages appear here
                                        </p>
                                      </div>
                                    </div>
                                    
                                  </div>

<div id="hs-pro-tabs-intltg-archived" class="hidden h-full" role="tabpanel" aria-labelledby="hs-pro-tabs-intltg-item-archived">
                                    
                                    <div class="p-5 h-full flex flex-col justify-center items-center text-center">
                                      <svg class="w-48 mx-auto mb-4" width="178" height="90" viewBox="0 0 178 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect x="27" y="50.5" width="124" height="39" rx="7.5" fill="currentColor" class="fill-layer opacity-30"/>
                                        <rect x="27" y="50.5" width="124" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1 opacity-30"/>
                                        <rect x="34.5" y="58" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                        <rect x="66.5" y="61" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                        <rect x="66.5" y="73" width="77" height="6" rx="3" fill="currentColor" class="fill-surface-1 opacity-30"/>
                                        <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" fill="currentColor" class="fill-layer"/>
                                        <rect x="19.5" y="28.5" width="139" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1"/>
                                        <rect x="27" y="36" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                                        <rect x="59" y="39" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                        <rect x="59" y="51" width="92" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                        <g filter="url(#filter2)">
                                        <rect x="12" y="6" width="154" height="40" rx="8" fill="currentColor" class="fill-layer" shape-rendering="crispEdges"/>
                                        <rect x="12.5" y="6.5" width="153" height="39" rx="7.5" stroke="currentColor" class="stroke-line-1" shape-rendering="crispEdges"/>
                                        <rect x="20" y="14" width="24" height="24" rx="4" fill="currentColor" class="fill-surface-1"/>
                                        <rect x="52" y="17" width="60" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                        <rect x="52" y="29" width="106" height="6" rx="3" fill="currentColor" class="fill-surface-1"/>
                                        </g>
                                        <defs>
                                        <filter id="filter2" x="0" y="0" width="178" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                        <feOffset dy="6"/>
                                        <feGaussianBlur stdDeviation="6"/>
                                        <feComposite in2="hardAlpha" operator="out"/>
                                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0"/>
                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1187_14810"/>
                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1187_14810" result="shape"/>
                                        </filter>
                                        </defs>
                                      </svg>

<div class="max-w-sm mx-auto">
                                        <p class="mt-2 font-medium text-foreground">
                                          No archived message
                                        </p>
                                        <p class="mb-5 text-sm text-muted-foreground-1">
                                          Only archived messages appear here
                                        </p>
                                      </div>
                                    </div>
                                    
                                  </div>
                                  
                                </div>

<div class="hs-layout-splitter-control relative hidden lg:flex">
                          <span class="absolute top-1/2 inset-s-1/2 z-59 -translate-x-1/2 -translate-y-1/2 block w-4 h-6 flex justify-center items-center bg-layer border border-layer-line text-muted-foreground rounded-md cursor-col-resize hover:bg-layer-hover">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>
                            </svg>
                          </span>
                        </div>

<main id="content" class="overflow-hidden" data-hs-layout-splitter-item='{
                          "dynamicSize": 64.0,
                          "minSize": 55.0
                        }' style="flex: 64 1 0px;">
                          
                          <div id="hs-pro-tabs-intl-1" role="tabpanel" aria-labelledby="hs-pro-tabs-intl-item-1">
                            <div class="relative h-dvh flex flex-col">
                              
                              <header class=" sticky top-0 inset-x-0 z-9 p-2 sm:px-5 flex justify-between gap-x-2 bg-navbar border-b border-navbar-line">
                                <div class="grow">
                                  <div class="flex items-center gap-x-1">
                                    <div class="lg:hidden relative pe-2 me-1 before:block before:absolute before:top-1/2 before:inset-e-0 before:h-4 before:border-s before:border-line-2 before:-translate-y-1/2">
                                      
                                      <button type="button" class="py-1.5 lg:px-2.5 flex justify-center items-center text-[13px] text-muted-foreground-2 lg:hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden lg:focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-inbox-thread-list-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-inbox-thread-list-sidebar">
                                        Inbox
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                      </button>
                                      
                                    </div>

<div class="lg:-ms-1.5">
                                      
                                      <div class="hs-dropdown [--auto-close:inside] relative inline-flex">
                                        <button id="hs-pro-inthmtdid1" type="button" class="py-1.5 lg:px-2.5 flex justify-center items-center text-[13px] text-muted-foreground-2 lg:hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden lg:focus:bg-muted-focus">
                                          <span class="shrink-0 size-2 block me-2 bg-red-500 rounded-full"></span>
                                          <span class="max-w-20 truncate">Gmail</span>
                                          <svg class="shrink-0 size-3.5 ms-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-52 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-inthmtdid1">
                                          
                                          <div class="py-2 px-4 flex justify-between items-center gap-x-2">
                                            <span class="block font-medium text-sm text-foreground">
                                              <span class="truncate">Move to</span>
                                            </span>

<div class="hs-tooltip [--placement:left] inline-block -me-2">
                                              <button type="button" class="hs-tooltip-toggle size-8 flex justify-center items-center gap-x-2 text-muted-foreground-1 rounded-full hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-chhcntm">
                                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 12h8"/><path d="M12 8v8"/></svg>
                                              </button>
                                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                                Create new label
                                              </span>
                                            </div>
                                            
                                          </div>

<div class="p-1 relative border-t border-dropdown-divider">
                                            <input type="text" class="py-1.5 px-3 block w-full bg-transparent border-transparent rounded-lg sm:text-sm text-base text-foreground placeholder:text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:border-transparent focus:ring-0 focus:bg-muted-focus disabled:opacity-100 disabled:pointer-events-none" placeholder="Search" >
                                            <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                                              <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                                <span class="sr-only">Close</span>
                                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                                              </button>
                                            </div>
                                          </div>

<div class="p-1 border-t border-dropdown-divider">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                                              Starred
                                              <svg class="hidden shrink-0 size-4 ms-auto" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                          </div>

<div class="p-1 border-t border-dropdown-divider">
                                            <div class="space-y-0.5 max-h-48 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                              
                                              <label for="hs-pro-initgh" class="py-1.5 px-3 group flex items-center gap-x-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="checkbox" class="hidden" id="hs-pro-initgh" name="hs-pro-init" >
                                                <span class="shrink-0 size-3.5 flex justify-center items-center">
                                                  <span class="shrink-0 size-2 block mx-auto bg-indigo-500 rounded-full"></span>
                                                </span>
                                                Github
                                                <svg class="shrink-0 size-3.5 ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              </label>

<label for="hs-pro-initgm" class="py-1.5 px-3 group flex items-center gap-x-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="checkbox" class="hidden" id="hs-pro-initgm" name="hs-pro-init" checked>
                                                <span class="shrink-0 size-3.5 flex justify-center items-center">
                                                  <span class="shrink-0 size-2 block mx-auto bg-red-500 rounded-full"></span>
                                                </span>
                                                Gmail
                                                <svg class="shrink-0 size-3.5 ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              </label>

<label for="hs-pro-initcr" class="py-1.5 px-3 group flex items-center gap-x-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="checkbox" class="hidden" id="hs-pro-initcr" name="hs-pro-init" >
                                                <span class="shrink-0 size-3.5 flex justify-center items-center">
                                                  <span class="shrink-0 size-2 block mx-auto bg-primary rounded-full"></span>
                                                </span>
                                                Crisp
                                                <svg class="shrink-0 size-3.5 ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              </label>

<label for="hs-pro-initsl" class="py-1.5 px-3 group flex items-center gap-x-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                                <input type="checkbox" class="hidden" id="hs-pro-initsl" name="hs-pro-init" >
                                                <span class="shrink-0 size-3.5 flex justify-center items-center">
                                                  <span class="shrink-0 size-2 block mx-auto bg-orange-500 rounded-full"></span>
                                                </span>
                                                Slack - Internal
                                                <svg class="shrink-0 size-3.5 ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              </label>
                                              
                                            </div>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>

</div>
      
                                    <div class="relative sm:ps-2 sm:ms-1 before:hidden sm:before:block before:absolute before:top-1/2 before:inset-s-0 before:h-4 before:border-s before:border-line-2 before:-translate-y-1/2">
                                      
                                      <div class="hs-tooltip [--placement:bottom] hidden sm:inline-block">
                                        <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-chhsn">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 class="sr-only">Archive</span>
                                        </button>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                          Archive
                                        </span>
                                      </div>

<div class="hs-tooltip [--placement:bottom] hidden sm:inline-block">
                                        <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-chhsn">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                          <span class="sr-only">Delete</span>
                                        </button>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                          Delete
                                        </span>
                                      </div>

<div class="hs-tooltip [--placement:bottom] hidden sm:inline-block">
                                        <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-chhsn">
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>
                                          <span class="sr-only">Report spam</span>
                                        </button>
                                        <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                          Report spam
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-64 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-inthasdid1">
                                      
                                      <div class="py-2 px-4">
                                        <span class="block font-medium text-sm text-foreground">
                                          <span class="truncate">Assign</span>
                                        </span>
                                      </div>

<div class="p-1 relative border-y border-dropdown-divider">
                                        <input type="text" class="py-1.5 px-3 block w-full bg-transparent border-transparent rounded-lg sm:text-sm text-base text-foreground placeholder:text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:border-transparent focus:ring-0 focus:bg-muted-focus disabled:opacity-100 disabled:pointer-events-none" placeholder="Search teammates" autofocus>
                                        <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                                          <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                            <span class="sr-only">Close</span>
                                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                                          </button>
                                        </div>
                                      </div>

<div class="p-1 space-y-0.5 max-h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                        
                                        <label for="hs-pro-inithargna" class="py-1.5 px-3 group flex items-center gap-x-2.5 py-1.5 px-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="checkbox" class="hidden" id="hs-pro-inithargna" name="hs-pro-initharg" >
                                          <span class="shrink-0 size-5 flex justify-center items-center">
                                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                          No assignee
                                          <svg class="shrink-0 size-4 ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </label>

<label for="hs-pro-initharga1" class="py-1.5 px-3 group flex items-center gap-x-2.5 py-1.5 px-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="checkbox" class="hidden" id="hs-pro-initharga1" name="hs-pro-initharg" checked>
                                          <span class="relative size-5">
                                            <span class="flex shrink-0 justify-center items-center size-5 text-xs font-medium uppercase bg-purple-500 text-foreground-inverse rounded-full">I</span>
                                            <span class="absolute bottom-0 inset-e-0 block size-1.5 rounded-full ring-2 ring-dropdown bg-green-500"></span>
                                          </span>
                                          isabella@site.com
                                          <svg class="shrink-0 size-4 ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </label>

<label for="hs-pro-initharga2" class="py-1.5 px-3 group flex items-center gap-x-2.5 py-1.5 px-3 rounded-lg cursor-pointer text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover">
                                          <input type="checkbox" class="hidden" id="hs-pro-initharga2" name="hs-pro-initharg" checked>
                                          <span class="relative size-5">
                                            <img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                          </span>
                                          Lewis Clarke
                                          <svg class="shrink-0 size-4 ms-auto opacity-0 group-has-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </label>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>

<div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative inline-flex">
                                    <div class="hs-tooltip [--placement:bottom] inline-block">
                                      <button id="hs-pro-inthsndid1" type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/><path d="M4 2C2.8 3.7 2 5.7 2 8"/><path d="M22 8c0-2.3-.8-4.3-2-6"/></svg>
                                        <span class="sr-only">Snooze</span>
                                      </button>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Snooze
                                      </span>
                                    </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-64 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-inthsndid1">
                                      
                                      <div class="py-2 px-4">
                                        <span class="block font-semibold text-sm text-foreground">
                                          Snooze
                                        </span>
                                      </div>

<div class="p-1 max-h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                        <fieldset class="grid gap-y-0.5">
                                          <legend class="sr-only">
                                            Snooze
                                          </legend>

<label for="hs-pro-chhsnrt1" class="py-2 px-3 flex items-center rounded-lg cursor-pointer rounded-md hover:bg-dropdown-item-hover has-checked:bg-dropdown-item-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <input type="radio" id="hs-pro-chhsnrt1" class="hidden" value="Today" name="hs-pro-chhsnrt" checked>
                                            <span class="grow">
                                              <span class="block text-sm text-foreground">
                                                Today
                                              </span>
                                            </span>
                                            <span class="font-normal text-xs text-muted-foreground-1">
                                              5:05 PM
                                            </span>
                                          </label>

<label for="hs-pro-chhsnrt2" class="py-2 px-3 flex items-center rounded-lg cursor-pointer rounded-md hover:bg-dropdown-item-hover has-checked:bg-dropdown-item-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <input type="radio" id="hs-pro-chhsnrt2" class="hidden" value="Tomorrow" name="hs-pro-chhsnrt" >
                                            <span class="grow">
                                              <span class="block text-sm text-foreground">
                                                Tomorrow
                                              </span>
                                            </span>
                                            <span class="font-normal text-xs text-muted-foreground-1">
                                              Wed 9:00 AM
                                            </span>
                                          </label>

<label for="hs-pro-chhsnrt3" class="py-2 px-3 flex items-center rounded-lg cursor-pointer rounded-md hover:bg-dropdown-item-hover has-checked:bg-dropdown-item-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <input type="radio" id="hs-pro-chhsnrt3" class="hidden" value="This week" name="hs-pro-chhsnrt" >
                                            <span class="grow">
                                              <span class="block text-sm text-foreground">
                                                This week
                                              </span>
                                            </span>
                                            <span class="font-normal text-xs text-muted-foreground-1">
                                              Thu, May 8, 9:00 AM
                                            </span>
                                          </label>

<label for="hs-pro-chhsnrt4" class="py-2 px-3 flex items-center rounded-lg cursor-pointer rounded-md hover:bg-dropdown-item-hover has-checked:bg-dropdown-item-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <input type="radio" id="hs-pro-chhsnrt4" class="hidden" value="Next week" name="hs-pro-chhsnrt" >
                                            <span class="grow">
                                              <span class="block text-sm text-foreground">
                                                Next week
                                              </span>
                                            </span>
                                            <span class="font-normal text-xs text-muted-foreground-1">
                                              Mon, May 13, 9:00 AM
                                            </span>
                                          </label>
                                          
                                        </fieldset>
                                      </div>

<div class="p-1 border-t border-dropdown-footer">
                                        <button type="button" class="w-full flex justify-between items-center gap-x-3 py-2 px-3 text-start text-sm text-foreground hover:bg-muted-hover rounded-md disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-hover" data-hs-overlay="#hs-pro-chhsncs">
                                          Custom
                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                        </button>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>

<div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative inline-flex">
                                    <div class="hs-tooltip [--placement:bottom] inline-block">
                                      <button id="hs-pro-inthtgdid1" type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-hover" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                        <span class="sr-only">Tags</span>
                                      </button>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Tags
                                      </span>
                                    </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-64 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-inthtgdid1">
                                      
                                      <div class="py-2 px-4 flex justify-between items-center gap-x-2">
                                        <span class="block font-medium text-sm text-foreground">
                                          <span class="truncate">Tags</span>
                                        </span>

<div class="hs-tooltip [--placement:left] inline-block -me-2">
                                          <button type="button" class="hs-tooltip-toggle size-8 flex justify-center items-center gap-x-2 text-muted-foreground-2 rounded-full hover:bg-muted-hover focus:outline-hidden focus:bg-muted-hover" data-hs-overlay="#hs-pro-chhcntm">
                                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 12h8"/><path d="M12 8v8"/></svg>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                            Create new tag
                                          </span>
                                        </div>
                                        
                                      </div>

<div class="p-1 relative border-y border-dropdown-header">
                                        <input type="text" class="py-1.5 px-3 block w-full bg-transparent border-transparent rounded-lg sm:text-sm text-base text-foreground placeholder:text-muted-foreground-1 hover:bg-muted-hover focus:outline-hidden focus:border-transparent focus:ring-0 focus:bg-muted-focus disabled:opacity-100 disabled:pointer-events-none" placeholder="Search" >
                                        <div class="hidden absolute inset-y-0 inset-e-0 flex items-center z-20 pe-1">
                                          <button type="button" class="inline-flex shrink-0 justify-center items-center size-6 rounded-full text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" aria-label="Close">
                                            <span class="sr-only">Close</span>
                                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
                                          </button>
                                        </div>
                                      </div>

<div class="p-1 pt-3 max-h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                        <span class="mb-2 px-3 block text-xs text-muted-foreground-1">
                                          All tags
                                        </span>

<div class="space-y-1">
                                          <div class="flex justify-between items-center py-1.5 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <label for="hs-pro-inthtgdid1t1" class="flex flex-1 items-center gap-x-2.5 cursor-pointer text-[13px] text-dropdown-item-foreground">
                                              <svg class="shrink-0 size-3.5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                              Bug
                                            </label>
                                            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inthtgdid1t1"  >
                                          </div>
        
                                          <div class="flex justify-between items-center py-1.5 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <label for="hs-pro-inthtgdid1t2" class="flex flex-1 items-center gap-x-2.5 cursor-pointer text-[13px] text-dropdown-item-foreground">
                                              <svg class="shrink-0 size-3.5 text-orange-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                              Generic
                                              <span class="hs-tooltip [--placement:right] inline-block">
                                                <svg class="hs-tooltip-toggle shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                  Private tag
                                                </span>
                                              </span>
                                            </label>
                                            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inthtgdid1t2" checked >
                                          </div>
        
                                          <div class="flex justify-between items-center py-1.5 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <label for="hs-pro-inthtgdid1t3" class="flex flex-1 items-center gap-x-2.5 cursor-pointer text-[13px] text-dropdown-item-foreground">
                                              <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                              Reviews
                                            </label>
                                            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inthtgdid1t3" checked >
                                          </div>
        
                                          <div class="flex justify-between items-center py-1.5 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <label for="hs-pro-inthtgdid1t4" class="flex flex-1 items-center gap-x-2.5 cursor-pointer text-[13px] text-dropdown-item-foreground">
                                              <svg class="shrink-0 size-3.5 text-green-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                              Closed
                                            </label>
                                            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inthtgdid1t4"  disabled>
                                          </div>
        
                                          <div class="flex justify-between items-center py-1.5 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <label for="hs-pro-inthtgdid1t5" class="flex flex-1 items-center gap-x-2.5 cursor-pointer text-[13px] text-dropdown-item-foreground">
                                              <svg class="shrink-0 size-3.5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                              Feedback
                                              <span class="hs-tooltip [--placement:right] inline-block">
                                                <svg class="hs-tooltip-toggle shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                  Private tag
                                                </span>
                                              </span>
                                            </label>
                                            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inthtgdid1t5"  >
                                          </div>
        
                                          <div class="flex justify-between items-center py-1.5 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <label for="hs-pro-inthtgdid1t6" class="flex flex-1 items-center gap-x-2.5 cursor-pointer text-[13px] text-dropdown-item-foreground">
                                              <svg class="shrink-0 size-3.5 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                              Account
                                              <span class="hs-tooltip [--placement:right] inline-block">
                                                <svg class="hs-tooltip-toggle shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                  Private tag
                                                </span>
                                              </span>
                                            </label>
                                            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inthtgdid1t6"  >
                                          </div>
        
                                          <div class="flex justify-between items-center py-1.5 px-3 cursor-pointer rounded-lg hover:bg-dropdown-item-hover has-disabled:opacity-50 has-disabled:pointer-events-none">
                                            <label for="hs-pro-inthtgdid1t7" class="flex flex-1 items-center gap-x-2.5 cursor-pointer text-[13px] text-dropdown-item-foreground">
                                              <svg class="shrink-0 size-3.5 text-purple-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                              FAQ
                                            </label>
                                            <input type="checkbox" class="shrink-0 size-4 bg-transparent border-line-3 rounded-sm shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-inthtgdid1t7"  >
                                          </div>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-inthmid1">
                                        <div class="sm:hidden p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                            Archive
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                            Delete
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>
                                            Report spam
                                          </button>
                                        </div>
                                        <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                            Mark as unread
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                            Mark as read
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" x2="14" y1="3" y2="10"/><line x1="3" x2="10" y1="21" y2="14"/></svg>
                                            Expand all
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhtgm">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/></svg>
                                            Collapse all
                                          </button>
                                        </div>
                                        <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhtgm">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>
                                            Print <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-500/10 dark:text-primary-500">New</span>
                                          </button>
                                        </div>
                                        <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-3a2 2 0 0 1-2-2V2"/><path d="M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z"/><path d="M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8"/></svg>
                                            Link to conversation
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                            Copy conversation ID
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                            Copy conversation link
                                          </button>
                                        </div>
                                      </div>
                                      
                                    </div>

</div>
                                </div>
                              </header>

<div class="h-[calc(100vh-180px)] px-2 pb-8 sm:px-4 sm:pb-2 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                
                                <div class="lg:sticky top-0 z-8 bg-background-2 py-4 ps-1 flex flex-wrap items-center gap-y-1 gap-x-3">
                                  <h1 class="font-semibold text-lg leading-7.5 text-foreground">
                                    Project Timeline Update
                                  </h1>

<div class="flex flex-wrap items-center gap-1">
                                    
                                    <div class="hs-dropdown  relative inline-flex">
                                      <button id="hs-pro-intbtwtaddid1" type="button" class="py-0.5 px-2 group inline-flex items-center gap-1.5 bg-layer border border-layer-line text-layer-foreground text-[13px] rounded-lg hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus">
                                        <svg class="shrink-0 size-3.5 text-orange-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                        Generic
                                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-intbtwtaddid1">
                                        <div class="p-1 space-y-0.5">
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                            Edit tag
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                            Remove from conversation
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/></svg>
                                            View all conversations
                                          </button>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="hs-dropdown  relative inline-flex">
                                      <button id="hs-pro-intbtwtaddid2" type="button" class="py-0.5 px-2 group inline-flex items-center gap-1.5 bg-layer border border-layer-line text-layer-foreground text-[13px] rounded-lg hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus">
                                        <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                        Reviews
                                      </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:h-4 before:absolute before:-top-4 before:inset-s-0 before:w-full" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-intbtwtaddid2">
                                        <div class="p-1 space-y-0.5">
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                            Edit tag
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                            Remove from conversation
                                          </button>
                                          <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/></svg>
                                            View all conversations
                                          </button>
                                        </div>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                  
                                </div>

<div class="space-y-3 lg:space-y-5">
                                  
                                  <div class="pt-2 flex items-center text-xs text-muted-foreground-1 before:flex-1 before:bg-surface-1 before:w-full before:h-px before:me-5 after:flex-1 after:bg-surface-1 after:w-full after:h-px after:ms-5">
                                    October 3, 2024
                                  </div>

<div id="hs-pro-in1tcid1" class="hs-accordion ">
                                    <div class="m-0.5 bg-layer rounded-2xl shadow-xs">
                                      
                                      <div class="relative">
                                        <div class="hs-accordion-toggle after:absolute after:inset-0 after:z-1" role="button" aria-expanded="false" aria-controls="hs-pro-in1tcid1-heading"></div>

<div class="py-3 ps-4 pe-14 w-full inline-flex items-center gap-x-2 truncate">
                                          <div class="w-full flex gap-x-3.5 truncate">
                                            <span class="mt-1 flex shrink-0 justify-center items-center size-8 uppercase bg-surface-3 text-foreground-inverse rounded-full">S</span>
          
                                            <div class="grow truncate flex flex-col">
                                              
                                              <div class=" truncate">
                                                <div class="hs-tooltip [--trigger:click] [--placement:bottom-left] inline-block leading-4">
                                                  <span class="hs-tooltip-toggle relative z-7 inline-flex items-center truncate text-sm font-semibold text-foreground cursor-pointer underline-offset-2 hover:underline" tabindex="-1">
                                                    Sarah Chen
                                                  </span>

<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-8 max-w-64 sm:max-w-xs w-full bg-popover border border-popover-line text-start rounded-xl shadow-md after:absolute after:top-0 after:-inset-s-4 after:w-4 after:h-full" role="tooltip">
                                                    <div class="p-4">
                                                      <span class="block mb-2 text-sm text-muted-foreground-1">
                                                        Contact
                                                      </span>

<div class="flex flex-col justify-center items-center gap-y-2">
                                                        <span class="flex shrink-0 justify-center items-center size-12 uppercase bg-surface-3 text-foreground-inverse rounded-full">S</span>
                                                        <p class="mt-2 font-medium text-foreground">
                                                          Sarah Chen
                                                        </p>
                                                      </div>

<div class="mt-1 text-center">
                                                        <p class="text-sm text-foreground">
                                                          <a class="inline-flex items-center gap-x-1.5 text-[13px] text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#">schen@company.com</a>
                                                        </p>
                                                      </div>
        
                                                      
                                                      <div class="pt-4 mt-4 flex justify-between items-center border-t border-line-2">
                                                        <a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                                          <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
                                                          Flag
                                                        </a>

<div class="hs-accordion-force-active hs-accordion-active:block hidden leading-4 truncate">
                                                <div class="hs-tooltip [--trigger:click] [--placement:bottom-left] inline-block leading-4">
                                                  <span class="truncate text-sm text-foreground">To:</span>
                                                  <span class="hs-tooltip-toggle relative z-7 inline-flex items-center truncate text-sm text-muted-foreground-1 cursor-pointer underline-offset-2 hover:underline" tabindex="-1">
                                                    Lewis Clarke
                                                  </span>

<div class="flex flex-col justify-center items-center gap-y-2">
                                                        <img class="shrink-0 size-12 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                                        <p class="mt-2 font-medium text-foreground">
                                                          Lewis Clarke
                                                        </p>
                                                      </div>

<div class="mt-1 text-center">
                                                        <p class="text-sm text-foreground">
                                                          <a class="inline-flex items-center gap-x-1.5 text-[13px] text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#">lewis@company.com</a>
                                                        </p>
                                                      </div>
        
                                                      
                                                      <div class="pt-4 mt-4 flex justify-between items-center border-t border-line-2">
                                                        <a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                                          <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
                                                          Flag
                                                        </a>

<button type="button" class="py-1.5 px-3 inline-flex items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                                                          Add to contacts
                                                        </button>
                                                      </div>
                                                      
                                                    </div>
                                                  </div>
                                                  
                                                </div>
                                              </div>
                                              
            
                                              <div class="hs-accordion-force-active hs-accordion-active:block sm:hs-accordion-active:hidden hidden leading-4 truncate">
                                                <span class="truncate text-sm text-foreground">Date:</span>
                                                <span class="truncate text-sm text-muted-foreground-1">October 3, 2024 10:15 AM</span>
                                              </div>
            
                                              <div class="hs-accordion-force-active hs-accordion-active:hidden leading-4 truncate">
                                                <p class="truncate text-sm text-muted-foreground-1">Hi team, I've reviewed the latest sprint progress, and I think we need to discuss some adjustments to our project timeline. We're running into some unexpected challenges with the API integration, which might impact our delivery date.</p>
                                              </div>
                                            </div>

<div class="self-center">
                                              <span class="hs-accordion-force-active hs-accordion-active:hidden text-xs inline-block text-muted-foreground-1">Oct 3</span>
                                              <span class="hs-accordion-force-active sm:hs-accordion-active:inline-block hidden text-xs text-muted-foreground-1">October 3, 2024 10:15 AM</span>
                                            </div>
                                          </div>
                                        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1tctmdid1">
                                              <div class="max-h-[42dvh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                                                    Reply
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 17 2 12 7 7"/><polyline points="12 17 7 12 12 7"/><path d="M22 18v-2a4 4 0 0 0-4-4H7"/></svg>
                                                    Reply all
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg>
                                                    Forward
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Resend
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                                    Mark as unread
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Mark as read
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Archive
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                    Delete
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>
                                                    Report spam
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhtgm">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>
                                                    Print <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-500/10 dark:text-primary-500">New</span>
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-3a2 2 0 0 1-2-2V2"/><path d="M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z"/><path d="M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8"/></svg>
                                                    Link to conversation
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Copy conversation ID
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                                    Copy conversation link
                                                  </button>
                                                </div>
                                              </div>
                                            </div>
                                            
                                          </div>

</div>
                                      </div>

<div id="hs-pro-in1tcid1-heading" class="hs-accordion-content hidden w-full overflow-hidden" role="region" aria-labelledby="hs-pro-in1tcid1">
                                        <div class="p-4 border-t border-line-2">
                                          <div class="text-sm text-foreground">Hi team,<br><br>I've reviewed the latest sprint progress, and I think we need to discuss some adjustments to our project timeline. We're running into some unexpected challenges with the API integration, which might impact our delivery date.<br><br>Could we schedule a meeting to go over the following points?<br><ol class="list-decimal list-inside ps-3"><li>Current blockers in the API integration</li><li>Potential solutions and workarounds</li><li>Revised timeline estimates</li></ol><br>Thanks,<br>Sarah Chen<br>Project Manager</div>
                                        </div>
                                      </div>
                                      
                                    </div>
                                  </div>

<div class="px-4 space-y-0.5">
                                    <div class="ps-12 flex flex-wrap items-center gap-2">
                                      <span class="text-xs text-muted-foreground-1">
                                        Isabella Lauda
                                      </span>
                                    </div>

<div class="group w-full lg:flex lg:gap-x-3">
                                      <div class="flex gap-x-4">
                                        <div class="shrink-0 size-8 text-center">
                                          <span class="flex shrink-0 justify-center items-center size-8 text-sm uppercase bg-purple-500 text-foreground-inverse rounded-full">I</span>
                                        </div>
      
                                        <div class="-ms-2 self-center w-full max-w-xl">
                                          <div class="flex items-start gap-x-1" style="word-break: break-word;">
                                            <div class="py-1.5 px-2.5 inline-block bg-surface-1 rounded-2xl">
                                              <div class="text-sm text-muted-foreground-2">
                                                <span class="text-primary">@lewis_clarke</span> Hi Lewis
              
                                                <span class="italic text-[11px] text-muted-foreground-1">
                                                  10:20
                                                </span>
                                              </div>
                                            </div>

<div class="lg:hidden">
                                              
                                              <button type="button" class="hs-collapse-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" id="hs-pro-in1tctclid1_1" aria-expanded="false" aria-controls="hs-pro-in1tctclid1_1-heading" data-hs-collapse="#hs-pro-in1tctclid1_1-heading">
                                                <span class="sr-only">Collapse</span>
                                                <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              
                                            </div>
                                          </div>

<div class="mt-1 flex items-center gap-x-1">
                                            <div class="hs-tooltip [--placement:auto] inline-block">
                                              <span class="hs-tooltip-toggle py-px ps-1.5 pe-2 flex bg-primary-100 border border-primary-200 rounded-full dark:bg-primary-500/20 dark:border-primary-500/30">
                                                <span class="text-sm text-primary">
                                                  ✋ 1
                                                </span>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                  Lewis reacted
                                                </span>
                                              </span>
                                            </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                              <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                                <span class="sr-only">Add reaction</span>
                                              </button>
                                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                Add reaction
                                              </span>
                                            </div>
                                            
                                          </div>
                                        </div>
                                      </div>

<div id="hs-pro-in1tctclid1_1-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300 lg:w-auto lg:block lg:group-hover:opacity-100 lg:opacity-0" aria-labelledby="hs-pro-in1tctclid1_1" role="region">
                                        
                                        <div class="my-1 lg:mt-0 ms-10 lg:ms-0 p-0.5 bg-layer rounded-full shadow-2xs inline-flex items-center gap-0.5">
                                          
                                          <div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                              <span class="sr-only">Add reaction</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Add reaction
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                                              <span class="sr-only">Reply</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Reply
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                              <span class="sr-only">Edit</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Edit
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                              <span class="sr-only">Delete</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Delete
                                            </span>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                      
                                    </div>

<div class="lg:hidden">
                                              
                                              <button type="button" class="hs-collapse-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" id="hs-pro-in1tctclid1_2" aria-expanded="false" aria-controls="hs-pro-in1tctclid1_2-heading" data-hs-collapse="#hs-pro-in1tctclid1_2-heading">
                                                <span class="sr-only">Collapse</span>
                                                <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              
                                            </div>
                                          </div>
                                        </div>
                                      </div>

<div id="hs-pro-in1tctclid1_2-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300 lg:w-auto lg:block lg:group-hover:opacity-100 lg:opacity-0" aria-labelledby="hs-pro-in1tctclid1_2" role="region">
                                        
                                        <div class="my-1 lg:mt-0 ms-10 lg:ms-0 p-0.5 bg-layer rounded-full shadow-2xs inline-flex items-center gap-0.5">
                                          
                                          <div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                              <span class="sr-only">Add reaction</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Add reaction
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                                              <span class="sr-only">Reply</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Reply
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                              <span class="sr-only">Edit</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Edit
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                              <span class="sr-only">Delete</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Delete
                                            </span>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                  </div>

<div class="px-4 space-y-0.5">
                                    <div class="ps-12 flex flex-wrap items-center gap-2">
                                      <span class="text-xs text-muted-foreground-1">
                                        Lewis Clarke
                                      </span>
                                    </div>

<div class="group w-full lg:flex lg:gap-x-3">
                                      <div class="flex gap-x-4">
                                        <div class="shrink-0 size-8 text-center">
                                          <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                                        </div>
      
                                        <div class="-ms-2 self-center w-full max-w-xl">
                                          <div class="flex items-start gap-x-1" style="word-break: break-word;">
                                            <div class="py-1.5 px-2.5 inline-block bg-surface-1 rounded-2xl">
                                              <div class="text-sm text-muted-foreground-2">
                                                <span class="text-primary">@isabella</span>
                                              </div>
                                            </div>

<div class="lg:hidden">
                                              
                                              <button type="button" class="hs-collapse-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" id="hs-pro-in1tctclid2_1" aria-expanded="false" aria-controls="hs-pro-in1tctclid2_1-heading" data-hs-collapse="#hs-pro-in1tctclid2_1-heading">
                                                <span class="sr-only">Collapse</span>
                                                <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              
                                            </div>
                                          </div>
                                        </div>
                                      </div>

<div id="hs-pro-in1tctclid2_1-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300 lg:w-auto lg:block lg:group-hover:opacity-100 lg:opacity-0" aria-labelledby="hs-pro-in1tctclid2_1" role="region">
                                        
                                        <div class="my-1 lg:mt-0 ms-10 lg:ms-0 p-0.5 bg-layer rounded-full shadow-2xs inline-flex items-center gap-0.5">
                                          
                                          <div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                              <span class="sr-only">Add reaction</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Add reaction
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                                              <span class="sr-only">Reply</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Reply
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                              <span class="sr-only">Edit</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Edit
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                              <span class="sr-only">Delete</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Delete
                                            </span>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                      
                                    </div>

<div class="group w-full lg:flex lg:gap-x-3">
                                      <div class="flex gap-x-4">
                                        <div class="shrink-0 size-8 text-center">
                                        </div>
      
                                        <div class="-ms-2 self-center w-full max-w-xl">
                                          <div class="flex items-start gap-x-1" style="word-break: break-word;">
                                            <div class="py-1.5 px-2.5 inline-block bg-surface-1 rounded-2xl">
                                              <div class="text-sm text-muted-foreground-2">
                                                I agree we should discuss this ASAP
              
                                                <span class="italic text-[11px] text-muted-foreground">
                                                  11:12
                                                </span>
                                              </div>
                                            </div>

<div class="lg:hidden">
                                              
                                              <button type="button" class="hs-collapse-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" id="hs-pro-in1tctclid2_2" aria-expanded="false" aria-controls="hs-pro-in1tctclid2_2-heading" data-hs-collapse="#hs-pro-in1tctclid2_2-heading">
                                                <span class="sr-only">Collapse</span>
                                                <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              
                                            </div>
                                          </div>
                                        </div>
                                      </div>

<div id="hs-pro-in1tctclid2_2-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300 lg:w-auto lg:block lg:group-hover:opacity-100 lg:opacity-0" aria-labelledby="hs-pro-in1tctclid2_2" role="region">
                                        
                                        <div class="my-1 lg:mt-0 ms-10 lg:ms-0 p-0.5 bg-layer rounded-full shadow-2xs inline-flex items-center gap-0.5">
                                          
                                          <div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                              <span class="sr-only">Add reaction</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Add reaction
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                                              <span class="sr-only">Reply</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Reply
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                              <span class="sr-only">Edit</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Edit
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                              <span class="sr-only">Delete</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Delete
                                            </span>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                      
                                    </div>

<div class="group w-full lg:flex lg:gap-x-3">
                                      <div class="flex gap-x-4">
                                        <div class="shrink-0 size-8 text-center">
                                        </div>
      
                                        <div class="-ms-2 self-center w-full max-w-xl">
                                          <div class="flex items-start gap-x-1" style="word-break: break-word;">
                                            <div class="py-1.5 px-2.5 inline-block bg-surface-1 rounded-2xl">
                                              <div class="text-sm text-muted-foreground-2">
                                                I'm available tomorrow (Thursday) at 2 PM or Friday morning before 11 AM
              
                                                <span class="italic text-[11px] text-muted-foreground">
                                                  11:13
                                                </span>
                                              </div>
                                            </div>

<div class="lg:hidden">
                                              
                                              <button type="button" class="hs-collapse-toggle flex justify-center items-center gap-x-3 size-8 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" id="hs-pro-in1tctclid2_3" aria-expanded="false" aria-controls="hs-pro-in1tctclid2_3-heading" data-hs-collapse="#hs-pro-in1tctclid2_3-heading">
                                                <span class="sr-only">Collapse</span>
                                                <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              
                                            </div>
                                          </div>

<div class="mt-1 flex items-center gap-x-1">
                                            <div class="hs-tooltip [--placement:auto] inline-block">
                                              <span class="hs-tooltip-toggle py-px ps-1.5 pe-2 flex bg-primary-100 border border-primary-200 rounded-full dark:bg-primary-500/20 dark:border-primary-500/30">
                                                <span class="text-sm text-primary">
                                                  👍️ 2
                                                </span>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                  Isabella and James reacted
                                                </span>
                                              </span>
                                            </div>

<div id="hs-pro-in1tctclid2_3-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300 lg:w-auto lg:block lg:group-hover:opacity-100 lg:opacity-0" aria-labelledby="hs-pro-in1tctclid2_3" role="region">
                                        
                                        <div class="my-1 lg:mt-0 ms-10 lg:ms-0 p-0.5 bg-layer rounded-full shadow-2xs inline-flex items-center gap-0.5">
                                          
                                          <div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                              <span class="sr-only">Add reaction</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Add reaction
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                                              <span class="sr-only">Reply</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Reply
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                              <span class="sr-only">Edit</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Edit
                                            </span>
                                          </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                            <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-7 text-sm text-muted-foreground-2 hover:bg-surface-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                              <span class="sr-only">Delete</span>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Delete
                                            </span>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                  </div>

<div class="ps-4">
                                    
                                    <div class="relative group last:pb-0 pb-3 last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:border-s after:border-line-2">
                                      <div class="w-full flex gap-x-4">
                                        <span class="flex shrink-0 justify-center items-center size-8 bg-surface-1 text-sm font-semibold uppercase text-muted-foreground-1 rounded-full">
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                                        </span>

<div class="grow mt-1">
                                          <span class="text-sm text-muted-foreground-1">
                                            <span class="font-semibold">Assigned</span> to Lewis Clarke by Isabella Lauda
                                          </span>

<div class="relative group last:pb-0 pb-3 last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:border-s after:border-line-2">
                                      <div class="w-full flex gap-x-4">
                                        <span class="flex shrink-0 justify-center items-center size-8 bg-surface-1 text-sm font-semibold uppercase text-muted-foreground-1 rounded-full">
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1"/><path d="M2 13h10"/><path d="m9 16 3-3-3-3"/></svg>
                                        </span>

<div class="grow mt-1">
                                          <span class="text-sm text-muted-foreground-1">
                                            <span class="font-semibold">Moved</span> to Gmail by Isabella Lauda
                                          </span>

<div class="relative group last:pb-0 pb-3 last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:border-s after:border-line-2">
                                      <div class="w-full flex gap-x-4">
                                        <span class="flex shrink-0 justify-center items-center size-8 bg-surface-1 text-sm font-semibold uppercase text-muted-foreground-1 rounded-full">
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                        </span>

<div class="grow mt-1">
                                          <span class="text-sm text-muted-foreground-1">
                                            <span class="font-semibold">Added</span> to <span class="py-0.5 px-1.5 bg-layer border border-layer-line text-orange-500 text-sm rounded-full">Generic</span> tag by Isabella Lauda
                                          </span>

<div class="relative group last:pb-0 pb-3 last:after:hidden after:absolute after:top-8 after:bottom-0 after:inset-s-4 after:border-s after:border-line-2">
                                      <div class="w-full flex gap-x-4">
                                        <span class="flex shrink-0 justify-center items-center size-8 bg-surface-1 text-sm font-semibold uppercase text-muted-foreground-1 rounded-full">
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/></svg>
                                        </span>

<div class="grow mt-1">
                                          <span class="text-sm text-muted-foreground-1">
                                            <span class="font-semibold">Added</span> to <span class="py-0.5 px-1.5 bg-layer border border-layer-line text-primary text-sm rounded-full">Reviews</span> tag by Isabella Lauda
                                          </span>

<div id="hs-pro-in1tcid2" class="hs-accordion ">
                                    <div class="m-0.5 bg-layer rounded-2xl shadow-xs">
                                      
                                      <div class="relative">
                                        <div class="hs-accordion-toggle after:absolute after:inset-0 after:z-1" role="button" aria-expanded="false" aria-controls="hs-pro-in1tcid2-heading"></div>

<div class="py-3 ps-4 pe-14 w-full inline-flex items-center gap-x-2 truncate">
                                          <div class="w-full flex gap-x-3.5 truncate">
                                            <img class="mt-1 shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
          
                                            <div class="grow truncate flex flex-col">
                                              
                                              <div class=" truncate">
                                                <div class="hs-tooltip [--trigger:click] [--placement:bottom-left] inline-block leading-4">
                                                  <span class="hs-tooltip-toggle relative z-7 inline-flex items-center truncate text-sm font-semibold text-foreground cursor-pointer underline-offset-2 hover:underline" tabindex="-1">
                                                    Lewis Clarke
                                                  </span>

<div class="mt-1 text-center">
                                                        <p class="text-sm text-foreground">
                                                          <a class="inline-flex items-center gap-x-1.5 text-[13px] text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#">lewis@company.com</a>
                                                        </p>
                                                      </div>
        
                                                      
                                                      <div class="pt-4 mt-4 flex justify-between items-center border-t border-line-2">
                                                        <a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                                          <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
                                                          Flag
                                                        </a>

<div class="hs-accordion-force-active hs-accordion-active:block hidden leading-4 truncate">
                                                <div class="hs-tooltip [--trigger:click] [--placement:bottom-left] inline-block leading-4">
                                                  <span class="truncate text-sm text-foreground">To:</span>
                                                  <span class="hs-tooltip-toggle relative z-7 inline-flex items-center truncate text-sm text-muted-foreground-1 cursor-pointer underline-offset-2 hover:underline" tabindex="-1">
                                                    Sarah Chen
                                                  </span>

<button type="button" class="py-1.5 px-3 inline-flex items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                                                          Add to contacts
                                                        </button>
                                                      </div>
                                                      
                                                    </div>
                                                  </div>
                                                  
                                                </div>
                                              </div>
                                              
            
                                              <div class="hs-accordion-force-active hs-accordion-active:block sm:hs-accordion-active:hidden hidden leading-4 truncate">
                                                <span class="truncate text-sm text-foreground">Date:</span>
                                                <span class="truncate text-sm text-muted-foreground-1">October 3, 2024 11:30 AM</span>
                                              </div>
            
                                              <div class="hs-accordion-force-active hs-accordion-active:hidden leading-4 truncate">
                                                <p class="truncate text-sm text-muted-foreground-1">Hi Sarah, I agree we should discuss this as soon as possible. I'm available tomorrow (Thursday) at 2 PM or Friday morning before 11 AM. Let me know what works best for you and the team.</p>
                                              </div>
                                            </div>

<div class="self-center">
                                              <span class="hs-accordion-force-active hs-accordion-active:hidden text-xs inline-block text-muted-foreground-1">Oct 3</span>
                                              <span class="hs-accordion-force-active sm:hs-accordion-active:inline-block hidden text-xs text-muted-foreground-1">October 3, 2024 11:30 AM</span>
                                            </div>
                                          </div>
                                        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1tctmdid2">
                                              <div class="max-h-[42dvh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                                                    Reply
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 17 2 12 7 7"/><polyline points="12 17 7 12 12 7"/><path d="M22 18v-2a4 4 0 0 0-4-4H7"/></svg>
                                                    Reply all
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg>
                                                    Forward
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Resend
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                                    Mark as unread
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Mark as read
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Archive
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                    Delete
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>
                                                    Report spam
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhtgm">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>
                                                    Print <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-500/10 dark:text-primary-500">New</span>
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-3a2 2 0 0 1-2-2V2"/><path d="M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z"/><path d="M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8"/></svg>
                                                    Link to conversation
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Copy conversation ID
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                                    Copy conversation link
                                                  </button>
                                                </div>
                                              </div>
                                            </div>
                                            
                                          </div>

</div>
                                      </div>

<div id="hs-pro-in1tcid2-heading" class="hs-accordion-content hidden w-full overflow-hidden" role="region" aria-labelledby="hs-pro-in1tcid2">
                                        <div class="p-4 border-t border-line-2">
                                          <div class="text-sm text-foreground">Hi Sarah,<br><br>I agree we should discuss this as soon as possible. I'm available tomorrow (Thursday) at 2 PM or Friday morning before 11 AM. Let me know what works best for you and the team.<br><br>Regards,<br>Lewis</div>
                                        </div>
                                      </div>
                                      
                                    </div>
                                  </div>

<div class="px-4 space-y-0.5">
                                    <div class="ps-12 flex flex-wrap items-center gap-2">
                                      <span class="text-xs text-muted-foreground-1">
                                        James Collins
                                      </span>
                                    </div>

<div class="group w-full lg:flex lg:gap-x-3">
                                      <div class="w-full flex gap-x-4">
                                        <div class="shrink-0 size-8 text-center">
                                          <img class="shrink-0 size-8 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                        </div>
      
                                        
                                        <div class="-ms-2 self-center w-full max-w-xl">
                                          
                                          <div class="relative">
                                            <textarea class="min-h-[59px] sm:min-h-11.5 p-3 pe-24 block w-full bg-surface-1 border-surface-line md:text-sm leading-4 rounded-lg resize-none hover:bg-layer-hover text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:bg-layer-focus focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb" placeholder="Edit your comment..." rows="1" data-hs-textarea-auto-height='{"defaultHeight": 46}'>@lewis_clarke @isabella please, don't forget to add me</textarea>

<div class="absolute top-1/2 inset-e-3 z-1 -translate-y-1/2 flex items-center gap-x-1">
                                              
                                              <div class="hs-tooltip [--placement:auto] inline-block">
                                                <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-6 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                                                  <span class="sr-only">Attach file</span>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                  Attach file
                                                </span>
                                              </div>
                                              
  
                                              
                                              <div class="hs-tooltip [--placement:auto] inline-block">
                                                <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-6 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                                  <span class="sr-only">Add emoji</span>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                  Add emoji
                                                </span>
                                              </div>
                                              
  
                                              
                                              <div class="hs-tooltip [--placement:auto] inline-block">
                                                <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-6 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                  <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                                                  <span class="sr-only">Send voice message</span>
                                                </button>
                                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                  Send voice message
                                                </span>
                                              </div>
                                              
                                            </div>
                                            
                                          </div>

<div class="mt-1 flex justify-end items-center gap-x-1">
                                            <button type="button" class="py-1.5 px-2.5 inline-flex items-center gap-x-2 font-medium text-sm rounded-lg border border-line-2 text-primary hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                              Cancel
                                            </button>

<div id="hs-pro-in1tcid3" class="hs-accordion active">
                                    <div class="m-0.5 bg-layer rounded-2xl shadow-xs">
                                      
                                      <div class="relative">
                                        <div class="hs-accordion-toggle after:absolute after:inset-0 after:z-1" role="button" aria-expanded="true" aria-controls="hs-pro-in1tcid3-heading"></div>

<div class="mt-1 text-center">
                                                        <p class="text-sm text-foreground">
                                                          <a class="inline-flex items-center gap-x-1.5 text-[13px] text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#">lewis@company.com</a>
                                                        </p>
                                                      </div>
        
                                                      
                                                      <div class="pt-4 mt-4 flex justify-between items-center border-t border-line-2">
                                                        <a class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                                          <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" x2="4" y1="22" y2="15"/></svg>
                                                          Flag
                                                        </a>

<button type="button" class="py-1.5 px-3 inline-flex items-center gap-x-1.5 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                                          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                                                          Add to contacts
                                                        </button>
                                                      </div>
                                                      
                                                    </div>
                                                  </div>
                                                  
                                                </div>
                                              </div>
                                              
            
                                              <div class="hs-accordion-force-active hs-accordion-active:block sm:hs-accordion-active:hidden hidden leading-4 truncate">
                                                <span class="truncate text-sm text-foreground">Date:</span>
                                                <span class="truncate text-sm text-muted-foreground-1">October 3, 2024 11:45 AM</span>
                                              </div>
            
                                              <div class="hs-accordion-force-active hs-accordion-active:hidden leading-4 truncate">
                                                <p class="truncate text-sm text-muted-foreground-1">Thanks for the quick response, Alex. Thursday at 2 PM works for me. I'll send a calendar invite to the team.</p>
                                              </div>
                                            </div>

<div class="self-center">
                                              <span class="hs-accordion-force-active hs-accordion-active:hidden text-xs inline-block text-muted-foreground-1">Oct 3</span>
                                              <span class="hs-accordion-force-active sm:hs-accordion-active:inline-block hidden text-xs text-muted-foreground-1">October 3, 2024 11:45 AM</span>
                                            </div>
                                          </div>
                                        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-1 border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1tctmdid3">
                                              <div class="max-h-[42dvh] overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
                                                    Reply
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 17 2 12 7 7"/><polyline points="12 17 7 12 12 7"/><path d="M22 18v-2a4 4 0 0 0-4-4H7"/></svg>
                                                    Reply all
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg>
                                                    Forward
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Resend
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                                                    Mark as unread
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Mark as read
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Archive
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                                    Delete
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhsn">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/></svg>
                                                    Report spam
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus" data-hs-overlay="#hs-pro-chhtgm">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>
                                                    Print <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full dark:bg-primary-500/10 dark:text-primary-500">New</span>
                                                  </button>
                                                </div>
                                                <div class="p-1 space-y-0.5 border-b border-dropdown-divider last:border-b-0">
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-3a2 2 0 0 1-2-2V2"/><path d="M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z"/><path d="M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8"/></svg>
                                                    Link to conversation
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    Copy conversation ID
                                                  </button>
                                                  <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-3 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                                    Copy conversation link
                                                  </button>
                                                </div>
                                              </div>
                                            </div>
                                            
                                          </div>

</div>
                                      </div>

<div id="hs-pro-in1tcid3-heading" class="hs-accordion-content  w-full overflow-hidden" role="region" aria-labelledby="hs-pro-in1tcid3">
                                        <div class="p-4 border-t border-line-2">
                                          <div class="text-sm text-foreground">Thanks for the quick response, Alex. Thursday at 2 PM works for me. I'll send a calendar invite to the team.<br><br>Best,<br>Sarah Chen</div>
                                        </div>
                                      </div>
                                      
                                    </div>
                                  </div>

<div class="m-0.5 bg-layer rounded-2xl shadow-xs">
                                    
                                    
                                    <div class="py-2 px-4 border-b border-line-2">
                                      <div class="sm:flex gap-x-3">
                                        <div class="grow">
                                          
                                          <div class="flex min-h-8.5 gap-x-2">
                                            <span class="mt-[7px] text-sm text-muted-foreground-1">
                                              From:
                                            </span>

<div class="p-0.5 pe-2 m-0.5 flex flex-nowrap items-center gap-x-1.5">
                                              <img class="shrink-0 size-6 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                              <div class="whitespace-nowrap text-sm text-foreground">
                                                James Collins
                                              </div>
                                            </div>
                                            
                                          </div>

<div class="flex min-h-8.5 gap-x-2">
                                            <span class="mt-[7px] text-sm text-muted-foreground-1">
                                              To:
                                            </span>

<select  multiple data-hs-select='{
                                              "placeholder": "Enter email or name",
                                              "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                              "dropdownScope": "window",
                                              "dropdownPlacement": "bottom-left",
                                              "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                              "mode": "tags",
                                              "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                              "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                              "tagsInputId": "hs-pro-in1trtotid1",
                                              "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                              "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                            }' class="hidden">
                                              <option value="">Choose</option>
                                              <option selected  value="1" data-hs-select-option='{
                                                  "description": "schen@company.com",
                                                  "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                                }'>Sarah Chen</option>
                                              <option   value="2" data-hs-select-option='{
                                                  "description": "david1harris@example.com",
                                                  "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                }'>David Harrisom</option>
                                              <option   value="3" data-hs-select-option='{
                                                  "description": "lewis@company.com",
                                                  "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                }'>Lewis Clarke</option>
                                              <option   value="4" data-hs-select-option='{
                                                  "description": "isabella@site.com",
                                                  "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                                }'>Isabella Lauda</option>
                                              <option   value="5" data-hs-select-option='{
                                                  "description": "chrstiwilliams@site.so",
                                                  "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                                }'>Christina Williams</option>
                                              <option   value="6" data-hs-select-option='{
                                                  "description": "amanda@preline.so",
                                                  "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                }'>Amanda Harvey</option>
                                            </select>

</div>

<div id="hs-pro-in1trcccid1-heading" class="hs-collapse w-full overflow-hidden open" aria-labelledby="hs-pro-in1trcccid1" role="region">
                                            <div class="flex min-h-8.5 gap-x-2">
                                              <span class="mt-[7px] text-sm text-muted-foreground-1">
                                                Cc:
                                              </span>

<select  multiple data-hs-select='{
                                                "placeholder": "Enter email or name",
                                                "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                                "dropdownScope": "window",
                                                "dropdownPlacement": "bottom-left",
                                                "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                                "mode": "tags",
                                                "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                                "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                                "tagsInputId": "hs-pro-in1trcctid1",
                                                "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                                "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                              }' class="hidden">
                                                <option value="">Choose</option>
                                                <option   value="1" data-hs-select-option='{
                                                    "description": "schen@company.com",
                                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                                  }'>Sarah Chen</option>
                                                <option   value="2" data-hs-select-option='{
                                                    "description": "david1harris@example.com",
                                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                  }'>David Harrisom</option>
                                                <option selected  value="3" data-hs-select-option='{
                                                    "description": "lewis@company.com",
                                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                  }'>Lewis Clarke</option>
                                                <option selected  value="4" data-hs-select-option='{
                                                    "description": "isabella@site.com",
                                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                                  }'>Isabella Lauda</option>
                                                <option   value="5" data-hs-select-option='{
                                                    "description": "chrstiwilliams@site.so",
                                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                                  }'>Christina Williams</option>
                                                <option   value="6" data-hs-select-option='{
                                                    "description": "amanda@preline.so",
                                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                  }'>Amanda Harvey</option>
                                              </select>

</div>
                                          </div>

<div id="hs-pro-in1trbcccid1-heading" class="hs-collapse w-full overflow-hidden hidden" aria-labelledby="hs-pro-in1trbcccid1" role="region">
                                            <div class="flex min-h-8.5 gap-x-2">
                                              <span class="mt-[7px] text-sm text-muted-foreground-1">
                                                Bcc:
                                              </span>

<select  multiple data-hs-select='{
                                                "placeholder": "Enter email or name",
                                                "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                                "dropdownScope": "window",
                                                "dropdownPlacement": "bottom-left",
                                                "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                                "mode": "tags",
                                                "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                                "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                                "tagsInputId": "hs-pro-in1trbcctid1",
                                                "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                                "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                              }' class="hidden">
                                                <option value="">Choose</option>
                                                <option   value="1" data-hs-select-option='{
                                                    "description": "schen@company.com",
                                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                                  }'>Sarah Chen</option>
                                                <option   value="2" data-hs-select-option='{
                                                    "description": "david1harris@example.com",
                                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                  }'>David Harrisom</option>
                                                <option   value="3" data-hs-select-option='{
                                                    "description": "lewis@company.com",
                                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                  }'>Lewis Clarke</option>
                                                <option   value="4" data-hs-select-option='{
                                                    "description": "isabella@site.com",
                                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                                  }'>Isabella Lauda</option>
                                                <option   value="5" data-hs-select-option='{
                                                    "description": "chrstiwilliams@site.so",
                                                    "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                                  }'>Christina Williams</option>
                                                <option   value="6" data-hs-select-option='{
                                                    "description": "amanda@preline.so",
                                                    "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                                  }'>Amanda Harvey</option>
                                              </select>

</div>
                                          </div>
                                          
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                              <button type="button" class="hs-tooltip-toggle hs-collapse-toggle flex shrink-0 justify-center items-center size-6 text-xs text-muted-foreground-2 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-intrprm">
                                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/><path d="m21 3-9 9"/><path d="M15 3h6v6"/></svg>
                                              </button>
                                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                Popout reply
                                              </span>
                                            </div>
                                          </div>
                                          
                                        </div>
                                      </div>
                                    </div>

<div id="hs-pro-in1trsbcid1-heading" class="hs-collapse w-full overflow-hidden hidden" aria-labelledby="hs-pro-in1trsbcid1" role="region">
                                      <div class="py-2.5 px-4 flex items-center gap-x-3 border-b border-line-2">
                                        <span class="text-sm text-muted-foreground-1">
                                          Subject:
                                        </span>

<div class="grow">
                                          <input type="text" id="hs-pro-in1trsbinid1" class="p-0 block w-full bg-transparent border-transparent rounded-0 sm:text-sm text-base text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-transparent focus:ring-transparent disabled:opacity-50 disabled:pointer-events-none" value="Re:Project Timeline Update">
                                          <label for="hs-pro-in1trsbinid1" class="sr-only">Subject</label>
                                        </div>
                                      </div>
                                    </div>

<div id="hs-editor-tiptap-1">
                                      <div data-hs-editor-field></div>

<div class="p-2 border-t border-line-2">
                                        <div class="flex flex-wrap items-center gap-0.5">
                                          
                                          <div class="hs-dropdown [--auto-close:inside] [--placement:top-left] relative inline-flex">
                                            <div class="hs-tooltip [--placement:bottom] inline-block">
                                              <button id="hs-pro-in1trfodid1" type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16"/><path d="m6 16 6-12 6 12"/><path d="M8 12h8"/></svg>
                                                <span class="sr-only">Formatting options</span>
                                              </button>
                                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-60 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                Formatting options
                                              </span>
                                            </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-65.5 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-line-2 rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1trfodid1">
                                              
                                              <div class="p-1">
                                                
                                                <div class="hs-tooltip [--placement:auto] inline-block">
                                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-bold>
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                                                    <span class="sr-only">Bold</span>
                                                  </button>
                                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                    Bold
                                                  </span>
                                                </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-italic>
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                                                    <span class="sr-only">Italic</span>
                                                  </button>
                                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                    Italic
                                                  </span>
                                                </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-underline>
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                                                    <span class="sr-only">Underline</span>
                                                  </button>
                                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                    Underline
                                                  </span>
                                                </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-strike>
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                                                    <span class="sr-only">Strike</span>
                                                  </button>
                                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                    Strike
                                                  </span>
                                                </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-ul>
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                                                    <span class="sr-only">Lists</span>
                                                  </button>
                                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                    Lists
                                                  </span>
                                                </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-blockquote>
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                                                    <span class="sr-only">Blockquote</span>
                                                  </button>
                                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                    Blockquote
                                                  </span>
                                                </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                                  <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-code>
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                                                    <span class="sr-only">Code</span>
                                                  </button>
                                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                    Code
                                                  </span>
                                                </div>
                                                
                                              </div>
                                              
                                            </div>
                                            
                                          </div>

<div class="hs-tooltip [--placement:bottom] inline-block">
                                            <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-link>
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Link
                                            </span>
                                          </div>
                                          
      
                                          
                                          <div class="hs-tooltip [--placement:bottom] inline-block">
                                            <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Add emoji
                                            </span>
                                          </div>
                                          
      
                                          
                                          <div class="hs-tooltip [--placement:bottom] inline-block">
                                            <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Send voice message
                                            </span>
                                          </div>
                                          
        
                                          
                                          <div class="hs-tooltip [--placement:bottom] inline-block">
                                            <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                            </button>
                                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                              Delete
                                            </span>
                                          </div>
                                          
      
                                          <div class="ms-auto">
                                            
                                            <div class="inline-flex items-center -space-x-px">
                                              
                                              <button type="button" class="py-1.5 px-2.5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-s-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus focus:z-10">
                                                Send
                                              </button>

<div class="hs-dropdown [--auto-close:inside] [--placement:top-right] relative inline-flex border-s border-line-7/50">
                                                <div class="hs-tooltip [--placement:bottom-right] inline-block">
                                                  <button id="hs-pro-in1trsbgwmdid1" type="button" class="hs-tooltip-toggle size-8.5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-e-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus focus:z-10">
                                                    <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                    <span class="sr-only">More send options</span>
                                                  </button>
                                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-60 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                                    More send options
                                                  </span>
                                                </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1trsbgwmdid1">
                                                  
                                                  <div class="p-1">
                                                    <button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                                      Send
                                                    </button>

<button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.3V14"/><circle cx="16" cy="16" r="6"/></svg>
                                                      Schedule send
                                                    </button>
                                                  </div>
                                                  
                                                </div>
                                                
                                              </div>
                                              
                                            </div>
                                            
                                          </div>
                                        </div>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                  
                                </div>
                              </div>

<div class="p-4">
                                
                                <div class="relative">
                                  <textarea class="max-h-36 py-3 ps-4 pe-24 block w-full bg-surface-1 border-line-2 md:text-sm text-base leading-4 rounded-lg resize-none hover:bg-layer-hover text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:bg-layer-focus focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb" placeholder="Add a comment..." rows="1" data-hs-textarea-auto-height='{"defaultHeight": 46}'></textarea>

<div class="absolute top-1/2 inset-e-4 z-1 -translate-y-1/2 flex items-center gap-x-1">
                                    
                                    <div class="hs-tooltip [--placement:auto] inline-block">
                                      <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-6 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                                        <span class="sr-only">Attach file</span>
                                      </button>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Attach file
                                      </span>
                                    </div>
                                    
  
                                    
                                    <div class="hs-tooltip [--placement:auto] inline-block">
                                      <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-6 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                        <span class="sr-only">Add emoji</span>
                                      </button>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Add emoji
                                      </span>
                                    </div>
                                    
  
                                    
                                    <div class="hs-tooltip [--placement:auto] inline-block">
                                      <button type="button" class="hs-tooltip-toggle flex justify-center items-center gap-x-3 size-6 text-sm text-muted-foreground-2 hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                                        <span class="sr-only">Send voice message</span>
                                      </button>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Send voice message
                                      </span>
                                    </div>

<button type="button" class="inline-flex shrink-0 justify-center items-center size-6 text-sm font-medium rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:z-10 focus:outline-hidden focus:bg-primary-focus">
                                      <span class="sr-only">Send</span>
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
                                    </button>
                                    
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>

<div id="hs-pro-tabs-intl-2" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-intl-item-2">
                            <div class="relative h-dvh flex flex-col">
                              
                              <header class="lg:hidden sticky top-0 inset-x-0 z-9 p-2 sm:px-5 flex justify-between gap-x-2 bg-navbar border-b border-navbar-line">
                                <div class="grow">
                                  <div class="flex items-center gap-x-1">
                                    <div class="lg:hidden relative pe-2 me-1 before:block before:absolute before:top-1/2 before:inset-e-0 before:h-4 before:border-s before:border-line-2 before:-translate-y-1/2">
                                      
                                      <button type="button" class="py-1.5 lg:px-2.5 flex justify-center items-center text-[13px] text-muted-foreground-2 lg:hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden lg:focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-inbox-thread-list-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-inbox-thread-list-sidebar">
                                        Inbox
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                      </button>
                                      
                                    </div>
                                  </div>
                                </div>
                              </header>

<div class="h-full flex flex-col justify-center items-center text-center">
                                <span class="py-1.5 inline-flex gap-x-1">
                                  <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite] rounded-full"></span>
                                  <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite_0.2s] rounded-full"></span>
                                  <span class="size-2.5 bg-secondary animate-[typing_1s_ease-in-out_infinite_0.4s] rounded-full"></span>
                                </span>
                                <p class="mt-3 text-sm text-muted-foreground-1">
                                  This is a placeholder loader.<br>This conent is empty.
                                </p>
                              </div>
                              
                            </div>
                          </div>

<div id="hs-pro-tabs-intl-3" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-intl-item-3">
                            <div class="relative h-dvh flex flex-col">
                              
                              <header class="lg:hidden sticky top-0 inset-x-0 z-9 p-2 sm:px-5 flex justify-between gap-x-2 bg-navbar border-b border-navbar-line">
                                <div class="grow">
                                  <div class="flex items-center gap-x-1">
                                    <div class="lg:hidden relative pe-2 me-1 before:block before:absolute before:top-1/2 before:inset-e-0 before:h-4 before:border-s before:border-line-2 before:-translate-y-1/2">
                                      
                                      <button type="button" class="py-1.5 lg:px-2.5 flex justify-center items-center text-[13px] text-muted-foreground-2 lg:hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden lg:focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-inbox-thread-list-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-inbox-thread-list-sidebar">
                                        Inbox
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                      </button>
                                      
                                    </div>
                                  </div>
                                </div>
                              </header>

<div id="hs-pro-tabs-intl-4" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-intl-item-4">
                            <div class="relative h-dvh flex flex-col">
                              
                              <header class="lg:hidden sticky top-0 inset-x-0 z-9 p-2 sm:px-5 flex justify-between gap-x-2 bg-navbar border-b border-navbar-line">
                                <div class="grow">
                                  <div class="flex items-center gap-x-1">
                                    <div class="lg:hidden relative pe-2 me-1 before:block before:absolute before:top-1/2 before:inset-e-0 before:h-4 before:border-s before:border-line-2 before:-translate-y-1/2">
                                      
                                      <button type="button" class="py-1.5 lg:px-2.5 flex justify-center items-center text-[13px] text-muted-foreground-2 lg:hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden lg:focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-inbox-thread-list-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-inbox-thread-list-sidebar">
                                        Inbox
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                      </button>
                                      
                                    </div>
                                  </div>
                                </div>
                              </header>

<div id="hs-pro-tabs-intl-5" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-intl-item-5">
                            <div class="relative h-dvh flex flex-col">
                              
                              <header class="lg:hidden sticky top-0 inset-x-0 z-9 p-2 sm:px-5 flex justify-between gap-x-2 bg-navbar border-b border-navbar-line">
                                <div class="grow">
                                  <div class="flex items-center gap-x-1">
                                    <div class="lg:hidden relative pe-2 me-1 before:block before:absolute before:top-1/2 before:inset-e-0 before:h-4 before:border-s before:border-line-2 before:-translate-y-1/2">
                                      
                                      <button type="button" class="py-1.5 lg:px-2.5 flex justify-center items-center text-[13px] text-muted-foreground-2 lg:hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden lg:focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-inbox-thread-list-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-inbox-thread-list-sidebar">
                                        Inbox
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                      </button>
                                      
                                    </div>
                                  </div>
                                </div>
                              </header>

<div id="hs-pro-tabs-intl-6" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-intl-item-6">
                            <div class="relative h-dvh flex flex-col">
                              
                              <header class="lg:hidden sticky top-0 inset-x-0 z-9 p-2 sm:px-5 flex justify-between gap-x-2 bg-navbar border-b border-navbar-line">
                                <div class="grow">
                                  <div class="flex items-center gap-x-1">
                                    <div class="lg:hidden relative pe-2 me-1 before:block before:absolute before:top-1/2 before:inset-e-0 before:h-4 before:border-s before:border-line-2 before:-translate-y-1/2">
                                      
                                      <button type="button" class="py-1.5 lg:px-2.5 flex justify-center items-center text-[13px] text-muted-foreground-2 lg:hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden lg:focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-inbox-thread-list-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-inbox-thread-list-sidebar">
                                        Inbox
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                      </button>
                                      
                                    </div>
                                  </div>
                                </div>
                              </header>

<div id="hs-pro-tabs-intl-7" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-intl-item-7">
                            <div class="relative h-dvh flex flex-col">
                              
                              <header class="lg:hidden sticky top-0 inset-x-0 z-9 p-2 sm:px-5 flex justify-between gap-x-2 bg-navbar border-b border-navbar-line">
                                <div class="grow">
                                  <div class="flex items-center gap-x-1">
                                    <div class="lg:hidden relative pe-2 me-1 before:block before:absolute before:top-1/2 before:inset-e-0 before:h-4 before:border-s before:border-line-2 before:-translate-y-1/2">
                                      
                                      <button type="button" class="py-1.5 lg:px-2.5 flex justify-center items-center text-[13px] text-muted-foreground-2 lg:hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden lg:focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-inbox-thread-list-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-pro-inbox-thread-list-sidebar">
                                        Inbox
                                        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                      </button>
                                      
                                    </div>
                                  </div>
                                </div>
                              </header>

<div id="hs-pro-chhcntm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhcntm-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-sm sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-3 px-4 flex justify-between items-center border-b border-line-2">
                            <p id="hs-pro-chhcntm-label" class="font-semibold text-foreground">
                              Create new tag
                            </p>

<button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-pro-chhcntm" data-hs-overlay-close>
                              <span class="sr-only">Close</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="p-4 max-h-96 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            
                            <div>
                              <label for="hs-pro-chhcntmnm" class="mb-2 block text-sm font-medium text-foreground">
                                Name
                              </label>
                              <input id="hs-pro-chhcntmnm" type="text" class="py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-base text-foreground placeholder:text-muted-foreground focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" placeholder="e.g. App">
                            </div>

<fieldset class="mt-7">
                              <legend class="mb-2 text-sm font-medium text-foreground">
                                Colors
                              </legend>
          
                              <div class="flex flex-wrap gap-2.5">
                                <div class="group flex shrink-0 justify-center items-center size-6 cursor-pointer rounded-full bg-surface-4 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="hidden" id="hs-pro-chhcntmclGray" name="hs-pro-chhcntmcl" checked>
                                  <label for="hs-pro-chhcntmclGray">
                                    <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-4 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                    <span class="sr-only">Gray</span>
                                  </label>
                                </div>

<div class="group flex shrink-0 justify-center items-center size-6 cursor-pointer rounded-full bg-orange-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="hidden" id="hs-pro-chhcntmclOrange" name="hs-pro-chhcntmcl">
                                  <label for="hs-pro-chhcntmclOrange">
                                    <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-4 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                    <span class="sr-only">Orange</span>
                                  </label>
                                </div>

<div class="group flex shrink-0 justify-center items-center size-6 cursor-pointer rounded-full bg-yellow-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="hidden" id="hs-pro-chhcntmclYellow" name="hs-pro-chhcntmcl">
                                  <label for="hs-pro-chhcntmclYellow">
                                    <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-4 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                    <span class="sr-only">Yellow</span>
                                  </label>
                                </div>

<div class="group flex shrink-0 justify-center items-center size-6 cursor-pointer rounded-full bg-green-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="hidden" id="hs-pro-chhcntmclGreen" name="hs-pro-chhcntmcl">
                                  <label for="hs-pro-chhcntmclGreen">
                                    <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-4 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                    <span class="sr-only">Green</span>
                                  </label>
                                </div>

<div class="group flex shrink-0 justify-center items-center size-6 cursor-pointer rounded-full bg-purple-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="hidden" id="hs-pro-chhcntmclPurple" name="hs-pro-chhcntmcl">
                                  <label for="hs-pro-chhcntmclPurple">
                                    <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-4 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                    <span class="sr-only">Purple</span>
                                  </label>
                                </div>

<div class="group flex shrink-0 justify-center items-center size-6 cursor-pointer rounded-full bg-indigo-500 has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" class="hidden" id="hs-pro-chhcntmclIndigo" name="hs-pro-chhcntmcl">
                                  <label for="hs-pro-chhcntmclIndigo">
                                    <svg class="group-has-checked:opacity-100 opacity-0 shrink-0 size-4 cursor-pointer text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                    <span class="sr-only">Indigo</span>
                                  </label>
                                </div>
                              </div>
                            </fieldset>

<div class="mt-7 inline-flex justify-between items-center gap-x-3">
                              <label for="hs-pro-chhcntmpr" class="relative inline-block w-11 h-6 cursor-pointer">
                                <input type="checkbox" id="hs-pro-chhcntmpr" class="peer sr-only">
                                <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
                                <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
                              </label>
                              <label for="hs-pro-chhcntmpr" class="flex-1 cursor-pointer text-sm text-foreground">Make it private</label>
                            </div>
                            
                          </div>

<div class="p-4 flex justify-between gap-x-2">
                            <div class="flex-1 flex justify-end items-center gap-2">
                              <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-xs font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-chhcntm">
                                Cancel
                              </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-xs font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-chhcntm">
                                Create
                              </button>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

<div id="hs-pro-chhsncs" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-chhsncs-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-sm sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-3 px-4 flex justify-between items-center border-b border-line-2">
                            <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-layer text-layer-foreground hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-chhsn">
                              <span class="sr-only">Back</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                            </button>

<h2 id="hs-pro-chhsncs-label" class="font-semibold text-foreground">
                              Custom date & time
                            </h2>
        
                            <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-pro-chhsncs">
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                              <span class="sr-only">Close</span>
                            </button>
                          </div>

<div class="p-1 max-h-96 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            <div class="flex justify-between gap-x-1">
                              <fieldset class="w-full grid gap-y-1">
                                <legend class="sr-only">
                                  Custom date & time
                                </legend>

<label for="hs-pro-chhsncsramt1" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt1" class="hidden" value="01:00 AM" name="hs-pro-chhsncsramt" checked>
                                  <span class="block text-[13px] text-foreground">
                                    01:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt2" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt2" class="hidden" value="02:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    02:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt3" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt3" class="hidden" value="03:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    03:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt4" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt4" class="hidden" value="04:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    04:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt5" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt5" class="hidden" value="05:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    05:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt6" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt6" class="hidden" value="06:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    06:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt7" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt7" class="hidden" value="07:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    07:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt8" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt8" class="hidden" value="08:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    08:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt9" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt9" class="hidden" value="09:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    09:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt10" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt10" class="hidden" value="010:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    010:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt11" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt11" class="hidden" value="011:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    011:00 AM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt12" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt12" class="hidden" value="012:00 AM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    012:00 AM
                                  </span>
                                </label>
                                
                              </fieldset>

<fieldset class="w-full grid gap-y-1">
                                <legend class="sr-only">
                                  Custom date & time
                                </legend>

<label for="hs-pro-chhsncsramt13" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt13" class="hidden" value="01:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    01:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt14" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt14" class="hidden" value="02:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    02:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt15" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt15" class="hidden" value="03:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    03:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt16" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt16" class="hidden" value="04:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    04:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt17" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt17" class="hidden" value="05:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    05:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt18" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt18" class="hidden" value="06:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    06:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt19" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt19" class="hidden" value="07:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    07:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt20" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt20" class="hidden" value="08:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    08:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt21" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt21" class="hidden" value="09:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    09:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt22" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt22" class="hidden" value="010:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    010:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt23" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt23" class="hidden" value="011:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    011:00 PM
                                  </span>
                                </label>

<label for="hs-pro-chhsncsramt24" class="py-2 px-3 flex justify-center items-center rounded-lg cursor-pointer rounded-md hover:bg-surface-hover has-checked:bg-surface-active has-disabled:opacity-50 has-disabled:pointer-events-none">
                                  <input type="radio" id="hs-pro-chhsncsramt24" class="hidden" value="012:00 PM" name="hs-pro-chhsncsramt" >
                                  <span class="block text-[13px] text-foreground">
                                    012:00 PM
                                  </span>
                                </label>
                                
                              </fieldset>
                            </div>
                          </div>

<div class="pb-3">
                            <div class="py-3 px-4 mb-2 flex justify-between items-center gap-x-2 border-y border-line-2">
                              <div class="w-full">
                                <span class="ms-2 mb-1.5 block text-xs text-muted-foreground-2">
                                  Date
                                </span>

<div class="hs-dropdown [--auto-close:inside] inline-flex w-full">
                                  <button id="hs-pro-dnic" type="button" class="py-1 sm:py-2 px-2 w-full inline-flex items-center sm:text-xs rounded-lg bg-surface border border-transparent text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <svg class="shrink-0 me-2 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/><path d="M16 18h.01"/></svg>
                                    07/05/2024
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-79.5 transition-[opacity,margin] duration opacity-0 hidden z-50 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dnic">
                                    
                                        
                                        <div class="p-3 space-y-0.5">
                                          
                                          <div class="grid grid-cols-5 items-center gap-x-3 mx-1.5 pb-3">
                                            
                                            <div class="col-span-1">
                                              <button type="button" class="size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Previous">
                                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                              </button>
                                            </div>
                                            
          
                                            
                                            <div class="col-span-3 flex justify-center items-center gap-x-1">
                                              <div class="relative">
                                                <select data-hs-select='{
                                                    "placeholder": "Select month",
                                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                                    "dropdownClasses": "mt-2 z-50 w-32 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                                    "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                                    "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                                  }' class="hidden">
                                                  <option value="0">January</option>
                                                  <option value="1">February</option>
                                                  <option value="2">March</option>
                                                  <option value="3">April</option>
                                                  <option value="4">May</option>
                                                  <option value="5">June</option>
                                                  <option value="6" selected>July</option>
                                                  <option value="7">August</option>
                                                  <option value="8">September</option>
                                                  <option value="9">October</option>
                                                  <option value="10">November</option>
                                                  <option value="11">December</option>
                                                </select>
                                              </div>

<div class="relative">
                                                <select data-hs-select='{
                                                    "placeholder": "Select year",
                                                    "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                                                    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative flex text-nowrap w-full cursor-pointer text-start font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus before:absolute before:inset-0 before:z-1",
                                                    "dropdownClasses": "mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-layer-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                                    "optionClasses": "p-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-md focus:outline-hidden focus:bg-select-item-focus",
                                                    "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>"
                                                  }' class="hidden">
                                                  <option selected>2023</option>
                                                  <option>2024</option>
                                                  <option>2025</option>
                                                  <option>2026</option>
                                                  <option>2027</option>
                                                </select>
                                              </div>
                                            </div>

<div class="col-span-1 flex justify-end">
                                              <button type="button" class=" size-8 flex justify-center items-center text-foreground hover:bg-muted-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-label="Next">
                                                <svg class="shrink-0 size-4" width="24" height="24" 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>
                                              </button>
                                            </div>
                                            
                                          </div>

<div class="flex pb-1.5">
                                            <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                              Mo
                                            </span>
                                            <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                              Tu
                                            </span>
                                            <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                              We
                                            </span>
                                            <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                              Th
                                            </span>
                                            <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                              Fr
                                            </span>
                                            <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                              Sa
                                            </span>
                                            <span class="m-px w-10 block text-center text-sm text-muted-foreground-1">
                                              Su
                                            </span>
                                          </div>

<div class="flex">
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                10
                                              </button>
                                            </div>
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                11
                                              </button>
                                            </div>
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                12
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                13
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                14
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                15
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                16
                                              </button>
                                            </div>
                                          </div>
                                          
      
                                          
                                          <div class="flex">
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                17
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                18
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                19
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center bg-primary border-[1.5px] border-transparent text-sm font-medium text-primary-foreground hover:border-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus">
                                                20
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                21
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                22
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                23
                                              </button>
                                            </div>
                                          </div>
                                          
      
                                          
                                          <div class="flex">
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                24
                                              </button>
                                            </div>
                                            <div >
                                                <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                25
                                              </button>
                                            </div>
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                26
                                              </button>
                                            </div>
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                27
                                              </button>
                                            </div>
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                28
                                              </button>
                                            </div>
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                29
                                              </button>
                                            </div>
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                30
                                              </button>
                                            </div>
                                          </div>
                                          
      
                                          
                                          <div class="flex">
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground rounded-full hover:border-primary-hover hover:text-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:text-primary-focus">
                                                31
                                              </button>
                                            </div>
                                            <div >
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                                1
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                                2
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                                3
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                                4
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                                5
                                              </button>
                                            </div>
                                            <div>
                                              <button type="button" class="m-px size-10 flex justify-center items-center border-[1.5px] border-transparent text-sm text-foreground hover:border-primary-hover hover:text-primary-hover rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                                                6
                                              </button>
                                            </div>
                                          </div>
                                          
                                        </div>
                                    
                                  </div>
                                </div>
                              </div>

<div class="w-full">
                                <label for="hs-pro-chhsncstm" class="ms-2 mb-1.5 block text-xs text-muted-foreground-2">
                                  Time
                                </label>

<div class="pt-1 px-4">
                              <div class="flex-1 flex justify-end items-center gap-2">
                                <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center text-start whitespace-nowrap bg-layer border border-layer-line text-layer-foreground text-xs font-medium rounded-lg shadow-2xs align-middle hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-pro-chhsncs">
                                  Cancel
                                </button>

<button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-primary border border-primary-line text-primary-foreground text-xs font-medium rounded-lg shadow-2xs align-middle hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-chhsncs">
                                  Snooze
                                </button>
                              </div>
                            </div>
                          </div>
                          
                        </div>
                      </div>
                    </div>

<div id="hs-pro-intrprm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-intrprm-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all md:max-w-3xl md:w-full m-3 md:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-intrprm-label" class="font-medium text-foreground">
                              Re:Project Timeline Update
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-intrprm">
                              <span class="sr-only">Close</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="p-1 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                            
                            
                            <div class="py-2 px-4 border-b border-line-2">
                              <div class="sm:flex gap-x-3">
                                <div class="grow">
                                  
                                  <div class="flex min-h-8.5 gap-x-2">
                                    <span class="mt-[7px] text-sm text-muted-foreground-1">
                                      From:
                                    </span>

<div class="p-0.5 pe-2 m-0.5 flex flex-nowrap items-center gap-x-1.5">
                                      <img class="shrink-0 size-6 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                      <div class="whitespace-nowrap text-sm text-foreground">
                                        James Collins
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="flex min-h-8.5 gap-x-2">
                                    <span class="mt-[7px] text-sm text-muted-foreground-1">
                                      To:
                                    </span>

<select  multiple data-hs-select='{
                                      "placeholder": "Enter email or name",
                                      "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                      "dropdownScope": "window",
                                      "dropdownPlacement": "bottom-left",
                                      "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                      "mode": "tags",
                                      "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                      "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                      "tagsInputId": "hs-pro-in1trtotmdid1",
                                      "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                      "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                    }' class="hidden">
                                      <option value="">Choose</option>
                                      <option selected  value="1" data-hs-select-option='{
                                          "description": "schen@company.com",
                                          "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                        }'>Sarah Chen</option>
                                      <option   value="2" data-hs-select-option='{
                                          "description": "david1harris@example.com",
                                          "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                        }'>David Harrisom</option>
                                      <option   value="3" data-hs-select-option='{
                                          "description": "lewis@company.com",
                                          "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                        }'>Lewis Clarke</option>
                                      <option   value="4" data-hs-select-option='{
                                          "description": "isabella@site.com",
                                          "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                        }'>Isabella Lauda</option>
                                      <option   value="5" data-hs-select-option='{
                                          "description": "chrstiwilliams@site.so",
                                          "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                        }'>Christina Williams</option>
                                      <option   value="6" data-hs-select-option='{
                                          "description": "amanda@preline.so",
                                          "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                        }'>Amanda Harvey</option>
                                    </select>

</div>

<div id="hs-pro-in1trcccmdid1-heading" class="hs-collapse w-full overflow-hidden open" aria-labelledby="hs-pro-in1trcccmdid1" role="region">
                                    <div class="flex min-h-8.5 gap-x-2">
                                      <span class="mt-[7px] text-sm text-muted-foreground-1">
                                        Cc:
                                      </span>

<select  multiple data-hs-select='{
                                        "placeholder": "Enter email or name",
                                        "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "dropdownScope": "window",
                                        "dropdownPlacement": "bottom-left",
                                        "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                        "mode": "tags",
                                        "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                        "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                        "tagsInputId": "hs-pro-in1trcctmdid1",
                                        "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                        "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                      }' class="hidden">
                                        <option value="">Choose</option>
                                        <option   value="1" data-hs-select-option='{
                                            "description": "schen@company.com",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                          }'>Sarah Chen</option>
                                        <option   value="2" data-hs-select-option='{
                                            "description": "david1harris@example.com",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>David Harrisom</option>
                                        <option selected  value="3" data-hs-select-option='{
                                            "description": "lewis@company.com",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>Lewis Clarke</option>
                                        <option selected  value="4" data-hs-select-option='{
                                            "description": "isabella@site.com",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                          }'>Isabella Lauda</option>
                                        <option   value="5" data-hs-select-option='{
                                            "description": "chrstiwilliams@site.so",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                          }'>Christina Williams</option>
                                        <option   value="6" data-hs-select-option='{
                                            "description": "amanda@preline.so",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>Amanda Harvey</option>
                                      </select>

</div>
                                  </div>

<div id="hs-pro-in1trbcccmdid1-heading" class="hs-collapse w-full overflow-hidden hidden" aria-labelledby="hs-pro-in1trbcccmdid1" role="region">
                                    <div class="flex min-h-8.5 gap-x-2">
                                      <span class="mt-[7px] text-sm text-muted-foreground-1">
                                        Bcc:
                                      </span>

<select  multiple data-hs-select='{
                                        "placeholder": "Enter email or name",
                                        "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "dropdownScope": "window",
                                        "dropdownPlacement": "bottom-left",
                                        "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                        "mode": "tags",
                                        "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                        "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                        "tagsInputId": "hs-pro-in1trbcctmdid1",
                                        "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                        "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                      }' class="hidden">
                                        <option value="">Choose</option>
                                        <option   value="1" data-hs-select-option='{
                                            "description": "schen@company.com",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                          }'>Sarah Chen</option>
                                        <option   value="2" data-hs-select-option='{
                                            "description": "david1harris@example.com",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>David Harrisom</option>
                                        <option   value="3" data-hs-select-option='{
                                            "description": "lewis@company.com",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>Lewis Clarke</option>
                                        <option   value="4" data-hs-select-option='{
                                            "description": "isabella@site.com",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                          }'>Isabella Lauda</option>
                                        <option   value="5" data-hs-select-option='{
                                            "description": "chrstiwilliams@site.so",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                          }'>Christina Williams</option>
                                        <option   value="6" data-hs-select-option='{
                                            "description": "amanda@preline.so",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>Amanda Harvey</option>
                                      </select>

</div>
                                  </div>
                                  
                                </div>

<button type="button" class="hs-collapse-toggle p-1 text-xs text-muted-foreground-2 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus " id="hs-pro-in1trsbcmdid1" aria-expanded="false" aria-controls="hs-pro-in1trsbcmdid1-heading" data-hs-collapse="#hs-pro-in1trsbcmdid1-heading">
                                      Subject
                                    </button>
                                  </div>
                                  
                                </div>
                              </div>
                            </div>

<div id="hs-pro-in1trsbcmdid1-heading" class="hs-collapse w-full overflow-hidden hidden" aria-labelledby="hs-pro-in1trsbcmdid1" role="region">
                              <div class="py-2.5 px-4 flex items-center gap-x-3 border-b border-line-2">
                                <span class="text-sm text-muted-foreground-1">
                                  Subject:
                                </span>

<div class="grow">
                                  <input type="text" id="hs-pro-in1trsbinmdid1" class="p-0 block w-full bg-transparent border-transparent rounded-0 sm:text-sm text-base text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-transparent focus:ring-transparent disabled:opacity-50 disabled:pointer-events-none" value="Re:Project Timeline Update">
                                  <label for="hs-pro-in1trsbinmdid1" class="sr-only">Subject</label>
                                </div>
                              </div>
                            </div>

<div id="hs-editor-tiptap-2">
                              <div data-hs-editor-field></div>

<div class="p-2 border-t border-line-2">
                                <div class="flex flex-wrap items-center gap-0.5">
                                  
                                  <div class="hs-dropdown [--auto-close:inside] [--placement:top-left] relative inline-flex">
                                    <div class="hs-tooltip [--placement:bottom] inline-block">
                                      <button id="hs-pro-in1trfomdid1" type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16"/><path d="m6 16 6-12 6 12"/><path d="M8 12h8"/></svg>
                                        <span class="sr-only">Formatting options</span>
                                      </button>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-60 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Formatting options
                                      </span>
                                    </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-65.5 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-line-2 rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1trfomdid1">
                                      
                                      <div class="p-1">
                                        
                                        <div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-bold>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                                            <span class="sr-only">Bold</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Bold
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-italic>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                                            <span class="sr-only">Italic</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Italic
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-underline>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                                            <span class="sr-only">Underline</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Underline
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-strike>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                                            <span class="sr-only">Strike</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Strike
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-ul>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                                            <span class="sr-only">Lists</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Lists
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-blockquote>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                                            <span class="sr-only">Blockquote</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Blockquote
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-code>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                                            <span class="sr-only">Code</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Code
                                          </span>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>

<div class="hs-tooltip [--placement:bottom] inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-link>
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Link
                                    </span>
                                  </div>
                                  
      
                                  
                                  <div class="hs-tooltip [--placement:bottom] inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Add emoji
                                    </span>
                                  </div>
                                  
      
                                  
                                  <div class="hs-tooltip [--placement:bottom] inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Send voice message
                                    </span>
                                  </div>
                                  
        
                                  
                                  <div class="hs-tooltip [--placement:bottom] inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Delete
                                    </span>
                                  </div>
                                  
      
                                  <div class="ms-auto">
                                    
                                    <div class="inline-flex items-center -space-x-px">
                                      
                                      <button type="button" class="py-1.5 px-2.5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-s-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus focus:z-10">
                                        Send
                                      </button>

<div class="hs-dropdown [--auto-close:inside] [--placement:top-right] relative inline-flex border-s border-line-7/50">
                                        <div class="hs-tooltip [--placement:bottom-right] inline-block">
                                          <button id="hs-pro-in1trsbgwmmdid1" type="button" class="hs-tooltip-toggle size-8.5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-e-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus focus:z-10">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                            <span class="sr-only">More send options</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-60 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            More send options
                                          </span>
                                        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1trsbgwmmdid1">
                                          
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              Send
                                            </button>

<button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.3V14"/><circle cx="16" cy="16" r="6"/></svg>
                                              Schedule send
                                            </button>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>
                      </div>
                    </div>

<div id="hs-pro-intcm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-intcm-label">
                      <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all md:max-w-3xl md:w-full m-3 md:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
                        <div class="w-full max-h-full overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
                          
                          <div class="py-2.5 px-4 flex justify-between items-center border-b border-overlay-divider">
                            <h2 id="hs-pro-intcm-label" class="font-medium text-foreground">
                              New message
                            </h2>
                            <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-intcm">
                              <span class="sr-only">Close</span>
                              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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="p-0.5 pe-2 m-0.5 flex flex-nowrap items-center gap-x-1.5">
                                      <img class="shrink-0 size-6 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                      <div class="whitespace-nowrap text-sm text-foreground">
                                        James Collins
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="flex min-h-8.5 gap-x-2">
                                    <span class="mt-[7px] text-sm text-muted-foreground-1">
                                      To:
                                    </span>

<select  multiple data-hs-select='{
                                      "placeholder": "Enter email or name",
                                      "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                      "dropdownScope": "window",
                                      "dropdownPlacement": "bottom-left",
                                      "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                      "mode": "tags",
                                      "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                      "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                      "tagsInputId": "hs-pro-in1trtotcmdid1",
                                      "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                      "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                    }' class="hidden">
                                      <option value="">Choose</option>
                                      <option   value="1" data-hs-select-option='{
                                          "description": "schen@company.com",
                                          "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                        }'>Sarah Chen</option>
                                      <option   value="2" data-hs-select-option='{
                                          "description": "david1harris@example.com",
                                          "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                        }'>David Harrisom</option>
                                      <option   value="3" data-hs-select-option='{
                                          "description": "lewis@company.com",
                                          "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                        }'>Lewis Clarke</option>
                                      <option   value="4" data-hs-select-option='{
                                          "description": "isabella@site.com",
                                          "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                        }'>Isabella Lauda</option>
                                      <option   value="5" data-hs-select-option='{
                                          "description": "chrstiwilliams@site.so",
                                          "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                        }'>Christina Williams</option>
                                      <option   value="6" data-hs-select-option='{
                                          "description": "amanda@preline.so",
                                          "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                        }'>Amanda Harvey</option>
                                    </select>

</div>

<div id="hs-pro-in1trccccmdid1-heading" class="hs-collapse w-full overflow-hidden hidden" aria-labelledby="hs-pro-in1trccccmdid1" role="region">
                                    <div class="flex min-h-8.5 gap-x-2">
                                      <span class="mt-[7px] text-sm text-muted-foreground-1">
                                        Cc:
                                      </span>

<select  multiple data-hs-select='{
                                        "placeholder": "Enter email or name",
                                        "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "dropdownScope": "window",
                                        "dropdownPlacement": "bottom-left",
                                        "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                        "mode": "tags",
                                        "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                        "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                        "tagsInputId": "hs-pro-in1trcctcmdid1",
                                        "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                        "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                      }' class="hidden">
                                        <option value="">Choose</option>
                                        <option   value="1" data-hs-select-option='{
                                            "description": "schen@company.com",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                          }'>Sarah Chen</option>
                                        <option   value="2" data-hs-select-option='{
                                            "description": "david1harris@example.com",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>David Harrisom</option>
                                        <option   value="3" data-hs-select-option='{
                                            "description": "lewis@company.com",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>Lewis Clarke</option>
                                        <option   value="4" data-hs-select-option='{
                                            "description": "isabella@site.com",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                          }'>Isabella Lauda</option>
                                        <option   value="5" data-hs-select-option='{
                                            "description": "chrstiwilliams@site.so",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                          }'>Christina Williams</option>
                                        <option   value="6" data-hs-select-option='{
                                            "description": "amanda@preline.so",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>Amanda Harvey</option>
                                      </select>

</div>
                                  </div>

<div id="hs-pro-in1trbccccmdid1-heading" class="hs-collapse w-full overflow-hidden hidden" aria-labelledby="hs-pro-in1trbccccmdid1" role="region">
                                    <div class="flex min-h-8.5 gap-x-2">
                                      <span class="mt-[7px] text-sm text-muted-foreground-1">
                                        Bcc:
                                      </span>

<select  multiple data-hs-select='{
                                        "placeholder": "Enter email or name",
                                        "dropdownClasses": "mt-2 z-85 w-full max-w-xs max-h-72 p-1 bg-select border border-select-line rounded-lg shadow-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                                        "dropdownScope": "window",
                                        "dropdownPlacement": "bottom-left",
                                        "optionClasses": "py-1 px-2 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50",
                                        "mode": "tags",
                                        "wrapperClasses": "relative px-0.5 flex items-center flex-wrap text-nowrap w-full text-start text-sm",
                                        "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-1 bg-layer border border-layer-line rounded-full p-0.5 pe-1 m-0.5\"><div class=\"shrink-0 size-6 me-1.5\" data-icon></div><div class=\"whitespace-nowrap text-foreground\" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-1 rounded-full text-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus text-sm cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" 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></div></div>",
                                        "tagsInputId": "hs-pro-in1trbcctcmdid1",
                                        "tagsInputClasses": "py-0 px-2 rounded-lg grow order-1 sm:text-sm text-base outline-hidden bg-transparent border-transparent focus:ring-0 text-foreground placeholder:text-muted-foreground-1",
                                        "optionTemplate": "<div class=\"flex items-center\"><div class=\"shrink-0 size-6 me-3\" data-icon></div><div class=\"truncate\"><div class=\"text-sm text-foreground\" data-title></div><div class=\"truncate text-xs text-muted-foreground-1\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>"
                                      }' class="hidden">
                                        <option value="">Choose</option>
                                        <option   value="1" data-hs-select-option='{
                                            "description": "schen@company.com",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-surface-3 text-foreground-inverse rounded-full\">S</span>"
                                          }'>Sarah Chen</option>
                                        <option   value="2" data-hs-select-option='{
                                            "description": "david1harris@example.com",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>David Harrisom</option>
                                        <option   value="3" data-hs-select-option='{
                                            "description": "lewis@company.com",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>Lewis Clarke</option>
                                        <option   value="4" data-hs-select-option='{
                                            "description": "isabella@site.com",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-purple-500 text-foreground-inverse rounded-full\">I</span>"
                                          }'>Isabella Lauda</option>
                                        <option   value="5" data-hs-select-option='{
                                            "description": "chrstiwilliams@site.so",
                                            "icon": "<span class=\"inline-flex shrink-0 justify-center items-center size-6 text-xs uppercase bg-orange-500 text-foreground-inverse rounded-full\">C</span>"
                                          }'>Christina Williams</option>
                                        <option   value="6" data-hs-select-option='{
                                            "description": "amanda@preline.so",
                                            "icon": "<img class=\"shrink-0 rounded-full\" src=\"https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80\" alt=\"Avatar\">"
                                          }'>Amanda Harvey</option>
                                      </select>

</div>
                                  </div>
                                  
                                </div>

<button type="button" class="hs-collapse-toggle p-1 text-xs text-muted-foreground-2 rounded-md hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus open" id="hs-pro-in1trsbccmdid1" aria-expanded="true" aria-controls="hs-pro-in1trsbccmdid1-heading" data-hs-collapse="#hs-pro-in1trsbccmdid1-heading">
                                      Subject
                                    </button>
                                  </div>
                                  
                                </div>
                              </div>
                            </div>

<div id="hs-pro-in1trsbccmdid1-heading" class="hs-collapse w-full overflow-hidden open" aria-labelledby="hs-pro-in1trsbccmdid1" role="region">
                              <div class="py-2.5 px-4 flex items-center gap-x-3 border-b border-line-2">
                                <span class="text-sm text-muted-foreground-1">
                                  Subject:
                                </span>

<div class="grow">
                                  <input type="text" id="hs-pro-in1trsbincmdid1" class="p-0 block w-full bg-transparent border-transparent rounded-0 sm:text-sm text-base text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-transparent focus:ring-transparent disabled:opacity-50 disabled:pointer-events-none" >
                                  <label for="hs-pro-in1trsbincmdid1" class="sr-only">Subject</label>
                                </div>
                              </div>
                            </div>

<div id="hs-editor-tiptap-3">
                              <div data-hs-editor-field></div>

<div class="p-2 border-t border-line-2">
                                <div class="flex flex-wrap items-center gap-0.5">
                                  
                                  <div class="hs-dropdown [--auto-close:inside] [--placement:top-left] relative inline-flex">
                                    <div class="hs-tooltip [--placement:bottom] inline-block">
                                      <button id="hs-pro-in1trfocmdid1" type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                        <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16"/><path d="m6 16 6-12 6 12"/><path d="M8 12h8"/></svg>
                                        <span class="sr-only">Formatting options</span>
                                      </button>
                                      <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-60 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                        Formatting options
                                      </span>
                                    </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-65.5 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-line-2 rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1trfocmdid1">
                                      
                                      <div class="p-1">
                                        
                                        <div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-bold>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 12a4 4 0 0 0 0-8H6v8"/><path d="M15 20a4 4 0 0 0 0-8H6v8Z"/></svg>
                                            <span class="sr-only">Bold</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Bold
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-italic>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/></svg>
                                            <span class="sr-only">Italic</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Italic
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-underline>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/></svg>
                                            <span class="sr-only">Underline</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Underline
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-strike>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/></svg>
                                            <span class="sr-only">Strike</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Strike
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-ul>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>
                                            <span class="sr-only">Lists</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Lists
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-blockquote>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 6H3"/><path d="M21 12H8"/><path d="M21 18H8"/><path d="M3 12v6"/></svg>
                                            <span class="sr-only">Blockquote</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Blockquote
                                          </span>
                                        </div>

<div class="hs-tooltip [--placement:auto] inline-block">
                                          <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-code>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
                                            <span class="sr-only">Code</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            Code
                                          </span>
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>

<div class="hs-tooltip [--placement:bottom] inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-editor-link>
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Link
                                    </span>
                                  </div>
                                  
      
                                  
                                  <div class="hs-tooltip [--placement:bottom] inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11v1a10 10 0 1 1-9-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"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Add emoji
                                    </span>
                                  </div>
                                  
      
                                  
                                  <div class="hs-tooltip [--placement:bottom] inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Send voice message
                                    </span>
                                  </div>
                                  
        
                                  
                                  <div class="hs-tooltip [--placement:bottom] inline-block">
                                    <button type="button" class="hs-tooltip-toggle size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                    </button>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Delete
                                    </span>
                                  </div>
                                  
      
                                  <div class="ms-auto">
                                    
                                    <div class="inline-flex items-center -space-x-px">
                                      
                                      <button type="button" class="py-1.5 px-2.5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-s-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus focus:z-10">
                                        Send
                                      </button>

<div class="hs-dropdown [--auto-close:inside] [--placement:top-right] relative inline-flex border-s border-line-7/50">
                                        <div class="hs-tooltip [--placement:bottom-right] inline-block">
                                          <button id="hs-pro-in1trsbgwmcmdid1" type="button" class="hs-tooltip-toggle size-8.5 inline-flex justify-center items-center gap-x-1.5 font-medium text-sm rounded-e-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus focus:z-10">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                            <span class="sr-only">More send options</span>
                                          </button>
                                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-60 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                            More send options
                                          </span>
                                        </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-40 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-in1trsbgwmcmdid1">
                                          
                                          <div class="p-1">
                                            <button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>
                                              Send
                                            </button>

<button type="button" class="w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.3V14"/><circle cx="16" cy="16" r="6"/></svg>
                                              Schedule send
                                            </button>
                                          </div>
                                          
                                        </div>
                                        
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>
                      </div>
                    </div>

window.addEventListener('load', () => {
                          layoutSplitter = HSLayoutSplitter.getInstance('#hs-main-layout-splitter', true);

updateLayoutSplitter(layoutSplitter.element);

(function () {
                            const unassigedTabs = document.querySelectorAll('#hs-pro-tabs-intltg-unassigned [data-hs-tab] button');

unassigedTabs.forEach((el) => {
                              el.addEventListener('click', (evt) => evt.stopPropagation());
                            });
                          })();
                        });

window.addEventListener('resize', _.debounce(() => {
                          if (layoutSplitter) updateLayoutSplitter(layoutSplitter.element);
                        }));
                      })();
                    </script>

window.addEventListener('change.hs.tab', (evt) => {
                    				if (!evt.target.closest('#hs-pro-tabs-intltg-unassigned')) return false;

if (window.innerWidth < parseInt(resolution)) sidebar.element.close();
                    			});
                    		})();
                    	});
                    </script>

const ids = '#hs-editor-tiptap-1 #hs-editor-tiptap-2 #hs-editor-tiptap-3';
                      const editors = ids.split(' ');

editors.forEach((id) => {
                        const editor = new Editor({
                          element: document.querySelector(`${id} [data-hs-editor-field]`),
                          editorProps: {
                            attributes: {
                              class: 'relative min-h-56 p-4'
                            }
                          },
                          extensions: [
                            StarterKit.configure({
                              history: false
                            }),
                            Placeholder.configure({
                              placeholder: 'Add a message...',
                              emptyNodeClass: 'before:text-muted-foreground'
                            }),
                            Paragraph.configure({
                              HTMLAttributes: {
                                class: 'text-sm text-foreground'
                              }
                            }),
                            Bold.configure({
                              HTMLAttributes: {
                                class: 'font-bold'
                              }
                            }),
                            Underline,
                            Link.configure({
                              HTMLAttributes: {
                                class: 'inline-flex items-center gap-x-1 text-primary decoration-2 hover:underline font-medium'
                              }
                            }),
                            BulletList.configure({
                              HTMLAttributes: {
                                class: 'list-disc list-inside text-foreground'
                              }
                            }),
                            OrderedList.configure({
                              HTMLAttributes: {
                                class: 'list-decimal list-inside text-foreground'
                              }
                            }),
                            ListItem.configure({
                              HTMLAttributes: {
                                class: 'marker:text-sm'
                              }
                            }),
                            Blockquote.configure({
                              HTMLAttributes: {
                                class: 'relative border-s-4 ps-4 sm:ps-6 border-line-2 sm:[&>p]:text-lg'
                              }
                            })
                          ]
                        });
                        const actions = [
                          {
                            id: `${id} [data-hs-editor-bold]`,
                            fn: () => editor.chain().focus().toggleBold().run()
                          },
                          {
                            id: `${id} [data-hs-editor-italic]`,
                            fn: () => editor.chain().focus().toggleItalic().run()
                          },
                          {
                            id: `${id} [data-hs-editor-underline]`,
                            fn: () => editor.chain().focus().toggleUnderline().run()
                          },
                          {
                            id: `${id} [data-hs-editor-strike]`,
                            fn: () => editor.chain().focus().toggleStrike().run()
                          },
                          {
                            id: `${id} [data-hs-editor-link]`,
                            fn: () => {
                              const url = window.prompt('URL');
                              editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
                            }
                          },
                          {
                            id: `${id} [data-hs-editor-ol]`,
                            fn: () => editor.chain().focus().toggleOrderedList().run()
                          },
                          {
                            id: `${id} [data-hs-editor-ul]`,
                            fn: () => editor.chain().focus().toggleBulletList().run()
                          },
                          {
                            id: `${id} [data-hs-editor-blockquote]`,
                            fn: () => editor.chain().focus().toggleBlockquote().run()
                          },
                          {
                            id: `${id} [data-hs-editor-code]`,
                            fn: () => editor.chain().focus().toggleCode().run()
                          }
                        ];

actions.forEach(({ id, fn }) => {
                          const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                        });
                      });
                    </script>

Open related shared inbox template