/* Gaya tampilan aplikasi chat: token warna, panel samping, kepala halaman, tombol, isian, jendela, dan layar masuk.
   Warna merek ada di kelompok pertama :root dan diganti per pemasangan lewat /merek.css (server/merek/<nama>/merek.css).
   Tanpa gaya inline (CSP style-src 'self'); huruf sistem saja. */
:root {
  /* ---- Warna merek. Merek lain (server/merek/<nama>/merek.css) cukup mengganti token di kelompok ini. ---- */
  --biru: #0057E0;       /* warna utama: tombol, tautan, keadaan terpilih */
  --biru-rgb: 0, 87, 224;
  --biru-tua: #0A2A8C;
  --biru-tua-rgb: 10, 42, 140;
  --biru-terang: #0A6CF5;
  --biru-tengah: #0A4BCB;
  --biru-cincin: #0B48C6;
  --navy: #0A1633;
  --aksen: #0089FD;
  --aksen-rgb: 0, 137, 253;
  --kilau: #1FD0FF;
  --kilau-rgb: 31, 208, 255;
  --kilau-muda: #7CF0FF;
  --biru-muda: #EAF2FF;
  --biru-muda-2: #DCE9FF;
  --teks-samping: #DCE8FF;
  --hangat-1: #FED607;
  --hangat-1-rgb: 254, 214, 7;
  --hangat-2: #FE8A01;
  --hangat-2-rgb: 254, 138, 1;
  --hangat-3: #FB1D09;
  --hangat-4: #EA0268;
  --hangat-4-rgb: 234, 2, 104;
  --hangat-5-rgb: 90, 2, 96;
  /* ---- Warna umum (sama untuk semua merek). ---- */
  --merah: #C1121F;      /* BAHAYA saja */
  --hijau: #15803D;
  --kanvas: #F3F6FB;
  --kertas: #FFFFFF;
  --tinta: var(--navy);
  --redup: #5B6B84;
  --garis: #DFE6F1;
  --garis-halus: #EDF1F7;
  --merah-muda: #FDECEE;
  --pita-biru: linear-gradient(135deg, var(--kilau) 0%, var(--aksen) 28%, var(--biru) 62%, var(--biru-tua) 100%);
  --pita-hangat: linear-gradient(90deg, var(--hangat-1) 0%, var(--hangat-2) 34%, var(--hangat-3) 67%, var(--hangat-4) 100%);
  --isi-utama: linear-gradient(135deg, var(--aksen) 0%, var(--biru) 48%, var(--biru-tua) 100%);
  --bayang: 0 1px 2px rgba(10, 22, 51, .05), 0 4px 16px rgba(var(--biru-tua-rgb), .07);
  --bayang-angkat: 0 2px 4px rgba(10, 22, 51, .06), 0 12px 28px rgba(var(--biru-tua-rgb), .15);
  --cincin: 0 0 0 3px rgba(var(--biru-rgb), .16);
  --tinggi-kepala: 71px;   /* kepala percakapan & kotak logo panel samping: satu pita putih */
  --aman-atas: env(safe-area-inset-top, 0px);
  --aman-bawah: env(safe-area-inset-bottom, 0px);
  --huruf: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--kanvas); color: var(--tinta); font: 400 14px/1.5 var(--huruf);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
a { color: var(--biru); }
:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }
::placeholder { color: #95A3B8; opacity: 1; }
[hidden] { display: none !important; }
svg { display: block; }
.ikon-garis { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- layar tunggu (sebelum tersambung) ---------- */
.muat { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--kanvas); color: var(--redup); font-size: 13px; font-weight: 600; }
.muat img { width: 72px; height: 72px; }

/* ---------- tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px;
  padding: 9px 18px; min-height: 40px; font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, var(--biru-terang), var(--biru));
  box-shadow: 0 2px 6px rgba(var(--biru-rgb), .24), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: box-shadow .15s, transform .1s, background-color .15s;
}
.tombol:hover { background: linear-gradient(135deg, var(--biru), var(--biru-tua)); box-shadow: 0 4px 12px rgba(var(--biru-rgb), .3); }
.tombol:active { transform: scale(.98); }
.tombol.garis { background: #fff; color: var(--biru); border: 1.5px solid var(--biru); box-shadow: none; padding: 7.5px 16px; }
.tombol.garis:hover { background: var(--biru-muda); }
/* Tombol utama besar (MASUK): isi pita biru + pita hangat tipis di kakinya, sama dengan Rafanto App. */
.tombol-besar {
  position: relative; overflow: hidden; width: 100%; padding: 15px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--isi-utama); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .14em;
  box-shadow: 0 6px 18px rgba(var(--biru-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .12s, filter .15s;
}
.tombol-besar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pita-hangat); }
.tombol-besar:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
/* Tombol ikon kotak membulat (sama dengan tombol menu Rafanto App): panggil, lampir, rekam, kembali. */
.tombol-ikon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; background: var(--biru-muda); color: var(--biru); transition: background-color .15s, transform .1s;
}
.tombol-ikon:hover { background: var(--biru-muda-2); }
.tombol-ikon:active { transform: scale(.95); }
.tombol-ikon.merekam { background: var(--merah-muda); color: var(--merah); animation: denyut 1.2s ease-in-out infinite; }
@keyframes denyut { 50% { box-shadow: 0 0 0 5px rgba(193, 18, 31, .14); } }

