<style>
  /* NOTE: @apply does not work in ERB <style> blocks — raw CSS only (sibling convention) */
  /* ── Screen transition animations ─────────────────────────── */
  @keyframes ofr-screen-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; pointer-events: none; }
  }
  @keyframes ofr-screen-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ofr-screen-exiting { animation: ofr-screen-fade-out 0.15s ease forwards; }
  .ofr-screen-entering { animation: ofr-screen-fade-in 0.2s ease forwards; }
  .ofr-thinking-exiting { opacity: 0; transition: opacity 150ms ease; }
  /* ── Chat header — h1 margin + expanding search (sibling convention) ── */
  #ofr-content-header h1 { margin-bottom: 0; }
  #ofr-content-header .tw-form-control[type="search"] {
    border: none;
    box-shadow: none;
    padding-right: 0;
    transition: max-width 0.2s ease, opacity 0.2s ease;
  }
  #ofr-content-header .tw-form-control[type="search"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--tw-color-primary-300);
  }
  /* Feedback buttons — only visible on message hover */
  #ofr-root .tw-agent-chat-msg .tw-agent-chat-feedback {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  #ofr-root .tw-agent-chat-msg:hover .tw-agent-chat-feedback { opacity: 1; }
  /* Thinking indicator SVG — size the nucleus (emma.css only sizes it inside
     .tw-agent-status-ring-thinking; the chat-status usage needs its own cap) */
  #ofr-root .tw-agent-chat-status svg { width: 40px; height: 40px; flex-shrink: 0; }
  /* ── Right activity sidebar — expanded ⇄ 48px strip ─────────── */
  #ofr-activity-sidebar {
    width: clamp(260px, 30%, 360px);
    flex-shrink: 0;
    overflow: hidden;
    transition-property: width;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 280ms;
    background-color: var(--tw-color-neutral-100);
    position: relative;
  }
  #ofr-activity-sidebar.ofr-is-strip { width: 48px; }
  /* Strip overlay — visible only when collapsed */
  .ofr-strip {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms 120ms;
    z-index: 2;
    background-color: var(--tw-color-neutral-100);
    border-left: 1px solid var(--tw-color-neutral-translucent-200);
  }
  #ofr-activity-sidebar.ofr-is-strip .ofr-strip {
    opacity: 1;
    pointer-events: auto;
  }
  #ofr-activity-sidebar.ofr-is-strip .tw-agent-activity-sidebar-content {
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms;
  }
  /* Sidebar tabs — neutral underline instead of primary (sibling convention) */
  #ofr-activity-sidebar .tw-tab.tw-active {
    color: var(--tw-color-neutral-900);
    border-bottom-color: var(--tw-color-neutral-800);
  }
  #ofr-activity-sidebar .tw-tab:not(.tw-active):hover {
    color: var(--tw-color-neutral-700);
  }
  /* Activity feed — truncate titles gracefully at narrow widths */
  #ofr-activity-sidebar .tw-agent-timeline-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #ofr-activity-sidebar .tw-agent-timeline-item-desc { text-wrap: pretty; }
  /* New activity item — brief highlight fade */
  @keyframes ofrItemHighlight {
    0%, 25% { background-color: rgba(37, 58, 106, 0.06); }
    100%    { background-color: transparent; }
  }
  .ofr-aitem-new {
    animation: ofrItemHighlight 2.5s ease forwards;
    border-radius: 6px;
    padding: 2px 4px;
    margin: 0 -4px;
  }
