<div class="rail border-t px-4 py-2" style="border-color: var(--portal-border);">
    @foreach($profiles as $profile)
        @php
            $isActive = $profile->id === $activeId;
            $name = $profile->person?->name_ar ?? $profile->person?->name ?? '—';
        @endphp
        <button type="button"
                wire:click="select({{ $profile->id }})"
                wire:loading.attr="disabled"
                @class(['flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold transition-colors'])
                style="{{ $isActive
                    ? 'background: var(--brand-500); color: var(--brand-fg); border-color: var(--brand-500);'
                    : 'background: var(--portal-surface); color: var(--portal-muted); border-color: var(--portal-border);' }}"
                @if($isActive) aria-current="true" @endif>
            <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full text-[10px] font-bold"
                  style="{{ $isActive
                      ? 'background: color-mix(in oklab, var(--brand-fg) 22%, transparent);'
                      : 'background: var(--brand-100); color: var(--brand-700);' }}">
                {{ mb_substr($name, 0, 1) }}
            </span>
            <span class="max-w-24 truncate">{{ $name }}</span>
        </button>
    @endforeach
</div>
