@php
    $outgoing = ($message->direction->value ?? $message->direction) === 'outgoing';
@endphp

<div class="wa-bubble-row {{ $outgoing ? 'wa-bubble-row-out' : 'wa-bubble-row-in' }}">
    <div class="wa-bubble {{ $outgoing ? 'wa-bubble-out' : 'wa-bubble-in' }}">
        @foreach ($message->attachments as $attachment)
            <div style="margin-bottom:8px;overflow:hidden;border-radius:8px;background:rgba(0,0,0,.18);">
                @if (str_starts_with((string) $attachment->mime, 'image/'))
                    <img src="{{ asset('storage/'.$attachment->path) }}" alt="{{ $attachment->file_name }}" style="display:block;max-width:320px;max-height:260px;object-fit:cover;" />
                @elseif (str_starts_with((string) $attachment->mime, 'video/'))
                    <video src="{{ asset('storage/'.$attachment->path) }}" controls style="display:block;max-width:320px;max-height:260px;"></video>
                @elseif (str_starts_with((string) $attachment->mime, 'audio/'))
                    <audio src="{{ asset('storage/'.$attachment->path) }}" controls style="width:260px;max-width:100%;"></audio>
                @else
                    <a href="{{ asset('storage/'.$attachment->path) }}" target="_blank" style="display:flex;gap:8px;align-items:center;color:inherit;padding:10px;text-decoration:none;">
                        <span>file</span>
                        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $attachment->file_name ?: 'Документ' }}</span>
                    </a>
                @endif
            </div>
        @endforeach

        @if ($message->body)
            <div style="white-space:pre-wrap;overflow-wrap:anywhere;">{{ $message->body }}</div>
        @endif

        <div class="wa-bubble-meta">
            <span>{{ $message->created_at?->format('H:i') }}</span>
            @if ($outgoing)
                @livewire('whatsapp.message-status', ['status' => $message->status->value ?? $message->status], key('status-'.$message->id.'-'.($message->status->value ?? $message->status)))
            @endif
        </div>
    </div>
</div>