/* ============================================================
   BeBeRest COZY SIM — RONDE 8: Structural mobile header rebuild
   (2026-10-14, brief resmi Bos via Nuna bus 9221, WhatsApp 15:16 WIB
   setelah Bos melihat hasil ronde 7 di HP)

   LAPIS DI ATAS v66 + r6 + r7. Dimuat SETELAH r7_gamehud.css.
   Dipasangkan dengan r8_header_mobile_v1.js (wajib; dimuat SETELAH
   r7_menu_v1.js). Tanpa JS tersebut halaman = v66 + r6 + r7
   apa adanya (aman — bar r8 mati default).

   CARA BARU (Q2/Q3): pendekatan override CSS untuk header mobile
   DINYATAKAN GAGAL dan BERHENTI di ronde ini. Sebagai gantinya:
   - Di mobile (<=1000px) #header warisan disembunyikan TOTAL
     (display:none) -> seluruh override r6/r7 yang menarget header
     lama menjadi INERT, tidak ada perang cascade.
   - r8_header_mobile_v1.js membangun DUA BAR MELAYANG baru dan
     MENGISI keduanya dengan ELEMEN ASLI yang DIPINDAH (reparent
     node, pola floor_select_v1.js): ID, handler, badge, dan logika
     tetap asli — tanpa kloning fungsi, tanpa logika baru.
       Bar 1: #brand (avatar + judul) | #bInbox (badge) | #bTasks (badge)
       Bar 2: #bCmd (search pill full-width) + #r6-filter-btn (ikon
              filter di dalam pil, kanan)
     #sceneStatus (anak #header yang position:fixed) ikut dipindah
     keluar #header supaya tetap hidup; saat kembali ke desktop
     semua node dikembalikan.

   Q4 — aturan r6/r7 yang DINETRALKAN (daftar lengkap di r8_CATATAN.md):
   seluruh blok `body.ui.r6m #header ...` (r6) dan
   `body.ui.r6m.r7m #header ...` + `#r7-searchwrap` (r7) menjadi inert
   via display:none; `#sceneStatus` & `#r6-filter.open` (r7) di-repoint
   ke tinggi header baru; blok `.camctl` r6/r7 diganti SATU blok r8.

   Q5 — pil zoom mobile: HANYA + / - + garis pemisah (satu blok
   otoritatif, menutup perang cascade r6 vs r7). Putar & Atur-ulang
   tetap di seksi KAMERA panel Menu r7 (tidak disentuh).

   Arsitektur: semua aturan visual mobile dikunci di balik class
   body.r8m (di samping r6m/r7m), dipasang r8_header_mobile_v1.js
   hanya saat matchMedia mobile cocok DAN operasi r6/r7 selesai.
   Desktop (min-width:1001px): NOL aturan — file ini tidak menyentuh
   desktop sama sekali. presence_v1.js/css, floor_select_v1.js,
   minimize_v2.js TIDAK diubah. XP bar tetap TIDAK dipasang.

   Tumpukan mobile (viewport 390x844, safe=0):
     #r8-bar1     : top 8,   tinggi 44  (8..52)
     #r8-bar2     : top 60,  tinggi 44  (60..104)  <- header baru total 104px
     #sceneStatus : top 120 (kapsul mini, fungsi tak berubah)
     #r6-filter   : top 120 saat open (panel Menu r7, 4 seksi, tak berubah)
     .camctl     : pil vertikal + / - (posisi r6/r7 tak berubah)
     bawah        : sheet kru, strip chip, bottom nav — TAK DISENTUH
   ============================================================ */

/* ---- bar r8 mati default (aman di semua viewport & tanpa JS) ---- */
body.ui #r8-bar1,
body.ui #r8-bar2 { display: none; }

