<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { -webkit-font-smoothing: antialiased; }
</style>
<div
  data-controller="sidebar support"
  data-action="support:reset->support#reset"
  data-support-panel-open-class="tw-support-bg-dimmed"
  data-support-hidden-class="tw-support-hidden"
  data-support-fab-open-class="tw-support-fab--open"
  >
  <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 tw-active"
            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 12 Sixth Form</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:min-h-screen">
    <div id="sp-background-page" data-support-target="backgroundPage">
      <div class="tw-container-fluid tw-page-container">
        <div class="tw-page-header">
          <div class="tw-page-header-tabs">
            <div class="tw-tabs">
              <button class="tw-tab" type="button">Overview</button>
              <button class="tw-tab" type="button">Reports</button>
              <button class="tw-tab" type="button">Application Groups</button>
              <button class="tw-tab" type="button">Application Form <span class="tw-badge tw-badge-warning tw-badge-sm tw:ms-1">Meta</span></button>
              <button class="tw-tab tw-active" type="button">Subjects Summary</button>
              <button class="tw-tab" type="button">Timetables</button>
              <button class="tw-tab" type="button"><span class="tw-badge tw-badge-magenta tw-badge-sm"><i class="fa-solid fa-display tw:me-1"></i>Demo</span></button>
              <button class="tw-tab" type="button">Options</button>
              <button class="tw-tab" type="button"><span class="tw-badge tw-badge-magenta tw-badge-sm"><i class="fa-solid fa-display tw:me-1"></i>Demo</span></button>
              <button class="tw-tab" type="button">Tasks</button>
              <button class="tw-tab" type="button">Calendar</button>
              <button class="tw-tab" type="button">All Activities</button>
              <button class="tw-tab" type="button">Group Link</button>
            </div>
          </div>
        </div>
        <div class="tw-card tw:mt-4">
          <div class="tw:px-4 tw:py-3">
            <div class="tw:flex tw:items-center tw:gap-3">
              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-1">
                <h1 class="tw-h4 tw:mb-0">Subjects Summary</h1>
                <span class="tw-badge tw-badge-magenta tw-badge-sm">Ranking</span>
                <span class="tw-badge tw-badge-magenta tw-badge-sm"><i class="fa-solid fa-video tw:me-1"></i>Watch Demo</span>
              </div>
              <div class="tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
                <div class="tw-input-group tw-input-group-icon-start tw-input-group-sm tw:w-56">
                  <i class="fa-regular fa-magnifying-glass"></i>
                  <input type="text" class="tw-form-control tw-form-control-sm" placeholder="Search in table">
                </div>
                <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">
                  <i class="fa-regular fa-file-export tw:me-1"></i>Export
                </button>
              </div>
            </div>
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 tw:mb-0 tw:mt-2">
              The Applicaa/External number include students that have either selected this course when applying and those that have been enrolled
            </p>
          </div>
          <div class="tw-card-body tw:p-0">
            <div class="tw-table-responsive">
              <table class="tw-table tw-table-sm tw-table-hover tw-table-bordered">
                <thead>
                  <tr>
                    <th rowspan="2" class="tw:align-middle tw:text-center">#</th>
                    <th rowspan="2" class="tw:align-middle">Course</th>
                    <th colspan="4" class="tw:text-center tw:text-xs tw:font-semibold tw:text-neutral-500 tw:border-b-0 tw:bg-neutral-50">Application Form Interested Subjects</th>
                    <th colspan="2" class="tw:text-center tw:text-xs tw:font-semibold tw:text-neutral-500 tw:border-b-0 tw:bg-neutral-50">Enrolment Form Interested Subjects</th>
                    <th rowspan="2" class="tw:align-middle tw:text-center tw:text-xs">Taster Day</th>
                    <th rowspan="2" class="tw:align-middle tw:text-center tw:text-xs">Passed Entry Test</th>
                    <th rowspan="2" class="tw:align-middle tw:text-center tw:text-xs">Waiting List</th>
                    <th rowspan="2" class="tw:align-middle tw:text-center tw:text-xs">Enrolment Declined</th>
                    <th colspan="2" class="tw:text-center tw:text-xs tw:font-semibold tw:text-neutral-500 tw:border-b-0 tw:bg-neutral-50">Enrolled</th>
                  </tr>
                  <tr>
                    <th class="tw:text-center tw:text-xs tw:font-normal">Internal Interested</th>
                    <th class="tw:text-center tw:text-xs tw:font-normal">External Interested</th>
                    <th class="tw:text-center tw:text-xs tw:font-normal">Conditional Reserve</th>
                    <th class="tw:text-center tw:text-xs tw:font-normal">External Reserve</th>
                    <th class="tw:text-center tw:text-xs tw:font-normal">Internal Interested</th>
                    <th class="tw:text-center tw:text-xs tw:font-normal">External Interested</th>
                    <th class="tw:text-center tw:text-xs tw:font-normal">Unconfirmed</th>
                    <th class="tw:text-center tw:text-xs tw:font-normal">Confirmed</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="tw:text-center text-muted">1</td>
                    <td>Academies Enterprise Trust</td>
                    <td class="tw:text-center">1</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">1</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">2</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">2</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">0</td>
                    <td class="tw:text-center">3</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">2</td>
                    <td>A Level Art and Design</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center">15</td>
                    <td class="tw:text-center">1</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">6</td>
                    <td class="tw:text-center">0</td>
                    <td class="tw:text-center">1</td>
                    <td class="tw:text-center">9</td>
                    <td class="tw:text-center">8</td>
                    <td class="tw:text-center">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">3</td>
                    <td>A Level Business Studies</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">3</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center">12</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">4</td>
                    <td>A Level Chemistry</td>
                    <td class="tw:text-center">5</td>
                    <td class="tw:text-center">14</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center">11</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">5</td>
                    <td>A Level Computer Science</td>
                    <td class="tw:text-center">2</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">3</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">6</td>
                    <td>A Level Dance</td>
                    <td class="tw:text-center">8</td>
                    <td class="tw:text-center">19</td>
                    <td class="tw:text-center">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">5</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">15</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">7</td>
                    <td>A Level Economics</td>
                    <td class="tw:text-center">3</td>
                    <td class="tw:text-center">18</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">3</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">1</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">8</td>
                    <td>A Level English Literature</td>
                    <td class="tw:text-center">2</td>
                    <td class="tw:text-center">9</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">6</td>
                    <td class="tw:text-center">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">9</td>
                    <td>A Level Geography</td>
                    <td class="tw:text-center">1</td>
                    <td class="tw:text-center">11</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">1</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">10</td>
                    <td>A Level History</td>
                    <td class="tw:text-center">1</td>
                    <td class="tw:text-center">11</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">5</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">11</td>
                    <td>A Level Mathematics 1</td>
                    <td class="tw:text-center">2</td>
                    <td class="tw:text-center">13</td>
                    <td class="tw:text-center">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">5</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">8</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                  <tr>
                    <td class="tw:text-center text-muted">12</td>
                    <td>A Level Media Studies</td>
                    <td class="tw:text-center">0</td>
                    <td class="tw:text-center">4</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">2</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center">5</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                    <td class="tw:text-center tw:text-neutral-300">0</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="tw-card-footer">
            <div class="tw:flex tw:items-center tw:justify-between">
              <span class="tw:text-sm text-muted">Showing 1 to 12 of 62 entries</span>
              <nav aria-label="Table pagination">
                <ul class="tw-pagination tw-pagination-sm tw:mb-0">
                  <li class="tw-page-item"><button class="tw-page-link" type="button">Previous</button></li>
                  <li class="tw-page-item tw-active"><button class="tw-page-link" type="button">1</button></li>
                  <li class="tw-page-item"><button class="tw-page-link" type="button">2</button></li>
                  <li class="tw-page-item"><button class="tw-page-link" type="button">3</button></li>
                  <li class="tw-page-item"><button class="tw-page-link" type="button">4</button></li>
                  <li class="tw-page-item"><button class="tw-page-link" type="button">5</button></li>
                  <li class="tw-page-item"><button class="tw-page-link" type="button">Next</button></li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <div class="tw-support-backdrop" data-support-target="backdrop" onclick="hidePanel()"></div>
  <div id="sp-close-confirm" class="tw-popup-overlay tw-popup-center" role="dialog" aria-modal="true" aria-labelledby="sp-close-confirm-title" aria-hidden="true">
    <div class="tw-popup-panel tw-popup-sm">
      <div class="tw-popup-header">
        <div>
          <div class="tw-popup-header-title" id="sp-close-confirm-title">End this conversation?</div>
          <div class="tw-popup-header-subtitle">Your chat history will be saved and you can start a new conversation any time.</div>
        </div>
      </div>
      <div class="tw-popup-footer">
        <button class="tw-btn tw-btn-secondary" type="button" onclick="cancelClosePanel()">Keep chatting</button>
        <button class="tw-btn tw-btn-danger" type="button" onclick="doClosePanel()">End conversation</button>
      </div>
    </div>
  </div>
  <button
      id="sp-fab"
      class="tw-support-fab"
      type="button"
      data-support-target="fab"
      aria-label="Chat with Emma"
      aria-expanded="false"
      aria-haspopup="dialog"
      onclick="spFabToggle()"
    >
    <div class="tw-support-fab-ring"></div>
    <div class="tw-support-fab-av">E</div>
    <div id="sp-fab-pill" class="tw-support-fab-pill">
      <span></span><span></span><span></span>
    </div>
  </button>
  <div id="sp-panel" class="tw-support-panel tw-support-hidden" role="dialog" aria-label="Emma Support" aria-modal="true" data-support-target="panel">
    <div class="tw-support-panel-hdr">
      <div class="tw-avatar tw-avatar-primary tw-avatar-sm" role="img" aria-label="Emma, Online">
        <span>E</span>
        <span id="sp-panel-status-dot" class="tw-avatar-status tw-avatar-status-online"></span>
      </div>
      <div class="tw-support-panel-hdr-info">
        <div class="tw-support-panel-hdr-name">Emma · Applicaa Support</div>
        <button class="tw-support-panel-hist-link" type="button" onclick="viewChatHistory()">
          <i class="fa-regular fa-clock-rotate-left"></i>
          View chat history
        </button>
      </div>
      <div class="tw-support-panel-hdr-btns">
        <button class="tw-support-panel-btn" type="button" aria-label="New chat"
                  data-controller="tooltip" data-tooltip-content-value="New chat" data-tooltip-placement-value="bottom"
                  onclick="spNewChat()">
          <i class="fa-regular fa-pen-to-square"></i>
        </button>
        <button class="tw-support-panel-btn" type="button" aria-label="Expand to full screen"
                  data-controller="tooltip" data-tooltip-content-value="Expand to full screen" data-tooltip-placement-value="bottom"
                  onclick="expandToFullPage()">
          <i class="fa-regular fa-expand"></i>
        </button>
        <button class="tw-support-panel-btn" type="button" aria-label="Hide chat"
                  data-controller="tooltip" data-tooltip-content-value="Hide chat" data-tooltip-placement-value="bottom"
                  onclick="hidePanel()">
          <i class="fa-regular fa-minus"></i>
        </button>
      </div>
    </div>
    <div class="tw-support-panel-ctx"><i class="fa-regular fa-location-dot tw:mr-1"></i> Year 12 Admissions · Greenford High School</div>
    <div id="sp-panel-thread-slot">
      <div id="sp-shared-thread" class="tw-support-panel-thread" role="log" aria-label="Conversation" aria-live="polite"></div>
    </div>
    <div class="sp-resolved-cta tw-card tw-card-positive tw:mx-3 tw:my-2 tw:shrink-0 tw-support-hidden">
      <div class="tw-card-body tw:py-3 tw:text-center">
        <div class="tw:flex tw:items-center tw:justify-center tw:gap-2 tw:mb-3">
          <i class="fa-solid fa-circle-check tw:text-success"></i>
          <span class="tw:text-sm tw:font-medium tw:text-success">Conversation resolved</span>
        </div>
        <button class="tw-btn tw-btn-primary tw-btn-block" type="button" onclick="spNewChat()">
          Start a new conversation
          <i class="fa-regular fa-arrow-right tw:ms-1"></i>
        </button>
      </div>
    </div>
    <div class="tw-support-panel-composer">
      <div id="sp-panel-composer-card" class="sp-panel-composer-card">
        <div id="sp-panel-opt-area" class="sp-opts">
          <p id="sp-panel-opt-label" class="sp-opts-label"></p>
          <div id="sp-panel-opt-pills" class="sp-opts-pills"></div>
        </div>
        <div id="sp-panel-input-section" class="sp-input-section">
          <textarea class="sp-ta" placeholder="Ask Emma…" rows="1" aria-label="Message"></textarea>
        </div>
        <div id="sp-panel-toolbar" class="sp-toolbar">
          <button class="sp-tb-btn" type="button" aria-label="Attach file"
                    data-controller="tooltip" data-tooltip-content-value="Attach file" data-tooltip-placement-value="top">
            <i class="fa-regular fa-paperclip"></i>
          </button>
          <div class="tw:flex tw:items-center tw:gap-1">
            <button class="sp-tb-btn" type="button" aria-label="Voice input"
                      data-controller="tooltip" data-tooltip-content-value="Voice input" data-tooltip-placement-value="top">
              <i class="fa-regular fa-microphone"></i>
            </button>
            <button class="sp-send" type="button" aria-label="Send message"
                      data-controller="tooltip" data-tooltip-content-value="Send message" data-tooltip-placement-value="top">
              <i class="fa-regular fa-arrow-up"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="sp-fp-overlay" class="tw-support-fp tw-support-hidden" data-support-target="fpOverlay">
    <div class="tw-support-fp-main">
      <div class="tw-support-fp-hdr">
        <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Emma, Online">
          <span>E</span>
          <span id="sp-fp-status-dot" class="tw-avatar-status tw-avatar-status-online"></span>
        </div>
        <div class="tw-support-fp-title-block">
          <div id="sp-fp-title" class="tw-support-fp-title tw-support-fp-title--placeholder">Chat with Emma</div>
          <div class="tw-support-fp-ctx">
            <i class="fa-regular fa-location-dot"></i>
            Year 7 Main Entry 2025 · Applications · Applicant #4821
          </div>
        </div>
        <div class="tw-support-fp-spacer"></div>
        <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"
                  onclick="spNewChat()">
          <i class="fa-regular fa-pen-to-square"></i> New chat
        </button>
        <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"
                  onclick="minimiseToFab()">
          <i class="fa-regular fa-chevron-down"></i> Hide chat
        </button>
        <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"
                  onclick="collapseToPanel()">
          <i class="fa-regular fa-compress"></i> Float panel
        </button>
        <button class="tw-btn tw-btn-secondary tw-btn-sm text-danger" type="button"
                  onclick="confirmClosePanel()">
          <i class="fa-regular fa-circle-stop"></i> End chat
        </button>
        <div class="tw-support-fp-divider"></div>
        <button id="sp-fp-hist-btn" class="tw-btn tw-btn-secondary tw-btn-sm tw-btn-icon" type="button"
                  onclick="toggleHistoryPanel()"
                  aria-label="Chats & activity"
                  data-controller="tooltip" data-tooltip-content-value="Chats & activity" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-sidebar"></i>
        </button>
      </div>
      <div id="sp-fp-thread-slot"></div>
      <div class="sp-resolved-cta tw-card tw-card-positive tw:mx-3 tw:my-2 tw:shrink-0 tw-support-hidden">
        <div class="tw-card-body tw:py-3 tw:text-center">
          <div class="tw:flex tw:items-center tw:justify-center tw:gap-2 tw:mb-3">
            <i class="fa-solid fa-circle-check tw:text-success"></i>
            <span class="tw:text-sm tw:font-medium tw:text-success">Conversation resolved</span>
          </div>
          <button class="tw-btn tw-btn-primary tw-btn-block" type="button" onclick="spNewChat()">
            Start a new conversation
            <i class="fa-regular fa-arrow-right tw:ms-1"></i>
          </button>
        </div>
      </div>
      <div class="tw-support-fp-composer">
        <div id="sp-fp-composer-card" class="sp-fp-composer-card">
          <div id="sp-fp-opt-area" class="sp-fp-opts">
            <p id="sp-fp-opt-label" class="sp-fp-opts-label"></p>
            <div id="sp-fp-opt-pills" class="sp-fp-opts-pills"></div>
          </div>
          <div id="sp-fp-input-section" class="sp-input-section">
            <textarea class="sp-fp-ta" placeholder="Ask Emma…" rows="1" aria-label="Message"></textarea>
          </div>
          <div id="sp-fp-toolbar" class="sp-fp-toolbar">
            <button class="sp-tb-btn" type="button" aria-label="Attach file"
                      data-controller="tooltip" data-tooltip-content-value="Attach file" data-tooltip-placement-value="top">
              <i class="fa-regular fa-paperclip"></i>
            </button>
            <div class="tw:flex tw:items-center tw:gap-1">
              <button class="sp-tb-btn" type="button" aria-label="Voice input"
                        data-controller="tooltip" data-tooltip-content-value="Voice input" data-tooltip-placement-value="top">
                <i class="fa-regular fa-microphone"></i>
              </button>
              <button class="sp-fp-send" type="button" aria-label="Send message"
                        data-controller="tooltip" data-tooltip-content-value="Send message" data-tooltip-placement-value="top">
                <i class="fa-regular fa-arrow-up"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="sp-hist-panel" class="tw-support-hist-panel" data-controller="tabs">
      <div class="tw-tabs tw-tabs-justified tw-tabs-no-gap tw:h-14 tw:flex-shrink-0 tw:bg-neutral-100 tw:border-b tw:border-neutral-translucent-200" role="tablist" aria-label="Chats and activity">
        <button class="tw-tab tw-active" type="button" role="tab" data-tabs-target="tab"
                  data-action="click->tabs#select keydown->tabs#keydown">
          <div class="tw:py-1">Chats</div>
        </button>
        <button class="tw-tab" type="button" role="tab" data-tabs-target="tab"
                  data-action="click->tabs#select keydown->tabs#keydown">
          <div class="tw:py-1">Activity</div>
        </button>
      </div>
      <div class="tw-tab-content tw:flex-1 tw:overflow-y-auto tw:min-h-0">
        <div class="tw-tab-panel tw-active" role="tabpanel" data-tabs-target="panel">
          <div class="tw-support-hist-sec-lbl">Open</div>
          <div class="tw-support-hist-row tw-support-hist-row--active" role="button" tabindex="0">
            <div class="tw:flex tw:items-start tw:gap-1.5">
              <div class="tw:flex-1 tw:min-w-0">
                <div class="tw-support-hist-title">SIMS v7 nil class error on login</div>
                <div class="tw-support-hist-preview">Error occurs on production only — dev env unaffected.</div>
              </div>
              <div class="tw-support-hist-unread" aria-label="Unread messages"></div>
            </div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-primary-subtle">Active</span>
              <span class="tw-support-hist-time">Today 9:03 am</span>
            </div>
          </div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw:flex-1 tw:min-w-0">
              <div class="tw-support-hist-title">Logo broken after CDN update</div>
              <div class="tw-support-hist-preview">Handed off to Applicaa support team.</div>
            </div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-warning-subtle">Escalated</span>
              <span class="tw-support-hist-time">Fri</span>
            </div>
          </div>
          <div class="tw-support-hist-sec-lbl">Resolved</div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title tw-support-hist-title--placeholder">How do I configure offer conditions?</div>
            <div class="tw-support-hist-preview">Fixed — Emma walked through the Offer Rules tab.</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-secondary-subtle">Resolved</span>
              <span class="tw-support-hist-time">Yesterday</span>
            </div>
          </div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title tw-support-hist-title--placeholder">A-Level subject setup — Maths stream</div>
            <div class="tw-support-hist-preview">Configured offer rules for Further Maths stream with GCSE grade threshold.</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-secondary-subtle">Resolved</span>
              <span class="tw-support-hist-time">Mon 10:22 am</span>
            </div>
          </div>
        </div>
        <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
          <div class="tw:sticky tw:top-0 tw:z-10 tw:bg-neutral-100 tw:px-3 tw:pt-3 tw:pb-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 activity…" aria-label="Search activity">
            </div>
          </div>
          <div class="tw-support-hist-sec-lbl">Today</div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title">Set step visibility: Payment → external hidden</div>
            <div class="tw-support-hist-preview">Application Forms · Action</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-success-subtle">Success</span>
              <span class="tw-support-hist-time">9:03 am</span>
            </div>
          </div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title">Updated setting: offer letter header</div>
            <div class="tw-support-hist-preview">Settings · Setting change</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-success-subtle">Success</span>
              <span class="tw-support-hist-time">8:30 am</span>
            </div>
          </div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title">Send offer email — 14 families</div>
            <div class="tw-support-hist-preview">Email · Action</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-danger-subtle">Failed</span>
              <span class="tw-support-hist-time">8:51 am</span>
            </div>
          </div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title">Listed unanswered enquiries (4)</div>
            <div class="tw-support-hist-preview">Enquiries · Data read</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-success-subtle">Success</span>
              <span class="tw-support-hist-time">8:12 am</span>
            </div>
          </div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title">Added question to References step</div>
            <div class="tw-support-hist-preview">Application Forms · Action</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-success-subtle">Success</span>
              <span class="tw-support-hist-time">7:58 am</span>
            </div>
          </div>
          <div class="tw-support-hist-sec-lbl">Yesterday</div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title">Exported applicant list — 312 rows</div>
            <div class="tw-support-hist-preview">Exports · Action</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-success-subtle">Success</span>
              <span class="tw-support-hist-time">4:21 pm</span>
            </div>
          </div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title">Updated setting: auto-reminder cadence</div>
            <div class="tw-support-hist-preview">Settings · Setting change</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-success-subtle">Success</span>
              <span class="tw-support-hist-time">2:05 pm</span>
            </div>
          </div>
          <div class="tw-support-hist-row" role="button" tabindex="0">
            <div class="tw-support-hist-title">Registered 18 families for open evening</div>
            <div class="tw-support-hist-preview">Events · Action</div>
            <div class="tw-support-hist-meta">
              <span class="tw-badge tw-badge-sm tw-badge-success-subtle">Success</span>
              <span class="tw-support-hist-time">11:40 am</span>
            </div>
          </div>
          <div class="tw:sticky tw:bottom-0 tw:z-10 tw:bg-neutral-100 tw:border-t tw:border-neutral-translucent-200 tw:px-3 tw:py-2.5">
            <a href="/lookbook/preview/projects/agent/activity_table" data-turbo="false"
                 class="tw-btn tw-btn-secondary tw-btn-block" role="button">
              <i class="fa-regular fa-clipboard-list"></i> View all activity
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  'use strict';
  // ── Placeholders ─────────────────────────────────────────────────────
  function updatePlaceholders(mode) {
    let text;
    if (mode === 'connecting') {
      // Used while a tw-emma-connecting-card is live — explicit routing
      // copy so users know typed text routes to Emma, not the queue.
      text = 'Type to chat with Emma instead…';
    } else {
      const started = document.querySelector('#sp-shared-thread .tw-agent-chat-msg') !== null;
      text = started ? 'Ask a follow-up…' : 'Ask Emma…';
    }
    document.querySelectorAll('.sp-ta, .sp-fp-ta').forEach(ta => ta.placeholder = text);
  }
  // ── Mode ────────────────────────────────────────────────────────────
  let mode = 'panel'; // 'panel' | 'full'
  let pendingOpts = null; // { label, pills, resolve } — set while showOptions Promise is pending
  let activeGate  = null; // { el, resolve, composerCard, fpMain } — set while showGate Promise is pending
  let pendingSendResolver = null; // set while waitForSend() Promise is pending
  let _onNextUserMsg = null;
  let spStarted = false; // tracks whether a conversation is in progress
  function waitForUserMessage() {
    return new Promise(resolve => { _onNextUserMsg = resolve; });
  }
  // Promise that resolves with the user's typed text on the next send.
  // Used inside Promise.race to give scripted flows an "or the user typed
  // something" branch. Only one waitForSend can be pending at a time.
  function waitForSend() {
    return new Promise(resolve => { pendingSendResolver = resolve; });
  }
  // Called by the send button / Enter-key handler. If a Promise is awaiting
  // a send via waitForSend(), it consumes the text and returns true (so the
  // caller knows the input was claimed). Otherwise returns false.
  function consumePendingSend(text) {
    if (pendingSendResolver && text && text.trim()) {
      const resolve = pendingSendResolver;
      pendingSendResolver = null;
      resolve(text.trim());
      return true;
    }
    return false;
  }
  // ── FAB toggle — open / hide / resume ──────────────────────────────
  function spFabToggle() {
    const panel = document.getElementById('sp-panel');
    const bgPage = document.getElementById('sp-background-page');
    const fab = document.getElementById('sp-fab');
    const backdrop = document.querySelector('.tw-support-backdrop');
    if (!spStarted) {
      // First open — start the conversation
      spStarted = true;
      panel.classList.remove('tw-support-hidden');
      bgPage.classList.add('tw-support-bg-dimmed');
      fab.classList.add('tw-support-fab--open');
      fab.setAttribute('aria-expanded', 'true');
      fab.setAttribute('aria-label', 'Close chat');
      backdrop?.classList.add('tw-support-backdrop--visible');
      document.querySelector('[data-controller~="support"]').dispatchEvent(new CustomEvent('support:start', { bubbles: false }));
    } else if (!panel.classList.contains('tw-support-hidden')) {
      // Panel is visible — FAB ✕ ends the conversation
      confirmClosePanel();
    } else {
      // State 3 → State 2: re-open panel, resume conversation
      panel.classList.remove('tw-support-hidden');
      bgPage.classList.add('tw-support-bg-dimmed');
      fab.classList.remove('tw-support-fab--panel-hidden');
      fab.classList.add('tw-support-fab--open');
      fab.setAttribute('aria-expanded', 'true');
      fab.setAttribute('aria-label', 'Close chat');
      backdrop?.classList.add('tw-support-backdrop--visible');
    }
  }
  // Hide the panel without ending the conversation.
  // State 3: FAB shows E + pill badge (tw-support-fab--panel-hidden).
  function hidePanel() {
    const panel = document.getElementById('sp-panel');
    const bgPage = document.getElementById('sp-background-page');
    const fab = document.getElementById('sp-fab');
    const backdrop = document.querySelector('.tw-support-backdrop');
    panel.classList.add('tw-support-hidden');
    bgPage.classList.remove('tw-support-bg-dimmed');
    backdrop?.classList.remove('tw-support-backdrop--visible');
    // State 3: E + pill badge (remove ✕, show pill)
    fab.classList.remove('tw-support-fab--open');
    fab.classList.add('tw-support-fab--panel-hidden');
    fab.setAttribute('aria-expanded', 'false');
    fab.setAttribute('aria-label', 'Resume chat with Emma');
  }
  // ── Mode transitions ────────────────────────────────────────────────
  function expandToFullPage() {
    if (mode === 'full') return;
    mode = 'full';
    // existing visibility switches
    document.getElementById('sp-panel').classList.add('tw-support-hidden');
    document.getElementById('sp-background-page').classList.add('tw-support-hidden');
    document.getElementById('sp-fp-overlay').classList.remove('tw-support-hidden');
    document.querySelector('.tw-support-backdrop')?.classList.remove('tw-support-backdrop--visible');
    document.getElementById('sp-fab').classList.add('tw-support-hidden');
    // thread teleport: move shared thread into FP slot and swap sizing class
    const thread = document.getElementById('sp-shared-thread');
    thread.classList.replace('tw-support-panel-thread', 'tw-support-fp-thread');
    document.getElementById('sp-fp-thread-slot').appendChild(thread);
    thread.scrollTop = thread.scrollHeight;
    // opt-area transfer: rebuild pending options in FP composer if present
    rerenderOpts();
    // gate form transfer: move gate element to FP composer card if a gate is open
    if (activeGate) {
      const fpCard = document.getElementById('sp-fp-composer-card');
      const fpMain = document.getElementById('sp-fp-overlay')?.querySelector('.tw-support-fp-main');
      activeGate.composerCard.classList.remove('sp-composer--gate-open');
      activeGate.fpMain?.classList.remove('sp-fp-main--gate-open');
      fpCard.classList.add('sp-composer--gate-open');
      fpMain?.classList.add('sp-fp-main--gate-open');
      fpCard.appendChild(activeGate.el);
      activeGate.composerCard = fpCard;
      activeGate.fpMain = fpMain;
    }
  }
  function collapseToPanel() {
    if (mode === 'panel') return;
    mode = 'panel';
    // existing visibility switches
    document.getElementById('sp-fp-overlay').classList.add('tw-support-hidden');
    document.getElementById('sp-background-page').classList.remove('tw-support-hidden');
    document.getElementById('sp-panel').classList.remove('tw-support-hidden');
    document.querySelector('.tw-support-backdrop')?.classList.add('tw-support-backdrop--visible');
    document.getElementById('sp-fab').classList.remove('tw-support-hidden');
    // thread teleport: move shared thread back into panel slot and swap sizing class
    const thread = document.getElementById('sp-shared-thread');
    thread.classList.replace('tw-support-fp-thread', 'tw-support-panel-thread');
    document.getElementById('sp-panel-thread-slot').appendChild(thread);
    thread.scrollTop = thread.scrollHeight;
    // opt-area transfer: rebuild pending options in panel composer if present
    rerenderOpts();
    // gate form transfer: move gate element back to panel composer card if a gate is open
    if (activeGate) {
      const panelCard = document.getElementById('sp-panel-composer-card');
      activeGate.composerCard.classList.remove('sp-composer--gate-open');
      activeGate.fpMain?.classList.remove('sp-fp-main--gate-open');
      panelCard.classList.add('sp-composer--gate-open');
      panelCard.appendChild(activeGate.el);
      activeGate.composerCard = panelCard;
      activeGate.fpMain = null;
    }
  }
  // ── Close confirmation ────────────────────────────────────────────────
  function confirmClosePanel() {
    const overlay = document.getElementById('sp-close-confirm');
    const panel = overlay?.querySelector('.tw-popup-panel');
    overlay?.classList.add('tw-popup-visible');
    panel?.classList.add('tw-popup-visible');
    overlay?.removeAttribute('aria-hidden');
    panel?.querySelector('button')?.focus();
    function onEscape(e) {
      if (e.key === 'Escape') { cancelClosePanel(); document.removeEventListener('keydown', onEscape); }
    }
    document.addEventListener('keydown', onEscape);
  }
  function cancelClosePanel() {
    const overlay = document.getElementById('sp-close-confirm');
    const panel = overlay?.querySelector('.tw-popup-panel');
    overlay?.classList.remove('tw-popup-visible');
    panel?.classList.remove('tw-popup-visible');
    overlay?.setAttribute('aria-hidden', 'true');
    document.getElementById('sp-fab')?.focus();
  }
  function minimiseToFab() {
    if (mode === 'full') collapseToPanel();
    doClosePanel();
  }
  function doClosePanel() {
    spStarted = false;
    cancelClosePanel();
    // Mirror Stimulus support#closePanel logic
    document.getElementById('sp-panel').classList.add('tw-support-hidden');
    document.getElementById('sp-background-page').classList.remove('tw-support-bg-dimmed');
    document.getElementById('sp-fab').classList.remove('tw-support-fab--open');
    document.getElementById('sp-fab').classList.remove('tw-support-fab--panel-hidden');
    document.getElementById('sp-fab').setAttribute('aria-expanded', 'false');
    document.getElementById('sp-fab').setAttribute('aria-label', 'Chat with Emma');
    document.querySelector('.tw-support-backdrop')?.classList.remove('tw-support-backdrop--visible');
    mode = 'panel';
    pendingOpts = null;
    activeGate = null;
    pendingSendResolver = null;
    document.getElementById('sp-fab')?.focus();
    // Reset Stimulus controller's #started guard so the FAB can open the panel again
    document.querySelector('[data-controller~="support"]')?.dispatchEvent(new CustomEvent('support:reset', { bubbles: false }));
  }
  // ── DOM accessors (mode-aware) ───────────────────────────────────────
  function getContainer() {
    return getThread();
  }
  function getThread() {
    return document.getElementById('sp-shared-thread');
  }
  function getComposerCard() {
    return mode === 'panel'
      ? document.getElementById('sp-panel-composer-card')
      : document.getElementById('sp-fp-composer-card');
  }
  function getInputSection() {
    return mode === 'panel'
      ? document.getElementById('sp-panel-input-section')
      : document.getElementById('sp-fp-input-section');
  }
  function getToolbar() {
    return mode === 'panel'
      ? document.getElementById('sp-panel-toolbar')
      : document.getElementById('sp-fp-toolbar');
  }
  function getOptArea() {
    return mode === 'panel'
      ? document.getElementById('sp-panel-opt-area')
      : document.getElementById('sp-fp-opt-area');
  }
  function getOptLabel() {
    return mode === 'panel'
      ? document.getElementById('sp-panel-opt-label')
      : document.getElementById('sp-fp-opt-label');
  }
  function getOptPills() {
    return mode === 'panel'
      ? document.getElementById('sp-panel-opt-pills')
      : document.getElementById('sp-fp-opt-pills');
  }
  // ── Timing ──────────────────────────────────────────────────────────
  // ?demo collapses all delays to zero for Playwright demo recordings.
  const DEMO_SPEED = new URLSearchParams(location.search).has('demo') ? 0 : 1;
  function wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms * DEMO_SPEED));
  }
  // ── Scroll ──────────────────────────────────────────────────────────
  // Only scroll if the element is below the current scroll position.
  function scrollToMessage(el) {
    const container = getContainer();
    const top = el.offsetTop - 40;
    if (top > container.scrollTop) {
      container.scrollTo({ top, behavior: 'smooth' });
    }
  }
  // ── Text streaming ──────────────────────────────────────────────────
  async function streamTokens(el, text, durationSec) {
    const words = text.split(' ');
    const intervalMs = Math.max(18, (durationSec * 1000) / words.length);
    el.textContent = '';
    for (let i = 0; i < words.length; i++) {
      el.textContent += (i > 0 ? ' ' : '') + words[i];
      if (i < words.length - 1) await wait(intervalMs);
    }
  }
  // ── Escape HTML ─────────────────────────────────────────────────────
  function esc(str) {
    const d = document.createElement('div');
    d.textContent = str;
    return d.innerHTML;
  }
  // ── Thinking element (ephemeral — appended then removed) ────────────
  function buildThinkingEl(label) {
    const start = Date.now();
    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-sm" role="img" aria-label="Emma thinking">
          <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">${esc(label)} <span class="tw-agent-chat-elapsed">0s</span></div>
      </div>
    `;
    // Live elapsed-time counter — reassures the user that Emma hasn't frozen.
    // Disappears with the indicator when the answer arrives.
    const elapsedEl = el.querySelector('.tw-agent-chat-elapsed');
    el._elapsedTicker = setInterval(() => {
      elapsedEl.textContent = Math.floor((Date.now() - start) / 1000) + 's';
    }, 1000);
    return el;
  }
  // ── Add divider ─────────────────────────────────────────────────────
  function addDivider(label) {
    const thread = getThread();
    const el = document.createElement('div');
    el.className = 'tw-chat-divider';
    el.innerHTML = `
      <div class="tw-chat-divider-line"></div>
      <span class="tw-chat-divider-label">${esc(label)}</span>
      <div class="tw-chat-divider-line"></div>
    `;
    thread.appendChild(el);
    scrollToMessage(el);
  }
  // ── Add user bubble ─────────────────────────────────────────────────
  function addUser(text) {
    // Update FP title on first user message
    const titleEl = document.getElementById('sp-fp-title');
    if (titleEl && titleEl.classList.contains('tw-support-fp-title--placeholder')) {
      titleEl.textContent = text.length > 70 ? text.slice(0, 70) + '…' : text;
      titleEl.classList.remove('tw-support-fp-title--placeholder');
    }
    const thread = getThread();
    const msg = document.createElement('div');
    msg.className = 'tw-agent-chat-msg tw-agent-chat-msg-user';
    msg.innerHTML = `<div class="tw-agent-chat-bubble-user">${esc(text)}</div>`;
    thread.appendChild(msg);
    if (_onNextUserMsg) {
      const cb = _onNextUserMsg;
      _onNextUserMsg = null;
      setTimeout(cb, 200);
    }
    scrollToMessage(msg);
    updatePlaceholders();
  }
  // ── Add join / leave banner ─────────────────────────────────────────
  function addBanner(text, type) {
    const thread = getThread();
    const wrapper = document.createElement('div');
    wrapper.className = 'sp-join-banner';
    wrapper.innerHTML = `<span class="${type === 'join' ? 'sp-join-dot' : 'sp-leave-dot'}"></span>${esc(text)}`;
    thread.appendChild(wrapper);
    scrollToMessage(wrapper);
  }
  function addResolvedPill() {
    const thread = getThread();
    const pill = document.createElement('div');
    pill.className = 'tw-badge tw-badge-success';
    pill.innerHTML = '<i class="fa-regular fa-circle-check"></i> Resolved by Emma · No ticket raised';
    thread.appendChild(pill);
    scrollToMessage(pill);
  }
  // ── Add Emma message ─────────────────────────────────────────────────
  // items: array of { type: 'thinking'|'status'|'msg'|'html'|'source'|'escalation-badge', value, delay?, duration? }
  // 'thinking' items run first (ephemeral, with animated ring), then the static response is built.
  // The avatar only appears in the thinking indicator — the response uses DS badge + plain text,
  // matching the interactive_prototype pattern (tw-agent-chat-msg > .tw-badge as direct child).
  async function addEmma(items) {
    const thread = getThread();
    // 1. Run thinking phases (ephemeral)
    for (const item of items) {
      if (item.type === 'thinking') {
        const thinkEl = buildThinkingEl(item.value);
        thread.appendChild(thinkEl);
        scrollToMessage(thinkEl);
        await wait((item.delay || 2) * 1000);
        clearInterval(thinkEl._elapsedTicker);
        thinkEl.remove();
      }
    }
    // 2. Build the response element (no avatar — thinking indicator already showed it)
    const nonThinking = items.filter(i => i.type !== 'thinking');
    if (nonThinking.length === 0) return;
    const msg = document.createElement('div');
    msg.className = 'tw-agent-chat-msg';
    thread.appendChild(msg);
    scrollToMessage(msg);
    for (const item of nonThinking) {
      if (item.type === 'status') {
        // Action trail — quiet metadata line above the answer, replacing
        // the post-hoc "Thought for Ns" badge. Skips empty values so that
        // scripted/template responses (no real action) render no chip at all.
        const label = (item.value || '').replace(/^✓\s*/, '').trim();
        if (label) {
          const trail = document.createElement('p');
          trail.className = 'tw-agent-chat-action-trail';
          const icon = document.createElement('i');
          icon.className = 'fa-regular fa-check';
          const text = document.createElement('span');
          text.textContent = label;
          trail.appendChild(icon);
          trail.appendChild(text);
          msg.appendChild(trail);
        }
        if (item.delay) await wait(item.delay * 1000);
      } else if (item.type === 'msg') {
        const p = document.createElement('p');
        p.className = 'tw:text-body-s tw:text-neutral-900 tw:leading-body-s';
        msg.appendChild(p);
        await streamTokens(p, item.value, item.duration || 1);
        if (item.delay) await wait(item.delay * 1000);
      } else if (item.type === 'html') {
        const wrapper = document.createElement('div');
        // html items must be static authored strings — never user input
        wrapper.innerHTML = item.value;
        msg.appendChild(wrapper);
        scrollToMessage(msg);
        if (item.delay) await wait(item.delay * 1000);
      } else if (item.type === 'source') {
        const a = document.createElement('a');
        a.className = 'tw-badge tw-badge-primary-subtle';
        a.innerHTML = `<i class="fa-regular fa-arrow-up-right-from-square"></i> ${esc(item.value)}`;
        msg.appendChild(a);
        if (item.delay) await wait(item.delay * 1000);
      } else if (item.type === 'escalation-badge') {
        const badge = document.createElement('span');
        badge.className = 'tw-badge tw-badge-warning';
        badge.innerHTML = `<i class="fa-regular fa-user-helmet-safety"></i> Needs human review`;
        msg.appendChild(badge);
        if (item.delay) await wait(item.delay * 1000);
      } else if (item.type === 'key-info') {
        const block = document.createElement('div');
        block.className = 'sp-key-info';
        block.innerHTML = (item.rows || []).map(r =>
          `<div class="sp-key-info-row">
             <span class="sp-key-info-label">${esc(r.label)}</span>
             <span class="sp-key-info-val">${r.value}</span>
           </div>`
        ).join('');
        msg.appendChild(block);
        scrollToMessage(msg);
        if (item.delay) await wait(item.delay * 1000);
      }
    }
    // Feedback bar — always visible at low opacity, full opacity on hover
    const fb = document.createElement('div');
    fb.className = 'tw-agent-chat-feedback';
    fb.innerHTML = `
      <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Copy" title="Copy response"><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" title="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" title="Bad response"><i class="fa-regular fa-thumbs-down"></i></button>
    `;
    msg.appendChild(fb);
    return msg;
  }
  // ── Add agent (live support agent, not Emma) ─────────────────────────
  async function addAgent(name, avClass, items) {
    const thread = getThread();
    const msg = document.createElement('div');
    msg.className = 'tw-agent-chat-msg';
    const avatar = document.createElement('div');
    avatar.className = `tw-avatar ${avClass}`;
    avatar.setAttribute('role', 'img');
    avatar.setAttribute('aria-label', name);
    avatar.innerHTML = `<span>${esc(name[0])}</span>`;
    msg.appendChild(avatar);
    const body = document.createElement('div');
    body.className = 'tw:flex tw:flex-col tw:gap-1 tw:min-w-0 tw:flex-1';
    msg.appendChild(body);
    const nameLabel = document.createElement('p');
    nameLabel.className = 'tw:text-sm tw:text-neutral-700 tw:font-medium';
    nameLabel.textContent = name + ' · Support Agent';
    body.appendChild(nameLabel);
    thread.appendChild(msg);
    scrollToMessage(msg);
    for (const item of items) {
      if (item.type === 'msg') {
        if (item.delay) await wait(item.delay * 1000);
        const p = document.createElement('p');
        p.className = 'tw:text-body-s tw:text-neutral-900 tw:leading-body-s';
        body.appendChild(p);
        await streamTokens(p, item.value, item.duration || 1);
      }
    }
    return msg;
  }
  // ── Connecting card (handoff) ────────────────────────────────────────
  // Lives in the chat thread as a persistent live-status indicator while
  // we wait for a human support agent. Three states drive the same DOM:
  //   'connecting' — spinner + title + ETA + live elapsed counter
  //   'longer'     — same card, copy updated, elapsed keeps ticking
  //   'timeout'    — orange variant, warning icon, no spinner/elapsed
  function addConnectingCard(state, opts = {}) {
    const thread = getThread();
    const el = document.createElement('div');
    el.className = 'tw-emma-connecting-card';
    el.setAttribute('role', 'status');
    el.setAttribute('aria-live', 'polite');
    el.innerHTML = `
      <div class="tw-emma-connecting-card-spinner" aria-hidden="true"></div>
      <div class="tw-emma-connecting-card-body">
        <p class="tw-emma-connecting-card-title">Connecting to support</p>
        <p class="tw-emma-connecting-card-eta">
          <i class="fa-regular fa-clock"></i>
          <span class="tw-emma-connecting-card-eta-text">${esc(opts.eta || 'Typical wait ~ 2 minutes')}</span>
          <span class="tw-emma-connecting-card-elapsed">· 0:00 elapsed</span>
        </p>
      </div>
    `;
    thread.appendChild(el);
    // Start the elapsed-time ticker (mm:ss). Cleared in morphConnectingCard
    // when state moves to 'timeout', or in removeConnectingCard when the
    // card is dismounted.
    const start = opts.startedAt || Date.now();
    const elapsedEl = el.querySelector('.tw-emma-connecting-card-elapsed');
    el._connectingTicker = setInterval(() => {
      const s = Math.floor((Date.now() - start) / 1000);
      const mm = Math.floor(s / 60);
      const ss = String(s % 60).padStart(2, '0');
      elapsedEl.textContent = `· ${mm}:${ss} elapsed`;
    }, 1000);
    el._connectingStart = start;
    scrollToMessage(el);
    return el;
  }
  function morphConnectingCard(card, state, opts = {}) {
    if (!card) return;
    if (state === 'longer') {
      // Card stays the same shape (spinner + body), only copy updates.
      const titleEl   = card.querySelector('.tw-emma-connecting-card-title');
      const etaTextEl = card.querySelector('.tw-emma-connecting-card-eta-text');
      if (titleEl)   titleEl.textContent   = opts.title   || 'Taking a bit longer than usual';
      if (etaTextEl) etaTextEl.textContent = opts.etaText || 'Still trying to reach the team';
    } else if (state === 'timeout') {
      // Flip variant: orange palette, swap spinner for warning icon,
      // drop the elapsed counter (no longer relevant once we've given up).
      clearInterval(card._connectingTicker);
      card._connectingTicker = null;
      card.classList.add('tw-emma-connecting-card-timeout');
      card.innerHTML = `
        <div class="tw-emma-connecting-card-icon-warn" aria-hidden="true">
          <i class="fa-regular fa-clock"></i>
        </div>
        <div class="tw-emma-connecting-card-body">
          <p class="tw-emma-connecting-card-title">${esc(opts.title || 'No agent available right now')}</p>
          <p class="tw-emma-connecting-card-msg">${esc(opts.msg || "Looks like the team is tied up. Here's what I can do for you instead:")}</p>
        </div>
      `;
    }
  }
  function removeConnectingCard(card) {
    if (!card) return;
    if (card._connectingTicker) {
      clearInterval(card._connectingTicker);
      card._connectingTicker = null;
    }
    card.remove();
  }
  // ── showOptions ──────────────────────────────────────────────────────
  // Shows labelled pill buttons in the composer opt-area.
  // Returns a Promise resolving with the chosen pill's text.
  function showOptions(label, pills) {
    return new Promise(resolve => {
      pendingOpts = { label, pills, resolve }; // save for mode-switch transfer
      const optArea = getOptArea();
      const labelEl = getOptLabel();
      const pillsEl = getOptPills();
      labelEl.textContent = label;
      pillsEl.innerHTML   = '';
      pills.forEach(text => {
        const btn = document.createElement('button');
        btn.className   = `tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive sp-opts-pill--${mode}`;
        btn.type        = 'button';
        btn.textContent = text;
        btn.addEventListener('click', () => {
          pendingOpts = null;                      // clear saved state on resolve
          getOptArea().classList.remove('sp-opts--active'); // dynamic lookup — safe after mode switch
          getOptPills().innerHTML = '';
          addUser(text);
          resolve(text);
        });
        pillsEl.appendChild(btn);
      });
      optArea.classList.add('sp-opts--active');
      // Scroll composer into view
      const container = getContainer();
      container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
    });
  }
  // ── rerenderOpts — rebuild pending options in the newly active composer ──
  // Called by expandToFullPage/collapseToPanel when pendingOpts is set.
  // Mode must already be updated before calling this.
  function rerenderOpts() {
    if (!pendingOpts) return;
    const { label, pills, resolve } = pendingOpts;
    // Clear the old composer's opt-area (mode is already switched, so old = the opposite)
    const oldOptArea = mode === 'full'
      ? document.getElementById('sp-panel-opt-area')
      : document.getElementById('sp-fp-opt-area');
    const oldPillsEl = mode === 'full'
      ? document.getElementById('sp-panel-opt-pills')
      : document.getElementById('sp-fp-opt-pills');
    oldOptArea.classList.remove('sp-opts--active');
    oldPillsEl.innerHTML = '';
    // Rebuild in new composer
    const optArea = getOptArea();
    const labelEl = getOptLabel();
    const pillsEl = getOptPills();
    labelEl.textContent = label;
    pillsEl.innerHTML   = '';
    pills.forEach(text => {
      const btn = document.createElement('button');
      btn.className   = `tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive sp-opts-pill--${mode}`;
      btn.type        = 'button';
      btn.textContent = text;
      btn.addEventListener('click', () => {
        pendingOpts = null;
        getOptArea().classList.remove('sp-opts--active');
        getOptPills().innerHTML = '';
        addUser(text);
        resolve(text);
      });
      pillsEl.appendChild(btn);
    });
    optArea.classList.add('sp-opts--active');
  }
  // ── showGate ─────────────────────────────────────────────────────────
  // Hides the textarea + toolbar, appends gateEl to the composer card.
  // Returns a Promise resolving with the data-resolve value of the clicked button.
  function showGate(gateEl) {
    return new Promise(resolve => {
      const composerCard = getComposerCard();
      const fpMain = mode === 'full'
        ? document.getElementById('sp-fp-overlay')?.querySelector('.tw-support-fp-main')
        : null;
      activeGate = { el: gateEl, resolve, composerCard, fpMain }; // save for mode-switch transfer
      composerCard.classList.add('sp-composer--gate-open');
      fpMain?.classList.add('sp-fp-main--gate-open');
      composerCard.appendChild(gateEl);
      // Scroll to show the gate
      const container = getContainer();
      container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
      gateEl.querySelectorAll('[data-resolve]').forEach(btn => {
        btn.addEventListener('click', () => {
          activeGate = null;                         // clear saved state on resolve
          gateEl.remove();
          composerCard.classList.remove('sp-composer--gate-open'); // closure ref — valid after activeGate cleared
          fpMain?.classList.remove('sp-fp-main--gate-open');
          resolve(btn.dataset.resolve);
        });
      });
    });
  }
  // ── Sidebar: Insert into reply ───────────────────────────────────────
  function sbInsertIntoReply() {
    const hintText = 'For SIMS v7.194 nil class errors on the student index, navigate to Settings › Data Management › Rebuild index and run a full re-index. Resolves in ~4 minutes.';
    const composerField = mode === 'panel'
      ? document.querySelector('#sp-panel .sp-ta')
      : document.querySelector('.sp-fp-ta');
    const btn = document.getElementById('sb-insert-btn');
    if (!composerField || !btn) return;
    composerField.value = hintText;
    composerField.classList.add('tw-support-composer-flash');
    composerField.focus();
    btn.textContent = 'Inserted ✓';
    btn.disabled = true;
    setTimeout(() => {
      composerField.classList.remove('tw-support-composer-flash');
    }, 800);
    setTimeout(() => {
      btn.textContent = 'Insert into reply';
      btn.disabled = false;
    }, 3000);
  }
  // ── Sidebar: Pick up a thread ─────────────────────────────────────────
  // Updates the chat panel thread content and brief card row highlight.
  // Thread history is pre-baked static HTML for the prototype.
  const sbThreads = {
    'sims-session': {
      badge: 'Active — now',
      history: `
        <div class="tw-chat-divider"><div class="tw-chat-divider-line"></div><span class="tw-chat-divider-label">SIMS nil class error — today</span><div class="tw-chat-divider-line"></div></div>
        <div class="tw-agent-chat-msg"><div class="tw:flex tw:flex-col tw:gap-1 tw:min-w-0 tw:flex-1"><p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">Hi Tom — I can see you're having a nil class error in SIMS v7.194. This typically occurs after the student index becomes stale. Let me check the known fix for this.</p></div></div>
        <div class="tw-agent-chat-msg tw-agent-chat-msg-user"><div class="tw-agent-chat-bubble-user">Yes, it's been happening since yesterday's update.</div></div>
        <div class="tw-agent-chat-msg"><div class="tw:flex tw:flex-col tw:gap-1 tw:min-w-0 tw:flex-1"><p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">Go to Settings › Data Management › Rebuild index and run a full re-index. It takes about 4 minutes.</p></div></div>
      `
    },
    'spinner-session': {
      badge: 'Interrupted — Tue 14:12',
      history: `
        <div class="tw-chat-divider"><div class="tw-chat-divider-line"></div><span class="tw-chat-divider-label">Form submission spinner — interrupted Tue 14:12</span><div class="tw-chat-divider-line"></div></div>
        <div class="tw-agent-chat-msg"><div class="tw:flex tw:flex-col tw:gap-1 tw:min-w-0 tw:flex-1"><p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">Hi Tom — I can see ticket #HS-7294 is open for the form submission spinner on the Year 12 application form. Did you want to pick this up?</p></div></div>
        <div class="tw-agent-chat-msg tw-agent-chat-msg-user"><div class="tw-agent-chat-bubble-user">Yes, the spinner never goes away after clicking Submit.</div></div>
        <div class="tw-agent-chat-msg"><div class="tw:flex tw:flex-col tw:gap-1 tw:min-w-0 tw:flex-1"><p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">This is a known intermittent issue. Engineering are investigating — ticket #HS-7294 is marked high priority. I'll flag that you're still seeing it.</p></div></div>
      `
    },
    'bulk-import-session': {
      badge: 'Unresolved — Mon 10:48',
      history: `
        <div class="tw-chat-divider"><div class="tw-chat-divider-line"></div><span class="tw-chat-divider-label">Bulk course import — Mon 10:48</span><div class="tw-chat-divider-line"></div></div>
        <div class="tw-agent-chat-msg tw-agent-chat-msg-user"><div class="tw-agent-chat-bubble-user">I need to bulk import 142 Year 12 students into their course groups. How do I do that?</div></div>
        <div class="tw-agent-chat-msg"><div class="tw:flex tw:flex-col tw:gap-1 tw:min-w-0 tw:flex-1"><p class="tw:text-body-s tw:text-neutral-900 tw:leading-body-s">Go to Course Groups › Import Students, download the CSV template, fill in the student IDs and course codes, then re-upload. I'll fetch the template link now.</p></div></div>
        <div class="tw-agent-chat-msg tw-agent-chat-msg-user"><div class="tw-agent-chat-bubble-user">The upload keeps failing at 80% — it just stops.</div></div>
      `
    }
  };
  let sbActiveThread = 'sims-session';
  function sbPickUp(threadId) {
    if (!sbThreads[threadId]) return;
    const thread = sbThreads[threadId];
    sbActiveThread = threadId;
    // Update chat panel thread content
    const chatThread = document.getElementById('sp-shared-thread');
    if (chatThread) chatThread.innerHTML = thread.history;
    // Update brief card row highlight
    document.querySelectorAll('.sp-brief-row').forEach(row => {
      row.classList.remove('sp-brief-row-active');
    });
    const activeRow = document.querySelector(`.sp-brief-row[onclick*="${threadId}"]`);
    if (activeRow) activeRow.classList.add('sp-brief-row-active');
    // Focus composer
    const composer = mode === 'panel'
      ? document.querySelector('#sp-panel .sp-ta')
      : document.querySelector('.sp-fp-ta');
    if (composer) { composer.value = ''; composer.focus(); }
    updatePlaceholders();
  }
  // ── Sidebar: Mark resolved ────────────────────────────────────────────
  function sbMarkResolved(threadKey) {
    const card = document.getElementById(`sb-card-${threadKey}`);
    const pill = document.getElementById(`sb-pill-${threadKey}`);
    if (!card) return;
    // Update pill label
    if (pill) pill.textContent = '✓ Resolved';
    // Animate card out after short delay
    setTimeout(() => {
      card.classList.add('sp-thread-card-dismissing');
      setTimeout(() => {
        card.remove();
        // Check if all open items are resolved
        const list = document.getElementById('sb-also-open-list');
        const remaining = list ? list.querySelectorAll('.tw-card') : [];
        if (remaining.length === 0) {
          const banner = document.getElementById('sb-resolved-banner');
          if (banner) banner.classList.remove('tw-support-hidden');
        }
      }, 300);
    }, 700);
  }
  // ── Sidebar: After the call log ───────────────────────────────────────
  function sbToggleLog() {
    const body = document.getElementById('sb-log-body');
    const toggle = document.getElementById('sb-log-toggle');
    const chevron = document.getElementById('sb-log-chevron');
    if (!body) return;
    const isOpen = body.classList.contains('tw-show');
    body.classList.toggle('tw-show', !isOpen);
    if (toggle) toggle.setAttribute('aria-expanded', String(!isOpen));
    if (chevron) chevron.classList.toggle('sp-log-chevron-open', !isOpen);
  }
  function sbSaveLog() {
    const textarea = document.getElementById('sb-log-textarea');
    const saveBtn = document.getElementById('sb-log-save-btn');
    if (!saveBtn) return;
    saveBtn.textContent = 'Saved ✓';
    saveBtn.disabled = true;
    setTimeout(() => {
      if (textarea) textarea.value = '';
      saveBtn.textContent = 'Save note';
      saveBtn.disabled = false;
      // Collapse the log section
      const body = document.getElementById('sb-log-body');
      const toggle = document.getElementById('sb-log-toggle');
      const chevron = document.getElementById('sb-log-chevron');
      if (body) body.classList.remove('tw-show');
      if (toggle) toggle.setAttribute('aria-expanded', 'false');
      if (chevron) chevron.classList.remove('sp-log-chevron-open');
    }, 2500);
  }
  // ── runScript ────────────────────────────────────────────────────────
  // Full linear conversation — panel (s1–s6) then full-page (s7–s11).
  async function runScript() {
    // ── s1: Greeting ──────────────────────────────────────────────────
    await addEmma([
      { type: 'thinking', value: 'Reading your context…', delay: 1.4 },
      { type: 'msg', value: 'Hi Helen — I can see you\'re on Year 12 Admissions at Greenford High. What can I help you with today?', duration: 1.2 }
    ]);
    await wait(400);
    updatePlaceholders();
    await waitForUserMessage();
    await addEmma([{ type: 'thinking', value: 'Searching knowledge base…', delay: 1.4 }]);
    const choice = await showOptions('What do you need help with?', [
      'How do I configure offer conditions?',
      'A student has a technical error',
      'Generate a reporting export',
      'Log a support ticket',
      'Something else'
    ]);
    if (choice === 'Something else') {
      addDivider('Out of scope');
      await addEmma([
        { type: 'thinking', value: 'Searching knowledge base…', delay: 1.8 },
        { type: 'msg', value: "That's outside the scope of what I can help with, I'm afraid. I'm Emma, Applicaa's in-platform support assistant for Admissions+, so I can only help with how-to and troubleshooting questions related to the platform itself.", duration: 1.5 }
      ]);
      await showOptions('Can I help with anything else?', [
        'Talk to a human',
        'Log a ticket'
      ]);
      return;
    }
    // ── s2: KB answer with steps ───────────────────────────────────────
    addDivider('How-to · Offer conditions');
    await addEmma([
      { type: 'thinking', value: 'Searching knowledge base…', delay: 1.8 },
      { type: 'status', value: 'Found 3 relevant articles' },
      { type: 'msg', value: 'To configure offer conditions in Admissions+:', duration: 0.6 },
      { type: 'html', value: `
        <div class="sp-steps-rail">
          <div class="sp-step-row"><span class="sp-step-num">1.</span><span class="sp-step-text">Open the subject record and go to the <strong>Offer Rules</strong> tab</span></div>
          <div class="sp-step-row"><span class="sp-step-num">2.</span><span class="sp-step-text">Click <strong>+ Add condition</strong> in the rule builder</span></div>
          <div class="sp-step-row"><span class="sp-step-num">3.</span><span class="sp-step-text">Set the grade threshold and subject requirement</span></div>
          <div class="sp-step-row"><span class="sp-step-num">4.</span><span class="sp-step-text">Toggle <strong>Active</strong> and click <strong>Save & publish</strong></span></div>
        </div>` },
      { type: 'key-info', rows: [
        { label: 'Where', value: 'Subject record → <strong>Offer Rules</strong> tab' },
        { label: 'Action', value: 'Add condition → <strong>Save & publish</strong>' }
      ]},
      { type: 'source', value: 'Offer conditions — Admissions+ Help Centre' }
    ]);
    addResolvedPill();
    await wait(300);
    // ── s3: Long-form how-to — interview slots ────────────────────────
    // Demonstrates the chat-scoped <h4>/<ol>/<ul>/.tw-inline-notification
    // hierarchy added in support-panel.css. Mirrors the QA-ticket repro
    // case "How do I set up interview slots and invite students?".
    // Spec: docs/superpowers/specs/2026-05-21-emma-support-long-answer-hierarchy-design.md
    addDivider('How-to · Interview slots');
    await wait(600);
    addUser('One more — how do I set up interview slots and invite students?');
    await addEmma([
      { type: 'thinking', value: 'Searching knowledge base…', delay: 1.6 },
      { type: 'status', value: 'Found 2 relevant articles' },
      { type: 'msg', value: 'In the Add Interview wizard, the two steps that handle the schedule and students are:', duration: 0.6 },
      { type: 'html', value: `
        <h4>Step 3 — Schedule Slots & Assign Staff</h4>
        <ol>
          <li>Click <strong>+ New meeting slots</strong> and fill in:
            <ul>
              <li><strong>Start date</strong>, <strong>Start time</strong>, <strong>End time</strong> (e.g. 12:00pm–4:00pm)</li>
              <li><strong>Length of each slot</strong> (e.g. 15 minutes)</li>
              <li><strong>Gap between slots</strong> (optional break time)</li>
              <li><strong>Number of attendees per slot</strong> (1 for 1-to-1, more for group interviews)</li>
              <li><strong>Assign Staff</strong> member conducting the interview</li>
              <li><strong>Location</strong> (or paste an online meeting link)</li>
            </ul>
          </li>
          <li>Optionally toggle <strong>"Set up as repeating slots"</strong> if the interview recurs across multiple weeks.</li>
          <li>Click <strong>+ Add new slots</strong> to auto-generate the time slots, review them, then click <strong>Confirm</strong>.</li>
          <li>Click <strong>Next</strong>.</li>
        </ol>
        <h4>Step 4 — Add Students</h4>
        <ol>
          <li>Use the <strong>Add Students</strong> function on the final screen to assign applicants to the slots.</li>
        </ol>
        <div class="tw-inline-notification tw-inline-notification-warning tw-inline-notification-compact">
          <span class="tw-inline-notification-icon"><i class="fa-regular fa-triangle-exclamation"></i></span>
          <div class="tw-inline-notification-content">
            <div class="tw-inline-notification-message">
              Only students who already have an <strong>Offer Made</strong> status can be added to interview slots. Students still in <strong>Pending</strong> need an offer first.
            </div>
          </div>
        </div>
      ` },
      { type: 'source', value: "How to Create an Interview, Guidance Meeting, or Parents' Evening — Admissions+ Help Centre" }
    ]);
    addResolvedPill();
    await wait(300);
    // ── s4: New question — Arbor error code ───────────────────────────
    addDivider('New question');
    await wait(600);
    addUser('Also — I\'m seeing a sync warning. What does ERR_ARBOR_4021 mean?');
    await addEmma([
      { type: 'thinking', value: 'Looking up Arbor error codes…', delay: 1.4 },
      { type: 'msg', value: 'ERR_ARBOR_4021 is an Arbor schema violation — a required field in the API response is missing or malformed. This can prevent Year 13 cohort data from syncing to Admissions+.', duration: 1.8 },
      { type: 'key-info', rows: [
        { label: 'Error', value: '<code>ERR_ARBOR_4021</code> — schema violation' },
        { label: 'Impact', value: 'Year 13 cohort records fail to sync to Admissions+' },
        { label: 'Cause', value: 'Required field missing or malformed in Arbor API response' }
      ]},
      { type: 'source', value: 'Arbor error codes — Admissions+ Help Centre' }
    ]);
    await wait(400);
    // ── s5: Disambiguation ────────────────────────────────────────────
    await addEmma([
      { type: 'msg', value: 'A missing cohort is more serious. Which describes the situation best?', duration: 0.8 }
    ]);
    await wait(300);
    await showOptions('What are you seeing?', [
      'Year 13 records don\'t appear at all',
      'Records appear but data looks wrong',
      'Sync runs but shows 0 students synced'
    ]);
    addDivider('Looking deeper');
    await addEmma([
      { type: 'thinking', value: 'Cross-referencing Arbor sync documentation…', delay: 2 },
      { type: 'status', value: 'Checked 4 articles' },
      { type: 'msg', value: 'When Year 13 records are completely absent, this typically means the cohort transfer endpoint returned a schema_violation. Admissions+ silently skips invalid records. I found one article that covers this specific error type.', duration: 2.4 }
    ]);
    await wait(400);
    // ── s6: Not found → escalation options ────────────────────────────
    addDivider('Escalating');
    await addEmma([
      { type: 'thinking', value: 'Checking for related escalation articles…', delay: 1.2 },
      { type: 'escalation-badge' },
      { type: 'msg', value: 'I found a related article about ERR_ARBOR_4021 schema violations. I can\'t fully diagnose your specific Year 13 issue from here. Would you like to see the article, or connect to a support agent who can access your sync logs?', duration: 2 }
    ]);
    await wait(400);
    await showOptions('What would you like to do?', [
      'Show me the related article',
      'Connect me to a support agent'
    ]);
    // ── Transition to full-page ────────────────────────────────────────
    expandToFullPage();
    await wait(300);
    // ── s7: Article (full-page) ────────────────────────────────────────
    addDivider('Emma Support — expanded view');
    await addEmma([
      { type: 'thinking', value: 'Loading article…', delay: 1 },
      { type: 'status', value: 'Found ERR_ARBOR_4021 article' },
      { type: 'msg', value: 'Here\'s the most relevant article:', duration: 0.5 },
      { type: 'html', value: `
        <div class="sp-article-card">
          <p class="sp-article-card-label">Help Article</p>
          <p class="sp-article-card-title">Arbor ERR_ARBOR_4021 — schema_violation in cohort sync</p>
          <div class="sp-article-card-row"><span class="sp-article-card-key">What it means: </span><span class="sp-article-card-val">Arbor's MIS API returned a record with a missing or invalid required field. Admissions+ silently skips these records.</span></div>
          <div class="sp-article-card-row"><span class="sp-article-card-key">Common causes: </span><span class="sp-article-card-val">Missing UPN, invalid date of birth, or incorrect year group in Arbor.</span></div>
          <div class="sp-article-card-row"><span class="sp-article-card-key">Quick fix: </span><span class="sp-article-card-val">Settings → Integrations → Arbor → Last sync log. Correct records and re-sync.</span></div>
          <a class="tw-badge tw-badge-primary-subtle"><i class="fa-regular fa-arrow-up-right-from-square"></i> ERR_ARBOR_4021 — Admissions+ Help Centre</a>
        </div>` }
    ]);
    await wait(500);
    // ── s8: Handoff gate ───────────────────────────────────────────────
    addDivider('Connecting to support agent');
    await addEmma([
      { type: 'thinking', value: 'Checking agent availability…', delay: 1.2 },
      { type: 'status', value: 'Agent available' },
      { type: 'msg', value: 'I\'ll connect you with a support agent now. Please confirm the details below.', duration: 0.9 }
    ]);
    const handoffForm = document.createElement('div');
    handoffForm.className = 'sp-gate-form-fp';
    handoffForm.innerHTML = `
      <p class="tw:text-body-s tw:font-semibold tw:text-neutral-900 tw:mb-3">Connect to a support agent</p>
      <div class="tw:mb-2">
        <p class="tw:text-xs tw:text-neutral-500 tw:mb-1">Your name</p>
        <div class="sp-gate-locked">Helen Pajusoon</div>
      </div>
      <div class="tw:mb-2">
        <p class="tw:text-xs tw:text-neutral-500 tw:mb-1">School</p>
        <div class="sp-gate-locked">Greenford High School</div>
      </div>
      <div class="tw:mb-3">
        <p class="tw:text-xs tw:text-neutral-500 tw:mb-1">Issue summary</p>
        <textarea class="tw-form-control tw-form-control-sm" rows="2">ERR_ARBOR_4021 — Year 13 cohort not appearing after sync</textarea>
      </div>
      <div class="tw:flex tw:justify-end tw:gap-2">
        <button class="tw-btn tw-btn-secondary tw-btn-sm" data-resolve="cancel">Cancel</button>
        <button class="tw-btn tw-btn-primary tw-btn-sm" data-resolve="connect">Connect to agent</button>
      </div>
    `;
    await showGate(handoffForm);
    // ── New handoff flow: three-stage timeout. See
    // docs/superpowers/specs/2026-05-21-emma-support-handoff-design.md
    //
    // Stage A — Connecting (0 → 2 min in real life, ~6 s in prototype).
    // Emma sends a non-empty transition message; we append a persistent
    // connecting card with a live elapsed counter; the composer textarea
    // is the user's "do anything else" affordance.
    await addEmma([
      { type: 'msg', value: 'Connecting you now — someone from the Admissions+ support team will be with you shortly.', duration: 0.5 }
    ]);
    const connectingCard = addConnectingCard('connecting', { eta: 'Typical wait ~ 2 minutes', startedAt: Date.now() });
    updatePlaceholders('connecting');
    const stageA = await Promise.race([
      waitForSend(),
      wait(HANDOFF_STAGE_B_DELAY_MS).then(() => '__STAGE_B__'),
    ]);
    if (stageA !== '__STAGE_B__') {
      // User typed — implicit cancel path.
      removeConnectingCard(connectingCard);
      updatePlaceholders();
      addDivider('Back with Emma');
      addUser(stageA);
      await addEmma([
        { type: 'msg', value: 'No problem — I\'m still here. What else can I help with?', duration: 1.0 }
      ]);
      return; // end the scenario; user can pick another scenario via existing entry points
    }
    // Stage B — Taking a bit longer than usual. Same card slot, spinner
    // keeps ticking; copy updates; three numbered pills appear in the
    // composer-options area via the existing showOptions() API.
    morphConnectingCard(connectingCard, 'longer', {
      title:   'Taking a bit longer than usual',
      etaText: 'Still trying to reach the team',
    });
    updatePlaceholders(); // back to default "Ask a follow-up…"
    const stageB = await Promise.race([
      showOptions('What would you like to do?', [
        '1. Try a different question',
        '2. Log a ticket',
        '3. End session',
      ]),
      waitForSend(),
      wait(HANDOFF_STAGE_C_DELAY_MS).then(() => '__STAGE_C__'),
    ]);
    if (pendingSendResolver) pendingSendResolver = null;
    // Stage B routing (Stage C added in the next task).
    if (stageB === '1. Try a different question') {
      removeConnectingCard(connectingCard);
      addDivider('Back with Emma');
      await addEmma([
        { type: 'msg', value: 'No problem — I\'m still here. What else can I help with?', duration: 1.0 }
      ]);
      return;
    }
    if (stageB === '2. Log a ticket') {
      removeConnectingCard(connectingCard);
      await addEmma([
        { type: 'msg', value: 'I\'ll log a ticket for the Arbor sync issue so the team can follow up. Let me pre-fill the details.', duration: 1.0 }
      ]);
      await wait(600);
      // Quick confirmation card for the Arbor ticket so the narrative
      // flow makes sense before s10's Chemistry-spinner addUser line.
      const arborConfirmed = document.createElement('div');
      arborConfirmed.className = 'tw:flex tw:items-center tw:gap-2 tw:p-3 tw:bg-green-100 tw:border tw:border-green-200 tw:rounded-lg';
      arborConfirmed.innerHTML = `
        <i class="fa-regular fa-circle-check tw:text-green-600 tw:text-base"></i>
        <div>
          <p class="tw:text-body-s tw:font-semibold tw:text-green-800">Ticket #SUP-2846 created</p>
          <p class="tw:text-xs tw:text-green-700">Arbor ERR_ARBOR_4021 sync issue · High priority</p>
        </div>
      `;
      getThread().appendChild(arborConfirmed);
      scrollToMessage(arborConfirmed);
      await wait(900);
      await addEmma([
        { type: 'msg', value: 'Anything else I can help with while we wait?', duration: 1.0 }
      ]);
      // Falls through to the existing s10 ticket-gate flow below
      // (user mentions the Chemistry spinner bug).
    } else if (stageB === '3. End session') {
      removeConnectingCard(connectingCard);
      await addEmma([
        { type: 'msg', value: 'No problem — I\'ll end this chat. The team will reach out if anything urgent comes up.', duration: 1.0 }
      ]);
      await wait(800);
      doClosePanel();
      return;
    } else if (stageB !== '__STAGE_C__') {
      // User typed in the textarea — implicit cancel path (same as Stage A).
      removeConnectingCard(connectingCard);
      addDivider('Back with Emma');
      addUser(stageB);
      await addEmma([
        { type: 'msg', value: 'No problem — I\'m still here. What else can I help with?', duration: 1.0 }
      ]);
      return;
    }
    // Stage C — Final timeout. Card flips to the orange .tw-emma-connecting-
    // card-timeout variant (warning clock icon, no spinner, no elapsed).
    // Two strong pills: ticket (durable handoff) or Ask Emma instead.
    if (stageB === '__STAGE_C__') {
      morphConnectingCard(connectingCard, 'timeout', {
        title: 'No agent available right now',
        msg:   "Looks like the team is tied up. Here's what I can do for you instead:",
      });
      const stageC = await Promise.race([
        showOptions('What would you like to do?', [
          '1. Log a ticket so the team can follow up',
          '2. Ask Emma instead',
        ]),
        waitForSend(),
      ]);
      if (pendingSendResolver) pendingSendResolver = null;
      if (stageC === '1. Log a ticket so the team can follow up') {
        removeConnectingCard(connectingCard);
        await addEmma([
          { type: 'msg', value: 'I\'ll log a ticket for the Arbor sync issue so the team can follow up. Let me pre-fill the details.', duration: 1.0 }
        ]);
        await wait(600);
        // Quick confirmation card for the Arbor ticket so the narrative
        // flow makes sense before s10's Chemistry-spinner addUser line.
        const arborConfirmed = document.createElement('div');
        arborConfirmed.className = 'tw:flex tw:items-center tw:gap-2 tw:p-3 tw:bg-green-100 tw:border tw:border-green-200 tw:rounded-lg';
        arborConfirmed.innerHTML = `
          <i class="fa-regular fa-circle-check tw:text-green-600 tw:text-base"></i>
          <div>
            <p class="tw:text-body-s tw:font-semibold tw:text-green-800">Ticket #SUP-2846 created</p>
            <p class="tw:text-xs tw:text-green-700">Arbor ERR_ARBOR_4021 sync issue · High priority</p>
          </div>
        `;
        getThread().appendChild(arborConfirmed);
        scrollToMessage(arborConfirmed);
        await wait(900);
        await addEmma([
          { type: 'msg', value: 'Anything else I can help with while we wait?', duration: 1.0 }
        ]);
        // Falls through to the existing s10 ticket-gate flow below
        // (user mentions the Chemistry spinner bug).
      } else if (stageC === '2. Ask Emma instead') {
        removeConnectingCard(connectingCard);
        addDivider('Back with Emma');
        await addEmma([
          { type: 'msg', value: 'No problem — I\'m still here. What else can I help with?', duration: 1.0 }
        ]);
        return;
      } else {
        // User typed — implicit cancel path.
        removeConnectingCard(connectingCard);
        addDivider('Back with Emma');
        addUser(stageC);
        await addEmma([
          { type: 'msg', value: 'No problem — I\'m still here. What else can I help with?', duration: 1.0 }
        ]);
        return;
      }
    }
    // ── s9: (formerly Sarah Hassan live-agent walkthrough) ─────────────
    // Removed — the new three-stage handoff flow (Tasks 7-9) never connects
    // to a live agent, so this block is unreachable. The Arbor issue is now
    // resolved via the "Log a ticket" pill in Stage B/C instead.
    // ── s10: Ticket gate ───────────────────────────────────────────────
    addUser('Actually yes — there\'s also a spinner bug on the Year 12 Chemistry subject page.');
    await addEmma([
      { type: 'thinking', value: 'Checking if this is a known issue…', delay: 1.2 },
      { type: 'status', value: 'Not a known issue' },
      { type: 'msg', value: 'I\'ll create a support ticket for the engineering team. Let me pre-fill the details.', duration: 1 }
    ]);
    const ticketForm = document.createElement('div');
    ticketForm.className = 'sp-gate-form-fp';
    ticketForm.innerHTML = `
      <p class="tw:text-body-s tw:font-semibold tw:text-neutral-900 tw:mb-3">Log support ticket</p>
      <div class="tw:mb-2">
        <p class="tw:text-xs tw:text-neutral-500 tw:mb-1">Title</p>
        <div class="sp-gate-locked">Spinner bug on Year 12 Chemistry subject page</div>
      </div>
      <div class="tw:mb-3">
        <p class="tw:text-xs tw:text-neutral-500 tw:mb-1">Priority</p>
        <div class="tw:flex tw:gap-2">
          <button class="tw-btn tw-btn-sm tw:flex-1 sp-priority" type="button" data-p="low">Low</button>
          <button class="tw-btn tw-btn-sm tw:flex-1 sp-priority sp-priority--selected" type="button" data-p="medium">Medium</button>
          <button class="tw-btn tw-btn-sm tw:flex-1 sp-priority" type="button" data-p="high">High</button>
          <button class="tw-btn tw-btn-sm tw:flex-1 sp-priority" type="button" data-p="urgent">Urgent</button>
        </div>
      </div>
      <div class="tw:flex tw:justify-end tw:gap-2">
        <button class="tw-btn tw-btn-secondary tw-btn-sm" data-resolve="cancel">Cancel</button>
        <button class="tw-btn tw-btn-primary tw-btn-sm" data-resolve="submit">Submit ticket</button>
      </div>
    `;
    // Wire priority toggle (non-resolving)
    ticketForm.querySelectorAll('.sp-priority').forEach(btn => {
      btn.addEventListener('click', () => {
        ticketForm.querySelectorAll('.sp-priority').forEach(b => {
          b.classList.remove('sp-priority--selected');
          b.classList.remove('sp-priority--selected-urgent');
        });
        if (btn.dataset.p === 'urgent') {
          btn.classList.add('sp-priority--selected-urgent');
        } else {
          btn.classList.add('sp-priority--selected');
        }
      });
    });
    const ticketResult = await showGate(ticketForm);
    if (ticketResult === 'submit') {
      const thread = getThread();
      const confirmed = document.createElement('div');
      confirmed.className = 'tw:flex tw:items-center tw:gap-2 tw:p-3 tw:bg-green-100 tw:border tw:border-green-200 tw:rounded-lg';
      confirmed.innerHTML = `
        <i class="fa-regular fa-circle-check tw:text-green-600 tw:text-base"></i>
        <div>
          <p class="tw:text-body-s tw:font-semibold tw:text-green-800">Ticket #SUP-2847 created</p>
          <p class="tw:text-xs tw:text-green-700">Spinner bug on Year 12 Chemistry · Medium priority</p>
        </div>
      `;
      thread.appendChild(confirmed);
      scrollToMessage(confirmed);
    }
    // ── s11: Agentic CSV export ────────────────────────────────────────
    await wait(600);
    await addEmma([
      { type: 'msg', value: 'Before you go — you asked about a reporting export earlier. Would you like me to generate the Year 12 offer status CSV now? I can pull the data and format it for you.', duration: 2, delay: 0.3 }
    ]);
    await wait(400);
    const exportChoice = await showOptions('Generate the export?', [
      'Yes — generate Year 12 offer status CSV',
      'No thanks, I\'m done for now'
    ]);
    if (exportChoice.startsWith('Yes')) {
      await addEmma([
        { type: 'thinking', value: 'Querying Year 12 offer data…', delay: 1.5 },
        { type: 'status', value: 'Found 203 records' },
        { type: 'msg', value: 'Here\'s a preview of the export — 203 records with offer, pending, and rejected statuses:', duration: 1.2 }
      ]);
      const csvForm = document.createElement('div');
      csvForm.className = 'sp-gate-form-fp';
      csvForm.innerHTML = `
        <table class="tw-table tw-table-sm tw:text-xs tw:mb-3">
          <thead>
            <tr><th>Student</th><th>Subject</th><th>Status</th></tr>
          </thead>
          <tbody>
            <tr><td>Amara Osei</td><td>Mathematics</td><td><span class="tw-badge tw-badge-success-subtle">Offered</span></td></tr>
            <tr><td>Benjamin Kaur</td><td>Chemistry</td><td><span class="tw-badge tw-badge-warning-subtle">Pending</span></td></tr>
            <tr><td>Lily Chen</td><td>Psychology</td><td><span class="tw-badge tw-badge-success-subtle">Offered</span></td></tr>
            <tr><td class="tw:text-neutral-400 tw:italic" colspan="3">+ 200 more rows</td></tr>
          </tbody>
        </table>
        <div class="tw:flex tw:gap-2">
          <button class="tw-btn tw-btn-primary tw-btn-sm tw:flex-1" data-resolve="download">
            <i class="fa-regular fa-arrow-down-to-bracket"></i>
            Download CSV (203 rows)
          </button>
          <button class="tw-btn tw-btn-tertiary tw-btn-sm" data-resolve="cancel">Cancel</button>
        </div>
      `;
      const csvResult = await showGate(csvForm);
      if (csvResult === 'download') {
        const thread = getThread();
        const dl = document.createElement('div');
        dl.className = 'tw:flex tw:items-center tw:gap-2 tw:p-3 tw:bg-blue-100 tw:border tw:border-blue-200 tw:rounded-lg';
        dl.innerHTML = `
          <i class="fa-regular fa-file-csv tw:text-blue-600 tw:text-base"></i>
          <div>
            <p class="tw:text-body-s tw:font-semibold tw:text-blue-800">year-12-offer-status.csv downloaded</p>
            <p class="tw:text-xs tw:text-blue-700">203 records · Generated just now</p>
          </div>
        `;
        thread.appendChild(dl);
        scrollToMessage(dl);
      }
    }
    // ── Session wrap-up ────────────────────────────────────────────────
    addDivider('Session complete');
    await addEmma([
      { type: 'msg', value: 'You\'re all set, Helen. To recap: ticket #SUP-2846 is logged for the Arbor sync issue, ticket #SUP-2847 is logged for the Chemistry spinner bug, and your CSV is ready. The team will follow up on both tickets shortly. Have a good day!', duration: 2.2 }
    ]);
    await wait(400);
    await showOptions('What would you like to do next?', [
      'Ask a new question',
      'View my open tickets',
      'End session'
    ]);
  }
  // ── Handoff demo timing ──────────────────────────────────────────────
  // In real life these would be ~2 min and ~5 min. In the prototype we
  // compress to ~6 s each so reviewers can see all three stages quickly.
  const HANDOFF_STAGE_B_DELAY_MS = 6000;
  const HANDOFF_STAGE_C_DELAY_MS = 6000;
  // ── Out-of-hours state ───────────────────────────────────────────────
  const OOH_BANNER_ID = 'sp-ooh-banner';
  const OOH_BANNER_HTML = `
    <div id="${OOH_BANNER_ID}" class="tw-inline-notification tw-inline-notification-warning tw:mx-3 tw:my-2 tw:rounded-lg">
      <i class="tw-inline-notification-icon fa-regular fa-clock"></i>
      <div class="tw-inline-notification-content">
        <div class="tw-inline-notification-title">Outside support hours</div>
        <div class="tw-inline-notification-message">Emma is available Mon–Fri 9:00 am–5:30 pm. Leave a message and we'll follow up.</div>
      </div>
    </div>`;
  function setOutOfHours(enabled) {
    // 1. Textarea state + placeholder
    document.querySelectorAll('.sp-ta, .sp-fp-ta').forEach(ta => {
      ta.disabled = enabled;
      ta.placeholder = enabled ? 'Leave a message for Emma…' : (document.querySelector('#sp-shared-thread .tw-agent-chat-msg') ? 'Ask a follow-up…' : 'Ask Emma…');
    });
    // 2. Banner: inject after panel header in whichever mode is visible
    document.getElementById(OOH_BANNER_ID)?.remove();
    if (enabled) {
      const hdr = mode === 'full'
        ? document.querySelector('.tw-support-fp-hdr')
        : document.querySelector('.tw-support-panel-hdr');
      hdr?.insertAdjacentHTML('afterend', OOH_BANNER_HTML);
    }
    // 3. OOH class on FP overlay (used by demo toggle button to track state)
    document.getElementById('sp-fp-overlay')?.classList.toggle('sp-panel--ooh', enabled);
    // 4. Avatar status — both panel and FP headers
    ['sp-panel-status-dot', 'sp-fp-status-dot'].forEach(id => {
      const el = document.getElementById(id);
      if (!el) return;
      el.classList.toggle('tw-avatar-status-online', !enabled);
      el.classList.toggle('tw-avatar-status-offline', enabled);
    });
    ['sp-panel-status-text', 'sp-fp-status-text'].forEach(id => {
      const el = document.getElementById(id);
      if (!el) return;
      el.textContent = enabled ? 'Unavailable until 9:00 am' : 'Online';
    });
  }
  // ── Resolved state ───────────────────────────────────────────────────
  function setResolved(enabled) {
    // Show/hide both resolved CTAs (panel + FP — only one visible at a time)
    document.querySelectorAll('.sp-resolved-cta').forEach(el => {
      el.classList.toggle('tw-support-hidden', !enabled);
    });
    // Disable/enable textareas
    document.querySelectorAll('.sp-ta, .sp-fp-ta').forEach(ta => {
      ta.disabled = enabled;
      if (enabled) {
        ta.placeholder = 'This conversation is resolved';
      } else {
        updatePlaceholders();
      }
    });
  }
  // ── View chat history: expand to FP then open history panel ─────────
  function viewChatHistory() {
    expandToFullPage();
    toggleHistoryPanel();
  }
  // ── Toggle history panel ────────────────────────────────────────────
  function toggleHistoryPanel() {
    const panel = document.getElementById('sp-hist-panel');
    const btn   = document.getElementById('sp-fp-hist-btn');
    if (!panel) return;
    const isOpen = panel.classList.toggle('tw-support-hist-panel--open');
    if (btn) btn.classList.toggle('tw-support-fp-btn--active', isOpen);
  }
  // ── New chat ─────────────────────────────────────────────────────────
  function spNewChat() {
    _onNextUserMsg = null;
    setResolved(false);
    // Close history panel
    const panel = document.getElementById('sp-hist-panel');
    const btn   = document.getElementById('sp-fp-hist-btn');
    if (panel) panel.classList.remove('tw-support-hist-panel--open');
    if (btn)   btn.classList.remove('tw-support-fp-btn--active');
    // Reset FP title to placeholder
    const titleEl = document.getElementById('sp-fp-title');
    if (titleEl) {
      titleEl.textContent = 'Chat with Emma';
      titleEl.classList.add('tw-support-fp-title--placeholder');
    }
    // Clear active history row
    document.querySelectorAll('.tw-support-hist-row').forEach(r =>
      r.classList.remove('tw-support-hist-row--active')
    );
  }
  // ── Send button + Enter-key wiring ───────────────────────────────────
  // The prototype is fully scripted; the only place user-typed text feeds
  // back into the flow is through waitForSend() / consumePendingSend().
  // When no Promise is awaiting, send is a no-op (existing behavior).
  function handleSend(text, ta) {
    if (!text || !text.trim()) return;
    // First, give any pending waitForSend() Promise (Stage A/B/C) first claim.
    // If none, fall back to the normal addUser path so the textarea also
    // satisfies waitForUserMessage() gates in regular scripted scenarios.
    if (consumePendingSend(text)) {
      ta.value = '';
      return;
    }
    addUser(text.trim());
    ta.value = '';
  }
  function attachSendHandlers() {
    document.querySelectorAll('.sp-send, .sp-fp-send').forEach(btn => {
      if (btn._sendWired) return;
      btn._sendWired = true;
      btn.addEventListener('click', () => {
        const ta = mode === 'full'
          ? document.querySelector('.sp-fp-ta')
          : document.querySelector('#sp-panel .sp-ta');
        if (!ta) return;
        handleSend(ta.value, ta);
      });
    });
    document.querySelectorAll('.sp-ta, .sp-fp-ta').forEach(ta => {
      if (ta._sendWired) return;
      ta._sendWired = true;
      ta.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          handleSend(ta.value, ta);
        }
      });
    });
  }
  attachSendHandlers();
  // ── FAB start listener ───────────────────────────────────────────────
  document.querySelector('[data-controller~="support"]').addEventListener('support:start', () => {
    runScript().catch(console.error);
  });
  // ── Deep-link (#activity): open the full-page chat with the Activity panel ──
  // Used by the "Back to chat" link on the Activity Audit page. Opens the chat
  // view and the side panel on the Activity tab without running the scripted demo.
  function openActivityPanelView() {
    spStarted = true;     // makes spFabToggle take the "resume" branch (no scripted demo)
    spFabToggle();        // open the floating panel + dimmed bg (the normal, working path)
    expandToFullPage();   // then expand to the full-page chat
    const histPanel = document.getElementById('sp-hist-panel');
    if (histPanel && !histPanel.classList.contains('tw-support-hist-panel--open')) {
      toggleHistoryPanel();
    }
    const tabs = document.querySelectorAll('#sp-hist-panel .tw-tab');
    if (tabs[1]) tabs[1].click(); // 2nd tab = Activity
  }
  if (location.hash === '#activity') {
    window.addEventListener('load', () => setTimeout(openActivityPanelView, 60));
  }
</script>