<style>
  /* Composer flash animation — prototype-only, not in emma.css */
  @keyframes composer-flash {
    0%, 100% { box-shadow: none; }
    20%, 80% { box-shadow: 0 0 0 4px var(--tw-color-primary-300); }
  }
  .composer-flash {
    animation: composer-flash 0.6s ease;
  }
  /* ── Screen 0 digest redesign ─────────────────────────────── */
  /* NOTE: @apply does not work in ERB <style> blocks — raw CSS only */
  /* White cards */
  .s0-digest-card {
    background-color: white;
    border: 1px solid var(--tw-color-neutral-200);
    border-radius: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }
  .s0-digest-card-title {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--tw-color-primary);
    margin-bottom: 0.5rem;
  }
  /* Stat change/context line (third line under value + label) */
  .s0-stat-change {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    margin-top: 0.125rem;
  }
  .s0-stat-change-up   { color: var(--tw-color-green-800); }
  .s0-stat-change-warn { color: var(--tw-color-orange-800); }
  /* Needs Attention hover subtext — grid-template-rows animation */
  .s0-att-sub-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.15s ease;
  }
  .tw-emma-digest-att-item:hover .s0-att-sub-wrap {
    grid-template-rows: 1fr;
  }
  .s0-att-sub {
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--tw-color-neutral-700);
    font-weight: 400;
    margin-top: 0.125rem;
    opacity: 0;
    transition: opacity 150ms;
  }
  .tw-emma-digest-att-item:hover .s0-att-sub {
    opacity: 1;
  }
  /* Digest item hover and selected states */
  .tw-emma-digest-snap-item:hover,
  .tw-emma-digest-att-item:hover,
  .tw-emma-digest-goal-row:hover {
    background-color: var(--tw-color-neutral-100);
    cursor: pointer;
    border-radius: 0.375rem;
  }
  .tw-emma-digest-snap-item.tw-emma-digest-att-item-active,
  .tw-emma-digest-att-item.tw-emma-digest-att-item-active,
  .tw-emma-digest-goal-row.tw-emma-digest-att-item-active {
    background-color: var(--tw-color-neutral-200);
  }
  /* Goal Tracker value colours */
  .s0-goal-value-warn { color: var(--tw-color-orange-800); font-weight: 600; }
  .s0-goal-value-good { color: var(--tw-color-green-800); font-weight: 600; }
  /* Balance text size with Pipeline Snapshot — body-s (14px) instead of body-xs (12px) */
  .s0-digest-card .tw-emma-digest-att-text {
    font-size: var(--tw-font-size-body-s);
    line-height: var(--tw-line-height-body-s);
  }
  .s0-digest-card .tw-emma-digest-goal-label {
    font-size: var(--tw-font-size-body-s);
    line-height: var(--tw-line-height-body-s);
    color: var(--tw-color-neutral-700);
  }
  .s0-digest-card .tw-emma-digest-goal-value {
    font-size: var(--tw-font-size-body-s);
    line-height: var(--tw-line-height-body-s);
  }
  /* Progress bar fills — neutral palette */
  .s0-digest-card .tw-emma-digest-goal-fill,
  .s0-digest-card .tw-emma-digest-goal-fill.tw-emma-digest-goal-fill-good {
    background: var(--tw-color-neutral-500);
  }
  /* Conversation body matches the app background — eliminates white/grey contrast break */
  /* ── Screen transition animations ─────────────────────────── */
  @keyframes emma-screen-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; pointer-events: none; }
  }
  @keyframes emma-screen-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .emma-screen-exiting {
    animation: emma-screen-fade-out 0.15s ease forwards;
  }
  .emma-screen-entering {
    animation: emma-screen-fade-in 0.2s ease forwards;
  }
  .emma-thinking-exiting {
    opacity: 0;
    transition: opacity 150ms ease;
  }
  /* ── Chat header search input ──────────────────────────────── */
  #agent-content-header .tw-form-control[type="search"] {
    border: none;
    box-shadow: none;
    padding-right: 0;
    transition: max-width 0.2s ease, opacity 0.2s ease;
  }
  #agent-content-header .tw-form-control[type="search"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--tw-color-primary-300);
  }
  /* Feedback buttons — only visible on message hover */
  .tw-agent-chat-msg .tw-agent-chat-feedback {
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .tw-agent-chat-msg:hover .tw-agent-chat-feedback {
    opacity: 1;
  }
  /* Priority card — left accent border for emma chat response cards */
  .emma-priority-card {
    border-left: 3px solid var(--tw-color-primary);
    border-radius: 0 var(--tw-radius-md) var(--tw-radius-md) 0;
  }
  /* Chat header — override h2 margin-bottom from .tw-h5 component */
  #agent-content-header h2 {
    margin-bottom: 0;
  }
  /* ── KPI tile tooltips ─────────────────────────────────────── */
  #s1-digest-strip .tw\:rounded-lg {
    position: relative;
    overflow: visible;
    cursor: pointer;
  }
  #s1-digest-strip .tw\:rounded-lg:hover {
    outline: 1.5px solid var(--tw-color-neutral-400);
    outline-offset: 0;
  }
  #s1-digest-strip .tw\:rounded-lg:hover .kpi-tooltip { opacity: 1; }
  /* Tooltips render BELOW tiles (avoid overflow-y:auto clipping at top) */
  .kpi-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%; transform: translateX(-50%);
    background: var(--tw-color-neutral-950);
    border-radius: 7px;
    padding: 8px 10px;
    width: 180px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 200;
    box-shadow: var(--tw-shadow-md);
  }
  .kpi-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--tw-color-neutral-950);
  }
  .kpi-tooltip.kpi-tooltip-right {
    left: auto; right: 0; transform: none;
  }
  .kpi-tooltip.kpi-tooltip-right::after {
    left: auto; right: 12px; transform: none;
  }
  .kpi-tt-status { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--tw-color-neutral-50); }
  .kpi-tt-explain { font-size: 11px; color: var(--tw-color-neutral-200); line-height: 1.5; margin-bottom: 7px; }
  .kpi-tt-action {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--tw-color-blue-300);
    border-top: 1px solid var(--tw-color-neutral-translucent-200);
    padding-top: 6px;
  }
  /* ── Goal tile tooltips ────────────────────────────────────── */
  .goal-progress-bar {
    height: 3px;
    background: var(--tw-color-neutral-200);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    margin-top: 4px;
  }
  .goal-progress-fill { height: 100%; width: var(--fill); }
  .goal-progress-fill.warn,
  .goal-progress-fill.good { background: var(--tw-color-neutral-500); }
  #s1-digest-strip .tw\:grid-cols-3 .tw\:rounded-lg {
    position: relative;
    overflow: visible;
    cursor: pointer;
    padding-bottom: 0;
  }
  #s1-digest-strip .tw\:grid-cols-3 .tw\:rounded-lg:hover {
    outline: 1.5px solid var(--tw-color-neutral-400);
  }
  #s1-digest-strip .tw\:grid-cols-3 .tw\:rounded-lg:hover .goal-tooltip-inner { opacity: 1; }
  /* Goal tooltips also render below */
  .goal-tooltip-inner {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%; transform: translateX(-50%);
    background: var(--tw-color-neutral-950);
    border-radius: 7px;
    padding: 8px 10px;
    width: 148px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 200;
    box-shadow: var(--tw-shadow-md);
  }
  .goal-tooltip-inner::after {
    content: '';
    position: absolute;
    bottom: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--tw-color-neutral-950);
  }
  /* act-action-badge replaced with tw-badge tw-badge-warning-subtle tw-badge-sm */
  /* ── History tab ───────────────────────────────────────────── */
  .history-new-chat {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 100%; padding: 7px 12px;
    font-size: 12px; font-weight: 600; color: var(--tw-color-primary-700);
    background: var(--tw-color-primary-100); border: 1px solid var(--tw-color-primary-200);
    border-radius: 7px; cursor: pointer; margin-bottom: 8px;
    transition: background 0.1s;
  }
  .history-new-chat:hover { background: var(--tw-color-primary-200); }
  .history-date-group {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--tw-color-neutral-400);
    padding: 8px 0 4px;
  }
  .history-date-group:first-of-type { padding-top: 0; }
  /* Emma Settings footer — DS-aligned, custom CSS removed */
  /* ── Activity sidebar state machine ─────────────────────────── */
  #agent-activity-sidebar {
    transition-property: width;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 280ms;
    background-color: var(--tw-color-neutral-100);
    position: relative;
  }
  /* Strip overlay — visible only when sidebar is in CHAT state (48px) */
  .act-strip {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms 120ms;
    z-index: 2;
    background-color: var(--tw-color-neutral-100);
    border-left: 1px solid var(--tw-color-neutral-translucent-200);
  }
  #agent-activity-sidebar.act-is-strip .act-strip {
    opacity: 1;
    pointer-events: auto;
  }
  /* Hide full content behind the strip to prevent bleed-through */
  #agent-activity-sidebar.act-is-strip .tw-agent-activity-sidebar-content,
  #agent-activity-sidebar.act-is-strip #act-settings-footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms;
  }
  /* New activity item — brief highlight fade in */
  @keyframes actHighlight {
    0%, 25% { background-color: rgba(37, 58, 106, 0.06); }
    100%     { background-color: transparent; }
  }
  .act-aitem-new {
    animation: actHighlight 2.5s ease forwards;
    border-radius: 6px;
    padding: 2px 4px;
    margin: 0 -4px;
  }
  /* Running dot animation */
  @keyframes actDotPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
  .act-dot-run { animation: actDotPulse 1s infinite; }
  /* Strip activity icon pulse animation */
  @keyframes actStripPulse {
    0%, 100% { color: var(--tw-color-neutral-500); background: transparent; }
    50% { color: var(--tw-color-neutral-800); background: var(--tw-color-neutral-200); }
  }
  .act-strip-pulsing {
    animation: actStripPulse 1.2s ease-in-out infinite;
  }
  /* ── Sidebar neutral palette overrides ── */
  /* Strip button hover — neutral instead of primary blue */
  .act-strip .tw-btn-tertiary:hover {
    background-color: var(--tw-color-neutral-200);
    color: var(--tw-color-neutral-800);
    box-shadow: none;
  }
  /* Active strip icon */
  .act-strip-active {
    background-color: var(--tw-color-neutral-200) !important;
    color: var(--tw-color-neutral-900) !important;
  }
  /* Tab active — neutral underline instead of primary */
  #agent-activity-sidebar .tw-tab.tw-active {
    color: var(--tw-color-neutral-900);
    border-bottom-color: var(--tw-color-neutral-800);
  }
  #agent-activity-sidebar .tw-tab:not(.tw-active):hover {
    color: var(--tw-color-neutral-700);
  }
