@php
    $applicationFormInModal = request()->header('Turbo-Frame') === 'loan-form-modal';
    $leanAskMode = $leanAskMode ?? 'create';
    $askLocked = (bool) ($askLocked ?? false);
    $askAmountLocked = (bool) ($askAmountLocked ?? $askLocked);
    $feeAttachMode = (bool) ($feeAttachMode ?? ($leanAskMode === 'fee_attach'));
    $feeFundingLocked = (bool) ($feeFundingLocked ?? false);

    $wizardStep = 1;
    if ($feeAttachMode) {
        $wizardStep = 3;
    } elseif ($errors->any()) {
        $bag = $errors->keys();
        $step3Keys = array_filter($bag, static fn ($k) => str_starts_with((string) $k, 'applicant_')
            || str_starts_with((string) $k, 'suspense_')
            || in_array((string) $k, ['wallet_fee_amount', 'application_date'], true));
        $step2Keys = array_filter($bag, static fn ($k) => in_array((string) $k, [
            'product_name', 'amount_requested', 'term_unit', 'term_value', 'interest_rate', 'notes', 'purpose',
        ], true) || str_starts_with((string) $k, 'custom_') || str_starts_with((string) $k, 'biodata_'));
        if ($step3Keys !== []) {
            $wizardStep = 3;
        } elseif ($step2Keys !== []) {
            $wizardStep = 2;
        } else {
            $wizardStep = 1;
        }
    }

    $wizardShowNavActions = ! $feeAttachMode && $wizardStep < 3;
    $wizardShowFinalActions = $feeAttachMode || $wizardStep >= 3;

    $draftId = (int) old('draft_id', $draftApplication?->id ?? 0);

    $modalTitle = $applicationFormInModal
        ? ($feeAttachMode && $draftId > 0 && ($draftApplication ?? null)
            ? 'Attach fees · '.($draftApplication->reference ?? 'Application')
            : ($draftId > 0 && ($draftApplication ?? null)
                ? 'Resume draft · '.($draftApplication->reference ?? 'Application')
                : (($lockPrefilledClient ?? false) && ($prefilledClient ?? null)
                    ? 'Loan application · '.($prefilledClient->full_name ?? 'Client')
                    : 'Loan application')))
        : $title;
    $showPendingDraftsPicker = ! $feeAttachMode && $draftId <= 0 && ($pendingDrafts ?? collect())->isNotEmpty();
    $feeAttachFormAction = ($feeAttachMode && $draftApplication)
        ? route('loan.book.applications.attach_fees', $draftApplication)
        : route('loan.book.applications.store');
@endphp

