@php
    // eager-load nothing heavy; simple list
    $threads = $record->threads()->orderBy('id')->get();
    $senderMap = \App\Models\OrderRequestThread::SENDER;
@endphp

<div
    class="space-y-3 max-h-[65vh] overflow-y-auto pr-2"
    wire:poll.2s="$refresh"
    x-data
    x-init="$nextTick(() => { $el.scrollTop = $el.scrollHeight; });"
    x-on:chat-updated.window="$el.scrollTop = $el.scrollHeight"
>
    @forelse ($threads as $t)
        @php
            // highlight “our” side if System Admin (0)
            $mine = $t->sender === \App\Models\OrderRequestThread::SENDER_SYSTEM_ADMIN;
        @endphp

        <div class="flex {{ $mine ? 'justify-end' : 'justify-start' }}">
            <div class="max-w-[80%] rounded-2xl px-4 py-3
                        {{ $mine
                            ? 'bg-primary-600 text-white'
                            : 'bg-gray-100 dark:bg-gray-800 dark:text-gray-100' }}">
                <div class="text-xs opacity-70 mb-1">
                    {{ $senderMap[$t->sender] ?? 'Unknown' }} • {{ $t->created_at->diffForHumans() }}
                </div>

                <div class="whitespace-pre-line text-sm">{{ $t->message }}</div>
            </div>
        </div>
    @empty
        <div class="text-sm text-gray-500 dark:text-gray-400">
            No messages yet.
        </div>
    @endforelse
</div>