/* ============================================================
   Faber — mobile app shell (App · IDE · LearnIDE · Learn ·
   DeveloperHub). Turns the desktop IDE chrome into a simple
   phone UI: one focused pane, a bottom tab bar, and sheets that
   slide up. All inside media queries — desktop is untouched.
   ============================================================ */

/* injected mobile-only furniture: hidden at EVERY width by default,
   switched on inside the phone media query below */
.mtabs,.mscrim2,.mgrab{display:none}

@media (max-width:900px){

/* ---------- shared sheet + scrim ---------- */
.mscrim2{position:fixed;inset:0;z-index:68;background:rgba(28,22,16,.4);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .26s ease;display:block}
.mscrim2.on{opacity:1;pointer-events:auto}
.mgrab{display:flex!important;justify-content:center;padding:9px 0 3px;flex-shrink:0;cursor:grab}
.mgrab i{width:38px;height:4px;border-radius:99px;background:#D0D9E5;display:block}

/* ---------- bottom tab bar (injected) ---------- */
.mtabs{position:fixed;left:0;right:0;bottom:0;z-index:66;display:flex!important;align-items:stretch;gap:2px;
  background:rgba(250,252,254,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border,#E2E8F0);padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 26px rgba(46,42,36,.07)}
.mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:50px;border:none;background:none;font-family:inherit;font-size:10px;font-weight:600;
  color:var(--text-3,#94A3B8);border-radius:13px;cursor:pointer;
  transition:color .2s ease,background .2s ease,transform .18s cubic-bezier(.22,1,.36,1)}
.mtab svg{width:20px;height:20px}
.mtab:active{transform:scale(.93)}
.mtab.on{color:var(--accent,#2F7BE5);background:rgba(47,123,229,.09)}
.mtab .mbadge{position:absolute;transform:translate(14px,-12px);min-width:15px;height:15px;border-radius:99px;
  background:var(--accent,#2F7BE5);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;padding:0 4px}

/* every app shell leaves room for the bar */
body.mapp .app,body.mapp .win,body.mapp .wrap-app{padding-bottom:0}
body.mapp .center,body.mapp .main,body.mapp .scroll,body.mapp .pagewrap,body.mapp .sbody,body.mapp .rpane,body.mapp .dpane{scroll-padding-bottom:76px}
body.mapp{padding-bottom:0}

/* ============================================================
   App.html — chat workspace (Claude-mobile feel)
   ============================================================ */
body.mapp-chat .win{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
body.mapp-chat .frame{padding-bottom:70px!important}
body.mapp-chat .frame>.side{width:min(310px,84vw)!important;border-radius:0 22px 22px 0!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}
/* hide desktop-only chrome, keep the composer big */
body.mapp-chat .win>.wbtn:not(#togSide){display:none}
body.mapp-chat .hero h1{font-size:clamp(26px,7.6vw,34px)!important}
body.mapp-chat .composer,body.mapp-chat .prompt-box{border-radius:24px}
body.mapp-chat .modeseg{width:100%}
body.mapp-chat .view{padding-bottom:16px!important}

/* ============================================================
   IDE.html / LearnIDE.html — one pane at a time
   ============================================================ */
body.mapp-ide .wrap,body.mapp-ide .body{flex-direction:column!important;padding-bottom:70px}
/* the activity rail becomes a horizontal strip so every section stays reachable */
body.mapp-ide nav.act,body.mapp-ide .body>.rail{flex-direction:row!important;width:auto!important;height:auto!important;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  border-right:none!important;border-bottom:1px solid var(--border,#E2E8F0)!important;
  padding:7px 10px!important;gap:4px!important;position:static!important;flex-shrink:0}
body.mapp-ide nav.act::-webkit-scrollbar,body.mapp-ide .body>.rail::-webkit-scrollbar{display:none}
body.mapp-ide nav.act .ab,body.mapp-ide .body>.rail .ab{flex-shrink:0}
body.mapp-ide nav.act .ab.push,body.mapp-ide .body>.rail .ab.push{margin-top:0!important;margin-left:auto}
body.mapp-ide .rail .tip,body.mapp-ide nav.act .tip{display:none!important}
body.mapp-ide .rail .lg{margin-bottom:0!important;margin-right:6px}
/* panels become bottom sheets */
body.mapp-ide #explorer,body.mapp-ide .body>.side,body.mapp-ide .body>.right,body.mapp-ide aside#inspector,body.mapp-ide .side.msheet{
  position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
  width:auto!important;max-width:none!important;height:auto!important;max-height:72dvh!important;
  z-index:70;margin:0!important;border:none!important;border-top:1px solid var(--border,#E2E8F0)!important;
  border-radius:22px 22px 0 0!important;box-shadow:0 -16px 46px rgba(46,42,36,.22);
  padding-bottom:calc(66px + env(safe-area-inset-bottom))!important;
  transform:translateY(0);transition:transform .3s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column}
body.mapp-ide #explorer.msheet-off,body.mapp-ide .body>.side.msheet-off,body.mapp-ide .body>.right.msheet-off,body.mapp-ide aside#inspector.msheet-off{transform:translateY(104%)}
/* the editor/center gets the full screen */
body.mapp-ide .center{flex:1;min-height:0}
body.mapp-ide .dock{max-height:38dvh}
body.mapp-ide .top,body.mapp-ide .topbar{gap:8px}
/* LearnIDE: lesson pane is the primary read view */
body.mapp-ide .lesson{max-height:none;flex:1}
body.mapp-ide .lesson.collapsed{flex:0 0 auto;max-height:42px}
body.mapp-ide.mview-code .lesson{display:none}
body.mapp-ide.mview-lesson .edwrap,body.mapp-ide.mview-lesson .dock{display:none}
body.mapp-ide.mview-code .edwrap{flex:1}

/* ============================================================
   DeveloperHub.html — rail on top, content full width
   ============================================================ */
body.mapp-hub .app{flex-direction:column!important;height:100dvh!important}
body.mapp-hub .rail{flex-direction:row!important;width:auto!important;height:auto!important;
  border-right:none!important;border-bottom:1px solid var(--border,#E2E8F0)!important;
  padding:8px 10px calc(8px + env(safe-area-inset-top))!important;gap:4px!important;overflow-x:auto;scrollbar-width:none}
body.mapp-hub .rail::-webkit-scrollbar{display:none}
body.mapp-hub .rail .lg{margin-bottom:0!important;margin-right:6px}
body.mapp-hub .rail .ab.push{margin-top:0!important;margin-left:auto}
body.mapp-hub .main{min-width:0}
body.mapp-hub .wrap{max-width:none!important}
body.mapp-hub .topbar{flex-wrap:wrap;height:auto;padding:9px 14px}
body.mapp-hub .crumb{font-size:13px}

/* ============================================================
   Learn.html — canvas lesson
   ============================================================ */
body.mapp-canvas .hud{flex-wrap:wrap;height:auto!important;padding:calc(8px + env(safe-area-inset-top)) 12px 8px!important;gap:8px}
body.mapp-canvas .hud .diff,body.mapp-canvas .hud .stat:nth-of-type(n+3){display:none}
body.mapp-canvas .hud .idelink{margin-left:auto}
body.mapp-canvas .lesson b{font-size:12.5px}
body.mapp-canvas #vp{top:auto!important;inset:0}
body.mapp-canvas .tools{bottom:calc(74px + env(safe-area-inset-bottom))!important;gap:2px;padding:5px;
  max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none}
body.mapp-canvas .tools::-webkit-scrollbar{display:none}
body.mapp-canvas .tl{width:40px;height:40px;flex-shrink:0}
body.mapp-canvas .tl .tip{display:none}
body.mapp-canvas #mmWrap{display:none}
body.mapp-canvas #side{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
  width:auto!important;max-height:70dvh;border-radius:22px 22px 0 0!important;
  padding-bottom:calc(70px + env(safe-area-inset-bottom));transform:translateY(104%)}
body.mapp-canvas #side.on{transform:none}
body.mapp-canvas .tut{top:auto;bottom:calc(128px + env(safe-area-inset-bottom));font-size:11.5px;padding:7px 14px;max-width:calc(100vw - 28px);text-align:center;line-height:1.4}

/* ---------- overlays inside app pages ---------- */
body.mapp .ov,body.mapp .pmodal{padding:10px!important}
body.mapp .sheet,body.mapp .prof,body.mapp .pbox,body.mapp .cm-box{border-radius:18px!important;max-height:90dvh}
body.mapp .cm-body{flex-direction:column}
body.mapp .cm-map{width:auto!important;border-right:none!important;border-bottom:1px solid var(--border)}
/* touch scrolling everywhere */
body.mapp .sbody,body.mapp .rpane,body.mapp .dpane,body.mapp .scroll,body.mapp .pagewrap,body.mapp .lesson,body.mapp .codepane{-webkit-overflow-scrolling:touch}
}

/* tablets: keep two panes but slim the chrome */
@media (min-width:901px) and (max-width:1100px){
  .side{width:250px}
  .right{width:262px}
  /* the code-view toolbar's shrink constraint is unconditional in App.html;
     here we only drop the status label to save room on narrow screens */
  .artbar .buildst{display:none}
}