<!DOCTYPE html>
<html lang="en" class="relative min-h-full">
<head>
  <!-- Required Meta Tags Always Come First -->
  <meta charset="utf-8">
  <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
  <link rel="canonical" href="https://preline.co/">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Experience the AI Chat demo: a modern conversational assistant, designed to help you with questions, ideas, and productivity.">

  <meta name="twitter:site" content="@preline">
  <meta name="twitter:creator" content="@preline">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="AI Chat | Preline Pro | Preline UI, crafted with Tailwind CSS">
  <meta name="twitter:description" content="Experience the AI Chat demo: a modern conversational assistant, designed to help you with questions, ideas, and productivity.">
  <meta name="twitter:image" content="https://preline.co/assets/img/og-image.png">

  <meta property="og:url" content="https://preline.co/">
  <meta property="og:locale" content="en_US">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Preline">
  <meta property="og:title" content="AI Chat | Preline Pro | Preline UI, crafted with Tailwind CSS">
  <meta property="og:description" content="Experience the AI Chat demo: a modern conversational assistant, designed to help you with questions, ideas, and productivity.">
  <meta property="og:image" content="https://preline.co/assets/img/og-image.png">

  <!-- Title -->
  <title>AI Chat | Preline Pro | Preline UI, crafted with Tailwind CSS</title>

  <!-- Favicon -->
  <link rel="shortcut icon" href="../../favicon.ico">

  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kode+Mono:wght@400..700&display=swap" rel="stylesheet">

  <!-- Theme Check and Update -->
  <script>
    (function () {
      const html = document.querySelector('html');
      const isLightOrAuto = localStorage.getItem('hs_theme') === 'light' || (localStorage.getItem('hs_theme') === 'auto' && !window.matchMedia('(prefers-color-scheme: dark)').matches);
      const isDarkOrAuto = localStorage.getItem('hs_theme') === 'dark' || (localStorage.getItem('hs_theme') === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);

      if (isLightOrAuto && html.classList.contains('dark')) html.classList.remove('dark');
      else if (isDarkOrAuto && html.classList.contains('light')) html.classList.remove('light');
      else if (isDarkOrAuto && !html.classList.contains('dark')) html.classList.add('dark');
      else if (isLightOrAuto && !html.classList.contains('light')) html.classList.add('light');
    })();
  </script>

  <!-- CSS Preline -->
  <link rel="stylesheet" href="https://preline.co/assets/css/main.css?v=3.0.1">
</head>

