/*
* agz-font v14 - ketebalan font aplikasi Agendiz Cloud
*
* Lokasi : /var/www/agendiz.cloud/public/custom/agz-font.css
* Dimuat : lewat Nginx (snippets/agendiz-inbox-skin.conf), di semua halaman HTML
* kecuali /widget/...; aturan di bawah hanya kena pada:
* - dashboard pengguna : body[data-nav][data-theme]
* - panel Admin : body[data-admin]
* - tata letak guest : body.font-sans.antialiased.overflow-x-clip
* (tanpa data-nav/data-admin): login, daftar, lupa/reset password,
* 2FA, verify-email, suspended, invoice dan booking untuk pelanggan,
* halaman error (sejak v9)
* Landing statis, frontend WaDesk, storefront, installer, dan halaman
* workspace-suspended (kelas body berbeda) tidak kena.
* Sumber : ops/tambalan/agz-patch-inbox-skin.sh. Ubah di skrip, bukan di server.
*
* Teks normal 400 -> 500, medium 500 -> 600; semibold (600) dan bold (700) tetap,
* supaya judul tidak makin berat dan hierarki terjaga. Font mono (JetBrains Mono,
* hanya dimuat 400/500) tidak dinaikkan ke 600. Tema paper dan bright saja.
*
* Sejak v10 file ini juga memuat perbaikan tampilan halaman Pricing
* (/account/plans), sejak v11 warna sakelar aktif di tema bright, dan sejak
* v12 Live preview di Chatbot Widget Builder; lihat bagian paling bawah.
*/
:is(html:not([data-theme]), html[data-theme="paper"], html[data-theme="bright"]) :is(body[data-nav][data-theme], body[data-admin], body.font-sans.antialiased.overflow-x-clip:not([data-nav]):not([data-admin])) {
font-weight: 500;
--color-ink-500: #56706B;
}
:is(html:not([data-theme]), html[data-theme="paper"], html[data-theme="bright"]) :is(body[data-nav][data-theme], body[data-admin], body.font-sans.antialiased.overflow-x-clip:not([data-nav]):not([data-admin])) .font-normal {
font-weight: 500;
}
:is(html:not([data-theme]), html[data-theme="paper"], html[data-theme="bright"]) :is(body[data-nav][data-theme], body[data-admin], body.font-sans.antialiased.overflow-x-clip:not([data-nav]):not([data-admin])) .font-medium:not(.font-mono) {
font-weight: 600;
}
/* Penghalusan huruf: kelas `antialiased` di body membuat huruf tampak lebih
tipis di Mac. Kembali ke bawaan browser. Bila hasilnya kurang cocok, hapus
blok ini saja lalu jalankan ulang skrip. */
:is(html:not([data-theme]), html[data-theme="paper"], html[data-theme="bright"]) :is(body[data-nav][data-theme], body[data-admin], body.font-sans.antialiased.overflow-x-clip:not([data-nav]):not([data-admin])) {
-webkit-font-smoothing: auto;
-moz-osx-font-smoothing: auto;
}
/* ===== Perbaikan halaman Pricing /account/plans (v10; bukan soal font) =====
Bug WaDesk di resources/views/pricing/_features.blade.php: ikon ditulis sebagai
teks '' di dalam PHP lalu dicetak mentah, sehingga tidak pernah
jadi SVG. Browser menerima tag asing yang
membungkus teks fitur ke dalam kotak 14x14 px: kata turun baris dan saling
menimpa. Di sini kotak itu dihilangkan (display: contents) dan ikon digambar
ulang dengan CSS. Bila WaDesk memperbaikinya, tag tidak ada lagi
dan aturan ini otomatis tidak berlaku (tidak ada ikon ganda). Semua tema. */
body[data-page="pricing-index"] x-lucide {
display: contents;
}
body[data-page="pricing-index"] x-lucide[name="check"]::before,
body[data-page="pricing-index"] x-lucide[name="chevron-down"]::before,
body[data-page="pricing-index"] x-lucide[name="chevron-up"]::before {
content: "";
flex: none;
align-self: flex-start;
width: 14px;
height: 14px;
margin-top: 2px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-page="pricing-index"] x-lucide[name="chevron-down"]::before,
body[data-page="pricing-index"] x-lucide[name="chevron-up"]::before {
width: 12px;
height: 12px;
margin-top: 0;
align-self: center;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
body[data-page="pricing-index"] x-lucide[name="chevron-up"]::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}
/* Warna ikon (text-wa-deep / text-wa-green) ikut menular ke teks fitur yang
terbungkus; kembalikan warna teks sesuai kartunya. */
body[data-page="pricing-index"] x-lucide[name="check"] > * {
color: var(--color-ink-700, #1F4540);
}
body[data-page="pricing-index"] .bg-wa-deep x-lucide[name="check"] > * {
color: color-mix(in srgb, var(--color-paper-0, #FBFAF6) 90%, transparent);
}
/* Baris harga di kartu paket: angka sedikit lebih kecil, dan "/ month" tidak
terpotong; bila tidak muat, turun ke bawah angka dengan rapi. */
body[data-page="pricing-index"] [data-plan-card] .price {
font-size: 38px;
}
body[data-page="pricing-index"] [data-plan-card] div:has(> .price) {
flex-wrap: wrap;
row-gap: 4px;
}
body[data-page="pricing-index"] [data-plan-card] .price + span {
white-space: nowrap;
}
/* ===== Sakelar (toggle) aktif di tema bright (v11; bukan soal font) =====
Tema bright WaDesk memaksa .bg-paper-200 jadi abu #E6E6E6 dengan !important,
sehingga peer-checked:bg-wa-deep kalah dan sakelar aktif sama abunya dengan
yang mati. Di sini: aktif = hijau muda gelembung chat (#DDF2EC) dengan bulatan
hijau tua (#075E54); mati tetap abu dengan bulatan putih.
Hanya sakelar bulat (rounded-full + bg-paper-200); kotak centang dan kartu
pilihan yang juga memakai peer-checked tidak tersentuh. Tiga bentuk bulatan
di WaDesk: ::before, ::after, atau terpisah dengan peer-checked:translate-x. */
html[data-theme="bright"] .peer:checked ~ .rounded-full.bg-paper-200:is(.peer-checked\:bg-wa-deep, .peer-checked\:bg-wa-mint, .peer-checked\:bg-accent) {
background-color: #DDF2EC !important;
box-shadow: inset 0 0 0 1px rgba(7, 94, 84, .28);
}
html[data-theme="bright"] .peer:checked ~ .rounded-full.bg-paper-200:is(.peer-checked\:bg-wa-deep, .peer-checked\:bg-wa-mint, .peer-checked\:bg-accent)::before,
html[data-theme="bright"] .peer:checked ~ .rounded-full.bg-paper-200:is(.peer-checked\:bg-wa-deep, .peer-checked\:bg-wa-mint, .peer-checked\:bg-accent)::after,
html[data-theme="bright"] .peer:checked ~ .rounded-full[class*="peer-checked:translate-x"] {
background-color: #075E54 !important;
}
/* ===== Live preview Chatbot Widget Builder (v12; bukan soal font) =====
Preview di builder adalah tiruan sederhana buatan WaDesk, bukan widget asli
(widget asli dirapikan oleh public/custom/widget.css). Di sini tiruannya
dibuat mirip: header dengan avatar dan status, gelembung sambutan berekor,
kolom bawah abu. Warna tetap diisi WaDesk dari pengaturan (style inline).
Tampilan lengkap, termasuk layar sambutan: tombol "Open standalone preview". */
body[data-page="user-chatbot-widgets-builder"] #cbw-prev-header {
position: relative;
height: auto;
min-height: 54px;
gap: 10px;
padding: 9px 12px;
font-size: 13.5px;
font-weight: 700;
}
body[data-page="user-chatbot-widgets-builder"] #cbw-prev-header::before {
content: '';
width: 32px;
height: 32px;
flex: none;
border-radius: 50%;
background: currentColor;
opacity: 0.2;
}
body[data-page="user-chatbot-widgets-builder"] #cbw-prev-header::after {
content: '';
position: absolute;
left: 19px;
top: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5h12A3.5 3.5 0 0 1 21.5 7v7.5A3.5 3.5 0 0 1 18 18h-6.2l-4.6 3.4A.75.75 0 0 1 6 20.8V18A3.5 3.5 0 0 1 2.5 14.5V7A3.5 3.5 0 0 1 6 3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5h12A3.5 3.5 0 0 1 21.5 7v7.5A3.5 3.5 0 0 1 18 18h-6.2l-4.6 3.4A.75.75 0 0 1 6 20.8V18A3.5 3.5 0 0 1 2.5 14.5V7A3.5 3.5 0 0 1 6 3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-page="user-chatbot-widgets-builder"] #cbw-prev-title {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
body[data-page="user-chatbot-widgets-builder"] #cbw-prev-title::after {
content: 'Tim kami siap membantu';
padding-left: 10px;
font-size: 10.5px;
font-weight: 500;
opacity: 0.88;
background: radial-gradient(circle at 3px 50%, #4ADE80 0 3px, transparent 3.5px) no-repeat;
}
body[data-page="user-chatbot-widgets-builder"] #cbw-prev-welcome {
position: relative;
margin-left: 7px;
border-radius: 0 10px 10px 10px;
font-size: 12.5px;
box-shadow: 0 1px 1px rgba(11, 20, 26, 0.08);
}
body[data-page="user-chatbot-widgets-builder"] #cbw-prev-welcome::before {
content: '';
position: absolute;
top: 0;
left: -7px;
width: 8px;
height: 10px;
background: inherit;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
body[data-page="user-chatbot-widgets-builder"] div:has(> #cbw-prev-btn) {
border-top-color: transparent !important;
background-color: #F0F2F5 !important;
}
body[data-page="user-chatbot-widgets-builder"] #cbw-prev-btn {
padding-top: 9px;
padding-bottom: 9px;
border-radius: 10px;
font-weight: 700;
}
/* v13: Client Support Bot tidak menutupi widget "new messages".
Keduanya fixed di kanan bawah (bot: bottom 20px; bell: bottom-5 right-5).
Hanya saat bell tampil dan masih di posisi aslinya, launcher bot naik 64px.
Launcher yang sudah digeser pengguna (style inline left) tidak disentuh. */
body:has(#ibx-bell.right-5.bottom-5:not(.hidden)) #support-bot-widget.sbw-popup .sbw-launcher:not([style*="left"]) {
bottom: 84px;
}
/* v14: Client Support Bot tidak menutupi tombol Kirim di Team Inbox.
Launcher (bulatan 56px, kanan bawah layar) berada tepat di atas tombol Kirim bila
kolom percakapan mentok di tepi kanan (panel kontak tertutup). Baris tombol di bawah
kolom tulis diberi ruang kosong 76px di kanan, jadi Kirim bergeser ke kiri launcher.
Hanya layar >= 768px, hanya launcher di posisi aslinya (tidak digeser, tidak
dihapus pengguna); mode side-panel (tab di tepi) tidak menutupi apa pun. */
@media (min-width: 768px) {
body[data-page="user-team-inbox-index"]:has(#support-bot-widget.sbw-popup .sbw-launcher:not([style*="left"]):not([style*="none"])) #ti-frame.no-contact #composer-actions {
padding-right: 76px;
}
}