/* One row of the original room controls. The adapter opts in only while it
   can preserve the native fixed-length collapse and percentage-based exit motion. */
@media (max-width: 991px) {
  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) {
    display: grid;
    grid-auto-rows: 44px;
    align-items: stretch;
    column-gap: 3px;
    row-gap: 0;
    height: 44px;
    padding-block: 0;
    right: env(safe-area-inset-right, 0px);
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) - 1.25em);
    max-width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    overflow: hidden;
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-buttons-wrap {
    width: min(100%, 36rem);
    grid-template-columns: minmax(5.5rem, 1.35fr) repeat(3, minmax(0, 1fr));
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-mess-wrap {
    width: min(100%, 18rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) > .btn-wrap {
    box-sizing: border-box;
    grid-row: 1;
    width: 100% !important; /* Replaces only the legacy 9rem !important width. */
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding-block: 4.5px;
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-buttons-wrap > .btn-wrap {
    /* Beat only GSAP's inline translate:none neutralizer. Its actual native
       transform/yPercent and the inline declaration remain untouched. */
    translate: var(--jc-mobile-nav-offset-x, 0px) var(--jc-mobile-nav-offset-y, 0px) !important;
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-buttons-wrap > .is-1 { grid-column: 1; }
  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-buttons-wrap > .is-2 { grid-column: 2; }
  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-buttons-wrap > .is-3 { grid-column: 3; }
  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-buttons-wrap > .is-4 { grid-column: 4; }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-buttons-wrap.is-closed > .is-1 { grid-column: 4; }
  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-buttons-wrap.is-closed > .btn-wrap:not(.is-1) {
    clip-path: inset(50%);
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) .btn-inner {
    box-sizing: border-box;
    min-width: 0;
    min-height: 35px;
    padding-block: 0;
    padding-inline: 6px;
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) .btn-icon-wrap {
    margin-left: .25rem;
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) :is(.nav-buttons-wrap, .nav-mess-wrap) [data-jc-nav-label] {
    white-space: nowrap;
    font-size: .8rem;
    line-height: 1;
  }

  html[lang='zh-CN'][data-jc-mobile-nav='ready']:not([data-jc-art-study]) .nav-scroll-wrap {
    /* Keep the native optional hint separate from the four real link targets.
       The music/lamp controls retain their existing top-of-screen positions. */
    bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) - 1.25em + 52px);
  }
}

/* Native desktop reopen updates X but can retain an earlier mobile fixed Y.
   Keep only that narrow-to-wide correction, not the mobile layout. The adapter
   releases this event-driven lease when native Y actually returns to zero. */
@media (min-width: 992px) {
  html[lang='zh-CN'][data-jc-mobile-nav='desktop-recovery']:not([data-jc-art-study]) .nav-buttons-wrap > .btn-wrap {
    translate: 0 var(--jc-mobile-nav-offset-y, 0px) !important;
  }
  html[lang='zh-CN'][data-jc-mobile-nav='desktop-recovery']:not([data-jc-art-study]) .nav-buttons-wrap.is-closed > .btn-wrap:not(.is-1) {
    /* A mobile close has no desktop X stack yet; do not expose three empty
       native button surfaces while the original menu remains collapsed. */
    clip-path: inset(50%);
  }
}