{/* Ambient blobs */}

{/* Ripples */} {(s.ripples || []).map(r => (

))} {/* ZONE 1: Header - Energy State & Identity */}

{ e.stopPropagation(); setLocalState(p => ({ ...p, showEnergySwitcher: !p.showEnergySwitcher })); }} style={{ ...glassCard({ padding: '8px 14px', borderRadius: 50, cursor: 'pointer' }), display: 'flex', alignItems: 'center', gap: 8, animation: s.pulseEmoji ? 'energyPulse 0.4s ease 2' : 'pulseGlow 3s ease-in-out infinite' }} > {cfg.emoji} {cfg.label}

{(memberList || []).length} {(memberList || []).length === 1 ? 'mind' : 'minds'} present

{/* Energy Switcher Dropdown */} {s.showEnergySwitcher && (

{Object.entries(energyConfigs || {}).map(([key, val]) => (

{ e.stopPropagation(); switchEnergy(key); }} style={{ padding: '10px 18px', borderRadius: 16, cursor: 'pointer', background: s.energy === key ? `${val.accent}33` : 'rgba(255,255,255,0.05)', border: s.energy === key ? `2px solid ${val.accent}` : '2px solid transparent', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, transition: 'all 0.3s ease', minWidth: 80 }} > {val.emoji} {val.label}

))}

)} {/* ZONE 2: Hero Prompt Card */}

{/* Shimmer line */}

{cfg.promptStyle} #{(d.promptIndex ?? 0) + 1}

{currentPrompt}

{ e.stopPropagation(); setLocalState(p => ({ ...p, showResponseInput: !p.showResponseInput })); }} style={{ ...glassCard({ padding: '12px 20px', borderRadius: 50, cursor: 'pointer' }), background: `${cfg.accent}22`, border: `1px solid ${cfg.accent}44`, fontSize: 14, fontWeight: 600, color: cfg.accent, display: 'flex', alignItems: 'center', gap: 8, transition: 'all 0.2s ease' }} > 💭 Respond

{ e.stopPropagation(); cyclePrompt(); }} style={{ ...glassCard({ padding: '12px 20px', borderRadius: 50, cursor: 'pointer' }), fontSize: 14, fontWeight: 600, opacity: 0.7, display: 'flex', alignItems: 'center', gap: 8, transition: 'all 0.2s ease' }} > 🔀 Next

{/* Response Input */} {s.showResponseInput && (

setLocalState(p => ({ ...p, myResponse: e.target.value }))}
              onClick={(e) => e.stopPropagation()}
              placeholder="drop a thought anonymously..."
              rows={2}
              style={{
                flex: 1, background: 'rgba(255,255,255,0.05)',
                border: `1px solid ${cfg.glassBorder}`,
                borderRadius: 14, padding: 12, fontSize: 15,
                color: cfg.textColor, resize: 'none', outline: 'none',
                fontFamily: 'inherit'
              }}
            />
            <div
              onClick={(e) => { e.stopPropagation(); submitResponse(); }}
              style={{
                width: 48, height: 48, borderRadius: '50%',
                background: cfg.accent, display: 'flex',
                alignItems: 'center', justifyContent: 'center',
                cursor: 'pointer', fontSize: 20, flexShrink: 0,
                transition: 'transform 0.2s ease',
                boxShadow: `0 0 20px ${cfg.accentGlow}`
              }}
            >
              ✨
            </div>
          </div>
        )}
      </div>

{/* ZONE 3: Response Cards - The Thought Tapestry */}
      <div style={{
        position: 'relative', zIndex: 10,
        flex: 1, overflowY: 'auto', overflowX: 'hidden',
        paddingBottom: 20,
        opacity: s.mounted ? 1 : 0,
        transition: 'opacity 0.6s ease 0.4s',
        WebkitOverflowScrolling: 'touch'
      }}>
        {(responses || []).length === 0 && (
          <div style={{
            ...glassCard({ textAlign: 'center', padding: 30 }),
            animation: 'fadeIn 0.6s ease-out'
          }}>
            <div style={{ fontSize: 40, marginBottom: 12 }}>🌀</div>
            <div style={{ fontSize: 16, opacity: 0.6, lineHeight: 1.5 }}>
              The space is open. Drop a thought.
            </div>
          </div>
        )}

