@props(['message', 'meta' => null, 'right' => false])
{{-- Conversation bubble; right-aligned and brand-coloured for the support / driver side. --}}
<div @class(['flex', 'justify-end' => $right])>
    <div @class(['max-w-[80%] rounded-2xl px-4 py-2 text-sm', 'bg-brand-600 text-white' => $right, 'bg-gray-100 dark:bg-gray-800' => ! $right])>
        <p class="whitespace-pre-line break-words">{{ $message }}</p>
        @if ($meta)<p class="mt-1 text-xs opacity-75">{{ $meta }}</p>@endif
    </div>
</div>