/* ============================================================
   BeBeRest COZY SIM — RONDE 6: Mobile-First UI Refinement
   (2026-10-14, brief resmi Bos via Nuna bus 9106)

   LAPIS OVERRIDE di atas v66 (gamehud.css v6.6). Dimuat SETELAH
   gamehud.css. Pilihan arsitektur: file override kecil (bukan salinan
   penuh) — risiko regresi desktop nol karena:
     1. Semua aturan r6 ada di dalam @media (max-width:1000px), kecuali
        4 aturan "mati default" (display:none) yang aman di semua viewport.
     2. Semua aturan visual mobile dikunci di balik class body.r6m yang
        hanya dipasang r6_nav_v1.js saat matchMedia mobile cocok
        (dan dicabut lagi saat kembali ke desktop).
   Tanpa r6_nav_v1.js / tanpa JS: halaman = v66 apa adanya (aman).

   Dipasangkan dengan: r6_nav_v1.js (wajib, dimuat setelah semua script
   kantor). presence_v1.js/css, floor_select_v1.js (#m-floor-sel),
   minimize_v2.js TIDAK diubah — dipakai apa adanya.

   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, pill vertikal
     #followBar   : bottom 208
     #sceneStatus : top 168 (tak berubah dari v66)
     #sideLeft    : top 112, tinggi 48     (112..160) — dropdown lantai ronde 5
     #header      : top 8,  tinggi ~96     (8..104)
   Dunia (#c) mengisi sisanya: ~160..644 ≈ 484px ≈ 57% viewport = dominan.
   ============================================================ */

/* ---- elemen r6 mati default (aman di semua viewport & tanpa JS) ---- */
body.ui #r6-nav,
body.ui #r6-filter,
body.ui .r6-more-btn,
body.ui .r6-rowbreak { display: none; }

