/* The chat room. One column the height of the screen: who you are talking
   to, the conversation, and where you write. */
html, body.ruang { height: 100%; }
body.ruang { background: var(--kertas); overflow: hidden; }
.app {
  height: 100dvh; max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--kanvas);
}

.atas { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--kertas); border-bottom: 2px solid var(--tinta); }
/* Who the conversation is with is a button: it opens the sheet to change. */
.tokoh { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; padding: 3px 12px 3px 3px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tokoh:hover { background: var(--kanvas); }
.tokoh img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--tinta); object-fit: cover; flex: none; }
.balik { display: inline-flex; padding: 6px; border-radius: 50%; flex: none; }
.balik:hover { background: var(--kanvas); }
.nama { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nama strong { font-family: var(--judul); font-weight: 800; font-size: 1.3rem; display: inline-flex; align-items: center; gap: 4px; }
.nama strong svg { flex: none; opacity: .6; }
.nama span { font-size: .78rem; color: var(--samar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pil { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 600 .82rem/1 var(--isi); padding: 8px 12px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--kertas); color: var(--tinta); cursor: pointer; white-space: nowrap; }
.pil:hover { background: var(--kanvas); }
.pil svg { flex: none; }
.pil[aria-pressed="true"] { background: var(--kuning); }
.pil[aria-pressed="false"] svg { opacity: .45; }
.pil.saldo { background: var(--kuning); font-variant-numeric: tabular-nums; }
.pil.saldo:hover { background: var(--jingga); }

.pita { margin: 0; padding: 10px 16px; background: var(--kuning); border-bottom: 2px solid var(--tinta); font-size: .92rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pita[hidden] { display: none; }
.pita span { flex: 1 1 14rem; min-width: 0; }
.pita button { flex: none; font: 700 .86rem/1 var(--isi); padding: 8px 14px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--kertas); color: var(--tinta); cursor: pointer; }
.pita button:hover { background: var(--kanvas); }

.pesan { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.gelembung { max-width: min(86%, 30rem); padding: 11px 15px; border-radius: 18px; border: 2px solid var(--tinta); overflow-wrap: anywhere; }
.gelembung.rara { align-self: flex-start; background: var(--kertas); border-bottom-left-radius: 5px; display: flex; flex-direction: column; gap: 8px; }
.gelembung.kamu { align-self: flex-end; background: var(--tinta); color: var(--kertas); border-bottom-right-radius: 5px; white-space: pre-wrap; }
.dengar { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font: 700 .84rem/1 var(--isi); padding: 8px 12px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--jingga); color: var(--tinta); cursor: pointer; }
.dengar:hover { background: var(--kuning); }
.dengar[disabled] { cursor: progress; background: var(--kanvas); }
.dengar svg { flex: none; }
.gagal { font-size: .82rem; color: #b3261e; margin: 0; }
/* Under a reply that was looked up: that it was, and what it cost. Google's
   own search suggestion follows it, drawn in a box of its own. */
.cek { font-size: .8rem; font-weight: 600; color: var(--samar); margin: 0; }
.mengetik { align-self: flex-start; display: inline-flex; gap: 5px; padding: 14px 16px; border-radius: 18px; border: 2px solid var(--tinta); border-bottom-left-radius: 5px; background: var(--kertas); }
.mengetik i { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); opacity: .35; animation: kedip 1.1s infinite; }
.mengetik i:nth-child(2) { animation-delay: .18s; }
.mengetik i:nth-child(3) { animation-delay: .36s; }
@keyframes kedip { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.putar { animation: putar .9s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

.tulis { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 6px; background: var(--kertas); border-top: 2px solid var(--tinta); }
.tulis textarea { flex: 1; min-width: 0; resize: none; max-height: 8.5rem; font: 500 1rem/1.45 var(--isi); color: var(--tinta); padding: 11px 14px; border-radius: 20px; border: 2px solid var(--tinta); background: var(--kanvas); }
.tulis textarea::placeholder { color: var(--samar); }
.bulat { width: 46px; height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--tinta); background: var(--kertas); color: var(--tinta); cursor: pointer; }
.bulat:hover { background: var(--kanvas); }
.bulat.kirim { background: var(--jingga); }
.bulat.kirim:hover { background: var(--kuning); }
.bulat[disabled] { opacity: .5; cursor: not-allowed; }
.bulat[aria-pressed="true"] { background: var(--merah-jambu); }
.catatan { margin: 0; padding: 0 14px 8px; background: var(--kertas); font-size: .74rem; color: var(--samar); text-align: center; }

.gerbang { border: 2px solid var(--tinta); border-radius: 24px; padding: 0; width: min(92vw, 25rem); box-shadow: 0 8px 0 var(--tinta); color: var(--tinta); background: var(--kertas); }
.gerbang::backdrop { background: rgba(27, 30, 69, .55); }
.gerbang form { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; }
.gerbang img { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--tinta); align-self: center; object-fit: cover; }
.gerbang h1 { font-weight: 800; font-size: 1.6rem; text-align: center; }
.gerbang p { color: var(--samar); font-size: .94rem; text-align: center; }
.gerbang label { font-weight: 600; font-size: .92rem; margin-top: 6px; }
.gerbang label span { font-weight: 400; color: var(--samar); }
.gerbang input[type="text"] { font: 500 1rem/1.3 var(--isi); padding: 11px 13px; border-radius: 12px; border: 2px solid var(--tinta); background: var(--kanvas); color: var(--tinta); width: 100%; }
.gerbang .centang { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.gerbang .centang input { width: 20px; height: 20px; accent-color: var(--jingga); flex: none; }
.gerbang .salah { color: #b3261e; font-weight: 600; text-align: left; }
.gerbang .tombol { margin-top: 8px; }
.gerbang .kecil { font-size: .84rem; }
.gerbang .kecil a { font-weight: 600; }
.gerbang .petunjuk { text-align: left; color: var(--tinta); background: var(--kuning); border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 12px; font-size: .88rem; font-weight: 600; }

/* Choosing who to talk to: a row each, the face, the name, the way of
   talking, and a button that plays the greeting. */
.orang-orang { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.orang-orang li { display: flex; align-items: center; gap: 8px; }
.gerbang .orang { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; margin: 0; padding: 7px 12px 7px 7px; border-radius: 18px; border: 2px solid var(--tinta); background: var(--kanvas); cursor: pointer; }
.gerbang .orang.terpilih { background: var(--kuning); box-shadow: 0 3px 0 var(--tinta); }
.gerbang .orang:has(input:focus-visible) { outline: 3px solid var(--biru-muda); outline-offset: 3px; }
.orang input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gerbang .orang img { width: 56px; height: 56px; align-self: auto; flex: none; }
.siapanya { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gerbang .siapanya strong { font-family: var(--judul); font-weight: 800; font-size: 1.2rem; }
.gerbang .siapanya span { font-weight: 500; font-size: .86rem; color: var(--samar); }
.gerbang .orang.terpilih .siapanya span { color: var(--tinta); }
.orang-orang .dengar { align-self: center; flex: none; }
.gerbang .tombol.polos { margin-top: 0; }

/* The balance, the packs and the way out: one sheet behind the balance pill. */
.lembar { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; max-height: 88dvh; overflow-y: auto; }
.lembar .angka { color: var(--tinta); font-size: 1.05rem; }
.lembar .angka strong { font-family: var(--judul); font-weight: 800; font-size: 2.4rem; line-height: 1; }
.paket { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.paket .kosong { color: var(--samar); text-align: center; padding: 10px 0; }
.pilih { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--tinta); background: var(--kanvas); color: var(--tinta); cursor: pointer; font: 500 .92rem/1.35 var(--isi); box-shadow: 0 3px 0 var(--tinta); }
.pilih:hover { background: var(--kuning); }
.pilih:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }
.pilih[disabled] { opacity: .55; cursor: progress; }
.pilih .apa { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pilih .apa strong { font-weight: 700; }
.pilih .apa span { color: var(--samar); font-size: .84rem; }
.pilih .rupiah { flex: none; font-family: var(--judul); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.ingatan { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--kanvas); border: 2px solid var(--tinta); border-radius: 16px; padding: 12px 14px; }
.gerbang .ingatan h2 { font-family: var(--judul); font-weight: 800; font-size: 1.05rem; }
.gerbang .ingatan p { text-align: left; color: var(--tinta); font-size: .9rem; }
.gerbang .ingatan .kecil { color: var(--samar); font-size: .8rem; }
.lembar .akun { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: .86rem; overflow-wrap: anywhere; margin-top: 4px; }
.tautan { font: 600 .86rem/1 var(--isi); color: var(--tinta); background: none; border: 0; padding: 4px 2px; text-decoration: underline; cursor: pointer; }

/* The header holds three buttons beside the name, and the column is never
   wider than 46rem. Below that width the two that switch things are their
   pictures; the words stay for screen readers. The balance always shows its
   number. */
@media (max-width: 720px) {
  .pil { padding: 9px; }
  .pil.saldo { padding: 9px 11px; }
  .pil .tulisan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 560px) {
  .atas { gap: 8px; padding-inline: 10px; }
}
/* A small phone: the sheets are tightened so that the button that closes
   them is on screen without scrolling inside the sheet (measured at 320 by
   640: "Mulai ngobrol" sat below the edge). */
@media (max-width: 400px), (max-height: 700px) {
  .gerbang { width: min(94vw, 25rem); max-height: calc(100dvh - 16px); }
  .gerbang form, .lembar { padding: 16px; gap: 8px; }
  .gerbang h1 { font-size: 1.35rem; }
  .gerbang p { font-size: .88rem; }
  .gerbang .kecil { font-size: .8rem; }
  .gerbang > form > img { width: 56px; height: 56px; }
  .orang-orang { gap: 8px; }
  .gerbang .orang { padding: 5px 10px 5px 5px; gap: 10px; }
  .gerbang .orang img { width: 44px; height: 44px; }
  .gerbang .siapanya strong { font-size: 1.08rem; }
  .gerbang .tombol { padding-block: 12px; margin-top: 4px; }
}
/* On the narrowest phones the picture gives way to the balance. */
@media (max-width: 380px) {
  .tokoh { padding-left: 8px; }
  .tokoh img { display: none; }
}