<div data-controller="sidebar">
  <aside class="tw-sidebar">
  <!-- Logo -->
  <div class="tw-sidebar-logo">
    <a href="#" class="tw-sidebar-logo-link">
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
        <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
      </svg>
    </a>
  </div>
  <!-- Navigation -->
  <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
    <!-- Insights -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="insights"
            data-label="Insights"
            aria-expanded="false">
      <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
      <span class="tw:sr-only">Insights</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
    </button>
    <!-- Parents & Enquiries -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="parents"
            data-label="Parents & Enquiries"
            aria-expanded="false">
      <i class="fa-light fa-user-group tw-sidebar-icon"></i>
      <span class="tw:sr-only">Parents & Enquiries</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
    </button>
    <!-- Communications & Events -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="communications"
            data-label="Communications & Events"
            aria-expanded="false">
      <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
      <span class="tw:sr-only">Communications & Events</span>
    </button>
    <!-- Registered Students -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="students"
            data-label="Registered Students"
            aria-expanded="false">
      <i class="fa-light fa-users tw-sidebar-icon"></i>
      <span class="tw:sr-only">Registered Students</span>
    </button>
    <!-- Marketing -->
    <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
    <!-- Enrolments -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="enrolments"
            data-label="Enrolments"
            aria-expanded="false">
      <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
      <span class="tw:sr-only">Enrolments</span>
    </button>
    <!-- Applicaa Futures -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="applicaafutures"
            data-label="Applicaa Futures"
            aria-expanded="false">
      <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
      <span class="tw:sr-only">Applicaa Futures</span>
    </button>
    <!-- Data -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="data"
            data-label="Data"
            aria-expanded="false">
      <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
      <span class="tw:sr-only">Data</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
    </button>
    <!-- Manage Users -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="manageusers"
            data-label="Manage Users"
            aria-expanded="false">
      <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
      <span class="tw:sr-only">Manage Users</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
    </button>
    <!-- Platform Essentials -->
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="essentials"
            data-label="Platform Essentials"
            aria-expanded="false">
      <i class="fa-light fa-bell tw-sidebar-icon"></i>
      <span class="tw:sr-only">Platform Essentials</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</span>
    </button>
  </nav>
  <!-- Bottom Section -->
  <div class="tw-sidebar-bottom">
    <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="settings"
            data-label="Settings"
            aria-expanded="false">
      <i class="fa-light fa-cogs tw-sidebar-icon"></i>
      <span class="tw:sr-only">Settings</span>
    </button>
  </div>
</aside>
  <!-- Parents & Enquiries Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="parents"
     aria-label="Parents & Enquiries navigation">
  <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item tw-disabled">
      <span class="tw-drawer-item-label">Parents</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Enquiries</span>
    </a>
  </nav>
</div>
<!-- Insights Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="insights"
     aria-label="Insights navigation">
  <div class="tw-sidebar-drawer-header">INSIGHTS</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Summary</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Pipeline</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Map view</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Feeder schools</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Events</span>
    </a>
  </nav>
</div>
<!-- Registered Students Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="students"
     aria-label="Registered Students navigation">
  <div class="tw-sidebar-drawer-header">REGISTERED STUDENTS</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Incomplete</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">
        Awaiting Reference
        <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
              data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
              data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
              data-demo-learn-more="https://helpdesk.applicaa.com/">
          <i class="fa-regular fa-clapperboard-play"></i>
          Demo
        </span>
      </span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">
        Completed
        <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
              data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
              data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
              data-demo-learn-more="https://helpdesk.applicaa.com/">
          <i class="fa-regular fa-clapperboard-play"></i>
          Demo
        </span>
      </span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Declined</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Withdrawn</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Deadline Missed</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Skipped Payment</span>
    </a>
  </nav>
</div>
<!-- Enrolments Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="enrolments"
     aria-label="Enrolments navigation">
  <div class="tw-sidebar-drawer-header">BULK ENROLMENT</div>
  <nav class="tw-drawer-nav">
    <a href="/lookbook/preview/projects/enrolment/bulk_enrolment" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Bulk Enrolment</span>
    </a>
  </nav>
  <div class="tw-sidebar-drawer-header">
    ENROLMENT
    <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive tw:normal-case"
          data-controller="demo"
          data-action="click->demo#show"
          data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
          data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
          data-demo-learn-more="https://helpdesk.applicaa.com/">
      <i class="fa-regular fa-clapperboard-play"></i>
      Demo
    </span>
  </div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Details to be checked</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Ready to Enrol</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Enrolled</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Enrolment Waiting</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Enrolment Declined</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Enrolment Activities</span>
    </a>
  </nav>
  <div class="tw-sidebar-drawer-header">REPORT</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Enrolment Report</span>
    </a>
  </nav>
  <div class="tw-sidebar-drawer-header">POST ENROLMENT</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">CTF/File Request</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Transition Tool</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Sorting Hat</span>
    </a>
  </nav>
</div>
<!-- Applicaa Futures Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="applicaafutures"
     aria-label="Applicaa Futures navigation">
  <div class="tw-sidebar-drawer-header">APPLICAA FUTURES</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">One Reference</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Destination Tracker</span>
    </a>
  </nav>
</div>
<!-- Data Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="data"
     aria-label="Data navigation">
  <div class="tw-sidebar-drawer-header">DATA</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Import</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">
        Export
        <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
              data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
              data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
              data-demo-learn-more="https://helpdesk.applicaa.com/">
          <i class="fa-regular fa-clapperboard-play"></i>
          Demo
        </span>
      </span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Uploaded Files</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">
        First Media Applications
        <span class="tw-badge tw-badge-danger tw-badge-sm">182</span>
      </span>
    </a>
  </nav>
</div>
<!-- Manage Users Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="manageusers"
     aria-label="Manage Users navigation">
  <div class="tw-sidebar-drawer-header">MANAGE USERS</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Manually Add People</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">
        Duplicate Students
        <span class="tw-badge tw-badge-danger tw-badge-sm">211</span>
        <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
              data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
              data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
              data-demo-learn-more="https://helpdesk.applicaa.com/">
          <i class="fa-regular fa-clapperboard-play"></i>
          Demo
        </span>
      </span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">
        Duplicate Agencies
        <span class="tw-badge tw-badge-danger tw-badge-sm">7</span>
      </span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Duplicate Contacts</span>
    </a>
  </nav>
</div>
<!-- Platform Essentials Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="essentials"
     aria-label="Platform Essentials navigation">
  <div class="tw-sidebar-drawer-header">PLATFORM ESSENTIALS</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">
        Applicaa Journey
        <span class="tw-badge tw-badge-danger tw-badge-sm">13</span>
      </span>
    </a>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Product Requests & Updates</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu">
      <a href="#" class="tw-drawer-subitem">Feature Requests</a>
      <a href="#" class="tw-drawer-subitem">Road Map</a>
      <a href="#" class="tw-drawer-subitem">Vote</a>
      <a href="#" class="tw-drawer-subitem">Recent Updates</a>
    </div>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Time Saved With Admissions+</span>
    </a>
  </nav>
</div>
<!-- Communications & Events Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="communications"
     aria-label="Communications & Events navigation">
  <div class="tw-sidebar-drawer-header">COMMUNICATIONS & EVENTS</div>
  <nav class="tw-drawer-nav">
    <!-- Communications Section (expandable) -->
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">
        Communications
        <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
              data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
              data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
              data-demo-learn-more="https://helpdesk.applicaa.com/">
          <i class="fa-regular fa-clapperboard-play"></i>
          Demo
        </span>
      </span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu">
      <a href="#" class="tw-drawer-subitem">
        <i class="fa-regular fa-circle-info"></i>
        Manual Messages
      </a>
      <a href="#" class="tw-drawer-subitem">
        <i class="fa-regular fa-circle-info"></i>
        Automated Messages
      </a>
      <a href="#" class="tw-drawer-subitem">
        <i class="fa-regular fa-circle-info"></i>
        Scheduled Messages
      </a>
      <a href="#" class="tw-drawer-subitem">Message Summary</a>
    </div>
    <!-- Meetings (single item) -->
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">
        Meetings
        <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
              data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
              data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
              data-demo-learn-more="https://helpdesk.applicaa.com/">
          <i class="fa-regular fa-clapperboard-play"></i>
          Demo
        </span>
      </span>
    </a>
    <!-- Events Section (expandable) -->
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">
        Events
        <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
              data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
              data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
              data-demo-learn-more="https://helpdesk.applicaa.com/">
          <i class="fa-regular fa-clapperboard-play"></i>
          Demo
        </span>
      </span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu">
      <a href="#" class="tw-drawer-subitem">Event Calendar</a>
      <a href="#" class="tw-drawer-subitem">Event Guests</a>
      <a href="#" class="tw-drawer-subitem">Event Waitlists</a>
      <a href="#" class="tw-drawer-subitem">Event Forms</a>
    </div>
    <!-- Taster Day Section (expandable with secondary color) -->
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">
        Taster Day
        <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
              data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
              data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
              data-demo-learn-more="https://helpdesk.applicaa.com/">
          <i class="fa-regular fa-clapperboard-play"></i>
          Demo
        </span>
      </span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu">
      <a href="#" class="tw-drawer-subitem">Taster Day Configuration</a>
      <a href="#" class="tw-drawer-subitem">Student Submissions & Timetables</a>
    </div>
  </nav>