<x-loan.modal-form :title="$modalTitle" :subtitle="$applicationFormInModal ? null : $subtitle" :maxWidth="$applicationFormInModal ? 'lg' : 'full'">
        @php
            $mapped = $loanFormMappedFields ?? [];
            $mappedBookingSegments = $mappedBookingFieldDisplaySegments ?? [];
            $createFeeMeta = (array) ($draftApplication?->form_meta ?? []);
            // Prefer live linked-payment coverage over stale form_meta (product fee changes after disbursement).
            // In fee-attach mode never pretends fees are covered from stale meta — operator must select funding.
            $createFeesFulfilled = ($feeAttachMode ?? false)
                ? false
                : ($draftApplication
                    ? app(\App\Services\Loan\ApplicationOriginationGateService::class)->applicationFeesAreCovered($draftApplication)
                    : false);
            $createFeeAttachedPayments = collect((array) data_get($createFeeMeta, 'fee_selected_payments', []))
                ->filter(static fn ($row): bool => is_array($row) && (int) ($row['id'] ?? 0) > 0)
                ->map(static function (array $row): array {
                    $id = (int) $row['id'];
                    $amount = round((float) ($row['amount'] ?? 0), 2);
                    $reference = (string) ($row['reference'] ?? ('PAY-#'.$id));

                    return [
                        'id' => $id,
                        'amount' => $amount,
                        'reference' => $reference,
                        'label' => $reference.' | '.number_format($amount, 2).' (already attached)',
                        'payment_kind' => (string) ($row['payment_kind'] ?? 'attached'),
                        'status' => 'attached',
                        'channel' => '',
                        'transaction_at' => '',
                    ];
                })
                ->values()
                ->all();
            // If meta payments list is empty but pay-ins are linked, surface them for the fee UI.
            if ($createFeesFulfilled && $createFeeAttachedPayments === [] && $draftApplication) {
                $createFeeAttachedPayments = \App\Models\LoanBookPayment::query()
                    ->where('loan_book_application_id', $draftApplication->id)
                    ->whereNull('merged_into_payment_id')
                    ->orderBy('id')
                    ->get(['id', 'amount', 'reference', 'payment_kind'])
                    ->map(static function ($payment): array {
                        $id = (int) $payment->id;
                        $amount = round((float) $payment->amount, 2);
                        $reference = (string) ($payment->reference ?? ('PAY-#'.$id));

                        return [
                            'id' => $id,
                            'amount' => $amount,
                            'reference' => $reference,
                            'label' => $reference.' | '.number_format($amount, 2).' (already attached)',
                            'payment_kind' => (string) ($payment->payment_kind ?? 'attached'),
                            'status' => 'attached',
                            'channel' => '',
                            'transaction_at' => '',
                        ];
                    })
                    ->values()
                    ->all();
            }
            $createFeeWalletAmount = round((float) old(
                'wallet_fee_amount',
                data_get($createFeeMeta, 'fee_wallet_funding_amount', 0)
            ), 2);
        @endphp

        <div
            @class([
                'lean-ask-workspace client-form-sheet grid items-start gap-6',
                'mx-auto max-w-3xl grid-cols-1' => $applicationFormInModal,
                'max-w-7xl grid-cols-1 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,1.4fr)]' => ! $applicationFormInModal,
            ])
            x-data="loanProductPicker(
                @js($productMetaByName ?? []),
                @js((string) old('term_unit', $draftApplication?->term_unit ?? '')),
                @js(old('suspense_payment_ids', (array) data_get(
                    $draftApplication?->form_meta,
                    'fee_selected_payment_ids',
                    array_values(array_filter([data_get($draftApplication?->form_meta, 'fee_selected_payment_id')]))
                ))),
                @js((int) ($showPendingDraftsPicker ? ($pendingDrafts ?? collect())->count() : 0)),
                @js($productFieldConfig ?? []),
                @js($clientLookupUrl ?? ''),
                @js((bool) ($lockPrefilledClient ?? false)),
                @js((string) old('loan_client_id', $draftApplication?->loan_client_id ?? $selectedClientId ?? '')),
                @js(route('loan.tools.discover_products')),
                @js((string) old('product_name', $draftApplication?->product_name ?? $defaultProductName ?? '')),
                @js((bool) ($guarantorRequiredForSubmit ?? false)),
                @js((int) ($guarantorCount ?? 0)),
                @js((bool) ($purposeRequiredForSubmit ?? false)),
                @js((bool) ($applicantOtpRequired ?? false)),
                @js((bool) $applicationFormInModal)
            )"
            data-products-store-url="{{ route('loan.book.applications.products.store') }}"
            data-suspense-options-url="{{ route('loan.book.applications.suspense_options') }}"
            data-discover-products-url="{{ route('loan.tools.discover_products') }}"
            data-product-bootstrap-url="{{ route('loan.book.applications.product_bootstrap') }}"
            data-lean-ask="1"
            data-lean-ask-wizard="{{ $feeAttachMode ? '0' : '1' }}"
            data-lean-ask-modal="{{ $applicationFormInModal ? '1' : '0' }}"
            data-wizard-step="{{ (int) $wizardStep }}"
            @if ($feeAttachMode) data-fee-attach-mode="1" @endif
            data-fees-fulfilled="{{ $createFeesFulfilled ? '1' : '0' }}"
            data-fee-wallet-amount="{{ $createFeeWalletAmount }}"
            data-fee-attached-payments='@json($createFeeAttachedPayments)'
            data-allow-concurrent-individual-loans="{{ ($allowConcurrentIndividualLoans ?? false) ? '1' : '0' }}"
            data-allow-balance-checkoff="{{ ($allowBalanceCheckoff ?? false) ? '1' : '0' }}"
            data-initial-active-loan-handling="{{ old('active_loan_handling', data_get($draftApplication?->form_meta, 'active_loan_handling', '')) }}"
            data-initial-requested-amount="{{ old('amount_requested', $draftApplication?->amount_requested ?? '') }}"
        >
            @if ($showPendingDraftsPicker)
            <div
                class="shrink-0 rounded-xl border border-amber-200 bg-amber-50/70 p-3 shadow-sm sm:p-4"
                x-show="pendingDraftCount > 0"
                data-loan-pending-drafts
                :data-drafts-expanded="draftsPanelOpen ? '1' : '0'"
            >
                <div class="flex flex-wrap items-center justify-between gap-2">
                    <div class="min-w-0 flex-1">
                        <h3 class="text-sm font-semibold text-amber-900">Incomplete applications (<span x-text="pendingDraftCount"></span>)</h3>
                        <p class="mt-0.5 text-xs text-amber-800" x-show="draftsPanelOpen" x-cloak>Saved drafts or applications awaiting fee coverage.</p>
                        <p class="mt-0.5 text-xs text-amber-800" x-show="!draftsPanelOpen">Resume a saved draft without losing your place.</p>
                    </div>
                    <button
                        type="button"
                        class="inline-flex shrink-0 items-center rounded-lg border border-amber-300 bg-white px-3 py-1.5 text-xs font-semibold text-amber-800 hover:bg-amber-100"
                        @click="draftsPanelOpen = !draftsPanelOpen"
                    >
                        <span x-text="draftsPanelOpen ? 'Hide drafts' : 'Show drafts'"></span>
                    </button>
                </div>
                @if(($pendingDrafts ?? collect())->isNotEmpty())
                    <div
                        id="pending-drafts"
                        data-loan-pending-drafts-list
                        class="mt-2 max-h-28 space-y-1.5 overflow-y-auto pr-1"
                        x-show="draftsPanelOpen"
                        x-cloak
                    >
                        @foreach($pendingDrafts as $draft)
                            <a
                                href="{{ route('loan.book.applications.create', ['draft_id' => $draft->id]) }}"
                                class="flex items-center justify-between rounded-lg border border-amber-200 bg-white px-3 py-1.5 text-xs text-slate-700 hover:bg-amber-50"
                            >
                                <span class="min-w-0 truncate">{{ $draft->reference }} · {{ $draft->loanClient?->full_name ?? 'Unknown client' }}</span>
                                <span class="ml-2 shrink-0 font-semibold text-amber-700">Resume</span>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
            @endif

            <aside class="space-y-4 xl:sticky xl:top-4 xl:self-start" data-lean-ask-aside>
                @include('loan.book.applications.partials.lean-ask.header')
                @include('loan.book.applications.partials.lean-ask.lock-banner')
                @include('loan.book.applications.partials.client-due-diligence-consumer', [
                    'clientDueDiligence' => $clientDueDiligence ?? null,
                ])
                <div x-show="!selectedClientId" x-cloak class="rounded-lg border border-dashed border-slate-300 bg-white px-4 py-4 text-center text-xs text-slate-500">
                    Select a client to view summary and readiness.
                </div>
                @include('loan.book.applications.partials.lean-ask.workflow-status')
            </aside>

            <form method="post" action="{{ $feeAttachFormAction }}" enctype="multipart/form-data" class="lean-ask-form-shell client-form relative" data-lean-ask-form @if ($feeAttachMode) data-fee-attach-mode="1" @endif>
                @csrf
                @if ($applicationFormInModal)
                    <input type="hidden" name="_loan_modal" value="1">
                @endif
                <input type="hidden" name="draft_id" value="{{ $draftId > 0 ? $draftId : '' }}">
                @if ($feeAttachMode)
                    <input type="hidden" name="fee_attach" value="1">
                    {{-- Anchors for fee JS (panels 1–2 are hidden in fee-attach mode). --}}
                    <input type="hidden" id="loan_client_id" name="loan_client_id" value="{{ old('loan_client_id', $draftApplication?->loan_client_id ?? $selectedClientId ?? '') }}">
                    <input type="hidden" id="product_name" name="product_name" value="{{ old('product_name', $draftApplication?->product_name ?? $defaultProductName ?? '') }}">
                    <input type="hidden" id="amount_requested" name="amount_requested" value="{{ old('amount_requested', $draftApplication?->amount_requested ?? '') }}">
                @endif
                <input type="hidden" name="save_as_draft" x-model="saveAsDraft">
                <input type="hidden" name="branch" id="branch" value="{{ old('branch', $draftApplication?->branch ?? $prefilledClient?->branch ?? '') }}">

                <div class="client-form-scroll space-y-5">
                    <div class="lean-ask-mobile-identity">
                        @include('loan.book.applications.partials.lean-ask.header')
                    </div>
                    @if ($feeAttachMode)
                        <div class="rounded-lg border border-indigo-200 bg-indigo-50/70 px-3 py-2 text-xs text-indigo-900">
                            Fee attach only — client, product, amount, and certification stay locked. Select unposted pay-ins or wallet below.
                        </div>
                    @endif

                    @unless ($feeAttachMode)
                    <div class="client-form-steps">
                        <div class="client-form-steps__meta">
                            <p class="client-form-steps__count">
                                Step <span x-text="wizardStep"></span> of <span x-text="wizardTotalSteps"></span>
                            </p>
                            <p class="client-form-steps__title" x-text="wizardStepTitle()"></p>
                        </div>
                        <div class="client-form-steps__track" role="list" aria-label="Application progress">
                            <template x-for="n in wizardTotalSteps" :key="n">
                                <button
                                    type="button"
                                    class="client-form-steps__dot"
                                    :class="{ 'is-active': wizardStep === n, 'is-done': wizardStep > n }"
                                    :aria-current="wizardStep === n ? 'step' : null"
                                    @click="wizardGoTo(n)"
                                    :aria-label="'Go to step ' + n"
                                ></button>
                            </template>
                        </div>
                    </div>
                    @endunless

                    @include('loan.partials.modal-validation-alert', [
                        'title' => __('Application could not be saved. Fix the issues below and try again.'),
                        'sticky' => $applicationFormInModal,
                        'id' => 'loan-application-validation-summary',
                    ])

                    @if ($draftId <= 0 && ! empty($prefillEligibilityWarnings))
                        <div class="rounded-lg border border-amber-200 bg-amber-50/80 px-4 py-3 text-sm text-amber-900">
                            <div class="flex flex-wrap items-start justify-between gap-3">
                                <p class="font-semibold">Eligibility notice</p>
                                @if (($lockPrefilledClient ?? false) && ($prefilledClient ?? null) && auth()->user()?->hasLoanPermission('clients.update'))
                                    <a
                                        href="{{ route('loan.clients.edit', $prefilledClient).'#lending-profile' }}"
                                        class="inline-flex shrink-0 items-center rounded-lg border border-amber-300 bg-white px-3 py-1 text-xs font-semibold text-amber-900 hover:bg-amber-100"
                                    >
                                        Update lending profile
                                    </a>
                                @endif
                            </div>
                            <ul class="mt-1 list-disc space-y-1 pl-5 text-xs text-amber-800">
                                @foreach ($prefillEligibilityWarnings as $warning)
                                    <li>{{ $warning }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @unless ($feeAttachMode)
                    <div data-wizard-panel="1" x-show="!wizardEnabled || wizardStep === 1 || wizardIsDesktopLayout()" x-cloak>
                        @include('loan.book.applications.partials.lean-ask.client-selection')
                        <p class="mt-2 text-xs text-slate-500" x-show="!selectedClientId" x-cloak>Select a client to continue — readiness and fees depend on who you pick.</p>
                    </div>

                    <div data-wizard-panel="2" x-show="!wizardEnabled || wizardStep === 2 || wizardIsDesktopLayout()" x-cloak>
                        @include('loan.book.applications.partials.lean-ask.loan-request', [
                            'purposeRequiredForSubmit' => $purposeRequiredForSubmit ?? false,
                        ])

                        @if (config('loan_backdating.enabled'))
                            <div class="mt-4 rounded-lg border border-amber-200 bg-amber-50/60 p-4" data-lean-ask-step="backdate">
                                <label for="application_date" class="block text-xs font-semibold text-amber-900">Application date (backdating enabled)</label>
                                <input
                                    type="date"
                                    id="application_date"
                                    name="application_date"
                                    value="{{ old('application_date', optional($draftApplication?->submitted_at)->toDateString()) }}"
                                    min="{{ now()->subDays((int) config('loan_backdating.max_days_back', 60))->toDateString() }}"
                                    max="{{ now()->toDateString() }}"
                                    class="mt-1 w-full max-w-xs rounded-lg border-amber-300 text-sm"
                                    @disabled($askLocked ?? false)
                                >
                                @error('application_date')
                                    <p class="mt-1 text-xs text-red-600" data-loan-field-error="application_date">{{ $message }}</p>
                                @enderror
                            </div>
                        @endif
                    </div>
                    @endunless

                    <div data-wizard-panel="3" x-show="!wizardEnabled || wizardStep === 3 || wizardIsDesktopLayout()" x-cloak class="space-y-5">
                        @unless ($feeAttachMode)
                            @include('loan.book.applications.partials.spouse-consent', [
                                'draftApplication' => $draftApplication ?? null,
                                'prefilledClient' => $prefilledClient ?? $draftApplication?->loanClient ?? null,
                            ])

                            @include('loan.book.applications.partials.applicant-certification', [
                                'draftApplication' => $draftApplication ?? null,
                                'prefilledClient' => $prefilledClient ?? $draftApplication?->loanClient ?? null,
                                'forceApplicantCertificationOpen' => true,
                                'applicantOtpRequired' => $applicantOtpRequired ?? false,
                                'applicantSignatureRequired' => $applicantSignatureRequired ?? false,
                            ])
                        @endunless

                        <div class="lean-ask-fee-panel space-y-4 rounded-xl border border-slate-200 bg-white p-3 shadow-sm sm:p-4" data-loan-fee-section>
                            <div class="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
                                <div>
                                    <h4 class="text-sm font-semibold uppercase tracking-wide text-indigo-900">Pre-booking fees</h4>
                                    <p class="mt-0.5 text-xs text-indigo-800">Required before this application can be saved. Extra pay-in stays Unposted.</p>
                                </div>
                                <span class="text-lg font-semibold tabular-nums text-indigo-900" x-text="requiredFeeBadge"></span>
                            </div>
                            <template x-if="requiredFeeBreakdown.length > 0">
                                <ul class="space-y-1 rounded-xl border border-indigo-100 bg-white/80 px-3 py-2 text-xs text-slate-700">
                                    <template x-for="fee in requiredFeeBreakdown" :key="fee.key">
                                        <li class="flex items-center justify-between gap-3">
                                            <span class="min-w-0 break-words" x-text="fee.name + (fee.stageLabel ? ' · ' + fee.stageLabel : '')"></span>
                                            <span class="shrink-0 font-semibold tabular-nums" x-text="fee.amountLabel"></span>
                                        </li>
                                    </template>
                                    <li class="flex items-center justify-between gap-3 border-t border-indigo-100 pt-1.5 font-semibold text-indigo-900">
                                        <span>Required total</span>
                                        <span class="tabular-nums" x-text="requiredFeeTotal.toFixed(2)"></span>
                                    </li>
                                </ul>
                            </template>
                            <p x-show="feeOptionsLoading" x-cloak class="text-xs text-indigo-700">Fetching configured fees, wallet balance, and unposted payments…</p>
                            <p x-show="!feeOptionsLoading && requiredFeeTotal <= 0" x-cloak class="text-xs text-slate-500">No pre-booking fee is configured for this product.</p>
                            @include('loan.book.applications.partials.fee-funding-sources', [
                                'draftApplication' => $draftApplication ?? null,
                                'askLocked' => $askLocked ?? false,
                                'feeFundingLocked' => $feeFundingLocked,
                                'feeFundingCompact' => true,
                                'feeAttachMode' => $feeAttachMode,
                            ])
                            <template x-for="paymentId in unmatchedPayerConfirmedIds" :key="'confirm-' + paymentId">
                                <input type="hidden" name="unmatched_payer_confirmed_ids[]" :value="paymentId">
                            </template>
                        </div>
                    </div>
                </div>

                <div class="client-form-actions lean-ask-wizard-actions" data-loan-application-form-actions>
                    @unless ($feeAttachMode)
                    <div
                        class="lean-ask-wizard-actions__row"
                        x-show="wizardShowsNavActions()"
                        @if (! $wizardShowNavActions) style="display: none;" @endif
                    >
                        <button
                            type="button"
                            class="client-form-btn client-form-btn--ghost"
                            @click="wizardGoBack()"
                            :disabled="wizardStep === 1"
                            :class="{ 'is-disabled': wizardStep === 1 }"
                        >Back</button>
                        <button
                            type="submit"
                            @click="prepareDraftSave($event)"
                            data-busy-label="Saving draft…"
                            class="client-form-btn client-form-btn--secondary"
                            :class="{ 'is-disabled': !canSaveDraft() }"
                            :title="canSaveDraft() ? 'Save this loan request and finish later.' : draftMinimumHint()"
                        >Save draft</button>
                        <button type="button" class="client-form-btn client-form-btn--primary" @click="wizardGoNext()">Continue</button>
                    </div>
                    @endunless
                    <div
                        class="lean-ask-wizard-actions__row lean-ask-wizard-actions__row--final"
                        @unless ($feeAttachMode)
                            x-show="wizardShowsFinalActions()"
                            @if (! $wizardShowFinalActions && ! $applicationFormInModal) style="display: none;" @endif
                        @endunless
                    >
                        @unless ($feeAttachMode)
                            <button
                                type="button"
                                class="client-form-btn client-form-btn--ghost lean-ask-wizard-nav"
                                x-show="wizardEnabled"
                                x-cloak
                                @click="wizardGoBack()"
                            >Back</button>
                        @endunless
                        <x-loan.form-modal-actions>
                            @if ($feeAttachMode)
                                <button
                                    type="submit"
                                    formnovalidate
                                    name="attach_fees_submit"
                                    value="1"
                                    @click="saveAsDraft='0'; const f=$el.form?.querySelector('[name=save_as_draft]'); if(f) f.value='0';"
                                    data-busy-label="Attaching fees…"
                                    class="client-form-btn client-form-btn--primary client-form-btn--save"
                                    title="Attach selected unposted pay-ins or wallet toward required fees only."
                                >Attach fees</button>
                            @else
                                <button
                                    type="submit"
                                    @click="prepareDraftSave($event)"
                                    data-busy-label="Saving draft…"
                                    class="client-form-btn client-form-btn--secondary"
                                    :class="{ 'is-disabled': !canSaveDraft() }"
                                    :title="canSaveDraft() ? 'Save this loan request and finish later.' : draftMinimumHint()"
                                >Save draft</button>
                                <button
                                    type="submit"
                                    @click="saveAsDraft='0'"
                                    data-busy-label="Saving application…"
                                    class="client-form-btn client-form-btn--primary client-form-btn--save"
                                    title="Save the loan ask. Guarantors and security are completed on Application 360 before submit for approval."
                                >Save application</button>
                            @endif
                        </x-loan.form-modal-actions>
                    </div>
                </div>
            </form>
        </div>

        <style>
            .lean-ask-workspace [data-lean-ask-step="client"],
            .lean-ask-workspace [data-lean-ask-step="request"],
            .lean-ask-workspace [data-lean-ask-step="fees"],
            .lean-ask-workspace [data-lean-ask-step="consent"],
            .lean-ask-workspace [data-loan-application-signature] {
                scroll-margin-top: 4.5rem;
            }

            @if ($applicationFormInModal)
            /* Mobile fee step: compact stats, stacked controls, footer that does not eat the hint. */
            .lean-ask-workspace[data-lean-ask-modal='1'] [data-loan-fee-section],
            .lean-ask-workspace[data-lean-ask-modal='1'] .lean-ask-fee-panel {
                background: #fff !important;
                border: 1px solid #e2e8f0 !important;
                padding: 0.85rem !important;
            }
            .lean-ask-workspace[data-lean-ask-modal='1'] .client-form-scroll {
                padding-bottom: 1.25rem !important;
            }
            .lean-ask-workspace[data-lean-ask-modal='1'] .lean-ask-fee-funding [data-searchable-select-wrapper] {
                margin-top: 0;
                min-width: 0;
                width: 100%;
            }
            .lean-ask-workspace[data-lean-ask-modal='1'] .lean-ask-fee-coverage {
                margin-bottom: 0.25rem;
            }
            @media (max-width: 1023px) {
                .loan-form-modal:has(.lean-ask-workspace[data-lean-ask-wizard='1']) .lean-ask-wizard-actions__row--final:not([style*="display: none"]) {
                    display: grid !important;
                    grid-template-columns: 1fr 1fr;
                    grid-template-areas:
                        "save save"
                        "back draft";
                    gap: 0.6rem !important;
                }
                .loan-form-modal:has([data-fee-attach-mode='1']) .loan-form-modal__actions {
                    display: grid !important;
                    grid-template-columns: 1fr 1fr;
                    gap: 0.6rem;
                    width: 100%;
                }
                .loan-form-modal:has([data-fee-attach-mode='1']) .loan-form-modal__actions > * {
                    width: 100% !important;
                    min-height: 48px;
                }
            }
            @endif

            @if ($feeAttachMode && $applicationFormInModal)
            /* Inline so Attach fees scrolls even when deferred Vite CSS is stale. */
            #loan-form-modal:has([data-fee-attach-mode='1']),
            .loan-form-modal:has([data-fee-attach-mode='1']) {
                display: flex !important;
                flex-direction: column !important;
                min-height: 0 !important;
                height: 90dvh !important;
                max-height: 90dvh !important;
                overflow: hidden !important;
            }
            .loan-modal-overlay__panel:has([data-fee-attach-mode='1']) {
                display: flex !important;
                flex-direction: column !important;
                min-height: 0 !important;
                max-height: 90dvh !important;
                overflow: hidden !important;
            }
            .loan-form-modal:has([data-fee-attach-mode='1']) .loan-form-modal__body,
            .loan-form-modal:has([data-fee-attach-mode='1']) .platform-modal-body {
                display: flex !important;
                flex-direction: column !important;
                flex: 1 1 0% !important;
                min-height: 0 !important;
                overflow: hidden !important;
            }
            .loan-form-modal:has([data-fee-attach-mode='1']) .lean-ask-workspace.client-form-sheet,
            .loan-form-modal:has([data-fee-attach-mode='1']) .lean-ask-form-shell.client-form {
                display: flex !important;
                flex-direction: column !important;
                flex: 1 1 0% !important;
                min-height: 0 !important;
                height: auto !important;
                max-height: none !important;
                overflow: hidden !important;
            }
            .loan-form-modal:has([data-fee-attach-mode='1']) .client-form-scroll {
                flex: 1 1 0% !important;
                min-height: 0 !important;
                overflow-x: hidden !important;
                overflow-y: scroll !important;
                -webkit-overflow-scrolling: touch !important;
                overscroll-behavior: contain;
                touch-action: pan-y;
            }
            .loan-form-modal:has([data-fee-attach-mode='1']) [data-loan-application-form-actions] {
                flex-shrink: 0 !important;
                background: #fff !important;
            }
            @media (max-width: 1023px) {
                .loan-form-modal:has([data-fee-attach-mode='1']) [data-lean-ask-aside] {
                    display: none !important;
                }
                .loan-form-modal:has([data-fee-attach-mode='1']) .lean-ask-mobile-identity {
                    display: block !important;
                }
            }
            @media (min-width: 1024px) {
                .loan-form-modal:has([data-fee-attach-mode='1']) .lean-ask-mobile-identity {
                    display: none !important;
                }
            }
            @endif
        </style>
</x-loan.modal-form>