/* ============================================================
 * 拉群卡美化（2026-10-23）
 *
 * 这张卡就是「拍下商品之后进群」时出现在聊天里的那张邀请卡。
 *
 * 原来的样子（public/assets/index.css 里）：
 *   .group-invite-card{background:#fff;border-radius:12px;border:1px solid #e5e5e5}   ← 只有硬边框，没有阴影
 *   .card-header{padding:12px;gap:10px;border-bottom:1px solid #f2f2f2}
 *   .group-avatar{width:44px;height:44px;border-radius:8px}                          ← 图偏小
 *   .group-name{font-size:14px;white-space:nowrap}                                   ← 商品名被挤成一行截断
 *   .group-desc{font-size:12px;color:#999}
 *   .card-footer{padding:10px 12px}
 *   .join-btn{height:36px;border-radius:6px;font-size:14px}                          ← 按钮又小又平
 *
 * 这里整体重做一版现代卡片风：更大的圆角、柔和的双层阴影、图片 56px、
 * 商品名允许两行、按钮 40px 带质感。只改样式，不动任何逻辑。
 *
 * 三点说明：
 * 1. 全部用 .group-invite-card 做祖先限定。因为 card-header / card-footer
 *    这些类名在别的组件里也有同名的，限定住才不会误伤。这里刻意**不加**
 *    组件的 scope（如 [data-v-d7c5d04c]）：前端包里拉群卡有两个组件副本，
 *    各自 scope 不同，加了 scope 会导致其中一个副本的美化不生效。
 * 2. 按钮底色是前端内联写死的平台色（螃蟹 #f6a046 / 盼之 #d93026），
 *    所以这里不碰 background，只加圆角和阴影，保住平台配色。
 * 3. .invite-card-msg 那一条仍保留 scope 限定 —— 这个类名在别的组件里
 *    也用得很多，放开会误伤别处的卡片宽度。
 * ============================================================ */

/* 卡片外层容器 */
.invite-card-msg[data-v-d7c5d04c] { max-width: 300px; }

/* 卡片本体：更大圆角、柔和双层阴影、把生硬的灰边换成极淡描边 */
.group-invite-card {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, .06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -8px rgba(16, 24, 40, .16);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s cubic-bezier(.2, .8, .2, 1);
}
.group-invite-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 36px -10px rgba(16, 24, 40, .22);
}

/* 图文行（图片在左、文字在右） */
.group-invite-card .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(16, 24, 40, .05);
}

/* 商品图 */
.group-invite-card .group-avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #f5f6f8;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06);
}
.group-invite-card .group-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 文字区 */
.group-invite-card .group-info { flex: 1; min-width: 0; }

/* 商品名 + 编号：允许两行，别再挤成一行截断 */
.group-invite-card .group-name {
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.35;
  margin-bottom: 4px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* 商品名格式是「名称 出售数量：N」，中间有空格。
     keep-all 让中文只在空格/标点处断行，就不会出现「出售数 / 量：1」这种
     把词劈开的断法；万一遇到一个超长无空格的名称，overflow-wrap 兜底允许硬断。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 客服名那一行 */
.group-invite-card .group-desc {
  font-size: 12.5px;
  color: #86868b;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 按钮行 */
.group-invite-card .card-footer { padding: 10px 14px 14px; }

/* 按钮：保留内联的平台底色，只加形状和质感 */
.group-invite-card .join-btn {
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .5px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: filter .2s ease, transform .12s ease;
}
.group-invite-card .join-btn:hover { filter: brightness(1.06); }
.group-invite-card .join-btn:active { transform: scale(.985); filter: brightness(.95); }

/* 手机端收一点边距，别贴着屏幕边 */
@media (max-width: 480px) {
  .invite-card-msg[data-v-d7c5d04c] { max-width: calc(100vw - 100px); }
  .group-invite-card .card-header { padding: 12px 12px 10px; gap: 10px; }
  .group-invite-card .group-avatar { width: 48px; height: 48px; border-radius: 10px; }
  .group-invite-card .card-footer { padding: 9px 12px 12px; }
}