* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  background: radial-gradient(circle at 50% 20%, #2a2a4a 0%, #101020 70%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}
/* (2026-08-15) Layar dibagi 2 SEPARO -- permintaan user: foto+tombol
   dirapatkan ke atas (separo layar atas, dikecilkan), separo BAWAH
   didedikasikan penuh utk kartu info (caption) supaya jawaban SIMO
   (kerja bakti, alamat, dll) jelas terlihat besar, bukan numpang kecil
   di bawah foto spt sebelumnya. */
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 12px 16px;
  max-width: 420px;
  margin: 0 auto;
}
.top-half {
  flex: 0 0 auto;
  max-height: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bottom-half {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}
h1 {
  letter-spacing: 1px;
  font-weight: 700;
  opacity: 0.95;
  margin: 0 0 8px;
  font-size: 17px;
}
.avatar {
  position: relative;
  margin: 0 auto 10px;
  width: 100%;
  max-height: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: filter 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.avatar-photo { display: block; width: 100%; height: auto; }
.avatar.idle { opacity: 0.85; filter: grayscale(0.25); }
.avatar.listening {
  animation: pulseListen 1.4s ease-in-out infinite;
}
.avatar.speaking {
  box-shadow: 0 0 0 4px rgba(232, 114, 76, 0.55), 0 8px 30px rgba(0, 0, 0, 0.4);
}
@keyframes pulseListen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 114, 76, 0.45), 0 8px 30px rgba(0, 0, 0, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(232, 114, 76, 0), 0 8px 30px rgba(0, 0, 0, 0.4); }
}
.live-btn {
  border: none;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: #6c5ce7;
  color: white;
  transition: background 0.2s ease, transform 0.1s ease;
}
.live-btn:active { transform: scale(0.97); }
.live-btn.on { background: #e74c3c; }
.status {
  min-height: 20px;
  opacity: 0.7;
  margin: 10px 0 6px;
  font-size: 13px;
}
/* (2026-08-15) Caption jadi KARTU INFO menonjol -- permintaan user: apa
   yang dijawab SIMO (kerja bakti, alamat, dll) harus TERLIHAT JELAS di
   layar, bukan cuma teks tipis transparan spt sebelumnya. Ini tetap
   otomatis beda per HP/browser krn tiap sesi WS + caption-nya sendiri2
   (bukan fitur baru, cuma tampilannya dipertegas). */
.caption {
  min-height: 70px;
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 8px 0 16px;
}
.caption:empty {
  background: transparent;
  border-color: transparent;
  min-height: 0;
  padding: 0;
  margin: 0 0 8px;
}
.hint {
  margin: 6px 0 0;
  font-size: 12px;
  opacity: 0.5;
}
/* (2026-08-15) Overlay peta -- muncul otomatis pas SIMO jawab pertanyaan
   "rumah nomor X", tampilkan denah + titik berkedip di lokasi perkiraan
   rumah tsb (koordinat per-ZONA, lihat catatan HOUSE_ZONES di server.js --
   perkiraan area, bukan presisi piksel per rumah). */
.map-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.map-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: #1a1a2e;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.map-close-btn {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #e74c3c;
  color: white;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
}
.map-photo-wrap {
  position: relative;
}
.map-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.map-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e74c3c;
  border: 3px solid #fff;
  transform: translate(-50%, -50%);
  animation: markerBlink 0.9s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6);
}
@keyframes markerBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); opacity: 1; }
  50% { box-shadow: 0 0 0 12px rgba(231, 76, 60, 0); opacity: 0.6; }
}