</style>
<div data-controller="sidebar" id="ofr-root">
  <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 tw-active"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="parents"
        data-label="Parents & Enquiries"
        aria-expanded="false">
        <i class="fa-light fa-user-group tw-sidebar-icon"></i>
        <span class="tw:sr-only">Parents & Enquiries</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Communications & Events -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="communications"
        data-label="Communications & Events"
        aria-expanded="false">
        <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
        <span class="tw:sr-only">Communications & Events</span>
      </button>
      <!-- Registered Students -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="students"
        data-label="Registered Students"
        aria-expanded="false">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Registered Students</span>
      </button>
      <!-- Marketing -->
      <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
      <!-- Enrolments -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="enrolments"
        data-label="Enrolments"
        aria-expanded="false">
        <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
        <span class="tw:sr-only">Enrolments</span>
      </button>
      <!-- Applicaa Futures -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="applicaafutures"
        data-label="Applicaa Futures"
        aria-expanded="false">
        <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
        <span class="tw:sr-only">Applicaa Futures</span>
      </button>
      <!-- Data -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="data"
        data-label="Data"
        aria-expanded="false">
        <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
        <span class="tw:sr-only">Data</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
      </button>
      <!-- Manage Users -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="manageusers"
        data-label="Manage Users"
        aria-expanded="false">
        <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
        <span class="tw:sr-only">Manage Users</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
      </button>
      <!-- Platform Essentials -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="essentials"
        data-label="Platform Essentials"
        aria-expanded="false">
        <i class="fa-light fa-bell tw-sidebar-icon"></i>
        <span class="tw:sr-only">Platform Essentials</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</span>
      </button>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="settings"
        data-label="Settings"
        aria-expanded="false">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </button>
    </div>
  </aside>
  <!-- Parents & Enquiries Drawer -->
  <div class="tw-sidebar-drawer tw-open"
     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 tw-active">
        <span class="tw-drawer-item-label">Enquiries</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">LISTS</div>
    <nav class="tw-drawer-nav">
      <a href="/lookbook/preview/projects/lists/index"
       class="tw-drawer-item">
        <span class="tw-drawer-item-label">Lists</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="/lookbook/preview/projects/workflow/approvals" data-turbo="false" class="tw-drawer-subitem tw:flex tw:items-center">
          <i class="fa-regular fa-clipboard-check"></i>
          Approvals
          <span class="tw-badge tw-badge-danger tw-badge-sm tw:ml-auto">3</span>
        </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>
      <!-- Tours (single item — links to the Tours prototype) -->
      <a href="/lookbook/preview/projects/tours/all_tours" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Tours</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>
      <div class="tw-sidebar-drawer-header tw:flex tw:items-center tw:gap-2">
        Help Desk <span class="tw-badge tw-badge-primary-subtle tw-badge-sm tw:normal-case tw:tracking-normal">New</span>
      </div>
      <a href="/lookbook/preview/projects/schools_helpdesk/helpdesk" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Tickets</span>
      </a>
      <a href="/lookbook/preview/projects/schools_helpdesk/knowledge" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Knowledge</span>
      </a>
      <a href="/lookbook/preview/projects/schools_helpdesk/settings" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Help Desk Settings</span>
      </a>
    </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>
      <div class="tw-sidebar-drawer-header tw:flex tw:items-center tw:gap-2">
        Emma <span class="tw-badge tw-badge-primary-subtle tw-badge-sm tw:normal-case tw:tracking-normal">New</span>
      </div>
      <a href="/lookbook/preview/projects/agent/emma_usage" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Usage & credits</span>
      </a>
      <a href="/lookbook/preview/projects/agent/activity_table" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Activity</span>
      </a>
      <span class="tw-drawer-item tw-disabled" aria-disabled="true">
        <span class="tw-drawer-item-label">Activity audit</span>
        <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:normal-case tw:tracking-normal">Soon</span>
      </span>
      <span class="tw-drawer-item tw-disabled" aria-disabled="true">
        <span class="tw-drawer-item-label">How-to & guides</span>
        <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:normal-case tw:tracking-normal">Soon</span>
      </span>
      <a href="/lookbook/preview/projects/drafts_archived/agent/emma_settings" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Emma settings</span>
      </a>
    </nav>
  </div>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- Context Dropdown (trimmed to 3 items for this prototype) -->
      <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">2026/27 - Year 12 Sixth Form Entry</span>
          <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m2 5 6 6 6-6"/>
          </svg>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-wide" 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="2026-y12">
            <span class="tw-dropdown-item-text">2026/27 - Year 12 Sixth Form 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-y12">
            <span class="tw-dropdown-item-text">2025/26 - Year 12 Sixth Form 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-y7-main">
            <span class="tw-dropdown-item-text">2026/27 - 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>
        </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-soft-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-soft-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-soft-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">
        <!-- Journey icon + progress badge + journey popover (the chosen fresh_c design) -->
        <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
          <button type="button" id="ofr-journey-btn"
                  class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn tw:relative"
                  aria-label="Your admissions journey — 3 of 6 moments set"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown"
            data-controller="tooltip" data-tooltip-content-value="Your admissions journey" data-tooltip-placement-value="bottom">
            <i class="fa-regular fa-route tw-icon-16"></i>
            <span id="ofr-journey-badge" class="tw-badge tw-badge-primary tw-badge-notification">3/6</span>
          </button>
          <!-- Journey popover — glance-and-resume only; chat stays the editor -->
          <div class="tw-dropdown-menu tw-dropdown-menu-end tw-dropdown-menu-wide" role="dialog" aria-label="Your year with Emma" data-dropdown-target="menu" tabindex="-1">
            <div class="tw:px-4 tw:pt-3 tw:pb-3">
              <p class="tw:text-body-m tw:leading-body-m tw:font-semibold tw:text-neutral-900 tw:mb-0.5">Your year with Emma</p>
              <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-2"><span data-ofr-count-text>3 of 6 moments set</span> · <span data-ofr-note>pencilled from last year</span></p>
              <div data-ofr-progressbar class="tw-progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Journey progress">
                <div data-ofr-progress class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:50%]"></div>
              </div>
              <!-- Year strip in miniature -->
              <div class="tw:grid tw:grid-cols-12 tw:gap-0.5 tw:mt-3" aria-hidden="true">
                <span class="tw:text-indicator tw:leading-indicator tw:font-semibold tw:text-primary tw:text-center">S</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">O</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">N</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">D</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">J</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">F</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">M</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">A</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">M</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">J</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">J</span>
                <span class="tw:text-indicator tw:leading-indicator tw:text-neutral-400 tw:text-center">A</span>
              </div>
              <div class="tw:grid tw:grid-cols-12 tw:gap-0.5 tw:mt-1" aria-hidden="true">
                <span data-ofr-map="leadgen" class="tw:col-start-1 tw:col-span-2 tw:h-1 tw:rounded-full tw:bg-neutral-200"></span>
                <span data-ofr-map="nurture" class="tw:col-start-3 tw:col-span-2 tw:h-1 tw:rounded-full tw:bg-neutral-200"></span>
                <span data-ofr-map="interviews" class="tw:col-start-6 tw:col-span-2 tw:h-1 tw:rounded-full tw:bg-neutral-200"></span>
              </div>
              <div class="tw:grid tw:grid-cols-12 tw:gap-0.5 tw:mt-0.5" aria-hidden="true">
                <span data-ofr-map="appwindow" class="tw:col-start-1 tw:col-span-5 tw:h-1 tw:rounded-full tw:bg-orange-300"></span>
                <span data-ofr-map="offers" class="tw:col-start-7 tw:col-span-2 tw:h-1 tw:rounded-full tw:bg-orange-300"></span>
                <span data-ofr-map="enrolment" class="tw:col-start-11 tw:col-span-2 tw:h-1 tw:rounded-full tw:bg-orange-300"></span>
              </div>
            </div>
            <div class="tw-dropdown-divider"></div>
            <!-- The six moments -->
            <div role="list" aria-label="Admissions moments">
              <div role="listitem" class="tw:flex tw:items-center tw:gap-2.5 tw:px-4 tw:py-2">
                <i data-ofr-moment-icon="leadgen" class="fa-regular fa-circle-dot tw:text-primary tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                <div class="tw:flex-1 tw:min-w-0">
                  <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-neutral-900 tw:mb-0">Lead generation</p>
                  <p data-ofr-moment-sub="leadgen" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0 tw:truncate">Where new enquiries come from</p>
                </div>
                <span data-ofr-moment-tag="leadgen" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-primary-subtle">Up next</span>
              </div>
              <div role="listitem" class="tw:flex tw:items-center tw:gap-2.5 tw:px-4 tw:py-2">
                <i data-ofr-moment-icon="nurture" class="fa-regular fa-circle tw:text-neutral-300 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                <div class="tw:flex-1 tw:min-w-0">
                  <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-neutral-900 tw:mb-0">Nurture</p>
                  <p data-ofr-moment-sub="nurture" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0 tw:truncate">Keep leads warm until they apply</p>
                </div>
                <span data-ofr-moment-tag="nurture" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-secondary-soft">Not started</span>
              </div>
              <div role="listitem" class="tw:flex tw:items-center tw:gap-2.5 tw:px-4 tw:py-2">
                <i data-ofr-moment-icon="appwindow" class="fa-regular fa-pencil tw:text-orange-500 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                <div class="tw:flex-1 tw:min-w-0">
                  <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-neutral-900 tw:mb-0">Application window</p>
                  <p data-ofr-moment-sub="appwindow" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0 tw:truncate">Open 14 Sep 2026 · close 15 Jan 2027</p>
                </div>
                <span data-ofr-moment-tag="appwindow" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-warning-subtle tw:border-dashed">Pencilled</span>
              </div>
              <div role="listitem" class="tw:flex tw:items-center tw:gap-2.5 tw:px-4 tw:py-2">
                <i data-ofr-moment-icon="interviews" class="fa-regular fa-circle tw:text-neutral-300 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                <div class="tw:flex-1 tw:min-w-0">
                  <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-neutral-900 tw:mb-0">Interviews</p>
                  <p data-ofr-moment-sub="interviews" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0 tw:truncate">Feb – Mar · optional</p>
                </div>
                <span data-ofr-moment-tag="interviews" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-secondary-soft">Not started</span>
              </div>
              <div role="listitem" class="tw:flex tw:items-center tw:gap-2.5 tw:px-4 tw:py-2">
                <i data-ofr-moment-icon="offers" class="fa-regular fa-pencil tw:text-orange-500 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                <div class="tw:flex-1 tw:min-w-0">
                  <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-neutral-900 tw:mb-0">Offers</p>
                  <p data-ofr-moment-sub="offers" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0 tw:truncate">Reply by 26 Mar 2027</p>
                </div>
                <span data-ofr-moment-tag="offers" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-warning-subtle tw:border-dashed">Pencilled</span>
              </div>
              <div role="listitem" class="tw:flex tw:items-center tw:gap-2.5 tw:px-4 tw:py-2">
                <i data-ofr-moment-icon="enrolment" class="fa-regular fa-pencil tw:text-orange-500 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                <div class="tw:flex-1 tw:min-w-0">
                  <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-neutral-900 tw:mb-0">Enrolment</p>
                  <p data-ofr-moment-sub="enrolment" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0 tw:truncate">26 Aug 2027 · optional</p>
                </div>
                <span data-ofr-moment-tag="enrolment" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-warning-subtle tw:border-dashed">Pencilled</span>
              </div>
            </div>
            <div class="tw-dropdown-divider"></div>
            <div class="tw:px-3 tw:pt-2 tw:pb-3">
              <button id="ofr-popover-continue" class="tw-btn tw-btn-primary tw-btn-sm tw-btn-block" type="button">
                <i class="fa-regular fa-route"></i> Continue with Emma
              </button>
              <div class="tw:text-center tw:mt-1.5">
                <button id="ofr-popover-later" class="tw-btn tw-btn-tertiary tw-btn-sm" type="button">Remind me later</button>
              </div>
            </div>
          </div>
          <!-- One-time coach-mark (decline path only) -->
          <div id="ofr-journey-hint" role="status"
               class="tw:hidden tw:absolute tw:top-full tw:right-0 tw:mt-3 tw:z-50 tw:w-56 tw:rounded-lg tw:bg-primary tw:text-white tw:text-body-xs tw:leading-body-xs tw:px-3 tw:py-2 tw:shadow-lg tw:text-left">
            <span class="tw:absolute tw:-top-1 tw:right-4 tw:w-2 tw:h-2 tw:bg-primary tw:rotate-45" aria-hidden="true"></span>
            Your journey lives here now — pick it up any time.
          </div>
        </div>
        <!-- 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 (menu trimmed for this prototype) -->
      <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="Olga Whitfield">
            <span>OW</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">Olga Whitfield</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-lock tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Password & security</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 id="ofr-main" class="tw-sidebar-topbar-content-offset tw-h-screen-offset tw:overflow-y-auto tw:bg-white">
    <section id="ofr-welcome" aria-label="Welcome from Emma">
      <div class="tw:w-full tw:max-w-4xl tw:mx-auto tw:px-4 tw:pt-10 tw:pb-16 tw:flex tw:flex-col tw:items-center">
        <!-- Greeting -->
        <div class="tw:text-center tw:mb-9">
          <div class="tw-avatar tw-avatar-primary tw-avatar-xl tw:mx-auto tw:mb-5" role="img" aria-label="Emma, Online">
            <span>E</span>
            <span class="tw-avatar-status tw-avatar-status-online"><span class="tw:sr-only">Online</span></span>
          </div>
          <h1 class="tw-text-display tw:mb-3">Welcome, Olga.</h1>
          <p class="tw:text-neutral-600 tw:text-body-m tw:leading-body-m tw:mb-0 tw:max-w-2xl tw:mx-auto">
            Your 2026/27 Sixth Form year has just opened. I've already pencilled in 3 of your 6 key moments
            from last year — applications open 14 Sep, close 15 Jan, offers out by 26 Mar, enrolment on 26 Aug.
          </p>
        </div>
        <!-- The decision — two large cards (swapped for the inline composer on "Explore first") -->
        <div id="ofr-decision" class="tw:w-full">
          <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-4 tw:w-full tw:mb-5">
            <div class="tw-card tw-card-interactive">
              <div class="tw-card-body tw:h-full tw:flex tw:flex-col tw:items-start tw:gap-3 tw:p-5">
                <span class="tw:w-10 tw:h-10 tw:rounded-lg tw:bg-primary-100 tw:text-primary tw:flex tw:items-center tw:justify-center" aria-hidden="true">
                  <i class="fa-regular fa-wand-magic-sparkles"></i>
                </span>
                <div>
                  <h2 class="tw-h4 tw:mb-1">Set up my year with Emma</h2>
                  <p class="tw:text-muted tw:text-body-s tw:leading-body-s tw:mb-0">
                    About 15 minutes, pause anytime — I'll walk you through lead capture, nurture and your key dates.
                  </p>
                </div>
                <button id="ofr-proceed-btn" class="tw-btn tw-btn-primary tw:mt-auto" type="button">
                  Set up my year <i class="fa-regular fa-arrow-right"></i>
                </button>
              </div>
            </div>
            <div class="tw-card tw-card-interactive">
              <div class="tw-card-body tw:h-full tw:flex tw:flex-col tw:items-start tw:gap-3 tw:p-5">
                <span class="tw:w-10 tw:h-10 tw:rounded-lg tw:bg-neutral-100 tw:text-neutral-600 tw:flex tw:items-center tw:justify-center" aria-hidden="true">
                  <i class="fa-regular fa-compass"></i>
                </span>
                <div>
                  <h2 class="tw-h4 tw:mb-1">I'll explore on my own first</h2>
                  <p class="tw:text-muted tw:text-body-s tw:leading-body-s tw:mb-0">
                    No problem — your year stays pencilled from last year, and your journey lives in the top bar whenever you're ready.
                  </p>
                </div>
                <button id="ofr-decline-btn" class="tw-btn tw-btn-secondary tw:mt-auto" type="button">
                  Explore first
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Inline composer — appears in place of the decision cards after "Explore first" -->
        <div id="ofr-welcome-composer" class="tw:hidden tw:w-full tw:mb-5">
          <div class="tw-card tw-card-elevated tw:rounded-2xl tw:overflow-hidden tw:cursor-text">
            <textarea id="ofr-welcome-input" class="tw-emma-input tw:w-full tw:block" rows="3"
                      placeholder="Ask Emma anything about your admissions pipeline…"
                      aria-label="Ask Emma"></textarea>
            <div class="tw:flex tw:items-center tw:gap-0 tw:p-2 tw:pt-0.5">
              <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Attach file">
                <i class="fa-regular fa-paperclip"></i>
              </button>
              <div class="tw:flex-1"></div>
              <div class="tw:flex tw:items-center tw:gap-2">
                <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Voice input">
                  <i class="fa-regular fa-microphone"></i>
                </button>
                <button id="ofr-welcome-send" class="tw-btn tw-btn-primary tw-btn-icon tw-btn-lg" type="button" aria-label="Send" disabled>
                  <i class="fa-regular fa-arrow-up"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Quiet reassurance -->
        <p class="tw:text-muted tw:text-body-xs tw:leading-body-xs tw:text-center tw:mb-10">
          <i class="fa-regular fa-shield-check tw:mr-1" aria-hidden="true"></i>
          Nothing sends without your approval. You can hand any step to a colleague.
        </p>
        <!-- Muted preview strip — the six moments at a glance -->
        <div class="tw:w-full tw:text-center">
          <p class="tw-overline tw:mb-3">
            Your six moments · 3 pencilled from last year
          </p>
          <div class="tw:flex tw:flex-wrap tw:justify-center tw:gap-2" role="list" aria-label="The six admissions moments">
            <span role="listitem" class="tw-tag tw-tag-pill tw-tag-outline-secondary">
              <i class="fa-regular fa-bullhorn" aria-hidden="true"></i>Lead generation
            </span>
            <span role="listitem" class="tw-tag tw-tag-pill tw-tag-outline-secondary">
              <i class="fa-regular fa-seedling" aria-hidden="true"></i>Nurture
            </span>
            <span role="listitem" class="tw-tag tw-tag-pill tw-tag-warning-subtle">
              <i class="fa-regular fa-calendar-days" aria-hidden="true"></i>Application window
              <i class="fa-regular fa-pencil fa-xs" aria-hidden="true"></i><span class="tw:sr-only">(pencilled)</span>
            </span>
            <span role="listitem" class="tw-tag tw-tag-pill tw-tag-outline-secondary">
              <i class="fa-regular fa-comments" aria-hidden="true"></i>Interviews
            </span>
            <span role="listitem" class="tw-tag tw-tag-pill tw-tag-warning-subtle">
              <i class="fa-regular fa-envelope-open-text" aria-hidden="true"></i>Offers
              <i class="fa-regular fa-pencil fa-xs" aria-hidden="true"></i><span class="tw:sr-only">(pencilled)</span>
            </span>
            <span role="listitem" class="tw-tag tw-tag-pill tw-tag-warning-subtle">
              <i class="fa-regular fa-clipboard-check" aria-hidden="true"></i>Enrolment
              <i class="fa-regular fa-pencil fa-xs" aria-hidden="true"></i><span class="tw:sr-only">(pencilled)</span>
            </span>
          </div>
        </div>
      </div>
    </section>
    <section id="ofr-quiet" class="tw:hidden" aria-label="Emma home">
      <div class="tw:w-full tw:max-w-3xl tw:mx-auto tw:px-4 tw:pt-12 tw:pb-16 tw:flex tw:flex-col tw:items-center">
        <div class="tw:text-center tw:mb-8">
          <div class="tw-avatar tw-avatar-primary tw-avatar-xl tw:mx-auto tw:mb-5" role="img" aria-label="Emma, Online">
            <span>E</span>
            <span class="tw-avatar-status tw-avatar-status-online"><span class="tw:sr-only">Online</span></span>
          </div>
          <h1 class="tw-text-display tw:mb-2">Good morning, Olga.</h1>
          <p class="tw:text-muted tw:text-body-m tw:leading-body-m tw:mb-0">
            No rush — your 2026/27 year stays pencilled from last year. Ask me anything, or just look around.
          </p>
        </div>
        <!-- Standard Emma composer — real: typing enables send, send opens the chat -->
        <div class="tw:w-full tw:mb-5">
          <div class="tw-card tw-card-elevated tw:rounded-2xl tw:overflow-hidden tw:cursor-text">
            <textarea id="ofr-home-input" class="tw-emma-input tw:w-full tw:block" rows="3"
                      placeholder="Ask Emma anything about your admissions pipeline…"
                      aria-label="Ask Emma"></textarea>
            <div class="tw:flex tw:items-center tw:gap-0 tw:p-2 tw:pt-0.5">
              <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Attach file">
                <i class="fa-regular fa-paperclip"></i>
              </button>
              <div class="tw:flex-1"></div>
              <div class="tw:flex tw:items-center tw:gap-2">
                <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Voice input">
                  <i class="fa-regular fa-microphone"></i>
                </button>
                <button id="ofr-home-send" class="tw-btn tw-btn-primary tw-btn-icon tw-btn-lg" type="button" aria-label="Send" disabled>
                  <i class="fa-regular fa-arrow-up"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <p class="tw:text-muted tw:text-body-xs tw:leading-body-xs tw:text-center tw:mb-0">
          <i class="fa-regular fa-route tw:mr-1" aria-hidden="true"></i>
          Your journey lives in the top bar — the <i class="fa-regular fa-route" aria-hidden="true"></i><span class="tw:sr-only">journey</span> icon picks up right where we left off.
        </p>
      </div>
    </section>
    <div id="ofr-chat-view" class="tw:hidden tw:flex tw:h-full tw:w-full tw:items-stretch">
      <!-- Left column: header + thread + composer -->
      <div class="tw-agent-main-content tw:relative tw:flex-1 tw:min-w-0">
        <!-- Content header -->
        <div id="ofr-content-header"
             class="tw:w-full tw:bg-white tw:border-b tw:border-neutral-translucent-200 tw:px-5 tw:pr-3 tw:overflow-hidden tw:h-14 tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
          <h1 id="ofr-chat-title" class="tw-h3 tw:mb-0 tw:min-w-0 tw:truncate">Setting up your year</h1>
          <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Rename this chat"
                  data-controller="tooltip" data-tooltip-content-value="Rename this chat">
            <i class="fa-regular fa-pen-to-square"></i>
          </button>
          <div class="tw:flex-1"></div>
          <!-- Expanding search -->
          <div class="tw-input-group tw-input-group-sm tw-has-icon-start tw:w-auto">
            <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
            <input type="search"
                   class="tw-form-control tw:w-[360px] tw:max-w-[24px] tw:focus:max-w-[360px] tw:opacity-0 tw:focus:opacity-100 tw:cursor-pointer tw:focus:cursor-text"
                   placeholder="Search in this chat..."
                   aria-label="Search in this chat">
          </div>
          <button id="ofr-new-chat-btn" class="tw-btn tw-btn-tertiary tw-btn-sm tw:whitespace-nowrap" type="button">
            <i class="fa-regular fa-plus"></i> New chat
          </button>
          <button id="ofr-sidebar-toggle" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button"
                  aria-label="Hide sidebar" data-controller="tooltip" data-tooltip-content-value="Toggle sidebar">
            <i class="fa-regular fa-sidebar-flip"></i>
          </button>
        </div>
        <!-- Scrollable conversation body -->
        <div id="ofr-conversation-body" class="tw:w-full tw:flex tw:flex-col tw:flex-1 tw:overflow-y-auto tw:bg-white tw:min-h-0">
          <div class="tw:pt-6 tw:pb-4 tw:max-w-4xl tw:mx-auto tw:px-4 tw:w-full" role="log" aria-label="Conversation with Emma" aria-live="polite">
            <div id="ofr-thread" class="tw-agent-chat-thread">
              <!-- Conversation beats injected by the script below -->
            </div>
          </div>
        </div>
        <!-- Composer — in flow (not floating) so no dynamic padding is needed -->
        <div class="tw:w-full tw:max-w-4xl tw:mx-auto tw:px-4 tw:pb-4 tw:pt-2 tw:flex-shrink-0">
          <div id="ofr-composer-card" class="tw-card tw-card-elevated tw:rounded-2xl tw:overflow-hidden tw:w-full tw:cursor-text tw:bg-white">
            <!-- Pinned chips row — the scripted decision options render here -->
            <div id="ofr-pinned-chips" class="tw:hidden tw:w-full tw:px-4 tw:pt-3 tw:pb-2 tw:border-b tw:border-neutral-translucent-200"
                 role="group" aria-label="Suggested replies" aria-live="polite">
              <p id="ofr-pinned-label" class="tw:text-neutral-900 tw:font-medium tw:text-body-m tw:leading-body-m tw:w-full tw:mb-1.5"></p>
              <div id="ofr-pinned-list" class="tw:flex tw:flex-wrap tw:gap-1.5"></div>
            </div>
            <!-- Input row -->
            <div class="tw:flex tw:items-center tw-emma-input-container">
              <textarea id="ofr-chat-input" class="tw-emma-input" rows="1"
                        placeholder="Ask me anything about admissions..."
                        aria-label="Ask Emma"></textarea>
            </div>
            <!-- Toolbar row -->
            <div class="tw:flex tw:items-center tw:gap-0 tw:p-2 tw:pt-0.5">
              <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Attach file"
                      data-controller="tooltip" data-tooltip-content-value="Attach file" data-tooltip-placement-value="top">
                <i class="fa-regular tw-icon-16 fa-paperclip"></i>
              </button>
              <div class="tw:ml-auto tw:flex tw:items-center tw:gap-1">
                <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Voice mode"
                        data-controller="tooltip" data-tooltip-content-value="Voice mode" data-tooltip-placement-value="top">
                  <i class="fa-regular tw-icon-16 fa-microphone"></i>
                </button>
                <button id="ofr-chat-send" class="tw-btn tw-btn-primary tw-btn-icon tw-btn-lg" type="button"
                        aria-label="Send"
                        data-controller="tooltip" data-tooltip-content-value="Send" data-tooltip-placement-value="top"
                        disabled>
                  <i class="fa-regular tw-icon-16 fa-arrow-up"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Right column: Overview (journey tracker + recent activity) & History -->
      <div id="ofr-activity-sidebar" class="tw-agent-activity-sidebar tw:flex tw:flex-col">
        <!-- Strip (visible when collapsed — 48px) -->
        <div class="ofr-strip" id="ofr-strip" aria-hidden="true">
          <button id="ofr-strip-overview" class="tw-btn tw-btn-tertiary tw-btn-tertiary-neutral tw-btn-icon tw-btn-sm" type="button"
                  aria-label="Open journey overview"
                  data-controller="tooltip" data-tooltip-content-value="Journey overview" data-tooltip-placement-value="left">
            <i class="fa-regular fa-route"></i>
          </button>
          <button id="ofr-strip-history" class="tw-btn tw-btn-tertiary tw-btn-tertiary-neutral tw-btn-icon tw-btn-sm" type="button"
                  aria-label="Open chat history"
                  data-controller="tooltip" data-tooltip-content-value="Chat history" data-tooltip-placement-value="left">
            <i class="fa-regular fa-clock-rotate-left"></i>
          </button>
        </div>
        <!-- Full content (hidden behind the strip when collapsed) -->
        <div data-controller="tabs" class="tw-agent-activity-sidebar-content tw:flex-1 tw:overflow-y-auto">
          <!-- Tab headers — tw:h-14 matches the content header height -->
          <div class="tw-tabs tw-tabs-justified tw-tabs-no-gap tw:h-14 tw:flex-shrink-0 tw:bg-neutral-100 tw:border-b tw:border-neutral-translucent-200" role="tablist" aria-label="Sidebar sections">
            <button class="tw-tab tw-active" role="tab" data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown">
              <div class="tw:py-1">Overview</div>
            </button>
            <button class="tw-tab" role="tab" data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown">
              <div class="tw:py-1">History</div>
            </button>
          </div>
          <div class="tw-tab-content tw:mt-0">
            <!-- Tab 1: Overview — journey tracker (v4-style rows) + recent activity -->
            <div class="tw-tab-panel tw-active" role="tabpanel" data-tabs-target="panel">
              <div class="tw:px-4 tw:pt-3 tw:pb-4 tw:mb-2 tw:border-b tw:border-neutral-translucent-200">
                <!-- Rail header -->
                <div class="tw:flex tw:items-center tw:gap-3 tw:mb-2">
                  <div class="tw-avatar tw-avatar-primary tw-avatar-sm" role="img" aria-label="Emma"><span>E</span></div>
                  <div class="tw:min-w-0">
                    <p class="tw:text-body-m tw:leading-body-m tw:font-bold tw:text-neutral-900 tw:mb-0">Your year with Emma</p>
                    <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0" data-ofr-count-text>3 of 6 moments set</p>
                  </div>
                </div>
                <div data-ofr-progressbar class="tw-progress tw:mb-3" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Journey progress">
                  <div data-ofr-progress class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:50%]"></div>
                </div>
                <!-- Moments — statuses update live as beats complete -->
                <div class="tw:flex tw:flex-col tw:gap-1" role="list" aria-label="Journey moments">
                  <div role="listitem" data-ofr-moment-row="leadgen" class="tw:flex tw:items-start tw:gap-2.5 tw:py-2 tw:px-3 tw:rounded-xl tw:transition-colors">
                    <i data-ofr-moment-icon="leadgen" class="fa-regular fa-circle-dot tw:text-primary tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                    <div class="tw:flex-1 tw:min-w-0">
                      <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">Lead generation</p>
                      <p data-ofr-moment-sub="leadgen" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Where new enquiries come from</p>
                    </div>
                    <span data-ofr-moment-tag="leadgen" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-primary-subtle">Up next</span>
                  </div>
                  <div role="listitem" data-ofr-moment-row="nurture" class="tw:flex tw:items-start tw:gap-2.5 tw:py-2 tw:px-3 tw:rounded-xl tw:transition-colors">
                    <i data-ofr-moment-icon="nurture" class="fa-regular fa-circle tw:text-neutral-300 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                    <div class="tw:flex-1 tw:min-w-0">
                      <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">Nurture</p>
                      <p data-ofr-moment-sub="nurture" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Keep leads warm until they apply</p>
                    </div>
                    <span data-ofr-moment-tag="nurture" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-secondary-soft">Not started</span>
                  </div>
                  <div role="listitem" data-ofr-moment-row="appwindow" class="tw:flex tw:items-start tw:gap-2.5 tw:py-2 tw:px-3 tw:rounded-xl tw:transition-colors">
                    <i data-ofr-moment-icon="appwindow" class="fa-regular fa-pencil tw:text-orange-500 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                    <div class="tw:flex-1 tw:min-w-0">
                      <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">Application window</p>
                      <p data-ofr-moment-sub="appwindow" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Open 14 Sep 2026 · close 15 Jan 2027</p>
                    </div>
                    <span data-ofr-moment-tag="appwindow" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-warning-subtle tw:border-dashed">Pencilled</span>
                  </div>
                  <div role="listitem" data-ofr-moment-row="interviews" class="tw:flex tw:items-start tw:gap-2.5 tw:py-2 tw:px-3 tw:rounded-xl tw:transition-colors">
                    <i data-ofr-moment-icon="interviews" class="fa-regular fa-circle tw:text-neutral-300 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                    <div class="tw:flex-1 tw:min-w-0">
                      <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">Interviews</p>
                      <p data-ofr-moment-sub="interviews" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Feb – Mar · optional</p>
                    </div>
                    <span data-ofr-moment-tag="interviews" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-secondary-soft">Not started</span>
                  </div>
                  <div role="listitem" data-ofr-moment-row="offers" class="tw:flex tw:items-start tw:gap-2.5 tw:py-2 tw:px-3 tw:rounded-xl tw:transition-colors">
                    <i data-ofr-moment-icon="offers" class="fa-regular fa-pencil tw:text-orange-500 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                    <div class="tw:flex-1 tw:min-w-0">
                      <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">Offers</p>
                      <p data-ofr-moment-sub="offers" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Reply by 26 Mar 2027</p>
                    </div>
                    <span data-ofr-moment-tag="offers" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-warning-subtle tw:border-dashed">Pencilled</span>
                  </div>
                  <div role="listitem" data-ofr-moment-row="enrolment" class="tw:flex tw:items-start tw:gap-2.5 tw:py-2 tw:px-3 tw:rounded-xl tw:transition-colors">
                    <i data-ofr-moment-icon="enrolment" class="fa-regular fa-pencil tw:text-orange-500 tw:w-4 tw:text-center tw:mt-0.5" aria-hidden="true"></i>
                    <div class="tw:flex-1 tw:min-w-0">
                      <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">Enrolment</p>
                      <p data-ofr-moment-sub="enrolment" class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">26 Aug 2027 · optional</p>
                    </div>
                    <span data-ofr-moment-tag="enrolment" class="tw-tag tw-tag-sm tw:shrink-0 tw-tag-warning-subtle tw:border-dashed">Pencilled</span>
                  </div>
                </div>
              </div>
              <!-- Recent activity — items appear live as beats complete -->
              <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-2 tw:mt-2 tw:px-4">
                <p class="tw-card-title tw:mb-0">Recent activity</p>
              </div>
              <div class="tw:px-4 tw:pb-4 tw:space-y-0" id="ofr-activity-feed">
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <span class="tw:text-body-xs tw:text-neutral-700 tw:capitalize">
                      <i class="fa-regular fa-bolt tw:text-neutral-700 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:text-[11px]" aria-hidden="true"></i>auto
                    </span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-600 tw:whitespace-nowrap tw:shrink-0">today</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">3 moments pencilled from last year</p>
                  <p class="tw-agent-timeline-item-desc">Application window · Offers · Enrolment — copied from 2025/26</p>
                </div>
              </div>
            </div>
            <!-- Tab 2: History — a single chat -->
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw:p-3">
                <div class="tw-overline tw:pb-1.5">Today</div>
                <button class="tw-chat-history-item tw-chat-history-active tw:w-full tw:text-left" type="button">
                  <span class="tw:block tw:text-body-xs tw:font-medium tw:text-neutral-700 tw:truncate">Setting up your year</span>
                  <span class="tw:block tw:text-body-xs tw:text-muted">Today · 9:02 am</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /CHAT VIEW -->
  </main>
