{{-- Outer x-data uses single quotes so @json(route()) can use double quotes. Do not use single-quoted JS strings here (e.g. use "function" not 'function') or the attribute breaks. --}}
<div
    x-data='{
        open: false,
        opExpanded: {},
        refreshTimer: null,
        async refreshActivityPanel() {
            try {
                const res = await fetch(@json(route('activity.live')), { headers: { "X-Requested-With": "XMLHttpRequest" } });
                if (!res.ok) return;
                const body = await res.json();
                if (body?.html && this.$refs.activityPanelContent) {
                    this.$refs.activityPanelContent.innerHTML = body.html;
                    this.opExpanded = {};
                    if (window.Alpine && typeof Alpine.initTree === "function") {
                        Alpine.initTree(this.$refs.activityPanelContent);
                    }
                }
            } catch (e) {}
        },
        scheduleRefresh() {
            this.refreshTimer = setTimeout(async () => {
                await this.refreshActivityPanel();
                this.scheduleRefresh();
            }, (18 + Math.floor(Math.random() * 15)) * 1000);
        },
        init() {
            this.scheduleRefresh();
        },
    }'
    class="fixed right-4 top-4 z-50 lg:hidden"
>
    <button @click="open = !open" type="button" class="h-10 px-4 rounded-xl bg-[#111111] text-white text-sm font-medium">
        Activity Panel
    </button>

    <div
        x-show="open"
        @click.outside="open = false"
        x-transition
        class="mt-3 flex h-[min(36rem,calc(100vh-5.5rem))] w-[340px] max-w-[92vw] max-h-[calc(100vh-5.5rem)] min-h-0 flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#111111] text-white shadow-xl"
    >
        <div class="shrink-0 border-b border-white/10 px-4 py-2.5 flex items-center justify-between gap-2">
            <h2 class="text-xs font-semibold uppercase tracking-wide text-white/80">Activity</h2>
            <span class="text-[10px] text-white/45 font-medium">Live</span>
        </div>
        @include('partials.activity-pendulum-balls')
        <div class="min-h-0 flex-1 overflow-y-auto overscroll-y-contain p-4 [scrollbar-gutter:stable]" x-ref="activityPanelContent">
            @include('partials.activity-panel-inner')
        </div>
    </div>
</div>