/*
 * ==========================================================
 * VIBE ADAPTIVE NAVIGATION 2.0
 * ==========================================================
 */

/* VIBE_ADAPTIVE_NAV_V20 */

.vmobile-nav,
.vmobile-more-backdrop,
.vmobile-more{
  display:none;
}


@media(max-width:820px){

  /*
   * Existing desktop sidebar becomes mobile bottom HUD.
   */

  .vs-sidebar{
    display:none !important;
  }


  .vs-shell{
    display:block !important;
  }


  .vs-page{
    padding-bottom:
      max(
        104px,
        calc(
          82px
          +
          env(
            safe-area-inset-bottom
          )
        )
      ) !important;
  }


  .vs-topbar{
    position:sticky;

    top:0;

    z-index:80;
  }


  /*
   * Bottom navigation
   */

  .vmobile-nav{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:900;

    display:grid;

    grid-template-columns:
      repeat(
        5,
        minmax(0,1fr)
      );

    min-height:
      calc(
        62px
        +
        env(
          safe-area-inset-bottom
        )
      );

    padding:
      6px
      7px
      max(
        6px,
        env(
          safe-area-inset-bottom
        )
      );

    border-top:
      1px solid
      var(--vb-border);

    background:
      color-mix(
        in srgb,
        var(--vb-surface-1) 92%,
        transparent
      );

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);
  }


  .vmobile-nav-item{
    min-width:0;
    min-height:48px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:3px;

    padding:
      4px
      2px;

    border:0;
    border-radius:10px;

    color:var(--vb-muted);

    background:transparent;

    text-decoration:none;

    font:inherit;

    cursor:pointer;

    -webkit-tap-highlight-color:
      transparent;
  }


  .vmobile-nav-item:hover,
  .vmobile-nav-item.is-active{
    color:var(--vb-text);

    background:
      rgba(
        255,
        255,
        255,
        .045
      );
  }


  .vmobile-nav-item.is-active{
    color:var(--vb-accent);
  }


  .vmobile-nav-icon{
    width:19px;
    height:19px;

    display:grid;
    place-items:center;
  }


  .vmobile-nav-icon svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
  }


  .vmobile-nav-label{
    max-width:100%;

    overflow:hidden;

    font-size:10px;
    font-weight:750;

    line-height:1.05;

    text-overflow:ellipsis;
    white-space:nowrap;
  }


  /*
   * More overlay
   */

  .vmobile-more-backdrop{
    position:fixed;

    inset:0;

    z-index:910;

    display:block;

    pointer-events:none;

    opacity:0;

    background:
      rgba(
        0,
        0,
        0,
        .55
      );

    transition:
      opacity
      var(--vb-motion-normal)
      var(--vb-ease);
  }


  .vmobile-more{
    position:fixed;

    left:10px;
    right:10px;

    bottom:
      calc(
        70px
        +
        env(
          safe-area-inset-bottom
        )
      );

    z-index:920;

    display:block;

    max-height:
      min(
        68vh,
        620px
      );

    overflow:auto;

    padding:12px;

    border:
      1px solid
      var(--vb-border);

    border-radius:18px;

    background:
      var(--vb-surface-1);

    box-shadow:
      0
      24px
      80px
      rgba(
        0,
        0,
        0,
        .45
      );

    opacity:0;

    pointer-events:none;

    transform:
      translateY(14px)
      scale(.985);

    transform-origin:
      center bottom;

    transition:
      opacity
      var(--vb-motion-normal)
      var(--vb-ease),
      transform
      var(--vb-motion-normal)
      var(--vb-ease);
  }


  html[data-mobile-more="open"]
  .vmobile-more-backdrop{
    opacity:1;

    pointer-events:auto;
  }


  html[data-mobile-more="open"]
  .vmobile-more{
    opacity:1;

    pointer-events:auto;

    transform:
      translateY(0)
      scale(1);
  }


  .vmobile-more-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    padding:
      4px
      5px
      10px;
  }


  .vmobile-more-title{
    color:var(--vb-text);

    font-size:15px;
    font-weight:900;
  }


  .vmobile-more-close{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border:
      1px solid
      var(--vb-border);

    border-radius:9px;

    color:var(--vb-muted);

    background:transparent;

    cursor:pointer;
  }


  .vmobile-more-section{
    margin-top:9px;
  }


  .vmobile-more-section:first-of-type{
    margin-top:0;
  }


  .vmobile-more-section-title{
    margin:
      0
      5px
      5px;

    color:var(--vb-muted);

    font-size:10px;
    font-weight:850;

    letter-spacing:.08em;
    text-transform:uppercase;
  }


  .vmobile-more-grid{
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:6px;
  }


  .vmobile-more-link{
    min-height:43px;

    display:flex;
    align-items:center;

    gap:8px;

    padding:
      7px
      9px;

    border:
      1px solid
      var(--vb-border);

    border-radius:10px;

    color:var(--vb-text);

    background:
      rgba(
        255,
        255,
        255,
        .012
      );

    text-decoration:none;

    font-size:12px;
    font-weight:750;
  }


  .vmobile-more-link.is-active{
    border-color:
      color-mix(
        in srgb,
        var(--vb-accent) 45%,
        var(--vb-border)
      );

    color:var(--vb-accent);

    background:
      color-mix(
        in srgb,
        var(--vb-accent) 8%,
        transparent
      );
  }

}


@media(max-width:430px){

  .vmobile-more-grid{
    grid-template-columns:1fr;
  }


  .vmobile-nav-label{
    font-size:9px;
  }

}


@media(
  prefers-reduced-motion:
  reduce
){

  .vmobile-more,
  .vmobile-more-backdrop{
    transition:none !important;
  }

}