/* Rafanto Chat — gaya tampilan. SERAGAM dengan Rafanto App dan Rafanto Net (acuan: rafanto-net/server/web/css/app.css,
   yang mengikuti aplikasi-kasir-pgk/src/ui/css/aplikasi.css): token warna, panel samping, kepala halaman, tombol, isian,
   jendela, dan layar masuk memakai aturan yang sama. Satu keluarga produk, yang beda hanya isi halamannya.
   Tanpa gaya inline (CSP style-src 'self'); huruf sistem saja, sama dengan Rafanto App. */
:root {
  --biru: #0057E0;       /* warna utama: tombol, tautan, keadaan terpilih */
  --biru-tua: #0A2A8C;
  --navy: #0A1633;
  --aksen: #0089FD;
  --merah: #C1121F;      /* BAHAYA saja */
  --hijau: #15803D;
  --kanvas: #F3F6FB;
  --kertas: #FFFFFF;
  --tinta: #0A1633;
  --redup: #5B6B84;
  --garis: #DFE6F1;
  --garis-halus: #EDF1F7;
  --biru-muda: #EAF2FF;
  --merah-muda: #FDECEE;
  --pita-biru: linear-gradient(135deg, #1FD0FF 0%, #0089FD 28%, #0057E0 62%, #0A2A8C 100%);
  --pita-hangat: linear-gradient(90deg, #FED607 0%, #FE8A01 34%, #FB1D09 67%, #EA0268 100%);
  --isi-utama: linear-gradient(135deg, #0089FD 0%, #0057E0 48%, #0A2A8C 100%);
  --bayang: 0 1px 2px rgba(10, 22, 51, .05), 0 4px 16px rgba(10, 42, 140, .07);
  --bayang-angkat: 0 2px 4px rgba(10, 22, 51, .06), 0 12px 28px rgba(10, 42, 140, .15);
  --cincin: 0 0 0 3px rgba(0, 87, 224, .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, #0A6CF5, #0057E0);
  box-shadow: 0 2px 6px rgba(0, 87, 224, .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, #0057E0, #0A2A8C); box-shadow: 0 4px 12px rgba(0, 87, 224, .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(0, 87, 224, .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: #DCE9FF; }
.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(31, 208, 255, .42), rgba(31, 208, 255, 0) 62%),
    radial-gradient(760px 540px at -10% 112%, rgba(234, 2, 104, .34), rgba(234, 2, 104, 0) 62%),
    radial-gradient(520px 380px at 22% 108%, rgba(254, 138, 1, .26), rgba(254, 138, 1, 0) 64%),
    linear-gradient(155deg, #0057E0 0%, #0A2A8C 50%, #0A1633 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(31, 208, 255, 0), rgba(31, 208, 255, .3) 40%, rgba(0, 137, 253, .2) 70%, rgba(0, 137, 253, 0));
}
.masuk-latar::after {
  width: 160vmax; height: 20vmax; left: -45vmax; bottom: -2vh; transform: rotate(-16deg); mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(254, 214, 7, 0), rgba(254, 138, 1, .3) 32%, rgba(234, 2, 104, .32) 66%, rgba(90, 2, 96, 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, #1FD0FF, #0057E0 42%, #FE8A01 72%, #EA0268); }
.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(0, 137, 253, 0), #0089FD); }
.masuk-produk::after { background: linear-gradient(90deg, #FE8A01, rgba(254, 138, 1, 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(10, 42, 140, .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: #DCE8FF;
  background:
    radial-gradient(380px 240px at 118% -6%, rgba(31, 208, 255, .34), rgba(31, 208, 255, 0) 64%),
    radial-gradient(300px 260px at -35% 104%, rgba(234, 2, 104, .20), rgba(234, 2, 104, 0) 66%),
    linear-gradient(180deg, #0057E0 0%, #0A4BCB 42%, #0A2A8C 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(0, 137, 253, 0), #0089FD); }
.samping-produk::after { background: linear-gradient(90deg, #FE8A01, rgba(254, 138, 1, 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: #DCE8FF; 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: #DCE8FF; 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; }
#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: #DCE8FF; 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, #FED607, #FE8A01 45%, #EA0268);
}
.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: 11.5px; color: rgba(255, 255, 255, .66); }
.orang.aktif .nm small { color: var(--redup); }
.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: #DCE8FF; 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, #FE8A01, #EA0268); color: #fff; font-weight: 800; font-size: 13.5px;
  text-shadow: 0 1px 1px rgba(90, 2, 96, .35); box-shadow: 0 2px 6px rgba(234, 2, 104, .3);
}
.ava.grup { background: linear-gradient(135deg, #1FD0FF, #0089FD); text-shadow: 0 1px 1px rgba(10, 42, 140, .35); box-shadow: 0 2px 6px rgba(0, 137, 253, .32); }
.titik { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: rgba(255, 255, 255, .28); }
.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, #FE8A01, #EA0268); color: #fff; font-weight: 800; font-size: 12px;
  text-shadow: 0 1px 1px rgba(90, 2, 96, .35); box-shadow: 0 2px 6px rgba(234, 2, 104, .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: #DCE8FF; 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-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 { display: flow-root; max-width: min(78%, 560px); padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.b.kirim { align-self: flex-end; background: var(--isi-utama); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 2px 8px rgba(0, 87, 224, .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; }
/* 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 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(0, 87, 224, .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; }
#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(0, 87, 224, .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; }
  /* 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, #1FD0FF, #0089FD 30%, #0057E0 70%, #0A2A8C) 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; }

/* ---------- 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(31, 208, 255, .28), rgba(31, 208, 255, 0) 62%),
    radial-gradient(620px 460px at -10% 112%, rgba(234, 2, 104, .24), rgba(234, 2, 104, 0) 62%),
    linear-gradient(155deg, #0A2A8C 0%, #0A1633 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; }
#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; }
.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); }