/* ==========================================================================
   手机端优化：性能 + 排版
   这个文件在 index.html 里**最后加载**，所以能稳稳覆盖前面的组件样式。
   目标：
     1) 去掉手机上最耗 GPU 的东西（全屏装饰动画、毛玻璃、卡片阴影）；
     2) 排版别太小太挤，按钮够大、好点。
   ========================================================================== */

@media (max-width: 860px) {
  /* ---------------------------------------------------------------
     1) 纯装饰层：全屏 + 逐帧动画，手机上非常吃 GPU。它们只是"气氛"，
        去掉不影响任何功能。
     --------------------------------------------------------------- */
  .grain,
  .editorial,
  .petals { display: none !important; }

  /* 背景极光 / 底图的漂移动画改静态：保留画面，但不再每帧重绘 */
  .aurora,
  .backdrop__layer,
  .atmosphere { animation: none !important; }

  /* ---------------------------------------------------------------
     2) 毛玻璃（backdrop-filter）是手机上最贵的合成操作之一，滚动就掉帧。
        顶/底导航、浮层、表单统一关掉模糊，改成实色。
     --------------------------------------------------------------- */
  .nav,
  .tabbar,
  .notif__panel,
  .langpick__menu,
  .search-suggest,
  .cselect__menu,
  .modal,
  .modal-backdrop,
  .panel,
  .card,
  .input,
  .textarea,
  .select,
  .btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 顶/底导航：实色（原本是半透明 + 模糊） */
  .nav,
  .tabbar { background: var(--bg-1) !important; }

  /* 浮层：偏高不透明实色，去掉模糊后依然清晰 */
  .notif__panel,
  .langpick__menu,
  .search-suggest,
  .cselect__menu,
  .modal { background: var(--bg-2) !important; }

  /* 3) 长列表里每张卡的阴影很贵 —— 去掉，滚动更顺 */
  .post-card,
  .item-card,
  .product-card,
  .panel { box-shadow: none !important; }

  /* ---------------------------------------------------------------
     4) 排版：解决"页面太小太挤"。
        正文/小字各放大 1px；栅格间距收紧但按钮放大。
     --------------------------------------------------------------- */
  :root {
    --fs-xs: 13px;
    --fs-sm: 15px;
    --grid-gap: var(--s-4);
  }

  .app-main { padding-inline: var(--s-4); }
  .feed-grid { gap: var(--s-3); }

  /* 手指友好：非图标按钮至少 44px 高 */
  .btn:not(.btn--icon) { min-height: 44px; }
  .tab { padding-block: 10px; }
  .nav__link { font-size: 15px; }

  /* 列表行更松一点，别挤成一团 */
  .list-row { padding-block: 12px; }
}

/* 更窄的老手机：进一步降低装饰开销 */
@media (max-width: 560px) {
  .aurora,
  .backdrop__layer { opacity: .85; }
}

/* ==========================================================================
   一屏放下：不要横向拖动才能看到功能
   ========================================================================== */
@media (max-width: 860px) {
  /* tabs（我的/后台那些）横向排不下时**换行**，全部可见，不用左右拖 */
  .tabs { flex-wrap: wrap; }
  .tab { padding: 8px 12px; font-size: var(--fs-sm); }

  /* 顶部动作区更紧凑，避免把搜索/图标挤出屏幕 */
  .nav__actions { gap: 4px; }
  .nav__actions .btn--icon { padding: 6px; }
  .nav__inner { gap: var(--s-2); }

  /* 页面留白收紧一点，内容多露一些 */
  .app-main { padding-inline: var(--s-3); }
  .card,
  .panel { padding: var(--s-3); }

  /* 类目栏也允许换行 */
  .catbar__chips { flex-wrap: wrap; }
}

/* App（原生外壳）里：状态栏已被隐藏，顶部不再留任何安全区 —— 内容直接顶到最上面。
   （之前给 .nav 加的 safe-area 顶部 padding 在 is-app 未生效时就是一条黑带，已移除。） */
html.is-app .nav {
  height: var(--nav-h);
  padding-top: 0;
}

@media (max-width: 860px) {
  /* 顶栏不再横向溢出：搜索框可以缩小、动作区可以压缩 */
  html, body { overflow-x: hidden; }
  .nav__inner { min-width: 0; }
  .nav__search { min-width: 0; }
  .nav__search .input { min-width: 0; width: 100%; }
  .nav__actions { flex-shrink: 1; min-width: 0; }
  .search-suggest { min-width: 0; max-width: calc(100vw - 24px); }
  /* 图标按钮点按目标放大（原来 38px 偏小） */
  .btn--icon { width: 42px; height: 42px; }
  /* 手机端取消「切换主题」按钮 */
  .nav__theme { display: none !important; }
}

