Huddle — You were mentioned

You have new mentions in Huddle:

${items}\n

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

Huddle — Password Recovery

Your Huddle account password is:

${password}

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

`;\n}\n",[],[237,239],"927cdcb2-2f12-11f1-976b-42dde27851f2","auth.ts","927cdd84-2f12-11f1-976b-42dde27851f2",6,["D",1775189223833],"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",[],[237,247],"8c126ae0-2f12-11f1-adb8-42dde27851f2",3,["D",1775189213106],[194,195,196],[237],"aaeb1a4e-2f98-11f1-a85b-42dde27851f2","style.css","27c037b0-2f13-11f1-9702-42dde27851f2","8c27e49c-2f12-11f1-adb8-42dde27851f2",["D",1775246817412],"*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --bg: #0d0f18;\n --surface: #13161f;\n --surface2: #1c1f2e;\n --surface3: #242840;\n --border: #272b42;\n --accent: #5b5ef5;\n --accent2: #7c7ff7;\n --accent-glow: rgba(91,94,245,0.18);\n --text: #dde1f0;\n --text-muted: #8b92b4;\n --text-dim: #4d5270;\n --danger: #f06a6a;\n --danger-bg: rgba(240,106,106,0.1);\n --success: #3dd68c;\n --success-bg: rgba(61,214,140,0.1);\n --warn: #f5a623;\n --msg-other: #181b2a;\n --msg-own: #1a1e3a;\n --msg-own-border: rgba(91,94,245,0.3);\n --radius: 14px;\n --radius-sm: 9px;\n --radius-xs: 6px;\n --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\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 font-style: normal;\n}\n\n/* Kill every source of italic globally */\n*, *::before, *::after { font-style: normal !important; }\n\n#root { height: 100vh; display: flex; flex-direction: column; }\n\n/* ─── Scrollbars ─────────────────────────────── */\n* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }\n::-webkit-scrollbar { width: 5px; height: 5px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }\n\n/* ─── Auth Screen ────────────────────────────── */\n.auth-screen {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(91,94,245,0.2) 0%, transparent 70%), var(--bg);\n}\n\n.auth-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 2.25rem 2rem;\n width: 100%;\n max-width: 400px;\n box-shadow: 0 32px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);\n}\n\n.auth-logo {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n margin-bottom: 0.4rem;\n}\n\n.auth-logo-text {\n font-size: 1.7rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--accent2), #a5b4fc);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n letter-spacing: -0.5px;\n font-style: normal !important;\n}\n\n.auth-subtitle {\n color: var(--text-muted);\n font-size: 0.875rem;\n margin-bottom: 1.75rem;\n font-weight: 400;\n font-style: normal !important;\n}\n\n.form-group { margin-bottom: 1rem; }\n.form-group label {\n display: block;\n font-size: 0.8rem;\n color: var(--text-muted);\n margin-bottom: 0.35rem;\n font-weight: 500;\n letter-spacing: 0.02em;\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(--accent); box-shadow: 0 0 0 3px var(--accent-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.65rem 1.25rem;\n border-radius: var(--radius-sm);\n border: none;\n cursor: pointer;\n font-size: 0.875rem;\n font-weight: 600;\n font-family: var(--font);\n font-style: normal !important;\n transition: all 0.15s;\n text-decoration: none;\n line-height: 1;\n white-space: nowrap;\n}\n\n.btn:disabled { opacity: 0.5; cursor: not-allowed; }\n.btn-primary { background: var(--accent); color: #fff; width: 100%; margin-top: 0.25rem; }\n.btn-primary:hover:not(:disabled) { background: var(--accent2); box-shadow: 0 4px 16px rgba(91,94,245,0.35); }\n.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }\n.btn-ghost:hover { color: var(--text); border-color: var(--accent2); background: var(--accent-glow); }\n.btn-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(240,106,106,0.35); }\n.btn-danger:hover { background: rgba(240,106,106,0.2); }\n.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.775rem; border-radius: var(--radius-xs); }\n\n.error-msg { background: var(--danger-bg); border: 1px solid rgba(240,106,106,0.35); color: var(--danger); padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.82rem; margin-bottom: 1rem; line-height: 1.4; font-style: normal !important; }\n.success-msg { background: var(--success-bg); border: 1px solid rgba(61,214,140,0.35); color: var(--success); padding: 0.6rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.82rem; margin-bottom: 1rem; line-height: 1.4; 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(--accent2); cursor: pointer; font-weight: 600; 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: 240px 1fr;\n height: 100vh;\n overflow: hidden;\n}\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}\n\n.sidebar-header {\n padding: 1rem 0.875rem;\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 {\n font-size: 1.15rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--accent2), #a5b4fc);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n flex: 1;\n letter-spacing: -0.3px;\n font-style: normal !important;\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.67rem;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--text-dim);\n padding: 0 0.625rem;\n margin-bottom: 0.35rem;\n font-weight: 700;\n font-style: normal !important;\n}\n\n.room-item {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.5rem 0.625rem;\n border-radius: var(--radius-xs);\n cursor: pointer;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--text-muted);\n transition: all 0.15s;\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: rgba(91,94,245,0.15); color: var(--accent2); font-weight: 600; }\n.room-item .room-icon { flex-shrink: 0; opacity: 0.65; 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.75rem 0.75rem;\n border-top: 1px solid var(--border);\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n.user-pill {\n display: flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.45rem 0.4rem;\n border-radius: var(--radius-xs);\n cursor: pointer;\n transition: background 0.15s;\n min-width: 0;\n}\n\n.user-pill:hover { background: var(--surface2); }\n\n.user-pill .avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 0.75rem;\n overflow: hidden;\n flex-shrink: 0;\n color: #fff;\n}\n.user-pill .avatar img { width: 100%; height: 100%; object-fit: cover; }\n.user-pill .uname {\n font-size: 0.85rem;\n font-weight: 600;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n/* Admin badge — always inline-flex, never italic */\n.admin-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 3px;\n font-size: 0.6rem;\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n color: #fff;\n padding: 0.15rem 0.5rem;\n border-radius: 99px;\n font-weight: 700;\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\n/* Sidebar footer action buttons */\n.sidebar-action-btn {\n width: 100%;\n justify-content: flex-start;\n gap: 0.55rem;\n padding: 0.4rem 0.625rem;\n font-size: 0.82rem;\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 0.15s;\n font-family: var(--font);\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; /* must be visible so AI model picker dropdown isn't clipped */\n background: var(--bg);\n min-width: 0;\n min-height: 0;\n /* Use inner scroll on children instead */\n height: 100%;\n}\n\n.chat-header {\n padding: 0.875rem 1.5rem;\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}\n\n.chat-header-info { flex: 1; min-width: 0; }\n.chat-header-name {\n font-weight: 700;\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-muted);\n margin-top: 2px;\n font-weight: 400;\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.5rem;\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.3; }\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.25rem 0 0.75rem;\n}\n.date-divider::before, .date-divider::after {\n content: '';\n flex: 1;\n height: 1px;\n background: var(--border);\n}\n.date-divider span {\n font-size: 0.72rem;\n color: var(--text-dim);\n white-space: nowrap;\n padding: 0.2rem 0.65rem;\n background: var(--surface2);\n border-radius: 99px;\n font-weight: 600;\n letter-spacing: 0.03em;\n font-style: normal !important;\n}\n\n/* ─── Message Bubbles ────────────────────────── */\n.msg-row {\n display: flex;\n margin-bottom: 2px;\n animation: msgIn 0.18s ease;\n}\n@keyframes msgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }\n\n/* Own messages — LEFT */\n.msg-row.own { flex-direction: row; justify-content: flex-start; }\n/* Other messages — RIGHT */\n.msg-row.other { flex-direction: row-reverse; justify-content: flex-start; }\n\n.msg-row.group-start { margin-top: 0.875rem; }\n\n.msg-avatar {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 0.72rem;\n flex-shrink: 0;\n overflow: hidden;\n color: #fff;\n align-self: flex-end;\n margin-bottom: 2px;\n}\n.msg-row.own .msg-avatar { margin-right: 0.55rem; }\n.msg-row.other .msg-avatar { margin-left: 0.55rem; }\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 { max-width: 70%; display: flex; flex-direction: column; }\n.msg-row.own .msg-bubble-wrap { align-items: flex-start; }\n.msg-row.other .msg-bubble-wrap { align-items: flex-end; }\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.other .msg-meta { flex-direction: row-reverse; }\n\n.msg-meta .username {\n font-size: 0.8rem;\n font-weight: 700;\n color: var(--text-muted);\n font-style: normal !important;\n}\n.msg-meta .username.is-admin { color: var(--accent2); }\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.55rem 0.875rem;\n border-radius: var(--radius-sm);\n font-size: 0.875rem;\n line-height: 1.6;\n word-break: break-word;\n font-style: normal !important;\n}\n\n/* Own bubble — indigo tint, left side */\n.msg-row.own .msg-bubble {\n background: var(--msg-own);\n border: 1px solid var(--msg-own-border);\n border-radius: 4px var(--radius-sm) var(--radius-sm) var(--radius-sm);\n color: var(--text);\n}\n\n/* Other bubble — dark, right side */\n.msg-row.other .msg-bubble {\n background: var(--msg-other);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm) 4px var(--radius-sm) var(--radius-sm);\n color: var(--text);\n}\n\n.msg-bubble .mention { color: var(--accent2); font-weight: 700; 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.875rem;\n cursor: pointer;\n transition: all 0.15s;\n min-width: 180px;\n}\n.blob-file:hover { border-color: var(--accent); background: var(--accent-glow); }\n.blob-file-icon { color: var(--accent2); 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: 600; color: var(--accent2); 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.5rem;\n border-top: 1px solid var(--border);\n background: var(--surface);\n flex-shrink: 0;\n}\n\n.input-wrapper {\n display: flex;\n align-items: flex-end;\n gap: 0.5rem;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 0.5rem 0.625rem 0.5rem 0.875rem;\n transition: border-color 0.18s, box-shadow 0.18s;\n}\n.input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-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.875rem;\n resize: none;\n max-height: 120px;\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 0.15s;\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(--accent); }\n.icon-btn.send:hover { color: var(--accent2); background: var(--accent-glow); }\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(6px);\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 64px rgba(0,0,0,0.6);\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: 1.05rem; font-weight: 700; font-style: normal !important; }\n.settings-section { margin-bottom: 1.5rem; }\n.settings-section h3 {\n font-size: 0.72rem;\n font-weight: 700;\n color: var(--text-dim);\n margin-bottom: 0.65rem;\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}\n.member-row:hover { background: var(--surface2); }\n.member-row .mname { flex: 1; font-size: 0.875rem; font-weight: 500; font-style: normal !important; }\n.member-row .mrole { font-size: 0.68rem; color: var(--text-dim); background: var(--surface3); padding: 0.15rem 0.45rem; 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: 240px;\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 ease;\n box-shadow: -8px 0 32px rgba(0,0,0,0.3);\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: 700;\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.4rem 0.5rem;\n border-radius: var(--radius-xs);\n font-size: 0.84rem;\n margin-bottom: 1px;\n font-style: normal !important;\n}\n.user-row:hover { background: var(--surface2); }\n.user-mini-avatar {\n width: 28px; height: 28px;\n border-radius: 50%;\n background: linear-gradient(135deg, var(--accent), var(--accent2));\n display: flex; align-items: center; justify-content: center;\n font-size: 0.65rem; font-weight: 700; color: #fff;\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: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n font-size: 0.68rem;\n font-style: normal !important;\n}\n.admin-table td {\n padding: 0.45rem 0.5rem;\n border-bottom: 1px solid rgba(39,43,66,0.6);\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: 38px; height: 20px; flex-shrink: 0; }\n.toggle input { opacity: 0; width: 0; height: 0; }\n.toggle-slider { position: absolute; inset: 0; background: var(--border); 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(--accent); }\n.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }\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; /* let model picker dropdown escape */\n}\n\n.ai-header {\n padding: 0.875rem 1.5rem;\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}\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: 700; 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 Picker dropdown ─────────────────── */\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: 280px;\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.5);\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.75rem 1rem;\n cursor: pointer;\n transition: background 0.13s;\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(--accent-glow); }\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.85rem; font-weight: 600; 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.75rem; animation: msgIn 0.18s ease; }\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-end;\n overflow: hidden;\n}\n.ai-avatar.mistral { background: #FF7000; }\n.ai-avatar.user { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; font-weight: 700; font-size: 0.72rem; }\n\n.ai-bubble {\n max-width: 75%;\n padding: 0.65rem 0.9rem;\n border-radius: var(--radius-sm);\n font-size: 0.875rem;\n line-height: 1.65;\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.9rem; 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: 6px; height: 6px; 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(-4px); } }\n\n.ai-input-area {\n padding: 0.875rem 1.5rem;\n border-top: 1px solid var(--border);\n background: var(--surface);\n display: flex;\n gap: 0.5rem;\n}\n\n.ai-disclaimer {\n padding: 0.4rem 1.5rem;\n font-size: 0.7rem;\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(10px); } to { opacity: 1; transform: none; } }\n.animate-in { animation: fadeIn 0.22s ease; }\n\n/* ─── Bookmarklet page ───────────────────────── */\n.bm-page { max-width: 580px; width: 100%; }\n",[],[267,260],"frontend","674ae684-2f98-11f1-bbfe-42dde27851f2","index.html","7a0b9676-2f14-11f1-a476-42dde27851f2",53,["D",1775246703948],20,"\n\n\n \n \n Huddle\n \n \n\n\n

\n\n\n\n\n",[],[267,269],"8053fa20-2f17-11f1-b11e-42dde27851f2","bookmarklet.html","967f4e6a-2f14-11f1-9e52-42dde27851f2",27,["D",1775191340883],"\n\n\n \n \n Huddle Bookmarklet\n \n \n\n\n

Huddle Bookmarklet

Add Huddle as a bookmarklet to access it on any webpage without leaving the site. Drag the link below to your bookmarks bar, or follow the steps.

\n\n

Drag the button below to your browser's bookmarks bar

Visit any webpage and click the bookmarklet to open Huddle

\n\n

Drag this to your bookmarks bar:

\n Loading bookmarklet…\n
\n

The widget floats over any page. Drag the top bar to reposition it. Resize from the bottom-right corner. Works on touch screens too.

\n\n \n

\n ← Back to Huddle\n

\n\n\n\n",[],[267,278],"8c27e3ca-2f12-11f1-adb8-42dde27851f2",4,["D",1775189213246],[190,191,192],[267],["D",1775189293353],[],[18,81],["D",1775189255944],[],[18,66],["D",1775189212170],[187,188],[18],["D",1775189208983],["D",1789516910456],{"_11":12,"_135":72},{"_11":12,"_131":-5,"_71":72,"_31":70,"_132":133,"_134":30},{"_40":122,"_13":16,"_34":37,"_123":85,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":14,"_130":12},"ctx",{"_54":-5,"_154":337,"_338":339,"_340":341,"_342":30,"_343":30,"_344":30,"_345":24,"_346":-5,"_347":-7,"_348":-7,"_349":26,"_350":30,"_351":30,"_352":-5,"_353":30,"_354":30,"_355":30,"_356":-5},"ENV",{"_308":309,"_310":311,"_312":16,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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