@extends('layouts.admin.master')

@section('content')
    @php
        $activeContact = $activeConversation?->otherParticipantFor($viewer);
        $isActiveGroup = $activeConversation && $activeConversation->type !== 'direct';
        $activeConversationAvatar = $activeConversation?->avatarUrlFor($viewer) ?: $viewer->avatarUrl();
    @endphp

    <div class="member-obrolan-mobile-scrim" data-member-obrolan-scrim></div>

    <div class="row h-100">
        <div class="col-12 h-100">
            <div class="card member-obrolan-thread-card" data-member-obrolan-thread
                data-thread-url="{{ route('member.obrolan.thread') }}"
                data-status-url="{{ route('member.obrolan.status') }}"
                data-presence-url="{{ route('member.obrolan.presence') }}"
                data-send-url="{{ route('member.obrolan.send') }}"
                data-update-url-template="{{ route('member.obrolan.update', ['message' => '__MESSAGE__']) }}"
                data-delete-url-template="{{ route('member.obrolan.delete', ['message' => '__MESSAGE__']) }}"
                data-home-url="{{ route('member.obrolan') }}"
                data-conversation-id="{{ $activeConversation?->id ?? '' }}"
                data-conversation-type="{{ $activeConversation?->type ?? '' }}"
                data-conversation-muted="{{ $activeConversation?->isMutedFor($viewer) ? '1' : '0' }}"
                data-mobile-title="{{ $activeConversation?->displayNameFor($viewer) ?: 'Obrolan' }}"
                data-viewer-id="{{ $viewer->id }}"
                data-viewer-name="{{ $viewer->chatLabel() }}">
                <div class="card-body member-obrolan-thread-body">
                    @if ($activeConversation)
                        <div class="member-obrolan-thread-head">
                            <div class="member-obrolan-thread-head-main">
                                <img src="{{ $activeConversationAvatar }}"
                                    alt="{{ $activeConversation->displayNameFor($viewer) }}">
                                <div class="member-obrolan-thread-head-copy">
                                    <strong
                                        data-obrolan-thread-name>{{ $activeConversation->displayNameFor($viewer) }}</strong>
                                    <span data-obrolan-thread-subtitle
                                        data-obrolan-thread-contact-id="{{ $activeContact?->id ?? '' }}"
                                        class="{{ data_get($activeConversationStatus, 'is_typing') ? 'is-typing' : '' }}">
                                        {{ data_get($activeConversationStatus, 'label', $isActiveGroup ? $activeConversation->participants->count() . ' anggota' : ($activeContact?->email ?? 'Percakapan langsung')) }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="member-obrolan-thread-actions">
                            <span class="member-obrolan-realtime-badge is-fallback" data-obrolan-realtime-badge>
                                Polling aktif
                            </span>
                            <button type="button" class="member-obrolan-thread-action member-obrolan-notification-action"
                                data-obrolan-notification-toggle>
                                <i class="bx bx-bell" data-obrolan-notification-icon></i>
                                <span data-obrolan-notification-label>Notifikasi</span>
                            </button>
                            <form action="{{ route('member.obrolan.conversation.pin', $activeConversation) }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="member-obrolan-thread-action {{ $activeConversation->isPinnedFor($viewer) ? 'is-active' : '' }}">
                                    <i class="bx bx-pin"></i>
                                    <span>{{ $activeConversation->isPinnedFor($viewer) ? 'Lepas sematan' : 'Sematkan' }}</span>
                                </button>
                            </form>
                            <form action="{{ route('member.obrolan.conversation.mute', $activeConversation) }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="member-obrolan-thread-action {{ $activeConversation->isMutedFor($viewer) ? 'is-active' : '' }}">
                                    <i class="bx bx-volume-mute"></i>
                                    <span>{{ $activeConversation->isMutedFor($viewer) ? 'Bunyikan' : 'Bisukan' }}</span>
                                </button>
                            </form>
                            <form action="{{ route('member.obrolan.conversation.archive', $activeConversation) }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class="member-obrolan-thread-action {{ $activeConversation->isArchivedFor($viewer) ? 'is-active' : '' }}">
                                    <i class="bx bx-archive-in"></i>
                                    <span>{{ $activeConversation->isArchivedFor($viewer) ? 'Keluarkan dari arsip' : 'Arsipkan' }}</span>
                                </button>
                            </form>
                        </div>

                        @if ($isActiveGroup)
                            <div class="member-obrolan-group-strip">
                                <div class="member-obrolan-group-strip-copy">
                                    <span class="member-obrolan-group-pill">Grup anggota</span>
                                    <strong>{{ $activeConversation->displayNameFor($viewer) }}</strong>
                                    <small>
                                        @if (filled($activeConversation->description))
                                            {{ \Illuminate\Support\Str::limit($activeConversation->description, 96) }}
                                        @else
                                            {{ $activeConversation->participants->count() }} anggota
                                            @if ($activeConversation->creator)
                                                · dibuat oleh {{ $activeConversation->creator->chatLabel() }}
                                            @endif
                                        @endif
                                    </small>
                                </div>
                                <button type="button" class="btn member-obrolan-group-action"
                                    data-bs-toggle="modal" data-bs-target="#memberManageGroupModal">
                                    <i class="bx bx-cog"></i>
                                    <span>
                                        @if ($isActiveGroupOwner)
                                            Kelola Grup
                                        @elseif ($canManageActiveGroup)
                                            Atur Grup
                                        @else
                                            Info Grup
                                        @endif
                                    </span>
                                </button>
                            </div>
                        @endif
                    @endif

                    <div class="member-obrolan-message-stream" data-obrolan-messages>
                        @if ($activeConversation)
                            @php($previousMessageDate = null)
                            @forelse ($messages as $item)
                                @php($isMine = $item->user_id === $viewer->id)
                                @php($messageDateKey = optional($item->created_at)->format('Y-m-d'))
                                @php(
                                    $messageDateLabel = $item->created_at?->isToday()
                                        ? 'Hari ini'
                                        : ($item->created_at?->isYesterday()
                                            ? 'Kemarin'
                                            : $item->created_at?->translatedFormat('d M Y'))
                                )

                                @if ($messageDateKey && $messageDateKey !== $previousMessageDate)
                                    <div class="member-obrolan-date-separator" data-message-date="{{ $messageDateKey }}">
                                        <span>{{ $messageDateLabel }}</span>
                                    </div>
                                    @php($previousMessageDate = $messageDateKey)
                                @endif

                                <article class="member-obrolan-message-row {{ $isMine ? 'is-mine' : '' }}"
                                    data-message-id="{{ $item->id }}"
                                    data-message-body="{{ e($item->body) }}">
                                    @unless ($isMine)
                                        <img src="{{ $item->user?->avatarUrl() ?: $activeContact?->avatarUrl() ?: $viewer->avatarUrl() }}"
                                            alt="{{ $item->user?->chatLabel() ?? 'Anggota' }}">
                                    @endunless

                                    <div class="member-obrolan-message-bubble">
                                        <div class="member-obrolan-message-meta">
                                            <strong>{{ $isMine ? 'Anda' : ($item->user?->chatLabel() ?? 'Anggota') }}</strong>
                                            <div class="member-obrolan-message-meta-trail">
                                                @if (data_get($item->meta, 'edited_at'))
                                                    <span class="member-obrolan-message-edited">Diedit</span>
                                                @endif
                                                <time>{{ $item->created_at?->format('H:i') }}</time>
                                                @if ($isMine)
                                                    <div class="member-obrolan-message-menu-wrap">
                                                        <button type="button" class="member-obrolan-message-menu-toggle"
                                                            data-obrolan-message-menu-toggle
                                                            data-message-id="{{ $item->id }}"
                                                            aria-label="Aksi pesan">
                                                            <i class="fas fa-ellipsis-v"></i>
                                                        </button>
                                                        <div class="member-obrolan-message-menu d-none"
                                                            data-obrolan-message-menu>
                                                            <button type="button" class="member-obrolan-message-menu-item"
                                                                data-obrolan-message-edit
                                                                data-message-id="{{ $item->id }}">
                                                                Edit
                                                            </button>
                                                            <button type="button"
                                                                class="member-obrolan-message-menu-item is-danger"
                                                                data-obrolan-message-delete
                                                                data-message-id="{{ $item->id }}">
                                                                Hapus
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <p>{{ $item->body }}</p>
                                        @php($messageAttachments = collect(data_get($item->meta, 'attachments', []))->filter(fn ($attachment) => filled(data_get($attachment, 'url'))))
                                        @if ($messageAttachments->isNotEmpty())
                                            <div class="member-obrolan-message-attachments">
                                                @foreach ($messageAttachments as $attachment)
                                                    @php($attachmentType = data_get($attachment, 'type', 'document'))
                                                    @if ($attachmentType === 'image')
                                                        <a class="member-obrolan-attachment-card is-image"
                                                            href="{{ data_get($attachment, 'url') }}" target="_blank"
                                                            rel="noopener">
                                                            <img src="{{ data_get($attachment, 'url') }}"
                                                                alt="{{ data_get($attachment, 'name', 'Lampiran gambar') }}">
                                                            <span>{{ data_get($attachment, 'name', 'Gambar') }}</span>
                                                        </a>
                                                    @elseif ($attachmentType === 'video')
                                                        <div class="member-obrolan-attachment-card is-video">
                                                            <video src="{{ data_get($attachment, 'url') }}" controls
                                                                preload="metadata"></video>
                                                            <a href="{{ data_get($attachment, 'url') }}" target="_blank"
                                                                rel="noopener">{{ data_get($attachment, 'name', 'Video') }}</a>
                                                        </div>
                                                    @else
                                                        <a class="member-obrolan-attachment-card is-document"
                                                            href="{{ data_get($attachment, 'url') }}" target="_blank"
                                                            rel="noopener">
                                                            <i class="fas fa-file-alt"></i>
                                                            <span>{{ data_get($attachment, 'name', 'Dokumen') }}</span>
                                                        </a>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endif
                                        @php($messageLocation = data_get($item->meta, 'location'))
                                        @if (is_array($messageLocation) && filled(data_get($messageLocation, 'maps_url')))
                                            <a class="member-obrolan-location-card"
                                                href="{{ data_get($messageLocation, 'maps_url') }}" target="_blank"
                                                rel="noopener">
                                                <i class="fas fa-map-marker-alt"></i>
                                                <span>
                                                    <strong>Lokasi dibagikan</strong>
                                                    <small>{{ data_get($messageLocation, 'lat') }},
                                                        {{ data_get($messageLocation, 'lng') }}</small>
                                                </span>
                                            </a>
                                        @endif
                                    </div>
                                </article>
                            @empty
                                <div class="member-obrolan-empty" data-obrolan-empty>
                                    <div class="member-obrolan-empty-icon">
                                        <i class="bx bx-message-square-dots"></i>
                                    </div>
                                    <h2>Belum ada pesan di obrolan ini.</h2>
                                    <p>Kirim sapaan pertama dari kolom bawah. Pesan masuk dan balasan akan langsung
                                        tampil di area ini.</p>
                                </div>
                            @endforelse
                        @else
                            <div class="member-obrolan-empty" data-obrolan-empty>
                                <div class="member-obrolan-empty-icon">
                                    <i class="bx bx-message-square-dots"></i>
                                </div>
                                <h2>Belum ada obrolan yang dibuka.</h2>
                                <p>Pilih riwayat dari sidebar kiri, cari anggota, atau buat grup baru untuk mulai
                                    ngobrol.</p>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="card-footer member-obrolan-composer">
                    <div class="member-obrolan-composer-stack">
                        <div class="member-obrolan-attachment-preview d-none" data-obrolan-attachment-preview>
                            <span data-obrolan-attachment-label>Lampiran siap diatur.</span>
                            <button type="button" class="member-obrolan-attachment-clear"
                                data-obrolan-attachment-clear aria-label="Hapus lampiran">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>

                        <div class="member-obrolan-composer-row">
                            <div class="member-obrolan-attachment-wrap">
                                <input type="file" id="obrolan_attachment_media" class="d-none" multiple
                                    accept="image/*,video/*" {{ $activeConversation ? '' : 'disabled' }}>
                                <input type="file" id="obrolan_attachment_document" class="d-none" multiple
                                    accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar"
                                    {{ $activeConversation ? '' : 'disabled' }}>
                                <button type="button" class="btn btn-light member-obrolan-attachment-button"
                                    data-obrolan-attachment-toggle {{ $activeConversation ? '' : 'disabled' }}
                                    aria-label="Pilih lampiran">
                                    <i class="fas fa-paperclip"></i>
                                </button>
                                <div class="member-obrolan-attachment-menu d-none" data-obrolan-attachment-menu>
                                    <button type="button" class="member-obrolan-attachment-option"
                                        data-obrolan-attachment-kind="media">
                                        <i class="fas fa-image"></i>
                                        <span>Gambar / Video</span>
                                    </button>
                                    <button type="button" class="member-obrolan-attachment-option"
                                        data-obrolan-attachment-kind="document">
                                        <i class="fas fa-file-alt"></i>
                                        <span>Dokumen / File</span>
                                    </button>
                                    <button type="button" class="member-obrolan-attachment-option"
                                        data-obrolan-attachment-kind="location">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>Lokasi</span>
                                    </button>
                                </div>
                            </div>

                            <textarea class="form-control member-obrolan-composer-input" id="obrolan_footer_input" rows="1"
                                placeholder="{{ $activeConversation ? 'Tulis obrolan anda...' : 'Pilih riwayat atau cari anggota dulu...' }}"
                                {{ $activeConversation ? '' : 'disabled' }}></textarea>
                            <button type="button" class="btn btn-primary member-obrolan-send-button" data-obrolan-send
                                {{ $activeConversation ? '' : 'disabled' }}>
                                <i class="fas fa-arrow-up"></i>
                                <span>Kirim</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="memberCreateGroupModal" tabindex="-1" aria-labelledby="memberCreateGroupModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content member-obrolan-modal">
                <form action="{{ route('member.obrolan.group.store') }}" method="POST">
                    @csrf
                    <div class="modal-header border-0 pb-0">
                        <div>
                            <h5 class="modal-title" id="memberCreateGroupModalLabel">Buat grup obrolan</h5>
                            <p class="member-obrolan-modal-note mb-0">Pilih anggota yang ingin diajak masuk ke grup
                                baru.</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body member-obrolan-modal-body pt-3">
                        <div class="member-obrolan-manage-section">
                            <label class="form-label" for="member_group_name">Nama grup</label>
                            <input type="text" class="form-control" id="member_group_name" name="name"
                                maxlength="255" value="{{ old('name') }}" placeholder="Misal: Tim Kreatif Tomchat"
                                required>
                        </div>

                        <div class="member-obrolan-manage-section">
                            <div class="member-obrolan-manage-section-head">
                                <strong>Pilih anggota</strong>
                                <span>{{ $discoverUsers->count() }} akun aktif bisa diajak</span>
                            </div>
                            <div class="member-obrolan-member-grid">
                                @forelse ($discoverUsers as $candidate)
                                    <label class="member-obrolan-member-choice">
                                        <input type="checkbox" name="participant_ids[]" value="{{ $candidate->id }}"
                                            {{ in_array($candidate->id, old('participant_ids', []), true) ? 'checked' : '' }}>
                                        <img src="{{ $candidate->avatarUrl() }}" alt="{{ $candidate->chatLabel() }}">
                                        <div class="member-obrolan-member-copy">
                                            <strong>{{ $candidate->chatLabel() }}</strong>
                                            <span>{{ $candidate->email }}</span>
                                        </div>
                                    </label>
                                @empty
                                    <div class="member-obrolan-modal-empty">
                                        <strong>Belum ada anggota lain</strong>
                                        <p>Akun anggota aktif lain belum tersedia untuk diajak ke grup.</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Buat Grup</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="memberReportConversationModal" tabindex="-1"
        aria-labelledby="memberReportConversationModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content member-obrolan-modal">
                <form action="#" method="POST" data-report-conversation-form>
                    @csrf
                    <div class="modal-header border-0 pb-0">
                        <div>
                            <h5 class="modal-title" id="memberReportConversationModalLabel">Laporkan obrolan</h5>
                            <p class="member-obrolan-modal-note mb-0">
                                Laporan untuk <strong data-report-conversation-title>obrolan ini</strong> akan masuk ke admin.
                            </p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body member-obrolan-modal-body pt-3">
                        <div class="member-obrolan-manage-section">
                            <label class="form-label" for="member_report_reason">Alasan laporan</label>
                            <select class="form-control" id="member_report_reason" name="reason" required>
                                <option value="penipuan">Penipuan atau scam</option>
                                <option value="spam">Spam</option>
                                <option value="pelecehan">Pelecehan atau ujaran tidak baik</option>
                                <option value="konten_tidak_pantas">Konten tidak pantas</option>
                                <option value="ancaman">Ancaman atau membahayakan</option>
                                <option value="lainnya">Lainnya</option>
                            </select>
                        </div>
                        <div class="member-obrolan-manage-section">
                            <label class="form-label" for="member_report_description">Catatan tambahan</label>
                            <textarea class="form-control" id="member_report_description" name="description" rows="4"
                                maxlength="1200" placeholder="Tulis ringkas kejadian yang perlu ditinjau admin."></textarea>
                            <small class="text-muted">Opsional, tapi membantu admin memahami konteks laporan.</small>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-flag me-1"></i> Kirim Laporan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @include('pages.admin.member.partials.account-modals', [
        'anggota' => $anggota,
        'user' => $user,
        'viewer' => $viewer,
    ])

    @if ($isActiveGroup)
        @include('pages.admin.member.partials.manage-group-modal', [
            'activeConversation' => $activeConversation,
            'activeConversationAvatar' => $activeConversationAvatar,
            'viewer' => $viewer,
            'canManageActiveGroup' => $canManageActiveGroup,
            'isActiveGroupOwner' => $isActiveGroupOwner,
            'activeGroupRole' => $activeGroupRole,
            'availableGroupMembers' => $availableGroupMembers,
            'pendingOutgoingGroupInvites' => $pendingOutgoingGroupInvites,
        ])
    @endif
