/* Legal Works | Nexo mobile adaptive position v410 R3
   Mobile CSS only. Guide V407 and application logic are unchanged.
*/

@media (max-width: 700px) {
  :root {
    --lw-nexo-mobile-clearance: clamp(94px, 10.5dvh, 122px);
    --lw-nexo-mobile-left: clamp(3px, 1.6vw, 10px);
    --lw-nexo-mobile-width: clamp(72px, 21vw, 104px);
    --lw-nexo-mobile-height: clamp(108px, 31vw, 158px);
    --lw-nexo-mobile-center: clamp(39px, 12vw, 62px);
    --lw-nexo-mobile-frame-scale: .40;
    --lw-nexo-mobile-pose-scale: 1.15;
    --lw-nexo-mobile-guide-left: clamp(84px, 24vw, 110px);
  }

  /* Reserve a left corridor so Nexo stays outside the guide card. */
  html body .lw-nexo-root.is-open .lw-nexo-stage {
    left: var(--lw-nexo-mobile-guide-left) !important;
    right: 6px !important;
    z-index: 2147483644 !important;
    pointer-events: none !important;
  }

  html body .lw-nexo-root.is-open .lw-nexo-dialog {
    max-height: min(34dvh, 300px) !important;
    z-index: 2147483644 !important;
    pointer-events: auto !important;
  }

  html body .lw-nexo-help {
    display: none !important;
  }

  /* Transparent authorized Nexo container 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) +
        var(--lw-nexo-mobile-clearance)
      )
      var(--lw-nexo-mobile-left) !important;

    z-index: 2147483647 !important;

    width: var(--lw-nexo-mobile-width) !important;
    min-width: var(--lw-nexo-mobile-width) !important;
    max-width: var(--lw-nexo-mobile-width) !important;

    height: var(--lw-nexo-mobile-height) !important;
    min-height: var(--lw-nexo-mobile-height) !important;
    max-height: var(--lw-nexo-mobile-height) !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;

    --lw-nexo-pose-scale:
      var(--lw-nexo-mobile-pose-scale) !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;
  }

  /* Stable real body/head renderer. */
  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) +
        var(--lw-nexo-mobile-clearance)
      ) !important;

    left: var(--lw-nexo-mobile-center) !important;
    z-index: 2147483647 !important;

    width: var(--lw-nexo-mobile-width) !important;
    min-width: var(--lw-nexo-mobile-width) !important;
    max-width: var(--lw-nexo-mobile-width) !important;

    height: var(--lw-nexo-mobile-height) !important;
    min-height: var(--lw-nexo-mobile-height) !important;
    max-height: var(--lw-nexo-mobile-height) !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(var(--lw-nexo-mobile-frame-scale)) !important;
    transform-origin: center bottom !important;

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

    --lw-nexo-pose-scale:
      var(--lw-nexo-mobile-pose-scale) !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;
    pointer-events: none !important;

    --lw-nexo-pose-scale:
      var(--lw-nexo-mobile-pose-scale) !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;

    pointer-events: none !important;
    scale: var(--lw-nexo-mobile-pose-scale) !important;
  }

  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 {
    display: none !important;
  }

  /* Never block bottom-menu or application buttons. */
  html body .lw-nexo-root.is-open
  .lw-nexo-avatar-shell,
  html body .lw-nexo-root.is-open
  .lw-nexo-gesture-frame,
  html body .lw-nexo-root.is-open
  .lw-nexo-gesture-frame * {
    pointer-events: none !important;
  }
}

@media (max-width: 360px) {
  :root {
    --lw-nexo-mobile-clearance: clamp(90px, 10.5dvh, 108px);
    --lw-nexo-mobile-width: clamp(66px, 19vw, 76px);
    --lw-nexo-mobile-height: clamp(100px, 29vw, 116px);
    --lw-nexo-mobile-center: clamp(35px, 10.5vw, 42px);
    --lw-nexo-mobile-frame-scale: .33;
    --lw-nexo-mobile-pose-scale: 1.02;
    --lw-nexo-mobile-guide-left: clamp(76px, 22vw, 84px);
  }
}

@media (min-width: 361px) and (max-width: 430px) {
  :root {
    --lw-nexo-mobile-frame-scale: .38;
    --lw-nexo-mobile-pose-scale: 1.10;
  }
}

@media (min-width: 431px) and (max-width: 520px) {
  :root {
    --lw-nexo-mobile-frame-scale: .43;
    --lw-nexo-mobile-pose-scale: 1.18;
  }
}

@media (min-width: 521px) and (max-width: 700px) {
  :root {
    --lw-nexo-mobile-frame-scale: .47;
    --lw-nexo-mobile-pose-scale: 1.24;
  }
}

@media (max-width: 700px) and (max-height: 620px) {
  :root {
    --lw-nexo-mobile-clearance: clamp(78px, 14dvh, 94px);
    --lw-nexo-mobile-width: clamp(62px, 17vw, 82px);
    --lw-nexo-mobile-height: clamp(92px, 25vw, 122px);
    --lw-nexo-mobile-center: clamp(33px, 10vw, 46px);
    --lw-nexo-mobile-frame-scale: .33;
    --lw-nexo-mobile-pose-scale: 1.02;
    --lw-nexo-mobile-guide-left: clamp(72px, 21vw, 88px);
  }
}