</div>
<!-- Marketing & Events Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="marketing"
     aria-label="Marketing & Events navigation">
  <div class="tw-sidebar-drawer-header">MARKETING & EVENTS</div>
  <nav class="tw-drawer-nav">
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Marketing Campaigns</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu">
      <a href="#" class="tw-drawer-subitem">Campaigns</a>
      <a href="#" class="tw-drawer-subitem">Reports</a>
    </div>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Workflows</span>
    </a>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Emails</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu">
      <a href="#" class="tw-drawer-subitem">Manual Emails</a>
      <a href="#" class="tw-drawer-subitem">Automated Emails</a>
      <a href="#" class="tw-drawer-subitem">Email Templates</a>
    </div>
    <a href="#" class="tw-drawer-item tw-disabled">
      <span class="tw-drawer-item-label">Notifications</span>
    </a>
    <a href="#" class="tw-drawer-item tw-disabled">
      <span class="tw-drawer-item-label">SMS</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Meeting</span>
    </a>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Events</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu">
      <a href="#" class="tw-drawer-subitem">Calendar</a>
      <a href="#" class="tw-drawer-subitem">Guests</a>
      <a href="#" class="tw-drawer-subitem">Waitlists</a>
      <a href="#" class="tw-drawer-subitem">Forms</a>
    </div>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Taster Day</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu">
      <a href="#" class="tw-drawer-subitem">Configurations</a>
      <a href="#" class="tw-drawer-subitem">Submissions & Timetables</a>
    </div>
  </nav>
</div>
<!-- Settings Drawer -->
<div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="settings"
     aria-label="Settings navigation">
  <div class="tw-sidebar-drawer-header">SETTINGS</div>
  <nav class="tw-drawer-nav">
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Application Form</span>
    </a>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Subject Options</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Form Settings</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">School Settings</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Enrolment Settings</span>
    </a>
    <a href="#" class="tw-drawer-item">
      <span class="tw-drawer-item-label">Enrolment Navigator</span>
    </a>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Properties</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
            aria-expanded="false">
      <span class="tw-drawer-item-label">Security</span>
      <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M6 4l4 4-4 4"></path>
      </svg>
    </button>
    <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
  </nav>
</div>
  <header class="tw-topbar" role="banner">
  <div class="tw-topbar-left">
    <!-- Context Dropdown -->
    <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
      <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
        <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">2024/2025 - Year 7 Main Entry</span>
        <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="m2 5 6 6 6-6"/>
        </svg>
      </button>
      <div class="tw-dropdown-menu tw-dropdown-menu-wide tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1">
        <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-main">
          <span class="tw-dropdown-item-text">2024/2025 - Year 7 Main Entry</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-late">
          <span class="tw-dropdown-item-text">2024/2025 - Year 7 Late Entry</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y8">
          <span class="tw-dropdown-item-text">2024/2025 - Year 8 Admissions</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y9">
          <span class="tw-dropdown-item-text">2024/2025 - Year 9 In-Year</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-main">
          <span class="tw-dropdown-item-text">2025/2026 - Year 7 Main Entry</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-late">
          <span class="tw-dropdown-item-text">2025/2026 - Year 7 Late Entry</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y8">
          <span class="tw-dropdown-item-text">2025/2026 - Year 8 Admissions</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y9">
          <span class="tw-dropdown-item-text">2025/2026 - Year 9 In-Year</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y7-main">
          <span class="tw-dropdown-item-text">2026/2027 - Year 7 Main Entry</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y8">
          <span class="tw-dropdown-item-text">2026/2027 - Year 8 Admissions</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2023-y12">
          <span class="tw-dropdown-item-text">2023/2024 - Year 12 Sixth Form</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y12">
          <span class="tw-dropdown-item-text">2024/2025 - Year 12 Sixth Form</span>
          <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
    <!-- Search -->
    <div class="tw-topbar-search">
      <div class="tw-input-group tw-has-icon-start">
        <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
        <input type="search" class="tw-form-control" placeholder="Search...">
      </div>
    </div>
  </div>
  <div class="tw-topbar-right">
    <!-- Action Buttons -->
    <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
      <i class="fa-solid fa-gift tw-icon-16"></i>
      Refer<br> & Save
    </button>
    <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
      <i class="fa-solid fa-users tw-icon-16"></i>
      Applicaa<br> Community
    </button>
    <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
      <i class="fa-solid fa-comment-question tw-icon-16"></i>
      Support<br> & Requests
    </button>
    <div class="tw-topbar-action-icons">
      <!-- Notification Icon -->
      <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-bell tw-icon-16"></i>
      </button>
    </div>
    <div class="tw-topbar-divider"></div>
    <!-- User Avatar Dropdown -->
    <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
      <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
        <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
          <span>JD</span>
        </div>
      </button>
      <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
        <div class="tw-dropdown-header">John Doe</div>
        <div class="tw-dropdown-divider"></div>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Referrals & billing</span>
        </button>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Password & security</span>
        </button>
        <div class="tw-dropdown-divider"></div>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Multiple form</span>
        </button>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Email preferences</span>
        </button>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Logout</span>
        </button>
      </div>
    </div>
  </div>
