/* ============================================================
   手机端适配（≤768px）
   目标：与 PC 保持同一套视觉语言（红色主调、同款卡片/按钮），
        只重排布局、压缩间距、放大触控、让编辑弹窗可用。
   加载顺序：必须在 style.css 之后（本文件靠后覆盖前者）。
   ============================================================ */

/* 浮动发帖按钮：默认（PC）不显示，仅手机端由下方媒体查询打开 */
.m-fab {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 1200;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #e53935, #c62828);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(198, 40, 40, .4);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-fab:active { transform: scale(.94); }
.nav-user-menu .nav-mobile-logout { display: none; }

/* ---------- 通用：防止横向溢出 ---------- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  img, video, iframe, embed, table, pre { max-width: 100% !important; }
  img, video { height: auto; }
  .main, .article-page, .trade-page { overflow-wrap: break-word; word-break: break-word; }

  /* ---------- 顶部红色导航：紧凑 + 横向滑动 ---------- */
  .top-nav { height: 44px; line-height: 44px; }
  .top-nav-inner { padding: 0 0 0 8px; gap: 8px; }
  .top-nav-left {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }
  .top-nav-left .dragon-icon { display: none; }
  .top-nav-left a {
    padding: 0 11px;
    font-size: 16px;
    white-space: nowrap;
  }
  .top-nav-right { flex: 0 0 auto; }
  .top-nav-right a { font-size: 14px; padding: 0 6px; }
  .top-nav-right .theme-toggle { transform: translateX(4px); }
  /* 手机端没有 hover，「板块」悬停面板会误触发，直接隐藏（该入口本身是可点链接） */
  .nav-boards-panel { display: none !important; }
  /* 用户菜单在手机上改为点击可展开（:focus-within 已支持），缩小尺寸 */
  .nav-user-menu { min-width: 120px; }
  .nav-user-menu a { font-size: 14px; line-height: 40px; }
  .top-nav-right .nav-user-link .username,
  .top-nav-right .nav-desktop-logout { display: none; }
  .top-nav-right .nav-user-wrap .nav-user-menu {
    opacity: 0; transform: translateY(-10px); pointer-events: none;
  }
  .top-nav-right .nav-user-wrap.is-open .nav-user-menu {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .top-nav-right .nav-user-menu .nav-mobile-logout { display: block; }

  /* ---------- Logo + 搜索：Logo 缩小，搜索整行 ---------- */
  .header-inner {
    padding: 8px 10px;
    gap: 8px;
    /* style.css 原 768px 断点把它改成了 column，这里必须改回 row，
       Logo 与搜索才能同一行（搜索框弹性收缩） */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  .logo-img { height: 54px; }
  .logo-url { font-size: 20px; }
  .logo-text h1 { font-size: 24px; }
  .logo-text p { font-size: 13px; margin-top: 4px; }
  .search-area { flex: 1 1 auto; min-width: 0; }
  .search-box { width: 100%; max-width: 175px; margin-left: auto; }
  /* input 必须允许收缩（min-width:0），否则默认固有宽度会把放大镜按钮挤出框外 */
  .search-box input { padding: 7px 12px; font-size: 13px; min-width: 0; }
  .search-box button { padding: 7px 10px; flex-shrink: 0; }

  /* ---------- 主内容 ---------- */
  .main { padding: 0 10px; margin: 6px auto 12px auto; }

  /* 统计栏：原 style.css 768px 断点改成了 column（发新帖被挤到下一行），
     这里必须改回 row + nowrap，让「发新帖」保持在统计数字同一行右侧 */
  .stats-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 8px;
  }
  .stats-info { font-size: 12px; white-space: nowrap; min-width: 0; }
  .stats-info span { margin-right: 7px; }
  .stats-info strong { font-size: 13px; }
  .btn-newpost { padding: 5px 12px; font-size: 13px; flex-shrink: 0; }

  /* 未登录导航（手机端）：隐藏「注册」文字链接，
     「登录」只留小人物图标（font-size:0 藏文字），点击仍进登录页 */
  .top-nav-right .nav-reg-link { display: none; }
  .top-nav-right .nav-login-link { font-size: 0; padding: 0 10px; }
  .top-nav-right .nav-login-link .ico { width: 20px; height: 20px; }

  /* ---------- 首页：三列最新 → 单列紧凑 ---------- */
  .latest-section {
    padding: 12px 12px;
    margin-bottom: 12px;
    border-radius: 6px;
  }
  .latest-grid { grid-template-columns: 1fr; gap: 16px; }
  .latest-col h3 { font-size: 16px; padding-bottom: 8px; margin-bottom: 10px; }
  .latest-col li { padding: 8px 0; font-size: 14px; gap: 8px; }

  /* ---------- 板块页 ---------- */
  .forum-breadcrumb-bar {
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }
  .forum-breadcrumb-bar .btn { padding: 6px 14px; font-size: 14px; }
  .forum-info-card {
    padding: 12px;
    gap: 12px;
    margin-bottom: 10px;
  }
  .forum-info-card .forum-icon { width: 42px; height: 42px; border-radius: 6px; }
  .forum-info-card .forum-title-row { flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
  .forum-info-card .forum-title-row h2 { font-size: 17px; }
  .forum-tabs-bar { padding: 0 2px; }
  .forum-tabs a { padding: 0 12px; font-size: 14px; }

  /* ---------- 帖子列表 ---------- */
  .thread-item { padding: 10px 0; gap: 10px; }
  .thread-item .thread-author { width: 38px; height: 38px; font-size: 16px; }
  .thread-item .thread-title { font-size: 15px; }
  .thread-item .thread-meta { font-size: 12px; }
  .thread-item .thread-meta span { margin-right: 8px; }
  .thread-item .thread-stats { font-size: 12px; }
  .pagination { flex-wrap: wrap; gap: 4px; }
  .pagination a, .pagination span { padding: 5px 10px; font-size: 13px; }

  /* ---------- 帖子详情 ---------- */
  .thread-detail-header { padding-bottom: 12px; margin-bottom: 14px; }
  .thread-detail-header .thread-title-row { flex-direction: column; gap: 6px; }
  .thread-detail-header h1 { font-size: 19px; line-height: 1.4; }
  .thread-detail-header .thread-stats-top { padding-top: 0; gap: 12px; font-size: 12px; }
  .thread-detail-header .meta { font-size: 13px; gap: 10px; margin-top: 8px; }
  .thread-detail-header .actions { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .thread-detail-header .actions .btn { font-size: 13px; padding: 5px 10px; }

  /* 楼层卡片：压缩内边距，内容区不再强制最小宽度 */
  .post-item-ys { padding: 12px; margin-bottom: 10px; border-radius: 6px; }
  .post-item-ys .post-header-ys { gap: 8px; margin-bottom: 10px; padding-bottom: 8px; }
  .post-item-ys .avatar-ys { width: 32px; height: 32px; font-size: 14px; }
  .post-item-ys .username-ys { font-size: 14px; padding-top: 4px; }
  .post-item-ys .time-ys,
  .post-item-ys .floor-ys { font-size: 12px; padding-top: 5px; }
  .post-item-ys .post-content-inline {
    font-size: 15px;
    line-height: 1.75;
    min-width: 0;          /* PC 端 300px 最小宽在手机上会把卡片撑破 */
  }
  .op-post .post-edited-tip { display: none; }
  .post-item-ys .post-content-inline img,
  .post-item-ys .post-content-inline video,
  .post-item-ys .post-content-inline iframe { max-width: 100%; }

  /* 抖音式楼层（详情页主楼/回复） */
  .douyin-avatar { width: 36px; height: 36px; flex-shrink: 0; }
  .douyin-content { min-width: 0; }
  .douyin-text { font-size: 15px; line-height: 1.75; }
  .douyin-footer, .post-stats { flex-wrap: wrap; gap: 8px; }
  .child-container { margin-left: 0; }

  /* ---------- 页脚：竖排居中 ---------- */
  .footer { padding: 14px 10px; }
  .footer-inner { flex-direction: column; text-align: center; gap: 4px; }

  /* ---------- 编辑/发帖弹窗：手机上铺满可用 ----------
     这些样式由 JS 动态注入到 head，加载顺序在样式表之后，
     同优先级下会覆盖外部 CSS，所以这里统一加 !important 保证生效。 */
  .np-mask, .em-mask, .ted-mask {
    padding: 10px 8px 40px !important;
    align-items: flex-start !important;
  }
  .np-box, .em-box, .ted-box {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 6px !important;
  }
  .np-head, .em-head, .ted-head { padding: 12px 14px !important; font-size: 15px !important; }
  .np-body, .em-body, .ted-body { padding: 12px 14px !important; }
  .np-foot, .em-foot, .ted-foot { padding: 12px 14px !important; }
  .np-foot .btn, .em-foot .btn, .ted-foot .btn { padding: 8px 16px; font-size: 15px; }
  /* 编辑器在手机上给够可视高度，工具栏超宽可横向滑动（隐藏滚动条保持简洁） */
  #npEditor, #emEditor, #tedEditor { height: 200px !important; }
  #npToolbar .w-e-bar, #emToolbar .w-e-bar, #tedToolbar .w-e-bar,
  #reply-toolbar .w-e-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #npToolbar .w-e-bar::-webkit-scrollbar, #emToolbar .w-e-bar::-webkit-scrollbar,
  #tedToolbar .w-e-bar::-webkit-scrollbar, #reply-toolbar .w-e-bar::-webkit-scrollbar { display: none; }
  /* 视频/图片插入面板：宽度自适应屏幕 */
  .np-vpanel, .rv-vpanel { width: calc(100vw - 24px) !important; max-width: 380px; }

  /* ---------- 交易担保页：筛选一行式 + 表格卡片化（接近 PC 观感） ----------
     trade.html 的样式写在页内 <style>（晚于本文件加载），但下面选择器都带 .trade-page
     前缀提高特异性，可直接覆盖，无需 !important。 */
  /* 筛选区：标签+选项同一行，选项横向滑动，按钮文字禁止竖排 */
  .trade-page .filter-section { padding: 12px; }
  .trade-page .filter-row { align-items: center; gap: 8px; margin-bottom: 10px; }
  .trade-page .filter-label { width: auto; font-size: 13px; line-height: 30px; }
  .trade-page .filter-options,
  .trade-page .sort-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
  }
  .trade-page .filter-options::-webkit-scrollbar { display: none; }
  .trade-page .filter-option,
  .trade-page .sort-option,
  .trade-page .version-btn,
  .trade-page .server-btn {
    white-space: nowrap;
    flex: 0 0 auto;
    padding: 5px 12px;
    font-size: 13px;
  }
  .trade-page .filter-input { width: 74px; padding: 5px 8px; font-size: 13px; }
  .trade-page .version-server-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .trade-page .version-server-row::-webkit-scrollbar { display: none; }
  /* 页头收窄 */
  .trade-page .trade-header { padding: 12px 14px; margin-bottom: 10px; }
  .trade-page .trade-title { font-size: 18px; margin-bottom: 4px; }
  .trade-page .trade-title::before { height: 18px; }
  .trade-page .trade-desc { font-size: 13px; }

  /* 角色列表：6 列表格 → 卡片（标题+价格一行，区服+到期一行）
     职业/等级两列隐藏：标题「41.36级 男 道士 声望:0」里已含，纯冗余 */
  .trade-page .trade-list { border-radius: 6px; }
  .trade-page .trade-table,
  .trade-page .trade-table tbody { display: block; }
  .trade-page .trade-table thead { display: none; }
  .trade-page .trade-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
  }
  .trade-page .trade-table td {
    display: block;
    padding: 0;
    border-bottom: none;
    font-size: 13px;
    white-space: nowrap;
  }
  .trade-page .trade-table td:nth-child(3),
  .trade-page .trade-table td:nth-child(4),
  .trade-page .trade-table td:nth-child(6) { display: none; }
  /* 标题固定独占一行（否则标题弹性宽度会让下面一行的起点 X 坐标对不齐） */
  .trade-page .trade-table td:nth-child(1) { flex: 0 0 100%; min-width: 0; white-space: normal; }
  .trade-page .trade-table td:nth-child(1) .role-title { font-size: 15px; }
  /* 第二行固定：区服靠左、价格靠右，所有卡片 X 坐标一致 */
  .trade-page .trade-table td:nth-child(2) { flex: 0 0 auto; color: #999; }
  .trade-page .trade-table td:nth-child(5) { margin-left: auto; }
  .trade-page .trade-table td:nth-child(5) .price { font-size: 16px; }
  .trade-page .trade-table td[colspan] { flex: 1 1 100%; }

  /* ---------- 寄售详情页（trade-detail）：两栏改上下、栅格 4→2 列 ----------
     该页样式在页内 <style>（晚于本文件），用 .detail-page 前缀提特异性覆盖。 */
  .detail-page .detail-layout { flex-direction: column; }
  .detail-page .detail-right { width: 100%; }
  /* 底部区块取消 PC 端为右栏预留的 296px 右边距（手机上会把区块挤成窄条） */
  .detail-page .bottom-section { margin-right: 0; }
  .detail-page .detail-header { flex-wrap: wrap; gap: 8px; padding: 14px; }
  .detail-page .detail-title { font-size: 18px; flex: 1 1 100%; line-height: 1.5; }
  .detail-page .detail-title .title-price { font-size: 17px; margin-left: 8px; }
  .detail-page .expire-tag { white-space: normal; }
  /* 信息栅格 4 列 → 2 列，标签值不再逐字竖排折行 */
  .detail-page .info-grid { padding: 6px 14px; }
  .detail-page .info-row { grid-template-columns: repeat(2, 1fr); }
  .detail-page .info-item { padding: 12px 0; }
  .detail-page .info-item:not(:last-child) { padding-right: 10px; }
  .detail-page .info-label { font-size: 13px; margin-bottom: 6px; }
  .detail-page .info-value { font-size: 14px; overflow-wrap: anywhere; }
  .detail-page .info-value.price { font-size: 20px; }
  /* 各区块内边距统一收窄；联系卖家按钮拉满方便点按 */
  .detail-page .skills-card-header { padding: 12px 14px; font-size: 15px; }
  .detail-page .skills-card-body { padding: 10px 14px; }
  .detail-page .skill-item { margin-right: 16px; }
  .detail-page .section-header { padding: 12px 14px; font-size: 15px; }
  .detail-page .remark-section .remark-content { padding: 14px; font-size: 14px; }
  .detail-page .seller-action { padding: 14px; }
  .detail-page .seller-action .btn-contact { width: 100%; padding: 11px 0; text-align: center; }
  .detail-page .safety-tip { margin: 0 14px 14px; padding: 10px 12px; }
  .detail-page .back-section { padding: 0 14px 14px; }
  .detail-page .contact-section { padding: 0 14px 14px; }
  .detail-page .flow-card { padding: 14px; margin-bottom: 12px; }
  .detail-page .flow-node { padding: 5px 10px; font-size: 12px; }

  /* ---------- 触控友好：主要按钮/链接放大命中区 ---------- */
  .btn { min-height: 36px; }
  .action-btn, .op-edit-btn, .op-fav-btn { font-size: 14px; }

  /* ---------- 浮动发帖按钮（手机端快捷入口） ---------- */
  .m-fab { display: flex; }
}

/* ---------- 超小屏（≤400px）再收一档 ---------- */
@media (max-width: 400px) {
  .top-nav-left a { padding: 0 9px; font-size: 16px; }
  .logo-img { height: 46px; }
  .search-box { max-width: 160px; }
  .search-box input { padding: 6px 10px; font-size: 12px; }
  .thread-detail-header h1 { font-size: 17px; }
  .thread-item .thread-author { width: 34px; height: 34px; }
  .latest-col li { font-size: 13px; }
}

/* ---------- 平板/横屏（769–1024px）：仅收窄容器与栅格 ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .main, .header-inner, .top-nav-inner, .footer-inner { padding-left: 12px; padding-right: 12px; }
  .latest-grid { gap: 18px; }
  .logo-img { height: 64px; }
}

/* 手机板块列表：标题占满右侧，浏览/评论与作者日期同行。 */
@media (max-width: 768px) {
  .forum-page #threadList .thread-item-ys {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
  }
  .forum-page #threadList .thread-item-ys > .avatar-link {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .forum-page #threadList .thread-avatar-ys { width: 36px; height: 36px; }
  .forum-page #threadList .thread-content-ys { display: contents; }
  .forum-page #threadList .thread-title-ys {
    grid-column: 2 / -1;
    grid-row: 1;
    min-width: 0;
    margin-bottom: 0;
    line-height: 24px;
  }
  .forum-page #threadList .thread-info-ys {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    gap: 6px;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
  }
  .forum-page #threadList .thread-info-ys > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .forum-page #threadList .thread-info-ys > span { flex-shrink: 0; }
  .forum-page #threadList .thread-right-ys {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    gap: 8px;
    white-space: nowrap;
  }
  .forum-page #threadList .thread-right-ys .stat-item {
    gap: 3px;
    font-size: 12px;
    line-height: 18px;
  }
  .forum-page #threadList .thread-right-ys .stat-item .ico { width: 14px; height: 14px; }
}