/* Kartu pemberitahuan di bawah kepala, dan daftarnya yang melayang.

   Dua hal di berkas ini yang gampang dirusak tanpa sadar, dan keduanya sudah
   pernah merusak layar:

   1. Kartu ini anak langsung .rangka - lajur tegak yang anaknya boleh
      muncul-hilang. Ia TIDAK boleh diberi position: sticky atau tinggi tetap;
      yang menjaga isi layar tetap bisa digulung adalah .rangka__isi, dan bar
      yang ikut mengklaim tinggi membuat kotak itu kehilangan sisanya.
   2. Daftar yang membentang MELAYANG (position: fixed), bukan mendorong. Isi
      layar yang bergeser turun tiap kali sebuah pengingat lahir membuat jari
      yang sudah bergerak menekan barang yang salah. */

.notifbar {
  position: relative;
  display: flex;
  flex: none;
  align-items: stretch;
  gap: 0;
  margin: 8px var(--sela) 0;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: visible;
}

.notifbar__isi {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 4px 8px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Titiknya memakai .titik beserta warnanya dari style/base.css - satu daftar
   warna untuk seluruh aplikasi, bukan warna kedua yang artinya mirip-mirip.
   Yang ditulis di sini cuma letaknya. */

.notifbar__teks {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.notifbar__judul {
  font-size: 0.8125rem;
  font-weight: 600;
}

.notifbar__ket,
.notifbar__angka {
  color: var(--tinta-redup);
  font-size: 0.75rem;
}

/* Satu baris saja, apa pun panjang isinya: bar yang tingginya berubah-ubah
   menggeser seluruh layar tiap kali pemberitahuan baru datang. */
.notifbar__judul,
.notifbar__ket {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notifbar__angka {
  flex: 0 0 auto;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--utama);
  color: var(--utama-tinta);
  font-size: 0.6875rem;
  font-weight: 700;
}

.notifbar__tutup,
.notif__tutup {
  flex: none;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--tinta-redup);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.notifbar__tutup:hover,
.notif__tutup:hover {
  color: var(--tinta);
}

/* ---------- daftar yang membentang ---------- */

.notif__latar {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.35);
}

/* Menempel tepat di bawah bar yang barusan ditekan - digantung DI DALAM bar,
   jadi tidak ada yang perlu menghitung tinggi kepala dan tidak ada angka tetap
   yang harus ikut diubah kalau kepalanya berubah tinggi.

   Di layar lebar ia tidak ikut melebar: daftar sepanjang layar 900px membuat
   mata menyeberang jauh untuk membaca satu baris pendek. */
.notif__lapis {
  position: absolute;
  z-index: 41;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: min(460px, calc(100vw - var(--sela) - var(--sela)));
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 620px);
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.notif__kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--garis);
}

.notif__nama {
  font-weight: 650;
}

.notif__semua {
  padding: 0;
  border: 0;
  background: none;
  color: var(--utama);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.notif__gulir {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.notif__baris {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--garis);
}

.notif__baris:last-child {
  border-bottom: 0;
}

.notif__butir {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 10px 4px 10px 12px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notif__titik {
  margin-top: 5px;
}

.notif__teks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif__judul {
  font-size: 0.875rem;
  font-weight: 600;
  word-break: break-word;
}

.notif__ket {
  font-size: 0.8125rem;
  color: var(--tinta-redup);
  word-break: break-word;
}

.notif__kaki {
  font-size: 0.6875rem;
  color: var(--tinta-redup);
}

.notif__tutup {
  padding: 10px 12px;
}