/* ReachX — Mobile App Shell
   Shared sticky header + bottom nav for every authenticated page.
   One implementation, reused everywhere — see mobile-shell.js. */

.mshell-header{ display:none; }
.mshell-tabbar{ display:none; }

@media (max-width:1000px){
  .sidebar{ display:none; }

  /* ---- fixed top app bar: truly pinned, not just sticky-in-flow ---- */
  .mshell-header{
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; right:0; z-index:95;
    background:rgba(10,10,13,0.9); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-bottom:1px solid var(--border);
  }
  .mshell-header-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px 10px; }
  .mshell-logo{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; letter-spacing:-0.02em; flex-shrink:0; }
  .mshell-logo svg{ width:18px; height:18px; }
  .mshell-title{ font-size:13.5px; font-weight:600; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:2px; }
  .mshell-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .mshell-icon-btn{ width:32px; height:32px; border-radius:9px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease); }
  .mshell-icon-btn:active{ background:rgba(255,255,255,0.06); }
  .mshell-icon-btn svg{ width:15px; height:15px; color:var(--text-secondary); }
  .mshell-avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--accent), #C084FC); flex-shrink:0; }
  .mshell-balance{ display:flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px; background:var(--bg-elev); border:1px solid var(--border); font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--text); white-space:nowrap; }
  .mshell-balance svg{ width:13px; height:13px; color:var(--accent-2); flex-shrink:0; }

  /* space for the fixed header so content doesn't start underneath it */
  body.has-mshell .main{ padding-top:52px; }

  /* the desktop-style page title block scrolls normally beneath the fixed bar */
  .topbar{ flex-direction:column; align-items:flex-start; gap:14px; padding:18px 20px; }
  .content{ padding-bottom:100px; padding-left:20px; padding-right:20px; }

  /* ---- fixed bottom nav ---- */
  .mshell-tabbar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90;
    background:rgba(10,10,13,0.9); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--border);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .mshell-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:9.5px; letter-spacing:-0.01em; color:var(--text-tertiary); padding:7px 2px; border-radius:12px; flex:1; min-width:0; min-height:44px; transition:color .25s var(--ease), background .25s var(--ease), transform .15s var(--ease); }
  .mshell-tab:active{ transform:scale(.92); }
  .mshell-tab svg{ width:21px; height:21px; transition:transform .2s var(--ease); }
  .mshell-tab.active{ color:var(--accent-2); background:var(--accent-soft); }
  .mshell-tab.active svg{ transform:translateY(-1px); }
}

@media (max-width:640px){
  .mshell-header-row{ padding:11px 14px 9px; }
}