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.

<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="index.html" 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 top-13.5 inset-s-0 z-59 w-80 lg:w-auto lg:static 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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