/* ============================================================
   LineAlgo Mastery - Mobile Experience Layer
   Loaded after mastery.css. Tablet + phone overrides (<= 1023px).

   Root causes addressed:
   1. ms-pool-canvas locks body/shell to 100dvh + overflow:hidden.
      iOS Safari then drops taps on date/slate chrome and freezes scroll.
      -> restore natural document flow through 1023px (matches JS layout).
   2. .ms-shell-layout .ms-sidebar overrides drawer rules on phones.
      -> re-assert fixed off-canvas drawer.
   3. Modals/popups had no mobile max-height/width constraints.
   4. Bottom chrome overlapped content — stacked with safe areas.
   ============================================================ */

@media (max-width: 1023px) {
  /* ---- 1. Break pool-canvas viewport trap (highest priority) ---- */
  html,
  body.ms-body,
  body.ms-layout-sidebar.ms-pool-canvas,
  body.ms-layout-sidebar.ms-pool-canvas .ms-shell-layout,
  body.ms-layout-sidebar.ms-pool-canvas .ms-app-layout,
  body.ms-layout-sidebar.ms-pool-canvas .ms-workspace-main,
  body.ms-layout-sidebar.ms-pool-canvas .ms-workspace-body {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: manipulation !important;
  }

  .ms-shell-layout {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .ms-app-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ms-workspace-main,
  .ms-workspace-body,
  .ms-workspace-pin-top {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  .ms-workspace-body {
    flex: none !important;
    display: block !important;
  }

  .ms-dash-pool-layout,
  #ms-workspace-pool-slot,
  .ms-player-pool-panel,
  #ms-player-pool {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* ---- 2. Sidebar as true off-canvas drawer ---- */
  .ms-shell-layout .ms-sidebar,
  .ms-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    max-height: none !important;
    width: min(300px, 85vw) !important;
    min-width: 0 !important;
    z-index: 1200 !important;
    transform: translateX(0);
    transition: transform 0.22s ease;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 12px !important;
  }

  body.ms-sidebar-collapsed .ms-sidebar {
    transform: translateX(-105%) !important;
    box-shadow: none;
    pointer-events: none !important;
  }

  /* Sidebar scrim must capture taps to close drawer — not pass through */
  body.ms-layout-sidebar:not(.ms-sidebar-collapsed)::before {
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  /* ---- 3. Date + slate chrome must stay tappable ---- */
  .ms-mobile-slate-bar,
  .ms-slate-dock,
  .ms-slate-rail-scroller,
  .ms-slate-rail,
  .ms-slate-card,
  .ms-date-control,
  .ms-date-row,
  .ms-date-input,
  .ms-date-step,
  .ms-btn,
  #ms-refresh-slate-mobile {
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  .ms-slate-dock .ms-slate-rail {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x manipulation !important;
    scroll-snap-type: x proximity;
  }

  .ms-slate-dock .ms-slate-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
  }

  /* VIP gate is a bottom sheet on mobile — never block workspace chrome */
  #ms-gate:not(.ms-hidden) {
    pointer-events: none !important;
  }

  #ms-gate:not(.ms-hidden) .ms-gate-card {
    pointer-events: auto !important;
  }

  .ms-pool-table-scroll {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y manipulation !important;
  }
}

@media (max-width: 768px) {
  .ms-shell-layout {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- Compact top navigation ---- */
  .ms-topnav-inner {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .ms-topnav-right {
    display: flex !important;
    flex-flow: row wrap !important;
    gap: 6px !important;
    align-items: center !important;
  }

  .ms-topnav-right > span > span:first-child {
    display: none !important;
  }

  .ms-topnav-right .ms-btn,
  .ms-topnav-right button {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  .ms-topnav-right .ms-mobile-date-picker {
    display: none !important;
  }

  .ms-mobile-slate-bar .ms-mobile-date-control {
    flex-flow: row wrap !important;
  }

  #ms-refresh-slate-mobile {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .ms-pool-table-scroll {
    height: 65vh !important;
    height: 65dvh !important;
    min-height: 320px !important;
    max-height: 72vh !important;
  }

  .ms-pool-col-fav-bar,
  .ms-pool-clear-actions,
  .ms-pool-sort-preset-bar {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  #ms-strategy-dock {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #ms-strategy-dock .ms-field-info-standalone {
    display: none !important;
  }

  #ms-strategy-dock .ms-strategy-dock-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  #ms-grok-gil-status {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }

  .leo-chat-launcher {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    right: 10px !important;
    z-index: 1100 !important;
  }

  body.ms-grok-gil-visible.ms-strategy-dock-visible .leo-chat-launcher {
    bottom: calc(156px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .ms-modal-backdrop.ms-sheet-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .ms-modal-backdrop:not(.ms-sheet-overlay) {
    padding: max(8px, env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: stretch !important;
  }

  .ms-modal-backdrop.ms-sheet-overlay .ms-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: min(88dvh, calc(100dvh - 20px)) !important;
    max-height: min(88dvh, calc(100dvh - 20px)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .ms-modal-backdrop:not(.ms-sheet-overlay) .ms-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
}