<div class="flex gap-3 items-start">
    <div class="w-9 h-9 bg-blue-100 rounded-full flex items-center justify-center text-sm flex-shrink-0 mt-0.5">
        {{ $note->typeIcon() }}
    </div>
    <div class="flex-1 bg-gray-50 rounded-xl px-4 py-3 text-sm border border-gray-100">
        <div class="flex items-center justify-between mb-1">
            <span class="font-semibold text-gray-700">{{ $note->user->name }}</span>
            <span class="text-xs text-gray-400" title="{{ $note->created_at->format('d M Y H:i') }}">
                {{ $note->created_at->diffForHumans() }}
            </span>
        </div>
        <p class="text-gray-600 whitespace-pre-line leading-relaxed">{{ $note->note }}</p>
        @if($note->type !== 'note')
            <span class="inline-block mt-1.5 text-xs bg-white border border-gray-200 text-gray-500 px-2 py-0.5 rounded capitalize">
                {{ $note->type }}
            </span>
        @endif
    </div>
</div>
