{/* 🏮 HEADER */}

🏮

UNSW Common Ground

openProfile(user.handle)} style={{ width: 32, height: 32, borderRadius: '50%', background: '#444', backgroundImage: user.avatarUrl ? `url(${user.avatarUrl})` : 'none', backgroundSize: 'cover', border: `1px solid ${THEME.gold}` }} />

{/* 🐲 MAIN CONTENT AREA */}

{/* CENTRAL PROMPT LANTERN */}

{/* Hanging string */}

Weekly Prompt

{prompt.text}

{/* Tassel */}

🎋

{/* Host Edit Button */} {isHost && ( )}

{/* CONNECTION THREADS */}

{/* RESPONSE STREAM (LANTERNS) */}

{(topLevelResponses || []).map((res, i) => (

setActiveResponseId(res.id)} style={{ alignSelf: i % 2 === 0 ? 'flex-start' : 'flex-end', width: '85%', maxWidth: 340, transform: `rotate(${getRotation(res.id)}deg)`, cursor: 'pointer', transition: 'transform 0.2s' }} >

{/* Decorative Pattern Top */}

{!res.author.avatarUrl && res.author.name[0]}

{res.author.name}

{res.text}

🧧 {(responses || []).filter(r => r.parentId === res.id).length} branches

))} {/* Empty State for Responses */} {(topLevelResponses || []).length === 0 && (

🏮

Be the first to light a lantern...

)}

{/* ⌨️ FLOATING ACTION BUTTON (SHARE SPARK) */} {!isWriting && ( )} {/* ✍️ INPUT BOTTOM SHEET (MAIN RESPONSE) */} {isWriting && (

New Lantern

setInputText(e.target.value)}
            placeholder="Unfurl your thoughts here..."
            style={{
              width: '100%', height: 100, background: '#2C2C2C',
              border: 'none', borderRadius: 12, padding: 16,
              color: '#fff', fontSize: 16, fontFamily: 'sans-serif',
              resize: 'none', boxSizing: 'border-box'
            }}
          />
          <button 
            onClick={() => submitResponse(null)}
            style={{
              width: '100%', marginTop: 16, height: 50, borderRadius: 12,
              background: THEME.red, color: '#fff', border: 'none',
              fontSize: 16, fontWeight: 600, cursor: 'pointer'
            }}
          >
            Light Lantern 🏮
          </button>
        </div>
      )}

{/* 📄 DETAIL MODAL (RED ENVELOPE VIEW) */}
      {activeResponse && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
          background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(5px)',
          zIndex: 40, display: 'flex', alignItems: 'flex-end'
        }}>
          <div style={{
            width: '100%', maxHeight: '90vh',
            background: '#1A1A1A',
            borderTopLeftRadius: 24, borderTopRightRadius: 24,
            display: 'flex', flexDirection: 'column',
            paddingBottom: 'env(safe-area-inset-bottom, 20px)'
          }}>
            {/* Modal Header */}
            <div style={{ padding: 16, borderBottom: '1px solid #333', display: 'flex', justifyContent: 'flex-end' }}>
              <button onClick={() => setActiveResponseId(null)} style={{ background: '#333', border: 'none', color: '#fff', borderRadius: '50%', width: 32, height: 32 }}>✕</button>
            </div>

{/* Scrollable Content */}
            <div style={{ flex: 1, overflowY: 'auto', padding: 20 }}>
              {/* Main Response */}
              <div style={{
                padding: 20, background: `linear-gradient(135deg, ${THEME.red}20, transparent)`,
                border: `1px solid ${THEME.red}`, borderRadius: 16, marginBottom: 24
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                   <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#555', backgroundImage: activeResponse.author.avatarUrl ? `url(${activeResponse.author.avatarUrl})` : 'none', backgroundSize: 'cover' }} />
                   <div onClick={() => openProfile(activeResponse.author.handle)} style={{ fontWeight: 600, color: THEME.gold }}>{activeResponse.author.name}</div>
                </div>
                <div style={{ fontSize: 18, lineHeight: 1.5 }}>{activeResponse.text}</div>
                <div style={{ marginTop: 16, display: 'flex', gap: 8 }}>
                  <button onClick={(e) => handleSpark(e, activeResponse.id)} style={{ background: 'transparent', border: `1px solid ${THEME.gold}60`, borderRadius: 20, padding: '6px 12px', color: THEME.gold }}>
                    ✨ Spark ({activeResponse.sparks?.length || 0})
                  </button>
                </div>
              </div>

{/* Replies Thread */}
              <h3 style={{ fontSize: 14, color: '#888', textTransform: 'uppercase', letterSpacing: 1 }}>Red Envelopes (Replies)</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 12 }}>
                {(activeReplies || []).length === 0 ? (
                  <div style={{ opacity: 0.5, fontStyle: 'italic', padding: 10 }}>No replies yet. Unfurl one?</div>
                ) : (
                  (activeReplies || []).map(reply => (
                    <div key={reply.id} style={{
                      padding: 16, background: '#252525', borderRadius: 12,
                      borderLeft: `4px solid ${THEME.unswYellow}`
                    }}>
                      <div style={{ fontSize: 12, color: THEME.gold, marginBottom: 4 }}>{reply.author.name}</div>
                      <div>{reply.text}</div>
                    </div>
                  ))
                )}
              </div>
            </div>

{/* Quick Reply Input */}
            <div style={{ padding: '16px 20px', borderTop: '1px solid #333' }}>
              <div style={{ display: 'flex', gap: 8 }}>
                <input 
                  value={inputText}
                  onChange={e => setInputText(e.target.value)}
                  placeholder="Add a perspective..."
                  style={{ flex: 1, height: 44, borderRadius: 22, padding: '0 16px', border: 'none', background: '#333', color: '#fff', fontSize: 16 }}
                />
                <button 
                  onClick={() => submitResponse(activeResponse.id)}
                  style={{ width: 44, height: 44, borderRadius: '50%', background: THEME.unswYellow, border: 'none', fontSize: 20, cursor: 'pointer' }}
                >
                  🧧
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

{/* 🐲 HOST PROMPT EDITOR */}
      {showPromptInput && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
          background: 'rgba(0,0,0,0.9)', zIndex: 100,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 20
        }}>
          <div style={{ width: '100%', maxWidth: 400 }}>
            <div style={{ color: THEME.gold, fontSize: 24, marginBottom: 16, textAlign: 'center' }}>🐲 Dragon Dance</div>
            <div style={{ color: '#ccc', marginBottom: 20, textAlign: 'center' }}>Set a new prompt. This will start a fresh circle.</div>
            <textarea 
              value={newPromptText}
              onChange={e => setNewPromptText(e.target.value)}
              placeholder="What is the new question?"
              style={{ 
                width: '100%', height: 120, padding: 16, borderRadius: 12, 
                background: '#222', border: `1px solid ${THEME.gold}`, color: '#fff',
                fontSize: 18, marginBottom: 20, boxSizing: 'border-box'
              }}
            />
            <div style={{ display: 'flex', gap: 12 }}>
              <button 
                onClick={() => setShowPromptInput(false)}
                style={{ flex: 1, height: 48, background: '#333', color: '#fff', border: 'none', borderRadius: 8, fontSize: 16 }}
              >
                Cancel
              </button>
              <button 
                onClick={changePrompt}
                style={{ flex: 1, height: 48, background: THEME.red, color: '#fff', border: 'none', borderRadius: 8, fontSize: 16, fontWeight: 700 }}
              >
                Start Fresh
              </button>
            </div>
          </div>
        </div>
      )}

</div>
  );
}</article></body></html>