<div data-controller="sidebar">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
      <!-- Insights -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="insights"
        data-label="Insights"
        aria-expanded="false">
        <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
        <span class="tw:sr-only">Insights</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Parents & Enquiries -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="parents"
        data-label="Parents & Enquiries"
        aria-expanded="false">
        <i class="fa-light fa-user-group tw-sidebar-icon"></i>
        <span class="tw:sr-only">Parents & Enquiries</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Communications & Events -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="communications"
        data-label="Communications & Events"
        aria-expanded="false">
        <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
        <span class="tw:sr-only">Communications & Events</span>
      </button>
      <!-- Registered Students -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="students"
        data-label="Registered Students"
        aria-expanded="false">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Registered Students</span>
      </button>
      <!-- Marketing -->
      <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
      <!-- Enrolments -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="enrolments"
        data-label="Enrolments"
        aria-expanded="false">
        <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
        <span class="tw:sr-only">Enrolments</span>
      </button>
      <!-- Applicaa Futures -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="applicaafutures"
        data-label="Applicaa Futures"
        aria-expanded="false">
        <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
        <span class="tw:sr-only">Applicaa Futures</span>
      </button>
      <!-- Data -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="data"
        data-label="Data"
        aria-expanded="false">
        <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
        <span class="tw:sr-only">Data</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
      </button>
      <!-- Manage Users -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="manageusers"
        data-label="Manage Users"
        aria-expanded="false">
        <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
        <span class="tw:sr-only">Manage Users</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
      </button>
      <!-- Platform Essentials -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="essentials"
        data-label="Platform Essentials"
        aria-expanded="false">
        <i class="fa-light fa-bell tw-sidebar-icon"></i>
        <span class="tw:sr-only">Platform Essentials</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</span>
      </button>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="settings"
        data-label="Settings"
        aria-expanded="false">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </button>
    </div>
  </aside>
  <!-- Parents & Enquiries Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="parents"
     aria-label="Parents & Enquiries navigation">
    <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Parents</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enquiries</span>
      </a>
    </nav>
  </div>
  <!-- Insights Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="insights"
     aria-label="Insights navigation">
    <div class="tw-sidebar-drawer-header">INSIGHTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Summary</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Pipeline</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Map view</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Feeder schools</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Events</span>
      </a>
    </nav>
  </div>
  <!-- Registered Students Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="students"
     aria-label="Registered Students navigation">
    <div class="tw-sidebar-drawer-header">REGISTERED STUDENTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Incomplete</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Awaiting Reference
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Completed
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Withdrawn</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Deadline Missed</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Skipped Payment</span>
      </a>
    </nav>
  </div>
  <!-- Enrolments Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="enrolments"
     aria-label="Enrolments navigation">
    <div class="tw-sidebar-drawer-header">BULK ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="/lookbook/preview/projects/enrolment/bulk_enrolment" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Bulk Enrolment</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">
      ENROLMENT
      <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive tw:normal-case"
          data-controller="demo"
          data-action="click->demo#show"
        data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
        data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
        data-demo-learn-more="https://helpdesk.applicaa.com/">
        <i class="fa-regular fa-clapperboard-play"></i>
        Demo
      </span>
    </div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Details to be checked</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Ready to Enrol</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolled</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Waiting</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Activities</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">REPORT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Report</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">POST ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">CTF/File Request</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Transition Tool</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Sorting Hat</span>
      </a>
    </nav>
  </div>
  <!-- Applicaa Futures Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="applicaafutures"
     aria-label="Applicaa Futures navigation">
    <div class="tw-sidebar-drawer-header">APPLICAA FUTURES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">One Reference</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Destination Tracker</span>
      </a>
    </nav>
  </div>
  <!-- Data Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="data"
     aria-label="Data navigation">
    <div class="tw-sidebar-drawer-header">DATA</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Import</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Export
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Uploaded Files</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          First Media Applications
          <span class="tw-badge tw-badge-danger tw-badge-sm">182</span>
        </span>
      </a>
    </nav>
  </div>
  <!-- Manage Users Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="manageusers"
     aria-label="Manage Users navigation">
    <div class="tw-sidebar-drawer-header">MANAGE USERS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Manually Add People</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Students
          <span class="tw-badge tw-badge-danger tw-badge-sm">211</span>
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Agencies
          <span class="tw-badge tw-badge-danger tw-badge-sm">7</span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Duplicate Contacts</span>
      </a>
    </nav>
  </div>
  <!-- Platform Essentials Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="essentials"
     aria-label="Platform Essentials navigation">
    <div class="tw-sidebar-drawer-header">PLATFORM ESSENTIALS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Applicaa Journey
          <span class="tw-badge tw-badge-danger tw-badge-sm">13</span>
        </span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Product Requests & Updates</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Feature Requests</a>
        <a href="#" class="tw-drawer-subitem">Road Map</a>
        <a href="#" class="tw-drawer-subitem">Vote</a>
        <a href="#" class="tw-drawer-subitem">Recent Updates</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Time Saved With Admissions+</span>
      </a>
    </nav>
  </div>
  <!-- Communications & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="communications"
     aria-label="Communications & Events navigation">
    <div class="tw-sidebar-drawer-header">COMMUNICATIONS & EVENTS</div>
    <nav class="tw-drawer-nav">
      <!-- Communications Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Communications
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Manual Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Automated Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Scheduled Messages
        </a>
        <a href="#" class="tw-drawer-subitem">Message Summary</a>
      </div>
      <!-- Meetings (single item) -->
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Meetings
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <!-- Events Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Events
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Event Calendar</a>
        <a href="#" class="tw-drawer-subitem">Event Guests</a>
        <a href="#" class="tw-drawer-subitem">Event Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Event Forms</a>
      </div>
      <!-- Taster Day Section (expandable with secondary color) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Taster Day
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Taster Day Configuration</a>
        <a href="#" class="tw-drawer-subitem">Student Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Marketing & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="marketing"
     aria-label="Marketing & Events navigation">
    <div class="tw-sidebar-drawer-header">MARKETING & EVENTS</div>
    <nav class="tw-drawer-nav">
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Marketing Campaigns</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Campaigns</a>
        <a href="#" class="tw-drawer-subitem">Reports</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Workflows</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Emails</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Manual Emails</a>
        <a href="#" class="tw-drawer-subitem">Automated Emails</a>
        <a href="#" class="tw-drawer-subitem">Email Templates</a>
      </div>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Notifications</span>
      </a>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">SMS</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Meeting</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Events</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Calendar</a>
        <a href="#" class="tw-drawer-subitem">Guests</a>
        <a href="#" class="tw-drawer-subitem">Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Forms</a>
      </div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Taster Day</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Configurations</a>
        <a href="#" class="tw-drawer-subitem">Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Settings Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="settings"
     aria-label="Settings navigation">
    <div class="tw-sidebar-drawer-header">SETTINGS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Application Form</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Subject Options</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Form Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">School Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Settings</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Navigator</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Properties</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Security</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    </nav>
  </div>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- Context Dropdown -->
      <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
        <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">2024/2025 - Year 7 Main Entry</span>
          <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m2 5 6 6 6-6"/>
          </svg>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-wide tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1">
          <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-main">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-late">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y8">
            <span class="tw-dropdown-item-text">2024/2025 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y9">
            <span class="tw-dropdown-item-text">2024/2025 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-main">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-late">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y8">
            <span class="tw-dropdown-item-text">2025/2026 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y9">
            <span class="tw-dropdown-item-text">2025/2026 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y7-main">
            <span class="tw-dropdown-item-text">2026/2027 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y8">
            <span class="tw-dropdown-item-text">2026/2027 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2023-y12">
            <span class="tw-dropdown-item-text">2023/2024 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y12">
            <span class="tw-dropdown-item-text">2024/2025 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
      <!-- Search -->
      <div class="tw-topbar-search">
        <div class="tw-input-group tw-has-icon-start">
          <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
          <input type="search" class="tw-form-control" placeholder="Search...">
        </div>
      </div>
    </div>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-gift tw-icon-16"></i>
        Refer<br>
         & Save
      </button>
      <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-users tw-icon-16"></i>
        Applicaa<br>
         Community
      </button>
      <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-comment-question tw-icon-16"></i>
        Support<br>
         & Requests
      </button>
      <div class="tw-topbar-action-icons">
        <!-- Notification Icon -->
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-bell tw-icon-16"></i>
        </button>
      </div>
      <div class="tw-topbar-divider"></div>
      <!-- User Avatar Dropdown -->
      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
        <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
            <span>JD</span>
          </div>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
          <div class="tw-dropdown-header">John Doe</div>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Referrals & billing</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Password & security</span>
          </button>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Multiple form</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Email preferences</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Logout</span>
          </button>
        </div>
      </div>
    </div>
  </header>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw-h-screen-offset">
    <!-- ===== WELCOME WRAPPER (homepage-aligned layout) ===== -->
    <div id="welcome-wrapper" class="tw:flex tw:h-full tw:items-stretch tw:transition-all tw:duration-500">
      <!-- Agent Left Sidebar — Past Conversations (collapsed for new school) -->
      <div id="agent-sidebar" class="tw:w-0 tw:border-r tw:border-neutral-translucent-200 tw:flex-shrink-0 tw:flex tw:flex-col tw:overflow-hidden tw:transition-all tw:duration-200">
        <div class="tw:w-[260px] tw:p-3 tw:pl-5 tw:pr-2 tw:flex tw:items-center tw:fixed tw:pointer-events-none">
          <h2 class="tw-h6 tw:mb-0 tw:uppercase tw:text-neutral-600 tw:max-w-0 tw:flex-1 tw:transition-all tw:duration-200 tw:overflow-hidden tw:whitespace-nowrap">All chats</h2>
          <button id="agent-sidebar-toggle" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm tw:pointer-events-auto tw:-ml-1.5" type="button" aria-label="Show all chats" data-controller="tooltip" data-tooltip-content-value="Show all chats"><i class="fa-regular fa-sidebar"></i></button>
        </div>
      </div>
      <!-- ===== SCREEN 1: Welcome Landing ===== -->
      <div id="welcome-screen" class="tw:flex tw:flex-1 tw:flex-col tw:justify-start tw:pt-[10vh] tw:transition-all tw:duration-500">
        <div class="tw:flex tw:w-full tw:flex-col tw:gap-6">
          <!-- Hero — Avatar + Greeting -->
          <div id="welcome-hero" class="tw:text-center tw:flex tw:flex-col tw:items-center tw:opacity-0 tw:translate-y-4 tw:transition-all tw:duration-300">
            <div class="tw-avatar tw-avatar-primary tw-avatar-xl tw:mb-5 tw:ring-4 tw:ring-primary/15" role="img" aria-label="Emma, Online">
              <span>E</span>
              <span class="tw-avatar-status tw-avatar-status-online"><span class="tw:sr-only">Online</span></span>
            </div>
            <h1 class="tw-text-display">Good morning, Sarah</h1>
          </div>
          <!-- Emma's message bubble (no avatar — hero avatar is the speaker) -->
          <div id="welcome-bubble" class="tw:max-w-lg tw:mx-auto tw:px-4 tw:relative tw:opacity-0 tw:translate-y-4 tw:transition-all tw:duration-300">
            <!-- Pointer triangle pointing up to hero avatar -->
            <div class="tw:absolute tw:-top-2 tw:left-1/2 tw:-translate-x-1/2 tw:w-0 tw:h-0 tw:border-l-8 tw:border-r-8 tw:border-b-8 tw:border-l-transparent tw:border-r-transparent tw:border-b-white"></div>
            <div class="tw:bg-white tw:rounded-2xl tw:px-5 tw:py-4 tw:text-body-m tw:leading-body-m tw:text-neutral-600 tw:text-center tw:shadow-sm tw:border tw:border-neutral-translucent-100">
              I'm Emma, your admissions assistant. I've got your Greenford College details from Admissions+ — let me help you get set up. It'll only take a few minutes.
              <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-400 tw:mt-2 tw:mb-0">
                <i class="fa-regular fa-clock tw:mr-1"></i> About 5 minutes
              </p>
            </div>
          </div>
          <!-- CTA -->
          <div id="welcome-cta" class="tw:text-center tw:opacity-0 tw:translate-y-4 tw:transition-all tw:duration-300">
            <button class="tw-btn tw-btn-primary tw-btn-lg" type="button" id="start-onboarding-btn">
              Let's go →
            </button>
          </div>
          <!-- Onboarding Steps Preview -->
          <div id="welcome-tags" class="tw:max-w-3xl tw:mx-auto tw:opacity-0 tw:translate-y-4 tw:transition-all tw:duration-300">
            <div class="tw:flex tw:flex-wrap tw:justify-center tw:gap-1 tw:px-2.5">
              <span class="tw:text-neutral-500 tw:font-medium tw:w-full tw:text-center tw:mb-1">We'll cover 4 quick topics</span>
              <span class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft">
                ① School Profile
              </span>
              <span class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft">
                ② Key Dates
              </span>
              <span class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft">
                ③ Goals & Targets
              </span>
              <span class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft">
                ④ Preferences
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- Agent Activity Sidebar (empty placeholder, matching homepage) -->
      <div class="tw:flex tw:bg-white"></div>
    </div>
    <!-- end welcome-wrapper -->
    <!-- ===== SCREEN 2: Onboarding Conversation (hidden initially) ===== -->
    <div id="chat-screen" class="tw:hidden tw:opacity-0 tw:transition-all tw:duration-500">
      <div class="tw:flex tw:h-[calc(100vh-4rem)]"
           data-controller="onboarding-conversation"
           data-onboarding-conversation-new-script-id-value="script-new-only"
           data-onboarding-conversation-existing-script-id-value="script-new-only"
           data-onboarding-conversation-active-flow-value="new"
           data-onboarding-conversation-user-initials-value="SM">
        <!-- JSON Script Tag -->
        <script id="script-new-only" type="application/json">
          {"steps":{"start":{"statusBadge":"Account loaded","messages":[{"from":"emma","html":"Let me confirm what I have from your account. After that, I'll need to learn your key dates, goals, and preferences \u0026mdash; things I can't get from the system."},{"from":"emma","html":"\u003ci class=\"fa-regular fa-school tw:mr-1.5\"\u003e\u003c/i\u003e Your Admissions+ Account","card":"\u003cdiv class=\"tw-chat-card-confirm\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-school tw:mr-2\"\u003e\u003c/i\u003e Your Admissions+ Account\u003c/div\u003e\u003cp class=\"tw:text-body-xs tw:leading-body-xs tw:text-blue-600 tw:bg-blue-50 tw:px-3 tw:py-1.5 tw:mb-0 tw:border-b tw:border-neutral-100\"\u003ePulled from your account\u003c/p\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eSchool name\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eGreenford College\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eSchool type\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eState Secondary with Sixth Form\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eAdmin contact\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eSarah Mitchell, sarah@greenford.school\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eMIS\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-neutral-400\"\u003eNot yet connected\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eStudents\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-neutral-400\"\u003eAwaiting MIS sync\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e"}],"chips":[{"label":"Yes, that's correct","goto":"role_question","recommended":true}]},"role_question":{"echo":"Yes, that's correct","messages":[{"from":"emma","html":"Perfect. Just so I can tailor things for you \u0026mdash; what\u0026rsquo;s your role at Greenford?"}],"chips":[{"label":"Admissions Manager / Registrar","goto":"intakes","recommended":true},{"label":"Head of Sixth Form","goto":"intakes"},{"label":"Deputy Head / Assistant Head","goto":"intakes"},{"label":"Headteacher / Principal","goto":"intakes"},{"label":"PA / Admin Support","goto":"intakes"}],"hint":"or describe your role"},"intakes":{"messages":[{"from":"emma","html":"What year groups do you manage admissions for? This determines which workflows I'll set up for you."}],"multiSelect":true,"chips":[{"label":"Year 7","preSelected":true},{"label":"Sixth Form (Year 12)","preSelected":true},{"label":"In-Year Admissions"},{"label":"Reception / Nursery"}],"hint":"Select all that apply","multiSelectGoto":"mis"},"mis":{"messages":[{"from":"emma","html":"I don't see an MIS connected to your account yet. Which one does your school use?"}],"chips":[{"label":"SIMS","goto":"students"},{"label":"Bromcom","goto":"students"},{"label":"Arbor","goto":"students","recommended":true},{"label":"iSAMS","goto":"students"},{"label":"Unit-E","goto":"students"},{"label":"None yet","goto":"students"}],"hint":"or type below"},"students":{"echo":"Arbor","messages":[{"from":"emma","html":"Arbor \u0026mdash; I can sync with that. I'll flag the integration for your IT team.\u003cbr\u003e\u003cbr\u003eHow many students do you have currently?"},{"from":"emma","notification":{"type":"highlight","title":"MIS Integration Available","message":"Arbor sync can auto-import student records and reduce manual data entry by ~80%. Your IT team will receive setup instructions."}}],"chips":[{"label":"Under 500","goto":"staff_question"},{"label":"500–1,000","goto":"staff_question"},{"label":"1,000–1,500","goto":"staff_question","recommended":true},{"label":"1,500+","goto":"staff_question"}],"hint":"or type your student count"},"staff_question":{"echo":"1,000–1,500","messages":[{"from":"emma","html":"1,000–1,500 students \u0026mdash; got it. That helps me understand the scale.\u003cbr\u003e\u003cbr\u003eWho else will use the system? Just you, or do you have admin staff or a deputy who'll need access?"}],"chips":[{"label":"Yes, I have a team","goto":"staff_details","recommended":true},{"label":"Just me for now","goto":"pain_points_solo"}],"hint":"or tell me about your team"},"staff_details":{"echo":"Yes, I have a team","userMessages":["There's me, Sarah Chen (Head of Sixth Form), David Park (Deputy Head) who approves offers, and Lisa Thompson (PA to the Head)."],"messages":[{"from":"emma","html":"Got it \u0026mdash; team of 3 plus you. I'll set up their accounts with the right permissions."}],"autoAdvance":{"goto":"pain_points","delay":1500}},"pain_points_solo":{"echo":"Just me for now","messages":[{"from":"emma","html":"No problem \u0026mdash; you can always add team members later. I'll set everything up under your account for now.\u003cbr\u003e\u003cbr\u003eWhat are your biggest headaches right now? This helps me know what to prioritise for you."}],"multiSelect":true,"chips":[{"label":"Losing incomplete applications","preSelected":true},{"label":"Manual interview scheduling"},{"label":"Timetable clashes"},{"label":"Admin workload"},{"label":"Results Day chaos"}],"hint":"Select all that apply","multiSelectGoto":"profile_summary"},"pain_points":{"messages":[{"from":"emma","html":"Great, that's the team sorted. Now \u0026mdash; what are your biggest headaches right now? This helps me know what to prioritise for you."}],"multiSelect":true,"chips":[{"label":"Losing incomplete applications","preSelected":true},{"label":"Manual interview scheduling"},{"label":"Timetable clashes"},{"label":"Admin workload"},{"label":"Results Day chaos"}],"hint":"Select all that apply","multiSelectGoto":"profile_summary"},"profile_summary":{"statusBadge":"Profile compiled","messages":[{"from":"emma","html":"Incomplete applications and admin workload \u0026mdash; that's exactly what I'm built for. Automated chasing will be the first thing I set up for you.\u003cbr\u003e\u003cbr\u003eLet me read that back to make sure I've got everything:"},{"from":"emma","html":"\u003ci class=\"fa-regular fa-school tw:mr-1.5\"\u003e\u003c/i\u003e Greenford College \u0026mdash; Setup Summary","card":"\u003cdiv class=\"tw-chat-card-confirm\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-school tw:mr-2\"\u003e\u003c/i\u003e Greenford College \u0026mdash; Setup Summary\u003c/div\u003e\u003cp class=\"tw:text-body-xs tw:leading-body-xs tw:text-blue-600 tw:bg-blue-50 tw:px-3 tw:py-1.5 tw:mb-0 tw:border-b tw:border-neutral-100\"\u003eConfirmed during onboarding\u003c/p\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eType\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eState Secondary with Sixth Form\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eMIS\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eArbor\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eStudents\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e1,000\u0026ndash;1,500\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eIntakes\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eYear 7, Sixth Form, In-Year\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eTeam\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eSarah Mitchell + Sarah Chen, David Park, Lisa Thompson\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003ePriority\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eChase incompletes, reduce admin burden\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e"}],"chips":[{"label":"That's all correct","goto":"dates_bridge","recommended":true},{"label":"I'll set dates later","goto":"complete"}]},"stub_fix":{"echo":"Let me fix something","messages":[{"from":"emma","html":"No problem — you can update any of this later in Settings. For now, let's continue with what we have."}],"chips":[{"label":"OK, let's continue","goto":"dates_bridge","recommended":true}]},"dates_bridge":{"echo":"That's all correct","messages":[{"from":"emma","html":"Great. Now let's map out your admissions year."}],"autoAdvance":{"goto":"la_dates","delay":1200}},"la_dates":{"messages":[{"from":"emma","html":"I can see you've got Year 7 and Sixth Form application forms set up, but no events created yet. Let's fix that.\u003cbr\u003e\u003cbr\u003eFor Year 7, the LA dates are fixed \u0026mdash; applications close 31 October, offers go out 1 March. Sound right for your LA?"}],"chips":[{"label":"Yes, standard dates","goto":"open_evening","recommended":true},{"label":"Our LA is different","goto":"open_evening"}],"hint":"or describe your LA's process"},"open_evening":{"echo":"Yes, standard dates","messages":[{"from":"emma","html":"Good. Now let's talk events. When is your Open Evening this year?"}],"chips":[{"label":"September 2026","goto":"tours","recommended":true},{"label":"October 2026","goto":"tours"},{"label":"We've already had it","goto":"tours"},{"label":"We don't hold one","goto":"tours"}],"hint":"or type a specific date"},"tours":{"echo":"September 2026","messages":[{"from":"emma","html":"When do you run tours or taster days?"}],"chips":[{"label":"Both tours and taster days","goto":"tour_details","recommended":true},{"label":"Just tours","goto":"tour_details"},{"label":"Just the Open Evening","goto":"sixth_form_oe"}],"hint":"or describe your events"},"tour_details":{"echo":"Both tours and taster days","userMessages":["We do three tours: October 10, November 7, December 5. Taster Day in July."],"messages":[{"from":"emma","html":"\u0026#10003; Three tours booked: 10 Oct, 7 Nov, 5 Dec.\u003cbr\u003e\u0026#10003; Taster Day \u0026mdash; July 2027."},{"from":"emma","html":"Based on your 3 tours, I'd suggest opening registration about 4 weeks before each one. That gives families time to plan and you time to see the numbers building. I'll set that up when we create the events."}],"autoAdvance":{"goto":"sixth_form_oe","delay":2000}},"sixth_form_oe":{"messages":[{"from":"emma","html":"Now let's do the same for Sixth Form. When is your Sixth Form Open Evening?"}],"chips":[{"label":"October 2026","goto":"sixth_form_apps"},{"label":"November 2026","goto":"sixth_form_apps","recommended":true},{"label":"January 2027","goto":"sixth_form_apps"}],"hint":"or type a specific date"},"sixth_form_apps":{"echo":"November 2026","userMessages":["Applications open October 1st, close January 31st"],"messages":[{"from":"emma","html":"\u0026#10003; Sixth Form Open Evening \u0026mdash; 12 November 2026.\u003cbr\u003e\u003cbr\u003eAnd offers go out in February, conditional on GCSEs?"}],"chips":[{"label":"Yes, conditional offers in February","goto":"results_day","recommended":true},{"label":"Different process","goto":"results_day"}]},"results_day":{"echo":"Yes, conditional offers in February","messages":[{"from":"emma","html":"So GCSE Results Day (late August 2027) is when you confirm enrolment?"}],"chips":[{"label":"Yes, we enrol on results day","goto":"timeline_card","recommended":true},{"label":"We have a separate enrolment process","goto":"timeline_card"}]},"timeline_card":{"echo":"Yes, we enrol on results day","statusBadge":"Timeline built","messages":[{"from":"emma","html":"Let me read that back to check I've got your timeline right:"},{"from":"emma","html":"\u003ci class=\"fa-regular fa-calendar tw:mr-1.5\"\u003e\u003c/i\u003e Admissions Timeline 2026/2027","card":"\u003cdiv class=\"tw-chat-card-confirm\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-calendar tw:mr-2\"\u003e\u003c/i\u003e Admissions Timeline 2026/2027\u003c/div\u003e\u003cp class=\"tw:text-body-xs tw:leading-body-xs tw:text-blue-600 tw:bg-blue-50 tw:px-3 tw:py-1.5 tw:mb-0 tw:border-b tw:border-neutral-100\"\u003eBased on standard state school patterns \u0026mdash; you can add more dates anytime\u003c/p\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eOpen Evening\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eSeptember 2026\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eTours\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e10 Oct, 7 Nov, 5 Dec\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eLA apps close\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e31 October 2026\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eLA Offers Day\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e1 March 2027\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eTaster Day\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eJuly 2027\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003e6F Open Evening\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e12 November 2026\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003e6F Apps\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e1 Oct 2026 \u0026ndash; 31 Jan 2027\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003e6F Offers\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eFebruary 2027 (conditional)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eResults Day\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eAugust 2027\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e"}],"chips":[{"label":"Yes, looks good","goto":"y7_target","recommended":true}]},"y7_target":{"echo":"Yes, looks good","messages":[{"from":"emma","html":"Now for the most important part \u0026mdash; what does a successful year look like for you?\u003cbr\u003e\u003cbr\u003eSince you're new to Admissions+, I don't have last year's data to compare against. I'll use what you tell me as the baseline.\u003cbr\u003e\u003cbr\u003eYour Year 7 PAN is 180. Are you aiming to fill every place?"}],"chips":[{"label":"Yes, 180 is the target","goto":"oversubscribed","recommended":true},{"label":"We're aiming for fewer","goto":"oversubscribed"},{"label":"Our PAN is different","goto":"oversubscribed"},{"label":"I don't have targets yet","goto":"no_targets_yet"},{"label":"I'll set goals later","goto":"pref_frequency"}],"hint":"or type your target number"},"no_targets_yet":{"echo":"I don't have targets yet","messages":[{"from":"emma","html":"No problem — I'll ask again when you're ready. You can set these at any time. Let's move on to preferences for now."}],"chips":[{"label":"Continue to preferences","goto":"pref_frequency","recommended":true}]},"oversubscribed":{"echo":"Yes, 180 is the target","messages":[{"from":"emma","html":"180 Year 7 places. Were you oversubscribed last year, or did you have spaces to fill?"}],"chips":[{"label":"Oversubscribed","goto":"sixth_form_q","recommended":true},{"label":"Filled exactly","goto":"sixth_form_q"},{"label":"Had spaces to fill","goto":"sixth_form_q"},{"label":"Not sure","goto":"sixth_form_q"}],"hint":"or describe your situation"},"sixth_form_q":{"echo":"Oversubscribed","userMessages":["We had 312 first-preference applications"],"messages":[{"from":"emma","html":"312 first preferences for 180 places \u0026mdash; significantly oversubscribed. I'll use that as your benchmark."},{"from":"emma","html":"Now Sixth Form. How many external students are you targeting?"}],"autoAdvance":{"goto":"sixth_form_a","delay":2000}},"sixth_form_a":{"userMessages":["We're aiming for 40 external students. We also want to retain at least 100 of our own Year 11s."],"messages":[{"from":"emma","html":"40 external + 100 internal = 140 total Year 12. That's a big step up \u0026mdash; I'll flag Sixth Form external as your priority."},{"from":"emma","html":"Any event registration targets?"}],"autoAdvance":{"goto":"event_targets","delay":2000}},"event_targets":{"userMessages":["Open Evening target 250. 15 per tour, so 45 across 3 tours."],"messages":[{"from":"emma","html":"\u0026#10003; Open Evening target: 250 registrations\u003cbr\u003e\u0026#10003; Tour target: 15 per tour (45 across 3 tours)"},{"from":"emma","html":"What conversion rate are you aiming for \u0026mdash; from application to enrolled?"}],"chips":[{"label":"80%+","goto":"growth_areas","recommended":true},{"label":"70–80%","goto":"growth_areas"},{"label":"60–70%","goto":"growth_areas"},{"label":"I don't track this yet","goto":"growth_areas"}]},"growth_areas":{"echo":"80%+","messages":[{"from":"emma","html":"Are there specific areas you want to grow this year?"}],"multiSelect":true,"chips":[{"label":"Sixth Form external recruitment","preSelected":true},{"label":"SEND provision"},{"label":"Feeder school relationships"},{"label":"Marketing reach"},{"label":"International students"}],"hint":"Select all that apply","multiSelectGoto":"personal_success"},"personal_success":{"messages":[{"from":"emma","html":"That aligns with your numbers \u0026mdash; going from under 30 to 40 is ambitious but achievable if we start the conversion tracking early. I've seen the difference it makes when you know exactly where each enquiry sits in the pipeline. I'll make sure we're on it from the day applications open.\u003cbr\u003e\u003cbr\u003eLast question in this section \u0026mdash; what would make this year a success for you personally?"}],"autoAdvance":{"goto":"personal_answer","delay":3000}},"personal_answer":{"userMessages":["Honestly, I want to stop drowning in spreadsheets. I spent half of last year manually chasing parents for missing documents and the other half pulling reports for SLT. If the agent can handle the chasing and the reporting, I'd actually have time to talk to families."],"messages":[{"from":"emma","html":"That's really clear. So the biggest wins for you are:\u003cbr\u003e\u003cbr\u003e1. Automated document chasing \u0026mdash; families with incomplete applications get followed up without you doing it manually\u003cbr\u003e2. Auto-generated reports \u0026mdash; SLT gets their numbers without you building spreadsheets\u003cbr\u003e3. More time for families \u0026mdash; the admin work reduces so you can focus on the human side\u003cbr\u003e\u003cbr\u003eI'll keep those front and centre. The first two are things I can start doing from day one."}],"autoAdvance":{"goto":"goals_card","delay":2000}},"goals_card":{"statusBadge":"Goals configured","messages":[{"from":"emma","html":"Let me read that back on your goals:"},{"from":"emma","html":"\u003ci class=\"fa-regular fa-bullseye-arrow tw:mr-1.5\"\u003e\u003c/i\u003e Goals \u0026amp; Targets 2026/2027","card":"\u003cdiv class=\"tw-chat-card-confirm\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-bullseye-arrow tw:mr-2\"\u003e\u003c/i\u003e Goals \u0026amp; Targets 2026/2027\u003c/div\u003e\u003cp class=\"tw:text-body-xs tw:leading-body-xs tw:text-blue-600 tw:bg-blue-50 tw:px-3 tw:py-1.5 tw:mb-0 tw:border-b tw:border-neutral-100\"\u003eI'll track these from day one and alert you if anything falls behind pace\u003c/p\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eYear 7\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e180 students (PAN), last year 312 first prefs\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003e6F External\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e40 students (growth priority \u0026#11088;)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003e6F Internal\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e100 retained\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eOpen Evening\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e250 registrations\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eTours\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e15 per tour (45 total)\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003ePriority\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eSixth Form external recruitment\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e"}],"chips":[{"label":"Looks good","goto":"pref_frequency","recommended":true}]},"pref_frequency":{"echo":"Looks good","messages":[{"from":"emma","html":"Nearly done. I'd suggest a daily briefing at 8am, sent to both in-app and email. Most admissions teams find this works well. Sound good?"}],"chips":[{"label":"Yes, that works","goto":"pref_automation","recommended":true},{"label":"Change frequency","goto":"pref_automation"},{"label":"Change time","goto":"pref_automation"},{"label":"I'll set these later","goto":"complete"}]},"pref_automation":{"echo":"Yes, that works","messages":[{"from":"emma","html":"Is there anything you do NOT want me to do automatically?"}],"multiSelect":true,"chips":[{"label":"Don't send emails without my approval","preSelected":true},{"label":"Don't change event settings"},{"label":"Don't modify application forms"}],"hint":"Select all that apply","multiSelectGoto":"pref_confirmed"},"pref_confirmed":{"messages":[{"from":"emma","html":"Understood. I will never send an email to a parent or family without showing you first and getting your explicit approval. I'll draft everything and wait for your go-ahead."}],"autoAdvance":{"goto":"workflow_question","delay":1500}},"workflow_question":{"messages":[{"from":"emma","html":"One last thing \u0026mdash; the same Emma serves every role on your team differently. Same data, different perspectives. Same rules, different workflows.\u003cbr\u003e\u003cbr\u003eIs there a recurring task you\u0026rsquo;d like me to handle automatically? Describe it in plain English."}],"chips":[{"label":"Chase incomplete applications every day","goto":"workflow_built","recommended":true},{"label":"Send SLT progress report every Friday","goto":"workflow_built"},{"label":"Remind families 48h before each event","goto":"workflow_built"},{"label":"Flag applications below academic threshold","goto":"workflow_built"},{"label":"Not now — I’ll create workflows later","goto":"tone_question"}],"hint":"or describe a workflow in your own words..."},"workflow_built":{"messages":[{"from":"emma","html":"I can set that up. Here’s the workflow I’ve created from what you described:"},{"from":"emma","html":"\u003ci class=\"fa-regular fa-wand-magic-sparkles tw:mr-1.5\"\u003e\u003c/i\u003e Workflow Created","card":"\u003cdiv class=\"tw-chat-card-confirm\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-wand-magic-sparkles tw:mr-2\"\u003e\u003c/i\u003e Workflow Created\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eName\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s fw-semibold\"\u003eChase Incomplete Applications\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eTrigger\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eDaily at 08:00\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eCondition\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eApplications with missing docs \u0026gt; 3 days\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eAction\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eDraft chase email \u0026rarr; await your approval\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eStatus\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s tw:text-green-600\"\u003e\u0026#10003; Active \u0026mdash; ready when applications open\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e"},{"from":"emma","html":"You can edit or add more workflows at any time from Settings \u0026rarr; Workflows."}],"autoAdvance":{"goto":"tone_question","delay":2500}},"tone_question":{"messages":[{"from":"emma","html":"One more thing \u0026mdash; how should I sound when I write on your behalf? I draft emails, summaries, and follow-up messages for you. The right tone makes them feel like \u003cem\u003eyou\u003c/em\u003e, not a bot."},{"from":"emma","html":"\u003ci class=\"fa-regular fa-sliders tw:mr-1.5\"\u003e\u003c/i\u003e Tone of Voice","card":"\u003cdiv class=\"tw-chat-card tw:mb-0\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-sliders tw:mr-2\"\u003e\u003c/i\u003e Tone of Voice\u003c/div\u003e\u003cdiv class=\"onb-card-inner\"\u003e\u003cdiv class=\"onb-context-note\"\u003e\u003cstrong\u003eWhy this matters:\u003c/strong\u003e Emma drafts outbound emails and summaries in your name. This setting shapes all of that \u0026mdash; you can change it any time in Settings.\u003c/div\u003e\u003cdiv class=\"onb-pick-list\"\u003e\u003cbutton class=\"onb-pick-card\" type=\"button\" data-goto=\"tone_warm\"\u003e\u003cspan class=\"onb-pick-icon\"\u003e\u0026#x1F60A;\u003c/span\u003e\u003cspan class=\"onb-pick-body\"\u003e\u003cspan class=\"onb-pick-title\"\u003eWarm \u0026amp; Supportive\u003c/span\u003e\u003cspan class=\"onb-pick-desc\"\u003eEncouraging and empathetic \u0026mdash; like a helpful colleague\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"onb-pick-radio\"\u003e\u003c/span\u003e\u003c/button\u003e\u003cbutton class=\"onb-pick-card\" type=\"button\" data-goto=\"tone_professional\"\u003e\u003cspan class=\"onb-pick-icon\"\u003e\u0026#x1F4BC;\u003c/span\u003e\u003cspan class=\"onb-pick-body\"\u003e\u003cspan class=\"onb-pick-title\"\u003eProfessional\u003c/span\u003e\u003cspan class=\"onb-pick-desc\"\u003ePrecise and clear \u0026mdash; suited to SLT and formal communications\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"onb-pick-radio\"\u003e\u003c/span\u003e\u003c/button\u003e\u003cbutton class=\"onb-pick-card\" type=\"button\" data-goto=\"tone_concise\"\u003e\u003cspan class=\"onb-pick-icon\"\u003e\u0026#x26A1;\u003c/span\u003e\u003cspan class=\"onb-pick-body\"\u003e\u003cspan class=\"onb-pick-title\"\u003eConcise\u003c/span\u003e\u003cspan class=\"onb-pick-desc\"\u003eShort answers only \u0026mdash; no explanations unless you ask\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"onb-pick-radio\"\u003e\u003c/span\u003e\u003c/button\u003e\u003c/div\u003e\u003cdiv class=\"onb-skip-row\"\u003e\u003cbutton class=\"onb-skip-chip\" type=\"button\" data-goto=\"tone_skip\"\u003eSkip \u0026mdash; I'll set this in Settings\u003c/button\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e"}]},"tone_warm":{"echo":"Warm \u0026 Supportive","messages":[{"from":"emma","html":"Got it \u0026mdash; I'll keep things warm and supportive from here."}],"autoAdvance":{"goto":"autonomy_question","delay":1500}},"tone_professional":{"echo":"Professional","messages":[{"from":"emma","html":"Got it \u0026mdash; I'll keep things professional from here."}],"autoAdvance":{"goto":"autonomy_question","delay":1500}},"tone_concise":{"echo":"Concise","messages":[{"from":"emma","html":"Got it \u0026mdash; short and direct it is."}],"autoAdvance":{"goto":"autonomy_question","delay":1500}},"tone_skip":{"echo":"Skip — I'll set this in Settings","messages":[{"from":"emma","html":"No problem \u0026mdash; you can set this any time in \u003cstrong\u003eSettings \u0026rarr; Identity \u0026amp; Tone\u003c/strong\u003e."}],"autoAdvance":{"goto":"autonomy_question","delay":1500}},"autonomy_question":{"messages":[{"from":"emma","html":"How much should I do on my own \u0026mdash; and how much should I check in with you first? You can fine-tune this per action later, but this sets your default."},{"from":"emma","html":"\u003ci class=\"fa-regular fa-shield-halved tw:mr-1.5\"\u003e\u003c/i\u003e Autonomy \u0026amp; Alerting","card":"\u003cdiv class=\"tw-chat-card tw:mb-0\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-shield-halved tw:mr-2\"\u003e\u003c/i\u003e Autonomy \u0026amp; Alerting\u003c/div\u003e\u003cdiv class=\"onb-card-inner\"\u003e\u003cdiv class=\"onb-context-note\"\u003e\u003cstrong\u003eWhy this matters:\u003c/strong\u003e Controls whether Emma drafts-and-waits, acts independently, or always asks first. You can adjust per action in \u003cstrong\u003eSettings \u0026rarr; Behaviour \u0026amp; Actions\u003c/strong\u003e.\u003c/div\u003e\u003cdiv class=\"onb-pick-list\"\u003e\u003cbutton class=\"onb-pick-card\" type=\"button\" data-goto=\"autonomy_ask\"\u003e\u003cspan class=\"onb-pick-icon\"\u003e\u0026#x1F512;\u003c/span\u003e\u003cspan class=\"onb-pick-body\"\u003e\u003cspan class=\"onb-pick-title\"\u003eAsk first\u003c/span\u003e\u003cspan class=\"onb-pick-desc\"\u003eEmma always checks before taking any action \u0026mdash; you stay in full control\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"onb-pick-radio\"\u003e\u003c/span\u003e\u003c/button\u003e\u003cbutton class=\"onb-pick-card\" type=\"button\" data-goto=\"autonomy_balanced\"\u003e\u003cspan class=\"onb-pick-icon\"\u003e\u0026#x26A1;\u003c/span\u003e\u003cspan class=\"onb-pick-body\"\u003e\u003cspan class=\"onb-pick-title\"\u003eBalanced \u003cspan class=\"onb-recommended\"\u003erecommended\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"onb-pick-desc\"\u003eEmma drafts responses and actions, then waits for your approval\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"onb-pick-radio\"\u003e\u003c/span\u003e\u003c/button\u003e\u003cbutton class=\"onb-pick-card\" type=\"button\" data-goto=\"autonomy_autonomous\"\u003e\u003cspan class=\"onb-pick-icon\"\u003e\u0026#x1F680;\u003c/span\u003e\u003cspan class=\"onb-pick-body\"\u003e\u003cspan class=\"onb-pick-title\"\u003eAutonomous\u003c/span\u003e\u003cspan class=\"onb-pick-desc\"\u003eEmma handles routine tasks independently \u0026mdash; you review after\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"onb-pick-radio\"\u003e\u003c/span\u003e\u003c/button\u003e\u003c/div\u003e\u003cdiv class=\"onb-skip-row\"\u003e\u003cbutton class=\"onb-skip-chip\" type=\"button\" data-goto=\"autonomy_skip\"\u003eSkip \u0026mdash; I'll set this in Settings\u003c/button\u003e\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e"}]},"autonomy_ask":{"echo":"Ask first","messages":[{"from":"emma","html":"Perfect. I'll always check with you before taking any action."}],"chips":[{"label":"Only critical","goto":"digest_question"},{"label":"Balanced","goto":"digest_question","recommended":true},{"label":"Flag early","goto":"digest_question"}],"hint":"How early should Emma flag issues?"},"autonomy_balanced":{"echo":"Balanced","messages":[{"from":"emma","html":"Perfect. I'll draft actions and wait for your approval."}],"chips":[{"label":"Only critical","goto":"digest_question"},{"label":"Balanced","goto":"digest_question","recommended":true},{"label":"Flag early","goto":"digest_question"}],"hint":"How early should Emma flag issues?"},"autonomy_autonomous":{"echo":"Autonomous","messages":[{"from":"emma","html":"Got it. I'll handle routine tasks independently and you can review after."}],"chips":[{"label":"Only critical","goto":"digest_question"},{"label":"Balanced","goto":"digest_question","recommended":true},{"label":"Flag early","goto":"digest_question"}],"hint":"How early should Emma flag issues?"},"autonomy_skip":{"echo":"Skip — I'll set this in Settings","messages":[{"from":"emma","html":"That's fine \u0026mdash; Balanced is a good default to start with. You can adjust in \u003cstrong\u003eSettings \u0026rarr; Behaviour\u003c/strong\u003e."}],"autoAdvance":{"goto":"digest_question","delay":1500}},"digest_question":{"messages":[{"from":"emma","html":"Every morning I can send you a quick briefing \u0026mdash; what needs your attention today, any risks flagged overnight, and your pipeline at a glance. Want to turn this on?"},{"raw":"\u003cdiv class=\"onb-context-note tw:mx-4 tw:mb-2\"\u003e\u003cstrong\u003eWhy this matters:\u003c/strong\u003e The digest is your daily starting point \u0026mdash; it surfaces what Emma noticed while you were away. Most users find it's the first thing they check. You can change the time or turn it off in \u003cstrong\u003eSettings \u0026rarr; Behaviour\u003c/strong\u003e.\u003c/div\u003e"}],"chips":[{"label":"Yes — 8:00 am (default)","goto":"digest_on","recommended":true},{"label":"Yes — choose a time","goto":"digest_time"},{"label":"No thanks","goto":"digest_off"},{"label":"Skip — I'll set this in Settings","goto":"complete"}],"hint":"Morning Digest"},"digest_time":{"echo":"Yes — choose a time","messages":[{"from":"emma","html":"What time works best for you?"}],"chips":[{"label":"7:00 am","goto":"digest_on_7am"},{"label":"8:00 am","goto":"digest_on","recommended":true},{"label":"8:30 am","goto":"digest_on_830"},{"label":"9:00 am","goto":"digest_on_9am"}],"hint":"Send time"},"digest_on":{"echo":"Yes — 8:00 am (default)","messages":[{"from":"emma","html":"Great \u0026mdash; I'll brief you at 8:00 am every weekday."}],"autoAdvance":{"goto":"complete","delay":1500}},"digest_on_7am":{"echo":"7:00 am","messages":[{"from":"emma","html":"Great \u0026mdash; I'll brief you at 7:00 am every weekday."}],"autoAdvance":{"goto":"complete","delay":1500}},"digest_on_830":{"echo":"8:30 am","messages":[{"from":"emma","html":"Great \u0026mdash; I'll brief you at 8:30 am every weekday."}],"autoAdvance":{"goto":"complete","delay":1500}},"digest_on_9am":{"echo":"9:00 am","messages":[{"from":"emma","html":"Great \u0026mdash; I'll brief you at 9:00 am every weekday."}],"autoAdvance":{"goto":"complete","delay":1500}},"digest_off":{"echo":"No thanks","messages":[{"from":"emma","html":"No problem \u0026mdash; you can switch this on any time in \u003cstrong\u003eSettings \u0026rarr; Behaviour\u003c/strong\u003e."}],"autoAdvance":{"goto":"complete","delay":1500}},"complete":{"statusBadge":"Setup complete","messages":[{"from":"emma","html":"That's everything. Here's your complete profile:"},{"from":"emma","html":"\u003ci class=\"fa-solid fa-check-circle tw:mr-1.5 tw:text-green-500\"\u003e\u003c/i\u003e Onboarding Complete","card":"\u003cdiv class=\"tw-chat-card-confirm\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-solid fa-check-circle tw:mr-2 tw:text-green-500\"\u003e\u003c/i\u003e Onboarding Complete \u0026mdash; Greenford College\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eSchool\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eGreenford College \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(from your Admissions+ account)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eType\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eState Secondary with Sixth Form \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(from your Admissions+ account)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eMIS\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eArbor \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(from your Admissions+ account)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eStudents\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e1,247 on roll \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(from your Admissions+ account)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eNext Event\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eOpen Evening \u0026mdash; Sep 2026 \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(set during onboarding)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eYear 7 target\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e180 students \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(set during onboarding)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003e6F External\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e40 students \u0026#11088; \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(set during onboarding)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eDaily briefing\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e8am (in-app + email) \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(set during onboarding)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eEmail approval\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eRequired for all outbound \u003cspan class=\"tw:text-neutral-400 tw:text-body-xs tw:leading-body-xs\"\u003e(set during onboarding)\u003c/span\u003e\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e"},{"from":"emma","html":"Here's what I set up in the background while we were talking:"},{"from":"emma","html":"\u003ci class=\"fa-regular fa-gear tw:mr-1.5\"\u003e\u003c/i\u003e What I configured","card":"\u003cdiv class=\"tw-chat-card-confirm\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-gear tw:mr-2\"\u003e\u003c/i\u003e What I configured\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eDaily briefing\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003e8am, in-app + email \u0026mdash; starts tomorrow\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eSixth Form tracking\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eFlagged as priority \u0026mdash; I'll watch conversion closely\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eDocument chasing\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eReady to activate when applications open\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eSLT reports\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eAuto-generated weekly \u0026mdash; no spreadsheets needed\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eEmail drafts\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eAll outbound requires your approval\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e"},{"from":"emma","html":"You're all set, Sarah. From tomorrow morning, I'll be working in the background \u0026mdash; tracking your numbers, preparing your briefings, and keeping an eye on everything so you don't have to. You mentioned wanting more time for families. That starts now. Everything you just set up is in \u003cstrong\u003eSettings \u0026rarr; Emma\u003c/strong\u003e whenever you want to tweak it."},{"from":"emma","html":"Here's what happens from here:"},{"from":"emma","html":"\u003ci class=\"fa-regular fa-map tw:mr-1.5\"\u003e\u003c/i\u003e Your Admissions Roadmap","card":"\u003cdiv class=\"tw-chat-card-confirm\"\u003e\u003cdiv class=\"tw-chat-card-header-confirm tw:text-body-s tw:leading-body-s\"\u003e\u003ci class=\"fa-regular fa-map tw:mr-2\"\u003e\u003c/i\u003e Your Admissions Roadmap\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eNow\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eProfile confirmed, goals set, briefings start tomorrow\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eThis week\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eI'll help you create your Open Evening event\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eSeptember\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eOpen Evening \u0026mdash; I'll track registrations and send reminders\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eOctober\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eSixth Form apps open \u0026mdash; I'll monitor applications daily\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eJan\u0026ndash;Mar\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eChase incompletes, LA offers, data collection\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"tw-chat-card-row\"\u003e\u003cspan class=\"tw-chat-card-row-label tw:text-body-s tw:leading-body-s\"\u003eJun\u0026ndash;Sep\u003c/span\u003e\u003cspan class=\"tw-chat-card-row-value tw:text-body-s tw:leading-body-s\"\u003eTaster days, Results Day, enrolment\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e"},{"from":"emma","notification":{"type":"highlight","title":"First Briefing Scheduled","message":"Your daily briefing is set for tomorrow at 8:00 AM. You'll get a summary of pending actions and upcoming deadlines."}}],"autoAdvance":{"goto":"briefing","delay":2000}},"briefing":{"messages":[{"raw":"\u003cdiv class=\"tw-chat-divider tw:mt-6\"\u003e\u003cdiv class=\"tw-chat-divider-line\"\u003e\u003c/div\u003e\u003cspan class=\"tw-chat-divider-label\"\u003eNext Morning \u0026middot; 8:00 AM\u003c/span\u003e\u003cdiv class=\"tw-chat-divider-line\"\u003e\u003c/div\u003e\u003c/div\u003e"},{"from":"emma","html":"Good morning, Sarah. Here's your first briefing \u0026mdash; based on what we set up yesterday.\u003cbr\u003e\u003cbr\u003e\u003cstrong\u003eComing up:\u003c/strong\u003e\u003cbr\u003e\u0026bull; Open Evening in 178 days \u0026mdash; event not yet created. Want me to help set it up?\u003cbr\u003e\u0026bull; Sixth Form apps open in 191 days \u0026mdash; your target is 40 external students\u003cbr\u003e\u0026bull; Tour 1 in 200 days (10 Oct) \u0026mdash; registration not yet open\u003cbr\u003e\u003cbr\u003e\u003cstrong\u003eYour Arbor sync:\u003c/strong\u003e\u003cbr\u003e\u0026bull; Last sync: today at 06:00 \u0026#10003;\u003cbr\u003e\u0026bull; 1,247 students on roll\u003cbr\u003e\u0026bull; 186 Year 11s \u0026mdash; relevant for your 100 retention target\u003cbr\u003e\u003cbr\u003e\u003cstrong\u003eYour priorities:\u003c/strong\u003e\u003cbr\u003e\u0026bull; Incomplete application chasing: ready to activate when apps open\u003cbr\u003e\u0026bull; SLT reports: auto-generation configured\u003cbr\u003e\u003cbr\u003e\u003cstrong\u003eToday:\u003c/strong\u003e No urgent actions. Your cycle ramps up in September."}],"chips":[{"label":"Set up Open Evening now","goto":"stub_setup_oe","recommended":true},{"label":"I'll do this later","goto":"stub_end"}]},"stub_setup_oe":{"echo":"Set up Open Evening now","messages":[{"from":"emma","html":"Great \u0026mdash; I'll walk you through it. Head to \u003cstrong\u003eEvents \u0026rarr; Create Event\u003c/strong\u003e and I'll guide you from there."}]},"stub_end":{"echo":"I'll do this later","messages":[{"from":"emma","html":"No problem. Everything you set up today is in \u003cstrong\u003eSettings \u0026rarr; Emma\u003c/strong\u003e whenever you're ready."}]}}}
        </script>
        <!-- Agent Left Sidebar (toggleable) -->
        <div class="tw:w-0 tw:border-r tw:border-neutral-translucent-200 tw:flex-shrink-0 tw:flex tw:flex-col tw:overflow-hidden tw:transition-all tw:duration-200 tw:bg-white"
             data-onboarding-conversation-target="sidebar">
          <div class="tw:w-[260px] tw:p-3">
            <h3 class="tw-h6 tw:mb-3 tw:uppercase tw:text-neutral-500">All Chats</h3>
            <div class="tw:flex tw:flex-col tw:gap-0.5">
              <div class="tw:px-3 tw:py-2 tw:rounded-lg tw:bg-primary/10 tw:text-primary fw-semibold tw:text-body-s tw:leading-body-s">Onboarding Setup</div>
            </div>
          </div>
        </div>
        <!-- ===== LEFT: Chat Panel ===== -->
        <div class="tw:flex-1 tw:flex tw:flex-col tw:min-w-0 tw:bg-white">
          <!-- Chat Header (matching chat page pattern) -->
          <div class="tw:w-full tw:bg-white tw:border-b tw:border-neutral-translucent-200 tw:px-5 tw:pr-3 tw:py-3 tw:overflow-hidden tw:transition-all tw:duration-200 tw:max-h-16 tw:opacity-100 tw:flex tw:items-center tw:gap-2 tw:shrink-0">
            <h2 class="tw-h3 tw:mb-0">Onboarding with Emma</h2>
            <div class="tw:flex-1"></div>
            <button 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="Hide sidebar"
                    data-action="click->onboarding-conversation#toggleSidebar"
              data-onboarding-conversation-target="sidebarToggle">
              <i class="fa-regular fa-sidebar-flip"></i>
            </button>
          </div>
          <!-- Message Thread (scrollable, max-w-4xl centered like chat page) -->
          <div class="tw:flex-1 tw:overflow-y-auto tw:relative" role="log" aria-label="Conversation">
            <div class="tw:pt-3 tw:pb-5 tw:max-w-4xl tw:mx-auto tw:px-4">
              <div class="tw-chat-thread"
                   data-onboarding-conversation-target="thread">
                <!-- Messages injected here by onboarding-conversation controller -->
              </div>
            </div>
          </div>
          <!-- Thinking Indicator (Nucleus Ring) -->
          <div data-onboarding-conversation-target="typing" class="tw:hidden tw:pb-2 tw:max-w-4xl tw:mx-auto tw:px-4">
            <div class="tw:flex tw:gap-2.5 tw:items-center">
              <div class="tw:w-9 tw:h-9">
                <svg viewBox="0 0 40 40" class="tw:w-full tw:h-full">
                  <ellipse cx="20" cy="20" rx="16" ry="10" transform="rotate(0 20 20)"
                           class="tw:fill-none tw:stroke-primary nucleus-ring"/>
                  <ellipse cx="20" cy="20" rx="16" ry="10" transform="rotate(60 20 20)"
                           class="tw:fill-none tw:stroke-primary tw:opacity-60 nucleus-ring nucleus-ring-2"/>
                  <ellipse cx="20" cy="20" rx="16" ry="10" transform="rotate(120 20 20)"
                           class="tw:fill-none tw:stroke-primary tw:opacity-30 nucleus-ring nucleus-ring-3"/>
                </svg>
              </div>
              <span class="thinking-shimmer-label">Emma is thinking...</span>
            </div>
          </div>
          <!-- Input Area (matching chat page composer) -->
          <div class="tw:border-t tw:border-neutral-100 tw:shrink-0" data-onboarding-conversation-target="inputArea">
            <div class="tw:max-w-4xl tw:mx-auto tw:px-4 tw:py-3">
              <div class="tw-card tw-card-elevated tw:rounded-2xl tw:overflow-hidden">
                <!-- Chip options (rendered inside card by controller) -->
                <div data-onboarding-conversation-target="chipArea" class="tw:hidden"></div>
                <!-- Input row -->
                <div class="tw:flex tw:items-center tw-emma-input-container">
                  <textarea
                  name="emma-input"
                  class="tw-emma-input tw:transition-[height] tw:duration-200"
                  rows="1"
                  placeholder="Ask me anything or describe what you need..."
                  aria-label="Ask Emma"
                  disabled
                  data-onboarding-conversation-target="inputField"></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>
                  <!-- Right side -->
                  <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 class="tw-btn tw-btn-primary tw-btn-icon tw-btn-lg tw:opacity-40" type="button" aria-label="Send" disabled
                          data-onboarding-conversation-target="sendBtn"
                          data-controller="tooltip" data-tooltip-content-value="Send" data-tooltip-placement-value="top">
                      <i class="fa-regular tw-icon-16 fa-arrow-up"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- end chat panel -->
        <!-- ===== RIGHT: Activity Sidebar ===== -->
        <aside class="tw:w-[30%] tw:min-w-64 tw:max-w-96 tw:border-l tw:border-neutral-200 tw:bg-neutral-50 tw:flex tw:flex-col tw:shrink-0 tw:overflow-y-auto">
          <!-- Sidebar Header -->
          <div class="tw:flex tw:items-center tw:h-[44px] tw:bg-white tw:border-b tw:border-neutral-translucent-200 tw:px-4 tw:shrink-0">
            <h3 class="tw-h3 tw:mb-0">Onboarding Progress</h3>
          </div>
          <!-- Sidebar Content -->
          <div class="tw:flex-1 tw:overflow-y-auto tw:px-3 tw:py-3 tw:space-y-2">
            <!-- Setup Progress Card -->
            <div class="tw-card tw-card-flat tw:mb-2" data-onboarding-conversation-target="progressTracker">
              <div class="tw-card-body tw:py-3 tw:px-4">
                <h4 class="tw-h4 tw:mb-2">Setup Progress</h4>
                <!-- Progress bar -->
                <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
                  <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-semibold">Onboarding</span>
                  <span class="tw:text-body-xs tw:leading-body-xs tw:text-primary fw-bold" data-onboarding-conversation-target="progressPct">0%</span>
                </div>
                <div class="tw:bg-neutral-200 tw:h-1 tw:rounded-full tw:mb-3">
                  <div class="tw:bg-primary tw:h-full tw:rounded-full tw:transition-all tw:duration-500 tw:w-0" data-onboarding-conversation-target="progressBar"></div>
                </div>
                <!-- Steps -->
                <div class="tw:space-y-1.5">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-primary tw:flex tw:items-center tw:justify-center tw:shrink-0 tw:animate-pulse" data-onboarding-conversation-target="progressDot"></span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-primary fw-semibold" data-onboarding-conversation-target="progressStatus">Confirm account</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-neutral-200 tw:flex tw:items-center tw:justify-center tw:shrink-0" data-onboarding-conversation-target="progressDot"></span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600" data-onboarding-conversation-target="progressStatus">School profile</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-neutral-200 tw:flex tw:items-center tw:justify-center tw:shrink-0" data-onboarding-conversation-target="progressDot"></span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600" data-onboarding-conversation-target="progressStatus">Key dates</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-neutral-200 tw:flex tw:items-center tw:justify-center tw:shrink-0" data-onboarding-conversation-target="progressDot"></span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600" data-onboarding-conversation-target="progressStatus">Goals & targets</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <span class="tw:w-4 tw:h-4 tw:rounded-full tw:bg-neutral-200 tw:flex tw:items-center tw:justify-center tw:shrink-0" data-onboarding-conversation-target="progressDot"></span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600" data-onboarding-conversation-target="progressStatus">Preferences</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- School Info Card (builds live) -->
            <div class="tw-card tw-card-flat tw:mb-2">
              <div class="tw-card-body tw:py-3 tw:px-4">
                <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-2">
                  <i class="fa-regular fa-school tw:text-neutral-700 tw:text-body-s"></i>
                  <h4 class="tw-h4 tw:mb-0">School Info</h4>
                  <span class="tw:ml-auto tw:text-neutral-500 tw:cursor-pointer tw:hidden" data-onboarding-conversation-target="sidebarSection" data-section="editBtn"><i class="fa-regular fa-pen-to-square tw:text-body-xs"></i></span>
                </div>
                <div class="tw:space-y-0.5">
                  <div class="tw:flex tw:justify-between tw:items-baseline tw:py-0.5">
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">School</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900" data-onboarding-conversation-target="schoolInfo" data-field="school">Greenford College</span>
                  </div>
                  <div class="tw:flex tw:justify-between tw:items-baseline tw:py-0.5">
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">Type</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900" data-onboarding-conversation-target="schoolInfo" data-field="type">State Sec + 6F</span>
                  </div>
                  <div class="tw:flex tw:justify-between tw:items-baseline tw:py-0.5">
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">Contact</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900" data-onboarding-conversation-target="schoolInfo" data-field="contact">Sarah Mitchell</span>
                  </div>
                  <div class="tw:flex tw:justify-between tw:items-baseline tw:py-0.5">
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">MIS</span>
                    <span class="tw:text-[13px] tw:leading-[18px] tw:text-neutral-500 tw:italic" data-onboarding-conversation-target="schoolInfo" data-field="mis">not yet asked</span>
                  </div>
                  <div class="tw:flex tw:justify-between tw:items-baseline tw:py-0.5">
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">Students</span>
                    <span class="tw:text-[13px] tw:leading-[18px] tw:text-neutral-500 tw:italic" data-onboarding-conversation-target="schoolInfo" data-field="students">not yet asked</span>
                  </div>
                  <div class="tw:flex tw:justify-between tw:items-baseline tw:py-0.5">
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">Intakes</span>
                    <span class="tw:text-[13px] tw:leading-[18px] tw:text-neutral-500 tw:italic" data-onboarding-conversation-target="schoolInfo" data-field="intakes">not yet asked</span>
                  </div>
                  <div class="tw:flex tw:justify-between tw:items-baseline tw:py-0.5">
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">Team</span>
                    <span class="tw:text-[13px] tw:leading-[18px] tw:text-neutral-500 tw:italic" data-onboarding-conversation-target="schoolInfo" data-field="team">not yet asked</span>
                  </div>
                  <div class="tw:flex tw:justify-between tw:items-baseline tw:py-0.5">
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">Priority</span>
                    <span class="tw:text-[13px] tw:leading-[18px] tw:text-neutral-500 tw:italic" data-onboarding-conversation-target="schoolInfo" data-field="priority">not yet asked</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- Proactive Alert (hidden until complete) -->
            <div class="tw:hidden tw:mb-2" data-onboarding-conversation-target="sidebarSection" data-section="alert">
              <div class="tw:bg-orange-50 tw:border tw:border-orange-200 tw:border-l-2 tw:border-l-orange-500 tw:rounded-lg tw:p-3">
                <p class="tw:text-body-xs tw:leading-body-xs fw-semibold tw:text-orange-800 tw:mb-1">⚠️ Open Evening — no event created</p>
                <p class="tw:text-body-xs tw:leading-body-xs tw:text-orange-700 tw:mb-2">178 days away but not set up yet.</p>
                <div class="tw:flex tw:gap-2">
                  <button class="tw-btn tw-btn-primary tw-btn-sm" type="button" disabled>Set up now</button>
                  <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button" disabled>Later</button>
                </div>
              </div>
            </div>
            <!-- Timeline Card (hidden until dates complete) -->
            <div class="tw-card tw-card-flat tw:mb-2 tw:hidden" data-onboarding-conversation-target="sidebarSection" data-section="timeline">
              <div class="tw-card-body tw:py-3 tw:px-4">
                <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-2">
                  <i class="fa-regular fa-calendar tw:text-neutral-700 tw:text-body-s"></i>
                  <h4 class="tw-h4 tw:mb-0">Timeline</h4>
                </div>
                <div class="tw:space-y-0">
                  <div class="tw:flex tw:items-baseline tw:py-1 tw:border-b tw:border-neutral-100">
                    <span class="tw:text-body-xs tw:leading-body-xs fw-bold tw:text-neutral-700 tw:w-8 tw:shrink-0">SEP</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900 tw:flex-1">Open Evening</span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">178d</span>
                  </div>
                  <div class="tw:flex tw:items-baseline tw:py-1 tw:border-b tw:border-neutral-100">
                    <span class="tw:text-body-xs tw:leading-body-xs fw-bold tw:text-neutral-700 tw:w-8 tw:shrink-0">OCT</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900 tw:flex-1">Tour 1 · 6F Apps</span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">191d</span>
                  </div>
                  <div class="tw:flex tw:items-baseline tw:py-1 tw:border-b tw:border-neutral-100">
                    <span class="tw:text-body-xs tw:leading-body-xs fw-bold tw:text-neutral-700 tw:w-8 tw:shrink-0">NOV</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900 tw:flex-1">Tour 2 · 6F Open Eve</span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">233d</span>
                  </div>
                  <div class="tw:flex tw:items-baseline tw:py-1 tw:border-b tw:border-neutral-100">
                    <span class="tw:text-body-xs tw:leading-body-xs fw-bold tw:text-neutral-700 tw:w-8 tw:shrink-0">DEC</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900 tw:flex-1">Tour 3</span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">256d</span>
                  </div>
                  <div class="tw:flex tw:items-baseline tw:py-1 tw:border-b tw:border-neutral-100">
                    <span class="tw:text-body-xs tw:leading-body-xs fw-bold tw:text-neutral-700 tw:w-8 tw:shrink-0">JAN</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900 tw:flex-1">6F Apps close</span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">313d</span>
                  </div>
                  <div class="tw:flex tw:items-baseline tw:py-1">
                    <span class="tw:text-body-xs tw:leading-body-xs fw-bold tw:text-neutral-700 tw:w-8 tw:shrink-0">MAR</span>
                    <span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900 tw:flex-1">National Offer Day</span>
                    <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">342d</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- Goals Dashboard (hidden until goals complete) -->
            <div class="tw-card tw-card-flat tw:mb-2 tw:hidden" data-onboarding-conversation-target="sidebarSection" data-section="goals">
              <div class="tw-card-body tw:py-3 tw:px-4">
                <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-2">
                  <i class="fa-regular fa-bullseye-arrow tw:text-neutral-700 tw:text-body-s"></i>
                  <h4 class="tw-h4 tw:mb-0">Goals</h4>
                </div>
                <div class="tw:space-y-2.5">
                  <div>
                    <div class="tw:flex tw:justify-between tw:items-baseline"><span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900">Year 7</span><span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">0/180</span></div>
                    <div class="tw:bg-neutral-200 tw:h-1 tw:rounded-full tw:mt-1">
                      <div class="tw:bg-primary tw:h-full tw:rounded-full tw:w-0"></div>
                    </div>
                    <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-0 tw:mt-0.5">● Not started — cycle opens Sep</p>
                  </div>
                  <div>
                    <div class="tw:flex tw:justify-between tw:items-baseline"><span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900">6F External ⭐</span><span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">0/40</span></div>
                    <div class="tw:bg-neutral-200 tw:h-1 tw:rounded-full tw:mt-1">
                      <div class="tw:bg-primary tw:h-full tw:rounded-full tw:w-0"></div>
                    </div>
                    <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-0 tw:mt-0.5">● Apps open 1 Oct — growth priority</p>
                  </div>
                  <div>
                    <div class="tw:flex tw:justify-between tw:items-baseline"><span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900">Open Evening</span><span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">0/250</span></div>
                    <div class="tw:bg-neutral-200 tw:h-1 tw:rounded-full tw:mt-1">
                      <div class="tw:bg-orange-500 tw:h-full tw:rounded-full tw:w-0"></div>
                    </div>
                    <p class="tw:text-body-xs tw:leading-body-xs tw:text-orange-700 fw-semibold tw:mb-0 tw:mt-0.5">⚠ Event not yet created — 178 days</p>
                  </div>
                  <div>
                    <div class="tw:flex tw:justify-between tw:items-baseline"><span class="tw:text-[13px] tw:leading-[18px] fw-semibold tw:text-neutral-900">Tours</span><span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">0/45</span></div>
                    <div class="tw:bg-neutral-200 tw:h-1 tw:rounded-full tw:mt-1">
                      <div class="tw:bg-primary tw:h-full tw:rounded-full tw:w-0"></div>
                    </div>
                    <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-0 tw:mt-0.5">● First tour: 10 Oct</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- Briefing Preview (hidden until complete) -->
            <div class="tw:hidden tw:mb-2" data-onboarding-conversation-target="sidebarSection" data-section="briefing">
              <div class="tw:bg-blue-50 tw:border tw:border-blue-200 tw:rounded-lg tw:p-3">
                <p class="tw:text-[13px] tw:leading-[18px] fw-bold tw:text-blue-600 tw:uppercase tw:tracking-wider tw:mb-1">Tomorrow · 8:00 AM</p>
                <p class="tw:text-body-xs tw:leading-body-xs tw:text-blue-800 tw:mb-0">Your first daily briefing will include Open Evening status, Arbor sync check, and 6F external tracking.</p>
              </div>
            </div>
            <!-- Activity Feed (always visible at bottom of progress tab) -->
            <div data-onboarding-conversation-target="feedContainer">
            </div>
            <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:italic tw:text-center tw:mt-2" data-onboarding-conversation-target="feedEmpty">Activity will appear as you progress...</p>
          </div>
          <!-- end sidebar content -->
        </aside>
      </div>
    </div>
  </main>
