/* =============================================================================
 * SOBAT NGAJI — obs.css
 * -----------------------------------------------------------------------------
 * Tampilan "PANGGILAN MASUK" untuk Browser Source OBS.
 * Dirancang untuk kanvas 1920 x 1080, memakai ukuran piksel tetap supaya
 * bentuknya sama persis di resolusi berapa pun Browser Source-nya di-set.
 *
 * ---------------------------------------------------------------------------
 * CARA PAKAI DI OBS (singkat)
 *   1. Sumber  →  +  →  Browser
 *   2. URL     :  http://localhost:5173/obs.html
 *   3. Lebar   :  1920      Tinggi :  1080
 *   4. Centang  "Refresh browser when scene becomes active"
 *   5. Selesai. Latar belakangnya SUDAH transparan — tidak perlu chroma key.
 *
 * Kalau tetap ingin memakai chroma key, tambahkan di URL:
 *   &bg=putih    → latar putih rata (#ffffff)
 *   &bg=hijau    → latar hijau rata (#00b140)
 *
 * ---------------------------------------------------------------------------
 * KENAPA TRANSPARAN LEBIH BAIK DARIPADA CHROMA KEY
 *   Chroma key membuang piksel berdasarkan KEMIRIPAN warna. Kalau latarnya
 *   putih, maka teks putih dan ikon putih di dalam kartu ikut berlubang.
 *   Latar transparan tidak punya masalah itu — OBS langsung menumpuk kartunya
 *   di atas video. Jadi: pakai transparan, chroma key cuma cadangan.
 * ========================================================================== */

/* ------------------------------------------------------------- LATAR BODY --- */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;          /* default: transparan */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body[data-bg="putih"] { background: #ffffff; }
body[data-bg="hijau"] { background: #00b140; }

/* ------------------------------------------------------- PANGGUNG / POSISI ---
 * Panggung menempel penuh ke jendela dan hanya bertugas MENEMPATKAN kartu.
 * pointer-events:none di panggung supaya area kosong tidak menutupi apa pun;
 * kartunya sendiri yang dikembalikan jadi bisa diklik (lihat .sn-call).
 * ---------------------------------------------------------------------------- */

.sn-stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 72px;
  pointer-events: none;
}

body[data-pos="bawah-kiri"]  .sn-stage { justify-content: flex-start; padding-left: 72px; }
body[data-pos="bawah-kanan"] .sn-stage { justify-content: flex-end;   padding-right: 72px; }

/* ------------------------------------------------------------------ KARTU ---
 * Dua lapis, dan pembagian tugasnya penting:
 *   .sn-call       → pembungkus. Yang dianimasikan. Tidak punya latar.
 *   .sn-call-inner → bentuk visualnya (latar, tepi, sudut, bayangan).
 *                    Memakai overflow:hidden supaya cincin avatar TIDAK
 *                    meluber keluar tepi kartu.
 *   .sn-queue      → sengaja diletakkan di LUAR .sn-call-inner, karena kalau
 *                    di dalam dia akan ikut terpotong oleh overflow:hidden.
 *
 * ---------------------------------------------------------------------------
 * GERAKAN KARTU (ini yang paling sering diatur)
 *
 *   MASUK  : kartu naik dari bawah tepi layar, sedikit melewati posisi
 *            akhirnya, lalu mengendap — seperti kartu yang diangkat dan
 *            diletakkan, bukan seperti gambar yang di-geser.
 *            Tiga hal yang dikerjakan bersamaan:
 *              transform → naik + membesar + sedikit melampaui (overshoot)
 *              opacity   → memudar masuk
 *              filter    → dari buram jadi tajam ("menemukan fokus")
 *
 *   KELUAR : kartu turun lagi ke bawah dan menjauh, dengan easing yang
 *            makin cepat di akhir — jadi terasa DIJATUHKAN, bukan sekadar
 *            dibalikkan ke atas.
 *
 * Angka pentingnya:
 *   translate 165%  = jauh dari tinggi kartu sendiri; cukup supaya benar-benar
 *                     hilang di bawah bingkai, bukan cuma mengintip.
 *   cubic-bezier(0.22, 1.28, 0.36, 1) = "pegas". Angka 1.28 itu yang membuat
 *                     kartunya sedikit melewati titik akhir sebelum mengendap.
 *                     Kalau angkanya 1.0, gerakannya jadi datar dan kaku.
 * ---------------------------------------------------------------------------- */

.sn-call {
  position: relative;
  width: 680px;

  /* Keadaan awal: tersembunyi di bawah tepi layar, agak mengecil dan buram. */
  transform: translate3d(0, 165%, 0) scale(0.9);
  opacity: 0;
  filter: blur(7px);
  transition:
    transform 0.72s cubic-bezier(0.22, 1.28, 0.36, 1),
    opacity   0.40s ease-out,
    filter    0.55s ease-out;
  will-change: transform, opacity;

  /* Hanya kartu yang bisa diklik — panggungnya tidak. */
  pointer-events: auto;
}

.sn-call-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  box-sizing: border-box;
  min-height: 160px;
  padding: 26px 32px;
  border-radius: 30px;
  overflow: hidden;

  border: 1px solid rgba(16, 185, 129, 0.42);
  box-shadow:
    0 30px 64px -20px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;

  /* Garis aksen di tepi atas dibuat sebagai LAPISAN LATAR, bukan elemen
     semu. Alasannya: latar ikut terpotong oleh border-radius, sedangkan
     elemen semu berbentuk persegi — ujungnya akan menonjol keluar dari
     sudut yang membulat. */
  background-color: rgba(6, 22, 17, 0.94);
  background-image: linear-gradient(90deg, #059669, #34d399 45%, #fbbf24);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 3px;
}

/* Muncul: naik ke posisi aslinya, sedikit melewati lalu mengendap (overshoot). */
.sn-call.is-show {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  filter: blur(0);
}

/* Keluar: memakai easing yang berbeda supaya terasa "jatuh", bukan "naik balik". */
.sn-call.is-out {
  transition:
    transform 0.46s cubic-bezier(0.45, 0, 0.85, 0.35),
    opacity   0.34s ease-in,
    filter    0.40s ease-in;
}

/* --------------------------------------------------------------- SAPUAN KILAU ---
 * Satu sapuan cahaya tipis dari kiri ke kanan, sekali saja, tepat setelah
 * kartu selesai naik. Bikin kartunya terasa "menyala" dulu sebelum tenang.
 *
 * Dipasang sebagai ::after DI DALAM .sn-call-inner, jadi ikut terpotong rapi
 * oleh border-radius kartu (elemen ini punya overflow:hidden).
 * ---------------------------------------------------------------------------- */

.sn-call-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 66%
  );
  transform: translateX(-120%);
  opacity: 0;
}

