Kikko — You were mentioned

You have new mentions in Kikko:

${items}\n

`;\n}\n\nexport function recoveryEmailHtml(password: string): string {\n return `\n

Kikko — Password Recovery

Your Kikko account password is:

${password}

If you did not request this, please change your password immediately after logging in.

`;\n}\n",[],[215,217],"bfa8884e-39a8-11f1-b501-42b51c65c3df","auth.ts","019d96e7-530f-77ca-9826-d992443334db",["D",1776353234823],"import bcrypt from \"npm:bcryptjs\";\n\nexport async function hashPassword(password: string): Promise {\n return bcrypt.hash(password, 10);\n}\n\nexport async function verifyPassword(password: string, hash: string): Promise {\n return bcrypt.compare(password, hash);\n}\n\nexport function generateToken(length = 32): string {\n const arr = new Uint8Array(length);\n crypto.getRandomValues(arr);\n return Array.from(arr).map((b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n",[],[215,224],"bfa8a7c0-39a8-11f1-b501-42b51c65c3df",["D",1776353234823],"directory",[184,185,186],[215],"bfa79718-39a8-11f1-b501-42b51c65c3df","style.css","019d96e7-530f-77ca-9826-d1ee3868de1d",["D",1776353234823],"*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');\n\n:root {\n --brand: #FFDA4A;\n --brand-dark: #e8c420;\n --brand-soft: rgba(255,218,74,0.13);\n --brand-glow: rgba(255,218,74,0.3);\n --bg: #0b0c0f;\n --surface: #131417;\n --surface2: #1a1c22;\n --surface3: #21242d;\n --border: #272a35;\n --border-light: #32364a;\n --accent: #FFDA4A;\n --accent2: #ffe87a;\n --accent-soft: rgba(255,218,74,0.12);\n --accent-glow: rgba(255,218,74,0.22);\n --text: #eeeef3;\n --text-muted: #8a8ea8;\n --text-dim: #484c64;\n --danger: #ef6b6b;\n --danger-bg: rgba(239,107,107,0.08);\n --success: #3dd68c;\n --success-bg: rgba(61,214,140,0.08);\n --warn: #f5a623;\n --msg-other: #1a1c2250;\n --msg-own: rgba(252,220,93,0.09);\n --msg-own-border: rgba(252,220,93,0.22);\n --radius: 18px;\n --radius-sm: 12px;\n --radius-xs: 8px;\n --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n --shadow: 0 4px 24px rgba(0,0,0,0.45);\n --shadow-lg: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04);\n --sidebar-w: 244px;\n --transition: 0.15s ease;\n --logo-fill: #FFDA4A;\n}\n\nbody {\n font-family: var(--font);\n background: var(--bg);\n color: var(--text);\n height: 100vh;\n overflow: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-style: normal;\n}\n\n/* Kill every source of italic globally — except inside AI bubbles where markdown italic is intentional */\n*, *::before, *::after { font-style: normal !important; }\n.ai-bubble em, .ai-bubble em * { font-style: italic !important; }\n\n#root { height: 100vh; display: flex; flex-direction: column; }\n\n/* ─── Scrollbars ─────────────────────────────── */\n* { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }\n::-webkit-scrollbar { width: 5px; height: 5px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 99px; }\n::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }\n\n/* ─── Auth Screen ────────────────────────────── */\n@keyframes authGlow {\n 0% { transform: translate(-50%,-50%) scale(1); opacity: 0.22; }\n 50% { transform: translate(-50%,-50%) scale(1.18); opacity: 0.32; }\n 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.22; }\n}\n.auth-screen {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n background: var(--bg);\n overflow: hidden;\n position: relative;\n}\n.auth-screen::before {\n content: '';\n position: absolute;\n width: 640px; height: 640px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(255,218,74,0.38) 0%, transparent 70%);\n top: 50%; left: 50%;\n transform: translate(-50%,-50%);\n animation: authGlow 7s ease-in-out infinite;\n pointer-events: none;\n}\n.auth-screen::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse 120% 60% at 30% 80%, rgba(255,218,74,0.08) 0%, transparent 60%);\n pointer-events: none;\n}\n\n.auth-card {\n background: var(--surface);\n border: 1px solid var(--border-light);\n border-radius: var(--radius);\n padding: 2.75rem 2.5rem;\n width: 100%;\n max-width: 400px;\n box-shadow: var(--shadow-lg);\n position: relative;\n z-index: 1;\n}\n\n/* ── Kikko Logo Lockup ── */\n.auth-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 1.75rem;\n}\n\n.form-group { margin-bottom: 1rem; }\n.form-group label {\n display: block;\n font-size: 0.775rem;\n color: var(--text-muted);\n margin-bottom: 0.35rem;\n font-weight: 700;\n letter-spacing: 0.03em;\n font-style: normal !important;\n}\n\ninput[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"number\"] {\n width: 100%;\n padding: 0.65rem 0.9rem;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n color: var(--text);\n font-size: 0.9rem;\n font-family: var(--font);\n font-style: normal !important;\n outline: none;\n transition: border-color 0.18s, box-shadow 0.18s;\n}\n\ninput:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }\ninput::placeholder { color: var(--text-dim); font-style: normal !important; }\n\n.btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.4rem;\n padding: 0.6rem 1.2rem;\n border-radius: var(--radius-sm);\n border: none;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: 700;\n font-family: var(--font);\n font-style: normal !important;\n transition: all var(--transition);\n text-decoration: none;\n line-height: 1;\n white-space: nowrap;\n}\n\n.btn:disabled { opacity: 0.45; cursor: not-allowed; }\n.btn-primary { background: var(--brand); color: #1a1608; width: 100%; margin-top: 0.35rem; letter-spacing: 0.01em; }\n.btn-primary:hover:not(:disabled) { background: var(--accent2); box-shadow: 0 6px 24px var(--brand-glow); transform: translateY(-1px); }\n.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }\n.btn-ghost:hover { color: var(--text); border-color: var(--border-light); background: var(--surface2); }\n.btn-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(240,106,106,0.25); }\n.btn-danger:hover { background: rgba(240,106,106,0.15); border-color: rgba(240,106,106,0.4); }\n.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.76rem; border-radius: var(--radius-xs); }\n\n.error-msg { background: var(--danger-bg); border: 1px solid rgba(240,106,106,0.25); color: var(--danger); padding: 0.6rem 0.875rem; border-radius: var(--radius-sm); font-size: 0.82rem; margin-bottom: 1rem; line-height: 1.45; font-style: normal !important; }\n.success-msg { background: var(--success-bg); border: 1px solid rgba(61,214,140,0.25); color: var(--success); padding: 0.6rem 0.875rem; border-radius: var(--radius-sm); font-size: 0.82rem; margin-bottom: 1rem; line-height: 1.45; font-style: normal !important; }\n\n.auth-toggle { text-align: center; margin-top: 1.25rem; font-size: 0.83rem; color: var(--text-muted); }\n.auth-toggle button { background: none; border: none; color: var(--brand); cursor: pointer; font-weight: 700; font-family: var(--font); font-size: inherit; font-style: normal !important; }\n.auth-toggle button:hover { text-decoration: underline; }\n\n/* ─── App Layout ─────────────────────────────── */\n.app-layout {\n display: grid;\n grid-template-columns: var(--sidebar-w) 1fr;\n height: 100vh;\n overflow: hidden;\n}\n\n/* ─── Online dot ─────────────────────────────── */\n.online-dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n background: var(--success);\n flex-shrink: 0;\n box-shadow: 0 0 0 2px var(--surface);\n}\n@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(61,214,140,0); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px rgba(61,214,140,0.35); } }\n.online-dot.pulse { animation: pulse 2s ease-in-out infinite; }\n\n/* ─── Sidebar ────────────────────────────────── */\n.sidebar {\n background: var(--surface);\n border-right: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-shadow: 4px 0 20px rgba(0,0,0,0.2);\n}\n\n.sidebar-header {\n padding: 1.1rem 1rem 0.95rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex-shrink: 0;\n}\n\n/* ── Sidebar logo lockup ── */\n.sidebar-logo-wrap {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n}\n\n.sidebar-section { padding: 0.75rem 0.5rem 0.25rem; flex: 1; overflow-y: auto; min-height: 0; }\n.sidebar-section-title {\n font-size: 0.65rem;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--text-dim);\n padding: 0 0.625rem;\n margin-bottom: 0.4rem;\n font-weight: 800;\n font-style: normal !important;\n}\n\n.room-item {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.52rem 0.7rem;\n border-radius: var(--radius-xs);\n cursor: pointer;\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--text-muted);\n transition: all 0.12s;\n margin-bottom: 2px;\n font-style: normal !important;\n}\n\n.room-item:hover { background: var(--surface2); color: var(--text); }\n.room-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; }\n.room-item .room-icon { flex-shrink: 0; opacity: 0.55; display: flex; align-items: center; }\n.room-item.active .room-icon { opacity: 1; }\n.room-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n/* ─── New room form (stacked) ────────────────── */\n.new-room-form {\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n padding: 0.25rem 0.125rem;\n}\n.new-room-input {\n width: 100%;\n font-size: 0.82rem;\n padding: 0.4rem 0.6rem;\n height: 32px;\n}\n.new-room-actions {\n display: flex;\n gap: 0.3rem;\n align-items: center;\n}\n.new-room-btn { width: 100%; justify-content: flex-start; }\n\n/* ─── Sidebar Footer ─────────────────────────── */\n.sidebar-footer {\n padding: 0.875rem;\n border-top: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n gap: 0.2rem;\n flex-shrink: 0;\n background: var(--surface);\n}\n\n.user-pill {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.5rem 0.4rem;\n border-radius: var(--radius-xs);\n cursor: pointer;\n transition: background var(--transition);\n min-width: 0;\n}\n\n.user-pill:hover { background: var(--surface2); }\n\n.user-pill .avatar {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n background: var(--brand);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 0.72rem;\n overflow: hidden;\n flex-shrink: 0;\n color: #1a1608;\n box-shadow: 0 0 0 2px var(--brand-soft);\n}\n.user-pill .avatar img { width: 100%; height: 100%; object-fit: cover; }\n.user-pill .uname {\n font-size: 0.875rem;\n font-weight: 700;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n/* Admin badge */\n.admin-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 3px;\n font-size: 0.65rem;\n background: var(--brand);\n color: #1a1608;\n padding: 0.15rem 0.5rem;\n border-radius: 99px;\n font-weight: 800;\n letter-spacing: 0.03em;\n line-height: 1;\n white-space: nowrap;\n flex-shrink: 0;\n font-style: normal !important;\n vertical-align: middle;\n}\n.admin-badge svg {\n width: 0.65em;\n height: 0.65em;\n flex-shrink: 0;\n}\n\n/* Sidebar footer action buttons */\n.sidebar-action-btn {\n width: 100%;\n justify-content: flex-start;\n gap: 0.55rem;\n padding: 0.42rem 0.625rem;\n font-size: 0.825rem;\n border-radius: var(--radius-xs);\n background: transparent;\n border: none;\n color: var(--text-muted);\n cursor: pointer;\n display: flex;\n align-items: center;\n transition: all var(--transition);\n font-family: var(--font);\n font-weight: 600;\n font-style: normal !important;\n}\n.sidebar-action-btn:hover { background: var(--surface2); color: var(--text); }\n.sidebar-action-btn svg { flex-shrink: 0; }\n\n/* ─── Chat Area ──────────────────────────────── */\n.chat-area {\n display: flex;\n flex-direction: column;\n overflow: visible;\n background: var(--bg);\n min-width: 0;\n min-height: 0;\n height: 100%;\n}\n\n.chat-header {\n padding: 1rem 1.75rem;\n border-bottom: 1px solid var(--border);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background: var(--surface);\n flex-shrink: 0;\n box-shadow: 0 2px 12px rgba(0,0,0,0.15);\n}\n\n.chat-header-info { flex: 1; min-width: 0; }\n.chat-header-name {\n font-weight: 800;\n font-size: 0.975rem;\n color: var(--text);\n display: flex;\n align-items: center;\n gap: 0.4rem;\n font-style: normal !important;\n}\n.chat-header-sub {\n font-size: 0.72rem;\n color: var(--text-dim);\n margin-top: 2px;\n font-weight: 500;\n font-style: normal !important;\n}\n.chat-header-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }\n\n/* ─── Messages ───────────────────────────────── */\n.messages-container {\n flex: 1;\n overflow-y: auto;\n padding: 1.25rem 1.75rem 0.75rem;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n color: var(--text-dim);\n gap: 0.75rem;\n}\n.empty-state svg { opacity: 0.25; }\n.empty-state p { font-size: 0.875rem; font-style: normal !important; }\n\n/* ─── Date Divider ───────────────────────────── */\n.date-divider {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 1.5rem 0 0.875rem;\n}\n.date-divider::before, .date-divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n opacity: 0.5;\n}\n.date-divider span {\n font-size: 0.7rem;\n color: var(--text-dim);\n white-space: nowrap;\n padding: 0.2rem 0.7rem;\n background: var(--surface2);\n border-radius: 99px;\n font-weight: 700;\n letter-spacing: 0.03em;\n font-style: normal !important;\n}\n\n/* ─── Message Bubbles ────────────────────────── */\n.msg-row {\n display: flex;\n align-items: flex-start;\n margin-bottom: 2px;\n animation: msgIn 0.16s ease;\n}\n@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }\n\n.msg-row.own { flex-direction: row-reverse; justify-content: flex-start; }\n.msg-row.other { flex-direction: row; justify-content: flex-start; }\n.msg-row.group-start { margin-top: 1rem; }\n\n.msg-avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--brand);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 0.7rem;\n flex-shrink: 0;\n overflow: hidden;\n color: #1a1608;\n align-self: flex-start;\n margin-top: 2px;\n}\n.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.msg-avatar.invisible { background: transparent !important; visibility: hidden; }\n\n.msg-bubble-wrap { display: flex; flex-direction: column; }\n.msg-row.own .msg-bubble-wrap { align-items: flex-end; }\n.msg-row.other .msg-bubble-wrap { align-items: flex-start; }\n\n.msg-row { will-change: transform; }\n.msg-row.snapping { transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1); }\n\n.msg-meta {\n display: flex;\n align-items: baseline;\n gap: 0.4rem;\n margin-bottom: 0.25rem;\n padding: 0 0.2rem;\n}\n.msg-row.own .msg-meta { flex-direction: row-reverse; }\n\n.msg-meta .username {\n font-size: 0.8rem;\n font-weight: 800;\n color: var(--text-muted);\n font-style: normal !important;\n}\n.msg-meta .username.is-admin { color: var(--brand); }\n.msg-meta .time {\n font-size: 0.68rem;\n color: var(--text-dim);\n font-style: normal !important;\n}\n\n.msg-bubble {\n padding: 0.6rem 1rem;\n border-radius: var(--radius-sm);\n font-size: 0.9rem;\n line-height: 1.65;\n word-break: break-word;\n font-style: normal !important;\n}\n\n.msg-row.own .msg-bubble {\n background: var(--msg-own);\n border: 1px solid var(--msg-own-border);\n border-radius: var(--radius-sm) 4px var(--radius-sm) var(--radius-sm);\n color: var(--text);\n box-shadow: 0 1px 4px rgba(0,0,0,0.18);\n}\n\n.msg-row.other .msg-bubble {\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 4px var(--radius-sm) var(--radius-sm) var(--radius-sm);\n color: var(--text);\n box-shadow: 0 1px 4px rgba(0,0,0,0.18);\n}\n\n.msg-bubble .mention { color: var(--brand); font-weight: 800; font-style: normal !important; }\n\n/* ─── Blob file attachment ────────────────────── */\n.blob-file {\n display: inline-flex;\n align-items: center;\n gap: 0.6rem;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n padding: 0.6rem 0.9rem;\n cursor: pointer;\n transition: all var(--transition);\n min-width: 180px;\n}\n.blob-file:hover { border-color: var(--brand); background: var(--brand-soft); }\n.blob-file-icon { color: var(--brand); flex-shrink: 0; }\n.blob-file-info { display: flex; flex-direction: column; gap: 0.1rem; }\n.blob-file-label { font-size: 0.82rem; font-weight: 700; color: var(--brand); font-style: normal !important; }\n.blob-file-name { font-size: 0.72rem; color: var(--text-muted); font-style: normal !important; }\n\n/* ─── Message Input ──────────────────────────── */\n.message-input-area {\n padding: 0.875rem 1.75rem 1.1rem;\n border-top: 1px solid var(--border);\n background: var(--surface);\n flex-shrink: 0;\n box-shadow: 0 -2px 12px rgba(0,0,0,0.15);\n}\n\n.input-wrapper {\n display: flex;\n align-items: flex-end;\n gap: 0.5rem;\n background: var(--surface2);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 0.55rem 0.65rem 0.55rem 1rem;\n transition: border-color 0.18s, box-shadow 0.18s;\n}\n.input-wrapper:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }\n\n.msg-textarea {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n color: var(--text);\n font-size: 0.9rem;\n resize: none;\n max-height: 140px;\n min-height: 22px;\n line-height: 1.55;\n font-family: var(--font);\n font-style: normal !important;\n}\n.msg-textarea::placeholder { color: var(--text-dim); font-style: normal !important; }\n.input-actions { display: flex; gap: 0.25rem; align-items: flex-end; }\n\n.icon-btn {\n background: none;\n border: none;\n color: var(--text-dim);\n cursor: pointer;\n padding: 0.35rem;\n border-radius: var(--radius-xs);\n transition: all var(--transition);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n.icon-btn:hover { color: var(--text-muted); background: var(--surface3); }\n.icon-btn.send { color: var(--brand); }\n.icon-btn.send:hover { color: var(--accent2); background: var(--brand-soft); }\n.icon-btn.send:disabled { opacity: 0.35; cursor: not-allowed; }\n\n/* Character counter */\n.char-counter {\n font-size: 0.65rem;\n color: var(--text-dim);\n align-self: flex-end;\n padding-bottom: 0.1rem;\n padding-right: 0.1rem;\n flex-shrink: 0;\n transition: color var(--transition);\n}\n.char-counter.warn { color: var(--warn); }\n.char-counter.danger { color: var(--danger); font-weight: 700; }\n\n/* ─── Panel / Overlay ────────────────────────── */\n.panel-overlay {\n position: fixed; inset: 0;\n background: rgba(0,0,0,0.65);\n display: flex; align-items: center; justify-content: center;\n z-index: 50;\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n}\n\n.panel {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1.5rem;\n width: 100%;\n max-width: 440px;\n box-shadow: 0 32px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03);\n max-height: 88vh;\n overflow-y: auto;\n}\n\n.panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.25rem;\n}\n.panel h2 { font-size: 1rem; font-weight: 800; font-style: normal !important; }\n.settings-section { margin-bottom: 1.5rem; }\n.settings-section h3 {\n font-size: 0.68rem;\n font-weight: 800;\n color: var(--text-dim);\n margin-bottom: 0.6rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-style: normal !important;\n}\n\n.member-row {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.45rem 0.5rem;\n border-radius: var(--radius-xs);\n margin-bottom: 2px;\n transition: background var(--transition);\n}\n.member-row:hover { background: var(--surface2); }\n.member-row .mname { flex: 1; font-size: 0.875rem; font-weight: 600; font-style: normal !important; }\n.member-row .mrole { font-size: 0.67rem; color: var(--text-dim); background: var(--surface3); padding: 0.13rem 0.42rem; border-radius: 99px; font-style: normal !important; }\n\n/* ─── Users Panel ────────────────────────────── */\n.users-panel {\n position: fixed;\n right: 0; top: 0; bottom: 0;\n width: 250px;\n background: var(--surface);\n border-left: 1px solid var(--border);\n z-index: 40;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.22s cubic-bezier(0.34,1.2,0.64,1);\n box-shadow: -12px 0 40px rgba(0,0,0,0.35);\n}\n.users-panel.open { transform: translateX(0); }\n.users-panel-header {\n padding: 1rem;\n border-bottom: 1px solid var(--border);\n font-weight: 800;\n font-size: 0.875rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-style: normal !important;\n}\n.users-panel-list { flex: 1; overflow-y: auto; padding: 0.5rem; }\n.users-panel-search { padding: 0.5rem; border-bottom: 1px solid var(--border); }\n.users-panel-search input { font-size: 0.82rem; }\n\n.user-row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.45rem 0.5rem;\n border-radius: var(--radius-xs);\n font-size: 0.84rem;\n margin-bottom: 1px;\n font-style: normal !important;\n transition: background var(--transition);\n}\n.user-row:hover { background: var(--surface2); }\n.user-mini-avatar {\n width: 28px; height: 28px;\n border-radius: 50%;\n background: var(--brand);\n display: flex; align-items: center; justify-content: center;\n font-size: 0.64rem; font-weight: 800; color: #1a1608;\n flex-shrink: 0; overflow: hidden;\n}\n.user-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }\n\n/* ─── Admin Table ────────────────────────────── */\n.admin-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }\n.admin-table th {\n text-align: left;\n padding: 0.4rem 0.5rem;\n color: var(--text-dim);\n border-bottom: 1px solid var(--border);\n font-weight: 800;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n font-size: 0.67rem;\n font-style: normal !important;\n}\n.admin-table td {\n padding: 0.42rem 0.5rem;\n border-bottom: 1px solid rgba(42,45,56,0.5);\n vertical-align: middle;\n font-style: normal !important;\n}\n.status-ok { color: var(--success); font-size: 0.72rem; font-weight: 700; font-style: normal !important; }\n.status-ban { color: var(--danger); font-size: 0.72rem; font-weight: 700; font-style: normal !important; }\n.status-mute { color: var(--warn); font-size: 0.72rem; font-weight: 700; font-style: normal !important; }\n\n/* ─── Toggle ─────────────────────────────────── */\n.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; }\n.toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }\n.toggle input { opacity: 0; width: 0; height: 0; }\n.toggle-slider { position: absolute; inset: 0; background: var(--border-light); border-radius: 99px; cursor: pointer; transition: 0.2s; }\n.toggle-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: 0.2s; }\n.toggle input:checked + .toggle-slider { background: var(--brand); }\n.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }\n\n/* ─── AI Chat ────────────────────────────────── */\n.ai-screen {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n background: var(--bg);\n overflow: visible;\n}\n\n.ai-header {\n padding: 1rem 1.75rem;\n border-bottom: 1px solid var(--border);\n background: var(--surface);\n display: flex;\n align-items: center;\n gap: 0.75rem;\n flex-shrink: 0;\n position: relative;\n overflow: visible;\n z-index: 10;\n box-shadow: 0 2px 12px rgba(0,0,0,0.15);\n}\n.ai-header-logo { display: flex; align-items: center; gap: 0.6rem; }\n.ai-header-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }\n.ai-header-name { font-weight: 800; font-size: 0.975rem; font-style: normal !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ai-header-model {\n font-size: 0.7rem;\n color: var(--text-muted);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-style: normal !important;\n}\n\n.ai-model-btn {\n white-space: nowrap;\n flex-shrink: 0;\n font-size: 0.75rem;\n}\n.ai-model-picker {\n position: absolute;\n top: calc(100% + 6px);\n right: 0;\n width: 290px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n box-shadow: 0 16px 48px rgba(0,0,0,0.55);\n z-index: 200;\n overflow: hidden;\n}\n.ai-model-option {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.8rem 1rem;\n cursor: pointer;\n transition: background var(--transition);\n border-bottom: 1px solid var(--border);\n}\n.ai-model-option:last-child { border-bottom: none; }\n.ai-model-option:hover { background: var(--surface2); }\n.ai-model-option.selected { background: var(--brand-soft); }\n.ai-model-option-logo { flex-shrink: 0; }\n.ai-model-option-info { flex: 1; min-width: 0; }\n.ai-model-option-name { font-size: 0.875rem; font-weight: 700; font-style: normal !important; }\n.ai-model-option-desc { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; font-style: normal !important; line-height: 1.4; }\n\n.ai-messages {\n flex: 1;\n overflow-y: auto;\n padding: 1.25rem 1.5rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.ai-msg { display: flex; gap: 0.4rem; animation: msgIn 0.16s ease; align-items: flex-end; justify-content: flex-start; }\n.ai-msg.user { flex-direction: row-reverse; }\n\n.ai-avatar {\n width: 32px; height: 32px;\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n align-self: flex-start;\n overflow: hidden;\n margin-top: 2px;\n}\n.ai-avatar.mistral { background: transparent; }\n.ai-avatar.user { background: var(--brand); color: #1a1608; font-weight: 800; font-size: 0.7rem; }\n\n.ai-bubble {\n max-width: 78%;\n padding: 0.65rem 0.95rem;\n border-radius: var(--radius-sm);\n font-size: 0.875rem;\n line-height: 1.68;\n font-style: normal !important;\n}\n.ai-msg.assistant .ai-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 4px var(--radius-sm) var(--radius-sm) var(--radius-sm); }\n.ai-msg.user .ai-bubble { background: var(--msg-own); border: 1px solid var(--msg-own-border); border-radius: var(--radius-sm) 4px var(--radius-sm) var(--radius-sm); }\n\n.ai-typing { display: flex; gap: 4px; padding: 0.65rem 0.875rem; background: var(--surface); border: 1px solid var(--border); border-radius: 4px var(--radius-sm) var(--radius-sm) var(--radius-sm); width: fit-content; }\n.ai-typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); animation: typingDot 1.4s ease infinite; }\n.ai-typing span:nth-child(2) { animation-delay: 0.2s; }\n.ai-typing span:nth-child(3) { animation-delay: 0.4s; }\n@keyframes typingDot { 0%,60%,100% { opacity:0.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }\n\n.ai-input-area {\n padding: 0.875rem 1.75rem 1.1rem;\n border-top: 1px solid var(--border);\n background: var(--surface);\n display: flex;\n gap: 0.5rem;\n box-shadow: 0 -2px 12px rgba(0,0,0,0.15);\n}\n\n/* ─── AI Markdown rendering ────────────────────── */\n.ai-bubble strong { font-weight: 800; color: var(--text); }\n.ai-bubble em { font-style: italic !important; color: var(--text-muted); }\n.ai-bubble code {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: 4px; padding: 0.1rem 0.35rem; font-size: 0.82em;\n font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n color: var(--brand);\n}\n.ai-bubble pre {\n background: var(--surface2); border: 1px solid var(--border);\n border-radius: 0 0 var(--radius-xs) var(--radius-xs); padding: 0.65rem 0.85rem;\n margin: 0; overflow-x: auto; font-size: 0.82em;\n line-height: 1.55;\n}\n.ai-bubble pre code {\n background: none; border: none; padding: 0; font-size: inherit; color: var(--text);\n}\n.code-block-wrap {\n margin: 0.45rem 0; border-radius: var(--radius-xs); border: 1px solid var(--border);\n overflow: hidden;\n}\n.code-block-wrap pre { border: none; border-radius: 0; }\n.code-block-header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 0.3rem 0.75rem; background: var(--surface3);\n border-bottom: 1px solid var(--border); font-size: 0.72rem;\n}\n.code-block-lang {\n color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;\n}\n.code-copy-btn {\n display: flex; align-items: center; gap: 0.25rem;\n background: none; border: none; cursor: pointer;\n color: var(--text-muted); font-size: 0.72rem; font-weight: 700;\n padding: 0.15rem 0.45rem; border-radius: var(--radius-xs);\n transition: background var(--transition), color var(--transition);\n}\n.code-copy-btn:hover { background: var(--surface2); color: var(--brand); }\n.ai-bubble blockquote {\n border-left: 3px solid var(--brand); margin: 0.4rem 0;\n padding: 0.25rem 0.75rem; color: var(--text-muted);\n background: var(--brand-soft); border-radius: 0 var(--radius-xs) var(--radius-xs) 0;\n}\n.ai-bubble ul, .ai-bubble ol {\n margin: 0.35rem 0; padding-left: 1.4rem;\n}\n.ai-bubble li { margin-bottom: 0.2rem; }\n.ai-bubble h1, .ai-bubble h2, .ai-bubble h3 {\n font-weight: 800; margin: 0.6rem 0 0.3rem; line-height: 1.4;\n font-style: normal !important;\n}\n.ai-bubble h1 { font-size: 1.1em; }\n.ai-bubble h2 { font-size: 1em; }\n.ai-bubble h3 { font-size: 0.92em; color: var(--text-muted); }\n.ai-bubble hr {\n border: none; border-top: 1px solid var(--border); margin: 0.5rem 0;\n}\n.ai-bubble p { margin: 0.25rem 0; }\n.ai-bubble p:first-child { margin-top: 0; }\n.ai-bubble p:last-child { margin-bottom: 0; }\n.ai-bubble a {\n color: var(--brand); text-decoration: underline;\n text-decoration-color: rgba(252,220,93,0.4);\n}\n.ai-bubble a:hover { text-decoration-color: var(--brand); }\n\n.ai-msg { animation: aiMsgIn 0.3s cubic-bezier(0.34,1.3,0.64,1); }\n@keyframes aiMsgIn { from { opacity:0; transform:translateY(12px) scale(0.97); } to { opacity:1; transform:none; } }\n\n.ai-disclaimer {\n padding: 0.35rem 1.5rem;\n font-size: 0.68rem;\n color: var(--text-dim);\n text-align: center;\n background: var(--surface);\n border-top: 1px solid var(--border);\n font-style: normal !important;\n}\n\n/* ─── Animations ─────────────────────────────── */\n@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }\n.animate-in { animation: fadeIn 0.2s ease; }\n\n/* ─── Pasted Content Chip ────────────────────── */\n.pasted-chip {\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n margin-bottom: 0.5rem;\n overflow: hidden;\n animation: fadeIn 0.15s ease;\n}\n.pasted-chip-header {\n display: flex;\n align-items: center;\n gap: 0.45rem;\n padding: 0.35rem 0.65rem;\n font-size: 0.78rem;\n font-weight: 700;\n color: var(--text-muted);\n border-bottom: 1px solid var(--border);\n}\n.pasted-chip-header svg { flex-shrink: 0; width: 14px; height: 14px; opacity: 0.6; }\n.pasted-chip-size {\n font-weight: 500;\n font-size: 0.7rem;\n color: var(--text-dim);\n}\n.pasted-chip-preview {\n padding: 0.45rem 0.65rem;\n font-size: 0.75rem;\n color: var(--text-muted);\n max-height: 80px;\n overflow: hidden;\n margin: 0;\n white-space: pre-wrap;\n word-break: break-all;\n font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;\n line-height: 1.45;\n background: var(--surface);\n}\n\n/* ─── Streaming cursor blink ─────────────────── */\n.ai-bubble.streaming::after {\n content: '\\25CE';\n display: inline;\n animation: cursorBlink 0.8s step-end infinite;\n color: var(--brand);\n font-weight: 300;\n}\n@keyframes cursorBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }\n\n/* ─── Loading Screen ─────────────────────────── */\n.loading-screen {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: fixed;\n inset: 0;\n z-index: 9999;\n background: var(--bg);\n transition: opacity 0.28s ease;\n}\n.loading-screen.fade-out {\n opacity: 0;\n pointer-events: none;\n}\n.loading-letters {\n display: flex;\n gap: 0.05rem;\n}\n.loading-letter {\n font-family: var(--font);\n font-size: 4rem;\n font-weight: 900;\n color: var(--brand);\n opacity: 0;\n transform: translateY(-40px);\n animation: letterDrop 0.38s cubic-bezier(0.34,1.5,0.64,1) forwards, letterGlow 0.35s ease 0.55s forwards;\n text-shadow: none;\n letter-spacing: -0.02em;\n}\n@keyframes letterDrop {\n 0% { opacity: 0; transform: translateY(-40px) scale(0.75); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n}\n@keyframes letterGlow {\n 0% { text-shadow: none; }\n 50% { text-shadow: 0 0 28px var(--brand-glow), 0 0 56px var(--brand-glow); }\n 100% { text-shadow: 0 0 10px rgba(255,218,74,0.3); }\n}\n@keyframes spin { to { transform: rotate(360deg) } }\n@keyframes loadingPulse { 0%,100% { opacity:0.6 } 50% { opacity:1 } }\n\n/* ─── Button Spinner ─────────────────────────── */\n.btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(26,22,8,0.3); border-top-color: #1a1608; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; margin-right: 6px; }\n\n/* ─── Bookmarklet page ───────────────────────── */\n.bm-page { max-width: 580px; width: 100%; }\n\n/* ─── Light mode ─────────────────────────────── */\nbody.light {\n --logo-fill: #1a1608;\n --bg: #faf9f2;\n --surface: #ffffff;\n --surface2: #f5f3e8;\n --surface3: #ede9d8;\n --border: #e0dbc8;\n --border-light: #d4ceb8;\n --text: #1a1608;\n --text-muted: #5a5440;\n --text-dim: #9a9178;\n --msg-own: rgba(252,220,93,0.15);\n --msg-own-border: rgba(232,200,50,0.35);\n --shadow: 0 4px 24px rgba(200,185,100,0.18);\n --shadow-lg: 0 32px 64px rgba(200,185,100,0.2), 0 0 0 1px rgba(0,0,0,0.04);\n}\nbody.light .auth-screen::before { background: radial-gradient(circle,rgba(200,170,30,0.25) 0%,transparent 70%); }\nbody.light .auth-toggle button { color: #8a7400; }\nbody.light .auth-toggle button:hover { color: #6b5a00; }\nbody.light .msg-meta .username.is-admin { color: #8a7400; }\nbody.light .room-item.active { color: #6b5a00; }\nbody.light .reply-bar-user,\nbody.light .reply-quote-user,\nbody.light .search-result-user { color: #8a7400; }\nbody.light .msg-bubble .mention { color: #8a7400; }\nbody.light .msg-row.other .msg-bubble { background: #fff; }\nbody.light .ai-msg.assistant .ai-bubble { background: #fff; }\nbody.light .online-dot { box-shadow: 0 0 0 2px #fff; }\nbody.light input[type=\"text\"],\nbody.light input[type=\"email\"],\nbody.light input[type=\"password\"],\nbody.light input[type=\"number\"] { background: #f8f6ea; }\n/* Light mode: make logo/brand text dark for readability */\nbody.light .auth-logo svg,\nbody.light .sidebar-logo-wrap svg,\nbody.light .empty-state svg { --brand-fill: #1a1608; }\nbody.light .auth-logo svg { color: #1a1608; }\nbody.light .loading-letter { color: #1a1608; text-shadow: none; }\nbody.light .loading-letter { animation: letterDrop 0.38s cubic-bezier(0.34,1.5,0.64,1) forwards, letterGlowLight 0.35s ease 0.55s forwards; }\n@keyframes letterGlowLight {\n 0% { text-shadow: none; }\n 50% { text-shadow: 0 0 16px rgba(200,170,30,0.4), 0 0 32px rgba(200,170,30,0.2); }\n 100% { text-shadow: 0 0 6px rgba(200,170,30,0.15); }\n}\n\n/* ─── Message action bar ─────────────────────── */\n.icon { display:inline-flex;align-items:center;justify-content:center; }\n.reaction-picker { position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.35rem 0.5rem;display:flex;gap:0.2rem;z-index:50;box-shadow:0 8px 32px rgba(0,0,0,0.45);animation:fadeIn .13s ease; }\n.reaction-btn-pick { background:none;border:none;cursor:pointer;padding:0.2rem 0.25rem;border-radius:5px;transition:background .12s;display:flex;align-items:center;justify-content:center; }\n.reaction-btn-pick:hover { background:var(--surface2); }\n.reaction-btn-pick svg { display:block; }\n.msg-reactions-outer { pointer-events:auto; }\n.reaction-chip { display:inline-flex;align-items:center;gap:3px;padding:0.15rem 0.4rem;border-radius:99px;border:1px solid var(--border);background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,0.35);cursor:pointer;font-size:0.72rem;font-weight:700;color:var(--text-muted);transition:all .13s;user-select:none; }\n.reaction-chip:hover { border-color:var(--brand);color:var(--brand);box-shadow:0 2px 12px var(--brand-glow); }\n.reaction-chip.own { border-color:var(--brand);background:var(--brand-soft);color:var(--brand); }\n.reaction-chip svg { display:block;flex-shrink:0; }\n.reply-bar { display:flex;align-items:center;gap:0.6rem;background:var(--surface2);border-left:2.5px solid var(--brand);border-radius:0 var(--radius-xs) var(--radius-xs) 0;padding:0.45rem 0.75rem;margin-bottom:0.4rem;font-size:0.8rem; }\n.reply-bar-info { flex:1;min-width:0; }\n.reply-bar-user { font-weight:800;color:var(--brand);font-size:0.72rem;margin-bottom:1px; }\n.reply-bar-text { color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }\n.reply-quote { background:var(--surface3);border-left:2.5px solid var(--brand);border-radius:0 var(--radius-xs) var(--radius-xs) 0;padding:0.3rem 0.55rem;margin-bottom:0.4rem;font-size:0.77rem;cursor:pointer; }\n.reply-quote-user { font-weight:800;color:var(--brand);margin-bottom:1px; }\n.reply-quote-text { color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }\n.msg-bubble-wrap { position:relative;display:flex;flex-direction:row;align-items:flex-end;gap:0.4rem;overflow:visible; }\n.swipe-hint.row-hint { position:absolute;top:50%;left:8px;transform:translateY(-50%) scale(0.7);opacity:0;transition:opacity .12s,transform .12s;pointer-events:none;color:var(--brand);z-index:5; }\n.msg-action-bar {\n display:flex;flex-direction:row;align-items:center;gap:0.15rem;flex-shrink:0;\n background:var(--surface);border:1px solid var(--border);border-radius:99px;\n padding:0.25rem 0.4rem;box-shadow:0 4px 16px rgba(0,0,0,0.3);\n white-space:nowrap;\n max-width:0;overflow:hidden;opacity:0;pointer-events:none;\n transition:max-width 0.28s cubic-bezier(0.34,1.2,0.64,1),opacity 0.22s cubic-bezier(0.34,1.2,0.64,1),transform 0.28s cubic-bezier(0.34,1.4,0.64,1);\n}\n.msg-bubble-wrap:has(.msg-bubble-col.has-reactions) .msg-action-bar { margin-bottom:1.6rem; }\n.msg-row.own .msg-bubble-wrap .msg-action-bar { transform:translateX(12px) scale(0.92);order:-1; }\n.msg-row.other .msg-bubble-wrap .msg-action-bar { transform:translateX(-12px) scale(0.92);order:1; }\n.msg-action-bar.open { max-width:640px;overflow:hidden;opacity:1;pointer-events:auto;transform:translateX(0) scale(1); }\n.msg-bubble-col { position:relative;display:table;max-width:min(72vw,480px);min-width:0;transition:transform 0.28s cubic-bezier(0.34,1.2,0.64,1); }\n.msg-row.own .msg-action-bar.open~.msg-bubble-col { transform:translateX(6px); }\n.msg-row.other .msg-action-bar.open~.msg-bubble-col { transform:translateX(-6px); }\n.msg-bubble-col>.msg-reactions-outer { position:absolute;top:100%;margin-top:0.25rem;display:flex;flex-wrap:nowrap;gap:0.25rem;pointer-events:auto;z-index:2; }\n.msg-row.own .msg-bubble-col>.msg-reactions-outer { right:0;flex-direction:row-reverse; }\n.msg-row.other .msg-bubble-col>.msg-reactions-outer { left:0;flex-direction:row; }\n.msg-bubble-col.has-reactions { margin-bottom:1.6rem; }\n.msg-action-react-btn { background:none;border:none;cursor:pointer;padding:0.2rem 0.25rem;border-radius:6px;transition:transform .1s,background .1s;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent; }\n.msg-action-react-btn:active,.msg-action-react-btn.active { background:var(--brand-soft);transform:scale(1.25); }\n.msg-action-bar-sep { width:1px;height:18px;background:var(--border);margin:0 0.2rem;flex-shrink:0; }\n.msg-action-btn { display:flex;align-items:center;gap:0.25rem;padding:0.25rem 0.55rem;background:none;border:none;border-radius:99px;font-size:0.78rem;color:var(--text-muted);cursor:pointer;transition:background .1s,color .1s;-webkit-tap-highlight-color:transparent;white-space:nowrap; }\n.msg-action-btn:active { background:var(--surface2);color:var(--text); }\n.msg-action-bar.open > *:nth-child(1) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.03s both; }\n.msg-action-bar.open > *:nth-child(2) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.06s both; }\n.msg-action-bar.open > *:nth-child(3) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.09s both; }\n.msg-action-bar.open > *:nth-child(4) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.12s both; }\n.msg-action-bar.open > *:nth-child(5) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.15s both; }\n.msg-action-bar.open > *:nth-child(6) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.18s both; }\n.msg-action-bar.open > *:nth-child(7) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.21s both; }\n.msg-action-bar.open > *:nth-child(8) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.24s both; }\n.msg-action-bar.open > *:nth-child(9) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.27s both; }\n.msg-action-bar.open > *:nth-child(10) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.30s both; }\n.msg-action-bar.open > *:nth-child(11) { animation:btnIn 0.2s cubic-bezier(0.34,1.5,0.64,1) 0.33s both; }\n@keyframes btnIn { from{opacity:0;transform:scale(0.7);}to{opacity:1;transform:scale(1);} }\n@keyframes ctxPop { from{opacity:0;transform:scale(0.88)}to{opacity:1;transform:scale(1)} }\n.confirm-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:200;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease; }\n.confirm-box { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;max-width:320px;width:90%;text-align:center;animation:ctxPop .2s cubic-bezier(0.34,1.4,0.64,1); }\n.confirm-box h3 { margin:0 0 0.5rem;font-size:1rem;font-weight:800; }\n.confirm-box p { font-size:0.85rem;color:var(--text-muted);margin:0 0 1.2rem; }\n.confirm-actions { display:flex;gap:0.6rem;justify-content:center; }\n.confirm-actions button { padding:0.5rem 1.2rem;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:0.875rem;font-weight:700;transition:opacity .15s; }\n.confirm-actions .btn-cancel { background:var(--surface2);color:var(--text); }\n.confirm-actions .btn-danger { background:var(--danger);color:#fff; }\n.confirm-actions button:active { opacity:0.75; }\n.scroll-to-bottom { position:absolute;bottom:1rem;left:50%;z-index:30;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#1a1608;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px var(--brand-glow);transform:translate(-50%,0);animation:fadeInUp .2s cubic-bezier(0.34,1.4,0.64,1) both;will-change:transform;padding:0; }\n.scroll-to-bottom:hover { transform:translate(-50%,0) scale(1.1); }\n.scroll-to-bottom:active { transform:translate(-50%,0) scale(0.93); }\n@keyframes fadeInUp { from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)} }\n@keyframes msgSlideIn { from{opacity:0;transform:translateY(18px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)} }\n.msg-row.new-msg { animation:msgSlideIn .28s cubic-bezier(0.34,1.4,0.64,1); }\n@keyframes slideInRight { from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)} }\n.panel-anim { animation:slideInRight .22s cubic-bezier(0.34,1.4,0.64,1); }\n@keyframes chipPop { from{transform:scale(0.6)}to{transform:scale(1)} }\n.reaction-chip { animation:chipPop .18s cubic-bezier(0.34,1.56,0.64,1); }\n.edit-textarea { width:100%;background:var(--surface2);border:1px solid var(--brand);border-radius:var(--radius-xs);padding:0.4rem 0.6rem;color:var(--text);font-size:0.875rem;font-family:var(--font);resize:none;outline:none;min-height:36px; }\n.edit-actions { display:flex;gap:0.35rem;margin-top:0.3rem; }\n.edited-tag { font-size:0.65rem;color:var(--text-dim);margin-left:0.4rem;cursor:pointer;display:inline-flex;align-items:center;gap:0.2rem;transition:color .13s;text-decoration:underline;text-decoration-style:dotted; }\n.edited-tag:hover { color:var(--text-muted); }\n.original-popover { position:absolute;z-index:40;bottom:calc(100% + 8px);max-width:min(320px,80vw);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.6rem 0.75rem;box-shadow:0 8px 32px rgba(0,0,0,0.45);animation:origPop .18s cubic-bezier(0.34,1.4,0.64,1); }\n.msg-row.own .original-popover { right:0; }\n.msg-row.other .original-popover { left:0; }\n@keyframes origPop { from{opacity:0;transform:translateY(6px) scale(0.95)}to{opacity:1;transform:none} }\n.original-popover-label { font-size:0.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:0.3rem; }\n.original-popover-text { font-size:0.82rem;color:var(--text-muted);line-height:1.5;word-break:break-word; }\n.original-popover-arrow { position:absolute;bottom:-5px;width:10px;height:10px;background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg); }\n.msg-row.own .original-popover-arrow { right:14px; }\n.msg-row.other .original-popover-arrow { left:14px; }\n.edit-expired { font-size:0.68rem;color:var(--text-dim);padding:0.2rem 0.3rem;font-style:normal!important; }\n.link-preview { background:var(--surface2);border:1px solid var(--border);border-left:2.5px solid var(--brand);border-radius:var(--radius-xs);padding:0.55rem 0.75rem;margin-top:0.4rem;cursor:pointer;transition:border-color .15s;max-width:320px; }\n.link-preview:hover { border-color:var(--accent2); }\n.link-preview-site { font-size:0.68rem;color:var(--text-dim);margin-bottom:2px;font-weight:700;text-transform:uppercase;letter-spacing:.04em; }\n.link-preview-title { font-size:0.82rem;font-weight:800;color:var(--text);margin-bottom:2px;line-height:1.3; }\n.link-preview-desc { font-size:0.75rem;color:var(--text-muted);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }\n.link-preview-img { width:100%;max-height:120px;object-fit:cover;border-radius:4px;margin-top:0.4rem; }\n.typing-bar { height:22px;display:flex;align-items:center;gap:0.4rem;padding:0 1.375rem;font-size:0.74rem;color:var(--text-dim); }\n.typing-dots { display:flex;gap:3px;align-items:center; }\n.typing-dots span { width:4px;height:4px;border-radius:50%;background:var(--text-dim);animation:typingDot 1.4s ease infinite; }\n.typing-dots span:nth-child(2) { animation-delay:.2s; }\n.typing-dots span:nth-child(3) { animation-delay:.4s; }\n.search-panel { position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:30;display:flex;flex-direction:column;animation:fadeIn .15s ease; }\n.search-header { padding:.875rem 1.375rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.75rem;background:var(--surface); }\n.search-results { flex:1;overflow-y:auto;padding:.75rem 1.375rem;display:flex;flex-direction:column;gap:.5rem; }\n.search-result-item { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65rem .875rem;cursor:pointer;transition:border-color .13s; }\n.search-result-item:hover { border-color:var(--brand); }\n.search-result-user { font-size:.75rem;font-weight:800;color:var(--brand);margin-bottom:3px; }\n.search-result-text { font-size:.85rem;color:var(--text);line-height:1.4; }\n.search-result-time { font-size:.68rem;color:var(--text-dim);margin-top:2px; }\n.unread-badge { background:var(--brand);color:#1a1608;border-radius:99px;font-size:.62rem;font-weight:800;padding:.08rem .38rem;min-width:16px;text-align:center;line-height:1.5;flex-shrink:0; }\n.theme-btn { background:none;border:none;cursor:pointer;color:var(--text-dim);padding:.35rem;border-radius:var(--radius-xs);transition:color .13s;display:flex;align-items:center; }\n.theme-btn:hover { color:var(--brand); }\n.admin-action-row { display:flex;align-items:center;gap:0.5rem;margin:0.4rem 0;padding:0.3rem 0.5rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-xs); }\n.admin-action-label { font-size:0.8rem;color:var(--text-muted);font-family:monospace;flex:1;min-width:0;word-break:break-all; }\n.admin-action-label code { background:var(--surface3);border-radius:3px;padding:0.05rem 0.3rem;font-size:0.77rem;color:var(--text); }\n.admin-exec-btn { flex-shrink:0;font-size:0.72rem!important;padding:0.2rem 0.55rem!important;display:flex;align-items:center;gap:0.25rem; }\n.admin-exec-btn.done { background:var(--surface3)!important;color:var(--text-muted)!important;border-color:var(--border)!important; }\n.blob-img-wrap { display:flex;flex-direction:column;gap:0.35rem;cursor:pointer; }\n.blob-img-wrap img { max-width:min(260px,60vw);max-height:200px;object-fit:cover;border-radius:var(--radius-xs);display:block; }\n.blob-img-name { font-size:0.7rem;color:var(--text-dim); }\n.blob-img-loading { width:min(260px,60vw);height:120px;background:var(--surface2);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:0.75rem; }\n.blob-expired { display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:0.55rem 0.9rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-xs);opacity:0.6; }\n.blob-expired-label { font-size:0.7rem;color:var(--danger);font-weight:700;letter-spacing:.03em; }\n.blob-expired-name { font-size:0.7rem;color:var(--text-dim); }\n\n/* ─── Responsive (mobile) ────────────────────── */\n@media (max-width: 640px) {\n .app-layout {\n grid-template-columns: 1fr;\n grid-template-rows: 1fr;\n }\n .sidebar {\n position: fixed;\n left: 0; top: 0; bottom: 0;\n width: 80vw;\n max-width: 280px;\n z-index: 60;\n transform: translateX(-100%);\n transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1);\n box-shadow: 12px 0 40px rgba(0,0,0,0.4);\n }\n .sidebar.mobile-open { transform: translateX(0); }\n .mobile-menu-btn {\n display: flex !important;\n position: fixed;\n top: 0.75rem;\n left: 0.75rem;\n z-index: 55;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-xs);\n padding: 0.4rem;\n box-shadow: var(--shadow);\n }\n .messages-container { padding: 0.875rem 1rem 0.5rem; }\n .message-input-area { padding: 0.65rem 1rem 0.875rem; }\n .ai-messages { padding: 1rem; }\n .ai-input-area { padding: 0.65rem 1rem 0.875rem; }\n .chat-header { padding: 0.875rem 1rem 0.875rem 3.75rem; }\n .ai-header { padding: 0.875rem 1rem 0.875rem 3.75rem; }\n}\n.mobile-menu-btn { display: none; }\n\n.sidebar {\n transition: transform 0.25s cubic-bezier(0.34,1.2,0.64,1);\n}\n",[],[163,236],"bfa79286-39a8-11f1-b501-42b51c65c3df","index.tsx","019d96e7-530f-77ca-9826-cfc6ab40a553",["D",1776353234823],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// Kikko frontend — this file is loaded as a module from index.html\n// It contains the full React SPA for the chat application.\n// Due to the size of this file, the actual frontend code needs to be\n// placed here. For now this is a placeholder that will be populated.\nexport {};\n",[],[163,243],["D",1776353234823],[],[163,67],"bfa73bec-39a8-11f1-b501-42b51c65c3df","bookmarklet.html","019d96e7-530f-77ca-9826-c6e6edb1c1e7",["D",1776353234823],"\n\n\n \n \n Kikko Bookmarklet\n \n \n\n\n

Kikko Bookmarklet

Open Kikko as a floating widget on any webpage — without leaving the site.

\n\n

Desktop: Drag the bookmark below to your browser's bookmarks bar

Mobile: Copy the code below, add a new bookmark manually, and paste it as the URL

Visit any page and tap or click the bookmarklet — Kikko floats on top

\n\n

Drag to bookmarks bar

\n 🔖\n

Drag this link to your bookmarks bar

\n Loading…\n

\n\n

Or copy for mobile

Loading…

\n \n

\n\n

\n 📱\n On mobile: tap Copy above → open your browser bookmarks → create a new bookmark → paste as the URL. Then tap it on any page to launch Kikko.\n

\n\n

\n\n \n\n ← Back to Kikko\n

\n\n\n\n",[],[163,253],"bfa87aa2-39a8-11f1-b501-42b51c65c3df",["D",1776353234823],[179,180,181,182],[163],"bfa6da8a-39a8-11f1-b501-42b51c65c3df","queries.ts","019d96e7-530f-77ca-9826-bebdacc3037b","019d96e7-530f-77ca-9826-c00925e8eb96",["D",1776353234823],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// ---- Users ----\nexport async function createUser(username: string, email: string, passwordHash: string, passwordPlain: string) {\n const result = await sqlite.execute({\n sql: `INSERT INTO users (username, email, password_hash, password_plain) VALUES (?, ?, ?, ?)`,\n args: [username, email, passwordHash, passwordPlain],\n });\n return result.lastInsertRowid;\n}\n\nexport async function getUserByUsername(username: string) {\n const r = await sqlite.execute({\n sql: `SELECT * FROM users WHERE username = ? COLLATE NOCASE`,\n args: [username],\n });\n return r.rows[0] ?? null;\n}\n\nexport async function getUserByEmail(email: string) {\n const r = await sqlite.execute({\n sql: `SELECT * FROM users WHERE email = ? COLLATE NOCASE`,\n args: [email],\n });\n return r.rows[0] ?? null;\n}\n\nexport async function getUserById(id: number) {\n const r = await sqlite.execute({ sql: `SELECT * FROM users WHERE id = ?`, args: [id] });\n return r.rows[0] ?? null;\n}\n\nexport async function updateUserAvatar(userId: number, blobKey: string) {\n await sqlite.execute({ sql: `UPDATE users SET avatar_blob_key = ? WHERE id = ?`, args: [blobKey, userId] });\n}\n\nexport async function setGhostMode(userId: number, ghost: boolean) {\n await sqlite.execute({ sql: `UPDATE users SET ghost_mode = ? WHERE id = ?`, args: [ghost ? 1 : 0, userId] });\n}\n\nexport async function banUser(userId: number, expiresAt: string | null, message: string | null) {\n await sqlite.execute({\n sql: `UPDATE users SET is_banned = 1, ban_expires_at = ?, ban_message = ? WHERE id = ?`,\n args: [expiresAt, message, userId],\n });\n}\n\nexport async function unbanUser(userId: number) {\n await sqlite.execute({ sql: `UPDATE users SET is_banned = 0, ban_expires_at = NULL, ban_message = NULL WHERE id = ?`, args: [userId] });\n}\n\nexport async function muteUser(userId: number, expiresAt: string) {\n await sqlite.execute({\n sql: `UPDATE users SET is_muted = 1, mute_expires_at = ? WHERE id = ?`,\n args: [expiresAt, userId],\n });\n}\n\nexport async function unmuteUser(userId: number) {\n await sqlite.execute({ sql: `UPDATE users SET is_muted = 0, mute_expires_at = NULL WHERE id = ?`, args: [userId] });\n}\n\nexport async function getPublicUsers() {\n const r = await sqlite.execute(`SELECT id, username, avatar_blob_key, ghost_mode FROM users WHERE ghost_mode = 0 ORDER BY username ASC`);\n return r.rows;\n}\n\nexport async function getAllUsers() {\n const r = await sqlite.execute(`SELECT id, username, email, ghost_mode, is_banned, ban_expires_at, ban_message, is_muted, mute_expires_at, avatar_blob_key, created_at FROM users ORDER BY username ASC`);\n return r.rows;\n}\n\n// ---- Sessions ----\nexport async function createSession(sessionId: string, userId: number) {\n await sqlite.execute({ sql: `INSERT INTO sessions (id, user_id) VALUES (?, ?)`, args: [sessionId, userId] });\n}\n\nexport async function getSession(sessionId: string) {\n const r = await sqlite.execute({ sql: `SELECT * FROM sessions WHERE id = ?`, args: [sessionId] });\n return r.rows[0] ?? null;\n}\n\nexport async function deleteSession(sessionId: string) {\n await sqlite.execute({ sql: `DELETE FROM sessions WHERE id = ?`, args: [sessionId] });\n}\n\n// ---- API Tokens (for cross-origin bookmarklet) ----\nexport async function createApiToken(token: string, userId: number) {\n await sqlite.execute({ sql: `INSERT OR REPLACE INTO api_tokens (token, user_id) VALUES (?, ?)`, args: [token, userId] });\n}\n\nexport async function getApiToken(token: string) {\n const r = await sqlite.execute({ sql: `SELECT * FROM api_tokens WHERE token = ?`, args: [token] });\n return r.rows[0] ?? null;\n}\n\nexport async function deleteApiToken(token: string) {\n await sqlite.execute({ sql: `DELETE FROM api_tokens WHERE token = ?`, args: [token] });\n}\n\n// ---- Rooms ----\nexport async function createRoom(name: string, createdBy: number) {\n const r = await sqlite.execute({\n sql: `INSERT INTO rooms (name, type, created_by) VALUES (?, 'group', ?)`,\n args: [name, createdBy],\n });\n const roomId = Number(r.lastInsertRowid);\n await sqlite.execute({ sql: `INSERT INTO room_members (room_id, user_id, role) VALUES (?, ?, 'owner')`, args: [roomId, createdBy] });\n return roomId;\n}\n\nexport async function getRoomById(roomId: number) {\n const r = await sqlite.execute({ sql: `SELECT * FROM rooms WHERE id = ?`, args: [roomId] });\n return r.rows[0] ?? null;\n}\n\nexport async function deleteRoom(roomId: number) {\n await sqlite.execute({ sql: `DELETE FROM room_members WHERE room_id = ?`, args: [roomId] });\n await sqlite.execute({ sql: `DELETE FROM room_invites WHERE room_id = ?`, args: [roomId] });\n await sqlite.execute({ sql: `DELETE FROM reactions WHERE message_id IN (SELECT id FROM messages WHERE room_id = ?)`, args: [roomId] });\n await sqlite.execute({ sql: `DELETE FROM messages WHERE room_id = ?`, args: [roomId] });\n await sqlite.execute({ sql: `DELETE FROM typing WHERE room_id = ?`, args: [roomId] });\n await sqlite.execute({ sql: `DELETE FROM rooms WHERE id = ?`, args: [roomId] });\n}\n\nexport async function getRoomsForUser(userId: number) {\n const r = await sqlite.execute({\n sql: `SELECT r.* FROM rooms r\n LEFT JOIN room_members rm ON r.id = rm.room_id AND rm.user_id = ?\n WHERE r.type = 'world' OR rm.user_id = ?\n ORDER BY r.id ASC`,\n args: [userId, userId],\n });\n return r.rows;\n}\n\nexport async function getAllRooms() {\n const r = await sqlite.execute(`SELECT * FROM rooms ORDER BY id ASC`);\n return r.rows;\n}\n\nexport async function getRoomMembers(roomId: number) {\n const r = await sqlite.execute({\n sql: `SELECT u.id, u.username, u.avatar_blob_key, rm.role FROM users u\n JOIN room_members rm ON u.id = rm.user_id WHERE rm.room_id = ?\n ORDER BY rm.role DESC, u.username ASC`,\n args: [roomId],\n });\n return r.rows;\n}\n\nexport async function addRoomMember(roomId: number, userId: number, role = \"member\") {\n await sqlite.execute({\n sql: `INSERT OR IGNORE INTO room_members (room_id, user_id, role) VALUES (?, ?, ?)`,\n args: [roomId, userId, role],\n });\n}\n\nexport async function removeRoomMember(roomId: number, userId: number) {\n await sqlite.execute({ sql: `DELETE FROM room_members WHERE room_id = ? AND user_id = ?`, args: [roomId, userId] });\n}\n\nexport async function isRoomMember(roomId: number, userId: number): Promise {\n const r = await sqlite.execute({\n sql: `SELECT 1 FROM room_members WHERE room_id = ? AND user_id = ?`,\n args: [roomId, userId],\n });\n return r.rows.length > 0;\n}\n\nexport async function inviteToRoom(roomId: number, invitedUserId: number, invitedBy: number) {\n await sqlite.execute({\n sql: `INSERT OR IGNORE INTO room_invites (room_id, invited_user_id, invited_by) VALUES (?, ?, ?)`,\n args: [roomId, invitedUserId, invitedBy],\n });\n await addRoomMember(roomId, invitedUserId);\n}\n\n// ---- Messages ----\nexport async function createMessage(\n roomId: number,\n userId: number,\n content: string | null,\n blobKey?: string,\n blobName?: string,\n blobSize?: number,\n replyToId?: number,\n) {\n const r = await sqlite.execute({\n sql: `INSERT INTO messages (room_id, user_id, content, blob_key, blob_name, blob_size, reply_to_id) VALUES (?, ?, ?, ?, ?, ?, ?)`,\n args: [roomId, userId, content, blobKey ?? null, blobName ?? null, blobSize ?? null, replyToId ?? null],\n });\n // Prune to 300 messages per room (keeps newest, deletes oldest)\n await sqlite.execute({\n sql: `DELETE FROM messages WHERE room_id = ? AND id NOT IN (SELECT id FROM messages WHERE room_id = ? ORDER BY id DESC LIMIT 300)`,\n args: [roomId, roomId],\n });\n return r.lastInsertRowid;\n}\n\nexport async function editMessage(messageId: number, userId: number, content: string) {\n // Save original_content on first edit only (if not already saved)\n await sqlite.execute({\n sql: `UPDATE messages SET\n original_content = CASE WHEN original_content IS NULL THEN messages.content ELSE original_content END,\n content = ?,\n edited_at = datetime('now')\n WHERE id = ? AND user_id = ?`,\n args: [content, messageId, userId],\n });\n}\n\nexport async function getMessageById(messageId: number) {\n const r = await sqlite.execute({\n sql: `SELECT m.*,\n CASE WHEN m.is_deleted = 1 THEN m.deleted_username ELSE u.username END AS username,\n CASE WHEN m.is_deleted = 1 THEN NULL ELSE u.avatar_blob_key END AS avatar_blob_key\n FROM messages m\n LEFT JOIN users u ON m.user_id = u.id\n WHERE m.id = ?`,\n args: [messageId],\n });\n return r.rows[0] ?? null;\n}\n\nexport async function getMessages(roomId: number, since?: number) {\n if (since) {\n const r = await sqlite.execute({\n sql: `SELECT m.*,\n CASE WHEN m.is_deleted = 1 THEN m.deleted_username ELSE u.username END AS username,\n CASE WHEN m.is_deleted = 1 THEN NULL ELSE u.avatar_blob_key END AS avatar_blob_key\n FROM messages m\n LEFT JOIN users u ON m.user_id = u.id\n WHERE m.room_id = ? AND m.id > ? ORDER BY m.id ASC`,\n args: [roomId, since],\n });\n return r.rows;\n }\n const r = await sqlite.execute({\n sql: `SELECT m.*,\n CASE WHEN m.is_deleted = 1 THEN m.deleted_username ELSE u.username END AS username,\n CASE WHEN m.is_deleted = 1 THEN NULL ELSE u.avatar_blob_key END AS avatar_blob_key\n FROM messages m\n LEFT JOIN users u ON m.user_id = u.id\n WHERE m.room_id = ? ORDER BY m.id ASC LIMIT 300`,\n args: [roomId],\n });\n return r.rows;\n}\n\nexport async function searchMessages(roomId: number, query: string) {\n const r = await sqlite.execute({\n sql: `SELECT m.*,\n CASE WHEN m.is_deleted = 1 THEN m.deleted_username ELSE u.username END AS username,\n CASE WHEN m.is_deleted = 1 THEN NULL ELSE u.avatar_blob_key END AS avatar_blob_key\n FROM messages m\n LEFT JOIN users u ON m.user_id = u.id\n WHERE m.room_id = ? AND m.content LIKE ? AND m.is_deleted = 0\n ORDER BY m.id DESC LIMIT 50`,\n args: [roomId, `%${query}%`],\n });\n return r.rows;\n}\n\n// Clear all messages in a room (admin only)\nexport async function clearRoom(roomId: number) {\n await sqlite.execute({\n sql: `DELETE FROM messages WHERE room_id = ?`,\n args: [roomId],\n });\n // Also wipe reactions for those messages (already gone, but clean up reactions table)\n await sqlite.execute({\n sql: `DELETE FROM reactions WHERE message_id NOT IN (SELECT id FROM messages)`,\n args: [],\n });\n}\n\n// Soft-delete a single message (admin moderation or owner)\nexport async function deleteMessage(messageId: number) {\n // Snapshot the username before soft-deleting (in case user still exists)\n const r = await sqlite.execute({\n sql: `SELECT m.*, u.username AS live_username FROM messages m LEFT JOIN users u ON m.user_id = u.id WHERE m.id = ?`,\n args: [messageId],\n });\n const msg = r.rows[0] as any;\n if (!msg) return;\n const username = msg.deleted_username ?? msg.live_username ?? \"unknown\";\n await sqlite.execute({\n sql: `UPDATE messages SET is_deleted = 1, deleted_username = ? WHERE id = ?`,\n args: [username, messageId],\n });\n}\n\n// ---- Reactions ----\nexport async function addReaction(messageId: number, userId: number, emoji: string) {\n await sqlite.execute({\n sql: `INSERT OR IGNORE INTO reactions (message_id, user_id, emoji) VALUES (?, ?, ?)`,\n args: [messageId, userId, emoji],\n });\n}\n\nexport async function removeReaction(messageId: number, userId: number, emoji: string) {\n await sqlite.execute({\n sql: `DELETE FROM reactions WHERE message_id = ? AND user_id = ? AND emoji = ?`,\n args: [messageId, userId, emoji],\n });\n}\n\nexport async function getReactionsForRoom(roomId: number) {\n const r = await sqlite.execute({\n sql: `SELECT r.message_id, r.user_id, r.emoji, u.username FROM reactions r JOIN users u ON r.user_id = u.id WHERE r.message_id IN (SELECT id FROM messages WHERE room_id = ?)`,\n args: [roomId],\n });\n return r.rows;\n}\n\n// ---- Typing indicators ----\nexport async function setTyping(roomId: number, userId: number, username: string) {\n await sqlite.execute({\n sql: `INSERT OR REPLACE INTO typing (room_id, user_id, username, updated_at) VALUES (?, ?, ?, datetime('now'))`,\n args: [roomId, userId, username],\n });\n}\n\nexport async function clearTyping(roomId: number, userId: number) {\n await sqlite.execute({\n sql: `DELETE FROM typing WHERE room_id = ? AND user_id = ?`,\n args: [roomId, userId],\n });\n}\n\nexport async function getTyping(roomId: number) {\n // Only return users who typed in last 4 seconds\n const r = await sqlite.execute({\n sql: `SELECT username FROM typing WHERE room_id = ? AND updated_at >= datetime('now', '-4 seconds')`,\n args: [roomId],\n });\n return r.rows.map((row: any) => row.username as string);\n}\n\n// ---- Block ----\nexport async function blockUser(userId: number, blockedUserId: number) {\n await sqlite.execute({\n sql: `INSERT OR IGNORE INTO blocked_users (user_id, blocked_user_id) VALUES (?, ?)`,\n args: [userId, blockedUserId],\n });\n}\n\nexport async function unblockUser(userId: number, blockedUserId: number) {\n await sqlite.execute({\n sql: `DELETE FROM blocked_users WHERE user_id = ? AND blocked_user_id = ?`,\n args: [userId, blockedUserId],\n });\n}\n\nexport async function getBlockedUsers(userId: number) {\n const r = await sqlite.execute({ sql: `SELECT blocked_user_id FROM blocked_users WHERE user_id = ?`, args: [userId] });\n return r.rows.map((row) => Number(row.blocked_user_id));\n}\n\n// ---- Mentions ----\nexport async function queueMention(mentionedUserId: number, senderUsername: string, roomName: string) {\n await sqlite.execute({\n sql: `INSERT INTO mention_queue (mentioned_user_id, sender_username, room_name) VALUES (?, ?, ?)`,\n args: [mentionedUserId, senderUsername, roomName],\n });\n}\n\nexport async function getUnsentMentions() {\n const r = await sqlite.execute(`SELECT mq.*, u.email, u.username as mentioned_username FROM mention_queue mq JOIN users u ON mq.mentioned_user_id = u.id WHERE mq.sent = 0`);\n return r.rows;\n}\n\nexport async function markMentionsSent(ids: number[]) {\n if (ids.length === 0) return;\n const placeholders = ids.map(() => \"?\").join(\",\");\n await sqlite.execute({ sql: `UPDATE mention_queue SET sent = 1 WHERE id IN (${placeholders})`, args: ids });\n}\n\n// ---- ntfy push notifications ----\nexport async function setNtfyTopic(userId: number, topic: string) {\n await sqlite.execute({ sql: `UPDATE users SET ntfy_topic = ? WHERE id = ?`, args: [topic, userId] });\n}\n\nexport async function clearNtfyTopic(userId: number) {\n await sqlite.execute({ sql: `UPDATE users SET ntfy_topic = NULL WHERE id = ?`, args: [userId] });\n}\n\nexport async function getNtfyTopic(userId: number): Promise {\n const r = await sqlite.execute({ sql: `SELECT ntfy_topic FROM users WHERE id = ?`, args: [userId] });\n return (r.rows[0]?.ntfy_topic as string | null) ?? null;\n}\n\nexport async function updateUserPassword(userId: number, passwordHash: string, passwordPlain: string) {\n await sqlite.execute({ sql: `UPDATE users SET password_hash = ?, password_plain = ? WHERE id = ?`, args: [passwordHash, passwordPlain, userId] });\n}\n\nexport async function deleteUser(userId: number) {\n // Remove all user data in order (FK-safe)\n await sqlite.execute({ sql: `DELETE FROM reactions WHERE user_id = ?`, args: [userId] });\n await sqlite.execute({ sql: `DELETE FROM blocked_users WHERE user_id = ? OR blocked_user_id = ?`, args: [userId, userId] });\n await sqlite.execute({ sql: `DELETE FROM room_members WHERE user_id = ?`, args: [userId] });\n await sqlite.execute({ sql: `DELETE FROM room_invites WHERE invited_user_id = ? OR invited_by = ?`, args: [userId, userId] });\n await sqlite.execute({ sql: `DELETE FROM typing WHERE user_id = ?`, args: [userId] });\n await sqlite.execute({ sql: `DELETE FROM mention_queue WHERE mentioned_user_id = ?`, args: [userId] });\n await sqlite.execute({ sql: `DELETE FROM sessions WHERE user_id = ?`, args: [userId] });\n await sqlite.execute({ sql: `DELETE FROM api_tokens WHERE user_id = ?`, args: [userId] });\n // Clear ntfy topic so no stale push URL remains\n await sqlite.execute({ sql: `UPDATE users SET ntfy_topic = NULL WHERE id = ?`, args: [userId] });\n // Soft-delete messages: snapshot the username, mark is_deleted=1, then NULL out\n // user_id so the FK constraint doesn't block deleting the user row.\n const userRecord = await getUserById(userId);\n const oldUsername = userRecord ? String(userRecord.username) : \"deleted\";\n await sqlite.execute({\n sql: `UPDATE messages SET is_deleted = 1, deleted_username = ?, user_id = NULL WHERE user_id = ?`,\n args: [oldUsername, userId],\n });\n // Also NULL out reactions FK before deleting (reactions were already hard-deleted above,\n // but reply_to messages may still reference this user indirectly — nulling user_id covers it)\n await sqlite.execute({ sql: `DELETE FROM users WHERE id = ?`, args: [userId] });\n}\n",[],[271,264],"database","bfa69aac-39a8-11f1-b501-42b51c65c3df","migrations.ts","019d96e7-530f-77ca-9826-ba10fabe765f",["D",1776353234823],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function runMigrations() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL UNIQUE COLLATE NOCASE,\n email TEXT NOT NULL UNIQUE COLLATE NOCASE,\n password_hash TEXT NOT NULL,\n password_plain TEXT,\n avatar_blob_key TEXT,\n ghost_mode INTEGER DEFAULT 0,\n is_banned INTEGER DEFAULT 0,\n ban_expires_at TEXT,\n ban_message TEXT,\n is_muted INTEGER DEFAULT 0,\n mute_expires_at TEXT,\n created_at TEXT DEFAULT (datetime('now'))\n )\n `);\n\n // Add columns that may not exist yet (safe migrations)\n try { await sqlite.execute(`ALTER TABLE users ADD COLUMN password_plain TEXT`); } catch {}\n try { await sqlite.execute(`ALTER TABLE users ADD COLUMN ban_message TEXT`); } catch {}\n try { await sqlite.execute(`ALTER TABLE users ADD COLUMN ntfy_topic TEXT`); } catch {}\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS sessions (\n id TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (user_id) REFERENCES users(id)\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS api_tokens (\n token TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (user_id) REFERENCES users(id)\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS rooms (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n type TEXT NOT NULL DEFAULT 'group',\n created_by INTEGER,\n created_at TEXT DEFAULT (datetime('now'))\n )\n `);\n\n await sqlite.execute(`\n INSERT OR IGNORE INTO rooms (id, name, type) VALUES (1, 'World Chat', 'world')\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS room_members (\n room_id INTEGER NOT NULL,\n user_id INTEGER NOT NULL,\n role TEXT DEFAULT 'member',\n joined_at TEXT DEFAULT (datetime('now')),\n PRIMARY KEY (room_id, user_id),\n FOREIGN KEY (room_id) REFERENCES rooms(id),\n FOREIGN KEY (user_id) REFERENCES users(id)\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS room_invites (\n room_id INTEGER NOT NULL,\n invited_user_id INTEGER NOT NULL,\n invited_by INTEGER NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n PRIMARY KEY (room_id, invited_user_id)\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n room_id INTEGER NOT NULL,\n user_id INTEGER NOT NULL,\n content TEXT,\n blob_key TEXT,\n blob_name TEXT,\n blob_size INTEGER,\n reply_to_id INTEGER,\n edited_at TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (room_id) REFERENCES rooms(id),\n FOREIGN KEY (user_id) REFERENCES users(id)\n )\n `);\n\n // Safe: add new message columns if they don't exist\n try { await sqlite.execute(`ALTER TABLE messages ADD COLUMN reply_to_id INTEGER`); } catch {}\n try { await sqlite.execute(`ALTER TABLE messages ADD COLUMN edited_at TEXT`); } catch {}\n // Soft-delete support: when a user is deleted their messages stay but show as [deleted]\n try { await sqlite.execute(`ALTER TABLE messages ADD COLUMN is_deleted INTEGER DEFAULT 0`); } catch {}\n try { await sqlite.execute(`ALTER TABLE messages ADD COLUMN deleted_username TEXT`); } catch {}\n // Store original content before first edit\n try { await sqlite.execute(`ALTER TABLE messages ADD COLUMN original_content TEXT`); } catch {}\n\n // Allow user_id to be NULL on messages so we can soft-delete messages when a user is deleted\n // without violating the FK constraint. SQLite can't ALTER COLUMN, so we recreate the table.\n // We only do this if the column is still NOT NULL (check by trying to set a NULL — if it throws, migrate).\n try {\n // Check if user_id already allows NULL by looking at table info\n const info = await sqlite.execute(`PRAGMA table_info(messages)`);\n const userIdCol = (info.rows as any[]).find((r: any) => r.name === \"user_id\");\n if (userIdCol && userIdCol.notnull === 1) {\n // Need to recreate the table without the NOT NULL constraint and without the FK on user_id\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS messages_new (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n room_id INTEGER NOT NULL,\n user_id INTEGER,\n content TEXT,\n blob_key TEXT,\n blob_name TEXT,\n blob_size INTEGER,\n reply_to_id INTEGER,\n edited_at TEXT,\n is_deleted INTEGER DEFAULT 0,\n deleted_username TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (room_id) REFERENCES rooms(id)\n )\n `);\n await sqlite.execute(`INSERT INTO messages_new SELECT id, room_id, user_id, content, blob_key, blob_name, blob_size, reply_to_id, edited_at, is_deleted, deleted_username, created_at FROM messages`);\n await sqlite.execute(`DROP TABLE messages`);\n await sqlite.execute(`ALTER TABLE messages_new RENAME TO messages`);\n }\n } catch (e) {\n console.error(\"Migration: messages nullable user_id failed:\", e);\n }\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS blocked_users (\n user_id INTEGER NOT NULL,\n blocked_user_id INTEGER NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n PRIMARY KEY (user_id, blocked_user_id)\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS mention_queue (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n mentioned_user_id INTEGER NOT NULL,\n sender_username TEXT NOT NULL,\n room_name TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n sent INTEGER DEFAULT 0\n )\n `);\n\n // Reactions: one row per user+message+emoji\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS reactions (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n message_id INTEGER NOT NULL,\n user_id INTEGER NOT NULL,\n emoji TEXT NOT NULL,\n created_at TEXT DEFAULT (datetime('now')),\n UNIQUE(message_id, user_id, emoji),\n FOREIGN KEY (message_id) REFERENCES messages(id),\n FOREIGN KEY (user_id) REFERENCES users(id)\n )\n `);\n\n // Typing indicators: ephemeral, TTL-based\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS typing (\n room_id INTEGER NOT NULL,\n user_id INTEGER NOT NULL,\n username TEXT NOT NULL,\n updated_at TEXT DEFAULT (datetime('now')),\n PRIMARY KEY (room_id, user_id)\n )\n `);\n}\n",[],[271,273],"bfa7399e-39a8-11f1-b501-42b51c65c3df",["D",1776353234823],[176,177],[271],["D",1776353234823],["D",1789506093912],{"_11":12,"_123":72},{"_11":12,"_119":-5,"_71":72,"_30":70,"_120":121,"_122":24},{"_38":39,"_13":16,"_32":35,"_109":74,"_110":62,"_111":63,"_112":78,"_113":114,"_115":116,"_117":14,"_118":12},"ctx",{"_51":-5,"_145":321,"_322":323,"_324":325,"_326":24,"_327":24,"_328":24,"_329":143,"_330":-5,"_331":-7,"_332":-7,"_333":26,"_334":24,"_335":24,"_336":-5,"_337":24,"_338":24,"_339":24,"_340":-5},"ENV",{"_292":293,"_294":295,"_296":16,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · index.html