@php
    $ticket = $this->ticket;
@endphp

{{--
    Conversation pane internals = main column + right context column.

    Strict horizontal flex, no responsive breakpoints — the workspace
    is desktop-first. Every column declares its width discipline:
      - root has `flex-1 min-h-0 min-w-0 overflow-hidden` so long
        subjects/messages don't expand the page, AND so the height
        chain stays flex-driven (not percentage-driven). `flex-1`
        plus `align-items: stretch` (default) makes the root fill
        its flex-container parent in both axes without relying on
        `h-full` propagating through every ancestor.
      - main column has `flex-1 min-w-0 min-h-0` so it shrinks
        correctly in both axes.
      - right context column has `w-[17rem] shrink-0` so it never
        gets squashed by long content next to it.

    Inside main:
      - header (shrink-0) stays pinned at top.
      - timeline (flex-1 min-h-0 overflow-y-auto) scrolls.
      - composer (shrink-0) stays pinned at bottom.

    Dark mode: explicit `dark:bg-zinc-950` on the root so the pane is
    dark even before the inner header / timeline / composer paint
    their own backgrounds, and so any gap during streaming render
    doesn't flash white.
--}}
<div
    class="flex h-full min-h-0 min-w-0 flex-1 overflow-hidden bg-white dark:bg-zinc-950"
    data-test="conversation-component"
    wire:init="loadShopifyImages"
    x-data="{
        scrollTimelineToBottom() {
            this.$nextTick(() => {
                const el = this.$refs.timeline;
                if (el) { el.scrollTop = el.scrollHeight; }
            });
        }
    }"
    x-init="scrollTimelineToBottom()"
    @scroll-timeline-to-bottom.window="scrollTimelineToBottom()"