@media (max-width: 1000px) {
  body.ui.r6m.r7m.r8m {
    /* Q6: 8 (margin atas) + 44 (bar1) + 8 (jarak) + 44 (bar2) = 104px */
    --r8-head-h: 104px;
    overflow-x: hidden;  /* garansi: tanpa overflow horizontal */
  }

  /* ================= Q2/Q4. HEADER WARISAN DISEMBUNYIKAN TOTAL =================
     Satu aturan ini menetralkan SELURUH override r6/r7 untuk header
     mobile lama (daftar di r8_CATATAN.md): elemen tidak di-render,
     jadi tidak ada perang cascade dengan struktur baru. */
  body.ui.r6m.r7m.r8m #header { display: none !important; }

  /* ================= Q3. DUA BAR MELAYANG BARU =================
     Tanpa kartu pembungkus — dua bar independen, melayang rapat. */
  body.ui.r6m.r7m.r8m #r8-bar1,
  body.ui.r6m.r7m.r8m #r8-bar2 {
    display: flex; position: fixed; left: 8px; right: 8px; z-index: 90;
    align-items: center; min-width: 0;
    background: linear-gradient(180deg, var(--card), var(--parch));
    border: 2.5px solid var(--wood); border-radius: 18px;
    box-shadow: var(--sh-panel);
    padding: 6px 8px;  /* simetris, <=10px (Q6) */
    gap: 6px;
  }
  body.ui.r6m.r7m.r8m #r8-bar1 { top: 8px; min-height: 44px; }
  body.ui.r6m.r7m.r8m #r8-bar2 { top: 60px; min-height: 44px; }

  /* ---- BAR 1: avatar lingkaran + judul | pil Inbox berbadge | tombol Tugas berbadge ---- */
  body.ui.r6m.r7m.r8m #r8-bar1 #brand {
    order: 1; flex: none; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
  }
  body.ui.r6m.r7m.r8m #r8-bar1 #brand .brand-mark {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  body.ui.r6m.r7m.r8m #r8-bar1 #brand .brand-name { display: block; min-width: 0; }
  body.ui.r6m.r7m.r8m #r8-bar1 #brand .brand-name strong {
    font-family: var(--fh); font-size: 16px; color: var(--wood-d);
    white-space: nowrap; display: block; line-height: 1.15;
  }
  body.ui.r6m.r7m.r8m #r8-bar1 #brand .brand-meta,
  body.ui.r6m.r7m.r8m #r8-bar1 #brand .brand-tagline { display: none; }

  body.ui.r6m.r7m.r8m #r8-bar1 #bInbox,
  body.ui.r6m.r7m.r8m #r8-bar1 #bTasks {
    flex: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 5px 11px; margin: 0;
    font-family: var(--fe); font-size: 11.5px; font-weight: 800; color: var(--ink);
    border: 2.5px solid var(--wood); border-radius: 999px;
    background: linear-gradient(180deg, #FFFDF4, #F1E2BC);
    box-shadow: 0 3px 0 var(--wood-d);
    position: relative;
  }
  body.ui.r6m.r7m.r8m #r8-bar1 #bInbox:active,
  body.ui.r6m.r7m.r8m #r8-bar1 #bTasks:active { transform: translateY(2px); box-shadow: none; }
  body.ui.r6m.r7m.r8m #r8-bar1 #bInbox { order: 2; margin-left: auto; }
  body.ui.r6m.r7m.r8m #r8-bar1 #bTasks {
    order: 3;
    background: linear-gradient(180deg, #FFD968, var(--gold));
    border-color: #8a5a1d; color: #4A2F0E;
  }
  /* badge amber ala mockup; sembunyi bila kosong */
  body.ui.r6m.r7m.r8m #r8-bar1 #inboxCount,
  body.ui.r6m.r7m.r8m #r8-bar1 #taskCount {
    background: var(--gold); border: 2px solid #8a5a1d; color: #4A2F0E;
    border-radius: 999px; font-family: var(--fe);
    font-size: 10px; font-weight: 800; padding: 1px 6px; line-height: 1.4;
    min-width: 18px; text-align: center;
  }
  body.ui.r6m.r7m.r8m #r8-bar1 #inboxCount:empty,
  body.ui.r6m.r7m.r8m #r8-bar1 #taskCount:empty { display: none; }

  /* ---- BAR 2: pil search full-width + ikon filter di dalam kanan ---- */
  body.ui.r6m.r7m.r8m #r8-bar2 #bCmd {
    flex: 1 1 auto; min-width: 0; margin: 0;
    display: flex; align-items: center; gap: 8px; justify-content: flex-start;
    min-height: 34px; padding: 5px 42px 5px 14px;
    font-family: var(--fe); font-size: 12.5px; color: var(--ink-soft);
    border: 2.5px solid var(--wood); border-radius: 999px;
    background: #FFFDF4;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .10), 0 3px 0 var(--wood-d);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  body.ui.r6m.r7m.r8m #r8-bar2 #bCmd kbd { display: none; }
  body.ui.r6m.r7m.r8m #r8-bar2 #bCmd > span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.ui.r6m.r7m.r8m #r8-bar2 #r6-filter-btn {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%; padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2.5px solid var(--wood);
    background: linear-gradient(180deg, #FFFDF4, #F1E2BC);
    box-shadow: 0 2px 0 var(--wood-d);
    font-size: 15px; flex: none;
  }
  body.ui.r6m.r7m.r8m #r8-bar2 #r6-filter-btn:active { transform: translateY(calc(-50% + 2px)); box-shadow: none; }
  body.ui.r6m.r7m.r8m #r8-bar2 #r6-filter-btn .lb { display: none; }
  body.ui.r6m.r7m.r8m #r8-bar2 #r6-filter-btn .ic { font-size: 15px; line-height: 1; }

  /* ================= Q4. RE-POINT: kapsul status & panel Menu =================
     Mengikuti tinggi header baru (104px). Menang atas r7 (1,3,0). */
  body.ui.r6m.r7m.r8m #sceneStatus {
    top: calc(8px + var(--r8-head-h) + 8px);  /* = 120px */
  }
  body.ui.r6m.r7m.r8m #r6-filter.open {
    top: calc(8px + var(--r8-head-h) + 8px);  /* = 120px */
  }

  /* ================= Q5. PIL ZOOM: SATU BLOK OTORITATIF =================
     Hanya + / - + garis pemisah (.r7-sep buatan r7). Putar & Atur-ulang
     tetap di seksi KAMERA panel Menu r7 (tidak disentuh).
     Spesifisitas (0,5,0) > r7 (0,4,0) > r6 (0,3,0) > v66 (0,2,0):
     perang cascade r6 vs r7 untuk .camctl DITUTUP di sini. */
  body.ui.r6m.r7m.r8m .camctl {
    position: fixed; right: 8px; left: auto; top: auto;
    bottom: calc(8px + var(--r6-nav-h) + 8px + var(--r6-sheet-h) + 8px + var(--r6-chip-h) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 40; display: flex; flex-direction: column; align-items: stretch;
    gap: 0; padding: 6px 5px; border-radius: 999px;
    background: linear-gradient(180deg, var(--parch), var(--parch-d));
    border: 2.5px solid var(--wood); box-shadow: var(--sh-panel);
  }
  body.ui.r6m.r7m.r8m .camctl .btn {
    width: 40px; height: 44px; border: 0; box-shadow: none; background: none;
    border-radius: 12px; font-size: 20px; padding: 0; margin: 0; min-height: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
  }
  body.ui.r6m.r7m.r8m .camctl .btn:active { transform: none; box-shadow: none; }
  body.ui.r6m.r7m.r8m .camctl .r7-sep {
    display: block; height: 2px; margin: 3px 11px; border-radius: 2px;
    background: rgba(107, 66, 38, .35);
  }
}

/* HP kecil (<=640px): judul brand TETAP tampil (mockup), baris 1 dirapatkan.
   Menang atas v66 `body.ui #brand .brand-name{display:none}` (0,2,1). */
@media (max-width: 640px) {
  body.ui.r6m.r7m.r8m #r8-bar1 #brand .brand-name { display: block; }
  body.ui.r6m.r7m.r8m #r8-bar1 { gap: 5px; padding: 6px 7px; }
  body.ui.r6m.r7m.r8m #r8-bar1 #bInbox,
  body.ui.r6m.r7m.r8m #r8-bar1 #bTasks { padding: 5px 9px; font-size: 11px; }
}