{{-- Lightbox overlay para imagens do chat — singleton, inicializa uma vez --}}
<style>
#chat-img-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.9);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#chat-img-overlay.is-open { display: flex; }
#chat-img-bar {
    position: fixed;
    top: .85rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    z-index: 10000;
}
#chat-img-name {
    color: rgba(255,255,255,.55);
    font-size: .78rem;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#chat-img-wrapper {
    overflow: auto;
    max-width: 92vw;
    max-height: 84vh;
    cursor: zoom-in;
    position: relative;
    border-radius: 8px;
}
#chat-img-wrapper.zoom-active { cursor: grab; }
#chat-img-wrapper.grabbing    { cursor: grabbing !important; }
#chat-img-el {
    display: block;
    max-width: 100%;
    max-height: 84vh;
    border-radius: 8px;
    transform-origin: top left;
    transition: transform .1s ease;
    user-select: none;
    pointer-events: none;
}
#chat-img-hint {
    margin-top: .65rem;
    font-size: .7rem;
    color: rgba(255,255,255,.3);
    text-align: center;
    letter-spacing: .3px;
}
</style>

<div id="chat-img-overlay" role="dialog" aria-modal="true">
    <div id="chat-img-bar">
        <span id="chat-img-name"></span>
        <button id="chat-img-zoom-btn" class="saas-btn" style="padding:4px 10px;font-size:.75rem;" title="Alternar zoom">
            <i class="bi bi-zoom-in"></i>
            <span class="zoom-lbl">100%</span>
        </button>
        <a id="chat-img-dl" href="#" download class="saas-btn primary" style="padding:4px 10px;font-size:.75rem;" title="Baixar">
            <i class="bi bi-download"></i>
        </a>
        <button id="chat-img-close"
            style="background:none;border:none;color:rgba(255,255,255,.8);font-size:1.6rem;line-height:1;cursor:pointer;padding:2px 8px;"
            aria-label="Fechar">&times;</button>
    </div>
    <div id="chat-img-wrapper">
        <img id="chat-img-el" src="" alt="">
    </div>
    <div id="chat-img-hint">Scroll para zoom &nbsp;·&nbsp; Duplo clique para ampliar &nbsp;·&nbsp; ESC para fechar</div>
</div>

<script>
(function () {
    if (window.__chatImgViewerReady) return;
    window.__chatImgViewerReady = true;

    var overlay  = document.getElementById('chat-img-overlay');
    var wrapper  = document.getElementById('chat-img-wrapper');
    var img      = document.getElementById('chat-img-el');
    var nameEl   = document.getElementById('chat-img-name');
    var dlBtn    = document.getElementById('chat-img-dl');
    var zoomBtn  = document.getElementById('chat-img-zoom-btn');
    var zoomLbl  = zoomBtn ? zoomBtn.querySelector('.zoom-lbl') : null;
    var zoomIco  = zoomBtn ? zoomBtn.querySelector('i') : null;
    var closeBtn = document.getElementById('chat-img-close');

    var STEP = 25, MIN = 100, MAX = 300;
    var curZoom = 100, isDrag = false, sx, sy, sl, st;

    function setZoom(v) {
        curZoom = Math.min(MAX, Math.max(MIN, v));
        img.style.transform = 'scale(' + (curZoom / 100) + ')';
        if (zoomLbl) zoomLbl.textContent = curZoom + '%';
        if (curZoom > 100) {
            wrapper.classList.add('zoom-active');
            if (zoomIco) zoomIco.className = 'bi bi-zoom-out';
        } else {
            wrapper.classList.remove('zoom-active');
            if (zoomIco) zoomIco.className = 'bi bi-zoom-in';
            wrapper.scrollLeft = 0;
            wrapper.scrollTop  = 0;
        }
    }

    function toggle() { setZoom(curZoom === 100 ? 200 : 100); }

    if (zoomBtn) zoomBtn.addEventListener('click', toggle);

    if (wrapper) {
        wrapper.addEventListener('wheel', function (e) {
            e.preventDefault();
            var rect = wrapper.getBoundingClientRect();
            var rx = (wrapper.scrollLeft + e.clientX - rect.left) / (wrapper.scrollWidth  || 1);
            var ry = (wrapper.scrollTop  + e.clientY - rect.top)  / (wrapper.scrollHeight || 1);
            var prev = curZoom;
            setZoom(curZoom + (e.deltaY < 0 ? STEP : -STEP));
            if (curZoom !== prev) {
                requestAnimationFrame(function () {
                    wrapper.scrollLeft = Math.max(0, rx * wrapper.scrollWidth  - (e.clientX - rect.left));
                    wrapper.scrollTop  = Math.max(0, ry * wrapper.scrollHeight - (e.clientY - rect.top));
                });
            }
        }, { passive: false });

        wrapper.addEventListener('mousedown', function (e) {
            if (curZoom <= 100) return;
            isDrag = true;
            wrapper.classList.add('grabbing');
            sx = e.pageX - wrapper.offsetLeft;
            sy = e.pageY - wrapper.offsetTop;
            sl = wrapper.scrollLeft;
            st = wrapper.scrollTop;
        });
        wrapper.addEventListener('mouseup',    function () { isDrag = false; wrapper.classList.remove('grabbing'); });
        wrapper.addEventListener('mouseleave', function () { isDrag = false; wrapper.classList.remove('grabbing'); });
        wrapper.addEventListener('mousemove',  function (e) {
            if (!isDrag || curZoom <= 100) return;
            e.preventDefault();
            wrapper.scrollLeft = sl - (e.pageX - wrapper.offsetLeft - sx) * 1.5;
            wrapper.scrollTop  = st - (e.pageY - wrapper.offsetTop  - sy) * 1.5;
        });
        wrapper.addEventListener('dblclick', toggle);
    }

    function close() {
        overlay.classList.remove('is-open');
        document.body.style.overflow = '';
        setZoom(100);
        img.src = '';
    }

    if (closeBtn) closeBtn.addEventListener('click', close);
    if (overlay)  overlay.addEventListener('click', function (e) {
        if (e.target === overlay) close();
    });

    document.addEventListener('keydown', function (e) {
        if (!overlay.classList.contains('is-open')) return;
        if (e.key === 'Escape') { e.preventDefault(); close(); }
        else if (e.key === '+' || e.key === '=') { e.preventDefault(); setZoom(curZoom + STEP); }
        else if (e.key === '-') { e.preventDefault(); setZoom(curZoom - STEP); }
        else if (e.key === '0') { e.preventDefault(); setZoom(100); }
    });

    window.openChatImgViewer = function (url, name) {
        img.src = url;
        img.alt = name || '';
        if (nameEl) nameEl.textContent = name || '';
        if (dlBtn)  { dlBtn.href = url; dlBtn.download = name || ''; }
        setZoom(100);
        overlay.classList.add('is-open');
        document.body.style.overflow = 'hidden';
    };

    document.addEventListener('click', function (e) {
        var t = e.target.closest('.chat-img-thumb');
        if (!t) return;
        e.preventDefault();
        window.openChatImgViewer(t.dataset.src, t.dataset.name || '');
    });
})();
</script>