.ss-mobile-tabbar {
  display: none;
}

@media (max-width: 759.98px) {
  :root {
    --ss-mobile-tabbar-base-height: 80px;
    --ss-mobile-tabbar-controls-min-height: 54px;
    --ss-mobile-tabbar-effective-safe-bottom: 0px;
    --ss-mobile-tabbar-height: max(
      var(--ss-mobile-tabbar-controls-min-height),
      calc(var(--ss-mobile-tabbar-base-height) - var(--ss-mobile-tabbar-effective-safe-bottom))
    );
    --ss-mobile-tabbar-occupied-height: calc(
      var(--ss-mobile-tabbar-height) + var(--ss-mobile-tabbar-effective-safe-bottom)
    );
    --ss-mobile-tabbar-content-offset: calc(var(--ss-mobile-tabbar-occupied-height) + 12px);
    --ss-mobile-tabbar-controls-top-padding: clamp(
      4px,
      calc(var(--ss-mobile-tabbar-height) - 73px),
      7px
    );
    --ss-mobile-tabbar-item-min-height: clamp(
      50px,
      calc(var(--ss-mobile-tabbar-height) - 18px),
      62px
    );
    --ss-mobile-tabbar-item-gap: clamp(
      4px,
      calc(var(--ss-mobile-tabbar-height) - 71px),
      9px
    );
    --ss-mobile-tabbar-capsule-width: 52px;
    --ss-mobile-tabbar-capsule-height: 32px;
    --ss-mobile-tabbar-active-shape: polygon(18.353px 0, 11.895px 0.681px, 8.157px 1.362px, 4.078px 3.064px, 2.379px 4.426px, 1.359px 5.787px, 1.02px 6.468px, 1.02px 7.149px, 0.68px 7.489px, 0.68px 8.17px, 0.34px 8.511px, 0.34px 9.872px, 0 10.213px, 0 22.128px, 0.34px 22.468px, 0.34px 23.83px, 0.68px 24.17px, 0.68px 24.851px, 1.02px 25.191px, 1.02px 25.872px, 1.699px 27.234px, 4.418px 29.617px, 6.118px 30.298px, 8.157px 30.979px, 14.614px 32px, 37.046px 32px, 43.843px 30.979px, 46.902px 29.957px, 48.941px 28.596px, 49.961px 27.574px, 49.961px 27.234px, 50.641px 26.553px, 51.32px 25.191px, 51.32px 24.511px, 51.66px 24.17px, 51.66px 22.809px, 52px 22.468px, 52px 9.872px, 51.66px 9.532px, 51.66px 8.17px, 51.32px 7.83px, 51.32px 7.149px, 50.641px 5.787px, 49.281px 4.085px, 47.582px 2.723px, 44.863px 1.702px, 42.144px 1.021px, 33.987px 0);
    --ss-mini-player-content-reserve: 94px;
  }

  body.ss-mobile-tabbar-enabled {
    padding-bottom: calc(var(--ss-mobile-tabbar-content-offset) + 10px);
  }

  body.ss-mobile-tabbar-enabled.ss-mini-visible {
    padding-bottom: calc(var(--ss-mobile-tabbar-content-offset) + 10px + var(--ss-mini-player-content-reserve));
  }

  body.ss-full-player-open.ss-mobile-tabbar-enabled {
    padding-bottom: 0;
  }

  body.ss-mobile-tabbar-auth-standalone .wrapper {
    min-height: calc(100vh + 72px);
  }

  @supports (min-height: 100dvh) {
    body.ss-mobile-tabbar-auth-standalone .wrapper {
      min-height: calc(100dvh + 72px);
    }
  }

  .ss-mobile-tabbar {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9998;
    display: block;
    padding: 0;
    pointer-events: none;
  }

  .ss-mobile-tabbar__surface {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(1px, 0.5vw, 4px);
    min-height: var(--ss-mobile-tabbar-occupied-height);
    box-sizing: border-box;
    padding:
      var(--ss-mobile-tabbar-controls-top-padding)
      calc(6px + var(--ss-safe-area-right))
      var(--ss-mobile-tabbar-effective-safe-bottom)
      calc(6px + var(--ss-safe-area-left));
    background: var(--ss-mobile-tabbar-surface, var(--ss-chrome-surface, #1a1a1a));
    box-shadow: none;
    direction: rtl;
    overflow: hidden;
    pointer-events: auto;
  }

  .ss-mobile-tabbar__surface::before {
    content: none;
  }

  .ss-mobile-tabbar__indicator {
    position: absolute;
    top: var(--ss-mobile-tabbar-controls-top-padding);
    left: 0;
    z-index: 0;
    width: 0;
    height: var(--ss-mobile-tabbar-capsule-height);
    border-radius: 0;
    -webkit-clip-path: var(--ss-mobile-tabbar-active-shape);
    clip-path: var(--ss-mobile-tabbar-active-shape);
    background: rgba(255, 192, 21, 0.129);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition:
      transform 0.51s cubic-bezier(0.28, 1.48, 0.36, 0.98),
      width 0.34s ease,
      opacity 0.22s ease;
    pointer-events: none;
  }

  .ss-mobile-tabbar__item {
    position: relative;
    z-index: 1;
    flex: 1 1 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ss-mobile-tabbar-item-gap);
    min-width: 0;
    min-height: var(--ss-mobile-tabbar-item-min-height);
    padding: 0;
    color: #999999;
    text-decoration: none;
    text-align: center;
    transition: color 0.3s ease, transform 0.28s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .ss-mobile-tabbar__item:hover,
  .ss-mobile-tabbar__item:focus-visible {
    color: #cbcbcb;
    text-decoration: none;
    outline: 0;
  }

  .ss-mobile-tabbar__item:active {
    transform: translateY(1px);
  }

  .ss-mobile-tabbar__item.is-active {
    color: #ffffff;
  }

  .ss-mobile-tabbar__icon-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ss-mobile-tabbar-capsule-width);
    height: var(--ss-mobile-tabbar-capsule-height);
    border-radius: 0;
    -webkit-clip-path: var(--ss-mobile-tabbar-active-shape);
    clip-path: var(--ss-mobile-tabbar-active-shape);
    transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ss-mobile-tabbar__item.is-active .ss-mobile-tabbar__icon-shell {
    transform: translateY(0);
  }

  .ss-mobile-tabbar__icon {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
  }

  .ss-mobile-tabbar__icon i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    transition:
      opacity 0.34s ease,
      color 0.32s ease,
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ss-mobile-tabbar__icon-light {
    opacity: 1;
    color: #999999;
    transform: scale(1);
  }

  .ss-mobile-tabbar__icon-solid {
    opacity: 0;
    color: #ffc015;
    transform: scale(0.72);
  }

  .ss-mobile-tabbar__item.is-active .ss-mobile-tabbar__icon-light {
    opacity: 0;
    transform: scale(0.62);
  }

  .ss-mobile-tabbar__item.is-active .ss-mobile-tabbar__icon-solid {
    opacity: 1;
    transform: scale(1);
  }

  .ss-mobile-tabbar__label {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
    transition:
      color 0.3s ease,
      transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ss-mobile-tabbar__item.is-active .ss-mobile-tabbar__label {
    transform: translateY(0);
  }

  #ss-mini-player {
    right: 8px;
    left: 8px;
    bottom: var(--ss-mobile-tabbar-occupied-height) !important;
  }
}

/*
 * iOS-family browsers already keep their own bottom toolbar outside the page
 * viewport, so they must not inherit the taller installed-Web-App rhythm.
 * Resolve the approved compact profile at first paint from presentation
 * capabilities only: no UA sniffing, JavaScript measurement or route patch.
 * The mobile breakpoint keeps iPhone landscape/Desktop Rail behavior intact.
 */
@media (max-width: 759.98px) and (display-mode: browser) and (hover: none) and (pointer: coarse) {
  @supports (-webkit-touch-callout: none) {
    :root {
      --ss-mobile-tabbar-base-height: var(--ss-mobile-tabbar-controls-min-height);
    }
  }
}

/*
 * Installed Web Apps draw edge-to-edge. Keep the system inset immutable and
 * compact only the controls layer; the total occupied height remains the sole
 * downstream geometry contract.
 */
@media (max-width: 759.98px) and (display-mode: standalone) {
  :root {
    --ss-mobile-tabbar-effective-safe-bottom: var(--ss-safe-area-bottom);
    --ss-mobile-tabbar-height: max(
      var(--ss-mobile-tabbar-controls-min-height),
      calc(var(--ss-mobile-tabbar-base-height) - var(--ss-mobile-tabbar-effective-safe-bottom))
    );
    --ss-mobile-tabbar-occupied-height: calc(
      var(--ss-mobile-tabbar-height) + var(--ss-mobile-tabbar-effective-safe-bottom)
    );
    --ss-mobile-tabbar-content-offset: calc(var(--ss-mobile-tabbar-occupied-height) + 12px);
    --ss-mobile-tabbar-controls-top-padding: clamp(
      4px,
      calc(var(--ss-mobile-tabbar-height) - 73px),
      7px
    );
    --ss-mobile-tabbar-item-min-height: clamp(
      50px,
      calc(var(--ss-mobile-tabbar-height) - 18px),
      62px
    );
    --ss-mobile-tabbar-item-gap: clamp(
      4px,
      calc(var(--ss-mobile-tabbar-height) - 71px),
      9px
    );
  }

  /*
   * iOS collapses visualViewport.height to the layout viewport on any short,
   * exactly non-scrollable standalone route. A one-pixel document sentinel
   * keeps the physical viewport contract stable without route selectors,
   * JavaScript measurement or a visible safe-area-sized blank tail.
   */
  @supports (-webkit-touch-callout: none) {
    body {
      min-height: calc(100vh + 1px);
    }
  }
}

@media (min-width: 760px) {
  .ss-mobile-tabbar {
    display: none !important;
  }
}