/* ==========================================================================
   滚动流畅度（手机上最拖后腿的是「滚动时还在做动画」）
   ========================================================================== */
@media (max-width: 860px) {
  /* 卡片入场动画在滚动中会不断触发 —— 直接关掉，内容直接显示 */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* 点按不加 300ms 延迟，手感跟手 */
  .btn, .tab, .chip, .nav__link, .tabbar__item, a { touch-action: manipulation; }

  /* 图片异步解码，减少主线程阻塞 */
  img { decoding: async; }

  /* 长列表里的行：视口外的先不渲染 */
  .list-row { content-visibility: auto; contain-intrinsic-size: 72px; }

  /* 滚动容器用原生惯性滚动 */
  .chat-box, .notif__list { -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   手机端：不许横向拖动 + 文字不出框 + 放不下就整体缩小
   ========================================================================== */
@media (max-width: 860px) {
  /* 1) 整页禁止横向滚动/拖动（含橡皮筋回弹） */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    touch-action: pan-y;          /* 只允许上下滑，不许左右拖 */
  }
  /* 任何元素都不超过视口宽度 */
  * { max-width: 100%; }

  /* 2) flex 子项默认 min-width:auto 会把父级撑破 —— 统一归零 */
  .nav__inner > *,
  .cluster > *,
  .list-row > *,
  .field > *,
  .card > *,
  .panel > * { min-width: 0; }

  /* 3) 文字换行，别溢出方框（长英文/URL/昵称都能断） */
  a, p, span, b, strong, small, label, h1, h2, h3, h4, li, td, th,
  .card, .panel, .tag, .chip, .btn, .tab, .list-row, .item-card__name,
  .post-card__body, .comment__body, .comment__author {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 4) 按钮/标签/页签这类"小方块"：不换行，超长就省略号，保证不出框 */
  .btn, .tab, .chip, .tag, .badge {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 5) 输入框有自己的固有宽度，会顶破容器 */
  input, textarea, select, button { max-width: 100%; min-width: 0; }
}

/* 放不下就整体缩小：更窄的屏幕把字号/间距整体降一档 */
@media (max-width: 400px) {
  :root {
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 15px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --s-5: 14px;
    --s-6: 18px;
  }
}
@media (max-width: 340px) {
  :root {
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 17px;
    --fs-xl: 22px;
  }
}

/* ==========================================================================
   点按即时反馈：去掉"点了要等一下才动"的感觉
   ========================================================================== */
@media (max-width: 860px) {
  /* 关掉系统自带的点击高亮（它有时间延迟），我们自己给即时反馈 */
  html, body { -webkit-tap-highlight-color: transparent; }

  /* 按下立刻缩一下 —— 这是最直接的"有反应了"信号 */
  .btn, .tab, .chip, .nav__link, .tabbar__item, .catbar__chip, .list-row, a {
    transition: transform .05s ease-out, background-color .05s ease-out, color .05s ease-out;
  }
  .btn:active, .tab:active, .chip:active, .catbar__chip:active, .list-row:active,
  .nav__link:active, .tabbar__item:active { transform: scale(.96); }
  .btn:active { filter: brightness(1.08); }
}

/* App（原生外壳）里：切页过渡几乎瞬时，避免"点了等一下才切过去" */
html.is-app ::view-transition-old(root),
html.is-app ::view-transition-new(root) { animation-duration: .1s; }

/* ==========================================================================
   自适应：整站尺寸跟着屏幕宽度等比缩放（小屏自动缩、大屏自动放）
   ========================================================================== */
@media (max-width: 860px) {
  :root {
    --fs-xs: clamp(11px, 2.9vw, 13px);
    --fs-sm: clamp(12px, 3.5vw, 15px);
    --fs-md: clamp(14px, 4.0vw, 16px);
    --fs-lg: clamp(17px, 5.0vw, 20px);
    --fs-xl: clamp(22px, 6.6vw, 27px);
    --fs-2xl: clamp(26px, 7.6vw, 32px);
    --s-3: clamp(8px, 2.6vw, 12px);
    --s-4: clamp(10px, 3.3vw, 16px);
    --s-5: clamp(14px, 4.4vw, 22px);
    /* 信息流最小列宽跟着屏幕走 —— 手机上也能摆下两列 */
    --feed-min-col: clamp(150px, 46vw, 240px);
  }
  .container { padding-inline: clamp(10px, 3.6vw, 16px); }
  .app-main { padding-block: clamp(12px, 4vw, 24px) clamp(20px, 6vw, 40px); }
}