/* =========================================================
🌐 FF基金会 | 语言切换按钮样式 (lang.css)
------------------------------------------------------------
- 自动适配桌面 & 手机
- 兼容 iPhone 刘海 / Android 顶栏安全区
- 电光蓝渐变 + 模糊玻璃质感
- Hover 微动画效果
========================================================= */

/* ✅ 默认样式（右上角固定） */
#langToggle {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 22px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);

  width: auto !important;
  min-width: unset !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  
  /* 尺寸与留白 */
  padding: 7px 15px;
  font-size: 0.95rem;
  font-weight: 500;
  border: none;
  border-radius: 10px;

  /* 外观特效 */
  background: linear-gradient(135deg, #00ffff, #0077ff);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* 行为属性 */
  cursor: pointer;
  z-index: 9999;
  opacity: 0.95;
  transition: all 0.25s ease;
}

/* ✅ Hover 效果（桌面端） */
#langToggle:hover {
  transform: scale(1.05);
  filter: brightness(1.15);
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

/* ✅ 手机端优化（增加安全区 + 减小体积） */
@media (max-width: 768px) {
  #langToggle {
    padding: 6px 13px;
    font-size: 0.9rem;
    top: calc(env(safe-area-inset-top, 0px) + 22px);
    right: calc(env(safe-area-inset-right, 0px) + 18px);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
  }
}

/* ✅ 初始载入淡入动画（进入更自然） */
@keyframes fadeInLangBtn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 0.95; transform: translateY(0); }
}

#langToggle {
  animation: fadeInLangBtn 0.5s ease-out;
}