@props([
    'message',                            // SupportMessage
    'isOwner' => false,                   // true = mensaje del cliente que abrió el ticket
])

@php
    $author = $message->user;
    $isStaff = $author && $author->hasAnyRole(['System Admin', 'Administrator', 'Super Admin', 'Admin Comercial']);
    $authorName = $author ? trim(($author->first_name ?? '') . ' ' . ($author->last_name ?? '')) ?: $author->email : 'Sistema';
    $align = $isOwner ? 'end' : 'start';
    $bgClass = $isOwner ? 'bg-light-primary' : 'bg-light';
    $borderClass = $isOwner ? 'border-primary' : '';
@endphp

{{-- Mensaje individual de un thread de soporte — reusable client/admin.
     isOwner=true para mensajes del cliente; isOwner=false para staff/admin. --}}
<div class="d-flex justify-content-{{ $align }} mb-3">
    <div class="card border {{ $borderClass }} {{ $bgClass }}" style="max-width: 85%;">
        <div class="card-body p-3">
            <div class="d-flex justify-content-between align-items-center mb-2 fs-8">
                <span class="fw-bold text-gray-900">
                    @if($isStaff)
                        <i class="fas fa-headset text-primary me-1"></i>{{ $authorName }}
                        <span class="badge badge-light-primary fs-9 ms-1">Soporte</span>
                    @else
                        <i class="fas fa-user me-1"></i>{{ $authorName }}
                    @endif
                </span>
                <span class="text-muted ms-3" title="{{ $message->created_at->format('d/m/Y H:i') }}">
                    {{ $message->created_at->diffForHumans() }}
                </span>
            </div>
            <div class="text-gray-800 fs-7" style="white-space: pre-wrap; word-break: break-word;">{{ $message->body }}</div>
        </div>
    </div>
</div>