@props([
    'senderName' => 'Interviewer',
    'isCandidate' => false,
    'color' => '#6366f1',
    'message' => '',
    'timestamp' => null,
])

@php
    $resolvedColor = $isCandidate ? '#38bdf8' : ($color ?? '#6366f1');
    $timeStr = $timestamp ? \Carbon\Carbon::parse($timestamp)->format('H:i:s') : now()->format('H:i:s');

    // Hex to rgba helper for background opacity
    $hex = ltrim($resolvedColor, '#');
    if (strlen($hex) == 3) {
        $r = hexdec(substr($hex,0,1).substr($hex,0,1));
        $g = hexdec(substr($hex,1,1).substr($hex,1,1));
        $b = hexdec(substr($hex,2,1).substr($hex,2,1));
    } else {
        $r = hexdec(substr($hex,0,2));
        $g = hexdec(substr($hex,2,2));
        $b = hexdec(substr($hex,4,2));
    }
    $bgRgba = "rgba({$r}, {$g}, {$b}, 0.1)";
    $borderRgba = "rgba({$r}, {$g}, {$b}, 0.35)";
@endphp

<div {{ $attributes->merge(['class' => 'chat-message mb-2 p-2.5 rounded-lg transition-all']) }} style="background: {{ $bgRgba }}; border-color: {{ $resolvedColor }};">
    <div class="flex justify-between items-center mb-1 gap-2">
        <div class="flex items-center gap-1.5 min-w-0">
            <span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: {{ $resolvedColor }};"></span>
            <strong class="text-xs truncate" style="color: {{ $resolvedColor }};">{{ $senderName }}</strong>
            @if($isCandidate)
                <span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-sky-500/20 text-sky-300 border border-sky-500/30 shrink-0">Candidate</span>
            @else
                <span class="text-[9.5px] uppercase font-bold px-1.5 py-0.2 rounded bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 shrink-0">Panelist</span>
            @endif
        </div>
        <span class="text-[10.5px] text-slate-500 shrink-0 font-mono">{{ $timeStr }}</span>
    </div>
    <div class="text-slate-200 text-xs leading-relaxed font-medium pl-3 break-words">{{ $message }}</div>
</div>