{{-- Floating dialer widget — hidden by default, appears on inbound call --}}
<div id="dialer-widget" class="d-none" style="
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    width: 280px; background: #fff; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); overflow: hidden;">
    <div class="d-flex align-items-center justify-content-between p-3" style="background: #1d3557; color: #fff;">
        <span id="dialer-widget-title">Incoming Call</span>
        <button class="btn btn-sm btn-close btn-close-white" id="dialer-widget-close"></button>
    </div>
    <div class="p-3 text-center">
        <div id="dialer-widget-number" class="fs-5 fw-bold mb-3">--</div>
        <div class="d-flex gap-2 justify-content-center">
            <button id="dialer-widget-answer" class="btn btn-success">Answer</button>
            <button id="dialer-widget-reject" class="btn btn-danger">Reject</button>
        </div>
    </div>
</div>