Rooms — Chat

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_205":206,"_207":208},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_153":-5,"_20":154,"_22":155,"_156":157,"_158":159,"_25":160,"_24":-5,"_161":-5,"_162":-5,"_163":54,"_164":165,"_166":47,"_167":-5,"_168":-5,"_169":170},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","takeitdown","name","project1","branchName","main","version","path","","project",{"_36":99,"_13":14,"_48":100,"_101":-5,"_102":54,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":59,"_112":47,"_113":-5,"_114":-5,"_115":62,"_116":117,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":132,"_133":134,"_135":136,"_137":54},"tree",[82,83,84,85],"file","contents",[32,33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":78,"_17":50,"_51":79,"_52":80,"_53":54,"_55":-5,"_18":81},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":71,"_51":24,"_52":72,"_53":54,"_55":-5,"_18":73},{"_36":57,"_13":58,"_39":59,"_41":-5,"_42":43,"_44":60,"_46":47,"_48":61,"_17":62,"_51":63,"_52":64,"_53":54,"_55":-5,"_18":65},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":24,"_52":19,"_53":54,"_55":-5,"_18":56},"id","ed3f6dd6-5992-11f1-b0cb-ee650bb23af1","style.css","fileId","e7fa7f5a-5992-11f1-b579-ee650bb23af1","parentId","branchId","d3909c02-5992-11f1-97c9-ee650bb23af1","branchVersion",9,"latest",true,"createdAt",["D",1779862300547],2,"fileType","content","deleted",false,"label",[38],"56b6d09c-5993-11f1-bb4e-ee650bb23af1","server.ts","56b6d178-5993-11f1-bb4e-ee650bb23af1",16,["D",1779862477499],0,"http","import { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n // Serve static files\n if (path === \"/\" || path === \"/index.html\") {\n return serveFile(\"index.html\", import.meta.url);\n }\n if (path === \"/style.css\") {\n return serveFile(\"style.css\", import.meta.url);\n }\n if (path === \"/app.js\") {\n return serveFile(\"app.js\", import.meta.url);\n }\n\n // Fallback to index\n return serveFile(\"index.html\", import.meta.url);\n}\n",[58],"2e5df210-5993-11f1-b0cb-ee650bb23af1","index.html","db1d5334-5992-11f1-b673-ee650bb23af1",15,["D",1779862409806],4,"\n\n \n \n \n Rooms — Chat\n \n \n \n \n \n \n \n

\n \n

\n \n \n\n

\n Username\n

\n\n

\n Room Code optional\n

\n\n \n

\n \n \n\n \n \n\n \n

\n \n

# general

\n 0 online\n

\n \n \n \n

\n\n \n

\n \n \n

\n\n \n

\n \n

\n \n \n

\n \n

\n\n \n

\n \n \n \n \n \n

\n\n

\n \n

\n\n

\n \n \n \n \n

\n \n\n \n

Members

\n \n

\n \n\n \n

\n\n \n

Connecting…

\n \n \n \n

\n\n \n

\n \n

0:00

\n \n \n Send\n \n

