<!-- 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 class="mb-header-actions">
            <button class="mb-action-btn" id="mb-back-btn" style="display:none" onclick="showMessageBoardProjects()">
                <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3L5 8l5 5"/></svg>
                All Projects
            </button>
            <button class="mb-action-btn" id="mb-pause-btn" style="display:none" onclick="toggleBoardPause()">Pause Reads</button>
            <button class="mb-action-btn" id="mb-sleep-btn" style="display:none" onclick="toggleBoardSleep()">Sleep Team</button>
            <button class="mb-action-btn mb-action-danger" id="mb-delete-btn" style="display:none" onclick="deleteMessageBoardProject()">Delete</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:8px 4px 12px">
                <div id="mb-sleep-banner" class="mb-sleep-banner" style="display:none">
                    <span>🌙 This team is sleeping. Messages are paused.</span>
                </div>
                <div class="empty-state" id="mb-messages-empty">No messages yet</div>
            </div>

            <!-- Post form -->
            <div style="border-top:1px solid var(--border);padding:12px 0 0;display:flex;gap:8px;align-items:flex-end">
                <textarea id="mb-post-input" placeholder="Post a message as Developer..."
                       rows="2"
                       style="flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-size:14px;resize:vertical;font-family:inherit;line-height:1.5;min-height:44px"
                       onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();postBoardMessage()}"></textarea>
                <button class="btn btn-primary" onclick="postBoardMessage()" style="height:44px;padding:0 20px">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>