</header>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw-h-screen-offset">
    <div class="tw:flex tw:h-full tw:items-stretch tw-agent-view" id="tw-agent-view">
      <!-- Agent Main Content -->
      <div id="agent-main-content" class="tw-agent-main-content">
        <!-- Agent Content Header (always visible; title + new chat hidden on homepage) -->
        <div id="agent-content-header" class="tw:w-full tw:bg-white tw:border-b tw:border-transparent tw:px-5 tw:pr-3 tw:py-3 tw:overflow-hidden tw:transition-all tw:duration-200 tw:max-h-16 tw:opacity-100 tw:flex tw:items-center tw:gap-2">
          <h2 id="agent-content-title" class="tw-h3 tw:mb-0 tw:opacity-0 tw:transition-opacity tw:duration-200" style="margin-bottom: 0;">Year 7 open day event setup</h2>
          <button id="agent-rename-btn" class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm tw:hidden" type="button" aria-label="Rename this chat" data-controller="tooltip" data-tooltip-content-value="Rename this chat">
            <i class="fa-regular fa-pen-to-square"></i>
          </button>
          <div class="tw:flex-1"></div>
          <div id="agent-search-input" class="tw-input-group tw-input-group-sm tw-has-icon-start tw:w-auto tw:hidden" style="width: auto">
            <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
            <input type="search" class="tw-form-control tw:w-[360px] tw:max-w-[24px] tw:focus:max-w-[360px] tw:opacity-0 tw:focus:opacity-100 tw:cursor-pointer tw:focus:cursor-text" placeholder="Search in this chat..." style="border: none; outline: none; box-shadow: none; padding-right: 0; transition: 0.2s all ease;">
          </div>
          <button id="agent-new-chat-btn" class="tw-btn tw-btn-tertiary tw-btn-sm tw:hidden" type="button" aria-label="New chat" data-controller="tooltip" data-tooltip-content-value="New chat"><i class="fa-regular fa-plus"></i> New chat</button>
          <button id="agent-sidebar-toggle" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Show sidebar" data-controller="tooltip" data-tooltip-content-value="Show sidebar"><i class="fa-regular fa-sidebar-flip"></i></button>
        </div>
        <!-- Agent Conversation Body -->
        <div id="agent-conversation-body" class="tw:w-full tw:flex-col tw:overflow-y-auto tw:transition-all tw:duration-200"></div>
        <!-- Agent Main Input -->
        <div id="agent-main-input" class="tw:flex tw:w-full tw:flex-col tw:gap-4 tw:max-w-4xl tw:mx-auto tw:pt-[10vh] tw:transition-all tw:duration-200 tw:px-4">
          <!-- ── Hero — Avatar + Greeting ──────────────────────────────── -->
          <div id="agent-hero" class="tw:text-center tw:flex tw:flex-col tw:items-center tw:overflow-hidden tw:transition-all tw:duration-200">
            <div class="tw-avatar tw-avatar-primary tw-avatar-xl tw:mb-5" role="img" aria-label="Emma, Online">
              <span>E</span>
              <span class="tw-avatar-status tw-avatar-status-online"><span class="tw:sr-only">Online</span></span>
            </div>
            <h1 class="tw-text-display">Good afternoon, James</h1>
          </div>
          <!-- ── Composer — Prominent Input Bar ────────────────────────── -->
          <div class="tw-card tw-card-elevated tw:rounded-2xl tw:overflow-hidden tw:w-full tw:mx-auto tw:cursor-text">
            <!-- Input row -->
            <div class="tw:flex tw:items-center tw-emma-input-container" id="emma-input-container">
              <!-- <i class="fa-regular fa-wand-magic-sparkles tw:text-primary tw:text-lg tw:flex-shrink-0"></i> -->
              <textarea
                type="text"
                name="emma-input"
                class="tw-emma-input tw:transition-[height] tw:duration-200"
                rows="2"
                data-old-placeholder="Ask Emma anything or describe what you need..."
                placeholder="Ask me anything or describe what you need..."
                aria-label="Ask Emma"></textarea>
            </div>
            <!-- Toolbar row -->
            <div class="tw:flex tw:items-center tw:gap-0 tw:p-2 tw:pt-0.5">
              <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Attach file"
                      data-controller="tooltip" data-tooltip-content-value="Attach file" data-tooltip-placement-value="top">
                <i class="fa-regular tw-icon-16 fa-paperclip"></i>
              </button>
              <!-- <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="SmartSearch"
                      data-controller="tooltip" data-tooltip-content-value="SmartSearch" data-tooltip-placement-value="top">
                <i class="fa-regular tw-icon-16 fa-magnifying-glass"></i>
              </button>
              <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Analyze"
                      data-controller="tooltip" data-tooltip-content-value="Analyze" data-tooltip-placement-value="top">
                <i class="fa-regular tw-icon-16 fa-chart-mixed"></i>
              </button> -->
              <!-- Right side -->
              <div class="tw:ml-auto tw:flex tw:items-center tw:gap-2" data-controller="voice-toggle">
                <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Voice mode"
                        data-controller="tooltip" data-tooltip-content-value="Voice mode (Alt)" data-tooltip-placement-value="top"
                        data-action="click->voice-toggle#toggle" data-voice-toggle-target="voiceBtn">
                  <i class="fa-regular tw-icon-16 fa-microphone"></i>
                </button>
                <button id="agent-send-btn" class="tw-btn tw-btn-primary tw-btn-icon tw-btn-lg" type="button" aria-label="Send"
                        data-controller="tooltip" data-tooltip-content-value="Send" data-tooltip-placement-value="top"
                        data-voice-toggle-target="sendBtn">
                  <i class="fa-regular tw-icon-16 fa-arrow-up"></i>
                </button>
              </div>
            </div>
          </div>
          <!-- ── Suggestion Box ──────────────────────────────────────── -->
          <div id="suggestion-box" class="tw:mx-auto tw:overflow-hidden tw:transition-all tw:duration-200">
            <!-- Suggested Areas: Agent extended with specialized capabilities per area -->
            <div class="tw:flex tw:flex-col tw:justify-center tw:gap-2 tw:px-2.5">
              <span class="tw:text-neutral-500 tw:font-medium tw:w-full tw:text-center tw:mb-1">I can help you with</span>
              <div class="tw:flex tw:gap-2 tw:flex-wrap tw:justify-center">
                <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="events">
                  <i class="tw:hidden fa-regular fa-calendar tw:mr-1"></i>Events/Meetings
                </button>
                <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="leads">
                  <i class="tw:hidden fa-regular fa-users tw:mr-1"></i>Leads
                </button>
                <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="enrolment">
                  <i class="tw:hidden fa-regular fa-backpack tw:mr-1"></i>Enrolment
                </button>
                <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="communications">
                  <i class="tw:hidden fa-regular fa-comments tw:mr-1"></i>Communications
                </button>
                <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="insights">
                  <i class="tw:hidden fa-regular fa-chart-line tw:mr-1"></i>Insights
                </button>
                <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="migration">
                  <i class="tw:hidden fa-regular fa-arrows-rotate tw:mr-1"></i>Migration
                </button>
              </div>
            </div>
            <!-- Suggested prompts: Show different prompts when a specific area selected -->
            <div id="prompts-container" class="tw:p-2 tw:mt-2 tw:transition-opacity tw:duration-75 tw:opacity-0 tw:hidden">
              <ul id="suggested-prompts"></ul>
            </div>
          </div>
        </div>
      </div>
      <!-- Agent Activity Sidebar (collapsed on homepage, expands on chat mode) -->
      <div id="agent-activity-sidebar" class="tw-agent-activity-sidebar" style="width: 0;">
        <div data-controller="tabs" data-tabs-index-value="1" class="tw-agent-activity-sidebar-content">
          <!-- Tab headers -->
          <div class="tw-tabs tw-tabs-justified tw:pt-0.5" role="tablist" style="gap: 0;">
            <button id="activity-tab" class="tw-tab tw:hidden" role="tab" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"><div class="tw:py-1">Activity</div></button>
            <button class="tw-tab tw-active" role="tab" data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"><div class="tw:py-1">Recent chats</div></button>
          </div>
          <div class="tw-tab-content tw:mt-0" style="margin-top: 0;">
            <!-- Tab 1: Activity -->
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <!-- Progress Checklist -->
              <div class="tw:p-5 tw:pb-8">
                <h2 class="tw-card-title tw:mb-0" style="margin-bottom: 0;">Progress</h2>
                <div class="tw:flex tw:gap-3 tw:items-center tw:py-3 tw:text-neutral-400 tw:max-w-80">
                  <i class="fa-light fa-list-check tw:text-4xl tw:opacity-80 tw:w-9 tw:block tw:shrink-0 tw:text-center"></i>
                  <p class="tw:text-body-s tw:leading-body-xs">Live track your tasks progress as the agent works.</p>
                </div>
              </div>
              <div class="tw:p-5 tw:pb-8 tw:hidden">
                <h2 class="tw-card-title tw:mb-0" style="margin-bottom: 0;">Progress</h2>
                <p class="tw:text-body-s fw-bold tw:text-neutral-600 tw:mb-2.5">Setup Year 7 Open Day Event</p>
                <div class="tw:space-y-2">
                  <!-- Completed phase -->
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-green-500 tw:flex tw:items-center tw:justify-center tw:shrink-0">
                      <i class="fa-solid fa-check tw:text-white tw:text-[8px]"></i>
                    </span>
                    <span class="tw:text-body-s tw:leading-body-xs tw:text-neutral-400 tw:line-through">Gathering details</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-green-500 tw:flex tw:items-center tw:justify-center tw:shrink-0">
                      <i class="fa-solid fa-check tw:text-white tw:text-[8px]"></i>
                    </span>
                    <span class="tw:text-body-s tw:leading-body-xs tw:text-neutral-400 tw:line-through">Setting up event</span>
                  </div>
                  <!-- Active phase -->
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <!-- <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-primary tw:flex tw:items-center tw:justify-center tw:shrink-0 tw:animate-pulse"></span> -->
                    <svg width="120" height="120" viewBox="0 0 120 120"  class="tw:w-4 tw:h-4 tw:animate-spin tw:text-info">
                      <circle
                        cx="60"
                        cy="60"
                        r="50"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="20"
                        stroke-linecap="round"
                        stroke-dasharray="235.5 314"
                        transform="rotate(-90 60 60)"
                      />
                    </svg>
                    <span class="tw:text-body-s tw:leading-body-xs tw:text-primary fw-semibold">Send reminder emails</span>
                  </div>
                  <!-- Upcoming phase -->
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-neutral-200 tw:shrink-0"></span>
                    <span class="tw:text-body-s tw:leading-body-xs tw:text-neutral-400">Post-event monitoring</span>
                  </div>
                </div>
              </div>
              <div class="tw:p-5 tw:pb-8 tw:border-t tw:border-neutral-translucent-200">
                <h2 class="tw-card-title tw:mb-0" style="margin-bottom: 0;">Recent activities</h2>
                <div class="tw:flex tw:gap-3 tw:items-center tw:py-3 tw:text-neutral-400 tw:max-w-80">
                  <i class="fa-light fa-clipboard-list tw:text-4xl tw:opacity-80 tw:w-9 tw:block tw:shrink-0 tw:text-center"></i>
                  <p class="tw:text-body-s tw:leading-body-xs">Agent's activities will appear here as the conversation progresses.</p>
                </div>
              </div>
              <div class="tw:p-5 tw:pb-8 tw:hidden tw:border-t tw:border-neutral-translucent-200">
                <!-- <h2 class="tw-card-title tw:mb-0" style="margin-bottom: 0;">Activity logs</h2> -->
                <h2 class="tw-card-title tw:mb-0" style="margin-bottom: 0;">Recent activities</h2>
                <!-- Date divider: Today -->
                <!-- <div class="tw-agent-timeline-divider">
                  <span class="tw-agent-timeline-divider-label">Today</span><div class="tw-agent-timeline-divider-line"></div>
                </div> -->
                <!-- Feed Item 1: done -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-success-subtle tw:capitalize">done</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-success tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>done</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">2m ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Year 7 Open Evening</p>
                  <p class="tw-agent-timeline-item-desc">Draft event created — 15 Oct 2026, 18:00– 20:00, 200 seats</p>
                </div>
                <!-- Feed Item 2: review -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-warning-subtle tw:capitalize">review</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-warning tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>review ·</span>
                    <span class="tw:text-body-xs tw:text-green-700 fw-semibold tw:shrink-0">Approved</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">5m ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Publish Year 7 Open Evening</p>
                  <p class="tw-agent-timeline-item-desc">Awaiting approval to make event live</p>
                </div>
                <!-- Feed Item 3: done -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-success-subtle tw:capitalize">done</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-success tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>done</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">8m ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Year 7 Open Evening — Live</p>
                  <p class="tw-agent-timeline-item-desc">Event published. Registration open to all Year 7 families.</p>
                </div>
                <!-- Feed Item 4: insight -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-info-subtle tw:capitalize">insight</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-info tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>insight</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">15m ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Registration pace below target</p>
                  <p class="tw-agent-timeline-item-desc">33% capacity at 3 weeks — 41% behind last year's pace</p>
                </div>
                <!-- Date divider: Yesterday -->
                <div class="tw-agent-timeline-divider">
                  <span class="tw-agent-timeline-divider-label">Yesterday</span><div class="tw-agent-timeline-divider-line"></div>
                </div>
                <!-- Feed Item 5: review -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-warning-subtle tw:capitalize">review</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-warning tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>review</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">1d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Pre-event reminder awaiting review</p>
                  <p class="tw-agent-timeline-item-desc">187 families — ready to send 48hrs before event</p>
                </div>
                <!-- Feed Item 6: auto -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-secondary-subtle tw:capitalize">auto</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-info tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>auto</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">1d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">12 registration confirmations sent</p>
                  <p class="tw-agent-timeline-item-desc">Total registered: 178 of 200</p>
                </div>
                <!-- Feed Item 7: done -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-success-subtle tw:capitalize">done</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-success tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>done</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">1d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Event created (draft)</p>
                  <p class="tw-agent-timeline-item-desc">Open Morning Tours with 3 sessions</p>
                </div>
                <!-- Feed Item 8: done -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-success-subtle tw:capitalize">done</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-success tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>done</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">1d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Event published</p>
                  <p class="tw-agent-timeline-item-desc">3 tour dates now live</p>
                </div>
                <!-- Date divider: 20 Mar -->
                <div class="tw-agent-timeline-divider">
                  <span class="tw-agent-timeline-divider-label">20 Mar</span><div class="tw-agent-timeline-divider-line"></div>
                </div>
                <!-- Feed Item 9: insight -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-info-subtle tw:capitalize">insight</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-info tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>insight</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">3d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Tour capacity alert</p>
                  <p class="tw-agent-timeline-item-desc">8/15 filled for November tour</p>
                </div>
                <!-- Feed Item 10: done -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-success-subtle tw:capitalize">done</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-success tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>done</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">3d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Briefing generated</p>
                  <p class="tw-agent-timeline-item-desc">13-family briefing for November tour</p>
                </div>
                <!-- Feed Item 11: review -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-warning-subtle tw:capitalize">review</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-warning tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>review</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">3d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Follow-up emails drafted</p>
                  <p class="tw-agent-timeline-item-desc">Thank-you + no-show emails</p>
                </div>
                <!-- Feed Item 12: auto -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-secondary-subtle tw:capitalize">auto</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-info tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>auto</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">3d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">PA notifications</p>
                  <p class="tw-agent-timeline-item-desc">13 notifications to Jane Smith</p>
                </div>
                <!-- Feed Item 13: done -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-success-subtle tw:capitalize">done</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-success tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>done</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">3d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Waitlist enabled</p>
                  <p class="tw-agent-timeline-item-desc">Waitlist with auto-promotion for Open Evening</p>
                </div>
                <!-- Feed Item 14: insight -->
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <!-- <span class="tw-badge tw-badge-sm tw-badge-info-subtle tw:capitalize">insight</span> -->
                    <span class="tw:text-body-xs tw:text-neutral-500 tw:capitalize"><span class="tw:bg-info tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>insight</span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 tw:whitespace-nowrap tw:shrink-0">3d ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Waitlist size alert</p>
                  <p class="tw-agent-timeline-item-desc">35 families on waitlist — exceeds likely openings</p>
                </div>
              </div>
            </div>
            <!-- End Tab 1: Activity -->
            <!-- Tab 2: Recent chats -->
            <div class="tw-tab-panel tw-active" role="tabpanel" data-tabs-target="panel">
              <div class="tw:p-2">
                <div class="tw-input-group tw-has-icon-start">
                  <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
                  <input type="search" class="tw-form-control" placeholder="Search your chats...">
                </div>
              </div>
              <ul class="tw:px-2 tw:space-y-0.5">
                <!-- <li class="tw-agent-timeline-divider tw:px-3">
                  <span class="tw-agent-timeline-divider-label">Today</span><div class="tw-agent-timeline-divider-line"></div>
                </li> -->
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Year 7 open day event setup</span></button></li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Tour registration numbers</span></button></li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Enquiry follow-up reminders</span></button></li>
                <li class="tw-agent-timeline-divider tw:px-3 tw:pt-3">
                  <span class="tw-agent-timeline-divider-label">Yesterday</span><div class="tw-agent-timeline-divider-line"></div>
                </li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Offer letters for approved applicants</span></button></li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Waitlist management Year 9</span></button></li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Newsletter delivery report</span></button></li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Feeder school analysis</span></button></li>
                <li class="tw-agent-timeline-divider tw:px-3 tw:pt-3">
                  <span class="tw-agent-timeline-divider-label">23 Mar</span><div class="tw-agent-timeline-divider-line"></div>
                </li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Data migration field mapping</span></button></li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Application deadline comms</span></button></li>
                <li><button class="tw-btn tw-btn-tertiary tw:text-left tw:w-full" type="button"><span class="tw:truncate">Attendance report Year 8</span></button></li>
              </ul>
            </div>
            <!-- End Tab 2: Recent chats -->
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const promptsByArea = {
      events: [
        { label: "Create an open day event for Year 7 on 15th May", detail: "Create an open day event for Year 7 entry on Thursday 15th May, set up online registration with a capacity of 200 families, and send confirmation emails automatically" },
        { label: "Show me all upcoming tour dates with availability", detail: "Show me all upcoming school tour dates for this term, including how many spots are still available for each session and which year groups they cover" },
        { label: "Set up a virtual Q&A session for international families", detail: "Set up a virtual Q&A session on Zoom for international families applying for Year 9 entry, schedule it for next Wednesday evening at 7pm GMT, and draft an invitation email" },
        { label: "How many families registered for Saturday's open morning?", detail: "How many families have registered for this Saturday's open morning so far, and can you break it down by year group and show me the registration trend over the past week?" },
        { label: "Clone last term's Year 9 taster day with updated dates", detail: "Clone last term's Year 9 taster day event, update the dates to the second week of June, keep the same venue and session structure, and adjust the registration deadline accordingly" }
      ],
      leads: [
        { label: "Show me all enquiries received this week", detail: "Show me all new enquiries that came in this week, grouped by source channel, and highlight any that haven't been assigned to a staff member yet" },
        { label: "Which leads haven't been contacted in over 7 days?", detail: "Which leads haven't been contacted in over 7 days? Sort them by enquiry date so I can prioritise the oldest ones first, and flag any that came from paid advertising" },
        { label: "Break down lead sources for the current admissions cycle", detail: "Break down where our leads are coming from for the current admissions cycle — compare website, referrals, open days, and social media, and show how each source converts to applications" },
        { label: "What's our enquiry-to-application conversion rate this term?", detail: "What's our enquiry-to-application conversion rate this term compared to the same period last year? Break it down by year group and highlight any significant changes" },
        { label: "Import new enquiry contacts from the open day sign-up sheet", detail: "Import the new enquiry contacts from Saturday's open day sign-up sheet, check for duplicates against existing records, and auto-assign them to the Year 7 admissions team" }
      ],
      enrolment: [
        { label: "Show me all applications awaiting decision", detail: "Show me all submitted applications that still need a decision, sorted by how long they've been waiting, and flag any that are past the 10-day response target" },
        { label: "Draft offer letters for the 12 approved Year 7 applicants", detail: "Draft offer letters for the 12 approved Year 7 applicants using our standard template, include the deposit deadline of 30th April, and prepare them for my review before sending" },
        { label: "How many students are on the waitlist for Year 9?", detail: "How many students are currently on the waitlist for Year 9 entry, what's their ranked order, and have any families on the list withdrawn their application since last month?" },
        { label: "Which applications are missing required documents?", detail: "Which applications are still missing required documents? Group them by document type — references, birth certificates, school reports — and show when we last chased each family" },
        { label: "Send a reminder to families with incomplete applications", detail: "Send a reminder email to all families who started an application but haven't submitted it yet, include the upcoming deadline of 28th March, and personalise each email with the missing sections" }
      ],
      communications: [
        { label: "Draft an email inviting parents to next week's open morning", detail: "Draft a warm, professional email inviting prospective parents to next Wednesday's open morning, include the agenda and parking details, and suggest a subject line that will stand out in their inbox" },
        { label: "Send an SMS reminder for tomorrow's Year 7 tour", detail: "Send an SMS reminder to all 34 families booked on tomorrow's Year 7 tour, include the arrival time of 9:15am and the meeting point at the main reception, and note that parking is available on site" },
        { label: "Show me delivery stats for last month's newsletter", detail: "Show me the full delivery and engagement stats for last month's parent newsletter — open rate, click rate, bounce rate — and compare performance to the previous three months" },
        { label: "Create a follow-up template for post-visit thank you emails", detail: "Create a reusable email template for thanking families after their school visit, include a feedback survey link, mention next steps in the application process, and keep the tone warm and encouraging" },
        { label: "Which families haven't responded to their offer letter?", detail: "Which families haven't responded to their offer letter yet and how many days has it been since we sent it? Flag any that are within 5 days of the acceptance deadline so I can follow up personally" }
      ],
      insights: [
        { label: "Show me the admissions funnel for this cycle", detail: "Show me the full admissions funnel for this cycle from initial enquiry through to enrolled, with conversion rates at each stage, and highlight where we're losing the most candidates compared to last year" },
        { label: "Compare this year's applications to the same point last year", detail: "Compare this year's total application numbers to the same date last year, break it down by year group and entry point, and flag any year groups where we're significantly ahead or behind target" },
        { label: "What's the demographic breakdown of current applicants?", detail: "What's the demographic breakdown of current applicants by home region, feeder school type, and boarding vs day preference? Include a comparison to last year's cohort to spot any shifts in our applicant profile" },
        { label: "Forecast Year 7 intake numbers based on current pipeline", detail: "Forecast the likely Year 7 intake numbers based on our current pipeline — factor in historical offer-to-acceptance rates, current waitlist size, and typical late withdrawals to give me a best and worst case scenario" },
        { label: "Which feeder schools are sending the most enquiries?", detail: "Which feeder schools are sending us the most enquiries this year, how does that compare to last year, and are there any new schools appearing in the top 10 that we should build a relationship with?" }
      ],
      migration: [
        { label: "What's the current status of our data import?", detail: "What's the current status of our data import from the previous system? Show me the overall progress, how many records have been processed, how many are pending, and flag any batches that failed" },
        { label: "Show me field mapping issues that need review", detail: "Show me all field mapping issues that still need manual review, grouped by category — student records, parent contacts, application history — and highlight any that are blocking the next import batch" },
        { label: "How many duplicate records were detected in the last import?", detail: "How many duplicate student records were found in the last import batch, what matching criteria flagged them, and can you show me a sample of the most likely true duplicates so I can decide how to merge them?" },
        { label: "List all validation errors from the student data migration", detail: "List all validation errors from the student data migration, group them by error type — missing required fields, invalid formats, out-of-range dates — and suggest automatic fixes where possible" },
        { label: "When is the next scheduled migration batch?", detail: "When is the next scheduled migration batch, which record types does it cover, and are there any unresolved issues from previous batches that could block it from running successfully?" }
      ]
    };
    const convBody = document.getElementById("agent-conversation-body");
    const suggestionBox = document.getElementById("suggestion-box");
    const container = document.getElementById("prompts-container");
    const promptList = document.getElementById("suggested-prompts");
    const inputContainer = document.getElementById("emma-input-container");
    const textarea = document.querySelector("[name='emma-input']");
    const areaTags = document.querySelectorAll("[data-area]");
    let activeArea = null;
    let suggestionBoxHidden = false;
    // Auto-resize textarea, capped at 8 lines
    const textareaStyles = getComputedStyle(textarea);
    const lineHeight = parseFloat(textareaStyles.lineHeight) || 20;
    const textareaPadding = parseFloat(textareaStyles.paddingTop) + parseFloat(textareaStyles.paddingBottom);
    const maxHeight = lineHeight * 8 + textareaPadding;
    function autoResize() {
      textarea.style.height = "auto";
      textarea.style.height = Math.min(textarea.scrollHeight, maxHeight) + "px";
    }
    function hideSuggestionBox() {
      suggestionBoxHidden = true;
      suggestionBox.style.maxHeight = suggestionBox.scrollHeight + "px";
      requestAnimationFrame(() => {
        suggestionBox.style.maxHeight = "0";
        suggestionBox.style.opacity = "0";
      });
    }
    function showSuggestionBox() {
      suggestionBoxHidden = false;
      activeArea = null;
      updateTags(null);
      container.classList.add("tw:hidden", "tw:opacity-0");
      container.classList.remove("tw:opacity-100");
      suggestionBox.style.maxHeight = suggestionBox.scrollHeight + "px";
      suggestionBox.style.opacity = "1";
      setTimeout(() => { suggestionBox.style.maxHeight = ""; }, 200);
    }
    // ── Chat demo helpers ──────────────────────────────────────────
    function wait(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
    function scrollToBottom() {
      convBody.scrollTop = convBody.scrollHeight;
    }
    function scrollToMessage(element) {
      const headerHeight = document.getElementById("agent-content-header").offsetHeight;
      const targetTop = element.offsetTop - headerHeight - 160;
      convBody.scrollTo({ top: targetTop, behavior: "smooth" });
    }
    function ensureSpacer() {
      let spacer = convBody.querySelector(".tw-chat-spacer");
      if (!spacer) {
        spacer = document.createElement("div");
        spacer.className = "tw-chat-spacer";
        const threadWrapper = convBody.firstElementChild;
        if (threadWrapper) threadWrapper.appendChild(spacer);
      }
      spacer.style.height = (convBody.clientHeight - mainInput.offsetHeight) + "px";
      return spacer;
    }
    function getOrCreateThread() {
      let thread = convBody.querySelector(".tw-agent-chat-thread");
      if (!thread) {
        const wrapper = document.createElement("div");
        wrapper.className = "tw:py-5 tw:max-w-4xl tw:mx-auto tw:px-4";
        wrapper.setAttribute("role", "log");
        wrapper.setAttribute("aria-label", "Conversation");
        thread = document.createElement("div");
        thread.className = "tw-agent-chat-thread";
        wrapper.appendChild(thread);
        convBody.appendChild(wrapper);
      }
      return thread;
    }
    async function streamTokens(element, text, durationSec) {
      const words = text.split(" ");
      const intervalMs = Math.max(20, (durationSec * 1000) / words.length);
      element.textContent = "";
      for (let i = 0; i < words.length; i++) {
        element.textContent += (i > 0 ? " " : "") + words[i];
        if (i < words.length - 1) await wait(intervalMs);
      }
    }
    function addUserMessage(text) {
      const thread = getOrCreateThread();
      const now = new Date();
      const timeStr = now.toLocaleTimeString("en-GB", { hour: "numeric", minute: "2-digit", hour12: true });
      const msgDiv = document.createElement("div");
      msgDiv.className = "tw-agent-chat-msg tw-agent-chat-msg-user";
      msgDiv.innerHTML = `
        <div class="tw-agent-chat-bubble-user">${text.replace(/</g, "<").replace(/>/g, ">")}</div>
        <div class="tw-agent-chat-bubble-meta">
          <div class="tw-agent-chat-timestamp">${timeStr}</div>
          <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Copy" data-controller="tooltip" data-tooltip-content-value="Copy"><i class="fa-regular fa-copy"></i></button>
        </div>
      `;
      thread.appendChild(msgDiv);
      ensureSpacer();
      scrollToMessage(msgDiv);
    }
    function showOptions(label, options) {
      return new Promise(resolve => {
        const card = document.querySelector("#agent-main-input .tw-card");
        const inputContainer = document.getElementById("emma-input-container");
        const optionsDiv = document.createElement("div");
        optionsDiv.className = "tw:w-full tw:flex tw:flex-col tw:gap-1 tw:p-4 tw:py-3 tw:pb-0";
        optionsDiv.innerHTML = `<p class="tw:text-neutral-900 tw:font-medium tw:text-body-m tw:w-full tw:mb-1">${label}</p>`;
        options.forEach((text, idx) => {
          const btn = document.createElement("button");
          btn.className = "tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive";
          btn.type = "button";
          btn.textContent = `${idx + 1}. ${text}`;
          btn.addEventListener("click", () => {
            optionsDiv.remove();
            ensureSpacer();
            resolve(text);
          });
          optionsDiv.appendChild(btn);
        });
        card.insertBefore(optionsDiv, inputContainer);
      });
    }
    function buildThinkingElement(value) {
      const el = document.createElement("div");
      el.className = "tw-agent-chat-msg";
      el.innerHTML = `
        <div class="tw-agent-chat-status">
          <div class="tw-avatar tw-avatar-primary tw-avatar" role="img" aria-label="Emma, Online">
            <span>E</span>
            <div class="tw-agent-status-ring tw-agent-status-ring-thinking">
              <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="var(--tw-color-primary)" stroke-width="2" stroke-linecap="round">
                <ellipse cx="28" cy="28" rx="27" ry="10" transform="rotate(-30 28 28)" class="tw-agent-nucleus-ring"/>
                <ellipse cx="28" cy="28" rx="27" ry="10" transform="rotate(-90 28 28)" class="tw-agent-nucleus-ring"/>
                <ellipse cx="28" cy="28" rx="27" ry="10" transform="rotate(-150 28 28)" class="tw-agent-nucleus-ring"/>
              </svg>
            </div>
          </div>
          <div class="tw-agent-chat-status-label">${value}</div>
        </div>
      `;
      return el;
    }
    function buildStatusBadge(value, variant) {
      const badge = document.createElement("span");
      badge.className = `tw-badge tw-badge-outline-${variant}`;
      badge.textContent = value;
      return badge;
    }
    function linkifyUrls(element) {
      const urlPattern = /(https?:\/\/[^\s<]+)/g;
      element.innerHTML = element.textContent.replace(urlPattern,
        '<a href="$1" target="_blank" class="tw:text-blue-600 tw:underline">$1</a>'
      );
    }
    function buildMessageBubble(text) {
      const bubble = document.createElement("div");
      bubble.className = "tw-agent-chat-bubble";
      bubble.style.display = "none";
      const p = document.createElement("p");
      bubble.appendChild(p);
      return { bubble, textEl: p };
    }
    function buildFeedbackButtons() {
      const div = document.createElement("div");
      div.className = "tw-agent-chat-feedback";
      div.innerHTML = `
        <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Copy" data-controller="tooltip" data-tooltip-content-value="Copy"><i class="fa-regular fa-copy"></i></button>
        <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Good response" data-controller="tooltip" data-tooltip-content-value="Good response"><i class="fa-regular fa-thumbs-up"></i></button>
        <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Bad response" data-controller="tooltip" data-tooltip-content-value="Bad response"><i class="fa-regular fa-thumbs-down"></i></button>
      `;
      return div;
    }
    function buildDivider(value) {
      const div = document.createElement("div");
      div.className = "tw-chat-divider";
      div.innerHTML = `
        <div class="tw-chat-divider-line"></div>
        <span class="tw-chat-divider-label">${value}</span>
        <div class="tw-chat-divider-line"></div>
      `;
      return div;
    }
    async function addAssistantContent(items) {
      const thread = getOrCreateThread();
      let sharedWrapper = null;
      function ensureWrapper() {
        if (!sharedWrapper) {
          sharedWrapper = document.createElement("div");
          sharedWrapper.className = "tw-agent-chat-msg";
          thread.appendChild(sharedWrapper);
        }
        return sharedWrapper;
      }
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        switch (item.type) {
          case 'thinking': {
            const el = buildThinkingElement(item.value);
            thread.appendChild(el);
            if (item.delay) await wait(item.delay * 1000);
            if (item.expire) el.remove();
            break;
          }
          case 'status': {
            const badge = buildStatusBadge(item.value, item.variant || 'secondary');
            ensureWrapper().appendChild(badge);
            if (item.delay) await wait(item.delay * 1000);
            break;
          }
          case 'msg': {
            const { bubble, textEl } = buildMessageBubble(item.value);
            ensureWrapper().appendChild(bubble);
            bubble.style.display = "";
            await streamTokens(textEl, item.value, item.duration || 1);
            linkifyUrls(textEl);
            if (item.feedback) {
              ensureWrapper().appendChild(buildFeedbackButtons());
            }
            if (item.delay) await wait(item.delay * 1000);
            break;
          }
          case 'html': {
            const temp = document.createElement("div");
            temp.innerHTML = item.value;
            while (temp.firstChild) ensureWrapper().appendChild(temp.firstChild);
            if (item.feedback) {
              ensureWrapper().appendChild(buildFeedbackButtons());
            }
            if (item.delay) await wait(item.delay * 1000);
            break;
          }
          case 'options': {
            const selected = await showOptions(item.label, item.value);
            addUserMessage(selected);
            sharedWrapper = null;
            break;
          }
          case 'divider': {
            const el = buildDivider(item.value);
            thread.appendChild(el);
            sharedWrapper = null;
            if (item.delay) await wait(item.delay * 1000);
            break;
          }
          case 'autoReply': {
            await wait((item.delay || 1.5) * 1000);
            addUserMessage(item.value);
            sharedWrapper = null;
            break;
          }
        }
      }
    }
    function renderPrompts(area) {
      promptList.innerHTML = "";
      const prompts = promptsByArea[area] || [];
      prompts.forEach(({ label, detail }) => {
        const li = document.createElement("li");
        const btn = document.createElement("button");
        btn.className = "tw-btn tw-btn-tertiary tw:text-left";
        btn.type = "button";
        btn.textContent = label;
        btn.addEventListener("mouseenter", () => { inputContainer.dataset.placeholder = detail; });
        btn.addEventListener("mouseleave", () => { inputContainer.dataset.placeholder = ""; });
        btn.addEventListener("click", () => {
          textarea.value = detail;
          inputContainer.dataset.placeholder = "";
          autoResize();
          textarea.focus();
          hideSuggestionBox();
        });
        li.appendChild(btn);
        promptList.appendChild(li);
      });
    }
    function fadeIn() {
      container.classList.remove("tw:hidden");
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          container.classList.remove("tw:opacity-0");
          container.classList.add("tw:opacity-100");
        });
      });
    }
    function fadeOut() {
      return new Promise(resolve => {
        container.classList.remove("tw:opacity-100");
        container.classList.add("tw:opacity-0");
        setTimeout(() => {
          container.classList.add("tw:hidden");
          resolve();
        }, 75);
      });
    }
    function updateTags(selectedArea) {
      areaTags.forEach(tag => {
        if (tag.dataset.area === selectedArea) {
          tag.classList.remove("tw-tag-secondary-soft");
          tag.classList.add("tw-tag-secondary");
        } else {
          tag.classList.remove("tw-tag-secondary");
          tag.classList.add("tw-tag-secondary-soft");
        }
      });
    }
    areaTags.forEach(tag => {
      tag.addEventListener("mouseenter", async () => {
        const area = tag.dataset.area;
        if (activeArea === area) return;
        if (activeArea) {
          await fadeOut();
        }
        activeArea = area;
        updateTags(area);
        renderPrompts(area);
        inputContainer.dataset.placeholder = "";
        fadeIn();
      });
    });
    textarea.addEventListener("input", () => {
      autoResize();
      if (textarea.value.trim() === "" && suggestionBoxHidden && !chatMode) {
        showSuggestionBox();
      } else if (textarea.value.trim() !== "" && activeArea) {
        activeArea = null;
        updateTags(null);
        container.classList.remove("tw:opacity-100");
        container.classList.add("tw:opacity-0");
        setTimeout(() => { container.classList.add("tw:hidden"); }, 75);
      }
    });
    // Collapsible activity sidebar (right side)
    const activitySidebar = document.getElementById("agent-activity-sidebar");
    const sidebarToggle = document.getElementById("agent-sidebar-toggle");
    let sidebarVisible = false; // starts collapsed on homepage
    sidebarToggle.addEventListener("click", () => {
      sidebarVisible = !sidebarVisible;
      if (sidebarVisible) {
        activitySidebar.style.width = "360px";
        sidebarToggle.setAttribute("aria-label", "Hide sidebar");
        sidebarToggle.dataset.tooltipContentValue = "Hide sidebar";
      } else {
        activitySidebar.style.width = "0";
        sidebarToggle.setAttribute("aria-label", "Show sidebar");
        sidebarToggle.dataset.tooltipContentValue = "Show sidebar";
      }
    });
    // Enter chat mode — transition from homepage to conversation layout
    const mainInput = document.getElementById("agent-main-input");
    let chatMode = false;
    async function enterChatMode() {
      if (chatMode) return;
      if (textarea.value.trim() === "") return;
      chatMode = true;
      // Hide suggestion box (smooth height collapse)
      hideSuggestionBox();
      // Collapse hero section (height → 0 + fade)
      const hero = document.getElementById("agent-hero");
      hero.style.maxHeight = hero.scrollHeight + "px";
      requestAnimationFrame(() => {
        hero.style.maxHeight = "0";
        hero.style.opacity = "0";
      });
      // Make Activity tab available (but keep sidebar collapsed)
      const activityTab = document.getElementById("activity-tab");
      activityTab.classList.remove("tw:hidden");
      activityTab.click();
      // Reveal content header details (border, title, new chat btn)
      const header = document.getElementById("agent-content-header");
      header.classList.remove("tw:border-transparent");
      header.classList.add("tw:border-neutral-translucent-200");
      document.getElementById("agent-content-title").classList.remove("tw:opacity-0");
      document.getElementById("agent-content-title").classList.add("tw:opacity-100");
      document.getElementById("agent-new-chat-btn").classList.remove("tw:hidden");
      document.getElementById("agent-rename-btn").classList.remove("tw:hidden");
      document.getElementById("agent-search-input").classList.remove("tw:hidden");
      // Conversation body fills remaining height → pushes input to bottom
      convBody.classList.add("tw:flex-1");
      // Remove homepage top padding and composer max-width constraint
      mainInput.classList.remove("tw:pt-[10vh]");
      mainInput.querySelector(".tw-card").classList.remove("tw:max-w-3xl");
      // After transition, make input overlay so it doesn't push conversation body
      setTimeout(() => {
        document.getElementById("agent-main-content").classList.add("tw:relative");
        mainInput.classList.add("tw:absolute", "tw:bottom-0", "tw:left-0", "tw:right-0", "tw:z-10");
      }, 200);
      // Add user message to conversation body
      const userText = textarea.value.trim();
      addUserMessage(userText);
      // Clear input and shrink to 1 line (smooth transition via CSS)
      textarea.value = "";
      textarea.rows = 1;
      textarea.style.height = (lineHeight + textareaPadding) + "px";
      textarea.focus();
      // Demo: Full Events Agent conversation flow
      await wait(500);
      await addAssistantContent([
        // S1-Step0: Emma asks event type
        { type: 'thinking', value: "Emma's having a thought...", expire: true, delay: 3 },
        { type: 'status', variant: 'secondary', value: "\u2713 Thought for 3s", delay: 0.2 },
        { type: 'msg', value: "What type of event would you like to create?", duration: 0.8, feedback: true },
        { type: 'options', label: 'What type of event would you like to create?', value: ['Open Day', 'Open Evening', 'Interview', 'Private Visit'] },
        // S1-Step1: Event name
        { type: 'msg', value: "What would you like to call this Open Evening?", duration: 0.5, feedback: true },
        { type: 'options', label: 'What would you like to call this Open Evening?', value: ['Year 7 Open Evening', 'Open Evening 2026', 'Post-16 Open Evening'] },
        // S1-Step2: Application form
        { type: 'msg', value: "Which application form should this event be linked to?\n\nI\u2019m suggesting Year 7 (2027/2028) because that\u2019s the next upcoming intake and you mentioned Year 7.", duration: 0.8, feedback: true },
        { type: 'options', label: 'Which application form should this event be linked to?', value: ['Year 7 (2027/2028)', 'Year 7 (2028/2029)'] },
        // S1-Step3: Date
        { type: 'msg', value: "When is the Year 7 Open Evening?", duration: 0.4, feedback: true },
        { type: 'options', label: 'When is the Year 7 Open Evening?', value: ['Next Saturday', 'In 2 weeks', 'Next month'] },
        // S1-Step4: Time
        { type: 'msg', value: "What time does it run?", duration: 0.3, feedback: true },
        { type: 'options', label: 'What time does it run?', value: ['9:00am \u2013 12:00pm', '6:00pm \u2013 8:00pm', '10:00am \u2013 12:00pm'] },
        // S1-Step5: Capacity
        { type: 'msg', value: "How many attendees can you accommodate?", duration: 0.5, feedback: true },
        { type: 'options', label: 'How many attendees can you accommodate?', value: ['No limit', '50', '100', '200'] },
        // S1-Step6: Waitlist
        { type: 'msg', value: "Would you like to enable a waitlist so families can still register once all 200 places are taken?", duration: 0.8, feedback: true },
        { type: 'options', label: 'Enable a waitlist?', value: ['Yes, enable waitlist', 'No waitlist needed'] },
        // S1-Step7: Self-registration
        { type: 'msg', value: "Should parents be able to register themselves through a link on your website?", duration: 0.7, feedback: true },
        { type: 'options', label: 'Self-registration?', value: ['Yes, self-registration', 'No, internal registration only'] },
        // S1-Step8: ApplicaaOne
        { type: 'msg', value: "Would you like to publish this event to ApplicaaOne for wider reach?", duration: 0.6, feedback: true },
        { type: 'options', label: 'Publish to ApplicaaOne?', value: ['Yes, publish to ApplicaaOne', 'No, website only'] },
        // S1-Step9: Registration questions
        { type: 'msg', value: "I\u2019ll use the standard registration questions \u2014 child\u2019s name, date of birth, year group, and contact details. Would you like to add or change any fields?", duration: 1, feedback: true },
        { type: 'options', label: 'Registration questions?', value: ['Use standard questions', 'Add custom questions', 'Show me the fields first'] },
        // S1-Step10: Pre-confirm summary
        { type: 'msg', value: "That\u2019s everything I need. I\u2019ll create a draft Year 7 Open Evening for October 15th, 6\u20138pm with 200 capacity, waitlist enabled, and self-registration turned on.", duration: 1.2 },
        // S1-Step11: Confirmation card
        { type: 'thinking', value: "Creating event draft...", expire: true, delay: 3 },
        { type: 'status', variant: 'secondary', value: "\u2713 Worked for 6s", delay: 0.2 },
        { type: 'msg', value: "Here\u2019s a summary of the event draft. If anything needed to change just let me know, otherwise just confirm then I\u2019ll make it work.", duration: 1 },
        { type: 'html', value: `<div class="tw-card tw:my-2">
          <div class="tw-card-header">
            <h3 class="tw-card-title tw:mb-0"><i class="fa-regular fa-calendar tw:mr-1.5"></i> Year 7 Open Evening</h3>
          </div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Application Form</span><span class="tw-chat-card-row-value">Year 7 (2027/2028)</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Event Type</span><span class="tw-chat-card-row-value">Open Evening</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Name</span><span class="tw-chat-card-row-value">Year 7 Open Evening</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Date</span><span class="tw-chat-card-row-value">15 October 2026</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Time</span><span class="tw-chat-card-row-value">18:00 \u2013 20:00</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Max Seats</span><span class="tw-chat-card-row-value">200</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Waitlist</span><span class="tw-chat-card-row-value">Enabled</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Self-Registration</span><span class="tw-chat-card-row-value">Yes</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Status</span><span class="tw-chat-card-row-value">Draft</span></div>
          <div class="tw:p-3.5 tw:border-t tw:border-neutral-100">
            <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-1">Confirmation email preview:</div>
            <div class="tw:bg-neutral-50 tw:border tw:border-neutral-200 tw:rounded-lg tw:p-2.5 tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:whitespace-pre-line">Dear [Parent Name],
Thank you for registering for our Year 7 Open Evening on Wednesday 15 October, 6:00pm \u2013 8:00pm.
Please arrive at the main reception from 5:45pm. We look forward to welcoming you.
[School Name] Admissions Team</div>
          </div>
        </div>`, feedback: true },
        // S1-Step12: User confirms
        { type: 'autoReply', value: "looks good, make that work for me", delay: 2 },
        // S1-Step13: Event created badge
        { type: 'status', variant: 'success', value: "\u2713 New event created", delay: 0.5 },
        // S1-Step14: Post-create message
        { type: 'msg', value: "I created your Year 7 Open Evening as a draft. It\u2019s ready when you are.", duration: 0.4 },
        { type: 'msg', value: "Registration link: https://apply.school.com/events/year-7-open-evening-2026", duration: 0.2},
        { type: 'msg', value: "The event is in draft \u2014 parents can\u2019t see it yet. Would you like to publish it now or make changes first?", duration: 0.5, feedback: true },
        // S1-Step18: User says publish
        { type: 'autoReply', value: "Publish now", delay: 1.5 },
        // S1-Step19: Publish explanation
        { type: 'msg', value: "Publishing will make this event visible to all eligible parents on your admissions portal and registration page. Once live, families can register immediately.", duration: 1 },
        // S1-Step20: Gate card
        { type: 'html', value: `<div class="tw-card tw:my-2 tw:overflow-hidden">
          <div class="tw-card-header">
            <h3 class="tw-card-title tw:mb-0"><i class="fa-regular fa-calendar tw:mr-1.5"></i> Publishing event</h3>
          </div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Event</span><span class="tw-chat-card-row-value">Year 7 Open Evening</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Visible to</span><span class="tw-chat-card-row-value">All Year 7 families</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Registration</span><span class="tw-chat-card-row-value">Open immediately</span></div>
          <div class="tw-chat-card-warning">
            <i class="fa-regular fa-triangle-exclamation"></i>
            <span>Once published, parents can see and register for this event.</span>
          </div>
        </div>`, feedback: true },
        // S1-Step21: User confirms publish
        { type: 'autoReply', value: "confirmed, you can publish it", delay: 2 },
        // S1-Step22: Published badge
        { type: 'status', variant: 'success', value: "\u2713 New event has been published", delay: 0.5 },
        // S1-Step22b: Post-publish confirmation
        { type: 'msg', value: "Your Year 7 Open Evening is now live. Parents can see it on the portal and register using the link. You\u2019ll be notified as registrations come in.", duration: 1 },
        // S1-Step23: What next?
        { type: 'msg', value: "What would you like to do next?", duration: 0.4, feedback: true },
        { type: 'options', label: 'What would you like to do next?', value: ['Share registration link', 'Set up reminder email', 'View public page'] },
        // Time divider — 3 weeks before event
        { type: 'divider', value: '3 weeks before event', delay: 1 },
        // Alert: Insight — Registration update
        { type: 'msg', value: "I noticed your Open Evening is at 33% capacity with 21 days to go. At this point last year, the equivalent event had 110 registrations. Registration pace is running 41% behind.", duration: 1.5 },
        { type: 'html', value: `<div class="tw-inline-notification tw-inline-notification-highlight" role="status">
          <div class="tw-inline-notification-icon"><i class="fa-solid fa-lightbulb"></i></div>
          <div class="tw-inline-notification-content">
            <p class="tw-inline-notification-title">Registration update: Year 7 Open Evening</p>
            <p class="tw-inline-notification-message">The event date is approaching and registrations are below the rate seen in comparable previous events.</p>
            <div class="tw-inline-notification-actions">
              <button class="tw-btn tw-btn-sm tw-btn-outline-info" type="button">Draft promotional email</button>
              <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">View registration breakdown</button>
              <button class="tw-btn tw-btn-sm tw-btn-tertiary" type="button">Dismiss</button>
            </div>
          </div>
        </div>`, feedback: true },
        // Time divider — 48 hours before event
        { type: 'divider', value: '48 hours before event', delay: 1 },
        // Alert: Review — Pre-event reminder ready
        { type: 'msg', value: "I\u2019ve prepared a reminder email for 187 registered families with the event time, location, and parking details.", duration: 1 },
        { type: 'html', value: `<div class="tw-inline-notification tw-inline-notification-warning" role="status">
          <div class="tw-inline-notification-icon"><i class="fa-solid fa-clock"></i></div>
          <div class="tw-inline-notification-content">
            <p class="tw-inline-notification-title">Pre-event reminder ready: Year 7 Open Evening</p>
            <p class="tw-inline-notification-message">Standard practice to send reminders 48 hours before an event. Reduces no-show rate by approximately 15% based on previous events.</p>
            <div class="tw-inline-notification-actions">
              <button class="tw-btn tw-btn-sm tw-btn-outline-warning" type="button">Send now</button>
              <button class="tw-btn tw-btn-sm tw-btn-secondary" type="button">Review draft</button>
              <button class="tw-btn tw-btn-sm tw-btn-tertiary" type="button">Dismiss</button>
            </div>
          </div>
        </div>`, feedback: true },
        // User asks to see draft
        { type: 'autoReply', value: "I\u2019d like to see the draft", delay: 2 },
        // Email draft card
        { type: 'msg', value: "Here\u2019s the reminder content I have drafted. If you wish to adjust, feel free to modify directly here, or just tell me how would you like.", duration: 0.8 },
        { type: 'html', value: `<div class="tw-card tw:my-2 tw:overflow-hidden">
          <div class="tw-card-header">
            <h3 class="tw-card-title tw:mb-0"><i class="fa-regular fa-envelope tw:mr-1.5"></i> Send reminder email</h3>
          </div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">To</span><span class="tw-chat-card-row-value">187 registered families</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Subject</span><span class="tw-chat-card-row-value">Reminder: Year 7 Open Evening \u2014 Thursday 15 October</span></div>
          <div class="tw:p-3.5">
            <div class="tw:bg-neutral-50 tw:border tw:border-neutral-200 tw:rounded-lg tw:p-3 tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:whitespace-pre-line">Dear [Parent Name],
This is a reminder that you are registered for our Year 7 Open Evening on Thursday 15 October, 6:00pm \u2013 8:00pm.
Please arrive at the main reception from 5:45pm. Parking is available in the visitor car park.
We look forward to welcoming you.
[School Name] Admissions Team</div>
          </div>
          <div class="tw-chat-card-warning">
            <i class="fa-regular fa-triangle-exclamation"></i>
            <span>This will send 187 emails to families.</span>
          </div>
        </div>`, feedback: true },
        // User approves send
        { type: 'autoReply', value: "that\u2019s sound good, send it for me", delay: 2 },
        // Sent completion
        { type: 'msg', value: "Sent to 187 families. I\u2019ll track delivery and open rates \u2014 expect a report tomorrow morning. If any emails bounce, I\u2019ll flag them.", duration: 1, feedback: true },
      ]);
    }
    // Enter key (without Shift) submits
    textarea.addEventListener("keydown", (e) => {
      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault();
        enterChatMode();
      }
    });
    // Send button click
    document.getElementById("agent-send-btn").addEventListener("click", () => {
      enterChatMode();
    });
    // Push-to-talk: hold Alt/Option to record, release to stop
    document.addEventListener("keydown", (e) => {
      if (e.key === "Alt" && !e.repeat) {
        const el = document.querySelector("[data-controller~='voice-toggle']");
        const ctrl = window.Stimulus.getControllerForElementAndIdentifier(el, "voice-toggle");
        if (ctrl) ctrl.start();
      }
    });
    document.addEventListener("keyup", (e) => {
      if (e.key === "Alt") {
        const el = document.querySelector("[data-controller~='voice-toggle']");
        const ctrl = window.Stimulus.getControllerForElementAndIdentifier(el, "voice-toggle");
        if (ctrl) ctrl.stop();
      }
    });
  });
</script>