<style>
  /* NOTE: @apply does not work in ERB <style> blocks — raw CSS only */
  /* ── Composer flash (same as emma_two) ─────────────────────────── */
  @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 transitions (same as emma_two) ─────────────────────── */
  @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; }
  /* ── Chat feedback: visible on message hover (same as interactive_prototype) ── */
  .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; }
  /* ── Content header h2 reset ────────────────────────────────────── */
  #agent-content-header h2 { margin-bottom:0; }
  /* ── Activity sidebar state machine (copied from emma_two) ──── */
  #rp-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;
    overflow: hidden;
    flex-shrink: 0;
  }
  /* Strip overlay — visible only when sidebar is in CHAT state (48px) */
  #rp-activity-sidebar .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);
  }
  #rp-activity-sidebar.act-is-strip .act-strip {
    opacity: 1;
    pointer-events: auto;
  }
  /* Hide full content when in strip state */
  #rp-activity-sidebar.act-is-strip .tw-agent-activity-sidebar-content,
  #rp-activity-sidebar.act-is-strip #rp-act-settings-footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms;
  }
  .goal-progress-bar { height: 4px; background: var(--tw-color-neutral-200); border-radius: 2px; margin-top: 4px; overflow: hidden; }
  .goal-progress-fill { height: 100%; border-radius: 2px; width: var(--fill); }
  .goal-progress-fill.warn { background: var(--tw-color-orange-400); }
  .goal-progress-fill.good { background: var(--tw-color-green-500); }
  /* ── History tab styles (same as emma_two) ──────────────────── */
  .history-new-chat {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--tw-color-primary);
    color: white;
    font-size: var(--tw-font-size-body-s);
    font-weight: 600;
    border: none;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .history-new-chat:hover {
    background: var(--tw-color-primary-dark);
  }
  .history-date-group {
    font-size: var(--tw-font-size-body-xs);
    font-weight: 600;
    color: var(--tw-color-neutral-400);
    padding: 12px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .history-date-group:first-of-type { padding-top: 0; }
  /* ── Digest cards (same style as emma_two screen-0) ─────────── */
  .s0-digest-card {
    background: 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; font-weight: 700; letter-spacing: 0.025em;
    text-transform: uppercase; color: var(--tw-color-primary);
    margin-bottom: 0.625rem;
  }
  /* ── Pattern item (clickable row inside a category card) ────── */
  .rp-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 6px; border-radius: 6px;
    cursor: pointer; transition: background 0.1s;
  }
  .rp-item:hover { background: var(--tw-color-neutral-100); }
  .rp-item.rp-item-active { background: var(--tw-color-primary-100); }
  .rp-item-badge {
    font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
    background: var(--tw-color-primary-100); color: var(--tw-color-primary);
    padding: 2px 5px; border-radius: 4px; flex-shrink: 0;
    min-width: 28px; text-align: center;
  }
  .rp-item-label { font-size: 12.5px; color: var(--tw-color-neutral-700); line-height: 1.3; flex: 1; }
  .rp-item-arrow { font-size: 11px; color: var(--tw-color-primary); opacity: 0; transition: opacity 0.1s; flex-shrink: 0; }
  .rp-item:hover .rp-item-arrow { opacity: 1; }
  /* ── Sidebar pattern list items ─────────────────────────────── */
  .rp-sidebar-cat { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tw-color-neutral-400); padding: 8px 4px 4px; }
  .rp-sidebar-cat:first-of-type { padding-top: 0; }
  .rp-sidebar-item {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 6px; border-radius: 6px; cursor: pointer;
    transition: background 0.1s;
  }
  .rp-sidebar-item:hover { background: var(--tw-color-neutral-200); }
  .rp-sidebar-item.active { background: var(--tw-color-primary-100); }
  .rp-sidebar-badge {
    font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
    background: var(--tw-color-neutral-200); color: var(--tw-color-neutral-600);
    padding: 1px 5px; border-radius: 4px; flex-shrink: 0; min-width: 28px; text-align: center;
  }
  .rp-sidebar-item.active .rp-sidebar-badge { background: var(--tw-color-primary-200); color: var(--tw-color-primary-700); }
  .rp-sidebar-lbl { font-size: 12px; color: var(--tw-color-neutral-600); line-height: 1.3; flex: 1; }
  .rp-sidebar-item.active .rp-sidebar-lbl { color: var(--tw-color-primary-700); font-weight: 500; }
  /* ── Read-only tag on thread cards ──────────────────────────── */
  .rp-ro-tag {
    font-size: 10px; color: var(--tw-color-neutral-400); font-weight: 500;
    border: 1px solid var(--tw-color-neutral-200); border-radius: 4px;
    padding: 1px 6px; margin-left: auto;
  }
  /* ── Email merge tokens ─────────────────────────────────────── */
  .etk {
    display: inline-block;
    background: var(--tw-color-primary-50); color: var(--tw-color-primary);
    border: 1px solid var(--tw-color-primary-200);
    border-radius: 3px; font-size: 11px; font-weight: 600; padding: 0 4px; margin: 0 1px;
  }
  .email-view {
    margin: 0 12px 10px; padding: 10px;
    background: var(--tw-color-neutral-50); border: 1px solid var(--tw-color-neutral-200);
    border-radius: 6px; font-size: 12px; color: var(--tw-color-neutral-700); line-height: 1.75;
  }
  /* ── Bulk badge ──────────────────────────────────────────────── */
  .rp-bulk-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--tw-color-primary-100); color: var(--tw-color-primary);
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 8px;
    margin: 6px 12px 4px;
  }
  .rp-bulk-more { font-size: 11px; color: var(--tw-color-blue-600); padding: 0 12px 8px; }
  /* ── Prepop banner ───────────────────────────────────────────── */
  .rp-prepop { background: var(--tw-color-blue-50); color: var(--tw-color-blue-700); font-size: 11px; font-weight: 600; padding: 5px 12px; }
  /* ── Status badges ───────────────────────────────────────────── */
  .rp-badge-think {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--tw-color-neutral-100); color: var(--tw-color-neutral-600);
    font-size: 11px; padding: 3px 9px; border-radius: 8px;
    border: 1px solid var(--tw-color-neutral-200);
  }
  .rp-badge-ok {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--tw-color-green-100); color: var(--tw-color-green-800);
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 8px;
  }
  /* ── Download card ───────────────────────────────────────────── */
  .rp-dl { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
  .rp-dl-icon { width: 32px; height: 32px; border-radius: 7px; background: var(--tw-color-green-100); font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .rp-dl-name { font-size: 12px; font-weight: 600; color: var(--tw-color-neutral-900); }
  .rp-dl-meta { font-size: 11px; color: var(--tw-color-neutral-400); margin-top: 1px; }
  /* ── Chart bars ──────────────────────────────────────────────── */
  .rp-chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding: 10px 12px 0; }
  .rp-cbar { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(to top, var(--tw-color-primary), var(--tw-color-blue-400)); opacity: 0.75; }
  .rp-chart-labels { display: flex; gap: 4px; padding: 3px 12px 8px; }
  .rp-clbl { flex: 1; text-align: center; font-size: 10px; color: var(--tw-color-neutral-400); }
  /* ── Gate warning ────────────────────────────────────────────── */
  .rp-gate-warn {
    margin: 6px 12px 10px; padding: 8px 10px;
    background: var(--tw-color-orange-50); border: 1px solid var(--tw-color-orange-200);
    border-radius: 6px; font-size: 11.5px; color: var(--tw-color-orange-900); line-height: 1.5;
  }
  /* ── Multi-select toggles ────────────────────────────────────── */
  .rp-mtog {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 20px;
    background: var(--tw-color-neutral-100);
    border: 1.5px solid var(--tw-color-neutral-200);
    color: var(--tw-color-neutral-700);
    font-size: 13px; font-weight: 500; cursor: pointer;
  }
  .rp-mtog.on {
    background: var(--tw-color-primary-100);
    border-color: var(--tw-color-primary);
    color: var(--tw-color-primary);
  }
  /* ── Rich picker ─────────────────────────────────────────────── */
  .rp-rpick {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 11px; border: 1.5px solid var(--tw-color-neutral-200);
    border-radius: 8px; cursor: pointer;
  }
  .rp-rpick.on { border-color: var(--tw-color-primary); background: var(--tw-color-primary-50); }
  .rp-rpick-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
  .rp-rpick-title { font-size: 13px; font-weight: 600; color: var(--tw-color-neutral-900); }
  .rp-rpick-desc { font-size: 11.5px; color: var(--tw-color-neutral-500); margin-top: 1px; line-height: 1.4; }
  .rp-rpick-radio {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--tw-color-neutral-300); flex-shrink: 0; margin-left: auto; margin-top: 2px;
  }
  .rp-rpick.on .rp-rpick-radio {
    border-color: var(--tw-color-primary); background: var(--tw-color-primary);
    box-shadow: inset 0 0 0 2px white;
  }
  /* ── Form inputs in options area ─────────────────────────────── */
  .rp-form-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .rp-form-lbl { font-size: 12px; color: var(--tw-color-neutral-500); min-width: 68px; flex-shrink: 0; }
  .rp-form-val {
    flex: 1; font-size: 13px; color: var(--tw-color-neutral-800); font-weight: 500;
    background: var(--tw-color-neutral-50); border: 1px solid var(--tw-color-neutral-300);
    border-radius: 6px; padding: 5px 10px; cursor: default;
  }
  .rp-form-val-sm { flex: none; width: 80px; }
  .rp-form-unit { font-size: 11.5px; color: var(--tw-color-neutral-400); }
  /* ── Progress ────────────────────────────────────────────────── */
  @keyframes rp-spin { to { transform: rotate(360deg); } }
  .rp-spin { display: inline-block; animation: rp-spin 1s linear infinite; }
  .rp-prog-track { height: 3px; background: var(--tw-color-neutral-200); border-radius: 2px; margin: 6px 12px 3px; }
  .rp-prog-fill { height: 100%; background: linear-gradient(90deg, var(--tw-color-primary), var(--tw-color-blue-400)); border-radius: 2px; }
  /* ── Options area label ──────────────────────────────────────── */
  .rp-opts-lbl {
    font-size: 11.5px; font-weight: 600; color: var(--tw-color-neutral-700);
    padding-bottom: 8px; border-bottom: 1px solid var(--tw-color-neutral-100); margin-bottom: 6px;
  }
  .rp-opts-lbl-row {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 8px; border-bottom: 1px solid var(--tw-color-neutral-100); margin-bottom: 6px;
  }
  .rp-opts-count { font-size: 11px; font-weight: 400; color: var(--tw-color-neutral-400); }
  /* ── Metric tile row (B1 stat response) ─────────────────────────── */
  .rp-metric-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }
  .rp-metric-tile {
    flex: 1;
    background: var(--tw-color-neutral-50);
    border: 1px solid var(--tw-color-neutral-200);
    border-radius: 8px;
    padding: 8px 10px;
    border-left-width: 3px;
  }
  .rp-metric-tile-green  { border-left-color: var(--tw-color-green-500); }
  .rp-metric-tile-orange { border-left-color: var(--tw-color-orange-400); }
  .rp-metric-tile-red    { border-left-color: var(--tw-color-red-500); }
  .rp-metric-label {
    font-size: 11px;
    color: var(--tw-color-neutral-500);
    margin-bottom: 3px;
    font-weight: 500;
  }
  .rp-metric-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--tw-color-neutral-900);
    line-height: 1.1;
  }
  .rp-metric-sub {
    font-size: 11px;
    color: var(--tw-color-neutral-400);
    margin-top: 2px;
  }