<div style={{
          display: 'grid',
          gridTemplateColumns: (responses || []).length === 1 ? '1fr' : '1fr 1fr',
          gap: 10
        }}>
          {(responses || []).map((r, idx) => {
            const resp = r ?? {};
            const id = resp.id ?? idx;
            const isRevealed = d.revealedCards?.[id] ?? false;
            const taps = d.tapCounts?.[id] ?? 0;
            const isFlipping = s.cardFlips?.[id] ?? false;

return (
              <div
                key={id}
                onClick={(e) => { e.stopPropagation(); tapCard(id); }}
                style={{
                  ...glassCard({
                    cursor: 'pointer',
                    padding: 16,
                    position: 'relative',
                    overflow: 'hidden',
                    minHeight: 100
                  }),
                  animation: `cardEnter 0.4s ease-out ${idx * 0.08}s both`,
                  transform: isFlipping ? 'scale(0.97)' : 'scale(1)',
                  boxShadow: taps > 2 ? `0 0 ${taps * 4}px ${cfg.accentGlow}` : 'none',
                  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
                }}
              >
                {/* Tap ripple effect overlay */}
                {isFlipping && (
                  <div style={{
                    position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
                    background: `radial-gradient(circle, ${cfg.accent}22, transparent)`,
                    animation: 'fadeIn 0.3s ease-out',
                    borderRadius: 20
                  }} />
                )}

<div style={{
                  display: 'flex', justifyContent: 'space-between',
                  alignItems: 'flex-start', marginBottom: 8
                }}>
                  <span style={{
                    fontSize: 24,
                    animation: taps > 0 ? 'energyPulse 0.3s ease' : 'none'
                  }}>
                    {resp.emoji ?? '💭'}
                  </span>
                  {taps > 0 && (
                    <span style={{
                      fontSize: 11, opacity: 0.4,
                      background: 'rgba(255,255,255,0.08)',
                      padding: '2px 8px', borderRadius: 10
                    }}>
                      ×{taps}
                    </span>
                  )}
                </div>

{/* Annotation hint */}
                {taps >= 3 && (
                  <div style={{
                    marginTop: 10, fontSize: 11, opacity: 0.4,
                    fontStyle: 'italic',
                    animation: 'fadeIn 0.5s ease-out'
                  }}>
                    ✦ resonating
                  </div>
                )}
              </div>
            );
          })}
        </div>

{/* Feral mode bonus: mini manifesto builder */}
        {s.energy === 'feral' && (responses || []).length > 0 && (
          <div style={{
            ...glassCard({
              marginTop: 16, padding: 20,
              border: `1px solid ${cfg.accent}44`,
              background: `linear-gradient(135deg, ${cfg.glass}, rgba(255,60,80,0.06))`
            }),
            animation: 'slideUp 0.5s ease-out'
          }}>
            <div style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 2, opacity: 0.6, marginBottom: 12 }}>
              🔥 Feral Manifesto
            </div>
            <div style={{ fontSize: 15, lineHeight: 1.8, fontStyle: 'italic', opacity: 0.8 }}>
              {(responses || []).slice(0, 5).map((r, i) => (
                <span key={r?.id ?? i}>
                  {r?.text ?? ''}{i < Math.min((responses || []).length, 5) - 1 ? ' → ' : '.'}
                </span>
              ))}
            </div>
          </div>
        )}

{/* Thoughtful mode bonus: reflection prompt */}
        {s.energy === 'thoughtful' && (responses || []).length > 1 && (
          <div style={{
            ...glassCard({
              marginTop: 16, padding: 20,
              background: 'rgba(160, 120, 255, 0.06)'
            }),
            animation: 'slideUp 0.5s ease-out',
            textAlign: 'center'
          }}>
            <div style={{ fontSize: 28, marginBottom: 8 }}>🌙</div>
            <div style={{ fontSize: 13, opacity: 0.5, lineHeight: 1.6 }}>
              {(responses || []).length} thoughts collected. The space holds them gently.
            </div>
          </div>
        )}
      </div>

{/* Bottom brand bar */}
      <div style={{
        position: 'relative', zIndex: 10,
        textAlign: 'center', paddingTop: 8, paddingBottom: 4,
        opacity: s.mounted ? 0.3 : 0,
        transition: 'opacity 1s ease 0.8s',
        fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', fontWeight: 600
      }}>
        come sit with me · unsw
      </div>
    </div>
  );
}</article></body></html>