/** * Bingkai aplikasi — penyesuaian untuk elemen melayang di layar lebar. * * Sesi 20260809. Aturan bingkai utama ada di mobile.css. Berkas ini TERPISAH * karena satu alasan teknis: chat.css dan pwa-prompt.css dimuat di FOOTER, * yaitu setelah mobile.css di . Selektor dengan kekhususan sama yang * datang belakangan menang, jadi penyesuaian .ai-chat-widget dan .pwa-banner * yang ditulis di mobile.css diam-diam kalah dan tidak pernah berlaku. * Berkas ini dimuat PALING AKHIR di footer supaya selalu menang. * * Semuanya digerbang di 768px — tampilan di HP tidak berubah sama sekali. */ @media (min-width: 768px) { /* Ikon chat melayang dipasang position:fixed; right:24px sehingga mengukur diri ke tepi kanan viewport. Di layar 1440px ikonnya melayang jauh di kanan sementara aplikasinya di tengah — terlihat seperti dua hal terpisah. Jangkarnya dipindah ke tepi kanan bingkai, inset 24px seperti aslinya. transform TIDAK dipakai: kotak .ai-chat-widget ikut memuat jendela chat yang absolut, jadi menggeser seluruh kotak malah melempar tombolnya keluar. */ .ai-chat-widget { right: calc(50% - (var(--app-w, 460px) / 2) + 24px) !important; left: auto !important; } .ai-chat-window { max-width: calc(var(--app-w, 460px) - 32px); } /* Ajakan "pasang aplikasi" DULU berupa banner melintang yang dipasang position:fixed; left:0; right:0 — karena itu dulu ada aturan di sini yang menjepitnya ke lebar bingkai. Bentuknya sudah berubah jadi kartu di tengah layar (.pwa-overlay memakai flex centering), dan aturan lama itu ikut merusaknya: .pwa-banner memakai position:relative untuk animasi masuk, dan pada elemen relatif properti `left` TETAP BERLAKU — jadi kartunya digeser sejauh (50% lebar layar − 230px) ke kanan. Di layar 1920px itu berarti meleset 730px; pemilik proyek melihatnya menempel di tepi kanan. Penjepitan lebar juga tidak diperlukan lagi: kartunya sudah dibatasi max-width 380px oleh pwa-prompt.css. Jadi tidak ada penggantinya di sini — memang tidak ada yang perlu disesuaikan. */ /* Halaman chat berdiri sendiri (/chat) memakai position:fixed; left:0; width:100% supaya di HP mengisi layar penuh. Di layar lebar itu membuat headernya melekat ke tepi kiri-kanan layar sementara aplikasinya di tengah — halaman tampak pecah. Dijepit ke lebar bingkai, lengkap dengan garis tepi supaya menyatu dengan halaman lain. */ .ai-chat-page { left: 50% !important; right: auto !important; width: 100% !important; max-width: var(--app-w, 460px) !important; transform: translateX(-50%) !important; box-shadow: 0 0 0 1px rgba(20,20,19,0.06), 0 18px 60px rgba(20,20,19,0.10); } }