{# Plan 61/2b W3 — Jarvis slide-out dock.

   FAB (bottom-right) + drawer that wraps the existing per-machine
   chat (`<deep-chat>` + machine-chat.js). Reuses the
   `machinePresence` Alpine store and `/api/admin/overview/fleet-machines`
   to resolve the fleet's jarvis_id. Hidden silently when no Jarvis
   is bound.

   Keyboard:
     cmd+\ / ctrl+\  — toggle
     esc             — close (when input not focused)
   #}
<div x-data="jarvisDock()" x-init="mount()" x-cloak>

  {# Plan 62 — FAB removed. The dock now opens from the navbar button
     in base.html (next to the theme toggle) plus the footer button and
     the cmd+\\ shortcut. The dock's own state (jarvisId, presence,
     crossFleet) is still useful for the navbar trigger — it reads
     Alpine.store('jarvisDock') to render its presence dot.

     Drawer — always sidebar style, FLUSH WITH THE TOP EDGE (inset-y-0).
     420px on lg+ (main content gets padding-right via
     body.jarvis-dock-open CSS so the chat lives BESIDE the page);
     mobile falls back to full width overlay. #}
  <div
    :class="(open && jarvisId) ? 'block' : 'hidden'"
    class="fixed z-40 bg-ink-950 border-l border-white/[0.08] shadow-2xl inset-y-0 right-0 w-full lg:w-[420px]"
    @keydown.escape.window="onEscape($event)">
    {# Header — fixed 56px row at the top. z-10 + solid bg so chat content
       (which fills calc(100vh-56px) below) never bleeds up over it. #}
    <div class="absolute top-0 inset-x-0 z-10 h-14 px-4 bg-ink-950 border-b border-white/[0.06] flex items-center gap-3">
      <span class="w-7 h-7 rounded-md bg-cmdop-500/10 border border-cmdop-500/30 flex items-center justify-center">
        <i data-lucide="brain-circuit" class="w-4 h-4 text-cmdop-300"></i>
      </span>
      <div class="flex-1 min-w-0">
        <p class="text-[13px] font-semibold text-ink-100">Jarvis</p>
        <p class="text-[11px] text-ink-500 truncate"
           x-text="crossFleet
             ? ('Lives in fleet ' + (jarvisFleetName || '?'))
             : presence === 'online' ? 'Connected · {{ fleet.name }}'
             : presence === 'stale' ? 'Reconnecting…'
             : 'Offline'"></p>
      </div>
      <button type="button"
              @click="close()"
              class="p-1.5 rounded-md hover:bg-white/[0.04] text-ink-400 hover:text-ink-100"
              aria-label="Close dock">
        <i data-lucide="x" class="w-3.5 h-3.5"></i>
      </button>
    </div>

    {# Body: chat OR switch-fleet pane. The chat pane resolves
       per-machine-chat against `jarvisId`, but a cross-fleet machine_id
       is hidden by RLS on the chat endpoints — so we never mount it
       there. Instead we surface a clear handoff to the fleet switcher. #}
    <template x-if="!crossFleet">
      {# Explicit pixel height — `absolute top-14 bottom-0` kept
         computing as height:0 in production (suspect: x-if creates the
         child after the drawer fixed layout pass, and the absolute
         child doesn't re-resolve). calc(100vh - 56px) is independent
         of parent layout. margin-top pushes it BELOW the 56px header
         (it sits in normal flow from the drawer's top, not under it).
         relative so chat-pane (absolute inset-0) anchors to this rect. #}
      <div class="relative w-full overflow-hidden"
           style="height: calc(100vh - 56px); margin-top: 56px;">
        {% include 'admin/components/_jarvis_chat_pane.html' %}
      </div>
    </template>
    <template x-if="crossFleet">
      <div class="relative w-full overflow-auto p-5 space-y-4 text-[13px] text-ink-300"
           style="height: calc(100vh - 56px);">
        <div class="flex items-start gap-3">
          <span class="w-9 h-9 rounded-md bg-amber-400/10 border border-amber-400/30 flex items-center justify-center shrink-0">
            <i data-lucide="route" class="w-4 h-4 text-amber-300"></i>
          </span>
          <div>
            <p class="text-ink-100 font-medium">Jarvis is in another fleet</p>
            <p class="text-ink-400 mt-1">
              Your current fleet doesn't have a Jarvis. Switch to
              <span class="text-ink-200 font-mono"
                    x-text="jarvisFleetName || jarvisFleetId"></span>
              to open the chat.
            </p>
          </div>
        </div>
        <button type="button"
                @click="switchToJarvisFleet()"
                class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md bg-cmdop-500 hover:bg-cmdop-400 text-white text-[13px] font-medium transition-colors">
          <i data-lucide="arrow-right-left" class="w-3.5 h-3.5"></i>
          Switch to <span x-text="jarvisFleetName || jarvisFleetId"></span>
        </button>
        <p class="text-[11px] text-ink-500">
          Jarvis is server-side and bound to a single fleet at a time;
          chat actions run inside whichever fleet you're viewing.
        </p>
      </div>
    </template>
  </div>

</div>