{% load phoxtail_design_tags %}
<div class="phoxtail-media-picker-overlay"
     data-modal-animation="slide-left">
    <div class="phoxtail-media-picker-drawer phoxtail-modal-drawer">
        <div class="phoxtail-bar-panel-header">
            <span class="phoxtail-bar-panel-title">Menu &amp; Media</span>
            <button type="button"
                    onclick="closeModalLevel1();"
                    class="phoxtail-bar-panel-close"
                    title="Close">
                {% icon "close" class="phoxtail-bar-btn-icon" %}
            </button>
        </div>

        <div class="phoxtail-media-picker-tabs">
            <button type="button"
                    class="phoxtail-media-picker-tab {% if tab == 'menu' %}phoxtail-media-picker-tab--active{% endif %}"
                    hx-get="{% url 'phoxtail_agent:media_picker' %}"
                    hx-vals='{"tab": "menu"}'
                    hx-include="#phoxtail-media-picker-search, #phoxtail-media-picker-collection-id, #phoxtail-media-picker-page-id"
                    hx-target="#phoxtail-media-picker-results"
                    hx-swap="innerHTML">
                {% icon "menu" class="phoxtail-bar-btn-icon" %}
                Menu
            </button>
            <button type="button"
                    class="phoxtail-media-picker-tab {% if tab == 'images' %}phoxtail-media-picker-tab--active{% endif %}"
                    hx-get="{% url 'phoxtail_agent:media_picker' %}"
                    hx-vals='{"tab": "images"}'
                    hx-include="#phoxtail-media-picker-search, #phoxtail-media-picker-collection-id, #phoxtail-media-picker-page-id"
                    hx-target="#phoxtail-media-picker-results"
                    hx-swap="innerHTML">
                {% icon "image" class="phoxtail-bar-btn-icon" %}
                Images
            </button>
            <button type="button"
                    class="phoxtail-media-picker-tab {% if tab == 'videos' %}phoxtail-media-picker-tab--active{% endif %}"
                    hx-get="{% url 'phoxtail_agent:media_picker' %}"
                    hx-vals='{"tab": "videos"}'
                    hx-include="#phoxtail-media-picker-search, #phoxtail-media-picker-collection-id, #phoxtail-media-picker-page-id"
                    hx-target="#phoxtail-media-picker-results"
                    hx-swap="innerHTML">
                {% icon "videocam" class="phoxtail-bar-btn-icon" %}
                Videos
            </button>
            <button type="button"
                    class="phoxtail-media-picker-tab {% if tab == 'audio' %}phoxtail-media-picker-tab--active{% endif %}"
                    hx-get="{% url 'phoxtail_agent:media_picker' %}"
                    hx-vals='{"tab": "audio"}'
                    hx-include="#phoxtail-media-picker-search, #phoxtail-media-picker-collection-id, #phoxtail-media-picker-page-id"
                    hx-target="#phoxtail-media-picker-results"
                    hx-swap="innerHTML">
                {% icon "music_note" class="phoxtail-bar-btn-icon" %}
                Audio
            </button>
            <button type="button"
                    class="phoxtail-media-picker-tab {% if tab == 'documents' %}phoxtail-media-picker-tab--active{% endif %}"
                    hx-get="{% url 'phoxtail_agent:media_picker' %}"
                    hx-vals='{"tab": "documents"}'
                    hx-include="#phoxtail-media-picker-search, #phoxtail-media-picker-collection-id, #phoxtail-media-picker-page-id"
                    hx-target="#phoxtail-media-picker-results"
                    hx-swap="innerHTML">
                {% icon "draft" class="phoxtail-bar-btn-icon" %}
                Documents
            </button>
        </div>

        <input type="hidden"
               id="phoxtail-media-picker-page-id"
               name="page_id"
               value="{{ active_page_id|default:'' }}">

        <div class="phoxtail-media-picker-collection-wrap{% if tab == 'menu' %} phoxtail-bar-hidden{% endif %}" id="phoxtail-media-picker-collection-wrap">
            <input type="hidden"
                   id="phoxtail-media-picker-collection-id"
                   name="collection_id"
                   value="{{ collection_id }}">
            <button type="button"
                    class="phoxtail-media-picker-collection-btn{% if collection_id %} phoxtail-media-picker-collection-btn--active{% endif %}"
                    id="phoxtail-media-picker-collection-btn"
                    aria-haspopup="listbox"
                    aria-expanded="false">
                {% icon "folder_open" class="phoxtail-bar-btn-icon phoxtail-media-picker-collection-folder-icon" %}
                <span id="phoxtail-media-picker-collection-label">{{ selected_collection_name|default:"All collections" }}</span>
                {% icon "chevron_down" class="phoxtail-bar-btn-icon phoxtail-media-picker-collection-chevron" %}
            </button>
            <div class="phoxtail-media-picker-collection-panel"
                 id="phoxtail-media-picker-collection-panel"
                 aria-hidden="true">
                <div class="phoxtail-media-picker-collection-search-wrap">
                    {% icon "search" class="phoxtail-bar-btn-icon phoxtail-media-picker-collection-search-icon" %}
                    <input type="text"
                           id="phoxtail-media-picker-collection-search"
                           name="q"
                           class="phoxtail-media-picker-collection-search-input"
                           placeholder="Filter collections…"
                           autocomplete="off"
                           hx-get="{% url 'phoxtail_agent:collection_picker' %}"
                           hx-trigger="input changed delay:250ms, search"
                           hx-target="#phoxtail-media-picker-collection-list"
                           hx-include="this, #phoxtail-media-picker-collection-id"
                           hx-swap="innerHTML">
                </div>
                <ul class="phoxtail-media-picker-collection-list" id="phoxtail-media-picker-collection-list" role="listbox">
                    {% include "phoxtail_agent/partials/collection_picker_list.html" with is_search=False %}
                </ul>
            </div>
        </div>

        <div class="phoxtail-bar-search-wrap">
            <span class="phoxtail-bar-search-icon {% if query %}phoxtail-bar-hidden{% endif %}"
                  id="phoxtail-bar-search-icon">
                {% icon "search" class="phoxtail-bar-btn-icon" %}
            </span>
            <button type="button"
                    id="phoxtail-media-picker-clear"
                    class="phoxtail-bar-search-clear {% if not query %}phoxtail-bar-hidden{% endif %}"
                    title="Clear search"
                    aria-label="Clear search">
                {% icon "close" class="phoxtail-bar-btn-icon" %}
            </button>
            <input type="text"
                   id="phoxtail-media-picker-search"
                   name="q"
                   value="{{ query }}"
                   placeholder="Search…"
                   autocomplete="off"
                   class="phoxtail-bar-search-input"
                   hx-get="{% url 'phoxtail_agent:media_picker' %}"
                   hx-vals='{"tab": "{{ tab }}"}'
                   hx-include="#phoxtail-media-picker-collection-id, #phoxtail-media-picker-page-id"
                   hx-target="#phoxtail-media-picker-results"
                   hx-trigger="input changed delay:300ms"
                   hx-swap="innerHTML">
        </div>

        <div class="phoxtail-media-picker-results" id="phoxtail-media-picker-results">
            {% include "phoxtail_agent/partials/media_picker_results.html" %}
        </div>

        <div class="phoxtail-media-picker-lightbox"
             id="phoxtail-media-picker-lightbox"
             inert>
            <div class="phoxtail-media-picker-lightbox-inner">
                <div class="phoxtail-bar-panel-header">
                    <span class="phoxtail-bar-panel-title">Preview</span>
                    <button type="button"
                            id="phoxtail-media-picker-lightbox-close"
                            class="phoxtail-bar-panel-close"
                            title="Close preview">
                        {% icon "close" class="phoxtail-bar-btn-icon" %}
                    </button>
                </div>
                <div class="phoxtail-media-picker-lightbox-media">
                    <div class="phoxtail-media-picker-lightbox-img-wrap"
                         id="phoxtail-media-picker-lightbox-img-wrap">
                        <img class="phoxtail-media-picker-lightbox-img"
                             id="phoxtail-media-picker-lightbox-img"
                             src="" alt=""
                             decoding="async">
                        <div class="phoxtail-media-picker-lightbox-focal"
                             id="phoxtail-media-picker-lightbox-focal"
                             aria-hidden="true"></div>
                    </div>
                    <video class="phoxtail-media-picker-lightbox-video"
                           id="phoxtail-media-picker-lightbox-video"
                           controls
                           preload="metadata"
                           playsinline
                           style="display:none">
                    </video>
                    <audio class="phoxtail-media-picker-lightbox-audio"
                           id="phoxtail-media-picker-lightbox-audio"
                           controls
                           preload="metadata"
                           style="display:none">
                    </audio>
                    <div class="phoxtail-media-picker-lightbox-doc"
                         id="phoxtail-media-picker-lightbox-doc"
                         style="display:none">
                        {% icon "draft" class="phoxtail-media-picker-lightbox-doc-icon" %}
                        <span class="phoxtail-media-picker-lightbox-doc-ext" id="phoxtail-lbx-doc-ext"></span>
                    </div>
                </div>
                <div class="phoxtail-media-picker-lightbox-info">
                    <div class="phoxtail-media-picker-lightbox-badges" id="phoxtail-lbx-badges"></div>
                    <h3 class="phoxtail-media-picker-lightbox-title" id="phoxtail-lbx-title"></h3>
                    <div class="phoxtail-media-picker-lightbox-dims" id="phoxtail-lbx-dims"></div>
                    <div class="phoxtail-media-picker-lightbox-desc" id="phoxtail-lbx-desc"></div>
                    <div class="phoxtail-media-picker-lightbox-tags" id="phoxtail-lbx-tags"></div>
                    <div class="phoxtail-media-picker-lightbox-meta-row" id="phoxtail-lbx-meta"></div>
                </div>
                <div class="phoxtail-media-picker-lightbox-actions">
                    <button type="button"
                            class="phoxtail-media-picker-lightbox-close-btn"
                            id="phoxtail-media-picker-lightbox-dismiss">
                        {% icon "close" class="phoxtail-bar-btn-icon" %}
                        Close
                    </button>
                    <button type="button"
                            class="phoxtail-media-picker-lightbox-add-btn"
                            id="phoxtail-media-picker-lightbox-add">
                        {% icon "plus" class="phoxtail-bar-btn-icon" %}
                        Add to chat
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
(function () {
    var input  = document.getElementById('phoxtail-media-picker-search');
    var clear  = document.getElementById('phoxtail-media-picker-clear');
    var icon   = document.getElementById('phoxtail-bar-search-icon');
    if (!input) return;

    function syncVisibility() {
        var hasVal = input.value.length > 0;
        icon.classList.toggle('phoxtail-bar-hidden', hasVal);
        clear.classList.toggle('phoxtail-bar-hidden', !hasVal);
    }
    input.addEventListener('input', syncVisibility);
    if (clear) {
        clear.addEventListener('click', function () {
            input.value = '';
            syncVisibility();
            input.dispatchEvent(new Event('input', { bubbles: true }));
            input.focus();
        });
    }

    /* Tab switching — mark active immediately on click, sync search hx-vals */
    var colWrapEl = document.getElementById('phoxtail-media-picker-collection-wrap');
    var tabsEl = document.querySelector('.phoxtail-media-picker-tabs');

    /* Scroll a clipped tab into the strip rather than scrollIntoView, which
       would also scroll the drawer and the page behind it. */
    function revealTab(btn) {
        if (!tabsEl || !btn) return;
        var pad = 12;
        var left = btn.offsetLeft - pad;
        var right = btn.offsetLeft + btn.offsetWidth + pad;
        if (right > tabsEl.scrollLeft + tabsEl.clientWidth) {
            tabsEl.scrollLeft = right - tabsEl.clientWidth;
        } else if (left < tabsEl.scrollLeft) {
            tabsEl.scrollLeft = Math.max(0, left);
        }
    }
    revealTab(document.querySelector('.phoxtail-media-picker-tab--active'));

    document.querySelectorAll('.phoxtail-media-picker-tab').forEach(function (btn) {
        btn.addEventListener('click', function () {
            document.querySelectorAll('.phoxtail-media-picker-tab').forEach(function (b) {
                b.classList.remove('phoxtail-media-picker-tab--active');
            });
            btn.classList.add('phoxtail-media-picker-tab--active');
            // After the class swap: active weight changes both tabs' widths.
            revealTab(btn);
            var newTab = JSON.parse(btn.getAttribute('hx-vals') || '{}').tab;
            if (newTab && input) {
                input.setAttribute('hx-vals', JSON.stringify({ tab: newTab }));
                if (typeof htmx !== 'undefined') htmx.process(input);
            }
            if (colWrapEl) colWrapEl.classList.toggle('phoxtail-bar-hidden', newTab === 'menu');
            // Shared with phoxtail_bar.js's _getRememberedMediaTab — keep the key in sync.
            if (newTab) { try { localStorage.setItem('phoxtail.media_picker.tab', newTab); } catch (_) {} }
        });
    });

    /* ── Collection filter panel ── */
    var colWrap   = document.getElementById('phoxtail-media-picker-collection-wrap');
    var colBtn    = document.getElementById('phoxtail-media-picker-collection-btn');
    var colPanel  = document.getElementById('phoxtail-media-picker-collection-panel');
    var colLabel  = document.getElementById('phoxtail-media-picker-collection-label');
    var colSearch = document.getElementById('phoxtail-media-picker-collection-search');
    var colIdInput = document.getElementById('phoxtail-media-picker-collection-id');
    var _colPanelOpen = false;

    function openColPanel() {
        if (!colPanel || !colBtn) return;
        _colPanelOpen = true;
        colPanel.removeAttribute('aria-hidden');
        colBtn.setAttribute('aria-expanded', 'true');
        colBtn.classList.add('phoxtail-media-picker-collection-btn--open');
        if (colSearch) {
            var hadValue = colSearch.value.length > 0;
            colSearch.value = '';
            colSearch.focus();
            if (hadValue) {
                colSearch.dispatchEvent(new Event('input', { bubbles: true }));
            }
        }
    }

    function closeColPanel() {
        if (!colPanel || !colBtn) return;
        _colPanelOpen = false;
        colPanel.setAttribute('aria-hidden', 'true');
        colBtn.setAttribute('aria-expanded', 'false');
        colBtn.classList.remove('phoxtail-media-picker-collection-btn--open');
    }

    if (colBtn) {
        colBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (_colPanelOpen) { closeColPanel(); } else { openColPanel(); }
        });
    }
    if (colPanel) {
        colPanel.addEventListener('click', function (e) {
            var item = e.target.closest('.phoxtail-media-picker-collection-item');
            if (!item) return;
            e.stopPropagation();
            var colId   = item.getAttribute('data-collection-id') || '';
            var colName = colId ? item.textContent.trim() : 'All collections';

            if (colIdInput) colIdInput.value = colId;
            if (colLabel)  colLabel.textContent = colName;
            if (colBtn)    colBtn.classList.toggle('phoxtail-media-picker-collection-btn--active', !!colId);
            colPanel.querySelectorAll('.phoxtail-media-picker-collection-item').forEach(function (it) {
                it.classList.toggle('phoxtail-media-picker-collection-item--selected', it === item);
            });
            closeColPanel();

            var currentTab = 'images';
            var activeTabBtn = document.querySelector('.phoxtail-media-picker-tab--active');
            if (activeTabBtn) {
                var vals = JSON.parse(activeTabBtn.getAttribute('hx-vals') || '{}');
                if (vals.tab) currentTab = vals.tab;
            }
            var searchVal = (input && input.value) || '';
            if (typeof htmx !== 'undefined') {
                htmx.ajax('GET', '{% url "phoxtail_agent:media_picker" %}', {
                    target: '#phoxtail-media-picker-results',
                    swap: 'innerHTML',
                    values: { tab: currentTab, q: searchVal, collection_id: colId }
                });
            }
        });
    }
    document.addEventListener('mousedown', function (e) {
        if (!_colPanelOpen) return;
        if (colWrap && colWrap.contains(e.target)) return;
        closeColPanel();
    }, true);

    /* Close on mousedown outside drawer — but NOT when clicking inside the chatbot */
    setTimeout(function () {
        function onOutsideDown(e) {
            var drawer = document.querySelector('.phoxtail-media-picker-drawer');
            if (!drawer) { document.removeEventListener('mousedown', onOutsideDown); return; }
            if (drawer.contains(e.target)) return;
            var chatbot = document.getElementById('phoxtail-chatbot-drawer');
            if (chatbot && chatbot.contains(e.target)) return;
            if (document.body.hasAttribute('data-phoxtail-dragging')) return;
            function doClose() {
                closeModalLevel1();
                if (window.phoxtailChat) window.phoxtailChat.close();
            }
            // If target is draggable, defer: cancel close if drag starts, proceed on mouseup (click)
            if (e.target.closest && e.target.closest('[draggable="true"]')) {
                var _dragged = false;
                function _onDragStart() { _dragged = true; document.removeEventListener('mouseup', _onMouseUp); }
                function _onMouseUp() { document.removeEventListener('dragstart', _onDragStart); if (!_dragged) doClose(); }
                document.addEventListener('dragstart', _onDragStart, { once: true });
                document.addEventListener('mouseup', _onMouseUp, { once: true });
                return;
            }
            doClose();
        }
        document.addEventListener('mousedown', onOutsideDown);
    }, 0);

    /* ── Lightbox ── */
    var lb        = document.getElementById('phoxtail-media-picker-lightbox');
    var lbImgWrap = document.getElementById('phoxtail-media-picker-lightbox-img-wrap');
    var lbImg     = document.getElementById('phoxtail-media-picker-lightbox-img');
    var lbFocal   = document.getElementById('phoxtail-media-picker-lightbox-focal');
    var lbVideo   = document.getElementById('phoxtail-media-picker-lightbox-video');
    var lbAudio  = document.getElementById('phoxtail-media-picker-lightbox-audio');
    var lbDoc    = document.getElementById('phoxtail-media-picker-lightbox-doc');
    var lbDocExt = document.getElementById('phoxtail-lbx-doc-ext');
    var lbClose  = document.getElementById('phoxtail-media-picker-lightbox-close');
    var lbAddBtn     = document.getElementById('phoxtail-media-picker-lightbox-add');
    var lbDismissBtn = document.getElementById('phoxtail-media-picker-lightbox-dismiss');
    var _lbThumb = null;
    var _closeGen = 0;

    function esc(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
    function fmtBytes(n) {
        n = parseInt(n, 10);
        if (!n) return '';
        if (n < 1048576) return (n / 1024).toFixed(1) + ' KB';
        return (n / 1048576).toFixed(1) + ' MB';
    }
    function fmtDuration(s) {
        s = parseFloat(s);
        if (!s || isNaN(s)) return '';
        var m = Math.floor(s / 60), sec = Math.floor(s % 60);
        return m + ':' + (sec < 10 ? '0' : '') + sec;
    }

    function openLightbox(thumb) {
        if (!lb) return;
        _closeGen++;
        _lbThumb = thumb;

        var d = thumb.dataset;
        var isVideo    = d.mediaType === 'video';
        var isAudio    = d.mediaType === 'audio';
        var isDocument = d.mediaType === 'document';
        var ext = (d.mediaFileExtension || (d.mediaFileUrl || '').split('.').pop().split('?')[0]).toUpperCase();
        var size = fmtBytes(d.mediaFileSize);

        /* Show/hide img vs video vs audio vs document */
        if (lbImg)   lbImg.style.display   = (!isVideo && !isAudio && !isDocument) ? '' : 'none';
        if (lbVideo) lbVideo.style.display = isVideo ? '' : 'none';
        if (lbAudio) lbAudio.style.display = isAudio ? '' : 'none';
        if (lbDoc)   lbDoc.style.display   = isDocument ? '' : 'none';

        if (isVideo) {
            if (lbVideo) { lbVideo.src = d.mediaFileUrl || ''; lbVideo.load(); }
            if (lbImg)   { lbImg.src = ''; lbImg.alt = ''; }
            if (lbAudio) { lbAudio.pause(); lbAudio.src = ''; }
        } else if (isAudio) {
            if (lbAudio) { lbAudio.src = d.mediaFileUrl || ''; lbAudio.load(); }
            if (lbImg)   { lbImg.src = ''; lbImg.alt = ''; }
            if (lbVideo) { lbVideo.pause(); lbVideo.src = ''; }
        } else if (isDocument) {
            if (lbDocExt) lbDocExt.textContent = ext;
            if (lbImg)   { lbImg.src = ''; lbImg.alt = ''; }
            if (lbVideo) { lbVideo.pause(); lbVideo.src = ''; }
            if (lbAudio) { lbAudio.pause(); lbAudio.src = ''; }
        } else {
            if (lbImg) {
                lbImg.src = d.mediaLightboxUrl || d.mediaFileUrl || '';
                lbImg.alt = d.mediaTitle || '';
            }
            if (lbVideo) { lbVideo.pause(); lbVideo.src = ''; }
            if (lbAudio) { lbAudio.pause(); lbAudio.src = ''; }
        }

        /* Focal point overlay — only for images; percentages work because the
           lightbox uses a max- (fit) rendition that preserves aspect ratio. */
        var hasFocal = false;
        if (lbFocal) lbFocal.classList.remove('phoxtail-media-picker-lightbox-focal--pinned');
        if (!isVideo && !isAudio && !isDocument && lbFocal && lbImgWrap) {
            var fx = parseInt(d.mediaFocalX, 10);
            var fy = parseInt(d.mediaFocalY, 10);
            var fw = parseInt(d.mediaFocalW, 10);
            var fh = parseInt(d.mediaFocalH, 10);
            var ow = parseInt(d.mediaWidth,  10);
            var oh = parseInt(d.mediaHeight, 10);
            if (fx && fy && fw && fh && ow && oh) {
                hasFocal = true;
                lbFocal.style.left   = ((fx - fw / 2) / ow * 100).toFixed(3) + '%';
                lbFocal.style.top    = ((fy - fh / 2) / oh * 100).toFixed(3) + '%';
                lbFocal.style.width  = (fw / ow * 100).toFixed(3) + '%';
                lbFocal.style.height = (fh / oh * 100).toFixed(3) + '%';
            }
        }
        if (lbImgWrap) lbImgWrap.classList.toggle('phoxtail-media-picker-lightbox-img-wrap--has-focal', hasFocal);

        /* Badges: ID + format + size/duration */
        var badgesEl = document.getElementById('phoxtail-lbx-badges');
        if (badgesEl) {
            var dur = (isVideo || isAudio) ? fmtDuration(d.mediaDuration) : '';
            var extra = (isVideo || isAudio)
                ? (dur ? '<span class="phoxtail-lbx-badge">' + esc(dur) + '</span>' : '')
                : (size ? '<span class="phoxtail-lbx-badge">' + esc(size) + '</span>' : '');
            badgesEl.innerHTML =
                '<span class="phoxtail-lbx-badge phoxtail-lbx-badge--id">ID ' + esc(d.mediaId || '') + '</span>' +
                (ext ? '<span class="phoxtail-lbx-badge">' + esc(ext) + '</span>' : '') +
                extra +
                (hasFocal ? '<span class="phoxtail-lbx-badge phoxtail-lbx-badge--focal-toggle" id="phoxtail-lbx-focal-badge">focal point</span>' : '');
            if (hasFocal) {
                var focalBadge = document.getElementById('phoxtail-lbx-focal-badge');
                if (focalBadge && lbFocal) {
                    focalBadge.addEventListener('click', function () {
                        var pinned = lbFocal.classList.toggle('phoxtail-media-picker-lightbox-focal--pinned');
                        focalBadge.classList.toggle('phoxtail-lbx-badge--focal-active', pinned);
                    });
                }
            }
        }

        /* Title */
        var titleEl = document.getElementById('phoxtail-lbx-title');
        if (titleEl) titleEl.textContent = d.mediaTitle || '';

        /* Dimensions (images and videos only) */
        var dimsEl = document.getElementById('phoxtail-lbx-dims');
        if (dimsEl) dimsEl.textContent = (!isAudio && !isDocument && d.mediaWidth && d.mediaHeight)
            ? d.mediaWidth + ' × ' + d.mediaHeight + ' px' : '';

        /* Description / alt text (images only) */
        var descEl = document.getElementById('phoxtail-lbx-desc');
        if (descEl) {
            var desc = (d.mediaDescription || '').trim();
            descEl.textContent = desc;
            descEl.style.display = (desc && !isVideo && !isAudio && !isDocument) ? '' : 'none';
        }

        /* Tags */
        var tagsEl = document.getElementById('phoxtail-lbx-tags');
        if (tagsEl) {
            var rawTags = (d.mediaTags || '').trim();
            if (rawTags) {
                tagsEl.innerHTML = rawTags.split(',').map(function (t) {
                    t = t.trim();
                    return t ? '<span class="phoxtail-lbx-tag">' + esc(t) + '</span>' : '';
                }).join('');
                tagsEl.style.display = '';
            } else {
                tagsEl.innerHTML = '';
                tagsEl.style.display = 'none';
            }
        }

        /* Meta row: date + collection */
        var metaEl = document.getElementById('phoxtail-lbx-meta');
        if (metaEl) {
            var parts = [];
            if (d.mediaCreatedAt) parts.push('Uploaded ' + d.mediaCreatedAt);
            if (d.mediaCollection) parts.push(d.mediaCollection);
            metaEl.textContent = parts.join(' · ');
        }

        /* Open with animation */
        lb.removeAttribute('inert');
        requestAnimationFrame(function () {
            lb.classList.add('phoxtail-media-picker-lightbox--open');
        });
    }

    function closeLightbox() {
        if (!lb) return;
        var gen = ++_closeGen;
        lb.classList.remove('phoxtail-media-picker-lightbox--open');
        lb.setAttribute('inert', '');
        if (lbVideo) lbVideo.pause();
        if (lbAudio) lbAudio.pause();
        _lbThumb = null;
        setTimeout(function () {
            if (gen !== _closeGen) return;
            if (lbVideo) lbVideo.src = '';
            if (lbAudio) lbAudio.src = '';
            if (lbDoc)   lbDoc.style.display = 'none';
            if (lbFocal)  lbFocal.classList.remove('phoxtail-media-picker-lightbox-focal--pinned');
            if (lbImgWrap) lbImgWrap.classList.remove('phoxtail-media-picker-lightbox-img-wrap--has-focal');
        }, 260);
    }

    if (lbClose) {
        lbClose.addEventListener('click', function (e) { e.stopPropagation(); closeLightbox(); });
    }
    if (lbDismissBtn) {
        lbDismissBtn.addEventListener('click', function (e) { e.stopPropagation(); closeLightbox(); });
    }
    if (lb) {
        lb.addEventListener('click', function (e) {
            if (e.target === lb) { e.stopPropagation(); closeLightbox(); }
        });
    }
    if (lbAddBtn) {
        lbAddBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (!_lbThumb) return;
            var payload = window.phoxtailMediaPicker && window.phoxtailMediaPicker.payloadFromEl(_lbThumb);
            if (payload && window.phoxtailChat) {
                window.phoxtailChat.addContext(payload);
                lbAddBtn.classList.add('phoxtail-media-picker-lightbox-add-btn--added');
                setTimeout(function () {
                    lbAddBtn.classList.remove('phoxtail-media-picker-lightbox-add-btn--added');
                    closeLightbox();
                }, 600);
            }
        });
    }
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && lb && lb.classList.contains('phoxtail-media-picker-lightbox--open')) {
            e.stopPropagation();
            closeLightbox();
        }
    });

    /* Delegated click for images and videos — survives HTMX result swaps */
    var resultsEl = document.getElementById('phoxtail-media-picker-results');
    if (resultsEl) {
        resultsEl.addEventListener('click', function (e) {
            var addBtn = e.target.closest('.phoxtail-media-picker-add-btn');
            if (addBtn) return;
            var thumb = e.target.closest('[data-media-type="image"], [data-media-type="video"], [data-media-type="audio"], [data-media-type="document"]');
            if (!thumb) return;
            openLightbox(thumb);
        });
    }

})();
</script>