.rotate-container {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

// 横屏模式的容器样式
.rotate-container.css-landscape-mode {
  // 页面整体旋转90度并重新定位
  transform: rotate(90deg);
  transform-origin: center center;

  // 调整页面尺寸：宽高互换，iOS优化
  width: calc(
    100vh - env(safe-area-inset-left) - env(safe-area-inset-right)
  ) !important;
  height: calc(
    100vw - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  ) !important;
  max-width: 100vh !important;
  max-height: 100vw !important;

  // 居中定位，iOS安全区域优化
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  margin: calc(-50vw + env(safe-area-inset-top) / 2) 0 0
    calc(-50vh + env(safe-area-inset-left) / 2) !important;

  // 确保层级和溢出处理，iOS层级优化
  z-index: 99999;
  overflow: hidden;
  -webkit-transform: rotate(90deg) translateZ(0);
  will-change: transform;
  isolation: isolate;

  // 平滑过渡效果
  transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease;

  // 旋转按钮在横屏模式下的位置调整
  .rotate-btn {
    position: absolute !important;
    z-index: 999999 !important;
    -webkit-transform: translateZ(1000px);
    transform: translateZ(1000px);
  }
}

// 默认状态确保正常显示
.rotate-container:not(.css-landscape-mode) {
  transform: none;
  width: 100%;
  height: 100%;
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  z-index: auto;
  overflow: visible;
}