@php
    /** @var array $chatState injected by ChatController@index */
    $chatState = $chatState ?? ['counts' => [], 'devices' => [], 'urls' => [], 'csrfToken' => csrf_token()];
    $counts = $chatState['counts'] ?? [];
    $tplCounts = $counts['templates'] ?? [];
    $devices = $chatState['devices'] ?? [];
@endphp

<x-layouts.user :title="__('Chat')" nav-key="more" page="user-chat-index">

    <main class="max-w-none mx-auto px-4 sm:px-6 py-4 h-[calc(100vh-64px)] overflow-hidden">
        <div class="h-full min-h-0 grid grid-cols-1 xl:grid-cols-[250px_400px_minmax(0,1fr)] gap-3">
            <aside
                class="bg-paper-0 border border-paper-200 rounded-[14px] shadow-card p-3 overflow-hidden flex flex-col min-h-0">
                <div class="font-serif text-[17px] leading-tight text-wa-deep italic">{{ __('filters') }}</div>
                <h1 class="font-serif text-[22px] leading-tight tracking-[-0.01em]">{{ __('Chat inbox') }}</h1>

                <div class="mt-3 space-y-0.5" id="filter-list">
                    <button data-filter="all" aria-pressed="true"
                        class="filter-btn w-full px-3 py-1.5 rounded-xl text-[13px] font-medium flex items-center gap-2 text-ink-700 hover:bg-paper-50 [&[aria-pressed=true]]:bg-wa-deep [&[aria-pressed=true]]:text-paper-0">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M3 5h10l-1 8H4zM3 3h10v2H3z" />
                        </svg>
                        <span class="flex-1 text-left">{{ __('All chats') }}</span>
                        <span data-count="all"
                            class="rounded-full border border-current px-1.5 py-0.5 text-[10px] {{ $counts['all'] ?? 0 ? '' : 'hidden' }}">{{ $counts['all'] ?? 0 }}</span>
                    </button>
                    <button data-filter="scheduled" aria-pressed="false"
                        class="filter-btn w-full px-3 py-1.5 rounded-xl text-[13px] font-medium flex items-center gap-2 text-ink-700 hover:bg-paper-50 [&[aria-pressed=true]]:bg-wa-deep [&[aria-pressed=true]]:text-paper-0">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <rect x="2.5" y="3.5" width="11" height="10" rx="1.5" />
                            <path d="M2.5 6.5h11M5 2v3M11 2v3" />
                        </svg>
                        <span class="flex-1 text-left">{{ __('Scheduled') }}</span>
                        <span data-count="scheduled"
                            class="rounded-full border border-current px-1.5 py-0.5 text-[10px] {{ $counts['scheduled'] ?? 0 ? '' : 'hidden' }}">{{ $counts['scheduled'] ?? 0 }}</span>
                    </button>
                    <button data-filter="archived" aria-pressed="false"
                        class="filter-btn w-full px-3 py-1.5 rounded-xl text-[13px] font-medium flex items-center gap-2 text-ink-700 hover:bg-paper-50 [&[aria-pressed=true]]:bg-wa-deep [&[aria-pressed=true]]:text-paper-0">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M3 6h10v7H3zM2.5 3.5h11V6h-11zM6 9h4" />
                        </svg>
                        <span class="flex-1 text-left">{{ __('Archived') }}</span>
                        <span data-count="archived"
                            class="rounded-full border border-current px-1.5 py-0.5 text-[10px] {{ $counts['archived'] ?? 0 ? '' : 'hidden' }}">{{ $counts['archived'] ?? 0 }}</span>
                    </button>
                    <button data-filter="sent" aria-pressed="false"
                        class="filter-btn w-full px-3 py-1.5 rounded-xl text-[13px] font-medium flex items-center gap-2 text-ink-700 hover:bg-paper-50 [&[aria-pressed=true]]:bg-wa-deep [&[aria-pressed=true]]:text-paper-0">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M2.5 8.5 5.5 12 8 8.5M7 9l3 3.5 4-8" />
                        </svg>
                        <span class="flex-1 text-left">{{ __('Sent') }}</span>
                        <span data-count="sent"
                            class="rounded-full border border-current px-1.5 py-0.5 text-[10px] {{ $counts['sent'] ?? 0 ? '' : 'hidden' }}">{{ $counts['sent'] ?? 0 }}</span>
                    </button>
                    <button data-filter="pending" aria-pressed="false"
                        class="filter-btn w-full px-3 py-1.5 rounded-xl text-[13px] font-medium flex items-center gap-2 text-ink-700 hover:bg-paper-50 [&[aria-pressed=true]]:bg-wa-deep [&[aria-pressed=true]]:text-paper-0">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <circle cx="8" cy="8" r="5.5" />
                            <path d="M8 5v3l2 1.5" />
                        </svg>
                        <span class="flex-1 text-left">{{ __('Pending') }}</span>
                        <span data-count="pending"
                            class="rounded-full border border-current px-1.5 py-0.5 text-[10px] {{ $counts['pending'] ?? 0 ? '' : 'hidden' }}">{{ $counts['pending'] ?? 0 }}</span>
                    </button>
                    <button data-filter="failed" aria-pressed="false"
                        class="filter-btn w-full px-3 py-1.5 rounded-xl text-[13px] font-medium flex items-center gap-2 text-ink-700 hover:bg-paper-50 [&[aria-pressed=true]]:bg-wa-deep [&[aria-pressed=true]]:text-paper-0">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <circle cx="8" cy="8" r="5.5" />
                            <path d="M5.5 5.5 10.5 10.5M10.5 5.5 5.5 10.5" />
                        </svg>
                        <span class="flex-1 text-left">{{ __('Failed') }}</span>
                        <span data-count="failed"
                            class="rounded-full border border-current px-1.5 py-0.5 text-[10px] {{ $counts['failed'] ?? 0 ? '' : 'hidden' }}">{{ $counts['failed'] ?? 0 }}</span>
                    </button>
                </div>

                <div class="my-3 border-t border-dashed border-paper-200"></div>

                <div class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500 mb-1.5">
                    {{ __('Templates') }}</div>
                <div class="space-y-1.5">
                    <button data-template-category="marketing"
                        class="w-full px-3 py-1.5 rounded-xl bg-white border border-paper-200 flex items-center gap-2 text-[13px] hover:border-wa-deep">
                        <span class="w-2 h-2 rounded-full bg-accent-coral"></span>
                        <span class="flex-1 text-left font-medium">{{ __('Marketing') }}</span>
                        <span data-tpl-count="marketing"
                            class="font-mono text-[11px] text-ink-500">{{ $tplCounts['marketing'] ?? 0 }}</span>
                    </button>
                    <button data-template-category="utility"
                        class="w-full px-3 py-1.5 rounded-xl bg-white border border-paper-200 flex items-center gap-2 text-[13px] hover:border-wa-deep">
                        <span class="w-2 h-2 rounded-full bg-wa-green"></span>
                        <span class="flex-1 text-left font-medium">{{ __('Utility') }}</span>
                        <span data-tpl-count="utility"
                            class="font-mono text-[11px] text-ink-500">{{ $tplCounts['utility'] ?? 0 }}</span>
                    </button>
                    <button data-template-category="authentication"
                        class="w-full px-3 py-1.5 rounded-xl bg-white border border-paper-200 flex items-center gap-2 text-[13px] hover:border-wa-deep">
                        <span class="w-2 h-2 rounded-full bg-[#7B61FF]"></span>
                        <span class="flex-1 text-left font-medium">{{ __('Authentication') }}</span>
                        <span data-tpl-count="authentication"
                            class="font-mono text-[11px] text-ink-500">{{ $tplCounts['authentication'] ?? 0 }}</span>
                    </button>
                </div>

                <div class="my-3 border-t border-dashed border-paper-200"></div>

                <div class="rounded-[14px] border border-wa-green/40 bg-wa-mint/40 p-2.5">
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full bg-wa-green"></span>
                        <span class="font-semibold text-[13px]">{{ __('Live inbox') }}</span>
                    </div>
                    <p class="mt-1 text-[11px] text-ink-600 leading-snug">{{ count($devices) }} devices connected.
                        Replies update on the selected queue.</p>
                </div>
            </aside>

            <section
                class="bg-paper-0 border border-paper-200 rounded-[14px] shadow-card p-3 flex flex-col min-h-0 overflow-hidden">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <div class="font-serif text-[17px] leading-tight text-wa-deep italic">{{ __('bulk send') }}
                        </div>
                        <h2 class="font-serif text-[22px] leading-tight tracking-[-0.01em]">{{ __('Message queues') }}
                        </h2>
                    </div>
                    <button id="compose-btn" type="button"
                        class="w-10 h-10 rounded-full border border-paper-200 bg-white hover:bg-wa-mint flex items-center justify-center"
                        title="{{ __('Compose queue') }}">
                        <svg viewBox="0 0 16 16" class="w-4 h-4" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M3 13h3L13 6 10 3 3 10zM9.5 3.5l3 3M10 13h3" />
                        </svg>
                    </button>
                </div>

                <div class="mt-3 relative">
                    <svg viewBox="0 0 16 16" class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-ink-500"
                        fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="7" cy="7" r="5" />
                        <path d="m11 11 3 3" />
                    </svg>
                    <input id="queue-search"
                        class="w-full pl-9 pr-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10"
                        placeholder="{{ __('Search queues...') }}">
                </div>

                <div class="mt-2 grid grid-cols-[minmax(0,1fr)_112px] items-center gap-2">
                    <select id="device-select"
                        class="w-full min-w-0 px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] font-medium focus:outline-none focus:border-wa-deep">
                        <option value="">{{ __('All devices') }}</option>
                        @foreach ($devices as $device)
                            <option value="{{ $device['id'] ?? '' }}">
                                {{ $device['label'] }}{{ $device['online'] ?? true ? '' : ' — offline' }}</option>
                        @endforeach
                    </select>
                    <select id="sort-select"
                        class="w-full min-w-0 px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] font-medium focus:outline-none focus:border-wa-deep">
                        <option value="date-desc">{{ __('Newest') }}</option>
                        <option value="date-asc">{{ __('Oldest') }}</option>
                        <option value="name-asc">{{ __('A to Z') }}</option>
                        <option value="name-desc">{{ __('Z to A') }}</option>
                    </select>
                </div>

                <div class="mt-2 rounded-xl bg-paper-50 px-3 py-1.5 text-[11px] text-ink-600 leading-snug">
                    {{ __('Select a queue to open the thread and send a test reply.') }}</div>

                <div id="queue-list" class="mt-2 flex-1 min-h-0 overflow-y-auto space-y-1.5 pr-1">
                    {{-- Shimmer skeletons during the first conversations.list()
 fetch. The JS replaces this whole node on success. --}}
                    @for ($i = 0; $i < 4; $i++)
                        <div class="rounded-[14px] border border-paper-200 bg-white p-2.5">
                            <div class="flex items-start gap-3">
                                <div class="skeleton w-9 h-9 rounded-full shrink-0"></div>
                                <div class="flex-1 min-w-0 space-y-1.5">
                                    <div class="flex items-center gap-2">
                                        <div class="skeleton h-3 w-2/5"></div>
                                        <div class="skeleton ml-auto h-2.5 w-8"></div>
                                    </div>
                                    <div class="skeleton h-2.5 w-4/5"></div>
                                    <div class="flex items-center gap-2">
                                        <div class="skeleton h-2 w-12"></div>
                                        <div class="skeleton ml-auto h-2 w-14"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endfor
                </div>

                <div class="mt-2 grid grid-cols-2 gap-2">
                    <button id="send-all"
                        class="inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-full bg-ink-900 text-paper-0 text-[12px] font-semibold hover:bg-wa-deep">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M2 8 14 3 10 14 7 9z" />
                        </svg>
                        Send to all
                    </button>
                    <button id="send-selected"
                        class="inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-full border border-paper-200 bg-white text-[12px] font-semibold hover:border-wa-deep">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M3 8l3 3 7-7" />
                            <circle cx="3" cy="3" r="1.5" />
                        </svg>
                        Send to selected
                    </button>
                </div>
            </section>

            <section
                class="bg-paper-0 border border-paper-200 rounded-[14px] shadow-card overflow-hidden flex flex-col min-h-0">
                <div class="px-4 py-3 border-b border-paper-200 bg-paper-0 flex items-center gap-3">
                    <div id="thread-avatar"
                        class="w-10 h-10 rounded-full border border-ink-900/15 bg-[#FFF6E0] grid place-items-center font-bold text-[13px]">
                        --</div>
                    <div class="flex-1 min-w-0">
                        <div id="thread-title" class="font-semibold truncate">{{ __('Select a queue') }}</div>
                        <div class="flex items-center gap-1.5 text-[12px] text-ink-500">
                            <span id="thread-dot" class="w-2 h-2 rounded-full bg-ink-500"></span>
                            <span id="thread-meta">{{ __('No active thread') }}</span>
                        </div>
                    </div>
                    <button id="thread-ai" type="button"
                        class="w-8 h-8 rounded-full border border-wa-deep/40 bg-gradient-to-br from-wa-mint to-paper-0 hover:from-wa-mint hover:to-wa-mint flex items-center justify-center disabled:opacity-40 disabled:cursor-not-allowed"
                        title="{{ __('AI assist') }}">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5 text-wa-deep" fill="none"
                            stroke="currentColor" stroke-width="1.6">
                            <path
                                d="M8 2.5L9.4 6 13 7l-3.6 1L8 11.5 6.6 8 3 7l3.6-1zM12 11.5l.6 1.4L14 13.5l-1.4.6L12 15.5l-.6-1.4L10 13.5l1.4-.6z" />
                        </svg>
                    </button>
                    <button id="thread-archive" type="button"
                        class="w-8 h-8 rounded-full border border-paper-200 bg-white hover:bg-paper-50 flex items-center justify-center disabled:opacity-40 disabled:cursor-not-allowed"
                        title="{{ __('Archive') }}">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M3 6h10v7H3zM2.5 3.5h11V6h-11zM6 9h4" />
                        </svg>
                    </button>
                    <button id="thread-more" type="button"
                        class="w-8 h-8 rounded-full border border-paper-200 bg-white hover:bg-paper-50 flex items-center justify-center disabled:opacity-40 disabled:cursor-not-allowed"
                        title="{{ __('More') }}">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="currentColor">
                            <circle cx="8" cy="3.5" r="1" />
                            <circle cx="8" cy="8" r="1" />
                            <circle cx="8" cy="12.5" r="1" />
                        </svg>
                    </button>
                </div>

                <div id="message-list"
                    class="flex-1 min-h-0 overflow-y-auto p-4 space-y-3 bg-[radial-gradient(circle_at_18%_22%,rgba(21,40,31,0.06)_0_1px,transparent_1px),radial-gradient(circle_at_72%_64%,rgba(21,40,31,0.06)_0_1px,transparent_1px)] bg-[length:28px_28px]">
                </div>

                <div class="px-3 py-2 border-t border-paper-200 bg-paper-0">
                    {{-- "Scheduled for…" indicator. JS toggles .hidden when the
 user picks a date/time from the schedule modal. --}}
                    <div id="schedule-indicator"
                        class="hidden mb-2 rounded-2xl border border-[#13478A]/30 bg-[#13478A]/5 px-3 py-2 flex items-center gap-2 text-[12px] font-semibold text-[#13478A]">
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <circle cx="8" cy="8" r="5.5" />
                            <path d="M8 5v3l2 1.5" />
                        </svg>
                        <span id="schedule-indicator-text" class="flex-1"></span>
                        <button id="schedule-indicator-clear" type="button"
                            class="w-5 h-5 rounded-full border border-[#13478A]/30 hover:bg-white grid place-items-center"
                            title="{{ __('Cancel schedule') }}">
                            <svg viewBox="0 0 16 16" class="w-3 h-3" fill="none" stroke="currentColor"
                                stroke-width="1.8">
                                <path d="M4 4l8 8M12 4l-8 8" />
                            </svg>
                        </button>
                    </div>

                    {{-- Media preview banner (shown after picking a file from the
 attach menu, before the message is sent). The JS toggles
 .hidden and fills #media-preview-body with a thumbnail
 + filename + size; the X button clears the pending file. --}}
                    <div id="media-preview"
                        class="hidden mb-2 rounded-2xl border border-wa-deep/20 bg-wa-mint/40 px-3 py-2 flex items-center gap-3">
                        <div id="media-preview-thumb"
                            class="w-12 h-12 rounded-xl bg-paper-0 border border-paper-200 grid place-items-center overflow-hidden shrink-0">
                        </div>
                        <div class="flex-1 min-w-0">
                            <div id="media-preview-name" class="font-semibold text-[13px] truncate"></div>
                            <div id="media-preview-meta" class="text-[11px] text-ink-500 font-mono"></div>
                        </div>
                        <button id="media-preview-remove" type="button"
                            class="w-7 h-7 rounded-full border border-paper-200 bg-white hover:bg-paper-50 grid place-items-center"
                            title="{{ __('Remove attachment') }}">
                            <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                stroke-width="1.6">
                                <path d="M4 4l8 8M12 4l-8 8" />
                            </svg>
                        </button>
                    </div>

                    <div
                        class="relative flex items-end gap-1.5 rounded-[24px] border border-paper-200 bg-white pr-1.5 pl-1.5 py-1.5 shadow-card focus-within:border-wa-deep focus-within:ring-4 focus-within:ring-wa-deep/10">
                        <button id="attach-btn"
                            class="shrink-0 w-9 h-9 rounded-full hover:bg-wa-mint grid place-items-center text-ink-700"
                            title="{{ __('Attach') }}" aria-expanded="false" aria-controls="attach-menu">
                            <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                stroke-width="1.5">
                                <path d="M8 3v10M3 8h10" />
                            </svg>
                        </button>
                        <div id="attach-menu"
                            class="hidden absolute left-1 bottom-12 z-30 w-56 rounded-2xl border border-paper-200 bg-paper-0 shadow-soft p-1.5">
                            <button data-attach="Template"
                                class="w-full px-3 py-2 rounded-xl text-left text-[13px] font-medium hover:bg-wa-mint flex items-center gap-2">
                                <svg viewBox="0 0 16 16" class="w-3.5 h-3.5 text-wa-deep" fill="none"
                                    stroke="currentColor" stroke-width="1.5">
                                    <rect x="2.5" y="2.5" width="11" height="11" rx="1.5" />
                                    <path d="M2.5 6h11M6 13.5V6" />
                                </svg>
                                Template
                            </button>
                            <button data-attach="Document"
                                class="w-full px-3 py-2 rounded-xl text-left text-[13px] font-medium hover:bg-wa-mint flex items-center gap-2">
                                <svg viewBox="0 0 16 16" class="w-3.5 h-3.5 text-wa-deep" fill="none"
                                    stroke="currentColor" stroke-width="1.5">
                                    <path d="M4 2h6l3 3v9H4zM10 2v3h3" />
                                </svg>
                                Document
                            </button>
                            <button data-attach="Photos & videos"
                                class="w-full px-3 py-2 rounded-xl text-left text-[13px] font-medium hover:bg-wa-mint flex items-center gap-2">
                                <svg viewBox="0 0 16 16" class="w-3.5 h-3.5 text-wa-deep" fill="none"
                                    stroke="currentColor" stroke-width="1.5">
                                    <rect x="2.5" y="3" width="11" height="10" rx="1.5" />
                                    <circle cx="6" cy="6.5" r="1.2" />
                                    <path d="M3 11l3-3 3 3 2-2 2 2" />
                                </svg>
                                Photos & videos
                            </button>
                            <button data-attach="Audio"
                                class="w-full px-3 py-2 rounded-xl text-left text-[13px] font-medium hover:bg-wa-mint flex items-center gap-2">
                                <svg viewBox="0 0 16 16" class="w-3.5 h-3.5 text-wa-deep" fill="none"
                                    stroke="currentColor" stroke-width="1.5">
                                    <path d="M8 2v12M5 6a3 3 0 0 1 6 0M3 8a5 5 0 0 0 10 0" />
                                </svg>
                                Audio
                            </button>
                            <button data-attach="Scheduled time"
                                class="w-full px-3 py-2 rounded-xl text-left text-[13px] font-medium hover:bg-wa-mint flex items-center gap-2">
                                <svg viewBox="0 0 16 16" class="w-3.5 h-3.5 text-wa-deep" fill="none"
                                    stroke="currentColor" stroke-width="1.5">
                                    <circle cx="8" cy="8" r="5.5" />
                                    <path d="M8 5v3l2 1.5" />
                                </svg>
                                Scheduled time
                            </button>
                            <button data-attach="Send your location"
                                class="w-full px-3 py-2 rounded-xl text-left text-[13px] font-medium hover:bg-wa-mint flex items-center gap-2">
                                <svg viewBox="0 0 16 16" class="w-3.5 h-3.5 text-wa-deep" fill="none"
                                    stroke="currentColor" stroke-width="1.5">
                                    <path d="M8 2.5a5 5 0 0 0-5 5c0 3.8 5 7 5 7s5-3.2 5-7a5 5 0 0 0-5-5Z" />
                                    <circle cx="8" cy="7.5" r="1.6" />
                                </svg>
                                Send your location
                            </button>
                        </div>
                        <input type="file" id="media-input"
                            accept="image/*,video/*,audio/*,application/pdf,.doc,.docx" class="hidden">
                        <button id="emoji-btn"
                            class="shrink-0 w-9 h-9 rounded-full hover:bg-wa-mint grid place-items-center text-ink-700"
                            title="{{ __('Emoji') }}" aria-expanded="false" aria-controls="emoji-panel">
                            <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                                stroke-width="1.5">
                                <circle cx="8" cy="8" r="5.5" />
                                <path d="M5.8 9.5s.8 1.3 2.2 1.3 2.2-1.3 2.2-1.3M6.2 6.4h.01M9.8 6.4h.01" />
                            </svg>
                        </button>
                        {{-- Real emoji picker — emoji-picker-element web component
 is mounted here by the JS on first open. Markup is just
 a host wrapper; categories / search / skin tones come
 from the package. --}}
                        <div id="emoji-panel"
                            class="hidden absolute left-11 bottom-12 z-30 rounded-2xl border border-paper-200 bg-paper-0 shadow-soft overflow-hidden">
                            <div id="emoji-mount"></div>
                        </div>
                        <button id="format-bold"
                            class="shrink-0 w-9 h-9 rounded-full hover:bg-wa-mint grid place-items-center text-ink-700 font-bold text-[13px]"
                            title="{{ __('Bold') }}">B</button>
                        <textarea id="composer" rows="1"
                            class="flex-1 min-h-9 max-h-[92px] px-3 py-2 bg-transparent text-[13px] resize-none focus:outline-none leading-relaxed"
                            placeholder="{{ __('Type a message') }}"></textarea>
                        <button id="send-btn"
                            class="shrink-0 w-10 h-10 rounded-full bg-ink-900 text-paper-0 hover:bg-wa-deep disabled:opacity-40 disabled:cursor-not-allowed grid place-items-center"
                            title="{{ __('Send') }}" disabled>
                            <svg viewBox="0 0 16 16" class="w-4 h-4" fill="none" stroke="currentColor"
                                stroke-width="1.5">
                                <path d="M2 8 14 3 10 14 7 9z" />
                            </svg>
                        </button>
                    </div>
                    <div id="quick-bar" class="hidden">
                        <button
                            data-template="Hi @{{ name }}, thanks for your reply. Our team will help you shortly."
                            class="px-2.5 py-1 rounded-full bg-paper-50 hover:bg-wa-mint">{{ __('Support reply') }}</button>
                        <button
                            data-template="Your order update is ready. Please confirm your preferred delivery slot."
                            class="px-2.5 py-1 rounded-full bg-paper-50 hover:bg-wa-mint">{{ __('Order update') }}</button>
                        <button data-template="Use code NEW26 before Jan 10 to claim the offer."
                            class="px-2.5 py-1 rounded-full bg-paper-50 hover:bg-wa-mint">{{ __('Offer code') }}</button>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <div id="template-modal"
        class="hidden fixed inset-0 z-50 items-center justify-center p-5 bg-[rgba(11,31,28,0.46)]">
        <div
            class="w-full max-w-5xl max-h-[86vh] overflow-hidden flex flex-col bg-paper-0 border border-paper-200 rounded-2xl shadow-[0_28px_80px_-35px_rgba(11,31,28,0.55)]">
            <div class="px-5 py-4 border-b border-paper-200 flex items-start justify-between gap-4">
                <div>
                    <div id="template-modal-eyebrow" class="font-serif text-[18px] italic text-wa-deep leading-tight">
                        {{ __('templates') }}</div>
                    <h3 class="font-serif text-[24px] leading-tight tracking-[-0.01em]">{{ __('Choose a template') }}
                    </h3>
                    <p class="mt-1 text-[12px] text-ink-500">
                        {{ __('Pick a template card and send it to the current queue thread.') }}</p>
                </div>
                <button id="template-modal-close"
                    class="w-9 h-9 rounded-full border border-paper-200 bg-white hover:bg-paper-50 grid place-items-center"
                    title="{{ __('Close') }}">
                    <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                        stroke-width="1.6">
                        <path d="M4 4l8 8M12 4l-8 8" />
                    </svg>
                </button>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_310px] min-h-0 flex-1">
                <div class="p-4 min-h-0 overflow-y-auto">
                    <div id="template-card-list" class="grid grid-cols-1 sm:grid-cols-2 gap-3"></div>
                </div>
                <aside class="border-l border-paper-200 bg-paper-50 p-4 flex flex-col min-h-0">
                    <div class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500">{{ __('Preview') }}
                    </div>
                    <div id="template-preview"
                        class="mt-3 flex-1 min-h-0 rounded-[14px] border border-paper-200 bg-white p-4 overflow-y-auto text-[13px] leading-relaxed text-ink-600">
                        {{ __('Select a template to preview it here.') }}
                    </div>
                    <div class="mt-4">
                        <div class="text-[11px] text-ink-500 mb-2">{{ __('Target queue') }}</div>
                        <div id="template-target"
                            class="rounded-xl border border-paper-200 bg-white px-3 py-2 text-[12px] font-semibold truncate">
                            {{ __('No queue selected') }}</div>
                    </div>
                    <button id="template-send"
                        class="mt-3 w-full inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-full bg-ink-900 text-paper-0 text-[12px] font-semibold hover:bg-wa-deep disabled:opacity-40 disabled:cursor-not-allowed"
                        disabled>
                        <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                            stroke-width="1.5">
                            <path d="M2 8 14 3 10 14 7 9z" />
                        </svg>
                        Send template
                    </button>
                </aside>
            </div>
        </div>
    </div>

    <div id="compose-modal"
        class="hidden fixed inset-0 z-50 items-center justify-center p-5 bg-[rgba(11,31,28,0.46)]">
        <div
            class="w-full max-w-5xl max-h-[100vh] overflow-hidden flex flex-col bg-paper-0 border border-paper-200 rounded-2xl shadow-[0_28px_80px_-35px_rgba(11,31,28,0.55)]">

            <div class="px-5 py-4 border-b border-paper-200 flex items-start justify-between gap-4">
                <div>
                    <div class="font-serif text-[18px] italic text-wa-deep leading-tight">{{ __('compose') }}</div>
                    <h3 class="font-serif text-[24px] leading-tight tracking-[-0.01em]">{{ __('Create a new queue') }}
                    </h3>
                    <p class="mt-1 text-[12px] text-ink-500">
                        {{ __('A queue is a single send to many recipients. Pick a device, choose who it goes to, and write the first message.') }}
                    </p>
                </div>
                <button id="compose-modal-close" type="button"
                    class="w-9 h-9 rounded-full border border-paper-200 bg-white hover:bg-paper-50 grid place-items-center"
                    title="{{ __('Close') }}">
                    <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                        stroke-width="1.6">
                        <path d="M4 4l8 8M12 4l-8 8" />
                    </svg>
                </button>
            </div>

            <form id="compose-form" class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_280px] min-h-0 flex-1" novalidate>

                {{-- Main form column --}}
                <div class="p-5 min-h-0 overflow-y-auto grid gap-4">

                    {{-- Queue name + device row --}}
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <label class="block">
                            <span
                                class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500">{{ __('Queue name') }}</span>
                            <input name="title" required maxlength="191"
                                class="mt-1 w-full px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10"
                                placeholder="{{ __('e.g. Diwali launch — VIPs') }}">
                        </label>
                        <label class="block">
                            <span
                                class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500 flex items-center justify-between">
                                <span>{{ __('Device') }}</span>
                                @if (!empty($chatState['canMultiDevice']))
                                    <span
                                        class="font-mono text-[10px] tracking-normal normal-case text-wa-deep">{{ __('Multi-device · plan unlocks split sending') }}</span>
                                @endif
                            </span>
                            @if (!empty($chatState['canMultiDevice']))
                                {{-- Multi-device plan: a real <select multiple> mounted
 with Tom Select (see user-chat-index.js). Tom Select
 turns the field into a tag/pill input — click an
 option to add, click the pill to remove. No Ctrl
 needed. The split bar below renders live as the
 operator changes devices or recipients. --}}
                                <select name="device_ids[]" id="compose-devices" multiple
                                    placeholder="{{ __('Choose one or more devices…') }}" class="mt-1 w-full">
                                    @foreach ($devices as $device)
                                        <option value="{{ $device['id'] ?? '' }}"
                                            data-label="{{ $device['label'] }}"
                                            data-online="{{ $device['online'] ?? true ? '1' : '0' }}">
                                            {{ $device['label'] }}{{ $device['online'] ?? true ? '' : ' — offline' }}
                                        </option>
                                    @endforeach
                                </select>
                                <div id="compose-split-bar" class="mt-2 hidden">
                                    <div class="flex items-center justify-between mb-1">
                                        <span
                                            class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500">{{ __('Split preview') }}</span>
                                        <span id="compose-split-summary"
                                            class="font-mono text-[10.5px] text-ink-500"></span>
                                    </div>
                                    <div id="compose-split-segments"
                                        class="flex h-7 rounded-lg overflow-hidden border border-paper-200 bg-paper-50">
                                    </div>
                                </div>
                                <span
                                    class="mt-1 block text-[10.5px] text-ink-500 leading-snug">{{ __('Click a device to add — recipients split evenly across the chosen devices. Click the chip to remove.') }}</span>
                            @else
                                <select name="device_id"
                                    class="mt-1 w-full px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] font-medium focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10">
                                    <option value="">{{ __('No device selected') }}</option>
                                    @foreach ($devices as $device)
                                        <option value="{{ $device['id'] ?? '' }}">
                                            {{ $device['label'] }}{{ $device['online'] ?? true ? '' : ' — offline' }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif
                            @if (empty($devices))
                                <span
                                    class="mt-1 block text-[10.5px] text-accent-coral leading-snug">{{ __('No connected device.') }}
                                    <a href="{{ url('/devices') }}"
                                        class="font-semibold hover:underline">{{ __('Connect one →') }}</a></span>
                            @endif
                        </label>
                    </div>

                    <div class="border-t border-dashed border-paper-200"></div>

                    {{-- Recipients --}}
                    <fieldset class="grid gap-2">
                        <div class="flex items-center justify-between">
                            <legend class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500">
                                {{ __('Recipients') }}</legend>
                            <span id="compose-rcpt-count" class="text-[11px] font-mono text-ink-500"></span>
                        </div>

                        <div
                            class="inline-flex rounded-full border border-paper-200 bg-paper-50 p-0.5 self-start text-[12px] font-semibold">
                            <label
                                class="px-3 py-1.5 rounded-full cursor-pointer transition has-[:checked]:bg-wa-deep has-[:checked]:text-paper-0 hover:bg-white">
                                <input type="radio" name="recipient_type" value="manual" class="sr-only" checked>
                                <span class="inline-flex items-center gap-1.5">
                                    <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none"
                                        stroke="currentColor" stroke-width="1.5">
                                        <path d="M3 12l5-9 5 9z" />
                                        <path d="M5 12l3-5 3 5" />
                                    </svg>
                                    Paste numbers
                                </span>
                            </label>
                            <label
                                class="px-3 py-1.5 rounded-full cursor-pointer transition has-[:checked]:bg-wa-deep has-[:checked]:text-paper-0 hover:bg-white">
                                <input type="radio" name="recipient_type" value="group" class="sr-only">
                                <span class="inline-flex items-center gap-1.5">
                                    <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" fill="none"
                                        stroke="currentColor" stroke-width="1.5">
                                        <circle cx="6" cy="6" r="2.5" />
                                        <circle cx="11" cy="7" r="2" />
                                        <path d="M2 13c.5-2 2.2-3 4-3s3.5 1 4 3M9.5 13c.5-1.5 1.7-2 3-2s2.4.5 2.5 2" />
                                    </svg>
                                    Pick a group
                                </span>
                            </label>
                        </div>

                        <textarea name="recipients" rows="3" data-mode="manual"
                            class="w-full px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10"
                            placeholder="+91 98xxxxxxxx, +44 78xxxxxxxx&#10;or one per line"></textarea>

                        <select name="contact_group_id" data-mode="group"
                            class="hidden w-full px-3 py-2 rounded-xl border border-paper-200 bg-white text-[13px] font-medium focus:outline-none focus:border-wa-deep focus:ring-4 focus:ring-wa-deep/10">
                            <option value="">{{ __('Select a group…') }}</option>
                            @foreach ($chatState['groups'] ?? [] as $group)
                                <option value="{{ $group['id'] }}" data-count="{{ $group['count'] }}">
                                    {{ $group['label'] }} ({{ $group['count'] }} contacts)</option>
                            @endforeach
                        </select>
                    </fieldset>

                    <div class="border-t border-dashed border-paper-200"></div>

                    {{-- Initial message — uses the shared <x-wa-editor> component
 so other blades can drop in the same toolbar (bold /
 italic / strike / code / emoji + Cmd-B / Cmd-I / Cmd-U
 keyboard shortcuts). --}}
                    <div class="block">
                        <span
                            class="font-mono text-[10px] uppercase tracking-[0.16em] text-ink-500 mb-1 block">{{ __('Initial message') }}</span>
                        {{-- Placeholder built with chr() so the literal "{{" never
 appears in the template source — Blade scans attribute
 values for {{ }} echo statements regardless of context,
 and a plain placeholder="Hi {{name}}, …" gets rewritten
 into