/* =========================================================
   v1.30 — Mobile App Shell
   Adaptive mobile composition; same product/state contracts.
   ========================================================= */
@media (max-width:780px){
  :root{
    --mobile-appbar:56px;
    --mobile-nav:64px;
    --mobile-edge:12px;
    --top:calc(var(--mobile-appbar) + env(safe-area-inset-top));
  }
  html,body{overscroll-behavior:none}
  body{padding-bottom:0!important;overflow:hidden!important}
  .app{height:100dvh!important;grid-template-rows:var(--top) minmax(0,1fr)!important;overflow:hidden!important}

  /* One-row native-like app bar. The previous mobile grid had 4 direct
     children in a 3-column grid, which could push actions to a second row. */
  .topbar{
    min-width:0!important;
    height:var(--top)!important;
    padding:env(safe-area-inset-top) 10px 0!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr) 34px 34px 34px!important;
    grid-template-rows:var(--mobile-appbar)!important;
    gap:6px!important;
    align-items:center!important;
    background:color-mix(in srgb,var(--surface-nav) 96%,transparent)!important;
    border-bottom:1px solid var(--stroke-subtle)!important;
    backdrop-filter:blur(18px) saturate(1.1)!important;
  }
  .brand{grid-column:1!important;min-width:0!important;width:30px!important}
  .brand .logo{width:30px!important;height:30px!important;border-radius:10px!important}
  .brand>span{display:none!important}
  .scope-cluster{
    grid-column:2!important;min-width:0!important;width:100%!important;
    display:flex!important;justify-content:center!important
  }
  .scope-btn,.scope-context-pill{display:none!important}
  .channel-btn{
    width:min(100%,220px)!important;max-width:220px!important;min-width:0!important;height:38px!important;
    border:0!important;background:transparent!important;border-radius:11px!important;padding:0 6px!important;
    justify-content:center!important;box-shadow:none!important
  }
  .context-mark-v118{display:none!important}
  .context-copy-v118{min-width:0!important;text-align:center!important}
  .context-copy-v118 b{display:block!important;font-size:12.5px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .context-copy-v118 small{display:block!important;font-size:9px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:var(--text-muted)!important}
  .channel-btn>small:last-child{font-size:9px!important;margin-left:2px!important}

  .search-trigger{
    grid-column:3!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;
    justify-content:center!important;border-radius:11px!important;justify-self:center!important
  }
  .search-trigger .search-text,.search-trigger .kbd{display:none!important}
  .top-actions{display:contents!important}
  .create-btn{
    grid-column:4!important;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;
    justify-content:center!important;border-radius:11px!important
  }
  .create-btn span{display:none!important}
  .top-actions>.hide-mobile,.top-actions>.theme-utility{display:none!important}
  #avatarBtn{
    grid-column:5!important;width:34px!important;height:34px!important;min-width:34px!important;
    justify-self:end!important;border-radius:50%!important;font-size:10px!important
  }

  /* Full-width application content; no desktop sidebar geometry survives. */
  .shell{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;height:100%!important;overflow:hidden!important}
  .main{width:100%!important;min-width:0!important;height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch}
  .page{
    width:100%!important;max-width:none!important;min-width:0!important;
    padding:14px var(--mobile-edge) calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 22px)!important;
  }
  .page-head{gap:8px!important;margin-bottom:12px!important}
  .page-title{min-width:0!important}
  .page-title h1{font-size:20px!important;line-height:1.15!important;letter-spacing:-.01em!important}
  .page-title p{font-size:10.5px!important;line-height:1.35!important;max-width:38rem!important}
  .head-actions{display:flex!important;gap:6px!important;overflow-x:auto!important;scrollbar-width:none!important}
  .head-actions::-webkit-scrollbar{display:none!important}
  .head-actions .btn{flex:0 0 auto!important;min-height:34px!important}

  /* Native-like bottom navigation with safe area. */
  .mobile-nav{
    left:8px!important;right:8px!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;
    height:var(--mobile-nav)!important;padding:4px 5px!important;
    border:1px solid var(--stroke-subtle)!important;border-radius:18px!important;
    background:color-mix(in srgb,var(--surface-float) 94%,transparent)!important;
    box-shadow:0 12px 36px rgba(0,0,0,.24)!important;backdrop-filter:blur(20px) saturate(1.08)!important;
    transition:transform var(--motion-small,150ms) var(--ease-standard,ease),opacity var(--motion-small,150ms) ease!important
  }
  .mobile-nav button{
    min-width:0!important;border-radius:13px!important;transition:background var(--motion-fast,110ms) ease,color var(--motion-fast,110ms) ease,transform 70ms ease!important
  }
  .mobile-nav button:active{transform:scale(.96)!important}
  .mobile-nav button.active{background:var(--surface-selected)!important;color:var(--text-primary)!important}
  .mobile-nav button b{font-size:17px!important;line-height:1!important}
  .mobile-nav button span{font-size:9px!important;line-height:1!important}

  /* App sheets: occupy the mobile viewport, sit above bottom navigation and
     give the content a single, predictable scroll container. */
  .drawer,.drawer.left{
    left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;
    max-width:none!important;max-height:calc(100dvh - env(safe-area-inset-top) - 10px)!important;
    border-radius:22px 22px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important;
    padding-bottom:env(safe-area-inset-bottom)!important;z-index:145!important;
    box-shadow:0 -16px 60px rgba(0,0,0,.34)!important
  }
  .drawer-h{min-height:52px!important;height:auto!important;padding:8px 14px!important;position:sticky!important;top:0!important;z-index:2!important;background:var(--surface-float)!important;border-radius:22px 22px 0 0!important}
  .drawer-h:before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:34px;height:4px;border-radius:99px;background:var(--stroke-strong);opacity:.55}
  .drawer-body{overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
  body.drawer-open-v117 .mobile-nav{transform:translateY(calc(100% + 18px))!important;opacity:0!important;pointer-events:none!important}
  body.drawer-open-v117 .app:after{content:"";position:fixed;inset:0;background:var(--overlay-bg);z-index:135;pointer-events:none;animation:v130ScrimIn var(--motion-small,150ms) ease both}

  /* Global search behaves as a dedicated mobile screen, not a desktop modal. */
  .overlay{padding:0!important;align-items:stretch!important;justify-content:stretch!important;z-index:160!important}
  .palette{
    width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
    border:0!important;border-radius:0!important;background:var(--surface-canvas)!important;
    padding-top:env(safe-area-inset-top)!important;box-shadow:none!important
  }
  .palette-search{height:58px!important;font-size:16px!important;background:var(--surface-nav)!important;padding:0 16px!important}
  .search-scopebar{position:sticky!important;top:0!important;z-index:2!important;background:var(--surface-canvas)!important;padding:7px 10px!important;overflow-x:auto!important}
  .search-results{padding-bottom:calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 16px)!important}

  /* AI becomes a mobile status pill. Expanded state behaves like a sheet. */
  .ai-capacity-dock-v117{
    left:auto!important;right:12px!important;bottom:calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 14px)!important;
    top:auto!important;width:auto!important;max-width:205px!important;transform:none!important;border-radius:14px!important;
    box-shadow:0 9px 30px rgba(0,0,0,.22)!important
  }
  .ai-capacity-dock-v117:not(.mobile-expanded){width:58px!important;max-width:58px!important;border-radius:14px!important}
  .ai-capacity-dock-v117:not(.mobile-expanded) .ai-capacity-head-v117{
    min-height:38px!important;padding:0!important;border:0!important;gap:0!important;justify-content:center!important
  }
  .ai-capacity-dock-v117:not(.mobile-expanded) .ai-capacity-head-v117 .spark-v117{width:24px!important;height:24px!important}
  .ai-capacity-dock-v117:not(.mobile-expanded) .ai-capacity-head-v117 b,
  .ai-capacity-dock-v117:not(.mobile-expanded) .ai-mobile-summary-v117,
  .ai-capacity-dock-v117:not(.mobile-expanded) .ai-capacity-head-v117 small{display:none!important}
  .ai-capacity-dock-v117:not(.mobile-expanded) .ai-capacity-head-v117 .ai-capacity-icon-v117{display:none!important}
  .ai-capacity-dock-v117.mobile-expanded{
    left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;
    border-radius:22px 22px 0 0!important;padding-bottom:env(safe-area-inset-bottom)!important;z-index:150!important
  }
  .ai-capacity-dock-v117.mobile-expanded .ai-capacity-head-v117{min-height:52px!important;padding:8px 14px!important}
  .ai-capacity-dock-v117.mobile-expanded .ai-capacity-body-v117{max-height:52dvh!important;overflow:auto!important}
  body.drawer-open-v117 .ai-capacity-dock-v117{display:none!important}

  /* Floating selection bar shares the same safe mobile action zone. */
  .selection-bar-v117{bottom:calc(var(--mobile-nav) + env(safe-area-inset-bottom) + 12px)!important;width:calc(100vw - 24px)!important;max-width:none!important}

  /* Prevent desktop-oriented fixed minimums from compressing the app viewport. */
  .grid,.panel,.workbench,.can-main,.production-planning-v114,.plan-main-v114,.plan-side-v114,
  .comm-layout,.settings-main-v11,.settings-shell-v11,.calendar-shell,.operation-pane-v18{min-width:0!important;max-width:100%!important}
  .g2,.g2eq,.g3,.g4,.platform-grid,.preview-strip,.delivery-board,.settings-cards,.state-gallery{grid-template-columns:minmax(0,1fr)!important}
  .table-wrap,.table-scroll{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}

  /* Touch affordances. */
  button,.btn,.nav-item,.filter,.channel-tabs button,.radar-tabs button,.studio-tabs button,.publish-tabs button,.analyze-tabs button{touch-action:manipulation}
  .btn:not(.small),.filter{min-height:36px}
}

@media (max-width:380px){
  :root{--mobile-edge:10px}
  .topbar{grid-template-columns:28px minmax(0,1fr) 32px 32px 32px!important;gap:4px!important;padding-left:8px!important;padding-right:8px!important}
  .brand,.brand .logo{width:28px!important;height:28px!important}
  .search-trigger,.create-btn,#avatarBtn{width:32px!important;height:32px!important;min-width:32px!important}
  .channel-btn{max-width:170px!important}
  .context-copy-v118 b{font-size:11.5px!important}
  .mobile-nav{left:6px!important;right:6px!important}
}

@media (max-height:650px) and (max-width:780px){
  :root{--mobile-appbar:50px;--mobile-nav:58px}
  .page{padding-top:10px!important}
  .mobile-nav button b{font-size:15px!important}
  .drawer,.drawer.left{max-height:94dvh!important}
}

@keyframes v130ScrimIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce) and (max-width:780px){
  .mobile-nav,.mobile-nav button{transition:none!important}
}