/* Mobile layout — hamburger nav + compact home stack (≤900px) */

.v2-mobile-menu-btn,
.v2-mobile-menu-backdrop {
  display: none;
}

@media (max-width: 900px) {
  :root {
    --v2-mobile-header-h: calc(3.55rem + env(safe-area-inset-top, 0px));
    /* One inset for the top and the side, so logo and menu sit evenly in their corners. */
    --v2-mobile-header-inset: 0.7rem;
    --v2-mobile-header-control: calc(3.55rem - 2 * var(--v2-mobile-header-inset));
    --v2-mobile-quarter-in: 0.25in;
    /* Softer hero rise so YOU + Path Finder both clear the menu band */
    --v2-mobile-hero-shift: calc(0.12in + 8px);
    /* Keep map below the fixed header — any upward shift clips top node labels */
    --v2-mobile-map-shift: 0px;
    --v2-mobile-bottom-inset: max(var(--v2-main-gutter), env(safe-area-inset-bottom, 0px));
    --v2-mobile-you-hero-gap: clamp(0.9rem, 2.2vh, 1.25rem);
    /* Hero still shifts up; reserve that delta + gap so YOU stays above Path Finder */
    --v2-mobile-map-kicker-clearance: calc(
      var(--v2-mobile-hero-shift) - var(--v2-mobile-map-shift) + var(--v2-mobile-you-hero-gap)
    );
    --v2-mobile-focus-you-hero-gap: 0px;
    --v2-mobile-focus-hero-nudge: 1.1rem;
    /*
     * Mobile prompt frame. Stays a top-third sheet so the band between the
     * menu bar and this top edge is where the node map is centered.
     * Desktop uses 25vh (tokens.css). Do not inherit that here.
     */
    --whatimado-frame-top-default: clamp(32vh, 26vh + 5vw, 38vh);
    --v2-kicker-reserve: clamp(3.9rem, 10.5vh, 4.75rem); /* room for 1.5× hero type */
    --v2-kicker-top: calc(var(--whatimado-frame-top-default) - var(--v2-kicker-reserve));
    --v2-mobile-map-head-gap: clamp(0.55rem, 1.4vh, 0.85rem);
    --v2-mobile-prompt-kicker-gap: 0.35rem;
    --v2-mobile-keyboard-gap: 0.85rem;
    --v2-mobile-prompt-drop: 8px;
    --v2-mobile-you-btn-drop: 26px; /* landing: YOU button down 10px */
    --v2-mobile-focus-band-rise: 0px;
    --v2-mobile-focus-map-rise: 0px;
    --v2-mobile-focus-lift: 0px;
    --v2-mobile-focus-band-top-gap: clamp(0.3rem, 1vh, 0.55rem);
    --v2-mobile-focus-map-head-gap: clamp(0.4rem, 1.1vh, 0.65rem);
    --v2-kicker-sub-line-h: calc(clamp(0.72rem, 3.2vw, 0.84rem) * 1.4);
    --v2-mobile-focus-hero-gap: calc(0.55rem + var(--v2-kicker-sub-line-h));
    --v2-mobile-focus-band-h: 30vh;
    --v2-mobile-focus-kicker-shift: 0px;
    --v2-hero-node-gap: clamp(0.15rem, 0.45vh, 0.3rem);
    --v2-map-band-offset-top: clamp(0.25rem, 0.8vh, 0.45rem);
    /* Room for top labels under the menu after open-home gravity */
    --v2-map-graph-top-pad: clamp(1.1rem, 2.4vh, 1.6rem);
    --v2-map-node-lg: 8.25;
    --v2-map-node-sm: 4.125;
    --v2-map-edge-width: 2.6;
  }

  /* Large phones / small tablets — smaller nodes so menu + Path Finder both clear */
  @media (min-width: 480px) {
    :root {
      --v2-map-node-lg: 6;
      --v2-map-node-sm: 3;
    }
  }

  @media (min-width: 600px) {
    :root {
      --v2-map-node-lg: 5.5;
      --v2-map-node-sm: 2.75;
      --whatimado-frame-top-default: clamp(33vh, 27vh + 4vw, 38vh);
    }
  }

  @media (min-width: 600px) and (max-height: 820px) {
    :root {
      --v2-map-node-lg: 5;
      --v2-map-node-sm: 2.5;
      --whatimado-frame-top-default: clamp(34vh, 28vh + 4vw, 40vh);
    }
  }

  @media (max-height: 640px) {
    :root {
      --v2-map-node-lg: 5;
      --v2-map-node-sm: 2.5;
      --whatimado-frame-top-default: clamp(36vh, 32vh + 3vw, 44vh);
      --v2-mobile-you-hero-gap: clamp(0.55rem, 1.4vh, 0.85rem);
    }
  }

  html,
  body.v2-app {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
  }

  body.v2-app.is-map-panning {
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    touch-action: none;
  }

  /*
   * Home map stage: the open band between the menu bar and Path Finder.
   * Chat pins the same band in mobile-focus-lift.js (frame top minus clearance).
   */
  body.v2-app[data-phase="open"]:not(.is-hero-dismissing) whatimado-map {
    --v2-map-svg-h: calc(
      var(--v2-kicker-top) - var(--v2-mobile-map-head-gap, 0.45rem) -
        var(--v2-mobile-map-kicker-clearance)
    );
  }

  /* Chat sheet: map box ends above the frame. Inline pin height matches this. */
  body.v2-app:not([data-phase="open"]) whatimado-map {
    height: calc(var(--v2-docked-frame-top, var(--whatimado-frame-top-default)) - var(--v2-map-frame-clearance));
  }

  whatimado-map:has(#map-timeline:not([hidden])) .whatimado-map__svg {
    transform: none;
  }

  .v2-shell,
  .v2-shell:has(#resources-rail:not(.hidden)),
  .v2-shell:has(#resources-rail.hidden) {
    --v2-left-sidebar-offset: 0px;
    padding: 0;
    padding-top: var(--v2-mobile-header-h);
    min-height: 100dvh;
  }

  .v2-main {
    height: calc(100dvh - var(--v2-mobile-header-h) - env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - var(--v2-mobile-header-h) - env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
  }

  .v2-main > whatimado-map,
  .v2-main > .v2-frame-kicker {
    left: var(--v2-main-gutter);
    right: var(--v2-main-gutter);
  }

  /* Kill desktop kicker-enter on mobile — it fights landing anchors */
  body.v2-app[data-phase="open"] .v2-frame-kicker:not(.is-dismissing) {
    animation: none;
  }

  /*
   * Load gate: hide map / hero / prompt until brand + mobile anchors settle,
   * then one shared opacity fade into the final landing layout.
   */
  body.v2-app:not(.is-mobile-shell-ready) .v2-main > whatimado-map,
  body.v2-app:not(.is-mobile-shell-ready) .v2-main > .v2-frame-kicker,
  body.v2-app:not(.is-mobile-shell-ready) .v2-main > whatimado-frame {
    opacity: 0;
    pointer-events: none;
  }

  /* Landing transforms + instant focus lift (no transform transitions) */
  whatimado-map {
    transform: translateY(
      calc(-1 * var(--v2-mobile-map-shift) - var(--v2-mobile-focus-lift, 0px))
    );
  }

  .v2-frame-kicker {
    transform: translateY(
      calc(
        -1 * var(--v2-mobile-hero-shift) - var(--v2-mobile-focus-lift, 0px) +
          var(--v2-mobile-focus-kicker-shift, 0px)
      )
    );
  }

  /* Intro fade only — never animate focus lift / transform */
  body.v2-app.is-mobile-shell-ready .v2-main > whatimado-map,
  body.v2-app.is-mobile-shell-ready .v2-main > .v2-frame-kicker,
  body.v2-app.is-mobile-shell-ready .v2-main > whatimado-frame {
    opacity: 1;
    transition: opacity 0.45s var(--v2-hero-motion-ease);
  }

  /* Frame host stays non-interactive; inner handles hits (docked rule). */
  body.v2-app.is-mobile-shell-ready .v2-main > whatimado-frame.is-mobile-docked {
    pointer-events: none;
  }

  /* ── Fixed top bar: logo left, hamburger right ── */
  .v2-rail--left {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 70;
    width: 100%;
    max-width: none;
    height: var(--v2-mobile-header-h);
    flex-direction: row;
    align-items: stretch;
    border: none;
    border-bottom: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
    /* backdrop-filter on the rail traps position:fixed children in the header strip */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .v2-rail--left::before,
  .v2-rail--left::after {
    display: none;
  }

  .v2-rail-brand {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 0;
    padding:
      calc(var(--v2-mobile-header-inset) + env(safe-area-inset-top, 0px))
      var(--v2-mobile-header-inset)
      calc(var(--v2-mobile-header-inset) - 1px);
    border-bottom: 1px solid rgba(46, 232, 214, 0.14);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    background: var(--v2-rail-bg);
    backdrop-filter: blur(var(--v2-glass-blur)) saturate(var(--v2-glass-saturate));
    -webkit-backdrop-filter: blur(var(--v2-glass-blur)) saturate(var(--v2-glass-saturate));
  }

  .v2-rail-header,
  .v2-rail-logo-slot {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
  }

  /* Logo frame and hamburger frame share one height so the header reads as one pair. */
  .v2-rail--left .v2-brand-word {
    display: inline-flex;
    box-sizing: border-box;
    height: var(--v2-mobile-header-control);
    max-width: min(15rem, 68vw);
    opacity: 1;
    visibility: visible;
    padding: 0 0.85rem;
    font-size: clamp(0.84rem, 3.8vw, 1rem);
    letter-spacing: 0.11em;
  }

  .v2-rail--left .v2-brand-mark {
    display: none;
  }

  .v2-rail--left .v2-brand {
    justify-content: flex-start;
    flex: 0 1 auto;
    min-width: 0;
  }

  .v2-rail-toggle {
    display: none;
  }

  .v2-rail-logo-slot .v2-rail-tip {
    display: none;
  }

  .v2-mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--v2-mobile-header-control);
    height: var(--v2-mobile-header-control);
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(66, 255, 240, 0.48);
    background: rgba(4, 12, 14, 0.45);
    color: var(--v2-teal);
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Mirror of the logo: the logo's square corner faces the screen's top-left, the menu's faces top-right. */
  body.v2-app .v2-mobile-menu-btn {
    border-radius: var(--v2-prompt-radius);
  }

  .v2-mobile-menu-btn:hover,
  .v2-mobile-menu-btn:focus-visible {
    background: rgba(46, 232, 214, 0.1);
    color: var(--v2-neon-teal);
  }

  .v2-mobile-menu-icon,
  .v2-mobile-menu-icon::before,
  .v2-mobile-menu-icon::after {
    display: block;
    width: 1.05rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .v2-mobile-menu-icon {
    position: relative;
  }

  .v2-mobile-menu-icon::before,
  .v2-mobile-menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .v2-mobile-menu-icon::before {
    top: -5px;
  }

  .v2-mobile-menu-icon::after {
    top: 5px;
  }

  .v2-rail--left.is-mobile-menu-open .v2-mobile-menu-icon {
    background: transparent;
  }

  .v2-rail--left.is-mobile-menu-open .v2-mobile-menu-icon::before {
    transform: translateY(5px) rotate(45deg);
  }

  .v2-rail--left.is-mobile-menu-open .v2-mobile-menu-icon::after {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* ── Slide-out menu panel (right) ── */
  .v2-mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    border: none;
    padding: 0;
    background: rgba(2, 6, 8, 0.52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
  }

  .v2-mobile-menu-backdrop:not(.hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s ease, visibility 0s;
  }

  .v2-rail-body {
    position: fixed;
    top: var(--v2-mobile-header-h);
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 80;
    width: min(17.5rem, 88vw);
    flex: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--v2-rail-stack-gap);
    padding:
      1rem 0.85rem
      calc(0.85rem + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    border-left: 1px solid var(--v2-border);
    background: var(--v2-rail-bg);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(105%, 0, 0);
    transition: transform 0.32s var(--v2-rail-motion-ease);
  }

  .v2-rail--left.is-mobile-menu-open .v2-rail-body {
    transform: translate3d(0, 0, 0);
  }

  .v2-rail-body > .v2-rail-foot {
    margin-top: auto;
    width: 100%;
    padding: 0.85rem 0 0;
    border-top: 1px solid rgba(46, 232, 214, 0.12);
    background: transparent;
    box-shadow: none;
    position: static;
    transform: none;
  }

  .v2-undo-btn,
  .v2-nav-group-label,
  .v2-active-path,
  .v2-sync-note,
  .v2-profile-copy,
  .v2-profile-chevron {
    display: flex;
  }

  .v2-undo-btn {
    width: 100%;
    max-height: none;
    opacity: 0.55;
    padding: 0.55rem 0.7rem;
  }

  .v2-nav-group-label {
    margin: 0.35rem 0 0;
  }

  .v2-active-path {
    width: 100%;
    max-width: none;
    max-height: none;
    opacity: 1;
    visibility: visible;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 0.9rem;
  }

  .v2-active-path strong {
    margin-bottom: 0;
    line-height: 1.3;
  }

  .v2-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.35rem;
    width: 100%;
  }

  .v2-nav li {
    width: 100%;
  }

  .v2-nav-btn {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.68rem 0.85rem;
    gap: 0.65rem;
    border-radius: var(--v2-btn-radius);
  }

  .v2-nav-btn svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .v2-nav-label {
    position: static;
    width: auto;
    height: auto;
    max-width: 14rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .v2-profile {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0.65rem 0.85rem;
    gap: 0.65rem;
    border-radius: var(--v2-btn-radius);
    overflow: visible;
  }

  .v2-profile-avatar {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0;
  }

  .v2-profile-copy {
    position: static;
    width: auto;
    height: auto;
    max-width: 12rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
  }

  .v2-profile-chevron {
    position: static;
    width: 16px;
    height: 16px;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
  }

  .v2-sync-note {
    max-width: none;
    max-height: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .v2-nav-btn .v2-rail-tip {
    display: none;
  }

  /* Ignore desktop collapsed-rail icon-only layout inside the mobile drawer */
  .v2-rail--left.is-collapsed {
    width: 100%;
  }

  .v2-rail--left.is-collapsed .v2-rail-body {
    padding:
      1rem 0.85rem
      calc(0.85rem + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .v2-rail--left.is-collapsed .v2-nav {
    align-items: stretch;
  }

  .v2-rail--left.is-collapsed .v2-nav li {
    justify-content: stretch;
  }

  .v2-rail--left.is-collapsed .v2-undo-btn,
  .v2-rail--left.is-collapsed .v2-nav-group-label,
  .v2-rail--left.is-collapsed .v2-active-path,
  .v2-rail--left.is-collapsed .v2-sync-note,
  .v2-rail--left.is-collapsed .v2-profile-copy,
  .v2-rail--left.is-collapsed .v2-profile-chevron {
    max-width: none;
    max-height: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .v2-rail--left.is-collapsed .v2-nav-label {
    position: static;
    width: auto;
    height: auto;
    max-width: 14rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .v2-rail--left.is-collapsed .v2-nav-btn {
    position: static;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0.68rem 0.85rem;
    gap: 0.65rem;
    border-radius: var(--v2-btn-radius);
  }

  .v2-rail--left.is-collapsed .v2-nav-btn svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  .v2-rail--left.is-collapsed .v2-rail-foot {
    display: grid;
    align-items: stretch;
    padding: 0.85rem 0 0;
  }

  .v2-rail--left.is-collapsed .v2-profile {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0.65rem 0.85rem;
    border-radius: var(--v2-btn-radius);
  }

  .v2-rail--left.is-collapsed .v2-profile-avatar {
    width: 36px;
    height: 36px;
  }

  /* Beat neon-frames position:relative on drawer panel */
  .v2-rail--left .v2-rail-body {
    position: fixed;
  }

  body.v2-mobile-menu-open {
    overflow: hidden;
  }

  /* ── Compact hero + frame on home ── */
  .v2-frame-kicker {
    text-align: center;
    align-items: center;
  }

  .v2-kicker-brand {
    font-size: clamp(1.23rem, 5.7vw, 1.58rem); /* 2× then −25% → 1.5× original */
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .v2-kicker-sub {
    margin-top: 0.28rem;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(0.72rem, 3.2vw, 0.84rem);
    line-height: 1.4;
    max-width: 100%;
    text-align: center;
    width: 100%;
  }

  .v2-kicker-sub-br {
    display: block;
  }

  /*
   * Focus: lock page scroll. JS packs a fixed stack:
   * menu → 5px → map → hero/subtitle → prompt → keyboard.
   */
  html:has(body.is-mobile-composer-focus),
  body.v2-app.is-mobile-composer-focus {
    --v2-mobile-focus-map-head-gap: -6px; /* menu → map; JS uses same hardcoded -6px */
    --v2-mobile-focus-map-hero-gap: 6px;
    --v2-mobile-focus-hero-gap: 13px; /* hero/subtitle → prompt; JS hardcoded 13px */
    --v2-mobile-focus-lift: 0px;
    overflow: hidden !important;
    overscroll-behavior: none;
    height: 100%;
    touch-action: manipulation;
  }

  body.v2-app.is-mobile-composer-focus .v2-main {
    overflow: hidden !important;
  }

  body.v2-app.is-mobile-composer-focus whatimado-map[data-focus-pinned="1"],
  body.v2-app.is-mobile-composer-focus .v2-frame-kicker[data-focus-pinned="1"] {
    margin: 0;
  }

  body.v2-app.is-mobile-composer-focus .v2-frame-kicker[data-focus-pinned="1"] {
    justify-content: flex-end;
    overflow: hidden;
  }

  body.v2-app.is-mobile-composer-focus whatimado-map[data-focus-pinned="1"] .whatimado-map__stage,
  body.v2-app whatimado-map[data-reading-pinned="1"] .whatimado-map__stage {
    top: 0;
    height: var(--v2-map-svg-h);
    overflow: visible;
  }

  body.v2-app whatimado-map[data-reading-pinned="1"],
  body.v2-app whatimado-map[data-focus-pinned="1"] {
    margin: 0;
    overflow: hidden;
    touch-action: none;
  }

  /* ── Mobile floating prompt bar (fixed, full-bleed, decoupled from hero/map) ── */
  whatimado-frame.is-mobile-docked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    bottom: auto;
    z-index: 45;
    max-height: none;
    transition: none;
    pointer-events: none;
  }

  /*
   * Chat sheet: top snaps (expanded / reading / map-focus), bottom stays floored
   * so the composer never rides up with the drag handle.
   */
  whatimado-frame.is-mobile-docked.is-mobile-sheet-floored {
    bottom: var(--v2-mobile-bottom-inset);
  }

  whatimado-frame.is-mobile-docked .whatimado-frame__inner {
    pointer-events: auto;
    border: none;
    border-top: 1px solid rgba(66, 255, 240, 0.28);
    border-radius: 0;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.32);
    background: var(--v2-frame-glass-bg);
    backdrop-filter: blur(var(--v2-frame-glass-blur)) saturate(var(--v2-glass-saturate));
    -webkit-backdrop-filter: blur(var(--v2-frame-glass-blur)) saturate(var(--v2-glass-saturate));
    max-height: calc(100dvh - var(--v2-mobile-header-h) - var(--v2-mobile-bottom-inset));
  }

  whatimado-frame.is-mobile-docked.is-mobile-sheet-floored .whatimado-frame__inner {
    height: 100%;
    max-height: none;
  }

  whatimado-frame.is-mobile-docked::before,
  whatimado-frame.is-mobile-docked::after {
    display: none;
  }

  whatimado-frame.is-mobile-docked .whatimado-frame__drag-rail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 14px;
    margin: 0;
    padding: 0.35rem 0 0.2rem;
    cursor: grab;
    touch-action: none;
    border-bottom: 1px solid rgba(46, 232, 214, 0.1);
    background: linear-gradient(180deg, rgba(46, 232, 214, 0.08) 0%, transparent 100%);
  }

  whatimado-frame.is-mobile-docked.is-dragging .whatimado-frame__drag-rail {
    cursor: grabbing;
  }

  whatimado-frame.is-mobile-docked .whatimado-frame__drag-grip {
    width: min(18vw, 4.5rem);
    height: 4px;
    background: rgba(66, 255, 240, 0.5);
    box-shadow: 0 0 10px rgba(46, 232, 214, 0.32);
  }

  whatimado-frame.is-mobile-docked .whatimado-frame__body-wrap {
    min-height: 0;
  }

  whatimado-frame.is-mobile-docked.is-mobile-typing:not(.is-mobile-reading) .whatimado-frame__body-wrap {
    flex: 0 0 0;
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* Top / mid snaps — conversation fills between handle and floor-pinned composer */
  whatimado-frame.is-mobile-docked.is-mobile-sheet-floored.is-mobile-reading .whatimado-frame__body-wrap,
  whatimado-frame.is-mobile-docked.is-mobile-expanded .whatimado-frame__body-wrap {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
    opacity: 1;
    pointer-events: auto;
  }

  whatimado-frame.is-mobile-docked.is-settling,
  whatimado-frame.is-mobile-docked.is-gliding {
    transition: none;
  }

  whatimado-frame.is-mobile-docked.is-mobile-typing .whatimado-frame__drag-rail {
    height: 10px;
    padding: 0.22rem 0 0.08rem;
    border-bottom: none;
  }

  body.is-mobile-composer-focus whatimado-frame.is-mobile-docked.is-mobile-typing .whatimado-frame__composer {
    padding-top: 0.45rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-keyboard:not(.is-mobile-reading) {
    top: auto !important;
    transition: none;
  }

  whatimado-frame.is-mobile-docked.is-mobile-keyboard {
    z-index: 80;
    transition: none;
  }

  body.is-mobile-keyboard-open .v2-rail--left {
    z-index: 40;
  }

  body.is-mobile-keyboard-open .v2-rail-brand {
    pointer-events: none;
  }

  body.is-mobile-keyboard-open .v2-brand-word {
    opacity: 0;
  }

  whatimado-frame.is-mobile-docked .whatimado-frame__composer-input {
    font-size: 16px;
  }

  whatimado-frame.is-mobile-hint .whatimado-frame__inner {
    animation: none;
  }

  whatimado-map .whatimado-map__you-btn,
  whatimado-map .whatimado-map__link-btn {
    width: 2.05rem;
    height: 2.05rem;
    z-index: 8;
  }

  /* Three path cards must fit in the ¾ reading sheet above the composer */
  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-possibilities {
    margin-top: 0.45rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-selection {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-selection__title {
    font-size: 0.8rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-selection__why,
  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-selection__tagline {
    display: block;
    font-size: 0.7rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-status {
    font-size: 0.72rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-stage {
    margin-top: 0.45rem;
    padding: 0.5rem 0.6rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-mission-continue {
    --v2-cue-inset: 0.6rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-stage__label,
  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-mission__title {
    font-size: 0.74rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-stage__desc,
  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-mission__text {
    font-size: 0.7rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-possibilities .v2-section-label {
    margin: 0 0 0.35rem;
    font-size: 0.68rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-cards {
    gap: 0.35rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-card {
    padding: 0.45rem 0.6rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-card h3 {
    margin: 0 0 0.08rem;
    font-size: 0.74rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-card__type {
    margin: 0 0 0.08rem;
    font-size: 0.58rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-card__tagline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.3;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-card__why {
    display: none;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-card__meta {
    margin: 0.2rem 0 0;
    font-size: 0.64rem;
    gap: 0.2rem 0.5rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-card__actions {
    margin-top: 0.35rem;
    gap: 0.3rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-card__action,
  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-toolbar__btn {
    padding: 0.28rem 0.52rem;
    font-size: 0.62rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-toolbar,
  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-feedback {
    margin-top: 0.45rem;
    gap: 0.35rem;
  }

  whatimado-frame.is-mobile-docked.is-mobile-reading .v2-path-sync {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-rail-body,
  .v2-mobile-menu-backdrop,
  .v2-mobile-menu-icon,
  .v2-mobile-menu-icon::before,
  .v2-mobile-menu-icon::after,
  body.v2-app.is-mobile-shell-ready .v2-main > whatimado-map,
  body.v2-app.is-mobile-shell-ready .v2-main > .v2-frame-kicker,
  body.v2-app.is-mobile-shell-ready .v2-main > whatimado-frame {
    transition: none;
    animation: none;
  }
}