{{-- Gmail-style inbox panel (bottom-right) - include after </main>, before app-shell </div> --}}
<div id="inboxPanel" class="fixed bottom-0 right-6 z-50 hidden flex flex-col bg-white rounded-tl-lg shadow-[0_-4px_24px_rgba(0,0,0,.15)] border border-gray-200 border-b-0" style="width: 520px; max-width: calc(100vw - 48px); height: 560px; max-height: 85vh;">
    <div class="flex-shrink-0 flex items-center justify-between px-4 py-2.5 bg-gray-100 rounded-tl-lg border-b border-gray-200">
        <span class="text-sm font-semibold text-gray-800">Messages from CEO</span>
        <div class="flex items-center gap-1">
            <button type="button" id="inboxPanelClose" class="p-1.5 rounded hover:bg-gray-200 text-gray-600" aria-label="Close"><i class="fas fa-times text-sm"></i></button>
        </div>
    </div>
    <div class="flex-1 flex flex-col min-h-0 overflow-hidden">
        <div id="inboxChatHeader" class="flex-shrink-0 flex items-center justify-between gap-3 px-4 py-3 border-b border-gray-200 bg-white">
            <div class="flex items-center gap-3 flex-1 min-w-0">
                <div class="w-11 h-11 rounded-full overflow-hidden bg-gray-200 flex-shrink-0 flex items-center justify-center text-gray-400">
                    <img id="inboxCeoAvatar" src="" alt="" class="w-full h-full object-cover hidden">
                    <span id="inboxCeoAvatarPlaceholder" class="text-lg"><i class="fas fa-user"></i></span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <span id="inboxToLabel" class="font-semibold text-gray-900 truncate block">CEO</span>
                        <select id="inboxCeoSelect" class="hidden flex-1 min-w-0 rounded border border-gray-200 py-0.5 px-1 text-sm font-semibold text-gray-900 bg-transparent focus:outline-none focus:ring-1 focus:ring-gray-300 cursor-pointer"></select>
                    </div>
                    <p id="inboxCeoStatus" class="text-xs text-gray-500 truncate mt-0.5">Select a conversation</p>
                </div>
            </div>
            <div class="flex items-center gap-0.5 flex-shrink-0">
                <button type="button" class="p-2 rounded-full hover:bg-gray-100 text-gray-600 transition-colors" aria-label="More options"><i class="fas fa-ellipsis-v text-sm"></i></button>
            </div>
        </div>
        <div id="inboxMessageList" class="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50/50 min-h-0">
            <div id="inboxPlaceholder" class="flex flex-col items-center justify-center py-8 text-center text-gray-500 text-sm">
                <i class="fas fa-comments text-3xl text-gray-300 mb-2"></i>
                <p>Load conversations or select a thread.</p>
            </div>
        </div>
        <div id="inboxVoiceRecordingBar" class="hidden flex flex-shrink-0 items-center justify-center gap-2 px-4 py-2 bg-red-50 border-t border-red-100 text-red-700 text-sm">
            <i class="fas fa-circle text-red-500 animate-pulse"></i>
            <span>Recording</span>
            <span id="inboxVoiceRecordingSecs">0</span><span>s — Release to send</span>
        </div>
        <div id="inboxPendingAttachmentBar" class="hidden flex-shrink-0 flex items-center gap-2 px-4 py-2 bg-gray-50 border-t border-gray-100 text-sm">
            <span id="inboxPendingAttachmentIcon" class="text-gray-500"><i class="fas fa-paperclip"></i></span>
            <span id="inboxPendingAttachmentName" class="flex-1 truncate text-gray-700"></span>
            <button type="button" id="inboxPendingAttachmentRemove" class="p-1 rounded hover:bg-gray-200 text-gray-500" aria-label="Remove attachment"><i class="fas fa-times"></i></button>
        </div>
        <div class="flex-shrink-0 flex items-center gap-2 px-4 py-3 bg-white border-t border-gray-200">
            <input type="file" id="inboxAttachmentInput" class="hidden" accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.csv" />
            <button type="button" id="inboxVoiceBtn" class="p-2 rounded-lg hover:bg-gray-100 text-gray-600 transition-colors" aria-label="Hold to record voice message"><i class="fas fa-microphone text-sm"></i></button>
            <button type="button" id="inboxAttachBtn" class="p-2 rounded-lg hover:bg-gray-100 text-gray-600" aria-label="Attach image, video or file"><i class="fas fa-paperclip text-sm"></i></button>
            <div class="relative">
                <button type="button" id="inboxEmojiBtn" class="p-2 rounded-lg hover:bg-gray-100 text-gray-600" aria-label="Choose emoji"><i class="fas fa-smile text-sm"></i></button>
                <div id="inboxEmojiPicker" class="hidden absolute bottom-full left-0 mb-1 z-50 w-96 bg-white border border-gray-200 rounded-xl shadow-lg p-4">
                    <div class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Emoji</div>
                    <div id="inboxEmojiGrid" class="grid grid-cols-10 gap-2 max-h-72 overflow-y-auto text-xl">
                        <!-- Filled by JS -->      
                    </div>
                </div>
            </div>
            <div class="flex-1 relative">
                <input type="text" id="inboxReplyBody" placeholder="Aa" maxlength="65535" class="w-full rounded-2xl border border-gray-300 bg-gray-100 py-2.5 pl-4 pr-10 text-sm text-gray-800 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-300" />
                <button type="button" id="inboxEmojiBtnInner" class="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-full hover:bg-gray-200 text-gray-500" aria-label="Emoji"><i class="fas fa-smile text-sm"></i></button>
            </div>
            <button type="button" id="inboxSendReplyBtn" class="shrink-0 w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-800 text-white flex items-center justify-center transition-colors" aria-label="Send" title="Send message">
                <i class="fas fa-paper-plane text-sm"></i>
            </button>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var fullscreenBtn = document.getElementById('fullscreenBtn');
    if (fullscreenBtn) fullscreenBtn.addEventListener('click', function() {
        if (!document.fullscreenElement) document.documentElement.requestFullscreen();
        else document.exitFullscreen();
    });
    var inboxPanel = document.getElementById('inboxPanel');
    var inboxToggleBtn = document.getElementById('inboxToggleBtn');
    var inboxPanelClose = document.getElementById('inboxPanelClose');
    var inboxCeoSelect = document.getElementById('inboxCeoSelect');
    var inboxToLabel = document.getElementById('inboxToLabel');
    var inboxCeoAvatar = document.getElementById('inboxCeoAvatar');
    var inboxCeoAvatarPlaceholder = document.getElementById('inboxCeoAvatarPlaceholder');
    var inboxCeoStatus = document.getElementById('inboxCeoStatus');
    var inboxMessageList = document.getElementById('inboxMessageList');
    var inboxPlaceholder = document.getElementById('inboxPlaceholder');
    var inboxReplyBody = document.getElementById('inboxReplyBody');
    var inboxSendReplyBtn = document.getElementById('inboxSendReplyBtn');
    if (!inboxPanel || !inboxToggleBtn) return;

    var inboxRoutes = { ceos: @json(route('admin.inbox.ceos')), messages: @json(url('/admin/inbox/messages')), send: @json(route('admin.inbox.send')), messageUpdate: @json(url('/admin/inbox/message')), messageDelete: @json(url('/admin/inbox/message')), unreadCount: @json(route('admin.inbox.unread-count')) };
    var inboxCsrf = @json(csrf_token());
    var currentInboxCeoId = null;
    var inboxCeosList = [];
    var INBOX_STORAGE_KEY = 'adminInboxPanelOpen';
    var INBOX_LAST_SEEN_KEY = 'adminInboxLastSeenAt';
    var inboxRealtimePollTimer = null;
    var inboxRealtimePollInProgress = false;
    var INBOX_REALTIME_POLL_MS = 3000;
    var inboxUnreadBadgeTimer = null;
    var INBOX_UNREAD_POLL_MS = 5000;

    function setInboxPanelOpen(open) {
        try { localStorage.setItem(INBOX_STORAGE_KEY, open ? '1' : '0'); } catch (e) {}
    }
    function isInboxPanelOpen() {
        try { return localStorage.getItem(INBOX_STORAGE_KEY) === '1'; } catch (e) { return false; }
    }
    function setInboxLastSeenAt(iso) {
        try { localStorage.setItem(INBOX_LAST_SEEN_KEY, iso || ''); } catch (e) {}
    }
    function getInboxLastSeenAt() {
        try { return localStorage.getItem(INBOX_LAST_SEEN_KEY) || ''; } catch (e) { return ''; }
    }
    var inboxUnreadBadgeEl = null;
    function ensureInboxUnreadBadge() {
        if (!inboxToggleBtn || inboxUnreadBadgeEl) return inboxUnreadBadgeEl;
        inboxToggleBtn.classList.add('relative');
        var badge = document.getElementById('inboxUnreadBadge');
        if (!badge) {
            badge = document.createElement('span');
            badge.id = 'inboxUnreadBadge';
            badge.className = 'hidden absolute -top-1 -right-1 min-w-[18px] h-[18px] rounded-full bg-red-500 text-white text-[10px] font-bold flex items-center justify-center px-1';
            badge.setAttribute('aria-hidden', 'true');
            inboxToggleBtn.appendChild(badge);
        }
        inboxUnreadBadgeEl = badge;
        return badge;
    }
    function updateInboxUnreadBadge(count) {
        var badge = ensureInboxUnreadBadge();
        if (!badge) return;
        count = parseInt(count, 10) || 0;
        if (count > 0) {
            badge.textContent = count > 99 ? '99+' : String(count);
            badge.classList.remove('hidden');
        } else {
            badge.classList.add('hidden');
        }
    }
    function scrollInboxToBottom() {
        if (!inboxMessageList) return;
        function scroll() {
            inboxMessageList.scrollTop = inboxMessageList.scrollHeight;
        }
        scroll();
        requestAnimationFrame(function() {
            scroll();
            requestAnimationFrame(scroll);
        });
        setTimeout(scroll, 100);
    }

    function updateInboxHeader(ceo) {
        var name = ceo ? (ceo.display_name || ceo.username || 'CEO') : 'CEO';
        var status = ceo && ceo.status ? ceo.status : 'Select a conversation';
        if (inboxToLabel) inboxToLabel.textContent = name;
        if (inboxCeoStatus) inboxCeoStatus.textContent = status;
        if (inboxCeoAvatar && inboxCeoAvatarPlaceholder) {
            if (ceo && ceo.avatar) {
                inboxCeoAvatar.src = ceo.avatar;
                inboxCeoAvatar.alt = name;
                inboxCeoAvatar.classList.remove('hidden');
                inboxCeoAvatarPlaceholder.classList.add('hidden');
            } else {
                inboxCeoAvatar.classList.add('hidden');
                inboxCeoAvatarPlaceholder.classList.remove('hidden');
            }
        }
    }
    function escapeHtml(s) {
        if (!s) return '';
        var div = document.createElement('div');
        div.textContent = s;
        return div.innerHTML;
    }
    function getFileDisplayName(m) {
        if (!m.body) return m.attachment_name || 'Download';
        var match = m.body.match(/^\[File:\s*(.+)\]$/);
        return match ? match[1].trim() : (m.attachment_name || 'Download');
    }
    function canEditMessage(m) {
        return !m.from_ceo && !m.voice_url && !m.attachment_url;
    }
    function renderInboxMessage(m) {
        var isFromCeo = !!m.from_ceo;
        var bubble = document.createElement('div');
        bubble.setAttribute('data-message-id', m.id);
        bubble.className = 'flex flex-col ' + (isFromCeo ? 'items-start' : 'items-end');
        if (!isFromCeo) bubble.classList.add('group');
        var inner = '';
        var isImageOnly = false;
        var isFileOnly = false;
        if (m.voice_url) {
            inner = '<audio controls preload="metadata" class="max-w-full h-9" style="min-width:180px;"><source src="' + escapeHtml(m.voice_url) + '">Your browser does not support audio.</audio>';
        } else if (m.attachment_url) {
            if (m.is_image) {
                inner = '<a href="' + escapeHtml(m.attachment_url) + '" target="_blank" rel="noopener" class="block max-w-[280px] sm:max-w-[320px]"><img src="' + escapeHtml(m.attachment_url) + '" alt="Attachment" class="max-w-full max-h-64 rounded-lg object-contain" loading="lazy"></a>';
                isImageOnly = true;
            } else if (m.is_video) {
                inner = '<div class="block max-w-[280px] sm:max-w-[320px] rounded-lg overflow-hidden bg-black"><video src="' + escapeHtml(m.attachment_url) + '" controls preload="metadata" class="max-w-full max-h-64 w-full" playsinline></video></div>';
                isImageOnly = true;
            } else {
                var displayName = escapeHtml(getFileDisplayName(m));
                inner = '<a href="' + escapeHtml(m.attachment_url) + '" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-gray-700 hover:text-gray-900 underline">' + displayName + ' <i class="fas fa-external-link-alt text-xs"></i></a>';
                isFileOnly = true;
            }
        }
        if (!inner && m.body) {
            inner = '<p class="text-base whitespace-pre-wrap break-words inbox-message-body">' + escapeHtml(m.body) + '</p>';
        }
        var noBg = isImageOnly;
        var wrapperClass = noBg ? 'max-w-[85%] shrink-0' : 'max-w-[85%] rounded-2xl px-3 py-2 ' + (isFromCeo ? 'bg-white border border-gray-200 text-gray-900 rounded-bl-md' : 'bg-gray-800 text-white rounded-br-md');
        var bubbleContent = '<div class="' + wrapperClass + '">' + inner + '</div>';
        if (!isFromCeo) {
            var editOption = canEditMessage(m) ? '<button type="button" class="inbox-msg-edit w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded flex items-center gap-2"><i class="fas fa-edit text-xs"></i> Edit</button>' : '';
            bubbleContent = '<div class="w-full flex justify-end items-center gap-1">' +
                '<div class="relative inbox-msg-actions flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">' +
                '<button type="button" class="inbox-msg-dots p-1.5 rounded-full hover:bg-gray-200 text-gray-500" aria-label="Message options"><i class="fas fa-ellipsis-v text-sm"></i></button>' +
                '<div class="inbox-msg-dropdown hidden absolute left-0 top-full mt-1 py-1 bg-white rounded-lg shadow-lg border border-gray-200 z-50 min-w-[120px]">' +
                editOption +
                '<button type="button" class="inbox-msg-unsend w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded flex items-center gap-2"><i class="fas fa-trash-alt text-xs"></i> Unsend</button>' +
                '</div></div>' + bubbleContent + '</div>';
        }
        var html = bubbleContent + '<p class="text-xs text-gray-400 mt-0.5 ' + (isFromCeo ? 'text-left' : 'text-right') + '">' + escapeHtml(m.time || '') + '</p>';
        bubble.innerHTML = html;
        return bubble;
    }
    function stopInboxRealtimePolling() {
        if (inboxRealtimePollTimer) {
            clearInterval(inboxRealtimePollTimer);
            inboxRealtimePollTimer = null;
        }
    }
    function pollInboxNewMessages() {
        if (!currentInboxCeoId || !inboxMessageList || inboxRealtimePollInProgress || inboxPanel.classList.contains('hidden')) return;
        var pollCeoId = currentInboxCeoId;
        inboxRealtimePollInProgress = true;
        fetch(inboxRoutes.messages + '/' + pollCeoId, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (pollCeoId !== currentInboxCeoId || inboxPanel.classList.contains('hidden')) return;
                var messages = data.messages || [];
                var existingIds = {};
                inboxMessageList.querySelectorAll('.inbox-message-bubble[data-message-id]').forEach(function(el) {
                    var id = el.getAttribute('data-message-id');
                    if (id) existingIds[id] = true;
                });
                var newMessages = messages.filter(function(m) { return !existingIds[String(m.id)]; });
                if (newMessages.length > 0) {
                    inboxPlaceholder.style.display = 'none';
                    newMessages.forEach(function(m) {
                        var el = renderInboxMessage(m);
                        el.classList.add('inbox-message-bubble');
                        inboxMessageList.appendChild(el);
                    });
                    scrollInboxToBottom();
                }
            })
            .catch(function() {})
            .finally(function() { inboxRealtimePollInProgress = false; });
    }
    function startInboxRealtimePolling() {
        stopInboxRealtimePolling();
        if (!currentInboxCeoId || inboxPanel.classList.contains('hidden')) return;
        pollInboxNewMessages();
        inboxRealtimePollTimer = setInterval(pollInboxNewMessages, INBOX_REALTIME_POLL_MS);
    }

    function pollInboxUnreadCount() {
        var url = inboxRoutes.unreadCount;
        var lastSeen = getInboxLastSeenAt();
        if (lastSeen) url += (url.indexOf('?') >= 0 ? '&' : '?') + 'last_seen_at=' + encodeURIComponent(lastSeen);
        fetch(url, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var count = data.unread_count != null ? data.unread_count : 0;
                updateInboxUnreadBadge(count);
            })
            .catch(function() {});
    }
    function startInboxUnreadBadgePolling() {
        if (inboxUnreadBadgeTimer) return;
        pollInboxUnreadCount();
        inboxUnreadBadgeTimer = setInterval(pollInboxUnreadCount, INBOX_UNREAD_POLL_MS);
    }

    function loadInboxMessages(ceoId) {
        if (!inboxMessageList) return;
        stopInboxRealtimePolling();
        inboxPlaceholder.style.display = 'none';
        inboxMessageList.querySelectorAll('.inbox-message-bubble').forEach(function(el) { el.remove(); });
        if (!ceoId) {
            inboxPlaceholder.style.display = 'flex';
            inboxPlaceholder.innerHTML = '<i class="fas fa-comments text-3xl text-gray-300 mb-2"></i><p>Select a conversation or no messages yet.</p>';
            return;
        }
        fetch(inboxRoutes.messages + '/' + ceoId, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var messages = data.messages || [];
                inboxMessageList.querySelectorAll('.inbox-message-bubble').forEach(function(el) { el.remove(); });
                if (messages.length === 0) {
                    inboxPlaceholder.style.display = 'flex';
                    inboxPlaceholder.innerHTML = '<i class="fas fa-comments text-3xl text-gray-300 mb-2"></i><p>No messages yet. Send a reply below.</p>';
                } else {
                    inboxPlaceholder.style.display = 'none';
                    messages.forEach(function(m) {
                        var el = renderInboxMessage(m);
                        el.classList.add('inbox-message-bubble');
                        inboxMessageList.appendChild(el);
                    });
                    scrollInboxToBottom();
                }
                startInboxRealtimePolling();
            })
            .catch(function() {
                inboxPlaceholder.style.display = 'flex';
                inboxPlaceholder.innerHTML = '<i class="fas fa-exclamation-circle text-3xl text-red-300 mb-2"></i><p>Failed to load messages.</p>';
            });
    }
    function loadInboxCeos() {
        fetch(inboxRoutes.ceos, { headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var ceos = data.ceos || [];
                inboxCeosList = ceos;
                if (inboxCeoSelect) { inboxCeoSelect.innerHTML = ''; inboxCeoSelect.classList.add('hidden'); }
                if (inboxToLabel) inboxToLabel.classList.remove('hidden');
                if (ceos.length === 0) {
                    stopInboxRealtimePolling();
                    currentInboxCeoId = null;
                    updateInboxHeader(null);
                    if (inboxCeoStatus) inboxCeoStatus.textContent = 'Select a conversation';
                    if (inboxMessageList) inboxMessageList.querySelectorAll('.inbox-message-bubble').forEach(function(el) { el.remove(); });
                    inboxPlaceholder.style.display = 'flex';
                    inboxPlaceholder.innerHTML = '<i class="fas fa-comments text-3xl text-gray-300 mb-2"></i><p>No messages from CEO yet. When the CEO sends you a message, they will appear here.</p>';
                    return;
                }
                if (ceos.length > 1 && inboxCeoSelect) {
                    inboxCeoSelect.classList.remove('hidden');
                    inboxToLabel.classList.add('hidden');
                    ceos.forEach(function(c) {
                        var opt = document.createElement('option');
                        opt.value = c.id;
                        opt.textContent = c.display_name || c.username || 'CEO';
                        inboxCeoSelect.appendChild(opt);
                    });
                    currentInboxCeoId = parseInt(inboxCeoSelect.value, 10);
                } else {
                    currentInboxCeoId = ceos[0].id;
                }
                var currentCeo = ceos.find(function(c) { return c.id === currentInboxCeoId; }) || ceos[0];
                updateInboxHeader(currentCeo);
                loadInboxMessages(currentInboxCeoId);
            })
            .catch(function() {
                inboxPlaceholder.style.display = 'flex';
                inboxPlaceholder.innerHTML = '<i class="fas fa-exclamation-circle text-3xl text-red-300 mb-2"></i><p>Failed to load conversations.</p>';
            });
    }
    var pendingInboxAttachment = null;
    function clearPendingAttachment() {
        pendingInboxAttachment = null;
        var bar = document.getElementById('inboxPendingAttachmentBar');
        var input = document.getElementById('inboxAttachmentInput');
        if (bar) bar.classList.add('hidden');
        if (input) input.value = '';
    }
    function sendInboxReply() {
        var body = (inboxReplyBody && inboxReplyBody.value || '').trim();
        if (!currentInboxCeoId) return;
        if (!pendingInboxAttachment && !body) return;
        if (inboxSendReplyBtn) inboxSendReplyBtn.disabled = true;
        if (pendingInboxAttachment) {
            var fd = new FormData();
            fd.append('ceo_id', currentInboxCeoId);
            fd.append('attachment', pendingInboxAttachment);
            fd.append('_token', inboxCsrf);
            fetch(inboxRoutes.send, { method: 'POST', body: fd, headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.success && data.message) {
                        clearPendingAttachment();
                        var el = renderInboxMessage(data.message);
                        el.classList.add('inbox-message-bubble');
                        inboxPlaceholder.style.display = 'none';
                        inboxMessageList.appendChild(el);
                        scrollInboxToBottom();
                    }
                })
                .catch(function() {})
                .finally(function() { if (inboxSendReplyBtn) inboxSendReplyBtn.disabled = false; });
            return;
        }
        var formData = new FormData();
        formData.append('ceo_id', currentInboxCeoId);
        formData.append('body', body);
        formData.append('_token', inboxCsrf);
        fetch(inboxRoutes.send, { method: 'POST', body: formData, headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.success && data.message) {
                    inboxReplyBody.value = '';
                    var el = renderInboxMessage(data.message);
                    el.classList.add('inbox-message-bubble');
                    inboxPlaceholder.style.display = 'none';
                    inboxMessageList.appendChild(el);
                    scrollInboxToBottom();
                }
            })
            .catch(function() {})
            .finally(function() { if (inboxSendReplyBtn) inboxSendReplyBtn.disabled = false; });
    }

    inboxToggleBtn.addEventListener('click', function() {
        if (inboxPanel.classList.contains('hidden')) {
            inboxPanel.classList.remove('hidden');
            setInboxPanelOpen(true);
            setInboxLastSeenAt(new Date().toISOString());
            pollInboxUnreadCount();
            loadInboxCeos();
        } else {
            stopInboxRealtimePolling();
            inboxPanel.classList.add('hidden');
            setInboxPanelOpen(false);
        }
    });
    if (inboxPanelClose) inboxPanelClose.addEventListener('click', function() {
        stopInboxRealtimePolling();
        inboxPanel.classList.add('hidden');
        setInboxPanelOpen(false);
    });

    if (isInboxPanelOpen()) {
        inboxPanel.classList.remove('hidden');
        setInboxLastSeenAt(new Date().toISOString());
        loadInboxCeos();
    }
    startInboxUnreadBadgePolling();
    if (inboxSendReplyBtn && inboxReplyBody) {
        inboxSendReplyBtn.addEventListener('click', sendInboxReply);
        inboxReplyBody.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendInboxReply(); }
        });
    }
    if (inboxCeoSelect) {
        inboxCeoSelect.addEventListener('change', function() {
            currentInboxCeoId = parseInt(inboxCeoSelect.value, 10);
            clearPendingAttachment();
            var ceo = inboxCeosList.find(function(c) { return c.id === currentInboxCeoId; });
            updateInboxHeader(ceo);
            loadInboxMessages(currentInboxCeoId);
        });
    }

    (function initInboxVoiceMessage() {
        var voiceBtn = document.getElementById('inboxVoiceBtn');
        var recordingBar = document.getElementById('inboxVoiceRecordingBar');
        var recordingSecsEl = document.getElementById('inboxVoiceRecordingSecs');
        if (!voiceBtn || !recordingBar) return;
        var mediaRecorder = null, stream = null, chunks = [], recordingTimer = null, recordingStartTime = 0;
        function stopRecordingAndSend() {
            document.removeEventListener('pointerup', onRelease);
            document.removeEventListener('pointercancel', onRelease);
            document.removeEventListener('mouseup', onRelease);
            document.removeEventListener('touchend', onRelease);
            if (recordingTimer) { clearInterval(recordingTimer); recordingTimer = null; }
            recordingBar.classList.add('hidden');
            voiceBtn.classList.remove('bg-red-100', 'text-red-600');
            if (!mediaRecorder || mediaRecorder.state === 'inactive') return;
            mediaRecorder.stop();
        }
        function onRelease() { stopRecordingAndSend(); }
        function startRecording() {
            if (!currentInboxCeoId) return;
            chunks = [];
            navigator.mediaDevices.getUserMedia({ audio: true }).then(function(s) {
                stream = s;
                var mime = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : (MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : '');
                try { mediaRecorder = new MediaRecorder(stream, mime ? { mimeType: mime } : {}); } catch (e) { mediaRecorder = new MediaRecorder(stream); }
                mediaRecorder.ondataavailable = function(e) { if (e.data && e.data.size) chunks.push(e.data); };
                mediaRecorder.onstop = function() {
                    if (stream) { stream.getTracks().forEach(function(t) { t.stop(); }); stream = null; }
                    var blob = chunks.length ? new Blob(chunks, { type: mediaRecorder.mimeType || 'audio/webm' }) : null;
                    mediaRecorder = null;
                    if (!blob || blob.size < 500) return;
                    var fd = new FormData();
                    fd.append('ceo_id', currentInboxCeoId);
                    fd.append('voice', blob, 'voice.webm');
                    fd.append('_token', inboxCsrf);
                    if (inboxSendReplyBtn) inboxSendReplyBtn.disabled = true;
                    fetch(inboxRoutes.send, { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
                        .then(function(r) { return r.json(); })
                        .then(function(data) {
                            if (data.success && data.message) {
                                var el = renderInboxMessage(data.message);
                                el.classList.add('inbox-message-bubble');
                                inboxPlaceholder.style.display = 'none';
                                inboxMessageList.appendChild(el);
                                scrollInboxToBottom();
                            }
                        })
                        .catch(function() {})
                        .finally(function() { if (inboxSendReplyBtn) inboxSendReplyBtn.disabled = false; });
                };
                mediaRecorder.start(200);
                recordingStartTime = Date.now();
                recordingBar.classList.remove('hidden');
                if (recordingSecsEl) recordingSecsEl.textContent = '0';
                recordingTimer = setInterval(function() {
                    if (recordingSecsEl) recordingSecsEl.textContent = Math.floor((Date.now() - recordingStartTime) / 1000);
                }, 1000);
                voiceBtn.classList.add('bg-red-100', 'text-red-600');
                document.addEventListener('pointerup', onRelease);
                document.addEventListener('pointercancel', onRelease);
                document.addEventListener('mouseup', onRelease);
                document.addEventListener('touchend', onRelease);
            }).catch(function(err) {
                console.warn('Microphone access denied or failed', err);
                alert('Microphone access is needed to record voice messages.');
            });
        }
        voiceBtn.addEventListener('pointerdown', function(e) {
            e.preventDefault();
            if (mediaRecorder && mediaRecorder.state === 'recording') return;
            startRecording();
        });
        voiceBtn.addEventListener('mousedown', function(e) { e.preventDefault(); });
        voiceBtn.addEventListener('touchstart', function(e) { e.preventDefault(); startRecording(); }, { passive: false });
    })();

    (function initInboxAttachment() {
        var attachBtn = document.getElementById('inboxAttachBtn');
        var attachmentInput = document.getElementById('inboxAttachmentInput');
        var bar = document.getElementById('inboxPendingAttachmentBar');
        var nameEl = document.getElementById('inboxPendingAttachmentName');
        var iconEl = document.getElementById('inboxPendingAttachmentIcon');
        var removeBtn = document.getElementById('inboxPendingAttachmentRemove');
        if (!attachBtn || !attachmentInput) return;
        attachBtn.addEventListener('click', function() {
            if (!currentInboxCeoId) {
                alert('Please select a conversation first.');
                return;
            }
            attachmentInput.value = '';
            attachmentInput.click();
        });
        attachmentInput.addEventListener('change', function() {
            var file = this.files && this.files[0];
            if (!file) return;
            pendingInboxAttachment = file;
            if (nameEl) nameEl.textContent = file.name;
            if (iconEl) iconEl.innerHTML = file.type.indexOf('image/') === 0 ? '<i class="fas fa-image"></i>' : (file.type.indexOf('video/') === 0 ? '<i class="fas fa-video"></i>' : '<i class="fas fa-paperclip"></i>');
            if (bar) bar.classList.remove('hidden');
            this.value = '';
        });
        if (removeBtn && bar) {
            removeBtn.addEventListener('click', function() {
                clearPendingAttachment();
            });
        }
    })();

    (function initInboxEmojiPicker() {
        var emojiBtn = document.getElementById('inboxEmojiBtn');
        var emojiBtnInner = document.getElementById('inboxEmojiBtnInner');
        var picker = document.getElementById('inboxEmojiPicker');
        var grid = document.getElementById('inboxEmojiGrid');
        var input = inboxReplyBody;
        if (!emojiBtn || !picker || !grid || !input) return;
        var emojis = ['😀','😃','😄','😁','😅','😂','🤣','😊','😇','🙂','😉','😍','🥰','😘','😋','😜','🤪','😎','🤓','😢','😭','😤','😡','🥺','😱','👍','👎','👏','🙌','🤝','✌','🤞','❤','🧡','💛','💚','💙','💜','🖤','💕','💖','💗','🔥','⭐','✨','💯','✅','❌','🙏','👋','💪','🎉','🎊','🚀','💡','📌','🔔'];
        emojis.forEach(function(emoji) {
            var span = document.createElement('span');
            span.className = 'cursor-pointer hover:bg-gray-100 rounded p-1 text-center select-none';
            span.textContent = emoji;
            span.setAttribute('role', 'button');
            span.setAttribute('aria-label', 'Insert ' + emoji);
            span.addEventListener('click', function() {
                var start = input.selectionStart;
                var end = input.selectionEnd;
                var val = input.value;
                input.value = val.slice(0, start) + emoji + val.slice(end);
                input.selectionStart = input.selectionEnd = start + emoji.length;
                input.focus();
            });
            grid.appendChild(span);
        });
        function togglePicker(e) { e.stopPropagation(); picker.classList.toggle('hidden'); }
        emojiBtn.addEventListener('click', togglePicker);
        if (emojiBtnInner) emojiBtnInner.addEventListener('click', togglePicker);
        document.addEventListener('click', function(e) {
            if (picker.classList.contains('hidden')) return;
            if (!picker.contains(e.target) && e.target !== emojiBtn && e.target !== emojiBtnInner && !emojiBtnInner.contains(e.target)) picker.classList.add('hidden');
        });
    })();

    (function initInboxMessageActions() {
        if (!inboxMessageList) return;
        function closeAllDropdowns() {
            inboxMessageList.querySelectorAll('.inbox-msg-dropdown').forEach(function(d) { d.classList.add('hidden'); });
        }
        inboxMessageList.addEventListener('click', function(e) {
            var dots = e.target.closest('.inbox-msg-dots');
            var editBtn = e.target.closest('.inbox-msg-edit');
            var unsendBtn = e.target.closest('.inbox-msg-unsend');
            var dropdown = e.target.closest('.inbox-msg-dropdown');
            if (dots) {
                e.preventDefault();
                var container = dots.closest('.inbox-msg-actions');
                var dd = container ? container.querySelector('.inbox-msg-dropdown') : null;
                var isOpen = dd && !dd.classList.contains('hidden');
                closeAllDropdowns();
                if (dd && !isOpen) dd.classList.remove('hidden');
            } else if (editBtn) {
                var row = editBtn.closest('[data-message-id]');
                var id = row && row.getAttribute('data-message-id');
                var bodyEl = row ? row.querySelector('.inbox-message-body') : null;
                if (!id || !bodyEl) return;
                var current = (bodyEl.textContent || '').trim();
                var newBody = prompt('Edit message:', current);
                if (newBody === null) return;
                newBody = newBody.trim();
                if (newBody === current) { closeAllDropdowns(); return; }
                if (!newBody) { closeAllDropdowns(); return; }
                closeAllDropdowns();
                fetch(inboxRoutes.messageUpdate + '/' + id, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': inboxCsrf, 'X-Requested-With': 'XMLHttpRequest' },
                    body: JSON.stringify({ body: newBody })
                })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.success && data.message) {
                        bodyEl.textContent = data.message.body;
                    }
                })
                .catch(function() {});
            } else if (unsendBtn) {
                var row = unsendBtn.closest('[data-message-id]');
                var id = row && row.getAttribute('data-message-id');
                if (!id) return;
                if (!confirm('Unsend this message? It will be removed for everyone.')) return;
                closeAllDropdowns();
                fetch(inboxRoutes.messageDelete + '/' + id, {
                    method: 'DELETE',
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': inboxCsrf, 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.success && row && row.parentNode) row.remove();
                })
                .catch(function() {});
            } else if (!dropdown) {
                closeAllDropdowns();
            }
        });
        document.addEventListener('click', function(e) {
            if (!e.target.closest('#inboxMessageList')) closeAllDropdowns();
        });
    })();
});
</script>