</div>
<!-- Transition Script: Staggered Entrance + Welcome → Chat -->
<script>
  // Staggered entrance on load
  document.addEventListener('DOMContentLoaded', function() {
    var elements = ['welcome-hero', 'welcome-bubble', 'welcome-cta', 'welcome-tags']
    elements.forEach(function(id, i) {
      setTimeout(function() {
        var el = document.getElementById(id)
        if (el) {
          el.classList.remove('tw:opacity-0', 'tw:translate-y-4')
        }
      }, i * 200)
    })
  })
  // Smooth collapse transition to chat
  document.getElementById('start-onboarding-btn').addEventListener('click', function() {
    var welcomeWrapper = document.getElementById('welcome-wrapper')
    var chat = document.getElementById('chat-screen')
    // Set explicit maxHeight for smooth collapse
    welcomeWrapper.style.maxHeight = welcomeWrapper.scrollHeight + 'px'
    welcomeWrapper.style.overflow = 'hidden'
    welcomeWrapper.style.transition = 'max-height 500ms ease, opacity 400ms ease'
    requestAnimationFrame(function() {
      welcomeWrapper.style.maxHeight = '0'
      welcomeWrapper.style.opacity = '0'
    })
    welcomeWrapper.addEventListener('transitionend', function handler(e) {
      if (e.propertyName !== 'max-height') return
      welcomeWrapper.removeEventListener('transitionend', handler)
      welcomeWrapper.classList.add('tw:hidden')
      welcomeWrapper.style.maxHeight = ''
      welcomeWrapper.style.overflow = ''
      welcomeWrapper.style.transition = ''
      welcomeWrapper.style.opacity = ''
      chat.classList.remove('tw:hidden')
      requestAnimationFrame(function() {
        chat.classList.remove('tw:opacity-0')
      })
    }, { once: false })
  })
