{{-- Floating chat widget (#21). Authed buyers get the dialogue list; guests get a
     prompt to sign in. Hidden on the full chat pages to avoid duplication. --}}
@auth
    @unless (request()->routeIs('account.chat.*'))
        <div x-data="chatWidget({ unreadUrl: '{{ route('account.chat.unread') }}', threadsUrl: '{{ route('account.chat.threads') }}' })"
             class="fixed bottom-4 right-4 z-40 hidden w-[340px] max-w-[calc(100vw-2rem)] flex-col items-end md:flex">

            {{-- Expanded panel --}}
            <div x-show="expanded" x-cloak x-transition.origin.bottom.right
                 class="mb-2 w-full overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-line)] bg-white shadow-[var(--shadow-frame)]">
                <div class="flex items-center justify-between border-b border-[var(--color-line)] px-4 py-3">
                    <span class="font-bold text-[var(--color-ink)]">Сообщения</span>
                    <a href="{{ route('account.chat.index') }}" class="text-xs font-semibold text-[var(--color-primary)]">Все</a>
                </div>
                <div class="max-h-[60vh] min-h-[120px] overflow-y-auto">
                    <div x-show="loading" class="py-10 text-center text-sm text-[var(--color-muted)]">Загрузка…</div>
                    <div x-show="!loading && loaded && !threads.length" class="px-4 py-10 text-center text-sm text-[var(--color-muted)]">Здесь будут ваши переписки.</div>
                    <template x-for="t in threads" :key="t.id">
                        <a :href="t.url" class="flex items-center gap-3 px-4 py-3 transition hover:bg-[var(--color-primary-soft)]">
                            <div class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-[var(--color-primary-soft)] font-bold text-[var(--color-primary)]" x-text="(t.name || '?').charAt(0)"></div>
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center justify-between gap-2">
                                    <span class="truncate font-semibold text-[var(--color-ink)]" x-text="t.name"></span>
                                    <span class="shrink-0 text-xs text-[var(--color-muted)]" x-text="t.time"></span>
                                </div>
                                <div class="truncate text-sm text-[var(--color-muted)]" x-text="t.last || 'Нет сообщений'"></div>
                            </div>
                            <span x-show="t.unread > 0" x-text="t.unread" class="grid h-5 min-w-5 shrink-0 place-items-center rounded-full bg-[var(--color-sale)] px-1.5 text-xs font-bold text-white"></span>
                        </a>
                    </template>
                </div>
            </div>

            {{-- Collapsed bubble --}}
            <button type="button" @click="toggle()"
                    class="ml-auto flex items-center gap-2 rounded-full bg-white px-5 py-3 shadow-[var(--shadow-frame)] ring-1 ring-[var(--color-line)] transition hover:shadow-lg">
                <i data-lucide="message-circle" class="h-5 w-5 text-[var(--color-primary)]"></i>
                <span class="font-bold text-[var(--color-ink)]">Сообщения</span>
                <span x-show="unread > 0" x-text="unread" x-cloak class="grid h-5 min-w-5 place-items-center rounded-full bg-[var(--color-sale)] px-1.5 text-xs font-bold text-white"></span>
            </button>
        </div>
    @endunless
@else
    <button type="button" @click="$store.authModal.show()"
            class="fixed bottom-4 right-4 z-40 hidden items-center gap-2 rounded-full bg-white px-5 py-3 shadow-[var(--shadow-frame)] ring-1 ring-[var(--color-line)] transition hover:shadow-lg md:flex">
        <i data-lucide="message-circle" class="h-5 w-5 text-[var(--color-primary)]"></i>
        <span class="font-bold text-[var(--color-ink)]">Сообщения</span>
    </button>
@endauth