{{-- Full-message viewer: buttons dispatch $dispatch('show-sms', { number, text }). --}}
<div x-data="{ sms: { number: '', text: '' } }" @show-sms.window="sms = $event.detail; $dispatch('open-modal', 'sms-message')">
    <x-modal name="sms-message" title="Message" maxWidth="lg">
        <div class="space-y-3">
            <div class="flex items-center gap-2 text-sm text-ink-500"><x-heroicon-m-phone class="h-4 w-4" /> <span class="tabular-nums" x-text="sms.number || '—'"></span></div>
            <div class="rounded-2xl rounded-tl-sm bg-ink-100 px-4 py-3 text-sm whitespace-pre-line text-ink-800 dark:bg-ink-800 dark:text-ink-100" x-text="sms.text"></div>
            <p class="text-xs text-ink-400"><span x-text="(sms.text || '').length"></span> characters · <span x-text="Math.max(1, Math.ceil((sms.text || '').length / 160))"></span> SMS part(s)</p>
        </div>
    </x-modal>
</div>