{{-- Плавающий виджет чатов (только для авторизованных). Скрыт внутри самого чата. --}}
@unless (request()->routeIs('cabinet.chat.*'))
{{-- На мобильном чат доступен из нижнего бара (кнопка «Сообщения») — плавающий виджет только на десктопе. --}}
<div x-data="chatWidget({{ (int) ($unreadMessages ?? 0) }})"
     class="pointer-events-none fixed bottom-4 right-4 z-40 hidden w-[340px] max-w-[calc(100vw-2rem)] flex-col items-end [&>*]:pointer-events-auto md:flex">

    {{-- Развёрнутая панель --}}
    <div x-show="expanded" x-cloak
         x-transition:enter="transition ease-out duration-150"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         class="mb-2 w-full overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl"
         style="display:none">
        <div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
            <div class="flex items-center gap-2">
                <span class="font-bold text-gray-900">Сообщения</span>
                <span x-show="unread > 0" class="grid h-5 min-w-5 place-items-center rounded-full bg-red-500 px-1.5 text-xs font-bold text-white" x-text="unread"></span>
            </div>
            <div class="flex items-center gap-1">
                {{-- Вкл/выкл звук уведомлений --}}
                <button type="button" @click="toggleMute()" class="rounded-lg p-1 text-gray-400 hover:bg-gray-100"
                        :title="muted ? 'Включить звук' : 'Выключить звук'">
                    {{-- Звук включён --}}
                    <svg x-show="!muted" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"/></svg>
                    {{-- Звук выключен --}}
                    <svg x-show="muted" x-cloak class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"/></svg>
                </button>
                <a href="{{ route('cabinet.chat.index') }}" class="rounded-lg p-1 text-gray-400 hover:bg-gray-100" title="Все сообщения">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
                </a>
            </div>
        </div>

        <div class="max-h-[60vh] min-h-[120px] overflow-y-auto">
            {{-- Загрузка --}}
            <div x-show="loading" class="py-10 text-center text-sm text-muted">Загрузка…</div>

            {{-- Пусто --}}
            <div x-show="!loading && loaded && !threads.length" class="px-4 py-10 text-center text-sm text-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-gray-50">
                    <div class="grid h-10 w-10 shrink-0 place-items-center overflow-hidden rounded-full bg-brand-100 font-bold text-brand-700">
                        <template x-if="t.avatar"><img :src="t.avatar" class="h-full w-full object-cover" alt=""></template>
                        <template x-if="!t.avatar"><span x-text="t.initial"></span></template>
                    </div>
                    <div class="min-w-0 flex-1">
                        <div class="flex items-center justify-between gap-2">
                            <span class="truncate font-semibold text-gray-900" x-text="t.name"></span>
                            <span class="shrink-0 text-xs text-muted" x-text="t.time"></span>
                        </div>
                        <div class="truncate text-sm text-muted" x-text="t.last || 'Нет сообщений'"></div>
                    </div>
                    <span x-show="t.unread > 0" class="grid h-5 min-w-5 shrink-0 place-items-center rounded-full bg-brand-500 px-1.5 text-xs font-bold text-white" x-text="t.unread"></span>
                </a>
            </template>
        </div>
    </div>

    {{-- Свёрнутая кнопка-бар --}}
    <button type="button" @click="toggle()"
            class="ml-auto flex items-center gap-2 rounded-full bg-white px-5 py-3 shadow-2xl ring-1 ring-gray-200 transition hover:shadow-xl">
        <svg class="h-5 w-5 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.12 2.99 2.7 3.22 1.21.18 2.43.32 3.66.41l3.3 3.3a.75.75 0 0 0 1.28-.53v-2.7a25.7 25.7 0 0 0 1.8-.18 3.28 3.28 0 0 0 2.7-3.23v-5.5A3.28 3.28 0 0 0 18.7 5.5a25.6 25.6 0 0 0-13.4 0A3.28 3.28 0 0 0 2.6 8.74v5.5Z"/>
        </svg>
        <span class="font-bold text-gray-900">Сообщения</span>
        <span x-show="unread > 0" class="grid h-5 min-w-5 place-items-center rounded-full bg-red-500 px-1.5 text-xs font-bold text-white" x-text="unread"></span>
        <svg class="h-4 w-4 text-gray-500 transition-transform" :class="expanded ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>
        </svg>
    </button>
</div>
@endunless