<!--
================================================================================
Nerdfest Webchat - Socket.IO Real-time Chat Application
================================================================================

REQUIREMENTS & FEATURES IMPLEMENTED:

UX/UI FEATURES:
1. Dark/Light Mode Toggle (theme-toggle button in header)
   - Stores preference in localStorage as 'darkMode'
   - CSS variables (--bg-primary, --bg-secondary, etc.) for theme colors
   - Smooth 0.3s transitions between themes
   - Applies to: header, sidebar, chat area, input, status bar, messages

2. Message History Navigation (Up/Down arrow keys in input)
   - Up arrow: go back in sent message history
   - Down arrow: go forward in sent message history
   - Requires cursor at start/end of input to activate
   - Uses sentMessages[] array and messageHistoryIndex

3. Auto-Growing Input Box (textarea element)
   - Starts at 1 line (44px height)
   - Grows up to 8 lines (200px max height)
   - resizeMessageInput() called on input event
   - Shift+Enter for new lines, Enter alone sends message

4. Markdown Rendering (markdown-it v14 from CDN)
   - Supports: bold, italics, headers, code blocks, lists, blockquotes, links
   - Rendered in all message types (user, bot, system)
   - Dark mode aware styling for code blocks and blockquotes

5. @ Autocomplete for Bots & Users (handleAutocomplete, showAutocomplete)
   - Type @ to trigger dropdown above textarea
   - Real-time filtering as you type
   - Arrow Up/Down to navigate, Tab/Enter to select, Escape to close
   - Shows bot names with descriptions and usernames with emails
   - Inserts "@name " with trailing space at cursor position

6. Message Removal with Strikethrough (removeMessage, msg-remove-btn)
   - X button appears on message hover (right side of header)
   - Clicking X marks message as removed
   - Shows strikethrough text in chat
   - Emits remove_message event to server
   - Server persists "removed": true flag in JSONL storage

7. Collapsible Bot List (toggleBots)
   - Click "▼ Available Bots" header to collapse/expand
   - Shows all bots when expanded (no scrollable list)
   - Arrow rotates on toggle (▼ → ▶)
   - Bots-list hidden when collapsed

8. Sidebar Scrolling (sidebar overflow-y: auto)
   - Sidebar scrolls independently when longer than viewport
   - Allows scrolling through long bot/group lists
   - Chat area stays fixed while sidebar scrolls

9. 24h European Time Format (toLocaleTimeString with de-DE locale)
   - Messages display time as HH:mm (e.g., "14:30")
   - Uses de-DE locale with hour12: false
   - Time label on left, remove X button on right of message header

TECHNICAL FEATURES:
1. Message IDs (UUID7-like format)
   - Format: {timestamp_ms}-{random_suffix} e.g., "1711015234567-a1b2c3d4e5f6"
   - Sortable by creation time
   - Unique per message

2. Message Storage (JSONL format)
   - One file per group: /var/lib/webchat/messages/{group_id}.jsonl
   - Each line is complete JSON message object
   - Fields: id, uuid, user_id, email, group_id, content, timestamp, type, removed

3. Bot System
   - Bots connect as Socket.IO clients
   - Auto-join all groups on registration
   - Auto-join new groups immediately when created
   - Commands routed via @botname syntax
   - Receive thread context (last 30 messages or --all)

4. Debug Logging
   - Set localStorage.DEBUG_LEVEL = '2' to enable verbose logging
   - Logs authentication, group joining, messages, message ownership
   - Tracks message comparisons: msg.user_id === this.userId

5. Session Management
   - JWT tokens stored in HTTP cookie (named 'webchat_jwt')
   - 7-day expiration on cookie
   - Auto-authenticates on page reload if cookie exists
   - Detects user switches (different JWT on same socket)

6. Emoji Reactions
   - Reaction badges displayed below message content
   - Quick-pick emoji row (9 common emojis) + text input for custom
   - Click badge to toggle reaction (add/remove)
   - Reactions rebuilt from message history on every render
   - Socket events: reaction_added, reaction_toggled, reaction_removed_event

7. ntfy Notification Settings
   - Modal dialog (🔔 button in header) for user to configure ntfy prefs
   - Fields: enabled toggle, server URL, topic, auth token
   - Prefs stored server-side (not localStorage) for cross-device sync
   - Auto-suggests topic: chat-{username}-{random}
   - Socket events: save_ntfy_prefs, get_ntfy_prefs, ntfy_prefs, ntfy_prefs_saved

8. Typing Indicators
    - Real-time typing indicators when users are composing a message
    - Server broadcasts at most once per 2.5s per group (no server-side state)
    - Client-side 3s timer auto-hides the indicator
    - "X is typing…" displayed above input with animated bouncing dots
    - Socket events: typing (client→server), user_typing (server→client)

9. @everyone / @all Mentions
   - Messages with is_everyone flag get orange left border + 📢 badge
   - isMentioned() returns true for @everyone (triggers glow/highlight)
   - Flag is set server-side — client trusts it without content parsing

