<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { -webkit-font-smoothing: antialiased; }
  /* Panel composer card */
  .sp-panel-composer-card {
    border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden;
    background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }
  .sp-opts { display: none; padding: 6px 9px 4px; border-bottom: 1px solid #f0f0f0; }
  .sp-opts.sp-opts--active { display: block; }
  .sp-opts-label { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; }
  .sp-opts-pills { display: flex; flex-direction: column; gap: 4px; }
  .sp-input-section { padding: 5px 8px 2px; }
  .sp-ta {
    width: 100%; border: none; outline: none; resize: none;
    font-size: 12px; color: #1a1a2e; padding: 4px 0;
    font-family: inherit; line-height: 1.5; background: transparent; min-height: 28px;
  }
  .sp-ta::placeholder { color: #9ca3af; }
  .sp-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 2px 8px 7px;
  }
  .sp-tb-btn {
    min-width: 28px; min-height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #9ca3af; cursor: pointer; border: none; background: transparent;
    transition: background-color 150ms ease;
  }
  .sp-tb-btn:hover { background: #f3f4f6; }
  .sp-tb-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
  .sp-send {
    width: 36px; height: 36px; border-radius: 50%; background: #263b91;
    display: flex; align-items: center; justify-content: center;
    color: white; margin-left: auto; cursor: pointer; border: none;
    transition: transform 150ms ease, background-color 150ms ease;
  }
  .sp-send:hover  { background: #1e2f7a; }
  .sp-send:active { transform: scale(0.96); }
  /* Gate open: hide textarea + toolbar; allow card to grow without clipping */
  .sp-panel-composer-card.sp-composer--gate-open .sp-input-section,
  .sp-panel-composer-card.sp-composer--gate-open #sp-panel-toolbar { display: none; }
  .sp-fp-composer-card.sp-composer--gate-open .sp-input-section,
  .sp-fp-composer-card.sp-composer--gate-open #sp-fp-toolbar { display: none; }
  .sp-panel-composer-card.sp-composer--gate-open,
  .sp-fp-composer-card.sp-composer--gate-open { overflow: visible; }
  .tw-support-fp-main.sp-fp-main--gate-open { overflow: visible; }
  /* Full-page composer card */
  .sp-fp-composer-card {
    border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden;
    background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  }
  .sp-fp-opts { display: none; padding: 10px 14px 6px; border-bottom: 1px solid #f0f0f0; }
  .sp-fp-opts.sp-opts--active { display: block; }
  .sp-fp-opts-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 7px; }
  .sp-fp-opts-pills { display: flex; flex-direction: column; gap: 5px; }
  .sp-fp-input-section { padding: 8px 14px 3px; }
  .sp-fp-ta {
    width: 100%; border: none; outline: none; resize: none;
    font-size: 13px; color: #1a1a2e; padding: 4px 0;
    font-family: inherit; line-height: 1.5; background: transparent; min-height: 32px;
  }
  .sp-fp-ta::placeholder { color: #9ca3af; }
  .sp-fp-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 10px 9px;
  }
  .sp-fp-send {
    width: 36px; height: 36px; border-radius: 50%; background: #263b91;
    display: flex; align-items: center; justify-content: center;
    color: white; margin-left: auto; cursor: pointer; border: none;
    transition: transform 150ms ease, background-color 150ms ease;
  }
  .sp-fp-send:hover  { background: #1e2f7a; }
  .sp-fp-send:active { transform: scale(0.96); }
  /* ── Activity sidebar ── */
  .tw-agent-activity-sidebar { width: 0; overflow: hidden; border-left: 0px solid #e2e8f0; background: #f8fafc; flex-shrink: 0; transition: width 250ms ease, border-left-width 0ms; }
  /* ── Gate form (appears in composer) ── */
  .sp-gate-form { padding: 10px 12px 12px; }
  .sp-gate-form-fp { padding: 12px 14px 14px; }
  .sp-gate-locked {
    font-size: 13px; color: #1a1a2e; padding: 5px 8px;
    background: #f8fafc; border-radius: 6px; border: 1px solid #e5e7eb;
  }
  /* Priority buttons */
  .sp-priority { background: white; }
  .sp-priority--selected { background: var(--tw-color-orange-100); border-color: var(--tw-color-orange-500); color: var(--tw-color-orange-900); }
  /* Join / leave banners */
  .sp-join-banner {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    font-size: 11px; color: #374151; padding: 4px 12px;
  }
  .sp-join-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
  .sp-leave-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; }
  /* Agent avatars */
  .tw-support-av-agent.tw-avatar { background: var(--tw-color-green-600); color: white; }
  /* Background page — reduce top padding so tabs sit close to topbar */
  #sp-background-page .tw-page-header {
    padding-top: 0.5rem;
  }
  /* Background page tab row — prevent text wrap, reduce gap to fit all tabs on one line */
  #sp-background-page .tw-tabs {
    gap: 0.75rem;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #sp-background-page .tw-tabs::-webkit-scrollbar { display: none; }
  .sp-opts-pill--panel { min-height: 36px; font-size: 12px; }
  .sp-opts-pill--full  { min-height: 44px; font-size: 13px; }
  .sp-priority--selected-urgent {
    background: #fef2f2; border-color: #fca5a5; color: #b91c1c;
  }
  /* Pills — override neutral tag with primary interactive styling */
  .tw-tag.sp-opts-pill--panel,
  .tw-tag.sp-opts-pill--full {
    background: rgba(38, 60, 145, 0.08);
    border-color: rgba(38, 60, 145, 0.45);
    color: #263c91;
    font-weight: 500;
  }
  .tw-tag.sp-opts-pill--panel:hover,
  .tw-tag.sp-opts-pill--full:hover {
    background: rgba(38, 60, 145, 0.15);
    border-color: rgba(38, 60, 145, 0.70);
  }
  /* ── Support sidebar — brief card rows ── */
  .sp-brief-row {
    display: flex; gap: 8px; cursor: pointer;
    padding: 6px 0; align-items: flex-start;
    border-radius: 6px;
    transition: background-color 150ms ease;
  }
  .sp-brief-row:hover { background: rgba(38,60,145,0.04); padding-left: 4px; padding-right: 4px; margin: 0 -4px; }
  .sp-brief-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--tw-color-neutral-300); flex-shrink: 0; margin-top: 5px;
  }
  .sp-brief-row-active .sp-brief-dot { background: var(--tw-color-primary); }
  .sp-brief-row-text { font-size: 11px; color: var(--tw-color-neutral-600); flex: 1; min-width: 0; }
  .sp-brief-row-active .sp-brief-row-text > strong { color: var(--tw-color-primary); }
  .sp-brief-row-time { font-size: 11px; color: var(--tw-color-neutral-400); flex-shrink: 0; }
  /* ── Support sidebar — thread card action footer ── */
  .sp-thread-actions { display: flex; gap: 6px; padding: 0 12px 12px; }
  /* ── Support sidebar — resolved banner ── */
  .sp-resolved-banner {
    background: var(--tw-color-neutral-100); border: 1px solid var(--tw-color-neutral-200);
    border-radius: 8px; padding: 10px 12px;
    font-size: 11px; color: var(--tw-color-neutral-600);
    text-align: center;
  }
  /* ── Support sidebar — composer flash ── */
  .sp-ta.tw-support-composer-flash,
  .sp-fp-ta.tw-support-composer-flash {
    outline: 2px solid var(--tw-color-primary-200);
    background: var(--tw-color-primary-50);
    transition: outline-color 800ms ease, background-color 800ms ease;
  }
  /* ── Support sidebar — tab panel scroll area ── */
  .sp-sidebar-panel {
    flex: 1; overflow-y: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 12px;
  }
  /* ── Support sidebar — section label ── */
  .sp-sidebar-section-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--tw-color-neutral-400);
    margin-bottom: 6px;
  }
  /* ── Support sidebar — thread card dismissal ── */
  .sp-thread-card-dismissing {
    opacity: 0; transform: scale(0.98);
    transition: opacity 300ms ease, transform 300ms ease;
    pointer-events: none;
  }
  /* ── Support sidebar — log chevron open ── */
  .sp-log-chevron-open {
    transform: rotate(90deg);
  }
  /* ── Thread slot wrappers — must grow to fill panel/FP flex column ── */
  #sp-panel-thread-slot {
    flex: 1; overflow: hidden;
    display: flex; flex-direction: column;
  }
  #sp-fp-thread-slot {
    flex: 1; overflow: hidden;
    display: flex; flex-direction: column;
  }
  /* ── Step rail ── */
  .sp-steps-rail {
    display: flex; flex-direction: column;
    border-left: 2px solid #e5e7eb;
    margin-left: 7px; padding-left: 13px;
  }
  .sp-step-row { display: flex; gap: 7px; align-items: flex-start; padding: 4px 0; }
  .sp-step-num { font-size: 11px; font-weight: 700; color: #263c91; min-width: 14px; flex-shrink: 0; margin-top: 1px; line-height: 1.6; }
  .sp-step-text { font-size: 13px; line-height: 1.5; color: #111827; }
  /* ── Article card ── */
  .sp-article-card {
    border: 1px solid #e5e7eb; border-radius: 10px;
    border-left: 3px solid #263c91;
    padding: 10px 12px; background: #fafafa; margin-top: 2px;
  }
  .sp-article-card-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #263c91; margin-bottom: 4px;
  }
  .sp-article-card-title { font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 7px; }
  .sp-article-card-row { margin-bottom: 4px; }
  .sp-article-card-key { font-size: 12px; font-weight: 600; color: #374151; }
  .sp-article-card-val { font-size: 12px; color: #4b5563; line-height: 1.45; }
  /* ── Key info block ── */
  .sp-key-info {
    background: #f8faff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .sp-key-info-row { display: flex; gap: 6px; align-items: baseline; }
  .sp-key-info-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #263c91;
    min-width: 52px;
    flex-shrink: 0;
  }
  .sp-key-info-val { font-size: 12px; color: #111827; line-height: 1.4; }
  .sp-key-info-val strong { font-weight: 600; }
  .sp-key-info-val code {
    font-size: 11px;
    font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 3px;
    padding: 0 4px;
    color: #1d4ed8;
  }
  /* Override: lock FP overlay to viewport in Lookbook preview context */
  #sp-fp-overlay { position: fixed; }
</style>
<div
  data-controller="sidebar support"
  data-action="support:reset->support#reset"
  data-support-panel-open-class="tw-support-bg-dimmed"
  data-support-sidebar-open-class="tw-support-sidebar--open"
  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:relative tw:overflow-hidden 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>
    <div class="tw-support-backdrop" data-support-target="backdrop" data-action="click->support#closePanel"></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"
      data-action="click->support#openPanel"
      >
      <div class="tw-support-fab-ring"></div>
      <div class="tw-support-fab-av">E</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 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>
          <div class="tw-support-panel-hdr-status">
            <i class="fa-solid fa-circle tw:text-green-400 tw:text-xs"></i>
            Online
          </div>
        </div>
        <div class="tw-support-panel-hdr-btns">
          <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 id="sp-panel-close-btn" class="tw-support-panel-btn" type="button" aria-label="Close panel"
                  data-controller="tooltip" data-tooltip-content-value="End conversation" data-tooltip-placement-value="bottom"
                  onclick="confirmClosePanel()">
            <i class="fa-regular fa-xmark"></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="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="Or ask a follow-up…" 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 class="tw-avatar-status tw-avatar-status-online"></span>
          </div>
          <div>
            <div class="tw:text-sm tw:font-semibold tw:text-neutral-900">Emma · Applicaa Support</div>
            <div class="tw:text-xs tw:text-neutral-500 tw:mt-0.5">Online</div>
          </div>
          <div class="tw:flex-1"></div>
          <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" onclick="collapseToPanel()">
            <i class="fa-regular fa-compress tw:me-1"></i>
            Float panel
          </button>
          <div class="tw:w-px tw:h-5 tw:bg-neutral-200 tw:mx-1"></div>
          <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button"
                  data-action="click->support#toggleActivitySidebar"
            aria-label="Toggle activity sidebar">
            <i class="fa-regular fa-sidebar-flip"></i>
          </button>
        </div>
        <div id="sp-fp-thread-slot"></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="Type a message…" 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>
              <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 id="sp-activity-sidebar" class="tw-agent-activity-sidebar" data-support-target="activitySidebar">
        <div class="tw-agent-activity-sidebar-content">
          <div data-controller="tabs">
            <div class="tw:h-14 tw:bg-neutral-100 tw:border-b tw:border-neutral-200 tw:flex tw:items-end tw:px-0">
              <div class="tw-tabs tw-tabs-justified tw-tabs-no-gap tw:w-full">
                <button class="tw-tab" type="button" role="tab"
                        data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"
                  aria-selected="true">Overview</button>
                <button class="tw-tab" type="button" role="tab"
                        data-tabs-target="tab" data-action="click->tabs#select keydown->tabs#keydown"
                  aria-selected="false">History</button>
              </div>
            </div>
            <div class="sp-sidebar-panel" data-tabs-target="panel" role="tabpanel">
              <div class="tw-card tw-card-body tw-card-sm">
                <div class="tw:flex tw:items-start tw:justify-between tw:gap-2">
                  <div>
                    <p class="tw:text-body-s tw:font-bold tw:text-neutral-900 tw:mb-0">Green Abbey School</p>
                    <p class="tw:text-body-xs tw:text-neutral-500 tw:mb-0">Tom Barnes · IT Coordinator</p>
                  </div>
                  <span class="tw-badge tw-badge-text">Staff</span>
                </div>
                <div class="tw:border-t tw:border-neutral-100 tw:my-3"></div>
                <div id="sp-brief-rows">
                  <div class="sp-brief-row sp-brief-row-active" onclick="sbPickUp('sims-session')" onkeydown="if(event.key==='Enter'||event.key===' '){sbPickUp('sims-session')}" role="button" tabindex="0" aria-label="SIMS nil class error — active">
                    <span class="sp-brief-dot"></span>
                    <span class="sp-brief-row-text"><strong>SIMS nil class error</strong><br>
                      Active — just now</span>
                    <span class="sp-brief-row-time">Now</span>
                  </div>
                  <div class="sp-brief-row" onclick="sbPickUp('spinner-session')" onkeydown="if(event.key==='Enter'||event.key===' '){sbPickUp('spinner-session')}" role="button" tabindex="0" aria-label="Form submission spinner — interrupted">
                    <span class="sp-brief-dot"></span>
                    <span class="sp-brief-row-text"><strong>Form submission spinner</strong><br>
                      Interrupted · #HS-7294</span>
                    <span class="sp-brief-row-time">Tue 14:12</span>
                  </div>
                  <div class="sp-brief-row" onclick="sbPickUp('bulk-import-session')" onkeydown="if(event.key==='Enter'||event.key===' '){sbPickUp('bulk-import-session')}" role="button" tabindex="0" aria-label="Bulk course import — unresolved">
                    <span class="sp-brief-dot"></span>
                    <span class="sp-brief-row-text"><strong>Bulk course import</strong><br>
                      Unresolved · 142 students</span>
                    <span class="sp-brief-row-time">Mon 10:48</span>
                  </div>
                </div>
              </div>
              <div>
                <p class="sp-sidebar-section-label">Resolution hint</p>
                <div class="tw-card tw-card-body tw-card-sm">
                  <p class="tw:text-body-xs tw:font-semibold tw:text-neutral-400 tw:uppercase tw:tracking-wide tw:mb-1">From a resolved thread — 3 weeks ago</p>
                  <p class="tw:text-body-xs tw:text-neutral-700 tw:mb-0">
                    For SIMS v7.194 nil class errors on the student index, navigate to
                    <strong>Settings › Data Management › Rebuild index</strong>
                    and run a full re-index. Resolves in ~4 minutes.
                  </p>
                  <div class="tw:border-t tw:border-neutral-100 tw:mt-3 tw:pt-3">
                    <button class="tw-btn tw-btn-primary tw-btn-sm" type="button" id="sb-insert-btn" onclick="sbInsertIntoReply()">
                      Insert into reply
                    </button>
                  </div>
                </div>
              </div>
              <div>
                <p class="sp-sidebar-section-label">Also open — this contact</p>
                <div id="sb-also-open-list" class="tw:flex tw:flex-col tw:gap-2">
                  <div class="tw-card tw-card-sm" id="sb-card-spinner">
                    <div class="tw:px-3 tw:pt-3 tw:pb-1">
                      <p class="tw:text-body-xs tw:font-semibold tw:text-neutral-900 tw:mb-0.5">Form submission spinner</p>
                      <p class="tw:text-body-xs tw:text-neutral-400 tw:mb-1">#HS-7294 · Tue 14:12 · Interrupted mid-session</p>
                      <span class="tw-badge tw-badge-text" id="sb-pill-spinner">Interrupted</span>
                    </div>
                    <div class="sp-thread-actions">
                      <button class="tw-btn tw-btn-primary tw-btn-sm" type="button" onclick="sbPickUp('spinner-session')">Pick up</button>
                      <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button" onclick="sbMarkResolved('spinner')">Mark resolved</button>
                    </div>
                  </div>
                  <div class="tw-card tw-card-sm" id="sb-card-bulk">
                    <div class="tw:px-3 tw:pt-3 tw:pb-1">
                      <p class="tw:text-body-xs tw:font-semibold tw:text-neutral-900 tw:mb-0.5">Bulk course import</p>
                      <p class="tw:text-body-xs tw:text-neutral-400 tw:mb-1">Mon 10:48 · 142 Year 12 students · No ticket</p>
                      <span class="tw-badge tw-badge-text" id="sb-pill-bulk">Unresolved</span>
                    </div>
                    <div class="sp-thread-actions">
                      <button class="tw-btn tw-btn-primary tw-btn-sm" type="button" onclick="sbPickUp('bulk-import-session')">Pick up</button>
                      <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button" onclick="sbMarkResolved('bulk')">Mark resolved</button>
                    </div>
                  </div>
                  <div class="sp-resolved-banner tw-support-hidden" id="sb-resolved-banner">✓ All open items resolved for this contact</div>
                </div>
              </div>
              <div>
                <p class="sp-sidebar-section-label">After the call</p>
                <div class="tw-card tw-card-sm">
                  <button class="tw:w-full tw:flex tw:items-center tw:gap-2 tw:px-3 tw:py-2.5 tw:text-left tw:bg-transparent tw:border-0 tw:cursor-pointer tw:text-neutral-700 tw:text-body-xs tw:font-medium tw:rounded-lg tw:transition-colors tw:duration-150"
                          type="button" onclick="sbToggleLog()" id="sb-log-toggle" aria-expanded="false">
                    <i class="fa-regular fa-pen tw:text-neutral-500"></i>
                    <span class="tw:flex-1">Log what actually fixed it</span>
                    <i class="fa-regular fa-chevron-right tw:text-neutral-400 tw:text-xs tw:transition-transform tw:duration-150" id="sb-log-chevron"></i>
                  </button>
                  <div class="tw-collapsible-content" id="sb-log-body">
                    <div class="tw:px-3 tw:pb-3 tw:pt-1">
                      <textarea class="tw-form-control tw-form-control-sm tw:w-full tw:mb-2" rows="2"
                                id="sb-log-textarea"
                                placeholder="e.g. Form Builder › Sections › enable bursary tile"></textarea>
                      <button class="tw-btn tw-btn-primary tw-btn-sm" type="button" id="sb-log-save-btn" onclick="sbSaveLog()">Save note</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sp-sidebar-panel" data-tabs-target="panel" role="tabpanel">
              <div>
                <p class="sp-sidebar-section-label">Today</p>
                <div class="tw:flex tw:flex-col tw:gap-1.5">
                  <div class="tw-chat-history-item tw-chat-history-active">
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-0.5">
                      <span class="tw:text-body-xs tw:font-semibold tw:truncate">SIMS v7.194 nil class error</span>
                      <span class="tw:text-body-xs tw:text-neutral-400 tw:flex-shrink-0 tw:ml-2">Now</span>
                    </div>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <span class="tw:text-body-xs tw:text-neutral-400">1 attempt · 9 messages</span>
                      <span class="tw-badge tw-badge-text tw:ml-auto"><i class="fa-solid fa-circle"></i> Active</span>
                    </div>
                  </div>
                  <div class="tw-chat-history-item">
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-0.5">
                      <span class="tw:text-body-xs tw:font-semibold tw:truncate">Form submission spinner</span>
                      <span class="tw:text-body-xs tw:text-neutral-400 tw:flex-shrink-0 tw:ml-2">14:12</span>
                    </div>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <span class="tw:text-body-xs tw:text-neutral-400">#HS-7294 · 2 attempts · 6 messages</span>
                      <span class="tw-badge tw-badge-text tw:ml-auto"><i class="fa-regular fa-arrow-right-arrow-left"></i> Handoff</span>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <p class="sp-sidebar-section-label">This week</p>
                <div class="tw:flex tw:flex-col tw:gap-1.5">
                  <div class="tw-chat-history-item">
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-0.5">
                      <span class="tw:text-body-xs tw:font-semibold tw:truncate">Bulk course import — 142 Year 12</span>
                      <span class="tw:text-body-xs tw:text-neutral-400 tw:flex-shrink-0 tw:ml-2">Mon</span>
                    </div>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <span class="tw:text-body-xs tw:text-neutral-400">1 attempt · 4 messages</span>
                      <span class="tw-badge tw-badge-text tw:ml-auto"><i class="fa-regular fa-circle-minus"></i> Unresolved</span>
                    </div>
                  </div>
                  <div class="tw-chat-history-item">
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-0.5">
                      <span class="tw:text-body-xs tw:font-semibold tw:truncate">A-Level subject setup — Maths stream</span>
                      <span class="tw:text-body-xs tw:text-neutral-400 tw:flex-shrink-0 tw:ml-2">Mon</span>
                    </div>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <span class="tw:text-body-xs tw:text-neutral-400">1 attempt · 5 messages</span>
                      <span class="tw-badge tw-badge-text tw:ml-auto"><i class="fa-regular fa-circle-check"></i> Resolved</span>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <p class="sp-sidebar-section-label">Earlier</p>
                <div class="tw:flex tw:flex-col tw:gap-1.5">
                  <div class="tw-chat-history-item">
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-0.5">
                      <span class="tw:text-body-xs tw:font-semibold tw:truncate">Bromcom student photo import</span>
                      <span class="tw:text-body-xs tw:text-neutral-400 tw:flex-shrink-0 tw:ml-2">14 Apr</span>
                    </div>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <span class="tw:text-body-xs tw:text-neutral-400">2 attempts · 11 messages</span>
                      <span class="tw-badge tw-badge-text tw:ml-auto"><i class="fa-regular fa-circle-check"></i> Resolved</span>
                    </div>
                  </div>
                  <div class="tw-chat-history-item">
                    <div class="tw:flex tw:items-center tw:justify-between tw:mb-0.5">
                      <span class="tw:text-body-xs tw:font-semibold tw:truncate">iSAMS data export — UCAS</span>
                      <span class="tw:text-body-xs tw:text-neutral-400 tw:flex-shrink-0 tw:ml-2">2 Apr</span>
                    </div>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <span class="tw:text-body-xs tw:text-neutral-400">1 attempt · 7 messages</span>
                      <span class="tw-badge tw-badge-text tw:ml-auto"><i class="fa-regular fa-arrow-right-arrow-left"></i> Awaiting dev</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<script>
  'use strict';
  // ── 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
  // ── 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-panel-close-btn')?.focus();
  }
  function doClosePanel() {
    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').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;
    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 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)}</div>
      </div>
    `;
    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) {
    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);
    scrollToMessage(msg);
  }
  // ── 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);
        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') {
        // Static badge — tw-badge-outline-secondary as direct child gets align-self:flex-start from DS
        const badge = document.createElement('span');
        badge.className = 'tw-badge tw-badge-outline-secondary';
        badge.textContent = item.value;
        msg.appendChild(badge);
        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);
      }
    }
    // Passive feedback bar (opacity-0, visible on hover via CSS)
    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"><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"><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"><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;
  }
  // ── 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(); }
  }
  // ── 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);
    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'
    ]);
    // ── 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 · Thought for 4s' },
      { 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' }
    ]);
    await wait(400);
    const fb1 = await showOptions('Did that help?', [
      'Yes, that worked ✓',
      'No — I need more detail'
    ]);
    // ── s3: Retry (if "No") ────────────────────────────────────────────
    if (fb1.startsWith('No')) {
      addDivider('Trying again with more detail');
      await addEmma([
        { type: 'thinking', value: 'Looking for a step-by-step guide…', delay: 1.5 },
        { type: 'status', value: '✓ Found detailed walkthrough · Thought for 3s' },
        { type: 'msg', value: 'In the subject record, look for the Offer Rules tab — it\'s right next to Deadlines. You\'ll see a visual rule builder where you can stack conditions, for example "Grade ≥ C" AND "No more than one resit". Hit Save & publish when done.', duration: 2.2 },
        { type: 'key-info', rows: [
          { label: 'Where', value: '<strong>Offer Rules</strong> tab (next to Deadlines)' },
          { label: 'Builder', value: 'Visual rule builder — stack conditions, e.g. "Grade ≥ C" AND "No more than one resit"' }
        ]},
        { type: 'source', value: 'Advanced offer conditions — Admissions+ Help Centre' }
      ]);
      await wait(400);
      const fb1b = await showOptions('Did that help?', ['Yes, got it ✓', 'Still need more help']);
      if (fb1b.startsWith('Yes')) {
        addResolvedPill();
        await wait(300);
      }
    }
    if (!fb1.startsWith('No')) {
      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: 'status', value: '✓ Thought for 3s' },
      { 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);
    const fb2 = await showOptions('Did that help?', [
      'Yes, I\'ll check the Arbor settings',
      'No — Year 13 cohort is entirely missing'
    ]);
    // ── s5: Disambiguation (if "missing") ─────────────────────────────
    if (fb2.includes('missing')) {
      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 · Thought for 5s' },
        { 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 · Thought for 2s' },
      { 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);
    const fb3 = await showOptions('Did the article help?', [
      'Yes, I\'ll try the fix ✓',
      'No — I need a person to help me'
    ]);
    // ── s8: Handoff gate ───────────────────────────────────────────────
    addDivider('Connecting to support agent');
    await addEmma([
      { type: 'thinking', value: 'Checking agent availability…', delay: 1.2 },
      { type: 'status', value: '✓ Agent available · Thought for 2s' },
      { 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);
    // Connecting intermediate state
    await addEmma([
      { type: 'thinking', value: 'Connecting to support team…', delay: 1.5 }
    ]);
    // ── s9: Live agent (Sarah Hassan) ──────────────────────────────────
    await wait(600);
    addBanner('Sarah Hassan joined the conversation', 'join');
    await wait(800);
    await addAgent('Sarah Hassan', 'tw-support-av-agent', [
      { type: 'msg', value: 'Hi Helen, I\'m Sarah from the Admissions+ support team. I can see you\'re having a schema_violation issue. Let me pull up your sync logs now.', duration: 1.8, delay: 0 }
    ]);
    addUser('Thanks Sarah. Year 13 is completely missing — they don\'t appear anywhere.');
    await addAgent('Sarah Hassan', 'tw-support-av-agent', [
      { type: 'msg', value: 'I can see it in your sync log — 47 ERR_ARBOR_4021 errors, all Year 13 records. Arbor is returning records without a UPN field. This happened after your Arbor update last Thursday.', duration: 2.2, delay: 0.8 }
    ]);
    addUser('How do I fix it?');
    await addAgent('Sarah Hassan', 'tw-support-av-agent', [
      { type: 'msg', value: 'I\'ve applied a data mapping fix on our side. Can you trigger a manual re-sync from Settings → Integrations → Arbor?', duration: 1.6, delay: 0.6 }
    ]);
    await wait(800);
    addUser('Done — re-synced. Year 13 is now showing ✓');
    await addAgent('Sarah Hassan', 'tw-support-av-agent', [
      { type: 'msg', value: 'Excellent — sync completed successfully. 203 Year 13 records imported. Is there anything else I can help with?', duration: 1.6, delay: 0.5 }
    ]);
    // ── 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 · Thought for 2s' },
      { 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);
    addBanner('Sarah Hassan left the conversation', 'leave');
    await wait(500);
    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 · Thought for 3s' },
        { 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: the Arbor sync is resolved (203 Year 13 records imported), ticket #SUP-2847 is logged for the Chemistry spinner bug, and your CSV is ready. 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'
    ]);
  }
  // ── FAB start listener ───────────────────────────────────────────────
  document.querySelector('[data-controller~="support"]').addEventListener('support:start', () => {
    runScript().catch(console.error);
  });
</script>