/* KKM — Kedai Kenyang Murah
   Arah desain: minimalis. Bidang putih, garis rambut 1px, sudut kecil,
   satu warna aksen (hijau pandan), banyak ruang kosong. Tanpa gradien,
   tanpa bayangan keras, tanpa emoji. Mode gelap mengikuti sistem dan bisa
   dikunci manual lewat tombol di rel kiri. */

/* ------------------------------------------------------------------ token */
/* Atribut hidden harus menang atas display apa pun — kalau tidak, lencana
   notifikasi bertuliskan "0" tetap tampil (display:inline-grid mengalahkan
   atribut hidden). */
[hidden] { display: none !important; }

:root {
  color-scheme: light;
  --bg: #fafaf8;
  --surface: #ffffff;
  --surface-2: #f4f5f4;
  --text: #17191c;
  --muted: #6d7480;
  --line: #e6e7ea;
  --line-kuat: #d5d8dd;
  --aksen: #0f7a5a;
  --aksen-lembut: #e9f4ef;
  --merah: #b3261e;
  --merah-lembut: #fdecea;
  --sorot-bg: #0f7a5a;
  --sorot-text: #ffffff;
  --teks-di-aksen: #ffffff;
  --aria: rgba(15, 122, 90, .28);
  --bayang: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --r: 10px;
  --r-kecil: 8px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --lebar-rel: 232px;
}