</style>
<div data-controller="sidebar" id="rp-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="rp-main">
    <!-- ===== SCREEN 0: Pattern picker ===== -->
    <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">
            <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">Response Patterns</h1>
          <p class="tw:text-neutral-500 tw:text-body-m tw:leading-body-m tw:mb-0">Select a pattern to see how Emma responds — the example prompt will fill the composer.</p>
        </div>
        <!-- Composer -->
        <div class="tw:w-full tw:mb-6">
          <div id="rp-composer" class="tw-card tw-card-elevated tw:rounded-2xl tw:overflow-hidden tw:cursor-text">
            <textarea id="rp-s0-input" class="tw-emma-input tw:w-full tw:block"
              placeholder="Select a pattern below, or type your own prompt…"
              rows="2"
              aria-label="Prompt input"></textarea>
            <div id="rp-s0-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>
              <div id="rp-s0-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="rp-s0-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>
        <!-- "See how Emma responds" -->
        <div id="rp-picker" class="tw:w-full tw:mb-8">
          <p class="tw:text-neutral-500 tw:font-medium tw:text-center tw:mb-3">See how Emma responds</p>
          <!-- Category tabs -->
          <div class="tw:flex tw:gap-2 tw:flex-wrap tw:justify-center tw:items-center tw:mb-4" id="rp-cat-tabs">
            <button class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary tw-tag-interactive rp-tab"
                    data-cat="all" type="button">All</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-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive rp-tab" data-cat="text" type="button">Text & Suggestions</button>
            <button class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive rp-tab" data-cat="confirmation" type="button">Confirmation</button>
            <button class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive rp-tab" data-cat="selection" type="button">Selection & Input</button>
            <button class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive rp-tab" data-cat="email" type="button">Email & Comms</button>
            <button class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive rp-tab" data-cat="progress" type="button">Long-running Tasks</button>
            <button class="tw-tag tw-tag-pill tw-tag-lg tw-tag-secondary-soft tw-tag-interactive rp-tab" data-cat="data" type="button">Data & Files</button>
          </div>
          <!-- Pattern grid (3-col, like the digest panel) -->
          <div id="rp-grid" class="tw:grid tw:grid-cols-3 tw:gap-4">
            <!-- Injected by JS -->
          </div>
        </div>
      </div>
      <!-- /content-col -->
    </div>
    <!-- /SCREEN 0 -->
    <!-- ===== CHAT VIEW ===== -->
    <div id="rp-chat-view" class="tw:hidden tw:flex tw:h-full tw:w-full tw:items-stretch">
      <!-- Left: header + thread + composer -->
      <div class="tw-agent-main-content tw:relative tw:flex-1">
        <!-- Content header — matches emma_two exactly -->
        <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:h-14 tw:flex tw:items-center tw:gap-2 tw:flex-shrink-0">
          <!-- Title + pen-to-square -->
          <h2 id="rp-chat-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">
            <i class="fa-regular fa-pen-to-square"></i>
          </button>
          <div class="tw:flex-1"></div>
          <!-- Search icon button -->
          <button id="rp-search-btn" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Search">
            <i class="fa-regular fa-magnifying-glass"></i>
          </button>
          <div class="tw:w-px tw:h-5 tw:bg-neutral-translucent-200 tw:mx-1"></div>
          <!-- Back to pattern picker -->
          <button id="rp-back-btn" class="tw-btn tw-btn-tertiary tw-btn-sm" type="button">
            <i class="fa-regular fa-arrow-left"></i> All patterns
          </button>
          <!-- Sidebar toggle -->
          <button id="rp-sidebar-toggle" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Toggle sidebar">
            <i class="fa-regular fa-sidebar-flip"></i>
          </button>
        </div>
        <!-- Scrollable thread -->
        <div id="rp-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 class="tw:pt-6 tw:max-w-4xl tw:mx-auto tw:px-4 tw:w-full tw:pb-48"
               role="log" aria-label="Conversation" aria-live="polite">
            <div id="rp-chat-thread" class="tw-agent-chat-thread"></div>
          </div>
        </div>
        <!-- Chat composer — absolutely positioned at bottom -->
        <div id="rp-chat-input-area"
             class="tw:flex tw:w-full tw:flex-col tw:max-w-4xl tw:mx-auto
                    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">
            <!-- Options section (hidden until showOptions() is called) -->
            <div id="rp-options-area" class="tw:hidden tw:px-4 tw:pt-4 tw:pb-1" aria-live="polite">
              <p id="rp-options-label"
                 class="tw:text-neutral-900 tw:font-medium tw:text-body-m tw:leading-body-m tw:mb-3"></p>
              <div id="rp-options-pills" class="tw:flex tw:flex-col tw:gap-1"></div>
            </div>
            <!-- Textarea -->
            <div class="tw:px-4 tw:pt-3 tw:pb-1">
              <textarea id="rp-chat-input" rows="1"
                        class="tw:w-full tw:border-0 tw:outline-none tw:resize-none tw:bg-transparent
                               tw:text-body-m tw:leading-body-m tw:text-neutral-900
                               placeholder:tw:text-neutral-400"
                        placeholder="Ask me anything or describe what you need…"
                        aria-label="Ask Emma"></textarea>
            </div>
            <!-- Toolbar -->
            <div class="tw:flex tw:items-center tw:justify-between tw:px-3 tw:pb-3 tw:pt-1">
              <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Attach file">
                <i class="fa-regular fa-paperclip"></i>
              </button>
              <div class="tw:flex tw:items-center tw:gap-2">
                <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Voice input">
                  <i class="fa-regular fa-microphone"></i>
                </button>
                <button id="rp-chat-send" class="tw-btn tw-btn-primary tw-btn-icon tw-btn-sm" type="button"
                        aria-label="Send" disabled>
                  <i class="fa-regular fa-arrow-up"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Right: Activity sidebar — full emma_two copy, rp- prefixed IDs -->
      <div id="rp-activity-sidebar" class="tw-agent-activity-sidebar tw:flex tw:flex-col" style="width: 360px;">
        <!-- Strip (CHAT state — 48px, 3 icon buttons + settings) -->
        <div class="act-strip" aria-hidden="true">
          <div class="tw:relative">
            <button id="rp-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-badge tw-badge-warning tw-badge-circle tw-badge-sm
                         tw:absolute tw:-top-1 tw:-right-1 tw:pointer-events-none"
                  aria-label="3 items need attention">3</span>
          </div>
          <button id="rp-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>
          <button id="rp-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>
          <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 (tabs + content) -->
        <div data-controller="tabs" class="tw-agent-activity-sidebar-content tw:flex-1 tw:overflow-y-auto">
          <!-- Tab bar — tw:h-14 matches content header height -->
          <div class="tw-tabs tw-tabs-justified tw-tabs-no-gap tw:h-14 tw:flex-shrink-0
                      tw:bg-white 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: Overview -->
            <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 -->
              <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>
              <!-- KPI grid -->
              <div class="tw:px-4 tw:pb-2" id="rp-digest-strip">
                <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="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-primary">247</span>
                      <span class="tw:text-body-xs tw:text-green-700 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="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-primary">189</span>
                      <span class="tw:text-body-xs tw:text-green-700 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="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-orange-800">142</span>
                      <span class="tw:text-body-xs tw:text-orange-800 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="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-green-800">98</span>
                      <span class="tw:text-body-xs tw:text-green-700 tw:font-medium">69%</span>
                    </div>
                  </div>
                </div>
                <!-- Needs Attention -->
                <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?">
                    <span class="tw:text-body-xs tw:text-neutral-700">
                      <span class="tw:text-orange-500">●</span> 4 enquiries unanswered >24h
                    </span>
                    <span class="tw:text-body-xs tw:font-semibold tw:text-primary 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?">
                    <span class="tw:text-body-xs tw:text-neutral-700">
                      <span class="tw:text-orange-500">●</span> 11 apps missing GCSE predictions
                    </span>
                    <span class="tw:text-body-xs tw:font-semibold tw:text-primary 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?">
                    <span class="tw:text-body-xs tw:text-neutral-700">
                      <span class="tw:text-orange-500">●</span> Open evening Thu — 62/80 registered
                    </span>
                    <span class="tw:text-body-xs tw:font-semibold tw:text-primary 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 -->
                <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">
                    <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-orange-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">
                    <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-green-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">
                    <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-orange-800">69%</div>
                    <div class="goal-progress-bar">
                      <div class="goal-progress-fill warn" style="--fill:69%"></div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Recent Activities -->
              <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="rp-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-500 tw:capitalize">
                      <span class="tw:bg-success tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>done
                    </span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 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-500 tw:capitalize">
                      <span class="tw:bg-info tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>auto
                    </span>
                    <div class="tw:flex-1"></div>
                    <span class="tw:text-body-xs tw:text-neutral-400 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-500 tw:capitalize">
                      <span class="tw:bg-warning tw:h-1.5 tw:w-1.5 tw:mr-1.5 tw:align-middle tw:-mt-0.5 tw:inline-block tw:rounded-full"></span>review
                      <span class="tw-badge tw-badge-warning-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-400 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: History -->
            <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" id="rp-new-chat-btn">
                  <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">Response Patterns showcase</span>
                      <span class="tw:block tw:text-body-xs tw:text-neutral-500">Now</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 7 open day event setup</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">Chase emails — 12 incomplete 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">Year 12 application forecast</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">Export Year 7 applications to CSV</span>
                      <span class="tw:block tw:text-body-xs tw:text-neutral-500">Fri, 3:44 pm</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- Emma Settings footer -->
        <button id="rp-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-white tw:flex-shrink-0
                       tw:hover:bg-neutral-50 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-primary-100 tw:text-primary
                      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-primary">Emma Settings</div>
            <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-400">Personalise how Emma works for you</div>
          </div>
          <i class="fa-regular fa-chevron-right tw:text-neutral-400 tw:flex-shrink-0" aria-hidden="true"></i>
        </button>
      </div>
      <!-- /rp-activity-sidebar -->
    </div>
    <!-- /CHAT VIEW -->
  </main>