</style>
<div data-controller="sidebar" id="emma-two-root">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
      <!-- Insights -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="insights"
        data-label="Insights"
        aria-expanded="false">
        <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
        <span class="tw:sr-only">Insights</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Parents & Enquiries -->
      <button type="button"
            class="tw-sidebar-item tw-active"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="parents"
        data-label="Parents & Enquiries"
        aria-expanded="false">
        <i class="fa-light fa-user-group tw-sidebar-icon"></i>
        <span class="tw:sr-only">Parents & Enquiries</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Communications & Events -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="communications"
        data-label="Communications & Events"
        aria-expanded="false">
        <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
        <span class="tw:sr-only">Communications & Events</span>
      </button>
      <!-- Registered Students -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="students"
        data-label="Registered Students"
        aria-expanded="false">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Registered Students</span>
      </button>
      <!-- Marketing -->
      <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
      <!-- Enrolments -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="enrolments"
        data-label="Enrolments"
        aria-expanded="false">
        <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
        <span class="tw:sr-only">Enrolments</span>
      </button>
      <!-- Applicaa Futures -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="applicaafutures"
        data-label="Applicaa Futures"
        aria-expanded="false">
        <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
        <span class="tw:sr-only">Applicaa Futures</span>
      </button>
      <!-- Data -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="data"
        data-label="Data"
        aria-expanded="false">
        <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
        <span class="tw:sr-only">Data</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
      </button>
      <!-- Manage Users -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="manageusers"
        data-label="Manage Users"
        aria-expanded="false">
        <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
        <span class="tw:sr-only">Manage Users</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
      </button>
      <!-- Platform Essentials -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="essentials"
        data-label="Platform Essentials"
        aria-expanded="false">
        <i class="fa-light fa-bell tw-sidebar-icon"></i>
        <span class="tw:sr-only">Platform Essentials</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</span>
      </button>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="settings"
        data-label="Settings"
        aria-expanded="false">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </button>
    </div>
  </aside>
  <!-- Parents & Enquiries Drawer -->
  <div class="tw-sidebar-drawer tw-open"
     data-sidebar-target="drawer"
     data-drawer-id="parents"
     aria-label="Parents & Enquiries navigation">
    <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Parents</span>
      </a>
      <a href="#" class="tw-drawer-item tw-active">
        <span class="tw-drawer-item-label">Enquiries</span>
      </a>
    </nav>
  </div>
  <!-- Insights Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="insights"
     aria-label="Insights navigation">
    <div class="tw-sidebar-drawer-header">INSIGHTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Summary</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Pipeline</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Map view</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Feeder schools</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Events</span>
      </a>
    </nav>
  </div>
  <!-- Registered Students Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="students"
     aria-label="Registered Students navigation">
    <div class="tw-sidebar-drawer-header">REGISTERED STUDENTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Incomplete</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Awaiting Reference
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Completed
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Withdrawn</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Deadline Missed</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Skipped Payment</span>
      </a>
    </nav>
  </div>
  <!-- Enrolments Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="enrolments"
     aria-label="Enrolments navigation">
    <div class="tw-sidebar-drawer-header">BULK ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="/lookbook/preview/projects/enrolment/bulk_enrolment" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Bulk Enrolment</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">
      ENROLMENT
      <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive tw:normal-case"
          data-controller="demo"
          data-action="click->demo#show"
        data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
        data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
        data-demo-learn-more="https://helpdesk.applicaa.com/">
        <i class="fa-regular fa-clapperboard-play"></i>
        Demo
      </span>
    </div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Details to be checked</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Ready to Enrol</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolled</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Waiting</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Activities</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">REPORT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Report</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">POST ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">CTF/File Request</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Transition Tool</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Sorting Hat</span>
      </a>
    </nav>
  </div>
  <!-- Applicaa Futures Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="applicaafutures"
     aria-label="Applicaa Futures navigation">
    <div class="tw-sidebar-drawer-header">APPLICAA FUTURES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">One Reference</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Destination Tracker</span>
      </a>
    </nav>
  </div>
  <!-- Data Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="data"
     aria-label="Data navigation">
    <div class="tw-sidebar-drawer-header">DATA</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Import</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Export
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Uploaded Files</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          First Media Applications
          <span class="tw-badge tw-badge-danger tw-badge-sm">182</span>
        </span>
      </a>
    </nav>
  </div>
  <!-- Manage Users Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="manageusers"
     aria-label="Manage Users navigation">
    <div class="tw-sidebar-drawer-header">MANAGE USERS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Manually Add People</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Students
          <span class="tw-badge tw-badge-danger tw-badge-sm">211</span>
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Agencies
          <span class="tw-badge tw-badge-danger tw-badge-sm">7</span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Duplicate Contacts</span>
      </a>
    </nav>
  </div>
  <!-- Platform Essentials Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="essentials"
     aria-label="Platform Essentials navigation">
    <div class="tw-sidebar-drawer-header">PLATFORM ESSENTIALS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Applicaa Journey
          <span class="tw-badge tw-badge-danger tw-badge-sm">13</span>
        </span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Product Requests & Updates</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Feature Requests</a>
        <a href="#" class="tw-drawer-subitem">Road Map</a>
        <a href="#" class="tw-drawer-subitem">Vote</a>
        <a href="#" class="tw-drawer-subitem">Recent Updates</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Time Saved With Admissions+</span>
      </a>
    </nav>
  </div>
  <!-- Communications & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="communications"
     aria-label="Communications & Events navigation">
    <div class="tw-sidebar-drawer-header">COMMUNICATIONS & EVENTS</div>
    <nav class="tw-drawer-nav">
      <!-- Communications Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Communications
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Manual Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Automated Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Scheduled Messages
        </a>
        <a href="#" class="tw-drawer-subitem">Message Summary</a>
      </div>
      <!-- Meetings (single item) -->
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Meetings
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <!-- Events Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Events
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Event Calendar</a>
        <a href="#" class="tw-drawer-subitem">Event Guests</a>
        <a href="#" class="tw-drawer-subitem">Event Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Event Forms</a>
      </div>
      <!-- Taster Day Section (expandable with secondary color) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Taster Day
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Taster Day Configuration</a>
        <a href="#" class="tw-drawer-subitem">Student Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Marketing & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="marketing"
     aria-label="Marketing & Events navigation">
    <div class="tw-sidebar-drawer-header">MARKETING & EVENTS</div>
    <nav class="tw-drawer-nav">
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Marketing Campaigns</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Campaigns</a>
        <a href="#" class="tw-drawer-subitem">Reports</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Workflows</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Emails</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Manual Emails</a>
        <a href="#" class="tw-drawer-subitem">Automated Emails</a>
        <a href="#" class="tw-drawer-subitem">Email Templates</a>
      </div>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Notifications</span>
      </a>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">SMS</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Meeting</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Events</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Calendar</a>
        <a href="#" class="tw-drawer-subitem">Guests</a>
        <a href="#" class="tw-drawer-subitem">Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Forms</a>
      </div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Taster Day</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Configurations</a>
        <a href="#" class="tw-drawer-subitem">Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Settings Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="settings"
     aria-label="Settings navigation">
    <div class="tw-sidebar-drawer-header">SETTINGS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Application Form</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Subject Options</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Form Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">School Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Settings</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Navigator</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Properties</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Security</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    </nav>
  </div>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- Context Dropdown -->
      <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
        <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">2024/2025 - Year 12 Sixth Form 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-h-screen-offset tw:overflow-y-auto" id="emma-main">
    <!-- ===== SCREEN 0: Homepage ===== -->
    <div id="screen-0" class="tw:bg-white tw:min-h-full tw:flex tw:flex-col tw:items-center tw:justify-start tw:py-8">
      <div class="tw:w-full tw:max-w-4xl tw:mx-auto tw:px-4 tw:flex tw:flex-col tw:items-center">
        <!-- Greeting -->
        <div class="tw:text-center tw:mb-8">
          <div class="tw-avatar tw-avatar-primary tw-avatar-xl tw:mx-auto tw:mb-5" role="img" aria-label="Emma, Online">
            <span>E</span>
            <span class="tw-avatar-status tw-avatar-status-online"><span class="tw:sr-only">Online</span></span>
          </div>
          <h1 class="tw-text-display tw:mb-2">Good morning, Olga.</h1>
          <p id="s0-briefing" class="tw:text-neutral-500 tw:text-body-m tw:leading-body-m tw:mb-0">Your Year 12 admissions are on track for today.</p>
        </div>
        <!-- Composer -->
        <div class="tw:w-full tw:mb-6">
          <div id="composer" class="tw-card tw-card-elevated tw:rounded-2xl tw:overflow-hidden tw:cursor-text">
            <!-- Input (first) -->
            <textarea id="s0-composer-input" class="tw-emma-input tw:w-full tw:block"
            placeholder="Ask Emma anything about your admissions pipeline…"
            rows="3"></textarea>
            <!-- Toolbar (bottom) -->
            <div id="composer-toolbar" class="tw:flex tw:items-center tw:gap-0 tw:p-2 tw:pt-0.5">
              <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Attach file">
                <i class="fa-regular fa-paperclip"></i>
              </button>
              <!-- source tags injected here by JS -->
              <div id="toolbar-spacer" class="tw:flex-1"></div>
              <div class="tw:flex tw:items-center tw:gap-2">
                <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Voice input">
                  <i class="fa-regular fa-microphone"></i>
                </button>
                <button id="s0-composer-send" class="tw-btn tw-btn-primary tw-btn-icon tw-btn-lg" type="button" aria-label="Send" disabled>
                  <i class="fa-regular fa-arrow-up"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Suggestion Box — tabbed area categories + contextual prompts -->
        <div id="suggestion-box" class="tw:w-full tw:mb-8 tw:overflow-hidden tw:transition-all tw:duration-200">
          <div class="tw:flex tw:flex-col tw:justify-center tw:gap-2 tw:px-2.5">
            <span class="tw:text-neutral-500 tw:font-medium tw:w-full tw:text-center tw:mb-1">I can help you with</span>
            <div class="tw:flex tw:gap-2 tw:flex-wrap tw:justify-center tw:items-center">
              <button id="s0-priorities-tab"
                    class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary tw-tag-interactive"
                    type="button">Priorities</button>
              <span class="tw:inline-block tw:w-px tw:h-5 tw:bg-neutral-200 tw:mx-1 tw:self-center" aria-hidden="true"></span>
              <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="events">
                Events
              </button>
              <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="meetings">
                Meetings
              </button>
              <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="leads">
                Leads
              </button>
              <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="enrolment">
                Enrolment
              </button>
              <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="communications">
                Communications
              </button>
              <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="insights">
                Insights
              </button>
              <button class="tw-tag tw:justify-center tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive" type="button" data-area="migration">
                Migration
              </button>
            </div>
          </div>
          <div id="s0-prompts-container" class="tw:p-2 tw:mt-2 tw:transition-opacity tw:duration-75 tw:opacity-0 tw:hidden">
            <ul id="s0-suggested-prompts"></ul>
          </div>
          <div id="s0-digest-panel" class="tw:w-full tw:mt-3 tw:transition-opacity tw:duration-75">
            <div class="tw:grid tw:grid-cols-3 tw:gap-4">
              <!-- Pipeline Snapshot -->
              <div class="s0-digest-card">
                <div class="s0-digest-card-title">Pipeline Snapshot</div>
                <div class="tw-emma-digest-snap">
                  <div class="tw-emma-digest-snap-item" role="button" tabindex="0"
                  aria-label="Ask Emma about enquiry trends"
                  data-prompt="Where are the 12 new enquiries this week coming from, and are there any I should prioritise?"
                  data-scenario="1"
                  data-source="Pipeline Snapshot">
                    <div class="tw-emma-digest-snap-value">247</div>
                    <div class="tw-emma-digest-snap-label">Enquiries</div>
                    <div class="s0-stat-change s0-stat-change-up">+12 this week</div>
                  </div>
                  <div class="tw-emma-digest-snap-item" role="button" tabindex="0"
                  aria-label="Ask Emma about new applications"
                  data-prompt="Which 8 applications came in this week — are they complete or do any need action from us?"
                  data-scenario="1"
                  data-source="Pipeline Snapshot">
                    <div class="tw-emma-digest-snap-value">189</div>
                    <div class="tw-emma-digest-snap-label">Applications</div>
                    <div class="s0-stat-change s0-stat-change-up">+8 this week</div>
                  </div>
                  <div class="tw-emma-digest-snap-item" role="button" tabindex="0"
                  aria-label="Ask Emma about offers target"
                  data-prompt="We're at 71% of our offers target — what's holding us back and what should I do to catch up?"
                  data-scenario="1"
                  data-source="Pipeline Snapshot">
                    <div class="tw-emma-digest-snap-value tw-emma-digest-snap-value-warn">142</div>
                    <div class="tw-emma-digest-snap-label">Offers Made</div>
                    <div class="s0-stat-change s0-stat-change-warn">71% of target</div>
                  </div>
                  <div class="tw-emma-digest-snap-item" role="button" tabindex="0"
                  aria-label="Ask Emma about acceptance rate"
                  data-prompt="Our acceptance rate is 69% — which families haven't responded to their offer yet and should I follow up with any of them?"
                  data-scenario="1"
                  data-source="Pipeline Snapshot">
                    <div class="tw-emma-digest-snap-value tw-emma-digest-snap-value-good">98</div>
                    <div class="tw-emma-digest-snap-label">Accepted</div>
                    <div class="s0-stat-change s0-stat-change-up">69% acceptance</div>
                  </div>
                </div>
              </div>
              <!-- Needs Attention -->
              <div class="s0-digest-card">
                <div class="s0-digest-card-title">Needs Attention Today</div>
                <div class="tw:flex tw:flex-col tw:gap-0.5">
                  <div class="tw-emma-digest-att-item" role="button" tabindex="0"
                  aria-label="Ask Emma about unanswered enquiries"
                  data-prompt="Show me the 4 unanswered enquiries — 2 are about A-Level Business, 1 BTEC Health & Social Care, 1 general — can you draft a reply for each one?"
                  data-scenario="1"
                  data-source="Needs Attention">
                    <div class="tw-emma-digest-att-dot"></div>
                    <div class="tw:flex tw:flex-col">
                      <span class="tw-emma-digest-att-text">4 enquiries unanswered >24h</span>
                      <div class="s0-att-sub-wrap">
                        <span class="s0-att-sub">2 A-Level Business · 1 BTEC Health · 1 general</span>
                      </div>
                    </div>
                  </div>
                  <div class="tw-emma-digest-att-item" role="button" tabindex="0"
                  aria-label="Ask Emma about missing GCSE predictions"
                  data-prompt="11 applications are missing GCSE predictions — deadline is 28 Mar and 6 are from partner schools we can chase directly. Can you draft reminders?"
                  data-scenario="1"
                  data-source="Needs Attention">
                    <div class="tw-emma-digest-att-dot"></div>
                    <div class="tw:flex tw:flex-col">
                      <span class="tw-emma-digest-att-text">11 apps missing GCSE predictions</span>
                      <div class="s0-att-sub-wrap">
                        <span class="s0-att-sub">Deadline 28 Mar · 6 from partner schools</span>
                      </div>
                    </div>
                  </div>
                  <div class="tw-emma-digest-att-item" role="button" tabindex="0"
                  aria-label="Ask Emma about open evening registrations"
                  data-prompt="Open evening is this Thursday — 62 registrations vs 78 last March. 34 families who enquired haven't signed up. Can you draft a reminder invite?"
                  data-scenario="1"
                  data-source="Needs Attention">
                    <div class="tw-emma-digest-att-dot"></div>
                    <div class="tw:flex tw:flex-col">
                      <span class="tw-emma-digest-att-text">Open evening Thu — 62/80 registered</span>
                      <div class="s0-att-sub-wrap">
                        <span class="s0-att-sub">Down on last March · 34 enquired families unregistered</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Goal Tracker -->
              <div class="s0-digest-card">
                <div class="s0-digest-card-title">Goal Tracker</div>
                <div class="tw:flex tw:flex-col tw:gap-2">
                  <div class="tw-emma-digest-goal-row" role="button" tabindex="0"
                  aria-label="Ask Emma about Year 12 applications target"
                  data-prompt="We're at 189 Year 12 applications against a target of 300 — what's a realistic forecast and what should I focus on this week to close the gap?"
                  data-scenario="1"
                  data-source="Goal Tracker">
                    <div class="tw-emma-digest-goal-header">
                      <span class="tw-emma-digest-goal-label">Year 12 applications</span>
                      <span class="tw-emma-digest-goal-value s0-goal-value-warn">189/300</span>
                    </div>
                    <div class="tw-emma-digest-goal-bar">
                      <div class="tw-emma-digest-goal-fill" style="--fill:63%"></div>
                    </div>
                  </div>
                  <div class="tw-emma-digest-goal-row" role="button" tabindex="0"
                  aria-label="Ask Emma about 24h response rate"
                  data-prompt="Which enquiries from the last 12 hours still need a reply — and are any assigned to staff who are out today?"
                  data-scenario="1"
                  data-source="Goal Tracker">
                    <div class="tw-emma-digest-goal-header">
                      <span class="tw-emma-digest-goal-label">24h response rate</span>
                      <span class="tw-emma-digest-goal-value s0-goal-value-good">92%</span>
                    </div>
                    <div class="tw-emma-digest-goal-bar">
                      <div class="tw-emma-digest-goal-fill tw-emma-digest-goal-fill-good" style="--fill:92%"></div>
                    </div>
                  </div>
                  <div class="tw-emma-digest-goal-row" role="button" tabindex="0"
                  aria-label="Ask Emma about offer acceptance rate"
                  data-prompt="Our acceptance rate is at 69% against an 85% target — can you show me the outstanding offers and help me understand why families might not be accepting?"
                  data-scenario="1"
                  data-source="Goal Tracker">
                    <div class="tw-emma-digest-goal-header">
                      <span class="tw-emma-digest-goal-label">Offer acceptance rate</span>
                      <span class="tw-emma-digest-goal-value s0-goal-value-warn">69%</span>
                    </div>
                    <div class="tw-emma-digest-goal-bar">
                      <div class="tw-emma-digest-goal-fill" style="--fill:69%"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /grid -->
          </div>
        </div>
      </div>
      <!-- /content-col -->
    </div>
    <!-- /SCREEN 0 -->
    <!-- ===== CHAT VIEW (hidden until scenario starts) ===== -->
    <div id="chat-view" class="tw:hidden tw:flex tw:h-full tw:w-full tw:items-stretch">
      <!-- Left column: header + thread + pinned chips + composer -->
      <div class="tw-agent-main-content tw:relative tw:flex-1">
        <!-- Content header — matches chat.html.erb reference -->
        <div id="agent-content-header"
             class="tw:w-full tw:bg-white tw:border-b tw:border-neutral-translucent-200
                    tw:px-5 tw:pr-3 tw:overflow-hidden tw:transition-all tw:duration-200
                    tw:h-14 tw:opacity-100 tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
          <h2 id="agent-content-title" class="tw-h3 tw:mb-0 tw:min-w-0 tw:truncate">Emma</h2>
          <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Rename this chat"
                  data-controller="tooltip" data-tooltip-content-value="Rename this chat">
            <i class="fa-regular fa-pen-to-square"></i>
          </button>
          <div class="tw:flex-1"></div>
          <!-- Expanding search — matches chat.html.erb -->
          <div class="tw-input-group tw-input-group-sm tw-has-icon-start tw:w-auto">
            <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
            <input type="search"
                   class="tw-form-control tw:w-[360px] tw:max-w-[24px] tw:focus:max-w-[360px]
                          tw:opacity-0 tw:focus:opacity-100 tw:cursor-pointer tw:focus:cursor-text"
                   placeholder="Search in this chat..."
                   aria-label="Search in this chat">
          </div>
          <button id="agent-new-chat-btn" class="tw-btn tw-btn-tertiary tw-btn-sm tw:whitespace-nowrap" type="button">
            <i class="fa-regular fa-plus"></i> New chat
          </button>
          <button id="agent-sidebar-toggle" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button"
                  aria-label="Hide sidebar" data-controller="tooltip" data-tooltip-content-value="Hide sidebar">
            <i class="fa-regular fa-sidebar-flip"></i>
          </button>
        </div>
        <!-- Scrollable conversation body -->
        <div id="agent-conversation-body"
             class="tw:w-full tw:flex tw:flex-col tw:flex-1 tw:overflow-y-auto tw:bg-white
                    tw:transition-all tw:duration-200">
          <div id="chat-thread-wrapper" class="tw:pt-6 tw:max-w-4xl tw:mx-auto tw:px-4 tw:w-full" role="log" aria-label="Conversation" aria-live="polite">
            <div id="chat-thread" class="tw-agent-chat-thread">
              <!-- Scenario messages injected by JS -->
            </div>
          </div>
        </div>
        <!-- Chat input area -->
        <div id="agent-main-input"
             class="tw:flex tw:w-full tw:flex-col tw:max-w-4xl tw:mx-auto tw:gap-4
                    tw:px-4 tw:absolute tw:bottom-0 tw:left-0 tw:right-0 tw:z-10 tw:pb-4">
          <div class="tw-card tw-card-elevated tw:rounded-2xl tw:overflow-hidden tw:w-full tw:cursor-text tw:bg-white">
            <!-- Pinned chips (shown for digest-entry scenarios) — inside card, above textarea -->
            <div id="chat-pinned-chips" class="tw:w-full tw:flex tw:flex-col tw:gap-1 tw:px-4 tw:pt-3 tw:pb-0 tw:hidden"
                 role="group" aria-label="Suggested follow-up actions" aria-live="polite">
              <!-- Chips injected by JS per scenario -->
            </div>
            <!-- Input row -->
            <div class="tw:flex tw:items-center tw-emma-input-container" id="emma-input-container">
              <textarea name="emma-input" id="s1-composer-input"
                        class="tw-emma-input tw:transition-[height] tw:duration-200"
                        rows="1"
                        placeholder="Ask me anything about admissions..."
                        aria-label="Ask Emma"></textarea>
            </div>
            <!-- Toolbar row -->
            <div id="s1-composer-toolbar" class="tw:flex tw:items-center tw:gap-0 tw:p-2 tw:pt-0.5">
              <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Attach file"
                      data-controller="tooltip" data-tooltip-content-value="Attach file" data-tooltip-placement-value="top">
                <i class="fa-regular tw-icon-16 fa-paperclip"></i>
              </button>
              <div class="tw:ml-auto tw:flex tw:items-center tw:gap-1">
                <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-lg" type="button" aria-label="Voice mode"
                        data-controller="tooltip" data-tooltip-content-value="Voice mode" data-tooltip-placement-value="top">
                  <i class="fa-regular tw-icon-16 fa-microphone"></i>
                </button>
                <button id="s1-composer-send" class="tw-btn tw-btn-primary tw-btn-icon tw-btn-lg" type="button"
                        aria-label="Send"
                        data-controller="tooltip" data-tooltip-content-value="Send" data-tooltip-placement-value="top"
                        disabled>
                  <i class="fa-regular tw-icon-16 fa-arrow-up"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Right column: Activity + Recent Chats sidebar -->
      <div id="agent-activity-sidebar" class="tw-agent-activity-sidebar tw:flex tw:flex-col" style="width: 360px;">
        <!-- Strip (visible in CHAT state — 48px wide) -->
        <div class="act-strip" id="act-strip" aria-hidden="true">
          <!-- Daily Digest -->
          <div class="tw:relative">
            <button id="act-strip-overview" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button"
                    aria-label="Open daily digest"
                    data-controller="tooltip" data-tooltip-content-value="Daily Digest" data-tooltip-placement-value="left">
              <i class="fa-regular fa-bell"></i>
            </button>
            <span class="tw:absolute tw:-top-1 tw:-right-1 tw:pointer-events-none tw:min-w-[14px] tw:h-[14px] tw:bg-neutral-700 tw:text-white tw:text-[8px] tw:font-bold tw:rounded-full tw:flex tw:items-center tw:justify-center tw:px-[3px]" aria-label="3 items need attention">3</span>
          </div>
          <!-- Recent Activity -->
          <button id="act-strip-activity" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button"
                  aria-label="Open recent activity"
                  data-controller="tooltip" data-tooltip-content-value="Recent Activity" data-tooltip-placement-value="left">
            <i class="fa-regular fa-list-check"></i>
          </button>
          <!-- Recent Chats -->
          <button id="act-strip-history" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button"
                  aria-label="Open recent chats"
                  data-controller="tooltip" data-tooltip-content-value="Recent Chats" data-tooltip-placement-value="left">
            <i class="fa-regular fa-clock-rotate-left"></i>
          </button>
          <!-- Emma Settings — pinned to bottom -->
          <a href="/lookbook/inspect/projects/agent/emma_settings"
             class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm tw:mt-auto tw:mb-2"
             aria-label="Emma Settings"
             data-controller="tooltip" data-tooltip-content-value="Emma Settings" data-tooltip-placement-value="top">
            <i class="fa-regular fa-sliders"></i>
          </a>
        </div>
        <!-- Full content (360px, hidden behind overflow when strip) -->
        <div data-controller="tabs" class="tw-agent-activity-sidebar-content tw:flex-1 tw:overflow-y-auto">
          <!-- Tab headers — tw:h-14 matches the content header height -->
          <div class="tw-tabs tw-tabs-justified tw-tabs-no-gap tw:h-14 tw:flex-shrink-0 tw:bg-neutral-100 tw:border-b tw:border-neutral-translucent-200" role="tablist">
            <button class="tw-tab tw-active" role="tab" data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown">
              <div class="tw:py-1">Overview</div>
            </button>
            <button class="tw-tab" role="tab" data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown">
              <div class="tw:py-1">History</div>
            </button>
          </div>
          <div class="tw-tab-content tw:mt-0">
            <!-- Tab 1: Activity -->
            <div class="tw-tab-panel tw-active" role="tabpanel" data-tabs-target="panel">
              <!-- Search -->
              <div class="tw:px-4 tw:pt-0 tw:pb-2">
                <div class="tw-input-group tw-has-icon-start">
                  <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
                  <input type="search" class="tw-form-control" placeholder="Search digest & activity..." aria-label="Search digest and activity">
                </div>
              </div>
              <!-- Daily Digest header — title left, timestamp right on same row -->
              <div class="tw:flex tw:items-center tw:justify-between tw:px-4 tw:pt-2 tw:pb-0 tw:mb-2">
                <p class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900 tw:mb-0">Daily Digest</p>
                <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-400 tw:mb-0">Last updated 8:30 am</p>
              </div>
              <!-- Compact digest strip -->
              <div class="tw:px-4 tw:pb-2" id="s1-digest-strip">
                <!-- 2×2 KPI grid -->
                <div class="tw:grid tw:grid-cols-2 tw:gap-2 tw:mb-2">
                  <div class="tw:bg-white tw:shadow-sm tw:rounded-lg tw:p-2 tw:cursor-pointer" role="button" tabindex="0"
                       data-prompt="Where are the 12 new enquiries this week coming from, and are there any I should prioritise?">
                    <div class="kpi-tooltip">
                      <div class="kpi-tt-status g">247 enquiries · +12 this week</div>
                      <div class="kpi-tt-explain">Open day (5) · website form (4) · prospectus requests (2) · referral (1)</div>
                      <div class="kpi-tt-action">See source breakdown <i class="fa-regular fa-arrow-up-right-from-square"></i></div>
                    </div>
                    <div class="tw:text-body-xs tw:text-neutral-600 tw:mb-0.5">Enquiries</div>
                    <div class="tw:flex tw:items-baseline tw:justify-between">
                      <span class="tw:text-body-l tw:font-semibold tw:text-neutral-900">247</span>
                      <span class="tw:text-body-xs tw:text-neutral-600 tw:font-medium">+12 wk</span>
                    </div>
                  </div>
                  <div class="tw:bg-white tw:shadow-sm tw:rounded-lg tw:p-2 tw:cursor-pointer" role="button" tabindex="0"
                       data-prompt="Can you show me the 8 new applications this week — which ones are incomplete or missing GCSE predictions?">
                    <div class="kpi-tooltip kpi-tooltip-right">
                      <div class="kpi-tt-status g">189 total · +8 this week</div>
                      <div class="kpi-tt-explain">Of the 8 new: 3 still incomplete, 2 missing GCSE predictions</div>
                      <div class="kpi-tt-action">Review incomplete applications <i class="fa-regular fa-arrow-up-right-from-square"></i></div>
                    </div>
                    <div class="tw:text-body-xs tw:text-neutral-600 tw:mb-0.5">Applications</div>
                    <div class="tw:flex tw:items-baseline tw:justify-between">
                      <span class="tw:text-body-l tw:font-semibold tw:text-neutral-900">189</span>
                      <span class="tw:text-body-xs tw:text-neutral-600 tw:font-medium">+8 wk</span>
                    </div>
                  </div>
                  <div class="tw:bg-white tw:shadow-sm tw:rounded-lg tw:p-2 tw:cursor-pointer" role="button" tabindex="0"
                       data-prompt="We're at 71% offer rate, below our 80% target. Show me the 47 pending applications and suggest which to prioritise for offers.">
                    <div class="kpi-tooltip">
                      <div class="kpi-tt-status w">142 offers · 71% offer rate</div>
                      <div class="kpi-tt-explain">Target is 80% — 18 more offers needed. 47 of 189 applications still pending.</div>
                      <div class="kpi-tt-action">See pending applications <i class="fa-regular fa-arrow-up-right-from-square"></i></div>
                    </div>
                    <div class="tw:text-body-xs tw:text-neutral-600 tw:mb-0.5">Offers Made</div>
                    <div class="tw:flex tw:items-baseline tw:justify-between">
                      <span class="tw:text-body-l tw:font-semibold tw:text-neutral-900">142</span>
                      <span class="tw:text-body-xs tw:text-neutral-600 tw:font-medium">71%</span>
                    </div>
                  </div>
                  <div class="tw:bg-white tw:shadow-sm tw:rounded-lg tw:p-2 tw:cursor-pointer" role="button" tabindex="0"
                       data-prompt="44 families haven't responded to their offer. Can you draft a chase message I can send today?">
                    <div class="kpi-tooltip kpi-tooltip-right">
                      <div class="kpi-tt-status w">98 accepted · 69% of 142 offers</div>
                      <div class="kpi-tt-explain">44 of 142 families yet to respond — acceptance rate below 75% target</div>
                      <div class="kpi-tt-action">Chase non-responders <i class="fa-regular fa-arrow-up-right-from-square"></i></div>
                    </div>
                    <div class="tw:text-body-xs tw:text-neutral-600 tw:mb-0.5">Accepted</div>
                    <div class="tw:flex tw:items-baseline tw:justify-between">
                      <span class="tw:text-body-l tw:font-semibold tw:text-neutral-900">98</span>
                      <span class="tw:text-body-xs tw:text-neutral-600 tw:font-medium">69%</span>
                    </div>
                  </div>
                </div>
                <!-- Needs Attention — 3 items, hover reveals action verb -->
                <p class="tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:text-neutral-500 tw:mb-1 tw:mt-4 tw:px-0">Needs attention</p>
                <div class="tw:space-y-0.5 tw:mb-2">
                  <div class="tw:flex tw:items-center tw:justify-between tw:py-1.5 tw:px-2 tw:rounded tw:cursor-pointer
                              tw:group tw:hover:bg-white" role="button" tabindex="0"
                       data-prompt="Show me the 4 unanswered enquiries — 2 are about A-Level Business, 1 BTEC Health & Social Care, 1 general — can you draft a reply for each one?"
                       data-scenario="1">
                    <span class="tw:text-body-xs tw:text-neutral-700">
                      <i class="fa-regular fa-circle-dot tw:text-neutral-500 tw:text-[9px]"></i> 4 enquiries unanswered >24h
                    </span>
                    <span class="tw:text-body-xs tw:font-semibold tw:text-neutral-800 tw:opacity-0 tw:group-hover:opacity-100
                                 tw:transition-opacity tw:duration-100 tw:ml-1 tw:whitespace-nowrap tw:flex tw:items-center tw:gap-1">
                      Reply <i class="fa-regular fa-arrow-up-right-from-square tw:text-body-xs"></i>
                    </span>
                  </div>
                  <div class="tw:flex tw:items-center tw:justify-between tw:py-1.5 tw:px-2 tw:rounded tw:cursor-pointer
                              tw:group tw:hover:bg-white" role="button" tabindex="0"
                       data-prompt="11 applications are missing GCSE predictions — deadline is 28 Mar and 6 are from partner schools we can chase directly. Can you draft reminders?"
                       data-scenario="1">
                    <span class="tw:text-body-xs tw:text-neutral-700">
                      <i class="fa-regular fa-circle-dot tw:text-neutral-500 tw:text-[9px]"></i> 11 apps missing GCSE predictions
                    </span>
                    <span class="tw:text-body-xs tw:font-semibold tw:text-neutral-800 tw:opacity-0 tw:group-hover:opacity-100
                                 tw:transition-opacity tw:duration-100 tw:ml-1 tw:whitespace-nowrap tw:flex tw:items-center tw:gap-1">
                      Chase <i class="fa-regular fa-arrow-up-right-from-square tw:text-body-xs"></i>
                    </span>
                  </div>
                  <div class="tw:flex tw:items-center tw:justify-between tw:py-1.5 tw:px-2 tw:rounded tw:cursor-pointer
                              tw:group tw:hover:bg-white" role="button" tabindex="0"
                       data-prompt="Open evening is this Thursday — 62 registrations vs 78 last March. 34 families who enquired haven't signed up. Can you draft a reminder invite?"
                       data-scenario="1">
                    <span class="tw:text-body-xs tw:text-neutral-700">
                      <i class="fa-regular fa-circle-dot tw:text-neutral-500 tw:text-[9px]"></i> Open evening Thu — 62/80 registered
                    </span>
                    <span class="tw:text-body-xs tw:font-semibold tw:text-neutral-800 tw:opacity-0 tw:group-hover:opacity-100
                                 tw:transition-opacity tw:duration-100 tw:ml-1 tw:whitespace-nowrap tw:flex tw:items-center tw:gap-1">
                      Invite <i class="fa-regular fa-arrow-up-right-from-square tw:text-body-xs"></i>
                    </span>
                  </div>
                </div>
                <!-- Goals — 3-column, progress bars + hover tooltips -->
                <p class="tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:text-neutral-500 tw:mb-1.5 tw:mt-4 tw:px-0">Goals</p>
                <div class="tw:grid tw:grid-cols-3 tw:gap-2 tw:pb-2 tw:border-b tw:border-neutral-translucent-200">
                  <div class="tw:bg-white tw:shadow-sm tw:rounded-lg tw:p-2 tw:cursor-pointer" role="button" tabindex="0"
                       data-prompt="We're at 63% of our Year 12 application target. What's driving the gap and what can I do this week to catch up?">
                    <div class="goal-tooltip-inner">
                      <div class="kpi-tt-status w">Behind</div>
                      <div class="kpi-tt-explain">63% of target — behind current pace</div>
                      <div class="kpi-tt-action">Ask Emma to catch up <i class="fa-regular fa-arrow-up-right-from-square"></i></div>
                    </div>
                    <div class="tw:text-body-xs tw:text-neutral-500 tw:mb-0.5">Yr12 apps</div>
                    <div class="tw:text-body-xs tw:font-bold tw:text-neutral-800">189/300</div>
                    <div class="goal-progress-bar">
                      <div class="goal-progress-fill warn" style="--fill:63%"></div>
                    </div>
                  </div>
                  <div class="tw:bg-white tw:shadow-sm tw:rounded-lg tw:p-2 tw:cursor-pointer" role="button" tabindex="0"
                       data-prompt="Show me the full breakdown of our 92% response rate — which enquiry types are we slowest on?">
                    <div class="goal-tooltip-inner">
                      <div class="kpi-tt-status g">On track</div>
                      <div class="kpi-tt-explain">92% — above target threshold</div>
                      <div class="kpi-tt-action">See full breakdown <i class="fa-regular fa-arrow-up-right-from-square"></i></div>
                    </div>
                    <div class="tw:text-body-xs tw:text-neutral-500 tw:mb-0.5">Response</div>
                    <div class="tw:text-body-xs tw:font-bold tw:text-neutral-800">92%</div>
                    <div class="goal-progress-bar">
                      <div class="goal-progress-fill good" style="--fill:92%"></div>
                    </div>
                  </div>
                  <div class="tw:bg-white tw:shadow-sm tw:rounded-lg tw:p-2 tw:cursor-pointer" role="button" tabindex="0"
                       data-prompt="Acceptance rate is at risk at 69%. Show me the families who haven't accepted and help me plan a recovery.">
                    <div class="goal-tooltip-inner">
                      <div class="kpi-tt-status w">At risk</div>
                      <div class="kpi-tt-explain">69% — near minimum threshold</div>
                      <div class="kpi-tt-action">Chase outstanding offers <i class="fa-regular fa-arrow-up-right-from-square"></i></div>
                    </div>
                    <div class="tw:text-body-xs tw:text-neutral-500 tw:mb-0.5">Acceptance</div>
                    <div class="tw:text-body-xs tw:font-bold tw:text-neutral-800">69%</div>
                    <div class="goal-progress-bar">
                      <div class="goal-progress-fill warn" style="--fill:69%"></div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Activity feed -->
              <p class="tw-card-title tw:mb-2 tw:mt-4 tw:px-4">Recent activities</p>
              <div class="tw:px-4 tw:space-y-0" id="activity-feed">
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <span class="tw:text-body-xs tw:text-neutral-700 tw:capitalize">
                      <i class="fa-regular fa-circle-check tw:text-neutral-700 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:text-[11px]"></i>done
                    </span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-600 tw:whitespace-nowrap tw:shrink-0">2m ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Fetched 4 unanswered enquiries</p>
                  <p class="tw-agent-timeline-item-desc">2 A-Level Business · 1 BTEC · 1 general</p>
                </div>
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <span class="tw:text-body-xs tw:text-neutral-700 tw:capitalize">
                      <i class="fa-regular fa-bolt tw:text-neutral-700 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:text-[11px]"></i>auto
                    </span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-600 tw:whitespace-nowrap tw:shrink-0">1m ago</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Generated 4 draft replies</p>
                  <p class="tw-agent-timeline-item-desc">Awaiting your approval</p>
                </div>
                <div class="tw-agent-timeline-item">
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">
                    <span class="tw:text-body-xs tw:text-neutral-700 tw:capitalize">
                      <i class="fa-regular fa-circle-exclamation tw:text-neutral-700 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:text-[11px]"></i>review <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:ml-0.5 tw:align-middle">Action Needed</span>
                    </span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-600 tw:whitespace-nowrap tw:shrink-0">just now</span>
                  </div>
                  <p class="tw-agent-timeline-item-title">Ready to send</p>
                  <p class="tw-agent-timeline-item-desc">Confirm to send all 4</p>
                </div>
              </div>
            </div>
            <!-- Tab 2: Recent chats -->
            <div class="tw-tab-panel" role="tabpanel" data-tabs-target="panel">
              <div class="tw:p-3 tw:pb-2">
                <button class="history-new-chat" type="button">
                  <i class="fa-regular fa-plus"></i> New chat
                </button>
                <div class="tw-input-group tw-has-icon-start">
                  <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
                  <input type="search" class="tw-form-control" placeholder="Search your chats..." aria-label="Search your chats">
                </div>
              </div>
              <div class="tw:px-3 tw:pb-3">
                <div class="history-date-group">Today</div>
                <ul class="tw:space-y-0.5">
                  <li>
                    <button class="tw-chat-history-item tw-chat-history-active tw:w-full tw:text-left" type="button">
                      <span class="tw:block tw:text-body-xs tw:font-medium tw:text-neutral-700 tw:truncate">4 unanswered enquiries — draft replies</span>
                      <span class="tw:block tw:text-body-xs tw:text-neutral-500">9:03 am</span>
                    </button>
                  </li>
                </ul>
                <div class="history-date-group">Yesterday</div>
                <ul class="tw:space-y-0.5">
                  <li>
                    <button class="tw-chat-history-item tw:w-full tw:text-left" type="button">
                      <span class="tw:block tw:text-body-xs tw:font-medium tw:text-neutral-700 tw:truncate">Year 12 application forecast</span>
                      <span class="tw:block tw:text-body-xs tw:text-neutral-500">4:21 pm</span>
                    </button>
                  </li>
                  <li>
                    <button class="tw-chat-history-item tw:w-full tw:text-left" type="button">
                      <span class="tw:block tw:text-body-xs tw:font-medium tw:text-neutral-700 tw:truncate">Open evening invite — 18 unregistered families</span>
                      <span class="tw:block tw:text-body-xs tw:text-neutral-500">2:15 pm</span>
                    </button>
                  </li>
                </ul>
                <div class="history-date-group">Earlier this week</div>
                <ul class="tw:space-y-0.5">
                  <li>
                    <button class="tw-chat-history-item tw:w-full tw:text-left" type="button">
                      <span class="tw:block tw:text-body-xs tw:font-medium tw:text-neutral-700 tw:truncate">GCSE prediction chase — partner schools</span>
                      <span class="tw:block tw:text-body-xs tw:text-neutral-500">Mon, 11:02 am</span>
                    </button>
                  </li>
                  <li>
                    <button class="tw-chat-history-item tw:w-full tw:text-left" type="button">
                      <span class="tw:block tw:text-body-xs tw:font-medium tw:text-neutral-700 tw:truncate">Acceptance rate analysis Q1</span>
                      <span class="tw:block tw:text-body-xs tw:text-neutral-500">Fri, 3:44 pm</span>
                    </button>
                  </li>
                  <li>
                    <button class="tw-chat-history-item tw:w-full tw:text-left" type="button">
                      <span class="tw:block tw:text-body-xs tw:font-medium tw:text-neutral-700 tw:truncate">Offer acceptance chase — 14 families</span>
                      <span class="tw:block tw:text-body-xs tw:text-neutral-500">Fri, 10:18 am</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <button id="act-settings-footer" class="tw:flex tw:items-center tw:gap-3 tw:px-4 tw:py-3 tw:w-full tw:text-left
                        tw:border-t tw:border-neutral-translucent-200 tw:bg-neutral-100 tw:flex-shrink-0
                        tw:hover:bg-neutral-200 tw:transition-colors tw:duration-100 tw:cursor-pointer"
                type="button" aria-label="Open Emma Settings">
          <div class="tw:flex-shrink-0 tw:w-9 tw:h-9 tw:rounded-lg tw:bg-neutral-300 tw:text-neutral-800
                      tw:flex tw:items-center tw:justify-center tw:text-base" aria-hidden="true">
            <i class="fa-regular fa-gear"></i>
          </div>
          <div class="tw:flex-1 tw:min-w-0">
            <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-800">Emma Settings</div>
            <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700">Personalise how Emma works for you</div>
          </div>
          <i class="fa-regular fa-chevron-right tw:text-neutral-300 tw:flex-shrink-0" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </main>
  <!-- Role switcher — floats over topbar right area -->
  <div id="role-switcher" class="tw:fixed tw:top-3 tw:right-4 tw:z-50 tw:flex tw:items-center tw:gap-1">
    <button id="role-olga" class="tw-btn tw-btn-primary tw-btn-sm tw:font-medium" type="button" aria-pressed="true">
      Olga · Admissions
    </button>
    <button id="role-elaina" class="tw-btn tw-btn-secondary tw-btn-sm tw:font-medium" type="button" aria-pressed="false">
      Elaina · Events
    </button>
  </div>
