:root {
  /* 横屏视觉左侧的唯一安全边界。
     物理横屏主要使用 safe-area-left；
     竖持后 rotate(90deg) 时，物理 top 会成为横屏视觉 left，因此同时取 top。
     Android 不一定提供 env safe-area，故保底 68px。 */
  --v140-safe-left: max(
    68px,
    calc(env(safe-area-inset-left, 0px) + 8px),
    calc(env(safe-area-inset-top, 0px) + 8px)
  );
  --v140-safe-right: max(
    6px,
    env(safe-area-inset-right, 0px),
    env(safe-area-inset-bottom, 0px)
  );
  --v140-header-h: 56px;
  --v140-playback-h: 64px;
}

/* 顶栏：永远是横屏逻辑顶部。 */
#app:not(.is-map-focus) .commandbar,
#app:not(.is-map-focus) .commandbar.v76-fit,
#app:not(.is-map-focus) .commandbar.v76-stack,
html.force-css-landscape #app:not(.is-map-focus) .commandbar {
  position: fixed !important;
  top: 0 !important;
  bottom: auto !important;
  left: var(--v140-safe-left) !important;
  right: var(--v140-safe-right) !important;
  width: auto !important;
  height: var(--v140-header-h) !important;
  min-height: var(--v140-header-h) !important;
  margin: 0 !important;
  translate: none !important;
}

/* 底栏：永远是横屏逻辑底部。 */
#app:not(.is-map-focus) .playback,
html.force-css-landscape #app:not(.is-map-focus) .playback {
  position: fixed !important;
  left: var(--v140-safe-left) !important;
  right: var(--v140-safe-right) !important;
  bottom: 0 !important;
  top: auto !important;
  width: auto !important;
  height: var(--v140-playback-h) !important;
  margin: 0 !important;
  translate: none !important;
}

/* 左侧导航：左边与顶栏/底栏完全共线，顶部紧贴顶栏下沿。 */
#left-rail.left-rail,
html.force-css-landscape #left-rail.left-rail {
  position: fixed !important;
  left: var(--v140-safe-left) !important;
  top: var(--v140-header-h) !important;
  bottom: var(--v140-playback-h) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
}

/* 右侧节点栏：顶部紧贴顶栏下沿，底部紧贴底栏上沿。 */
#node-detail.node-detail,
html.force-css-landscape #node-detail.node-detail {
  position: fixed !important;
  top: var(--v140-header-h) !important;
  bottom: var(--v140-playback-h) !important;
  right: var(--v140-safe-right) !important;
  left: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
}

/* 重点：展开按钮与顶栏、底栏、左导航共用完全相同的逻辑 left。
   top:50% 是横屏画布自己的垂直中心；外层是否 rotate 都不会改变这个关系。 */
#mobile-panel-toggle,
html.force-css-landscape #mobile-panel-toggle {
  position: fixed !important;
  left: var(--v140-safe-left) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  margin: 0 !important;
  translate: none !important;
  transform: translateY(-50%) !important;
  transition: opacity .2s ease !important;
  z-index: 99999 !important;
}

#mobile-panel-toggle[aria-expanded="true"],
.edge-panel-toggle.is-open {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}