<!-- Message Board View -->
<div id="messageboard-view" class="session-view" style="display:none">
    <div class="session-header">
        <div style="display:flex;align-items:center;gap:12px">
            <h2 id="messageboard-title">Message Board</h2>
            <span class="badge" id="messageboard-project-badge" style="display:none"></span>
        </div>
        <div style="display:flex;gap:8px;align-items:center">
            <button class="btn btn-small" id="mb-back-btn" style="display:none" onclick="showMessageBoardProjects()">All Projects</button>
            <button class="btn btn-small btn-danger" id="mb-delete-btn" style="display:none" onclick="deleteMessageBoardProject()">Delete Project</button>
        </div>
    </div>

    <div class="view-body" style="display:flex;gap:20px;overflow:hidden">
        <!-- Project list (shown when no project selected) -->
        <div id="mb-project-list" style="flex:1;overflow-y:auto">
            <div class="empty-state" id="mb-projects-empty">No projects yet</div>
            <ul class="session-list" id="mb-projects-ul"></ul>
        </div>

        <!-- Board view (shown when project selected) -->
        <div id="mb-board" style="display:none;flex:1;flex-direction:column;overflow:hidden">
            <!-- Messages -->
            <div id="mb-messages" style="flex:1;overflow-y:auto;padding-bottom:12px">
                <div class="empty-state" id="mb-messages-empty">No messages yet</div>
            </div>

            <!-- Post form -->
            <div style="border-top:1px solid var(--border);padding-top:12px;display:flex;gap:8px">
                <input type="text" id="mb-post-input" placeholder="Post a message as Developer..."
                       style="flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:13px"
                       onkeydown="if(event.key==='Enter'){event.preventDefault();postBoardMessage()}">
                <button class="btn btn-small btn-primary" onclick="postBoardMessage()">Send</button>
            </div>
        </div>

        <!-- Subscribers panel (shown alongside board) -->
        <div id="mb-subscribers-panel" style="display:none;width:220px;border-left:1px solid var(--border);padding-left:16px;overflow-y:auto">
            <h3 style="font-size:13px;margin:0 0 8px;color:var(--text-muted)">Subscribers</h3>
            <ul id="mb-subscribers-list" style="list-style:none;padding:0;margin:0"></ul>
        </div>
    </div>
</div>