@media (max-width: 1000px) {
  body.ui.r6m {
    --r6-nav-h: 64px;    /* tinggi bottom nav 4 item */
    --r6-sheet-h: 54px;  /* tinggi crew sheet collapsed (2 baris) */
    --r6-chip-h: 58px;   /* tinggi strip chip aksi */
    overflow-x: hidden;  /* garansi: tanpa overflow horizontal */
  }

  /* ================= 1. COMPACT HEADER (2 baris) =================
     Baris 1: brand | Inbox | Tugas | Menu(⋯, margin-left:auto)
     Baris 2: search (bCmd, full-width) + tombol Filter
     .r6-rowbreak (dari r6_nav_v1.js) memaksa pindah baris. */
  body.ui.r6m #header {
    top: 8px; left: 8px; right: 8px;
    padding: 6px 8px; gap: 6px 8px; flex-wrap: wrap; align-items: center;
  }
  body.ui.r6m #header .header-card { display: contents; }
  body.ui.r6m #header .hbtn-strip { display: contents; }
  body.ui.r6m #brand { order: 1; flex: none; }
  body.ui.r6m #bInbox { order: 2; flex: none; margin-left: auto; }
  body.ui.r6m #bTasks { order: 3; flex: none; }
  body.ui.r6m #header .menuwrap { order: 4; flex: none; margin-left: auto; }
  body.ui.r6m #header .r6-rowbreak { display: block; order: 5; flex: 0 0 100%; height: 0; }
  body.ui.r6m #header #bCmd {
    order: 6; flex: 1 1 auto; min-width: 0; max-width: none; margin: 0;
    font-size: 12px; padding: 7px 14px;
  }
  body.ui.r6m #header #bCmd kbd { display: none; }
  body.ui.r6m #r6-filter-btn { order: 7; flex: none; display: inline-flex; }
  /* tombol baris 1 ramping */
  body.ui.r6m #header > #bInbox,
  body.ui.r6m #header > #bTasks,
  body.ui.r6m #header .menuwrap > .btn,
  body.ui.r6m #r6-filter-btn {
    padding: 6px 10px; font-size: 11.5px; border-radius: 10px;
    border-width: 2.5px; white-space: nowrap;
  }
  body.ui.r6m #r6-filter-btn .ic { font-size: 14px; }
  /* pengaman: sekunder yang masih tertinggal di header tidak bocor ke baris */
  body.ui.r6m #header .team-picker,
  body.ui.r6m #header .simhud,
  body.ui.r6m #header .crewstack { display: none; }

  /* ================= PANEL FILTER (lipat) =================
     Isi: .team-picker (select inisial), .simhud (hari/musim/cuaca/jam),
     .crewstack, + tombol sekunder lain — dipindah r6_nav_v1.js. */
  body.ui.r6m #r6-filter.open {
    display: block; position: fixed; z-index: 95;
    top: calc(8px + var(--m-head-h) + 6px); left: 8px; right: 8px;
    background: linear-gradient(180deg, var(--card), var(--parch));
    border: 2.5px solid var(--wood); border-radius: 16px;
    box-shadow: var(--sh-panel); padding: 10px 12px;
    animation: r6-pop .16s ease-out;
  }
  @keyframes r6-pop { from { opacity: 0; transform: translateY(-6px); } }
  body.ui.r6m #r6-filter .team-picker { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-bottom: 8px; }
  body.ui.r6m #r6-filter .team-picker label { display: block; font-family: var(--fe); font-size: 10.5px; letter-spacing: 1.5px; color: var(--ink-soft); }
  body.ui.r6m #r6-filter .team-picker select { width: 100%; font-size: 13px; padding: 7px 8px; }
  body.ui.r6m #r6-filter .simhud {
    display: flex; flex-wrap: wrap; gap: 6px; max-width: none; overflow: visible;
    padding: 6px 8px; margin-bottom: 8px;
  }
  body.ui.r6m #r6-filter .crewstack { display: flex; border-left: 0; padding-left: 0; }
  body.ui.r6m #r6-filter #teamFaces { display: flex; }
  body.ui.r6m #r6-filter .btn { margin: 0 6px 6px 0; }

  /* ================= 5. FIXED BOTTOM NAV (4 item) =================
     Kantor/Aktivitas/Tugas/Menu — klik delegasi ke handler yang ada
     (r6_nav_v1.js). Visual beda jelas dari chip aksi. */
  body.ui.r6m #r6-nav {
    display: flex; position: fixed; z-index: 46;
    left: 8px; right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    height: var(--r6-nav-h);
    background: linear-gradient(180deg, var(--parch), var(--parch-d));
    border: 2.5px solid var(--wood); border-radius: 18px;
    box-shadow: var(--sh-panel);
    padding: 6px; gap: 6px;
  }
  body.ui.r6m #r6-nav button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    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); color: var(--ink);
    transition: transform .08s, box-shadow .08s, filter .12s;
  }
  body.ui.r6m #r6-nav button .ic { font-size: 18px; line-height: 1; }
  body.ui.r6m #r6-nav button .lb { font-size: 10.5px; font-weight: 800; white-space: nowrap; }
  body.ui.r6m #r6-nav button.active {
    background: linear-gradient(180deg, #FFD968, var(--gold));
    border-color: #8a5a1d; box-shadow: 0 3px 0 #6b4415; color: #4A2F0E;
  }
  body.ui.r6m #r6-nav button:active { transform: translateY(2px); box-shadow: none; }

  /* ================= 3. CREW BOTTOM SHEET =================
     Collapsed (default, .minimized): bar ramping "Kru BeBeRest" +
     .crew-live (jumlah aktif) + chevron. Klik kepala = toggle
     (via .minbtn minimize_v2.js, r6_nav_v1.js). Transisi max-height. */
  body.ui.r6m .crew-panel {
    left: 8px; right: 8px; top: auto; width: auto;
    bottom: calc(8px + var(--r6-nav-h) + 8px + env(safe-area-inset-bottom, 0px));
    max-height: 52dvh; z-index: 44;
    transition: max-height .28s ease;
  }
  body.ui.r6m .crew-panel.minimized { max-height: var(--r6-sheet-h); overflow: hidden; }
  /* collapsed 2 baris ala mockup: "Kru BeBeRest" + live count, chevron kanan */
  body.ui.r6m .crew-panel.minimized .crew-head {
    padding: 8px 12px; border-bottom: 0; cursor: pointer;
    gap: 2px 8px; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  }
  body.ui.r6m .crew-panel.minimized .crew-head h2 { order: 1; flex: 1 1 auto; font-size: 0; letter-spacing: 0; margin: 0; }
  body.ui.r6m .crew-panel.minimized .crew-head h2::after {
    content: "Kru BeBeRest";
    font-family: var(--fh); font-size: 15px; letter-spacing: 1px; color: var(--wood-d);
  }
  body.ui.r6m .crew-panel.minimized .crew-head .crew-live {
    order: 3; flex: 1 1 100%; font-size: 11px; white-space: nowrap;
  }
  body.ui.r6m .crew-panel.minimized .crew-head .minbtn { display: none; }
  body.ui.r6m .crew-panel.minimized .crew-head::after,
  body.ui.r6m .crew-panel:not(.minimized) .crew-head::after {
    flex: none; color: var(--wood-d); font-size: 15px;
    transition: transform .2s;
  }
  body.ui.r6m .crew-panel.minimized .crew-head::after { order: 2; content: "\25BE"; margin-left: 0; } /* ▾ buka */
  body.ui.r6m .crew-panel:not(.minimized) .crew-head::after { content: "\25B4"; margin-left: auto; } /* ▴ tutup */
  body.ui.r6m .crew-panel .crew-list { overscroll-behavior: contain; }

  /* #info: sheet di slot yang sama saat dibuka dari kartu kru */
  body.ui.r6m #info {
    left: 8px; right: 8px; top: auto; width: auto;
    bottom: calc(8px + var(--r6-nav-h) + 8px + env(safe-area-inset-bottom, 0px));
    max-height: 52dvh; z-index: 45;
  }

  /* ================= 4. CHIP AKSI KONTEKSTUAL (#controls) =================
     Grup (.hgroup) dilebur jadi satu strip chip horizontal scroll.
     Primer tampil default; sekunder (data-r6="s") tampil saat
     #controls.r6-more (chip "⋯ Lainnya"). Semua onclick asli utuh. */
  body.ui.r6m #controls {
    left: 8px; right: 8px; transform: none; max-width: none;
    bottom: calc(8px + var(--r6-nav-h) + 8px + var(--r6-sheet-h) + 8px + env(safe-area-inset-bottom, 0px));
    padding: 6px 8px; border-radius: 16px; border-width: 2.5px;
  }
  body.ui.r6m #controls .simulation-controls {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    gap: 8px; width: 100%; padding: 2px;
  }
  body.ui.r6m #controls .simulation-controls::-webkit-scrollbar { display: none; }
  body.ui.r6m #controls .hgroup { display: contents; }
  body.ui.r6m #controls .hgroup::before { display: none; }
  body.ui.r6m #controls .hgroup + .hgroup { border-left: 0; }
  body.ui.r6m #controls .hgroup .btn {
    display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 7px; flex: none; min-height: 44px; padding: 8px 14px;
    border-radius: 999px; border-width: 2.5px;
    font-size: 12px; white-space: nowrap;
  }
  body.ui.r6m #controls .hgroup .btn .ic {
    font-size: 15px; width: 30px; height: 30px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .55); border-radius: 50%;
    border: 2px solid rgba(107, 66, 38, .25);
  }
  body.ui.r6m #controls .hgroup .btn .lb { font-size: 12px; }
  body.ui.r6m #controls .hgroup .btn[data-r6="s"] { display: none; }
  body.ui.r6m #controls.r6-more .hgroup .btn[data-r6="s"] { display: inline-flex; }
  body.ui.r6m #controls .music-volume { display: none; }
  body.ui.r6m #controls.r6-more .music-volume { display: flex; flex: none; }
  body.ui.r6m #controls .r6-more-btn { display: inline-flex; border-style: dashed; }
  body.ui.r6m #controls .r6-more-btn[aria-expanded="true"] {
    background: linear-gradient(180deg, #FFD968, var(--gold));
    border-color: #8a5a1d; border-style: solid; color: #4A2F0E;
  }

  /* ================= 2. ZOOM PILL VERTIKAL =================
     .camctl (bZoomIn/bZoomOut/bRotate/bReset dari hudify) jadi pil
     vertikal melayang di kanan kanvas, di atas strip chip. */
  body.ui.r6m .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; gap: 4px;
    padding: 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 .camctl .btn {
    width: 40px; height: 40px; border-radius: 50%; border-width: 2.5px;
    font-size: 14px; padding: 0;
  }

  /* ================= 2. KANVAS & ELEMEN PENDUKUNG ================= */
  body.ui.r6m .name-label { font-size: 12px; padding: 3px 10px; }
  body.ui.r6m #followBar {
    top: auto;
    bottom: calc(8px + var(--r6-nav-h) + 8px + var(--r6-sheet-h) + 8px + var(--r6-chip-h) + 8px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 16px);
  }
  /* #sceneStatus, #sideLeft (dropdown lantai ronde 5 + chip Persetujuan),
     #fz1-desk: posisi v66 tetap — tidak digeser ronde 6. */
}