{/* Scanline effect */}

{/* Floating phantom avatars */} {(phantomAvatars || []).slice(0, 5).map((emoji, i) => (

{emoji}

))} {/* Header */}

🧠 BRAIN PARTY

{(memberList || []).slice(0, 4).map((m, i) => (

0 ? -8 : 0 }}>{!m?.avatarUrl ? '👤' : ''}

))} {(memberList || []).length > 4 && +{(memberList || []).length - 4}}

{/* HERO: Mood Dial */}

{/* Inner spinning ring */}

{(rooms || []).map((r, i) => (

{r.emoji.split('')[0]}

))}

{currentRoom.emoji}

{/* Dial controls */}

{currentRoom.name}

{currentRoom.desc}

{/* Tab toggle */}

{/* Content Area */}

{!(state?.showHighlights) ? ( <> {(roomPrompts || []).length === 0 && (

🌀 This room is empty...
Drop a thought below

)} {(roomPrompts || []).map((prompt, pIdx) => { const p = prompt ?? {}; const responses = Array.isArray(p.responses) ? p.responses : []; return (

{isGlitch ? (p.text ?? '').split('').reverse().join('') : (p.text ?? '')}

— {isGlitch ? '????' : (p.author ?? 'Anonymous')}

{(responses || []).map((r, rIdx) => { const resp = r ?? {}; const typeColors = { poll: 'rgba(1,205,254,0.2)', duet: 'rgba(185,103,255,0.2)', roast: 'rgba(255,113,206,0.2)' }; const typeEmojis = { poll: '📊', duet: '🎭', roast: '🔥' }; const bgColor = typeColors[resp.type ?? 'duet'] ?? 'rgba(255,255,255,0.1)'; return (

{typeEmojis[resp.type ?? 'duet'] ?? '💬'} {isGlitch && resp.glitch ? '█▓░ ' + (resp.text ?? '') + ' ░▓█' : (resp.text ?? '')}

); })}

); })} ) : ( <>

Shared Moments

{(highlights || []).map((h, i) => { const hl = h ?? {}; const hlRoom = rooms[hl.room ?? 0] ?? rooms[0]; return (

{hlRoom.emoji} {hlRoom.name}

{hl.text ?? ''}

✨

); })} {(highlights || []).length === 0 && (

No highlights yet... keep vibing 🌀

)} )}

{/* Input Bar */} {!(state?.showHighlights) && (

setState(s => ({ ...s, newPrompt: e.target.value }))} onKeyDown={e => { if (e.key === 'Enter') submitPrompt(); }} placeholder={isGlitch ? '█▓░ type if you dare ░▓█' : 'Drop a thought, hot take, weird question...'} style={{ flex: 1, padding: '14px 16px', borderRadius: 20, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)', color: '#fff', fontSize: 15, outline: 'none', backdropFilter: 'blur(8px)', transition: 'border-color 0.3s', fontFamily: 'inherit' }} onFocus={e => e.currentTarget.style.borderColor = 'rgba(255,113,206,0.6)'} onBlur={e => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)'} />

)}

); }