{{-- Conversation Modal Component - Telephone Transcription Display --}}
<div class="modal fade" id="{{ $modalId }}" tabindex="-1" aria-labelledby="{{ $modalId }}Title" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content whatsapp-modal" style="height: 85vh;">
            {{-- Modal Header - Sistema Estandarizado --}}
            <div class="modal-header bg-gradient-primary d-flex justify-content-between align-items-center">
                <h5 class="modal-title text-white" id="{{ $modalId }}Title">{{ $title ?? 'Detalle de Conversación' }}</h5>
                <span class="text-white text-xs fw-semibold" id="{{ $modalId }}ConversationId"></span>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            {{-- Modal Body - Metadata y Mensajes --}}
            <div class="modal-body" id="{{ $modalId }}Body" style="flex: 1; overflow-y: auto;">
                {{-- Loading State --}}
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Cargando...</span>
                    </div>
                </div>
            </div>

            {{-- Optional Footer --}}
            @if($showFooter ?? false)
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
            @endif
        </div>
    </div>
</div>