/* ═══════════════════════════════════════════════════════════════════════════════
   CORE--STYLES.CSS — the feel of the room
   
   moment: everywhere
   the feel: warm, quiet, unhurried
   
   ─────────────────────────────────────────────────────────────────────────────
   WHAT I HOLD
   ─────────────────────────────────────────────────────────────────────────────
   
   - tokens (colors, spacing, timing)
   - typography (the voice)
   - layout (screens, containers, flow)
   - components (buttons, cards, inputs)
   - transitions (how things move)
   - all user-facing styles (what participants see)
   
   ─────────────────────────────────────────────────────────────────────────────
   WHAT I PROTECT
   ─────────────────────────────────────────────────────────────────────────────
   
   - consistent warmth across phases
   - the breathing pace (transition timing)
   - nothing shouts (soft contrasts, no harsh borders)
   
   ─────────────────────────────────────────────────────────────────────────────
   WHAT CASCADES
   ─────────────────────────────────────────────────────────────────────────────
   
   :root variables flow everywhere:
     --bg, --bg-warm, --bg-ouch, --bg-wow
     --ouch, --ouch-dark, --ouch-text
     --wow, --wow-dark, --wow-text
     --gold, --text, --text-mid, --text-light
     --border, --card, --swirl
     --timer, --timer-urgent, --timer-empty
   
   ─────────────────────────────────────────────────────────────────────────────
   
   I need:
     nothing — I load first
   
   I provide:
     the foundation everything else stands on
     
   Load order:
     core--styles.css → loom--styles.css
     
═══════════════════════════════════════════════════════════════════════════════ */

        /* ═══════════════════════════════════════════════════════════════════════════
           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); }

/* ═══════════════════════════════════════════════════════════════════════════════
   USER-FACING SECTIONS
   Everything participants see during a session
═══════════════════════════════════════════════════════════════════════════════ */

        /* ============ 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: 28px;
            font-weight: 700;
            margin: 0;
            background: linear-gradient(135deg, var(--ouch) 0%, var(--wow) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
        }

        .turn-overlay-version h1 .build-num {
            -webkit-text-fill-color: var(--gold);
            font-size: 32px;
        }
        
        .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;
            background: linear-gradient(135deg, var(--ouch) 0%, var(--wow) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: 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;
            padding-left: 16px;
            margin: 4px 0 0;
        }

        .version-entry-changes li {
            margin-bottom: 2px;
        }

        .version-entry-reflection {
            font-size: 11px;
            color: var(--wow-dark);
            margin-top: 6px;
            font-style: italic;
        }

        .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; }
        }

        .dot.flippable {
            cursor: pointer;
            animation: flippableHint 1.2s ease-in-out infinite;
        }

        @keyframes flippableHint {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        .dot.flip-pulse {
            animation: flipPulse 0.4s ease-out;
        }

        @keyframes flipPulse {
            0% { transform: scale(1); }
            40% { transform: scale(1.8); }
            100% { transform: scale(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: 17px;
            color: #888;
            margin-bottom: 16px;
            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: 12px 20px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 20px;
            font-size: 16px;
            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;
            padding: 8px 0;
            vertical-align: middle;
        }
        
        .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); }
        
        /* ============ FACILITATOR COCKPIT ============ */
        .facilitator-cockpit {
            position: absolute;
            top: 60px;
            left: 240px;
            right: 16px;
            bottom: 0;
            padding: 16px 24px;
            overflow: hidden;
        }

        body:not(.lab-mode) .facilitator-cockpit {
            left: 16px;
        }

        /* ── Collecting state — 2/3 signals, 1/3 controls ── */
        .fac-collect {
            display: flex;
            gap: 24px;
            height: 100%;
        }

        .fac-signals {
            flex: 2;
            overflow-y: auto;
            padding: 8px 0;
            display: flex;
            flex-direction: column;
        }

        .fac-signal {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 5px 0;
            font-size: 14px;
            line-height: 1.5;
            color: var(--text);
            border-bottom: 1px solid var(--border);
        }

        .fac-pip {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 6px;
        }
        .fac-pip.ouch { background: var(--ouch); }
        .fac-pip.wow { background: var(--wow); }

        .fac-controls {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-top: 8px;
        }

        .fac-stat {
            font-size: 13px;
            color: var(--text-light);
        }

        .fac-stat-num {
            font-size: 24px;
            font-weight: 600;
            color: var(--text);
            display: block;
        }

        .fac-end-btn {
            padding: 10px 24px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--card);
            font-size: 14px;
            font-family: inherit;
            cursor: pointer;
        }
        .fac-end-btn:hover { background: #eee; }

        .fac-cluster-btn {
            padding: 10px 24px;
            border: 1px solid var(--wow);
            border-radius: 8px;
            background: rgba(154, 196, 168, 0.1);
            color: var(--wow-text, #4a6a50);
            font-size: 14px;
            font-family: inherit;
            cursor: pointer;
        }
        .fac-cluster-btn:hover { background: rgba(154, 196, 168, 0.2); }
        .fac-cluster-btn:disabled { opacity: 0.5; cursor: default; }

        .fac-theme-input {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 13px;
            font-family: inherit;
            background: var(--bg);
            color: var(--text);
            outline: none;
            box-sizing: border-box;
            margin-top: auto;
        }
        .fac-theme-input:focus { border-color: #ccc; }

        /* ── Grouped feed — signals sorted by theme ── */
        .fac-theme-group {
            margin-bottom: 16px;
        }

        .fac-theme-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 2px solid var(--border);
            margin-bottom: 4px;
        }

        .fac-theme-header.ouch { border-color: var(--ouch); }
        .fac-theme-header.wow { border-color: var(--wow); }
        .fac-theme-header.unsorted { border-color: #ddd; }

        .fac-theme-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
        }
        .fac-theme-name:hover { text-decoration: underline; }

        .fac-theme-count {
            font-size: 12px;
            color: var(--text-light);
        }

        .fac-theme-rename {
            font-size: 15px;
            font-weight: 600;
            font-family: inherit;
            border: 1px solid var(--wow);
            border-radius: 4px;
            padding: 2px 6px;
            outline: none;
            background: white;
            color: var(--text);
        }

        .fac-signal.grouped {
            padding-left: 16px;
            border-bottom-color: transparent;
        }

        /* ── Review state ── */
        .fac-review-layout {
            display: flex;
            gap: 16px;
            min-height: 50vh;
        }

        .fac-patterns {
            flex: 1;
            overflow-y: auto;
            max-height: 70vh;
        }

        .fac-pattern {
            padding: 10px 12px;
            margin-bottom: 8px;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: var(--card);
        }

        .fac-pattern-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .fac-pattern-label {
            font-size: 15px;
            font-weight: 500;
            color: var(--text);
        }

        .fac-pattern-count {
            font-size: 12px;
            color: var(--text-light);
            margin-left: auto;
        }

        .fac-quote {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
            padding: 2px 0 2px 16px;
        }

        .fac-experiment {
            font-size: 12px;
            color: var(--wow-text, #4a6a50);
            padding: 4px 0 0 16px;
            font-style: italic;
        }

        .fac-empty {
            padding: 24px;
            text-align: center;
            color: var(--text-light);
            font-size: 14px;
        }

        /* ── Chat sidebar ── */
        .fac-chat {
            width: 260px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            border-left: 1px solid var(--border);
            padding-left: 16px;
        }

        .fac-chat-messages {
            flex: 1;
            overflow-y: auto;
            max-height: 50vh;
            padding-bottom: 8px;
        }

        .fac-chat-msg {
            font-size: 13px;
            line-height: 1.4;
            padding: 6px 10px;
            margin-bottom: 6px;
            border-radius: 8px;
        }
        .fac-chat-msg.facilitator {
            background: rgba(154, 196, 168, 0.12);
            color: var(--text);
        }
        .fac-chat-msg.system {
            font-size: 12px;
            color: var(--text-light);
            font-style: italic;
        }

        .fac-chat-input input {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 8px 12px;
            font-size: 13px;
            font-family: inherit;
            background: var(--bg);
            color: var(--text);
            outline: none;
            box-sizing: border-box;
        }
        .fac-chat-input input:focus { border-color: #ccc; }

        .fac-chat-actions {
            display: flex;
            gap: 8px;
            padding-top: 8px;
        }

        .fac-btn {
            padding: 8px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--card);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            white-space: nowrap;
        }
        .fac-btn:hover { background: #eee; }
        .fac-btn.primary {
            background: var(--wow);
            color: white;
            border-color: var(--wow);
        }
        .fac-btn.primary:hover { opacity: 0.9; }

        /* ============ SAFETY FLOOR ============ */
        .safety {
            position: fixed;
            bottom: 120px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 13px;
            color: #bbb;
            z-index: 1002;
        }
        
        .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 ============ */
        /* role visibility — toggle based on state.role */
        .teacher-only { display: none; }
        .participant-only { display: none; }
        body[data-role="teacher"] .teacher-only { display: block; }
        body[data-role="teacher"] .participant-only { display: none; }
        body[data-role="student"] .teacher-only { display: none; }
        body[data-role="student"] .participant-only { display: block; }

        .invitation-wait {
            font-size: 15px;
            color: #999;
            margin-top: 24px;
        }

        .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;
        }
        
        .clustering-dots {
            position: relative;
            width: 100%;
            height: 200px;
            margin: 20px 0;
        }

        .cluster-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ccc;
            opacity: 0;
            transition: left 1.5s ease, top 1.5s ease, opacity 0.4s ease, background 0.6s ease;
        }

        .cluster-dot.visible {
            opacity: 0.6;
        }

        .cluster-dot.settled {
            opacity: 0.9;
            background: var(--swirl, #b8a9c9);
        }

        .play-btn.fade-in {
            animation: fadeInUp 0.4s ease both;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .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;
            overflow: hidden;
        }
        
        .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-empty-state {
            text-align: center;
            padding: 80px 0;
            color: #bbb;
            font-size: 16px;
        }

        .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: 720px;
        }
        
        /* 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);
        }
        
        /* ============ CATEGORY EXPANDED (inline detail) ============ */

        /* other categories fade when one is expanded */
        .categories-container.has-expanded .category-box:not(.expanded) {
            opacity: 0.5;
            transition: opacity 0.3s ease;
        }

        .category-box.expanded {
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        }

        .category-box.expanded .category-dots {
            display: none;
        }

        .category-box.expanded {
            margin-top: 16px;
        }

        .category-box.expanded .category-header {
            padding-bottom: 12px;
        }

        .category-box.expanded .category-label {
            border-left: none;
            padding-left: 0;
            font-size: 17px;
            font-weight: 600;
            color: #444;
        }

        /* back button in header when expanded */
        .category-back {
            background: none;
            border: none;
            font-family: inherit;
            font-size: 13px;
            color: #bbb;
            cursor: pointer;
            padding: 0;
            margin-right: 12px;
            transition: color 0.2s ease;
            flex-shrink: 0;
        }

        .category-back:hover {
            color: #666;
        }

        /* expanded body (quotes + experiments) */
        .category-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        .category-box.expanded .category-body {
            max-height: 2000px;
        }

        .category-body-inner {
            padding: 0 24px 24px;
        }

        /* quote rows with dot bullets */
        .detail-quote {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 8px 0;
            font-size: 15px;
            line-height: 1.55;
            color: #555;
        }

        .detail-quote-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 7px;
        }

        .detail-quote-dot.ouch { background: var(--ouch); }
        .detail-quote-dot.wow { background: var(--wow); }

        .detail-quote-text {
            flex: 1;
            min-width: 0;
        }

        /* reactions on quotes and experiments */
        .detail-reactions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
            align-self: center;
            opacity: 1;
            transition: opacity 0.15s ease;
        }

        .detail-react-btn {
            background: #f0efed;
            border: 1px solid transparent;
            font-family: inherit;
            font-size: 12px;
            font-weight: 500;
            color: #bbb;
            cursor: pointer;
            padding: 5px 14px;
            border-radius: 16px;
            transition: all 0.2s ease;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            -webkit-tap-highlight-color: transparent;
        }

        .detail-react-btn.nudge-glow {
            box-shadow: 0 0 0 3px rgba(154, 196, 168, 0.4);
        }

        .detail-react-btn:hover {
            color: #666;
            border-color: #ccc;
            background: #eee;
        }

        .detail-react-btn:active {
            transform: scale(0.95);
        }

        .detail-react-btn.voted {
            background: #e8f5ec;
            border-color: var(--wow);
            color: var(--wow-text);
        }

        .detail-quote.ouch .detail-react-btn.voted {
            background: #f5ece8;
            border-color: var(--ouch);
            color: var(--ouch-text);
        }

        .detail-react-count {
            font-size: 12px;
            font-weight: 600;
            color: #888;
        }


        .detail-quote.ouch .detail-quote-text { color: var(--ouch-text, #7a6a5a); }
        .detail-quote.wow .detail-quote-text { color: var(--wow-text, #4a6a50); }

        /* quote row highlights when voted */
        .detail-quote.agreed { background: rgba(0,0,0,0.025); border-radius: 8px; }
        .detail-quote.agreed.ouch { background: rgba(212,168,154,0.1); }
        .detail-quote.agreed.wow { background: rgba(154,196,168,0.1); }

        /* more pips (remaining dots) */
        .detail-more {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 8px 0;
            cursor: pointer;
            transition: opacity 0.2s ease;
        }

        .detail-more:hover {
            opacity: 0.7;
        }

        .detail-more-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            opacity: 0.5;
        }

        .detail-more-dot.ouch { background: var(--ouch); }
        .detail-more-dot.wow { background: var(--wow); }

        .detail-more-text {
            font-size: 13px;
            color: #bbb;
            margin-left: 4px;
        }

        /* hidden quotes revealed by +more */
        .detail-extra-quotes {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .detail-extra-quotes.visible {
            max-height: 800px;
        }

        /* experiments section */
        .detail-experiments-heading {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #777;
            margin-top: 28px;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }

        .detail-experiments-info {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid #ccc;
            background: none;
            font-family: inherit;
            font-size: 11px;
            font-style: italic;
            color: #bbb;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            position: relative;
            flex-shrink: 0;
            padding: 0;
        }

        .detail-experiments-info:hover {
            border-color: #999;
            color: #777;
        }

        .detail-experiments-tip {
            display: none;
            position: absolute;
            left: 50%;
            top: 28px;
            transform: translateX(-50%);
            background: #444;
            color: #f5f5f4;
            font-size: 13px;
            font-weight: 400;
            font-style: normal;
            line-height: 1.45;
            padding: 10px 14px;
            border-radius: 8px;
            white-space: normal;
            width: 260px;
            z-index: 10;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .detail-experiments-info:hover .detail-experiments-tip,
        .detail-experiments-info:focus .detail-experiments-tip {
            display: block;
        }

        .detail-experiment {
            padding: 14px 18px;
            margin-bottom: 12px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--card);
            transition: all 0.25s ease;
        }

        .detail-experiment.tried {
            background: rgba(154,196,168,0.08);
            border-color: var(--wow);
        }

        .detail-experiment.tried .detail-experiment-text {
            color: #444;
        }

        .detail-experiment-text {
            font-size: 15px;
            line-height: 1.5;
            color: #444;
            margin-bottom: 4px;
        }

        .detail-exp-picks {
            display: inline-block;
            margin-left: 8px;
            font-size: 11px;
            color: #999;
            font-weight: 500;
        }

        .detail-experiment-example {
            font-size: 14px;
            font-style: italic;
            line-height: 1.5;
            color: #999;
        }

        .detail-try-btn {
            display: none;
            margin-top: 10px;
            padding: 6px 18px;
            border-radius: 16px;
            border: 1px solid var(--border);
            background: #f5f5f3;
            color: #888;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s ease;
        }

        .detail-experiment.selected .detail-try-btn {
            display: inline-block;
        }

        .detail-try-btn:hover {
            border-color: var(--wow);
            color: #4a6a50;
            background: #e8f5ec;
        }

        .detail-try-btn.committed {
            border-color: var(--wow);
            background: var(--wow);
            color: white;
            pointer-events: none;
        }

        /* wows we might hear */
        .detail-wows {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #f0f0ee;
            animation: fadeUp 0.25s ease;
        }

        .detail-wows-label {
            font-size: 12px;
            font-weight: 500;
            color: var(--wow-dark, #507a58);
            margin-bottom: 6px;
            letter-spacing: 0.03em;
        }

        .detail-wow-item {
            font-size: 14px;
            font-style: italic;
            line-height: 1.5;
            color: var(--wow-text, #4a6a50);
            padding: 3px 0 3px 12px;
            margin-bottom: 4px;
            position: relative;
        }

        .detail-wow-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            border-radius: 2px;
            background: var(--wow);
            opacity: 0.4;
        }

        /* your idea input */
        .detail-your-idea {
            margin-top: 4px;
        }

        .detail-your-idea-input {
            width: 100%;
            padding: 12px 18px;
            border-radius: 10px;
            border: 1px dashed #ddd;
            background: transparent;
            font-family: inherit;
            font-size: 15px;
            color: #444;
            outline: none;
            transition: border-color 0.2s ease, background 0.2s ease;
        }

        .detail-your-idea-input::placeholder {
            color: #ccc;
        }

        .detail-your-idea-input:focus {
            border-color: #bbb;
            border-style: solid;
            background: var(--card);
        }

        /* 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;
        }

/* ─────────────────────────────────────────────────────────────────────────────
   DATA PILL — mode indicator + stats (moved from inline style in index.html)
   ───────────────────────────────────────────────────────────────────────────── */

/* Mode toggle styles - deprecated, keeping for reference */
.lab-mode-toggle.demo .ctrl-icon { color: #a89a7a; }
.lab-mode-toggle.live .ctrl-icon { color: #7eb5a6; }

/* Data pill - integrated mode + stats */
.data-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.data-pill.live {
    background: rgba(100, 180, 160, 0.25);
    border: 1px solid rgba(100, 180, 160, 0.5);
    box-shadow: 0 0 8px rgba(100, 180, 160, 0.2);
}
.data-pill.demo {
    background: rgba(180, 140, 80, 0.2);
    border: 1px solid rgba(180, 140, 80, 0.4);
}
.data-pill:hover {
    transform: scale(1.02);
}
.data-pill.live:hover {
    box-shadow: 0 0 12px rgba(100, 180, 160, 0.35);
}

.data-pill-mode {
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    font-size: 10px;
}
.data-pill.live .data-pill-mode {
    color: #fff;
    background: rgba(80, 160, 140, 0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.data-pill.demo .data-pill-mode {
    color: #fff;
    background: rgba(160, 120, 60, 0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.data-pill-mode:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.data-pill-stats {
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-weight: 400;
}
.data-pill.live .data-pill-stats { color: rgba(150, 210, 190, 0.9); }
.data-pill.demo .data-pill-stats { color: rgba(200, 170, 120, 0.9); }

/* Subtle pulse for live mode */
@keyframes livePulse {
    0%, 100% { box-shadow: 0 0 8px rgba(100, 180, 160, 0.2); }
    50% { box-shadow: 0 0 12px rgba(100, 180, 160, 0.4); }
}
.data-pill.live {
    animation: livePulse 3s ease-in-out infinite;
}

/* Hide old status badge */
.realtime-status { display: none; }

/* Mode toast styles are in core--styles.css */

/* ═══════════════════════════════════════════════════════════════════════════════
   FACILITATOR SUMMARY — what the room is landing on
   ═══════════════════════════════════════════════════════════════════════════════ */

.summary-screen {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 24px 120px;
    overflow-y: auto;
    background: var(--bg);
}

.summary-header {
    text-align: center;
    margin-bottom: 36px;
}

.summary-title {
    font-size: 20px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
}

.summary-subtitle {
    font-size: 13px;
    color: #999;
    letter-spacing: 0.3px;
}

.summary-tabs {
    display: flex;
    gap: 0;
    width: 100%;
    max-width: 560px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.summary-tab {
    flex: 1;
    padding: 10px 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #aaa;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.summary-tab:hover {
    color: #666;
}

.summary-tab.active {
    color: #444;
    border-bottom-color: #444;
}

.summary-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #eee;
    font-size: 12px;
    font-weight: 600;
    color: #888;
}

.summary-tab.active .summary-tab-count {
    background: #e8f5ec;
    color: #4a6a50;
}

.summary-body {
    width: 100%;
    max-width: 560px;
}

/* ── quotes ── */

.summary-quote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--card);
    transition: all 0.3s ease;
}

.summary-quote-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.summary-quote-dot.ouch { background: var(--ouch); }
.summary-quote-dot.wow { background: var(--wow); }

.summary-quote-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
    color: #444;
}

.summary-quote.ouch .summary-quote-text { color: #6a5040; }
.summary-quote.wow .summary-quote-text { color: #3a5a40; }

.summary-bump-count {
    flex-shrink: 0;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 0 8px;
    background: #e8f5ec;
    font-size: 13px;
    font-weight: 600;
    color: #4a6a50;
    transition: all 0.3s ease;
}

.summary-quote.ouch .summary-bump-count {
    background: #f5ebe8;
    color: #7a5a4a;
}

/* ── experiments ── */

.summary-experiment {
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.summary-experiment.wow-exp {
}

.summary-exp-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.summary-exp-marker {
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 2px;
    opacity: 0.6;
}

.summary-exp-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
    color: #444;
}

.summary-exp-wows {
    margin-top: 8px;
    padding-left: 24px;
}

.summary-exp-wow {
    font-size: 13px;
    line-height: 1.5;
    color: #7a9a80;
    font-style: italic;
}

/* ── I'd try this button ── */

.summary-try-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid var(--wow);
    background: none;
    color: var(--wow);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.summary-try-btn:hover {
    background: var(--wow);
    color: white;
}

/* ── pulse animation for new arrivals ── */

@keyframes summaryPulse {
    0% { background: var(--card); }
    30% { background: #faf6f0; }
    100% { background: var(--card); }
}

.summary-pulse {
    animation: summaryPulse 0.6s ease;
}

.summary-quote.wow.summary-pulse,
.summary-experiment.wow-exp.summary-pulse {
    animation-name: summaryPulseWow;
}

@keyframes summaryPulseWow {
    0% { background: var(--card); }
    30% { background: #f0faf4; }
    100% { background: var(--card); }
}

/* ── waiting state ── */

.summary-waiting {
    text-align: center;
    padding: 60px 0;
    color: #ccc;
    font-size: 15px;
}

/* ── "share with the room" button on watch screen ── */

.summary-share-btn {
    margin-top: 16px;
    padding: 10px 28px;
    border-radius: 24px;
    border: none;
    background: #444;
    color: white;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.summary-share-btn:hover {
    background: #333;
}

/* ── ephemeral notice ── */

.summary-ephemeral {
    text-align: center;
    padding: 40px 0 20px;
    color: #ccc;
    font-size: 13px;
    font-style: italic;
}


@keyframes summaryFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}