/* ============================================
   仿闲鱼H5 - 全局样式
   主题色: 闲鱼黄 #FFD100
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: #333;
  background: #f5f5f5;
  max-width: 750px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  padding-bottom: 56px;
  overflow-x: hidden;
}
/* 聊天页面没有底部导航，去掉body的底部padding */
body.chat-page {
  padding-bottom: 0;
  height: 100%;
  min-height: 100%;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul, li { list-style: none; }
button { border: none; outline: none; cursor: pointer; font-family: inherit; }
input, textarea { outline: none; border: none; font-family: inherit; font-size: 14px; }

/* ========== 顶部导航 ========== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: 48px;
  background: #FFD100;
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 10px;
}
.topbar .back {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #333; flex-shrink: 0;
}
.topbar .title {
  flex: 1; text-align: center;
  font-size: 16px; font-weight: 600; color: #333;
}
.topbar .right {
  width: 28px; text-align: right; flex-shrink: 0;
  font-size: 14px; color: #333;
}

/* 搜索框 */
.search-box {
  flex: 1; height: 32px;
  background: #fff; border-radius: 16px;
  display: flex; align-items: center;
  padding: 0 12px; gap: 6px;
}
.search-box input {
  flex: 1; background: transparent;
  font-size: 13px; color: #333;
}
.search-box .icon { font-size: 14px; color: #999; }
.search-box .search-btn {
  font-size: 13px;
  color: #333;
  padding: 4px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.search-box .search-btn:active { opacity: 0.6; }

/* ========== 底部导航 ========== */
.tabbar {
  position: fixed; bottom: 0;
  left: 0; right: 0;
  margin: 0 auto;
  width: 100%; max-width: 750px;
  height: 56px;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  z-index: 100;
}
.tabbar .tab-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; color: #999; font-size: 11px;
}
.tabbar .tab-item.active { color: #FFD100; }
.tabbar .tab-item .icon { font-size: 22px; line-height: 1; position: relative; }
.tabbar .tab-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  background: #ff4d4f;
  color: #fff;
  font-size: 10px;
  border-radius: 8px;
  text-align: center;
  font-weight: normal;
}
.tabbar .tab-item.publish-btn {
  position: relative;
}
.tabbar .tab-item.publish-btn .icon {
  width: 44px; height: 28px;
  background: #FFD100;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #333; font-weight: bold;
}

/* ========== 分类导航 ========== */
.category-bar {
  background: #fff;
  padding: 12px 0;
  display: flex;
  overflow-x: auto;
  gap: 4px;
  -webkit-overflow-scrolling: touch;
}
.category-bar::-webkit-scrollbar { display: none; }
.category-bar .cat-item {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 13px; color: #666;
  border-radius: 14px;
  white-space: nowrap;
}
.category-bar .cat-item.active {
  background: #FFD100; color: #333; font-weight: 600;
}

/* ========== 商品瀑布流 ========== */
.goods-waterfall {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.goods-waterfall::after {
  content: '';
  flex: 1 1 45%;
  max-width: calc(50% - 4px);
}
.goods-card {
  flex: 1 1 calc(50% - 4px);
  max-width: calc(50% - 4px);
  display: block;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0;
}
.goods-card .goods-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: #f0f0f0;
}
.goods-card .goods-img-wrap {
  position: relative;
  width: 100%;
}
.goods-card .goods-sold-mask {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}
.goods-card .goods-sold-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 2;
}
.goods-card .goods-info {
  display: block;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.goods-card .goods-title {
  font-size: 13px; color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.goods-card .goods-price {
  color: #ff5000; font-size: 16px; font-weight: 700;
  margin-top: 6px;
}
.goods-card .goods-price .yuan { font-size: 12px; }
.goods-card .goods-meta {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 6px;
  font-size: 11px; color: #999;
}
.goods-card .seller {
  display: flex; align-items: center; gap: 4px;
  max-width: 60%;
}
.goods-card .seller .avatar {
  width: 16px; height: 16px; border-radius: 50%;
  background: #ddd;
}
.goods-card .seller .name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ========== 加载更多 ========== */
.load-more {
  text-align: center; padding: 16px;
  color: #999; font-size: 12px;
}

/* ========== 发布页 ========== */
.publish-form { padding: 12px; }
.publish-form .form-group {
  background: #fff; border-radius: 8px;
  padding: 12px; margin-bottom: 10px;
}
.publish-form .form-group label {
  display: block; font-size: 13px; color: #666;
  margin-bottom: 8px; font-weight: 600;
}
.publish-form .form-group input,
.publish-form .form-group textarea {
  width: 100%; font-size: 14px; color: #333;
  padding: 8px 0;
}
.publish-form .form-group textarea {
  min-height: 80px; resize: none;
}
.publish-form .price-row {
  display: flex; gap: 12px;
}
.publish-form .price-row .form-group { flex: 1; margin-bottom: 0; }

/* 图片上传 */
.upload-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.upload-grid .upload-item {
  width: calc(33.33% - 6px);
  aspect-ratio: 1;
  border-radius: 6px; overflow: hidden;
  position: relative;
}
.upload-grid .upload-item img {
  width: 100%; height: 100%; object-fit: cover;
}
.upload-grid .upload-item .del {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px;
  background: rgba(0,0,0,0.5); color: #fff;
  border-radius: 50%; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.upload-grid .upload-add {
  width: calc(33.33% - 6px);
  aspect-ratio: 1;
  border: 1px dashed #ddd; border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #999; font-size: 12px; gap: 4px;
}
.upload-grid .upload-add .plus { font-size: 24px; line-height: 1; }

/* 分类选择 */
.cat-select {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cat-select .cat-tag {
  padding: 6px 14px;
  background: #f5f5f5; border-radius: 14px;
  font-size: 13px; color: #666;
}
.cat-select .cat-tag.active {
  background: #FFD100; color: #333; font-weight: 600;
}

/* 提交按钮 */
.btn-primary {
  width: 100%; height: 44px;
  background: #FFD100; color: #333;
  border-radius: 22px; font-size: 16px; font-weight: 600;
  margin-top: 16px;
}
.btn-primary:active { opacity: 0.8; }

/* ========== 商品详情 ========== */
.detail-swiper {
  width: 100%; aspect-ratio: 1;
  background: #f0f0f0;
  position: relative; overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.detail-swiper img {
  width: 100%; height: 100%; object-fit: cover;
}
.detail-swiper .indicator {
  position: absolute; bottom: 10px; right: 12px;
  background: rgba(0,0,0,0.5); color: #fff;
  padding: 2px 8px; border-radius: 10px;
  font-size: 12px;
}
.detail-price-block {
  background: #fff; padding: 14px;
}
.detail-price-block .price {
  color: #ff5000; font-size: 24px; font-weight: 700;
}
.detail-price-block .price .yuan { font-size: 14px; }
.detail-price-block .original-price {
  color: #999; font-size: 13px;
  text-decoration: line-through; margin-left: 8px;
}
.detail-title {
  font-size: 16px; font-weight: 600; color: #333;
  line-height: 1.5; margin-top: 8px;
}
.detail-meta {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: 12px; color: #999;
}
.detail-section {
  background: #fff; margin-top: 8px; padding: 14px;
}
.detail-section .section-title {
  font-size: 14px; font-weight: 600; color: #333;
  margin-bottom: 8px;
}
.seller-card {
  display: flex; align-items: center; gap: 10px;
}
.seller-card .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #ddd;
}
.seller-card .info { flex: 1; }
.seller-card .name { font-size: 14px; font-weight: 600; color: #333; }
.seller-card .sub { font-size: 12px; color: #999; margin-top: 2px; }

/* 底部操作栏 */
.detail-bottom-bar {
  position: fixed; bottom: 56px; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: 750px;
  height: 56px; background: #fff;
  border-top: 1px solid #eee;
  display: flex; align-items: center;
  padding: 0 12px; gap: 10px;
  z-index: 100;
}
.detail-bottom-bar .action-icon {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 48px; color: #666; font-size: 11px; gap: 2px;
}
.detail-bottom-bar .action-icon .icon { font-size: 20px; }
.detail-bottom-bar .action-icon.active { color: #ff5000; }
.detail-bottom-bar .btn-chat {
  flex: 1; height: 38px;
  background: #fff; border: 1px solid #FFD100;
  color: #333; border-radius: 19px;
  font-size: 14px; font-weight: 600;
}
.detail-bottom-bar .btn-buy {
  flex: 1; height: 38px;
  background: #FFD100; color: #333;
  border-radius: 19px; font-size: 14px; font-weight: 600;
}

/* ========== 消息列表 ========== */
.msg-list { background: #fff; }
.msg-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-bottom: 1px solid #f5f5f5;
}
.msg-item .avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #ddd; flex-shrink: 0;
  position: relative;
}
.msg-item .avatar .badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  background: #ff5000; color: #fff;
  border-radius: 9px; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.msg-item .content { flex: 1; min-width: 0; }
.msg-item .content .top {
  display: flex; justify-content: space-between; align-items: center;
}
.msg-item .content .name {
  font-size: 15px; font-weight: 600; color: #333;
}
.msg-item .content .time { font-size: 12px; color: #999; }
.msg-item .content .last-msg {
  font-size: 13px; color: #999; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.empty-state {
  text-align: center; padding: 80px 20px;
  color: #999; font-size: 14px;
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }

/* ========== 聊天窗口 ========== */
.chat-page {
  height: 100vh;
  height: 100dvh; /* iOS动态视口，键盘弹出时自动收缩 */
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* 聊天页面顶部栏 */
.chat-page .topbar {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  z-index: 100;
}
.chat-messages {
  flex: 1;
  padding: 12px;
  background: #ededed; /* 聊天区域单独背景色（微信风格） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
/* 聊天输入栏：flex布局，自动贴底 */
.chat-page .chat-input-bar {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  z-index: 99;
}
.chat-msg {
  display: flex; margin-bottom: 16px;
  align-items: flex-start; gap: 8px;
}
.chat-msg .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #ddd; flex-shrink: 0;
}
.chat-msg .bubble {
  max-width: 70%; padding: 10px 12px;
  border-radius: 12px; font-size: 14px;
  line-height: 1.5; word-break: break-all;
}
.chat-msg.other .bubble {
  background: #fff; color: #333;
  border-top-left-radius: 4px;
}
.chat-msg.me { flex-direction: row-reverse; }
.chat-msg.me .bubble {
  background: #FFD100; color: #333;
  border-top-right-radius: 4px;
}
.chat-msg .time {
  text-align: center; font-size: 11px; color: #bbb;
  margin: 8px 0;
}
/* 日期分隔线 */
.chat-time-divider {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin: 16px 0 12px;
  position: relative;
}
.chat-time-divider::before,
.chat-time-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: #eee;
}
.chat-time-divider::before { left: 5%; }
.chat-time-divider::after { right: 5%; }
/* 消息气泡包裹（含已读状态） */
.chat-msg .bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}
.chat-msg.me .bubble-wrap {
  align-items: flex-end;
}
.chat-msg.other .bubble-wrap {
  align-items: flex-start;
}
.chat-msg .bubble-wrap .bubble {
  max-width: 100%;
}
/* 已读/未读状态 */
.chat-msg .msg-status {
  font-size: 11px;
  margin-top: 4px;
  padding: 0 4px;
}
.chat-msg .msg-status.read {
  color: #07c160;
}
.chat-msg .msg-status.unread {
  color: #999;
}

/* 聊天输入栏 */
.chat-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #fff; border-top: 1px solid #eee;
  z-index: 99;
  box-sizing: border-box;
}
.chat-input-bar input {
  flex: 1; height: 38px;
  background: #f5f5f5; border-radius: 19px;
  padding: 0 14px; font-size: 14px;
}
.chat-input-bar .btn-send {
  width: 60px; height: 38px;
  background: #FFD100; color: #333;
  border-radius: 19px; font-size: 14px; font-weight: 600;
}

/* ========== 个人中心 ========== */
.my-header {
  background: linear-gradient(135deg, #FFD100, #FFB800);
  padding: 30px 16px 24px;
  display: flex; align-items: center; gap: 14px;
}
.my-header .avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; border: 2px solid #fff;
}
.my-header .info { flex: 1; }
.my-header .name {
  font-size: 18px; font-weight: 700; color: #333;
}
.my-header .phone { font-size: 13px; color: #666; margin-top: 4px; }
.my-header .edit-btn {
  padding: 6px 14px; background: rgba(255,255,255,0.3);
  border-radius: 14px; font-size: 12px; color: #333;
}

.my-menu {
  background: #fff; margin: 10px 12px;
  border-radius: 10px; overflow: hidden;
}
.my-menu .menu-item {
  display: flex; align-items: center;
  padding: 14px; border-bottom: 1px solid #f5f5f5;
  font-size: 14px; color: #333;
}
.my-menu .menu-item:last-child { border-bottom: none; }
.my-menu .menu-item .icon {
  width: 24px; font-size: 18px; margin-right: 10px;
  text-align: center;
}
.my-menu .menu-item .arrow {
  margin-left: auto; color: #ccc; font-size: 14px;
}

.my-stats {
  display: flex; background: #fff;
  margin: 10px 12px; border-radius: 10px;
  padding: 16px 0;
}
.my-stats .stat-item {
  flex: 1; text-align: center;
  border-right: 1px solid #f5f5f5;
}
.my-stats .stat-item:last-child { border-right: none; }
.my-stats .stat-item .num {
  font-size: 20px; font-weight: 700; color: #333;
}
.my-stats .stat-item .label {
  font-size: 12px; color: #999; margin-top: 4px;
}

/* ========== 登录注册 ========== */
.auth-page {
  height: calc(100vh - 104px); /* 顶部48px + 底部56px */
  height: calc(100dvh - 104px);
  background: #fff;
  padding: 40px 24px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 内容靠上 */
  overflow: hidden;
}
.auth-page .logo {
  text-align: center; margin-bottom: 36px;
}
.auth-page .logo .icon {
  font-size: 56px;
}
.auth-page .logo .logo-img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: block;
  margin: 0 auto;
}
.auth-page .logo .title {
  font-size: 22px; font-weight: 700; color: #333;
  margin-top: 14px;
}
.auth-form .form-item {
  margin-bottom: 20px;
}
.auth-form .form-item label {
  display: block; font-size: 13px; color: #666;
  margin-bottom: 6px;
}
.auth-form .form-item input {
  width: 100%; height: 46px;
  border: 1px solid #eee; border-radius: 8px;
  padding: 0 14px; font-size: 15px;
}
.auth-form .form-item input:focus { border-color: #FFD100; }
.auth-form .btn-submit {
  width: 100%; height: 46px;
  background: #FFD100; color: #333;
  border-radius: 23px; font-size: 16px; font-weight: 600;
  margin-top: 10px;
}
.auth-page .switch-link {
  text-align: center; margin-top: 20px;
  font-size: 13px; color: #666;
}
.auth-page .switch-link a { color: #FFB800; }

/* ========== 好友系统 ========== */
.search-bar {
  display: flex; gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.search-bar input {
  flex: 1; height: 40px;
  border: 1px solid #eee; border-radius: 20px;
  padding: 0 16px; font-size: 14px;
}
.search-bar button {
  width: 70px; height: 40px;
  background: #FFD100; color: #333;
  border-radius: 20px; font-size: 14px; font-weight: 600;
}
.user-item, .friend-item, .request-item {
  display: flex; align-items: center;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}
.user-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}
.user-info {
  flex: 1;
}
.user-name {
  font-size: 15px; font-weight: 600; color: #333;
  margin-bottom: 4px;
}
.user-phone, .user-desc {
  font-size: 13px; color: #999;
}
.user-time {
  font-size: 12px; color: #ccc;
  margin-top: 4px;
}
.btn-add, .btn-agree {
  padding: 6px 16px;
  background: #FFD100; color: #333;
  border-radius: 16px; font-size: 13px; font-weight: 600;
}
.btn-refuse, .btn-delete {
  padding: 6px 16px;
  background: #f5f5f5; color: #999;
  border-radius: 16px; font-size: 13px;
  margin-left: 8px;
}
.btn-chat {
  padding: 6px 16px;
  background: #FFD100; color: #333;
  border-radius: 16px; font-size: 13px; font-weight: 600;
}
.btn-disabled {
  padding: 6px 16px;
  background: #f5f5f5; color: #ccc;
  border-radius: 16px; font-size: 13px;
}
.request-actions, .friend-actions {
  display: flex; align-items: center;
}
.empty-tip {
  text-align: center;
  padding: 60px 20px;
  color: #999; font-size: 14px;
}
.add-link {
  color: #333; font-size: 14px;
  padding: 0 12px;
}
.grid-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: #ff4d4f; color: #fff;
  border-radius: 9px;
  font-size: 11px; line-height: 18px;
  text-align: center;
  padding: 0 4px;
}

/* ========== Toast ========== */
.toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.75); color: #fff;
  padding: 10px 20px; border-radius: 8px;
  font-size: 14px; z-index: 9999;
  max-width: 80%; text-align: center;
}

/* ========== 列表页通用 ========== */
.list-page { padding: 8px; }
.list-item {
  display: flex; gap: 10px;
  background: #fff; border-radius: 8px;
  padding: 10px; margin-bottom: 8px;
}
.list-item .cover {
  width: 90px; height: 90px; border-radius: 6px;
  object-fit: cover; background: #f0f0f0; flex-shrink: 0;
}
.list-item .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-item .title {
  font-size: 14px; color: #333;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.list-item .price {
  color: #ff5000; font-size: 16px; font-weight: 700;
  margin-top: auto;
}
.list-item .meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #999; margin-top: 4px;
}
.list-item .status-tag {
  display: inline-block; padding: 2px 8px;
  border-radius: 4px; font-size: 11px;
}
.status-tag.on { background: #e8f5e9; color: #4caf50; }
.status-tag.off { background: #f5f5f5; color: #999; }
.status-tag.sold { background: #fff3e0; color: #ff9800; }

/* 订单状态 */
.order-status {
  font-size: 13px; font-weight: 600;
}
.order-status.pending { color: #ff9800; }
.order-status.done { color: #4caf50; }
.order-status.cancel { color: #999; }