\n\n \n \n\n \n \n\n \n \n",[67],"16640816-5993-11f1-833e-ee650bb23af1","app.js","eece2246-5992-11f1-a189-ee650bb23af1",13,["D",1779862369578],"script","// ═══════════════════════════════════════════\n// ROOMS CHAT APP — app.js\n// Full-featured real-time chat with Firebase\n// ═══════════════════════════════════════════\n\nimport {\n get,\n off,\n onDisconnect,\n onValue,\n push,\n ref,\n remove,\n serverTimestamp,\n set,\n update,\n} from \"https://www.gstatic.com/firebasejs/10.12.0/firebase-database.js\";\nimport {\n getDownloadURL,\n ref as storageRef,\n uploadBytes,\n} from \"https://www.gstatic.com/firebasejs/10.12.0/firebase-storage.js\";\n\n// ── Wait for Firebase ──────────────────────\nlet db, storage;\nconst waitFirebase = () =>\n new Promise((res) => {\n if (window.__firebaseDB) {\n db = window.__firebaseDB;\n storage = window.__firebaseStorage;\n res();\n } else {window.addEventListener(\"firebase-ready\", () => {\n db = window.__firebaseDB;\n storage = window.__firebaseStorage;\n res();\n }, { once: true });}\n });\n\n// ═══════════════════════════════════════════\n// STATE\n// ═══════════════════════════════════════════\nlet currentUser = null; // { username, color, uid }\nlet currentRoom = null; // room key string\nlet myRooms = []; // list of room keys\nlet replyTo = null; // { msgId, author, text }\nlet editingMsgId = null;\nlet contextMsgId = null;\nlet mediaRecorder = null;\nlet recordingChunks = [];\nlet recordingTimer = null;\nlet recordingSeconds = 0;\nlet peerConnections = {}; // webrtc peers\nlet localStream = null;\nlet inCall = false;\nlet isMuted = false;\nlet isSpeaker = true;\nlet typingTimeout = null;\nlet searchMode = false;\n\n// ── Avatar colors palette ──────────────────\nconst COLORS = [\n \"#c0392b\",\n \"#8e44ad\",\n \"#2980b9\",\n \"#27ae60\",\n \"#d35400\",\n \"#16a085\",\n \"#c0392b\",\n \"#7f8c8d\",\n \"#f39c12\",\n \"#1abc9c\",\n];\nfunction colorFor(name) {\n let h = 0;\n for (let i = 0; i < name.length; i++) h = name.charCodeAt(i) + ((h << 5) - h);\n return COLORS[Math.abs(h) % COLORS.length];\n}\nfunction initials(name) {\n return name ? name.slice(0, 2).toUpperCase() : \"?\";\n}\n\n// ── Stickers ──────────────────────────────\nconst STICKERS = [\n \"😀\",\n \"😂\",\n \"🥹\",\n \"😎\",\n \"🤩\",\n \"😍\",\n \"🥳\",\n \"😤\",\n \"😭\",\n \"😱\",\n \"🫡\",\n \"🤔\",\n \"🤗\",\n \"😴\",\n \"🤯\",\n \"🥸\",\n \"🤠\",\n \"👻\",\n \"💀\",\n \"🤖\",\n \"👾\",\n \"🐶\",\n \"🐱\",\n \"🦊\",\n \"🐻\",\n \"🐼\",\n \"🦁\",\n \"🐯\",\n \"🦋\",\n \"🌸\",\n \"🔥\",\n \"⭐\",\n \"💫\",\n \"✨\",\n \"🎉\",\n \"🎊\",\n \"💎\",\n \"🏆\",\n \"💡\",\n \"❤️\",\n \"🧡\",\n \"💛\",\n \"💚\",\n \"💙\",\n \"💜\",\n \"🖤\",\n \"🤍\",\n \"💔\",\n \"💯\",\n \"🎵\",\n \"🎮\",\n \"🚀\",\n \"🌙\",\n \"☀️\",\n \"🌈\",\n \"⚡\",\n \"❄️\",\n \"🍕\",\n \"🍔\",\n \"🍩\",\n \"🧋\",\n];\n\n// ═══════════════════════════════════════════\n// DOM REFS\n// ═══════════════════════════════════════════\nconst $ = (id) => document.getElementById(id);\nconst loginScreen = $(\"login-screen\");\nconst chatScreen = $(\"chat-screen\");\nconst loginUsername = $(\"login-username\");\nconst loginRoom = $(\"login-room\");\nconst joinBtn = $(\"join-btn\");\nconst messageInput = $(\"message-input\");\nconst sendBtn = $(\"send-btn\");\nconst messagesList = $(\"messages-list\");\nconst messagesContainer = $(\"messages-container\");\nconst headerRoomName = $(\"header-room-name\");\nconst headerOnline = $(\"header-online-count\");\nconst replyPreview = $(\"reply-preview\");\nconst replyAuthor = $(\"reply-author\");\nconst replyTextPrev = $(\"reply-text-preview\");\nconst cancelReplyBtn = $(\"cancel-reply\");\nconst stickerPicker = $(\"sticker-picker\");\nconst stickerGrid = $(\"sticker-grid\");\nconst stickerBtn = $(\"sticker-btn\");\nconst contextMenu = $(\"context-menu\");\nconst callOverlay = $(\"call-overlay\");\nconst callStatus = $(\"call-status\");\nconst callAvatar = $(\"call-avatar\");\nconst callRoomLabel = $(\"call-room-label\");\nconst callParticipants = $(\"call-participants\");\nconst voiceCallBtn = $(\"voice-call-btn\");\nconst voiceMsgBtn = $(\"voice-msg-btn\");\nconst voiceRecOverlay = $(\"voice-recording-overlay\");\nconst voiceRecTime = $(\"voice-rec-time\");\nconst voiceCancelBtn = $(\"voice-cancel-btn\");\nconst voiceSendBtn = $(\"voice-send-btn\");\nconst callMuteBtn = $(\"call-mute-btn\");\nconst callEndBtn = $(\"call-end-btn\");\nconst callSpeakerBtn = $(\"call-speaker-btn\");\nconst attachPhotoBtn = $(\"attach-photo-btn\");\nconst photoInput = $(\"photo-input\");\nconst lightbox = $(\"lightbox\");\nconst lightboxImg = $(\"lightbox-img\");\nconst lightboxClose = $(\"lightbox-close\");\nconst searchBtn = $(\"search-btn\");\nconst searchBar = $(\"search-bar\");\nconst searchInput = $(\"search-input\");\nconst searchClose = $(\"search-close\");\nconst membersBtn = $(\"members-btn\");\nconst membersPanel = $(\"members-panel\");\nconst membersList = $(\"members-list\");\nconst membersClose = $(\"members-close\");\nconst menuBtn = $(\"menu-btn\");\nconst sidebar = $(\"sidebar\");\nconst sidebarOverlay = $(\"sidebar-overlay\");\nconst sidebarClose = $(\"sidebar-close\");\nconst sidebarAvatar = $(\"sidebar-avatar\");\nconst sidebarUsernameDisplay = $(\"sidebar-username-display\");\nconst roomsList = $(\"rooms-list\");\nconst newRoomInput = $(\"new-room-input\");\nconst newRoomBtn = $(\"new-room-btn\");\nconst logoutBtn = $(\"logout-btn\");\n\n// Toast container\nconst toastContainer = document.createElement(\"div\");\ntoastContainer.className = \"toast-container\";\ndocument.body.appendChild(toastContainer);\n\n// ═══════════════════════════════════════════\n// INIT\n// ═══════════════════════════════════════════\n(async () => {\n await waitFirebase();\n buildStickerGrid();\n bindLoginEvents();\n bindGlobalEvents();\n\n // Restore session\n const saved = sessionStorage.getItem(\"rooms_user\");\n if (saved) {\n try {\n const u = JSON.parse(saved);\n enterChat(u.username, u.room || \"general\");\n } catch {}\n }\n})();\n\n// ═══════════════════════════════════════════\n// STICKER GRID BUILD\n// ═══════════════════════════════════════════\nfunction buildStickerGrid() {\n STICKERS.forEach((emoji) => {\n const el = document.createElement(\"div\");\n el.className = \"sticker-item\";\n el.textContent = emoji;\n el.addEventListener(\"click\", () => {\n sendMessage({ type: \"sticker\", emoji });\n hideStickerPicker();\n });\n stickerGrid.appendChild(el);\n });\n}\n\n// ═══════════════════════════════════════════\n// LOGIN\n// ═══════════════════════════════════════════\nfunction bindLoginEvents() {\n joinBtn.addEventListener(\"click\", handleJoin);\n [loginUsername, loginRoom].forEach((el) => {\n el.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\") handleJoin();\n });\n });\n}\n\nfunction handleJoin() {\n const username = loginUsername.value.trim();\n if (!username) {\n shake(loginUsername);\n return;\n }\n const roomCode = loginRoom.value.trim().toLowerCase().replace(/\\s+/g, \"-\") ||\n \"general\";\n enterChat(username, roomCode);\n}\n\nfunction shake(el) {\n el.style.animation = \"none\";\n el.offsetHeight;\n el.style.animation = \"shake 0.4s ease\";\n el.addEventListener(\"animationend\", () => {\n el.style.animation = \"\";\n }, { once: true });\n}\n\n// ═══════════════════════════════════════════\n// ENTER CHAT\n// ═══════════════════════════════════════════\nasync function enterChat(username, roomCode) {\n const uid = `${username}_${Date.now()}`;\n const color = colorFor(username);\n currentUser = { username, color, uid };\n sessionStorage.setItem(\n \"rooms_user\",\n JSON.stringify({ username, room: roomCode }),\n );\n\n // Build initial room list\n myRooms = [\"general\"];\n if (roomCode !== \"general\" && !myRooms.includes(roomCode)) {\n myRooms.push(roomCode);\n }\n\n // Switch screens\n loginScreen.classList.remove(\"active\");\n chatScreen.classList.add(\"active\");\n\n // Sidebar user display\n sidebarAvatar.textContent = initials(username);\n sidebarAvatar.style.background = color;\n sidebarUsernameDisplay.textContent = username;\n\n renderRoomsList();\n switchRoom(roomCode);\n}\n\n// ═══════════════════════════════════════════\n// ROOMS\n// ═══════════════════════════════════════════\nfunction renderRoomsList() {\n roomsList.innerHTML = \"\";\n myRooms.forEach((r) => {\n const item = document.createElement(\"div\");\n item.className = `room-item${r === currentRoom ? \" active\" : \"\"}`;\n item.dataset.room = r;\n\n const icon = document.createElement(\"div\");\n icon.className = \"room-item-icon\";\n icon.textContent = r === \"general\" ? \"#\" : r.slice(0, 2).toUpperCase();\n\n const name = document.createElement(\"div\");\n name.className = \"room-item-name\";\n name.textContent = r === \"general\" ? \"General\" : `#${r}`;\n\n item.appendChild(icon);\n item.appendChild(name);\n item.addEventListener(\"click\", () => {\n switchRoom(r);\n closeSidebar();\n });\n roomsList.appendChild(item);\n });\n}\n\nfunction switchRoom(roomCode) {\n // Cleanup old listeners\n if (currentRoom) {\n off(ref(db, `rooms/${currentRoom}/messages`));\n off(ref(db, `rooms/${currentRoom}/presence`));\n off(ref(db, `rooms/${currentRoom}/typing`));\n off(ref(db, `rooms/${currentRoom}/call`));\n // Remove presence\n remove(ref(db, `rooms/${currentRoom}/presence/${currentUser.uid}`));\n }\n\n currentRoom = roomCode;\n messagesList.innerHTML = \"\";\n replyTo = null;\n replyPreview.classList.add(\"hidden\");\n\n // Update header\n headerRoomName.textContent = roomCode === \"general\"\n ? \"# General\"\n : `# ${roomCode}`;\n document.title = roomCode === \"general\"\n ? \"Rooms — General\"\n : `Rooms — #${roomCode}`;\n\n // Mark active room in sidebar\n document.querySelectorAll(\".room-item\").forEach((el) => {\n el.classList.toggle(\"active\", el.dataset.room === roomCode);\n });\n\n // Set presence\n const presenceRef = ref(db, `rooms/${roomCode}/presence/${currentUser.uid}`);\n set(presenceRef, {\n username: currentUser.username,\n color: currentUser.color,\n joinedAt: serverTimestamp(),\n });\n onDisconnect(presenceRef).remove();\n\n // Listen to messages\n listenMessages(roomCode);\n // Listen to presence\n listenPresence(roomCode);\n // Listen to typing\n listenTyping(roomCode);\n // Listen to call signals\n listenCallSignals(roomCode);\n}\n\nfunction joinNewRoom(code) {\n if (!code) return;\n const room = code.toLowerCase().replace(/\\s+/g, \"-\");\n if (!myRooms.includes(room)) {\n myRooms.push(room);\n renderRoomsList();\n }\n switchRoom(room);\n}\n\n// ═══════════════════════════════════════════\n// MESSAGES — LISTEN\n// ═══════════════════════════════════════════\nlet renderedIds = new Set();\n\nfunction listenMessages(roomCode) {\n renderedIds.clear();\n const msgsRef = ref(db, `rooms/${roomCode}/messages`);\n onValue(msgsRef, (snap) => {\n const data = snap.val() || {};\n const msgs = Object.entries(data).map(([id, v]) => ({ id, ...v }));\n msgs.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));\n\n // Full re-render (handles edits/deletes/reactions)\n renderMessages(msgs);\n\n // Auto-scroll\n scrollToBottom();\n\n // Mark seen\n markSeen(roomCode, msgs);\n });\n}\n\n// ─── Render all messages ───────────────────\nlet lastDateStr = \"\";\nlet lastSenderGroup = null;\n\nfunction renderMessages(msgs) {\n const scrolledToBottom =\n messagesContainer.scrollHeight - messagesContainer.scrollTop -\n messagesContainer.clientHeight < 80;\n messagesList.innerHTML = \"\";\n lastDateStr = \"\";\n lastSenderGroup = null;\n renderedIds.clear();\n\n msgs.forEach((msg, i) => {\n if (msg.deleted) {\n renderDeletedMsg(msg, msgs[i - 1], msgs[i + 1]);\n return;\n }\n\n // Date divider\n const msgDate = msg.timestamp ? new Date(msg.timestamp) : new Date();\n const dateStr = formatDate(msgDate);\n if (dateStr !== lastDateStr) {\n const div = document.createElement(\"div\");\n div.className = \"date-divider\";\n div.textContent = dateStr;\n messagesList.appendChild(div);\n lastDateStr = dateStr;\n lastSenderGroup = null;\n }\n\n // Typing/search filter\n if (searchMode && searchInput.value.trim()) {\n const q = searchInput.value.toLowerCase();\n const txt = (msg.text || msg.emoji || \"\").toLowerCase();\n if (!txt.includes(q)) return;\n }\n\n renderMsg(msg, msgs[i - 1], msgs[i + 1]);\n renderedIds.add(msg.id);\n });\n\n // Typing indicator slot\n let typingEl = document.getElementById(\"typing-indicator-row\");\n if (!typingEl) {\n typingEl = document.createElement(\"div\");\n typingEl.id = \"typing-indicator-row\";\n typingEl.className = \"typing-indicator hidden\";\n typingEl.innerHTML =\n `

