@php
    $fromManager = $message->isFromChatManager();
    $mediaUrl = $message->mediaUrl();
    $deleteUrl = route('inbox.messages.destroy', [$conversation, $message]);
    $quoted = $message->replyTo;
    $quoteLabel = $quoted === null
        ? ''
        : ($quoted->isFromChatManager() ? 'You' : ($conversation->user_name ?: $conversation->user_id));
@endphp
<article
    data-message-id="{{ $message->id }}"
    data-sender-type="{{ $message->sender_type }}"
    data-message-type="{{ $message->message_type }}"
    data-receipt="{{ $message->status }}"
    data-preview="{{ $message->previewText() }}"
    data-delete-url="{{ $deleteUrl }}"
    @if ($message->reply_to_id)
        data-reply-to-id="{{ $message->reply_to_id }}"
    @endif
    class="group flex {{ $fromManager ? 'justify-end' : 'justify-start' }}"
>
    <div class="relative max-w-[85%] md:max-w-[75%]">
        <div class="relative overflow-hidden rounded-2xl px-3 py-2 pr-9 text-sm {{ $fromManager ? 'inbox-bubble-out' : 'inbox-bubble-in' }}">
            <button
                type="button"
                data-message-menu-toggle
                class="absolute top-1 right-1 z-10 inline-flex size-6 cursor-pointer items-center justify-center rounded-full bg-black/50 text-white outline-none opacity-0 shadow-sm transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 group-data-[menu-open]:opacity-100"
                title="Message actions"
                aria-label="Message actions"
                aria-haspopup="menu"
                aria-expanded="false"
            >
                <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="m6 9 6 6 6-6" />
                </svg>
            </button>
            @if ($quoted)
                <button
                    type="button"
                    data-quote-id="{{ $quoted->id }}"
                    class="mb-1.5 flex w-full overflow-hidden rounded-md bg-black/5 text-left"
                >
                    <span class="w-[3px] shrink-0 {{ $fromManager ? 'bg-[#06cf9c]' : 'bg-[#25d366]' }}"></span>
                    <span class="min-w-0 flex-1 px-2 py-1.5">
                        @unless ($quoted->trashed())
                            <p class="truncate text-[11px] font-semibold text-[#025144]">{{ $quoteLabel }}</p>
                        @endunless
                        <p class="truncate text-[11px] text-[#667781] {{ $quoted->trashed() ? 'italic' : '' }}">{{ $quoted->quotePreview() }}</p>
                    </span>
                </button>
            @endif
            @if ($message->message_type === 'image' && $mediaUrl)
                <button type="button" data-chat-image class="mb-1 block w-full cursor-pointer overflow-hidden rounded-lg border-0 bg-transparent p-0" aria-label="View photo">
                    <img src="{{ $mediaUrl }}" alt="Photo" class="max-h-64 w-full object-contain">
                </button>
            @elseif ($message->message_type === 'video' && $mediaUrl)
                <video src="{{ $mediaUrl }}" class="mb-1 max-h-64 rounded-lg" controls></video>
            @elseif ($message->message_type === 'audio' && $mediaUrl)
                <audio src="{{ $mediaUrl }}" class="mb-1 w-56" controls></audio>
            @endif
            @if ($message->body !== '')
                <p data-message-body class="whitespace-pre-wrap break-words">{{ $message->body }}</p>
            @endif
            <span class="mt-1 flex items-center justify-end gap-1">
                <time class="text-[10px] text-[#667781]" datetime="{{ $message->created_at?->toIso8601String() }}">
                    {{ $message->created_at?->timezone(config('app.timezone'))->format('H:i') }}
                </time>
                @if ($fromManager)
                    @include('admin.partials.inbox-receipt', ['status' => $message->status])
                @endif
            </span>
        </div>
    </div>
</article>