/* The bottom navigation bar, built to match AppBottomNav in the app.
 *
 * The app draws a soft neumorphic pill: a light violet bar, an inner rounded
 * tray with a white hairline and a wide soft shadow, and one raised, tinted
 * pill behind whichever tab is active. The web had a flat white strip, so the
 * bar did not read as the same control. These are the app's colours and
 * measurements.
 */

/* The bar is only a row now. The app keeps Home, Lobby and Settings inside one
   neumorphic pill and Vibe outside it, so the pill moved to .nav-pill below and
   this element carries no surface of its own. */
.bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* The three tabs, in the app's tray: the light violet gradient, the white
   hairline and the wide soft shadow, exactly as AppBottomNav draws them. */
.nav-pill {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 5px;
  border-radius: 30px;
  background: linear-gradient(
    to bottom,
    #faf8ff,
    #f5f0fa 50%,
    #eee7f7
  );
  border: 1px solid #ffffff;
  box-shadow: 0 10px 26px #5b3fa81f;
}

.nav-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 56px;
  padding: 4px 2px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #344157;
  font: inherit;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}

.nav-btn span {
  line-height: 11px;
  font-size: 9px;
  font-weight: 500;
}

.nav-btn.active {
  background: linear-gradient(
    to bottom,
    #f0e6ff,
    #e0ceff 50%,
    #e9dafa
  );
  border: 1px solid #ffffff;
  box-shadow: 0 5px 13px #6d35d02e;
  color: #6d35d0;
}

.nav-btn.active span {
  font-weight: 700;
}

.nav-icon {
  width: 19px;
  height: 19px;
  display: block;
  flex: none;
  color: inherit;
}

.nav-btn:not(.active) .nav-icon {
  opacity: 0.9;
}

.nav-btn:focus-visible {
  outline: 2px solid #9a6be8;
  outline-offset: -3px;
  border-radius: 15px;
}

/* Vibe, apart from the tray, drawn as the app's VibeButton draws it: a 48dp
   circle on #21143B carrying four layers from its Canvas.

     1  the glow       a soft wash around the core, gone by 40% of the circle.
                       Held back from the app's 49% because a browser paints a
                       radial gradient over the whole element at once, so the
                       same numbers read much brighter than the Canvas does.
     2  the highlight  a light wash at the top left, centred at 28% by 24%
     3  the core       white, 7px of the 48, breathing between 0.88 and 1.08
                       every 1100ms
     4  the orbit      a #D6B7FF dot at 5.5% riding 25% out from the centre,
                       a full turn every 3200ms, with a white pip inside it

   The app animates this on a Canvas; the web does the same work in CSS. */
.nav-vibe {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #21143b;
  cursor: pointer;
  overflow: hidden;
}

.nav-vibe::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 28% 24%,
      #ffffff2e 0%,
      transparent 15%
    ),
    radial-gradient(
      circle at 50% 50%,
      #e3c8ffdb 0%,
      #9a5cff9c 12%,
      #6f35da2e 26%,
      transparent 40%
    );
}

.nav-vibe::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -14.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #d6b7ff;
  box-shadow: inset 0 0 0 1.2px #ffffffd9;
  transform-origin: 2.5px 14.5px;
  animation: nav-vibe-orbit 3.2s linear infinite;
}

.nav-vibe-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fffffff0;
  animation: nav-vibe-pulse 1.1s ease-in-out infinite alternate;
}

@keyframes nav-vibe-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes nav-vibe-pulse {
  from { transform: scale(0.88); }
  to { transform: scale(1.08); }
}

.nav-vibe:focus-visible {
  outline: 2px solid #9a6be8;
  outline-offset: 2px;
}

/* The Lobby status dot keeps the same family as the navigation icons. */
.lobby-status-icon,
.ui-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.lobby-svg-icon {
  width: 19px;
  height: 19px;
}



/* --------------------------------------------------------------------------
   On a desktop the same control stands up the right-hand side, from the top
   of the window to the bottom, beside the page. The three tabs stay in their
   tray at the top of the rail and the Vibe button takes the bottom, the way
   the app keeps the three together and Vibe apart.

   This lives here, not in style.css, for two reasons: this file is loaded
   after style.css, and it is loaded after shared/safe-layout/safe-layout.css,
   which pins the bar's height and padding down with !important. A rule in
   style.css is overruled by that file whatever it says, which is why the bar
   stayed 58px tall and the tabs bunched up at the top.
   -------------------------------------------------------------------------- */
/* Standing the tabs up the side is for a pointer, not for a narrow screen
   pretending to be wide. A phone in desktop mode gets the bottom bar. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* The row becomes the rail. It carries no surface: the tray keeps its own
     gradient below, and the Vibe button keeps its circle. */
  #app.phone-shell .bottom-nav {
    position: fixed !important;
    /* below the top bar's line, not over it: the tabs start where the page
       starts, the way they do in the app */
    top: var(--indoone-topbar-base, 76px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: var(--nav-w, 92px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    /* the row runs the whole side: the tray at the top, the Vibe button at
       the bottom */
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 14px 8px !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* The tray stands up and runs the rail's full height, the way it did before,
     with the three tabs spread down it rather than bunched at the top. The
     Vibe button keeps its own place at the bottom, outside the tray. */
  #app.phone-shell .bottom-nav .nav-pill {
    flex: 1 1 auto !important;
    width: 100% !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    /* the tray's own shape is a pill 30dp across; standing up it is a rail,
       so the corners come off and the left edge carries the line instead */
    border-radius: 0 !important;
    border: 0 !important;
    border-left: 1px solid #eeeaf2 !important;
    /* the app's background, not a flat white one. This is the tray gradient
       from AppBottomNav: Color(0xFFFAF8FF), 0xFFF5F0FA, 0xFFEEE7F7. Painting
       it white here is what made the tabs look washed out. */
    background: linear-gradient(
      to bottom,
      #faf8ff,
      #f5f0fa 50%,
      #eee7f7
    ) !important;
    box-shadow: none !important;
  }

  /* In the app only the tab you are on carries a surface; the other three are
     bare, and it is their switch to one that brings its background in. A first
     attempt at this gave every tab a soft white card so they would read as
     buttons in a tall rail, and that was wrong: it put a background on the
     three that the app leaves plain. They are bare again here.
     .nav-btn.active, above, still paints the app's violet pill - it is more
     specific, so it wins, and it is the only one that does. */
  /* Only the size is set here. The surface is left alone on purpose: the base
     .nav-btn above already draws none, and .nav-btn.active above paints the
     app's violet pill. Writing "background: transparent !important" here to
     say the same thing looked harmless and was not - !important beats the
     active rule's plain background whatever its specificity, so it wiped the
     pill off the tab you are on as well. All of them measured transparent,
     the active one among them. */
  #app.phone-shell .bottom-nav .nav-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 82px !important;
  }
}