<div class="d-inline-block">
    @can('synapse.use')
    <button wire:click="open" class="btn btn-md" title="Synapse Document Review">
        <i class="mdi mdi-brain" style="color:#7c3aed;font-size:1.1rem;"></i>
    </button>

    @if($open)
        @teleport('body')
        <div class="offcanvas offcanvas-end show" tabindex="-1" style="--bs-offcanvas-width: 520px;" role="dialog">
            <div class="offcanvas-header border-bottom" style="border-top:3px solid #7c3aed;">
                <div class="d-flex align-items-center gap-2">
                    <span class="badge text-white" style="background-color:#7c3aed;font-size:.65rem;">
                        <i class="mdi mdi-brain"></i> Synapse
                    </span>
                    <h6 class="mb-0 fw-semibold">Document Review</h6>
                </div>
                <button type="button" class="btn-close text-dark" wire:click="close"></button>
            </div>

            <div class="offcanvas-body bg-light d-flex flex-column gap-3">
                <div>
                    <p class="text-muted small mb-2">{{ $document->display_name }}</p>
                    <button wire:click="review"
                            wire:loading.attr="disabled"
                            class="btn btn-sm text-white"
                            style="background-color:#7c3aed;">
                        <span wire:loading.remove wire:target="review">
                            <i class="mdi mdi-file-check-outline me-1"></i>Review
                        </span>
                        <span wire:loading wire:target="review">
                            <span class="spinner-border spinner-border-sm me-1"></span>
                            Reviewing…
                        </span>
                    </button>
                </div>

                @if($error)
                    <div class="alert alert-danger py-2 px-3 small mb-0">
                        <i class="mdi mdi-alert-circle-outline me-1"></i>{{ $error }}
                    </div>
                @endif

                @if($running || $ran)
                    <div class="rounded p-3 small flex-grow-1"
                         style="background:#f5f3ff;white-space:pre-wrap;overflow-y:auto;line-height:1.6;"
                         wire:stream="synapseOutput">
                    </div>
                @endif

                @if($ran)
                    <small class="text-muted" style="font-size:.65rem;">
                        <i class="mdi mdi-information-outline me-1"></i>Output only — act manually.
                    </small>
                @endif
            </div>
        </div>
        @endteleport
    @endif
    @endcan
</div>
