/* =================================================================
   71-mobile-fixes.css — v48.21 consolidated mobile fixes
   Fixes 3 bugs:
     1. Content offset right (grid-template-columns forced to 248px+1fr by 65-buttons-glass.css !important)
     2. .bg-robot mascot rendering behind logo on mobile (no @media rule to hide it)
     3. Old .sidebar bottom-nav still visible (replaced by 70-mobile-nav.js drawer)
   Author: BOS, 2026-07-17. Verified viewport 320-393px.
   ================================================================= */

@media (max-width: 768px) {

  /* === BUG 3: Hide old bottom-nav .sidebar completely on mobile === */
  /* 10-shell-v2.css:134-172 overrides .sidebar to position:fixed bottom on mobile,
     but the drawer (70-mobile-nav.js) replaces it. Hide legacy sidebar entirely. */
  aside.sidebar,
  .sidebar,
  .app-shell > .sidebar,
  #__sidebar_v2 > .sidebar {
    display: none !important;
  }

  /* === BUG 1: Force single-column app-shell grid on mobile === */
  /* 65-buttons-glass.css:236-244 sets grid-template-columns: 248px 1fr !important
     which forces .app-main to start at x=248, leaving huge left gap on 390px viewport.
     10-shell-v2.css:17-26 already tries to override but loses the !important cascade. */
  .app-shell,
  #__sidebar_v2 {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "main" !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .app-main,
  main,
  #__app_main {
    grid-area: main !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Header on mobile: reduce padding, stack logo vertically (already does) */
  header.app-header {
    max-width: 100vw !important;
    padding: 34px 12px 24px !important;
  }
  header.app-header img.logo-bm {
    height: 66px !important;
    max-width: calc(100vw - 40px) !important;
  }

  /* === BUG 2 (RESOLVED 2026-07-18, was: hide .bg-robot on mobile) ===
     The original fix hid the robot outright because it rendered as an
     opaque square behind the logo. 72-robots-per-tab.css already ships
     a proper mobile position for it (60px, bottom-right, opacity .85) —
     that rule was just being neutralized by the display:none below it
     in file order. Ali now wants the robot visible on mobile too, so we
     let 72-robots-per-tab.css's positioning apply instead of hiding it. */

  /* #electric-canvas used to be hidden here on mobile — Ali wants the
     animated grid (matching boostedmode.com's homepage) visible on mobile
     too, not just desktop; 70-grid-v2.css's own mobile block already
     handles toning it down, so this file no longer needs to hide it
     outright (2026-07-18). */

  /* Disable the second app-header (injected by 05-sidebar.js at grid cell)
     since the original at index.html:29 is what shows the logo. Keep only original. */
  .app-shell .app-header,
  .app-shell header.app-header:not(:first-child) {
    display: none !important;
  }

  /* Ensure body/html don't overflow horizontally */
  body, html {
    overflow-x: hidden !important;
  }

  /* Move the mobile-nav-trigger up so it doesn't overlap content */
  .mobile-nav-trigger {
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
  }
}

/* Reduce-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .bg-robot { animation: none !important; }
}