{{-- Alpine open/close + tab state live here — static HTML, never re-rendered by Livewire.
     tab must be in this stable ancestor so Livewire morphdom patches never break the Alpine scope. --}}
<div x-data="{ open: false, tab: 'jobs' }"
     @ck-console-open.window="open = true"
     @ck-console-close.window="open = false">

    {{-- Backdrop --}}
    <div x-show="open"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="open = false"
         style="position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998;display:none;"></div>

    {{-- Sliding panel frame — hidden by default before Alpine boots --}}
    <div style="position:fixed;top:0;right:0;height:100vh;width:780px;max-width:100vw;background:#0f172a;z-index:9999;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;"
         :style="{ transform: open ? 'translateX(0)' : 'translateX(100%)' }">

        <livewire:console-panel />

    </div>

</div>