{% comment %}
Self-contained floating scroll button for pages that do NOT extend base.html
(index, agent login, agent portal). Jumps to the bottom of the page, then flips
to a scroll-to-top arrow once the bottom is reached. Hidden when the page is too
short to scroll. Uses a fixed accent colour so it works without theme variables.
{% endcomment %}
<style>
    .scroll-fab {
        position: fixed;
        right: 1.25rem;
        bottom: 1.25rem;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        display: none;
        place-items: center;
        background: #2563eb;
        border: 1px solid #2563eb;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
        z-index: 9999;
    }
    .scroll-fab.is-visible { display: grid; }
</style>
<button id="scroll-fab" type="button" class="scroll-fab" aria-label="Scroll to bottom" title="Scroll">&darr;</button>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var btn = document.getElementById('scroll-fab');
        if (!btn) return;
        function scrollable() {
            return document.documentElement.scrollHeight > window.innerHeight + 40;
        }
        function atBottom() {
            return (window.innerHeight + window.scrollY) >= (document.documentElement.scrollHeight - 80);
        }
        function sync() {
            if (!scrollable()) { btn.classList.remove('is-visible'); return; }
            btn.classList.add('is-visible');
            if (atBottom()) {
                btn.innerHTML = '&uarr;';
                btn.dataset.dir = 'up';
                btn.setAttribute('aria-label', 'Scroll to top');
            } else {
                btn.innerHTML = '&darr;';
                btn.dataset.dir = 'down';
                btn.setAttribute('aria-label', 'Scroll to bottom');
            }
        }
        btn.addEventListener('click', function () {
            var top = btn.dataset.dir === 'up' ? 0 : document.documentElement.scrollHeight;
            window.scrollTo({ top: top, behavior: 'smooth' });
        });
        window.addEventListener('scroll', sync, { passive: true });
        window.addEventListener('resize', sync, { passive: true });
        sync();
    });
</script>