</div>
<script>
  // ── fillComposer ─────────────────────────────────────────────
  function fillComposer(text, sourceLabel) {
    const input = document.getElementById('s0-composer-input');
    const toolbar = document.getElementById('composer-toolbar');
    const spacer = document.getElementById('toolbar-spacer');
    const composer = document.getElementById('composer');
    input.value = text;
    document.getElementById('s0-composer-send').disabled = false;
    // Remove any existing source tag
    const existing = toolbar.querySelector('.tw-emma-source-tag');
    if (existing) existing.remove();
    // Add new source tag before spacer (only when a label is provided)
    if (sourceLabel) {
      const tag = document.createElement('div');
      tag.className = 'tw-emma-source-tag';
      tag.innerHTML = `<span>↑ ${sourceLabel}</span><span class="tw-emma-source-tag-x" role="button" aria-label="Remove source tag">×</span>`;
      tag.querySelector('.tw-emma-source-tag-x').addEventListener('click', () => tag.remove());
      toolbar.insertBefore(tag, spacer);
    }
    // Flash composer border
    composer.classList.remove('composer-flash');
    void composer.offsetWidth; // force reflow to restart animation
    composer.classList.add('composer-flash');
    setTimeout(() => composer.classList.remove('composer-flash'), 600);
    composer.scrollIntoView({ behavior: 'smooth', block: 'center' });
    input.focus();
  }
  // Enable send button when composer has text
  const composerInput = document.getElementById('s0-composer-input');
  const composerSend = document.getElementById('s0-composer-send');
  composerInput.addEventListener('input', () => {
    composerSend.disabled = composerInput.value.trim() === '';
  });
  // ── Suggestion Box: area tabs + contextual prompts ───────────
  const s0PromptsByArea = {
    events: [
      { label: "Create an open day event for Year 7 on 15th May", detail: "Create an open day event for Year 7 entry on Thursday 15th May, set up online registration with a capacity of 200 families, and send confirmation emails automatically" },
      { label: "Show me all upcoming tour dates with availability", detail: "Show me all upcoming school tour dates for this term, including how many spots are still available for each session and which year groups they cover" },
      { label: "Set up a virtual Q&A session for international families", detail: "Set up a virtual Q&A session on Zoom for international families applying for Year 9 entry, schedule it for next Wednesday evening at 7pm GMT, and draft an invitation email" },
      { label: "How many families registered for Saturday's open morning?", detail: "How many families have registered for this Saturday's open morning so far, and can you break it down by year group and show me the registration trend over the past week?" },
      { label: "Clone last term's Year 9 taster day with updated dates", detail: "Clone last term's Year 9 taster day event, update the dates to the second week of June, keep the same venue and session structure, and adjust the registration deadline accordingly" }
    ],
    meetings: [
      { label: "Set up entrance meetings with multiple interviewers", detail: "Set up Year 7 entrance meetings for the first two weeks of January. 20-minute slots from 9am to 3pm with a 1-hour lunch break at 12. The Headteacher and Deputy are interviewing in separate rooms. Each slot has 1 family." },
      { label: "Send meeting invitations with booking reminders", detail: "We want parents to choose their own meeting slot. Send them an email with the meeting invitation. If they don't book within 5 days, send a reminder." },
      { label: "Allocate scholarship candidates across interviewers", detail: "Allocate interview slots for the 20 scholarship candidates. Put the first 10 with the Head on Monday and the next 10 with the Director of Studies on Tuesday." },
      { label: "Record interview scores and add notes", detail: "The interviews are done. I need to record scores for each student. We assess on: academic potential (1-5), communication skills (1-5), and motivation (1-5). The Head also wants to add free-text notes." },
      { label: "How many interview slots are still available?", detail: "How many interview slots are still available for next week? Which days have the most gaps? I need to know if we can fit in 5 more families." }
    ],
    leads: [
      { label: "Show me all enquiries received this week", detail: "Show me all new enquiries that came in this week, grouped by source channel, and highlight any that haven't been assigned to a staff member yet" },
      { label: "Which leads haven't been contacted in over 7 days?", detail: "Which leads haven't been contacted in over 7 days? Sort them by enquiry date so I can prioritise the oldest ones first, and flag any that came from paid advertising" },
      { label: "Break down lead sources for the current admissions cycle", detail: "Break down where our leads are coming from for the current admissions cycle — compare website, referrals, open days, and social media, and show how each source converts to applications" },
      { label: "What's our enquiry-to-application conversion rate this term?", detail: "What's our enquiry-to-application conversion rate this term compared to the same period last year? Break it down by year group and highlight any significant changes" },
      { label: "Import new enquiry contacts from the open day sign-up sheet", detail: "Import the new enquiry contacts from Saturday's open day sign-up sheet, check for duplicates against existing records, and auto-assign them to the Year 7 admissions team" }
    ],
    enrolment: [
      { label: "Show me all applications awaiting decision", detail: "Show me all submitted applications that still need a decision, sorted by how long they've been waiting, and flag any that are past the 10-day response target" },
      { label: "Draft offer letters for the 12 approved Year 7 applicants", detail: "Draft offer letters for the 12 approved Year 7 applicants using our standard template, include the deposit deadline of 30th April, and prepare them for my review before sending" },
      { label: "How many students are on the waitlist for Year 9?", detail: "How many students are currently on the waitlist for Year 9 entry, what's their ranked order, and have any families on the list withdrawn their application since last month?" },
      { label: "Which applications are missing required documents?", detail: "Which applications are still missing required documents? Group them by document type — references, birth certificates, school reports — and show when we last chased each family" },
      { label: "Send a reminder to families with incomplete applications", detail: "Send a reminder email to all families who started an application but haven't submitted it yet, include the upcoming deadline of 28th March, and personalise each email with the missing sections" }
    ],
    communications: [
      { label: "Draft an email inviting parents to next week's open morning", detail: "Draft a warm, professional email inviting prospective parents to next Wednesday's open morning, include the agenda and parking details, and suggest a subject line that will stand out in their inbox" },
      { label: "Send an SMS reminder for tomorrow's Year 7 tour", detail: "Send an SMS reminder to all 34 families booked on tomorrow's Year 7 tour, include the arrival time of 9:15am and the meeting point at the main reception, and note that parking is available on site" },
      { label: "Show me delivery stats for last month's newsletter", detail: "Show me the full delivery and engagement stats for last month's parent newsletter — open rate, click rate, bounce rate — and compare performance to the previous three months" },
      { label: "Create a follow-up template for post-visit thank you emails", detail: "Create a reusable email template for thanking families after their school visit, include a feedback survey link, mention next steps in the application process, and keep the tone warm and encouraging" },
      { label: "Which families haven't responded to their offer letter?", detail: "Which families haven't responded to their offer letter yet and how many days has it been since we sent it? Flag any that are within 5 days of the acceptance deadline so I can follow up personally" }
    ],
    insights: [
      { label: "Show me the admissions funnel for this cycle", detail: "Show me the full admissions funnel for this cycle from initial enquiry through to enrolled, with conversion rates at each stage, and highlight where we're losing the most candidates compared to last year" },
      { label: "Compare this year's applications to the same point last year", detail: "Compare this year's total application numbers to the same date last year, break it down by year group and entry point, and flag any year groups where we're significantly ahead or behind target" },
      { label: "What's the demographic breakdown of current applicants?", detail: "What's the demographic breakdown of current applicants by home region, feeder school type, and boarding vs day preference? Include a comparison to last year's cohort to spot any shifts in our applicant profile" },
      { label: "Forecast Year 7 intake numbers based on current pipeline", detail: "Forecast the likely Year 7 intake numbers based on our current pipeline — factor in historical offer-to-acceptance rates, current waitlist size, and typical late withdrawals to give me a best and worst case scenario" },
      { label: "Which feeder schools are sending the most enquiries?", detail: "Which feeder schools are sending us the most enquiries this year, how does that compare to last year, and are there any new schools appearing in the top 10 that we should build a relationship with?" }
    ],
    migration: [
      { label: "What's the current status of our data import?", detail: "What's the current status of our data import from the previous system? Show me the overall progress, how many records have been processed, how many are pending, and flag any batches that failed" },
      { label: "Show me field mapping issues that need review", detail: "Show me all field mapping issues that still need manual review, grouped by category — student records, parent contacts, application history — and highlight any that are blocking the next import batch" },
      { label: "How many duplicate records were detected in the last import?", detail: "How many duplicate student records were found in the last import batch, what matching criteria flagged them, and can you show me a sample of the most likely true duplicates so I can decide how to merge them?" },
      { label: "List all validation errors from the student data migration", detail: "List all validation errors from the student data migration, group them by error type — missing required fields, invalid formats, out-of-range dates — and suggest automatic fixes where possible" },
      { label: "When is the next scheduled migration batch?", detail: "When is the next scheduled migration batch, which record types does it cover, and are there any unresolved issues from previous batches that could block it from running successfully?" }
    ]
  };
  (function initSuggestionBox() {
    const suggestionBox = document.getElementById('suggestion-box');
    const container = document.getElementById('s0-prompts-container');
    const promptList = document.getElementById('s0-suggested-prompts');
    const areaTags = suggestionBox.querySelectorAll('[data-area]');
    let activeArea = null;
    const digestPanel = document.getElementById('s0-digest-panel');
    const prioritiesTab = document.getElementById('s0-priorities-tab');
    function renderPrompts(area) {
      promptList.innerHTML = '';
      (s0PromptsByArea[area] || []).forEach(({ label, detail }) => {
        const li = document.createElement('li');
        const btn = document.createElement('button');
        btn.className = 'tw-btn tw-btn-tertiary tw:text-left';
        btn.type = 'button';
        btn.textContent = label;
        btn.addEventListener('click', () => {
          fillComposer(detail, area.charAt(0).toUpperCase() + area.slice(1));
          hideSuggestionBox();
        });
        li.appendChild(btn);
        promptList.appendChild(li);
      });
    }
    function fadeIn() {
      container.classList.remove('tw:hidden');
      requestAnimationFrame(() => requestAnimationFrame(() => {
        container.classList.remove('tw:opacity-0');
        container.classList.add('tw:opacity-100');
      }));
    }
    function fadeOut() {
      return new Promise(resolve => {
        container.classList.remove('tw:opacity-100');
        container.classList.add('tw:opacity-0');
        setTimeout(() => { container.classList.add('tw:hidden'); resolve(); }, 75);
      });
    }
    function updateTags(selectedArea) {
      areaTags.forEach(tag => {
        if (tag.dataset.area === selectedArea) {
          tag.classList.remove('tw-tag-secondary-soft');
          tag.classList.add('tw-tag-secondary');
        } else {
          tag.classList.remove('tw-tag-secondary');
          tag.classList.add('tw-tag-secondary-soft');
        }
      });
    }
    areaTags.forEach(tag => {
      tag.addEventListener('mouseenter', async () => {
        const area = tag.dataset.area;
        if (activeArea === area) return;
        if (activeArea) await fadeOut();
        activeArea = area;
        updateTags(area);
        renderPrompts(area);
        digestPanel.classList.add('tw:opacity-0'); // hide digest before prompts fade in
        fadeIn();
      });
    });
    suggestionBox.addEventListener('mouseleave', async () => {
      if (activeArea) {
        await fadeOut();
        activeArea = null;
        updateTags(null);
        digestPanel.classList.remove('tw:opacity-0');
      }
    });
    prioritiesTab.addEventListener('click', async () => {
      if (activeArea) await fadeOut(); // only fade if prompts are currently visible
      activeArea = null;
      updateTags(null);
      digestPanel.classList.remove('tw:opacity-0');
      document.getElementById('suggestion-box').dispatchEvent(new CustomEvent('digestshown'));
    });
    window.hideSuggestionBox = function() {
      suggestionBox.classList.add('tw:opacity-0');
      setTimeout(() => suggestionBox.classList.add('tw:hidden'), 75);
    };
    composerInput.addEventListener('input', () => {
      if (composerInput.value.trim() !== '' && !suggestionBox.classList.contains('tw:hidden')) {
        hideSuggestionBox();
      } else if (composerInput.value.trim() === '' && suggestionBox.classList.contains('tw:hidden')) {
        activeArea = null;
        updateTags(null);
        container.classList.add('tw:hidden', 'tw:opacity-0');
        container.classList.remove('tw:opacity-100');
        suggestionBox.classList.remove('tw:hidden');
        requestAnimationFrame(() => requestAnimationFrame(() => suggestionBox.classList.remove('tw:opacity-0')));
      }
    });
  })();
  // ── Digest item → composer fill ──────────────────────────────
  (function initDigestInteractivity() {
    const items = document.querySelectorAll('#s0-digest-panel [data-prompt]');
    let selected = null;
    let pendingScenario = null;
    items.forEach(item => {
      item.addEventListener('click', () => {
        if (selected === item) {
          selected.classList.remove('tw-emma-digest-att-item-active');
          selected = null;
          pendingScenario = null;
          document.getElementById('s0-composer-input').value = '';
          document.getElementById('s0-composer-send').disabled = true;
          const tag = document.querySelector('#composer-toolbar .tw-emma-source-tag');
          if (tag) tag.remove();
          return;
        }
        if (selected) selected.classList.remove('tw-emma-digest-att-item-active');
        selected = item;
        pendingScenario = item.dataset.scenario || null;
        item.classList.add('tw-emma-digest-att-item-active');
        fillComposer(item.dataset.prompt);
      });
      item.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          item.click();
        } else if (e.key === 'Escape' && selected) {
          selected.classList.remove('tw-emma-digest-att-item-active');
          selected = null;
          pendingScenario = null;
          document.getElementById('s0-composer-input').value = '';
          document.getElementById('s0-composer-send').disabled = true;
        }
      });
    });
    document.getElementById('suggestion-box').addEventListener('digestshown', () => {
      if (selected) {
        selected.classList.remove('tw-emma-digest-att-item-active');
        selected = null;
      }
      pendingScenario = null;
    });
    // Expose pendingScenario for the send button handler
    window.__emmaPendingScenario = () => pendingScenario;
  })();
  // ── Sidebar Needs Attention → fill Screen 1 composer ────────────
  (function initSidebarInteractivity() {
    const rows = document.querySelectorAll('#agent-activity-sidebar [data-prompt]');
    rows.forEach(row => {
      const activate = () => {
        const input = document.getElementById('s1-composer-input');
        const send  = document.getElementById('s1-composer-send');
        if (input)  input.value = row.dataset.prompt;
        if (send)   send.disabled = !row.dataset.prompt;
        if (input)  input.focus();
      };
      row.addEventListener('click', activate);
      row.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); activate(); }
      });
    });
  })();
  // ── Chat view send button ────────────────────────────────────
  (function initChatComposer() {
    const input = document.getElementById('s1-composer-input');
    const send  = document.getElementById('s1-composer-send');
    if (!input || !send) return;
    // Enable send when textarea has content
    input.addEventListener('input', () => {
      send.disabled = input.value.trim() === '';
    });
    send.addEventListener('click', async () => {
      const text = input.value.trim();
      if (!text) return;
      const composerCard = document.getElementById('agent-main-input').querySelector('.tw-card');
      const resolve = composerCard._optionsResolve;
      if (resolve) {
        // Options picker is active — treat typed text as free-text answer
        input.value = '';
        send.disabled = true;
        resolve(text);
      } else {
        // Free-form follow-up — append user message and show a continuation response
        input.value = '';
        send.disabled = true;
        addUserMessage(text);
        const gen = scenarioGeneration;
        await addAssistantContent([
          { type: 'thinking', value: 'Thinking\u2026', delay: 1.5 },
          { type: 'status', value: '\u2713 Thought for 2s' },
          { type: 'msg', value: 'I\'ll look into that for you now. Give me a moment to check the latest data.', feedback: true }
        ], gen);
        if (scenarioGeneration === gen) send.disabled = input.value.trim() === '';
      }
    });
  })();
  // ── Dynamic bottom padding — keeps conversation clear of floating input card ──
  const mainInputEl  = document.getElementById('agent-main-input');
  const convBodyEl   = document.getElementById('agent-conversation-body');
  function syncPaddingAndScroll() {
    const h = mainInputEl.offsetHeight;
    convBodyEl.style.paddingBottom = (h + 32) + 'px';
    void convBodyEl.scrollHeight; // force reflow
    convBodyEl.scrollTop = convBodyEl.scrollHeight;
  }
  new ResizeObserver(function() {
    requestAnimationFrame(function() { requestAnimationFrame(syncPaddingAndScroll); });
  }).observe(mainInputEl);
  // ── Screen transitions ──────────────────────────────────────
  const screen0 = document.getElementById('screen-0');
  const chatView = document.getElementById('chat-view');
  const mainEl = document.getElementById('emma-main');
  const pinsEl = document.getElementById('chat-pinned-chips');
  let scenarioGeneration = 0;
  let _streamGen = 0; // used by streamTokens to abort mid-stream on scenario switch
  function showChat(scenarioNum) {
    // Fade out screen 0, then reveal chat view
    screen0.classList.add('emma-screen-exiting');
    setTimeout(function() {
      screen0.classList.add('tw:hidden');
      screen0.classList.remove('emma-screen-exiting');
      chatView.classList.remove('tw:hidden');
      chatView.classList.add('emma-screen-entering');
      mainEl.classList.remove('tw:overflow-y-auto');
      mainEl.classList.add('tw:overflow-hidden', 'tw:flex', 'tw:items-stretch');
      if (window.__actSB) window.__actSB.go(window.__actSB.S.CHAT);
      loadScenario(scenarioNum);
      setTimeout(function() { chatView.classList.remove('emma-screen-entering'); }, 200);
    }, 150);
  }
  function showHome() {
    chatView.classList.add('tw:hidden');
    screen0.classList.remove('tw:hidden');
    screen0.classList.add('emma-screen-entering');
    mainEl.classList.add('tw:overflow-y-auto');
    mainEl.classList.remove('tw:overflow-hidden', 'tw:flex', 'tw:items-stretch');
    if (window.__actSB) {
      window.__actSB.go(window.__actSB.S.ORIENT);
      window.__actSB.resetPromptCount();
    }
    document.getElementById('agent-content-title').textContent = 'Emma';
    setTimeout(function() { screen0.classList.remove('emma-screen-entering'); }, 200);
  }
  // Send button on homepage → go to chat (scenario 1)
  document.getElementById('s0-composer-send').addEventListener('click', () => {
    const text = document.getElementById('s0-composer-input').value.trim();
    if (!text) return;
    const scenario = window.__emmaPendingScenario ? window.__emmaPendingScenario() : null;
    showChat(scenario ? parseInt(scenario, 10) : 1);
  });
  // New chat button
  document.getElementById('agent-new-chat-btn').addEventListener('click', showHome);
  // Scenario dropdown removed — scenarios load from homepage digest items
  // ── Scenario loader (stub — scenarios filled in Tasks 8-13) ──
  function loadScenario(n) {
    ++scenarioGeneration;   // invalidate any pending showOptions from previous scenario
    clearOptions();          // remove options UI if visible
    // ── Sidebar: Model B — expand only during active task
    if (window.__actSB) {
      var _sbGen = scenarioGeneration;
      window.__actSB.onPromptSend(_sbGen);
      setTimeout(function() {
        if (scenarioGeneration !== _sbGen) return;
        window.__actSB.onTaskDone(_sbGen);
      }, 9000);
    }
    // Read carry-through text before clearing
    const composerText = document.getElementById('s0-composer-input').value.trim();
    // Clear thread
    document.getElementById('chat-thread').innerHTML = '';
    document.getElementById('chat-pinned-chips').innerHTML = '';
    const scenario = SCENARIOS[n];
    if (!scenario) return;
    // Shallow-copy messages; inject composer text as first user message if present
    // NOTE: message objects in this file use `.type` (not `.role`) — the spec says `role` but
    // that is incorrect for this codebase. Use `.type` as shown here.
    const messages = scenario.messages.slice();
    if (composerText && messages.length > 0 && messages[0].type === 'user') {
      messages[0] = { ...messages[0], text: composerText };
    }
    document.getElementById('s0-composer-input').value = '';
    // Derive chat title from the first user message (truncated to 72 chars)
    const firstUserMsg = scenario.messages.find(function(m) { return m.type === 'user'; });
    const rawTitle = firstUserMsg ? firstUserMsg.text : (scenario.chatTitle || scenario.title);
    const chatTitle = rawTitle.length > 72 ? rawTitle.slice(0, 69) + '…' : rawTitle;
    document.getElementById('agent-content-title').textContent = chatTitle;
    pinsEl.innerHTML = '';
    pinsEl.classList.add('tw:hidden');
    // Render messages
    const thread = document.getElementById('chat-thread');
    const gen = scenarioGeneration;
    (async () => {
      for (const msg of (messages || [])) {
        if (scenarioGeneration !== gen) break;
        if (msg.type === 'options') {
          const selected = await showOptions(msg.label, msg.value);
          if (scenarioGeneration !== gen) break;
          addUserMessage(selected, { selected: true });
          const exactReply = msg.replies && msg.replies[selected];
          if (exactReply) {
            await addAssistantContent([
              { type: 'html', value: exactReply, feedback: true }
            ], gen);
          } else if (msg.replies) {
            // Free-text input — show closest available reply with thinking indicator
            const fallbackReply = Object.values(msg.replies)[0];
            await addAssistantContent([
              { type: 'thinking', value: 'Thinking\u2026', delay: 1.5 },
              { type: 'status', value: '\u2713 Thought for 2s' },
              { type: 'html', value: fallbackReply, feedback: true }
            ], gen);
          }
          break; // options end the scripted sequence; user types freely after
        }
        if (msg.type === 'emma') {
          // Backward-compat: convert legacy emma message object to items array
          const items = Array.isArray(msg.items) ? msg.items : [
            ...(msg.thought !== false ? [
              { type: 'thinking', value: 'Thinking\u2026', delay: 1.5 },
              { type: 'status', value: '\u2713 Thought for ' + (msg.thought || '3s') }
            ] : []),
            { type: msg.html ? 'html' : 'msg', value: msg.html || msg.text, feedback: true }
          ];
          await addAssistantContent(items, gen);
        } else {
          // user / alert — use DOM insertion (not innerHTML+= which destroys event listeners)
          const tmp = document.createElement('div');
          tmp.innerHTML = renderMessage(msg);
          while (tmp.firstChild) {
            document.getElementById('chat-thread').appendChild(tmp.firstChild);
          }
          scrollToBottom();
        }
      }
    })();
    // Sync bottom padding now that chips (if any) have been injected into the input card
    requestAnimationFrame(syncPaddingAndScroll);
  }
  function renderMessage(msg) {
    if (msg.type === 'user') {
      return `<div class="tw-agent-chat-msg tw-agent-chat-msg-user">
        <div class="tw-agent-chat-bubble-user">${msg.text}</div>
        <div class="tw-agent-chat-bubble-meta">
          <div class="tw-agent-chat-timestamp">${msg.time || '9:00 am'}</div>
        </div>
      </div>`;
    }
    if (msg.type === 'emma') {
      const thought = msg.thought !== false ? `<span class="tw-badge tw-badge-outline-secondary tw:mb-1.5 tw:inline-block">✓ Thought for ${msg.thought || '3s'}</span>` : '';
      return `<div class="tw-agent-chat-msg">
        ${thought}
        <div class="tw-agent-chat-bubble">${msg.html || msg.text}</div>
        <div class="tw-agent-chat-feedback">
          <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Copy" data-controller="tooltip" data-tooltip-content-value="Copy"><i class="fa-regular fa-copy"></i></button>
          <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Good response" data-controller="tooltip" data-tooltip-content-value="Good response"><i class="fa-regular fa-thumbs-up"></i></button>
          <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Bad response" data-controller="tooltip" data-tooltip-content-value="Bad response"><i class="fa-regular fa-thumbs-down"></i></button>
        </div>
      </div>`;
    }
    if (msg.type === 'alert') {
      return `<div class="tw-chat-alert tw-chat-alert-review">
        <div class="tw-chat-alert-title"><i class="fa-regular fa-triangle-exclamation"></i> ${msg.title}</div>
        <div class="tw-chat-alert-text">${msg.text}</div>
        ${msg.actions ? `<div class="tw-chat-alert-actions">${msg.actions.map(a => `<button class="tw-btn tw-btn-sm tw-btn-${a.variant || 'primary'}" type="button">${a.text}</button>`).join('')}</div>` : ''}
      </div>`;
    }
    return '';
  }
  // ── No-op stubs (matching meeting_agent interface) ──────────
  function ensureSpacer() {
    // no-op in emma_two — syncPaddingAndScroll handles scroll clearance
  }
  function scrollToBottom() {
    syncPaddingAndScroll();
    requestAnimationFrame(function() { syncPaddingAndScroll(); });
  }
  // ── Options UI — picker injected into the composer card ──────
  function showOptions(label, options) {
    const gen = scenarioGeneration;
    return new Promise(resolve => {
      if (scenarioGeneration !== gen) { resolve(''); return; }
      // Find the composer card (the elevated card wrapping the textarea)
      const composerCard = document.getElementById('agent-main-input').querySelector('.tw-card');
      const inputContainer = document.getElementById('emma-input-container');
      const textarea = document.getElementById('s1-composer-input');
      // Build the options picker
      const picker = document.createElement('div');
      picker.id = 'composer-options';
      picker.className = 'tw:px-4 tw:pt-3 tw:pb-2 tw:border-b tw:border-neutral-translucent-200 tw:flex tw:flex-col tw:gap-1.5';
      const labelEl = document.createElement('p');
      labelEl.className = 'tw:text-neutral-900 tw:font-medium tw:text-body-m tw:w-full tw:mb-1';
      labelEl.textContent = label;
      picker.appendChild(labelEl);
      function resolveOption(text) {
        if (scenarioGeneration !== gen) return;
        clearOptions();
        resolve(text);
      }
      let actionIndex = 0;
      options.forEach((opt) => {
        const text    = typeof opt === 'string' ? opt : opt.text;
        const isCtx   = typeof opt === 'object' && opt.context;
        if (isCtx) {
          // Context item — plain muted subtext, not interactive
          const p = document.createElement('p');
          p.className = 'tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mt-0.5 tw:mb-0 tw:pl-0.5';
          p.textContent = text;
          picker.appendChild(p);
        } else {
          actionIndex++;
          const btn = document.createElement('button');
          btn.type = 'button';
          btn.className = 'tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive';
          btn.textContent = actionIndex + '. ' + text;
          btn.addEventListener('click', () => resolveOption(text));
          picker.appendChild(btn);
        }
      });
      // Store resolver so the send button can use it
      composerCard._optionsResolve = resolveOption;
      // Change placeholder to free-text fallback hint
      textarea.placeholder = 'or just tell me what you\'d prefer';
      // Insert before the input row
      composerCard.insertBefore(picker, inputContainer);
      scrollToBottom();
    });
  }
  function clearOptions() {
    // Remove thread chips (legacy — kept in case any code path still uses the old id)
    const threadOptions = document.getElementById('scenario-options');
    if (threadOptions) threadOptions.remove();
    // Remove composer picker
    const composerOptions = document.getElementById('composer-options');
    if (composerOptions) composerOptions.remove();
    // Restore textarea placeholder and clear stored resolver
    const textarea = document.getElementById('s1-composer-input');
    if (textarea) textarea.placeholder = 'Ask me anything about admissions...';
    const composerCard = document.getElementById('agent-main-input')
      ? document.getElementById('agent-main-input').querySelector('.tw-card')
      : null;
    if (composerCard) composerCard._optionsResolve = null;
    syncPaddingAndScroll();
  }
  function addUserMessage(text, opts) {
    if (!text) return;
    const safe = text.replace(/</g, '<').replace(/>/g, '>');
    const div = document.createElement('div');
    div.className = 'tw-agent-chat-msg tw-agent-chat-msg-user';
    const bubbleClass = 'tw-agent-chat-bubble-user' +
      (opts && opts.selected ? ' tw-agent-chat-bubble-selected' : '');
    div.innerHTML = `<div class="${bubbleClass}">${safe}</div>`;
    document.getElementById('chat-thread').appendChild(div);
    ensureSpacer();
    scrollToBottom();
  }
  async function addAssistantContent(items, gen) {
    _streamGen = gen;
    const thread = document.getElementById('chat-thread');
    let wrapper = null;
    function ensureWrapper() {
      if (!wrapper) {
        wrapper = document.createElement('div');
        wrapper.className = 'tw-agent-chat-msg';
        thread.appendChild(wrapper);
      }
      return wrapper;
    }
    for (const item of items) {
      if (scenarioGeneration !== gen) break;
      switch (item.type) {
        case 'thinking': {
          const el = buildThinkingElement(item.value || 'Thinking\u2026');
          thread.appendChild(el);
          scrollToBottom();
          if (item.delay) await wait(item.delay * 1000);
          if (scenarioGeneration !== gen) break;
          if (item.expire !== false) {
            el.classList.add('emma-thinking-exiting');
            await wait(150);
            if (scenarioGeneration === gen) el.remove();
          }
          break;
        }
        case 'status': {
          ensureWrapper().appendChild(buildStatusBadge(item.value, item.variant));
          scrollToBottom();
          if (item.delay) await wait(item.delay * 1000);
          break;
        }
        case 'msg': {
          const { bubble, textEl } = buildMessageBubble();
          ensureWrapper().appendChild(bubble);
          scrollToBottom();
          await streamTokens(textEl, item.value, item.duration || 1);
          if (scenarioGeneration !== gen) break;
          linkifyUrls(textEl);
          if (item.feedback !== false) ensureWrapper().appendChild(buildFeedbackButtons());
          if (item.delay) await wait(item.delay * 1000);
          break;
        }
        case 'html': {
          const tmp = document.createElement('div');
          tmp.innerHTML = item.value;
          while (tmp.firstChild) ensureWrapper().appendChild(tmp.firstChild);
          if (item.feedback !== false) ensureWrapper().appendChild(buildFeedbackButtons());
          scrollToBottom();
          if (item.delay) await wait(item.delay * 1000);
          break;
        }
        case 'alert': {
          const alertEl = document.createElement('div');
          alertEl.className = `tw-chat-alert tw-chat-alert-${item.variant || 'review'}`;
          alertEl.innerHTML = `
            <div class="tw-chat-alert-title"><i class="fa-regular fa-triangle-exclamation"></i> ${item.title}</div>
            <div class="tw-chat-alert-text">${item.text}</div>
            ${item.actions ? `<div class="tw-chat-alert-actions">${item.actions.map(function(a) {
              return `<button class="tw-btn tw-btn-sm tw-btn-${a.variant || 'primary'}" type="button">${a.text}</button>`;
            }).join('')}</div>` : ''}
          `;
          thread.appendChild(alertEl);
          wrapper = null;
          scrollToBottom();
          if (item.delay) await wait(item.delay * 1000);
          break;
        }
        case 'options': {
          scrollToBottom();
          const selected = await showOptions(item.label, item.value);
          if (scenarioGeneration !== gen) break;
          addUserMessage(selected, { selected: true });
          wrapper = null;
          if (item.reply) {
            await addAssistantContent(item.reply, gen);
          }
          break;
        }
        case 'divider': {
          const div = document.createElement('div');
          div.className = 'tw-chat-divider';
          div.innerHTML = `<div class="tw-chat-divider-line"></div><span class="tw-chat-divider-label">${item.value}</span><div class="tw-chat-divider-line"></div>`;
          thread.appendChild(div);
          wrapper = null;
          scrollToBottom();
          if (item.delay) await wait(item.delay * 1000);
          break;
        }
        case 'autoReply': {
          scrollToBottom();
          await wait((item.delay || 1.5) * 1000);
          if (scenarioGeneration !== gen) break;
          addUserMessage(item.value);
          wrapper = null;
          break;
        }
      }
    }
  }
  function wait(ms) { return new Promise(function(r) { setTimeout(r, ms); }); }
  function buildThinkingElement(value) {
    const el = document.createElement('div');
    el.className = 'tw-agent-chat-msg';
    el.innerHTML = `
      <div class="tw-agent-chat-status">
        <div class="tw-agent-chat-status-indicator">
          <div class="tw-agent-nucleus-wrapper">
            <svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg" class="tw-agent-nucleus">
              <circle cx="28" cy="28" r="6" class="tw-agent-nucleus-core"/>
              <ellipse cx="28" cy="28" rx="27" ry="16" class="tw-agent-nucleus-ring"/>
              <ellipse cx="28" cy="28" rx="27" ry="16" transform="rotate(-60 28 28)" class="tw-agent-nucleus-ring"/>
              <ellipse cx="28" cy="28" rx="27" ry="16" transform="rotate(-150 28 28)" class="tw-agent-nucleus-ring"/>
            </svg>
          </div>
        </div>
        <div class="tw-agent-chat-status-label">${value}</div>
      </div>
    `;
    return el;
  }
  async function streamTokens(element, text, durationSec) {
    const words = text.split(' ');
    const intervalMs = Math.max(20, (durationSec * 1000) / words.length);
    element.textContent = '';
    for (let i = 0; i < words.length; i++) {
      if (scenarioGeneration !== _streamGen) return;
      element.textContent += (i > 0 ? ' ' : '') + words[i];
      if (i < words.length - 1) await wait(intervalMs);
    }
  }
  function buildStatusBadge(text, variant) {
    const badge = document.createElement('span');
    badge.className = `tw-badge tw-badge-outline-${variant || 'secondary'} tw:mb-1.5 tw:inline-block`;
    badge.innerHTML = '✓ ' + text;
    return badge;
  }
  function buildFeedbackButtons() {
    const div = document.createElement('div');
    div.className = 'tw-agent-chat-feedback';
    div.innerHTML = `
      <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Copy"
        data-controller="tooltip" data-tooltip-content-value="Copy"><i class="fa-regular fa-copy"></i></button>
      <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Good response"
        data-controller="tooltip" data-tooltip-content-value="Good response"><i class="fa-regular fa-thumbs-up"></i></button>
      <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Bad response"
        data-controller="tooltip" data-tooltip-content-value="Bad response"><i class="fa-regular fa-thumbs-down"></i></button>
    `;
    return div;
  }
  function buildMessageBubble() {
    const bubble = document.createElement('div');
    bubble.className = 'tw-agent-chat-bubble';
    const textEl = document.createElement('p');
    bubble.appendChild(textEl);
    return { bubble, textEl };
  }
  function linkifyUrls(el) {
    el.innerHTML = el.innerHTML.replace(
      /(https?:\/\/[^\s<"]+)/g,
      '<a href="$1" target="_blank" rel="noopener" class="tw:text-primary tw:underline">$1</a>'
    );
  }
  function buildDigestSidebar(scenarioNum) {
    const activeItem = scenarioNum === 11 ? 'gcse' : 'enquiries';
    const items = [
      { key: 'enquiries', text: '4 enquiries unanswered >24h' },
      { key: 'gcse', text: '11 apps missing GCSE predictions' },
      { key: 'event', text: 'Open evening Thu — 62/80 registrations' },
    ];
    return `<div class="tw-emma-digest-sidebar">
      <div class="tw-emma-digest-widget">
        <div class="tw-emma-digest-widget-title">Pipeline Snapshot</div>
        <div class="tw-emma-digest-snap">
          <div class="tw-emma-digest-snap-item"><span class="tw-emma-digest-snap-value">247</span><span class="tw-emma-digest-snap-label">Enquiries</span></div>
          <div class="tw-emma-digest-snap-item"><span class="tw-emma-digest-snap-value">189</span><span class="tw-emma-digest-snap-label">Applications</span></div>
          <div class="tw-emma-digest-snap-item"><span class="tw-emma-digest-snap-value tw-emma-digest-snap-value-warn">142</span><span class="tw-emma-digest-snap-label">Offers Made</span></div>
          <div class="tw-emma-digest-snap-item"><span class="tw-emma-digest-snap-value tw-emma-digest-snap-value-good">98</span><span class="tw-emma-digest-snap-label">Accepted</span></div>
        </div>
      </div>
      <div class="tw-emma-digest-widget">
        <div class="tw-emma-digest-widget-title">Needs Attention</div>
        <div class="tw:flex tw:flex-col tw:gap-0.5">
          ${items.map(item => {
            const isActive = item.key === activeItem;
            return `<div class="tw-emma-digest-att-item${isActive ? ' tw-emma-digest-att-item-active' : ''}">
              <div class="tw-emma-digest-att-dot"></div>
              <div>
                <div class="tw-emma-digest-att-text">${item.text}</div>
                ${isActive
                  ? `<div class="tw-emma-digest-att-status">in progress · Active conversation</div>`
                  : `<div class="tw-emma-digest-att-ask">Click to ask <i class="fa-regular fa-arrow-up-right-from-square"></i></div>`}
              </div>
            </div>`;
          }).join('')}
        </div>
      </div>
      <div class="tw-emma-digest-widget">
        <div class="tw-emma-digest-widget-title">Goal Tracker</div>
        <div class="tw:flex tw:flex-col tw:gap-2">
          <div class="tw-emma-digest-goal-row"><div class="tw-emma-digest-goal-header"><span class="tw-emma-digest-goal-label">Year 12 applications</span><span class="tw-emma-digest-goal-value">189/300</span></div><div class="tw-emma-digest-goal-bar"><div class="tw-emma-digest-goal-fill" style="--fill:63%"></div></div></div>
          <div class="tw-emma-digest-goal-row"><div class="tw-emma-digest-goal-header"><span class="tw-emma-digest-goal-label">24h response rate</span><span class="tw-emma-digest-goal-value s0-goal-value-good">92%</span></div><div class="tw-emma-digest-goal-bar"><div class="tw-emma-digest-goal-fill tw-emma-digest-goal-fill-good" style="--fill:92%"></div></div></div>
          <div class="tw-emma-digest-goal-row"><div class="tw-emma-digest-goal-header"><span class="tw-emma-digest-goal-label">Offer acceptance rate</span><span class="tw-emma-digest-goal-value s0-goal-value-warn">69%</span></div><div class="tw-emma-digest-goal-bar"><div class="tw-emma-digest-goal-fill" style="--fill:69%"></div></div></div>
        </div>
      </div>
    </div>`;
  }
  function buildKpiSidebar(scenarioNum) {
    const kpis = KPI_SIDEBARS[scenarioNum] || [];
    return `<div class="tw-emma-kpi-sidebar">
      ${kpis.map(k => `<div class="tw-emma-kpi-card">
        <div class="tw-emma-kpi-card-label">${k.label}</div>
        <div class="tw-emma-kpi-card-value">${k.value}</div>
        ${k.sub ? `<div class="tw-emma-kpi-card-sub">${k.sub}</div>` : ''}
      </div>`).join('')}
    </div>`;
  }
  const SCENARIOS = {
    1: {
      title: 'Daily Digest',
      chatTitle: 'Daily Digest',
      messages: [
        {
          type: 'user',
          text: 'Where are the 12 new enquiries this week coming from, and are there any I should prioritise?',
          time: '8:47 am',
        },
        {
          type: 'emma',
          thought: '4s',
          html: `<p>The 12 came mainly from Tuesday's open day (5) and the website form (4), with a couple from prospectus requests and one referral. Most are A-Level enquiries — 7 for Business, 3 for Sciences, 2 general.</p>
  <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:uppercase tw:tracking-wide tw:font-semibold tw:mb-2">Worth prioritising</p>
  <div class="emma-priority-card tw:bg-white tw:border tw:border-neutral-200 tw:p-3 tw:mb-2">
  <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
    <span class="tw:font-semibold">Priya Sharma</span>
    <span class="tw-badge tw-badge-primary-subtle">A-Level Business</span>
  </div>
  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Asked specifically about scholarship criteria — high intent signal.</p>
  </div>
  <div class="emma-priority-card tw:bg-white tw:border tw:border-neutral-200 tw:p-3 tw:mb-3">
  <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
    <span class="tw:font-semibold">Daniel Okonkwo</span>
    <span class="tw-badge tw-badge-primary-subtle">A-Level Business</span>
  </div>
  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Mentioned sibling already at the school — very warm lead.</p>
  </div>
  <p class="tw:text-neutral-700">Shall I draft replies for these two, or handle all 12?</p>`,
        },
        {
          type: 'options',
          label: 'What next?',
          value: [
            'Draft replies for Priya & Daniel',
            'Draft replies for all 12',
            { text: 'Source breakdown: Open day (5) · Website form (4) · Prospectus requests (2) · Referral (1)', context: true },
          ],
          replies: {
            'Draft replies for Priya & Daniel': `<p>On it. Drafting personalised replies for <strong>Priya Sharma</strong> and <strong>Daniel Okonkwo</strong> now.</p>
  <div class="emma-priority-card tw:bg-white tw:border tw:border-neutral-200 tw:p-3 tw:mb-2">
  <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
    <span class="tw:font-semibold">Priya Sharma</span>
    <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
  </div>
  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Priya, thank you so much for your interest in Sixth Form at Westfield. We'd love to tell you more about our A-Level Business scholarship criteria…</p>
  </div>
  <div class="emma-priority-card tw:bg-white tw:border tw:border-neutral-200 tw:p-3 tw:mb-3">
  <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
    <span class="tw:font-semibold">Daniel Okonkwo</span>
    <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
  </div>
  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Daniel, it's wonderful to hear your sibling is already part of the Westfield community. We'd love to have you join us for Year 12…</p>
  </div>
  <p class="tw:text-neutral-500">Both drafts look good — type <em>send both</em> or ask me to edit either one.</p>`,
            'Draft replies for all 12': `<p>Here are all 12 draft replies, grouped by subject interest. Each one is personalised — review, edit, or approve individually.</p>
  <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-600 tw:mb-2 tw:mt-3">A-Level Business <span class="tw-badge tw-badge-secondary-subtle tw:ml-1">4 drafts</span></p>
  <div class="tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:divide-y tw:divide-neutral-100 tw:mb-3">
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Priya Sharma</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Priya, thank you so much for your interest in Sixth Form at Westfield. We'd love to tell you more about our A-Level Business scholarship criteria…</p>
  </div>
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Daniel Okonkwo</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Daniel, it's wonderful to hear your sibling is already part of the Westfield community. We'd love to have you join us for Year 12…</p>
  </div>
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Chloe Hartley</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Chloe, thank you for getting in touch about our A-Level Business programme. We have a few places remaining and would love to tell you more…</p>
  </div>
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Marcus Adeniji</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Marcus, we're delighted to hear you're considering Westfield for A-Level Business. Our course combines theory and real-world case studies…</p>
  </div>
  </div>
  <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-600 tw:mb-2">A-Level Sciences <span class="tw-badge tw-badge-secondary-subtle tw:ml-1">3 drafts</span></p>
  <div class="tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:divide-y tw:divide-neutral-100 tw:mb-3">
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Sofia Mensah</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Sofia, thank you for enquiring about our A-Level Sciences pathway. Our facilities include a new lab suite opened last year…</p>
  </div>
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Ethan Kowalski</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Ethan, great to hear from you — Biology, Chemistry and Maths is a great combination here at Westfield…</p>
  </div>
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Amara Diallo</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Amara, thank you for your interest in A-Level Chemistry and Physics at Westfield Sixth Form. We'd love to invite you to our next open evening…</p>
  </div>
  </div>
  <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-600 tw:mb-2">Creative Arts <span class="tw-badge tw-badge-secondary-subtle tw:ml-1">3 drafts</span></p>
  <div class="tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:divide-y tw:divide-neutral-100 tw:mb-3">
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Isla Brennan</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Isla, we're really glad you reached out about Art & Design. Our A-Level cohort just won regional recognition for their end-of-year exhibition…</p>
  </div>
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Reuben Osei</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Reuben, Music Technology at Westfield is one of our most popular A-Levels — studio access from day one…</p>
  </div>
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Jasmine Yao</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Jasmine, thank you for your interest in Drama and Theatre Studies. We'd love to tell you about our partnership with the local professional theatre…</p>
  </div>
  </div>
  <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-600 tw:mb-2">Other subjects <span class="tw-badge tw-badge-secondary-subtle tw:ml-1">2 drafts</span></p>
  <div class="tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:divide-y tw:divide-neutral-100 tw:mb-4">
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Leila Novak</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Leila, thanks for your enquiry about Psychology. It's one of our fastest-growing subjects and we have brilliant specialist teachers…</p>
  </div>
  <div class="tw:p-3">
    <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
      <span class="tw:font-semibold tw:text-sm">Tom Fitzgerald</span>
      <span class="tw-badge tw-badge-success-subtle">Draft ready</span>
    </div>
    <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Hi Tom, Geography A-Level at Westfield covers both human and physical modules with a residential fieldtrip in Year 12…</p>
  </div>
  </div>
  <p class="tw:text-neutral-500 tw:mt-2">All 12 drafts ready — say <em>send all</em>, <em>approve all</em>, or tell me which one to edit.</p>`,
          },
        },
      ],
    },
    11: {
      title: 'GCSE Prediction Chase',
      chatTitle: 'GCSE prediction chase',
      ctxBanner: 'From your morning digest · 11 applications missing GCSE predictions',
      pinnedChips: [
        { text: '📋 Show all 11', label: 'Show all 11 applications missing predictions' },
        { text: '✉️ Draft reminder email', label: 'Draft a reminder email to schools' },
        { text: '🔁 Check again tomorrow', label: 'Set a reminder to check again tomorrow' },
        { text: '📋 Next digest item', label: 'Move to next digest item' },
      ],
      messages: [
        {
          type: 'user',
          text: 'Show me the 11 applications that are missing GCSE predictions. Draft a reminder email we can send to their schools.',
          time: '8:51 am',
        },
        {
          type: 'emma',
          text: `<p>Here are the 11 applications missing GCSE predictions:</p>
          <table class="tw-table tw:w-full">
            <thead><tr><th>Applicant</th><th>School</th><th>Last contact</th></tr></thead>
            <tbody>
              <tr><td>Oliver Walsh</td><td>Greenfield Secondary</td><td>14 Mar</td></tr>
              <tr><td>Amara Diallo</td><td>Parkside Academy</td><td>12 Mar</td></tr>
              <tr><td>Theo Brennan</td><td>St Joseph's College</td><td>10 Mar</td></tr>
              <tr><td colspan="3"><em>…8 more — click Show all 11 below</em></td></tr>
            </tbody>
          </table>
          <p>I've drafted a reminder email to the 3 schools. It references the specific students at each school and asks for predictions by Friday 4 April. Want to review before sending?</p>`,
        },
      ],
    },
    2: {
      title: 'Risk Detection',
      chatTitle: 'Risk detection',
      briefingGreeting: 'Good morning, Olga — 3 risk flags need your attention',
      kpiPills: [
        { text: '⚠️ 3 risk flags', type: 'danger' },
        { text: '2 urgent', type: 'danger' },
        { text: '1 monitoring', type: 'warning' },
      ],
      messages: [
        { type: 'user', text: 'What are the 3 risk flags today?', time: '9:05 am' },
        {
          type: 'emma',
          text: `<p>Here are today's 3 risk flags:</p>
          <ul>
            <li><strong>Urgent:</strong> Mia Thornton's offer expires tomorrow — no response received</li>
            <li><strong>Urgent:</strong> Liam Casey has 2 competing offers (us + Westfield) — decision deadline Friday</li>
            <li><strong>Monitoring:</strong> 3 applications from Beaumont School are still incomplete after 3 reminder emails</li>
          </ul>
          <p>Would you like me to draft personalised chase messages for Mia and Liam, or escalate the Beaumont situation?</p>`,
        },
      ],
    },
    3: {
      title: 'Outcome Check-in',
      chatTitle: 'Outcome check-in',
      briefingGreeting: 'Good morning, Olga — offer outcomes at a glance',
      kpiPills: [
        { text: '142 offers sent', type: '' },
        { text: '98 accepted', type: 'success' },
        { text: '12 declined', type: 'danger' },
        { text: '32 no response', type: 'warning' },
      ],
      messages: [
        { type: 'user', text: 'Summarise the offer outcomes so far.', time: '10:12 am' },
        {
          type: 'emma',
          text: `<p>Here's the offer outcome summary as of this morning:</p>
          <div class="tw-emma-metric-grid">
            <dl class="tw-emma-metric-tile"><dt>Total offers</dt><dd>142</dd></dl>
            <dl class="tw-emma-metric-tile"><dt>Accepted</dt><dd class="tw:text-green-700">98</dd></dl>
            <dl class="tw-emma-metric-tile"><dt>Declined</dt><dd class="tw:text-red-700">12</dd></dl>
            <dl class="tw-emma-metric-tile"><dt>No response</dt><dd class="tw:text-orange-700">32</dd></dl>
          </div>
          <p>Your acceptance rate is 69% — slightly below the 75% target at this stage. The 32 families with no response have all been waiting more than 7 days. Want me to draft a chase?</p>`,
        },
      ],
    },
    4: {
      title: 'Offer Acceptance Chase',
      chatTitle: 'Offer acceptance chase',
      briefingGreeting: 'Olga — 44 families still to confirm',
      kpiPills: [
        { text: '142 offers made', type: '' },
        { text: '98 accepted', type: 'success' },
        { text: '44 pending', type: 'warning' },
      ],
      messages: [
        { type: 'user', text: 'Chase the 44 families who haven\'t confirmed yet.', time: '2:30 pm' },
        {
          type: 'emma',
          text: `<p>I've sorted the 44 families by urgency. 18 have offers expiring within 7 days. Here's the chase plan:</p>
          <ul>
            <li><strong>Today:</strong> Email to all 18 expiring-soon families (personalised, deadline-specific)</li>
            <li><strong>Tomorrow:</strong> SMS follow-up to the 12 who opened the email but didn't click</li>
            <li><strong>Friday:</strong> Phone call list for the 8 highest-priority cases</li>
          </ul>
          <p>The remaining 26 families have more time — I'll schedule a reminder for next Tuesday. Shall I send the 18 emails now?</p>`,
        },
      ],
    },
    5: {
      title: 'Event Wizard',
      chatTitle: 'Event wizard',
      briefingGreeting: 'Good morning, Olga — let\'s set up your open evening',
      kpiPills: [
        { text: 'Thu 2 Apr · 6pm', type: '' },
        { text: '62/80 registrations', type: 'warning' },
      ],
      messages: [
        { type: 'user', text: 'Set up an open evening for Thursday 2 April at 6pm.', time: '11:02 am' },
        {
          type: 'emma',
          text: `<p>I've started setting up the open evening. Here's what I have so far:</p>
          <ul>
            <li><strong>Date:</strong> Thursday 2 April 2026</li>
            <li><strong>Time:</strong> 6:00 pm</li>
            <li><strong>Location:</strong> Main Hall (based on previous events)</li>
          </ul>
          <p>A couple of things to confirm before I publish the registration page: What's the capacity limit? And should I use the existing registration link template or create a new one?</p>`,
        },
      ],
    },
    6: {
      title: 'Bulk Comms',
      chatTitle: 'Bulk comms',
      briefingGreeting: 'Good morning, Olga — bulk comms ready to review',
      kpiPills: [
        { text: '189 recipients', type: '' },
        { text: '142 opened last send', type: 'success' },
        { text: '23 replied', type: '' },
      ],
      messages: [
        { type: 'user', text: 'Send an update to all Year 7 2026 applicants about next steps.', time: '9:45 am' },
        {
          type: 'emma',
          thought: '3s',
          html: `<p>I've drafted a next-steps update for all 189 Year 7 2026 applicants. Here's the draft:</p>
  <div class="emma-priority-card tw:bg-white tw:border tw:border-neutral-200 tw:p-3 tw:mb-3">
  <div class="tw:flex tw:justify-between tw:items-start tw:mb-2">
    <div>
      <div class="tw:text-body-xs tw:text-neutral-500 tw:mb-0.5">Email draft · 189 recipients</div>
      <div class="fw-semibold tw:text-body-s">Your Year 7 application — what happens next</div>
    </div>
    <span class="tw-badge tw-badge-info-subtle">Ready to send</span>
  </div>
  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0">Dear {parent_name}, thank you for submitting a Year 7 application for {student_name} at Westfield Academy. We're now reviewing all applications received before the deadline…</p>
  </div>
  <p>What would you like to do?</p>`,
        },
        {
          type: 'options',
          label: 'How should I send this?',
          value: [
            'Send a test email to myself first to check subject line and formatting',
            'Send immediately to all 189 applicants — the draft looks good',
            'Send to the 47 applicants still awaiting a decision — hold back the rest until Friday',
            'Make changes to the email content first',
            'Schedule all sends for Thursday 9am when staff are in to handle replies',
            'Hand this to Emma — she\'ll send in batches and notify me when done',
            { text: '189 recipients · Last send: 75% open rate · Avg reply time: 18h', context: true },
          ],
          replies: {
            'Send a test email to myself first to check subject line and formatting': `<p>Done — I've sent a test copy to <strong>olga@westfieldacademy.co.uk</strong>. Check your inbox, then let me know if you're happy to send to all 189.</p>`,
            'Send immediately to all 189 applicants — the draft looks good': `<p>Sending now to all 189 families. This will take around 3 minutes to complete.</p>
  <div class="tw-inline-notification tw-inline-notification-info tw:mt-2">
  <div class="tw-inline-notification-icon"><i class="fa-regular fa-paper-plane"></i></div>
  <div class="tw-inline-notification-content">
    <div class="tw-inline-notification-title">Sending in progress</div>
    <div class="tw-inline-notification-message">189 emails queued · I'll confirm delivery in your next digest</div>
  </div>
  </div>`,
            'Send to the 47 applicants still awaiting a decision — hold back the rest until Friday': `<p>Sending to the 47 families whose applications are pending a decision. The remaining 142 will be held until you confirm later this week.</p>
  <div class="emma-priority-card tw:bg-white tw:border tw:border-neutral-200 tw:p-3 tw:mb-2">
  <div class="tw:flex tw:justify-between tw:items-center tw:mb-1">
    <span class="fw-semibold">Sending now</span>
    <span class="tw-badge tw-badge-primary-subtle">47 families</span>
  </div>
  <p class="tw:text-body-s tw:text-neutral-600 tw:mb-0">Applications pending decision · offer not yet issued</p>
  </div>
  <p class="tw:text-neutral-500 tw:text-body-s">Ready to send the other 142 on Friday — just say the word.</p>`,
            'Make changes to the email content first': `<p>Here's the email content — make changes directly below, then use the <strong>Insert token</strong> dropdown to add personalisation fields. When you're happy, type <em>send this</em>.</p>
  <div class="emma-priority-card tw:bg-white tw:border tw:border-neutral-200 tw:overflow-hidden tw:mb-3">
  <div class="tw:flex tw:items-center tw:justify-between tw:px-3 tw:py-2 tw:border-b tw:border-neutral-200 tw:bg-neutral-50">
    <span class="tw:text-body-xs tw:font-semibold tw:text-neutral-700">Subject: Your Year 7 application — what happens next</span>
    <div class="tw:relative" id="token-dropdown-wrap">
      <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button"
              onclick="document.getElementById('token-dropdown-menu').classList.toggle('tw:hidden')">
        <i class="fa-regular fa-plus tw:mr-1"></i>Insert token
      </button>
      <div id="token-dropdown-menu" class="tw:hidden tw:absolute tw:right-0 tw:top-full tw:mt-1 tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:shadow-md tw:py-1 tw:z-50 tw:min-w-max">
        <button class="tw:block tw:w-full tw:text-left tw:px-3 tw:py-1.5 tw:text-body-xs tw:hover:bg-neutral-50" type="button"
                onclick="insertEmailToken('{parent_name}')">{parent_name} — e.g. Mrs Ahmed</button>
        <button class="tw:block tw:w-full tw:text-left tw:px-3 tw:py-1.5 tw:text-body-xs tw:hover:bg-neutral-50" type="button"
                onclick="insertEmailToken('{student_name}')">{student_name} — e.g. Omar</button>
        <button class="tw:block tw:w-full tw:text-left tw:px-3 tw:py-1.5 tw:text-body-xs tw:hover:bg-neutral-50" type="button"
                onclick="insertEmailToken('{school_name}')">{school_name} — current school</button>
        <button class="tw:block tw:w-full tw:text-left tw:px-3 tw:py-1.5 tw:text-body-xs tw:hover:bg-neutral-50" type="button"
                onclick="insertEmailToken('{decision_date}')">{decision_date} — offer decision deadline</button>
      </div>
    </div>
  </div>
  <textarea id="email-edit-body" rows="7"
            class="tw:w-full tw:px-3 tw:py-2.5 tw:text-body-s tw:leading-body-s tw:border-none tw:outline-none tw:bg-white tw:resize-none"
            style="resize:vertical">Dear {parent_name},
  Thank you for submitting a Year 7 application for {student_name} at Westfield Academy.
  We're now reviewing all applications received before the 28 March deadline. You can expect to hear from us with an outcome by {decision_date}.
  In the meantime, if you have any questions please don't hesitate to get in touch — we're happy to help.
  Kind regards,
  Admissions Team
  Westfield Academy</textarea>
  </div>`,
            'Schedule all sends for Thursday 9am when staff are in to handle replies': `<p>Scheduled. All 189 emails will go out on <strong>Thursday at 9:00 am</strong>. I'll add a digest summary once all sends are confirmed.</p>
  <div class="emma-priority-card tw:bg-white tw:border tw:border-neutral-200 tw:p-3 tw:mb-2">
  <div class="tw:flex tw:justify-between tw:items-center">
    <span class="fw-semibold">Scheduled</span>
    <span class="tw-badge tw-badge-success-subtle">Thu 9:00 am</span>
  </div>
  <p class="tw:text-body-xs tw:text-neutral-600 tw:mb-0">189 recipients · Your Year 7 application — what happens next</p>
  </div>`,
            'Hand this to Emma — she\'ll send in batches and notify me when done': `<p>On it. I'll send in batches of 50 to protect your sender reputation, and notify you via your morning digest once all 189 are confirmed delivered.</p>
  <div class="tw-inline-notification tw:mt-2">
  <div class="tw-inline-notification-icon"><i class="fa-regular fa-clock"></i></div>
  <div class="tw-inline-notification-content">
    <div class="tw-inline-notification-title">Background task started</div>
    <div class="tw-inline-notification-message">Sending 189 emails in 4 batches · Est. 15 mins · You'll be notified when done</div>
  </div>
  </div>`,
          },
        },
      ],
    },
    7: {
      title: 'Application Review',
      chatTitle: 'Application review',
      briefingGreeting: 'Good morning, Olga — applications awaiting decisions',
      kpiPills: [
        { text: '189 submitted', type: '' },
        { text: '47 in review', type: 'warning' },
        { text: '98 decided', type: 'success' },
      ],
      messages: [
        { type: 'user', text: 'Show me applications that have been waiting the longest for a decision.', time: '10:30 am' },
        {
          type: 'emma',
          text: `<p>Here are the 5 applications waiting longest for a decision:</p>
          <table class="tw-table tw:w-full">
            <thead><tr><th>Applicant</th><th>School</th><th>Days waiting</th></tr></thead>
            <tbody>
              <tr><td>Connor Hughes</td><td>Ashwood Primary</td><td>34 days</td></tr>
              <tr><td>Layla Osei</td><td>Maple Grove School</td><td>31 days</td></tr>
              <tr><td>Isaac Fernandez</td><td>St Catherine's Junior</td><td>29 days</td></tr>
              <tr><td>Ruby Patel</td><td>Westbridge Primary</td><td>27 days</td></tr>
              <tr><td>Noah Kimura</td><td>Riverside Academy</td><td>24 days</td></tr>
            </tbody>
          </table>
          <p>All 5 have complete applications with no missing documents. Would you like to review them now or assign them to a team member?</p>`,
        },
      ],
    },
    8: {
      title: 'Parent Enquiry Response',
      chatTitle: 'Parent enquiry response',
      briefingGreeting: 'Good morning, Olga — 12 new enquiries this week',
      kpiPills: [
        { text: '12 new enquiries', type: '' },
        { text: '4 overdue', type: 'danger' },
        { text: 'Avg 18h response', type: '' },
      ],
      messages: [
        { type: 'user', text: 'Draft responses to all new enquiries from this week.', time: '8:55 am' },
        {
          type: 'emma',
          text: `<p>Here are this week's 12 enquiries. I've drafted responses for the first 3:</p>
          <table class="tw-table tw:w-full">
            <thead><tr><th>#</th><th>Family</th><th>Topic</th><th>Status</th></tr></thead>
            <tbody>
              <tr><td>1</td><td>Ahmed family</td><td>Year 7 entry requirements</td><td>Draft ready</td></tr>
              <tr><td>2</td><td>Chen family</td><td>Transport arrangements</td><td>Draft ready</td></tr>
              <tr><td>3</td><td>Williams family</td><td>SEND support</td><td>Draft ready</td></tr>
              <tr><td colspan="4"><em>…9 more drafts — approve these 3 first?</em></td></tr>
            </tbody>
          </table>
          <p>The 4 overdue responses are highlighted. Shall I send these 3 drafts now, or would you like to review each one first?</p>`,
        },
      ],
    },
    9: {
      title: 'Eligibility Check',
      chatTitle: 'Eligibility check',
      briefingGreeting: 'Good morning, Olga — eligibility review needed',
      kpiPills: [
        { text: '156 eligible', type: 'success' },
        { text: '18 borderline', type: 'warning' },
        { text: '15 ineligible', type: 'danger' },
      ],
      messages: [
        { type: 'user', text: 'Flag any applications that don\'t meet our entry criteria.', time: '2:15 pm' },
        {
          type: 'emma',
          text: `<p>I've reviewed all 189 applications against your entry criteria. Here are the 4 borderline cases that need a decision:</p>
          <table class="tw-table tw:w-full">
            <thead><tr><th>Applicant</th><th>Issue</th><th>Recommendation</th></tr></thead>
            <tbody>
              <tr><td>Finn O'Brien</td><td>Catchment area borderline</td><td>Request address verification</td></tr>
              <tr><td>Nadia Kowalski</td><td>Missing sibling evidence</td><td>Chase supporting documents</td></tr>
              <tr><td>Sam Oduya</td><td>Faith criteria — partial evidence</td><td>Refer to admissions panel</td></tr>
              <tr><td>Chloe Barker</td><td>Late application — extenuating?</td><td>Request explanation letter</td></tr>
            </tbody>
          </table>
          <p>How would you like to handle each case?</p>`,
        },
      ],
    },
    10: {
      title: 'Enrolment Pack',
      chatTitle: 'Enrolment pack',
      briefingGreeting: 'Good morning, Olga — enrolment packs in progress',
      kpiPills: [
        { text: '87 packs sent', type: 'success' },
        { text: '11 outstanding', type: 'warning' },
        { text: '0 returned', type: 'danger' },
      ],
      messages: [
        { type: 'user', text: 'Send enrolment packs to all accepted students.', time: '3:10 pm' },
        {
          type: 'emma',
          text: `<p>Here's the enrolment pack status for all 98 accepted students:</p>
          <ul>
            <li><strong>87 packs sent</strong> — email confirmed, awaiting return</li>
            <li><strong>11 outstanding</strong> — no valid email address on record</li>
            <li><strong>0 packs returned</strong> — deadline is 30 April</li>
          </ul>
          <p>For the 11 missing email cases, I've found postal addresses for 8 of them. The other 3 will need a phone call to confirm contact details. How would you like to handle these?</p>`,
        },
      ],
    },
  }; // end SCENARIOS — more scenarios added in Tasks 10-13
  const KPI_SIDEBARS = {
    2: [
      { label: 'Risk flags', value: '3', sub: '2 urgent · 1 monitoring' },
      { label: 'Total applications', value: '189', sub: 'Year 7 2026/27' },
    ],
    3: [
      { label: 'Offers sent', value: '142' },
      { label: 'Accepted', value: '98', sub: '69% acceptance rate' },
      { label: 'Declined', value: '12' },
      { label: 'No response', value: '32', sub: 'Avg wait 9 days' },
    ],
    4: [
      { label: 'Offers made', value: '142' },
      { label: 'Accepted', value: '98', sub: '69%' },
      { label: 'Pending', value: '44', sub: 'Expires within 7 days: 18' },
    ],
    5: [
      { label: 'Event date', value: 'Thu 2 Apr', sub: '6:00 pm' },
      { label: 'Registrations', value: '62', sub: 'Target: 80' },
    ],
    6: [
      { label: 'Recipients', value: '189', sub: 'Year 7 2026' },
      { label: 'Last open rate', value: '75%' },
      { label: 'Replied', value: '23', sub: 'To last send' },
    ],
    7: [
      { label: 'Submitted', value: '189' },
      { label: 'In review', value: '47', sub: 'Awaiting decision' },
      { label: 'Decided', value: '98', sub: '52% decided' },
    ],
    8: [
      { label: 'Enquiry queue', value: '12', sub: 'This week' },
      { label: 'Overdue', value: '4', sub: '>24h unanswered' },
      { label: 'Avg response time', value: '18h' },
    ],
    9: [
      { label: 'Eligible', value: '156' },
      { label: 'Borderline', value: '18', sub: 'Need review' },
      { label: 'Ineligible', value: '15' },
    ],
    10: [
      { label: 'Packs sent', value: '87' },
      { label: 'Outstanding', value: '11', sub: 'No email on record' },
      { label: 'Returned', value: '0', sub: 'Deadline: 30 Apr' },
    ],
  }; // KPI_SIDEBARS — more entries added in Task 11
  // ── Activity sidebar state machine ──────────────────────────────
  (function initActivitySidebar() {
    var AS = document.getElementById('agent-activity-sidebar');
    if (!AS) return;
    var S = { ORIENT: 0, CHAT: 1, TASK: 2 };
    var cur = S.ORIENT;
    var autoCollapseTimer = null;
    var promptCount = 0;
    var activityIcon = document.getElementById('act-strip-activity');
    function go(state) {
      clearTimeout(autoCollapseTimer);
      if (activityIcon) activityIcon.classList.remove('act-strip-pulsing');
      cur = state;
      if (state === S.CHAT) {
        AS.style.width = '48px';
        AS.classList.add('act-is-strip');
        var stripEl = document.getElementById('act-strip');
        if (stripEl) stripEl.setAttribute('aria-hidden', 'false');
      } else {
        AS.style.width = '360px';
        AS.classList.remove('act-is-strip');
        var stripEl = document.getElementById('act-strip');
        if (stripEl) stripEl.setAttribute('aria-hidden', 'true');
      }
    }
    // Called by loadScenario on every prompt send.
    // gen = scenarioGeneration snapshot — used to abort stale timers.
    function onPromptSend(gen) {
      clearTimeout(autoCollapseTimer);
      if (activityIcon) activityIcon.classList.remove('act-strip-pulsing');
      if (promptCount === 0) {
        // 1st prompt: stay strip, pulse the activity icon to signal work
        go(S.CHAT);
        if (activityIcon) activityIcon.classList.add('act-strip-pulsing');
      } else {
        // 2nd+ prompt: collapse first, then expand when task starts (~600ms)
        go(S.CHAT);
        autoCollapseTimer = setTimeout(function() {
          if (scenarioGeneration !== gen) return;
          go(S.TASK);
          addActivity('run', 'Analysing your request\u2026', null);
        }, 600);
      }
      promptCount++;
    }
    // Called by loadScenario when the task completes.
    function onTaskDone(gen) {
      if (activityIcon) activityIcon.classList.remove('act-strip-pulsing');
      addActivity('done', 'Analysis complete', null);
      if (cur === S.TASK) {
        // Sidebar is open — auto-collapse after 3.5s
        clearTimeout(autoCollapseTimer);
        autoCollapseTimer = setTimeout(function() {
          if (scenarioGeneration !== gen) return;
          go(S.CHAT);
        }, 3500);
      }
      // If cur === S.CHAT (first prompt case), sidebar stays strip — no-op
    }
    // Called by showHome() so the counter resets for the next chat session.
    function resetPromptCount() {
      promptCount = 0;
      if (activityIcon) activityIcon.classList.remove('act-strip-pulsing');
      clearTimeout(autoCollapseTimer);
    }
    // ── Strip buttons: click to expand + switch tab ──────────────
    var overviewBtn = document.getElementById('act-strip-overview');
    if (overviewBtn) {
      overviewBtn.addEventListener('click', function() {
        go(S.ORIENT);
        var tabs = document.querySelectorAll('#agent-activity-sidebar [role="tab"]');
        if (tabs[0]) tabs[0].click();
      });
    }
    var activityBtn = document.getElementById('act-strip-activity');
    if (activityBtn) {
      activityBtn.addEventListener('click', function() {
        go(S.ORIENT);
        var tabs = document.querySelectorAll('#agent-activity-sidebar [role="tab"]');
        if (tabs[0]) tabs[0].click();
        setTimeout(function() {
          var feed = document.getElementById('activity-feed');
          if (feed) feed.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 320);
      });
    }
    var historyBtn = document.getElementById('act-strip-history');
    if (historyBtn) {
      historyBtn.addEventListener('click', function() {
        go(S.ORIENT);
        var tabs = document.querySelectorAll('#agent-activity-sidebar [role="tab"]');
        if (tabs[1]) tabs[1].click();
      });
    }
    // ── Header toggle ─────────────────────────────────────────────
    var headerToggle = document.getElementById('agent-sidebar-toggle');
    if (headerToggle) {
      headerToggle.addEventListener('click', function() {
        if (cur !== S.CHAT) {
          go(S.CHAT);
        } else {
          go(S.ORIENT);
        }
      });
    }
    // ── addActivity ───────────────────────────────────────────────
    function addActivity(type, title, desc) {
      var feed = document.getElementById('activity-feed');
      if (!feed) return;
      var iconMap = {
        done:   { icon: 'fa-circle-check',              cls: 'tw:text-neutral-700' },
        run:    { icon: 'fa-circle-notch fa-spin',       cls: 'tw:text-neutral-500' },
        review: { icon: 'fa-circle-exclamation',        cls: 'tw:text-neutral-700' },
        auto:   { icon: 'fa-bolt',                      cls: 'tw:text-neutral-700' },
      };
      var iconDef = iconMap[type] || { icon: 'fa-circle-check', cls: 'tw:text-neutral-700' };
      var label = type === 'run' ? 'running' : type;
      var el = document.createElement('div');
      el.className = 'tw-agent-timeline-item act-aitem-new';
      el.innerHTML = '<div class="tw:flex tw:items-center tw:gap-1.5 tw:mb-0">'
        + '<span class="tw:text-body-xs tw:text-neutral-700 tw:capitalize">'
        + '<i class="fa-regular ' + iconDef.icon + ' ' + iconDef.cls + ' tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:text-[11px]"></i>' + label
        + '</span>'
        + '<div class="tw:flex-1"></div>'
        + '<span class="tw:text-body-xs tw:text-neutral-600 tw:shrink-0">just now</span>'
        + '</div>'
        + '<p class="tw-agent-timeline-item-title">' + title + '</p>'
        + (desc ? '<p class="tw-agent-timeline-item-desc">' + desc + '</p>' : '');
      feed.prepend(el);
      setTimeout(function() { el.classList.remove('act-aitem-new'); }, 3000);
    }
    window.__actSB = { go: go, S: S, addActivity: addActivity, onPromptSend: onPromptSend, onTaskDone: onTaskDone, resetPromptCount: resetPromptCount };
  })();
  // ── Role switcher ────────────────────────────────────────────
  document.getElementById('role-olga').addEventListener('click', () => setRole('olga'));
  document.getElementById('role-elaina').addEventListener('click', () => setRole('elaina'));
  function setRole(role) {
    const isElaina = role === 'elaina';
    document.getElementById('role-olga').setAttribute('aria-pressed', String(!isElaina));
    document.getElementById('role-elaina').setAttribute('aria-pressed', String(isElaina));
    document.getElementById('role-olga').className = isElaina
      ? 'tw-btn tw-btn-secondary tw-btn-sm tw:font-medium'
      : 'tw-btn tw-btn-primary tw-btn-sm tw:font-medium';
    document.getElementById('role-elaina').className = isElaina
      ? 'tw-btn tw-btn-primary tw-btn-sm tw:font-medium'
      : 'tw-btn tw-btn-secondary tw-btn-sm tw:font-medium';
    // Swap greeting in homepage
    const greeting = document.getElementById('s0-briefing');
    if (greeting) {
      greeting.textContent = isElaina
        ? 'Your events pipeline is on track for today.'
        : 'Your Year 12 admissions are on track for today.';
    }
    const heading = document.querySelector('#screen-0 .tw-text-display');
    if (heading) {
      heading.textContent = isElaina ? 'Good morning, Elaina.' : 'Good morning, Olga.';
    }
  }
  // ── Email token insertion (used by B5 email edit card) ───────────────────
  function insertEmailToken(token) {
    const ta = document.getElementById('email-edit-body');
    if (!ta) return;
    const start = ta.selectionStart;
    const end   = ta.selectionEnd;
    ta.value = ta.value.slice(0, start) + token + ta.value.slice(end);
    ta.selectionStart = ta.selectionEnd = start + token.length;
    ta.focus();
    const menu = document.getElementById('token-dropdown-menu');
    if (menu) menu.classList.add('tw:hidden');
  }
</script>