@endsection

@section('stylesheet')
    <style>
        :root {
            --member-obrolan-app-height: 100dvh;
            --member-obrolan-sidebar-width: 296px;
            --member-obrolan-topbar-height: 60px;
            --member-obrolan-footer-height: 0px;
            --member-obrolan-composer-height: 104px;
            --member-obrolan-keyboard-bottom: 0px;
            --member-obrolan-visual-offset-top: 0px;
            --member-obrolan-topbar-translate-y: 0px;
            --member-obrolan-page-padding-x: 1.5rem;
            --member-obrolan-page-padding-y: 1rem;
        }

        html:has(body.member-obrolan-layout) {
            height: var(--member-obrolan-app-height);
            overflow: hidden;
        }

        body.member-obrolan-layout {
            position: fixed;
            inset: 0;
            width: 100%;
            max-width: 100%;
            height: var(--member-obrolan-app-height);
            overflow: hidden;
            overscroll-behavior: none;
            touch-action: manipulation;
        }

        body.member-obrolan-layout .page-footer {
            display: none !important;
        }

        body.member-obrolan-layout .topbar {
            position: fixed !important;
            top: 0 !important;
            background: linear-gradient(135deg, #cf1322 0%, #e10a1f 100%);
            box-shadow: 0 10px 28px rgba(176, 18, 33, 0.2);
            transform: translate3d(0, var(--member-obrolan-topbar-translate-y, 0px), 0);
            will-change: transform;
        }

        body.member-obrolan-layout .topbar .navbar {
            gap: 0.85rem !important;
        }

        body.member-obrolan-layout .topbar .navbar .navbar-nav .nav-link,
        body.member-obrolan-layout .topbar .mobile-toggle-menu,
        body.member-obrolan-layout .topbar .user-info .user-name,
        body.member-obrolan-layout .topbar .user-info .designattion {
            color: #fff;
        }

        body.member-obrolan-layout .topbar .navbar .navbar-nav .nav-link:hover,
        body.member-obrolan-layout .topbar .navbar .navbar-nav .nav-link:focus {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
        }

        body.member-obrolan-layout .topbar .user-box {
            border-left: 1px solid rgba(255, 255, 255, 0.24);
            border-right: 1px solid rgba(255, 255, 255, 0.18);
        }

        body.member-obrolan-layout .topbar .user-img {
            border: 2px solid rgba(255, 255, 255, 0.22);
        }

        .member-obrolan-topbar-title {
            display: none;
            min-width: 0;
            color: #fff;
            font-size: 0.92rem;
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: 0.01em;
        }

        .member-obrolan-mobile-scrim {
            position: fixed;
            inset: 0;
            z-index: 10;
            background: rgba(15, 23, 42, 0.34);
            backdrop-filter: blur(4px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.28s ease, visibility 0.28s ease;
        }

        body.member-obrolan-layout .topbar .dropdown-menu {
            z-index: 1080;
        }

        body.member-obrolan-layout .modal-backdrop {
            z-index: 1090;
        }

        body.member-obrolan-layout .modal {
            z-index: 1095;
            pointer-events: auto;
        }

        body.member-obrolan-layout .modal-dialog {
            pointer-events: auto;
        }

        body.member-obrolan-layout.modal-open .member-obrolan-mobile-scrim {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        body.member-obrolan-layout.modal-open .wrapper.member-obrolan-sidebar-locked.toggled .member-obrolan-mobile-scrim {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }

        body.member-obrolan-layout .sidebar-wrapper {
            background:
                linear-gradient(180deg, rgba(186, 230, 253, 0.78) 0%, rgba(125, 211, 252, 0.56) 100%),
                rgba(255, 255, 255, 0.78);
            border-right: 1px solid rgba(14, 165, 233, 0.16);
            box-shadow: 0 12px 34px rgba(14, 165, 233, 0.14);
            backdrop-filter: blur(18px);
            transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease;
        }

        @media (min-width: 1025px) {
            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked {
                height: var(--member-obrolan-app-height);
                overflow: hidden;
                overflow-x: clip;
            }

            body.member-obrolan-layout .sidebar-wrapper,
            body.member-obrolan-layout .topbar,
            body.member-obrolan-layout .page-wrapper,
            body.member-obrolan-layout .page-footer {
                transition: none !important;
            }

            .wrapper.member-obrolan-sidebar-locked .overlay.toggle-icon {
                display: none !important;
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked .sidebar-wrapper {
                width: var(--member-obrolan-sidebar-width);
                left: 0;
                height: var(--member-obrolan-app-height);
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked .topbar {
                left: var(--member-obrolan-sidebar-width);
                right: auto;
                width: calc(100vw - var(--member-obrolan-sidebar-width));
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked .page-wrapper {
                margin-left: var(--member-obrolan-sidebar-width);
                width: calc(100vw - var(--member-obrolan-sidebar-width));
                max-width: calc(100vw - var(--member-obrolan-sidebar-width));
                height: calc(var(--member-obrolan-app-height) - var(--member-obrolan-topbar-height) - var(--member-obrolan-footer-height));
                margin-top: var(--member-obrolan-topbar-height);
                margin-bottom: var(--member-obrolan-footer-height);
                overflow: hidden;
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked .page-footer {
                left: var(--member-obrolan-sidebar-width);
                right: auto;
                width: calc(100vw - var(--member-obrolan-sidebar-width));
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked.toggled .sidebar-wrapper {
                width: var(--member-obrolan-sidebar-width);
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked.toggled .topbar {
                left: var(--member-obrolan-sidebar-width);
                width: calc(100vw - var(--member-obrolan-sidebar-width));
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked.toggled .page-wrapper {
                margin-left: var(--member-obrolan-sidebar-width);
                width: calc(100vw - var(--member-obrolan-sidebar-width));
                max-width: calc(100vw - var(--member-obrolan-sidebar-width));
                height: calc(var(--member-obrolan-app-height) - var(--member-obrolan-topbar-height) - var(--member-obrolan-footer-height));
                margin-top: var(--member-obrolan-topbar-height);
                margin-bottom: var(--member-obrolan-footer-height);
                overflow: hidden;
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked.toggled .page-footer {
                left: var(--member-obrolan-sidebar-width);
                width: calc(100vw - var(--member-obrolan-sidebar-width));
            }
        }

        @media (max-width: 1024px) {
            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked {
                height: var(--member-obrolan-app-height);
                overflow: hidden;
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked .sidebar-wrapper {
                width: min(86vw, 320px);
                left: calc(-1 * min(86vw, 320px));
                z-index: 16;
                height: var(--member-obrolan-app-height);
                padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
                padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
                transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease;
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked.toggled .sidebar-wrapper {
                left: 0;
            }

            body.member-obrolan-layout .wrapper.member-obrolan-sidebar-locked.toggled .member-obrolan-mobile-scrim {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            body.member-obrolan-layout .topbar {
                left: 0 !important;
                width: 100% !important;
                height: 56px;
                padding-top: env(safe-area-inset-top, 0px);
            }

            body.member-obrolan-layout .topbar .navbar {
                height: 56px;
                padding-left: 0.95rem;
                padding-right: 0.85rem;
            }

            body.member-obrolan-layout .topbar .top-menu {
                display: none !important;
            }

            body.member-obrolan-layout .topbar .mobile-toggle-menu {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 2rem;
                height: 2rem;
                font-size: 1.35rem;
                flex: 0 0 auto;
            }

            .member-obrolan-topbar-title {
                display: block;
                margin-right: auto;
            }

            body.member-obrolan-layout .topbar .user-box {
                height: 56px;
                padding-left: 0.45rem !important;
                padding-right: 0 !important;
                border-left: 0;
                border-right: 0;
            }

            body.member-obrolan-layout .topbar .user-info {
                display: none !important;
            }

            body.member-obrolan-layout .topbar .user-box>a {
                gap: 0 !important;
            }

            body.member-obrolan-layout .topbar .user-img {
                width: 2rem;
                height: 2rem;
            }

            body.member-obrolan-layout .page-wrapper {
                position: fixed;
                inset: calc(var(--member-obrolan-topbar-height) + var(--member-obrolan-topbar-translate-y, 0px)) 0 var(--member-obrolan-keyboard-bottom, 0px) 0;
                width: 100% !important;
                max-width: 100% !important;
                height: auto;
                min-height: 0;
                margin-top: 0;
                margin-bottom: 0;
                margin-left: 0 !important;
                overflow: hidden;
                transition: bottom 0.18s ease;
            }

            body.member-obrolan-layout.member-obrolan-keyboard-open .page-wrapper {
                bottom: var(--member-obrolan-keyboard-bottom, 0px);
            }

            body.member-obrolan-layout.member-obrolan-keyboard-open .topbar {
                transform: translate3d(0, var(--member-obrolan-topbar-translate-y, 0px), 0);
            }
        }

        body.member-obrolan-layout .page-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            overflow-y: hidden;
            overflow-x: hidden;
            padding: var(--member-obrolan-page-padding-y) var(--member-obrolan-page-padding-x) !important;
            box-sizing: border-box;
        }

        body.member-obrolan-layout .page-content>.row {
            flex: 1 1 auto;
            height: 100%;
            min-height: 100%;
        }

        body.member-obrolan-layout .page-content>.row>[class*="col-"] {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        @media (max-width: 1024px) {
            :root {
                --member-obrolan-topbar-height: calc(56px + env(safe-area-inset-top, 0px));
                --member-obrolan-page-padding-x: 0;
                --member-obrolan-page-padding-y: 0;
            }

            body.member-obrolan-layout .page-content {
                padding: 0 !important;
            }

            body.member-obrolan-layout .page-content>.row,
            body.member-obrolan-layout .page-content>.row>[class*="col-"] {
                height: 100%;
            }
        }

        .member-obrolan-thread-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            max-height: 100%;
            margin-bottom: 0;
            overflow: hidden;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
            transition: opacity 0.26s ease, transform 0.26s ease, box-shadow 0.26s ease;
        }

        .member-obrolan-thread-body {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            height: auto;
            min-height: 0;
            padding: 0;
            overflow: hidden;
            background:
                radial-gradient(circle at top, rgba(230, 0, 18, 0.08), transparent 28%),
                linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
        }

        .member-obrolan-thread-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(255, 255, 255, 0.84);
            backdrop-filter: blur(10px);
        }

        .member-obrolan-thread-head-main {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            min-width: 0;
        }

        .member-obrolan-thread-head img {
            width: 3rem;
            height: 3rem;
            border-radius: 999px;
            object-fit: cover;
            object-position: center;
            flex-shrink: 0;
        }

        .member-obrolan-thread-head-copy {
            min-width: 0;
        }

        .member-obrolan-thread-head-copy strong {
            display: block;
            font-size: 1rem;
            line-height: 1.35;
            color: #0f172a;
        }

        .member-obrolan-thread-head-copy span {
            display: block;
            margin-top: 0.18rem;
            color: #64748b;
            font-size: 0.82rem;
            line-height: 1.4;
            transition: color 0.18s ease, opacity 0.18s ease;
        }

        .member-obrolan-thread-head-copy span.is-typing {
            color: #0284c7;
            font-weight: 600;
        }

        .member-obrolan-message-stream {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 0.9rem;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 1.2rem 1.25rem 1.35rem;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }

        .member-obrolan-date-separator {
            position: relative;
            display: flex;
            justify-content: center;
            margin: 0.1rem 0 0.25rem;
            pointer-events: none;
        }

        .member-obrolan-date-separator span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.34rem 0.74rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(148, 163, 184, 0.18);
            color: #64748b;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
            backdrop-filter: blur(10px);
        }

        .member-obrolan-message-row {
            display: flex;
            align-items: flex-end;
            gap: 0.75rem;
            max-width: 78%;
        }

        .member-obrolan-message-row.is-fresh {
            animation: memberObrolanMessageRise 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        }

        @keyframes memberObrolanMessageRise {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.985);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .member-obrolan-message-row.is-mine {
            align-self: flex-end;
            justify-content: flex-end;
        }

        .member-obrolan-message-row img {
            width: 2.35rem;
            height: 2.35rem;
            border-radius: 999px;
            object-fit: cover;
            object-position: center;
            flex-shrink: 0;
        }

        .member-obrolan-message-bubble {
            position: relative;
            padding: 0.78rem 0.92rem;
            border-radius: 1.15rem;
            background: rgba(56, 189, 248, 0.16);
            border: 1px solid rgba(56, 189, 248, 0.24);
            color: #0f172a;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
        }

        .member-obrolan-message-row.is-mine .member-obrolan-message-bubble {
            background: rgba(239, 68, 68, 0.16);
            border: 1px solid rgba(239, 68, 68, 0.24);
            color: #7f1d1d;
            border-bottom-right-radius: 0.45rem;
        }

        .member-obrolan-message-row:not(.is-mine) .member-obrolan-message-bubble {
            border-bottom-left-radius: 0.45rem;
        }

        .member-obrolan-message-row:not(.is-mine) .member-obrolan-message-bubble {
            color: #0c4a6e;
        }

        .member-obrolan-message-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.35rem;
        }

        .member-obrolan-message-meta strong {
            font-size: 0.79rem;
            line-height: 1.3;
        }

        .member-obrolan-message-meta-trail {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
        }

        .member-obrolan-message-menu-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .member-obrolan-message-menu-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.55rem;
            height: 1.55rem;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: inherit;
            opacity: 0.72;
        }

        .member-obrolan-message-menu-toggle:hover,
        .member-obrolan-message-menu-toggle.is-open {
            background: rgba(15, 23, 42, 0.08);
            opacity: 1;
        }

        .member-obrolan-message-menu-toggle i {
            font-size: 0.8rem;
        }

        .member-obrolan-message-menu {
            position: absolute;
            top: calc(100% + 0.35rem);
            right: 0;
            z-index: 8;
            display: flex;
            min-width: 7.5rem;
            flex-direction: column;
            gap: 0.15rem;
            padding: 0.35rem;
            border-radius: 0.85rem;
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
        }

        .member-obrolan-message-menu-item {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: flex-start;
            padding: 0.5rem 0.65rem;
            border: 0;
            border-radius: 0.65rem;
            background: transparent;
            color: #0f172a;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1.3;
            text-align: left;
        }

        .member-obrolan-message-menu-item:hover {
            background: #fff7ed;
            color: #c2410c;
        }

        .member-obrolan-message-menu-item.is-danger {
            color: #b91c1c;
        }

        .member-obrolan-message-edited {
            display: inline-flex;
            align-items: center;
            padding: 0.12rem 0.4rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.08);
            color: inherit;
            font-size: 0.64rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            opacity: 0.82;
        }

        .member-obrolan-message-meta time {
            font-size: 0.72rem;
            opacity: 0.74;
            flex-shrink: 0;
        }

        .member-obrolan-message-bubble p {
            margin: 0;
            white-space: pre-wrap;
            word-break: break-word;
            font-size: 0.89rem;
            line-height: 1.55;
        }

        .member-obrolan-message-attachments {
            display: grid;
            gap: 0.55rem;
            margin-top: 0.7rem;
        }

        .member-obrolan-attachment-card,
        .member-obrolan-location-card {
            display: flex;
            overflow: hidden;
            align-items: center;
            gap: 0.7rem;
            max-width: min(18rem, 72vw);
            border-radius: 0.9rem;
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(148, 163, 184, 0.22);
            color: inherit;
            text-decoration: none;
        }

        .member-obrolan-attachment-card:hover,
        .member-obrolan-location-card:hover {
            color: inherit;
            transform: translateY(-1px);
        }

        .member-obrolan-attachment-card.is-image {
            display: block;
        }

        .member-obrolan-attachment-card.is-image img {
            display: block;
            width: 100%;
            max-height: 12.5rem;
            border-radius: 0.85rem 0.85rem 0 0;
            object-fit: cover;
        }

        .member-obrolan-attachment-card.is-image span,
        .member-obrolan-attachment-card.is-video a {
            display: block;
            padding: 0.55rem 0.68rem;
            color: inherit;
            font-size: 0.76rem;
            font-weight: 700;
            line-height: 1.35;
            text-decoration: none;
        }

        .member-obrolan-attachment-card.is-video {
            display: block;
            padding: 0;
        }

        .member-obrolan-attachment-card.is-video video {
            display: block;
            width: 100%;
            max-height: 13rem;
            background: #020617;
        }

        .member-obrolan-attachment-card.is-document,
        .member-obrolan-location-card {
            padding: 0.72rem 0.78rem;
        }

        .member-obrolan-attachment-card.is-document i,
        .member-obrolan-location-card i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.05rem;
            height: 2.05rem;
            border-radius: 0.72rem;
            background: rgba(14, 165, 233, 0.14);
            color: #0369a1;
            flex-shrink: 0;
        }

        .member-obrolan-location-card span {
            display: grid;
            min-width: 0;
            gap: 0.12rem;
        }

        .member-obrolan-location-card strong,
        .member-obrolan-attachment-card.is-document span {
            overflow: hidden;
            color: inherit;
            font-size: 0.78rem;
            font-weight: 800;
            line-height: 1.3;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .member-obrolan-location-card small {
            color: rgba(15, 23, 42, 0.62);
            font-size: 0.68rem;
            line-height: 1.3;
        }

        .member-obrolan-inline-editor {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            margin-top: 0.65rem;
        }

        .member-obrolan-inline-editor textarea {
            width: 100%;
            min-height: 4.8rem;
            max-height: 12rem;
            padding: 0.7rem 0.8rem;
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 0.95rem;
            background: rgba(255, 255, 255, 0.84);
            color: #0f172a;
            font-size: 0.84rem;
            line-height: 1.55;
            resize: none;
            outline: 0;
        }

        .member-obrolan-inline-editor-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.45rem;
        }

        .member-obrolan-inline-editor-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.38rem 0.78rem;
            border: 0;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.08);
            color: #0f172a;
            font-size: 0.74rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .member-obrolan-inline-editor-button.is-primary {
            background: #e60012;
            color: #fff;
        }

        .member-obrolan-empty {
            margin: auto;
            max-width: 36rem;
            padding: 1.35rem 1.45rem;
            border-radius: 1.25rem;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
            text-align: left;
        }

        .member-obrolan-empty-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            margin-bottom: 0.9rem;
            border-radius: 999px;
            background: rgba(14, 165, 233, 0.1);
            color: #0c4a6e;
            font-size: 1.45rem;
        }

        .member-obrolan-empty h2 {
            margin: 0 0 0.55rem;
            color: #0f172a;
            font-size: 1.25rem;
            line-height: 1.35;
        }

        .member-obrolan-empty p {
            margin: 0;
            color: #475569;
            font-size: 0.92rem;
            line-height: 1.65;
        }

        .member-obrolan-composer {
            flex-shrink: 0;
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 8;
            padding: 0.78rem 1rem;
            border-top: 1px solid rgba(148, 163, 184, 0.16);
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(18px);
            box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.05);
            transition: opacity 0.26s ease, transform 0.26s ease, box-shadow 0.2s ease;
        }

        .member-obrolan-composer-stack {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 0.55rem;
            min-width: 0;
        }

        .member-obrolan-composer-row {
            display: flex;
            align-items: flex-end;
            gap: 0.75rem;
            min-width: 0;
            padding: 0.34rem;
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 1.15rem;
            background: rgba(255, 255, 255, 0.92);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        .member-obrolan-composer:focus-within .member-obrolan-composer-row {
            border-color: rgba(14, 165, 233, 0.28);
            box-shadow: 0 10px 26px rgba(14, 165, 233, 0.12);
            transform: translateY(-1px);
        }

        .member-obrolan-attachment-wrap {
            position: relative;
            flex: 0 0 auto;
        }

        .member-obrolan-attachment-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.4rem;
            height: 2.4rem;
            padding: 0;
            border-radius: 999px;
            flex: 0 0 auto;
        }

        .member-obrolan-attachment-menu {
            position: absolute;
            left: 0;
            bottom: calc(100% + 0.65rem);
            z-index: 20;
            display: flex;
            min-width: 13rem;
            flex-direction: column;
            gap: 0.2rem;
            padding: 0.45rem;
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(148, 163, 184, 0.16);
            box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
        }

        .member-obrolan-attachment-option {
            display: flex;
            width: 100%;
            align-items: center;
            gap: 0.68rem;
            padding: 0.7rem 0.8rem;
            border: 0;
            border-radius: 0.8rem;
            background: transparent;
            color: #0f172a;
            font-size: 0.84rem;
            line-height: 1.35;
            text-align: left;
        }

        .member-obrolan-attachment-option:hover {
            background: #fff7ed;
            color: #c2410c;
        }

        .member-obrolan-attachment-option i {
            width: 1rem;
            text-align: center;
            flex: 0 0 auto;
        }

        .member-obrolan-attachment-preview {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            min-width: 0;
            padding: 0.42rem 0.75rem;
            border-radius: 0.9rem;
            background: #f8fafc;
            color: #475569;
            font-size: 0.74rem;
            line-height: 1.35;
        }

        .member-obrolan-attachment-preview span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .member-obrolan-attachment-clear {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.7rem;
            height: 1.7rem;
            padding: 0;
            border: 0;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.12);
            color: #475569;
            flex: 0 0 auto;
        }

        .member-obrolan-attachment-clear:hover {
            background: rgba(230, 0, 18, 0.12);
            color: #b40010;
        }

        .member-obrolan-composer-input {
            min-width: 0;
            flex: 1 1 auto;
            resize: none;
            overflow-y: auto;
            line-height: 1.5;
            min-height: 44px;
            max-height: 168px;
            white-space: pre-wrap;
            word-break: break-word;
            border-radius: 1rem;
            padding: 0.72rem 0.12rem;
            border: 0;
            background: transparent;
            box-shadow: none !important;
        }

        .member-obrolan-composer-input:focus {
            background: transparent;
            box-shadow: none !important;
        }

        .member-obrolan-composer-input:disabled {
            background: transparent;
            color: #94a3b8;
            cursor: not-allowed;
        }

        .member-obrolan-send-button {
            flex: 0 0 auto;
            margin: 0 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            min-width: 2.8rem;
            height: 2.8rem;
            padding-inline: 0.92rem;
            border: 0;
            border-radius: 1rem;
            box-shadow: 0 12px 28px rgba(207, 19, 34, 0.26);
            transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
        }

        .member-obrolan-send-button:hover,
        .member-obrolan-send-button:focus {
            transform: translateY(-1px);
            box-shadow: 0 16px 30px rgba(207, 19, 34, 0.3);
        }

        .member-chat-sidebar {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 0;
            max-height: 100%;
            padding: 0.68rem 0.58rem 0.72rem;
            background: transparent;
        }

        .member-chat-sidebar-header {
            position: sticky;
            top: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 0.78rem;
            padding-bottom: 0.76rem;
            background: transparent;
        }

        .member-chat-sidebar-toolbar {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.18rem 0.18rem 0 0.18rem;
        }

        .member-chat-sidebar-toolbar-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.14rem;
        }

        .member-chat-sidebar-toolbar-copy span {
            color: rgba(12, 74, 110, 0.74);
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .member-chat-sidebar-toolbar-copy strong {
            color: #082f49;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .member-chat-sidebar-toolbar-copy small {
            color: rgba(71, 85, 105, 0.78);
            font-size: 0.74rem;
            line-height: 1.45;
        }

        .member-chat-sidebar-new-chat {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.45rem 0.72rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(14, 165, 233, 0.16);
            color: #0c4a6e;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1;
            box-shadow: 0 8px 18px rgba(14, 165, 233, 0.08);
            transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
        }

        .member-chat-sidebar-new-chat:hover {
            color: #075985;
            background: rgba(255, 255, 255, 0.92);
            transform: translateY(-1px);
            box-shadow: 0 10px 22px rgba(14, 165, 233, 0.14);
        }

        .member-chat-sidebar-search {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            margin: 0;
            padding: 0.72rem 0.82rem;
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(14, 165, 233, 0.18);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px rgba(14, 165, 233, 0.06);
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .member-chat-sidebar-search:focus-within {
            border-color: rgba(2, 132, 199, 0.3);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 12px 28px rgba(14, 165, 233, 0.12);
        }

        .member-chat-sidebar-search i {
            font-size: 0.95rem;
            color: rgba(12, 74, 110, 0.72);
            flex-shrink: 0;
        }

        .member-chat-sidebar-search input {
            width: 100%;
            border: 0;
            outline: 0;
            background: transparent;
            color: #0f172a;
            font-size: 0.78rem;
            line-height: 1.4;
        }

        .member-chat-sidebar-search input::placeholder {
            color: rgba(71, 85, 105, 0.72);
        }

        .member-chat-sidebar-list {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            min-height: 0;
            flex: 1 1 auto;
            overflow-y: auto;
            padding-right: 0.2rem;
        }

        .member-chat-sidebar-section {
            display: flex;
            flex-direction: column;
            gap: 0.58rem;
        }

        .member-chat-sidebar-section-label {
            padding: 0 0.22rem;
            color: rgba(12, 74, 110, 0.7);
            font-size: 0.64rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .member-chat-sidebar-item {
            display: flex;
            align-items: flex-start;
            gap: 0.68rem;
            padding: 0.78rem;
            border-radius: 1rem;
            color: #0f172a;
            background: rgba(255, 255, 255, 0.48);
            border: 1px solid rgba(14, 165, 233, 0.12);
            box-shadow: 0 8px 22px rgba(14, 165, 233, 0.06);
            transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .member-chat-sidebar-entry {
            display: flex;
            align-items: flex-start;
            gap: 0.45rem;
            min-width: 0;
        }

        .member-chat-sidebar-entry .member-chat-sidebar-item {
            min-width: 0;
            flex: 1 1 auto;
            text-decoration: none;
        }

        .member-chat-sidebar-item:hover,
        .member-chat-sidebar-item.is-active,
        .member-chat-sidebar-entry.is-active .member-chat-sidebar-item {
            color: #082f49;
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(2, 132, 199, 0.28);
            transform: translateY(-1px);
            box-shadow: 0 14px 30px rgba(14, 165, 233, 0.12);
        }

        .member-chat-sidebar-item-avatar {
            position: relative;
            flex-shrink: 0;
        }

        .member-chat-sidebar-item img {
            width: 2.65rem;
            height: 2.65rem;
            object-fit: cover;
            object-position: center;
            border-radius: 999px;
            display: block;
        }

        .member-chat-sidebar-presence {
            position: absolute;
            right: 0.05rem;
            bottom: 0.08rem;
            width: 0.68rem;
            height: 0.68rem;
            border-radius: 999px;
            background: #22c55e;
            border: 2px solid rgba(255, 255, 255, 0.95);
            box-shadow: 0 0 0 0.18rem rgba(34, 197, 94, 0.14);
        }

        .member-chat-sidebar-presence.is-online {
            display: block !important;
        }

        .member-chat-sidebar-item-body {
            min-width: 0;
            flex: 1 1 auto;
        }

        .member-chat-sidebar-item-top {
            display: flex;
            gap: 0.42rem;
            align-items: baseline;
            justify-content: space-between;
        }

        .member-chat-sidebar-item-top strong {
            display: block;
            min-width: 0;
            font-size: 0.84rem;
            line-height: 1.28;
            color: inherit;
        }

        .member-chat-sidebar-item-top time {
            font-size: 0.66rem;
            color: rgba(71, 85, 105, 0.74);
            flex-shrink: 0;
        }

        .member-chat-sidebar-entry.is-active .member-chat-sidebar-item-top time {
            color: rgba(8, 47, 73, 0.82);
        }

        .member-chat-sidebar-item p,
        .member-chat-sidebar-empty p {
            margin: 0.18rem 0 0;
            font-size: 0.72rem;
            line-height: 1.44;
            color: rgba(71, 85, 105, 0.86);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .member-chat-sidebar-unread {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.3rem;
            height: 1.3rem;
            margin-top: 0.18rem;
            padding: 0 0.36rem;
            border-radius: 999px;
            background: #0ea5e9;
            color: #fff;
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1;
            box-shadow: 0 10px 20px rgba(14, 165, 233, 0.22);
            flex-shrink: 0;
        }

        .member-chat-sidebar-unread.is-attention {
            background: #e60012;
            box-shadow: 0 10px 20px rgba(230, 0, 18, 0.24);
        }

        .member-chat-sidebar-entry-side {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.38rem;
            padding-top: 0.15rem;
            flex-shrink: 0;
        }

        .member-chat-sidebar-action-wrap {
            position: relative;
        }

        .member-chat-sidebar-action-toggle {
            width: 1.9rem;
            height: 1.9rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.72);
            color: #475569;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }

        .member-chat-sidebar-action-toggle:hover,
        .member-chat-sidebar-action-toggle.is-open {
            color: #0c4a6e;
            background: rgba(255, 255, 255, 0.96);
            border-color: rgba(14, 165, 233, 0.3);
            transform: translateY(-1px);
        }

        .member-chat-sidebar-action-toggle i {
            font-size: 1.05rem;
            line-height: 1;
        }

        .member-chat-sidebar-action-menu {
            position: absolute;
            top: calc(100% + 0.36rem);
            right: 0;
            min-width: 10.6rem;
            padding: 0.34rem;
            border-radius: 0.95rem;
            background: rgba(255, 255, 255, 0.97);
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
            z-index: 18;
        }

        .member-chat-sidebar-action-menu form {
            margin: 0;
        }

        .member-chat-sidebar-action-menu-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border: 0;
            background: transparent;
            border-radius: 0.75rem;
            padding: 0.6rem 0.72rem;
            color: #0f172a;
            font-size: 0.72rem;
            font-weight: 600;
            text-align: left;
            transition: background-color 0.18s ease, color 0.18s ease;
        }

        .member-chat-sidebar-action-menu-item:hover {
            background: rgba(14, 165, 233, 0.1);
            color: #0c4a6e;
        }

        .member-chat-sidebar-action-menu-item.is-danger {
            color: #dc2626;
        }

        .member-chat-sidebar-action-menu-item.is-danger:hover {
            background: rgba(220, 38, 38, 0.1);
            color: #991b1b;
        }

        .member-chat-sidebar-empty {
            padding: 0.9rem 0.82rem;
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.48);
            border: 1px solid rgba(14, 165, 233, 0.12);
            color: #0f172a;
        }

        .member-chat-sidebar-empty strong {
            display: block;
            font-size: 0.86rem;
        }

        body.member-obrolan-layout:not(.member-obrolan-ready) .member-obrolan-thread-card,
        body.member-obrolan-layout:not(.member-obrolan-ready) .member-obrolan-composer {
            opacity: 0;
            transform: translateY(10px);
        }

        @media (max-width: 767.98px) {
            .member-obrolan-thread-card {
                border: 0;
                border-radius: 0;
                box-shadow: none;
                height: 100%;
                max-height: 100%;
                min-height: 0;
            }

            .member-obrolan-thread-body {
                background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
            }

            .member-obrolan-thread-head {
                display: none;
            }

            .member-obrolan-date-separator {
                position: sticky;
                top: 0.45rem;
                z-index: 2;
            }

            .member-obrolan-message-row {
                max-width: 90%;
            }

            .member-obrolan-thread-head,
            .member-obrolan-message-stream,
            .member-obrolan-composer {
                padding-left: 0.9rem;
                padding-right: 0.9rem;
            }

            .member-obrolan-composer-row {
                align-items: center;
                gap: 0.55rem;
            }

            .member-obrolan-attachment-menu {
                min-width: 11.5rem;
            }

            .member-obrolan-empty {
                max-width: min(100%, 22rem);
                padding: 1rem 1.05rem;
                border-radius: 1rem;
                text-align: center;
            }

            .member-obrolan-empty-icon {
                margin-inline: auto;
            }

            .member-obrolan-empty h2 {
                font-size: 1.06rem;
            }

            .member-obrolan-empty p {
                font-size: 0.82rem;
                line-height: 1.55;
            }

            .member-obrolan-composer {
                padding: 0.72rem 0.85rem calc(0.72rem + env(safe-area-inset-bottom, 0px));
                background: rgba(255, 255, 255, 0.96);
                backdrop-filter: blur(18px);
                box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.08);
            }

            .member-obrolan-composer-row {
                gap: 0.55rem;
                padding: 0.3rem;
                border-radius: 1.1rem;
            }

            .member-obrolan-attachment-button {
                width: 2.2rem;
                height: 2.2rem;
            }

            .member-obrolan-composer-input {
                min-height: 42px;
                max-height: 132px;
                border-radius: 0.95rem;
                font-size: 0.9rem;
            }

            .member-obrolan-send-button {
                min-width: 2.7rem;
                height: 2.6rem;
                padding-inline: 0.85rem;
                border-radius: 0.95rem;
                font-size: 0.82rem;
            }

            .member-chat-sidebar {
                padding: 0.9rem 0.72rem calc(1rem + env(safe-area-inset-bottom, 0px));
            }

            .member-chat-sidebar-list {
                padding-right: 0;
            }

            .member-chat-sidebar-toolbar {
                padding-top: 0;
            }

            .member-chat-sidebar-toolbar-copy strong {
                font-size: 1.08rem;
            }

            .member-chat-sidebar-toolbar-copy small {
                font-size: 0.72rem;
            }
        }

        .member-chat-sidebar-toolbar-actions {
            display: flex;
            align-items: center;
            gap: 0.48rem;
        }

        .member-chat-sidebar-new-chat.is-group {
            border: 1px solid rgba(14, 165, 233, 0.2);
            background: rgba(224, 242, 254, 0.82);
            color: #075985;
        }

        .member-chat-sidebar-new-chat.is-group:hover,
        .member-chat-sidebar-new-chat.is-group:focus {
            background: rgba(186, 230, 253, 0.94);
            color: #0c4a6e;
        }

        .member-chat-sidebar-item-title {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            min-width: 0;
        }

        .member-chat-sidebar-item-title strong {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .member-chat-sidebar-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.1rem 0.42rem;
            border-radius: 999px;
            background: rgba(14, 165, 233, 0.15);
            color: #075985;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            flex-shrink: 0;
        }

        .member-chat-sidebar-badge.is-invite {
            background: rgba(239, 68, 68, 0.14);
            color: #b91c1c;
        }

        .member-chat-sidebar-item-foot {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin-top: 0.2rem;
            color: #3b82f6;
            font-size: 0.68rem;
            font-weight: 600;
        }

        .member-chat-sidebar-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.15rem 0.5rem;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.14);
            color: #475569;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .member-chat-sidebar-pill.is-pin {
            background: rgba(14, 165, 233, 0.16);
            color: #0369a1;
        }

        .member-chat-sidebar-pill.is-archive {
            background: rgba(245, 158, 11, 0.14);
            color: #b45309;
        }

        .member-chat-sidebar-count-badge,
        .member-chat-sidebar-section-count {
            min-width: 1.25rem;
            height: 1.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.34rem;
            border-radius: 999px;
            background: rgba(239, 68, 68, 0.14);
            color: #b91c1c;
            font-size: 0.66rem;
            font-weight: 700;
            line-height: 1;
        }

        .member-chat-sidebar-item.is-invite {
            align-items: flex-start;
            gap: 0.82rem;
            cursor: default;
        }

        .member-chat-sidebar-item.is-archived {
            opacity: 0.92;
        }

        .member-chat-sidebar-entry.is-archived .member-chat-sidebar-item {
            background: rgba(255, 255, 255, 0.38);
        }

        .member-chat-sidebar-invite-actions {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            margin-top: 0.52rem;
        }

        .member-chat-sidebar-invite-actions form {
            margin: 0;
        }

        @media (max-width: 767.98px) {
            .member-chat-sidebar-entry {
                gap: 0.38rem;
            }

            .member-chat-sidebar-entry-side {
                gap: 0.28rem;
            }

            .member-chat-sidebar-action-toggle {
                width: 1.72rem;
                height: 1.72rem;
            }

            .member-chat-sidebar-action-menu {
                min-width: 9.8rem;
            }
        }

        .member-obrolan-group-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin: 0.88rem 0.95rem 0.2rem;
            padding: 0.88rem 1rem;
            border: 1px solid rgba(14, 165, 233, 0.14);
            border-radius: 1.1rem;
            background: rgba(239, 246, 255, 0.92);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        .member-obrolan-group-strip-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.22rem;
        }

        .member-obrolan-group-strip-copy strong {
            font-size: 0.95rem;
            color: #0f172a;
        }

        .member-obrolan-group-strip-copy small {
            color: #475569;
            font-size: 0.74rem;
        }

        .member-obrolan-group-pill {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            padding: 0.18rem 0.58rem;
            border-radius: 999px;
            background: rgba(59, 130, 246, 0.14);
            color: #1d4ed8;
            font-size: 0.66rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .member-obrolan-group-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.42rem;
            border-radius: 999px;
            padding: 0.62rem 0.92rem;
            border: 1px solid rgba(14, 165, 233, 0.2);
            background: rgba(224, 242, 254, 0.88);
            color: #075985;
            font-size: 0.78rem;
            font-weight: 600;
            white-space: nowrap;
        }

        .member-obrolan-group-action:hover,
        .member-obrolan-group-action:focus {
            background: rgba(186, 230, 253, 0.98);
            color: #0c4a6e;
        }

        .member-obrolan-thread-actions {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.55rem;
            padding: 0.5rem 0.95rem 0;
        }

        .member-obrolan-thread-actions form {
            margin: 0;
        }

        .member-obrolan-realtime-badge {
            display: inline-flex;
            align-items: center;
            min-height: 2rem;
            padding: 0.38rem 0.72rem;
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background: rgba(241, 245, 249, 0.88);
            color: #475569;
        }

        .member-obrolan-realtime-badge.is-live {
            border-color: rgba(16, 185, 129, 0.24);
            background: rgba(209, 250, 229, 0.92);
            color: #047857;
        }

        .member-obrolan-realtime-badge.is-connecting {
            border-color: rgba(245, 158, 11, 0.26);
            background: rgba(254, 249, 195, 0.94);
            color: #b45309;
        }

        .member-obrolan-thread-action {
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            padding: 0.46rem 0.74rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(255, 255, 255, 0.88);
            color: #475569;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1;
            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }

        .member-obrolan-thread-action:hover,
        .member-obrolan-thread-action:focus {
            background: rgba(241, 245, 249, 0.98);
            color: #0f172a;
        }

        .member-obrolan-thread-action.is-active {
            border-color: rgba(14, 165, 233, 0.22);
            background: rgba(224, 242, 254, 0.92);
            color: #0369a1;
        }

        .member-obrolan-notification-action.is-enabled {
            border-color: rgba(16, 185, 129, 0.24);
            background: rgba(209, 250, 229, 0.92);
            color: #047857;
        }

        .member-obrolan-notification-action.is-denied {
            border-color: rgba(220, 38, 38, 0.2);
            background: rgba(254, 226, 226, 0.9);
            color: #b91c1c;
        }

        .member-obrolan-modal {
            border: 0;
            border-radius: 1.3rem;
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
        }

        .member-obrolan-modal-body {
            padding-inline: 1.15rem;
            padding-bottom: 1rem;
        }

        .member-obrolan-modal-note {
            font-size: 0.78rem;
            color: #64748b;
            line-height: 1.5;
        }

        .member-obrolan-account-photo {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 0.95rem 1rem;
            border-radius: 1rem;
            background: rgba(248, 250, 252, 0.95);
            border: 1px solid rgba(203, 213, 225, 0.58);
            margin-bottom: 1rem;
        }

        .member-obrolan-account-photo img {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
        }

        .member-obrolan-account-photo-copy {
            min-width: 0;
        }

        .member-obrolan-account-photo-copy strong,
        .member-obrolan-account-photo-copy span {
            display: block;
        }

        .member-obrolan-account-photo-copy strong {
            color: #0f172a;
            font-size: 0.92rem;
        }

        .member-obrolan-account-photo-copy span {
            color: #64748b;
            font-size: 0.75rem;
            word-break: break-word;
        }

        .member-obrolan-field-help {
            display: block;
            margin-top: 0.35rem;
            font-size: 0.72rem;
            color: #64748b;
            line-height: 1.45;
        }

        .member-obrolan-modal .invalid-feedback {
            display: block;
            font-size: 0.72rem;
        }

        .member-obrolan-manage-section {
            padding: 1rem;
            border-radius: 1.05rem;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(248, 250, 252, 0.92);
        }

        .member-obrolan-manage-section+.member-obrolan-manage-section {
            margin-top: 0.95rem;
        }

        .member-account-modal .modal-dialog {
            --bs-modal-width: 430px;
            max-width: min(430px, calc(100vw - 1rem));
            margin: 0.5rem auto;
        }

        .member-account-modal .member-obrolan-modal {
            border-radius: 1rem;
        }

        .member-account-modal form {
            display: flex;
            max-height: calc(100dvh - 1rem);
            flex-direction: column;
            overflow: hidden;
        }

        .member-account-modal .modal-header {
            padding: 0.68rem 0.82rem 0.18rem;
        }

        .member-account-modal .modal-title {
            font-size: 0.92rem;
            line-height: 1.2;
        }

        .member-account-modal .member-obrolan-modal-note,
        .member-account-modal .member-obrolan-field-help {
            display: none;
        }

        .member-account-modal .member-obrolan-modal-body {
            flex: 0 1 auto;
            padding: 0.45rem 0.82rem 0.38rem;
            overflow: visible;
        }

        .member-account-modal .member-obrolan-account-photo {
            gap: 0.58rem;
            padding: 0.46rem 0.56rem;
            border-radius: 0.82rem;
            margin-bottom: 0.45rem;
        }

        .member-account-modal .member-obrolan-account-photo img {
            width: 40px;
            height: 40px;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
        }

        .member-account-modal .member-obrolan-account-photo-copy strong {
            font-size: 0.78rem;
            line-height: 1.2;
        }

        .member-account-modal .member-obrolan-account-photo-copy span {
            font-size: 0.66rem;
            line-height: 1.25;
        }

        .member-account-modal .member-obrolan-manage-section {
            padding: 0.45rem 0.55rem;
            border-radius: 0.82rem;
        }

        .member-account-modal .row.g-3 {
            --bs-gutter-x: 0.55rem;
            --bs-gutter-y: 0.42rem;
        }

        .member-account-modal .form-label {
            margin-bottom: 0.16rem;
            color: #475569;
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .member-account-modal .form-control,
        .member-account-modal .input-group-text {
            min-height: 2rem;
            padding: 0.34rem 0.52rem;
            font-size: 0.76rem;
            line-height: 1.2;
            border-radius: 0.68rem;
        }

        .member-account-modal .input-group .form-control {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .member-account-modal .input-group-text {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .member-account-modal input[type="file"].form-control {
            min-height: 1.95rem;
            padding-top: 0.3rem;
        }

        .member-account-modal .modal-footer {
            gap: 0.42rem;
            padding: 0.36rem 0.82rem 0.72rem;
        }

        .member-account-modal .modal-footer .btn {
            min-height: 2rem;
            padding: 0.36rem 0.72rem;
            border-radius: 0.72rem;
            font-size: 0.76rem;
            line-height: 1.2;
        }

        .member-obrolan-manage-section-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.8rem;
            margin-bottom: 0.72rem;
        }

        .member-obrolan-manage-section-head strong {
            font-size: 0.9rem;
            color: #0f172a;
        }

        .member-obrolan-manage-section-head span {
            font-size: 0.74rem;
            color: #64748b;
            line-height: 1.45;
            text-align: right;
        }

        .member-obrolan-manage-form+.member-obrolan-manage-form {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(148, 163, 184, 0.16);
        }

        .member-obrolan-manage-check {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #64748b;
            font-size: 0.75rem;
        }

        .member-obrolan-manage-check input {
            margin: 0;
        }

        .member-obrolan-group-summary {
            display: flex;
            align-items: center;
            gap: 0.82rem;
            padding: 0.8rem 0.85rem;
            border-radius: 1rem;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(148, 163, 184, 0.16);
            margin-bottom: 0.9rem;
        }

        .member-obrolan-group-summary img {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .member-obrolan-group-summary-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.12rem;
        }

        .member-obrolan-group-summary-copy strong {
            color: #0f172a;
            font-size: 0.92rem;
        }

        .member-obrolan-group-summary-copy span,
        .member-obrolan-group-summary-copy small {
            color: #64748b;
            font-size: 0.74rem;
            line-height: 1.45;
        }

        .member-obrolan-manage-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
        }

        .member-obrolan-manage-pending-list {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .member-obrolan-manage-pending-row {
            display: flex;
            align-items: center;
            gap: 0.72rem;
            padding: 0.72rem 0.78rem;
            border-radius: 0.95rem;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background: rgba(255, 255, 255, 0.96);
        }

        .member-obrolan-manage-pending-row img {
            width: 2.35rem;
            height: 2.35rem;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .member-obrolan-manage-pending-row small {
            margin-left: auto;
            color: #64748b;
            font-size: 0.7rem;
            white-space: nowrap;
        }

        .member-obrolan-manage-pending-row form {
            margin: 0;
            flex-shrink: 0;
        }

        .member-obrolan-member-grid,
        .member-obrolan-member-list {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            max-height: 19rem;
            overflow-y: auto;
            padding-right: 0.15rem;
        }

        .member-obrolan-member-grid.is-compact {
            max-height: 14rem;
        }

        .member-obrolan-member-choice,
        .member-obrolan-member-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.72rem;
            width: 100%;
            padding: 0.75rem 0.82rem;
            border-radius: 1rem;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(255, 255, 255, 0.96);
        }

        .member-obrolan-member-choice {
            cursor: pointer;
        }

        .member-obrolan-member-choice input {
            flex-shrink: 0;
            margin: 0;
        }

        .member-obrolan-member-choice img,
        .member-obrolan-member-row img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .member-obrolan-member-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.18rem;
        }

        .member-obrolan-member-copy strong {
            color: #0f172a;
            font-size: 0.84rem;
        }

        .member-obrolan-member-copy span {
            color: #64748b;
            font-size: 0.73rem;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .member-obrolan-member-row-main {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.72rem;
        }

        .member-obrolan-member-row-actions {
            flex-shrink: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 0.42rem;
        }

        .member-obrolan-member-role {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
            background: rgba(239, 68, 68, 0.14);
            color: #b91c1c;
            font-size: 0.67rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .member-obrolan-member-role.is-admin {
            background: rgba(59, 130, 246, 0.14);
            color: #1d4ed8;
        }

        .member-obrolan-modal-empty {
            padding: 0.9rem;
            border-radius: 0.95rem;
            background: rgba(255, 255, 255, 0.92);
            border: 1px dashed rgba(148, 163, 184, 0.26);
        }

        .member-obrolan-modal-empty strong {
            display: block;
            color: #0f172a;
            font-size: 0.82rem;
            margin-bottom: 0.2rem;
        }

        .member-obrolan-modal-empty p {
            margin: 0;
            color: #64748b;
            font-size: 0.74rem;
            line-height: 1.5;
        }

        @media (max-width: 767.98px) {
            .member-obrolan-group-strip {
                margin: 0 0 0.3rem;
                padding: 0.82rem 0.88rem;
                flex-direction: column;
                align-items: stretch;
            }

            .member-obrolan-thread-actions {
                padding-inline: 0;
            }

            .member-obrolan-group-action {
                width: 100%;
            }

            .member-obrolan-manage-section-head {
                flex-direction: column;
            }

            .member-obrolan-manage-section-head span {
                text-align: left;
            }

            .member-obrolan-group-summary {
                padding: 0.76rem 0.8rem;
            }

            .member-obrolan-member-grid,
            .member-obrolan-member-list {
                max-height: none;
            }

            .member-obrolan-member-row {
                align-items: flex-start;
                flex-direction: column;
            }

            .member-obrolan-manage-pending-row {
                align-items: flex-start;
                flex-wrap: wrap;
            }

            .member-obrolan-manage-pending-row small {
                margin-left: 0;
            }

            .member-obrolan-member-row-actions {
                width: 100%;
                justify-content: flex-start;
            }
        }

        @media (max-width: 420px) {
            .member-obrolan-thread-head img {
                width: 2.35rem;
                height: 2.35rem;
            }

            .member-obrolan-thread-head-copy strong {
                font-size: 0.88rem;
            }

            .member-obrolan-thread-head-copy span {
                font-size: 0.72rem;
            }

            .member-obrolan-message-stream {
                gap: 0.72rem;
            }

            .member-obrolan-message-bubble {
                padding: 0.72rem 0.82rem;
            }

            .member-obrolan-message-bubble p {
                font-size: 0.84rem;
            }

            .member-chat-sidebar-item {
                padding: 0.66rem;
            }

            .member-chat-sidebar-item img {
                width: 2.45rem;
                height: 2.45rem;
            }

            .member-chat-sidebar-item-top strong {
                font-size: 0.82rem;
            }

            .member-chat-sidebar-new-chat span,
            .member-obrolan-send-button span {
                display: none;
            }

            .member-chat-sidebar-new-chat {
                width: 2rem;
                height: 2rem;
                justify-content: center;
                padding: 0;
            }

            .member-obrolan-send-button {
                width: 2.6rem;
                min-width: 2.6rem;
                padding-inline: 0;
                gap: 0;
            }
        }
    </style>
@endsection

@section('javascript')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const pageBody = document.body;
            const root = document.documentElement;
            const wrapper = document.querySelector('.wrapper');
            const sidebarWrapper = document.querySelector('.sidebar-wrapper');
            const mobileScrim = document.querySelector('[data-member-obrolan-scrim]');
            const mobileToggle = document.querySelector('.mobile-toggle-menu');
            const mobileTitle = document.querySelector('.member-obrolan-topbar-title');
            const searchInput = document.querySelector('[data-obrolan-search]');
            const threadCard = document.querySelector('[data-member-obrolan-thread]');
            const threadName = document.querySelector('[data-obrolan-thread-name]');
            const threadSubtitle = document.querySelector('[data-obrolan-thread-subtitle]');
            const messagesWrap = document.querySelector('[data-obrolan-messages]');
            const composerInput = document.querySelector('#obrolan_footer_input');
            const attachmentMediaInput = document.querySelector('#obrolan_attachment_media');
            const attachmentDocumentInput = document.querySelector('#obrolan_attachment_document');
            const attachmentToggle = document.querySelector('[data-obrolan-attachment-toggle]');
            const attachmentMenu = document.querySelector('[data-obrolan-attachment-menu]');
            const attachmentOptions = Array.from(document.querySelectorAll('[data-obrolan-attachment-kind]'));
            const attachmentPreview = document.querySelector('[data-obrolan-attachment-preview]');
            const attachmentLabel = document.querySelector('[data-obrolan-attachment-label]');
            const attachmentClear = document.querySelector('[data-obrolan-attachment-clear]');
            const sendButton = document.querySelector('[data-obrolan-send]');
            const createGroupModal = document.querySelector('#memberCreateGroupModal');
            const manageGroupModal = document.querySelector('#memberManageGroupModal');
            const accountModal = document.querySelector('#memberAccountModal');
            const passwordModal = document.querySelector('#memberPasswordModal');
            const reportConversationModal = document.querySelector('#memberReportConversationModal');
            const reportConversationForm = document.querySelector('[data-report-conversation-form]');
            const reportConversationTitle = document.querySelector('[data-report-conversation-title]');
            const profileForm = document.querySelector('#memberObrolanProfileForm');
            const passwordForm = document.querySelector('#memberObrolanPasswordForm');
            const profilePhotoInput = document.querySelector('#member_obrolan_profile_photo');
            const profilePreview = document.querySelector('#memberObrolanProfilePreview');
            const profileLabel = document.querySelector('#memberObrolanProfileLabel');
            const profileEmailLabel = document.querySelector('#memberObrolanProfileEmailLabel');
            const usernameInput = document.querySelector('#member_obrolan_username');
            const usernamePreview = document.querySelector('#member_obrolan_username_preview');
            const headerAvatar = document.querySelector('[data-member-header-avatar]');
            const headerName = document.querySelector('[data-member-header-name]');
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            const activeConversationId = Number(threadCard?.dataset.conversationId || 0);
            const threadUrl = threadCard?.dataset.threadUrl || '';
            const statusUrl = threadCard?.dataset.statusUrl || '';
            const presenceUrl = threadCard?.dataset.presenceUrl || '';
            const sendUrl = threadCard?.dataset.sendUrl || '';
            const updateUrlTemplate = threadCard?.dataset.updateUrlTemplate || '';
            const deleteUrlTemplate = threadCard?.dataset.deleteUrlTemplate || '';
            const homeUrl = threadCard?.dataset.homeUrl || '{{ route('member.obrolan') }}';
            const viewerId = Number(threadCard?.dataset.viewerId || 0);
            const viewerName = threadCard?.dataset.viewerName || 'Anggota';
            const activeConversationType = threadCard?.dataset.conversationType || '';
            const realtimeBadge = document.querySelector('[data-obrolan-realtime-badge]');
            const notificationToggle = document.querySelector('[data-obrolan-notification-toggle]');
            const notificationLabel = document.querySelector('[data-obrolan-notification-label]');
            const notificationIcon = document.querySelector('[data-obrolan-notification-icon]');
            const notificationHelper = window.TomchatPwaNotifications || null;
            const notificationPromptKey = 'tomchat.notifications.setup.prompted_at';
            const notificationPromptSnoozeMs = 6 * 60 * 60 * 1000;
            const echo = window.Echo || null;
            const memberObrolanModals = [createGroupModal, manageGroupModal, accountModal, passwordModal, reportConversationModal]
                .filter(Boolean);
            let isSending = false;
            let pendingAttachment = null;
            let activeInlineEditMessageId = null;
            let typingDebounceHandle = null;
            let typingIndicatorResetHandle = null;
            let threadPollingHandle = null;
            let statusPollingHandle = null;
            let userSyncChannel = null;
            let conversationSyncChannel = null;
            let presenceChannel = null;
            let hasRenderedThread = Boolean(messagesWrap?.querySelector('[data-message-id]'));
            let knownMessageIds = new Set(
                Array.from(messagesWrap?.querySelectorAll('[data-message-id]') ?? []).map((element) => String(element.dataset.messageId))
            );
            let knownSummaryMessageIds = new Map();
            let hasStatusBaseline = false;
            const notifiedMessageIds = new Set();
            let lastViewportWasMobile = window.innerWidth <= 1024;
            let statusRefreshInFlight = false;
            let threadRefreshInFlight = false;
            let immediateSyncHandle = null;
            let lastForcedShellReloadAt = 0;
            let stableViewportHeight = Math.round(window.innerHeight || document.documentElement.clientHeight || 0);
            let keyboardPinHandle = null;

            if ('virtualKeyboard' in navigator) {
                try {
                    navigator.virtualKeyboard.overlaysContent = true;
                } catch (error) {
                    console.debug('Mode overlay keyboard Tomchat tidak tersedia.', error);
                }
            }

            memberObrolanModals.forEach((modalNode) => {
                modalNode.classList.add('member-obrolan-detached-modal');

                if (modalNode.parentElement !== document.body) {
                    document.body.appendChild(modalNode);
                }
            });

            const isTextEntryElement = (element) => {
                if (!element) {
                    return false;
                }

                const tagName = String(element.tagName || '').toLowerCase();
                const inputType = String(element.type || '').toLowerCase();

                if (tagName === 'textarea' || tagName === 'select') {
                    return true;
                }

                if (tagName === 'input') {
                    return !['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit'].includes(inputType);
                }

                return element.isContentEditable === true;
            };

            const keepShellPinnedToTop = () => {
                if (window.scrollX !== 0 || window.scrollY !== 0) {
                    window.scrollTo(0, 0);
                }

                document.documentElement.scrollTop = 0;
                pageBody.scrollTop = 0;
            };

            const pinShellDuringKeyboardTransition = (duration = 1200) => {
                window.clearInterval(keyboardPinHandle);

                const startedAt = Date.now();
                keyboardPinHandle = window.setInterval(() => {
                    keepShellPinnedToTop();

                    if (Date.now() - startedAt > duration) {
                        window.clearInterval(keyboardPinHandle);
                        keyboardPinHandle = null;
                    }
                }, 50);
            };

            const syncViewportShell = () => {
                const focusedTextEntry = isTextEntryElement(document.activeElement);
                const viewport = window.visualViewport;
                const virtualKeyboard = navigator.virtualKeyboard;
                const layoutCandidate = Math.round(
                    window.innerHeight
                    || document.documentElement.clientHeight
                    || stableViewportHeight
                    || 0
                );
                const visualHeight = Math.round(viewport?.height || layoutCandidate || stableViewportHeight || 0);
                const visualOffsetTop = Math.max(0, Math.round(viewport?.offsetTop || 0));
                const scrollOffsetTop = Math.max(
                    0,
                    Math.round(window.scrollY || document.documentElement.scrollTop || pageBody.scrollTop || 0)
                );
                const keyboardRectHeight = Math.max(0, Math.round(virtualKeyboard?.boundingRect?.height || 0));

                if (!focusedTextEntry && layoutCandidate > 0) {
                    stableViewportHeight = layoutCandidate;
                } else if (layoutCandidate > stableViewportHeight) {
                    stableViewportHeight = layoutCandidate;
                }

                const keyboardBottom = focusedTextEntry
                    ? Math.max(keyboardRectHeight, stableViewportHeight - visualHeight - visualOffsetTop)
                    : 0;
                const keyboardOpen = focusedTextEntry && keyboardBottom > 80;
                const topbarTranslate = focusedTextEntry
                    ? Math.max(visualOffsetTop, scrollOffsetTop)
                    : 0;

                if (stableViewportHeight > 0) {
                    root.style.setProperty('--member-obrolan-app-height', `${stableViewportHeight}px`);
                }

                root.style.setProperty('--member-obrolan-keyboard-bottom', `${keyboardOpen ? keyboardBottom : 0}px`);
                root.style.setProperty('--member-obrolan-visual-offset-top', `${keyboardOpen ? visualOffsetTop : 0}px`);
                root.style.setProperty('--member-obrolan-topbar-translate-y', `${keyboardOpen ? topbarTranslate : 0}px`);
                pageBody.classList.toggle('member-obrolan-keyboard-open', keyboardOpen);

                if (focusedTextEntry) {
                    window.requestAnimationFrame(keepShellPinnedToTop);
                }

                const topbarNode = document.querySelector('.topbar');
                if (topbarNode?.offsetHeight) {
                    root.style.setProperty('--member-obrolan-topbar-height', `${Math.ceil(topbarNode.offsetHeight)}px`);
                }

                const composerNode = document.querySelector('.member-obrolan-composer');
                if (composerNode) {
                    root.style.setProperty('--member-obrolan-composer-height', `${Math.ceil(composerNode.offsetHeight)}px`);
                }
            };

            const forceReloadObrolanShell = () => {
                const now = Date.now();

                if (now - lastForcedShellReloadAt < 1800) {
                    return;
                }

                lastForcedShellReloadAt = now;

                const nextUrl = new URL(window.location.href);
                nextUrl.searchParams.set('_sync', String(now));
                window.location.replace(nextUrl.toString());
            };

            const handleExpiredCsrf = (response) => {
                if (response.status !== 419) {
                    return false;
                }

                forceReloadObrolanShell();
                return true;
            };

            const isMobileViewport = () => window.innerWidth <= 1024;
            const closeMobileDrawer = () => {
                if (!wrapper || !isMobileViewport()) {
                    return;
                }

                wrapper.classList.remove('toggled', 'sidebar-hovered');
            };

            const syncResponsiveShell = () => {
                if (!wrapper) {
                    return;
                }

                const nowMobile = isMobileViewport();
                wrapper.classList.remove('sidebar-hovered');

                if (!nowMobile || (!lastViewportWasMobile && nowMobile)) {
                    wrapper.classList.remove('toggled');
                }

                lastViewportWasMobile = nowMobile;
            };

            memberObrolanModals.forEach((modalNode) => {
                modalNode.addEventListener('show.bs.modal', () => {
                    closeMobileDrawer();
                });
            });

            accountModal?.addEventListener('show.bs.modal', () => {
                clearFormErrors(profileForm);
                updateUsernamePreview();
            });

            passwordModal?.addEventListener('show.bs.modal', () => {
                clearFormErrors(passwordForm);
                passwordForm?.reset();
            });

            reportConversationModal?.addEventListener('hidden.bs.modal', () => {
                reportConversationForm?.reset();
                if (reportConversationForm) {
                    reportConversationForm.action = '#';
                }
            });

            const openAccountModalFromHeader = (trigger) => {
                const targetSelector = trigger?.dataset.memberObrolanModalTrigger || '';
                const targetModal = targetSelector ? document.querySelector(targetSelector) : null;

                if (!targetModal || !window.bootstrap?.Modal) {
                    return;
                }

                closeMobileDrawer();

                const dropdown = trigger.closest('.dropdown');
                const dropdownToggle = dropdown?.querySelector('[data-bs-toggle="dropdown"]');

                if (dropdownToggle && window.bootstrap?.Dropdown) {
                    window.bootstrap.Dropdown.getOrCreateInstance(dropdownToggle).hide();
                }

                window.setTimeout(() => {
                    window.bootstrap.Modal.getOrCreateInstance(targetModal, {
                        backdrop: true,
                        focus: true,
                    }).show();
                }, 50);
            };

            const syncConversationHeader = (conversation = null) => {
                const fallbackName = threadCard?.dataset.mobileTitle || threadName?.textContent?.trim() || 'Obrolan';
                const nextName = String(conversation?.name || fallbackName || 'Obrolan').trim() || 'Obrolan';
                const nextSubtitle = String(
                    conversation?.email ?? threadSubtitle?.textContent?.trim() ?? 'Percakapan langsung'
                ).trim() || 'Percakapan langsung';

                if (threadCard) {
                    threadCard.dataset.mobileTitle = nextName;
                    if (conversation && Object.prototype.hasOwnProperty.call(conversation, 'is_muted')) {
                        threadCard.dataset.conversationMuted = conversation.is_muted ? '1' : '0';
                    }
                }

                if (mobileTitle) {
                    mobileTitle.textContent = nextName;
                }

                if (threadName) {
                    threadName.textContent = nextName;
                }

                if (threadSubtitle) {
                    threadSubtitle.dataset.defaultSubtitle = nextSubtitle;
                    threadSubtitle.textContent = nextSubtitle;
                }
            };

            const syncConversationStatus = (status = null) => {
                if (!threadSubtitle) {
                    return;
                }

                const fallbackSubtitle = threadSubtitle.dataset.defaultSubtitle || threadSubtitle.textContent?.trim() || 'Percakapan langsung';
                const nextLabel = String(status?.label || fallbackSubtitle).trim() || 'Percakapan langsung';

                threadSubtitle.dataset.defaultSubtitle = fallbackSubtitle;
                threadSubtitle.textContent = nextLabel;
                threadSubtitle.classList.toggle('is-typing', Boolean(status?.is_typing));
            };

            const redirectToObrolanHome = () => {
                window.location.href = homeUrl;
            };

            const setRealtimeBadge = (state = 'fallback', label = 'Polling aktif') => {
                if (!realtimeBadge) {
                    return;
                }

                realtimeBadge.textContent = label;
                realtimeBadge.classList.remove('is-live', 'is-connecting', 'is-fallback');
                realtimeBadge.classList.add(
                    state === 'live'
                        ? 'is-live'
                        : (state === 'connecting' ? 'is-connecting' : 'is-fallback')
                );
            };

            const shouldReloadSidebarStructure = (summaries = [], pendingInviteCount = 0) => {
                const entries = Array.from(document.querySelectorAll('[data-conversation-entry]'));
                const entryIds = entries.map((entry) => String(entry.dataset.conversationId || ''));
                const summaryIds = (Array.isArray(summaries) ? summaries : []).map((summary) => String(summary.id));
                const inviteEntryCount = document.querySelectorAll('[data-invite-entry]').length;

                if (Number(pendingInviteCount || 0) !== inviteEntryCount) {
                    return true;
                }

                if (entryIds.length !== summaryIds.length) {
                    return true;
                }

                for (let index = 0; index < entryIds.length; index += 1) {
                    if (entryIds[index] !== summaryIds[index]) {
                        return true;
                    }
                }

                const summaryMap = new Map((Array.isArray(summaries) ? summaries : []).map((summary) => [String(summary.id), summary]));

                for (const entry of entries) {
                    const entryId = String(entry.dataset.conversationId || '');
                    const summary = summaryMap.get(entryId);

                    if (!summary) {
                        return true;
                    }

                    const currentSection = entry.closest('[data-obrolan-section]')?.dataset.obrolanSection || '';
                    const expectedSection = summary.is_archived
                        ? 'arsip'
                        : (summary.is_pinned ? 'pinned' : 'riwayat');

                    if (currentSection !== expectedSection) {
                        return true;
                    }
                }

                return false;
            };

            const updateSidebarSummaries = (summaries = []) => {
                const summaryMap = new Map(
                    (Array.isArray(summaries) ? summaries : []).map((summary) => [String(summary.id), summary])
                );

                document.querySelectorAll('[data-conversation-entry]').forEach((entry) => {
                    const summary = summaryMap.get(String(entry.dataset.conversationId || ''));
                    const nameNode = entry.querySelector('[data-conversation-name]');
                    const previewNode = entry.querySelector('[data-conversation-preview]');
                    const avatarNode = entry.querySelector('[data-conversation-avatar]');
                    const updatedNode = entry.querySelector('[data-conversation-updated]');
                    const footNode = entry.querySelector('[data-conversation-foot]');
                    const unreadBadge = entry.querySelector('[data-conversation-unread-badge]');
                    const presenceDot = entry.querySelector('[data-conversation-presence]');

                    if (!summary) {
                        return;
                    }

                    if (nameNode) {
                        nameNode.textContent = summary.name || 'Percakapan';
                    }

                    if (previewNode) {
                        previewNode.textContent = summary.preview_text || summary.secondary_line || 'Belum ada pesan.';
                    }

                    if (avatarNode && summary.avatar_url) {
                        avatarNode.src = summary.avatar_url;
                        avatarNode.alt = summary.name || 'Obrolan';
                    }

                    if (updatedNode) {
                        updatedNode.textContent = summary.updated_human || '';
                    }

                    if (footNode) {
                        const chips = [];

                        if (summary.is_group) {
                            chips.push(`<span data-conversation-foot-base>${escapeHtml(summary.member_count || 0)} anggota</span>`);
                        }

                        if (summary.is_pinned) {
                            chips.push('<span class="member-chat-sidebar-pill is-pin" data-conversation-pill-pin>Pin</span>');
                        }

                        if (summary.is_muted) {
                            chips.push('<span class="member-chat-sidebar-pill" data-conversation-pill-mute>Mute</span>');
                        }

                        if (summary.is_archived) {
                            chips.push('<span class="member-chat-sidebar-pill is-archive" data-conversation-pill-archive>Arsip</span>');
                        }

                        footNode.innerHTML = chips.join('');
                    }

                    entry.classList.toggle('is-archived', Boolean(summary.is_archived));
                    entry.dataset.contactUserId = summary.contact_user_id ? String(summary.contact_user_id) : '';
                    entry.dataset.searchText = String([
                        summary.name,
                        summary.secondary_line,
                        summary.preview_text,
                        summary.description,
                    ].filter(Boolean).join(' ')).toLowerCase();

                    if (unreadBadge) {
                        const unreadCount = Number(summary?.unread_count || 0);
                        unreadBadge.textContent = unreadCount > 99 ? '99+' : String(unreadCount);
                        unreadBadge.classList.toggle('d-none', unreadCount <= 0);
                        unreadBadge.classList.toggle('is-attention', unreadCount > 0);
                    }

                    if (presenceDot) {
                        presenceDot.classList.toggle('d-none', !summary?.is_contact_online);
                        presenceDot.classList.toggle('is-online', Boolean(summary?.is_contact_online));
                    }
                });
            };

            const updateInviteBadges = (count = 0) => {
                const nextCount = Number(count || 0);
                const displayCount = nextCount > 99 ? '99+' : String(nextCount);
                const headerBadge = document.querySelector('[data-group-invite-badge]');
                const labelBadge = document.querySelector('[data-group-invite-label-count]');

                if (headerBadge) {
                    headerBadge.textContent = displayCount;
                    headerBadge.classList.toggle('d-none', nextCount <= 0);
                }

                if (labelBadge) {
                    labelBadge.textContent = displayCount;
                    labelBadge.classList.toggle('d-none', nextCount <= 0);
                }
            };

            const handleTypingWhisper = (payload = {}) => {
                if (!threadSubtitle || Number(payload.userId || 0) === viewerId) {
                    return;
                }

                window.clearTimeout(typingIndicatorResetHandle);
                syncConversationStatus({
                    is_typing: Boolean(payload.typing),
                    label: Boolean(payload.typing)
                        ? (activeConversationType === 'direct'
                            ? 'Sedang mengetik...'
                            : `${payload.name || 'Anggota'} sedang mengetik...`)
                        : threadSubtitle.dataset.defaultSubtitle,
                });

                typingIndicatorResetHandle = window.setTimeout(() => {
                    refreshStatus();
                }, 2200);
            };

            const emitPresence = async ({ typing = null, keepalive = false } = {}) => {
                if (!presenceUrl) {
                    return;
                }

                const payload = {};

                if (activeConversationId > 0) {
                    payload.conversation_id = activeConversationId;
                }

                if (typing !== null) {
                    payload.typing = Boolean(typing);
                }

                try {
                    const response = await fetch(presenceUrl, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify(payload),
                        keepalive,
                    });

                    if (handleExpiredCsrf(response)) {
                        return;
                    }
                } catch (error) {
                    console.debug('Presence obrolan tidak sempat diperbarui.', error);
                }
            };

            const emitTypingWhisper = (typing) => {
                if (!presenceChannel || activeConversationId <= 0) {
                    return;
                }

                try {
                    presenceChannel.whisper('typing', {
                        userId: viewerId,
                        name: viewerName,
                        typing: Boolean(typing),
                    });
                } catch (error) {
                    console.debug('Whisper typing tidak sempat dikirim.', error);
                }
            };

            const scheduleTypingPresence = () => {
                if (!presenceUrl) {
                    return;
                }

                window.clearTimeout(typingDebounceHandle);
                typingDebounceHandle = window.setTimeout(() => {
                    const isTyping = Boolean(activeConversationId > 0 && composerInput?.value.trim());
                    emitPresence({
                        typing: isTyping,
                    });
                    emitTypingWhisper(isTyping);
                }, 360);
            };

            const refreshStatus = async () => {
                if (!statusUrl) {
                    return;
                }

                if (statusRefreshInFlight) {
                    return;
                }

                statusRefreshInFlight = true;

                const query = activeConversationId > 0
                    ? `?conversation_id=${activeConversationId}`
                    : '';

                try {
                    const response = await fetch(`${statusUrl}${query}`, {
                        cache: 'no-store',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });

                    if (handleExpiredCsrf(response)) {
                        return;
                    }

                    if (!response.ok) {
                        if (response.status === 403) {
                            forceReloadObrolanShell();
                        }
                        return;
                    }

                    const payload = await response.json();

                    if (shouldReloadSidebarStructure(payload.summaries || [], payload.pending_invites_count || 0)) {
                        forceReloadObrolanShell();
                        return;
                    }

                    syncSummaryNotifications(payload.summaries || []);
                    updateSidebarSummaries(payload.summaries || []);
                    updateInviteBadges(payload.pending_invites_count || 0);
                    syncConversationStatus(payload.active || null);
                } catch (error) {
                    console.debug('Status obrolan tidak sempat dimuat.', error);
                } finally {
                    statusRefreshInFlight = false;
                }
            };

            const markShellReady = () => {
                window.requestAnimationFrame(() => {
                    pageBody.classList.add('member-obrolan-ready');
                    syncViewportShell();
                });
            };

            if (wrapper) {
                wrapper.classList.remove('toggled', 'sidebar-hovered');
            }

            syncViewportShell();
            syncConversationHeader();
            syncConversationStatus();
            markShellReady();

            const stripSimpleBarSidebar = () => {
                if (!sidebarWrapper) {
                    return;
                }

                sidebarWrapper.removeAttribute('data-simplebar');
                sidebarWrapper.removeAttribute('style');
                sidebarWrapper.classList.remove('simplebar-scrollable-y', 'simplebar-scrollable-x');

                const content = sidebarWrapper.querySelector('.simplebar-content');
                if (content) {
                    const originalNodes = Array.from(content.childNodes);
                    sidebarWrapper.replaceChildren(...originalNodes);
                }

                sidebarWrapper.querySelectorAll(
                    '.simplebar-track, .simplebar-placeholder, .simplebar-height-auto-observer-wrapper, .simplebar-mask, .simplebar-offset, .simplebar-content-wrapper, .simplebar-wrapper'
                ).forEach((element) => element.remove());
            };

            const escapeHtml = (value) => {
                return String(value ?? '')
                    .replaceAll('&', '&amp;')
                    .replaceAll('<', '&lt;')
                    .replaceAll('>', '&gt;')
                    .replaceAll('"', '&quot;')
                    .replaceAll("'", '&#039;');
            };

            const buildMessageUrl = (template, messageId) => {
                return template.replace('__MESSAGE__', String(messageId));
            };

            const slugifyUsername = (value) => {
                return String(value ?? '')
                    .toLowerCase()
                    .replace(/[^\w ]+/g, '')
                    .trim()
                    .replace(/\s+/g, '-');
            };

            const updateUsernamePreview = () => {
                if (!usernameInput || !usernamePreview) {
                    return;
                }

                const slug = slugifyUsername(usernameInput.value);
                usernameInput.value = slug;
                usernamePreview.textContent = `${window.location.origin}/${slug || 'username'}`;
            };

            const clearFormErrors = (form) => {
                if (!form) {
                    return;
                }

                form.querySelectorAll('.is-invalid').forEach((element) => {
                    element.classList.remove('is-invalid');
                });

                form.querySelectorAll('.invalid-feedback[data-inline-error]').forEach((element) => {
                    element.remove();
                });
            };

            const applyFormErrors = (form, errors = {}) => {
                if (!form || !errors || typeof errors !== 'object') {
                    return;
                }

                Object.entries(errors).forEach(([field, messages]) => {
                    const input = form.querySelector(`[name="${field}"]`);

                    if (!input) {
                        return;
                    }

                    input.classList.add('is-invalid');

                    const feedback = document.createElement('div');
                    feedback.className = 'invalid-feedback';
                    feedback.dataset.inlineError = '1';
                    feedback.textContent = Array.isArray(messages) ? String(messages[0] || '') : String(messages || '');

                    if (input.parentElement?.classList.contains('input-group')) {
                        input.parentElement.insertAdjacentElement('afterend', feedback);
                    } else {
                        input.insertAdjacentElement('afterend', feedback);
                    }
                });
            };

            const setSubmitState = (button, isLoading, idleLabel) => {
                if (!button) {
                    return;
                }

                if (!button.dataset.originalLabel) {
                    button.dataset.originalLabel = idleLabel || button.innerHTML;
                }

                button.disabled = isLoading;
                button.innerHTML = isLoading
                    ? '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Menyimpan...'
                    : button.dataset.originalLabel;
            };

            const hideModal = (modalNode) => {
                if (!modalNode || !window.bootstrap?.Modal) {
                    return;
                }

                window.bootstrap.Modal.getOrCreateInstance(modalNode).hide();
            };

            const showNotice = (icon, title, text = '') => {
                if (window.Swal) {
                    return Swal.fire({
                        icon,
                        title,
                        text,
                        timer: icon === 'success' ? 1800 : undefined,
                        showConfirmButton: icon !== 'success',
                    });
                }

                window.alert(text ? `${title}\n\n${text}` : title);
                return Promise.resolve();
            };

            const syncHeaderAccount = (payload = {}) => {
                const nextLabel = String(payload.chat_label || payload.name || '').trim();
                const nextEmail = String(payload.email || '').trim();
                const nextAvatar = String(payload.avatar_url || '').trim();

                if (nextLabel && headerName) {
                    headerName.textContent = nextLabel;
                }

                if (nextAvatar && headerAvatar) {
                    headerAvatar.src = nextAvatar;
                    headerAvatar.alt = nextLabel || 'Anggota';
                }

                if (nextAvatar && profilePreview) {
                    profilePreview.src = nextAvatar;
                }

                if (nextLabel && profileLabel) {
                    profileLabel.textContent = nextLabel;
                }

                if (nextEmail && profileEmailLabel) {
                    profileEmailLabel.textContent = nextEmail;
                }

                if (threadCard && nextLabel) {
                    threadCard.dataset.viewerName = nextLabel;
                }
            };

            const requestConfirmation = async (title, text) => {
                if (window.Swal) {
                    return Swal.fire({
                        icon: 'warning',
                        title,
                        text,
                        showCancelButton: true,
                        confirmButtonText: 'Ya, lanjutkan',
                        cancelButtonText: 'Batal',
                    });
                }

                return Promise.resolve({
                    isConfirmed: window.confirm(text || title),
                });
            };

            const conversationUrl = (conversationId = activeConversationId) => {
                const url = new URL(homeUrl || '/member/obrolan', window.location.origin);

                if (Number(conversationId) > 0) {
                    url.searchParams.set('chat', String(conversationId));
                }

                return url.href;
            };

            const getLocalPreference = (key) => {
                try {
                    return window.localStorage.getItem(key);
                } catch (error) {
                    return null;
                }
            };

            const setLocalPreference = (key, value) => {
                try {
                    window.localStorage.setItem(key, value);
                } catch (error) {
                    console.debug('Preferensi Tomchat tidak bisa disimpan.', error);
                }
            };

            const isInstalledPwaSession = () => {
                if (notificationHelper?.isStandalone?.()) {
                    return true;
                }

                return window.matchMedia?.('(display-mode: standalone)')?.matches || window.navigator.standalone === true;
            };

            const syncNotificationToggle = () => {
                if (!notificationToggle || !notificationLabel) {
                    return;
                }

                notificationToggle.classList.remove('is-enabled', 'is-denied');

                if (!notificationHelper) {
                    notificationLabel.textContent = 'Notifikasi belum siap';
                    notificationToggle.disabled = true;
                    return;
                }

                const permission = notificationHelper.permission();
                const isSoundOnly = !notificationHelper.supported();
                const isEnabled = notificationHelper.isEnabled();
                const isSoundEnabled = notificationHelper.isSoundEnabled();

                notificationToggle.disabled = false;
                notificationIcon?.classList.remove('bx-bell', 'bx-bell-off', 'bx-volume-full');

                if (isEnabled) {
                    notificationLabel.textContent = 'Notifikasi aktif';
                    notificationToggle.classList.add('is-enabled');
                    notificationIcon?.classList.add('bx-bell');
                    return;
                }

                if (permission === 'denied') {
                    notificationLabel.textContent = isSoundEnabled ? 'Suara aktif' : 'Notifikasi diblokir';
                    notificationToggle.classList.add(isSoundEnabled ? 'is-enabled' : 'is-denied');
                    notificationIcon?.classList.add(isSoundEnabled ? 'bx-volume-full' : 'bx-bell-off');
                    return;
                }

                if (isSoundOnly) {
                    notificationLabel.textContent = isSoundEnabled ? 'Suara aktif' : 'Aktifkan suara';
                    notificationToggle.classList.toggle('is-enabled', isSoundEnabled);
                    notificationIcon?.classList.add(isSoundEnabled ? 'bx-volume-full' : 'bx-bell');
                    return;
                }

                notificationLabel.textContent = 'Aktifkan notifikasi';
                notificationIcon?.classList.add('bx-bell');
            };

            const previewNotificationSetup = async () => {
                if (!notificationHelper?.notifyMessage) {
                    return;
                }

                await notificationHelper.notifyMessage({
                    title: 'Notifikasi Tomchat aktif',
                    body: 'Suara dan notifikasi pesan baru sudah siap di perangkat ini.',
                    tag: 'tomchat-notification-ready',
                    force: true,
                });
            };

            const requestNotificationAccess = async (options = {}) => {
                if (!notificationHelper) {
                    await showNotice('warning', 'Notifikasi belum siap', 'Refresh halaman lalu coba lagi.');
                    return;
                }

                const result = await notificationHelper.request();
                syncNotificationToggle();

                if (result.permission === 'granted') {
                    if (options.preview !== false) {
                        await previewNotificationSetup();
                    }

                    await showNotice('success', 'Notifikasi aktif', 'Pesan baru akan memberi suara dan notifikasi saat Tomchat tidak sedang terbuka di layar.');
                    return;
                }

                if (result.permission === 'denied') {
                    await showNotice('warning', 'Notifikasi diblokir', 'Suara chat tetap aktif, tapi izin notifikasi perlu dibuka dari pengaturan Chrome.');
                    return;
                }

                await showNotice('success', 'Suara chat aktif', 'Browser ini belum mendukung notifikasi penuh, tapi suara pesan baru sudah diaktifkan.');
            };

            const shouldPromptNotificationSetup = () => {
                if (!notificationHelper || !isInstalledPwaSession()) {
                    return false;
                }

                const permission = notificationHelper.permission();
                const notificationReady = notificationHelper.isEnabled();
                const soundReady = notificationHelper.isSoundEnabled();

                if (notificationReady && soundReady) {
                    return false;
                }

                if (permission === 'denied' && soundReady) {
                    return false;
                }

                const promptedAt = Number(getLocalPreference(notificationPromptKey) || 0);
                return !promptedAt || Date.now() - promptedAt > notificationPromptSnoozeMs;
            };

            const promptNotificationSetup = async () => {
                if (!shouldPromptNotificationSetup()) {
                    return;
                }

                setLocalPreference(notificationPromptKey, String(Date.now()));

                let result = { isConfirmed: true };

                if (window.Swal) {
                    result = await Swal.fire({
                        icon: 'question',
                        title: 'Aktifkan notifikasi Tomchat?',
                        text: 'Izinkan sekali supaya pesan baru tetap muncul dan bersuara saat Tomchat sudah dipasang sebagai PWA.',
                        showCancelButton: true,
                        confirmButtonText: 'Aktifkan',
                        cancelButtonText: 'Nanti',
                        confirmButtonColor: '#dc0b25',
                        cancelButtonColor: '#64748b',
                    });
                } else {
                    result.isConfirmed = window.confirm('Aktifkan notifikasi dan suara Tomchat sekarang?');
                }

                if (result.isConfirmed) {
                    await requestNotificationAccess();
                } else {
                    syncNotificationToggle();
                }
            };

            const scheduleNotificationSetupPrompt = () => {
                window.setTimeout(() => {
                    void promptNotificationSetup();
                }, 900);
            };

            const isConversationMuted = (conversation = {}) => {
                if (Object.prototype.hasOwnProperty.call(conversation, 'is_muted')) {
                    return Boolean(conversation.is_muted);
                }

                return threadCard?.dataset.conversationMuted === '1';
            };

            const notifyIncomingMessage = async (message = {}, conversation = {}) => {
                if (!notificationHelper || isConversationMuted(conversation)) {
                    return;
                }

                const messageId = String(message.id || conversation.latest_message_id || '');
                const senderId = Number(message.user_id || conversation.latest_message_user_id || 0);

                if (!messageId || notifiedMessageIds.has(messageId) || message.is_mine || senderId === viewerId) {
                    return;
                }

                notifiedMessageIds.add(messageId);

                const title = String(
                    conversation.name || threadName?.textContent || 'Pesan baru di Tomchat'
                ).trim() || 'Pesan baru di Tomchat';
                const body = String(
                    message.body || conversation.latest_message_body || conversation.preview_text || 'Ada pesan baru masuk.'
                ).trim() || 'Ada pesan baru masuk.';
                const senderName = String(message.user_name || '').trim();
                const notificationBody = senderName && senderName !== 'Anda'
                    ? `${senderName}: ${body}`
                    : body;
                const conversationId = Number(conversation.id || activeConversationId || 0);

                await notificationHelper.notifyMessage({
                    title,
                    body: notificationBody,
                    icon: conversation.avatar_url || '/favicon/android-chrome-192x192.png',
                    tag: `tomchat-chat-${conversationId || messageId}`,
                    url: conversationUrl(conversationId),
                });
            };

            const syncSummaryNotifications = (summaries = []) => {
                const nextState = new Map();

                summaries.forEach((summary) => {
                    const conversationId = String(summary.id || '');
                    const latestMessageId = String(summary.latest_message_id || '');

                    if (!conversationId) {
                        return;
                    }

                    nextState.set(conversationId, latestMessageId);

                    if (!hasStatusBaseline || !latestMessageId) {
                        return;
                    }

                    const previousMessageId = knownSummaryMessageIds.get(conversationId);

                    if (
                        previousMessageId
                        && previousMessageId !== latestMessageId
                        && Number(summary.latest_message_user_id || 0) !== viewerId
                    ) {
                        void notifyIncomingMessage({
                            id: latestMessageId,
                            user_id: summary.latest_message_user_id,
                            body: summary.latest_message_body || summary.preview_text,
                        }, summary);
                    }
                });

                knownSummaryMessageIds = nextState;
                hasStatusBaseline = true;
            };

            const scrollMessagesToBottom = () => {
                if (!messagesWrap) {
                    return;
                }

                window.requestAnimationFrame(() => {
                    messagesWrap.scrollTop = messagesWrap.scrollHeight;
                });
            };

            const isMessagesNearBottom = () => {
                if (!messagesWrap) {
                    return true;
                }

                const distanceFromBottom = messagesWrap.scrollHeight - messagesWrap.scrollTop - messagesWrap.clientHeight;
                return distanceFromBottom < 72;
            };

            const syncComposerHeight = () => {
                if (!composerInput) {
                    return;
                }

                composerInput.style.height = 'auto';
                composerInput.style.height = `${Math.min(composerInput.scrollHeight, 168)}px`;
            };

            const closeAttachmentMenu = () => {
                if (!attachmentMenu) {
                    return;
                }

                attachmentMenu.classList.add('d-none');
            };

            const syncAttachmentPreview = () => {
                if (!attachmentPreview || !attachmentLabel) {
                    return;
                }

                if (!pendingAttachment) {
                    attachmentPreview.classList.add('d-none');
                    return;
                }

                attachmentPreview.classList.remove('d-none');
                attachmentLabel.textContent = pendingAttachment.label;
            };

            const clearAttachmentSelection = () => {
                pendingAttachment = null;

                if (attachmentMediaInput) {
                    attachmentMediaInput.value = '';
                }

                if (attachmentDocumentInput) {
                    attachmentDocumentInput.value = '';
                }

                syncAttachmentPreview();
            };

            const setAttachmentSelection = (type, files) => {
                if (!files || files.length === 0) {
                    clearAttachmentSelection();
                    return;
                }

                const selectedFiles = Array.from(files);

                if (files.length === 1) {
                    pendingAttachment = {
                        type,
                        files: selectedFiles,
                        label: `${type === 'media' ? 'Media' : 'Dokumen'} dipilih: ${files[0].name}`,
                    };
                } else {
                    pendingAttachment = {
                        type,
                        files: selectedFiles,
                        label: `${files.length} ${type === 'media' ? 'media' : 'dokumen'} dipilih.`,
                    };
                }

                syncAttachmentPreview();
            };

            const requestLocationAttachment = async () => {
                if (!navigator.geolocation) {
                    await showNotice('warning', 'Lokasi belum tersedia', 'Browser ini belum mendukung akses lokasi.');
                    return;
                }

                pendingAttachment = {
                    type: 'location',
                    label: 'Mengambil lokasi perangkat...',
                };
                syncAttachmentPreview();

                try {
                    const position = await new Promise((resolve, reject) => {
                        navigator.geolocation.getCurrentPosition(resolve, reject, {
                            enableHighAccuracy: true,
                            timeout: 12000,
                            maximumAge: 30000,
                        });
                    });

                    pendingAttachment = {
                        type: 'location',
                        label: 'Lokasi siap dikirim.',
                        location: {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                            accuracy: position.coords.accuracy,
                        },
                    };
                    syncAttachmentPreview();
                } catch (error) {
                    clearAttachmentSelection();
                    await showNotice('warning', 'Lokasi belum bisa diambil', 'Izinkan akses lokasi dari browser lalu coba lagi.');
                }
            };

            const emptyStateMarkup = (title, description) => `
                <div class="member-obrolan-empty" data-obrolan-empty>
                    <div class="member-obrolan-empty-icon">
                        <i class="bx bx-message-square-dots"></i>
                    </div>
                    <h2>${escapeHtml(title)}</h2>
                    <p>${escapeHtml(description)}</p>
                </div>
            `;

            const dateSeparatorMarkup = (dateKey, dateLabel) => `
                <div class="member-obrolan-date-separator" data-message-date="${escapeHtml(dateKey)}">
                    <span>${escapeHtml(dateLabel || dateKey)}</span>
                </div>
            `;

            const formatFileSize = (bytes = 0) => {
                const size = Number(bytes || 0);

                if (size <= 0) {
                    return '';
                }

                if (size < 1024 * 1024) {
                    return `${Math.max(1, Math.round(size / 1024))} KB`;
                }

                return `${(size / 1024 / 1024).toFixed(1)} MB`;
            };

            const attachmentMarkup = (attachment = {}) => {
                const type = String(attachment.type || 'document');
                const url = String(attachment.url || '');
                const name = String(attachment.name || 'Lampiran');

                if (!url) {
                    return '';
                }

                if (type === 'image') {
                    return `
                        <a class="member-obrolan-attachment-card is-image" href="${escapeHtml(url)}" target="_blank" rel="noopener">
                            <img src="${escapeHtml(url)}" alt="${escapeHtml(name)}">
                            <span>${escapeHtml(name)}</span>
                        </a>
                    `;
                }

                if (type === 'video') {
                    return `
                        <div class="member-obrolan-attachment-card is-video">
                            <video src="${escapeHtml(url)}" controls preload="metadata"></video>
                            <a href="${escapeHtml(url)}" target="_blank" rel="noopener">${escapeHtml(name)}</a>
                        </div>
                    `;
                }

                const sizeLabel = formatFileSize(attachment.size);

                return `
                    <a class="member-obrolan-attachment-card is-document" href="${escapeHtml(url)}" target="_blank" rel="noopener">
                        <i class="fas fa-file-alt"></i>
                        <span>${escapeHtml(sizeLabel ? `${name} · ${sizeLabel}` : name)}</span>
                    </a>
                `;
            };

            const messageExtrasMarkup = (message = {}) => {
                const attachments = Array.isArray(message.attachments) ? message.attachments : [];
                const location = message.location || null;
                const chunks = [];

                if (attachments.length > 0) {
                    chunks.push(`
                        <div class="member-obrolan-message-attachments">
                            ${attachments.map((attachment) => attachmentMarkup(attachment)).join('')}
                        </div>
                    `);
                }

                if (location?.maps_url) {
                    chunks.push(`
                        <a class="member-obrolan-location-card" href="${escapeHtml(location.maps_url)}" target="_blank" rel="noopener">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>
                                <strong>Lokasi dibagikan</strong>
                                <small>${escapeHtml(location.lat)}, ${escapeHtml(location.lng)}</small>
                            </span>
                        </a>
                    `);
                }

                return chunks.join('');
            };

            const messageMarkup = (message, { animateFresh = false } = {}) => {
                const avatar = message.avatar_url
                    ? `<img src="${escapeHtml(message.avatar_url)}" alt="${escapeHtml(message.user_name)}">`
                    : '';
                const actionMenu = message.can_edit || message.can_delete
                    ? `
                        <div class="member-obrolan-message-menu-wrap">
                            <button type="button" class="member-obrolan-message-menu-toggle" data-obrolan-message-menu-toggle data-message-id="${message.id}" aria-label="Aksi pesan">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <div class="member-obrolan-message-menu d-none" data-obrolan-message-menu>
                                ${message.can_edit ? `<button type="button" class="member-obrolan-message-menu-item" data-obrolan-message-edit data-message-id="${message.id}">Edit</button>` : ''}
                                ${message.can_delete ? `<button type="button" class="member-obrolan-message-menu-item is-danger" data-obrolan-message-delete data-message-id="${message.id}">Hapus</button>` : ''}
                            </div>
                        </div>
                    `
                    : '';

                return `
                    <article class="member-obrolan-message-row ${message.is_mine ? 'is-mine' : ''} ${animateFresh ? 'is-fresh' : ''}" data-message-id="${message.id}" data-message-body="${escapeHtml(message.body)}">
                        ${message.is_mine ? '' : avatar}
                        <div class="member-obrolan-message-bubble">
                            <div class="member-obrolan-message-meta">
                                <strong>${escapeHtml(message.user_name)}</strong>
                                <div class="member-obrolan-message-meta-trail">
                                    ${message.edited ? '<span class="member-obrolan-message-edited">Diedit</span>' : ''}
                                    <time>${escapeHtml(message.time_hm ?? '')}</time>
                                    ${actionMenu}
                                </div>
                            </div>
                            <p>${escapeHtml(message.body)}</p>
                            ${messageExtrasMarkup(message)}
                        </div>
                    </article>
                `;
            };

            const buildMessageThreadMarkup = (messages, { animateFresh = false } = {}) => {
                let previousDateKey = '';

                return messages.map((message) => {
                    const chunks = [];
                    const nextDateKey = String(message.date_key || '');

                    if (nextDateKey && nextDateKey !== previousDateKey) {
                        chunks.push(dateSeparatorMarkup(nextDateKey, message.date_label || nextDateKey));
                        previousDateKey = nextDateKey;
                    }

                    chunks.push(
                        messageMarkup(message, {
                            animateFresh: animateFresh && !knownMessageIds.has(String(message.id)),
                        })
                    );

                    return chunks.join('');
                }).join('');
            };

            const closeMessageMenus = ({ except = null } = {}) => {
                document.querySelectorAll('[data-obrolan-message-menu]').forEach((menu) => {
                    if (except && menu === except) {
                        return;
                    }

                    menu.classList.add('d-none');
                });

                document.querySelectorAll('[data-obrolan-message-menu-toggle]').forEach((toggle) => {
                    const menu = toggle.parentElement?.querySelector('[data-obrolan-message-menu]');
                    if (except && menu === except) {
                        return;
                    }

                    toggle.classList.remove('is-open');
                });
            };

            const closeSidebarActionMenus = ({ except = null } = {}) => {
                document.querySelectorAll('[data-sidebar-action-menu]').forEach((menu) => {
                    if (except && menu === except) {
                        return;
                    }

                    menu.classList.add('d-none');
                });

                document.querySelectorAll('[data-sidebar-action-toggle]').forEach((toggle) => {
                    const menu = toggle.parentElement?.querySelector('[data-sidebar-action-menu]');
                    if (except && menu === except) {
                        return;
                    }

                    toggle.classList.remove('is-open');
                });
            };

            const destroyInlineEditor = (article) => {
                if (!article) {
                    return;
                }

                const bodyNode = article.querySelector('.member-obrolan-message-bubble > p');
                const editor = article.querySelector('[data-obrolan-inline-editor]');

                if (editor) {
                    editor.remove();
                }

                if (bodyNode) {
                    bodyNode.hidden = false;
                }

                if (activeInlineEditMessageId && article.dataset.messageId === String(activeInlineEditMessageId)) {
                    activeInlineEditMessageId = null;
                }
            };

            const openInlineEditor = (messageId) => {
                const article = messagesWrap?.querySelector(`[data-message-id="${messageId}"]`);
                const bubble = article?.querySelector('.member-obrolan-message-bubble');
                const bodyNode = bubble?.querySelector('p');

                if (!article || !bubble || !bodyNode) {
                    return;
                }

                if (activeInlineEditMessageId && String(activeInlineEditMessageId) !== String(messageId)) {
                    destroyInlineEditor(messagesWrap?.querySelector(`[data-message-id="${activeInlineEditMessageId}"]`));
                }

                if (article.querySelector('[data-obrolan-inline-editor]')) {
                    return;
                }

                closeMessageMenus();

                const editor = document.createElement('div');
                editor.className = 'member-obrolan-inline-editor';
                editor.dataset.obrolanInlineEditor = 'true';
                editor.innerHTML = `
                    <textarea rows="3" maxlength="2000"></textarea>
                    <div class="member-obrolan-inline-editor-actions">
                        <button type="button" class="member-obrolan-inline-editor-button" data-obrolan-inline-cancel>Batal</button>
                        <button type="button" class="member-obrolan-inline-editor-button is-primary" data-obrolan-inline-save>Simpan</button>
                    </div>
                `;

                bubble.appendChild(editor);
                bodyNode.hidden = true;
                activeInlineEditMessageId = String(messageId);

                const textarea = editor.querySelector('textarea');
                textarea.value = article.dataset.messageBody || bodyNode.textContent || '';
                textarea.style.height = 'auto';
                textarea.style.height = `${Math.min(textarea.scrollHeight, 192)}px`;
                textarea.focus();
                textarea.setSelectionRange(textarea.value.length, textarea.value.length);

                textarea.addEventListener('input', () => {
                    textarea.style.height = 'auto';
                    textarea.style.height = `${Math.min(textarea.scrollHeight, 192)}px`;
                });
            };

            const updateMessage = async (messageId, nextBody = null) => {
                if (!messageId || !activeConversationId || !updateUrlTemplate) {
                    return;
                }

                const article = messagesWrap?.querySelector(`[data-message-id="${messageId}"]`);
                const body = String(nextBody ?? article?.dataset.messageBody ?? article?.querySelector('p')?.textContent ?? '').trim();

                if (body === '') {
                    window.alert('Isi pesan tidak boleh kosong.');
                    return;
                }

                try {
                    const response = await fetch(buildMessageUrl(updateUrlTemplate, messageId), {
                        method: 'PATCH',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({
                            conversation_id: activeConversationId,
                            body,
                        }),
                    });

                    const payload = await response.json();

                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Pesan gagal diperbarui.');
                    }

                    activeInlineEditMessageId = null;
                    await refreshThread();
                } catch (error) {
                    window.alert(error.message || 'Pesan gagal diperbarui.');
                }
            };

            const deleteMessage = async (messageId) => {
                if (!messageId || !activeConversationId || !deleteUrlTemplate) {
                    return;
                }

                const confirmation = await requestConfirmation(
                    'Hapus pesan ini?',
                    'Pesan yang dihapus tidak akan tampil lagi di obrolan.'
                );

                if (!confirmation.isConfirmed) {
                    return;
                }

                try {
                    activeInlineEditMessageId = null;
                    const response = await fetch(buildMessageUrl(deleteUrlTemplate, messageId), {
                        method: 'DELETE',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({
                            conversation_id: activeConversationId,
                        }),
                    });

                    const payload = await response.json();

                    if (!response.ok || !payload.success) {
                        throw new Error(payload.message || 'Pesan gagal dihapus.');
                    }

                    await refreshThread();
                } catch (error) {
                    window.alert(error.message || 'Pesan gagal dihapus.');
                }
            };

            const renderMessages = (messages) => {
                if (!messagesWrap) {
                    return;
                }

                const shouldStickToBottom = !hasRenderedThread || isMessagesNearBottom();

                if (!Array.isArray(messages) || messages.length === 0) {
                    knownMessageIds = new Set();
                    messagesWrap.innerHTML = emptyStateMarkup(
                        'Belum ada pesan di obrolan ini.',
                        'Kirim sapaan pertama dari kolom bawah. Pesan masuk dan pesan balasan akan langsung tampil di area ini.'
                    );
                    hasRenderedThread = true;
                    return;
                }

                const shouldAnimateFresh = hasRenderedThread;
                const freshIncomingMessages = hasRenderedThread
                    ? messages.filter((message) => !knownMessageIds.has(String(message.id)) && !message.is_mine)
                    : [];
                messagesWrap.innerHTML = buildMessageThreadMarkup(messages, {
                    animateFresh: shouldAnimateFresh,
                });
                knownMessageIds = new Set(messages.map((message) => String(message.id)));
                hasRenderedThread = true;

                freshIncomingMessages.forEach((message) => {
                    void notifyIncomingMessage(message, {
                        id: activeConversationId,
                        name: threadName?.textContent || threadCard?.dataset.mobileTitle || 'Tomchat',
                        avatar_url: message.avatar_url,
                    });
                });

                if (shouldStickToBottom) {
                    scrollMessagesToBottom();
                }
            };

            const refreshThread = async () => {
                if (!activeConversationId || !threadUrl || !messagesWrap) {
                    return;
                }

                if (activeInlineEditMessageId) {
                    return;
                }

                if (threadRefreshInFlight) {
                    return;
                }

                threadRefreshInFlight = true;

                try {
                    const response = await fetch(`${threadUrl}?conversation_id=${activeConversationId}`, {
                        cache: 'no-store',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    });

                    if (handleExpiredCsrf(response)) {
                        return;
                    }

                    if (!response.ok) {
                        if (response.status === 403) {
                            forceReloadObrolanShell();
                            return;
                        }

                        if (response.status === 404) {
                            redirectToObrolanHome();
                            return;
                        }

                        return;
                    }

                    const payload = await response.json();
                    syncConversationHeader(payload.conversation || null);
                    renderMessages(payload.messages || []);
                } catch (error) {
                    console.error('Gagal memuat thread obrolan.', error);
                } finally {
                    threadRefreshInFlight = false;
                }
            };

            const refreshCrossDeviceState = async () => {
                await refreshStatus();

                if (activeConversationId > 0) {
                    await refreshThread();
                }
            };

            const scheduleImmediateSync = (delay = 80) => {
                window.clearTimeout(immediateSyncHandle);
                immediateSyncHandle = window.setTimeout(() => {
                    void refreshCrossDeviceState();
                }, delay);
            };

            const sendMessage = async () => {
                if (!composerInput || !sendButton || !sendUrl || !activeConversationId || isSending) {
                    return;
                }

                const body = composerInput.value.trim();

                if (body === '' && !pendingAttachment) {
                    composerInput.focus();
                    return;
                }

                isSending = true;
                sendButton.disabled = true;
                composerInput.disabled = true;

                try {
                    const formData = new FormData();
                    formData.append('conversation_id', String(activeConversationId));
                    formData.append('body', body);

                    if (pendingAttachment?.files?.length) {
                        pendingAttachment.files.forEach((file) => {
                            formData.append('attachments[]', file);
                        });
                    }

                    if (pendingAttachment?.type === 'location' && pendingAttachment.location) {
                        formData.append('location_lat', String(pendingAttachment.location.lat));
                        formData.append('location_lng', String(pendingAttachment.location.lng));

                        if (pendingAttachment.location.accuracy !== undefined && pendingAttachment.location.accuracy !== null) {
                            formData.append('location_accuracy', String(pendingAttachment.location.accuracy));
                        }
                    }

                    const response = await fetch(sendUrl, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: formData,
                    });

                    if (handleExpiredCsrf(response)) {
                        return;
                    }

                    const payload = await response.json();

                    if (!response.ok) {
                        throw new Error(payload.message || 'Pesan gagal dikirim.');
                    }

                    composerInput.value = '';
                    syncComposerHeight();
                    clearAttachmentSelection();
                    await refreshThread();
                    await refreshStatus();
                } catch (error) {
                    window.alert(error.message || 'Pesan gagal dikirim.');
                } finally {
                    isSending = false;
                    sendButton.disabled = false;
                    composerInput.disabled = false;
                    emitPresence({ typing: false });
                    emitTypingWhisper(false);
                    composerInput.focus();
                }
            };

            const setupRealtime = () => {
                if (!echo || !viewerId) {
                    setRealtimeBadge('fallback', 'Polling aktif');
                    return;
                }

                setRealtimeBadge('connecting', 'Menyambung realtime...');

                const connection = echo?.connector?.pusher?.connection;

                if (connection) {
                    connection.bind('state_change', ({ current }) => {
                        if (current === 'connected') {
                            setRealtimeBadge('live', 'Realtime aktif');
                            return;
                        }

                        if (current === 'connecting' || current === 'initialized') {
                            setRealtimeBadge('connecting', 'Menyambung realtime...');
                            return;
                        }

                        setRealtimeBadge('fallback', 'Polling aktif');
                    });

                    connection.bind('error', () => {
                        setRealtimeBadge('fallback', 'Polling aktif');
                    });
                } else {
                    setRealtimeBadge('live', 'Realtime aktif');
                }

                userSyncChannel = echo.private(`chat.user.${viewerId}`);
                userSyncChannel.listen('.chat.sync', async (event) => {
                    await refreshStatus();

                    if (activeConversationId > 0 && Number(event?.conversation_id || 0) === activeConversationId) {
                        await refreshThread();
                    }
                });

                if (activeConversationId <= 0) {
                    return;
                }

                conversationSyncChannel = echo.private(`chat.conversation.${activeConversationId}`);
                conversationSyncChannel.listen('.chat.conversation.updated', async () => {
                    await refreshThread();
                    await refreshStatus();
                });

                presenceChannel = echo.join(`chat.presence.${activeConversationId}`);
                presenceChannel
                    .here(() => {
                        refreshStatus();
                    })
                    .joining(() => {
                        refreshStatus();
                    })
                    .leaving(() => {
                        refreshStatus();
                    })
                    .listenForWhisper('typing', (payload) => {
                        handleTypingWhisper(payload);
                    });
            };

            stripSimpleBarSidebar();
            window.requestAnimationFrame(stripSimpleBarSidebar);
            window.setTimeout(stripSimpleBarSidebar, 80);
            syncResponsiveShell();

            mobileToggle?.addEventListener('click', (event) => {
                if (!isMobileViewport()) {
                    return;
                }

                event.preventDefault();
                event.stopPropagation();
                wrapper?.classList.toggle('toggled');
            });

            mobileScrim?.addEventListener('click', closeMobileDrawer);
            window.addEventListener('resize', syncResponsiveShell);
            window.addEventListener('resize', syncViewportShell);
            window.visualViewport?.addEventListener('resize', syncViewportShell);
            window.visualViewport?.addEventListener('scroll', syncViewportShell);
            navigator.virtualKeyboard?.addEventListener?.('geometrychange', () => {
                syncViewportShell();
                pinShellDuringKeyboardTransition(900);
            });
            document.addEventListener('focusin', () => {
                syncViewportShell();
                pinShellDuringKeyboardTransition();
                window.setTimeout(syncViewportShell, 260);
                window.setTimeout(syncViewportShell, 520);
            }, true);
            document.addEventListener('focusout', () => {
                window.clearInterval(keyboardPinHandle);
                keyboardPinHandle = null;
                window.setTimeout(syncViewportShell, 180);
            }, true);

            if (composerInput) {
                composerInput.addEventListener('input', () => {
                    syncComposerHeight();
                    syncViewportShell();
                    scheduleTypingPresence();
                });
                composerInput.addEventListener('keydown', (event) => {
                    if (event.key === 'Enter' && !event.shiftKey) {
                        event.preventDefault();
                        sendMessage();
                    }
                });
                composerInput.addEventListener('blur', () => {
                    emitPresence({ typing: false });
                    emitTypingWhisper(false);
                    syncViewportShell();
                });
                syncComposerHeight();
            }

            if (attachmentToggle && attachmentMenu) {
                attachmentToggle.addEventListener('click', (event) => {
                    event.stopPropagation();
                    attachmentMenu.classList.toggle('d-none');
                });
            }

            attachmentOptions.forEach((option) => {
                option.addEventListener('click', async () => {
                    const kind = option.dataset.obrolanAttachmentKind;
                    closeAttachmentMenu();

                    if (kind === 'media' && attachmentMediaInput) {
                        attachmentMediaInput.click();
                        return;
                    }

                    if (kind === 'document' && attachmentDocumentInput) {
                        attachmentDocumentInput.click();
                        return;
                    }

                    if (kind === 'location') {
                        await requestLocationAttachment();
                    }
                });
            });

            if (attachmentMediaInput) {
                attachmentMediaInput.addEventListener('change', () => {
                    setAttachmentSelection('media', attachmentMediaInput.files);
                });
            }

            if (attachmentDocumentInput) {
                attachmentDocumentInput.addEventListener('change', () => {
                    setAttachmentSelection('document', attachmentDocumentInput.files);
                });
            }

            if (attachmentClear) {
                attachmentClear.addEventListener('click', clearAttachmentSelection);
            }

            document.addEventListener('click', (event) => {
                const clickInsideFloatingUi = Boolean(
                    event.target.closest('.modal, .modal-backdrop, .dropdown-menu, .swal2-container')
                );

                if (
                    isMobileViewport()
                    && sidebarWrapper
                    && !clickInsideFloatingUi
                    && !sidebarWrapper.contains(event.target)
                    && !mobileToggle?.contains(event.target)
                ) {
                    closeMobileDrawer();
                }

                if (!attachmentMenu || !attachmentToggle) {
                    return;
                }

                if (attachmentMenu.contains(event.target) || attachmentToggle.contains(event.target)) {
                    return;
                }

                closeAttachmentMenu();
            });

            if (usernameInput) {
                updateUsernamePreview();
                usernameInput.addEventListener('input', updateUsernamePreview);
                usernameInput.addEventListener('blur', updateUsernamePreview);
            }

            if (profilePhotoInput && profilePreview) {
                profilePhotoInput.addEventListener('change', () => {
                    const [file] = Array.from(profilePhotoInput.files || []);
                    if (!file) {
                        return;
                    }

                    profilePreview.src = URL.createObjectURL(file);
                });
            }

            if (profileForm) {
                profileForm.addEventListener('submit', async (event) => {
                    event.preventDefault();
                    clearFormErrors(profileForm);
                    updateUsernamePreview();

                    const submitButton = profileForm.querySelector('[data-member-profile-submit]');
                    setSubmitState(submitButton, true, 'Simpan profil');

                    try {
                        const response = await fetch(profileForm.action, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': csrfToken,
                            },
                            body: new FormData(profileForm),
                        });

                        const payload = await response.json().catch(() => ({}));

                        if (!response.ok) {
                            if (response.status === 422) {
                                applyFormErrors(profileForm, payload.errors || {});
                            }

                            throw new Error(payload.message || 'Profil belum berhasil diperbarui.');
                        }

                        syncHeaderAccount(payload.user || {});
                        hideModal(accountModal);
                        await showNotice('success', 'Profil berhasil diperbarui');
                    } catch (error) {
                        await showNotice('error', 'Gagal menyimpan profil', error.message || 'Periksa kembali data akun.');
                    } finally {
                        setSubmitState(submitButton, false, 'Simpan profil');
                    }
                });
            }

            if (passwordForm) {
                passwordForm.addEventListener('submit', async (event) => {
                    event.preventDefault();
                    clearFormErrors(passwordForm);

                    const submitButton = passwordForm.querySelector('[data-member-password-submit]');
                    const currentPasswordInput = passwordForm.querySelector('[name="current_password"]');
                    const newPasswordInput = passwordForm.querySelector('[name="new_password"]');
                    const repeatPasswordInput = passwordForm.querySelector('[name="repeat_password"]');

                    if ((newPasswordInput?.value || '') !== (repeatPasswordInput?.value || '')) {
                        applyFormErrors(passwordForm, {
                            repeat_password: ['Ulangi password baru harus sama dengan password baru.'],
                        });
                        await showNotice('warning', 'Password belum cocok', 'Pastikan ulangi password baru sama persis.');
                        return;
                    }

                    setSubmitState(submitButton, true, 'Simpan password');

                    try {
                        const formData = new FormData(passwordForm);
                        const response = await fetch(passwordForm.action, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': csrfToken,
                            },
                            body: formData,
                        });

                        const payload = await response.json().catch(() => ({}));

                        if (!response.ok) {
                            if (response.status === 422) {
                                applyFormErrors(passwordForm, payload.errors || {});
                            }

                            throw new Error(payload.message || 'Password belum berhasil diperbarui.');
                        }

                        passwordForm.reset();
                        hideModal(passwordModal);
                        await showNotice('success', 'Password berhasil diperbarui');
                    } catch (error) {
                        await showNotice('error', 'Gagal memperbarui password', error.message || 'Coba lagi beberapa saat lagi.');
                    } finally {
                        setSubmitState(submitButton, false, 'Simpan password');
                        currentPasswordInput?.focus();
                    }
                });
            }

            document.querySelectorAll('[data-member-obrolan-modal-trigger]').forEach((trigger) => {
                trigger.addEventListener('click', (event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    openAccountModalFromHeader(trigger);
                });
            });

            syncNotificationToggle();
            scheduleNotificationSetupPrompt();
            notificationToggle?.addEventListener('click', () => requestNotificationAccess());
            document.addEventListener('visibilitychange', () => {
                syncNotificationToggle();

                if (!document.hidden) {
                    scheduleImmediateSync();
                }
            });
            window.addEventListener('focus', () => scheduleImmediateSync());
            window.addEventListener('pageshow', () => scheduleImmediateSync(120));
            window.addEventListener('online', () => scheduleImmediateSync(120));

            syncAttachmentPreview();
            scheduleImmediateSync(0);
            setupRealtime();

            if (composerInput && sendButton) {
                composerInput.addEventListener('focus', closeAttachmentMenu);
                composerInput.addEventListener('focus', () => {
                    syncViewportShell();
                    pinShellDuringKeyboardTransition();
                    window.setTimeout(() => {
                        syncViewportShell();
                        scrollMessagesToBottom();
                    }, 320);
                });
            }

            if (sendButton) {
                sendButton.addEventListener('click', sendMessage);
            }

            sidebarWrapper?.addEventListener('click', (event) => {
                const sidebarToggle = event.target.closest('[data-sidebar-action-toggle]');
                if (sidebarToggle) {
                    event.preventDefault();
                    event.stopPropagation();

                    const menu = sidebarToggle.parentElement?.querySelector('[data-sidebar-action-menu]');
                    const willOpen = menu?.classList.contains('d-none');

                    closeSidebarActionMenus({
                        except: willOpen ? menu : null,
                    });

                    if (menu && willOpen) {
                        menu.classList.remove('d-none');
                        sidebarToggle.classList.add('is-open');
                    }

                    return;
                }

                const reportTrigger = event.target.closest('[data-report-conversation-trigger]');
                if (reportTrigger) {
                    event.preventDefault();
                    event.stopPropagation();

                    closeSidebarActionMenus();

                    if (reportConversationForm) {
                        reportConversationForm.action = reportTrigger.dataset.reportUrl || '#';
                    }

                    if (reportConversationTitle) {
                        reportConversationTitle.textContent = reportTrigger.dataset.reportTitle || 'obrolan ini';
                    }

                    if (reportConversationModal && window.bootstrap?.Modal) {
                        window.bootstrap.Modal.getOrCreateInstance(reportConversationModal).show();
                    }

                    return;
                }

                if (event.target.closest('[data-sidebar-action-menu]')) {
                    event.stopPropagation();
                }
            });

            if (messagesWrap && activeConversationId) {
                scrollMessagesToBottom();
                threadPollingHandle = window.setInterval(refreshThread, echo ? 15000 : 5000);
            }

            statusPollingHandle = window.setInterval(() => {
                refreshStatus();
            }, echo ? 18000 : 6000);

            if (activeConversationId > 0) {
                emitPresence({ typing: false });
            }

            messagesWrap?.addEventListener('click', (event) => {
                const menuToggle = event.target.closest('[data-obrolan-message-menu-toggle]');
                if (menuToggle) {
                    event.preventDefault();
                    event.stopPropagation();
                    const menu = menuToggle.parentElement?.querySelector('[data-obrolan-message-menu]');
                    const willOpen = menu?.classList.contains('d-none');
                    closeMessageMenus();

                    if (menu && willOpen) {
                        menu.classList.remove('d-none');
                        menuToggle.classList.add('is-open');
                    }
                    return;
                }

                const editButton = event.target.closest('[data-obrolan-message-edit]');
                if (editButton) {
                    event.preventDefault();
                    openInlineEditor(editButton.dataset.messageId);
                    return;
                }

                const deleteButton = event.target.closest('[data-obrolan-message-delete]');
                if (deleteButton) {
                    event.preventDefault();
                    deleteMessage(deleteButton.dataset.messageId);
                    return;
                }

                const inlineCancel = event.target.closest('[data-obrolan-inline-cancel]');
                if (inlineCancel) {
                    event.preventDefault();
                    destroyInlineEditor(inlineCancel.closest('[data-message-id]'));
                    return;
                }

                const inlineSave = event.target.closest('[data-obrolan-inline-save]');
                if (inlineSave) {
                    event.preventDefault();
                    const article = inlineSave.closest('[data-message-id]');
                    const textarea = article?.querySelector('[data-obrolan-inline-editor] textarea');
                    updateMessage(article?.dataset.messageId, textarea?.value ?? '');
                }
            });

            if (searchInput) {
                const conversationEntries = Array.from(document.querySelectorAll('[data-conversation-entry]'));
                const inviteEntries = Array.from(document.querySelectorAll('[data-invite-entry]'));
                const userEntries = Array.from(document.querySelectorAll('[data-user-entry]'));
                const inviteSection = document.querySelector('[data-obrolan-section="undangan"]');
                const pinnedSection = document.querySelector('[data-obrolan-section="pinned"]');
                const recentSection = document.querySelector('[data-obrolan-section="riwayat"]');
                const archivedSection = document.querySelector('[data-obrolan-section="arsip"]');
                const userSection = document.querySelector('[data-obrolan-section="anggota"]');
                const searchEmpty = document.querySelector('[data-search-empty]');
                const conversationEmpty = document.querySelector('[data-conversation-empty]');

                const syncSectionVisibility = (section, entrySelector, fallbackVisible = false) => {
                    if (!section) {
                        return;
                    }

                    const entries = Array.from(section.querySelectorAll(entrySelector));

                    if (entries.length === 0) {
                        section.classList.toggle('d-none', !fallbackVisible);
                        return;
                    }

                    const hasVisibleEntry = entries.some((entry) => !entry.classList.contains('d-none'));
                    section.classList.toggle('d-none', !hasVisibleEntry && !fallbackVisible);
                };

                const applySidebarSearch = () => {
                    const keyword = searchInput.value.trim().toLowerCase();
                    let visibleConversations = 0;
                    let visibleInvites = 0;
                    let visibleUsers = 0;

                    conversationEntries.forEach((entry) => {
                        const haystack = entry.dataset.searchText || '';
                        const isVisible = keyword === '' || haystack.includes(keyword);
                        entry.classList.toggle('d-none', !isVisible);
                        if (isVisible) {
                            visibleConversations += 1;
                        }
                    });

                    inviteEntries.forEach((entry) => {
                        const haystack = entry.dataset.searchText || '';
                        const isVisible = keyword === '' || haystack.includes(keyword);
                        entry.classList.toggle('d-none', !isVisible);
                        if (isVisible) {
                            visibleInvites += 1;
                        }
                    });

                    userEntries.forEach((entry) => {
                        const haystack = entry.dataset.searchText || '';
                        const isVisible = keyword !== '' && haystack.includes(keyword);
                        entry.classList.toggle('d-none', !isVisible);
                        if (isVisible) {
                            visibleUsers += 1;
                        }
                    });

                    if (userSection) {
                        userSection.classList.toggle('d-none', keyword === '' || visibleUsers === 0);
                    }

                    syncSectionVisibility(inviteSection, '[data-invite-entry]');
                    syncSectionVisibility(pinnedSection, '[data-conversation-entry]');
                    syncSectionVisibility(archivedSection, '[data-conversation-entry]');
                    syncSectionVisibility(
                        recentSection,
                        '[data-conversation-entry]',
                        keyword === '' && visibleConversations === 0 && visibleInvites === 0
                    );

                    if (conversationEmpty) {
                        conversationEmpty.classList.toggle('d-none', keyword !== '' || (visibleConversations + visibleInvites) > 0);
                    }

                    if (searchEmpty) {
                        searchEmpty.classList.toggle(
                            'd-none',
                            keyword === '' || (visibleConversations + visibleInvites + visibleUsers) > 0
                        );
                    }
                };

                searchInput.addEventListener('input', applySidebarSearch);
                applySidebarSearch();
            }

            document.querySelectorAll('[data-conversation-link], [data-user-entry]').forEach((entry) => {
                entry.addEventListener('click', () => {
                    closeMobileDrawer();
                });
            });

            document.addEventListener('click', (event) => {
                if (!event.target.closest('.member-chat-sidebar-action-wrap')) {
                    closeSidebarActionMenus();
                }

                if (!event.target.closest('.member-obrolan-message-menu-wrap')) {
                    closeMessageMenus();
                }
            });

            window.addEventListener('beforeunload', () => {
                window.clearTimeout(typingDebounceHandle);
                window.clearTimeout(immediateSyncHandle);

                if (threadPollingHandle) {
                    window.clearInterval(threadPollingHandle);
                }

                if (statusPollingHandle) {
                    window.clearInterval(statusPollingHandle);
                }

                if (echo) {
                    echo.leave(`chat.presence.${activeConversationId}`);
                    echo.leaveChannel(`private-chat.conversation.${activeConversationId}`);
                    echo.leaveChannel(`private-chat.user.${viewerId}`);
                }

                emitPresence({ typing: false, keepalive: true });
                emitTypingWhisper(false);
            });
        });
    </script>
@endsection