/* =====================================================================
   Chat MyJek - sistem desain aplikasi customer (Fondasi v3 + Komponen v4,
   canvas "MyJek Customer - Design System"), WEB-CHAT-20.
   Warna: Aksi #D33F03, gradasi CTA F58A1F > E2530A > D33F03 (teks putih),
   Emas #FFCA3A (terpilih), Tinta #1C1310, Hijau #1F7A4D, Bahaya #A32316,
   kartu putih, garis #E9E6E2, abu netral #EFEDEA. Huruf: Hanken Grotesk
   untuk judul/tombol, Plus Jakarta Sans untuk isi. Hanya mode terang.
   Sudut: pil (CTA, chip), 12 (kartu, kolom, lembar), gelembung 18/6.
   Bayangan cokelat hangat hanya untuk yang melayang. Hanya transform dan
   opacity yang dianimasikan; hover hanya di (hover:hover).
   ===================================================================== */
:root {
  color-scheme: light;
  --font-judul: 'Hanken Grotesk', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --bg: #FFFDF9;
  --surface: #FFFFFF;
  --field: #F7F6F5;
  --field-2: #EFEDEA;
  --ink: #1C1310;
  --ink-2: #4A3A30;
  --muted: #6E5F55;
  --subtle: #8C796B;
  --line: #E9E6E2;
  --line-2: #D6D1CB;
  --navy: #1C1310;
  --orange: #D33F03;
  --orange-hover: #E2530A;
  --orange-ink: #FFFFFF;
  --orange-teks: #A8330A;
  --gradasi-cta: linear-gradient(90deg, #F58A1F 0%, #E2530A 52%, #D33F03 100%);
  --gradasi-merek: linear-gradient(135deg, #F84808 0%, #F89808 62%, #F8B808 100%);
  --emas: #FFCA3A;
  --emas-tua: #B26A00;
  --ok: #1F7A4D;
  --ok-teks: #1A6B43;
  --ok-soft: #E3F4EA;
  --danger: #A32316;
  --danger-soft: #FBE9E6;
  --pel-bg: linear-gradient(165deg, #FFE27A 0%, #FFC638 100%);
  --pel-ink: #1C1310;
  --pel-meta: #6E5F55;
  --pel-kutip: rgba(28, 19, 16, .08);
  --mereka-bg: #FFFFFF;
  --kutip: rgba(28, 19, 16, .06);
  --centang-baca: #B26A00;
  --kirim-bg: linear-gradient(90deg, #F58A1F 0%, #E2530A 52%, #D33F03 100%);
  --fokus: #B26A00;
  --sorot: rgba(255, 202, 58, .38);
  --scrim: rgba(28, 19, 16, .48);
  --bayang-gelembung: 0 1px 1px rgba(46, 26, 14, .14);
  --shadow-float: 0 1px 2px rgba(46, 26, 14, .1), 0 8px 18px -10px rgba(46, 26, 14, .4);
  --shadow-cta: inset 0 1px 0 rgba(255, 253, 249, .35), 0 2px 4px rgba(46, 26, 14, .08), 0 16px 28px -14px rgba(126, 37, 6, .6);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --safe-atas: env(safe-area-inset-top, 0px);
  --safe-bawah: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
/* awal.js: sesi sudah ada -> kerangka memuat dulu, bukan formulir Masuk (class dicabut app.js saat layar pertama dipilih) */
html.ada-sesi #layarMasuk { display: none !important; }
html.ada-sesi #layarMuat[hidden] { display: flex !important; }
html, body { height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
img { max-width: 100%; }
::selection { background: rgba(255, 202, 58, .45); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sprite { position: absolute; width: 0; height: 0; }
.berkas-sembunyi { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.salin-bantu { position: fixed; opacity: 0; pointer-events: none; }
.i { width: 22px; height: 22px; fill: currentColor; flex: none; }
/* Huruf judul (Hanken Grotesk): judul layar, judul lembar, tombol, nama/judul kartu, angka besar. */
h1, h2, h3, .btn, .strip-teks b, .ko-atas b, .rk-kepala b, .dt-judul, .lj-judul, .pt-judul, .pt-atas-teks b, .kn-total b,
.pt-rek-teks b, .pt-nota-total, .kode-besar, .nf-kepala h3, .nf-grand, .nf-terima, .chip-order, .ko-tombol, .pt-salin, .riw-atas b,
.lv-atas-teks b, .bl-teks b, .ol-layanan button, .jam-waktu { font-family: var(--font-judul); }

.app { position: fixed; inset: 0; height: 100dvh; display: flex; justify-content: center; background: var(--bg); overflow: visible; }
.layar {
  position: relative; width: 100%; max-width: 560px; height: 100%;
  display: flex; flex-direction: column; background: var(--bg);
}
@media (min-width: 600px) {
  .app { background: var(--field-2); }
  .layar { box-shadow: 0 0 0 1px var(--line); }
}

/* ============================ tombol & kolom ============================ */
/* Komponen v4: utama = pil 56 gradasi + Hanken 800 19 putih; sekunder = garis tinta 1.5, sudut 12, 54; bahaya = pil merah. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px; border: 0; border-radius: 999px;
  font-weight: 800; font-size: 16px; letter-spacing: .01em;
  transition: transform 120ms var(--ease-out), background-color 150ms ease, opacity 150ms ease;
}
.btn:active { transform: scale(.97); }
.btn-utama { min-height: 56px; background: var(--gradasi-cta); color: var(--orange-ink); width: 100%; font-size: 19px; letter-spacing: .2px; box-shadow: var(--shadow-cta); }
.btn-sekunder { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 12px; font-weight: 700; }
.btn-bahaya { background: var(--danger); color: #fff; }
.btn-kecil { min-height: 38px; padding: 0 16px; font-size: 16px; width: auto; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .65; pointer-events: none; }
.btn .spinner { display: none; }
.btn[aria-busy="true"] .spinner { display: inline-block; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

.btn-ikon {
  width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent;
  display: grid; place-items: center; color: var(--ink); flex: none;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.btn-ikon:active { transform: scale(.97); }
.btn-ikon-kecil { width: 44px; height: 44px; }
.btn-ikon-kecil .i { width: 18px; height: 18px; }
.btn-gelap { color: #fff; background: rgba(28, 19, 16, .4); }

.tautan { background: none; border: 0; padding: 8px 4px; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.kolom-form { margin-bottom: 16px; }
/* Label 14px/700/8px = sama dengan .lbl di form order yang live; kolomnya 16px. */
.kolom-form label, .kolom-form .label { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.kolom-form input[type="text"], .kolom-form input[type="tel"], .kolom-form textarea, #inKode, #inKodeHp {
  width: 100%; min-height: 54px; padding: 0 16px; font-size: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(46, 26, 14, .06), 0 8px 18px -14px rgba(46, 26, 14, .35);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.kolom-form input::placeholder, textarea::placeholder { color: var(--subtle); }
.kolom-form input:focus-visible, .kolom-form textarea:focus-visible, #inKode:focus-visible, #inKodeHp:focus-visible { outline: 0; border: 2px solid var(--emas-tua); padding-inline: 15px; }
.kolom-form textarea { padding: 12px 16px; line-height: 1.4; resize: none; display: block; }
.kolom-form.salah input, .kolom-form.salah textarea { border: 2px solid var(--danger); padding-inline: 15px; }
.kolom-form.benar input { border-color: var(--ok); }
.galat { color: #8E1D12; font-size: 13px; line-height: 18px; font-weight: 600; margin-top: 6px; min-height: 0; }
.galat:empty { display: none; }
.info-kecil { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* ============================ layar masuk ============================ */
/* Masuk = layar pertama (rev. 5): isi atas muat 360x640 tanpa gulir, sisanya di bawah lipatan. */
.layar-info { overflow-y: auto; overscroll-behavior: contain; }
.layar-masuk { overflow: hidden; background: linear-gradient(180deg, #FFFDF9 0%, #FFF4E2 38%, #FCD591 60%, #F8B030 80%, #F89808 100%); }
.layar-masuk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: 0; pointer-events: none;
  background: url(/shared/chat/gambar/motif-sumbawa.png) top center / 130px 110px repeat; opacity: .13; mix-blend-mode: multiply;
  filter: grayscale(1) contrast(3); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
}
.masuk-gulir { position: relative; z-index: 1; }
.masuk-gulir { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.masuk-isi, .info-isi { width: 100%; max-width: 420px; margin: 0 auto; }
.info-isi { padding: calc(28px + var(--safe-atas)) 20px calc(28px + var(--safe-bawah)); }
.masuk-isi { padding: calc(14px + var(--safe-atas)) 20px calc(12px + var(--safe-bawah)); min-height: 100dvh; display: flex; flex-direction: column; }
/* V1: formulir mengisi sisa layar, tombol utama menempel di bawahnya (sepertiga bawah), tautan privasi tepat di bawah tombol. */
#formMasuk { flex: 1; display: flex; flex-direction: column; }
#btnMasuk { margin-top: auto; }
.masuk-merek { display: flex; justify-content: center; margin: 18px 0 8px; }
.masuk-merek img { width: 120px; height: 100px; object-fit: contain; }
.masuk-isi h1, .info-isi h1 { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 30px; text-wrap: balance; }
.masuk-isi h1 { font-size: 30px; line-height: 34px; letter-spacing: -.8px; text-align: center; }
.masuk-sub { color: var(--ink-2); font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; margin: 6px auto 18px; max-width: 38ch; }
.masuk-isi .kolom-form { margin-bottom: 12px; }
.masuk-isi .kolom-form label, .masuk-isi .kolom-form .label { margin-bottom: 6px; }
.masuk-isi .kolom-form input { min-height: 54px; border-radius: 14px; background: #FFFDF9; }
.masuk-privasi { text-align: center; font-size: 16px; margin-top: 4px; }
.masuk-privasi a, .masuk-kaki a { color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }
.chip-kota { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-kota button {
  min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  transition: transform 120ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
}
.chip-kota button:active { transform: scale(.97); }
.chip-kota button[aria-checked="true"] { background: var(--emas); border-color: var(--emas); color: var(--ink); font-weight: 700; }
.turnstile { min-height: 0; }
.turnstile:not(:empty) { margin-bottom: 8px; }
.catatan { color: var(--ink-2); font-size: 13px; text-align: center; margin-top: 16px; }
.galat-form { margin: 0 0 10px; text-align: center; }
.tur-coba { display: block; margin: -4px auto 12px; min-height: 44px; }
.pindah-masuk { margin-top: 20px; text-align: center; }
.pindah-masuk form { margin-top: 12px; text-align: left; }
.pindah-masuk label { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
#inKodeHp { margin-bottom: 12px; }
.baris-kode { display: flex; gap: 8px; }
.baris-kode input { flex: 1; letter-spacing: .3em; text-align: center; font-weight: 700; }
.baris-kode .btn { min-height: 50px; padding: 0 18px; font-size: 16px; }

.layar-info .info-isi { text-align: center; padding-top: calc(72px + var(--safe-atas)); }
.info-ikon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 20px; background: linear-gradient(160deg, #B9A597 0%, #8C796B 55%, #5E4F45 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(46, 26, 14, .12); }
.info-ikon .i { width: 30px; height: 30px; }
.info-isi p { color: var(--muted); margin: 10px auto 24px; max-width: 34ch; }
.info-aksi { display: grid; gap: 10px; }

/* ============================ header chat ============================ */
.atas {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: calc(8px + var(--safe-atas)) 6px 8px 14px;
  background: var(--surface); border-bottom: 0; box-shadow: 0 1px 0 rgba(28, 19, 16, .08); position: relative; z-index: 20;
}
.atas-logo { height: 28px; width: auto; flex: none; }
.atas-avatar:not(.admin) { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(160deg, #FF9F4F 0%, #F4640F 55%, #D33F03 100%); box-shadow: 0 0 0 2px #fff; overflow: hidden; }
.atas-avatar:not(.admin) .atas-logo { height: 18px; filter: brightness(0) invert(1); }
/* WEB-CHAT-11: foto admin yang bertugas (bulat ala WhatsApp); tanpa admin = logo MyJek */
.atas-avatar { flex: none; display: grid; place-items: center; }
.atas-avatar.admin { width: 40px; height: 40px; }
.atas-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--field-2); }
.atas-inisial { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--emas); color: var(--ink); font-family: var(--font-judul); font-weight: 800; font-size: 16px; }
.atas-teks { flex: 1; min-width: 0; }
.atas-teks h1 { font-size: 16px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-baris { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--orange-teks); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 150ms ease; }
.status-baris.ketik { color: var(--ink-2); }   /* bukan hijau: hijau hanya untuk "beres" (6.1) */
.menu-induk { position: relative; }
.menu-atas, .menu-pesan {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-float); padding: 4px; z-index: 50;
  opacity: 0; transform: scale(.96); transform-origin: top right;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.menu-atas { position: absolute; right: 0; top: calc(100% + 4px); width: 232px; }
.menu-atas.buka, .menu-pesan.buka { opacity: 1; transform: none; }
.menu-pesan { position: fixed; z-index: 42; }
.menu-butir {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; font-weight: 600; text-align: left; color: var(--ink);
}
.menu-butir .i { width: 20px; height: 20px; color: var(--muted); }
.menu-butir:active { background: var(--field-2); }
.menu-butir.bahaya, .menu-butir.bahaya .i { color: var(--danger); }
.latar-menu { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; transition: opacity 160ms ease; }
.latar-menu.buka { opacity: 1; }

/* ============================ spanduk ============================ */
.spanduk-wadah { flex: none; position: relative; z-index: 10; }
.spanduk {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  font-size: 14px; font-weight: 600; line-height: 1.35;
  background: var(--field-2); color: var(--ink); border-bottom: 1px solid var(--line);
  animation: naikKecil 160ms var(--ease-out);
}
.spanduk .i { width: 18px; height: 18px; }
.spanduk span { flex: 1; min-width: 0; }
.spanduk { background: var(--ink); color: #fff; border-bottom: 0; font-size: 13px; line-height: 18px; }
.spanduk.galat-sp { background: var(--danger); color: #fff; }
.spanduk button { border: 0; background: none; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; color: inherit; flex: none; }

/* ============================ daftar pesan ============================ */
.layar-chat { background: url(/shared/chat/gambar/doodle-chat.svg) top center / 390px auto repeat-y,
  radial-gradient(95% 50% at 92% 0%, #FAA3B2 0%, rgba(250, 163, 178, 0) 58%), radial-gradient(90% 45% at 0% 0%, #FCBDAC 0%, rgba(252, 189, 172, 0) 56%),
  radial-gradient(160% 105% at 50% 100%, #FBD77F 0%, #FBD884 38%, rgba(251, 216, 132, 0) 78%), linear-gradient(180deg, #FCB7A2 0%, #FDC991 30%, #FAD686 100%); }
.daftar-wadah { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.daftar {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 10px 8px; display: flex; flex-direction: column; scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
.daftar:focus-visible { outline-offset: -2px; }

.baris { position: relative; display: flex; margin-top: 4px; touch-action: pan-y; -webkit-touch-callout: none; }
.baris.saya { justify-content: flex-end; }
.baris.saya + .baris.mereka, .baris.mereka + .baris.saya,
.pemisah + .baris, .garis-baru + .baris, .sistem + .baris, .kartu-order + .baris { margin-top: 10px; }
.baris::before {
  content: ""; position: absolute; inset: -2px -10px; background: var(--sorot); opacity: 0; pointer-events: none; border-radius: 4px;
}
.baris.sorot::before { animation: sorot 1s ease-out; }
@keyframes sorot { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

.gelembung {
  position: relative; max-width: min(82%, 440px); padding: 6px 10px 5px;
  border-radius: 18px 18px 18px 6px; font-size: 15px; line-height: 21px; overflow-wrap: anywhere; box-shadow: var(--bayang-gelembung);
  user-select: text; -webkit-touch-callout: none;
  transition: transform 200ms var(--ease-out);
}
@media (pointer: coarse) { .gelembung { -webkit-user-select: none; user-select: none; } }
.gelembung.digeser { transition: none; }
.gelembung.terangkat { z-index: 41; transform: scale(1.02); transition: transform 160ms var(--ease-out); }
.gelembung::after { content: ""; display: block; clear: both; }
.mereka .gelembung { background: var(--mereka-bg); color: var(--ink); }
.saya .gelembung { background: var(--pel-bg); color: var(--pel-ink); border-radius: 18px 18px 6px 18px; }
.saya .gelembung a { color: var(--pel-ink); }
.gelembung a { text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.penulis { display: block; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--orange-teks); margin-bottom: 1px; }
.teks { display: inline; white-space: pre-wrap; }
.meta {
  float: right; margin: 9px 0 -1px 12px; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; position: relative; top: 2px;
}
.saya .meta { color: var(--pel-meta); }
.centang { position: relative; width: 16px; height: 16px; display: inline-block; }
.centang .c { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 150ms linear; }
.centang[data-s="jam"] .c-jam, .centang[data-s="satu"] .c-satu, .centang[data-s="dua"] .c-dua, .centang[data-s="baca"] .c-dua { opacity: 1; }
.centang[data-s="baca"] { color: var(--centang-baca); }

.ikon-balas {
  position: absolute; right: calc(100% + 14px); top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .86); color: var(--ink); box-shadow: var(--bayang-gelembung);
  opacity: 0; transform: scale(.6); transition: opacity 150ms ease, transform 150ms var(--ease-out); pointer-events: none;
}
.ikon-balas .i { width: 18px; height: 18px; }
.siap-balas .ikon-balas { opacity: 1; transform: none; }
.gel-menu {
  position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: inherit; color: inherit; opacity: 0; transition: opacity 120ms ease;
}
.gel-menu .i { width: 16px; height: 16px; }
.gel-menu:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .gelembung:hover .gel-menu { opacity: .85; } }
@media (pointer: coarse) { .gel-menu { display: none; } }

.kutipan {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 12px;
  padding: 6px 10px; margin: 2px 0 6px; background: var(--kutip); color: inherit;
}
.saya .kutipan { background: var(--pel-kutip); }
.k-teks { flex: 1; min-width: 0; display: block; }
.k-nama { display: block; font-size: 12px; font-weight: 800; }
.k-isi { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; opacity: .85; }
.k-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--field-2); }
.k-thumb-ikon { display: grid; place-items: center; color: var(--muted); }
.k-thumb-ikon .i { width: 20px; height: 20px; }

.kisi { display: grid; gap: 2px; margin: 2px 0 4px; border-radius: 12px; overflow: hidden; width: min(264px, 62vw); grid-template-columns: 1fr 1fr; }
.kisi.n1 { grid-template-columns: 1fr; }
.foto { position: relative; display: block; padding: 0; border: 0; background: var(--field-2); aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.kisi.n1 .foto { aspect-ratio: 4 / 3; }
.kisi.n3 .foto:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.foto.proses img { opacity: .55; }
.foto.gagal img { opacity: .4; }
.cincin { position: absolute; inset: 0; display: grid; place-items: center; }
.cincin svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.cincin circle { fill: none; stroke-width: 3; }
.cincin-latar { stroke: rgba(255, 255, 255, .5); }
.cincin-isi { stroke: #fff; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; stroke-linecap: round; }
.foto-ulang {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: rgba(28, 19, 16, .8); color: #fff; font-size: 13px; font-weight: 700;
}
.foto-ulang .i { width: 16px; height: 16px; }
.foto-lagi { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(28, 19, 16, .55); color: #fff; font-size: 22px; font-weight: 800; }

.baris.gagal { flex-wrap: wrap; justify-content: flex-end; }
.tindakan-gagal { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--danger); }
.tindakan-gagal .i { width: 16px; height: 16px; }
.tindakan-gagal button { border: 0; background: none; padding: 8px 4px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }

.pemisah { align-self: center; margin: 14px 0 6px; }
.pemisah span, .garis-baru span { font-size: 12px; font-weight: 600; color: #fff; }
.pemisah span { display: flex; align-items: center; height: 24px; background: rgba(28, 19, 16, .34); padding: 0 12px; border-radius: 999px; }
.garis-baru { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.garis-baru span { height: 24px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: rgba(28, 19, 16, .34); }
.garis-baru::before, .garis-baru::after { content: ""; flex: 1; height: 1px; background: rgba(28, 19, 16, .2); }
.sistem { align-self: center; max-width: 88%; margin: 10px 0 2px; text-align: center; }
.sistem span { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ink-2); background: rgba(255, 255, 255, .86); padding: 4px 12px; border-radius: 999px; }
.sistem.bertaut span { display: block; white-space: pre-line; text-align: left; border-radius: 16px; padding: 8px 12px; overflow-wrap: anywhere; font-size: 13px; }
.sistem.bertaut a { color: var(--orange-teks); text-decoration: underline; }

.kartu-order {
  align-self: flex-start; display: grid; gap: 4px; width: min(320px, 88%); margin: 8px 0 4px;
  padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(46, 26, 14, .12);
  color: var(--ink); text-decoration: none; transition: transform 120ms var(--ease-out);
}
.kartu-order:active { transform: scale(.97); }
.ko-atas { display: flex; align-items: center; gap: 8px; }
.ko-atas .i { width: 20px; height: 20px; }
.ko-status { font-size: 15px; line-height: 20px; font-weight: 700; }
.ko-ringkas { font-size: 14px; line-height: 20px; color: var(--muted); }
.ko-langkah { display: flex; gap: 4px; margin: 6px 0 2px; }
.ko-langkah i { flex: 1; height: 4px; border-radius: 999px; background: var(--field-2); }
.ko-langkah i.on { background: var(--ok); }
.ko-langkah i.on:has(+ i:not(.on)), .ko-langkah i.on:last-child:not(.kartu-order.selesai *) { background: var(--orange); }   /* langkah yang sedang berjalan */
.kartu-order.selesai .ko-langkah i.on { background: var(--ok); }
.kartu-order.selesai .ko-status { color: var(--ok-teks); }
.kartu-order.batal .ko-status { color: var(--danger); }
.ko-tautan { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--orange-teks); padding-top: 4px; }
.ko-tautan .i { width: 16px; height: 16px; }
/* Nota MyJek (struk otomatis): kartu bertautan ke halaman nota, bentuk sama dengan kartu pesanan */
.kartu-nota .ko-atas .i { color: var(--ok); }
.kn-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 16px; padding: 4px 0 2px; }
.kn-total b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
/* Halaman peta pesanan (WEB-CHAT-10): peta penuh, kepala melayang, lembar bawah */
html.pt-buka, html.pt-buka body { overflow: hidden; }
.pt { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
.pt[hidden] { display: none; }
.pt-peta { position: absolute; inset: 0; background: var(--field-2); }
.pt-atas { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; z-index: 500; display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-float); }
.pt-atas-teks { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.pt-atas-teks b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-atas-teks span { font-size: 12px; font-weight: 600; color: var(--muted); }
/* WEB-CHAT-18 (owner, uji HP): lembar maks 25% layar. Kepala (status) dan tombol utama TETAP terlihat; isi di tengah digulir;
   lembar bisa digeser turun supaya peta penuh. Saat nota terbuka lembar memanjang (88%) agar nota terbaca. */
.pt-lembar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; flex-direction: column; overflow: hidden;
  max-height: max(25dvh, 200px); padding: 0 20px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 12px 12px 0 0; background: var(--surface);
  box-shadow: 0 -8px 28px -12px rgba(46, 26, 14, .35); transition: max-height 240ms var(--ease-out); }
.pt-lembar.lipat { max-height: calc(92px + env(safe-area-inset-bottom, 0px)); }
.pt-lembar.lipat .pt-gulir, .pt-lembar.lipat .pt-aksi { display: none; }
.pt-pegangan { flex: none; display: flex; justify-content: center; width: 100%; min-height: 28px; padding: 10px 0 8px; margin: 0; background: none; border: 0; cursor: pointer; touch-action: none; }
.pt-pegangan i { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--line-2); }
.pt-kepala { flex: none; touch-action: none; padding-bottom: 4px; }
.pt-gulir { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 6px; }
.pt-aksi { flex: none; margin-top: 0; padding-top: 8px; background: var(--surface); }
.pt-aksi .btn { min-height: 46px; }
.pt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--field-2); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.pt-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: ljDenyut 1.6s ease-in-out infinite; }
.pt-chip { background: var(--field-2); }
.pt-chip.ok i { background: var(--ok); animation: none; }
.pt-chip.batal i { background: var(--danger); animation: none; }
.pt-judul { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -.3px; }
.pt-judul::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--orange); vertical-align: 1px; animation: ljDenyut 1.6s ease-in-out infinite; }
.pt-judul.ok::before { background: var(--ok); animation: none; }
.pt-judul.batal::before { background: var(--danger); animation: none; }
.pt-sub { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.pt-langkah { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 2px; padding: 0; }
.pt-langkah li { font-size: 12px; font-weight: 700; color: var(--muted); padding-top: 8px; border-top: 4px solid var(--field-2); }
.pt-langkah li.ok { border-top-color: var(--ok); color: var(--ink); }
.pt-langkah li.aktif { border-top-color: var(--orange); color: var(--ink); animation: ljDenyut 1.6s ease-in-out infinite; }
.pt-rider { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pt-foto { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--emas); color: var(--ink); font-family: var(--font-judul); font-weight: 800; font-size: 16px; object-fit: cover; }
.pt-rider-teks { flex: 1; min-width: 0; display: grid; }
.pt-rider-teks b { font-size: 16px; overflow-wrap: anywhere; }
.pt-rider-teks span { font-size: 12px; font-weight: 500; color: var(--muted); }
.pt-chat { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; flex: none; font-size: 14px; border-radius: 999px; }
.pt-chat .i { width: 18px; height: 18px; }
.pt-nota { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 56px; }
.pt-nota > .i:first-child { width: 24px; height: 24px; color: var(--ok); flex: none; }
.pt-nota-teks { flex: 1; min-width: 0; display: grid; }
.pt-nota-teks span { font-size: 12px; font-weight: 500; color: var(--muted); }
.pt-nota-total { font-size: 18px; font-variant-numeric: tabular-nums; }
.pt-lokasi { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pt-lokasi p { margin: 0 0 8px; font-size: 15px; }
.pt-lokasi .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pt-catatan { margin: 12px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.pt-pin { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 2px 6px rgba(46, 26, 14, .28); }
.pt-pin .i { width: 20px; height: 20px; }
.pt-pin-tujuan { color: var(--ok); }
.pt-pin-rider { width: 44px; height: 44px; background: var(--orange); color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(46, 26, 14, .4); }
.pt-pin-rider .i { width: 24px; height: 24px; }
.pt-radar { position: relative; display: block; width: 180px; height: 180px; pointer-events: none; }
.pt-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange); background: rgba(211, 63, 3, .12); opacity: 0; animation: ptRadar 2.4s ease-out infinite; }
.pt-radar i:nth-child(2) { animation-delay: .8s; }
.pt-radar i:nth-child(3) { animation-delay: 1.6s; }
.pt-radar b { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(46, 26, 14, .3); }
@keyframes ptRadar { 0% { transform: scale(.15); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pt-radar i { animation: none; opacity: .5; transform: scale(.6); }
  .pt-radar i:nth-child(2) { transform: scale(.85); opacity: .3; }
  .pt-radar i:nth-child(3) { transform: scale(1); opacity: .15; }
  .pt-chip i, .pt-langkah li.aktif { animation: none; }
}
/* Pesanan selesai (WEB-CHAT-09): kartu penutup berisi bintang, Lihat detail, Ajukan komplain */
.kartu-tutup { cursor: pointer; }
.kartu-tutup:active { transform: none; }
.kartu-tutup .ko-atas .i { color: var(--ok); }
.ko-nilai { display: grid; gap: 2px; padding-top: 6px; }
.ko-nilai-label { font-size: 14px; color: var(--muted); font-weight: 700; }
.ko-bintang { display: flex; margin: 0 -6px; }
.ko-bintang button { width: 44px; height: 44px; border: 0; background: none; border-radius: 12px; display: grid; place-items: center; color: var(--line-2); transition: transform 120ms var(--ease-out); }
.ko-bintang button .i { width: 28px; height: 28px; }
.ko-bintang button:active { transform: scale(.9); }
.ko-dinilai { font-size: 14px; color: var(--ok-teks); font-weight: 700; padding-top: 4px; }
.ko-aksi { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.ko-tombol { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; }
@media (hover: hover) { .ko-tombol:hover { background: var(--field); } }
.dt-rapi { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--field-2); }
.dt-rapi p { margin: 0; }
/* Riwayat pesanan */
.riw-daftar, .riw-pesan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.riw-butir { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; }
.riw-atas { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.riw-atas b { font-size: 16px; overflow-wrap: anywhere; }
.riw-status { font-size: 14px; font-weight: 700; color: var(--muted); text-align: right; }
.riw-status.ok { color: var(--ok-teks); }
.riw-status.batal { color: var(--danger); }
.riw-ringkas, .riw-meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); overflow-wrap: anywhere; }
.riw-aksi { display: flex; gap: 8px; padding-top: 4px; }
.riw-gel { max-width: 88%; padding: 8px 12px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: 1px solid var(--line); }
.riw-gel.saya { justify-self: end; background: var(--pel-bg); color: var(--pel-ink); border: 0; border-radius: 18px 18px 6px 18px; }
.riw-gel.sistem { justify-self: center; background: var(--field-2); text-align: center; }
.riw-gel p { margin: 2px 0 0; font-size: 15px; line-height: 21px; white-space: pre-line; overflow-wrap: anywhere; }
.riw-nama { font-size: 12px; font-weight: 700; color: var(--orange-teks); }
.riw-gel.saya .riw-nama { color: var(--muted); }
/* Admin sedang membuat pesanan (WEB-CHAT-08): kartu tidak bisa diketuk, titik berdenyut sampai order tertaut */
.kartu-siap { cursor: default; }
.kartu-siap:active { transform: none; }
.kartu-siap .ko-atas .i { color: var(--orange); }
.siap-titik { padding: 6px 0 0; }
.siap-titik i { animation-iteration-count: infinite; }
.kartu-siap.ringkas .siap-titik { padding: 0 0 0 2px; }   /* WEB-CHAT-19: titik sebaris dengan teks pada kartu satu baris */
.strip.menyiapkan { cursor: default; }
.strip.menyiapkan:active { background: transparent; }
.strip.menyiapkan .strip-ikon { animation: ljDenyut 1.6s ease-in-out infinite; }
.strip.menyiapkan .strip-panah { display: none; }
/* Live Journey: kartu pesanan satu baris selama kartu perjalanan tampil untuk order itu */
.kartu-order.ringkas { padding: 10px 14px; min-height: 44px; align-content: center; }
.kartu-order.ringkas .ko-atas { flex-wrap: wrap; gap: 4px 8px; }
.ko-lihat { font-size: 14px; color: var(--muted); }

.titik { display: flex; gap: 5px; padding: 13px 15px; }
.titik i { width: 7px; height: 7px; border-radius: 50%; background: var(--subtle); animation: denyut 1.2s ease-in-out 6; }
.titik i:nth-child(2) { animation-delay: .15s; }
.titik i:nth-child(3) { animation-delay: .3s; }
@keyframes denyut { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.kosong { margin: auto 0; display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.sapaan { max-width: 88%; }
.chip {
  min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  transition: transform 120ms var(--ease-out), border-color 150ms ease;
}
.chip:active { transform: scale(.97); }
@media (hover: hover) { .chip:hover { border-color: var(--ink); } }

.rangka { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.rg { background: rgba(255, 255, 255, .7); border: 0; box-shadow: none; animation: denyut 1.4s infinite ease-in-out; }
.rg-1 { width: 58%; height: 52px; }
.rg-2 { width: 42%; height: 40px; }
.rg-3 { width: 66%; height: 76px; }
.layar#layarMuat { padding-top: calc(var(--safe-atas) + 70px); }

.turun {
  position: absolute; right: 14px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-float);
  animation: naikKecil 160ms var(--ease-out); transition: transform 120ms var(--ease-out);
}
.turun:active { transform: scale(.97); }
.turun-hitung {
  position: absolute; top: -10px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--orange); color: var(--orange-ink);
}
@keyframes naikKecil { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* gelembung baru (riwayat yang dimuat tidak beranimasi) */
.baris.baru, .rk.baru { animation: gelembungMasuk 180ms var(--ease-out); }
@keyframes gelembungMasuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================ kotak ketik ============================ */
.bawah {
  flex: none; background: rgba(255, 253, 249, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .6);
  padding: 8px 8px calc(8px + var(--safe-bawah)); display: flex; flex-direction: column; gap: 8px;
}
.ketik { display: flex; align-items: flex-end; gap: 6px; }
.kolom-ketik { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; display: flex; box-shadow: 0 1px 2px rgba(46, 26, 14, .08); transition: box-shadow 150ms ease, border-color 150ms ease; }
.kolom-ketik:focus-within { border-color: var(--emas-tua); box-shadow: 0 0 0 1px var(--emas-tua); }
.kolom-ketik textarea, .kolom-ketik input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; resize: none; outline: none;
  padding: 13px 16px; font-size: 16px; line-height: 20px; max-height: 124px; caret-color: var(--orange); color: var(--ink);
}
.kolom-ketik textarea { overflow-y: auto; height: 46px; }
.btn-kirim {
  position: relative; width: 46px; height: 46px; flex: none; border: 0; border-radius: 999px;
  background: var(--kirim-bg); color: #fff; box-shadow: 0 2px 4px rgba(46, 26, 14, .08), 0 8px 16px -8px rgba(126, 37, 6, .6);
  transition: transform 120ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
.btn-kirim[data-mode="kamera"] { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(46, 26, 14, .08); }
.btn-kirim:active { transform: scale(.97); }
.btn-kirim:disabled { opacity: .5; }
.btn-kirim .ik { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 150ms ease, filter 150ms ease; }
.btn-kirim[data-mode="kamera"] .ik-kirim, .btn-kirim[data-mode="kirim"] .ik-kamera { opacity: 0; filter: blur(2px); }
.btn-kirim .ik.tampil { opacity: 1; filter: none; }
@media (hover: hover) { .btn-kirim[data-mode="kamera"]:hover, .btn-ikon:hover { background: var(--field-2); } }
.btn-lampir { background: rgba(255, 255, 255, .7); }

.bar-kutipan {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  animation: naikKecil 160ms var(--ease-out);
}
.bk-isi { flex: 1; min-width: 0; }
.bk-nama { display: block; font-size: 12.5px; font-weight: 800; }
.bk-teks { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }

.tawar { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); animation: naikKecil 160ms var(--ease-out); }
.tawar > .i { width: 18px; height: 18px; color: var(--muted); }
.tawar-teks { flex: 1; min-width: 0; font-size: 16px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tawar-teks b { font-weight: 600; }
.tawar-ya { flex: none; font-size: 16px; padding: 8px; min-height: 44px; }

/* ============================ lembar bawah ============================ */
.lembar-latar { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; transition: opacity 200ms ease; }
.lembar-latar.buka { opacity: 1; }
.lembar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; margin-inline: auto; max-width: 560px;
  background: var(--surface); border-radius: 12px 12px 0 0; outline: none;
  padding: 10px 20px calc(20px + var(--safe-bawah)); max-height: 86dvh; overflow-y: auto;
  transform: translateY(100%); transition: transform 200ms var(--ease-out);
}
.lembar.buka { transform: none; transition-duration: 260ms; transition-timing-function: var(--ease-sheet); }
.lembar.digeser { transition: none; }
.lembar-pegangan { width: 40px; height: 4px; border-radius: 999px; background: var(--line-2); margin: 0 auto 10px; touch-action: none; }
.lembar h2 { font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 10px; touch-action: none; }
/* :where() = spesifisitas 0 supaya kelas komponen (galat, dt-*, ol-*) selalu menang */
:where(.lembar-isi) p { color: var(--muted); margin-bottom: 10px; }
.lembar-isi p.kuat { color: var(--ink); font-weight: 600; }
.daftar-lembar { display: grid; gap: 4px; }
.baris-lembar {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 6px; border: 0; border-radius: 12px;
  background: transparent; text-align: left; transition: background-color 150ms ease, transform 120ms var(--ease-out);
}
.baris-lembar:active { transform: scale(.98); background: var(--field); }
.bl-ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #FF9F4F 0%, #F4640F 55%, #D33F03 100%); color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(46, 26, 14, .12); }
.baris-lembar:nth-child(2) .bl-ikon { background: linear-gradient(160deg, #FFD466 0%, #FFAE1F 55%, #EC8400 100%); }
.baris-lembar:nth-child(3) .bl-ikon { background: linear-gradient(160deg, #62D69D 0%, #2FA56B 55%, #1F7A4D 100%); }
.baris-lembar:nth-child(4) .bl-ikon { background: linear-gradient(160deg, #B9A597 0%, #8C796B 55%, #5E4F45 100%); }
.bl-teks { display: grid; gap: 1px; }
.bl-teks b { font-size: 16px; }
.bl-teks small { font-size: 12px; line-height: 16px; color: var(--muted); }
.kode-besar {
  font-size: 34px; font-weight: 800; letter-spacing: .22em; text-align: center; padding: 16px 8px 16px 20px; margin: 4px 0 12px;
  background: var(--field-2); border-radius: 12px; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all;
}
.langkah-ol { list-style: none; padding: 0; display: grid; gap: 10px; margin: 8px 0 14px; }
.langkah-ol li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.langkah-ol li > b { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(160deg, #FF9F4F 0%, #F4640F 55%, #D33F03 100%); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.langkah-ol .i { width: 18px; height: 18px; vertical-align: -3px; }
.baris-cek { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 12px; font-weight: 600; }
.baris-cek input { width: 20px; height: 20px; accent-color: var(--orange); }
.tombol-baris { display: grid; gap: 8px; margin-top: 14px; }
.tombol-baris .btn { width: 100%; }

/* ============================ pratinjau foto ============================ */
.pratinjau, .penampil {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #070e17; color: #fff;
  opacity: 0; transform: scale(.96); transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.penampil { z-index: 80; background: rgba(5, 10, 16, var(--redup, 1)); transform: none; }
.pratinjau.buka, .penampil.buka { opacity: 1; transform: none; }
.pr-atas, .pn-atas { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(8px + var(--safe-atas)) 10px 8px; flex: none; }
.pr-atas h2 { font-size: 16px; font-weight: 700; }
.pr-geser { flex: 1; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.pr-geser::-webkit-scrollbar { display: none; }
.pr-slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; padding: 6px; min-width: 0; }
.pr-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; }
.pr-muat { display: grid; place-items: center; gap: 10px; color: rgba(255, 255, 255, .8); font-size: 14px; }
.pr-mini { display: flex; gap: 8px; justify-content: center; padding: 8px 12px; flex: none; min-height: 60px; }
.pr-mini-item { width: 44px; height: 44px; border-radius: 8px; padding: 0; border: 2px solid transparent; overflow: hidden; background: rgba(255, 255, 255, .12); opacity: .7; transition: opacity 150ms ease; }
.pr-mini-item.aktif { border-color: #fff; opacity: 1; }
.pr-mini-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-bawah .btn-kirim { background: #fff; color: var(--ink); box-shadow: none; }
.pr-bawah { display: flex; align-items: flex-end; gap: 6px; padding: 6px 8px calc(8px + var(--safe-bawah)); flex: none; }
.kolom-ketik.gelap { background: rgba(255, 255, 255, .12); }
.kolom-ketik.gelap input { color: #fff; }
.kolom-ketik.gelap input::placeholder { color: rgba(255, 255, 255, .62); }
.kolom-ketik.gelap:focus-within { box-shadow: 0 0 0 2px #fff; }
.pr-hitung { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--emas); color: var(--ink); font-size: 12px; font-weight: 800; }

.pn-atas { position: absolute; inset: 0 0 auto 0; z-index: 2; pointer-events: none; }
.pn-atas > * { pointer-events: auto; }
.pn-hitung { font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.pn-hitung:empty { display: none; }
.pn-geser { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.pn-geser::-webkit-scrollbar { display: none; }
.pn-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; touch-action: pan-x; }
.pn-slide.zoom { touch-action: none; }
.pn-slide img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; transform-origin: center; will-change: transform; }

/* ============================ toast ============================ */
.toast-wadah {
  position: fixed; left: 0; right: 0; top: calc(68px + var(--safe-atas)); z-index: 90;
  display: grid; justify-items: center; gap: 8px; padding: 0 16px; pointer-events: none;
}
.toast {
  pointer-events: auto; max-width: 420px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; line-height: 20px;
  border: 0; box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 180ms var(--ease-out);
}
.toast.tampil { opacity: 1; transform: none; }
.toast-gagal { background: var(--danger); border-color: transparent; }
.toast-aksi { border: 0; background: none; font-weight: 800; color: var(--emas); padding: 6px 2px; flex: none; }
.toast-gagal .toast-aksi { color: #fff; text-decoration: underline; }

.tanpa-js { padding: 40px 24px; max-width: 420px; margin: 0 auto; }
.tanpa-js h1 { font-size: 22px; margin-bottom: 8px; }

/* ============================ gerak dikurangi ============================ */
@media (prefers-reduced-motion: reduce) {
  .baris.baru, .rk.baru { animation-name: gelembungMasukRedam; }
  @keyframes gelembungMasukRedam { from { opacity: 0; } to { opacity: 1; } }
  .lembar { transform: none; opacity: 0; transition: opacity 150ms ease; }
  .lembar.buka { opacity: 1; }
  .pratinjau, .penampil { transform: none; }
  .menu-atas, .menu-pesan { transform: none; }
  .gelembung.terangkat { transform: none; }
  .spanduk, .bar-kutipan, .tawar, .turun { animation-name: gelembungMasukRedam; }
  .toast { transform: none; }
  /* Spinner tidak berputar: cincin penuh yang berdenyut (opacity saja). */
  .spinner { animation: denyutSpinner 1.2s ease-in-out infinite; border-right-color: currentColor; }
  @keyframes denyutSpinner { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  .btn:active, .btn-ikon:active, .chip:active, .btn-kirim:active, .kartu-order:active, .baris-lembar:active, .chip-kota button:active { transform: none; }
}


/* ============================ rev. 5: chat-first ============================ */
/* Satu tombol oranye per layar. Kartu hanya untuk ringkasan, pesanan, lembar.
   Gerak: transform + opacity saja; hover hanya di (hover: hover). */

/* strip pesanan aktif (di bawah header) */
.strip {
  flex: none; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px 10px 16px;
  background: var(--surface); border: 0; border-top: 1px solid var(--line); box-shadow: 0 1px 0 rgba(28, 19, 16, .08); text-align: left; color: var(--ink);
  transition: background-color 150ms ease; position: relative; z-index: 9;
}
.strip:active { background: var(--field); }
.strip-ikon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(160deg, #FF9F4F 0%, #F4640F 55%, #D33F03 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(46, 26, 14, .12); }
.strip-ikon .i { width: 20px; height: 20px; }
.strip-teks { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.25; }
.strip-teks b { font-size: 16px; line-height: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-teks span { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-panah { width: 18px; height: 18px; color: var(--orange-teks); }
.strip.selesai .strip-ikon { background: linear-gradient(160deg, #62D69D 0%, #2FA56B 55%, #1F7A4D 100%); }
.strip.selesai .strip-teks b { color: var(--ok-teks); }
@media (hover: hover) { .strip:hover { background: var(--field); } }

/* chip "+ Order baru" menempel di atas kotak ketik */
.baris-order { display: flex; justify-content: flex-start; }
.chip-order {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.chip-order .i { width: 18px; height: 18px; }
.chip-order:active { transform: scale(.97); }
@media (hover: hover) { .chip-order:hover { background: var(--field-2); } }
.bawah { gap: 6px; }

/* kartu pesanan di benang: satu kartu, diperbarui di tempat */
button.kartu-order { font: inherit; text-align: left; cursor: pointer; }

/* lembar tinggi (Order baru) */
.lembar-kepala { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.lembar-kepala h2 { flex: 1; min-width: 0; padding-top: 4px; }
.lembar-x { display: none; margin: -4px -8px 0 0; }
.lembar.tinggi .lembar-x { display: grid; }
.lembar.tinggi { height: 90dvh; max-height: 90dvh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.lembar.tinggi .lembar-isi { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ol-badan { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 24px; -webkit-overflow-scrolling: touch; }
.ol-kaki { flex: none; padding: 10px 0 calc(12px + var(--safe-bawah)); border-top: 1px solid var(--line); background: var(--surface); }
.ol-kaki .btn { width: 100%; }
.ol-tanya { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 12px; }
.ol-layanan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ol-layanan button {
  min-height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 16px;
  transition: transform 120ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
}
.ol-layanan button .i { width: 32px; height: 32px; }
.ol-layanan button:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 64px; flex-direction: row; gap: 12px; }
.ol-layanan button:last-child:nth-child(odd) .i { width: 26px; height: 26px; }
.ol-layanan button:active { transform: scale(.97); }
@media (hover: hover) { .ol-layanan button:hover { background: var(--field-2); } }
.ol-balik { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -6px 0 4px -6px; padding: 0 10px 0 6px; font-size: 16px; text-decoration: none; color: var(--muted); }
.ol-balik .i { width: 18px; height: 18px; transform: scaleX(-1); }
.ol-draf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--field-2); font-size: 16px; font-weight: 600; min-height: 44px; }
.ol-draf .tautan { font-size: 16px; min-height: 44px; flex: none; }
.ol-badan .kolom-form { margin-bottom: 14px; position: relative; }
.ol-badan .kolom-form .opsi { font-weight: 500; color: var(--muted); }
.ol-badan .kolom-form textarea { min-height: 76px; }
.ol-toko + .ol-toko { border-top: 1px solid var(--line); padding-top: 14px; }
.ol-toko-kepala { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 8px; }
.ol-toko-kepala b { font-size: 14px; font-weight: 800; color: var(--muted); }
.ol-toko-kepala .tautan { font-size: 16px; min-height: 44px; margin-right: -4px; }
.kol-saran { position: relative; }
.saran {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float);
  max-height: 224px; overflow-y: auto; overscroll-behavior: contain;
}
.saran li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.saran li .i { width: 18px; height: 18px; color: var(--muted); }
.saran li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saran li small { color: var(--muted); font-size: 12.5px; flex: none; }
.saran li[aria-selected="true"], .saran li:active { background: var(--field-2); }
.saran mark { background: transparent; color: inherit; font-weight: 800; }
.saran .saran-info { cursor: default; color: var(--muted); font-size: 14px; display: block; padding: 10px; }
.ol-tambah { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-weight: 800; font-size: 16px; background: none; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ol-tambah .i { width: 18px; height: 18px; }
.ol-tambah-info { color: var(--muted); font-size: 13px; margin: -4px 0 14px; }
.ol-gps {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px;
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.ol-gps .i { width: 18px; height: 18px; }
.ol-gps:active { transform: scale(.97); }
.ol-gps[disabled] { opacity: .65; }
.ol-gps.on { background: var(--emas); border-color: var(--emas); font-weight: 700; }
.ol-gps-hapus { margin-left: 4px; font-size: 16px; min-height: 44px; }
.ol-catatan summary { min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; list-style: none; }
.ol-catatan summary::-webkit-details-marker { display: none; }
.ol-catatan summary .i { width: 18px; height: 18px; color: var(--muted); transition: transform 150ms var(--ease-out); }
.ol-catatan[open] summary .i { transform: rotate(180deg); }
.ol-catatan textarea { margin-top: 6px; }
.ol-galat-form { margin: 0 0 8px; text-align: center; }

/* kartu ringkasan (satu komponen untuk jalur form dan jalur chat) */
.rk {
  align-self: stretch; width: 100%; max-width: 440px; margin: 10px 0 4px; padding: 14px 14px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(46, 26, 14, .12); display: grid; gap: 10px;
}
.rk-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rk-kepala b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.rk-tag { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--field-2); padding: 3px 10px; border-radius: 999px; }
.rk-kedaluwarsa { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn-ink); font-size: 14px; font-weight: 700; }
.rk-kedaluwarsa .i { width: 18px; height: 18px; flex: none; }
.rk-data { display: grid; gap: 10px; margin: 0; }
.rk-baris { display: grid; gap: 1px; }
.rk-baris dt { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rk-baris dd { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.rk-baris dd p { margin: 0; }
.rk-ongkir { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 4px; }
.rk-uang { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-variant-numeric: tabular-nums; }
.rk-uang.total { font-weight: 800; font-size: 16px; }
.rk-uang.kecil { font-size: 13px; color: var(--muted); }
.rk-akhir { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.rk-aksi { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.rk-aksi .tautan { min-height: 44px; padding: 0 14px; flex: none; }
.rk-aksi .btn { flex: 1; }

/* lembar detail pesanan */
.dt-judul { font-size: 16px; font-weight: 800; margin: 0 0 2px; color: var(--ink); }
.ol-badan .galat { margin: 6px 0 0; }
.rk { scroll-margin-top: 12px; }
.dt-sub { margin: 0 0 12px; color: var(--muted); }
.dt-tahap { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 8px 0 18px; }
.dt-tahap li { position: relative; padding-top: 24px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dt-tahap li::before { content: ""; position: absolute; top: 0; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--line-2); z-index: 1; }
.dt-tahap li::after { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--line-2); }
.dt-tahap li:first-child::after { display: none; }
.dt-tahap li.on { color: var(--ink); }
.dt-tahap li.on::before, .dt-tahap li.on::after { background: var(--ok); }
.dt-tahap li.on:has(+ li:not(.on))::before { background: var(--orange); }
.dt-tahap.selesai li.on::before, .dt-tahap.selesai li.on::after { background: var(--ok); }
.dt-seksi { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.dt-seksi h3 { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0; }
.dt-rider { display: flex; align-items: center; gap: 12px; }
.dt-foto { width: 46px; height: 46px; border-radius: 50%; background: var(--emas); object-fit: cover; flex: none; display: grid; place-items: center; font-family: var(--font-judul); font-weight: 800; font-size: 16px; color: var(--ink); }
.dt-rider b { flex: 1; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.btn-wa { min-height: 44px; padding: 0 16px; font-size: 16px; width: auto; text-decoration: none; flex: none; }
.dt-uang { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-variant-numeric: tabular-nums; }
.dt-uang.total { font-weight: 800; }
.dt-rek { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dt-rek span { min-width: 0; overflow-wrap: anywhere; }
.dt-salin { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font-weight: 800; background: none; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; flex: none; }
.dt-salin .i { width: 18px; height: 18px; }
.dt-nota { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--ink); }
.dt-nota .i { width: 20px; height: 20px; }
.dt-muat { padding: 24px 0; text-align: center; color: var(--muted); }
.dt-bintang { display: flex; gap: 2px; margin: 0 -4px; }
.dt-bintang button { width: 48px; height: 48px; border: 0; background: none; border-radius: 12px; display: grid; place-items: center; color: var(--line-2); transition: transform 120ms var(--ease-out); }
.dt-bintang button .i { width: 32px; height: 32px; }
.dt-bintang button:active { transform: scale(.9); }
.dt-bintang button .i-isi { display: none; }
.dt-bintang button.on .i-isi { display: block; }
.dt-bintang button.on .i-garis { display: none; }
.dt-bintang button.on, .ko-bintang button.on { color: var(--emas); filter: drop-shadow(0 1px 0 rgba(178, 106, 0, .6)); }
.dt-arti { font-size: 16px; font-weight: 700; margin: 0; min-height: 20px; }
.dt-chip { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-chip button { min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: transform 120ms var(--ease-out), background-color 150ms ease; }
.dt-chip button[aria-pressed="true"] { background: var(--emas); border-color: var(--emas); color: var(--ink); font-weight: 700; }
.dt-komentar { width: 100%; min-height: 76px; padding: 12px 16px; font-size: 16px; line-height: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); resize: none; display: block; box-shadow: 0 1px 2px rgba(46, 26, 14, .06), 0 8px 18px -14px rgba(46, 26, 14, .35); }
.dt-komentar:focus-visible { outline: 0; border: 2px solid var(--emas-tua); padding: 11px 15px; }
.dt-kaki { position: sticky; bottom: 0; z-index: 2; margin: 0 -20px; padding: 10px 20px calc(12px + var(--safe-bawah)); background: var(--surface); border-top: 1px solid var(--line); }
.dt-kaki .btn { width: 100%; }
.dt-terima { margin: 0; font-weight: 700; color: var(--ok-teks); }

/* di bawah lipatan layar Masuk */
.masuk-bawah { width: 100%; max-width: 420px; margin: 0 auto; padding: 4px 20px calc(20px + var(--safe-bawah)); }
.seksi-kecil { padding-top: 28px; }
.seksi-kecil h2 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.cara { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 12px; }
.cara li { display: flex; align-items: center; gap: 12px; line-height: 1.35; }
.cara-ikon, .jam-ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(160deg, #FF9F4F 0%, #F4640F 55%, #D33F03 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(46, 26, 14, .12); }
.cara li:nth-child(2) .cara-ikon { background: linear-gradient(160deg, #FFD466 0%, #FFAE1F 55%, #EC8400 100%); }
.cara li:nth-child(3) .cara-ikon { background: linear-gradient(160deg, #62D69D 0%, #2FA56B 55%, #1F7A4D 100%); }
.jam-ikon { background: linear-gradient(160deg, #B9A597 0%, #8C796B 55%, #5E4F45 100%); }
.cara-ikon .i, .jam-ikon .i { width: 20px; height: 20px; }
.jam-blok { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.jam-waktu { font-size: 16px; font-weight: 800; letter-spacing: -.01em; padding-top: 8px; }
.jam-catatan { margin-top: 2px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.masuk-kaki { display: flex; flex-wrap: wrap; gap: 0 22px; padding: 20px 0 8px; font-size: 14px; }
/* testimoni (hanya ada di DOM bila TESTIMONI_AKTIF = true) */
.testi { display: grid; gap: 18px; margin-top: 12px; }
.testi-item blockquote { font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
.testi-item figcaption { margin-top: 6px; display: grid; gap: 1px; font-size: 14px; color: var(--ink-2); }
.testi-item figcaption b { color: var(--ink); }

@media (min-width: 600px) {
  .masuk-isi { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .chip-order:active, .ol-layanan button:active, .ol-gps:active, .dt-bintang button:active, .ko-bintang button:active { transform: none; }
  .ol-catatan summary .i { transition: none; }
  .strip { transition: none; }
}

/* ============================ Live Journey ============================ */
/* Kartu pop-up di bawah header (menggantikan strip "Pesanan aktif" saat live_journey_aktif).
   Melayang di atas daftar pesan (daftar tetap setinggi penuh dan bisa digulir), <= 25% tinggi layar.
   Tombol di kartu bergaya sekunder: satu tombol oranye per layar tetap milik komposer. */
:root {
  --warn-ink: #B26A00; --warn-soft: #FFF4D6; --warn-line: #F3D98A; --warn-dot: #B26A00;
  --jalan-ink: #A8330A; --jalan-soft: #FBE9E0; --ok-ink: #1A6B43;
}
.lj-lapisan {
  position: absolute; top: 6px; left: 8px; right: 8px; z-index: 8; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end;
}
.lj-kartu {
  pointer-events: auto; align-self: stretch; width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 0;
  max-height: calc(25vh - 6px); max-height: calc(25dvh - 6px); overflow: hidden;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float);
  touch-action: none; transform-origin: top right; transition: transform 160ms var(--ease-out), opacity 160ms ease;
}
.lj-kartu.lj-digeser { transition: none; }
.lj-kartu.lj-masuk { animation: ljTurun 240ms var(--ease-out) both; }
.lj-kartu.lj-keluar { opacity: 0; transform: translateY(-10px) scale(.96); }
.lj-atas { display: flex; align-items: center; gap: 8px; min-height: 34px; flex: none; }
.lj-kode { display: grid; text-align: left; border: 0; background: none; padding: 0; color: var(--ink); min-width: 0; line-height: 1.2; position: relative; flex: none; }
.lj-kode:disabled { cursor: default; opacity: 1; }
.lj-kode.ganti::after { content: ""; position: absolute; inset: -6px -4px; }
.lj-kode-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.lj-kode-jam { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lj-kode.ganti .lj-kode-jam { text-decoration: underline; text-underline-offset: 2px; }
.lj-pill { font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 4px 7px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lj-nada-jalan { background: var(--jalan-soft); color: var(--jalan-ink); }
.lj-nada-warn { background: var(--warn-soft); color: var(--warn-ink); }
.lj-nada-ok { background: var(--ok-soft); color: var(--ok-ink); }
.lj-nada-danger { background: var(--danger-soft); color: var(--danger); }
.lj-nada-netral { background: var(--field-2); color: var(--muted); }
.lj-isi { flex: 1; }
.lj-tbl {
  height: 34px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; position: relative; flex: none; white-space: nowrap;
}
.lj-tbl .i { width: 18px; height: 18px; }
.lj-tbl::after, .lj-tbl-bulat::after { content: ""; position: absolute; inset: -7px -4px; }   /* inset dari kotak padding: 34 + 2 x 7 >= 44 px */
/* Area ketuk 44 px harus di atas adegan/indikator yang tergambar sesudahnya. */
.lj-tbl, .lj-tbl-bulat, .lj-kode.ganti, .lj-pegangan { z-index: 1; }
.lj-lv { background: var(--gradasi-cta); border-color: transparent; color: #fff; padding: 0 9px; gap: 5px; font-size: 12px; }
@media (max-width: 420px) {
  /* Layar HP: Live View hanya ikon (label tetap di aria-label) supaya pill status terpanjang (MENUJU MERCHANT) tidak terpotong. */
  .lj-lv { width: 34px; padding: 0; justify-content: center; }
  .lj-lv span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.lj-bantuan:disabled { opacity: 1; border-color: var(--line-2); color: var(--muted); }
.lj-tbl-bulat { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--field); color: var(--ink); display: grid; place-items: center; position: relative; flex: none; padding: 0; }
.lj-tbl-bulat .i { width: 18px; height: 18px; }
.lj-adegan-wadah { position: relative; flex: 1 1 80px; min-height: 36px; max-height: 80px; }
.lj-adegan-wadah > .lj-adegan { position: absolute; inset: 0; }
.lj-catatan-gps { position: absolute; right: 6px; bottom: 1px; font-size: 11px; line-height: 13px; color: #f1f4f8; pointer-events: none; }
.lj-tengah { display: flex; align-items: center; gap: 8px; flex: none; }
.lj-judul-btn { flex: 1; min-width: 0; display: grid; text-align: left; border: 0; background: none; padding: 0; color: var(--ink); }
.lj-judul { font-size: 15px; font-weight: 800; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-ket { font-size: 13px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-nada-teks-warn { color: var(--warn-ink); font-weight: 600; }
.lj-ringkas { font-size: 12px; line-height: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lj-indikator { display: flex; align-items: center; gap: 10px; flex: none; min-height: 14px; }
.lj-seg { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 0 0 38%; max-width: 180px; }
.lj-seg li { height: 5px; border-radius: 999px; background: var(--field-2); }
.lj-seg li.on, .lj-seg li.aktif { background: var(--orange); }
.lj-seg li.aktif { animation: ljDenyut 1.6s ease-in-out infinite; }
.lj-seg li.ok { background: var(--ok); }
.lj-seg li.abu { background: var(--line-2); }
.lj-berikut { flex: 1; min-width: 0; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.lj-kaki { height: 12px; flex: none; display: flex; justify-content: center; }
.lj-pegangan { border: 0; background: none; width: 64px; height: 12px; padding: 0; display: grid; place-items: center; position: relative; touch-action: none; }
.lj-pegangan i { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); }
.lj-pegangan::after { content: ""; position: absolute; inset: -14px -8px 0; }
.lj-fab {
  pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; position: relative; box-shadow: var(--shadow-float); padding: 0;
}
.lj-fab .i { width: 22px; height: 22px; }
.lj-fab.lj-masuk { animation: ljFabMasuk 220ms var(--ease-out) both; }
.lj-fab-titik { position: absolute; top: 1px; right: 1px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--surface); background: var(--subtle); }
.lj-titik-jalan { background: var(--orange); animation: ljDenyut 1.6s ease-in-out infinite; }
.lj-titik-warn { background: var(--warn-dot); }
.lj-titik-ok { background: var(--ok); }
.lj-titik-danger { background: var(--danger); }
.lj-titik-netral { background: var(--subtle); }
.lj-statis .lj-seg li.aktif, .lj-statis .lj-titik-jalan, .lj-statis .lj-kartu, .lj-statis .lj-fab { animation: none !important; }
@media (hover: hover) {
  .lj-tbl-bulat:hover, .lj-fab:hover { background: var(--field-2); }
  .lj-judul-btn:hover .lj-judul { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-height: 700px) {
  /* Layar pendek: pegangan menumpang di tepi bawah (tanpa baris sendiri) agar baris ringkas pesanan muat dalam 25%. */
  .lj-kartu { gap: 3px; position: relative; padding-bottom: 8px; }
  .lj-adegan-wadah { min-height: 32px; }
  .lj-kaki { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; }
  .lj-pegangan { height: 8px; }
}
@keyframes ljTurun { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ljFabMasuk { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ljDenyut { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .lj-kartu, .lj-fab { transition: opacity 160ms ease; }
  .lj-kartu.lj-masuk, .lj-fab.lj-masuk { animation-name: gelembungMasukRedam; }
  .lj-kartu.lj-keluar { transform: none; }
  .lj-seg li.aktif, .lj-titik-jalan { animation: none; }
}

/* Live View (shared/chat/pantau.js): peta layar penuh, hanya titik posisi rider, tanpa garis rute */
.lv {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--bg);
  opacity: 0; transition: opacity 180ms ease;
}
.lv.buka { opacity: 1; }
.lv-atas { display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-atas)) 14px 8px 6px; background: var(--surface); border-bottom: 1px solid var(--line); flex: none; }
.lv-atas-teks { display: grid; line-height: 1.25; min-width: 0; }
.lv-atas-teks b { font-size: 16px; font-weight: 800; }
.lv-atas-teks span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-peta { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--field-2); }
.lv-ubin { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-select: none; }
.lv-tanda { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lv-tanda b {
  position: absolute; left: 0; bottom: 10px; transform: translateX(-50%); padding: 3px 7px; border-radius: 7px; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; color: #fff; background: #1C1310; box-shadow: 0 2px 6px rgba(46, 26, 14, .25);
}
.lv-tanda::after { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #1C1310; border: 2px solid #fff; }
.lv-tujuan b, .lv-tujuan::after { background: #1F7A4D; }
.lv-posisi::after { display: none; }
.lv-motor { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #D33F03; color: #fff; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(46, 26, 14, .3); }
.lv-motor .i { width: 22px; height: 22px; }
.lv-cincin { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; background: rgba(211, 63, 3, .25); animation: lvPing 1.8s ease-out infinite; }
.lv-atribusi { position: absolute; right: 4px; bottom: 4px; font-size: 11px; padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .85); color: #1C1310; }
.lv-kosong { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); font-size: 16px; }
.lv-panel { flex: none; display: grid; gap: 10px; padding: 14px 16px calc(14px + var(--safe-bawah)); background: var(--surface); border-top: 1px solid var(--line); }
.lv-gps { font-size: 16px; font-weight: 700; }
.lv-rider { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.lv-rider b { flex: 1; min-width: 0; font-size: 16px; }
.lv-kuota { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.lv-kuota .i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.lv-kembali { width: 100%; }
@keyframes lvPing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lv-cincin { animation: none; opacity: .5; }
}
/* WEB-CHAT-12: garis lurus cadangan (rute jalan belum tersedia), tagihan di peta, perayaan tiba */
.pt-tagihan { display: grid; gap: 8px; margin-top: 12px; padding: 0; border-radius: 12px; }
.pt-tagihan .dt-sub, .pt-tagihan .dt-muat { margin: 0; }
.pt-bayar { margin: 4px 0 0; font-size: 14px; font-weight: 700; }
/* WEB-CHAT-13: layar tiba (arah desain Emil Kowalski). Kurva ease-out kuat untuk masuk, keluar 200 ms. */
.pt-rayakan { --ease-out: cubic-bezier(.23, 1, .32, 1); --pop: cubic-bezier(.34, 1.56, .64, 1);
  position: absolute; inset: 0; z-index: 900; display: grid; grid-template-rows: 1fr auto; overflow: hidden; color: var(--ink); cursor: pointer;
  background: var(--gradasi-merek);
  clip-path: circle(150% at 50% 38%); animation: prBuka 620ms var(--ease-out) both;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(20px + env(safe-area-inset-bottom, 0px)); }
.pt-rayakan.keluar { opacity: 0; transform: scale(1.02); transition: opacity 200ms ease-out, transform 200ms ease-out; }
.pt-rayakan.jeda *, .pt-rayakan.jeda { animation-play-state: paused !important; }
.pt-rayakan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; pointer-events: none; opacity: .32; mix-blend-mode: screen;
  background: url(/shared/chat/gambar/motif-sumbawa.png) top center / 130px 110px repeat; -webkit-mask-image: linear-gradient(#000 20%, transparent); mask-image: linear-gradient(#000 20%, transparent); }
.pr-isi { align-self: center; display: grid; justify-items: center; text-align: center; gap: 8px; max-width: 360px; margin: 0 auto; }
.pr-lencana { position: relative; width: 96px; height: 96px; margin-bottom: 18px; }
.pr-centang { position: relative; width: 96px; height: 96px; display: block; animation: prLencana 520ms var(--pop) 160ms both; }
.pr-centang circle { fill: #fff; }
.pr-centang path { fill: none; stroke: var(--ok); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: prGores 380ms var(--ease-out) 460ms forwards; }
.pr-gelombang { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); opacity: 0;
  animation: prGelombang 1100ms var(--ease-out) 520ms both; }
.pr-gelombang + .pr-gelombang { animation-delay: 700ms; border-color: rgba(28, 19, 16, .3); }
.pr-konfeti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.pr-konfeti i { position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h); border-radius: 2px;
  background: var(--c); opacity: 0; animation: prPecah 1900ms calc(480ms + var(--t)) both; }
.pr-konfeti i.bulat { border-radius: 50%; }
.pr-tahap { position: relative; z-index: 1; opacity: 0; animation: prNaik 420ms var(--ease-out) both; }   /* teks di atas konfeti */
.pr-kode { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(28, 19, 16, .72); animation-delay: 560ms; }
.pt-rayakan h2 { margin: 0; font-size: 34px; line-height: 38px; font-weight: 800; letter-spacing: -1px; text-wrap: balance; animation-delay: 620ms; }
.pr-sub { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: balance; animation-delay: 680ms; }
.pr-rider { margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .62); font-size: 13px; font-weight: 700; animation-delay: 740ms; }
.pr-bawah { display: grid; gap: 14px; width: 100%; max-width: 360px; margin: 0 auto; animation: prNaik 420ms var(--ease-out) 800ms both; }
.pr-kembali { width: 100%; min-height: 56px; background: var(--ink); color: #fff; font-size: 19px; letter-spacing: .2px; box-shadow: 0 2px 4px rgba(46, 26, 14, .08), 0 16px 28px -14px rgba(46, 26, 14, .5); }
.pr-waktu { display: block; height: 3px; border-radius: 3px; background: rgba(28, 19, 16, .16); overflow: hidden; }
.pr-waktu i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); animation: prWaktu 3900ms linear 700ms forwards; }
@keyframes prBuka { from { clip-path: circle(0% at 50% 38%); } }
@keyframes prLencana { from { transform: scale(.6); opacity: 0; } }
@keyframes prGores { to { stroke-dashoffset: 0; } }
@keyframes prGelombang { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes prNaik { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes prWaktu { to { transform: scaleX(1); } }
/* Memancar dari lencana (ease-out), lalu jatuh oleh gravitasi (ease-in khusus fase jatuh) sambil memudar. */
@keyframes prPecah {
  0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 1; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  30% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * .4)) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { transform: translate(calc(var(--x) * 1.25), calc(var(--y) + 62dvh)) rotate(var(--r)); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) { .pr-kembali:hover { background: #2E2320; } }
@media (prefers-reduced-motion: reduce) {
  .pt-rayakan, .pr-centang, .pr-tahap, .pr-bawah { animation: prPudar 200ms ease both; clip-path: none; }
  .pr-centang path { animation: none; stroke-dashoffset: 0; }
  .pr-gelombang, .pr-konfeti { display: none; }
  .pr-waktu { display: none; }
  .pt-rayakan.keluar { transform: none; }
}
@keyframes prPudar { from { opacity: 0; } }
.pt-lembar.pt-lembar-nota { max-height: 88dvh; }   /* nota resmi terbuka: hampir setinggi layar */
/* WEB-CHAT-14: peta MapLibre. Akar penanda digeser MapLibre lewat transform, jadi animasi selalu di elemen anak. */
.pt { --ease-out: cubic-bezier(.23, 1, .32, 1); --pop: cubic-bezier(.34, 1.56, .64, 1); }
.pt-peta.maplibregl-map { position: absolute; inset: 0; }   /* CSS MapLibre memberi position: relative pada wadah */
.pt-peta .maplibregl-canvas { outline: none; }
.pt-pin-wadah { width: 40px; height: 40px; display: flex; justify-content: center; }   /* pin bulat: pusat tepat di titik */
.pt-pin-wadah:has(.pt-pin-rider) { width: 44px; height: 44px; }
.pt-radar-wadah { width: 180px; height: 180px; pointer-events: none; }
.pt.pt-bebas .pt-pusat { background: var(--field-2); color: var(--orange-teks); }   /* peta digeser / diputar: tombol ikuti rider menonjol */
/* rider aktif di sekitar radar */
.pt-sekitar { pointer-events: none; }
.pt-sekitar b { display: block; animation: ptMuncul 380ms var(--ease-out) calc(var(--i) * 90ms + 200ms) both; }
.pt-sekitar span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--ink);
  border: 1.5px solid rgba(28, 19, 16, .18); box-shadow: 0 2px 6px rgba(46, 26, 14, .22); animation: ptMengambang 2.6s ease-in-out calc(var(--i) * 230ms) infinite alternate; }
.pt-sekitar .i { width: 16px; height: 16px; }
@keyframes ptMuncul { from { opacity: 0; transform: scale(.6); } }
@keyframes ptMengambang { to { transform: translateY(-3px); } }
/* rekening rider di bawah kartu nota */
.pt-rek { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pt-rek > .i { width: 24px; height: 24px; flex: none; color: var(--ink); }
.pt-rek-teks { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.pt-rek-teks span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.pt-rek-teks b { font-size: 18px; line-height: 24px; letter-spacing: .5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pt-salin { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; flex: none; border-radius: 999px;
  border: 1.5px solid var(--ok); background: transparent; color: var(--ok-teks); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform 160ms ease-out; }
.pt-salin:active { transform: scale(.97); }
.pt-salin .i { width: 18px; height: 18px; }
/* pop-up singkat: rider menerima / dialihkan (arah desain Emil Kowalski) */
.pt-kabar { position: absolute; z-index: 700; top: calc(76px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(46, 26, 14, .08), 0 16px 32px -12px rgba(46, 26, 14, .38); touch-action: none; cursor: pointer; user-select: none;
  opacity: 0; transform: translateY(-12px) scale(.97); transition: transform 320ms var(--ease-out), opacity 220ms ease-out; }
.pt-kabar.masuk { opacity: 1; transform: none; }
.pt-kabar.keluar { opacity: 0; transform: translateY(-10px) scale(.98); transition-duration: 180ms; }
.pk-avatar { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.pk-avatar .pt-foto { animation: pkPop 480ms var(--pop) 80ms both; }
.pt-kabar.ganti .pk-avatar { background: var(--danger-soft); color: var(--danger); }
.pt-kabar.ganti .pk-avatar .i { width: 22px; height: 22px; animation: pkPutar 560ms var(--ease-out) 140ms both; }
.pk-centang { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok);
  border: 2px solid var(--surface); display: grid; place-items: center; animation: pkPop 360ms var(--pop) 300ms both; }
.pk-centang svg { width: 14px; height: 14px; }
.pk-centang path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12;
  animation: prGores 260ms var(--ease-out) 480ms forwards; }
.pk-kilau { position: absolute; inset: 0; pointer-events: none; }
.pk-kilau i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--orange); opacity: 0;
  animation: pkKilau 680ms var(--ease-out) 260ms both; }
.pk-kilau i:nth-child(even) { background: var(--emas); width: 4px; height: 4px; }
.pk-teks { display: grid; min-width: 0; line-height: 1.3; }
.pk-teks b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.pk-teks span { font-size: 13px; line-height: 18px; color: var(--muted); }
@keyframes pkPop { from { opacity: 0; transform: scale(.6); } }
@keyframes pkPutar { from { transform: rotate(-180deg); opacity: 0; } }
@keyframes pkKilau { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.6); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-34px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pt-kabar, .pt-kabar.keluar { transform: none !important; transition: opacity 200ms ease; }
  .pk-avatar .pt-foto, .pk-centang, .pt-kabar.ganti .pk-avatar .i, .pt-sekitar b, .pt-sekitar span { animation: none; }
  .pk-centang path { animation: none; stroke-dashoffset: 0; }
}
/* faktur resmi (WEB-CHAT-14): bentuk = tracking_struk/nota.html, kertas putih bersih dan tinta abu dingin (tetap putih di mode gelap) */
.nf { --tinta: #1C1310; --teks2: #6E5F55; --teks3: #4A3A30; --garis: #E9E6E2; --garis-putus: #D6D1CB;
  display: flex; flex-direction: column; padding: 24px 16px 22px; color: var(--tinta); font-variant-numeric: tabular-nums; background: #fff;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x; }
.nf-sobek { filter: drop-shadow(0 1px 2px rgba(46, 26, 14, .34)); }
.nf-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.nf-kepala h3 { margin: 0; color: var(--tinta); font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: -.2px; }
.nf-kepala p { margin: 2px 0 0; font-size: 11px; line-height: 16px; font-weight: 700; color: var(--teks2); }
.nf-qr { width: 52px; height: 52px; padding: 4px; border-radius: 8px; background: #fff; border: 1px solid var(--garis); object-fit: contain; flex-shrink: 0; }
.nf-garis { border: 0; border-top: 1.5px dashed var(--garis-putus); margin: 14px 0; }
.nf-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 18px; }
.nf-kiri { min-width: 0; }
.nf-k { display: block; font-weight: 800; }
.nf-v { display: block; color: var(--teks3); word-break: break-word; }
.nf-tgl { margin-top: 6px; }
.nf-kanan { text-align: right; flex-shrink: 0; max-width: 48%; }
.nf-i { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; line-height: 18px; }
.nf-i-kiri { min-width: 0; }
.nf-nama { font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.nf-qty { color: var(--teks2); font-size: 12px; white-space: pre; }
.nf-sub { font-weight: 700; white-space: nowrap; }
.nf-baris { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 22px; }
.nf-lbl { font-weight: 600; color: var(--teks2); }
.nf-baris span:last-child { font-weight: 700; white-space: nowrap; }
.nf-grand { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--garis); font-size: 18px; line-height: 24px; font-weight: 800; align-items: baseline; }
.nf-grand .nf-lbl { color: var(--tinta); font-weight: 800; }
.nf-grand span:last-child { font-weight: 800; }
.nf-kaki { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.nf-terima { font-size: 14px; line-height: 20px; font-weight: 800; }
.nf-wordmark { width: 96px; height: 32px; object-fit: contain; }
.nf-tags { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--teks2); }
.nf-kontak { width: 100%; padding-top: 8px; border-top: 1px solid var(--garis); font-size: 11px; line-height: 14px; font-weight: 600; color: var(--teks2); }
.nf-terverifikasi { margin-top: 12px; padding: 7px; border-radius: 999px; background: var(--ok); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 700; }
.nf-terverifikasi .i { width: 14px; height: 14px; }
.pt-osm { position: absolute; z-index: 400; left: 10px; top: calc(86px + env(safe-area-inset-top, 0px)); padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #4A3A30; font-size: 11px; pointer-events: none; }