@php
    $inboxTitle = match ($filters['status']) {
        'closed' => 'Closed chats',
        'archived' => 'Archived chats',
        default => 'Open chats',
    };
@endphp

@extends('layouts.admin', [
    'active' => 'inbox',
    'inboxStatus' => $filters['status'],
    'inboxSearch' => $filters['search'],
    'inboxConversation' => (bool) $conversation,
])

@section('title', $inboxTitle)
@section('heading', $conversation?->user_name ?: $inboxTitle)

@section('content')
    @php
        $query = array_filter([
            'search' => $filters['search'],
            'status' => $filters['status'],
        ]);
        $canRealtime = $supabaseUrl !== '' && $supabaseAnonKey !== '';
    @endphp

    <div
        class="flex min-h-0 flex-1 overflow-hidden"
        data-inbox
        data-supabase-url="{{ $canRealtime ? $supabaseUrl : '' }}"
        data-supabase-anon-key="{{ $canRealtime ? $supabaseAnonKey : '' }}"
        data-storage-bucket="{{ $storageBucket }}"
        data-conversation-id="{{ $conversation?->id }}"
        data-conversation-status="{{ $conversation?->status }}"
        data-user-name="{{ $conversation?->user_name ?: $conversation?->user_id }}"
        @if ($conversation)
            data-messages-url="{{ route('inbox.messages.store', $conversation) }}"
            data-seen-url="{{ route('inbox.seen', $conversation) }}"
        @endif
    >
        <section class="{{ $conversation ? 'hidden md:flex' : 'flex' }} w-full shrink-0 flex-col border-border bg-background md:w-80 md:border-r">
            <form method="GET" action="{{ route('inbox') }}" class="shrink-0 border-b border-border p-3">
                <div class="relative">
                    <svg class="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0Z" />
                    </svg>
                    <input
                        type="search"
                        name="search"
                        value="{{ $filters['search'] }}"
                        placeholder="Search conversations…"
                        aria-label="Search conversations"
                        data-search-input
                        class="h-9 w-full overflow-hidden rounded-lg border border-border/80 bg-muted/40 pr-3 pl-9 text-sm shadow-none outline-none"
                    >
                    <input type="hidden" name="status" value="{{ $filters['status'] }}">
                </div>
            </form>

            <div class="flex gap-2 overflow-x-auto border-b border-border px-3 py-2 lg:hidden" role="navigation" aria-label="Chat filters">
                @php
                    $statusTabs = [
                        'open' => 'Open',
                        'closed' => 'Closed',
                        'archived' => 'Archived',
                    ];
                @endphp
                @foreach ($statusTabs as $statusKey => $statusLabel)
                    <a
                        href="{{ route('inbox', array_filter(['status' => $statusKey, 'search' => $filters['search'] ?: null])) }}"
                        class="inline-flex h-8 shrink-0 items-center rounded-full px-3 text-xs font-medium {{ $filters['status'] === $statusKey ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80' }}"
                    >{{ $statusLabel }}</a>
                @endforeach
            </div>

            <div class="min-h-0 flex-1 overflow-y-auto" data-inbox-list>
                @forelse ($conversations as $row)
                    @php
                        $isActive = $conversation && (int) $conversation->id === (int) $row->id;
                        $preview = $row->latestMessage?->previewText();
                        $unread = $isActive ? 0 : (int) $row->unread_messages_count;
                    @endphp
                    <a
                        href="{{ route('inbox.show', [$row, ...$query]) }}"
                        data-conversation-row="{{ $row->id }}"
                        data-unread="{{ $unread }}"
                        class="block border-b border-border/50 px-3 py-3 {{ $isActive ? 'bg-muted' : 'hover:bg-muted/50' }}"
                    >
                        <div class="flex items-start justify-between gap-2">
                            <p data-conversation-name class="min-w-0 truncate text-sm font-medium">{{ $row->user_name ?: $row->user_id }}</p>
                            <div class="flex shrink-0 items-center gap-2">
                                <span data-conversation-closed class="{{ $row->isClosed() ? '' : 'hidden' }} text-[11px] text-muted-foreground">Closed</span>
                                @if ($row->updated_at)
                                    <time data-conversation-time class="text-[11px] text-muted-foreground" datetime="{{ $row->updated_at->toIso8601String() }}">
                                        {{ $row->updated_at->timezone(config('app.timezone'))->format('M j') }}
                                    </time>
                                @endif
                            </div>
                        </div>
                        <p class="truncate text-[11px] text-muted-foreground">{{ $row->domain?->domain_name }}</p>
                        <div class="mt-1 flex items-center justify-between gap-2">
                            <p data-conversation-preview class="min-w-0 truncate text-xs text-muted-foreground">{{ $preview ?: 'No messages yet' }}</p>
                            <span
                                data-unread-badge
                                class="{{ $unread > 0 ? 'inline-flex' : 'hidden' }} h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-[#25D366] px-1.5 text-[11px] font-semibold text-white"
                            >{{ $unread > 99 ? '99+' : ($unread > 0 ? $unread : '') }}</span>
                        </div>
                    </a>
                @empty
                    <p class="px-3 py-8 text-center text-sm text-muted-foreground">
                        @if ($filters['search'] !== '')
                            No conversations match that search.
                        @elseif ($filters['status'] === 'closed')
                            No closed chats yet.
                        @elseif ($filters['status'] === 'archived')
                            No archived chats yet.
                        @else
                            No open chats yet.
                        @endif
                    </p>
                @endforelse
            </div>
        </section>

        <section class="{{ $conversation ? 'flex' : 'hidden md:flex' }} min-w-0 flex-1 flex-col bg-card">
            @if ($conversation)
                <header class="flex shrink-0 items-center justify-between gap-2 border-b border-border px-2 py-3 sm:gap-3 sm:px-4">
                    <div class="flex min-w-0 items-center gap-1">
                        <a
                            href="{{ route('inbox', $query) }}"
                            class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg text-foreground hover:bg-muted md:hidden"
                            aria-label="Back to chats"
                            title="Back to chats"
                        >
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="m15 18-6-6 6-6" />
                            </svg>
                        </a>
                        <div class="min-w-0">
                            <h2 class="truncate text-sm font-semibold">{{ $conversation->user_name ?: $conversation->user_id }}</h2>
                            <p class="truncate text-[11px] text-muted-foreground">
                                User ID {{ $conversation->user_id }}
                                @if ($conversation->domain)
                                    · {{ $conversation->domain->domain_name }}
                                @endif
                            </p>
                        </div>
                    </div>
                    <div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
                        @if ($conversation->isArchived())
                            <span class="rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">Archived</span>
                        @else
                            <span data-header-closed-badge class="{{ $conversation->isClosed() ? '' : 'hidden' }} rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
                                Closed
                            </span>
                            <div data-close-chat class="{{ $conversation->isClosed() ? 'hidden' : '' }}">
                                <button
                                    type="button"
                                    data-open-dialog="close-chat"
                                    class="inline-flex h-8 cursor-pointer items-center rounded-lg border border-border px-2 text-xs font-medium hover:bg-muted sm:px-3"
                                >
                                    Close chat
                                </button>
                            </div>
                            @unless ($conversation->isClosed())
                                <button
                                    type="button"
                                    data-open-dialog="archive-chat"
                                    class="inline-flex h-8 cursor-pointer items-center rounded-lg border border-border px-2 text-xs font-medium hover:bg-muted sm:px-3"
                                >
                                    Archive chat
                                </button>
                            @endunless
                        @endif
                    </div>
                </header>

                <div class="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-4" data-inbox-thread>
                    @forelse ($messages as $message)
                        @include('admin.partials.inbox-message', ['message' => $message, 'conversation' => $conversation])
                    @empty
                        <p data-inbox-empty class="py-12 text-center text-sm text-muted-foreground">No messages yet. Send the first reply.</p>
                    @endforelse
                </div>

                <form
                    method="POST"
                    action="{{ route('inbox.messages.store', $conversation) }}"
                    enctype="multipart/form-data"
                    class="{{ $conversation->isClosed() || $conversation->isArchived() ? 'hidden' : '' }} shrink-0 border-t border-border p-3"
                    data-inbox-form
                >
                    @csrf
                    @if ($filters['search'] !== '')
                        <input type="hidden" name="search" value="{{ $filters['search'] }}">
                    @endif
                    <input type="hidden" name="status" value="{{ $filters['status'] }}">
                    @php
                        $replyToId = old('reply_to_id');
                        $replyingTo = $replyToId ? $messages->firstWhere('id', (int) $replyToId) : null;
                    @endphp
                    <input type="hidden" name="reply_to_id" value="{{ $replyToId }}" data-reply-to-id>
                    <div data-reply-preview class="mb-2 {{ $replyToId ? '' : 'hidden' }}">
                        <div class="flex items-start gap-2 rounded-lg border border-border bg-muted/40 p-2">
                            <div class="min-w-0 flex-1 border-l-[3px] border-primary pl-2">
                                <p data-reply-preview-author class="truncate text-xs font-semibold text-primary">
                                    {{ $replyingTo?->isFromChatManager() ? 'You' : ($conversation->user_name ?: $conversation->user_id) }}
                                </p>
                                <p data-reply-preview-body class="truncate text-xs text-muted-foreground">{{ $replyingTo?->previewText() }}</p>
                            </div>
                            <button
                                type="button"
                                data-reply-clear
                                class="inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-muted"
                                title="Cancel reply"
                                aria-label="Cancel reply"
                            >
                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div data-media-preview class="mb-2 hidden">
                        <div class="inline-flex max-w-full items-center gap-3 rounded-2xl border border-border bg-muted/40 p-2 pr-3">
                            <div data-media-preview-frame class="size-16 shrink-0 overflow-hidden rounded-xl bg-muted"></div>
                            <div class="min-w-0">
                                <p data-media-preview-kind class="text-[11px] font-medium text-muted-foreground">Photo</p>
                                <p data-media-name class="truncate text-sm font-medium"></p>
                            </div>
                            <button
                                type="button"
                                data-media-clear
                                class="ml-2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-muted"
                                title="Remove attachment"
                                aria-label="Remove attachment"
                            >
                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div data-inbox-composer class="flex h-11 items-center gap-2">
                        <label class="sr-only" for="inbox-body">Message</label>
                        <textarea
                            id="inbox-body"
                            name="body"
                            rows="1"
                            maxlength="5000"
                            placeholder="Write a reply…"
                            class="h-11 min-h-11 flex-1 resize-none overflow-hidden rounded-lg border border-border/80 bg-muted/40 px-3 py-2 text-sm leading-6 shadow-none outline-none {{ $errors->has('body') ? 'border-destructive' : '' }}"
                        >{{ old('body') }}</textarea>
                        <div class="flex h-11 shrink-0 items-center gap-1">
                            <div class="relative" data-attach-wrap>
                                <button
                                    type="button"
                                    data-attach-toggle
                                    class="inline-flex size-11 cursor-pointer items-center justify-center rounded-lg border border-border/80 bg-muted/40 hover:bg-muted"
                                    title="Attach"
                                    aria-label="Attach"
                                    aria-haspopup="menu"
                                    aria-expanded="false"
                                >
                                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
                                    </svg>
                                </button>
                                <div data-attach-menu class="absolute right-0 bottom-full z-20 mb-2 hidden w-48" role="menu">
                                    <div class="rounded-2xl border border-border bg-card p-1.5 shadow-lg">
                                        <label for="inbox-attach-image" data-attach-kind="image" class="flex w-full cursor-pointer items-center gap-3 rounded-xl px-2 py-2 text-left hover:bg-muted" role="menuitem">
                                            <span class="inline-flex size-9 items-center justify-center rounded-full bg-[#7C4DFF] text-white">
                                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.6-4.6a2 2 0 0 1 2.8 0L16 16m-2-2 1.6-1.6a2 2 0 0 1 2.8 0L22 16M14 8h.01M6 20h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z" />
                                                </svg>
                                            </span>
                                            <span class="text-sm font-medium">Image</span>
                                        </label>
                                        <label for="inbox-attach-video" data-attach-kind="video" class="flex w-full cursor-pointer items-center gap-3 rounded-xl px-2 py-2 text-left hover:bg-muted" role="menuitem">
                                            <span class="inline-flex size-9 items-center justify-center rounded-full bg-[#E91E63] text-white">
                                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="m15 10 4.5-2.5v9L15 14M5 6h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z" />
                                                </svg>
                                            </span>
                                            <span class="text-sm font-medium">Video</span>
                                        </label>
                                        <label for="inbox-attach-audio" data-attach-kind="audio" class="flex w-full cursor-pointer items-center gap-3 rounded-xl px-2 py-2 text-left hover:bg-muted" role="menuitem">
                                            <span class="inline-flex size-9 items-center justify-center rounded-full bg-[#FF8A00] text-white">
                                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 18V5l12-2v13M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm12-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                                                </svg>
                                            </span>
                                            <span class="text-sm font-medium">Audio</span>
                                        </label>
                                    </div>
                                </div>
                                <input
                                    id="inbox-attach-image"
                                    type="file"
                                    class="sr-only"
                                    data-attach-input="image"
                                    accept="image/*"
                                >
                                <input
                                    id="inbox-attach-video"
                                    type="file"
                                    class="sr-only"
                                    data-attach-input="video"
                                    accept="video/*"
                                >
                                <input
                                    id="inbox-attach-audio"
                                    type="file"
                                    class="sr-only"
                                    data-attach-input="audio"
                                    accept="audio/*"
                                >
                                <input
                                    type="file"
                                    name="media"
                                    class="sr-only"
                                    data-inbox-media
                                >
                            </div>
                            <button
                                type="button"
                                data-inbox-mic
                                class="inline-flex size-11 cursor-pointer items-center justify-center rounded-lg bg-primary text-primary-foreground"
                                title="Record audio"
                                aria-label="Record audio"
                            >
                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3Zm7 9a7 7 0 0 1-14 0m7 7v3" />
                                </svg>
                            </button>
                        </div>
                        <button type="submit" data-inbox-send class="inline-flex h-11 shrink-0 cursor-pointer items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground hidden">
                            Send
                        </button>
                    </div>
                    <div data-inbox-recorder class="hidden h-11 items-center gap-2">
                        <button type="button" data-record-cancel class="inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-lg text-destructive hover:bg-muted" title="Delete recording" aria-label="Delete recording">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M3 6h18" />
                                <path d="M8 6V4h8v2" />
                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                                <path d="M10 11v6" />
                                <path d="M14 11v6" />
                            </svg>
                        </button>
                        <div class="flex h-11 min-h-11 flex-1 items-center gap-2 rounded-lg bg-muted/40 px-3">
                            <span class="size-2.5 animate-pulse rounded-full bg-red-500"></span>
                            <span data-record-timer class="text-sm font-medium tabular-nums">0:00</span>
                            <span class="text-xs text-muted-foreground">Recording…</span>
                        </div>
                        <button type="button" data-record-send class="inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-primary text-primary-foreground" title="Send recording" aria-label="Send recording">
                            <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z" />
                            </svg>
                        </button>
                    </div>
                    @error('body')
                        <p class="mt-1 text-xs text-destructive">{{ $message }}</p>
                    @enderror
                    @error('media')
                        <p class="mt-1 text-xs text-destructive">{{ $message }}</p>
                    @enderror
                </form>
                @if ($conversation->isArchived())
                    <div class="shrink-0 border-t border-border px-4 py-3 text-center">
                        <p class="text-sm font-medium">This chat is archived</p>
                        <p class="mt-0.5 text-xs text-muted-foreground">You cannot send a reply.</p>
                    </div>
                @else
                    <div data-closed-banner class="{{ $conversation->isClosed() ? '' : 'hidden' }} shrink-0 border-t border-border px-4 py-3 text-center">
                        <p class="text-sm font-medium">This chat is closed</p>
                        <p class="mt-0.5 text-xs text-muted-foreground">You cannot send a reply.</p>
                    </div>
                @endif
            @else
                <div class="flex flex-1 flex-col items-center justify-center px-6 text-center">
                    <p class="text-sm font-medium">Select a conversation</p>
                    <p class="mt-1 max-w-sm text-sm text-muted-foreground">Open a chat from the left to read messages and reply in real time.</p>
                </div>
            @endif
        </section>
    </div>