html[data-tema="gelap"] {
  color-scheme: dark;
  --bg: #0e1013;
  --surface: #16191d;
  --surface-2: #1d2126;
  --text: #e8eaed;
  --muted: #99a1ac;
  --line: #262b31;
  --line-kuat: #363d45;
  --aksen: #46c79c;
  --aksen-lembut: #10312a;
  --merah: #f0837c;
  --merah-lembut: #331b19;
  --sorot-bg: #46c79c;
  --sorot-text: #0e1013;
  --teks-di-aksen: #0e1013;
  --aria: rgba(70, 199, 156, .32);
  --bayang: 0 1px 2px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
  html:not([data-tema="terang"]) {
    color-scheme: dark;
    --bg: #0e1013;
    --surface: #16191d;
    --surface-2: #1d2126;
    --text: #e8eaed;
    --muted: #99a1ac;
    --line: #262b31;
    --line-kuat: #363d45;
    --aksen: #46c79c;
    --aksen-lembut: #10312a;
    --merah: #f0837c;
    --merah-lembut: #331b19;
    --sorot-bg: #46c79c;
    --sorot-text: #0e1013;
    --teks-di-aksen: #0e1013;
    --aria: rgba(70, 199, 156, .32);
    --bayang: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

/* --------------------------------------------------------------- dasar */
* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font: 400 13.5px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 14.5px; }
h3 { font-size: 13.5px; }
p { margin: 0 0 10px; }
a { color: inherit; }

.mono, .tabel .mono { font-family: var(--mono); font-size: .94em; }
.kuat { font-weight: 600; }
.aksen-merah { color: var(--merah); }
.catatan { color: var(--muted); font-size: 12.5px; }
.kosong { color: var(--muted); margin: 0; }
.kosong-rapat { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.tanda { color: var(--aksen); font-weight: 700; }
.tumpuk { display: flex; flex-direction: column; gap: 12px; }
/* Di susunan vertikal, `.medan` tidak boleh memakai basis 200px: pada flex-column
   nilai itu jadi TINGGI kotak isian (jarak antar isian melar jauh). */
.tumpuk > .medan { flex: 0 0 auto; }
.jarak-atas { margin-top: 22px; }

/* --------------------------------------------------------------- bingkai */
.bingkai { display: flex; min-height: 100vh; }

.rel {
  width: var(--lebar-rel);
  flex: 0 0 var(--lebar-rel);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px 16px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
}

.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.merek-tanda {
  display: block; object-fit: contain;
  width: 34px; height: 34px; flex: 0 0 34px;
}
.merek-teks { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.merek-teks em { color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 400; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  padding: 8px 11px;
  border-radius: var(--r-kecil);
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.aktif { background: var(--aksen-lembut); color: var(--aksen); font-weight: 600; }

.rel-kaki { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.kurs-chip {
  border: 1px solid var(--line);
  border-radius: var(--r-kecil);
  padding: 7px 10px;
  color: var(--muted);
  font-size: 11.5px;
  text-decoration: none;
  text-align: center;
}
a.kurs-chip:hover { border-color: var(--line-kuat); color: var(--text); }
.pengguna { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pengguna-nama { font-size: 13px; font-weight: 600; }
.pengguna-peran { color: var(--muted); font-size: 11.5px; }
.cap {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line-kuat);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.isi { flex: 1; min-width: 0; padding: 26px 30px 60px; max-width: 1240px; }

.kepala {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.kepala-sub { color: var(--muted); font-size: 13px; margin: 5px 0 0; }

/* ---------------------------------------------------------------- pesan */
.pesan-tumpuk { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.pesan {
  border: 1px solid var(--line-kuat);
  border-left: 3px solid var(--aksen);
  border-radius: var(--r-kecil);
  background: var(--surface);
  padding: 10px 13px;
  font-size: 13px;
}
.pesan-gagal { border-left-color: var(--merah); }
.halaman-masuk .pesan { margin-bottom: 12px; }

/* --------------------------------------------------------------- kartu */
.kartu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  padding: 18px 18px 16px;
}
.kartu + .kartu { margin-top: 16px; }
.judul-kartu { font-size: 14px; margin-bottom: 12px; }
.judul-kecil { font-size: 13px; margin: 18px 0 4px; }
.label-mikro {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.kisi { display: grid; gap: 14px; margin-bottom: 16px; }
/* Di dalam grid, jarak sudah diatur `gap`; margin ini hanya untuk kartu bertumpuk
   di luar grid — kalau ikut berlaku, kartu ke-2 dan seterusnya melorot 16px. */
.kisi > .kartu + .kartu { margin-top: 0; }
.kisi-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kisi-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kisi-4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

.kartu-angka { display: flex; flex-direction: column; gap: 6px; }
.angka { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.angka-kecil { color: var(--muted); font-size: 12px; }
.kartu-sorot { background: var(--sorot-bg); border-color: transparent; color: var(--sorot-text); }
.kartu-sorot .label-mikro, .kartu-sorot .angka-kecil { color: var(--sorot-text); opacity: .78; }

.kotak-baris { border: 1px solid var(--line); border-radius: var(--r-kecil); overflow: hidden; }
.kotak-baris-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.kotak-baris-item:last-child { border-bottom: 0; }
.kotak-baris-item.kuat { font-weight: 600; }

/* -------------------------------------------------------------- tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-kecil);
  background: var(--aksen);
  color: var(--teks-di-aksen);
  font: 500 13px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.tombol:hover { filter: brightness(1.06); }
.tombol:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.tombol-garis { background: var(--surface); border-color: var(--line-kuat); color: var(--text); }
.tombol-garis:hover { background: var(--surface-2); filter: none; }
.tombol-halus { background: transparent; border-color: transparent; color: var(--muted); }
.tombol-halus:hover { color: var(--text); background: var(--surface-2); filter: none; }
.tombol-penuh { width: 100%; }
.tombol-ikon {
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-kecil);
  background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.tombol-ikon:hover { border-color: var(--merah); color: var(--merah); }
.tautan {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--aksen);
  text-decoration: underline; text-underline-offset: 2px;
}
.tautan-bahaya { color: var(--merah); }
.dalam-baris { display: inline; }
.baris-aksi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.baris-aksi-antara {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.total-inline { align-items: flex-start; }

/* --------------------------------------------------------------- medan */
.baris-medan { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.baris-medan-atas { margin-bottom: 0; }
.medan { display: flex; flex-direction: column; gap: 5px; flex: 1 1 200px; min-width: 0; }
.medan > span { color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.medan-sempit { flex: 0 1 170px; }
.medan-angka { flex: 0 1 110px; }
.medan-lebar { flex: 1 1 280px; }
.medan-auto { flex: 0 0 auto; }

input, select, textarea {
  padding: 9px 11px;
  border: 1px solid var(--line-kuat);
  border-radius: var(--r-kecil);
  background: var(--surface);
  color: var(--text);
  font: 400 13.5px/1.3 var(--sans);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--aksen);
  box-shadow: 0 0 0 3px var(--aria);
}
.masukan-angka { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- segmen */
.segmen {
  display: inline-flex;
  border: 1px solid var(--line-kuat);
  border-radius: 999px;
  padding: 2px;
  background: var(--surface);
  gap: 2px;
}
.segmen-item {
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 500 12px/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.segmen-item:hover { color: var(--text); }
.segmen-item.aktif { background: var(--aksen-lembut); color: var(--aksen); font-weight: 600; }

/* --------------------------------------------------------------- tabel */
.gulir-tabel { overflow-x: auto; }
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: transparent;
}
.tabel th, .tabel td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tabel thead th {
  color: var(--muted);
  font: 500 10.5px/1.3 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-kuat);
  white-space: nowrap;
}
.tabel tbody tr:hover { background: var(--surface-2); }
.tabel .kol-angka { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel td.mono, .tabel th.mono { white-space: nowrap; }
.tabel .kol-no { width: 34px; color: var(--muted); }
.tabel .kol-aksi { width: 1%; text-align: right; white-space: nowrap; }
.tabel .kol-kanan { text-align: right; }
.tabel tfoot td {
  font-weight: 600;
  border-top: 1px solid var(--line-kuat);
  border-bottom: 0;
}
.tabel .baris-total td { font-weight: 600; }
.tabel-item input { padding: 7px 9px; }
.tabel-item td { padding: 6px 8px; }
.subtotal { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- total */
.total-blok {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 0 4px;
  border-top: 1px solid var(--line-kuat);
  margin-bottom: 14px;
}
.total-label { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.total-nilai { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- log */
.log { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.log-baris {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.log-detail { flex: 1 1 auto; min-width: 120px; }
.log-meta { color: var(--muted); font-size: 11.5px; }

/* ------------------------------------------------------ dokumen cetak */
.lembar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  padding: 30px 32px 26px;
  max-width: 820px;
}
.halaman-cetak { background: var(--bg); }
.isi-cetak { padding: 24px 26px 50px; }

.lembar-kepala {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--text);
}
.lembar-merek-blok { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lembar-logo { width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; }
.lembar-merek { font-size: 18px; }
.lembar-alamat { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.lembar-dokumen { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.lembar-nomor { font-family: var(--mono); font-size: 15px; }

.lembar-medan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.lembar-medan strong { font-size: 13.5px; font-weight: 600; }

.tabel-lembar { margin-top: 4px; }
.tabel-lembar thead th { border-bottom: 1px solid var(--text); color: var(--text); }
.tabel-lembar tfoot td { border-top: 2px solid var(--text); font-size: 14px; }

.lembar-terbilang { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.lembar-catatan { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.lembar-ttd { display: flex; justify-content: space-between; gap: 40px; margin-top: 34px; }
.ttd { flex: 0 0 42%; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.ttd-ruang { display: block; height: 44px; border-bottom: 1px solid var(--text); }
.lembar-kaki {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 22px; padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px;
}

/* --------------------------------------------------------------- masuk */
.halaman-masuk { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.kotak-masuk { width: 100%; max-width: 380px; }
.kartu-masuk { padding: 26px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.merek-besar .merek-tanda { width: 40px; height: 40px; flex-basis: 40px; font-size: 13px; }
.kaki-masuk { color: var(--muted); font-size: 12px; margin: 0; }

/* --------------------------------------------------------- tombol tema */
.saat-gelap { display: none; }
html[data-tema="gelap"] .saat-terang { display: none; }
html[data-tema="gelap"] .saat-gelap { display: inline; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="terang"]) .saat-terang { display: none; }
  html:not([data-tema="terang"]) .saat-gelap { display: inline; }
}

/* ---------------------------------------------------------- pita diam */
.kecil-tengah { font-size: 11px; text-align: center; margin: 0; }
.diam {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-kuat);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .14);
  font-size: 12.5px;
}
.diam[hidden] { display: none; }
.diam-teks { color: var(--text); }

/* ------------------------------------------------------------- responsif */
@media (max-width: 900px) {
  .bingkai { flex-direction: column; }
  .rel {
    width: auto; flex: 0 0 auto; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 12px 14px; gap: 12px;
  }
  .rel-kaki { flex-direction: row; align-items: center; flex-wrap: wrap; margin-top: 4px; }
  .rel-kaki .tombol-penuh { width: auto; }
  .rel-kaki form { display: flex; }
  .kurs-chip { display: none; }
  .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; }
  .nav-item { white-space: nowrap; }
  .isi { padding: 18px 16px 48px; }
  .kepala { align-items: flex-start; }
  .kepala-aksi { width: 100%; }
  .baris-medan { gap: 10px; }
  .medan, .medan-lebar, .medan-sempit, .medan-angka, .medan-auto { flex: 1 1 100%; }
  .lembar-merek-blok { gap: 10px; }
  .lembar-logo { width: 42px; height: 42px; flex-basis: 42px; }
  .kartu { padding: 15px 14px 13px; }
  .angka { font-size: 20px; }
  .lembar { padding: 18px 16px; }
  .lembar-kepala { flex-direction: column; gap: 10px; }
  .lembar-dokumen { text-align: left; }
  .lembar-ttd { flex-direction: column; gap: 22px; }
  .ttd { flex: 1 1 auto; }
}

/* ------------------------------------------------------------- cetak */
@page { size: A4; margin: 12mm; }

@media print {
  /* Paksa palet terang saat mencetak, agar tidak keluar halaman hitam. */
  :root, html[data-tema="gelap"], html:not([data-tema="terang"]) {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --surface-2: #fff;
    --text: #000; --muted: #444; --line: #bbb; --line-kuat: #888;
    --aksen: #000; --aksen-lembut: #fff; --merah: #000;
    --sorot-bg: #fff; --sorot-text: #000; --teks-di-aksen: #fff; --bayang: none;
  }
  body { background: #fff; font-size: 11.5px; }
  .rel, .kepala, .pesan-tumpuk, .baris-aksi, .segmen, .tanpa-cetak,
  .kurs-chip, .pengguna { display: none !important; }
  .bingkai { display: block; }
  .isi, .isi-cetak { padding: 0; max-width: none; }
  .kartu, .lembar {
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0; margin: 0 0 10mm; max-width: none;
  }
  .kartu-sorot { border: 1px solid #000; color: #000; }
  .gulir-tabel { overflow: visible !important; }
  .tabel { font-size: 10.5px; }
  .tabel th, .tabel td { padding: 4px 5px; }
  .tabel thead { display: table-header-group; }
  .tabel tfoot { display: table-row-group; }
  .tabel tr { break-inside: avoid; page-break-inside: avoid; }
  .tabel tbody tr:hover { background: transparent; }
  .tabel-lembar thead th { border-bottom: 1px solid #000; }
  /* Kolom tanggal (dengan penanda konversi) tetap satu baris. */
  .tabel-cetak-penuh td:first-child, .tabel-cetak-penuh th:first-child { white-space: nowrap; }
  .lembar-cetak .lembar-kaki { margin-top: 6px; padding-top: 6px; }
  .lembar-cetak .lembar-catatan { margin-top: 4px; }

  /* Nota: rapat supaya cukup separuh halaman A4. */
  .lembar { padding: 0; }
  .lembar-kepala { padding-bottom: 6px; }
  .lembar-merek { font-size: 15px; }
  .lembar-merek-blok { gap: 9px; }
  .lembar-logo { width: 15mm; height: 15mm; flex-basis: 15mm; }
  .lembar-alamat { font-size: 10.5px; }
  .lembar-nomor { font-size: 13px; }
  .lembar-medan { padding: 8px 0; gap: 8px; }
  .tabel-lembar th, .tabel-lembar td { padding: 3.5px 6px; }
  .tabel-lembar tfoot td { font-size: 12.5px; }
  .lembar-ttd { margin-top: 22px; }
  .ttd-ruang { height: 34px; }
  .lembar-terbilang, .lembar-catatan { margin-top: 6px; }
  .lembar-kaki { margin-top: 10px; padding-top: 8px; }
}

/* ================================================================= live chat */
/* Sisi staf. Balon pesan: pelanggan di kiri, kedai di kanan — sama seperti
   kebiasaan aplikasi pesan, supaya cepat dibaca saat melayani. */
.lencana {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 6px; border-radius: 999px;
  background: var(--merah); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.cap-baru, .cap-bahaya { background: var(--merah-lembut); color: var(--merah); }
.cap-dilayani { background: var(--aksen-lembut); color: var(--aksen); }
.cap-selesai { background: var(--surface-2); color: var(--muted); }

.chat-daftar { list-style: none; margin: 12px 0 0; padding: 0; }
.chat-baris {
  display: flex; gap: 12px; justify-content: space-between; align-items: center;
  padding: 11px 8px; border-bottom: 1px solid var(--line);
}
.chat-baris:last-child { border-bottom: 0; }
.chat-baris.belum { background: var(--aksen-lembut); border-radius: var(--r-kecil); }
.chat-baris-utama {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
  text-decoration: none; color: inherit;
}
.chat-nama { font-weight: 600; font-size: 14.5px; }
.chat-tel { font-size: 12.5px; color: var(--muted); }
.chat-isi {
  font-size: 13px; color: var(--muted); max-width: 60ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }

.chat-alur {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 10px; padding: 12px; min-height: 200px; max-height: 58vh; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.balon {
  max-width: min(78%, 62ch); padding: 9px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--bayang);
}
.balon-pelanggan { align-self: flex-start; border-bottom-left-radius: 4px; }
.balon-kedai {
  align-self: flex-end; background: var(--aksen-lembut);
  border-color: var(--aksen); border-bottom-right-radius: 4px;
}
.balon-isi { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.balon-meta { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.chat-tulis { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-tulis textarea { font: inherit; resize: vertical; }

/* foto kiriman: lebar tetap (bukan persentase) supaya max-content balon
   mengikuti lebar foto — dengan persentase, max-content dihitung dari ukuran
   asli gambar sehingga balon melebar sampai batas maksimum dan menyisakan
   ruang kosong. `max-width: 100%` menjaganya di panel sempit. */
.balon-foto {
  display: block; width: 260px; max-width: 100%; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.balon-foto img { display: block; width: 100%; height: auto; }
.balon-foto + .balon-isi { margin-top: 8px; }

.chat-lampir-baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-pilih { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chat-berkas-sembunyi { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 720px) {
  .balon { max-width: 92%; }
  .chat-baris { align-items: flex-start; }
  .chat-meta { text-align: right; }
  .chat-isi { max-width: 100%; white-space: normal; }
  .chat-alur { max-height: none; }

  /* Formulir balasan di layar sempit: sasaran sentuh ≥ 44 px dan tombol
     selebar baris supaya tidak salah tekan saat memakai HP. */
  .chat-tulis textarea { min-height: 96px; font-size: 16px; }   /* 16px: iOS tidak memperbesar halaman saat fokus */
  .baris-aksi-antara { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .baris-aksi-antara .tombol,
  .chat-lampir-baris .tombol { min-height: 44px; width: 100%; justify-content: center; }
  .chat-lampir-baris { align-items: stretch; }
  .chat-lampir-baris .catatan { text-align: center; }
}