.sn-call.is-show .sn-call-inner::after {
  animation: sn-kilau 0.95s ease-out 0.20s 1;
}

@keyframes sn-kilau {
  0%   { transform: translateX(-120%); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* ------------------------------------------------------------------ AVATAR --- */

.sn-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cincin gelombang yang memancar keluar — tanda "ada panggilan".
 * Skala maksimum dibatasi 1.5. Avatar 96px di dalam padding 32px, jadi
 * cincin boleh membesar paling banyak 24px ke tiap sisi sebelum menyentuh
 * tepi kartu. Kalau lebih dari itu, cincinnya terpotong dan terlihat seperti
 * busur yang terpotong — bukan lingkaran. */
.sn-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(52, 211, 153, 0.55);
  animation: sn-ring 2.4s ease-out infinite;
}
.sn-ring.r2 { animation-delay: 0.8s; }
.sn-ring.r3 { animation-delay: 1.6s; }

@keyframes sn-ring {
  0%   { transform: scale(0.82); opacity: 0.85; }
  100% { transform: scale(1.50); opacity: 0; }
}

.sn-avatar-core {
  position: relative;
  width: 76px;
  height: 76px;
  box-sizing: border-box;
  border-radius: 9999px;
  overflow: hidden;                  /* foto ikut terpotong bulat */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #059669, #047857);
  color: #ffffff;

  /* Cincin hijau tetap di sekeliling avatar — persis kartu panggilan
     sungguhan. Dibuat dengan box-shadow, bukan border, supaya tidak
     mengubah ukuran kotaknya dan tidak mengganggu cincin gelombang
     (.sn-ring) yang memancar di lapisan luar. */
  box-shadow:
    0 0 0 3px rgba(52, 211, 153, 0.92),
    0 0 0 7px rgba(52, 211, 153, 0.13),
    0 12px 28px -10px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------- FOTO ---
 * Foto profil jamaah (kalau dia memasangnya). Menutupi ikon telepon.
 * Ditampilkan/di-sembunyikan lewat kelas .has-foto yang dipasang obs.js —
 * jadi kalau fotonya gagal dimuat, yang tampil kembali ikon telepon.
 * ---------------------------------------------------------------------------- */

.sn-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.sn-avatar-core.has-foto .sn-photo { display: block; }
.sn-avatar-core.has-foto #sn-ikon-tel { display: none; }

/* Teleponnya bergetar pelan — persis notifikasi panggilan di HP. */
.sn-call[data-state="masuk"] .sn-avatar-core svg { animation: sn-shake 1.15s ease-in-out infinite; }
.sn-call[data-state="bicara"] .sn-ring { animation-play-state: paused; opacity: 0; }
.sn-call[data-state="bicara"] .sn-avatar-core { background: linear-gradient(145deg, #10b981, #059669); }

@keyframes sn-shake {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}

/* -------------------------------------------------------------------- TEKS --- */

.sn-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sn-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Hijau = ada panggilan masuk. Warnanya sengaja sama dengan cincin avatar
     supaya kartunya terbaca sebagai satu kesatuan. */
  color: #34d399;
}
/* Kuning = mikrofonnya benar-benar sedang hidup. Dibedakan supaya penonton
   bisa membedakan "baru minta izin" dan "sedang bicara" hanya dari warnanya. */
.sn-call[data-state="bicara"] .sn-label { color: #fbbf24; }

.sn-name {
  margin: 0;
  font-size: 31px;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sn-sub {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}

/* Baris paling bawah: kecil dan redup. Fungsinya cuma memberi konteks
   ("ini panggilan suara, bukan video") — jadi jangan dibuat mencolok. */
.sn-sub2 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.36);
}

/* -------------------------------------------------------- GELOMBANG SUARA ---
 * Hanya tampil saat keadaan "bicara" — memberi tahu penonton bahwa
 * mikrofon orang ini memang sedang hidup.
 * ---------------------------------------------------------------------------- */

.sn-wave {
  display: none;
  align-items: flex-end;
  gap: 4px;
  height: 34px;
  flex: 0 0 auto;
}
.sn-call[data-state="bicara"] .sn-wave { display: flex; }

.sn-wave i {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: #34d399;
  animation: sn-wave 0.9s ease-in-out infinite;
}
.sn-wave i:nth-child(1) { animation-delay: 0s; }
.sn-wave i:nth-child(2) { animation-delay: 0.12s; }
.sn-wave i:nth-child(3) { animation-delay: 0.24s; }
.sn-wave i:nth-child(4) { animation-delay: 0.36s; }
.sn-wave i:nth-child(5) { animation-delay: 0.48s; }

@keyframes sn-wave {
  0%, 100% { height: 8px;  opacity: 0.55; }
  50%      { height: 34px; opacity: 1; }
}

/* ------------------------------------------------------------------ TOMBOL ---
 * Tombol ini bisa diklik dari dalam OBS: klik kanan sumber → "Interact".
 * Kalau tidak ingin tombolnya tampil, tambahkan &tombol=0 di URL.
 * ---------------------------------------------------------------------------- */

.sn-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
body[data-tombol="0"] .sn-actions { display: none; }

.sn-act {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.14s ease, filter 0.14s ease, opacity 0.2s ease;
}
.sn-act:hover  { transform: scale(1.07); filter: brightness(1.12); }
.sn-act:active { transform: scale(0.94); }
.sn-act[disabled] { opacity: 0.35; cursor: default; transform: none; filter: none; }

.sn-act.is-tolak  { background: #e11d48; box-shadow: 0 10px 24px -10px rgba(225, 29, 72, 0.95); }
.sn-act.is-angkat { background: #10b981; box-shadow: 0 10px 24px -10px rgba(16, 185, 129, 0.95); }

/* ------------------------------------------------------- PENANDA ANTREAN ---
 * Muncul kalau ada lebih dari satu orang menunggu.
 * ---------------------------------------------------------------------------- */

.sn-queue {
  position: absolute;
  top: -14px;
  right: -10px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 9999px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #0b1f18;
  background: #fbbf24;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.85);
}
.sn-queue.is-show { display: flex; }

/* --------------------------------------------------------- PENANDA STATUS ---
 * Kecil, di pojok kiri bawah. Berguna untuk memastikan overlay benar-benar
 * tersambung ke RTM. Menghilang sendiri 6 detik setelah tersambung.
 * Tambahkan &status=0 untuk mematikannya sejak awal.
 * ---------------------------------------------------------------------------- */

.sn-status {
  position: fixed;
  left: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(6, 22, 17, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: opacity 0.5s ease;
}
.sn-status.is-hilang { opacity: 0; }

.sn-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: #fbbf24;
  animation: sn-blink 1.2s ease-in-out infinite;
}
.sn-status[data-state="ok"]   .sn-status-dot { background: #34d399; animation: none; }
.sn-status[data-state="gagal"] .sn-status-dot { background: #f43f5e; animation: none; }

@keyframes sn-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* -------------------------------------------------------------- KURANGI GERAK ---
 * Kalau Windows/OBS di-set "kurangi animasi", hormati pilihannya.
 * ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sn-call { transition-duration: 0.01ms; }
  .sn-ring, .sn-wave i, .sn-avatar-core svg, .sn-status-dot,
  .sn-call-inner::after { animation: none; }
}