/* VX Platform mobile hybrid navigation. Desktop remains unchanged. */
.vxMobileHybridBottom,.vxMobileProfileExtras{display:none!important}
@media (max-width:820px){
  :root{--vx-mobile-header:56px;--vx-mobile-bottom:72px}
  body.vx-authenticated{padding-bottom:calc(var(--vx-mobile-bottom) + env(safe-area-inset-bottom,0px))}

  /* Compact header: brand + profile only */
  body.vx-authenticated .vxMobileCabinetHeader{
    height:var(--vx-mobile-header)!important;min-height:var(--vx-mobile-header)!important;
    padding:0 12px!important;display:flex!important;align-items:center!important;
    left:0!important;right:0!important;gap:8px!important;overflow:visible!important
  }
  body.vx-authenticated .vxMobileCabinetHeader > div:first-child{display:flex!important}
  body.vx-authenticated .vxMobileCabinetHeader > div:first-child > *{display:none!important}
  body.vx-authenticated .vxMobileCabinetHeader > div:first-child > img,
  body.vx-authenticated .vxMobileCabinetHeader > div:first-child > b{display:block!important}
  body.vx-authenticated .vxMobileCabinetHeader > div:first-child > img{width:32px!important;height:32px!important;border-radius:9px!important}
  body.vx-authenticated .vxMobileCabinetHeader > div:first-child > b{font-size:15px;white-space:nowrap}
  body.vx-authenticated .vxMobileCabinetHeader > .vxTopbarContext{display:none!important}
  body.vx-authenticated .vxMobileCabinetHeader > .row{margin-left:auto!important;display:flex!important;gap:0!important}
  body.vx-authenticated #project-switcher,
  body.vx-authenticated .vxProjectAdd,
  body.vx-authenticated #ultra-badge,
  body.vx-authenticated #notify-bell,
  body.vx-authenticated #login,
  body.vx-authenticated #logout{display:none!important}
  body.vx-authenticated #profile-wrap{display:block!important;position:relative!important}
  body.vx-authenticated #profile-toggle{width:40px!important;height:40px!important;padding:2px!important;border-radius:13px!important}
  body.vx-authenticated #profile-avatar{width:34px!important;height:34px!important}
  body.vx-authenticated #profile-panel{
    position:fixed!important;top:calc(var(--vx-mobile-header) + 8px)!important;left:10px!important;right:10px!important;
    width:auto!important;max-width:none!important;max-height:calc(100dvh - var(--vx-mobile-header) - 24px)!important;
    overflow:auto!important;z-index:2300!important;padding-bottom:12px!important
  }
  .vxMobileProfileExtras{display:grid;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--vx-line)}
  .vxMobileProfileAction{width:100%;display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px!important;border-radius:11px!important}
  .vxMobileProfileAction.is-danger{color:#ffb3ba!important;border-color:rgba(239,92,103,.35)!important;background:rgba(239,92,103,.1)!important}
  .vxMobileProfileUnread{min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:#ef5c67;color:#fff;font-size:11px;font-weight:850}
  .vxMobileProfileUnread:empty,.vxMobileProfileUnread[data-count="0"]{display:none}
  body.vx-authenticated #notify-panel{
    position:fixed!important;top:calc(var(--vx-mobile-header) + 8px)!important;left:10px!important;right:10px!important;
    width:auto!important;max-width:none!important;max-height:calc(100dvh - var(--vx-mobile-header) - 24px)!important;
    overflow:auto!important;z-index:2400!important
  }

  /* Explicit cabinet header target: desktop header is untouched. */
  body.vx-authenticated .vxMobileCabinetHeader{
    position:sticky!important;top:0!important;z-index:2250!important;width:100%!important;
    max-width:none!important;box-sizing:border-box!important;background:rgba(7,10,16,.98)!important
  }
  body.vx-authenticated .vxMobileCabinetHeader > div:first-child{min-width:0!important;flex:1 1 auto!important}
  body.vx-authenticated .vxMobileCabinetHeader > div:first-child > a{display:none!important}
  body.vx-authenticated .vxMobileCabinetHeader > .row{flex:0 0 auto!important}
  body.vx-public-guest .vxMobileCabinetHeader{display:none!important}

  /* Existing sidebar becomes a bottom-sheet full menu */
  #vx-app-sidebar{
    inset:auto 8px calc(var(--vx-mobile-bottom) + env(safe-area-inset-bottom,0px) + 8px) 8px!important;
    width:auto!important;max-height:min(72dvh,650px)!important;border:1px solid var(--vx-line-strong)!important;
    border-radius:22px!important;padding:12px!important;transform:translateY(calc(100% + 120px))!important;
    box-shadow:0 28px 90px rgba(0,0,0,.62)!important;transition:transform .22s ease!important;
    z-index:2220!important;filter:none!important;backdrop-filter:none!important
  }
  body.vx-sidebar-open #vx-app-sidebar{transform:translateY(0)!important}
  #vx-app-sidebar .vxSidebarBrand{min-height:42px;padding:2px 6px 10px!important}
  #vx-app-sidebar .vxSidebarBrand img{width:34px;height:34px}
  #vx-app-sidebar .vxSidebarBrandText span{display:none}
  #vx-app-sidebar .vxSidebarSectionHead{display:none!important}
  #vx-app-sidebar .tabs{display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important;padding:2px;overflow:auto!important}
  #vx-app-sidebar .tab,#vx-app-sidebar .vx-support-nav-link{
    min-height:50px!important;white-space:normal!important;font-size:12px!important;padding:10px!important
  }
  #vx-app-sidebar .vxSidebarFooter{display:none!important}
  #vx-mobile-nav-shade{z-index:2150!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.vx-sidebar-open #vx-mobile-nav-shade{background:rgba(1,4,9,.72)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.vx-public-guest .vxMobileHybridBottom,html.vx-auth-checking .vxMobileHybridBottom{display:none!important}

  /* Hybrid fixed bottom navigation */
  body.vx-authenticated .vxMobileHybridBottom{
    position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:2100;
    height:64px;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));padding:4px;
    border:1px solid var(--vx-line-strong);border-radius:20px;background:rgba(13,18,29,.97);
    box-shadow:0 18px 55px rgba(0,0,0,.48);backdrop-filter:blur(16px)
  }
  body.vx-authenticated .vxMobileHybridBottom button{border:0!important;background:transparent!important;box-shadow:none!important;color:#8f9cad!important;padding:4px 2px!important;min-width:0;border-radius:14px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px!important}
  body.vx-authenticated .vxMobileHybridBottom button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9}
  body.vx-authenticated .vxMobileHybridBottom button.is-active{color:#d9d2ff!important;background:rgba(113,144,255,.12)!important}
  body.vx-authenticated .vxMobileHybridBottom button.is-locked{opacity:.62}
  body.vx-authenticated .vxMobileHybridBottom .vxMobileBottomBadge{position:absolute;transform:translate(11px,-13px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ef5c67;color:#fff;font-size:9px;display:grid;place-items:center}

  /* Horizontal subsection bars, matching prototype 3 */
  body.vx-authenticated .vxOpsNav,
  body.vx-authenticated .owner-tabs,
  body.vx-authenticated .vxOwnerTabs,
  body.vx-authenticated .vxTmTabs,
  body.vx-authenticated .vxIntegrationViewSwitch,
  body.vx-authenticated .vxServerTabs{
    position:sticky!important;top:var(--vx-mobile-header)!important;z-index:120!important;
    display:flex!important;flex-wrap:nowrap!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;
    padding:8px 4px!important;margin-left:-4px!important;margin-right:-4px!important;
    background:rgba(7,10,16,.94)!important;backdrop-filter:blur(14px);scrollbar-width:none!important
  }
  body.vx-authenticated .vxOpsNav::-webkit-scrollbar,
  body.vx-authenticated .owner-tabs::-webkit-scrollbar,
  body.vx-authenticated .vxOwnerTabs::-webkit-scrollbar,
  body.vx-authenticated .vxTmTabs::-webkit-scrollbar,
  body.vx-authenticated .vxIntegrationViewSwitch::-webkit-scrollbar,
  body.vx-authenticated .vxServerTabs::-webkit-scrollbar{display:none!important}
  body.vx-authenticated .vxOpsNav button,
  body.vx-authenticated .owner-tabs button,
  body.vx-authenticated .vxOwnerTabs button,
  body.vx-authenticated .vxTmTabs button,
  body.vx-authenticated .vxIntegrationViewSwitch button,
  body.vx-authenticated .vxServerTabs button{
    flex:0 0 auto!important;white-space:nowrap!important;min-height:38px!important;padding:8px 12px!important;border-radius:999px!important
  }

  body.vx-authenticated > .wrap{padding-top:calc(var(--vx-mobile-header) + 12px)!important;padding-bottom:calc(var(--vx-mobile-bottom) + 20px)!important}
}
@media (min-width:821px){.vxMobileHybridBottom,.vxMobileProfileExtras{display:none!important}}