/* VX Platform mobile bottom navigation only. Does not move or replace the working header/profile/notifications. */
.vxMobileHybridBottom{display:none!important}
@media (max-width:820px){
  :root{--vx-mobile-bottom:72px}
  body.vx-authenticated{padding-bottom:calc(var(--vx-mobile-bottom) + env(safe-area-inset-bottom,0px))}

  /* Existing sidebar becomes a bottom-sheet when opened from 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}
  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{
    position:relative;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;top:3px;left:50%;transform:translateX(8px);min-width:17px;height:17px;padding:0 4px;
    border-radius:999px;background:#ef5c67;color:#fff;font-size:9px;display:grid;place-items:center;font-style:normal
  }
  body.vx-authenticated > .wrap{padding-bottom:calc(var(--vx-mobile-bottom) + 20px)!important}
}
@media (min-width:821px){.vxMobileHybridBottom{display:none!important}}

/* v23: minimal authenticated mobile cabinet header.
   Keep VX brand, project switcher, notifications and mini-profile. */
@media (max-width:820px){
  body.vx-authenticated > header{
    min-height:58px!important;
    padding:8px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }

  body.vx-authenticated > header > div:first-child{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
    flex:1 1 auto!important;
  }

  body.vx-authenticated > header > div:first-child > img{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
  }

  body.vx-authenticated > header > div:first-child > b{
    display:block!important;
    white-space:nowrap!important;
    font-size:15px!important;
  }

  /* Hide only the two desktop-only links from the authenticated mobile header. */
  body.vx-authenticated > header .vxHeaderCatalogLink,
  body.vx-authenticated > header .vxHeaderPlatformStatusLink{
    display:none!important;
  }

  /* Hide dynamically injected platform/server status controls. */
  body.vx-authenticated > header #vx-cabinet-platform-status,
  body.vx-authenticated > header #vx-cabinet-server-status,
  body.vx-authenticated > header .vxCabinetPlatformStatus,
  body.vx-authenticated > header .vxCabinetServerStatus{
    display:none!important;
  }

  body.vx-authenticated > header > .row{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    flex:0 0 auto!important;
    flex-wrap:nowrap!important;
  }

  /* Keep project switcher; hide only plan/login controls. */
  body.vx-authenticated > header #ultra-badge,
  body.vx-authenticated > header #login{
    display:none!important;
  }



  body.vx-authenticated > header #project-switcher{
    display:block!important;
    max-width:150px!important;
    min-width:86px!important;
    height:36px!important;
    padding:0 28px 0 10px!important;
    margin:0!important;
    border-radius:10px!important;
    flex:0 1 150px!important;
    font-size:12px!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
  }

  body.vx-authenticated > header #notify-bell,
  body.vx-authenticated > header #profile-wrap{
    display:flex!important;
    flex:0 0 auto!important;
  }

  body.vx-authenticated > header #notify-bell{
    align-items:center!important;
    justify-content:center!important;
    min-height:36px!important;
    margin:0!important;
  }

  body.vx-authenticated > header #profile-toggle{
    margin:0!important;
  }
}

/* Mobile profile: keep the existing desktop content, but make the panel viewport-safe. */
@media (max-width: 768px){
  body.vx-authenticated > header #profile-panel{
    position:fixed!important;
    top:72px!important;
    right:10px!important;
    width:min(330px,calc(100vw - 20px))!important;
    max-height:calc(100dvh - 84px - env(safe-area-inset-bottom, 0px))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))!important;
  }

  body.vx-authenticated > header #profile-panel .vxProfilePanelActions{
    display:block!important;
  }

  body.vx-authenticated > header #profile-panel #logout{
    display:block!important;
    width:100%!important;
  }
}

/* Mobile mini-profile logout: icon + label */
@media (max-width: 768px){
  #profile-panel .vxProfilePanelActions #logout{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  #profile-panel .vxLogoutIcon{
    width:18px;
    height:18px;
    flex:0 0 18px;
  }
}


/* v27: deterministic mobile logout appearance. No legacy emoji/pseudo icons. */
@media (max-width: 768px){
  #profile-panel .vxProfilePanelActions #logout{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    font-size:14px!important;
    line-height:1!important;
  }
  #profile-panel .vxProfilePanelActions #logout::before,
  #profile-panel .vxProfilePanelActions #logout::after{
    content:none!important;
    display:none!important;
  }
  #profile-panel .vxProfilePanelActions #logout .vxLogoutIcon{
    display:block!important;
    width:19px!important;
    height:19px!important;
    flex:0 0 19px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:2!important;
    stroke-linecap:round!important;
    stroke-linejoin:round!important;
  }
  #profile-panel .vxProfilePanelActions #logout .vxLogoutLabel{
    display:inline!important;
    visibility:visible!important;
    opacity:1!important;
    width:auto!important;
    height:auto!important;
    overflow:visible!important;
    color:inherit!important;
    font:inherit!important;
  }
}

/* v28: keep logout icon and label as one centered flex group. */
@media (max-width: 768px){
  #profile-panel .vxProfilePanelActions #logout{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    text-align:center!important;
  }
  #profile-panel .vxProfilePanelActions #logout .vxLogoutIcon,
  #profile-panel .vxProfilePanelActions #logout .vxLogoutLabel{
    position:static!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    margin:0!important;
  }
  #profile-panel .vxProfilePanelActions #logout .vxLogoutLabel{
    flex:0 0 auto!important;
  }
}


/* v29: logout content is an isolated centered group. No inline SVG is used,
   so global button/svg rules cannot pull the icon away from the label. */
@media (max-width: 768px){
  #profile-panel .vxProfilePanelActions #logout{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  #profile-panel .vxProfilePanelActions #logout .vxLogoutContent{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:9px!important;
    width:auto!important;
    max-width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    position:static!important;
    transform:none!important;
  }
  #profile-panel .vxProfilePanelActions #logout .vxLogoutIconBox{
    display:block!important;
    flex:0 0 20px!important;
    width:20px!important;
    height:20px!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
    background-color:currentColor!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H5.8C4.8 5 4 5.8 4 6.8v10.4C4 18.2 4.8 19 5.8 19H9'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3Cpath d='M18 12H9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat!important;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H5.8C4.8 5 4 5.8 4 6.8v10.4C4 18.2 4.8 19 5.8 19H9'/%3E%3Cpath d='M14 8l4 4-4 4'/%3E%3Cpath d='M18 12H9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat!important;
  }
  #profile-panel .vxProfilePanelActions #logout .vxLogoutLabel{
    display:block!important;
    flex:0 0 auto!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    text-align:left!important;
    line-height:20px!important;
  }
  #profile-panel .vxProfilePanelActions #logout > svg,
  #profile-panel .vxProfilePanelActions #logout .vxLogoutIcon{
    display:none!important;
  }
}


/* Empty account: project selector is replaced by the create-project action. */
@media (max-width:768px){
  body.vx-authenticated.vx-no-projects > header:not(.vx-public-header) #project-switcher,
  body.vx-authenticated.vx-no-projects > header:not(.vx-public-header) #vx-project-switcher-custom,
  body.vx-authenticated[data-vx-project-count="0"] > header:not(.vx-public-header) #project-switcher,
  body.vx-authenticated[data-vx-project-count="0"] > header:not(.vx-public-header) #vx-project-switcher-custom{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    min-width:0!important;
    max-width:0!important;
    flex:0 0 0!important;
    margin:0!important;
    padding:0!important;
    pointer-events:none!important;
  }
}