`;\n messagesList.appendChild(typingEl);\n }\n\n if (scrolledToBottom) scrollToBottom();\n}\n\nfunction renderDeletedMsg(msg) {\n const row = document.createElement(\"div\");\n row.className = \"system-msg\";\n row.style.fontStyle = \"italic\";\n row.textContent = \"🗑 Message deleted\";\n messagesList.appendChild(row);\n}\n\nfunction renderMsg(msg, prevMsg, nextMsg) {\n const mine = msg.author === currentUser.username;\n const prevSame = prevMsg && !prevMsg.deleted && prevMsg.author === msg.author;\n const nextSame = nextMsg && !nextMsg.deleted && nextMsg.author === msg.author;\n\n const wrapper = document.createElement(\"div\");\n wrapper.className = `msg-wrapper ${mine ? \"mine\" : \"them\"}`;\n wrapper.dataset.msgId = msg.id;\n\n // Avatar (only show for first in group)\n if (!mine) {\n const av = document.createElement(\"div\");\n av.className = \"avatar\";\n av.textContent = prevSame ? \"\" : initials(msg.author);\n av.style.background = prevSame ? \"transparent\" : colorFor(msg.author);\n av.style.boxShadow = prevSame ? \"none\" : \"\";\n wrapper.appendChild(av);\n }\n\n const content = document.createElement(\"div\");\n content.className = \"msg-content\";\n\n // Author name\n if (!mine && !prevSame) {\n const nameEl = document.createElement(\"div\");\n nameEl.className = \"msg-name\";\n nameEl.textContent = msg.author;\n nameEl.style.color = colorFor(msg.author);\n content.appendChild(nameEl);\n }\n\n // Reply snippet\n if (msg.replyTo) {\n const snippet = document.createElement(\"div\");\n snippet.className = \"msg-reply-snippet\";\n snippet.innerHTML = `${\n escapeHTML(msg.replyTo.author)\n }${escapeHTML(msg.replyTo.text || \"(media)\")}`;\n snippet.addEventListener(\"click\", () => scrollToMessage(msg.replyTo.id));\n content.appendChild(snippet);\n }\n\n // Bubble\n const bubble = buildBubble(msg, mine, prevSame, nextSame);\n content.appendChild(bubble);\n\n // Reactions\n if (msg.reactions && Object.keys(msg.reactions).length > 0) {\n const reacts = buildReactions(msg);\n content.appendChild(reacts);\n }\n\n // Meta (time + seen)\n if (!nextSame) {\n const meta = buildMeta(msg, mine);\n content.appendChild(meta);\n }\n\n wrapper.appendChild(content);\n messagesList.appendChild(wrapper);\n\n // Long-press / right-click context\n bubble.addEventListener(\"contextmenu\", (e) => {\n e.preventDefault();\n showContextMenu(e, msg);\n });\n bubble.addEventListener(\"touchstart\", handleTouchStart, { passive: true });\n bubble.addEventListener(\"touchend\", handleTouchEnd);\n}\n\n// ─── Bubble ───────────────────────────────\nfunction buildBubble(msg, mine, prevSame, nextSame) {\n const bubble = document.createElement(\"div\");\n bubble.className = \"bubble\";\n\n // Group styling\n const pos = prevSame && nextSame\n ? \"mid\"\n : prevSame\n ? \"bot\"\n : nextSame\n ? \"top\"\n : \"\";\n if (pos) bubble.classList.add(pos);\n\n if (msg.type === \"image\") {\n bubble.classList.add(\"image-bubble\");\n const img = document.createElement(\"img\");\n img.src = msg.url;\n img.alt = \"Image\";\n img.loading = \"lazy\";\n img.addEventListener(\"click\", () => openLightbox(msg.url));\n bubble.appendChild(img);\n } else if (msg.type === \"voice\") {\n bubble.classList.add(\"voice-bubble\");\n bubble.appendChild(buildVoicePlayer(msg));\n } else if (msg.type === \"sticker\") {\n bubble.classList.add(\"sticker-bubble\");\n const s = document.createElement(\"span\");\n s.className = \"sticker-img\";\n s.textContent = msg.emoji;\n bubble.appendChild(s);\n } else {\n // Text\n const span = document.createElement(\"span\");\n span.innerHTML = linkify(escapeHTML(msg.text || \"\"));\n bubble.appendChild(span);\n if (msg.edited) {\n const ed = document.createElement(\"span\");\n ed.className = \"edited-label\";\n ed.textContent = \"(edited)\";\n bubble.appendChild(ed);\n }\n }\n\n return bubble;\n}\n\n// ─── Voice Player ─────────────────────────\nfunction buildVoicePlayer(msg) {\n const wrap = document.createElement(\"div\");\n wrap.style.display = \"contents\";\n\n const playBtn = document.createElement(\"button\");\n playBtn.className = \"voice-play-btn\";\n playBtn.innerHTML =\n ``;\n\n const waveform = document.createElement(\"div\");\n waveform.className = \"voice-waveform\";\n const bars = msg.waveform || Array.from({ length: 20 }, () => Math.random());\n bars.forEach((h) => {\n const bar = document.createElement(\"span\");\n bar.style.height = `${Math.max(3, Math.round(h * 24))}px`;\n waveform.appendChild(bar);\n });\n\n const dur = document.createElement(\"span\");\n dur.className = \"voice-duration\";\n dur.textContent = formatDuration(msg.duration || 0);\n\n let audio = null;\n let playing = false;\n\n playBtn.addEventListener(\"click\", () => {\n if (!audio) {\n audio = new Audio(msg.url);\n audio.onended = () => {\n playing = false;\n playBtn.innerHTML =\n ``;\n };\n }\n if (playing) {\n audio.pause();\n playing = false;\n playBtn.innerHTML =\n ``;\n } else {\n audio.play();\n playing = true;\n playBtn.innerHTML =\n ``;\n }\n });\n\n wrap.appendChild(playBtn);\n wrap.appendChild(waveform);\n wrap.appendChild(dur);\n return wrap;\n}\n\n// ─── Reactions ────────────────────────────\nfunction buildReactions(msg) {\n const wrap = document.createElement(\"div\");\n wrap.className = \"msg-reactions\";\n\n // Count by emoji\n const counts = {};\n const myReacts = new Set();\n Object.entries(msg.reactions).forEach(([uid, emoji]) => {\n counts[emoji] = (counts[emoji] || 0) + 1;\n if (uid === currentUser.uid) myReacts.add(emoji);\n });\n\n Object.entries(counts).forEach(([emoji, count]) => {\n const pill = document.createElement(\"div\");\n pill.className = `reaction-pill${myReacts.has(emoji) ? \" mine\" : \"\"}`;\n pill.innerHTML = `${emoji} ${count}`;\n pill.title = \"Click to react\";\n pill.addEventListener(\"click\", () => toggleReaction(msg.id, emoji));\n wrap.appendChild(pill);\n });\n\n return wrap;\n}\n\n// ─── Meta ─────────────────────────────────\nfunction buildMeta(msg, mine) {\n const meta = document.createElement(\"div\");\n meta.className = \"msg-meta\";\n\n const time = document.createElement(\"span\");\n time.textContent = formatTime(\n msg.timestamp ? new Date(msg.timestamp) : new Date(),\n );\n meta.appendChild(time);\n\n if (mine && msg.seenBy) {\n const seenUsers = Object.values(msg.seenBy).filter((u) =>\n u !== currentUser.username\n );\n if (seenUsers.length > 0) {\n const seenWrap = document.createElement(\"div\");\n seenWrap.className = \"seen-avatars\";\n seenWrap.title = `Seen by: ${seenUsers.join(\", \")}`;\n seenUsers.slice(0, 3).forEach((name) => {\n const av = document.createElement(\"div\");\n av.className = \"seen-av\";\n av.textContent = initials(name);\n av.style.background = colorFor(name);\n seenWrap.appendChild(av);\n });\n meta.appendChild(seenWrap);\n } else {\n const sent = document.createElement(\"span\");\n sent.textContent = \"✓\";\n sent.style.opacity = \"0.4\";\n meta.appendChild(sent);\n }\n }\n\n return meta;\n}\n\n// ═══════════════════════════════════════════\n// SEND MESSAGE\n// ═══════════════════════════════════════════\nfunction sendMessage(payload) {\n if (!currentRoom || !currentUser) return;\n\n const msgData = {\n author: currentUser.username,\n authorColor: currentUser.color,\n timestamp: Date.now(),\n ...payload,\n };\n\n if (replyTo) {\n msgData.replyTo = {\n id: replyTo.msgId,\n author: replyTo.author,\n text: replyTo.text,\n };\n cancelReply();\n }\n\n push(ref(db, `rooms/${currentRoom}/messages`), msgData);\n}\n\nfunction handleSend() {\n if (editingMsgId) {\n commitEdit();\n return;\n }\n\n const text = messageInput.innerText.trim();\n if (!text) return;\n\n sendMessage({ type: \"text\", text });\n messageInput.innerText = \"\";\n messageInput.dispatchEvent(new Event(\"input\"));\n}\n\n// ═══════════════════════════════════════════\n// EDIT MESSAGE\n// ═══════════════════════════════════════════\nfunction startEdit(msgId, currentText) {\n editingMsgId = msgId;\n messageInput.innerText = currentText;\n messageInput.focus();\n // Move cursor to end\n const range = document.createRange();\n range.selectNodeContents(messageInput);\n range.collapse(false);\n window.getSelection().removeAllRanges();\n window.getSelection().addRange(range);\n sendBtn.style.background = \"#f39c12\";\n showToast(\"✏️ Editing message — press Send to confirm\");\n}\n\nfunction commitEdit() {\n const text = messageInput.innerText.trim();\n if (!text) {\n cancelEdit();\n return;\n }\n\n update(ref(db, `rooms/${currentRoom}/messages/${editingMsgId}`), {\n text,\n edited: true,\n editedAt: Date.now(),\n });\n\n editingMsgId = null;\n messageInput.innerText = \"\";\n sendBtn.style.background = \"\";\n}\n\nfunction cancelEdit() {\n editingMsgId = null;\n messageInput.innerText = \"\";\n sendBtn.style.background = \"\";\n}\n\n// ═══════════════════════════════════════════\n// DELETE MESSAGE\n// ═══════════════════════════════════════════\nfunction deleteMessage(msgId) {\n update(ref(db, `rooms/${currentRoom}/messages/${msgId}`), { deleted: true });\n}\n\n// ═══════════════════════════════════════════\n// REACTIONS\n// ═══════════════════════════════════════════\nfunction toggleReaction(msgId, emoji) {\n const reactionRef = ref(\n db,\n `rooms/${currentRoom}/messages/${msgId}/reactions/${currentUser.uid}`,\n );\n get(reactionRef).then((snap) => {\n if (snap.exists() && snap.val() === emoji) {\n remove(reactionRef);\n } else {\n set(reactionRef, emoji);\n }\n });\n}\n\n// ═══════════════════════════════════════════\n// REPLY\n// ═══════════════════════════════════════════\nfunction startReply(msgId, author, text) {\n replyTo = { msgId, author, text };\n replyAuthor.textContent = author;\n replyTextPrev.textContent = text || \"(media)\";\n replyPreview.classList.remove(\"hidden\");\n messageInput.focus();\n}\n\nfunction cancelReply() {\n replyTo = null;\n replyPreview.classList.add(\"hidden\");\n}\n\n// ═══════════════════════════════════════════\n// SEEN\n// ═══════════════════════════════════════════\nfunction markSeen(roomCode, msgs) {\n msgs.forEach((msg) => {\n if (msg.author === currentUser.username) return;\n if (msg.deleted) return;\n const seenRef = ref(\n db,\n `rooms/${roomCode}/messages/${msg.id}/seenBy/${currentUser.uid}`,\n );\n set(seenRef, currentUser.username);\n });\n}\n\n// ═══════════════════════════════════════════\n// PRESENCE / ONLINE\n// ═══════════════════════════════════════════\nfunction listenPresence(roomCode) {\n const presRef = ref(db, `rooms/${roomCode}/presence`);\n onValue(presRef, (snap) => {\n const data = snap.val() || {};\n const members = Object.values(data);\n headerOnline.textContent = `${members.length} online`;\n renderMembers(members);\n });\n}\n\nfunction renderMembers(members) {\n membersList.innerHTML = \"\";\n members.forEach((m) => {\n const item = document.createElement(\"div\");\n item.className = \"member-item\";\n\n const av = document.createElement(\"div\");\n av.className = \"avatar\";\n av.textContent = initials(m.username);\n av.style.background = m.color || colorFor(m.username);\n\n const name = document.createElement(\"div\");\n name.className = \"member-name\";\n name.textContent = m.username;\n\n item.appendChild(av);\n item.appendChild(name);\n\n if (m.username === currentUser.username) {\n const you = document.createElement(\"span\");\n you.className = \"member-you\";\n you.textContent = \"you\";\n item.appendChild(you);\n }\n\n membersList.appendChild(item);\n });\n}\n\n// ═══════════════════════════════════════════\n// TYPING INDICATOR\n// ═══════════════════════════════════════════\nfunction listenTyping(roomCode) {\n const typRef = ref(db, `rooms/${roomCode}/typing`);\n onValue(typRef, (snap) => {\n const data = snap.val() || {};\n const others = Object.entries(data)\n .filter(([uid, v]) =>\n uid !== currentUser.uid && v && (Date.now() - v.ts < 4000)\n )\n .map(([, v]) => v.username);\n\n const el = document.getElementById(\"typing-indicator-row\");\n if (!el) return;\n if (others.length === 0) {\n el.classList.add(\"hidden\");\n } else {\n el.classList.remove(\"hidden\");\n const text = others.length === 1\n ? `${others[0]} is typing…`\n : `${others.slice(0, -1).join(\", \")} and ${\n others[others.length - 1]\n } are typing…`;\n el.querySelector(\"#typing-text\").textContent = text;\n }\n });\n}\n\nfunction sendTypingSignal() {\n if (!currentRoom || !currentUser) return;\n set(ref(db, `rooms/${currentRoom}/typing/${currentUser.uid}`), {\n username: currentUser.username,\n ts: Date.now(),\n });\n clearTimeout(typingTimeout);\n typingTimeout = setTimeout(() => {\n remove(ref(db, `rooms/${currentRoom}/typing/${currentUser.uid}`));\n }, 3000);\n}\n\n// ═══════════════════════════════════════════\n// VOICE MESSAGES\n// ═══════════════════════════════════════════\nasync function startVoiceRecording() {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n recordingChunks = [];\n mediaRecorder = new MediaRecorder(stream);\n mediaRecorder.ondataavailable = (e) => recordingChunks.push(e.data);\n mediaRecorder.start(100);\n\n voiceRecOverlay.classList.remove(\"hidden\");\n voiceMsgBtn.classList.add(\"recording\");\n recordingSeconds = 0;\n voiceRecTime.textContent = \"0:00\";\n recordingTimer = setInterval(() => {\n recordingSeconds++;\n voiceRecTime.textContent = formatDuration(recordingSeconds);\n }, 1000);\n } catch (err) {\n showToast(\"🎙️ Microphone access denied\");\n }\n}\n\nfunction stopVoiceRecording(send) {\n clearInterval(recordingTimer);\n voiceRecOverlay.classList.add(\"hidden\");\n voiceMsgBtn.classList.remove(\"recording\");\n\n if (!mediaRecorder) return;\n mediaRecorder.stop();\n mediaRecorder.stream.getTracks().forEach((t) => t.stop());\n\n if (!send) {\n mediaRecorder = null;\n return;\n }\n\n const duration = recordingSeconds;\n mediaRecorder.onstop = async () => {\n const blob = new Blob(recordingChunks, { type: \"audio/webm\" });\n // Generate waveform data (random but seeded for consistency)\n const waveform = Array.from({ length: 20 }, () => Math.random());\n\n try {\n const sRef = storageRef(\n storage,\n `rooms/${currentRoom}/voice/${Date.now()}_${currentUser.uid}.webm`,\n );\n const snap = await uploadBytes(sRef, blob);\n const url = await getDownloadURL(snap.ref);\n sendMessage({ type: \"voice\", url, duration, waveform });\n } catch (err) {\n // Fallback: send as base64 data URL\n const reader = new FileReader();\n reader.onload = () => {\n sendMessage({ type: \"voice\", url: reader.result, duration, waveform });\n };\n reader.readAsDataURL(blob);\n }\n mediaRecorder = null;\n };\n}\n\n// ═══════════════════════════════════════════\n// PHOTO UPLOAD\n// ═══════════════════════════════════════════\nasync function uploadPhoto(file) {\n if (!file) return;\n if (!file.type.startsWith(\"image/\")) {\n showToast(\"Only images allowed\");\n return;\n }\n if (file.size > 10 * 1024 * 1024) {\n showToast(\"Image too large (max 10MB)\");\n return;\n }\n\n showToast(\"📤 Uploading image…\");\n\n try {\n const sRef = storageRef(\n storage,\n `rooms/${currentRoom}/images/${Date.now()}_${currentUser.uid}`,\n );\n const snap = await uploadBytes(sRef, file);\n const url = await getDownloadURL(snap.ref);\n sendMessage({ type: \"image\", url });\n } catch (err) {\n // Fallback: read as base64\n const reader = new FileReader();\n reader.onload = () => {\n sendMessage({ type: \"image\", url: reader.result });\n };\n reader.readAsDataURL(file);\n }\n}\n\n// ═══════════════════════════════════════════\n// VOICE CALL (WebRTC)\n// ═══════════════════════════════════════════\nconst ICE_SERVERS = { iceServers: [{ urls: \"stun:stun.l.google.com:19302\" }] };\n\nfunction listenCallSignals(roomCode) {\n const callRef = ref(db, `rooms/${roomCode}/call`);\n onValue(callRef, async (snap) => {\n const data = snap.val();\n if (!data) return;\n if (inCall) return;\n\n // Incoming call from someone else\n if (\n data.caller && data.caller !== currentUser.uid &&\n data.status === \"ringing\"\n ) {\n showIncomingCall(data, roomCode);\n }\n });\n}\n\nfunction showIncomingCall(data, roomCode) {\n callAvatar.textContent = initials(data.callerName);\n callAvatar.style.background = colorFor(data.callerName);\n callRoomLabel.textContent = `#${roomCode}`;\n callStatus.textContent = `${data.callerName} is calling…`;\n callOverlay.classList.remove(\"hidden\");\n\n // Auto-join (no reject UI for simplicity - just join)\n setTimeout(() => joinCall(roomCode, data.caller), 1000);\n}\n\nasync function startCall() {\n if (inCall) return;\n try {\n localStream = await navigator.mediaDevices.getUserMedia({ audio: true });\n } catch (err) {\n showToast(\"🎙️ Microphone access denied\");\n return;\n }\n\n inCall = true;\n callAvatar.textContent = initials(currentUser.username);\n callAvatar.style.background = currentUser.color;\n callRoomLabel.textContent = `#${currentRoom}`;\n callStatus.textContent = \"Calling…\";\n callOverlay.classList.remove(\"hidden\");\n\n // Signal ringing\n set(ref(db, `rooms/${currentRoom}/call`), {\n caller: currentUser.uid,\n callerName: currentUser.username,\n status: \"ringing\",\n startedAt: Date.now(),\n });\n\n // Listen for others joining\n const callRef = ref(db, `rooms/${currentRoom}/call/peers`);\n onValue(callRef, async (snap) => {\n const peers = snap.val() || {};\n for (const [peerUid, offer] of Object.entries(peers)) {\n if (peerUid === currentUser.uid) continue;\n if (peerConnections[peerUid]) continue;\n await createPeerConnection(peerUid, false, offer);\n }\n });\n\n callStatus.textContent = \"Waiting for others…\";\n updateCallParticipants();\n}\n\nasync function joinCall(roomCode, callerUid) {\n if (inCall) return;\n try {\n localStream = await navigator.mediaDevices.getUserMedia({ audio: true });\n } catch (err) {\n showToast(\"🎙️ Microphone access denied\");\n return;\n }\n\n inCall = true;\n callStatus.textContent = \"Connected\";\n\n // Create offer for the caller\n await createPeerConnection(callerUid, true, null);\n updateCallParticipants();\n}\n\nasync function createPeerConnection(peerUid, createOffer, existingOffer) {\n const pc = new RTCPeerConnection(ICE_SERVERS);\n peerConnections[peerUid] = pc;\n\n if (localStream) {\n localStream.getTracks().forEach((t) => pc.addTrack(t, localStream));\n }\n\n pc.ontrack = (e) => {\n const audio = new Audio();\n audio.srcObject = e.streams[0];\n audio.autoplay = true;\n document.body.appendChild(audio);\n };\n\n pc.onicecandidate = (e) => {\n if (e.candidate) {\n push(\n ref(db, `rooms/${currentRoom}/call/ice/${peerUid}/${currentUser.uid}`),\n e.candidate.toJSON(),\n );\n }\n };\n\n if (createOffer) {\n const offer = await pc.createOffer();\n await pc.setLocalDescription(offer);\n set(ref(db, `rooms/${currentRoom}/call/peers/${currentUser.uid}`), {\n offer: offer.sdp,\n type: offer.type,\n });\n\n // Wait for answer\n const answerRef = ref(\n db,\n `rooms/${currentRoom}/call/answers/${currentUser.uid}`,\n );\n onValue(answerRef, async (snap) => {\n const ans = snap.val();\n if (ans && pc.signalingState !== \"stable\") {\n await pc.setRemoteDescription(new RTCSessionDescription(ans));\n }\n });\n } else if (existingOffer) {\n await pc.setRemoteDescription(\n new RTCSessionDescription({\n type: existingOffer.type,\n sdp: existingOffer.offer,\n }),\n );\n const answer = await pc.createAnswer();\n await pc.setLocalDescription(answer);\n set(ref(db, `rooms/${currentRoom}/call/answers/${peerUid}`), {\n type: answer.type,\n sdp: answer.sdp,\n });\n }\n\n // Listen for ICE candidates\n const iceRef = ref(\n db,\n `rooms/${currentRoom}/call/ice/${currentUser.uid}/${peerUid}`,\n );\n onValue(iceRef, (snap) => {\n snap.forEach((child) => {\n const cand = child.val();\n if (cand) pc.addIceCandidate(new RTCIceCandidate(cand)).catch(() => {});\n });\n });\n\n callStatus.textContent = \"Connected\";\n}\n\nfunction endCall() {\n inCall = false;\n Object.values(peerConnections).forEach((pc) => pc.close());\n peerConnections = {};\n if (localStream) {\n localStream.getTracks().forEach((t) => t.stop());\n localStream = null;\n }\n\n // Remove all audio elements\n document.querySelectorAll(\"audio\").forEach((a) => a.remove());\n\n // Clear call signal\n remove(ref(db, `rooms/${currentRoom}/call`));\n\n callOverlay.classList.add(\"hidden\");\n callParticipants.innerHTML = \"\";\n}\n\nfunction updateCallParticipants() {\n callParticipants.innerHTML = \"\";\n const item = document.createElement(\"div\");\n item.className = \"call-participant\";\n const av = document.createElement(\"div\");\n av.className = \"avatar\";\n av.textContent = initials(currentUser.username);\n av.style.background = currentUser.color;\n const name = document.createElement(\"div\");\n name.textContent = currentUser.username;\n item.appendChild(av);\n item.appendChild(name);\n callParticipants.appendChild(item);\n}\n\n// ═══════════════════════════════════════════\n// CONTEXT MENU\n// ═══════════════════════════════════════════\nlet touchTimer = null;\nfunction handleTouchStart(e) {\n const msg = getMessageFromEvent(e);\n touchTimer = setTimeout(() => showContextMenu(e.touches[0], msg), 500);\n}\nfunction handleTouchEnd() {\n clearTimeout(touchTimer);\n}\n\nfunction getMessageFromEvent(e) {\n const wrapper = e.currentTarget.closest(\".msg-wrapper\");\n if (!wrapper) return null;\n const msgId = wrapper.dataset.msgId;\n return { id: msgId, _wrapper: wrapper };\n}\n\nfunction showContextMenu(e, msg) {\n if (!msg) return;\n contextMsgId = msg.id || msg._wrapper?.dataset?.msgId;\n if (!contextMsgId) return;\n\n const x = e.clientX || e.touches?.[0]?.clientX || 0;\n const y = e.clientY || e.touches?.[0]?.clientY || 0;\n\n contextMenu.classList.remove(\"hidden\");\n const rect = contextMenu.getBoundingClientRect();\n const maxX = window.innerWidth - rect.width - 8;\n const maxY = window.innerHeight - rect.height - 8;\n contextMenu.style.left = Math.min(x, maxX) + \"px\";\n contextMenu.style.top = Math.min(y, maxY) + \"px\";\n}\n\nfunction hideContextMenu() {\n contextMenu.classList.add(\"hidden\");\n contextMsgId = null;\n}\n\n// ═══════════════════════════════════════════\n// LIGHTBOX\n// ═══════════════════════════════════════════\nfunction openLightbox(url) {\n lightboxImg.src = url;\n lightbox.classList.remove(\"hidden\");\n}\nfunction closeLightboxFn() {\n lightbox.classList.add(\"hidden\");\n lightboxImg.src = \"\";\n}\n\n// ═══════════════════════════════════════════\n// STICKER PICKER\n// ═══════════════════════════════════════════\nfunction toggleStickerPicker() {\n stickerPicker.classList.toggle(\"hidden\");\n}\nfunction hideStickerPicker() {\n stickerPicker.classList.add(\"hidden\");\n}\n\n// ═══════════════════════════════════════════\n// SEARCH\n// ═══════════════════════════════════════════\nfunction toggleSearch() {\n searchMode = !searchMode;\n searchBar.classList.toggle(\"hidden\", !searchMode);\n if (searchMode) searchInput.focus();\n else {\n searchInput.value = \"\";\n renderAllMessages();\n }\n}\n\nfunction renderAllMessages() {\n // Trigger re-render by reading current messages\n off(ref(db, `rooms/${currentRoom}/messages`));\n listenMessages(currentRoom);\n}\n\n// ═══════════════════════════════════════════\n// SIDEBAR\n// ═══════════════════════════════════════════\nfunction openSidebar() {\n sidebar.classList.add(\"open\");\n sidebarOverlay.classList.add(\"visible\");\n}\nfunction closeSidebar() {\n sidebar.classList.remove(\"open\");\n sidebarOverlay.classList.remove(\"visible\");\n}\n\n// ═══════════════════════════════════════════\n// UTILITY\n// ═══════════════════════════════════════════\nfunction scrollToBottom() {\n requestAnimationFrame(() => {\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n });\n}\n\nfunction scrollToMessage(msgId) {\n const el = document.querySelector(`[data-msg-id=\"${msgId}\"]`);\n if (el) {\n el.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n el.style.animation = \"highlightMsg 1s ease\";\n }\n}\n\nfunction formatTime(date) {\n return date.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n}\n\nfunction formatDate(date) {\n const today = new Date();\n const yesterday = new Date(today);\n yesterday.setDate(yesterday.getDate() - 1);\n if (date.toDateString() === today.toDateString()) return \"Today\";\n if (date.toDateString() === yesterday.toDateString()) return \"Yesterday\";\n return date.toLocaleDateString([], {\n weekday: \"long\",\n month: \"short\",\n day: \"numeric\",\n });\n}\n\nfunction formatDuration(seconds) {\n const m = Math.floor(seconds / 60);\n const s = seconds % 60;\n return `${m}:${String(s).padStart(2, \"0\")}`;\n}\n\nfunction escapeHTML(str) {\n return String(str).replace(/&/g, \"&\").replace(//g,\n \">\",\n ).replace(/\"/g, \""\");\n}\n\nfunction linkify(text) {\n return text.replace(\n /(https?:\\/\\/[^\\s<]+)/g,\n '$1',\n );\n}\n\nfunction showToast(msg, duration = 2500) {\n const t = document.createElement(\"div\");\n t.className = \"toast\";\n t.textContent = msg;\n toastContainer.appendChild(t);\n setTimeout(() => {\n t.style.opacity = \"0\";\n t.style.transition = \"opacity 0.3s\";\n setTimeout(() => t.remove(), 300);\n }, duration);\n}\n\n// ═══════════════════════════════════════════\n// GLOBAL EVENT BINDINGS\n// ═══════════════════════════════════════════\nfunction bindGlobalEvents() {\n // ── Send ──\n sendBtn.addEventListener(\"click\", handleSend);\n messageInput.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n if (e.key === \"Escape\" && editingMsgId) cancelEdit();\n });\n messageInput.addEventListener(\"input\", sendTypingSignal);\n\n // ── Reply ──\n cancelReplyBtn.addEventListener(\"click\", cancelReply);\n\n // ── Stickers ──\n stickerBtn.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n toggleStickerPicker();\n });\n\n // ── Photo ──\n attachPhotoBtn.addEventListener(\"click\", () => photoInput.click());\n photoInput.addEventListener(\"change\", (e) => {\n const file = e.target.files[0];\n if (file) uploadPhoto(file);\n photoInput.value = \"\";\n });\n\n // ── Voice Message ──\n voiceMsgBtn.addEventListener(\"click\", () => {\n if (mediaRecorder && mediaRecorder.state === \"recording\") return;\n startVoiceRecording();\n });\n voiceCancelBtn.addEventListener(\"click\", () => stopVoiceRecording(false));\n voiceSendBtn.addEventListener(\"click\", () => stopVoiceRecording(true));\n\n // ── Voice Call ──\n voiceCallBtn.addEventListener(\"click\", startCall);\n callEndBtn.addEventListener(\"click\", endCall);\n callMuteBtn.addEventListener(\"click\", () => {\n isMuted = !isMuted;\n if (localStream) {\n localStream.getAudioTracks().forEach((t) => t.enabled = !isMuted);\n }\n callMuteBtn.classList.toggle(\"active\", isMuted);\n callMuteBtn.title = isMuted ? \"Unmute\" : \"Mute\";\n });\n callSpeakerBtn.addEventListener(\"click\", () => {\n isSpeaker = !isSpeaker;\n callSpeakerBtn.classList.toggle(\"active\", !isSpeaker);\n showToast(isSpeaker ? \"🔊 Speaker on\" : \"🔈 Speaker off\");\n });\n\n // ── Search ──\n searchBtn.addEventListener(\"click\", toggleSearch);\n searchClose.addEventListener(\"click\", toggleSearch);\n searchInput.addEventListener(\"input\", () => {\n off(ref(db, `rooms/${currentRoom}/messages`));\n listenMessages(currentRoom);\n });\n\n // ── Members Panel ──\n membersBtn.addEventListener(\"click\", () => {\n membersPanel.classList.toggle(\"hidden\");\n });\n membersClose.addEventListener(\n \"click\",\n () => membersPanel.classList.add(\"hidden\"),\n );\n\n // ── Sidebar ──\n menuBtn.addEventListener(\"click\", openSidebar);\n sidebarClose.addEventListener(\"click\", closeSidebar);\n sidebarOverlay.addEventListener(\"click\", closeSidebar);\n newRoomBtn.addEventListener(\"click\", () => {\n const code = newRoomInput.value.trim();\n if (code) {\n joinNewRoom(code);\n newRoomInput.value = \"\";\n }\n });\n newRoomInput.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\") {\n const code = newRoomInput.value.trim();\n if (code) {\n joinNewRoom(code);\n newRoomInput.value = \"\";\n }\n }\n });\n\n // ── Logout ──\n logoutBtn.addEventListener(\"click\", () => {\n if (currentRoom) {\n remove(ref(db, `rooms/${currentRoom}/presence/${currentUser.uid}`));\n }\n sessionStorage.removeItem(\"rooms_user\");\n currentUser = null;\n currentRoom = null;\n myRooms = [];\n chatScreen.classList.remove(\"active\");\n loginScreen.classList.add(\"active\");\n loginUsername.value = \"\";\n loginRoom.value = \"\";\n messagesList.innerHTML = \"\";\n });\n\n // ── Lightbox ──\n lightboxClose.addEventListener(\"click\", closeLightboxFn);\n lightbox.addEventListener(\"click\", (e) => {\n if (e.target === lightbox) closeLightboxFn();\n });\n\n // ── Context Menu ──\n document.addEventListener(\"click\", (e) => {\n if (!contextMenu.contains(e.target)) hideContextMenu();\n if (!stickerPicker.contains(e.target) && e.target !== stickerBtn) {\n hideStickerPicker();\n }\n });\n\n contextMenu.addEventListener(\"click\", async (e) => {\n const item = e.target.closest(\"[data-action]\");\n const emojiEl = e.target.closest(\"[data-emoji]\");\n\n if (emojiEl) {\n if (contextMsgId) toggleReaction(contextMsgId, emojiEl.dataset.emoji);\n hideContextMenu();\n return;\n }\n\n if (!item || !contextMsgId) return;\n const action = item.dataset.action;\n const msgId = contextMsgId;\n hideContextMenu();\n\n if (action === \"reply\") {\n // Get message data to build reply\n const snap = await get(ref(db, `rooms/${currentRoom}/messages/${msgId}`));\n const msg = snap.val();\n if (msg) startReply(msgId, msg.author, msg.text || \"\");\n } else if (action === \"edit\") {\n const snap = await get(ref(db, `rooms/${currentRoom}/messages/${msgId}`));\n const msg = snap.val();\n if (\n msg && msg.author === currentUser.username && msg.type !== \"image\" &&\n msg.type !== \"voice\"\n ) {\n startEdit(msgId, msg.text);\n } else {\n showToast(\"Can only edit your own text messages\");\n }\n } else if (action === \"copy\") {\n const snap = await get(ref(db, `rooms/${currentRoom}/messages/${msgId}`));\n const msg = snap.val();\n if (msg && msg.text) {\n navigator.clipboard?.writeText(msg.text).then(() =>\n showToast(\"📋 Copied!\")\n );\n }\n } else if (action === \"delete\") {\n const snap = await get(ref(db, `rooms/${currentRoom}/messages/${msgId}`));\n const msg = snap.val();\n if (msg && msg.author === currentUser.username) {\n if (confirm(\"Delete this message?\")) deleteMessage(msgId);\n } else {\n showToast(\"Can only delete your own messages\");\n }\n }\n });\n\n // ── Drag & Drop images ──\n document.addEventListener(\"dragover\", (e) => e.preventDefault());\n document.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n const file = e.dataTransfer.files[0];\n if (file && file.type.startsWith(\"image/\") && currentRoom) {\n uploadPhoto(file);\n }\n });\n\n // ── Paste images ──\n document.addEventListener(\"paste\", (e) => {\n const item = Array.from(e.clipboardData.items).find((i) =>\n i.type.startsWith(\"image/\")\n );\n if (item && currentRoom) {\n const file = item.getAsFile();\n uploadPhoto(file);\n }\n });\n\n // ── Highlight animation ──\n const style = document.createElement(\"style\");\n style.textContent = `\n @keyframes highlightMsg {\n 0%,100% { background: transparent; }\n 30% { background: rgba(192,57,43,0.2); border-radius: 10px; }\n }\n @keyframes shake {\n 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)}\n }\n `;\n document.head.appendChild(style);\n}",[75],{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":96,"_17":50,"_51":79,"_52":80,"_53":54,"_55":-5,"_87":97,"_18":98},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":93,"_17":71,"_51":24,"_52":72,"_53":54,"_55":-5,"_87":94,"_18":95},{"_36":57,"_13":58,"_39":59,"_41":-5,"_42":43,"_44":60,"_46":47,"_48":90,"_17":62,"_51":63,"_52":64,"_53":54,"_55":-5,"_87":91,"_18":92},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":24,"_52":19,"_53":54,"_55":-5,"_87":88,"_18":89},["D",1779862300547],"children",[],[38],["D",1779862477499],[],[58],["D",1779862409806],[],[67],["D",1779862369578],[],[75],"d38fcd68-5992-11f1-97c9-ee650bb23af1",["D",1779862257469],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","daw","imageUrl","userId","879dd853-1f9b-4527-89a2-2b2075a2a183","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019e680e-0814-7686-8379-aa61a1089ebb","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_152":19},"org",{"_11":12,"_146":147,"_148":19,"_109":110,"_149":150,"_151":54},"branch",{"_17":60,"_13":16,"_36":43,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","take it down","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":99,"_13":14,"_48":201,"_101":-5,"_102":54,"_103":104,"_105":104,"_106":107,"_108":-5,"_109":110,"_111":59,"_112":47,"_113":-5,"_114":-5,"_115":62,"_116":117,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_131":202,"_133":203,"_135":204,"_137":54},[189,190,191,192],"files",[189,190,191,192],"counts",{"_179":62,"_180":181,"_182":62,"_31":183,"_184":185},[171,172,173,174],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":78,"_17":50,"_51":79,"_52":80,"_53":54,"_55":-5,"_18":178},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":71,"_51":24,"_52":72,"_53":54,"_55":-5,"_18":177},{"_36":57,"_13":58,"_39":59,"_41":-5,"_42":43,"_44":60,"_46":47,"_48":61,"_17":62,"_51":63,"_52":64,"_53":54,"_55":-5,"_18":176},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":24,"_52":19,"_53":54,"_55":-5,"_18":175},[38],[58],[67],[75],"pulls","branches",1,"forks",{"_186":62,"_188":62},"connections",{"_186":62,"_187":62},"count","unfilledCount","emptyCount",{"_36":74,"_13":75,"_39":76,"_41":-5,"_42":43,"_44":77,"_46":47,"_48":96,"_17":50,"_51":79,"_52":80,"_53":54,"_55":-5,"_87":199,"_18":200},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":93,"_17":71,"_51":24,"_52":72,"_53":54,"_55":-5,"_87":197,"_18":198},{"_36":57,"_13":58,"_39":59,"_41":-5,"_42":43,"_44":60,"_46":47,"_48":90,"_17":62,"_51":63,"_52":64,"_53":54,"_55":-5,"_87":195,"_18":196},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":86,"_17":50,"_51":24,"_52":19,"_53":54,"_55":-5,"_87":193,"_18":194},[],[38],[],[58],[],[67],[],[75],["D",1779862257469],{"_11":12,"_152":19},{"_11":12,"_146":147,"_148":19,"_109":110,"_149":150,"_151":54},{"_17":60,"_13":16,"_36":43,"_138":99,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":14,"_145":12},"ctx",{"_131":-5,"_168":238,"_239":240,"_241":242,"_243":54,"_244":54,"_245":54,"_246":47,"_247":-5,"_248":-7,"_249":-7,"_250":62,"_251":54,"_252":54,"_253":-5,"_254":54,"_255":54,"_256":54,"_257":-5},"ENV",{"_209":210,"_211":212,"_213":16,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]