/**
 * 移动端布局（≤768px）
 *
 * 解决的问题
 *  桌面骨架是「固定 176px 侧栏 + 内容区」，在 375px 手机上侧栏会吃掉近一半宽度，
 *  内容区只剩 199px。小屏改为底部导航栏（首页 / 历史 / 设置 / 我的），
 *  侧栏与收起按钮整体隐藏，内容区拿回全部宽度。
 *
 * 导航分工
 *  - 桌面端（>768px）：侧栏常驻，主题切换在侧栏底部
 *  - 小屏（≤768px）：底部栏四项；主题切换移入「设置 → 通用 → 外观」
 *
 * 配套改动
 *  - index.html：.tab-bar 挂载点（内容由 sidebar.js 构建）、设置页外观开关
 *  - sidebar.js：构建底部栏、切页高亮、主题控件同步
 *  - viewport 需声明 viewport-fit=cover 才能取到安全区变量
 *
 * 小程序（Taro）复用约定
 *  - 断点：768px 是唯一「移动布局」断点，页面级细节仍沿用各文件的 640 / 560
 *  - 基准：375px 视口 = 750rpx，尺寸取偶数便于 rpx 换算
 *  - 令牌：颜色/圆角/字号全部来自 main.css 的 :root，不在此重复定义色值
 *  - 触控：可点击元素不小于 44×44 的逻辑像素（微信小程序与 iOS HIG 同一标准）
 */

/* 底部导航栏默认不渲染，桌面端零影响 */
.tab-bar {
  display: none;
}

/* ============================================================
 * 1. 骨架：隐藏侧栏，底部导航栏接管导航
 * ============================================================ */

@media (max-width: 768px) {
  :root {
    /* 底部栏内容区高度（不含手势条安全区） */
    --tab-bar-h: 56px;
    /* 刘海屏 / 手势条安全区，依赖 index.html 的 viewport-fit=cover */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* body 已在 main.css 设为 overflow:hidden，这里只改动态视口高度 */
  .layout {
    height: 100vh;
    /* 移动浏览器地址栏收放时 vh 不跟随，dvh 才是真实可视高度 */
    height: 100dvh;
  }

  /* 小屏没有侧栏，导航完全交给底部栏 */
  .sidebar,
  .sidebar-toggle {
    display: none;
  }

  /* ===== 底部导航栏 ===== */
  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: stretch;
    height: calc(var(--tab-bar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--sidebar-bg);
    border-top: 1px solid var(--border);
  }

  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 6px 2px;
    color: var(--text-3);
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--t) var(--ease);
  }

  .tab-bar-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .tab-bar-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-bar-item.active {
    color: var(--accent);
  }

  .tab-bar-item:active {
    background: var(--surface-2);
  }

  /* ============================================================
   * 2. 内容区与安全区
   * ============================================================ */

  .content {
    /* 顶部留刘海，底部让出导航栏与手势条，内容不被遮挡 */
    padding: calc(16px + var(--safe-top)) 16px calc(var(--tab-bar-h) + var(--safe-bottom) + 16px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* 消除移动浏览器的灰色高亮块，交互反馈交给 :active */
  body {
    -webkit-tap-highlight-color: transparent;
  }

  /* iOS 在输入框字号 <16px 时聚焦会自动放大页面，这里统一到 16px */
  .search-input,
  .form-input,
  .form-select,
  .config-secret .form-input {
    font-size: 16px;
  }

  /* ============================================================
   * 3. 页头 / 卡片 / 结果卡
   * ============================================================ */

  /* 页头保持「标题在左、动作在右」：空间不足时才换行，
     避免把「清空全部」这类动作按钮挤到标题下方单独占一行 */
  .page-head {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .page-head-actions {
    margin-left: auto;
  }

  .card {
    padding: 15px 16px;
    margin-bottom: 12px;
  }

  .card-head {
    flex-wrap: wrap;
    row-gap: 7px;
  }

  /* 搜索栏上下堆叠，按钮占满整行便于拇指点击 */
  .search-bar {
    flex-direction: column;
    gap: 8px;
  }

  .search-btn {
    width: 100%;
    min-height: 47px;
  }

  /* 快捷查询链接一排可能放不下，允许换行并给足触点高度 */
  .search-hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
  }

  .hint-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 4px;
  }

  .result-header {
    padding: 12px 14px;
    gap: 10px;
  }

  .result-ip {
    font-size: 18px;
  }

  .result-item {
    padding: 9px 14px;
    gap: 10px;
  }

  .result-item .label {
    flex: 0 0 4.7em;
    font-size: 12px;
  }

  .result-footer {
    padding: 10px 14px;
    gap: 4px 12px;
  }

  .globe-meta {
    padding: 8px 14px;
  }

  .empty-state {
    padding: 40px 16px;
  }

  .loading {
    padding: 40px 16px;
  }

  /* ============================================================
   * 4. 表单 / 按钮 / 列表
   * ============================================================ */

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 44px;
  }

  .btn-icon {
    width: 40px;
    height: 40px;
  }

  .form-actions {
    justify-content: stretch;
  }

  .form-actions .btn-primary,
  .form-actions .btn-secondary {
    flex: 1;
    min-width: 0;
  }

  .setting-row {
    gap: 12px;
  }

  .setting-row-control .form-select {
    min-width: 100px;
  }

  .history-item {
    padding: 11px 14px;
    gap: 10px;
  }

  .recent-item {
    padding: 10px 14px;
    gap: 10px;
  }

  /* Toast 抬到底部栏之上，避免被遮住 */
  .toast {
    bottom: calc(var(--tab-bar-h) + var(--safe-bottom) + 16px);
    max-width: calc(100vw - 32px);
    text-align: center;
  }

  /* ============================================================
   * 5. 各页窄屏细节
   * ============================================================ */

  /* 积分页：余额总览的双栏在手机上改为上下两段 */
  .credits-hero {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 16px;
  }

  .credits-tabs {
    flex-shrink: 0;
  }

  /* 注册验证码：输入框与按钮上下排，避免按钮把输入框压到不可用 */
  .register-code-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* 第三方资源行：名称与标签/链接在窄屏换行 */
  .about-license-item {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ============================================================
 * 6. 触屏：清掉「点完还留着」的 hover 态
 *    （触屏设备没有真实悬停，:hover 会粘在上一次点击的元素上）
 * ============================================================ */

@media (hover: none) {
  .tab-bar-item:hover {
    color: var(--text-3);
  }

  .tab-bar-item.active:hover {
    color: var(--accent);
  }

  .sidebar-nav-item:hover {
    background: transparent;
    color: var(--text-2);
  }

  .sidebar-nav-item.active:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }

  .history-item:hover {
    border-color: var(--border);
  }

  .recent-item:hover {
    border-color: var(--border);
    background: var(--surface);
  }

  .btn-secondary:hover {
    background: var(--surface);
    color: var(--text-2);
  }

  .btn-ghost:hover {
    background: transparent;
    color: var(--text-2);
  }

  .btn-icon:hover {
    background: transparent;
    border-color: var(--border);
    color: var(--text-2);
  }

  .search-clear:hover {
    background: var(--surface-2);
    color: var(--text-3);
  }
}