================================================================================
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ MEADOWS_SYSTEM_NAME }}</title>
    <script src="/static/socket.io/socket.io.js"></script>
    <!-- MEADOWS protocol constants (single source of truth: meadows.protocol.EventName) -->
    <script>window.MEADOWS_PROTOCOL = {{ MEADOWS_PROTOCOL }};</script>
    <!-- Markdown rendering library -->
    <script src="https://cdn.jsdelivr.net/npm/markdown-it@14/dist/markdown-it.min.js"></script>
    <!-- HTML sanitization for form rendering (MEADOWS-forms-intent §2.11) -->
    <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
    <style>
        /* 
        ========================================================================
        DARK MODE THEME SYSTEM
        ========================================================================
        Requirement: Support dark/light mode toggle with smooth transitions
        Implementation: CSS custom properties (variables) for colors
        - Light mode: :root selector defines default colors
        - Dark mode: body.dark-mode selector overrides all colors
        - All elements use var(--color-name) to reference theme colors
        - Smooth 0.3s transitions applied to all theme-dependent properties
        - localStorage.darkMode stores user preference (true/false)
        - toggleTheme() method in WebChat class handles switching
        ========================================================================
        */
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
         /* Light mode colors (default) */
         :root {
             --bg-primary: #ffffff;
             --bg-secondary: #f5f5f5;
             --text-primary: #000000;
             --text-secondary: #666666;
             --border-color: #ddd;
             --header-bg: #1976d2;
             --message-bg-other: #f0f0f0;
             --message-bg-mine: #e3f2fd;
             --input-border: #ddd;
             /* REQUIREMENT: Mention colors - theme-aware for readability */
             --mention-glow-color: rgba(255, 152, 0, 0.6); /* Dark orange on light theme */
             --mention-text-color: #e65100; /* Dark orange text for light theme */
         }
        
         /* Dark mode colors - override all variables */
         body.dark-mode {
             --bg-primary: #1e1e1e;
             --bg-secondary: #2d2d2d;
             --text-primary: #ffffff;
             --text-secondary: #aaaaaa;
             --border-color: #444;
             --header-bg: #1565c0;
             --message-bg-other: #2d2d2d;
             --message-bg-mine: #1a3a52;
             --input-border: #444;
             /* REQUIREMENT: Mention colors - golden yellow on dark theme */
             --mention-glow-color: rgba(255, 193, 7, 0.6); /* Golden on dark theme */
             --mention-text-color: #ffc107; /* Golden text for dark theme */
         }
         
         /* Dark mode scrollbars - webkit (Chrome, Edge, Vivaldi, Safari) */
         body.dark-mode {
             scrollbar-color: #555 #1e1e1e;
             scrollbar-width: thin;
         }
         body.dark-mode::-webkit-scrollbar {
             width: 10px;
             height: 10px;
             background: #1e1e1e;
         }
         body.dark-mode::-webkit-scrollbar-thumb {
             background: #555;
             border-radius: 5px;
             border: 2px solid #1e1e1e;
         }
         body.dark-mode::-webkit-scrollbar-thumb:hover {
             background: #777;
         }
         body.dark-mode::-webkit-scrollbar-track {
             background: #1e1e1e;
         }
         body.dark-mode::-webkit-scrollbar-corner {
             background: #1e1e1e;
         }
         
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: var(--bg-secondary);
            color: var(--text-primary);
            height: 100vh;
            display: flex;
            flex-direction: column;
            transition: background-color 0.3s, color 0.3s;
        }
        
        .header {
            background: var(--header-bg);
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s;
        }
        
        .theme-toggle {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 5px 10px;
            margin-left: 10px;
            transition: transform 0.2s;
        }
        
        .theme-toggle:hover {
            transform: scale(1.1);
        }
        
        .header h1 {
            font-size: 1.5rem;
        }
        
        .header-info {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .main-container {
            flex: 1;
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            padding: 20px;
            gap: 20px;
            overflow: hidden;
            transition: max-width 0.3s;
        }
        
        /* REQUIREMENT: Full-width toggle to use entire viewport width */
        .main-container.fullwidth {
            max-width: none;
            margin: 0;
            padding: 20px;
        }
        
         .sidebar {
             width: 280px;
             display: flex;
             flex-direction: column;
             gap: 0;
             flex-shrink: 0;
             overflow-y: auto;
             overflow-x: hidden;
             max-height: 100%;
             transition: width 0.3s, min-width 0.3s;
             background: var(--bg-primary);
             border-radius: 8px;
             box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
         
         .sidebar.collapsed {
             width: 50px;
             min-width: 50px;
         }
         
         .sidebar.collapsed .panel {
             display: none;
         }
         
         .sidebar.collapsed .sidebar-header {
             padding: 10px 5px;
         }
         
         .sidebar-header {
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 15px 10px;
             cursor: pointer;
             user-select: none;
             color: var(--text-primary);
             border-bottom: 1px solid var(--border-color);
             transition: color 0.3s, border-color 0.3s;
             font-weight: 600;
         }
         
         .sidebar-header:hover {
             opacity: 0.7;
         }
         
         .sidebar-toggle {
              display: inline-block;
              transition: transform 0.2s;
              font-size: 0.9rem;
          }
         
         .sidebar.collapsed .sidebar-toggle {
             transform: rotate(180deg);
         }
         
         .panel {
             background: transparent;
             border-radius: 0;
             box-shadow: none;
             padding: 0;
             transition: background-color 0.3s;
             border-bottom: 1px solid var(--border-color);
         }
         
         .panel:last-child {
             border-bottom: none;
         }
         
         .section-header {
             display: flex;
             align-items: center;
             cursor: pointer;
             padding: 12px 15px;
             user-select: none;
             color: var(--text-primary);
             font-weight: 600;
             font-size: 0.9rem;
             transition: background 0.2s;
             border-bottom: 1px solid var(--border-color);
         }
         
         .section-header:hover {
             background: var(--bg-secondary);
         }
         
         .section-toggle {
             display: inline-block;
             transition: transform 0.2s;
             margin-right: 8px;
             font-size: 0.9rem;
         }
         
         .section-toggle.collapsed {
             transform: rotate(-90deg);
         }
         
         .section-content {
             display: flex;
             flex-direction: column;
         }
         
         .section-content.hidden {
             display: none;
         }
        
         .groups-list {
             overflow-y: auto;
             padding: 8px 12px;
             max-height: 400px;
         }
         
         .groups-list.section-content {
             padding: 8px 12px;
         }
        
        .group-item {
            padding: 10px;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 4px;
            transition: background 0.2s;
            color: var(--text-primary);
        }
        
        .group-item:hover {
            background: var(--bg-secondary);
        }
        
         .group-item.active {
             background: var(--message-bg-mine);
             font-weight: 500;
         }
         
         /* REQUIREMENT: Highlight group name when user is mentioned in that group */
         /* Only applies when group is not currently focused */
         .group-item.has-mention:not(.active) {
             animation: group-mention-pulse 1s ease-in-out infinite;
             box-shadow: 0 0 15px rgba(255, 152, 0, 0.5); /* Orange for light theme */
         }
         
         body.dark-mode .group-item.has-mention:not(.active) {
             box-shadow: 0 0 15px rgba(255, 193, 7, 0.5); /* Golden for dark theme */
         }
         
         @keyframes group-mention-pulse {
             0%, 100% {
                 background: var(--bg-secondary);
             }
             50% {
                 background: rgba(255, 152, 0, 0.1); /* Light orange tint */
             }
         }
         
         body.dark-mode .group-item.has-mention:not(.active) {
             animation: group-mention-pulse-dark 1s ease-in-out infinite;
         }
         
         @keyframes group-mention-pulse-dark {
             0%, 100% {
                 background: var(--bg-secondary);
             }
             50% {
                 background: rgba(255, 193, 7, 0.15); /* Golden tint for dark theme */
             }
         }
         
         .group-item .group-name {
             font-weight: 500;
             color: var(--text-primary);
         }
         
         .group-item.has-mention .group-name {
             color: var(--mention-text-color);
             font-weight: 600;
         }
        
         .group-item .group-members {
             font-size: 0.8rem;
             color: var(--text-secondary);
         }
         
         .group-delete-btn {
             background: none;
             border: none;
             color: #999;
             font-size: 1.1rem;
             cursor: pointer;
             padding: 4px 8px;
             opacity: 0;
             transition: opacity 0.2s, color 0.2s;
             flex-shrink: 0;
         }
         
         .group-item:hover .group-delete-btn {
             opacity: 1;
         }
         
         .group-delete-btn:hover {
             color: #d32f2f;
         }
         
         .create-group {
             display: flex;
             gap: 8px;
             margin-top: 10px;
             padding: 12px;
             border-top: 1px solid var(--border-color);
             background: var(--bg-secondary);
             border-radius: 4px;
         }
         
         .create-group input {
             flex: 1;
             padding: 8px 10px;
             border: 1px solid var(--border-color);
             border-radius: 4px;
             font-size: 0.9rem;
             background: var(--bg-primary);
             color: var(--text-primary);
             transition: border-color 0.3s, background-color 0.3s, color 0.3s;
         }
         
         .create-group input:focus {
             border-color: #1976d2;
             outline: none;
         }
         
         .create-group button {
             padding: 8px 14px;
             background: #1976d2;
             color: white;
             border: none;
             border-radius: 4px;
             cursor: pointer;
             font-size: 0.9rem;
             font-weight: 600;
             transition: background 0.2s;
             flex-shrink: 0;
         }
         
         .create-group button:hover {
             background: #1565c0;
         }
         
         .create-group button:active {
             transform: scale(0.98);
         }
        
         .bots-list {
             display: flex;
             flex-direction: column;
             gap: 4px;
             overflow-y: auto;
             padding: 8px 12px;
             max-height: 250px;
         }
         
         .bots-list.section-content {
             padding: 8px 12px;
         }
         
         .bots-list.hidden {
             display: none;
         }
        
        .bot-card {
            padding: 10px;
            background: var(--bg-secondary);
            border-radius: 6px;
            border-left: 3px solid #1976d2;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
        }
        
        .bot-card:hover {
            background: var(--bg-secondary);
            opacity: 0.8;
            transform: translateX(2px);
        }
        
        .bot-card:active {
            transform: translateX(1px);
        }
        
        .bot-card .bot-name {
            font-weight: 600;
            color: #1976d2;
        }
        
        .bot-card .bot-description {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        
        .bot-card .bot-commands {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 6px;
        }
        
        .chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: var(--bg-primary);
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: background-color 0.3s;
        }
        
        .chat-header {
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-primary);
            transition: border-color 0.3s, color 0.3s;
        }
        
        .chat-header .leave-btn {
            padding: 6px 12px;
            background: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85rem;
        }
        
        .messages {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--bg-primary);
            transition: background-color 0.3s;
        }
        
        .message {
            max-width: 70%;
            padding: 10px 14px;
            border-radius: 12px;
            line-height: 1.4;
        }
        
        .message.user {
            background: var(--message-bg-other);
            border-bottom-left-radius: 4px;
        }
        
        .message.user.mine {
            align-self: flex-end;
            background: var(--message-bg-mine);
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 12px;
        }
        
        .message.user:not(.mine) {
            align-self: flex-start;
            border-bottom-right-radius: 12px;
        }
        
        .message.bot {
            align-self: flex-start;
            background: var(--message-bg-other);
            border-bottom-left-radius: 4px;
            border-left: 3px solid #9c27b0;
        }
        
        /* Forms from bots render on user side since user fills them */
        .message.form-message {
            align-self: flex-end;
            background: var(--message-bg-mine);
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 12px;
            border-left: none;
        }
        
        .message.system {
            align-self: center;
            background: var(--bg-secondary);
            font-style: italic;
            color: var(--text-secondary);
            font-size: 0.9rem;
            max-width: 90%;
        }
        
         .message.system.warning {
             background: var(--bg-secondary);
             color: #ff9800;
             border-left: 4px solid #ff9800;
             padding-left: 12px;
             font-style: normal;
         }
         
         /* REQUIREMENT: Mention glow effect for messages that mention the current user */
         /* Uses orange glow that's readable on both light and dark themes */
         .message.mentioned {
             animation: mention-glow 0.5s ease-in-out;
             box-shadow: 0 0 20px rgba(255, 152, 0, 0.7), 0 0 40px rgba(255, 152, 0, 0.4);
         }
         
         /* Light theme: use darker orange glow for better contrast */
         :root .message.mentioned {
             box-shadow: 0 0 20px rgba(255, 152, 0, 0.6), 0 0 40px rgba(255, 152, 0, 0.3);
         }
         
         /* Dark theme: use golden orange glow */
         body.dark-mode .message.mentioned {
             box-shadow: 0 0 20px rgba(255, 193, 7, 0.7), 0 0 40px rgba(255, 193, 7, 0.4);
         }
         
         @keyframes mention-glow {
             0% {
                 box-shadow: 0 0 5px rgba(255, 152, 0, 0.4);
             }
             50% {
                 box-shadow: 0 0 30px rgba(255, 152, 0, 0.8);
             }
             100% {
                 box-shadow: 0 0 20px rgba(255, 152, 0, 0.6);
             }
         }
         
         /* Fade out the glow after auto-glow timeout */
         .message.mentioned.glow-faded {
             animation: none;
             box-shadow: none;
         }
        
        /*
        ========================================================================
        CONTEXT CUTOFF MARKER
        ========================================================================
        Requirement: Show where bot thread context begins (floating line)
        - Appears before the last 30 messages if total > 30
        - Visual separator showing "Bot context starts here"
        - Helps users understand what context bots will see
        ========================================================================
        */
        
        .context-cutoff {
            text-align: center;
            padding: 15px;
            margin: 20px 0;
            border-top: 2px dashed var(--border-color);
            border-bottom: 2px dashed var(--border-color);
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-style: italic;
            background: var(--bg-secondary);
            border-radius: 4px;
            opacity: 0.7;
        }
        
        .message .msg-header {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 4px;
        }
        
        .message .msg-author {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--text-primary);
        }
        
        .message .msg-time {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }
        
        .message .msg-content {
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        
        .message .msg-content h1, .message .msg-content h2, .message .msg-content h3,
        .message .msg-content h4, .message .msg-content h5, .message .msg-content h6 {
            margin: 8px 0;
            font-weight: 600;
        }
        
        .message .msg-content h1 { font-size: 1.5rem; }
        .message .msg-content h2 { font-size: 1.3rem; }
        .message .msg-content h3 { font-size: 1.1rem; }
        
        .message .msg-content strong { font-weight: 600; }
        .message .msg-content em { font-style: italic; }
        .message .msg-content code {
            background: var(--bg-secondary);
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: var(--text-primary);
        }
        
        .message .msg-content pre {
            background: var(--bg-secondary);
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
            margin: 8px 0;
            color: var(--text-primary);
        }
        
        .message .msg-content pre code {
            background: none;
            padding: 0;
            border-radius: 0;
        }
        
        .message .msg-content ul, .message .msg-content ol {
            margin-left: 20px;
            margin: 8px 0;
        }
        
        .message .msg-content li {
            margin: 4px 0;
        }
        
        .message .msg-content blockquote {
            border-left: 4px solid var(--border-color);
            padding-left: 12px;
            margin: 8px 0;
            color: var(--text-secondary);
        }
        
        .message .msg-content a {
            color: #1976d2;
            text-decoration: none;
        }
        
         .message .msg-content a:hover {
             text-decoration: underline;
         }
         
         /* Message expansion/collapse feature */
         .msg-content {
             position: relative;
             transition: max-height 0.3s ease-out;
         }
         
          .msg-content.collapsed {
              max-height: 14.4em; /* ~6 lines at 1.4 line-height + buffer (doubled from 3 lines) */
              overflow: hidden;
              position: relative;
          }
         
         /* Fade-out gradient at bottom of collapsed messages */
         .msg-content.collapsed::after {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 1.5em;
             background: linear-gradient(
                 to bottom,
                 rgba(255, 255, 255, 0),
                 var(--message-bg-other)
             );
             pointer-events: none;
         }
         
         /* Adjust gradient for bot messages */
         .message.bot .msg-content.collapsed::after {
             background: linear-gradient(
                 to bottom,
                 rgba(255, 255, 255, 0),
                 var(--message-bg-other)
             );
         }
         
         /* Adjust gradient for user's own messages */
         .message.user.mine .msg-content.collapsed::after {
             background: linear-gradient(
                 to bottom,
                 rgba(255, 255, 255, 0),
                 var(--message-bg-mine)
             );
         }
         
         /* Show More / Show Less button styling */
         .msg-expand-toggle {
             display: inline-block;
             margin-top: 6px;
             padding: 4px 0;
             background: none;
             border: none;
             color: var(--text-secondary);
             font-size: 0.85rem;
             cursor: pointer;
             text-decoration: none;
             transition: color 0.2s;
              font-style: italic;
          }
          
          .msg-expand-toggle:hover {
              color: var(--text-primary);
          }
          
          /* Embedded form styles */
          .embedded-form {
              margin: 10px 0;
              padding: 12px;
              background: var(--bg-secondary);
              border-radius: 6px;
              border: 1px solid var(--border-color, #e0e0e0);
          }
          
          .embedded-form form {
              display: flex;
              flex-direction: column;
              gap: 8px;
          }
          
          .embedded-form table {
              width: 100%;
              border-collapse: collapse;
          }
          
          .embedded-form table th,
          .embedded-form table td {
              padding: 6px 10px;
              text-align: left;
              border-bottom: 1px solid var(--border-color, #e0e0e0);
          }
          
          .embedded-form table th {
              font-weight: 600;
              color: var(--text-secondary);
              font-size: 0.85rem;
              text-transform: uppercase;
          }
          
          .embedded-form table td:last-child {
              white-space: nowrap;
          }
          
          .embedded-form label {
              font-size: 0.9rem;
              font-weight: 500;
              color: var(--text-primary);
          }
          
          .embedded-form input[type="text"],
          .embedded-form input[type="email"],
          .embedded-form input[type="number"],
          .embedded-form input[type="date"],
          .embedded-form textarea,
          .embedded-form select {
              padding: 6px 10px;
              border: 1px solid var(--border-color, #ccc);
              border-radius: 4px;
              font-size: 0.9rem;
              background: var(--bg-primary);
              color: var(--text-primary);
              font-family: inherit;
          }
          
          .embedded-form textarea {
              resize: vertical;
              min-height: 60px;
          }
          
          .embedded-form button {
              padding: 6px 16px;
              border: none;
              border-radius: 4px;
              font-size: 0.9rem;
              cursor: pointer;
              background: #7c3aed;
              color: white;
              font-weight: 500;
              transition: background 0.2s;
              align-self: flex-start;
          }
          
          .embedded-form button:hover {
              background: #6d28d9;
          }
          
          .embedded-form button:disabled {
              background: #9ca3af;
              cursor: not-allowed;
          }
          
          .form-submitted-label {
              font-size: 0.85rem;
              color: #16a34a;
              font-style: italic;
              margin-top: 6px;
          }
          
          .form-submitted-summary {
              padding: 8px 12px;
              background: rgba(22, 163, 74, 0.1);
              border-radius: 4px;
              font-size: 0.9rem;
              color: #16a34a;
              display: flex;
              align-items: center;
              gap: 6px;
          }
          
          .form-submitted-check {
              font-weight: bold;
              font-size: 1.1rem;
          }
          
          /* data-action buttons */
          [data-action] {
              display: inline-block;
              padding: 2px 8px;
              margin: 1px 2px;
              border: 1px solid #7c3aed;
              border-radius: 3px;
              background: rgba(124, 58, 237, 0.1);
              color: #7c3aed;
              font-size: 0.8rem;
              cursor: pointer;
              transition: all 0.15s;
              text-decoration: none;
          }
          
          [data-action]:hover {
              background: #7c3aed;
              color: white;
          }
          
          .message .msg-command {
            font-size: 0.8rem;
            color: #666;
            font-style: italic;
            margin-top: 4px;
        }
        
        /*
        ========================================================================
        MESSAGE REMOVAL FEATURE
        ========================================================================
        Requirement: Remove/delete messages with strikethrough effect
        Implementation:
        - X button (✕) appears on message hover (right side via margin-left: auto)
        - removeMessage() marks message as "removed": true in storage
        - Emits 'remove_message' event to server
        - Server updates JSONL file with removed flag
        - Messages with removed=true get .removed class for strikethrough styling
        - Removed messages hidden from bot thread context (load_thread_context filters)
        - Broadcast message_removed event to all clients for real-time update
        ========================================================================
        */
        
         .message .msg-reply-btn {
             background: none;
             border: none;
             color: #999;
             font-size: 1.2rem;
             cursor: pointer;
             padding: 0 4px;
             margin-right: 4px;
             opacity: 0;
             transition: opacity 0.2s, color 0.2s;
             flex-shrink: 0;
         }
         
         .message:hover .msg-reply-btn {
             opacity: 1;
         }
         
         .message .msg-reply-btn:hover {
             color: #1976d2;
         }
         
           .message .msg-actions .msg-copy-btn {
               background: none;
               border: 1px solid #ddd;
               border-radius: 4px;
               color: #666;
               font-size: 0.9rem;
               cursor: pointer;
               padding: 4px 8px;
               margin: 0;
               opacity: 1;
               transition: all 0.2s;
               flex-shrink: 0;
           }
           
           .message .msg-actions .msg-copy-btn:hover {
               color: #388e3c;
               border-color: #388e3c;
               background: rgba(56, 142, 60, 0.05);
           }
          
          #update-notification {
              position: fixed;
              bottom: 60px;
              right: 20px;
              background: #fff3cd;
              color: #856404;
              padding: 12px 16px;
              border-radius: 8px;
              box-shadow: 0 4px 12px rgba(0,0,0,0.15);
              font-size: 0.9rem;
              z-index: 1001;
              display: none;
              max-width: 300px;
          }
          
          #update-notification.visible {
              display: flex;
              align-items: center;
              gap: 10px;
          }
          
          #update-notification button {
              background: #856404;
              color: white;
              border: none;
              padding: 6px 12px;
              border-radius: 4px;
              cursor: pointer;
              font-size: 0.85rem;
          }
          
          #update-notification button:hover {
              background: #6d3603;
          }
          
          .message .msg-remove-btn {
              background: none;
              border: none;
              color: #999;
              font-size: 1.2rem;
              cursor: pointer;
              padding: 0 4px;
              margin-left: auto;
              opacity: 0;
              transition: opacity 0.2s, color 0.2s;
              flex-shrink: 0;
          }
          
          .message:hover .msg-remove-btn {
              opacity: 1;
          }
          
           .message .msg-remove-btn:hover {
               color: #d32f2f;
           }
          
          .message .msg-actions {
              display: flex;
              flex-direction: row-reverse;
              gap: 8px;
              margin-top: 8px;
              padding-top: 8px;
              border-top: 1px solid transparent;
              opacity: 0;
              transition: opacity 0.2s;
          }
          
          .message:hover .msg-actions {
              opacity: 1;
          }
          
          .message .msg-actions .msg-reply-btn {
              background: none;
              border: 1px solid #ddd;
              border-radius: 4px;
              color: #666;
              font-size: 0.9rem;
              cursor: pointer;
              padding: 4px 8px;
              margin: 0;
              opacity: 1;
              transition: all 0.2s;
              flex-shrink: 0;
          }
          
          .message .msg-actions .msg-reply-btn:hover {
              color: #1976d2;
              border-color: #1976d2;
              background: rgba(25, 118, 210, 0.05);
          }
          
          .message.removed {
              opacity: 0.6;
          }
         
          .message.removed .msg-content {
              text-decoration: line-through;
              color: #999;
          }
          
         /*
         ========================================================================
         QUOTED MESSAGE (REPLY)
         ========================================================================
         Requirement: Show quoted/replied-to message in input area
         Implementation:
         - Quoted message box appears above input textarea
         - Shows original author, time, and content
         - X button to remove the quote
         - When message is sent, quote is included in context
         ========================================================================
         */
         
         .quoted-message {
             padding: 12px;
             margin-bottom: 10px;
             background: var(--bg-secondary);
             border-left: 3px solid #1976d2;
             border-radius: 4px;
             display: flex;
             justify-content: space-between;
             align-items: flex-start;
             gap: 10px;
             transition: background-color 0.3s, border-color 0.3s;
         }
         
         .quoted-message-content {
             flex: 1;
             min-width: 0;
         }
         
         .quoted-message-author {
             font-weight: 600;
             font-size: 0.85rem;
             color: #1976d2;
             margin-bottom: 4px;
         }
         
         .quoted-message-text {
             font-size: 0.9rem;
             color: var(--text-primary);
             white-space: pre-wrap;
             word-wrap: break-word;
             overflow: hidden;
             max-height: 60px;
             overflow-y: auto;
         }
         
         .quoted-message-remove {
             background: none;
             border: none;
             color: #999;
             font-size: 1.2rem;
             cursor: pointer;
             padding: 0;
             flex-shrink: 0;
             transition: color 0.2s;
         }
         
          .quoted-message-remove:hover {
              color: #d32f2f;
          }
          
          /* Inline quoted message displayed within a message (compact preview) */
          .message .msg-quoted {
              margin: 0 0 8px 0;
              padding: 6px 8px;
              background: rgba(25, 118, 210, 0.08);
              border-left: 3px solid #1976d2;
              border-radius: 3px;
              cursor: pointer;
              transition: all 0.2s;
              max-height: 3.6em; /* Max ~3 lines at 1.2em line-height */
              overflow: hidden;
          }
          
          .message .msg-quoted:hover {
              background: rgba(25, 118, 210, 0.12);
              border-left-color: #0d47a1;
          }
          
          .message .msg-quoted-author {
              font-weight: 600;
              font-size: 0.8rem;
              color: #1565c0;
              margin-bottom: 2px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }
          
          .message .msg-quoted-text {
              font-size: 0.85rem;
              color: var(--text-primary);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 1.2em;
          }
          
          /* Highlight animation when navigated to */
          .message.highlight-reply {
              animation: highlightReply 0.8s ease-in-out;
          }
          
          @keyframes highlightReply {
              0% {
                  background: rgba(25, 118, 210, 0.3);
              }
              50% {
                  background: rgba(25, 118, 210, 0.15);
              }
              100% {
                  background: var(--message-bg-other);
              }
          }
          
          /*
          ========================================================================
          USER LIST PANEL
          ========================================================================
         Requirement: Right-hand user list that's horizontally collapsable
         Implementation:
         - Users panel on right side of chat area
         - Header with collapse/expand toggle (◀/▶ arrows)
         - Smooth width transition animation (0.3s)
         - localStorage persistence for collapsed state
         - Dark mode support via CSS variables
         - Shows current users in active group
         ========================================================================
         */
         
         .users-list {
             overflow-y: auto;
             padding: 8px 12px;
             display: flex;
             flex-direction: column;
             gap: 4px;
             max-height: 300px;
         }
         
         .users-list.section-content {
             padding: 8px 12px;
         }
         
         .user-item {
             padding: 10px;
             background: var(--bg-secondary);
             border-radius: 6px;
             cursor: pointer;
             transition: background 0.2s, transform 0.1s;
             color: var(--text-primary);
             font-size: 0.9rem;
             border-left: 3px solid #4caf50;
         }
         
         .user-item:hover {
             background: var(--bg-secondary);
             opacity: 0.8;
             transform: translateX(2px);
         }
         
         .user-item:active {
             transform: translateX(1px);
         }
         
         .user-item .user-name {
             font-weight: 500;
             color: var(--text-primary);
         }
         
         .user-item .user-email {
             font-size: 0.8rem;
             color: var(--text-secondary);
             margin-top: 2px;
         }
         
         .input-area {
             padding: 15px;
             border-top: 1px solid var(--border-color);
             display: flex;
             gap: 10px;
             background: var(--bg-primary);
             transition: border-color 0.3s, background-color 0.3s;
         }

         /* Typing indicator */
         .typing-indicator {
             position: absolute;
             bottom: 100%;
             left: 0;
             right: 0;
             padding: 6px 15px;
             font-size: 0.8rem;
             color: var(--text-secondary);
             background: var(--bg-secondary);
             border-top: 1px solid var(--border-color);
             display: flex;
             align-items: center;
             gap: 6px;
         }
         .typing-indicator-dots span {
             display: inline-block;
             width: 6px;
             height: 6px;
             background: var(--text-secondary);
             border-radius: 50%;
             animation: typing-bounce 1.2s infinite ease-in-out;
         }
         .typing-indicator-dots span:nth-child(2) { animation-delay: 0.2s; }
         .typing-indicator-dots span:nth-child(3) { animation-delay: 0.4s; }
         @keyframes typing-bounce {
             0%, 60%, 100% { transform: translateY(0); }
             30% { transform: translateY(-4px); }
         }
         .input-area > div:first-child {
            display: flex;
            flex: 1 1 auto;
            min-width: 0;
            position: relative;
        }
        
        .input-area textarea {
            flex: 1 1 auto;
            width: 100%;
            padding: 12px;
            border: 1px solid var(--input-border);
            border-radius: 12px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.2s;
            font-family: inherit;
            resize: none;
            min-height: 44px;
            max-height: 200px;
            overflow-y: auto;
            line-height: 1.4;
            background: var(--bg-secondary);
            color: var(--text-primary);
        }
        
        .input-area textarea:focus {
            border-color: #1976d2;
        }
        
        .input-area button {
            padding: 10px 20px;
            background: #1976d2;
            color: white;
            border: none;
            border-radius: 24px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.2s;
        }
        
        .input-area button:hover {
            background: #1565c0;
        }
        
         .auth-overlay, .modal-overlay {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             background: rgba(0,0,0,0.7);
             display: flex;
             justify-content: center;
             align-items: center;
             z-index: 1000;
         }
         
         .modal-overlay.hidden {
             display: none;
         }
         
         .auth-box, .modal-box {
             background: var(--bg-primary);
             padding: 30px;
             border-radius: 12px;
             max-width: 450px;
             width: 90%;
             transition: background-color 0.3s;
         }
        
        .auth-box h2 {
            margin-bottom: 15px;
            color: #1976d2;
        }
        
         .auth-box h2, .modal-box h2 {
             margin-bottom: 15px;
             color: #1976d2;
         }
         
         .auth-box p, .modal-box p {
             margin-bottom: 20px;
             color: var(--text-secondary);
             line-height: 1.5;
         }
         
         .auth-box input, .modal-box input {
             width: 100%;
             padding: 12px;
             border: 1px solid var(--border-color);
             border-radius: 4px;
             font-size: 1rem;
             margin-bottom: 15px;
             background: var(--bg-secondary);
             color: var(--text-primary);
             transition: border-color 0.3s, background-color 0.3s, color 0.3s;
         }
         
         .auth-box button, .modal-box button {
             width: 100%;
             padding: 12px;
             background: #1976d2;
             color: white;
             border: none;
             border-radius: 4px;
             cursor: pointer;
             font-size: 1rem;
             font-weight: 500;
             transition: background 0.2s;
         }
         
         .auth-box button:hover, .modal-box button:hover {
             background: #1565c0;
         }
        
        .status-bar {
            padding: 8px 15px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 0.85rem;
            display: flex;
            justify-content: space-between;
            transition: background-color 0.3s, color 0.3s;
        }
        
        .status-bar .status {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-secondary);
        }
        
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #999;
        }
        
        .status-indicator.connected {
            background: #4caf50;
        }
        
        .status-indicator.error {
            background: #f44336;
        }
        
        .hidden {
            display: none !important;
        }
        
        /* 
        ========================================================================
        @ AUTOCOMPLETE FEATURE
        ========================================================================
        Requirement: Bash-like autocomplete when typing @ to mention bots/users
        Implementation: 
        - Dropdown positioned above textarea (bottom: 100%)
        - handleAutocomplete() triggered on input
        - getAutocompleteMatches() filters bots and users by typed text
        - Arrow keys navigate, Tab/Enter select, Escape closes
        - showAutocomplete() renders dropdown
        - selectAutocompleteMatch() inserts selection with trailing space
        - Only shows when @ is followed by text without spaces
        ========================================================================
        */
        
        .autocomplete-container {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 250px;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
            max-height: 200px;
            overflow-y: auto;
            z-index: 100;
            display: none;
            transition: background-color 0.3s, border-color 0.3s;
            margin-bottom: 8px;
        }
        
        .autocomplete-container.active {
            display: block;
        }
        
        .autocomplete-item {
            padding: 10px 15px;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
            transition: background-color 0.2s;
        }
        
        .autocomplete-item:last-child {
            border-bottom: none;
        }
        
        .autocomplete-item:hover {
            background: var(--bg-secondary);
        }
        
        .autocomplete-item.selected {
            background: var(--message-bg-mine);
        }
        
        .autocomplete-item .autocomplete-label {
            font-weight: 600;
            color: #1976d2;
        }
        
          .autocomplete-item .autocomplete-desc {
              font-size: 0.8rem;
              color: var(--text-secondary);
              margin-top: 2px;
          }
          
          /*
          ========================================================================
          EXPORT MARKERS AND BUTTONS
          ========================================================================
          Requirement: Export messages with visual markers for start/end selection
          Implementation:
          - Export button in message actions
          - Marked messages have left border highlight
          - Export modal for format selection
          ========================================================================
          */
          
          .msg-export-btn {
              background: none;
              border: 1px solid #ddd;
              border-radius: 4px;
              color: #666;
              font-size: 0.9rem;
              cursor: pointer;
              padding: 4px 8px;
              margin: 0;
              opacity: 1;
              transition: all 0.2s;
              flex-shrink: 0;
          }
          
          .msg-export-btn:hover {
              color: #1976d2;
              border-color: #1976d2;
              background: rgba(25, 118, 210, 0.05);
          }
          
          .msg-export-btn.marked {
              background: #1976d2;
              color: white;
              border-color: #1976d2;
          }
          
          .message.export-marked {
              border-left: 4px solid #4caf50;
              margin-left: -4px;
          }
          
          .message.export-marked.export-end {
              border-left-color: #ff9800;
          }
          
          .export-marker-label {
              font-size: 0.75rem;
              color: #4caf50;
              font-weight: 600;
              margin-left: 4px;
          }
          
          .message.export-marked.export-end .export-marker-label {
              color: #ff9800;
          }
          
          /* Mobile phone responsiveness */
         @media (max-width: 768px) {
             .main-container {
                 flex-direction: column;
                 max-width: 100%;
                 margin: 0;
                 padding: 10px;
                 gap: 10px;
             }
             
             .sidebar {
                 width: 100%;
                 min-width: 100%;
                 max-height: auto;
                 order: 2;
                 border-radius: 0;
             }
             
             .sidebar.collapsed {
                 width: 100%;
                 min-width: 100%;
             }
             
             .chat-area {
                 order: 1;
                 border-radius: 0;
             }
             
             .sidebar-header {
                 padding: 10px;
             }
             
             .sidebar-toggle {
                 font-size: 0.8rem;
             }
         }
         
         /* Permission Dropdown Menu */
         .permissions-dropdown {
             position: relative;
             display: inline-block;
         }
         
         .permissions-dropdown-btn {
             background: rgba(255,255,255,0.2);
             border: 1px solid rgba(255,255,255,0.3);
             color: white;
             padding: 6px 12px;
             border-radius: 4px;
             cursor: pointer;
             font-size: 0.85rem;
             margin-right: 8px;
         }
         
         .permissions-dropdown-btn:hover {
             background: rgba(255,255,255,0.3);
         }
         
         .permissions-dropdown-content {
             display: none;
             position: absolute;
             right: 0;
             top: 100%;
             background: var(--bg-primary);
             min-width: 200px;
             box-shadow: 0 4px 12px rgba(0,0,0,0.3);
             border-radius: 6px;
             z-index: 1000;
             margin-top: 4px;
         }
         
         .permissions-dropdown-content.show {
             display: block;
         }
         
         .permissions-dropdown-content button {
             width: 100%;
             padding: 12px 16px;
             text-align: left;
             background: none;
             border: none;
             color: var(--text-primary);
             cursor: pointer;
             font-size: 0.9rem;
             display: flex;
             align-items: center;
             gap: 10px;
         }
         
         .permissions-dropdown-content button:hover {
             background: var(--bg-secondary);
         }
         
         .permissions-dropdown-content button:first-child {
             border-radius: 6px 6px 0 0;
         }
         
         .permissions-dropdown-content button:last-child {
             border-radius: 0 0 6px 6px;
         }
         
         .dropdown-icon {
             font-size: 1.1rem;
         }
         
         /* Invite Modal */
         .modal-overlay {
             display: none;
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: rgba(0,0,0,0.6);
             z-index: 2000;
             justify-content: center;
             align-items: center;
         }
         
         .modal-overlay.show {
             display: flex;
         }
         
         .modal-content {
             background: var(--bg-primary);
             padding: 24px;
             border-radius: 8px;
             max-width: 450px;
             width: 90%;
             box-shadow: 0 8px 32px rgba(0,0,0,0.3);
         }
         
         .modal-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 20px;
         }
         
         .modal-header h3 {
             margin: 0;
             color: var(--text-primary);
         }
         
         .modal-close {
             background: none;
             border: none;
             font-size: 1.5rem;
             cursor: pointer;
             color: var(--text-secondary);
         }
         
         .modal-close:hover {
             color: var(--text-primary);
         }
         
         .modal-body {
             color: var(--text-primary);
         }
         
         .form-group {
             margin-bottom: 16px;
         }
         
         .form-group label {
             display: block;
             margin-bottom: 6px;
             font-weight: 500;
             color: var(--text-secondary);
         }
         
         .form-group input[type="text"] {
             width: 100%;
             padding: 10px 12px;
             border: 1px solid var(--border-color);
             border-radius: 4px;
             background: var(--bg-secondary);
             color: var(--text-primary);
             font-size: 0.95rem;
         }
         
         .form-group input[type="text"]:focus {
             outline: none;
             border-color: var(--header-bg);
         }
         
         .form-group select {
             width: 100%;
             padding: 10px 12px;
             border: 1px solid var(--border-color);
             border-radius: 4px;
             background: var(--bg-secondary);
             color: var(--text-primary);
             font-size: 0.95rem;
         }
         
         .expiry-options {
             display: flex;
             flex-wrap: wrap;
             gap: 8px;
             margin-top: 8px;
         }
         
         .expiry-options label {
             display: flex;
             align-items: center;
             gap: 4px;
             padding: 6px 10px;
             background: var(--bg-secondary);
             border-radius: 4px;
             cursor: pointer;
             font-weight: normal;
             color: var(--text-primary);
             font-size: 0.85rem;
         }
         
         .expiry-options input[type="radio"] {
             margin: 0;
         }
         
         .expiry-options input[type="radio"]:checked + span {
             color: var(--header-bg);
             font-weight: 600;
         }
         
         .permissions-checkboxes {
             display: flex;
             flex-direction: column;
             gap: 8px;
             margin-top: 8px;
         }
         
         .permissions-checkboxes label {
             display: flex;
             align-items: center;
             gap: 8px;
             padding: 8px 12px;
             background: var(--bg-secondary);
             border-radius: 4px;
             cursor: pointer;
             font-weight: normal;
             color: var(--text-primary);
             font-size: 0.9rem;
         }
         
         .permissions-checkboxes input[type="checkbox"] {
             margin: 0;
         }
         
         .permissions-checkboxes .perm-description {
             font-size: 0.8rem;
             color: var(--text-secondary);
             margin-left: auto;
         }
         
         .modal-footer {
             display: flex;
             justify-content: flex-end;
             gap: 12px;
             margin-top: 24px;
         }
         
         .modal-footer button {
             padding: 10px 20px;
             border-radius: 4px;
             border: none;
             cursor: pointer;
             font-size: 0.95rem;
         }
         
         .modal-footer .btn-secondary {
             background: var(--bg-secondary);
             color: var(--text-primary);
         }
         
         .modal-footer .btn-primary {
             background: var(--header-bg);
             color: white;
         }
         
         .jwt-output {
             margin-top: 16px;
             padding: 12px;
             background: var(--bg-secondary);
             border-radius: 4px;
             font-family: monospace;
             font-size: 0.85rem;
             word-break: break-all;
             color: var(--text-primary);
         }
         
         .jwt-output-container {
             position: relative;
         }
         
         .copy-btn {
             position: absolute;
             top: 8px;
             right: 8px;
             padding: 4px 8px;
             background: var(--header-bg);
             color: white;
             border: none;
             border-radius: 4px;
             cursor: pointer;
             font-size: 0.8rem;
         }
         
         .copy-btn:hover {
             opacity: 0.9;
         }
         
         .jwt-expiry {
             margin-top: 8px;
             font-size: 0.85rem;
             color: var(--text-secondary);
         }
         
         .jwt-token-display {
             display: none;
             margin-top: 16px;
         }
         
         .jwt-token-display.show {
             display: block;
         }
         
         .error-message {
             color: #d32f2f;
             padding: 8px 12px;
             background: #ffebee;
             border-radius: 4px;
             margin-top: 12px;
             font-size: 0.9rem;
         }
         
          body.dark-mode .error-message {
              background: #3d1f1f;
          }

          /* Emoji Reactions */
          .reaction-bar {
              display: flex;
              gap: 4px;
              margin-top: 4px;
              flex-wrap: wrap;
              justify-content: flex-end;
          }
          .reaction-badge {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              padding: 2px 8px;
              border-radius: 12px;
              background: var(--bg-secondary);
              border: 1px solid var(--border-color);
              font-size: 0.85rem;
              cursor: pointer;
              user-select: none;
              transition: all 0.15s;
          }
          .reaction-badge:hover {
              border-color: var(--header-bg);
          }
          .reaction-badge.active {
              border-color: var(--header-bg);
              background: rgba(25, 118, 210, 0.1);
          }
          .reaction-emoji { font-size: 1rem; }
          .reaction-count { font-size: 0.75rem; color: var(--text-secondary); }

          /* BUSINESS RULE: @everyone messages get orange left border and 📢 badge.
           * The badge is hardcoded in CSS via ::after — if the label needs to change
           * or be localized, it requires a CSS change. No dark-mode variant for the
           * orange color (#ff9800) — same in both themes.
           */
          .message.everyone-message {
              border-left: 3px solid #ff9800;
          }
          .message.everyone-message .msg-header::after {
              content: '📢 @everyone';
              font-size: 0.75rem;
              color: #ff9800;
              font-weight: 600;
              margin-left: 8px;
          }

          /* Reaction button in message actions */
          .msg-react-btn {
              background: none;
              border: 1px solid #ddd;
              border-radius: 4px;
              color: #666;
              font-size: 0.9rem;
              cursor: pointer;
              padding: 4px 8px;
              margin: 0;
              opacity: 1;
              transition: all 0.2s;
              flex-shrink: 0;
          }
          .msg-react-btn:hover {
              color: #1976d2;
              border-color: #1976d2;
              background: rgba(25, 118, 210, 0.05);
          }

          /* Emoji Picker */
          .emoji-picker {
              position: absolute;
              bottom: 100%;
              right: 0;
              background: var(--bg-primary);
              border: 1px solid var(--border-color);
              border-radius: 8px;
              box-shadow: 0 4px 16px rgba(0,0,0,0.2);
              padding: 10px;
              z-index: 1000;
              display: none;
              min-width: 220px;
          }
          .emoji-picker.visible {
              display: block;
          }
          .emoji-picker-quick {
              display: flex;
              gap: 4px;
              flex-wrap: wrap;
              margin-bottom: 8px;
          }
          .emoji-picker-quick button {
              font-size: 1.2rem;
              background: none;
              border: 1px solid transparent;
              border-radius: 6px;
              padding: 4px 6px;
              cursor: pointer;
              transition: all 0.15s;
          }
          .emoji-picker-quick button:hover {
              background: var(--bg-secondary);
              border-color: var(--border-color);
          }
          .emoji-picker-input {
              width: 100%;
              padding: 6px 8px;
              border: 1px solid var(--border-color);
              border-radius: 4px;
              font-size: 0.9rem;
              background: var(--bg-secondary);
              color: var(--text-primary);
          }

          /* Ntfy settings modal */
          .ntfy-status {
              margin-top: 8px;
              font-size: 0.85rem;
          }
          .ntfy-status.success { color: #16a34a; }
          .ntfy-status.error { color: #d32f2f; }
       </style>
    <!-- Link Tracking Popup System -->
    <script src="/static/link-popup.js"></script>
</head>
<body>
      <div id="auth-overlay" class="auth-overlay">
          <div class="auth-box">
              <h2>{{ MEADOWS_SYSTEM_NAME }}</h2>
              <p>Enter your JWT token to access the chat.</p>
              <input type="password" id="jwt-token" placeholder="Paste your JWT token here...">
              <button onclick="chat.authenticate()">Connect</button>
          </div>
      </div>
     
      <!-- Delete group confirmation modal -->
      <div id="delete-group-modal" class="modal-overlay hidden">
          <div class="modal-box">
              <h2>Delete Group</h2>
              <p id="modal-group-name">Are you sure you want to delete this group?</p>
              <p style="font-size: 0.9rem; color: var(--text-secondary); margin: 12px 0;">Type the group name to confirm deletion:</p>
              <input type="text" id="delete-group-confirm-input" placeholder="Group name" style="width: 100%; padding: 8px; margin: 12px 0; border: 1px solid var(--border-color); border-radius: 4px; background: var(--bg-secondary); color: var(--text-primary);">
              <div style="display: flex; gap: 10px; margin-top: 20px;">
                  <button onclick="chat.cancelDeleteGroup()" style="flex: 1; padding: 8px; background: #999; color: white; border: none; border-radius: 4px; cursor: pointer;">Cancel</button>
                  <button id="delete-group-confirm-btn" onclick="chat.confirmDeleteGroup()" style="flex: 1; padding: 8px; background: #d32f2f; color: white; border: none; border-radius: 4px; cursor: pointer; opacity: 0.5;" disabled>Delete</button>
              </div>
          </div>
      </div>
      
      <!-- Export modal -->
      <div id="export-modal" class="modal-overlay hidden">
          <div class="modal-box" style="max-width: 500px;">
              <h2>📤 Export Chat</h2>
              <p style="margin-bottom: 15px;">Export conversation to a file.</p>
              
              <div style="margin-bottom: 15px;">
                  <label style="display: block; margin-bottom: 8px; font-weight: 600;">Format:</label>
                  <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                      <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
                          <input type="radio" name="export-format" value="md" checked> Markdown (.md)
                      </label>
                      <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
                          <input type="radio" name="export-format" value="pdf"> PDF
                      </label>
                      <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
                          <input type="radio" name="export-format" value="docx"> Word (.docx)
                      </label>
                  </div>
              </div>
              
              <div style="margin-bottom: 15px;">
                  <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                      <input type="checkbox" id="export-include-bots" checked>
                      Include bot responses
                  </label>
              </div>
              
              <div id="export-range-info" style="margin-bottom: 15px; padding: 10px; background: var(--bg-secondary); border-radius: 4px; font-size: 0.9rem;">
                  <span id="export-message-count">0</span> messages selected
              </div>
              
              <div style="display: flex; gap: 10px; margin-top: 20px;">
                  <button onclick="chat.cancelExport()" style="flex: 1; padding: 10px; background: #999; color: white; border: none; border-radius: 4px; cursor: pointer;">Cancel</button>
                  <button onclick="chat.doExport()" style="flex: 1; padding: 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer;">Export</button>
              </div>
          </div>
      </div>
     
      <div class="header">
          <h1>{{ MEADOWS_SYSTEM_NAME }}</h1>
         <div class="header-info">
             <span id="user-info">Not connected</span>
             <div class="permissions-dropdown" id="permissions-dropdown" style="display: none;">
                 <button class="permissions-dropdown-btn" onclick="chat.togglePermissionsDropdown()">⚙️ Actions ▼</button>
                 <div class="permissions-dropdown-content" id="permissions-dropdown-content"></div>
             </div>
               <button class="theme-toggle" id="logout-btn" title="Log out" onclick="chat.logout()" style="font-size: 1rem;">🚪</button>
               <button class="theme-toggle" id="ntfy-btn" title="Notificatie-instellingen" onclick="chat.openNtfyModal()">🔔</button>
               <button class="theme-toggle" id="fullwidth-toggle" title="Toggle full-width layout">↔️</button>
               <button class="theme-toggle" id="form-confirm-toggle" title="Show form submission confirmations">📝</button>
               <button class="theme-toggle" id="theme-toggle" title="Toggle dark mode">☀️</button>
         </div>
      </div>
      
      <!-- User Invite Modal -->
      <div class="modal-overlay" id="user-invite-modal">
          <div class="modal-content">
              <div class="modal-header">
                  <h3>Nodig gebruiker uit</h3>
                  <button class="modal-close" onclick="chat.closeUserInviteModal()">×</button>
              </div>
              <div class="modal-body">
                  <div class="form-group">
                      <label for="invite-username">Username</label>
                      <input type="text" id="invite-username" placeholder="jan" maxlength="32">
                  </div>
                  <div class="form-group">
                      <label>Vervaltijd</label>
                      <div class="expiry-options">
                          <label><input type="radio" name="user-expiry" value="3h" checked> <span>3 uur</span></label>
                          <label><input type="radio" name="user-expiry" value="2d"> <span>2 dagen</span></label>
                          <label><input type="radio" name="user-expiry" value="1w"> <span>1 week</span></label>
                          <label><input type="radio" name="user-expiry" value="30d"> <span>30 dagen</span></label>
                          <label><input type="radio" name="user-expiry" value="3m"> <span>3 maanden</span></label>
                          <label><input type="radio" name="user-expiry" value="1y"> <span>1 jaar</span></label>
                      </div>
                  </div>
                  <div class="form-group" id="user-permissions-group" style="display: none;">
                      <label>Rollen (optioneel)</label>
                      <div class="permissions-checkboxes" id="user-permissions-checkboxes"></div>
                  </div>
                  <div class="modal-footer">
                      <button class="btn-secondary" onclick="chat.closeUserInviteModal()">Annuleer</button>
                      <button class="btn-primary" onclick="chat.requestUserJwt()">Genereer JWT</button>
                  </div>
                  <div class="error-message" id="user-invite-error" style="display: none;"></div>
                  <div class="jwt-token-display" id="user-jwt-result">
                      <label>JWT Token (kopiëren met de knop):</label>
                      <div class="jwt-output-container">
                          <div class="jwt-output" id="user-jwt-token"></div>
                          <button class="copy-btn" onclick="chat.copyJwtToken('user')">📋 Kopieer</button>
                      </div>
                      <div class="jwt-expiry" id="user-jwt-expiry"></div>
                  </div>
              </div>
          </div>
      </div>
      
      <!-- Bot Invite Modal -->
      <div class="modal-overlay" id="bot-invite-modal">
          <div class="modal-content">
              <div class="modal-header">
                  <h3>Nodig bot uit</h3>
                  <button class="modal-close" onclick="chat.closeBotInviteModal()">×</button>
              </div>
              <div class="modal-body">
                  <div class="form-group">
                      <label for="invite-botname">Bot naam</label>
                      <input type="text" id="invite-botname" placeholder="mijn-bot" maxlength="32">
                  </div>
                  <div class="form-group">
                      <label>Vervaltijd</label>
                      <div class="expiry-options">
                          <label><input type="radio" name="bot-expiry" value="1y" checked> <span>1 jaar</span></label>
                          <label><input type="radio" name="bot-expiry" value="30d"> <span>30 dagen</span></label>
                          <label><input type="radio" name="bot-expiry" value="3m"> <span>3 maanden</span></label>
                          <label><input type="radio" name="bot-expiry" value="1w"> <span>1 week</span></label>
                      </div>
                  </div>
                  <div class="form-group" id="bot-permissions-group" style="display: none;">
                      <label>Rollen (optioneel)</label>
                      <div class="permissions-checkboxes" id="bot-permissions-checkboxes"></div>
                  </div>
                  <div class="modal-footer">
                      <button class="btn-secondary" onclick="chat.closeBotInviteModal()">Annuleer</button>
                      <button class="btn-primary" onclick="chat.requestBotJwt()">Genereer JWT</button>
                  </div>
                  <div class="error-message" id="bot-invite-error" style="display: none;"></div>
                  <div class="jwt-token-display" id="bot-jwt-result">
                      <label>JWT Token (kopiëren met de knop):</label>
                      <div class="jwt-output-container">
                          <div class="jwt-output" id="bot-jwt-token"></div>
                          <button class="copy-btn" onclick="chat.copyJwtToken('bot')">📋 Kopieer</button>
                      </div>
                      <div class="jwt-expiry" id="bot-jwt-expiry"></div>
                  </div>
              </div>
          </div>
       </div>

      <!-- Ntfy Settings Modal -->
      <div class="modal-overlay" id="ntfy-modal">
          <div class="modal-content">
              <div class="modal-header">
                  <h3>Notificatie-instellingen</h3>
                  <button class="modal-close" onclick="chat.closeNtfyModal()">×</button>
              </div>
              <div class="modal-body">
                  <div class="form-group">
                      <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                          <input type="checkbox" id="ntfy-enabled">
                          <span>ntfy notificaties inschakelen</span>
                      </label>
                  </div>
                  <div class="form-group">
                      <label for="ntfy-server">Server URL</label>
                      <input type="text" id="ntfy-server" placeholder="https://ntfy.sh">
                  </div>
                  <div class="form-group">
                      <label for="ntfy-topic">Topic</label>
                      <input type="text" id="ntfy-topic" placeholder="chat-username-xxxxxx">
                  </div>
                  <div class="form-group">
                      <label for="ntfy-token">Auth Token (optioneel)</label>
                      <input type="password" id="ntfy-token" placeholder="tk_... of Basic ...">
                  </div>
                  <div class="ntfy-status" id="ntfy-status" style="display: none;"></div>
                  <div class="modal-footer">
                      <button class="btn-secondary" onclick="chat.closeNtfyModal()">Annuleer</button>
                      <button class="btn-primary" onclick="chat.saveNtfyPrefs()">Opslaan</button>
                  </div>
              </div>
          </div>
      </div>

      <!-- Emoji Picker (positioned dynamically) -->
      <div class="emoji-picker" id="emoji-picker">
          <div class="emoji-picker-quick" id="emoji-picker-quick"></div>
          <input type="text" class="emoji-picker-input" id="emoji-picker-input" placeholder="Typ een emoji..." maxlength="4">
      </div>

     <div id="update-notification">
        <span>🔄 New version available.</span>
        <button onclick="location.reload()">Reload</button>
    </div>
    
    <div class="status-bar">
        <div class="status">
            <div id="status-indicator" class="status-indicator"></div>
            <span id="connection-status">Disconnected</span>
        </div>
        <div>
            <span id="group-count" style="margin-left: auto;">(0)</span> · <span id="bot-count" style="margin-left: auto;">(0)</span>
        </div>
    </div>
    
    <div class="main-container">
         <div class="sidebar" id="sidebar">
             <div class="sidebar-header" id="sidebar-header" onclick="chat.toggleSidebar()">
                 <span class="sidebar-toggle" id="sidebar-toggle">◀</span>
             </div>
             
              <div class="panel">
                  <div class="section-header" id="bots-header" onclick="chat.toggleBots()">
                      <span class="section-toggle" id="bots-toggle">▼</span> Available Bots
                  </div>
                  <div id="bots-list" class="bots-list section-content"></div>
              </div>
             
              <div class="panel">
                  <div class="section-header" id="groups-header" onclick="chat.toggleGroups()">
                      <span class="section-toggle" id="groups-toggle">▼</span> Group Chats
                  </div>
                  <div id="groups-list" class="groups-list section-content"></div>
                  <div class="create-group">
                      <input type="text" id="new-group-input" placeholder="new-group-name">
                      <button onclick="chat.createGroup()">+</button>
                  </div>
              </div>
             
             <div class="panel">
                 <div class="section-header" id="users-header" onclick="chat.toggleUsers()">
                     <span class="section-toggle" id="users-toggle">▼</span> Users
                     <span id="user-count" style="margin-left: auto;">(0)</span>
                 </div>
                 <div id="users-list" class="users-list section-content"></div>
             </div>
         </div>
        
        <div class="chat-area">
            <div class="chat-header">
                <span id="current-group-name">Select a group</span>
                <div>
                    <button id="export-btn" class="leave-btn hidden" onclick="chat.showExportModal()" style="margin-right: 8px; background: #4caf50;">📤 Export</button>
                    <button id="leave-group-btn" class="leave-btn hidden" onclick="chat.leaveCurrentGroup()">Leave Group</button>
                </div>
            </div>
             <div id="messages" class="messages"></div>
             <div id="quoted-message-box" class="quoted-message hidden" style="margin: 15px 15px 0 15px; display: none;">
                 <div class="quoted-message-content">
                     <div class="quoted-message-author"></div>
                     <div class="quoted-message-text"></div>
                 </div>
                 <button class="quoted-message-remove" title="Remove quote" onclick="chat.clearQuotedMessage()">✕</button>
             </div>
              <div class="input-area">
                  <div id="typing-indicator" class="typing-indicator hidden">
                      <div class="typing-indicator-dots"><span></span><span></span><span></span></div>
                      <span id="typing-label"></span>
                  </div>
                  <div style="position: relative; flex: 1;">
                     <textarea id="message-input" placeholder="Type a message... (use @botname to address bots)" onkeypress="handleKeypress(event)" onkeydown="handleKeydown(event)" oninput="chat.handleAutocomplete()" rows="1"></textarea>
                     <div id="autocomplete-dropdown" class="autocomplete-container"></div>
                 </div>
                 <button onclick="chat.sendMessage()">Send</button>
             </div>
         </div>
     </div>
    
    <script>
        console.log('[WebChat] Script loaded — class definition follows…');
        class WebChat {
             constructor() {
                 console.log('[WebChat] Constructor running — if you see this, JS parsed OK');
                 this.socket = null;
                 this.currentGroup = null;
                 this.groups = {};
                 this.messages = {};
                  this.userId = null;
                  this.currentUsername = null; // REQUIREMENT: Track username for mention detection
                  this.bots = [];
                  this.cookieName = 'webchat_jwt';
                  
                  // RBAC Permissions system
                  // TECHNICAL: These are populated from the JWT payload during authentication.
                  // - permissions: Array of permission strings the current user has (e.g., ['user-invite'])
                  // - availablePermissions: Array of all permissions that exist on the server
                  // UX: Used to conditionally show/hide UI elements (dropdown menu, invite modals)
                  this.permissions = [];
                  this.availablePermissions = [];
                 
                 // Debug logging system
                this.DEBUG_LEVEL = parseInt(localStorage.getItem('DEBUG_LEVEL') || '0');
                this.previousUserId = null;
                this.socketConnectTime = null;
                
                // Message history for up/down arrow navigation
                this.sentMessages = [];
                this.messageHistoryIndex = -1;
                
                // Theme preference
                this.darkMode = localStorage.getItem('darkMode') === 'true';
                
                 // REQUIREMENT: Full-width layout preference
                 this.fullwidth = localStorage.getItem('fullwidth') === 'true';
                 
                 // REQUIREMENT: Reply/quote functionality
                 this.quotedMessage = null;
                 
                 // REQUIREMENT: Sidebar and section collapse states
                 this.sidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
                 this.botsCollapsed = localStorage.getItem('botsCollapsed') === 'true';
                 this.groupsCollapsed = localStorage.getItem('groupsCollapsed') === 'true';
                 this.usersCollapsed = localStorage.getItem('usersCollapsed') === 'true';
                 
                 // REQUIREMENT: Persist current group and restore on reload
                 this.lastGroupId = localStorage.getItem('lastGroupId') || null;
                 
                 // REQUIREMENT: Track mentions for glow effects and group highlighting
                 this.mentionedMessageIds = new Set(); // Messages that mention current user
                 this.groupsWithNewMentions = new Set(); // Groups with unread mentions
                 this.isConnected = false; // Track if we have active connection
                 
                  // REQUIREMENT: Export markers state
                  this.exportStartMarker = null; // Message ID for start marker
                  this.exportEndMarker = null; // Message ID for end marker

                  // REQUIREMENT: Typing indicators
                  this.typingHintTimer = null;
                  this.lastTypingEmit = 0;
                  
                  // REQUIREMENT: Use localStorage to persist which messages have had glow faded
                  // Load from localStorage on init
                  const seenGlowMessages = localStorage.getItem('seenGlowMessages');
                  this.seenGlowMessages = seenGlowMessages ? new Set(JSON.parse(seenGlowMessages)) : new Set();

                  // BUSINESS RULE: Emoji reactions — stored as group_id -> { targetId -> { emoji -> [usernames] } }
                  // Rebuilt from message history on every renderMessages() call (not persisted in localStorage).
                  // The constructor init is a placeholder; real data comes from reaction messages in JSONL.
                  this.reactions = {};

                  // BUSINESS RULE: ntfy notification preferences — NOT stored in localStorage.
                  // Always fetched from server on connect for cross-device consistency.
                  // Default structure omits auth_token (populated by server response).
                  this.ntfyPrefs = { enabled: false, server_url: '', topic: '' };
              }
            
            // Debug logging utility
            debug(level, component, message) {
                if (level <= this.DEBUG_LEVEL) {
                    const now = new Date();
                    const time = now.toLocaleTimeString('en-GB', {hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3});
                    const levelName = ['OFF', 'AUTH', 'VERBOSE'][level] || 'LOG';
                    const logMsg = `[${time}] [${levelName}] [${component}] ${message}`;
                    console.log(logMsg);
                }
            }
            
            setCookie(name, value, days) {
                const tokenPreview = value ? value.substring(0, 20) + '...' : 'empty';
                this.debug(1, 'Cookie', `Saving token to cookie '${name}' (${tokenPreview}), expires in ${days} days`);
                const expires = new Date();
                expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
                document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expires.toUTCString() + ';path=/';
            }
            
            getCookie(name) {
                const nameEQ = name + '=';
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
                }
                return null;
            }
            
            deleteCookie(name) {
                document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
            }
            
            loginWithAuth0() {
                window.location.href = '/login';
            }
            
             logout() {
                 window.location.href = '/logout';
             }
             
             /**
              * Toggle the permissions dropdown menu.
              * 
              * BUSINESS RULE: Dropdown is only shown if user has any permissions.
              * The dropdown items are dynamically generated based on permissions.
              * 
              * TECHNICAL: Uses event delegation to close dropdown when clicking outside.
              * The 'closeDropdownOutside' handler is bound with .bind() to maintain
              * context and properly remove the listener when closed.
              */
             togglePermissionsDropdown() {
                 const dropdown = document.getElementById('permissions-dropdown-content');
                 dropdown.classList.toggle('show');
                 
                 if (dropdown.classList.contains('show')) {
                     document.addEventListener('click', this.closeDropdownOutside.bind(this));
                 }
             }
             
             /**
              * Close dropdown when clicking outside the dropdown or button.
              * 
              * UX RULE: Clicking outside should dismiss the dropdown without
              * triggering any action. This is standard dropdown behavior.
              */
             closeDropdownOutside(event) {
                 const dropdown = document.getElementById('permissions-dropdown-content');
                 const btn = document.querySelector('.permissions-dropdown-btn');
                 if (!dropdown.contains(event.target) && !btn.contains(event.target)) {
                     dropdown.classList.remove('show');
                     document.removeEventListener('click', this.closeDropdownOutside.bind(this));
                 }
             }
             
             /**
              * Update the permissions dropdown based on user's permissions.
              * 
              * BUSINESS RULE: Only show actions that the user has permission for.
              * If user has 'user-invite', show "Nodig gebruiker uit" option.
              * If user has 'bot-invite', show "Nodig bot uit" option.
              * 
              * TECHNICAL: Permissions come from the JWT payload received during
              * authentication. The dropdown wrapper is hidden if no permissions exist.
              */
             updatePermissionsDropdown() {
                 const dropdown = document.getElementById('permissions-dropdown-content');
                 const wrapper = document.getElementById('permissions-dropdown');
                 
                 if (!this.permissions || this.permissions.length === 0) {
                     wrapper.style.display = 'none';
                     return;
                 }
                 
                 wrapper.style.display = 'inline-block';
                 
                 let html = '';
                 if (this.permissions.includes('user-invite')) {
                     html += '<button onclick="chat.openUserInviteModal()"><span class="dropdown-icon">👤</span> Nodig gebruiker uit</button>';
                 }
                 if (this.permissions.includes('bot-invite')) {
                     html += '<button onclick="chat.openBotInviteModal()"><span class="dropdown-icon">🤖</span> Nodig bot uit</button>';
                 }
                 
                 dropdown.innerHTML = html;
             }
             
             /**
              * Open the user invitation modal.
              * 
              * BUSINESS RULE: The permissions checkboxes only show permissions
              * that the current user HAS. This enforces the SUBSET RULE:
              * users can only grant permissions they themselves possess.
              * 
              * UX: Modal shows username field, expiry options, and optionally
              * permission checkboxes (if user has any permissions to grant).
              */
             openUserInviteModal() {
                 document.getElementById('permissions-dropdown-content').classList.remove('show');
                 document.getElementById('user-invite-error').style.display = 'none';
                 document.getElementById('user-jwt-result').classList.remove('show');
                 document.getElementById('invite-username').value = '';
                 
                 const permGroup = document.getElementById('user-permissions-group');
                 const permCheckboxes = document.getElementById('user-permissions-checkboxes');
                 
                 if (this.permissions && this.permissions.length > 0) {
                     permGroup.style.display = 'block';
                     let html = '';
                     // SECURITY: Only show permissions user has (subset rule enforced server-side too)
                     this.permissions.forEach(perm => {
                         html += `<label>
                             <input type="checkbox" value="${perm}" id="perm-${perm}">
                             <span>${perm}</span>
                         </label>`;
                     });
                     permCheckboxes.innerHTML = html;
                 } else {
                     permGroup.style.display = 'none';
                 }
                 
                 document.getElementById('user-invite-modal').classList.add('show');
                 document.getElementById('invite-username').focus();
             }
             
             closeUserInviteModal() {
                 document.getElementById('user-invite-modal').classList.remove('show');
             }
             
             /**
              * Open the bot invitation modal.
              * 
              * BUSINESS RULE: Same as user invite - only show permissions
              * that the current user has.
              * 
              * UX: Modal shows bot name field, expiry options (default 1 year),
              * and optionally permission checkboxes.
              */
             openBotInviteModal() {
                 document.getElementById('permissions-dropdown-content').classList.remove('show');
                 document.getElementById('bot-invite-error').style.display = 'none';
                 document.getElementById('bot-jwt-result').classList.remove('show');
                 document.getElementById('invite-botname').value = '';
                 
                 const permGroup = document.getElementById('bot-permissions-group');
                 const permCheckboxes = document.getElementById('bot-permissions-checkboxes');
                 
                 if (this.permissions && this.permissions.length > 0) {
                     permGroup.style.display = 'block';
                     let html = '';
                     this.permissions.forEach(perm => {
                         html += `<label>
                             <input type="checkbox" value="${perm}" id="bot-perm-${perm}">
                             <span>${perm}</span>
                         </label>`;
                     });
                     permCheckboxes.innerHTML = html;
                 } else {
                     permGroup.style.display = 'none';
                 }
                 
                 document.getElementById('bot-invite-modal').classList.add('show');
                 document.getElementById('invite-botname').focus();
             }
             
             closeBotInviteModal() {
                 document.getElementById('bot-invite-modal').classList.remove('show');
             }
             
             /**
              * Request a new user JWT token via Socket.IO.
              * 
              * SECURITY: Client-side validation before sending:
              * - Username required, alphanumeric + hyphen/underscore only
              * - Max 32 characters (matches server-side validation)
              * 
              * BUSINESS RULE: Permissions sent are filtered client-side to only
              * include checked boxes. Server enforces SUBSET RULE - user can
              * only grant permissions they have.
              * 
              * TECHNICAL: Emits 'request_user_jwt' event. Server responds with
              * 'user_jwt_generated' event containing the token.
              */
             requestUserJwt() {
                 const username = document.getElementById('invite-username').value.trim();
                 if (!username) {
                     this.showInviteError('user', 'Username is verplicht');
                     return;
                 }
                 
                 // SECURITY: Regex matches server-side validation
                 if (!/^[a-zA-Z0-9_-]{1,32}$/.test(username)) {
                     this.showInviteError('user', 'Ongeldige username (letters, cijfers, - en _ toegestaan, max 32 tekens)');
                     return;
                 }
                 
                 const expiry = document.querySelector('input[name="user-expiry"]:checked').value;
                 
                 // Collect selected permissions (server will filter to subset)
                 const permissions = [];
                 document.querySelectorAll('#user-permissions-checkboxes input:checked').forEach(cb => {
                     permissions.push(cb.value);
                 });
                 
                 const errorEl = document.getElementById('user-invite-error');
                 errorEl.style.display = 'none';
                 
                 this.socket.emit(MEADOWS_PROTOCOL.REQUEST_USER_JWT, {
                     username: username,
                     permissions: permissions,
                     expiry: expiry
                 });
             }
             
             /**
              * Request a new bot JWT token via Socket.IO.
              * 
              * SECURITY: Same client-side validation as user invite.
              * Bot names use same alphanumeric rules.
              * 
              * BUSINESS RULE: Bot tokens have longer default expiry (1 year)
              * since bots are long-running services.
              * 
              * TECHNICAL: Emits 'request_bot_jwt' event. Server responds with
              * 'bot_jwt_generated' event containing the token.
              */
             requestBotJwt() {
                 const botname = document.getElementById('invite-botname').value.trim();
                 if (!botname) {
                     this.showInviteError('bot', 'Bot naam is verplicht');
                     return;
                 }
                 
                 if (!/^[a-zA-Z0-9_-]{1,32}$/.test(botname)) {
                     this.showInviteError('bot', 'Ongeldige bot naam (letters, cijfers, - en _ toegestaan, max 32 tekens)');
                     return;
                 }
                 
                 const expiry = document.querySelector('input[name="bot-expiry"]:checked').value;
                 
                 const permissions = [];
                 document.querySelectorAll('#bot-permissions-checkboxes input:checked').forEach(cb => {
                     permissions.push(cb.value);
                 });
                 
                 const errorEl = document.getElementById('bot-invite-error');
                 errorEl.style.display = 'none';
                 
                 this.socket.emit(MEADOWS_PROTOCOL.REQUEST_BOT_JWT, {
                     bot_name: botname,
                     permissions: permissions,
                     expiry: expiry
                 });
             }
             
             /**
              * Display an error message in the invite modal.
              * 
              * UX RULE: Errors are shown inline in the modal, not as alerts.
              * This keeps context and allows user to correct and retry.
              */
             showInviteError(type, message) {
                 const errorEl = document.getElementById(`${type}-invite-error`);
                 errorEl.textContent = message;
                 errorEl.style.display = 'block';
             }
             
             /**
              * Display the generated JWT token in the modal.
              * 
              * UX: Shows token in monospace font with copy button.
              * Expiry information is displayed below the token.
              * 
              * TECHNICAL: Data comes from server's JWT generation response.
              * Token is displayed but NOT stored - user must copy it.
              */
             showJwtResult(type, data) {
                 const resultEl = document.getElementById(`${type}-jwt-result`);
                 const tokenEl = document.getElementById(`${type}-jwt-token`);
                 const expiryEl = document.getElementById(`${type}-jwt-expiry`);
                 
                 tokenEl.textContent = data.token;
                 expiryEl.textContent = `Expires: ${data.expires_at} (${data.expires_in})`;
                 
                 resultEl.classList.add('show');
             }
             
             /**
              * Copy JWT token to clipboard.
              * 
              * UX: Provides immediate feedback ("✓ Gekopieerd!") for 2 seconds.
              * Uses the Clipboard API for modern browser support.
              * 
              * PRIVACY: Token is shown but never stored by the application.
              * User is responsible for securely distributing the token.
              */
             copyJwtToken(type) {
                 const tokenEl = document.getElementById(`${type}-jwt-token`);
                 navigator.clipboard.writeText(tokenEl.textContent).then(() => {
                     const btn = document.querySelector(`#${type}-jwt-result .copy-btn`);
                     const originalText = btn.textContent;
                     btn.textContent = '✓ Gekopieerd!';
                     setTimeout(() => {
                         btn.textContent = originalText;
                     }, 2000);
                 });
             }
             
             async checkAuthStatus() {
                 try {
                     const response = await fetch('/status');
                     const data = await response.json();
                     if (data.logged_in) {
                         this.debug(1, 'Auth', 'User logged in via Auth0, redirecting to login...');
                         window.location.href = '/login';
                         return;
                     }
                 } catch (e) {
                     this.debug(1, 'Auth', 'Auth status check failed: ' + e);
                 }
                 // Show auth overlay for manual JWT entry
                 this.debug(1, 'Auth', 'Showing auth overlay');
                 document.getElementById('auth-overlay').classList.remove('hidden');
             }
             
              connect() {
                 const SIO_URL = '{{ MEADOWS_SERVER_URL }}';
                 const SYSTEM_NAME = '{{ MEADOWS_SYSTEM_NAME }}';
                 this.debug(1, 'Socket', `Initiating connection to ${SIO_URL}/chat`);
                
                this.socket = io(SIO_URL + '/chat', {
                    transports: ['websocket']
                });
                
                this.socket.on('connect', () => {
                    this.socketConnectTime = new Date();
                    this.debug(1, 'Socket', `Connected to server`);
                    console.log('[WebChat] Socket.IO connected → awaiting authentication…');
                    this.updateStatus('connected', 'Connected');
                    const token = this.getCookie(this.cookieName);
                    if (token) {
                        const tokenPreview = token.substring(0, 20) + '...';
                        this.debug(1, 'Auth', `Found JWT token in cookie (${tokenPreview}), auto-authenticating...`);
                        document.getElementById('jwt-token').value = token;
                        this.authenticate();
                    } else {
                        this.debug(1, 'Auth', 'No JWT token in cookie, checking auth status...');
                        this.checkAuthStatus().then(() => {
                            this.debug(1, 'Auth', 'Showing auth overlay');
                            document.getElementById('auth-overlay').classList.remove('hidden');
                        });
                    }
                });
                
                 this.socket.on('disconnect', () => {
                     this.debug(1, 'Socket', 'Disconnected from server');
                     this.updateStatus('error', 'Disconnected');
                     this.isConnected = false;
                 });
                
                 this.socket.on(MEADOWS_PROTOCOL.AUTHENTICATED, (data) => {
                       const newUserId = data.user_id;
                       const userIdChanged = this.previousUserId !== null && this.previousUserId !== newUserId;
                       if (userIdChanged) {
                           this.debug(1, 'Auth', `⚠️  USER SWITCHED: '${this.previousUserId}' → '${newUserId}' on same socket`);
                       } else {
                           this.debug(1, 'Auth', `Authenticated successfully as '${newUserId}'`);
                       }
                       this.previousUserId = this.userId;
                       this.userId = newUserId;
                       // REQUIREMENT: Extract username from JWT for mention detection
                       this.currentUsername = data.username || newUserId.split('@')[0];
                       this.bots = data.bots || [];
                       
                       // RBAC: Store permissions from JWT for UI decisions
                       // BUSINESS RULE: Permissions control which actions are available in the UI.
                       // The server sends both 'permissions' (what user has) and 
                       // 'available_permissions' (what permissions exist on the server).
                       this.permissions = data.permissions || [];
                       this.availablePermissions = data.available_permissions || [];
                       this.updatePermissionsDropdown();
                       
                       // REQUIREMENT: Mark connection as active (for mention detection to work on new messages)
                       this.isConnected = true;
                        this.groupsWithNewMentions.clear(); // Clear old mentions on reconnect
                         
                        document.getElementById('auth-overlay').classList.add('hidden');
                        const displayName = data.username || newUserId;
                        document.getElementById('user-info').textContent = displayName;
                       
                       this.updateStatus('connected', 'Authenticated');
                       this.renderBots();
                       
                       // REQUIREMENT: Check if client code is outdated (server has newer code)
                       if (data.client_hash) {
                           const embeddedHash = document.querySelector('meta[name="meadows-hash"]')?.content;
                           if (embeddedHash && embeddedHash !== data.client_hash) {
                               this.showUpdateNotification();
                           }
                       }
                       
                         this.socket.emit(MEADOWS_PROTOCOL.LIST_GROUPS, {});
                         // Load ntfy prefs from server on every (re)authentication.
                         // Called after list_groups — both load in parallel, no dependency.
                         // If user has never set prefs, server returns defaults and modal
                         // will show auto-generated topic suggestion.
                         this.loadNtfyPrefs();
                        console.log('[WebChat] ✓ Fully initialised — user:', this.currentUsername, '| groups:', Object.keys(this.groups).length);
                    });
                 
                 this.socket.on(MEADOWS_PROTOCOL.AUTH_ERROR, (data) => {
                      this.updateStatus('error', 'Auth error: ' + data.error);
                      this.deleteCookie(this.cookieName);
                      alert('Authentication failed: ' + data.error);
                  });
                  
                  /**
                   * Handle server response for user JWT generation.
                   * 
                   * SERVER RESPONSE: {
                   *   token: string,       // The generated JWT
                   *   expires_at: string,  // ISO timestamp
                   *   expires_in: string,   // Human-readable (e.g., "30d")
                   *   username: string,    // The username the token is for
                   *   permissions: array   // Permissions granted
                   * }
                   * 
                   * UX: Displays token in modal with copy functionality.
                   */
                  this.socket.on(MEADOWS_PROTOCOL.USER_JWT_GENERATED, (data) => {
                      this.showJwtResult('user', data);
                  });
                  
                  /**
                   * Handle server response for bot JWT generation.
                   * 
                   * SERVER RESPONSE: Same as user_jwt_generated but with
                   * 'bot_name' instead of 'username'.
                   */
                  this.socket.on(MEADOWS_PROTOCOL.BOT_JWT_GENERATED, (data) => {
                      this.showJwtResult('bot', data);
                  });
                  
                  /**
                   * Handle permission update from server.
                   * 
                   * BUSINESS RULE: This allows the server to push permission
                   * changes to the client. Currently used as fallback if the
                   * permissions weren't included in the auth response.
                   * 
                   * Can be triggered by client via 'get_my_permissions' event.
                   */
                  this.socket.on(MEADOWS_PROTOCOL.MY_PERMISSIONS, (data) => {
                      this.permissions = data.permissions || [];
                      this.availablePermissions = data.available_permissions || [];
                      this.updatePermissionsDropdown();
                  });
                  
                    this.socket.on(MEADOWS_PROTOCOL.GROUP_LIST, (data) => {
                      this.groups = {};
                      data.groups.forEach(g => {
                          this.groups[g.id] = g;
                      });
                      this.renderGroups();
                      document.getElementById('group-count').textContent = '(' + data.groups.length + ')';
                     
                     // Apply UI preferences
                     this.applyUIPreferences();
                     
                     // REQUIREMENT: Auto-rejoin last group if it still exists
                     if (this.lastGroupId && this.groups[this.lastGroupId]) {
                         this.debug(2, 'Session', `Auto-rejoining last group: ${this.lastGroupId}`);
                         this.joinGroup(this.lastGroupId);
                     }
                 });
                
                 this.socket.on(MEADOWS_PROTOCOL.GROUP_CREATED, (group) => {
                     this.groups[group.id] = group;
                     this.renderGroups();
                     const groupCountEl = document.getElementById('group-count');
                     if (groupCountEl) groupCountEl.textContent = '(' + Object.keys(this.groups).length + ')';
                 });
                
                this.socket.on(MEADOWS_PROTOCOL.JOIN_GROUP, (data) => {
                    this.socket.emit(MEADOWS_PROTOCOL.JOIN_GROUP, { group_id: data.group_id });
                });
                
                  this.socket.on(MEADOWS_PROTOCOL.JOINED_GROUP, (data) => {
                      this.currentGroup = data.group_id;
                      this.messages[data.group_id] = data.thread || [];
                      
                      // Ensure group object exists with members
                      if (!this.groups[data.group_id]) {
                          this.groups[data.group_id] = {};
                      }
                      
                      // Store members list from joined_group event
                      if (data.members) {
                          this.groups[data.group_id].members = data.members;
                          this.debug(2, 'Group', `Joined group '${data.group_id}' with ${data.members.length} members: ${data.members.join(', ')}`);
                      }
                      
                       // REQUIREMENT: Persist current group for auto-rejoin on reload
                       localStorage.setItem('lastGroupId', data.group_id);
                       
                       document.getElementById('current-group-name').textContent = data.group_id;
                       document.getElementById('leave-group-btn').classList.remove('hidden');
                       document.getElementById('export-btn').classList.remove('hidden');
                       
                       this.renderGroups();
                       this.renderMessages();
                       this.renderUsers();
                   });
                 
                   this.socket.on(MEADOWS_PROTOCOL.LEFT_GROUP, (data) => {
                       if (this.currentGroup === data.group_id) {
                           this.currentGroup = null;
                           localStorage.removeItem('lastGroupId');
                           document.getElementById('current-group-name').textContent = 'Select a group';
                           document.getElementById('leave-group-btn').classList.add('hidden');
                           document.getElementById('export-btn').classList.add('hidden');
                           const messagesDiv = document.getElementById('messages');
                           if (messagesDiv) messagesDiv.innerHTML = '';
                           this.renderUsers();
                       }
                   });
                  
                   this.socket.on(MEADOWS_PROTOCOL.GROUP_DELETED, (data) => {
                       // Group was deleted - remove it from local state
                       delete this.groups[data.group_id];
                       delete this.messages[data.group_id];
                       
                       if (this.currentGroup === data.group_id) {
                           this.currentGroup = null;
                           document.getElementById('current-group-name').textContent = 'Select a group';
                           document.getElementById('leave-group-btn').classList.add('hidden');
                           document.getElementById('export-btn').classList.add('hidden');
                           const messagesDiv = document.getElementById('messages');
                           if (messagesDiv) messagesDiv.innerHTML = '';
                       }
                      
                      this.renderGroups();
                      const groupCountEl = document.getElementById('group-count');
                      if (groupCountEl) groupCountEl.textContent = '(' + Object.keys(this.groups).length + ')';
                      this.debug(2, 'Group', `Group ${data.group_id} was deleted`);
                  });
                 
                  this.socket.on(MEADOWS_PROTOCOL.MESSAGE, (message) => {
                     if (!this.messages[message.group_id]) {
                         this.messages[message.group_id] = [];
                     }
                     this.messages[message.group_id].push(message);
                     
                     // REQUIREMENT: Check if message mentions current user (reply + @mention)
                     this.handleNewMessageMention(message);
                     
                     if (message.group_id === this.currentGroup) {
                         this.renderMessages();
                     }
                 });
                
                  this.socket.on(MEADOWS_PROTOCOL.USER_JOINED, (data) => {
                      if (data.group_id === this.currentGroup) {
                          // Update user list when someone joins current group
                          this.renderUsers();
                      }
                      if (this.groups[data.group_id]) {
                          this.groups[data.group_id].member_count++;
                          this.renderGroups();
                      }
                  });
                  
                    this.socket.on(MEADOWS_PROTOCOL.USER_LEFT, (data) => {
                        if (data.group_id === this.currentGroup) {
                            this.renderUsers();
                        }
                        if (this.groups[data.group_id]) {
                            this.groups[data.group_id].member_count = Math.max(0, (this.groups[data.group_id].member_count || 1) - 1);
                            this.renderGroups();
                        }
                        // Immediately hide typing indicator for departing user
                        const indicator = document.getElementById('typing-indicator');
                        const label = document.getElementById('typing-label');
                        if (indicator && label && data.group_id === this.currentGroup) {
                            indicator.classList.add('hidden');
                        }
                    });

                   this.socket.on(MEADOWS_PROTOCOL.USER_TYPING, (data) => {
                       const indicator = document.getElementById('typing-indicator');
                       const label = document.getElementById('typing-label');
                       if (!indicator || !label) return;
                       if (data.group_id !== this.currentGroup) return;

                       label.textContent = `${data.username} is typing…`;
                       indicator.classList.remove('hidden');

                       if (this.typingHintTimer) clearTimeout(this.typingHintTimer);
                       this.typingHintTimer = setTimeout(() => {
                           indicator.classList.add('hidden');
                       }, 3000);
                   });

                  this.socket.on(MEADOWS_PROTOCOL.MEMBERS_UPDATED, (data) => {
                      // Update the members list for the group
                      if (this.groups[data.group_id]) {
                          this.groups[data.group_id].members = data.members;
                          this.debug(2, 'Group', `Members updated for '${data.group_id}': ${data.members.join(', ')}`);
                          
                          // Re-render user list if we're viewing this group
                          if (data.group_id === this.currentGroup) {
                              this.renderUsers();
                          }
                      }
                  });
                 
                 this.socket.on(MEADOWS_PROTOCOL.BOT_LIST, (data) => {
                    this.bots = data.bots;
                    this.renderBots();
                });
                
                this.socket.on(MEADOWS_PROTOCOL.BOT_NOT_FOUND, (data) => {
                    if (this.currentGroup) {
                        this.addSystemMessage(this.currentGroup, 
                            `Bot "${data.bot_name}" not found. ${data.message}`, 'warning');
                    }
                });
                
                this.socket.on(MEADOWS_PROTOCOL.ERROR, (data) => {
                    console.error('Socket error:', data);
                });

                this.socket.on(MEADOWS_PROTOCOL.FORM_SUBMISSION, (data) => {
                    const showConfirmation = localStorage.getItem('showFormConfirmations') === 'true';
                    if (!showConfirmation) return;
                    if (!this.messages[data.group_id]) {
                        this.messages[data.group_id] = [];
                    }
                    this.messages[data.group_id].push(data);
                    if (data.group_id === this.currentGroup) {
                        this.renderMessages();
                    }
                });

                // Ntfy prefs
                this.socket.on(MEADOWS_PROTOCOL.NTFY_PREFS, (data) => {
                    this.ntfyPrefs = data;
                });

                this.socket.on(MEADOWS_PROTOCOL.NTFY_PREFS_SAVED, (data) => {
                    const statusEl = document.getElementById('ntfy-status');
                    statusEl.textContent = 'Instellingen opgeslagen!';
                    statusEl.className = 'ntfy-status success';
                    statusEl.style.display = 'block';
                });

                // BUSINESS RULE: Emoji reactions — server-authoritative, no optimistic updates.
                // The client waits for server broadcast before updating UI.
                // Three events: reaction_added (new), reaction_toggled (add↔remove cycle),
                // reaction_removed_event (explicit removal).
                // reaction_toggled is the authoritative event for toggle state — handles
                // both add and remove. reaction_removed_event is for explicit removal.
                this.socket.on(MEADOWS_PROTOCOL.REACTION_ADDED, (data) => {
                    if (!this.reactions[data.group_id]) this.reactions[data.group_id] = {};
                    const targetId = data.target_message_id;
                    if (!this.reactions[data.group_id][targetId]) this.reactions[data.group_id][targetId] = {};
                    if (!this.reactions[data.group_id][targetId][data.emoji]) this.reactions[data.group_id][targetId][data.emoji] = [];
                    if (!data.removed && !this.reactions[data.group_id][targetId][data.emoji].includes(data.username)) {
                        this.reactions[data.group_id][targetId][data.emoji].push(data.username);
                    }
                    if (data.group_id === this.currentGroup) {
                        this.updateReactionBadge(targetId, data.emoji);
                    }
                });

                this.socket.on(MEADOWS_PROTOCOL.REACTION_TOGGLED, (data) => {
                    if (!this.reactions[data.group_id]) this.reactions[data.group_id] = {};
                    const targetId = data.target_message_id;
                    if (!this.reactions[data.group_id][targetId]) this.reactions[data.group_id][targetId] = {};
                    if (!this.reactions[data.group_id][targetId][data.emoji]) this.reactions[data.group_id][targetId][data.emoji] = [];
                    if (data.removed) {
                        this.reactions[data.group_id][targetId][data.emoji] = this.reactions[data.group_id][targetId][data.emoji].filter(u => u !== data.username);
                        if (this.reactions[data.group_id][targetId][data.emoji].length === 0) {
                            delete this.reactions[data.group_id][targetId][data.emoji];
                        }
                    } else if (!this.reactions[data.group_id][targetId][data.emoji].includes(data.username)) {
                        this.reactions[data.group_id][targetId][data.emoji].push(data.username);
                    }
                    if (data.group_id === this.currentGroup) {
                        this.updateReactionBadge(targetId, data.emoji);
                    }
                });

                this.socket.on(MEADOWS_PROTOCOL.REACTION_TOGGLED, (data) => {
                    if (!this.reactions[data.group_id]) this.reactions[data.group_id] = {};
                    const targetId = data.target_message_id;
                    if (!this.reactions[data.group_id][targetId]) this.reactions[data.group_id][targetId] = {};
                    if (!this.reactions[data.group_id][targetId][data.emoji]) this.reactions[data.group_id][targetId][data.emoji] = [];
                    if (data.removed) {
                        this.reactions[data.group_id][targetId][data.emoji] = this.reactions[data.group_id][targetId][data.emoji].filter(u => u !== data.username);
                        if (this.reactions[data.group_id][targetId][data.emoji].length === 0) {
                            delete this.reactions[data.group_id][targetId][data.emoji];
                        }
                    } else if (!this.reactions[data.group_id][targetId][data.emoji].includes(data.username)) {
                        this.reactions[data.group_id][targetId][data.emoji].push(data.username);
                    }
                    if (data.group_id === this.currentGroup) {
                        this.updateReactionBadge(targetId, data.emoji);
                    }
                });

                this.socket.on(MEADOWS_PROTOCOL.REACTION_REMOVED, (data) => {
                    if (this.reactions[data.group_id] && this.reactions[data.group_id][data.target_message_id]) {
                        const emojiMap = this.reactions[data.group_id][data.target_message_id];
                        if (emojiMap[data.emoji]) {
                            emojiMap[data.emoji] = emojiMap[data.emoji].filter(u => u !== this.currentUsername);
                            if (emojiMap[data.emoji].length === 0) {
                                delete emojiMap[data.emoji];
                            }
                        }
                    }
                    if (data.group_id === this.currentGroup) {
                        this.renderMessages();
                    }
                });

                this.setupFormInterception();
            }

            setupFormInterception() {
                const container = document.getElementById('messages');
                if (!container) return;

                container.addEventListener('submit', (event) => {
                    const form = event.target.closest('form');
                    if (!form) return;

                    const messageDiv = form.closest('.message');
                    if (!messageDiv) return;

                    event.preventDefault();

                    const formData = new FormData(form);
                    const data = Object.fromEntries(formData);
                    const messageId = messageDiv.dataset.messageId;
                    const formContainer = form.closest('.embedded-form');
                    const formId = formContainer ? formContainer.dataset.formId : form.id || 'unknown';

                    // BUSINESS RULE (MEADOWS-forms-intent §2.8): read answer_label
                    // from the original message's metadata and place it as a label
                    // on the submission. Response data goes in metadata.
                    const originalMsg = this._findMessageById(messageId);
                    let answerLabel = null;
                    if (originalMsg && originalMsg.metadata && originalMsg.metadata.meadows
                        && originalMsg.metadata.meadows.form_handling
                        && originalMsg.metadata.meadows.form_handling.answer_label) {
                        answerLabel = originalMsg.metadata.meadows.form_handling.answer_label;
                    }

                    // Build the submission event data
                    const submissionData = {
                        form_data: data,
                        form_id: formId,
                        reply_to: messageId,
                        sender: this.userId,
                        source: 'form_submission',
                    };

                    // Include answer_label if available from metadata
                    if (answerLabel) {
                        submissionData.answer_label = answerLabel;
                    }

                    this.socket.emit(MEADOWS_PROTOCOL.FORM_SUBMISSION, submissionData);

                    const summaryParts = Object.entries(data).map(([k, v]) => `${k} = "${v}"`).join(', ');
                    const summaryDiv = document.createElement('div');
                    summaryDiv.className = 'form-submitted-summary';
                    summaryDiv.innerHTML = `<span class="form-submitted-check">✓</span> Submitted: ${this.escapeHtml(summaryParts)}`;
                    form.parentNode.replaceChild(summaryDiv, form);
                }, true);

                container.addEventListener('click', (event) => {
                    const actionBtn = event.target.closest('[data-action]');
                    if (!actionBtn) return;

                    const action = actionBtn.getAttribute('data-action');
                    if (!action) return;

                    event.preventDefault();
                    event.stopPropagation();

                    const textarea = document.getElementById('message-input');
                    if (textarea) {
                        textarea.value = action;
                        textarea.dispatchEvent(new Event('input', { bubbles: true }));
                        textarea.focus();
                    }
                });
            }
            
            authenticate() {
                const token = document.getElementById('jwt-token').value.trim();
                if (token) {
                    const tokenPreview = token.substring(0, 20) + '...';
                    this.debug(1, 'Auth', `Authenticating with token (${tokenPreview}), current user: '${this.userId || 'none'}'`);
                    this.setCookie(this.cookieName, token, 7);
                    this.debug(1, 'Auth', `Emitting authenticate event to server`);
                    this.socket.emit(MEADOWS_PROTOCOL.AUTHENTICATE, { token });
                } else {
                    this.debug(1, 'Auth', 'ERROR: Token field is empty, cannot authenticate');
                }
            }
            
            createGroup() {
                const input = document.getElementById('new-group-input');
                const name = input.value.trim();
                if (name) {
                    // SECURITY: Validate group_id to prevent path traversal (CWE-22)
                    // Only allow alphanumeric, hyphens, and underscores
                    const groupId = name.toLowerCase().replace(/\s+/g, '-');
                    if (!/^[a-z0-9_-]+$/.test(groupId)) {
                        alert('Group names can only contain letters, numbers, hyphens, and underscores');
                        return;
                    }
                    if (groupId.length > 32) {
                        alert('Group name must be 32 characters or less');
                        return;
                    }
                    
                    this.socket.emit(MEADOWS_PROTOCOL.CREATE_GROUP, {
                        group_id: groupId,
                        name: name,
                        description: ''
                    });
                    input.value = '';
                }
            }
            
             joinGroup(groupId) {
                 this.debug(2, 'Group', `Joining group '${groupId}' as user '${this.userId}'`);
                 // REQUIREMENT: Clear mention highlight when user opens the group
                 this.groupsWithNewMentions.delete(groupId);
                 this.socket.emit(MEADOWS_PROTOCOL.JOIN_GROUP, { group_id: groupId });
             }
            
            leaveCurrentGroup() {
                if (this.currentGroup) {
                    this.debug(2, 'Group', `Leaving current group '${this.currentGroup}' (user '${this.userId}')`);
                    this.socket.emit(MEADOWS_PROTOCOL.LEAVE_GROUP, { group_id: this.currentGroup });
                }
            }
            
             leaveGroup(groupId) {
                 this.debug(2, 'Group', `Leaving group '${groupId}' as user '${this.userId}'`);
                 this.socket.emit(MEADOWS_PROTOCOL.LEAVE_GROUP, { group_id: groupId });
             }
             
             /*
             ========================================================================
             GROUP DELETION WITH CONFIRMATION MODAL
             ========================================================================
             REQUIREMENT: Delete groups with type-to-confirm security
             IMPLEMENTATION:
             - showDeleteGroupModal(groupId): Show confirmation dialog
             - confirmDeleteGroup(): Verify name matches before deletion
             - cancelDeleteGroup(): Close modal without deleting
             - Emits 'delete_group' event to server
             ========================================================================
             */
             
             showDeleteGroupModal(groupId) {
                 this.deleteGroupId = groupId;
                 const modal = document.getElementById('delete-group-modal');
                 const input = document.getElementById('delete-group-confirm-input');
                 const btn = document.getElementById('delete-group-confirm-btn');
                 const nameEl = document.getElementById('modal-group-name');
                 
                 const groupName = this.groups[groupId] ? this.groups[groupId].name || groupId : groupId;
                 nameEl.textContent = `Are you sure you want to delete the group "${groupName}"?`;
                 
                 input.value = '';
                 input.placeholder = `Type "${groupName}" to confirm`;
                 input.focus();
                 
                 btn.disabled = true;
                 btn.style.opacity = '0.5';
                 
                 // Re-enable button only when input matches group name exactly
                 input.addEventListener('input', () => {
                     const matches = input.value === groupName;
                     btn.disabled = !matches;
                     btn.style.opacity = matches ? '1' : '0.5';
                 });
                 
                 modal.classList.remove('hidden');
                 modal.style.display = 'flex';
             }
             
             cancelDeleteGroup() {
                 const modal = document.getElementById('delete-group-modal');
                 modal.classList.add('hidden');
                 modal.style.display = 'none';
                 this.deleteGroupId = null;
             }
             
              confirmDeleteGroup() {
                  if (!this.deleteGroupId) return;
                  
                  const groupName = this.groups[this.deleteGroupId] ? this.groups[this.deleteGroupId].name || this.deleteGroupId : this.deleteGroupId;
                  const input = document.getElementById('delete-group-confirm-input');
                  
                  if (input.value === groupName) {
                      this.debug(2, 'Group', `Deleting group '${this.deleteGroupId}'`);
                      this.socket.emit(MEADOWS_PROTOCOL.DELETE_GROUP, { group_id: this.deleteGroupId });
                      this.cancelDeleteGroup();
                  }
              }
              
              /*
              ========================================================================
              EXPORT FUNCTIONALITY
              ========================================================================
              REQUIREMENT: Export messages with markers and format selection
              IMPLEMENTATION:
              - toggleExportMarker(messageId): Toggle start/end markers
              - showExportModal(): Open export configuration dialog
              - doExport(): Send export command to @export bot
              - cancelExport(): Close modal without exporting
              ========================================================================
              */
              
              toggleExportMarker(messageId) {
                  const msgs = this.messages[this.currentGroup] || [];
                  const msgIndex = msgs.findIndex(m => m.id === messageId);
                  
                  if (this.exportStartMarker === null && this.exportEndMarker === null) {
                      // No markers set - set as start
                      this.exportStartMarker = messageId;
                      this.debug(2, 'Export', `Set start marker: ${messageId}`);
                  } else if (this.exportStartMarker !== null && this.exportEndMarker === null) {
                      // Only start marker set
                      const startIndex = msgs.findIndex(m => m.id === this.exportStartMarker);
                      
                      if (msgIndex < startIndex) {
                          // New marker is before start - swap
                          this.exportEndMarker = this.exportStartMarker;
                          this.exportStartMarker = messageId;
                      } else if (msgIndex === startIndex) {
                          // Same as start - clear
                          this.exportStartMarker = null;
                      } else {
                          // After start - set as end
                          this.exportEndMarker = messageId;
                      }
                      this.debug(2, 'Export', `Set end marker: ${this.exportEndMarker}`);
                  } else {
                      // Both markers set - clear and start fresh
                      this.exportStartMarker = messageId;
                      this.exportEndMarker = null;
                      this.debug(2, 'Export', `Reset markers, new start: ${messageId}`);
                  }
                  
                  this.renderMessages();
                  this.updateExportMessageCount();
              }
              
              clearExportMarkers() {
                  this.exportStartMarker = null;
                  this.exportEndMarker = null;
                  this.renderMessages();
              }
              
              showExportModal() {
                  const modal = document.getElementById('export-modal');
                  this.updateExportMessageCount();
                  modal.classList.remove('hidden');
                  modal.style.display = 'flex';
              }
              
              cancelExport() {
                  const modal = document.getElementById('export-modal');
                  modal.classList.add('hidden');
                  modal.style.display = 'none';
              }
              
              updateExportMessageCount() {
                  const msgs = this.messages[this.currentGroup] || [];
                  let count = msgs.length;
                  
                  if (this.exportStartMarker !== null) {
                      const startIndex = msgs.findIndex(m => m.id === this.exportStartMarker);
                      const endIndex = this.exportEndMarker ? msgs.findIndex(m => m.id === this.exportEndMarker) : msgs.length - 1;
                      
                      if (startIndex !== -1 && endIndex !== -1) {
                          count = Math.abs(endIndex - startIndex) + 1;
                      }
                  }
                  
                  document.getElementById('export-message-count').textContent = count;
              }
              
              doExport() {
                  const format = document.querySelector('input[name="export-format"]:checked').value;
                  const includeBots = document.getElementById('export-include-bots').checked;
                  
                  let command = `@export ${format}`;
                  
                  if (!includeBots) {
                      command += ' --no-bots';
                  }
                  
                  if (this.exportStartMarker && this.exportEndMarker) {
                      command += ` from ${this.exportStartMarker} to ${this.exportEndMarker}`;
                  } else if (this.exportStartMarker) {
                      command += ` from ${this.exportStartMarker}`;
                  }
                  
                  this.debug(2, 'Export', `Sending export command: ${command}`);
                  
                  // Send to export bot
                  this.socket.emit(MEADOWS_PROTOCOL.MESSAGE, {
                      group_id: this.currentGroup,
                      content: command
                  });
                  
                  this.cancelExport();
                  this.clearExportMarkers();
              }
              
                sendMessage() {
                  const input = document.getElementById('message-input');
                  const content = input.value.trim();

                  if (content && this.currentGroup) {
                      this.debug(2, 'Message', `Sending message in group '${this.currentGroup}' as user '${this.userId}'`);

                      // Build message payload
                      const messagePayload = {
                          group_id: this.currentGroup,
                          content: content
                      };

                       // If replying to a message, include the quoted message in payload for bot context
                       if (this.quotedMessage) {
                           messagePayload.quoted_message = {
                               id: this.quotedMessage.id,
                               author: this.quotedMessage.bot_name || this.quotedMessage.username || this.quotedMessage.user_id,
                               content: this.quotedMessage.content,
                               timestamp: this.quotedMessage.timestamp,
                               bot_name: this.quotedMessage.bot_name  // Include bot_name so server can route to bot
                           };
                       }

                      this.socket.emit(MEADOWS_PROTOCOL.MESSAGE, messagePayload);
                      this.stopTyping();

                      // Track sent message in history (newest at end)
                      this.sentMessages.push(content);
                      this.messageHistoryIndex = -1; // Reset position

                      input.value = '';
                      this.clearQuotedMessage();
                  } else {
                      if (!content) this.debug(2, 'Message', 'Message content is empty');
                      if (!this.currentGroup) this.debug(2, 'Message', 'No current group selected');
                  }
              }

              startTyping() {
                  if (!this.currentGroup || !this.socket) return;
                  const now = Date.now();
                  if (this.lastTypingEmit && now - this.lastTypingEmit < 2000) return;
                  this.lastTypingEmit = now;
                  this.socket.emit(MEADOWS_PROTOCOL.TYPING, {group_id: this.currentGroup});
              }

              stopTyping() {
                  if (!this.currentGroup || !this.socket) return;
                  const indicator = document.getElementById('typing-indicator');
                  if (indicator) indicator.classList.add('hidden');
                  if (this.typingHintTimer) clearTimeout(this.typingHintTimer);
              }

              scheduleTypingUpdate(content) {
                  if (!content || !this.currentGroup) {
                      this.stopTyping();
                      return;
                  }
                  this.startTyping();
                  if (this.typingHintTimer) clearTimeout(this.typingHintTimer);
                  this.typingHintTimer = setTimeout(() => {
                      this.stopTyping();
                  }, 3000);
              }
            
            navigateMessageHistory(direction) {
                const input = document.getElementById('message-input');
                
                if (this.sentMessages.length === 0) return;
                
                // direction = 1 for up (earlier), -1 for down (newer)
                if (direction === 1) {
                    // Going up in history
                    if (this.messageHistoryIndex < this.sentMessages.length - 1) {
                        this.messageHistoryIndex++;
                        input.value = this.sentMessages[this.sentMessages.length - 1 - this.messageHistoryIndex];
                    }
                } else if (direction === -1) {
                    // Going down in history (towards newer messages)
                    if (this.messageHistoryIndex > 0) {
                        this.messageHistoryIndex--;
                        input.value = this.sentMessages[this.sentMessages.length - 1 - this.messageHistoryIndex];
                    } else if (this.messageHistoryIndex === 0) {
                        this.messageHistoryIndex = -1;
                        input.value = '';
                    }
                }
                resizeMessageInput();
            }
            
            /**
             * REQUIREMENT: @ Autocomplete for bots and usernames
             * 
             * Triggered on every input change (oninput event)
             * Searches for @ symbol and shows matching bots/users
             * Only shows dropdown if @ is followed by text without spaces
             * 
             * Flow:
             * 1. Find last @ in text before cursor
             * 2. Get search text after @ (up to cursor)
             * 3. Hide if space found after @ (text completion in progress)
             * 4. Get matches via getAutocompleteMatches()
             * 5. Show dropdown if matches found, otherwise hide
             */
            handleAutocomplete() {
                const input = document.getElementById('message-input');
                this.scheduleTypingUpdate(input.value);
                const cursorPos = input.selectionStart;
                const textBeforeCursor = input.value.substring(0, cursorPos);
                
                // Find the last @ symbol
                const lastAtIndex = textBeforeCursor.lastIndexOf('@');
                
                if (lastAtIndex === -1) {
                    // No @ found, hide autocomplete
                    this.hideAutocomplete();
                    resizeMessageInput();
                    return;
                }
                
                // Get the text after the @ symbol
                const searchText = textBeforeCursor.substring(lastAtIndex + 1).toLowerCase();
                
                // Don't show autocomplete if there's a space after @
                if (searchText.includes(' ')) {
                    this.hideAutocomplete();
                    resizeMessageInput();
                    return;
                }
                
                // Get matching bots and users
                const matches = this.getAutocompleteMatches(searchText);
                
                if (matches.length > 0) {
                    this.showAutocomplete(matches, lastAtIndex + 1);
                } else {
                    this.hideAutocomplete();
                }
                
                resizeMessageInput();
            }
            
             getAutocompleteMatches(searchText) {
                 const matches = [];
                 
                 // Add bots
                 this.bots.forEach(bot => {
                     if (bot.name.toLowerCase().startsWith(searchText)) {
                         matches.push({
                             type: 'bot',
                             name: bot.name,
                             description: bot.description || ''
                         });
                     }
                 });
                 
                 // REQUIREMENT: Add all channel users from group members list
                 // Plus from recent messages to get their email/username
                  if (this.currentGroup && this.groups[this.currentGroup]) {
                      const group = this.groups[this.currentGroup];
                      
                      const membersToCheck = group.members && Array.isArray(group.members) 
                          ? group.members 
                          : [];
                     
                      membersToCheck.forEach(member => {
                          const memberId = typeof member === 'string' ? member : (member.user_id || '');
                          if (memberId.startsWith('bot-')) {
                              return;
                          }
                          
                          const username = typeof member === 'string' ? memberId : (member.username || memberId);
                          const displayName = username;
                          
                          // Only add if not already in matches and matches search text
                          const alreadyExists = matches.some(m => m.type === 'user' && m.name === displayName);
                          if (!alreadyExists && displayName.toLowerCase().startsWith(searchText)) {
                              matches.push({
                                  type: 'user',
                                  name: displayName
                              });
                          }
                      });
                 }
                 
                 return matches;
             }
            
            showAutocomplete(matches, atPosition) {
                const dropdown = document.getElementById('autocomplete-dropdown');
                dropdown.innerHTML = '';
                
                matches.slice(0, 10).forEach((match, index) => {
                    const item = document.createElement('div');
                    item.className = 'autocomplete-item';
                    
                    const label = document.createElement('div');
                    label.className = 'autocomplete-label';
                    label.textContent = match.type === 'bot' ? `@${match.name}` : `@${match.name}`;
                    
                    const desc = document.createElement('div');
                    desc.className = 'autocomplete-desc';
                    desc.textContent = match.type === 'bot' ? match.description : '';
                    
                    item.appendChild(label);
                    item.appendChild(desc);
                    
                    item.addEventListener('click', () => {
                        this.selectAutocompleteMatch(match, atPosition);
                    });
                    
                    dropdown.appendChild(item);
                });
                
                dropdown.classList.add('active');
            }
            
            hideAutocomplete() {
                const dropdown = document.getElementById('autocomplete-dropdown');
                dropdown.classList.remove('active');
            }
            
            showUpdateNotification() {
                const notification = document.getElementById('update-notification');
                if (notification) {
                    notification.classList.add('visible');
                }
            }
            
            selectAutocompleteMatch(match, atPosition) {
                const input = document.getElementById('message-input');
                const cursorPos = input.selectionStart;
                const textBeforeCursor = input.value.substring(0, cursorPos);
                const lastAtIndex = textBeforeCursor.lastIndexOf('@');
                const textAfterCursor = input.value.substring(cursorPos);
                
                // Replace from @ to cursor with the match
                const beforeAt = input.value.substring(0, lastAtIndex);
                const selectedText = `@${match.name} `;
                input.value = beforeAt + selectedText + textAfterCursor;
                
                // Move cursor after the selected text
                const newCursorPos = beforeAt.length + selectedText.length;
                input.selectionStart = newCursorPos;
                input.selectionEnd = newCursorPos;
                
                this.hideAutocomplete();
                resizeMessageInput();
                input.focus();
            }
            
            addSystemMessage(groupId, content, severity = 'info') {
                if (!this.messages[groupId]) {
                    this.messages[groupId] = [];
                }
                this.messages[groupId].push({
                    type: 'system',
                    severity: severity,
                    content: content,
                    timestamp: new Date().toISOString()
                });
                if (groupId === this.currentGroup) {
                    this.renderMessages();
                }
            }
            
             renderGroups() {
                  const container = document.getElementById('groups-list');
                  container.innerHTML = '';
                  
                  Object.values(this.groups).forEach(group => {
                      const div = document.createElement('div');
                      let className = 'group-item' + (group.id === this.currentGroup ? ' active' : '');
                      
                      // REQUIREMENT: Highlight group if it has new mentions from connected users
                      if (this.groupsWithNewMentions.has(group.id)) {
                          className += ' has-mention';
                      }
                      
                      div.className = className;
                     
                     div.innerHTML = `
                         <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                             <div style="flex: 1; cursor: pointer;">
                                 <div class="group-name">${group.name || group.id}</div>
                                 <div class="group-members">${group.member_count || 0} members</div>
                             </div>
                             <button class="group-delete-btn" title="Delete group">✕</button>
                         </div>
                     `;
                     
                     // Click on name/members area to join group
                     div.querySelector('[style*="flex: 1"]').addEventListener('click', () => this.joinGroup(group.id));
                     
                     // Click on delete button to show confirmation
                     div.querySelector('.group-delete-btn').addEventListener('click', (e) => {
                         e.stopPropagation();
                         this.showDeleteGroupModal(group.id);
                     });
                     
                     container.appendChild(div);
                 });
             }
            
             renderBots() {
                 const container = document.getElementById('bots-list');
                 container.innerHTML = '';
                 
                 document.getElementById('bot-count').textContent = '(' + this.bots.length + ')';
                
                this.bots.forEach(bot => {
                    const div = document.createElement('div');
                    div.className = 'bot-card';
                    div.style.cursor = 'pointer';
                    
                    const commands = bot.commands ? bot.commands.map(c => `/${c.name}`).join(', ') : '';
                    
                    div.innerHTML = `
                        <div class="bot-name">@${bot.name}</div>
                        <div class="bot-description">${bot.description || ''}</div>
                        <div class="bot-commands">${commands}</div>
                    `;
                    
                    // Make bot card clickable to inject bot name
                    div.addEventListener('click', () => this.injectBotName(bot.name));
                    
                    container.appendChild(div);
                });
            }
            
            injectBotName(botName) {
                const input = document.getElementById('message-input');
                const cursorPos = input.selectionStart;
                const text = input.value;
                
                // Insert @botname at cursor position
                const beforeCursor = text.substring(0, cursorPos);
                const afterCursor = text.substring(cursorPos);
                input.value = beforeCursor + '@' + botName + ' ' + afterCursor;
                
                // Move cursor after the injected text
                const newPos = cursorPos + botName.length + 2;
                input.selectionStart = newPos;
                input.selectionEnd = newPos;
                input.focus();
                
                // Trigger resize since text changed
                resizeMessageInput();
                
                this.debug(2, 'Bot', `Injected @${botName} into message input`);
            }
            
            /**
             * REQUIREMENT: Message Removal with Strikethrough Effect
             * 
             * Called when user clicks X button on a message
             * 
             * Flow:
             * 1. Find message by ID in current group
             * 2. Set msg.removed = true (local client state)
             * 3. Emit 'remove_message' event to server
             * 4. Server updates JSONL file with "removed": true flag
             * 5. Server broadcasts to all clients
             * 6. renderMessages() applies .removed class for strikethrough styling
             * 
             * Notes:
             * - Message text remains in storage (not deleted, just marked removed)
             * - Removed messages excluded from bot thread context (load_thread_context)
             * - Visual only: strikethrough shown on frontend
             */
             removeMessage(messageId) {
                 if (!this.currentGroup) return;
                 
                 // Find and mark message as removed
                 const msgs = this.messages[this.currentGroup] || [];
                 const msg = msgs.find(m => m.id === messageId);
                 
                 if (msg) {
                     msg.removed = true;
                     this.debug(2, 'Message', `Marked message ${messageId} as removed`);
                     
                     // Emit removal to server
                     this.socket.emit(MEADOWS_PROTOCOL.REMOVE_MESSAGE, {
                         group_id: this.currentGroup,
                         message_id: messageId
                     });
                     
                     // Re-render messages to show strikethrough
                     this.renderMessages();
                 }
             }
             
             /*
             ========================================================================
             REPLY/QUOTE FUNCTIONALITY
             ========================================================================
             REQUIREMENT: Reply to messages with quoted context
             IMPLEMENTATION:
             - replyToMessage(msg): Set quoted message in UI
             - showQuotedMessage(): Display quote box above input
             - clearQuotedMessage(): Remove the quote
             - Include quoted message in sent message for bot context
             ========================================================================
             */
             
             replyToMessage(msg) {
                 this.quotedMessage = msg;
                 this.showQuotedMessage();
                 // Focus input for user convenience
                 document.getElementById('message-input').focus();
             }
             
             showQuotedMessage() {
                 const box = document.getElementById('quoted-message-box');
                 if (!this.quotedMessage || !box) return;
                 
                  const author = this.quotedMessage.bot_name ? 
                      `${this.quotedMessage.bot_name} (bot)` : 
                      (this.quotedMessage.username || this.quotedMessage.user_id);
                 
                 const authorEl = box.querySelector('.quoted-message-author');
                 const textEl = box.querySelector('.quoted-message-text');
                 
                 authorEl.textContent = `↳ ${author}`;
                 textEl.textContent = this.quotedMessage.content;
                 
                 box.style.display = 'flex';
                 box.classList.remove('hidden');
             }
             
             clearQuotedMessage() {
                 this.quotedMessage = null;
                 const box = document.getElementById('quoted-message-box');
                 if (box) {
                     box.style.display = 'none';
                     box.classList.add('hidden');
                 }
             }
             
              renderMessages() {
                 const container = document.getElementById('messages');
                 container.innerHTML = '';
                 
                 const msgs = this.messages[this.currentGroup] || [];

                 // TECHNICAL: Rebuild reaction index from persisted reaction messages
                 // on every render. This OVERWRITES this.reactions[this.currentGroup] —
                 // any pending local state not yet confirmed by the server would be lost.
                 // The index is rebuilt from JSONL data only (server-authoritative).
                 this.reactions[this.currentGroup] = this.buildReactionIndex(msgs);

                 const md = window.markdownit({
                    breaks: true,
                    linkify: true,
                    typographer: true,
                    html: false  // SECURITY: Disable HTML to prevent XSS attacks
                });
                
                /**
                 * REQUIREMENT: Dynamic context cutoff markers per bot
                 * 
                 * Each bot has its own context_limit (from bot registration).
                 * Show visual markers for each bot's context boundary.
                 * 
                 * If total messages > any bot's context_limit, show cutoff before that limit.
                 * Markers are dynamically positioned based on bot configuration.
                 */
                
                // Find all unique context limits from connected bots
                const contextLimits = new Set();
                contextLimits.add(30); // Default fallback
                this.bots.forEach(bot => {
                    if (bot.context_limit) {
                        contextLimits.add(bot.context_limit);
                    }
                });
                
                // Sort limits in descending order for marker placement
                const sortedLimits = Array.from(contextLimits).sort((a, b) => b - a);
                
                // Create a map of cutoff positions to bot context info
                const cutoffPositions = {};
                sortedLimits.forEach(limit => {
                    if (msgs.length > limit) {
                        const cutoffIndex = msgs.length - limit;
                        if (!cutoffPositions[cutoffIndex]) {
                            cutoffPositions[cutoffIndex] = [];
                        }
                        // Find which bots use this limit
                        const botsWithLimit = this.bots.filter(b => 
                            (b.context_limit || 30) === limit
                        ).map(b => b.name);
                        cutoffPositions[cutoffIndex].push({ limit, bots: botsWithLimit });
                    }
                });
                
                // Render messages with dynamic cutoff markers
                const cutoffIndices = Object.keys(cutoffPositions).map(Number).sort((a, b) => a - b);
                let currentIndex = 0;
                
                msgs.forEach((msg, msgIndex) => {
                    // Normalize messages: reaction-type messages have no content field.
                    // Set content to '' once so downstream code never needs || '' guards.
                    if (!msg.content) msg.content = '';

                    // Check if we need to insert a cutoff marker before this message
                    if (cutoffIndices.includes(msgIndex)) {
                        cutoffPositions[msgIndex].forEach(cutoff => {
                            const cutoffDiv = document.createElement('div');
                            cutoffDiv.className = 'context-cutoff';
                            const botNames = cutoff.bots.join(', ');
                            cutoffDiv.textContent = `⬇ ${botNames} context starts here (${cutoff.limit} messages) ⬇`;
                            container.appendChild(cutoffDiv);
                        });
                    }
                    
                    // Render the message
                    this._renderMessage(msg, container, md);
                });
                
                // Scroll to bottom after rendering all messages
                 this.renderMessagesScrollToBottom();
             }
             
              /**
               * Extract HTML forms from ```html code blocks, render markdown,
               * then replace placeholders with the actual form HTML.
               * This allows forms to be sent safely while html: false blocks inline HTML.
               *
               * BUSINESS RULE (MEADOWS-forms-intent §2.3): if the message has the
               * interactive-form label, read the form from metadata instead of
               * content fences. The label check takes priority over the regex fallback.
               * DOMPurify sanitizes the HTML before inserting into the DOM (§2.11).
               */
               renderMessageContent(msg, md) {
                   const content = msg.content;

                   // BUSINESS RULE (MEADOWS-forms-intent Phase 2): label-based
                   // form detection takes priority over the legacy regex fallback.
                   const labels = msg.labels || [];
                   const hasInteractiveLabel = labels.some(l =>
                       l[0] === 'meadows' && l[1] === 'interactive-form' && l[2] === '1.0.0'
                   );

                    if (hasInteractiveLabel) {
                        const meadows = msg.metadata && msg.metadata.meadows;
                        const fh = meadows && meadows.form_handling;
                        const formHtml = fh && fh.form;
                        if (formHtml) {
                            // Sanitize form HTML: remove scripts and event handlers,
                            // but preserve form attributes (name, value, type) that
                            // DOMPurify strips. Forms come from trusted bots.
                            const sanitized = formHtml
                                .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
                                .replace(/\son\w+\s*=\s*(['"])[^'"]*\1/gi, '')
                                .replace(/\son\w+\s*=\s*[^\s>]+/gi, '');
                            const formIdMatch = sanitized.match(/<form[^>]*id=['"]([^'"]+)['"]/);
                            const formId = formIdMatch ? formIdMatch[1] : `form_${msg.id}_0`;
                            const rendered = `<div class="embedded-form" data-form-id="${formId}" data-message-id="${msg.id}">${sanitized}</div>`;
                            return rendered;
                        }
                    }

                   // Legacy regex fallback: ```html...``` code blocks in content
                   const formBlocks = [];
                   const placeholderPrefix = '%%FORM_BLOCK_';
                   const placeholderSuffix = '%%';
                   let formCounter = 0;

                   // Extract ```html...``` blocks and replace with placeholders
                   const processedContent = content.replace(/```html\n([\s\S]*?)```/g, (match, htmlContent) => {
                       const placeholder = `${placeholderPrefix}${formCounter}${placeholderSuffix}`;
                       formBlocks.push({ placeholder, html: htmlContent.trim() });
                       formCounter++;
                       return placeholder;
                   });

                   // Render markdown (html: false means placeholders pass through as text)
                   let rendered = md.render(processedContent);

                   // Replace placeholders with actual form HTML
                   formBlocks.forEach((block, index) => {
                       const formIdMatch = block.html.match(/<form[^>]*id=['"]([^'"]+)['"]/);
                       const formId = formIdMatch ? formIdMatch[1] : `form_${msg.id}_${index}`;
                       const formHtml = `<div class="embedded-form" data-form-id="${formId}">${block.html}</div>`;
                       rendered = rendered.replace(
                           new RegExp(`${placeholderPrefix}${index}${placeholderSuffix}`, 'g'),
                           formHtml
                       );
                   });

                   return rendered;
               }

              /**
               * Determine if a message should be expandable (>5 lines)
               * REQUIREMENT: Collapse messages with more than 5 lines
               * TECHNICAL: Count newlines to estimate line count; also check visual length
               */
               isLongMessage(content) {
                  if (!content) return false;
                  
                  // Count newlines in content to estimate line count
                  const lineCount = (content.match(/\n/g) || []).length + 1;
                  
                  // Also check if it's visually long (rough estimate: ~80 chars per line)
                  const estimatedVisualLines = Math.ceil(content.length / 80);
                  
                  // Consider "long" if either metric suggests > 9 lines (doubled threshold from 5)
                  return Math.max(lineCount, estimatedVisualLines) > 9;
              }
             
             /**
              * Toggle message expansion state
              * REQUIREMENT: Collapsible messages with Show More/Show Less
              * UX RULE: Don't persist state across page reload (always collapse on reload)
              */
             toggleMessageExpansion(messageId) {
                 const messageDiv = document.querySelector(`[data-message-id="${messageId}"]`);
                 if (!messageDiv) return;
                 
                 const contentDiv = messageDiv.querySelector('.msg-content');
                 const toggleBtn = messageDiv.querySelector('.msg-expand-toggle');
                 
                 if (!contentDiv || !toggleBtn) return;
                 
                 const isCollapsed = contentDiv.classList.contains('collapsed');
                 
                 if (isCollapsed) {
                     // Expand message
                     contentDiv.classList.remove('collapsed');
                     toggleBtn.textContent = '⬆ Show Less';
                 } else {
                     // Collapse message
                     contentDiv.classList.add('collapsed');
                     toggleBtn.textContent = '⬇ Show More';
                 }
             }
             
              _renderMessage(msg, container, md) {
                     const div = document.createElement('div');
                     div.className = 'message ' + (msg.type || 'user');
                     div.dataset.messageId = msg.id;
                     
                     // Check if message is removed
                     if (msg.removed) {
                         div.className += ' removed';
                     }
                     
                     // REQUIREMENT: Add glow effect if message mentions current user
                     // But only if glow hasn't already faded (persisted in localStorage)
                     if ((msg.mentioned || this.mentionedMessageIds.has(msg.id)) && !this.seenGlowMessages.has(msg.id)) {
                         div.className += ' mentioned';
                         msg.mentioned = true; // Mark on message object
                     } else if (this.seenGlowMessages.has(msg.id)) {
                         // If glow was already faded, don't add the mentioned class
                         // This prevents glow from reappearing on reload/channel switch
                         msg.mentioned = false;
                     }
                     
                      // Check if this message is from the current user
                       if (msg.user_id === this.userId) {
                           div.className += ' mine';
                           this.debug(2, 'Message', `Marked message "${msg.content.substring(0, 30)}" as mine (user_id: ${msg.user_id})`);
                       } else {
                           this.debug(2, 'Message', `Message from ${msg.user_id} (not mine, current user: ${this.userId}): "${msg.content.substring(0, 30)}"`);
                       }

                      // BUSINESS RULE: @everyone messages get orange left border and
                      // 📢 badge via CSS ::after pseudo-element. The is_everyone flag
                      // is set server-side — client trusts it without content parsing.
                      if (msg.is_everyone) {
                          div.className += ' everyone-message';
                      }
                     
                     // REQUIREMENT: Mark messages within export selection range
                     if (this.exportStartMarker && msg.id) {
                         const msgs = this.messages[this.currentGroup] || [];
                         const msgIndex = msgs.findIndex(m => m.id === msg.id);
                         const startIndex = msgs.findIndex(m => m.id === this.exportStartMarker);
                         const endIndex = this.exportEndMarker ? msgs.findIndex(m => m.id === this.exportEndMarker) : msgs.length - 1;
                         
                         if (startIndex !== -1 && msgIndex >= Math.min(startIndex, endIndex) && msgIndex <= Math.max(startIndex, endIndex)) {
                             div.className += ' export-marked';
                             if (msg.id === this.exportEndMarker) {
                                 div.className += ' export-end';
                             }
                         }
                     }
                     
                     // Add severity class for system messages
                    if (msg.type === 'system' && msg.severity) {
                        div.className += ' ' + msg.severity;
                        div.setAttribute('role', 'alert');
                        if (msg.severity === 'warning') {
                            div.setAttribute('aria-label', 'Warning: ' + msg.content);
                        }
                    }
                    
                    const time = new Date(msg.timestamp).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', hour12: false });
                    
                    // REQUIREMENT: Display usernames instead of email addresses
                    // BUSINESS RULE: Protect user privacy - email is private, username is public
                    // UX RULE: Usernames are shorter and cleaner than emails
                    // TECHNICAL: Use username from server (extracted from JWT or provided explicitly)
                    let author;
                    if (msg.bot_name) {
                        author = `${msg.bot_name} (bot)`;
                    } else if (msg.username) {
                        // Use username from server (JWT username or extracted from email)
                        author = msg.username;
                    } else if (msg.email) {
                        // Fallback: extract username from email (part before @)
                        author = msg.email.split('@')[0];
                    } else {
                        // Last resort: use user_id if no username or email available
                        author = msg.user_id || 'Unknown';
                    }
                    
                     // Render content as markdown (or show strikethrough if removed)
                      let renderedContent = msg.removed ? 
                          `<span style="text-decoration: line-through; opacity: 0.5;">${this.escapeHtml(msg.content)}</span>` :
                          this.renderMessageContent(msg, md);
                     
                      const isLong = !msg.removed && this.isLongMessage(msg.content);
                     
                      let html = `
                          <div class="msg-header">
                              <span class="msg-author">${author}</span>
                              <span class="msg-time">${time}</span>
                              <button class="msg-remove-btn" title="Remove message">✕</button>
                          </div>
                      `;
                     
                     // REQUIREMENT: Display quoted/replied-to message if present
                     // UX RULE: Show compact preview (max 3 lines) that navigates to original message
                     if (msg.quoted_message && !msg.removed) {
                         const quotedAuthor = msg.quoted_message.bot_name ? 
                             `${msg.quoted_message.bot_name} (bot)` : 
                             (msg.quoted_message.author || 'Unknown');
                         const quotedContent = msg.quoted_message.content || '';
                         html += `
                             <div class="msg-quoted" data-quoted-id="${msg.quoted_message.id}" title="Click to navigate to original message">
                                 <div class="msg-quoted-author">↳ ${this.escapeHtml(quotedAuthor)}</div>
                                 <div class="msg-quoted-text">${this.escapeHtml(quotedContent)}</div>
                             </div>
                         `;
                     }
                     
                     html += `<div class="msg-content ${isLong ? 'collapsed' : ''}">${renderedContent}</div>`;
                    
                     if (msg.original_command && !msg.removed) {
                         html += `<div class="msg-command">↳ responding to: ${msg.original_command}</div>`;
                     }
                     
                     // REQUIREMENT: Add expand/collapse button for long messages
                     // UX RULE: Show subtle "⬇ Show More" button at bottom of collapsed messages
                     if (isLong && !msg.removed) {
                         html += `<button class="msg-expand-toggle" data-message-id="${msg.id}">⬇ Show More</button>`;
                     }
                     
                      // REQUIREMENT: Add reply button below message content
                      // UX RULE: Place action buttons below message for clarity
                      // REQUIREMENT: Add export marker button
                      const isMarkedStart = msg.id === this.exportStartMarker;
                      const isMarkedEnd = msg.id === this.exportEndMarker;
                      const markedClass = (isMarkedStart || isMarkedEnd) ? 'marked' : '';
                      const markerLabel = isMarkedStart ? ' (start)' : (isMarkedEnd ? ' (end)' : '');
                      
                       html += `<div class="msg-actions">
                           <button class="msg-copy-btn" title="Copy as Markdown">📋</button>
                           <button class="msg-reply-btn" title="Reply to message">⤴️ Reply</button>
                           <button class="msg-react-btn" data-react-target="${msg.id}" title="Add reaction">➕</button>
                           <button class="msg-export-btn ${markedClass}" data-message-id="${msg.id}" title="Mark for export">📤${markerLabel}</button>
                       </div>`;
                     
                     
                     div.innerHTML = html;
                     
                      // Add click handler for quoted message (navigate to original and highlight)
                      const quotedEl = div.querySelector('.msg-quoted');
                      if (quotedEl && msg.quoted_message) {
                          quotedEl.addEventListener('click', (e) => {
                              e.stopPropagation();
                              const quotedId = msg.quoted_message.id;
                              // Find the message element with this ID
                              const originalMsg = document.querySelector(`[data-message-id="${quotedId}"]`);
                              if (originalMsg) {
                                  // Scroll to the message
                                  originalMsg.scrollIntoView({ behavior: 'smooth', block: 'center' });
                                  // Add highlight animation
                                  originalMsg.classList.add('highlight-reply');
                                  // Remove animation class after it completes
                                  setTimeout(() => {
                                      originalMsg.classList.remove('highlight-reply');
                                  }, 800);
                              }
                          });
                      }
                      
                       // Add click handler for reply button
                       const replyBtn = div.querySelector('.msg-reply-btn');
                       if (replyBtn) {
                           replyBtn.addEventListener('click', (e) => {
                               e.stopPropagation();
                               this.replyToMessage(msg);
                           });
                       }
                       
                       // Add click handler for copy button
                       const copyBtn = div.querySelector('.msg-copy-btn');
                       if (copyBtn) {
                           copyBtn.addEventListener('click', (e) => {
                               e.stopPropagation();
                                const markdown = `> **${author}** - ${time}\n> ${msg.content}`;
                               navigator.clipboard.writeText(markdown).then(() => {
                                   copyBtn.textContent = '✓';
                                   setTimeout(() => { copyBtn.textContent = '📋'; }, 1500);
                               });
                           });
                       }
                       
                        // Add click handler for remove button
                      const removeBtn = div.querySelector('.msg-remove-btn');
                      if (removeBtn && !msg.removed) {
                          removeBtn.addEventListener('click', (e) => {
                              e.stopPropagation();
                              this.removeMessage(msg.id);
                          });
                      }
                      
                       // Add click handler for expand/collapse button
                       const expandBtn = div.querySelector('.msg-expand-toggle');
                       if (expandBtn) {
                           expandBtn.addEventListener('click', (e) => {
                               e.stopPropagation();
                               this.toggleMessageExpansion(msg.id);
                           });
                       }
                       
                        // Add click handler for export button
                        const exportBtn = div.querySelector('.msg-export-btn');
                        if (exportBtn) {
                            exportBtn.addEventListener('click', (e) => {
                                e.stopPropagation();
                                this.toggleExportMarker(msg.id);
                            });
                        }

                        // Add click handler for reaction button
                        const reactBtn = div.querySelector('.msg-react-btn');
                        if (reactBtn) {
                            reactBtn.addEventListener('click', (e) => {
                                e.stopPropagation();
                                this.hideEmojiPicker();
                                this.showEmojiPicker(msg.id);
                                const picker = document.getElementById('emoji-picker');
                                const rect = reactBtn.getBoundingClientRect();
                                picker.style.position = 'fixed';
                                picker.style.top = (rect.top - 10) + 'px';
                                picker.style.right = (window.innerWidth - rect.right) + 'px';
                                picker.style.bottom = 'auto';
                            });
                        }

                        // Render reaction bars
                        if (msg.type !== 'reaction') {
                            this.renderReactionBars(div, msg.id);
                        }
                       
                        container.appendChild(div);
                      
                      /*
                      REQUIREMENT: Forms from bots render on user side since user fills them
                      UX RULE: Only right-align when the embedded content has actual input fields
                      TECHNICAL: Display-only content (tables with data-action buttons) stays left-aligned
                      */
                      if (msg.type === 'bot' && div.querySelector('.embedded-form')) {
                          const hasInputs = div.querySelector('.embedded-form input, .embedded-form textarea, .embedded-form select');
                          if (hasInputs) {
                              div.classList.remove('bot');
                              div.classList.add('form-message');
                          }
                      }
                     
                     // REQUIREMENT: Auto-fade glow after 10 seconds when visible
                     // TECHNICAL: Persist seen message IDs to localStorage to survive reloads/channel switches
                     if (msg.mentioned && !this.seenGlowMessages.has(msg.id)) {
                         setTimeout(() => {
                             // Check if element is visible in viewport
                             const rect = div.getBoundingClientRect();
                             const isVisible = rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
                             
                             if (isVisible) {
                                 this.markGlowAsSeen(msg.id); // Persist to localStorage
                                 div.classList.add('glow-faded');
                             } else {
                                 // Re-check periodically if message becomes visible
                                 const checkInterval = setInterval(() => {
                                     const rect = div.getBoundingClientRect();
                                     const isVisible = rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
                                     if (isVisible) {
                                         this.markGlowAsSeen(msg.id); // Persist to localStorage
                                         div.classList.add('glow-faded');
                                         clearInterval(checkInterval);
                                     }
                                 }, 500);
                                 
                                 // Stop checking after 5 minutes
                                 setTimeout(() => clearInterval(checkInterval), 5 * 60 * 1000);
                             }
                         }, 10000); // 10 second delay
                     }
             }
            
            renderMessagesScrollToBottom() {
                // Scroll to bottom to show newest messages
                const container = document.getElementById('messages');
                if (container) {
                    setTimeout(() => {
                        container.scrollTop = container.scrollHeight;
                    }, 0);
                }
            }
            
            /**
             * REQUIREMENT: Detect if a message mentions the current user
             * Checks:
             * 1. If this message is a reply to the user's message (quoted_message.id)
             * 2. If content contains @username mention
             * 
             * BUSINESS RULE: User should know when they're mentioned
             * UX RULE: Visual glow + group highlight for mentions
             */
             isMentioned(message) {
                 if (!this.userId) return false;
                 
                 // BUSINESS RULE: @everyone/@all mentions EVERY user in the group.
                 // This check is FIRST (short-circuit) — highest priority mention type.
                 // Triggers glow effect, group sidebar highlight, and "mark all older
                 // messages as seen" behavior. The is_everyone flag is server-authoritative.
                 if (message.is_everyone) {
                     return true;
                 }

                 // Check if this message is replying to the user's message
                 if (message.quoted_message) {
                     const quotedId = message.quoted_message.id;
                     // Check if quoted message belongs to current user by looking up in messages
                     for (const groupMessages of Object.values(this.messages)) {
                         const quotedMsg = groupMessages.find(m => m.id === quotedId);
                         if (quotedMsg && quotedMsg.user_id === this.userId) {
                             return true;
                         }
                     }
                 }
                 
                 // Check if content contains @mention of current user (by username)
                 if (this.currentUsername && message.content.includes(`@${this.currentUsername}`)) {
                     return true;
                 }
                 
                  return false;
              }
             
             /**
              * REQUIREMENT: Handle new message mention detection and effects
             * Called when a new message arrives while connected
             * 
             * BUSINESS RULE: When a user is mentioned, all older messages become "seen"
             * so only new messages after the mention will glow
             * 
             * TECHNICAL: Only processes new messages (not on reload), 
             * marks message with mention flag, triggers group highlight if unfocused,
             * marks all older messages as seen to prevent them from glowing
             */
            handleNewMessageMention(message) {
                if (!this.isConnected) return; // Only for new messages while connected
                
                if (this.isMentioned(message)) {
                    this.mentionedMessageIds.add(message.id);
                    message.mentioned = true;
                    
                    // SMART IDEA: Mark all older messages in this group as seen
                    // This prevents old messages from glowing when user returns to view the group
                    const groupMessages = this.messages[message.group_id] || [];
                    groupMessages.forEach(msg => {
                        if (msg.id !== message.id) {
                            this.markGlowAsSeen(msg.id);
                        }
                    });
                    
                    // Highlight group if user is not viewing it
                    if (message.group_id !== this.currentGroup) {
                        this.groupsWithNewMentions.add(message.group_id);
                        this.renderGroups();
                    }
                }
            }

            _findMessageById(messageId) {
                for (const groupMessages of Object.values(this.messages)) {
                    const found = groupMessages.find(m => m.id === messageId);
                    if (found) return found;
                }
                return null;
            }

            escapeHtml(text) {
                 const div = document.createElement('div');
                 div.textContent = text;
                 return div.innerHTML;
             }
             
             updateStatus(type, text) {
                const indicator = document.getElementById('status-indicator');
                indicator.className = 'status-indicator ' + type;
                document.getElementById('connection-status').textContent = text;
            }
             
              /**
               * REQUIREMENT: Persist message glow fade status to localStorage
               * Called when a mentioned message's glow fades after 10 seconds
               * Prevents glow from reappearing on page reload or channel switch
               */
              markGlowAsSeen(messageId) {
                  this.seenGlowMessages.add(messageId);
                  // Persist to localStorage
                  localStorage.setItem('seenGlowMessages', JSON.stringify(Array.from(this.seenGlowMessages)));
              }
              
              /*
              REQUIREMENT: Horizontal sidebar collapse + vertical section collapses
              - toggleSidebar(): Collapse/expand entire sidebar (affects all three lists)
              - toggleBots(): Collapse/expand bots section vertically
              - toggleGroups(): Collapse/expand groups section vertically
              - toggleUsers(): Collapse/expand users section vertically
              - Each state persists in localStorage
              */
              
              toggleSidebar() {
                  const sidebar = document.getElementById('sidebar');
                  this.sidebarCollapsed = !this.sidebarCollapsed;
                  localStorage.setItem('sidebarCollapsed', this.sidebarCollapsed);
                  sidebar.classList.toggle('collapsed', this.sidebarCollapsed);
              }
              
              toggleBots() {
                  const botsList = document.getElementById('bots-list');
                  const botsToggle = document.getElementById('bots-toggle');
                  this.botsCollapsed = !this.botsCollapsed;
                  localStorage.setItem('botsCollapsed', this.botsCollapsed);
                  botsList.classList.toggle('hidden', this.botsCollapsed);
                  botsToggle.classList.toggle('collapsed', this.botsCollapsed);
              }
              
              toggleGroups() {
                  const groupsList = document.getElementById('groups-list');
                  const groupsToggle = document.getElementById('groups-toggle');
                  this.groupsCollapsed = !this.groupsCollapsed;
                  localStorage.setItem('groupsCollapsed', this.groupsCollapsed);
                  groupsList.classList.toggle('hidden', this.groupsCollapsed);
                  groupsToggle.classList.toggle('collapsed', this.groupsCollapsed);
              }
              
              toggleUsers() {
                  const usersList = document.getElementById('users-list');
                  const usersToggle = document.getElementById('users-toggle');
                  this.usersCollapsed = !this.usersCollapsed;
                  localStorage.setItem('usersCollapsed', this.usersCollapsed);
                  usersList.classList.toggle('hidden', this.usersCollapsed);
                  usersToggle.classList.toggle('collapsed', this.usersCollapsed);
              }
             
              renderUsers() {
                  const usersList = document.getElementById('users-list');
                  if (!usersList) return;
                  
                  usersList.innerHTML = '';
                  
                  // Get users from current group
                  const groupKey = this.currentGroup;
                  if (!groupKey || !this.groups[groupKey]) {
                      usersList.innerHTML = '<div style="padding: 10px; color: var(--text-secondary); text-align: center;">Select a group</div>';
                      const userCountEl = document.getElementById('user-count');
                      if (userCountEl) userCountEl.textContent = '0';
                      return;
                  }
                  
                  const group = this.groups[groupKey];
                  const allMembers = (group.members && Array.isArray(group.members)) ? group.members : [];
                  
                  // Filter out bots from regular user list (bots start with 'bot-')
                  const users = allMembers.filter(member => {
                      const memberId = typeof member === 'string' ? member : (member.user_id || '');
                      return !memberId.startsWith('bot-');
          });

          // BUSINESS RULE: Emoji picker closes on any click outside itself or the
          // reaction button that opened it. Global document-level listener — fires
          // on every click. TECHNICAL: Uses classList.contains which only matches
          // the exact element, not children — would miss nested elements.
          document.addEventListener('click', (e) => {
              const picker = document.getElementById('emoji-picker');
              if (picker.classList.contains('visible') && !picker.contains(e.target) && !e.target.classList.contains('msg-react-btn')) {
                  chat.hideEmojiPicker();
              }
          });
                  
                  // Update user count (excludes bots since they're shown elsewhere)
                  const userCountEl = document.getElementById('user-count');
                  if (userCountEl) {
                      userCountEl.textContent = users.length;
                  }
              }
             
             /**
              * REQUIREMENT: Full-width layout toggle
             * 
             * Allows user to switch between constrained width (1400px max) 
             * and full viewport width layout
             * - Stores preference in localStorage
             * - Toggles .fullwidth class on main-container
             * - Updates button icon (↔️)
             */
             toggleFullwidth() {
                 this.fullwidth = !this.fullwidth;
                 localStorage.setItem('fullwidth', this.fullwidth);
                 const container = document.querySelector('.main-container');
                 container.classList.toggle('fullwidth', this.fullwidth);
             }
             
             toggleFormConfirmations() {
                 const show = localStorage.getItem('showFormConfirmations') === 'true';
                 localStorage.setItem('showFormConfirmations', !show);
                 const btn = document.getElementById('form-confirm-toggle');
                 btn.style.opacity = !show ? '1' : '0.4';
             }
             
              /*
             REQUIREMENT: Apply persisted UI preferences after page load
             - Apply users panel collapsed state
             - Apply fullwidth layout state
             */
             applyUIPreferences() {
                 // Apply sidebar horizontal collapse state
                 const sidebar = document.getElementById('sidebar');
                 if (sidebar) {
                     sidebar.classList.toggle('collapsed', this.sidebarCollapsed);
                 }
                 
                 // Apply vertical section collapse states
                 const botsList = document.getElementById('bots-list');
                 const botsToggle = document.getElementById('bots-toggle');
                 if (botsList && botsToggle) {
                     botsList.classList.toggle('hidden', this.botsCollapsed);
                     botsToggle.classList.toggle('collapsed', this.botsCollapsed);
                 }
                 
                 const groupsList = document.getElementById('groups-list');
                 const groupsToggle = document.getElementById('groups-toggle');
                 if (groupsList && groupsToggle) {
                     groupsList.classList.toggle('hidden', this.groupsCollapsed);
                     groupsToggle.classList.toggle('collapsed', this.groupsCollapsed);
                 }
                 
                 const usersList = document.getElementById('users-list');
                 const usersToggle = document.getElementById('users-toggle');
                 if (usersList && usersToggle) {
                     usersList.classList.toggle('hidden', this.usersCollapsed);
                     usersToggle.classList.toggle('collapsed', this.usersCollapsed);
                 }
                 
                 // Apply fullwidth layout state
                 const container = document.querySelector('.main-container');
                 if (container) {
                     container.classList.toggle('fullwidth', this.fullwidth);
                 }
             }
             
              toggleTheme() {
                  this.darkMode = !this.darkMode;
                  localStorage.setItem('darkMode', this.darkMode);
                  document.body.classList.toggle('dark-mode', this.darkMode);
                  const toggle = document.getElementById('theme-toggle');
                  toggle.textContent = this.darkMode ? '🌙' : '☀️';
              }

              /* Ntfy Settings
               * BUSINESS RULE: Users configure their own ntfy push notification
               * preferences via a modal dialog. Prefs are stored server-side
               * (not localStorage) for cross-device consistency.
               */
              openNtfyModal() {
                  document.getElementById('ntfy-modal').classList.add('show');
                  document.getElementById('ntfy-status').style.display = 'none';
                  document.getElementById('ntfy-enabled').checked = this.ntfyPrefs.enabled;
                  document.getElementById('ntfy-server').value = this.ntfyPrefs.server_url || 'https://ntfy.sh';
                  // BUSINESS RULE: Auto-suggest a unique topic name when user has
                  // never configured ntfy before. Format: chat-{username}-{random}
                  const topicInput = document.getElementById('ntfy-topic');
                  if (!this.ntfyPrefs.topic && this.currentUsername) {
                      const random = Math.random().toString(36).substring(2, 8);
                      topicInput.value = `chat-${this.currentUsername}-${random}`;
                  } else {
                      topicInput.value = this.ntfyPrefs.topic || '';
                  }
                  document.getElementById('ntfy-token').value = this.ntfyPrefs.auth_token || '';
              }

              closeNtfyModal() {
                  document.getElementById('ntfy-modal').classList.remove('show');
              }

              saveNtfyPrefs() {
                  // BUSINESS RULE: server_url and topic only required when ntfy is enabled.
                  // When disabled, empty prefs are saved (allows toggling off without clearing).
                  const enabled = document.getElementById('ntfy-enabled').checked;
                  const server_url = document.getElementById('ntfy-server').value.trim();
                  const topic = document.getElementById('ntfy-topic').value.trim();
                  const auth_token = document.getElementById('ntfy-token').value.trim();
                  const statusEl = document.getElementById('ntfy-status');

                  if (enabled && (!server_url || !topic)) {
                      statusEl.textContent = 'Server URL en topic zijn verplicht als notificaties zijn ingeschakeld.';
                      statusEl.className = 'ntfy-status error';
                      statusEl.style.display = 'block';
                      return;
                  }

                  this.socket.emit(MEADOWS_PROTOCOL.SAVE_NTFY_PREFS, { enabled, server_url, topic, auth_token });
              }

              loadNtfyPrefs() {
                  // TECHNICAL: Fire-and-forget emit. Response arrives via 'ntfy_prefs' socket handler.
                  this.socket.emit(MEADOWS_PROTOCOL.GET_NTFY_PREFS, {});
              }

              /* Emoji Reactions
               * BUSINESS RULE: Users can react to any message with an emoji.
               * Reactions are stored as messages with type='reaction' in the group's
               * JSONL file. The client rebuilds the reaction index from message history
               * on every renderMessages() call — no localStorage persistence.
               */
              buildReactionIndex(messages) {
                  // TECHNICAL: Iterates ALL messages to build {targetId -> {emoji -> [usernames]}}.
                  // Called every renderMessages() — performance concern for large histories.
                  // Filters out msg.removed reactions and cleans up empty entries.
                  const index = {};
                  messages.forEach(msg => {
                      if (msg.type !== 'reaction') return;
                      const targetId = msg.target_message_id;
                      if (!targetId) return;
                      if (!index[targetId]) index[targetId] = {};
                      const emoji = msg.emoji;
                      if (!index[targetId][emoji]) index[targetId][emoji] = [];
                      if (!msg.removed && !index[targetId][emoji].includes(msg.username)) {
                          index[targetId][emoji].push(msg.username);
                      } else if (msg.removed) {
                          index[targetId][emoji] = index[targetId][emoji].filter(u => u !== msg.username);
                          if (index[targetId][emoji].length === 0) {
                              delete index[targetId][emoji];
                          }
                      }
                  });
                  // Clean up empty targets to prevent memory leaks
                  for (const targetId of Object.keys(index)) {
                      if (Object.keys(index[targetId]).length === 0) {
                          delete index[targetId];
                      }
                  }
                  return index;
              }

              renderReactionBars(messageDiv, targetId) {
                  // TECHNICAL: Badges sorted alphabetically by emoji (not by recency or count).
                  // 'active' class applied when current user has reacted (visual indicator).
                  // Skipped entirely for reaction-type messages.
                  const groupReactions = this.reactions[this.currentGroup] || {};
                  const emojiMap = groupReactions[targetId] || {};
                  const emojis = Object.keys(emojiMap).sort();
                  if (emojis.length === 0) return;

                  const bar = document.createElement('div');
                  bar.className = 'reaction-bar';

                  emojis.forEach(emoji => {
                      const users = emojiMap[emoji];
                      if (users.length === 0) return;
                      const badge = document.createElement('span');
                      badge.className = 'reaction-badge';
                      if (users.includes(this.currentUsername)) {
                          badge.classList.add('active');
                      }
                      badge.innerHTML = `<span class="reaction-emoji">${this.escapeHtml(emoji)}</span><span class="reaction-count">${users.length}</span>`;
                      badge.title = users.join(', ');
                      badge.addEventListener('click', () => {
                          this.toggleReaction(targetId, emoji);
                      });
                      bar.appendChild(badge);
                  });

                  messageDiv.appendChild(bar);
              }

               toggleReaction(targetMessageId, emoji) {
                   // BUSINESS RULE: Optimistic update — update UI immediately, then sync with server.
                   // If server rejects, the socket event will correct the state.
                   if (!this.currentGroup) return;
                   const gid = this.currentGroup;
                   if (!this.reactions[gid]) this.reactions[gid] = {};
                   if (!this.reactions[gid][targetMessageId]) this.reactions[gid][targetMessageId] = {};
                   if (!this.reactions[gid][targetMessageId][emoji]) this.reactions[gid][targetMessageId][emoji] = [];

                   const users = this.reactions[gid][targetMessageId][emoji];
                   const alreadyReacted = users.includes(this.currentUsername);

                   if (alreadyReacted) {
                       users.splice(users.indexOf(this.currentUsername), 1);
                       if (users.length === 0) delete this.reactions[gid][targetMessageId][emoji];
                   } else {
                       users.push(this.currentUsername);
                   }

                   this.updateReactionBadge(targetMessageId, emoji);

                   this.socket.emit(MEADOWS_PROTOCOL.ADD_REACTION, {
                       target_message_id: targetMessageId,
                       emoji: emoji,
                       group_id: gid,
                   });
               }

               updateReactionBadge(messageId, emoji) {
                   // Targeted DOM update — only updates the reaction bar for one message.
                   // Much faster than renderMessages() and preserves scroll position.
                   const groupReactions = this.reactions[this.currentGroup] || {};
                   const emojiMap = groupReactions[messageId] || {};
                   const emojis = Object.keys(emojiMap).sort();

                   const msgDiv = document.querySelector(`.message[data-message-id="${messageId}"]`);
                   if (!msgDiv) return;

                   let bar = msgDiv.querySelector('.reaction-bar');
                   if (emojis.length === 0) {
                       if (bar) bar.remove();
                       return;
                   }

                   if (!bar) {
                       bar = document.createElement('div');
                       bar.className = 'reaction-bar';
                       msgDiv.appendChild(bar);
                   }

                   bar.innerHTML = '';
                   emojis.forEach(e => {
                       const users = emojiMap[e];
                       if (users.length === 0) return;
                       const badge = document.createElement('span');
                       badge.className = 'reaction-badge';
                       if (users.includes(this.currentUsername)) badge.classList.add('active');
                       badge.innerHTML = `<span class="reaction-emoji">${this.escapeHtml(e)}</span><span class="reaction-count">${users.length}</span>`;
                       badge.title = users.join(', ');
                       badge.addEventListener('click', () => {
                           this.toggleReaction(messageId, e);
                       });
                       bar.appendChild(badge);
                   });
               }

               showEmojiPicker(targetMessageId) {
                  // REQUIREMENT: 9 hardcoded "quick pick" emojis — no user customization.
                  // TECHNICAL: Picker positioned via fixed positioning by the caller
                  // (renderMessages click handler), not here. This method only
                  // populates content and shows it. Text input accepts any Unicode
                  // character — no validation that input is a valid emoji.
                  const picker = document.getElementById('emoji-picker');
                  const quickRow = document.getElementById('emoji-picker-quick');
                  const input = document.getElementById('emoji-picker-input');

                  const commonEmojis = ['👍', '❤️', '😂', '😮', '😢', '🎉', '🔥', '👀', '✅'];
                  quickRow.innerHTML = '';
                  commonEmojis.forEach(emoji => {
                      const btn = document.createElement('button');
                      btn.textContent = emoji;
                      btn.addEventListener('click', () => {
                          this.toggleReaction(targetMessageId, emoji);
                          picker.classList.remove('visible');
                      });
                      quickRow.appendChild(btn);
                  });

                  input.value = '';
                  input.onkeydown = (e) => {
                      if (e.key === 'Enter' && input.value.trim()) {
                          this.toggleReaction(targetMessageId, input.value.trim());
                          picker.classList.remove('visible');
                      }
                  };

                  picker.classList.add('visible');
                  picker.dataset.targetMessageId = targetMessageId;
                  input.focus();
              }

               hideEmojiPicker() {
                   document.getElementById('emoji-picker').classList.remove('visible');
               }
          }
         
         const chat = new WebChat();
        
          // Attach button event listeners
          document.getElementById('theme-toggle').addEventListener('click', () => chat.toggleTheme());
          document.getElementById('fullwidth-toggle').addEventListener('click', () => chat.toggleFullwidth());
          document.getElementById('form-confirm-toggle').addEventListener('click', () => chat.toggleFormConfirmations());
          document.getElementById('jwt-token').addEventListener('keypress', (e) => {
             if (e.key === 'Enter') chat.authenticate();
         });
          document.getElementById('new-group-input').addEventListener('keypress', (e) => {
              if (e.key === 'Enter') chat.createGroup();
          });

          // BUSINESS RULE: Emoji picker closes on any click outside itself or the
          // reaction button that opened it. Global document-level listener — fires
          // on every click. TECHNICAL: Uses classList.contains which only matches
          // the exact element, not children — would miss nested elements.
          document.addEventListener('click', (e) => {
              const picker = document.getElementById('emoji-picker');
              if (picker.classList.contains('visible') && !picker.contains(e.target) && !e.target.classList.contains('msg-react-btn')) {
                  chat.hideEmojiPicker();
              }
          });
         // Connect button onclick is already set in HTML
        
        // Apply dark mode preference on page load
        if (chat.darkMode) {
            document.body.classList.add('dark-mode');
            document.getElementById('theme-toggle').textContent = '🌙';
        }
        
        // Apply full-width preference on page load
        if (chat.fullwidth) {
            document.querySelector('.main-container').classList.add('fullwidth');
        }
        
        // Apply form confirmation toggle state (off by default)
        if (localStorage.getItem('showFormConfirmations') !== 'true') {
            document.getElementById('form-confirm-toggle').style.opacity = '0.4';
        }
        
        chat.connect();
        
         function handleKeydown(event) {
             const dropdown = document.getElementById('autocomplete-dropdown');
             const isAutocompleteActive = dropdown.classList.contains('active');
             const input = document.getElementById('message-input');
             
             if (isAutocompleteActive) {
                 const items = dropdown.querySelectorAll('.autocomplete-item');
                 let selectedItem = dropdown.querySelector('.autocomplete-item.selected');
                 let selectedIndex = selectedItem ? Array.from(items).indexOf(selectedItem) : -1;
                 
                 if (event.key === 'ArrowDown') {
                     event.preventDefault();
                     if (selectedIndex < items.length - 1) {
                         items[selectedIndex + 1].classList.add('selected');
                         if (selectedItem) selectedItem.classList.remove('selected');
                         items[selectedIndex + 1].scrollIntoView({ block: 'nearest' });
                     }
                 } else if (event.key === 'ArrowUp') {
                     event.preventDefault();
                     if (selectedIndex > 0) {
                         items[selectedIndex - 1].classList.add('selected');
                         if (selectedItem) selectedItem.classList.remove('selected');
                         items[selectedIndex - 1].scrollIntoView({ block: 'nearest' });
                     } else if (selectedIndex === -1 && items.length > 0) {
                         items[items.length - 1].classList.add('selected');
                         items[items.length - 1].scrollIntoView({ block: 'nearest' });
                     }
                 } else if (event.key === 'Enter' && selectedItem) {
                     event.preventDefault();
                     selectedItem.click();
                 } else if (event.key === 'Tab') {
                     event.preventDefault();
                     if (selectedItem) {
                         selectedItem.click();
                     } else if (items.length > 0) {
                         items[0].click();
                     }
                 } else if (event.key === 'Escape') {
                     event.preventDefault();
                     chat.hideAutocomplete();
                 }
             } else {
                 // REQUIREMENT: Message history navigation when autocomplete is NOT active
                 // Handle arrow keys for message history only if cursor is at start of input
                 if (event.key === 'ArrowUp' && input.selectionStart === 0) {
                     event.preventDefault();
                     chat.navigateMessageHistory(1); // Go backwards in history
                 } else if (event.key === 'ArrowDown' && input.selectionStart === input.value.length) {
                     event.preventDefault();
                     chat.navigateMessageHistory(-1); // Go forwards in history
                 }
             }
         }
        
         function handleKeypress(event) {
             const input = document.getElementById('message-input');
             const dropdown = document.getElementById('autocomplete-dropdown');
             const isAutocompleteActive = dropdown.classList.contains('active');
             
             if (event.key === 'Enter' && !event.shiftKey) {
                 event.preventDefault();
                 if (isAutocompleteActive) {
                     // Autocomplete will be handled by keydown, so return
                     return;
                 }
                 chat.sendMessage();
             }
             // NOTE: Arrow key handling moved to handleKeydown for better reliability
             // keypress event is deprecated and doesn't reliably fire for arrow keys
         }
        
        function resizeMessageInput() {
            const input = document.getElementById('message-input');
            // Reset height to auto to get the scroll height
            input.style.height = 'auto';
            // Set height to scroll height (with max of 200px)
            const newHeight = Math.min(input.scrollHeight, 200);
            input.style.height = newHeight + 'px';
        }
    </script>
</body>
</html>