/* ============================================================
   BeBeRest COZY SIM — RONDE 7: Mobile layout revision setia mockup
   (2026-10-14, brief resmi Bos via Nuna bus 9149)

   LAPIS OVERRIDE di atas v66 + r6 (gamehud.css v6.4, r6_gamehud.css).
   Dimuat SETELAH r6_gamehud.css. Dipasangkan dengan r7_menu_v1.js
   (wajib; dimuat SETELAH r6_nav_v1.js).

   Isi: menyamakan bahasa layout/posisi/proporsi mobile ke gambar
   referensi resmi ref_mobile_first_target.jpg — BUKAN menambah fungsi.
   Tiga deviasi sadar ronde 6 DINYATAKAN BATAL oleh brief ronde 7:
     (1) bar lantai ronde 5 DIHAPUS di mobile (fungsi pindah ke panel Menu),
     (2) tombol Menu DIHAPUS dari header (pintu satu-satunya = nav bawah),
     (3) pil zoom HANYA + / - (Putar & Atur-ulang pindah ke panel Menu).

   Arsitektur: file override kecil. Risiko regresi desktop nol karena:
     1. Semua aturan visual r7 ada di dalam @media (max-width:1000px),
        kecuali 1 aturan "mati default" (display:none) yang aman di semua
        viewport.
     2. Semua aturan visual mobile dikunci di balik class body.r7m yang
        hanya dipasang r7_menu_v1.js saat matchMedia mobile cocok
        (dan dicabut + DOM dipulihkan saat kembali ke desktop).
   Tanpa r7_menu_v1.js / tanpa JS: halaman = v66 + r6 apa adanya (aman).
   presence_v1.js/css, floor_select_v1.js, minimize_v2.js TIDAK diubah —
   dipakai apa adanya. XP bar tetap TIDAK dipasang.

   Tumpukan mobile final (dari bawah, viewport 390x844, safe=0):
     #r6-nav      : bottom 8,              tinggi 64   (8..72)
     .crew-panel  : bottom 80, collapsed 54 (80..134); expanded max 52dvh
     #controls    : bottom 142, chips ~58  (142..200)
     .camctl     : bottom 212, pil vertikal + / - (+ garis pemisah)
     #followBar   : bottom 208
     #sceneStatus : top 120 (di bawah header ramping, tak berubah fungsi)
     #header      : top 8,  tinggi ~104    (8..112) — 2 baris ala mockup
     #sideLeft    : DISEMBUNYIKAN di mobile r7 (display:none)
   Panel #r6-filter (dikembangkan jadi Menu/filter): fixed di bawah
   header (top 120), z 95, max 60dvh scroll.
   Dunia (#c) mengisi sisanya: ~112..636 = +/-524px = ~62% viewport.
   ============================================================ */

/* ---- elemen r7 mati default (aman di semua viewport & tanpa JS) ---- */
body.ui #r6-filter .r7-sec,
body.ui .r7-nbadge,
body.ui .r7-sep,
body.ui .r7-crew-ic { display: none; }

