@php
    $roleLabel = session('activeProfileRoleLabel')
        ? __(session('activeProfileRoleLabel'))
        : null;
@endphp

{{-- Centered auto-dismissing overlay — works reliably in WebView without depending on Alpine timing --}}
<div id="profile-switch-banner"
     style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);">
    <div style="background:#fff;border-radius:12px;padding:24px 28px;max-width:360px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.25);">

        @if(session('activeProfilePhoto'))
            <img src="{{ Storage::url(session('activeProfilePhoto')) }}"
                 alt="{{ session('activeProfileName') }}"
                 style="width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;box-shadow:0 2px 8px rgba(0,0,0,0.15);">
        @endif

        <div style="color:#6b7280;font-size:13px;margin-bottom:4px;text-align:left;">{{ __('You are now acting as') }}</div>
        <div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:6px;text-align:left;">{{ session('activeProfileName') }}</div>

        @if($roleLabel)
            <div style="font-size:12px;color:#6b7280;text-align:left;">{{ $roleLabel }}</div>
        @endif
    </div>
</div>

<script>
    (function() {
        var banner = document.getElementById('profile-switch-banner');
        if (!banner) return;
        // Dismiss on tap/click
        banner.addEventListener('click', function() {
            banner.style.display = 'none';
        });
        // Auto-dismiss after 3 seconds
        setTimeout(function() {
            banner.style.opacity = '0';
            banner.style.transition = 'opacity 0.4s';
            setTimeout(function() { banner.style.display = 'none'; }, 400);
        }, 3000);
    })();
</script>