/* 地图 / 选卡 / 聊天 / 记录：固定在视口右上角，不与主画布重叠 */
:root:has(.archive-viewport .page-lang-switch) {
  --shell-viewport-pad-top: max(
    calc(var(--shell-viewport-pad-fluid) + clamp(26px, 5.5vmin, 34px)),
    env(safe-area-inset-top, 0px)
  );
}

.page-lang-switch {
  position: fixed;
  top: max(var(--shell-viewport-pad-fluid), env(safe-area-inset-top, 0px));
  right: var(--shell-viewport-pad-right);
  z-index: 200;
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(45, 127, 222, 0.45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.page-lang-switch button {
  margin: 0;
  padding: 6px 12px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #0a1628;
  font-family: 'Lilita One', Arial, sans-serif;
  font-size: clamp(11px, 2.6vmin, 14px);
  line-height: 1.15;
  cursor: pointer;
}

.page-lang-switch button[aria-pressed='true'] {
  background: #3a96ff;
  color: #fff;
}

body.lang-zh .page-lang-switch button,
html[data-lang='zh'] .page-lang-switch button {
  font-family: 'GenWanMinF', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 手机 / 平板：缩小语言切换并收紧视口留白，保证背景与地图完整居中 */
@media (max-width: 1024px), (max-height: 700px) {
  :root:has(.archive-viewport .page-lang-switch) {
    --shell-viewport-pad-top: max(
      calc(var(--shell-viewport-pad-fluid) + clamp(22px, 5vmin, 28px)),
      env(safe-area-inset-top, 0px)
    );
  }

  .page-lang-switch {
    border-radius: clamp(5px, 1.4vmin, 8px);
  }

  .page-lang-switch button {
    font-size: clamp(9px, 2.6vmin, 12px);
    padding: clamp(3px, 1vmin, 5px) clamp(6px, 2vmin, 10px);
    line-height: 1.1;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --shell-viewport-pad-fluid: clamp(6px, 1.6vmin, 12px);
    --shell-viewport-pad-right: max(var(--shell-viewport-pad-fluid), env(safe-area-inset-right, 0px));
    --shell-viewport-pad-bottom: max(var(--shell-viewport-pad-fluid), env(safe-area-inset-bottom, 0px));
    --shell-viewport-pad-left: max(var(--shell-viewport-pad-fluid), env(safe-area-inset-left, 0px));
  }

  :root:has(.archive-viewport .page-lang-switch) {
    --shell-viewport-pad-top: max(
      calc(var(--shell-viewport-pad-fluid) + clamp(20px, 4.8vmin, 26px)),
      env(safe-area-inset-top, 0px)
    );
  }

  .page-lang-switch button {
    font-size: clamp(8px, 2.4vmin, 11px);
    padding: clamp(2px, 0.8vmin, 4px) clamp(5px, 1.8vmin, 8px);
  }
}

/* 手机横屏触摸：蓝框缩小后，语言钮放大并贴右上，避免与主体重叠 */
@media (orientation: landscape) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  :root:has(.archive-viewport .page-lang-switch) {
    --shell-viewport-pad-top: max(
      calc(var(--shell-viewport-pad-fluid) + clamp(30px, 6.5vmin, 38px)),
      env(safe-area-inset-top, 0px)
    );
    --shell-viewport-pad-right: max(4px, env(safe-area-inset-right, 0px));
  }

  .archive-viewport {
    align-items: flex-start;
    justify-content: center;
  }

  .page-lang-switch,
  .home-lang-switch {
    top: max(6px, env(safe-area-inset-top, 0px));
    right: max(4px, env(safe-area-inset-right, 0px));
    z-index: 300;
    border-radius: 8px;
    border-width: 2px;
  }

  .page-lang-switch button {
    font-size: clamp(13px, 3.4vmin, 17px);
    padding: clamp(6px, 1.5vmin, 9px) clamp(11px, 3vmin, 15px);
    line-height: 1.15;
  }

  /* 聊天页蓝框偏下：收紧上留白、略减底留白 */
  #chatViewport {
    --shell-viewport-pad-top: max(
      calc(var(--shell-viewport-pad-fluid) + clamp(22px, 5vmin, 30px)),
      env(safe-area-inset-top, 0px)
    );
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }
}