/* Legal Works | Nexo real mobile size and vertical position v410 R2
   Scope: mobile CSS only.
   Keeps the compact V407 guide unchanged.
*/

@media (max-width: 700px) {
  /*
   * Keep the guide card exactly in the compact V407 layout.
   */
  html body .lw-nexo-root.is-open .lw-nexo-stage {
    z-index: 2147483644 !important;
  }

  /*
   * Original authorized Nexo container:
   * - no rectangle;
   * - no clipping;
   * - no visual frame;
   * - base placed above the bottom navigation.
   */
  html body .lw-nexo-root.is-open .lw-nexo-avatar-shell {
    position: fixed !important;
    inset:
      auto
      auto
      calc(
        env(safe-area-inset-bottom, 0px) +
        112px
      )
      8px !important;
    z-index: 2147483647 !important;

    width: 174px !important;
    min-width: 174px !important;
    max-width: 174px !important;

    height: 265px !important;
    min-height: 265px !important;
    max-height: 265px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    clip: auto !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;

    contain: none !important;
    overflow: visible !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;
    filter: none !important;

    pointer-events: none !important;

    /*
     * v405 uses this variable on the stable body/head renderer.
     * Five makes the authorized Nexo approximately five times larger
     * than the currently visible mobile rendering.
     */
    --lw-nexo-pose-scale: 5 !important;
  }

  html body .lw-nexo-root.is-open
  .lw-nexo-avatar-shell::before,
  html body .lw-nexo-root.is-open
  .lw-nexo-avatar-shell::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /*
   * Position the stable renderer directly. Its bottom edge represents
   * Nexo's feet and remains above the bottom navigation.
   */
  html body .lw-nexo-root.is-open .lw-nexo-gesture-frame {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom:
      calc(
        env(safe-area-inset-bottom, 0px) +
        112px
      ) !important;
    left: 88px !important;

    z-index: 2147483647 !important;

    width: 174px !important;
    min-width: 174px !important;
    max-width: 174px !important;

    height: 265px !important;
    min-height: 265px !important;
    max-height: 265px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    clip: auto !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;

    contain: none !important;
    overflow: visible !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    transform:
      translate3d(-50%, 0, 0)
      scale(1.35) !important;
    transform-origin: center bottom !important;

    filter: none !important;
    pointer-events: none !important;

    --lw-nexo-pose-scale: 5 !important;
  }

  html body .lw-nexo-root.is-open .lw-nexo-gesture-slot {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    clip: auto !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;

    contain: none !important;
    overflow: visible !important;

    visibility: visible !important;
    opacity: 1 !important;

    --lw-nexo-pose-scale: 5 !important;
  }

  html body .lw-nexo-root.is-open
  .lw-nexo-gesture-slot::before,
  html body .lw-nexo-root.is-open
  .lw-nexo-gesture-slot::after,
  html body .lw-nexo-root.is-open
  .lw-nexo-gesture-frame::before,
  html body .lw-nexo-root.is-open
  .lw-nexo-gesture-frame::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .lw-nexo-root.is-open .lw-nexo-gesture-body,
  html body .lw-nexo-root.is-open .lw-nexo-gesture-head {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    clip: auto !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;

    max-width: none !important;
    max-height: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    scale: var(
      --lw-nexo-pose-scale,
      5
    ) !important;
  }

  /*
   * Only the stable body/head renderer is visible.
   */
  html body .lw-nexo-root.is-open
  .lw-nexo-professional-composite,
  html body .lw-nexo-root.is-open
  .lw-nexo-rive-canvas,
  html body .lw-nexo-root.is-open
  .lw-nexo-avatar,
  html body .lw-nexo-root.is-open
  .lw-nexo-vector-avatar,
  html body .lw-nexo-help {
    display: none !important;
  }
}

@media (max-width: 380px) {
  html body .lw-nexo-root.is-open .lw-nexo-avatar-shell {
    left: 5px !important;
    bottom:
      calc(
        env(safe-area-inset-bottom, 0px) +
        106px
      ) !important;

    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    height: 228px !important;
    min-height: 228px !important;
    max-height: 228px !important;

    --lw-nexo-pose-scale: 4.4 !important;
  }

  html body .lw-nexo-root.is-open .lw-nexo-gesture-frame {
    left: 76px !important;
    bottom:
      calc(
        env(safe-area-inset-bottom, 0px) +
        106px
      ) !important;

    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    height: 228px !important;
    min-height: 228px !important;
    max-height: 228px !important;

    transform:
      translate3d(-50%, 0, 0)
      scale(1.18) !important;

    --lw-nexo-pose-scale: 4.4 !important;
  }

  html body .lw-nexo-root.is-open .lw-nexo-gesture-slot {
    --lw-nexo-pose-scale: 4.4 !important;
  }
}