/* ---------- isian ---------- */
.isian { display: grid; gap: 5px; margin-bottom: 13px; min-width: 0; text-align: left; }
.isian > span { font-size: 12.5px; font-weight: 600; color: var(--redup); }
.isian input {
  width: 100%; min-width: 0; border: 1.5px solid var(--garis); background: #fff; border-radius: 10px; padding: 10px 12px; min-height: 42px;
  outline: none; font-size: 14px; color: var(--tinta); transition: border-color .15s, box-shadow .15s;
}
.isian input:hover:not(:focus) { border-color: #C9D7EB; }
.isian input:focus { border-color: var(--biru); box-shadow: var(--cincin); }
.isian .bantu { font-size: 12px; color: var(--redup); }
.pesan-salah { background: var(--merah-muda); color: var(--merah); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-weight: 600; font-size: 13.5px; text-align: left; }
.pesan-salah:empty { display: none; }

/* ---------- layar masuk (sama dengan layar kunci Rafanto App dan layar login Rafanto Net) ---------- */
.masuk-latar {
  position: fixed; inset: 0; z-index: 5; display: flex; padding: calc(16px + var(--aman-atas)) 16px calc(16px + var(--aman-bawah));
  overflow-x: hidden; overflow-y: auto;
  background:
    radial-gradient(900px 560px at 92% -12%, rgba(var(--kilau-rgb), .42), rgba(var(--kilau-rgb), 0) 62%),
    radial-gradient(760px 540px at -10% 112%, rgba(var(--hangat-4-rgb), .34), rgba(var(--hangat-4-rgb), 0) 62%),
    radial-gradient(520px 380px at 22% 108%, rgba(var(--hangat-2-rgb), .26), rgba(var(--hangat-2-rgb), 0) 64%),
    linear-gradient(155deg, var(--biru) 0%, var(--biru-tua) 50%, var(--navy) 100%);
}
.masuk-latar::before, .masuk-latar::after {
  content: ""; position: fixed; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%, transparent); mask-image: linear-gradient(180deg, transparent, #000 50%, transparent);
}
.masuk-latar::before {
  width: 160vmax; height: 26vmax; left: -35vmax; top: -2vh; transform: rotate(-16deg);
  background: linear-gradient(90deg, rgba(var(--kilau-rgb), 0), rgba(var(--kilau-rgb), .3) 40%, rgba(var(--aksen-rgb), .2) 70%, rgba(var(--aksen-rgb), 0));
}
.masuk-latar::after {
  width: 160vmax; height: 20vmax; left: -45vmax; bottom: -2vh; transform: rotate(-16deg); mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(var(--hangat-1-rgb), 0), rgba(var(--hangat-2-rgb), .3) 32%, rgba(var(--hangat-4-rgb), .32) 66%, rgba(var(--hangat-5-rgb), 0));
}
.masuk-kartu {
  position: relative; z-index: 1; overflow: hidden; margin: auto; flex-shrink: 0; background: var(--kertas); border-radius: 22px;
  padding: 36px 32px 26px; width: 380px; max-width: 100%;
  box-shadow: 0 30px 80px rgba(3, 10, 40, .45), 0 2px 6px rgba(3, 10, 40, .15);
}
.masuk-kartu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--kilau), var(--biru) 42%, var(--hangat-2) 72%, var(--hangat-4)); }
.masuk-merek { text-align: center; }
.masuk-lambang { width: 64px; height: 64px; display: block; margin: 0 auto 12px; }
.masuk-nama { width: 140px; height: auto; display: block; margin: 2px auto 7px; }
.masuk-produk { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .2em; color: var(--biru); white-space: nowrap; }
.masuk-produk::before, .masuk-produk::after { content: ""; width: 30px; height: 2px; border-radius: 2px; }
.masuk-produk::before { background: linear-gradient(90deg, rgba(var(--aksen-rgb), 0), var(--aksen)); }
.masuk-produk::after { background: linear-gradient(90deg, var(--hangat-2), rgba(var(--hangat-2-rgb), 0)); margin-left: -.2em; }
.masuk-kartu h1 { font-size: 17px; font-weight: 700; text-align: center; margin: 18px 0 2px; }
.masuk-kartu > p { text-align: center; color: var(--redup); font-size: 12.5px; margin: 0 0 16px; }
.masuk-kartu .isian input { background: #F8FAFE; }
.masuk-kartu .isian input:focus { background: #fff; }
.masuk-kartu .tombol-besar { margin-top: 6px; }
/* Pilihan Masuk / Daftar: dua keping dalam satu wadah. */
.mode { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--kanvas); border: 1px solid var(--garis); border-radius: 12px; }
.mode button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 8px; min-height: 36px; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--redup); transition: background-color .15s, color .15s; }
.mode button.aktif { background: var(--kertas); color: var(--biru); box-shadow: 0 1px 2px rgba(10, 22, 51, .08), 0 2px 8px rgba(var(--biru-tua-rgb), .1); }