</div>
<script>
  // ═══════════════════════════════════════════════════════════════════
  // Agent-led onboarding (fresh user) — engine adapted from the sibling
  // onboarding.html.erb. One continuous scripted thread; state changes
  // fan out to topbar badge, journey popover and sidebar tracker together.
  // ═══════════════════════════════════════════════════════════════════
  const byId = (id) => document.getElementById(id);
  const wait = (ms) => new Promise((r) => setTimeout(r, ms));
  // ── Live moment state — the single source of truth ──────────────────
  // Statuses: next | todo | pencilled | live | armed | confirmed
  const MOMENT_STATE = {
    leadgen: 'next',
    nurture: 'todo',
    appwindow: 'pencilled',
    interviews: 'todo',
    offers: 'pencilled',
    enrolment: 'pencilled',
  };
  const SET_STATUSES = ['pencilled', 'live', 'armed', 'confirmed'];
  const STATUS_META = {
    next: {
      icon: 'fa-regular fa-circle-dot tw:text-primary tw:w-4 tw:text-center tw:mt-0.5',
      tag: 'tw-tag tw-tag-sm tw:shrink-0 tw-tag-primary-subtle', label: 'Up next',
    },
    todo: {
      icon: 'fa-regular fa-circle tw:text-neutral-300 tw:w-4 tw:text-center tw:mt-0.5',
      tag: 'tw-tag tw-tag-sm tw:shrink-0 tw-tag-secondary-soft', label: 'Not started',
    },
    pencilled: {
      icon: 'fa-regular fa-pencil tw:text-orange-500 tw:w-4 tw:text-center tw:mt-0.5',
      tag: 'tw-tag tw-tag-sm tw:shrink-0 tw-tag-warning-subtle tw:border-dashed', label: 'Pencilled',
    },
    live: {
      icon: 'fa-solid fa-circle-check tw:text-success tw:w-4 tw:text-center tw:mt-0.5',
      tag: 'tw-tag tw-tag-sm tw:shrink-0 tw-tag-success-subtle', label: 'Live',
    },
    armed: {
      icon: 'fa-solid fa-shield-check tw:text-success tw:w-4 tw:text-center tw:mt-0.5',
      tag: 'tw-tag tw-tag-sm tw:shrink-0 tw-tag-success-subtle', label: 'Armed',
    },
    confirmed: {
      icon: 'fa-solid fa-circle-check tw:text-success tw:w-4 tw:text-center tw:mt-0.5',
      tag: 'tw-tag tw-tag-sm tw:shrink-0 tw-tag-success-subtle', label: 'Confirmed',
    },
  };
  const PROGRESS_BY_COUNT = {
    3: 'tw-progress-bar tw-progress-bar-primary tw:[--progress-value:50%]',
    4: 'tw-progress-bar tw-progress-bar-primary tw:[--progress-value:67%]',
    5: 'tw-progress-bar tw-progress-bar-primary tw:[--progress-value:83%]',
    6: 'tw-progress-bar tw-progress-bar-primary tw:[--progress-value:100%]',
  };
  const PERCENT_BY_COUNT = { 3: 50, 4: 67, 5: 83, 6: 100 };
  // ── applyState — updates ALL surfaces together (topbar badge, popover,
  //    sidebar tracker) so they never drift apart ────────────────────────
  function applyState(change) {
    if (change.moment) {
      MOMENT_STATE[change.moment] = change.status;
      const meta = STATUS_META[change.status];
      document.querySelectorAll(`[data-ofr-moment-icon="${change.moment}"]`).forEach((el) => { el.className = meta.icon; });
      document.querySelectorAll(`[data-ofr-moment-tag="${change.moment}"]`).forEach((el) => {
        el.className = meta.tag;
        el.textContent = meta.label;
      });
      if (change.sub) {
        document.querySelectorAll(`[data-ofr-moment-sub="${change.moment}"]`).forEach((el) => { el.textContent = change.sub; });
      }
      // Mini year-map echo in the popover
      if (['live', 'armed', 'confirmed'].includes(change.status)) {
        document.querySelectorAll(`[data-ofr-map="${change.moment}"]`).forEach((el) => {
          el.classList.remove('tw:bg-neutral-200', 'tw:bg-orange-300');
          el.classList.add('tw:bg-success');
        });
      }
    }
    // Counts → badge, count texts, progress bars, aria labels
    const count = Object.values(MOMENT_STATE).filter((s) => SET_STATUSES.includes(s)).length;
    byId('ofr-journey-badge').textContent = count + '/6';
    byId('ofr-journey-btn').setAttribute('aria-label', `Your admissions journey — ${count} of 6 moments set`);
    document.querySelectorAll('[data-ofr-count-text]').forEach((el) => { el.textContent = `${count} of 6 moments set`; });
    document.querySelectorAll('[data-ofr-progress]').forEach((el) => { el.className = PROGRESS_BY_COUNT[count] || PROGRESS_BY_COUNT[6]; });
    document.querySelectorAll('[data-ofr-progressbar]').forEach((el) => { el.setAttribute('aria-valuenow', String(PERCENT_BY_COUNT[count] || 100)); });
    if (change.note) {
      document.querySelectorAll('[data-ofr-note]').forEach((el) => { el.textContent = change.note; });
    }
    // Active-moment tint on the sidebar tracker rows
    if ('active' in change) {
      document.querySelectorAll('[data-ofr-moment-row]').forEach((row) => {
        const isActive = row.getAttribute('data-ofr-moment-row') === change.active;
        row.classList.toggle('tw:bg-blue-100/70', isActive);
        if (isActive) { row.setAttribute('aria-current', 'true'); } else { row.removeAttribute('aria-current'); }
      });
    }
  }
  // ── Recent activity feed (sidebar Overview tab) ─────────────────────
  function addActivityItem(title, desc) {
    const feed = byId('ofr-activity-feed');
    if (!feed) return;
    const el = document.createElement('div');
    el.className = 'tw-agent-timeline-item ofr-aitem-new';
    el.innerHTML = '<div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">'
      + '<span class="tw:text-body-xs tw:text-neutral-700 tw:capitalize">'
      + '<i class="fa-regular fa-circle-check tw:text-neutral-700 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:text-[11px]" aria-hidden="true"></i>done'
      + '</span>'
      + '<div class="tw:flex-1"></div>'
      + '<span class="tw:text-body-xs tw:text-neutral-600 tw:whitespace-nowrap tw:shrink-0">just now</span>'
      + '</div>'
      + '<p class="tw-agent-timeline-item-title">' + title + '</p>'
      + (desc ? '<p class="tw-agent-timeline-item-desc">' + desc + '</p>' : '');
    feed.prepend(el);
    setTimeout(() => { el.classList.remove('ofr-aitem-new'); }, 3000);
  }
  // ── Chat thread primitives (ported from the sibling) ────────────────
  let gen = 0;           // generation counter — invalidates in-flight scripts
  let journeyStarted = false;
  function scrollToBottom() {
    const body = byId('ofr-conversation-body');
    requestAnimationFrame(() => { body.scrollTop = body.scrollHeight; });
  }
  function addUserMessage(text, opts) {
    if (!text) return;
    const safe = text.replace(/</g, '<').replace(/>/g, '>');
    const div = document.createElement('div');
    div.className = 'tw-agent-chat-msg tw-agent-chat-msg-user';
    const bubbleClass = 'tw-agent-chat-bubble-user' + (opts && opts.selected ? ' tw-agent-chat-bubble-selected' : '');
    div.innerHTML = `<div class="${bubbleClass}">${safe}</div>`;
    byId('ofr-thread').appendChild(div);
    scrollToBottom();
  }
  function buildThinkingElement(value) {
    const el = document.createElement('div');
    el.className = 'tw-agent-chat-msg';
    el.innerHTML = `
      <div class="tw-agent-chat-status">
        <svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <circle cx="28" cy="28" r="6" fill="currentColor" class="tw:text-primary"/>
          <ellipse cx="28" cy="28" rx="27" ry="16" fill="none" stroke="currentColor" class="tw-agent-nucleus-ring tw:text-primary"/>
          <ellipse cx="28" cy="28" rx="27" ry="16" transform="rotate(-60 28 28)" fill="none" stroke="currentColor" class="tw-agent-nucleus-ring tw:text-primary"/>
          <ellipse cx="28" cy="28" rx="27" ry="16" transform="rotate(-150 28 28)" fill="none" stroke="currentColor" class="tw-agent-nucleus-ring tw:text-primary"/>
        </svg>
        <div class="tw-agent-chat-status-label">${value}</div>
      </div>
    `;
    return el;
  }
  function buildStatusBadge(text) {
    const badge = document.createElement('span');
    badge.className = 'tw-badge tw-badge-outline-secondary tw:mb-1.5 tw:inline-block';
    badge.innerHTML = '✓ ' + text;
    return badge;
  }
  // Copy is the DS Clipboard pattern. `sourceEl` is the element holding the
  // answer the button copies — it gets an id so the bar can point at it with
  // `data-clipboard-source-value`, which keeps the copied text identical to
  // what is on screen even though it streams in after this bar is built.
  let _copySourceSeq = 0;
  function buildFeedbackButtons(sourceEl) {
    const div = document.createElement('div');
    div.className = 'tw-agent-chat-feedback';
    let copyAction = '';
    if (sourceEl) {
      if (!sourceEl.id) sourceEl.id = `emma-answer-${++_copySourceSeq}`;
      div.setAttribute('data-controller', 'clipboard');
      div.setAttribute('data-clipboard-source-value', `#${sourceEl.id}`);
      copyAction = 'data-action="click->clipboard#copySource"';
    }
    div.innerHTML = `
      <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Copy Emma's response" ${copyAction}
        data-controller="tooltip" data-tooltip-content-value="Copy"><i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i></button>
      <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Good response"
        data-controller="tooltip" data-tooltip-content-value="Good response"><i class="fa-regular fa-thumbs-up"></i></button>
      <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Bad response"
        data-controller="tooltip" data-tooltip-content-value="Bad response"><i class="fa-regular fa-thumbs-down"></i></button>
      <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
    `;
    return div;
  }
  async function streamTokens(element, text, durationSec, g) {
    const words = text.split(' ');
    const intervalMs = Math.max(20, (durationSec * 1000) / words.length);
    element.textContent = '';
    for (let i = 0; i < words.length; i++) {
      if (g !== gen) return;
      element.textContent += (i > 0 ? ' ' : '') + words[i];
      if (i < words.length - 1) await wait(intervalMs);
    }
  }
  function appendHtml(html, withFeedback) {
    const wrapper = document.createElement('div');
    wrapper.className = 'tw-agent-chat-msg';
    const bubble = document.createElement('div');
    bubble.className = 'tw-agent-chat-bubble';
    bubble.innerHTML = html;
    wrapper.appendChild(bubble);
    if (withFeedback !== false) wrapper.appendChild(buildFeedbackButtons(bubble));
    byId('ofr-thread').appendChild(wrapper);
    scrollToBottom();
  }
  // ── Options — chips pinned inside the composer card ─────────────────
  function showChips(label, options, g) {
    return new Promise((resolve) => {
      if (g !== gen) { resolve(''); return; }
      const wrap = byId('ofr-pinned-chips');
      const list = byId('ofr-pinned-list');
      const input = byId('ofr-chat-input');
      byId('ofr-pinned-label').textContent = label;
      list.innerHTML = '';
      function resolveChoice(text) {
        if (g !== gen) return;
        clearChips();
        resolve(text);
      }
      options.forEach((text, i) => {
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive';
        btn.textContent = (i + 1) + '. ' + text;
        btn.addEventListener('click', () => resolveChoice(text));
        list.appendChild(btn);
      });
      byId('ofr-composer-card')._chipsResolve = resolveChoice;
      input.placeholder = 'or just tell me what you’d prefer';
      wrap.classList.remove('tw:hidden');
      scrollToBottom();
    });
  }
  function clearChips() {
    const wrap = byId('ofr-pinned-chips');
    wrap.classList.add('tw:hidden');
    byId('ofr-pinned-list').innerHTML = '';
    byId('ofr-pinned-label').textContent = '';
    byId('ofr-chat-input').placeholder = 'Ask me anything about admissions...';
    byId('ofr-composer-card')._chipsResolve = null;
  }
  // ── Item runner — plays a beats array in order ──────────────────────
  // Item types: thinking · status · msg (streamed) · html · options · call
  async function runItems(items, g) {
    for (const item of items) {
      if (g !== gen) return;
      if (item.type === 'thinking') {
        const el = buildThinkingElement(item.value || 'Thinking…');
        byId('ofr-thread').appendChild(el);
        scrollToBottom();
        await wait((item.delay || 1.5) * 1000);
        if (g !== gen) return;
        el.classList.add('ofr-thinking-exiting');
        await wait(150);
        if (g === gen) el.remove();
      } else if (item.type === 'status') {
        const wrapper = document.createElement('div');
        wrapper.className = 'tw-agent-chat-msg';
        wrapper.appendChild(buildStatusBadge(item.value));
        byId('ofr-thread').appendChild(wrapper);
        scrollToBottom();
      } else if (item.type === 'msg') {
        const wrapper = document.createElement('div');
        wrapper.className = 'tw-agent-chat-msg';
        const bubble = document.createElement('div');
        bubble.className = 'tw-agent-chat-bubble';
        const p = document.createElement('p');
        bubble.appendChild(p);
        wrapper.appendChild(bubble);
        byId('ofr-thread').appendChild(wrapper);
        scrollToBottom();
        await streamTokens(p, item.value, item.duration || 1, g);
        if (g !== gen) return;
        if (item.feedback !== false) wrapper.appendChild(buildFeedbackButtons(bubble));
        scrollToBottom();
        if (item.delay) await wait(item.delay * 1000);
      } else if (item.type === 'html') {
        appendHtml(item.value, item.feedback);
        if (item.delay) await wait(item.delay * 1000);
      } else if (item.type === 'call') {
        await item.fn(g);
      } else if (item.type === 'options') {
        const selected = await showChips(item.label, item.value, g);
        if (g !== gen) return;
        addUserMessage(selected, { selected: true });
        let reply = item.replies && item.replies[selected];
        if (!reply) {
          // Free-typed answer — acknowledge, then keep the journey moving
          reply = item.fallback || [
            { type: 'thinking', value: 'Thinking…', delay: 1.2 },
            { type: 'msg', value: 'Noted — I’ve made a note of that and we can come back to it any time. Let’s keep going.' },
          ];
        }
        await runItems(reply, g);
      }
    }
  }
  // ═══ The scripted onboarding conversation — one continuous thread ═══
  // Beats: 1 opener (scenario 30) · 2 lead generation (31/C2) · 3 nurture (35/C3)
  //        4 application window (32/C4) · 5 wrap. Content adapted from the
  //        sibling's approved SCENARIOS map (Antony's v4 copy).
  const FLAGS = { facebook: false };
  function questionsCard(prefix) {
    return (prefix || '') + `<p>Before I create anything, here are the questions I’d put on your enquiry forms. The first three are required so I can follow up. Untick anything you don’t want, or add your own — the set stays editable afterwards.</p>
  <div class="tw-list-group tw-list-group-sm tw:mb-3">
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-solid fa-square-check tw:text-neutral-400" aria-hidden="true"></i><span class="tw-list-group-item-content tw:text-sm">First name · Last name · Email</span><div class="tw-list-group-item-actions"><span class="tw-badge tw-badge-secondary-subtle tw-badge-xs">Required</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-solid fa-square-check tw:text-primary" aria-hidden="true"></i><span class="tw-list-group-item-content tw:text-sm">Mobile number</span><div class="tw-list-group-item-actions"><span class="tw:text-body-xs tw:text-muted">on</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-solid fa-square-check tw:text-primary" aria-hidden="true"></i><span class="tw-list-group-item-content tw:text-sm">Current school</span><div class="tw-list-group-item-actions"><span class="tw:text-body-xs tw:text-muted">on</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-solid fa-square-check tw:text-primary" aria-hidden="true"></i><span class="tw-list-group-item-content tw:text-sm">Subjects interested in</span><div class="tw-list-group-item-actions"><span class="tw:text-body-xs tw:text-muted">on</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-square tw:text-neutral-400" aria-hidden="true"></i><span class="tw-list-group-item-content tw:text-sm tw:text-muted">Date of birth</span><div class="tw-list-group-item-actions"><span class="tw:text-body-xs tw:text-neutral-400">off</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-solid fa-square-check tw:text-neutral-400" aria-hidden="true"></i><span class="tw-list-group-item-content tw:text-sm">How did you hear about us?</span><div class="tw-list-group-item-actions"><span class="tw:text-body-xs tw:text-muted">auto-filled from the channel</span></div></div>
  </div>
  <p class="tw:text-neutral-700">No form is created before you’ve confirmed this set.</p>`;
  }
  function formChannelRow(icon, name, campaign) {
    // The share link this row copies. Same host as the persona's school
    // (Westfield Academy), source-tagged per channel — the tag is what makes
    // the enquiry attributable, which is the point of the row.
    const shareLink = 'https://apply.westfieldacademy.co.uk/enquiry?src='
      + name.toLowerCase().replace(/&/g, '').replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
    return `<div class="tw-list-group-item">
  <i class="${icon} tw-list-group-item-media tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i>
  <div class="tw-list-group-item-content">
    <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">${name}</p>
    <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0 tw:truncate">Campaign: “${campaign}”</p>
  </div>
  <div class="tw-list-group-item-actions">
    <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Edit campaign name for ${name}" data-controller="tooltip" data-tooltip-content-value="Edit campaign name"><i class="fa-regular fa-pen-to-square"></i></button>
    <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Show QR code for ${name}" data-controller="tooltip" data-tooltip-content-value="Show QR code"><i class="fa-regular fa-qrcode"></i></button>
    <span data-controller="clipboard">
      <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Copy share link for ${name}" data-action="click->clipboard#copy" data-clipboard-value-param="${shareLink}" data-controller="tooltip" data-tooltip-content-value="Copy share link"><i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i></button>
      <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
    </span>
  </div>
  </div>`;
  }
  function progressCard(fb) {
    const step = (text, result) => `<div class="tw-chat-progress-step"><div class="tw-chat-progress-dot-done">✓</div><span class="tw-chat-progress-text">${text}</span><span class="tw-chat-progress-result">${result}</span></div>`;
    return `<div class="tw-chat-progress tw:mb-3">`
      + step('Website enquiry form', 'Created · source-tagged')
      + step('Open evenings & events', 'Created · reuses event registration + QR')
      + step('Feeder-school visits', 'Created · source-tagged')
      + (fb ? step('Facebook ads', 'Created · source-tagged') : '')
      + `</div>`;
  }
  function formsSuccessCard(fb) {
    const n = fb ? 4 : 3;
    return `<div class="tw:bg-white tw:border tw:border-green-300 tw:border-l-4 tw:rounded-lg tw:p-3 tw:mb-3">
  <p class="tw:font-semibold tw:text-sm tw:mb-1"><i class="fa-solid fa-circle-check tw:text-success tw:me-1.5" aria-hidden="true"></i>${n} source-tagged enquiry forms created</p>
  <div class="tw-list-group tw-list-group-flush">`
      + formChannelRow('fa-regular fa-globe', 'Website enquiry form', 'Website · 2026/27 Sixth Form intake')
      + formChannelRow('fa-regular fa-calendar-star', 'Open evenings & events', 'Open evenings · 2026/27 Sixth Form intake')
      + formChannelRow('fa-regular fa-school', 'Feeder-school visits', 'Feeder schools · 2026/27 Sixth Form intake')
      + (fb ? formChannelRow('fa-brands fa-facebook', 'Facebook ads', 'Facebook · 2026/27 Sixth Form intake') : '')
      + `</div>
  <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-2 tw:mb-0">Preview each form exactly as a family will see it. Every lead lands in your CRM stamped with channel, campaign and date — and if a channel goes a fortnight with zero leads, I’ll flag it in case a link is broken.</p>
  </div>`;
  }
  const JOURNEY = [
    // ── Beat 1 · Opener — the year overview (adapted from scenario 30) ──
    { type: 'thinking', value: 'Looking at your year…', delay: 1.5 },
    { type: 'status', value: 'Thought for 3s' },
    { type: 'html', value: `<p>Welcome aboard, Olga — here’s your 2026/27 Sixth Form year as I see it. I’ve pencilled <strong>applications, offers and enrolment</strong> from your 2025/26 rhythm, and both hero plays are armed against those dates — so you’re protected from day one.</p>
  <div class="tw-list-group tw:mb-3">
  <div class="tw:px-3 tw:py-2"><p class="tw-overline tw:mb-0">Your admissions year</p></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-bullhorn tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Lead generation</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">where new enquiries come from</span><span class="tw-tag tw-tag-sm tw-tag-primary-subtle tw:shrink-0">Up next</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-seedling tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Nurture</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">keep leads warm until they apply</span><span class="tw-tag tw-tag-sm tw-tag-secondary-soft tw:shrink-0">Not started</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-calendar-days tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Application window</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">14 Sep 2026 → 15 Jan 2027</span><span class="tw-tag tw-tag-sm tw-tag-warning-subtle tw:border-dashed tw:shrink-0">Pencilled</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-comments tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Interviews</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">optional — decide later</span><span class="tw-tag tw-tag-sm tw-tag-secondary-soft tw:shrink-0">Not started</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-envelope-open-text tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Offers</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">reply by 26 Mar 2027</span><span class="tw-tag tw-tag-sm tw-tag-warning-subtle tw:border-dashed tw:shrink-0">Pencilled</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-clipboard-check tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Enrolment</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">26 Aug 2027</span><span class="tw-tag tw-tag-sm tw-tag-warning-subtle tw:border-dashed tw:shrink-0">Pencilled</span></div></div>
  <div class="tw:px-3 tw:py-2 tw:border-t tw:border-neutral-100"><p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0"><strong>3 of 6</strong> pencilled from last year · <strong>0</strong> confirmed</p></div>
  </div>
  <p>My suggestion: keep the pencilled dates as our working plan — confirming any of them later is one tap — and spend our time on the two things I can’t copy from last year: where your leads come from, and what keeps them warm.</p>` },
    { type: 'options', label: 'The pencilled dates?', value: ['Keep them as our working plan', 'Change a date'],
      replies: {
        'Keep them as our working plan': [
          { type: 'msg', value: 'Good — they stay pencilled as our working plan, and nothing about them is locked.' },
        ],
        'Change a date': [
          { type: 'msg', value: 'Of course — any date can be changed at any point, before or after confirming. Just tell me the new one whenever it suits, like “close applications end of February instead”. For now they stay pencilled as our working plan.' },
        ],
      } },
    { type: 'msg', value: 'First, the one moment I can’t copy from last year: lead generation — where your new enquiries come from.' },
    // ── Beat 2 · Lead generation (adapted from scenario 31 / epic C2) ──
    { type: 'thinking', value: 'Checking last year’s enquiry sources…', delay: 1.5 },
    { type: 'status', value: 'Thought for 2s' },
    { type: 'html', value: `<p>I can see where your 2025/26 leads actually came from:</p>
  <div class="tw-list-group tw:mb-3">
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-globe tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Website enquiry form</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">96 leads last year</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-calendar-star tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Open evenings & events</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">63 leads last year</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-school tw:text-primary tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Feeder-school visits</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">41 leads last year</span></div></div>
  </div>
  <p>My proposal: I recreate those three channels for 2026/27. Each gets its own source-tagged enquiry form, share link and QR code, with an editable campaign name — so every lead lands in your CRM stamped with channel, campaign and date.</p>` },
    { type: 'options', label: 'Which channels should I set up?', value: ['Use last year’s channels', 'Add Facebook ads too'],
      replies: {
        'Use last year’s channels': [
          { type: 'html', value: questionsCard() },
        ],
        'Add Facebook ads too': [
          { type: 'call', fn: () => { FLAGS.facebook = true; } },
          { type: 'html', value: questionsCard('<p>Good call — paid social converts well for similar schools. I’ll add a fourth source-tagged form with the proposed campaign name <strong>“Facebook · 2026/27 Sixth Form intake”</strong> (editable). Use its link as the ad’s call-to-action so every click lands as a tracked lead.</p>') },
        ],
      } },
    { type: 'options', label: 'Ready to create the forms?', value: ['Create the forms', 'Change the questions first'],
      replies: {
        'Create the forms': [],
        'Change the questions first': [
          { type: 'msg', value: 'Tell me what to add or untick and I’ll adjust — for v1 the forms share one question set, and it stays editable after they exist, so nothing is locked. I’ll create them with the proposed set for now and you can reshape it any time.' },
        ],
      } },
    { type: 'thinking', value: 'Creating your source-tagged forms…', delay: 2 },
    { type: 'call', fn: async (g) => {
        appendHtml(progressCard(FLAGS.facebook), false);
        await wait(900);
        if (g !== gen) return;
        appendHtml(formsSuccessCard(FLAGS.facebook));
        applyState({ moment: 'leadgen', status: 'live', active: 'nurture',
                     sub: (FLAGS.facebook ? '4' : '3') + ' source-tagged forms live', note: 'lead generation live' });
        addActivityItem((FLAGS.facebook ? '4' : '3') + ' enquiry forms created',
                        'Source-tagged · share links + QR codes · campaign names editable');
      } },
    { type: 'msg', value: 'Lead generation is live — that’s 4 of your 6 moments set. Next: what keeps those leads warm until they apply.' },
    // ── Beat 3 · Nurture (adapted from scenario 35 / epic C3) ──
    { type: 'thinking', value: 'Thinking…', delay: 1.5 },
    { type: 'status', value: 'Thought for 3s' },
    { type: 'html', value: `<p>Before we configure anything, here’s why nurture matters.</p>
  <div class="tw-list-group tw:mb-3">
  <div class="tw-list-group-item">
    <div class="tw-list-group-item-content">
      <p class="tw:font-semibold tw:text-sm tw:mb-0.5"><i class="fa-regular fa-arrow-trend-up tw:text-primary tw:me-1.5" aria-hidden="true"></i>Regular contact converts</p>
      <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Enquiries that receive consistent communication are far more likely to become applications than those left alone.</p>
    </div>
  </div>
  <div class="tw-list-group-item">
    <div class="tw-list-group-item-content">
      <p class="tw:font-semibold tw:text-sm tw:mb-0.5"><i class="fa-regular fa-moon tw:text-primary tw:me-1.5" aria-hidden="true"></i>Silence loses families</p>
      <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">A lead that hears nothing for a few weeks rarely applies unprompted. Most drop-off happens in the quiet gaps.</p>
    </div>
  </div>
  <div class="tw-list-group-item">
    <div class="tw-list-group-item-content">
      <p class="tw:font-semibold tw:text-sm tw:mb-0.5"><i class="fa-regular fa-eye tw:text-primary tw:me-1.5" aria-hidden="true"></i>I watch for staleness</p>
      <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">When an enquiry goes quiet, I automatically draft a re-engagement for your approval — no lead goes cold on your watch.</p>
    </div>
  </div>
  </div>
  <p>This step is <strong>you arming me with content</strong>: approve a proven starter sequence once, and from then on I use it to re-engage stale enquiries — drafting every batch for your approval first.</p>` },
    { type: 'html', delay: 0.4, value: `<p>Here’s the starter sequence I’d arm — four steps, each an email with an auto-generated SMS companion, every step previewable and editable before it ever sends:</p>
  <div class="tw-list-group tw-list-group-sm tw:mb-3">
  <div class="tw-list-group-item"><span class="tw-list-group-item-media tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-primary-100 tw:text-primary tw:text-body-xs tw:font-bold tw:flex tw:items-center tw:justify-center" aria-hidden="true">1</span><div class="tw-list-group-item-content"><p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">“Still thinking about Sixth Form?”</p><p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">After 2 weeks quiet · email + SMS companion</p></div></div>
  <div class="tw-list-group-item"><span class="tw-list-group-item-media tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-primary-100 tw:text-primary tw:text-body-xs tw:font-bold tw:flex tw:items-center tw:justify-center" aria-hidden="true">2</span><div class="tw-list-group-item-content"><p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">“See the place for yourself”</p><p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">+2 weeks · open-evening invite · email + SMS companion</p></div></div>
  <div class="tw-list-group-item"><span class="tw-list-group-item-media tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-primary-100 tw:text-primary tw:text-body-xs tw:font-bold tw:flex tw:items-center tw:justify-center" aria-hidden="true">3</span><div class="tw-list-group-item-content"><p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">“Subjects, results and where they lead”</p><p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">+2 weeks · email + SMS companion</p></div></div>
  <div class="tw-list-group-item"><span class="tw-list-group-item-media tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-primary-100 tw:text-primary tw:text-body-xs tw:font-bold tw:flex tw:items-center tw:justify-center" aria-hidden="true">4</span><div class="tw-list-group-item-content"><p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-0">“Applications close 15 Jan — a gentle nudge”</p><p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">+2 weeks · email + SMS companion</p></div></div>
  </div>
  <p>Cadence eases off when someone engages, and leads exit the moment they apply or opt out.</p>` },
    { type: 'options', label: 'Arm nurture?', value: ['Arm the starter sequence', 'Preview step 1 first'],
      replies: {
        'Arm the starter sequence': [],
        'Preview step 1 first': [
          { type: 'html', value: `<p>Step 1 of 4 — sent when an enquiry has been quiet for two weeks:</p>
  <div class="tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:p-3 tw:mb-3">
  <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-1">Email · subject: <strong>Still thinking about Sixth Form?</strong></p>
  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi [First name], a few weeks ago you asked about [Subjects interested in] at our Sixth Form. Applications for September 2027 are open now — and if you’d like to see the place first, our next open evening is…</p>
  <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-400 tw:mt-2 tw:mb-0">SMS companion auto-generated · every step editable before arming</p>
  </div>` },
          { type: 'options', label: 'Happy with it?', value: ['Arm the starter sequence'],
            replies: { 'Arm the starter sequence': [] } },
        ],
      } },
    { type: 'thinking', value: 'Arming the sequence…', delay: 1.2 },
    { type: 'call', fn: async (g) => {
        appendHtml(`<div class="tw:bg-white tw:border tw:border-green-300 tw:border-l-4 tw:rounded-lg tw:p-3 tw:mb-3">
  <p class="tw:font-semibold tw:text-sm tw:mb-1"><i class="fa-solid fa-shield-check tw:text-success tw:me-1.5" aria-hidden="true"></i>Nurture · Armed (idle)</p>
  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-2">The 4 templates are queued for your one-off approval in my drafts. No leads yet, so nothing sends — I’ll tell you when the first ones arrive. Every send is protected:</p>
  <ul class="tw-list-unstyled tw:mb-0">
    <li class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-1"><i class="fa-solid fa-circle-check tw:text-success tw:me-1.5" aria-hidden="true"></i>Frequency cap — max one message per family every 3 days</li>
    <li class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-1"><i class="fa-solid fa-circle-check tw:text-success tw:me-1.5" aria-hidden="true"></i>Quiet hours — nothing sends 20:00–08:00</li>
    <li class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0"><i class="fa-solid fa-circle-check tw:text-success tw:me-1.5" aria-hidden="true"></i>Leads exit the moment they apply or opt out</li>
  </ul>
  </div>`);
        applyState({ moment: 'nurture', status: 'armed', active: 'appwindow',
                     sub: '4-step sequence armed · idle until leads arrive', note: 'nurture armed' });
        addActivityItem('Nurture sequence armed', '4 steps · email + SMS · frequency cap & quiet hours on');
      } },
    { type: 'msg', value: 'That’s 5 of 6 set. Last of the big three: your application window — the dates I pencilled from last year.' },
    // ── Beat 4 · Application window (adapted from scenario 32 / epic C4) ──
    { type: 'thinking', value: 'Pulling up the pencilled window…', delay: 1.5 },
    { type: 'status', value: 'Thought for 2s' },
    { type: 'html', value: `<p>Here’s the application window as I pencilled it. Confirming takes one tap — or change anything.</p>
  <div class="tw-info-grid tw:mb-3">
  <div class="tw-info-grid-label">Applications open</div><div class="tw-info-grid-value">14 Sep 2026</div>
  <div class="tw-info-grid-label">Close date</div><div class="tw-info-grid-value">15 Jan 2027 <span class="tw:text-muted">(fixed close — or switch to a soft target)</span></div>
  <div class="tw-info-grid-label">Max chases per applicant</div><div class="tw-info-grid-value">3</div>
  <div class="tw-info-grid-label">Play</div><div class="tw-info-grid-value"><span class="tw-badge tw-badge-info-subtle"><i class="fa-regular fa-pencil tw:me-0.5" aria-hidden="true"></i>Armed (pencilled)</span></div>
  </div>
  <p>Once confirmed, I chase incomplete applications on an escalating window — first nudge about 3 weeks before close, then 1 week, then 48 hours. Applicant first, parent where held. I stop the moment they submit, and every live batch queues for your approval before anything sends.</p>` },
    { type: 'options', label: 'Confirm the application window?', value: ['Confirm — looks right', 'Change the setup'],
      replies: {
        'Confirm — looks right': [],
        'Change the setup': [
          { type: 'msg', value: 'Tell me what to change — the open date, the close mode, or the chase rules. Two close modes: a fixed close date (a real deadline I escalate towards) or a soft target (applications stay open; I work to your aspirational date). If you’d rather set no date yet, I can chase on staleness instead — any application untouched for 14 days.' },
          { type: 'options', label: 'For now:', value: ['Confirm as pencilled'],
            replies: { 'Confirm as pencilled': [] } },
        ],
      } },
    { type: 'call', fn: async (g) => {
        appendHtml(`<p>Confirmed — the chase play is now armed against real dates.</p>
  <div class="tw:bg-white tw:border tw:border-green-300 tw:border-l-4 tw:rounded-lg tw:p-3 tw:mb-3">
  <p class="tw:font-semibold tw:text-sm tw:mb-1"><i class="fa-solid fa-circle-check tw:text-success tw:me-1.5" aria-hidden="true"></i>Application window · Confirmed</p>
  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">1 chase template queued for your one-off approval in my drafts. Live batches will only appear when real incomplete applications exist — right now the year is empty, and that’s expected.</p>
  </div>`);
        applyState({ moment: 'appwindow', status: 'confirmed', active: null,
                     sub: 'Open 14 Sep 2026 · close 15 Jan 2027 · chases armed', note: '1 confirmed' });
        addActivityItem('Application window confirmed', '14 Sep 2026 – 15 Jan 2027 · 1 chase template queued for approval');
      } },
    // ── Beat 5 · Wrap ──
    { type: 'thinking', value: 'Summing up…', delay: 1.2 },
    { type: 'html', value: `<p>That’s the heart of your year set up, Olga. Here’s where everything stands:</p>
  <div class="tw-list-group tw-list-group-sm tw:mb-3">
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-solid fa-circle-check tw:text-success tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Lead generation</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">source-tagged forms collecting</span><span class="tw-tag tw-tag-sm tw-tag-success-subtle tw:shrink-0">Live</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-solid fa-shield-check tw:text-success tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Nurture</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">4-step sequence · protections on</span><span class="tw-tag tw-tag-sm tw-tag-success-subtle tw:shrink-0">Armed</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-solid fa-circle-check tw:text-success tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Application window</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">14 Sep → 15 Jan · chase play armed</span><span class="tw-tag tw-tag-sm tw-tag-success-subtle tw:shrink-0">Confirmed</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-circle tw:text-neutral-300 tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Interviews</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">optional — decide later</span><span class="tw-tag tw-tag-sm tw-tag-secondary-soft tw:shrink-0">Not started</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-pencil tw:text-orange-500 tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Offers</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">reply by 26 Mar 2027</span><span class="tw-tag tw-tag-sm tw-tag-warning-subtle tw:border-dashed tw:shrink-0">Pencilled</span></div></div>
  <div class="tw-list-group-item"><i class="tw-list-group-item-media fa-regular fa-pencil tw:text-orange-500 tw:w-5 tw:text-center" aria-hidden="true"></i><div class="tw-list-group-item-content"><span class="tw-list-group-item-title">Enrolment</span></div><div class="tw-list-group-item-actions"><span class="tw:text-body-s tw:text-muted">26 Aug 2027</span><span class="tw-tag tw-tag-sm tw-tag-warning-subtle tw:border-dashed tw:shrink-0">Pencilled</span></div></div>
  </div>
  <p>You can pause any time — your journey lives in the top bar behind the <i class="fa-regular fa-route" aria-hidden="true"></i><span class="tw:sr-only">journey</span> icon, and I pick up exactly where we left off. Want to keep going with any of the rest?</p>` },
    { type: 'options', label: 'Carry on, or pick this up later?',
      value: ['Set up interviews', 'Confirm offers', 'Confirm enrolment', 'I’m done for now'],
      replies: {
        'Set up interviews': [
          { type: 'msg', value: 'Interviews are optional — plenty of sixth forms skip them entirely. When you’re ready we’ll build slots, not a window: pick your days, a daily time range, slot length and students per slot, and I’ll show the capacity before creating anything. I’ve noted it as our next stop — it’s waiting in your journey.' },
        ],
        'Confirm offers': [
          { type: 'msg', value: 'The offers deadline stays pencilled for 26 Mar 2027, and my second hero play — chasing un-accepted offers — arms fully the moment you confirm it. Confirming is one tap from your journey in the top bar, and I’ll nudge you well before it matters.' },
        ],
        'Confirm enrolment': [
          { type: 'msg', value: 'Enrolment is deliberately light-touch: it stays pencilled for 26 Aug 2027 with a planning nudge 6 weeks before, on 15 Jul. Nothing else is needed until then — confirming is one tap from your journey whenever you like.' },
        ],
        'I’m done for now': [
          { type: 'msg', value: 'Perfect. Everything live and armed keeps working quietly, everything pencilled stays safe — and nothing sends without your approval. I’m here whenever you need me.' },
        ],
      } },
  ];
  // ═══ View transitions — welcome / quiet home / chat view ═══
  const welcomeEl = byId('ofr-welcome');
  const quietEl = byId('ofr-quiet');
  const chatViewEl = byId('ofr-chat-view');
  const mainEl = byId('ofr-main');
  function toChat(afterReveal) {
    const current = welcomeEl.classList.contains('tw:hidden') ? quietEl : welcomeEl;
    if (!chatViewEl.classList.contains('tw:hidden')) { if (afterReveal) afterReveal(); return; }
    current.classList.add('ofr-screen-exiting');
    setTimeout(() => {
      current.classList.add('tw:hidden');
      current.classList.remove('ofr-screen-exiting');
      chatViewEl.classList.remove('tw:hidden');
      chatViewEl.classList.add('ofr-screen-entering');
      mainEl.classList.remove('tw:overflow-y-auto');
      mainEl.classList.add('tw:overflow-hidden', 'tw:flex', 'tw:items-stretch');
      setSidebar(false); // ONBOARDING: journey in progress — keep the sidebar expanded
      if (afterReveal) afterReveal();
      setTimeout(() => { chatViewEl.classList.remove('ofr-screen-entering'); }, 200);
    }, 150);
  }
  function toHome() {
    gen++;               // abort any in-flight script
    clearChips();
    chatViewEl.classList.add('tw:hidden');
    quietEl.classList.remove('tw:hidden');
    welcomeEl.classList.add('tw:hidden');
    quietEl.classList.add('ofr-screen-entering');
    mainEl.classList.add('tw:overflow-y-auto');
    mainEl.classList.remove('tw:overflow-hidden', 'tw:flex', 'tw:items-stretch');
    setTimeout(() => { quietEl.classList.remove('ofr-screen-entering'); }, 200);
  }
  // ── Entering the journey conversation (proceed card / popover Continue) ──
  function enterJourney() {
    if (journeyStarted) { toChat(); return; }   // resume the existing thread
    journeyStarted = true;
    FLAGS.facebook = false;
    gen++;
    const g = gen;
    clearChips();
    byId('ofr-thread').innerHTML = '';
    byId('ofr-chat-title').textContent = 'Setting up your year';
    toChat(() => {
      addUserMessage('Set up my 2026/27 year with me.');
      applyState({ active: 'leadgen' });
      runItems(JOURNEY, g);
    });
  }
  // ── Free-form chat from the quiet home composer ──
  function enterFreeChat(text) {
    journeyStarted = false;   // this thread replaces any previous one
    gen++;
    const g = gen;
    clearChips();
    byId('ofr-thread').innerHTML = '';
    byId('ofr-chat-title').textContent = text.length > 72 ? text.slice(0, 69) + '…' : text;
    toChat(() => {
      addUserMessage(text);
      runItems([
        { type: 'thinking', value: 'Thinking…', delay: 1.5 },
        { type: 'status', value: 'Thought for 2s' },
        { type: 'msg', value: 'Happy to help with that. Bear in mind your 2026/27 year has only just opened — there’s no applicant data yet, so I’ll answer from your setup and last year’s records. And whenever you’re ready, your journey is one tap away in the top bar.' },
      ], g);
    });
  }
  // ═══ Welcome-stage decisions ═══
  const journeyBtn = byId('ofr-journey-btn');
  const journeyHint = byId('ofr-journey-hint');
  const RING = ['tw:ring-4', 'tw:ring-primary/25'];
  byId('ofr-proceed-btn').addEventListener('click', enterJourney);
  // Decline — the chat box replaces the decision cards in place (no page swap);
  // the journey collapses into the topbar icon (one-time coach-mark + ring)
  byId('ofr-decline-btn').addEventListener('click', () => {
    byId('ofr-decision').classList.add('tw:hidden');
    const composer = byId('ofr-welcome-composer');
    composer.classList.remove('tw:hidden');
    composer.classList.add('ofr-screen-entering');
    RING.forEach((c) => journeyBtn.classList.add(c));
    journeyHint.classList.remove('tw:hidden');
    setTimeout(() => { composer.classList.remove('ofr-screen-entering'); }, 200);
    byId('ofr-welcome-input').focus();
  });
  // ═══ Welcome inline composer (decline path) — same behaviour as the quiet home ═══
  const welcomeInput = byId('ofr-welcome-input');
  const welcomeSend = byId('ofr-welcome-send');
  welcomeInput.addEventListener('input', () => { welcomeSend.disabled = welcomeInput.value.trim() === ''; });
  welcomeInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); welcomeSend.click(); }
  });
  welcomeSend.addEventListener('click', () => {
    const text = welcomeInput.value.trim();
    if (!text) return;
    welcomeInput.value = '';
    welcomeSend.disabled = true;
    enterFreeChat(text);
  });
  // Opening the popover dismisses the coach-mark + ring (one-time hint)
  journeyBtn.addEventListener('click', () => {
    journeyHint.classList.add('tw:hidden');
    RING.forEach((c) => journeyBtn.classList.remove(c));
  });
  // ═══ Journey popover footer (sibling-approved wiring) ═══
  function closeJourneyPopover() {
    if (journeyBtn.getAttribute('aria-expanded') === 'true') journeyBtn.click();
  }
  byId('ofr-popover-continue').addEventListener('click', () => {
    closeJourneyPopover();
    enterJourney();
  });
  byId('ofr-popover-later').addEventListener('click', closeJourneyPopover);
  // ═══ Quiet-home composer — real: typing enables send, send opens the chat ═══
  const homeInput = byId('ofr-home-input');
  const homeSend = byId('ofr-home-send');
  homeInput.addEventListener('input', () => { homeSend.disabled = homeInput.value.trim() === ''; });
  homeInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); homeSend.click(); }
  });
  homeSend.addEventListener('click', () => {
    const text = homeInput.value.trim();
    if (!text) return;
    homeInput.value = '';
    homeSend.disabled = true;
    enterFreeChat(text);
  });
  // ═══ Chat composer — resolves pending chips, else free-form follow-up ═══
  const chatInput = byId('ofr-chat-input');
  const chatSend = byId('ofr-chat-send');
  chatInput.addEventListener('input', () => { chatSend.disabled = chatInput.value.trim() === ''; });
  chatInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); chatSend.click(); }
  });
  chatSend.addEventListener('click', async () => {
    const text = chatInput.value.trim();
    if (!text) return;
    chatInput.value = '';
    chatSend.disabled = true;
    const resolve = byId('ofr-composer-card')._chipsResolve;
    if (resolve) {
      resolve(text);   // typed text answers the pending decision
      return;
    }
    addUserMessage(text);
    const g = gen;
    await runItems([
      { type: 'thinking', value: 'Thinking…', delay: 1.5 },
      { type: 'status', value: 'Thought for 2s' },
      { type: 'msg', value: 'I’ll look into that for you now. The year has just opened, so I’ll answer from your setup and last year’s records.' },
    ], g);
  });
  // New chat → back to the quiet home
  byId('ofr-new-chat-btn').addEventListener('click', toHome);
  // ═══ Right sidebar — expanded ⇄ 48px strip ═══
  const sidebarEl = byId('ofr-activity-sidebar');
  const stripEl = byId('ofr-strip');
  const sidebarToggle = byId('ofr-sidebar-toggle');
  function setSidebar(collapsed) {
    sidebarEl.classList.toggle('ofr-is-strip', collapsed);
    stripEl.setAttribute('aria-hidden', String(!collapsed));
    sidebarToggle.setAttribute('aria-label', collapsed ? 'Show sidebar' : 'Hide sidebar');
  }
  sidebarToggle.addEventListener('click', () => {
    setSidebar(!sidebarEl.classList.contains('ofr-is-strip'));
  });
  function expandToTab(index) {
    setSidebar(false);
    const tabs = sidebarEl.querySelectorAll('[role="tab"]');
    if (tabs[index]) tabs[index].click();
  }
  byId('ofr-strip-overview').addEventListener('click', () => expandToTab(0));
  byId('ofr-strip-history').addEventListener('click', () => expandToTab(1));
</script>