/* VX Product UX #37 — compact, reliable mobile headers. */
@media (max-width:820px){
  /* Public landing: keep a real /access link available even before JS finishes loading. */
  body.vx-public-guest .vx-public-header{position:relative;z-index:120}
  body.vx-public-guest .vx-public-header__inner{
    min-height:54px!important;
    gap:8px!important;
  }
  body.vx-public-guest .vx-public-brand{gap:7px!important;font-size:15px!important;min-width:0}
  body.vx-public-guest .vx-public-brand img{width:30px!important;height:30px!important;border-radius:9px!important}
  body.vx-public-guest .vx-public-nav{gap:5px!important;flex:0 0 auto}
  body.vx-public-guest .vx-public-nav .vxPublicLoginLink{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-height:34px!important;padding:7px 11px!important;margin:0!important;
    position:relative;z-index:2;touch-action:manipulation;
  }

  /* Authenticated cabinet header: reserve space for notifications and profile first. */
  body.vx-authenticated > header:not(.vx-public-header){
    min-height:50px!important;
    height:50px!important;
    box-sizing:border-box!important;
    padding:5px 7px!important;
    gap:5px!important;
    overflow:visible!important;
    z-index:2050!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) .vxCabinetLegacyBrand{
    display:flex!important;align-items:center!important;gap:5px!important;
    min-width:0!important;flex:0 1 auto!important;margin:0!important;padding:0!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) .vxCabinetLegacyBrand > img{
    width:26px!important;height:26px!important;flex:0 0 26px!important;
    border-radius:7px!important;margin:0!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) .vxCabinetLegacyBrand > b{
    margin:0!important;padding:0!important;font-size:13px!important;line-height:1!important;
    letter-spacing:-.02em!important;white-space:nowrap!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) > .row{
    min-width:0!important;gap:5px!important;margin-left:auto!important;
    flex:1 1 auto!important;justify-content:flex-end!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) #project-switcher{
    min-width:70px!important;max-width:112px!important;width:auto!important;
    height:34px!important;flex:0 1 112px!important;
    padding:0 23px 0 8px!important;border-radius:9px!important;font-size:11px!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) #notify-bell{
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
    flex:0 0 34px!important;border-radius:9px!important;font-size:15px!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) #notify-count{
    top:-4px!important;right:-4px!important;min-width:16px!important;height:16px!important;
    padding:0 4px!important;font-size:9px!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) #profile-wrap{
    display:flex!important;visibility:visible!important;opacity:1!important;
    min-width:34px!important;width:34px!important;height:34px!important;flex:0 0 34px!important;
    position:relative!important;z-index:2060!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) #profile-toggle{
    display:flex!important;visibility:visible!important;opacity:1!important;
    width:34px!important;height:34px!important;min-width:34px!important;
    padding:2px!important;border-radius:9px!important;
  }
  body.vx-authenticated > header:not(.vx-public-header) #profile-avatar-fallback{font-size:15px!important}
  body.vx-authenticated > header:not(.vx-public-header) #profile-panel{
    top:56px!important;right:7px!important;
    width:min(330px,calc(100vw - 14px))!important;
    max-height:calc(100dvh - 68px - env(safe-area-inset-bottom,0px))!important;
    z-index:2147482000!important;
  }
}

@media (max-width:430px){
  body.vx-authenticated > header:not(.vx-public-header) #project-switcher{
    max-width:96px!important;flex-basis:96px!important;
  }
}

@media (max-width:380px){
  body.vx-authenticated > header:not(.vx-public-header) .vxHeaderBrandPlatform{display:none!important}
  body.vx-authenticated > header:not(.vx-public-header) #project-switcher{
    max-width:86px!important;flex-basis:86px!important;
  }
}