</script>
<style>
  /* Token streaming cursor */
  .tw-chat-bubble .streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    animation: cursor-blink 0.6s infinite;
    vertical-align: text-bottom;
    margin-left: 1px;
  }
  @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
  /* Nucleus ring thinking indicator */
  .nucleus-ring {
    stroke-width: 1.5;
    stroke-dasharray: 60 200;
    animation: nucleus-spin 2s linear infinite;
  }
  .nucleus-ring-2 { animation-delay: -0.7s; }
  .nucleus-ring-3 { animation-delay: -1.4s; }
  @keyframes nucleus-spin {
    0% { stroke-dashoffset: 0; opacity: 0; }
    30%, 70% { opacity: 1; }
    100% { stroke-dashoffset: 260; opacity: 0; }
  }
  .thinking-shimmer-label {
    font-size: var(--tw-font-size-body-xs);
    line-height: var(--tw-line-height-body-xs);
    background: linear-gradient(90deg, #888 0%, #ccc 50%, #888 100%);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: thinking-shimmer 1.6s linear infinite;
  }
  @keyframes thinking-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  /* Status badges */
  .onboarding-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--tw-font-size-body-xs);
    line-height: var(--tw-line-height-body-xs);
    color: var(--tw-color-neutral-600);
    background: var(--tw-color-neutral-100);
    border: 1px solid var(--tw-color-neutral-200);
    padding: 0.2rem 0.75rem;
    border-radius: 1rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s, transform 0.2s;
  }
  .onboarding-status-badge.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .onboarding-status-badge .badge-check {
    color: var(--tw-color-green-500);
    font-weight: 600;
  }
  /* Textarea auto-resize */
  .tw-emma-input {
    field-sizing: content;
    min-height: 1lh;
    max-height: 10lh;
  }
  /* Prototype: onboarding pick-card preferences (steps 9–11) */
  .onb-card-inner { padding: 10px 14px 14px; }
  .onb-context-note { background: #f8f9fc; border: 1px solid #e2e6ed; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #6b7a99; margin-bottom: 10px; line-height: 1.5; }
  .onb-context-note strong { color: #374151; }
  .onb-pick-list { display: flex; flex-direction: column; gap: 6px; }
  .onb-pick-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e2e6ed; border-radius: 8px; width: 100%; text-align: left; background: #fff; cursor: pointer; }
  .onb-pick-card:hover { border-color: #c7d2fe; background: #f0f4ff; }
  .onb-pick-icon { font-size: 18px; flex-shrink: 0; }
  .onb-pick-body { flex: 1; }
  .onb-pick-title { display: block; font-size: 13px; font-weight: 600; color: #1a2235; }
  .onb-pick-desc { display: block; font-size: 12px; color: #6b7a99; margin-top: 2px; }
  .onb-pick-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #d1d5db; flex-shrink: 0; }
  .onb-recommended { font-size: 10px; font-weight: 500; color: #4f6af0; background: #eef2ff; border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
  .onb-skip-row { margin-top: 10px; display: flex; justify-content: center; }
  .onb-skip-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 99px; border: 1px solid #e2e6ed; background: #fafafa; color: #9aaac2; font-size: 12px; font-style: italic; cursor: pointer; }
</style>