/* ======================================================
c030-layout.css — APP LAYOUT (MOBILE OPTIMIZED)
v2.0 - True Center + App Lock + Horizontal Mobile Rail
====================================================== */

:root {
  --bmRailW: 72px;
  --bmGap: 24px;
  --bmReelW: 760px;
  /* Add safe area for modern phones */
  --headerH: 60px; 
}

/* 1. GLOBAL APP LOCK (No horizontal wiggle) */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative !important;
  touch-action: manipulation; /* Essential for No-Zoom */
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

.bm-app {
  width: 100%;
  display: grid;
  /* Desktop: LEFT rail | CENTER reel | RIGHT ghost */
  grid-template-columns: var(--bmRailW) minmax(0, var(--bmReelW)) var(--bmRailW);
  gap: var(--bmGap);
  justify-content: center;
  padding: 20px clamp(16px, 3vw, 40px);
  min-width: 0;
  box-sizing: border-box;
}

/* LEFT ICON RAIL (Desktop) */
#bmLeftRail {
  grid-column: 1;
  transition: width 0.3s ease, opacity 0.3s ease;
}

/* MAIN COLUMN */
.bm-main {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Handle Desktop Collapse */
.bm-app:has(#bmLeftRail.bm-rail--collapsed) {
  grid-template-columns: 0 minmax(0, var(--bmReelW)) 0;
  gap: 0;
}

/* ======================================================
   RESPONSIVE (MOBILE & TABLET FIX)
   ====================================================== */

@media (max-width: 980px) {
  .bm-app {
    /* Force 1 column so reel is always full width */
    grid-template-columns: 1fr !important; 
    gap: 0 !important;
    padding: 10px 0 !important; /* Edge-to-edge look on mobile */
    justify-content: stretch;
  }

  /* 2. THE HORIZONTAL RAIL FIX */
  #bmLeftRail {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100dvh !important;
    width: 280px !important; /* Menu width when open */
    z-index: 9999 !important;
    background: var(--panel, #ffffff);
    box-shadow: 10px 0 30px rgba(0,0,0,0.15);
    transform: translateX(0); /* Start Open (or closed based on JS) */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* When collapsed via JS, slide it OFF screen horizontally */
  #bmLeftRail.bm-rail--collapsed {
    transform: translateX(-110%) !important;
    width: 280px !important; /* Keep width same so content doesn't squish */
    box-shadow: none !important;
  }

  /* 3. CENTER REEL (No overlap) */
  .bm-main {
    grid-column: 1;
    width: 100vw !important;
    padding: 0 10px;
    box-sizing: border-box;
  }

  /* 4. Fix Composer Size for Mobile */
  .bm-composer {
    width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box;
  }

  /* 5. Disable iOS Auto-Zoom */
  input, textarea {
    font-size: 16px !important; 
  }
}