</div>
<script>
  // ─────────────────────────────────────────────────────────────────────────────
  // Pattern data
  // ─────────────────────────────────────────────────────────────────────────────
  const rpCategories = [
    {
      id: 'text',
      name: 'Text & Suggestions',
      patterns: [
        { id: 'b1',  code: 'B1',  label: 'Text response + suggestions',   prompt: 'How many applications do I have this week, and what needs urgent attention?' },
        { id: 'b1b', code: 'B1b', label: 'Out of scope response',          prompt: 'Can you book me a restaurant for tonight?' }
      ]
    },
    {
      id: 'confirmation',
      name: 'Confirmation',
      patterns: [
        { id: 'b2',  code: 'B2',  label: 'Confirmation card',             prompt: 'Create an Open Evening for October 15th, 6–8:30pm, capacity 200 families' },
        { id: 'b3',  code: 'B3',  label: 'Gate card — irreversible',       prompt: 'Publish the Open Evening and make it live for families now' },
        { id: 'b6',  code: 'B6',  label: 'Bulk confirmation',              prompt: 'Send chase emails to all 12 incomplete applications waiting over 3 weeks' }
      ]
    },
    {
      id: 'selection',
      name: 'Selection & Input',
      patterns: [
        { id: 'a1',  code: 'A1',  label: 'Single choice',                  prompt: 'Create a new admissions event for this term' },
        { id: 'a2',  code: 'A2',  label: 'Recommended default',            prompt: 'Set up Emma for Greenford High School' },
        { id: 'a3',  code: 'A3',  label: 'Multi-select',                   prompt: 'Which year groups should Emma focus on for my admissions role?' },
        { id: 'a4',  code: 'A4',  label: 'Contextual picker',              prompt: 'How should Emma communicate with families applying to our school?' },
        { id: 'a5',  code: 'A5',  label: 'Form inputs — composer',         prompt: "Create an open evening — I'll give you the details now" }
      ]
    },
    {
      id: 'email',
      name: 'Email & Comms',
      patterns: [
        { id: 'b4',  code: 'B4',  label: 'Pre-populated data card',        prompt: 'Set up my school — can you pull in our details automatically?' },
        { id: 'b5',  code: 'B5',  label: 'Email editor with tokens',       prompt: "Draft an interview invitation email for Marcus Chen's parent" }
      ]
    },
    {
      id: 'progress',
      name: 'Long-running Tasks',
      patterns: [
        { id: 'b7',  code: 'B7',  label: 'Progress broadcast',             prompt: 'Send chase emails to all 12 incomplete families right now' },
        { id: 'b8',  code: 'B8',  label: 'Status badges',                  prompt: 'Schedule interviews for all 4 shortlisted Year 7 applicants' }
      ]
    },
    {
      id: 'data',
      name: 'Data & Files',
      patterns: [
        { id: 'b9',  code: 'B9',  label: 'File download',                  prompt: 'Export all Year 7 applications with status to a CSV file' },
        { id: 'b10', code: 'B10', label: 'Chart / data viz',               prompt: 'Show me the applications trend for this term, week by week' }
      ]
    }
  ];
  // ─────────────────────────────────────────────────────────────────────────────
  // HTML helper functions
  // ─────────────────────────────────────────────────────────────────────────────
  function nowTime() {
    const d = new Date();
    return d.toLocaleTimeString('en-GB', { hour: 'numeric', minute: '2-digit', hour12: true });
  }
  function fbBar() {
    return `<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>`;
  }
  function userMsg(text) {
    const t = nowTime();
    return `<div class="tw-agent-chat-msg tw-agent-chat-msg-user">
      <div class="tw-agent-chat-bubble tw-agent-chat-bubble-user">${text}</div>
      <div class="tw-agent-chat-bubble-meta">
        <div class="tw-agent-chat-timestamp">${t}</div>
        <button class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" type="button" aria-label="Copy"><i class="fa-regular fa-copy"></i></button>
      </div>
    </div>`;
  }
  function chip(label, other = false) {
    return `<button class="tw-chat-chip${other ? ' tw-chat-chip-other' : ''}" type="button">${label}</button>`;
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Truncate long prompts for the content header title
  // ─────────────────────────────────────────────────────────────────────────────
  function truncateTitle(text, max = 72) {
    return text.length > max ? text.slice(0, max) + '…' : text;
  }
  // Incremented on every scenario switch — aborts in-flight streams
  let scenarioGeneration = 0;
  // ─────────────────────────────────────────────────────────────────────────────
  // Word-by-word streaming — copied from emma_two
  // Splits text on spaces, fires one word per interval.
  // Aborts if scenarioGeneration changes (user switched scenario mid-stream).
  // ─────────────────────────────────────────────────────────────────────────────
  function streamTokens(element, text, durationSec) {
    const words = text.split(' ');
    const intervalMs = Math.max(20, (durationSec * 1000) / words.length);
    let i = 0;
    const _streamGen = scenarioGeneration;
    element.textContent = '';
    const iv = setInterval(() => {
      if (scenarioGeneration !== _streamGen) { clearInterval(iv); return; }
      element.textContent += (i > 0 ? ' ' : '') + words[i++];
      if (i >= words.length) clearInterval(iv);
    }, intervalMs);
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Scenario definitions — userPrompt + emmaProse + emmaHtml + optionsLabel + optionsPillsHtml + placeholder
  // ─────────────────────────────────────────────────────────────────────────────
  const scenarios = {
    b1: {
      title: 'B1 — Text Response + Suggestions',
      userPrompt: 'How many applications do I have this week, and what needs urgent attention?',
      emmaProse: 'This week\'s snapshot — up 12% on last week. Two items need your attention.',
      emmaHtml: `<div class="rp-metric-row">
        <div class="rp-metric-tile rp-metric-tile-green">
          <div class="rp-metric-label">Total</div>
          <div class="rp-metric-value">245</div>
          <div class="rp-metric-sub">↑12% wk</div>
        </div>
        <div class="rp-metric-tile rp-metric-tile-orange">
          <div class="rp-metric-label">Incomplete</div>
          <div class="rp-metric-value">67</div>
          <div class="rp-metric-sub">missing docs</div>
        </div>
        <div class="rp-metric-tile rp-metric-tile-red">
          <div class="rp-metric-label">No contact</div>
          <div class="rp-metric-value">12</div>
          <div class="rp-metric-sub">>3 weeks</div>
        </div>
      </div>`,
      optionsLabel: 'What would you like to do with the 12 urgent ones?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Send chase emails to all 12 now</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Show me the full breakdown first</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. Export incomplete applications to CSV</button>`,
      placeholder: 'Or tell me what you need…'
    },
    b1b: {
      title: 'B1b — Out of Scope Response',
      userPrompt: 'Can you book me a restaurant for tonight?',
      emmaProse: "I'm focused on school admissions — I can't help with restaurant bookings.",
      emmaHtml: '',
      optionsLabel: 'Try one of these instead:',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Review and chase incomplete applications</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Create or manage an admissions event</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. Send a bulk email to a group of families</button>`,
      placeholder: 'Ask me anything admissions-related…'
    },
    b2: {
      title: 'B2 — Confirmation Card',
      userPrompt: 'Create an Open Evening for October 15th, 6–8:30pm, capacity 200 families',
      emmaProse: "Let me check I've got everything right…",
      emmaHtml: `<div class="tw-chat-card-confirm tw:mt-2">
          <div class="tw-chat-card-header-confirm">Open Evening <span class="rp-ro-tag">read-only</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Date</span><span class="tw-chat-card-row-value">15 Oct 2026, 6:00–8:30pm</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Capacity</span><span class="tw-chat-card-row-value">200 families</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Register</span><span class="tw-chat-card-row-value">Self-registration on</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Email</span><span class="tw-chat-card-row-value">Confirmation template</span></div>
        </div>`,
      optionsLabel: 'What would you like to do?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Confirm — looks good</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Edit details</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. Cancel</button>`,
      placeholder: 'Or describe what to change…'
    },
    b3: {
      title: 'B3 — Gate Card (Irreversible)',
      userPrompt: 'Publish the Open Evening and make it live for families now',
      emmaProse: 'This will make the event live and visible to all registered families.',
      emmaHtml: `<div class="tw-chat-card-gate tw:mt-2">
          <div class="tw-chat-card-header-gate">Publish Open Evening <span class="rp-ro-tag">read-only</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Goes live</span><span class="tw-chat-card-row-value">Immediately</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Visible to</span><span class="tw-chat-card-row-value">All registered families</span></div>
          <div class="rp-gate-warn"><i class="fa-regular fa-triangle-exclamation tw:mr-1.5"></i> Once published, parents can see and register. Cancelling after publication sends a cancellation notice to all registered families.</div>
        </div>`,
      optionsLabel: 'This action cannot be undone. Are you sure?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Publish — I understand</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Cancel — go back</button>`,
      placeholder: 'Or ask me something…'
    },
    b4: {
      title: 'B4 — Pre-populated Data Card',
      userPrompt: 'Set up my school — can you pull in our details automatically?',
      emmaProse: "I've pulled your school details from the system — does this look right?",
      emmaHtml: `<div class="tw-chat-card-confirm tw:mt-2">
          <div class="rp-prepop">ℹ Pulled from your account</div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">School</span><span class="tw-chat-card-row-value">Greenford High School</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">LA</span><span class="tw-chat-card-row-value">Ealing</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">URN</span><span class="tw-chat-card-row-value">101234</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Ofsted</span><span class="tw-chat-card-row-value tw:text-neutral-300">Not available</span></div>
          <div class="tw-chat-card-row"><span class="rp-ro-tag tw:ml-auto">read-only</span></div>
        </div>`,
      optionsLabel: 'Is this correct?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Yes, that's correct</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Edit details</button>`,
      placeholder: "Or describe what's wrong…"
    },
    b5: {
      title: 'B5 — Email Editor with Tokens',
      userPrompt: "Draft an interview invitation email for Marcus Chen's parent",
      emmaProse: "Here's the draft interview invitation — ready to send to Marcus Chen's parent.",
      emmaHtml: `<div class="tw-chat-card-confirm tw:mt-2">
          <div class="tw-chat-card-header-confirm">Interview invitation <span class="rp-ro-tag">read-only</span></div>
          <div class="email-view">
            Dear <span class="etk">{{parent_name}}</span>,<br>
            We're pleased to invite <span class="etk">{{child_name}}</span> for an interview on
            <span class="etk">{{interview_date}}</span> at <span class="etk">{{interview_time}}</span>.<br><br>
            Please confirm your attendance via the link below. If you have any questions, don't hesitate to get in touch.
          </div>
        </div>`,
      optionsLabel: 'What would you like to do?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Send this email to Marcus's parent</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Edit or rewrite the email</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. Cancel — don't send</button>`,
      placeholder: 'Or describe what to change…'
    },
    b6: {
      title: 'B6 — Bulk Confirmation',
      userPrompt: 'Send chase emails to all 12 incomplete applications waiting over 3 weeks',
      emmaProse: "I've found 12 applications that have been incomplete for over 3 weeks with no contact from your team.",
      emmaHtml: `<div class="tw-chat-card-confirm tw:mt-2">
          <div class="tw-chat-card-header-confirm">Chase emails <span class="rp-ro-tag">read-only</span></div>
          <div class="rp-bulk-badge"><i class="fa-regular fa-users"></i> 12 students</div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Student</span><span class="tw-chat-card-row-value">Marcus Chen — 4 weeks incomplete</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Student</span><span class="tw-chat-card-row-value">Priya Sharma — 3 weeks incomplete</span></div>
          <div class="tw-chat-card-row"><span class="tw-chat-card-row-label">Student</span><span class="tw-chat-card-row-value">Aisha Mohammed — 3 weeks incomplete</span></div>
          <div class="rp-bulk-more">+ 9 more students</div>
        </div>`,
      optionsLabel: 'Send chase emails to all 12 incomplete families?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Yes — send to all 12 now</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Let me review the list first</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. No — cancel</button>`,
      placeholder: 'Or describe any changes…'
    },
    b7: {
      title: 'B7 — Progress Broadcast',
      userPrompt: 'Send chase emails to all 12 incomplete families right now',
      emmaProse: 'Sending chase emails to 12 families…',
      emmaHtml: `<div class="tw-chat-progress tw:mt-2">
          <div class="tw:px-3 tw:pt-2 tw:pb-1 tw:flex tw:items-center tw:justify-between">
            <span class="tw:text-body-xs tw:font-semibold tw:text-neutral-700">Sending emails</span>
            <span class="tw:text-body-xs tw:text-neutral-400">8 of 12 · ~15s remaining</span>
          </div>
          <div class="rp-prog-track"><div class="rp-prog-fill" style="width:67%"></div></div>
          <div class="tw-chat-progress-step">
            <span class="tw-chat-progress-dot-done"></span>
            <span class="tw-chat-progress-text">Marcus Chen — sent</span>
          </div>
          <div class="tw-chat-progress-step">
            <span class="tw-chat-progress-dot-done"></span>
            <span class="tw-chat-progress-text">Priya Sharma — sent</span>
          </div>
          <div class="tw-chat-progress-step">
            <span class="tw-chat-progress-dot-active"></span>
            <span class="tw-chat-progress-text tw:text-blue-600">
              <span class="rp-spin">↻</span> Aisha Mohammed — sending…
            </span>
          </div>
          <div class="tw-chat-progress-step">
            <span class="tw-chat-progress-dot-active" style="opacity:0.25"></span>
            <span class="tw-chat-progress-text tw:text-neutral-300">Ben Taylor — queued</span>
          </div>
        </div>`,
      optionsLabel: "While I'm working…",
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Cancel remaining sends</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Start a new chat — notify me when done</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. Skip failed sends and continue</button>`,
      placeholder: 'Waiting for Emma to finish…'
    },
    b8: {
      title: 'B8 — Status Badges',
      userPrompt: 'Schedule interviews for all 4 shortlisted Year 7 applicants',
      emmaProse: "I've scheduled 4 interview sessions across Tuesday and Wednesday next week. All staff have confirmed availability.",
      emmaHtml: `<div class="tw:mt-2 tw:pl-1"><span class="rp-badge-ok"><i class="fa-regular fa-check"></i> 4 interview sessions created</span></div>`,
      optionsLabel: 'Would you like to notify parents now?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Yes — send interview invitations to all 4 families</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Let me review the schedule first</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. No — I'll notify them manually</button>`,
      placeholder: 'Or ask me anything…'
    },
    b9: {
      title: 'B9 — File Download',
      userPrompt: 'Export all Year 7 applications with status to a CSV file',
      emmaProse: 'Your Year 7 applications export is ready — all 245 records including current status and contact details.',
      emmaHtml: `<div class="tw-chat-card-confirm tw:mt-2">
          <div class="tw-chat-card-header-confirm">Export ready <span class="rp-ro-tag">expires 15 min</span></div>
          <div class="rp-dl">
            <div class="rp-dl-icon"><i class="fa-regular fa-file-csv tw:text-green-700"></i></div>
            <div>
              <div class="rp-dl-name">y7-applications-2026-04-14.csv</div>
              <div class="rp-dl-meta">245 rows · 48 KB</div>
            </div>
          </div>
        </div>`,
      optionsLabel: 'What would you like to do?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Download the file now</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Export with different filters</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. Chase the 67 incomplete ones</button>`,
      placeholder: 'Or ask me anything…'
    },
    b10: {
      title: 'B10 — Chart / Data Viz',
      userPrompt: 'Show me the applications trend for this term, week by week',
      emmaProse: "Here's your applications trend for this term — a steady increase week on week.",
      emmaHtml: `<div class="tw-chat-card-confirm tw:mt-2">
          <div class="tw-chat-card-header-confirm">Applications per week — Spring 2026</div>
          <div class="rp-chart-bars">
            <div class="rp-cbar" style="height:38%"></div>
            <div class="rp-cbar" style="height:52%"></div>
            <div class="rp-cbar" style="height:46%"></div>
            <div class="rp-cbar" style="height:68%"></div>
            <div class="rp-cbar" style="height:61%"></div>
            <div class="rp-cbar" style="height:84%"></div>
            <div class="rp-cbar" style="height:100%"></div>
          </div>
          <div class="rp-chart-labels">
            <span class="rp-clbl">W1</span><span class="rp-clbl">W2</span><span class="rp-clbl">W3</span>
            <span class="rp-clbl">W4</span><span class="rp-clbl">W5</span><span class="rp-clbl">W6</span><span class="rp-clbl">W7</span>
          </div>
        </div>`,
      optionsLabel: 'What would you like to do with this data?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Break down by year group</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Compare to same week last year</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. Export this data to CSV</button>`,
      placeholder: 'Or ask me anything…'
    },
    a1: {
      title: 'A1 — Single Choice',
      userPrompt: 'Create a new admissions event for this term',
      emmaProse: 'What type of event would you like to create?',
      emmaHtml: '',
      optionsLabel: 'What type of event would you like to create?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. Open Day</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. Open Evening</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. Interview</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">4. Private Visit</button>`,
      placeholder: 'Or describe the event type…'
    },
    a2: {
      title: 'A2 — Recommended Default',
      userPrompt: 'Set up Emma for Greenford High School',
      emmaProse: 'Which MIS system does your school use?',
      emmaHtml: '',
      optionsLabel: 'Which MIS system does your school use?',
      optionsPillsHtml: `
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">1. ✦ Arbor <span class="tw:font-normal tw:text-neutral-400 tw:ml-1.5 tw:text-xs">— detected from your domain</span></button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">2. SIMS</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">3. ScholarPack</button>
        <button class="tw-tag tw-tag-lg tw-tag-pill tw-tag-interactive" type="button" onclick="sendOption(this)">4. Other</button>`,
      placeholder: 'Or type your MIS name…'
    },
    a3: {
      title: 'A3 — Multi-select',
      userPrompt: 'Which year groups should Emma focus on for my admissions role?',
      emmaProse: 'Which year groups do you manage admissions for?',
      emmaHtml: '',
      optionsLabel: 'Select all year groups you manage',
      optionsPillsHtml: `
        <div class="tw:flex tw:flex-wrap tw:gap-1.5">
          <span class="rp-mtog on">Year 7</span>
          <span class="rp-mtog on">Year 9</span>
          <span class="rp-mtog">Year 10</span>
          <span class="rp-mtog">Year 12</span>
          <span class="rp-mtog">Reception</span>
          <span class="rp-mtog">Nursery</span>
        </div>`,
      placeholder: 'Or describe your intake…'
    },
    a4: {
      title: 'A4 — Contextual Picker',
      userPrompt: 'How should Emma communicate with families applying to our school?',
      emmaProse: 'How would you like me to communicate with families?',
      emmaHtml: '',
      optionsLabel: "Choose Emma's tone of voice",
      optionsPillsHtml: `
        <div class="tw:flex tw:flex-col tw:gap-1.5">
          <div class="rp-rpick on">
            <div class="rp-rpick-icon">🙂</div>
            <div><div class="rp-rpick-title">Warm & Supportive</div><div class="rp-rpick-desc">Encouraging and empathetic. Good for pastoral and faith schools.</div></div>
            <div class="rp-rpick-radio"></div>
          </div>
          <div class="rp-rpick">
            <div class="rp-rpick-icon">📋</div>
            <div><div class="rp-rpick-title">Clear & Professional</div><div class="rp-rpick-desc">Efficient and direct. Preferred by selective and grammar schools.</div></div>
            <div class="rp-rpick-radio"></div>
          </div>
          <div class="rp-rpick">
            <div class="rp-rpick-icon">⚖️</div>
            <div><div class="rp-rpick-title">Balanced</div><div class="rp-rpick-desc">Adapts tone based on context. The most common choice.</div></div>
            <div class="rp-rpick-radio"></div>
          </div>
        </div>`,
      placeholder: 'Or describe your preference…'
    },
    a5: {
      title: 'A5 — Form Inputs',
      userPrompt: "Create an open evening — I'll give you the details now",
      emmaProse: 'When is the event, and how many families can attend?',
      emmaHtml: '',
      optionsLabel: 'Event details',
      optionsPillsHtml: `
        <div class="tw:flex tw:flex-col tw:gap-0">
          <div class="rp-form-row"><span class="rp-form-lbl">Date</span><div class="rp-form-val">15 October 2026</div></div>
          <div class="rp-form-row">
            <span class="rp-form-lbl">Start time</span>
            <div class="rp-form-val rp-form-val-sm">18:00</div>
            <span class="rp-form-unit">to</span>
            <div class="rp-form-val rp-form-val-sm">20:30</div>
          </div>
          <div class="rp-form-row">
            <span class="rp-form-lbl">Capacity</span>
            <div class="rp-form-val rp-form-val-sm">200</div>
            <span class="rp-form-unit">families</span>
          </div>
        </div>`,
      placeholder: 'Or describe the details…'
    }
  };
  // ─────────────────────────────────────────────────────────────────────────────
  // State
  // ─────────────────────────────────────────────────────────────────────────────
  let pendingScenarioId  = null;
  let activeCategory     = 'all';
  let activeItem         = null;  // highlighted grid item
  let activeSidebarItem  = null;  // highlighted sidebar item
  // sidebarVisible removed — state managed by initRpActivitySidebar()
  // ─────────────────────────────────────────────────────────────────────────────
  // Auto-resize textarea helper (same as interactive_prototype)
  // ─────────────────────────────────────────────────────────────────────────────
  function autoResize(textarea) {
    const styles = getComputedStyle(textarea);
    const lineH  = parseFloat(styles.lineHeight) || 20;
    const padV   = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
    const maxH   = lineH * 8 + padV;
    textarea.style.height = 'auto';
    textarea.style.height = Math.min(textarea.scrollHeight, maxH) + 'px';
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Render pattern grid (screen 0)
  // ─────────────────────────────────────────────────────────────────────────────
  function renderGrid(catFilter) {
    const grid = document.getElementById('rp-grid');
    const cats = catFilter === 'all' ? rpCategories : rpCategories.filter(c => c.id === catFilter);
    grid.innerHTML = '';
    cats.forEach(cat => {
      const card = document.createElement('div');
      card.className = 's0-digest-card';
      card.dataset.cat = cat.id;
      let inner = `<div class="s0-digest-card-title">${cat.name}</div>`;
      cat.patterns.forEach(p => {
        inner += `<div class="rp-item" role="button" tabindex="0"
                       data-scenario="${p.id}" data-prompt="${p.prompt.replace(/"/g, '"')}">
          <span class="rp-item-badge">${p.code}</span>
          <span class="rp-item-label">${p.label}</span>
          <i class="fa-regular fa-arrow-up-right rp-item-arrow" aria-hidden="true"></i>
        </div>`;
      });
      card.innerHTML = inner;
      grid.appendChild(card);
    });
    // Bind clicks on newly created items
    grid.querySelectorAll('.rp-item').forEach(item => {
      item.addEventListener('click', () => selectPattern(item));
      item.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); selectPattern(item); }
      });
    });
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Render pattern list (activity sidebar)
  // ─────────────────────────────────────────────────────────────────────────────
  function renderSidebarPatterns(activeSid) {
    const list = document.getElementById('rp-sidebar-list');
    if (!list) return;
    list.innerHTML = '';
    rpCategories.forEach(cat => {
      const catLabel = document.createElement('div');
      catLabel.className = 'rp-sidebar-cat';
      catLabel.textContent = cat.name;
      list.appendChild(catLabel);
      cat.patterns.forEach(p => {
        const item = document.createElement('div');
        item.className = 'rp-sidebar-item' + (p.id === activeSid ? ' active' : '');
        item.dataset.scenario = p.id;
        item.dataset.prompt   = p.prompt;
        item.setAttribute('role', 'button');
        item.setAttribute('tabindex', '0');
        item.innerHTML = `
          <span class="rp-sidebar-badge">${p.code}</span>
          <span class="rp-sidebar-lbl">${p.label}</span>`;
        item.addEventListener('click', () => loadScenarioFromSidebar(item));
        item.addEventListener('keydown', e => {
          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); loadScenarioFromSidebar(item); }
        });
        list.appendChild(item);
      });
    });
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Load a scenario directly from the sidebar (while already in chat view)
  // ─────────────────────────────────────────────────────────────────────────────
  function loadScenarioFromSidebar(item) {
    const sid = item.dataset.scenario;
    if (!sid || !scenarios[sid]) return;
    // Update sidebar active state
    if (activeSidebarItem) activeSidebarItem.classList.remove('active');
    activeSidebarItem = item;
    item.classList.add('active');
    pendingScenarioId = sid;
    showScenario(sid);
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Select pattern from grid — fill composer and highlight item
  // ─────────────────────────────────────────────────────────────────────────────
  function selectPattern(item) {
    if (activeItem) activeItem.classList.remove('rp-item-active');
    activeItem = item;
    item.classList.add('rp-item-active');
    pendingScenarioId = item.dataset.scenario;
    const prompt      = item.dataset.prompt;
    const input       = document.getElementById('rp-s0-input');
    const send        = document.getElementById('rp-s0-send');
    const composer    = document.getElementById('rp-composer');
    input.value = prompt;
    send.disabled = false;
    autoResize(input);
    // Flash composer
    composer.classList.remove('composer-flash');
    void composer.offsetWidth;
    composer.classList.add('composer-flash');
    setTimeout(() => composer.classList.remove('composer-flash'), 600);
    composer.scrollIntoView({ behavior: 'smooth', block: 'center' });
    input.focus();
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Send a pre-set option from the composer options area
  // ─────────────────────────────────────────────────────────────────────────────
  function sendOption(btn) {
    const input = document.getElementById('rp-chat-input');
    const send  = document.getElementById('rp-chat-send');
    const opts  = document.getElementById('rp-options-area');
    input.value = btn.textContent.trim();
    send.disabled = false;
    autoResize(input);
    opts.classList.add('tw:hidden');
    input.focus();
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Show a scenario in the chat view
  // ─────────────────────────────────────────────────────────────────────────────
  function showScenario(sid) {
    const sc = scenarios[sid];
    if (!sc) return;
    // Update content header title to reflect the user's prompt
    document.getElementById('rp-chat-title').textContent = truncateTitle(sc.userPrompt);
    scenarioGeneration++; // abort any in-flight stream
    const thread = document.getElementById('rp-chat-thread');
    const body   = document.getElementById('rp-conversation-body');
    // 1. Inject user message only
    thread.innerHTML = userMsg(sc.userPrompt);
    // 2. Append thinking state
    const thinkEl = document.createElement('div');
    thinkEl.id = 'rp-thinking';
    thinkEl.className = 'tw-agent-chat-msg';
    thinkEl.innerHTML = `
      <div class="tw-avatar tw-avatar-primary tw-avatar-sm tw:flex-shrink-0" aria-hidden="true"><span>E</span></div>
      <span class="tw-agent-chat-status-label">Emma's having a thought…</span>`;
    thread.appendChild(thinkEl);
    // 3. Scroll to bottom to show thinking
    requestAnimationFrame(() => { body.scrollTop = body.scrollHeight; });
    // 4. After 400ms, replace thinking with streaming response
    const _gen = scenarioGeneration;
    setTimeout(function resolveThinking() {
      if (scenarioGeneration !== _gen) return; // scenario switched mid-think
      const thinking = document.getElementById('rp-thinking');
      if (!thinking) return;
      // Build the response shell
      const responseEl = document.createElement('div');
      responseEl.id = 'rp-emma-response';
      responseEl.className = 'tw-agent-chat-msg';
      // Prose target — streamTokens writes into this <p>
      const proseEl = document.createElement('p');
      proseEl.className = 'tw:text-body-m tw:leading-body-m tw:text-neutral-900 tw:mb-2';
      // Card/HTML content — revealed after streaming completes
      const cardEl = document.createElement('div');
      if (sc.emmaHtml) cardEl.innerHTML = sc.emmaHtml;
      // Assemble inner content wrapper
      const innerEl = document.createElement('div');
      const badgeEl = document.createElement('div');
      badgeEl.className = 'tw:mb-2';
      badgeEl.innerHTML = `<span class="tw-badge tw-badge-outline-secondary tw-badge-sm tw-badge-rounded"><i class="fa-regular fa-check tw:mr-1"></i> Thought for 3s</span>`;
      innerEl.appendChild(badgeEl);
      innerEl.appendChild(proseEl);
      if (sc.emmaHtml) {
        cardEl.classList.add('tw:hidden');
        innerEl.appendChild(cardEl);
      }
      // Feedback bar
      const fbEl = document.createElement('div');
      fbEl.innerHTML = fbBar();
      innerEl.appendChild(fbEl);
      // Avatar
      const avatarEl = document.createElement('div');
      avatarEl.className = 'tw-avatar tw-avatar-primary tw-avatar-sm tw:flex-shrink-0';
      avatarEl.setAttribute('aria-hidden', 'true');
      avatarEl.innerHTML = '<span>E</span>';
      responseEl.appendChild(avatarEl);
      responseEl.appendChild(innerEl);
      thinking.replaceWith(responseEl);
      requestAnimationFrame(() => { body.scrollTop = body.scrollHeight; });
      // Stream the prose, then reveal card content
      streamTokens(proseEl, sc.emmaProse, 1.0);
      if (sc.emmaHtml) {
        setTimeout(() => {
          if (scenarioGeneration !== _gen) return;
          cardEl.classList.remove('tw:hidden');
          requestAnimationFrame(() => { body.scrollTop = body.scrollHeight; });
        }, 1100); // slightly after 1.0s stream completes
      }
    }, 400);
    // 5. Show options in composer
    const optsArea  = document.getElementById('rp-options-area');
    const optsLabel = document.getElementById('rp-options-label');
    const optsPills = document.getElementById('rp-options-pills');
    if (sc.optionsLabel || sc.optionsPillsHtml) {
      optsLabel.textContent = sc.optionsLabel || '';
      optsPills.innerHTML   = sc.optionsPillsHtml || '';
      optsArea.classList.remove('tw:hidden');
    } else {
      optsLabel.textContent = '';
      optsPills.innerHTML   = '';
      optsArea.classList.add('tw:hidden');
    }
    // 6. Set textarea placeholder
    document.getElementById('rp-chat-input').placeholder = sc.placeholder || 'Ask me anything…';
    // 7. Update sidebar active state
    renderSidebarPatterns(sid);
    // Collapse sidebar to strip when entering chat view
    if (window.__rpActSB) window.__rpActSB.go(window.__rpActSB.S.CHAT);
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Category tab selection (screen 0)
  // ─────────────────────────────────────────────────────────────────────────────
  document.getElementById('rp-cat-tabs').querySelectorAll('.rp-tab').forEach(tab => {
    tab.addEventListener('click', () => {
      document.querySelectorAll('.rp-tab').forEach(t => {
        t.classList.remove('tw-tag-secondary');
        t.classList.add('tw-tag-secondary-soft');
      });
      tab.classList.remove('tw-tag-secondary-soft');
      tab.classList.add('tw-tag-secondary');
      activeCategory = tab.dataset.cat;
      renderGrid(activeCategory);
      // Clear active item if it scrolled out
      if (activeItem && !document.getElementById('rp-grid').contains(activeItem)) {
        activeItem = null;
        pendingScenarioId = null;
      }
    });
  });
  // ─────────────────────────────────────────────────────────────────────────────
  // Composer input — enable send, auto-resize
  // ─────────────────────────────────────────────────────────────────────────────
  const s0Input = document.getElementById('rp-s0-input');
  const s0Send  = document.getElementById('rp-s0-send');
  s0Input.addEventListener('input', function() {
    autoResize(this);
    s0Send.disabled = this.value.trim() === '';
    if (this.value.trim() === '' && activeItem) {
      activeItem.classList.remove('rp-item-active');
      activeItem = null;
      pendingScenarioId = null;
    }
  });
  // Enter sends (Shift+Enter = newline) — same as interactive_prototype
  s0Input.addEventListener('keydown', e => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (!s0Send.disabled) s0Send.click();
    }
  });
  // Chat input auto-resize + enable send
  const s1Input = document.getElementById('rp-chat-input');
  const s1Send  = document.getElementById('rp-chat-send');
  s1Input.addEventListener('input', function() {
    autoResize(this);
    s1Send.disabled = this.value.trim() === '';
  });
  s1Input.addEventListener('keydown', e => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (!s1Send.disabled) s1Send.click();
    }
  });
  // ─────────────────────────────────────────────────────────────────────────────
  // Send → transition to chat view and show scenario
  // ─────────────────────────────────────────────────────────────────────────────
  s0Send.addEventListener('click', () => {
    const sid = pendingScenarioId;
    if (!sid || !scenarios[sid]) return;
    const screen0  = document.getElementById('screen-0');
    const chatView = document.getElementById('rp-chat-view');
    showScenario(sid);
    // Transition: fade screen-0 out, fade chat in
    screen0.classList.add('emma-screen-exiting');
    setTimeout(() => {
      screen0.classList.add('tw:hidden');
      screen0.classList.remove('emma-screen-exiting');
      chatView.classList.remove('tw:hidden');
      chatView.classList.add('tw:flex', 'emma-screen-entering');
      setTimeout(() => chatView.classList.remove('emma-screen-entering'), 200);
    }, 150);
  });
  // ─────────────────────────────────────────────────────────────────────────────
  // Back button — return to screen 0
  // ─────────────────────────────────────────────────────────────────────────────
  document.getElementById('rp-back-btn').addEventListener('click', () => {
    const screen0  = document.getElementById('screen-0');
    const chatView = document.getElementById('rp-chat-view');
    chatView.classList.add('emma-screen-exiting');
    setTimeout(() => {
      // Reset header title when returning to pattern picker
      document.getElementById('rp-chat-title').textContent = 'Emma';
      chatView.classList.add('tw:hidden');
      chatView.classList.remove('tw:flex', 'emma-screen-exiting');
      screen0.classList.remove('tw:hidden');
      screen0.classList.add('emma-screen-entering');
      setTimeout(() => screen0.classList.remove('emma-screen-entering'), 200);
      // Re-expand sidebar when returning to screen 0
      if (window.__rpActSB) window.__rpActSB.go(window.__rpActSB.S.ORIENT);
      // Reset screen 0 composer
      s0Input.value = '';
      s0Send.disabled = true;
      s0Input.style.height = '';
      if (activeItem) { activeItem.classList.remove('rp-item-active'); activeItem = null; }
      pendingScenarioId = null;
    }, 150);
  });
  // ─────────────────────────────────────────────────────────────────────────────
  // "New pattern session" button in History tab
  // ─────────────────────────────────────────────────────────────────────────────
  const newChatBtn = document.getElementById('rp-new-chat-btn');
  if (newChatBtn) {
    newChatBtn.addEventListener('click', () => {
      document.getElementById('rp-back-btn').click();
    });
  }
  // ─────────────────────────────────────────────────────────────────────────────
  // Activity sidebar state machine — scoped to #rp-activity-sidebar
  // ORIENT state = 360px full | CHAT state = 48px strip
  // ─────────────────────────────────────────────────────────────────────────────
  (function initRpActivitySidebar() {
    var AS  = document.getElementById('rp-activity-sidebar');
    var S   = { ORIENT: 0, CHAT: 1 };
    var cur = S.ORIENT; // default: full (screen 0 is ORIENT)
    function go(state) {
      cur = state;
      if (state === S.CHAT) {
        AS.style.width = '48px';
        AS.classList.add('act-is-strip');
      } else {
        AS.style.width = '360px';
        AS.classList.remove('act-is-strip');
      }
    }
    // Strip: bell → Overview tab
    document.getElementById('rp-act-strip-overview').addEventListener('click', function() {
      go(S.ORIENT);
      document.querySelectorAll('#rp-activity-sidebar [role="tab"]')[0].click();
    });
    // Strip: list-check → Overview tab + scroll to activity feed
    document.getElementById('rp-act-strip-activity').addEventListener('click', function() {
      go(S.ORIENT);
      document.querySelectorAll('#rp-activity-sidebar [role="tab"]')[0].click();
      setTimeout(function() {
        var feed = document.getElementById('rp-activity-feed');
        if (feed) feed.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 320);
    });
    // Strip: clock → History tab
    document.getElementById('rp-act-strip-history').addEventListener('click', function() {
      go(S.ORIENT);
      document.querySelectorAll('#rp-activity-sidebar [role="tab"]')[1].click();
    });
    // Header toggle button — toggles between CHAT and ORIENT
    document.getElementById('rp-sidebar-toggle').addEventListener('click', function() {
      go(cur !== S.CHAT ? S.CHAT : S.ORIENT);
    });
    // Expose for showScenario() and back-button handler
    window.__rpActSB = { go: go, S: S };
  })();
  // Needs Attention items — fill composer textarea on click (chat view only)
  document.getElementById('rp-activity-sidebar').addEventListener('click', function(e) {
    var item = e.target.closest('[data-prompt]');
    if (!item) return;
    var input = document.getElementById('rp-chat-input');
    if (!input) return;
    var prompt = item.dataset.prompt;
    input.value = prompt;
    autoResize(input);
    document.getElementById('rp-chat-send').disabled = false;
    input.focus();
    // Flash composer card
    var composerCard = input.closest('.tw-card');
    if (composerCard) {
      composerCard.classList.remove('composer-flash');
      void composerCard.offsetWidth; // force reflow
      composerCard.classList.add('composer-flash');
      setTimeout(function() { composerCard.classList.remove('composer-flash'); }, 600);
    }
  });
  // ─────────────────────────────────────────────────────────────────────────────
  // Init
  // ─────────────────────────────────────────────────────────────────────────────
  renderGrid('all');
  renderSidebarPatterns(null);
</script>