<body class="bg-background">
  <!-- ========== MAIN SIDEBAR ========== -->
  <!-- Sidebar -->
  <div id="hs-pro-sidebar" class="hs-overlay [--auto-close:md]
  hs-overlay-open:translate-x-0
  -translate-x-full transition-all duration-300 transform
  w-65 hs-overlay-minified:w-13 overflow-hidden
  hidden
  fixed inset-y-0 z-60 inset-s-0
  bg-sidebar border-e border-sidebar-line
  md:block md:translate-x-0 md:end-auto md:bottom-0" role="dialog" tabindex="-1" aria-label="Sidebar">
    <div class="relative flex flex-col h-full max-h-full">
      <!-- Header -->
      <header class="py-2.5 px-4 flex justify-between items-center gap-x-2">
        <div class="-ms-2 flex items-center gap-x-1">
          <div class="md:hs-overlay-minified:hidden">
            <a class="shrink-0 inline-flex justify-center items-center size-9 rounded-lg text-xl inline-block font-semibold hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="index.html" aria-label="Preline">
              <svg class="shrink-0 size-5 text-primary" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0835 3.23358C9.88316 3.23358 3.23548 9.8771 3.23548 18.0723V35.5832H0.583496V18.0723C0.583496 8.41337 8.41851 0.583252 18.0835 0.583252C27.7485 0.583252 35.5835 8.41337 35.5835 18.0723C35.5835 27.7312 27.7485 35.5614 18.0835 35.5614H16.7357V32.911H18.0835C26.2838 32.911 32.9315 26.2675 32.9315 18.0723C32.9315 9.8771 26.2838 3.23358 18.0835 3.23358Z" fill="currentColor" />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0833 8.62162C12.8852 8.62162 8.62666 12.9245 8.62666 18.2879V35.5833H5.97468V18.2879C5.97468 11.5105 11.3713 5.97129 18.0833 5.97129C24.7954 5.97129 30.192 11.5105 30.192 18.2879C30.192 25.0653 24.7954 30.6045 18.0833 30.6045H16.7355V27.9542H18.0833C23.2815 27.9542 27.54 23.6513 27.54 18.2879C27.54 12.9245 23.2815 8.62162 18.0833 8.62162Z" fill="currentColor" />
                <path d="M24.8225 18.1012C24.8225 21.8208 21.8053 24.8361 18.0833 24.8361C14.3614 24.8361 11.3442 21.8208 11.3442 18.1012C11.3442 14.3815 14.3614 11.3662 18.0833 11.3662C21.8053 11.3662 24.8225 14.3815 24.8225 18.1012Z" fill="currentColor" />
              </svg>
            </a>
          </div>

          <!-- Sidebar Toggle -->
          <button type="button" class="hidden md:hs-overlay-minified:flex justify-center items-center flex-none gap-x-3 size-9 text-sm text-muted-foreground-1 rounded-lg hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="true" aria-controls="hs-pro-sidebar" aria-label="Minify navigation" data-hs-overlay-minifier="#hs-pro-sidebar">
            <svg class="hidden hs-overlay-minified:block 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="18" height="18" x="3" y="3" rx="2"></rect>
              <path d="M15 3v18"></path>
              <path d="m8 9 3 3-3 3"></path>
            </svg>
            <svg class="hs-overlay-minified:hidden 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="18" height="18" x="3" y="3" rx="2"></rect>
              <path d="M15 3v18"></path>
              <path d="m10 15-3-3 3-3"></path>
            </svg>
            <span class="sr-only">Sidebar Toggle</span>
          </button>
          <!-- End Sidebar Toggle -->

          <div class="hidden sm:block md:hs-overlay-minified:hidden">
            <!-- Templates Dropdown -->
            <div class="hs-dropdown  relative  [--scope:window] [--auto-close:inside] inline-flex">
              <button id="hs-dropdown-preview-navbar" type="button" class="hs-dropdown-toggle  group relative flex justify-center items-center size-8 text-xs rounded-lg text-foreground hover:bg-muted-hover focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                <span class="">
                  <svg class=" size-4 shrink-0" xmlns="http://www.w3.org/2000/svg" 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="absolute -top-0.5 -inset-e-0.5">
                  <span class="relative flex">
                    <span class="animate-ping absolute inline-flex size-full rounded-[999px] bg-red-400 dark:bg-red-600 opacity-75"></span>
                    <span class="relative inline-flex size-2 bg-red-500 rounded-[999px]"></span>
                    <span class="sr-only">Notification</span>
                  </span>
                </span>
              </button>

              <!-- Dropdown -->
              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-full min-w-90 md:w-125 transition-[opacity,margin] duration opacity-0 hidden z-61 overflow-hidden border border-gray-200 bg-white rounded-[12px] shadow-xl dark:bg-neutral-800 dark:border-neutral-700" role="menu" aria-orientation="vertical" aria-labelledby="hs-dropdown-preview-navbar">
                <!-- Tab -->
                <div class="p-3 pb-0 flex flex-wrap justify-between items-center gap-3 border-b border-gray-200 dark:border-neutral-700">
                  <!-- Nav Tab -->
                  <nav class="flex gap-1" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                    <button type="button" class="hs-tab-active:after:bg-gray-800 hs-tab-active:text-gray-800 px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-gray-100 text-gray-500 hover:text-gray-800 text-sm rounded-[8px] disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none dark:hs-tab-active:text-neutral-200 dark:hs-tab-active:after:bg-neutral-400 dark:text-neutral-500 dark:hover:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pmn-item-pro" aria-selected="false" data-hs-tab="#hs-pmn-pro" aria-controls="hs-pmn-pro" role="tab">
                      Pro
                    </button>
                    <button type="button" class="hs-tab-active:after:bg-gray-800 hs-tab-active:text-gray-800 px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-gray-100 text-gray-500 hover:text-gray-800 text-sm rounded-[8px] disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none dark:hs-tab-active:text-neutral-200 dark:hs-tab-active:after:bg-neutral-400 dark:text-neutral-500 dark:hover:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pmn-item-free" aria-selected="true" data-hs-tab="#hs-pmn-free" aria-controls="hs-pmn-free" role="tab">
                      Free
                    </button>
                    <button type="button" class="hs-tab-active:after:bg-gray-800 hs-tab-active:text-gray-800 px-2 py-1.5 mb-2 relative inline-flex justify-center items-center gap-x-2 hover:bg-gray-100 text-gray-500 hover:text-gray-800 text-sm rounded-[8px] disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100 after:absolute after:-bottom-2 after:inset-x-2 after:z-10 after:h-0.5 after:pointer-events-none dark:hs-tab-active:text-neutral-200 dark:hs-tab-active:after:bg-neutral-400 dark:text-neutral-500 dark:hover:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pmn-item-theme" aria-selected="false" data-hs-tab="#hs-pmn-theme" aria-controls="hs-pmn-theme" role="tab">
                      Themes
                      <span class="py-0.5 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-emerald-100 text-emerald-800 rounded-[999px] dark:bg-emerald-900 dark:text-emerald-500">New</span>
                    </button>
                  </nav>
                  <!-- End Nav Tab -->

                  <!-- Switch/Toggle -->
                  <div class="mb-2 flex items-center gap-x-0.5">
                    <button type="button" class="hs-dark-mode hs-dark-mode-active:hidden flex shrink-0 justify-center items-center gap-x-1 text-xs text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-theme-click-value="dark">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" 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 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
                      </svg>
                      Switch to Dark
                    </button>
                    <button type="button" class="hs-dark-mode hs-dark-mode-active:flex hidden shrink-0 justify-center items-center gap-x-1 text-xs text-gray-500 hover:text-gray-800 focus:outline-hidden focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-theme-click-value="light">
                      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/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="4"></circle>
                        <path d="M12 2v2"></path>
                        <path d="M12 20v2"></path>
                        <path d="m4.93 4.93 1.41 1.41"></path>
                        <path d="m17.66 17.66 1.41 1.41"></path>
                        <path d="M2 12h2"></path>
                        <path d="M20 12h2"></path>
                        <path d="m6.34 17.66-1.41 1.41"></path>
                        <path d="m19.07 4.93-1.41 1.41"></path>
                      </svg>
                      Switch to Light
                    </button>
                  </div>
                  <!-- End Switch/Toggle -->
                </div>
                <!-- End Tab -->

                <!-- Tab Content -->
                <div id="hs-pmn-pro" class="hidden" role="tabpanel" aria-labelledby="hs-pmn-item-pro">
                  <!-- Header -->
                  <div class="p-3 flex flex-wrap justify-between items-center gap-3">
                    <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Templates (21)</span>
                  </div>
                  <!-- End Header -->

                  <!-- Body -->
                  <div class="px-3 h-64 sm:h-102 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
                    <!-- Grid -->
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/dashboard/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img1.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img1.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Dashboard
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/cms/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img55.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img55.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          CMS
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/ai-chat/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img58.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img58.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          AI Chat
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/video-call/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img61.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img61.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Video Call
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/startup/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img32.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img32.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Startup
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/payment/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img8.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img8.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Payment
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/chat/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img16.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img16.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Chat
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/shop/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img21.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img21.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Shop
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/ecommerce/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img4.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img4.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          E-Commerce
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/agency/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img46.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img46.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Agency
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/crm/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img11.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img11.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          CRM
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/workspace/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img18.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img18.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Workspace
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/analytics/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img9.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img9.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Analytics
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/calendars/day.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img14.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img14.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Calendars
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/smart-home/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img35.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img35.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Smart Home
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/coffee-shop/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img52.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img52.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Coffee Shop
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/inbox/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img26.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img26.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Inbox
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/project/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img10.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img10.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Project
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/shop-marketplace/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img29.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img29.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Shop Marketplace
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/personal/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img49.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img49.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Personal
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/pro/files/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews/img12.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/demo-previews-dark/img12.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Files
                        </p>
                      </a>
                      <!-- End Link -->
                    </div>
                    <!-- End Grid -->
                  </div>
                  <!-- Body -->

                  <!-- Footer -->
                  <div class="p-3">
                    <a class="group p-2 rounded-[6px] flex justify-center items-center gap-x-1 text-[13px] bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-900 dark:bg-white dark:hover:bg-neutral-200 dark:focus:bg-neutral-200 dark:text-neutral-800" href="https://preline.co/pro/pricing.html">
                      Purchase Preline Pro
                      <svg class="hidden md:inline-block shrink-0 size-3.5 group-hover:translate-x-0.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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lg:transition" d="M5 12h14" />
                        <path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lg:transition" d="m12 5 7 7-7 7" />
                      </svg>
                    </a>
                  </div>
                  <!-- End Footer -->
                </div>
                <!-- End Tab Content -->

                <!-- Tab Content -->
                <div id="hs-pmn-free" class="" role="tabpanel" aria-labelledby="hs-pmn-item-free">
                  <!-- Header -->
                  <div class="p-3 flex flex-wrap justify-between items-center gap-3">
                    <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Templates (5)</span>
                  </div>
                  <!-- End Header -->

                  <!-- Body -->
                  <div class="px-3 h-64 sm:h-102 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
                    <!-- Grid -->
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/templates/agency/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img1.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img1.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Agency
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 bg-gray-100 dark:bg-neutral-700 transition" href="https://preline.co/templates/ai-chat/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img4.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img4.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          AI Chat
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/templates/cms/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img5.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img5.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          CMS
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/templates/coffee-shop/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img2.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img2.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Coffee Shop
                        </p>
                      </a>
                      <!-- End Link -->

                      <!-- Link -->
                      <a class="p-3 relative flex flex-col justify-center items-center gap-y-3 rounded-[12px] hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700  transition" href="https://preline.co/templates/personal/index.html">
                        <img class="dark:hidden w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews/img3.webp" alt="Main Page">
                        <img class="hidden dark:block w-28 border border-gray-100 rounded-[8px] shadow-xs dark:border-neutral-700" src="https://preline.co/assets/img/template-previews-dark/img3.webp" alt="Main Page">

                        <p class="text-sm text-center text-gray-800 dark:text-neutral-400">
                          Personal
                        </p>
                      </a>
                      <!-- End Link -->
                    </div>
                    <!-- End Grid -->
                  </div>
                  <!-- Body -->

                  <!-- Footer -->
                  <div class="p-3">
                    <a class="group p-2 rounded-[6px] flex justify-center items-center gap-x-1 text-[13px] bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-900 dark:bg-white dark:hover:bg-neutral-200 dark:focus:bg-neutral-200 dark:text-neutral-800" href="https://preline.co/templates.html">
                      Free download
                      <svg class="hidden md:inline-block shrink-0 size-3.5 group-hover:translate-x-0.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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lg:transition" d="M5 12h14" />
                        <path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lg:transition" d="m12 5 7 7-7 7" />
                      </svg>
                    </a>
                  </div>
                  <!-- End Footer -->
                </div>
                <!-- End Tab Content -->

                <!-- Tab Content -->
                <div id="hs-pmn-theme" class="hidden" role="tabpanel" aria-labelledby="hs-pmn-item-theme">
                  <!-- Header -->
                  <div class="p-3 flex flex-wrap justify-between items-center gap-3">
                    <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Themes</span>
                  </div>
                  <!-- End Header -->

                  <!-- Body -->
                  <div class="px-3 h-64 sm:h-102 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
                    <!-- Grid -->
                    <div class="py-px grid grid-cols-2 md:grid-cols-3 gap-1" data-hs-global-color-theme>

                      <!-- Checkbox -->
                      <label for="hs-pro-tps-default-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-default-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="default" checked>
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-blue-600 dark:bg-blue-500"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Default">
                            Default
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox --><!-- Checkbox -->
                      <label for="hs-pro-tps-harvest-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-harvest-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="harvest">
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white dark:text-amber-900 rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-amber-700 dark:bg-amber-300"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Harvest">
                            Harvest
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox --><!-- Checkbox -->
                      <label for="hs-pro-tps-retro-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-retro-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="retro">
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-fuchsia-500"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Retro">
                            Retro
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox --><!-- Checkbox -->
                      <label for="hs-pro-tps-ocean-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-ocean-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="ocean">
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-cyan-600 dark:bg-cyan-500"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Ocean">
                            Ocean
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox --><!-- Checkbox -->
                      <label for="hs-pro-tps-autumn-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-autumn-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="autumn">
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white dark:text-amber-800 rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-amber-500 dark:bg-amber-200"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Autumn">
                            Autumn
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox --><!-- Checkbox -->
                      <label for="hs-pro-tps-moon-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-moon-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="moon">
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-gray-800 dark:bg-neutral-900"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Moon">
                            Moon
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox --><!-- Checkbox -->
                      <label for="hs-pro-tps-bubblegum-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-bubblegum-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="bubblegum">
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-pink-600 dark:bg-pink-500"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Bubblegum">
                            Bubblegum
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox --><!-- Checkbox -->
                      <label for="hs-pro-tps-cashmere-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-cashmere-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="cashmere">
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-mauve-500"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Cashmere">
                            Cashmere
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox --><!-- Checkbox -->
                      <label for="hs-pro-tps-olive-@@previewMode.themes.id" class="group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                        <input type="radio" id="hs-pro-tps-olive-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id" value="olive">
                        <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                          <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="3" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6 9 17l-5-5" />
                          </svg>
                        </span>
                        <span class="flex shrink-0 justify-center items-center size-5 rounded-[6px] bg-avocado-500"></span>
                        <span class="grow truncate">
                          <span class="block truncate" title="Olive">
                            Olive
                          </span>
                        </span>
                      </label>
                      <!-- End Checkbox -->

                    </div>
                    <!-- End Grid -->

                    <div class="pt-4 mt-4 border-t border-gray-200 dark:border-neutral-700">
                      <!-- Header -->
                      <div class="py-3 flex items-center gap-2">
                        <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Branding Colors</span>

                        <div class="hs-tooltip [--placement:top] inline-block">
                          <svg class="hs-tooltip-toggle shrink-0 size-4 text-muted-foreground" xmlns="http://www.w3.org/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>
                          <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-70 max-w-70 text-center py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                            Branding colors are shown for demonstration purposes and sometimes may not match the predefined Theme colors exactly.
                          </span>
                        </div>
                      </div>
                      <!-- End Header -->

                      <!-- Grid -->
                      <div class="py-px flex flex-wrap gap-1" data-hs-global-brand>

                        <!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-red-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-red-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="red">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-red-600 dark:bg-red-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Red
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-orange-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-orange-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="orange">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-orange-600 dark:bg-orange-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Orange
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-amber-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-amber-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="amber">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white dark:text-black rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-amber-700 dark:bg-amber-300"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Amber
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-yellow-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-yellow-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="yellow">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-yellow-600 dark:bg-yellow-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Yellow
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-lime-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-lime-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="lime">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-lime-600 dark:bg-lime-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Lime
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-green-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-green-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="green">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-green-600 dark:bg-green-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Green
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-emerald-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-emerald-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="emerald">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-emerald-600 dark:bg-emerald-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Emerald
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-teal-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-teal-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="teal">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-teal-600 dark:bg-teal-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Teal
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-cyan-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-cyan-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="cyan">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-cyan-600 dark:bg-cyan-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Cyan
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-sky-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-sky-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="sky">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-sky-600 dark:bg-sky-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Sky
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-blue-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-blue-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="blue">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-blue-600 dark:bg-blue-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Blue
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-indigo-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-indigo-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="indigo">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-indigo-600 dark:bg-indigo-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Indigo
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-violet-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-violet-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="violet">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-violet-600 dark:bg-violet-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Violet
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-purple-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-purple-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="purple">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-purple-600 dark:bg-purple-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Purple
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-fuchsia-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-fuchsia-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="fuchsia">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-fuchsia-600 dark:bg-fuchsia-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Fuchsia
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-pink-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-pink-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="pink">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-pink-600 dark:bg-pink-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Pink
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-rose-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-rose-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="rose">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-rose-600 dark:bg-rose-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Rose
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-khaki-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-khaki-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="khaki">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-khaki-600 dark:bg-khaki-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Khaki
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-mauve-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-mauve-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="mauve">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-mauve-600 dark:bg-mauve-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Mauve
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-gray-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-gray-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="gray">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-gray-800 dark:bg-neutral-900"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              <span class="dark:hidden">Gray</span><span class="dark:block hidden">Neutral</span>
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <div class="hs-tooltip [--placement:top] inline-block">
                          <label for="hs-pro-tps-avocado-@@previewMode.themes.id" class="hs-tooltip-toggle group relative p-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[999px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                            <input type="radio" id="hs-pro-tps-avocado-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tps-@@previewMode.themes.id-branding" value="avocado">
                            <span class="absolute top-1/2 inset-s-2.5 -translate-y-1/2 size-4 flex shrink-0 justify-center items-center text-white rounded-[999px] opacity-0 scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100">
                              <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="3" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20 6 9 17l-5-5" />
                              </svg>
                            </span>
                            <span class="flex shrink-0 justify-center items-center size-5 rounded-[999px] bg-avocado-600 dark:bg-avocado-500"></span>
                            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-70 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                              Avocado
                            </span>
                          </label>
                        </div>
                        <!-- End Checkbox -->

                      </div>
                      <!-- End Grid -->
                    </div>

                    <div class="pt-4 mt-4 border-t border-gray-200 dark:border-neutral-700">
                      <!-- Header -->
                      <div class="py-3 flex items-center gap-2">
                        <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200">Fonts</span>
                      </div>
                      <!-- End Header -->

                      <!-- Grid -->
                      <div class="py-px flex flex-wrap gap-2" data-hs-global-font>

                        <!-- Checkbox -->
                        <label for="hs-pro-tps-sans-@@previewMode.themes.id" class="group relative py-1.5 px-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-sans-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tfps-@@previewMode.themes.id" value="sans">
                          <span class="size-8 flex shrink-0 justify-center items-center text-black bg-gray-200 rounded-[6px] border-b border-gray-300 dark:bg-neutral-700 dark:text-white dark:border-neutral-600">
                            <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 12.069999694824219 56.88999938964844 37.01000213623047" data-asc="0.96875" width="56.88999938964844" height="37.01000213623047">
                              <defs />
                              <g fill="currentColor">
                                <g transform="translate(0, 0)">
                                  <path d="M4.62 48.44L0 48.44L13.35 12.07L17.90 12.07L31.25 48.44L26.63 48.44L15.77 17.83L15.48 17.83L4.62 48.44M6.32 34.23L24.93 34.23L24.93 38.14L6.32 38.14L6.32 34.23ZM44.39 49.08Q41.80 49.08 39.68 48.09Q37.57 47.11 36.33 45.23Q35.09 43.36 35.09 40.70Q35.09 38.35 36.01 36.89Q36.93 35.42 38.48 34.59Q40.02 33.75 41.89 33.34Q43.77 32.92 45.67 32.67Q48.15 32.35 49.71 32.18Q51.26 32.01 51.98 31.61Q52.70 31.20 52.70 30.18L52.70 30.04Q52.70 27.41 51.27 25.96Q49.84 24.50 46.95 24.50Q43.95 24.50 42.24 25.82Q40.54 27.13 39.84 28.62L35.87 27.20Q36.93 24.72 38.72 23.32Q40.50 21.93 42.62 21.37Q44.74 20.81 46.80 20.81Q48.12 20.81 49.83 21.12Q51.54 21.43 53.15 22.39Q54.76 23.35 55.82 25.28Q56.89 27.22 56.89 30.47L56.89 48.44L52.70 48.44L52.70 44.74L52.49 44.74Q52.06 45.63 51.07 46.64Q50.07 47.66 48.42 48.37Q46.77 49.08 44.39 49.08M45.03 45.31Q47.51 45.31 49.23 44.34Q50.94 43.36 51.82 41.81Q52.70 40.27 52.70 38.57L52.70 34.73Q52.43 35.05 51.54 35.31Q50.64 35.56 49.48 35.75Q48.31 35.94 47.22 36.07Q46.13 36.20 45.45 36.29Q43.82 36.51 42.41 36.98Q41.00 37.45 40.14 38.38Q39.28 39.31 39.28 40.91Q39.28 43.09 40.90 44.20Q42.52 45.31 45.03 45.31Z" />
                                </g>
                              </g>
                            </svg>
                          </span>
                          <span class="grow truncate">
                            <span class="block truncate">
                              <svg class="w-auto h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 11.579999923706055 110.16000366210938 37.5" data-asc="0.96875" width="110.16000366210938" height="37.5">
                                <defs />
                                <g fill="currentColor">
                                  <g transform="translate(0, 0)">
                                    <path d="M21.45 21.16Q21.13 18.47 18.86 16.97Q16.58 15.48 13.28 15.48Q10.87 15.48 9.06 16.26Q7.26 17.05 6.26 18.41Q5.26 19.78 5.26 21.52Q5.26 22.98 5.96 24.01Q6.66 25.05 7.76 25.74Q8.86 26.42 10.07 26.86Q11.27 27.29 12.29 27.56L15.98 28.55Q17.40 28.92 19.15 29.58Q20.90 30.24 22.51 31.37Q24.11 32.49 25.16 34.25Q26.21 36.01 26.21 38.57Q26.21 41.51 24.67 43.89Q23.14 46.27 20.20 47.67Q17.26 49.08 13.07 49.08Q9.16 49.08 6.31 47.82Q3.46 46.56 1.84 44.30Q0.21 42.05 0 39.06L4.55 39.06Q4.72 41.12 5.94 42.46Q7.16 43.80 9.03 44.45Q10.90 45.10 13.07 45.10Q15.59 45.10 17.60 44.27Q19.60 43.45 20.77 41.97Q21.95 40.48 21.95 38.49Q21.95 36.68 20.93 35.55Q19.92 34.41 18.27 33.70Q16.62 32.99 14.70 32.46L10.23 31.18Q5.97 29.95 3.48 27.68Q0.99 25.41 0.99 21.73Q0.99 18.68 2.65 16.40Q4.31 14.12 7.13 12.85Q9.94 11.58 13.42 11.58Q16.94 11.58 19.67 12.83Q22.41 14.08 24.01 16.25Q25.62 18.41 25.71 21.16L21.45 21.16ZM40.91 49.08Q38.32 49.08 36.20 48.09Q34.09 47.11 32.85 45.23Q31.61 43.36 31.61 40.70Q31.61 38.35 32.53 36.89Q33.45 35.42 35.00 34.59Q36.54 33.75 38.41 33.34Q40.29 32.92 42.19 32.67Q44.67 32.35 46.23 32.18Q47.78 32.01 48.50 31.61Q49.22 31.20 49.22 30.18L49.22 30.04Q49.22 27.41 47.79 25.96Q46.36 24.50 43.47 24.50Q40.47 24.50 38.76 25.82Q37.06 27.13 36.36 28.62L32.39 27.20Q33.45 24.72 35.24 23.32Q37.02 21.93 39.14 21.37Q41.26 20.81 43.32 20.81Q44.64 20.81 46.35 21.12Q48.06 21.43 49.67 22.39Q51.28 23.35 52.34 25.28Q53.41 27.22 53.41 30.47L53.41 48.44L49.22 48.44L49.22 44.74L49.01 44.74Q48.58 45.63 47.59 46.64Q46.59 47.66 44.94 48.37Q43.29 49.08 40.91 49.08M41.55 45.31Q44.03 45.31 45.75 44.34Q47.46 43.36 48.34 41.81Q49.22 40.27 49.22 38.57L49.22 34.73Q48.95 35.05 48.06 35.31Q47.16 35.56 46.00 35.75Q44.83 35.94 43.74 36.07Q42.65 36.20 41.97 36.29Q40.34 36.51 38.93 36.98Q37.52 37.45 36.66 38.38Q35.80 39.31 35.80 40.91Q35.80 43.09 37.42 44.20Q39.04 45.31 41.55 45.31ZM65.27 32.03L65.27 48.44L61.08 48.44L61.08 21.16L65.13 21.16L65.13 25.43L65.48 25.43Q66.44 23.35 68.39 22.08Q70.35 20.81 73.44 20.81Q76.21 20.81 78.28 21.94Q80.36 23.06 81.52 25.35Q82.67 27.63 82.67 31.11L82.67 48.44L78.48 48.44L78.48 31.39Q78.48 28.18 76.81 26.38Q75.14 24.57 72.23 24.57Q70.22 24.57 68.65 25.44Q67.08 26.31 66.18 27.98Q65.27 29.65 65.27 32.03ZM109.66 27.27L105.89 28.34Q105.54 27.40 104.86 26.50Q104.17 25.60 103.00 25.02Q101.83 24.43 100.00 24.43Q97.50 24.43 95.84 25.58Q94.18 26.72 94.18 28.48Q94.18 30.04 95.31 30.95Q96.45 31.85 98.86 32.46L102.91 33.45Q106.57 34.34 108.36 36.16Q110.16 37.98 110.16 40.84Q110.16 43.18 108.82 45.03Q107.48 46.88 105.08 47.94Q102.68 49.01 99.50 49.01Q95.33 49.01 92.60 47.19Q89.86 45.38 89.13 41.90L93.11 40.91Q93.68 43.11 95.27 44.21Q96.86 45.31 99.43 45.31Q102.36 45.31 104.09 44.06Q105.82 42.81 105.82 41.05Q105.82 39.63 104.83 38.66Q103.84 37.70 101.78 37.22L97.23 36.15Q93.48 35.26 91.73 33.39Q89.99 31.52 89.99 28.69Q89.99 26.38 91.29 24.61Q92.60 22.83 94.86 21.82Q97.12 20.81 100.00 20.81Q104.05 20.81 106.37 22.59Q108.68 24.36 109.66 27.27Z" />
                                  </g>
                                </g>
                              </svg>
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-serif-@@previewMode.themes.id" class="group relative py-1.5 px-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-serif-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tfps-@@previewMode.themes.id" value="serif">
                          <span class="size-8 flex shrink-0 justify-center items-center text-black bg-gray-200 rounded-[6px] border-b border-gray-300 dark:bg-neutral-700 dark:text-white dark:border-neutral-600">
                            <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 8.5 63.04999923706055 37" data-asc="0.9" width="63.04999923706055" height="37">
                              <defs />
                              <g fill="currentColor">
                                <g transform="translate(0, 0)">
                                  <path d="M26.95 41.80L24.00 32.90L10.60 32.90L7.55 41.80L11.70 42.85L11.70 45L0 45L0 42.85L4.10 41.80L16.10 8.50L20.75 8.50L32.60 41.80L36.60 42.85L36.60 45L22.85 45L22.85 42.85L26.95 41.80M17.45 12.95L11.60 30L23.05 30L17.65 12.95L17.45 12.95ZM38.30 39.15Q38.30 35.25 41.95 33Q45.60 30.75 54.05 29.50Q53.85 26.55 53.50 24.90Q53.15 23.25 52.60 22.25Q51.90 20.95 50.65 20.32Q49.40 19.70 47.95 19.70Q46.55 19.70 45.43 20.20Q44.30 20.70 43.90 21.55Q44.60 22.05 44.93 22.85Q45.25 23.65 45.25 24.35Q45.25 25.60 44.43 26.32Q43.60 27.05 42.40 27.05Q41.20 27.05 40.43 26.25Q39.65 25.45 39.65 24Q39.65 21.90 41.10 20.45Q42.55 19 44.78 18.25Q47.00 17.50 49.25 17.50Q51.30 17.50 53.03 18.13Q54.75 18.75 55.95 19.95Q59.05 23.05 59.05 30.95L59.05 38.20Q59.05 40.65 59.38 41.60Q59.70 42.55 60.80 42.55L63.05 42.55L63.05 44.05Q59.45 45.50 57.45 45.50Q55.90 45.50 55.38 44.38Q54.85 43.25 54.85 40.05L54.65 40.05Q53.10 42.60 50.55 44.05Q48.00 45.50 45.05 45.50Q41.90 45.50 40.10 43.80Q38.30 42.10 38.30 39.15M47.15 42.60Q48.55 42.60 50.08 41.88Q51.60 41.15 52.65 39.85Q53.45 38.85 53.83 37.48Q54.20 36.10 54.20 34.25Q54.20 33.40 54.15 32.58Q54.10 31.75 54.00 31Q49.95 31.80 47.65 32.73Q45.35 33.65 44.40 34.92Q43.45 36.20 43.45 38.10Q43.45 40.25 44.43 41.42Q45.40 42.60 47.15 42.60Z" />
                                </g>
                              </g>
                            </svg>
                          </span>
                          <span class="grow truncate">
                            <span class="block truncate">
                              <svg class="w-auto h-[13px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 5.5 113.8499984741211 40.04999923706055" data-asc="0.9" width="113.8499984741211" height="40.04999923706055">
                                <defs />
                                <g fill="currentColor">
                                  <g transform="translate(0, 0)">
                                    <path d="M12.75 45.55Q9.80 45.55 7.38 44.65Q4.95 43.75 3.35 42.10L2.80 45L0 45L0 33.65L3.05 33.65Q3.35 38.40 5.45 40.60Q7.55 42.80 11.80 42.80Q15.35 42.80 17.15 41.42Q18.95 40.05 18.95 37.35Q18.95 35.20 17.88 33.75Q16.80 32.30 14.77 31.15Q12.75 30 9.95 28.90Q6.80 27.60 4.60 26.32Q2.40 25.05 1.27 23.22Q0.15 21.40 0.15 18.50Q0.15 13.75 3.13 11.10Q6.10 8.45 11.10 8.45Q16.05 8.45 19.15 11.25L19.55 9L22.35 9L22.35 20.35L19.50 20.35Q19.50 15.55 17.70 13.35Q15.90 11.15 12.05 11.15Q5.20 11.15 5.20 17.40Q5.20 19.05 5.80 20.13Q6.40 21.20 7.97 22.10Q9.55 23 12.45 24.25Q16.60 26 19.15 27.65Q21.70 29.30 22.85 31.23Q24 33.15 24 35.80Q24 38.85 22.57 41.05Q21.15 43.25 18.63 44.40Q16.10 45.55 12.75 45.55ZM51.50 31.80L34.05 31.80Q34.05 35.45 35.05 37.85Q36.05 40.15 37.90 41.15Q39.75 42.15 41.90 42.15Q44.25 42.15 46.20 41.17Q48.15 40.20 49.70 38.50L51.30 39.70Q49.55 42.10 47.05 43.80Q44.55 45.50 40.60 45.50Q37.15 45.50 34.50 44.02Q31.85 42.55 30.45 39.70Q29.70 38.15 29.35 36.25Q29.00 34.35 29.00 32.20Q29.00 25.20 32.23 21.35Q35.45 17.50 41 17.50Q46.10 17.50 48.88 20.67Q51.65 23.85 51.65 29.45Q51.65 29.95 51.63 30.38Q51.60 30.80 51.50 31.80M40.70 20.20Q34.70 20.20 34.10 29.35L46.60 29.35L46.60 27.70Q46.60 24.10 45.08 22.15Q43.55 20.20 40.70 20.20ZM70.70 20.90Q70.50 20.75 70.23 20.67Q69.95 20.60 69.70 20.60Q69.10 20.60 68.40 21.15Q67.70 21.70 67.05 22.63Q66.40 23.55 65.85 24.75Q65.15 26.45 64.75 28.47Q64.35 30.50 64.35 32.65L64.35 42L69.75 42.95L69.75 45L55.65 45L55.65 42.95L59.50 42L59.50 21L55.65 20.05L55.65 18L62.85 18L63.95 24.60L64.15 24.60Q65.30 21.20 67.25 19.35Q69.20 17.50 71.55 17.50Q73.50 17.50 74.80 18.72Q76.10 19.95 76.10 22Q76.10 23.50 75.33 24.38Q74.55 25.25 73.25 25.25Q71.95 25.25 71.20 24.42Q70.45 23.60 70.45 22.25Q70.45 21.95 70.50 21.67Q70.55 21.40 70.70 20.90ZM82.40 21L78.55 20.05L78.55 18L87.25 18L87.25 42L91.10 42.95L91.10 45L78.55 45L78.55 42.95L82.40 42L82.40 21M81.70 9.95Q81.70 8.50 82.55 7.65Q83.40 6.80 84.80 6.80Q86.25 6.80 87.10 7.65Q87.95 8.50 87.95 9.95Q87.95 11.35 87.10 12.20Q86.25 13.05 84.80 13.05Q83.35 13.05 82.53 12.23Q81.70 11.40 81.70 9.95ZM93.25 20.50L93.25 18.70L98.10 18L98.10 17.50Q98.10 11.75 100.60 8.63Q103.10 5.50 107.35 5.50Q110.30 5.50 112.08 6.92Q113.85 8.35 113.85 10.55Q113.85 11.95 113.15 12.67Q112.45 13.40 111.25 13.40Q110.10 13.40 109.40 12.75Q108.70 12.10 108.70 10.90Q108.70 9.60 109.50 8.30Q108.65 7.40 107.20 7.40Q106.05 7.40 105.20 7.90Q104.10 8.55 103.63 9.75Q103.15 10.95 103.05 12.42Q102.95 13.90 102.95 15.50L102.95 18L109.35 18L109.35 20.50L102.95 20.50L102.95 42L108.35 42.95L108.35 45L94.25 45L94.25 42.95L98.10 42L98.10 20.50L93.25 20.50Z" />
                                  </g>
                                </g>
                              </svg>
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox --><!-- Checkbox -->
                        <label for="hs-pro-tps-mono-@@previewMode.themes.id" class="group relative py-1.5 px-2 flex items-center gap-x-2.5 text-sm text-gray-800 border border-transparent rounded-[8px] hover:border-gray-300 hover:bg-gray-100 has-checked:border-gray-300 has-checked:bg-gray-100 dark:hover:border-neutral-700 dark:hover:bg-neutral-500/20 dark:has-checked:border-neutral-700 dark:has-checked:bg-neutral-500/20 cursor-pointer dark:text-neutral-200">
                          <input type="radio" id="hs-pro-tps-mono-@@previewMode.themes.id" class="peer hidden" name="hs-pro-tfps-@@previewMode.themes.id" value="mono">
                          <span class="size-8 flex shrink-0 justify-center items-center text-black bg-gray-200 rounded-[6px] border-b border-gray-300 dark:bg-neutral-700 dark:text-white dark:border-neutral-600">
                            <svg class="shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 14 52.5 35" data-asc="0.98" width="52.5" height="35">
                              <defs />
                              <g fill="currentColor">
                                <g transform="translate(0, 0)">
                                  <path d="M8.10 14L0 22.35L0 49L4 49L4 33L18 33L18 49L22 49L22 14L8.10 14M4 23.30L9.55 17.60L18 17.60L18 29.40L4 29.40L4 23.30ZM33.65 21.35L33.65 25.05L48.30 25.05L48.30 32.65L37.25 32.65L29.45 40.75L29.45 42.75L33.65 49L44.10 49L48.30 46.45L48.30 49L52.50 49L52.50 26L49.35 21.35L33.65 21.35M33.65 42.25L33.65 41.85L38.90 36.45L48.30 36.45L48.30 45.20L35.60 45.20L33.65 42.25Z" />
                                </g>
                              </g>
                            </svg>
                          </span>
                          <span class="grow truncate">
                            <span class="block truncate">
                              <svg class="w-auto h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 14 112.19999694824219 35" data-asc="0.98" width="112.19999694824219" height="35">
                                <defs />
                                <g fill="currentColor">
                                  <g transform="translate(0, 0)">
                                    <path d="M0 14L0 49L4 49L4 21.80L8.80 28.90L8.80 29L13.15 29L13.15 24.45L18.10 19.25L18.10 49L22.15 49L22.15 14L18.10 14L9.25 23.15L4 15.40L4 14L0 14ZM34.05 22.45L48.20 22.45L52.20 28.45L52.20 44.85L48.20 49L34.10 49L30.05 43L30.05 26.60L34.05 22.45M34 42.50L36 45.40L46.60 45.40L48.10 43.80L48.10 28.90L46.20 26.05L35.55 26.05L34 27.70L34 42.50ZM60 22.45L60 49L64 49L64 27.65L65.55 26.05L76.20 26.05L78.10 28.85L78.10 49L82.15 49L82.15 28.35L78.10 22.45L68.05 22.45L64 24.85L64 22.45L60 22.45ZM94.05 22.45L108.20 22.45L112.20 28.45L112.20 44.85L108.20 49L94.10 49L90.05 43L90.05 26.60L94.05 22.45M94 42.50L96 45.40L106.60 45.40L108.10 43.80L108.10 28.90L106.20 26.05L95.55 26.05L94 27.70L94 42.50Z" />
                                  </g>
                                </g>
                              </svg>
                            </span>
                          </span>
                        </label>
                        <!-- End Checkbox -->

                      </div>
                      <!-- End Grid -->
                    </div>
                  </div>
                  <!-- Body -->

                  <!-- Footer -->
                  <div class="p-3">
                    <a class="group p-2 rounded-[6px] flex justify-center items-center gap-x-1 text-[13px] bg-gray-800 text-white hover:bg-gray-900 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-900 dark:bg-white dark:hover:bg-neutral-200 dark:focus:bg-neutral-200 dark:text-neutral-800" href="https://preline.co/pro/pricing.html">
                      Purchase Preline Pro
                      <svg class="hidden md:inline-block shrink-0 size-3.5 group-hover:translate-x-0.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 class="lg:opacity-0 lg:-translate-x-1 lg:group-hover:opacity-100 lg:group-hover:translate-x-0 lg:group-focus:opacity-100 lg:group-focus:translate-x-0 lg:transition" d="M5 12h14" />
                        <path class="lg:-translate-x-1.5 lg:group-hover:translate-x-0 lg:group-focus:translate-x-0 lg:transition" d="m12 5 7 7-7 7" />
                      </svg>
                    </a>
                  </div>
                  <!-- End Footer -->
                </div>
                <!-- End Tab Content -->
              </div>
              <!-- End Dropdown -->
            </div>
            <!-- End Templates Dropdown -->
          </div>
        </div>

        <!-- Sidebar Toggle -->
        <button type="button" class="hidden md:hs-overlay-minified:hidden md:flex justify-center items-center flex-none gap-x-3 size-9 text-sm text-muted-foreground-1 rounded-lg hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="true" aria-controls="hs-pro-sidebar" aria-label="Minify navigation" data-hs-overlay-minifier="#hs-pro-sidebar">
          <svg class="hidden hs-overlay-minified:block 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="18" height="18" x="3" y="3" rx="2"></rect>
            <path d="M15 3v18"></path>
            <path d="m8 9 3 3-3 3"></path>
          </svg>
          <svg class="hs-overlay-minified:hidden 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="18" height="18" x="3" y="3" rx="2"></rect>
            <path d="M15 3v18"></path>
            <path d="m10 15-3-3 3-3"></path>
          </svg>
          <span class="sr-only">Sidebar Toggle</span>
        </button>
        <!-- End Sidebar Toggle -->

        <!-- Sidebar Toggle -->
        <button type="button" class="flex md:hidden justify-center items-center gap-x-3 size-6 bg-layer border border-layer-line text-sm text-muted-foreground-1 rounded-full hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" data-hs-overlay="#hs-pro-sidebar" aria-expanded="true">
          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" 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>
        <!-- End Sidebar Toggle -->
      </header>
      <!-- End Header -->

      <div class="mb-5 px-2 flex flex-col gap-y-5">
        <!-- List -->
        <ul class="flex flex-col gap-y-0.5">
          <li>
            <a class="group relative w-full flex items-center gap-1 py-1.5 px-2.5 relative text-sm rounded-lg before:absolute before:inset-y-0 before:-inset-s-2 before:rounded-e-full before:w-1 before:h-full bg-sidebar-nav-active/70 before:bg-primary text-primary hover:bg-sidebar-nav-active/70 focus:bg-sidebar-nav-active/70 " href="#">
              <span class="-ms-[5px] flex shrink-0 justify-center items-center size-6">
                <svg class="shrink-0 size-4 group-hover:scale-115 group-focus:scale-115 transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" 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 12h14" />
                  <path d="M12 5v14" />
                </svg>
              </span>
              <span class="truncate hs-overlay-minified:opacity-0 transition-opacity duration-300">New chat</span>
            </a>
          </li>
          <li>
            <button type="button" class="group w-full flex items-center gap-1 py-1.5 px-2.5 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-pro-dnsm" data-hs-overlay="#hs-pro-dnsm">
              <span class="-ms-[5px] flex shrink-0 justify-center items-center size-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 class="group-hover:scale-100 group-focus:scale-100 scale-115 scale-115 transition-transform duration-300" d="m21 21-4.34-4.34" />
                  <circle cx="11" cy="11" r="8" />
                </svg>
              </span>
              <span class="truncate hs-overlay-minified:opacity-0 transition-opacity duration-300">Search chats</span>
            </button>
          </li>
          <li>
            <a class="group relative w-full flex items-center gap-1 py-1.5 px-2.5 relative text-sm rounded-lg before:absolute before:inset-y-0 before:-inset-s-2 before:rounded-e-full before:w-1 before:h-full  text-sidebar-nav-foreground hover:bg-sidebar-nav-hover/70 focus:bg-sidebar-nav-focus/70" href="#">
              <span class="-ms-[5px] flex shrink-0 justify-center items-center size-6">
                <svg class="shrink-0 size-4 group-hover:rotate-180 group-focus:rotate-180 transition-transform duration-300" xmlns="http://www.w3.org/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="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
                  <path d="M2 12h20" />
                </svg>
              </span>
              <span class="truncate hs-overlay-minified:opacity-0 transition-opacity duration-300">Explore</span>
            </a>
          </li>
          <li>
            <a class="group relative w-full flex items-center gap-1 py-1.5 px-2.5 relative text-sm rounded-lg before:absolute before:inset-y-0 before:-inset-s-2 before:rounded-e-full before:w-1 before:h-full  text-sidebar-nav-foreground hover:bg-sidebar-nav-hover/70 focus:bg-sidebar-nav-focus/70" href="#">
              <span class="-ms-[5px] flex shrink-0 justify-center items-center size-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 class="group-hover:scale-110 group-focus:scale-110 transition-transform duration-300" d="M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z" />
                  <path class="group-hover:scale-95 group-focus:scale-95 transition-transform duration-300" d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
                </svg>
              </span>
              <span class="truncate hs-overlay-minified:opacity-0 transition-opacity duration-300">Chat details</span>
            </a>
          </li>
        </ul>
        <!-- End List -->
      </div>

      <!-- Body -->
      <div class="hs-overlay-minified:opacity-0 transition-opacity duration-300 pb-4 px-2 size-full flex flex-col gap-y-5 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 flex-col">
          <span class="block ps-2.5 mb-2 text-sm text-muted-foreground">
            Recent chats
          </span>

          <!-- List -->
          <ul class="flex flex-col gap-y-0.5">
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Preline UI Overview</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid1" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid1">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Product Photography Lighting Setup</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid2" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid2">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Social Media Content</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid3" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid3">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Website Optimization</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid4" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid4">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Customer Support Ticket System</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid5" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid5">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Mobile App Design</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid6" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid6">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">E-commerce Payment Integration</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid7" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid7">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Data Analytics Dashboard Setup</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid8" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid8">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Video Production</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid9" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid9">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Project Management Timeline</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid10" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid10">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
            <li>
              <div class="relative group">
                <a class="w-full flex items-center gap-x-2 py-2 ps-2.5 pe-8 text-sm text-sidebar-nav-foreground truncate rounded-lg hover:bg-sidebar-nav-hover/70 focus:outline-hidden focus:bg-sidebar-nav-focus/70" href="chat-details.html">
                  <span class="truncate">Brand Design System</span>
                </a>

                <div class="absolute top-1/2 inset-e-0 z-1 -translate-y-1/2 group-hover:opacity-100 opacity-0 transition-opacity duration-300">
                  <!-- More Dropdown -->
                  <div class="hs-dropdown [--scope:window] relative inline-flex">
                    <button id="hs-pro-chthmdid11" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-sidebar-nav-hover/70 rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-sidebar-nav-focus/70">
                      <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="1" />
                        <circle cx="12" cy="5" r="1" />
                        <circle cx="12" cy="19" r="1" />
                      </svg>
                    </button>

                    <!-- More Dropdown -->
                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-60 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-chthmdid11">
                      <div class="p-1 space-y-0.5">
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                            <polyline points="16 6 12 2 8 6" />
                            <line x1="12" x2="12" y1="2" y2="15" />
                          </svg>
                          Share
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                          Rename
                        </button>
                        <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                            <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
                      </div>
                    </div>
                    <!-- End More Dropdown -->
                  </div>
                  <!-- End More Dropdown -->
                </div>
              </div>
            </li>
          </ul>
          <!-- End List -->
        </div>
      </div>
      <!-- End Body -->
    </div>
  </div>
  <!-- End Sidebar -->
  <!-- ========== END MAIN SIDEBAR ========== -->

  <!-- ========== MAIN CONTENT ========== -->
  <main class="md:ps-65 md:hs-overlay-minified:ps-13 transition-all duration-300 pb-4 h-screen flex flex-col">
    <!-- ========== HEADER ========== -->
    <header class="md:ms-65 xl:hs-overlay-layout-open:me-96 md:hs-overlay-minified:ms-13 transition-all duration-300 fixed top-0 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-48 md:z-61 bg-navbar py-2.5">
      <nav class="px-4 sm:px-5.5 flex basis-full justify-between items-center w-full mx-auto">
        <!-- Button Group -->
        <div class="flex items-center sm:gap-x-1.5 truncate">
          <!-- Sidebar Toggle -->
          <button type="button" class="md:hidden flex justify-center items-center flex-none gap-x-3 size-9 text-sm text-muted-foreground-1 rounded-lg hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus" aria-haspopup="dialog" aria-expanded="true" aria-controls="hs-pro-sidebar" aria-label="Minify navigation" data-hs-overlay="#hs-pro-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">
              <rect width="18" height="18" x="3" y="3" rx="2"></rect>
              <path d="M15 3v18"></path>
              <path d="m8 9 3 3-3 3"></path>
            </svg>
            <span class="sr-only">Sidebar Toggle</span>
          </button>
          <!-- End Sidebar Toggle -->

          <a class="flex justify-center items-center gap-x-1.5 py-2 px-2.5 text-sm whitespace-nowrap text-primary rounded-lg hover:bg-primary-hover/10 focus:outline-hidden focus:bg-primary-focus/10 disabled:opacity-50 disabled:pointer-events-none" 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="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
              <path d="M20 3v4" />
              <path d="M22 5h-4" />
              <path d="M4 17v2" />
              <path d="M5 18H3" />
            </svg>
            Get Plus
          </a>
        </div>
        <!-- End Button Group -->

        <!-- Button Group -->
        <div class="flex items-center sm:gap-x-1.5">
          <!-- More Dropdown -->
          <div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
            <button id="hs-pro-ainmd" type="button" class="flex justify-center items-center gap-x-3 size-9 text-sm text-foreground hover:bg-muted-hover rounded-lg 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="1" />
                <circle cx="12" cy="5" r="1" />
                <circle cx="12" cy="19" r="1" />
              </svg>
            </button>

            <!-- More Dropdown -->
            <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-32 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-ainmd">
              <div class="p-1 space-y-0.5">
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M12 2v13" />
                    <path d="m16 6-4-4-4 4" />
                    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
                  </svg>
                  Share
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                  Rename
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                    <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-2 rounded-lg text-sm text-destructive hover:bg-destructive-hover/10 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-destructive-focus/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="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>
              </div>
            </div>
            <!-- End More Dropdown -->
          </div>
          <!-- End More Dropdown -->

          <!-- Language Dropdown -->
          <div class="hs-dropdown [--strategy:absolute] [--placement:bottom-right] relative inline-flex">
            <button id="hs-pro-aimtlg" type="button" class="flex justify-center items-center gap-x-3 size-9 text-sm text-foreground hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
              <svg class="shrink-0 size-4.5" xmlns="http://www.w3.org/2000/svg" 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 8 6 6" />
                <path d="m4 14 6-6 2-3" />
                <path d="M2 5h12" />
                <path d="M7 2h1" />
                <path d="m22 22-5-10-5 10" />
                <path d="M14 18h6" />
              </svg>
              <span class="sr-only">Language</span>
            </button>

            <!-- Language Dropdown -->
            <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 before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-aimtlg">
              <div class="p-1 space-y-0.5">
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                  English (US)
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                  English (UK)
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                  Deutsch
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                  Dansk
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                  Italiano
                </button>
                <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                  中文 (繁體)
                </button>
              </div>
            </div>
            <!-- End Language Dropdown -->
          </div>
          <!-- End Language Dropdown -->

          <!-- Account Dropdown -->
          <div class="hs-dropdown inline-flex [--strategy:absolute] [--auto-close:inside] [--placement:bottom-right] relative text-start">
            <button id="hs-dnad" type="button" class="p-0.5 inline-flex shrink-0 items-center gap-x-3 text-start text-sm text-foreground rounded-full hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
              <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">
            </button>

            <!-- Account Dropdown -->
            <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="py-2 px-3.5">
                <span class="font-medium text-foreground">
                  James Collison
                </span>
                <p class="text-sm text-muted-foreground-1">
                  jamescollison@site.com
                </p>
                <div class="mt-1.5">
                  <a class="flex justify-center items-center gap-x-1.5 py-2 px-2.5 font-medium text-[13px] bg-primary border border-primary-line text-primary-foreground rounded-lg hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                    Upgrade plan
                  </a>
                </div>
              </div>
              <div class="px-4 py-2 border-t border-dropdown-divider">
                <!-- Switch/Toggle -->
                <div class="flex flex-wrap justify-between items-center gap-2">
                  <span class="flex-1 cursor-pointer text-sm text-foreground">Theme</span>
                  <div class="p-0.5 inline-flex cursor-pointer bg-surface rounded-full">
                    <button type="button" class="size-7 flex justify-center items-center bg-layer shadow-sm text-layer-foreground rounded-full hs-auto-mode-active:bg-transparent hs-auto-mode-active:shadow-none hs-dark-mode-active:bg-transparent hs-dark-mode-active:shadow-none" data-hs-theme-click-value="default">
                      <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="4" />
                        <path d="M12 3v1" />
                        <path d="M12 20v1" />
                        <path d="M3 12h1" />
                        <path d="M20 12h1" />
                        <path d="m18.364 5.636-.707.707" />
                        <path d="m6.343 17.657-.707.707" />
                        <path d="m5.636 5.636.707.707" />
                        <path d="m17.657 17.657.707.707" />
                      </svg>
                      <span class="sr-only">Default (Light)</span>
                    </button>
                    <button type="button" class="size-7 flex justify-center items-center text-layer-foreground rounded-full hs-dark-mode-active:bg-secondary-active hs-dark-mode-active:text-secondary-foreground hs-dark-mode-active:shadow-sm" data-hs-theme-click-value="dark">
                      <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 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
                      </svg>
                      <span class="sr-only">Dark</span>
                    </button>
                    <button type="button" class="size-7 flex justify-center items-center text-layer-foreground rounded-full hs-auto-light-mode-active:bg-layer hs-auto-mode-active:shadow-sm" data-hs-theme-click-value="auto">
                      <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="14" x="2" y="3" rx="2" />
                        <line x1="8" x2="16" y1="21" y2="21" />
                        <line x1="12" x2="12" y1="17" y2="21" />
                      </svg>
                      <span class="sr-only">Auto (System)</span>
                    </button>
                  </div>
                </div>
                <!-- End Switch/Toggle -->
              </div>
              <div class="p-1 border-t border-dropdown-divider">
                <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>
                  Profile
                </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="m16 17 5-5-5-5" />
                    <path d="M21 12H9" />
                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                  </svg>
                  Log out
                </a>
              </div>
            </div>
            <!-- End Account Dropdown -->
          </div>
          <!-- End Account Dropdown -->
        </div>
        <!-- End Button Group -->
      </nav>
    </header>
    <!-- ========== END HEADER ========== -->

    <div class="h-full flex flex-col justify-between sm:justify-center max-w-3xl w-full mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Heading -->
      <div class="flex flex-col justify-center items-center grow sm:flex-none">
        <h1 class="mb-8 text-3xl text-center text-gray-800 dark:text-neutral-200">
          What can I help with?
        </h1>
      </div>
      <!-- End Heading -->

      <!-- Body -->
      <div>
        <!-- Textarea -->
        <div class="bg-layer border border-line-3 rounded-2xl shadow-xs">
          <label for="hs-pro-aimt" class="sr-only">Ask anything...</label>

          <div class="pb-2 px-2">
            <textarea id="hs-pro-aimt" class="max-h-36 mt-2 pt-4 pb-2 ps-2 pe-4 block w-full bg-transparent border-transparent resize-none text-foreground placeholder:text-muted-foreground-1 focus:outline-hidden focus:border-transparent focus:ring-transparent disabled:opacity-50 disabled:pointer-events-none overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb" placeholder="Ask anything..." data-hs-textarea-auto-height></textarea>

            <div class="pt-2 flex justify-between items-center gap-x-1">
              <!-- Button Group -->
              <div class="flex items-center gap-x-1">
                <!-- Add Media Dropdown -->
                <div class="hs-dropdown [--scope:window] relative inline-flex">
                  <button id="hs-pro-aimtaf" type="button" class="flex justify-center items-center gap-x-3 size-8 text-sm text-foreground hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                    <svg class="shrink-0 size-4.5" xmlns="http://www.w3.org/2000/svg" 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 12h14" />
                      <path d="M12 5v14" />
                    </svg>
                    <span class="sr-only">Add Media</span>
                  </button>

                  <!-- Add Media Dropdown -->
                  <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-50 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-aimtaf">
                    <div class="p-1 space-y-0.5">
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" />
                        </svg>
                        Upload a file
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" />
                          <circle cx="12" cy="13" r="3" />
                        </svg>
                        Add a screenshot
                      </button>
                    </div>
                  </div>
                  <!-- End Add Media Dropdown -->
                </div>
                <!-- End Add Media Dropdown -->

                <!-- Tools Dropdown -->
                <div class="hs-dropdown [--scope:window] relative inline-flex">
                  <button id="hs-pro-aimttl" type="button" class="flex justify-center items-center gap-x-1 py-1.5 px-2 text-sm text-foreground hover:bg-muted-hover rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                    <svg class="shrink-0 size-4.5" xmlns="http://www.w3.org/2000/svg" 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 17H5" />
                      <path d="M19 7h-9" />
                      <circle cx="17" cy="17" r="3" />
                      <circle cx="7" cy="7" r="3" />
                    </svg>
                    Tools
                  </button>

                  <!-- Tools Dropdown -->
                  <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-50 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-4 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-aimttl">
                    <div class="p-1 space-y-0.5">
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M18 22H4a2 2 0 0 1-2-2V6" />
                          <path d="m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18" />
                          <circle cx="12" cy="8" r="2" />
                          <rect width="16" height="16" x="6" y="2" rx="2" />
                        </svg>
                        Create an image
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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">
                          <circle cx="12" cy="12" r="10" />
                          <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
                          <path d="M2 12h20" />
                        </svg>
                        Search the web
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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.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>
                        Write or code
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="m10.065 12.493-6.18 1.318a.934.934 0 0 1-1.108-.702l-.537-2.15a1.07 1.07 0 0 1 .691-1.265l13.504-4.44" />
                          <path d="m13.56 11.747 4.332-.924" />
                          <path d="m16 21-3.105-6.21" />
                          <path d="M16.485 5.94a2 2 0 0 1 1.455-2.425l1.09-.272a1 1 0 0 1 1.212.727l1.515 6.06a1 1 0 0 1-.727 1.213l-1.09.272a2 2 0 0 1-2.425-1.455z" />
                          <path d="m6.158 8.633 1.114 4.456" />
                          <path d="m8 21 3.105-6.21" />
                          <circle cx="12" cy="13" r="2" />
                        </svg>
                        Run deep research
                      </button>
                      <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 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="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" />
                          <path d="M9 18h6" />
                          <path d="M10 22h4" />
                        </svg>
                        Think for longer
                      </button>
                    </div>
                  </div>
                  <!-- End Tools Dropdown -->
                </div>
                <!-- End Tools Dropdown -->
              </div>
              <!-- End Button Group -->

              <!-- Button Group -->
              <div class="flex items-center gap-x-1">
                <!-- Select -->
                <div class="relative inline-block md:-ms-2.5">
                  <select id="hs-pro-select-model" data-hs-select='{
                      "placeholder": "Select Model",
                      "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><span class=\"me-2\" data-icon></span><span class=\"text-foreground\" data-title></span></button>",
                      "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-1.5 ps-3 pe-7 inline-flex justify-center items-center text-start bg-layer text-layer-foreground text-sm rounded-lg align-middle hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus before:absolute before:inset-0 before:z-1 hover:bg-muted-hover",
                      "dropdownClasses": "mt-2 z-50 w-50 inset-e-0 p-1 space-y-0.5 bg-select border border-select-line rounded-xl shadow-xl",
                      "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                      "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-foreground\" data-title></div></div><div class=\"text-sm text-muted-foreground-1\" data-description></div></div>",
                      "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-foreground\" xmlns=\"http://www.w3.org/2000/svg\" 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>"
                    }' class="hidden">
                    <option value="">Choose</option>
                    <option value="1" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-5\" overflow=\"visible\" width=\"100%\" height=\"100%\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\"><path d=\"M96.0000 40.0000 L99.5002 42.0000 L99.5002 43.5000 L98.5000 47.0000 L56.0000 57.0000 L52.0040 47.0708 L96.0000 40.0000 M96.0000 40.0000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(330deg) scaleY(0.925) rotate(-330deg);\"></path><path d=\"M80.1032 10.5903 L84.9968 11.6171 L86.2958 13.2179 L87.5346 17.0540 L87.0213 19.5007 L58.5000 58.5000 L49.0000 49.0000 L75.3008 14.4873 L80.1032 10.5903 M80.1032 10.5903 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(300deg) scaleY(0.955) rotate(-300deg);\"></path><path d=\"M55.5002 4.5000 L58.5005 2.5000 L61.0002 3.5000 L63.5002 7.0000 L56.6511 48.1620 L52.0005 45.0000 L50.0005 39.5000 L53.5003 8.5000 L55.5002 4.5000 M55.5002 4.5000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(270deg) scaleY(0.94) rotate(-270deg);\"></path><path d=\"M23.4253 5.1588 L26.5075 1.2217 L28.5175 0.7632 L32.5063 1.3458 L34.4748 2.8868 L48.8202 34.6902 L54.0089 49.8008 L47.9378 53.1760 L24.8009 11.1886 L23.4253 5.1588 M23.4253 5.1588 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(240deg) scaleY(1.045) rotate(-240deg);\"></path><path d=\"M8.4990 27.0019 L7.4999 23.0001 L10.5003 19.5001 L14.0003 20.0001 L15.0003 20.0001 L36.0000 35.5000 L42.5000 40.5000 L51.5000 47.5000 L46.5000 56.0000 L42.0002 52.5000 L39.0001 49.5000 L10.0000 29.0001 L8.4990 27.0019 M8.4990 27.0019 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(210deg) scaleY(1.00662) rotate(-210deg);\"></path><path d=\"M2.5003 53.0000 L0.2370 50.5000 L0.2373 48.2759 L2.5003 47.5000 L28.0000 49.0000 L53.0000 51.0000 L52.1885 55.9782 L4.5000 53.5000 L2.5003 53.0000 M2.5003 53.0000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(180deg) scaleY(1.19328) rotate(-180deg);\"></path><path d=\"M17.5002 79.0264 L12.5005 79.0264 L10.5124 76.7369 L10.5124 74.0000 L19.0005 68.0000 L53.5082 46.0337 L57.0005 52.0000 L17.5002 79.0264 M17.5002 79.0264 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(150deg) scaleY(1.22995) rotate(-150deg);\"></path><path d=\"M27.0004 92.9999 L25.0003 93.4999 L22.0003 91.9999 L22.5004 89.4999 L52.0003 50.5000 L56.0004 55.9999 L34.0003 85.0000 L27.0004 92.9999 M27.0004 92.9999 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(120deg) scaleY(1.19338) rotate(-120deg);\"></path><path d=\"M51.9998 98.0000 L50.5002 100.0000 L47.5002 101.0000 L45.0001 99.0000 L43.5000 96.0000 L51.0003 55.4999 L55.5001 55.9999 L51.9998 98.0000 M51.9998 98.0000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(90deg) scaleY(1.11172) rotate(-90deg);\"></path><path d=\"M77.5007 86.9997 L77.5007 90.9997 L77.0006 92.4997 L75.0004 93.4997 L71.5006 93.0339 L47.4669 57.2642 L56.9998 50.0002 L64.9994 64.5004 L65.7507 69.7497 L77.5007 86.9997 M77.5007 86.9997 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(60deg) scaleY(1.02705) rotate(-60deg);\"></path><path d=\"M89.0008 80.9991 L89.5008 83.4991 L88.0008 85.4991 L86.5007 84.9991 L78.0007 78.9991 L65.0007 67.4991 L55.0007 60.4991 L58.0000 51.0000 L62.9999 54.0001 L66.0007 59.4991 L89.0008 80.9991 M89.0008 80.9991 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(30deg) scaleY(0.985) rotate(-30deg);\"></path><path d=\"M82.5003 55.5000 L95.0003 56.5000 L98.0003 58.5000 L100.0000 61.5000 L100.0000 63.6587 L94.5003 66.0000 L66.5005 59.0000 L55.0003 58.5000 L58.0000 48.0000 L66.0005 54.0000 L82.5003 55.5000 M82.5003 55.5000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(0deg) scaleY(1.075) rotate(0deg);\"></path></svg>"
                    }'>Claude-4-sonnet</option>
                    <option value="2" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-5\" overflow=\"visible\" width=\"100%\" height=\"100%\" viewBox=\"0 0 100 101\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" role=\"presentation\"><path d=\"M96.0000 40.0000 L99.5002 42.0000 L99.5002 43.5000 L98.5000 47.0000 L56.0000 57.0000 L52.0040 47.0708 L96.0000 40.0000 M96.0000 40.0000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(330deg) scaleY(0.925) rotate(-330deg);\"></path><path d=\"M80.1032 10.5903 L84.9968 11.6171 L86.2958 13.2179 L87.5346 17.0540 L87.0213 19.5007 L58.5000 58.5000 L49.0000 49.0000 L75.3008 14.4873 L80.1032 10.5903 M80.1032 10.5903 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(300deg) scaleY(0.955) rotate(-300deg);\"></path><path d=\"M55.5002 4.5000 L58.5005 2.5000 L61.0002 3.5000 L63.5002 7.0000 L56.6511 48.1620 L52.0005 45.0000 L50.0005 39.5000 L53.5003 8.5000 L55.5002 4.5000 M55.5002 4.5000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(270deg) scaleY(0.94) rotate(-270deg);\"></path><path d=\"M23.4253 5.1588 L26.5075 1.2217 L28.5175 0.7632 L32.5063 1.3458 L34.4748 2.8868 L48.8202 34.6902 L54.0089 49.8008 L47.9378 53.1760 L24.8009 11.1886 L23.4253 5.1588 M23.4253 5.1588 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(240deg) scaleY(1.045) rotate(-240deg);\"></path><path d=\"M8.4990 27.0019 L7.4999 23.0001 L10.5003 19.5001 L14.0003 20.0001 L15.0003 20.0001 L36.0000 35.5000 L42.5000 40.5000 L51.5000 47.5000 L46.5000 56.0000 L42.0002 52.5000 L39.0001 49.5000 L10.0000 29.0001 L8.4990 27.0019 M8.4990 27.0019 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(210deg) scaleY(1.00662) rotate(-210deg);\"></path><path d=\"M2.5003 53.0000 L0.2370 50.5000 L0.2373 48.2759 L2.5003 47.5000 L28.0000 49.0000 L53.0000 51.0000 L52.1885 55.9782 L4.5000 53.5000 L2.5003 53.0000 M2.5003 53.0000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(180deg) scaleY(1.19328) rotate(-180deg);\"></path><path d=\"M17.5002 79.0264 L12.5005 79.0264 L10.5124 76.7369 L10.5124 74.0000 L19.0005 68.0000 L53.5082 46.0337 L57.0005 52.0000 L17.5002 79.0264 M17.5002 79.0264 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(150deg) scaleY(1.22995) rotate(-150deg);\"></path><path d=\"M27.0004 92.9999 L25.0003 93.4999 L22.0003 91.9999 L22.5004 89.4999 L52.0003 50.5000 L56.0004 55.9999 L34.0003 85.0000 L27.0004 92.9999 M27.0004 92.9999 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(120deg) scaleY(1.19338) rotate(-120deg);\"></path><path d=\"M51.9998 98.0000 L50.5002 100.0000 L47.5002 101.0000 L45.0001 99.0000 L43.5000 96.0000 L51.0003 55.4999 L55.5001 55.9999 L51.9998 98.0000 M51.9998 98.0000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(90deg) scaleY(1.11172) rotate(-90deg);\"></path><path d=\"M77.5007 86.9997 L77.5007 90.9997 L77.0006 92.4997 L75.0004 93.4997 L71.5006 93.0339 L47.4669 57.2642 L56.9998 50.0002 L64.9994 64.5004 L65.7507 69.7497 L77.5007 86.9997 M77.5007 86.9997 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(60deg) scaleY(1.02705) rotate(-60deg);\"></path><path d=\"M89.0008 80.9991 L89.5008 83.4991 L88.0008 85.4991 L86.5007 84.9991 L78.0007 78.9991 L65.0007 67.4991 L55.0007 60.4991 L58.0000 51.0000 L62.9999 54.0001 L66.0007 59.4991 L89.0008 80.9991 M89.0008 80.9991 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(30deg) scaleY(0.985) rotate(-30deg);\"></path><path d=\"M82.5003 55.5000 L95.0003 56.5000 L98.0003 58.5000 L100.0000 61.5000 L100.0000 63.6587 L94.5003 66.0000 L66.5005 59.0000 L55.0003 58.5000 L58.0000 48.0000 L66.0005 54.0000 L82.5003 55.5000 M82.5003 55.5000 \" fill=\"#D97757\" style=\"transform-origin: 50px 50px; transform: rotate(0deg) scaleY(1.075) rotate(0deg);\"></path></svg>"
                    }'>Claude-3.5-sonnet</option>
                    <option value="3" selected data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-5\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-lg\"><path d=\"M11.2475 18.25C10.6975 18.25 10.175 18.1455 9.67999 17.9365C9.18499 17.7275 8.74499 17.436 8.35999 17.062C7.94199 17.205 7.50749 17.2765 7.05649 17.2765C6.31949 17.2765 5.63749 17.095 5.01049 16.732C4.38349 16.369 3.87749 15.874 3.49249 15.247C3.11849 14.62 2.93149 13.9215 2.93149 13.1515C2.93149 12.8325 2.97549 12.486 3.06349 12.112C2.62349 11.705 2.28249 11.2375 2.04049 10.7095C1.79849 10.1705 1.67749 9.6095 1.67749 9.0265C1.67749 8.4325 1.80399 7.8605 2.05699 7.3105C2.30999 6.7605 2.66199 6.2875 3.11299 5.8915C3.57499 5.4845 4.10849 5.204 4.71349 5.05C4.83449 4.423 5.08749 3.862 5.47249 3.367C5.86849 2.861 6.35249 2.465 6.92449 2.179C7.49649 1.893 8.10699 1.75 8.75599 1.75C9.30599 1.75 9.82849 1.8545 10.3235 2.0635C10.8185 2.2725 11.2585 2.564 11.6435 2.938C12.0615 2.795 12.496 2.7235 12.947 2.7235C13.684 2.7235 14.366 2.905 14.993 3.268C15.62 3.631 16.1205 4.126 16.4945 4.753C16.8795 5.38 17.072 6.0785 17.072 6.8485C17.072 7.1675 17.028 7.514 16.94 7.888C17.38 8.295 17.721 8.768 17.963 9.307C18.205 9.835 18.326 10.3905 18.326 10.9735C18.326 11.5675 18.1995 12.1395 17.9465 12.6895C17.6935 13.2395 17.336 13.718 16.874 14.125C16.423 14.521 15.895 14.796 15.29 14.95C15.169 15.577 14.9105 16.138 14.5145 16.633C14.1295 17.139 13.651 17.535 13.079 17.821C12.507 18.107 11.8965 18.25 11.2475 18.25ZM7.17199 16.1875C7.72199 16.1875 8.20049 16.072 8.60749 15.841L11.7095 14.059C11.8195 13.982 11.8745 13.8775 11.8745 13.7455V12.3265L7.88149 14.62C7.63949 14.763 7.39749 14.763 7.15549 14.62L4.03699 12.8215C4.03699 12.8545 4.03149 12.893 4.02049 12.937C4.02049 12.981 4.02049 13.047 4.02049 13.135C4.02049 13.696 4.15249 14.213 4.41649 14.686C4.69149 15.148 5.07099 15.511 5.55499 15.775C6.03899 16.05 6.57799 16.1875 7.17199 16.1875ZM7.33699 13.498C7.40299 13.531 7.46349 13.5475 7.51849 13.5475C7.57349 13.5475 7.62849 13.531 7.68349 13.498L8.92099 12.7885L4.94449 10.4785C4.70249 10.3355 4.58149 10.121 4.58149 9.835V6.2545C4.03149 6.4965 3.59149 6.8705 3.26149 7.3765C2.93149 7.8715 2.76649 8.4215 2.76649 9.0265C2.76649 9.5655 2.90399 10.0825 3.17899 10.5775C3.45399 11.0725 3.81149 11.4465 4.25149 11.6995L7.33699 13.498ZM11.2475 17.161C11.8305 17.161 12.3585 17.029 12.8315 16.765C13.3045 16.501 13.6785 16.138 13.9535 15.676C14.2285 15.214 14.366 14.697 14.366 14.125V10.561C14.366 10.429 14.311 10.33 14.201 10.264L12.947 9.538V14.1415C12.947 14.4275 12.826 14.642 12.584 14.785L9.46549 16.5835C10.0045 16.9685 10.5985 17.161 11.2475 17.161ZM11.8745 11.122V8.878L10.01 7.822L8.12899 8.878V11.122L10.01 12.178L11.8745 11.122ZM7.05649 5.8585C7.05649 5.5725 7.17749 5.358 7.41949 5.215L10.538 3.4165C9.99899 3.0315 9.40499 2.839 8.75599 2.839C8.17299 2.839 7.64499 2.971 7.17199 3.235C6.69899 3.499 6.32499 3.862 6.04999 4.324C5.78599 4.786 5.65399 5.303 5.65399 5.875V9.4225C5.65399 9.5545 5.70899 9.659 5.81899 9.736L7.05649 10.462V5.8585ZM15.4385 13.7455C15.9885 13.5035 16.423 13.1295 16.742 12.6235C17.072 12.1175 17.237 11.5675 17.237 10.9735C17.237 10.4345 17.0995 9.9175 16.8245 9.4225C16.5495 8.9275 16.192 8.5535 15.752 8.3005L12.6665 6.5185C12.6005 6.4745 12.54 6.458 12.485 6.469C12.43 6.469 12.375 6.4855 12.32 6.5185L11.0825 7.2115L15.0755 9.538C15.1965 9.604 15.2845 9.692 15.3395 9.802C15.4055 9.901 15.4385 10.022 15.4385 10.165V13.7455ZM12.122 5.3635C12.364 5.2095 12.606 5.2095 12.848 5.3635L15.983 7.195C15.983 7.118 15.983 7.019 15.983 6.898C15.983 6.37 15.851 5.8695 15.587 5.3965C15.334 4.9125 14.9655 4.5275 14.4815 4.2415C14.0085 3.9555 13.4585 3.8125 12.8315 3.8125C12.2815 3.8125 11.803 3.928 11.396 4.159L8.29399 5.941C8.18399 6.018 8.12899 6.1225 8.12899 6.2545V7.6735L12.122 5.3635Z\"></path></svg>"
                    }'>gpt-o3</option>
                    <option value="4" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-5\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-lg\"><path d=\"M11.2475 18.25C10.6975 18.25 10.175 18.1455 9.67999 17.9365C9.18499 17.7275 8.74499 17.436 8.35999 17.062C7.94199 17.205 7.50749 17.2765 7.05649 17.2765C6.31949 17.2765 5.63749 17.095 5.01049 16.732C4.38349 16.369 3.87749 15.874 3.49249 15.247C3.11849 14.62 2.93149 13.9215 2.93149 13.1515C2.93149 12.8325 2.97549 12.486 3.06349 12.112C2.62349 11.705 2.28249 11.2375 2.04049 10.7095C1.79849 10.1705 1.67749 9.6095 1.67749 9.0265C1.67749 8.4325 1.80399 7.8605 2.05699 7.3105C2.30999 6.7605 2.66199 6.2875 3.11299 5.8915C3.57499 5.4845 4.10849 5.204 4.71349 5.05C4.83449 4.423 5.08749 3.862 5.47249 3.367C5.86849 2.861 6.35249 2.465 6.92449 2.179C7.49649 1.893 8.10699 1.75 8.75599 1.75C9.30599 1.75 9.82849 1.8545 10.3235 2.0635C10.8185 2.2725 11.2585 2.564 11.6435 2.938C12.0615 2.795 12.496 2.7235 12.947 2.7235C13.684 2.7235 14.366 2.905 14.993 3.268C15.62 3.631 16.1205 4.126 16.4945 4.753C16.8795 5.38 17.072 6.0785 17.072 6.8485C17.072 7.1675 17.028 7.514 16.94 7.888C17.38 8.295 17.721 8.768 17.963 9.307C18.205 9.835 18.326 10.3905 18.326 10.9735C18.326 11.5675 18.1995 12.1395 17.9465 12.6895C17.6935 13.2395 17.336 13.718 16.874 14.125C16.423 14.521 15.895 14.796 15.29 14.95C15.169 15.577 14.9105 16.138 14.5145 16.633C14.1295 17.139 13.651 17.535 13.079 17.821C12.507 18.107 11.8965 18.25 11.2475 18.25ZM7.17199 16.1875C7.72199 16.1875 8.20049 16.072 8.60749 15.841L11.7095 14.059C11.8195 13.982 11.8745 13.8775 11.8745 13.7455V12.3265L7.88149 14.62C7.63949 14.763 7.39749 14.763 7.15549 14.62L4.03699 12.8215C4.03699 12.8545 4.03149 12.893 4.02049 12.937C4.02049 12.981 4.02049 13.047 4.02049 13.135C4.02049 13.696 4.15249 14.213 4.41649 14.686C4.69149 15.148 5.07099 15.511 5.55499 15.775C6.03899 16.05 6.57799 16.1875 7.17199 16.1875ZM7.33699 13.498C7.40299 13.531 7.46349 13.5475 7.51849 13.5475C7.57349 13.5475 7.62849 13.531 7.68349 13.498L8.92099 12.7885L4.94449 10.4785C4.70249 10.3355 4.58149 10.121 4.58149 9.835V6.2545C4.03149 6.4965 3.59149 6.8705 3.26149 7.3765C2.93149 7.8715 2.76649 8.4215 2.76649 9.0265C2.76649 9.5655 2.90399 10.0825 3.17899 10.5775C3.45399 11.0725 3.81149 11.4465 4.25149 11.6995L7.33699 13.498ZM11.2475 17.161C11.8305 17.161 12.3585 17.029 12.8315 16.765C13.3045 16.501 13.6785 16.138 13.9535 15.676C14.2285 15.214 14.366 14.697 14.366 14.125V10.561C14.366 10.429 14.311 10.33 14.201 10.264L12.947 9.538V14.1415C12.947 14.4275 12.826 14.642 12.584 14.785L9.46549 16.5835C10.0045 16.9685 10.5985 17.161 11.2475 17.161ZM11.8745 11.122V8.878L10.01 7.822L8.12899 8.878V11.122L10.01 12.178L11.8745 11.122ZM7.05649 5.8585C7.05649 5.5725 7.17749 5.358 7.41949 5.215L10.538 3.4165C9.99899 3.0315 9.40499 2.839 8.75599 2.839C8.17299 2.839 7.64499 2.971 7.17199 3.235C6.69899 3.499 6.32499 3.862 6.04999 4.324C5.78599 4.786 5.65399 5.303 5.65399 5.875V9.4225C5.65399 9.5545 5.70899 9.659 5.81899 9.736L7.05649 10.462V5.8585ZM15.4385 13.7455C15.9885 13.5035 16.423 13.1295 16.742 12.6235C17.072 12.1175 17.237 11.5675 17.237 10.9735C17.237 10.4345 17.0995 9.9175 16.8245 9.4225C16.5495 8.9275 16.192 8.5535 15.752 8.3005L12.6665 6.5185C12.6005 6.4745 12.54 6.458 12.485 6.469C12.43 6.469 12.375 6.4855 12.32 6.5185L11.0825 7.2115L15.0755 9.538C15.1965 9.604 15.2845 9.692 15.3395 9.802C15.4055 9.901 15.4385 10.022 15.4385 10.165V13.7455ZM12.122 5.3635C12.364 5.2095 12.606 5.2095 12.848 5.3635L15.983 7.195C15.983 7.118 15.983 7.019 15.983 6.898C15.983 6.37 15.851 5.8695 15.587 5.3965C15.334 4.9125 14.9655 4.5275 14.4815 4.2415C14.0085 3.9555 13.4585 3.8125 12.8315 3.8125C12.2815 3.8125 11.803 3.928 11.396 4.159L8.29399 5.941C8.18399 6.018 8.12899 6.1225 8.12899 6.2545V7.6735L12.122 5.3635Z\"></path></svg>"
                    }'>gpt-4.1</option>
                    <option value="5" data-hs-select-option='{
                      "icon": "<svg class=\"shrink-0 size-5\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon-lg\"><path d=\"M11.2475 18.25C10.6975 18.25 10.175 18.1455 9.67999 17.9365C9.18499 17.7275 8.74499 17.436 8.35999 17.062C7.94199 17.205 7.50749 17.2765 7.05649 17.2765C6.31949 17.2765 5.63749 17.095 5.01049 16.732C4.38349 16.369 3.87749 15.874 3.49249 15.247C3.11849 14.62 2.93149 13.9215 2.93149 13.1515C2.93149 12.8325 2.97549 12.486 3.06349 12.112C2.62349 11.705 2.28249 11.2375 2.04049 10.7095C1.79849 10.1705 1.67749 9.6095 1.67749 9.0265C1.67749 8.4325 1.80399 7.8605 2.05699 7.3105C2.30999 6.7605 2.66199 6.2875 3.11299 5.8915C3.57499 5.4845 4.10849 5.204 4.71349 5.05C4.83449 4.423 5.08749 3.862 5.47249 3.367C5.86849 2.861 6.35249 2.465 6.92449 2.179C7.49649 1.893 8.10699 1.75 8.75599 1.75C9.30599 1.75 9.82849 1.8545 10.3235 2.0635C10.8185 2.2725 11.2585 2.564 11.6435 2.938C12.0615 2.795 12.496 2.7235 12.947 2.7235C13.684 2.7235 14.366 2.905 14.993 3.268C15.62 3.631 16.1205 4.126 16.4945 4.753C16.8795 5.38 17.072 6.0785 17.072 6.8485C17.072 7.1675 17.028 7.514 16.94 7.888C17.38 8.295 17.721 8.768 17.963 9.307C18.205 9.835 18.326 10.3905 18.326 10.9735C18.326 11.5675 18.1995 12.1395 17.9465 12.6895C17.6935 13.2395 17.336 13.718 16.874 14.125C16.423 14.521 15.895 14.796 15.29 14.95C15.169 15.577 14.9105 16.138 14.5145 16.633C14.1295 17.139 13.651 17.535 13.079 17.821C12.507 18.107 11.8965 18.25 11.2475 18.25ZM7.17199 16.1875C7.72199 16.1875 8.20049 16.072 8.60749 15.841L11.7095 14.059C11.8195 13.982 11.8745 13.8775 11.8745 13.7455V12.3265L7.88149 14.62C7.63949 14.763 7.39749 14.763 7.15549 14.62L4.03699 12.8215C4.03699 12.8545 4.03149 12.893 4.02049 12.937C4.02049 12.981 4.02049 13.047 4.02049 13.135C4.02049 13.696 4.15249 14.213 4.41649 14.686C4.69149 15.148 5.07099 15.511 5.55499 15.775C6.03899 16.05 6.57799 16.1875 7.17199 16.1875ZM7.33699 13.498C7.40299 13.531 7.46349 13.5475 7.51849 13.5475C7.57349 13.5475 7.62849 13.531 7.68349 13.498L8.92099 12.7885L4.94449 10.4785C4.70249 10.3355 4.58149 10.121 4.58149 9.835V6.2545C4.03149 6.4965 3.59149 6.8705 3.26149 7.3765C2.93149 7.8715 2.76649 8.4215 2.76649 9.0265C2.76649 9.5655 2.90399 10.0825 3.17899 10.5775C3.45399 11.0725 3.81149 11.4465 4.25149 11.6995L7.33699 13.498ZM11.2475 17.161C11.8305 17.161 12.3585 17.029 12.8315 16.765C13.3045 16.501 13.6785 16.138 13.9535 15.676C14.2285 15.214 14.366 14.697 14.366 14.125V10.561C14.366 10.429 14.311 10.33 14.201 10.264L12.947 9.538V14.1415C12.947 14.4275 12.826 14.642 12.584 14.785L9.46549 16.5835C10.0045 16.9685 10.5985 17.161 11.2475 17.161ZM11.8745 11.122V8.878L10.01 7.822L8.12899 8.878V11.122L10.01 12.178L11.8745 11.122ZM7.05649 5.8585C7.05649 5.5725 7.17749 5.358 7.41949 5.215L10.538 3.4165C9.99899 3.0315 9.40499 2.839 8.75599 2.839C8.17299 2.839 7.64499 2.971 7.17199 3.235C6.69899 3.499 6.32499 3.862 6.04999 4.324C5.78599 4.786 5.65399 5.303 5.65399 5.875V9.4225C5.65399 9.5545 5.70899 9.659 5.81899 9.736L7.05649 10.462V5.8585ZM15.4385 13.7455C15.9885 13.5035 16.423 13.1295 16.742 12.6235C17.072 12.1175 17.237 11.5675 17.237 10.9735C17.237 10.4345 17.0995 9.9175 16.8245 9.4225C16.5495 8.9275 16.192 8.5535 15.752 8.3005L12.6665 6.5185C12.6005 6.4745 12.54 6.458 12.485 6.469C12.43 6.469 12.375 6.4855 12.32 6.5185L11.0825 7.2115L15.0755 9.538C15.1965 9.604 15.2845 9.692 15.3395 9.802C15.4055 9.901 15.4385 10.022 15.4385 10.165V13.7455ZM12.122 5.3635C12.364 5.2095 12.606 5.2095 12.848 5.3635L15.983 7.195C15.983 7.118 15.983 7.019 15.983 6.898C15.983 6.37 15.851 5.8695 15.587 5.3965C15.334 4.9125 14.9655 4.5275 14.4815 4.2415C14.0085 3.9555 13.4585 3.8125 12.8315 3.8125C12.2815 3.8125 11.803 3.928 11.396 4.159L8.29399 5.941C8.18399 6.018 8.12899 6.1225 8.12899 6.2545V7.6735L12.122 5.3635Z\"></path></svg>"
                    }'>gpt-4o</option>
                  </select>
                </div>
                <!-- End Select -->

                <!-- Button -->
                <button type="button" class="flex justify-center items-center gap-x-1.5 size-8 text-sm text-foreground hover:bg-muted-hover rounded-lg 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 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>
                <!-- End Button -->

                <!-- Send Button -->
                <button type="button" class="inline-flex shrink-0 justify-center items-center size-8 text-sm 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">
                  <span class="sr-only">Send</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="m5 12 7-7 7 7" />
                    <path d="M12 19V5" />
                  </svg>
                </button>
                <!-- End Send Button -->
              </div>
              <!-- End Button Group -->
            </div>
          </div>
        </div>
        <!-- End Textarea -->

        <div class="mt-4">
          <!-- Label Button Group -->
          <div class="flex flex-wrap justify-center gap-1.5 sm:gap-2">
            <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
              </svg>
              Health
            </a>
            <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-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="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" />
                <path d="M22 10v6" />
                <path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
              </svg>
              Learn
            </a>
            <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-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 20v2" />
                <path d="M12 2v2" />
                <path d="M17 20v2" />
                <path d="M17 2v2" />
                <path d="M2 12h2" />
                <path d="M2 17h2" />
                <path d="M2 7h2" />
                <path d="M20 12h2" />
                <path d="M20 17h2" />
                <path d="M20 7h2" />
                <path d="M7 20v2" />
                <path d="M7 2v2" />
                <rect x="4" y="4" width="16" height="16" rx="2" />
                <rect x="8" y="8" width="8" height="8" rx="1" />
              </svg>
              Technology
            </a>
            <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-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="M10 2v2" />
                <path d="M14 2v2" />
                <path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" />
                <path d="M6 2v2" />
              </svg>
              Life stuff
            </a>
            <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-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="M6 18h8" />
                <path d="M3 22h18" />
                <path d="M14 22a7 7 0 1 0 0-14h-1" />
                <path d="M9 14h2" />
                <path d="M9 12a2 2 0 0 1-2-2V6h6v4a2 2 0 0 1-2 2Z" />
                <path d="M12 6V3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3" />
              </svg>
              Science
            </a>
            <a class="py-1.5 px-2.5 inline-flex items-center gap-x-1.5 text-sm text-foreground bg-surface hover:text-primary-hover rounded-lg focus:outline-hidden focus:text-primary-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="m5 8 6 6" />
                <path d="m4 14 6-6 2-3" />
                <path d="M2 5h12" />
                <path d="M7 2h1" />
                <path d="m22 22-5-10-5 10" />
                <path d="M14 18h6" />
              </svg>
              Language
            </a>
          </div>
          <!-- End Label Button Group -->
        </div>
      </div>
      <!-- End Body -->
    </div>
  </main>
  <!-- ========== END MAIN CONTENT ========== -->

  <!-- JS Implementing Plugins -->

  <!-- JS PLUGINS -->
  <!-- Required plugins -->
  <script src="https://cdn.jsdelivr.net/npm/preline/dist/index.js"></script>
  <!-- Clipboard -->
  <script src="https://cdn.jsdelivr.net/npm/clipboard/dist/clipboard.min.js"></script>
  <script src="https://preline.co/assets/js/hs-copy-clipboard-helper.js"></script>

  <!-- JS THIRD PARTY PLUGINS -->
  <!-- Google Analytics. Global site tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-B73TDMXKF5"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
  
    function gtag() {
      dataLayer.push(arguments);
    }
  
    gtag('js', new Date());
    gtag('config', 'G-B73TDMXKF5');
  </script>
</body>
</html>