<!-- Chat List -->
<div class="col-12">
    <div class="card shadow" style="height: 100%;">
        <div class="card-header">
            <h6 class="mb-0 text-dark">Conversations</h6>
        </div>
        <div id="chat-list" class="list-group list-group-flush" style="height: calc(100% - 56px); overflow-y: auto;">
            <div class="text-center py-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-3 small">Loading conversations...</p>
            </div>
        </div>
    </div>
</div>