@endsection

@section('dialogs')
    @if ($conversation)
        <div data-dialog="close-chat" class="fixed inset-0 z-50 hidden items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="close-chat-title">
            <div data-dialog-close class="absolute inset-0 bg-black/50"></div>
            <div class="relative w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-lg">
                <div class="border-b bg-muted/50 p-4">
                    <h2 id="close-chat-title" class="text-lg font-semibold">Close chat</h2>
                    <p class="text-sm text-muted-foreground">This conversation will be marked closed. You will not be able to send replies.</p>
                </div>
                <form method="POST" action="{{ route('inbox.update', $conversation) }}" class="flex justify-end gap-2 p-4">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="status" value="closed">
                    @if ($filters['search'] !== '')
                        <input type="hidden" name="search" value="{{ $filters['search'] }}">
                    @endif
                    <button type="button" data-dialog-close class="inline-flex h-10 cursor-pointer items-center rounded-lg px-4 text-sm font-medium hover:bg-muted">
                        Cancel
                    </button>
                    <button type="submit" class="inline-flex h-10 cursor-pointer items-center rounded-lg bg-red-600 px-4 text-sm font-medium text-white hover:bg-red-700">
                        Close chat
                    </button>
                </form>
            </div>
        </div>
    @endif

    @if ($conversation && ! $conversation->isArchived() && ! $conversation->isClosed())
        <div data-dialog="archive-chat" class="fixed inset-0 z-50 hidden items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="archive-chat-title">
            <div data-dialog-close class="absolute inset-0 bg-black/50"></div>
            <div class="relative w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-lg">
                <div class="border-b bg-muted/50 p-4">
                    <h2 id="archive-chat-title" class="text-lg font-semibold">Archive chat</h2>
                    <p class="text-sm text-muted-foreground">This conversation will be removed from Open chats and moved to Archived chats.</p>
                </div>
                <form method="POST" action="{{ route('inbox.destroy', $conversation) }}" class="flex justify-end gap-2 p-4">
                    @csrf
                    @method('DELETE')
                    @if ($filters['search'] !== '')
                        <input type="hidden" name="search" value="{{ $filters['search'] }}">
                    @endif
                    <button type="button" data-dialog-close class="inline-flex h-10 cursor-pointer items-center rounded-lg px-4 text-sm font-medium hover:bg-muted">
                        Cancel
                    </button>
                    <button type="submit" class="inline-flex h-10 cursor-pointer items-center rounded-lg bg-red-600 px-4 text-sm font-medium text-white hover:bg-red-700">
                        Archive chat
                    </button>
                </form>
            </div>
        </div>
    @endif

    <div data-dialog="delete-message" class="fixed inset-0 z-50 hidden items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="delete-message-title">
        <div data-delete-message-dismiss class="absolute inset-0 bg-black/50"></div>
        <div class="relative w-full max-w-md overflow-hidden rounded-xl border border-border bg-card shadow-lg">
            <div class="border-b bg-muted/50 p-4">
                <h2 id="delete-message-title" class="text-lg font-semibold">Delete message</h2>
                <p class="text-sm text-muted-foreground">Are you sure you want to delete this message? This cannot be undone.</p>
            </div>
            <p data-delete-message-error class="hidden px-4 pt-4 text-sm text-destructive"></p>
            <div class="flex justify-end gap-2 p-4">
                <button type="button" data-delete-message-dismiss class="inline-flex h-10 cursor-pointer items-center rounded-lg px-4 text-sm font-medium hover:bg-muted">
                    Cancel
                </button>
                <button type="button" data-delete-message-confirm class="inline-flex h-10 cursor-pointer items-center rounded-lg bg-red-600 px-4 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-60">
                    Delete
                </button>
            </div>
        </div>
    </div>

    <div
        data-image-lightbox
        class="fixed inset-0 z-[80] hidden flex-col bg-[#0b141a] text-white"
        role="dialog"
        aria-modal="true"
        aria-label="Photo preview"
    >
        <header class="flex h-14 shrink-0 items-center justify-between gap-3 bg-black/40 px-3">
            <div class="flex min-w-0 items-center gap-3">
                <span data-image-lightbox-avatar class="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-white/15 text-sm font-semibold"></span>
                <div class="min-w-0">
                    <p data-image-lightbox-author class="truncate text-sm font-medium"></p>
                    <p data-image-lightbox-time class="truncate text-xs text-white/60"></p>
                </div>
            </div>
            <button
                type="button"
                data-image-lightbox-close
                class="inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-full hover:bg-white/10"
                aria-label="Close preview"
                title="Close"
            >
                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
                    <path d="M6 6l12 12" />
                    <path d="M18 6 6 18" />
                </svg>
            </button>
        </header>
        <div data-image-lightbox-stage class="relative min-h-0 flex-1">
            <img data-image-lightbox-image alt="Photo" class="inbox-lightbox-image absolute inset-0 h-full w-full object-contain">
        </div>
    </div>

    <div data-message-actions class="pointer-events-none fixed inset-0 z-40 hidden" aria-hidden="true">
        <div
            data-message-actions-menu
            class="inbox-message-menu pointer-events-auto absolute w-[216px] overflow-hidden rounded-[12px] py-1 text-[15px] text-[#e9edef]"
            role="menu"
        >
            <button
                type="button"
                data-reply-message
                class="flex w-full cursor-pointer items-center gap-4 px-5 py-3 text-left hover:bg-white/5"
                role="menuitem"
            >
                <svg class="size-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M9 10 4 15l5 5" />
                    <path d="M4 15h9a7 7 0 0 0 7-7V6" />
                </svg>
                Reply
            </button>
            <div class="mx-4 h-px bg-white/10" data-reply-divider></div>
            <button
                type="button"
                data-delete-message
                class="flex w-full cursor-pointer items-center gap-4 px-5 py-3 text-left hover:bg-white/5"
                role="menuitem"
            >
                <svg class="size-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M3 6h18" />
                    <path d="M8 6V4h8v2" />
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
                    <path d="M10 11v6" />
                    <path d="M14 11v6" />
                </svg>
                Delete
            </button>
        </div>
    </div>
@endsection