/* ═══════════════════════════════════════════════════════════════════════════════
   LOOM--STYLES.CSS — the tools you turn
   
   moment: lab mode only
   the feel: a mixing board — adjust the room while you watch
   
   ─────────────────────────────────────────────────────────────────────────────
   WHAT I HOLD
   ─────────────────────────────────────────────────────────────────────────────
   
   - journey rail (numbered steps)
   - role controls (teacher/student toggle)
   - lab controls (people, demeanor, signals)
   - data panels (API thread, protocol, notes)
   - debug tools (element picker, inline notes)
   - everything scoped to .lab-mode
   
   ─────────────────────────────────────────────────────────────────────────────
   WHAT I PROTECT
   ─────────────────────────────────────────────────────────────────────────────
   
   - lab tools don't leak into user experience
   - controls are direct and visible
   - the feel of building, not just using
   
   ─────────────────────────────────────────────────────────────────────────────
   HOW I WORK
   ─────────────────────────────────────────────────────────────────────────────
   
   Everything here is scoped to body.lab-mode
   When lab mode is off, none of this applies.
   I load after styles-core.css and override as needed.
   
   ─────────────────────────────────────────────────────────────────────────────
   
   I need:
     core--styles.css loaded first (tokens, reset, base styles)
   
   I provide:
     everything Sam sees when building
     
   Load order:
     core--styles.css → loom--styles.css
     
═══════════════════════════════════════════════════════════════════════════════ */

        /* ============ LAB MODE ============ */
        
        /* Hide lab signals by default */
        .lab-signals { 
            display: none;
            pointer-events: none;
        }
        
        /* Show signals on collect phase */
        body.lab-mode .lab-sliders { display: flex; pointer-events: auto; }
        
        /* Signals only on collect phase */
        body.lab-mode[data-lab-phase="collect"] .lab-signals { display: flex; pointer-events: auto; }
        
        /* Logo gradient when active — only affects "ouch wow lab" text, not children */
        .unified-header .logo { cursor: pointer; transition: all 0.3s; }
        body.lab-mode .unified-header .logo {
            background: linear-gradient(135deg, var(--ouch) 0%, var(--wow) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Reset text-fill for version badge so it's visible */
        body.lab-mode .unified-header .logo .version-badge {
            -webkit-text-fill-color: initial;
            background: linear-gradient(135deg, var(--bg-ouch) 0%, var(--bg-wow) 100%);
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }
        
        /* ============ LAB MODE - MINIMAL OVERLAY ============ */
        
        /* Hide lab elements by default */
        .lab-journey-rail, .lab-role-badge, .lab-role-modal, .lab-feedback-float {
            display: none;
            pointer-events: none;
        }
        
        /* Show when lab mode active */
        body.lab-mode .lab-journey-rail { display: flex; pointer-events: auto; }
        body.lab-mode .lab-role-badge { display: flex; pointer-events: auto; }
        body.lab-mode .lab-feedback-float { display: flex; pointer-events: auto; }
        
        /* Highlight interactive elements in lab mode */
        body.lab-mode .people-group {
            position: relative;
        }
        
        body.lab-mode .people-group::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 1px dashed rgba(154, 196, 168, 0.3);
            border-radius: 8px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        body.lab-mode .people-group:hover::after {
            opacity: 1;
        }
        
        body.lab-mode .segments {
            position: relative;
        }
        
        body.lab-mode .segments::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 1px dashed rgba(127, 168, 201, 0.3);
            border-radius: 4px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        body.lab-mode .segments:hover::after {
            opacity: 1;
        }
        
        /* ============ JOURNEY RAIL (numbered steps that drive the story) ============ */
        /* Default: Left sidebar journey rail */
        .lab-journey-rail {
            position: fixed;
            left: 12px;
            top: 56px;
            bottom: 70px;
            width: auto;
            min-width: 200px;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            z-index: 1001;
            padding: 16px 12px;
            display: none;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(12px);
            border-radius: 16px;
            border: 1px solid var(--border);
            box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        }
        
        body.lab-mode .lab-journey-rail {
            display: flex;
        }
        
        body.lab-mode .lab-journey-rail.hidden {
            display: none;
        }
        
        .journey-close {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 24px;
            height: 24px;
            background: none;
            border: none;
            font-size: 18px;
            color: #999;
            cursor: pointer;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            z-index: 1;
        }
        
        .journey-close:hover {
            background: #f0f0f0;
            color: #666;
        }
        
        .journey-line {
            position: absolute;
            left: 32px;
            top: 50px;
            bottom: 70px;
            width: 2px;
            background: linear-gradient(to bottom, 
                rgba(154, 196, 168, 0.4) 0%,
                rgba(154, 196, 168, 0.2) 50%,
                rgba(184, 160, 96, 0.2) 80%,
                rgba(184, 160, 96, 0.1) 100%
            );
            border-radius: 1px;
        }
        
        .journey-section {
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
            padding-top: 24px;
        }
        
        .journey-section:first-child {
            padding-top: 4px;
        }
        
        /* Section labels */
        .journey-section::before {
            content: attr(data-label);
            display: block;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-lighter);
            padding: 0 8px 6px 8px;
            margin-left: 34px;
        }
        
        .journey-section:first-child::before {
            padding-top: 0;
        }
        
        .journey-step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 40px 10px 10px;  /* extra right padding for thread badge */
            border: none;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            min-height: 48px;
        }
        
        .journey-step:hover {
            background: rgba(154, 196, 168, 0.1);
            border-radius: 10px;
        }
        
        .journey-step:hover .journey-step-name {
            color: var(--text);
        }
        
        .journey-step:hover .journey-step-dot {
            transform: scale(1.15);
            border-color: var(--wow);
        }
        
        .journey-step-dot {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 2px solid rgba(154, 196, 168, 0.4);
            background: var(--card);
            transition: all 0.2s;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .journey-step.active .journey-step-dot {
            border-color: var(--wow);
            background: var(--wow);
            box-shadow: 0 0 14px rgba(154, 196, 168, 0.5);
        }
        
        .journey-step.past .journey-step-dot {
            border-color: var(--wow);
            background: rgba(154, 196, 168, 0.3);
        }
        
        .journey-step-num {
            position: absolute;
            left: 10px;
            width: 26px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: rgba(154, 196, 168, 0.6);
            font-family: inherit;
            pointer-events: none;
        }
        
        .journey-step.active .journey-step-num {
            color: white;
        }
        
        .journey-step.past .journey-step-num {
            color: var(--wow);
        }
        
        .journey-step-name {
            font-size: 15px;
            color: var(--text-light);
            font-family: inherit;
            transition: color 0.2s;
            margin-left: 4px;
            font-weight: 500;
        }
        
        .journey-step.active .journey-step-name {
            color: var(--wow-dark);
            font-weight: 600;
        }
        
        .journey-step.past .journey-step-name {
            color: var(--text-lighter);
        }
        
        .journey-step-status {
            font-size: 11px;
            margin-left: auto;
            padding-left: 8px;
            opacity: 0.6;
        }
        
        .journey-step:hover .journey-step-status {
            opacity: 1;
        }
        
        .journey-step-status[data-status="verified"] { color: var(--wow); opacity: 1; }
        .journey-step-status[data-status="partial"] { color: var(--gold); opacity: 1; }
        .journey-step-status[data-status="untested"] { color: var(--text-lighter); }
        
        /* Thread badge on journey steps */
        .journey-step-threads {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            border-radius: 10px;
            background: #7c3aed;
            color: white;
            font-size: 11px;
            font-weight: 600;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .journey-step-threads.has-threads {
            display: flex;
        }
        
        .journey-step-threads.needs-attention {
            background: var(--ouch);
            animation: threadBadgePulse 2s ease-in-out infinite;
        }
        
        @keyframes threadBadgePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(232, 180, 188, 0.4); }
            50% { box-shadow: 0 0 0 4px rgba(232, 180, 188, 0); }
        }
        
        .journey-step-signals {
            display: none;
        }
        
        .journey-step.not-in-flow {
            opacity: 0.25;
            pointer-events: none;
        }
        
        .journey-step.not-in-flow .journey-step-dot {
            border-style: dotted;
        }
        
        /* ═══ EXPERIMENT EXPLORATION CALLOUT ═══ */
        /* Beautiful card showing the journey: being → note → refinement → experiment */
        
        .exp-callout {
            position: fixed;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 0;
            width: 380px;
            max-width: calc(100vw - 220px);
            max-height: calc(100vh - 120px);
            overflow-y: auto;
            box-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
            z-index: 2000;
            opacity: 0;
            transform: translateX(-10px) scale(0.98);
            transition: all 0.2s ease-out;
        }
        
        .exp-callout.open {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
        
        .exp-callout-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            background: linear-gradient(135deg, rgba(184, 160, 96, 0.08) 0%, transparent 100%);
        }
        
        .exp-callout-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .exp-callout-title::before {
            content: '◇';
            color: var(--gold);
        }
        
        .exp-callout-close {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-lighter);
            cursor: pointer;
            padding: 4px;
            line-height: 1;
            border-radius: 50%;
            transition: all 0.15s;
        }
        
        .exp-callout-close:hover {
            color: var(--text);
            background: var(--bg);
        }
        
        .exp-callout-empty {
            padding: 40px 20px;
            text-align: center;
            color: var(--text-light);
            font-size: 14px;
        }
        
        .exp-callout-empty-icon {
            font-size: 32px;
            margin-bottom: 12px;
            opacity: 0.4;
        }
        
        /* Single experiment card with origin path */
        .exp-card {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .exp-card:last-child {
            border-bottom: none;
        }
        
        .exp-card.active {
            background: linear-gradient(135deg, rgba(154, 196, 168, 0.08) 0%, transparent 100%);
        }
        
        /* The origin path: being → note → refinement → experiment */
        .exp-origin-path {
            margin-bottom: 16px;
        }
        
        .exp-path-step {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 8px 0;
            position: relative;
        }
        
        .exp-path-step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 11px;
            top: 28px;
            bottom: -8px;
            width: 2px;
            background: linear-gradient(to bottom, var(--border) 0%, var(--border) 50%, transparent 100%);
        }
        
        .exp-path-dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--bg);
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        
        .exp-path-step.being .exp-path-dot {
            background: linear-gradient(135deg, var(--bg-ouch) 0%, var(--bg-wow) 100%);
            border-color: var(--gold);
            color: var(--gold);
        }
        
        .exp-path-step.note .exp-path-dot {
            background: var(--bg);
            border-color: var(--text-lighter);
            color: var(--text-light);
        }
        
        .exp-path-step.refinement .exp-path-dot {
            background: rgba(127, 168, 201, 0.15);
            border-color: var(--timer);
            color: var(--timer);
        }
        
        .exp-path-step.experiment .exp-path-dot {
            background: var(--wow);
            border-color: var(--wow);
            color: white;
        }
        
        .exp-path-content {
            flex: 1;
            min-width: 0;
        }
        
        .exp-path-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-lighter);
            margin-bottom: 2px;
        }
        
        .exp-path-text {
            font-size: 13px;
            color: var(--text);
            line-height: 1.4;
        }
        
        .exp-path-text.quote {
            font-style: italic;
            color: var(--text-mid);
        }
        
        .exp-path-text.quote::before,
        .exp-path-text.quote::after {
            content: '"';
            color: var(--text-lighter);
        }
        
        /* Expandable path steps */
        .exp-path-step.collapsed .exp-path-content {
            display: none;
        }
        
        .exp-path-step.collapsed .exp-path-dot {
            cursor: pointer;
            opacity: 0.6;
        }
        
        .exp-path-step.collapsed .exp-path-dot:hover {
            opacity: 1;
        }
        
        .exp-path-expand {
            font-size: 10px;
            color: var(--text-lighter);
            margin-left: auto;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.15s;
        }
        
        .exp-path-expand:hover {
            background: var(--bg);
            color: var(--text-light);
        }
        
        /* The experiment itself (highlighted) */
        .exp-main {
            background: var(--bg);
            border-radius: 12px;
            padding: 16px;
            margin-top: 12px;
        }
        
        .exp-main-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .exp-main-title .exp-status {
            font-size: 10px;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 10px;
            background: var(--gold);
            color: white;
        }
        
        .exp-main-title .exp-status.on {
            background: var(--wow);
        }
        
        .exp-main-title .exp-status.shipped {
            background: var(--text-light);
        }
        
        .exp-main-desc {
            font-size: 13px;
            color: var(--text-light);
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        /* Action buttons */
        .exp-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }
        
        .exp-action-btn {
            padding: 8px 16px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: white;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-mid);
        }
        
        .exp-action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .exp-action-btn.approve {
            background: var(--wow);
            border-color: var(--wow);
            color: white;
        }
        
        .exp-action-btn.approve:hover {
            background: var(--wow-dark);
            border-color: var(--wow-dark);
        }
        
        .exp-action-btn.reject {
            color: var(--ouch-dark);
            border-color: var(--ouch);
        }
        
        .exp-action-btn.reject:hover {
            background: var(--ouch);
            color: white;
        }
        
        .exp-action-btn.chat {
            color: var(--text-light);
        }
        
        .exp-action-btn.chat:hover {
            background: var(--bg);
            border-color: var(--text-lighter);
        }
        
        /* Legacy step-exp-panel styles (keeping for backward compat) */
        .step-exp-panel {
            position: fixed;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0;
            min-width: 280px;
            max-width: 320px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            z-index: 2000;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.15s ease-out;
        }
        
        .step-exp-panel.open {
            opacity: 1;
            transform: translateX(0);
        }
        
        .step-exp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .step-exp-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text);
        }
        
        .step-exp-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-lighter);
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        
        .step-exp-close:hover {
            color: var(--text);
        }
        
        .step-exp-list {
            padding: 8px;
        }
        
        .step-exp-item {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 6px;
            background: var(--bg);
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }
        
        .step-exp-item:last-child {
            margin-bottom: 0;
        }
        
        .step-exp-item.active {
            background: linear-gradient(135deg, rgba(154, 196, 168, 0.15) 0%, rgba(154, 196, 168, 0.05) 100%);
            border-left: 3px solid var(--wow);
        }
        
        .step-exp-main {
            flex: 1;
            min-width: 0;
        }
        
        .step-exp-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
        }
        
        .step-exp-problem {
            font-size: 12px;
            color: var(--text-light);
            line-height: 1.4;
        }
        
        .step-exp-actions {
            display: flex;
            gap: 4px;
            flex-shrink: 0;
        }
        
        .step-exp-btn {
            width: 28px;
            height: 28px;
            border: 1px solid var(--border);
            border-radius: 50%;
            background: white;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
            color: var(--text-light);
        }
        
        .step-exp-btn:hover {
            transform: scale(1.1);
        }
        
        .step-exp-btn.accept:hover,
        .step-exp-btn.accept.current { 
            background: var(--wow); 
            border-color: var(--wow); 
            color: white; 
        }
        
        .step-exp-btn.reject:hover,
        .step-exp-btn.reject.current { 
            background: var(--ouch); 
            border-color: var(--ouch); 
            color: white; 
        }
        
        .step-exp-btn.chat:hover { 
            background: var(--bg); 
            border-color: var(--text-light); 
        }
        
        /* ═══ NEW CHANGE TOAST ═══ */
        .new-change-toast {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: var(--wow);
            color: white;
            padding: 16px 20px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 8px 32px rgba(154, 196, 168, 0.4);
            z-index: 3000;
            opacity: 0;
            transition: all 0.2s ease-out;
        }
        
        .new-change-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        .new-change-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        
        .new-change-text {
            flex: 1;
        }
        
        .new-change-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .new-change-name {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .new-change-dismiss {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.15s;
        }
        
        .new-change-dismiss:hover {
            background: rgba(255,255,255,0.3);
        }
        
        /* Alt path (vote) styling */        .signal-btn.chat:hover {
            background: var(--bg);
        }
        
        /* Alt path (vote) styling */
        .journey-section[data-flow="vote"] {
            margin-top: 4px;
            padding-top: 4px;
        }
        
        .journey-section[data-flow="vote"]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 8px;
            right: 8px;
            height: 1px;
            background: linear-gradient(to right, rgba(184, 160, 96, 0.3), transparent);
        }
        
        .journey-section[data-flow="vote"] .journey-step-dot {
            border-color: rgba(184, 160, 96, 0.4);
        }
        
        .journey-section[data-flow="vote"] .journey-step-num {
            color: rgba(184, 160, 96, 0.6);
        }
        
        .journey-section[data-flow="vote"] .journey-step.active .journey-step-dot {
            border-color: var(--gold);
            background: var(--gold);
            box-shadow: 0 0 12px rgba(184, 160, 96, 0.5);
        }
        
        .journey-section[data-flow="vote"] .journey-step.active .journey-step-num {
            color: white;
        }
        
        .journey-section[data-flow="vote"] .journey-step.active .journey-step-name {
            color: var(--gold);
        }
        
        .journey-section[data-flow="vote"] .journey-step.past .journey-step-dot {
            border-color: var(--gold);
            background: rgba(184, 160, 96, 0.2);
        }
        
        .journey-section[data-flow="vote"] .journey-step.past .journey-step-num {
            color: var(--gold);
        }
        
        .journey-section[data-flow="vote"] .journey-step:hover .journey-step-dot {
            border-color: var(--gold);
        }
        
        /* ============ ROLE BADGE ============ */
        .lab-role-badge {
            position: fixed;
            top: 12px;
            left: 120px;
            background: var(--card);
            padding: 6px 14px;
            border-radius: 16px;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            border: 1px solid var(--border);
            transition: all 0.2s;
            z-index: 1002;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
            display: none;
        }
        
        body.lab-mode .lab-role-badge {
            display: flex;
        }
        
        .lab-role-badge:hover {
            border-color: #ccc;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .role-badge-who {
            font-size: 12px;
            font-weight: 500;
            color: var(--text);
        }
        
        .role-badge-sep {
            color: var(--text-lighter);
            font-size: 10px;
        }
        
        .role-badge-contract {
            font-size: 11px;
            color: var(--wow-dark);
            cursor: pointer;
        }
        
        .role-badge-contract:hover {
            text-decoration: underline;
        }
        
        .role-badge-toggle {
            padding: 4px 10px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: transparent;
            color: var(--text-light);
            font-size: 11px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .role-badge-toggle:hover {
            border-color: #ccc;
            color: var(--text);
        }
        
        .role-badge-toggle.active {
            background: rgba(154, 196, 168, 0.15);
            border-color: var(--wow);
            color: var(--wow-dark);
        }
        
        /* ============ ROLE MODAL ============ */
        .lab-role-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.3);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        
        .lab-role-modal.show {
            display: flex;
            pointer-events: auto;
        }
        
        .role-modal-content {
            background: var(--card);
            border-radius: 20px;
            padding: 24px;
            width: 300px;
            border: 1px solid var(--border);
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }
        
        .role-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            color: var(--text);
            font-size: 16px;
            font-weight: 500;
        }
        
        .role-modal-close {
            background: none;
            border: none;
            color: var(--text-lighter);
            font-size: 24px;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        
        .role-modal-close:hover { color: var(--text-light); }
        
        .role-modal-warning {
            background: rgba(212, 168, 154, 0.1);
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 12px;
            color: var(--ouch-dark);
            margin-bottom: 20px;
        }
        
        .role-modal-section {
            margin-bottom: 16px;
        }
        
        .role-modal-label {
            font-size: 10px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        
        .role-modal-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .role-modal-btn {
            padding: 8px 14px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg);
            color: var(--text-light);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .role-modal-btn:hover {
            background: var(--card);
            border-color: #ccc;
            color: var(--text);
        }
        
        .role-modal-btn.selected {
            background: rgba(154, 196, 168, 0.15);
            border-color: var(--wow);
            color: var(--wow-dark);
        }
        
        .role-modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        .role-modal-cancel {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: transparent;
            color: var(--text-light);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
        }
        
        .role-modal-cancel:hover {
            background: var(--bg);
        }
        
        .role-modal-apply {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 10px;
            background: var(--wow);
            color: #fff;
            font-size: 13px;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
        }
        
        .role-modal-apply:hover {
            background: var(--wow-dark);
        }
        
        /* Role badge - add contract display */
        .role-badge-contract {
            font-size: 10px;
            color: var(--wow);
        }
        
        /* ============ LAB CONTROLS (consolidated menu above logo) ============ */
        .lab-controls {
            position: fixed;
            bottom: 52px;
            left: 12px;
            background: var(--card);
            padding: 6px 10px;
            border-radius: 12px;
            border: 1px solid var(--border);
            z-index: 1001;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            display: none;
            align-items: center;
            gap: 6px;
        }
        
        body.lab-mode .lab-controls {
            display: flex;
        }
        
        .lab-ctrl-btn {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 8px;
            background: var(--bg);
            color: var(--text-light);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .lab-ctrl-btn:hover {
            background: var(--border);
            color: var(--text);
        }
        
        .lab-ctrl-btn.active {
            background: var(--wow);
            color: white;
        }
        
        .ctrl-icon {
            font-size: 13px;
        }
        
        .ctrl-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 16px;
            height: 16px;
            background: var(--wow);
            color: white;
            font-size: 10px;
            font-weight: 600;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        
        .ctrl-badge:empty,
        .ctrl-badge[data-count="0"] {
            display: none;
        }
        
        .lab-ctrl-divider {
            width: 1px;
            height: 20px;
            background: var(--border);
            margin: 0 4px;
        }
        
        .realtime-status {
            font-family: monospace;
            font-size: 10px;
            color: var(--text-lighter);
            padding: 0 6px;
            cursor: default;
        }
        
        .realtime-status.live {
            color: var(--wow-dark);
        }
        
        .realtime-status.error {
            color: var(--ouch-dark);
        }
        
        /* ============ PIPE ACTIVITY — sparkline + last event ============ */
        
        .data-mode-toggle {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 4px 10px;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            color: var(--text-mid);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .data-mode-toggle:hover {
            border-color: var(--text-lighter);
            color: var(--text);
        }
        
        .data-mode-toggle.demo {
            background: rgba(184, 160, 96, 0.1);
            border-color: var(--wow);
            color: var(--wow-dark);
        }
        
        .pipe-activity {
            display: flex;
            align-items: center;
            padding: 4px 8px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            margin-left: 6px;
            transition: all 0.2s;
            font: inherit;
        }
        
        .pipe-activity:hover {
            border-color: var(--text-lighter);
            background: var(--card);
        }
        
        .pipe-sparkline {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 16px;
        }
        
        .pipe-sparkline .bar {
            width: 4px;
            background: #6b9fff;
            border-radius: 1px;
            transition: height 0.2s ease-out;
            min-height: 2px;
        }
        
        .pipe-sparkline .bar.empty {
            background: var(--border);
            height: 2px;
        }
        
        .pipe-sparkline .bar.pulse {
            animation: bar-pulse 0.15s ease-out;
        }
        
        .pipe-sparkline .bar.ouch {
            background: var(--ouch);
        }
        
        .pipe-sparkline .bar.wow {
            background: var(--wow);
        }
        
        @keyframes bar-pulse {
            0% { transform: scaleY(1.3); filter: brightness(1.3); }
            100% { transform: scaleY(1); filter: brightness(1); }
        }
        
        /* ============ DATA MODEL PANEL ============ */
        .debug-console {
            display: none;
            position: fixed;
            top: 60px;
            right: 12px;
            width: 320px;
            max-width: 320px;
            max-height: calc(100vh - 120px);
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-family: 'DM Sans', system-ui, sans-serif;
            font-size: 11px;
            color: var(--text);
            z-index: 1002;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            contain: layout;
            box-sizing: border-box;
        }
        
        .debug-console * {
            box-sizing: border-box;
        }
        
        /* Show with .visible (global shortcut) or .show (lab mode button) */
        .debug-console.visible { display: block; }
        body.lab-mode .debug-console.show { display: block; }
        
        .debug-console-header {
            padding: 12px 14px;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .debug-console-header span {
            font-weight: 500;
            color: var(--text-mid);
            font-size: 12px;
        }
        
        .debug-console-close {
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            font-size: 16px;
            padding: 0 4px;
        }
        
        .debug-console-close:hover {
            color: var(--text);
        }
        
        .debug-console-body {
            padding: 0;
            max-height: calc(100vh - 180px);
            overflow-y: auto;
            overflow-x: hidden;
            word-break: break-word;
        }
        
        .debug-section-header {
            padding: 10px 14px;
            background: var(--bg);
            color: var(--text-mid);
            font-weight: 500;
            font-size: 11px;
            border-bottom: 1px solid var(--border);
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .debug-section-header .mode-tag {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
        }
        
        .debug-section-header .mode-tag.demo {
            background: var(--bg-ouch);
            color: var(--ouch-dark);
        }
        
        .debug-section-header .mode-tag.live {
            background: var(--bg-wow);
            color: var(--wow-dark);
        }
        
        /* Dataset rows */
        .dataset-row {
            border-bottom: 1px solid var(--border);
        }
        
        .dataset-row.expanded {
            background: var(--bg);
        }
        
        .dataset-header {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .dataset-header:hover {
            background: var(--bg);
        }
        
        .dataset-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .dataset-status.wired {
            background: var(--wow);
            box-shadow: 0 0 6px var(--wow);
            animation: status-pulse 2s ease-in-out infinite;
        }
        
        @keyframes status-pulse {
            0%, 100% { box-shadow: 0 0 4px var(--wow); }
            50% { box-shadow: 0 0 10px var(--wow); }
        }
        
        .dataset-status.stubbed {
            background: var(--ouch);
            opacity: 0.5;
        }
        
        .dataset-name {
            flex: 1;
            font-weight: 500;
            color: var(--text);
        }
        
        .dataset-value {
            font-family: monospace;
            font-size: 11px;
            color: var(--text-mid);
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .dataset-arrow {
            color: var(--text-lighter);
            font-size: 10px;
            transition: transform 0.2s;
        }
        
        .dataset-row.expanded .dataset-arrow {
            transform: rotate(90deg);
        }
        
        /* Expanded detail */
        .dataset-detail {
            display: none;
            padding: 0 14px 12px 32px;
            font-size: 10px;
        }
        
        .dataset-row.expanded .dataset-detail {
            display: block;
        }
        
        .dataset-detail-row {
            display: flex;
            justify-content: space-between;
            padding: 4px 0;
            border-bottom: 1px dashed var(--border);
        }
        
        .dataset-detail-row:last-child {
            border-bottom: none;
        }
        
        .dataset-detail-label {
            color: var(--text-light);
        }
        
        .dataset-detail-value {
            font-family: monospace;
            color: var(--text-mid);
            max-width: 160px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .dataset-detail-value.demo {
            color: var(--text-light);
        }
        
        .dataset-detail-value.live {
            color: var(--wow-dark);
        }
        
        .dataset-detail-value.active {
            font-weight: 600;
            position: relative;
        }
        
        .dataset-detail-value.active::before {
            content: '→';
            position: absolute;
            left: -14px;
            color: var(--wow-dark);
        }
        
        .dataset-path {
            font-family: monospace;
            font-size: 9px;
            color: var(--text-lighter);
            margin-top: 2px;
        }
        
        /* Live data stream */
        .dataset-stream {
            margin-top: 8px;
            padding: 8px;
            background: rgba(0,0,0,0.03);
            border-radius: 6px;
            font-family: monospace;
            font-size: 9px;
            max-height: 80px;
            overflow-y: auto;
        }
        
        .stream-entry {
            padding: 2px 0;
            color: var(--text-light);
            display: flex;
            gap: 8px;
        }
        
        .stream-entry .stream-time {
            color: var(--text-lighter);
            flex-shrink: 0;
        }
        
        .stream-entry .stream-value {
            color: var(--wow-dark);
        }
        
        .stream-entry.stale .stream-value {
            color: var(--text-lighter);
        }
        
        /* Live dots table */
        .live-dots-list {
            padding: 8px 14px;
        }
        
        .live-dot-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            font-size: 10px;
        }
        
        .live-dot-row:last-child {
            border-bottom: none;
        }
        
        .live-dot-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        
        .live-dot-id {
            font-family: monospace;
            color: var(--text-light);
            flex: 1;
        }
        
        .live-dot-pos {
            font-family: monospace;
            color: var(--text-mid);
        }
        
        /* Data model tabs */
        .debug-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        
        .debug-tab {
            flex: 1;
            padding: 10px 14px;
            text-align: center;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-light);
            border-bottom: 2px solid transparent;
            transition: all 0.15s;
            position: relative;
            user-select: none; /* prevent text selection on click */
        }
        
        .debug-tab:hover {
            color: var(--text);
            background: var(--card);
        }
        
        .debug-tab.active {
            color: var(--text);
            border-bottom-color: var(--wow);
        }
        
        .debug-tab-badge {
            display: inline-block;
            min-width: 14px;
            height: 14px;
            font-size: 9px;
            font-weight: 600;
            line-height: 14px;
            padding: 0 4px;
            border-radius: 7px;
            margin-left: 4px;
            background: var(--text-lighter);
            color: white;
            pointer-events: none; /* clicks pass through to parent tab */
        }
        
        .debug-tab-badge.fresh {
            background: var(--wow);
            animation: badge-pulse 1s ease-out;
        }
        
        @keyframes badge-pulse {
            0% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        .debug-tab-content {
            display: none;
        }
        
        .debug-tab-content.active {
            display: block;
        }
        
        /* Events log styling */
        .event-log {
            /* no max-height here - parent handles scroll */
        }
        
        .event-row {
            padding: 8px 14px;
            border-bottom: 1px solid var(--border);
            font-family: monospace;
            font-size: 10px;
            cursor: pointer;
        }
        
        .event-row:hover {
            background: var(--bg);
        }
        
        .event-row.expanded {
            background: var(--bg);
        }
        
        .event-row.fresh {
            background: rgba(154, 196, 168, 0.1);
        }
        
        .event-header {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .event-dir {
            font-size: 12px;
            width: 20px;
            text-align: center;
        }
        
        .event-dir.outgoing { color: var(--ouch-dark); }
        .event-dir.incoming { color: var(--wow-dark); }
        
        .event-type {
            font-weight: 500;
            color: var(--text);
            flex: 1;
        }
        
        .event-time {
            color: var(--text-lighter);
            font-size: 9px;
        }
        
        .event-detail {
            display: none;
            margin-top: 8px;
            padding: 8px;
            background: rgba(0,0,0,0.03);
            border-radius: 6px;
            font-size: 9px;
            color: var(--text-mid);
            white-space: pre-wrap;
            word-break: break-all;
        }
        
        .event-row.expanded .event-detail {
            display: block;
        }
        
        .event-empty {
            padding: 24px 14px;
            text-align: center;
            color: var(--text-lighter);
            font-size: 11px;
        }
        
        .event-count {
            background: var(--bg);
            color: var(--text-light);
            font-size: 9px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 8px;
            min-width: 20px;
            text-align: center;
        }
        
        .event-row.fresh .event-count {
            background: var(--bg-wow);
            color: var(--wow-dark);
        }
        
        .event-structure {
            margin-bottom: 12px;
        }
        
        .event-structure-label,
        .event-instances-label {
            font-size: 9px;
            color: var(--text-lighter);
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .event-structure pre {
            margin: 0;
            padding: 8px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 9px;
            overflow-x: auto;
            max-height: 200px;
            overflow-y: auto;
            white-space: pre-wrap;
            word-break: break-word;
        }
        
        /* Structured data display */
        .event-data {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 6px 8px;
            font-size: 10px;
        }
        
        .event-data-row {
            display: flex;
            gap: 8px;
            padding: 3px 0;
            border-bottom: 1px dashed var(--border);
        }
        
        .event-data-row:last-child {
            border-bottom: none;
        }
        
        .event-data-key {
            color: var(--text-lighter);
            min-width: 70px;
            flex-shrink: 0;
        }
        
        .event-data-value {
            color: var(--text);
            word-break: break-word;
        }
        
        .event-data-value.highlight {
            color: var(--gold);
        }
        
        .event-data-value.ouch {
            color: var(--ouch);
        }
        
        .event-data-value.wow {
            color: var(--wow);
        }
        
        /* Pipeline sequence styling */
        .pipeline-step {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0;
        }
        
        .pipeline-step-num {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--border);
            color: var(--text);
            font-size: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .pipeline-step.active .pipeline-step-num {
            background: var(--gold);
            color: white;
        }
        
        .pipeline-step.done .pipeline-step-num {
            background: var(--wow);
            color: white;
        }
        
        .event-instances {
            border-top: 1px solid var(--border);
            padding-top: 8px;
        }
        
        .event-instance {
            display: flex;
            gap: 8px;
            padding: 3px 0;
            border-bottom: 1px dashed var(--border);
        }
        
        .event-instance:last-child {
            border-bottom: none;
        }
        
        .event-instance-time {
            color: var(--text-lighter);
            font-size: 9px;
            min-width: 24px;
        }
        
        .event-instance-detail {
            color: var(--text-mid);
            font-size: 9px;
            flex: 1;
        }
        
        /* Event catalog */
        .event-catalog {
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        
        .event-catalog-header {
            padding: 8px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 10px;
            font-weight: 500;
            color: var(--text-light);
        }
        
        .event-catalog-header:hover {
            color: var(--text);
        }
        
        .event-catalog-toggle {
            font-size: 8px;
            color: var(--text-lighter);
        }
        
        .event-catalog-body {
            display: none;
            padding: 0 14px 12px;
        }
        
        .event-catalog.expanded .event-catalog-body {
            display: block;
        }
        
        .event-catalog-section {
            margin-bottom: 8px;
        }
        
        .event-catalog-section:last-child {
            margin-bottom: 0;
        }
        
        .event-catalog-title {
            font-size: 9px;
            font-weight: 600;
            color: var(--text-mid);
            margin-bottom: 4px;
        }
        
        .event-catalog-item {
            font-size: 9px;
            color: var(--text-light);
            padding: 2px 0;
        }
        
        .event-catalog-item code {
            font-family: monospace;
            background: var(--card);
            padding: 1px 4px;
            border-radius: 3px;
            margin-right: 4px;
        }
        
        /* Local event direction styling */
        .event-dir.local { color: var(--gold); }
        
        /* Event section header */
        .event-section-header {
            padding: 8px 14px;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-light);
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* Flow-based event display */
        .event-flows {
            /* no max-height here - parent handles scroll */
        }
        
        .flow-row {
            padding: 10px 14px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }
        
        .flow-row:hover {
            background: var(--bg);
        }
        
        .flow-row.fresh {
            background: rgba(154, 196, 168, 0.08);
        }
        
        .flow-row.expanded {
            background: var(--bg);
        }
        
        .flow-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: monospace;
            font-size: 11px;
        }
        
        .flow-icon {
            font-size: 10px;
            width: 16px;
            text-align: center;
        }
        
        .flow-icon.ouch { color: var(--ouch); }
        .flow-icon.wow { color: var(--wow); }
        .flow-icon.blocked { color: var(--gold); }
        .flow-icon.pending { color: var(--text-light); }
        
        .flow-name {
            font-weight: 500;
            color: var(--text);
        }
        
        .flow-steps {
            font-size: 9px;
            color: var(--text-lighter);
            background: var(--card);
            padding: 2px 6px;
            border-radius: 8px;
        }
        
        .flow-duration {
            font-size: 9px;
            color: var(--text-lighter);
        }
        
        .flow-time {
            font-size: 9px;
            color: var(--text-lighter);
            margin-left: auto;
        }
        
        .flow-detail {
            display: none;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed var(--border);
        }
        
        .flow-row.expanded .flow-detail {
            display: block;
        }
        
        .flow-input {
            font-family: monospace;
            font-size: 10px;
            color: var(--text-mid);
            margin-bottom: 10px;
            padding: 6px 8px;
            background: var(--card);
            border-radius: 4px;
        }
        
        .flow-input-label {
            color: var(--text-lighter);
            margin-right: 6px;
        }
        
        .flow-input-text {
            color: var(--text);
        }
        
        .flow-steps-list {
            margin-left: 4px;
        }
        
        .flow-step {
            display: flex;
            gap: 8px;
            padding: 6px 0;
        }
        
        .flow-step-connector {
            font-family: monospace;
            color: var(--border);
            font-size: 12px;
            width: 12px;
            flex-shrink: 0;
        }
        
        .flow-step-content {
            flex: 1;
            min-width: 0;
        }
        
        .flow-step-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: monospace;
            font-size: 10px;
        }
        
        .flow-step-type {
            font-weight: 600;
            color: var(--text);
        }
        
        .flow-step-actor {
            color: var(--text-lighter);
            font-size: 9px;
        }
        
        .flow-step-time {
            color: var(--text-lighter);
            font-size: 9px;
            margin-left: auto;
        }
        
        .flow-step-detail {
            font-size: 9px;
            color: var(--text-mid);
            margin-top: 2px;
        }
        
        .flow-step-data {
            margin-top: 4px;
            padding: 4px 8px;
            background: var(--card);
            border-radius: 4px;
            font-size: 9px;
        }
        
        .flow-data-row {
            display: flex;
            gap: 6px;
            padding: 2px 0;
        }
        
        .flow-data-row .key {
            color: var(--text-lighter);
            min-width: 60px;
        }
        
        .flow-data-row .value {
            color: var(--text);
        }
        
        .flow-data-row .value.ouch { color: var(--ouch); }
        .flow-data-row .value.wow { color: var(--wow); }
        .flow-data-row .value.highlight { color: var(--gold); }
        
        .flow-result {
            margin-top: 10px;
            padding: 6px 8px;
            background: var(--card);
            border-radius: 4px;
            font-family: monospace;
            font-size: 10px;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .flow-result.ouch {
            border-left: 3px solid var(--ouch);
        }
        
        .flow-result.wow {
            border-left: 3px solid var(--wow);
        }
        
        .flow-result.blocked {
            border-left: 3px solid var(--gold);
        }
        
        .flow-result.pending {
            border-left: 3px solid var(--text-lighter);
        }
        
        .flow-result-pending {
            color: var(--text-light);
        }
        
        .flow-result-label {
            color: var(--text-lighter);
        }
        
        .flow-result-type {
            font-weight: 600;
        }
        
        .flow-result-type.ouch { color: var(--ouch); }
        .flow-result-type.wow { color: var(--wow); }
        
        .flow-result-id {
            color: var(--text-lighter);
            font-size: 9px;
        }
        
        .flow-result-blocked {
            color: var(--gold);
        }
        
        .flow-result-storage {
            color: var(--text-light);
            font-size: 9px;
        }

        /* Mode banner - shows SIMULATED or LIVE at top of screen */
        .mode-banner {
            display: none;
            position: fixed;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            padding: 4px 12px;
            border-radius: 12px;
            font-family: monospace;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 0.5px;
            z-index: 9999;
            pointer-events: none;
        }
        
        body.lab-mode .mode-banner { display: block; }
        
        .mode-banner.demo {
            background: rgba(0, 0, 0, 0.6);
            color: #888;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .mode-banner.live {
            background: rgba(74, 222, 128, 0.15);
            color: #4ade80;
            border: 1px solid rgba(74, 222, 128, 0.3);
        }
        
        /* Mode toast - wild and alive (toggles between demo/live) */
        .mode-toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: rgba(0, 0, 0, 0.9);
            color: #fff;
            padding: 24px 48px;
            border-radius: 16px;
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
            z-index: 9999;
        }
        .mode-toast.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .mode-toast.demo { 
            border: 3px solid #c9a855;
            background: rgba(40, 30, 10, 0.95);
        }
        .mode-toast.live { 
            border: 3px solid #5ec4a8;
            background: rgba(10, 40, 35, 0.95);
        }
        
        .mode-toast-word {
            font-size: 42px;
            font-weight: 800;
            letter-spacing: 2px;
            margin-bottom: 8px;
        }
        .mode-toast.demo .mode-toast-word { color: #e8c44a; }
        .mode-toast.live .mode-toast-word { color: #5ec4a8; }
        
        .mode-toast-sub {
            font-size: 14px;
            font-weight: 400;
            opacity: 0.7;
            letter-spacing: 1px;
        }
        
        /* Mode toast style variations */
        .mode-toast.style-big .mode-toast-word { font-size: 52px; }
        .mode-toast.style-huge .mode-toast-word { font-size: 64px; letter-spacing: 4px; }
        .mode-toast.style-tilt { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
        .mode-toast.style-tilt.show { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
        .mode-toast.style-lean { transform: translate(-50%, -50%) skewX(-5deg) scale(1); }
        .mode-toast.style-lean.show { transform: translate(-50%, -50%) skewX(-5deg) scale(1); }
        .mode-toast.style-heavy .mode-toast-word { font-weight: 900; letter-spacing: 4px; }
        .mode-toast.style-light .mode-toast-word { font-weight: 300; letter-spacing: 6px; }
        
        /* Mode toast animations */
        .mode-toast.anim-pop.show { animation: modeToastPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .mode-toast.anim-bounce.show { animation: modeToastBounce 0.5s ease-out; }
        .mode-toast.anim-slam.show { animation: modeToastSlam 0.25s ease-out; }
        .mode-toast.anim-wobble.show { animation: modeToastWobble 0.6s ease-out; }
        .mode-toast.anim-spring.show { animation: modeToastSpring 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
        
        @keyframes modeToastPop {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }
        @keyframes modeToastBounce {
            0% { transform: translate(-50%, -50%) scale(0.3); }
            50% { transform: translate(-50%, -50%) scale(1.1); }
            70% { transform: translate(-50%, -50%) scale(0.95); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }
        @keyframes modeToastSlam {
            0% { transform: translate(-50%, -100%) scale(1.2); opacity: 0; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }
        @keyframes modeToastWobble {
            0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.8); }
            25% { transform: translate(-50%, -50%) rotate(5deg) scale(1.05); }
            50% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
            75% { transform: translate(-50%, -50%) rotate(2deg) scale(1); }
            100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
        }
        @keyframes modeToastSpring {
            0% { transform: translate(-50%, -50%) scaleY(0.3) scaleX(1.2); }
            50% { transform: translate(-50%, -50%) scaleY(1.1) scaleX(0.9); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }
        
        /* Experiment master button */
        .lab-exp-master {
            position: relative;
        }
        
        .exp-master-count {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 16px;
            height: 16px;
            background: var(--gold);
            color: white;
            font-size: 10px;
            font-weight: 600;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }
        
        .exp-master-count[data-count="0"] {
            background: var(--text-lighter);
        }
        
        .lab-exp-master.has-testing .exp-master-count {
            background: var(--gold);
            animation: pulse-gold 2s infinite;
        }
        
        @keyframes pulse-gold {
            0%, 100% { box-shadow: 0 0 0 0 rgba(184, 160, 96, 0.4); }
            50% { box-shadow: 0 0 0 4px rgba(184, 160, 96, 0); }
        }
        
        .lab-ctrl-sep {
            width: 1px;
            height: 20px;
            background: var(--border);
            margin: 0 4px;
        }
        
        .lab-ctrl-status {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: var(--text-lighter);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .lab-ctrl-status:hover {
            background: var(--bg);
        }
        
        .lab-ctrl-status[data-status="untested"]:hover { color: var(--text-light); }
        .lab-ctrl-status[data-status="partial"]:hover { color: var(--gold); }
        .lab-ctrl-status[data-status="verified"]:hover { color: var(--wow); }
        
        .lab-ctrl-status.active[data-status="untested"] { color: var(--text); background: var(--bg); }
        .lab-ctrl-status.active[data-status="partial"] { color: var(--gold); background: rgba(184, 160, 96, 0.15); }
        .lab-ctrl-status.active[data-status="verified"] { color: var(--wow); background: rgba(154, 196, 168, 0.15); }
        
        /* Quality bar inline */
        .lab-quality {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .lab-quality .quality-track {
            width: 60px;
            height: 6px;
            background: var(--bg);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .lab-quality .quality-fill {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0%;
            background: linear-gradient(90deg, var(--ouch) 0%, var(--gold) 50%, var(--wow) 100%);
            border-radius: 3px;
            transition: width 0.2s ease;
        }
        
        .lab-quality .quality-label {
            font-size: 9px;
            color: var(--text-light);
            min-width: 32px;
        }
        
        /* ============ FEEDBACK MODAL ============ */
        .lab-feedback-modal {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.3);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3001;
        }
        
        .lab-feedback-modal.show {
            display: flex;
        }
        
        .feedback-modal-content {
            background: var(--card);
            border-radius: 16px;
            padding: 20px;
            width: 340px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.2);
        }
        
        .feedback-modal-context {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        
        .feedback-context-sep {
            color: var(--text-lighter);
            margin: 0 4px;
        }
        
        .feedback-modal-element {
            font-size: 13px;
            font-family: monospace;
            color: var(--wow-dark);
            padding: 10px 12px;
            background: rgba(154, 196, 168, 0.1);
            border-radius: 8px;
            margin-bottom: 12px;
            border-left: 3px solid var(--wow);
        }
        
        .feedback-modal-input {
            width: 100%;
            min-height: 80px;
            padding: 12px;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-family: inherit;
            font-size: 14px;
            resize: vertical;
            background: var(--bg);
            color: var(--text);
        }
        
        .feedback-modal-input:focus {
            outline: none;
            border-color: var(--wow);
        }
        
        .feedback-modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }
        
        .feedback-cancel {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: transparent;
            color: var(--text-light);
            font-size: 13px;
            font-family: inherit;
            cursor: pointer;
        }
        
        .feedback-save {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 10px;
            background: var(--wow);
            color: white;
            font-size: 13px;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
        }
        
        /* ============ PAUSE MODE ============ */
        body.lab-paused * {
            animation-play-state: paused !important;
            transition: none !important;
        }
        
        body.lab-paused .lab-pause-indicator {
            display: flex;
        }
        
        .lab-pause-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--card);
            border: 2px solid var(--gold);
            border-radius: 16px;
            padding: 16px 24px;
            display: none;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            z-index: 3000;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        }
        
        .pause-icon {
            font-size: 24px;
            color: var(--gold);
        }
        
        .pause-text {
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
            letter-spacing: 2px;
        }
        
        .pause-hint {
            font-size: 10px;
            color: var(--text-lighter);
        }
        
        /* ============ ELEMENT PICKER ============ */
        body.lab-picking {
            cursor: crosshair !important;
        }
        
        body.lab-picking * {
            cursor: crosshair !important;
        }
        
        .lab-picker-highlight {
            position: fixed;
            border: 2px solid var(--wow);
            background: rgba(154, 196, 168, 0.1);
            border-radius: 4px;
            pointer-events: none;
            z-index: 2999;
            display: none;
        }
        
        body.lab-picking .lab-picker-highlight {
            display: block;
        }
        
        .lab-picker-label {
            position: fixed;
            background: var(--text);
            color: white;
            font-size: 11px;
            font-family: monospace;
            padding: 4px 8px;
            border-radius: 4px;
            pointer-events: none;
            z-index: 3000;
            display: none;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        body.lab-picking .lab-picker-label {
            display: block;
        }
        
        /* ============ INLINE NOTE INPUT ============ */
        .lab-note-inline {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: var(--card);
            border-radius: 16px;
            padding: 8px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            z-index: 3001;
            display: none;
            min-width: 300px;
            max-width: 400px;
            opacity: 0;
            transition: all 0.15s ease-out;
        }
        
        .lab-note-inline.show {
            display: block;
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        .note-inline-input {
            width: 100%;
            border: none;
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 15px;
            font-family: inherit;
            background: var(--bg);
            color: var(--text);
            outline: none;
            resize: none;
            min-height: 50px;
            max-height: 150px;
            box-sizing: border-box;
        }
        
        .note-inline-input::placeholder {
            color: var(--text-lighter);
        }
        
        .note-inline-input:focus {
            background: white;
        }
        
        /* ============ WOW-IF ROW (appears after enter) ============ */
        .note-acceptance-row {
            display: none;
            align-items: center;
            gap: 8px;
            padding: 8px 12px 4px;
            border-top: 1px solid var(--border);
            margin-top: 4px;
        }

        .note-acceptance-row.show {
            display: flex;
        }
        
        .note-acceptance-label {
            font-size: 11px;
            color: var(--wow);
            white-space: nowrap;
            font-style: italic;
        }
        
        .note-acceptance-input {
            flex: 1;
            border: none;
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 12px;
            font-family: inherit;
            background: var(--bg);
            color: var(--text);
            outline: none;
        }
        
        .note-acceptance-input::placeholder {
            color: var(--text-lighter);
            font-style: italic;
        }
        
        .note-acceptance-input:focus {
            background: white;
        }
        
        /* ============ EXPORT BUTTON ============ */
        .lab-export-btn .ctrl-icon {
            font-style: normal;
            min-width: 16px;
        }
        
        .lab-export-btn.has-notes .ctrl-icon {
            color: var(--gold);
            font-weight: 600;
        }
        
        .lab-export-btn.copied {
            background: var(--wow) !important;
        }
        
        .lab-export-btn.copied .ctrl-icon {
            color: white !important;
        }
        
        /* ============ CLEAR DATA PANEL ============ */
        .clear-data-panel {
            position: fixed;
            top: 56px;
            right: 8px;
            width: 280px;
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            z-index: 2000;
            display: none;
        }
        
        body.lab-mode .clear-data-panel.show {
            display: block;
        }
        
        .clear-data-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            font-weight: 600;
            font-size: 13px;
            color: var(--text);
        }
        
        .clear-data-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-light);
            cursor: pointer;
        }
        
        .clear-data-content {
            padding: 16px;
        }
        
        .clear-data-section {
            margin-bottom: 16px;
        }
        
        .clear-data-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            margin-bottom: 8px;
        }
        
        .clear-data-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .clear-data-item:last-child {
            border-bottom: none;
        }
        
        .clear-item-name {
            font-size: 13px;
            color: var(--text);
        }
        
        .clear-item-count {
            font-size: 12px;
            font-weight: 600;
            background: var(--bg);
            padding: 2px 8px;
            border-radius: 10px;
            color: var(--text-mid);
        }
        
        .clear-item-count.has-data {
            background: #7c3aed;
            color: white;
        }
        
        .clear-item-status {
            font-size: 12px;
            color: var(--text-light);
        }
        
        .clear-item-status.has-data {
            color: #7c3aed;
            font-weight: 500;
        }
        
        .clear-data-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .clear-action-btn {
            padding: 10px 14px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            color: var(--text);
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        
        .clear-action-btn:hover {
            background: var(--card);
            border-color: var(--text-light);
        }
        
        .clear-action-btn.danger {
            background: var(--bg-ouch);
            border-color: rgba(232, 180, 188, 0.5);
            color: var(--ouch-dark);
        }
        
        .clear-action-btn.danger:hover {
            background: var(--ouch);
            color: white;
        }
        
        .lab-clear-btn {
            /* Red tint for clear button */
        }
        
        /* ============ API THREAD PANEL ============ */
        .api-thread-panel {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 380px;
            max-height: 60vh;
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(0,0,0,0.15);
            z-index: 2100;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        
        .api-thread-panel.show {
            display: flex;
        }
        
        .api-thread-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        
        .api-thread-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .api-status {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }
        
        .api-status.ready { background: var(--bg); color: var(--text-light); }
        .api-status.sending { background: var(--gold); color: white; }
        .api-status.streaming { background: var(--wow); color: white; }
        .api-status.error { background: var(--ouch); color: white; }
        
        .api-thread-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-light);
            cursor: pointer;
        }
        
        .api-thread-content {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }
        
        .api-key-section {
            margin-bottom: 16px;
        }
        
        .api-key-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 12px;
            font-family: monospace;
            background: var(--bg);
        }
        
        .api-key-input:focus {
            outline: none;
            border-color: var(--gold);
        }
        
        .api-key-hint {
            font-size: 10px;
            color: var(--text-light);
            margin-top: 6px;
        }
        
        .api-thread-note {
            background: var(--bg);
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .api-thread-note-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-light);
            text-transform: uppercase;
            margin-bottom: 6px;
        }
        
        .api-thread-note-text {
            font-size: 13px;
            color: var(--text);
            line-height: 1.5;
        }
        
        .api-response-section {
            margin-top: 16px;
        }
        
        .api-response-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-light);
            text-transform: uppercase;
            margin-bottom: 8px;
        }
        
        .api-response-content {
            font-size: 13px;
            color: var(--text);
            line-height: 1.6;
            white-space: pre-wrap;
            font-family: inherit;
            background: var(--bg);
            padding: 12px;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .api-thread-actions {
            padding: 12px 16px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 8px;
        }
        
        .api-action-btn {
            flex: 1;
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .api-action-btn.primary {
            background: var(--text);
            color: white;
        }
        
        .api-action-btn.primary:hover {
            background: var(--text-mid);
        }
        
        .api-action-btn.secondary {
            background: var(--bg);
            color: var(--text-mid);
        }
        
        .api-action-btn.secondary:hover {
            background: var(--border);
        }
        
        .api-action-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* ============ PROTOCOL PANEL ============ */
        .lab-protocol-panel {
            position: fixed;
            top: 56px;
            right: 8px;
            width: 480px;
            height: calc(100vh - 120px);
            max-height: none;
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.12);
            z-index: 2000;
            display: none;
            flex-direction: column;
        }
        
        body.lab-mode .lab-protocol-panel.show {
            display: flex;
        }
        
        .protocol-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            font-weight: 500;
            font-size: 13px;
            color: var(--text-mid);
        }
        
        .protocol-close {
            background: none;
            border: none;
            font-size: 18px;
            color: var(--text-lighter);
            cursor: pointer;
        }
        
        .protocol-tabs {
            display: flex;
            gap: 2px;
            padding: 8px 8px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .protocol-tab {
            padding: 8px 12px;
            border: none;
            background: none;
            font-size: 11px;
            font-weight: 500;
            color: var(--text-light);
            cursor: pointer;
            border-radius: 6px 6px 0 0;
            transition: all 0.15s;
        }
        
        .protocol-tab:hover {
            color: var(--text);
            background: var(--bg);
        }
        
        .protocol-tab.active {
            color: var(--text);
            background: var(--bg);
            border-bottom: 2px solid var(--wow);
        }
        
        .protocol-content {
            padding: 16px;
            overflow-y: auto;
            flex: 1;
            font-size: 13px;
            line-height: 1.6;
        }
        
        .protocol-content h3 {
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            margin: 16px 0 8px;
        }
        
        .protocol-content h3:first-child {
            margin-top: 0;
        }
        
        .protocol-content p {
            margin: 0 0 12px;
            color: var(--text-mid);
        }
        
        .protocol-content ul {
            margin: 0 0 12px;
            padding-left: 20px;
        }
        
        .protocol-content li {
            margin-bottom: 4px;
            color: var(--text-mid);
        }
        
        .protocol-content code {
            background: var(--bg);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            font-family: 'SF Mono', Monaco, monospace;
        }
        
        .protocol-content .status-verified {
            color: var(--wow-dark);
        }
        
        .protocol-content .status-pending {
            color: var(--gold);
        }
        
        .protocol-content .status-bug {
            color: var(--ouch-dark);
        }
        
        .protocol-content .turn-scope {
            font-size: 11px;
            font-weight: 500;
            color: var(--gold);
            margin: -8px 0 12px;
        }
        
        .protocol-content .turn-quote {
            background: var(--bg);
            border-left: 3px solid var(--text-lighter);
            padding: 12px 16px;
            margin: 0 0 16px;
            font-style: italic;
            color: var(--text-mid);
            border-radius: 0 8px 8px 0;
            line-height: 1.5;
        }
        
        /* Design Space - the "lab within the lab" */
        .lab-design-space {
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        
        .design-header {
            margin-bottom: 16px;
        }
        
        .design-header h3 {
            margin: 0 0 4px;
        }
        
        .design-section {
            margin-bottom: 16px;
        }
        
        .design-label {
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-lighter);
            margin-bottom: 8px;
        }
        
        .design-workspace {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: var(--bg-warm);
            margin: 0 -16px -16px;
            padding: 16px;
            border-top: 1px solid var(--border);
        }
        
        .design-hint {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 12px;
        }
        
        .design-textarea {
            flex: 1;
            min-height: 200px;
            padding: 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            line-height: 1.6;
            resize: none;
            background: white;
        }
        
        .design-textarea:focus {
            outline: none;
            border-color: var(--wow);
            box-shadow: 0 0 0 3px rgba(154, 196, 168, 0.15);
        }
        
        .design-textarea::placeholder {
            color: var(--text-lighter);
            line-height: 1.8;
        }
        
        .design-actions {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 12px;
        }
        
        .design-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            background: var(--wow);
            color: white;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .design-btn:hover {
            background: var(--wow-dark);
        }
        
        .design-status {
            font-size: 11px;
            color: var(--text-light);
        }
        
        .protocol-content .changelog-entry {
            padding-bottom: 16px;
            margin-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }
        
        .protocol-content .changelog-entry:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .protocol-content .changelog-entry h3 {
            margin-top: 0;
        }

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

        /* Note card - simpler than experiment card */
        .note-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
            transition: all 0.15s;
        }
        
        .note-card:hover {
            border-color: var(--text-lighter);
        }
        
        .note-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .note-card-context {
            font-size: 10px;
            font-family: monospace;
            color: var(--text-light);
            background: var(--bg);
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .note-card-element {
            font-size: 10px;
            font-family: monospace;
            color: var(--wow-dark);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .note-card-actions {
            margin-left: auto;
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.15s;
        }
        
        .note-card:hover .note-card-actions {
            opacity: 1;
        }
        
        .note-card-btn {
            padding: 4px 8px;
            border: none;
            background: var(--bg);
            color: var(--text-light);
            font-size: 10px;
            font-family: inherit;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.15s;
        }
        
        .note-card-btn:hover {
            background: var(--border);
            color: var(--text);
        }
        
        .note-card-btn.promote {
            background: rgba(154, 196, 168, 0.15);
            color: var(--wow-dark);
        }
        
        .note-card-btn.promote:hover {
            background: var(--wow);
            color: white;
        }
        
        .note-card-btn.delete:hover {
            background: rgba(212, 168, 154, 0.15);
            color: var(--ouch-dark);
        }
        
        .note-card-text {
            font-size: 13px;
            color: var(--text);
            line-height: 1.5;
        }
        
        /* Queue card - experiment proposal */
        .queue-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: all 0.15s;
        }
        
        .queue-card:hover {
            border-color: var(--gold);
            box-shadow: 0 2px 8px rgba(184, 160, 96, 0.1);
        }
        
        .queue-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: rgba(184, 160, 96, 0.08);
            border-bottom: 1px solid var(--border);
        }
        
        .queue-card-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--gold);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .queue-card-context {
            font-size: 10px;
            font-family: monospace;
            color: var(--text-light);
            margin-left: auto;
        }
        
        .queue-card-body {
            padding: 12px;
        }
        
        .queue-card-observation {
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 8px;
            padding-left: 10px;
            border-left: 2px solid var(--border);
        }
        
        .queue-card-experiment {
            font-size: 14px;
            color: var(--text);
            line-height: 1.5;
            margin-bottom: 12px;
        }
        
        .queue-card-feedback {
            margin-bottom: 12px;
        }
        
        .queue-card-feedback textarea {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 12px;
            font-family: inherit;
            resize: vertical;
            min-height: 40px;
            background: var(--bg);
        }
        
        .queue-card-feedback textarea:focus {
            outline: none;
            border-color: var(--gold);
        }
        
        .queue-card-actions {
            display: flex;
            gap: 8px;
        }
        
        .queue-action-btn {
            flex: 1;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .queue-action-btn.approve {
            background: var(--wow);
            color: white;
        }
        
        .queue-action-btn.approve:hover {
            background: var(--wow-dark);
        }
        
        .queue-action-btn.revise {
            background: rgba(184, 160, 96, 0.15);
            color: var(--gold);
        }
        
        .queue-action-btn.revise:hover {
            background: rgba(184, 160, 96, 0.25);
        }
        
        .queue-action-btn.reject {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-light);
        }
        
        .queue-action-btn.reject:hover {
            border-color: var(--ouch);
            color: var(--ouch);
        }
        
        /* Active experiment card */
        .active-card {
            background: var(--card);
            border: 2px solid var(--wow);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
        }
        
        .active-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            background: rgba(154, 196, 168, 0.1);
            border-bottom: 1px solid rgba(154, 196, 168, 0.2);
        }
        
        .active-card-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--wow-dark);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .active-card-context {
            font-size: 10px;
            font-family: monospace;
            color: var(--text-light);
            margin-left: auto;
        }
        
        .active-card-body {
            padding: 12px;
        }
        
        .active-card-experiment {
            font-size: 15px;
            color: var(--text);
            line-height: 1.5;
            margin-bottom: 12px;
            font-weight: 500;
        }
        
        .active-card-learnings {
            margin-bottom: 12px;
        }
        
        .active-card-learnings-label {
            font-size: 10px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
        }
        
        .active-card-learnings textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            resize: vertical;
            min-height: 60px;
            background: var(--bg);
        }
        
        .active-card-learnings textarea:focus {
            outline: none;
            border-color: var(--wow);
        }
        
        .active-card-actions {
            display: flex;
            gap: 8px;
        }
        
        .active-action-btn {
            flex: 1;
            padding: 10px 12px;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-family: inherit;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .active-action-btn.complete {
            background: var(--text);
            color: white;
        }
        
        .active-action-btn.complete:hover {
            background: var(--text-light);
        }
        
        .active-action-btn.pause {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-light);
        }
        
        .active-action-btn.pause:hover {
            border-color: var(--text-light);
            color: var(--text);
        }
        
        /* Done card */
        .done-card {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
            opacity: 0.8;
        }
        
        .done-card-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .done-card-status {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 10px;
        }
        
        .done-card-status.completed {
            background: rgba(154, 196, 168, 0.15);
            color: var(--wow-dark);
        }
        
        .done-card-status.rejected {
            background: rgba(212, 168, 154, 0.15);
            color: var(--ouch-dark);
        }
        
        .done-card-context {
            font-size: 10px;
            font-family: monospace;
            color: var(--text-light);
            margin-left: auto;
        }
        
        .done-card-experiment {
            font-size: 13px;
            color: var(--text);
            margin-bottom: 8px;
        }
        
        .done-card-learnings {
            font-size: 12px;
            color: var(--text-light);
            font-style: italic;
            padding-left: 10px;
            border-left: 2px solid var(--border);
        }
        
        /* Empty state */
        .notes-empty {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-lighter);
        }
        
        .notes-empty-icon {
            font-size: 32px;
            margin-bottom: 12px;
            opacity: 0.5;
        }
        
        .notes-empty-text {
            font-size: 13px;
            line-height: 1.6;
        }
        
        /* ============ LAB MODE - IN-HEADER CONTROLS ============ */
        
        /* People group becomes draggable in lab mode */
        body.lab-mode .people-group {
            cursor: ew-resize;
            padding: 4px 8px;
            margin: -4px -8px;
            border-radius: 12px;
            transition: background 0.15s;
        }
        
        body.lab-mode .people-group:hover {
            background: rgba(154, 196, 168, 0.15);
        }
        
        body.lab-mode .people-group.dragging {
            background: rgba(154, 196, 168, 0.25);
        }
        
        /* Person icon clickable for demeanor */
        body.lab-mode .person-icon {
            cursor: pointer;
            transition: all 0.15s;
        }
        
        body.lab-mode .person-icon:hover {
            color: var(--wow);
            transform: scale(1.1);
        }
        
        /* Demeanor colors on person icon */
        body.lab-mode .person-icon.calm { color: #7a9a7e; }
        body.lab-mode .person-icon.engaged { color: var(--wow); }
        body.lab-mode .person-icon.active { color: var(--gold); }
        body.lab-mode .person-icon.distracted { color: var(--ouch); }
        body.lab-mode .person-icon.apathetic { color: #666; }
        
        /* Timer segments become draggable in lab mode */
        body.lab-mode .segments {
            cursor: ew-resize;
            padding: 8px 4px;
            margin: -8px -4px;
            border-radius: 8px;
            transition: background 0.15s;
        }
        
        body.lab-mode .segments:hover {
            background: rgba(127, 168, 201, 0.15);
        }
        
        body.lab-mode .segments.dragging {
            background: rgba(127, 168, 201, 0.25);
        }
        
        /* Timer icon color in lab mode */
        body.lab-mode .timer-icon {
            color: var(--timer);
        }
        
        /* Demeanor toast - appears above person icon, prominent */
        .lab-demeanor-toast {
            position: fixed;
            bottom: 70px;
            left: 8px;
            transform: translateY(20px) scale(0.9);
            background: var(--surface);
            padding: 10px 16px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            pointer-events: none;
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 1100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            border: 1px solid var(--border);
        }
        
        .lab-demeanor-toast.show {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        
        .demeanor-toast-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }
        
        .demeanor-toast-text {
            font-size: 14px;
            color: var(--text);
            font-weight: 500;
        }
        
        /* Demeanor colors on toast */
        .lab-demeanor-toast.calm { border-color: #7a9a7e; }
        .lab-demeanor-toast.calm .demeanor-toast-icon { color: #7a9a7e; }
        .lab-demeanor-toast.calm .demeanor-toast-text { color: #7a9a7e; }
        
        .lab-demeanor-toast.engaged { border-color: var(--wow); }
        .lab-demeanor-toast.engaged .demeanor-toast-icon { color: var(--wow); }
        .lab-demeanor-toast.engaged .demeanor-toast-text { color: var(--wow); }
        
        .lab-demeanor-toast.active { border-color: var(--gold); }
        .lab-demeanor-toast.active .demeanor-toast-icon { color: var(--gold); }
        .lab-demeanor-toast.active .demeanor-toast-text { color: var(--gold); }
        
        .lab-demeanor-toast.distracted { border-color: var(--ouch); }
        .lab-demeanor-toast.distracted .demeanor-toast-icon { color: var(--ouch); }
        .lab-demeanor-toast.distracted .demeanor-toast-text { color: var(--ouch); }
        
        .lab-demeanor-toast.apathetic { border-color: #666; }
        .lab-demeanor-toast.apathetic .demeanor-toast-icon { color: #666; }
        .lab-demeanor-toast.apathetic .demeanor-toast-text { color: #666; }
        
        .lab-speed-chips {
            display: flex;
            gap: 2px;
            margin-left: 8px;
        }
        
        .lab-chip-sm {
            padding: 4px 8px;
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 10px;
            background: transparent;
            color: #666;
            font-size: 9px;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.15s;
        }
        
        .lab-chip-sm:hover { color: #aaa; background: rgba(255,255,255,0.05); }
        .lab-chip-sm.active { 
            background: rgba(255,255,255,0.2); 
            color: #fff;
            border-color: rgba(255,255,255,0.3);
        }