/* 移动端适配层：不改原站文件，由 mirror/serve.mjs 在 </head> 前注入。
   1) 窄屏基础：安全区、触控尺寸、横向溢出
   2) 语言条折叠成右上角按钮 + 底部弹层（配合 mobile.js） */

@media (max-width: 560px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  /* 折叠后的原语言条 */
  nav.langsw[data-collapsed="1"],
  .langsw[data-collapsed="1"] {
    display: none !important;
  }

  /* 右上角语言按钮 */
  #m-lang {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 8px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .86);
    color: #1b2a2f;
    font: 500 13px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  }

  /* 底部弹层 */
  #m-sheet {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(10, 16, 18, .45);
    display: flex;
    align-items: flex-end;
    animation: m-fade .16s ease;
  }
  #m-sheet[hidden] { display: none; }

  .m-sheet-panel {
    width: 100%;
    max-height: 76vh;
    overflow-y: auto;
    background: #fff;
    color: #1b2a2f;
    border-radius: 16px 16px 0 0;
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
    animation: m-up .2s ease;
  }

  .m-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 600 15px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    padding: 6px 2px 14px;
  }
  .m-close {
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: #f1f3f2; color: #4a5b60;
    font-size: 14px;
  }

  .m-langs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .m-lang-item {
    min-height: 44px;
    border: 1px solid #e3e8e6;
    border-radius: 10px;
    background: #fafbfa;
    color: #24343a;
    font: 400 14px/1.2 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  .m-lang-item.on {
    border-color: #8c1d3c;
    color: #8c1d3c;
    background: #fdf3f5;
    font-weight: 600;
  }

  .m-theme {
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border: 1px solid #e3e8e6;
    border-radius: 10px;
    background: #fafbfa;
    color: #24343a;
    font: 400 14px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  /* 正文节奏 */
  .introfoot {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .introfoot button,
  .introfoot a {
    min-height: 46px;
    font-size: 15px;
  }
  .totop {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
}

@keyframes m-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

/* 横屏矮屏：语言条不再固定占位 */
@media (max-height: 460px) and (orientation: landscape) {
  nav.langsw { position: static !important; }
}

/* ========== 第二批：底部导航 / 全宽卡片 / 手势反馈 ========== */
@media (max-width: 560px) {
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* 内容区收窄一档，卡片做通栏 */
  .wrap { padding-left: 12px !important; padding-right: 12px !important; }

  .odds {
    margin-left: -12px !important;
    margin-right: -12px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 18px 16px !important;
  }

  /* 底部导航 */
  #m-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid rgba(0, 0, 0, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .m-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: none;
    color: #6b7b80;
    font: 400 11px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  .m-tab.on { color: #8c1d3c; }

  /* 原底部 CTA 抬到导航栏之上 */
  .introfoot {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .totop {
    bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 下拉刷新指示条 */
  #m-pull {
    position: fixed;
    left: 0; right: 0; top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .96);
    color: #4a5b60;
    font: 400 12px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    transition: height .12s ease;
  }
  #m-pull[hidden] { display: none; }

  /* 手势提示 */
  #m-toast {
    position: fixed;
    left: 50%;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 90;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(20, 30, 34, .86);
    color: #fff;
    font: 400 12.5px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    white-space: nowrap;
  }
  #m-toast[hidden] { display: none; }
}