/* Mobile-only dock for the existing Ralphie and privacy controls.
   The controls keep their original DOM, events, dialogs, and widget code. */

/* Keep decorative/animated layers from widening the document on narrow
   screens. The page itself should never pan sideways. */
html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
}

/* `clip` locks the x-axis without turning both root elements into nested
   scroll containers (which would disable the sticky subpage navigation). */
@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

@media (max-width: 480px) {
  html.rn-mobile-dock-ready body {
    --rn-mobile-dock-edge: 12px;
    --rn-mobile-dock-size: 44px;
    --rn-mobile-dock-gap: 8px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  html.rn-mobile-dock-ready body #rn-ralphie-mascot,
  html.rn-mobile-dock-ready body #rn-privacy-choices-trigger {
    box-sizing: border-box !important;
    left: auto !important;
    right: var(--rn-mobile-dock-edge) !important;
    width: var(--rn-mobile-dock-size) !important;
    height: var(--rn-mobile-dock-size) !important;
    min-width: var(--rn-mobile-dock-size) !important;
    min-height: var(--rn-mobile-dock-size) !important;
    max-width: var(--rn-mobile-dock-size) !important;
    max-height: var(--rn-mobile-dock-size) !important;
    margin: 0 !important;
    border: 2px solid #071943 !important;
    border-radius: 999px !important;
    background-color: #fff9ee !important;
    box-shadow: 0 8px 22px rgba(7, 25, 67, .24) !important;
    opacity: 1;
    overflow: hidden !important;
    transform: translateY(0) !important;
    transition: opacity 100ms ease, transform 100ms ease !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* RALPHIE-CLEANUP (Nico 2026-07-24): remove the bottom-right privacy-choices
     shield on mobile entirely. The footer "/privacy" link remains the access
     point. Desktop keeps its "Privacy choices" pill unchanged. */
  html.rn-mobile-dock-ready body #rn-privacy-choices-trigger {
    display: none !important;
    bottom: calc(var(--rn-mobile-dock-edge) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    color: transparent !important;
    background-image: url("/imgs/generated-components/rn-gen-outline-shield.png?v=20260721rc1") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 25px 25px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
    white-space: nowrap;
  }

  html.rn-mobile-dock-ready body #rn-privacy-choices-trigger::before {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    margin: 0;
    border: 1px solid #fff9ee;
    border-radius: 50%;
    background: #d95241;
  }

  html.rn-mobile-dock-ready body #rn-privacy-choices-trigger[data-consent="granted"]::before {
    background: #087984;
  }

  /* Chat launcher = the prominent, clearly-tappable control (Nico 2026-07-23:
     "where is chatbot / not visible"). Coral fill makes it pop + distinct from
     the cream privacy button; larger than the shared 44px; active badge reads
     as "chat". */
  html.rn-mobile-dock-ready body #rn-ralphie-mascot {
    /* RALPHIE-MATCH-DESKTOP: strip mobile-dock circle so mobile == desktop transparent animated chick.
       POSTER FALLBACK (Nico 2026-07-24 "Ralphie is not there at all"): the mascot
       video does NOT autoplay on real iOS Safari, and the earlier circle-strip set
       background-image:none which erased the widget's mobile.webp poster — leaving a
       transparent, empty button. Restore the static chick poster so Ralphie is ALWAYS
       visible; when the clip does play it renders on top of the poster. */
    background-color: transparent !important;
    background-image: url("/widgets/mascot/ralphie/mobile.webp?v=20260721rc1") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;

    /* Pin Ralphie BOTTOM-LEFT on EVERY page (Nico 2026-07-24: "why is Ralphie on
       the right side not bottom left"). The bottom-left placement used to live only
       in a body.rn-home footer rule, so subpages (body.rnx-anim: Safety, Companies,
       About, etc.) fell back to the shared mobile-dock right-edge position. Set it
       here in mobile-dock.css, which loads on all pages, so it applies everywhere.
       The old bottom stacked above the privacy shield; the shield is removed, so
       pin to the bottom edge. */
    left: var(--rn-mobile-dock-edge) !important;
    right: auto !important;
    bottom: calc(var(--rn-mobile-dock-edge) + env(safe-area-inset-bottom, 0px)) !important;
    width: 108px !important;
    height: 108px !important;
    min-width: 108px !important;
    min-height: 108px !important;
    max-width: 108px !important;
    max-height: 108px !important;
  }

  /* Mobile shows the static transparent poster ONLY, never the video. The mascot
     clip does not reliably autoplay on real iOS Safari (Nico 2026-07-24: "Ralphie
     is not there at all"), and a loaded-but-paused video paints an opaque white
     box in WebKit. Hiding the video removes both failure modes: the true-alpha
     mobile.webp poster above is always visible as a clean bottom-left chick. */
  html.rn-mobile-dock-ready body #rn-ralphie-mascot video {
    display: none !important;
  }

  html.rn-mobile-dock-ready body #rn-ralphie-panel {
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }

  html.rn-mobile-dock-ready body #rn-ralphie-mascot:focus-visible,
  html.rn-mobile-dock-ready body #rn-privacy-choices-trigger:focus-visible {
    outline: 3px solid #4ebdf7 !important;
    outline-offset: 3px !important;
  }

  /* Ralphie stays VISIBLE at all times, including while scrolling (Nico
     2026-07-24: "if I scroll he disappears"). The prior scroll-hide tucked him
     away during active scroll and relied on a "settled" class being removed to
     bring him back — which did not fire reliably on iOS, leaving him gone. Keep
     him pinned and visible whether the page is scrolling or at rest. */
  html.rn-mobile-dock-scrolling body #rn-ralphie-mascot {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  html.rn-mobile-dock-ready body #rn-ralphie-mascot,
  html.rn-mobile-dock-ready body #rn-privacy-choices-trigger {
    transition: none !important;
  }
}