/* ---------- kerangka: panel samping (daftar percakapan) + ruang percakapan ---------- */
#app { display: none; height: 100%; }
#app.on { display: flex; }
/* Panel samping: gradasi pita biru logo dengan dua semburat lembut, sama dengan Rafanto App. Isinya daftar percakapan. */
.samping {
  width: 300px; flex-shrink: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 10px; color: var(--teks-samping);
  background:
    radial-gradient(380px 240px at 118% -6%, rgba(var(--kilau-rgb), .34), rgba(var(--kilau-rgb), 0) 64%),
    radial-gradient(300px 260px at -35% 104%, rgba(var(--hangat-4-rgb), .20), rgba(var(--hangat-4-rgb), 0) 66%),
    linear-gradient(180deg, var(--biru) 0%, var(--biru-tengah) 42%, var(--biru-tua) 100%);
}
/* Kotak logo putih setinggi & sejajar kepala percakapan (satu pita putih), pita hangat tipis di kakinya. */
.samping-merek {
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 9px; box-sizing: content-box;
  background: var(--kertas); height: var(--tinggi-kepala); margin: 0 -10px 14px; padding: var(--aman-atas) 15px 0;
  border-bottom: 1px solid var(--garis);
}
.samping-merek::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--pita-hangat); }
.samping-lambang { width: 34px; height: 34px; flex-shrink: 0; }
.samping-teks { min-width: 0; }
.samping-nama { width: 106px; height: auto; }
.samping-produk {
  display: flex; align-items: center; gap: 5px; width: 106px; margin-top: 4px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .2em; line-height: 1; white-space: nowrap; color: var(--biru);
}
.samping-produk::before, .samping-produk::after { content: ""; flex: 1; height: 1.5px; border-radius: 2px; }
.samping-produk::before { background: linear-gradient(90deg, rgba(var(--aksen-rgb), 0), var(--aksen)); }
.samping-produk::after { background: linear-gradient(90deg, var(--hangat-2), rgba(var(--hangat-2-rgb), 0)); margin-left: -.2em; }
/* Chat / Grup: dua keping tembus pandang, yang terpilih jadi keping putih (seperti menu terpilih). */
.tab { flex-shrink: 0; display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14); }
.tab button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 8px; min-height: 36px; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--teks-samping); transition: background-color .15s, color .15s; }
.tab button:hover:not(.aktif) { background: rgba(255, 255, 255, .1); color: #fff; }
.tab button.aktif { background: var(--kertas); color: var(--biru); box-shadow: 0 3px 12px rgba(2, 16, 60, .24); }
.tab button:focus-visible, .tombol-sisi:focus-visible, .orang:focus-visible, .sesi-keluar:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tombol-sisi {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 8px 0 6px; padding: 9px 12px; min-height: 40px;
  border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .34); background: none; color: var(--teks-samping); font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.tombol-sisi:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.tombol-sisi .ikon-garis { width: 17px; height: 17px; }
/* Ajakan menyalakan notifikasi. */
.ajak { flex-shrink: 0; display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .16); color: var(--biru-muda); font-size: 12px; line-height: 1.4; }
.ajak span { flex: 1; min-width: 0; }
.ajak button { flex-shrink: 0; border: 0; border-radius: 9px; padding: 8px 12px; min-height: 34px; background: #fff; color: var(--biru); font-weight: 800; font-size: 12.5px; cursor: pointer; }
#daftar { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 2px 4px 8px; }
.orang {
  position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  color: var(--teks-samping); transition: background-color .15s, color .15s;
}
.orang:hover { background: rgba(255, 255, 255, .13); color: #fff; }
/* Percakapan terpilih: keping putih, pita hangat tipis di tepi kiri (gema pita jingga–magenta pada lambang). */
.orang.aktif { background: var(--kertas); color: var(--biru); box-shadow: 0 3px 12px rgba(2, 16, 60, .24); }
.orang.aktif::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3.5px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--hangat-1), var(--hangat-2) 45%, var(--hangat-4));
}
.orang .nm { flex: 1; min-width: 0; }
.orang .nm > div { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orang.aktif .nm > div { font-weight: 700; }
.orang .nm small { display: block; font-size: 12px; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kanan baris: jam pesan terakhir, di bawahnya angka belum dibaca. */
.sisi-kanan { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-height: 34px; }
.sisi-kanan time { font-size: 11px; color: rgba(255, 255, 255, .66); font-variant-numeric: tabular-nums; }
.orang.aktif .sisi-kanan time { color: var(--redup); }
.orang.aktif .nm small { color: var(--redup); }
/* Angka pesan belum dibaca: di baris percakapan, di tombol Chat/Grup, dan di tombol kembali (HP). */
.lencana, .tab button[data-n]::after, #kembali[data-n]::after {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: linear-gradient(135deg, var(--hangat-2), var(--hangat-4)); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1;
  box-shadow: 0 2px 6px rgba(var(--hangat-4-rgb), .35); font-variant-numeric: tabular-nums;
}
.tab button[data-n]::after { content: attr(data-n); margin-left: 7px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; vertical-align: 1px; }
#kembali { position: relative; }
#kembali[data-n]::after { content: attr(data-n); position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; }
.samping .kosong { margin: 14px 4px; padding: 16px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); color: var(--teks-samping); font-size: 13px; text-align: center; }
/* Avatar: kotak membulat bergradasi hangat (sama dengan avatar sesi Rafanto App); grup memakai pita biru langit. */
.ava {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hangat-2), var(--hangat-4)); color: #fff; font-weight: 800; font-size: 13.5px;
  text-shadow: 0 1px 1px rgba(var(--hangat-5-rgb), .35); box-shadow: 0 2px 6px rgba(var(--hangat-4-rgb), .3);
}
.ava.grup { background: linear-gradient(135deg, var(--kilau), var(--aksen)); text-shadow: 0 1px 1px rgba(var(--biru-tua-rgb), .35); box-shadow: 0 2px 6px rgba(var(--aksen-rgb), .32); }
.titik { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: rgba(255, 255, 255, .28); }
/* Tanda online menumpang di pojok avatar. */
.ava { position: relative; }
.ava .titik { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; }
.ava .titik.on, .orang.aktif .ava .titik.on { background: #34D399; box-shadow: 0 0 0 2.5px var(--biru-cincin); }
.orang.aktif .ava .titik.on { box-shadow: 0 0 0 2.5px #fff; }
.titik.on { background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .22); }
.orang.aktif .titik { background: #C4CEDC; }
.orang.aktif .titik.on { background: #16A34A; box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.samping-bawah { flex-shrink: 0; padding: 10px 0 calc(12px + var(--aman-bawah)); }
.sesi { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12); }
.sesi-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hangat-2), var(--hangat-4)); color: #fff; font-weight: 800; font-size: 12px;
  text-shadow: 0 1px 1px rgba(var(--hangat-5-rgb), .35); box-shadow: 0 2px 6px rgba(var(--hangat-4-rgb), .3);
}
.sesi-teks { flex: 1; min-width: 0; }
.sesi-nama { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sesi-peran { font-size: 10.5px; color: rgba(255, 255, 255, .72); }
.sesi-keluar { border: 0; background: none; color: var(--teks-samping); padding: 7px; border-radius: 8px; cursor: pointer; }
.sesi-keluar:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.sesi-keluar .ikon-garis { width: 17px; height: 17px; stroke-width: 2; }

/* ---------- ruang percakapan ---------- */
.utama { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--kanvas); }
.atas-bar {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; box-sizing: content-box; height: var(--tinggi-kepala);
  padding: var(--aman-atas) 22px 0; background: var(--kertas); border-bottom: 1px solid var(--garis);
}
.atas-kiri { flex: 1; min-width: 0; }
#k-nama { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#k-sub { font-size: 12px; color: var(--redup); margin-top: 1px; }
#k-sub:empty { display: none; }
#kembali { display: none; }
.panggil { display: flex; gap: 8px; }
#pesan { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 7px; }
#pesan .kosong { margin: auto; padding: 24px; color: var(--redup); font-size: 13px; text-align: center; }
/* Gelembung: kiriman sendiri memakai isi pita biru (sama dengan tombol utama), kiriman orang lain kartu putih. */
.b {
  position: relative; display: flow-root; max-width: min(78%, 560px); padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45;
  overflow-wrap: anywhere; touch-action: pan-y; transition: transform .16s ease;
}
/* Geser untuk membalas: gelembung ikut jari, tanda balas muncul di sisi yang terbuka dan menyala saat sudah cukup jauh. */
.b.digeser { transition: none; }
.b.digeser::before {
  content: ""; position: absolute; top: 50%; right: -42px; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; opacity: .35;
  background: var(--biru-muda) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057E0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'/%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: opacity .12s, transform .12s;
}
.b.digeser.ke-kanan::before { right: auto; left: -42px; }
.b.digeser.siap-balas::before { opacity: 1; transform: scale(1.12); }
.b.sorot { animation: sorot 1.5s ease; }
@keyframes sorot { 0%, 55% { box-shadow: 0 0 0 4px rgba(var(--hangat-2-rgb), .6); } 100% { box-shadow: 0 0 0 4px rgba(var(--hangat-2-rgb), 0); } }
/* Tombol menu pesan untuk mouse: muncul saat gelembung disorot. */
.b-aksi {
  display: none; position: absolute; top: 4px; right: 4px; width: 26px; height: 24px; padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  align-items: center; justify-content: center; background: rgba(255, 255, 255, .94); color: var(--redup); box-shadow: 0 1px 4px rgba(10, 22, 51, .2);
}
.b-aksi .ikon-garis { width: 16px; height: 16px; }
@media (hover: hover) { .b:hover .b-aksi, .b-aksi:focus-visible { display: inline-flex; } }
/* Di layar sentuh, tekan lama membuka menu pesan kita, bukan menu salin/simpan bawaan HP. */
@media (hover: none) { .b, .b a, .b img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.terusan { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 11.5px; font-style: italic; opacity: .78; }
.terusan .ikon-garis { width: 13px; height: 13px; }
/* Kutipan pesan yang dibalas. */
.kutip {
  display: flex; align-items: center; gap: 8px; max-width: 260px; margin: 0 0 6px; padding: 6px 9px; border-radius: 9px; cursor: pointer;
  border-left: 3px solid var(--biru); background: rgba(var(--biru-rgb), .08);
}
.kutip img { width: 38px; height: 38px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.kutip > div { min-width: 0; }
.kutip b { display: block; font-size: 12px; font-weight: 700; color: var(--biru); }
.kutip span { display: block; font-size: 12.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b.kirim .kutip { border-left-color: #fff; background: rgba(255, 255, 255, .17); }
.b.kirim .kutip b { color: #fff; }
.b.gambar .kutip { margin: 3px 3px 5px; }
.b.gambar .terusan { padding: 4px 8px 0; }
.b.kirim { align-self: flex-end; background: var(--isi-utama); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 2px 8px rgba(var(--biru-rgb), .22); }
.b.terima { align-self: flex-start; background: var(--kertas); border: 1px solid var(--garis); border-bottom-left-radius: 5px; box-shadow: var(--bayang); }
.b .pengirim { font-size: 12px; font-weight: 700; color: #D9480F; margin-bottom: 1px; }
/* Pemisah tanggal di tengah percakapan. */
.tanggal { align-self: center; margin: 8px 0 3px; }
.tanggal span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--kertas); border: 1px solid var(--garis); color: var(--redup); font-size: 11.5px; font-weight: 700; box-shadow: var(--bayang); }
/* Centang di pesan sendiri: satu = terkirim, dua = sampai, dua terang = dibaca. */
.centang { display: inline-block; width: 17px; height: 10px; margin-left: 4px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.centang.c1 .dua { display: none; }
.b.kirim .centang.c3 { stroke: var(--kilau-muda); }
.jendela .centang { flex-shrink: 0; width: 20px; height: 12px; color: var(--redup); }
.jendela .centang.c3 { stroke: var(--aksen); }
/* Pesan yang dihapus. */
.b.dihapus { font-style: italic; }
.hapus-teks { display: inline-flex; align-items: center; gap: 6px; color: var(--redup); }
.b.kirim .hapus-teks { color: rgba(255, 255, 255, .86); }
.hapus-teks .ikon-garis { width: 15px; height: 15px; }
/* Jam menumpang di kanan baris terakhir kalau muat, kalau tidak turun sendiri (seperti WhatsApp). */
.b small { float: right; margin: 7px 0 -1px 12px; font-size: 10.5px; line-height: 1.3; opacity: .72; font-variant-numeric: tabular-nums; }
/* Foto: gambar memenuhi gelembung (bingkai tipis saja) dan jam menumpang di pojok kanan bawah gambar. Ukuran gambar
   SENGAJA dalam piksel, bukan persen: dengan persen gelembungnya melebar selebar gambar aslinya (kotak kosong besar). */
.b.gambar { position: relative; padding: 3px; max-width: none; }
.b.gambar .foto { display: block; border-radius: 13px; overflow: hidden; line-height: 0; }
.b.gambar .foto img {
  display: block; width: auto; height: auto; max-width: 260px; max-height: 340px; min-width: 110px; min-height: 70px;
  object-fit: cover; border-radius: 13px; cursor: pointer; background: var(--garis-halus);
}
.b.gambar small { position: absolute; right: 9px; bottom: 9px; float: none; margin: 0; padding: 2px 7px; border-radius: 9px; background: rgba(10, 22, 51, .55); color: #fff; opacity: 1; }
.b.gambar .pengirim { padding: 4px 8px; }
.b.gambar .keterangan { max-width: 260px; padding: 6px 8px 3px; }
.b.gambar.berteks small { position: static; float: right; margin: 2px 8px 4px 12px; padding: 0; background: none; color: inherit; opacity: .72; }
/* Pesan suara: tombol putar bulat, garis yang terisi selama diputar, lama rekaman di kiri dan jam di kanan. */
.b.suara { padding: 8px 11px 6px 9px; }
.vn { display: flex; align-items: center; gap: 10px; width: 216px; max-width: 100%; }
.vn-main {
  width: 38px; height: 38px; border-radius: 50%; border: 0; flex-shrink: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: var(--isi-utama); color: #fff; box-shadow: 0 2px 6px rgba(var(--biru-rgb), .28);
}
.b.kirim .vn-main { background: #fff; color: var(--biru); box-shadow: none; }
.ikon-isi { width: 18px; height: 18px; fill: currentColor; }
.vn-badan { flex: 1; min-width: 0; }
.vn-jalur { position: relative; height: 16px; cursor: pointer; }
.vn-jalur::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 4px; border-radius: 3px; background: #D5DEEC; }
.vn-jalur i { position: absolute; left: 0; top: 6px; height: 4px; width: 0; border-radius: 3px; background: var(--biru); }
.vn-jalur i::after { content: ""; position: absolute; right: -5px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: inherit; }
.b.kirim .vn-jalur::before { background: rgba(255, 255, 255, .34); }
.b.kirim .vn-jalur i { background: #fff; }
.vn-kaki { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vn-waktu { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.vn-kaki small { float: none; margin: 0; }
.b .file { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 600; }
.b .file .ic { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--biru-muda); color: var(--biru); }
.b.kirim .file .ic { background: rgba(255, 255, 255, .22); color: #fff; }
#balas-bar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 8px 22px 0; background: var(--kertas); border-top: 1px solid var(--garis); }
#balas-bar:not([hidden]) + #bar { border-top: 0; }
.bb-isi { flex: 1; min-width: 0; padding: 6px 10px; border-left: 3px solid var(--biru); border-radius: 9px; background: var(--biru-muda); }
.bb-isi b { display: block; font-size: 12px; font-weight: 700; color: var(--biru); }
.bb-isi span { display: block; font-size: 12.5px; color: var(--redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bb-batal { flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--redup); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#bb-batal:hover { background: var(--kanvas); }
#bar {
  flex-shrink: 0; display: flex; gap: 8px; align-items: center; padding: 10px 22px calc(10px + var(--aman-bawah));
  background: var(--kertas); border-top: 1px solid var(--garis);
}
#teks {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--garis); border-radius: 12px; background: #F8FAFE;
  outline: none; font-size: 14px; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
#teks:focus { border-color: var(--biru); background: #fff; box-shadow: var(--cincin); }
#teks:disabled { background: var(--kanvas); }
#kirim-btn {
  flex-shrink: 0; width: 46px; height: 44px; border-radius: 13px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: var(--isi-utama); color: #fff; box-shadow: 0 4px 12px rgba(var(--biru-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .12s, filter .15s;
}
#kirim-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
#kirim-btn:disabled { background: #E1E8F3; color: #8C9BB3; cursor: default; box-shadow: none; }

/* ---------- HP: daftar percakapan satu layar penuh, ruang percakapan layar berikutnya ---------- */
@media (max-width: 759px) {
  :root { --tinggi-kepala: 58px; }
  #app.on { display: block; }
  .samping, .utama { width: 100%; height: 100%; }
  #app.on.di-ruang .samping { display: none; }
  #app.on:not(.di-ruang) .utama { display: none; }
  .samping { padding: 0 12px; }
  .samping-merek { margin: 0 -12px 14px; }
  .orang { padding: 10px 11px; }
  .orang .nm > div { font-size: 15px; }
  .ava { width: 42px; height: 42px; font-size: 14.5px; }
  #kembali { display: inline-flex; }
  .atas-bar { padding: var(--aman-atas) 12px 0; gap: 10px; }
  #k-nama { font-size: 17px; }
  #pesan { padding: 14px 12px; }
  .b { max-width: 84%; font-size: 15px; }
  #bar { padding: 8px 10px calc(8px + var(--aman-bawah)); gap: 7px; }
  #balas-bar { padding: 8px 10px 0; }
  /* Menu pesan di HP: lembar yang naik dari bawah. */
  .latar.lembar { place-items: end center; padding: 0; }
  .lembar .jendela { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(16px + var(--aman-bawah)); animation: lembar-naik .2s ease; }
  /* 16 px supaya Safari iPhone tidak memperbesar halaman tiap kotak isian disentuh. */
  #teks, .isian input, .jendela input[type="text"] { font-size: 16px; }
  .masuk-kartu { padding: 30px 22px 22px; }
}

/* ---------- jendela ---------- */
.latar { position: fixed; inset: 0; background: rgba(10, 22, 51, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; z-index: 70; }
/* Pita biru tipis di tepi atas tiap jendela. */
.jendela {
  background: linear-gradient(90deg, var(--kilau), var(--aksen) 30%, var(--biru) 70%, var(--biru-tua)) top / 100% 4px no-repeat, var(--kertas);
  border-radius: 20px; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px 20px 20px;
  box-shadow: 0 24px 64px rgba(10, 22, 51, .32), 0 2px 8px rgba(10, 22, 51, .08); animation: jendela-masuk .18s ease;
}
@keyframes jendela-masuk { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.jendela h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.jendela input[type="text"] {
  width: 100%; border: 1.5px solid var(--garis); border-radius: 10px; padding: 10px 12px; min-height: 42px; margin-bottom: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.jendela input[type="text"]:focus { border-color: var(--biru); box-shadow: var(--cincin); }
.jendela .kosong { padding: 18px 8px; color: var(--redup); font-size: 13px; text-align: center; }
.pil { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; cursor: pointer; font-weight: 600; }
.pil:hover { background: var(--kanvas); }
.pil input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--biru); flex-shrink: 0; }
.pil .ava { width: 34px; height: 34px; font-size: 12.5px; }
.pil .ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--biru-muda); color: var(--biru); }
.kaki { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
@keyframes lembar-naik { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Menu pesan & jendela Teruskan. */
@media (min-width: 760px) { .lembar .jendela { width: min(340px, 100%); } }   /* di HP lembarnya selebar layar */
.menu-kepala { margin: 0 0 10px; padding: 8px 11px; border-radius: 10px; border-left: 3px solid var(--biru); background: var(--kanvas); }
.menu-kepala b { display: block; font-size: 12px; font-weight: 700; color: var(--biru); }
.menu-kepala span { display: block; font-size: 13px; color: var(--redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.pil { width: 100%; border: 0; background: none; text-align: left; font: inherit; font-weight: 600; color: inherit; }
button.pil:disabled { opacity: .5; cursor: default; }
.pil.bahaya { color: var(--merah); }
.pil.bahaya .ic { background: var(--merah-muda); color: var(--merah); }
.pil.info { cursor: default; }
.pil.info .pil-teks { flex: 1; min-width: 0; }
.pil.info small { display: block; font-size: 12px; font-weight: 400; color: var(--redup); }
.daftar-pilih { max-height: 46vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
/* Kabar singkat di bawah layar. Diletakkan dengan left/right + flex, bukan left:50% (di Safari iPhone itu bergeser). */
.kabar { position: fixed; left: 12px; right: 12px; bottom: calc(88px + var(--aman-bawah)); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.kabar div { max-width: 420px; padding: 10px 14px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--bayang-angkat); }

/* ---------- penampil foto ---------- */
.lihat-foto { position: fixed; inset: 0; z-index: 75; display: flex; flex-direction: column; background: #050A1C; color: #fff; }
.lf-atas { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--aman-atas)) 12px 10px; }
.lf-tombol {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .15s;
}
.lf-tombol:hover { background: rgba(255, 255, 255, .24); }
.lf-tombol:disabled { opacity: .45; cursor: default; }
.lf-tombol:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lf-ket { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Gambar mengisi seluruh wadah dan isinya ditaruh utuh di tengah: tidak bergantung pada ukuran asli gambar. */
.lf-isi { flex: 1; min-height: 0; position: relative; margin-bottom: var(--aman-bawah); }
.lf-isi img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- panggilan ---------- */
#call {
  position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; color: #fff;
  background:
    radial-gradient(700px 460px at 92% -12%, rgba(var(--kilau-rgb), .28), rgba(var(--kilau-rgb), 0) 62%),
    radial-gradient(620px 460px at -10% 112%, rgba(var(--hangat-4-rgb), .24), rgba(var(--hangat-4-rgb), 0) 62%),
    linear-gradient(155deg, var(--biru-tua) 0%, var(--navy) 62%);
}
#call.on { display: flex; }
#call .atas { flex-shrink: 0; padding: calc(20px + var(--aman-atas)) 18px 16px; text-align: center; }
#call .atas b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
#call .atas div { margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .78); }
#call .video { flex: 1; min-height: 0; position: relative; overflow: hidden; background: rgba(3, 8, 26, .55); }
#rv { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tanpa gambar lawan (panggilan suara, atau video yang belum datang): avatar besar di tengah. #rv hanya disembunyikan
   dari pandangan, tidak dicabut dari halaman, karena suaranya diputar lewat elemen itu. */
.call-wajah { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
#call.tanpa-video:not(.grup) .call-wajah { display: flex; }
#call.tanpa-video:not(.grup) #rv { visibility: hidden; }
.call-wajah .ava {
  width: 136px; height: 136px; border-radius: 40px; font-size: 48px;
  box-shadow: 0 0 0 12px rgba(255, 255, 255, .06), 0 0 0 26px rgba(255, 255, 255, .035), 0 14px 44px rgba(var(--hangat-4-rgb), .38);
}
#rv.utuh, .tile video.utuh { object-fit: contain; }   /* video tegak di layar lebar: utuh, tidak dipotong */
#grid { display: none; position: absolute; inset: 0; padding: 8px; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 1fr; }
#call.grup #grid { display: grid; }
#call.grup #rv { display: none; }
.tile { position: relative; min-height: 120px; overflow: hidden; border-radius: 14px; background: #111A33; border: 1px solid rgba(255, 255, 255, .08); }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile span { position: absolute; left: 8px; bottom: 7px; font-size: 12.5px; font-weight: 600; background: rgba(3, 8, 26, .55); padding: 2px 9px; border-radius: 8px; }
/* Video sendiri dicerminkan, seperti bercermin (yang dikirim ke lawan tetap tidak terbalik). */
#lv { position: absolute; right: 12px; bottom: 12px; width: 110px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .3); background: #000; transform: scaleX(-1); }
#call .bawah { flex-shrink: 0; padding: 20px 22px calc(22px + var(--aman-bawah)); display: flex; justify-content: center; gap: 22px; }
#call .bawah button {
  width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s, filter .15s;
}
#call .bawah button:hover { transform: translateY(-1px); filter: brightness(1.08); }
#call .bawah .ikon-garis { width: 26px; height: 26px; stroke-width: 2; }
#call .bawah .b-alat { background: rgba(255, 255, 255, .16); }
#call .bawah .b-alat.mati { background: #fff; color: var(--navy); }
.b-tutup, .b-tolak { background: linear-gradient(135deg, #E11D2E, #C1121F); box-shadow: 0 6px 18px rgba(193, 18, 31, .4); }
.b-terima { background: linear-gradient(135deg, #22C55E, #15803D); box-shadow: 0 6px 18px rgba(21, 128, 61, .4); }
#lv.belakang { transform: none; }   /* kamera belakang tidak dicerminkan */

/* ---------- Tahap 2: foto profil, stiker, emoji besar, video, reaksi, info file, panel emoji, kirim berjalan ---------- */
.ava img, .sesi-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ava.besar { width: 84px; height: 84px; border-radius: 24px; font-size: 30px; }
.atas-kiri, #k-ava { cursor: pointer; }
.sesi-profil { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
/* Stiker dan emoji besar: tanpa gelembung, jam di keping kecil di bawahnya. */
.b.stiker { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; }
.b.stiker .stk { display: block; width: 150px; height: 150px; }
.eb { display: flex; gap: 2px; }
.eb img { display: block; width: 112px; height: 112px; }
.eb.n2 img { width: 88px; height: 88px; }
.eb.n3 img { width: 72px; height: 72px; }
.b.stiker small { float: none; display: table; margin: 2px 4px 0 auto; padding: 2px 8px; border-radius: 9px; background: var(--kertas); border: 1px solid var(--garis); color: var(--redup); opacity: 1; }
.b.stiker.terima small { margin: 2px auto 0 4px; }
.b.stiker.kirim .centang.c3 { stroke: var(--aksen); }
.b.stiker .pengirim { padding: 0 4px 2px; }
.b.stiker .terusan { color: var(--redup); padding: 0 4px; }
.b.stiker .kutip, .b.stiker.kirim .kutip { margin: 0 0 4px; background: var(--kertas); border: 1px solid var(--garis); border-left: 3px solid var(--biru); }
.b.stiker.kirim .kutip b { color: var(--biru); }
.b.stiker .b-aksi { top: 0; right: 0; }
.kutip img.polos { object-fit: contain; border-radius: 0; }
/* Video: diputar di dalam gelembung. */
.b.video { padding: 3px; max-width: none; }
.b.video .vid { display: block; width: 260px; height: auto; max-height: 360px; border-radius: 13px; background: #000; }
.b.video small { margin: 4px 8px 3px 12px; }
.b.video .keterangan { max-width: 260px; padding: 6px 8px 0; }
.b.video .pengirim, .b.video .terusan { padding: 4px 8px 0; }
.b.video .kutip { margin: 3px 3px 5px; }
/* Kabar grup (menambahkan, keluar): keping di tengah, senada pemisah tanggal. */
.tanggal.info span { font-weight: 600; background: var(--biru-muda); border-color: transparent; color: var(--biru-tua); box-shadow: none; }
/* Reaksi: keping kecil yang menumpang di tepi bawah gelembung. */
.b.ada-reaksi { margin-bottom: 17px; }
.reaksi { position: absolute; left: 8px; bottom: -16px; z-index: 1; display: flex; gap: 3px; }
.b.kirim .reaksi { left: auto; right: 8px; }
.reaksi button {
  display: inline-flex; align-items: center; gap: 3px; height: 25px; padding: 0 7px; border-radius: 13px; border: 1px solid var(--garis); background: var(--kertas);
  color: var(--tinta); font-size: 14px; line-height: 1; cursor: pointer; box-shadow: var(--bayang);
}
.reaksi button.saya { border-color: var(--biru); background: var(--biru-muda); }
/* Di stiker, jam sudah menempati satu sudut bawah: reaksi ditaruh di sudut seberangnya, sejajar dengan jam. */
.b.stiker.ada-reaksi { margin-bottom: 4px; }
.b.stiker .reaksi { bottom: -2px; }
.b.stiker.kirim .reaksi { right: auto; left: 4px; }
.b.stiker.terima .reaksi { left: auto; right: 4px; }
.reaksi i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--redup); }
.emo, .cepat button, .reaksi button, .emo-besar { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--huruf); }
/* File: nama, jenis dan ukuran, lalu tombol Lihat dan Simpan. */
.b .file { min-width: 190px; }
.file-teks { display: flex; flex-direction: column; min-width: 0; }
.file-teks b { font-weight: 600; overflow-wrap: anywhere; }
.file-info { font-size: 11.5px; font-weight: 400; opacity: .8; }
.file-aksi { display: flex; gap: 6px; margin-top: 8px; }
.file-aksi button { flex: 1; min-height: 32px; border-radius: 9px; border: 1px solid var(--garis); background: var(--kanvas); color: var(--biru); font-weight: 700; font-size: 12.5px; cursor: pointer; }
.file-aksi button:hover { background: var(--biru-muda); }
.b.kirim .file-aksi button { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .16); color: #fff; }
.b.kirim .file-aksi button:hover { background: rgba(255, 255, 255, .28); }
/* Kirim berjalan. */
.maju { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 7px 22px; background: var(--biru-muda); color: var(--biru-tua); font-size: 12.5px; font-weight: 700; }
.maju i { flex: 1; height: 5px; border-radius: 3px; background: rgba(var(--biru-rgb), .18); overflow: hidden; }
.maju b { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--biru); transition: width .2s; }
/* Panel emoji dan stiker di atas kotak tulis. */
.panel { flex-shrink: 0; display: flex; flex-direction: column; height: 310px; max-height: 44vh; background: var(--kertas); border-top: 1px solid var(--garis); }
.panel-tab { flex-shrink: 0; display: flex; gap: 4px; padding: 8px 12px 0; }
.panel-tab button { flex: 1; min-height: 34px; border: 0; border-radius: 10px; background: var(--kanvas); color: var(--redup); font-weight: 700; font-size: 13px; cursor: pointer; }
.panel-tab button.aktif { background: var(--biru-muda); color: var(--biru); }
.panel-kel { flex-shrink: 0; display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; }
.panel-kel::-webkit-scrollbar { display: none; }
.panel-kel button { flex-shrink: 0; padding: 5px 12px; border: 1px solid var(--garis); border-radius: 999px; background: var(--kertas); color: var(--redup); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.panel-kel button.aktif { background: var(--biru); border-color: var(--biru); color: #fff; }
.panel-isi { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 2px; padding: 2px 10px 10px; }
.panel-isi.emoji { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.panel-isi.stiker { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.emo { height: 40px; padding: 0; border: 0; border-radius: 9px; background: none; font-size: 26px; line-height: 1; cursor: pointer; }
.emo:hover, .stk-pilih:hover { background: var(--kanvas); }
.stk-pilih { padding: 4px; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.stk-pilih img { display: block; width: 100%; height: auto; }
.panel-isi .kosong { grid-column: 1 / -1; padding: 24px; color: var(--redup); font-size: 13px; text-align: center; }
#btn-emoji.aktif { background: var(--biru); color: #fff; }
.pilih-emo { max-height: 50vh; padding: 0; }
/* Reaksi cepat di menu pesan. */
.cepat { display: flex; gap: 2px; margin: 0 0 12px; padding: 5px; border-radius: 999px; background: var(--kanvas); }
.cepat button { flex: 1; height: 42px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--redup); font-size: 25px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cepat button:hover { background: #E3EAF5; }
.cepat button.saya { background: var(--biru-muda); box-shadow: inset 0 0 0 2px var(--biru); }
.emo-besar { flex-shrink: 0; font-size: 24px; line-height: 1; }
.pil.milik { cursor: pointer; }
/* Profil, info grup, kamera. */
.profil-atas { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.profil-atas b { font-size: 16px; }
.profil-tombol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.jendela h3 { margin: 4px 0 10px; font-size: 14px; font-weight: 700; }
.jendela .sub { margin: -8px 0 12px; color: var(--redup); font-size: 12.5px; }
.jendela .sumber { margin: 14px 0 0; color: var(--redup); font-size: 11px; line-height: 1.4; }
.tombol.garis.bahaya { color: var(--merah); border-color: var(--merah); }
.tombol.garis.bahaya:hover { background: var(--merah-muda); }
.tombol.kecil { min-height: 32px; padding: 4px 11px; font-size: 12px; }
.kamera video { display: block; width: 100%; max-height: 56vh; border-radius: 12px; background: #000; }
@media (max-width: 759px) {
  .b.stiker .stk { width: 136px; height: 136px; }
  .eb img { width: 104px; height: 104px; }
  .maju { padding: 7px 12px; }
  .panel { height: 300px; }
  .panel-isi.stiker { grid-template-columns: repeat(4, 1fr); }
  .info-grup .kaki .tombol { flex: 1; }
}

/* ---------- menu pengelola, link undangan, pilihan nada ---------- */
.pesan-baik { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: #E8F7EE; color: var(--hijau); font-weight: 600; font-size: 13.5px; text-align: left; }
.kode-kotak { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--kanvas); }
.kode-kotak b { flex: 1; min-width: 0; font-size: 20px; letter-spacing: .14em; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
.link-teks { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--biru); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.sub2 { margin: 8px 0 14px; color: var(--redup); font-size: 12.5px; line-height: 1.45; }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.kelola h3 { margin-top: 16px; }
button.pil.info { cursor: pointer; }
.pil.info > .ikon-garis { color: var(--redup); width: 18px; height: 18px; }
.baris-nada { display: flex; align-items: center; gap: 8px; }
.jendela select {
  flex: 1; min-width: 0; min-height: 42px; padding: 9px 10px; border: 1.5px solid var(--garis); border-radius: 10px; background: #fff; color: var(--tinta); font-size: 14px; outline: none;
}
.jendela select:focus { border-color: var(--biru); box-shadow: var(--cincin); }
@media (max-width: 759px) { .jendela select { font-size: 16px; } .baris-tombol .tombol { flex: 1 1 46%; } }