>
    @if ($ticket === null)
        {{-- Empty / not-found state. Fills the whole pane. --}}
        <div class="flex flex-1 items-center justify-center bg-white p-8 dark:bg-zinc-950" data-test="conversation-empty">
            <div class="text-center">
                <flux:icon.envelope class="mx-auto size-12 text-zinc-300 dark:text-zinc-700" />
                <flux:heading class="mt-4">{{ __('Ticket not available') }}</flux:heading>
                <flux:subheading>
                    {{ __('The ticket may have been deleted, reassigned to a different workspace, or never existed.') }}
                </flux:subheading>
            </div>
        </div>
    @else
        {{-- ─── Main conversation column ──────────────────────── --}}
        {{-- Header / timeline / composer are SIBLINGS here. Only the
             timeline gets `flex-1 overflow-y-auto`; header + composer
             stay `shrink-0`. The combination of `h-full` (explicit
             height from parent) + `min-h-0` (allow flex-1 child to
             shrink) + `flex-col overflow-hidden` is what makes the
             timeline the actual scroll container instead of the page
             body. --}}
        <div
            class="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-white dark:bg-zinc-950"
            data-test="conversation-main"
        >
            {{-- Header — compact: tighter padding, smaller gap between
                 the subject and the badge row. --}}
            <div
                class="flex shrink-0 flex-col gap-1 border-b border-zinc-200 bg-white px-5 py-2.5 dark:border-zinc-800 dark:bg-zinc-900"
                data-test="conversation-header"
            >
                <flux:heading size="lg" data-test="ticket-subject">{{ $ticket->subject }}</flux:heading>
                <div class="flex flex-wrap items-center gap-1.5">
                    {{-- Status dropdown — clickable badge that lets
                         agents change ticket status at any time.
                         Each option carries the literal status string
                         in its wire:click; server-side validation
                         enforces the enum. --}}
                    <flux:dropdown align="start" data-test="status-dropdown">
                        <flux:button variant="ghost" size="sm" icon:trailing="chevron-down" data-test="status-trigger">
                            <flux:badge
                                size="sm"
                                :color="match ($ticket->status) {
                                    \App\Enums\TicketStatus::Open => 'sky',
                                    \App\Enums\TicketStatus::Pending => 'amber',
                                    \App\Enums\TicketStatus::Resolved => 'lime',
                                    \App\Enums\TicketStatus::Closed => 'zinc',
                                }"
                                data-test="ticket-status"
                            >
                                {{ ucfirst($ticket->status->value) }}
                            </flux:badge>
                        </flux:button>
                        <flux:menu>
                            @foreach (\App\Enums\TicketStatus::cases() as $status)
                                <flux:menu.item
                                    wire:click="setTicketStatus('{{ $status->value }}')"
                                    :icon="$ticket->status === $status ? 'check' : null"
                                    data-test="status-option"
                                    data-status="{{ $status->value }}"
                                >
                                    {{ ucfirst($status->value) }}
                                </flux:menu.item>
                            @endforeach
                        </flux:menu>
                    </flux:dropdown>

                    <flux:badge
                        size="sm"
                        :color="match ($ticket->priority) {
                            \App\Enums\TicketPriority::Urgent => 'red',
                            \App\Enums\TicketPriority::High => 'orange',
                            \App\Enums\TicketPriority::Normal => 'zinc',
                            \App\Enums\TicketPriority::Low => 'zinc',
                        }"
                        data-test="ticket-priority"
                    >
                        {{ ucfirst($ticket->priority->value) }}
                    </flux:badge>
                    <flux:badge size="sm" color="zinc" data-test="ticket-source">
                        {{ ucfirst($ticket->source->value) }}
                    </flux:badge>
                    @if ($ticket->store)
                        <flux:badge size="sm" color="zinc">{{ $ticket->store->name }}</flux:badge>
                    @endif

                    {{-- Assignee dropdown — sits alongside the status
                         dropdown. Each menu entry's wire:click
                         hardcodes the user id (or null for unassign),
                         so the server only ever sees a primitive.
                         Membership is verified server-side. --}}
                    <flux:dropdown align="start" data-test="assignee-dropdown">
                        <flux:button variant="ghost" size="sm" icon:trailing="chevron-down" data-test="assignee-trigger">
                            <flux:badge
                                size="sm"
                                :color="$ticket->assignedUser ? 'sky' : 'zinc'"
                                data-test="ticket-assignee"
                            >
                                @if ($ticket->assignedUser)
                                    {{ $ticket->assignedUser->name }}
                                @else
                                    {{ __('Unassigned') }}
                                @endif
                            </flux:badge>
                        </flux:button>
                        <flux:menu class="w-56">
                            @if ($ticket->assigned_user_id !== auth()->id())
                                <flux:menu.item
                                    wire:click="setAssignedUser({{ auth()->id() }})"
                                    icon="user"
                                    data-test="assignee-assign-to-me"
                                >
                                    {{ __('Assign to me') }}
                                </flux:menu.item>
                            @endif

                            @if ($ticket->assigned_user_id !== null)
                                <flux:menu.item
                                    wire:click="setAssignedUser(null)"
                                    icon="x-mark"
                                    data-test="assignee-unassign"
                                >
                                    {{ __('Unassign') }}
                                </flux:menu.item>
                            @endif

                            <flux:menu.separator />

                            @foreach ($this->availableAssignees as $member)
                                <flux:menu.item
                                    wire:click="setAssignedUser({{ $member->id }})"
                                    :icon="$ticket->assigned_user_id === $member->id ? 'check' : null"
                                    data-test="assignee-option"
                                    data-user-id="{{ $member->id }}"
                                >
                                    {{ $member->name }}
                                </flux:menu.item>
                            @endforeach
                        </flux:menu>
                    </flux:dropdown>
                </div>
            </div>

            @php $attachments = $this->ticketAttachments; @endphp
            @if ($attachments->isNotEmpty())
                @php
                    // Build a JS-ready list of attachments for
                    // the Alpine lightbox. Names are
                    // intentionally short — `n`, `m`, `s`, `i`,
                    // `p`, `d`, `c` — to keep the data
                    // attribute small while still readable.
                    $attachmentJs = $attachments->map(fn ($a) => [
                        'i' => $a->id,
                        'n' => $a->original_filename,
                        'm' => $a->mime_type,
                        's' => $a->humanSize(),
                        'p' => route('attachments.show', ['attachment' => $a->id]),
                        'd' => route('attachments.show', ['attachment' => $a->id, 'disposition' => 'attachment']),
                        'isImage' => $a->isImage(),
                        'isPdf' => $a->isPdf(),
                        'c' => (bool) $a->uploaded_by_customer,
                    ])->values()->all();
                @endphp
                {{-- Attachment strip + lightbox modal.

                     Strip: thumbnail row between header and
                     timeline. Click a thumbnail → opens the
                     lightbox at that index. Linear-style UX:
                     contained, not page-replacing.

                     Lightbox: full-viewport modal with
                     prev/next arrows (only when a sibling
                     exists), download button, optional
                     open-in-new-tab, close on X / Escape /
                     backdrop click.

                     Keyboard nav (only active when the modal
                     is open — guarded by `lightboxOpen` —
                     so background hotkeys aren't hijacked):
                       Left  → previous attachment
                       Right → next attachment
                       Esc   → close

                     The whole thing lives in one Alpine
                     scope so the strip + modal share `index`
                     state — clicking a different thumbnail
                     re-points the open modal too. --}}
                <div
                    x-data='{
                        items: @json($attachmentJs),
                        index: 0,
                        lightboxOpen: false,
                        open(i) {
                            this.index = Math.max(0, Math.min(this.items.length - 1, i));
                            this.lightboxOpen = true;
                        },
                        close() { this.lightboxOpen = false; },
                        prev() { if (this.hasPrev()) this.index--; },
                        next() { if (this.hasNext()) this.index++; },
                        hasPrev() { return this.index > 0; },
                        hasNext() { return this.index < this.items.length - 1; },
                        active() { return this.items[this.index] || null; },
                        onKey(e) {
                            if (!this.lightboxOpen) return;
                            if (e.key === "Escape") { this.close(); return; }
                            if (e.key === "ArrowLeft") { this.prev(); return; }
                            if (e.key === "ArrowRight") { this.next(); return; }
                        },
                    }'
                    x-on:keydown.window="onKey($event)"
                    class="shrink-0 border-b border-zinc-200 bg-zinc-50 px-6 py-3 dark:border-zinc-800 dark:bg-zinc-900"
                    data-test="ticket-attachment-viewer"
                    data-attachment-count="{{ $attachments->count() }}"
                >
                    {{-- Strip header --}}
                    <div class="mb-2 flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-300">
                        <flux:icon.paper-clip class="size-4" />
                        <span data-test="attachment-count-label">{{ trans_choice('{1} 1 attachment|[2,*] :count attachments', $attachments->count(), ['count' => $attachments->count()]) }}</span>
                    </div>

                    {{-- Thumbnail strip. Clicking a card
                         opens the lightbox at its index. --}}
                    <div class="flex flex-wrap gap-2" data-test="attachment-strip">
                        @foreach ($attachments as $i => $attachment)
                            @php
                                $previewUrl = route('attachments.show', ['attachment' => $attachment->id]);
                                $isImage = $attachment->isImage();
                                $isPdf = $attachment->isPdf();
                            @endphp
                            <button
                                type="button"
                                wire:key="attachment-thumb-{{ $attachment->id }}"
                                x-on:click="open({{ $i }})"
                                class="group flex items-center gap-2 rounded-md border border-zinc-200 bg-white px-2.5 py-1.5 text-left text-xs font-medium text-zinc-700 shadow-sm transition hover:border-zinc-400 hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200 dark:hover:border-zinc-600 dark:hover:bg-zinc-900"
                                data-test="attachment-thumbnail"
                                data-attachment-id="{{ $attachment->id }}"
                                data-attachment-index="{{ $i }}"
                                data-attachment-mime="{{ $attachment->mime_type }}"
                                data-has-prev="{{ $i > 0 ? 'true' : 'false' }}"
                                data-has-next="{{ $i < $attachments->count() - 1 ? 'true' : 'false' }}"
                                title="{{ $attachment->original_filename }}"
                            >
                                <div class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
                                    @if ($isImage)
                                        <img
                                            src="{{ $previewUrl }}"
                                            alt=""
                                            class="size-full object-cover"
                                            loading="lazy"
                                            data-test="attachment-thumb-image"
                                        />
                                    @elseif ($isPdf)
                                        <span class="text-[8px] font-bold text-rose-600 dark:text-rose-300" data-test="attachment-thumb-pdf">PDF</span>
                                    @else
                                        <flux:icon.paper-clip class="size-4 text-zinc-500" data-test="attachment-thumb-other" />
                                    @endif
                                </div>
                                <div class="flex min-w-0 flex-col leading-tight">
                                    <span class="max-w-[12rem] truncate text-zinc-900 dark:text-zinc-100" data-test="attachment-name">{{ $attachment->original_filename }}</span>
                                    <span class="text-[10px] font-normal text-zinc-500 dark:text-zinc-400" data-test="attachment-meta">{{ $attachment->humanSize() }}</span>
                                </div>
                            </button>
                        @endforeach
                    </div>

                    {{-- Lightbox modal. Rendered once at the
                         end of the strip; `x-show="lightboxOpen"`
                         keeps the DOM tree but hides it until
                         the operator clicks a thumbnail.

                         Backdrop click closes (x-on:click on
                         the outer); the inner card stops
                         propagation so clicks inside the modal
                         don't dismiss it. --}}
                    <div
                        x-show="lightboxOpen"
                        x-cloak
                        x-transition.opacity
                        x-on:click="close()"
                        class="fixed inset-0 z-50 flex items-center justify-center bg-zinc-900/80 p-4 backdrop-blur-sm"
                        data-test="attachment-lightbox"
                        x-bind:data-open="lightboxOpen ? 'true' : 'false'"
                    >
                        {{-- Prev arrow — anchored left, only when
                             a sibling exists. --}}
                        <button
                            type="button"
                            x-show="hasPrev()"
                            x-on:click.stop="prev()"
                            class="absolute left-4 top-1/2 -translate-y-1/2 inline-flex size-10 items-center justify-center rounded-full bg-white/90 text-zinc-800 shadow-lg transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
                            data-test="attachment-prev"
                            aria-label="{{ __('Previous attachment') }}"
                        >
                            <flux:icon.chevron-left class="size-6" />
                        </button>

                        {{-- Next arrow — anchored right. --}}
                        <button
                            type="button"
                            x-show="hasNext()"
                            x-on:click.stop="next()"
                            class="absolute right-4 top-1/2 -translate-y-1/2 inline-flex size-10 items-center justify-center rounded-full bg-white/90 text-zinc-800 shadow-lg transition hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
                            data-test="attachment-next"
                            aria-label="{{ __('Next attachment') }}"
                        >
                            <flux:icon.chevron-right class="size-6" />
                        </button>

                        {{-- Modal card. Stops click
                             propagation so clicks inside
                             don't trigger the backdrop's
                             close handler. --}}
                        <div
                            x-on:click.stop
                            class="relative flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-lg bg-white shadow-2xl dark:bg-zinc-950"
                            data-test="attachment-lightbox-card"
                        >
                            {{-- Header: filename + meta + close --}}
                            <div class="flex items-center justify-between gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
                                <div class="min-w-0 flex-1">
                                    <div class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100" x-text="active()?.n || ''" data-test="lightbox-name"></div>
                                    <div class="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400">
                                        <span class="font-mono" x-text="active()?.m || ''"></span>
                                        <span>·</span>
                                        <span x-text="active()?.s || ''"></span>
                                        <template x-if="items.length > 1">
                                            <span>
                                                <span>·</span>
                                                <span data-test="lightbox-position">
                                                    <span x-text="index + 1"></span> / <span x-text="items.length"></span>
                                                </span>
                                            </span>
                                        </template>
                                    </div>
                                </div>
                                <button
                                    type="button"
                                    x-on:click="close()"
                                    class="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
                                    data-test="attachment-lightbox-close"
                                    aria-label="{{ __('Close attachment viewer') }}"
                                >
                                    <flux:icon.x-mark class="size-5" />
                                </button>
                            </div>

                            {{-- Preview body. --}}
                            <div class="flex min-h-0 flex-1 items-center justify-center overflow-auto bg-zinc-50 p-4 dark:bg-zinc-900">
                                <template x-if="active()?.isImage">
                                    <img
                                        :src="active()?.p"
                                        :alt="active()?.n"
                                        class="max-h-[70vh] max-w-full rounded object-contain shadow-md"
                                        data-test="lightbox-preview-image"
                                    />
                                </template>
                                <template x-if="active()?.isPdf">
                                    <div class="flex flex-col items-center gap-3 px-6 py-12 text-center" data-test="lightbox-preview-pdf">
                                        <div class="flex size-20 items-center justify-center rounded-md bg-rose-50 text-rose-600 dark:bg-rose-950/40 dark:text-rose-300">
                                            <flux:icon.document class="size-12" />
                                        </div>
                                        <div class="text-sm font-medium text-zinc-700 dark:text-zinc-200">{{ __('PDF preview not supported inline.') }}</div>
                                        <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ __('Open in a new tab or download to view.') }}</div>
                                    </div>
                                </template>
                                <template x-if="active() && !active().isImage && !active().isPdf">
                                    <div class="flex flex-col items-center gap-3 px-6 py-12 text-center" data-test="lightbox-preview-other">
                                        <div class="flex size-20 items-center justify-center rounded-md bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
                                            <flux:icon.paper-clip class="size-12" />
                                        </div>
                                        <div class="text-sm font-medium text-zinc-700 dark:text-zinc-200">{{ __('No inline preview for this file type.') }}</div>
                                        <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ __('Download to view.') }}</div>
                                    </div>
                                </template>
                            </div>

                            {{-- Footer: action buttons. --}}
                            <div class="flex shrink-0 items-center justify-end gap-2 border-t border-zinc-200 px-5 py-3 dark:border-zinc-800">
                                <a
                                    :href="active()?.p"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="inline-flex items-center gap-1.5 rounded-md border border-zinc-300 bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 shadow-sm transition hover:bg-zinc-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800"
                                    data-test="attachment-open"
                                >
                                    <flux:icon.arrow-top-right-on-square class="size-3.5" />
                                    {{ __('Open in new tab') }}
                                </a>
                                <a
                                    :href="active()?.d"
                                    class="inline-flex items-center gap-1.5 rounded-md bg-zinc-900 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-zinc-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white"
                                    data-test="attachment-download"
                                >
                                    <flux:icon.arrow-down-tray class="size-3.5" />
                                    {{ __('Download') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Timeline — only this region scrolls.
                 `x-ref="timeline"` is the target for the
                 scroll-to-bottom helper on the root component.
                 Background matches the conversation main column
                 (`bg-white dark:bg-zinc-950`) so the scrolling
                 surface reads as a single panel rather than a
                 lighter band between header and composer. --}}
            <div
                x-ref="timeline"
                class="min-h-0 flex-1 overflow-y-auto bg-white px-6 py-5 dark:bg-zinc-950"
                data-test="ticket-timeline"
            >
                <div class="flex flex-col gap-3">
                    @forelse ($this->timelineMessages as $message)
                        @php
                            $isInternal = $message->direction === \App\Enums\MessageDirection::Internal;
                            $isInbound = $message->direction === \App\Enums\MessageDirection::Inbound;
                            $isOutbound = $message->direction === \App\Enums\MessageDirection::Outbound;
                            $deliveryState = $isOutbound ? $message->deliveryState() : null;
                        @endphp
                        <div
                            class="rounded-xl border p-4 {{ $isInternal ? 'border-amber-200 bg-amber-50 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-zinc-100' : ($isInbound ? 'border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100' : 'border-blue-200 bg-blue-50 dark:border-blue-900/40 dark:bg-blue-950/20 dark:text-zinc-100') }}"
                            data-test="message"
                            data-message-id="{{ $message->id }}"
                            data-direction="{{ $message->direction->value }}"
                            data-delivery-state="{{ $deliveryState?->value }}"
                        >
                            <div class="flex flex-wrap items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400">
                                <span class="font-medium text-zinc-700 dark:text-zinc-300">
                                    @if ($isInbound)
                                        {{ $ticket->customer?->name ?: $ticket->customer?->email ?: __('Customer') }}
                                    @else
                                        {{ $message->author?->name ?? __('System') }}
                                    @endif
                                </span>
                                <span>·</span>
                                <flux:badge size="sm" :color="$isInternal ? 'amber' : ($isInbound ? 'sky' : 'zinc')">
                                    {{ ucfirst($message->direction->value) }}
                                </flux:badge>
                                {{-- Delivery-state badge for outbound rows.
                                     Operator-only signal: tells the agent
                                     whether the reply actually reached the
                                     customer (sent), is awaiting retry
                                     (queued), or permanently failed
                                     (failed). Never rendered for inbound
                                     / internal messages. The 'sent' badge
                                     is intentionally rendered too — gives
                                     a positive confirmation in the
                                     timeline. --}}
                                @if ($deliveryState !== null)
                                    <flux:badge
                                        size="sm"
                                        :color="$deliveryState->badgeColor()"
                                        data-test="message-delivery-state"
                                        data-delivery-state="{{ $deliveryState->value }}"
                                    >
                                        {{ $deliveryState->label() }}
                                    </flux:badge>
                                @endif
                                <span>·</span>
                                <span>{{ $message->created_at->diffForHumans() }}</span>
                            </div>
                            {{-- Preserve paragraph breaks safely:
                                 `e()` escapes any HTML the body
                                 contains, then `nl2br()` adds <br>
                                 tags after each newline. This is
                                 robust against CSS resets that can
                                 trip up `whitespace-pre-wrap`, and
                                 applies the same way to internal
                                 notes, outbound replies, and
                                 future inbound messages. --}}
                            <div class="mt-3 break-words text-sm text-zinc-900 dark:text-zinc-100" data-test="message-body">{!! nl2br(e($message->body)) !!}</div>
                        </div>
                    @empty
                        <div class="rounded-xl border border-dashed border-zinc-300 bg-white p-8 text-center text-sm text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400" data-test="timeline-empty">
                            {{ __('No messages on this ticket yet. Add an internal note below.') }}
                        </div>
                    @endforelse
                </div>
            </div>

            {{-- Composer — pinned to bottom of main column. The
                 composer sits flush against the dark page bg so the
                 timeline overlap looks intentional, not like a card
                 floating in a brighter band. --}}
            <div class="shrink-0 border-t border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950" data-test="composer">
                <div class="flex items-center gap-2 border-b border-zinc-200 px-4 pt-2 dark:border-zinc-800">
                    @php
                        $tabBase = 'flex items-center gap-1.5 px-3 py-2 text-sm font-medium border-b-2 -mb-px transition';
                        $tabActive = 'border-zinc-900 text-zinc-900 dark:border-zinc-100 dark:text-zinc-100';
                        $tabIdle = 'border-transparent text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200';
                    @endphp
                    <button
                        type="button"
                        wire:click="$set('composerMode', 'internal')"
                        class="{{ $tabBase }} {{ $composerMode === 'internal' ? $tabActive : $tabIdle }}"
                        data-test="composer-mode-internal"
                        data-active="{{ $composerMode === 'internal' ? 'true' : 'false' }}"
                    >
                        <flux:icon.lock-closed class="size-4" />
                        {{ __('Internal note') }}
                    </button>
                    <button
                        type="button"
                        wire:click="$set('composerMode', 'public')"
                        class="{{ $tabBase }} {{ $composerMode === 'public' ? $tabActive : $tabIdle }}"
                        data-test="composer-mode-public"
                        data-active="{{ $composerMode === 'public' ? 'true' : 'false' }}"
                    >
                        <flux:icon.envelope class="size-4" />
                        {{ __('Public reply') }}
                    </button>

                    {{-- Macros pill — third tab, sits naturally next
                         to Public reply (no `ml-auto` push to the
                         right edge). Operator feedback: detached
                         placement felt jarring; this places it
                         immediately after Public reply so the
                         dropdown anchors under the button itself.

                         Dropdown width: `min-w-[280px] max-w-[360px]`
                         — the previous `w-80` was being squeezed by
                         the parent flex layout to roughly the
                         button's intrinsic width (~100px), making
                         the typeahead unreadable. Min-width keeps
                         it usable at all viewport widths; max-width
                         stops a long macro name forcing the panel
                         over the order list.

                         Alignment: `left-0 top-full` so the dropdown
                         opens directly below the Macros button's
                         left edge — visually attached. --}}
                    <div
                        class="relative"
                        x-data="{ open: false }"
                        @click.outside="open = false"
                        @keydown.escape.window="open = false"
                        data-test="composer-macros-pill-wrapper"
                    >
                        <button
                            type="button"
                            x-on:click="open = !open"
                            class="{{ $tabBase }} {{ $tabIdle }}"
                            data-test="composer-mode-macros"
                            aria-haspopup="true"
                            x-bind:aria-expanded="open"
                        >
                            <flux:icon.bolt class="size-4" />
                            {{ __('Macros') }}
                            <flux:icon.chevron-down class="size-3.5" />
                        </button>

                        {{-- VISIBLE DROPDOWN PANEL.
                             ─────────────────────────────────────────
                             Width + height are set via INLINE STYLE
                             instead of Tailwind classes. Why:
                               - inline styles bypass any Tailwind
                                 JIT / build-pipeline issue that
                                 would silently drop `w-80` /
                                 `min-w-[320px]` from the bundle,
                               - inline styles win against any
                                 unrelated CSS the global / Flux UI
                                 sheet might apply,
                               - the operator can confirm the values
                                 in DevTools instantly.

                             `max-height: 235px` is the hard
                             operator-specified cap. No min() /
                             viewport-calc estimates: previous
                             attempts left the panel hanging off
                             the bottom, so the cap is now a flat
                             number.

                             `overflow-y-auto` is on this same panel
                             — scroll lives on the actual visible
                             element the operator sees clip, not on
                             an unrelated inner wrapper.

                             `data-test="macro-dropdown-panel"` is
                             the assertion anchor for the regression
                             test. --}}
                        <div
                            x-show="open"
                            x-cloak
                            x-transition.opacity
                            style="width: 320px; min-width: 320px; max-width: 420px; max-height: 235px;"
                            class="absolute left-0 top-full z-30 mt-1 overflow-y-auto rounded-md border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900"
                            data-test="macro-dropdown-panel"
                        >
                            <div class="sticky top-0 z-10 border-b border-zinc-100 bg-white p-2 dark:border-zinc-800 dark:bg-zinc-900">
                                <flux:input
                                    wire:model.live.debounce.150ms="macroSearchQuery"
                                    type="search"
                                    size="sm"
                                    :placeholder="__('Search macros…')"
                                    data-test="composer-macros-search"
                                />
                            </div>

                            <div class="py-1" data-test="composer-macros-results">
                                @forelse ($this->availableMacros as $row)
                                    <button
                                        type="button"
                                        wire:click="selectMacro({{ (int) $row['id'] }})"
                                        x-on:click="open = false"
                                        class="flex w-full min-w-0 items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-zinc-50 dark:hover:bg-zinc-800"
                                        data-test="composer-macros-option"
                                        data-macro-id="{{ (int) $row['id'] }}"
                                    >
                                        <flux:icon.bolt class="size-3.5 shrink-0 text-zinc-400" />
                                        <div class="min-w-0 flex-1">
                                            <div class="truncate font-medium leading-tight text-zinc-800 dark:text-zinc-100">
                                                {{ $row['name'] }}
                                            </div>
                                            @if ($row['shortcut'])
                                                <div class="truncate text-[11px] leading-tight text-zinc-500 dark:text-zinc-400">
                                                    <span class="font-mono">/{{ $row['shortcut'] }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    </button>
                                @empty
                                    <div class="px-3 py-2 text-xs text-zinc-500 dark:text-zinc-400" data-test="composer-macros-empty">
                                        {{ __('No macros match.') }}
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>

                {{-- No staging banner.
                     ───────────────────────────────────────────────
                     Operator-confirmed direction: composer macros
                     are quick canned replies. Picking one inserts
                     the rendered reply directly into the composer
                     and silently applies any internal-note / status
                     / assignee side-effects. No "Apply" intermediate
                     step, no reason picker (composer macros never
                     ask reasons — that lives in operational modals).
                     If apply fails (e.g. soft-deleted mid-flight)
                     the operator sees a Flux toast instead of an
                     ugly inline banner. --}}

                @if ($composerMode === 'internal')
                    {{-- rows=7 gives the operator roughly 90px more
                         vertical typing space than rows=3 — addresses
                         the "cramped under the pending-macro banner"
                         feedback without redesigning the composer
                         layout. Same bump on the public-reply form
                         below for parity. --}}
                    <form wire:submit="addInternalNote" class="flex flex-col gap-2 bg-amber-50/40 p-4 dark:bg-amber-950/10" data-test="note-form">
                        <flux:textarea
                            wire:model="noteBody"
                            rows="7"
                            :placeholder="__('Type a note for your team...')"
                            data-test="note-body"
                        />
                        <div class="flex items-center justify-between gap-2">
                            <span class="flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400">
                                <flux:icon.lock-closed class="size-3.5" />
                                {{ __('Visible only to your team') }}
                            </span>
                            <flux:button variant="primary" type="submit" data-test="note-submit">
                                {{ __('Add note') }}
                            </flux:button>
                        </div>
                    </form>
                @else
                    @php $customerEmail = $ticket->customer?->email; @endphp

                    @if ($customerEmail === null || $customerEmail === '')
                        {{-- No customer email on the ticket — public
                             reply requires a recipient. We surface
                             this clearly instead of letting the user
                             type a reply that can't be delivered. --}}
                        <div
                            class="flex items-start gap-2 bg-zinc-50 p-4 text-sm text-zinc-600 dark:bg-zinc-950 dark:text-zinc-300"
                            data-test="public-reply-no-customer"
                        >
                            <flux:icon.exclamation-triangle class="mt-0.5 size-4 shrink-0 text-amber-500" />
                            <div>
                                <div class="font-medium text-zinc-700 dark:text-zinc-200">
                                    {{ __('No customer email on this ticket') }}
                                </div>
                                <div class="mt-1">
                                    {{ __('Link a customer (with an email address) to send a public reply. You can still add internal notes.') }}
                                </div>
                            </div>
                        </div>
                    @else
                        @php
                            // Pending outbound attachments staged by macro-suggested
                            // actions (today: attach_file_template). Surface them
                            // above the reply textarea so the operator can SEE
                            // what will be attached on send — agreed UX from the
                            // operator: "reinforce trust — this macro includes
                            // the denial form attachment".
                            //
                            // Query is fixed-budget per ticket (no N+1) and goes
                            // through AccountScope, so foreign-tenant rows stay
                            // invisible.
                            $pendingAttachments = $ticket
                                ? \App\Models\TicketAttachment::query()
                                    ->where('ticket_id', $ticket->id)
                                    ->where('pending_outbound', true)
                                    ->orderBy('id')
                                    ->get()
                                : collect();
                        @endphp

                        {{-- Suggested action chip rendered after applyMacro
                             populates $suggestedAction. NEVER auto-runs —
                             "Run" / "Dismiss" are the only paths. --}}
                        @if ($suggestedAction !== null)
                            <div
                                class="flex flex-col gap-2 border-b border-zinc-200 bg-amber-50/60 px-4 py-3 dark:border-zinc-800 dark:bg-amber-900/10"
                                data-test="composer-suggested-action"
                                data-action-type="{{ $suggestedAction['action_type'] }}"
                                data-applied="{{ ! empty($suggestedAction['applied']) ? 'true' : 'false' }}"
                                data-block-reason="{{ $suggestedAction['block_reason'] !== '' ? 'true' : 'false' }}"
                            >
                                <div class="flex items-start justify-between gap-3">
                                    <div class="flex flex-1 items-start gap-2 text-sm">
                                        <flux:icon.sparkles class="mt-0.5 size-4 shrink-0 text-amber-600 dark:text-amber-400" />
                                        <div class="flex flex-col gap-1">
                                            <div class="flex flex-wrap items-center gap-2">
                                                <flux:badge size="sm" :color="$suggestedAction['is_stub'] ? 'amber' : 'sky'">
                                                    {{ $suggestedAction['label'] }}
                                                </flux:badge>
                                                @if ($suggestedAction['prefill_summary'] !== '')
                                                    <span
                                                        class="text-xs font-medium text-zinc-700 dark:text-zinc-200"
                                                        data-test="composer-suggested-action-summary"
                                                    >
                                                        {{ $suggestedAction['prefill_summary'] }}
                                                    </span>
                                                @endif
                                                @if (! empty($suggestedAction['applied']))
                                                    <flux:badge size="sm" color="lime" data-test="composer-suggested-action-done">
                                                        {{ __('Done') }}
                                                    </flux:badge>
                                                @endif
                                            </div>
                                            <div class="text-xs text-zinc-600 dark:text-zinc-300">
                                                {{ __('Suggested by macro') }}: <span class="font-medium">{{ $suggestedAction['macro_name'] }}</span>
                                            </div>
                                            @if ($suggestedAction['block_reason'] !== '')
                                                <div
                                                    class="mt-1 inline-flex items-start gap-1 rounded bg-amber-100 px-2 py-1 text-[11px] text-amber-800 dark:bg-amber-900/40 dark:text-amber-200"
                                                    data-test="composer-suggested-action-block"
                                                >
                                                    <flux:icon.lock-closed class="mt-0.5 size-3 shrink-0" />
                                                    <span>{{ $suggestedAction['block_reason'] }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="flex shrink-0 items-center gap-1">
                                        @if (empty($suggestedAction['applied']))
                                            <flux:button
                                                type="button"
                                                size="sm"
                                                variant="primary"
                                                wire:click="runSuggestedAction"
                                                data-test="composer-suggested-action-run"
                                            >
                                                {{ __('Run') }}
                                            </flux:button>
                                        @endif
                                        @php
                                            // Pick honest button copy.
                                            //   - Chip with a staged attachment (only
                                            //     attach_file_template auto-stages on
                                            //     apply, and `applied=true` is the
                                            //     signal) → "Remove attachment". The
                                            //     dismiss handler ALSO deletes the
                                            //     pending_outbound row + the file on
                                            //     disk, so "Hide" is misleading.
                                            //   - Otherwise (blocked stub, fresh
                                            //     non-deterministic chip) → "Dismiss".
                                            $dismissLabel = $suggestedAction['action_type'] === 'attach_file_template'
                                                && ! empty($suggestedAction['applied'])
                                                ? __('Remove attachment')
                                                : __('Dismiss');
                                        @endphp
                                        <flux:button
                                            type="button"
                                            size="sm"
                                            variant="ghost"
                                            wire:click="dismissSuggestedAction"
                                            data-test="composer-suggested-action-dismiss"
                                        >
                                            {{ $dismissLabel }}
                                        </flux:button>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Pending outbound attachments (staged by
                             AttachFileTemplateAction). One chip per file
                             so the operator can verify what's queued
                             before clicking Send AND remove the staged
                             file with a single click if they change
                             their mind.

                             The X button calls removePendingAttachment
                             on the Livewire component which deletes the
                             on-disk file + force-deletes the
                             TicketAttachment row (only when
                             pending_outbound is still true). --}}
                        @if ($pendingAttachments->isNotEmpty())
                            <div
                                class="flex flex-wrap items-center gap-2 border-b border-zinc-200 bg-blue-50/40 px-4 py-2 text-xs dark:border-zinc-800 dark:bg-blue-950/10"
                                data-test="composer-pending-attachments"
                            >
                                <flux:icon.paper-clip class="size-3.5 text-zinc-500 dark:text-zinc-400" />
                                <span class="text-zinc-600 dark:text-zinc-300">{{ __('Attaching on send:') }}</span>
                                @foreach ($pendingAttachments as $pending)
                                    <span
                                        class="inline-flex items-center gap-1 rounded-md bg-white px-2 py-0.5 font-mono text-[11px] text-zinc-700 ring-1 ring-zinc-200 dark:bg-zinc-900 dark:text-zinc-200 dark:ring-zinc-700"
                                        data-test="composer-pending-attachment"
                                        data-attachment-id="{{ $pending->id }}"
                                    >
                                        <span>{{ $pending->original_filename }}</span>
                                        <button
                                            type="button"
                                            wire:click="removePendingAttachment({{ $pending->id }})"
                                            class="-mr-0.5 flex size-4 items-center justify-center rounded-full text-zinc-400 transition hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-500 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
                                            data-test="composer-pending-attachment-remove"
                                            :aria-label="@js(__('Remove attachment'))"
                                            title="{{ __('Remove this attachment from the next reply') }}"
                                        >
                                            <flux:icon.x-mark class="size-3" />
                                        </button>
                                    </span>
                                @endforeach
                            </div>
                        @endif

                        <form
                            wire:submit="sendPublicReply"
                            class="flex flex-col gap-2 bg-blue-50/40 p-4 dark:bg-blue-950/10"
                            data-test="reply-form"
                        >
                            <flux:textarea
                                wire:model="replyBody"
                                rows="7"
                                :placeholder="__('Type your reply to the customer...')"
                                data-test="reply-body"
                            />
                            <div class="flex items-center justify-between gap-2">
                                <span class="flex items-center gap-1 text-xs text-zinc-500 dark:text-zinc-400">
                                    <flux:icon.envelope class="size-3.5" />
                                    {{ __('Replying to') }}:
                                    <span class="font-mono text-zinc-700 dark:text-zinc-200">{{ $customerEmail }}</span>
                                </span>
                                <flux:button variant="primary" type="submit" data-test="reply-submit">
                                    {{ __('Send reply') }}
                                </flux:button>
                            </div>
                        </form>
                    @endif
                @endif
            </div>
        </div>

        {{-- ─── Right context column ──────────────────────────── --}}
        {{-- Explicit `h-full` + `min-h-0` for the same reason the main
             column has them — the aside is a flex item in the
             conversation root (row), so without `h-full` its height
             relies on stretched-flex propagation which is unreliable
             across browsers.

             SCROLL OWNERSHIP: the aside itself is `overflow-hidden`,
             NOT `overflow-y-auto`. The ONE scroll container in this
             column is the inner Shopify orders list (see further
             down — `context-shopify-order-list-items`). The fixed-
             height upper blocks (customer, badge, store, integration)
             keep their natural heights and the orders list absorbs
             the remaining vertical space via `flex-1 min-h-0`.

             This was changed back from `overflow-y-auto` after an
             operator hit the squashed-cards bug on tickets with 19+
             orders: when the whole aside scrolled, the flex-col
             engine compressed every card below its natural height
             before the inner wrapper's `max-h-[40rem]` could engage.
             Pinning scroll to the orders block keeps the cards at
             full height and gives the operator a familiar local
             scroll affordance instead of a sidebar-wide scroll.

             Background is explicit `bg-zinc-50 dark:bg-zinc-950` so
             the panel is dark in dark mode regardless of what its
             parent paints. --}}
        <aside
            class="flex h-full min-h-0 w-[18rem] max-w-[20rem] shrink-0 flex-col gap-4 overflow-hidden border-l border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950"
            data-test="context-sidebar"
        >
            <div data-test="context-customer-section">
                <div class="flex items-center justify-between gap-2">
                    <div class="flex items-center gap-1.5 text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                        <flux:icon.user class="size-3.5" />
                        {{ __('Customer') }}
                    </div>
                    @if (! $editingCustomer)
                        <button
                            type="button"
                            wire:click="startEditingCustomer"
                            class="text-xs text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
                            data-test="customer-edit-trigger"
                        >
                            @if ($ticket->customer)
                                {{ __('Edit') }}
                            @else
                                {{ __('Link customer') }}
                            @endif
                        </button>
                    @endif
                </div>

                @if ($editingCustomer)
                    <form
                        wire:submit="saveCustomerDetails"
                        class="mt-2 flex flex-col gap-2"
                        data-test="customer-edit-form"
                    >
                        <flux:input
                            wire:model="customerName"
                            :label="__('Name')"
                            type="text"
                            size="sm"
                            autocomplete="off"
                            data-test="customer-name-input"
                        />
                        <flux:input
                            wire:model="customerEmail"
                            :label="__('Email')"
                            type="email"
                            size="sm"
                            required
                            autocomplete="off"
                            data-test="customer-email-input"
                        />
                        <div class="flex items-center gap-2 pt-1">
                            <flux:button variant="primary" type="submit" size="sm" data-test="customer-save">
                                {{ __('Save') }}
                            </flux:button>
                            <flux:button
                                type="button"
                                variant="ghost"
                                size="sm"
                                wire:click="cancelEditingCustomer"
                                data-test="customer-cancel"
                            >
                                {{ __('Cancel') }}
                            </flux:button>
                        </div>
                    </form>
                @elseif ($ticket->customer)
                    <div class="mt-2 flex flex-wrap items-center gap-2">
                        <a
                            href="{{ route('customers.show', $ticket->customer->id) }}"
                            wire:navigate
                            class="truncate text-sm font-semibold text-zinc-900 hover:underline dark:text-zinc-100"
                            data-test="context-customer-name"
                        >
                            @if ($ticket->customer->badge)
                                <span
                                    class="mr-0.5"
                                    title="{{ $ticket->customer->badge->label() }}"
                                    data-test="context-customer-badge-emoji"
                                >{{ $ticket->customer->badge->emoji() }}</span>
                            @endif
                            {{ $ticket->customer->name ?? $ticket->customer->email }}
                        </a>
                        @if ($this->shopifyContext?->isShopifyCustomer())
                            <a
                                href="{{ route('customers.show', $ticket->customer->id) }}"
                                wire:navigate
                                data-test="context-shopify-badge"
                                title="{{ __('Synced Shopify customer record') }}"
                            >
                                <flux:badge size="sm" color="lime">
                                    <span class="inline-flex items-center gap-1">
                                        <flux:icon.shopping-bag class="size-3" />
                                        {{ __('Shopify customer') }}
                                    </span>
                                </flux:badge>
                            </a>
                        @endif
                    </div>
                    @if ($ticket->customer->name)
                        <div class="truncate text-xs text-zinc-500 dark:text-zinc-400" data-test="context-customer-email">
                            {{ $ticket->customer->email }}
                        </div>
                    @endif
                    @if ($ticket->customer->phone)
                        <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">{{ $ticket->customer->phone }}</div>
                    @endif
                @else
                    <div class="mt-2 text-sm text-zinc-600 dark:text-zinc-400" data-test="context-customer-empty">
                        {{ __('No customer linked') }}
                    </div>
                @endif

                {{-- Badge + lifetime spend. Rendered only when a
                     customer is linked AND we're not in edit-form
                     mode (the form has enough going on). The badge
                     <select> writes through `setCustomerBadge`; an
                     empty value clears the badge. All members can
                     change a badge — this is routine inbox work,
                     not account-management. The amount is rendered
                     with `number_format` + the £ symbol — we treat
                     spend as GBP for the single-tenant rollout. --}}
                @if (! $editingCustomer && $ticket->customer)
                    <div class="mt-3" data-test="context-customer-badge">
                        <label class="flex items-center gap-1.5 text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                            <flux:icon.tag class="size-3.5" />
                            {{ __('Badge') }}
                        </label>
                        <select
                            wire:change="setCustomerBadge($event.target.value)"
                            class="mt-1 w-full rounded-md border-zinc-200 bg-white text-sm text-zinc-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
                            data-test="customer-badge-select"
                        >
                            <option value="">{{ __('— None —') }}</option>
                            @foreach (\App\Enums\CustomerBadge::cases() as $badge)
                                <option
                                    value="{{ $badge->value }}"
                                    @selected($ticket->customer->badge === $badge)
                                >
                                    {{ $badge->displayLabel() }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    @php $lifetimeSpend = $this->customerLifetimeSpend; @endphp
                    @if ($lifetimeSpend > 0)
                        <div class="mt-3" data-test="context-customer-lifetime-spend">
                            <div class="flex items-center gap-1.5 text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                <flux:icon.banknotes class="size-3.5" />
                                {{ __('Lifetime spend') }}
                            </div>
                            <div class="mt-1 text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                                £{{ number_format($lifetimeSpend, 2) }}
                            </div>
                        </div>
                    @endif
                @endif

                {{-- Subtle warning when public replies cannot be sent. --}}
                @if (! $editingCustomer && ! $ticket->customer?->email)
                    <div
                        class="mt-2 flex items-start gap-1.5 rounded-md bg-amber-50 px-2 py-1.5 text-xs text-amber-800 dark:bg-amber-950/30 dark:text-amber-200"
                        data-test="customer-email-warning"
                    >
                        <flux:icon.exclamation-triangle class="mt-0.5 size-3.5 shrink-0" />
                        <span>{{ __('Public replies require a customer email.') }}</span>
                    </div>
                @endif
            </div>

            {{-- ─── Suggested macros (AI Stage A scaffold) ──────────
                 Reads from `MacroSuggestionService` (Null binding
                 today → always empty). Renders an empty-state
                 placeholder. When the embedding / LLM tiers land,
                 this card surfaces the top-N macros without
                 changing markup. --}}
            <div data-test="context-suggested-macros">
                <div class="flex items-center gap-1.5 text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                    <flux:icon.sparkles class="size-3.5" />
                    {{ __('Suggested macros') }}
                </div>
                @php $aiSuggestions = $this->suggestedMacroEntries; @endphp
                @if (empty($aiSuggestions))
                    <div
                        class="mt-2 rounded-md border border-dashed border-zinc-200 bg-white/50 px-3 py-2 text-xs text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900/40 dark:text-zinc-400"
                        data-test="context-suggested-macros-empty"
                    >
                        {{ __('No AI suggestions available yet.') }}
                    </div>
                @else
                    <ul class="mt-2 flex flex-col gap-1.5" data-test="context-suggested-macros-list">
                        @foreach ($aiSuggestions as $i => $row)
                            <li>
                                <button
                                    type="button"
                                    wire:click="selectMacro({{ $row['macro']->id }})"
                                    class="flex w-full items-start gap-2 rounded-md border border-zinc-200 bg-white px-2 py-1.5 text-left text-xs transition hover:border-sky-300 hover:bg-sky-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-sky-700 dark:hover:bg-sky-950/40"
                                    data-test="context-suggested-macro"
                                    data-macro-id="{{ $row['macro']->id }}"
                                    data-rank="{{ $row['entry']->rank }}"
                                >
                                    <span class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-sky-100 text-[10px] font-semibold text-sky-700 dark:bg-sky-900 dark:text-sky-200">
                                        {{ $row['entry']->rank }}
                                    </span>
                                    <span class="flex min-w-0 flex-1 flex-col gap-0.5">
                                        <span class="truncate font-medium text-zinc-900 dark:text-zinc-100">
                                            {{ $row['macro']->name }}
                                        </span>
                                        @if ($row['entry']->confidence !== null)
                                            <span class="text-[10px] text-zinc-500 dark:text-zinc-400">
                                                {{ number_format($row['entry']->confidence * 100, 0) }}% match
                                            </span>
                                        @endif
                                    </span>
                                </button>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>

            <div>
                <div class="flex items-center gap-1.5 text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                    <flux:icon.building-storefront class="size-3.5" />
                    {{ __('Store') }}
                </div>
                <div class="mt-2 truncate text-sm text-zinc-900 dark:text-zinc-100" data-test="context-store">
                    {{ $ticket->store?->name ?? __('Unassigned') }}
                </div>
            </div>

            {{-- Return-label status card. Renders only when
                 a ReturnLabel row exists for this ticket;
                 otherwise the partial is a no-op. Read-only —
                 polling + auto-reship live entirely
                 server-side. --}}
            @include('livewire.tickets._return-label-card')

            {{-- Shopify orders + actions panel.
                 Reads only local `shopify_customers` / `shopify_orders` —
                 NEVER hits Shopify during rendering. Only the explicit
                 Reship confirm action calls Shopify (see ShopifyReshipService).

                 Layout: a Gorgias-style card with line items, totals,
                 shipping, and address. Past orders below render as
                 compact cards in a scrollable strip. Reship opens a
                 full-screen modal rather than an inline panel. --}}
            @php
                // ─────────────────────────────────────────────────
                // Performance note (do not regress).
                //
                // This @php block runs on EVERY Livewire roundtrip
                // — every click on an order card, action button,
                // status dropdown. Keep it cheap.
                //
                // Cheap-on-every-render:
                //   - $shopifyCtx                 (zero queries)
                //   - $activeOrder                (one query, cached
                //                                  on the computed)
                //   - $sidebarCards               (TWO queries flat
                //                                  regardless of how
                //                                  many orders exist)
                //
                // Heavy (raw_payload decode + image-cache query):
                //   - $orderSummary, $lineItemsDetailed, $totals,
                //     $shipping, $address — only needed when the
                //     slide-out is OPEN, the cancel/refund/
                //     edit-address/reship modal is open, or any
                //     reship draft preflight is being computed.
                //
                // Computing them only on demand drops every
                // closed-slide-out render's cost by one full
                // detailedLineItems() query plus a payload decode.
                // ─────────────────────────────────────────────────
                $shopifyCtx = $this->shopifyContext;
                $activeOrder = $this->activeShopifyOrder;
                $sidebarCards = $shopifyCtx ? $shopifyCtx->sidebarOrderCards() : collect();

                // Demand-gate the heavy active-order data. Each of
                // these surfaces consumes the variables; if NONE of
                // them is currently visible, we skip the work.
                $orderDetailNeeded = $shopifyCtx
                    && $activeOrder
                    && (
                        $orderSlideoutOpen
                        || $cancelModalOpen
                        || $refundModalOpen
                        || $editAddressModalOpen
                        || $reshipOpen
                    );

                $orderSummary = $orderDetailNeeded ? $shopifyCtx->summary($activeOrder) : null;
                $lineItemsDetailed = $orderDetailNeeded ? $shopifyCtx->detailedLineItems($activeOrder) : [];
                $totals = $orderDetailNeeded ? $shopifyCtx->totals($activeOrder) : null;
                $shipping = $orderDetailNeeded ? $shopifyCtx->shippingSummary($activeOrder) : null;
                $address = $orderDetailNeeded ? $shopifyCtx->shippingAddress($activeOrder) : null;
            @endphp

            {{-- Compact order list in the right sidebar. Clicking
                 any row opens the 500px slide-out detail panel
                 anchored to the right. Replaces the old fat
                 active-order card that bulked out this sidebar. --}}
            {{-- Full Shopify orders list — uses the same card
                 structure as the legacy "past orders" strip
                 (Shopify icon, order name, date, product
                 thumbnails, line-item summary, status badges,
                 total + count footer). Every card is a single
                 button that opens the slide-out detail panel.
                 No "Use this order" / "Open" CTA copy — the
                 whole card is the click target. --}}
            @if ($sidebarCards->isNotEmpty())
                {{-- Order list container.
                     ─────────────────────────────────────────────────
                     This is the ONLY block in the right sidebar that
                     should scroll. The aside above sets `min-h-0` and
                     can grow to fill the viewport; the customer card,
                     badge, store row and integration block all keep
                     their natural heights via `shrink-0`-friendly
                     content. This section gets `flex-1 min-h-0` so
                     it absorbs the remaining vertical space, and the
                     inner items wrapper owns `overflow-y-auto`.
                     ─────────────────────────────────────────────────
                     Without `flex-1 min-h-0` the flex-col aside would
                     compress this container when the total content
                     height exceeds the viewport, squashing every card
                     into a few pixels (the bug the operator hit with
                     19-order tickets). `shrink-0` on each card below
                     is the belt-and-braces guard.
                     ─────────────────────────────────────────────────
                     `min-w-0` + `overflow-hidden` on the outer block
                     still defend against a long product title pushing
                     the sidebar wider — that horizontal-overflow rule
                     is independent of the vertical-scroll rule.
                     ─────────────────────────────────────────────────
                     Perf: the loop body iterates pre-baked card
                     objects from `sidebarOrderCards()`. NO per-row
                     `detailedLineItems` / `lineItemSummary` calls
                     happen here — those used to fire 1+N queries
                     per render. The card object already carries
                     thumbnails, summary titles, totals, badges. --}}
                <div
                    class="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-hidden"
                    data-test="context-shopify-order-list"
                >
                    <div class="flex min-w-0 shrink-0 items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                        <flux:icon.shopping-bag class="size-3.5 shrink-0" />
                        {{ __('Shopify orders') }}
                        <span class="ml-auto shrink-0 rounded-full bg-zinc-100 px-2 py-0.5 text-[10px] font-medium text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300">
                            {{ $sidebarCards->count() }}
                        </span>
                    </div>

                    {{-- Items wrapper owns the scrollbar. `flex-1
                         min-h-0` so it takes whatever vertical space
                         the outer block has left after the header
                         row. `overflow-y-auto` engages the scrollbar
                         once the cards' natural heights exceed the
                         pane. No `max-h-…` cap any more — the cap
                         was preventing the operator from seeing the
                         list at full height on tall viewports, and
                         (combined with the missing `shrink-0` on
                         cards) was the immediate cause of the
                         squashed-card bug. --}}
                    <div
                        class="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden pr-1"
                        data-test="context-shopify-order-list-items"
                    >
                        @foreach ($sidebarCards as $row)
                            @php
                                // All per-row data is already on the
                                // pre-baked card. No service calls,
                                // no raw_payload decode, no image
                                // cache query — see the @php block
                                // up top for the perf rationale.
                                $rowIsSelected = $activeOrder && (int) $activeOrder->id === (int) $row->id && $orderSlideoutOpen;
                                // Defensive: some legacy / draft /
                                // cancelled orders end up with no
                                // reconstructible line_items in
                                // raw_payload. Footer count still
                                // resolves to >0 for those. Without
                                // a fallback the card looks broken.
                                $rowHasItemsButNoDetails = empty($row->thumbnails)
                                    && ($row->summary_total_quantity > 0 || $row->summary_overflow > 0);
                            @endphp

                            {{-- Whole card = clickable <button>. NO
                                 nested buttons / anchor tags inside;
                                 invalid HTML would suppress the click.
                                 - `w-full` so it spans the list width.
                                 - `min-w-0` so it can shrink below
                                   content width.
                                 - `overflow-hidden` so long titles
                                   truncate instead of escaping.
                                 - `cursor-pointer` to make the
                                   click affordance obvious. --}}
                            <button
                                type="button"
                                wire:key="order-card-{{ (int) $row->id }}"
                                wire:click="openOrderSlideout({{ (int) $row->id }})"
                                @class([
                                    // `shrink-0` is critical inside the
                                    // flex-col items wrapper. Without it,
                                    // a tall stack of cards gets compressed
                                    // by the parent flex engine before
                                    // `overflow-y-auto` ever engages — every
                                    // card collapses to a few pixels and the
                                    // order number becomes unreadable. With
                                    // `shrink-0` each card keeps its
                                    // natural height and the wrapper
                                    // scrolls correctly.
                                    'group flex w-full min-w-0 shrink-0 cursor-pointer flex-col gap-2.5 overflow-hidden rounded-lg border p-3.5 text-left text-sm transition',
                                    // Light: base + hover/focus/active
                                    'border-zinc-200 bg-white text-zinc-900',
                                    'hover:border-zinc-300 hover:bg-zinc-50 hover:shadow-sm',
                                    'focus:border-zinc-300 focus:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-zinc-200',
                                    'active:bg-zinc-100',
                                    // Dark: base + hover/focus/active (no opacity-suffixed values)
                                    'dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100',
                                    'dark:hover:border-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:hover:shadow-none',
                                    'dark:focus:border-zinc-700 dark:focus:bg-zinc-800 dark:focus:ring-zinc-700',
                                    'dark:active:bg-zinc-800',
                                    // Selected-when-slide-out-open visual nudge
                                    'ring-2 ring-sky-300 dark:ring-sky-600' => $rowIsSelected,
                                ])
                                data-test="context-shopify-order-card"
                                data-order-id="{{ (int) $row->id }}"
                            >
                                <div class="flex min-w-0 items-center justify-between gap-2">
                                    <div class="flex min-w-0 items-center gap-2">
                                        <span class="inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-lime-50 text-lime-700 dark:bg-lime-950/50 dark:text-lime-300">
                                            <flux:icon.shopping-bag class="size-3.5" />
                                        </span>
                                        <span class="min-w-0 truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100 dark:group-hover:text-zinc-50">
                                            {{ $row->shopify_order_name ?? '#'.$row->shopify_order_id }}
                                        </span>
                                    </div>
                                    <span class="shrink-0 text-xs font-medium text-zinc-500 dark:text-zinc-400">
                                        {{ $row->processed_at?->diffForHumans(null, true) ?? '—' }}
                                    </span>
                                </div>

                                @if (! empty($row->thumbnails))
                                    {{-- Thumbnail row: `overflow-hidden`
                                         catches the edge case where
                                         a very narrow sidebar would
                                         otherwise push a 5th thumbnail
                                         / +N chip past the card. Each
                                         tile renders the real product
                                         image when the cache/payload
                                         resolves a URL; otherwise the
                                         placeholder tile holds the
                                         visual slot so the row never
                                         collapses in height. --}}
                                    <div class="flex min-w-0 items-center gap-1.5 overflow-hidden" data-test="context-shopify-order-card-thumbs">
                                        @foreach ($row->thumbnails as $thumb)
                                            @if ($thumb['image_url'])
                                                <img
                                                    src="{{ $thumb['image_url'] }}"
                                                    alt=""
                                                    class="size-10 shrink-0 rounded-md border border-zinc-200 bg-white object-cover dark:border-zinc-700 dark:bg-zinc-800"
                                                    data-test="context-shopify-order-card-thumbnail"
                                                    loading="lazy"
                                                />
                                            @else
                                                <div class="flex size-10 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-gradient-to-br from-zinc-100 to-zinc-200 text-zinc-400 dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:text-zinc-600" data-test="context-shopify-order-card-thumbnail-placeholder">
                                                    <flux:icon.photo class="size-4" />
                                                </div>
                                            @endif
                                        @endforeach
                                        @if ($row->thumbnail_overflow > 0)
                                            <span class="ml-0.5 flex size-10 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-zinc-50 text-xs font-medium text-zinc-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300" data-test="context-shopify-order-card-thumbnail-overflow">
                                                +{{ $row->thumbnail_overflow }}
                                            </span>
                                        @endif
                                    </div>
                                @elseif ($rowHasItemsButNoDetails)
                                    {{-- Fallback strip — the order's raw_payload
                                         line_items couldn't be reconstructed
                                         (malformed data on draft / reship /
                                         heavily-cancelled rows), but the
                                         footer still resolves to >=1 item.
                                         Show a single placeholder tile so
                                         the card keeps its visual rhythm
                                         instead of collapsing. --}}
                                    <div class="flex min-w-0 items-center gap-1.5 overflow-hidden" data-test="context-shopify-order-card-thumbs">
                                        <div class="flex size-10 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-gradient-to-br from-zinc-100 to-zinc-200 text-zinc-400 dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:text-zinc-600" data-test="context-shopify-order-card-thumbnail-placeholder">
                                            <flux:icon.photo class="size-4" />
                                        </div>
                                    </div>
                                @endif

                                @if (! empty($row->summary_titles))
                                    {{-- Line item summary. `min-w-0` +
                                         `overflow-hidden` defend against
                                         very long product names; each
                                         line gets `truncate break-words`
                                         so the ellipsis still kicks in
                                         even with unbroken strings. --}}
                                    <div class="min-w-0 space-y-0.5 overflow-hidden text-xs leading-snug text-zinc-700 dark:text-zinc-200" data-test="context-shopify-order-card-summary">
                                        @foreach ($row->summary_titles as $title)
                                            <span class="block min-w-0 truncate break-words">{{ $title }}</span>
                                        @endforeach
                                        @if ($row->summary_overflow > 0)
                                            <span class="block min-w-0 truncate text-zinc-500 dark:text-zinc-400">
                                                {{ __('+:n more', ['n' => $row->summary_overflow]) }}
                                            </span>
                                        @endif
                                    </div>
                                @elseif ($rowHasItemsButNoDetails)
                                    {{-- Fallback summary line — same
                                         malformed-line_items scenario as
                                         above. We can't reconstruct titles,
                                         but we shouldn't leave a blank gap. --}}
                                    <div class="min-w-0 space-y-0.5 overflow-hidden text-xs leading-snug text-zinc-500 dark:text-zinc-400" data-test="context-shopify-order-card-summary">
                                        <span class="block min-w-0 truncate break-words italic">
                                            {{ __('Item details unavailable — open the order to view') }}
                                        </span>
                                    </div>
                                @endif

                                <div class="flex min-w-0 flex-wrap items-center gap-1.5">
                                    @if ($row->financial_status)
                                        <flux:badge
                                            size="sm"
                                            :color="match (strtolower((string) $row->financial_status)) {
                                                'paid' => 'lime',
                                                'pending', 'authorized' => 'amber',
                                                'refunded', 'partially_refunded', 'voided' => 'zinc',
                                                default => 'zinc',
                                            }"
                                        >
                                            {{ ucwords(str_replace('_', ' ', $row->financial_status)) }}
                                        </flux:badge>
                                    @endif
                                    @if ($row->fulfillment_status)
                                        <flux:badge
                                            size="sm"
                                            :color="match (strtolower((string) $row->fulfillment_status)) {
                                                'fulfilled' => 'lime',
                                                'partial', 'partially_fulfilled' => 'amber',
                                                default => 'zinc',
                                            }"
                                        >
                                            {{ ucwords(str_replace('_', ' ', $row->fulfillment_status)) }}
                                        </flux:badge>
                                    @endif
                                    @if ($row->cancelled_at)
                                        <flux:badge size="sm" color="red">{{ __('Cancelled') }}</flux:badge>
                                    @endif
                                </div>

                                <div class="flex min-w-0 items-center justify-between gap-2 border-t border-zinc-100 pt-2 dark:border-zinc-800">
                                    <span class="min-w-0 truncate text-xs text-zinc-600 dark:text-zinc-300">
                                        {{ trans_choice('{1} :count item|[2,*] :count items', $row->summary_total_quantity, ['count' => $row->summary_total_quantity]) }}
                                        · <span class="font-semibold text-zinc-800 dark:text-zinc-100">{{ $row->total_price }} {{ $row->currency }}</span>
                                    </span>
                                </div>
                            </button>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Slide-out detail panel.
                 ====================================================
                 - x-teleport="body": render at <body> level, so the
                   panel is not clipped or repositioned by the right
                   sidebar's `overflow-y-auto` / flex constraints.
                   Animates as a screen-edge overlay over the whole
                   conversation column.
                 - ALWAYS rendered (no @if gate on the wrapper) so
                   the `translate-x` transition can slide in/out
                   smoothly. When closed the panel sits at
                   `translate-x-full` (off-screen right) with
                   `pointer-events-none` so it can't intercept
                   clicks behind it.
                 - `wire:key` is STABLE (no order id in the key).
                   Previously the key embedded `$activeOrder->id`,
                   which made Livewire treat the slide-out as a
                   different element on every order-card click —
                   triggering an `x-teleport` re-run and leaving
                   stale body-level fragments that intercepted
                   future clicks ("buttons stop responding"). The
                   slide-out is a SINGLE panel whose content
                   swaps; the DOM node identity must stay stable.
                 - `wire:init` is NOT on this wrapper any more.
                   It lives on the outermost Conversation root so
                   it fires once per component mount only. Putting
                   it on a re-keyed element caused image
                   hydration to re-fire on every order click and
                   blocked the worker for ~2s each time.
                 ==================================================== --}}
            <template x-teleport="body">
            <div
                @class([
                    'fixed inset-y-0 right-0 z-[55] w-[500px] max-w-[100vw] overflow-y-auto',
                    'border-l border-zinc-200 bg-white shadow-2xl dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100',
                    'transform transition-transform duration-300 ease-out',
                    'translate-x-0' => $orderSlideoutOpen,
                    'translate-x-full pointer-events-none' => ! $orderSlideoutOpen,
                ])
                data-test="context-shopify-slideout"
                data-open="{{ $orderSlideoutOpen ? 'true' : 'false' }}"
                wire:key="shopify-order-slideout"
                aria-hidden="{{ $orderSlideoutOpen ? 'false' : 'true' }}"
            >
                <div class="flex items-center justify-between gap-2 border-b border-zinc-100 px-4 py-3 dark:border-zinc-800">
                    <div class="flex items-center gap-1.5 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
                        <flux:icon.shopping-bag class="size-4" />
                        {{ __('Order detail') }}
                        @if ($orderSummary)
                            <span class="text-zinc-500 dark:text-zinc-400">·</span>
                            <span class="font-mono">{{ $orderSummary['order_name'] ?? '#'.$orderSummary['shopify_order_id'] }}</span>
                        @endif
                    </div>
                    <div class="flex items-center gap-2">
                        @if ($orderSummary && $orderSummary['admin_url'])
                            <a
                                href="{{ $orderSummary['admin_url'] }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="inline-flex items-center gap-0.5 text-[11px] text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
                                data-test="context-shopify-admin-link"
                            >
                                {{ __('Open in Shopify') }}
                                <flux:icon.arrow-top-right-on-square class="size-2.5" />
                            </a>
                        @endif
                        <button
                            type="button"
                            wire:click="closeOrderSlideout"
                            class="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
                            data-test="context-shopify-slideout-close"
                            aria-label="{{ __('Close order detail') }}"
                        >
                            <flux:icon.x-mark class="size-5" />
                        </button>
                    </div>
                </div>

                <div class="px-4 py-4">
                @if ($orderSummary === null)
                    <div class="text-xs text-zinc-500 dark:text-zinc-400" data-test="context-shopify-no-match">
                        {{ __('No synced Shopify customer found.') }}
                    </div>
                @else
                    {{-- Active order card — Gorgias-inspired operational view.
                         Card-based sections (header → line items → totals →
                         shipping → address → actions) with explicit visual
                         hierarchy. Product thumbnails come from the local
                         raw_payload (no Shopify call during render). --}}
                    <div
                        class="mt-3 flex min-w-0 flex-col gap-3 overflow-hidden rounded-xl border border-zinc-200 bg-white p-4 text-sm shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
                        data-test="context-shopify-active-order"
                    >
                        {{-- Order header — two-row layout: name + total
                             above, badges + admin link below. Generous
                             spacing, strong typography hierarchy. --}}
                        <div class="flex flex-col gap-2">
                            <div class="flex flex-wrap items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <span class="inline-flex size-6 items-center justify-center rounded-md bg-lime-50 text-lime-700 dark:bg-lime-950/50 dark:text-lime-300">
                                            <flux:icon.shopping-bag class="size-3.5" />
                                        </span>
                                        <span class="text-base font-semibold tracking-tight text-zinc-900 dark:text-zinc-100" data-test="context-shopify-order-name">
                                            {{ $orderSummary['order_name'] ?? '#'.$orderSummary['shopify_order_id'] }}
                                        </span>
                                    </div>
                                    @if ($orderSummary['processed_at'])
                                        <div class="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400" data-test="context-shopify-order-processed">
                                            {{ $orderSummary['processed_at']->format('M j, Y · H:i') }}
                                            <span class="text-zinc-400 dark:text-zinc-500">· {{ $orderSummary['processed_at']->diffForHumans() }}</span>
                                        </div>
                                    @endif
                                </div>
                                <div class="text-right">
                                    <div class="text-lg font-semibold tabular-nums text-zinc-900 dark:text-zinc-100" data-test="context-shopify-order-total">
                                        {{ $orderSummary['total_price'] }} <span class="text-xs font-medium text-zinc-500 dark:text-zinc-400">{{ $orderSummary['currency'] }}</span>
                                    </div>
                                    @if ($orderSummary['admin_url'])
                                        <a
                                            href="{{ $orderSummary['admin_url'] }}"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            class="mt-0.5 inline-flex items-center gap-0.5 text-[11px] text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
                                        >
                                            {{ __('Open in Shopify') }} <flux:icon.arrow-top-right-on-square class="size-2.5" />
                                        </a>
                                    @endif
                                </div>
                            </div>

                            <div class="flex flex-wrap items-center gap-1.5">
                                @if ($orderSummary['financial_status'])
                                    <flux:badge
                                        size="sm"
                                        :color="match (strtolower((string) $orderSummary['financial_status'])) {
                                            'paid' => 'lime',
                                            'pending', 'authorized' => 'amber',
                                            'refunded', 'partially_refunded', 'voided' => 'zinc',
                                            default => 'zinc',
                                        }"
                                        data-test="context-shopify-order-financial"
                                    >
                                        {{ ucwords(str_replace('_', ' ', $orderSummary['financial_status'])) }}
                                    </flux:badge>
                                @endif
                                @if ($orderSummary['fulfillment_status'])
                                    <flux:badge
                                        size="sm"
                                        :color="match (strtolower((string) $orderSummary['fulfillment_status'])) {
                                            'fulfilled' => 'lime',
                                            'partial' => 'amber',
                                            default => 'zinc',
                                        }"
                                        data-test="context-shopify-order-fulfilment"
                                    >
                                        {{ ucwords(str_replace('_', ' ', $orderSummary['fulfillment_status'])) }}
                                    </flux:badge>
                                @else
                                    <flux:badge size="sm" color="zinc" data-test="context-shopify-order-fulfilment">
                                        {{ __('Unfulfilled') }}
                                    </flux:badge>
                                @endif
                                @if ($orderSummary['is_cancelled'])
                                    <flux:badge size="sm" color="red" data-test="context-shopify-cancelled">
                                        {{ __('Cancelled') }}
                                    </flux:badge>
                                @endif
                            </div>
                        </div>

                        {{-- Line items section.
                             Real product thumbnails (when raw_payload
                             carries them) with a polished placeholder
                             fallback. Each row breathes vertically so
                             long titles can wrap. --}}
                        @if (! empty($lineItemsDetailed))
                            <section data-test="context-shopify-line-items">
                                <div class="mb-1.5 flex items-center justify-between">
                                    <h4 class="text-[11px] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                        {{ trans_choice('{1} :n item|[2,*] :n items', count($lineItemsDetailed), ['n' => count($lineItemsDetailed)]) }}
                                    </h4>
                                </div>
                                <ul class="flex flex-col divide-y divide-zinc-100 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50/50 dark:divide-zinc-800 dark:border-zinc-800 dark:bg-zinc-950/30">
                                    @foreach ($lineItemsDetailed as $li)
                                        <li class="flex min-w-0 gap-3 p-2.5" data-test="context-shopify-line-item" data-item-id="{{ $li['id'] }}">
                                            @if ($li['image_url'])
                                                <img
                                                    src="{{ $li['image_url'] }}"
                                                    alt=""
                                                    class="size-12 shrink-0 rounded-md border border-zinc-200 bg-white object-cover dark:border-zinc-700 dark:bg-zinc-800"
                                                    data-test="context-shopify-line-item-image"
                                                    loading="lazy"
                                                />
                                            @else
                                                <div class="flex size-12 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-gradient-to-br from-zinc-100 to-zinc-200 text-zinc-400 dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:text-zinc-600" data-test="context-shopify-line-item-image-placeholder">
                                                    <flux:icon.photo class="size-5" />
                                                </div>
                                            @endif
                                            <div class="min-w-0 flex-1">
                                                {{-- line-clamp-2 + break-words: long product names
                                                     wrap to a max of two lines instead of forcing the
                                                     panel wider. --}}
                                                <div class="line-clamp-2 break-words text-sm font-medium leading-tight text-zinc-900 dark:text-zinc-100">
                                                    {{ $li['title'] }}
                                                </div>
                                                @if ($li['variant_title'])
                                                    <div class="mt-0.5 truncate text-xs text-zinc-600 dark:text-zinc-400">
                                                        {{ $li['variant_title'] }}
                                                    </div>
                                                @endif
                                                @if ($li['sku'])
                                                    <div class="mt-0.5 truncate font-mono text-[10px] uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
                                                        SKU {{ $li['sku'] }}
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="shrink-0 text-right">
                                                <div class="text-sm font-medium tabular-nums text-zinc-900 dark:text-zinc-100">
                                                    × {{ $li['quantity'] }}
                                                </div>
                                                @if ($li['line_total'])
                                                    <div class="mt-0.5 text-xs tabular-nums text-zinc-500 dark:text-zinc-400">
                                                        {{ $li['line_total'] }} {{ $orderSummary['currency'] }}
                                                    </div>
                                                @endif
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </section>
                        @endif

                        {{-- Financial summary — rows with separators,
                             emphasised grand total. --}}
                        @if ($totals && ($totals['subtotal'] || $totals['shipping'] || $totals['tax'] || $totals['total']))
                            <section class="rounded-lg border border-zinc-200 bg-zinc-50/50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-950/30" data-test="context-shopify-totals">
                                <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                    {{ __('Summary') }}
                                </h4>
                                <dl class="flex flex-col text-xs">
                                    @if ($totals['subtotal'])
                                        <div class="flex items-center justify-between py-0.5">
                                            <dt class="text-zinc-600 dark:text-zinc-400">{{ __('Subtotal') }}</dt>
                                            <dd class="tabular-nums text-zinc-700 dark:text-zinc-300">{{ $totals['subtotal'] }} {{ $totals['currency'] }}</dd>
                                        </div>
                                    @endif
                                    @if ($totals['shipping'])
                                        <div class="flex items-center justify-between py-0.5">
                                            <dt class="text-zinc-600 dark:text-zinc-400">{{ __('Shipping') }}</dt>
                                            <dd class="tabular-nums text-zinc-700 dark:text-zinc-300">{{ $totals['shipping'] }} {{ $totals['currency'] }}</dd>
                                        </div>
                                    @endif
                                    @if ($totals['tax'])
                                        <div class="flex items-center justify-between py-0.5">
                                            <dt class="text-zinc-600 dark:text-zinc-400">{{ __('Tax') }}</dt>
                                            <dd class="tabular-nums text-zinc-700 dark:text-zinc-300">{{ $totals['tax'] }} {{ $totals['currency'] }}</dd>
                                        </div>
                                    @endif
                                    @if ($totals['total'])
                                        <div class="mt-1 flex items-center justify-between border-t border-zinc-200 pt-1.5 dark:border-zinc-800">
                                            <dt class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ __('Total') }}</dt>
                                            <dd class="text-sm font-semibold tabular-nums text-zinc-900 dark:text-zinc-100">
                                                {{ $totals['total'] }} {{ $totals['currency'] }}
                                            </dd>
                                        </div>
                                    @endif
                                </dl>
                            </section>
                        @endif

                        {{-- Shipping — destination-agnostic block: method,
                             cost, fulfilment, tracking. Designed to host
                             future action buttons (resend tracking, mark
                             lost) without crowding the layout. --}}
                        @if ($shipping && ($shipping['method_name'] || $shipping['shipping_cost'] || $shipping['tracking_number'] || $shipping['tracking_url']))
                            <section class="rounded-lg border border-zinc-200 bg-white px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900" data-test="context-shopify-shipping">
                                <div class="mb-1.5 flex items-center justify-between">
                                    <div class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                        <flux:icon.truck class="size-3.5" />
                                        {{ __('Shipping') }}
                                    </div>
                                    @if ($shipping['tracking_url'])
                                        <a
                                            href="{{ $shipping['tracking_url'] }}"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            class="inline-flex items-center gap-0.5 text-[11px] font-medium text-sky-700 hover:underline dark:text-sky-300"
                                        >
                                            {{ __('Track') }} <flux:icon.arrow-top-right-on-square class="size-2.5" />
                                        </a>
                                    @endif
                                </div>
                                <dl class="grid grid-cols-3 gap-x-2 gap-y-1 text-xs">
                                    @if ($shipping['method_name'])
                                        <dt class="col-span-1 text-zinc-500 dark:text-zinc-400">{{ __('Method') }}</dt>
                                        <dd class="col-span-2 truncate text-zinc-700 dark:text-zinc-300">
                                            {{ $shipping['method_name'] }}
                                            @if ($shipping['method_code'])
                                                <span class="text-zinc-400 dark:text-zinc-500">({{ $shipping['method_code'] }})</span>
                                            @endif
                                        </dd>
                                    @endif
                                    @if ($shipping['shipping_cost'])
                                        <dt class="col-span-1 text-zinc-500 dark:text-zinc-400">{{ __('Cost') }}</dt>
                                        <dd class="col-span-2 tabular-nums text-zinc-700 dark:text-zinc-300">{{ $shipping['shipping_cost'] }} {{ $orderSummary['currency'] }}</dd>
                                    @endif
                                    @if ($shipping['tracking_number'])
                                        <dt class="col-span-1 text-zinc-500 dark:text-zinc-400">{{ __('Tracking') }}</dt>
                                        <dd class="col-span-2 truncate font-mono text-[11px] text-zinc-700 dark:text-zinc-300" data-test="context-shopify-tracking-number">
                                            {{ $shipping['tracking_number'] }}
                                        </dd>
                                    @endif
                                </dl>
                            </section>
                        @endif

                        {{-- Shipping address — operator-friendly block.
                             Reserves space for future actions (copy /
                             edit / validate) without rendering them yet. --}}
                        @if ($address)
                            <section class="rounded-lg border border-zinc-200 bg-white px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900" data-test="context-shopify-address">
                                <div class="mb-1.5 flex items-center justify-between">
                                    <div class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                        <flux:icon.map-pin class="size-3.5" />
                                        {{ __('Shipping address') }}
                                    </div>
                                    @if ($activeOrder?->hasLocalAddressOverride())
                                        <flux:badge
                                            size="sm"
                                            color="amber"
                                            data-test="context-shopify-address-override-badge"
                                            title="{{ __('Address was edited locally after fulfilment. The shipped parcel was not redirected.') }}"
                                        >
                                            {{ __('Local override') }}
                                        </flux:badge>
                                    @endif
                                </div>
                                <address class="not-italic text-xs leading-snug text-zinc-700 dark:text-zinc-300" data-test="context-shopify-address-block">
                                    @if ($address['name'])
                                        <div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $address['name'] }}</div>
                                    @endif
                                    @if ($address['company'])<div>{{ $address['company'] }}</div>@endif
                                    @if ($address['address1'])<div>{{ $address['address1'] }}</div>@endif
                                    @if ($address['address2'])<div>{{ $address['address2'] }}</div>@endif
                                    @if ($address['city'] || $address['province'] || $address['zip'])
                                        <div>
                                            {{ trim(implode(', ', array_filter([$address['city'], $address['province'], $address['zip']]))) }}
                                        </div>
                                    @endif
                                    @if ($address['country'])<div>{{ $address['country'] }}</div>@endif
                                    @if ($address['phone'])
                                        <div class="mt-1 text-zinc-500 dark:text-zinc-400">
                                            <flux:icon.phone class="mr-0.5 inline size-3" />{{ $address['phone'] }}
                                        </div>
                                    @endif
                                </address>
                            </section>
                        @endif

                        {{-- Action row — Push 2G layout pass.

                             Previously a single horizontal `flex
                             items-center` row that overflowed on
                             narrow viewports, pushing More Actions
                             (the Wrong item → Free Return entry
                             point) off-screen.

                             Now `flex flex-wrap`: every button
                             keeps its natural width and wraps to a
                             second row when the panel narrows. No
                             button is ever pushed off-screen.

                             Primary buttons (always visible):
                               - Reship / Cancel / Refund /
                                 Edit address / Track / More Actions

                             Track only renders when the order has
                             a tracking URL or tracking number.
                             More Actions is always visible and
                             hosts Wrong item → Free Return inline.

                             data-test markers per the slice spec:
                               - order-panel-track
                               - order-panel-more-actions
                               - order-panel-wrong-item-free-return
                             Legacy `context-shopify-*` markers
                             survive for backwards compatibility
                             with the existing test corpus. --}}
                        @php
                            $trackingUrl = (string) ($orderSummary['tracking_url'] ?? '');
                            $trackingNumber = (string) ($orderSummary['tracking_number'] ?? '');
                            $hasTracking = $trackingUrl !== '' || $trackingNumber !== '';
                        @endphp
                        <div
                            class="flex flex-wrap items-center gap-2 border-t border-zinc-100 pt-3 dark:border-zinc-800"
                            data-test="order-panel-action-row"
                        >
                            <flux:button
                                variant="primary"
                                size="sm"
                                icon="arrow-path"
                                wire:click="openReship"
                                data-test="context-shopify-reship-trigger"
                            >
                                {{ __('Reship') }}
                            </flux:button>

                            <flux:button
                                variant="ghost"
                                size="sm"
                                icon="x-circle"
                                wire:click="openCancelOrder"
                                data-test="context-shopify-cancel-trigger"
                            >
                                {{ __('Cancel') }}
                            </flux:button>

                            <flux:button
                                variant="ghost"
                                size="sm"
                                icon="banknotes"
                                wire:click="openRefundModal({{ (int) $activeOrder->id }})"
                                data-test="context-shopify-refund-trigger"
                            >
                                {{ __('Refund') }}
                            </flux:button>

                            <flux:button
                                variant="ghost"
                                size="sm"
                                icon="map-pin"
                                wire:click="openEditAddress({{ (int) $activeOrder->id }})"
                                data-test="context-shopify-edit-address-trigger"
                            >
                                {{ __('Edit address') }}
                            </flux:button>

                            {{-- Track button — primary action when
                                 tracking exists on the order. URL
                                 wins over number: an external link
                                 is the customer's actual courier
                                 page. When only the number is
                                 known, render an Alpine disclosure
                                 that reveals + click-to-copy the
                                 number (no carrier resolution at
                                 this point — that's the carrier
                                 router's job). When neither URL
                                 nor number exists, render the
                                 disabled-state placeholder so the
                                 operator sees the "no tracking
                                 yet" hint inline.

                                 data-test markers preserve the
                                 legacy contract:
                                   - URL present →
                                     `context-shopify-track-link`
                                     (on the <a>) + `order-panel-track`
                                     (on the wrapper).
                                   - No URL, no number →
                                     `context-shopify-track-disabled`
                                     + "No tracking link available"
                                     text (per the existing
                                     ConversationShopifyContextTest
                                     assertions).
                                   - Number only →
                                     `order-panel-track` wrapper
                                     with a copy-number disclosure.

                                 Alpine `navigator.clipboard.writeText`
                                 is gated on its availability; in
                                 unsupported browsers / iframes the
                                 button just shows the number. --}}
                            @if ($trackingUrl !== '')
                                <span class="inline-flex items-center" data-test="order-panel-track">
                                    <a
                                        href="{{ $trackingUrl }}"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="inline-flex items-center gap-1 rounded-md border border-zinc-200 px-2.5 py-1.5 text-xs text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
                                        data-test="context-shopify-track-link"
                                        title="{{ $trackingNumber !== '' ? $trackingNumber : __('Open tracking') }}"
                                    >
                                        <flux:icon.truck class="size-3.5" />
                                        {{ __('Track') }}
                                    </a>
                                </span>
                            @elseif ($trackingNumber !== '')
                                <div
                                    x-data="{
                                        shown: false,
                                        copied: false,
                                        copy() {
                                            if (navigator.clipboard?.writeText) {
                                                navigator.clipboard.writeText('{{ addslashes($trackingNumber) }}');
                                                this.copied = true;
                                                setTimeout(() => this.copied = false, 1500);
                                            }
                                        },
                                    }"
                                    class="relative inline-flex items-center"
                                    data-test="order-panel-track"
                                    data-test-tracking-mode="number-only"
                                >
                                    <button
                                        type="button"
                                        @click="shown = ! shown"
                                        class="inline-flex items-center gap-1 rounded-md border border-zinc-200 px-2.5 py-1.5 text-xs text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
                                        :aria-expanded="shown ? 'true' : 'false'"
                                    >
                                        <flux:icon.truck class="size-3.5" />
                                        {{ __('Track') }}
                                    </button>
                                    <div
                                        x-show="shown"
                                        x-cloak
                                        x-transition.opacity.duration.100ms
                                        class="absolute left-0 top-full z-[60] mt-1 flex items-center gap-2 rounded-md border border-zinc-200 bg-white px-2 py-1.5 text-xs shadow-lg dark:border-zinc-700 dark:bg-zinc-900"
                                    >
                                        <span class="font-mono text-zinc-700 dark:text-zinc-200" data-test="order-panel-track-number">{{ $trackingNumber }}</span>
                                        <button
                                            type="button"
                                            @click="copy"
                                            class="inline-flex items-center gap-1 rounded border border-zinc-200 px-1.5 py-0.5 text-[10px] text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800"
                                        >
                                            <span x-show="! copied">{{ __('Copy') }}</span>
                                            <span x-show="copied" x-cloak>{{ __('Copied') }}</span>
                                        </button>
                                    </div>
                                </div>
                            @else
                                <span
                                    class="inline-flex items-center gap-1 rounded-md border border-zinc-200 px-2.5 py-1.5 text-xs text-zinc-400 dark:border-zinc-700 dark:text-zinc-500"
                                    data-test="context-shopify-track-disabled"
                                    title="{{ __('Tracking is only available once a fulfilment with a tracking URL is recorded.') }}"
                                >
                                    <flux:icon.truck class="size-3.5" />
                                    {{ __('No tracking link available') }}
                                </span>
                            @endif

                            {{--
                                More Actions disclosure — Push 2G.

                                Vanilla Alpine instead of <flux:dropdown>
                                because the entire order slide-out is
                                itself teleported to <body> via
                                `<template x-teleport="body">` (line
                                ~1526). Flux's dropdown registers its
                                Alpine state at component init time —
                                that init runs BEFORE the teleport
                                moves the host DOM, so the dropdown
                                anchor + panel arithmetic ends up
                                pointing at the original (now empty)
                                container. The visible symptom is
                                "dropdown silently never renders".

                                Plain Alpine `x-data="{ open: false }"`
                                with click-outside + ESC re-evaluates
                                its anchor on every click, so teleport
                                doesn't break it. Trigger renders
                                unconditionally; panel renders when
                                `open` is true.

                                The wire:click on the panel item still
                                hits the Livewire server-side method,
                                which carries the `manageStores`
                                authorize gate so the action stays
                                privileged even if a non-admin somehow
                                fires it.
                            --}}
                            <div
                                x-data="{
                                    open: false,
                                    top: 0,
                                    left: 0,
                                    PANEL_W: 256,
                                    toggle(event) {
                                        if (this.open) { this.open = false; return; }
                                        const r = event.currentTarget.getBoundingClientRect();
                                        // Anchor panel's RIGHT edge to the
                                        // trigger's right edge. Position
                                        // below the trigger by 4px.
                                        const margin = 8;
                                        let left = r.right - this.PANEL_W;
                                        if (left < margin) left = margin;
                                        let top = r.bottom + 4;
                                        // Flip above if not enough room.
                                        if (top + 80 > window.innerHeight - margin) {
                                            top = r.top - 4 - 80;
                                        }
                                        this.top = top;
                                        this.left = left;
                                        this.open = true;
                                    },
                                }"
                                @keydown.escape.window="open = false"
                                @click.outside="open = false"
                                class="relative"
                                data-test="order-panel-more-actions"
                                data-test-legacy="context-shopify-more-actions"
                            >
                                <button
                                    type="button"
                                    @click="toggle($event)"
                                    @class([
                                        'inline-flex items-center gap-1 rounded-md border border-zinc-200 px-2.5 py-1.5 text-xs text-zinc-700',
                                        'hover:bg-zinc-50',
                                        'dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800',
                                    ])
                                    :aria-expanded="open ? 'true' : 'false'"
                                    data-test="context-shopify-more-actions-trigger"
                                >
                                    <flux:icon.ellipsis-horizontal class="size-3.5" />
                                    {{ __('More Actions') }}
                                </button>

                                {{-- Panel teleported to <body> so it
                                     escapes the slide-out's overflow
                                     chain (the inbox right panel clips
                                     `absolute` children). Positioned
                                     via `position: fixed` with
                                     coordinates computed at open time,
                                     bound to the trigger's
                                     getBoundingClientRect. Floating-UI
                                     style flip-above-if-no-room is
                                     handled inline. --}}
                                <template x-teleport="body">
                                    <div
                                        x-show="open"
                                        x-cloak
                                        x-transition.opacity.duration.100ms
                                        :style="`position: fixed; top: ${top}px; left: ${left}px; width: 256px; z-index: 80;`"
                                        class="rounded-md border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900"
                                        role="menu"
                                        data-test="context-shopify-more-actions-panel"
                                    >
                                        <button
                                            type="button"
                                            @click="open = false"
                                            wire:click="openReturnLabelForOrder({{ (int) $activeOrder->id }})"
                                            class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm text-zinc-700 hover:bg-zinc-50 dark:text-zinc-200 dark:hover:bg-zinc-800"
                                            data-test="order-panel-wrong-item-free-return"
                                            data-test-legacy="context-shopify-wrong-item-trigger"
                                        >
                                            <flux:icon.arrow-uturn-left class="size-4 text-zinc-500 dark:text-zinc-400" />
                                            {{ __('Wrong item → Free Return') }}
                                        </button>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>

                    {{-- The cancel modal lives at the body-teleport zone
                         below — the order panel's "Cancel" button calls
                         `openCancelOrder()` which runs preflight and opens
                         the modal in one of five states (A-E). --}}

                    {{-- Past-orders strip removed: every order now
                         lives in the sidebar's full order list.
                         Slide-out renders only the selected order. --}}
                    @if (false)
                        <div class="mt-4" data-test="context-shopify-past-orders-section-removed">
                            {{-- Hover text colour is left to the dark variant only. The
                                 earlier non-dark `hover:text-zinc-900` was winning over
                                 `dark:hover:text-zinc-50` in dark mode and turning the
                                 button text black on hover. Light mode hover keeps the
                                 base `text-zinc-700` which stays readable against the
                                 `hover:bg-zinc-50` background. --}}
                            <button
                                type="button"
                                wire:click="togglePastOrders"
                                class="flex w-full items-center justify-between gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2.5 text-sm font-medium text-zinc-700 transition hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-50"
                                data-test="context-shopify-past-orders-toggle"
                            >
                                <span class="flex items-center gap-2">
                                    <flux:icon.clock class="size-4 text-zinc-500 dark:text-zinc-400" />
                                    @if ($showPastOrders)
                                        {{ __('Hide past orders') }}
                                    @else
                                        {{ __('Past orders') }}
                                    @endif
                                    <span class="inline-flex items-center justify-center rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
                                        {{ $pastOrders->count() }}
                                    </span>
                                </span>
                                <flux:icon.chevron-down class="size-4 text-zinc-400 transition {{ $showPastOrders ? 'rotate-180' : '' }} dark:text-zinc-500" />
                            </button>

                            @if ($showPastOrders)
                                <div
                                    class="mt-2 flex max-h-[28rem] flex-col gap-2 overflow-y-auto pr-1"
                                    data-test="context-shopify-past-orders-list"
                                >
                                    @foreach ($pastOrders as $past)
                                        @php
                                            $pastItemsDetailed = $shopifyCtx->detailedLineItems($past);
                                            $pastSummary = $shopifyCtx->lineItemSummary($past, 2);
                                            $pastThumbnails = collect($pastItemsDetailed)->take(4);
                                            $pastOverflow = max(0, count($pastItemsDetailed) - $pastThumbnails->count());
                                        @endphp
                                        {{-- Dark hover is bulletproof: NO opacity-suffixed values
                                             (some browsers / Tailwind v4 builds have inconsistent
                                             specificity with arbitrary opacity in dark variants), and
                                             EVERY interactive state (hover/focus/active) has a paired
                                             dark variant. Text colour is fixed so contrast survives
                                             every state. --}}
                                        <button
                                            type="button"
                                            wire:click="openOrderSlideout({{ $past->id }})"
                                            @class([
                                                'group flex min-w-0 flex-col gap-2.5 rounded-lg border p-3.5 text-left text-sm transition',
                                                // Light base + light hover/focus/active
                                                'border-zinc-200 bg-white text-zinc-900',
                                                'hover:border-zinc-300 hover:bg-zinc-50 hover:shadow-sm',
                                                'focus:border-zinc-300 focus:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-zinc-200',
                                                'active:bg-zinc-100',
                                                // Dark base + dark hover/focus/active (no opacity-suffixed values)
                                                'dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100',
                                                'dark:hover:border-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:hover:shadow-none',
                                                'dark:focus:border-zinc-700 dark:focus:bg-zinc-800 dark:focus:ring-zinc-700',
                                                'dark:active:bg-zinc-800',
                                            ])
                                            data-test="context-shopify-past-order"
                                            data-shopify-order-id="{{ $past->id }}"
                                        >
                                            <div class="flex items-center justify-between gap-2">
                                                <div class="flex min-w-0 items-center gap-2">
                                                    <span class="inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-lime-50 text-lime-700 dark:bg-lime-950/50 dark:text-lime-300">
                                                        <flux:icon.shopping-bag class="size-3.5" />
                                                    </span>
                                                    <span class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100 dark:group-hover:text-zinc-50">
                                                        {{ $past->shopify_order_name ?? '#'.$past->shopify_order_id }}
                                                    </span>
                                                </div>
                                                <span class="shrink-0 text-xs font-medium text-zinc-500 dark:text-zinc-400">
                                                    {{ $past->processed_at?->diffForHumans(null, true) ?? '—' }}
                                                </span>
                                            </div>

                                            @if ($pastThumbnails->isNotEmpty())
                                                <div class="flex items-center gap-1.5" data-test="context-shopify-past-order-thumbs">
                                                    @foreach ($pastThumbnails as $thumb)
                                                        @if ($thumb['image_url'])
                                                            <img
                                                                src="{{ $thumb['image_url'] }}"
                                                                alt=""
                                                                class="size-10 shrink-0 rounded-md border border-zinc-200 bg-white object-cover dark:border-zinc-700 dark:bg-zinc-800"
                                                                loading="lazy"
                                                            />
                                                        @else
                                                            <div class="flex size-10 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-gradient-to-br from-zinc-100 to-zinc-200 text-zinc-400 dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:text-zinc-600">
                                                                <flux:icon.photo class="size-4" />
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                    @if ($pastOverflow > 0)
                                                        <span class="ml-0.5 flex size-10 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-zinc-50 text-xs font-medium text-zinc-600 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
                                                            +{{ $pastOverflow }}
                                                        </span>
                                                    @endif
                                                </div>
                                            @endif

                                            @if (! empty($pastSummary['titles']))
                                                <div class="min-w-0 space-y-0.5 text-xs leading-snug text-zinc-700 dark:text-zinc-200" data-test="context-shopify-past-order-summary">
                                                    @foreach ($pastSummary['titles'] as $title)
                                                        <span class="block truncate">{{ $title }}</span>
                                                    @endforeach
                                                    @if ($pastSummary['overflow'] > 0)
                                                        <span class="block text-zinc-500 dark:text-zinc-400">
                                                            {{ __('+:n more', ['n' => $pastSummary['overflow']]) }}
                                                        </span>
                                                    @endif
                                                </div>
                                            @endif

                                            <div class="flex flex-wrap items-center gap-1.5">
                                                @if ($past->financial_status)
                                                    <flux:badge
                                                        size="sm"
                                                        :color="match (strtolower((string) $past->financial_status)) {
                                                            'paid' => 'lime',
                                                            'pending', 'authorized' => 'amber',
                                                            default => 'zinc',
                                                        }"
                                                    >
                                                        {{ ucwords(str_replace('_', ' ', $past->financial_status)) }}
                                                    </flux:badge>
                                                @endif
                                                @if ($past->fulfillment_status)
                                                    <flux:badge
                                                        size="sm"
                                                        :color="match (strtolower((string) $past->fulfillment_status)) {
                                                            'fulfilled' => 'lime',
                                                            'partial' => 'amber',
                                                            default => 'zinc',
                                                        }"
                                                    >
                                                        {{ ucwords(str_replace('_', ' ', $past->fulfillment_status)) }}
                                                    </flux:badge>
                                                @endif
                                                @if ($past->cancelled_at)
                                                    <flux:badge size="sm" color="red">{{ __('Cancelled') }}</flux:badge>
                                                @endif
                                            </div>

                                            <div class="flex items-center justify-between gap-2 border-t border-zinc-100 pt-2 dark:border-zinc-800">
                                                <span class="min-w-0 truncate text-xs text-zinc-600 dark:text-zinc-300">
                                                    {{ trans_choice('{1} :count item|[2,*] :count items', $pastSummary['total_quantity'], ['count' => $pastSummary['total_quantity']]) }}
                                                    · <span class="font-semibold text-zinc-800 dark:text-zinc-100">{{ $past->total_price }} {{ $past->currency }}</span>
                                                </span>
                                                <span
                                                    class="inline-flex shrink-0 items-center gap-0.5 text-sm font-medium text-sky-700 group-hover:underline dark:text-sky-300"
                                                    data-test="context-shopify-past-order-open"
                                                >
                                                    {{ __('Open') }}
                                                    <flux:icon.arrow-right class="size-3.5" />
                                                </span>
                                            </div>
                                        </button>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endif
                @endif
                </div>{{-- /.px-4.py-4 inner padding wrapper --}}
            </div>{{-- /slide-out --}}
            </template>{{-- /x-teleport --}}
        </aside>

        {{-- Reship modal — full-screen overlay so it isn't cramped by
             the 17rem side panel. Rendered as a sibling of the aside
             so `fixed inset-0 z-50` covers the entire viewport. All
             content is read from local Shopify data; only the Confirm
             button calls Shopify, via ShopifyReshipService. --}}
        @if ($reshipOpen && $activeOrder)
            @php
                $modalItems = $lineItemsDetailed;
                $modalAddress = $address;
                $modalOrderName = $orderSummary['order_name'] ?? '#'.$orderSummary['shopify_order_id'];
                $selectedTotal = collect($reshipQuantities)->sum();
                $hasSelection = $selectedTotal > 0;
                // Helm stock map keyed by variant_id (string). Null
                // value = "Unknown". Resolved via HelmStockResolver
                // (default NullHelmStockResolver returns null for
                // everything). No Shopify call to determine stock.
                $stockMap = $this->stockMapForActiveOrder;
            @endphp

            {{-- Teleport the modal to <body> so it escapes any
                 ancestor that might create a containing block for
                 `fixed` (transform / filter / contain / etc on the
                 conversation root or Flux's main panel). Without
                 the teleport the overlay was rendering INSIDE the
                 narrow right-side panel instead of over the whole
                 viewport. Alpine handles the move on render and
                 cleans up when the modal closes. --}}
            <template x-teleport="body">
            <div
                class="fixed inset-0 z-[60] flex items-center justify-center bg-zinc-900/60 p-4 backdrop-blur-sm"
                data-test="context-shopify-reship-modal"
                wire:key="reship-modal-{{ $activeOrder->id }}"
            >
                <div class="flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
                    {{-- Modal header --}}
                    <div class="flex items-center justify-between gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
                        <div class="flex items-center gap-2">
                            <flux:icon.shopping-bag class="size-4 text-zinc-500 dark:text-zinc-400" />
                            <flux:heading size="lg" level="2">{{ __('Create reship order') }}</flux:heading>
                        </div>
                        <button
                            type="button"
                            wire:click="closeReship"
                            class="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
                            data-test="context-shopify-reship-modal-close"
                        >
                            <flux:icon.x-mark class="size-5" />
                        </button>
                    </div>

                    {{-- Modal body (scrollable) --}}
                    <div class="flex-1 overflow-y-auto px-5 py-4">
                        <div class="text-sm text-zinc-600 dark:text-zinc-300">
                            {{ __('Selected items will be created as a free Shopify replacement order linked to') }}
                            <span class="font-medium text-zinc-900 dark:text-zinc-100">{{ $modalOrderName }}</span>.
                        </div>

                        {{-- Disabled placeholders for future product search /
                             custom item. These ship inert in this phase. --}}
                        <div class="mt-3 flex flex-wrap items-center gap-2">
                            <input
                                type="text"
                                placeholder="{{ __('Search products…') }}"
                                disabled
                                class="flex-1 cursor-not-allowed rounded-md border border-zinc-200 bg-zinc-50 px-3 py-1.5 text-sm text-zinc-400 dark:border-zinc-800 dark:bg-zinc-950/40 dark:text-zinc-500"
                                data-test="context-shopify-reship-search-disabled"
                            />
                            <flux:button
                                variant="ghost"
                                size="sm"
                                disabled
                                title="{{ __('Coming in a later phase.') }}"
                                data-test="context-shopify-reship-add-custom-disabled"
                            >
                                {{ __('Add custom item') }}
                            </flux:button>
                            <flux:button
                                variant="ghost"
                                size="sm"
                                wire:click="fillEntireOrder"
                                data-test="context-shopify-reship-fill-entire-order"
                            >
                                {{ __('Reship entire order') }}
                            </flux:button>
                        </div>

                        {{-- Items section — card list (not a table).
                             Each row breathes: image, multi-line text,
                             premium qty stepper, line total, clear. --}}
                        <section class="mt-4">
                            <div class="mb-2 flex items-center justify-between">
                                <h3 class="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                    {{ __('Items') }}
                                </h3>
                                <span class="text-[11px] text-zinc-500 dark:text-zinc-400">
                                    {{ __('Quantities default to 0 — reship only what was wrong.') }}
                                </span>
                            </div>

                            <div class="flex flex-col divide-y divide-zinc-200 overflow-hidden rounded-lg border border-zinc-200 bg-white dark:divide-zinc-800 dark:border-zinc-800 dark:bg-zinc-900">
                                @foreach ($modalItems as $li)
                                    @php
                                        $qty = (int) ($reshipQuantities[$li['id']] ?? 0);
                                        $maxQty = (int) ($li['quantity'] ?? 0);
                                        $stock = $stockMap[$li['variant_id'] ?? ''] ?? null;
                                    @endphp
                                    {{-- Single horizontal flex line. The earlier 12-col
                                         grid was forcing the SKU + stock + qty stepper
                                         to wrap onto extra rows, blowing the modal up
                                         tall enough to scroll off screen. This layout
                                         keeps each item to ONE line: image, title
                                         block, stock pill, qty stepper, line total,
                                         trash. Each segment has `shrink-0` so the qty
                                         stepper never collapses or wraps. --}}
                                    <div
                                        class="flex items-center gap-3 px-3 py-2"
                                        data-test="reship-modal-line-item"
                                        data-item-id="{{ $li['id'] }}"
                                    >
                                        {{-- Image (40px) --}}
                                        @if ($li['image_url'])
                                            <img
                                                src="{{ $li['image_url'] }}"
                                                alt=""
                                                class="size-10 shrink-0 rounded-md border border-zinc-200 bg-white object-cover dark:border-zinc-700 dark:bg-zinc-800"
                                                data-test="reship-modal-line-item-image"
                                                loading="lazy"
                                            />
                                        @else
                                            <div
                                                class="flex size-10 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-gradient-to-br from-zinc-100 to-zinc-200 text-zinc-400 dark:border-zinc-700 dark:from-zinc-800 dark:to-zinc-900 dark:text-zinc-600"
                                                data-test="reship-modal-line-item-image-placeholder"
                                            >
                                                <flux:icon.photo class="size-5" />
                                            </div>
                                        @endif

                                        {{-- Title + condensed meta row.
                                             Title clamped to 1 line so the row height
                                             stays fixed. Variant + SKU joined into a
                                             single meta line in a normal-case font —
                                             not the previous uppercase tracking-wide
                                             which read as oversized. --}}
                                        <div class="min-w-0 flex-1">
                                            <div class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                                                {{ $li['title'] }}
                                            </div>
                                            <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">
                                                @if ($li['variant_title'])
                                                    {{ $li['variant_title'] }}
                                                @endif
                                                @if ($li['variant_title'] && $li['sku']) · @endif
                                                @if ($li['sku'])
                                                    <span class="font-mono">{{ $li['sku'] }}</span>
                                                @endif
                                                @if ($li['price'])
                                                    @if ($li['variant_title'] || $li['sku']) · @endif
                                                    <span class="tabular-nums">{{ $li['price'] }}</span>
                                                @endif
                                                <span class="text-zinc-400 dark:text-zinc-500">· {{ __('max :n', ['n' => $maxQty]) }}</span>
                                            </div>
                                        </div>

                                        {{-- Stock pill (compact) --}}
                                        <span
                                            class="shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium @if ($stock === null) bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300 @elseif ($stock <= 0) bg-red-50 text-red-700 dark:bg-red-950/50 dark:text-red-300 @elseif ($stock < $maxQty) bg-amber-50 text-amber-800 dark:bg-amber-950/30 dark:text-amber-200 @else bg-lime-50 text-lime-700 dark:bg-lime-950/40 dark:text-lime-300 @endif"
                                            data-test="reship-modal-stock"
                                            data-stock="{{ $stock ?? '' }}"
                                            title="{{ $stock === null ? __('Helm stock unavailable') : __(':n in stock (Helm)', ['n' => $stock]) }}"
                                        >
                                            @if ($stock === null)
                                                {{ __('Stock unknown') }}
                                            @else
                                                {{ $stock }}
                                            @endif
                                        </span>

                                        {{-- Quantity input. Native browser-provided
                                             spinner steppers handle increment /
                                             decrement; we don't wrap them in
                                             custom buttons. --}}
                                        <input
                                            type="number"
                                            min="0"
                                            max="{{ $maxQty }}"
                                            wire:model.live.number="reshipQuantities.{{ $li['id'] }}"
                                            class="w-16 shrink-0 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-2 text-center text-base font-medium tabular-nums focus:border-zinc-400 focus:outline-none focus:ring-0 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:focus:border-zinc-500"
                                            data-test="reship-modal-qty-input"
                                        />

                                        {{-- Line total (free reship → 0.00). Shows the
                                             original-price line total only when qty > 0
                                             so a row with qty=0 doesn't waste pixels on
                                             a non-data 0.00. --}}
                                        <span class="shrink-0 w-16 text-right text-xs tabular-nums text-zinc-500 dark:text-zinc-400">
                                            @if ($li['price'] && $qty > 0)
                                                {{ number_format(((float) $li['price']) * $qty, 2) }} {{ $orderSummary['currency'] }}
                                            @else
                                                —
                                            @endif
                                        </span>

                                        {{-- Trash --}}
                                        <button
                                            type="button"
                                            wire:click="clearReshipItem('{{ $li['id'] }}')"
                                            @disabled($qty <= 0)
                                            class="shrink-0 text-zinc-400 hover:text-zinc-700 disabled:cursor-not-allowed disabled:opacity-30 dark:hover:text-zinc-200"
                                            title="{{ __('Clear') }}"
                                            data-test="reship-modal-clear-row"
                                        >
                                            <flux:icon.trash class="size-4" />
                                        </button>
                                    </div>
                                @endforeach
                            </div>

                            {{-- Footer: prominent "free replacement" stamp.
                                 Currency-aware so a £1000 original makes
                                 the £0.00 / free copy visually unambiguous. --}}
                            <div class="mt-2 flex items-center justify-between gap-2 rounded-lg bg-lime-50 px-3 py-2 text-sm dark:bg-lime-950/30">
                                <div class="flex items-center gap-1.5 text-xs font-medium text-lime-800 dark:text-lime-200">
                                    <flux:icon.gift class="size-4" />
                                    {{ __('Reship total') }}
                                </div>
                                <div class="text-sm font-semibold tabular-nums text-lime-900 dark:text-lime-100" data-test="reship-modal-total">
                                    £0.00 — {{ __('free replacement') }}
                                </div>
                            </div>
                        </section>

                        {{-- Shipping destination card (from original) --}}
                        @if ($modalAddress)
                            <section class="mt-4 rounded-lg border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900" data-test="reship-modal-address">
                                <header class="flex items-center justify-between gap-2 border-b border-zinc-200 px-3 py-2 dark:border-zinc-800">
                                    <div class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                        <flux:icon.map-pin class="size-3.5" />
                                        {{ __('Shipping to') }}
                                    </div>
                                    <span class="text-[10px] text-zinc-400 dark:text-zinc-500">
                                        {{ __('from original order') }}
                                    </span>
                                </header>
                                <div class="px-3 py-2 text-xs leading-snug text-zinc-700 dark:text-zinc-200">
                                    @if ($modalAddress['name'])<div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $modalAddress['name'] }}</div>@endif
                                    @if ($modalAddress['address1'])<div>{{ $modalAddress['address1'] }}</div>@endif
                                    @if ($modalAddress['address2'])<div>{{ $modalAddress['address2'] }}</div>@endif
                                    @if ($modalAddress['city'] || $modalAddress['province'] || $modalAddress['zip'])
                                        <div>
                                            {{ trim(implode(', ', array_filter([$modalAddress['city'], $modalAddress['province'], $modalAddress['zip']]))) }}
                                        </div>
                                    @endif
                                    @if ($modalAddress['country'])<div>{{ $modalAddress['country'] }}</div>@endif
                                </div>
                            </section>
                        @endif

                        {{-- Note card removed — operator-visible internal
                             notes can be added directly from the
                             conversation composer. The reship action
                             still backfills a sensible default note on
                             Shopify's draft order; see
                             Conversation::confirmReship for the default.
                             --}}

                        {{-- Tags card --}}
                        <section class="mt-4 rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
                                    <flux:icon.tag class="size-3.5" />
                                    {{ __('Tags') }}
                                </div>
                                <span class="text-[10px] text-zinc-400 dark:text-zinc-500">{{ __('fixed for this phase') }}</span>
                            </div>
                            <div class="mt-2 flex flex-wrap items-center gap-1" data-test="reship-modal-tags">
                                <flux:badge size="sm" color="lime">cleardesk-reship</flux:badge>
                                <flux:badge size="sm" color="zinc">reship</flux:badge>
                                <flux:badge size="sm" color="zinc">original-order-{{ $modalOrderName }}</flux:badge>
                            </div>
                        </section>

                        @if ($reshipError)
                            <div class="mt-4 flex items-start gap-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-900/40 dark:bg-red-950/30 dark:text-red-200" data-test="reship-modal-error">
                                <flux:icon.exclamation-triangle class="mt-0.5 size-4 shrink-0" />
                                <div>{{ $reshipError }}</div>
                            </div>
                        @endif
                    </div>

                    {{-- Modal footer --}}
                    <div class="flex items-center justify-between gap-2 border-t border-zinc-200 bg-zinc-50 px-5 py-3 dark:border-zinc-800 dark:bg-zinc-950/40">
                        <div class="text-xs text-zinc-500 dark:text-zinc-400" data-test="reship-modal-selected-count">
                            {{ trans_choice('{0} No items selected|{1} :count item selected|[2,*] :count items selected', $selectedTotal, ['count' => $selectedTotal]) }}
                        </div>
                        <div class="flex items-center gap-2">
                            <flux:button
                                variant="ghost"
                                size="sm"
                                wire:click="closeReship"
                                data-test="reship-modal-cancel"
                            >
                                {{ __('Cancel') }}
                            </flux:button>
                            <flux:button
                                variant="primary"
                                size="sm"
                                wire:click="confirmReship"
                                wire:loading.attr="disabled"
                                wire:target="confirmReship"
                                :disabled="! $hasSelection"
                                data-test="reship-modal-confirm"
                            >
                                <span wire:loading.remove wire:target="confirmReship">
                                    {{ __('Create reship') }}
                                </span>
                                <span wire:loading wire:target="confirmReship">
                                    {{ __('Creating…') }}
                                </span>
                            </flux:button>
                        </div>
                    </div>
                </div>
            </div>
            </template>
        @endif
    @endif

    {{-- =====================================================
         CANCEL MODAL — 5-state UI driven by $cancelPreflightBlockReason
         (a string from App\Actions\Enums\PreflightBlockReason).
         Teleported to body so it escapes any ancestor's containing
         block, same pattern as the reship modal above.
         ===================================================== --}}
    @if ($cancelModalOpen)
        <template x-teleport="body">
        <div
            class="fixed inset-0 z-[60] flex items-center justify-center bg-zinc-900/60 p-4 backdrop-blur-sm"
            data-test="cancel-modal"
            wire:key="cancel-modal-{{ $cancelModalOrderId }}"
        >
            <div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
                {{-- Header --}}
                <div class="flex items-center justify-between gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
                    <div class="flex items-center gap-2">
                        <flux:icon.x-circle class="size-4 text-zinc-500 dark:text-zinc-400" />
                        <flux:heading size="lg" level="2">{{ __('Cancel order') }}</flux:heading>
                    </div>
                    <button
                        type="button"
                        wire:click="closeCancelOrder"
                        class="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
                        data-test="cancel-modal-close"
                    >
                        <flux:icon.x-mark class="size-5" />
                    </button>
                </div>

                {{-- Body — state-specific. --}}
                <div class="flex-1 overflow-y-auto px-5 py-4 text-sm">
                    @php
                        $br = $cancelPreflightBlockReason;
                        $stateA = $cancelPreflightCanProceed;
                        $stateB = $br === 'order_already_shipped';
                        $stateC = in_array($br, ['helm_lookup_ambiguous', 'helm_lookup_failed'], true);
                        $stateD = $br === 'helm_lookup_not_found';
                        $stateE = $br === 'helm_status_ineligible';
                    @endphp

                    {{-- STATE A: cancellable --}}
                    @if ($stateA)
                        <div data-test="cancel-modal-state-a">
                            <p class="text-zinc-900 dark:text-zinc-100">{{ $cancelPreflightSummary }}</p>
                            @if ($cancelPreflightWarnings !== [])
                                <ul class="mt-2 list-disc space-y-1 pl-5 text-xs text-amber-700 dark:text-amber-300" data-test="cancel-modal-warnings">
                                    @foreach ($cancelPreflightWarnings as $warning)
                                        <li>{{ $warning }}</li>
                                    @endforeach
                                </ul>
                            @endif

                            {{-- Line items with per-line qty steppers. Default
                                 is "all selected at full original quantity".
                                 Reducing any line below original reroutes to
                                 the refund modal on confirm. --}}
                            @if (! empty($cancelSelections))
                                <div class="mt-4 rounded-lg border border-zinc-200 dark:border-zinc-800" data-test="cancel-modal-lines">
                                    @php
                                        $activeOrderForCancel = null;
                                        if ($cancelModalOrderId) {
                                            $activeOrderForCancel = \App\Models\ShopifyOrder::find($cancelModalOrderId);
                                        }
                                        $rawLines = $activeOrderForCancel && is_array($activeOrderForCancel->raw_payload['line_items'] ?? null)
                                            ? $activeOrderForCancel->raw_payload['line_items']
                                            : [];
                                    @endphp

                                    @foreach ($rawLines as $rawLine)
                                        @php
                                            $itemId = (string) ($rawLine['id'] ?? '');
                                            $title = $rawLine['title'] ?? ($rawLine['name'] ?? 'Line item');
                                            $sku = $rawLine['sku'] ?? null;
                                            $originalQty = max(0, (int) ($rawLine['quantity'] ?? 0));
                                            $selectedQty = $cancelSelections[$itemId] ?? $originalQty;
                                        @endphp
                                        @if ($itemId !== '')
                                            <div class="flex items-center gap-3 border-b border-zinc-100 px-3 py-2 last:border-b-0 dark:border-zinc-800" data-test="cancel-modal-line-item">
                                                <div class="min-w-0 flex-1">
                                                    <div class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $title }}</div>
                                                    <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">
                                                        @if ($sku)<span class="font-mono">{{ $sku }}</span> · @endif
                                                        {{ __('original :n', ['n' => $originalQty]) }}
                                                    </div>
                                                </div>
                                                <input
                                                    type="number"
                                                    min="0"
                                                    max="{{ $originalQty }}"
                                                    wire:change="setCancelLineQuantity('{{ $itemId }}', $event.target.value)"
                                                    value="{{ $selectedQty }}"
                                                    class="w-16 shrink-0 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-2 text-center text-base font-medium tabular-nums focus:border-zinc-400 focus:outline-none focus:ring-0 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:focus:border-zinc-500"
                                                    data-test="cancel-modal-qty-input"
                                                />
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                                <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
                                    {{ __('Reducing any line below its original quantity will route the difference to the Refund flow instead of the Cancel flow.') }}
                                </p>
                            @endif
                        </div>
                    @endif

                    {{-- STATE B: shipped (only on Helm-free accounts now) --}}
                    @if ($stateB)
                        <div data-test="cancel-modal-state-b" class="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200">
                            <p class="font-semibold">{{ __('This order has already shipped.') }}</p>
                            <p class="mt-1 text-xs">{{ $cancelPreflightSummary }}</p>
                        </div>
                    @endif

                    {{-- STATES C / D: ambiguous / no Helm match — manual ID lookup --}}
                    @if ($stateC || $stateD)
                        <div data-test="cancel-modal-state-cd" class="space-y-3">
                            <div class="rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200">
                                <p class="font-semibold">{{ __('ClearDesk could not confidently match this Shopify order to Helm.') }}</p>
                                <p class="mt-1 text-xs">{{ $cancelPreflightSummary }}</p>
                                @foreach ($cancelPreflightBlockers as $blocker)
                                    <p class="mt-1 text-xs">{{ $blocker }}</p>
                                @endforeach
                            </div>

                            <div class="rounded-md border border-zinc-200 p-3 dark:border-zinc-800" data-test="cancel-modal-manual-helm-id">
                                <div class="text-xs font-semibold text-zinc-900 dark:text-zinc-100">{{ __('Or enter the Helm channel order id manually') }}</div>
                                <p class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
                                    {{ __('Open the order in Helm and copy the channel_order_id value (e.g. 1777460098-32). Lookup goes live to Helm — no cache fallback.') }}
                                </p>
                                <div class="mt-2 flex items-end gap-2">
                                    <flux:input
                                        wire:model="cancelManualChannelOrderIdInput"
                                        type="text"
                                        placeholder="1777460098-32"
                                        :label="__('Channel order id')"
                                        data-test="cancel-modal-manual-helm-id-input"
                                        class="flex-1"
                                    />
                                    <flux:button
                                        type="button"
                                        variant="ghost"
                                        wire:click="lookupManualHelmId"
                                        data-test="cancel-modal-manual-helm-id-lookup"
                                    >
                                        {{ __('Look up') }}
                                    </flux:button>
                                </div>

                                @if ($cancelManualHelmError)
                                    <p class="mt-2 text-xs text-red-700 dark:text-red-300" data-test="cancel-modal-manual-helm-id-error">
                                        {{ $cancelManualHelmError }}
                                    </p>
                                @endif

                                @if ($cancelManualHelmCandidate)
                                    <div class="mt-3 rounded border border-emerald-300 bg-emerald-50 p-2 text-xs text-emerald-900 dark:border-emerald-900/40 dark:bg-emerald-950/30 dark:text-emerald-200" data-test="cancel-modal-manual-helm-candidate">
                                        <div>
                                            <span class="font-semibold">{{ __('Channel order id') }}:</span> {{ $cancelManualHelmCandidate['channelOrderId'] ?? '—' }}
                                            <span class="mx-1">·</span>
                                            <span class="font-semibold">{{ __('Helm id') }}:</span> {{ $cancelManualHelmCandidate['id'] }}
                                            <span class="mx-1">·</span>
                                            <span class="font-semibold">{{ __('status_id') }}:</span> {{ $cancelManualHelmCandidate['statusId'] }}
                                        </div>
                                        @if (! $cancelManualConfirmedChannelOrderId)
                                            <flux:button
                                                size="xs"
                                                variant="primary"
                                                wire:click="confirmManualHelmMatch"
                                                class="mt-2"
                                                data-test="cancel-modal-manual-helm-confirm"
                                            >
                                                {{ __('Confirm match') }}
                                            </flux:button>
                                        @else
                                            <p class="mt-1 text-[11px]">{{ __('Match confirmed — you can now cancel.') }}</p>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif

                    {{-- STATE E: Helm status too advanced — NO refund button --}}
                    @if ($stateE)
                        <div data-test="cancel-modal-state-e" class="rounded-md border border-red-300 bg-red-50 p-3 text-red-900 dark:border-red-900/40 dark:bg-red-950/30 dark:text-red-200">
                            <p class="font-semibold">{{ __('This order cannot be cancelled automatically.') }}</p>
                            <p class="mt-1 text-xs">{{ $cancelPreflightSummary }}</p>
                            @if (isset($cancelPreflightContext['helm_status_id']))
                                <p class="mt-1 text-xs">
                                    <span class="font-semibold">{{ __('Helm status_id') }}:</span> {{ $cancelPreflightContext['helm_status_id'] }}
                                </p>
                            @endif
                            <p class="mt-2 text-xs">{{ __('Resolve the order state in Helm first, then verify in Shopify. No automatic refund offered here to avoid accidentally refunding borderline progress.') }}</p>
                        </div>
                    @endif

                    {{-- Generic fallback when none of the above match --}}
                    @if (! $stateA && ! $stateB && ! $stateC && ! $stateD && ! $stateE)
                        <div data-test="cancel-modal-state-generic" class="rounded-md border border-zinc-300 bg-zinc-50 p-3 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
                            <p>{{ $cancelPreflightSummary ?: __('Cancel is not available for this order.') }}</p>
                        </div>
                    @endif
                </div>

                {{-- Footer — state-specific buttons. --}}
                <div class="flex items-center justify-end gap-2 border-t border-zinc-200 px-5 py-3 dark:border-zinc-800">
                    @if ($stateA || $cancelManualConfirmedChannelOrderId)
                        <flux:button
                            type="button"
                            variant="ghost"
                            wire:click="closeCancelOrder"
                            data-test="cancel-modal-back"
                        >{{ __('Back') }}</flux:button>
                        <flux:button
                            type="button"
                            variant="primary"
                            wire:click="confirmCancel"
                            data-test="cancel-modal-confirm"
                        >
                            {{ __('Confirm cancel') }}
                        </flux:button>
                    @elseif ($stateB)
                        <flux:button
                            type="button"
                            variant="ghost"
                            wire:click="closeCancelOrder"
                            data-test="cancel-modal-back"
                        >{{ __('Back') }}</flux:button>
                        <flux:button
                            type="button"
                            variant="primary"
                            wire:click="openRefundModal({{ (int) $cancelModalOrderId }})"
                            data-test="cancel-modal-refund-redirect"
                        >
                            {{ __('Issue refund instead') }}
                        </flux:button>
                    @else
                        <flux:button
                            type="button"
                            variant="ghost"
                            wire:click="closeCancelOrder"
                            data-test="cancel-modal-close-bottom"
                        >{{ __('Close') }}</flux:button>
                    @endif
                </div>
            </div>
        </div>
        </template>
    @endif

    {{-- =====================================================
         REFUND MODAL — reship-style per-line picker. Opened
         directly via the order panel button or via the cancel
         modal's partial-tick reroute (selections pre-populated).
         ===================================================== --}}
    @if ($refundModalOpen)
        <template x-teleport="body">
        <div
            class="fixed inset-0 z-[60] flex items-center justify-center bg-zinc-900/60 p-4 backdrop-blur-sm"
            data-test="refund-modal"
            wire:key="refund-modal-{{ $refundModalOrderId }}"
        >
            <div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
                <div class="flex items-center justify-between gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
                    <div class="flex items-center gap-2">
                        <flux:icon.banknotes class="size-4 text-zinc-500 dark:text-zinc-400" />
                        <flux:heading size="lg" level="2">{{ __('Issue refund') }}</flux:heading>
                    </div>
                    <button
                        type="button"
                        wire:click="closeRefundModal"
                        class="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
                        data-test="refund-modal-close"
                    >
                        <flux:icon.x-mark class="size-5" />
                    </button>
                </div>

                <div class="flex-1 overflow-y-auto px-5 py-4 text-sm">
                    @php
                        $refundOrder = $refundModalOrderId ? \App\Models\ShopifyOrder::find($refundModalOrderId) : null;
                        $refundRawLines = $refundOrder && is_array($refundOrder->raw_payload['line_items'] ?? null)
                            ? $refundOrder->raw_payload['line_items']
                            : [];
                    @endphp

                    @if (! empty($refundSelections))
                        <div class="rounded-lg border border-zinc-200 dark:border-zinc-800" data-test="refund-modal-lines">
                            @foreach ($refundRawLines as $rawLine)
                                @php
                                    $itemId = (string) ($rawLine['id'] ?? '');
                                    $title = $rawLine['title'] ?? ($rawLine['name'] ?? 'Line item');
                                    $sku = $rawLine['sku'] ?? null;
                                    $originalQty = max(0, (int) ($rawLine['quantity'] ?? 0));
                                    $selectedQty = $refundSelections[$itemId] ?? 0;
                                @endphp
                                @if ($itemId !== '')
                                    <div class="flex items-center gap-3 border-b border-zinc-100 px-3 py-2 last:border-b-0 dark:border-zinc-800" data-test="refund-modal-line-item">
                                        <div class="min-w-0 flex-1">
                                            <div class="truncate text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $title }}</div>
                                            <div class="truncate text-xs text-zinc-500 dark:text-zinc-400">
                                                @if ($sku)<span class="font-mono">{{ $sku }}</span> · @endif
                                                {{ __('max :n', ['n' => $originalQty]) }}
                                            </div>
                                        </div>
                                        <input
                                            type="number"
                                            min="0"
                                            max="{{ $originalQty }}"
                                            wire:change="setRefundLineQuantity('{{ $itemId }}', $event.target.value)"
                                            value="{{ $selectedQty }}"
                                            class="w-16 shrink-0 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-2 text-center text-base font-medium tabular-nums focus:border-zinc-400 focus:outline-none focus:ring-0 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:focus:border-zinc-500"
                                            data-test="refund-modal-qty-input"
                                        />
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endif

                    <div class="mt-4 space-y-3">
                        <flux:checkbox
                            wire:model.live="refundRestock"
                            :label="__('Restock refunded items')"
                            :description="__('Tick to return the refunded items to Shopify\'s inventory.')"
                            data-test="refund-modal-restock-toggle"
                        />
                        <flux:textarea
                            wire:model="refundNote"
                            :label="__('Note (optional)')"
                            rows="2"
                            data-test="refund-modal-note"
                        />
                    </div>

                    @if ($refundError)
                        <p class="mt-2 text-xs text-red-700 dark:text-red-300" data-test="refund-modal-error">
                            {{ $refundError }}
                        </p>
                    @endif
                </div>

                <div class="flex items-center justify-end gap-2 border-t border-zinc-200 px-5 py-3 dark:border-zinc-800">
                    <flux:button
                        type="button"
                        variant="ghost"
                        wire:click="closeRefundModal"
                        data-test="refund-modal-back"
                    >{{ __('Back') }}</flux:button>
                    <flux:button
                        type="button"
                        variant="primary"
                        wire:click="confirmRefund"
                        data-test="refund-modal-confirm"
                    >
                        {{ __('Issue refund') }}
                    </flux:button>
                </div>
            </div>
        </div>
        </template>
    @endif

    {{-- =====================================================
         EDIT ADDRESS MODAL (Slice C)
         Five-state machine driven by `editAddressPreflightBlockReason`:
           - canProceed=true                       → State A (form)
           - OrderAlreadyShipped                   → State B
           - HelmLookupAmbiguous / HelmLookupFailed → State C
           - HelmLookupNotFound                    → State D
           - AddressNotEditable                    → State E
         Manual channel_order_id lookup is offered in C and D so
         the operator can disambiguate without leaving the modal.
         ===================================================== --}}
    @if ($editAddressModalOpen)
        @php
            $eaReason = $editAddressPreflightBlockReason;
            $eaStateA = $editAddressPreflightCanProceed;
            // Spec change: fulfilled orders are NO LONGER hard-blocked
            // by the modal. Old States B (OrderAlreadyShipped) + E
            // (AddressNotEditable) are merged into the new
            // "fulfilled warning" variant of State A. The boolean
            // here is sourced from the preflight context the action
            // surfaces — `requires_fulfilled_confirm = true`.
            $eaFulfilledWarning = $eaStateA && ! empty($editAddressPreflightContext['requires_fulfilled_confirm']);
            $eaStateC = in_array($eaReason, [
                \App\Actions\Enums\PreflightBlockReason::HelmLookupAmbiguous->value,
                \App\Actions\Enums\PreflightBlockReason::HelmLookupFailed->value,
            ], true);
            $eaStateD = $eaReason === \App\Actions\Enums\PreflightBlockReason::HelmLookupNotFound->value;
        @endphp
        <template x-teleport="body">
        <div
            class="fixed inset-0 z-[60] flex items-center justify-center bg-zinc-900/60 p-4 backdrop-blur-sm"
            data-test="edit-address-modal"
            wire:key="edit-address-modal-{{ $editAddressModalOrderId }}"
        >
            <div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
                <div class="flex items-center justify-between gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
                    <div class="flex items-center gap-2">
                        <flux:icon.map-pin class="size-4 text-zinc-500 dark:text-zinc-400" />
                        <flux:heading size="lg" level="2">{{ __('Edit shipping address') }}</flux:heading>
                    </div>
                    <button
                        type="button"
                        wire:click="closeEditAddress"
                        class="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200"
                        data-test="edit-address-modal-close"
                    >
                        <flux:icon.x-mark class="size-5" />
                    </button>
                </div>

                <div class="flex-1 overflow-y-auto px-5 py-4 text-sm">
                    {{-- STATE A: editable form (handles both
                         pre-fulfilment and fulfilled-warning
                         variants — the latter shows a red warning
                         + a "I understand the shipped parcel won't
                         change" checkbox that must be ticked before
                         Save will run). --}}
                    @if ($eaStateA || $editAddressManualConfirmedChannelOrderId)
                        <div data-test="edit-address-modal-state-a" class="space-y-4">
                            @if ($eaFulfilledWarning)
                                <div
                                    class="rounded-md border border-red-300 bg-red-50 p-3 text-xs text-red-900 dark:border-red-900/40 dark:bg-red-950/30 dark:text-red-200"
                                    data-test="edit-address-modal-fulfilled-warning"
                                >
                                    <p class="font-semibold">{{ __('This order is already fulfilled.') }}</p>
                                    <p class="mt-1">
                                        {{ __('Updating the address will only update the saved order/customer information in ClearDesk only and will not change the shipped parcel.') }}
                                    </p>
                                    @if (isset($editAddressPreflightContext['helm_status_id']))
                                        <p class="mt-1">
                                            <span class="font-semibold">{{ __('Helm status_id') }}:</span> {{ $editAddressPreflightContext['helm_status_id'] }}
                                        </p>
                                    @endif
                                    @if (isset($editAddressPreflightContext['fulfillment_status']))
                                        <p class="mt-1">
                                            <span class="font-semibold">{{ __('Shopify fulfillment_status') }}:</span> {{ $editAddressPreflightContext['fulfillment_status'] }}
                                        </p>
                                    @endif
                                </div>

                                <label class="flex items-start gap-2 rounded-md border border-red-200 bg-red-50/60 p-3 text-xs text-red-900 dark:border-red-900/40 dark:bg-red-950/20 dark:text-red-200">
                                    <input
                                        type="checkbox"
                                        wire:model.live="editAddressConfirmFulfilledOverride"
                                        class="mt-0.5"
                                        data-test="edit-address-modal-fulfilled-confirm"
                                    />
                                    <span>
                                        {{ __('I understand the shipped parcel will NOT be redirected. This change is only used by ClearDesk for the dashboard / inbox / future reships.') }}
                                    </span>
                                </label>
                            @else
                                <div class="rounded-md border border-emerald-200 bg-emerald-50 p-3 text-xs text-emerald-900 dark:border-emerald-900/40 dark:bg-emerald-950/30 dark:text-emerald-200">
                                    {{ __('Edit the fields you want to change. Untouched fields are left alone on both Helm and Shopify.') }}
                                </div>
                            @endif

                            {{-- Operator-facing note about Helm field-name uncertainty.
                                 Confirmed Helm fields are phone_one, shipping_address_line_one,
                                 shipping_address_postcode (per operator example). Others are
                                 best-guesses derived from the import-side read field names; if
                                 your Helm deployment uses different keys, the 422 path in the
                                 action will surface that and a log entry will name the field. --}}
                            <div
                                class="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200"
                                data-test="edit-address-modal-field-mapping-note"
                            >
                                <span class="font-semibold">{{ __('Heads up:') }}</span>
                                {{ __('Helm field mapping is partly inferred. If Helm rejects the update, no Shopify change is attempted — the toast and your storage/logs will name the field that needs adjusting.') }}
                            </div>

                            <div class="grid grid-cols-2 gap-3">
                                <flux:input
                                    wire:model="editAddressFirstName"
                                    :label="__('First name')"
                                    data-test="edit-address-modal-first-name"
                                />
                                <flux:input
                                    wire:model="editAddressLastName"
                                    :label="__('Last name')"
                                    data-test="edit-address-modal-last-name"
                                />
                            </div>

                            <flux:input
                                wire:model="editAddressPhone"
                                :label="__('Phone')"
                                type="tel"
                                data-test="edit-address-modal-phone"
                            />

                            <flux:input
                                wire:model="editAddressLineOne"
                                :label="__('Address line 1')"
                                data-test="edit-address-modal-line-one"
                            />
                            <flux:input
                                wire:model="editAddressLineTwo"
                                :label="__('Address line 2')"
                                data-test="edit-address-modal-line-two"
                            />

                            <div class="grid grid-cols-3 gap-3">
                                <flux:input
                                    wire:model="editAddressCity"
                                    :label="__('City')"
                                    data-test="edit-address-modal-city"
                                />
                                <flux:input
                                    wire:model="editAddressProvince"
                                    :label="__('State / Province')"
                                    data-test="edit-address-modal-province"
                                />
                                <flux:input
                                    wire:model="editAddressPostcode"
                                    :label="__('Postcode')"
                                    data-test="edit-address-modal-postcode"
                                />
                            </div>

                            <flux:input
                                wire:model="editAddressCountryCode"
                                :label="__('Country code (ISO 2)')"
                                placeholder="GB"
                                maxlength="2"
                                data-test="edit-address-modal-country-code"
                            />

                            @if (! empty($editAddressPreflightWarnings))
                                <div class="rounded-md border border-amber-200 bg-amber-50 p-2 text-xs text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200" data-test="edit-address-modal-warnings">
                                    @foreach ($editAddressPreflightWarnings as $warning)
                                        <p>{{ $warning }}</p>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endif

                    {{-- States B + E (hard-block on shipped /
                         status-ineligible) were removed in the
                         cleanup-pass spec change — both cases now
                         route through State A's
                         `eaFulfilledWarning` variant above. --}}

                    {{-- STATE C: Helm lookup ambiguous OR failed → manual channel_order_id --}}
                    @if ($eaStateC && ! $editAddressManualConfirmedChannelOrderId)
                        <div data-test="edit-address-modal-state-c" class="space-y-3">
                            <div class="rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200">
                                <p class="font-semibold">{{ __('Helm match is ambiguous or unreachable.') }}</p>
                                <p class="mt-1 text-xs">{{ $editAddressPreflightSummary }}</p>
                                @foreach ($editAddressPreflightBlockers as $blocker)
                                    <p class="mt-1 text-xs">{{ $blocker }}</p>
                                @endforeach
                            </div>

                            @include('livewire.tickets._edit-address-manual-lookup')
                        </div>
                    @endif

                    {{-- STATE D: Helm linked but no match → manual channel_order_id --}}
                    @if ($eaStateD && ! $editAddressManualConfirmedChannelOrderId)
                        <div data-test="edit-address-modal-state-d" class="space-y-3">
                            <div class="rounded-md border border-zinc-300 bg-zinc-50 p-3 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
                                <p class="font-semibold">{{ __('ClearDesk could not match this Shopify order to Helm.') }}</p>
                                <p class="mt-1 text-xs">{{ $editAddressPreflightSummary }}</p>
                                @foreach ($editAddressPreflightBlockers as $blocker)
                                    <p class="mt-1 text-xs">{{ $blocker }}</p>
                                @endforeach
                            </div>

                            @include('livewire.tickets._edit-address-manual-lookup')
                        </div>
                    @endif

                    {{-- Generic fallback --}}
                    @if (! $eaStateA && ! $eaStateC && ! $eaStateD && ! $editAddressManualConfirmedChannelOrderId)
                        <div data-test="edit-address-modal-state-generic" class="rounded-md border border-zinc-300 bg-zinc-50 p-3 text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
                            <p>{{ $editAddressPreflightSummary ?: __('Address edit is not available for this order.') }}</p>
                        </div>
                    @endif
                </div>

                <div class="flex items-center justify-end gap-2 border-t border-zinc-200 px-5 py-3 dark:border-zinc-800">
                    <flux:button
                        type="button"
                        variant="ghost"
                        wire:click="closeEditAddress"
                        data-test="edit-address-modal-back"
                    >{{ __('Back') }}</flux:button>

                    @if ($eaStateA || $editAddressManualConfirmedChannelOrderId)
                        @php
                            // Save is disabled on the fulfilled-warning
                            // path until the operator ticks the
                            // explicit confirm checkbox. Defence in
                            // depth — the action layer also refuses
                            // without `confirm_fulfilled_override`,
                            // so even a forged payload can't slip
                            // through.
                            $eaSaveDisabled = $eaFulfilledWarning && ! $editAddressConfirmFulfilledOverride;
                        @endphp
                        <flux:button
                            type="button"
                            variant="primary"
                            wire:click="confirmEditAddress"
                            :disabled="$eaSaveDisabled"
                            data-test="edit-address-modal-confirm"
                        >
                            {{ $eaFulfilledWarning ? __('Save (ClearDesk only)') : __('Save address') }}
                        </flux:button>
                    @endif
                </div>
            </div>
        </div>
        </template>
    @endif

    {{-- =====================================================
         OPERATIONAL MACRO WARNING — Push 2G.

         Fires when the operator applies a macro whose attached
         action is operational (cancel / refund / edit_address /
         reship / generate_return_label). The macro NEVER runs
         the action — it stages a warning with three explicit
         choices. Macros are no longer a path to silent
         destructive mutations.

         Open / close state is gated on
         `$pendingOperationalMacroId !== null`. Closed by every
         resolution method via `clearOperationalMacroWarningState`.
         ===================================================== --}}
    @if ($pendingOperationalMacroId !== null)
        @include('livewire.tickets._operational-macro-warning-modal')
    @endif

    {{-- =====================================================
         RETURN LABEL MODAL — Push 2D operator picker.

         Opens when the operator clicks Run on the
         `generate_return_label` suggested-action chip.
         Pure UI / no API calls until `confirmReturnLabel` fires.
         Teleported to body so it escapes any ancestor
         containing block, same pattern as the other modals.
         ===================================================== --}}
    @if ($returnLabelOpen)
        @include('livewire.tickets._return-label-modal')
    @endif
</div>