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",[],[227,229],"b69d3690-3909-11f1-bc6d-42b51c65c3df","auth.ts","b69d3730-3909-11f1-bc6d-42b51c65c3df",8,["D",1776284930637],"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",[],[227,237],"840bdfec-3909-11f1-964d-42b51c65c3df",4,["D",1776284845799],[194,195,196],[227],"5386d61e-390a-11f1-9cf3-42b51c65c3df","style.css","5386d6f0-390a-11f1-9cf3-42b51c65c3df","83d3c7ce-3909-11f1-9f3b-42b51c65c3df",11,["D",1776285193890],"*, *::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",[],[258,250],"frontend","0ebf7c60-390b-11f1-8251-42b51c65c3df","index.tsx","0ebf7e36-390b-11f1-8251-42b51c65c3df",16,["D",1776285507997],"/** @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",[],[258,260],"05f83958-39a8-11f1-9a0d-42b51c65c3df","index.html","5e246abe-390a-11f1-9cf3-42b51c65c3df",["D",1776352924247],[],[258,268],"899b63be-390a-11f1-b20b-42b51c65c3df","bookmarklet.html","899b6468-390a-11f1-b20b-42b51c65c3df",14,["D",1776285284624],"\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",[],[258,274],"83d3c6e8-3909-11f1-9f3b-42b51c65c3df",3,["D",1776284845431],[189,190,191,192],[258],["D",1776284928769],[],[18,81],["D",1776284874039],[],[18,66],["D",1776284844900],[186,187],[18],["D",1776284391962],["D",1789510872811],{"_11":12,"_134":72},{"_11":12,"_130":-5,"_71":72,"_31":70,"_131":132,"_133":30},{"_40":121,"_13":16,"_34":37,"_122":85,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":14,"_129":12},"ctx",{"_54":-5,"_153":333,"_334":335,"_336":337,"_338":30,"_339":30,"_340":30,"_341":24,"_342":-5,"_343":-7,"_344":-7,"_345":26,"_346":30,"_347":30,"_348":-5,"_349":30,"_350":30,"_351":30,"_352":-5},"ENV",{"_304":305,"_306":307,"_308":16,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332},"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 · database