@php($user = Auth::user())
<style>
    /* Чат: скрытие списка на мобильном когда выбран разговор */
    @media (max-width: 1023px) {
        section.profile .chat-wrapper > div:first-child {
            display: none !important;
            visibility: hidden !important;
        }
        section.profile .chat-wrapper > div:last-child {
            display: flex !important;
            width: 100% !important;
        }
    }
    @media (min-width: 1024px) {
        section.profile .chat-wrapper > div:first-child {
            display: flex !important;
        }
    }
</style>
<section class="profile">
    <div class="container">
        {{-- Используем единый компонент шапки профиля --}}
        <x-profile-header :user="$user" />
        <div class="chat-wrapper flex bg-white border  overflow-hidden rounded-t-lg w-full" style='margin-top:40px'>
            {{-- Список чатов: скрыт на мобильном когда выбран разговор, виден на десктопе --}}
            <div class="hidden lg:flex relative w-full md:w-[320px] xl:w-[400px] overflow-y-auto shrink-0 h-full border">
                <livewire:chat.chat-list :selectedConversation="$selectedConversation" :query="$query"/>
            </div>
            {{-- Блок переписки: всегда виден когда выбран разговор --}}
            <div class="flex w-full lg:border-l h-full relative overflow-y-auto" style="contain:content">
                <livewire:chat.chat-box :selectedConversation="$selectedConversation"/>
            </div>
        </div>
    </div>
</section>