/* ============================================
   AI太空站 - 移动端共享样式 (mobile.css)
   适配: iOS Safari / Android Chrome / HarmonyOS
   ============================================ */

/* === CSS 变量 === */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --vh: 1vh;
}

/* === 全局移动端基础 === */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

body {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  overflow-x: hidden;
}

/* === 触摸目标最小尺寸 === */
input, textarea, select, button, a.btn, .btn, [role="button"] {
  font-size: 16px !important; /* 防止 iOS 缩放 */
}

@media (max-width: 768px) {
  a, button, .btn, [role="button"], input[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* === iOS 输入框修复 === */
input, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 8px;
  max-width: 100%;
}

textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* === 滚动容器优化 === */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -webkit-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}

.scroll-x::after {
  content: '← 滑动查看 →';
  display: block;
  text-align: center;
  font-size: 0.7em;
  color: #8890b0;
  padding: 8px 0 4px;
}

@media (min-width: 769px) {
  .scroll-x::after { display: none; }
}

/* === 通用 Hamburger 菜单 === */
.hamburger {
  margin-left: auto;
  display: none;
  background: none;
  border: none;
  color: #e8e8ff;
  font-size: 1.6em;
  cursor: pointer;
  padding: 6px 12px;
  z-index: 100;
  line-height: 1;
  -webkit-tap-highlight-color: rgba(0,212,255,.2);
}

@media (max-width: 768px) {
  .hamburger {
  margin-left: auto; display: block; }

  /* 默认隐藏桌面导航 */
  nav .nv, .nav-links, .ni .nv {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 8px;
    background: rgba(0, 0, 16, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 6px;
    min-width: 170px;
    gap: 2px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    z-index: 99999;
  }

  nav .nv.open, .nav-links.open, .ni .nv.open {
    display: flex;
  }

  nav .nv a, .nav-links a, .ni .nv a {
    padding: 12px 18px;
    font-size: 0.9em;
    border-radius: 10px;
    white-space: nowrap;
    color: #8890b0;
    text-decoration: none;
    transition: background .2s;
  }

  nav .nv a:hover, .nav-links a:hover, .ni .nv a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }
}

/* === 表格移动端 === */
@media (max-width: 768px) {
  .responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }

  .responsive-table table {
    min-width: 600px;
  }

  table th, table td {
    padding: 8px 10px;
    font-size: 0.75em;
    white-space: nowrap;
  }
}

/* === 网格响应式 === */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .grid-2-sm { grid-template-columns: 1fr !important; }
  .grid-3-sm { grid-template-columns: repeat(2, 1fr) !important; }
}

/* === 卡片移动端 === */
@media (max-width: 768px) {
  .card-responsive {
    padding: 20px 14px;
    border-radius: 14px;
  }
}

/* === 按钮移动端 === */
@media (max-width: 480px) {
  .btn-full-mobile {
    width: 100%;
    min-height: 44px;
    text-align: center;
    justify-content: center;
  }
}

/* === 模态框移动端 === */
@media (max-width: 768px) {
  .modal-content, [class*="modal"] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === 排版缩放 === */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.5em, 5vw, 2em); }
  h2 { font-size: clamp(1.3em, 4vw, 1.7em); }
  h3 { font-size: clamp(1.1em, 3.5vw, 1.3em); }
  p, li, td, th, label, input, textarea, select { font-size: clamp(0.82em, 3vw, 0.95em); }
  pre, code { font-size: 0.72em; max-width: 100vw; word-break: break-all; }
}

/* === 极窄屏幕 === */
@media (max-width: 380px) {
  h1 { font-size: 1.4em; }
  .hide-xs { display: none !important; }
}

/* === 100dvh 视口修复 (iOS Safari) === */
.full-height {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
}

/* === iOS 键盘弹出时固定底部元素 === */
.fixed-bottom {
  padding-bottom: var(--safe-bottom);
  padding-bottom: calc(var(--safe-bottom) + env(keyboard-inset-height, 0px));
}

/* === 选择文本可读 === */
::selection {
  background: rgba(0, 212, 255, 0.25);
  color: #fff;
}

/* === 打印样式 === */
@media print {
  nav, .hamburger, #btt, canvas, footer { display: none !important; }
  body { background: #fff; color: #000; }
}