{{-- Mobile FAB + bottomsheet Actions. Place outside the page grid. --}}
@php
    $actionsView = $actionsView ?? null;
    $title = $title ?? 'Actions';
@endphp
@if ($actionsView)
<div
    x-data="{ open: false }"
    @keydown.escape.window="open = false"
    class="lg:hidden"
>
    <button
        type="button"
        class="clinical-actions-fab"
        @click="open = ! open"
        :aria-expanded="open.toString()"
        aria-label="Open actions"
    >
        <svg x-show="! open" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
        </svg>
        <svg x-show="open" x-cloak class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
        </svg>
    </button>

    <template x-teleport="body">
        <div
            x-show="open"
            x-cloak
            class="fixed inset-0 z-[60] lg:hidden"
            role="dialog"
            aria-modal="true"
            aria-label="{{ $title }}"
        >
            <div
                class="absolute inset-0 bg-slate-900/40 backdrop-blur-[2px]"
                @click="open = false"
                x-show="open"
                x-transition:enter="ease-out duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
            ></div>

            <div
                class="absolute inset-x-0 bottom-0 max-h-[85vh] overflow-y-auto rounded-t-3xl bg-white shadow-2xl"
                style="padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px))"
                @click.stop
                x-show="open"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="translate-y-full"
                x-transition:enter-end="translate-y-0"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="translate-y-0"
                x-transition:leave-end="translate-y-full"
            >
                <div class="flex justify-center pb-1 pt-3">
                    <div class="h-1 w-10 rounded-full bg-slate-200"></div>
                </div>
                <div class="flex items-center justify-between px-5 pb-2">
                    <h2 class="text-base font-semibold text-slate-900">{{ $title }}</h2>
                    <button type="button" class="rounded-full p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600" @click="open = false" aria-label="Close">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
                        </svg>
                    </button>
                </div>
                <div class="space-y-2 px-4 pb-4">
                    @include($actionsView)
                </div>
            </div>
        </div>
    </template>
</div>
@endif