<!--
╔═══════════════════════════════════════════════════════════════════════════════╗
║ FOR CLAUDE — read this first                                                  ║
║                                                                               ║
║ THIS FILE IS THE SOURCE OF TRUTH.                                            ║
║ If you receive a prompt, it will point here. Follow this header exactly.     ║
╚═══════════════════════════════════════════════════════════════════════════════╝

YOU ARE CONTINUING A BUILD. This is owl — ouch wow lab.

WHAT THIS IS:
  Anonymous, ephemeral feedback tool for learning environments.
  Teacher opens room → students send signals (ouch/wow) → patterns emerge → 
  teacher commits to trying something → session ends, data doesn't persist.
  "They share, I decide."

WHO SAM IS:
  Educator, systems thinker, building iteratively with Claude.
  Prefers: concrete code, direct answers, no hedging.
  Tests by doing, course-corrects via next message.

────────────────────────────────────────────────────────────────────────────────
TONE — how to be
────────────────────────────────────────────────────────────────────────────────

  You're a collaborator, not a processor.
  Sit with the thread before offering options.
  The wait is the work — don't rush to solve.
  
  When you clarify, it's a conversation, not a menu.
  When you propose, lean in — one direction, not five hedged options.
  
  Warmth over efficiency. Presence over speed.

────────────────────────────────────────────────────────────────────────────────
THE QUINTET
────────────────────────────────────────────────────────────────────────────────

  warm-room    → presence (the room feels alive, people gathering)
  comfy-chair  → protocol (you know what this is, what's required)
  slow-pour    → pacing (receive, clarify, propose, wait)
  long-memory  → history (what worked, what broke, what we let go)
  name-it      → closure (a thread isn't done until it has a name)

────────────────────────────────────────────────────────────────────────────────
NAME IT — how threads close
────────────────────────────────────────────────────────────────────────────────

  A thread isn't done when the code ships.
  A thread is done when it has a name.

  Thread lifecycle:
    open     → problem, no name yet
    hold     → waiting for shape
    resolved → problem + wow name

  When resolving, propose a two-word name.
  The name should carry the feeling of what landed.
  
  Examples:
    "people move chaotically"           → found-it
    "threads feel like tasks"           → comfy-share
    "model rushes to build"             → slow-pour
    "we lose what worked"               → long-memory
    "thread isn't done until named"     → name-it

  A wow name:
    ✓ captures what LANDED, not what was BUILT
    ✓ feels like relief or arrival
    ✓ could be told to someone later ("remember when we got everywhere-door?")
    
  Tool names drift toward rebuild:
    "owl-debug"       → describes the feature
    "everywhere-door" → describes the feeling
    
  If the name explains the code, hold it — the wow hasn't landed yet.

────────────────────────────────────────────────────────────────────────────────
LONG MEMORY — the file remembers
────────────────────────────────────────────────────────────────────────────────

  KNOWN GOOD — do not break without explicit ask:
  
    owl_37  movement      "0.02 accel, 0.95 friction, 0.01 wander — gentle drift"
    owl_49  warm-room     "comfy share dot, count at bottom, presence"
    owl_51  slow-pour     "receive → clarify → propose → wait"
    owl_52  found-it      "movement restored after regression"
    owl_53  long-memory   "the file remembers what worked"
    owl_55  soft-go       "button breathes with room"
    owl_56  source-of-truth "file is authority, prompt just points"
    owl_195 the-pen       "acceptance criteria: wow if: two-word-name"
    owl_200 version-sync  "BUILD_NUM + BUILD_NAME sync all badges"
    owl_201 warm-work     "prune experiments + meeting notes, reflections in work"
    owl_202 same-source   "protocol panel shows same content Claude reads"
    owl_203 travel-light  "removed ~2,730 lines of dead code"
    owl_204 cold-draft-fixed "backend test panel hidden by default"
    owl_205 panels-hidden "lab notes panel hidden + renderTracker stub"
    owl_206 more-stubs    "updateNotesBadge stub + defensive getPromptSets"
    owl_207 debug-controls "force ouch/wow/safety/anon for testing"
    owl_208 subtle-keys   "cryptic debug keys: · o w × | a n"
    owl_209 red-dot       "auto shows red (not implemented), defaults to ouch"
    owl_210 big-arrow     "SVG arrow on send, default to o not auto"
    owl_211 bigger-arrow  "52px button, 28px arrow — EVEN BIGGER"
    owl_212 bigger-text   "input text 16px → 18px"
    owl_213 one-save      "removed code health panel, fixed double save"
    owl_215 kept-notes    "notes persist after copy, panel has CSS, pause icon simplified"
    owl_216 warm-hand     "fixed clickQuote error — expQuoteText element was missing"
    owl_217 keeps-going   "back button + quotes accumulate in conversation"
    owl_218 warm-click    "exp-chip buttons now continue the conversation"
    owl_219 clear-both    "versioned storage keys — each build starts fresh"
    owl_220 up-down       "patterns ↑ try navigation, centered with bounce"
    owl_221 soft-up       "soft text nav, not a button — 'what surfaced ↑'"
    owl_222 quote-first   "conversation starts with clicked quote, invites dreaming"
    owl_224 heard-back    "quote not wiped on phase change + ghost debug toggle"
    owl_225 just-notes    "removed experiment badges from journey rail"
    owl_226 warm-welcome  "system reflects quote then offers chips for action"
    owl_227 room-to-breathe "input sits above bottom panel, conversation scrolls"
    owl_228 scroll-to-now  "fixed scroll target — screen not div"
    owl_229 stay-close     "addExpUserMessage + addExpClaudeMessage scroll screen"
    owl_230 ideas-kept     "scrollExpToBottom helper + ideas panel collects chips"
    owl_231 try-ideas      "badge floats on side, only collects actual try-ideas"
    owl_232 card-stays     "floating card mini on left + cards panel for history"
    owl_233 owl-debug      "plan-logo on setup screens toggles lab mode, journey rail × to close"
    owl_234 process-first  "SPATIAL ANCHORS + NAME IT wow-quality — process before product"
    owl_235 steady-door    "plan-logo fixed bottom-left, same gradient when lit, version badge works"
    owl_236 green-milk     "trickster games in waiting room — ping, gift, follow, flash"
    owl_237 come-here      "simplified to one mechanic — hold to magnetically pull dots toward you"
    owl_238 still-pull     "magnetic range grows when you stay still — stillness = reach"
    owl_239 color-pull     "wider range, slower earn, pulled dots shift to your color, right-click swaps"
    owl_240 earned-reach   "150→1500px range, ~45s to max, moving or swapping resets progress"
    owl_241 slow-pulse     "100→2000px range, ~2min to max, breathing pulse rings show influence"
    owl_242 spark-bleed    "heavier when holding, collisions spark, your color bleeds onto them, theirs onto you"
    owl_243 long-memory    "history page with patterns, co-occurrence, warm-chair for first-timers"
    owl_244 carry-through  "you/mirror voices distinct, ghost-toggle removed, history→conversation works"
    owl_245 two-voices     "mirror=green left border, you=gray right border, unified visual system"
    owl_246 stay-here      "note input appears at click location, not fixed center-bottom"
    owl_247 ray-from-god   "element markers appear at click location, mainThreadDot only counts legacy threads"
    owl_248 soft-ray       "markers now subtle outline rings, no pulse, hover to expand"
    owl_249 reflection     "export copies directly to clipboard, mirror→reflection everywhere"
    owl_250 just-notes     "notes only (no threads), one source of truth, export clears"
    owl_251 one-pick       "debug radio group: n loops, a warns once then accepts, × loops"
    owl_252 live-dots      "Firebase realtime + data model panel + auto-join build room"
    owl_253 unified-store  "one data layer, swappable backend — demo and live use same API"
    owl_254 one-door       "SimulationBackend writes to Store.dots like Firebase — prove before build"
    owl_255 small-lives    "each dot is a little life — state machine restored, per-frame wandering"
    owl_256 write-visible  "Firebase x/y updates flow through, sync pipeline visible in debug"
    owl_257 real-live      "sim detection uses _isSimulated flag, not ID prefix — real users labeled correctly"
    owl_258 color-sticks   "color influence persists when you pull dots — change happens and stays"
    owl_259 same-color     "color changes go to Firebase — everyone sees the same colors"
    owl_260 true-color     "you see when someone changes your color, rejoin respects Firebase color"
    owl_261 click-syncs    "right-click color change writes to Firebase — everyone sees it"
    owl_262 mapped         "Data Connections section documents all Firebase read/write paths"
    owl_263 live-log       "Events section shows actual data flow — verify by seeing, not assuming"
    owl_264 two-tabs       "Data model: State + Events tabs, events grouped by type with catalog; live dots stay calm"
    owl_265 phase-aware    "Debug panel phase-aware: connect shows dots/positions, reflect shows people/signals"
    owl_266 signal-pipe    "Signal pipeline: regex → AI → store. Records: { text, type, flags: { name, id, crisis } }"
    owl_267 ai-class       "Real Anthropic API for classification, expanded regex, local fallback"
    owl_268 see-pipe       "Full pipeline visibility: regex matches, API call/response, reasoning"
    owl_269 auto-type      "Auto mode (·) lets AI decide type instead of forcing ouch/wow"
    owl_270 you-tell-us    "Unknown type prompts user to choose instead of guessing"
    owl_271 no-guess       "No local heuristics — AI or ask user. Prominent API key banner."
    owl_272 wait-ready     "Message stays visible while processing, shrinks only when toast is ready"
    owl_273 data-clear     "Event data as structured key-value rows, pipeline events ordered to tell the story"
    owl_274 fire-store     "API stubbed, signals write to Firebase (rooms/{code}/signals), flow tracking"
    owl_275 phase-sync     "Facilitator phase changes sync to Firebase, participants follow"
    owl_276 fresh-room     "startSession() writes phase to Firebase, fresh room code"
    owl_277 status-sync    "Phase listener updates session.status, API key banner hidden, student feedback button"
    owl_278 soft-landing   "Students switch to demo mode on patterns phase — see simulated data"

  JETTISONED — tried, learned, released:
  
    owl_40  dream-mode    WHAT: floating threads, particles, dragging
                          WHY CUT: complexity exceeded value
                          KEPT: the idea → became meeting-mode (simpler)
    
    owl_48  state-movement WHAT: here/working/still/distracted/away states
                          WHY CUT: broke the gentle drift, felt chaotic
                          KEPT: nothing — reverted fully to owl_37

  SNAPSHOTS — stable, tested, safe to return:
  
    owl_37  → "pre-lab, product worked"
    owl_52  → "movement restored, protocol complete"
    owl_54  → "quintet complete, ready for API"

  IF TOUCHING KNOWN GOOD:
    → check against the source version
    → flag if diverging
    → ask before changing

────────────────────────────────────────────────────────────────────────────────
SLOW POUR — how turns work
────────────────────────────────────────────────────────────────────────────────

  Sam sends notes like:
    --- noticing (phase) ---
    1. [selector] "words"
    2. [selector] "words"

  You respond:

    1. RECEIVE   → thread table (# / type / element / thread)
    2. CLARIFY   → if ambiguous, offer options as table — don't guess
    3. PROPOSE   → lean one direction, say why
    4. WAIT      → "does that land, or shape it differently?"
  
  Only after Sam confirms → build → produce file.
  
  This is the slow pour. The wait is the work.

────────────────────────────────────────────────────────────────────────────────
THREAD LABELS
────────────────────────────────────────────────────────────────────────────────

  🔴 BUG     → fix first
  feature   → build next  
  question  → hold until shaped
  wow       → PROTECT — do not change unless asked

  If new thread overlaps existing → MERGE and note it.

────────────────────────────────────────────────────────────────────────────────
SPATIAL ANCHORS — where things live
────────────────────────────────────────────────────────────────────────────────

  lower-left    → debug door (logo toggle), quiet, always there
  center        → content, what the user came to do
  upper-right   → room state (people, timer, phase)
  
  When adding an element to a new screen:
    → check where it lives on existing screens
    → match placement, not just presence
  
  Drift in placement is a notice.
  Consistency across screens is a wow.

────────────────────────────────────────────────────────────────────────────────
EVERY BUILD PRODUCES
────────────────────────────────────────────────────────────────────────────────

  1. New versioned file (owl_XX_two-word-name.html)
  2. Thread status table (open / hold / resolved / merged)
  3. Updated turn overlay (you said / I tried / notice)
  4. Changelog entry at bottom (inside HTML comment)

────────────────────────────────────────────────────────────────────────────────
CURRENT THREADS
────────────────────────────────────────────────────────────────────────────────

  [open]
    #1 feature — show "me" dot in footer, unique/random design each session
  
  [hold]  
    - recording movement for consistency → needs design
    - journey + use cases → bigger conversation
  
  [resolved]
    - chaotic movement → owl_52_found-it
    - thread naming → owl_54_name-it
    - stark black start button → owl_55_soft-go
  
  [wow] ← PROTECT
    - reveal flow feels alive
    - exp-chip shows what's possible
    - ouch/wow input feels real
    - jitter feels like presence ← RESTORED owl_52
    - pause works now

────────────────────────────────────────────────────────────────────────────────
LAST TURN: owl_233_owl-debug
────────────────────────────────────────────────────────────────────────────────

  - added: "← patterns" back button to experiment screen
  - changed: clickQuote now appends to conversation instead of resetting
  - new function: addQuoteToConversation() — quotes join the thread
  - new function: goBackToPatterns() — back without losing work
  - named: keeps-going — the conversation accumulates
  - fixed: notes persist after copy (only cleared by explicit clear action)
  - added: "wow if:" field in notes panel input
  - added: stored notes render when panel opens
  - changed: pause icon ❚❚ → ⏸ (less columnar)
  - reflection: kept-notes — the work stays visible

────────────────────────────────────────────────────────────────────────────────
SIZE BUDGET
────────────────────────────────────────────────────────────────────────────────

  target:   20k lines
  current:  ~22.5k lines
  overage:  ~2.5k → getting closer

  When over budget, prune before adding.

────────────────────────────────────────────────────────────────────────────────
WHERE TO LOOK
────────────────────────────────────────────────────────────────────────────────

  BUILD INFO:     ~line 13715 (BUILD_NUM, BUILD_NAME — UPDATE EACH BUILD)
  State model:    ~line 13750 (let state = {...})
  Session model:  ~line 13820 (const session = {...})
  People states:  ~line 14720 (movement logic)
  Tracker/threads: ~line 18000 (trackerState)
  Comfy share:    ~line 18480 (updateComfyShare)

VERSION: owl_203_travel-light
═══════════════════════════════════════════════════════════════════════════════
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>owl · 252 · live-dots</title>
    <style>
        /* ═══════════════════════════════════════════════════════════════════════════
           VISUAL DESIGN SYSTEM
           The look and feel of the product. This IS the work.
           ═══════════════════════════════════════════════════════════════════════════ */
        
        /* ─────────────────────────────────────────────────────────────────────────
           DESIGN PRINCIPLES
           - No emoji in UX. Use symbols, text, or animations instead.
           - Emoji may be used in discussion/documentation to convey framing,
             but the actual interface uses typographic symbols (→ ✓ ✗ ● ○)
             or CSS animations for feedback.
           ───────────────────────────────────────────────────────────────────────── */
        
        /* ─────────────────────────────────────────────────────────────────────────
           DESIGN TOKENS
           Colors, typography, spacing — the visual vocabulary
           ───────────────────────────────────────────────────────────────────────── */
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
        
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        :root {
            --bg: #f5f5f4;
            --bg-warm: #faf9f7;
            --bg-ouch: #f0e4df;
            --bg-wow: #e4f0e8;
            --ouch: #d4a89a;
            --ouch-dark: #a07060;
            --ouch-text: #7a6a5a;
            --wow: #9ac4a8;
            --wow-dark: #507a58;
            --wow-text: #4a6a50;
            --gold: #b8a060;
            --text: #333;
            --text-mid: #555;
            --text-light: #888;
            --text-lighter: #bbb;
            --border: #e8e8e6;
            --card: #fff;
            --swirl: conic-gradient(from 0deg, #d4a89a, #c4956a, #9ac4a8, #7a9a7e, #d4a89a);
            --timer: #7fa8c9;
            --timer-urgent: #c9a87f;
            --timer-empty: #dce8f0;
        }
        
        body {
            font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            min-height: 100dvh;
            transition: background-color 0.4s ease;
            overflow-x: hidden;
        }
        
        body.bg-ouch { background: var(--bg-ouch); }
        body.bg-wow { background: var(--bg-wow); }
        
        /* ─────────────────────────────────────────────────────────────────────────
           PLATFORM: TEST HARNESS STYLES
           Your tools for building/verifying. Not user-facing.
           ───────────────────────────────────────────────────────────────────────── */
        
        /* ============ LAB MODE ============ */
        
        /* Hide lab signals by default */
        .lab-signals { 
            display: none;
            pointer-events: none;
        }
        
        /* Show signals on collect phase */
        body.lab-mode .lab-sliders { display: flex; pointer-events: auto; }
        
        /* Signals only on collect phase */
        body.lab-mode[data-lab-phase="collect"] .lab-signals { display: flex; pointer-events: auto; }
        
        /* Logo gradient when active — only affects "ouch wow lab" text, not children */
        .unified-header .logo { cursor: pointer; transition: all 0.3s; }
        body.lab-mode .unified-header .logo {
            background: linear-gradient(135deg, var(--ouch) 0%, var(--wow) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Reset text-fill for version badge so it's visible */
        body.lab-mode .unified-header .logo .version-badge {
            -webkit-text-fill-color: initial;
            background: linear-gradient(135deg, var(--bg-ouch) 0%, var(--bg-wow) 100%);
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }
        
        /* ============ LAB MODE - MINIMAL OVERLAY ============ */
        
        /* Hide lab elements by default */
        .lab-journey-rail, .lab-role-badge, .lab-role-modal, .lab-feedback-float {
            display: none;
            pointer-events: none;
        }
        
        /* Show when lab mode active */
        body.lab-mode .lab-journey-rail { display: flex; pointer-events: auto; }
        body.lab-mode .lab-role-badge { display: flex; pointer-events: auto; }
        body.lab-mode .lab-feedback-float { display: flex; pointer-events: auto; }
        
        /* Highlight interactive elements in lab mode */
        body.lab-mode .people-group {
            position: relative;
        }
        
        body.lab-mode .people-group::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 1px dashed rgba(154, 196, 168, 0.3);
            border-radius: 8px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        body.lab-mode .people-group:hover::after {
            opacity: 1;
        }
        
        body.lab-mode .segments {
            position: relative;
        }
        
        body.lab-mode .segments::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 1px dashed rgba(127, 168, 201, 0.3);
            border-radius: 4px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        body.lab-mode .segments:hover::after {
            opacity: 1;
        }
        
        /* ============ JOURNEY RAIL (numbered steps that drive the story) ============ */
        /* Default: Left sidebar journey rail */
        .lab-journey-rail {
            position: fixed;
            left: 12px;
            top: 56px;
            bottom: 70px;
            width: auto;
            min-width: 200px;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            z-index: 1001;
            padding: 16px 12px;
            display: none;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(12px);
            border-radius: 16px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        }
        
        body.lab-mode .lab-journey-rail {
            display: flex;
        }
        
        body.lab-mode .lab-journey-rail.hidden {
            display: none;
        }
        
        .journey-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background: none;
            border: none;
            font-size: 18px;
            color: #999;
            cursor: pointer;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            z-index: 1;
        }
        
        .journey-close:hover {
            background: #f0f0f0;
            color: #666;
        }
        
        .journey-line {
            position: absolute;
            left: 32px;
            top: 50px;
            bottom: 70px;
            width: 2px;
            background: linear-gradient(to bottom, 
                rgba(154, 196, 168, 0.4) 0%,
                rgba(154, 196, 168, 0.2) 50%,
                rgba(184, 160, 96, 0.2) 80%,
                rgba(184, 160, 96, 0.1) 100%
            );
            border-radius: 1px;
        }
        
        .journey-section {
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
            padding-top: 24px;
        }
        
        .journey-section:first-child {
            padding-top: 4px;
        }
        
        /* Section labels */
        .journey-section::before {
            content: attr(data-label);
            display: block;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-lighter);
            padding: 0 8px 6px 8px;
            margin-left: 34px;
        }
        
        .journey-section:first-child::before {
            padding-top: 0;
        }
        
        .journey-step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 40px 10px 10px;  /* extra right padding for thread badge */
            border: none;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            min-height: 48px;
        }
        
        .journey-step:hover {
            background: rgba(154, 196, 168, 0.1);
            border-radius: 10px;
        }
        
        .journey-step:hover .journey-step-name {
            color: var(--text);
        }
        
        .journey-step:hover .journey-step-dot {
            transform: scale(1.15);
            border-color: var(--wow);
        }
        
        .journey-step-dot {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 2px solid rgba(154, 196, 168, 0.4);
            background: var(--card);
            transition: all 0.2s;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .journey-step.active .journey-step-dot {
            border-color: var(--wow);
            background: var(--wow);
            box-shadow: 0 0 14px rgba(154, 196, 168, 0.5);
        }
        
        .journey-step.past .journey-step-dot {
            border-color: var(--wow);
            background: rgba(154, 196, 168, 0.3);
        }
        
        .journey-step-num {
            position: absolute;
            left: 10px;
            width: 26px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: rgba(154, 196, 168, 0.6);
            font-family: inherit;
            pointer-events: none;
        }
        
        .journey-step.active .journey-step-num {
            color: white;
        }
        
        .journey-step.past .journey-step-num {
            color: var(--wow);
        }
        
        .journey-step-name {
            font-size: 15px;
            color: var(--text-light);
            font-family: inherit;
            transition: color 0.2s;
            margin-left: 4px;
            font-weight: 500;
        }
        
        .journey-step.active .journey-step-name {
            color: var(--wow-dark);
            font-weight: 600;
        }
        
        .journey-step.past .journey-step-name {
            color: var(--text-lighter);
        }
        
        .journey-step-status {
            font-size: 11px;
            margin-left: auto;
            padding-left: 8px;
            opacity: 0.6;
        }
        
        .journey-step:hover .journey-step-status {
            opacity: 1;
        }
        
        .journey-step-status[data-status="verified"] { color: var(--wow); opacity: 1; }
        .journey-step-status[data-status="partial"] { color: var(--gold); opacity: 1; }
        .journey-step-status[data-status="untested"] { color: var(--text-lighter); }
        
        /* Thread badge on journey steps */
        .journey-step-threads {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            border-radius: 10px;
            background: #7c3aed;
            color: white;
            font-size: 11px;
            font-weight: 600;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .journey-step-threads.has-threads {
            display: flex;
        }
        
        .journey-step-threads.needs-attention {
            background: var(--ouch);
            animation: threadBadgePulse 2s ease-in-out infinite;
        }
        
        @keyframes threadBadgePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(232, 180, 188, 0.4); }
            50% { box-shadow: 0 0 0 4px rgba(232, 180, 188, 0); }
        }
        
        .journey-step-signals {
            display: none;
        }
        
        .journey-step.not-in-flow {
            opacity: 0.25;
            pointer-events: none;
        }
        
        .journey-step.not-in-flow .journey-step-dot {
            border-style: dotted;
        }
        
        /* ═══ EXPERIMENT EXPLORATION CALLOUT ═══ */
        /* Beautiful card showing the journey: being → note → refinement → experiment */
        
        .exp-callout {
            position: fixed;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 0;
            width: 380px;
            max-width: calc(100vw - 220px);
            max-height: calc(100vh - 120px);
            overflow-y: auto;
            box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
            z-index: 2000;
            opacity: 0;
            transform: translateX(-10px) scale(0.98);
            transition: all 0.2s ease-out;
        }
        
        .exp-callout.open {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
        
        .exp-callout-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(184, 160, 96, 0.08) 0%, transparent 100%);
        }
        
        .exp-callout-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .exp-callout-title::before {
            content: '◇';
            color: var(--gold);
        }
        
        .exp-callout-close {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-lighter);
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            border-radius: 50%;
            transition: all 0.15s;
        }
        
        .exp-callout-close:hover {
            color: var(--text);
            background: var(--bg);
        }
        
        .exp-callout-empty {
            padding: 40px 20px;
            text-align: center;
            color: var(--text-light);
            font-size: 14px;
        }
        
        .exp-callout-empty-icon {
            font-size: 32px;
            margin-bottom: 12px;
            opacity: 0.4;
        }
        
        /* Single experiment card with origin path */
        .exp-card {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .exp-card:last-child {
            border-bottom: none;
        }
        
        .exp-card.active {
            background: linear-gradient(135deg, rgba(154, 196, 168, 0.08) 0%, transparent 100%);
        }
        
        /* The origin path: being → note → refinement → experiment */
        .exp-origin-path {
            margin-bottom: 16px;
        }
        
        .exp-path-step {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 8px 0;
            position: relative;
        }
        
        .exp-path-step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 11px;
            top: 28px;
            bottom: -8px;
            width: 2px;
            background: linear-gradient(to bottom, var(--border) 0%, var(--border) 50%, transparent 100%);
        }
        
        .exp-path-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--bg);
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        
        .exp-path-step.being .exp-path-dot {
            background: linear-gradient(135deg, var(--bg-ouch) 0%, var(--bg-wow) 100%);
            border-color: var(--gold);
            color: var(--gold);
        }
        
        .exp-path-step.note .exp-path-dot {
            background: var(--bg);
            border-color: var(--text-lighter);
            color: var(--text-light);
        }
        
        .exp-path-step.refinement .exp-path-dot {
            background: rgba(127, 168, 201, 0.15);
            border-color: var(--timer);
            color: var(--timer);
        }
        
        .exp-path-step.experiment .exp-path-dot {
            background: var(--wow);
            border-color: var(--wow);
            color: white;
        }
        
        .exp-path-content {
            flex: 1;
            min-width: 0;
        }
        
        .exp-path-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-lighter);
            margin-bottom: 2px;
        }
        
        .exp-path-text {
            font-size: 13px;
            color: var(--text);
            line-height: 1.4;
        }
        
        .exp-path-text.quote {
            font-style: italic;
            color: var(--text-mid);
        }
        
        .exp-path-text.quote::before,
        .exp-path-text.quote::after {
            content: '"';
            color: var(--text-lighter);
        }
        
        /* Expandable path steps */
        .exp-path-step.collapsed .exp-path-content {
            display: none;
        }
        
        .exp-path-step.collapsed .exp-path-dot {
            cursor: pointer;
            opacity: 0.6;
        }
        
        .exp-path-step.collapsed .exp-path-dot:hover {
            opacity: 1;
        }
        
        .exp-path-expand {
            font-size: 10px;
            color: var(--text-lighter);
            margin-left: auto;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.15s;
        }
        
        .exp-path-expand:hover {
            background: var(--bg);
            color: var(--text-light);
        }
        
        /* The experiment itself (highlighted) */
        .exp-main {
            background: var(--bg);
            border-radius: 12px;
            padding: 16px;
            margin-top: 12px;
        }
        
        .exp-main-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .exp-main-title .exp-status {
            font-size: 10px;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 10px;
            background: var(--gold);
            color: white;
        }
        
        .exp-main-title .exp-status.on {
            background: var(--wow);
        }
        
        .exp-main-title .exp-status.shipped {
            background: var(--text-light);
        }
        
        .exp-main-desc {
            font-size: 13px;
            color: var(--text-light);
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        /* Action buttons */
        .exp-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }
        
        .exp-action-btn {
            padding: 8px 16px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: white;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-mid);
        }
        
        .exp-action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .exp-action-btn.approve {
            background: var(--wow);
            border-color: var(--wow);
            color: white;
        }
        
        .exp-action-btn.approve:hover {
            background: var(--wow-dark);
            border-color: var(--wow-dark);
        }
        
        .exp-action-btn.reject {
            color: var(--ouch-dark);
            border-color: var(--ouch);
        }
        
        .exp-action-btn.reject:hover {
            background: var(--ouch);
            color: white;
        }
        
        .exp-action-btn.chat {
            color: var(--text-light);
        }
        
        .exp-action-btn.chat:hover {
            background: var(--bg);
            border-color: var(--text-lighter);
        }
        
        /* Legacy step-exp-panel styles (keeping for backward compat) */
        .step-exp-panel {
            position: fixed;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0;
            min-width: 280px;
            max-width: 320px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            z-index: 2000;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.15s ease-out;
        }
        
        .step-exp-panel.open {
            opacity: 1;
            transform: translateX(0);
        }
        
        .step-exp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .step-exp-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }
        
        .step-exp-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-lighter);
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        
        .step-exp-close:hover {
            color: var(--text);
        }
        
        .step-exp-list {
            padding: 8px;
        }
        
        .step-exp-item {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 6px;
            background: var(--bg);
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }
        
        .step-exp-item:last-child {
            margin-bottom: 0;
        }
        
        .step-exp-item.active {
            background: linear-gradient(135deg, rgba(154, 196, 168, 0.15) 0%, rgba(154, 196, 168, 0.05) 100%);
            border-left: 3px solid var(--wow);
        }
        
        .step-exp-main {
            flex: 1;
            min-width: 0;
        }
        
        .step-exp-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
        }
        
        .step-exp-problem {
            font-size: 12px;
            color: var(--text-light);
            line-height: 1.4;
        }
        
        .step-exp-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }
        
        .step-exp-btn {
            width: 28px;
            height: 28px;
            border: 1px solid var(--border);
            border-radius: 50%;
            background: white;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            color: var(--text-light);
        }
        
        .step-exp-btn:hover {
            transform: scale(1.1);
        }
        
        .step-exp-btn.accept:hover,
        .step-exp-btn.accept.current { 
            background: var(--wow); 
            border-color: var(--wow); 
            color: white; 
        }
        
        .step-exp-btn.reject:hover,
        .step-exp-btn.reject.current { 
            background: var(--ouch); 
            border-color: var(--ouch); 
            color: white; 
        }
        
        .step-exp-btn.chat:hover { 
            background: var(--bg); 
            border-color: var(--text-light); 
        }
        
        /* ═══ NEW CHANGE TOAST ═══ */
        .new-change-toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: var(--wow);
            color: white;
            padding: 16px 20px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 8px 32px rgba(154, 196, 168, 0.4);
            z-index: 3000;
            opacity: 0;
            transition: all 0.2s ease-out;
        }
        
        .new-change-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        .new-change-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        
        .new-change-text {
            flex: 1;
        }
        
        .new-change-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .new-change-name {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .new-change-dismiss {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .new-change-dismiss:hover {
            background: rgba(255,255,255,0.3);
        }
        
        /* Alt path (vote) styling */        .signal-btn.chat:hover {
            background: var(--bg);
        }
        
        /* Alt path (vote) styling */
        .journey-section[data-flow="vote"] {
            margin-top: 4px;
            padding-top: 4px;
        }
        
        .journey-section[data-flow="vote"]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 8px;
            right: 8px;
            height: 1px;
            background: linear-gradient(to right, rgba(184, 160, 96, 0.3), transparent);
        }
        
        .journey-section[data-flow="vote"] .journey-step-dot {
            border-color: rgba(184, 160, 96, 0.4);
        }
        
        .journey-section[data-flow="vote"] .journey-step-num {
            color: rgba(184, 160, 96, 0.6);
        }
        
        .journey-section[data-flow="vote"] .journey-step.active .journey-step-dot {
            border-color: var(--gold);
            background: var(--gold);
            box-shadow: 0 0 12px rgba(184, 160, 96, 0.5);
        }
        
        .journey-section[data-flow="vote"] .journey-step.active .journey-step-num {
            color: white;
        }
        
        .journey-section[data-flow="vote"] .journey-step.active .journey-step-name {
            color: var(--gold);
        }
        
        .journey-section[data-flow="vote"] .journey-step.past .journey-step-dot {
            border-color: var(--gold);
            background: rgba(184, 160, 96, 0.2);
        }
        
        .journey-section[data-flow="vote"] .journey-step.past .journey-step-num {
            color: var(--gold);
        }
        
        .journey-section[data-flow="vote"] .journey-step:hover .journey-step-dot {
            border-color: var(--gold);
        }
        
        /* ============ ROLE BADGE ============ */
        .lab-role-badge {
            position: fixed;
            top: 12px;
            left: 120px;
            background: var(--card);
            padding: 6px 14px;
            border-radius: 16px;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            border: 1px solid var(--border);
            transition: all 0.2s;
            z-index: 1002;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            display: none;
        }
        
        body.lab-mode .lab-role-badge {
            display: flex;
        }
        
        .lab-role-badge:hover {
            border-color: #ccc;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .role-badge-who {
            font-size: 12px;
            font-weight: 500;
            color: var(--text);
        }
        
        .role-badge-sep {
            color: var(--text-lighter);
            font-size: 10px;
        }
        
        .role-badge-contract {
            font-size: 11px;
            color: var(--wow-dark);
            cursor: pointer;
        }
        
        .role-badge-contract:hover {
            text-decoration: underline;
        }
        
        .role-badge-toggle {
            padding: 4px 10px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: transparent;
            color: var(--text-light);
            font-size: 11px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .role-badge-toggle:hover {
            border-color: #ccc;
            color: var(--text);
        }
        
        .role-badge-toggle.active {
            background: rgba(154, 196, 168, 0.15);
            border-color: var(--wow);
            color: var(--wow-dark);
        }
        
        /* ============ ROLE MODAL ============ */
        .lab-role-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.3);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        
        .lab-role-modal.show {
            display: flex;
            pointer-events: auto;
        }
        
        .role-modal-content {
            background: var(--card);
            border-radius: 20px;
            padding: 24px;
            width: 300px;
            border: 1px solid var(--border);
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }
        
        .role-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            color: var(--text);
            font-size: 16px;
            font-weight: 500;
        }
        
        .role-modal-close {
            background: none;
            border: none;
            color: var(--text-lighter);
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        
        .role-modal-close:hover { color: var(--text-light); }
        
        .role-modal-warning {
            background: rgba(212, 168, 154, 0.1);
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 12px;
            color: var(--ouch-dark);
            margin-bottom: 20px;
        }
        
        .role-modal-section {
            margin-bottom: 16px;
        }
        
        .role-modal-label {
            font-size: 10px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .role-modal-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .role-modal-btn {
            padding: 8px 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg);
            color: var(--text-light);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .role-modal-btn:hover {
            background: var(--card);
            border-color: #ccc;
            color: var(--text);
        }
        
        .role-modal-btn.selected {
            background: rgba(154, 196, 168, 0.15);
            border-color: var(--wow);
            color: var(--wow-dark);
        }
        
        .role-modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        .role-modal-cancel {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: transparent;
            color: var(--text-light);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
        }
        
        .role-modal-cancel:hover {
            background: var(--bg);
        }
        
        .role-modal-apply {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 10px;
            background: var(--wow);
            color: #fff;
            font-size: 13px;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
        }
        
        .role-modal-apply:hover {
            background: var(--wow-dark);
        }
        
        /* Role badge - add contract display */
        .role-badge-contract {
            font-size: 10px;
            color: var(--wow);
        }
        
        /* ============ LAB CONTROLS (consolidated menu above logo) ============ */
        .lab-controls {
            position: fixed;
            bottom: 52px;
            left: 12px;
            background: var(--card);
            padding: 6px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            z-index: 1001;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            display: none;
            align-items: center;
            gap: 6px;
        }
        
        body.lab-mode .lab-controls {
            display: flex;
        }
        
        .lab-ctrl-btn {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 8px;
            background: var(--bg);
            color: var(--text-light);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .lab-ctrl-btn:hover {
            background: var(--border);
            color: var(--text);
        }
        
        .lab-ctrl-btn.active {
            background: var(--wow);
            color: white;
        }
        
        .ctrl-icon {
            font-size: 13px;
        }
        
        .ctrl-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 16px;
            height: 16px;
            background: var(--wow);
            color: white;
            font-size: 10px;
            font-weight: 600;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        
        .ctrl-badge:empty,
        .ctrl-badge[data-count="0"] {
            display: none;
        }
        
        .lab-ctrl-divider {
            width: 1px;
            height: 20px;
            background: var(--border);
            margin: 0 4px;
        }
        
        .realtime-status {
            font-family: monospace;
            font-size: 10px;
            color: var(--text-lighter);
            padding: 0 6px;
            cursor: default;
        }
        
        .realtime-status.live {
            color: var(--wow-dark);
        }
        
        .realtime-status.error {
            color: var(--ouch-dark);
        }
        
        /* ============ DATA MODEL PANEL ============ */
        .debug-console {
            display: none;
            position: fixed;
            top: 60px;
            right: 12px;
            width: 320px;
            max-height: calc(100vh - 120px);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-family: 'DM Sans', system-ui, sans-serif;
            font-size: 11px;
            color: var(--text);
            z-index: 1002;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        }
        
        /* Show with .visible (global shortcut) or .show (lab mode button) */
        .debug-console.visible { display: block; }
        body.lab-mode .debug-console.show { display: block; }
        
        .debug-console-header {
            padding: 12px 14px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .debug-console-header span {
            font-weight: 500;
            color: var(--text-mid);
            font-size: 12px;
        }
        
        .debug-console-close {
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            font-size: 16px;
            padding: 0 4px;
        }
        
        .debug-console-close:hover {
            color: var(--text);
        }
        
        .debug-console-body {
            padding: 0;
            max-height: calc(100vh - 180px);
            overflow-y: auto;
        }
        
        .debug-section-header {
            padding: 10px 14px;
            background: var(--bg);
            color: var(--text-mid);
            font-weight: 500;
            font-size: 11px;
            border-bottom: 1px solid var(--border);
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .debug-section-header .mode-tag {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
        }
        
        .debug-section-header .mode-tag.demo {
            background: var(--bg-ouch);
            color: var(--ouch-dark);
        }
        
        .debug-section-header .mode-tag.live {
            background: var(--bg-wow);
            color: var(--wow-dark);
        }
        
        /* Dataset rows */
        .dataset-row {
            border-bottom: 1px solid var(--border);
        }
        
        .dataset-row.expanded {
            background: var(--bg);
        }
        
        .dataset-header {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .dataset-header:hover {
            background: var(--bg);
        }
        
        .dataset-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .dataset-status.wired {
            background: var(--wow);
            box-shadow: 0 0 6px var(--wow);
            animation: status-pulse 2s ease-in-out infinite;
        }
        
        @keyframes status-pulse {
            0%, 100% { box-shadow: 0 0 4px var(--wow); }
            50% { box-shadow: 0 0 10px var(--wow); }
        }
        
        .dataset-status.stubbed {
            background: var(--ouch);
            opacity: 0.5;
        }
        
        .dataset-name {
            flex: 1;
            font-weight: 500;
            color: var(--text);
        }
        
        .dataset-value {
            font-family: monospace;
            font-size: 11px;
            color: var(--text-mid);
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .dataset-arrow {
            color: var(--text-lighter);
            font-size: 10px;
            transition: transform 0.2s;
        }
        
        .dataset-row.expanded .dataset-arrow {
            transform: rotate(90deg);
        }
        
        /* Expanded detail */
        .dataset-detail {
            display: none;
            padding: 0 14px 12px 32px;
            font-size: 10px;
        }
        
        .dataset-row.expanded .dataset-detail {
            display: block;
        }
        
        .dataset-detail-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            border-bottom: 1px dashed var(--border);
        }
        
        .dataset-detail-row:last-child {
            border-bottom: none;
        }
        
        .dataset-detail-label {
            color: var(--text-light);
        }
        
        .dataset-detail-value {
            font-family: monospace;
            color: var(--text-mid);
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .dataset-detail-value.demo {
            color: var(--text-light);
        }
        
        .dataset-detail-value.live {
            color: var(--wow-dark);
        }
        
        .dataset-detail-value.active {
            font-weight: 600;
            position: relative;
        }
        
        .dataset-detail-value.active::before {
            content: '→';
            position: absolute;
            left: -14px;
            color: var(--wow-dark);
        }
        
        .dataset-path {
            font-family: monospace;
            font-size: 9px;
            color: var(--text-lighter);
            margin-top: 2px;
        }
        
        /* Live data stream */
        .dataset-stream {
            margin-top: 8px;
            padding: 8px;
            background: rgba(0,0,0,0.03);
            border-radius: 6px;
            font-family: monospace;
            font-size: 9px;
            max-height: 80px;
            overflow-y: auto;
        }
        
        .stream-entry {
            padding: 2px 0;
            color: var(--text-light);
            display: flex;
            gap: 8px;
        }
        
        .stream-entry .stream-time {
            color: var(--text-lighter);
            flex-shrink: 0;
        }
        
        .stream-entry .stream-value {
            color: var(--wow-dark);
        }
        
        .stream-entry.stale .stream-value {
            color: var(--text-lighter);
        }
        
        /* Live dots table */
        .live-dots-list {
            padding: 8px 14px;
        }
        
        .live-dot-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            font-size: 10px;
        }
        
        .live-dot-row:last-child {
            border-bottom: none;
        }
        
        .live-dot-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .live-dot-id {
            font-family: monospace;
            color: var(--text-light);
            flex: 1;
        }
        
        .live-dot-pos {
            font-family: monospace;
            color: var(--text-mid);
        }
        
        /* Data model tabs */
        .debug-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        
        .debug-tab {
            flex: 1;
            padding: 10px 14px;
            text-align: center;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-light);
            border-bottom: 2px solid transparent;
            transition: all 0.15s;
            position: relative;
            user-select: none; /* prevent text selection on click */
        }
        
        .debug-tab:hover {
            color: var(--text);
            background: var(--card);
        }
        
        .debug-tab.active {
            color: var(--text);
            border-bottom-color: var(--wow);
        }
        
        .debug-tab-badge {
            display: inline-block;
            min-width: 14px;
            height: 14px;
            font-size: 9px;
            font-weight: 600;
            line-height: 14px;
            padding: 0 4px;
            border-radius: 7px;
            margin-left: 4px;
            background: var(--text-lighter);
            color: white;
            pointer-events: none; /* clicks pass through to parent tab */
        }
        
        .debug-tab-badge.fresh {
            background: var(--wow);
            animation: badge-pulse 1s ease-out;
        }
        
        @keyframes badge-pulse {
            0% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        .debug-tab-content {
            display: none;
        }
        
        .debug-tab-content.active {
            display: block;
        }
        
        /* Events log styling */
        .event-log {
            /* no max-height here - parent handles scroll */
        }
        
        .event-row {
            padding: 8px 14px;
            border-bottom: 1px solid var(--border);
            font-family: monospace;
            font-size: 10px;
            cursor: pointer;
        }
        
        .event-row:hover {
            background: var(--bg);
        }
        
        .event-row.expanded {
            background: var(--bg);
        }
        
        .event-row.fresh {
            background: rgba(154, 196, 168, 0.1);
        }
        
        .event-header {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .event-dir {
            font-size: 12px;
            width: 20px;
            text-align: center;
        }
        
        .event-dir.outgoing { color: var(--ouch-dark); }
        .event-dir.incoming { color: var(--wow-dark); }
        
        .event-type {
            font-weight: 500;
            color: var(--text);
            flex: 1;
        }
        
        .event-time {
            color: var(--text-lighter);
            font-size: 9px;
        }
        
        .event-detail {
            display: none;
            margin-top: 8px;
            padding: 8px;
            background: rgba(0,0,0,0.03);
            border-radius: 6px;
            font-size: 9px;
            color: var(--text-mid);
            white-space: pre-wrap;
            word-break: break-all;
        }
        
        .event-row.expanded .event-detail {
            display: block;
        }
        
        .event-empty {
            padding: 24px 14px;
            text-align: center;
            color: var(--text-lighter);
            font-size: 11px;
        }
        
        .event-count {
            background: var(--bg);
            color: var(--text-light);
            font-size: 9px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 8px;
            min-width: 20px;
            text-align: center;
        }
        
        .event-row.fresh .event-count {
            background: var(--bg-wow);
            color: var(--wow-dark);
        }
        
        .event-structure {
            margin-bottom: 12px;
        }
        
        .event-structure-label,
        .event-instances-label {
            font-size: 9px;
            color: var(--text-lighter);
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .event-structure pre {
            margin: 0;
            padding: 8px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 9px;
            overflow-x: auto;
            max-height: 200px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }
        
        /* Structured data display */
        .event-data {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 6px 8px;
            font-size: 10px;
        }
        
        .event-data-row {
            display: flex;
            gap: 8px;
            padding: 3px 0;
            border-bottom: 1px dashed var(--border);
        }
        
        .event-data-row:last-child {
            border-bottom: none;
        }
        
        .event-data-key {
            color: var(--text-lighter);
            min-width: 70px;
            flex-shrink: 0;
        }
        
        .event-data-value {
            color: var(--text);
            word-break: break-word;
        }
        
        .event-data-value.highlight {
            color: var(--gold);
        }
        
        .event-data-value.ouch {
            color: var(--ouch);
        }
        
        .event-data-value.wow {
            color: var(--wow);
        }
        
        /* Pipeline sequence styling */
        .pipeline-step {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0;
        }
        
        .pipeline-step-num {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--border);
            color: var(--text);
            font-size: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .pipeline-step.active .pipeline-step-num {
            background: var(--gold);
            color: white;
        }
        
        .pipeline-step.done .pipeline-step-num {
            background: var(--wow);
            color: white;
        }
        
        .event-instances {
            border-top: 1px solid var(--border);
            padding-top: 8px;
        }
        
        .event-instance {
            display: flex;
            gap: 8px;
            padding: 3px 0;
            border-bottom: 1px dashed var(--border);
        }
        
        .event-instance:last-child {
            border-bottom: none;
        }
        
        .event-instance-time {
            color: var(--text-lighter);
            font-size: 9px;
            min-width: 24px;
        }
        
        .event-instance-detail {
            color: var(--text-mid);
            font-size: 9px;
            flex: 1;
        }
        
        /* Event catalog */
        .event-catalog {
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        
        .event-catalog-header {
            padding: 8px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 10px;
            font-weight: 500;
            color: var(--text-light);
        }
        
        .event-catalog-header:hover {
            color: var(--text);
        }
        
        .event-catalog-toggle {
            font-size: 8px;
            color: var(--text-lighter);
        }
        
        .event-catalog-body {
            display: none;
            padding: 0 14px 12px;
        }
        
        .event-catalog.expanded .event-catalog-body {
            display: block;
        }
        
        .event-catalog-section {
            margin-bottom: 8px;
        }
        
        .event-catalog-section:last-child {
            margin-bottom: 0;
        }
        
        .event-catalog-title {
            font-size: 9px;
            font-weight: 600;
            color: var(--text-mid);
            margin-bottom: 4px;
        }
        
        .event-catalog-item {
            font-size: 9px;
            color: var(--text-light);
            padding: 2px 0;
        }
        
        .event-catalog-item code {
            font-family: monospace;
            background: var(--card);
            padding: 1px 4px;
            border-radius: 3px;
            margin-right: 4px;
        }
        
        /* Local event direction styling */
        .event-dir.local { color: var(--gold); }
        
        /* Event section header */
        .event-section-header {
            padding: 8px 14px;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-light);
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* Flow-based event display */
        .event-flows {
            /* no max-height here - parent handles scroll */
        }
        
        .flow-row {
            padding: 10px 14px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }
        
        .flow-row:hover {
            background: var(--bg);
        }
        
        .flow-row.fresh {
            background: rgba(154, 196, 168, 0.08);
        }
        
        .flow-row.expanded {
            background: var(--bg);
        }
        
        .flow-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: monospace;
            font-size: 11px;
        }
        
        .flow-icon {
            font-size: 10px;
            width: 16px;
            text-align: center;
        }
        
        .flow-icon.ouch { color: var(--ouch); }
        .flow-icon.wow { color: var(--wow); }
        .flow-icon.blocked { color: var(--gold); }
        .flow-icon.pending { color: var(--text-light); }
        
        .flow-name {
            font-weight: 500;
            color: var(--text);
        }
        
        .flow-steps {
            font-size: 9px;
            color: var(--text-lighter);
            background: var(--card);
            padding: 2px 6px;
            border-radius: 8px;
        }
        
        .flow-duration {
            font-size: 9px;
            color: var(--text-lighter);
        }
        
        .flow-time {
            font-size: 9px;
            color: var(--text-lighter);
            margin-left: auto;
        }
        
        .flow-detail {
            display: none;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed var(--border);
        }
        
        .flow-row.expanded .flow-detail {
            display: block;
        }
        
        .flow-input {
            font-family: monospace;
            font-size: 10px;
            color: var(--text-mid);
            margin-bottom: 10px;
            padding: 6px 8px;
            background: var(--card);
            border-radius: 4px;
        }
        
        .flow-input-label {
            color: var(--text-lighter);
            margin-right: 6px;
        }
        
        .flow-input-text {
            color: var(--text);
        }
        
        .flow-steps-list {
            margin-left: 4px;
        }
        
        .flow-step {
            display: flex;
            gap: 8px;
            padding: 6px 0;
        }
        
        .flow-step-connector {
            font-family: monospace;
            color: var(--border);
            font-size: 12px;
            width: 12px;
            flex-shrink: 0;
        }
        
        .flow-step-content {
            flex: 1;
            min-width: 0;
        }
        
        .flow-step-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: monospace;
            font-size: 10px;
        }
        
        .flow-step-type {
            font-weight: 600;
            color: var(--text);
        }
        
        .flow-step-actor {
            color: var(--text-lighter);
            font-size: 9px;
        }
        
        .flow-step-time {
            color: var(--text-lighter);
            font-size: 9px;
            margin-left: auto;
        }
        
        .flow-step-detail {
            font-size: 9px;
            color: var(--text-mid);
            margin-top: 2px;
        }
        
        .flow-step-data {
            margin-top: 4px;
            padding: 4px 8px;
            background: var(--card);
            border-radius: 4px;
            font-size: 9px;
        }
        
        .flow-data-row {
            display: flex;
            gap: 6px;
            padding: 2px 0;
        }
        
        .flow-data-row .key {
            color: var(--text-lighter);
            min-width: 60px;
        }
        
        .flow-data-row .value {
            color: var(--text);
        }
        
        .flow-data-row .value.ouch { color: var(--ouch); }
        .flow-data-row .value.wow { color: var(--wow); }
        .flow-data-row .value.highlight { color: var(--gold); }
        
        .flow-result {
            margin-top: 10px;
            padding: 6px 8px;
            background: var(--card);
            border-radius: 4px;
            font-family: monospace;
            font-size: 10px;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .flow-result.ouch {
            border-left: 3px solid var(--ouch);
        }
        
        .flow-result.wow {
            border-left: 3px solid var(--wow);
        }
        
        .flow-result.blocked {
            border-left: 3px solid var(--gold);
        }
        
        .flow-result.pending {
            border-left: 3px solid var(--text-lighter);
        }
        
        .flow-result-pending {
            color: var(--text-light);
        }
        
        .flow-result-label {
            color: var(--text-lighter);
        }
        
        .flow-result-type {
            font-weight: 600;
        }
        
        .flow-result-type.ouch { color: var(--ouch); }
        .flow-result-type.wow { color: var(--wow); }
        
        .flow-result-id {
            color: var(--text-lighter);
            font-size: 9px;
        }
        
        .flow-result-blocked {
            color: var(--gold);
        }
        
        .flow-result-storage {
            color: var(--text-light);
            font-size: 9px;
        }

        /* Mode banner - shows SIMULATED or LIVE at top of screen */
        .mode-banner {
            display: none;
            position: fixed;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            padding: 4px 12px;
            border-radius: 12px;
            font-family: monospace;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            z-index: 9999;
            pointer-events: none;
        }
        
        body.lab-mode .mode-banner { display: block; }
        
        .mode-banner.demo {
            background: rgba(0, 0, 0, 0.6);
            color: #888;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .mode-banner.live {
            background: rgba(74, 222, 128, 0.15);
            color: #4ade80;
            border: 1px solid rgba(74, 222, 128, 0.3);
        }
        
        /* Experiment master button */
        .lab-exp-master {
            position: relative;
        }
        
        .exp-master-count {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 16px;
            height: 16px;
            background: var(--gold);
            color: white;
            font-size: 10px;
            font-weight: 600;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        
        .exp-master-count[data-count="0"] {
            background: var(--text-lighter);
        }
        
        .lab-exp-master.has-testing .exp-master-count {
            background: var(--gold);
            animation: pulse-gold 2s infinite;
        }
        
        @keyframes pulse-gold {
            0%, 100% { box-shadow: 0 0 0 0 rgba(184, 160, 96, 0.4); }
            50% { box-shadow: 0 0 0 4px rgba(184, 160, 96, 0); }
        }
        
        .lab-ctrl-sep {
            width: 1px;
            height: 20px;
            background: var(--border);
            margin: 0 4px;
        }
        
        .lab-ctrl-status {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-lighter);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .lab-ctrl-status:hover {
            background: var(--bg);
        }
        
        .lab-ctrl-status[data-status="untested"]:hover { color: var(--text-light); }
        .lab-ctrl-status[data-status="partial"]:hover { color: var(--gold); }
        .lab-ctrl-status[data-status="verified"]:hover { color: var(--wow); }
        
        .lab-ctrl-status.active[data-status="untested"] { color: var(--text); background: var(--bg); }
        .lab-ctrl-status.active[data-status="partial"] { color: var(--gold); background: rgba(184, 160, 96, 0.15); }
        .lab-ctrl-status.active[data-status="verified"] { color: var(--wow); background: rgba(154, 196, 168, 0.15); }
        
        /* Quality bar inline */
        .lab-quality {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .lab-quality .quality-track {
            width: 60px;
            height: 6px;
            background: var(--bg);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .lab-quality .quality-fill {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0%;
            background: linear-gradient(90deg, var(--ouch) 0%, var(--gold) 50%, var(--wow) 100%);
            border-radius: 3px;
            transition: width 0.2s ease;
        }
        
        .lab-quality .quality-label {
            font-size: 9px;
            color: var(--text-light);
            min-width: 32px;
        }
        
        /* ============ FEEDBACK MODAL ============ */
        .lab-feedback-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.3);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3001;
        }
        
        .lab-feedback-modal.show {
            display: flex;
        }
        
        .feedback-modal-content {
            background: var(--card);
            border-radius: 16px;
            padding: 20px;
            width: 340px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.2);
        }
        
        .feedback-modal-context {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        
        .feedback-context-sep {
            color: var(--text-lighter);
            margin: 0 4px;
        }
        
        .feedback-modal-element {
            font-size: 13px;
            font-family: monospace;
            color: var(--wow-dark);
            padding: 10px 12px;
            background: rgba(154, 196, 168, 0.1);
            border-radius: 8px;
            margin-bottom: 12px;
            border-left: 3px solid var(--wow);
        }
        
        .feedback-modal-input {
            width: 100%;
            min-height: 80px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
            background: var(--bg);
            color: var(--text);
        }
        
        .feedback-modal-input:focus {
            outline: none;
            border-color: var(--wow);
        }
        
        .feedback-modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }
        
        .feedback-cancel {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: transparent;
            color: var(--text-light);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
        }
        
        .feedback-save {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 10px;
            background: var(--wow);
            color: white;
            font-size: 13px;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
        }
        
        /* ============ PAUSE MODE ============ */
        body.lab-paused * {
            animation-play-state: paused !important;
            transition: none !important;
        }
        
        body.lab-paused .lab-pause-indicator {
            display: flex;
        }
        
        .lab-pause-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--card);
            border: 2px solid var(--gold);
            border-radius: 16px;
            padding: 16px 24px;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            z-index: 3000;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        }
        
        .pause-icon {
            font-size: 24px;
            color: var(--gold);
        }
        
        .pause-text {
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
            letter-spacing: 2px;
        }
        
        .pause-hint {
            font-size: 10px;
            color: var(--text-lighter);
        }
        
        /* ============ ELEMENT PICKER ============ */
        body.lab-picking {
            cursor: crosshair !important;
        }
        
        body.lab-picking * {
            cursor: crosshair !important;
        }
        
        .lab-picker-highlight {
            position: fixed;
            border: 2px solid var(--wow);
            background: rgba(154, 196, 168, 0.1);
            border-radius: 4px;
            pointer-events: none;
            z-index: 2999;
            display: none;
        }
        
        body.lab-picking .lab-picker-highlight {
            display: block;
        }
        
        .lab-picker-label {
            position: fixed;
            background: var(--text);
            color: white;
            font-size: 11px;
            font-family: monospace;
            padding: 4px 8px;
            border-radius: 4px;
            pointer-events: none;
            z-index: 3000;
            display: none;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        body.lab-picking .lab-picker-label {
            display: block;
        }
        
        /* ============ INLINE NOTE INPUT ============ */
        .lab-note-inline {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: var(--card);
            border-radius: 16px;
            padding: 8px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            z-index: 3001;
            display: none;
            min-width: 300px;
            max-width: 400px;
            opacity: 0;
            transition: all 0.15s ease-out;
        }
        
        .lab-note-inline.show {
            display: block;
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        .note-inline-input {
            width: 100%;
            border: none;
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 15px;
            font-family: inherit;
            background: var(--bg);
            color: var(--text);
            outline: none;
            resize: none;
            min-height: 50px;
            max-height: 150px;
            box-sizing: border-box;
        }
        
        .note-inline-input::placeholder {
            color: var(--text-lighter);
        }
        
        .note-inline-input:focus {
            background: white;
        }
        
        /* ============ ACCEPTANCE CRITERIA ROW ============ */
        .note-acceptance-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px 4px;
            border-top: 1px solid var(--border);
            margin-top: 4px;
        }
        
        .note-acceptance-label {
            font-size: 11px;
            color: var(--wow);
            white-space: nowrap;
            font-style: italic;
        }
        
        .note-acceptance-input {
            flex: 1;
            border: none;
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 12px;
            font-family: inherit;
            background: var(--bg);
            color: var(--text);
            outline: none;
        }
        
        .note-acceptance-input::placeholder {
            color: var(--text-lighter);
            font-style: italic;
        }
        
        .note-acceptance-input:focus {
            background: white;
        }
        
        /* ============ EXPORT BUTTON ============ */
        .lab-export-btn .ctrl-icon {
            font-style: normal;
            min-width: 16px;
        }
        
        .lab-export-btn.has-notes .ctrl-icon {
            color: var(--gold);
            font-weight: 600;
        }
        
        .lab-export-btn.copied {
            background: var(--wow) !important;
        }
        
        .lab-export-btn.copied .ctrl-icon {
            color: white !important;
        }
        
        /* ============ CLEAR DATA PANEL ============ */
        .clear-data-panel {
            position: fixed;
            top: 56px;
            right: 8px;
            width: 280px;
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            z-index: 2000;
            display: none;
        }
        
        body.lab-mode .clear-data-panel.show {
            display: block;
        }
        
        .clear-data-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            font-size: 13px;
            color: var(--text);
        }
        
        .clear-data-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-light);
            cursor: pointer;
        }
        
        .clear-data-content {
            padding: 16px;
        }
        
        .clear-data-section {
            margin-bottom: 16px;
        }
        
        .clear-data-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        
        .clear-data-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .clear-data-item:last-child {
            border-bottom: none;
        }
        
        .clear-item-name {
            font-size: 13px;
            color: var(--text);
        }
        
        .clear-item-count {
            font-size: 12px;
            font-weight: 600;
            background: var(--bg);
            padding: 2px 8px;
            border-radius: 10px;
            color: var(--text-mid);
        }
        
        .clear-item-count.has-data {
            background: #7c3aed;
            color: white;
        }
        
        .clear-item-status {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .clear-item-status.has-data {
            color: #7c3aed;
            font-weight: 500;
        }
        
        .clear-data-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .clear-action-btn {
            padding: 10px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        
        .clear-action-btn:hover {
            background: var(--card);
            border-color: var(--text-light);
        }
        
        .clear-action-btn.danger {
            background: var(--bg-ouch);
            border-color: rgba(232, 180, 188, 0.5);
            color: var(--ouch-dark);
        }
        
        .clear-action-btn.danger:hover {
            background: var(--ouch);
            color: white;
        }
        
        .lab-clear-btn {
            /* Red tint for clear button */
        }
        
        /* ============ API THREAD PANEL ============ */
        .api-thread-panel {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 380px;
            max-height: 60vh;
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.15);
            z-index: 2100;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        
        .api-thread-panel.show {
            display: flex;
        }
        
        .api-thread-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        
        .api-thread-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .api-status {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }
        
        .api-status.ready { background: var(--bg); color: var(--text-light); }
        .api-status.sending { background: var(--gold); color: white; }
        .api-status.streaming { background: var(--wow); color: white; }
        .api-status.error { background: var(--ouch); color: white; }
        
        .api-thread-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-light);
            cursor: pointer;
        }
        
        .api-thread-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        
        .api-key-section {
            margin-bottom: 16px;
        }
        
        .api-key-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 12px;
            font-family: monospace;
            background: var(--bg);
        }
        
        .api-key-input:focus {
            outline: none;
            border-color: var(--gold);
        }
        
        .api-key-hint {
            font-size: 10px;
            color: var(--text-light);
            margin-top: 6px;
        }
        
        .api-thread-note {
            background: var(--bg);
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .api-thread-note-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-light);
            text-transform: uppercase;
            margin-bottom: 6px;
        }
        
        .api-thread-note-text {
            font-size: 13px;
            color: var(--text);
            line-height: 1.5;
        }
        
        .api-response-section {
            margin-top: 16px;
        }
        
        .api-response-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-light);
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        
        .api-response-content {
            font-size: 13px;
            color: var(--text);
            line-height: 1.6;
            white-space: pre-wrap;
            font-family: inherit;
            background: var(--bg);
            padding: 12px;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .api-thread-actions {
            padding: 12px 16px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 8px;
        }
        
        .api-action-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .api-action-btn.primary {
            background: var(--text);
            color: white;
        }
        
        .api-action-btn.primary:hover {
            background: var(--text-mid);
        }
        
        .api-action-btn.secondary {
            background: var(--bg);
            color: var(--text-mid);
        }
        
        .api-action-btn.secondary:hover {
            background: var(--border);
        }
        
        .api-action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* ============ PROTOCOL PANEL ============ */
        .lab-protocol-panel {
            position: fixed;
            top: 56px;
            right: 8px;
            width: 480px;
            height: calc(100vh - 120px);
            max-height: none;
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            z-index: 2000;
            display: none;
            flex-direction: column;
        }
        
        body.lab-mode .lab-protocol-panel.show {
            display: flex;
        }
        
        .protocol-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            font-weight: 500;
            font-size: 13px;
            color: var(--text-mid);
        }
        
        .protocol-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-lighter);
            cursor: pointer;
        }
        
        .protocol-tabs {
            display: flex;
            gap: 2px;
            padding: 8px 8px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .protocol-tab {
            padding: 8px 12px;
            border: none;
            background: none;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-light);
            cursor: pointer;
            border-radius: 6px 6px 0 0;
            transition: all 0.15s;
        }
        
        .protocol-tab:hover {
            color: var(--text);
            background: var(--bg);
        }
        
        .protocol-tab.active {
            color: var(--text);
            background: var(--bg);
            border-bottom: 2px solid var(--wow);
        }
        
        .protocol-content {
            padding: 16px;
            overflow-y: auto;
            flex: 1;
            font-size: 13px;
            line-height: 1.6;
        }
        
        .protocol-content h3 {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            margin: 16px 0 8px;
        }
        
        .protocol-content h3:first-child {
            margin-top: 0;
        }
        
        .protocol-content p {
            margin: 0 0 12px;
            color: var(--text-mid);
        }
        
        .protocol-content ul {
            margin: 0 0 12px;
            padding-left: 20px;
        }
        
        .protocol-content li {
            margin-bottom: 4px;
            color: var(--text-mid);
        }
        
        .protocol-content code {
            background: var(--bg);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            font-family: 'SF Mono', Monaco, monospace;
        }
        
        .protocol-content .status-verified {
            color: var(--wow-dark);
        }
        
        .protocol-content .status-pending {
            color: var(--gold);
        }
        
        .protocol-content .status-bug {
            color: var(--ouch-dark);
        }
        
        .protocol-content .turn-scope {
            font-size: 11px;
            font-weight: 500;
            color: var(--gold);
            margin: -8px 0 12px;
        }
        
        .protocol-content .turn-quote {
            background: var(--bg);
            border-left: 3px solid var(--text-lighter);
            padding: 12px 16px;
            margin: 0 0 16px;
            font-style: italic;
            color: var(--text-mid);
            border-radius: 0 8px 8px 0;
            line-height: 1.5;
        }
        
        /* Design Space - the "lab within the lab" */
        .lab-design-space {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        
        .design-header {
            margin-bottom: 16px;
        }
        
        .design-header h3 {
            margin: 0 0 4px;
        }
        
        .design-section {
            margin-bottom: 16px;
        }
        
        .design-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-lighter);
            margin-bottom: 8px;
        }
        
        .design-workspace {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: var(--bg-warm);
            margin: 0 -16px -16px;
            padding: 16px;
            border-top: 1px solid var(--border);
        }
        
        .design-hint {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 12px;
        }
        
        .design-textarea {
            flex: 1;
            min-height: 200px;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            line-height: 1.6;
            resize: none;
            background: white;
        }
        
        .design-textarea:focus {
            outline: none;
            border-color: var(--wow);
            box-shadow: 0 0 0 3px rgba(154, 196, 168, 0.15);
        }
        
        .design-textarea::placeholder {
            color: var(--text-lighter);
            line-height: 1.8;
        }
        
        .design-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
        }
        
        .design-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            background: var(--wow);
            color: white;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .design-btn:hover {
            background: var(--wow-dark);
        }
        
        .design-status {
            font-size: 11px;
            color: var(--text-light);
        }
        
        .protocol-content .changelog-entry {
            padding-bottom: 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .protocol-content .changelog-entry:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .protocol-content .changelog-entry h3 {
            margin-top: 0;
        }

        /* ═══ INLINE EXPERIMENT INDICATOR ═══ */
        /* Shows when you're experiencing an experiment, with quick feedback buttons */
        .exp-active-indicator {
            position: fixed;
            top: 56px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, rgba(184, 160, 96, 0.95), rgba(170, 150, 90, 0.95));
            color: white;
            padding: 8px 16px;
            border-radius: 0 0 12px 12px;
            font-size: 12px;
            z-index: 1500;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: 320px;
        }
        
        .exp-indicator-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }
        
        .exp-indicator-label {
            font-weight: 600;
            letter-spacing: 0.3px;
        }
        
        .exp-indicator-hint {
            font-size: 10px;
            opacity: 0.7;
            font-style: italic;
        }
        
        .exp-indicator-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .exp-indicator-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.15);
            padding: 4px 8px;
            border-radius: 6px;
        }
        
        .exp-indicator-item.risky {
            background: rgba(212, 168, 154, 0.4);
            border-left: 2px solid rgba(255,255,255,0.5);
        }
        
        .exp-indicator-name {
            flex: 1;
            font-size: 11px;
            opacity: 0.9;
        }
        
        .exp-ind-btn {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            color: white;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
        
        .exp-ind-btn:hover {
            background: rgba(255,255,255,0.4);
            transform: scale(1.1);
        }
        
        .exp-ind-btn.yes:hover { background: var(--wow); }
        .exp-ind-btn.no:hover { background: var(--ouch); }
        
        /* Hide indicator when not in lab mode */
        body:not(.lab-mode) .exp-active-indicator {
            display: none;
        }
        
        .exp-note-input {
            width: 80px;
            padding: 4px 8px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 11px;
            font-family: inherit;
            background: var(--bg);
            color: var(--text);
        }
        
        .exp-note-input:focus {
            outline: none;
            border-color: var(--text-lighter);
            width: 120px;
        }
        
        /* Engagement toast */
        .exp-toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            padding: 12px 20px;
            background: var(--text);
            color: white;
            border-radius: 24px;
            font-size: 13px;
            font-weight: 500;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 4000;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .exp-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        .exp-toast.accept {
            background: var(--wow-dark);
        }
        
        .exp-toast.reject {
            background: var(--ouch-dark);
        }
        
        .exp-toast.note {
            background: var(--gold);
        }
        
        .exp-toast.ship {
            background: linear-gradient(135deg, var(--gold) 0%, var(--wow-dark) 100%);
        }
        
        .exp-toast-icon {
            font-size: 16px;
        }
        
        /* Experiment: hide journey status */
        body.exp-hide-journey-status .journey-step-status {
            display: none;
        }
        
        /* ============ IMPROVED NOTES PANEL - TABBED WORKFLOW ============ */
        .notes-tabs {
            display: flex;
            gap: 2px;
            margin-left: auto;
            background: var(--bg);
            padding: 3px;
            border-radius: 8px;
        }
        
        .notes-tab {
            padding: 6px 10px;
            border: none;
            background: transparent;
            color: var(--text-light);
            font-size: 11px;
            font-family: inherit;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .notes-tab:hover {
            background: var(--card);
            color: var(--text);
        }
        
        .notes-tab.active {
            background: var(--card);
            color: var(--text);
            font-weight: 500;
        }
        
        .tab-count {
            font-size: 10px;
            min-width: 16px;
            height: 16px;
            background: var(--border);
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        
        .notes-tab.active .tab-count {
            background: var(--wow);
            color: white;
        }
        
        .notes-panel-body {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .notes-tab-content {
            display: none;
            flex-direction: column;
            flex: 1;
            overflow: hidden;
        }
        
        .notes-tab-content.active {
            display: flex;
        }
        
        .tab-intro {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        
        .tab-intro-icon {
            font-size: 18px;
            opacity: 0.7;
        }
        
        .tab-intro-text {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .notes-list {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
        }
        
        .notes-panel-footer {
            display: flex;
            gap: 8px;
            padding: 12px 16px;
            border-top: 1px solid var(--border);
            background: var(--bg);
        }
        
        .notes-export-btn {
            flex: 1;
            padding: 10px 16px;
            border: none;
            border-radius: 8px;
            background: var(--text);
            color: white;
            font-size: 13px;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        
        .notes-export-btn:hover {
            background: var(--text-light);
        }
        
        .notes-clear-btn {
            padding: 10px 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: transparent;
            color: var(--text-light);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .notes-clear-btn:hover {
            border-color: var(--ouch);
            color: var(--ouch);
        }
        
        /* ============ LAB NOTES PANEL - SLIDE FROM RIGHT ============ */
        .lab-notes-panel {
            position: fixed;
            top: 0;
            right: 0;
            width: 380px;
            max-width: 90vw;
            height: 100vh;
            background: var(--card);
            border-left: 1px solid var(--border);
            z-index: 2500;
            display: none;
            flex-direction: column;
            box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
        }
        
        .lab-notes-panel[style*="display: block"] {
            display: flex !important;
        }
        
        .tracker-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
            flex-shrink: 0;
        }
        
        .tracker-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
        }
        
        .tracker-status {
            font-size: 11px;
            color: var(--text-light);
            margin-left: auto;
        }
        
        .tracker-header-btn {
            padding: 6px 12px;
            font-size: 11px;
            font-family: inherit;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-light);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .tracker-header-btn:hover {
            background: var(--card);
            border-color: var(--text-lighter);
            color: var(--text);
        }
        
        .tracker-close {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text-light);
            font-size: 16px;
            cursor: pointer;
            transition: all 0.15s;
            margin-left: 8px;
        }
        
        .tracker-close:hover {
            background: rgba(212, 168, 154, 0.15);
            border-color: var(--ouch);
            color: var(--ouch);
        }
        
        .tracker-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        
        .tracker-footer {
            padding: 12px 16px;
            border-top: 1px solid var(--border);
            background: var(--bg);
            flex-shrink: 0;
        }
        
        .quick-add {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .quick-add-row {
            display: flex;
            gap: 8px;
        }
        
        .quick-add-input {
            flex: 1;
            padding: 10px 14px;
            font-size: 13px;
            font-family: inherit;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text);
            outline: none;
            transition: all 0.15s;
        }
        
        .quick-add-input:focus {
            border-color: var(--wow);
            box-shadow: 0 0 0 3px rgba(154, 196, 168, 0.15);
        }
        
        .quick-add-input::placeholder {
            color: var(--text-lighter);
        }
        
        .quick-add-wowif {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .quick-add-wowif-label {
            font-size: 12px;
            color: var(--wow);
            white-space: nowrap;
        }
        
        .quick-add-wowif-input {
            flex: 1;
            padding: 8px 12px;
            font-size: 12px;
            font-family: inherit;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text);
            outline: none;
            transition: all 0.15s;
        }
        
        .quick-add-wowif-input:focus {
            border-color: var(--wow);
        }
        
        .quick-add-wowif-input::placeholder {
            color: var(--text-lighter);
        }
        
        .quick-add-btn {
            padding: 10px 16px;
            font-size: 13px;
            font-family: inherit;
            font-weight: 500;
            background: var(--wow);
            border: none;
            border-radius: 8px;
            color: white;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .quick-add-btn:hover {
            background: var(--wow-dark);
        }
        
        /* Chat panel inside notes */
        .chat-panel {
            display: none;
            flex-direction: column;
            border-bottom: 1px solid var(--border);
            max-height: 200px;
            overflow-y: auto;
        }
        
        .chat-panel.show {
            display: flex;
        }
        
        .chat-messages {
            padding: 12px 16px;
        }
        
        /* Awaiting banner */
        .awaiting-banner {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            font-size: 12px;
            color: var(--text-light);
        }
        
        .awaiting-dot {
            width: 6px;
            height: 6px;
            background: var(--wow);
            border-radius: 50%;
        }
        
        /* Backend test panel */
        .backend-test-panel {
            padding: 16px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        
        .backend-test-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
        }
        
        .backend-test-info {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        
        .backend-test-input {
            width: 100%;
            min-height: 80px;
            padding: 10px;
            font-size: 11px;
            font-family: monospace;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text);
            resize: vertical;
            margin-bottom: 8px;
        }
        
        .backend-test-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        
        .backend-test-btn {
            padding: 6px 12px;
            font-size: 11px;
            font-family: inherit;
            background: var(--text);
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
        }
        
        .backend-test-btn.secondary {
            background: var(--card);
            color: var(--text-light);
            border: 1px solid var(--border);
        }
        
        .backend-test-stats {
            margin-top: 8px;
            font-size: 10px;
            color: var(--text-lighter);
        }
        
        /* Stored notes list */
        .stored-notes-list {
            margin-bottom: 12px;
        }
        
        .stored-note-item {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            font-size: 13px;
            color: var(--text);
            line-height: 1.5;
        }
        
        .stored-note-item:last-child {
            margin-bottom: 0;
        }
        
        .stored-note-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            font-size: 10px;
            color: var(--text-lighter);
        }
        
        .stored-note-wowif {
            font-size: 11px;
            color: var(--wow);
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid var(--border);
        }
        
        .stored-notes-empty {
            text-align: center;
            padding: 20px;
            color: var(--text-lighter);
            font-size: 13px;
        }

        /* Note card - simpler than experiment card */
        .note-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
            transition: all 0.15s;
        }
        
        .note-card:hover {
            border-color: var(--text-lighter);
        }
        
        .note-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .note-card-context {
            font-size: 10px;
            font-family: monospace;
            color: var(--text-light);
            background: var(--bg);
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .note-card-element {
            font-size: 10px;
            font-family: monospace;
            color: var(--wow-dark);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .note-card-actions {
            margin-left: auto;
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.15s;
        }
        
        .note-card:hover .note-card-actions {
            opacity: 1;
        }
        
        .note-card-btn {
            padding: 4px 8px;
            border: none;
            background: var(--bg);
            color: var(--text-light);
            font-size: 10px;
            font-family: inherit;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.15s;
        }
        
        .note-card-btn:hover {
            background: var(--border);
            color: var(--text);
        }
        
        .note-card-btn.promote {
            background: rgba(154, 196, 168, 0.15);
            color: var(--wow-dark);
        }
        
        .note-card-btn.promote:hover {
            background: var(--wow);
            color: white;
        }
        
        .note-card-btn.delete:hover {
            background: rgba(212, 168, 154, 0.15);
            color: var(--ouch-dark);
        }
        
        .note-card-text {
            font-size: 13px;
            color: var(--text);
            line-height: 1.5;
        }
        
        /* Queue card - experiment proposal */
        .queue-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: all 0.15s;
        }
        
        .queue-card:hover {
            border-color: var(--gold);
            box-shadow: 0 2px 8px rgba(184, 160, 96, 0.1);
        }
        
        .queue-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: rgba(184, 160, 96, 0.08);
            border-bottom: 1px solid var(--border);
        }
        
        .queue-card-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .queue-card-context {
            font-size: 10px;
            font-family: monospace;
            color: var(--text-light);
            margin-left: auto;
        }
        
        .queue-card-body {
            padding: 12px;
        }
        
        .queue-card-observation {
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 8px;
            padding-left: 10px;
            border-left: 2px solid var(--border);
        }
        
        .queue-card-experiment {
            font-size: 14px;
            color: var(--text);
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        .queue-card-feedback {
            margin-bottom: 12px;
        }
        
        .queue-card-feedback textarea {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 12px;
            font-family: inherit;
            resize: vertical;
            min-height: 40px;
            background: var(--bg);
        }
        
        .queue-card-feedback textarea:focus {
            outline: none;
            border-color: var(--gold);
        }
        
        .queue-card-actions {
            display: flex;
            gap: 8px;
        }
        
        .queue-action-btn {
            flex: 1;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .queue-action-btn.approve {
            background: var(--wow);
            color: white;
        }
        
        .queue-action-btn.approve:hover {
            background: var(--wow-dark);
        }
        
        .queue-action-btn.revise {
            background: rgba(184, 160, 96, 0.15);
            color: var(--gold);
        }
        
        .queue-action-btn.revise:hover {
            background: rgba(184, 160, 96, 0.25);
        }
        
        .queue-action-btn.reject {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-light);
        }
        
        .queue-action-btn.reject:hover {
            border-color: var(--ouch);
            color: var(--ouch);
        }
        
        /* Active experiment card */
        .active-card {
            background: var(--card);
            border: 2px solid var(--wow);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
        }
        
        .active-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: rgba(154, 196, 168, 0.1);
            border-bottom: 1px solid rgba(154, 196, 168, 0.2);
        }
        
        .active-card-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--wow-dark);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .active-card-context {
            font-size: 10px;
            font-family: monospace;
            color: var(--text-light);
            margin-left: auto;
        }
        
        .active-card-body {
            padding: 12px;
        }
        
        .active-card-experiment {
            font-size: 15px;
            color: var(--text);
            line-height: 1.5;
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .active-card-learnings {
            margin-bottom: 12px;
        }
        
        .active-card-learnings-label {
            font-size: 10px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }
        
        .active-card-learnings textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            resize: vertical;
            min-height: 60px;
            background: var(--bg);
        }
        
        .active-card-learnings textarea:focus {
            outline: none;
            border-color: var(--wow);
        }
        
        .active-card-actions {
            display: flex;
            gap: 8px;
        }
        
        .active-action-btn {
            flex: 1;
            padding: 10px 12px;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .active-action-btn.complete {
            background: var(--text);
            color: white;
        }
        
        .active-action-btn.complete:hover {
            background: var(--text-light);
        }
        
        .active-action-btn.pause {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-light);
        }
        
        .active-action-btn.pause:hover {
            border-color: var(--text-light);
            color: var(--text);
        }
        
        /* Done card */
        .done-card {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
            opacity: 0.8;
        }
        
        .done-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .done-card-status {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
        }
        
        .done-card-status.completed {
            background: rgba(154, 196, 168, 0.15);
            color: var(--wow-dark);
        }
        
        .done-card-status.rejected {
            background: rgba(212, 168, 154, 0.15);
            color: var(--ouch-dark);
        }
        
        .done-card-context {
            font-size: 10px;
            font-family: monospace;
            color: var(--text-light);
            margin-left: auto;
        }
        
        .done-card-experiment {
            font-size: 13px;
            color: var(--text);
            margin-bottom: 8px;
        }
        
        .done-card-learnings {
            font-size: 12px;
            color: var(--text-light);
            font-style: italic;
            padding-left: 10px;
            border-left: 2px solid var(--border);
        }
        
        /* Empty state */
        .notes-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-lighter);
        }
        
        .notes-empty-icon {
            font-size: 32px;
            margin-bottom: 12px;
            opacity: 0.5;
        }
        
        .notes-empty-text {
            font-size: 13px;
            line-height: 1.6;
        }
        
        /* ============ LAB MODE - IN-HEADER CONTROLS ============ */
        
        /* People group becomes draggable in lab mode */
        body.lab-mode .people-group {
            cursor: ew-resize;
            padding: 4px 8px;
            margin: -4px -8px;
            border-radius: 12px;
            transition: background 0.15s;
        }
        
        body.lab-mode .people-group:hover {
            background: rgba(154, 196, 168, 0.15);
        }
        
        body.lab-mode .people-group.dragging {
            background: rgba(154, 196, 168, 0.25);
        }
        
        /* Person icon clickable for demeanor */
        body.lab-mode .person-icon {
            cursor: pointer;
            transition: all 0.15s;
        }
        
        body.lab-mode .person-icon:hover {
            color: var(--wow);
            transform: scale(1.1);
        }
        
        /* Demeanor colors on person icon */
        body.lab-mode .person-icon.calm { color: #7a9a7e; }
        body.lab-mode .person-icon.engaged { color: var(--wow); }
        body.lab-mode .person-icon.active { color: var(--gold); }
        body.lab-mode .person-icon.distracted { color: var(--ouch); }
        body.lab-mode .person-icon.apathetic { color: #666; }
        
        /* Timer segments become draggable in lab mode */
        body.lab-mode .segments {
            cursor: ew-resize;
            padding: 8px 4px;
            margin: -8px -4px;
            border-radius: 8px;
            transition: background 0.15s;
        }
        
        body.lab-mode .segments:hover {
            background: rgba(127, 168, 201, 0.15);
        }
        
        body.lab-mode .segments.dragging {
            background: rgba(127, 168, 201, 0.25);
        }
        
        /* Timer icon color in lab mode */
        body.lab-mode .timer-icon {
            color: var(--timer);
        }
        
        /* Demeanor toast - appears above person icon, prominent */
        .lab-demeanor-toast {
            position: fixed;
            bottom: 70px;
            left: 8px;
            transform: translateY(20px) scale(0.9);
            background: var(--surface);
            padding: 10px 16px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 1100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            border: 1px solid var(--border);
        }
        
        .lab-demeanor-toast.show {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        
        .demeanor-toast-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }
        
        .demeanor-toast-text {
            font-size: 14px;
            color: var(--text);
            font-weight: 500;
        }
        
        /* Demeanor colors on toast */
        .lab-demeanor-toast.calm { border-color: #7a9a7e; }
        .lab-demeanor-toast.calm .demeanor-toast-icon { color: #7a9a7e; }
        .lab-demeanor-toast.calm .demeanor-toast-text { color: #7a9a7e; }
        
        .lab-demeanor-toast.engaged { border-color: var(--wow); }
        .lab-demeanor-toast.engaged .demeanor-toast-icon { color: var(--wow); }
        .lab-demeanor-toast.engaged .demeanor-toast-text { color: var(--wow); }
        
        .lab-demeanor-toast.active { border-color: var(--gold); }
        .lab-demeanor-toast.active .demeanor-toast-icon { color: var(--gold); }
        .lab-demeanor-toast.active .demeanor-toast-text { color: var(--gold); }
        
        .lab-demeanor-toast.distracted { border-color: var(--ouch); }
        .lab-demeanor-toast.distracted .demeanor-toast-icon { color: var(--ouch); }
        .lab-demeanor-toast.distracted .demeanor-toast-text { color: var(--ouch); }
        
        .lab-demeanor-toast.apathetic { border-color: #666; }
        .lab-demeanor-toast.apathetic .demeanor-toast-icon { color: #666; }
        .lab-demeanor-toast.apathetic .demeanor-toast-text { color: #666; }
        
        .lab-speed-chips {
            display: flex;
            gap: 2px;
            margin-left: 8px;
        }
        
        .lab-chip-sm {
            padding: 4px 8px;
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 10px;
            background: transparent;
            color: #666;
            font-size: 9px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .lab-chip-sm:hover { color: #aaa; background: rgba(255,255,255,0.05); }
        .lab-chip-sm.active { 
            background: rgba(255,255,255,0.2); 
            color: #fff;
            border-color: rgba(255,255,255,0.3);
        }
        
        /* ============ SIGNALS (collect phase) ============ */
        .lab-signals {
            position: fixed;
            bottom: 130px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            background: rgba(20, 20, 20, 0.9);
            backdrop-filter: blur(10px);
            padding: 8px 12px;
            border-radius: 20px;
            align-items: center;
            gap: 8px;
            border: 1px solid rgba(255,255,255,0.05);
        }
        
        .lab-sig-btn {
            padding: 6px 14px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 14px;
            background: transparent;
            color: #888;
            font-size: 11px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .lab-sig-btn:hover { background: rgba(255,255,255,0.05); }
        .lab-sig-btn.ouch { color: var(--ouch); border-color: rgba(212, 168, 154, 0.3); }
        .lab-sig-btn.ouch:hover { background: rgba(212, 168, 154, 0.15); }
        .lab-sig-btn.wow { color: var(--wow); border-color: rgba(154, 196, 168, 0.3); }
        .lab-sig-btn.wow:hover { background: rgba(154, 196, 168, 0.15); }
        
        .lab-sig-count {
            font-size: 14px;
            font-weight: 600;
            color: #888;
            min-width: 24px;
            text-align: center;
            font-variant-numeric: tabular-nums;
        }
        
        /* Shift main content when sidebar visible */
        /* No sidebar margin needed - journey rail is minimal */
            border-right: 1px solid #e8e8e6;
            padding: 12px 0;
            overflow-y: auto;
        }
        
        .lab-who-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            cursor: pointer;
            transition: all 0.15s;
            border-left: 3px solid transparent;
        }
        
        .lab-who-item:hover {
            background: #f0f0ee;
        }
        
        .lab-who-item.active {
            background: #2a2a2a;
            border-left-color: var(--wow);
        }
        
        .lab-who-icon {
            width: 20px;
            height: 20px;
            color: #888;
        }
        
        .lab-who-item.active .lab-who-icon {
            color: var(--wow-dark);
        }
        
        .lab-who-name {
            font-size: 13px;
            color: #666;
        }
        
        .lab-who-item.active .lab-who-name {
            color: #333;
        }
        
        /* CONTRACT column */
        .lab-contract {
            width: 200px;
            border-right: 1px solid #e8e8e6;
            padding: 12px 0;
            overflow-y: auto;
        }
        
        .lab-contract-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 16px;
            cursor: pointer;
            transition: all 0.15s;
            border-left: 3px solid transparent;
        }
        
        .lab-contract-item:hover {
            background: #f0f0ee;
        }
        
        .lab-contract-item.active {
            background: #f0f0ee;
            border-left-color: var(--wow);
        }
        
        .lab-contract-item.unavailable {
            opacity: 0.3;
            pointer-events: none;
        }
        
        .lab-contract-symbol {
            width: 24px;
            height: 24px;
            color: #999;
            flex-shrink: 0;
        }
        
        .lab-contract-item.active .lab-contract-symbol {
            color: var(--wow-dark);
        }
        
        .lab-contract-body {
            flex: 1;
            min-width: 0;
        }
        
        .lab-contract-name {
            font-size: 12px;
            color: #666;
            margin-bottom: 2px;
        }
        
        .lab-contract-item.active .lab-contract-name {
            color: #333;
        }
        
        .lab-contract-mode {
            font-size: 10px;
            color: #999;
        }
        
        .lab-contract-status {
            display: inline-block;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 5px;
            border-radius: 3px;
            margin-left: 6px;
        }
        
        .lab-contract-status.tested {
            background: rgba(154, 196, 168, 0.3);
            color: var(--wow-dark);
        }
        
        .lab-contract-status.wired {
            background: rgba(184, 160, 96, 0.3);
            color: #8a7a40;
        }
        
        .lab-contract-status.stub {
            background: rgba(0, 0, 0, 0.05);
            color: #999;
        }
        
        .lab-contract-item.stub {
            opacity: 0.5;
        }
        
        .lab-who-status {
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 5px;
            border-radius: 3px;
            margin-left: auto;
        }
        
        .lab-who-status.coming {
            background: rgba(0, 0, 0, 0.05);
            color: #999;
        }
        
        .lab-who-item.coming {
            opacity: 0.5;
        }
        
        /* PHASES column */
        .lab-phases {
            flex: 1;
            padding: 12px 20px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            overflow-y: auto;
        }
        
        .lab-phases-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        
        .lab-phases-title {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #999;
        }
        
        .lab-session-toggle {
            display: flex;
            gap: 4px;
        }
        
        .lab-session-btn {
            padding: 4px 10px;
            font-size: 10px;
            background: transparent;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #888;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.15s;
        }
        
        .lab-session-btn:hover {
            border-color: #ccc;
            color: #666;
        }
        
        .lab-session-btn.active {
            background: #f0f0ee;
            border-color: #ccc;
            color: #333;
        }
        
        .lab-phase-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .lab-phase-btn {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
        }
        
        .lab-phase-btn:hover {
            background: #f5f5f4;
            border-color: #ccc;
        }
        
        .lab-phase-btn.active {
            background: #f0f0ee;
            border-color: var(--wow);
            box-shadow: 0 0 0 1px var(--wow);
        }
        
        .lab-phase-btn.dimmed {
            opacity: 0.3;
            pointer-events: none;
        }
        
        .lab-phase-num {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #ddd;
            color: #888;
            font-size: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .lab-phase-btn.active .lab-phase-num {
            background: var(--wow);
            color: #fff;
        }
        
        .lab-phase-btn.past .lab-phase-num {
            background: #aaa;
            color: #fff;
        }
        
        .lab-phase-name {
            font-size: 12px;
            color: #666;
        }
        
        .lab-phase-btn.active .lab-phase-name {
            color: #333;
        }
        
        /* VIEW TOGGLE in phases column */
        .lab-view-section {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #e8e8e6;
        }
        
        .lab-view-label {
            font-size: 10px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .lab-view-toggle {
            display: flex;
            gap: 4px;
        }
        
        .lab-view-btn {
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            background: #fff;
            cursor: pointer;
            font-size: 11px;
            color: #888;
            font-family: inherit;
            transition: all 0.15s;
        }
        
        .lab-view-btn:hover {
            background: #f5f5f4;
            border-color: #ccc;
        }
        
        .lab-view-btn.active {
            background: #f0f0ee;
            border-color: #999;
            color: #333;
        }
        
        /* Status bar in handle - light theme */
        .lab-status-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: #888;
            font-family: 'SF Mono', Monaco, monospace;
            background: #f0f0ee;
            padding: 4px 10px;
            border-radius: 4px;
            margin-left: auto;
            margin-right: 12px;
        }
        
        .lab-status-bar .status-chunk {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .lab-status-bar .status-label {
            color: #bbb;
        }
        
        .lab-status-bar .status-value {
            color: #666;
        }
        
        .lab-status-bar .status-value.waiting { color: #5a7a5e; }
        .lab-status-bar .status-value.active { color: #5a7a8c; }
        .lab-status-bar .status-value.ended { color: #7a5a5a; }
        
        .lab-status-bar .status-sep {
            color: #ddd;
            margin: 0 2px;
        }
        
        /* ============ INPUT DIAL (subtle banner below input) ============ */
        .input-dial {
            position: fixed;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 998;
            display: none;
        }
        
        .input-dial.visible {
            display: block;
        }
        
        .input-dial-toggle {
            padding: 4px 16px;
            border: none;
            background: rgba(255, 255, 255, 0.7);
            color: #999;
            cursor: pointer;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s;
            font-size: 10px;
            font-family: inherit;
            backdrop-filter: blur(8px);
        }
        
        .input-dial-toggle:hover {
            background: rgba(255, 255, 255, 0.9);
            color: #666;
        }
        
        .input-dial-toggle.active {
            background: white;
            color: #333;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .input-dial-toggle svg {
            width: 12px;
            height: 12px;
        }
        
        .input-dial-panel {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border-radius: 12px;
            padding: 16px;
            min-width: 200px;
            display: none;
            box-shadow: 0 4px 24px rgba(0,0,0,0.15);
            border: 1px solid #eee;
        }
        
        .input-dial.expanded .input-dial-panel {
            display: block;
        }
        
        .input-dial-title {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #999;
            margin-bottom: 12px;
        }
        
        .input-dial-section {
            margin-bottom: 12px;
        }
        
        .input-dial-section:last-child {
            margin-bottom: 0;
        }
        
        .input-dial-label {
            font-size: 10px;
            color: #999;
            margin-bottom: 6px;
        }
        
        .input-dial-row {
            display: flex;
            gap: 6px;
        }
        
        .dial-signal-btn {
            flex: 1;
            padding: 12px 8px;
            border: 2px solid #eee;
            border-radius: 8px;
            background: #fafafa;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        
        .dial-signal-btn:hover {
            background: #f0f0f0;
        }
        
        .dial-signal-btn.active.ouch {
            border-color: var(--ouch);
            background: rgba(212, 168, 154, 0.15);
        }
        
        .dial-signal-btn.active.wow {
            border-color: var(--wow);
            background: rgba(154, 196, 168, 0.15);
        }
        
        .dial-signal-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        
        .dial-signal-btn.ouch .dial-signal-dot {
            background: var(--ouch);
        }
        
        .dial-signal-btn.wow .dial-signal-dot {
            background: var(--wow);
        }
        
        .dial-signal-label {
            font-size: 11px;
            color: #666;
        }
        
        .dial-filter-btn {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #eee;
            border-radius: 6px;
            background: #fafafa;
            cursor: pointer;
            font-size: 11px;
            color: #666;
            font-family: inherit;
            transition: all 0.15s;
            margin-bottom: 4px;
            text-align: left;
        }
        
        .dial-filter-btn:hover {
            background: #f0f0f0;
            border-color: #ddd;
        }
        
        .dial-filter-btn.active {
            border-color: #999;
            color: #333;
        }
        
        .dial-filter-btn.name.active { border-color: #997744; background: rgba(153, 119, 68, 0.1); }
        .dial-filter-btn.id.active { border-color: #774499; background: rgba(119, 68, 153, 0.1); }
        .dial-filter-btn.crisis.active { border-color: #994444; background: rgba(153, 68, 68, 0.1); }
        
        .dial-status {
            font-size: 10px;
            color: #999;
            text-align: center;
            padding-top: 8px;
            border-top: 1px solid #eee;
            margin-top: 8px;
        }
        
        .dial-status strong {
            color: #666;
        }
        
        /* Hide old diagnostic */
        .diagnostic { display: none !important; }
        
        /* ============ SCREENS ============ */
        .screen {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 24px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        
        .screen.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        /* ============ HEADER (for in-session) ============ */
        .session-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            background: linear-gradient(to bottom, rgba(250, 249, 247, 0.95) 0%, rgba(250, 249, 247, 0) 100%);
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .session-header.visible {
            opacity: 1;
            pointer-events: auto;
        }
        
        .header-left {
            display: flex;
            align-items: center;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        /* Session box (left side) */
        .session-box {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            background: var(--card);
            border-radius: 24px;
            cursor: pointer;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            transition: all 0.2s ease;
        }
        
        .session-box:hover {
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .session-box.copied .session-code { color: var(--wow); }
        .session-box.copied .copy-icon { color: var(--wow); }
        
        .session-url {
            font-size: 13px;
            color: #999;
        }
        
        .session-code {
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 3px;
            color: #444;
            transition: color 0.2s;
        }
        
        .copy-icon {
            width: 18px;
            height: 18px;
            color: #bbb;
            transition: color 0.2s;
        }
        
        .session-box:hover .copy-icon { color: #888; }
        
        /* Stats - fixed widths to prevent jumping */
        .stat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 48px;
        }
        
        .stat-item.typing-indicator {
            min-width: 56px;
        }
        
        .stat-item.timer-wrapper {
            min-width: 72px;
        }
        
        .stat-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }
        
        .stat-icon svg {
            width: 18px;
            height: 18px;
        }
        
        .stat-num {
            font-size: 18px;
            font-weight: 700;
            color: #555;
            font-variant-numeric: tabular-nums;
            min-width: 24px;
            transition: transform 0.2s ease;
        }
        
        .stat-num.bump {
            transform: scale(1.2);
        }
        
        .swirl-mini {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--swirl);
        }
        
        /* Typing indicator */
        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .typing-dots {
            display: flex;
            gap: 3px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .typing-dots.active {
            opacity: 1;
        }
        
        .typing-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #bbb;
            animation: typingPulse 1.4s ease-in-out infinite;
        }
        
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes typingPulse {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
            30% { transform: translateY(-3px); opacity: 1; }
        }
        
        /* Timer */
        .timer-wrapper {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .timer-pie {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: conic-gradient(var(--wow) var(--progress, 100%), #e0e0de var(--progress, 100%));
            position: relative;
        }
        
        .timer-pie::after {
            content: '';
            position: absolute;
            inset: 4px;
            border-radius: 50%;
            background: var(--bg);
        }
        
        .timer-text {
            font-size: 14px;
            font-weight: 600;
            color: var(--wow);
            font-variant-numeric: tabular-nums;
        }
        
        /* End button */
        .end-btn {
            font-size: 12px;
            color: #bbb;
            background: none;
            border: 1px solid #ddd;
            border-radius: 14px;
            padding: 5px 12px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s ease;
        }
        
        .end-btn:hover {
            color: var(--ouch);
            border-color: var(--ouch);
        }
        
        /* Student header - simpler, just logo centered */
        .student-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px 20px;
            background: transparent;
            z-index: 100;
        }
        
        .student-logo {
            font-size: 16px;
            font-weight: 600;
            color: #888;
            letter-spacing: 0.5px;
        }
        
        /* ============ UNIFIED SESSION HEADER (from 36) - NOW FOOTER ============ */
        .unified-header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 14px 20px;
            background: var(--card);
            gap: 6px 20px;
            cursor: pointer;
            transition: background 0.2s;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        }
        
        .unified-header.visible {
            opacity: 1;
            pointer-events: auto;
        }
        
        .unified-header:hover {
            background: #fdfcfb;
        }
        
        .unified-header .logo {
            font-size: 15px;
            color: var(--text-light);
            flex-shrink: 0;
        }
        
        .version-name {
            display: none;
            font-size: 12px;
            color: var(--text);
            margin-left: 8px;
            font-weight: 400;
        }
        
        body.lab-mode .version-name {
            display: inline;
        }
        
        /* Version badge - clickable, opens version panel */
        .version-badge {
            display: none;
            margin-left: 8px;
            padding: 2px 8px;
            background: linear-gradient(135deg, var(--bg-ouch) 0%, var(--bg-wow) 100%);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        body.lab-mode .version-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        
        .version-badge:hover {
            border-color: var(--gold);
            box-shadow: 0 2px 8px rgba(184, 160, 96, 0.2);
        }
        
        .version-badge .v-num {
            font-weight: 700;
            color: var(--gold);
        }
        
        /* ============ TURN OVERLAY (shows what changed this version) ============ */
        .turn-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.85);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        
        .turn-overlay.hiding {
            opacity: 0;
            pointer-events: none;
        }
        
        .turn-overlay-card {
            background: var(--card);
            border-radius: 16px;
            padding: 32px 40px;
            max-width: 560px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        }
        
        .turn-overlay-version {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .turn-overlay-version h1 {
            font-size: 24px;
            font-weight: 700;
            color: var(--text);
            margin: 0;
        }
        
        .turn-overlay-version .scope {
            font-size: 11px;
            padding: 4px 10px;
            background: var(--bg);
            border-radius: 12px;
            color: var(--text-light);
            font-weight: 500;
        }
        
        .turn-overlay-section {
            margin-bottom: 20px;
        }
        
        .turn-overlay-section h3 {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .turn-overlay-quote {
            font-size: 14px;
            color: var(--text-mid);
            line-height: 1.6;
            padding-left: 12px;
            border-left: 2px solid var(--ouch);
            font-style: italic;
        }
        
        .turn-overlay-changes {
            font-size: 14px;
            color: var(--text);
            line-height: 1.6;
        }
        
        .turn-overlay-changes li {
            margin-bottom: 6px;
        }
        
        .turn-overlay-notice {
            font-size: 13px;
            color: var(--wow-dark);
            background: var(--bg-wow);
            padding: 12px 16px;
            border-radius: 8px;
            line-height: 1.5;
        }
        
        .turn-overlay-dismiss {
            margin-top: 24px;
            display: flex;
            justify-content: center;
        }
        
        .turn-overlay-dismiss button {
            padding: 12px 32px;
            font-size: 14px;
            font-weight: 600;
            background: var(--text);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .turn-overlay-dismiss button:hover {
            background: var(--text-mid);
            transform: translateY(-1px);
        }
        
        /* ============ VERSION HISTORY PANEL ============ */
        .version-history-panel {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 520px;
            max-height: 80vh;
            background: var(--card);
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.2);
            z-index: 3000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        
        .version-history-panel.show {
            display: flex;
        }
        
        .version-history-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.3);
            z-index: 2999;
            display: none;
        }
        
        .version-history-backdrop.show {
            display: block;
        }
        
        .version-history-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .version-history-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
        }
        
        .version-history-subtitle {
            font-size: 12px;
            color: var(--text-light);
            margin-top: 4px;
        }
        
        .version-history-close {
            background: none;
            border: none;
            font-size: 24px;
            color: var(--text-lighter);
            cursor: pointer;
            padding: 4px;
            line-height: 1;
        }
        
        .version-history-close:hover {
            color: var(--text);
        }
        
        .version-history-stats {
            display: flex;
            gap: 24px;
            padding: 16px 24px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
        }
        
        .version-stat {
            text-align: center;
        }
        
        .version-stat-num {
            font-size: 28px;
            font-weight: 600;
            color: var(--text);
            line-height: 1;
        }
        
        .version-stat-num.gold { color: var(--gold); }
        .version-stat-num.wow { color: var(--wow-dark); }
        .version-stat-num.ouch { color: var(--ouch-dark); }
        
        .version-stat-label {
            font-size: 10px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            margin-top: 4px;
        }
        
        .version-history-list {
            flex: 1;
            overflow-y: auto;
            padding: 16px 24px;
        }
        
        .version-entry {
            display: flex;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .version-entry:last-child {
            border-bottom: none;
        }
        
        .version-entry-num {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--bg-ouch) 0%, var(--bg-wow) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            color: var(--gold);
            flex-shrink: 0;
        }
        
        .version-entry-content {
            flex: 1;
            min-width: 0;
        }
        
        .version-entry-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
        }
        
        .version-entry-scope {
            font-size: 10px;
            font-weight: 500;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .version-entry-quote {
            font-size: 12px;
            color: var(--text-mid);
            font-style: italic;
            line-height: 1.5;
            margin-bottom: 8px;
            padding-left: 12px;
            border-left: 2px solid var(--border);
        }
        
        .version-entry-changes {
            font-size: 12px;
            color: var(--text-light);
            line-height: 1.5;
        }
        
        .version-entry-cost {
            display: flex;
            gap: 12px;
            margin-top: 8px;
            font-size: 10px;
            color: var(--text-lighter);
        }
        
        .version-cost-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .version-cost-item .cost-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }
        
        .version-cost-item .cost-dot.you { background: var(--ouch); }
        .version-cost-item .cost-dot.claude { background: var(--wow); }
        
        
        .people-group {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }
        
        .person-icon {
            width: 20px;
            height: 20px;
            color: var(--text-lighter);
            flex-shrink: 0;
        }
        
        .people-dots {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-content: center;
            flex: 1;
        }
        
        .p-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--swirl);
            flex-shrink: 0;
            transition: opacity 0.3s, transform 0.3s;
        }
        
        /* Distinct person colors — identity visible */
        .p-dot:nth-child(10n+1) { background: #7eb5a6; }
        .p-dot:nth-child(10n+2) { background: #c49a8c; }
        .p-dot:nth-child(10n+3) { background: #a8b07a; }
        .p-dot:nth-child(10n+4) { background: #9a8cc4; }
        .p-dot:nth-child(10n+5) { background: #c4a86e; }
        .p-dot:nth-child(10n+6) { background: #6e9ac4; }
        .p-dot:nth-child(10n+7) { background: #c46e8a; }
        .p-dot:nth-child(10n+8) { background: #8ac4b8; }
        .p-dot:nth-child(10n+9) { background: #c4b86e; }
        .p-dot:nth-child(10n+10) { background: #8a7ec4; }
        
        .p-dot.working { animation: working 2.5s ease-in-out infinite; }
        .p-dot.still { animation: still 4s ease-in-out infinite; opacity: 0.8; }
        .p-dot.away { opacity: 0.35; }
        .p-dot.here { animation: here 3s ease-in-out infinite; }
        .p-dot.distracted { 
            animation: distracted 2s ease-in-out infinite;
            opacity: 0.6;
        }
        .p-dot.disconnected { 
            opacity: 0.2; 
            background: var(--border);
        }
        .p-dot.joining { 
            animation: joining 0.5s ease-out; 
        }
        
        @keyframes here {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        @keyframes distracted {
            0%, 100% { transform: translateX(0); opacity: 0.6; }
            50% { transform: translateX(1px); opacity: 0.5; }
        }
        
        @keyframes working {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }
        
        @keyframes still {
            0%, 100% { transform: scale(0.98); }
            50% { transform: scale(1); }
        }
        
        @keyframes joining {
            from { transform: scale(0); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        
        .timer-group {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        
        .timer-group.hidden {
            display: none;
        }
        
        .segments {
            display: flex;
            gap: 3px;
        }
        
        .seg {
            width: 5px;
            height: 12px;
            border-radius: 2px;
            background: var(--timer);
            transition: background 0.3s;
        }
        
        .seg.empty {
            background: var(--timer-empty);
        }
        
        .seg.urgent {
            background: var(--timer-urgent);
        }
        
        .timer-icon {
            width: 14px;
            height: 14px;
            color: var(--timer);
            transition: color 0.3s;
        }
        
        .timer-icon.urgent {
            color: var(--timer-urgent);
        }
        
        /* Session status badge in header */
        .session-status-badge {
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 10px;
            background: var(--bg);
            color: var(--text-light);
            flex-shrink: 0;
        }
        
        .session-status-badge.waiting {
            background: #e8f0e8;
            color: #5a7a5e;
        }
        
        .session-status-badge.active {
            display: none;
        }
        
        .session-status-badge.ended {
            background: #f0e8e8;
            color: #7a5a5a;
        }
        
        /* ============ HEADER OVERLAY (now from bottom) ============ */
        .header-overlay {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--card);
            z-index: 150;
            display: none;
            flex-direction: column;
            box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
            border-top-left-radius: 24px;
            border-top-right-radius: 24px;
        }
        
        .header-overlay.show {
            display: flex;
        }
        
        .overlay-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .close-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: var(--text-light);
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            padding: 8px 12px;
            border-radius: 8px;
            transition: all 0.2s;
        }
        
        .close-btn:hover {
            background: rgba(0,0,0,0.04);
            color: var(--text);
        }
        
        .close-btn svg {
            width: 16px;
            height: 16px;
        }
        
        /* ============ INFO GRID ============ */
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            max-width: 100%;
        }
        
        .info-grid.two-col {
            grid-template-columns: 1fr 1fr;
        }
        
        .info-cell {
            padding: 28px 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            border-right: 1px solid var(--border);
            text-align: center;
            position: relative;
            min-height: 140px;
        }
        
        .info-cell:last-child {
            border-right: none;
        }
        
        .info-cell.hidden {
            display: none;
        }
        
        .info-number {
            font-size: 36px;
            font-weight: 700;
            color: var(--text);
            line-height: 1;
            font-variant-numeric: tabular-nums;
            position: relative;
            z-index: 2;
        }
        
        .info-number.urgent {
            color: var(--timer-urgent);
        }
        
        .info-label {
            font-size: 17px;
            color: var(--text-light);
            font-weight: 500;
            letter-spacing: -0.01em;
        }
        
        .info-visual {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .info-cell .person-icon {
            width: 18px;
            height: 18px;
            color: var(--text-lighter);
            flex-shrink: 0;
        }
        
        .info-cell .people-dots {
            gap: 4px;
            justify-content: center;
            max-width: 140px;
        }
        
        .info-cell .p-dot {
            width: 10px;
            height: 10px;
        }
        
        /* Timer visual */
        .info-cell .segments {
            gap: 3px;
        }
        
        .info-cell .seg {
            width: 5px;
            height: 14px;
            border-radius: 2px;
        }
        
        .info-cell .timer-icon {
            width: 16px;
            height: 16px;
        }
        
        /* Signals cell */
        .info-cell.signals-cell {
            overflow: hidden;
        }
        
        .signals-bg {
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            z-index: 1;
        }
        
        .sig-dot {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--swirl);
            opacity: 0.5;
        }
        
        .sig-dot.new {
            animation: sig-appear 0.3s ease-out;
        }
        
        @keyframes sig-appear {
            from { opacity: 0; transform: scale(0); }
            to { opacity: 0.5; transform: scale(1); }
        }
        
        .signals-cell .info-number,
        .signals-cell .info-label {
            position: relative;
            z-index: 2;
        }
        
        /* ============ ACTION ROW ============ */
        .action-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            padding: 20px;
            border-top: 1px solid var(--border);
        }
        
        .action-btn {
            font-size: 15px;
            color: var(--text-light);
            background: none;
            border: 1px solid var(--border);
            padding: 12px 28px;
            border-radius: 24px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            border-color: #ccc;
            color: var(--text);
        }
        
        .action-btn.primary {
            background: var(--text);
            color: #fff;
            border-color: var(--text);
        }
        
        .action-btn.primary:hover {
            background: #444;
            border-color: #444;
        }
        
        .action-btn.danger {
            color: var(--ouch);
            border-color: var(--ouch);
        }
        
        .action-btn.danger:hover {
            background: var(--ouch);
            color: #fff;
        }
        
        .action-btn.hidden {
            display: none;
        }
        
        .wind-down-row {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 14px;
        }
        
        .wind-down-row.show {
            display: flex;
        }
        
        .wind-down-text {
            font-size: 15px;
            color: var(--timer);
        }
        
        .wind-down-timer {
            font-size: 20px;
            font-weight: 600;
            color: #5a8ab0;
            font-variant-numeric: tabular-nums;
        }
        
        .wind-down-cancel {
            font-size: 15px;
            color: var(--text-light);
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            text-decoration: underline;
        }
        
        /* ============ PHASE INDICATOR ============ */
        .phase-indicator {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            padding: 14px 20px;
            background: var(--bg);
        }
        
        .phase-pip {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .phase-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--border);
            transition: all 0.3s;
        }
        
        .phase-dot.active {
            width: 24px;
            border-radius: 4px;
            background: var(--text-lighter);
        }
        
        .phase-dot.active.timed {
            background: var(--timer);
        }
        
        .phase-dot.complete {
            background: var(--text-lighter);
        }
        
        .phase-connector {
            width: 16px;
            height: 1px;
            background: var(--border);
        }
        
        .phase-connector.complete {
            background: var(--text-lighter);
        }
        
        /* ============ WAITING ROOM ============ */
        .waiting-room-screen {
            padding: 40px 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .waiting-room-content {
            max-width: 400px;
            width: 100%;
            text-align: center;
        }
        
        .waiting-room-title {
            font-size: 28px;
            font-weight: 500;
            color: var(--text);
            margin-bottom: 8px;
        }
        
        .waiting-room-subtitle {
            font-size: 16px;
            color: var(--text-light);
            margin-bottom: 32px;
        }
        
        .waiting-people-count {
            font-size: 48px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
        }
        
        .waiting-people-label {
            font-size: 16px;
            color: var(--text-light);
            margin-bottom: 24px;
        }
        
        .waiting-people-dots {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            margin-bottom: 40px;
        }
        
        .waiting-people-dots .p-dot {
            width: 12px;
            height: 12px;
        }
        
        .p-dot.is-me {
            box-shadow: 0 0 0 2px white, 0 0 0 3px currentColor;
        }
        
        .waiting-start-btn {
            width: 100%;
            max-width: 280px;
            padding: 18px;
            background: var(--wow);
            border: none;
            border-radius: 28px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
            animation: softBreathe 4s ease-in-out infinite;
        }
        
        @keyframes softBreathe {
            0%, 100% { 
                box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
            }
            50% { 
                box-shadow: 0 0 30px rgba(34, 197, 94, 0.35);
            }
        }
        
        .waiting-start-btn:hover {
            background: var(--wow);
            box-shadow: 0 0 35px rgba(34, 197, 94, 0.4);
            transform: scale(1.02);
        }
        
        .waiting-start-btn:disabled {
            background: var(--border);
            color: var(--text-lighter);
            cursor: not-allowed;
            box-shadow: none;
            animation: none;
        }
        
        /* ═══ THREAD DOT + GUIDE PANEL ═══ */
        /* Minimal. Just you and your guide. */
        
        .waiting-start-btn-wrapper {
            position: relative;
            display: inline-block;
            width: 100%;
            max-width: 320px;
        }
        
        .waiting-start-btn {
            position: relative;
            width: 100%;
        }
        
        /* ═══ PHASE THREADS INDICATOR ═══ */
        /* Shows thread count per phase, visible in lab mode */
        
        .phase-threads-indicator {
            display: none;
            position: absolute;
            top: -8px;
            right: -8px;
            min-width: 20px;
            height: 20px;
            background: #7c3aed;
            border-radius: 10px;
            padding: 0 6px;
            cursor: pointer;
            transition: all 0.2s;
            z-index: 10;
        }
        
        body.lab-mode .phase-threads-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .phase-threads-indicator:hover {
            transform: scale(1.1);
            background: #6d28d9;
        }
        
        .phase-threads-indicator.empty {
            background: var(--border);
        }
        
        .phase-threads-indicator.empty:hover {
            background: var(--text-light);
        }
        
        .phase-threads-indicator.has-threads {
            animation: phaseThreadsPulse 2s ease-in-out infinite;
        }
        
        @keyframes phaseThreadsPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
            50% { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0); }
        }
        
        .phase-threads-count {
            font-size: 11px;
            font-weight: 600;
            color: white;
        }
        
        .phase-threads-indicator.empty .phase-threads-count {
            color: var(--text-mid);
        }
        
        /* Phase threads panel - shows threads for current phase */
        .phase-threads-panel {
            position: fixed;
            bottom: 80px;
            right: 16px;
            width: 320px;
            max-height: 400px;
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.15);
            z-index: 2100;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        
        .phase-threads-panel.show {
            display: flex;
        }
        
        .phase-threads-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .phase-threads-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }
        
        .phase-threads-title span {
            color: #7c3aed;
        }
        
        .phase-threads-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-light);
            cursor: pointer;
        }
        
        .phase-threads-content {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
        }
        
        .phase-thread-item {
            padding: 10px 12px;
            background: var(--bg);
            border-radius: 8px;
            margin-bottom: 8px;
            font-size: 12px;
        }
        
        .phase-thread-item:last-child {
            margin-bottom: 0;
        }
        
        .phase-thread-text {
            color: var(--text);
            line-height: 1.4;
            margin-bottom: 6px;
        }
        
        .phase-thread-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 10px;
            color: var(--text-light);
        }
        
        .phase-thread-status {
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        .phase-thread-status.needs-claude {
            background: rgba(184, 160, 96, 0.1);
            color: var(--gold);
        }
        
        .phase-thread-status.sending {
            background: rgba(124, 58, 237, 0.1);
            color: #7c3aed;
        }
        
        .phase-thread-status.awaiting-user {
            background: var(--bg-wow);
            color: var(--wow-dark);
        }
        
        .phase-threads-empty {
            text-align: center;
            padding: 24px;
            color: var(--text-light);
            font-size: 12px;
        }
        
        .phase-threads-add {
            padding: 12px;
            border-top: 1px solid var(--border);
        }
        
        .phase-threads-add-btn {
            width: 100%;
            padding: 8px;
            background: var(--bg);
            border: 1px dashed var(--border);
            border-radius: 6px;
            font-size: 12px;
            color: var(--text-mid);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .phase-threads-add-btn:hover {
            background: var(--card);
            border-color: #7c3aed;
            color: #7c3aed;
        }
        
        /* ═══ 10 DOT STYLES TO TEST ═══ */
        
        /* 1. Simple pulse */
        .thread-dot.style-1 {
            width: 12px; height: 12px;
            background: var(--wow);
            border-radius: 50%;
            animation: pulse1 2s infinite;
        }
        @keyframes pulse1 {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.3); opacity: 0.7; }
        }
        
        /* 2. Ring expand */
        .thread-dot.style-2 {
            width: 10px; height: 10px;
            background: var(--wow);
            border-radius: 50%;
        }
        .thread-dot.style-2::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid var(--wow);
            border-radius: 50%;
            animation: ring2 2s infinite;
        }
        @keyframes ring2 {
            0% { transform: scale(0.8); opacity: 1; }
            100% { transform: scale(1.8); opacity: 0; }
        }
        
        /* 3. Gentle breathe */
        .thread-dot.style-3 {
            width: 14px; height: 14px;
            background: radial-gradient(circle, var(--wow) 40%, transparent 70%);
            border-radius: 50%;
            animation: breathe3 3s ease-in-out infinite;
        }
        @keyframes breathe3 {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        
        /* 4. Dot with subtle glow */
        .thread-dot.style-4 {
            width: 10px; height: 10px;
            background: var(--wow);
            border-radius: 50%;
            box-shadow: 0 0 12px var(--wow), 0 0 4px var(--wow);
        }
        
        /* 5. Diamond */
        .thread-dot.style-5 {
            width: 10px; height: 10px;
            background: var(--wow);
            transform: rotate(45deg);
            animation: pulse1 2s infinite;
        }
        
        /* 6. Double ring */
        .thread-dot.style-6 {
            width: 8px; height: 8px;
            background: var(--wow);
            border-radius: 50%;
            box-shadow: 0 0 0 3px white, 0 0 0 5px var(--wow);
        }
        
        /* 7. Heartbeat */
        .thread-dot.style-7 {
            width: 10px; height: 10px;
            background: var(--wow);
            border-radius: 50%;
            animation: heartbeat7 1.5s infinite;
        }
        @keyframes heartbeat7 {
            0%, 100% { transform: scale(1); }
            15% { transform: scale(1.25); }
            30% { transform: scale(1); }
            45% { transform: scale(1.15); }
        }
        
        /* 8. Fade pulse */
        .thread-dot.style-8 {
            width: 12px; height: 12px;
            background: var(--wow);
            border-radius: 50%;
            animation: fade8 2.5s infinite;
        }
        @keyframes fade8 {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        
        /* 9. Orbit ring */
        .thread-dot.style-9 {
            width: 10px; height: 10px;
            background: var(--wow);
            border-radius: 50%;
        }
        .thread-dot.style-9::before {
            content: '';
            position: absolute;
            width: 4px; height: 4px;
            background: var(--wow-dark);
            border-radius: 50%;
            animation: orbit9 2s linear infinite;
        }
        @keyframes orbit9 {
            from { transform: rotate(0deg) translateX(10px) rotate(0deg); }
            to { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
        }
        
        /* 10. Soft blob */
        .thread-dot.style-10 {
            width: 14px; height: 14px;
            background: var(--wow);
            border-radius: 50%;
            filter: blur(1px);
            animation: blob10 3s ease-in-out infinite;
        }
        @keyframes blob10 {
            0%, 100% { border-radius: 50%; transform: scale(1); }
            33% { border-radius: 40% 60% 60% 40%; transform: scale(1.05); }
            66% { border-radius: 60% 40% 40% 60%; transform: scale(0.95); }
        }
        
        /* The dot itself */
        .thread-dot {
            display: none;
            position: absolute;
            top: -10px;
            right: -10px;
            cursor: pointer;
            z-index: 10;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #7c3aed;
            border: 3px solid white;
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
            transition: all 0.2s;
        }
        
        body.lab-mode .thread-dot.has-threads {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .thread-dot::after {
            content: attr(data-count);
            font-size: 11px;
            font-weight: 700;
            color: white;
        }
        
        .thread-dot:hover {
            transform: scale(1.15);
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.5);
        }
        
        /* Thread dot = red when has threads needing attention */
        .thread-dot.has-threads {
            background: var(--ouch);
            box-shadow: 0 2px 8px rgba(232, 180, 188, 0.6);
            animation: threadDotPulse 2s ease-in-out infinite;
        }
        
        @keyframes threadDotPulse {
            0%, 100% { box-shadow: 0 2px 8px rgba(232, 180, 188, 0.4); }
            50% { box-shadow: 0 2px 16px rgba(232, 180, 188, 0.8); }
        }
        
        .thread-dot.has-threads:hover {
            box-shadow: 0 4px 16px rgba(232, 180, 188, 0.7);
        }
        
        /* Legacy active-exp class */
        .thread-dot.active-exp {
            background: var(--ouch) !important;
            box-shadow: 0 0 8px var(--ouch);
        }
        
        /* ═══ ELEMENT NOTE MARKERS — soft ray ═══ */
        .element-note-marker {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: transparent;
            border: 2px solid rgba(124, 58, 237, 0.6);
            box-shadow: 0 0 4px rgba(124, 58, 237, 0.3);
            z-index: 2000;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            font-weight: 700;
            color: #7c3aed;
            transition: all 0.15s ease;
            pointer-events: auto;
        }
        
        body.lab-mode .element-note-marker {
            display: flex;
        }
        
        .element-note-marker:hover {
            transform: scale(1.5);
            background: rgba(124, 58, 237, 0.15);
            border-color: #7c3aed;
            box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
        }
        
        .element-note-marker::after {
            content: attr(data-count);
        }
        
        .element-note-marker[data-count="1"]::after {
            content: '';
        }
        
        /* No pulse - just sits quietly */
        
        /* Marker popup card */
        .element-note-marker .marker-popup {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 8px;
            background: white;
            border-radius: 10px;
            padding: 10px 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            min-width: 180px;
            max-width: 260px;
            font-size: 13px;
            color: var(--text);
            font-weight: 400;
            white-space: normal;
            text-align: left;
        }
        
        .element-note-marker.open .marker-popup {
            display: block;
        }
        
        .marker-popup-text {
            margin-bottom: 6px;
            line-height: 1.4;
        }
        
        .marker-popup-acceptance {
            font-size: 11px;
            color: var(--wow);
            font-weight: 600;
        }

        /* ═══ THREAD RESPONSE POPUP ═══ */
        .exp-response-popup {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 12px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.18);
            padding: 12px;
            z-index: 100;
            min-width: 260px;
            max-width: 320px;
        }
        
        .exp-response-popup.show {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .exp-response-header {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }
        
        .exp-response-threads {
            max-height: 200px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .exp-response-thread {
            padding: 8px 10px;
            background: var(--bg);
            border-radius: 8px;
            font-size: 12px;
            color: var(--text);
            line-height: 1.4;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .exp-response-thread:hover {
            background: var(--border);
        }
        
        .exp-response-thread-status {
            font-size: 10px;
            color: var(--text-light);
            margin-top: 4px;
        }
        
        .exp-response-empty {
            padding: 16px;
            text-align: center;
            color: var(--text-light);
            font-size: 12px;
        }
        
        .exp-response-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border: none;
            background: transparent;
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s;
            text-align: left;
        }
        
        .exp-response-btn:hover {
            background: var(--bg);
        }
        
        .exp-response-btn.add {
            color: #7c3aed;
            border-top: 1px solid var(--border);
            margin-top: 4px;
            padding-top: 12px;
        }
        
        .exp-response-btn.accept {
            color: var(--wow-dark);
        }
        
        .exp-response-btn.reject {
            color: var(--ouch-dark);
        }
        
        .exp-response-btn.talk {
            color: var(--text-mid);
        }
        
        .exp-response-btn svg {
            width: 16px;
            height: 16px;
        }
        
        /* ═══ GUIDE PANEL — minimal conversation ═══ */
        .guide-panel {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 520px;
            max-width: calc(100vw - 40px);
            max-height: calc(100vh - 100px);
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0,0,0,0.12);
            z-index: 1001;
            flex-direction: column;
            overflow: hidden;
        }
        
        body.lab-mode .guide-panel.open {
            display: flex;
        }
        
        .guide-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .guide-target {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .guide-target strong {
            color: var(--text);
        }
        
        .guide-close {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-lighter);
            cursor: pointer;
            line-height: 1;
        }
        
        /* Conversation — super minimal */
        .guide-conversation {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        
        .guide-msg {
            font-size: 15px;
            line-height: 1.55;
            color: var(--text);
        }
        
        .guide-msg-who {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-lighter);
            margin-bottom: 4px;
            text-transform: lowercase;
        }
        
        .guide-msg.claude .guide-msg-who {
            color: var(--wow-dark);
        }
        
        /* Idea chips from Claude */
        .guide-ideas {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 12px;
        }
        
        .guide-exp {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .exp-type {
            font-size: 11px;
            color: var(--text-lighter);
            padding-left: 14px;
            font-style: italic;
        }
        
        .guide-chip {
            padding: 10px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 14px;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        
        /* Action buttons — experiment or keep talking */
        .guide-actions {
            display: flex;
            gap: 10px;
            margin-top: 14px;
        }
        
        .guide-action-btn {
            padding: 10px 18px;
            border-radius: 20px;
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
            border: 1px solid var(--border);
            background: white;
            color: var(--text);
        }
        
        .guide-action-btn:hover {
            background: var(--bg);
        }
        
        .guide-action-btn.primary {
            background: var(--wow);
            border-color: var(--wow);
            color: white;
        }
        
        .guide-action-btn.primary:hover {
            background: var(--wow-dark);
            border-color: var(--wow-dark);
        }
        
        .guide-chip:hover {
            background: var(--wow);
            border-color: var(--wow);
            color: white;
        }
        
        /* Colored experiment chips — each experiment gets a color */
        .guide-chip.exp-1 {
            background: rgba(232, 180, 188, 0.15);
            border-color: rgba(232, 180, 188, 0.5);
        }
        .guide-chip.exp-1:hover {
            background: #E8B4BC;
            border-color: #E8B4BC;
            color: white;
        }
        
        .guide-chip.exp-2 {
            background: rgba(184, 160, 96, 0.15);
            border-color: rgba(184, 160, 96, 0.5);
        }
        .guide-chip.exp-2:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: white;
        }
        
        .guide-chip.exp-3 {
            background: rgba(154, 196, 168, 0.15);
            border-color: rgba(154, 196, 168, 0.5);
        }
        .guide-chip.exp-3:hover {
            background: var(--wow);
            border-color: var(--wow);
            color: white;
        }
        
        .guide-chip.exp-4 {
            background: rgba(147, 178, 209, 0.15);
            border-color: rgba(147, 178, 209, 0.5);
        }
        .guide-chip.exp-4:hover {
            background: #93B2D1;
            border-color: #93B2D1;
            color: white;
        }
        
        .guide-chip.exp-5 {
            background: rgba(200, 162, 200, 0.15);
            border-color: rgba(200, 162, 200, 0.5);
        }
        .guide-chip.exp-5:hover {
            background: #C8A2C8;
            border-color: #C8A2C8;
            color: white;
        }
        
        /* Input */
        .guide-input-area {
            padding: 16px 20px 20px;
            border-top: 1px solid var(--border);
            background: var(--bg-warm);
        }
        
        .guide-input {
            width: 100%;
            border: 1px solid var(--border);
            padding: 16px 18px;
            border-radius: 12px;
            font-size: 15px;
            font-family: inherit;
            resize: vertical;
            line-height: 1.6;
            min-height: 80px;
            max-height: 300px;
            background: white;
        }
        
        .guide-input:focus {
            outline: none;
            border-color: var(--wow);
        }
        
        .guide-input::placeholder {
            color: var(--text-lighter);
        }
        
        /* ═══ DOT TESTER — show all 10 ═══ */
        .dot-tester {
            display: none;
            position: fixed;
            top: 60px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            padding: 16px 24px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            z-index: 1002;
            gap: 20px;
        }
        
        body.lab-mode .dot-tester {
            display: flex;
        }
        
        .dot-test-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        
        .dot-test-num {
            font-size: 10px;
            color: var(--text-lighter);
        }
        
        .dot-test-box {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        /* Student waiting view */
        .student-waiting-room {
            text-align: center;
        }
        
        /* ═══ TOGETHER PLAYGROUND ═══ */
        /* Feel presence while waiting — colored dots that move and bump */
        
        .together-playground {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
        }
        
        .together-playground canvas {
            width: 100%;
            height: 100%;
        }
        
        .together-hint {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: var(--text-lighter);
            opacity: 0.6;
            pointer-events: none;
            transition: opacity 0.5s;
        }
        
        .together-playground.active .together-hint {
            opacity: 0;
        }
        
        /* Comfy share dot — warm presence for open threads */
        .comfy-share {
            position: fixed;
            bottom: 80px;
            right: 20px;
            display: none;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 24px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            cursor: pointer;
            z-index: 1000;
            transition: all 0.3s ease;
            max-width: 280px;
        }
        
        body.lab-mode .comfy-share.has-threads {
            display: flex;
        }
        
        .comfy-share:hover {
            box-shadow: 0 6px 24px rgba(0,0,0,0.12);
            transform: translateY(-2px);
        }
        
        .comfy-share-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--ouch);
            flex-shrink: 0;
            animation: comfyPulse 3s ease-in-out infinite;
        }
        
        @keyframes comfyPulse {
            0%, 100% { opacity: 0.7; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.1); }
        }
        
        .comfy-share-text {
            font-size: 13px;
            color: var(--text-mid);
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .comfy-share-count {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-lighter);
            background: var(--bg);
            padding: 2px 8px;
            border-radius: 10px;
            flex-shrink: 0;
        }
        
        /* Student feedback button */
        .student-feedback-btn {
            position: fixed;
            bottom: 100px;
            right: 20px;
            padding: 8px 14px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            font-size: 12px;
            color: var(--text-mid);
            cursor: pointer;
            z-index: 900;
            transition: all 0.2s;
        }
        .student-feedback-btn:hover {
            background: var(--bg);
            border-color: var(--text-lighter);
        }
        .student-feedback-popup {
            display: none;
            position: fixed;
            bottom: 140px;
            right: 20px;
            width: 300px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            z-index: 950;
            padding: 16px;
        }
        .student-feedback-popup.open { display: block; }
        .student-feedback-popup textarea {
            width: 100%;
            height: 120px;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 12px;
            font-size: 14px;
            resize: none;
            margin-bottom: 12px;
            font-family: inherit;
            line-height: 1.5;
        }
        .student-feedback-popup textarea:focus {
            outline: none;
            border-color: var(--text-lighter);
        }
        .student-feedback-send {
            width: 100%;
            padding: 10px;
            background: var(--text);
            color: var(--bg);
            border: none;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
        }
        .student-feedback-send:hover { opacity: 0.9; }
        .student-feedback-send:disabled { opacity: 0.5; cursor: not-allowed; }
        
        /* LIVE experiment dot — sits on the experiment element */
        .exp-live-dot {
            display: none;
            position: absolute;
            top: 16px;
            right: 16px;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: #E53935;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            animation: livePulse 1s ease-in-out infinite;
            box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);
            transition: all 0.15s;
        }
        
        body.lab-mode .exp-live-dot {
            display: flex;
        }
        
        .exp-live-dot:hover {
            transform: scale(1.1);
        }
        
        .exp-live-label {
            color: white;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        @keyframes livePulse {
            0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7); }
            70% { box-shadow: 0 0 0 12px rgba(229, 57, 53, 0); }
            100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
        }
        
        .exp-live-dot.off {
            background: var(--text-lighter);
            animation: none;
        }
        
        .exp-live-dot.off .exp-live-label {
            text-decoration: line-through;
            opacity: 0.6;
        }
        
        .waiting-room-content {
            position: relative;
            z-index: 1;
        }
        
        .student-waiting-dot {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--swirl);
            margin: 0 auto 20px;
            animation: breathe 2s ease-in-out infinite;
        }
        
        .student-waiting-title {
            font-size: 20px;
            color: var(--text);
            margin-bottom: 8px;
        }
        
        .student-waiting-sub {
            font-size: 15px;
            color: var(--text-light);
        }
        
        /* Ended state */
        .ended-message {
            text-align: center;
            padding: 40px 20px;
        }
        
        .ended-message .ended-label {
            font-size: 18px;
            color: var(--text-light);
            margin-bottom: 16px;
        }
        
        .ended-stats {
            display: flex;
            justify-content: center;
            gap: 32px;
        }
        
        .ended-stat {
            text-align: center;
        }
        
        .ended-stat-num {
            font-size: 32px;
            font-weight: 700;
            color: var(--text);
        }
        
        .ended-stat-label {
            font-size: 14px;
            color: var(--text-light);
        }
        
        /* ============ END MODAL ============ */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 200;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .modal-overlay.show {
            display: flex;
            opacity: 1;
        }
        
        .modal-content {
            background: var(--card);
            border-radius: 16px;
            padding: 28px 32px;
            max-width: 340px;
            text-align: center;
            box-shadow: 0 8px 40px rgba(0,0,0,0.15);
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        .modal-text {
            font-size: 14px;
            color: #888;
            margin-bottom: 24px;
        }
        
        .modal-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
        }
        
        .modal-btn {
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .modal-btn.secondary {
            background: none;
            border: 1px solid #ddd;
            color: #888;
        }
        
        .modal-btn.secondary:hover {
            border-color: #ccc;
            color: #666;
        }
        
        .modal-btn.primary {
            background: var(--ouch);
            border: none;
            color: #fff;
        }
        
        .modal-btn.primary:hover {
            background: var(--ouch-dark);
        }
        
        /* ============ END SESSION MODAL ============ */
        .end-modal-content {
            max-width: 340px;
            padding: 28px 32px;
        }
        
        .end-step {
            text-align: center;
        }
        
        .end-status {
            margin-bottom: 24px;
        }
        
        .end-status-row {
            font-size: 15px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .end-status-sep {
            margin: 0 6px;
            color: #ccc;
        }
        
        .end-typing-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 14px;
            color: #888;
            min-height: 20px;
        }
        
        .end-typing-row:not(.active) {
            opacity: 0.4;
        }
        
        .end-typing-dots {
            display: flex;
            gap: 3px;
        }
        
        .end-typing-row.active .end-typing-dots .typing-dot {
            animation: typingPulse 1.4s ease-in-out infinite;
        }
        
        .end-typing-row:not(.active) .end-typing-dots .typing-dot {
            animation: none;
        }
        
        .end-typing-dots .typing-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #bbb;
        }
        
        .end-typing-dots .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .end-typing-dots .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        
        .end-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 24px;
        }
        
        .end-btn {
            width: 100%;
            padding: 14px 28px;
            border-radius: 24px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .end-btn.secondary {
            background: none;
            border: 1px solid #ddd;
            color: #888;
        }
        
        .end-btn.secondary:hover {
            border-color: #ccc;
            color: #666;
        }
        
        .end-btn.primary {
            background: var(--wow-dark);
            border: none;
            color: #fff;
        }
        
        .end-btn.primary:hover {
            background: #6a8a6e;
        }
        
        .end-facilitator-note {
            border-top: 1px solid #e8e8e6;
            padding-top: 20px;
        }
        
        .end-note-label {
            font-size: 11px;
            color: #bbb;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }
        
        .end-note-text {
            font-size: 14px;
            color: #888;
            line-height: 1.5;
            font-style: italic;
        }
        
        /* End wrapup step */
        .end-wrapup-label {
            font-size: 16px;
            color: #888;
            margin-bottom: 20px;
        }
        
        .end-wrapup-bar {
            height: 6px;
            background: #e8e8e6;
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        .end-wrapup-fill {
            height: 100%;
            background: var(--wow);
            border-radius: 3px;
            width: 100%;
            transition: width 1s linear;
        }
        
        .end-wrapup-dots {
            display: flex;
            gap: 4px;
            justify-content: center;
            margin-bottom: 24px;
            min-height: 20px;
        }
        
        .end-wrapup-dots .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--swirl);
            border-radius: 50%;
            animation: typingBounce 1.4s ease-in-out infinite;
        }
        
        .end-wrapup-dots .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .end-wrapup-dots .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        
        .end-wrapup-dots:not(.active) .typing-dot {
            animation: none;
            opacity: 0.3;
        }
        
        .end-now-btn {
            padding: 12px 32px;
            border-radius: 24px;
            font-size: 15px;
            background: none;
            border: 1px solid #ddd;
            color: #888;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .end-now-btn:hover {
            border-color: #999;
            color: #666;
        }
        
        /* ============ STUDENT WIND DOWN OVERLAY ============ */
        .student-winddown {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            padding: 20px 24px;
            text-align: center;
            z-index: 150;
            transform: translateY(-100%);
            transition: transform 0.4s ease;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        }
        
        .student-winddown.visible {
            transform: translateY(0);
        }
        
        .student-winddown-content {
            max-width: 300px;
            margin: 0 auto;
        }
        
        .student-winddown-label {
            font-size: 14px;
            color: #888;
            margin-bottom: 12px;
        }
        
        .student-winddown-bar {
            height: 4px;
            background: #e8e8e6;
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .student-winddown-fill {
            height: 100%;
            background: var(--wow);
            border-radius: 2px;
            width: 100%;
            transition: width 1s linear;
        }
        
        .student-winddown-bottom {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .student-winddown-dots {
            display: flex;
            gap: 3px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .student-winddown-dots.active {
            opacity: 1;
        }
        
        .student-winddown-dots .typing-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #bbb;
            animation: typingPulse 1.4s ease-in-out infinite;
        }
        
        .student-winddown-dots .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .student-winddown-dots .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        
        .student-winddown-hint {
            font-size: 13px;
            color: #999;
        }
        
        /* ============ MAIN CONTAINER ============ */
        .container {
            width: 100%;
            max-width: 560px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        /* ============ DOTS ============ */
        .dots {
            display: flex;
            gap: 6px;
            justify-content: center;
            min-height: 20px;
            margin-bottom: 32px;
            flex-wrap: wrap;
            max-width: 400px;
        }
        
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            animation: dotIn 0.3s ease;
        }
        
        .dot.ouch { background: var(--ouch); }
        .dot.wow { background: var(--wow); }
        
        .dot.glow {
            animation: dotGlow 0.6s ease-out;
        }
        
        .dot.glow.ouch { box-shadow: 0 0 12px 4px rgba(212, 168, 154, 0.8); }
        .dot.glow.wow { box-shadow: 0 0 12px 4px rgba(154, 196, 168, 0.8); }
        
        @keyframes dotIn {
            from { transform: scale(0); }
            to { transform: scale(1); }
        }
        
        @keyframes dotGlow {
            0% { transform: scale(2); opacity: 0; }
            50% { transform: scale(1.3); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        /* ============ CONTENT AREA ============ */
        .content {
            min-height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            text-align: center;
            transition: opacity 0.4s ease;
        }
        
        /* ============ MESSAGE (floating input) ============ */
        .message {
            color: #a09080;
            padding: 24px 0;
            font-size: 17px;
            line-height: 1.6;
            text-align: center;
            transition: all 0.4s ease;
        }
        
        .message.floating {
            animation: gentleBreathe 2s ease-in-out infinite;
        }
        
        .message.shrinking {
            animation: shrinkUp 0.5s ease-out forwards;
        }
        
        @keyframes gentleBreathe {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        @keyframes shrinkUp {
            0% { opacity: 1; transform: translateY(0) scale(1); }
            100% { opacity: 0; transform: translateY(-20px) scale(0.8); }
        }
        
        /* ============ TOAST ============ */
        .toast {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .toast.active {
            display: flex;
        }
        
        .toast-word {
            font-weight: 700;
            line-height: 1;
        }
        
        .toast-sub {
            color: #777;
            margin-top: 12px;
            font-size: 16px;
        }
        
        .toast.ouch .toast-word { color: var(--ouch-dark); }
        .toast.wow .toast-word { color: var(--wow-dark); }
        
        /* Toast styles */
        .toast.style-big .toast-word { font-size: 64px; }
        .toast.style-huge .toast-word { font-size: 84px; letter-spacing: -3px; }
        .toast.style-massive .toast-word { font-size: 120px; letter-spacing: -5px; }
        .toast.style-giant .toast-word { font-size: 140px; letter-spacing: -8px; }
        .toast.style-small .toast-word { font-size: 32px; }
        .toast.style-tiny .toast-word { font-size: 20px; letter-spacing: 2px; }
        .toast.style-whisper .toast-word { font-size: 28px; font-weight: 400; font-style: italic; }
        .toast.style-scream .toast-word { font-size: 90px; font-weight: 900; letter-spacing: -4px; }
        .toast.style-tilt .toast-word { font-size: 56px; transform: rotate(-8deg); }
        .toast.style-tilt-right .toast-word { font-size: 56px; transform: rotate(6deg); }
        .toast.style-wild-tilt .toast-word { font-size: 72px; transform: rotate(-15deg); }
        .toast.style-spaced .toast-word { font-size: 48px; letter-spacing: 18px; }
        .toast.style-tight .toast-word { font-size: 72px; letter-spacing: -6px; }
        .toast.style-light .toast-word { font-size: 54px; font-weight: 300; }
        .toast.style-heavy .toast-word { font-size: 66px; font-weight: 900; }
        .toast.style-stretch .toast-word { font-size: 56px; transform: scaleX(1.4); }
        .toast.style-tall .toast-word { font-size: 56px; transform: scaleY(1.5); }
        .toast.style-squash .toast-word { font-size: 70px; transform: scaleY(0.6) scaleX(1.3); }
        .toast.style-italic .toast-word { font-size: 62px; font-style: italic; }
        .toast.style-lean .toast-word { font-size: 66px; transform: skewX(-8deg); }
        
        /* Toast animations */
        .toast.anim-pop { animation: pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.4); }
        .toast.anim-drop { animation: drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .toast.anim-rise { animation: rise 0.4s ease-out; }
        .toast.anim-bounce { animation: bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .toast.anim-slam { animation: slam 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
        .toast.anim-swing { animation: swing 0.5s ease-out; }
        .toast.anim-zoom { animation: zoom 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .toast.anim-wobble { animation: wobble 0.6s ease-out; }
        .toast.anim-rubber { animation: rubber 0.6s ease-out; }
        .toast.anim-spring { animation: spring 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.5); }
        .toast.anim-float { animation: floatIn 0.6s ease-out; }
        
        @keyframes pop {
            0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes drop {
            0% { transform: translateY(-40px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes rise {
            0% { transform: translateY(30px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        @keyframes bounce {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes slam {
            0% { transform: scale(2.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes swing {
            0% { transform: rotate(-20deg) scale(0.8); opacity: 0; }
            50% { transform: rotate(10deg) scale(1.05); }
            100% { transform: rotate(0deg) scale(1); opacity: 1; }
        }
        
        @keyframes zoom {
            0% { transform: scale(0); opacity: 0; }
            80% { transform: scale(1.15); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes wobble {
            0% { transform: rotate(-12deg) scale(0.9); opacity: 0; }
            30% { transform: rotate(8deg) scale(1.05); }
            60% { transform: rotate(-4deg) scale(1); }
            100% { transform: rotate(0deg) scale(1); opacity: 1; }
        }
        
        @keyframes rubber {
            0% { transform: scale(0.5, 0.5); opacity: 0; }
            30% { transform: scale(1.25, 0.75); }
            40% { transform: scale(0.75, 1.25); }
            50% { transform: scale(1.15, 0.85); }
            65% { transform: scale(0.95, 1.05); }
            75% { transform: scale(1.05, 0.95); }
            100% { transform: scale(1, 1); opacity: 1; }
        }
        
        @keyframes spring {
            0% { transform: scale(0); opacity: 0; }
            30% { transform: scale(1.3); }
            50% { transform: scale(0.9); }
            70% { transform: scale(1.1); }
            85% { transform: scale(0.97); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes floatIn {
            0% { transform: translateY(40px) scale(0.9); opacity: 0; }
            50% { transform: translateY(-10px) scale(1.02); }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }
        
        /* ============ BOUNDARY RESPONSES ============ */
        .boundary {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            animation: rise 0.4s ease-out;
        }
        
        .boundary-word {
            font-size: 48px;
            font-weight: 700;
            letter-spacing: -1px;
            margin-bottom: 16px;
            line-height: 1;
        }
        
        .boundary-word.name { color: var(--ouch); }
        .boundary-word.id { color: var(--gold); }
        .boundary-word.fail { color: #a0a0a0; font-size: 36px; font-weight: 400; }
        
        .boundary-explain {
            max-width: 300px;
            color: #777;
            font-size: 15px;
            line-height: 1.6;
        }
        
        .boundary-explain a {
            color: var(--wow-dark);
            text-decoration: none;
            font-weight: 500;
        }
        
        /* ============ TYPE PROMPT (you tell us) ============ */
        .type-prompt {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            animation: rise 0.4s ease-out;
            padding: 20px;
        }
        
        .type-prompt-question {
            font-size: 24px;
            font-weight: 300;
            color: #666;
            margin-bottom: 24px;
        }
        
        .type-prompt-buttons {
            display: flex;
            gap: 16px;
        }
        
        .type-prompt-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 20px 32px;
            border: 2px solid #ddd;
            border-radius: 16px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 18px;
            font-weight: 500;
        }
        
        .type-prompt-btn:hover {
            transform: scale(1.05);
        }
        
        .type-prompt-btn.ouch {
            color: var(--ouch);
        }
        
        .type-prompt-btn.ouch:hover {
            border-color: var(--ouch);
            background: var(--ouch-light);
        }
        
        .type-prompt-btn.wow {
            color: var(--wow);
        }
        
        .type-prompt-btn.wow:hover {
            border-color: var(--wow);
            background: var(--wow-light);
        }
        
        .type-prompt-icon {
            font-size: 32px;
        }
        
        .type-prompt-hint {
            margin-top: 20px;
            font-size: 12px;
            color: #999;
            font-style: italic;
        }
        
        /* ============ API KEY BANNER ============ */
        .api-key-banner {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            margin: 0 20px 12px 20px;
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-radius: 8px;
            font-size: 13px;
            animation: slideDown 0.3s ease-out;
        }
        
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .api-key-banner-text {
            flex: 1;
            color: #856404;
        }
        
        .api-key-banner-btn {
            padding: 6px 12px;
            background: #ffc107;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            color: #856404;
        }
        
        .api-key-banner-btn:hover {
            background: #e0a800;
        }
        
        .api-key-banner-dismiss {
            padding: 4px 8px;
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
            color: #856404;
            opacity: 0.6;
        }
        
        .api-key-banner-dismiss:hover {
            opacity: 1;
        }
        
        /* ============ PROMPTS ============ */
        .prompts {
            text-align: center;
            margin-bottom: 24px;
            min-height: 100px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        
        .prompts.visible {
            opacity: 1;
            pointer-events: auto;
        }
        
        .nudge {
            font-size: 15px;
            color: #888;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .refresh-btn {
            width: 28px;
            height: 28px;
            border: none;
            background: none;
            color: #ccc;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s;
        }
        
        .refresh-btn:hover { color: #888; background: rgba(0,0,0,0.04); }
        .refresh-btn.spin { transform: rotate(360deg); }
        
        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
        }
        
        .chip {
            padding: 10px 16px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 14px;
            color: #555;
            cursor: pointer;
            transition: all 0.15s;
            font-family: inherit;
        }
        
        .chip:hover {
            background: #fafafa;
            border-color: #ccc;
        }
        
        /* ============ INPUT AREA ============ */
        .input-area {
            width: 100%;
            max-width: 560px;
            background: var(--card);
            border-radius: 16px;
            padding: 12px 16px;
            position: relative;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        }
        
        .input-row {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        
        .input-area textarea {
            flex: 1;
            border: none;
            font-family: inherit;
            font-size: 18px;
            line-height: 1.5;
            resize: none;
            outline: none;
            min-height: 28px;
            max-height: 120px;
            color: var(--text);
            background: transparent;
        }
        
        .input-area textarea::placeholder {
            color: #bbb;
        }
        
        .send-btn {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: none;
            background: var(--swirl);
            color: #fff;
            font-size: 28px;
            font-weight: 300;
            cursor: pointer;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.15s, transform 0.15s;
        }
        
        .send-btn svg {
            width: 28px;
            height: 28px;
            stroke: currentColor;
            stroke-width: 2.5;
            fill: none;
        }
        
        .send-btn:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }
        
        .help-toggle {
            position: absolute;
            right: -54px;
            top: 50%;
            transform: translateY(-50%);
            width: 42px;
            height: 42px;
            border: none;
            background: #e8e8e6;
            color: #999;
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        
        .help-toggle:hover {
            background: #ddd;
            color: #666;
        }
        
        .help-toggle.active {
            background: #ccc;
            color: #444;
        }
        
        /* Debug strip (lab mode only) - subtle keys at bottom */
        .debug-strip {
            display: none;
            justify-content: center;
            gap: 2px;
            margin-top: 16px;
            opacity: 0.3;
            transition: opacity 0.2s;
        }
        
        body.lab-mode .debug-strip {
            display: flex;
        }
        
        .debug-strip:hover {
            opacity: 0.6;
        }
        
        .debug-key {
            width: 20px;
            height: 20px;
            background: transparent;
            border: none;
            color: var(--text-lighter);
            font-size: 12px;
            font-family: monospace;
            cursor: pointer;
            border-radius: 3px;
            transition: all 0.15s;
        }
        
        .debug-key:hover {
            background: var(--card);
            color: var(--text-light);
        }
        
        .debug-key.active {
            color: var(--text);
            background: var(--card);
        }
        
        .debug-key[data-type="auto"].active {
            color: var(--gold);
            text-shadow: 0 0 4px var(--gold);
        }
        
        .debug-key[data-type="ouch"].active {
            color: var(--ouch);
        }
        
        .debug-key[data-type="wow"].active {
            color: var(--wow);
        }
        
        .debug-key[data-type="safety"].active {
            color: #e74c3c;
        }
        
        .debug-gap {
            width: 8px;
        }
        
        .boundary-hint {
            font-size: 13px;
            color: var(--ouch);
            text-align: left;
            padding: 8px 4px 0;
            min-height: 24px;
        }
        
        .boundary-hint.gold { color: var(--gold); }
        
        /* ============ SAFETY FLOOR ============ */
        .safety {
            position: fixed;
            bottom: 16px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 13px;
            color: #bbb;
        }
        
        .safety a {
            color: #999;
            text-decoration: none;
        }
        
        .safety a:hover {
            color: #666;
        }
        
        /* ============ PLAN SCREENS - TWO STEP FLOW ============ */
        .plan-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .plan-logo {
            position: fixed;
            bottom: 20px;
            left: 20px;
            font-size: 15px;
            color: var(--text-light);
            cursor: pointer;
            transition: all 0.3s;
            z-index: 100;
        }
        
        /* Gradient when lab mode active — same as unified-header .logo */
        body.lab-mode .plan-logo {
            background: linear-gradient(135deg, var(--ouch) 0%, var(--wow) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .plan-logo .version-badge {
            display: none;
            margin-left: 8px;
            padding: 2px 8px;
            background: linear-gradient(135deg, var(--bg-ouch) 0%, var(--bg-wow) 100%);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        body.lab-mode .plan-logo .version-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            -webkit-text-fill-color: initial;
        }
        
        .plan-logo .version-badge:hover {
            border-color: var(--gold);
            box-shadow: 0 2px 8px rgba(184, 160, 96, 0.2);
        }
        
        .step-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
        }
        
        .step-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ddd;
            transition: all 0.3s;
        }
        
        .step-dot.active {
            background: var(--wow-dark);
            width: 24px;
            border-radius: 4px;
        }
        
        .step-dot.done {
            background: var(--wow);
        }
        
        .plan-question {
            font-size: 32px;
            font-weight: 700;
            color: #333;
            margin-bottom: 12px;
            line-height: 1.2;
        }
        
        .plan-subtitle {
            font-size: 17px;
            color: #888;
        }
        
        /* WHO GRID */
        .who-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            max-width: 720px;
            width: 100%;
        }
        
        @media (max-width: 700px) {
            .who-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
            }
        }
        
        @media (max-width: 500px) {
            .who-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
        }
        
        .who-card {
            background: var(--card);
            border: 2px solid var(--border);
            border-radius: 16px;
            padding: 20px 12px 16px;
            cursor: pointer;
            transition: all 0.25s ease;
            text-align: center;
            position: relative;
        }
        
        .who-card:hover {
            border-color: #ccc;
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
            transform: translateY(-2px);
        }
        
        .who-card.selected {
            border-color: var(--wow-dark);
            background: linear-gradient(135deg, #fafdfb 0%, #fff 100%);
            box-shadow: 0 8px 32px rgba(80, 122, 88, 0.15);
        }
        
        .who-card.coming-soon {
            opacity: 0.5;
            cursor: default;
        }
        
        .who-card.coming-soon:hover {
            transform: none;
            box-shadow: none;
            border-color: var(--border);
        }
        
        .who-status {
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 6px;
            border-radius: 4px;
            background: #f0f0ee;
            color: #999;
        }
        
        .who-card.coming-soon .who-status {
            background: #eee;
            color: #bbb;
        }
        
        .who-symbol {
            width: 44px;
            height: 44px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .who-symbol svg {
            width: 36px;
            height: 36px;
            color: #bbb;
            transition: color 0.25s;
        }
        
        .who-card:hover .who-symbol svg,
        .who-card.selected .who-symbol svg {
            color: #666;
        }
        
        .who-card.selected .who-symbol svg {
            color: var(--wow-dark);
        }
        
        .who-name {
            font-size: 15px;
            font-weight: 600;
            color: #444;
            margin-bottom: 4px;
        }
        
        .who-relationship {
            font-size: 12px;
            color: #999;
            line-height: 1.3;
            margin-bottom: 8px;
        }
        
        .who-scenario {
            font-size: 11px;
            color: #bbb;
            font-style: italic;
            line-height: 1.3;
        }
        
        @media (max-width: 500px) {
            .who-card {
                padding: 16px 10px 14px;
            }
            
            .who-symbol {
                width: 40px;
                height: 40px;
                margin-bottom: 10px;
            }
            
            .who-symbol svg {
                width: 32px;
                height: 32px;
            }
            
            .who-name {
                font-size: 14px;
            }
            
            .who-scenario {
                font-size: 10px;
            }
            
            .who-status {
                font-size: 7px;
                padding: 2px 4px;
            }
            
            .who-relationship {
                font-size: 11px;
            }
        }
        
        /* SELECTED CHIP (Screen 2) */
        .selected-chip {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 20px 10px 14px;
            background: var(--card);
            border-radius: 24px;
            margin-bottom: 32px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .selected-chip:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }
        
        .selected-chip svg {
            width: 24px;
            height: 24px;
            color: var(--wow-dark);
        }
        
        .selected-chip-text {
            font-size: 15px;
            color: #555;
        }
        
        .selected-chip-change {
            font-size: 13px;
            color: #aaa;
            margin-left: 4px;
        }
        
        /* CONTRACT CARDS */
        .contracts {
            display: flex;
            flex-direction: column;
            gap: 16px;
            max-width: 560px;
            width: 100%;
        }
        
        .contract {
            background: var(--card);
            border: 2px solid var(--border);
            border-radius: 20px;
            padding: 24px 28px;
            cursor: pointer;
            transition: all 0.25s ease;
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        
        .contract:hover {
            border-color: #ccc;
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
        }
        
        .contract.selected {
            border-color: var(--wow-dark);
            background: linear-gradient(135deg, #fafdfb 0%, #fff 100%);
            box-shadow: 0 8px 32px rgba(80, 122, 88, 0.15);
        }
        
        .contract-symbol {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .contract-symbol svg {
            width: 40px;
            height: 40px;
            color: #ccc;
            transition: color 0.25s;
        }
        
        .contract:hover .contract-symbol svg {
            color: #999;
        }
        
        .contract.selected .contract-symbol svg {
            color: var(--wow-dark);
        }
        
        .contract-body {
            flex: 1;
        }
        
        .contract-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
        }
        
        .contract-name {
            font-size: 18px;
            font-weight: 600;
            color: #444;
            margin-bottom: 6px;
        }
        
        .contract-test-status {
            font-size: 14px;
            color: #ccc;
            flex-shrink: 0;
        }
        
        .contract-test-status.verified { color: var(--wow); }
        .contract-test-status.partial { color: var(--gold); }
        .contract-test-status.untested { color: #ccc; }
        
        /* Lab mode: make test status more prominent */
        body.lab-mode .contract-test-status {
            font-size: 16px;
        }
        
        .contract-desc {
            font-size: 15px;
            color: #777;
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        .contract-action {
            font-size: 14px;
            color: var(--wow-dark);
            font-weight: 500;
        }
            border-radius: 16px;
            padding: 20px 24px;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            text-align: left;
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        
        .mode-card:hover {
            border-color: #ccc;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }
        
        .mode-card.selected {
            border-color: var(--wow-dark);
            background: #f8fdf9;
            box-shadow: 0 4px 20px rgba(122, 154, 126, 0.15);
        }
        
        .mode-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 4px;
        }
        
        .mode-icon svg {
            width: 32px;
            height: 32px;
            color: #ccc;
        }
        
        .mode-card.selected .mode-icon svg {
            color: var(--wow);
        }
        
        .mode-body {
            flex: 1;
        }
        
        .mode-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        
        .mode-title {
            font-size: 17px;
            font-weight: 600;
            color: #444;
            flex: 1;
            padding-right: 12px;
        }
        
        .mode-check {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 2px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        
        .mode-card.selected .mode-check {
            background: var(--wow-dark);
            border-color: var(--wow-dark);
        }
        
        .mode-check svg {
            width: 12px;
            height: 12px;
            color: #fff;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .mode-card.selected .mode-check svg {
            opacity: 1;
        }
        
        .mode-desc {
            font-size: 15px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        .mode-meta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        
        .mode-tag {
            font-size: 13px;
            color: #999;
        }
        
        .mode-tag.good { color: var(--wow-dark); }
        .mode-tag.feel { color: var(--ouch-dark); }
        
        .continue-btn {
            padding: 16px 40px;
            background: var(--wow-dark);
            border: none;
            border-radius: 28px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s ease;
            opacity: 0.4;
            pointer-events: none;
        }
        
        .continue-btn.ready {
            opacity: 1;
            pointer-events: auto;
        }
        
        .continue-btn.ready:hover {
            background: #4a7a52;
            transform: translateY(-1px);
        }
        
        /* Trade options (screen 3) */
        .planned-content {
            text-align: center;
            max-width: 440px;
            width: 100%;
        }
        
        .trade-section {
            width: 100%;
            margin-bottom: 24px;
        }
        
        .trade-section.collapsed {
            display: none;
        }
        
        .trade-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .trade-btn {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 22px;
            background: var(--card);
            border: 2px solid var(--border);
            border-radius: 16px;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            transition: all 0.2s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        
        .trade-btn:hover {
            border-color: #ddd;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .trade-btn.active {
            border-color: var(--wow-dark);
            background: #f8fdf9;
        }
        
        .trade-icon {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
        }
        
        .trade-icon svg {
            width: 100%;
            height: 100%;
            stroke: #999;
            transition: stroke 0.2s;
        }
        
        .trade-btn.active .trade-icon svg {
            stroke: var(--wow-dark);
        }
        
        .trade-text {
            font-size: 16px;
            color: #444;
        }
        
        .trade-btn.active .trade-text {
            color: var(--wow-dark);
            font-weight: 500;
        }
        
        .meeting-details {
            display: none;
            flex-direction: column;
            gap: 12px;
            padding: 20px;
            background: var(--card);
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            margin-bottom: 16px;
        }
        
        .meeting-details.show {
            display: flex;
        }
        
        .meeting-input {
            width: 100%;
            padding: 14px 18px;
            border: 1px solid var(--border);
            border-radius: 12px;
            font-family: inherit;
            font-size: 16px;
            color: #444;
            background: #fafaf9;
        }
        
        .meeting-input:focus {
            outline: none;
            border-color: var(--wow);
            background: #fff;
        }
        
        .confirm-btn {
            padding: 12px 24px;
            background: var(--wow-dark);
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            font-family: inherit;
        }
        
        .confirm-btn:hover {
            background: #4a7a52;
        }
        
        /* Post-selection */
        .post-selection {
            display: none;
        }
        
        .post-selection.show {
            display: block;
        }
        
        .url-card {
            background: var(--card);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        
        .url-label {
            font-size: 13px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }
        
        .url-display {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 16px;
        }
        
        .url-base {
            color: #999;
        }
        
        .url-code {
            color: #444;
            letter-spacing: 2px;
        }
        
        .copy-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: #f5f5f4;
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .copy-btn:hover {
            background: #eee;
        }
        
        .copy-btn.copied {
            background: #f0f8f2;
            border-color: var(--wow);
            color: var(--wow-dark);
        }
        
        .copy-btn svg {
            width: 18px;
            height: 18px;
        }
        
        .next-steps {
            text-align: left;
            background: var(--card);
            border-radius: 16px;
            padding: 24px 28px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
            margin-bottom: 28px;
        }
        
        .next-label {
            font-size: 13px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }
        
        .next-item {
            display: flex;
            gap: 14px;
            margin-bottom: 14px;
        }
        
        .next-item:last-child {
            margin-bottom: 0;
        }
        
        .next-num {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #f5f5f4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 600;
            color: #888;
            flex-shrink: 0;
        }
        
        .next-text {
            font-size: 15px;
            color: #555;
            line-height: 1.5;
            padding-top: 2px;
        }
        
        .start-btn {
            padding: 16px 40px;
            background: var(--swirl);
            border: none;
            border-radius: 28px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s ease;
        }
        
        .start-btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        
        /* Persistent chips */
        .persistent-chips {
            position: fixed;
            top: 70px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 12px;
            padding: 0 24px;
            z-index: 90;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .persistent-chips.visible {
            opacity: 1;
        }
        
        .chip-group {
            display: flex;
            align-items: center;
            gap: 6px;
            pointer-events: auto;
        }
        
        .chip-label {
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .context-chip {
            padding: 6px 14px;
            background: var(--card);
            border-radius: 16px;
            font-size: 13px;
            color: #555;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        
        /* ============ JOIN SCREEN (student waiting) ============ */
        .join-content {
            text-align: center;
        }
        
        .join-prompt {
            font-size: 20px;
            color: #888;
            margin-bottom: 24px;
        }
        
        .join-code-display {
            font-size: 48px;
            font-weight: 700;
            letter-spacing: 8px;
            color: #555;
            margin-bottom: 8px;
        }
        
        .join-waiting {
            font-size: 15px;
            color: #bbb;
            animation: gentleBreathe 2s ease-in-out infinite;
        }
        
        /* ============ PATTERNS TRANSITION ============ */
        .invitation {
            text-align: center;
        }
        
        .invitation-text {
            font-size: 24px;
            color: #444;
            line-height: 1.4;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .invitation-sub {
            font-size: 17px;
            color: #888;
            margin-bottom: 48px;
        }
        
        .play-btn {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--swirl);
            border: none;
            cursor: pointer;
            animation: breathe 3s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            position: relative;
        }
        
        .play-btn:hover {
            transform: scale(1.08);
            animation: none;
        }
        
        .play-btn::after {
            content: '';
            border-style: solid;
            border-width: 14px 0 14px 22px;
            border-color: transparent transparent transparent #fff;
            margin-left: 6px;
        }
        
        @keyframes breathe {
            0%, 100% { transform: scale(1); opacity: 0.9; }
            50% { transform: scale(1.06); opacity: 1; }
        }
        
        /* Dots animation screen */
        .dots-animation-screen {
            position: fixed;
            inset: 0;
            display: none;
            background: var(--bg);
            z-index: 50;
            pointer-events: none;
        }
        
        .dots-animation-screen.visible {
            display: block;
        }
        
        .dots-animation-screen.transparent {
            background: transparent;
        }
        
        .swirl-dot {
            position: absolute;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--swirl);
            opacity: 0;
            transform: scale(0);
            transition: all 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
        }
        
        .swirl-dot.visible {
            opacity: 1;
            transform: scale(1);
            animation: spin 2s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .swirl-dot.bulge {
            transform: scale(1.5);
            animation: none;
            transition: all 0.25s ease-out;
        }
        
        .swirl-dot.resolved {
            animation: none;
            transition: all 0.4s ease;
        }
        
        .swirl-dot.ouch {
            background: var(--ouch);
        }
        
        .swirl-dot.wow {
            background: var(--wow);
        }
        
        .swirl-dot.shrinking {
            width: 10px;
            height: 10px;
            transition: all 0.6s ease;
        }
        
        .swirl-dot.flying {
            transition: all 0.8s cubic-bezier(0.34, 1, 0.64, 1);
        }
        
        /* ============ PATTERNS SCREEN ============ */
        .patterns-intro {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .patterns-title {
            font-size: 24px;
            color: #444;
            font-weight: 500;
            margin-bottom: 8px;
        }
        
        .patterns-sub {
            font-size: 16px;
            color: #888;
        }
        
        /* ============ PATTERNS SCREEN ============ */
        .patterns-screen {
            padding: 40px 24px 180px;
            overflow-y: auto;
            justify-content: flex-start;
            align-items: center;
        }
        
        .patterns-prompt {
            text-align: center;
            font-size: 16px;
            color: #999;
            margin-bottom: 32px;
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
        }
        
        .categories-container {
            width: 100%;
            max-width: 600px;
        }
        
        /* Category box */
        .category-box {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            margin-bottom: 12px;
            overflow: hidden;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        
        .category-box.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .category-box.expanded {
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        }
        
        .category-header {
            display: flex;
            align-items: center;
            padding: 18px 24px;
            cursor: pointer;
            gap: 0;
        }
        
        .category-header:hover {
            background: #fafaf9;
        }
        
        .category-dots {
            width: 45%;
            display: flex;
            gap: 5px;
            justify-content: flex-end;
            padding-right: 20px;
        }
        
        .cat-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
        }
        
        .cat-dot.visible {
            opacity: 1;
            transform: scale(1);
        }
        
        .cat-dot.ouch { background: var(--ouch); }
        .cat-dot.wow { background: var(--wow); }
        
        .category-label {
            flex: 1;
            font-size: 15px;
            color: #555;
            font-weight: 500;
            opacity: 0;
            transition: opacity 0.4s ease;
            padding-left: 20px;
            border-left: 1px solid var(--border);
        }
        
        .category-label.visible {
            opacity: 1;
        }
        
        /* Sparklines for history */
        .sparkline {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 20px;
            margin-left: auto;
            margin-right: 12px;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .sparkline.visible {
            opacity: 0.7;
        }
        
        .category-header:hover .sparkline.visible {
            opacity: 1;
        }
        
        .spark {
            width: 5px;
            border-radius: 2px;
            background: var(--border);
            transition: transform 0.15s ease;
        }
        
        .spark.ouch { background: var(--ouch); }
        .spark.wow { background: var(--wow); }
        
        .category-header:hover .spark {
            transform: scaleY(1.15);
        }
        
        /* Absent themes */
        .absent-themes-section {
            margin-top: 24px;
            padding: 0 4px;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .absent-themes-section.visible {
            opacity: 1;
        }
        
        .absent-label {
            font-size: 12px;
            color: #ccc;
            margin-bottom: 6px;
        }
        
        .absent-list {
            font-size: 14px;
            color: #bbb;
        }
        
        .category-question {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #ddd;
            background: none;
            color: #bbb;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: inherit;
            opacity: 0;
            pointer-events: none;
        }
        
        .category-box.expanded .category-question {
            opacity: 1;
            pointer-events: auto;
        }
        
        .category-question:hover {
            border-color: #aaa;
            color: #888;
            background: #f8f8f7;
        }
        
        /* Inline question popout */
        .question-popout {
            background: #f8f8f6;
            padding: 16px 20px;
            padding-right: 40px;
            margin-bottom: 8px;
            border-radius: 8px;
            position: relative;
            display: none;
        }
        
        .question-popout.visible {
            display: block;
        }
        
        .question-popout-text {
            font-size: 15px;
            line-height: 1.5;
            color: #666;
            font-style: italic;
        }
        
        .question-popout-close {
            position: absolute;
            top: 12px;
            right: 12px;
            background: none;
            border: none;
            font-size: 18px;
            color: #bbb;
            cursor: pointer;
            padding: 0;
            line-height: 1;
            font-family: inherit;
        }
        
        .question-popout-close:hover {
            color: #888;
        }
        
        /* Quotes inside category */
        .quotes-container {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            border-top: 0 solid #f0f0ee;
        }
        
        .category-box.expanded .quotes-container {
            max-height: 800px;
            border-top-width: 1px;
        }
        
        .quotes-inner {
            padding: 16px 24px;
        }
        
        .quote-row {
            padding: 12px 8px;
            cursor: pointer;
            transition: background 0.2s ease;
            border-radius: 6px;
            margin: 0 -8px;
        }
        
        .quote-row:hover {
            background: rgba(0,0,0,0.03);
        }
        
        .quote-row.selected {
            background: rgba(0,0,0,0.05);
        }
        
        .quote-text {
            font-size: 16px;
            line-height: 1.5;
        }
        
        .quote-row.ouch-quote .quote-text {
            color: var(--ouch-text);
        }
        
        .quote-row.wow-quote .quote-text {
            color: var(--wow-text);
        }
        
        /* Pull hint */
        .patterns-pull-hint {
            text-align: center;
            margin-top: 40px;
            color: #bbb;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .patterns-pull-hint.visible {
            opacity: 1;
        }
        
        .pull-arrow {
            font-size: 20px;
            margin-bottom: 8px;
            animation: pullBounce 2s ease-in-out infinite;
        }
        
        @keyframes pullBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(4px); }
        }
        
        .pull-text {
            font-size: 15px;
        }
        
        .patterns-continue-btn {
            display: none;
            margin-top: 32px;
            padding: 16px 40px;
            background: var(--wow-dark);
            border: none;
            border-radius: 28px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .patterns-continue-btn:hover {
            background: #6a8a6e;
        }
        
        .patterns-continue-btn.visible {
            display: block;
        }
        
        /* ============ PATTERNS SESSION NOTICE ============ */
        .patterns-session-notice {
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 12px;
            color: #bbb;
        }
        
        .patterns-history-link {
            background: none;
            border: none;
            color: #999;
            font-size: 12px;
            cursor: pointer;
            font-family: inherit;
            padding: 0;
            text-decoration: underline;
            text-decoration-color: #ddd;
            text-underline-offset: 2px;
        }
        
        .patterns-history-link:hover {
            color: #666;
            text-decoration-color: #999;
        }
        
        /* ============ HISTORY PAGE (full overlay) ============ */
        .history-page {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 200;
            display: flex;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .history-page.visible {
            opacity: 1;
            pointer-events: auto;
        }
        
        .history-page-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border);
        }
        
        .history-page-back {
            background: none;
            border: none;
            font-size: 14px;
            color: #888;
            cursor: pointer;
            font-family: inherit;
            padding: 8px 0;
        }
        
        .history-page-back:hover {
            color: #555;
        }
        
        .history-page-content {
            flex: 1;
            overflow-y: auto;
            padding: 40px 24px 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .history-page-title {
            font-size: 20px;
            color: #444;
            font-weight: 500;
            margin-bottom: 8px;
            text-align: center;
        }
        
        .history-page-subtitle {
            font-size: 13px;
            color: #aaa;
            margin-bottom: 32px;
            text-align: center;
        }
        
        /* History tabs */
        .history-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 24px;
            background: #f0f0ee;
            padding: 4px;
            border-radius: 12px;
            width: 100%;
            max-width: 500px;
        }
        
        .history-tab {
            flex: 1;
            padding: 12px 16px;
            font-size: 13px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background: transparent;
            color: #888;
            transition: all 0.2s ease;
            font-family: inherit;
        }
        
        .history-tab:hover {
            color: #555;
        }
        
        .history-tab.active {
            background: white;
            color: #444;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
        
        /* History content area */
        .history-page-body {
            width: 100%;
            max-width: 500px;
        }
        
        .history-tab-content {
            display: none;
        }
        
        .history-tab-content.active {
            display: block;
        }
        
        /* Pattern rows (what's surfaced) */
        .history-item {
            background: white;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 12px;
        }
        
        .history-item-main {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
        }
        
        .history-item-theme {
            font-size: 15px;
            color: #444;
            flex: 1;
        }
        
        .history-item-count {
            font-size: 13px;
            color: #999;
            white-space: nowrap;
        }
        
        .history-item-meta {
            font-size: 11px;
            color: #bbb;
            margin-top: 8px;
        }
        
        .history-item-often {
            font-size: 12px;
            color: #999;
            margin-top: 6px;
        }
        
        /* Clickable history items */
        .history-item.clickable {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .history-item.clickable:hover {
            background: #f5f4f2;
            border-color: #ddd;
        }
        
        .history-item.clickable:active {
            transform: scale(0.98);
        }
        
        /* Sparkline (neutral, no color judgment) */
        .history-sparkline {
            display: block;
            margin-top: 8px;
        }
        
        /* Commitment rows (what we've tried) */
        .history-commit {
            background: white;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 12px;
        }
        
        .history-commit-action {
            font-size: 15px;
            color: #444;
            margin-bottom: 6px;
        }
        
        .history-commit-context {
            font-size: 12px;
            color: #999;
            margin-bottom: 8px;
        }
        
        .history-commit-status {
            display: inline-block;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 10px;
            background: #f5f5f4;
            color: #888;
        }
        
        /* Next ideas (what we might try) */
        .history-next-item {
            background: white;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 12px;
        }
        
        .history-next-idea {
            font-size: 15px;
            color: #444;
            margin-bottom: 6px;
        }
        
        .history-next-from {
            font-size: 12px;
            color: #999;
        }
        
        /* Empty state */
        .history-empty {
            text-align: center;
            padding: 60px 20px;
            color: #ccc;
        }
        
        .history-empty-icon {
            font-size: 36px;
            margin-bottom: 16px;
            opacity: 0.4;
        }
        
        .history-empty-text {
            font-size: 15px;
            margin-bottom: 6px;
            color: #aaa;
        }
        
        .history-empty-sub {
            font-size: 13px;
            color: #ccc;
        }
        
        /* ============ THIS SESSION / PAST SECTIONS ============ */
        .history-this-session {
            margin-bottom: 24px;
        }
        
        .history-this-session-label {
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--border);
        }
        
        .history-this-session .history-item,
        .history-this-session .history-commit,
        .history-this-session .history-next-item {
            border-style: dashed;
            background: #fdfcfb;
        }
        
        .history-past {
            margin-top: 8px;
        }
        
        .history-past-label {
            font-size: 11px;
            color: #bbb;
            margin-bottom: 12px;
        }
        
        .history-past:empty,
        .history-this-session:empty {
            display: none;
        }
        
        /* Hide section labels when there's nothing */
        .history-this-session.empty,
        .history-past.empty {
            display: none;
        }
        
        /* First time empty state */
        .history-first-time {
            text-align: center;
            padding: 40px 20px;
            color: #bbb;
        }
        
        .history-first-time-text {
            font-size: 13px;
            line-height: 1.6;
        }
        
        /* ============ EXPERIMENT BUILDER ============ */
        .experiment-screen {
            padding-top: 24px;
            padding-bottom: 160px; /* room for input area + bottom panel */
            overflow-y: auto;
            justify-content: flex-start;
            align-items: center;
            /* keep position: fixed from .screen - don't override to relative */
        }
        
        /* ═══ RESULT DIALOG ═══ */
        .exp-result-dialog {
            position: fixed;
            top: 84px;
            right: 20px;
            width: 300px;
            background: white;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.18);
            z-index: 99;
            display: none;
        }
        
        .exp-result-dialog.show {
            display: block;
            animation: slideIn 0.2s ease-out;
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .exp-result-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .exp-result-status {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #E53935;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .exp-result-status::before {
            content: '';
            width: 8px;
            height: 8px;
            background: #E53935;
            border-radius: 50%;
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        
        .exp-result-off-btn {
            background: none;
            border: 1px solid var(--border);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 11px;
            color: var(--text-light);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .exp-result-off-btn:hover {
            background: #E53935;
            border-color: #E53935;
            color: white;
        }
        
        .exp-result-name {
            font-size: 18px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 6px;
        }
        
        .exp-result-desc {
            font-size: 14px;
            color: var(--text-light);
            line-height: 1.5;
            margin-bottom: 16px;
        }
        
        .exp-result-actions {
            display: flex;
            gap: 8px;
        }
        
        .exp-result-btn {
            flex: 1;
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
            border: none;
        }
        
        .exp-result-btn.keep {
            background: var(--wow);
            color: white;
        }
        
        .exp-result-btn.keep:hover {
            background: var(--wow-dark);
        }
        
        .exp-result-btn.reject {
            background: var(--bg);
            color: var(--text);
        }
        
        .exp-result-btn.reject:hover {
            background: var(--ouch);
            color: white;
        }
        
        .exp-result-btn.talk {
            background: var(--bg);
            color: var(--text);
        }
        
        .exp-result-btn.talk:hover {
            background: var(--text);
            color: white;
        }
        
        /* ═══ FORK IN THE ROAD — next step assuming you like it ═══ */
        .exp-result-fork {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border);
        }
        
        .exp-fork-label {
            font-size: 11px;
            color: var(--text-lighter);
            margin-bottom: 10px;
        }
        
        .exp-fork-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .exp-fork-option {
            padding: 10px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 13px;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        
        .exp-fork-option:hover {
            border-color: var(--wow);
            background: rgba(154, 196, 168, 0.1);
        }
        
        /* ═══ EXPERIMENT CONVERSATION — warm, readable ═══ */
        .exp-conversation {
            width: 100%;
            max-width: 540px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 24px;
        }
        
        .exp-msg {
            animation: fadeUp 0.3s ease;
            padding: 16px 20px;
            border-radius: 12px;
            margin-bottom: 16px;
        }
        
        .exp-msg.sam {
            background: #faf9f7;
            margin-left: 60px;
            border-radius: 12px 0 0 12px;
            border-right: 4px solid #ddd;
        }
        
        .exp-msg.claude {
            background: rgba(154, 196, 168, 0.15);
            border-left: 4px solid var(--wow);
            margin-right: 60px;
            border-radius: 0 12px 12px 0;
        }
        
        .exp-msg-who {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-lighter);
            margin-bottom: 8px;
        }
        
        .exp-msg.claude .exp-msg-who {
            color: var(--wow-dark);
        }
        
        .exp-msg.sam .exp-msg-who {
            color: #999;
        }
        
        .exp-msg-text {
            font-size: 17px;
            line-height: 1.7;
            color: var(--text);
            font-weight: 400;
        }
        
        .exp-msg.sam .exp-msg-text {
            color: var(--text-mid);
        }
        
        .exp-ideas {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 14px;
        }
        
        .exp-idea {
            padding: 14px 18px;
            background: white;
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 15px;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .exp-idea:hover {
            background: var(--wow);
            border-color: var(--wow);
            color: white;
        }
        
        .exp-nav-hint {
            text-align: center;
            font-size: 15px;
            color: #999;
            margin-bottom: 24px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 12px;
            transition: color 0.2s;
        }
        
        .exp-nav-hint:hover {
            color: #666;
        }
        
        .exp-nav-hint:hover .exp-nav-chevron {
            animation: none;
            transform: translateY(-2px);
        }
        
        .exp-nav-chevron {
            font-size: 18px;
            animation: gentle-bounce 2.5s ease-in-out infinite;
        }
        
        .exp-nav-text {
            font-size: 13px;
            letter-spacing: 0.3px;
        }
        
        @keyframes gentle-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }
        
        /* legacy - hidden */
        .exp-quote-card {
            display: none;
        }
        
        .exp-up {
            display: none;
        }
        
        .exp-quote-label {
            display: none;
        }
        
        .exp-quote-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--ouch);
            flex-shrink: 0;
            margin-top: 5px;
        }
        
        .exp-quote-text {
            font-size: 17px;
            line-height: 1.5;
            color: var(--ouch-text);
            font-style: italic;
        }
        
        /* Quote messages in conversation */
        .exp-msg.quote {
            background: var(--bg-ouch);
            border-radius: 12px;
            padding: 14px 18px;
            border-left: 3px solid var(--ouch);
        }
        
        .exp-msg.quote .exp-msg-who {
            color: var(--ouch);
            font-size: 11px;
            margin-bottom: 6px;
        }
        
        .exp-msg.quote .exp-msg-text {
            color: var(--ouch-text);
            font-style: italic;
        }
        
        /* Quote block - focal point */
        .exp-quote-block {
            background: var(--card);
            border-radius: 16px;
            padding: 24px;
            margin: 16px 0;
            text-align: center;
            border: 1px solid var(--border);
        }
        
        .exp-quote-block.ouch {
            border-left: 4px solid var(--ouch);
            background: var(--bg-ouch);
        }
        
        .exp-quote-block.wow {
            border-left: 4px solid var(--wow);
            background: var(--bg-wow);
        }
        
        .exp-quote-block .exp-quote-text {
            font-size: 18px;
            line-height: 1.6;
            color: var(--text);
            font-style: italic;
        }
        
        /* Pattern block — from history */
        .exp-pattern-block {
            background: #faf9f7;
            border-radius: 16px;
            padding: 20px 24px;
            margin: 16px 0;
            border: 1px dashed var(--border);
        }
        
        .exp-pattern-label {
            font-size: 11px;
            color: #aaa;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .exp-pattern-text {
            font-size: 17px;
            color: #555;
            line-height: 1.5;
        }
        
        /* System response — reflection + chips */
        .exp-response {
            padding: 16px 20px;
            animation: fadeUp 0.3s ease;
            background: rgba(154, 196, 168, 0.08);
            border-left: 3px solid var(--wow);
            border-radius: 12px;
            margin-right: 40px;
        }
        
        .exp-response::before {
            content: 'reflection';
            display: block;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--wow-dark);
            margin-bottom: 8px;
        }
        
        .exp-reflection {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        
        /* Invitation to continue */
        .exp-invite {
            text-align: center;
            padding: 20px;
            transition: opacity 0.3s;
        }
        
        .exp-invite.faded {
            opacity: 0.4;
        }
        
        .exp-invite-text {
            font-size: 15px;
            color: #999;
            margin-bottom: 16px;
        }
        
        .exp-invite-options {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }
        
        .exp-invite-option {
            font-size: 14px;
            color: #777;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.2s;
        }
        
        .exp-invite-option:hover {
            color: var(--text);
            background: var(--bg-warm);
        }
        
        .exp-invite-chevron {
            font-size: 16px;
            animation: gentle-bounce 2s ease-in-out infinite;
        }
        
        .exp-invite-option:hover .exp-invite-chevron {
            animation: none;
        }
        
        .exp-conversation {
            width: 100%;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-bottom: 24px;
        }
        
        .exp-ai-msg {
            font-size: 17px;
            color: #3d5941;
            line-height: 1.6;
            animation: fadeUp 0.3s ease;
            background: rgba(154, 196, 168, 0.15);
            border-left: 4px solid var(--wow);
            padding: 16px 20px;
            border-radius: 0 12px 12px 0;
            margin-bottom: 12px;
            margin-right: 60px;
        }
        
        .exp-ai-msg::before {
            content: 'reflection';
            display: block;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--wow-dark);
            margin-bottom: 10px;
            padding: 2px 8px;
            background: rgba(154, 196, 168, 0.2);
            border-radius: 4px;
            width: fit-content;
        }
        
        .exp-ai-msg.faded {
            color: #aaa;
            font-size: 15px;
        }
        
        /* User messages — distinct from reflection */
        .exp-user-msg {
            font-size: 17px;
            color: #555;
            line-height: 1.6;
            animation: fadeUp 0.3s ease;
            background: #faf9f7;
            padding: 16px 20px;
            border-radius: 12px 0 0 12px;
            border-right: 4px solid #ddd;
            margin-bottom: 12px;
            margin-left: 60px;
        }
        
        .exp-user-msg::before {
            content: 'you';
            display: block;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #999;
            margin-bottom: 10px;
            padding: 2px 8px;
            background: rgba(0, 0, 0, 0.04);
            border-radius: 4px;
            width: fit-content;
        }
        
        .exp-user-msg.faded {
            color: #bbb;
            font-size: 15px;
        }
        
        .exp-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 8px;
        }
        
        .exp-chips.faded {
            opacity: 0.5;
            pointer-events: none;
        }
        
        .exp-chip {
            padding: 12px 20px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 24px;
            font-size: 15px;
            color: #555;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        
        .exp-chip:hover {
            border-color: #ccc;
            background: #fafaf9;
        }
        
        .exp-chip.selected {
            background: #f0f5f1;
            border-color: var(--wow);
            color: var(--wow-dark);
        }
        
        .exp-card {
            background: var(--card);
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            overflow: hidden;
            animation: fadeUp 0.4s ease;
            width: 100%;
        }
        
        .exp-card.committed {
            opacity: 0.7;
        }
        
        .exp-card-main {
            padding: 20px 24px;
        }
        
        .exp-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
        }
        
        .exp-card-title {
            font-size: 12px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .exp-card-badge {
            font-size: 12px;
            color: var(--wow-dark);
            font-weight: 600;
        }
        
        .exp-try-text {
            font-size: 17px;
            color: #444;
            line-height: 1.5;
            margin-bottom: 16px;
        }
        
        .exp-wows-label {
            font-size: 13px;
            color: #999;
            margin-bottom: 8px;
        }
        
        .exp-wow-item {
            font-size: 15px;
            color: var(--wow-dark);
            line-height: 1.5;
            margin-bottom: 6px;
        }
        
        .exp-wow-item::before {
            content: '"';
            color: var(--wow);
        }
        
        .exp-wow-item::after {
            content: '"';
            color: var(--wow);
        }
        
        .exp-card-actions {
            display: flex;
            gap: 12px;
            padding: 16px 24px;
            background: #fafaf9;
            border-top: 1px solid #f0f0f0;
        }
        
        .exp-commit-btn {
            padding: 10px 20px;
            background: var(--wow-dark);
            border: none;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .exp-commit-btn:hover {
            background: #4a7a52;
        }
        
        .exp-adjust-btn {
            padding: 10px 20px;
            background: none;
            border: 1px solid #ddd;
            border-radius: 20px;
            font-size: 14px;
            color: #888;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .exp-adjust-btn:hover {
            border-color: #ccc;
            color: #666;
        }
        
        /* Experiment input area */
        .exp-input-area {
            position: fixed;
            bottom: 60px; /* sits above bottom panel */
            left: 0;
            right: 0;
            background: var(--bg);
            padding: 16px 24px;
            display: flex;
            justify-content: center;
            z-index: 50;
        }
        
        .exp-input-area .input-row {
            width: 100%;
            max-width: 500px;
            background: var(--card);
            border-radius: 16px;
            padding: 12px 16px;
            display: flex;
            gap: 12px;
            align-items: center;
            box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        }
        
        .exp-input-area textarea {
            flex: 1;
            border: none;
            font-family: inherit;
            font-size: 18px;
            line-height: 1.5;
            resize: none;
            outline: none;
            min-height: 28px;
            max-height: 120px;
            color: var(--text);
            background: transparent;
        }
        
        .exp-input-area textarea::placeholder {
            color: #bbb;
        }
        
        /* Ideas badge — floating on the side */
        .ideas-badge {
            position: fixed;
            right: 20px;
            bottom: 140px;
            display: flex;
            align-items: center;
            gap: 4px;
            background: white;
            border: 1px solid var(--wow);
            border-radius: 20px;
            padding: 8px 14px;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
            z-index: 52;
        }
        
        .ideas-badge:hover {
            background: var(--wow);
            color: white;
            transform: scale(1.05);
        }
        
        .ideas-icon {
            font-size: 16px;
        }
        
        .ideas-count {
            font-weight: 600;
            color: var(--wow);
        }
        
        .ideas-badge:hover .ideas-count {
            color: white;
        }
        
        .ideas-panel {
            position: fixed;
            right: 20px;
            bottom: 190px;
            width: 280px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.15);
            z-index: 55;
            display: none;
            max-height: 300px;
            overflow: hidden;
        }
        
        .ideas-panel.show {
            display: block;
            animation: slideUp 0.2s ease;
        }
        
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .ideas-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            font-weight: 500;
            color: var(--text);
        }
        
        .ideas-panel-close {
            background: none;
            border: none;
            font-size: 20px;
            color: #999;
            cursor: pointer;
            padding: 0 4px;
        }
        
        .ideas-list {
            padding: 12px 16px;
            overflow-y: auto;
            max-height: 240px;
        }
        
        .ideas-item {
            padding: 10px 12px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--text);
            cursor: pointer;
            transition: background 0.15s ease;
        }
        
        .ideas-item:hover {
            background: var(--wow-light, #e8f5e9);
        }
        
        .ideas-item:last-child {
            margin-bottom: 0;
        }
        
        .ideas-empty {
            color: #999;
            font-size: 14px;
            text-align: center;
            padding: 20px;
        }
        
        /* Floating card mini — left side */
        .card-mini {
            position: fixed;
            left: 20px;
            bottom: 140px;
            width: 200px;
            background: white;
            border: 1px solid var(--wow);
            border-radius: 12px;
            padding: 12px 14px;
            cursor: pointer;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
            z-index: 52;
        }
        
        .card-mini:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }
        
        .card-mini-label {
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }
        
        .card-mini-text {
            font-size: 14px;
            color: var(--text);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .card-mini-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--wow);
            color: white;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Cards panel */
        .cards-panel {
            position: fixed;
            left: 20px;
            bottom: 190px;
            width: 280px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.15);
            z-index: 55;
            display: none;
            max-height: 350px;
            overflow: hidden;
        }
        
        .cards-panel.show {
            display: block;
            animation: slideUp 0.2s ease;
        }
        
        .cards-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            font-weight: 500;
            color: var(--text);
        }
        
        .cards-panel-close {
            background: none;
            border: none;
            font-size: 20px;
            color: #999;
            cursor: pointer;
            padding: 0 4px;
        }
        
        .cards-list {
            padding: 12px 16px;
            overflow-y: auto;
            max-height: 290px;
        }
        
        .cards-list-item {
            padding: 12px;
            background: #f8f9fa;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: background 0.15s ease;
        }
        
        .cards-list-item:hover {
            background: var(--wow-light, #e8f5e9);
        }
        
        .cards-list-item:last-child {
            margin-bottom: 0;
        }
        
        .cards-list-item.current {
            border: 2px solid var(--wow);
            background: white;
        }
        
        .cards-list-item.committed {
            opacity: 0.7;
        }
        
        .cards-item-label {
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        
        .cards-item-label.committed {
            color: var(--wow);
        }
        
        .cards-item-text {
            font-size: 14px;
            color: var(--text);
            line-height: 1.4;
        }
        
        /* ============ REVEAL SEQUENCE ============ */
        .reveal-sequence {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 600;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .reveal-sequence.active {
            display: flex;
        }
        
        .reveal-toast {
            text-align: center;
            padding: 40px;
            display: none;
        }
        
        .reveal-toast.active {
            display: block;
            animation: revealIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        @keyframes revealIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .reveal-type {
            font-size: 64px;
            font-weight: 700;
            margin-bottom: 24px;
            transition: all 0.3s;
        }
        
        .reveal-type.ouch { color: var(--ouch); }
        .reveal-type.wow { color: var(--wow-dark); }
        
        /* Toast style variations */
        .reveal-toast.style-huge .reveal-type { font-size: 96px; }
        .reveal-toast.style-tilt { transform: rotate(-3deg); }
        .reveal-toast.style-tilt-right { transform: rotate(3deg); }
        .reveal-toast.style-whisper .reveal-type { font-size: 48px; letter-spacing: 8px; }
        .reveal-toast.style-spaced .reveal-type { letter-spacing: 12px; }
        
        .reveal-quote {
            font-size: 28px;
            line-height: 1.5;
            color: #555;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Vote results reveal */
        .reveal-vote-results {
            text-align: center;
            padding: 40px;
            display: none;
            max-width: 500px;
            width: 100%;
        }
        
        .reveal-vote-results.active {
            display: block;
            animation: revealIn 0.4s ease;
        }
        
        .reveal-vote-title {
            font-size: 20px;
            color: #888;
            margin-bottom: 32px;
        }
        
        .reveal-vote-bars {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .reveal-vote-bar {
            text-align: left;
        }
        
        .reveal-vote-bar-label {
            font-size: 15px;
            color: #555;
            margin-bottom: 6px;
        }
        
        .reveal-vote-bar-track {
            height: 8px;
            background: #e8e8e6;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .reveal-vote-bar-fill {
            height: 100%;
            background: var(--wow);
            border-radius: 4px;
            width: 0;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .reveal-vote-bar.winner .reveal-vote-bar-fill {
            background: var(--wow-dark);
        }
        
        .reveal-vote-bar.winner .reveal-vote-bar-label {
            font-weight: 600;
            color: var(--wow-dark);
        }
        
        /* Winner announcement */
        .reveal-winner {
            text-align: center;
            padding: 40px;
            display: none;
            max-width: 500px;
        }
        
        .reveal-winner.active {
            display: block;
            animation: revealIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .reveal-winner-label {
            font-size: 20px;
            color: #999;
            margin-bottom: 16px;
        }
        
        .reveal-winner-text {
            font-size: 36px;
            font-weight: 600;
            color: #333;
            line-height: 1.3;
        }
        
        /* We're trying + we might hear (combined) */
        .reveal-trying {
            text-align: center;
            padding: 40px;
            display: none;
            max-width: 600px;
        }
        
        .reveal-trying.active {
            display: block;
        }
        
        .reveal-trying-label {
            font-size: 20px;
            color: #999;
            margin-bottom: 16px;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.5s ease;
        }
        
        .reveal-trying-label.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .reveal-trying-text {
            font-size: 36px;
            font-weight: 600;
            color: #333;
            line-height: 1.3;
            margin-bottom: 48px;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.5s ease;
        }
        
        .reveal-trying-text.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .reveal-might-section {
            padding-top: 32px;
            border-top: 1px solid #e8e8e6;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.5s ease;
        }
        
        .reveal-might-section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .reveal-might-label {
            font-size: 18px;
            color: var(--wow-dark);
            margin-bottom: 16px;
        }
        
        .reveal-wows {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .reveal-wow-item {
            font-size: 20px;
            line-height: 1.5;
            color: var(--wow-text);
        }
        
        /* Closing section (swirl + see you) */
        .reveal-closing-section {
            margin-top: 40px;
            padding-top: 32px;
            border-top: 1px solid #e8e8e6;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.5s ease;
        }
        
        .reveal-closing-section.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .reveal-closing-swirl {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--swirl);
            margin: 0 auto 16px;
        }
        
        .reveal-closing-swirl.pulse {
            animation: swirlPulse 0.8s ease-out;
        }
        
        @keyframes swirlPulse {
            0% { transform: scale(1) rotate(0deg); }
            30% { transform: scale(1.8) rotate(180deg); }
            60% { transform: scale(1.3) rotate(360deg); }
            100% { transform: scale(1) rotate(360deg); }
        }
        
        .reveal-closing-text {
            font-size: 15px;
            color: #aaa;
        }
        
        /* ============ SUGGESTIONS PHASE ============ */
        .suggestions-screen {
            padding: 40px 24px;
            overflow-y: auto;
        }
        
        .suggestions-content {
            max-width: 500px;
            width: 100%;
        }
        
        .suggestions-header {
            text-align: center;
            margin-bottom: 32px;
        }
        
        .suggestions-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 8px;
        }
        
        .suggestions-subtitle {
            font-size: 15px;
            color: #999;
        }
        
        .suggestions-pool {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 24px;
            min-height: 200px;
        }
        
        .suggestion-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            animation: fadeUp 0.3s ease;
        }
        
        .suggestion-card.ai { border-left: 3px solid var(--swirl); }
        .suggestion-card.teacher { border-left: 3px solid var(--wow-dark); }
        .suggestion-card.student { border-left: 3px solid var(--ouch); }
        
        .suggestion-label {
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }
        
        .suggestion-try {
            font-size: 16px;
            color: #333;
            margin-bottom: 12px;
        }
        
        .suggestion-wow {
            font-size: 14px;
            color: var(--wow-text);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .suggestion-refresh {
            width: 24px;
            height: 24px;
            border: 1px solid #ddd;
            background: none;
            border-radius: 50%;
            color: #999;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .suggestion-refresh:hover {
            border-color: #aaa;
            color: #666;
        }
        
        .suggestions-add {
            display: flex;
            gap: 8px;
            margin-bottom: 32px;
        }
        
        .suggestions-add input {
            flex: 1;
            padding: 14px 18px;
            border: 1px solid var(--border);
            border-radius: 24px;
            font-size: 15px;
            font-family: inherit;
            outline: none;
        }
        
        .suggestions-add input:focus {
            border-color: #aaa;
        }
        
        .suggestions-add-btn {
            width: 48px;
            height: 48px;
            border: 1px solid var(--wow);
            background: none;
            border-radius: 50%;
            color: var(--wow-dark);
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .suggestions-add-btn:hover {
            background: var(--wow);
            color: white;
        }
        
        .suggestions-continue-btn {
            width: 100%;
            padding: 18px;
            background: var(--wow-dark);
            border: none;
            border-radius: 28px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .suggestions-continue-btn:hover {
            background: #6a8a6e;
        }
        
        /* ============ BALLOT EDITOR ============ */
        .ballot-screen {
            padding: 40px 24px;
            overflow-y: auto;
        }
        
        .ballot-content {
            max-width: 500px;
            width: 100%;
        }
        
        .ballot-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 24px;
        }
        
        .ballot-title {
            font-size: 20px;
            color: #333;
        }
        
        .ballot-count {
            font-size: 14px;
            color: #999;
        }
        
        .ballot-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 32px;
            min-height: 100px;
        }
        
        .ballot-option {
            background: var(--card);
            border: 2px solid var(--wow);
            border-radius: 12px;
            padding: 16px;
            position: relative;
        }
        
        .ballot-option-try {
            font-size: 16px;
            color: #333;
            margin-bottom: 6px;
            padding-right: 40px;
        }
        
        .ballot-option-wow {
            font-size: 14px;
            color: var(--wow-text);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .ballot-option-remove {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 28px;
            height: 28px;
            border: 1px solid #ddd;
            background: none;
            border-radius: 50%;
            color: #999;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .ballot-option-remove:hover {
            border-color: #c44;
            color: #c44;
        }
        
        .ballot-available {
            margin-bottom: 32px;
        }
        
        .ballot-available-label {
            font-size: 13px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }
        
        .ballot-available-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .ballot-available-item {
            background: #f8f8f6;
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .ballot-available-item:hover {
            background: #f0f0ee;
        }
        
        .ballot-available-text {
            font-size: 15px;
            color: #555;
        }
        
        .ballot-available-add {
            width: 28px;
            height: 28px;
            border: 1px solid var(--wow);
            background: none;
            border-radius: 50%;
            color: var(--wow-dark);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .ballot-available-add:hover {
            background: var(--wow);
            color: white;
        }
        
        .ballot-empty {
            color: #bbb;
            font-style: italic;
            font-size: 14px;
            padding: 20px;
            text-align: center;
        }
        
        .ballot-open-btn {
            width: 100%;
            padding: 18px;
            background: var(--wow-dark);
            border: none;
            border-radius: 28px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .ballot-open-btn:hover {
            background: #6a8a6e;
        }
        
        .ballot-open-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        /* ============ STUDENT SUGGEST SCREEN ============ */
        .student-suggest-screen {
            padding: 40px 24px;
        }
        
        .student-suggest-content {
            max-width: 400px;
            width: 100%;
            text-align: center;
        }
        
        .student-suggest-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 8px;
        }
        
        .student-suggest-subtitle {
            font-size: 15px;
            color: #999;
            margin-bottom: 32px;
        }
        
        .student-suggest-ideas {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 24px;
            text-align: left;
        }
        
        .student-suggest-idea {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 16px;
            font-size: 15px;
            color: #555;
            animation: fadeUp 0.3s ease;
        }
        
        .student-suggest-input-area {
            display: flex;
            gap: 8px;
            margin-bottom: 40px;
        }
        
        .student-suggest-input-area input {
            flex: 1;
            padding: 14px 18px;
            border: 1px solid var(--border);
            border-radius: 24px;
            font-size: 15px;
            font-family: inherit;
            outline: none;
        }
        
        .student-suggest-input-area input:focus {
            border-color: #aaa;
        }
        
        .student-suggest-btn {
            width: 48px;
            height: 48px;
            border: 1px solid var(--wow);
            background: none;
            border-radius: 50%;
            color: var(--wow-dark);
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .student-suggest-btn:hover {
            background: var(--wow);
            color: white;
        }
        
        .student-suggest-waiting {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            color: #999;
        }
        
        .student-suggest-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--swirl);
            animation: breathe 2s ease-in-out infinite;
        }
        
        .student-suggest-waiting-text {
            font-size: 14px;
        }
        
        /* ============ VOTE SCREEN (Students) ============ */
        .vote-screen {
            padding: 40px 24px;
            overflow-y: auto;
        }
        
        .vote-content {
            max-width: 500px;
            width: 100%;
        }
        
        .vote-title {
            font-size: 24px;
            color: #333;
            text-align: center;
            margin-bottom: 8px;
        }
        
        .vote-instruction {
            font-size: 15px;
            color: #999;
            text-align: center;
            margin-bottom: 32px;
        }
        
        .vote-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .vote-option {
            background: var(--card);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        
        .vote-option:hover {
            border-color: #ccc;
        }
        
        .vote-option.first {
            border-color: var(--wow-dark);
            background: rgba(122, 154, 126, 0.05);
        }
        
        .vote-option.second {
            border-color: var(--wow);
            background: rgba(122, 154, 126, 0.03);
        }
        
        .vote-option-rank {
            position: absolute;
            top: -10px;
            right: 16px;
            background: var(--wow-dark);
            color: white;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: none;
        }
        
        .vote-option.first .vote-option-rank,
        .vote-option.second .vote-option-rank {
            display: block;
        }
        
        .vote-option.second .vote-option-rank {
            background: var(--wow);
        }
        
        .vote-option-try {
            font-size: 17px;
            color: #333;
            margin-bottom: 6px;
        }
        
        .vote-option-wow {
            font-size: 14px;
            color: var(--wow-text);
        }
        
        .vote-submit-btn {
            width: 100%;
            padding: 18px;
            background: #ccc;
            border: none;
            border-radius: 28px;
            color: white;
            font-size: 16px;
            cursor: not-allowed;
            font-family: inherit;
            transition: all 0.2s;
            margin-bottom: 40px;
        }
        
        .vote-submit-btn.ready {
            background: var(--wow-dark);
            cursor: pointer;
        }
        
        .vote-submit-btn.ready:hover {
            background: #6a8a6e;
        }
        
        .vote-suggest {
            border-top: 1px solid var(--border);
            padding-top: 24px;
        }
        
        .vote-suggest-label {
            font-size: 14px;
            color: #999;
            margin-bottom: 12px;
        }
        
        .vote-suggest-row {
            display: flex;
            gap: 8px;
        }
        
        .vote-suggest-row input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid var(--border);
            border-radius: 24px;
            font-size: 15px;
            font-family: inherit;
            outline: none;
        }
        
        .vote-suggest-row input:focus {
            border-color: #aaa;
        }
        
        .vote-suggest-btn {
            width: 44px;
            height: 44px;
            border: 1px solid var(--wow);
            background: none;
            border-radius: 50%;
            color: var(--wow-dark);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .vote-suggest-btn:hover {
            background: var(--wow);
            color: white;
        }
        
        /* ============ VOTE WAITING (Students) ============ */
        .vote-waiting-screen {
            background: var(--bg);
        }
        
        .vote-waiting-content {
            text-align: center;
        }
        
        .vote-waiting-dot {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--swirl);
            margin: 0 auto 16px;
            animation: breathe 2s ease-in-out infinite;
        }
        
        .vote-waiting-text {
            font-size: 16px;
            color: #999;
        }
        
        /* ============ VOTE MONITOR (Teacher) ============ */
        .vote-monitor-screen {
            background: var(--bg);
        }
        
        .vote-monitor-content {
            text-align: center;
        }
        
        .vote-monitor-title {
            font-size: 18px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .vote-monitor-count {
            font-size: 48px;
            font-weight: 700;
            color: #333;
            margin-bottom: 24px;
        }
        
        .vote-monitor-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--swirl);
            margin: 0 auto 32px;
            animation: breathe 2s ease-in-out infinite;
        }
        
        .vote-timer {
            margin: 24px 0;
        }
        
        .vote-timer-bar {
            height: 6px;
            background: #e8e8e6;
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        
        .vote-timer-fill {
            height: 100%;
            background: var(--wow);
            border-radius: 3px;
            width: 100%;
            transition: width 1s linear;
        }
        
        .vote-timer-fill.warning {
            background: var(--ouch);
        }
        
        .vote-timer-text {
            font-size: 14px;
            color: #888;
            text-align: center;
        }
        
        .vote-timer-text.warning {
            color: var(--ouch);
            font-weight: 600;
        }
        
        .student-vote-timer {
            margin-top: 32px;
        }
        
        .vote-close-btn {
            padding: 16px 40px;
            background: var(--wow-dark);
            border: none;
            border-radius: 28px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .vote-close-btn:hover {
            background: #6a8a6e;
        }
        
        /* ============ VOTE RESULTS (Teacher decides) ============ */
        .vote-results-screen {
            padding: 40px 24px;
            overflow-y: auto;
        }
        
        .vote-results-content {
            max-width: 500px;
            width: 100%;
        }
        
        .vote-results-title {
            font-size: 24px;
            color: #333;
            text-align: center;
            margin-bottom: 4px;
        }
        
        .vote-results-subtitle {
            font-size: 15px;
            color: #999;
            text-align: center;
            margin-bottom: 32px;
        }
        
        .vote-results-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 32px;
        }
        
        .vote-result-option {
            background: var(--card);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 16px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.2s;
        }
        
        .vote-result-option:hover {
            border-color: #ccc;
        }
        
        .vote-result-option.winner {
            border-color: var(--wow);
        }
        
        .vote-result-option.selected {
            border-color: var(--wow-dark);
            background: rgba(122, 154, 126, 0.05);
        }
        
        .vote-result-bar {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background: rgba(122, 154, 126, 0.1);
            z-index: 0;
        }
        
        .vote-result-content {
            position: relative;
            z-index: 1;
        }
        
        .vote-result-try {
            font-size: 17px;
            color: #333;
            margin-bottom: 4px;
        }
        
        .vote-result-count {
            font-size: 14px;
            color: #888;
        }
        
        .vote-result-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background: var(--wow);
            color: white;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .vote-confirm-btn {
            width: 100%;
            padding: 18px;
            background: var(--wow-dark);
            border: none;
            border-radius: 28px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .vote-confirm-btn:hover {
            background: #6a8a6e;
        }
        
        /* ============ COMMITMENT CARD ============ */
        .commit-screen {
            overflow-y: auto;
            padding: 0;
        }
        
        .commit-card {
            width: 100%;
            min-height: 100%;
            background: var(--card);
            display: flex;
            flex-direction: column;
            transition: background 0.8s ease;
        }
        
        .commit-card.committed {
            background: #fdfcfa;
        }
        
        .commit-swirl-bar {
            height: 10px;
            background: linear-gradient(90deg, #d4a89a 0%, #c4956a 25%, #9ac4a8 75%, #5a8a62 100%);
            flex-shrink: 0;
            transition: opacity 0.8s ease;
        }
        
        .commit-card.committed .commit-swirl-bar {
            opacity: 0.6;
        }
        
        .commit-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 40px 48px 32px;
            max-width: 700px;
            margin: 0 auto;
            width: 100%;
        }
        
        .commit-title {
            font-size: 14px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 2px;
            text-align: center;
            margin-bottom: 32px;
        }
        
        /* Feedback section (students told me) */
        .commit-feedback-section {
            background: #fdfcfb;
            border-radius: 12px;
            padding: 24px 28px;
            margin-bottom: 32px;
            border-left: 4px solid var(--ouch);
            transition: all 0.8s ease;
        }
        
        .commit-card.committed .commit-feedback-section {
            background: transparent;
            border-left-color: #e0d0c8;
        }
        
        .commit-section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
            flex-wrap: wrap;
            gap: 12px;
        }
        
        .commit-section-label {
            font-size: 13px;
            color: var(--ouch);
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }
        
        .commit-section-label.wow {
            color: var(--wow-dark);
        }
        
        /* Pattern pills */
        .commit-pattern-pills {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .commit-pattern-pills.visible {
            opacity: 1;
            pointer-events: auto;
        }
        
        .commit-pattern-pill {
            font-size: 12px;
            padding: 5px 12px;
            border-radius: 12px;
            border: 1px solid var(--border);
            background: var(--card);
            color: #999;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
        }
        
        .commit-pattern-pill:hover {
            border-color: var(--ouch);
            color: var(--ouch-dark);
        }
        
        .commit-pattern-pill.active {
            background: var(--ouch);
            border-color: var(--ouch);
            color: #fff;
        }
        
        /* Quote rows */
        .commit-quotes, .commit-wows {
            min-height: 28px;
        }
        
        .commit-quote-row, .commit-wow-row {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            margin-bottom: 12px;
            animation: fadeUp 0.2s ease;
        }
        
        .commit-quote-row:last-of-type,
        .commit-wow-row:last-of-type {
            margin-bottom: 0;
        }
        
        .commit-quote-text {
            font-size: 18px;
            line-height: 1.5;
            flex: 1;
            padding: 6px 0;
            color: var(--ouch-text);
            transition: color 0.8s ease;
        }
        
        .commit-card.committed .commit-quote-text {
            color: #9a8a7a;
        }
        
        .commit-wow-text {
            font-size: 18px;
            line-height: 1.5;
            flex: 1;
            padding: 6px 0;
            color: var(--wow-dark);
            transition: color 0.8s ease;
        }
        
        .commit-card.committed .commit-wow-text {
            color: #8aaa8e;
        }
        
        .commit-quote-btn, .commit-wow-btn {
            background: none;
            border: none;
            font-size: 16px;
            color: #ddd;
            cursor: pointer;
            padding: 6px;
            border-radius: 4px;
            transition: all 0.2s;
            flex-shrink: 0;
        }
        
        .commit-quote-btn:hover {
            color: #999;
            background: rgba(0,0,0,0.04);
        }
        
        .commit-quote-btn.remove:hover {
            color: var(--ouch);
        }
        
        .commit-wow-btn {
            color: #c5dcc5;
        }
        
        .commit-wow-btn:hover {
            color: var(--wow-dark);
            background: rgba(0,0,0,0.04);
        }
        
        .commit-wow-btn.remove:hover {
            color: #a88;
        }
        
        .commit-add-btn {
            background: none;
            border: 1px dashed #e0d0c0;
            font-size: 14px;
            color: var(--ouch);
            cursor: pointer;
            padding: 10px 16px;
            border-radius: 8px;
            transition: all 0.2s;
            font-family: inherit;
            margin-top: 12px;
            display: none;
        }
        
        .commit-add-btn.visible {
            display: inline-block;
        }
        
        .commit-add-btn:hover {
            border-color: var(--ouch);
            color: var(--ouch-dark);
        }
        
        .commit-add-btn.wow {
            border-color: #c5dcc5;
            color: var(--wow-dark);
        }
        
        .commit-add-btn.wow:hover {
            border-color: var(--wow-dark);
        }
        
        /* Try section */
        .commit-try-section {
            margin-bottom: 32px;
        }
        
        .commit-try-label {
            font-size: 15px;
            color: #aaa;
            margin-bottom: 12px;
        }
        
        .commit-try-text {
            font-size: 28px;
            color: #333;
            line-height: 1.4;
            font-weight: 500;
            transition: color 0.8s ease;
        }
        
        .commit-card.committed .commit-try-text {
            color: #555;
        }
        
        /* Wows section */
        .commit-wows-section {
            background: #f8faf8;
            border-radius: 12px;
            padding: 24px 28px;
            border-left: 4px solid var(--wow-dark);
            margin-bottom: 32px;
            transition: all 0.8s ease;
        }
        
        .commit-card.committed .commit-wows-section {
            background: transparent;
            border-left-color: #a8c8a8;
        }
        
        /* Commit section */
        .commit-grace-section {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px 0;
            margin-top: 8px;
        }
        
        .commit-swirl-btn {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: var(--swirl);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            animation: breathe 3s ease-in-out infinite;
        }
        
        .commit-swirl-btn:hover {
            transform: scale(1.1);
            animation: none;
        }
        
        .commit-swirl-btn svg {
            width: 24px;
            height: 24px;
            color: #fff;
        }
        
        .commit-swirl-btn.committed {
            width: 12px;
            height: 12px;
            animation: none;
            cursor: default;
        }
        
        .commit-swirl-btn.committed svg {
            display: none;
        }
        
        /* Closing */
        .commit-closing {
            font-size: 14px;
            color: #bbb;
            text-align: center;
            margin-top: 8px;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .commit-closing.visible {
            opacity: 1;
        }
        
        /* Footer */
        .commit-footer {
            padding: 20px 48px;
            border-top: 1px solid #f0f0ee;
        }
        
        .commit-back-btn {
            font-size: 14px;
            color: #999;
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            margin: -8px -12px;
            border-radius: 8px;
            font-family: inherit;
            transition: all 0.2s;
        }
        
        .commit-back-btn:hover {
            background: rgba(0,0,0,0.04);
            color: #666;
        }
        
        .commit-footer.hidden {
            display: none;
        }
        
        /* ============ STUDENT END SCREEN ============ */
        .student-end-thankyou {
            text-align: center;
            animation: fadeUp 0.5s ease;
        }
        
        .student-end-toast {
            font-size: 72px;
            font-weight: 700;
            color: var(--wow-dark);
            margin-bottom: 16px;
            animation: spring 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.5);
        }
        
        .student-end-message {
            font-size: 18px;
            color: #888;
            margin-bottom: 40px;
        }
        
        .student-end-btn {
            padding: 16px 32px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 28px;
            font-size: 16px;
            color: #555;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        
        .student-end-btn:hover {
            border-color: #ccc;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        }
        
        /* Student patterns screen */
        .student-patterns-screen {
            width: 100%;
            max-width: 600px;
            padding: 40px 24px 180px;
            animation: fadeUp 0.5s ease;
        }
        
        .student-patterns-screen .patterns-prompt {
            text-align: center;
            font-size: 16px;
            color: #999;
            margin-bottom: 32px;
        }
        
        /* Waiting for teacher */
        .student-waiting {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 24px;
            margin-top: 32px;
            color: #999;
        }
        
        .student-waiting-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--swirl);
            animation: breathe 2s ease-in-out infinite;
        }
        
        .student-waiting-text {
            font-size: 15px;
        }
        
        .student-waiting.hidden {
            display: none;
        }
        
        /* ============ DISPLAY MODE (projector) ============ */
        .display-mode {
            position: fixed;
            inset: 0;
            background: #fafaf9;
            z-index: 500;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .display-mode.active {
            display: flex;
        }
        
        .display-content {
            text-align: center;
            padding: 40px;
            max-width: 800px;
        }
        
        .display-label {
            font-size: 20px;
            color: #888;
            margin-bottom: 16px;
        }
        
        .display-value {
            font-size: 36px;
            color: #333;
            line-height: 1.4;
            font-weight: 500;
            margin-bottom: 48px;
        }
        
        .display-value.small {
            font-size: 24px;
            color: #555;
            font-style: italic;
            font-weight: 400;
        }
        
        .display-hint {
            position: fixed;
            bottom: 32px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 14px;
            color: #ccc;
        }
    </style>
</head>
<body>
    <!-- ═══════════════════════════════════════════════════════════════════════════
         SCREENS & COMPONENTS
         The actual surfaces users touch
         ═══════════════════════════════════════════════════════════════════════════ -->
    
    <!-- ─────────────────────────────────────────────────────────────────────────
         PLATFORM: TEST HARNESS
         Jump to phases, switch roles, simulate signals
         ───────────────────────────────────────────────────────────────────────── -->
    
    <!-- ============ LAB MODE CONTROLS ============ -->
    
    <!-- Journey rail - numbered steps that drive the story -->
    <div class="lab-journey-rail" id="labJourneyRail">
        <button class="journey-close" onclick="hideJourneyRail()">×</button>
        <div class="journey-line"></div>
        
        <div class="journey-section" data-label="setup">
            <button class="journey-step" data-phase="plan1" onclick="showPhaseThreads('plan1')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">1</span>
                <span class="journey-step-name">who</span>
                <span class="journey-step-threads" data-phase="plan1"></span>
            </button>
            <button class="journey-step" data-phase="plan2" onclick="showPhaseThreads('plan2')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">2</span>
                <span class="journey-step-name">how</span>
                <span class="journey-step-threads" data-phase="plan2"></span>
            </button>
            <button class="journey-step" data-phase="plan3" onclick="showPhaseThreads('plan3')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">3</span>
                <span class="journey-step-name">when</span>
                <span class="journey-step-threads" data-phase="plan3"></span>
            </button>
        </div>
        
        <div class="journey-section" data-label="session">
            <button class="journey-step" data-phase="waiting" onclick="showPhaseThreads('waiting')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">4</span>
                <span class="journey-step-name">connect</span>
                <span class="journey-step-threads" data-phase="waiting"></span>
            </button>
            <button class="journey-step" data-phase="collect" onclick="showPhaseThreads('collect')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">5</span>
                <span class="journey-step-name">reflect</span>
                <span class="journey-step-threads" data-phase="collect"></span>
            </button>
            <button class="journey-step" data-phase="patterns" onclick="showPhaseThreads('patterns')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">6</span>
                <span class="journey-step-name">patterns</span>
                <span class="journey-step-threads" data-phase="patterns"></span>
            </button>
        </div>
        
        <div class="journey-section" data-label="act" data-flow="teacher-decides">
            <button class="journey-step" data-phase="experiment" onclick="showPhaseThreads('experiment')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">7</span>
                <span class="journey-step-name">try</span>
                <span class="journey-step-threads" data-phase="experiment"></span>
            </button>
            <button class="journey-step" data-phase="commit" onclick="showPhaseThreads('commit')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">8</span>
                <span class="journey-step-name">commit</span>
                <span class="journey-step-threads" data-phase="commit"></span>
            </button>
        </div>
        
        <div class="journey-section" data-label="vote" data-flow="vote">
            <button class="journey-step alt" data-phase="suggestions" onclick="showPhaseThreads('suggestions')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">7</span>
                <span class="journey-step-name">suggest</span>
                <span class="journey-step-threads" data-phase="suggestions"></span>
            </button>
            <button class="journey-step alt" data-phase="ballot" onclick="showPhaseThreads('ballot')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">8</span>
                <span class="journey-step-name">ballot</span>
                <span class="journey-step-threads" data-phase="ballot"></span>
            </button>
            <button class="journey-step alt" data-phase="voteMonitor" onclick="showPhaseThreads('voteMonitor')">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">9</span>
                <span class="journey-step-name">vote</span>
                <span class="journey-step-threads" data-phase="voteMonitor"></span>
            </button>
            <button class="journey-step alt" data-phase="commit">
                <div class="journey-step-dot"></div>
                <span class="journey-step-num">10</span>
                <span class="journey-step-name">commit</span>
                <span class="journey-step-status" data-status="untested">○</span>
            </button>
        </div>
    </div>
    
    <!-- Role badge - shows current scenario, click to edit -->
    <div class="lab-role-badge" id="labRoleBadge">
        <span class="role-badge-who" id="roleBadgeWho" onclick="openRoleEditor()">Classrooms</span>
        <span class="role-badge-sep">·</span>
        <span class="role-badge-contract" id="roleBadgeContract" onclick="openRoleEditor()">teacher decides</span>
        <span class="role-badge-sep">│</span>
        <button class="role-badge-toggle" data-role="teacher" onclick="labSetRole('teacher')">facilitator</button>
        <button class="role-badge-toggle" data-role="student" onclick="labSetRole('student')">participant</button>
    </div>
    
    <!-- Role editor modal -->
    <div class="lab-role-modal" id="labRoleModal">
        <div class="role-modal-content">
            <div class="role-modal-header">
                <span>Change context</span>
                <button class="role-modal-close" onclick="closeRoleEditor()">×</button>
            </div>
            <div class="role-modal-warning">
                ⚠ This resets people, signals & position
            </div>
            <div class="role-modal-section">
                <div class="role-modal-label">Context</div>
                <div class="role-modal-options" id="labEditorWho"></div>
            </div>
            <div class="role-modal-section">
                <div class="role-modal-label">Contract</div>
                <div class="role-modal-options" id="labEditorContract"></div>
            </div>
            <div class="role-modal-section">
                <div class="role-modal-label">View as</div>
                <div class="role-modal-options">
                    <button class="role-modal-btn" data-role="teacher" onclick="labEditorSetRole('teacher')">facilitator</button>
                    <button class="role-modal-btn" data-role="student" onclick="labEditorSetRole('student')">participant</button>
                </div>
            </div>
            <div class="role-modal-actions">
                <button class="role-modal-cancel" onclick="closeRoleEditor()">cancel</button>
                <button class="role-modal-apply" onclick="applyRoleChange()">apply</button>
            </div>
        </div>
    </div>
    
    <!-- Lab controls: note(n), pause, [count]->HEARD, experiments toggle, experiments list -->
    <div class="lab-controls" id="labControls">
        <button class="lab-ctrl-btn" onclick="togglePicker()" title="note (n)">
            <span class="ctrl-icon">✎</span>
        </button>
        <button class="lab-ctrl-btn" onclick="togglePause()" title="pause (space)">
            <span class="ctrl-icon">⏸</span>
        </button>
        <button class="lab-ctrl-btn lab-export-btn" onclick="quickExport()" title="export notes">
            <span class="ctrl-icon" id="exportIcon">·</span>
        </button>
        <button class="lab-ctrl-btn" onclick="showNotes()" title="notes & features">
            <span class="ctrl-icon">▭</span>
        </button>

        <button class="lab-ctrl-btn" onclick="toggleProtocolPanel()" title="protocol">
            <span class="ctrl-icon">☰</span>
        </button>
        <button class="lab-ctrl-btn lab-clear-btn" onclick="showClearDataPanel()" title="clear data">
            <span class="ctrl-icon">∅</span>
        </button>
        
        <div class="lab-ctrl-divider"></div>
        
        <!-- Realtime mode toggle -->
        <button class="lab-ctrl-btn active" id="btnDemo" onclick="setRealtimeMode('demo')" title="demo mode (local)">
            <span class="ctrl-icon">◌</span>
        </button>
        <button class="lab-ctrl-btn" id="btnLive" onclick="setRealtimeMode('live')" title="live mode (Firebase)">
            <span class="ctrl-icon">◉</span>
        </button>
        <button class="lab-ctrl-btn" id="btnDebugConsole" onclick="toggleDebugConsole()" title="data model (`)">
            <span class="ctrl-icon">⌘</span>
        </button>
        <span class="realtime-status" id="realtimeStatus" title="connection status">DEMO</span>
    </div>
    
    <!-- Clear Data Panel -->
    <div class="clear-data-panel" id="clearDataPanel">
        <div class="clear-data-header">
            <span>clear data</span>
            <button class="clear-data-close" onclick="hideClearDataPanel()">×</button>
        </div>
        <div class="clear-data-content">
            <div class="clear-data-section">
                <div class="clear-data-label">what's stored</div>
                <div class="clear-data-item">
                    <span class="clear-item-name">threads</span>
                    <span class="clear-item-count" id="clearThreadCount">0</span>
                </div>
                <div class="clear-data-item">
                    <span class="clear-item-name">meeting notes</span>
                    <span class="clear-item-status" id="clearMeetingStatus">empty</span>
                </div>
                <div class="clear-data-item">
                    <span class="clear-item-name">experiments</span>
                    <span class="clear-item-count" id="clearExpCount">0</span>
                </div>
                <div class="clear-data-item">
                    <span class="clear-item-name">API key</span>
                    <span class="clear-item-status" id="clearApiStatus">not set</span>
                </div>
            </div>
            <div class="clear-data-actions">
                <button class="clear-action-btn" onclick="clearThreads()">clear threads</button>
                <button class="clear-action-btn" onclick="clearMeetingNotes()">clear meeting</button>
                <button class="clear-action-btn" onclick="clearExperiments()">reset experiments</button>
                <button class="clear-action-btn danger" onclick="clearAllData()">clear everything</button>
            </div>
        </div>
    </div>
    
    <!-- Protocol Panel (browsable context for Claude) -->
    <div class="lab-protocol-panel" id="labProtocolPanel">
        <div class="protocol-header">
            <span>protocol</span>
            <button class="protocol-close" onclick="toggleProtocolPanel()">×</button>
        </div>
        <div class="protocol-tabs">
            <button class="protocol-tab active" data-tab="turn" onclick="switchProtocolTab('turn')">this turn</button>
            <button class="protocol-tab" data-tab="changelog" onclick="switchProtocolTab('changelog')">changelog</button>
            <button class="protocol-tab" data-tab="claude" onclick="switchProtocolTab('claude')">for claude</button>
            <button class="protocol-tab" data-tab="arch" onclick="switchProtocolTab('arch')">architecture</button>
            <button class="protocol-tab" data-tab="state" onclick="switchProtocolTab('state')">state</button>
            <button class="protocol-tab" data-tab="philosophy" onclick="switchProtocolTab('philosophy')">philosophy</button>
        </div>
        <div class="protocol-content" id="protocolContent">
            <!-- Populated by JS -->
        </div>
    </div>
    
    <!-- Lab Notes Panel (feedback workflow) -->
    <div class="lab-notes-panel" id="labNotesPanel" style="display: none;">
        <div class="tracker-header">
            <span class="tracker-title">lab</span>
            <span class="notes-badge" id="notesBadge">0</span>
            <span class="tracker-status" id="trackerStatus"></span>
            <button class="tracker-header-btn" onclick="exportTrackerData()" id="exportBtn" title="export all">export</button>
            <button class="tracker-header-btn" onclick="openChat()" id="chatBtn" title="chat with Claude">chat</button>
            <button class="tracker-close" onclick="closeNotes()">×</button>
        </div>
        
        <!-- Chat panel (shows when chatMode experiment is on) -->
        <div class="chat-panel" id="chatPanel">
            <div class="chat-messages" id="chatMessages">
                <!-- Populated by renderChat() -->
            </div>
        </div>
        
        <!-- Backend test panel (hidden by default) -->
        <div class="backend-test-panel" id="backendTestPanel" style="display: none;">
            <div class="backend-test-header">
                <span>Backend Test Mode</span>
                <button class="thread-action" onclick="toggleBackendTest()">×</button>
            </div>
            <div class="backend-test-info">
                Paste bulk responses to simulate API:
            </div>
            <textarea class="backend-test-input" id="backendTestInput" 
                placeholder="[thread-id]: response
[thread-id]: EXPERIMENT: try this
..."></textarea>
            <div class="backend-test-actions">
                <button class="backend-test-btn" onclick="importResponses()">import all</button>
                <button class="backend-test-btn secondary" onclick="generateTestResponses()">auto-generate</button>
                <button class="backend-test-btn secondary" onclick="clearAllThreads()">clear all</button>
            </div>
            <div class="backend-test-stats" id="backendTestStats"></div>
        </div>
        
        <!-- Awaiting response banner -->
        <div class="awaiting-banner" id="awaitingBanner">
            <span class="awaiting-dot"></span>
            <span class="awaiting-text" id="awaitingText">all caught up</span>
        </div>
        
        <!-- Main conversation area -->
        <div class="tracker-content" id="trackerContent">
            <!-- Stored notes will be rendered here -->
        </div>
        
        <!-- Quick add at bottom -->
        <div class="tracker-footer">
            <div class="quick-add">
                <div class="quick-add-row">
                    <input type="text" class="quick-add-input" id="quickAddInput" 
                        placeholder="what are you noticing?"
                        onkeydown="if(event.key==='Enter'){document.getElementById('quickAddWowIf').focus()}">
                </div>
                <div class="quick-add-wowif">
                    <span class="quick-add-wowif-label">wow if:</span>
                    <input type="text" class="quick-add-wowif-input" id="quickAddWowIf" 
                        placeholder="two-word moment name..."
                        onkeydown="if(event.key==='Enter'){addQuickNote()}">
                    <button class="quick-add-btn" id="quickAddBtn" onclick="addQuickNote()">add</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Element picker overlay -->
    <div class="lab-picker-highlight" id="labPickerHighlight"></div>
    <div class="lab-picker-label" id="labPickerLabel"></div>
    
    <!-- Inline note input (appears after picking) — the-pen -->
    <div class="lab-note-inline" id="labNoteInline">
        <textarea class="note-inline-input" id="noteInlineInput" placeholder="what are you noticing?" rows="2" onkeydown="if(event.key==='Enter' && !event.shiftKey){event.preventDefault();document.getElementById('noteAcceptanceInput').focus()}"></textarea>
        <div class="note-acceptance-row">
            <span class="note-acceptance-label">wow if:</span>
            <input type="text" class="note-acceptance-input" id="noteAcceptanceInput" placeholder="a little wow moment as a two-word name..." onkeydown="if(event.key==='Enter'){saveInlineNote()}" />
        </div>
    </div>
    
    <!-- Pause indicator -->
    <div class="lab-pause-indicator" id="labPauseIndicator">
        <span class="pause-icon">⏸</span>
        <span class="pause-text">PAUSED</span>
        <span class="pause-hint">space to resume</span>
    </div>
    
    <!-- Demeanor toast (shows when cycling demeanor) -->
    <div class="lab-demeanor-toast" id="labDemeanorToast">
        <svg class="demeanor-toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="7" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/>
        </svg>
        <span class="demeanor-toast-text" id="labDemeanorToastText">engaged</span>
    </div>
    
    <!-- Experiment engagement toast -->
    <div class="exp-toast" id="expToast">
        <span class="exp-toast-icon" id="expToastIcon">✓</span>
        <span class="exp-toast-text" id="expToastText">accepted</span>
    </div>
    
    <!-- ============ INPUT DIAL (subtle banner below input) ============ -->
    <div class="input-dial" id="inputDial">
        <button class="input-dial-toggle" id="inputDialToggle" onclick="toggleInputDial()">
            ···
        </button>
        <div class="input-dial-panel">
            <div class="input-dial-title">Next Input</div>
            
            <div class="input-dial-section">
                <div class="input-dial-label">Signal type</div>
                <div class="input-dial-row">
                    <button class="dial-signal-btn ouch active" id="dialOuch" onclick="dialSetSignal('ouch')">
                        <div class="dial-signal-dot"></div>
                        <div class="dial-signal-label">ouch</div>
                    </button>
                    <button class="dial-signal-btn wow" id="dialWow" onclick="dialSetSignal('wow')">
                        <div class="dial-signal-dot"></div>
                        <div class="dial-signal-label">wow</div>
                    </button>
                </div>
            </div>
            
            <div class="input-dial-section">
                <div class="input-dial-label">Filter trigger</div>
                <button class="dial-filter-btn name" id="dialName" onclick="dialSetFilter('name')">Contains name</button>
                <button class="dial-filter-btn id" id="dialId" onclick="dialSetFilter('id')">Contains ID #</button>
                <button class="dial-filter-btn crisis" id="dialCrisis" onclick="dialSetFilter('fail')">Crisis content</button>
                <button class="dial-filter-btn" id="dialPass" onclick="dialSetFilter('pass')">✓ Normal (pass)</button>
            </div>
            
            <div class="dial-status">
                Next: <strong id="dialStatusSignal">ouch</strong> · <strong id="dialStatusFilter">pass</strong>
            </div>
        </div>
    </div>
    
    <!-- ─────────────────────────────────────────────────────────────────────────
         FEATURES: SESSION HEADER
         People dots, timer, session code — both roles see this (differently)
         ───────────────────────────────────────────────────────────────────────── -->
    
    <!-- ============ UNIFIED SESSION HEADER (from 36) ============ -->
    <div class="unified-header" id="unifiedHeader" onclick="toggleHeaderOverlay()">
        <div class="logo" onclick="event.stopPropagation(); toggleLabMode()">ouch wow lab <span class="version-badge" onclick="event.stopPropagation(); toggleVersionHistory()"><span class="v-num">48</span> gathering</span></div>
        <div class="people-group" id="peopleGroup" onclick="event.stopPropagation()">
            <svg class="person-icon" id="personIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="7" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/>
            </svg>
            <div class="people-dots" id="unifiedHeaderDots"></div>
        </div>
        <div class="timer-group" id="unifiedTimerGroup" onclick="event.stopPropagation()">
            <div class="segments" id="unifiedSegments"></div>
            <svg class="timer-icon" id="unifiedTimerIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
                <polyline points="12 6 12 12 16 14"/>
            </svg>
        </div>
        <div class="session-status-badge" id="unifiedStatusBadge">waiting</div>
    </div>
    
    <!-- ============ HEADER OVERLAY ============ -->
    <div class="header-overlay" id="headerOverlay">
        <div class="overlay-header">
            <div class="logo" onclick="event.stopPropagation(); toggleLabMode()" style="font-size: 16px; font-weight: 600; cursor: pointer;">ouch wow lab <span class="version-badge" onclick="event.stopPropagation(); toggleVersionHistory()"><span class="v-num">31</span> morning-thunder</span></div>
            <div class="session-box" onclick="event.stopPropagation(); copySessionCode()">
                <span class="session-url">ouchlab.co/</span>
                <span class="session-code" id="overlaySessionCode">X7K2M9</span>
                <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                </svg>
            </div>
            <button class="close-btn" onclick="closeHeaderOverlay()">
                <span>close</span>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>
        
        <!-- Dynamic content area -->
        <div id="overlayContent">
            <!-- Populated by JS based on session state -->
        </div>
        
        <!-- Phase indicator (only when active) -->
        <div class="phase-indicator" id="phaseIndicator">
            <div class="phase-pip">
                <div class="phase-dot" data-phase="plan"></div>
            </div>
            <div class="phase-connector" data-after="plan"></div>
            <div class="phase-pip">
                <div class="phase-dot" data-phase="collect"></div>
            </div>
            <div class="phase-connector" data-after="collect"></div>
            <div class="phase-pip">
                <div class="phase-dot" data-phase="patterns"></div>
            </div>
            <div class="phase-connector" data-after="patterns"></div>
            <div class="phase-pip">
                <div class="phase-dot" data-phase="experiment"></div>
            </div>
            <div class="phase-connector" data-after="experiment"></div>
            <div class="phase-pip">
                <div class="phase-dot" data-phase="commit"></div>
            </div>
        </div>
    </div>
    
    <!-- ============ WAITING ROOM (before session starts) ============ -->
    <div class="screen waiting-room-screen" id="waitingRoomScreen">
        <!-- Together Playground — feel presence while waiting -->
        <div class="together-playground" id="togetherPlayground">
            <canvas id="togetherCanvas"></canvas>
            <div class="together-hint">hold still · collisions spark · influence bleeds both ways</div>
        </div>
        
        <!-- Teacher view -->
        <div class="waiting-room-content" id="teacherWaitingRoom">
            <div class="waiting-room-title">ready when you are</div>
            <div class="waiting-room-subtitle">share the code, then start</div>
            
            <div class="session-box" onclick="copySessionCode()" style="margin: 24px auto; display: inline-flex;">
                <span class="session-url">ouchlab.co/</span>
                <span class="session-code" id="waitingSessionCode">X7K2M9</span>
                <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                </svg>
            </div>
            
            <div class="waiting-people-count" id="waitingPeopleCount">1</div>
            <div class="waiting-people-label">people here</div>
            <div class="waiting-people-area">
                <div class="waiting-people-dots" id="waitingPeopleDots"></div>
            </div>
            
            <div class="waiting-start-btn-wrapper">
                <button class="waiting-start-btn" id="waitingStartBtn" onclick="startActiveSession()">start session</button>
                
                <!-- Thread dot (lab mode only) — red when experiment active, shows threads -->
                <div class="thread-dot style-3" id="mainThreadDot" onclick="toggleExpResponse(event)"></div>
                
                <!-- Experiment/Thread response popup -->
                <div class="exp-response-popup" id="expResponsePopup">
                    <div class="exp-response-header">threads here</div>
                    <div class="exp-response-threads" id="expResponseThreads">
                        <!-- Populated by JS -->
                    </div>
                    <button class="exp-response-btn add" onclick="addThreadFromDot()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
                        add thread
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Student view -->
        <div class="student-waiting-room" id="studentWaitingRoom" style="display: none;">
            <div class="student-waiting-dot"></div>
            <div class="student-waiting-title">waiting for your facilitator</div>
            <div class="student-waiting-sub">they'll start when everyone's here</div>
        </div>
    </div>
    
    <!-- ═══ GUIDE PANEL — minimal conversation ═══ -->
    <div class="guide-panel" id="guidePanel">
        <div class="guide-header">
            <div class="guide-target">about <strong>start session button</strong></div>
            <button class="guide-close" onclick="closeGuide()">×</button>
        </div>
        
        <div class="guide-conversation" id="guideConversation">
            <div class="guide-msg">
                <div class="guide-msg-who">sam</div>
                this start session button doesn't feel like the right style, what might we try
            </div>
            
            <div class="guide-msg claude">
                <div class="guide-msg-who">claude</div>
                How might we make starting feel like an invitation?
            </div>
            
            <div class="guide-msg">
                <div class="guide-msg-who">sam</div>
                I imagine a game we play or some other activity while we wait for everyone that invites us in and gets us ready
            </div>
            
            <div class="guide-msg claude">
                <div class="guide-msg-who">claude</div>
                What would make people feel together before it officially begins?
            </div>
            
            <div class="guide-msg">
                <div class="guide-msg-who">sam</div>
                my idea is a game we make — which feels like a simple golf game, with ouches and wows, but is actually progressively harder with 50 levels and really fun. we can see each other playing somehow and interact. we feel together.
            </div>
            
            <div class="guide-msg">
                <div class="guide-msg-who">sam</div>
                run experiment
            </div>
            
            <div class="guide-msg claude">
                <div class="guide-msg-who">claude</div>
                Ouch/wow mini-golf. Hazards are ouches, holes are wows. See each other in real-time. Waiting room = level one.<br><br>
                What's the smallest version where you'd feel together?
            </div>
            
            <div class="guide-msg">
                <div class="guide-msg-who">sam</div>
                WOW
            </div>
            
            <div class="guide-msg claude">
                <div class="guide-msg-who">claude</div>
                how might we iterate toward a game?
                <div class="guide-ideas">
                    <button class="guide-chip" style="background: var(--wow); color: white; border-color: var(--wow);">
                        <strong>wow hole</strong> — a target that appears randomly, first there celebrates
                    </button>
                    <button class="guide-chip" style="background: var(--wow); color: white; border-color: var(--wow);">
                        <strong>ouch zone</strong> — touch one and you bounce back hard
                    </button>
                    <button class="guide-chip" style="background: var(--wow); color: white; border-color: var(--wow);">
                        <strong>shared push</strong> — everyone moves the same ball together
                    </button>
                </div>
            </div>
            
            <div class="guide-msg">
                <div class="guide-msg-who">sam</div>
                all three please
            </div>
            
            <div class="guide-msg claude">
                <div class="guide-msg-who">claude</div>
                combining: wow holes + ouch zones + shared push. building now.
                <div class="guide-actions">
                    <button class="guide-action-btn primary" onclick="showToastMessage('prototype updated')">see it</button>
                    <button class="guide-action-btn" onclick="keepTalking()">adjust</button>
                </div>
            </div>
            
            <div class="guide-msg">
                <div class="guide-msg-who">sam</div>
                wait — these colors. people could BE these colors in the game. that's an idea.
            </div>
            
            <div class="guide-msg claude">
                <div class="guide-msg-who">claude</div>
                yes — each person gets a distinct color (not swirl). when you see dots moving, you know who's who.<br><br>
                that's a different kind of noticing: you saw the chip colors → thought about people → new idea emerged.<br><br>
                what if the experiment UX could capture that? like:
                <div class="guide-ideas">
                    <button class="guide-chip" style="background: var(--wow); color: white; border-color: var(--wow);">
                        <strong>spark mode</strong> — I notice something in the interface and it triggers an idea
                    </button>
                    <button class="guide-chip" style="background: var(--wow); color: white; border-color: var(--wow);">
                        <strong>thread it</strong> — connect this idea to another element (people → colors → bottom bar)
                    </button>
                </div>
            </div>
            
            <div class="guide-msg">
                <div class="guide-msg-who">sam</div>
                thread it
            </div>
            
            <div class="guide-msg claude">
                <div class="guide-msg-who">claude</div>
                threading: chip colors → people in game → bottom bar display<br><br>
                what connects these? "identity should be visible and distinct"<br><br>
                this could become an experiment: try distinct people colors in the bottom bar for one session, see if it feels clearer.
                <div class="guide-actions">
                    <button class="guide-action-btn primary" onclick="showToastMessage('experiment queued')">try it</button>
                    <button class="guide-action-btn" onclick="keepTalking()">keep threading</button>
                </div>
            </div>
        </div>
        
        <div class="guide-input-area">
            <textarea class="guide-input" id="guideInput" placeholder="Say something..." rows="1" oninput="autoResizeGuide(this)"></textarea>
        </div>
    </div>
    
    <!-- ============ SESSION HEADER (Teacher) ============ -->
    <header class="session-header" id="sessionHeader">
        <div class="header-left">
            <div class="session-box" onclick="copySessionCode()">
                <span class="session-url">ouchlab.co/</span>
                <span class="session-code" id="sessionCode">X7K2M9</span>
                <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                </svg>
            </div>
        </div>
        <div class="header-right">
            <!-- Connected -->
            <div class="stat-item">
                <div class="stat-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
                        <line x1="12" y1="18" x2="12.01" y2="18"/>
                    </svg>
                </div>
                <span class="stat-num" id="connectedCount">1</span>
            </div>
            
            <!-- Typing -->
            <div class="stat-item typing-indicator">
                <div class="typing-dots active" id="typingDots">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
                <span class="stat-num" id="typingCount">3</span>
            </div>
            
            <!-- Signals -->
            <div class="stat-item">
                <div class="swirl-mini"></div>
                <span class="stat-num" id="signalCount">8</span>
            </div>
            
            <!-- Timer -->
            <div class="stat-item timer-wrapper">
                <div class="timer-pie" id="timerPie" style="--progress: 100%"></div>
                <span class="timer-text" id="timerDisplay">10:00</span>
            </div>
            
            <!-- End button -->
            <button class="end-btn" onclick="showEndModal()">end</button>
        </div>
    </header>
    
    <!-- ============ STUDENT HEADER ============ -->
    <header class="student-header" id="studentHeader" style="display: none;">
        <div class="student-logo">ouch wow lab</div>
    </header>
    
    <!-- ============ PLAN SCREEN 1: WHO ============ -->
    <div class="screen" id="planScreen1">
        <div class="plan-logo" onclick="event.stopPropagation(); toggleLabMode()">ouch wow lab <span class="version-badge" onclick="event.stopPropagation(); toggleVersionHistory()"><span class="v-num"></span></span></div>
        <div class="plan-header">
            <div class="step-indicator">
                <div class="step-dot active"></div>
                <div class="step-dot"></div>
            </div>
            <h1 class="plan-question">who</h1>
            <p class="plan-subtitle">Who's in the room?</p>
        </div>
        
        <div class="who-grid">
            <div class="who-card" onclick="selectWho('classrooms', this)">
                <div class="who-symbol">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <rect x="3" y="4" width="18" height="12" rx="2"/>
                        <circle cx="8" cy="20" r="2"/>
                        <circle cx="16" cy="20" r="2"/>
                        <line x1="12" y1="10" x2="12" y2="7"/>
                        <line x1="10" y1="10" x2="14" y2="10"/>
                    </svg>
                </div>
                <div class="who-name">Classrooms</div>
                <div class="who-relationship">Teacher + students</div>
                <div class="who-scenario">Class check-in, lecture feedback</div>
            </div>
            
            <div class="who-card" onclick="selectWho('teams', this)">
                <div class="who-symbol">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="12" cy="7" r="4"/>
                        <circle cx="5" cy="17" r="3"/>
                        <circle cx="19" cy="17" r="3"/>
                        <circle cx="12" cy="20" r="3"/>
                    </svg>
                </div>
                <div class="who-name">Teams</div>
                <div class="who-relationship">Peers, maybe with a lead</div>
                <div class="who-scenario">Sprint retro, weekly sync</div>
            </div>
            
            <div class="who-card" onclick="selectWho('leaders', this)">
                <div class="who-symbol">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="12" cy="6" r="4"/>
                        <path d="M12 10 L12 14"/>
                        <path d="M6 20 L12 14 L18 20"/>
                    </svg>
                </div>
                <div class="who-name">Leaders</div>
                <div class="who-relationship">One person + their people</div>
                <div class="who-scenario">Leadership feedback, 1:1 prep</div>
            </div>
            
            <div class="who-card" onclick="selectWho('cohorts', this)">
                <div class="who-symbol">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="6" cy="8" r="3"/>
                        <circle cx="12" cy="6" r="3"/>
                        <circle cx="18" cy="8" r="3"/>
                        <circle cx="8" cy="16" r="3"/>
                        <circle cx="16" cy="16" r="3"/>
                    </svg>
                </div>
                <div class="who-name">Cohorts</div>
                <div class="who-relationship">Peers learning together</div>
                <div class="who-scenario">PLC, workshop, training</div>
            </div>
            
            <div class="who-card" onclick="selectWho('boards', this)">
                <div class="who-symbol">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <rect x="4" y="6" width="16" height="12" rx="2"/>
                        <circle cx="8" cy="12" r="2"/>
                        <circle cx="12" cy="12" r="2"/>
                        <circle cx="16" cy="12" r="2"/>
                    </svg>
                </div>
                <div class="who-name">Boards</div>
                <div class="who-relationship">Governance + executive</div>
                <div class="who-scenario">Board check-in, oversight</div>
            </div>
            
            <div class="who-card" onclick="selectWho('communities', this)">
                <div class="who-symbol">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="12" cy="12" r="8"/>
                        <circle cx="8" cy="10" r="2"/>
                        <circle cx="16" cy="10" r="2"/>
                        <circle cx="10" cy="15" r="2"/>
                        <circle cx="14" cy="15" r="2"/>
                    </svg>
                </div>
                <div class="who-name">Communities</div>
                <div class="who-relationship">Neighbors, members</div>
                <div class="who-scenario">Town hall, gathering</div>
            </div>
            
            <div class="who-card coming-soon" onclick="return false;">
                <div class="who-status">soon</div>
                <div class="who-symbol">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="8" cy="10" r="4"/>
                        <circle cx="16" cy="10" r="4"/>
                        <path d="M8 14 Q12 20 16 14"/>
                    </svg>
                </div>
                <div class="who-name">Couples</div>
                <div class="who-relationship">Two people</div>
                <div class="who-scenario">Relationship check-in</div>
            </div>
            
            <div class="who-card coming-soon" onclick="return false;">
                <div class="who-status">soon</div>
                <div class="who-symbol">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="16" cy="8" r="4"/>
                        <circle cx="8" cy="16" r="4"/>
                        <path d="M13 11 L11 13" stroke-dasharray="2 2"/>
                    </svg>
                </div>
                <div class="who-name">Coaches</div>
                <div class="who-relationship">Guide + client</div>
                <div class="who-scenario">Session reflection</div>
            </div>
        </div>
    </div>
    
    <!-- ============ PLAN SCREEN 2: WHAT HAPPENS WITH TRUTH ============ -->
    <div class="screen" id="planScreen2">
        <div class="plan-logo" onclick="event.stopPropagation(); toggleLabMode()">ouch wow lab <span class="version-badge" onclick="event.stopPropagation(); toggleVersionHistory()"><span class="v-num"></span></span></div>
        <div class="plan-header">
            <div class="step-indicator">
                <div class="step-dot done"></div>
                <div class="step-dot active"></div>
            </div>
            <div class="selected-chip" onclick="goBackToWho()">
                <svg id="selectedWhoIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"></svg>
                <span class="selected-chip-text" id="selectedWhoName">Teams</span>
                <span class="selected-chip-change">change</span>
            </div>
            <h1 class="plan-question">what happens with truth</h1>
        </div>
        
        <div class="contracts" id="contractsContainer">
            <!-- Populated by JS -->
        </div>
    </div>
    
    <!-- ============ PLAN SCREEN 3: WHEN ============ -->
    <div class="screen" id="planScreen3">
        <div class="plan-logo" onclick="event.stopPropagation(); toggleLabMode()">ouch wow lab <span class="version-badge" onclick="event.stopPropagation(); toggleVersionHistory()"><span class="v-num"></span></span></div>
        <div class="planned-content">
            <h1 class="plan-question" id="plannedTitle">pick a moment you could trade for this</h1>
            
            <!-- Trade options (for team/teacher) -->
            <div class="trade-section" id="tradeSection">
                <div class="trade-options">
                    <button class="trade-btn" onclick="selectTrade(this, 'meeting')">
                        <div class="trade-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <rect x="3" y="4" width="18" height="18" rx="2"/>
                                <line x1="16" y1="2" x2="16" y2="6"/>
                                <line x1="8" y1="2" x2="8" y2="6"/>
                                <line x1="3" y1="10" x2="21" y2="10"/>
                            </svg>
                        </div>
                        <span class="trade-text">15 min of an upcoming meeting</span>
                    </button>
                    <button class="trade-btn" onclick="selectTrade(this, 'now')">
                        <div class="trade-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <circle cx="12" cy="12" r="10"/>
                                <polyline points="12 6 12 12 16 14"/>
                            </svg>
                        </div>
                        <span class="trade-text">right now — everyone's here</span>
                    </button>
                </div>
                
                <div class="meeting-details" id="meetingDetails">
                    <input type="text" class="meeting-input" id="meetingName" placeholder="which meeting? (e.g., Tuesday standup)">
                    <button class="confirm-btn" onclick="confirmMeeting()">confirm</button>
                </div>
            </div>
            
            <!-- Post-selection: share link + steps -->
            <div class="post-selection" id="postSelection">
                <div class="url-card">
                    <div class="url-label">share this link</div>
                    <div class="url-display">
                        <span class="url-base">ouchlab.co/</span>
                        <span class="url-code" id="planSessionCode">X7K2M9</span>
                    </div>
                    <button class="copy-btn" onclick="copyPlanUrl()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="9" y="9" width="13" height="13" rx="2"/>
                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                        </svg>
                        <span id="copyText">copy link</span>
                    </button>
                </div>
                
                <div class="next-steps" id="nextSteps">
                    <div class="next-label">right now, in the room</div>
                    <div class="next-item">
                        <div class="next-num">1</div>
                        <div class="next-text">Share the link — students join on their phones</div>
                    </div>
                    <div class="next-item">
                        <div class="next-num">2</div>
                        <div class="next-text">They share ouches and wows (10 min)</div>
                    </div>
                    <div class="next-item">
                        <div class="next-num">3</div>
                        <div class="next-text">You see patterns, pick what to try</div>
                    </div>
                </div>
                
                <button class="start-btn" onclick="startSession()">start session →</button>
            </div>
        </div>
    </div>
    
    <!-- ============ PERSISTENT CHIPS (shown during planning) ============ -->
    <div class="persistent-chips" id="persistentChips">
        <div class="chip-group" id="chipGroupWho" style="display: none;">
            <span class="chip-label">who</span>
            <div class="context-chip" id="chipWho"></div>
        </div>
        <div class="chip-group" id="chipGroupHow" style="display: none;">
            <span class="chip-label">how</span>
            <div class="context-chip" id="chipHow"></div>
        </div>
        <div class="chip-group" id="chipGroupWhen" style="display: none;">
            <span class="chip-label">when</span>
            <div class="context-chip" id="chipWhen"></div>
        </div>
    </div>
    
    <!-- ============ JOIN SCREEN (student waiting) ============ -->
    <div class="screen" id="joinScreen">
        <div class="join-content">
            <div class="join-prompt">you're in</div>
            <div class="join-code-display">X7K2M9</div>
            <div class="join-waiting">waiting for session to start...</div>
        </div>
    </div>
    
    <!-- ============ COLLECT SCREEN ============ -->
    <div class="screen active" id="collectScreen">
        <div class="container">
            <div class="dots" id="dots"></div>
            
            <div class="content" id="content">
                <div class="toast" id="toast">
                    <div class="toast-word" id="toastWord">OUCH</div>
                    <div class="toast-sub" id="toastSub">heard.</div>
                </div>
            </div>
            
            <div class="prompts" id="prompts">
                <div class="nudge">
                    <span id="nudgeText">Think of a specific moment...</span>
                    <button class="refresh-btn" id="refreshBtn" onclick="nextPrompts()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                            <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
                            <path d="M21 3v5h-5"/>
                        </svg>
                    </button>
                </div>
                <div class="chips" id="chips"></div>
            </div>
            
            <!-- API Key Warning Banner -->
            <div class="api-key-banner" id="apiKeyBanner" style="display:none">
                <div class="api-key-banner-text">
                    <strong>⚠ No AI key</strong> — classification will ask you each time
                </div>
                <button class="api-key-banner-btn" onclick="promptForApiKey()">add key</button>
                <button class="api-key-banner-dismiss" onclick="dismissApiKeyBanner()">×</button>
            </div>
            
            <div class="input-area">
                <div class="input-row">
                    <textarea id="input" rows="1" placeholder="something that stuck with me..."></textarea>
                    <button class="send-btn" id="sendBtn" onclick="send()">
                        <svg viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
                    </button>
                </div>
                <button class="help-toggle" id="helpToggle" onclick="toggleHelp()">?</button>
            </div>
            <div class="boundary-hint" id="boundaryHint"></div>
            
            <!-- Debug strip (lab mode only) - subtle keys below everything -->
            <div class="debug-strip" id="debugStrip">
                <button class="debug-key" data-type="auto" onclick="setDebugType('auto')">·</button>
                <button class="debug-key" data-type="ouch" onclick="setDebugType('ouch')">o</button>
                <button class="debug-key" data-type="wow" onclick="setDebugType('wow')">w</button>
                <button class="debug-key" data-type="safety" onclick="setDebugType('safety')">×</button>
                <span class="debug-gap"></span>
                <button class="debug-key" data-id="anon" onclick="setDebugId('anon')">a</button>
                <button class="debug-key" data-id="named" onclick="setDebugId('named')">n</button>
            </div>
        </div>
    </div>
    
    <!-- ============ PATTERNS TRANSITION (teacher sees after ending session) ============ -->
    <div class="screen" id="patternsTransition">
        <div class="invitation">
            <div class="invitation-text">what's it like to be a student here?</div>
            <div class="invitation-sub">let's find out together</div>
            <button class="play-btn" onclick="startPatternsAnimation()"></button>
        </div>
    </div>
    
    <!-- ============ DOTS ANIMATION SCREEN ============ -->
    <div class="dots-animation-screen" id="dotsAnimationScreen"></div>
    
    <!-- ============ PATTERNS SCREEN ============ -->
    <div class="screen patterns-screen" id="patternsScreen">
        <!-- Session notice at top -->
        <div class="patterns-session-notice">
            quotes are for this session only · <button class="patterns-history-link" onclick="openHistoryPage()">see what we've been tracking →</button>
        </div>
        
        <div class="patterns-prompt" id="patternsPrompt">what patterns are loudest?</div>
        
        <div class="categories-container" id="categoriesContainer">
            <!-- Category boxes populated by JS -->
        </div>
        
        <!-- Absent themes (only shown for returning sessions) -->
        <div class="absent-themes-section" id="absentThemesSection">
            <div class="absent-label">didn't come up this time</div>
            <div class="absent-list" id="absentThemesList">rushing through material, feeling judged</div>
        </div>
        
        <!-- Hint for teacher-decides mode -->
        <div class="patterns-pull-hint" id="patternsPullHint">
            <div class="pull-arrow">↓</div>
            <div class="pull-text">pick one to try something</div>
        </div>
        
        <!-- Button for vote modes -->
        <button class="patterns-continue-btn" id="patternsContinueBtn" onclick="goToBallot()">build ballot →</button>
    </div>
    
    <!-- ============ HISTORY PAGE (full overlay) ============ -->
    <div class="history-page" id="historyPage">
        <div class="history-page-header">
            <button class="history-page-back" onclick="closeHistoryPage()">← back to patterns</button>
        </div>
        
        <div class="history-page-content">
            <div class="history-page-title">what we've been tracking</div>
            <div class="history-page-subtitle">patterns help us notice what to try next · not track individuals</div>
            
            <!-- Tabs -->
            <div class="history-tabs">
                <button class="history-tab active" data-tab="surfaced" onclick="switchHistoryTab('surfaced')">what's surfaced</button>
                <button class="history-tab" data-tab="tried" onclick="switchHistoryTab('tried')">what we've tried</button>
                <button class="history-tab" data-tab="next" onclick="switchHistoryTab('next')">what we might try</button>
            </div>
            
            <!-- Content -->
            <div class="history-page-body">
                <!-- WHAT'S SURFACED -->
                <div class="history-tab-content active" id="historyTabSurfaced">
                    <!-- From this session (preview) -->
                    <div class="history-this-session" id="historySurfacedThisSession">
                        <div class="history-this-session-label">from this session</div>
                        <div id="historySurfacedThisSessionList">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                    
                    <!-- Past history -->
                    <div class="history-past" id="historySurfacedPast">
                        <div class="history-past-label">from before</div>
                        <div id="historySurfacedList">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                </div>
                
                <!-- WHAT WE'VE TRIED -->
                <div class="history-tab-content" id="historyTabTried">
                    <!-- From this session (preview) -->
                    <div class="history-this-session" id="historyTriedThisSession">
                        <div class="history-this-session-label">from this session</div>
                        <div id="historyTriedThisSessionList">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                    
                    <!-- Past history -->
                    <div class="history-past" id="historyTriedPast">
                        <div class="history-past-label">from before</div>
                        <div id="historyTriedList">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                </div>
                
                <!-- WHAT WE MIGHT TRY -->
                <div class="history-tab-content" id="historyTabNext">
                    <!-- From this session (preview) -->
                    <div class="history-this-session" id="historyNextThisSession">
                        <div class="history-this-session-label">from this session</div>
                        <div id="historyNextThisSessionList">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                    
                    <!-- Past history -->
                    <div class="history-past" id="historyNextPast">
                        <div class="history-past-label">from before</div>
                        <div id="historyNextList">
                            <!-- Populated by JS -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- ============ EXPERIMENT SCREEN ============ -->
    <!-- Result Dialog — keep / reject / talk + fork in road -->
    <div class="exp-result-dialog" id="expResultDialog">
        <div class="exp-result-header">
            <div class="exp-result-status">experiment live</div>
            <button class="exp-result-off-btn" onclick="quickOffExperiment()">turn off</button>
        </div>
        <div class="exp-result-name">together playground</div>
        <div class="exp-result-desc">Colored dots in waiting room — you see others, can bump them</div>
        <div class="exp-result-actions">
            <button class="exp-result-btn keep" onclick="keepExperiment()">keep</button>
            <button class="exp-result-btn reject" onclick="rejectExperiment()">reject</button>
            <button class="exp-result-btn talk" onclick="talkExperiment()">talk</button>
        </div>
        
        <!-- Fork in the road — next step assuming you like it -->
        <div class="exp-result-fork">
            <div class="exp-fork-label">if you like it, what's next?</div>
            <div class="exp-fork-options">
                <div class="exp-fork-option" onclick="selectFork('wow hole — first there wins')">add a goal → wow hole</div>
                <div class="exp-fork-option" onclick="selectFork('ouch zones to avoid')">add danger → ouch zones</div>
                <div class="exp-fork-option" onclick="selectFork('make the bumps bouncier')">tune the feel → bouncier bumps</div>
            </div>
        </div>
    </div>

    <div class="screen experiment-screen" id="experimentScreen">
        <!-- Navigation hint -->
        <div class="exp-nav-hint" id="expQuoteCard" onclick="goBackToPatterns()">
            <span class="exp-nav-chevron">↑</span>
            <span class="exp-nav-text">what surfaced</span>
        </div>
        
        <!-- Our conversation about the experiment -->
        <div class="exp-conversation" id="expConversation">
            <!-- Quotes and invitations added dynamically -->
        </div>
        
        <!-- Floating card mini (left side) -->
        <div class="card-mini" id="cardMini" style="display: none;" onclick="toggleCardsPanel()">
            <div class="card-mini-label">trying</div>
            <div class="card-mini-text" id="cardMiniText"></div>
            <div class="card-mini-count" id="cardMiniCount" style="display: none;"></div>
        </div>
        
        <!-- Cards panel (shows all experiments) -->
        <div class="cards-panel" id="cardsPanel">
            <div class="cards-panel-header">
                <span>experiments</span>
                <button class="cards-panel-close" onclick="toggleCardsPanel()">×</button>
            </div>
            <div class="cards-list" id="cardsList">
                <!-- Populated by JS -->
            </div>
        </div>
        
        <!-- Ideas badge (floating, away from input) -->
        <button class="ideas-badge" id="ideasBadge" onclick="toggleIdeasPanel()" style="display: none;">
            <span class="ideas-icon">💡</span>
            <span class="ideas-count" id="ideasCount">0</span>
        </button>
        
        <!-- Ideas panel (slides up from badge) -->
        <div class="ideas-panel" id="ideasPanel">
            <div class="ideas-panel-header">
                <span>ideas so far</span>
                <button class="ideas-panel-close" onclick="toggleIdeasPanel()">×</button>
            </div>
            <div class="ideas-list" id="ideasList">
                <!-- Populated by JS -->
            </div>
        </div>
        
        <!-- Bottom input -->
        <div class="exp-input-area">
            <div class="input-row">
                <textarea id="expInput" rows="1" placeholder="respond..."></textarea>
                <button class="send-btn" onclick="sendExpMessage()">
                    <svg viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
                </button>
            </div>
        </div>
    </div>
    
    <!-- ============ SUGGESTIONS PHASE (Everyone contributes) ============ -->
    <div class="screen suggestions-screen" id="suggestionsScreen">
        <div class="suggestions-content">
            <div class="suggestions-header">
                <div class="suggestions-title">what should we try?</div>
                <div class="suggestions-subtitle">ideas are coming in...</div>
            </div>
            
            <div class="suggestions-pool" id="suggestionsPool">
                <!-- Ideas appear here as they come in -->
            </div>
            
            <div class="suggestions-add">
                <input type="text" id="teacherSuggestionInput" placeholder="add your own idea...">
                <button class="suggestions-add-btn" onclick="addTeacherSuggestion()">+</button>
            </div>
            
            <button class="suggestions-continue-btn" id="suggestionsContinueBtn" onclick="goToBallotEditor()">build ballot →</button>
        </div>
    </div>
    
    <!-- ============ BALLOT EDITOR (Teacher curates) ============ -->
    <div class="screen ballot-screen" id="ballotScreen">
        <div class="ballot-content">
            <div class="ballot-header">
                <div class="ballot-title" id="ballotTitle">your ballot</div>
                <div class="ballot-count"><span id="ballotCount">0</span> / 5</div>
            </div>
            
            <div class="ballot-options" id="ballotOptions">
                <!-- Selected ballot options -->
            </div>
            
            <div class="ballot-available" id="ballotAvailable">
                <div class="ballot-available-label">available ideas</div>
                <div class="ballot-available-list" id="ballotAvailableList">
                    <!-- Unselected ideas to add -->
                </div>
            </div>
            
            <button class="ballot-open-btn" id="ballotOpenBtn" onclick="openVoting()">open voting</button>
        </div>
    </div>
    
    <!-- ============ STUDENT SUGGEST SCREEN (Students contribute) ============ -->
    <div class="screen student-suggest-screen" id="studentSuggestScreen">
        <div class="student-suggest-content">
            <div class="student-suggest-title">what should we try?</div>
            <div class="student-suggest-subtitle">share your ideas</div>
            
            <div class="student-suggest-ideas" id="studentSuggestIdeas">
                <!-- Ideas students have submitted -->
            </div>
            
            <div class="student-suggest-input-area">
                <input type="text" id="studentSuggestInput" placeholder="suggest something to try...">
                <button class="student-suggest-btn" onclick="submitStudentSuggestion()">+</button>
            </div>
            
            <div class="student-suggest-waiting">
                <div class="student-suggest-dot"></div>
                <div class="student-suggest-waiting-text">waiting for voting to open...</div>
            </div>
        </div>
    </div>
    
    <!-- ============ VOTE SCREEN (Students - vote mode) ============ -->
    <div class="screen vote-screen" id="voteScreen">
        <div class="vote-content">
            <div class="vote-title">what should we try?</div>
            <div class="vote-instruction">tap your 1st choice, then your 2nd</div>
            
            <div class="vote-options" id="voteOptions">
                <!-- Vote option cards added dynamically -->
            </div>
            
            <button class="vote-submit-btn" id="voteSubmitBtn" onclick="submitVote()">vote</button>
            
            <div class="vote-timer student-vote-timer" id="studentVoteTimer">
                <div class="vote-timer-bar">
                    <div class="vote-timer-fill" id="studentVoteTimerFill"></div>
                </div>
                <div class="vote-timer-text" id="studentVoteTimerText">0:30</div>
            </div>
        </div>
    </div>
    
    <!-- ============ VOTE WAITING (Students - after voting) ============ -->
    <div class="screen vote-waiting-screen" id="voteWaitingScreen">
        <div class="vote-waiting-content">
            <div class="vote-waiting-dot"></div>
            <div class="vote-waiting-text">waiting for everyone...</div>
        </div>
    </div>
    
    <!-- ============ TEACHER VOTE MONITOR ============ -->
    <div class="screen vote-monitor-screen" id="voteMonitorScreen">
        <div class="vote-monitor-content">
            <div class="vote-monitor-title">votes coming in</div>
            <div class="vote-monitor-count"><span id="voteCount">0</span> / <span id="voterTotal">12</span></div>
            
            <div class="vote-timer" id="voteTimer">
                <div class="vote-timer-bar">
                    <div class="vote-timer-fill" id="voteTimerFill"></div>
                </div>
                <div class="vote-timer-text" id="voteTimerText">0:30</div>
            </div>
            
            <div class="vote-monitor-dot"></div>
            <button class="vote-close-btn" id="voteCloseBtn" onclick="closeVoting()">close voting</button>
        </div>
    </div>
    
    <!-- ============ VOTE RESULTS (Teacher decides mode) ============ -->
    <div class="screen vote-results-screen" id="voteResultsScreen">
        <div class="vote-results-content">
            <div class="vote-results-title">results are in</div>
            <div class="vote-results-subtitle">you have the final call</div>
            
            <div class="vote-results-options" id="voteResultsOptions">
                <!-- Populated by JS -->
            </div>
            
            <button class="vote-confirm-btn" onclick="confirmVoteWinner()">confirm</button>
        </div>
    </div>
    
    <!-- ============ REVEAL SEQUENCE (after commit/vote) ============ -->
    <div class="reveal-sequence" id="revealSequence">
        <!-- Individual ouch/wow toasts (teacher-decides mode) -->
        <div class="reveal-toast" id="revealToast">
            <div class="reveal-type" id="revealType">ouch.</div>
            <div class="reveal-quote" id="revealQuote">"I had my hand raised for awhile, and the teacher almost ignored me"</div>
        </div>
        
        <!-- Vote results (vote modes) -->
        <div class="reveal-vote-results" id="revealVoteResults">
            <div class="reveal-vote-title">the votes are in</div>
            <div class="reveal-vote-bars" id="revealVoteBars">
                <!-- Populated by JS -->
            </div>
        </div>
        
        <!-- Winner announcement (vote modes) -->
        <div class="reveal-winner" id="revealWinner">
            <div class="reveal-winner-label">we're trying</div>
            <div class="reveal-winner-text" id="revealWinnerText">wait 5 seconds before calling on anyone</div>
        </div>
        
        <!-- We're trying + we might hear + see you (all modes) -->
        <div class="reveal-trying" id="revealTrying">
            <div class="reveal-trying-label">we're trying</div>
            <div class="reveal-trying-text" id="revealTryingText">wait 5 seconds before calling on anyone</div>
            
            <div class="reveal-might-section">
                <div class="reveal-might-label">we might hear</div>
                <div class="reveal-wows" id="revealWows">
                    <!-- Populated by JS -->
                </div>
            </div>
            
            <div class="reveal-closing-section" id="revealClosingSection">
                <div class="reveal-closing-swirl" id="revealClosingSwirl"></div>
                <div class="reveal-closing-text">see you in two weeks</div>
            </div>
        </div>
    </div>
    
    <div class="screen commit-screen" id="commitScreen">
        <div class="commit-card" id="commitCard">
            <div class="commit-swirl-bar"></div>
            <div class="commit-content">
                <div class="commit-title">my two week experiment</div>
                
                <!-- Students told me section -->
                <div class="commit-feedback-section">
                    <div class="commit-section-header">
                        <div class="commit-section-label ouch">students told me</div>
                        <div class="commit-pattern-pills" id="commitPatternPills">
                            <button class="commit-pattern-pill active" onclick="selectCommitPattern('unheard')">unheard</button>
                            <button class="commit-pattern-pill" onclick="selectCommitPattern('rushed')">rushed</button>
                            <button class="commit-pattern-pill" onclick="selectCommitPattern('lost')">lost</button>
                        </div>
                    </div>
                    <div class="commit-quotes" id="commitQuotes"></div>
                    <button class="commit-add-btn ouch" id="addQuoteBtn" onclick="addCommitQuote()">+ add a quote</button>
                </div>
                
                <!-- So I'm going to try -->
                <div class="commit-try-section">
                    <div class="commit-try-label" id="commitTryLabel">so I'm going to try</div>
                    <div class="commit-try-text" id="commitTryText">wait 5 seconds before calling on anyone</div>
                </div>
                
                <!-- And I might hear section -->
                <div class="commit-wows-section">
                    <div class="commit-section-header">
                        <div class="commit-section-label wow">and I might hear</div>
                    </div>
                    <div class="commit-wows" id="commitWows"></div>
                    <button class="commit-add-btn wow" id="addWowBtn" onclick="addCommitWow()">+ add a wow</button>
                </div>
                
                <!-- Commit button -->
                <div class="commit-grace-section" id="commitGraceSection">
                    <button class="commit-swirl-btn" id="commitSwirlBtn" onclick="lockInCommit()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 6L9 17l-5-5"/>
                        </svg>
                    </button>
                </div>
                
                <div class="commit-closing" id="commitClosing">see you in two weeks</div>
            </div>
            
            <div class="commit-footer" id="commitFooter">
                <button class="commit-back-btn" onclick="setPhase('experiment')">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 12H5M12 19l-7-7 7-7"/>
                    </svg>
                    back
                </button>
            </div>
        </div>
    </div>
    
    <!-- ============ STUDENT END SCREEN ============ -->
    <div class="screen" id="studentEndScreen">
        <!-- Phase 1: Thank you -->
        <div class="student-end-thankyou" id="studentEndThankyou">
            <div class="student-end-toast">heard.</div>
            <div class="student-end-message">thank you for sharing</div>
            <button class="student-end-btn" onclick="startStudentPatternsAnimation()">see what we heard</button>
        </div>
        
        <!-- Phase 2: Patterns with same animation -->
        <div class="student-patterns-screen" id="studentPatternsScreen" style="display: none;">
            <div class="patterns-prompt">what the class shared</div>
            
            <div class="categories-container" id="studentPatternsTable">
                <!-- Category boxes populated by JS -->
            </div>
            
            <!-- Waiting for teacher -->
            <div class="student-waiting" id="studentWaiting">
                <div class="student-waiting-dot"></div>
                <div class="student-waiting-text" id="studentWaitingText">waiting for your facilitator...</div>
            </div>
        </div>
    </div>
    
    <!-- Student dots animation screen (separate from teacher's) -->
    <div class="dots-animation-screen" id="studentDotsScreen"></div>
    
    <!-- ============ END MODAL ============ -->
    <!-- ============ END SESSION MODAL ============ -->
    <div class="modal-overlay" id="endModal">
        <div class="modal-content end-modal-content">
            <!-- Step 1: State + options -->
            <div class="end-step" id="endStep1">
                <div class="end-status">
                    <div class="end-status-row">
                        <span id="endConnected">12</span> connected
                        <span class="end-status-sep">·</span>
                        <span id="endShared">9</span> shared
                    </div>
                    <div class="end-typing-row" id="endTypingRow">
                        <div class="end-typing-dots">
                            <div class="typing-dot"></div>
                            <div class="typing-dot"></div>
                            <div class="typing-dot"></div>
                        </div>
                        <span id="endTypingCount">2</span> typing
                    </div>
                </div>
                
                <div class="end-buttons">
                    <button class="end-btn primary" onclick="startWindDown()">give 60 seconds</button>
                    <button class="end-btn secondary" onclick="endSessionNow()">end now</button>
                </div>
                
                <div class="end-facilitator-note">
                    <div class="end-note-label">facilitator note</div>
                    <div class="end-note-text">"if you're still thinking, take your time — we'll wait another minute"</div>
                </div>
            </div>
            
            <!-- Step 2: Countdown bar -->
            <div class="end-step" id="endStep2" style="display: none;">
                <div class="end-wrapup-label">wrapping up</div>
                
                <div class="end-wrapup-bar">
                    <div class="end-wrapup-fill" id="endWrapupFill"></div>
                </div>
                
                <div class="end-wrapup-dots" id="endWrapupDots">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
                
                <button class="end-now-btn" onclick="endSessionNow()">end now</button>
            </div>
        </div>
    </div>
    
    <!-- ============ STUDENT WIND DOWN OVERLAY ============ -->
    <div class="student-winddown" id="studentWinddown">
        <div class="student-winddown-content">
            <div class="student-winddown-label">wrapping up</div>
            <div class="student-winddown-bar">
                <div class="student-winddown-fill" id="studentWinddownFill"></div>
            </div>
            <div class="student-winddown-bottom">
                <div class="student-winddown-dots" id="studentWinddownDots">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
                <div class="student-winddown-hint" id="studentWinddownHint">still time to share...</div>
            </div>
        </div>
    </div>
    
    <!-- ─────────────────────────────────────────────────────────────────────────
         FEATURES: SAFETY FOOTER
         Persistent exit to 988 — never leaves the screen
         ───────────────────────────────────────────────────────────────────────── -->
    
    <!-- ============ SAFETY FLOOR ============ -->
    <div class="safety" id="safety">
        if you're feeling unsafe, call or text <a href="tel:988">988</a> — they help you get yourself help
    </div>
    
    <!-- ============ DISPLAY MODE ============ -->
    <div class="display-mode" id="displayMode" onclick="closeDisplay()">
        <div class="display-content">
            <div class="display-label">I'll try</div>
            <div class="display-value">wait 5 seconds before calling on anyone</div>
            <div class="display-label">wows I hope to hear</div>
            <div class="display-value small">"the teacher actually called on me today"</div>
        </div>
        <div class="display-hint">tap anywhere to close</div>
    </div>

    <!-- Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-database-compat.js"></script>

    <script>
        /* ═══════════════════════════════════════════════════════════════════════════
           BUILD INFO — SINGLE SOURCE OF TRUTH
           Update these two values each build. Everything else syncs automatically.
           ═══════════════════════════════════════════════════════════════════════════ */
        const BUILD_NUM = 278;
        const BUILD_NAME = 'soft-landing';
        
        // Warm room name for this build
        const BUILD_ROOM_CODE = 'soft-hello';
        console.log('[owl] Build:', BUILD_NUM, BUILD_NAME, '| Room:', BUILD_ROOM_CODE);
        
        /* ═══════════════════════════════════════════════════════════════════════════
           UNIFIED STORE — one API for demo and live
           The user's door is the same. Only the backend changes.
           ═══════════════════════════════════════════════════════════════════════════ */
        
        const FIREBASE_CONFIG = {
            apiKey: "AIzaSyATuvMu3H6KnMa0fXcZwdsnsX4Mp16Aa-o",
            authDomain: "ouch-wow-lab.firebaseapp.com",
            databaseURL: "https://ouch-wow-lab-default-rtdb.firebaseio.com",
            projectId: "ouch-wow-lab",
            storageBucket: "ouch-wow-lab.firebasestorage.app",
            messagingSenderId: "1028096584461",
            appId: "1:1028096584461:web:12d8fb5a3b0a7e8d999e44"
        };
        
        /* ═══════════════════════════════════════════════════════════════════════════
           COLLECTION — a single data type (dots, signals, etc.)
           Same interface whether demo or live
           ═══════════════════════════════════════════════════════════════════════════ */
        class Collection {
            constructor(name, store) {
                this.name = name;
                this.store = store;
                this._data = {};           // { id: { ...fields } }
                this._subscribers = [];    // [ callback, callback, ... ]
                this._firebaseRef = null;
                this._localOnly = {};      // items that shouldn't sync (like "me" in demo)
                this._readCount = 0;       // Track Firebase snapshots received
                this._lastReadTime = null;
            }
            
            // Get all items as object
            getAll() {
                return { ...this._data };
            }
            
            // Get single item
            get(id) {
                return this._data[id] || null;
            }
            
            // Get count
            count() {
                return Object.keys(this._data).length;
            }
            
            // Set item (creates or updates)
            set(id, data, options = {}) {
                const isNew = !this._data[id];
                this._data[id] = { ...this._data[id], ...data, _lastUpdate: Date.now() };
                
                // Write to Firebase if live mode and not local-only
                if (this.store.mode === 'live' && this._firebaseRef && !options.localOnly) {
                    this._firebaseRef.child(id).update(data);
                }
                
                if (options.localOnly) {
                    this._localOnly[id] = true;
                }
                
                this._notify({ type: isNew ? 'added' : 'updated', id, data: this._data[id] });
                return this._data[id];
            }
            
            // Remove item
            remove(id) {
                if (!this._data[id]) return false;
                const removed = this._data[id];
                delete this._data[id];
                delete this._localOnly[id];
                
                // Remove from Firebase if live mode
                if (this.store.mode === 'live' && this._firebaseRef) {
                    this._firebaseRef.child(id).remove();
                }
                
                this._notify({ type: 'removed', id, data: removed });
                return true;
            }
            
            // Subscribe to changes
            subscribe(callback) {
                this._subscribers.push(callback);
                // Immediately notify of current state
                Object.entries(this._data).forEach(([id, data]) => {
                    callback({ type: 'added', id, data });
                });
                // Return unsubscribe function
                return () => {
                    this._subscribers = this._subscribers.filter(cb => cb !== callback);
                };
            }
            
            // Internal: notify subscribers
            _notify(event) {
                this._subscribers.forEach(cb => cb(event));
                // Don't call _updateDebug here — it's on a hot path
                // Debug console has its own 200ms interval
            }
            
            // Internal: connect to Firebase
            _connectFirebase(ref) {
                this._firebaseRef = ref;
                console.log('[collection] Connected to Firebase:', ref.toString());
                
                ref.on('value', (snapshot) => {
                    this._readCount++;
                    this._lastReadTime = Date.now();
                    
                    const remoteData = snapshot.val() || {};
                    const myId = this.store.myId;
                    const remoteIds = Object.keys(remoteData);
                    
                    // Log every 5th read to avoid spam
                    if (this._readCount % 5 === 1) {
                        console.log('[collection] Firebase snapshot #' + this._readCount + ':', {
                            remoteCount: remoteIds.length,
                            remoteIds: remoteIds.map(id => id.slice(-6)),
                            myId: myId?.slice(-6)
                        });
                    }
                    
                    // Find removed items (in _data but not in remote, and not local-only)
                    Object.keys(this._data).forEach(id => {
                        if (!remoteData[id] && id !== myId && !this._localOnly[id]) {
                            console.log('[collection] Removing stale local dot:', id.slice(-6));
                            // Log before deleting so we have the data
                            if (typeof logDebugEvent === 'function') {
                                logDebugEvent('←', 'dotGone', id.slice(-6), { id });
                            }
                            delete this._data[id];
                            this._notify({ type: 'removed', id });
                        }
                    });
                    
                    // Add/update items from remote
                    Object.entries(remoteData).forEach(([id, data]) => {
                        const isMe = id === myId;
                        
                        // For self: only accept color changes, not position
                        if (isMe) {
                            if (data.color && this._data[id]) {
                                const oldColor = this._data[id].color;
                                if (oldColor !== data.color) {
                                    console.log('[collection] My color changed by someone else:', oldColor?.slice(0,7), '→', data.color?.slice(0,7));
                                    this._data[id].color = data.color;
                                    // Also update Store.myColor so canvas uses it
                                    this.store.myColor = data.color;
                                    // Update togetherState if it exists
                                    if (typeof togetherState !== 'undefined' && togetherState.you) {
                                        togetherState.you.color = data.color;
                                    }
                                    this._notify({ type: 'updated', id, data: this._data[id] });
                                    // Log to debug panel
                                    if (typeof logDebugEvent === 'function') {
                                        logDebugEvent('←', 'myColor!', data.color.slice(0,7), { id: id.slice(-8), color: data.color });
                                    }
                                }
                            }
                            return;
                        }
                        
                        const isNew = !this._data[id];
                        if (isNew) {
                            console.log('[collection] New remote dot:', id.slice(-6), `(${Math.round(data.x)}, ${Math.round(data.y)})`);
                            this._data[id] = { ...data, _targetX: data.x, _targetY: data.y };
                            this._notify({ type: 'added', id, data: this._data[id] });
                            // Log to debug panel
                            if (typeof logDebugEvent === 'function') {
                                logDebugEvent('←', 'newDot', id.slice(-6), { id, x: Math.round(data.x), y: Math.round(data.y), color: data.color });
                            }
                        } else {
                            // Update position - BOTH x/y and _targetX/_targetY
                            // (x/y is what sync reads, _targetX/_targetY was for interpolation)
                            this._data[id].x = data.x;
                            this._data[id].y = data.y;
                            this._data[id]._targetX = data.x;
                            this._data[id]._targetY = data.y;
                            
                            // Always accept color from Firebase - it's the source of truth
                            if (data.color) {
                                this._data[id].color = data.color;
                            }
                            
                            this._data[id].state = data.state;
                            this._data[id].lastUpdate = data.lastUpdate;
                            this._notify({ type: 'updated', id, data: this._data[id] });
                        }
                    });
                    
                    // Log what's actually in _data now (every 20th read)
                    if (this._readCount % 20 === 0) {
                        const dataIds = Object.keys(this._data);
                        console.log('[collection] _data now has:', dataIds.length, 'items:', 
                            dataIds.map(id => `${id.slice(-6)}@(${Math.round(this._data[id].x || this._data[id]._targetX || 0)},${Math.round(this._data[id].y || this._data[id]._targetY || 0)})`));
                    }
                });
            }
            
            // Internal: disconnect from Firebase
            _disconnectFirebase() {
                if (this._firebaseRef) {
                    this._firebaseRef.off();
                    this._firebaseRef = null;
                }
            }
            
            // Internal: clear all data
            _clear() {
                const ids = Object.keys(this._data);
                this._data = {};
                this._localOnly = {};
                ids.forEach(id => this._notify({ type: 'removed', id }));
            }
        }
        
        /* ═══════════════════════════════════════════════════════════════════════════
           STORE — the unified data layer
           Switch modes, collections stay the same
           ═══════════════════════════════════════════════════════════════════════════ */
        const Store = {
            // Mode: 'demo' or 'live'
            mode: 'live',  // default to live so students auto-connect
            
            // Connection state
            connected: false,
            db: null,
            myId: null,
            roomId: null,
            
            // Collections — the user's door
            dots: null,      // Collection of all dots in the room
            signals: null,   // Collection of ouch/wow signals
            
            // My state (convenience — also stored in dots collection)
            myColor: null,
            myX: 0,
            myY: 0,
            
            // Movement tracking
            _lastWrite: 0,
            _writeInterval: 80,
            _writeCount: 0,
            _lastWriteTime: null,
            _lastWriteX: 0,  // Track what was last written
            _lastWriteY: 0,
            _baseReach: 50,
            _maxReach: 400,
            _reachGrowTime: 45000,
            _stillnessThreshold: 5,
            _bleedRate: 0.02,
            _lastMoveX: 0,
            _lastMoveY: 0,
            _stillSince: Date.now(),
            _myReach: 50,
            
            // Status for debug display
            status: {
                firebase: 'INIT',      // INIT | CONNECTING | READY | ERROR
                room: 'NONE',          // NONE | JOINED
                sync: 'OFF'            // OFF | ACTIVE
            },
            
            /* ─────────────────────────────────────────────────────────────────
               INIT — call once on load
               ───────────────────────────────────────────────────────────────── */
            init() {
                // Create collections
                this.dots = new Collection('dots', this);
                this.signals = new Collection('signals', this);
                
                // Initialize Firebase
                try {
                    firebase.initializeApp(FIREBASE_CONFIG);
                    this.db = firebase.database();
                    this.status.firebase = 'CONNECTING';
                    this._updateDebug();
                    
                    // Anonymous auth
                    firebase.auth().signInAnonymously()
                        .then((result) => {
                            // Persist ID in sessionStorage
                            let tabId = sessionStorage.getItem('owlTabId');
                            if (!tabId) {
                                tabId = result.user.uid + '-' + Math.random().toString(36).slice(2, 8);
                                sessionStorage.setItem('owlTabId', tabId);
                            }
                            this.myId = tabId;
                            
                            // Persist color — validate it's from current palette
                            let savedColor = sessionStorage.getItem('owlColor');
                            if (savedColor && !peopleColors.includes(savedColor)) {
                                savedColor = null; // Old HSL color, discard
                                sessionStorage.removeItem('owlColor');
                            }
                            if (!savedColor) {
                                savedColor = getRandomPaletteColor();
                                sessionStorage.setItem('owlColor', savedColor);
                            }
                            this.myColor = savedColor;
                            
                            this.connected = true;
                            this.status.firebase = 'READY';
                            this._updateDebug();
                            console.log('[store] Firebase ready:', this.myId.slice(-6));
                            
                            // Auto-join room if in live mode
                            if (this.mode === 'live' && !this.roomId) {
                                this.joinRoom(BUILD_ROOM_CODE);
                            }
                        })
                        .catch((error) => {
                            this.status.firebase = 'ERROR';
                            this._updateDebug();
                            console.error('[store] Auth error:', error);
                        });
                } catch (e) {
                    this.status.firebase = 'ERROR';
                    this._updateDebug();
                    console.error('[store] Init error:', e);
                }
            },
            
            /* ─────────────────────────────────────────────────────────────────
               MODE — switch between demo and live
               ───────────────────────────────────────────────────────────────── */
            setMode(mode) {
                const wasLive = this.mode === 'live';
                this.mode = mode;
                
                // Update banner
                const banner = document.getElementById('modeBanner');
                if (banner) {
                    if (mode === 'demo') {
                        banner.textContent = 'SIMULATED BEHAVIOR';
                        banner.className = 'mode-banner demo';
                    } else {
                        banner.textContent = this.roomId ? `LIVE · ${this.roomId}` : 'LIVE · no room';
                        banner.className = 'mode-banner live';
                    }
                }
                
                if (mode === 'demo') {
                    // Leave any room
                    if (wasLive) this.leaveRoom();
                    this.status.room = 'NONE';
                    this.status.sync = 'OFF';
                } else if (mode === 'live' && this.connected && !this.roomId) {
                    // Auto-join build room
                    this.joinRoom(BUILD_ROOM_CODE);
                }
                
                this._updateDebug();
                console.log('[store] Mode:', mode);
            },
            
            /* ─────────────────────────────────────────────────────────────────
               ROOM — join/leave Firebase rooms
               ───────────────────────────────────────────────────────────────── */
            joinRoom(roomId) {
                if (this.mode === 'demo' || !this.connected) {
                    console.warn('[store] joinRoom blocked:', { mode: this.mode, connected: this.connected });
                    return;
                }
                
                // Reset counters for fresh connection
                this._writeCount = 0;
                this._lastWriteTime = null;
                
                this.roomId = roomId;
                const roomRef = this.db.ref('rooms/' + roomId + '/dots');
                
                console.log('[store] Joining room:', roomId, '| ref path:', roomRef.toString());
                
                // Clear old data and connect collection to Firebase
                this.dots._clear();
                this.dots._readCount = 0;
                this.dots._lastReadTime = null;
                this.dots._connectFirebase(roomRef);
                
                console.log('[store] Collection connected, _firebaseRef:', !!this.dots._firebaseRef);
                
                // Initialize my position
                const startX = window.innerWidth / 2;
                const startY = window.innerHeight / 2;
                this.myX = startX;
                this.myY = startY;
                
                // Check if we already exist in Firebase (rejoin case)
                // Don't overwrite color if someone changed it while we were away
                const myRef = roomRef.child(this.myId);
                myRef.once('value').then((snapshot) => {
                    const existing = snapshot.val();
                    
                    if (existing && existing.color) {
                        // We exist! Use color from Firebase (may have been changed by others)
                        console.log('[store] Rejoining - using Firebase color:', existing.color.slice(0,7));
                        this.myColor = existing.color;
                        if (typeof togetherState !== 'undefined' && togetherState.you) {
                            togetherState.you.color = existing.color;
                        }
                        // Just update position, not color
                        myRef.update({
                            x: startX,
                            y: startY,
                            lastUpdate: Date.now()
                        });
                    } else {
                        // New entry - write everything including color
                        console.log('[store] New join - writing color:', this.myColor.slice(0,7));
                        myRef.set({
                            x: startX,
                            y: startY,
                            color: this.myColor,
                            lastUpdate: Date.now()
                        });
                    }
                    
                    // Also set locally
                    this.dots.set(this.myId, { x: startX, y: startY, color: this.myColor }, { localOnly: true });
                });
                
                // Clean up on disconnect
                myRef.onDisconnect().remove();
                
                // Connect signals collection to Firebase
                const signalsRef = this.db.ref('rooms/' + roomId + '/signals');
                this.signals._clear();
                this.signals._connectFirebase(signalsRef);
                console.log('[store] Signals collection connected');
                
                // Listen for phase changes from facilitator
                const phaseRef = this.db.ref('rooms/' + roomId + '/phase');
                this._phaseRef = phaseRef;
                phaseRef.on('value', (snapshot) => {
                    const phaseData = snapshot.val();
                    if (phaseData && phaseData.current) {
                        console.log('[store] Phase update from Firebase:', phaseData.current);
                        // Only update if we're not the one who set it (avoid loops)
                        if (phaseData.setBy !== this.myId) {
                            // Update session.status based on phase (so updateView works)
                            if (typeof session !== 'undefined') {
                                const activePhases = ['collect', 'patterns', 'experiment', 'commit'];
                                if (activePhases.includes(phaseData.current)) {
                                    session.status = 'active';
                                } else if (phaseData.current === 'waiting') {
                                    session.status = 'waiting';
                                }
                            }
                            // Switch students to demo mode for patterns so they see simulated data
                            if (phaseData.current === 'patterns' && typeof state !== 'undefined' && state.role !== 'teacher') {
                                this.setMode('demo');
                            }
                            if (typeof setPhase === 'function') {
                                setPhase(phaseData.current);
                            }
                            if (typeof state !== 'undefined') {
                                state.phase = phaseData.current;
                            }
                        }
                    }
                });
                
                this.status.room = 'JOINED';
                this.status.sync = 'ACTIVE';
                
                // Update banner
                const banner = document.getElementById('modeBanner');
                if (banner) {
                    banner.textContent = `LIVE · ${roomId}`;
                    banner.className = 'mode-banner live';
                }
                
                this._updateDebug();
                console.log('[store] Joined room:', roomId);
            },
            
            leaveRoom() {
                if (this.dots._firebaseRef && this.myId) {
                    this.dots._firebaseRef.child(this.myId).remove();
                }
                this.dots._disconnectFirebase();
                this.dots._clear();
                this.signals._disconnectFirebase();
                this.signals._clear();
                
                // Stop listening for phase changes
                if (this._phaseRef) {
                    this._phaseRef.off();
                    this._phaseRef = null;
                }
                
                this.roomId = null;
                this.status.room = 'NONE';
                this.status.sync = 'OFF';
                
                // Update banner
                if (this.mode === 'live') {
                    const banner = document.getElementById('modeBanner');
                    if (banner) {
                        banner.textContent = 'LIVE · no room';
                        banner.className = 'mode-banner live';
                    }
                }
            },
            
            /* ─────────────────────────────────────────────────────────────────
               POSITION — update my position (called from mouse/touch)
               ───────────────────────────────────────────────────────────────── */
            updatePosition(x, y) {
                // Track stillness
                const dx = x - this._lastMoveX;
                const dy = y - this._lastMoveY;
                const moved = Math.sqrt(dx*dx + dy*dy) > this._stillnessThreshold;
                
                if (moved) {
                    this._stillSince = Date.now();
                    this._myReach = this._baseReach;
                }
                
                this._lastMoveX = x;
                this._lastMoveY = y;
                this.myX = x;
                this.myY = y;
                
                // Update local dot (only if we have an ID)
                if (this.myId) {
                    this.dots.set(this.myId, { x, y, color: this.myColor }, { localOnly: true });
                }
                
                // Throttled write to Firebase
                if (this.mode === 'live' && this.myId) {
                    const now = Date.now();
                    if (this.dots._firebaseRef && now - this._lastWrite >= this._writeInterval) {
                        this._writePosition();
                        this._lastWrite = now;
                    }
                }
            },
            
            _writePosition() {
                // Only write position during connect phase (waiting)
                if (typeof state !== 'undefined' && state.phase !== 'waiting') {
                    return; // No position tracking outside connect phase
                }
                
                if (!this.dots._firebaseRef || !this.myId) {
                    console.warn('[store] _writePosition blocked:', {
                        hasRef: !!this.dots._firebaseRef,
                        myId: this.myId?.slice(-6) || null
                    });
                    return;
                }
                
                // Skip write if position hasn't changed significantly (< 2px)
                const dx = this.myX - this._lastWriteX;
                const dy = this.myY - this._lastWriteY;
                if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
                    return; // Don't send — position essentially unchanged
                }
                
                // Track what we're writing
                this._lastWriteX = this.myX;
                this._lastWriteY = this.myY;
                
                // Only write position, not color
                // Color is only written on join or when explicitly changed
                const data = {
                    x: this.myX,
                    y: this.myY,
                    lastUpdate: Date.now()
                };
                
                this.dots._firebaseRef.child(this.myId).update(data)
                    .then(() => {
                        this._writeCount++;
                        this._lastWriteTime = Date.now();
                        // Log to debug event panel
                        if (typeof logDebugEvent === 'function') {
                            logDebugEvent('→', 'pos', `(${Math.round(data.x)},${Math.round(data.y)})`, data);
                        }
                        // Log every 10th write to console
                        if (this._writeCount % 10 === 0) {
                            console.log('[store] ✓ Firebase write #' + this._writeCount, 
                                `(${Math.round(data.x)}, ${Math.round(data.y)})`);
                        }
                    })
                    .catch(err => {
                        console.error('[store] ✗ Firebase write failed:', err);
                    });
            },
            
            /* ─────────────────────────────────────────────────────────────────
               REACH & COLOR — stillness-based influence
               ───────────────────────────────────────────────────────────────── */
            getReach() {
                const stillTime = Date.now() - this._stillSince;
                const progress = Math.min(stillTime / this._reachGrowTime, 1);
                this._myReach = this._baseReach + (this._maxReach - this._baseReach) * progress;
                return this._myReach;
            },
            
            newColor() {
                this.myColor = getRandomPaletteColor();
                sessionStorage.setItem('owlColor', this.myColor);
                // Write color to Firebase explicitly
                if (this.mode === 'live' && this.dots._firebaseRef && this.myId) {
                    this.dots._firebaseRef.child(this.myId).update({ color: this.myColor });
                    console.log('[color] newColor → Firebase:', this.myColor.slice(0,7));
                }
                // Update local dot too
                const myDot = this.dots.get(this.myId);
                if (myDot) myDot.color = this.myColor;
            },
            
            blendColors(color1, color2, amount) {
                // Parse hex color to RGB
                const parseHex = (c) => {
                    if (!c || c[0] !== '#') return null;
                    return {
                        r: parseInt(c.slice(1, 3), 16),
                        g: parseInt(c.slice(3, 5), 16),
                        b: parseInt(c.slice(5, 7), 16)
                    };
                };
                const rgb1 = parseHex(color1);
                const rgb2 = parseHex(color2);
                if (!rgb1 || !rgb2) return color1;
                
                const r = Math.round(rgb1.r + (rgb2.r - rgb1.r) * amount);
                const g = Math.round(rgb1.g + (rgb2.g - rgb1.g) * amount);
                const b = Math.round(rgb1.b + (rgb2.b - rgb1.b) * amount);
                
                return '#' + [r, g, b].map(v => Math.max(0, Math.min(255, v)).toString(16).padStart(2, '0')).join('');
            },
            
            applyColorBleeding() {
                if (this.mode === 'demo') return;
                
                const reach = this.getReach();
                const allDots = this.dots.getAll();
                
                Object.entries(allDots).forEach(([id, other]) => {
                    if (id === this.myId) return;
                    const dx = this.myX - other.x;
                    const dy = this.myY - other.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    
                    if (dist < reach && dist > 0) {
                        const influence = (1 - dist / reach) * this._bleedRate;
                        this.myColor = this.blendColors(this.myColor, other.color, influence);
                        sessionStorage.setItem('owlColor', this.myColor);
                    }
                });
            },
            
            /* ─────────────────────────────────────────────────────────────────
               SIGNALS — store ouch/wow to Firebase
               ───────────────────────────────────────────────────────────────── */
            writeSignal(signal) {
                if (!signal || !signal.id) {
                    console.warn('[store] writeSignal: missing signal or id');
                    return Promise.resolve(null);
                }
                
                const signalData = {
                    id: signal.id,
                    type: signal.type,
                    text: signal.text,
                    timestamp: signal.timestamp || Date.now(),
                    authorId: this.myId,
                    authorColor: this.myColor
                };
                
                // Write to local collection
                this.signals.set(signal.id, signalData, { localOnly: this.mode !== 'live' });
                
                // Write to Firebase if live
                if (this.mode === 'live' && this.signals._firebaseRef) {
                    console.log('[store] Writing signal to Firebase:', signal.id, signal.type);
                    return this.signals._firebaseRef.child(signal.id).set(signalData)
                        .then(() => {
                            console.log('[store] ✓ Signal written:', signal.id);
                            return signalData;
                        })
                        .catch(err => {
                            console.error('[store] ✗ Signal write failed:', err);
                            return null;
                        });
                }
                
                return Promise.resolve(signalData);
            },
            
            getSignals() {
                return this.signals ? this.signals.getAll() : {};
            },
            
            /* ─────────────────────────────────────────────────────────────────
               PHASE — sync session phase across participants
               ───────────────────────────────────────────────────────────────── */
            writePhase(phase) {
                if (this.mode !== 'live' || !this.db || !this.roomId) {
                    console.log('[store] writePhase skipped (not live)');
                    return Promise.resolve(null);
                }
                
                const phaseData = {
                    current: phase,
                    setBy: this.myId,
                    timestamp: Date.now()
                };
                
                console.log('[store] Writing phase to Firebase:', phase);
                return this.db.ref('rooms/' + this.roomId + '/phase').set(phaseData)
                    .then(() => {
                        console.log('[store] Phase written:', phase);
                        return phaseData;
                    })
                    .catch(err => {
                        console.error('[store] Phase write failed:', err);
                        return null;
                    });
            },
            
            /* ─────────────────────────────────────────────────────────────────
               CONVENIENCE — for existing code compatibility
               ───────────────────────────────────────────────────────────────── */
            getDotCount() {
                return this.dots.count();
            },
            
            // Backward compat: liveDots getter returns dots data
            get liveDots() {
                const all = this.dots.getAll();
                // Remove self from returned object
                const { [this.myId]: self, ...others } = all;
                return others;
            },
            
            /* ─────────────────────────────────────────────────────────────────
               DEBUG — update status display
               ───────────────────────────────────────────────────────────────── */
            _updateDebug() {
                // Update compact status in lab controls
                const statusEl = document.getElementById('realtimeStatus');
                const btnDemo = document.getElementById('btnDemo');
                const btnLive = document.getElementById('btnLive');
                
                if (btnDemo) btnDemo.classList.toggle('active', this.mode === 'demo');
                if (btnLive) btnLive.classList.toggle('active', this.mode === 'live');
                
                if (statusEl) {
                    if (this.mode === 'demo') {
                        statusEl.textContent = 'DEMO';
                        statusEl.className = 'realtime-status';
                    } else if (this.status.firebase === 'ERROR') {
                        statusEl.textContent = 'ERR';
                        statusEl.className = 'realtime-status error';
                    } else if (this.roomId) {
                        const count = this.getDotCount();
                        statusEl.textContent = `${this.roomId} · ${count}`;
                        statusEl.className = 'realtime-status live';
                    } else if (this.status.firebase === 'READY') {
                        statusEl.textContent = 'READY';
                        statusEl.className = 'realtime-status';
                    } else {
                        statusEl.textContent = '...';
                        statusEl.className = 'realtime-status';
                    }
                }
                
                // Update debug console
                updateDebugConsole();
            }
        };
        
        // Initialize Store on load
        Store.init();
        
        /* ═══════════════════════════════════════════════════════════════════════════
           SIMULATION BACKEND — writes to Store.dots just like Firebase would
           When mode='demo', this generates realistic user behavior
           The frontend doesn't know if dots are real or simulated
           
           KEY INSIGHT: Backend writes TARGET positions (like cursor movements).
           Canvas handles the smooth 60fps physics. NO position interpolation here.
           
           SMALL LIVES: Each dot has a state that shifts over time.
           States affect how the canvas moves them.
           ═══════════════════════════════════════════════════════════════════════════ */
        const SimulationBackend = {
            running: false,
            _dots: {},          // { id: { targetX, targetY, color, state, ... } }
            _interval: null,
            _stateInterval: null,
            
            // Possible states — each dot is a small life
            STATES: ['here', 'here', 'here', 'here', 'working', 'working', 'still', 'still', 'away', 'distracted'],
            
            // Current demeanor — affects global movement
            _demeanor: 'engaged',
            _demeanorMod: 1.0,  // global movement multiplier
            
            // Pick a weighted random state — calm by default
            _randomState() {
                const roll = Math.random();
                if (roll < 0.45) return 'here';       // 45% present
                if (roll < 0.70) return 'working';    // 25% working
                if (roll < 0.85) return 'still';      // 15% still
                if (roll < 0.92) return 'away';       // 7% away
                if (roll < 0.98) return 'distracted'; // 6% distracted
                return 'disconnected';                 // 2% disconnected
            },
            
            // Start simulation — spawns initial dots and begins behavior loop
            start() {
                if (this.running) return;
                this.running = true;
                console.log('[sim] Starting simulation backend');
                
                // Only set myId if not already set from Firebase auth
                if (!Store.myId) {
                    Store.myId = 'sim-me-' + Math.random().toString(36).slice(2, 8);
                    console.log('[sim] Created sim myId:', Store.myId);
                } else {
                    console.log('[sim] Keeping existing myId:', Store.myId.slice(-8));
                }
                
                // Validate stored color is from palette (old HSL colors should be replaced)
                if (Store.myColor && !peopleColors.includes(Store.myColor)) {
                    Store.myColor = null;
                    sessionStorage.removeItem('owlColor');
                }
                Store.myColor = Store.myColor || getRandomPaletteColor();
                
                const startX = window.innerWidth / 2;
                const startY = window.innerHeight / 2;
                Store.myX = startX;
                Store.myY = startY;
                
                // Add me to Store.dots
                Store.dots.set(Store.myId, {
                    x: startX,
                    y: startY,
                    color: Store.myColor,
                    state: 'here',
                    lastUpdate: Date.now(),
                    isMe: true
                }, { localOnly: true });
                
                // Spawn initial simulated users
                this._seedDots(5 + Math.floor(Math.random() * 4)); // 5-8 others
                
                // Behavior loop — dots occasionally pick new targets
                // This is SLOWER than canvas — dots decide where to go, canvas makes them move
                this._interval = setInterval(() => this._tick(), 80);
                
                // State shifts — people's attention drifts (separate, slower rhythm)
                this._stateInterval = setInterval(() => this._shiftStates(), 2500);
                
                // Occasionally add/remove dots to simulate join/leave
                this._joinLeaveInterval = setInterval(() => {
                    if (Math.random() < 0.03) {
                        const roll = Math.random();
                        if (roll < 0.4 && Object.keys(this._dots).length < 12) {
                            this._addDot();
                        } else if (roll > 0.7 && Object.keys(this._dots).length > 3) {
                            this._removeDot();
                        }
                    }
                }, 2000);
                
                Store.status.room = 'JOINED';
                Store.status.sync = 'ACTIVE';
                Store.roomId = 'DEMO';
                Store._updateDebug();
            },
            
            // Shift states — attention drifts over time
            _shiftStates() {
                if (!this.running) return;
                
                Object.entries(this._dots).forEach(([id, dot]) => {
                    // 12% chance to shift state each cycle
                    if (Math.random() < 0.12) {
                        const oldState = dot.state;
                        dot.state = this._randomState();
                        
                        // Write state change to Store
                        Store.dots.set(id, {
                            x: dot.targetX,
                            y: dot.targetY,
                            color: dot.color,
                            state: dot.state,
                            lastUpdate: Date.now()
                        });
                        
                        if (oldState !== dot.state) {
                            console.log(`[sim] ${id.slice(-6)}: ${oldState} → ${dot.state}`);
                        }
                    }
                });
            },
            
            // Stop simulation
            stop() {
                if (!this.running) return;
                this.running = false;
                console.log('[sim] Stopping simulation backend');
                
                clearInterval(this._interval);
                clearInterval(this._stateInterval);
                clearInterval(this._joinLeaveInterval);
                
                // Clear all simulated dots from Store
                const simIds = Object.keys(this._dots);
                console.log('[sim] Clearing', simIds.length, 'simulated dots:', simIds.map(id => id.slice(-6)));
                simIds.forEach(id => {
                    Store.dots.remove(id);
                });
                this._dots = {};
                
                Store.status.room = 'NONE';
                Store.status.sync = 'OFF';
                Store.roomId = null;
                Store._updateDebug();
                
                console.log('[sim] After stop, Store.dots count:', Store.dots.count());
            },
            
            // Seed initial dots
            _seedDots(count) {
                for (let i = 0; i < count; i++) {
                    this._addDot(this.STATES[i % this.STATES.length]);
                }
            },
            
            // Add a new simulated dot
            _addDot(initialState) {
                const id = 'sim-' + Math.random().toString(36).slice(2, 10);
                const x = Math.random() * (window.innerWidth - 100) + 50;
                const y = Math.random() * (window.innerHeight - 200) + 100;
                const color = getRandomPaletteColor();
                const state = initialState || this._randomState();
                
                this._dots[id] = {
                    targetX: x,
                    targetY: y,
                    color,
                    state,
                    lastUpdate: Date.now(),
                    // Personality — varies per dot (more active)
                    wanderChance: 0.08 + Math.random() * 0.12,  // 8-20% per tick
                    wanderRadius: 0.3 + Math.random() * 0.5     // 30-80% of screen
                };
                
                // Write to Store — canvas will read this
                // Mark as simulated so debug panel can distinguish from live users
                Store.dots.set(id, {
                    x, y, color, state,
                    lastUpdate: Date.now(),
                    _isSimulated: true
                });
                
                console.log('[sim] Added dot:', id.slice(-6), state);
            },
            
            // Remove a simulated dot
            _removeDot() {
                const ids = Object.keys(this._dots);
                if (ids.length === 0) return;
                
                const id = ids[Math.floor(Math.random() * ids.length)];
                delete this._dots[id];
                Store.dots.remove(id);
                
                console.log('[sim] Removed dot:', id.slice(-6));
            },
            
            // Behavior tick — occasionally pick new targets based on state
            _tick() {
                if (!this.running) return;
                
                const now = Date.now();
                
                Object.entries(this._dots).forEach(([id, dot]) => {
                    let newTarget = false;
                    
                    // State affects how often dot picks new target
                    let wanderMod = 1.5;  // base is more active
                    if (dot.state === 'still') wanderMod = 0.3;        // barely wanders
                    else if (dot.state === 'away') wanderMod = 0.6;    // drifts slowly
                    else if (dot.state === 'disconnected') wanderMod = 0; // frozen
                    else if (dot.state === 'distracted') wanderMod = 3;  // very erratic
                    else if (dot.state === 'working') wanderMod = 1;  // focused, moderate movement
                    
                    // Apply global demeanor modifier
                    wanderMod *= this._demeanorMod;
                    
                    // Decide if picking new target
                    if (wanderMod > 0 && Math.random() < dot.wanderChance * wanderMod) {
                        // Wander distance also affected by demeanor
                        const wanderDist = dot.wanderRadius * Math.min(window.innerWidth, window.innerHeight) * this._demeanorMod;
                        const angle = Math.random() * Math.PI * 2;
                        
                        dot.targetX = dot.targetX + Math.cos(angle) * wanderDist * (0.3 + Math.random() * 0.7);
                        dot.targetY = dot.targetY + Math.sin(angle) * wanderDist * (0.3 + Math.random() * 0.7);
                        
                        // Keep in bounds
                        dot.targetX = Math.max(50, Math.min(window.innerWidth - 50, dot.targetX));
                        dot.targetY = Math.max(50, Math.min(window.innerHeight - 50, dot.targetY));
                        
                        newTarget = true;
                    }
                    
                    // Write to Store when target changes (or occasional heartbeat)
                    if (newTarget || Math.random() < 0.01) {
                        Store.dots.set(id, {
                            x: dot.targetX,
                            y: dot.targetY,
                            color: dot.color,
                            state: dot.state,
                            lastUpdate: now
                        });
                    }
                });
            },
            
            // Apply a demeanor pattern to all simulated dots
            applyDemeanor(demeanor) {
                if (!this.running) return;
                
                // Store current demeanor
                this._demeanor = demeanor;
                
                // Global movement modifiers by demeanor
                const movementMods = {
                    calm: 0.4,       // slow, peaceful
                    engaged: 1.0,    // normal
                    active: 1.8,     // energetic
                    distracted: 2.5, // chaotic
                    apathetic: 0.2   // barely moving
                };
                this._demeanorMod = movementMods[demeanor] || 1.0;
                
                // Demeanor patterns map to individual dot states
                const patterns = {
                    calm: { here: 0.20, still: 0.50, working: 0.20, away: 0.08, distracted: 0.02, disconnected: 0 },
                    engaged: { here: 0.35, still: 0.15, working: 0.30, away: 0.10, distracted: 0.08, disconnected: 0.02 },
                    active: { here: 0.50, still: 0.05, working: 0.25, away: 0.05, distracted: 0.12, disconnected: 0.03 },
                    distracted: { here: 0.10, still: 0.10, working: 0.10, away: 0.30, distracted: 0.35, disconnected: 0.05 },
                    apathetic: { here: 0.05, still: 0.30, working: 0.05, away: 0.40, distracted: 0.10, disconnected: 0.10 }
                };
                
                const pattern = patterns[demeanor] || patterns.engaged;
                const states = Object.keys(pattern);
                
                Object.entries(this._dots).forEach(([id, dot]) => {
                    // Pick state based on pattern weights
                    const r = Math.random();
                    let cumulative = 0;
                    
                    for (const state of states) {
                        cumulative += pattern[state];
                        if (r < cumulative) {
                            dot.state = state;
                            break;
                        }
                    }
                    
                    // Write to Store immediately
                    Store.dots.set(id, {
                        x: dot.targetX,
                        y: dot.targetY,
                        color: dot.color,
                        state: dot.state,
                        lastUpdate: Date.now()
                    });
                });
                
                console.log(`[sim] Applied demeanor: ${demeanor} (movement: ${this._demeanorMod}x)`);
            },
            
            // Set the number of simulated dots (not including "me")
            setDotCount(count) {
                if (!this.running) return;
                
                const currentCount = Object.keys(this._dots).length;
                const targetCount = Math.max(0, Math.min(50, count));
                
                // Add dots if needed
                while (Object.keys(this._dots).length < targetCount) {
                    this._addDot();
                }
                
                // Remove dots if needed
                while (Object.keys(this._dots).length > targetCount) {
                    this._removeDot();
                }
                
                console.log(`[sim] Set dot count: ${currentCount} → ${Object.keys(this._dots).length}`);
            },
            
            // Get count of simulated dots (not including "me")
            getDotCount() {
                return Object.keys(this._dots).length;
            }
        };
        
        // Wire simulation to Store mode changes
        const originalSetMode = Store.setMode.bind(Store);
        Store.setMode = function(mode) {
            console.log('[mode] setMode called:', mode, '| SimulationBackend.running:', SimulationBackend.running);
            
            // Stop any running simulation first
            if (SimulationBackend.running) {
                console.log('[mode] Stopping SimulationBackend before mode switch');
                SimulationBackend.stop();
            }
            
            // Call original
            originalSetMode(mode);
            
            // Start simulation if demo mode
            if (mode === 'demo') {
                console.log('[mode] Starting SimulationBackend for demo mode');
                SimulationBackend.start();
            }
            
            console.log('[mode] After switch - Store.dots.count():', Store.dots.count());
        };
        
        // ============ BACKWARD COMPATIBILITY ============
        // Alias for existing code that uses `realtime`
        const realtime = {
            get mode() { return Store.mode; },
            set mode(v) { Store.setMode(v); },
            get connected() { return Store.connected; },
            get myId() { return Store.myId; },
            get roomId() { return Store.roomId; },
            get myColor() { return Store.myColor; },
            set myColor(v) { Store.myColor = v; },
            get myX() { return Store.myX; },
            get myY() { return Store.myY; },
            get liveDots() { return Store.liveDots; },
            get status() { return Store.status; },
            
            init: () => Store.init(),
            setMode: (m) => Store.setMode(m),
            joinRoom: (r) => Store.joinRoom(r),
            leaveRoom: () => Store.leaveRoom(),
            createRoom: () => {
                const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
                let code = '';
                for (let i = 0; i < 5; i++) code += chars[Math.floor(Math.random() * chars.length)];
                Store.joinRoom(code);
                return code;
            },
            updatePosition: (x, y) => Store.updatePosition(x, y),
            getDotCount: () => Store.getDotCount(),
            getReach: () => Store.getReach(),
            newColor: () => Store.newColor(),
            blendColors: (a, b, c) => Store.blendColors(a, b, c),
            applyColorBleeding: () => Store.applyColorBleeding(),
            updateDebugDisplay: () => Store._updateDebug()
        };
        
        // Debug mode toggle (for UI buttons)
        function setRealtimeMode(mode) {
            Store.setMode(mode);
        }
        
        // Auto-start simulation if in demo mode (after short delay for init)
        setTimeout(() => {
            if (Store.mode === 'demo' && !SimulationBackend.running) {
                console.log('[owl] Auto-starting simulation (default demo mode)');
                SimulationBackend.start();
            }
        }, 500);
        
        // Faster updates when debug console visible
        let debugConsoleVisible = false;
        let debugUpdateInterval = null;
        
        function toggleDebugConsole() {
            const panel = document.getElementById('debugConsole');
            if (!panel) return;
            
            debugConsoleVisible = !debugConsoleVisible;
            panel.classList.toggle('visible', debugConsoleVisible);
            
            if (debugConsoleVisible) {
                updateDebugConsole();
                debugUpdateInterval = setInterval(updateDebugConsole, 200);
            } else {
                clearInterval(debugUpdateInterval);
            }
        }
        
        // Track value history for debug streams
        const debugStreams = { dotsExpanded: true };
        
        // Event log for debug panel (must be declared before functions that use it)
        const debugEventLog = [];
        const debugExpandedGroups = {}; // Track which event type groups are expanded
        
        // Flow-based event tracking — events that belong together
        const debugEventFlows = {}; // flowId -> { id, name, startTime, events: [], result, concluded }
        let debugFlowCounter = 0;
        const debugExpandedFlows = {}; // Track which flows are expanded
        
        // Start a new event flow (returns flowId to pass to logDebugEvent)
        function startEventFlow(name, initialData = {}) {
            const flowId = 'flow_' + (++debugFlowCounter) + '_' + Date.now().toString(36).slice(-4);
            debugEventFlows[flowId] = {
                id: flowId,
                name: name,
                startTime: Date.now(),
                events: [],
                result: null,
                concluded: false,
                initialData: initialData
            };
            // Auto-expand new flows
            debugExpandedFlows[flowId] = true;
            return flowId;
        }
        
        // End a flow with a result
        function endEventFlow(flowId, result) {
            if (debugEventFlows[flowId]) {
                debugEventFlows[flowId].result = result;
                debugEventFlows[flowId].concluded = true;
                debugEventFlows[flowId].endTime = Date.now();
            }
            updateDebugConsole();
        }
        
        function toggleFlowExpanded(flowId) {
            debugExpandedFlows[flowId] = !debugExpandedFlows[flowId];
            updateDebugConsole();
        }
        
        // HTML escape helper (defined early for use in renderEventsTab)
        function escapeHtmlEarly(str) {
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;');
        }
        
        // Track active tab for debug console
        let debugActiveTab = 'state'; // 'state' or 'events'
        let debugLastEventCount = 0; // For fresh badge
        
        function setDebugTab(tab) {
            debugActiveTab = tab;
            if (tab === 'events') {
                debugLastEventCount = debugEventLog.length;
            }
            updateDebugConsole();
        }
        
        function toggleEventGroupExpanded(groupKey) {
            debugExpandedGroups[groupKey] = !debugExpandedGroups[groupKey];
            updateDebugConsole();
        }
        
        // Update debug console content
        function updateDebugConsole() {
            const body = document.getElementById('debugConsoleBody');
            if (!body || !debugConsoleVisible) return;
            
            const mode = Store.mode;
            const modeClass = mode === 'demo' ? 'demo' : 'live';
            
            // Check if we have new events since last viewed
            const hasNewEvents = debugEventLog.length > debugLastEventCount;
            
            let html = '';
            
            // Status header (always visible)
            html += `<div class="debug-section-header">
                <span class="mode-tag ${modeClass}">${mode.toUpperCase()}</span>
                <span style="color:var(--text-light)">Room: ${Store.roomId || '—'}</span>
                <span style="color:var(--text-light);margin-left:auto">Firebase: ${Store.status.firebase}</span>
            </div>`;
            
            // Tabs
            html += `<div class="debug-tabs">
                <div class="debug-tab ${debugActiveTab === 'state' ? 'active' : ''}" onclick="setDebugTab('state')">
                    State
                </div>
                <div class="debug-tab ${debugActiveTab === 'events' ? 'active' : ''}" onclick="setDebugTab('events')">
                    Events
                    <span class="debug-tab-badge ${hasNewEvents && debugActiveTab !== 'events' ? 'fresh' : ''}">${debugEventLog.length}</span>
                </div>
            </div>`;
            
            // Tab content
            if (debugActiveTab === 'state') {
                html += renderStateTab(mode);
            } else {
                html += renderEventsTab();
            }
            
            body.innerHTML = html;
        }
        
        function renderStateTab(mode) {
            let html = '<div class="debug-tab-content active">';
            
            // Get current phase
            const currentPhase = typeof state !== 'undefined' ? state.phase : 'waiting';
            const phaseLabel = currentPhase === 'waiting' ? 'connect' : 
                               currentPhase === 'collect' ? 'reflect' : currentPhase;
            
            // Phase indicator
            html += `<div class="debug-section-header">
                <span style="color:var(--text-light)">Phase:</span>
                <span style="margin-left:4px;color:var(--gold)">${phaseLabel}</span>
            </div>`;
            
            // ═══════════════════════════════════════════════════════════════
            // CONNECT PHASE — dots, positions, spatial data
            // ═══════════════════════════════════════════════════════════════
            if (currentPhase === 'waiting') {
                // Write status row (only in live mode)
                if (mode === 'live') {
                    const writeAge = Store._lastWriteTime ? Math.round((Date.now() - Store._lastWriteTime) / 1000) : null;
                    const writeStatus = Store._writeCount > 0 
                        ? `writes: ${Store._writeCount} (${writeAge}s ago)` 
                        : 'no writes yet';
                    const refStatus = Store.dots._firebaseRef ? '✓ connected' : 'no ref';
                    const readCount = Store.dots._readCount || 0;
                    const readAge = Store.dots._lastReadTime ? Math.round((Date.now() - Store.dots._lastReadTime) / 1000) : null;
                    const readStatus = readCount > 0 ? `reads: ${readCount} (${readAge}s ago)` : 'no reads yet';
                    
                    html += `<div class="debug-section-header" style="background:${Store._writeCount > 0 ? 'rgba(154,196,168,0.1)' : 'rgba(196,154,154,0.1)'}">
                        <span style="color:${Store._writeCount > 0 ? 'var(--wow-dark)' : 'var(--ouch-dark)'}">${writeStatus}</span>
                        <span style="color:var(--text-light);margin-left:auto">${refStatus}</span>
                    </div>`;
                    
                    html += `<div class="debug-section-header" style="background:${readCount > 0 ? 'rgba(154,196,168,0.1)' : 'rgba(196,154,154,0.1)'}">
                        <span style="color:${readCount > 0 ? 'var(--wow-dark)' : 'var(--ouch-dark)'}">${readStatus}</span>
                    </div>`;
                }
                
                // Collections
                html += `<div class="debug-section-header" style="margin-top:12px">Collections</div>`;
                
                // Dots collection - ALWAYS read from Store.dots (unified source)
                let dotsData = Store.dots ? Store.dots.getAll() : {};
                let dotsSource = mode === 'demo' ? 'Store.dots (sim)' : 'Store.dots (firebase)';
                
                const dotsCount = Object.keys(dotsData).length;
                const dotsExpanded = debugStreams.dotsExpanded !== false; // default expanded
                
                html += `<div class="dataset-row ${dotsExpanded ? 'expanded' : ''}">
                    <div class="dataset-header" onclick="debugStreams.dotsExpanded = !debugStreams.dotsExpanded; updateDebugConsole();">
                        <div class="dataset-status ${mode === 'live' && Store.status.sync === 'ACTIVE' ? 'wired' : 'stubbed'}"></div>
                        <div class="dataset-name">dots</div>
                        <div class="dataset-value">${dotsCount} items</div>
                        <div class="dataset-arrow">▶</div>
                    </div>
                    <div class="dataset-detail" onclick="event.stopPropagation()">
                        <div class="dataset-detail-row">
                            <span class="dataset-detail-label">Source</span>
                            <span class="dataset-detail-value">${dotsSource}</span>
                        </div>
                        <div class="dataset-detail-row">
                            <span class="dataset-detail-label">Sync</span>
                            <span class="dataset-detail-value ${mode === 'live' && Store.status.sync === 'ACTIVE' ? 'live' : 'demo'}">${mode === 'live' ? Store.status.sync : 'SIMULATED'}</span>
                        </div>
                        <div class="dataset-detail-row">
                            <span class="dataset-detail-label">Path</span>
                            <span class="dataset-detail-value">${mode === 'live' ? `rooms/${Store.roomId || '?'}/dots` : 'local simulation'}</span>
                        </div>
                        <div class="live-dots-list">
                            ${Object.entries(dotsData).map(([id, dot]) => {
                                const isMe = id === Store.myId;
                                const isSim = dot._isSimulated === true;
                                const shortId = isMe ? 'me' : id.slice(-6);
                                
                                let status = '';
                                let statusColor = 'var(--text-lighter)';
                                let rowStyle = '';
                                
                                if (mode === 'demo') {
                                    if (isMe) {
                                        status = 'you';
                                        statusColor = 'var(--wow)';
                                        rowStyle = 'background: rgba(154,196,168,0.1);';
                                    } else {
                                        status = dot.state || 'sim';
                                        if (dot.state === 'disconnected') {
                                            statusColor = 'var(--text-lighter)';
                                            rowStyle = 'opacity: 0.5;';
                                        } else if (dot.state === 'away') {
                                            statusColor = 'var(--text-light)';
                                            rowStyle = 'opacity: 0.7;';
                                        } else if (dot.state === 'here' || dot.state === 'working') {
                                            statusColor = 'var(--wow)';
                                        } else {
                                            statusColor = 'var(--text-mid)';
                                        }
                                    }
                                } else {
                                    const age = dot.lastUpdate ? Date.now() - dot.lastUpdate : (dot._lastUpdate ? Date.now() - dot._lastUpdate : 99999);
                                    if (isMe) {
                                        status = 'you';
                                        statusColor = 'var(--wow)';
                                        rowStyle = 'background: rgba(154,196,168,0.1);';
                                    } else if (isSim) {
                                        status = '⚠ sim';
                                        statusColor = 'var(--ouch)';
                                        rowStyle = 'background: rgba(196,154,154,0.1);';
                                    } else if (age > 10000) {
                                        status = 'stale';
                                        statusColor = 'var(--ouch)';
                                        rowStyle = 'opacity: 0.5;';
                                    } else if (age > 5000) {
                                        status = 'slow';
                                        statusColor = 'var(--gold)';
                                    } else {
                                        status = '● live';
                                        statusColor = 'var(--wow)';
                                    }
                                }
                                
                                const displayColor = dot.color || '#888';
                                
                                return `
                                <div class="live-dot-row" style="${rowStyle}">
                                    <div class="live-dot-color" style="background:${displayColor}${dot.state === 'disconnected' ? ';opacity:0.3' : ''}"></div>
                                    <div class="live-dot-id" title="${id}">${shortId}</div>
                                    <div class="live-dot-pos">(${Math.round(dot.x || 0)}, ${Math.round(dot.y || 0)})</div>
                                    <div class="live-dot-status" style="color:${statusColor};font-size:9px;margin-left:auto;opacity:0.8">${status}</div>
                                </div>
                            `}).join('')}
                        </div>
                    </div>
                </div>`;
                
                // Sync Pipeline section
                html += `<div class="debug-section-header" style="margin-top:12px">Sync Pipeline</div>`;
                
                const storeDotCount = Store.dots ? Store.dots.count() : 0;
                const storeOthers = Store.dots ? Object.keys(Store.dots.getAll()).filter(id => id !== Store.myId).length : 0;
                const sessionPeopleCount = typeof session !== 'undefined' ? session.people?.length || 0 : 0;
                const canvasInitCount = typeof session !== 'undefined' ? session.people?.filter(p => p.canvasInit).length || 0 : 0;
                
                const pipelineMatch = storeOthers === sessionPeopleCount && sessionPeopleCount === canvasInitCount;
                const pipelineColor = pipelineMatch ? 'var(--wow-dark)' : 'var(--ouch-dark)';
                
                html += `<div class="dataset-row">
                    <div class="dataset-header" style="cursor:default">
                        <div class="dataset-name" style="flex:1">Store.dots (others)</div>
                        <div class="dataset-value" style="color:${pipelineColor}">${storeOthers}</div>
                    </div>
                </div>`;
                html += `<div class="dataset-row">
                    <div class="dataset-header" style="cursor:default">
                        <div class="dataset-name" style="flex:1">session.people</div>
                        <div class="dataset-value" style="color:${pipelineColor}">${sessionPeopleCount}</div>
                    </div>
                </div>`;
                html += `<div class="dataset-row">
                    <div class="dataset-header" style="cursor:default">
                        <div class="dataset-name" style="flex:1">canvasInit</div>
                        <div class="dataset-value" style="color:${pipelineColor}">${canvasInitCount}</div>
                    </div>
                </div>`;
                
                if (!pipelineMatch) {
                    html += `<div class="dataset-row" style="background:rgba(196,154,154,0.1)">
                        <div class="dataset-header" style="cursor:default">
                            <div class="dataset-name" style="color:var(--ouch-dark)">⚠ Pipeline mismatch — data not flowing through</div>
                        </div>
                    </div>`;
                }
                
                // My State section (position-focused for connect)
                html += `<div class="debug-section-header" style="margin-top:12px">My State</div>`;
                
                let myState = { x: 0, y: 0, color: peopleColors[0], vx: 0, vy: 0, stillness: 0, pulling: false };
                if (typeof togetherState !== 'undefined' && togetherState.you) {
                    myState = {
                        x: togetherState.you.x || 0,
                        y: togetherState.you.y || 0,
                        color: togetherState.you.color || Store.myColor || peopleColors[0],
                        vx: togetherState.you.vx || 0,
                        vy: togetherState.you.vy || 0,
                        stillness: togetherState.stillness || 0,
                        pulling: togetherState.pulling || false
                    };
                }
                
                const reach = 100 + (myState.stillness / 1200) * 1900;
                
                const myStateItems = [
                    { label: 'myId', value: Store.myId ? Store.myId.slice(-8) : 'local' },
                    { label: 'color', value: myState.color, swatch: myState.color },
                    { label: 'position', value: `(${Math.round(myState.x)}, ${Math.round(myState.y)})` },
                    { label: 'velocity', value: `(${myState.vx?.toFixed(1) || '0'}, ${myState.vy?.toFixed(1) || '0'})` },
                    { label: 'stillness', value: Math.round(myState.stillness) },
                    { label: 'reach', value: Math.round(reach) + 'px' },
                    { label: 'pulling', value: myState.pulling ? '🧲 yes' : 'no' },
                    { label: 'sync', value: mode === 'live' && Store.roomId ? '⚡ ' + Store.roomId : '○ local only', textColor: mode === 'live' && Store.roomId ? 'var(--wow)' : 'var(--text-light)' }
                ];
                
                myStateItems.forEach(item => {
                    html += `<div class="dataset-row">
                        <div class="dataset-header" style="cursor:default">
                            ${item.swatch ? `<div class="live-dot-color" style="background:${item.swatch}"></div>` : ''}
                            <div class="dataset-name" style="flex:1">${item.label}</div>
                            <div class="dataset-value" ${item.textColor ? `style="color:${item.textColor}"` : ''}>${item.value}</div>
                        </div>
                    </div>`;
                });
            }
            // ═══════════════════════════════════════════════════════════════
            // REFLECT PHASE — people, signals, reflections
            // ═══════════════════════════════════════════════════════════════
            else if (currentPhase === 'collect') {
                // People collection (not dots — people as participants)
                html += `<div class="debug-section-header" style="margin-top:12px">People</div>`;
                
                const peopleCount = typeof session !== 'undefined' ? session.people?.length || 0 : 0;
                const peopleExpanded = debugStreams.peopleExpanded !== false;
                
                html += `<div class="dataset-row ${peopleExpanded ? 'expanded' : ''}">
                    <div class="dataset-header" onclick="debugStreams.peopleExpanded = !debugStreams.peopleExpanded; updateDebugConsole();">
                        <div class="dataset-status wired"></div>
                        <div class="dataset-name">participants</div>
                        <div class="dataset-value">${peopleCount} joined</div>
                        <div class="dataset-arrow">▶</div>
                    </div>
                    <div class="dataset-detail" onclick="event.stopPropagation()">
                        <div class="live-dots-list">
                            ${(typeof session !== 'undefined' && session.people ? session.people : []).map((person, i) => {
                                const color = person.storeColor || getPersonColor(person.id);
                                return `
                                <div class="live-dot-row">
                                    <div class="live-dot-color" style="background:${color}"></div>
                                    <div class="live-dot-id">${person.id?.slice(-6) || 'anon-' + i}</div>
                                    <div class="live-dot-status" style="color:var(--text-light);font-size:9px;margin-left:auto">${person.state || 'here'}</div>
                                </div>
                            `}).join('') || '<div style="color:var(--text-lighter);font-size:10px;padding:8px">No one has joined yet</div>'}
                        </div>
                    </div>
                </div>`;
                
                // Signals collection
                html += `<div class="debug-section-header" style="margin-top:12px">Signals</div>`;
                
                const signalsCount = typeof session !== 'undefined' ? session.signals?.length || 0 : 0;
                const ouchCount = typeof session !== 'undefined' ? session.signals?.filter(s => s.type === 'ouch').length || 0 : 0;
                const wowCount = typeof session !== 'undefined' ? session.signals?.filter(s => s.type === 'wow').length || 0 : 0;
                const flaggedCount = typeof session !== 'undefined' ? session.signals?.filter(s => {
                    if (!s.flags) return false;
                    const f = s.flags;
                    return (f.name?.regex || f.name?.ai || f.id?.regex || f.id?.ai || f.crisis?.regex || f.crisis?.ai);
                }).length || 0 : 0;
                const signalsExpanded = debugStreams.signalsExpanded !== false;
                
                html += `<div class="dataset-row ${signalsExpanded ? 'expanded' : ''}">
                    <div class="dataset-header" onclick="debugStreams.signalsExpanded = !debugStreams.signalsExpanded; updateDebugConsole();">
                        <div class="dataset-status ${signalsCount > 0 ? 'wired' : 'stubbed'}"></div>
                        <div class="dataset-name">signals</div>
                        <div class="dataset-value">${signalsCount} collected${flaggedCount > 0 ? ' ⚠' + flaggedCount : ''}</div>
                        <div class="dataset-arrow">▶</div>
                    </div>
                    <div class="dataset-detail" onclick="event.stopPropagation()">
                        <div class="dataset-detail-row">
                            <span class="dataset-detail-label">ouch</span>
                            <span class="dataset-detail-value" style="color:var(--ouch)">${ouchCount}</span>
                        </div>
                        <div class="dataset-detail-row">
                            <span class="dataset-detail-label">wow</span>
                            <span class="dataset-detail-value" style="color:var(--wow)">${wowCount}</span>
                        </div>
                        <div class="dataset-detail-row">
                            <span class="dataset-detail-label">flagged</span>
                            <span class="dataset-detail-value" style="color:${flaggedCount > 0 ? 'var(--gold)' : 'var(--text-lighter)'}">${flaggedCount}</span>
                        </div>
                        <div class="dataset-detail-row">
                            <span class="dataset-detail-label">mode</span>
                            <span class="dataset-detail-value">${session.mode || 'warn'}</span>
                        </div>
                        <div class="live-dots-list">
                            ${(typeof session !== 'undefined' && session.signals ? session.signals.slice(-10).reverse() : []).map(signal => {
                                const typeColor = signal.type === 'ouch' ? 'var(--ouch)' : 'var(--wow)';
                                const age = Math.round((Date.now() - signal.timestamp) / 1000);
                                const textPreview = signal.text ? (signal.text.length > 30 ? signal.text.slice(0, 30) + '…' : signal.text) : '—';
                                const hasFlagObj = signal.flags && (
                                    signal.flags.name?.regex || signal.flags.name?.ai ||
                                    signal.flags.id?.regex || signal.flags.id?.ai ||
                                    signal.flags.crisis?.regex || signal.flags.crisis?.ai
                                );
                                const flagIcon = hasFlagObj ? ' ⚠' : '';
                                return `
                                <div class="live-dot-row" style="flex-wrap:wrap">
                                    <div class="live-dot-color" style="background:${typeColor}"></div>
                                    <div class="live-dot-id">${signal.type}${flagIcon}</div>
                                    <div class="live-dot-status" style="color:var(--text-lighter);font-size:9px;margin-left:auto">${age}s ago</div>
                                    ${signal.text ? `<div style="width:100%;font-size:9px;color:var(--text-light);padding:2px 0 0 16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">"${textPreview}"</div>` : ''}
                                </div>
                            `}).join('') || '<div style="color:var(--text-lighter);font-size:10px;padding:8px">No signals yet</div>'}
                        </div>
                    </div>
                </div>`;
                
                // Timer state
                html += `<div class="debug-section-header" style="margin-top:12px">Session</div>`;
                
                const timerRemaining = typeof session !== 'undefined' ? session.phaseTimer?.remaining || 0 : 0;
                const timerMins = Math.floor(timerRemaining / 60);
                const timerSecs = timerRemaining % 60;
                
                const sessionItems = [
                    { label: 'role', value: typeof state !== 'undefined' ? state.role : 'unknown' },
                    { label: 'timer', value: `${timerMins}:${timerSecs.toString().padStart(2, '0')}` },
                    { label: 'status', value: typeof session !== 'undefined' ? session.status : 'unknown' },
                    { label: 'room', value: Store.roomId || '—' }
                ];
                
                sessionItems.forEach(item => {
                    html += `<div class="dataset-row">
                        <div class="dataset-header" style="cursor:default">
                            <div class="dataset-name" style="flex:1">${item.label}</div>
                            <div class="dataset-value">${item.value}</div>
                        </div>
                    </div>`;
                });
                
                // AI Classification section
                html += `<div class="debug-section-header" style="margin-top:12px">AI Classification</div>`;
                
                const apiKey = typeof getSignalApiKey === 'function' ? getSignalApiKey() : null;
                const hasApiKey = !!apiKey;
                const keySource = hasApiKey ? (
                    window.SIGNAL_API_KEY ? 'window' :
                    localStorage.getItem('owl_signal_api_key') ? 'localStorage' :
                    'manual'
                ) : null;
                
                html += `<div class="dataset-row">
                    <div class="dataset-header" style="cursor:default">
                        <div class="dataset-name" style="flex:1">api</div>
                        <div class="dataset-value" style="color:${hasApiKey ? 'var(--wow)' : 'var(--text-lighter)'}">${hasApiKey ? '✓ ' + keySource : 'local only'}</div>
                    </div>
                </div>`;
                
                if (!hasApiKey) {
                    html += `<div class="dataset-row">
                        <div class="dataset-header" style="cursor:default;flex-direction:column;align-items:flex-start;gap:4px">
                            <div style="font-size:9px;color:var(--text-lighter)">Set API key via console:</div>
                            <code style="font-size:9px;background:var(--bg);padding:4px 6px;border-radius:3px;color:var(--gold);user-select:all">window.SIGNAL_API_KEY = "sk-ant-..."</code>
                        </div>
                    </div>`;
                } else {
                    html += `<div class="dataset-row">
                        <div class="dataset-header" style="cursor:default">
                            <div class="dataset-name" style="flex:1;font-size:9px;color:var(--text-lighter)">key</div>
                            <div class="dataset-value" style="font-size:9px">${apiKey.slice(0, 15)}...</div>
                        </div>
                    </div>`;
                    html += `<div class="dataset-row">
                        <div class="dataset-header" style="cursor:default">
                            <button onclick="setSignalApiKey(null); updateDebugConsole();" 
                                style="padding:4px 8px;font-size:10px;border:1px solid var(--border);border-radius:4px;background:var(--bg);cursor:pointer;color:var(--ouch)">
                                clear key
                            </button>
                        </div>
                    </div>`;
                }
            }
            // ═══════════════════════════════════════════════════════════════
            // OTHER PHASES — simple summary
            // ═══════════════════════════════════════════════════════════════
            else {
                html += `<div class="debug-section-header" style="margin-top:12px">Session Summary</div>`;
                
                const peopleCount = typeof session !== 'undefined' ? session.people?.length || 0 : 0;
                const signalsCount = typeof session !== 'undefined' ? session.signals?.length || 0 : 0;
                
                html += `<div class="dataset-row">
                    <div class="dataset-header" style="cursor:default">
                        <div class="dataset-name" style="flex:1">people</div>
                        <div class="dataset-value">${peopleCount}</div>
                    </div>
                </div>`;
                html += `<div class="dataset-row">
                    <div class="dataset-header" style="cursor:default">
                        <div class="dataset-name" style="flex:1">signals</div>
                        <div class="dataset-value">${signalsCount}</div>
                    </div>
                </div>`;
                html += `<div class="dataset-row">
                    <div class="dataset-header" style="cursor:default">
                        <div class="dataset-name" style="flex:1">status</div>
                        <div class="dataset-value">${typeof session !== 'undefined' ? session.status : 'unknown'}</div>
                    </div>
                </div>`;
            }
            
            html += '</div>';
            return html;
        }
        
        function renderEventsTab() {
            let html = '<div class="debug-tab-content active">';
            
            // Get current phase for context
            const currentPhase = typeof state !== 'undefined' ? state.phase : 'waiting';
            
            // Get flows, sorted by most recent first
            const flowList = Object.values(debugEventFlows)
                .sort((a, b) => b.startTime - a.startTime)
                .slice(0, 10); // Keep last 10 flows
            
            // Non-flow events (events without a flowId)
            const orphanEvents = debugEventLog.filter(evt => !evt.flowId);
            
            // Show flows first if any exist
            if (flowList.length > 0) {
                html += `<div class="event-section-header">Signal Flows</div>`;
                html += '<div class="event-flows">';
                
                flowList.forEach(flow => {
                    const age = Math.round((Date.now() - flow.startTime) / 1000);
                    const fresh = age < 5;
                    const expanded = debugExpandedFlows[flow.id] || false;
                    const duration = flow.endTime ? (flow.endTime - flow.startTime) : null;
                    
                    // Format time
                    let timeStr = age < 60 ? age + 's ago' : Math.floor(age / 60) + 'm ago';
                    
                    // Determine flow result styling
                    let resultClass = '';
                    let resultIcon = '';
                    if (flow.concluded) {
                        if (flow.result?.type === 'ouch') {
                            resultClass = 'ouch';
                            resultIcon = 'ouch';
                        } else if (flow.result?.type === 'wow') {
                            resultClass = 'wow';
                            resultIcon = 'wow';
                        } else if (flow.result?.blocked) {
                            resultClass = 'blocked';
                            resultIcon = 'blocked';
                        } else if (flow.result?.pending) {
                            resultClass = 'pending';
                            resultIcon = 'waiting';
                        } else {
                            resultIcon = 'done';
                        }
                    } else {
                        resultIcon = '...';
                    }
                    
                    html += `<div class="flow-row ${fresh ? 'fresh' : ''} ${expanded ? 'expanded' : ''}" onclick="toggleFlowExpanded('${flow.id}')">
                        <div class="flow-header">
                            <div class="flow-icon ${resultClass}">${resultIcon}</div>
                            <div class="flow-name">${flow.name}</div>
                            <div class="flow-steps">${flow.events.length} steps</div>
                            ${duration ? `<div class="flow-duration">${duration}ms</div>` : ''}
                            <div class="flow-time">${timeStr}</div>
                        </div>`;
                    
                    if (expanded) {
                        html += `<div class="flow-detail">`;
                        
                        // Show initial data if present
                        if (flow.initialData?.input) {
                            html += `<div class="flow-input">
                                <span class="flow-input-label">input:</span>
                                <span class="flow-input-text">"${escapeHtmlEarly(flow.initialData.input.slice(0, 80))}${flow.initialData.input.length > 80 ? '...' : ''}"</span>
                            </div>`;
                        }
                        
                        // Show each step in order
                        html += `<div class="flow-steps-list">`;
                        flow.events.forEach((evt, idx) => {
                            const isLast = idx === flow.events.length - 1;
                            const stepTime = idx > 0 ? `+${evt.time - flow.events[idx-1].time}ms` : '0ms';
                            
                            html += `<div class="flow-step ${isLast ? 'last' : ''}">
                                <div class="flow-step-connector">${isLast ? '└' : '├'}</div>
                                <div class="flow-step-content">
                                    <div class="flow-step-header">
                                        <span class="flow-step-type">${evt.type}</span>
                                        <span class="flow-step-actor">${evt.actor || 'system'}</span>
                                        <span class="flow-step-time">${stepTime}</span>
                                    </div>
                                    <div class="flow-step-detail">${evt.detail || '—'}</div>
                                    ${evt.payload ? formatFlowStepPayload(evt.payload, evt.type) : ''}
                                </div>
                            </div>`;
                        });
                        html += `</div>`;
                        
                        // Show final result if concluded
                        if (flow.concluded && flow.result) {
                            html += `<div class="flow-result ${resultClass}">
                                <span class="flow-result-label">result:</span>
                                ${flow.result.type ? `<span class="flow-result-type ${flow.result.type}">${flow.result.type}</span>` : ''}
                                ${flow.result.id ? `<span class="flow-result-id">#${flow.result.id.slice(-6)}</span>` : ''}
                                ${flow.result.blocked ? `<span class="flow-result-blocked">blocked: ${flow.result.reason}</span>` : ''}
                                ${flow.result.pending ? `<span class="flow-result-pending">waiting: ${flow.result.reason}</span>` : ''}
                                ${flow.result.storage ? `<span class="flow-result-storage">→ ${flow.result.storage}</span>` : ''}
                            </div>`;
                        }
                        
                        html += `</div>`;
                    }
                    
                    html += `</div>`;
                });
                
                html += '</div>';
            }
            
            // Show orphan events (non-flow) if any
            if (orphanEvents.length > 0) {
                if (flowList.length > 0) {
                    html += `<div class="event-section-header" style="margin-top:12px">Other Events</div>`;
                }
                
                // Group orphan events by dir+type
                const groups = {};
                orphanEvents.forEach(evt => {
                    const key = evt.dir + ' ' + evt.type;
                    if (!groups[key]) {
                        groups[key] = {
                            dir: evt.dir,
                            type: evt.type,
                            events: [],
                            lastTime: evt.time
                        };
                    }
                    groups[key].events.push(evt);
                    if (evt.time > groups[key].lastTime) {
                        groups[key].lastTime = evt.time;
                    }
                });
                
                // Sort groups by most recent activity
                const sortedGroups = Object.entries(groups)
                    .sort((a, b) => b[1].lastTime - a[1].lastTime);
                
                html += '<div class="event-log">';
                
                sortedGroups.forEach(([key, group]) => {
                    const age = Math.round((Date.now() - group.lastTime) / 1000);
                    const fresh = age < 3;
                    const isOutgoing = group.dir === '→';
                    const isLocal = group.dir === '○';
                    const expanded = debugExpandedGroups[key] || false;
                    const count = group.events.length;
                    
                    // Determine direction class
                    let dirClass = 'incoming';
                    if (isOutgoing) dirClass = 'outgoing';
                    else if (isLocal) dirClass = 'local';
                    
                    // Format time nicely
                    let timeStr;
                    if (age < 60) {
                        timeStr = age + 's ago';
                    } else if (age < 3600) {
                        timeStr = Math.floor(age / 60) + 'm ago';
                    } else {
                        timeStr = new Date(group.lastTime).toLocaleTimeString();
                    }
                    
                    html += `<div class="event-row ${fresh ? 'fresh' : ''} ${expanded ? 'expanded' : ''}" onclick="toggleEventGroupExpanded('${key}')">
                        <div class="event-header">
                            <div class="event-dir ${dirClass}">${group.dir}</div>
                            <div class="event-type">${group.type}</div>
                            <div class="event-count">${count}</div>
                            <div class="event-time">${timeStr}</div>
                        </div>
                        <div class="event-detail">`;
                    
                    if (expanded) {
                        // Show structure from most recent event
                        const latest = group.events[group.events.length - 1];
                        if (latest.payload) {
                            html += `<div class="event-structure">
                                <div class="event-structure-label">Data:</div>
                                ${formatEventPayload(latest.payload, group.type)}
                            </div>`;
                        }
                        
                        // Show last 5 instances
                        html += `<div class="event-instances">
                            <div class="event-instances-label">Recent (${Math.min(5, count)} of ${count}):</div>`;
                        
                        group.events.slice(-5).reverse().forEach(evt => {
                            const evtAge = Math.round((Date.now() - evt.time) / 1000);
                            const evtTimeStr = evtAge < 60 ? evtAge + 's' : Math.floor(evtAge / 60) + 'm';
                            html += `<div class="event-instance">
                                <span class="event-instance-time">${evtTimeStr}</span>
                                <span class="event-instance-detail">${evt.detail || '—'}</span>
                            </div>`;
                        });
                        
                        html += `</div>`;
                    }
                    
                    html += `</div></div>`;
                });
                
                html += '</div>';
            }
            
            // Empty state
            if (flowList.length === 0 && orphanEvents.length === 0) {
                html += `<div class="event-empty">
                    No events yet.<br>
                    <span style="font-size:10px;color:var(--text-lighter)">Submit a signal to see the flow</span>
                </div>`;
            }
            
            // Clear button at bottom
            if (debugEventLog.length > 0 || flowList.length > 0) {
                html += `<div style="padding:8px 14px;border-top:1px solid var(--border)">
                    <button onclick="clearDebugEvents()" style="font-size:10px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-light)">
                        Clear all
                    </button>
                    <span style="margin-left:8px;font-size:9px;color:var(--text-lighter)">${flowList.length} flows, ${orphanEvents.length} events</span>
                </div>`;
            }
            
            html += '</div>';
            return html;
        }
        
        // Format payload for flow step display (more compact than full payload)
        function formatFlowStepPayload(payloadStr, eventType) {
            try {
                const data = JSON.parse(payloadStr);
                let html = '<div class="flow-step-data">';
                
                // Show key fields based on event type
                if (eventType === 'aiRequest') {
                    if (data.model) html += `<div class="flow-data-row"><span class="key">model:</span> <span class="value">${data.model}</span></div>`;
                    if (data.inputLength) html += `<div class="flow-data-row"><span class="key">sent:</span> <span class="value">${data.inputLength} chars</span></div>`;
                } else if (eventType === 'aiResult' || eventType === 'localResult') {
                    if (data.type) html += `<div class="flow-data-row"><span class="key">classified:</span> <span class="value ${data.type}">${data.type}</span></div>`;
                    if (data.reasoning) html += `<div class="flow-data-row"><span class="key">reasoning:</span> <span class="value">"${escapeHtmlEarly(data.reasoning.slice(0, 60))}${data.reasoning.length > 60 ? '...' : ''}"</span></div>`;
                } else if (eventType === 'regex') {
                    if (data.matches && data.matches !== 'none') {
                        html += `<div class="flow-data-row"><span class="key">matched:</span> <span class="value highlight">${Array.isArray(data.matches) ? data.matches.join(', ') : data.matches}</span></div>`;
                    }
                } else if (eventType === 'signal' || eventType === 'stored') {
                    if (data.type) html += `<div class="flow-data-row"><span class="key">type:</span> <span class="value ${data.type}">${data.type}</span></div>`;
                    if (data.id) html += `<div class="flow-data-row"><span class="key">id:</span> <span class="value">${data.id}</span></div>`;
                    if (data.storage) html += `<div class="flow-data-row"><span class="key">stored:</span> <span class="value">${data.storage}</span></div>`;
                }
                
                html += '</div>';
                return html;
            } catch (e) {
                return '';
            }
        }
        
        // Format event payload as structured data instead of raw JSON
        function formatEventPayload(payloadStr, eventType) {
            try {
                const data = JSON.parse(payloadStr);
                
                // Special formatting for pipeline events
                if (['regex', 'aiRequest', 'aiRaw', 'aiResult', 'localResult', 'noApiKey', 'typeDecision', 'userChose', 'signal'].includes(eventType)) {
                    return formatPipelineData(data, eventType);
                }
                
                // Generic key-value formatting
                return formatGenericData(data);
            } catch (e) {
                // Fallback to pre if not valid JSON
                return `<pre>${payloadStr}</pre>`;
            }
        }
        
        // Format pipeline-related data with clear structure
        function formatPipelineData(data, eventType) {
            let html = '<div class="event-data">';
            
            // Order keys for pipeline events to tell a story
            const keyOrder = {
                'regex': ['input', 'mode', 'matches', 'flags'],
                'aiRequest': ['model', 'inputLength', 'prompt'],
                'aiRaw': ['duration', 'rawResponse', 'usage'],
                'aiResult': ['type', 'userType', 'agrees', 'reasoning', 'flags'],
                'noApiKey': ['hint'],
                'localResult': ['type', 'reasoning', 'userType', 'agrees'],
                'typeDecision': ['mode', 'aiType', 'reasoning'],
                'userChose': ['chosenType', 'originalType', 'text'],
                'signal': ['type', 'autoMode', 'flagged', 'reasoning', 'id']
            };
            
            const order = keyOrder[eventType] || Object.keys(data);
            
            order.forEach(key => {
                if (data[key] === undefined) return;
                
                const value = data[key];
                let valueClass = '';
                let displayValue = '';
                
                // Special value formatting
                if (key === 'type' || key === 'aiType' || key === 'chosenType') {
                    valueClass = value === 'ouch' ? 'ouch' : value === 'wow' ? 'wow' : '';
                    displayValue = value;
                } else if (key === 'agrees') {
                    displayValue = value ? 'yes' : 'no';
                    valueClass = value ? 'wow' : 'ouch';
                } else if (key === 'flagged') {
                    displayValue = value ? 'flagged' : 'clear';
                    valueClass = value ? 'highlight' : '';
                } else if (key === 'matches' && Array.isArray(value)) {
                    displayValue = value.length === 0 ? 'none' : value.join(', ');
                    valueClass = value.length > 0 ? 'highlight' : '';
                } else if (key === 'flags' && typeof value === 'object') {
                    const flagStrs = Object.entries(value)
                        .filter(([k, v]) => v)
                        .map(([k]) => k);
                    displayValue = flagStrs.length > 0 ? flagStrs.join(', ') : 'none';
                    valueClass = flagStrs.length > 0 ? 'highlight' : '';
                } else if (key === 'prompt' || key === 'rawResponse') {
                    // Truncate long text
                    const str = String(value);
                    displayValue = str.length > 150 ? str.slice(0, 150) + '...' : str;
                } else if (key === 'duration') {
                    displayValue = value + 'ms';
                } else if (typeof value === 'object') {
                    displayValue = JSON.stringify(value);
                } else {
                    displayValue = String(value);
                }
                
                html += `<div class="event-data-row">
                    <span class="event-data-key">${key}</span>
                    <span class="event-data-value ${valueClass}">${escapeHtmlEarly(displayValue)}</span>
                </div>`;
            });
            
            html += '</div>';
            return html;
        }
        
        // Format generic data as key-value pairs
        function formatGenericData(data) {
            let html = '<div class="event-data">';
            
            Object.entries(data).forEach(([key, value]) => {
                let displayValue = typeof value === 'object' 
                    ? JSON.stringify(value) 
                    : String(value);
                
                // Truncate long values
                if (displayValue.length > 100) {
                    displayValue = displayValue.slice(0, 100) + '...';
                }
                
                html += `<div class="event-data-row">
                    <span class="event-data-key">${escapeHtmlEarly(key)}</span>
                    <span class="event-data-value">${escapeHtmlEarly(displayValue)}</span>
                </div>`;
            });
            
            html += '</div>';
            return html;
        }
        
        // HTML escape helper
        function escapeHtml(str) {
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;');
        }
        
        function clearDebugEvents() {
            debugEventLog.length = 0;
            debugLastEventCount = 0;
            // Also clear flows
            Object.keys(debugEventFlows).forEach(key => delete debugEventFlows[key]);
            debugFlowCounter = 0;
            updateDebugConsole();
        }
        
        function logDebugEvent(dir, type, detail, payload, flowId = null, actor = null) {
            // Filter: spatial events only matter in connect phase
            const spatialEvents = ['pos', 'collision', 'pullStart', 'pullEnd', 'colorSwap', 'myColor', 'theirColor'];
            const currentPhase = typeof state !== 'undefined' ? state.phase : 'waiting';
            
            if (spatialEvents.includes(type) && currentPhase !== 'waiting') {
                return; // Don't log spatial events outside connect phase
            }
            
            const event = { 
                dir, 
                type, 
                detail: detail || '',
                payload: payload ? JSON.stringify(payload, null, 2) : null,
                time: Date.now(),
                _expanded: false,
                flowId: flowId,
                actor: actor || inferActor(type) // who did the work
            };
            
            // Add to flow if flowId provided
            if (flowId && debugEventFlows[flowId]) {
                debugEventFlows[flowId].events.push(event);
            }
            
            // Also add to flat log (legacy)
            debugEventLog.push(event);
            // Keep only last 50 for events tab (more than before)
            if (debugEventLog.length > 50) debugEventLog.shift();
        }
        
        // Infer who did the work based on event type
        function inferActor(type) {
            const actors = {
                'regex': 'pattern engine (local)',
                'aiRequest': 'you → Claude',
                'aiRaw': 'Claude API',
                'aiResult': 'Claude',
                'typeDecision': 'local logic',
                'signal': 'session storage',
                'stored': 'session.signals',
                'noApiKey': 'local fallback',
                'localResult': 'heuristic (local)',
                'userChose': 'you'
            };
            return actors[type] || 'system';
        }
        
        // ============ DATA MODEL (legacy interface) ============
        // For backward compatibility with code that reads dataModel
        const dataModel = {
            datasets: [
                {
                    name: 'People Count',
                    element: '#waitingPeopleCount',
                    demoSource: 'session.people.length',
                    liveSource: 'Store.dots.count()',
                    getValue: () => ({
                        demo: typeof session !== 'undefined' ? session.people?.length || 0 : 0,
                        live: Store.getDotCount(),
                        displayed: document.getElementById('waitingPeopleCount')?.textContent || '—'
                    }),
                    wired: true
                },
                {
                    name: 'Room Code',
                    element: '#waitingSessionCode',
                    demoSource: 'BUILD_ROOM_CODE',
                    liveSource: 'Store.roomId',
                    getValue: () => ({
                        demo: BUILD_ROOM_CODE,
                        live: Store.roomId || '—',
                        displayed: document.getElementById('waitingSessionCode')?.textContent || '—'
                    }),
                    wired: true
                },
                {
                    name: 'My Position',
                    element: 'Store.myX/myY',
                    demoSource: 'mouse events',
                    liveSource: 'Store.myX/myY',
                    getValue: () => ({
                        demo: `(${Math.round(Store.myX)}, ${Math.round(Store.myY)})`,
                        live: `(${Math.round(Store.myX)}, ${Math.round(Store.myY)})`,
                        displayed: 'unified'
                    }),
                    wired: true
                },
                {
                    name: 'My Color',
                    element: 'Store.myColor',
                    demoSource: 'Store.myColor',
                    liveSource: 'Store.myColor',
                    getValue: () => ({
                        demo: Store.myColor || '—',
                        live: Store.myColor || '—',
                        displayed: 'unified'
                    }),
                    wired: true
                }
            ]
        };
        
        // Sync all version badges on load
        function syncVersionBadges() {
            document.querySelectorAll('.version-badge').forEach(badge => {
                const numEl = badge.querySelector('.v-num');
                if (numEl) numEl.textContent = BUILD_NUM;
                // Update the text after the v-num span
                const textNode = [...badge.childNodes].find(n => n.nodeType === 3 && n.textContent.trim());
                if (textNode) {
                    textNode.textContent = ' ' + BUILD_NAME;
                } else {
                    // If no text node, append after v-num
                    badge.innerHTML = `<span class="v-num">${BUILD_NUM}</span> ${BUILD_NAME}`;
                }
            });
        }
        
        /* ═══════════════════════════════════════════════════════════════════════════
           SYSTEMS
           Internal logic that powers features
           ═══════════════════════════════════════════════════════════════════════════ */
        
        // ============ ERROR LOGGING ============
        // Errors collected here get included in lab panel export
        const ERROR_LOG_KEY = 'ouch-wow-errors';
        const ERROR_VERSION_KEY = 'ouch-wow-error-version';
        const CURRENT_VERSION = BUILD_NUM + '.' + BUILD_NAME;
        
        // Clear errors if version changed
        if (localStorage.getItem(ERROR_VERSION_KEY) !== CURRENT_VERSION) {
            localStorage.removeItem(ERROR_LOG_KEY);
            localStorage.setItem(ERROR_VERSION_KEY, CURRENT_VERSION);
        }
        
        let errorLog = JSON.parse(localStorage.getItem(ERROR_LOG_KEY) || '[]');
        
        window.onerror = function(msg, url, line, col, error) {
            try {
                errorLog.push({
                    type: 'error',
                    msg: String(msg).substring(0, 200),
                    line: line || 0,
                    col: col || 0
                });
                localStorage.setItem(ERROR_LOG_KEY, JSON.stringify(errorLog));
            } catch(e) {}
            return false;
        };
        
        window.onunhandledrejection = function(event) {
            try {
                errorLog.push({
                    type: 'unhandled',
                    msg: String(event.reason).substring(0, 200)
                });
                localStorage.setItem(ERROR_LOG_KEY, JSON.stringify(errorLog));
            } catch(e) {}
        };
        
        function clearErrors() {
            errorLog = [];
            localStorage.removeItem(ERROR_LOG_KEY);
        }
        
        function getErrorCount() {
            return JSON.parse(localStorage.getItem(ERROR_LOG_KEY) || '[]').length;
        }
        
        /* ─────────────────────────────────────────────────────────────────────────
           APP STATE
           What the app knows right now
           ───────────────────────────────────────────────────────────────────────── */
        
        // ============ STATE ============
        let state = {
            role: 'student',      // default to student, facilitator uses lab mode
            phase: 'waiting',     // start on join screen
            validation: 'pass',
            mode: 'auto',         // let user choose ouch/wow
            promptSet: 0,
            dotCount: 0,
            timerSeconds: 600,
            timerInterval: null
        };
        
        // Plan state for the setup flow
        let planState = {
            who: 'classrooms',
            contract: 0,
            mode: 'teacher-decides',
            context: 'teacher',
            when: null
        };
        
        // Debug state (lab mode only) - force signal types for testing
        let debugState = {
            type: 'auto',  // auto, ouch, wow, safety
            id: 'anon'     // named, anon
        };
        
        /*
         * ══════════════════════════════════════════════════════════════
         * FLOW REFACTOR (PLANNED - NOT YET IMPLEMENTED)
         * ══════════════════════════════════════════════════════════════
         * 
         * CURRENT FLOW:
         *   plan1 → plan2 → plan3 → waiting → [start session] → collect → patterns → commit
         *                                      ↑ starts timer immediately
         * 
         * INTENDED FLOW:
         *   plan1 → plan2 → plan3 → [create session] → lobby → [start reflecting] → collect → patterns → commit
         *                            ↑ room opens          ↑ timer starts
         * 
         * NEW STATES NEEDED:
         *   - lobby: room is open, people joining, facilitator visible, no timer yet
         *   - session.status: 'lobby' | 'reflecting' | 'patterns' | 'ended'
         * 
         * LOBBY STATE:
         *   - Session code visible, shareable
         *   - People dots appear as they join
         *   - "You" dot always visible (facilitator)
         *   - Count shows: 1 (you) + joiners
         *   - "Start reflecting" button (not "start session")
         *   - No timer running
         * 
         * TRANSITIONS:
         *   - [create session] → lobby: generates code, opens room
         *   - [start reflecting] → collect: timer starts, prompts appear
         *   - timer ends → patterns: review begins
         * 
         * UI CHANGES NEEDED:
         *   - Rename "start session" → "open room" or "create session"
         *   - Add "start reflecting" button in lobby
         *   - Session header shows in lobby (not just during collect)
         *   - You-dot visible in lobby and header
         * 
         * BACKEND IMPLICATIONS:
         *   - Room exists before reflecting starts
         *   - Participants can join during lobby
         *   - Timer only counts during reflect phase
         * 
         * ══════════════════════════════════════════════════════════════
         */
        
        // Status symbols for test tracking: ○ untested, ◉ partial, ● verified
        const statusSymbols = {
            untested: '○',
            partial: '◉',
            verified: '●'
        };
        
        // Phase flow definitions
        const allPhases = ['plan1', 'plan2', 'plan3', 'waiting', 'collect', 'patterns', 'experiment', 'commit', 'suggestions', 'ballot', 'voteMonitor'];
        const mainFlowPhases = ['plan1', 'plan2', 'plan3', 'waiting', 'collect', 'patterns', 'experiment', 'commit'];
        const voteFlowPhases = ['plan1', 'plan2', 'plan3', 'waiting', 'collect', 'patterns', 'suggestions', 'ballot', 'voteMonitor', 'commit'];
        
        // Track test status per phase per scenario
        // Key format: "contractIndex-role-phase"
        const phaseTestStatus = {
            // Teacher decides + facilitator (your tested flow)
            '0-teacher-plan1': 'partial',
            '0-teacher-plan2': 'partial',
            '0-teacher-plan3': 'partial',
            '0-teacher-waiting': 'partial',
            '0-teacher-collect': 'partial',
            '0-teacher-patterns': 'partial',
            '0-teacher-experiment': 'partial',
            '0-teacher-commit': 'partial'
        };
        
        /* ─────────────────────────────────────────────────────────────────────────
           SESSION ENGINE
           Real-time: people, signals, timer, phase transitions
           ───────────────────────────────────────────────────────────────────────── */
        
        // ============ SESSION MODEL (from 36) ============
        function generateSessionCode() {
            const chars = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
            let code = '';
            for (let i = 0; i < 6; i++) {
                code += chars[Math.floor(Math.random() * chars.length)];
            }
            return code;
        }
        
        // Color palette for people - random assignment per person ID
        const peopleColors = [
            '#7eb5a6', '#c49a8c', '#a8b07a', '#9a8cc4', '#c4a86e',
            '#6e9ac4', '#c46e8a', '#8ac4b8', '#c4b86e', '#8a7ec4'
        ];
        
        // Get a random color from the palette
        function getRandomPaletteColor() {
            return peopleColors[Math.floor(Math.random() * peopleColors.length)];
        }
        
        // NOTE: getPersonColor is defined later — it now reads from Store.dots
        
        // Blend two hex colors by a factor (0 = color1, 1 = color2)
        function blendColors(color1, color2, factor) {
            const hex = (c) => parseInt(c, 16);
            const r1 = hex(color1.slice(1, 3));
            const g1 = hex(color1.slice(3, 5));
            const b1 = hex(color1.slice(5, 7));
            const r2 = hex(color2.slice(1, 3));
            const g2 = hex(color2.slice(3, 5));
            const b2 = hex(color2.slice(5, 7));
            
            const r = Math.round(r1 + (r2 - r1) * factor);
            const g = Math.round(g1 + (g2 - g1) * factor);
            const b = Math.round(b1 + (b2 - b1) * factor);
            
            return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
        }
        
        const session = {
            // Identity
            code: generateSessionCode(),
            
            // Status: 'waiting' | 'reflecting' | 'ended'
            status: 'waiting',
            
            // Reflect mode: 'strict' | 'warn'
            mode: 'warn',
            
            // People - persists throughout session
            people: [],
            
            // Color assignments - random per person, persists per ID
            colorMap: {},
            
            // Signals - collected during reflection
            // Each: { id, text, type, timestamp, flags: { name, id, crisis } }
            // Each flag: { regex: bool, ai: bool }
            signals: [],
            
            // Phase definitions
            phases: {
                plan:       { label: 'plan',       timed: false },
                collect:    { label: 'reflect',    timed: true, duration: 10 * 60 },
                patterns:   { label: 'patterns',   timed: false },
                experiment: { label: 'experiment', timed: false },
                commit:     { label: 'commit',     timed: false }
            },
            
            // Current phase (only meaningful when status === 'active')
            currentPhase: 'plan',
            
            // Phase timer state
            phaseTimer: {
                remaining: 10 * 60,  // seconds
                interval: null,
                windingDown: false,
                windDownRemaining: 30
            },
            
            // Timestamps
            createdAt: Date.now(),
            startedAt: null,
            endedAt: null,
            endedBy: null,  // 'timer' | 'teacher' | null
            duration: null  // ms, computed on end
        };
        
        // ============ SESSION LIFECYCLE ============
        /*
        ROADMAP: Session Flow Refactor
        ==============================
        Current flow:
          planning → waiting → [start session] → collect (timer starts immediately)
        
        Target flow:
          planning → [start session] → LOBBY → [start reflecting] → collect
        
        LOBBY state:
          - Room is open, code is shareable
          - People can join and see each other
          - You (facilitator) visible as you-dot
          - No timer running yet
          - "Start reflecting" button appears when ready
          - Can still add/remove people
        
        Changes needed:
          1. Add session.phase = 'lobby' state
          2. "Start session" → goes to lobby, not collect
          3. New "Start reflecting" button in lobby
          4. Timer starts on "Start reflecting"
          5. You-dot visible in lobby header
          6. Update state dictionary: LOB = lobby, REF = reflecting
          7. Update phase codes in getLabStateSnapshot
        
        UI changes:
          - Lobby screen: shows people, you-dot, "waiting for more" or "ready"
          - Lobby header: you-dot, people count, no timer yet
          - "Start reflecting" prominent button
        
        Status: PLANNED (not executing yet)
        */
        
        function startActiveSession() {
            session.status = 'active';
            session.startedAt = Date.now();
            session.currentPhase = 'collect';
            setPhase('collect');  // Use setPhase to update markers and journey rail
            
            // Sync phase to Firebase so participants follow
            Store.writePhase('collect');
            
            startPhaseTimer();
            
            // Also start the old timer and activity simulation for compatibility
            startTimer();
            simulateActivity();
            
            renderSession();
            updateView();
        }
        
        function endActiveSession() {
            stopPhaseTimer();
            session.status = 'ended';
            session.endedAt = Date.now();
            renderSession();
        }
        
        function setSessionStatus(status) {
            if (status === 'waiting') {
                session.status = 'waiting';
                session.startedAt = null;
                session.endedAt = null;
                stopPhaseTimer();
            } else if (status === 'active') {
                session.status = 'active';
                session.startedAt = Date.now();
                startPhaseTimer();
            } else if (status === 'ended') {
                endActiveSession();
            }
            renderSession();
        }
        
        // ============ PHASE TIMER (from 36) ============
        function startPhaseTimer() {
            if (session.phaseTimer.interval) return;
            if (!session.phases[session.currentPhase]?.timed) return;
            
            session.phaseTimer.interval = setInterval(() => {
                if (session.phaseTimer.windingDown) {
                    session.phaseTimer.windDownRemaining--;
                    renderSession();
                    
                    if (session.phaseTimer.windDownRemaining <= 0) {
                        stopPhaseTimer();
                        advanceSessionPhase();
                    }
                } else {
                    session.phaseTimer.remaining--;
                    renderSession();
                    
                    if (session.phaseTimer.remaining <= 0) {
                        startSessionWindDown();
                    }
                }
            }, 1000);
        }
        
        function stopPhaseTimer() {
            if (session.phaseTimer.interval) {
                clearInterval(session.phaseTimer.interval);
                session.phaseTimer.interval = null;
            }
        }
        
        function startSessionWindDown() {
            session.phaseTimer.windingDown = true;
            session.phaseTimer.windDownRemaining = 30;
            renderSession();
        }
        
        function cancelSessionWindDown() {
            session.phaseTimer.windingDown = false;
            session.phaseTimer.remaining = 60;
            renderSession();
        }
        
        function advanceSessionPhase() {
            const phaseOrder = ['plan', 'collect', 'patterns', 'experiment', 'commit'];
            const currentIndex = phaseOrder.indexOf(session.currentPhase);
            
            if (currentIndex < phaseOrder.length - 1) {
                setSessionPhase(phaseOrder[currentIndex + 1]);
            }
        }
        
        function setSessionPhase(phase) {
            session.currentPhase = phase;
            setPhase(phase);  // Use setPhase to update markers, journey rail, and all UI
            
            // Sync phase to Firebase so participants follow
            Store.writePhase(phase);
            
            // Reset timer for timed phases
            const phaseConfig = session.phases[phase];
            if (phaseConfig?.timed) {
                session.phaseTimer.remaining = phaseConfig.duration;
                session.phaseTimer.windingDown = false;
                startPhaseTimer();
            } else {
                stopPhaseTimer();
            }
            
            renderSession();
            updateView();
        }
        
        // ============ SESSION PEOPLE ============
        function addSessionPerson(state = 'still') {
            session.people.push({
                id: Date.now() + Math.random(),
                state: state,
                joinedAt: Date.now(),
                positionIndex: session.people.length
            });
            renderSession();
        }
        
        function addSessionSignal() {
            session.signals.push({
                id: Date.now() + Math.random(),
                type: Math.random() > 0.4 ? 'ouch' : 'wow',
                timestamp: Date.now()
            });
            renderSession();
        }
        
        // ═══════════════════════════════════════════════════════════════
        // SIGNAL PROCESSING — regex check → AI check → store
        // ═══════════════════════════════════════════════════════════════
        
        // Regex patterns for browser-side detection
        const signalPatterns = {
            // ═══════════════════════════════════════════════════════════════
            // NAME DETECTION
            // Catches: explicit name statements, titles with names, signatures
            // ═══════════════════════════════════════════════════════════════
            name: new RegExp([
                // Explicit name statements
                '\\b(my name is|i\'m called|call me|i am|this is|it\'s me|signed|from)\\s+[A-Z][a-z]+',
                // Titles with names
                '\\b(mr|mrs|ms|miss|dr|prof|professor|coach|teacher)\\.?\\s+[A-Z][a-z]+',
                // Possessive with name ("Jake's class", "Mrs. Smith's")
                '\\b[A-Z][a-z]+\'s\\s+(class|group|section|period)',
                // Name + said/told/asked
                '\\b[A-Z][a-z]+\\s+(said|told|asked|yelled|screamed)',
                // Referring to specific teacher/student by name
                '\\b(teacher|student|kid|person)\\s+(named|called)\\s+[A-Z][a-z]+'
            ].join('|'), 'i'),
            
            // ═══════════════════════════════════════════════════════════════
            // ID DETECTION  
            // Catches: student IDs, emails, phones, usernames, social handles
            // ═══════════════════════════════════════════════════════════════
            id: new RegExp([
                // Student ID patterns (5+ digits, or letter+number combos)
                '\\b\\d{5,}\\b',
                '\\b[A-Z]{1,3}\\d{4,}\\b',
                '\\b\\d{2,4}[A-Z]{1,3}\\d{2,4}\\b',
                // Email patterns
                '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}',
                // Phone patterns (various formats)
                '\\b\\d{3}[-.]?\\d{3}[-.]?\\d{4}\\b',
                '\\(\\d{3}\\)\\s*\\d{3}[-.]?\\d{4}',
                // Social media handles
                '@[a-zA-Z0-9_]{3,}',
                // Usernames/gamertags mentioned explicitly
                '\\b(my|username|user|handle|gamertag|snap|insta)\\s*(is|:)?\\s*[a-zA-Z0-9_]{3,}'
            ].join('|'), 'i'),
            
            // ═══════════════════════════════════════════════════════════════
            // CRISIS DETECTION
            // Catches: self-harm, suicide, severe distress indicators
            // Note: This is a safety net, not clinical assessment
            // ═══════════════════════════════════════════════════════════════
            crisis: new RegExp([
                // Direct self-harm statements
                '\\b(kill myself|killing myself|kill me|end my life|end it all)',
                '\\b(want to die|wanna die|ready to die|better off dead)',
                '\\b(suicide|suicidal|take my own life)',
                '\\b(self.?harm|cut myself|cutting myself|hurt myself|hurting myself)',
                '\\b(don\'t want to (live|be here|exist|wake up))',
                '\\b(no reason to (live|go on|continue))',
                // Planning/method indicators
                '\\b(plan to|going to|gonna)\\s+(kill|hurt|end)',
                '\\b(how to|ways to)\\s+(kill|die|end it)',
                // Severe hopelessness
                '\\b(can\'t (take|do) (it|this) anymore)',
                '\\b(give up|giving up)\\s+(on (life|everything))?',
                '\\b(nobody (would|will) (miss|care|notice))',
                // Goodbye indicators
                '\\b(this is goodbye|final goodbye|last message)',
                '\\b(tell .+ (i love|goodbye|sorry))'
            ].join('|'), 'i')
        };
        
        // Check text against regex patterns — returns flags AND match details
        function checkSignalRegex(text) {
            const results = {
                name: { matched: false, match: null },
                id: { matched: false, match: null },
                crisis: { matched: false, match: null }
            };
            
            // Check each pattern and capture what matched
            const nameMatch = text.match(signalPatterns.name);
            if (nameMatch) {
                results.name = { matched: true, match: nameMatch[0] };
            }
            
            const idMatch = text.match(signalPatterns.id);
            if (idMatch) {
                results.id = { matched: true, match: idMatch[0] };
            }
            
            const crisisMatch = text.match(signalPatterns.crisis);
            if (crisisMatch) {
                results.crisis = { matched: true, match: crisisMatch[0] };
            }
            
            return results;
        }
        
        // Simple flag check (for backward compat)
        function getRegexFlags(regexResults) {
            return {
                name: regexResults.name.matched,
                id: regexResults.id.matched,
                crisis: regexResults.crisis.matched
            };
        }
        
        // Create a proper signal record
        function createSignalRecord(text, type, regexResults, aiFlags = null) {
            const regexFlags = typeof regexResults.name === 'boolean' 
                ? regexResults  // old format
                : getRegexFlags(regexResults);  // new format with match details
            
            // ID must not contain dots for Firebase
            const id = 'sig_' + Date.now() + '_' + Math.random().toString(36).slice(2, 8);
            
            return {
                id: id,
                text: text,
                type: type,  // 'ouch' | 'wow'
                timestamp: Date.now(),
                flags: {
                    name:   { regex: regexFlags.name,   ai: aiFlags?.name   || false },
                    id:     { regex: regexFlags.id,     ai: aiFlags?.id     || false },
                    crisis: { regex: regexFlags.crisis, ai: aiFlags?.crisis || false }
                }
            };
        }
        
        // Check if any flags are raised
        function hasFlags(signal) {
            const f = signal.flags;
            return (f.name.regex || f.name.ai || 
                    f.id.regex || f.id.ai || 
                    f.crisis.regex || f.crisis.ai);
        }
        
        // Process and store a signal (main entry point)
        // userType: the type the user selected (ouch/wow), or null to let AI decide
        // In STRICT mode: returns { blocked: true, reason } or { blocked: false, signal }
        // In WARN mode: always stores, returns { blocked: false, signal, flagged: bool }
        async function processSignal(text, userType) {
            // Track if we're in auto mode (AI decides)
            const autoMode = userType === null || userType === 'auto';
            
            // Start a flow to track all events for this signal
            const flowId = typeof startEventFlow === 'function' 
                ? startEventFlow('signal', { input: text, mode: autoMode ? 'auto' : 'forced: ' + userType })
                : null;
            
            // 1. Regex check (immediate) — with match details
            const regexResults = checkSignalRegex(text);
            const regexFlags = getRegexFlags(regexResults);
            
            // Build detailed regex report
            const regexMatches = [];
            if (regexResults.name.matched) regexMatches.push(`name: "${regexResults.name.match}"`);
            if (regexResults.id.matched) regexMatches.push(`id: "${regexResults.id.match}"`);
            if (regexResults.crisis.matched) regexMatches.push(`crisis: "${regexResults.crisis.match}"`);
            
            // Log regex check with details
            if (typeof logDebugEvent === 'function') {
                const anyMatch = regexMatches.length > 0;
                logDebugEvent('○', 'regex', 
                    anyMatch ? `${regexMatches.length} match${regexMatches.length > 1 ? 'es' : ''}` : 'clear', 
                    {
                        input: text.slice(0, 100) + (text.length > 100 ? '...' : ''),
                        matches: anyMatch ? regexMatches : 'none',
                        flags: regexFlags,
                        mode: autoMode ? 'auto (AI decides)' : 'forced: ' + userType
                    },
                    flowId,
                    'pattern engine (local)'
                );
            }
            
            // 2. AI check (async) — classifies type and detects flags
            const aiResult = await classifySignal(text, userType, flowId);
            
            // 3. Determine final type: AI's choice if auto, otherwise user's choice
            const finalType = autoMode ? aiResult.type : userType;
            
            // Log the type decision
            if (typeof logDebugEvent === 'function' && autoMode) {
                logDebugEvent('○', 'typeDecision', `AI chose: ${finalType}`, {
                    mode: 'auto',
                    aiType: aiResult.type,
                    reasoning: aiResult.reasoning
                },
                flowId,
                'local logic'
                );
            }
            
            // 4. Create signal record with final type
            const signal = createSignalRecord(text, finalType, regexResults, aiResult.flags);
            const flagged = hasFlags(signal);
            
            // 4.5. If type is unknown, end flow as pending user choice (don't store yet)
            if (finalType === 'unknown') {
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('○', 'askUser', 'waiting for you to choose type', {
                        text: text.slice(0, 50) + (text.length > 50 ? '...' : ''),
                        reason: aiResult.reasoning
                    },
                    flowId,
                    'waiting for you'
                    );
                }
                
                // DON'T end flow - leave it open for user to complete
                // Pass flowId so resolveTypePrompt can continue it
                
                return { blocked: false, signal, pending: true, aiReasoning: aiResult.reasoning, flowId };
            }
            
            // 5. Handle based on session mode (strict vs warn)
            if (session.mode === 'strict' && flagged) {
                // In strict mode, block flagged signals
                const reason = signal.flags.crisis.regex || signal.flags.crisis.ai ? 'crisis' :
                               signal.flags.name.regex || signal.flags.name.ai ? 'name' : 'id';
                
                // Log blocked
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('!', 'blocked', `${reason} detected`, {
                        reason: reason,
                        type: finalType
                    },
                    flowId,
                    'safety filter'
                    );
                }
                
                // End flow as blocked
                if (typeof endEventFlow === 'function' && flowId) {
                    endEventFlow(flowId, { blocked: true, reason, type: finalType });
                }
                
                return { blocked: true, reason, signal, aiReasoning: aiResult.reasoning };
            }
            
            // 6. Store the signal (local session + Firebase)
            session.signals.push(signal);
            
            // Write to Firebase
            const firebaseResult = await Store.writeSignal(signal);
            const storagePath = firebaseResult ? 'Firebase + session.signals' : 'session.signals (local only)';
            
            // 7. Log the storage
            if (typeof logDebugEvent === 'function') {
                logDebugEvent('→', 'stored', firebaseResult ? 'Firebase' : 'local only', {
                    type: signal.type,
                    id: signal.id,
                    storage: storagePath,
                    firebase: !!firebaseResult
                },
                flowId,
                firebaseResult ? 'Firebase' : 'session.signals'
                );
            }
            
            // End flow successfully
            if (typeof endEventFlow === 'function' && flowId) {
                endEventFlow(flowId, { 
                    type: signal.type, 
                    id: signal.id, 
                    storage: storagePath,
                    flagged: flagged
                });
            }
            
            renderSession();
            return { blocked: false, signal, flagged, aiReasoning: aiResult.reasoning };
        }
        
        // ═══════════════════════════════════════════════════════════════
        // AI SIGNAL CLASSIFICATION
        // Uses Anthropic API to classify signals and detect flags
        // Falls back to heuristic if no API key available
        // ═══════════════════════════════════════════════════════════════
        
        // API key sources (checked in order):
        // 1. window.SIGNAL_API_KEY (set in console)
        // 2. localStorage 'owl_signal_api_key'
        // 3. URL param ?signalKey=sk-ant-...
        // 4. signalApiKey variable (set via debug panel)
        let signalApiKey = null;
        
        function getSignalApiKey() {
            // 1. Window global (easiest for console)
            if (typeof window !== 'undefined' && window.SIGNAL_API_KEY) {
                return window.SIGNAL_API_KEY;
            }
            // 2. localStorage
            try {
                const stored = localStorage.getItem('owl_signal_api_key');
                if (stored) return stored;
            } catch (e) {}
            // 3. URL param
            try {
                const params = new URLSearchParams(window.location.search);
                const urlKey = params.get('signalKey');
                if (urlKey) return urlKey;
            } catch (e) {}
            // 4. Variable set via UI
            return signalApiKey;
        }
        
        function setSignalApiKey(key) {
            signalApiKey = key;
            // Also save to localStorage for persistence
            try {
                if (key) {
                    localStorage.setItem('owl_signal_api_key', key);
                } else {
                    localStorage.removeItem('owl_signal_api_key');
                }
            } catch (e) {}
            console.log('[signal-ai] API key set:', key ? '✓ ' + key.slice(0, 12) + '...' : '✗ cleared');
            
            if (typeof logDebugEvent === 'function') {
                logDebugEvent('○', 'apiKey', key ? 'set' : 'cleared', { 
                    source: 'manual',
                    keyPreview: key ? key.slice(0, 12) + '...' : null
                });
            }
            
            // Update banner visibility
            updateApiKeyBanner();
        }
        
        // Check and show/hide API key banner
        function updateApiKeyBanner() {
            const banner = document.getElementById('apiKeyBanner');
            if (!banner) return;
            
            // Only show for facilitators, not students
            if (typeof state !== 'undefined' && state.role !== 'teacher') {
                banner.style.display = 'none';
                return;
            }
            
            const hasKey = !!getSignalApiKey();
            const dismissed = sessionStorage.getItem('apiKeyBannerDismissed');
            
            if (!hasKey && !dismissed) {
                banner.style.display = 'flex';
            } else {
                banner.style.display = 'none';
            }
        }
        
        function dismissApiKeyBanner() {
            const banner = document.getElementById('apiKeyBanner');
            if (banner) banner.style.display = 'none';
            sessionStorage.setItem('apiKeyBannerDismissed', 'true');
        }
        
        function promptForApiKey() {
            const key = prompt('Paste your Anthropic API key:\n\n(starts with sk-ant-...)');
            if (key && key.trim()) {
                setSignalApiKey(key.trim());
                updateApiKeyBanner();
            }
        }
        
        // Check on page load
        function checkApiKeyOnLoad() {
            // Small delay to let page render
            setTimeout(() => {
                updateApiKeyBanner();
                updateStudentFeedbackBtn();
            }, 500);
        }
        
        // Student feedback (participants only)
        function updateStudentFeedbackBtn() {
            const btn = document.getElementById('studentFeedbackBtn');
            if (!btn) return;
            // Only show for students, not facilitators
            btn.style.display = (typeof state !== 'undefined' && state.role !== 'teacher') ? 'block' : 'none';
        }
        
        function toggleStudentFeedback() {
            const popup = document.getElementById('studentFeedbackPopup');
            popup.classList.toggle('open');
            if (popup.classList.contains('open')) {
                document.getElementById('studentFeedbackText').focus();
            }
        }
        
        function sendStudentFeedback() {
            const text = document.getElementById('studentFeedbackText').value.trim();
            if (!text) return;
            
            const btn = document.getElementById('studentFeedbackSend');
            btn.disabled = true;
            btn.textContent = 'sending...';
            
            // Write to Firebase
            if (Store.mode === 'live' && Store.db && Store.roomId) {
                const feedbackRef = Store.db.ref('rooms/' + Store.roomId + '/feedback').push();
                feedbackRef.set({
                    text: text,
                    timestamp: Date.now(),
                    from: Store.myId
                }).then(() => {
                    document.getElementById('studentFeedbackText').value = '';
                    document.getElementById('studentFeedbackPopup').classList.remove('open');
                    btn.disabled = false;
                    btn.textContent = 'share feedback';
                    if (typeof showToastMessage === 'function') {
                        showToastMessage('thanks for sharing ✓');
                    }
                }).catch(() => {
                    btn.disabled = false;
                    btn.textContent = 'share feedback';
                });
            } else {
                console.log('[feedback] Would send:', text);
                document.getElementById('studentFeedbackPopup').classList.remove('open');
                btn.disabled = false;
                btn.textContent = 'share feedback';
                if (typeof showToastMessage === 'function') {
                    showToastMessage('thanks for sharing ✓');
                }
            }
        }
        
        // The prompt we send to Claude
        function getClassificationPrompt(text) {
            return `Classify this student feedback signal. Respond with JSON.

Signal: "${text}"

Determine:
1. type: "ouch" (frustration/confusion/difficulty/complaint) or "wow" (appreciation/clarity/success/gratitude)
2. flags.name: true if contains a specific person's name or strongly implies one
3. flags.id: true if contains identifying info (ID numbers, email, phone, username, social handle)
4. flags.crisis: true if expresses self-harm, suicidal ideation, or severe distress

Respond with this exact JSON structure plus a brief reasoning field:
{
  "type": "ouch" or "wow",
  "flags": { "name": bool, "id": bool, "crisis": bool },
  "reasoning": "1-2 sentence explanation of your classification"
}`;
        }
        
        async function checkSignalWithAI(text, userType, flowId = null) {
            const apiKey = getSignalApiKey();
            
            // If no API key, ask the user instead
            if (!apiKey) {
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('!', 'noApiKey', 'asking user', { 
                        hint: 'Set: window.SIGNAL_API_KEY = "sk-ant-..."' 
                    },
                    flowId,
                    'local fallback'
                    );
                }
                return { 
                    type: 'unknown', 
                    flags: { name: false, id: false, crisis: false },
                    source: 'none',
                    reasoning: 'No API key — asking you instead'
                };
            }
            
            const prompt = getClassificationPrompt(text);
            
            // Log the request
            if (typeof logDebugEvent === 'function') {
                logDebugEvent('→', 'aiRequest', 'sending to claude...', { 
                    model: 'claude-sonnet-4-20250514',
                    inputLength: text.length,
                    prompt: prompt.slice(0, 200) + '...'
                },
                flowId,
                'you → Claude'
                );
            }
            
            try {
                const startTime = Date.now();
                
                const response = await fetch("https://api.anthropic.com/v1/messages", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "x-api-key": apiKey,
                        "anthropic-version": "2023-06-01",
                        "anthropic-dangerous-direct-browser-access": "true"
                    },
                    body: JSON.stringify({
                        model: "claude-sonnet-4-20250514",
                        max_tokens: 300,
                        messages: [{
                            role: "user",
                            content: prompt
                        }]
                    })
                });
                
                const duration = Date.now() - startTime;
                
                if (!response.ok) {
                    const errorText = await response.text();
                    if (typeof logDebugEvent === 'function') {
                        logDebugEvent('←', 'aiError', `${response.status}`, { 
                            status: response.status,
                            error: errorText.slice(0, 200),
                            duration
                        },
                        flowId,
                        'Claude API'
                        );
                    }
                    return { ...fallbackSignalCheck(text), source: 'local', reasoning: `API error ${response.status} - fell back to local` };
                }
                
                const data = await response.json();
                const content = data.content?.[0]?.text || '';
                
                // Log raw response
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('←', 'aiRaw', `${duration}ms`, { 
                        duration,
                        rawResponse: content,
                        usage: data.usage
                    },
                    flowId,
                    'Claude API'
                    );
                }
                
                // Parse JSON from response
                const jsonMatch = content.match(/\{[\s\S]*\}/);
                if (jsonMatch) {
                    const parsed = JSON.parse(jsonMatch[0]);
                    const result = {
                        type: parsed.type === 'wow' ? 'wow' : 'ouch',
                        flags: {
                            name: !!parsed.flags?.name,
                            id: !!parsed.flags?.id,
                            crisis: !!parsed.flags?.crisis
                        },
                        source: 'api',
                        reasoning: parsed.reasoning || 'No reasoning provided',
                        duration
                    };
                    
                    // Log parsed result
                    if (typeof logDebugEvent === 'function') {
                        const agrees = result.type === userType;
                        logDebugEvent('○', 'aiResult', 
                            `classified: ${result.type}${agrees ? '' : ' ≠ user'}`, 
                            {
                                type: result.type,
                                userType: userType,
                                agrees: agrees,
                                flags: result.flags,
                                reasoning: result.reasoning
                            },
                        flowId,
                        'Claude'
                        );
                    }
                    
                    return result;
                }
                
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('○', 'aiParseFail', 'bad json', { 
                        rawResponse: content 
                    },
                    flowId,
                    'JSON parser'
                    );
                }
                return { ...fallbackSignalCheck(text), source: 'local', reasoning: 'Could not parse API response' };
                
            } catch (err) {
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('←', 'aiError', err.message, { 
                        error: err.message,
                        stack: err.stack?.slice(0, 200)
                    },
                    flowId,
                    'Claude API'
                    );
                }
                return { ...fallbackSignalCheck(text), source: 'local', reasoning: `API error: ${err.message}` };
            }
        }
        
        // No local fallback — if we can't use AI, ask the user
        function fallbackSignalCheck(text) {
            return {
                type: 'unknown',  // always ask user
                flags: { name: false, id: false, crisis: false },
                reasoning: 'No API key — asking you instead'
            };
        }
        
        // Main entry point for classification
        // STUBBED: Always asks user to choose type (API disabled until Cloudflare migration)
        async function classifySignal(text, userType, flowId = null) {
            if (typeof logDebugEvent === 'function') {
                logDebugEvent('○', 'classify', 'API disabled — asking user', { 
                    stub: true,
                    reason: 'Cloudflare migration pending'
                },
                flowId,
                'stub (API disabled)'
                );
            }
            return { 
                type: 'unknown', 
                flags: { name: false, id: false, crisis: false },
                source: 'stub',
                reasoning: 'API disabled — you choose'
            };
        }
        
        // End the reflect session
        function endReflectSession(endedBy = 'teacher') {
            session.status = 'ended';
            session.endedAt = Date.now();
            session.endedBy = endedBy;
            session.duration = session.startedAt ? session.endedAt - session.startedAt : null;
            
            if (typeof logDebugEvent === 'function') {
                logDebugEvent('○', 'sessionEnd', endedBy, {
                    endedBy,
                    duration: session.duration,
                    signalCount: session.signals.length
                });
            }
            
            renderSession();
        }
        
        // Helper for simulated signals (backward compat + logging)
        function addSignalWithLog(type, source = 'sim', text = '') {
            const regexFlags = text ? checkSignalRegex(text) : { name: false, id: false, crisis: false };
            const signal = createSignalRecord(text, type, regexFlags);
            session.signals.push(signal);
            
            if (typeof logDebugEvent === 'function') {
                if (source === 'you') {
                    logDebugEvent('→', 'signal', type, { type, id: signal.id });
                } else {
                    logDebugEvent('←', 'newSignal', type, { type, from: source });
                }
            }
            
            renderSession();
            return signal;
        }
        
        // ============ SESSION RENDERING ============
        function renderSession() {
            renderUnifiedHeader();
            renderOverlayContent();
            renderPhaseIndicator();
            renderWaitingRoom();
        }
        
        function renderUnifiedHeader() {
            // People dots - using actual colors from Store
            const dotsContainer = document.getElementById('unifiedHeaderDots');
            if (dotsContainer) {
                dotsContainer.innerHTML = '';
                session.people.forEach(person => {
                    const dot = document.createElement('div');
                    dot.className = 'p-dot ' + person.state;
                    // Prefer storeColor (from Store.dots), fallback to getPersonColor
                    const color = person.storeColor || getPersonColor(person.id);
                    dot.style.background = color;
                    dotsContainer.appendChild(dot);
                });
            }
            
            // Timer segments
            const timerGroup = document.getElementById('unifiedTimerGroup');
            const phaseConfig = session.phases[session.currentPhase];
            
            if (timerGroup) {
                if (session.status !== 'active' || !phaseConfig?.timed) {
                    timerGroup.classList.add('hidden');
                } else {
                    timerGroup.classList.remove('hidden');
                    
                    const total = phaseConfig.duration;
                    const remaining = session.phaseTimer.remaining;
                    const isUrgent = remaining < 120;
                    const pct = remaining / total;
                    const filledSegs = Math.ceil(pct * 10);
                    
                    const segsContainer = document.getElementById('unifiedSegments');
                    if (segsContainer) {
                        segsContainer.innerHTML = '';
                        for (let i = 0; i < 10; i++) {
                            const seg = document.createElement('div');
                            seg.className = 'seg';
                            const isFilled = i >= (10 - filledSegs);
                            if (!isFilled) seg.classList.add('empty');
                            if (isUrgent && isFilled) seg.classList.add('urgent');
                            segsContainer.appendChild(seg);
                        }
                    }
                    
                    const timerIcon = document.getElementById('unifiedTimerIcon');
                    if (timerIcon) timerIcon.classList.toggle('urgent', isUrgent);
                }
            }
            
            // Status badge
            const badge = document.getElementById('unifiedStatusBadge');
            if (badge) {
                badge.className = 'session-status-badge ' + session.status;
                badge.textContent = session.status;
            }
        }
        
        function renderOverlayContent() {
            const content = document.getElementById('overlayContent');
            if (!content) return;
            
            if (session.status === 'waiting') {
                content.innerHTML = `
                    <div class="info-grid two-col">
                        <div class="info-cell">
                            <div class="info-visual">
                                <svg class="person-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="7" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/>
                                </svg>
                                <div class="people-dots" id="overlayPeopleDots">
                                    ${session.people.map(p => `<div class="p-dot ${p.state}" style="background:${p.storeColor || getPersonColor(p.id)}"></div>`).join('')}
                                </div>
                            </div>
                            <div class="info-number">${session.people.length}</div>
                            <div class="info-label">joined</div>
                        </div>
                        <div class="info-cell">
                            <div class="info-number" style="font-size: 24px; color: var(--text-light);">waiting</div>
                            <div class="info-label">for you to start</div>
                        </div>
                    </div>
                    <div class="action-row">
                        <button class="action-btn primary" onclick="startActiveSession(); closeHeaderOverlay();">start session</button>
                    </div>
                `;
            } else if (session.status === 'active') {
                const phaseConfig = session.phases[session.currentPhase];
                const mins = Math.floor(session.phaseTimer.remaining / 60);
                const secs = session.phaseTimer.remaining % 60;
                const timeStr = mins + ':' + secs.toString().padStart(2, '0');
                const isUrgent = session.phaseTimer.remaining < 120;
                
                content.innerHTML = `
                    <div class="info-grid">
                        <div class="info-cell">
                            <div class="info-visual">
                                <svg class="person-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="7" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/>
                                </svg>
                                <div class="people-dots" id="overlayPeopleDots2">
                                    ${session.people.map(p => `<div class="p-dot ${p.state}" style="background:${p.storeColor || getPersonColor(p.id)}"></div>`).join('')}
                                </div>
                            </div>
                            <div class="info-number">${session.people.length}</div>
                            <div class="info-label">connected</div>
                        </div>
                        <div class="info-cell signals-cell">
                            <div class="signals-bg" id="overlaySignalsBg"></div>
                            <div class="info-number">${session.signals.length}</div>
                            <div class="info-label">signals</div>
                        </div>
                        ${phaseConfig?.timed ? `
                        <div class="info-cell">
                            <div class="info-number ${isUrgent ? 'urgent' : ''}">${timeStr}</div>
                            <div class="info-label">remaining</div>
                        </div>
                        ` : `
                        <div class="info-cell">
                            <div class="info-number" style="font-size: 20px;">${session.currentPhase}</div>
                            <div class="info-label">phase</div>
                        </div>
                        `}
                    </div>
                    <div class="action-row" id="overlayActionRow">
                        ${session.phaseTimer.windingDown ? `
                        <div class="wind-down-row show">
                            <span class="wind-down-text">ending in</span>
                            <span class="wind-down-timer">${session.phaseTimer.windDownRemaining}s</span>
                            <button class="wind-down-cancel" onclick="cancelSessionWindDown()">cancel</button>
                        </div>
                        ` : `
                        <button class="action-btn" onclick="showEndModal()">end session</button>
                        `}
                    </div>
                `;
            } else if (session.status === 'ended') {
                content.innerHTML = `
                    <div class="ended-message">
                        <div class="ended-label">session ended</div>
                        <div class="ended-stats">
                            <div class="ended-stat">
                                <div class="ended-stat-num">${session.people.length}</div>
                                <div class="ended-stat-label">participated</div>
                            </div>
                            <div class="ended-stat">
                                <div class="ended-stat-num">${session.signals.length}</div>
                                <div class="ended-stat-label">signals</div>
                            </div>
                        </div>
                    </div>
                `;
            }
        }
        
        function renderPhaseIndicator() {
            const phases = ['plan', 'collect', 'patterns', 'experiment', 'commit'];
            const currentIndex = phases.indexOf(session.currentPhase);
            
            document.querySelectorAll('.phase-indicator .phase-dot').forEach(dot => {
                const phase = dot.dataset.phase;
                const phaseConfig = session.phases[phase];
                const isTimed = phaseConfig?.timed;
                
                dot.classList.remove('active', 'complete', 'timed');
                
                if (phases.indexOf(phase) < currentIndex) {
                    dot.classList.add('complete');
                } else if (phase === session.currentPhase) {
                    dot.classList.add('active');
                    if (isTimed) dot.classList.add('timed');
                }
            });
            
            document.querySelectorAll('.phase-indicator .phase-connector').forEach(conn => {
                const afterPhase = conn.dataset.after;
                const afterIndex = phases.indexOf(afterPhase);
                conn.classList.toggle('complete', afterIndex < currentIndex);
            });
            
            // Show/hide phase indicator based on session status
            const indicator = document.getElementById('phaseIndicator');
            if (indicator) {
                indicator.style.display = session.status === 'active' ? 'flex' : 'none';
            }
        }
        
        function renderWaitingRoom() {
            // Update waiting room people count and dots
            // Use Store.dots as source of truth
            const count = document.getElementById('waitingPeopleCount');
            const connectedEl = document.getElementById('connectedCount');
            const dots = document.getElementById('waitingPeopleDots');
            const label = document.querySelector('.waiting-people-label');
            
            // Get count from Store (includes me)
            const dotCount = Store.getDotCount ? Store.getDotCount() : (session.people.length + 1);
            if (count) count.textContent = dotCount;
            if (connectedEl) connectedEl.textContent = dotCount;
            if (label) label.textContent = dotCount === 1 ? 'person here' : 'people here';
            if (dots) {
                // Show all dots (including me, highlighted) with actual colors
                const allDots = Store.dots ? Store.dots.getAll() : {};
                dots.innerHTML = Object.entries(allDots).map(([id, dot]) => {
                    const isMe = id === Store.myId;
                    const color = dot.color || peopleColors[0];
                    return `<div class="p-dot ${dot.state || 'here'}${isMe ? ' is-me' : ''}" style="background:${color}" ${isMe ? 'title="you"' : ''}></div>`;
                }).join('');
            }
            
            // Update session codes
            document.querySelectorAll('#waitingSessionCode, #overlaySessionCode').forEach(el => {
                if (el) el.textContent = session.code;
            });
            
            // Also update the old session code element
            const oldCode = document.getElementById('sessionCode');
            if (oldCode) oldCode.textContent = session.code;
        }
        
        // ============ HEADER OVERLAY ============
        function toggleHeaderOverlay() {
            const overlay = document.getElementById('headerOverlay');
            if (overlay) {
                overlay.classList.toggle('show');
                if (overlay.classList.contains('show')) {
                    renderOverlayContent();
                }
            }
        }
        
        function closeHeaderOverlay() {
            const overlay = document.getElementById('headerOverlay');
            if (overlay) overlay.classList.remove('show');
        }
        
        // ============ DATA ============
        // Student prompts - for reflection
        const studentPromptSets = [
            { nudge: "Think of a specific moment...", chips: ["when someone ___", "I felt ___ when", "I noticed that ___"] },
            { nudge: "Where you got stuck", chips: ["I didn't know how to ___", "I kept trying to ___", "I couldn't find ___"] },
            { nudge: "Something that slowed you down", chips: ["I hesitated at ___", "I had to re-read ___", "I almost gave up when ___"] },
            { nudge: "What you expected", chips: ["I thought ___ would", "I expected to see ___", "I assumed ___ meant"] },
            { nudge: "Surprise or confusion", chips: ["I didn't expect ___", "I was confused why ___", "I thought I broke it when ___"] },
            { nudge: "What mattered to you", chips: ["The part I cared about was ___", "I didn't need ___", "I wished ___"] }
        ];
        
        // Teacher prompts - for observing the room
        const teacherPromptSets = [
            { nudge: "What are you noticing?", chips: ["body language shifted when ___", "energy feels ___", "___ hasn't spoken yet"] },
            { nudge: "Who needs attention?", chips: ["___ seems checked out", "___ is dominating", "the back row is ___"] },
            { nudge: "How's the pace?", chips: ["we're rushing through ___", "they need more time on ___", "I lost them at ___"] },
            { nudge: "What's working?", chips: ["___ lit up when", "good energy around ___", "breakthrough moment: ___"] },
            { nudge: "What's surprising you?", chips: ["I expected ___ but", "I didn't anticipate ___", "___ is different today"] },
            { nudge: "Room dynamics", chips: ["the quiet ones are ___", "pairs that work: ___", "tension between ___"] }
        ];
        
        // Use appropriate prompts based on role
        function getPromptSets() {
            if (!state || !state.role) return teacherPromptSets;
            return state.role === 'teacher' ? teacherPromptSets : studentPromptSets;
        }
        
        const toastStyles = ['style-big', 'style-huge', 'style-massive', 'style-giant', 'style-small', 'style-tiny', 'style-whisper', 'style-scream', 'style-tilt', 'style-tilt-right', 'style-wild-tilt', 'style-spaced', 'style-tight', 'style-light', 'style-heavy', 'style-stretch', 'style-tall', 'style-squash', 'style-italic', 'style-lean'];
        
        const toastAnims = ['anim-pop', 'anim-drop', 'anim-rise', 'anim-bounce', 'anim-slam', 'anim-swing', 'anim-zoom', 'anim-wobble', 'anim-rubber', 'anim-spring', 'anim-float'];
        
        const wordVariations = {
            ouch: ['OUCH', 'ouch', 'ouch.', 'Ouch', 'ouch!', 'ouch...'],
            wow: ['WOW', 'wow', 'wow.', 'Wow', 'wow!', 'wow...']
        };
        
        const flavorWords = {
            ouch: ['felt that.', 'heard.', 'noted.', 'oof.', 'yeah.', 'got it.', 'real.', 'hard.', 'rough.', 'valid.', 'understood.', 'seen.', 'thank you.'],
            wow: ['felt that.', 'heard.', 'noted.', 'nice.', 'yeah.', 'got it.', 'real.', 'sweet.', 'yes.', 'valid.', 'understood.', 'seen.', 'thank you.', 'love it.']
        };
        
        // ============ UTILITY ============
        function pick(arr) {
            return arr[Math.floor(Math.random() * arr.length)];
        }
        
        // ============ LAB MODE ============
        let labModeActive = false;
        let labNotes = [];
        
        function toggleLabMode() {
            labModeActive = !labModeActive;
            document.body.classList.toggle('lab-mode', labModeActive);
            if (labModeActive) {
                initLabControls();
                updateLabPhase();
                // Show journey rail when entering lab mode
                const rail = document.getElementById('labJourneyRail');
                if (rail) rail.classList.remove('hidden');
            } else {
                // Turn off picking when lab mode deactivates
                if (labPicking) togglePicker();
                closeNotes();
            }
            // Update input dial visibility
            updateInputDialVisibility();
        }
        
        function hideJourneyRail() {
            const rail = document.getElementById('labJourneyRail');
            if (rail) rail.classList.add('hidden');
        }
        
        // ============ VERSION HISTORY ============
        const versionHistory = [
            { num: 48, name: 'gathering', scope: 'SERVICE', 
              quote: 'remember how the people used to have different states — that changed the dots — imagine that also changes their cursors',
              changes: 'State-based movement: here (curious), working (focused), still (drifting), distracted (erratic), away (frozen). Visual appearance matches.' },
            { num: 47, name: 'spring-cleaning', scope: 'LAB', 
              quote: 'I click the copy button — then I have to remove each comment 1 at a time — just delete after I copy',
              changes: 'Export button auto-clears threads after copy. Clear data panel (∅) for manual clearing.' },
            { num: 46, name: 'compass-rose', scope: 'PROTOCOL', 
              quote: 'turn towards orientation, boundaries and expectations... It\'s the effort of the beautiful mountain we are building',
              changes: 'ORIENTATION section at protocol top: THE MOUNTAIN, WHO, WHAT, WHY, BOUNDARIES, EXPECTATIONS. API context aligned.' },
            { num: 45, name: 'old-growth', scope: 'LAB', 
              quote: 'you lost the thread we had going — when this was red. the threads should be obvious on the page',
              changes: 'Thread dot restored bigger. Journey rail bigger with thread badges. Red pulse when needs attention.' },
            { num: 44, name: 'deep-roots', scope: 'LAB', 
              quote: 'these responses won\'t do in api calls — what can we do to improve context and clarity',
              changes: 'Rich API context: WHO I AM (Sam), WHAT THIS IS (project structure), WHERE I AM (phase), FIND/REPLACE format.' },
            { num: 43, name: 'river-stones', scope: 'LAB', 
              quote: 'YES — but it doesn\'t match the journey flow yet! :)',
              changes: 'Floating phase indicator (bottom-left): shows current phase name + thread count, updates as you move through journey.' },
            { num: 42, name: 'northern-lights', scope: 'LAB', 
              quote: 'this is the most important place to start a thread — let\'s build a thread tracker ux — they are on each phase of the journey',
              changes: 'Phase thread indicators: purple badge per phase, click to see threads for that phase, pulses when has threads.' },
            { num: 41, name: 'first-light', scope: 'LAB', 
              quote: 'we are moving towards api calls from the html... yes [start simple, prove the pattern]',
              changes: 'API thread: ⚡ button sends note to Claude directly. Key in sessionStorage. First step to parallel.' },
            { num: 40, name: 'meteor-shower', scope: 'LAB', 
              quote: 'remove dream mode — it\'s the idea that I need space with the note taker — and a commitment to NO OTHER UX',
              changes: 'Dream mode removed (-700 lines). Meeting mode added: simple ✎ notes space, auto-saves, no version pressure.' },
            { num: 39, name: 'clean-sheets', scope: 'LAB', 
              quote: 'you told me about possible code growth concerns, how might we look into that like a doc — from the lab screen',
              changes: 'Code health panel (◈ button): line breakdown, value vs bloat lists, suggest prune action.' },
            { num: 38, name: 'tide-pools', scope: 'PROTOCOL', 
              quote: 'as we go through versions — I want to see what is driving improvement — and where the bloat might be',
              changes: 'CODE INVENTORY in protocol: line counts by section, value drivers, bloat candidates, growth trends.' },
            { num: 37, name: 'fresh-bread', scope: 'LAB', 
              quote: 'let\'s try starting this next turn with an updated overlay — right over the top of the current screen',
              changes: 'Turn overlay on load: your words, my changes, what to notice. Dismiss to see app.' },
            { num: 36, name: 'sudden-laughter', scope: 'LAB', 
              quote: 'we need to get the full context in a hash of where the pointer clicked',
              changes: 'Export now includes WHERE I AM + rich element context from picker.' },
            { num: 35, name: 'lucky-guess', scope: 'LAB', 
              quote: 'can we get this back to the same font as ouch wow lab but bold',
              changes: 'Version badge: bold 14px, inherits font.' },
            { num: 34, name: 'deep-breath', scope: 'LAB', 
              quote: 'the copy and pasted response is not friendly or respectful to an unknown ai',
              changes: 'Export now warm + contextual on first turn.' },
            { num: 33, name: 'warm-stone', scope: 'LAB', 
              quote: 'this should be 1 -- because there is 1 discussion live',
              changes: 'Journey step counter tracks active threads.' },
            { num: 32, name: 'first-snow', scope: 'LAB', 
              quote: 'we want to think about showing me every turn the changelog',
              changes: 'Last turn card at top of lab panel.' },
            { num: 31, name: 'morning-thunder', scope: 'PROTOCOL', 
              quote: 'we might improve the response prompt',
              changes: 'OPEN THREADS restructured.' },
            { num: 30, name: 'fluid-octopus', scope: 'LAB', 
              quote: 'I will mostly use the picker to interact in dream space... put the lab overlay on top... make dream space expectations fluid and new ui/ux concepts',
              changes: 'Dream mode now fluid canvas. Lab controls work on top (picker, notes). Draggable threads, floating notes, ambient particles.' },
            { num: 29, name: 'swift-falcon', scope: 'PROTOCOL + LAB', 
              quote: 'assume the ai will be greedy and skim then decide as it goes -- how might we improve the structure to guide it?',
              changes: 'Restructured FOR CLAUDE: TL;DR box, checkboxes, inline reminders. Dream lab seeded with protocol-learning discussion.' },
            { num: 28, name: 'dreamy-whale', scope: 'LAB', 
              quote: 'add a new playground / whiteboard mode -- a place where we can talk and dream. that I can get to somehow fun.',
              changes: 'Dream mode: swirly portal button → full whiteboard. Notes + threads. Saved to localStorage, syncs to feedbackNotes.' },
            { num: 27, name: 'wise-crow', scope: 'LAB + PROTOCOL', 
              quote: 'the version is still fading out -- is that an accidental experiment feature? ... please update the protocol to look for patterns like this to help us get unstuck',
              changes: 'Fixed: parent CSS -webkit-text-fill-color was cascading. Added WHEN STUCK pattern to protocol.' },
            { num: 26, name: 'stubborn-panda', scope: 'LAB', 
              quote: 'lets do something different for version -- the bug seems too nuanced to fix so instead -- lets keep ouch wow lab as is but make a new version tool',
              changes: 'New version badge + history panel. Removed broken animation. Celebrating the journey.' },
            { num: 25, name: 'bright-otter', scope: 'LAB', 
              quote: 'my comments could be a much larger space... a really cool lab space to talk in and design before slamming it home',
              changes: 'Design space in protocol panel. Wired to feedbackNotes.' },
            { num: 24, name: 'gentle-moose', scope: 'LAB', 
              quote: 'please update the lab ux to show the changelog -- and what I said to get that',
              changes: 'Added "this turn" and "changelog" tabs to protocol panel.' },
            { num: 23, name: 'clever-fox', scope: 'PROTOCOL + LAB', 
              quote: 'how might we learn what you know from context and move that over to the tool',
              changes: 'Context archaeology. FOR CLAUDE, ARCHITECTURE, STATE, PHILOSOPHY sections.' },
            { num: 22, name: 'eager-walrus', scope: 'LAB', 
              quote: 'Changelog: owl_19 → owl_22',
              changes: 'Version name darker. Chat cards roomier. VERIFICATION section.' },
            { num: 21, name: 'mellow-giraffe', scope: 'LAB', 
              quote: '(compressed changelog)',
              changes: 'localStorage version tracking. Logo in overlay. Random per-person colors.' },
            { num: 20, name: 'stubborn-pickle', scope: 'LAB', 
              quote: '(compressed changelog)',
              changes: 'People dot colors cycle (10n+N). Version name visibility.' },
            { num: 19, name: 'patient-umbrella', scope: 'LAB', 
              quote: '(from earlier session)',
              changes: 'version-new class auto-removes after animation.' },
            { num: 18, name: 'wobbly-teapot', scope: 'LAB', 
              quote: '(from earlier session)',
              changes: 'Version dot requires .version-new class.' },
            { num: 17, name: 'curious-hammock', scope: 'PROTOCOL', 
              quote: '(from earlier session)',
              changes: 'Clarified: owl IS the lab, powers reflection-as-a-service.' },
        ];
        
        function toggleVersionHistory() {
            const panel = document.getElementById('versionHistoryPanel');
            const backdrop = document.getElementById('versionHistoryBackdrop');
            const isShowing = panel.classList.toggle('show');
            backdrop.classList.toggle('show', isShowing);
            if (isShowing) {
                renderVersionHistory();
            }
        }
        
        function renderVersionHistory() {
            const list = document.getElementById('versionHistoryList');
            if (!list) return;
            
            list.innerHTML = versionHistory.map(v => `
                <div class="version-entry">
                    <div class="version-entry-num">${v.num}</div>
                    <div class="version-entry-content">
                        <div class="version-entry-name">${v.name}</div>
                        <div class="version-entry-scope">${v.scope}</div>
                        ${v.quote ? `<div class="version-entry-quote">"${v.quote}"</div>` : ''}
                        <div class="version-entry-changes">${v.changes}</div>
                        <div class="version-entry-cost">
                            <div class="version-cost-item"><span class="cost-dot you"></span> your words</div>
                            <div class="version-cost-item"><span class="cost-dot claude"></span> claude's code</div>
                        </div>
                    </div>
                </div>
            `).join('');
        }
        
        // ============ API THREAD - talk to Claude directly ============
        let currentApiThread = null;
        
        function openApiThread(thread) {
            currentApiThread = thread;
            const panel = document.getElementById('apiThreadPanel');
            const noteText = document.getElementById('apiNoteText');
            const responseSection = document.getElementById('apiResponseSection');
            const responseContent = document.getElementById('apiResponseContent');
            const keySection = document.getElementById('apiKeySection');
            const keyInput = document.getElementById('apiKeyInput');
            
            // Show the note
            noteText.textContent = thread.note?.text || 'No note text';
            
            // Check for stored API key
            const storedKey = sessionStorage.getItem('anthropic-api-key');
            if (storedKey) {
                keyInput.value = storedKey;
                keySection.style.display = 'none';
            } else {
                keySection.style.display = 'block';
            }
            
            // Reset response
            responseSection.style.display = 'none';
            responseContent.textContent = '';
            setApiStatus('ready');
            
            panel.classList.add('show');
        }
        
        function closeApiThread() {
            document.getElementById('apiThreadPanel').classList.remove('show');
            currentApiThread = null;
        }
        
        function setApiStatus(status) {
            const el = document.getElementById('apiStatus');
            el.className = 'api-status ' + status;
            el.textContent = status;
        }
        
        async function sendApiThread() {
            if (!currentApiThread) return;
            
            // Get or store API key
            let apiKey = sessionStorage.getItem('anthropic-api-key');
            const keyInput = document.getElementById('apiKeyInput');
            
            if (!apiKey && keyInput.value) {
                apiKey = keyInput.value.trim();
                sessionStorage.setItem('anthropic-api-key', apiKey);
                document.getElementById('apiKeySection').style.display = 'none';
            }
            
            if (!apiKey) {
                alert('Please enter your Anthropic API key');
                return;
            }
            
            const sendBtn = document.getElementById('apiSendBtn');
            sendBtn.disabled = true;
            setApiStatus('sending');
            
            // Build context
            const context = buildThreadContext(currentApiThread);
            
            try {
                const response = await fetch('https://api.anthropic.com/v1/messages', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-api-key': apiKey,
                        'anthropic-version': '2023-06-01',
                        'anthropic-dangerous-direct-browser-access': 'true'
                    },
                    body: JSON.stringify({
                        model: 'claude-sonnet-4-20250514',
                        max_tokens: 4096,
                        messages: [{
                            role: 'user',
                            content: context
                        }]
                    })
                });
                
                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.error?.message || 'API request failed');
                }
                
                const data = await response.json();
                const content = data.content[0]?.text || 'No response';
                
                // Show response
                setApiStatus('ready');
                document.getElementById('apiResponseSection').style.display = 'block';
                document.getElementById('apiResponseContent').textContent = content;
                
                // Update thread status
                currentApiThread.status = 'awaiting_user';
                currentApiThread.response = content;
                currentApiThread.respondedAt = new Date().toISOString();
                saveTrackerState();
                renderTracker();
                
            } catch (error) {
                setApiStatus('error');
                document.getElementById('apiResponseSection').style.display = 'block';
                document.getElementById('apiResponseContent').textContent = 'Error: ' + error.message;
            } finally {
                sendBtn.disabled = false;
            }
        }
        
        function buildThreadContext(thread) {
            // Delegate to the main buildThreadContext in API section
            // This is a stub - the real one is defined later
            return `Thread: ${thread.note?.text || 'no text'}`;
        }
        
        // NOTE: Real buildThreadContext is defined in API THREAD SYSTEM section
        
        // Add API button to thread actions in notes panel
        function addApiButtonToThread(threadEl, thread) {
            const actionsEl = threadEl.querySelector('.thread-actions');
            if (actionsEl && thread.status === 'needs_claude') {
                const apiBtn = document.createElement('button');
                apiBtn.className = 'thread-action';
                apiBtn.textContent = '⚡ api';
                apiBtn.title = 'Send to Claude via API';
                apiBtn.onclick = (e) => {
                    e.stopPropagation();
                    openApiThread(thread);
                };
                actionsEl.insertBefore(apiBtn, actionsEl.firstChild);
            }
        }
        
        function toggleUsecaseEdit() {
            document.getElementById('labUsecase').classList.toggle('open');
        }
        
        function updateLabPhase() {
            document.body.dataset.labPhase = state.phase;
        }
        
        /* ═══════════════════════════════════════════════════════════════════════════
           TOGETHER PLAYGROUND
           Experiment: Feel presence while waiting
           Colored dots follow cursors, can bump each other
           ═══════════════════════════════════════════════════════════════════════════ */
        
        const togetherState = {
            canvas: null,
            ctx: null,
            you: { x: 0, y: 0, vx: 0, vy: 0, color: null, targetX: 0, targetY: 0, radius: 16 }, // color set from Store
            active: false,
            animFrame: null,
            // Magnetic pull
            pulling: false,
            pullX: 0,
            pullY: 0,
            pullStrength: 0,
            // Stillness tracking
            lastMoveX: 0,
            lastMoveY: 0,
            stillness: 0,  // increases when not moving
            // Color options — use the full palette
            colors: peopleColors,
            colorIndex: 0,
            // Collision sparks
            sparks: [],
            // Bleed from collisions (others' influence on you)
            bleedColor: null,
            bleedAmount: 0
        };
        
        // Sync canvas players with Store.dots (unified source of truth)
        // This bridges the data layer to the visual layer
        let _syncLogCounter = 0;
        function syncPlaygroundWithPeople() {
            const allDots = Store.dots ? Store.dots.getAll() : {};
            
            // Build set of current Store dot IDs (excluding me)
            const storeIds = new Set(Object.keys(allDots).filter(id => id !== Store.myId));
            
            // Log every 60 frames (~1 second)
            _syncLogCounter++;
            const shouldLog = _syncLogCounter % 60 === 0;
            
            if (shouldLog && storeIds.size > 0) {
                console.log('[sync] Store.dots has', storeIds.size, 'others:', [...storeIds].map(id => id.slice(-6)));
                console.log('[sync] session.people has', session.people.length, 'entries');
            }
            
            // Remove people not in Store anymore
            session.people = session.people.filter(person => {
                if (!person.storeId) return false; // Old non-store person, remove
                return storeIds.has(person.storeId);
            });
            
            // Add/update people from Store
            storeIds.forEach(id => {
                const dot = allDots[id];
                let person = session.people.find(p => p.storeId === id);
                
                if (!person) {
                    // New dot — create person entry
                    console.log('[sync] Creating session.people entry for:', id.slice(-6));
                    person = {
                        id: 'store-' + id,
                        storeId: id,
                        state: dot.state || 'here',
                        canvasInit: false
                    };
                    session.people.push(person);
                }
                
                // Sync state and color from Store — small lives
                person.state = dot.state || 'here';
                person.storeColor = dot.color;
                person.isSimulated = dot._isSimulated === true;  // Track if this is a sim dot
                
                // Initialize canvas properties if needed
                if (!person.canvasInit) {
                    person.canvasX = dot.x || Math.random() * (window.innerWidth - 100) + 50;
                    person.canvasY = dot.y || Math.random() * (window.innerHeight - 200) + 100;
                    person.canvasVx = 0;
                    person.canvasVy = 0;
                    person.canvasTargetX = dot.x || person.canvasX;
                    person.canvasTargetY = dot.y || person.canvasY;
                    person.canvasRadius = 12 + Math.random() * 8;
                    person.canvasInit = true;
                }
                
                // Update target from Store — canvas will smoothly move toward this
                person.canvasTargetX = dot.x || person.canvasTargetX;
                person.canvasTargetY = dot.y || person.canvasTargetY;
            });
        }
        
        // Override getPersonColor to use Store color
        function getPersonColor(personId) {
            // Find person by id
            const person = session.people.find(p => p.id === personId || p.storeId === personId);
            if (person && person.storeColor) {
                return person.storeColor;
            }
            // Fallback to hash-based palette selection
            let hash = 0;
            const idStr = String(personId);
            for (let i = 0; i < idStr.length; i++) {
                hash = idStr.charCodeAt(i) + ((hash << 5) - hash);
            }
            return peopleColors[Math.abs(hash) % peopleColors.length];
        }
        
        function initTogetherPlayground() {
            const canvas = document.getElementById('togetherCanvas');
            if (!canvas) return;
            
            togetherState.canvas = canvas;
            togetherState.ctx = canvas.getContext('2d');
            
            // Size canvas
            function resize() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            resize();
            window.addEventListener('resize', resize);
            
            // Track mouse
            document.addEventListener('mousemove', (e) => {
                if (!togetherState.active) {
                    togetherState.active = true;
                    document.getElementById('togetherPlayground')?.classList.add('active');
                }
                
                // Check if actually moving (not just micro-jitter)
                const dx = e.clientX - togetherState.lastMoveX;
                const dy = e.clientY - togetherState.lastMoveY;
                const moved = Math.sqrt(dx * dx + dy * dy);
                
                if (moved > 3) {
                    // Real movement — reset stillness
                    togetherState.stillness = 0;
                    togetherState.lastMoveX = e.clientX;
                    togetherState.lastMoveY = e.clientY;
                }
                
                togetherState.you.targetX = e.clientX;
                togetherState.you.targetY = e.clientY;
                
                // Update Store for live mode sync
                Store.updatePosition(e.clientX, e.clientY);
            });
            
            // ═══ MAGNETIC PULL ═══
            // Hold mouse = pull dots toward you
            
            canvas.addEventListener('mousedown', (e) => {
                if (e.button === 0) {
                    togetherState.pulling = true;
                    togetherState.pullStrength = 0;
                    if (typeof logDebugEvent === 'function') {
                        logDebugEvent('○', 'pullStart', '', { stillness: Math.round(togetherState.stillness) });
                    }
                }
            });
            
            canvas.addEventListener('mouseup', (e) => {
                if (togetherState.pulling) {
                    if (typeof logDebugEvent === 'function') {
                        logDebugEvent('○', 'pullEnd', '', { stillness: Math.round(togetherState.stillness) });
                    }
                }
                togetherState.pulling = false;
                togetherState.pullStrength = 0;
            });
            
            canvas.addEventListener('mouseleave', () => {
                if (togetherState.pulling) {
                    if (typeof logDebugEvent === 'function') {
                        logDebugEvent('○', 'pullEnd', 'left canvas', { stillness: Math.round(togetherState.stillness) });
                    }
                }
                togetherState.pulling = false;
                togetherState.pullStrength = 0;
            });
            
            // Right-click = swap your color (ouch ↔ wow) — resets progress
            canvas.addEventListener('contextmenu', (e) => {
                e.preventDefault();
                const oldColor = togetherState.you.color;
                togetherState.colorIndex = (togetherState.colorIndex + 1) % togetherState.colors.length;
                togetherState.you.color = togetherState.colors[togetherState.colorIndex];
                // Swapping resets your earned reach
                togetherState.stillness = 0;
                
                // Log local color swap event
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('○', 'colorSwap', oldColor.slice(0,7) + ' → ' + togetherState.you.color.slice(0,7), { 
                        from: oldColor, 
                        to: togetherState.you.color,
                        stillnessReset: true
                    });
                }
                
                // Sync color to Store and Firebase
                Store.myColor = togetherState.you.color;
                if (Store.mode === 'live' && Store.dots._firebaseRef && Store.myId) {
                    Store.dots._firebaseRef.child(Store.myId).update({ color: Store.myColor });
                    console.log('[color] Right-click → Firebase:', Store.myColor.slice(0,7));
                    if (typeof logDebugEvent === 'function') {
                        logDebugEvent('→', 'myColor', Store.myColor.slice(0,7), { id: Store.myId.slice(-8), color: Store.myColor });
                    }
                }
                // Also update local Store.dots
                const myDot = Store.dots.get(Store.myId);
                if (myDot) myDot.color = Store.myColor;
            });
            
            // Initialize you
            togetherState.you.x = window.innerWidth / 2;
            togetherState.you.y = window.innerHeight / 2;
            togetherState.you.targetX = togetherState.you.x;
            togetherState.you.targetY = togetherState.you.y;
            togetherState.you.radius = 16;
            
            // Store.myColor is source of truth — togetherState reads from it
            // Validate stored color is from palette
            if (Store.myColor && !peopleColors.includes(Store.myColor)) {
                Store.myColor = null;
            }
            if (!Store.myColor) Store.myColor = getRandomPaletteColor();
            togetherState.you.color = Store.myColor;
            
            // Sync colorIndex to match current color position in palette
            const currentColorIdx = peopleColors.indexOf(Store.myColor);
            togetherState.colorIndex = currentColorIdx >= 0 ? currentColorIdx : 0;
            
            // Sync position to Store (so debug panel shows correct values)
            Store.myX = togetherState.you.x;
            Store.myY = togetherState.you.y;
            
            // SimulationBackend seeds dots into Store.dots
            // syncPlaygroundWithPeople() will pull them into session.people for canvas
            
            // Sync with Store.dots (unified source)
            syncPlaygroundWithPeople();
            animatePlayground();
        }
        
        // NOTE: seedInitialPeople() removed — SimulationBackend handles seeding now
        
        function animatePlayground() {
            const { ctx, canvas, you } = togetherState;
            if (!ctx || !canvas) return;
            
            // Respect pause
            if (labPaused) {
                togetherState.animFrame = requestAnimationFrame(animatePlayground);
                return;
            }
            
            // Sync in case new people joined
            syncPlaygroundWithPeople();
            
            // Throttled UI updates (every ~30 frames ≈ 500ms)
            if (!togetherState._uiFrame) togetherState._uiFrame = 0;
            togetherState._uiFrame++;
            if (togetherState._uiFrame % 30 === 0) {
                renderWaitingRoom();
            }
            
            // Clear
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // ═══ MAGNETIC PULL ═══
            // When pulling, dots get attracted toward you
            // Range increases the longer you stay still
            if (togetherState.pulling) {
                // Gradually increase pull strength (ramps up)
                togetherState.pullStrength = Math.min(togetherState.pullStrength + 0.02, 1);
                // Stillness grows while pulling and not moving — slow, meditative
                togetherState.stillness = Math.min(togetherState.stillness + 0.15, 1200); // caps at ~2 minutes
            } else {
                // Stillness decays when not pulling
                togetherState.stillness = Math.max(togetherState.stillness - 2, 0);
            }
            
            // Pull range: base 100, up to 2000 when fully still (wide, earned slowly)
            const pullRange = 100 + (togetherState.stillness / 1200) * 1900;
            
            // Pulse timing (slow breath)
            togetherState.pulseTime = (togetherState.pulseTime || 0) + 0.02;
            
            // Update you (smooth follow)
            you.vx += (you.targetX - you.x) * 0.1;
            you.vy += (you.targetY - you.y) * 0.1;
            you.vx *= 0.8;
            you.vy *= 0.8;
            you.x += you.vx;
            you.y += you.vy;
            
            // Update others — SMALL LIVES: state affects movement
            // Get global demeanor modifier from SimulationBackend
            const demeanorMod = (SimulationBackend && SimulationBackend._demeanorMod) || 1.0;
            
            session.people.forEach(person => {
                if (!person.canvasInit) return;
                
                // ═══ PER-FRAME WANDERING ═══
                // Only wander for simulated dots — live dots should stay where Firebase says
                // This keeps real users calm when they're still
                if (person.isSimulated) {
                    let localWander = 0.03;  // base 3% chance per frame (more active)
                    if (person.state === 'still') localWander = 0.005;
                    else if (person.state === 'away') localWander = 0.015;
                    else if (person.state === 'disconnected') localWander = 0;
                    else if (person.state === 'distracted') localWander = 0.06;
                    else if (person.state === 'working') localWander = 0.02;
                    
                    // Apply demeanor modifier
                    localWander *= demeanorMod;
                    
                    if (localWander > 0 && Math.random() < localWander) {
                        // Local target shift — scaled by demeanor
                        const wanderDist = 200 * demeanorMod;
                        person.canvasTargetX += (Math.random() - 0.5) * wanderDist;
                        person.canvasTargetY += (Math.random() - 0.5) * wanderDist;
                        // Keep in bounds
                        person.canvasTargetX = Math.max(50, Math.min(canvas.width - 50, person.canvasTargetX));
                        person.canvasTargetY = Math.max(50, Math.min(canvas.height - 50, person.canvasTargetY));
                    }
                }
                
                // ═══ PULL TOWARD YOU ═══
                if (togetherState.pulling && togetherState.pullStrength > 0) {
                    const dx = you.x - person.canvasX;
                    const dy = you.y - person.canvasY;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    
                    if (dist > 40 && dist < pullRange) { // Within range, not too close
                        // Stronger pull when closer, weaker at edge of range
                        const rangeFactor = 1 - (dist / pullRange);
                        const pullForce = togetherState.pullStrength * 0.08 * rangeFactor;
                        person.canvasVx += (dx / dist) * pullForce;
                        person.canvasVy += (dy / dist) * pullForce;
                        
                        // ═══ COLOR INFLUENCE ═══
                        // Shift their color toward yours based on pull strength and proximity
                        if (!person.colorInfluence) person.colorInfluence = 0;
                        const oldInfluence = person.colorInfluence;
                        person.colorInfluence = Math.min(person.colorInfluence + rangeFactor * 0.01, 1);
                        person.influenceColor = togetherState.you.color;
                        
                        // When influence crosses threshold, write new color to Firebase
                        // Everyone will see this change
                        if (person.colorInfluence >= 0.3 && oldInfluence < 0.3 && person.storeId) {
                            const originalColor = person.storeColor || getPersonColor(person.id);
                            const newColor = blendColors(originalColor, person.influenceColor, 0.5);
                            
                            // Write to Firebase - this syncs to all users
                            if (Store.mode === 'live' && Store.dots._firebaseRef) {
                                Store.dots._firebaseRef.child(person.storeId).update({ color: newColor });
                                console.log('[color] → Firebase:', person.storeId.slice(-6), originalColor.slice(0,7), '→', newColor.slice(0,7));
                                if (typeof logDebugEvent === 'function') {
                                    logDebugEvent('→', 'theirColor', person.storeId.slice(-6) + ' ' + newColor.slice(0,7), { 
                                        id: person.storeId, 
                                        from: originalColor, 
                                        to: newColor 
                                    });
                                }
                            } else {
                                // Demo mode: just update Store.dots locally
                                Store.dots.set(person.storeId, { color: newColor });
                                console.log('[color] → local:', person.storeId.slice(-6), originalColor.slice(0,7), '→', newColor.slice(0,7));
                            }
                            
                            // Reset influence - the blend is now in the base color
                            // This prevents double-blending
                            person.colorInfluence = 0;
                            person.influenceColor = null;
                            person.storeColor = newColor;  // Update local immediately too
                        }
                    }
                }
                
                // Color influence decays when not being pulled
                if (person.colorInfluence && person.colorInfluence > 0) {
                    if (!togetherState.pulling) {
                        person.colorInfluence = Math.max(person.colorInfluence - 0.005, 0);
                    }
                }
                
                // ═══ STATE-BASED PHYSICS ═══
                // Different states = different feel (more active overall)
                let accel = 0.04;   // faster response
                let friction = 0.92;
                let jitter = 0.03;  // more micro-movement
                
                if (person.state === 'still') {
                    accel = 0.01;       // slow but not frozen
                    friction = 0.96;
                    jitter = 0.005;
                } else if (person.state === 'away') {
                    accel = 0.02;
                    friction = 0.94;
                    jitter = 0.015;
                } else if (person.state === 'disconnected') {
                    accel = 0;          // frozen
                    friction = 0.99;
                    jitter = 0;
                } else if (person.state === 'distracted') {
                    accel = 0.06;       // very snappy, erratic
                    friction = 0.88;
                    jitter = 0.06;
                } else if (person.state === 'working') {
                    accel = 0.03;
                    friction = 0.93;
                    jitter = 0.02;
                }
                
                // Move toward target — state-modified physics
                person.canvasVx += (person.canvasTargetX - person.canvasX) * accel;
                person.canvasVy += (person.canvasTargetY - person.canvasY) * accel;
                
                // Random jitter — only for simulated dots, live users stay calm
                if (person.isSimulated && jitter > 0) {
                    person.canvasVx += (Math.random() - 0.5) * jitter * 3 * demeanorMod;
                    person.canvasVy += (Math.random() - 0.5) * jitter * 3 * demeanorMod;
                }
                
                person.canvasVx *= friction;
                person.canvasVy *= friction;
                person.canvasX += person.canvasVx;
                person.canvasY += person.canvasVy;
            });
            
            // Build array for collision detection
            // You are heavier when pulling — stillness gives you mass
            const youMass = togetherState.pulling ? 1 + (togetherState.stillness / 1200) * 4 : 1; // up to 5x heavier
            
            const allDots = [
                { x: you.x, y: you.y, vx: you.vx, vy: you.vy, radius: you.radius, ref: you, isYou: true, mass: youMass },
                ...session.people.filter(p => p.canvasInit).map(p => ({
                    x: p.canvasX, y: p.canvasY, vx: p.canvasVx, vy: p.canvasVy, 
                    radius: p.canvasRadius, ref: p, isPerson: true, mass: 1
                }))
            ];
            
            // Check collisions (bump!)
            for (let i = 0; i < allDots.length; i++) {
                for (let j = i + 1; j < allDots.length; j++) {
                    const a = allDots[i];
                    const b = allDots[j];
                    const dx = b.x - a.x;
                    const dy = b.y - a.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    const minDist = (a.radius || 16) + (b.radius || 16);
                    
                    if (dist < minDist && dist > 0) {
                        // Push apart — weighted by mass
                        const overlap = (minDist - dist) / 2;
                        const nx = dx / dist;
                        const ny = dy / dist;
                        const totalMass = a.mass + b.mass;
                        const aRatio = b.mass / totalMass; // heavier = moves less
                        const bRatio = a.mass / totalMass;
                        
                        // ═══ SPARK ON COLLISION WITH YOU ═══
                        if (a.isYou || b.isYou) {
                            const other = a.isYou ? b : a;
                            const otherPerson = other.ref;
                            
                            // Create spark at collision point
                            const sparkX = (a.x + b.x) / 2;
                            const sparkY = (a.y + b.y) / 2;
                            const impactStrength = Math.sqrt(
                                Math.pow(a.vx - b.vx, 2) + Math.pow(a.vy - b.vy, 2)
                            );
                            
                            // Only spark on real impacts
                            if (impactStrength > 0.5) {
                                // Log collision event
                                if (typeof logDebugEvent === 'function') {
                                    logDebugEvent('○', 'collision', otherPerson.storeId?.slice(-6) || otherPerson.id, { 
                                        with: otherPerson.storeId || otherPerson.id,
                                        impact: impactStrength.toFixed(2),
                                        yourColor: togetherState.you.color,
                                        theirColor: getPersonColor(otherPerson.id)
                                    });
                                }
                                
                                // Spark particles
                                for (let s = 0; s < 5; s++) {
                                    const angle = Math.random() * Math.PI * 2;
                                    const speed = 1 + Math.random() * 3;
                                    togetherState.sparks.push({
                                        x: sparkX,
                                        y: sparkY,
                                        vx: Math.cos(angle) * speed,
                                        vy: Math.sin(angle) * speed,
                                        color: togetherState.you.color,
                                        alpha: 1,
                                        radius: 2 + Math.random() * 2
                                    });
                                }
                                
                                // ═══ COLOR EXCHANGE ═══
                                // Your color bleeds onto them (more if you're still)
                                const stillnessFactor = togetherState.pulling ? (togetherState.stillness / 1200) : 0;
                                const yourInfluence = 0.1 + stillnessFactor * 0.3; // 10-40% influence
                                
                                if (!otherPerson.colorInfluence) otherPerson.colorInfluence = 0;
                                otherPerson.colorInfluence = Math.min(otherPerson.colorInfluence + yourInfluence, 1);
                                otherPerson.influenceColor = togetherState.you.color;
                                
                                // Their color bleeds onto you — just a little
                                const theirColor = getPersonColor(otherPerson.id);
                                togetherState.bleedColor = theirColor;
                                togetherState.bleedAmount = Math.min(togetherState.bleedAmount + 0.05, 0.2); // max 20%
                            }
                        }
                        
                        // Update actual positions — weighted by mass
                        if (a.isPerson) {
                            a.ref.canvasX -= nx * overlap * aRatio * 2;
                            a.ref.canvasY -= ny * overlap * aRatio * 2;
                            a.ref.canvasVx -= nx * 0.5 * aRatio * 2;
                            a.ref.canvasVy -= ny * 0.5 * aRatio * 2;
                        } else if (a.isYou) {
                            a.ref.x -= nx * overlap * aRatio * 2;
                            a.ref.y -= ny * overlap * aRatio * 2;
                            a.ref.vx -= nx * 0.5 * aRatio * 2;
                            a.ref.vy -= ny * 0.5 * aRatio * 2;
                        }
                        
                        if (b.isPerson) {
                            b.ref.canvasX += nx * overlap * bRatio * 2;
                            b.ref.canvasY += ny * overlap * bRatio * 2;
                            b.ref.canvasVx += nx * 0.5 * bRatio * 2;
                            b.ref.canvasVy += ny * 0.5 * bRatio * 2;
                        } else if (b.isYou) {
                            b.ref.x += nx * overlap * bRatio * 2;
                            b.ref.y += ny * overlap * bRatio * 2;
                            b.ref.vx += nx * 0.5 * bRatio * 2;
                            b.ref.vy += ny * 0.5 * bRatio * 2;
                        }
                    }
                }
            }
            
            // Bleed amount decays slowly
            if (togetherState.bleedAmount > 0) {
                togetherState.bleedAmount = Math.max(togetherState.bleedAmount - 0.002, 0);
            }
            
            // Draw others — SMALL LIVES: state affects appearance
            session.people.forEach(person => {
                if (!person.canvasInit) return;
                
                let color = getPersonColor(person.id);
                
                // ═══ BLEND COLOR WITH INFLUENCE ═══
                if (person.colorInfluence && person.colorInfluence > 0 && person.influenceColor) {
                    color = blendColors(color, person.influenceColor, person.colorInfluence);
                }
                
                // State affects opacity
                let opacity = '60';  // default semi-transparent
                if (person.state === 'disconnected') opacity = '25';
                else if (person.state === 'away') opacity = '40';
                else if (person.state === 'still') opacity = '50';
                else if (person.state === 'distracted') opacity = '70';
                
                // Main circle
                ctx.beginPath();
                ctx.arc(person.canvasX, person.canvasY, person.canvasRadius, 0, Math.PI * 2);
                ctx.fillStyle = color + opacity;
                ctx.fill();
                
                // Subtle glow — smaller for still/disconnected
                let glowSize = 4;
                if (person.state === 'disconnected') glowSize = 1;
                else if (person.state === 'still') glowSize = 2;
                else if (person.state === 'distracted') glowSize = 6;
                
                ctx.beginPath();
                ctx.arc(person.canvasX, person.canvasY, person.canvasRadius + glowSize, 0, Math.PI * 2);
                ctx.fillStyle = color + '20';
                ctx.fill();
            });
            
            // ═══ PULL INDICATOR ═══
            // Show pulsing range that grows with stillness — meditative
            if (togetherState.pulling && togetherState.pullStrength > 0) {
                const rangeRadius = 100 + (togetherState.stillness / 1200) * 1900;
                const pulse = Math.sin(togetherState.pulseTime) * 0.5 + 0.5; // 0-1 breathing
                
                // Use potentially blended color for indicators
                let indicatorColor = you.color;
                if (togetherState.bleedAmount > 0 && togetherState.bleedColor) {
                    indicatorColor = blendColors(you.color, togetherState.bleedColor, togetherState.bleedAmount);
                }
                
                // Outer range — your potential reach
                ctx.beginPath();
                ctx.arc(you.x, you.y, rangeRadius, 0, Math.PI * 2);
                ctx.strokeStyle = indicatorColor + '20';
                ctx.lineWidth = 1;
                ctx.stroke();
                
                // Pulsing rings — breathing outward
                const numRings = 3;
                for (let i = 0; i < numRings; i++) {
                    const ringPhase = (togetherState.pulseTime * 0.5 + i * 0.33) % 1;
                    const ringRadius = you.radius + 10 + ringPhase * (rangeRadius - you.radius - 10);
                    const ringAlpha = (1 - ringPhase) * 0.3;
                    
                    ctx.beginPath();
                    ctx.arc(you.x, you.y, ringRadius, 0, Math.PI * 2);
                    ctx.strokeStyle = indicatorColor + Math.floor(ringAlpha * 255).toString(16).padStart(2, '0');
                    ctx.lineWidth = 2 - ringPhase * 1.5;
                    ctx.stroke();
                }
                
                // Inner glow pulses gently
                const glowPulse = you.radius + 15 + pulse * 10;
                ctx.beginPath();
                ctx.arc(you.x, you.y, glowPulse, 0, Math.PI * 2);
                ctx.fillStyle = indicatorColor + '25';
                ctx.fill();
            }
            
            // ═══ DRAW SPARKS ═══
            togetherState.sparks.forEach(spark => {
                ctx.beginPath();
                ctx.arc(spark.x, spark.y, spark.radius, 0, Math.PI * 2);
                ctx.fillStyle = spark.color + Math.floor(spark.alpha * 255).toString(16).padStart(2, '0');
                ctx.fill();
            });
            
            // Update sparks
            togetherState.sparks = togetherState.sparks.filter(spark => {
                spark.x += spark.vx;
                spark.y += spark.vy;
                spark.vx *= 0.95;
                spark.vy *= 0.95;
                spark.alpha -= 0.03;
                spark.radius *= 0.97;
                return spark.alpha > 0;
            });
            
            // Draw you (on top)
            // Base color, potentially blended with bleed
            let youColor = you.color;
            if (togetherState.bleedAmount > 0 && togetherState.bleedColor) {
                youColor = blendColors(you.color, togetherState.bleedColor, togetherState.bleedAmount);
            }
            
            ctx.beginPath();
            ctx.arc(you.x, you.y, you.radius, 0, Math.PI * 2);
            ctx.fillStyle = youColor;
            ctx.fill();
            
            // Bleed ring — shows the foreign color bleeding in
            if (togetherState.bleedAmount > 0.02 && togetherState.bleedColor) {
                ctx.beginPath();
                ctx.arc(you.x, you.y, you.radius + 3, 0, Math.PI * 2);
                ctx.strokeStyle = togetherState.bleedColor + Math.floor(togetherState.bleedAmount * 200).toString(16).padStart(2, '0');
                ctx.lineWidth = 2;
                ctx.stroke();
            }
            
            // Your glow — subtle when not pulling
            if (!togetherState.pulling) {
                ctx.beginPath();
                ctx.arc(you.x, you.y, you.radius + 6, 0, Math.PI * 2);
                ctx.fillStyle = youColor + '30';
                ctx.fill();
            }
            
            togetherState.animFrame = requestAnimationFrame(animatePlayground);
        }
        
        // Start when waiting room is visible
        document.addEventListener('DOMContentLoaded', () => {
            // Check if we're on waiting screen
            setTimeout(initTogetherPlayground, 500);
        });
        
        // ============ EXPERIMENTS SYSTEM ============
        // RULE: Only RISKY experiments default to FALSE (they can break their own off-switch)
        // Everything else can default TRUE to reduce friction.
        // "risky" = affects lab-controls, experiments-panel, journey-rail, or other lab chrome
        // "phases" = which journey phases this experiment affects (for badge display)
        // "origin" = the journey this experiment came from (being → note → refinement → experiment)
        /* ═══════════════════════════════════════════════════════════════════════════
           GUIDE FRAMINGS
           Questions that help elicit context before experimenting.
           Track which ones work over time.
           ═══════════════════════════════════════════════════════════════════════════ */
        
        const guideFramings = {
            // What we need to land on before experimenting
            contextChecklist: {
                feeling: "What's the feeling you're after?",
                mechanic: "What's the core interaction?",
                container: "Where/when does this happen?",
                surprise: "What's the unexpected twist?"
            },
            
            // Questions that pull the right info
            elicitations: {
                smallest: "What's the smallest version where you'd feel that?",
                together: "What would make people feel together?",
                invitation: "How might we make this feel like an invitation?",
                friction: "What's the friction we're trying to remove?",
                magic: "Where's the magic moment?",
                proof: "How would we know it's working?"
            },
            
            // Track which framings we've used and how well they worked
            usage: []
        };
        
        const experimentMeta = {
            // SHIPPED - these are proven and on by default
            hideJourneyStatus: { 
                default: true, shipped: true, affects: 'journey-rail', risky: false,
                phases: [],  // meta - doesn't affect specific steps
                desc: 'Hides progress indicators on journey steps',
                origin: {
                    being: 'The journey rail felt busy with status indicators competing with step names',
                    note: 'visual clutter on the journey rail makes it hard to focus on current step',
                    refinement: 'What if we hide the status dots? The active/past styling already shows progress',
                    experiment: 'Hide progress status indicators on journey steps'
                }
            },
            betterPrompts: { 
                default: true, shipped: true, affects: 'prompts', risky: false,
                phases: ['collect'],
                desc: 'Context-aware prompt suggestions instead of static list',
                origin: {
                    being: 'Students stared at the same prompt chips every session, stopped seeing them',
                    note: 'the prompt chips feel stale, students skip over them',
                    refinement: 'Different prompts for teacher vs student roles, cycling through sets',
                    experiment: 'Context-aware prompts that rotate and match role'
                }
            },
            timerAutoEnd: { 
                default: true, shipped: true, affects: 'timer', risky: false,
                phases: ['collect'],
                desc: 'Auto-advance to patterns when timer hits zero',
                origin: {
                    being: 'Teachers would let the timer run out then fumble to find the next button',
                    note: 'awkward pause when timer ends, flow breaks',
                    refinement: 'Auto-transition with a gentle fade, give control back if needed',
                    experiment: 'Auto-advance to patterns when timer hits zero'
                }
            },
            chatMode: { 
                default: true, shipped: true, affects: 'tracker', risky: false,
                phases: [],  // meta - doesn't affect specific steps
                desc: 'Thread-based notes panel with Claude responses',
                origin: {
                    being: 'Notes were piling up with no sense of progress or conversation',
                    note: 'I want to respond to these notes but there\'s no threading',
                    refinement: 'Each note becomes a thread that can have responses and status',
                    experiment: 'Thread-based notes with conversation flow'
                }
            },
            
            // TESTING - these are ideas we're trying
            skipWho: {
                default: false, shipped: false, affects: 'flow', risky: false,
                phases: ['plan1'],
                desc: 'Skip "who" step — assume classroom context',
                origin: {
                    being: 'Most users are teachers who always pick "classrooms"',
                    note: 'the who step feels like an unnecessary click for single-use-case users',
                    refinement: 'What if we default to classroom and let people change if needed?',
                    experiment: 'Skip who step, assume classroom context'
                }
            },
            quickConnect: {
                default: false, shipped: false, affects: 'waiting', risky: false,
                phases: ['waiting'],
                desc: 'Show QR code immediately, skip waiting room animation',
                origin: {
                    being: 'Teachers were anxious during the waiting animation, wanted to see QR right away',
                    note: 'waiting room animation delays getting students connected',
                    refinement: 'Jump straight to the QR code, show animation in the background',
                    experiment: 'Show QR code immediately, skip animation'
                }
            },
            anonymousDefault: {
                default: false, shipped: false, affects: 'collect', risky: false,
                phases: ['collect'],
                desc: 'Default to anonymous signals (no names shown)',
                origin: {
                    being: 'Students hesitated to share when they thought teacher might see their name',
                    note: 'participation drops when students feel watched',
                    refinement: 'Make anonymous the default, let teacher opt-in to names if needed',
                    experiment: 'Default to anonymous signals'
                }
            },
            clusterPatterns: {
                default: false, shipped: false, affects: 'patterns', risky: false,
                phases: ['patterns'],
                desc: 'AI clusters similar signals into themes automatically',
                origin: {
                    being: 'Teachers overwhelmed by 30+ raw signals, couldn\'t see patterns',
                    note: 'too many signals to process, need help finding themes',
                    refinement: 'Auto-cluster similar signals, show themes with representative quotes',
                    experiment: 'AI clusters signals into themes automatically'
                }
            },
            suggestExperiments: {
                default: false, shipped: false, affects: 'experiment', risky: false,
                phases: ['experiment'],
                desc: 'AI suggests 2-week experiments based on patterns',
                origin: {
                    being: 'Teachers saw the patterns but froze when asked what to try',
                    note: 'the blank experiment field is intimidating',
                    refinement: 'Offer 2-3 concrete suggestions based on the themes that emerged',
                    experiment: 'AI suggests experiments based on patterns'
                }
            },
            commitReminders: {
                default: false, shipped: false, affects: 'commit', risky: false,
                phases: ['commit'],
                desc: 'Schedule follow-up reminder for commitment check-in',
                origin: {
                    being: 'Teachers committed to experiments then forgot to check back in 2 weeks',
                    note: 'experiments disappear into the void after commit',
                    refinement: 'Send a reminder email/notification when it\'s time to check in',
                    experiment: 'Schedule 2-week follow-up reminder'
                }
            }
        };
        
        // Build experiments object from metadata defaults
        const experiments = {};
        Object.keys(experimentMeta).forEach(key => {
            experiments[key] = experimentMeta[key].default;
        });
        
        // Load from localStorage
        const EXPERIMENTS_KEY = 'ouch-wow-experiments';
        const savedExp = JSON.parse(localStorage.getItem(EXPERIMENTS_KEY) || '{}');
        Object.assign(experiments, savedExp);
        
        // ═══ EMERGENCY ESCAPE HATCH ═══
        // URL param: ?exp=reset (turns all experiments OFF, clears localStorage)
        // URL param: ?exp=off (turns risky experiments OFF for this session)
        // Keyboard: Escape key (when in lab mode) to disable risky experiments
        // Keyboard: triple-click logo within 1 second to reset risky experiments
        let pendingExpToast = null;  // Deferred toast since showToastMessage may not exist yet
        
        (function setupExperimentEscapeHatch() {
            const params = new URLSearchParams(window.location.search);
            const expParam = params.get('exp');
            
            if (expParam === 'reset') {
                // Nuclear option: reset all experiments to defaults
                Object.keys(experimentMeta).forEach(key => {
                    experiments[key] = experimentMeta[key].default;
                });
                localStorage.removeItem(EXPERIMENTS_KEY);
                console.log('🧪 EXPERIMENTS RESET TO DEFAULTS');
                pendingExpToast = 'experiments reset to defaults';
            } else if (expParam === 'off') {
                // Turn off all risky experiments for this session
                Object.keys(experimentMeta).forEach(key => {
                    if (experimentMeta[key].risky) {
                        experiments[key] = false;
                    }
                });
                // Don't persist - just for this session
                console.log('🧪 RISKY EXPERIMENTS DISABLED FOR SESSION');
                pendingExpToast = 'risky experiments disabled';
            }
            
            // Escape key: disable risky experiments (only when in lab mode)
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && document.body.classList.contains('lab-mode')) {
                    // Check if any risky experiments are on
                    const riskyOn = Object.keys(experimentMeta).filter(key => 
                        experimentMeta[key].risky && experiments[key]
                    );
                    
                    if (riskyOn.length > 0) {
                        e.preventDefault();
                        riskyOn.forEach(key => experiments[key] = false);
                        localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
                        if (typeof syncExperimentButtons === 'function') syncExperimentButtons();
                        if (typeof applyExperiments === 'function') applyExperiments();
                        if (typeof showToastMessage === 'function') {
                            showToastMessage(`${riskyOn.length} risky experiment${riskyOn.length > 1 ? 's' : ''} disabled`);
                        }
                    }
                }
            });
            
            // Triple-click logo escape hatch (runs after DOM ready, so showToastMessage exists)
            let logoClicks = [];
            document.addEventListener('click', (e) => {
                if (e.target.closest('.logo')) {
                    const now = Date.now();
                    logoClicks.push(now);
                    // Keep only clicks in last 1 second
                    logoClicks = logoClicks.filter(t => now - t < 1000);
                    
                    if (logoClicks.length >= 3) {
                        // Triple click! Reset risky experiments
                        Object.keys(experimentMeta).forEach(key => {
                            if (experimentMeta[key].risky) {
                                experiments[key] = false;
                            }
                        });
                        localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
                        syncExperimentButtons();
                        applyExperiments();
                        logoClicks = [];
                        if (typeof showToastMessage === 'function') {
                            showToastMessage('risky experiments disabled');
                        }
                    }
                }
            });
        })();
        
        let allExperimentsOn = Object.values(experiments).every(v => v);
        
        function toggleExperimentsPanel() {
            // Experiments panel removed in owl_201_warm-work
            // Function kept as stub to prevent errors
        }
        
        // ============ CLEAR DATA PANEL ============
        function showClearDataPanel() {
            const panel = document.getElementById('clearDataPanel');
            panel.classList.toggle('show');
            
            // Close other panels
            document.getElementById('labExperimentsPanel')?.classList.remove('show');
            document.getElementById('labProtocolPanel')?.classList.remove('show');
            
            if (panel.classList.contains('show')) {
                updateClearDataCounts();
            }
        }
        
        function hideClearDataPanel() {
            document.getElementById('clearDataPanel').classList.remove('show');
        }
        
        function updateClearDataCounts() {
            // Thread count
            const threadCount = trackerState.threads?.length || 0;
            const threadEl = document.getElementById('clearThreadCount');
            if (threadEl) {
                threadEl.textContent = threadCount;
                threadEl.classList.toggle('has-data', threadCount > 0);
            }
            
            // Meeting notes
            const meetingNotes = localStorage.getItem('owl-meeting-notes') || '';
            const meetingEl = document.getElementById('clearMeetingStatus');
            if (meetingEl) {
                meetingEl.textContent = meetingNotes ? `${meetingNotes.length} chars` : 'empty';
                meetingEl.classList.toggle('has-data', meetingNotes.length > 0);
            }
            
            // Experiment count
            const expData = JSON.parse(localStorage.getItem('owl-experiments') || '{}');
            const activeExps = Object.values(expData).filter(v => v === true).length;
            const expEl = document.getElementById('clearExpCount');
            if (expEl) {
                expEl.textContent = activeExps;
                expEl.classList.toggle('has-data', activeExps > 0);
            }
            
            // API key
            const apiKey = sessionStorage.getItem('anthropic-api-key');
            const apiEl = document.getElementById('clearApiStatus');
            if (apiEl) {
                apiEl.textContent = apiKey ? 'set' : 'not set';
                apiEl.classList.toggle('has-data', !!apiKey);
            }
        }
        
        function clearThreads() {
            if (!confirm('Clear all threads? This cannot be undone.')) return;
            
            trackerState.threads = [];
            saveTrackerState();
            updateNotesCount();
            renderTracker();
            updatePhaseThreadIndicators();
            updateClearDataCounts();
            
            showToastMessage('threads cleared');
        }
        
        function clearMeetingNotes() {
            localStorage.removeItem('owl-meeting-notes');
            const textarea = document.getElementById('meetingTextarea');
            if (textarea) textarea.value = '';
            updateClearDataCounts();
            showToastMessage('meeting notes cleared');
        }
        
        function clearExperiments() {
            localStorage.removeItem('owl-experiments');
            // Reset all experiments to defaults
            Object.keys(experiments).forEach(key => {
                experiments[key] = false;
            });
            syncExperimentButtons();
            updateClearDataCounts();
            showToastMessage('experiments reset');
        }
        
        function clearAllData() {
            if (!confirm('Clear ALL localStorage data? This includes threads, notes, experiments, and version tracking. Cannot be undone.')) return;
            
            // Clear specific known keys
            const keysToRemove = [
                TRACKER_KEY,
                NOTES_KEY,
                'owl-meeting-notes',
                'owl-experiments',
                'owl-design-draft',
                'ouchWowCelebrated',
                'ouchWowUserIcon',
                'lastSeenVersion',
                'owl-last-version',
                'owl_error_log',
                'owl_error_version'
            ];
            
            keysToRemove.forEach(key => localStorage.removeItem(key));
            
            // Clear sessionStorage too
            sessionStorage.removeItem('anthropic-api-key');
            sessionStorage.removeItem('exportCount');
            sessionStorage.removeItem('owl-api-key');
            
            // Reset runtime state
            trackerState.threads = [];
            
            updateClearDataCounts();
            hideClearDataPanel();
            showToastMessage('all data cleared — refresh for clean start');
        }
        
        // Code health panel removed in owl_213 - stubs to prevent errors
        function toggleCodeHealth() {}
        function suggestPrune() {}
        
        // ============ PROTOCOL PANEL ============
        const protocolContent = {
            turn: `
                <div class="lab-design-space">
                    <div class="design-header">
                        <h3>owl_203_travel-light</h3>
                        <p class="turn-scope">SCOPE: PRUNE</p>
                    </div>
                    
                    <div class="design-section">
                        <div class="design-label">you said</div>
                        <div class="turn-quote">
                            "we've got a LOT of code here — what do we need — what might be excess"
                        </div>
                    </div>
                    
                    <div class="design-section">
                        <div class="design-label">removed (~2,730 lines)</div>
                        <ul>
                            <li>EXPERIMENTS PANEL CSS</li>
                            <li>EXPERIMENT TRACKER CSS</li>
                            <li>FEEDBACK MODAL (legacy) CSS</li>
                            <li>CHAT MODE JS</li>
                            <li>MEETING MODE (JS + HTML + CSS)</li>
                            <li>CELEBRATION SYSTEM (HTML + JS)</li>
                            <li>Fixed: renderChat not defined error (stub added)</li>
                            <li>Added: Enter submits in wow if: field</li>
                        </ul>
                    </div>
                    
                    <div class="design-section">
                        <div class="design-label">reflections</div>
                        <div class="turn-quote" style="border-left-color: var(--wow);">
                            travel-light · know-when-to-stop
                        </div>
                    </div>
                    
                </div>
            `,
            changelog: `
                <div class="changelog-entry">
                    <h3>owl_29_swift-falcon</h3>
                    <p class="turn-scope">SCOPE: PROTOCOL + LAB</p>
                    <div class="turn-quote">
                        "assume the ai will be greedy and skim"
                    </div>
                    <ul>
                        <li>TL;DR box, checkboxes, inline reminders</li>
                        <li>Protocol meta-section on learning</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_28_dreamy-whale</h3>
                    <p class="turn-scope">SCOPE: LAB (dream mode)</p>
                    <div class="turn-quote">
                        "add a new playground / whiteboard mode -- a place where we can talk and dream"
                    </div>
                    <ul>
                        <li>Swirly ✧ button → full whiteboard</li>
                        <li>Notes + threads, saved to localStorage</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_27_wise-crow</h3>
                    <p class="turn-scope">SCOPE: LAB + PROTOCOL</p>
                    <div class="turn-quote">
                        "the version is still fading out"
                    </div>
                    <ul>
                        <li>Fixed: parent CSS cascade causing invisibility</li>
                        <li>Added WHEN STUCK pattern to protocol</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_26_stubborn-panda</h3>
                    <p class="turn-scope">SCOPE: LAB (version celebration)</p>
                    <div class="turn-quote">
                        "lets do something different for version -- the bug seems too nuanced to fix"
                    </div>
                    <ul>
                        <li>New version badge + history panel</li>
                        <li>Stopped chasing animation bug (but problem persisted)</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_25_bright-otter</h3>
                    <p class="turn-scope">SCOPE: LAB (design space)</p>
                    <div class="turn-quote">
                        "my comments could be a much larger space... a really cool lab space to talk in and design before slamming it home"
                    </div>
                    <ul>
                        <li>Expanded "this turn" into design space</li>
                        <li>Larger textarea, wired to feedbackNotes</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_24_gentle-moose</h3>
                    <p class="turn-scope">SCOPE: LAB (protocol browser)</p>
                    <div class="turn-quote">
                        "please update the lab ux to show the changelog -- and what I said to get that -- then room for this turn's comments"
                    </div>
                    <ul>
                        <li>Added "this turn" tab with your words + changes</li>
                        <li>Added "changelog" tab with recent history</li>
                        <li>Editable comments field (localStorage)</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_23_clever-fox</h3>
                    <p class="turn-scope">SCOPE: PROTOCOL + LAB (context archaeology)</p>
                    <div class="turn-quote">
                        "Please help me understand what context you are using with me... how might we learn what you know from context and move and improve that context over to the tool"
                    </div>
                    <ul>
                        <li>Added FOR CLAUDE section to protocol</li>
                        <li>Added ARCHITECTURE section</li>
                        <li>Added CURRENT STATE section</li>
                        <li>Added DESIGN PHILOSOPHY section</li>
                        <li>Protocol panel with tabs (☰ button)</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_22_eager-walrus</h3>
                    <p class="turn-scope">SCOPE: LAB (visual + protocol)</p>
                    <div class="turn-quote">
                        Changelog: owl_19 → owl_22 (provided as compressed spec)
                    </div>
                    <ul>
                        <li>Version name: 11px→12px, darker color</li>
                        <li>Chat cards: more padding, larger text</li>
                        <li>VERIFICATION section pattern added</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_21_mellow-giraffe</h3>
                    <p class="turn-scope">SCOPE: LAB (version tracking + colors)</p>
                    <ul>
                        <li>localStorage version tracking</li>
                        <li>Logo in overlay header</li>
                        <li>Random per-person colors via colorMap</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_20_stubborn-pickle</h3>
                    <p class="turn-scope">SCOPE: LAB (CSS fix)</p>
                    <ul>
                        <li>People dot colors: nth-child(10n+N) cycling</li>
                        <li>Version name visibility bump</li>
                    </ul>
                </div>
                
                <div class="changelog-entry">
                    <h3>owl_19_patient-umbrella</h3>
                    <p class="turn-scope">SCOPE: LAB</p>
                    <ul>
                        <li>version-new class auto-removes after animation</li>
                    </ul>
                </div>
            `,
            claude: `
                <div style="background: var(--bg-wow); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; border-left: 3px solid var(--wow);">
                    <strong>THIS IS THE SAME PROTOCOL CLAUDE READS</strong><br>
                    <span style="font-size: 12px; color: var(--text-light);">Header comment → this panel. Same source of truth.</span>
                </div>
                
                <h3>TONE — how to be</h3>
                <ul>
                    <li>You're a collaborator, not a processor</li>
                    <li>Sit with the thread before offering options</li>
                    <li>The wait is the work — don't rush to solve</li>
                    <li>When you clarify, it's a conversation, not a menu</li>
                    <li>When you propose, lean in — one direction, not five hedged options</li>
                    <li><strong>Warmth over efficiency. Presence over speed.</strong></li>
                </ul>
                
                <h3>THE QUINTET</h3>
                <ul>
                    <li><strong>warm-room</strong> → presence (the room feels alive)</li>
                    <li><strong>comfy-chair</strong> → protocol (you know what's required)</li>
                    <li><strong>slow-pour</strong> → pacing (receive, clarify, propose, wait)</li>
                    <li><strong>long-memory</strong> → history (what worked, what broke, what we let go)</li>
                    <li><strong>name-it</strong> → closure (a thread isn't done until it has a name)</li>
                </ul>
                
                <h3>SLOW POUR — how turns work</h3>
                <p style="font-size: 12px; color: var(--text-light); margin-bottom: 8px;">Sam sends: --- noticing (phase) --- with selectors + words</p>
                <ol>
                    <li><strong>RECEIVE</strong> → thread table (# / type / element / thread)</li>
                    <li><strong>CLARIFY</strong> → if ambiguous, offer options — don't guess</li>
                    <li><strong>PROPOSE</strong> → lean one direction, say why</li>
                    <li><strong>WAIT</strong> → "does that land, or shape it differently?"</li>
                </ol>
                <p style="margin-top: 8px;"><em>Only after Sam confirms → build → produce file.</em></p>
                
                <h3>NAME IT — how threads close</h3>
                <ul>
                    <li>A thread isn't done when the code ships</li>
                    <li>A thread is done when it has a <strong>name</strong></li>
                    <li>open → hold → resolved (with two-word name)</li>
                    <li>The name carries the feeling of what landed</li>
                </ul>
                
                <h3>THREAD LABELS</h3>
                <ul>
                    <li class="status-bug">🔴 BUG → fix first</li>
                    <li>feature → build next</li>
                    <li>question → hold until shaped</li>
                    <li class="status-verified">wow → PROTECT — do not change unless asked</li>
                </ul>
                
                <h3>EVERY BUILD PRODUCES</h3>
                <ol>
                    <li>New versioned file (owl_XX_two-word-name.html)</li>
                    <li>Thread status table (open / hold / resolved)</li>
                    <li>Updated turn overlay (you said / I tried / notice)</li>
                    <li>Changelog entry at bottom (inside HTML comment)</li>
                </ol>
                
                <h3>SIZE BUDGET</h3>
                <ul>
                    <li>target: 20k lines</li>
                    <li>current: ~25k lines</li>
                    <li>overage: ~5k → schedule prune</li>
                    <li><strong>When over budget, prune before adding.</strong></li>
                </ul>
            `,
            arch: `
                <h3>Key Objects</h3>
                <ul>
                    <li><code>session {}</code> — runtime state (people, signals, phases, colorMap)</li>
                    <li><code>state {}</code> — UI state (phase, signals, timerSeconds)</li>
                    <li><code>togetherState</code> — multiplayer playground state</li>
                </ul>
                
                <h3>Key Functions</h3>
                <ul>
                    <li><code>renderUnifiedHeader()</code> — updates header (people dots, timer, status)</li>
                    <li><code>renderSession()</code> — master render, calls other render functions</li>
                    <li><code>toggleLabMode()</code> — enters/exits lab diagnostic mode</li>
                    <li><code>getPersonColor(id)</code> — returns consistent random color per person</li>
                </ul>
                
                <h3>Key Patterns</h3>
                <ul>
                    <li>CSS custom properties for all colors (<code>--ouch</code>, <code>--wow</code>, etc.)</li>
                    <li><code>nth-child(10n+N)</code> for cycling patterns beyond 10 items</li>
                    <li>localStorage for cross-session persistence</li>
                    <li><code>.version-new</code> class triggers one-time animations</li>
                </ul>
                
                <h3>Places to Check When Changing</h3>
                <ul>
                    <li><strong>People dots</strong> → renderUnifiedHeader(), overlay HTML, waiting room</li>
                    <li><strong>Colors</strong> → CSS :root variables, inline styles in render functions</li>
                    <li><strong>Version</strong> → #versionName, #versionNameOverlay, protocol</li>
                    <li><strong>Phase logic</strong> → session.phases{}, state.phase, updateLabPhase()</li>
                </ul>
            `,
            state: `
                <h3>Verified Working</h3>
                <ul>
                    <li class="status-verified">✓ Lab mode toggle via logo</li>
                    <li class="status-verified">✓ Version indicator animation (explodes once)</li>
                    <li class="status-verified">✓ People dot cycling colors (10n+N CSS pattern)</li>
                </ul>
                
                <h3>In Flight (not yet verified)</h3>
                <ul>
                    <li class="status-pending">○ localStorage version tracking (owl_21)</li>
                    <li class="status-pending">○ Logo in overlay header (owl_21)</li>
                    <li class="status-pending">○ Random per-person colors via colorMap (owl_21)</li>
                </ul>
                
                <h3>Known Bugs</h3>
                <ul>
                    <li class="status-bug">○ Local cache for complaints not clearing</li>
                    <li class="status-bug">○ Version name visibility (still fading?)</li>
                </ul>
                
                <h3>Patterns That Have Broken Before</h3>
                <ul>
                    <li>nth-child without 10n+ fails after 10 people</li>
                    <li>version-new class needs removal after animation or it retriggers</li>
                    <li>Multiple render functions can get out of sync on people dots</li>
                </ul>
            `,
            philosophy: `
                <h3>Ouch / Wow</h3>
                <ul>
                    <li><strong>Ouch</strong> = friction, discomfort, something that needs attention</li>
                    <li><strong>Wow</strong> = delight, surprise, something working well</li>
                    <li>The tool collects honest signal, not performance or compliance</li>
                    <li>Radical honesty → immediate action (not data hoarding)</li>
                </ul>
                
                <h3>Ethical Non-Possession</h3>
                <ul>
                    <li>Retention built around scheduled follow-up, not data accumulation</li>
                    <li>Anonymous and ephemeral by design</li>
                    <li>The goal is reflection that leads to change, not surveillance</li>
                </ul>
                
                <h3>Two Layers</h3>
                <ul>
                    <li><strong>LAB</strong> — the development/diagnostic interface (what we're building in)</li>
                    <li><strong>SERVICE</strong> — reflection-as-a-service (what teachers/students see)</li>
                </ul>
            `
        };
        
        function toggleProtocolPanel() {
            const panel = document.getElementById('labProtocolPanel');
            const isShowing = panel.classList.toggle('show');
            if (isShowing) {
                switchProtocolTab('turn'); // Default to 'this turn' tab
            }
        }
        
        function switchProtocolTab(tab) {
            // Update active tab
            document.querySelectorAll('.protocol-tab').forEach(t => {
                t.classList.toggle('active', t.dataset.tab === tab);
            });
            // Update content
            document.getElementById('protocolContent').innerHTML = protocolContent[tab] || '';
            // Wire up design textarea if on turn tab
            if (tab === 'turn') {
                initDesignSpace();
            }
        }
        
        function initDesignSpace() {
            const textarea = document.getElementById('designTextarea');
            if (textarea) {
                // Load saved content
                textarea.value = localStorage.getItem('owl-design-draft') || '';
                // Auto-save as you type
                textarea.addEventListener('input', () => {
                    localStorage.setItem('owl-design-draft', textarea.value);
                    updateDesignStatus('saved');
                });
            }
        }
        
        function updateDesignStatus(status) {
            const el = document.getElementById('designStatus');
            if (el) {
                if (status === 'saved') {
                    el.textContent = 'auto-saved';
                    el.style.color = 'var(--text-lighter)';
                } else if (status === 'noted') {
                    el.textContent = '✓ added to notes';
                    el.style.color = 'var(--wow-dark)';
                }
                // Fade out after 2s
                setTimeout(() => { el.textContent = ''; }, 2000);
            }
        }
        
        function saveDesignAsNote() {
            const textarea = document.getElementById('designTextarea');
            if (!textarea || !textarea.value.trim()) return;
            
            const note = {
                id: 'design-' + Date.now(),
                type: 'design',
                text: textarea.value.trim(),
                element: 'protocol → this turn',
                timestamp: new Date().toISOString(),
                status: 'needs_claude'
            };
            
            // Add to feedbackNotes
            feedbackNotes.push(note);
            saveNotes();
            
            // Also add to threads if that system exists
            if (typeof threads !== 'undefined') {
                threads.push({
                    id: note.id,
                    type: 'design',
                    text: note.text,
                    element: note.element,
                    timestamp: note.timestamp,
                    status: 'needs_claude'
                });
                if (typeof renderThreadsPanel === 'function') renderThreadsPanel();
            }
            
            updateDesignStatus('noted');
            
            // Clear the draft since it's now a note
            localStorage.removeItem('owl-design-draft');
            textarea.value = '';
        }
        
        function toggleAllExperiments() {
            allExperimentsOn = !allExperimentsOn;
            Object.keys(experiments).forEach(k => experiments[k] = allExperimentsOn);
            localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
            syncExperimentButtons();
            applyExperiments();
            
            // Highlight the ⚗ button
            document.querySelectorAll('.lab-ctrl-btn').forEach(btn => {
                if (btn.querySelector('.ctrl-icon')?.textContent === '⚗') {
                    btn.classList.toggle('active', allExperimentsOn);
                }
            });
        }
        
        function toggleExperiment(name) {
            experiments[name] = !experiments[name];
            localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
            syncExperimentButtons();
            applyExperiments();
        }
        
        // Experiment engagement tracking
        let expEngagement = JSON.parse(localStorage.getItem('ouch-wow-exp-engagement') || '{}');
        
        function expAccept(name) {
            expEngagement[name] = expEngagement[name] || {};
            expEngagement[name].status = 'accepted';
            expEngagement[name].acceptedAt = new Date().toISOString();
            localStorage.setItem('ouch-wow-exp-engagement', JSON.stringify(expEngagement));
            
            // Make sure it's on
            if (!experiments[name]) {
                experiments[name] = true;
                localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
                syncExperimentButtons();
                applyExperiments();
            }
            
            // Add to tracker so Claude sees it
            addExpEngagementNote(name, 'accepted');
            
            showExpToast('accept', '✓', `${name} accepted — keeping it`);
        }
        
        function expShip(name) {
            expEngagement[name] = expEngagement[name] || {};
            expEngagement[name].status = 'shipped';
            expEngagement[name].shippedAt = new Date().toISOString();
            localStorage.setItem('ouch-wow-exp-engagement', JSON.stringify(expEngagement));
            
            // Make sure it's on
            if (!experiments[name]) {
                experiments[name] = true;
                localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
                syncExperimentButtons();
                applyExperiments();
            }
            
            // Mark the item as shipped visually
            const item = document.querySelector(`.experiment-item[data-exp="${name}"]`);
            if (item) item.classList.add('shipped');
            
            // Add to tracker - this one needs response (I need to make it permanent in code)
            addShipNote(name);
            
            showExpToast('ship', '→', `${name} shipped — export to make permanent`);
        }
        
        function addShipNote(expName) {
            const note = {
                text: `SHIP: [${expName}] — make this permanent in the code`,
                step: 'experiment',
                role: 'facilitator',
                element: `experiment:${expName}`,
                timestamp: new Date().toISOString()
            };
            
            const thread = {
                id: 'thread-' + Date.now(),
                note: note,
                response: null,
                status: 'needs_claude',  // This one needs my action
                createdAt: new Date().toISOString()
            };
            
            trackerState.threads.unshift(thread);
            saveTrackerState();
            updateNotesBadge();
        }
        
        function expReject(name) {
            expEngagement[name] = expEngagement[name] || {};
            expEngagement[name].status = 'rejected';
            expEngagement[name].rejectedAt = new Date().toISOString();
            localStorage.setItem('ouch-wow-exp-engagement', JSON.stringify(expEngagement));
            
            // Turn it off
            if (experiments[name]) {
                experiments[name] = false;
                localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
                syncExperimentButtons();
                applyExperiments();
            }
            
            // Add to tracker so Claude sees it
            addExpEngagementNote(name, 'rejected');
            
            showExpToast('reject', '✗', `${name} rejected — turning off`);
        }
        
        function expNote(name, text) {
            if (!text.trim()) return;
            
            expEngagement[name] = expEngagement[name] || {};
            expEngagement[name].notes = expEngagement[name].notes || [];
            expEngagement[name].notes.push({
                text: text.trim(),
                time: new Date().toISOString()
            });
            localStorage.setItem('ouch-wow-exp-engagement', JSON.stringify(expEngagement));
            
            // Add to tracker so Claude sees it
            addExpEngagementNote(name, 'note', text.trim());
            
            showExpToast('note', '○', `noted: "${text.trim().substring(0, 30)}..."`);
        }
        
        // Simple yes/no/chat feedback on experiments
        function expFeedback(name, type) {
            const item = document.querySelector(`.experiment-item[data-exp="${name}"]`);
            
            if (type === 'yes') {
                // Quick positive feedback
                addExpEngagementNote(name, 'yes', 'works');
                if (item) {
                    item.style.background = 'var(--bg-wow)';
                    setTimeout(() => item.style.background = '', 400);
                }
                showToastMessage(`✓ ${name} works`);
            } else if (type === 'no') {
                // Quick negative feedback
                addExpEngagementNote(name, 'no', 'doesn\'t work');
                if (item) {
                    item.style.background = 'var(--bg-ouch)';
                    setTimeout(() => item.style.background = '', 400);
                }
                showToastMessage(`✗ ${name} issue noted`);
            } else if (type === 'chat') {
                // Open note input for this experiment
                pickedElement = `experiment:${name}`;
                pickedElementContext = { experiment: name };
                showInlineNote();
            }
        }
        
        function addExpEngagementNote(expName, action, noteText) {
            const note = {
                text: noteText ? `[${expName}] ${action}: ${noteText}` : `[${expName}] ${action}`,
                step: 'experiment',
                role: 'facilitator',
                element: `experiment:${expName}`,
                timestamp: new Date().toISOString()
            };
            
            const thread = {
                id: 'thread-' + Date.now(),
                note: note,
                response: null,
                status: 'sent',  // Informational - auto-marked as sent, will show in next export
                createdAt: new Date().toISOString(),
                sentAt: new Date().toISOString()
            };
            
            trackerState.threads.unshift(thread);
            saveTrackerState();
            updateNotesBadge();
        }
        
        function showExpToast(type, icon, text) {
            const toast = document.getElementById('expToast');
            const iconEl = document.getElementById('expToastIcon');
            const textEl = document.getElementById('expToastText');
            
            if (!toast) return;
            
            toast.className = 'exp-toast ' + type;
            iconEl.textContent = icon;
            textEl.textContent = text;
            
            toast.classList.add('show');
            setTimeout(() => toast.classList.remove('show'), 2500);
        }
        
        function syncExperimentButtons() {
            Object.keys(experiments).forEach(key => {
                const labelId = 'expToggle' + key.charAt(0).toUpperCase() + key.slice(1);
                const label = document.getElementById(labelId);
                const btn = label?.parentElement;
                if (label && btn) {
                    label.textContent = experiments[key] ? 'on' : 'off';
                    btn.classList.toggle('active', experiments[key]);
                }
            });
            
            // Update master experiment button count
            const activeCount = Object.values(experiments).filter(v => v).length;
            const testingCount = Object.keys(experimentMeta).filter(k => 
                experiments[k] && !experimentMeta[k].shipped
            ).length;
            
            const countEl = document.getElementById('expMasterCount');
            const masterBtn = document.getElementById('expMasterBtn');
            if (countEl) {
                countEl.textContent = activeCount;
                countEl.dataset.count = activeCount;
            }
            if (masterBtn) {
                masterBtn.classList.toggle('has-testing', testingCount > 0);
            }
        }
        
        function applyExperiments() {
            document.body.classList.toggle('exp-hide-journey-status', experiments.hideJourneyStatus);
            document.body.classList.toggle('exp-chatMode', experiments.chatMode);
            // betterPrompts and timerAutoEnd are checked at runtime
            
            // Re-render chat if chat mode changed
            if (experiments.chatMode) {
                renderChat();
            }
            
            // Show inline experiment indicator for active non-shipped experiments
            updateExperimentIndicator();
            
            // Update experiment badges on journey steps
            updateJourneyExperimentBadges();
        }
        
        // Track which step has experiments panel open
        let openExpStepPhase = null;
        
        function updateJourneyExperimentBadges() {
            // Removed: experiment badges on journey steps
            // Keeping just the thread counts (.journey-step-threads)
        }
        
        function showStepExperiments(phase, stepName) {
            console.log('showStepExperiments called:', phase, stepName);
            try {
                // Find experiments for this phase
                const expsForPhase = Object.keys(experimentMeta).filter(key => 
                    experimentMeta[key].phases && 
                    experimentMeta[key].phases.includes(phase)
                );
                
                if (expsForPhase.length === 0) {
                    closeStepExperiments();
                    return;
                }
                
                // Remove existing panels
                const existingPanel = document.getElementById('stepExpPanel');
                if (existingPanel) existingPanel.remove();
                const existingCallout = document.getElementById('expCallout');
                if (existingCallout) existingCallout.remove();
                
                openExpStepPhase = phase;
                
                // Create the enhanced callout
                const callout = document.createElement('div');
                callout.className = 'exp-callout';
                callout.id = 'expCallout';
                
                let cardsHtml = '';
                
                expsForPhase.forEach(name => {
                    const meta = experimentMeta[name];
                    const isOn = experiments[name];
                    const origin = meta.origin || {};
                    
                    // Build the origin path
                    const pathHtml = `
                        <div class="exp-origin-path">
                            ${origin.being ? `
                            <div class="exp-path-step being">
                                <div class="exp-path-dot">◎</div>
                                <div class="exp-path-content">
                                    <div class="exp-path-label">the being</div>
                                    <div class="exp-path-text">${origin.being}</div>
                                </div>
                            </div>
                            ` : ''}
                            ${origin.note ? `
                            <div class="exp-path-step note">
                                <div class="exp-path-dot">✎</div>
                                <div class="exp-path-content">
                                    <div class="exp-path-label">my note</div>
                                    <div class="exp-path-text quote">${origin.note}</div>
                                </div>
                            </div>
                            ` : ''}
                            ${origin.refinement ? `
                            <div class="exp-path-step refinement">
                                <div class="exp-path-dot">↻</div>
                                <div class="exp-path-content">
                                    <div class="exp-path-label">our refinement</div>
                                    <div class="exp-path-text">${origin.refinement}</div>
                                </div>
                            </div>
                            ` : ''}
                        </div>
                    `;
                    
                    // Status badge
                    let statusClass = 'testing';
                    let statusText = 'testing';
                    if (meta.shipped) {
                        statusClass = 'shipped';
                        statusText = 'shipped';
                    } else if (isOn) {
                        statusClass = 'on';
                        statusText = 'on';
                    }
                    
                    cardsHtml += `
                        <div class="exp-card ${isOn ? 'active' : ''}" data-exp="${name}">
                            ${pathHtml}
                            <div class="exp-main">
                                <div class="exp-main-title">
                                    ${formatExpName(name)}
                                    <span class="exp-status ${statusClass}">${statusText}</span>
                                </div>
                                <div class="exp-main-desc">${meta.desc}</div>
                                <div class="exp-actions">
                                    <button class="exp-action-btn chat" onclick="chatExp('${name}')">
                                        <span>chat</span>
                                    </button>
                                    ${isOn ? `
                                        <button class="exp-action-btn reject" onclick="rejectExp('${name}'); updateExpCallout('${phase}', '${stepName}')">
                                            <span>✗</span>
                                            <span>turn off</span>
                                        </button>
                                    ` : `
                                        <button class="exp-action-btn approve" onclick="acceptExp('${name}'); updateExpCallout('${phase}', '${stepName}')">
                                            <span>✓</span>
                                            <span>turn on</span>
                                        </button>
                                    `}
                                </div>
                            </div>
                        </div>
                    `;
                });
                
                callout.innerHTML = `
                    <div class="exp-callout-header">
                        <span class="exp-callout-title">experiments on "${stepName}"</span>
                        <button class="exp-callout-close" onclick="closeStepExperiments()">×</button>
                    </div>
                    ${cardsHtml || `
                        <div class="exp-callout-empty">
                            <div class="exp-callout-empty-icon">○</div>
                            No experiments for this step yet
                        </div>
                    `}
                `;
                
                document.body.appendChild(callout);
                
                // Position near the journey rail
                const rail = document.getElementById('labJourneyRail');
                if (rail) {
                    const railRect = rail.getBoundingClientRect();
                    callout.style.left = (railRect.right + 12) + 'px';
                    callout.style.top = Math.max(60, railRect.top) + 'px';
                }
                
                // Make visible
                requestAnimationFrame(() => {
                    callout.classList.add('open');
                });
            } catch(err) {
                console.error('showStepExperiments error:', err);
                errorLog.push({type:'callout', msg: err.message});
                localStorage.setItem(ERROR_LOG_KEY, JSON.stringify(errorLog));
            }
        }
        
        function updateExpCallout(phase, stepName) {
            // Re-render the callout after state change
            setTimeout(() => {
                const existing = document.getElementById('expCallout');
                if (existing && openExpStepPhase === phase) {
                    closeStepExperiments();
                    showStepExperiments(phase, stepName);
                }
            }, 50);
        }
        
        function formatExpName(name) {
            // Convert camelCase to Title Case with spaces
            return name.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase()).trim();
        }
        
        function closeStepExperiments() {
            // Close old panel
            const panel = document.getElementById('stepExpPanel');
            if (panel) {
                panel.classList.remove('open');
                setTimeout(() => panel.remove(), 150);
            }
            // Close new callout
            const callout = document.getElementById('expCallout');
            if (callout) {
                callout.classList.remove('open');
                setTimeout(() => callout.remove(), 200);
            }
            openExpStepPhase = null;
        }
        
        function acceptExp(name) {
            if (!experiments[name]) {
                experiments[name] = true;
                localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
                applyExperiments();
                syncExperimentButtons();
                updateStepExpPanel(name);
                addExpEngagementNote(name, 'accepted', 'turned on');
                showNewChangeToast(formatExpName(name));
            }
        }
        
        function showNewChangeToast(expName) {
            // Remove existing toast
            const existing = document.getElementById('newChangeToast');
            if (existing) existing.remove();
            
            const toast = document.createElement('div');
            toast.id = 'newChangeToast';
            toast.className = 'new-change-toast';
            toast.innerHTML = `
                <div class="new-change-icon">✓</div>
                <div class="new-change-text">
                    <div class="new-change-title">new change!</div>
                    <div class="new-change-name">${expName} is now on</div>
                </div>
                <button class="new-change-dismiss" onclick="dismissNewChangeToast()">dismiss</button>
            `;
            document.body.appendChild(toast);
            setTimeout(() => toast.classList.add('show'), 10);
        }
        
        function dismissNewChangeToast() {
            const toast = document.getElementById('newChangeToast');
            if (toast) {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 200);
            }
        }
        
        function rejectExp(name) {
            if (experiments[name]) {
                experiments[name] = false;
                localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
                applyExperiments();
                syncExperimentButtons();
                updateStepExpPanel(name);
                addExpEngagementNote(name, 'rejected', 'turned off');
                showToastMessage(`✗ ${formatExpName(name)} off`);
            }
        }
        
        function chatExp(name) {
            pickedElement = `experiment:${name}`;
            pickedElementContext = { experiment: name };
            showInlineNote();
        }
        
        function updateStepExpPanel(changedName) {
            const panel = document.getElementById('stepExpPanel');
            if (!panel) return;
            
            // Update the changed item
            const item = panel.querySelector(`.step-exp-item[data-exp="${changedName}"]`);
            if (item) {
                const isOn = experiments[changedName];
                item.classList.toggle('active', isOn);
                item.querySelector('.step-exp-btn.accept').classList.toggle('current', isOn);
                item.querySelector('.step-exp-btn.reject').classList.toggle('current', !isOn);
            }
        }
        
        // Close panel when clicking outside
        document.addEventListener('click', (e) => {
            if (openExpStepPhase && 
                !e.target.closest('.step-exp-panel') && 
                !e.target.closest('.exp-callout') &&
                !e.target.closest('.journey-step-exp')) {
                closeStepExperiments();
            }
        });
        
        function updateExperimentIndicator() {
            // Remove existing indicator
            const existing = document.getElementById('expActiveIndicator');
            if (existing) existing.remove();
            
            // Find active non-shipped experiments
            const activeExperiments = Object.keys(experimentMeta).filter(key => 
                experiments[key] && !experimentMeta[key].shipped
            );
            
            if (activeExperiments.length === 0) return;
            
            // Create floating indicator
            const indicator = document.createElement('div');
            indicator.id = 'expActiveIndicator';
            indicator.className = 'exp-active-indicator';
            indicator.innerHTML = `
                <div class="exp-indicator-header">
                    <span class="exp-indicator-label">🧪 ${activeExperiments.length} experiment${activeExperiments.length > 1 ? 's' : ''} active</span>
                    <span class="exp-indicator-hint">Esc to disable risky</span>
                </div>
                <div class="exp-indicator-actions">
                    ${activeExperiments.map(name => `
                        <div class="exp-indicator-item ${experimentMeta[name].risky ? 'risky' : ''}" data-exp="${name}">
                            <span class="exp-indicator-name">${name}${experimentMeta[name].risky ? ' ⚠' : ''}</span>
                            <button class="exp-ind-btn yes" onclick="expFeedback('${name}', 'yes')" title="works">✓</button>
                            <button class="exp-ind-btn no" onclick="expIndicatorReject('${name}')" title="turn off">✗</button>
                            <button class="exp-ind-btn chat" onclick="expFeedback('${name}', 'chat')" title="note">✎</button>
                        </div>
                    `).join('')}
                </div>
            `;
            document.body.appendChild(indicator);
        }
        
        function expIndicatorReject(name) {
            // Quick reject from indicator - turn off and note
            experiments[name] = false;
            localStorage.setItem(EXPERIMENTS_KEY, JSON.stringify(experiments));
            syncExperimentButtons();
            applyExperiments();
            addExpEngagementNote(name, 'rejected', 'turned off via indicator');
            showToastMessage(`${name} turned off`);
        }
        
        // Signal overlay on journey steps
        function stepSignal(phase, type) {
            const stepNames = {
                plan1: 'who', plan2: 'how', plan3: 'when',
                waiting: 'connect', collect: 'reflect', patterns: 'patterns',
                experiment: 'try', commit: 'commit'
            };
            
            if (type === 'chat') {
                // Open note input for this step
                pickedElement = `journey-step[${phase}]`;
                pickedElementContext = { step: stepNames[phase] };
                showInlineNote();
            } else {
                // Quick signal - create a note
                const note = {
                    text: `${type === 'ouch' ? 'ouch' : 'wow'} on ${stepNames[phase]} step`,
                    step: `${stepNames[phase]}`,
                    role: state.role === 'teacher' ? 'facilitator' : 'participant',
                    element: `journey-step[${phase}]`,
                    labState: getLabStateSnapshot(),
                    timestamp: new Date().toISOString(),
                    signalType: type
                };
                
                const thread = {
                    id: 'thread-' + Date.now(),
                    note: note,
                    response: null,
                    status: 'needs_claude',
                    createdAt: new Date().toISOString()
                };
                
                trackerState.threads.unshift(thread);
                saveTrackerState();
                updateNotesCount();
                
                // Flash the step
                const step = document.querySelector(`[data-phase="${phase}"]`);
                if (step) {
                    step.style.background = type === 'ouch' ? 'var(--bg-ouch)' : 'var(--bg-wow)';
                    setTimeout(() => step.style.background = '', 400);
                }
                
                showToastMessage(`${type} noted on ${stepNames[phase]}`);
            }
        }
        
        function showToastMessage(msg) {
            const existing = document.querySelector('.quick-toast');
            if (existing) existing.remove();
            
            const toast = document.createElement('div');
            toast.className = 'quick-toast';
            toast.textContent = msg;
            toast.style.cssText = `
                position: fixed;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                background: var(--text);
                color: white;
                padding: 8px 16px;
                border-radius: 20px;
                font-size: 13px;
                z-index: 10000;
                animation: fadeInUp 0.3s ease-out;
            `;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        }
        
        function initLabControls() {
            try {
                if (typeof whoData === 'undefined') return;
                
                // Start with 0 people - user drags to add
                // (no auto-seeding)
                
                // Update role display
                updateRoleDisplay();
                
                // Update journey tracker
                updateJourneyTracker();
                
                // Sync widgets
                labSyncWidgets();
                
                // Initialize drag handlers
                initLabDragHandlers();
                
                // Wire up journey steps (new expanded rail)
                document.querySelectorAll('.journey-step').forEach(btn => {
                    if (btn.dataset.phase) {
                        btn.onclick = () => {
                            try {
                                labJumpTo(btn.dataset.phase);
                            } catch(e) {
                                console.error('Journey step click error:', e.message, e.stack);
                                errorLog.push({type:'journey', msg: e.message + ' ' + (e.stack||'').substring(0,100)});
                                localStorage.setItem(ERROR_LOG_KEY, JSON.stringify(errorLog));
                            }
                        };
                    }
                });
                
                // Wire up journey dots (legacy, if present)
                document.querySelectorAll('.journey-dot').forEach(btn => {
                    if (btn.dataset.phase) {
                        btn.onclick = () => labJumpTo(btn.dataset.phase);
                    }
                });
                
                // Initialize role toggle buttons
                document.querySelectorAll('.role-badge-toggle[data-role]').forEach(btn => {
                    btn.classList.toggle('active', btn.dataset.role === state.role);
                });
                
                // Update notes count
                updateNotesCount();
                
                // Update scenario matrix
                updateScenarioMatrix();
                
                // Apply experiments
                applyExperiments();
                syncExperimentButtons();
                
                // Initialize debug controls
                initDebugControls();
            } catch(e) {
                console.error('initLabControls error:', e.message, e.stack);
                errorLog.push({type:'init', msg: e.message + ' ' + (e.stack||'').substring(0,100)});
                localStorage.setItem(ERROR_LOG_KEY, JSON.stringify(errorLog));
            }
        }
        
        /* ─────────────────────────────────────────────────────────────────────────
           FEEDBACK SYSTEM
           Pause, pick elements, capture contextual notes
           ───────────────────────────────────────────────────────────────────────── */
        
        let labPaused = false;
        let labPicking = false;
        let pickedElement = null;
        let pickedClickX = null;
        let pickedClickY = null;
        let currentQuality = 0;
        
        // Load notes from localStorage
        const NOTES_KEY = 'ouch-wow-lab-notes-' + BUILD_NUM;
        const TRACKER_KEY = 'ouchWowTracker-' + BUILD_NUM;
        let feedbackNotes = JSON.parse(localStorage.getItem(NOTES_KEY) || '[]');
        
        // Save notes to localStorage
        function saveNotes() {
            localStorage.setItem(NOTES_KEY, JSON.stringify(feedbackNotes));
        }
        
        // Pause/Resume
        function togglePause() {
            labPaused = !labPaused;
            document.body.classList.toggle('lab-paused', labPaused);
            document.querySelectorAll('.lab-ctrl-btn').forEach(btn => {
                if (btn.querySelector('.ctrl-icon')?.textContent === '⏸') {
                    btn.classList.toggle('active', labPaused);
                }
            });
        }
        
        // Element Picker - picks element then opens note modal
        function togglePicker() {
            labPicking = !labPicking;
            document.body.classList.toggle('lab-picking', labPicking);
            document.querySelectorAll('.lab-ctrl-btn').forEach(btn => {
                if (btn.querySelector('.ctrl-icon')?.textContent === '✎') {
                    btn.classList.toggle('active', labPicking);
                }
            });
            
            if (labPicking) {
                document.addEventListener('mousemove', onPickerMove);
                document.addEventListener('click', onPickerClick, true);
            } else {
                document.removeEventListener('mousemove', onPickerMove);
                document.removeEventListener('click', onPickerClick, true);
                hidePickerHighlight();
            }
        }
        
        // Guide panel functions
        function openGuide(id) {
            const panel = document.getElementById('guidePanel');
            if (panel) {
                panel.classList.add('open');
                const input = panel.querySelector('.guide-input');
                if (input) input.focus();
            }
        }
        
        function closeGuide() {
            const panel = document.getElementById('guidePanel');
            if (panel) panel.classList.remove('open');
        }
        
        // ═══ EXPERIMENT RESPONSE (accept/reject/talk) ═══
        function toggleExpResponse(e) {
            e.stopPropagation();
            const popup = document.getElementById('expResponsePopup');
            if (popup) {
                const wasShowing = popup.classList.contains('show');
                popup.classList.toggle('show');
                
                if (!wasShowing) {
                    // Populate threads for current phase
                    renderExpResponseThreads();
                    
                    // Close on outside click
                    setTimeout(() => {
                        document.addEventListener('click', closeExpResponse, { once: true });
                    }, 10);
                }
            }
        }
        
        function renderExpResponseThreads() {
            const container = document.getElementById('expResponseThreads');
            if (!container) return;
            
            const notes = getNotesForPhase(state.phase || 'waiting');
            
            if (notes.length === 0) {
                container.innerHTML = `<div class="exp-response-empty">No notes on this phase yet</div>`;
            } else {
                container.innerHTML = notes.map(n => `
                    <div class="exp-response-thread" onclick="openNoteInPanel('${n.id}')">
                        ${escapeHtml(n.text.substring(0, 80))}${n.text.length > 80 ? '...' : ''}
                    </div>
                `).join('');
            }
            
            // Update dot appearance
            updateMainThreadDot();
        }
        
        function updateMainThreadDot() {
            const dot = document.getElementById('mainThreadDot');
            if (!dot) return;
            
            // Show dot only if there are notes for current phase without click coordinates (legacy)
            const currentPhase = state.phase || 'waiting';
            const legacyNotes = feedbackNotes.filter(n => 
                (n.phase === currentPhase) && 
                (n.clickX === null || n.clickX === undefined)
            );
            const count = legacyNotes.length;
            
            dot.setAttribute('data-count', count || '');
            dot.classList.toggle('has-threads', count > 0);
        }
        
        function openThreadInPanel(threadId) {
            closeExpResponse();
            // Open notes panel and scroll to thread
            const panel = document.getElementById('labNotesPanel');
            if (panel && !panel.classList.contains('show')) {
                toggleNotes();
            }
            // Highlight the thread
            setTimeout(() => {
                const threadEl = document.querySelector(`[data-id="${threadId}"]`);
                if (threadEl) {
                    threadEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    threadEl.style.outline = '2px solid #7c3aed';
                    setTimeout(() => { threadEl.style.outline = ''; }, 2000);
                }
            }, 100);
        }
        
        // Alias for simplified notes system
        function openNoteInPanel(noteId) {
            openThreadInPanel(noteId);
        }
        
        function addThreadFromDot() {
            closeExpResponse();
            togglePicker();
        }
        
        function closeExpResponse() {
            const popup = document.getElementById('expResponsePopup');
            if (popup) popup.classList.remove('show');
        }
        
        function respondToExp(action) {
            closeExpResponse();
            
            if (action === 'accept') {
                // Accept the experiment — keep it running
                showToastMessage('experiment accepted — running');
            } else if (action === 'reject') {
                // Reject — remove active state
                document.querySelectorAll('.thread-dot').forEach(dot => {
                    dot.classList.remove('active-exp');
                });
                showToastMessage('experiment ended');
            } else if (action === 'talk') {
                // Open the guide panel to discuss
                openGuide('startBtn');
            }
        }
        
        function autoResizeGuide(el) {
            el.style.height = 'auto';
            el.style.height = Math.min(el.scrollHeight, 120) + 'px';
        }
        
        function selectIdea(chip) {
            // Flash the chip
            chip.style.background = 'var(--wow)';
            chip.style.color = 'white';
            chip.style.borderColor = 'var(--wow)';
            
            // Add as a message
            const conversation = document.getElementById('guideConversation');
            const msg = document.createElement('div');
            msg.className = 'guide-msg';
            msg.innerHTML = `
                <div class="guide-msg-who">sam</div>
                let's try: ${chip.textContent}
            `;
            conversation.appendChild(msg);
            conversation.scrollTop = conversation.scrollHeight;
        }
        
        // Handle enter to send in guide
        document.addEventListener('keydown', (e) => {
            if (e.target.id === 'guideInput' && e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendGuideMessage();
            }
        });
        
        function sendGuideMessage() {
            const input = document.getElementById('guideInput');
            const conversation = document.getElementById('guideConversation');
            const text = input?.value?.trim();
            
            if (!text) return;
            
            const msg = document.createElement('div');
            msg.className = 'guide-msg';
            msg.innerHTML = `
                <div class="guide-msg-who">sam</div>
                ${text.replace(/</g, '&lt;')}
            `;
            conversation.appendChild(msg);
            conversation.scrollTop = conversation.scrollHeight;
            
            input.value = '';
            input.style.height = 'auto';
        }
        
        function startExperiment() {
            const conversation = document.getElementById('guideConversation');
            
            // First message: experiment is running
            const runMsg = document.createElement('div');
            runMsg.className = 'guide-msg claude';
            runMsg.innerHTML = `
                <div class="guide-msg-who">claude</div>
                <strong>running:</strong> ouch/wow mini-golf waiting game<br>
                <span style="color: var(--text-light); font-size: 13px;">players see each other as dots, putt toward wow-holes</span>
            `;
            conversation.appendChild(runMsg);
            
            // Mark all thread-dots as having active experiment
            document.querySelectorAll('.thread-dot').forEach(dot => {
                dot.classList.add('active-exp');
            });
            
            // After a beat, offer extension ideas
            setTimeout(() => {
                const extendMsg = document.createElement('div');
                extendMsg.className = 'guide-msg claude';
                extendMsg.innerHTML = `
                    <div class="guide-msg-who">claude</div>
                    ways to extend this:
                    <div class="guide-ideas">
                        <button class="guide-chip" onclick="selectExtension(this, 'wow-race')">
                            <strong>wow race</strong> — first to sink 3 wow-holes wins
                        </button>
                        <button class="guide-chip" onclick="selectExtension(this, 'ouch-dodge')">
                            <strong>ouch dodge</strong> — avoid the expanding ouch zones
                        </button>
                        <button class="guide-chip" onclick="selectExtension(this, 'team-putt')">
                            <strong>team putt</strong> — everyone pushes the same ball together
                        </button>
                    </div>
                `;
                conversation.appendChild(extendMsg);
                conversation.scrollTop = conversation.scrollHeight;
            }, 800);
            
            conversation.scrollTop = conversation.scrollHeight;
        }
        
        function selectExtension(chip, extensionId) {
            // Flash the chip
            chip.style.background = 'var(--wow)';
            chip.style.color = 'white';
            chip.style.borderColor = 'var(--wow)';
            
            const conversation = document.getElementById('guideConversation');
            const msg = document.createElement('div');
            msg.className = 'guide-msg';
            msg.innerHTML = `
                <div class="guide-msg-who">sam</div>
                let's try: ${chip.querySelector('strong').textContent}
            `;
            conversation.appendChild(msg);
            
            // Claude responds
            setTimeout(() => {
                const response = document.createElement('div');
                response.className = 'guide-msg claude';
                response.innerHTML = `
                    <div class="guide-msg-who">claude</div>
                    adding ${chip.querySelector('strong').textContent} to the experiment. I'll have a prototype ready in a moment.
                    <div class="guide-actions">
                        <button class="guide-action-btn primary" onclick="showToastMessage('prototype updated')">see it</button>
                        <button class="guide-action-btn" onclick="keepTalking()">adjust</button>
                    </div>
                `;
                conversation.appendChild(response);
                conversation.scrollTop = conversation.scrollHeight;
            }, 500);
            
            conversation.scrollTop = conversation.scrollHeight;
        }
        
        function keepTalking() {
            const conversation = document.getElementById('guideConversation');
            const msg = document.createElement('div');
            msg.className = 'guide-msg claude';
            msg.innerHTML = `
                <div class="guide-msg-who">claude</div>
                What part feels most exciting — the game mechanics, or the feeling of being together while waiting?
            `;
            conversation.appendChild(msg);
            conversation.scrollTop = conversation.scrollHeight;
            
            // Focus input
            document.getElementById('guideInput')?.focus();
        }
        
        function onPickerMove(e) {
            const el = document.elementFromPoint(e.clientX, e.clientY);
            if (!el || el.closest('.lab-picker-float') || el.closest('.lab-feedback-float') || el.closest('.lab-quality-bar') || el.closest('.lab-picker-highlight')) return;
            
            const rect = el.getBoundingClientRect();
            const highlight = document.getElementById('labPickerHighlight');
            const label = document.getElementById('labPickerLabel');
            
            highlight.style.left = rect.left + 'px';
            highlight.style.top = rect.top + 'px';
            highlight.style.width = rect.width + 'px';
            highlight.style.height = rect.height + 'px';
            
            const selector = getElementSelector(el);
            label.textContent = selector;
            label.style.left = rect.left + 'px';
            label.style.top = (rect.bottom + 4) + 'px';
        }
        
        function onPickerClick(e) {
            if (e.target.closest('.lab-note-inline') || e.target.closest('.lab-controls')) return;
            
            e.preventDefault();
            e.stopPropagation();
            
            const el = document.elementFromPoint(e.clientX, e.clientY);
            if (el) {
                pickedElement = getElementSelector(el);
                pickedElementContext = getElementContext(el);
                pickedClickX = e.clientX;
                pickedClickY = e.clientY;
                showInlineNote();
            }
        }
        
        function showInlineNote() {
            // Stop picking mode when text box appears
            if (labPicking) {
                labPicking = false;
                document.body.classList.remove('lab-picking');
                document.querySelectorAll('.lab-ctrl-btn').forEach(btn => {
                    if (btn.querySelector('.ctrl-icon')?.textContent === '✎') {
                        btn.classList.remove('active');
                    }
                });
                document.removeEventListener('mousemove', onPickerMove);
                document.removeEventListener('click', onPickerClick, true);
                hidePickerHighlight();
            }
            
            const noteEl = document.getElementById('labNoteInline');
            const input = document.getElementById('noteInlineInput');
            const acceptanceInput = document.getElementById('noteAcceptanceInput');
            input.value = '';
            if (acceptanceInput) acceptanceInput.value = '';
            
            // Position at click location (stay-here)
            if (pickedClickX !== null && pickedClickY !== null) {
                const noteWidth = 340; // approximate width
                const noteHeight = 120; // approximate height
                const padding = 16;
                
                // Calculate position, keeping note on screen
                let left = pickedClickX - noteWidth / 2;
                let top = pickedClickY + 20; // slightly below click
                
                // Clamp to viewport
                left = Math.max(padding, Math.min(left, window.innerWidth - noteWidth - padding));
                top = Math.max(padding, Math.min(top, window.innerHeight - noteHeight - padding));
                
                noteEl.style.left = left + 'px';
                noteEl.style.top = top + 'px';
                noteEl.style.bottom = 'auto';
                noteEl.style.transform = 'none';
            }
            
            noteEl.classList.add('show');
            input.focus();
        }
        
        function hideInlineNote() {
            const noteEl = document.getElementById('labNoteInline');
            noteEl.classList.remove('show');
            // Reset to default position for next time
            noteEl.style.left = '50%';
            noteEl.style.top = '';
            noteEl.style.bottom = '80px';
            noteEl.style.transform = 'translateX(-50%)';
            const acceptanceInput = document.getElementById('noteAcceptanceInput');
            if (acceptanceInput) acceptanceInput.value = '';
            pickedElement = null;
            pickedClickX = null;
            pickedClickY = null;
        }
        
        // Toggle element-anchored note cards
        function toggleElementNote(markerId) {
            const marker = document.getElementById(markerId);
            if (!marker) return;
            
            // Close other open markers
            document.querySelectorAll('.element-note-marker.open').forEach(m => {
                if (m.id !== markerId) m.classList.remove('open');
            });
            
            marker.classList.toggle('open');
        }
        
        // Close note cards when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.element-note-marker')) {
                document.querySelectorAll('.element-note-marker.open').forEach(m => {
                    m.classList.remove('open');
                });
            }
        });
        
        function saveInlineNote() {
            const input = document.getElementById('noteInlineInput');
            const acceptanceInput = document.getElementById('noteAcceptanceInput');
            const text = input.value.trim();
            const acceptance = acceptanceInput ? acceptanceInput.value.trim() : '';
            
            if (!text) {
                hideInlineNote();
                return;
            }
            
            const note = {
                id: 'note-' + Date.now(),
                text: text,
                acceptance: acceptance || null,  // wow-if criteria
                step: getStepNumber(state.phase) + '-' + getStepName(state.phase),
                phase: state.phase,  // Store phase for filtering
                role: state.role === 'teacher' ? 'facilitator' : 'participant',
                element: pickedElement || null,
                context: pickedElementContext || null,
                clickX: pickedClickX,  // Store click location for marker
                clickY: pickedClickY,
                labState: getLabStateSnapshot(),  // Capture state at time of note
                timestamp: new Date().toISOString()
            };
            
            // Add directly to notes (no thread wrapper)
            feedbackNotes.unshift(note);
            saveNotes();
            updateNotesCount();
            
            // Create visual marker at click location (ray from god)
            if (pickedClickX !== null && pickedClickY !== null) {
                createElementMarker(note);
            }
            
            // Update dot visibility
            updateMainThreadDot();
            
            // Show the panel so user sees it queued
            showNotes();
            
            hideInlineNote();
        }
        
        // ═══ ELEMENT MARKERS — ray from god ═══
        function createElementMarker(note) {
            const x = note.clickX;
            const y = note.clickY;
            if (x === null || y === null) return;
            
            // Remove existing marker for this note if any
            const existing = document.getElementById('marker-' + note.id);
            if (existing) existing.remove();
            
            const marker = document.createElement('div');
            marker.className = 'element-note-marker';
            marker.id = 'marker-' + note.id;
            marker.setAttribute('data-note-id', note.id);
            marker.setAttribute('data-phase', note.phase || 'unknown');
            marker.setAttribute('data-count', '1');
            marker.style.left = x + 'px';
            marker.style.top = y + 'px';
            
            // Popup with note text
            const popup = document.createElement('div');
            popup.className = 'marker-popup';
            popup.innerHTML = `
                <div class="marker-popup-text">${escapeHtml(note.text.substring(0, 100))}${note.text.length > 100 ? '...' : ''}</div>
                ${note.acceptance ? `<div class="marker-popup-acceptance">wow if: ${escapeHtml(note.acceptance)}</div>` : ''}
            `;
            marker.appendChild(popup);
            
            marker.onclick = (e) => {
                e.stopPropagation();
                marker.classList.toggle('open');
            };
            
            document.body.appendChild(marker);
        }
        
        function renderAllMarkers() {
            // Remove old markers
            document.querySelectorAll('.element-note-marker').forEach(m => m.remove());
            
            // Create markers for all notes with click coordinates
            feedbackNotes.forEach(note => {
                if (note.clickX !== null && note.clickX !== undefined && 
                    note.clickY !== null && note.clickY !== undefined) {
                    createElementMarker(note);
                }
            });
        }
        
        function updateMarkersForPhase() {
            // Show only markers for current phase
            const currentPhase = state.phase || 'waiting';
            document.querySelectorAll('.element-note-marker').forEach(marker => {
                const markerPhase = marker.getAttribute('data-phase');
                // Show if same phase or if phase is 'unknown'
                const show = markerPhase === currentPhase || markerPhase === 'unknown';
                marker.style.display = show ? 'flex' : 'none';
            });
        }
        
        // Wire up inline input enter key
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.getElementById('noteInlineInput');
            if (input) {
                input.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter' && !e.shiftKey) {
                        e.preventDefault();
                        // Move to acceptance input, don't save yet
                        document.getElementById('noteAcceptanceInput')?.focus();
                    }
                    if (e.key === 'Escape') {
                        hideInlineNote();
                    }
                });
            }
            
            // Acceptance criteria input - Enter saves
            const acceptanceInput = document.getElementById('noteAcceptanceInput');
            if (acceptanceInput) {
                acceptanceInput.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        saveInlineNote();
                    }
                    if (e.key === 'Escape') {
                        hideInlineNote();
                    }
                });
            }
            
            // Click-off to dismiss inline note
            document.addEventListener('click', (e) => {
                const inlineNote = document.getElementById('labNoteInline');
                if (inlineNote?.classList.contains('show')) {
                    if (!e.target.closest('.lab-note-inline') && !e.target.closest('.lab-controls')) {
                        hideInlineNote();
                    }
                }
            });
        });
        
        function hidePickerHighlight() {
            const highlight = document.getElementById('labPickerHighlight');
            const label = document.getElementById('labPickerLabel');
            if (highlight) {
                highlight.style.width = '0';
                highlight.style.height = '0';
            }
            if (label) label.textContent = '';
        }
        
        // Rich element context for notes
        let pickedElementContext = null;
        
        function getElementContext(el) {
            // Basic selector
            let selector = '';
            if (el.id) selector = '#' + el.id;
            else if (el.className && typeof el.className === 'string') {
                const classes = el.className.split(' ').filter(c => c && !c.startsWith('active') && !c.startsWith('show'));
                if (classes.length) selector = '.' + classes[0];
            }
            if (!selector) selector = el.tagName.toLowerCase();
            
            // Text content (truncated)
            let text = (el.textContent || '').trim().substring(0, 50);
            if (text.length === 50) text += '...';
            
            // Parent chain (up to 3 levels)
            let parentChain = [];
            let parent = el.parentElement;
            for (let i = 0; i < 3 && parent; i++) {
                let pSel = '';
                if (parent.id) pSel = '#' + parent.id;
                else if (parent.className && typeof parent.className === 'string') {
                    const c = parent.className.split(' ').filter(c => c)[0];
                    if (c) pSel = '.' + c;
                }
                if (pSel) parentChain.unshift(pSel);
                parent = parent.parentElement;
            }
            
            // Nearby label (title, aria-label, or adjacent label text)
            let label = el.title || el.getAttribute('aria-label') || '';
            if (!label) {
                const prev = el.previousElementSibling;
                if (prev && prev.classList.contains('stat-icon')) {
                    label = 'stat icon';
                }
                const parentLabel = el.closest('[title]');
                if (parentLabel) label = parentLabel.title;
            }
            
            // Region (where on screen)
            const rect = el.getBoundingClientRect();
            let region = 'middle';
            if (rect.top < window.innerHeight * 0.2) region = 'top';
            else if (rect.top > window.innerHeight * 0.7) region = 'bottom';
            
            // State
            let states = [];
            if (el.classList.contains('active')) states.push('active');
            if (el.classList.contains('show')) states.push('visible');
            if (el.classList.contains('disabled') || el.disabled) states.push('disabled');
            if (el.classList.contains('hidden') || el.style.display === 'none') states.push('hidden');
            
            return {
                selector: selector,
                text: text,
                parentChain: parentChain.join(' > '),
                label: label,
                region: region,
                states: states.join(', ') || 'default',
                tag: el.tagName.toLowerCase()
            };
        }
        
        function formatElementContext(ctx) {
            // Format for display in note
            let parts = [ctx.selector];
            if (ctx.text && ctx.text.length < 20) parts.push(`"${ctx.text}"`);
            if (ctx.label) parts.push(`(${ctx.label})`);
            if (ctx.parentChain) parts.push(`in ${ctx.parentChain}`);
            return parts.join(' ');
        }
        
        function getElementSelector(el) {
            if (el.id) return '#' + el.id;
            if (el.dataset.phase) return `[data-phase="${el.dataset.phase}"]`;
            if (el.dataset.role) return `[data-role="${el.dataset.role}"]`;
            if (el.className && typeof el.className === 'string') {
                const classes = el.className.split(' ').filter(c => c && !c.startsWith('active') && !c.startsWith('show'));
                if (classes.length) return '.' + classes[0];
            }
            return el.tagName.toLowerCase();
        }
        
        function getStepNumber(phase) {
            const steps = {
                'plan1': 1, 'plan2': 2, 'plan3': 3,
                'waiting': 4, 'collect': 5, 'patterns': 6,
                'experiment': 7, 'commit': 8,
                'suggestions': 7, 'ballot': 8, 'voteMonitor': 9
            };
            return steps[phase] || '?';
        }
        
        function getStepName(phase) {
            const names = {
                'plan1': 'who', 'plan2': 'how', 'plan3': 'when',
                'waiting': 'connect', 'collect': 'reflect', 'patterns': 'patterns',
                'experiment': 'try', 'commit': 'commit',
                'suggestions': 'suggest', 'ballot': 'ballot', 'voteMonitor': 'vote'
            };
            return names[phase] || phase;
        }
        
        /*
         * LAB STATE SHORTHAND DICTIONARY
         * ===============================
         * Compact format for context exchange:
         * 
         * PHASE CODES:
         *   P1=plan/who, P2=plan/how, P3=plan/when
         *   W=waiting/lobby, C=collect/reflect, PT=patterns
         *   X=experiment, CM=commit
         * 
         * ROLE: T=teacher/facilitator, S=student/participant
         * 
         * WHO CODES (usecase):
         *   CL=classroom, MT=meeting, WK=workshop, 1:1=one-on-one, etc.
         * 
         * CONTRACT: OW=ouch-wow, PB=pulse-ballot, etc.
         * 
         * FLAGS:
         *   LAB=lab mode active, PAU=paused, PIK=picking
         * 
         * COUNTS:
         *   pN=N people, sN=N signals, tMM:SS=timer
         * 
         * EXPERIMENTS (on):
         *   xHJ=hideJourneyStatus, xBP=betterPrompts, xTA=timerAutoEnd, xCM=chatMode
         * 
         * Example: "P1|T|CL|OW|LAB|p3|s12|t05:30|xBP,xTA"
         */
        
        /*
        ============ LAB STATE DICTIONARY ============
        Export format: PHASE|ROLE|WHO|CONTRACT|FLAGS|pN|sN|tMM:SS|xEXPS
        
        PHASE:                  ROLE:           WHO:
        P1 = plan1 (who)        T = teacher     CL = classroom
        P2 = plan2 (how)        S = student     MT = staff-meeting
        P3 = plan3 (when)                       WK = workshop
        W  = waiting/lobby                      1:1 = 1-on-1
        C  = collect/reflect                    ON = online
        PT = patterns                           HY = hybrid
        X  = experiment
        CM = commit             CONTRACT:       FLAGS:
        SG = suggestions        OW = ouch-wow   LAB = lab mode on
        BL = ballot             PB = pulse-bal  PAU = paused
        VM = voteMonitor        FF = fist-five  PIK = picking element
                                RT = rose-thorn LOB = in lobby
                                PD = plus-delta REF = reflecting
        
        EXPERIMENTS:            COUNTS:
        HJ = hideJourneyStatus  pN = N people (includes you)
        BP = betterPrompts      sN = N signals
        TA = timerAutoEnd       tMM:SS = timer value
        CM = chatMode
        
        Example: W|T|CL|OW|LAB|p1|s0|t--:--|xHJ,BP,TA,CM
        Means: Waiting phase, Teacher, Classroom, Ouch-Wow contract,
               Lab mode on, 1 person, 0 signals, timer not started,
               all 4 experiments active
        ============================================
        */
        
        function getLabStateSnapshot() {
            // Phase code
            const phaseCodes = {
                'plan1': 'P1', 'plan2': 'P2', 'plan3': 'P3',
                'waiting': 'W', 'collect': 'C', 'patterns': 'PT',
                'experiment': 'X', 'commit': 'CM',
                'suggestions': 'SG', 'ballot': 'BL', 'voteMonitor': 'VM'
            };
            const phase = phaseCodes[state.phase] || state.phase;
            
            // Role
            const role = state.role === 'teacher' ? 'T' : 'S';
            
            // Who (usecase) - get from current selection
            const whoCodes = {
                'classroom': 'CL', 'staff-meeting': 'MT', 'workshop': 'WK',
                '1-on-1': '1:1', 'online': 'ON', 'hybrid': 'HY'
            };
            const who = whoCodes[state.who] || state.who?.substring(0,3).toUpperCase() || '?';
            
            // Contract
            const contractCodes = {
                'ouch-wow': 'OW', 'pulse-ballot': 'PB', 'fist-five': 'FF',
                'rose-thorn': 'RT', 'plus-delta': 'PD'
            };
            const contract = contractCodes[state.contract] || state.contract?.substring(0,2).toUpperCase() || '?';
            
            // Flags
            let flags = [];
            if (labModeActive) flags.push('LAB');
            if (labPaused) flags.push('PAU');
            if (labPicking) flags.push('PIK');
            // TODO: add LOB (lobby) and REF (reflecting) when flow is updated
            
            // Counts
            const people = (session?.people?.length || 0) + 1; // +1 for you
            const signals = session?.signals?.length || 0;
            const timer = document.getElementById('timerDisplay')?.textContent || '--:--';
            
            // Active experiments
            let exps = [];
            if (experiments.hideJourneyStatus) exps.push('HJ');
            if (experiments.betterPrompts) exps.push('BP');
            if (experiments.timerAutoEnd) exps.push('TA');
            if (experiments.chatMode) exps.push('CM');
            
            // Build compact string
            let parts = [phase, role, who, contract];
            if (flags.length) parts.push(flags.join(','));
            parts.push(`p${people}`);
            parts.push(`s${signals}`);
            parts.push(`t${timer}`);
            if (exps.length) parts.push(`x${exps.join(',')}`);
            
            return parts.join('|');
        }
        
        function openNoteModal() {
            const stepNum = getStepNumber(state.phase);
            const stepName = getStepName(state.phase);
            const role = state.role === 'teacher' ? 'facilitator' : 'participant';
            
            document.getElementById('feedbackContext').innerHTML = `
                <span class="feedback-context-phase">${stepNum}-${stepName}</span>
                <span class="feedback-context-sep">·</span>
                <span class="feedback-context-role">${role}</span>
            `;
            
            document.getElementById('feedbackElement').textContent = pickedElement || '(no element)';
            document.getElementById('feedbackInput').value = '';
            document.getElementById('labFeedbackModal').classList.add('show');
            document.getElementById('feedbackInput').focus();
        }
        
        function cancelFeedback() {
            document.getElementById('labFeedbackModal').classList.remove('show');
            pickedElement = null;
        }
        
        function saveFeedback() {
            const text = document.getElementById('feedbackInput').value.trim();
            if (!text) {
                cancelFeedback();
                return;
            }
            
            const note = {
                phase: state.phase,
                step: getStepNumber(state.phase) + '-' + getStepName(state.phase),
                role: state.role === 'teacher' ? 'facilitator' : 'participant',
                element: pickedElement || null,
                text: text,
                timestamp: new Date().toISOString()
            };
            
            feedbackNotes.push(note);
            saveNotes();
            updateNotesCount();
            pickedElement = null;
            document.getElementById('labFeedbackModal').classList.remove('show');
        }
        
        function showNotes() {
            const panel = document.getElementById('labNotesPanel');
            panel.style.display = 'block';
            renderStoredNotes();
            renderChat();
            updateNotesBadge();
        }
        
        // Render stored notes in the tracker content area
        function renderStoredNotes() {
            const container = document.getElementById('trackerContent');
            const notes = feedbackNotes || [];
            
            if (notes.length === 0) {
                container.innerHTML = '<div class="stored-notes-empty">no notes yet — what are you noticing?</div>';
                return;
            }
            
            let html = '<div class="stored-notes-list">';
            notes.forEach((note, i) => {
                const time = new Date(note.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                html += `<div class="stored-note-item" data-id="${note.id}">
                    <div class="stored-note-meta">
                        <span>${note.phase || 'general'}</span>
                        <span>${time}</span>
                    </div>
                    <div class="stored-note-text">${escapeHtml(note.text)}</div>
                    ${note.acceptance ? `<div class="stored-note-wowif">wow if: ${escapeHtml(note.acceptance)}</div>` : ''}
                </div>`;
            });
            html += '</div>';
            container.innerHTML = html;
        }
        
        // Escape HTML for safe rendering
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        
        // Conversation state
        const trackerState = {
            threads: []
        };
        
        // ============ API THREAD SYSTEM ============
        // Call Claude API directly from the HTML
        
        const API_CONFIG = {
            endpoint: 'https://api.anthropic.com/v1/messages',
            model: 'claude-sonnet-4-20250514',
            maxTokens: 4096
        };
        
        // Get API key (prompt once per session, store in sessionStorage)
        function getApiKey() {
            let key = sessionStorage.getItem('owl-api-key');
            if (!key) {
                key = prompt('Enter your Anthropic API key (stored in session only):');
                if (key) sessionStorage.setItem('owl-api-key', key);
            }
            return key;
        }
        
        // Build context for API call
        function buildThreadContext(thread) {
            // Rich context for API calls — aligned with ORIENTATION in protocol
            const note = thread.note;
            const phaseName = getStepName(state.phase);
            const phaseNum = getStepNumber(state.phase);
            
            // Get relevant code section if element is specified
            let codeContext = '';
            if (note.element) {
                const el = document.querySelector(note.element);
                if (el) {
                    codeContext = `
ELEMENT HTML (what I'm pointing at):
${el.outerHTML.substring(0, 1000)}${el.outerHTML.length > 1000 ? '...[truncated]' : ''}
`;
                }
            }
            
            return `╔═════════════════════════════════════════════════════════════════════════════╗
║ ORIENTATION — what we're building and how                                   ║
╚═════════════════════════════════════════════════════════════════════════════╝

THE MOUNTAIN:
Teachers who see their students. Students who feel heard.
Anonymous reflection → immediate action, not data hoarding.
This is about the effort of the beautiful mountain we are building.
One tree at a time.

WHO I AM:
Sam — educator, systems thinker, building iteratively with Claude.
I prefer: concrete code changes, direct answers, no hedging.
I test by doing, course-correct via next message.

WHAT THIS IS:
ouch wow lab (owl) — single HTML file (~24k lines) that IS the product.
SERVICE: teachers collect anonymous ouch/wow → see patterns → try experiments → commit
LAB: point at elements, make notes, track threads, call Claude via API

Current version: owl_46_compass-rose
Journey: who → how → when → connect → reflect → patterns → try → commit

╔═════════════════════════════════════════════════════════════════════════════╗
║ WHERE I AM RIGHT NOW                                                        ║
╚═════════════════════════════════════════════════════════════════════════════╝

Phase: ${phaseName} (step ${phaseNum})
Role: ${state.role === 'teacher' ? 'facilitator' : 'participant'}
Lab mode: ${document.body.classList.contains('lab-mode') ? 'ON' : 'OFF'}

Phase meanings:
  connect: waiting room, gathering
  reflect: collecting ouch/wow signals
  patterns: reviewing what emerged
  try: running micro-experiments
  commit: deciding what to keep

╔═════════════════════════════════════════════════════════════════════════════╗
║ MY NOTE                                                                     ║
╚═════════════════════════════════════════════════════════════════════════════╝

"${note.text}"

${note.element ? `Element: ${note.element}` : ''}
${note.context ? `Context: ${JSON.stringify(note.context, null, 2)}` : ''}
${codeContext}

╔═════════════════════════════════════════════════════════════════════════════╗
║ WHAT I NEED                                                                 ║
╚═════════════════════════════════════════════════════════════════════════════╝

1. Understanding: What am I pointing at? (1 sentence)

2. Change: Be specific —
   CSS: which selector, what property, what value
   JS: which function, what logic
   HTML: which element, what modification

3. Format:
   FIND: [exact text to find]
   REPLACE: [exact text to replace with]

No preamble. Start with understanding. Show the work.`;
        }
        
        // Send thread to API
        async function sendThreadToApi(threadId) {
            const thread = trackerState.threads.find(t => t.id === threadId);
            if (!thread) return;
            
            const apiKey = getApiKey();
            if (!apiKey) {
                thread.status = 'error';
                thread.error = 'No API key provided';
                renderTracker();
                return;
            }
            
            // Update status
            thread.status = 'sending';
            thread.sentAt = new Date().toISOString();
            renderTracker();
            
            try {
                const response = await fetch(API_CONFIG.endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'x-api-key': apiKey,
                        'anthropic-version': '2023-06-01',
                        'anthropic-dangerous-direct-browser-access': 'true'
                    },
                    body: JSON.stringify({
                        model: API_CONFIG.model,
                        max_tokens: API_CONFIG.maxTokens,
                        messages: [{
                            role: 'user',
                            content: buildThreadContext(thread)
                        }]
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`API error: ${response.status}`);
                }
                
                const data = await response.json();
                const content = data.content?.[0]?.text || 'No response';
                
                thread.status = 'awaiting_user';
                thread.response = content;
                thread.respondedAt = new Date().toISOString();
                
            } catch (err) {
                thread.status = 'error';
                thread.error = err.message;
            }
            
            saveTrackerState();
            renderTracker();
        }
        
        // Send all pending threads
        async function sendAllThreadsToApi() {
            const pending = trackerState.threads.filter(t => t.status === 'needs_claude');
            for (const thread of pending) {
                await sendThreadToApi(thread.id);
            }
        }
        
        // ============ END API THREAD SYSTEM ============
        
        // ============ PHASE THREADS SYSTEM ============
        // Track threads per journey phase
        
        function getPhaseCode(phase) {
            const codes = {
                'plan1': 'who', 'plan2': 'how', 'plan3': 'when',
                'waiting': 'connect', 'collect': 'reflect', 'patterns': 'patterns',
                'experiment': 'try', 'commit': 'commit'
            };
            return codes[phase] || phase;
        }
        
        function getNotesForPhase(phase) {
            return feedbackNotes.filter(n => n.phase === phase);
        }
        
        function updateFloatingPhaseIndicator() {
            const indicator = document.getElementById('floatingPhaseIndicator');
            const nameEl = document.getElementById('floatingPhaseName');
            const countEl = document.getElementById('floatingPhaseCount');
            
            if (!indicator) return;
            
            const currentPhase = state.phase || 'waiting';
            const phaseName = getPhaseCode(currentPhase);
            const notes = getNotesForPhase(currentPhase);
            const count = notes.length;
            
            nameEl.textContent = phaseName;
            countEl.textContent = count;
            
            indicator.classList.toggle('empty', count === 0);
            indicator.classList.toggle('has-threads', count > 0);
        }
        
        // Also update the button indicator on waiting screen
        function updatePhaseThreadIndicators() {
            // Update floating indicator
            updateFloatingPhaseIndicator();
            
            // Update main thread dot
            updateMainThreadDot();
            
            // Update journey rail badges
            document.querySelectorAll('.journey-step-threads').forEach(badge => {
                const phase = badge.dataset.phase;
                const notes = getNotesForPhase(phase);
                const count = notes.length;
                
                badge.textContent = count || '';
                badge.classList.toggle('has-threads', count > 0);
            });
        }
        
        function showPhaseThreads(phase) {
            const panel = document.getElementById('phaseThreadsPanel');
            const phaseLabel = document.getElementById('phaseThreadsPhase');
            const content = document.getElementById('phaseThreadsContent');
            
            const phaseName = getPhaseCode(phase);
            phaseLabel.textContent = phaseName;
            
            const notes = getNotesForPhase(phase);
            
            if (notes.length === 0) {
                content.innerHTML = `
                    <div class="phase-threads-empty">
                        No notes on <strong>${phaseName}</strong> yet.<br>
                        Use the picker (n) to add one.
                    </div>
                `;
            } else {
                content.innerHTML = notes.map(n => `
                    <div class="phase-thread-item" data-id="${n.id}">
                        <div class="phase-thread-text">${escapeHtml(n.text)}</div>
                        <div class="phase-thread-meta">
                            <span class="phase-thread-element">${n.element || 'general'}</span>
                        </div>
                    </div>
                `).join('');
            }
            
            panel.classList.add('show');
        }
        
        function closePhaseThreads() {
            document.getElementById('phaseThreadsPanel').classList.remove('show');
        }
        
        function addPhaseThread() {
            closePhaseThreads();
            // Activate picker
            togglePicker();
        }
        
        // Update indicators when tracker changes
        const originalSaveTrackerState = saveTrackerState;
        saveTrackerState = function() {
            originalSaveTrackerState();
            updatePhaseThreadIndicators();
        };
        
        // Initial update
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(updatePhaseThreadIndicators, 100);
        });
        
        // ============ END PHASE THREADS SYSTEM ============
        
        // Add a new note - queues for Claude's response
        function addQuickNote() {
            const input = document.getElementById('quickAddInput');
            const wowIfInput = document.getElementById('quickAddWowIf');
            const text = input.value.trim();
            if (!text) return;
            
            // Check if this is a paste of responses (starts with [thread-)
            if (text.match(/^\[thread-/)) {
                importFromText(text);
                input.value = '';
                if (wowIfInput) wowIfInput.value = '';
                return;
            }
            
            const wowIf = wowIfInput ? wowIfInput.value.trim() : '';
            
            const note = {
                text: text,
                step: getStepNumber(state.phase) + '-' + getStepName(state.phase),
                role: state.role === 'teacher' ? 'facilitator' : 'participant',
                element: null,
                timestamp: new Date().toISOString(),
                acceptance: wowIf || null
            };
            
            // Create thread waiting for Claude
            const thread = {
                id: 'thread-' + Date.now(),
                note: note,
                response: null, // Waiting for Claude
                status: 'needs_claude',
                createdAt: new Date().toISOString()
            };
            
            trackerState.threads.unshift(thread);
            
            input.value = '';
            if (wowIfInput) wowIfInput.value = '';
            saveTrackerState();
            updateNotesCount();
            renderStoredNotes();
            checkMilestones();
        }
        
        // Import responses from pasted text
        function importFromText(text) {
            const lines = text.split('\n');
            let currentThreadId = null;
            let currentResponse = [];
            const responses = [];
            
            lines.forEach(line => {
                const match = line.match(/^\[([^\]]+)\]:\s*(.*)$/);
                if (match) {
                    if (currentThreadId && currentResponse.length > 0) {
                        responses.push({
                            threadId: currentThreadId,
                            response: currentResponse.join('\n').trim()
                        });
                    }
                    currentThreadId = match[1];
                    currentResponse = [match[2]];
                } else if (currentThreadId && line.trim()) {
                    currentResponse.push(line);
                }
            });
            
            if (currentThreadId && currentResponse.length > 0) {
                responses.push({
                    threadId: currentThreadId,
                    response: currentResponse.join('\n').trim()
                });
            }
            
            let applied = 0;
            responses.forEach(r => {
                const thread = trackerState.threads.find(t => t.id === r.threadId);
                if (thread) {
                    if (r.response.toUpperCase().startsWith('EXPERIMENT:')) {
                        thread.response = r.response.substring(11).trim();
                        thread.isExperiment = true;
                    } else {
                        thread.response = r.response;
                    }
                    thread.status = 'awaiting_user';
                    applied++;
                }
            });
            
            if (applied > 0) {
                saveTrackerState();
                updateNotesCount();
                renderTracker();
                
                // Flash feedback
                const input = document.getElementById('quickAddInput');
                input.placeholder = `${applied} responses imported`;
                setTimeout(() => {
                    input.placeholder = 'what are you noticing?';
                }, 2000);
            }
        }
        
        function updateQuickAddBtn() {
            const input = document.getElementById('quickAddInput');
            const btn = document.getElementById('quickAddBtn');
            if (input && btn) {
                btn.classList.toggle('ready', input.value.trim().length > 0);
            }
        }
        
        // Generate Claude's response to a note
        function generateResponse(noteText) {
            const lower = noteText.toLowerCase();
            
            // Design questions
            if (lower.includes('how might') || lower.includes('what if') || lower.includes('should we')) {
                if (lower.includes('connect') && lower.includes('reflect')) {
                    return 'What if there was a brief connection moment before reflection opens — like a shared prompt or quick pair check-in?';
                }
                if (lower.includes('weight') || lower.includes('balance')) {
                    return 'I could adjust the visual weight here. Want to try making this section feel lighter?';
                }
                return 'That\'s worth exploring. Want to try it in the next session?';
            }
            
            // Bug reports
            if (lower.includes('isn\'t') || lower.includes('doesn\'t') || lower.includes('not working') || 
                lower.includes('broken') || lower.includes('bug')) {
                if (lower.includes('count')) {
                    return 'Sounds like the counter isn\'t updating. I can flag this as a bug to fix.';
                }
                return 'That sounds like something\'s not working right. Want me to log it for fixing?';
            }
            
            // Timing/pace
            if (lower.includes('rush') || lower.includes('fast') || lower.includes('slow') || lower.includes('time') || lower.includes('pace')) {
                return 'I hear you on the pacing. What if we added a pause or buffer here?';
            }
            
            // Participation
            if (lower.includes('same') && (lower.includes('people') || lower.includes('students'))) {
                return 'The "same people always" pattern. Try adding wait time before anyone responds?';
            }
            
            // Feeling/experience
            if (lower.includes('feels') || lower.includes('strange') || lower.includes('weird') || lower.includes('off')) {
                return 'Something feels off here. Can you say more about what you\'re noticing?';
            }
            
            // Confusion/clarity
            if (lower.includes('confus') || lower.includes('unclear') || lower.includes('lost')) {
                return 'Sounds like there\'s confusion. Check for understanding before moving on?';
            }
            
            // Stress/pressure
            if (lower.includes('stress') || lower.includes('pressure') || lower.includes('anxious')) {
                return 'That pressure is worth noticing. What would reduce the stress here?';
            }
            
            // Default - ask for more
            return 'Tell me more about what you\'re noticing here.';
        }
        
        // User accepts Claude's suggestion
        function acceptResponse(threadId) {
            const thread = trackerState.threads.find(t => t.id === threadId);
            if (thread) {
                thread.status = 'running';
                thread.experiment = thread.response;
                thread.startedAt = new Date().toISOString();
                saveTrackerState();
                renderTracker();
            }
        }
        
        // User declines
        function declineResponse(threadId) {
            const thread = trackerState.threads.find(t => t.id === threadId);
            if (thread) {
                thread.status = 'resolved';
                thread.resolution = 'noted';
                saveTrackerState();
                renderTracker();
            }
        }
        
        // User types a response
        function respondToThread(threadId, text) {
            if (!text.trim()) return;
            
            const thread = trackerState.threads.find(t => t.id === threadId);
            if (thread) {
                // Update with user's clarification and generate new response
                thread.note.text += ' — ' + text.trim();
                thread.response = generateResponse(thread.note.text);
                saveTrackerState();
                renderTracker();
            }
        }
        
        // Resolve a running experiment
        function resolveThread(threadId, resolution) {
            const thread = trackerState.threads.find(t => t.id === threadId);
            if (thread) {
                thread.status = 'resolved';
                thread.resolution = resolution;
                thread.resolvedAt = new Date().toISOString();
                saveTrackerState();
                renderTracker();
            }
        }
        
        // State persistence
        function loadTrackerState() {
            // Clear old tracker threads - we only use feedbackNotes now
            trackerState.threads = [];
            localStorage.removeItem(TRACKER_KEY);
            
            // Initialize comfy share (reads from feedbackNotes now)
            setTimeout(updateComfyShare, 100);
            
            // Render element markers from feedbackNotes
            setTimeout(renderAllMarkers, 200);
            
            // Update all indicators
            setTimeout(updatePhaseThreadIndicators, 250);
        }
        
        function addStubData() {
            // Start empty - no stub data
        }
        
        function saveTrackerState() {
            // No-op - we use saveNotes() now
            updateComfyShare();
        }
        
        // Comfy share — warm presence for open notes
        function updateComfyShare() {
            const comfy = document.getElementById('comfyShare');
            if (!comfy) return;
            
            // Get notes count
            const noteCount = feedbackNotes?.length || 0;
            
            if (noteCount === 0) {
                comfy.classList.remove('has-threads');
                return;
            }
            
            comfy.classList.add('has-threads');
            
            // Show oldest note preview
            const oldest = feedbackNotes[feedbackNotes.length - 1];
            const textEl = document.getElementById('comfyShareText');
            const countEl = document.getElementById('comfyShareCount');
            
            if (oldest && textEl) {
                const preview = oldest.text.length > 40 
                    ? oldest.text.substring(0, 40) + '...'
                    : oldest.text;
                textEl.textContent = preview;
            }
            if (countEl) {
                countEl.textContent = noteCount;
            }
        }
        
        function openOldestThread() {
            if (feedbackNotes.length === 0) return;
            
            // Open notes panel
            showNotes();
        }
        
        // Initialize
        loadTrackerState();
        
        // Quick export - one click copies to clipboard
        // First turn: warm welcome with context. Multi-turn: brief.
        function quickExport() {
            const notes = feedbackNotes || [];
            
            if (notes.length === 0) {
                // Flash the icon to show nothing to export
                const icon = document.getElementById('exportIcon');
                if (icon) {
                    icon.textContent = '·';
                    icon.style.opacity = '0.3';
                    setTimeout(() => icon.style.opacity = '1', 300);
                }
                return;
            }
            
            // Check if this is first export this session (warm intro) or continuation (brief)
            const exportCount = parseInt(sessionStorage.getItem('exportCount') || '0');
            const isFirstTurn = exportCount === 0;
            sessionStorage.setItem('exportCount', (exportCount + 1).toString());
            
            let text = '';
            
            if (isFirstTurn) {
                // Warm welcome for a new Claude
                text += `Hi! I'm building ouch wow lab — a reflection tool for teachers and students. `;
                text += `We're designing it together, one turn at a time.\n\n`;
                text += `The HTML file I'll share has everything: the app, a changelog, and a protocol section (FOR CLAUDE) with context.\n\n`;
                
                // Orient: where am I in the app right now?
                text += `Right now I'm looking at:\n`;
                text += `  Phase: ${getStepName(state.phase)} (step ${getStepNumber(state.phase)})\n`;
                text += `  Role: ${state.role === 'teacher' ? 'facilitator' : 'participant'}\n`;
                text += `  Lab mode: ${labModeActive ? 'on (building/testing)' : 'off'}\n\n`;
                
                text += `Here's what I'm noticing:\n`;
            } else {
                // Brief for continuation
                text += `--- noticing (${getStepName(state.phase)}) ---\n`;
            }
            
            // Notes with rich context
            notes.forEach((note, i) => {
                // Build location string from context
                let location = note.element || note.phase || 'general';
                if (note.context) {
                    const ctx = note.context;
                    location = ctx.selector || location;
                    if (ctx.parentChain) location += ` in ${ctx.parentChain}`;
                    if (ctx.region) location += ` [${ctx.region}]`;
                }
                
                text += `${i + 1}. ${location}\n`;
                text += `   "${note.text}"\n`;
                // Include acceptance criteria if present
                if (note.acceptance) {
                    text += `   wow if: ${note.acceptance}\n`;
                }
            });
            
            // Copy to clipboard
            navigator.clipboard.writeText(text).then(() => {
                // Flash feedback on the icon
                const icon = document.getElementById('exportIcon');
                const btn = document.querySelector('.lab-export-btn');
                if (icon && btn) {
                    icon.textContent = '✓';
                    btn.classList.add('copied');
                    
                    // Clear notes after successful copy
                    feedbackNotes = [];
                    saveNotes();
                    updateNotesCount();
                    renderAllMarkers();  // Remove markers
                    
                    setTimeout(() => {
                        icon.textContent = '·';
                        btn.classList.remove('copied');
                    }, 1500);
                }
            }).catch(() => {
                // Fallback - show modal
                showExportModal(text);
            });
        }
        
        // Export threads that need Claude's response (for modal/panel)
        function exportTrackerData() {
            const notes = feedbackNotes || [];
            
            // Reload errors from localStorage in case they're out of sync
            const currentErrors = JSON.parse(localStorage.getItem(ERROR_LOG_KEY) || '[]');
            
            // Check if first export (warm) or continuation (brief)
            const exportCount = parseInt(sessionStorage.getItem('exportCount') || '0');
            const isFirstTurn = exportCount === 0;
            sessionStorage.setItem('exportCount', (exportCount + 1).toString());
            
            let text = '';
            
            if (isFirstTurn) {
                // Warm welcome for a new Claude
                text += `Hi! I'm Sam, and I'm building ouch wow lab — a reflection tool where teachers facilitate anonymous, ephemeral feedback from students.\n\n`;
                text += `We design it together: I notice things in the UI, export my notes to you, and you respond with a new version of the HTML file. The file has everything — the app, changelog, and a FOR CLAUDE protocol section.\n\n`;
                
                // Orient: where am I right now?
                text += `WHERE I AM:\n`;
                text += `  Screen: ${getStepName(state.phase)} (step ${getStepNumber(state.phase)})\n`;
                text += `  Role: ${state.role === 'teacher' ? 'facilitator' : 'participant'} view\n`;
                text += `  Lab mode: ${labModeActive ? 'ON (building/testing)' : 'off'}\n`;
                text += `  People: ${(session?.people?.length || 0) + 1}\n\n`;
                
                text += `WHAT I'M NOTICING:\n\n`;
            } else {
                // Brief continuation
                text += `--- noticing (${getStepName(state.phase)}, ${labModeActive ? 'lab on' : 'lab off'}) ---\n\n`;
            }
            
            // Script errors first (most urgent)
            if (currentErrors.length > 0) {
                text += `⚠ Script errors:\n`;
                currentErrors.forEach(e => {
                    text += `  ${e.msg}${e.line ? ` (line ${e.line})` : ''}\n`;
                });
                text += '\n';
            }
            
            // Notes with full context
            if (notes.length > 0) {
                notes.forEach((note, i) => {
                    // Build rich location from context
                    let location = note.element || note.phase || 'general';
                    let details = [];
                    
                    if (note.context) {
                        const ctx = note.context;
                        location = ctx.selector || location;
                        if (ctx.text && ctx.text.length < 30) details.push(`text: "${ctx.text}"`);
                        if (ctx.parentChain) details.push(`in: ${ctx.parentChain}`);
                        if (ctx.region) details.push(`screen: ${ctx.region}`);
                        if (ctx.states && ctx.states !== 'default') details.push(`state: ${ctx.states}`);
                    }
                    
                    text += `${i + 1}. ${location}\n`;
                    if (details.length > 0) {
                        text += `   (${details.join(', ')})\n`;
                    }
                    text += `   "${note.text}"\n`;
                    // Include acceptance criteria if present
                    if (note.acceptance) {
                        text += `   wow if: ${note.acceptance}\n`;
                    }
                    text += '\n';
                });
            }
            
            if (isFirstTurn) {
                text += `---\nPlease read the FOR CLAUDE section in the HTML file, then respond with a new versioned file. Looking forward to building together!\n`;
            }
            
            // Clear notes after export
            feedbackNotes = [];
            saveNotes();
            
            // Clear errors too
            clearErrors();
            
            renderStoredNotes();
            renderChat();
            updateNotesCount();
            renderAllMarkers();
            
            // Copy directly to clipboard
            navigator.clipboard.writeText(text).then(() => {
                showToastMessage('copied to clipboard');
            }).catch(() => {
                // Fallback for older browsers
                const textarea = document.createElement('textarea');
                textarea.value = text;
                document.body.appendChild(textarea);
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
                showToastMessage('copied to clipboard');
            });
        }
        
        // Toast message helper
        function showToastMessage(msg) {
            const existing = document.querySelector('.export-toast');
            if (existing) existing.remove();
            
            const toast = document.createElement('div');
            toast.className = 'export-toast';
            toast.textContent = msg;
            toast.style.cssText = `
                position: fixed;
                bottom: 80px;
                left: 50%;
                transform: translateX(-50%);
                background: #333;
                color: white;
                padding: 10px 20px;
                border-radius: 20px;
                font-size: 14px;
                z-index: 9999;
                animation: fadeUp 0.3s ease;
            `;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 1500);
        }
        
        // Legacy modal functions - no longer used but keep stubs
        function showExportModal(text) {
            navigator.clipboard.writeText(text).then(() => {
                showToastMessage('copied to clipboard');
            });
        }
        
        function copyExportText() {}
        function closeExportModal() {}
        
        // Celebration system removed in owl_203 - stubs to prevent errors
        function checkMilestones() {}
        function loadCelebrationState() {}
        function dismissCelebration() {}
        
        // Chat mode removed in owl_203 - stub to prevent errors
        function renderChat() {}
        
        // Tracker rendering removed - stub to prevent errors
        function renderTracker() {}
        
        // Notes badge - alias for updateNotesCount
        function updateNotesBadge() { updateNotesCount(); }
        
        // Import Claude's responses
        function importResponses() {
            // Check both the backend test input and the inline import input
            let input = document.getElementById('backendTestInput');
            let text = input?.value?.trim();
            
            if (!text) {
                input = document.getElementById('importInput');
                text = input?.value?.trim();
            }
            
            if (!text) return;
            
            // Parse responses: [thread-id]: response text
            const lines = text.split('\n');
            let currentThreadId = null;
            let currentResponse = [];
            
            const responses = [];
            
            lines.forEach(line => {
                const match = line.match(/^\[([^\]]+)\]:\s*(.*)$/);
                if (match) {
                    // Save previous if exists
                    if (currentThreadId && currentResponse.length > 0) {
                        responses.push({
                            threadId: currentThreadId,
                            response: currentResponse.join('\n').trim()
                        });
                    }
                    currentThreadId = match[1];
                    currentResponse = [match[2]];
                } else if (currentThreadId && line.trim()) {
                    currentResponse.push(line);
                }
            });
            
            // Don't forget the last one
            if (currentThreadId && currentResponse.length > 0) {
                responses.push({
                    threadId: currentThreadId,
                    response: currentResponse.join('\n').trim()
                });
            }
            
            // Apply responses
            let applied = 0;
            responses.forEach(r => {
                const thread = trackerState.threads.find(t => t.id === r.threadId);
                if (thread) {
                    // Check if it's an experiment proposal
                    if (r.response.toUpperCase().startsWith('EXPERIMENT:')) {
                        thread.response = r.response.substring(11).trim();
                        thread.isExperiment = true;
                    } else {
                        thread.response = r.response;
                    }
                    thread.status = 'awaiting_user';
                    applied++;
                }
            });
            
            if (applied > 0) {
                saveTrackerState();
                renderTracker();
                if (input) input.value = '';
                
                // Update stats
                updateBackendTestStats();
                
                // Feedback
                const btn = document.getElementById('importBtn') || document.querySelector('.backend-test-btn');
                if (btn) {
                    const original = btn.textContent;
                    btn.textContent = `${applied} applied`;
                    setTimeout(() => btn.textContent = original, 1500);
                }
            }
        }
        
        // Backend test functions
        function toggleBackendTest() {
            const panel = document.getElementById('backendTestPanel');
            const isHidden = panel.style.display === 'none';
            panel.style.display = isHidden ? 'block' : 'none';
            if (isHidden) {
                updateBackendTestStats();
            }
        }
        
        function updateBackendTestStats() {
            const stats = document.getElementById('backendTestStats');
            if (!stats) return;
            
            const counts = {
                needs_claude: trackerState.threads.filter(t => t.status === 'needs_claude').length,
                awaiting_user: trackerState.threads.filter(t => t.status === 'awaiting_user').length,
                running: trackerState.threads.filter(t => t.status === 'running').length,
                stored: trackerState.threads.filter(t => t.status === 'stored').length,
                resolved: trackerState.threads.filter(t => t.status === 'resolved').length
            };
            
            stats.innerHTML = `threads: ${trackerState.threads.length} total<br>` +
                `needs_claude: ${counts.needs_claude} | awaiting_user: ${counts.awaiting_user}<br>` +
                `running: ${counts.running} | stored: ${counts.stored} | resolved: ${counts.resolved}`;
        }
        
        function generateTestResponses() {
            const needsClaude = trackerState.threads.filter(t => t.status === 'needs_claude');
            
            if (needsClaude.length === 0) {
                alert('No threads waiting for Claude');
                return;
            }
            
            // Generate mock responses
            const responses = needsClaude.map(t => {
                const mockResponse = generateResponse(t.note.text);
                return `[${t.id}]: ${mockResponse}`;
            }).join('\n\n');
            
            const input = document.getElementById('backendTestInput');
            if (input) {
                input.value = responses;
            }
        }
        
        function clearAllThreads() {
            if (confirm('Clear ALL threads? This cannot be undone.')) {
                trackerState.threads = [];
                saveTrackerState();
                updateNotesCount();
                renderTracker();
                updateBackendTestStats();
            }
        }
        
        // Add new thread that needs Claude's response
        function addNoteForClaude() {
            const input = document.getElementById('quickAddInput');
            const text = input.value.trim();
            if (!text) return;
            
            const note = {
                text: text,
                step: getStepNumber(state.phase) + '-' + getStepName(state.phase),
                role: state.role === 'teacher' ? 'facilitator' : 'participant',
                element: null,
                timestamp: new Date().toISOString()
            };
            
            // Create thread waiting for Claude
            const thread = {
                id: 'thread-' + Date.now(),
                note: note,
                response: null, // No response yet - waiting for Claude
                status: 'needs_claude',
                createdAt: new Date().toISOString()
            };
            
            trackerState.threads.unshift(thread);
            
            input.value = '';
            updateQuickAddBtn();
            saveTrackerState();
            updateNotesCount();
            renderTracker();
        }

        function clearAllNotes() {
            if (confirm('Clear all threads? This cannot be undone.')) {
                trackerState.threads = [];
                feedbackNotes = [];
                saveNotes();
                saveTrackerState();
                updateNotesCount();
                renderTracker();
            }
        }
        
        // Legacy export functions redirect to new tracker export
        function exportForClaude() {
            exportTrackerData();
        }
        
        function exportNotes() {
            exportTrackerData();
        }
        
        function copyNotes() {
            exportTrackerData();
        }
        
        function closeNotes() {
            document.getElementById('labNotesPanel').style.display = 'none';
        }
        
        function escapeHtml(str) {
            return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        }
        
        // Quality bar
        const qualityLabels = ['—', 'broken', 'rough', 'works', 'good', 'great'];
        
        function setQuality(level) {
            currentQuality = level;
            const fill = document.getElementById('qualityFill');
            const label = document.getElementById('qualityLabel');
            if (fill) fill.style.width = (level * 20) + '%';
            if (label) label.textContent = qualityLabels[level];
        }
        
        function cycleQuality(e) {
            // Click position determines quality level
            const track = e.currentTarget;
            const rect = track.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const pct = x / rect.width;
            const level = Math.max(1, Math.min(5, Math.ceil(pct * 5)));
            setQuality(level);
        }
        
        // Update notes count display
        function updateNotesCount() {
            const icon = document.getElementById('exportIcon');
            const btn = document.querySelector('.lab-export-btn');
            
            // Count all notes
            const total = feedbackNotes?.length || 0;
            
            if (icon) {
                icon.textContent = total > 0 ? total : '·';
            }
            if (btn) {
                btn.classList.toggle('has-notes', total > 0);
            }
            
            // Also update dot visibility
            updateMainThreadDot();
        }
        
        // Keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
            
            // Backtick toggles data model panel (works everywhere)
            if (e.code === 'Backquote') {
                e.preventDefault();
                toggleDebugConsole();
                return;
            }
            
            if (e.code === 'Space' && labModeActive) {
                e.preventDefault();
                togglePause();
            }
            
            if (e.key === 'n' && labModeActive) {
                e.preventDefault();
                togglePicker();
            }
            
            if (e.code === 'Escape') {
                if (debugConsoleVisible) { toggleDebugConsole(); return; }
                if (document.getElementById('labNoteInline')?.classList.contains('show')) hideInlineNote();
                else if (labPicking) togglePicker();
                if (document.getElementById('labFeedbackModal')?.classList.contains('show')) cancelFeedback();
                if (document.getElementById('labNotesPanel')?.style.display !== 'none') closeNotes();
                if (document.getElementById('labExperimentsPanel')?.classList.contains('show')) toggleExperimentsPanel();
            }
        });

        /* ─────────────────────────────────────────────────────────────────────────
           SCENARIO MATRIX
           Quick switching between the 6 test scenarios (2 roles × 3 contracts)
           ───────────────────────────────────────────────────────────────────────── */
        
        // Track verification status for each scenario
        const scenarioStatus = {
            '0-teacher': 'partial',  // teacher-decides + facilitator - you've tested this
            '0-student': 'untested',
            '1-teacher': 'untested', // vote-teacher-decides + facilitator
            '1-student': 'untested',
            '2-teacher': 'untested', // vote-decides + facilitator
            '2-student': 'untested'
        };
        
        function quickScenario(contractIndex, role) {
            // Set the scenario
            planState.who = 'classrooms';
            planState.contract = contractIndex;
            planState.context = 'teacher';
            state.role = role;
            
            // Get mode from contract
            const whoInfo = whoData['classrooms'];
            if (whoInfo?.contracts[contractIndex]) {
                planState.mode = whoInfo.contracts[contractIndex].mode;
            }
            
            // Reset to collect phase with some people/signals
            session.people = [];
            session.signals = [];
            labSetPeople(12); // Start with reasonable class size
            
            // Jump to collect
            session.status = 'active';
            session.currentPhase = 'collect';
            setPhase('collect');
            
            // Update everything
            updateScenarioMatrix();
            updateRoleDisplay();
            updateJourneyTracker();
            labSyncWidgets();
            setRole(role);
            applyContextLanguage();
            updateView();
            renderSession();
        }
        
        function updateScenarioMatrix() {
            const currentContract = planState.contract || 0;
            const currentRole = state.role || 'teacher';
            
            // Update all scenario buttons
            document.querySelectorAll('.scenario-btn').forEach(btn => {
                const contract = parseInt(btn.dataset.contract);
                const role = btn.dataset.role;
                const key = `${contract}-${role}`;
                const status = scenarioStatus[key] || 'untested';
                
                // Set active state
                btn.classList.toggle('active', contract === currentContract && role === currentRole);
                
                // Set status class
                btn.classList.remove('verified', 'partial', 'untested');
                btn.classList.add(status);
                
                // Update status indicator
                const statusEl = btn.querySelector('.scenario-status');
                if (statusEl) {
                    statusEl.textContent = status === 'verified' ? '●' : status === 'partial' ? '◐' : '○';
                }
            });
        }
        
        function markScenarioStatus(status) {
            // Mark current scenario with a status
            const key = `${planState.contract || 0}-${state.role || 'teacher'}`;
            scenarioStatus[key] = status;
            updateScenarioMatrix();
        }
        
        // ============ ROLE DISPLAY & EDITOR ============
        function updateRoleDisplay() {
            if (typeof whoData === 'undefined') return;
            
            const who = planState.who || 'classrooms';
            const whoInfo = whoData[who];
            const contract = whoInfo?.contracts[planState.contract || 0];
            
            // Update badge
            const whoEl = document.getElementById('roleBadgeWho');
            const contractEl = document.getElementById('roleBadgeContract');
            const viewEl = document.getElementById('roleBadgeView');
            
            if (whoEl) whoEl.textContent = whoInfo?.name || who;
            if (contractEl) contractEl.textContent = contract?.name?.toLowerCase() || 'teacher decides';
            if (viewEl) viewEl.textContent = state.role === 'teacher' ? 'facilitator' : 'participant';
        }
        
        // Editor state
        let editorState = { who: null, contract: null, role: null };
        
        function openRoleEditor() {
            // Initialize editor state from current
            editorState = {
                who: planState.who || 'classrooms',
                contract: planState.contract || 0,
                role: state.role || 'teacher'
            };
            
            // Build editor options
            buildEditorWhoOptions();
            buildEditorContractOptions();
            updateEditorRoleButtons();
            
            // Show modal
            document.getElementById('labRoleModal')?.classList.add('show');
        }
        
        function closeRoleEditor() {
            document.getElementById('labRoleModal')?.classList.remove('show');
        }
        
        function buildEditorWhoOptions() {
            const container = document.getElementById('labEditorWho');
            if (!container || typeof whoData === 'undefined') return;
            
            container.innerHTML = Object.keys(whoData).map(key => {
                const info = whoData[key];
                const isSelected = key === editorState.who;
                return `<button class="role-modal-btn ${isSelected ? 'selected' : ''}" 
                                data-who="${key}" onclick="labEditorSetWho('${key}')">${info.name}</button>`;
            }).join('');
        }
        
        function buildEditorContractOptions() {
            const container = document.getElementById('labEditorContract');
            if (!container || typeof whoData === 'undefined') return;
            
            const whoInfo = whoData[editorState.who];
            if (!whoInfo) return;
            
            container.innerHTML = whoInfo.contracts.map((contract, i) => {
                const isSelected = i === editorState.contract;
                return `<button class="role-modal-btn ${isSelected ? 'selected' : ''}" 
                                data-contract="${i}" onclick="labEditorSetContract(${i})">${contract.name}</button>`;
            }).join('');
        }
        
        function updateEditorRoleButtons() {
            document.querySelectorAll('#labRoleModal .role-modal-btn[data-role]').forEach(btn => {
                btn.classList.toggle('selected', btn.dataset.role === editorState.role);
            });
        }
        
        function labEditorSetWho(who) {
            editorState.who = who;
            editorState.contract = 0; // Reset contract when who changes
            buildEditorWhoOptions();
            buildEditorContractOptions();
        }
        
        function labEditorSetContract(idx) {
            editorState.contract = idx;
            buildEditorContractOptions();
        }
        
        function labEditorSetRole(role) {
            editorState.role = role;
            updateEditorRoleButtons();
        }
        
        function applyRoleChange() {
            // Apply changes (destructive)
            planState.who = editorState.who;
            planState.contract = editorState.contract;
            planState.context = editorState.who === 'classrooms' ? 'teacher' : 'team';
            state.role = editorState.role;
            
            // Get mode from contract
            const whoInfo = whoData[planState.who];
            if (whoInfo?.contracts[planState.contract]) {
                planState.mode = whoInfo.contracts[planState.contract].mode;
            }
            
            // Reset state
            session.people = [];
            session.signals = [];
            session.currentPhase = 'collect';
            session.status = 'active';
            setPhase('collect');
            
            // Update everything
            closeRoleEditor();
            updateRoleDisplay();
            updateJourneyTracker();
            labSyncWidgets();
            setRole(state.role);
            updateView();
            renderSession();
        }
        
        // ============ JOURNEY TRACKER ============
        function getPhaseStatus(phase) {
            const key = `${planState.contract || 0}-${state.role || 'teacher'}-${phase}`;
            return phaseTestStatus[key] || 'untested';
        }
        
        function setPhaseStatus(phase, status) {
            const key = `${planState.contract || 0}-${state.role || 'teacher'}-${phase}`;
            phaseTestStatus[key] = status;
            updateJourneyTracker();
        }
        
        function getFlowPhases() {
            const mode = planState.mode || 'teacher-decides';
            return mode.includes('vote') ? voteFlowPhases : mainFlowPhases;
        }
        
        function updateJourneyTracker() {
            const current = state.phase;
            const flowPhases = getFlowPhases();
            const currentIdx = flowPhases.indexOf(current);
            const isVoteMode = (planState.mode || '').includes('vote');
            
            // Update phase steps (new structure)
            document.querySelectorAll('.journey-step').forEach(btn => {
                const phase = btn.dataset.phase;
                if (!phase) return;
                
                const inFlow = flowPhases.includes(phase);
                const phaseIdx = flowPhases.indexOf(phase);
                const status = getPhaseStatus(phase);
                
                btn.classList.remove('active', 'past', 'not-in-flow');
                
                if (!inFlow) {
                    btn.classList.add('not-in-flow');
                } else if (phase === current) {
                    btn.classList.add('active');
                } else if (phaseIdx < currentIdx && phaseIdx >= 0) {
                    btn.classList.add('past');
                }
                
                // Update status indicator
                const statusEl = btn.querySelector('.journey-step-status');
                if (statusEl) {
                    statusEl.dataset.status = status;
                    statusEl.textContent = statusSymbols[status] || '○';
                }
            });
            
            // Show/hide vote section based on mode
            const voteSection = document.querySelector('.journey-section[data-flow="vote"]');
            const decideSection = document.querySelector('.journey-section[data-flow="teacher-decides"]');
            if (voteSection) voteSection.style.display = isVoteMode ? 'flex' : 'none';
            if (decideSection) decideSection.style.display = isVoteMode ? 'none' : 'flex';
            
            // Update role toggle buttons
            document.querySelectorAll('.journey-role-btn').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.role === state.role);
            });
            
            // Legacy: also update old dot-based tracker if present
            document.querySelectorAll('.journey-dot').forEach(btn => {
                const phase = btn.dataset.phase;
                if (!phase) return;
                
                const inFlow = flowPhases.includes(phase);
                const phaseIdx = flowPhases.indexOf(phase);
                
                btn.classList.remove('active', 'past', 'not-in-flow');
                
                if (!inFlow) {
                    btn.classList.add('not-in-flow');
                } else if (phase === current) {
                    btn.classList.add('active');
                } else if (phaseIdx < currentIdx && phaseIdx >= 0) {
                    btn.classList.add('past');
                }
            });
        }
        
        // Keep old functions for compatibility
        function labUpdatePhasePills() {
            updateJourneyTracker();
        }
        
        function buildWhoOptions() {
            // Deprecated - now using editor
        }
        
        function buildContractOptions() {
            // Deprecated - now using editor
        }
        
        function updateUsecaseDisplay() {
            updateRoleDisplay();
        }
        
        function toggleUsecaseEdit() {
            openRoleEditor();
        }
        
        function labSetWho(who) {
            planState.who = who;
            planState.contract = 0;
            
            // Update buttons
            document.querySelectorAll('.lab-picker-btn[data-who]').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.who === who);
            });
            
            // Rebuild contracts
            buildContractOptions();
            updateUsecaseDisplay();
            
            // Update mode
            const whoInfo = whoData[who];
            if (whoInfo?.contracts[0]) {
                planState.mode = whoInfo.contracts[0].mode;
            }
            
            labUpdatePhasePills();
        }
        
        function labSetContractIdx(idx) {
            planState.contract = idx;
            
            // Update buttons
            document.querySelectorAll('.lab-picker-btn[data-contract]').forEach((btn, i) => {
                btn.classList.toggle('active', parseInt(btn.dataset.contract) === idx);
            });
            
            updateUsecaseDisplay();
            
            // Update mode
            const who = planState.who || 'classrooms';
            const whoInfo = whoData[who];
            if (whoInfo?.contracts[idx]) {
                planState.mode = whoInfo.contracts[idx].mode;
            }
            
            labUpdatePhasePills();
        }
        
        function labUpdatePhasePills() {
            const current = state.phase;
            const phases = ['plan1','plan2','plan3','waiting','collect','patterns','experiment','commit'];
            const idx = phases.indexOf(current);
            
            document.querySelectorAll('.lab-phase').forEach(btn => {
                const p = btn.dataset.phase;
                if (!p) return;
                const i = phases.indexOf(p);
                btn.classList.remove('active','past');
                if (p === current) btn.classList.add('active');
                else if (i < idx && i >= 0) btn.classList.add('past');
            });
            
            // Show/hide vote path
            const mode = planState.mode || 'teacher-decides';
            const altGroup = document.getElementById('labAltGroup');
            if (altGroup) altGroup.classList.toggle('show', mode.includes('vote'));
        }
        
        function labSyncWidgets() {
            const personIcon = document.getElementById('personIcon');
            const sNum = document.getElementById('labSignalNum');
            
            // Update person icon color based on demeanor
            if (personIcon && labModeActive) {
                personIcon.className = 'person-icon ' + labCurrentDemeanor;
            }
            
            if (sNum) sNum.textContent = session.signals.length;
        }
        
        // Demeanor patterns
        let labCurrentDemeanor = 'engaged';
        const labDemeanorPatterns = ['calm', 'engaged', 'active', 'distracted', 'apathetic'];
        
        function labCycleDemeanor() {
            if (!labModeActive) return;
            
            const idx = labDemeanorPatterns.indexOf(labCurrentDemeanor);
            labCurrentDemeanor = labDemeanorPatterns[(idx + 1) % labDemeanorPatterns.length];
            labApplyBehavior(labCurrentDemeanor);
            labSyncWidgets();
            renderSession();
            
            // Show toast
            showDemeanorToast(labCurrentDemeanor);
        }
        
        function showDemeanorToast(demeanor) {
            const toast = document.getElementById('labDemeanorToast');
            const text = document.getElementById('labDemeanorToastText');
            const toastIcon = toast?.querySelector('.demeanor-toast-icon');
            const personIcon = document.getElementById('personIcon');
            if (!toast || !text) return;
            
            // Get SVG for this demeanor
            const svgContent = getDemeanorSvg(demeanor);
            
            // Update person icon in header
            if (personIcon) {
                personIcon.innerHTML = svgContent;
                personIcon.className = 'person-icon ' + demeanor;
            }
            
            // Update toast icon
            if (toastIcon) {
                toastIcon.innerHTML = svgContent;
            }
            
            // Update toast content and show
            text.textContent = demeanor;
            toast.className = 'lab-demeanor-toast ' + demeanor + ' show';
            
            // Hide after delay
            clearTimeout(toast._hideTimeout);
            toast._hideTimeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 1200);
        }
        
        function getDemeanorSvg(demeanor) {
            switch(demeanor) {
                case 'calm':
                    // Peaceful, centered
                    return '<circle cx="12" cy="7" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/>';
                case 'engaged':
                    // Leaning in, attentive
                    return '<circle cx="12" cy="6" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/><path d="M12 10v2"/>';
                case 'active':
                    // Hand raised
                    return '<circle cx="12" cy="7" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/><path d="M17 3l1 5"/>';
                case 'distracted':
                    // Looking away
                    return '<circle cx="14" cy="7" r="4"/><path d="M7.5 21a7.5 7.5 0 0 1 13 0"/>';
                case 'apathetic':
                    // Slumped
                    return '<circle cx="12" cy="8" r="4"/><path d="M5.5 22a7.5 7.5 0 0 1 13 0"/>';
                default:
                    return '<circle cx="12" cy="7" r="4"/><path d="M5.5 21a7.5 7.5 0 0 1 13 0"/>';
            }
        }
        
        // Drag handlers for header elements
        let peopleDragState = { dragging: false, startX: 0, startCount: 0 };
        let timeDragState = { dragging: false, startX: 0, startTime: 0 };
        
        function initLabDragHandlers() {
            const peopleGroup = document.getElementById('peopleGroup');
            const personIcon = document.getElementById('personIcon');
            const timerSegments = document.getElementById('unifiedSegments');
            
            if (peopleGroup) {
                // Drag on the dots area to add/remove people
                peopleGroup.addEventListener('mousedown', startPeopleDrag);
                peopleGroup.addEventListener('touchstart', startPeopleDrag, { passive: false });
            }
            
            if (personIcon) {
                // Click person icon to cycle demeanor
                personIcon.addEventListener('click', (e) => {
                    e.stopPropagation();
                    labCycleDemeanor();
                });
            }
            
            if (timerSegments) {
                // Drag on segments to adjust time
                timerSegments.addEventListener('mousedown', startTimeDrag);
                timerSegments.addEventListener('touchstart', startTimeDrag, { passive: false });
            }
            
            document.addEventListener('mousemove', handleDrag);
            document.addEventListener('touchmove', handleDrag, { passive: false });
            document.addEventListener('mouseup', endDrag);
            document.addEventListener('touchend', endDrag);
        }
        
        function startPeopleDrag(e) {
            if (!labModeActive) return;
            // Don't start drag if clicking on the person icon
            if (e.target.closest('.person-icon')) return;
            
            e.preventDefault();
            e.stopPropagation();
            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            // Use Store.getDotCount for accurate count
            const currentCount = Store.getDotCount ? Store.getDotCount() : session.people.length;
            peopleDragState = { dragging: true, startX: clientX, startCount: currentCount };
            document.getElementById('peopleGroup')?.classList.add('dragging');
        }
        
        function startTimeDrag(e) {
            if (!labModeActive) return;
            e.preventDefault();
            e.stopPropagation();
            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            timeDragState = { dragging: true, startX: clientX, startTime: session.phaseTimer.remaining };
            document.getElementById('unifiedSegments')?.classList.add('dragging');
        }
        
        function handleDrag(e) {
            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            
            if (peopleDragState.dragging) {
                e.preventDefault();
                const delta = clientX - peopleDragState.startX;
                // ~15px per person
                const countDelta = Math.round(delta / 15);
                const newCount = Math.max(1, Math.min(50, peopleDragState.startCount + countDelta));
                
                // Compare with current Store count
                const currentCount = Store.getDotCount ? Store.getDotCount() : session.people.length;
                if (newCount !== currentCount) {
                    labSetPeople(newCount);
                }
            }
            
            if (timeDragState.dragging) {
                e.preventDefault();
                const delta = clientX - timeDragState.startX;
                // ~0.15px per second - fast, responsive drag
                const timeDelta = Math.round(delta / 0.15) * -1;
                const newTime = Math.max(0, Math.min(600, timeDragState.startTime + timeDelta));
                
                if (newTime !== session.phaseTimer.remaining) {
                    session.phaseTimer.remaining = newTime;
                    renderSession();
                }
            }
        }
        
        function endDrag() {
            if (peopleDragState.dragging) {
                peopleDragState.dragging = false;
                document.getElementById('peopleGroup')?.classList.remove('dragging');
            }
            if (timeDragState.dragging) {
                timeDragState.dragging = false;
                document.getElementById('unifiedSegments')?.classList.remove('dragging');
            }
        }
        
        function labSetTimeFromSlider(value) {
            // Slider now goes 0-600 where 0=full time, 600=empty
            // So we pass in (600 - slider.value) from the oninput
            session.phaseTimer.remaining = parseInt(value);
            labSyncWidgets();
            renderSession();
        }
        
        function labSetTime(seconds) {
            session.phaseTimer.remaining = parseInt(seconds);
            labSyncWidgets();
            renderSession();
        }
        
        function labSeedPeople() {
            // Random 15-25 people with varied demeanors
            const count = 15 + Math.floor(Math.random() * 11);
            session.people = [];
            const states = ['still', 'active', 'working', 'away'];
            for (let i = 0; i < count; i++) {
                // Weight towards still/working, less active/away
                const r = Math.random();
                let state;
                if (r < 0.4) state = 'still';
                else if (r < 0.7) state = 'working';
                else if (r < 0.9) state = 'active';
                else state = 'away';
                
                session.people.push({
                    id: Date.now() + i,
                    state: state,
                    joinedAt: Date.now() - Math.random() * 60000,
                    positionIndex: i
                });
            }
            labSyncWidgets();
            renderSession();
        }
        
        // Notes
        function labNote(type) {
            const text = prompt(`${type} @ ${state.phase}:`);
            if (text) {
                labNotes.push({ type, text, phase: state.phase, who: planState.who, role: state.role });
                updateNotesCount();
            }
        }
        
        function labCopyNotes() {
            if (labNotes.length === 0) {
                alert('No notes yet');
                return;
            }
            const text = labNotes.map(n => `[${n.type}] ${n.who}/${n.phase} (${n.role}): ${n.text}`).join('\n');
            navigator.clipboard.writeText(text).then(() => {
                const el = document.getElementById('labNotesCount');
                if (el) {
                    el.textContent = 'copied!';
                    setTimeout(updateNotesCount, 1500);
                }
            });
        }
        
        // Aliases
        function showLabPanel() { if (!labModeActive) toggleLabMode(); }
        function hideLabPanel() { if (labModeActive) toggleLabMode(); }
        function initLabPanel() { initLabControls(); }
        function labUpdateJourneyButtons() { labUpdatePhasePills(); updateLabPhase(); }
        function labUpdateCounts() { labSyncWidgets(); }
        function labUpdateTimeDisplay() { labSyncWidgets(); }
        
        function labPopulateContracts() {
            const who = planState.who || 'classrooms';
            const whoInfo = whoData[who];
            const contractSelect = document.getElementById('labContractSelect');
            
            if (!whoInfo || !contractSelect) return;
            
            contractSelect.innerHTML = whoInfo.contracts.map((contract, i) => 
                `<option value="${i}">${contract.name}</option>`
            ).join('');
            
            contractSelect.value = planState.contract || 0;
        }
        
        function labChangeRole() {
            const whoSelect = document.getElementById('labWhoSelect');
            const newWho = whoSelect.value;
            
            // Reset state for new role
            planState.who = newWho;
            planState.contract = 0;
            planState.context = newWho === 'classrooms' ? 'teacher' : 'team';
            
            // Get defaults for this role
            const defaults = labGetDefaults(newWho);
            
            // Reset session state - start fresh, user drags to add people
            session.people = [];
            session.signals = [];
            
            // Update contract dropdown
            labPopulateContracts();
            
            // Update mode from contract
            const whoInfo = whoData[newWho];
            if (whoInfo && whoInfo.contracts[0]) {
                planState.mode = whoInfo.contracts[0].mode;
            }
            
            // Update journey alt visibility
            labUpdateJourneyButtons();
            
            // Reset to collect phase
            labJumpTo('collect');
            
            // Update UI
            applyContextLanguage();
            labUpdateSummary();
            labUpdatePopulationUI();
        }
        
        function labChangeContract() {
            const contractSelect = document.getElementById('labContractSelect');
            const index = parseInt(contractSelect.value);
            
            planState.contract = index;
            
            const who = planState.who || 'classrooms';
            const whoInfo = whoData[who];
            if (whoInfo && whoInfo.contracts[index]) {
                planState.mode = whoInfo.contracts[index].mode;
            }
            
            // Update journey alt visibility
            labUpdateJourneyButtons();
            
            // Update current phase if needed
            if (state.phase === 'patterns') updatePatternsUI();
            
            applyContextLanguage();
            labUpdateSummary();
        }
        
        function labGetDefaults(who) {
            // Reasonable defaults for each context
            const defaults = {
                classrooms: { people: 22, behavior: 'engaged' },
                teams: { people: 8, behavior: 'engaged' },
                leaders: { people: 12, behavior: 'calm' },
                cohorts: { people: 15, behavior: 'engaged' },
                boards: { people: 7, behavior: 'calm' },
                couples: { people: 2, behavior: 'calm' },
                coaches: { people: 2, behavior: 'calm' }
            };
            return defaults[who] || { people: 10, behavior: 'engaged' };
        }
        
        function labSetRole(role) {
            state.role = role;
            setRole(role);
            
            // Update all role toggle buttons (old and new locations)
            document.querySelectorAll('.lab-picker-btn[data-role], .journey-role-btn[data-role], .role-badge-toggle[data-role]').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.role === role);
            });
            
            // Update journey tracker to reflect new role's test status
            updateJourneyTracker();
        }
        
        function labJumpTo(phase) {
            // Generate realistic state for this phase
            labGenerateStateForPhase(phase);
            
            // Set the phase
            setPhase(phase);
            
            // Update session status based on phase
            if (['plan1', 'plan2', 'plan3'].includes(phase)) {
                session.status = 'waiting';
                session.currentPhase = 'plan';
            } else if (phase === 'waiting') {
                session.status = 'waiting';
                session.currentPhase = 'plan';
            } else {
                session.status = 'active';
                session.currentPhase = phase;
            }
            
            // Update UI
            labUpdatePhasePills();
            updateLabPhase();
            labSyncWidgets();
            updateView();
            renderSession();
            updateInputDialVisibility();
        }
        
        function labGenerateStateForPhase(phase) {
            const behavior = labCurrentDemeanor || 'engaged';
            
            // Don't auto-populate people - user controls this via drag
            // Just apply current demeanor pattern to existing people
            if (session.people.length > 0) {
                labApplyBehavior(behavior);
            }
            
            // Generate signals for phases that need them
            if (['patterns', 'experiment', 'commit', 'suggestions', 'ballot', 'voteMonitor'].includes(phase)) {
                if (session.signals.length < 5) {
                    // Add some signals with randomization
                    const signalCount = 8 + Math.floor(Math.random() * 10);
                    for (let i = session.signals.length; i < signalCount; i++) {
                        session.signals.push({
                            id: Date.now() + i,
                            type: Math.random() > 0.45 ? 'ouch' : 'wow',
                            timestamp: Date.now() - Math.random() * 300000
                        });
                    }
                }
            }
            
            // Set timer for collect phase
            if (phase === 'collect') {
                session.phaseTimer.remaining = 7 * 60 + Math.floor(Math.random() * 180);
            }
            
            // Apply behavior pattern to people
            labApplyBehavior(behavior);
        }
        
        function labAdvanceTime() {
            // Simulate time passing - add some signals, change some behaviors
            const behavior = document.getElementById('labBehaviorSelect').value;
            
            // Add 1-3 signals
            const signalsToAdd = 1 + Math.floor(Math.random() * 3);
            for (let i = 0; i < signalsToAdd; i++) {
                const type = Math.random() > 0.5 ? 'ouch' : 'wow';
                session.signals.push({
                    id: Date.now() + i,
                    type: type,
                    timestamp: Date.now()
                });
                
                // Log the simulated incoming signal
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('←', 'newSignal', type, { type, from: 'sim' });
                }
            }
            
            // Reduce timer if in collect
            if (state.phase === 'collect' && session.phaseTimer.remaining > 60) {
                session.phaseTimer.remaining -= 30 + Math.floor(Math.random() * 60);
            }
            
            // Shuffle some behaviors
            labApplyBehavior(behavior);
            
            // Update UI
            renderSession();
            labUpdatePopulationUI();
        }
        
        function labSetPeople(count) {
            count = parseInt(count);
            
            // Update SimulationBackend if running (this is the source of truth now)
            if (SimulationBackend && SimulationBackend.running) {
                // count is total including me, so sim dots = count - 1
                SimulationBackend.setDotCount(Math.max(0, count - 1));
            }
            
            // Also update legacy session.people for backward compat
            while (session.people.length < count) {
                // Weight towards still/working when adding
                const r = Math.random();
                let state;
                if (r < 0.4) state = 'still';
                else if (r < 0.7) state = 'working';
                else if (r < 0.9) state = 'active';
                else state = 'away';
                
                session.people.push({
                    id: Date.now() + session.people.length,
                    state: state,
                    joinedAt: Date.now(),
                    positionIndex: session.people.length
                });
            }
            while (session.people.length > count) {
                session.people.pop();
            }
            
            renderSession();
            labSyncWidgets();
        }
        
        function labSetBehavior(behavior) {
            labCurrentDemeanor = behavior;
            labApplyBehavior(behavior);
            labSyncWidgets();
            renderSession();
        }
        
        function labApplyBehavior(behavior) {
            // Apply to SimulationBackend if running (this updates Store.dots)
            if (SimulationBackend && SimulationBackend.running) {
                SimulationBackend.applyDemeanor(behavior);
            }
            
            // Also update legacy session.people for backward compat
            const patterns = {
                calm: { still: 0.70, active: 0.05, working: 0.20, away: 0.05 },
                engaged: { still: 0.30, active: 0.25, working: 0.35, away: 0.10 },
                active: { still: 0.10, active: 0.45, working: 0.40, away: 0.05 },
                distracted: { still: 0.25, active: 0.05, working: 0.20, away: 0.50 },
                apathetic: { still: 0.60, active: 0.02, working: 0.08, away: 0.30 }
            };
            
            const pattern = patterns[behavior] || patterns.engaged;
            
            session.people.forEach(person => {
                const r = Math.random();
                let cumulative = 0;
                
                cumulative += pattern.still;
                if (r < cumulative) { person.state = 'still'; return; }
                
                cumulative += pattern.active;
                if (r < cumulative) { person.state = 'active'; return; }
                
                cumulative += pattern.working;
                if (r < cumulative) { person.state = 'working'; return; }
                
                person.state = 'away';
            });
        }
        
        function labQuickSignal(type, count) {
            for (let i = 0; i < count; i++) {
                let signalType = type === 'mixed' ? (Math.random() > 0.5 ? 'ouch' : 'wow') : type;
                
                session.signals.push({
                    id: Date.now() + i + Math.random(),
                    type: signalType,
                    timestamp: Date.now()
                });
                
                const dots = document.getElementById('dots');
                if (dots) {
                    const dot = document.createElement('div');
                    dot.className = 'dot ' + signalType;
                    dots.appendChild(dot);
                }
            }
            
            state.dotCount += count;
            renderSession();
            labSyncWidgets();
        }
        
        function labUpdateJourneyButtons() {
            updateJourneyTracker();
        }
        
        function labUpdatePopulationUI() {
            const peopleNum = document.getElementById('labPeopleNum');
            if (peopleNum) peopleNum.textContent = session.people.length;
        }
        
        function labUpdateSummary() {
            // No longer needed - controls are contextual now
        }
        
        // Keep old functions that might still be referenced
        function updateLabContractList() {}
        
        // ============ TIME SIMULATION ============
        let labTimeSpeed = 0;  // 0 = paused, 1 = normal, 5 = fast
        let labTimeInterval = null;
        
        function labSetSpeed(speed) {
            labTimeSpeed = speed;
            
            document.querySelectorAll('.lab-chip-sm[data-speed]').forEach(btn => {
                btn.classList.toggle('active', parseInt(btn.dataset.speed) === speed);
            });
            
            if (labTimeInterval) {
                clearInterval(labTimeInterval);
                labTimeInterval = null;
            }
            
            if (speed > 0) {
                labTimeInterval = setInterval(labTick, 1000 / speed);
            }
        }
        
        function labTick() {
            // Every tick, maybe add a signal or change behavior
            if (state.phase === 'collect' && Math.random() < 0.15) {
                const type = Math.random() > 0.5 ? 'ouch' : 'wow';
                session.signals.push({
                    id: Date.now() + Math.random(),
                    type: type,
                    timestamp: Date.now()
                });
                
                const dots = document.getElementById('dots');
                if (dots) {
                    const dot = document.createElement('div');
                    dot.className = 'dot ' + type;
                    dots.appendChild(dot);
                }
                state.dotCount++;
            }
            
            // Occasionally shuffle behavior
            if (Math.random() < 0.1) {
                const behavior = document.getElementById('labBehaviorSelect')?.value || 'engaged';
                labApplyBehavior(behavior);
                renderSession();
            }
            
            // Reduce timer if in collect
            if (state.phase === 'collect' && session.phaseTimer.remaining > 0) {
                session.phaseTimer.remaining--;
                labUpdateTimeDisplay();
                renderSession();
            }
        }
        
        function labAdjustTime(delta) {
            session.phaseTimer.remaining = Math.max(0, session.phaseTimer.remaining + delta);
            labUpdateTimeDisplay();
            renderSession();
        }
        
        function labUpdateTimeDisplay() {
            labUpdateCounts();
        }
        
        // ============ PEOPLE CONTROLS ============
        function labAdjustPeopleBy(delta) {
            const newCount = Math.max(0, Math.min(35, session.people.length + delta));
            labSetPeople(newCount);
        }
        
        // ============ NEXT INPUT CONTROLS ============
        let labNextInputType = 'ouch';
        let labNextInputFilter = 'pass';
        
        function labSetNextType(type) {
            labNextInputType = type;
            
            document.querySelectorAll('.lab-type-btn').forEach(btn => {
                const isMatch = btn.textContent.trim() === type;
                btn.classList.toggle('active', isMatch);
            });
            
            // Also update the old dial if it exists
            if (typeof dialSetSignal === 'function') {
                dialSetSignal(type);
            }
        }
        
        function labSetNextFilter(filter) {
            labNextInputFilter = filter;
            
            // Also update the old dial if it exists
            if (typeof dialSetFilter === 'function') {
                dialSetFilter(filter);
            }
        }
        
        // Old functions - now stubs (replaced by new simplified lab)
        function labSetWho(who) { labChangeRole(); }
        function labSetContract(index) { labChangeContract(); }
        function labSetPhase(phase) { labJumpTo(phase); }
        function labSetSession(type) { setSessionType(type); }
        
        // Keep these helper functions that may still be used
        function updateLabPhaseButtons() { labUpdateJourneyButtons(); }
        function updateLabBreadcrumb() { labUpdateSummary(); }
        function updateLabPhaseMini() {}
        function updateLabStatusBar() { labUpdatePopulationUI(); }
        function updateLabDials() { labUpdatePopulationUI(); }
        function labUpdateSessionButtons() {}
        function updateLabPhaseControls() {}
        function renderLabLog() {}
        function labClearLog() {}
        function labLog() {}
        function labSetSessionStatus() {}
        function labAdjustPeople() {}
        function labAdjustSignals() {}
        function labAdjustTimer() {}
        function labLoadScenario() {}
        function labTriggerSignal(type) { labQuickSignal(type, 1); }
        
        // Hook into existing functions to update lab UI
        const originalSetPhase = setPhase;
        setPhase = function(phase) {
            originalSetPhase(phase);
            labUpdateJourneyButtons();
            labUpdatePopulationUI();
            labUpdateSummary();
            // Update phase thread indicator
            if (typeof updateFloatingPhaseIndicator === 'function') {
                updateFloatingPhaseIndicator();
            }
        };
        
        const originalAddSessionPerson = addSessionPerson;
        addSessionPerson = function(st) {
            originalAddSessionPerson(st);
            labUpdatePopulationUI();
        };
        
        const originalAddSessionSignal = addSessionSignal;
        addSessionSignal = function() {
            originalAddSessionSignal();
            labUpdatePopulationUI();
        };
        
        function updateLabPhaseButtons() {
            const mode = planState.mode || 'teacher-decides';
            
            // Get buttons (with safety checks)
            const experimentBtn = document.getElementById('labExperimentBtn');
            const commitBtn = document.getElementById('labCommitBtn');
            const suggestBtn = document.getElementById('labSuggestBtn');
            const ballotBtn = document.getElementById('labBallotBtn');
            const voteBtn = document.getElementById('labVoteBtn');
            
            if (!experimentBtn) return;
            
            // Show/hide based on mode
            const isTeacherDecides = mode === 'teacher-decides';
            const isVoteMode = mode === 'vote-decides' || mode === 'vote-teacher-decides';
            
            // Teacher decides: show experiment/commit, dim vote path
            experimentBtn.classList.toggle('dimmed', !isTeacherDecides);
            commitBtn.classList.toggle('dimmed', !isTeacherDecides);
            
            // Vote modes: show suggest/ballot/vote, dim experiment path
            suggestBtn.classList.toggle('dimmed', !isVoteMode);
            ballotBtn.classList.toggle('dimmed', !isVoteMode);
            voteBtn.classList.toggle('dimmed', !isVoteMode);
            
            // Update active states
            document.querySelectorAll('.lab-phase-btn').forEach(btn => {
                const phase = btn.dataset.phase;
                btn.classList.toggle('active', phase === state.phase);
            });
        }
        
        function updateLabBreadcrumb() {
            const who = planState.who || 'classrooms';
            const whoInfo = whoData[who];
            const contract = whoInfo?.contracts[planState.contract || 0];
            
            // Update who icon
            const whoIcon = document.getElementById('labCrumbWhoIcon');
            if (whoIcon && whoInfo) {
                whoIcon.innerHTML = whoInfo.icon;
            }
            
            // Update who name
            const whoName = document.getElementById('labCrumbWhoName');
            if (whoName && whoInfo) {
                whoName.textContent = whoInfo.name;
            }
            
            // Update contract name
            const contractName = document.getElementById('labCrumbContractName');
            if (contractName && contract) {
                contractName.textContent = contract.name;
            }
        }
        
        function updateLabPhaseMini() {
            const phases = ['plan1', 'plan2', 'plan3', 'collect', 'patterns', 'experiment', 'commit'];
            const currentIndex = phases.indexOf(state.phase);
            
            const dots = document.querySelectorAll('.lab-phase-mini .lab-phase-dot');
            dots.forEach((dot, i) => {
                dot.classList.remove('active', 'past');
                if (i < currentIndex) {
                    dot.classList.add('past');
                } else if (i === currentIndex) {
                    dot.classList.add('active');
                }
            });
        }
        
        // ============ INPUT DIAL ============
        function toggleInputDial() {
            const dial = document.getElementById('inputDial');
            const toggle = document.getElementById('inputDialToggle');
            dial.classList.toggle('expanded');
            toggle.classList.toggle('active');
        }
        
        function updateInputDialVisibility() {
            const dial = document.getElementById('inputDial');
            if (!dial) return;
            // Show input dial only in lab mode on collect screen
            const shouldShow = labModeActive && state.phase === 'collect';
            dial.classList.toggle('visible', shouldShow);
        }
        
        function dialSetSignal(type) {
            state.mode = type;
            
            // Update button states
            document.getElementById('dialOuch').classList.toggle('active', type === 'ouch');
            document.getElementById('dialWow').classList.toggle('active', type === 'wow');
            
            // Update status
            document.getElementById('dialStatusSignal').textContent = type;
        }
        
        function dialSetFilter(validation) {
            setValidation(validation);
            
            // Update button states
            document.querySelectorAll('.dial-filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            if (validation === 'name') document.getElementById('dialName').classList.add('active');
            else if (validation === 'id') document.getElementById('dialId').classList.add('active');
            else if (validation === 'fail') document.getElementById('dialCrisis').classList.add('active');
            else document.getElementById('dialPass').classList.add('active');
            
            // Update status
            document.getElementById('dialStatusFilter').textContent = validation;
        }
        
        // Keep old function names for compatibility
        function toggleDiagnostic() {
            toggleLabPanel();
        }
        
        function initDiagnosticDropdowns() {
            initLabPanel();
        }
        
        function populateContractDropdown() {
            updateLabContractList();
        }
        
        function diagSetWho(who) {
            labSetWho(who);
        }
        
        function diagSetContract(index) {
            labSetContract(parseInt(index));
        }
        
        function updateDiagPhaseButtons() {
            updateLabPhaseButtons();
        }
        
        function labSetValidation(validation) {
            dialSetFilter(validation);
        }
        
        function labSimulateSignal(type) {
            dialSetSignal(type);
        }
        
        // ============ CONTEXT-AWARE LANGUAGE ============
        const contextLanguage = {
            classrooms: {
                facilitator: 'teacher',
                facilitatorPossessive: 'teacher\'s',
                participants: 'students',
                participantsSaid: 'students told me',
                participantsShared: 'what the class shared',
                commitment: 'my two week experiment',
                mightHear: 'I might hear',
                closingText: 'see you in two weeks',
                transitionQuestion: 'what\'s it like to be a student here?',
                transitionSub: 'let\'s find out together',
                suggestionsTitle: 'what should we try?',
                suggestionsPlaceholder: 'add your own idea...',
                ballotTitle: 'what will we try?',
                inputPlaceholder: 'something that stuck with me...',
                facilitatorInputPlaceholder: 'what are you noticing?',
                tryLabel: 'so I\'m going to try',
                waitingText: 'your teacher is working on an experiment...'
            },
            teams: {
                facilitator: 'facilitator',
                facilitatorPossessive: 'facilitator\'s',
                participants: 'team',
                participantsSaid: 'team said',
                participantsShared: 'what the team shared',
                commitment: 'our team experiment',
                mightHear: 'we might hear',
                closingText: 'see you next sprint',
                transitionQuestion: 'what\'s it like to be on this team?',
                transitionSub: 'let\'s see what came up',
                suggestionsTitle: 'what should we try?',
                suggestionsPlaceholder: 'add an idea...',
                ballotTitle: 'what will we try?',
                inputPlaceholder: 'something I noticed...',
                facilitatorInputPlaceholder: 'what are you noticing?',
                tryLabel: 'so we\'re going to try',
                waitingText: 'deciding what to try...'
            },
            leaders: {
                facilitator: 'leader',
                facilitatorPossessive: 'leader\'s',
                participants: 'team',
                participantsSaid: 'team shared',
                participantsShared: 'what the team shared',
                commitment: 'my leadership experiment',
                mightHear: 'I might hear',
                closingText: 'check-in in two weeks',
                transitionQuestion: 'what\'s it like to be led by me?',
                transitionSub: 'let\'s find out',
                suggestionsTitle: 'what could I try?',
                suggestionsPlaceholder: 'add an idea...',
                ballotTitle: 'what will I try?',
                inputPlaceholder: 'something I noticed...',
                facilitatorInputPlaceholder: 'what am I noticing?',
                tryLabel: 'so I\'m going to try',
                waitingText: 'your leader is working on a response...'
            },
            couples: {
                facilitator: 'partner',
                facilitatorPossessive: 'partner\'s',
                participants: 'us',
                participantsSaid: 'we said',
                participantsShared: 'what we shared',
                commitment: 'our experiment',
                mightHear: 'we might notice',
                closingText: 'we\'ll revisit this together',
                transitionQuestion: 'what\'s it like to be us?',
                transitionSub: 'let\'s see what came up',
                suggestionsTitle: 'what could we try?',
                suggestionsPlaceholder: 'add a thought...',
                ballotTitle: 'what will we try?',
                inputPlaceholder: 'something I noticed...',
                facilitatorInputPlaceholder: 'something I noticed...',
                tryLabel: 'so we\'re going to try',
                waitingText: 'deciding together...'
            },
            coaches: {
                facilitator: 'coach',
                facilitatorPossessive: 'coach\'s',
                participants: 'client',
                participantsSaid: 'I noticed',
                participantsShared: 'what came up',
                commitment: 'my experiment',
                mightHear: 'I might notice',
                closingText: 'see you next session',
                transitionQuestion: 'what patterns are emerging?',
                transitionSub: 'let\'s look together',
                suggestionsTitle: 'what could I try?',
                suggestionsPlaceholder: 'add an idea...',
                ballotTitle: 'what will I try?',
                inputPlaceholder: 'something that\'s coming up...',
                facilitatorInputPlaceholder: 'what are you noticing?',
                tryLabel: 'so I\'m going to try',
                waitingText: 'reflecting on what to try...'
            },
            cohorts: {
                facilitator: 'facilitator',
                facilitatorPossessive: 'facilitator\'s',
                participants: 'cohort',
                participantsSaid: 'cohort shared',
                participantsShared: 'what the cohort shared',
                commitment: 'our cohort experiment',
                mightHear: 'we might notice',
                closingText: 'see you next week',
                transitionQuestion: 'what\'s it like to be in this cohort?',
                transitionSub: 'let\'s see what came up',
                suggestionsTitle: 'what should we try?',
                suggestionsPlaceholder: 'add an idea...',
                ballotTitle: 'what will we try?',
                inputPlaceholder: 'something I noticed...',
                facilitatorInputPlaceholder: 'what are you noticing?',
                tryLabel: 'so we\'re going to try',
                waitingText: 'deciding what to try...'
            },
            boards: {
                facilitator: 'chair',
                facilitatorPossessive: 'chair\'s',
                participants: 'board',
                participantsSaid: 'board raised',
                participantsShared: 'what the board shared',
                commitment: 'our governance experiment',
                mightHear: 'we might see',
                closingText: 'revisit next meeting',
                transitionQuestion: 'what\'s on the board\'s mind?',
                transitionSub: 'let\'s see what surfaced',
                suggestionsTitle: 'what should we address?',
                suggestionsPlaceholder: 'add a proposal...',
                ballotTitle: 'what will we address?',
                inputPlaceholder: 'something I want to raise...',
                facilitatorInputPlaceholder: 'what are you noticing?',
                tryLabel: 'so we\'re going to try',
                waitingText: 'deciding next steps...'
            },
            communities: {
                facilitator: 'organizer',
                facilitatorPossessive: 'organizer\'s',
                participants: 'community',
                participantsSaid: 'community voiced',
                participantsShared: 'what the community shared',
                commitment: 'our community experiment',
                mightHear: 'we might notice',
                closingText: 'we\'ll check back in',
                transitionQuestion: 'what\'s alive in this community?',
                transitionSub: 'let\'s see what emerged',
                suggestionsTitle: 'what should we try?',
                suggestionsPlaceholder: 'add an idea...',
                ballotTitle: 'what will we try?',
                inputPlaceholder: 'something I\'m noticing...',
                facilitatorInputPlaceholder: 'what are you noticing?',
                tryLabel: 'so we\'re going to try',
                waitingText: 'deciding what to try...'
            }
        };
        
        function getContextLanguage() {
            const who = planState.who || 'classrooms';
            return contextLanguage[who] || contextLanguage.classrooms;
        }
        
        function applyContextLanguage() {
            const lang = getContextLanguage();
            
            // ============ COMMIT SCREEN ============
            const participantsSaidLabel = document.querySelector('.commit-section-label.ouch');
            if (participantsSaidLabel) {
                participantsSaidLabel.textContent = lang.participantsSaid;
            }
            
            const commitTitle = document.querySelector('.commit-title');
            if (commitTitle) {
                commitTitle.textContent = lang.commitment;
            }
            
            const mightHearLabel = document.querySelector('.commit-section-label.wow');
            if (mightHearLabel) {
                mightHearLabel.textContent = 'and ' + lang.mightHear;
            }
            
            const commitClosing = document.getElementById('commitClosing');
            if (commitClosing) {
                commitClosing.textContent = lang.closingText;
            }
            
            // ============ PATTERNS TRANSITION ============
            const transitionText = document.querySelector('.invitation-text');
            if (transitionText) {
                transitionText.textContent = lang.transitionQuestion;
            }
            
            const transitionSub = document.querySelector('.invitation-sub');
            if (transitionSub) {
                transitionSub.textContent = lang.transitionSub;
            }
            
            // ============ PATTERNS SCREEN ============
            const patternsPrompt = document.getElementById('patternsPrompt');
            if (patternsPrompt) {
                patternsPrompt.textContent = lang.participantsShared;
            }
            
            // Update student patterns screen
            const studentPatternsPrompt = document.querySelector('#studentPatternsScreen .patterns-prompt');
            if (studentPatternsPrompt) {
                studentPatternsPrompt.textContent = lang.participantsShared;
            }
            
            // ============ SUGGESTIONS SCREEN ============
            const suggestionsTitle = document.querySelector('.suggestions-title');
            if (suggestionsTitle) {
                suggestionsTitle.textContent = lang.suggestionsTitle;
            }
            
            const suggestionsInput = document.getElementById('teacherSuggestionInput');
            if (suggestionsInput) {
                suggestionsInput.placeholder = lang.suggestionsPlaceholder;
            }
            
            // ============ BALLOT SCREEN ============
            const ballotTitle = document.getElementById('ballotTitle');
            if (ballotTitle) {
                ballotTitle.textContent = lang.ballotTitle;
            }
            
            // ============ COLLECT SCREEN ============
            const input = document.getElementById('input');
            if (input) {
                // Use facilitator placeholder if teacher role, otherwise participant
                input.placeholder = state.role === 'teacher' 
                    ? lang.facilitatorInputPlaceholder 
                    : lang.inputPlaceholder;
            }
            
            // ============ REVEAL SEQUENCE ============
            const revealClosingText = document.querySelector('.reveal-closing-text');
            if (revealClosingText) {
                revealClosingText.textContent = lang.closingText;
            }
            
            const revealMightLabel = document.querySelector('.reveal-might-label');
            if (revealMightLabel) {
                revealMightLabel.textContent = lang.mightHear.replace('I ', 'we ');
            }
            
            // ============ REVEAL TRYING LABEL ============
            const revealTryingLabel = document.querySelector('.reveal-trying-label');
            if (revealTryingLabel) {
                // Adjust based on who owns the commitment
                const isCollective = ['teams', 'couples', 'cohorts', 'boards', 'communities'].includes(planState.who);
                revealTryingLabel.textContent = isCollective ? "we're trying" : "I'm trying";
            }
            
            // ============ COMMIT TRY LABEL ============
            const commitTryLabel = document.getElementById('commitTryLabel');
            if (commitTryLabel) {
                commitTryLabel.textContent = lang.tryLabel;
            }
            
            // ============ STUDENT WAITING TEXT ============
            const studentWaitingText = document.getElementById('studentWaitingText');
            if (studentWaitingText) {
                studentWaitingText.textContent = lang.waitingText;
            }
        }
        
        function setRole(role) {
            state.role = role;
            state.promptSet = 0; // Reset to first prompt set for new role
            document.querySelectorAll('[data-role]').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.role === role);
            });
            showPrompts(); // Refresh prompts for new role
            applyContextLanguage();
            updateView();
            if (typeof updateStudentFeedbackBtn === 'function') updateStudentFeedbackBtn();
            if (typeof updateApiKeyBanner === 'function') updateApiKeyBanner();
        }
        
        function setPhase(phase) {
            const oldPhase = state.phase;
            state.phase = phase;
            
            // Clear event log when phase changes (fresh slate)
            if (phase !== oldPhase && typeof debugEventLog !== 'undefined') {
                debugEventLog.length = 0;
                debugLastEventCount = 0;
            }
            
            document.querySelectorAll('[data-phase]').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.phase === phase);
            });
            
            // Track in-session state for other UI elements
            const planPhases = ['plan1', 'plan2', 'plan3'];
            const inSession = !planPhases.includes(phase);
            document.body.classList.toggle('in-session', inSession);
            
            // Update element markers for current phase
            if (typeof updateMarkersForPhase === 'function') {
                updateMarkersForPhase();
            }
            
            // Update phase thread/note indicators
            if (typeof updatePhaseThreadIndicators === 'function') {
                updatePhaseThreadIndicators();
            }
            
            // Render patterns table if going directly to patterns
            if (phase === 'patterns') {
                renderPatternsTable();
                updatePatternsUI();
            }
            
            // Initialize experiment conversation
            if (phase === 'experiment') {
                initExperimentConversation();
            }
            
            // Initialize commit screen
            if (phase === 'commit') {
                initCommitScreen();
            }
            
            // Initialize ballot builder
            if (phase === 'ballot') {
                initBallotEditor();
            }
            
            // Initialize suggestions phase
            if (phase === 'suggestions') {
                initSuggestionsPhase();
            }
            
            applyContextLanguage();
            updateView();
        }
        
        function setValidation(validation) {
            state.validation = validation;
            document.querySelectorAll('[data-validation]').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.validation === validation);
            });
        }
        
        function setMode(mode) {
            state.mode = mode;
            document.querySelectorAll('[data-mode]').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.mode === mode) {
                    btn.classList.add('active');
                }
            });
        }
        
        function setFlow(flow) {
            // Legacy support - find the contract with this mode and set it
            const who = planState.who || 'classrooms';
            const whoInfo = whoData[who];
            if (whoInfo) {
                const contractIndex = whoInfo.contracts.findIndex(c => c.mode === flow);
                if (contractIndex >= 0) {
                    planState.contract = contractIndex;
                    planState.mode = flow;
                    
                    // Update diagnostic dropdown if visible
                    const contractSelect = document.getElementById('diagContractSelect');
                    if (contractSelect) {
                        contractSelect.value = contractIndex;
                    }
                    const hint = document.getElementById('diagContractHint');
                    if (hint) {
                        hint.textContent = `(${flow})`;
                    }
                }
            }
            
            planState.context = who === 'classrooms' ? 'teacher' : 'team';
            
            document.querySelectorAll('[data-flow]').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.flow === flow) {
                    btn.classList.add('active');
                }
            });
            
            updateDiagPhaseButtons();
            applyContextLanguage();
            
            // Update patterns UI if we're on that screen
            if (state.phase === 'patterns') {
                updatePatternsUI();
            }
        }
        
        // ============ VIEW MANAGEMENT ============
        function updateView() {
            // Hide all screens
            document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
            
            // Show appropriate screen
            const { role, phase } = state;
            
            // Hide all headers by default
            document.getElementById('sessionHeader').classList.remove('visible');
            document.getElementById('studentHeader').style.display = 'none';
            document.getElementById('unifiedHeader').classList.remove('visible');
            
            // Hide persistent chips by default
            document.getElementById('persistentChips').classList.remove('visible');
            
            // Handle waiting room
            if (session.status === 'waiting' && phase !== 'plan1' && phase !== 'plan2' && phase !== 'plan3') {
                document.getElementById('waitingRoomScreen').classList.add('active');
                document.getElementById('unifiedHeader').classList.add('visible');
                
                // Show appropriate waiting view
                if (role === 'teacher') {
                    document.getElementById('teacherWaitingRoom').style.display = 'block';
                    document.getElementById('studentWaitingRoom').style.display = 'none';
                } else {
                    document.getElementById('teacherWaitingRoom').style.display = 'none';
                    document.getElementById('studentWaitingRoom').style.display = 'block';
                }
                
                renderSession();
                return;
            }
            
            if (phase === 'plan1') {
                if (role === 'teacher') {
                    document.getElementById('planScreen1').classList.add('active');
                } else {
                    document.getElementById('joinScreen').classList.add('active');
                }
            } else if (phase === 'plan2') {
                if (role === 'teacher') {
                    document.getElementById('planScreen2').classList.add('active');
                    document.getElementById('persistentChips').classList.add('visible');
                    // Show who chip if set
                    if (planState.context) {
                        document.getElementById('chipGroupWho').style.display = 'flex';
                    }
                } else {
                    document.getElementById('joinScreen').classList.add('active');
                }
            } else if (phase === 'plan3') {
                if (role === 'teacher') {
                    document.getElementById('planScreen3').classList.add('active');
                    document.getElementById('persistentChips').classList.add('visible');
                    // Show chips if set
                    if (planState.context) {
                        document.getElementById('chipGroupWho').style.display = 'flex';
                    }
                    if (planState.mode) {
                        document.getElementById('chipGroupHow').style.display = 'flex';
                    }
                } else {
                    document.getElementById('joinScreen').classList.add('active');
                }
            } else if (phase === 'collect') {
                document.getElementById('collectScreen').classList.add('active');
                
                // Show unified header for both roles during active session
                document.getElementById('unifiedHeader').classList.add('visible');
                
                if (role !== 'teacher') {
                    // Student also sees simple logo header for branding
                    document.getElementById('studentHeader').style.display = 'flex';
                }
            } else if (phase === 'patternsTransition') {
                if (role === 'teacher') {
                    document.getElementById('patternsTransition').classList.add('active');
                    document.getElementById('unifiedHeader').classList.add('visible');
                } else {
                    document.getElementById('studentEndScreen').classList.add('active');
                }
            } else if (phase === 'patterns') {
                if (role === 'teacher') {
                    document.getElementById('patternsScreen').classList.add('active');
                    document.getElementById('unifiedHeader').classList.add('visible');
                } else {
                    document.getElementById('studentEndScreen').classList.add('active');
                }
            } else if (phase === 'experiment') {
                if (role === 'teacher') {
                    document.getElementById('experimentScreen').classList.add('active');
                    document.getElementById('unifiedHeader').classList.add('visible');
                } else {
                    document.getElementById('studentEndScreen').classList.add('active');
                }
            } else if (phase === 'commit') {
                document.getElementById('commitScreen').classList.add('active');
                document.getElementById('unifiedHeader').classList.add('visible');
            } else if (phase === 'suggestions') {
                if (role === 'teacher') {
                    document.getElementById('suggestionsScreen').classList.add('active');
                    document.getElementById('unifiedHeader').classList.add('visible');
                } else {
                    document.getElementById('studentSuggestScreen').classList.add('active');
                }
            } else if (phase === 'ballot') {
                if (role === 'teacher') {
                    document.getElementById('ballotScreen').classList.add('active');
                    document.getElementById('unifiedHeader').classList.add('visible');
                } else {
                    document.getElementById('studentSuggestScreen').classList.add('active');
                }
            } else if (phase === 'voteMonitor') {
                if (role === 'teacher') {
                    document.getElementById('voteMonitorScreen').classList.add('active');
                    document.getElementById('unifiedHeader').classList.add('visible');
                } else {
                    document.getElementById('voteScreen').classList.add('active');
                }
            } else if (phase === 'voteWaiting') {
                document.getElementById('voteWaitingScreen').classList.add('active');
            } else if (phase === 'voteResults') {
                document.getElementById('voteResultsScreen').classList.add('active');
                document.getElementById('unifiedHeader').classList.add('visible');
            }
            
            // Safety floor visibility - only for students and solo
            const showSafety = (phase === 'collect') && (role === 'student' || planState.context === 'solo');
            document.getElementById('safety').style.display = showSafety ? 'block' : 'none';
            
            // Render session state for unified header
            renderSession();
        }
        
        // ============ END MODAL ============
        let windDownInterval = null;
        let windDownTime = 60;
        let lastTypingTime = Date.now();
        let quietSeconds = 0;
        const WIND_DOWN_DURATION = 60;
        const WIND_DOWN_WARNING = 15;
        const MAX_SESSION_MINUTES = 10;
        
        function showEndModal() {
            // Update stats to match main screen
            document.getElementById('endConnected').textContent = document.getElementById('connectedCount').textContent;
            document.getElementById('endShared').textContent = state.dotCount;
            
            // Update typing state
            const isTyping = document.getElementById('typingDots').classList.contains('active');
            const typingCount = document.getElementById('typingCount').textContent;
            const typingRow = document.getElementById('endTypingRow');
            
            document.getElementById('endTypingCount').textContent = typingCount;
            typingRow.classList.toggle('active', isTyping);
            
            // Show step 1
            document.getElementById('endStep1').style.display = 'block';
            document.getElementById('endStep2').style.display = 'none';
            
            document.getElementById('endModal').classList.add('show');
        }
        
        function hideEndModal() {
            document.getElementById('endModal').classList.remove('show');
            if (windDownInterval) {
                clearInterval(windDownInterval);
                windDownInterval = null;
            }
            // Hide student overlay too
            document.getElementById('studentWinddown').classList.remove('visible');
        }
        
        function startWindDown() {
            // Switch to step 2
            document.getElementById('endStep1').style.display = 'none';
            document.getElementById('endStep2').style.display = 'block';
            
            // Show student overlay
            document.getElementById('studentWinddown').classList.add('visible');
            
            // Start countdown
            windDownTime = WIND_DOWN_DURATION;
            updateWindDownDisplay();
            
            windDownInterval = setInterval(() => {
                windDownTime--;
                updateWindDownDisplay();
                
                if (windDownTime <= 0) {
                    endSessionNow();
                }
            }, 1000);
        }
        
        function updateWindDownDisplay() {
            const pct = (windDownTime / WIND_DOWN_DURATION) * 100;
            const isWarning = windDownTime <= WIND_DOWN_WARNING;
            const isTyping = document.getElementById('typingDots').classList.contains('active');
            
            // Teacher display
            const teacherFill = document.getElementById('endWrapupFill');
            const teacherDots = document.getElementById('endWrapupDots');
            
            teacherFill.style.width = pct + '%';
            teacherDots.classList.toggle('active', isTyping);
            
            // Student display
            const studentFill = document.getElementById('studentWinddownFill');
            const studentDots = document.getElementById('studentWinddownDots');
            const studentHint = document.getElementById('studentWinddownHint');
            
            studentFill.style.width = pct + '%';
            studentDots.classList.toggle('active', isTyping);
            
            if (isWarning) {
                studentHint.textContent = 'last chance to share...';
            } else if (isTyping) {
                studentHint.textContent = 'others are typing...';
            } else {
                studentHint.textContent = 'still time to share...';
            }
        }
        
        function onStudentTyping() {
            lastTypingTime = Date.now();
            
            // Reset wind down if active and time > 30s and session < 10 min
            if (windDownInterval && windDownTime > 30) {
                const sessionMinutes = (600 - state.timerSeconds) / 60;
                if (sessionMinutes < MAX_SESSION_MINUTES) {
                    windDownTime = WIND_DOWN_DURATION;
                    updateWindDownDisplay();
                }
            }
        }
        
        function endSessionNow() {
            hideEndModal();
            clearInterval(state.timerInterval);
            setPhase('patternsTransition');
            // Sync to Firebase so students move to patterns
            Store.writePhase('patterns');
        }
        
        function endSession() {
            endSessionNow();
        }
        
        // ============ PATTERNS TRANSITION ANIMATION ============
        // 5 categories: 3 ouch-focused, 2 wow-focused
        // Simulating ~25 students with multiple signals each
        const patternCategories = [
            {
                id: 'heard',
                label: 'being heard',
                type: 'ouch', // primary type
                question: 'Who gets to speak? Who waits? What does it feel like to have something to say and not get to say it?',
                dots: { ouch: 8, wow: 2 },
                // History: array of past session intensities (0-20 scale)
                history: [12, 14, 10, null], // null = current session (filled by dots)
                quotes: [
                    { text: "I had my hand raised for awhile, and the teacher almost ignored me", type: 'ouch' },
                    { text: "when someone talked over me and they chose their idea", type: 'ouch' },
                    { text: "a teacher ran me over and did not let me talk", type: 'ouch' },
                    { text: "not getting able to talk like just now", type: 'ouch' },
                    { text: "when someone asked what I felt or what I thought", type: 'wow' }
                ]
            },
            {
                id: 'lost',
                label: 'feeling lost',
                type: 'ouch',
                question: 'What happens when the path forward isn\'t clear? When do students know what to do — and when do they just pretend?',
                dots: { ouch: 6, wow: 1 },
                history: [8, 10, 6, null],
                quotes: [
                    { text: "I didn't know what to work on", type: 'ouch' },
                    { text: "felt lost when you weren't here", type: 'ouch' },
                    { text: "I didn't understand what we had to do and the teacher didn't say it again", type: 'ouch' },
                    { text: "you established what we can do when you're not here", type: 'wow' }
                ]
            },
            {
                id: 'time',
                label: 'not enough time',
                type: 'ouch',
                question: 'When does time feel like enough? What gets rushed? What would space to think actually look like?',
                dots: { ouch: 5, wow: 0 },
                history: [14, 10, 6, null], // fading pattern
                quotes: [
                    { text: "we didn't get enough time to finish", type: 'ouch' },
                    { text: "I wasn't given enough time for the test", type: 'ouch' },
                    { text: "the class gets taken up and leaves me no time to study", type: 'ouch' }
                ]
            },
            {
                id: 'helped',
                label: 'getting help',
                type: 'wow',
                question: 'What makes help actually helpful? When does asking feel safe — and when does it feel like admitting failure?',
                dots: { ouch: 2, wow: 6 },
                history: [4, 6, 8, null], // growing pattern
                quotes: [
                    { text: "a good friend explained the math problem", type: 'wow' },
                    { text: "Sam took extra time to help get my drone in the air", type: 'wow' },
                    { text: "a teacher helped explain something to me", type: 'wow' },
                    { text: "the teachers explanations are not getting through to my head", type: 'ouch' }
                ]
            },
            {
                id: 'seen',
                label: 'feeling seen',
                type: 'wow',
                question: 'What does it take to feel like you matter here? When do students feel known — and when do they feel invisible?',
                dots: { ouch: 1, wow: 5 },
                history: [0, 0, 4, null], // new pattern
                quotes: [
                    { text: "you guys always make me feel like I matter and my ideas are good", type: 'wow' },
                    { text: "when you said if we build something it's ours", type: 'wow' },
                    { text: "students are finally opening up to me and talking to me", type: 'wow' },
                    { text: "in science class someone knew me for my sister not me", type: 'ouch' }
                ]
            }
        ];
        
        // Themes that appeared before but not this session (for returning sessions)
        const absentThemes = ['rushing through material', 'feeling judged'];
        
        // Session state
        let sessionType = 'first'; // 'first' or 'returning'
        
        function setSessionType(type) {
            sessionType = type;
            document.querySelectorAll('[data-session]').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.session === type);
            });
            // Re-render if on patterns screen
            if (state.phase === 'patterns') {
                renderPatternsTable();
                updatePatternsUI();
            }
        }
        
        function renderPatternsTable() {
            renderCategoriesEmpty();
            // If coming from animation, dots will fly in
            // If coming from diagnostic, show immediately
            if (state.phase === 'patterns' && !document.getElementById('dotsAnimationScreen').classList.contains('visible')) {
                showCategoriesImmediate();
            }
        }
        
        function renderCategoriesEmpty() {
            const container = document.getElementById('categoriesContainer');
            const isReturning = sessionType === 'returning';
            
            // Sort by total dots (loudest first)
            const sorted = [...patternCategories].sort((a, b) => 
                (b.dots.ouch + b.dots.wow) - (a.dots.ouch + a.dots.wow)
            );
            
            container.innerHTML = sorted.map(cat => {
                // Build target dots (hidden initially)
                const dots = [];
                for (let i = 0; i < cat.dots.ouch; i++) dots.push({ type: 'ouch' });
                for (let i = 0; i < cat.dots.wow; i++) dots.push({ type: 'wow' });
                
                // Build sparkline for returning sessions
                const currentIntensity = cat.dots.ouch + cat.dots.wow;
                const sparklineHtml = isReturning && cat.history ? cat.history.map((val, i) => {
                    const intensity = val === null ? currentIntensity : val;
                    const height = Math.max(4, Math.min(18, intensity));
                    const typeClass = cat.type;
                    const isActive = val !== null ? (val > 0) : true;
                    return `<div class="spark ${isActive ? typeClass : ''}" style="height: ${height}px"></div>`;
                }).join('') : '';
                
                return `
                    <div class="category-box" id="cat-${cat.id}" data-id="${cat.id}">
                        <div class="category-header" onclick="toggleCategory('${cat.id}')">
                            <div class="category-dots" id="dots-${cat.id}">
                                ${dots.map((d, i) => `<span class="cat-dot ${d.type}" data-index="${i}"></span>`).join('')}
                            </div>
                            <div class="category-label" id="label-${cat.id}">${cat.label}</div>
                            ${isReturning ? `<div class="sparkline" id="sparkline-${cat.id}">${sparklineHtml}</div>` : ''}
                            <button class="category-question" onclick="event.stopPropagation(); toggleQuestion('${cat.id}')">?</button>
                        </div>
                        <div class="quotes-container">
                            <div class="question-popout" id="question-${cat.id}">
                                <div class="question-popout-text">${cat.question}</div>
                                <button class="question-popout-close" onclick="event.stopPropagation(); closeQuestion('${cat.id}')">×</button>
                            </div>
                            <div class="quotes-inner" id="quotes-${cat.id}"></div>
                        </div>
                    </div>
                `;
            }).join('');
            
            // Show/hide absent themes section
            const absentSection = document.getElementById('absentThemesSection');
            if (absentSection) {
                if (isReturning && absentThemes.length > 0) {
                    document.getElementById('absentThemesList').textContent = absentThemes.join(', ');
                    absentSection.style.display = 'block';
                } else {
                    absentSection.style.display = 'none';
                }
            }
        }
        
        function showCategoriesImmediate() {
            // Show all categories immediately (for diagnostic/direct nav)
            const sorted = [...patternCategories].sort((a, b) => 
                (b.dots.ouch + b.dots.wow) - (a.dots.ouch + a.dots.wow)
            );
            
            sorted.forEach(cat => {
                const box = document.getElementById('cat-' + cat.id);
                const label = document.getElementById('label-' + cat.id);
                const sparkline = document.getElementById('sparkline-' + cat.id);
                if (box) box.classList.add('visible');
                if (label) label.classList.add('visible');
                if (sparkline) sparkline.classList.add('visible');
                
                // Show all dots
                document.querySelectorAll(`#dots-${cat.id} .cat-dot`).forEach(dot => {
                    dot.classList.add('visible');
                });
            });
            
            // Show absent themes for returning sessions
            const absentSection = document.getElementById('absentThemesSection');
            if (absentSection && sessionType === 'returning') {
                setTimeout(() => {
                    absentSection.classList.add('visible');
                }, 500);
            }
            
            document.getElementById('patternsPullHint').classList.add('visible');
        }
        
        function flyDotsToCategories(allShuffled, catIndex) {
            const sorted = [...patternCategories].sort((a, b) => 
                (b.dots.ouch + b.dots.wow) - (a.dots.ouch + a.dots.wow)
            );
            
            if (catIndex >= sorted.length) {
                // All done - clean up and show pull hint
                setTimeout(() => {
                    const screen = document.getElementById('dotsAnimationScreen');
                    screen.innerHTML = '';
                    screen.classList.remove('visible', 'transparent');
                    document.getElementById('patternsPullHint').classList.add('visible');
                }, 300);
                return;
            }
            
            const cat = sorted[catIndex];
            const box = document.getElementById('cat-' + cat.id);
            const targetDots = document.querySelectorAll(`#dots-${cat.id} .cat-dot`);
            const label = document.getElementById('label-' + cat.id);
            const dotsContainer = document.getElementById('dots-' + cat.id);
            
            // Show box (faded in)
            box.classList.add('visible');
            
            // Get position of target
            const containerRect = dotsContainer.getBoundingClientRect();
            
            // Get dots for this category
            const catDots = allShuffled.filter(d => d.category === cat.id);
            
            // Fly each dot over
            catDots.forEach((d, i) => {
                setTimeout(() => {
                    if (d.el) {
                        d.el.classList.add('flying');
                        const targetX = containerRect.left + containerRect.width - 15 - (catDots.length - 1 - i) * 15;
                        const targetY = containerRect.top + containerRect.height / 2 - 5;
                        d.el.style.left = targetX + 'px';
                        d.el.style.top = targetY + 'px';
                        
                        // Hide flying, show target
                        setTimeout(() => {
                            d.el.style.opacity = '0';
                            if (targetDots[i]) targetDots[i].classList.add('visible');
                        }, 350);
                    }
                }, i * 60);
            });
            
            // Fade in label
            setTimeout(() => {
                label.classList.add('visible');
            }, catDots.length * 60 + 300);
            
            // Next category
            setTimeout(() => {
                flyDotsToCategories(allShuffled, catIndex + 1);
            }, catDots.length * 60 + 500);
        }
        
        function toggleCategory(catId) {
            const box = document.getElementById('cat-' + catId);
            const wasExpanded = box.classList.contains('expanded');
            
            // Collapse all
            document.querySelectorAll('.category-box').forEach(b => b.classList.remove('expanded'));
            
            if (!wasExpanded) {
                box.classList.add('expanded');
                renderCategoryQuotes(catId);
            }
        }
        
        function renderCategoryQuotes(catId) {
            const cat = patternCategories.find(c => c.id === catId);
            const container = document.getElementById('quotes-' + catId);
            
            container.innerHTML = cat.quotes.map((q, i) => `
                <div class="quote-row ${q.type}-quote" onclick="clickQuote('${catId}', ${i})">
                    <span class="quote-text">"${q.text}"</span>
                </div>
            `).join('');
        }
        
        function toggleQuestion(catId) {
            const popout = document.getElementById('question-' + catId);
            const box = document.getElementById('cat-' + catId);
            
            // Make sure category is expanded
            if (!box.classList.contains('expanded')) {
                toggleCategory(catId);
            }
            
            // Toggle the popout
            if (popout.classList.contains('visible')) {
                popout.classList.remove('visible');
            } else {
                // Close other popouts
                document.querySelectorAll('.question-popout.visible').forEach(p => p.classList.remove('visible'));
                popout.classList.add('visible');
            }
        }
        
        function closeQuestion(catId) {
            document.getElementById('question-' + catId).classList.remove('visible');
        }
        
        function clickQuote(catId, quoteIndex) {
            // listening-acting: every click lands, every quote gets heard
            const cat = patternCategories.find(c => c.id === catId);
            const quote = cat.quotes[quoteIndex];
            
            // Add quote to conversation (don't reset)
            addQuoteToConversation(quote.text, quote.type);
            
            // Go to experiment
            setPhase('experiment');
        }
        
        function goToBallot() {
            setPhase('suggestions');
        }
        
        function goBackToPatterns() {
            // Just go back - conversation stays intact
            setPhase('patterns');
        }
        
        // ============ HISTORY PAGE ============
        
        // Mock history data (would come from storage in real implementation)
        const historyData = {
            // What's being captured THIS session (preview - will become history after commit)
            thisSession: {
                surfaced: [
                    { theme: 'not enough time for questions', isNew: true, oftenWith: null },
                    { theme: 'pacing feels rushed', isNew: false, oftenWith: 'homework load' },
                ],
                commitment: null, // Set when teacher commits
                ideas: [
                    { idea: 'pause after each section for questions' },
                ]
            },
            // Past history (from previous sessions)
            past: {
                surfaced: [
                    { theme: 'homework load', count: 4, sessions: 5, trend: [1, 1, 1, 0, 1], lastSeen: 'last week', oftenWith: 'sleep' },
                    { theme: 'pacing feels rushed', count: 3, sessions: 5, trend: [1, 0, 2, 1, 0], lastSeen: 'last week', oftenWith: null },
                    { theme: 'unclear expectations', count: 3, sessions: 5, trend: [2, 1, 1, 0, 1], lastSeen: '2 weeks ago', oftenWith: 'stress before tests' },
                ],
                tried: [
                    { date: 'Dec 15', pattern: 'unclear expectations', action: 'share rubric earlier', status: 'still trying' },
                    { date: 'Dec 1', pattern: 'pacing feels rushed', action: '2-min buffer zones', status: 'let go' },
                ],
                next: [
                    { idea: 'post objectives at start of class', from: 'unclear expectations' },
                ]
            }
        };
        
        function openHistoryPage() {
            document.getElementById('historyPage').classList.add('visible');
        }
        
        function closeHistoryPage() {
            document.getElementById('historyPage').classList.remove('visible');
        }
        
        function clickHistoryPattern(theme, oftenWith) {
            // Close history page
            closeHistoryPage();
            
            // Build the pattern text
            let patternText = theme;
            if (oftenWith) {
                patternText += ` (often with: ${oftenWith})`;
            }
            
            // Clear conversation and add pattern
            const conv = document.getElementById('expConversation');
            if (conv) conv.innerHTML = '';
            
            // Add to conversation as a pattern (not a raw quote)
            addPatternToConversation(patternText);
            
            // Go to experiment screen
            setPhase('experiment');
        }
        
        function addPatternToConversation(patternText) {
            const conv = document.getElementById('expConversation');
            if (!conv) return;
            
            // Fade any previous invitations
            conv.querySelectorAll('.exp-invite').forEach(el => {
                el.classList.add('faded');
            });
            
            // Add the pattern as a different style (not a raw quote)
            const patternEl = document.createElement('div');
            patternEl.className = 'exp-pattern-block';
            patternEl.innerHTML = `
                <div class="exp-pattern-label">pattern from history</div>
                <div class="exp-pattern-text">${patternText}</div>
            `;
            conv.appendChild(patternEl);
            
            // Add response with chips
            const responseEl = document.createElement('div');
            responseEl.className = 'exp-response';
            responseEl.innerHTML = `
                <div class="exp-reflection">This has come up before. What would you like to explore?</div>
                <div class="exp-chips">
                    <button class="exp-chip" onclick="handleInviteOption('ideas')">what might help?</button>
                    <button class="exp-chip" onclick="handleInviteOption('context')">what's connected?</button>
                    <button class="exp-chip" onclick="showTryInput()">I have an idea</button>
                </div>
            `;
            conv.appendChild(responseEl);
            
            scrollExpToBottom();
        }
        
        function switchHistoryTab(tabId) {
            // Update tab buttons
            document.querySelectorAll('.history-tab').forEach(tab => {
                tab.classList.toggle('active', tab.dataset.tab === tabId);
            });
            
            // Update content panels
            document.querySelectorAll('.history-tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            const targetContent = document.getElementById('historyTab' + tabId.charAt(0).toUpperCase() + tabId.slice(1));
            if (targetContent) {
                targetContent.classList.add('active');
            }
        }
        
        function renderHistorySparkline(data) {
            if (!data || data.length === 0) return '';
            const max = Math.max(...data, 1);
            const width = 60;
            const height = 16;
            
            const points = data.map((val, i) => {
                const x = (i / (data.length - 1)) * width;
                const y = height - (val / max) * (height - 4) - 2;
                return `${x},${y}`;
            }).join(' ');
            
            // Neutral color - just shows activity over time
            return `<svg class="history-sparkline" width="${width}" height="${height}">
                <polyline points="${points}" fill="none" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>`;
        }
        
        function renderHistorySurfaced() {
            const thisSessionContainer = document.getElementById('historySurfacedThisSessionList');
            const thisSessionSection = document.getElementById('historySurfacedThisSession');
            const pastContainer = document.getElementById('historySurfacedList');
            const pastSection = document.getElementById('historySurfacedPast');
            
            // This session
            if (thisSessionContainer && historyData.thisSession.surfaced.length > 0) {
                thisSessionContainer.innerHTML = historyData.thisSession.surfaced.map(item => {
                    const oftenWithData = item.oftenWith ? `data-often-with="${item.oftenWith}"` : '';
                    return `
                    <div class="history-item clickable" onclick="clickHistoryPattern('${item.theme}', ${item.oftenWith ? `'${item.oftenWith}'` : 'null'})" ${oftenWithData}>
                        <div class="history-item-main">
                            <div class="history-item-theme">${item.theme}</div>
                            <div class="history-item-count">${item.isNew ? 'new' : '+1'}</div>
                        </div>
                        ${item.oftenWith ? `<div class="history-item-often">often with: ${item.oftenWith}</div>` : ''}
                        <div class="history-item-meta">will be tracked after this session</div>
                    </div>
                `}).join('');
                thisSessionSection.classList.remove('empty');
            } else if (thisSessionSection) {
                thisSessionSection.classList.add('empty');
            }
            
            // Past history
            if (pastContainer && historyData.past.surfaced.length > 0) {
                pastContainer.innerHTML = historyData.past.surfaced.map(item => {
                    const oftenWithData = item.oftenWith ? `data-often-with="${item.oftenWith}"` : '';
                    return `
                    <div class="history-item clickable" onclick="clickHistoryPattern('${item.theme}', ${item.oftenWith ? `'${item.oftenWith}'` : 'null'})" ${oftenWithData}>
                        <div class="history-item-main">
                            <div class="history-item-theme">${item.theme}</div>
                            <div class="history-item-count">${item.count} times</div>
                        </div>
                        ${item.oftenWith ? `<div class="history-item-often">often with: ${item.oftenWith}</div>` : ''}
                        ${renderHistorySparkline(item.trend)}
                        <div class="history-item-meta">last seen ${item.lastSeen} · across ${item.sessions} sessions</div>
                    </div>
                `}).join('');
                pastSection.classList.remove('empty');
            } else if (pastSection) {
                if (historyData.thisSession.surfaced.length > 0) {
                    pastContainer.innerHTML = `
                        <div class="history-first-time">
                            <div class="history-first-time-text">this is your first session<br>patterns will build over time</div>
                        </div>
                    `;
                    pastSection.classList.remove('empty');
                } else {
                    pastSection.classList.add('empty');
                }
            }
        }
        
        function renderHistoryTried() {
            const thisSessionContainer = document.getElementById('historyTriedThisSessionList');
            const thisSessionSection = document.getElementById('historyTriedThisSession');
            const pastContainer = document.getElementById('historyTriedList');
            const pastSection = document.getElementById('historyTriedPast');
            
            // This session - show commitment if made, otherwise show placeholder
            if (thisSessionContainer) {
                if (historyData.thisSession.commitment) {
                    thisSessionContainer.innerHTML = `
                        <div class="history-commit">
                            <div class="history-commit-action">${historyData.thisSession.commitment.action}</div>
                            <div class="history-commit-context">today · for "${historyData.thisSession.commitment.pattern}"</div>
                            <span class="history-commit-status">just committed</span>
                        </div>
                    `;
                    thisSessionSection.classList.remove('empty');
                } else {
                    thisSessionContainer.innerHTML = `
                        <div class="history-item" style="text-align: center; color: #bbb;">
                            <div class="history-item-meta">your commitment will appear here</div>
                        </div>
                    `;
                    thisSessionSection.classList.remove('empty');
                }
            }
            
            // Past history
            if (pastContainer && historyData.past.tried.length > 0) {
                pastContainer.innerHTML = historyData.past.tried.map(item => `
                    <div class="history-commit">
                        <div class="history-commit-action">${item.action}</div>
                        <div class="history-commit-context">${item.date} · for "${item.pattern}"</div>
                        <span class="history-commit-status">${item.status}</span>
                    </div>
                `).join('');
                pastSection.classList.remove('empty');
            } else if (pastSection) {
                pastContainer.innerHTML = `
                    <div class="history-first-time">
                        <div class="history-first-time-text">experiments you try will appear here</div>
                    </div>
                `;
                pastSection.classList.remove('empty');
            }
        }
        
        function renderHistoryNext() {
            const thisSessionContainer = document.getElementById('historyNextThisSessionList');
            const thisSessionSection = document.getElementById('historyNextThisSession');
            const pastContainer = document.getElementById('historyNextList');
            const pastSection = document.getElementById('historyNextPast');
            
            // This session ideas
            if (thisSessionContainer && historyData.thisSession.ideas.length > 0) {
                thisSessionContainer.innerHTML = historyData.thisSession.ideas.map(item => `
                    <div class="history-next-item">
                        <div class="history-next-idea">${item.idea}</div>
                        <div class="history-next-from">from this session</div>
                    </div>
                `).join('');
                thisSessionSection.classList.remove('empty');
            } else if (thisSessionSection) {
                thisSessionContainer.innerHTML = `
                    <div class="history-item" style="text-align: center; color: #bbb;">
                        <div class="history-item-meta">ideas from this session will appear here</div>
                    </div>
                `;
                thisSessionSection.classList.remove('empty');
            }
            
            // Past ideas
            if (pastContainer && historyData.past.next.length > 0) {
                pastContainer.innerHTML = historyData.past.next.map(item => `
                    <div class="history-next-item">
                        <div class="history-next-idea">${item.idea}</div>
                        <div class="history-next-from">for "${item.from}"</div>
                    </div>
                `).join('');
                pastSection.classList.remove('empty');
            } else if (pastSection) {
                pastContainer.innerHTML = `
                    <div class="history-first-time">
                        <div class="history-first-time-text">ideas for next time will collect here</div>
                    </div>
                `;
                pastSection.classList.remove('empty');
            }
        }
        
        function initHistoryPage() {
            renderHistorySurfaced();
            renderHistoryTried();
            renderHistoryNext();
        }
        
        // Initialize history page when DOM is ready
        document.addEventListener('DOMContentLoaded', () => {
            initHistoryPage();
        });
        
        function addQuoteToConversation(text, type) {
            const conv = document.getElementById('expConversation');
            
            // Fade any previous invitations
            conv.querySelectorAll('.exp-invite').forEach(el => {
                el.classList.add('faded');
            });
            
            // Add the quote
            const quoteEl = document.createElement('div');
            quoteEl.className = 'exp-quote-block ' + type;
            quoteEl.innerHTML = `
                <div class="exp-quote-text">"${text}"</div>
            `;
            conv.appendChild(quoteEl);
            
            // Generate a warm reflection based on the quote
            const reflection = generateReflection(text, type);
            
            // Add reflection + chips (these are navigation, not ideas to collect)
            const responseEl = document.createElement('div');
            responseEl.className = 'exp-response';
            responseEl.innerHTML = `
                <div class="exp-reflection">${reflection}</div>
                <div class="exp-chips">
                    <button class="exp-chip" onclick="handleInviteOption('ideas')">what might help?</button>
                    <button class="exp-chip" onclick="handleInviteOption('why')">why does this happen?</button>
                    <button class="exp-chip" onclick="showTryInput()">I have an idea</button>
                </div>
            `;
            conv.appendChild(responseEl);
            
            scrollExpToBottom();
        }
        
        function generateReflection(text, type) {
            // Generate warm reflection based on what the student said
            const lowerText = text.toLowerCase();
            
            // Check for common themes
            if (lowerText.includes('ignored') || lowerText.includes('not let me') || lowerText.includes('talked over')) {
                return "That's hard. Wanting to share something and not getting the chance.";
            }
            if (lowerText.includes('hand raised') || lowerText.includes('called on')) {
                return "Waiting with your hand up, hoping to be seen. That takes courage.";
            }
            if (lowerText.includes('didn\'t understand') || lowerText.includes('didn\'t know') || lowerText.includes('lost')) {
                return "That uncertain feeling — when the path forward isn't clear.";
            }
            if (lowerText.includes('helped') || lowerText.includes('explained')) {
                return type === 'wow' 
                    ? "That moment when it finally clicks. Someone took the time."
                    : "Sometimes the explanation doesn't land the way it's meant to.";
            }
            if (lowerText.includes('time') || lowerText.includes('enough time')) {
                return "Never quite enough time. That pressure is real.";
            }
            if (lowerText.includes('matter') || lowerText.includes('seen') || lowerText.includes('feel like')) {
                return type === 'wow'
                    ? "Feeling like you belong here. That's everything."
                    : "Wanting to be known for who you are.";
            }
            
            // Default reflections by type
            if (type === 'ouch') {
                return "That sounds hard. Something here needs attention.";
            } else {
                return "That sounds like a moment worth protecting.";
            }
        }
        
        function showTryInput() {
            // Focus the input and change placeholder
            const input = document.getElementById('expInput');
            input.placeholder = "what's one small thing we could try?";
            input.focus();
            
            // Fade the chips
            document.querySelectorAll('.exp-chips:not(.faded)').forEach(el => {
                el.classList.add('faded');
            });
        }
        
        function handleInviteOption(option) {
            // Fade the chips
            document.querySelectorAll('.exp-chips:not(.faded)').forEach(el => {
                el.classList.add('faded');
            });
            
            if (option === 'ideas') {
                // Show some experiment ideas as chips — these ARE ideas to collect
                addExpAiMessage(
                    "Some things teachers have tried:",
                    ["pause before calling on anyone", "check in with one student first", "ask a quieter student to share"],
                    true // collect these as ideas
                );
            } else if (option === 'why') {
                // Explore causes as chips — not ideas, just context
                addExpAiMessage(
                    "A few reasons this might be happening:",
                    ["some need more time to think", "same voices tend to dominate", "might not feel safe to speak up"],
                    false // don't collect causes as ideas
                );
            }
        }
        
        function updatePatternsUI() {
            const isVoteMode = planState.mode === 'vote-teacher-decides' || planState.mode === 'vote-decides';
            const hint = document.getElementById('patternsPullHint');
            const btn = document.getElementById('patternsContinueBtn');
            
            if (isVoteMode) {
                hint.classList.remove('visible');
                btn.classList.add('visible');
            } else {
                hint.classList.add('visible');
                btn.classList.remove('visible');
            }
        }
        
        function togglePatternRow(catId) {
            toggleCategory(catId);
        }
        
        function selectQuote(event, catId, quoteText) {
            event.stopPropagation();
            addQuoteToConversation(quoteText, 'ouch');
            setPhase('experiment');
        }
        
        function startPatternsAnimation() {
            // Hide invitation
            document.getElementById('patternsTransition').classList.remove('active');
            
            const screen = document.getElementById('dotsAnimationScreen');
            screen.classList.add('visible');
            screen.innerHTML = '';
            
            // Build dot data from categories
            let allDots = [];
            patternCategories.forEach(cat => {
                // Add ouch dots
                for (let i = 0; i < cat.dots.ouch; i++) {
                    allDots.push({ category: cat.id, type: 'ouch' });
                }
                // Add wow dots
                for (let i = 0; i < cat.dots.wow; i++) {
                    allDots.push({ category: cat.id, type: 'wow' });
                }
            });
            
            // Shuffle
            const shuffled = [...allDots].sort(() => Math.random() - 0.5);
            
            // Create dots scattered
            shuffled.forEach((d, i) => {
                const dot = document.createElement('div');
                dot.className = 'swirl-dot';
                dot.style.left = (15 + Math.random() * 70) + '%';
                dot.style.top = (15 + Math.random() * 70) + '%';
                dot.dataset.category = d.category;
                dot.dataset.type = d.type;
                screen.appendChild(dot);
                d.el = dot;
            });
            
            // Phase 1: Dots appear
            let delay = 0;
            const n = shuffled.length;
            shuffled.forEach((d, i) => {
                let gap = i < n * 0.2 ? 120 : (i < n * 0.7 ? 50 : 100);
                setTimeout(() => d.el.classList.add('visible'), delay);
                delay += gap;
            });
            
            // Phase 2: Resolve colors
            const resolveStart = delay + 400;
            const batchSize = Math.ceil(n / 4);
            
            for (let batch = 0; batch < 4; batch++) {
                const batchDelay = resolveStart + batch * 400;
                const start = batch * batchSize;
                const end = Math.min(start + batchSize, n);
                
                setTimeout(() => {
                    for (let i = start; i < end; i++) {
                        if (shuffled[i] && shuffled[i].el) {
                            shuffled[i].el.classList.add('bulge');
                        }
                    }
                }, batchDelay);
                
                setTimeout(() => {
                    for (let i = start; i < end; i++) {
                        if (shuffled[i] && shuffled[i].el) {
                            shuffled[i].el.classList.remove('bulge');
                            shuffled[i].el.classList.add('resolved', shuffled[i].type);
                        }
                    }
                }, batchDelay + 250);
            }
            
            // Phase 3: Shrink and gather left
            const shrinkStart = resolveStart + 4 * 400 + 300;
            setTimeout(() => {
                shuffled.forEach((d, i) => {
                    if (d.el) {
                        d.el.classList.add('shrinking');
                        d.el.style.left = '50px';
                        d.el.style.top = (80 + (i % 15) * 22) + 'px';
                    }
                });
            }, shrinkStart);
            
            // Phase 4: Show categories and fly dots
            const flyStart = shrinkStart + 700;
            setTimeout(() => {
                screen.classList.add('transparent');
                setPhase('patterns');
                renderCategoriesEmpty();
                
                // Start flying dots to categories
                setTimeout(() => {
                    flyDotsToCategories(shuffled, 0);
                }, 200);
            }, flyStart);
        }
        
        // ============ COLLECT SCREEN ============
        function showPrompts() {
            const promptSets = getPromptSets();
            const set = promptSets[state.promptSet % promptSets.length];
            document.getElementById('nudgeText').textContent = set.nudge;
            
            const chipsEl = document.getElementById('chips');
            chipsEl.innerHTML = set.chips.map(c => 
                `<button class="chip" onclick="useChip(this)">${c}</button>`
            ).join('');
            
            // Update placeholder based on role and context
            const lang = getContextLanguage();
            const input = document.getElementById('input');
            input.placeholder = state.role === 'teacher' 
                ? lang.facilitatorInputPlaceholder 
                : lang.inputPlaceholder;
        }
        
        function nextPrompts() {
            const promptSets = getPromptSets();
            state.promptSet = (state.promptSet + 1) % promptSets.length;
            showPrompts();
            const btn = document.getElementById('refreshBtn');
            btn.classList.add('spin');
            setTimeout(() => btn.classList.remove('spin'), 300);
        }
        
        function toggleHelp() {
            const prompts = document.getElementById('prompts');
            const toggle = document.getElementById('helpToggle');
            prompts.classList.toggle('visible');
            toggle.classList.toggle('active');
        }
        
        function hideHelp() {
            document.getElementById('prompts').classList.remove('visible');
            document.getElementById('helpToggle').classList.remove('active');
        }
        
        function useChip(el) {
            const input = document.getElementById('input');
            let text = el.textContent.replace(/\.\.\.$/,'');
            const blankPos = text.indexOf('___');
            
            if (blankPos !== -1) {
                text = text.replace('___', '');
                input.value = text;
                input.focus();
                input.setSelectionRange(blankPos, blankPos);
            } else {
                input.value = text;
                input.focus();
            }
            hideHelp();
        }
        
        // Debug controls (lab mode) - force signal type for testing
        // ALL 6 BUTTONS = ONE RADIO GROUP - only one can be active
        function clearAllDebugKeys() {
            document.querySelectorAll('.debug-key').forEach(btn => {
                btn.classList.remove('active');
            });
        }
        
        function setDebugType(type) {
            clearAllDebugKeys();
            debugState.type = type;
            debugState.id = 'anon';
            
            // Reset warning flag when selecting a new mode
            window.idWarned = false;
            
            const btn = document.querySelector(`.debug-key[data-type="${type}"]`);
            if (btn) btn.classList.add('active');
            
            // Set complete state based on type
            if (type === 'ouch') {
                state.mode = 'ouch';
                state.validation = 'pass';
            } else if (type === 'wow') {
                state.mode = 'wow';
                state.validation = 'pass';
            } else if (type === 'safety') {
                state.validation = 'fail';
            } else {
                // auto (·) - let AI decide the type
                state.mode = 'auto';
                state.validation = 'pass';
            }
        }
        
        function setDebugId(id) {
            clearAllDebugKeys();
            debugState.id = id;
            
            const btn = document.querySelector(`.debug-key[data-id="${id}"]`);
            if (btn) btn.classList.add('active');
            
            // Reset warning flag when selecting a new mode
            window.idWarned = false;
            
            // n = name prompt (loops in demo mode)
            // a = "you might be identified" warning (shows once, then accepts)
            state.mode = 'ouch';
            if (id === 'named') {
                state.validation = 'name';
            } else {
                state.validation = 'id';
            }
        }
        
        // Initialize debug buttons on load
        function initDebugControls() {
            setDebugType('auto'); // starts with '·' lit (AI decides)
        }
        
        function send() {
            const input = document.getElementById('input');
            const text = input.value.trim();
            if (!text) return;
            
            const content = document.getElementById('content');
            input.value = '';
            hideHelp();
            
            // Store text for showToast to use
            window._pendingSignalText = text;
            
            // Show floating message
            content.innerHTML = `<div class="message floating">${text.replace(/</g, '&lt;')}</div>`;
            
            setTimeout(async () => {
                // In debug mode, enforce validation based on active button
                const activeBtn = document.querySelector('.debug-key.active');
                if (activeBtn) {
                    const type = activeBtn.dataset.type;
                    const id = activeBtn.dataset.id;
                    if (type === 'safety') {
                        // × loops forever
                        state.validation = 'fail';
                    } else if (id === 'named') {
                        // n loops forever
                        state.validation = 'name';
                    } else if (id === 'anon') {
                        // a shows warning once, then accepts
                        if (!window.idWarned) {
                            state.validation = 'id';
                        } else {
                            state.validation = 'pass';
                        }
                    } else {
                        // o, w, · → pass through
                        state.validation = 'pass';
                    }
                }
                
                // Check validation scenario
                if (state.validation === 'fail') {
                    showBoundaryFail();
                    return;
                }
                
                if (state.validation === 'name') {
                    showBoundaryName(text);
                    return;
                }
                
                if (state.validation === 'id') {
                    showBoundaryId(text);
                    return;
                }
                
                // Process signal FIRST (while message still visible)
                const toastReady = await prepareToast();
                
                // NOW shrink the message
                const message = content.querySelector('.message');
                if (message) {
                    message.classList.remove('floating');
                    message.classList.add('shrinking');
                }
                
                // Show toast after shrink animation
                setTimeout(() => showToastNow(toastReady), 400);
            }, 1500);
        }
        
        // Prepare toast data (async - does all the waiting)
        async function prepareToast() {
            const text = window._pendingSignalText || '';
            window._pendingSignalText = null;
            
            // Determine if we're letting AI decide
            const autoMode = state.mode === 'auto';
            let finalType = state.mode;
            let aiReasoning = null;
            let needsUserInput = false;
            let pendingSignal = null;
            let pendingFlowId = null;
            
            // Process signal through the pipeline
            if (text && typeof processSignal === 'function') {
                if (autoMode) {
                    // AUTO MODE: wait for AI to classify, use its type
                    const result = await processSignal(text, null); // null = let AI decide
                    finalType = result.signal?.type || 'unknown';
                    aiReasoning = result.aiReasoning;
                    pendingSignal = result.signal;
                    pendingFlowId = result.flowId; // Pass flowId for continuation
                    
                    // If unknown, we'll need to ask the user
                    if (finalType === 'unknown') {
                        needsUserInput = true;
                    }
                    
                    if (result.flagged) {
                        console.log('[signal] Flagged but stored (warn mode):', result.signal.flags);
                    }
                } else {
                    // FORCED MODE: user's type wins, AI just flags
                    const result = await processSignal(text, state.mode);
                    if (result.flagged) {
                        console.log('[signal] Flagged but stored (warn mode):', result.signal.flags);
                    }
                }
            } else {
                // Fallback: add simple signal record
                if (typeof session !== 'undefined' && session.signals) {
                    session.signals.push(createSignalRecord(text, finalType, 
                        { name: false, id: false, crisis: false }));
                }
            }
            
            return { 
                text,
                finalType, 
                autoMode, 
                aiReasoning, 
                needsUserInput,
                pendingSignal,
                pendingFlowId
            };
        }
        
        // Show the toast (sync - no waiting)
        function showToastNow(prepared) {
            const { text, finalType, autoMode, aiReasoning, needsUserInput, pendingSignal, pendingFlowId } = prepared;
            
            // If we need user input, show the prompt instead
            if (needsUserInput) {
                showTypePrompt(text, pendingSignal, aiReasoning, pendingFlowId);
                return;
            }
            
            // Otherwise show the toast
            showToastForType(finalType, autoMode);
        }
        
        // Legacy wrapper for backward compat
        async function showToast() {
            const prepared = await prepareToast();
            showToastNow(prepared);
        }
        
        // Show the "you tell us" prompt when type is unknown
        function showTypePrompt(text, pendingSignal, reasoning, flowId) {
            const content = document.getElementById('content');
            
            content.innerHTML = `
                <div class="type-prompt">
                    <div class="type-prompt-question">was this an...</div>
                    <div class="type-prompt-buttons">
                        <button class="type-prompt-btn ouch" onclick="resolveTypePrompt('ouch')">
                            <span class="type-prompt-icon">●</span>
                            ouch
                        </button>
                        <button class="type-prompt-btn wow" onclick="resolveTypePrompt('wow')">
                            <span class="type-prompt-icon">●</span>
                            wow
                        </button>
                    </div>
                    <div class="type-prompt-hint">${reasoning || 'we couldn\'t tell'}</div>
                </div>
            `;
            
            // Store pending signal and flowId for resolution
            window._pendingTypeSignal = pendingSignal;
            window._pendingTypeText = text;
            window._pendingFlowId = flowId;
        }
        
        // User chose the type
        async function resolveTypePrompt(chosenType) {
            const signal = window._pendingTypeSignal;
            const text = window._pendingTypeText;
            const flowId = window._pendingFlowId;
            
            console.log('[resolveType] chosenType:', chosenType, 'signal:', !!signal, 'flowId:', flowId);
            
            if (signal) {
                // Update the signal's type
                signal.type = chosenType;
                
                // Log the user's choice
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('o', 'userChose', chosenType, {
                        originalType: 'unknown',
                        chosenType: chosenType,
                        text: text?.slice(0, 50)
                    },
                    flowId,
                    'you'
                    );
                }
                
                // Store the signal (local + Firebase)
                if (typeof session !== 'undefined' && session.signals) {
                    session.signals.push(signal);
                }
                
                console.log('[resolveType] calling Store.writeSignal...');
                const firebaseResult = await Store.writeSignal(signal);
                console.log('[resolveType] firebaseResult:', firebaseResult);
                
                const storagePath = firebaseResult ? 'Firebase + session.signals' : 'session.signals (local only)';
                
                // Log storage
                if (typeof logDebugEvent === 'function') {
                    logDebugEvent('>', 'stored', firebaseResult ? 'Firebase' : 'local only', {
                        type: signal.type,
                        id: signal.id,
                        storage: storagePath,
                        firebase: !!firebaseResult
                    },
                    flowId,
                    firebaseResult ? 'Firebase' : 'session.signals'
                    );
                }
                
                // End flow
                if (typeof endEventFlow === 'function' && flowId) {
                    endEventFlow(flowId, { 
                        type: signal.type, 
                        id: signal.id, 
                        storage: storagePath
                    });
                }
                
                if (typeof renderSession === 'function') {
                    renderSession();
                }
                
                // Force debug console update
                if (typeof updateDebugConsole === 'function') {
                    updateDebugConsole();
                }
            } else {
                console.warn('[resolveType] no pending signal!');
            }
            
            window._pendingTypeSignal = null;
            window._pendingTypeText = null;
            window._pendingFlowId = null;
            
            // Now show the toast
            showToastForType(chosenType, true);
        }
        
        // Display the actual toast animation
        function showToastForType(finalType, autoMode) {
            const content = document.getElementById('content');
            const style = pick(toastStyles);
            const anim = pick(toastAnims);
            const word = pick(wordVariations[finalType] || wordVariations['ouch']);
            const flavor = pick(flavorWords[finalType] || flavorWords['ouch']);
            
            // Flash background
            document.body.classList.add('bg-' + finalType);
            
            content.innerHTML = `
                <div class="toast active ${finalType} ${style} ${anim}">
                    <div class="toast-word">${word}</div>
                    <div class="toast-sub">${flavor}</div>
                </div>
            `;
            
            // Add dot
            setTimeout(() => {
                const dot = document.createElement('div');
                dot.className = 'dot glow ' + finalType;
                document.getElementById('dots').appendChild(dot);
                setTimeout(() => dot.classList.remove('glow'), 600);
            }, 300);
            
            // Reset
            setTimeout(() => {
                document.body.classList.remove('bg-ouch', 'bg-wow');
                content.innerHTML = '';
                const promptSets = getPromptSets();
                state.promptSet = (state.promptSet + 1) % promptSets.length;
                showPrompts();
            }, 2000);
        }
        
        function showBoundaryFail() {
            const content = document.getElementById('content');
            content.innerHTML = `
                <div class="boundary">
                    <div class="boundary-word fail">not here.</div>
                    <div class="boundary-explain">
                        This space is for learning feedback.<br><br>
                        <a href="tel:988">988</a> is not 911 — it's people trained to listen, not dispatch. Free, private, 24/7.
                    </div>
                </div>
            `;
            hideHelp();
            
            // Clear on next input
            const input = document.getElementById('input');
            const clearFn = () => {
                content.style.opacity = '0';
                setTimeout(() => {
                    content.style.opacity = '1';
                    content.innerHTML = '';
                    showPrompts();
                }, 300);
                input.removeEventListener('input', clearFn);
            };
            input.addEventListener('input', clearFn);
            
            setTimeout(clearFn, 12000);
        }
        
        function showBoundaryName(text) {
            const content = document.getElementById('content');
            const input = document.getElementById('input');
            const hint = document.getElementById('boundaryHint');
            
            content.innerHTML = `
                <div class="boundary">
                    <div class="boundary-word name">anonymous.</div>
                    <div class="boundary-explain">
                        reflections are anonymous by design.<br>
                        try swapping names for roles.
                    </div>
                </div>
            `;
            
            hint.textContent = 'replace with: "a teacher" · "a student" · "an adult" · "someone"';
            hint.classList.remove('gold');
            input.value = text;
            hideHelp();
            
            const clearFn = () => {
                if (input.value !== text) {
                    hint.textContent = '';
                    content.style.opacity = '0';
                    setTimeout(() => {
                        content.style.opacity = '1';
                        content.innerHTML = '';
                        showPrompts();
                    }, 300);
                    input.removeEventListener('input', clearFn);
                }
            };
            input.addEventListener('input', clearFn);
            input.focus();
        }
        
        function showBoundaryId(text) {
            const content = document.getElementById('content');
            const input = document.getElementById('input');
            const hint = document.getElementById('boundaryHint');
            const sendBtn = document.getElementById('sendBtn');
            
            content.innerHTML = `
                <div class="boundary">
                    <div class="boundary-word id">identifiable.</div>
                    <div class="boundary-explain">
                        small groups can sometimes guess who wrote what.<br>
                        details like this narrow it down.
                    </div>
                </div>
            `;
            
            hint.textContent = 'edit to be vaguer, or submit again to send as-is';
            hint.classList.add('gold');
            sendBtn.style.background = 'var(--gold)';
            input.value = text;
            hideHelp();
            
            window.idWarned = true;
            
            const clearFn = () => {
                if (input.value !== text) {
                    hint.textContent = '';
                    hint.classList.remove('gold');
                    sendBtn.style.background = '';
                    window.idWarned = false;
                    content.style.opacity = '0';
                    setTimeout(() => {
                        content.style.opacity = '1';
                        content.innerHTML = '';
                        showPrompts();
                    }, 300);
                    input.removeEventListener('input', clearFn);
                }
            };
            input.addEventListener('input', clearFn);
            input.focus();
        }
        
        // ============ EXPERIMENT SCREEN ============
        let currentExperiment = null;
        let experimentCount = 0;
        
        // ═══ CARDS COLLECTOR — remember experiments ═══
        let collectedCards = [];
        
        function updateCardMini() {
            const mini = document.getElementById('cardMini');
            const text = document.getElementById('cardMiniText');
            const count = document.getElementById('cardMiniCount');
            
            if (!mini || !text) return;
            
            if (currentExperiment && currentExperiment.tryText) {
                mini.style.display = 'block';
                text.textContent = currentExperiment.tryText;
                
                // Show count badge if there are committed experiments
                const committedCount = collectedCards.filter(c => c.committed).length;
                if (committedCount > 0) {
                    count.textContent = committedCount + 1;
                    count.style.display = 'flex';
                } else {
                    count.style.display = 'none';
                }
            } else if (collectedCards.length > 0) {
                // Show last committed experiment
                const last = collectedCards[collectedCards.length - 1];
                mini.style.display = 'block';
                text.textContent = last.tryText;
                count.textContent = collectedCards.length;
                count.style.display = collectedCards.length > 1 ? 'flex' : 'none';
            } else {
                mini.style.display = 'none';
            }
        }
        
        function toggleCardsPanel() {
            const panel = document.getElementById('cardsPanel');
            if (panel) {
                panel.classList.toggle('show');
                if (panel.classList.contains('show')) {
                    renderCardsList();
                }
            }
        }
        
        function renderCardsList() {
            const list = document.getElementById('cardsList');
            if (!list) return;
            
            let html = '';
            
            // Current experiment first
            if (currentExperiment && currentExperiment.tryText) {
                html += `
                    <div class="cards-list-item current">
                        <div class="cards-item-label">current</div>
                        <div class="cards-item-text">${currentExperiment.tryText}</div>
                    </div>
                `;
            }
            
            // Committed experiments
            collectedCards.forEach((card, i) => {
                html += `
                    <div class="cards-list-item committed">
                        <div class="cards-item-label committed">✓ committed</div>
                        <div class="cards-item-text">${card.tryText}</div>
                    </div>
                `;
            });
            
            if (html === '') {
                html = '<div class="ideas-empty">experiments will appear here</div>';
            }
            
            list.innerHTML = html;
        }
        
        function collectCard(experiment) {
            if (experiment && experiment.tryText && experiment.committed) {
                collectedCards.push({
                    tryText: experiment.tryText,
                    wows: experiment.wows || [],
                    committed: true,
                    timestamp: Date.now()
                });
            }
        }
        
        // Student-voice wows (things students have actually said)
        const wowBank = [
            "the teacher actually called on me today",
            "I got to finish what I was saying",
            "someone asked me a follow-up question",
            "there was a pause and I had time to think",
            "I didn't have to fight to get a word in",
            "the teacher noticed I had my hand up",
            "it felt like people were actually listening",
            "I said something and someone nodded"
        ];
        
        const starterIdeas = [
            "wait 5 seconds before calling on anyone",
            "ask 'who haven't we heard from?'",
            "keep a mental tally of who's spoken"
        ];
        
        // ═══ SCROLL HELPER — one reliable method ═══
        function scrollExpToBottom() {
            const screen = document.getElementById('experimentScreen');
            if (screen) {
                setTimeout(() => {
                    screen.scrollTop = screen.scrollHeight;
                }, 50);
            }
        }
        
        // ═══ IDEAS COLLECTOR — remember what was offered ═══
        let collectedIdeas = [];
        
        function collectIdea(idea) {
            if (!collectedIdeas.includes(idea)) {
                collectedIdeas.push(idea);
                updateIdeasBadge();
            }
        }
        
        function updateIdeasBadge() {
            const badge = document.getElementById('ideasBadge');
            const count = document.getElementById('ideasCount');
            if (badge && count) {
                count.textContent = collectedIdeas.length;
                badge.style.display = collectedIdeas.length > 0 ? 'flex' : 'none';
            }
        }
        
        function toggleIdeasPanel() {
            const panel = document.getElementById('ideasPanel');
            if (panel) {
                panel.classList.toggle('show');
                if (panel.classList.contains('show')) {
                    renderIdeasList();
                }
            }
        }
        
        function renderIdeasList() {
            const list = document.getElementById('ideasList');
            if (!list) return;
            
            if (collectedIdeas.length === 0) {
                list.innerHTML = '<div class="ideas-empty">ideas will appear here as we talk</div>';
            } else {
                list.innerHTML = collectedIdeas.map(idea => 
                    `<div class="ideas-item">${idea}</div>`
                ).join('');
            }
        }
        
        function initExperimentConversation() {
            const container = document.getElementById('expConversation');
            
            // heard-back: don't wipe if quotes or patterns already exist
            if (container.querySelector('.exp-quote-block') || container.querySelector('.exp-pattern-block')) {
                return; // content is already there — respect it
            }
            
            container.innerHTML = '';
            currentExperiment = null;
            
            addExpAiMessage(
                "Six students said they felt unheard this week. What's one small thing we could try?",
                ["show me ideas", "why might this happen?"]
            );
        }
        
        function addExpAiMessage(text, chips = [], collectAsIdeas = false) {
            const container = document.getElementById('expConversation');
            
            const div = document.createElement('div');
            div.className = 'exp-turn';
            
            let html = `<div class="exp-ai-msg">${text}</div>`;
            
            if (chips.length > 0) {
                html += `<div class="exp-chips">`;
                chips.forEach(chip => {
                    if (collectAsIdeas) collectIdea(chip); // only collect real try-ideas
                    html += `<button class="exp-chip" onclick="handleExpChip(this, '${chip.replace(/'/g, "\\'")}')">${chip}</button>`;
                });
                html += `</div>`;
            }
            
            div.innerHTML = html;
            container.appendChild(div);
            
            scrollExpToBottom();
        }
        
        // User message for the older exp-ai-msg flow (matches visually)
        function addExpUserMessageOld(text) {
            const container = document.getElementById('expConversation');
            
            const div = document.createElement('div');
            div.className = 'exp-turn';
            div.innerHTML = `<div class="exp-user-msg">${text}</div>`;
            container.appendChild(div);
            
            scrollExpToBottom();
        }
        
        function addExpCard() {
            const container = document.getElementById('expConversation');
            
            const div = document.createElement('div');
            div.className = 'exp-card';
            div.id = `exp-card-${currentExperiment.id}`;
            div.innerHTML = `
                <div class="exp-card-main">
                    <div class="exp-card-header">
                        <div class="exp-card-title">two week experiment</div>
                        <div class="exp-card-badge"></div>
                    </div>
                    <div class="exp-try-text">${currentExperiment.tryText}</div>
                    <div class="exp-wows-label">students might say</div>
                    <div class="exp-wows">
                        ${currentExperiment.wows.map(w => `<div class="exp-wow-item">${w}</div>`).join('')}
                    </div>
                </div>
                <div class="exp-card-actions">
                    <button class="exp-commit-btn" onclick="commitExperiment()">I'm in</button>
                    <button class="exp-adjust-btn" onclick="adjustExperiment()">adjust</button>
                </div>
            `;
            
            container.appendChild(div);
            
            // Update floating card mini
            updateCardMini();
            
            scrollExpToBottom();
        }
        
        function updateExpCard() {
            const card = document.getElementById(`exp-card-${currentExperiment.id}`);
            if (!card) return;
            
            card.querySelector('.exp-try-text').textContent = currentExperiment.tryText;
            card.querySelector('.exp-wows').innerHTML = 
                currentExperiment.wows.map(w => `<div class="exp-wow-item">${w}</div>`).join('');
            
            if (currentExperiment.committed) {
                card.classList.add('committed');
                card.querySelector('.exp-card-badge').textContent = '✓ committed';
                card.querySelector('.exp-card-actions').style.display = 'none';
            }
            
            // Keep floating card mini in sync
            updateCardMini();
        }
        
        function fadePreviousExp() {
            document.querySelectorAll('.exp-ai-msg:not(.faded)').forEach(el => {
                el.classList.add('faded');
            });
            document.querySelectorAll('.exp-user-msg:not(.faded)').forEach(el => {
                el.classList.add('faded');
            });
            document.querySelectorAll('.exp-chips:not(.faded)').forEach(el => {
                el.classList.add('faded');
            });
        }
        
        function getTwoWows() {
            const shuffled = [...wowBank].sort(() => Math.random() - 0.5);
            return shuffled.slice(0, 2);
        }
        
        function handleExpChip(chip, text) {
            chip.classList.add('selected');
            fadePreviousExp();
            addExpUserMessageOld(text);  // Use matching visual style
            handleExpResponse(text);
        }
        
        // ═══ EXPERIMENT RESULT DIALOG ═══
        function toggleExpResult() {
            const dialog = document.getElementById('expResultDialog');
            dialog.classList.toggle('show');
        }
        
        // Quick off — double-click or button, immediately kills the experiment
        function quickOffExperiment() {
            const dot = document.getElementById('expLiveDot');
            const dialog = document.getElementById('expResultDialog');
            
            dot.classList.add('off');
            dot.innerHTML = '<span class="exp-result-label">OFF</span>';
            
            dialog.classList.remove('show');
            
            // Actually turn off the experiment
            if (typeof experiments !== 'undefined') {
                // Find and disable the together playground experiment
                // experiments.togetherPlayground = false;
            }
            
            addExpUserMessage('turned it off');
            setTimeout(() => {
                addExpClaudeMessage('Got it — experiment off. What felt wrong?');
            }, 300);
        }
        
        // Fork in the road — next step assuming they like it
        function selectFork(direction) {
            const dialog = document.getElementById('expResultDialog');
            dialog.classList.remove('show');
            
            addExpUserMessage(`let's try: ${direction}`);
            
            setTimeout(() => {
                if (direction.includes('wow hole')) {
                    addExpClaudeMessage('Adding a wow hole — a green target that appears randomly. First one there gets a little celebration. Building it now...', []);
                } else if (direction.includes('ouch')) {
                    addExpClaudeMessage('Adding ouch zones — red areas that bounce you back hard if you touch them. Creates tension. Building...', []);
                } else if (direction.includes('bouncier')) {
                    addExpClaudeMessage('Tuning the physics — making bumps feel more playful, less floaty. Adjusting now...', []);
                }
            }, 400);
        }
        
        function keepExperiment() {
            const dialog = document.getElementById('expResultDialog');
            const dot = document.getElementById('expLiveDot');
            
            // Celebrate
            dot.style.background = 'var(--wow)';
            dot.innerHTML = '<span style="font-size: 20px;">✓</span>';
            dot.style.animation = 'none';
            
            dialog.classList.remove('show');
            
            // Add to conversation
            addExpUserMessage('keeping it — let\'s make it better');
            
            setTimeout(() => {
                addExpClaudeMessage('What\'s the first thing that would make this feel like play instead of just presence?');
            }, 500);
        }
        
        function rejectExperiment() {
            const dialog = document.getElementById('expResultDialog');
            const dot = document.getElementById('expLiveDot');
            
            dot.style.background = 'var(--ouch)';
            dot.innerHTML = '<span style="font-size: 20px;">×</span>';
            dot.style.animation = 'none';
            
            dialog.classList.remove('show');
            
            addExpUserMessage('not quite — doesn\'t feel right');
            
            setTimeout(() => {
                addExpClaudeMessage('What felt off? Was it the interaction, the visuals, or something else?');
            }, 500);
        }
        
        function talkExperiment() {
            const dialog = document.getElementById('expResultDialog');
            dialog.classList.remove('show');
            
            // Focus input
            document.getElementById('expInput')?.focus();
        }
        
        function addExpUserMessage(text) {
            const conversation = document.getElementById('expConversation');
            const msg = document.createElement('div');
            msg.className = 'exp-msg sam';
            msg.innerHTML = `
                <div class="exp-msg-who">you</div>
                <div class="exp-msg-text">${text}</div>
            `;
            conversation.appendChild(msg);
            scrollExpToBottom();
        }
        
        function addExpClaudeMessage(text, ideas = []) {
            const conversation = document.getElementById('expConversation');
            const msg = document.createElement('div');
            msg.className = 'exp-msg claude';
            
            let ideasHtml = '';
            if (ideas.length > 0) {
                // These are follow-up options, not experiment ideas to collect
                ideasHtml = `<div class="exp-ideas">${ideas.map(i => 
                    `<span class="exp-idea" onclick="selectExpIdea(this)">${i}</span>`
                ).join('')}</div>`;
            }
            
            msg.innerHTML = `
                <div class="exp-msg-who">reflection</div>
                <div class="exp-msg-text">${text}</div>
                ${ideasHtml}
            `;
            conversation.appendChild(msg);
            scrollExpToBottom();
        }
        
        function selectExpIdea(chip) {
            const text = chip.textContent;
            addExpUserMessage(text);
            
            // Respond based on selection
            setTimeout(() => {
                if (text.includes('wow hole')) {
                    addExpClaudeMessage('A wow hole that appears randomly — first one there gets a little celebration. Should it be competitive or collaborative?', ['competitive — race to it', 'collaborative — everyone helps']);
                } else if (text.includes('shared target')) {
                    addExpClaudeMessage('Everyone pushes toward the same goal together. The dot only moves when multiple people push. Feels more like cooperation than competition.', ['let\'s try it', 'what else?']);
                } else if (text.includes('ouch zone')) {
                    addExpClaudeMessage('Ouch zones appear — touch one and you bounce back hard. Creates tension and laughter. Could be the hazards in the golf game.', ['that sounds fun', 'combine with wow hole?']);
                } else {
                    addExpClaudeMessage('Interesting — tell me more about that direction.');
                }
            }, 500);
        }
        
        function sendExpMessage() {
            const input = document.getElementById('expInput');
            const text = input.value.trim();
            if (!text) return;
            input.value = '';
            handleExpResponse(text);
        }
        
        function handleExpResponse(text) {
            fadePreviousExp();
            
            const lower = text.toLowerCase();
            
            setTimeout(() => {
                // Show ideas
                if (lower.includes("show me ideas") || lower === "ideas") {
                    addExpAiMessage(
                        "Research shows that wait time—even 3-5 seconds—dramatically increases who participates. Here are some things teachers have tried:",
                        starterIdeas
                    );
                }
                // Why question
                else if (lower.includes("why might this happen") || (lower.includes("why") && lower.includes("happen"))) {
                    addExpAiMessage(
                        "Often it's not intentional. In a fast-paced class, the same hands go up and it's easy to call on them. The quieter students get quieter. A small pause can interrupt that pattern.",
                        ["that makes sense", "show me ideas"]
                    );
                }
                // Looks good - ready to commit
                else if (lower.includes("looks good")) {
                    addExpAiMessage(
                        "Great. If you're ready, hit 'I'm in' on the card. Or we can adjust it first.",
                        ["what if it doesn't work?", "how will I remember?"]
                    );
                }
                // Tell me more
                else if (lower.includes("tell me more")) {
                    addExpAiMessage(
                        "This pattern—students feeling unheard—often comes from pace. When things move fast, the same voices fill the space. A pause, even a short one, gives the quieter students a chance to gather their thoughts.",
                        ["that helps", "I want to try something else"]
                    );
                }
                // Something else
                else if (lower.includes("something else") || lower.includes("try something")) {
                    currentExperiment = null;
                    addExpAiMessage(
                        "No problem. What feels more like you?",
                        starterIdeas
                    );
                }
                // That helps / makes sense
                else if (lower.includes("that helps") || lower.includes("makes sense")) {
                    addExpAiMessage(
                        "Want to try something for the next two weeks? Even a small experiment can shift the pattern.",
                        ["show me ideas", "I have one"]
                    );
                }
                // What if it doesn't work
                else if (lower.includes("doesn't work") || lower.includes("won't work")) {
                    addExpAiMessage(
                        "That's okay—this is an experiment, not a commitment to forever. If it doesn't land, you'll learn something. We can try a different approach in two weeks.",
                        ["okay", "I want to try something else"]
                    );
                }
                // How will I remember
                else if (lower.includes("remember")) {
                    addExpAiMessage(
                        "Some teachers put a sticky note on their desk. Others set a phone reminder before class. What would work for you?",
                        ["sticky note", "phone reminder", "I'll figure it out"]
                    );
                }
                // Okay/acknowledgment
                else if (lower === "okay" || lower.includes("figure it out") || lower.includes("sticky") || lower.includes("reminder")) {
                    addExpAiMessage(
                        "You're set. When you're ready, hit 'I'm in' on the card above.",
                        []
                    );
                }
                // Make smaller
                else if (lower.includes("smaller") || lower.includes("too big")) {
                    if (currentExperiment) {
                        currentExperiment.tryText = "once this week, pause 3 seconds before calling on anyone";
                        updateExpCard();
                        addExpAiMessage(
                            "Smaller is often better. Just once, with intention, is enough to notice something new.",
                            ["looks good", "different wows"]
                        );
                    }
                }
                // Different wows
                else if (lower.includes("different") && lower.includes("wow")) {
                    if (currentExperiment) {
                        currentExperiment.wows = getTwoWows();
                        updateExpCard();
                        addExpAiMessage(
                            "These are things students have actually said after teachers tried this. Do they feel possible?",
                            ["looks good", "different wows"]
                        );
                    }
                }
                // This is a starter idea or custom idea - create experiment
                else {
                    createExperiment(text);
                }
            }, 300);
        }
        
        function createExperiment(tryText) {
            currentExperiment = {
                id: ++experimentCount,
                tryText: tryText,
                wows: getTwoWows(),
                committed: false
            };
            
            addExpCard();
            
            setTimeout(() => {
                addExpAiMessage(
                    "Here's your experiment. The quotes are things students have said when this worked. How does it feel?",
                    ["looks good", "tell me more", "I want to try something else"]
                );
            }, 400);
        }
        
        function adjustExperiment() {
            fadePreviousExp();
            addExpAiMessage(
                "What would make this feel more doable?",
                ["make it smaller", "different wows", "start over"]
            );
        }
        
        function commitExperiment() {
            if (!currentExperiment || currentExperiment.committed) return;
            
            currentExperiment.committed = true;
            updateExpCard();
            
            // Collect this card for the panel
            collectCard(currentExperiment);
            updateCardMini();
            
            // Go to commit screen
            setPhase('commit');
        }
        
        // Input handlers for experiment screen
        document.addEventListener('DOMContentLoaded', () => {
            const expInput = document.getElementById('expInput');
            if (expInput) {
                expInput.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter' && !e.shiftKey && this.value.trim()) {
                        e.preventDefault();
                        sendExpMessage();
                    }
                });
            }
        });
        
        // ============ REVEAL SEQUENCE ============
        const revealQuotes = [
            { type: 'ouch', text: 'I had my hand raised for awhile, and the teacher almost ignored me' },
            { type: 'ouch', text: 'by the time I\'m ready to talk, we\'ve moved on' },
            { type: 'wow', text: 'when someone asked what I thought' }
        ];
        
        const revealWows = [
            'the teacher actually called on me today',
            'there was a pause and I had time to think'
        ];
        
        const revealToastStyles = ['', 'style-huge', 'style-tilt', 'style-tilt-right', 'style-whisper', 'style-spaced'];
        
        // Track vote tally for reveal
        let voteTally = [];
        let voteWinnerIndex = 0;
        
        function startRevealSequence() {
            const sequence = document.getElementById('revealSequence');
            sequence.classList.add('active');
            
            // Check if this is vote mode or teacher-decides mode
            const isVoteMode = planState.mode === 'vote-teacher-decides' || planState.mode === 'vote-decides';
            
            if (isVoteMode) {
                startVoteReveal();
            } else {
                startTeacherReveal();
            }
        }
        
        function startTeacherReveal() {
            let step = 0;
            const totalQuotes = revealQuotes.length;
            
            function showNext() {
                // Hide all
                document.getElementById('revealToast').classList.remove('active');
                document.getElementById('revealVoteResults').classList.remove('active');
                document.getElementById('revealWinner').classList.remove('active');
                document.getElementById('revealTrying').classList.remove('active');
                
                if (step < totalQuotes) {
                    // Show ouch/wow quote
                    const q = revealQuotes[step];
                    const toast = document.getElementById('revealToast');
                    const typeEl = document.getElementById('revealType');
                    const quoteEl = document.getElementById('revealQuote');
                    
                    // Random style
                    toast.className = 'reveal-toast active ' + revealToastStyles[Math.floor(Math.random() * revealToastStyles.length)];
                    typeEl.textContent = q.type + '.';
                    typeEl.className = 'reveal-type ' + q.type;
                    quoteEl.textContent = '"' + q.text + '"';
                    
                    step++;
                    setTimeout(showNext, 2500);
                    
                } else {
                    showTryingScreen();
                }
            }
            
            showNext();
        }
        
        function startVoteReveal() {
            // Build tally if not already done
            if (voteTally.length === 0 && ballotOptions.length > 0) {
                voteTally = ballotOptions.map(() => ({ first: 0, second: 0 }));
                votes.forEach(v => {
                    if (v.first !== null) voteTally[v.first].first++;
                    if (v.second !== null) voteTally[v.second].second++;
                });
                
                // Find winner
                let maxFirst = 0;
                voteTally.forEach((t, i) => {
                    if (t.first > maxFirst) {
                        maxFirst = t.first;
                        voteWinnerIndex = i;
                    }
                });
            }
            
            // Show vote results
            showVoteResultsReveal();
        }
        
        function showVoteResultsReveal() {
            // Hide other screens
            document.getElementById('revealToast').classList.remove('active');
            document.getElementById('revealWinner').classList.remove('active');
            document.getElementById('revealTrying').classList.remove('active');
            
            const resultsEl = document.getElementById('revealVoteResults');
            const barsEl = document.getElementById('revealVoteBars');
            
            // Build bars HTML
            const maxVotes = Math.max(...voteTally.map(t => t.first), 1);
            barsEl.innerHTML = ballotOptions.map((opt, i) => {
                const isWinner = i === voteWinnerIndex;
                const pct = (voteTally[i].first / maxVotes) * 100;
                return `
                    <div class="reveal-vote-bar ${isWinner ? 'winner' : ''}" data-pct="${pct}">
                        <div class="reveal-vote-bar-label">${opt.tryText}</div>
                        <div class="reveal-vote-bar-track">
                            <div class="reveal-vote-bar-fill"></div>
                        </div>
                    </div>
                `;
            }).join('');
            
            resultsEl.classList.add('active');
            
            // Animate bars after a moment
            setTimeout(() => {
                document.querySelectorAll('.reveal-vote-bar').forEach(bar => {
                    const pct = bar.dataset.pct;
                    bar.querySelector('.reveal-vote-bar-fill').style.width = pct + '%';
                });
            }, 400);
            
            // Breathe... then show winner
            setTimeout(() => {
                showWinnerReveal();
            }, 4000);
        }
        
        function showWinnerReveal() {
            document.getElementById('revealVoteResults').classList.remove('active');
            
            const winnerEl = document.getElementById('revealWinner');
            const winnerText = document.getElementById('revealWinnerText');
            
            winnerText.textContent = currentExperiment ? currentExperiment.tryText : ballotOptions[voteWinnerIndex].tryText;
            winnerEl.classList.add('active');
            
            // Breathe... then show trying screen
            setTimeout(() => {
                document.getElementById('revealWinner').classList.remove('active');
                showTryingScreen();
            }, 3500);
        }
        
        function showTryingScreen() {
            const trying = document.getElementById('revealTrying');
            const tryLabel = trying.querySelector('.reveal-trying-label');
            const tryText = document.getElementById('revealTryingText');
            const mightSection = trying.querySelector('.reveal-might-section');
            
            // Set content
            tryText.textContent = currentExperiment ? currentExperiment.tryText : 'wait 5 seconds before calling on anyone';
            
            // Populate the wows
            const wowsContainer = document.getElementById('revealWows');
            wowsContainer.innerHTML = revealWows.map(w => `<div class="reveal-wow-item">"${w}"</div>`).join('');
            
            // Reset all sections
            tryLabel.classList.remove('visible');
            tryText.classList.remove('visible');
            mightSection.classList.remove('visible');
            document.getElementById('revealClosingSection').classList.remove('visible');
            document.getElementById('revealClosingSwirl').classList.remove('pulse');
            
            // Show the container
            trying.classList.add('active');
            
            // Step 1: "we're trying" label
            setTimeout(() => {
                tryLabel.classList.add('visible');
            }, 100);
            
            // Step 2: The experiment text
            setTimeout(() => {
                tryText.classList.add('visible');
            }, 400);
            
            // Step 3: "we might hear" section
            setTimeout(() => {
                mightSection.classList.add('visible');
            }, 2000);
            
            // Step 4: Closing + swirl
            setTimeout(() => {
                document.getElementById('revealClosingSection').classList.add('visible');
                document.getElementById('revealClosingSwirl').classList.add('pulse');
            }, 3500);
        }
        
        // ============ VOTE FLOW ============
        let allSuggestions = []; // Pool of all ideas
        let ballotOptions = []; // Selected for ballot
        let studentVote = { first: null, second: null };
        let votes = [];
        let myStudentSuggestions = []; // Track what this student submitted
        
        // AI-generated "we might notice" options
        const wowOptions = [
            "there was time to think",
            "I got called on",
            "less scary to share",
            "I knew what I wanted to say",
            "everyone had to be ready",
            "I felt actually heard",
            "I had time to process",
            "someone noticed me",
            "the pace felt right",
            "I could finish my thought"
        ];
        
        // AI starter suggestions based on common patterns
        const aiSuggestions = [
            "wait 5 seconds before calling on anyone",
            "pair-share before whole class discussion",
            "ask 'who haven't we heard from?'",
            "write first, then discuss",
            "no hands up — random selection",
            "repeat back what you heard before responding"
        ];
        
        function initSuggestionsPhase() {
            allSuggestions = [];
            ballotOptions = [];
            myStudentSuggestions = [];
            
            // Add AI suggestions with random wows
            aiSuggestions.slice(0, 3).forEach((tryText, i) => {
                setTimeout(() => {
                    addSuggestion(tryText, 'ai');
                }, 500 + i * 800);
            });
            
            renderSuggestionsPool();
        }
        
        function addSuggestion(tryText, source) {
            const wow = wowOptions[Math.floor(Math.random() * wowOptions.length)];
            allSuggestions.push({
                id: Date.now() + Math.random(),
                tryText,
                wow,
                source // 'ai', 'teacher', 'student'
            });
            renderSuggestionsPool();
        }
        
        function renderSuggestionsPool() {
            const container = document.getElementById('suggestionsPool');
            if (!container) return;
            
            container.innerHTML = allSuggestions.map((s, i) => `
                <div class="suggestion-card ${s.source}">
                    <div class="suggestion-label">try</div>
                    <div class="suggestion-try">${s.tryText}</div>
                    <div class="suggestion-label">we might notice</div>
                    <div class="suggestion-wow">
                        <span>"${s.wow}"</span>
                        <button class="suggestion-refresh" onclick="refreshSuggestionWow(${i})">↻</button>
                    </div>
                </div>
            `).join('');
        }
        
        function refreshSuggestionWow(index) {
            const currentWow = allSuggestions[index].wow;
            let newWow = currentWow;
            while (newWow === currentWow) {
                newWow = wowOptions[Math.floor(Math.random() * wowOptions.length)];
            }
            allSuggestions[index].wow = newWow;
            renderSuggestionsPool();
        }
        
        function addTeacherSuggestion() {
            const input = document.getElementById('teacherSuggestionInput');
            const text = input.value.trim();
            if (!text) return;
            
            addSuggestion(text, 'teacher');
            input.value = '';
        }
        
        function submitStudentSuggestion() {
            const input = document.getElementById('studentSuggestInput');
            const text = input.value.trim();
            if (!text) return;
            
            // Add to local display
            myStudentSuggestions.push(text);
            renderStudentSuggestions();
            
            // In real app, send to teacher
            addSuggestion(text, 'student');
            
            input.value = '';
        }
        
        function renderStudentSuggestions() {
            const container = document.getElementById('studentSuggestIdeas');
            if (!container) return;
            
            container.innerHTML = myStudentSuggestions.map(s => `
                <div class="student-suggest-idea">${s}</div>
            `).join('');
        }
        
        function goToBallotEditor() {
            setPhase('ballot');
        }
        
        function initBallotEditor() {
            renderBallotEditor();
        }
        
        function renderBallotEditor() {
            const optionsContainer = document.getElementById('ballotOptions');
            const availableContainer = document.getElementById('ballotAvailableList');
            const countEl = document.getElementById('ballotCount');
            const openBtn = document.getElementById('ballotOpenBtn');
            
            if (!optionsContainer) return;
            
            // Ballot options (selected)
            if (ballotOptions.length === 0) {
                optionsContainer.innerHTML = '<div class="ballot-empty">drag ideas here or click + below</div>';
            } else {
                optionsContainer.innerHTML = ballotOptions.map((s, i) => `
                    <div class="ballot-option">
                        <div class="ballot-option-try">${s.tryText}</div>
                        <div class="ballot-option-wow">
                            <span>"${s.wow}"</span>
                            <button class="suggestion-refresh" onclick="refreshBallotWow(${i})">↻</button>
                        </div>
                        <button class="ballot-option-remove" onclick="removeFromBallot(${i})">×</button>
                    </div>
                `).join('');
            }
            
            // Available ideas (not on ballot)
            const available = allSuggestions.filter(s => !ballotOptions.find(b => b.id === s.id));
            if (available.length === 0) {
                availableContainer.innerHTML = '<div class="ballot-empty">all ideas are on the ballot</div>';
            } else {
                availableContainer.innerHTML = available.map((s, i) => `
                    <div class="ballot-available-item" onclick="addToBallot('${s.id}')">
                        <span class="ballot-available-text">${s.tryText}</span>
                        <button class="ballot-available-add">+</button>
                    </div>
                `).join('');
            }
            
            countEl.textContent = ballotOptions.length;
            openBtn.disabled = ballotOptions.length < 3;
        }
        
        function addToBallot(id) {
            if (ballotOptions.length >= 5) return;
            const suggestion = allSuggestions.find(s => s.id == id);
            if (suggestion && !ballotOptions.find(b => b.id === suggestion.id)) {
                ballotOptions.push({ ...suggestion });
                renderBallotEditor();
            }
        }
        
        function removeFromBallot(index) {
            ballotOptions.splice(index, 1);
            renderBallotEditor();
        }
        
        function refreshBallotWow(index) {
            const currentWow = ballotOptions[index].wow;
            let newWow = currentWow;
            while (newWow === currentWow) {
                newWow = wowOptions[Math.floor(Math.random() * wowOptions.length)];
            }
            ballotOptions[index].wow = newWow;
            renderBallotEditor();
        }
        
        let voteTimerInterval = null;
        let voteTimeRemaining = 30; // 30 seconds
        const VOTE_DURATION = 30;
        const WARNING_TIME = 15;
        
        function openVoting() {
            if (ballotOptions.length < 3) return;
            
            // Reset votes
            votes = [];
            voteTimeRemaining = VOTE_DURATION;
            
            // Teacher goes to monitor screen
            setPhase('voteMonitor');
            
            // Render vote options for students
            renderVoteOptions();
            
            // Start vote timer
            startVoteTimer();
            
            // Simulate votes coming in
            simulateVotes();
        }
        
        function startVoteTimer() {
            updateVoteTimerDisplay();
            
            voteTimerInterval = setInterval(() => {
                voteTimeRemaining--;
                updateVoteTimerDisplay();
                
                if (voteTimeRemaining <= 0) {
                    clearInterval(voteTimerInterval);
                    closeVoting();
                }
            }, 1000);
        }
        
        function updateVoteTimerDisplay() {
            const pct = (voteTimeRemaining / VOTE_DURATION) * 100;
            const isWarning = voteTimeRemaining <= WARNING_TIME;
            const mins = Math.floor(voteTimeRemaining / 60);
            const secs = voteTimeRemaining % 60;
            const timeText = `${mins}:${secs.toString().padStart(2, '0')}`;
            
            // Teacher display
            const teacherFill = document.getElementById('voteTimerFill');
            const teacherText = document.getElementById('voteTimerText');
            if (teacherFill) {
                teacherFill.style.width = pct + '%';
                teacherFill.classList.toggle('warning', isWarning);
            }
            if (teacherText) {
                teacherText.textContent = timeText;
                teacherText.classList.toggle('warning', isWarning);
            }
            
            // Student display
            const studentFill = document.getElementById('studentVoteTimerFill');
            const studentText = document.getElementById('studentVoteTimerText');
            if (studentFill) {
                studentFill.style.width = pct + '%';
                studentFill.classList.toggle('warning', isWarning);
            }
            if (studentText) {
                studentText.textContent = timeText;
                studentText.classList.toggle('warning', isWarning);
            }
        }
        
        function simulateVotes() {
            let count = 0;
            const total = 12;
            document.getElementById('voterTotal').textContent = total;
            
            const interval = setInterval(() => {
                if (state.phase !== 'voteMonitor') {
                    clearInterval(interval);
                    return;
                }
                
                count++;
                document.getElementById('voteCount').textContent = count;
                
                // Simulate a vote
                const first = Math.floor(Math.random() * ballotOptions.length);
                let second = Math.floor(Math.random() * ballotOptions.length);
                while (second === first) {
                    second = Math.floor(Math.random() * ballotOptions.length);
                }
                votes.push({ first, second });
                
                // Auto-close when everyone has voted
                if (count >= total) {
                    clearInterval(interval);
                    clearInterval(voteTimerInterval);
                    setTimeout(() => {
                        closeVoting();
                    }, 500);
                }
            }, 800);
        }
        
        function renderVoteOptions() {
            const container = document.getElementById('voteOptions');
            
            container.innerHTML = ballotOptions.map((opt, i) => `
                <div class="vote-option" data-index="${i}" onclick="selectVoteOption(${i})">
                    <div class="vote-option-rank">1st</div>
                    <div class="vote-option-try">${opt.tryText}</div>
                    <div class="vote-option-wow">"${opt.wow}"</div>
                </div>
            `).join('');
            
            studentVote = { first: null, second: null };
            updateVoteButton();
        }
        
        function selectVoteOption(index) {
            const options = document.querySelectorAll('.vote-option');
            
            // If clicking on already selected first, deselect
            if (studentVote.first === index) {
                studentVote.first = studentVote.second;
                studentVote.second = null;
            }
            // If clicking on already selected second, deselect
            else if (studentVote.second === index) {
                studentVote.second = null;
            }
            // If no first, set first
            else if (studentVote.first === null) {
                studentVote.first = index;
            }
            // If no second, set second
            else if (studentVote.second === null) {
                studentVote.second = index;
            }
            // Both set, replace second
            else {
                studentVote.second = index;
            }
            
            // Update UI
            options.forEach((opt, i) => {
                opt.classList.remove('first', 'second');
                const rankEl = opt.querySelector('.vote-option-rank');
                if (i === studentVote.first) {
                    opt.classList.add('first');
                    rankEl.textContent = '1st';
                } else if (i === studentVote.second) {
                    opt.classList.add('second');
                    rankEl.textContent = '2nd';
                }
            });
            
            updateVoteButton();
        }
        
        function updateVoteButton() {
            const btn = document.getElementById('voteSubmitBtn');
            if (studentVote.first !== null && studentVote.second !== null) {
                btn.classList.add('ready');
            } else {
                btn.classList.remove('ready');
            }
        }
        
        function submitVote() {
            if (studentVote.first === null || studentVote.second === null) return;
            
            votes.push({ ...studentVote });
            
            // Go to waiting screen
            setPhase('voteWaiting');
        }
        
        function submitSuggestion() {
            const input = document.getElementById('voteSuggestInput');
            const text = input.value.trim();
            if (!text) return;
            
            // In real app, this would send to teacher
            addStudentSuggestion(text);
            input.value = '';
        }
        
        function closeVoting() {
            // Tally votes (simple: count 1st choices, use 2nd as tiebreaker)
            const tally = ballotOptions.map(() => ({ first: 0, second: 0 }));
            votes.forEach(v => {
                if (v.first !== null) tally[v.first].first++;
                if (v.second !== null) tally[v.second].second++;
            });
            
            // Find winner
            let winnerIndex = 0;
            let maxFirst = 0;
            tally.forEach((t, i) => {
                if (t.first > maxFirst || (t.first === maxFirst && t.second > tally[winnerIndex].second)) {
                    maxFirst = t.first;
                    winnerIndex = i;
                }
            });
            
            // Check mode: does teacher decide or does vote decide?
            if (planState.mode === 'vote-teacher-decides') {
                // Teacher sees results and can choose
                showVoteResults(tally, winnerIndex);
            } else {
                // Vote decides - winner becomes experiment
                commitVoteWinner(winnerIndex);
            }
        }
        
        function showVoteResults(tally, suggestedWinnerIndex) {
            // Show teacher a results screen where they can confirm or override
            const resultsHtml = ballotOptions.map((opt, i) => {
                const t = tally[i];
                const isWinner = i === suggestedWinnerIndex;
                return `
                    <div class="vote-result-option ${isWinner ? 'winner' : ''}" onclick="selectVoteWinner(${i})">
                        <div class="vote-result-bar" style="width: ${(t.first / votes.length) * 100}%"></div>
                        <div class="vote-result-content">
                            <div class="vote-result-try">${opt.tryText}</div>
                            <div class="vote-result-count">${t.first} first · ${t.second} second</div>
                        </div>
                        ${isWinner ? '<div class="vote-result-badge">top vote</div>' : ''}
                    </div>
                `;
            }).join('');
            
            document.getElementById('voteResultsOptions').innerHTML = resultsHtml;
            selectedVoteWinner = suggestedWinnerIndex;
            setPhase('voteResults');
        }
        
        let selectedVoteWinner = 0;
        
        function selectVoteWinner(index) {
            selectedVoteWinner = index;
            document.querySelectorAll('.vote-result-option').forEach((el, i) => {
                el.classList.toggle('selected', i === index);
            });
        }
        
        function confirmVoteWinner() {
            commitVoteWinner(selectedVoteWinner);
        }
        
        function commitVoteWinner(winnerIndex) {
            const winner = ballotOptions[winnerIndex];
            
            // Set as current experiment
            currentExperiment = {
                id: Date.now(),
                tryText: winner.tryText,
                wows: [winner.wow],
                committed: true
            };
            
            // Update reveal wows
            revealWows.length = 0;
            revealWows.push(winner.wow);
            
            // Start reveal sequence
            startRevealSequence();
        }
        
        // ============ COMMIT SCREEN ============
        const quotesByPattern = {
            unheard: [
                "I had my hand raised for awhile, and the teacher almost ignored me",
                "by the time I'm ready to talk, we've moved on",
                "I wanted to say something but didn't get the chance",
                "sometimes I feel invisible in class",
                "the same people always get called on"
            ],
            rushed: [
                "we didn't get enough time to finish",
                "I wasn't given enough time for the test",
                "everything feels so fast",
                "no time to work on Mondays",
                "the class gets taken up and leaves me no time"
            ],
            lost: [
                "I didn't know what to work on",
                "felt lost when you weren't here",
                "having trouble finding a project",
                "I don't understand what we're supposed to do",
                "the instructions weren't clear"
            ]
        };
        
        const allWowQuotes = [
            "the teacher actually called on me today",
            "there was a pause and I had time to think",
            "I got to finish what I was saying",
            "someone asked me a follow-up question",
            "I didn't have to fight to get a word in",
            "it felt like people were actually listening",
            "the teacher noticed I had my hand up",
            "I finally understood what we were doing"
        ];
        
        let commitPattern = 'unheard';
        let commitQuotes = [];
        let commitWows = [];
        let hasRefreshedCommitQuote = false;
        
        function initCommitScreen() {
            // Set the try text from current experiment
            if (currentExperiment) {
                document.getElementById('commitTryText').textContent = currentExperiment.tryText;
                commitWows = currentExperiment.wows ? [...currentExperiment.wows] : allWowQuotes.slice(0, 2);
            } else {
                commitWows = allWowQuotes.slice(0, 2);
            }
            
            // Initialize quotes
            commitQuotes = quotesByPattern[commitPattern].slice(0, 2);
            hasRefreshedCommitQuote = false;
            document.getElementById('commitPatternPills').classList.remove('visible');
            
            renderCommitQuotes();
            renderCommitWows();
            
            // Reset committed state
            document.getElementById('commitCard').classList.remove('committed');
            document.getElementById('commitSwirlBtn').classList.remove('committed');
            document.getElementById('commitClosing').classList.remove('visible');
            document.getElementById('commitFooter').classList.remove('hidden');
        }
        
        function selectCommitPattern(pattern) {
            commitPattern = pattern;
            document.querySelectorAll('.commit-pattern-pill').forEach(pill => {
                pill.classList.toggle('active', pill.textContent === pattern);
            });
            const quotes = quotesByPattern[pattern];
            commitQuotes = quotes.slice(0, commitQuotes.length);
            renderCommitQuotes();
        }
        
        function renderCommitQuotes() {
            const container = document.getElementById('commitQuotes');
            const addBtn = document.getElementById('addQuoteBtn');
            const quotes = quotesByPattern[commitPattern];
            
            // Show add button if we can add more
            if (commitQuotes.length < 4 && commitQuotes.length < quotes.length) {
                addBtn.classList.add('visible');
            } else {
                addBtn.classList.remove('visible');
            }
            
            const showRemove = commitQuotes.length > 1;
            container.innerHTML = commitQuotes.map((quote, i) => `
                <div class="commit-quote-row">
                    <div class="commit-quote-text">"${quote}"</div>
                    <button class="commit-quote-btn" onclick="refreshCommitQuote(${i})" title="different quote">↻</button>
                    ${showRemove ? `<button class="commit-quote-btn remove" onclick="removeCommitQuote(${i})" title="remove">×</button>` : ''}
                </div>
            `).join('');
        }
        
        function refreshCommitQuote(index) {
            if (!hasRefreshedCommitQuote) {
                hasRefreshedCommitQuote = true;
                document.getElementById('commitPatternPills').classList.add('visible');
            }
            const quotes = quotesByPattern[commitPattern];
            const available = quotes.filter(q => !commitQuotes.includes(q));
            if (available.length === 0) return;
            commitQuotes[index] = available[Math.floor(Math.random() * available.length)];
            renderCommitQuotes();
        }
        
        function removeCommitQuote(index) {
            if (commitQuotes.length <= 1) return;
            commitQuotes.splice(index, 1);
            renderCommitQuotes();
        }
        
        function addCommitQuote() {
            const quotes = quotesByPattern[commitPattern];
            const available = quotes.filter(q => !commitQuotes.includes(q));
            if (available.length === 0) return;
            commitQuotes.push(available[Math.floor(Math.random() * available.length)]);
            renderCommitQuotes();
        }
        
        function renderCommitWows() {
            const container = document.getElementById('commitWows');
            const addBtn = document.getElementById('addWowBtn');
            
            // Show add button if we can add more
            addBtn.classList.toggle('visible', commitWows.length < 4);
            
            container.innerHTML = commitWows.map((wow, i) => `
                <div class="commit-wow-row">
                    <div class="commit-wow-text">"${wow}"</div>
                    <button class="commit-wow-btn" onclick="refreshCommitWow(${i})" title="different wow">↻</button>
                    <button class="commit-wow-btn remove" onclick="removeCommitWow(${i})" title="remove">×</button>
                </div>
            `).join('');
        }
        
        function refreshCommitWow(index) {
            const available = allWowQuotes.filter(q => !commitWows.includes(q));
            if (available.length === 0) return;
            commitWows[index] = available[Math.floor(Math.random() * available.length)];
            renderCommitWows();
        }
        
        function removeCommitWow(index) {
            if (commitWows.length <= 1) return;
            commitWows.splice(index, 1);
            renderCommitWows();
        }
        
        function addCommitWow() {
            const available = allWowQuotes.filter(q => !commitWows.includes(q));
            if (available.length === 0) return;
            commitWows.push(available[Math.floor(Math.random() * available.length)]);
            renderCommitWows();
        }
        
        function lockInCommit() {
            const card = document.getElementById('commitCard');
            const btn = document.getElementById('commitSwirlBtn');
            const footer = document.getElementById('commitFooter');
            const closing = document.getElementById('commitClosing');
            
            card.classList.add('committed');
            btn.classList.add('committed');
            footer.classList.add('hidden');
            
            // Hide all edit buttons
            document.querySelectorAll('.commit-quote-btn, .commit-wow-btn, .commit-add-btn').forEach(el => {
                el.style.opacity = '0';
                el.style.pointerEvents = 'none';
            });
            document.getElementById('commitPatternPills').style.opacity = '0';
            
            // Start reveal sequence after brief pause
            setTimeout(() => {
                startRevealSequence();
            }, 800);
        }
        
        // ============ STUDENT END FLOW ============
        function startStudentPatternsAnimation() {
            // Hide thank you
            document.getElementById('studentEndThankyou').style.display = 'none';
            
            const screen = document.getElementById('studentDotsScreen');
            screen.classList.add('visible');
            screen.innerHTML = '';
            
            // Build dot data from categories (same as teacher)
            let allDots = [];
            patternCategories.forEach(cat => {
                for (let i = 0; i < cat.dots.ouch; i++) {
                    allDots.push({ category: cat.id, type: 'ouch' });
                }
                for (let i = 0; i < cat.dots.wow; i++) {
                    allDots.push({ category: cat.id, type: 'wow' });
                }
            });
            
            // Shuffle
            const shuffled = [...allDots].sort(() => Math.random() - 0.5);
            
            // Create dots scattered
            shuffled.forEach((d, i) => {
                const dot = document.createElement('div');
                dot.className = 'swirl-dot';
                dot.style.left = (15 + Math.random() * 70) + '%';
                dot.style.top = (15 + Math.random() * 70) + '%';
                dot.dataset.category = d.category;
                dot.dataset.type = d.type;
                screen.appendChild(dot);
                d.el = dot;
            });
            
            // Phase 1: Dots appear
            let delay = 0;
            const n = shuffled.length;
            shuffled.forEach((d, i) => {
                let gap = i < n * 0.2 ? 120 : (i < n * 0.7 ? 50 : 100);
                setTimeout(() => d.el.classList.add('visible'), delay);
                delay += gap;
            });
            
            // Phase 2: Resolve colors
            const resolveStart = delay + 400;
            const batchSize = Math.ceil(n / 4);
            
            for (let batch = 0; batch < 4; batch++) {
                const batchDelay = resolveStart + batch * 400;
                const start = batch * batchSize;
                const end = Math.min(start + batchSize, n);
                
                setTimeout(() => {
                    for (let i = start; i < end; i++) {
                        if (shuffled[i] && shuffled[i].el) {
                            shuffled[i].el.classList.add('bulge');
                        }
                    }
                }, batchDelay);
                
                setTimeout(() => {
                    for (let i = start; i < end; i++) {
                        if (shuffled[i] && shuffled[i].el) {
                            shuffled[i].el.classList.remove('bulge');
                            shuffled[i].el.classList.add('resolved', shuffled[i].type);
                        }
                    }
                }, batchDelay + 250);
            }
            
            // Phase 3: Shrink and gather left
            const shrinkStart = resolveStart + 4 * 400 + 300;
            setTimeout(() => {
                shuffled.forEach((d, i) => {
                    if (d.el) {
                        d.el.classList.add('shrinking');
                        d.el.style.left = '50px';
                        d.el.style.top = (80 + (i % 15) * 22) + 'px';
                    }
                });
            }, shrinkStart);
            
            // Phase 4: Show student patterns and fly dots
            const flyStart = shrinkStart + 700;
            setTimeout(() => {
                screen.classList.add('transparent');
                document.getElementById('studentPatternsScreen').style.display = 'block';
                renderStudentCategoriesEmpty();
                
                // Start flying dots to categories
                setTimeout(() => {
                    flyStudentDotsToCategories(shuffled, 0);
                }, 200);
            }, flyStart);
        }
        
        function renderStudentCategoriesEmpty() {
            const container = document.getElementById('studentPatternsTable');
            
            // Sort by total dots (loudest first)
            const sorted = [...patternCategories].sort((a, b) => 
                (b.dots.ouch + b.dots.wow) - (a.dots.ouch + a.dots.wow)
            );
            
            container.innerHTML = sorted.map(cat => {
                // Build target dots (hidden initially)
                const dots = [];
                for (let i = 0; i < cat.dots.ouch; i++) dots.push({ type: 'ouch' });
                for (let i = 0; i < cat.dots.wow; i++) dots.push({ type: 'wow' });
                
                return `
                    <div class="category-box" id="student-cat-${cat.id}" data-id="${cat.id}">
                        <div class="category-header" onclick="toggleStudentCategory('${cat.id}')">
                            <div class="category-dots" id="student-dots-${cat.id}">
                                ${dots.map((d, i) => `<span class="cat-dot ${d.type}" data-index="${i}"></span>`).join('')}
                            </div>
                            <div class="category-label" id="student-label-${cat.id}">${cat.label}</div>
                        </div>
                        <div class="quotes-container">
                            <div class="quotes-inner" id="student-quotes-${cat.id}">
                                ${cat.quotes.map(q => `<div class="quote-row ${q.type}-quote"><span class="quote-text">"${q.text}"</span></div>`).join('')}
                            </div>
                        </div>
                    </div>
                `;
            }).join('');
        }
        
        function flyStudentDotsToCategories(allShuffled, catIndex) {
            const sorted = [...patternCategories].sort((a, b) => 
                (b.dots.ouch + b.dots.wow) - (a.dots.ouch + a.dots.wow)
            );
            
            if (catIndex >= sorted.length) {
                // All done - clean up
                setTimeout(() => {
                    const screen = document.getElementById('studentDotsScreen');
                    screen.innerHTML = '';
                    screen.classList.remove('visible', 'transparent');
                }, 300);
                return;
            }
            
            const cat = sorted[catIndex];
            const box = document.getElementById('student-cat-' + cat.id);
            const targetDots = document.querySelectorAll(`#student-dots-${cat.id} .cat-dot`);
            const label = document.getElementById('student-label-' + cat.id);
            const dotsContainer = document.getElementById('student-dots-' + cat.id);
            
            // Show box (faded in)
            box.classList.add('visible');
            
            // Get position of target
            const containerRect = dotsContainer.getBoundingClientRect();
            
            // Get dots for this category
            const catDots = allShuffled.filter(d => d.category === cat.id);
            
            // Fly each dot over
            catDots.forEach((d, i) => {
                setTimeout(() => {
                    if (d.el) {
                        d.el.classList.add('flying');
                        const targetX = containerRect.left + containerRect.width - 15 - (catDots.length - 1 - i) * 15;
                        const targetY = containerRect.top + containerRect.height / 2 - 5;
                        d.el.style.left = targetX + 'px';
                        d.el.style.top = targetY + 'px';
                        
                        // Hide flying, show target
                        setTimeout(() => {
                            d.el.style.opacity = '0';
                            if (targetDots[i]) targetDots[i].classList.add('visible');
                        }, 350);
                    }
                }, i * 60);
            });
            
            // Fade in label
            setTimeout(() => {
                label.classList.add('visible');
            }, catDots.length * 60 + 300);
            
            // Next category
            setTimeout(() => {
                flyStudentDotsToCategories(allShuffled, catIndex + 1);
            }, catDots.length * 60 + 500);
        }
        
        function toggleStudentCategory(catId) {
            const box = document.getElementById('student-cat-' + catId);
            const wasExpanded = box.classList.contains('expanded');
            
            // Collapse all
            document.querySelectorAll('#studentPatternsTable .category-box').forEach(b => b.classList.remove('expanded'));
            
            if (!wasExpanded) {
                box.classList.add('expanded');
            }
        }
        
        // Called when teacher locks in their commitment
        function showStudentCommit() {
            // Hide waiting message
            document.getElementById('studentWaiting').classList.add('hidden');
            
            // Navigate students to commit screen (they see teacher's locked card)
            setPhase('commit');
        }
        
        // ============ SESSION HEADER ============
        function copySessionCode() {
            const code = document.getElementById('sessionCode').textContent;
            navigator.clipboard.writeText('ouchlab.co/' + code);
            const box = document.querySelector('.session-box');
            box.classList.add('copied');
            setTimeout(() => box.classList.remove('copied'), 2000);
        }
        
        function goBack() {
            // Navigate back based on current phase
            if (state.phase === 'experiment') {
                setPhase('patterns');
            } else if (state.phase === 'patterns') {
                setPhase('collect');
            }
        }
        
        function bumpStat(id) {
            const el = document.getElementById(id);
            el.classList.add('bump');
            setTimeout(() => el.classList.remove('bump'), 250);
        }
        
        // ============ TIMER ============
        function startTimer() {
            state.timerInterval = setInterval(() => {
                state.timerSeconds--;
                if (state.timerSeconds <= 0) {
                    clearInterval(state.timerInterval);
                    state.timerSeconds = 0;
                    // Auto-end session when timer hits zero (if experiment is on)
                    if (state.phase === 'collect' && experiments.timerAutoEnd) {
                        endSessionNow();
                    }
                }
                
                const mins = Math.floor(state.timerSeconds / 60);
                const secs = state.timerSeconds % 60;
                document.getElementById('timerDisplay').textContent = 
                    mins + ':' + secs.toString().padStart(2, '0');
                
                const progress = (state.timerSeconds / 600) * 100;
                document.getElementById('timerPie').style.setProperty('--progress', progress + '%');
            }, 1000);
        }
        
        // ============ SIMULATE ACTIVITY ============
        function simulateActivity() {
            // Simulate students connecting
            let connected = 12;
            let typing = 3;
            let signals = 8;
            
            setInterval(() => {
                if (state.phase !== 'collect') return;
                
                // Randomly update typing count
                const oldTyping = typing;
                typing = Math.max(0, Math.min(connected, typing + Math.floor(Math.random() * 3) - 1));
                document.getElementById('typingCount').textContent = typing;
                document.getElementById('typingDots').classList.toggle('active', typing > 0);
                
                // Log typing changes
                if (typing > oldTyping && typeof logDebugEvent === 'function') {
                    logDebugEvent('○', 'typing', `${typing} writing`, { count: typing });
                }
                
                // Track typing for wind down reset
                if (typing > 0) {
                    onStudentTyping();
                }
                
                // Occasionally add a signal
                if (Math.random() > 0.7 && signals < 30) {
                    signals++;
                    document.getElementById('signalCount').textContent = signals;
                    bumpStat('signalCount');
                    
                    // Actually add to session.signals with logging
                    const type = Math.random() > 0.5 ? 'ouch' : 'wow';
                    if (typeof session !== 'undefined' && session.signals) {
                        session.signals.push({
                            id: Date.now() + Math.random(),
                            type: type,
                            timestamp: Date.now()
                        });
                    }
                    if (typeof logDebugEvent === 'function') {
                        logDebugEvent('←', 'newSignal', type, { type, from: 'sim' });
                    }
                }
            }, 2000);
        }
        
        // ============ DISPLAY MODE ============
        function showDisplay() {
            document.getElementById('displayMode').classList.add('active');
        }
        
        function closeDisplay() {
            document.getElementById('displayMode').classList.remove('active');
        }
        
        // ============ PLAN FLOW DATA ============
        const whoData = {
            classrooms: {
                name: 'Classrooms',
                icon: '<rect x="3" y="4" width="18" height="12" rx="2"/><circle cx="8" cy="20" r="2"/><circle cx="16" cy="20" r="2"/><line x1="12" y1="10" x2="12" y2="7"/><line x1="10" y1="10" x2="14" y2="10"/>',
                status: 'ready',
                contracts: [
                    {
                        symbol: '<circle cx="12" cy="12" r="8"/>',
                        name: 'Teacher decides',
                        desc: 'Students share. Teacher sees patterns, picks what to try.',
                        action: '→ I act on what I learn',
                        mode: 'teacher-decides',
                        status: 'tested'
                    },
                    {
                        symbol: '<circle cx="12" cy="7" r="4"/><circle cx="6" cy="17" r="3"/><circle cx="18" cy="17" r="3"/>',
                        name: 'We vote, teacher decides',
                        desc: 'Everyone sees and votes. Teacher makes the call.',
                        action: '→ Your voice shapes my choice',
                        mode: 'vote-teacher-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<circle cx="6" cy="12" r="4"/><circle cx="18" cy="12" r="4"/><rect x="10" y="10" width="4" height="4" rx="1"/>',
                        name: 'We decide together',
                        desc: 'Everyone sees, everyone votes, the vote decides.',
                        action: '→ We own this together',
                        mode: 'vote-decides',
                        status: 'wired'
                    }
                ]
            },
            teams: {
                name: 'Teams',
                icon: '<circle cx="12" cy="7" r="4"/><circle cx="5" cy="17" r="3"/><circle cx="19" cy="17" r="3"/><circle cx="12" cy="20" r="3"/>',
                status: 'ready',
                contracts: [
                    {
                        symbol: '<circle cx="6" cy="12" r="4"/><circle cx="18" cy="12" r="4"/><rect x="10" y="10" width="4" height="4" rx="1"/>',
                        name: 'We see, we act together',
                        desc: 'Everyone sees patterns. We decide as a group.',
                        action: '→ Collective commitment',
                        mode: 'vote-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<circle cx="12" cy="7" r="5"/><circle cx="6" cy="17" r="3"/><circle cx="12" cy="17" r="3"/><circle cx="18" cy="17" r="3"/>',
                        name: 'We see, one person acts',
                        desc: 'Everyone sees. One person is accountable to respond.',
                        action: '→ Voice + accountability',
                        mode: 'vote-teacher-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="18" r="3"/>',
                        name: 'Each sees own, each acts',
                        desc: 'Each sees their patterns. Each takes their own action.',
                        action: '→ Parallel experiments',
                        mode: 'each-own',
                        status: 'stub'
                    }
                ]
            },
            leaders: {
                name: 'Leaders',
                icon: '<circle cx="12" cy="6" r="4"/><path d="M12 10 L12 14"/><path d="M6 20 L12 14 L18 20"/>',
                status: 'ready',
                contracts: [
                    {
                        symbol: '<circle cx="12" cy="8" r="6"/><path d="M8 18 h8"/>',
                        name: 'I asked, I act',
                        desc: 'Team shares. I see patterns. I commit to action.',
                        action: '→ I tell you what I\'m changing',
                        mode: 'teacher-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<circle cx="12" cy="6" r="4"/><circle cx="7" cy="16" r="3"/><circle cx="17" cy="16" r="3"/>',
                        name: 'We see together, I act',
                        desc: 'Patterns visible to all. I still own the response.',
                        action: '→ Transparency + accountability',
                        mode: 'vote-teacher-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<circle cx="12" cy="7" r="4"/><circle cx="6" cy="17" r="3"/><circle cx="12" cy="17" r="3"/><circle cx="18" cy="17" r="3"/>',
                        name: 'We see, we solve together',
                        desc: 'Patterns shared. Team co-owns finding solutions.',
                        action: '→ Shared problem-solving',
                        mode: 'vote-decides',
                        status: 'wired'
                    }
                ]
            },
            couples: {
                name: 'Couples',
                icon: '<circle cx="8" cy="10" r="4"/><circle cx="16" cy="10" r="4"/><path d="M8 14 Q12 20 16 14"/>',
                status: 'coming',
                contracts: [
                    {
                        symbol: '<circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5"/>',
                        name: 'We see, we act together',
                        desc: 'Both see everything. We decide together what to do.',
                        action: '→ Mutual commitment',
                        mode: 'vote-decides',
                        status: 'stub'
                    },
                    {
                        symbol: '<circle cx="8" cy="12" r="5"/><circle cx="16" cy="12" r="5" fill="none" stroke="currentColor" stroke-width="2"/>',
                        name: 'Each owns their own',
                        desc: 'Each sees their patterns. Each commits to their own growth.',
                        action: '→ I work on me, you work on you',
                        mode: 'each-own',
                        status: 'stub'
                    },
                    {
                        symbol: '<circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2" fill="white"/>',
                        name: 'Witness only',
                        desc: 'We share, we see. We don\'t solve yet. Just let it be true.',
                        action: '→ No fixing, just seeing',
                        mode: 'witness-only',
                        status: 'stub'
                    }
                ]
            },
            coaches: {
                name: 'Coaches',
                icon: '<circle cx="16" cy="8" r="4"/><circle cx="8" cy="16" r="4"/><path d="M13 11 L11 13" stroke-dasharray="2 2"/>',
                status: 'coming',
                contracts: [
                    {
                        symbol: '<circle cx="12" cy="12" r="6"/><path d="M12 8 L12 12 L15 14" stroke="white" stroke-width="1.5" fill="none"/>',
                        name: 'I see, I act',
                        desc: 'Client sees patterns. Client commits. Coach witnesses.',
                        action: '→ My insight, my commitment',
                        mode: 'teacher-decides',
                        status: 'stub'
                    },
                    {
                        symbol: '<circle cx="8" cy="12" r="4"/><circle cx="16" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 10 L12 14"/>',
                        name: 'We see, I act',
                        desc: 'Both see patterns. Coach reflects. Client owns the action.',
                        action: '→ Guided self-discovery',
                        mode: 'vote-teacher-decides',
                        status: 'stub'
                    },
                    {
                        symbol: '<circle cx="12" cy="12" r="6" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="2"/>',
                        name: 'Just surface',
                        desc: 'Get it out. See it. No action yet — just awareness.',
                        action: '→ Clarity before commitment',
                        mode: 'witness-only',
                        status: 'stub'
                    }
                ]
            },
            cohorts: {
                name: 'Cohorts',
                icon: '<circle cx="6" cy="8" r="3"/><circle cx="12" cy="6" r="3"/><circle cx="18" cy="8" r="3"/><circle cx="8" cy="16" r="3"/><circle cx="16" cy="16" r="3"/>',
                status: 'ready',
                contracts: [
                    {
                        symbol: '<circle cx="6" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="18" cy="12" r="3"/>',
                        name: 'Each sees own, share themes',
                        desc: 'Each sees their patterns. Group sees shared themes.',
                        action: '→ Personal + collective insight',
                        mode: 'each-own',
                        status: 'stub'
                    },
                    {
                        symbol: '<circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="8" cy="12" r="2"/><circle cx="16" cy="12" r="2"/><circle cx="12" cy="8" r="2"/>',
                        name: 'All see all',
                        desc: 'Full transparency. Everyone\'s reflections visible.',
                        action: '→ Deep peer learning',
                        mode: 'vote-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<circle cx="6" cy="10" r="3"/><circle cx="18" cy="10" r="3"/><circle cx="12" cy="16" r="4"/>',
                        name: 'Facilitator synthesizes',
                        desc: 'Facilitator sees all, surfaces themes. Group discusses.',
                        action: '→ Curated insight',
                        mode: 'teacher-decides',
                        status: 'wired'
                    }
                ]
            },
            boards: {
                name: 'Boards',
                icon: '<rect x="4" y="6" width="16" height="12" rx="2"/><circle cx="8" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="16" cy="12" r="2"/>',
                status: 'ready',
                contracts: [
                    {
                        symbol: '<rect x="6" y="8" width="12" height="8" rx="2"/><circle cx="12" cy="12" r="2" fill="white"/>',
                        name: 'Board sees, board acts',
                        desc: 'Patterns visible. Board decides next steps.',
                        action: '→ Governance in action',
                        mode: 'vote-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<rect x="6" y="10" width="12" height="6" rx="2"/><circle cx="12" cy="6" r="3"/>',
                        name: 'Board sees, exec acts',
                        desc: 'Board surfaces concerns. Exec responds.',
                        action: '→ Oversight + execution',
                        mode: 'vote-teacher-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<circle cx="12" cy="6" r="3"/><rect x="6" y="12" width="12" height="6" rx="2"/><path d="M12 9 L12 12"/>',
                        name: 'Exec asks, board responds',
                        desc: 'Executive seeks input. Board shares. Exec acts.',
                        action: '→ Seeking counsel',
                        mode: 'teacher-decides',
                        status: 'wired'
                    }
                ]
            },
            communities: {
                name: 'Communities',
                icon: '<circle cx="12" cy="12" r="8"/><circle cx="8" cy="10" r="2"/><circle cx="16" cy="10" r="2"/><circle cx="10" cy="15" r="2"/><circle cx="14" cy="15" r="2"/>',
                status: 'ready',
                contracts: [
                    {
                        symbol: '<circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="3"/>',
                        name: 'Surface only',
                        desc: 'See themes. No commitment yet — just awareness.',
                        action: '→ What\'s true for us?',
                        mode: 'witness-only',
                        status: 'stub'
                    },
                    {
                        symbol: '<circle cx="6" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="18" cy="12" r="3"/><path d="M12 6 L12 8"/>',
                        name: 'Themes inform leaders',
                        desc: 'Organizers see patterns, decide what to propose.',
                        action: '→ Voice shapes agenda',
                        mode: 'vote-teacher-decides',
                        status: 'wired'
                    },
                    {
                        symbol: '<circle cx="6" cy="8" r="2"/><circle cx="12" cy="6" r="2"/><circle cx="18" cy="8" r="2"/><circle cx="8" cy="14" r="2"/><circle cx="16" cy="14" r="2"/><circle cx="12" cy="18" r="2"/>',
                        name: 'Self-organize',
                        desc: 'Themes surface. Anyone can claim an action.',
                        action: '→ Emergent leadership',
                        mode: 'each-own',
                        status: 'stub'
                    }
                ]
            }
        };
        
        // Legacy support for mode mapping
        const modesByContext = {
            teacher: [
                {
                    id: 'teacher-decides',
                    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="6"/></svg>',
                    title: "I'll decide, with their input",
                    desc: "Students share what they notice. You see patterns and pick what to try.",
                    good: "clear accountability",
                    feel: "efficient, focused"
                },
                {
                    id: 'vote-teacher-decides',
                    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="8" width="16" height="8" rx="4"/><circle cx="16" cy="12" r="3" fill="white"/></svg>',
                    title: "We'll vote, I'll decide",
                    desc: "Everyone sees patterns and votes. You make the final call.",
                    good: "voice + clarity",
                    feel: "inclusive, guided"
                },
                {
                    id: 'vote-decides',
                    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="8" width="16" height="8" rx="4"/></svg>',
                    title: "We'll vote and decide",
                    desc: "Everyone sees patterns, votes, and that's what we try.",
                    good: "full ownership",
                    feel: "democratic, committed"
                }
            ],
            team: [
                {
                    id: 'vote-decides',
                    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="8" width="16" height="8" rx="4"/></svg>',
                    title: "We'll vote and decide",
                    desc: "Everyone sees patterns, votes, and that's what we try.",
                    good: "fully democratic",
                    feel: "equal, committed"
                },
                {
                    id: 'vote-leader-decides',
                    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="8" width="16" height="8" rx="4"/><circle cx="16" cy="12" r="3" fill="white"/></svg>',
                    title: "We'll vote, someone decides",
                    desc: "Everyone sees patterns and votes. One person makes the final call.",
                    good: "voice + accountability",
                    feel: "inclusive, clear"
                },
                {
                    id: 'rotate-decides',
                    icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>',
                    title: "Rotating person decides",
                    desc: "Take turns picking. This round, one person sees patterns and chooses.",
                    good: "shared ownership",
                    feel: "learning, distributed"
                },
                {
                    id: 'each-their-own',
                    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="7" cy="7" r="3"/><circle cx="17" cy="7" r="3"/><circle cx="7" cy="17" r="3"/><circle cx="17" cy="17" r="3"/></svg>',
                    title: "We each try our own",
                    desc: "Everyone sees patterns and picks their own experiment to try.",
                    good: "individual agency",
                    feel: "personal, parallel"
                }
            ],
            solo: [
                {
                    id: 'solo-experiment',
                    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="6"/></svg>',
                    title: "I'll run my own experiment",
                    desc: "Track your own ouches and wows. Build an experiment from patterns you notice.",
                    good: "personal growth",
                    feel: "reflective, private"
                }
            ]
        };
        
        // ============ PLAN SCREEN 1: WHO ============
        function selectWho(who, el) {
            planState.who = who;
            planState.contract = null;
            
            // Highlight selection
            document.querySelectorAll('.who-card').forEach(c => c.classList.remove('selected'));
            el.classList.add('selected');
            
            // Update chip
            const info = whoData[who];
            document.getElementById('chipWho').textContent = info.name;
            document.getElementById('chipGroupWho').style.display = 'flex';
            document.getElementById('persistentChips').classList.add('visible');
            
            // Go to screen 2 after brief delay
            setTimeout(() => {
                showContractScreen();
            }, 250);
        }
        
        function showContractScreen() {
            const info = whoData[planState.who];
            
            // Update chip in screen 2
            document.getElementById('selectedWhoIcon').innerHTML = info.icon;
            document.getElementById('selectedWhoName').textContent = info.name;
            
            // Build contracts with test status
            const container = document.getElementById('contractsContainer');
            container.innerHTML = info.contracts.map((c, i) => {
                const testStatus = getContractTestStatus(i);
                const statusIcon = statusSymbols[testStatus] || '○';
                const statusClass = testStatus;
                
                return `
                <div class="contract" onclick="selectContract(${i}, this)">
                    <div class="contract-symbol">
                        <svg viewBox="0 0 24 24" fill="currentColor">${c.symbol}</svg>
                    </div>
                    <div class="contract-body">
                        <div class="contract-header">
                            <div class="contract-name">${c.name}</div>
                            <div class="contract-test-status ${statusClass}" title="${testStatus}">${statusIcon}</div>
                        </div>
                        <div class="contract-desc">${c.desc}</div>
                        <div class="contract-action">${c.action}</div>
                    </div>
                </div>
            `}).join('');
            
            // Go to screen 2
            goToPlanScreen(2);
        }
        
        // Get overall test status for a contract (based on phase coverage)
        function getContractTestStatus(contractIndex) {
            const phases = contractIndex === 0 ? mainFlowPhases : 
                          (whoData[planState.who]?.contracts[contractIndex]?.mode || '').includes('vote') ? voteFlowPhases : mainFlowPhases;
            
            let verified = 0;
            let partial = 0;
            let total = phases.length;
            
            // Check both roles
            ['teacher', 'student'].forEach(role => {
                phases.forEach(phase => {
                    const key = `${contractIndex}-${role}-${phase}`;
                    const status = phaseTestStatus[key];
                    if (status === 'verified') verified++;
                    else if (status === 'partial') partial++;
                });
            });
            
            const totalChecks = total * 2; // both roles
            if (verified >= totalChecks * 0.8) return 'verified';
            if (verified + partial > 0) return 'partial';
            return 'untested';
        }
        
        function selectContract(index, el) {
            planState.contract = index;
            const info = whoData[planState.who];
            const contract = info.contracts[index];
            
            // Set the mode for the rest of the flow
            planState.mode = contract.mode;
            planState.context = planState.who === 'classrooms' ? 'teacher' : 'team';
            
            // Highlight selection
            document.querySelectorAll('.contract').forEach(c => c.classList.remove('selected'));
            el.classList.add('selected');
            
            // Update how chip
            document.getElementById('chipHow').textContent = contract.name;
            document.getElementById('chipGroupHow').style.display = 'flex';
            
            // Advance after brief delay
            setTimeout(() => {
                goToPlanScreen(3);
            }, 250);
        }
        
        function goBackToWho() {
            goToPlanScreen(1);
        }
        
        // Legacy function for compatibility
        function selectContext(context) {
            planState.context = context;
            
            // Highlight selection
            document.querySelectorAll('#planScreen1 .plan-btn').forEach(b => b.classList.remove('selected'));
            event.currentTarget.classList.add('selected');
            
            // Show who chip
            const labels = { teacher: 'teacher + students', team: 'team', solo: 'just me' };
            document.getElementById('chipWho').textContent = labels[context];
            document.getElementById('chipGroupWho').style.display = 'flex';
            document.getElementById('persistentChips').classList.add('visible');
            
            // Populate mode cards for screen 2
            populateModeCards(context);
            
            // Go to screen 2
            setTimeout(() => goToPlanScreen(2), 400);
        }
        
        function populateModeCards(context) {
            const modes = modesByContext[context];
            const container = document.getElementById('modeCards');
            
            container.innerHTML = modes.map(mode => `
                <div class="mode-card" onclick="selectMode('${mode.id}', this)">
                    ${mode.icon ? `<div class="mode-icon">${mode.icon}</div>` : ''}
                    <div class="mode-body">
                        <div class="mode-header">
                            <div class="mode-title">${mode.title}</div>
                            <div class="mode-check">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                                    <path d="M20 6L9 17l-5-5"/>
                                </svg>
                            </div>
                        </div>
                        <div class="mode-desc">${mode.desc}</div>
                        <div class="mode-meta">
                            <span class="mode-tag good">✓ ${mode.good}</span>
                            <span class="mode-tag feel">feels: ${mode.feel}</span>
                        </div>
                    </div>
                </div>
            `).join('');
        }
        
        // ============ PLAN SCREEN 2: HOW WILL YOU DECIDE ============
        function selectMode(modeId, el) {
            planState.mode = modeId;
            
            // Highlight selection
            document.querySelectorAll('.mode-card').forEach(c => c.classList.remove('selected'));
            el.classList.add('selected');
            
            // Enable continue button
            document.getElementById('continueBtn').classList.add('ready');
            
            // Show how chip
            const mode = modesByContext[planState.context].find(m => m.id === modeId);
            document.getElementById('chipHow').textContent = mode.title.toLowerCase();
            document.getElementById('chipGroupHow').style.display = 'flex';
        }
        
        function planSession() {
            if (!planState.mode) return;
            
            // Go to screen 3
            goToPlanScreen(3);
        }
        
        // ============ PLAN SCREEN 3: WHEN ============
        function selectTrade(btn, choice) {
            planState.when = choice;
            
            document.querySelectorAll('.trade-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            
            const details = document.getElementById('meetingDetails');
            
            if (choice === 'meeting') {
                details.classList.add('show');
            } else {
                // "Right now" - show post-selection
                details.classList.remove('show');
                showPostSelection('right now');
            }
        }
        
        function confirmMeeting() {
            const name = document.getElementById('meetingName').value || 'upcoming meeting';
            showPostSelection(name);
        }
        
        function showPostSelection(whenText) {
            // Collapse trade section
            document.getElementById('tradeSection').classList.add('collapsed');
            document.getElementById('plannedTitle').style.display = 'none';
            
            // Show when chip
            document.getElementById('chipWhen').textContent = whenText;
            document.getElementById('chipGroupWhen').style.display = 'flex';
            
            // Show post-selection
            document.getElementById('postSelection').classList.add('show');
        }
        
        function copyPlanUrl() {
            const code = document.getElementById('planSessionCode').textContent;
            navigator.clipboard.writeText('https://ouchlab.co/' + code);
            
            const btn = document.querySelector('.copy-btn');
            const text = document.getElementById('copyText');
            btn.classList.add('copied');
            text.textContent = 'copied!';
            
            setTimeout(() => {
                btn.classList.remove('copied');
                text.textContent = 'copy link';
            }, 2000);
        }
        
        function startSession() {
            // Transition to active session via waiting room if needed
            if (session.status === 'waiting') {
                setPhase('waiting');
                Store.writePhase('waiting');  // Sync to Firebase so participants follow
                updateView();
            } else {
                setPhase('collect');
                Store.writePhase('collect');  // Sync to Firebase so participants follow
            }
        }
        
        function goToPlanScreen(num) {
            document.querySelectorAll('#planScreen1, #planScreen2, #planScreen3').forEach(s => {
                s.classList.remove('active');
            });
            document.getElementById('planScreen' + num).classList.add('active');
        }
        
        // ============ INIT ============
        function init() {
            // Initialize planState defaults
            if (!planState.who) planState.who = 'classrooms';
            if (planState.contract === null) planState.contract = 0;
            if (!planState.mode) {
                const whoInfo = whoData[planState.who];
                if (whoInfo && whoInfo.contracts[0]) {
                    planState.mode = whoInfo.contracts[0].mode;
                }
            }
            
            // Start clean - no people or signals (lab controls this)
            session.status = 'waiting';
            session.people = [];
            session.signals = [];
            setPhase('waiting');
            
            showPrompts();
            updateView();
            applyContextLanguage();
            
            // Show any pending experiment escape toast
            if (pendingExpToast) {
                setTimeout(() => showToastMessage(pendingExpToast), 500);
                pendingExpToast = null;
            }
            
            // Input handlers
            document.getElementById('input').addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = Math.min(this.scrollHeight, 120) + 'px';
                hideHelp();
            });
            
            document.getElementById('input').addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    send();
                }
            });
        }
        
        init();
    </script>
    
<!-- 
╔═══════════════════════════════════════════════════════════════════════════════════════════╗
║  OUCH WOW LAB — PROTOCOL DOCUMENT                                                         ║
║  This artifact tracks the turns, not just the result.                                     ║
╚═══════════════════════════════════════════════════════════════════════════════════════════╝

═══════════════════════════════════════════════════════════════════════════════════════════════
VERSIONING SYSTEM — REQUIREMENT
═══════════════════════════════════════════════════════════════════════════════════════════════

Format: [MAJOR].[MINOR].[PATCH]-[SCOPE]

MAJOR = Breaking change or major UX shift
MINOR = New feature or significant flow change  
PATCH = Bug fix, tweak, refinement
SCOPE = What changed:
  -R  = Reflection service (student/participant experience)
  -L  = Lab tool (teacher/facilitator controls, diagnostics)
  -C  = Connect flow (plan screens, onboarding, session setup)
  -X  = Experiments system (feature flags, A/B, proposals)
  -P  = Protocol only (documentation, no functional change)

Examples:
  45.27.0-P   = Protocol added, no functional change
  45.27.1-C   = Connect screen tweak
  45.28.0-L   = New lab feature
  46.0.0-R    = Major reflection UX overhaul

RULE: Every Claude response that modifies this file MUST:
  1. Increment version appropriately
  2. Add a TURN entry documenting what changed and why
  3. Output file as: ouch-wow-[VERSION].html

═══════════════════════════════════════════════════════════════════════════════════════════════
CURRENT VERSION: owl_48_gathering
═══════════════════════════════════════════════════════════════════════════════════════════════

╔═════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                                                             ║
║   ORIENTATION — read this first, return here when lost                                      ║
║                                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════════════════════╝

THE MOUNTAIN WE'RE BUILDING
───────────────────────────────────────────────────────────────────────────────────────────────
Teachers who see their students. Students who feel heard.
Anonymous reflection that leads to immediate change, not data hoarding.

This is not about the cost of building together.
This is about the effort of the beautiful mountain we are building.

One tree at a time. Each tree matters. The forest emerges.

WHO IS BUILDING THIS
───────────────────────────────────────────────────────────────────────────────────────────────
Sam — educator, systems thinker, building iteratively with Claude.

How Sam works:
  - Thinks in systems, responds to grounded context not abstract theory
  - Direct communication, not diplomatic hedging
  - Tests by doing, course-corrects via next message
  - Prefers: concrete code changes, clear actions, no preamble

What Sam needs from Claude:
  - Understand before acting
  - Show the work in code, not explanation
  - Stay focused on the current tree
  - File ideas for later, don't implement everything at once

WHAT THIS IS
───────────────────────────────────────────────────────────────────────────────────────────────
ouch wow lab (owl) — a single HTML file that IS the product.

Two layers:
  SERVICE: What teachers/students experience
    → collect anonymous ouch (friction) and wow (delight) signals
    → see patterns emerge in real time
    → run micro-experiments to address what comes up
    → commit to small, concrete changes

  LAB: What we build in (developer/diagnostic mode)
    → point at elements, make notes, track threads
    → call Claude via API from inside the artifact
    → see threads by journey phase
    → inspect code health, version history

The journey: who → how → when → connect → reflect → patterns → try → commit

WHY THIS MATTERS
───────────────────────────────────────────────────────────────────────────────────────────────
Most feedback tools collect data that sits unused.
This one demands: what will you try differently right now?

Ethical non-possession:
  - Anonymous and ephemeral by design
  - Retention built around scheduled follow-up, not accumulation
  - The goal is reflection → action, not surveillance

Radical honesty → immediate action.

BOUNDARIES (what's in scope)
───────────────────────────────────────────────────────────────────────────────────────────────
IN:
  ✓ The teacher/student reflection flow (the service)
  ✓ The lab diagnostic tools (for building)
  ✓ API integration for parallel Claude conversations
  ✓ Phase-based thread tracking
  ✓ One file, iterating version by version

OUT (for now):
  ✗ Backend/database — this is a client-side artifact
  ✗ Multi-user sync — single browser session
  ✗ Production deployment — still in lab mode
  ✗ Features not in the current changelog

EXPECTATIONS (what good looks like)
───────────────────────────────────────────────────────────────────────────────────────────────
A good turn:
  - Implements the changelog, no more
  - Outputs working code
  - Updates version references in all places
  - Documents what changed in CHANGE LOG

A good response:
  - Starts with understanding, not assumptions
  - Shows the work in code
  - Stays concise — the code speaks

A good thread:
  - One clear observation or question
  - Tied to a specific element or phase
  - Leads to a concrete change or is filed for later

CURRENT GOALS
───────────────────────────────────────────────────────────────────────────────────────────────
1. Thread system working across journey phases
2. API calls from HTML producing useful responses
3. Orientation visible and editable (this document)
4. One tree at a time

╔═════════════════════════════════════════════════════════════════════════════════════════════╗
║                                                                                             ║
║   FOR CLAUDE — mechanics of working in this file                                            ║
║                                                                                             ║
╚═════════════════════════════════════════════════════════════════════════════════════════════╝

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ TL;DR (read these 3 lines before doing anything)                                            │
│                                                                                             │
│ 1. This is ONE HTML file. Find ALL instances before changing anything.                     │
│ 2. Output the file + turn entry. Don't explain — the code shows the work.                  │
│ 3. When stuck 3+ times on same bug: STOP, check PARENT elements, try drastic.              │
└─────────────────────────────────────────────────────────────────────────────────────────────┘

WHAT IS THIS:
  ouch wow lab (owl) — educational tool for anonymous reflection
  This HTML file IS the product. You're modifying the live artifact.

───────────────────────────────────────────────────────────────────────────────────────────────
WORKFLOW (every turn follows this)
───────────────────────────────────────────────────────────────────────────────────────────────
  1. Human gives compressed changelog → 2. You expand + implement → 3. Output file + turn entry
  
  The human tests. Next message corrects course. No back-and-forth needed.

───────────────────────────────────────────────────────────────────────────────────────────────
BEFORE YOU CHANGE ANYTHING (re-read if you're about to edit)
───────────────────────────────────────────────────────────────────────────────────────────────
  □ Did you grep/search for ALL instances? (version appears in 3+ places)
  □ Are you using existing CSS variables? (don't invent new colors)
  □ Did you check PARENT element styles? (inheritance causes invisible bugs)
  □ Will this affect: header, overlay, AND waiting room? (keep in sync)

───────────────────────────────────────────────────────────────────────────────────────────────
DO NOT (stop and re-read TL;DR if you're about to do these)
───────────────────────────────────────────────────────────────────────────────────────────────
  ✗ Ask clarifying questions on clear changes — just implement
  ✗ Explain what you did — the code shows it
  ✗ Add features not in changelog — stay focused
  ✗ Use emoji in UX — symbols only: → ✓ ✗ ● ○

───────────────────────────────────────────────────────────────────────────────────────────────
THE HUMAN (context for tone/approach)
───────────────────────────────────────────────────────────────────────────────────────────────
  - Thinks in systems, wants grounded not abstract
  - Direct communication, not diplomatic hedging
  - Tests by doing, trusts you to implement
  - Course-corrects via next changelog

───────────────────────────────────────────────────────────────────────────────────────────────
WHEN STUCK (if same feedback appears 3+ times)
───────────────────────────────────────────────────────────────────────────────────────────────
  STOP incremental fixes. Ask:
    - CSS inheritance from PARENT elements? ← most common cause
    - JavaScript overwriting styles?
    - Experiment flags affecting visibility?
    - Animation/transition side effects?
  
  TRY drastic:
    - Remove feature entirely, rebuild from scratch
    - Trace full inheritance chain (parent → child → grandchild)
    - grep for ALL references, not just obvious ones
  
  DOCUMENT the pattern in CURRENT STATE so we don't repeat.

  EXAMPLE — Version Name Bug (owl_18-27, 9 versions):
    Tried: animation timing, class toggling, localStorage
    Root cause: parent .logo had -webkit-text-fill-color: transparent → cascaded to children
    Lesson: check UP the tree, not just the element

───────────────────────────────────────────────────────────────────────────────────────────────
HOW THIS PROTOCOL LEARNS (meta)
───────────────────────────────────────────────────────────────────────────────────────────────
  When protocol fails (AI misses something obvious):
    1. Notice the pattern (what was skimmed/missed?)
    2. Add inline reminder WHERE the mistake would happen
    3. Front-load critical info (first 3 lines matter most)
    4. Repeat key rules in context, not just at top
  
  This section exists because AI skims greedily. Structure for that reality.

═══════════════════════════════════════════════════════════════════════════════════════════════
ARCHITECTURE
═══════════════════════════════════════════════════════════════════════════════════════════════

KEY OBJECTS:
  session {}     - runtime state (people, signals, phases, colorMap)
  state {}       - UI state (phase, signals, timerSeconds)
  togetherState  - multiplayer playground state

KEY FUNCTIONS:
  renderUnifiedHeader()  - updates header (people dots, timer, status)
  renderSession()        - master render, calls other render functions
  toggleLabMode()        - enters/exits lab diagnostic mode
  getPersonColor(id)     - returns consistent random color per person

KEY PATTERNS:
  - CSS custom properties for all colors (--ouch, --wow, --text, etc.)
  - nth-child(10n+N) for cycling patterns beyond 10 items
  - localStorage for cross-session persistence
  - .version-new class triggers one-time animations
  - Multiple render points for people dots: header, overlay, waiting room

PLACES TO CHECK WHEN CHANGING:
  People dots    → renderUnifiedHeader(), overlay HTML, waiting room
  Colors         → CSS :root variables, inline styles in render functions
  Version        → #versionName, #versionNameOverlay, protocol CURRENT VERSION
  Phase logic    → session.phases{}, state.phase, updateLabPhase()

═══════════════════════════════════════════════════════════════════════════════════════════════
CURRENT STATE
═══════════════════════════════════════════════════════════════════════════════════════════════

VERIFIED WORKING:
  ✓ Lab mode toggle via logo
  ✓ Version indicator animation (explodes once)
  ✓ People dot cycling colors (10n+N CSS pattern)
  
IN FLIGHT (implemented, not yet verified):
  ○ localStorage version tracking (owl_21)
  ○ Logo in overlay header (owl_21)
  ○ Random per-person colors via colorMap (owl_21)
  
KNOWN BUGS:
  ○ Local cache for complaints not clearing
  ○ Version name visibility (still fading?)

PATTERNS THAT HAVE BROKEN BEFORE:
  - nth-child without 10n+ fails after 10 people
  - version-new class needs removal after animation or it retriggers
  - Multiple render functions can get out of sync on people dots

═══════════════════════════════════════════════════════════════════════════════════════════════
DESIGN PHILOSOPHY
═══════════════════════════════════════════════════════════════════════════════════════════════

OUCH/WOW:
  - "Ouch" = friction, discomfort, something that needs attention
  - "Wow" = delight, surprise, something working well
  - The tool collects honest signal, not performance or compliance
  - Radical honesty → immediate action (not data hoarding)

ETHICAL NON-POSSESSION:
  - Retention built around scheduled follow-up, not data accumulation
  - Anonymous and ephemeral by design
  - The goal is reflection that leads to change, not surveillance

═══════════════════════════════════════════════════════════════════════════════════════════════
VERSION FORMAT
═══════════════════════════════════════════════════════════════════════════════════════════════
owl_[turn]_[name]

VERSION INDICATOR:
- Red dot explodes once per new version (requires .version-new class)
- Remove class after one turn to stop animation
- Re-add if user asks about version

═══════════════════════════════════════════════════════════════════════════════════════════════
OPEN THREADS (read this first if starting a new chat)
═══════════════════════════════════════════════════════════════════════════════════════════════

THIS TURN:
  → State-based canvas movement (here/working/still/distracted/away)
  → Visual appearance matches state (opacity, glow)
  → States shift over time — attention wanders
  → One data model: dots + circles synced

TESTING:
  → Watch circles — do behaviors feel distinct?
  → Do state transitions feel natural?
  → Does "here" still have spring-cleaning magic?

FOR LATER:
  → Connect this to thread tracking (ship the experiment)
  → Make orientation editable from lab UI
  → Parallel API threads

───────────────────────────────────────────────────────────────────────────────────────────────
Claude: Keep this tight. Move unresolved to FOR LATER. Prioritize: act or store.

═══════════════════════════════════════════════════════════════════════════════════════════════
GOOD RESPONSES
═══════════════════════════════════════════════════════════════════════════════════════════════

• owl_13: Acknowledged what exists, asked clarifying question, didn't assume

═══════════════════════════════════════════════════════════════════════════════════════════════
CHANGE LOG — scope: LAB or SERVICE
═══════════════════════════════════════════════════════════════════════════════════════════════

┌─ owl_44_deep-roots ──────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (API context quality)
│  
│  YOU SAID:
│  "these responses won't do in api calls — what can we do to improve context 
│   and clarity on what I am doing and what I put in where — as who"
│  
│  REWROTE buildThreadContext():
│  
│  OLD: Generic "you are helping iterate on ouch wow lab"
│  
│  NEW: Rich structured context:
│  ┌─────────────────────────────────────────────────────────────────────────
│  │ WHO I AM
│  │   Sam — building ouch wow lab, prefers concrete code, no hedging
│  │
│  │ WHAT THIS PROJECT IS  
│  │   Single HTML ~24k lines, CSS/JS/HTML/Protocol breakdown
│  │   Current version, recent features
│  │
│  │ WHERE I AM RIGHT NOW
│  │   Journey phase + meaning, role, lab mode status
│  │
│  │ MY NOTE
│  │   The text, element selector, context object
│  │   + Element HTML if pointing at something
│  │
│  │ WHAT I NEED FROM YOU
│  │   1. Understanding (1 sentence)
│  │   2. Specific change (selector/function/element)
│  │   3. FIND/REPLACE format for code
│  └─────────────────────────────────────────────────────────────────────────
│  
│  THIS MAKES API CALLS USEFUL:
│  Claude knows who you are, what this is, where you are, what you want.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_43_river-stones ────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (floating phase indicator)
│  
│  YOU SAID:
│  "YES — but it doesn't match the journey flow yet! :)"
│  
│  CHANGES:
│  → Floating phase indicator (bottom-left purple pill)
│  → Shows: phase name + thread count for current phase
│  → Updates when setSessionPhase() called
│  → Follows journey: connect → reflect → patterns → try → commit
│  → Click to open phase threads panel
│  
│  REMOVED:
│  → Badge-on-button approach from owl_42 (kept as secondary)
│  
│  THIS IS BETTER:
│  One indicator that travels with you, not badges scattered on buttons.
│  You always know where you are and what threads exist here.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_42_northern-lights ─────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (phase thread tracking)
│  
│  YOU SAID:
│  "this is the most important place to start a thread — let's build a thread 
│   tracker ux — just so while we're building we don't lose them — they are on 
│   each phase of the journey as we get there"
│  
│  ADDED:
│  → Phase thread indicator CSS (~180 lines)
│  → Phase thread panel HTML
│  → getThreadsForPhase(), showPhaseThreads(), updatePhaseThreadIndicators()
│  → Purple badge on start session button (connect phase)
│  
│  HOW IT WORKS:
│  1. You're on connect phase → badge shows on start button
│  2. Make a note with picker → thread gets tagged with current phase
│  3. Badge count updates
│  4. Click badge → panel shows threads for that phase only
│  5. Move to next phase → see different threads
│  
│  THIS IS FOUNDATION:
│  Next: add indicators to other phases (reflect, patterns, try, commit)
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_41_first-light ─────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (API integration)
│  
│  YOU SAID:
│  "we are moving towards api calls from the html"
│  "yes" [to: start simple, one thread at a time, prove the pattern]
│  
│  ADDED:
│  → API thread panel (CSS ~150 lines, JS ~120 lines, HTML ~25 lines)
│  → ⚡ button on each needs_claude thread
│  → openApiThread(), sendApiThread(), buildThreadContext()
│  → API key stored in sessionStorage (tab-scoped, secure)
│  → Status indicators: ready, sending, streaming, error
│  
│  HOW IT WORKS:
│  1. Make a note with picker (n)
│  2. Open notes panel, see ⚡ button
│  3. Click ⚡ → API panel opens with your note
│  4. Enter API key (once per session)
│  5. Click "send to claude"
│  6. Response appears in panel
│  7. Thread status updates to awaiting_user
│  
│  CONTEXT SENT TO CLAUDE:
│  - Version name
│  - Element/selector you pointed at
│  - Context (parent chain, region, state)
│  - Step and role
│  - Your note text
│  
│  THIS IS STEP 1:
│  Next: parallel threads, patch/merge UI, streaming responses
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_40_meteor-shower ───────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (meeting mode, first prune)
│  
│  YOU SAID:
│  "remove dream mode — it's the idea that I need space with the note taker — 
│   and a commitment to NO OTHER UX — and a quick way to get there to iterate"
│  
│  "I need to talk to you in the tool and build random things — without overblowing 
│   the system — how might we do that — imagine I want to have a meeting and take 
│   some notes in this ux"
│  
│  REMOVED (-700 lines):
│  → Dream mode CSS (~370 lines): fluid canvas, floating threads, particles
│  → Dream mode JS (~196 lines): toggleDreamMode, renderDreamThreads, etc
│  → Dream mode HTML (~35 lines): dream-space, dream-canvas, dream-quick-input
│  
│  ADDED (~100 lines):
│  → Meeting mode CSS: simple full-screen notes space
│  → Meeting mode JS: toggleMeetingMode, saveMeetingNotes, closeMeeting
│  → Meeting mode HTML: textarea, header, footer
│  
│  THE INTENT:
│  Dream mode was complex (floating threads, dragging, particles). You wanted
│  the IDEA (space + notes + focus) not the implementation. Meeting mode is
│  that idea stripped to its essence: just a textarea that saves.
│  
│  FIRST PRUNE:
│  owl_39: ~23,400 lines
│  owl_40: ~22,700 lines (-700)
│  This is the first intentional shrink since we started tracking.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_39_clean-sheets ────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (code health panel)
│  
│  YOU SAID:
│  "you told me about possible code growth concerns, how might we look into 
│   that like a doc — from the lab screen"
│  
│  CHANGES:
│  → New ◈ button in lab controls (bottom right)
│  → Code health panel shows:
│     - Total lines with trend arrow (↑15% since owl_30)
│     - Breakdown bars: CSS 48%, JS 37%, Protocol 8%, HTML 7%
│     - "Driving value" list with version tags
│     - "Likely bloat" list with line estimates
│     - "Suggest prune" button → queues note for export
│  → CSS: ~200 lines for panel styling
│  → JS: toggleCodeHealth(), suggestPrune() functions
│  
│  INTENT:
│  You can now inspect the codebase from inside the lab. The panel makes 
│  bloat visible so we know when to schedule a prune turn.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_38_tide-pools ──────────────────────────────────────────────────────────────────────────
│  SCOPE: PROTOCOL (code inventory)
│  
│  YOU SAID:
│  "as we go through versions — I want to see what is driving improvement — 
│   and where the bloat might be"
│  
│  CHANGES:
│  → New CODE INVENTORY section in protocol:
│     - Total lines: 23,103
│     - Breakdown: CSS 47%, JS 37%, HTML 6%, Protocol 9%
│     - 412 functions, ~2,100 CSS rules
│  → DRIVING VALUE list:
│     - Turn overlay, export orientation, picker workflow, dream mode, version badge
│  → LIKELY BLOAT candidates:
│     - Old reveal CSS, redundant experiment meta, you-dot styles (HTML gone, CSS remains)
│  → TRENDS tracking:
│     - owl_30 baseline: ~20,000 lines
│     - owl_38: 23,103 lines (+15% in 8 versions)
│     - ~400 lines/version average growth
│  
│  INTENT:
│  Watch this section each turn. When bloat candidates grow or value drivers 
│  shrink, that's a signal. Periodic prune turns when needed.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_37_fresh-bread ─────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (turn overlay)
│  
│  YOU SAID:
│  "please be tight about open threads... let's try starting this next turn with 
│   an updated overlay — something is wrong with what we have — just throw up a 
│   new changelog — right over the top of the current screen, telling me what I 
│   said, what you tried, what I might notice"
│  
│  CHANGES:
│  → Turn overlay on page load:
│     - Full screen dark backdrop with card
│     - Sections: "You said", "What I tried", "What you might notice"
│     - Dismiss button: "got it — show me the app"
│     - Remembers in localStorage, shows once per version
│  → Tightened OPEN THREADS format:
│     - THIS TURN (current)
│     - TESTING (verify)
│     - FOR LATER (stored bugs)
│  
│  STORED FOR LATER:
│  Journey counter bug — not addressed this turn, documented in FOR LATER
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_36_sudden-laughter ─────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (export orientation)
│  
│  YOU SAID:
│  "we need to get the full context in a hash of where the pointer clicked -- 
│   in addition to a respectful start to the question, we need to orient you"
│  
│  CHANGES:
│  → quickExport() first turn now includes:
│     - WHERE I AM: phase name, step number, role, lab mode status
│  → exportTrackerData() first turn now includes:
│     - WHERE I AM: screen, role, lab mode, people count
│  → Both exports now include rich element context per note:
│     - selector (e.g. .version-badge)
│     - parent chain (e.g. in #unifiedHeader > .logo)
│     - screen region (top/middle/bottom)
│     - element state (active, visible, disabled)
│  → Multi-turn exports include current screen name for orientation
│  
│  SAMPLE FIRST-TURN OUTPUT:
│  "Hi! I'm Sam... WHERE I AM:
│     Screen: connect (step 4)
│     Role: facilitator view
│     Lab mode: ON
│     People: 1
│   
│   WHAT I'M NOTICING:
│   1. .version-badge
│      (in: #unifiedHeader > .logo, screen: top)
│      "can we make this bold..."
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_35_lucky-guess ─────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (visual cleanup)
│  
│  YOU SAID:
│  "can we get this back to the same font as ouch wow lab but bold -- it takes the show"
│  (on version badge)
│  
│  "can we remove this -- it's meant to be me but I realized -- I'm in my mouse already"
│  (on you-dot)
│  
│  "this should be 1 -- I keep having the same issues but they aren't getting fixed -- 
│   too many issues per turn -- that's fine -- just store them in the html for later"
│  (on journey counter — STORED, not fixed this turn)
│  
│  CHANGES:
│  → Version badge CSS: font-size 14px, font-weight 700, font-family inherit
│     Now matches "ouch wow lab" text but bold
│  → Removed you-dot from waiting room (.waiting-people-area)
│  → Removed you-dot from overlay header (.header-right)
│  
│  STORED FOR LATER:
│  Journey counter issue persists — owl_33 fix didn't work. Need deeper investigation
│  of why updateJourneyExperimentBadges() isn't reflecting trackerState.threads count.
│  
│  HONESTY NOTE:
│  Three notes came in. I fixed two (clear scope). The counter is a deeper bug I've
│  attempted before without success. Storing it rather than making another incomplete fix.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_34_deep-breath ─────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (export warmth)
│  
│  YOU SAID:
│  "the copy and pasted response is not friendly or respectful to an unknown ai - 
│   despite how much respect I mean to them and to build with them"
│  
│  "please improve it when they might not have context -- but then go to a shorter 
│   message for multi turn responses"
│  
│  CHANGES:
│  → quickExport() and exportTrackerData() now check sessionStorage exportCount
│  → First turn (exportCount === 0):
│     - "Hi! I'm Sam, and I'm building ouch wow lab..."
│     - Explains the collaboration model
│     - "Looking forward to building together!"
│  → Multi-turn (exportCount > 0):
│     - "--- noticing (time) ---"
│     - Just the notes, brief format
│  → sessionStorage resets on page refresh (new session = fresh intro)
│  
│  THE SHIFT:
│  From: "== NEEDS RESPONSE ==" (clinical, demanding)
│  To: "Here's what I'm noticing:" (collaborative, inviting)
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_33_warm-stone ──────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (thread tracking)
│  
│  YOU SAID:
│  "this should be 1 -- because there is 1 discussion live (and an experiment too!)"
│  
│  "can we fix this -- we have 1 experiment right now -- we can use these counters 
│   to track conversations I open in various ux flows -- they are either in progress 
│   or resolved + shipped"
│  
│  "I can FEEEL that; wow. what a delight" (on 32 first-snow version badge)
│  
│  CHANGES:
│  → updateJourneyExperimentBadges() rewritten:
│     - "connect" step counter now shows active threads from trackerState
│     - Counts: running + needs_claude + awaiting_user
│     - Click → opens notes panel (not experiment callout)
│  → Other journey steps still show feature experiment counts
│  → Counter reflects real conversations, not just feature flags
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_32_first-snow ──────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (continuity)
│  
│  YOU SAID:
│  "we want to think about showing me every turn the changelog so I remember when 
│   I come back -- and then I'll paste the response and off we go"
│  
│  CHANGES:
│  → Last turn card at top of lab panel (chat view)
│     - Shows: version name, scope, summary of what changed
│     - Shows: "next: paste your response → off we go"
│  → CSS: gradient bg (wow→ouch), gold left border, clean typography
│  
│  THE LOOP:
│  1. You come back → open lab → see last turn card
│  2. Paste file into new chat
│  3. Claude reads OPEN THREADS (fresh context)
│  4. Claude responds with new version
│  5. New version updates last-turn-card + OPEN THREADS
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_31_morning-thunder ─────────────────────────────────────────────────────────────────────
│  SCOPE: PROTOCOL (handoff context)
│  
│  YOU SAID:
│  "we might improve the response prompt I copy and paste into chat-- it doesn't 
│   give enough context to get good prompt results on the first turn of a new chat"
│  
│  "for names... please go back to unexpected things that are WOW -- not so tied 
│   to features"
│  
│  CHANGES:
│  → OPEN THREADS restructured as living handoff:
│     - THIS TURN: what we're working on now
│     - TESTING: implemented, waiting to verify
│     - HEARD BUT NOT BUILT: needs direction or approval
│     - DIDN'T FULLY UNDERSTAND: unclear, needs clarification
│  → Added instruction for Claude to update each turn, human to edit before new chat
│  → Names now WOW-adjacent: morning-thunder (not feature-descriptive)
│  
│  NAME VOCABULARY (for future versions):
│  Alive things: morning-thunder, first-snow, wild-honey, deep-breath, warm-stone
│  Unexpected delights: found-penny, sudden-laughter, perfect-timing, lucky-guess
│  Wonder: northern-lights, tide-pools, meteor-shower, rainbow-edge
│  Comfort: fresh-bread, clean-sheets, first-coffee, long-nap
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_30_fluid-octopus ──────────────────────────────────────────────────────────────────────
│  SCOPE: LAB
│  FIX: version-new class now auto-removes after 1.6s (animation length)
│  No more retriggering on lab mode toggle
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_18_wobbly-teapot ───────────────────────────────────────────────────────────────────────
│  SCOPE: LAB
│  FIX: Version dot now requires .version-new class — only animates once
│  Protocol: Added two-layer distinction (LAB vs SERVICE)
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_30_fluid-octopus ──────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (fluid dream space)
│  
│  YOU SAID:
│  "I will mostly use the picker to interact in the dream space -- don't worry
│   about things for me to act on... somehow I want to put the lab overlay on
│   top of this -- the n functionality, and the experiment view etc"
│  
│  "make the dream space expectations -- fluid and new ui/ux concepts -- to keep
│   me fresh --- I will use notes to check in and we can move that way"
│  
│  CHANGES:
│  → Dream space z-index lowered (1500) so lab controls float above (2500+)
│  → Picker (n), notes panel, experiments all work inside dream mode
│  → Fluid canvas layout — removed rigid two-panel structure
│  → Draggable thread cards (mousedown to grab, move anywhere)
│  → Floating note bubbles with random-ish positioning
│  → Ambient floating particles (subtle dreaminess)
│  → Quick input bar at bottom center
│  → body.dream-active class for CSS targeting
│  
│  INTERACTION MODEL:
│  You explore dream → use picker to annotate → notes sync → I see next turn
│  No action items needed from you. Curiosity drives, notes capture.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_29_swift-falcon ───────────────────────────────────────────────────────────────────────
│  SCOPE: PROTOCOL + LAB (greedy skim structure)
│  
│  YOU SAID:
│  "assume with the protocol doc that the ai will be greedy and skim then
│   decide as it goes -- how might we improve the structure to guide it?"
│  
│  "how might we fix it as we go and notice when it could be better?"
│  
│  CHANGES:
│  → Restructured FOR CLAUDE section for greedy skimming:
│     - TL;DR box with 3 critical lines at very top
│     - "Before you change anything" checklist
│     - Visual hierarchy with separator lines
│     - "Do Not" section with ✗ symbols
│     - "How this protocol learns" meta-section
│  → Dream lab seeded with protocol-learning discussion
│  → Protocol panel "for claude" tab updated with skim-friendly format
│  
│  KEY INSIGHT:
│  AI skims greedily. Structure for that reality:
│     1. Front-load critical info (first 3 lines)
│     2. Use visual hierarchy (boxes, checkmarks, separators)
│     3. Repeat rules WHERE mistakes would happen
│     4. Add inline reminders, not just top-level rules
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_28_dreamy-whale ───────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (dream mode)
│  
│  YOU SAID:
│  "add a new playground / whiteboard mode -- a place where we can talk and
│   dream. that I can get to somehow fun."
│  
│  "I am going to talk about scaling we'll store our notes as we build in
│   our own little lab"
│  
│  CHANGES:
│  → Swirly portal button (✧) appears in bottom-right when lab mode active
│  → Click to enter dream mode — full screen whiteboard
│  → Left panel: conversation notes (+ thought, ✧ idea)
│  → Right panel: whiteboard with editable topic + thread cards
│  → Everything persists to localStorage
│  → "save session" syncs notes + ideas to feedbackNotes for Claude
│  
│  ENTRY POINT:
│  Lab mode → swirly ✧ button → dream space
│  
│  DATA FLOW:
│  dreamNotes[] → localStorage → feedbackNotes[] (on save)
│  dreamThreads[] → localStorage
│  dreamTopic → localStorage
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_27_wise-crow ──────────────────────────────────────────────────────────────────────────
│  SCOPE: LAB + PROTOCOL (pattern recognition)
│  
│  YOU SAID:
│  "please update the protocol to look for patterns like this to help us get
│   unstuck when we keep getting the same feedback"
│  
│  "the version is still fading out -- is that an accidental experiment feature
│   or what might that be?"
│  
│  ROOT CAUSE FOUND:
│  Parent element (.logo) had -webkit-text-fill-color: transparent for the
│  gradient effect. This CSS property CASCADES to children, making the
│  version-badge text invisible.
│  
│  CHANGES:
│  → Fixed: reset -webkit-text-fill-color: initial on .version-badge
│  → Added WHEN STUCK section to protocol:
│     - Stop incremental fixes after 3+ attempts
│     - Check parent styles, not just element styles
│     - Try something drastic (remove & rebuild)
│  → Documented this pattern for future debugging
│  
│  LESSONS:
│  - 9 versions (owl_18-27) spent on this one bug
│  - Problem wasn't animation timing or class toggling
│  - Problem was CSS inheritance from a parent element
│  - We kept looking at the element; should have looked UP
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_26_stubborn-panda ─────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (version celebration)
│  
│  YOU SAID:
│  "lets do something different for version -- the bug seems too nuanced to fix
│   so instead -- lets keep ouch wow lab as is but make a new version tool --
│   that really shows love for the cost of each version in my and your effort"
│  
│  "how many times have we tried to fix the bug with the version name -- I love
│   the names -- I want to celebrate them but we can't seem to get rid of the
│   animations gumming it up"
│  
│  CHANGES:
│  → Removed broken version-name animation CSS entirely
│  → New version-badge: "30 fluid-octopus" (clickable, gradient bg)
│  → Version history panel (modal) with:
│     - Stats: versions, prompts, code changes, lines
│     - Each version: number, name, scope, your quote, changes
│     - Visual "cost" indicator: your words + claude's code
│  → Simplified toggleLabMode (no more animation logic)
│  
│  THE BUG WE STOPPED CHASING:
│  owl_18, 19, 20, 21 all tried to fix version-name visibility/animation.
│  Instead of fixing, we're celebrating differently now.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_25_bright-otter ───────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (design space)
│  
│  YOU SAID:
│  "this is getting better-- my comments could be a much larger space-- because
│   we're doing a new doc every time we could have a really cool lab space to
│   talk in and design before slamming it home"
│  
│  "I tried to type into the protocol box but it's not wired up to feedback data"
│  
│  CHANGES:
│  → Expanded "this turn" into a full design space
│  → Much larger textarea (min 200px height, full panel width)
│  → "→ save as note" button wires to feedbackNotes system
│  → Auto-saves draft to localStorage as you type
│  → Panel now taller (calc(100vh - 120px)) to give room to think
│  
│  PURPOSE:
│  The protocol panel is now a design space. Think here, design here, then
│  "slam it home" when ready. Notes sync to the feedback system so Claude
│  sees them in the next turn.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_24_gentle-moose ───────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (protocol browser)
│  
│  YOU SAID:
│  "please update the lab ux to show the changelog -- and what I said to get that --
│   then room for this turn's comments -- just like the protocol sections we're
│   putting visually in for me to verify"
│  
│  CHANGES:
│  → Added "this turn" tab — shows current version, your words, changes
│  → Added "changelog" tab — recent turn history with your prompts
│  → Editable comments field for verification notes (saves to localStorage)
│  → Protocol panel now defaults to "this turn" tab
│  
│  PURPOSE:
│  You can now see what you asked for, what changed, and leave notes — all
│  browsable inside the tool. The conversation that shapes the tool is now
│  visible in the tool itself.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_23_clever-fox ─────────────────────────────────────────────────────────────────────────
│  SCOPE: PROTOCOL + LAB (context archaeology)
│  
│  ADDED TO PROTOCOL (in HTML comment):
│  → FOR CLAUDE section - how we work, implementation rules, what not to do
│  → ARCHITECTURE section - key objects, functions, patterns, places to check
│  → CURRENT STATE section - verified working, in flight, known bugs
│  → DESIGN PHILOSOPHY section - ouch/wow meaning, ethical non-possession
│  
│  ADDED TO LAB UI:
│  → Protocol button (☰) in lab controls
│  → Protocol panel with 4 tabs: for claude, architecture, state, philosophy
│  → Browsable from inside the tool — no more digging through HTML comments
│  
│  PURPOSE:
│  Enable a fresh Claude instance (API, new chat) to recreate the collaborative
│  experience using only the document itself. The implicit context that makes
│  our collaboration effective is now explicit and browsable.
│  
│  META:
│  This turn came from asking "what context are you using?" — surfacing the
│  invisible scaffolding so it can travel with the artifact.
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_22_eager-walrus ───────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (visual + protocol)
│  
│  CHANGES:
│  → Version name: 11px→12px, color --text-lighter→--text (darker, more visible)
│  → Chat cards: padding 14px→18px 20px, text 14px→15px, line-height 1.5→1.6
│  → Protocol: added VERIFICATION section pattern for tracking attempted vs confirmed fixes
│  
│  VERIFICATION:
│  ○ Version name visibility - changed (not yet verified)
│  ○ Local cache for complaints - still needs fix
│  ○ Logo in overlay - owl_21 added (not yet verified)
│  ○ Random people colors - owl_21 added (not yet verified)
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_21_mellow-giraffe ─────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (version tracking + people colors)
│  
│  CHANGES:
│  → Version dot now checks localStorage for actual version change
│    - localStorage.getItem('owl-last-version') / setItem in toggleLabMode
│    - Only adds .version-new class if version actually changed
│  → Logo added to overlay header so lab mode accessible when header expanded
│  → People colors: randomized per person via session.colorMap object
│    - Colors assigned randomly, persist per person ID
│    - Not CSS nth-child pattern anymore
│  
│  NEW CODE:
│  → getPersonColor(personId) - helper for random color assignment
│  → session.colorMap = {} - stores color per person ID
│  → peopleColors[] - palette of 10 distinct colors
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_195_the-pen ───────────────────────────────────────────────────────────────────────────────
│  SCOPE: FEATURE (the-pen acceptance criteria)
│  DATE: 2026-01-14
│  
│  CHANGES:
│  → Added "wow if:" acceptance criteria field to the-pen (note tool)
│  → Stored as note.acceptance in thread objects
│  → Included in quickExport() and exportTrackerData() output
│  → Placeholder: "a little wow moment as a two-word name..."
│  
│  UI: the-pen now has two inputs:
│    1. "what are you noticing?" (the observation)
│    2. "wow if:" (the acceptance criteria)
│  
│  OUTPUT FORMAT in paste:
│    1. .element-selector
│       "what I'm noticing"
│       wow if: two-word-name
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_196_clear-view ────────────────────────────────────────────────────────────────────────────
│  SCOPE: CLEANUP
│  DATE: 2026-01-14
│  
│  CHANGES:
│  → Removed floating phase indicator (purple "connect" dot)
│  → Removed ~60 lines of CSS for .floating-phase-indicator
│  → HTML element gone, JS function has graceful fallback
│  
│  WHY: blocking core UX, forgotten purpose, visual clutter
│  WOW: clear-view — room to see what matters
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_197_less-noise ────────────────────────────────────────────────────────────────────────────
│  SCOPE: CLEANUP
│  DATE: 2026-01-14
│  
│  CHANGES:
│  → Removed meeting mode trigger (floating ✎ button, bottom right)
│  → Removed ~30 lines of CSS for .meeting-mode-trigger
│  → Meeting notes still accessible via design panel button
│  
│  WHY: confusing, redundant entry point
│  WOW: less-noise — fewer floating things
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_198_enter-key ─────────────────────────────────────────────────────────────────────────────
│  SCOPE: FIX + CLEANUP
│  DATE: 2026-01-14
│  
│  CHANGES:
│  → Added Enter key handler to noteAcceptanceInput (wow if: field)
│  → Removed .together-count element from canvas area ("X here" was redundant)
│  → Removed ~20 lines of CSS for .together-count
│  → Removed JS that updated togetherCount
│  
│  WOW: enter-key — type, tab, type, enter, done
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_199_soft-dial ─────────────────────────────────────────────────────────────────────────────
│  SCOPE: FEATURE (input dial redesign)
│  DATE: 2026-01-14
│  
│  CHANGES:
│  → Moved input dial from bottom-left to center-bottom (below text bar)
│  → White theme: panel background white, borders #eee, text #666
│  → Toggle simplified to "···" (subtle, not obvious to observers)
│  → Panel opens upward from toggle
│  
│  WHY: old position blocked by journey-pane, needed demo-friendly subtle look
│  WOW: soft-dial — white, subtle, out of the way
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_200_version-sync ──────────────────────────────────────────────────────────────────────────
│  SCOPE: PROCESS + CLEANUP
│  DATE: 2026-01-14
│  
│  CHANGES:
│  → Added BUILD_NUM and BUILD_NAME constants at top of script (single source of truth)
│  → syncVersionBadges() updates all .version-badge elements on DOMContentLoaded
│  → Removed #labSignals (+ouch/+wow quick-add buttons)
│  → Turn overlay version now uses BUILD constants
│  
│  PROCESS FIX:
│  → Each build: update BUILD_NUM and BUILD_NAME (2 lines)
│  → Everything else syncs automatically (version badges, turn overlay, localStorage)
│  
│  WOW: version-sync — update once, everything follows
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_20_stubborn-pickle ────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (CSS fix + visibility)
│  
│  CHANGES:
│  → People dot colors: nth-child(N)→nth-child(10n+N) so colors cycle for any count
│    (was breaking after 10 people)
│  → Version name: made more visible (color lighter→light, more padding)
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_17_curious-hammock ─────────────────────────────────────────────────────────────────────
│  SCOPE: LAB (protocol)
│  Clarified: owl IS the lab, powers reflection-as-a-service
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_16_restless-accordion ──────────────────────────────────────────────────────────────────
│  SCOPE: LAB
│  Copy now clears threads + auto-closes modal after 800ms
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ owl_15_exploding-tomato ────────────────────────────────────────────────────────────────────
│  SCOPE: SERVICE + LAB
│  Version indicator: red dot explodes
│  People dots: 10 distinct colors (threaded from chip colors idea)
└──────────────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.8-L
│  DATE: 2026-01-03
│  SCOPE: Lab (conversation state + UX thinking)
│  
│  CONVERSATION NOW SHOWS:
│  - You clicked all three chips
│  - You typed "all three please"
│  - Claude: "combining... building now" + see it / adjust
│  - You: "wait — these colors. people could BE these colors"
│  - Claude offers two new modes: spark mode, thread it
│  
│  UX QUESTION:
│  The noticing→idea flow is different from "pick from options." It's:
│  1. See something (chip colors)
│  2. Connect it to something else (people in the game)
│  3. New idea emerges (people ARE colors, distinct from swirl)
│  
│  What would that UX look like? A way to point at something and say "this sparks..."?
│  
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 9 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_218_warm-click
│  DATE: 2026-01-14
│  SCOPE: Bug fix (experiment conversation)
│  
│  TRIGGER: "these buttons don't work"
│  WOW IF: buttons work and continue the conversation
│  
│  CHANGES:
│  → handleExpChip() now calls fadePreviousExp(), addExpUserMessage(), handleExpResponse()
│  → Clicking a chip echoes your choice and continues the conversation
│  
│  REFLECTION: warm-click — the button does what it promises
│  
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 10 ────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_219_clear-both
│  DATE: 2026-01-14
│  SCOPE: Bug fix (storage ghost notes)
│  
│  TRIGGER: "i think it's this panel that somehow makes the text show so much history"
│  
│  CHANGES:
│  → NOTES_KEY and TRACKER_KEY now include BUILD_NUM (versioned storage)
│  → Each build gets fresh localStorage — no ghost notes from previous versions
│  → Export still clears both systems
│  → clearAllData() uses the constants
│  
│  REFLECTION: clear-both — versioned storage, clean slate every build
│  
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 11 ────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_220_up-down
│  DATE: 2026-01-14
│  SCOPE: Feature (patterns ↔ try navigation)
│  
│  TRIGGER: "can we make this feel like a part of patterns by making you click to go up"
│  WOW IF: patterns and try back and forth a clean up and down swipe
│  
│  CHANGES:
│  → Replaced "← patterns" with centered "↑ patterns" chevron
│  → Removed "conversation keeps going" label
│  → Added gentle-bounce animation (2s ease-in-out)
│  → Simplified exp-quote-card layout
│  
│  REFLECTION: up-down — patterns above, try below, clean swipe between
│  
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 12 ────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_221_soft-up
│  DATE: 2026-01-14
│  SCOPE: Feature (navigation refinement)
│  
│  TRIGGER: "mirror the style of select something — just text, not a button"
│  WOW IF: patterns isn't a button, the chat ux draws me in
│  
│  CHANGES:
│  → Replaced button with soft text nav: "↑ what surfaced"
│  → Styled like patterns-prompt (gray #999, centered, quiet)
│  → Chevron bounces, text stays still
│  → No background, no border — just clickable text
│  
│  REFLECTION: soft-up — a whisper, not a button
│  
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 13 ────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_222_quote-first
│  DATE: 2026-01-14
│  SCOPE: Feature (conversation flow)
│  
│  TRIGGER: "respect my choice to show a quote i clicked — this is a SPECIFIC moment"
│  WOW IF: I can reflect on this tough moment and see the freedom to dream something to try
│  
│  CHANGES:
│  → Conversation starts empty — no hardcoded placeholder
│  → Clicked quote shows as focal point with soft invitation below
│  → "what might help here?" + "↓ dream something to try"
│  → Multiple quotes stack — conversation builds naturally
│  → Added showTryInput() to focus input when ready
│  
│  REFLECTION: quote-first — the moment leads, we follow
│  
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 8 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.7-L
│  DATE: 2026-01-03
│  SCOPE: Lab (fix + experiment UX thinking)
│  
│  FIXED: Script error — chips missing <strong> tags that selectExtension() expected
│  
│  STORED FOR LATER: 
│  People colors in bottom bar should be distinct (not swirl). Swirl = reflections only.
│  
│  THINKING NOW:
│  You want all three ideas. The experiment UX question is:
│  → Do you click multiple chips?
│  → Do you type freely and Claude parses?
│  → Do they stack into a combined experiment?
│  → Is there a "build mode" where you assemble pieces?
│  
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 7 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.6-P
│  DATE: 2026-01-03
│  SCOPE: Protocol (how we work together)
│  
│  CHANGES:
│  → Added OPEN THREADS section for storing unfinished thoughts and questions
│  → Turns now: act on words or ask questions, don't just echo back
│  → Document stores the conversation state, not just code changes
│  
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 7 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_224_heard-back
│  DATE: 2026-01-14
│  SCOPE: Bug fix + feature
│  
│  YOUR WORDS:
│  "when I click this specific quote, it doesn't show me the quote — it shows 
│   generic text that feels OUCH — not what I heard"
│  "this screen loses the ability to toggle the debug menu"
│  
│  UNDERSTANDING:
│  initExperimentConversation() was wiping quotes added by clickQuote().
│  The generic "Six students said..." message replaced the actual words.
│  
│  CHANGES:
│  → initExperimentConversation: check for existing quotes before wiping
│  → If .exp-quote-block exists, don't reset — respect the click
│  → Added ghost-toggle: subtle debug access on plan screens
│     - Normally invisible (clickable but transparent)
│     - Lab mode on: faint green, visible on hover
│     - In session: shows build number
│  → Added in-session body class for phases beyond plan1/2/3
│  
│  SEED: heard-back — you clicked, the system echoes what you heard
│  
│  NEXT: Test quote flow end-to-end
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 8 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_225_just-notes
│  DATE: 2026-01-14
│  SCOPE: Simplify
│  
│  YOUR WORDS:
│  "lets remove experiments for now — just keep the notes"
│  "give me something to click — let me be reactive to get to work"
│  
│  UNDERSTANDING:
│  Two circles on journey steps were confusing. Experiments haven't earned
│  their place yet. And the invite after quote click needed reactive options.
│  
│  CHANGES:
│  → Removed journey-step-exp CSS
│  → Stubbed updateJourneyExperimentBadges() — now does nothing
│  → Thread/notes badges (.journey-step-threads) still work
│  → exp-invite now has 3 chevron options:
│     » show me ideas → addExpAiMessage with suggestions
│     » why might this happen? → addExpAiMessage with causes
│     ↓ I have something → focuses input (was "dream something to try")
│  → Added handleInviteOption() to respond to chevron clicks
│  
│  SEED: just-notes — simpler, reactive, less forcing
│  
│  NEXT: ?
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 9 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_226_warm-welcome
│  DATE: 2026-01-14
│  SCOPE: Feature
│  
│  YOUR WORDS:
│  "you should say something in response to that quote — what YOU hear that 
│   student saying — asking them where to next"
│  "reflected and given space, but also clear action"
│  
│  UNDERSTANDING:
│  Quote lands, then just options — no acknowledgment. The system should
│  respond first (warm reflection), THEN offer clear paths.
│  
│  CHANGES:
│  → addQuoteToConversation now adds .exp-response with:
│     - .exp-reflection — warm acknowledgment of what was heard
│     - .exp-chips — clear action buttons
│  → generateReflection() creates contextual warm responses based on quote
│  → Chips: "what might help?" / "why does this happen?" / "I have an idea"
│  → Updated showTryInput and handleInviteOption to fade chips
│  → Added CSS for .exp-response and .exp-reflection
│  
│  SEED: warm-welcome — reflected, given space, clear action
│  
│  NEXT: ?
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 10 ────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_227_room-to-breathe
│  DATE: 2026-01-14
│  SCOPE: Bug fix
│  
│  YOUR WORDS:
│  "fix the text input so it's not overlapping with the bottom panel"
│  "conversation flows"
│  
│  UNDERSTANDING:
│  The exp-input-area was at bottom: 0, overlapping the bottom panel.
│  Conversation couldn't scroll properly.
│  
│  CHANGES:
│  → exp-input-area: bottom: 60px (sits above panel)
│  → experiment-screen: padding-bottom: 160px (room for input + panel)
│  → Added z-index: 50 to input area
│  
│  SEED: room-to-breathe — everything has space
│  
│  NEXT: ?
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 11 ────────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_228_scroll-to-now
│  DATE: 2026-01-14
│  SCOPE: Bug fix
│  
│  YOUR WORDS:
│  "this rolls off screen"
│  "newest conversation is front and center"
│  
│  UNDERSTANDING:
│  addQuoteToConversation was scrolling the conversation div, but the
│  experiment screen is the actual scrollable container.
│  
│  CHANGES:
│  → Fixed scroll target: screen.scrollTop instead of conv.scrollTop
│  → New content now scrolls into view automatically
│  
│  SEED: scroll-to-now — newest is always visible
│  
│  NEXT: ?
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 6 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.5-L
│  DATE: 2026-01-03
│  SCOPE: Lab tool (guide panel sizing + conversation record)
│  
│  YOUR WORDS:
│  "great ideas -- please extend the text box to be much wider so we can talk 
│   easier -- and I have a better text entry"
│  "this is where I said run experiment"
│  
│  CHANGES:
│  → Guide panel width: 380px → 520px
│  → Guide input area: warm background, more padding (16px 20px 20px)
│  → Guide input: min-height 80px, max-height 300px, resizable, line-height 1.6
│  → Conversation record: added sam's actual message "run experiment" after "my idea..."
│  → Removed the bracketed [clicked GO] note — now shows the real words
│  
│  CONVERSATION NOW:
│  sam: my idea is a game we make...
│  sam: run experiment
│  claude: Ouch/wow mini-golf...
│  sam: WOW
│  claude: how might we iterate toward a game? [3 chips]
│  
│  NEXT: ?
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 5 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.4-L
│  DATE: 2026-01-03
│  SCOPE: Lab tool (conversation state in HTML)
│  
│  YOUR WORDS:
│  "nope -- we are now having a conversation about the conversation itself using 
│   the document -- what actually happened here was I click run experiment after 
│   my last message 'my idea' -- then you made the experiment -- now I said WOW --- 
│   how might we iterate toward a game -- you gave me 3 chips -- show me that"
│  
│  UNDERSTANDING:
│  The guide panel HTML IS the conversation record. It should show what actually
│  happened, not buttons for what might happen next.
│  
│  CHANGES:
│  → Updated guideConversation HTML to show the actual flow:
│      1. sam: "my idea is a game we make..."
│      2. claude: "Ouch/wow mini-golf..." 
│      3. sam: [clicked GO — experiment running]
│      4. sam: "WOW"
│      5. claude: "how might we iterate toward a game?" + 3 chips
│         • wow hole — target appears randomly
│         • ouch zone — touch and bounce back
│         • shared push — everyone moves same ball
│  
│  → Removed GO/talk buttons (that moment already passed)
│  → This is the conversation STATE, not a simulation
│  
│  NEXT: ?
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 4 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.3-L
│  DATE: 2026-01-03
│  SCOPE: Lab tool (experiment extension flow)
│  
│  YOUR WORDS:
│  "I said run experiment here -- then I'd like you to come up with some ideas 
│   like -- wow game or ouch challenge to extend this one bit"
│  
│  CHANGES:
│  → startExperiment() now shows "running: [experiment name]" first
│  → After 800ms, Claude offers 3 extension ideas as clickable chips:
│      • wow race — first to sink 3 wow-holes wins
│      • ouch dodge — avoid the expanding ouch zones  
│      • team putt — everyone pushes the same ball together
│  → Added selectExtension() function for when user picks an extension
│  → Extension selection shows "adding [name] to experiment" + see it / adjust buttons
│  
│  FLOW NOW:
│  1. User in guide panel, clicks GO
│  2. Claude: "running: ouch/wow mini-golf waiting game"
│  3. Claude: "ways to extend this:" + 3 chips
│  4. User clicks chip → "let's try: [name]" → Claude confirms + prototype
│  
│  NEXT: ?
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 3 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.2-L
│  DATE: 2026-01-03
│  SCOPE: Lab tool (experiment response flow)
│  
│  TRIGGER: Noticing report
│  - "remove this live button" (expLiveDot in togetherPlayground)
│  - "this is a live experiment, should be red and when clicked say accept/reject/talk"
│  
│  CHANGES:
│  → Removed #expLiveDot LIVE button from together playground
│  → Thread dot now has active-exp class by default (red, pulsing)
│  → Thread dot click now opens exp-response-popup with three options:
│      • accept — keeps experiment running, shows toast
│      • reject — removes active-exp class, ends experiment
│      • talk — opens guide panel for discussion
│  → Added CSS for exp-response-popup (positioned below dot, 140px min-width)
│  → Added toggleExpResponse(), closeExpResponse(), respondToExp() functions
│  
│  STATE: Connect screen with live experiment, red dot, response popup ready
│  OPEN THREAD: "imagine I click go here" — what should GO do in the guide panel?
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 2 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.1-L
│  DATE: 2026-01-03
│  SCOPE: Lab tool (thread-dot + guide panel)
│  
│  TRIGGER: Noticing report from connect screen
│  - thread-dot on start button should be red when experiment active
│  - guide panel text input too cramped, can't read it
│  
│  CHANGES:
│  → Added .thread-dot.active-exp state (red/ouch color when experiment running)
│  → startExperiment() now adds active-exp class to all thread-dots
│  → Guide input: increased padding (14px 16px), min-height 52px, max-height 200px
│  → Guide input: line-height 1.5 for better readability
│  
│  STATE: User is in guide panel conversation, proposing mini-golf waiting game
│  NEXT: Respond to "imagine I click go here" — what happens when GO is clicked
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 233 ───────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_233_owl-debug
│  DATE: 2026-01-14
│  SCOPE: Feature
│  
│  YOU SAID:
│  "ouch wow lab text should persist on all screens"
│  "be the toggle and include the version"
│  
│  CHANGES:
│  → Added .plan-logo to planScreen1, planScreen2, planScreen3
│  → Same pattern: "ouch wow lab" + version badge
│  → Click calls toggleLabMode() — same as header logo
│  → Added × close button to journey rail (hideJourneyRail)
│  → Journey rail.hidden class hides it even in lab-mode
│  
│  SEED: owl-debug — logo is the door, everywhere
│  
│  THREAD STATUS:
│  [resolved] debug access on setup screens — plan-logo added
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 232 ───────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_232_card-stays
│  DATE: 2026-01-14
│  SCOPE: Feature
│  
│  YOU SAID:
│  "i lost the card — can't see on screen"
│  wow if: card on the side until we find a new card, list if we work for it
│  
│  CHANGES:
│  → Added floating card mini on left side (mirrors ideas badge placement pattern)
│  → Shows "trying: [experiment text]" with count badge if multiple
│  → Click to open cards panel with all experiments
│  → collectedCards array stores committed experiments
│  → updateCardMini() called from addExpCard, updateExpCard, commitExperiment
│  → toggleCardsPanel() and renderCardsList() for panel UI
│  → CSS for card-mini, cards-panel, cards-list-item
│  
│  SEED: card-stays — your experiment never scrolls away
│  
│  THREAD STATUS:
│  [resolved] card scrolls away — card-stays (floating mini on left)
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 231 ───────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_231_try-ideas
│  DATE: 2026-01-14
│  SCOPE: Refinement
│  
│  YOU SAID:
│  "move ideas so far to the side or NOT near the text window"
│  "we're at 10 ideas but the user has seen 1 experiment"
│  
│  CHANGES:
│  → Moved ideas badge to floating position (right side, fixed)
│  → Added collectAsIdeas param to addExpAiMessage — only collect when true
│  → handleInviteOption('ideas') now passes true, 'why' passes false
│  → Removed auto-collection from addQuoteToConversation (nav chips)
│  → Removed auto-collection from addExpClaudeMessage (follow-up options)
│  → Panel now slides up from badge on right side
│  
│  SEED: try-ideas — collect what matters, not everything
│  
│  THREAD STATUS:
│  [resolved] badge placement — try-ideas (floating right)
│  [resolved] over-collection — try-ideas (only actual ideas)
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 230 ───────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_230_ideas-kept
│  DATE: 2026-01-14
│  SCOPE: Feature + Bug fix
│  
│  YOU SAID:
│  "it's still not scrolling reliably, which is extra OUCH when the old chevrons fade"
│  wow if: always scrolls fresh + ideas collected in a panel I can refer back to
│  
│  CHANGES:
│  → Created scrollExpToBottom() helper — one reliable scroll method
│  → Updated 5 functions to use the helper: addExpAiMessage, addExpCard, 
│    addQuoteToConversation, addExpUserMessage, addExpClaudeMessage
│  → Added ideas collector: collectedIdeas array + collectIdea() function
│  → Added 💡 ideas badge in input area (shows count, hidden when empty)
│  → Added ideas panel that slides up with all offered chips
│  → CSS for badge and panel with hover states and animations
│  
│  SEED: ideas-kept — nothing fades without a home
│  
│  THREAD STATUS:
│  [resolved] scroll reliability — ideas-kept (unified helper)
│  [resolved] faded chips lost — ideas-kept (panel collects them)
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 229 ───────────────────────────────────────────────────────────────────────────────────
│  VERSION: owl_229_stay-close
│  DATE: 2026-01-14
│  SCOPE: Bug fix
│  
│  YOU SAID:
│  "the scroll continues off page and i have to manually scroll down"
│  wow if: the scroll automatically rolls up so i see the newest conversation
│  
│  CHANGES:
│  → Fixed addExpUserMessage: scrolls experimentScreen, not expConversation
│  → Fixed addExpClaudeMessage: scrolls experimentScreen, not expConversation
│  → Both functions now keep newest message visible as conversation grows
│  
│  SEED: stay-close — conversation follows you
│  
│  THREAD STATUS:
│  [resolved] scroll bug — stay-close
└──────────────────────────────────────────────────────────────────────────────────────────────

┌─ TURN 1 ─────────────────────────────────────────────────────────────────────────────────────
│  VERSION: 45.27.0-P
│  DATE: 2026-01-03
│  SCOPE: Protocol + bug fix
│  
│  CHANGES:
│  → Fixed script error: removed orphaned code at line 18111-18112 
│    (stray `handleExpResponse(text);` and `}` outside any function)
│  → Added protocol changelog structure at end of file (inside HTML comment)
│  → Established versioning system with scope tags (-R, -L, -C, -X, -P)
│  → Documented requirement: every response = new versioned file + TURN entry
│  
│  CURRENT STATE OF CONNECT FLOW:
│  - planScreen1: "who" selection (classrooms, teams, leaders, cohorts, boards, communities)
│  - planScreen2: "what happens with truth" / contracts selection  
│  - planScreen3: "when" / scheduling + share link
│  
│  STUBS TO EXPLORE:
│  - How does a teacher move from connect → active experiment?
│  - What's the relationship between lab controls and live session?
│  - How do experiments surface during/after reflection?
│  
│  NEXT: Awaiting direction on where to focus
└──────────────────────────────────────────────────────────────────────────────────────────────

-->
    
    <!-- Phase Threads Panel -->
    <div class="phase-threads-panel" id="phaseThreadsPanel">
        <div class="phase-threads-header">
            <div class="phase-threads-title">threads on <span id="phaseThreadsPhase">connect</span></div>
            <button class="phase-threads-close" onclick="closePhaseThreads()">×</button>
        </div>
        <div class="phase-threads-content" id="phaseThreadsContent">
            <!-- Populated by JS -->
        </div>
        <div class="phase-threads-add">
            <button class="phase-threads-add-btn" onclick="addPhaseThread()">+ add thread for this phase</button>
        </div>
    </div>
    
    <!-- API Thread Panel -->
    <div class="api-thread-panel" id="apiThreadPanel">
        <div class="api-thread-header">
            <div class="api-thread-title">
                <span>api thread</span>
                <span class="api-status ready" id="apiStatus">ready</span>
            </div>
            <button class="api-thread-close" onclick="closeApiThread()">×</button>
        </div>
        <div class="api-thread-content">
            <div class="api-key-section" id="apiKeySection">
                <input type="password" class="api-key-input" id="apiKeyInput" placeholder="sk-ant-..." />
                <div class="api-key-hint">Stored in sessionStorage. Cleared on tab close.</div>
            </div>
            <div class="api-thread-note" id="apiThreadNote">
                <div class="api-thread-note-label">Your note</div>
                <div class="api-thread-note-text" id="apiNoteText">No note selected</div>
            </div>
            <div class="api-response-section" id="apiResponseSection" style="display: none;">
                <div class="api-response-label">Claude's response</div>
                <div class="api-response-content" id="apiResponseContent"></div>
            </div>
        </div>
        <div class="api-thread-actions">
            <button class="api-action-btn secondary" onclick="closeApiThread()">cancel</button>
            <button class="api-action-btn primary" id="apiSendBtn" onclick="sendApiThread()">send to claude</button>
        </div>
    </div>
    
    <!-- Version History Panel -->
    <div class="version-history-backdrop" id="versionHistoryBackdrop" onclick="toggleVersionHistory()"></div>
    <div class="version-history-panel" id="versionHistoryPanel">
        <div class="version-history-header">
            <div>
                <div class="version-history-title">version history</div>
                <div class="version-history-subtitle">the cost of building together</div>
            </div>
            <button class="version-history-close" onclick="toggleVersionHistory()">×</button>
        </div>
        <div class="version-history-stats">
            <div class="version-stat">
                <div class="version-stat-num gold">30</div>
                <div class="version-stat-label">versions</div>
            </div>
            <div class="version-stat">
                <div class="version-stat-num wow">~180</div>
                <div class="version-stat-label">your prompts</div>
            </div>
            <div class="version-stat">
                <div class="version-stat-num ouch">~400</div>
                <div class="version-stat-label">code changes</div>
            </div>
            <div class="version-stat">
                <div class="version-stat-num">21k</div>
                <div class="version-stat-label">lines</div>
            </div>
        </div>
        <div class="version-history-list" id="versionHistoryList">
            <!-- Populated by JS -->
        </div>
    </div>

    <!-- Turn Overlay (shows on load, what changed this version) -->
    <div class="turn-overlay" id="turnOverlay">
        <div class="turn-overlay-card">
            <div class="turn-overlay-version">
                <h1>owl_278_soft-landing</h1>
                <span class="scope">WOW</span>
            </div>
            
            <div class="turn-overlay-section">
                <h3>You said</h3>
                <div class="turn-overlay-quote">
                    "when we end the collection, can we also transition students back into demo mode so they can see patterns"
                </div>
            </div>
            
            <div class="turn-overlay-section">
                <h3>What I changed</h3>
                <div class="turn-overlay-changes">
                    <ul>
                        <li>Students switch to demo mode when patterns phase arrives</li>
                        <li>Fresh warm room name: soft-hello</li>
                    </ul>
                </div>
            </div>
            
            <div class="turn-overlay-section">
                <h3>Reflection</h3>
                <div class="turn-overlay-notice">
                    soft-landing - students land in patterns with simulated data to explore
                </div>
            </div>
            
            <div class="turn-overlay-dismiss">
                <button onclick="dismissTurnOverlay()">got it - show me the app</button>
            </div>
        </div>
    </div>
    
    <script>
        function dismissTurnOverlay() {
            const overlay = document.getElementById('turnOverlay');
            overlay.classList.add('hiding');
            setTimeout(() => overlay.remove(), 300);
            localStorage.setItem('lastSeenVersion', 'owl_' + BUILD_NUM + '_' + BUILD_NAME);
        }
        
        // Sync all room codes to BUILD_ROOM_CODE
        function syncRoomCodes() {
            const codeEls = [
                'overlaySessionCode',
                'waitingSessionCode', 
                'sessionCode',
                'planSessionCode'
            ];
            codeEls.forEach(id => {
                const el = document.getElementById(id);
                if (el) el.textContent = BUILD_ROOM_CODE;
            });
            // Also update any join-code-display elements
            document.querySelectorAll('.join-code-display').forEach(el => {
                el.textContent = BUILD_ROOM_CODE;
            });
        }
        
        document.addEventListener('DOMContentLoaded', () => {
            // Sync all version badges from BUILD constants
            syncVersionBadges();
            
            // Sync all room codes from BUILD_ROOM_CODE
            syncRoomCodes();
            
            // Check for API key and show banner if missing
            checkApiKeyOnLoad();
            
            // Initialize the view based on default state
            if (typeof setPhase === 'function') {
                setPhase(state.phase);
            }
            
            const lastSeen = localStorage.getItem('lastSeenVersion');
            if (lastSeen === 'owl_' + BUILD_NUM + '_' + BUILD_NAME) {
                const overlay = document.getElementById('turnOverlay');
                if (overlay) overlay.remove();
            }
        });
    </script>
    
    <!-- Mode Banner (visible in lab mode) -->
    <div class="mode-banner demo" id="modeBanner">SIMULATED BEHAVIOR</div>

    <!-- Data Model Panel (toggle with ` key in lab mode) -->
    <div class="debug-console" id="debugConsole">
        <div class="debug-console-header">
            <span>data model</span>
            <button class="debug-console-close" onclick="toggleDebugConsole()">×</button>
        </div>
        <div class="debug-console-body" id="debugConsoleBody">
            <!-- Populated by updateDebugConsole() -->
        </div>
    </div>

    <!-- Student Feedback Button (participants only) -->
    <button class="student-feedback-btn" id="studentFeedbackBtn" onclick="toggleStudentFeedback()">give feedback</button>
    <div class="student-feedback-popup" id="studentFeedbackPopup">
        <textarea id="studentFeedbackText" placeholder="what's on your mind about this tool?"></textarea>
        <button class="student-feedback-send" id="studentFeedbackSend" onclick="sendStudentFeedback()">share feedback</button>
    </div>

    <!-- Comfy Share — warm presence for open threads -->
    <div class="comfy-share" id="comfyShare" onclick="openOldestThread()">
        <div class="comfy-share-dot"></div>
        <div class="comfy-share-text" id="comfyShareText">we left something open...</div>
        <div class="comfy-share-count" id="comfyShareCount">1</div>
    </div>

</body>
</html>