@media (max-width: 1000px) {
  body.ui.r6m.r7m {
    --r7-head-h: 104px;  /* tinggi header 2 baris ala mockup */
    overflow-x: hidden;  /* garansi: tanpa overflow horizontal */
  }

  /* ================= P2. HEADER 2 BARIS PERSIS MOCKUP =================
     Baris 1: avatar lingkaran + judul tebal + pil Inbox berbadge +
     tombol ikon Tugas berbadge (satu bar melayang). Tombol Menu SUDAH
     PINDAH ke panel (r7_menu_v1.js) — tidak ada lagi di header.
     Baris 2: search pill full-width + ikon sliders DI DALAM pil kanan. */
  body.ui.r6m.r7m #header {
    top: 8px; left: 8px; right: 8px;
    padding: 8px 10px; gap: 8px; flex-wrap: wrap; align-items: center;
  }
  body.ui.r6m.r7m #brand { order: 1; flex: none; }
  body.ui.r6m.r7m #brand .brand-mark { width: 34px; height: 34px; }
  body.ui.r6m.r7m #brand .brand-name { display: block; }
  body.ui.r6m.r7m #brand .brand-name strong { font-size: 17px; }
  body.ui.r6m.r7m #bInbox { order: 2; flex: none; margin-left: auto; }
  body.ui.r6m.r7m #bTasks { order: 3; flex: none; }
  body.ui.r6m.r7m #header > #bInbox,
  body.ui.r6m.r7m #header > #bTasks {
    min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; font-size: 12px; border-radius: 999px;
    border-width: 2.5px; position: relative; white-space: nowrap;
  }
  body.ui.r6m.r7m #header > #bTasks { border-radius: 12px; }
  /* badge amber ala mockup (aturan inert bila markup tak punya badge) */
  body.ui.r6m.r7m #bInbox .badge, body.ui.r6m.r7m #bTasks .badge,
  body.ui.r6m.r7m #bInbox .bdg, body.ui.r6m.r7m #bTasks .bdg,
  body.ui.r6m.r7m #bInbox [class*="badge"], body.ui.r6m.r7m #bTasks [class*="badge"] {
    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;
  }
  /* baris 2: pembungkus search (dibuat r7_menu_v1.js) */
  body.ui.r6m.r7m #r7-searchwrap {
    order: 6; flex: 1 1 100%; min-width: 0;
    position: relative; display: flex; margin: 0;
  }
  body.ui.r6m.r7m #r7-searchwrap #bCmd {
    flex: 1 1 auto; min-width: 0; min-height: 40px; padding-right: 46px;
  }
  body.ui.r6m.r7m #r7-searchwrap #r6-filter-btn {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%; padding: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-width: 2.5px;
  }
  body.ui.r6m.r7m #r7-searchwrap #r6-filter-btn .lb { display: none; }
  body.ui.r6m.r7m #r7-searchwrap #r6-filter-btn .ic { font-size: 16px; line-height: 1; }

  /* ================= PANEL MENU/FILTER (kembangan #r6-filter) =================
     Satu pintu untuk: Menu (daftar hud-dropdown), Lantai (#m-floor-sel),
     Kamera (Putar/Atur-ulang), Persetujuan (#fz1-appr-btn), + isi filter
     r6 (select inisial, chip hari/musim/cuaca/jam, crewstack). */
  body.ui.r6m.r7m #r6-filter.open {
    top: calc(8px + var(--r7-head-h) + 8px);
    max-height: calc(100dvh - 230px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.ui.r6m.r7m #r6-filter .r7-sec { display: block; margin: 0 0 12px; }
  body.ui.r6m.r7m #r6-filter .r7-sec-t {
    font-family: var(--fe); font-size: 10.5px; font-weight: 800;
    letter-spacing: 2px; color: var(--ink-soft); margin: 0 2px 6px;
  }
  body.ui.r6m.r7m #r6-filter .r7-row { display: flex; gap: 8px; }
  body.ui.r6m.r7m #r6-filter .r7-row .btn { flex: 1 1 0; min-width: 0; }
  /* seksi MENU: tombol pemicu disembunyikan, daftar selalu tampil */
  body.ui.r6m.r7m #r6-filter .menuwrap > .btn { display: none; }
  body.ui.r6m.r7m #r6-filter .hud-dropdown {
    position: static; display: block; width: auto; max-width: none; margin: 0;
    border: 0; box-shadow: none; background: none; padding: 0;
  }
  /* seksi LANTAI: dropdown native ronde 5, gaya disamakan panel */
  body.ui.r6m.r7m #r6-filter #m-floor-sel {
    display: block; width: 100%; height: 42px; padding: 8px 34px 8px 12px;
    font-family: var(--fe); font-size: 14px; font-weight: 700; color: var(--wood-d);
    background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a5a1d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 2.5px solid var(--wood); border-radius: 12px;
    box-shadow: 0 2px 0 var(--wood-d);
    appearance: none; -webkit-appearance: none;
  }
  /* seksi KAMERA: teks asli dikembalikan (glyph hanya untuk pil) */
  body.ui.r6m.r7m #r6-filter #bRotate,
  body.ui.r6m.r7m #r6-filter #bReset {
    font-size: 13px; width: auto; height: auto; padding: 9px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #FFFDF4, #F1E2BC);
    border: 2.5px solid var(--wood); box-shadow: 0 3px 0 var(--wood-d);
    font-family: var(--fe); color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
  }
  body.ui.r6m.r7m #r6-filter #bRotate::after,
  body.ui.r6m.r7m #r6-filter #bReset::after { content: none; }
  /* seksi PERSETUJUAN: tombol penuh, badge hitung tetap dari presence */
  body.ui.r6m.r7m #r6-filter #fz1-appr-btn {
    width: 100%; padding: 10px 12px; font-size: 13px; text-align: center;
    background: linear-gradient(180deg, #FFFDF4, #F1E2BC);
    border: 2.5px solid var(--wood); border-radius: 12px;
    box-shadow: 0 3px 0 var(--wood-d);
    font-family: var(--fe); font-weight: 800; color: var(--ink);
  }
  body.ui.r6m.r7m #r6-filter #fz1-appr-btn.has {
    background: linear-gradient(180deg, #FFD968, #E8A33D);
  }

  /* ================= P4. BAR LANTAI TERPISAH DIHAPUS (MOBILE) =================
     #sideLeft display:none; #m-floor-sel & #fz1-appr-btn sudah pindah ke
     panel Menu (r7_menu_v1.js). Fungsi pindah lantai tidak berubah. */
  body.ui.r6m.r7m #sideLeft { display: none !important; }

  /* kapsul status naik mengikuti header ramping (bar lantai sudah tiada) */
  body.ui.r6m.r7m #sceneStatus { top: calc(8px + var(--r7-head-h) + 8px); }

  /* ================= P3. PIL ZOOM: HANYA + / - =================
     Putar & Atur-ulang pindah ke panel Menu (tidak hilang). */
  body.ui.r6m.r7m .camctl { gap: 0; padding: 6px 5px; }
  body.ui.r6m.r7m .camctl .btn {
    width: 40px; height: 44px; border: 0; box-shadow: none; background: none;
    border-radius: 12px; font-size: 20px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  body.ui.r6m.r7m .camctl .btn:active { transform: none; box-shadow: none; }
  body.ui.r6m.r7m .camctl .r7-sep {
    display: block; height: 2px; margin: 3px 11px; border-radius: 2px;
    background: rgba(107, 66, 38, .35);
  }

  /* ================= P5. SHEET KRU ALA MOCKUP =================
     Collapsed: titik hijau + ikon kru berlingkaran + "Kru BeBeRest" +
     jumlah aktif di bawah nama + chevron kanan. Expand meluncur
     (transisi max-height r6 dipertahankan). */
  body.ui.r6m.r7m .crew-panel.minimized .crew-head {
    position: relative; padding: 10px 46px 10px 14px;
    flex-wrap: wrap; gap: 4px 0; cursor: pointer;
  }
  body.ui.r6m.r7m .crew-panel.minimized .r7-crew-ic {
    display: inline-flex; order: 1; align-items: center; flex: none;
  }
  body.ui.r6m.r7m .crew-panel.minimized .r7-crew-ic::before {
    content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%;
    background: var(--leaf); border: 2px solid var(--leaf-d); margin-right: 9px;
  }
  body.ui.r6m.r7m .crew-panel.minimized .r7-crew-ic .ic {
    width: 34px; height: 34px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--parch-d); border: 2.5px solid var(--wood);
    border-radius: 50%; font-size: 17px;
  }
  body.ui.r6m.r7m .crew-panel.minimized .crew-head h2 { order: 2; flex: 1 1 auto; min-width: 0; }
  body.ui.r6m.r7m .crew-panel.minimized .crew-head .crew-live {
    order: 3; flex: 1 1 100%; margin-left: 53px; font-size: 11px;
  }
  body.ui.r6m.r7m .crew-panel.minimized .crew-head .crew-live::before { display: none; }
  body.ui.r6m.r7m .crew-panel.minimized .crew-head .minbtn { display: none; }
  body.ui.r6m.r7m .crew-panel .crew-head { position: relative; }
  body.ui.r6m.r7m .crew-panel.minimized .crew-head::after,
  body.ui.r6m.r7m .crew-panel:not(.minimized) .crew-head::after {
    position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%); margin: 0;
  }
  body.ui.r6m.r7m .crew-panel:not(.minimized) .r7-crew-ic { display: none; }

  /* ================= P5. STRIP CHIP AKSI: KARTU MELAYANG =================
     Chip = pil putih dengan lencana ikon lingkaran berwarna
     (Briefing amber, Fokus merah, Ngopi coklat — sesuai mockup). */
  body.ui.r6m.r7m #controls {
    border-radius: 18px;
    background: linear-gradient(180deg, var(--card), var(--parch));
  }
  body.ui.r6m.r7m #controls .hgroup .btn {
    min-height: 48px; padding: 7px 16px 7px 8px; border-radius: 999px;
    background: linear-gradient(180deg, #FFFDF4, #F7ECD2);
    font-size: 12.5px; border-width: 2.5px;
  }
  body.ui.r6m.r7m #controls .hgroup .btn .ic {
    width: 34px; height: 34px; font-size: 17px; border-radius: 50%;
    border: 2px solid rgba(107, 66, 38, .35); background: rgba(255, 255, 255, .6);
  }
  body.ui.r6m.r7m #controls #bBrief .ic { background: #FFD968; border-color: #c8922a; }
  body.ui.r6m.r7m #controls #bFocus .ic { background: #D9534F; border-color: #a83a36; color: #fff; }
  body.ui.r6m.r7m #controls #bCoffee .ic { background: #8B5E34; border-color: #5f3f20; color: #fff; }

  /* ================= P6+P7. BOTTOM NAV: KARTU MELAYANG =================
     4 item Kantor/Aktivitas/Tugas/Menu; aktif = pil amber;
     badge angka menunggu di ikon Menu (P7). */
  body.ui.r6m.r7m #r6-nav { border-radius: 20px; padding: 6px; gap: 4px; }
  body.ui.r6m.r7m #r6-nav button {
    background: none; border: 0; box-shadow: none; border-radius: 14px;
    color: var(--ink-soft); position: relative;
  }
  body.ui.r6m.r7m #r6-nav button .ic { font-size: 20px; }
  body.ui.r6m.r7m #r6-nav button .lb { font-size: 10.5px; }
  body.ui.r6m.r7m #r6-nav button.active {
    background: linear-gradient(180deg, #FFD968, var(--gold));
    color: #4A2F0E; box-shadow: 0 3px 0 #6b4415;
  }
  body.ui.r6m.r7m #r6-nav .r7-nbadge {
    display: none; position: absolute; top: 4px; left: calc(50% + 2px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--gold); border: 2px solid #8a5a1d; color: #4A2F0E;
    font-family: var(--fe); font-size: 10px; font-weight: 800; line-height: 1;
    align-items: center; justify-content: center;
  }
  body.ui.r6m.r7m #r6-nav .r7-nbadge.on { display: inline-flex; }
}